/* css released under Creative Commons License -  http://creativecommons.org/licenses/by/2.0/deed.en  */
/* html5 + CSS 3 Template created by miss monorom  http://intensivstation.ch 2013 */

/* reset */
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* render html5 elements as block 
   rendert html5 elemente als block  */

header, footer, section, aside, nav, article { display: block;}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9375em; /*15px*/
	color: #656565;
	padding: 0;
	margin: 0px 20px;
	background-color: #E2FBFB;
}

html{
-webkit-text-size-adjust: none;
}


/* --------container zentriert das layout---------- */
#container {
	position: relative;
    max-width: 928px;
    min-width: 480px;
    margin: 20px auto 5px auto;
	background-color: #fff;
}

a {color: #999; text-decoration: underline;}
a:visited {color:#999;}
a:hover {color: #000; text-decoration: underline;}




/*----------bild----------*/


	
header {
	height: 160px;
	}

/*#title {position: absolute; 
	top: 120px; 
	left: 240px;
	margin: 0px;
	}
	
#title h1 {
	}*/	

#logo {position: absolute;
	width: 208px;
	height: 160px;}

#header-banner {
	margin-left: 208px;
	height: 160px;
	background-image: url(images/banner-tara.jpg);
	background-repeat: no-repeat;
	background-position: center;}

/*#header-banner-shadow {
	position: absolute; 
	left: 208px;
	top: 0px;
	z-index: 5;
}*/	


/*----------nav----------*/
nav {
	float: left;
    width: 208px;
	margin: 15px 0px 50px 0px;
	padding: 0px 0px 0px 0px;
}

nav ul {
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	list-style-type: none;
	line-height: 1.3em; /*22px;*/
	vertical-align:middle;
	}
nav ul ul{
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	}
nav ul ul ul{
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	}	
	
nav ul ul ul ul{
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	font-size: 0.95em;
	}	
	
	
nav a {
	color:#888;
	text-decoration:none;
	display:block;
	border-bottom: 1px solid;
	border-color: #ddd;
	padding: 5px 0px 2px 17px;
	margin: 0px 0px 0px 0px;
	font-size: 0.95em; 
}

nav li li a{
	padding:5px 0px 2px 31px;
	margin:0px 0px 0px 0px;
	font-size: 0.85em;
	}
	
nav li li li a{
	padding:5px 0px 2px 43px;
	margin:0px 0px 0px 0px;
	font-size: 0.8em;
	}
	
nav li li li li a{
	padding:5px 0px 2px 50px;
	margin:0px 0px 0px 0px;
	}
	

	
nav a:hover {
	display: block;
	background-color: #F5F5F5;
	color: #000;
	text-decoration: none;
	}

nav  a.selected {
	color: #000;
	background-color: #F5F5F5;
	display: block;
}

/*----------text----------*/

#content {
	margin: 0px 0px 0px 208px; /* 200px macht Platz für den<nav> */
	min-height: 500px;
	padding: 0px;
    line-height: 1.3846em; /*18px*/
}

/*#content a {color: #2F5AD3;text-decoration: none;}
#content a:visited {color:#2F5AD3;}
#content a:hover {color: #aaa;}*/

article {
	margin: -160px 0px 20px 0px;
	padding: 0px 40px 25px 30px;
	background-image: url(images/schatten-29prozent.png);
	background-repeat: repeat-x;
	border-top: 1px solid #E2FBFB; /*sorgt dafür, dass der weisse Schatten am richtigen Ort bleibt, dient sonst für nichts, und ist ab 480px weg*/
}
	
h1 {
	margin-top: 53px;
	padding-top: 70px; 
	padding-right: 0px; 
	padding-bottom: 30px
	padding-left: 0px;
	color: #007575;
	font-size: 1.9em;
	font-weight: normal;
	line-height: 1em;
	text-shadow: 0px 0px 7px #fff;
}

/*KREUZPFEILPROBLERM MIT: 
h1 {
	padding: 123px 0px 30px 0px;
	color: #007575;
	font-size: 1.9em;
	font-weight: normal;
	line-height: 1em;
	text-shadow: 0px 0px 7px #fff;
}*/

/*h2 {
	font-size: 1.1em; 
	font-weight: bold;
	line-height: 1.7em; 
	color: #000;
	padding-bottom: 4px;
}*/

h2 {
	color: #007575;
	font-size: 1.25em;
	padding-top: 30px;
	padding-bottom: 15px;
	font-weight: normal;
}
	
article p {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 16px 0px;
	line-height: 1.3em;
	}
	
article ul{
	margin: -4px 0px 12px 18px;
	padding: 0px 0px 6px 0px;
	left: 20px;
	}
article ol{
	margin: -4px 0px 12px 18px;
	padding: 0px 0px 6px 0px;
	left: 20px;
	}
	
	
article ul li{
	margin: 0px 0px 3px 0px;
	padding: 0px 0px 0px 0px;
	}
article ol li{
	margin: 0px 0px 3px 0px;
	padding: 0px 0px 0px 0px;
	}
	
	
article img{
	float: right;
	margin: 20px 0px 20px 20px;
	padding: 0px 0px 0px 0px;
	}
	
article table{margin: 0px 0px -10px 0px;}
article table td{padding: 0px 10px 10px 0px;}

article a {
	color: #17B7B5;
	text-decoration: none;
	font-weight: normal;
} /*#009999*/
article a:visited {color: #17B7B5; text-decoration: none; font-weight: normal;}
article a:hover {
	color: #4EC0D2;
	text-decoration: underline;
}

table td {vertical-align: top;}



iframe{
	width: 280px; 
	height: 280px;
	margin-left: 20px;
	float: right;}

/* -----------clearthefloats--------------------------- */
#clearthefloats {
    clear: both;
}

/*----------footer----------*/
footer {
    max-width: 930px;
    min-width: 480px;
    margin: 8px auto 5px auto;
	padding: 0;
	font-size: 0.733em; /*11px;*/
}
footer p{
	text-align: right;
	padding: 0px 20px 0px 20px;
	margin: 0px 0px 0px 0px;
	color: #555;
}
footer a {
	color: #555;
	text-decoration: none;
}
footer a:visited {
	color: #555;
	text-decoration: none;
}

footer a:hover {
	color: #000;
	text-decoration: underline;
}

/* -----------WebYep pdf--------------------------- */
img.WebYepAttachmentIcon {float:left; position:relative; width:14px; height:auto; top:4px; margin:0 5px 0 0; display:none;} 


/* -----------always scrollbar------------------ */

html {overflow-y: scroll;}

/* -----------classes--------------------------- */
.smallerfont {font-size: 80%;}
.center {text-align: center;}
.notbold {font-weight: normal;}
.black {color: #222;}
.shadow { box-shadow: 0px 2px 10px #adc1d0; }
.iphone-only {display: none;} 
.desktop-only {display: block;} 

.SCHWARZ {
    color: #222;}
	
.GRUEN {
	color: #007575;
	padding-bottom: 15px;
}
.gruen {
	color: #007575;
	padding-bottom: 15px;
}

.GRUENBIGGER {
	color: #007575;
	font-size: 1.25em;
	padding-bottom: 15px;
}
.gruenbigger {
	color: #007575;
	font-size: 1.25em;
	padding-bottom: 15px;
}	
	

.GRUENBOLD {
	color: #007575;
	font-weight: bold;
	padding-bottom: 15px;
}
.gruenbold {
	color: #007575;
	font-weight: bold;
	padding-bottom: 15px;
}	
	


/*@media only screen and (max-width: 670px) { 
#title p {
	padding-top: 100px;}	
}*/

@media only screen and (max-width: 830px) { 
iframe{float: none; margin-left: 0px;}
}

@media only screen and (max-width: 750px) { 
h1 {font-size: 1.6em;}
}

@media only screen and (max-width: 700px) { 
h1 {font-size: 1.5em;}
body {margin: 0px 10px;}
#container {margin-top: 10px;}
}


@media only screen and (max-width: 590px) { 
h1 {font-size: 1.4em;}
body {margin: 0px 0px;}
#container {margin-top: 0px;}
}
	
@media only screen and (max-width: 480px) { 

body {
   margin: 0px;
}

#container {
	margin-top: 0px;
    min-width: 320px; 
}

header {
	height: 80px;
}

#logo {
	width: 104px;
	height: 80px;}
	
#header-banner {
	margin-left: 104px;
	height: 80px;
	background-image: url(images/banner-tara-small.jpg);}


#title p {
	padding: 60px 0px 0px 110px;
	color: #fff; font-size: 0.95em; text-decoration: none; line-height: 1em;}	


#shadow {
	height: 108px;
}


nav{
    margin-top: 0px;
    margin-bottom: 10px;
	padding:0 0px 0 0px;
    width:100%;
	background-color: #fff;
} 

nav li {
    float: none;
    margin: 0;
    width:100%;
    display:block;
  } 
nav a {
    font-size:1em;
    position:relative;
	padding-left: 20px;	
  } 
  
nav li li a{
	padding-left:28px;
	}
 

#content{
    float: left;
    margin: 0px 0px 0px 0px; 
	background-color: #fff;
}
article {
	margin-top: 20px; 
	padding: 0px 15px 15px 20px;
	border-top: none;
}
	
h1 {
	margin-top: 10px;
	padding-top: 0px;
}
	
	

footer {
    min-width: 100%;  
	margin-top: 8px; 
}

footer p{
	text-align: left;
}

.iphone-only {display: block;} 
.desktop-only {display: none;} 


}