/* 
start generic tag styles
*/

body, textarea{
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    letter-spacing: 0.007em;
    line-height: 160%;
    margin: 0px;
    min-width: 480px;
    background-color: #fff;
    color: #555;
}

html{
    min-width: 480px;
}

a {
    text-decoration: none;
    color: #900000;
}

h1 {
    font-weight: normal;
    font-family: 'Karma', serif;
    font-size: 32px;
    letter-spacing: 1px;
    line-height: 150%;
    margin-top: 6px;
    margin-bottom: 14px;
    color: #000;
}

h2 {
    font-weight: normal;
    font-family: 'karma', serif;
    font-size: 22px;
    letter-spacing: 1px;
    line-height: 150%;
    margin-top: 5px;
    color: #000;
}

h3 {
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 150%;
    margin-top: 25px;
    margin-bottom: 5px;
}


img { 
    border: none;
}


/* structure styles */


#logoBox{
    float: left;
    padding: 10px;
    margin-top: 25px;
    margin-right: 50px;
  
}

#logoBox img{
    width: 450px;
    
}


#topNav {
    font-weight: 700;
    
}

#topNav a{
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: #555;
    font-weight: 400;
}

#topBox{
    position: relative;
    min-width: 400px;
    max-width: 1000px;
    width: 90%;
    margin: auto; 
    
}


@media (max-height: 750px) {
    #bottomWrapper{ position: absolute;
                    left: 0px;
                    top: 180px; }   
    #panoramaBox{ height: 188px; }
}

@media (max-width: 1110px) {
    #bottomWrapper{ position: absolute;
                    left: 0px;
                    top: 180px; }   
    #panoramaBox{ height: 188px; }
}



#content{
    position: relative;
    min-width: 480px;
    max-width: 1200px;
    width: 80%;
    margin: auto; 
    margin-top: 20px; 
    padding-left: 10px;
}




#footer{
    border-top: solid 1px #d5d5d5;
    clear: both;
    padding: 20px;
    margin-top: 50px;
    text-align: right;
}


#navBox{
    background: #fff;
    float: left; 
    margin-top: 40px;
    
}

#navBox .subNavBox .subNavLink, #navBox .subNavBox .subNavLinkActive{
    font-family: 'Open Sans', sans-serif;
    display: block;
    float: left;
    padding: 3px 8px 3px 8px;
    background-color: #fff;
    margin-bottom: 8px;
    font-size: 15px;
    color: #888;
}

#navBox .mainNavLink,       
#navBox .mainNavLinkActive{
    font-family: 'Open Sans', sans-serif;
    display: block;
    float: left;
    padding: 8px 12px;
    margin-bottom: 8px;
    margin-right: 2px;
    font-size: 15px;
    color: #000;
}

#navBox .mainNavLink:hover, #navBox .subNavBox .subNavLink:hover{
    font-weight: 400;
    background-color: #900000;
    color: #fff;
    
}

#navBox .mainNavLinkActive, #navBox .subNavBox .subNavLinkActive {
    font-weight: 400;
    color: #fff;
    background-color: #900000;
}





/* now elements*/

.mediaCluster{
    margin-top: 10px;
}

.mediaCluster .mediaClusterTexts{
    margin-top: 10px;
    margin-bottom: 10px;
}

.mediaCluster .mediaClusterTexts div{
    margin-bottom: 10px;
}

.mediaCluster .mediaClusterTexts .subtitle{
    font-style: italic;
}

.mediaCluster .mediaClusterTexts .copyright{
    font-size: 10px;
    padding-left: 20px; 
    color: #999;
}

.mediaCluster .smallPictures{
    width: 520px;
}
.mediaCluster .smallPictures ul{
    margin: 0; 
    padding: 0;
    
}

.mediaCluster .smallPictures ul li{
    list-style: none;
    margin: 0; 
    padding: 0;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px; 
    height: 152px; 
    overflow: hidden;
    
}
.mediaCluster .smallPictures ul li img{
    height: 150px; 
    border: solid 1px #d1d1d1;
 }

.mediaCluster .bigPicture a img{
   
   display: block;
   
}

.mediaCluster .bigPicture {
   margin-bottom: 10px; 
   font-size: 10px;
}


.newsJournal{
 width: 80%;
 margin: auto;
 min-width: 460px;
}

.newsJournal .article{
  
    padding-top: 40px;
    margin-left: 10px; 
    clear: both;
}


.newsJournal .article .info{
    display: inline;
    color: #fff; 
    padding: 2px;
    font-size: 10px;
    background: #888;
}
.newsJournal .article .h2{ 
   
}

.newsJournal .article .subtitle{
    font-style: italic;
    margin-bottom: 10px;
    color: #555;
 }

.newsJournal .article .text{
    padding-top: 10px;
    padding-bottom: 30px;

}
.newsJournal .article .copyright{
    color: #555; 
    font-size: 10px;
    margin-bottom: 5px;
}
.article .mediaBox{
    float: left; 
    width: 40%;
    margin-right: 10px;     
}
.newsJournal .article .mediaBox .image{
    padding-right: 10px;
}
.newsJournal .article .mediaBox .image img{
    margin-bottom: 5px; 
    display: block;
    width: 100%;
    border: solid 1px #999;
}

.download{
    padding: 10px; 
    
    margin-bottom: 5px;
    margin-top: 5px;
    margin-right: 15px;
    width: 180px;
    border: solid 1px #d1d1d1;
    color: #000;
}

.download img{
    display: block;
    float: left;
    width: 25px;
    margin-right: 5px;
}

.download .downloadLink{
    display: block;
    text-align: right; 
    color: #3366cc;
}

.mediaTitle{
    font-size: 10px;
    color: #555;
}

.newsJournal .mediaTitle{
    
}

.articleDetail {
    max-width: 1200px;
    
}

.articleDetail h1, .articleDetail .subtitle,{
    width: 70%;
    margin: auto;   
}

.articleDetail .text{
    width: 70%;
    min-width: 450px;
    margin-top: 20px;
    margin-left: 30px;
}


.contentNav{
    margin-top: 10px;
    height: 20px;
}
.contentNav a{ 
    display: block;
    float: right;
    font-weight: 400;
    letter-spacing: 0px;
    padding: 2px 10px;
    background: #444;
    color: #fff;
}

.ankerNav{
    margin-top: 50px;
    margin-bottom: 25px;
    
    width: 250px;
}

.ankerNav .ankerLink{ 
    display: block;    
    font-weight: 400;
    letter-spacing: 0px;
    padding: 2px 10px;
    margin: 5px 10px;
    background: #444;
    color: #fff;
}

.autoLink{
    
    color: #900000;
}

.autoList li{
    margin-top: 15px;
} 

.margintop50{
    margin-top: 50px;
}



.clear {
    clear: both;
}

/* anpassung small screens */

@media screen and (max-width: 550px) {
    #logoBox img{
        display: block;
        width: 90%;
        
    }
    #logoBox{
        margin-right: 10px;
    }
    
    #navBox{
   
        margin-top: 30px;
        width: 100%;
        
    }
    #navBox .mainNavLink,       
#navBox .mainNavLinkActive{

        float: left;
        width: 70px;
        text-align: center;
        white-space: nowrap;
        border: solid 1px #900000;
        margin-right: 2px;
    }
    
}

@media screen and (min-width: 1000px) {
   #navBox{
        margin-top: 42px;

        
    }
}



.reelbox{

}

.reelbox .reel{
    width: 320px; 
    height: 320px;
   
    border: solid 1px #999;
    margin: 15px;
    float: left;
    padding: 10px;
    
    display:flex;
    align-items:center;
}

.reelbox .reel a{
    margin: auto;
}

.portrait{
    float: right;
    width: 20%;
    min-width: 150px;
    margin-left: 30px;
    margin-right: 15%;
}