/* 
    Document   : overview_10.css
    Created on : Mar 7, 2013, 12:19:50 PM
    Author     : jbk
    Description:
        All overviews with 10 articles
        in both portrait and landscape modes
*/

.spread.overview.template10 .graphics-carussel {
    margin-bottom: 14px;
}

.spread.overview.template10 .blocks article.prio6 .graphics-carussel {
    margin-bottom: 0px;
}

/** Template 10 general **/
.spread.overview.template10 .blocks article.prio1 h1.title {
    position: absolute;
    bottom: 100px;
    margin-left: 8px;
    color: white;
    margin-right: 8px;
}
.spread.overview.template10 .blocks article.prio1 h1.title text {
    background: rgba(0,0,0,0.75);
    padding: 2px;
    line-height: 1.4em;
}

/** Images in for this template **/
.spread.overview.template10 .blocks article.prio1 .image-container {
    height: 266px;
    max-width: 470px;
}
.spread.overview.template10 .blocks article.prio6 .graphics-carussel {
    float: left;
    width: 78px;
    margin-right: 0.5em;
}
.spread.overview.template10 .blocks article.prio6 .image-container {
    height: 109px;
    max-width: 75px;
}   
.spread.overview.template10 .blocks article.prio8 .graphics-carussel {
    display:none;
}
.spread.overview.template10 .blocks article {
    width: 225px;
}

/** Overrides for portrait-only mode **/
@media all and (orientation:portrait){
    .spread.overview.template10 .blocks article.prio1 {
        position: absolute;
        left: 274px;
        top: 0px;
        width: 475px;
        height: 349px;
    }
    
    .spread.overview.template10 .blocks article.prio2 {
        position: absolute;
        left: 274px;
        top: 364px;
        width: 225px;
        height: 251px;
    }
    .spread.overview.template10 .blocks article.prio2 .image-container {
        height: 112px;
    }       
    
    .spread.overview.template10 .blocks article.prio4 {
        position: absolute;
        left: 524px;
        top: 364px;
        width: 225px;
        height: 195px;
    }

    .spread.overview.template10 .blocks article.prio4 .image-container {
        height: 98px;
    }       
    
    .spread.overview.template10 .blocks article.prio5 {
        position: absolute;
        left: 274px;
        top: 630px;
        width: 225px;
        height: 195px;
        border-bottom: none;
    }
    .spread.overview.template10 .blocks article.prio5 .image-container {
        height: 98px;
    }       

    .spread.overview.template10 .blocks article.prio3 {
        position: absolute;
        left: 524px;
        top: 574px;
        width: 225px;
        height: 251px;
        border-bottom: none;
    }
    .spread.overview.template10 .blocks article.prio3 .image-container {
        height: 98px;
    }       
    
    .spread.overview.template10 .blocks article.prio10 {
        position: absolute;
        left: 274px;
        top: 838px;
        width: 475px;
        height: 83px;
        
        border-top: 1px solid black;
        padding-top: 14px;
        margin-top: -13px;        
    }
    
    .spread.overview.template10 .blocks article.prio6 {
        position: absolute;
        left: 24px;
        top: 0px;
        width: 225px;
        height: 335px;
    }
    .spread.overview.template10 .blocks article.prio7 {
        position: absolute;
        left: 24px;
        top: 350px;
        width: 225px;
        height: 181px;
    }    
    .spread.overview.template10 .blocks article.prio8 {
        position: absolute;
        left: 24px;
        top: 546px;
        width: 225px;
        height: 181px;
    }        
    .spread.overview.template10 .blocks article.prio9 {
        position: absolute;
        left: 24px;
        top: 742px;
        width: 225px;
        height: 181px;
    }        
}

.spread.overview.template10 .blocks article .image-container {
    height: 100px;
    max-width: 225px;
}    


/** Overrides for landscape-only mode **/
@media all and (orientation:landscape){     
    .spread.overview.template10 .blocks article.prio1 {
        position: absolute;
        left: 274px;
        top: 0px;
        width: 470px;
        height: 363px;
    }

    .spread.overview.template10 .blocks article.prio2 {
        position: absolute;
        left: 274px;
        top: 378px;
        width: 225px;
        height: 293px;
    }
    .spread.overview.template10 .blocks article.prio2 .image-container {
        height: 112px;
    }    
    
    .spread.overview.template10 .blocks article.prio3 {
        position: absolute;
        left: 519px;
        top: 378px;
        width: 225px;
        height: 293px;
    }
    .spread.overview.template10 .blocks article.prio3 .image-container {
        height: 98px;
    }    
    
    
    .spread.overview.template10 .blocks article.prio4 {
        position: absolute;
        left: 769px;
        top: 0px;
        width: 225px;
        height: 251px;
    }
    .spread.overview.template10 .blocks article.prio4 .image-container {
        height: 112px;
    }    
    .spread.overview.template10 .blocks article.prio5 {
        position: absolute;
        left: 769px;
        top: 266px;
        width: 225px;
        height: 195px;
    }
    .spread.overview.template10 .blocks article.prio5 .image-container {
        height: 84px;
    }        
    .spread.overview.template10 .blocks article.prio10 {
        position: absolute;
        left: 769px;
        top: 476px;
        width: 225px;
        height: 195px;
    }
    
    .spread.overview.template10 .blocks article.prio6 {
        position: absolute;
        left: 24px;
        top: 0px;
        width: 225px;
        height: 181px;
    } 
    .spread.overview.template10 .blocks article.prio7 {
        position: absolute;
        left: 24px;
        top: 196px;
        width: 225px;
        height: 181px;
    }    
    .spread.overview.template10 .blocks article.prio8 {
        position: absolute;
        left: 24px;
        top: 392px;
        width: 225px;
        height: 181px;
    }        
    .spread.overview.template10 .blocks article.prio9 {
        position: absolute;
        left: 24px;
        top: 588px;
        width: 225px;
        height: 83px;
    }        
}