/* --- debug --- */
.localmarker { text-align: center; padding: 10px; display: none; }  /*** !!!!!!!!!!!!!!!! ***/

/* --- hover image preloader --- */
body:after
{
    display:none;
    content: url(imgs/SinglehashtagHover.png)
    	     url(imgs/ArrowLeftBigHighlight.gif)
    	     url(imgs/ArrowRightBigHighlight.gif);
}

/* --- general --- */
html { min-width: 220px; max-width: 1920px; padding: 0; margin:auto; }
body,
div,
p,
h1, h2, h3,
img { margin: 0; padding: 0; border: 0; float: none; position: relative; }

div { overflow: hidden; }
p a { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

.textleft { text-align: left; }
.textright { text-align: right; }
.textcenter { text-align: center; }


/* --- main pics --- */
#mainview { padding: 50px 80px; }
#mainview h1 { margin-bottom: 30px; }
#mainview h2 { margin-bottom: 14px; }
#mainview p.text,
#mainview p.textsmall { margin-bottom: 20px; }
#mainview .capitalwrapper { margin: 10px; }


/* --- blog --- */
#blogview { padding: 50px 80px; }
#blogview h1 { margin-bottom: 10px; }
#blogview h2 { margin-bottom: 30px; }
#blogview h3 { margin-bottom: 12px; }
#blogview time { margin-bottom: 20px; text-align: right; display: block; }
#blogview p.text,
#blogview p.textsmall { margin-bottom: 20px; }
#blogview .capitalwrapper { margin: 10px; }
#blogview .signature { text-align: right; margin-top: 40px; }

#blogentry { padding: 10px; }
#blogentry img { max-width: 100%; margin: 20px auto; display: block; }
#blogentry img.left { xfloat: left; }
#blogentry img.right { xfloat: right; }


/* --- header / footer --- */
#title #capital { width: 276px; height: 120px; background-image: url(imgs/Caption_puu_120.png); background-repeat: no-repeat; vertical-align: middle; }

.navigation .logo { position: absolute; left: 0px; top: 2px; }
.navigation .wrap { padding: 18px 10px 18px 130px; overflow: visible; }
.navigation .logo,
.navigation .wrap .sep,
.navigation .wrap span,
.navigation .wrap a { vertical-align: middle; }
.navigation .sep { display: inline-block; overflow: visible; }
.navigation .nav { white-space: nowrap; display: inline-block; overflow: visible; }
.navigation .point { padding-left: 5px; padding-right: 5px; }
.xnavigation_top { margin-bottom: 5px; }
.xnavigation_bottom { margin-top: 5px; }

.fullscreen { text-align: center; line-height: 0; }
.fullscreen img { cursor: pointer; }

#linkstop { text-align: center; padding: 10px 10px 10px 10px; }
#linksbottom { text-align: center; padding: 15px 10px 0px 10px; }
.links a { padding: 10px; margin: 0px 5px; white-space: nowrap; display: inline-block; }
.links a.newfeature { background: url(imgs/NewFeature.png) left 2px no-repeat; }

#footer { text-align: center; padding: 10px; }
#footer p { vertical-align: middle; padding: 15px; }
#footer a,
#footer span { white-space: nowrap; }
#footer .tag { border-top: 1px solid #A0A0A0; }
#footer .lang {  }


/* --- login / user --- */
#login,
#register { overflow: visible; margin: auto; padding: 50px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
#login { max-width: 400px; text-align: center; }
#register { max-width: 640px; }
#login form .jInputprompt { margin: 0 0 -0.5em 0.3em; }
#login form .wraplabel.submit { margin-top: 30px; }

#resetpw { margin: 10px; }
#resetpw,
#resetpw form { margin-bottom: 40px; max-width: 620px; overflow: visible; }
#resetpw form .jInputprompt { margin: 0 0 -0.6em 0.6em; }
#resetpw .loading { display: none; }


/* --- start screen --- */
#start { text-align: center; padding: 30px 0px; max-width: 1600px; margin: auto; }
#start .item { display: inline-block; margin: 3px; vertical-align: top; } /* padding: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #444444; } */
#start .item .itemtitle { display: block; padding: 15px 3px; }
#start .item .itemtitle span { display: inline-block; }
#start .item img { max-width: 100%; }


/* --- gallery view --- */
.gallery { text-align: center; padding: 20px 0px; }
.gallery .pic,
.gallery .item { display: inline-block; }
.gallery .pic img,
.gallery .item img { max-width: 100%; }
.gallery .pic { min-width: 113px; }
.gallery .pic:hover,
.gallery .pic,
.gallery .pic img,
.gallery .item img { vertical-align: bottom; }
.gallery .pic { margin: 2px; }
.gallery .item { margin: 4px; vertical-align: top; } /* -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #444444; } */
.gallery .item .itemtitle { display: block; padding: 5px 3px; }
.gallery .item .itemtitle span { display: inline-block; margin: 3px 0px; }
.gallery .galdate { margin-top: 20px; margin-bottom: 10px; }
.gallery span { display: inline-block; margin: 2px; }

.xgallery .withtext { padding: 10px 6px; }
.gallery .withtext span { display: block; margin: 3px; }

.specialgallery { text-align: left; margin-bottom: 30px; }
.specialgallery .pic,
.specialgallery .item { text-align: center; }

.searchgallery { text-align: left; }
.searchgallery .pic,
.searchgallery .item { text-align: center; }


/* --- image view --- */
.image { text-align: center; z-index: 1; overflow: hidden; }
.image img.mainpic { max-width: 100%; vertical-align: bottom; }

.jImagePreloader { display: none; }

.jStorage,
.jStorActID,
.jDispNoneLoading,
.jDispNoneFirstLast { display: none !important; }

.loading {  text-align: center; margin: 50px 0px; }

.arrows { position: absolute; top: 0px; left: 0px; width: 100%; height: 95%; }
.arrows .left,
.arrows .right { width: 50%; height: 100%; overflow: hidden; }
.arrows .left { text-align: left; float: left; }
.arrows .right { text-align: right; }

.arrows .arrow { top: 44%; display: block; width: 100%; height: 100%; z-index: 2; opacity: 0.15; filter:alpha(opacity=15); }
.arrows .left .arrow { background: url(imgs/ArrowLeftBig.gif) center left no-repeat; }
.arrows .right .arrow { background: url(imgs/ArrowRightBig.gif) center right no-repeat; }

.arrows .left .arrowhover:hover,
.arrows .right .arrowhover:hover { opacity: 1.0; filter:alpha(opacity=100); }
.arrows .left .arrowhover:hover { background-image: url(imgs/ArrowLeftBigHighlight.gif); }
.arrows .right .arrowhover:hover { background-image: url(imgs/ArrowRightBigHighlight.gif); }

.arrows .arrow { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.arrows .arrow:active { outline: none; }
.arrows .arrow:focus { outline: none; }

#descriptiontitlebox { text-align: center; padding: 10px; }
#descriptiontitlebox .maintitle { font-size: 23px; display: inline-block; }
#descriptiontitlebox .subtitle { padding-left: 10px; display: inline-block; }

#descriptiondatebox { text-align: center; margin: 10px 0px; }


/* --- comments --- */
.comments { }
.comments .comment { margin-bottom: 14px; overflow: hidden; }
.comments .img,
.comments .name { float: left; text-align: center; margin-right: 8px; }
.comments .img a,
.comments .img span,
.comments .name span { display: block; margin: 5px 0px; }
.comments .text { overflow: hidden; }
.comments .img,
.comments .name,
.comments .text { border: 1px solid #FAFAFA; min-height: 3.7em; padding: 5px 10px 5px 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.comments .text span,
.comments .text img { max-width: 100%; vertical-align: middle; }
.comments a.singletag { display: inline-block; padding: 10px; margin: -10px; background: url(imgs/Singlehashtag.png) 5px center no-repeat; } /* with padding/margin hack to make overflowing background image visible */
.comments a.singletag:hover { background-image: url(imgs/SinglehashtagHover.png); }

.imagecomments { margin: 0px auto; width: 80%; padding: 10px 5px 0px 5px; }
.imagecomments .name { min-width: 160px; }

.searchcomments { margin: 0px auto 40px auto; }
.searchcomments .img,
.searchcomments .name { width: 160px; }
.searchcomments .img img { max-width: 100%; vertical-align: bottom; }
.searchcomments .text span { display: block; }
.searchcomments .text .more { margin-top: 6px; }

.newcomment { margin: auto; max-width: 600px; padding: 0px 5px; text-align: center; overflow: visible; }
.newcomment #formwrapper { overflow: visible; }
.newcomment #smileypicker { width: 100%;  padding: 5px 0px; display: none; border: 1px solid #C8C8C8; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.newcomment #smileypicker img { margin: 5px; padding: 2px; border: 1px solid #C8C8C8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.newcomment #smileypickerbutton { position: absolute; bottom: -8px; right: 3px; padding: 1px; }
.newcomment input { margin-right: 10px; }

#commentscounter { text-align: center; margin: 20px 0px 0px 0px; }

#newbilddestages { margin: auto; padding: 20px 5px 10px 5px; overflow: visible; max-width: 200px; }
#newbilddestages form { text-align: center; }

#newvoting { width: 510px; margin: 10px auto; padding: 5px 5px; text-align: center; overflow: visible; border: 1px solid #FAFAFA; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
#votingbuttons { margin: 5px 0px; overflow: visible; }
#votingbuttons form { display: inline-block; }
#votingbuttons span { display: inline-block; margin: 0px 5px 10px 5px; }
#votingcounter { margin: 5px 0px; }


/* --- content --- */
#lastcommented,
#mostcommented,
#bilddestages,
#voting { padding: 5px; margin: 0px 0px 20px 0px; }
#lastcommented h2,
#mostcommented h2,
#bilddestages h2,
#voting h2 { padding: 3px; }
#lastcommented.preview,
#mostcommented.preview,
#bilddestages.preview { margin: 20px; border: 1px solid #303030; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

#preview { text-align: center; padding: 0px 10px; border-bottom: 1px solid #888888; }
#preview div { vertical-align: top; }

#preview #lastcommented,
#preview #mostcommented,
#preview #bilddestages { display: inline-block; }

#search { margin: 10px; }
#search,
#search #ajaxSearchWrapper { overflow: visible; }
#search form { margin-bottom: 40px; max-width: 600px; }
#search form .jInputprompt { margin: 0 0 -0.6em 0.6em; }
#search .loading { display: none; }

.nocontent { padding: 10px; text-align: center; }
.nocontent span { border: 1px solid #EEEEEE; width: 600px; max-width: 94%; padding: 80px 3%; display: inline-block; text-align: center; }
.nocontent span { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.nocontent .logo { margin: 10px 0px 10px 0px; width: 300px; max-width: 100%; }

#hashtags { margin: 10px; overflow: visible; }
#hashtags form { margin-bottom: 40px; max-width: 600px; }
#hashtags form .jInputprompt { margin: 0 0 -0.6em 0.6em; }
#hashtags #hashcloud { text-align: center; max-width: 1000px; margin: auto; }
#hashtags #hashcloud .singletag { padding: 5px 10px; display: inline-block; }


/* --- data --- */
.changedata { overflow: visible; max-width: 700px; margin: 10px; }
.viewdata { max-width: 1000px; }

.timepicker { overflow: visible; margin-bottom: 20px; }

.data .pseudotable { margin-bottom: 20px; }
.data .pseudotable .wraprow { margin-bottom: 5px; }
.data .pseudotable .fstcol { width: 30%; display: inline-block; }
.data .pseudotable .col { width: 69%; display: inline-block; padding: 0 0.5%; }

.data .item { margin-bottom: 20px; }
.data .item span,
.data .item img { vertical-align: bottom; }
.data .item p.capital { border-bottom: 1px solid #BBBBBB;  }
.data .item p.line { padding: 0 0.5em; }
.data .item p span.entry { display: inline-block; margin: 4px 0; }
.data .item p span.separator { padding: 0 1em; }
.data .pic { display: inline-block; text-align: center; margin: 5px 5px 0px 0px; }
.data .pic img { max-height: 30px; margin: 0 auto; }
.data .pic img,
.data .pic span { display: block; }


/* --- admin --- */
#admin { overflow: visible; }
#admin #showformfieldslink { display: none; }
#admin #showformfieldslink img,
#admin #resetfieldslink a { padding: 10px; }
#log .item { margin-bottom: 2px; }
#log .item p.capital { border-bottom: 1px solid #333333;  }
#log .item p span.entry { display: inline-block; margin: 3px 0; }
#log .item p span.entry_user { min-width: 11em; }
#log .item p span.entry_event { min-width: 20em; }
#log .item p span.separator { padding: 0 0.2em; }
#log .item p img { max-height: 30px; vertical-align: middle; }



@media screen and (max-width: 1060px) {

	#start,
	.gallery { padding: 0.3% 0; }
	
	#start .item,
	.gallery .item { margin: 0.3%; width: 32.5%; max-width: auto; }

	#start .item img,
	.gallery .item img { width: 100%; }
}

@media screen and (max-width: 1140px) {

	#xstart { max-width: 800px; }
}

@media screen and (max-width: 1000px) {

	#mainview { padding: 30px 60px; }

	#blogview { padding: 30px 60px; }
}

@media screen and (max-width: 940px) {

	.xnavigation_top { margin-bottom: 3px; }

	.gallery .pic { margin: 0.25%; width: 32.6%; max-width: auto; }
}

@media screen and (max-width: 800px) {

	#mainview { padding: 25px 40px; }
	#mainview h1 { margin-bottom: 20px; }
	#mainview h2 { margin-bottom: 15px; }
	#mainview p.text,
	#mainview p.textsmall { margin-bottom: 15px; }

	#blogview { padding: 25px 40px; }
	#blogview h1 { margin-bottom: 20px; }
	#blogview h2 { margin-bottom: 15px; }
	#blogview p.text,
	#blogview p.textsmall { margin-bottom: 15px; }

	#login,
	#register { padding: 25px; }

	.pseudotable .fstcol,
	.pseudotable .col { width: 100%; display: block; padding: 0 2px; }

	.imagecomments { width: 90%; }

	.searchcomments .img { width: 116px; }
	.searchcomments .name { width: 100px; }
}

@media screen and (max-width: 690px) {

	#xstart { max-width: auto; width: 100%; padding: 20px 0px; }

	.imagecomments { width: auto; }
	.imagecomments .name { min-width: 80px; }
}

@media screen and (max-width: 640px) {

	#mainview { padding: 15px 20px; }

	#blogview { padding: 15px 20px; }

	#title #capital { width: 400px; height: 90px; background-image: url(imgs/Caption_puu_90.png); }

	.navigation .logo { left: auto; right: 0px; top: -2px; opacity: 0.25; filter: alpha(opacity=25); }
	.navigation .wrap { padding: 13px 10px 13px 10px; }

	.specialgallery { text-align: center; }

	#lastcommented,
	#mostcommented,
	#bilddestages,
	#voting { margin: 0px 0px 20px 0px; border: 0; }
	#lastcommented h2,
	#mostcommented h2,
	#bilddestages h2,
	#voting h2,
	#lastcommented .text,
	#mostcommented .text,
	#bilddestages .text,
	#voting .text { text-align: center; }

	.arrows .left .arrow { background: url(imgs/ArrowLeftMedium.gif) center left no-repeat; }
	.arrows .right .arrow { background: url(imgs/ArrowRightMedium.gif) center right no-repeat; }
	
	#newvoting { width: auto; margin: 10px; padding: 2px 0px; }

	.newcomment input { margin-right: 20px; }
	
	.data .item p.line span.entry { display: block; white-space: nowrap; }
	.data .item p.line span.separator { display: none; }

	.imagecomments .text { min-height: 5.3em; }

	.searchcomments .name,
	.searchcomments .text { min-height: 0; }
	.searchcomments .name { float: none; margin: 0px; width: auto; }
	.searchcomments .name span { display: inline-block; vertical-align: middle; }
	.searchcomments .img { margin-right: 4px; }
}

@media screen and (max-width: 460px) {

	#start,
	.gallery { padding: 0.75% 0; }
	/*
	#start { max-width: auto; width: 100%; padding: 10px 0px 20px 0px; }
	*/

	.gallery .item,
	#start .item { margin: 0.75%; width: 48%; }

	.gallery .pic { margin: 0.5%; width: 48.5%; }
	.gallery .galdate { margin-top: 10px; }

	.arrows .left .arrow { background: url(imgs/ArrowLeftSmall.gif) center left no-repeat; }
	.arrows .right .arrow { background: url(imgs/ArrowRightSmall.gif) center right no-repeat; }

	.imagecomments .name,
	.imagecomments .text { min-height: 0; }
	.imagecomments .name { float: none; margin: 0px; min-width: auto; }
	.imagecomments .name span { display: inline-block; vertical-align: middle; }

	.searchcomments .img { min-height: 0; float: none; margin: 0px; width: auto; }
	.searchcomments .img img { max-height: 120px; }
}

@media screen and (max-width: 410px) {

	#mainview { padding: 10px 0px; }

	#blogview { padding: 10px 0px; }

	#title #capital { width: 300px; height: 75px; background-image: url(imgs/Caption_puu_75.png); }

	#login,
	#register { margin: 10px 20px; }

	.newcomment input { margin-right: 30px; }
	
	.changedata { margin: 10px; }
	
	#admin { margin: 10px; }
}

@media screen and (max-width: 310px) {

	#title #capital { width: 220px; height: 70px; background-image: url(imgs/Caption_puu_70.png); }

	.newcomment input { margin-right: 40px; }
}

@media screen and (max-width: 260px) {
	
	#start,
	.gallery { padding: 1% 0; }

	#start .item,
	.gallery .item { margin: 1% 0; width: 96%; }

	.gallery .pic { margin: 0.6% 0; width: 97.6%; }
}