* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
   height: 100%;
}
body {
        padding: 20px 50px;
   /* Bei mehreren Angaben werden die Angaben intern nach der angenommenen Reihenfolge für 1=oben, 2=rechts, 3=unten, 4=links interpretiert.
Zwei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben und unten, die zweite den Abstand für rechts und links.
Drei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten.
Vier Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts, die dritte den Abstand für unten und die vierte den Abstand für links.
*/
   width: 1000px;
   height: 100%;
   background: #000;         /* #E9E9EB;
   background: #FFFFFF url(../img/bg.jpg) repeat-x;
   /*
   background: rgb(200, 54, 54); /* The Fallback
   background: rgba(200, 54, 54, 1);
   */


       /* zentrieren   */
   position:absolute;
   left:50%;
   margin:0 0 0 -500px;
   color: #707070;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
}


#main {
   background: #919199;
   /* border:2px sulid #D8FCD8; */
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   box-shadow: 6px 6px 8px 4px #707070,
             -2px -2px 5px 1px #707070;

   min-height: 640px;
   margin: 0;
   overflow: hidden !important;

    /* Mindesthöhe für moderne Browser */
   /*height:auto !important;  Important Regel für moderne Browser */
   /*height:720px;  Mindesthöhe für den IE              box-shadow: 6px 6px 1px 2px green;*/
    /* FF Scroll-leiste */
}

/* class mit .    id mit #  id hat Priorität*/
#header {
   height: 50px;
   margin-top: 4px;
}
/*
#headero {                  border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   height: 0px;
   padding: 4px 20px 4px;
   background: #FFFFFF;   box-shadow: 6px 6px 8px 4px #707070;
} */
#headeru1 {
   background:  url(../img/greenlight-bg.gif) repeat-x;
   height: 50px;
   padding: 0;
}
#headeru2 {
   background:  url(../img/yellowlight-bg.gif) repeat-x;
   height: 50px;
   padding: 0;
}
#headeru3 {
   background:  url(../img/redlight-bg.gif) repeat-x;
   height: 50px;
   padding: 0;
}
#headeru4 {
   background:  url(../img/bluelight-bg.gif) repeat-x;
   height: 50px;
   padding: 0;
}
#headeru5 {
   background:  url(../img/purplelight-bg.gif) repeat-x;
   height: 50px;
   padding: 0;
}

#logo {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;

   width: 231px;
   height: 40px;
   padding: 3px 20px 5px 20px;
}

#nav {
   height: 50px;
   padding: 0px 20px 0px;
   background: #FFF;
}

[class*='nav-'] {
    float: left;
    width: 156px;
    height:25px;
    margin-right: 20px;
    margin-top: 12px;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;

   box-shadow: 4px 4px 4px 3px #E9E9EB;
   text-align: center;
   font-size: 18px;
   font-weight: bold;
}

[class*='nav-']:last-of-type {
  margin-right: 0;
}


.nav-1 {
     background: #D8FCD8;
}
.nav-2 {
     background: #FCFCD8;
}
.nav-3 {
     background: #FDD7D8;
}
.nav-4 {
     background: #D8EAFC;
}
.nav-5 {
     background: #D8D8FC;
}

[class*='nav-'] a{
display:block;
height:100%;
width:100%;
text-decoration: none;
color: #707070;
}

[class*='nav-'] a:hover, [class*='nav-'] a:focus,[class*='lnav-']{
font-size: 20px;
color:#404040;
}

[class*='nav-'] a:active {
    color: #606060;
    font-size: 20px;
    box-shadow: 5px 5px 4px 0px #707070;
}

[class*='nav-']:hover, [class*='lnav-']{
box-shadow: 4px 4px 4px 2px #707070;
}

.lnav-1, .nav-1:hover {background:#B0F9B0;
                }
.lnav-2, .nav-2:hover {background:#F9F9B0;
                }
.lnav-3, .nav-3:hover {background:#FBAEB0;
                }
.lnav-4, .nav-4:hover {background:#B0D5F9;
                }
.lnav-5, .nav-5:hover {background:#B0B0F9;
                }

.section {
   background: #FFF;
   width: 510px;
   padding: 5px 10px 5px 10px;
   margin: 20px;
   min-height: 500px;
   float: left;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   box-shadow: 6px 6px 8px 4px #707070;
}

#section1a { border:4px solid #D8FCD8;}
#section2a { border:4px solid #FCFCD8;}
#section3a { border:4px solid #FDD7D8;}
#section4a { border:4px solid #D8EAFC;}
#section5a { border:4px solid #D8D8FC;}


[class*='aside-'] {
   width: 330px;
   background: #FFF;
   min-height: 140px;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   box-shadow: 6px 6px 8px 4px #707070;
   padding: 5px 10px 5px 10px;
   margin: 20px 20px 20px 0px;
   float: left;
   border:4px solid #FDD7D8;
}

.aside-1 {
  border:4px solid #FCFCD8;
}
.aside-1b {
  border:4px solid #D8EAFC;
}
.aside-2c {
  border:4px solid #D8D8FC;
}

[class*='aside-']:last-of-type {
    margin-top: 0px;
}


#footer {
    background: #FFF;
    height: 31px;
    padding: 10px 40px 4px;
    margin-bottom: 10px;
    clear:both;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
}