/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Author:     Benjamin Leu
    Created:    2014-12-05
    Last Edit:  2015-11-16
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

//@font-face { font-family: DomCasualBT; src: url("./fonts/font.ttf") format('truetype'); }

/* -------------------- Blocks -------------------- */
header, footer, content { display: block;}
nav {display: inline-table;}

/* -------------------- Body -------------------- */
body {

/*background-image: url("../img/background.jpg");
    background-position: center;
    background-attachment: fixed;
*/

    //background-color: #f0f0f0;
    background-color: #CCCCCC;


    font-size: 1em;
    font-family: Arial, SunSans-Regular, Sans-Serif;
    color:#564b47;
    //margin-top: 30px;
}

img {
    width: 100%;
}

/* -------------------- Link -------------------- */
a {color: #00008B;}
a:visited {color:#00008B;}
a:hover {color: #fff;}
a:active { color:#00008B;}

/* -------------------- Titel -------------------- */
h1 {
    font-size:2em;
    font-weight: normal;
    margin: 0 0 10px;
}

h2 {
    font-size:1.5em;
    font-weight: normal;
    margin: 0 0 10px;
}

h3 {
    font-size:1.38em;
    font-weight: normal;
    margin: 0 0 10px;
}

/* -------------------- Bilder -------------------- */
img.logoright{
    width: 90px;
    float:right;
}

img.logoright2pc{
    height: 32%;
    width: 50%;
    float: right;
}

img.logotext{
    width: 100%;
}

img.left{
    float: left;
    width: 25%;
    margin-right: 5px;
}

img.right{
    float: right;
    width: 25%;
    margin-left: 5px;
}

img.center{
    max-width: 100%;
    max-height: 250px;
}

img.img_ueber_uns{
    float: right;
    width: 50%;
    margin-left: 5px;
}

img.img_lernende{
    float: right;
    width: 25%;
    margin-left: 5px;
}

/* -------------------- Basis Container -------------------- */
#container {
    max-width: 1000px;
    min-width: 320px;
    margin: 0 auto;

}

/* -------------------- Slideshow-------------------- */

#slideshow_header {
    position:relative;
    max-width: 100%;
    margin: 0 auto;
    height: 300px;

}
#slideshow {
    position:relative;
    max-width: 100%;
    margin: 0 auto;
    height: 100%;

}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    height: 100%;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

#slideshow_header IMG.logo {
    z-index:11;

    position: absolute;

    top: 200px;
    right: 10px;

    max-width: 90px;
    max-height: 90px;



}

/* -------------------- Header -------------------- */
header {
    margin: 0;
    //background-color: #CCCCCC;
    min-height: 55px;
    /*border-top-left-radius: 10px;
    border-top-right-radius: 10px; */
}

header img {
    width: 100%;
}

div.headerAddress{
    float: right;
    padding: 10px 10px 0 0;
}

div.headerNav{
    width: 69%;
    float: right;
    padding-top: 30px;
    //background-color: #CCCCCC;
}

a.headerLogo{
    width: 30%
}

/* -------------------- Navigation -------------------- */
div.navHeader {
    width: 31%;
    color: #00008B;
    float: left;
   // background-color: #CCCCCC;
}


nav{
    padding:0 0 0 0;
    margin:0 0 0;
    border: none;
    float: right;
    width:72%;
}

header ul:after {
    height: 0;
    content: ".";
    display: block;
    clear: both;
    visibility:hidden;
}
header ul {
    padding: 0 0 0 0px;
    list-style-type: none;
    float:right;
    width: 100%;
    font-size: small;
}

header li {
    float: right;
    margin: 0 0 0 5px;
    width: 13.5%;
}


header a.navHeader, header a.navHeader:visited {
    background-color: #999999;
    color: #FFFFFF;
    display: block;
    padding: 5px 20px;
    text-decoration: none;
    //transition: all 0.5s linear;
}


header a.navHeader:hover {
    color:#fff;
    background-color: #000;
}
header a.navHeader:active { color:#fff;
                            background-color: #000; }

header a.navSelected {
    color:#fff;
    background: #000;
    display: block;
    padding: 5px 20px;
    text-decoration: none;
}

ul.dropdown {
    visibility:hidden;
    position: absolute;
    opacity: 0;
    z-index: 99999;
    width:180px;
    background:#f8f8f8;

    margin:0;
    padding:0;

    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear;

    -moz-transition:opacity 0.2s linear, visibility 0.2s linear;

    -o-transition:opacity 0.2s linear, visibility 0.2s linear;

    transition:opacity 0.2s linear, visibility 0.2s linear;

}

ul.dropdown_2 {
    visibility:hidden;
    position: absolute;

    margin-top: -25px;
    opacity: 0;
    z-index: 99999;
    width:180px;
    background:#f8f8f8;

    margin-left:181px;

    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear;

    -moz-transition:opacity 0.2s linear, visibility 0.2s linear;

    -o-transition:opacity 0.2s linear, visibility 0.2s linear;

    transition:opacity 0.2s linear, visibility 0.2s linear;

}

ul.address {
    vertical-align: central;
    font-size:x-large;
}

li.dropdown {
    width: 100%;
    float: none;
    margin: 0 0 1px 0;

}

li.dropdown:first-child {
    border-top-right-radius: 10px;
}

li.dropdown:last-child {
    margin: 0;
}

li:hover > ul {
    visibility: visible;
    opacity: 1;
}

/* -------------------- Content -------------------- */

div.shadow {
    box-shadow:1px 1px 100px  #292929; /* CSS3 */
    shadow-top: 0;

}
content {
    background: #CCCCCC;
    color: #000;
    padding: 5%;


}

content p {
    padding: 15px 0 15px 0;
}

div.lernende {
  width: 100%;
  float: left;
  margin: auto;
}
/* -------------------- Footer -------------------- */
footer {
    padding: 50px 0 15px 0;
    clear:both;
    //background-color: #CCCCCC;
    color:#00008B;

    /*margin-bottom: 30px;

        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    */
}

footer header {
    background: none;
    font-size: 2em;


}

footer h1 {
    font-size: 1.6em;

}


footer a, a:visited {
    color: #00008B;
    text-decoration: none;
    font-size: 1.2em;
}

footer a:hover {
    color: #000;
}

footer ul {
    list-style-type: none;
}



div.footer{
    width: 100%;
    float: none;
    text-align: left;
}

div.footerSectionLeft{
    display: inline-block;
    vertical-align: bottom;
    width: 20%;
    max-height:200px;
    text-align: center;
}

div.footerSectionMiddle{
    display: inline-block;
    vertical-align: bottom;
    width: 59%;
    max-height:200px;
    text-align: -webkit-center;

}

div.footerSectionRight{
    display: inline-block;
    vertical-align: bottom;
    width: 20%;
    max-height:200px;
    text-align: center;
}

/*
div.footerSection:last-child{
    vertical-align: bottom;
    width: 36%;
    float:right;
}
*/

a.footerAddress, a.footerAddress:hover, a.footerAddress:visited  {
    color: #00008B;
    text-decoration: none;
    font-size: 0.7em;
}

div.divFooterAddress {
    vertical-align: bottom;
}

img.footerLinks {
    width: 100%;
    float: left;
    height: 33%;

}

div.changelog {
    margin-top: 5px;
    text-align: center;
}

/* -------------------- Displaygrössen Anpassung -------------------- */

@media only screen and (max-width: 860px) {
    body {
        margin: 0;
    }
    nav {
        padding:0;
        margin-left: 0;
    }
    nav ul {
        margin-left: 0;
    }
    nav li:first-child {
        width: 100%;
    }
    nav li {
        float: left;
        margin: 0;
        width:50%;
    }
}