/* CSS Document */

/*---------------------------------------------------------------------------------------------*/
/*	CSS Reset von Eric Meyer: http://meyerweb.com/eric/tools/css/reset/ v2.0
/*---------------------------------------------------------------------------------------------*/
html,body,div,span,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,a,img,strong,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
ol,ul{list-style:none;}
blockquote:before,blockquote:after{content:none;}
table{border-collapse:collapse;border-spacing:0;}
input:focus,textarea:focus{border:1px solid #999; outline:0;}
a:hover, a:active, a:focus { outline: none; -moz-outline-style: none;}
::-webkit-input-placeholder {color:#787974;}
:-moz-placeholder {color:#787974;}
.placeholder {color:#787974;}

/* --- Clearfix --- */

.clear{clear:both;display:block;overflow:hidden;width:0;height:0;}






/* --- ALLGEMEINE DEFINITIONEN --- */

strong {
	font-weight:bold;	
}

body {
	background-color:#F9F7F3;
	background-image:url(http://ekp.fotodesign-mainz.de/testseiten/bilder/allgemein/bg.png);
	font-family: 'Open Sans Condensed', sans-serif;
}






/* --- KOPFBEREICH --- */


#header {
	background-color:#333333;
}




/* --- Navigation auf grauem Hintergrund, oben --- */


.navi-1 {
	min-height:61px;
}


.navi-1-links {
	min-height:38px;
	padding: 18px 0px 0px 0px;
	float:left;
}

ul.navi-1-links {
	font-size:1.4em;
	font-weight:300;
	color:#FFFFFF;
	padding: 0px 20px;
}

ul.navi-1-links li {
	float:left;
	padding: 0px 20px;
	border-right:0px solid #898A8E;
}

.navi-1-links li:last-of-type {
	border-right:none;
}

ul.navi-1-links li a {
	text-decoration:none;
	color:#FFFFFF;
}

ul.navi-1-links li a:hover {
	color:#2DC5FF;
}




/* --- Absenderangabe oben rechts --- */


.navi-1-rechts {
	min-height:56px;
	width:550px;
	float: right;
}

.navi-1-rechts p {
	font-size:1.4em;
	font-weight:300;
	text-align:right;
	padding: 18px 20px 0px 0px;
	color:#56585E;
}

.navi-1-unten {
	background-color:#2DC5FF;
	height:1px;
	width:100%;
	float:left;
}

.navi-1-unten-bild {
	width:550px;
	float:right;
}




/* --- Navigation auf blauem Hintergrund, oben --- */


.navi-2 {
	background-color:#1A171B;
}

.navi-2-links {
	float:left;
	padding: 0px 0px 0px 5px;
}

.navi-2-links li {
	font-size:0.85em;
	float:left;
	padding: 0px 10px;
	border-right: 0px solid #BBBCBF;
}

.navi-2-links li:last-of-type {
	border-right:none;
}

.navi-2-links li a {
	text-decoration:none;
	color:#FFFFFF;
}

ul.navi-2-links li a:hover {
	color:#FFFFFF;
}

.navi-2-rechts {
	width:550px;
	vertical-align:top;
	padding-bottom:4px;
	float:right;
}

.navi-2-unten {
	height:2px;
	background-color:#333333;
}






/* --- INHALTSBEREICH --- */


#content {
	padding: 30px 20px;
}


.titelbild {
	border-radius:10px;
	margin: 0px 10px 10px 0px;
	width:100%;
	height:300px;
	background-color:#162434;
	position:relative;
	overflow:hidden;
	float:left;
}

.titelbild .untertitel-im-titelbild {
	position:absolute;
	top:0;
	left:0;
	margin-top:230px;
	padding: 2px 18px 2px 18px;
	background-color: rgba(86,88,96,0.75);
	text-align:left;
}

.titelbild .titel-im-titelbild {
	position:absolute;
	top:0;
	left:0;
	margin-left:110px;
	margin-top:180px;
	padding: 2px 18px 2px 18px;
	text-align:left;
}

.titel-im-titelbild p {
	font-size:1.85em;
	color:#FFFFFF;
}

.untertitel-im-titelbild p {
	color:#CCCCCC;
}


.titel-kasten-links {
	/* border: 1px solid #CCCCCC; */
	/* border-radius:10px; */
	border-bottom: 1px solid #CCCCCC;
	/* background-color:#FFFFFF; */
	margin: 10px 0px 10px 0px;
	width:250px;
	height:100px;
	position:relative;
	overflow:hidden;
	float:left;
}

.titel-kasten-links h1 {
	padding: 10px 18px;
	color:#162434;
}

.titel-kasten-rechts {
	/* border: 1px solid #CCCCCC; */
	/* border-radius:10px; */
	border-bottom: 1px solid #CCCCCC;
	/* background-color:#FFFFFF; */
	margin: 10px 0px 10px 0px;
	width: -moz-calc(100% - 260px);
    width: -webkit-calc(100% - 260px);
    width: calc(100% - 260px);
	height:100px;
	position:relative;
	overflow:hidden;
	float:right;
}

.titel-kasten-rechts p {
	padding: 10px 18px;
}




.ueberschrift {
	float:left;
}


h1 {
	font-size:1.85em;
	padding: 44px 0px 16px 0px;
}

h2 {
	font-size:1.2em;
	padding: 2px 0px 16px 0px;
	color:#0f779f;
}


h2.fakten {
	padding: 6px 0px 2px 16px;
	color:#FFFFFF;
	background-color:#1b97c7;
	border-bottom: 1px #333333 dotted;
}

table.fakten {
	min-width:465px;
}

td.fakten {
	background-color:#c6eaf8;
	border-top: 4px #EEEEEE solid;
	padding: 3px 0px 3px 16px;
}

h3 {
	font-size:1em;
	padding: 30px 0px 0px 0px;
	color:#000000;
	border-bottom: 1px #7F8F48 dotted;
}

p {
	font-size:1.1em;
	padding: 4px 0px;
	color:#666666;
}


.kleingedrucktes {
	font-size:0.9em;
}

.bildtext {
	font-size:0.7em;
	font-weight:700;
}

b {
	color:#000000;
}


a {
	color:#1b97c7;
}


.navi-foto {
	float:right;
}

.navi-foto a {
	color:#666666;
}

.navi-foto a:hover {
	color:#000000;
}

.navi-foto-elemente {
	padding: 0px 5px;
	text-align:center;
	float:left;
}



.navi-workshop {
	float:right;
}

.navi-workshop a {
	color:#666666;
}

.navi-workshop a:hover {
	color:#000000;
}

.navi-workshop-elemente {
	padding: 0px 5px;
	text-align:center;
	float:left;
}



.inhalt {
	padding: 10px 0px;
}

.inhalt li {
	float:left; 
	padding: 0px 2px;
}

.inhalt ul.text {
	padding: 0px 18px;
	color:#666666; 
}


.inhalt li.text {
	float:none; 
	padding: 0px 0px;
	list-style-type:circle;
}


td {
	color:#0f779f;
}


.logo {
	text-align:center;
	width:100%;
	padding: 40px 0px 100px 0px;
}






/* --- FUSSBEREICH --- */


#footer {
	width:100%;
	position:fixed;
	bottom:0px;
}




/* --- Navigation auf grauem Hintergrund, unten --- */


.navi-3 {
	background-color:#333333;
	height:61px;
}


.navi-3-oben-1 {
	height:5px;
	background-color:#333333;
}


.navi-3-oben-2 {
	height:1px;
	background-color:#2DC5FF;
}

.navi-3-links {
	padding: 20px 0px 8px 10px;
	float:left;
}

.navi-3-links li {
	font-size:0.85em;
	float:left;
	padding: 0px 10px;
	border-right: 1px solid #BBBCBF;
}

.navi-3-links li:last-of-type {
	border-right:none;
}

.navi-3-links li a {
	text-decoration:none;
	color:#BBBCBF;
}

.navi-3-links li a:hover {
	color:#00ABE0;
}




/* --- Domain-Positionierung rechts unten --- */

.domain {
	float:right;
}

.domain p {
	font-size:1.4em;
	font-weight:300;
	text-align:right;
	padding: 12px 20px 0px 0px;
	color:#56585E;
}


.domain-ersatz {
	float:right;
	display:none;
}

.domain-ersatz p {
	font-size:1.4em;
	font-weight:300;
	text-align:right;
	padding: 12px 20px 0px 0px;
	color:#56585E;
}




/* --- Weitere Definitionen --- */


.ausklappnavi {
	display:none;
}




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



.ausklappnavi {
	display:none;  /* Eigenschaft auf inherit setzen um sichtbar zu machen */
}

/* Kommentierung deaktivieren, wenn .ausklappnavi sichtbar geschaltet ist 

ul.navi-1-links {
	padding: 0px 0px;
	min-width:465px;
}
*/


.navi-1-rechts {
	display:none;
}

.navi-1-unten-bild {
	display:none;
}


/* Kommentierung deaktivieren, wenn .ausklappnavi sichtbar geschaltet ist 

.navi-2-links {
	display:none;  
	float:left;
	padding: 0px 0px 0px 0px;
}

.navi-2-links li {
	font-size:24px;
	float:none;
	padding: 6px 1000px 6px 40px;
	border-right:none;
	border-bottom: 2px solid #333333;
}

.navi-2-links li:last-of-type {
	border-bottom:none;
}
*/
.navi-2-rechts {
	display:none;
}


.navi-foto {
	float:left;
}


.navi-workshop {
	float:left;
}


.ueberschrift {
	float:none;
}

p {
	font-size:1em;
}


.domain {
	display:none;
}

.domain-ersatz {
	display:inherit;
}

#footer {
	position:inherit;
}


.titel-kasten-links {
	/* border: 1px solid #CCCCCC; */
	/* border-radius:10px; */
	border-bottom: 1px solid #CCCCCC;
	/* background-color:#FFFFFF; */
	margin: 0px 10px 0px 0px;
	width:100%;
	height:52px;
	position:relative;
	overflow:hidden;
	float:left;
}

.titel-kasten-links h1 {
	padding: 10px 18px;
	font-size: 1.85em;
}


.titel-kasten-rechts {
	border: 0px solid #CCCCCC;
	border-radius:10px;
	background-color:inherit;
	margin: 0px 10px 10px 0px;
	width:100%;
	height:auto;
	position:relative;
	overflow:hidden;
	float:left;
}



}




/* Definition für iPhone 4 Querformat */

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape) {


ul.navi-1-links {
	font-size:2.5em;
	font-weight:300;
	color:#FFFFFF;
	padding: 0px 20px;
}

.titel-kasten-links {
	margin: 10px 10px 0px 0px;
	height:auto;
}

.titel-kasten-links h1 {
	font-size: 1.85em;
}

p {
	font-size:1.7em;
}

h1 {
	font-size:2.8em;
	padding: 44px 0px 0px 0px;
}

h2 {
	font-size:2.4em;
}

h3 {
	font-size:1.5em;
}

.kleingedrucktes {
	font-size:1.7em;
}

.bildtext {
	font-size:1.3em;
	margin-bottom:1.5em;
}


}




/* Definition für iPhone 4 Hochformat */

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait) {


ul.navi-1-links {
	font-size:4em;
	font-weight:300;
	color:#FFFFFF;
	padding: 0px 20px;
}

.navi-2-links li {
	font-size:2.5em;
}

.navi-3-links li {
	font-size:2.5em;
}

.titel-kasten-links {
	margin: 10px 10px 0px 0px; 
	height:auto; 
}

.titel-kasten-links h1 {
	font-size: 3em;
}

.titel-kasten-rechts {
	height:auto;
}

.titel-kasten-rechts p {
	font-size:1.85em;
}

p {
	font-size:3em;
}

h1 {
	font-size:6em;
}

h2 {
	font-size:4em;
}

h3 {
	font-size:2.2em;
}

td.fakten {
	font-size:3em;
}

.kleingedrucktes {
	font-size:1.7em;
}

.bildtext {
	font-size:2em;
	margin-bottom:2em;
}

}