/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
   ************************************************CSS Reset für alle Browser*********************************************
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
        display: block;
}
body {
         font-family: Helvetica, Arial, Sans-Serif;
         line-height: 1,2em;
         width:100%;
         height:100%;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}
table {
        border-collapse: collapse;
        border-spacing: 0;
}


a {

         margin:0.25em;
         display:block;
         text-decoration:none;
}


/************************************************Ende CSS Reset************************************************************/

a:link {color:white;}    /* unbesuchter Link */
a:visited {color:#cae25a;} /* besuchter Link */
a:hover {color:#7f95db;}   /* mouseover Link */
a:active {color:#0000FF;}  /* gewählter Link */

body   /*Groesse, Position und Farbe der Schrift im Body*/
{
        padding:30px;
        color:white;
        margin-left: auto;
        margin-right: auto;
        width:960px;/*1040px;*/
        z-index:200;
}


/**********************************************************BILDER********************************************************/
#hintergrund   /*Hintergrundbild nimmt gesamtes Fenster ein, bewegt sich nicht und ist auf Ebene 100*/
{
        position:fixed;
        min-height: 100%;
        min-width: 1024px;
        width:100%;
        height:auto;
        top:0;
        left:0;
        z-index:100;
}

#kopflogo   /*Position und Groesse des HSBO Bildes*/
{
         position:absolute;
         left:5px;
         height:80px;
         width:200px;
         z-index:200;
}

#kopfrechts   /*Position und Groesse des MBBK Bildes*/
{
         position:absolute;
         right:5px;
         height:80px;
         width:200px;
         z-index:200;
}

#startlogo    /*Position und Groesse des Anfangsbildes*/
{
         position:relative;
         display: block;
         height:600px;
         width:400px;
         margin-top:20px;
         margin-left: auto;
         margin-right: auto;
         z-index:200;
}


#HSBOFOTO  /*Position und Groesse der Gebeaudeansicht der HSBO */
{
         position:relative;
         display: block;
         height:330px;
         width:500px;
         margin-left:auto;
         margin-right:auto;
         z-index:200;
}

#PDF    /*Download Bild Groesse*/
{
         position:relative;
         height:40px;
         width:40px;
}

.Bild    /*Bilder in Mein Projekt das "Info-Display" werden alle gleich gross gezeigt und ausgerichtet*/
{
         position:relative;
         display: block;
         width:300px;
         height:200px;
         margin-left:auto;
         margin-right:auto;
         margin-bottom:20px;
}

#Display    /*Groesse anpassen*/
{
         width:200px;
         height:300px;
}
#nach_oben /*Position und Groesse des gruenen Pfeils*/
{
         position:fixed;
         margin-left:917px;
         bottom:30px;
         width:50px;
         height:50px;
}


/*******************************************Div-Container*********************************************/
#header  /*Hintergrundfarbe, Textausrichtung, Textgroesse, Textart, Textfarbe, Groesse und Position des Headers*/
{
        position: relative;
        background-color:#7f95db;
        text-align:center;
        font-size:300%;
        font-family:Futura;
        font-weight: bold;
        color:white;
        height:80px;
        width:100%;
        margin-top:-15px;
        margin-bottom: 30px;
        padding:5px;
        z-index:200;
}

#navigation /*Textgroesse, Position und Groesse der Navigation, Textausrichtung und Abstaende*/
{
        position: relative;
        font-size:125%;
        float:left;
        width:199px;
        text-align:left;
        height:300px;           
        margin-top: 10px;
        z-index:210;
}

#dunkel /*Position und Groesse des dunklen Hintergrundes, z Ebene 100*/
{
         position:relative;
         width:700px;
         background-color: #08181E;
         border: 1px solid white;
         opacity: 0.7;       		/*durchsichtiger Hintergrund*/
         filter: alpha(opacity=70); 	/*fuer IE8 und aelter */
         margin-top:20px;
         margin-left:210px;
         margin-bottom:70px;
	 z-index:200;
}

#text /*Position des Textes, Textfarbe, Textausrichtung, Innenabstand 25 Pixel*/
{
         position:relative;
         color:white;
         padding-bottom:60px;
         padding:25px;
         text-align:justify;
         z-index:200;
}

#footer /*Position und Groesse des footers, Abstand zum Text, Innenabstand*/
{
        position:relative;
        background-color:#7f95db;
        height:30px;
	width:100%;
        margin-top:-30px;        
        padding:10px;
        z-index:200;
}

/*********************************************spezielle Elemente*******************************************/
#header a /*Links im Header exakt ausrichten*/
{
      float:none;
      display:inline;
}

.Download /*Schriftgroesse und Unterstreichung*/
{
         font-size:200%;
         text-decoration:underline;
}

.quellen /*Innenabstand Tabelle, mit Rahmen*/
{
        padding:10px;
        border:4px solid white;
        z-index:200;
}

#text h1 /*Überschrift im Textbereich; Groesse, Dicke, Ausrichtung*/
{
         font-size:170%;
         font-weight:bold;
         text-align:center;
}

p /*Definition von Abstaenden bei Absaetzen*/
{ 
         line-height:1.5em;
         padding:1em;
         margin-bottom:1em;
         text-align:justify;
}

ul /*Listen mit Punkt und Abstand*/
{
         list-style:disc;
         padding-left:15px;
         padding-top:15px;
}

h3 /*Groesse der Ueberschrift*/
{
         font-size:165%;
}

h4 /*Groesse der Ueberschrift*/
{
         font-size:120%;
}

b /*Definition für fette Schrift*/
{
         font-weight:bold;
}



/**************************************************** Navigationsleiste************************************************/
/*********Quelle: http://www.overpie.com/css/articles/css-vertical-fly-out-menu*************/

/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
}

/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
    background-color:#7f95db;
    border-bottom:solid 1px white;
    width:150px;
    cursor:pointer;
}

/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover{
    background-color:#6679e9;
    position:relative;
}

/* We apply the link style */
#menuwrapper ul li a{
    padding:5px 15px;
    color:#ffffff;
    display:inline-block;
    text-decoration:none;
}

/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul{
    position:absolute;
    display:none;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
#menuwrapper ul li:hover ul{
    left:150px;
    top:0px;
    display:block;
}

/* we apply different background color to 2nd level menu items*/
#menuwrapper ul li ul li{
    background-color:#cae25a;
}

/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover{
    background-color:#b1b536;
}

/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
    color:#454444;
    display:inline-block;
    width:120px;
}

/**** THIRD LEVEL MENU ****/
/* We need to hide the 3rd menu, when hovering the first level menu */
#menuwrapper ul li:hover ul li ul{
    position:absolute;
    display:none;
}

/* We show the third level menu only when they hover the second level menu parent */
#menuwrapper ul li:hover ul li:hover ul{
    display:block;
    left:150px;
    top:0;
}

/* We change the background color for the level 3 submenu*/
#menuwrapper ul li:hover ul li:hover ul li{
    background:#86d3fa;
}

/* We change the background color for the level 3 submenu when hovering the menu */

#menuwrapper ul li:hover ul li:hover ul li:hover{
    background:#358ebc;
}

/* We change the level 3 link color */
#menuwrapper ul li:hover ul li:hover ul li a{
    color:#ffffff;
}

/* Clear float */
.clear{
    clear:both;
}