/* 
    Created on : 28.01.2014, 10:14:26
    Author     : roman bleck . linuxandmore
*/

html, body {
    font-size: 1em;
    color: #000000;
    background-color: #CCCCCC;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0%;
    font-family: 'Arial', sans-serif;
}
/*grosse Box für alles*/
#box {
    position: relative;
    top: 0px;
    left: 0px;
    margin: 30px auto;
    width: 830px;
    min-height: 680px;
    border: 0px solid red;
}
/*Navigation*/
#navi {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 180px;
    height: 220px;
    background-color: #0079b3;
    text-align: right;
    margin: 0px;
    margin-right: 8px;
    -moz-box-shadow: 6px 6px 10px #aaa;
    -webkit-box-shadow: 6px 6px 10px #aaa;
    box-shadow: 6px 6px 10px #aaa;
    z-index: 10;
}
/*Logo*/
#logo {
    position: absolute;
    top: 200px;
    left: 30px;
    width: 253px;
    height: 150px;
    z-index: 100;
}
/*Typ auf der Leiter*/
img.typ {
    display: block;
    position: fixed;
    bottom: 0px;
    right: 50px;
    width: 151px;
    height: 300px;
    z-index: 5;
}
/*Textbox in weiss*/
#inhalt {
    position: absolute;
    top: 0px;
    left: 188px;
    width: 480px;
    height: 600px;
    background-color: #FFFFFF;
    text-align: left;
    margin: 0px;
    margin-right: 8px;
    -moz-box-shadow: 6px 6px 10px #aaa;
    -webkit-box-shadow: 6px 6px 10px #aaa;
    box-shadow: 6px 6px 10px #aaa;
    z-index: 10;
}
/*Alternativ ohne die rechte Bildleiste eine große Textbox*/
#inhaltgross {
    position: absolute;
    top: 0px;
    left: 188px;
    width: 642px;
    height: 600px;
    background-color: #FFFFFF;
    text-align: left;
    margin: 0px;
    margin-right: 8px;
    -moz-box-shadow: 6px 6px 10px #aaa;
    -webkit-box-shadow: 6px 6px 10px #aaa;
    box-shadow: 6px 6px 10px #aaa;
    z-index: 10;
}
/*Text in der Inhaltsbox*/
#text {
    margin: 10px;
    margin-left: 65px;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    overflow: hidden;
    z-index: 10;
}
/*und 2 Spalten für die grosse Inhaltsbox #inhaltgross*/
#textlinks {
    float: left;
    width: 256px;
    min-height: 300px;
    margin: 10px;
    margin-left: 0px;
    margin-top: 0px;
    font-size: 12px;
    line-height: 18px;
    color: #333333;
    overflow: hidden;
    z-index: 10;
    border: 0px solid red;
}
#textrechts {
    float: right;
    width: 256px;
    min-height: 300px;
    margin: 10px;
    margin-top: 0px;
    font-size: 12px;
    line-height: 18px;
    color: #333333;
    overflow: hidden;
    z-index: 10;
    border: 0px solid red;
}
/*Bildbox auf der rechten Seite*/
#bildbox {
    position: absolute;
    top: 0px;
    left: 676px;
    width: 154px;
    height: 600px;
    z-index: 10;
}

/*Liste der Navi*/
ul.navigation {
    margin: 0px;
    margin-top: 20px;
    padding: 0px;
}
li.navigation {
    display: block;
    margin: 0px;
    margin-right: 8px;
    font-size: 13px;
    color: #FFFFFF;
    line-height: 16px;
}
/*Links*/
a:link {font-family: Arial, sans-serif; font-size: 13px; color: rgb(90,90,90); text-decoration: none;}
a:visited {font-family: Arial, sans-serif; font-size: 13px; color: rgb(90,90,90); text-decoration: none;}
a:hover {font-family: Arial, sans-serif; font-size: 13px; color: rgb(90,90,90); text-decoration: none;}
a:active {font-family: Arial, sans-serif; font-size: 13px; color: rgb(90,90,90); text-decoration: none;}

/*Menulinks*/
a.menu:link {
    font-size: 13px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: italic;
}
a.menu:visited {
    font-size: 13px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: italic;
}
a.menu:hover {
    font-size: 13px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: italic;
    font-weight: bold;
}
a.menu:active {
    font-size: 13px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: italic;
    font-weight: bold;
}

a.menuaktiv:link {
    font-size: 13px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: italic;
    font-weight: bold;
}
a.menuaktiv:visited {
    font-size: 13px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: italic;
    font-weight: bold;
}
a.menuaktiv:hover {
    font-size: 13px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: italic;
    font-weight: bold;
}
a.menuaktiv:active {
    font-size: 13px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: italic;
    font-weight: bold;
}

/*klassen für texte*/
h1 {
    font-family: Arial;
    font-weight: bold;
    font-size: 22px;
    color: #0079b3;
    margin-bottom: 25px;
    margin-top: 25px;
}
.fett {
    font-weight: bold;
}

/*Bilder Grundeinstellungen*/
img {
    border: 0px;
}
/*Listen Grundeinstellungen*/
ul {
    margin: 0px;
    margin-left: 16px;
    padding: 0px;
}
li {
    list-style-position: outside;
    list-style-type: circle;
    list-style-image: none;
    margin: 0px;
    padding: 0px;
}

/*tablets & smartphones, sowie kleinere auflösungen*/
@media only screen and (max-width: 1224px){
    
}

/*Hier sind die Bilder und die Boxen definiert, welche auf der rechten Seite die Spalte bilden*/

/*Die Klasse für die Bilder: <img class="leiste" ...>*/
img.leiste {
    display: block;
    margin: 0px;
    margin-bottom: 8px;
    -moz-box-shadow: 6px 6px 10px #aaa;
    -webkit-box-shadow: 6px 6px 10px #aaa;
    box-shadow: 6px 6px 10px #aaa;
}
/*Box klein mit Farbe*/
#boxen {
    display: block;
    margin: 0px;
    margin-bottom: 8px;
    -moz-box-shadow: 6px 6px 10px #aaa;
    -webkit-box-shadow: 6px 6px 10px #aaa;
    box-shadow: 6px 6px 10px #aaa;
    width: 138px; /*154px -16px für padding links und rechts*/
    height: 128px; /*144px -16px für padding oben und unten*/
    color: #FFFFFF;
    font-size: 12px;
    padding: 8px;
}

/*und noch die Klassen dazu für die verschiedenen Hintergrundfarben*/
.hgrot {
    background-color: red;
}
.hgblau {
    background-color: #0079b3;
}