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

html { height: 101%; }

body { background-image: url(img_hno/body.jpg); background-repeat: repeat-x; background-color: #cccccc; height: 100%; }

a { color: white; text-decoration: none; }
a:hover, #header #menu ul li a:hover { color: #ff6600; }

#white_back { display: none; }

#hno_back { position: relative; z-index: -5; top: 120%; }
#hno_back img { height: auto; position: absolute; width: 100%; }

#mitte { margin: 0px auto; width: 90%; max-width: 1350px; height: auto; margin-top: 60px; }

#header { width: 95%; padding-right: 5%; }
#header #menu { back ground: grey; float: left; font-family: 'Myriad Pro', Arial, Helvetica; font-size: 120%; margin-left: 65px; margin-top: 170px; }
#header #menu ul { list-style-type: none; }
#header #menu ul li { float: left; margin-right: 25px; }
#header #menu ul li a { color: #705100; text-decoration: none; }

#header #menu ul li a.on {color: #ff6600;}

#header #logo { back ground: green; float: right; font-family: 'Myriad Pro', Arial, Helvetica; color: #705100; text-align: right; }
#header #logo p#name { font-size: 220%; line-height: 150%; }
#header #logo h1, #header #logo p.wieh1 { font-weight: normal; font-size: 130%; }

#balken-abstand { width: 56%; height: 1px; back ground: red; float:left; position: relative; } 
 
#balken { position: relative; z-index: 99; color: white; font-family: 'Myriad Pro', Arial, Helvetica; font-size: 100%; width: 44%; max-width: 590px; float: left; height: 0; back ground: red; }
#balken #b1 { background-image: url(img_hno/bal1.png); background-repeat: no-repeat; min-height: 140px; margin-top: 45%; back ground: red; }
#balken #b1 img { float: right; margin-top: -172px; }
#balken #b2 { background-image: url(img_hno/bal2.png); background-repeat: no-repeat; min-height: 140px; margin-top: 15px; }
#balken #b3 { background-image: url(img_hno/bal3.png); background-repeat: no-repeat; min-height: 140px; margin-top: 15px; }
#balken #b1 h3 { margin-left: 60px; padding-top: 40px; }
#balken #b1 p, #balken #b2 p { margin-left: 60px; padding-top: 10px; }
#balken #b3 p { margin-left: 60px; padding-top: 20px; }

#bild { position: relative; font-family: Arial, Helvetica; width: 95%; margin-top: -10px; }
#bild img { border: 5px solid white; width: 100%; max-width: 1280px; position: relative; }
#text-in-bild { background: white; position: absolute; width: 90%; max-width: 1290px; padding: 2% 5%; border-right: 4px solid white; border-left: 4px solid white; bottom: 0; }
#text-in-bild p.orange { color: #ff6600; font-size: 130%; line-height: 1.5em; }

#content { width: 100%; margin-top: 2.5%; font-family: Arial, Helvetica; color: #333333; margin-bottom: 5%; line-height: 2em; }
#content ul { margin-left: 25px; }
#box_li { float: left; width: 50%; background: white none repeat scroll 0 0; opacity: 0.7; padding: 2% 5%; }
#box_li h1 { font-weight: normal; font-size: 130%; }
#box_li h2 { font-weight: normal; font-size: 130%; padding-bottom: 25px;}
#box_zwi { float: left; width: 2.5%; }
#box_re { float: left; width: 28.5%; background: white none repeat scroll 0 0; opacity: 0.7; padding: 2% 2%; border-right: 10px solid white; }
#box_reWeiss { float: left; width: 28.5%; background: white none repeat scroll 0 0; padding: 2% 2%; border-right: 10px solid white; } 
#box_kpl { margin-top: 2.5%; width: 88%; background: white none repeat scroll 0 0; opacity: 0.7; padding: 2% 2% 2% 5%; border-right: 10px solid white; }
#box_kpl a {  color: #000000; text-decoration: none; }
#box_kpl a:hover { color: #ff6600; }
#box_kpl h1 { font-weight: normal; font-size: 130%; }
#box_kpl h2 { font-weight: normal; font-size: 110%; }

#box_kplweiss { margin-top: 2.5%; width: 88%; background: white none repeat scroll 0 0; padding: 2% 2% 2% 5%; border-right: 10px solid white; }
#box_kplweiss a {  color: #000000; text-decoration: none; }
#box_kplweiss a:hover { color: #ff6600; }
#box_kplweiss h1 { font-weight: normal; font-size: 130%; }
#box_kplweiss h2 { font-weight: normal; font-size: 110%; }

.clear { clear: both; }

/*  GO FULL WIDTH BELOW 1450 PIXELS */
@media only screen and (max-width: 1450px) {
#balken #b1 { margin-top: 25%; }
}

/*  GO FULL WIDTH BELOW 1200 PIXELS */
@media only screen and (max-width: 1200px) {
#header #menu { font-size: 100%; margin-left: 30px; }
#header #menu ul li { margin-right: 15px; }
#header #logo p#name { font-size: 180%; line-height: 185%; }
#balken-abstand { width: 70%; }
#balken { width: 30%; font-size: 75%; }
#balken #b1 { margin-top: 15%; padding-top: 0px; }
#balken #b1 img { margin-top: -140px; width: 44%; }
#balken #b2, #balken #b3 { margin-top: 15px; }
#balken #b2 p { padding-top: 25px; }
#balken #b3 p { padding-top: 30px; }
#balken #b1 h3 { padding-top: 41px; }
#header #logo h1 { font-weight: normal; font-size: 110%; }
#text-in-bild { font-size: 90%; padding: 2%; width: 96%; }
#text-in-bild p.orange { font-size: 100%; }
#content { font-size: 90%; }
#box_li { width: 56%; padding: 2%; }
#box_kpl { width: 91%; padding: 2%; }
}


/*  GO FULL WIDTH BELOW 930 PIXELS 
@media only screen and (max-width: 930px) {
#header #menu { font-size: 80%; margin-left: 30px; }
#header #menu ul li { margin-right: 15px; }
#header #logo-div { width: 70%; margin-top: 23px; }
#header #logo-div img { width: 100%; }
#header #logo p#name { font-size: 150%; line-height: 220%; }
#header #logo h1 { font-weight: normal; font-size: 80%; }
} */


/*  GO FULL WIDTH BELOW 930 PIXELS  */
@media only screen and (max-width: 930px) {
body { background-image: none; background: white; height: 100%; }
#mitte, #header, #header #logo-div  { margin: 0; width: 100%; }
#header { padding-right: 0; }
#white_back { display: block; background: white; height: 75%; position: absolute; width: 100%; z-index:-1; margin-top: -60px; }
#header #menu { font-size: 120%; text-align: center; float: none; margin-top: 50px; margin-bottom: 30px; }
#header #menu ul li { float: none; width: 100%; height: 1.5em; }
#header #logo { float: none; text-align: center; }
#header #logo-div { margin-top: 23px; text-align: center; }
#header #logo-div img { width: 100%; max-width: 500px; }
#header #logo p#name { font-size: 150%; line-height: 220%; }
#header #logo h1 { font-weight: normal; font-size: 100%; }
#balken-abstand { display: none; }
#balken { width: 100%; margin: 0 auto; font-size: 85%; float: none; height: auto; }
#balken #b1 { margin-top: 0; }
#balken #b1 img { display: none; }
#balken #b2, #balken #b3 { margin-top: 5px; }
#balken #b2 p { padding-top: 20px; }
#balken #b3 p { padding-top: 25px; }
#balken #b1 h3 { padding-top: 40px; }
#bild { margin-top: 20px; width: 98%; }
#content { background: #cccccc; }
#box_li { float: none; width: 96%; padding: 2%; margin-top: 2%; }
#box_re { float: none; width: 94%; padding: 2%; margin-top: 2%; }
#box_kpl { float: none; width: 94%; padding: 2%; }
}