/* 
    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
*/

/** Template 10 general **/
.spread.overview.template10 .blocks article.prio1 h1.title {
    position: absolute;
    bottom: 75px;
    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: 300px;
    max-width: 470px;
}
.spread.overview.template10 .blocks article.prio6 .graphics-carussel {
    float: left;
    width: 75px;
    margin-right: 0.5em;
}
.spread.overview.template10 .blocks article.prio6 .image-container {
    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: 365px;
    }
    
    .spread.overview.template10 .blocks article.prio2 {
        position: absolute;
        left: 274px;
        top: 380px;
        width: 225px;
        height: 215px;
    }
    .spread.overview.template10 .blocks article.prio2 .image-container {
        height: 120px;
    }       
    .spread.overview.template10 .blocks article.prio4 {
        position: absolute;
        left: 519px;
        top: 380px;
        width: 225px;
        height: 185px;
    }
    
    .spread.overview.template10 .blocks article.prio5 {
        position: absolute;
        left: 274px;
        top: 610px;
        width: 225px;
        height: 215px;
        border-bottom: none;
    }
    .spread.overview.template10 .blocks article.prio3 {
        position: absolute;
        left: 519px;
        top: 580px;
        width: 225px;
        height: 225px;
        border-bottom: none;
    }
    
    .spread.overview.template10 .blocks article.prio10 {
        position: absolute;
        left: 274px;
        top: 840px;
        width: 475px;
        height: 75px;
        
        border-top: 1px solid black;
        padding-top: 12px;
        margin-top: -12px;        
    }
    
    .spread.overview.template10 .blocks article.prio6 {
        position: absolute;
        left: 24px;
        top: 0px;
        width: 225px;
        height: 235px;
    }
    .spread.overview.template10 .blocks article.prio7 {
        position: absolute;
        left: 24px;
        top: 248px;
        width: 225px;
        height: 220px;
    }    
    .spread.overview.template10 .blocks article.prio8 {
        position: absolute;
        left: 24px;
        top: 481px;
        width: 225px;
        height: 145px;
    }        
    .spread.overview.template10 .blocks article.prio9 {
        position: absolute;
        left: 24px;
        top: 640px;
        width: 225px;
        height: 276px;
    }        
}

.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: 365px;
    }

    .spread.overview.template10 .blocks article.prio2 {
        position: absolute;
        left: 274px;
        top: 380px;
        width: 225px;
        height: 285px;
    }
    .spread.overview.template10 .blocks article.prio2 .image-container {
        height: 150px;
    }    
    
    .spread.overview.template10 .blocks article.prio3 {
        position: absolute;
        left: 519px;
        top: 380px;
        width: 225px;
        height: 285px;
    }
    .spread.overview.template10 .blocks article.prio3 .image-container {
        height: 120px;
    }    
    
    
    .spread.overview.template10 .blocks article.prio4 {
        position: absolute;
        left: 769px;
        top: 0px;
        width: 225px;
        height: 200px;
    }
    .spread.overview.template10 .blocks article.prio5 {
        position: absolute;
        left: 769px;
        top: 215px;
        width: 225px;
        height: 230px;
    }
    .spread.overview.template10 .blocks article.prio5 .image-container {
        height: 140px;
    }        
    .spread.overview.template10 .blocks article.prio10 {
        position: absolute;
        left: 769px;
        top: 456px;
        width: 225px;
        height: 209px;
    }
    
    .spread.overview.template10 .blocks article.prio6 {
        position: absolute;
        left: 24px;
        top: 0px;
        width: 225px;
        height: 235px;
    } 
    .spread.overview.template10 .blocks article.prio7 {
        position: absolute;
        left: 24px;
        top: 248px;
        width: 225px;
        height: 105px;
    }    
    .spread.overview.template10 .blocks article.prio8 {
        position: absolute;
        left: 24px;
        top: 364px;
        width: 225px;
        height: 145px;
    }        
    .spread.overview.template10 .blocks article.prio9 {
        position: absolute;
        left: 24px;
        top: 520px;
        width: 225px;
        height: 145px;
    }        
}