/* Make HTML 5 elements display block-level for consistent styling */  


@font-face {
  font-display: swap;
  font-family: CCSymbols;
  font-synthesis: none;
  src: url(CCSymbols.woff2) format(woff2),
       url(CCSymbols.woff)  format(woff);
  unicode-range: u+a9, u+229c,
                 u+1f10d-1f10f,
                 u+1f16d-1f16f;
                 
  font-weight: 100;
}

header, nav, article, footer, address {  
	display: block;  
}  

html * {margin:0;padding:0;}

html {
	background:rgb(30, 31, 35);
    height:100%;margin:0;padding:0;color:black; 
    overflow-x:hidden;
}

body {
	font-family:CCSymbols,"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size:15px;text-align:center;height:100%;padding:0;margin:0;
}

header {
	position:fixed;padding-left:0px;left:0;top:0;right:0;
	height:42px;
	background:rgb(47, 48, 50);
	color:white;z-index:155;
	overflow:hidden;
	white-space:nowrap;
	border-bottom:1px solid #22242d;
	box-shadow: 0 -2px 10px #000;
}

#breadcrumb {
	height:27px;
	width:100%;
	position:fixed;
	top:43px;
	left:0px;
	z-index:160;
	color:white;
	text-align:left;
	color:#bbb;
	padding-left:20px;
	font-size:14px;
	overflow:hidden;
}

#filter {
	max-width:600px;
	border:1px solid black;
	font-size:15px;
	padding:10px;
	margin:10px 0 20px 0 !important;
}


#breadcrumb .element, #breadcrumb div.seperator {
	float:left;
}

#breadcrumb a {color:#bbb;text-decoration:none;}

#breadcrumb a:hover {color:#ddd;text-decoration:none;}

#breadcrumb .element {margin-top:5px}

#breadcrumb div.seperator {width:7px;height:27px;margin-right:10px;margin-left:10px;background:url(seperator.png)}

#message {
  transition-property: opacity;
  transition-duration: 2s;
  transition-delay: 0s;
  background:rgba(0,0,0,0.8);
  width:400px;
  padding:20px;
  position:fixed;
  bottom:50px;
  left:50%;
  margin-left:-210px;
  font-size:20px;
  text-align:left;
  z-index:1000;
  opacity:0;
  color:white;
  text-align:center;
  display:none;
 }

#functionbar2 {
	float:right;
	margin-top:5px;
	margin-right:15px;
	color:rgb(47, 48, 50);
	font-size:13px;

}

#functionbar2 a {color:#fff;padding-right:13px;text-decoration:none;opacity:0.85}

#functionbar2 a:hover {opacity:1}

#functionbar select, #functionbar2 select {hheight:12px}

#functionbar2 img {display:inline;height:20px;margin-right:4px;position:relative;top:-2px;opacity:0.95;vertical-align:middle}


#functionbar {
	box-shadow: 0 2px 10px #000; -webkit-box-shadow: 0 2px 10px #000; -moz-box-shadow: #000 0px 2px 10px;
	height:26px;
	width:100%;
	position:fixed;
	bottom:0px;
	left:0px;
	z-index:150;
	background:rgb(47, 48, 50);
	border-top:1px solid #4f4f4f;
	text-align:left;
	color:#eee;
	font-size:13px;
	overflow:hidden;
	text-align:right;
	padding-top:1px;
}

#functionbar a {color:#fff;padding-right:13px;text-decoration:none;opacity:0.85;line-height:25px;position:relative;}

#functionbar a:hover {opacity:1}

#functionbar span.seperator {padding-right:10px;border-left:1px solid rgba(255,255,255,0.5);}

#functionbar img {display:inline;height:20px;margin-right:4px;position:relative;top:-2px;opacity:0.95;vertical-align:middle}

header a.button, header a.activebutton {
	display:block;
	height:100%;margin:0;font-size:15px;float:left;
	color:#ddd;
	padding:12px 17px 0 17px;
	background:transparent;
	vertical-align:middle;
	text-decoration:none;
	box-sizing:border-box;
}

header a.button img,
header a.activebutton img {display:none}

#button_info, #button_privacy, #button_about {float:right;margin-right:10px}
#button_login, #button_logs,#button_upload {float:right;}

#button_info {width:200px}


header div.trenner, header div.trennerrechts {
	display:none;

}

header div.hidden {display:none}

header div.trennerrechts {
	float:right;
}

header a.button:hover {
	color:white;
}

 header a.button:hover img{
	opacity:1;
 }

header a.activebutton{
	//background:rgb(70, 70, 70);
	color:white;
	font-weight:bold;
}


header #pagetitle {
	line-height:40px;color:white;
	opacity:0.2;display:inline;
	text-align:left;
}


#login {
	display:none;width:250px;float:right;text-align:left;padding:15px;
	background:white;
	position:fixed;z-index:255;right:5px;top:43px;
	box-shadow: 0 1px 5px #666; 
	border-radius:5px;
}

#login table {
	margin:auto;
}

#login input[type=text],#login input[type=password] {
	font-size:18px;width:100%
}

#login input[type=button],#login input[type=submit] {
	font-size:16px;margin-top:10px
}

#login a {color:black}


img {border:none}

h1,h2,p {font-weight:normal;margin-bottom:10px;} 
h1 {font-size:25px;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);}
h2 {font-size:20px;}

a {color:#ddd}
a:hover {color:#fff;cursor:pointer}

footer {clear:both;font-size:14px;text-align:center;margin-top:30px;margin-bottom:40px;color:#777;margin-left:20px;}

p {clear:left}

ul {margin-left:40px}

#visu {
	position:absolute;left:0;right:0;top:0px;
	padding:0px;padding-top:60px;
	color:#bbb;
	font-size:15px;
	z-index:100;
	-webkit-text-size-adjust: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}

#visu button, #visu select {
	padding:5px 10px 5px 10px;
}


#visu .thumb {cursor: pointer;width:458px;height:363px;}

#visu .thumb img, #theimage {
	box-shadow: 2px 2px 5px #222; 
}

img.tagthumb {
	max-height:360px;
	max-width:450px;
}

#visu .private {color:#CC7777}
#visu .public {color:#77CC77}

#showimage {
	float:right;
	margin:0;
	position:fixed;
	width:840px;
	right:0px;
	top:40px;
	bottom:0px;
}

#albumoverview {
	text-align:left;
	padding-left:17px;
}

.galleryoverview {
	transform: scale(1.5);
	transform-origin: top left;
	width:calc(66.666666666% - 20px);
	margin-left:-10px;
}




#albumoverview h2 {
	clear:left;text-align:left;
}

#visu .albuminfo{
	font-size:13px;text-align:left;cursor:pointer;overflow:hidden;
	overflow:hidden;
	height:260px;float:left;width:170px;margin-right:10px;
	scale:0.96;
	transition:scale 0.2s;
}

.galleryoverview .albuminfo{
	height:225px !important;
}

#visu .albuminfo:hover{
	scale:1.05;
}

#visu .albuminfo a {
	display:block;
	text-decoration:none;
	color:#bbb;}

#visu .albuminfo .readable {
	color:#ddd;
	font-size:15px;
}

#visu .albuminfo img {
	background:#999;
	box-shadow: 2px 2px 5px #222; 
	border-radius:10px;
	display:block;margin-bottom:7px;
}

#visu .albuminfo:hover .readable {text-decoration:underline}

#visu .taginfo {text-align:left;margin-left:50px}

#visu input {margin:4px} 

#eventheader{
	text-align:left;
	padding-left:25px;
	padding-top:10px;
	margin-bottom:10px;
}


#thebox {
background:white;text-align:left;max-width:990px;margin:auto;color: black;padding:5px
}

#keywordnotice, #notice, #warning, .warning {
	background:rgba(255,255,255,0.15);
	border-top:2px solid rgba(255,255,255,0.5);
	border-bottom:2px solid rgba(255,255,255,0.5);
	padding:10px 5px 10px 25px;
    margin:10px -5px 20px -25px;
	text-shadow: none;font-size:120%;
	overflow:hidden;
	text-align:left;
}

#keywordnotice {background:rgba(255,255,255,0.7);color:black;}

#keywordnotice a,#notice a {color:white}

#warning, .warning {background:rgba(255,100,100,0.15);}

@media (dynamic-range: high) {
    .sdronly {
        display: none;
    }
}

#description {
	cursor:pointer;
}

#description.unset {color:#777;}

#description:hover {font-weight:bold}


form {display:inline}

form .input {text-align:right}
form .button {text-align:center}
input {font-size:13px}

#languages {float:right;margin:0 10px;white-space: nowrap;}
#gallerylink {text-align:center;margin:0 0 7px 0;padding-top:3px}

#welcome {margin-right:320px;font-size:130%}

#searchbox {
	background:white;padding:10px;width:400px;margin:auto;margin-bottom:20px;
	box-shadow: 0 1px 5px #666;
	-webkit-box-shadow: 0 1px 5px #666;
	-moz-box-shadow: #666 0px 1px 5px;
	-o-box-shadow: #666 0px 1px 5px;
	-ms-box-shadow: #666 0px 1px 5px;
	z-index:200;
}

/* Under image tagging */

#imagetags {margin-top:3px;}
#imagetags span{width:100%;text-align:center;padding:5px;display:block;box-sizing: border-box;}
#imagetags textarea{width:100%;text-align:center;display:none}

#imagediv {background:url(ajax-loader.gif) 50% 200px no-repeat;min-height:300px;display: inline-block;margin:auto}

#theimage {
	
	max-width:calc(100vw - 10px);
	max-height:calc(100vh - 85px);
	margin-top:-10px;

}


#imagediv::after {
  font-family:CCSymbols,"Lucida Grande", sans-serif;
  content: attr(title);
  color:white;
  display:block;
  z-index:255;
  position:absolute;
  margin-left:15px;
  margin-top:-37px;
  font-size:160%;
}

#images {
  
}

#images h2 {
	padding:60px 0 10px 25px;
	clear:both;
	text-align:left;
}

.eventimage {
	margin:3px;margin-bottom:0;background:#444;
}

#images a {
	display:block;
	float:left;
	z-index:200;
}

#images a::after {
  font-family:CCSymbols,"Lucida Grande", sans-serif;
  content: attr(title);
  display:block;
  z-index:255;
  position:absolute;
  margin-top:-25px;
  margin-left:10px;
}

.previmage {width:466px; margin:0 auto 0 auto;height:100%;}


.previmage td.tag{
	color:#bbb;font-size:12px;vertical-align:top;height:80px;overflow:hidden;width:308px;
}

.previmage textarea {width:450px;height:70px;display:none;margin:auto;}

.welcomeimage {
	color:white;text-decoration:none;font-size:15px;display:block;
	border:1px solid black;width:92px;height:92px;margin:3px;padding:2px;
	box-shadow: 0px 0px 3px #000; 
	-webkit-box-shadow: 0px 0px 3px #000; 
	-moz-box-shadow: #000 0px 0px 3px;
	-o-box-shadow: #000 0px 0px 3px;
	-ms-box-shadow: #000 0px 0px 3px;
}

.legalinfo {
	text-align:left;max-width:1000px;padding:10px;
	margin:auto;
	margin-top:20px;
	clear:both;display:block;font-size:15px;
	line-height:1.4;
	padding-bottom:20px;
}

.filterbar {
	margin:auto;
}

.minithumb {
	float: left; margin-left: 0pt; margin-right: 10px;
}

.taglink {
	text-decoration:none;font-size:20px;
}

.taglink span {
	white-space: nowrap;
}

.invisible {
	display:none
}

.toparrow {
	background:url(toparrow.png);
	width:54px;
	height:16px;
	position:relative;
	top:-31px;
	maring:0;
	margin-bottom:-20px;
	left:170px;
}


#exifdata, #exiflocation {
	
	display:none;
	position:relative;
	width:100%;
	height:100px;
	top:10px;
	left:10px;
	margin-bottom:-100px;
	font-size:120%;
	line-height:1.5;
	z-index:200;
}

#exifdata table {
	text-align:left;
	color:white;
	text-shadow: none;
	background:rgba(0,0,0,75%);
	box-shadow: 0 1px 7px #000; 
	border-radius:5px;-moz-border-radius:5px;
}

#exifdata th {
	padding-left:5px;
}

#exifdata td {
	padding-right:5px;
}

#downarrow {
	display:none;
	position:fixed;
	background:url(downarrow.png);
	left:1250px;
	bottom:25px;
	z-index:255;
	width:54px;
	height:16px;
}



#overlay {
	display:none;
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background:rgba(0,0,0,0.85);
	z-index:300;
}

#overlay img {
box-shadow: 0 0 20px #000; -webkit-box-shadow: 0 0 20px #000; -moz-box-shadow: #000 0px 0px 20px;
}

@media all and (max-width:1600px){
	
	#showimage {
		width:600px;
	}
	
}

@media all and (max-width:1341px) {
	#albumoverview {margin-right:0;}
	#showimage{display:none}
	
	.galleryoverview {
		width:calc(66.666666666% - 20px);
	}
	
}

.imageframe {
	height:453px;float:left;overflow:hidden;
}

.nouser_imageframe {height:363px;width:470px}

.textcontent {
	width:800px;
	text-align:left;
	margin:auto
}

/* images on event pages */

.previmage {width:100%}

@media all and (min-width:480px) {.imageframe {width:100%;}}
@media all and (min-width:960px) {.imageframe {width:50%;}}
@media all and (min-width:1440px) {.imageframe {width:33.3%;}}
@media all and (min-width:1920px) {.imageframe {width:25%;}}
@media all and (min-width:2400px) {.imageframe {width:20%;}}
@media all and (min-width:2880px) {.imageframe {width:16.6%;}}
@media all and (min-width:3360px) {.imageframe {width:14%;}}

@media all and (max-width:840px) {
	.textcontent {
		width:auto;
		padding:0 20px;
	}
}

@media all and (max-width:900px) {
	#pagetitle {display:none !important}
	.galleryoverview {
		transform: scale(1.9);
		margin-left:-27px;
		width:calc(52.63157895% - 10px);
	}
	
	.galleryoverview p {font-size:75%;margin-left:5px;}
	.galleryoverview h1 {font-size:150%;margin-left:5px;}
}

@media all and (max-width:480px) {
	.imageframe {width:100%;height:auto;padding:0;margin:0}
	#visu .thumb {width:100%;height:auto;padding:0;margin:0}
	.previmage {width:100%;height:auto;padding:0;margin:0}
	.thumb img {max-width:100%;}
	.previmage td.tag {height:auto;padding:5px 0 10px 0}
	
}

.goog-te-banner-frame {top:70px !important}

.jump {
	margin-left:20px;
	margin-right:12px;
	margin-top:20px;
	font-size:17px;
	border-top:2px solid #3d3d3d;
	border-bottom:2px solid #3d3d3d;
	padding:2px;
	color:#777;
}

.jump a{
	 text-decoration:none;
	 white-space:nowrap;
}

.jump a:hover{
	 text-decoration:underline;
}

div.slide {
	transition: opacity 0.5s;
	color:black;
	text-shadow:none;
	font-size:120%;
	text-align:left;
}

div.fadeout {
	transition: opacity 7s;
}