/* Bio-Solar-Haus CSS-Stylesheet (c) 2008 Wolfgang Kirch */


/* Definierung Body */

body {
color: black; background-color: #C0C0C0;
font-size: 100.01%;
font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 12px;
margin: 0; padding: 0;
text-align: center;  /* Zentrierung im Internet Explorer */
}

/* CSS/JS - Popup Startseite für Events  */

#popup_text
{
position:absolute; left:0; top:0; width:100%; height:790px; z-index:99002; background-color:#c0c0c0;filter:alpha(opacity=80); -moz-opacity:0.80;}

#popup_bg
{
position:absolute; left:0; top:0%; width:100%; height:100%; z-index:99000; background-color: transparent;}


/* Definierung Standardlinks */

a:link    {color: #000000; text-decoration: none;}
a:visited {color: #444444; text-decoration: none;}
a:active  {color: #444444; text-decoration: none;}
a:hover   {color: #444444; text-decoration: none;}

/* Definierung Glossar-Datenbank (Noch nicht online!) */

.glossar a:link {color: #222222; background-image:url(../bilder/glossar-link.jpg);background-repeat: x-repeat; background-position: center;}
.glossar a:hover {color: #222222; background-image:url(../bilder/glossar-link.jpg);background-repeat: x-repeat; background-position: center;}
.glossar a:visited {color: #222222;background-image:url(../bilder/glossar-link.jpg);background-repeat: x-repeat; background-position: center;}
.glossar a:active {color: #222222; background-image:url(../bilder/glossar-link.jpg);background-repeat: x-repeat; background-position: center;}

/* Definierung Hover-Effekt Webcams */

.webcams:hover img {border: 1px solid #222;filter:alpha(opacity=100); -moz-opacity:1.00;}
.webcams img {border: 1px solid #888; filter:alpha(opacity=90); -moz-opacity:0.90;}

/* Definierung Hover-Effekt Häusergalerie */

.hausbeispiele:hover img {border: 1px solid #222;filter:alpha(opacity=100); -moz-opacity:1.00;}
.hausbeispiele img {border: 1px solid #888; filter:alpha(opacity=80); -moz-opacity:0.80;}

/* Definierung Hover-Effekt Baukosten-Beispiele */

.baukostenbeispiele:hover img {border: 1px solid #222;filter:alpha(opacity=100); -moz-opacity:1.00;}
.baukostenbeispiele img {border: 1px solid #888; filter:alpha(opacity=80); -moz-opacity:0.80;}

/* Definierung Hover-Effekt Kontaktauswahl */

.kontaktimages:hover img {border: 0px solid #222;filter:alpha(opacity=100); -moz-opacity:1.00;}
.kontaktimages img {border: 0px solid #888; filter:alpha(opacity=80); -moz-opacity:0.80;}


/* Definierung Schriftklassen */

.navi_info {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 10px; color:#555; line-height: 13px;}

.standard10 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 10px; color:#000; line-height: 13px;}
.standard11 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 11px; color:#000; line-height: 14px;}
.standard12 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 12px; color:#000; line-height: 15px;}
.standard14 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 14px; color:#000; line-height: 18px;}
.standard16 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 16px; color:#000; line-height: 20px;}
.standard18 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 18px; color:#000; line-height: 20px;}

.grau12 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 12px; color:#333; line-height: 15px;}
.grau14 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 14px; color:#333; line-height: 18px;}
.grau16 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 16px; color:#333; line-height: 20px;}
.grau18 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 18px; color:#333; line-height: 20px;}

.schwarz12 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 12px; color:#000; line-height: 15px;}
.schwarz14 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 14px; color:#000; line-height: 18px;}
.schwarz16 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 16px; color:#000; line-height: 20px;}
.schwarz18 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 18px; color:#000; line-height: 20px;}

.weiss12 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 12px; color:#FFF; line-height: 15px;}
.weiss14 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 14px; color:#FFF; line-height: 18px;}
.weiss16 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 16px; color:#FFF; line-height: 20px;}
.weiss18 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 18px; color:#FFF; line-height: 20px;}

.rot10 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 10px; color:#C3042D; line-height: 13px;}
.rot11 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 11px; color:#C3042D; line-height: 12px;}
.rot12 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 12px; color:#C3042D; line-height: 15px;}
.rot14 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 14px; color:#C3042D; line-height: 18px;}
.rot16 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 16px; color:#C3042D; line-height: 20px;}
.rot18 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 18px; color:#C3042D; line-height: 20px;}

.gruen10 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 10px; color:#128961; line-height: 13px;}
.gruen11 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 11px; color:#128961; line-height: 12px;}
.gruen12 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 12px; color:#128961; line-height: 15px;}
.gruen14 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 14px; color:#128961; line-height: 18px;}
.gruen16 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 16px; color:#128961; line-height: 20px;}
.gruen18 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 18px; color:#128961; line-height: 20px;}

.gelb10 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 10px; color:#FBD10B; line-height: 13px;}
.gelb12 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 12px; color:#FBD10B; line-height: 15px;}
.gelb14 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 14px; color:#FBD10B; line-height: 18px;}
.gelb16 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 16px; color:#FBD10B; line-height: 20px;}
.gelb18 {font-family: Arial,Arial Narrow,Helvetica,sans-serif; font-size: 18px; color:#FBD10B; line-height: 20px;}

.xl {font-family: Arial Narrow,Arial,Helvetica,,sans-serif; font-size: 76px; color:#FFF; padding: 2px;}
.xxl {font-family: Arial Narrow,Arial,Helvetica,,sans-serif; font-size: 90px; color:#FFF; padding: 2px;}
.normal {font-family: Arial Narrow,Arial,Helvetica,,sans-serif; font-size: 14px; color:#FFF; padding: 8px;}

/* Hauptcontainer --------------------------------------------------------------------------------------------- */

#container {width: 970px; height: 726px; margin: 5px auto; padding: 0; border: 0px solid #CCCCCC;  position: relative; text-align: left;
background: #EEEEEE;}

/* Boxen --------------------------------------------------------------------------------------------- */

#box_logolinks {
position: absolute; top:0px; left:0px; width: 970px; height: 100px; margin: 0px; padding: 0px; text-align: left;
color: #222;line-height: 100px; background-color: #FFFFFF;}

#box_logorechts {
position: absolute; top:0px; left:565px; width: 400px; height: 100px; margin: 0px; padding: 0px; text-align: right;
color: #222;line-height: 20px; background-color: transparent;}

#box_adressinfo {
position: absolute; top: 85px; left: 630px; width: 338px; height: 12px; margin: 0px; padding: 0; text-align: left;
background: transparent; border: 0px dashed #dddddd; color: #000; z-index: 9999;}

#box_navi1 {
position: absolute; top:102px; left:0px; width: 960px; height: 20px; line-height: 20px; margin: 0px; padding-left: 10px; text-align: left;
background: #DDDDDD; border: 0px dashed #dddddd; color: #0C4E33; float: left; font-weight: 100; z-index: 9999;
}

#box_main_filter {
position: absolute; top: 124px; left: 0px; width: 720px; height: 588px; margin: 0px; padding: 5px; text-align: left;
background-image:url(../temp_bilder/bsh-logo.jpg);background-repeat: no-repeat; background-position: center;
filter:alpha(opacity=15); -moz-opacity:0.15; z-index:1;background-color: #FFFFFF;
}

#box_main {
position: absolute; top:124px; left:0px; width: 710px; height: 588px; margin: 0px; padding: 15px; text-align: left;
 color: #222;z-index:2; background-color: transparent;}

#box_siesindhier {
position: absolute; top:138px; left:0px; width: 510px; height: 18px; margin: 0px; margin-left: 20px; text-align: left; line-height: 18px;
 color: #222;z-index:0; background-color: transparent;}


#box_argumente_left {
position: absolute; top:164px; left:10px; width: 210px; height: 558px; margin: 0px; text-align: left;
 color: #222;z-index:2; background-color: transparent;}

.box_argumente_left:hover img {border: 1px solid #222;filter:alpha(opacity=100); -moz-opacity:1.00;}
.box_argumente_left img {border: 1px solid #888; filter:alpha(opacity=85); -moz-opacity:0.85;}

#box_argumente_right {
position: absolute; top:164px; left:230px; width: 490px; height: 230px; margin: 0px; text-align: center;
 color: #222;z-index:2; background-color: transparent;}

#box_argumente_bottom {
position: absolute; top:420px; left:230px; width: 490px; height: 230px; margin: 0px; text-align: left;
 color: #222;z-index:2; background-color: transparent;}

#box_sonnenparkinfos {
width: 450px; line-height: 18px; margin: 0px; text-align: center; color: #FFF;z-index:2; background-color: #FCD51E;
border: 1px solid #C6A404;}


/* Highlight - Boxen rechts --------------------------------------------------------------------------------------------- */

#box_highlights {
position: absolute; top:124px; left:732px; width: 236px; height: 600px; margin: 0px; padding: 0px; text-align: left;
background: #FFFFFF; color: #222;
}

#box_highlight1 {
position: absolute; top:0px; left:0px; width: 238px; height: 118px; margin: 0px; padding: 0px; text-align: left;
background: #FFFFFF; color: #222;
}
#box_highlight1_filter {
position: absolute; top: 83px; left: 0px; width: 238px; height: 25px; margin: 0px; padding: 0px; text-align: left;
background: #FFFFFF;filter:alpha(opacity=60); -moz-opacity:0.60;
}

#box_highlight2 {
position: absolute; top:120px; left:0px; width: 238px; height: 118px; margin: 0px; padding: 0px; text-align: left;
background: #FFFFFF; color: #222;
}
#box_highlight2_filter {
position: absolute; top: 83px; left: 0px; width: 238px; height: 25px; margin: 0px; padding: 0px; text-align: left;
background: #FFFFFF;filter:alpha(opacity=60); -moz-opacity:0.60;
}

#box_highlight3 {
position: absolute; top:240px; left:0px; width: 238px; height: 118px; margin: 0px; padding: 0px; text-align: left;
background: #FFFFFF; color: #222;
}
#box_highlight3_filter {
position: absolute; top: 83px; left: 0px; width: 238px; height: 25px; margin: 0px; padding: 0px; text-align: left;
background: #FFFFFF;filter:alpha(opacity=60); -moz-opacity:0.60;
}

#box_highlight4 {
position: absolute; top:360px; left:0px; width: 238px; height: 118px; margin: 0px; padding: 0px; text-align: left;
background: #FFFFFF; color: #222;
}
#box_highlight4_filter {
position: absolute; top: 83px; left: 0px; width: 238px; height: 25px; margin: 0px; padding: 0px; text-align: left;
background: #FFFFFF;filter:alpha(opacity=60); -moz-opacity:0.60;
}

#box_highlight5 {
position: absolute; top:480px; left:0px; width: 238px; height: 118px; margin: 0px; padding: 0px; text-align: left;
background: #FFFFFF; color: #222;
}
#box_highlight5_filter {
position: absolute; top: 83px; left: 0px; width: 238px; height: 25px; margin: 0px; padding: 0px; text-align: left;
background: #EEEEEE;filter:alpha(opacity=60); -moz-opacity:0.60;
}

#box_text_highlight {
position: absolute; top: 88px; left: 0px; width: 235px; height: 48px; margin: 0px; padding: 0px; text-align: left;
background: transparent; z-index:599; color:#A4051B; text-align: right; text-decoration: none;
}

/* Boxen quer unten --------------------------------------------------------------------------------------------- */


#box_bigbanner {
position: absolute; top: 726px; left: 0px; width: 970px; height: 60px; margin: 0px; padding: 0; text-align: left;
background: #FFFFFF; border: 0px dashed #dddddd; color: #222;}

#cooplinks {position: absolute; top: 787px; left: 0px; width: 10px; height: 1px; margin: 0px; padding: 0; text-align: left;
background-color: transparent;}


/* Colorboxen Auswahlmenü Kontakt-Links ------------------------------------------------------------------------- */

#box_kontakt_gruen {
width: 470px; height: 65px; padding-left: 5px; padding-right: 5px; text-align: left; line-height: 22px;
color: #333333;z-index:0; background-image:url(../bilder/kontakt-gruen.jpg);background-repeat: no-repeat;
border-left: 2px solid #CCC; border-top: 2px solid #CCC; border-right: 3px solid #999; border-bottom: 3px solid #999;
}

#box_kontakt_rot {
width: 470px; height: 65px; padding-left: 5px; padding-right: 5px; text-align: left; line-height: 22px;
color: #333333;z-index:0;  background-image:url(../bilder/kontakt-rot.jpg);background-repeat: no-repeat;
border-left: 2px solid #CCC; border-top: 2px solid #CCC; border-right: 3px solid #999; border-bottom: 3px solid #999;
}

#box_kontakt_gelb {
width: 470px; height: 65px; padding-left: 5px; padding-right: 5px; text-align: left; line-height: 22px;
color: #333333;z-index:0; background-image:url(../bilder/kontakt-gelb.jpg);background-repeat: no-repeat;
border-left: 2px solid #CCC; border-top: 2px solid #CCC; border-right: 3px solid #999; border-bottom: 3px solid #999;
}

/* Filter -------------------------------------------------------------------------------------------------------- */


#filter1 {
height: 2px; width: 100%; position: absolute; top: 100px; left: 0px; margin: 0; padding: 0;
background-color: #FFFFFF; filter:alpha(opacity=25); -moz-opacity:0.25; z-index:999;
}
#filter2 {
height: 2px; width: 100%; position: absolute; top: 124px; left: 0px; margin: 0; padding: 0;
background-color: #555555; filter:alpha(opacity=25); -moz-opacity:0.25; z-index:899;
}

/* Hautpmenü-Navigation ------------------------------------------------------------------------------------------ */


#nav {margin:0px 0 0px 0; z-index: 7001;}

/* the styling */
#nav {width:750px; height:20px; background:#DDD; position:relative;}

#nav .select, #nav .current {margin:0; padding:0; list-style:none;}

#nav li {display:inline; margin:0; padding:0; height:auto;}

#nav .select a,
#nav .current a {display:block; height:20px; float:left; background:#DDD; padding:0 10px 0 10px; text-decoration:none; font-size:12px; line-height:20px; white-space:nowrap; border-right:1px solid #fff; color:#333;}
* html #nav .select a, * html #nav .current a {width:1px; height:21px;}


#nav .select a:hover,
#nav .select li:hover a {background:#CCC; cursor:pointer; color:#000;}

#nav .sub {display:none; z-index:7000;filter:alpha(opacity=100); -moz-opacity:1.00;}

/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0;}

#nav .current a {background:#BBB; color:#000;}


#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover {background:#CCC; color:#000;}

#nav .sub_active .current_sub a,
#nav .sub_active a:hover {background:#DDD; color:#ff0;}

#nav .select li a:hover .sub,
#nav .select li:hover .sub {display:block; position:absolute; width:720px; top:20px; left:0; background:#DDD; margin-top:0; padding:0; z-index:100; color:#fff; font-size:11px;}

#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}

#nav .sub_active {display:block; position:absolute; width:720px; top:20px; left:0; background:#DDD; margin-top:0; padding:0; z-index:10;}
* html #nav .sub_active, * html #nav .select a:hover .sub {z-index:-1; margin-top:0; margin-t\op:1px;}

#nav .sub_active a {height:31px; text-decoration:none; line-height:20px; white-space:nowrap; display:block; float:left; background:#DDD; padding:5px 10px 10px 10px; margin:0; font-size:12px; white-space:nowrap; border:0; color:#fff;}

#nav .select a:hover .sub li a,
#nav .select li:hover .sub li a {display:block; background:#DDD; padding:0px 10px 0px 10px;line-height: 32px; height: 32px; margin-top: 1px; white-space:nowrap; border:0; color:#000; font-size:12px;}



/* AB HIER : FÜR SPÄTERE ERWEITERUNGEN -------------------------------------------------------------------------------------- */

  a.infobox { background-image:url(../bilder/glossar-link.gif);background-repeat: repeat; background-position: center;}
  a.infobox:hover { cursor:help; background-image:url(../bilder/glossar-link.gif);background-repeat: repeat; background-position: center;}
  a.infobox span { visibility:hidden; position:absolute; left:-99em;
    margin-top:13px; padding:1em; text-decoration:none; }
  a.infobox:hover span, a.infobox:focus span, a.infobox:active span {
    visibility:visible; left:0.5em; width: 450px;
    border-left:1px solid #BBBBBB; border-top: 1px solid #BBBBBB;
    border-bottom: 1px solid #888888; border-right: 1px solid #888888;
    color:#111; background: #DDDDDD;filter:alpha(opacity=92); -moz-opacity:0.92;}