/*Exklusivdesign f¸r das Fotoatelier Heike Tollgreve */
/* Erstellt von Nicole Folchert */
/* Erstellt: 22.10.2010*/

/*Basis Elemente */
@import "slicknav/slicknav.min.css";
* {
	margin:0;
	padding:0;
	}

html, body {
	height:100%; 
	background: #f1f1f1;
	}
	
body { 
	position: relative;
	font: 75% arial, verdana, sans-serif;
	line-height: 1.3;
	color: #f1f1f1; 
	background: #f1f1f1;
	margin: 0; 
	padding: 0;	
	}
	
/*Formatierungen*/	
	
#inhalt p, #inhalt ul, #inhalt ol, #inhalt td, #inhalt th { 
	font: 1.0em arial, verdana, sans-serif;
	margin-top: 5px; 
	text-align: justify;
	}

#inhalt h1 { 
	font: bold 1.2em arial, verdana, sans-serif;
	letter-spacing: 1px; 
	margin-top: 5px;
	color: #fff;
	}	
	
#inhalt h2 { 
	font: bold 1.1em arial, verdana, sans-serif;
	letter-spacing: 1px; 
	margin-top: 5px;
	color: #fff;
	}	
	
#inhalt h3 { 
	font: bold .9em arial, verdana, sans-serif;
	letter-spacing: 1px; 
	margin-top: 5px;
	color: #fff;
	}

#inhalt img {
	border: 1px #999 solid;
	padding: 1px;
	margin: 2px;
}	

#inhalt img.left { float: left; margin: 10px 10px 0 0;  }
#inhalt img.right { float: right; margin: 10px 0 0 10px; }

/*f¸r die Bilder, die linksb¸ndig vor Aufz‰hlung liegen*/
#inhalt span.left {
 padding-right:20px;
}

#inhalt a:link, #inhalt a:visited { 
	color: #fff; 
	font-weight: normal;
	text-decoration: underline;
	
	}

#inhalt a:hover, #inhalt a:active { 
	color: #700808;
	}

	
#inhalt ul {
	clear:left;
	list-style-type: disc;
	margin-left: 20px;
	}

#inhalt li {
	padding: 0px;
	margin-top: 5px;
	}
	
#inhalt ol {
	clear:left;
	list-style-type: dezimal;
	margin-left: 25px;
	
	}	

#inhalt table {
	margin-top: 10px;
	margin-left: 5px;
	margin-bottom: 10px;
	text-align: left;
	border-collapse:collapse;
}	

#inhalt th {
	font-weight:bold;
	border: 1px #524f48 solid;
	padding: 2px;
	}	

#inhalt td {
	border: 1px #524f48 solid;
	padding: 2px;
	}

#inhalt .contactform button {
	font: 0.7em arial, verdana, sans-serif;
	color: #524f48; 
}		
	
	
	/* Spezielle DIVs*/

#distance { 
		width: 1px;
		height: 60%;
		background: #58504a;
		margin-bottom: -15em; 
		float: left;
		}	
	
#container {
	position: relative;
	    margin:0 auto;
		height: 450px;
		width: 100%;
		clear: left;
		background: #58504a;
		border-top: 1px #37322e solid;
		border-bottom: 1px #37322e solid;
	}	
	

#container #header {
		position: relative;
		margin:0 auto;
		top: 0px;
		background: #84786E;
		height: 450px;
		width: 800px;
		}

#header_img {
	height:450px;
	width: 800px;
	background-position: top left;
	background-color: transparent;
	background-repeat: no-repeat;
}	


#container #logo {
	background: transparent url(/css/public/051/logo2013.jpg) top left no-repeat;
	position: absolute;
	top:-160px;
	right: 20px;
	left:auto;
	z-index: 300;
	height:133px;
	width:500px;
}	
	
#logo_img, #logo a {
	display:none;
	}	
	
#textHG {
	position: absolute;
	margin:0;
	top: 0px;
	height: 450px;
	width: 100%;
}

#text {
	margin:0 auto;
	padding: 15px 20px;
	height:420px;
	width: 760px;
}
		

/*Footer*/	
	
#inhalt #footer { 
	position:absolute;
	right:20px;
	text-align: right;
	color: #332f2b;
	width: 150px;
	height: 15px;
	background: transparent;
	border: 0px #000 solid;
	font-size: .7em;
	margin-top:20px;
	z-index:9999;
	}


#inhalt #footer p {
	padding: 0;
	margin: 0px;
	text-align:right;
	}
	
#inhalt #footer a, #inhalt #footer a:link, #inhalt #footer a:visited {
		color: #332f2b;
		text-decoration: none;
		font-weight:normal;
		}
	
#inhalt #footer a:hover, #inhalt #footer  a:focus {
	color: #a00e0e;
	text-decoration: none;	
	}
	

/*Navigation*/	
#navi {
	position: absolute;
	top: -20px;
	left: 10px;
	width: 98%;
	height:30px;
	border: 0px #666 solid;
	}	
	
#navi2 { 
	font: 8px verdana, sans-serif; 
	padding: 0px; 
	margin: 0px;
	width: 100%; 
	border: 0px #666 solid;
	}
	
#navi ul {
	float: left;
	margin: 0px;
	padding: 0;
	height: 30px;
	}

#navi li {
	display: block;
	float:left;
	position: relative; /*wichtig f¸r IE 6, sonst Unternavi immer ganz links*/
	
	list-style-type: none;
	padding: 0;
	margin:0;
	height: 15px;
	}


#navi a, #navi a:link, #navi a:visited {
		padding: 0px 10px 0px 10px;
		border-right:1px solid #332f2b;
		font-size: 1.2em;
		color: #332f2b;
		text-decoration: none;
		letter-spacing: 1px;
		font-weight:normal;
		}
	

#navi ul a:hover, #navi ul #navi ul a:hover span{
	color: #a00e0e;
	padding: 0px 10px 0px 10px;
	text-decoration: none;
	}	
	
#navi ul a#navaktuell {
	color: #a00e0e;
	padding: 0px 10px 0px 10px;
	text-decoration: none;
	}		

#navi li a span {
	background: #F1F1F1;
}

/* 2. Ebene */
#navi ul ul {
	float: left;
	position: absolute;
	padding: 0px;
	margin: 0px;
	left: 0;
	top: 15px;
	display: none; /* Unternavigation ausblenden */
	width: 200px;
	z-index: 999;
}

/* Unternavigation  einblenden */
#navi ul li:hover ul {
	display: block;	
	left: auto;

}

#navi ul li ul li {
	width: auto;
	margin: 0; 
	padding: 0;
	background-color: #fff;
	height: auto;
	}

	
#navi ul li ul a, #navi ul li ul a:link, #navi ul li ul a:visited {
	display: block;
	width: 200px;
	text-decoration: none;
	color: #8f8b8b;
	font-weight: normal;
	background: #fff url(hg_navi.jpg) no-repeat top left;
	border: 1px solid #ccc;
	padding: 3px 5px 3px 10px;
	height: auto;
	cursor: pointer;
	z-index: 1000;
	}
	
	
#navi ul li ul a:hover span{
	text-decoration:none;
	color: #494747;
	background: transparent;
	padding: 3px 0px 3px 0px;
	}	
	

#navi ul ul a#navaktuell {
	text-decoration:none;
	color: #494747;
	padding: 3px 5px 3px 10px;
	background-color: #DFDBD1;
	}	
	
#navi ul ul a.navaktuell span{
	text-decoration:none;
	color: #494747;
	background-color: #DFDBD1;
	}		
	
	
/* fuer Grafiken und Blindtext */
#navi h3.select span {
	display:none;
	}
	
#navi h3.navipunkte1 span {
	display:none;
	}
	
	
	
/* Spezial-Gallerie */

#specialGallery {
height:450px;
width:800px;
margin: 0 auto;
top:0;
z-index:99;
}

/*Nur Bild*/
#nuvoSlider {
    width:800px; /* Change this to your images width */
    height:450px; /* Change this to your images height */
	border:0 none;
}
#nuvoSlider img {
    position:absolute;
    padding: 0;
    margin: 0;
    display:none;
    top:0;
    border: 0;
}
#nuvoSlider a {
    border:0;
}

/* Galerie-Navigation  */
.nivo-controlNav {
	position:absolute;
	left:0px;
	top:440px;
	width:100%;
	height:40px;
	text-align:center;
	z-index:100;
}

#specialGallery .nivo-controlNav a {
	display:inline-block;
	height:40px;
	width:auto;
	margin:0;
	padding:0;
	top:auto;
	left:auto;
}

#specialGallery .nivo-controlNav a:hover {
}

#specialGallery .nivo-controlNav img {
	height:38px;
	width:auto;
	margin:1px 2px 1px 2px;
	border:0;
	padding:0;
	opacity:.5;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE
	filter: alpha(opacity=50); // IE
}

#specialGallery .nivo-controlNav a.active img {
	border:1px solid #444;
	margin:0px 1px 0px 1px;
	opacity:1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; // IE
	filter: alpha(opacity=100); // IE
}

#specialGallery .nivo-controlNav a:hover img {
	border:1px solid #a00e0e;
	margin:0px 1px 0px 1px;
	opacity:.8;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; // IE
	filter: alpha(opacity=80); // IE
}

.nivo-directionNav a {
	display:none;
}

a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}

a.nivo-prevNav {
	left:15px;
}

#specialGallery .nivo-caption {
	background-color:#fff;
	text-align:center;
	color:#000;
}

#inhalt .nivo-caption p {
	text-align:center;
	color:#000;
	padding:1px;
	margin:0;
	font-size:11px;
}
	
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width: 200px)  and (max-width: 1023px) {
#text .text
{
  padding-top: 250px!important;
  padding-bottom: 15px;
  padding-left: 22px!important;
  width: 245px;

}
#header_img 
{background-size:100% auto!important;}

.cat-14 #header_img {display:none;}

#textHG {
	position: absolute;
	margin:0;
	top: 0px;
	width: 100%;
}
#text {
	margin:0 auto;

	width: 250px!important;
}

#inhalt p, #inhalt ul, #inhalt ol, #inhalt td, #inhalt th { 
	font: 9px arial, verdana, sans-serif;
	margin-top: 5px; 
	text-align: justify;
	}

#inhalt h1 { 
	font: bold 1.2em arial, verdana, sans-serif;
	letter-spacing: 1px; 
	margin-top: 5px;
	color: #fff;
	}	
	
#inhalt h2 { 
	font: bold 10px arial, verdana, sans-serif;
	letter-spacing: 1px; 
	margin-top: 5px;
	color: #fff;
	}	
	
#inhalt h3 { 
	font: bold .9em arial, verdana, sans-serif;
	letter-spacing: 1px; 
	margin-top: 5px;
	color: #fff;
	}
	
	#navi {
	position: absolute;
	top: 30px;
	left: -20px;
	width: 100px;
	border: 0px #666 solid;
	z-index:99999;
	}
	#navi a, #navi a:link, #navi a:visited {
	
		font-size: 1.2em;
		color: #332f2b;
		text-decoration: none;
		letter-spacing: 1px;
		font-weight:normal;
		}	
	img {max-width: 100%; height: auto;}

	

#container #header {
		
		margin:0 auto;
		top: 40px;
		left:10px;
		background: transparent!important;

		width: 100%;
		}
		#text .text * {
    color: #ffffff!important;
    text-align: left;
}

#header_img {

	width: 100%;
	background-position: top left;
	background-color: transparent;
	background-repeat: no-repeat;
}	


#container #logo {
	background: transparent url(/css/public/051/logo2013.jpg) top left no-repeat;
	 background-size: contain;
	    position: fixed;
        top: 0px;
        left: 0px;
	z-index: 300;
	width: 200px;

}	
	
#logo_img, #logo a {
	height: auto;
	width: 100%;
	}	
	
#textHG {
	position: absolute;
	margin:0;
	top: 0px;
	height: auto;
	width: 100%;
}

#text {
	margin:0 auto;
	padding: 15px 20px;
	height:auto;
	width: 100%;
}
/* Spezial-Gallerie */

#specialGallery {
height:auto;
width:100%;
margin: 0 auto;
top:0;
z-index:99;
}

/*Nur Bild*/
#nuvoSlider {
    width:100%; /* Change this to your images width */
    height:auto; /* Change this to your images height */
	border:0 none;
}
.nivoSlider img
{
  position: absolute;
  top: 0px;
  left: 0px;
  display:none;
}

.nivo-controlNav {
	position:absolute;
	left:0px;
	top:250px;
	width:100%;
	height:40px;
	text-align:center;
	z-index:100;
}

#distance {
    background: #58504a none repeat scroll 0 0;
    float: left;
    height: 40%;
    margin-bottom: -15em;
    width: 1px;
}
/* #footer { 
	position:fixed!important;
	right:20px!important;
	top:900px!important;
	
	}*/
		
}
 
/* Navigation */
.slicknav_menu {
    display:none;
    background: #909699;
    font-size: 13px;
    line-height: 14px;
    padding:0;
    line-height: 1em;

}

.slicknav_menu li {
    text-align: right;
    margin: 0 0 1px 0;
}

.slicknav_nav ul {
    margin-right:14px;
}

.slicknav_menu .slicknav_menutxt {
}

.slicknav_nav .slicknav_arrow {
    font-size: 1.1em;
    margin: 0;
    padding: 5px 0 5px 12px;
}

.slicknav_nav ul a {
    margin: 0;
    margin-right:15px;
    padding:4px 0;
    text-decoration: none;
}

.slicknav_parent {
    font-weight: bold;
}

.slicknav_parent ul {
    font-weight: normal;
}

@media screen and (max-width: 1023px) {
    #navi ul {
        display:none;
    }

    .slicknav_menu {
        display:block;
    }
}


- Für verschiedene Ausgabegrößen zum Beispiel folgendes:


/* Responsive */
/* fuer iPad (quer) oder kleiner */
@media screen and (max-width: 1023px) {

    #distance, #logo, #topExtraDiv {
        height: auto;
	width: 100%;
    }
    #container, #text {
        max-width: 100%;
    }
    #textHG {
        max-width: 92%;
        padding: 4%;
    }
    #header, #headerSlider, #header_img {
        width: 100%;
        height: auto;
    }
    #footer td {
        display:block;
    }
    #text img {
        max-width: 100%;
    }
    #text .image img {
        max-width: inherit;
    }
    #text span.left {
        margin: 0 10px 5px 0;
    }
    #text span.right {
        margin: 0 0 5px 10px;
    }
    #text span.image > img {
        max-width: 90%;
        height: auto;
    }

    div.columns {
        margin:0 0 0 10px;
    }
    div.columns .col-text {
        margin-top:10px;
    }
    div.columns div.col_2,
    div.columns div.col_3,
    div.columns div.col_4 { /* wird einspaltig */
        float: none;
        margin-left:0;
        margin-right:0;
        border-left: 0;
        border-right: 0;
        width: 95%;
        padding-bottom:15px;
        margin-bottom:15px;
        border-bottom: 1px solid #ddd;
    }
    div.columns > div:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    #text div.columns .image {
        padding-right:15px;
    }
    #text div.columns .image img {
        max-width:99%;
    }
	
}

/* Fuer iPad (hoch) oder kleiner */
@media screen and (max-width: 768px) {
    
    .text span.image {
        max-width: 40%;
    }
}

/* Fuer iPhone (quer) oder kleiner */
@media screen and (max-width: 568px) {

    .text td {
        display: block;
    }

}