@CHARSET "UTF-8";

/* streckt den sichtbarkeitsbereich auf 100%*/
html {
	height: 100%;
	width: 100%;
}

body {
	height: 100%;
	color: #535353; /*für die schrift*/
	background-image: url(../picture/niceBlue2.jpg);
	background-attachment: scroll;
	/*background-size: 100% 100%;*/
	background-repeat: repeat;
	/* background-color: #cbdedf;  e1e4ed, cbdedf*/
	font-family: 'Arial';
	font-size: large;
	background-attachment: scroll;
	/*background-size: 100% 100%;
	background-repeat: repeat;*/
}

#nav {
	text-shadow: rgba(0, 0, 0, 0.5) -1px 0, rgba(0, 0, 0, 0.3) 0 -1px,
		rgba(255, 255, 255, 0.5) 0 1px, rgba(0, 0, 0, 0.3) -1px -2px;
	font-size: 40px;
}

#transparent_border {
	-moz-background-clip: padding; /* Firefox 3.6 */
	-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
	background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
	border: 10px solid rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 2px 2px 0 0;
	-moz-border-radius: 2px 2px 0 0;
	border-radius: 2px 2px 0 0;
	left: 50%;
	margin-left: -505px;
	width: 980px;
	position: relative;
	/*padding: 30px;
			width: 250px;
			text-align: center;*/ /*	position: absolute; 
			top: 100px;
			left: 200px; */
}

#topLogo {
	position: relative;
	width: 980px;
	height: 192px;
	background: white;
	left: 50%;
	margin-left: -490px;
	-moz-box-shadow: 0 1px 5px #c9c9c9;
	-webkit-box-shadow: 0 1px 5px #c9c9c9;
	box-shadow: 0 1px 5px #c9c9c9;
	/*If one value is set, this radius applies to all 4 corners.
If two values are set, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner.
Four values apply to the top-left, top-right, bottom-right, bottom-left corner in that order.
Three values: The second value applies to top-right and also bottom-left.  border-radius: 0 50px 50px 0;  40px 10px*/
}

#transparentWrapper {
	-moz-border-radius: 2px;
	border-radius: 2px;
	position: relative;
	width: 1060px;
	/*min-height: 100%;
	height: auto !important;
	height: 100%; */
	margin: 0 auto -30px;
	background: #f8f8f8;
	opacity: 0.1;
	box-shadow: 0 0 -11px #6616c1;
	overflow: hidden;
	position: relative;
}

#wrapper { /*-moz-border-radius: 2px solid black;*/
	position: relative;
	width: 980px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	/*margin: 0 auto -30px;*/ /*background: #f8f8f8;*/
	/*zweiter Color Stop ---+
                                                         |
                         erster Color Stop ---+          |
                                              |          |
background-image: linear-gradient(left, white 0%, black 50%);
background-image: linear-gradient(top, white 0%, black 50%);
background-image: linear-gradient(45deg, white 0%, black 50%);
                                            |        |
                             erste Farbe ---+        |
                                     zweite Farbe ---+*/
	background: #b2e1ff; /* Old browsers */
	background: -moz-linear-gradient(top, #cbebff 11%, #97cdfc 69%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(11%, #cbebff),
		color-stop(69%, #97cdfc) ); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #cbebff 11%, #97cdfc 69%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #cbebff 11%, #97cdfc 69%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(top, #cbebff 11%, #97cdfc 69%);
	/* IE10+ */
	background: linear-gradient(to bottom, #cbebff 11%, #97cdfc 69%);
	/* W3C */
	filter: progid :                        
		  DXImageTransform.Microsoft.gradient (    
		  
		        
		            startColorstr =             
		             '#cbebff', endColorstr =                          
		'#97cdfc', GradientType =        
		        
		         0 );
	/* IE6-9 */ /*#f8f8f8*/ /*box-shadow: 0 0 11px #6616c1;*/
	-moz-box-shadow: 0 1px 5px #c9c9c9;
	-webkit-box-shadow: 0 1px 5px #c9c9c9;
	box-shadow: 0 1px 5px #c9c9c9;
	/*background-image: url("../picture/background_nice_color.PNG");*/
	background-repeat: repeat;
}

#header {
	background-image: url("../picture/top_logo_ background_blue.PNG");
	background-repeat: repeat;
	height: 100px;
	/*#6616c1*/
	padding: 7px;
	text-align: center;
	/*-moz-box-shadow: 0 0 9px #purple; 
	-webkit-box-shadow : 0 0 9px #purple;
	box-shadow : 0 0 9px purple;
	*/ /*border-bottom: 2px solid gray;
	border-top: 2px solid gray;*/
}

#header h1 { /*text-shadow: 0px 3px 3px #4d4d4d;*/
	text-shadow: rgba(0, 0, 0, 0.5) -1px 0, rgba(0, 0, 0, 0.3) 0 -1px,
		rgba(255, 255, 255, 0.5) 0 1px, rgba(0, 0, 0, 0.3) -1px -2px;
	color: #1f3642;
	font-family: 'Bebas Neue';
	font-size: 100px;
	line-height: 0;
	text-align: left;
}

#middle {
	position: relative;
	padding: 10px 10px 80px 10px;
	-moz-border-radius: 2px 2px 0 0;
	border-radius: 2px 2px 0 0;
}

#middle p {
	margin: 5px 0;
}

#footer {
	background-image: url("../picture/top_logo_ background_blue.PNG");
	width: 980px;
	height: 60px;
	line-height: 40px;
	text-align: right;
	color: #1f3642;
	font-size: 45px;
	font-family: punks;
	text-shadow: rgba(0, 0, 0, 0.5) -1px 0, rgba(0, 0, 0, 0.3) 0 -1px,
		rgba(255, 255, 255, 0.5) 0 1px, rgba(0, 0, 0, 0.3) -1px -2px;
	/*border-bottom: 2px solid gray;
	border-top: 2px solid gray;*/
}

#footer:HOVER { /*box-shadow: 0 0 9px purple;*/
	
}

#footer a {
	font-family: punks;
	color: #1f3642;
	font-size: 45px;
}

#footer a:HOVER {
	color: #09acf1; /*538ea7*/
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

/* Bereich nicht für IE-mac Anfang \*/
* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

table.polaroids a:after {
	content: attr(title);
	/*hier wird der titel des elements an den content übergeben. titel ist über den link herausziehbar*/
}

table.polaroids #polaroid {
	-moz-transition: -moz-transform 2s ease;
	-o-transition: -o-transform 2s ease;
	transition: transform 2s ease;
	transform: 2s ease;
	-ms-transform: 2s ease; /* IE 9 */
	-webkit-transition: all 2s ease; /* Safari and Chrome */
}

/*-----------------------		div-rotation  		-----------------------*/
table.polaroids th:nth-child(odd) div:HOVER {
	-moz-transform: rotate(11deg) scale(1.1, 1.1);
	-moz-transition: -moz-transform 0.5s;
	-o-transform: rotate(11deg) scale(1.1, 1.1);
	-o-transition: -o-transform 0.5s;
	-webkit-transition: transform 0.5s; /* Safari and Chrome */
}

table.polaroids th:nth-child(even) div:HOVER {
	-moz-transform: rotate(-9deg) scale(1.1, 1.1);
	-moz-transition: -moz-transform 0.5s;
	-o-transform: rotate(-9deg) scale(1.1, 1.1);
	-o-transition: -o-transform 0.5s;
}

table.polaroids div {
	-webkit-transform: rotate(-6deg);
	-moz-transform: rotate(-6deg);
	-o-transform: rotate(-6deg);
	-ms-transform: rotate(-6deg);
}

/* Rotate all even images 2 degrees:für die liste die von der klasse polaroids erbt, und alle ihre einträge
	es gilt für alle kinder von UL, und zwar für alle kinder gerader nummer (even) */
table.polaroids th:nth-child(even) div {
	-webkit-transform: rotate(6deg);
	-moz-transform: rotate(6deg);
	-o-transform: rotate(6deg);
}

/* Don't rotate every third image, but offset its position. verschiebe jeden dritten eintrag um 5 pixel nach unten */
table.polaroids th:nth-child              (1) div {
	-webkit-transform: rotate(-9deg);
	-moz-transform: rotate(-9deg);
	-o-transform: rotate(-9deg);
	position: relative;
	top: -9px;
}

/* Rotate every fifth image by 5 degrees and offset it */
table.polaroids tr:nth-child              (2) div {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	position: relative;
	right: 11px;
}

/*-----------------------		div decoration  		-----------------------*/
#polaroid {
	padding-top: 10px;
	padding-bottom: 50px;
	padding-left: 10px;
	padding-right: 10px;
	border-left: 10px;
	border-top: 10px;
	background-color: white;
	width: 308px;
	/*box-shadow: 0 3px 6px rgba(0, 0, 0, .25);*/
	-webkit-box-shadow: 0 0 3px #888;
	-moz-box-shadow: 0 0 3px #888;
	-webkit-box-shadow: 0 0 3px #888;
	box-shadow: 0 0 3px #888;
	/* background: rgba(0,0,0,0.20);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.2);
   -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.2);
   -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.2);
   -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.2);
*/
}

#polaroid_dynmic {
	padding-top: 10px;
	padding-bottom: 50px;
	padding-left: 0px;
	padding-right: 0px;
	border-top: 10px;
	background-color: white;
	/*transformation*/ /*box-shadow: 0 3px 6px rgba(0, 0, 0, .25);*/
	-webkit-box-shadow: 0 0 3px #888;
	-moz-box-shadow: 0 0 3px #888;
	-webkit-box-shadow: 0 0 3px #888;
	box-shadow: 0 0 3px #888;
}

#glossy_picture_look {
	padding-top: 10px;
	padding-bottom: 50px;
	padding-left: 10px;
	padding-right: 10px;
	border-left: 10px;
	border-top: 10px;
	border: 1px solid rgba(0, 0, 0, 0.5);
	/*border-radius: 10px 10px 2px 2px;*/
	background: rgba(0, 0, 0, 0.20);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px
		rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset
		0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px
		rgba(0, 0, 0, 0.2);
	-o-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px
		rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset
		0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px
		rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px
		rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset
		0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px
		rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px
		rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset
		0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px
		rgba(0, 0, 0, 0.2);
}

#gloss {
	background: rgba(0, 0, 0, 0.20);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px
		rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset
		0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px
		rgba(0, 0, 0, 0.2);
	-o-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px
		rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset
		0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px
		rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px
		rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset
		0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px
		rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px
		rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), ins
}

#polaroid a {
	font-family: Marker Felt;
	font-size: large;
}

#commentDiv {
	/*background-image: url(../picture/background_comment.jpg)*/;
	text-align: left;
	position: relative;
	-moz-box-shadow: inset 0 0 2px 2px #888;
	-webkit-box-shadow: inset 0 0 2px 2px #888;
	box-shadow: inset 0 0 2px 2px #888;
	position: relative;
	text-align: left;
	border: solid 1px white;

	background: -moz-linear-gradient(top, #e9eaee 35%, #b2b0ae);
	background: -webkit-gradient(linear, left top, left bottom, from(#e9eaee),
		to(#b2b0ae) );
}

#comment_person {
	float: left;
	color: #35444c;
	font-family: punks;
	text-align: left;
	font-size: 28px;
	text-shadow: rgba(0, 0, 0, 0.5) -1px 0, rgba(0, 0, 0, 0.3) 0 -1px,
		rgba(255, 255, 255, 0.5) 0 1px, rgba(0, 0, 0, 0.3) -1px -2px;
	min-width: 60px;
	float: left;
	background: -moz-linear-gradient(top, #bddbe6 0%, #829bab);
	background: -webkit-gradient(linear, left top, left bottom, from(#bddbe6),
		to(#829bab) );
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	border-radius: 1px;
	border: 1px solid #c2c2c2;
	-moz-box-shadow: 3px 3px 10px rgba(000, 000, 000, 0.5), inset 0px 0px
		1px rgba(5, 5, 5, 1);
	-webkit-box-shadow: 3px 3px 10px rgba(000, 000, 000, 0.5), inset 0px 0px
		1px rgba(5, 5, 5, 1);
	box-shadow: 3px 3px 10px rgba(000, 000, 000, 0.5), inset 0px 0px 1px
		rgba(5, 5, 5, 1);
	text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.2), 0px 1px 0px
		rgba(255, 255, 255, 0.3);
	float: left;
	-webkit-border-bottom-right-radius: 70px;
	-moz-border-radius-bottomright: 70px;
	border-bottom-right-radius: 70px;
}

#timestamp {
	font-family: punks;
	background: -moz-linear-gradient(top, #bddbe6 0%, #829bab);
	background: -webkit-gradient(linear, left top, left bottom, from(#bddbe6),
		to(#829bab) );
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	border-radius: 1px;
	border: 1px solid #c2c2c2;
	-moz-box-shadow: 3px 3px 10px rgba(000, 000, 000, 0.5), inset 0px 0px
		1px rgba(5, 5, 5, 1);
	-webkit-box-shadow: 3px 3px 10px rgba(000, 000, 000, 0.5), inset 0px 0px
		1px rgba(5, 5, 5, 1);
	box-shadow: 3px 3px 10px rgba(000, 000, 000, 0.5), inset 0px 0px 1px
		rgba(5, 5, 5, 1);
	text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.2), 0px 1px 0px
		rgba(255, 255, 255, 0.3);
	font-size: 28px;
	float: right;
	width: 120px;
	-webkit-border-bottom-left-radius: 44px;
	-moz-border-radius-bottomleft: 44px;
	border-bottom-left-radius: 44px;
	text-align: right;
	color: #35444c;
	
}