/* Background */ 
html { 
	background: url(images/bg1.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* General Style */ 
body {
	font-size:100%;
	margin:0em;
	padding:0em;
}

h1 {
	font-size:1.125em;
	line-height:1.8em;
	font-weight:900;
	margin:0em;
	padding:0em;
	text-align:left;
}
h2 {
	font-size:1.0em;
	line-height:1.8em;
	font-weight:100;
	margin:0;
	padding:0em;
	text-align:left;
}
h3 {
	font-size:1.0em;
	line-height:1.25em;
	font-weight:100;
	margin-left:2em;
	padding:0em;
	text-align:left;
}
p {
	line-height:1.25em;
	font-weight:100;
	margin:0em;
	padding:1.25em;
	text-align:justify;
}

ul {
	margin:0px;
	padding:0px;
}

li {
	/*list-style:square;*/
	font-weight:100;
	line-height:1.25em;
	margin:0em;
	padding:0em;
	/* margin:0.313em 0em 0.313em 0em; */
}
 
/* img {
	width:100%;
	height:auto;
	max-width:100%;
} macht probleme mit touchtouch dadurch aber:
 #menubar ul li img + .art_projekte img + .a_menuseite img
 neu erstellen notwendig */

a {
	text-decoration: none;
}

.standardcontainer {
	display:block;
	background: rgb(0,0, 0);/* The Fallback */
	background: rgba(0,0, 0, 0.5);
	width:88%;
	max-width:820px;
	margin: 0em 8% 2em 0;
	float:right;
}

/* Gruppierungen */
h1, h2, h3, p, ul, li {color:#FFFFFF}
p, li, {font-family:Helvetica}
h1, h2, h3 {
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
}




/* On Top Bar */
#menubar {
	display:block;
} 
#menubar ul {
	display:block;
	width:3em;
	padding:0.9em;
}
#menubar ul li {
	display:inline;
}
#menubar ul li img{
	width:100%;
	height:auto;
	max-width:100%;
}
#menubar ul li a.menubutton {
	display:none;
}
/* Header NEU*/ 
#header {
	display:block;
}
#header ul {
	width:429px;
	max-width:95%;
	padding: 0em 0em 0.375em 0em;
}
#header ul li {
	display:inline;
	height: 2em;
}
#header ul li img {
	max-width:100%;
}
/* Classe "logo" ist nicht verwendet*/


/* Navigation NEU */ 
nav {
	display:block;
	height:2.5em;
	text-align:right;
}
nav ul {
	display:block;
}
nav ul li {
	display:inline;
	margin:0em 0.188em 0em 0.188em;

}
nav ul li a {
	color:#FFFFFF;
	font-size: 1.125em;
	line-height:2.5em;
	padding:0.563em 0.938em 0.375em 0.983em;
	transition:background 0.2s;
	-webkit-transition:background 0.2s;
}

nav ul li a:hover {
	background:#454040;
	border-bottom: 0.188em solid #E7590B;
}
nav ul li a.active {
	border-bottom: 0.188em solid #E7590B;
}

/* Projekte-Seite content*/ 
.p_container {
	margin-top: 5em;
	margin-bottom: 3em;
}
#projekte {
	display:block;
	background: rgb(0,0, 0);/* The Fallback */
	background: rgba(0,0, 0, 0.5);
	width:88%;
	max-width:820px;
	margin: 0em 6% 2em 0;
	float:right;
}
#projekte section {
	margin: 0.875em;
	/* background: black;*/
}

/* #projekte article und .art_projekte könnte man wieder zusammenführen*/ 
#projekte article {
	vertical-align: top;
	/* background: red;*/
}
.art_projekte {
	display:inline-block;
	width: 55%;
	margin-left: 5%;
	padding:0em;
}
.art_projekte_detail {
	display:inline-block;
	width: 50%;
	margin-left: 5%;
	padding:0em;
}
.art_projekte img{
	width:100%;
}
.linep {
	clear: right;
	margin: 0.875em 0;
	border-style: dotted;
	color: white;
}

/* Projekte-Seite content BILDER*/ 
#projekte article img {
	max-width:360px;
	min-width:300px;
}
#projekte article a:hover {
	-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
	-webkit-transition: .5s ease-in-out;
	-moz-filter: grayscale(50%);
	-moz-transition: .5s ease-in-out;
	filter: grayscale(50%);
	transition: .5s ease-in-out;
}

.i_detailseite{
	min-width:180px;
}

#projekte aside {
	display:inline-block;
	padding:0em;
	vertical-align:top;
	float:right;
}
.a_menuseite {
	width:32%;
}
.a_menuseite img{
	width:100%;
}
.a_detailseite {
	width:40%;
}

.p_menuseite {	
	text-align: right;
	padding:1em 0 1em 1em;
}
.p_detailseite {
	text-align: justify;
	padding:0 0 1em 0;
}




/* Gallery */

.thumbs {
	padding: 0;
	margin:0;
} 
.thumbs a {
	width: 45%;
	max-width:360px;
	margin: 2%;
	display: inline-block;
	background-position:center center;
	background-repeat: no-repeat;
	
	background-size:cover; /*nicht notwenig?*/
	-moz-background-size:cover;
	-webkit-background-size:cover;
	
	cursor: pointer;
	padding:0;
	-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
	-webkit-transition: .5s ease-in-out;
	-moz-filter: grayscale(50%);
	-moz-transition: .5s ease-in-out;
	filter: grayscale(50%);
	transition: .5s ease-in-out;
}
.thumbs a:hover {
	-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */	
	-moz-filter: grayscale(0%);
	filter: grayscale(0%);
}
.180 {
	height: 180px;
}
.360 {
	height: 360px;
}
.activator {
}
.thumbimage {
	width: 100%;
}
/* css-method for magnifier*/
span.rollover {
	opacity: 1;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	background:url(images/mag_180.png) center center no-repeat #000;
	background-color:transparent;
	cursor: pointer;
	height: 100%;
	max-height: 360px;
	width: 100%;
	max-width: 360px;
	position: absolute;
	z-index: 10;
	opacity: 0;
}
span.rollover:hover {
	opacity: 1;
}



/* Team Seite Content Area */ 
#team {
	margin-top: 5em;
}
#team article {
	display:inline-block;
	vertical-align: top;
	margin: 0.8em;
	padding: 0;
	text-align:center;
}
#team article img {
	width: 90%;
	max-width:319px;
	float:right;
	padding: 0 0 0.8em 0.8em;
}
#team article h1 {
	padding:1em 1.8em 0.5em 1.8em;  /* notwendig?*/
	line-height:0.813em;
}
#team article h2 {
	padding:0em 1.8em 0.813em 1.8em;  /* notwendig?*/
}
#team ul {
	display:block;
	vertical-align: top;
	padding:0em 1.8em 0.5em 1.8em;
	text-align:left;
}
#team ul li {
	display:inline;
	font-family: "Times New Roman", Times, serif;
}
#team ul li.year {
	font-style: italic;
	font-size: 90%;
}
.linet {
	width:80%;
	margin: 1em auto 3em auto;
	border-style: dotted;
}

/* Leitbild - Kontakt - Datenschutz - Impressum -  Seite Content Area */ 
#content {
	margin-top: 5em;
	padding: 2em 0;
}
#content p {
	font-size:1em;
	font-weight:100;
	margin: 1em 3em;
	padding:1.25em;
	text-align: center;
	color:#EEEEEE;
}
#content p span {
	font-size: 1.125em;
	font-weight: 900;
	color:#FFFFFF;
}
#content h1.mittig {
	font-size: 100%;
	text-align: center;
	margin-bottom: 2em;
}
#content h2.einzug {
	margin-left: 2em;
}
#content ul {
	list-style-type:none;
	margin-right:4%;
	float: right;
}
#content ul li a {
	color:#FFFFFF;
	text-decoration: none;
}
#content .text- {
	font-size:90%;
	text-align: justify;
}

/* Footer NEU */ 
footer {
	display:block;
	position:fixed; /* For Fix position*/
	bottom:0px; /* For Fix position*/
	background: rgb(0,0, 0);/* The Fallback */
	background: rgba(0,0, 0, 0.5);
	text-align:center;
	Width:100%
}
footer ul {
	width:100%;
	max-width:980px; /* ?? */
	margin:5px auto;
}
footer ul li {
	display:block;
	font-family: "Kokila", Times, serif;
	font-style: italic;
	font-weight: normal;
	font-size:1em;  /* 0.875em wenn nicht Kokila */
	line-height:1.25em;
	color:#FFFFFF;
}
footer ul li a {
	color:#FFFFFF;
	text-decoration: underline;
}
/* Mobile Style */
@media screen and (max-width:800px) {
	body {
		font-size:90%;
	}
	.a_detailseite {
		display:inline-block !important; 
		width: 95%;
		margin: 1em 0 1em 5%;	
	}
	/* #projekte article {
		width:300px;
		margin:0 1.5em 0 25px;
	} */
}
@media screen and (max-width:600px) {
	#projekte article {
		width:300px;
		margin: 0 25px;
	}
	#projekte aside {
		display: none;
	}

	#projekte {
		width:350px;
	}

}
@media screen and (min-width:450px) {
	nav.nav {
		display:block !important;
	}	
}
@media screen and (max-width:450px) {
	body {
		font-size:86%;
	}
	#menubar ul li a.menubutton {
		display:block;
	}	
	nav {
		display:none;
		height:auto;
	}
	nav ul li {
		display:block;
		margin:0.3em 0em 0.3em 0em;
	}
	#header ul {
		
}






/* ALT
.linepnav {
	width: 880px;
	margin-top: 1em;
	border-style: solid;
} */


/* VERBESSERUNGEN
classe für Ränder  ???sinnvoll
.border_w_dotted {
	Border: 1px dotted #FFFFFF;
} 
zusammensgesetzt aus "border-style" "border-width" "border-color"
*/