img { max-width:100%; height:auto; }

.attention { color:red; font-size:150%; }
.display-only-on-smartphone { display:none; }
.normal-case { text-transform:none; }
.float-left { float:left; }
.float-right { float:right; }
.clearboth { clear:both; }
.margin-right { margin-right:40px; }
.margin-left { margin-left:40px; }



ul#ausbildung-opheusden li { margin-bottom:1em; }
figcaption { margin-top:1em; }


.bildstreifen { margin-top:40px; } /* Bildstreifen unter dem Text zb Impressum, Konzept*/

h2.margin-top-normal { margin-top:1.5em; } /* H2 nicht am Spaltenanfang */
p.anker { margin-top:.5em; }
a { color:#AD788D; }
a.interesse{ 
	background: url(../images/heart.png) no-repeat 0 50%;
	padding: 0 10px 5px 30px;
}
a.pdf { 
	background: url(../images/pdf-indicator.png) no-repeat 0 50%;
	padding: 0 10px 5px 30px;
}
/* Navigation*/
.navContainer nav li a,
nav ul li a:hover, 
nav ul li.active > a { 
		text-decoration: none;
		transition-timing-function: ease;
		transition-duration: 0.7s;
		transition-property: all;
		-moz-transition-timing-function: ease;
		-moz-transition-duration: 0.7s;
		-moz-transition-property: all;
		-webkit-transition-timing-function: ease;
		-webkit-transition-duration: 0.7s;
		-webkit-transition-property: all;
		-ms-transition-timing-function: ease;
		-ms-transition-duration: 0.7s;
		-ms-transition-property: all;
		-o-transition-timing-function: ease;
		-o-transition-duration: 0.7s;
		-o-transition-property: all;

}
.navContainer nav {
	background: url("../images/bg_nav.png") repeat-x;
	height: 50.9px;
	max-width: 980px;
	padding:0;
	margin: auto;
}
#mainNav { padding-top:15px; }
.navContainer nav ul { 	
	text-align:center; 
	padding:0; 
	margin:0;
}
.navContainer nav li {  
	display:inline; 
	font-family: 'avant_garde_book';
	background: url("../images/bg_list.png") no-repeat scroll 0 -10px transparent;
	padding:0; margin:0;
}
.navContainer nav li.first { background:none; }
.navContainer nav li a { 
		font-size: 15px;
		padding:15px 13px 13px;
		margin:0;
		color: #ab5f5f;
}

nav ul li a:hover, nav ul li.active > a { /*Transition und Farbe aktiver Link*/
	background-color:#ab5f5f;
	color: #FFF;
	text-decoration: none;
	/*border-bottom: 2px #9d3732 solid;*/
	-moz-box-shadow: inset 0 0 5px #7E3517;
	box-shadow: inset 0 0 5px #7E3517;
	-webkit-box-shadow: inset 0 0 5px #7E3517;
	-ms-box-shadow: inset 0 0 5px #7E3517;
	-o-box-shadow: inset 0 0 5px #7E3517;
}

nav ul ul li a:hover, nav ul ul li.active > a { /* Farbe der aktiven Unterpunkte*/
	background-color:#cb7f7f;
}

/* Navigation: Untermenü*/
.relative { position:relative; top:0; left:0; }
.absolute {position:absolute; z-index:10; top:20px; left:0; text-align:left; display:none; background:#FFF}
.relative:hover .absolute { display:block; } /* Untermenu einblenden */


.navContainer nav .absolute li { 
	display:block;
	width:350px; 
	font-family: 'avant_garde_book';
	background:none;
	padding:0; 
	margin:0;
			text-align:left;

}
.navContainer nav .absolute li a { 
		display:block;
}

/* /Navigation: Untermenü*/


p.termin { margin-bottom:1em; }
article {margin:0;}
article.not-first-sibling {margin-top:40px}

#menu {	display: none; } /* responsive menu nur für max-width:600px*/

#content .rechts-abgerueckt h1 { text-align:left; }
#content .text-align-center { text-align:center; }
#content .text-align-left { text-align:left; }
.zentriert-block { margin-left:auto; margin-right:auto; }
.no-display { display:none; }
#content .smaller { font-size:80%; }
.rechts-abgerueckt { margin-left: 20px; float:left;}
.links-abgerueckt { margin-right:20px; float:right; }

.caption-both { font-size:12px; font-style:italic; margin-top:1em;}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */


html { background:#faeedd }

header#top { 
	text-align:center; 
	width: 100%;
	background:#faeedd url(../images/header.jpg) no-repeat;
	position: fixed;
	z-index: 5;
	margin-top: 0;
	border: none;
}

header#top #logo { margin-top:10px; }


#container { max-width:980px; margin: 0 auto 60px; padding-top:200px;}


img#illustration { margin-top:30px; }
#innerContent { padding-top: 60px; }
#kuenstler-opheusden #innerContent { padding-top: 38px; }
#innerContent-startseite { padding-top: 35px; }
#content #innerContent-startseite h1 { margin-top:0; }

#content {	font-family: avant_garde_book; color: #646567}

#content li { list-style:none; }
.hometext, #content li, form  { /*Absätze außer auf Startsetie*/
	margin:0em;
	font-size: 14px;
	line-height: 1.5;
	color: #646567;
	text-align: justify;
}
.hometext { margin-bottom:1em; }
#hometext { 
	margin-bottom:0;
	font-family: stonesans_italic;
	font-size: 19px;
	line-height: 1.53;
	color: #646567;
}

#content h1 {
	margin-top:1em;
	font-family:avant_garde_demi;
	font-size:24px;
	font-weight:bold;
	color:#ab5f5f;
	text-align:center;
	text-transform:uppercase;
}

		
#content h2, #content div.replace-h2 {
	text-transform:uppercase;
	margin-bottom:1em;
	font-family:avant_garde_book;
	font-size:18px;
	font-weight:100;
	color:#ab5f5f;
	text-align:left;
}

footer {
	position:fixed;
	bottom:0;
	/*margin-top:40px;*/
	height: 36px;
	width: 100%;
	background-image: url(../images/footer.jpg);
	background-repeat: no-repeat;
}

.imageBox {
	position: relative;
	overflow: hidden;
	width:300px;
	height:549px;
}
.figure {
	position: absolute;
	bottom: 0; left: 0;
	height:526px;
	line-height:1.5;
	padding:8px;
	margin-bottom:3px;
	margin-left:3px;
	margin-right:3px;
	background: white;
	font-family:avant_garde_demi;
	text-align:center;
	color:#646567;
	font-size:18px;
}


.tr-opacity {
	opacity:0;
}

/* ältere IE*/
.lt-ie8 header#top { background:#faeedd url(../images/header.jpg) no-repeat;
position:static; }
.lt-ie8 #container { padding-top:40px; }
.lt-ie8 .figure {
	margin-bottom:0px;
	margin-left:0px;
	width:300px;
	height:549px;
}

.lt-ie7 .grid_6 { width:45%; }
.lt-ie7 #innerContent img { width:400px; height:auto; }
.lt-ie7 div.figure { display:none; }

/* IE7: Abrutschen des Inhalts nach ganz rechts */
.ie7-helper-div { display:none; }
.lt-ie8 .ie7-helper-div { display:block;height:1px;font-size:1px;line-height:1px;padding:0;margin:0;  }
.lt-ie7 .ie7-helper-div { display:none; }

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (max-width: 980px) { /*Menü ansonsten rechts unsichtbar*/
.navContainer nav li a {
	font-size: 14px;
	padding: 15px 2px 13px;
}
}
@media only screen and (max-width: 768px) { /*Menü ansonsten rechts unsichtbar*/
.navContainer nav li a {
	font-size: 11px;
	padding: 15px 1px 13px;
}
/*figure { float:none; display:block; width:100%; margin-left:0; }
figure img { float:none; }*/
}
@media only screen and (max-width: 600px) {
	#content { width:90%; padding-left:5%; padding-right:5%; }
	.display-only-on-smartphone { display:block; }
	figcaption { display:none; }
	.erster-absatz-direkt-unter-h1 { margin-top:40px; }	
	.navContainer nav li a {	font-size: 18px; }	
	.links-abgerueckt, .rechts-abgerueckt, .grid_6 { margin:0; padding:0; }
	#container { margin-bottom:35px; }
	article.not-first-sibling { margin:0; }
	header#top { position:static; }
	footer, #content img  { display:none; }
	.flexslider img { display: block !important; }
	#kontakt #content img#visi { display:inline-block; }
	#menu {	cursor:pointer; display: block; margin-top:20px; padding:20px; color:#ab5f5f; font-weight:bold;}
	.no-display-smartphone, .replace-h2{ display:none; }
	.navContainer { width:100%; }
	.navContainer nav { width:100%; height:auto; background:none;}
	.navContainer nav li { display:block; padding:0;} 
	.navContainer nav li a { display:block; padding:15px 13px 13px }
	.navContainer nav ul.absolute { position:static; display:block; width:100%;}
	.navContainer nav ul.absolute li { width:100%; text-align:center;}
	.navContainer nav li.relative { border:5px solid #ab5f5f; margin-top:10px;}

	#home #content,	#konzept #content, #philosophie #content,	#projekte #content, #kontakt #content, #impressum #content { 	background: none }
	/*#home #content { 	padding-top: 0px; }
	
	 }*/
	section#innerContent { padding-top: 0px; }
	
	header#top .navContainer { text-align:center; }
	#container {width:450px; display:block; padding-top:0;}
	#innerContent article {width:100%; display:block; float:none; }
	#content #innerContent-startseite .links, #content #innerContent-startseite .rechts, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { 
		float:none; display:block; width:100%;
	}
	.links { margin-bottom:30px; }
	.imageBox { float:none; margin: auto}
	#content .imageBox img { display:inline-block; }
	#innerContent-startseite .rechts-abgerueckt, #content .rechts-abgerueckt h1, .caption-both { text-align:center }
	.caption-both { float:none !important; }
	.unten-abgerueckt { margin-top: 0; }
	#content #innerContent-startseite h1 { margin-top:30px; margin-bottom:20px; }
	#content h2 { margin-top:40px; }
	.links-abgerueckt, .rechts-abgerueckt { margin:0; padding: 0; width:100%;}
	img#visi { display:inline-block; }
	
}

@media only screen and (max-width: 450px) {
	#container {width:100%; display:block; }
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 2cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
		
		.display-print { display:block; }
		.no-display-print, figure { display:none; }
		
		header#top, #content img, .replace-h2, #innerContent-startseite .links {display:none; }
		#container { padding-top:0; }
		#philosophie article.grid_6 { width:100%; float:none; display:block; }
		.links-abgerueckt, .rechts-abgerueckt { margin:0; float:none; }

}