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

/** Template 10 general **/
.spread.frontpage.template10 .blocks article {
    width: 225px;
}
.spread.frontpage.template10 .blocks article.prio1 h1.title {
    position: absolute;
    bottom: 105px;
    margin-left: 8px;
    color: white;
    margin-right: 8px;
}

/* horizontal line */
.spread.frontpage.template10:after {
    height: 1px;
    background: black;
    width: 96%;
    left: 2%;
    top: 115px;
    position: absolute;
    content: "";
}


.spread.frontpage.template10 .blocks article.prio2 .graphics-carussel,
.spread.frontpage.template10 .blocks article.prio6 .graphics-carussel,
.spread.frontpage.template10 .blocks article.prio7 .graphics-carussel,
.spread.frontpage.template10 .blocks article.prio8 .graphics-carussel,
.spread.frontpage.template10 .blocks article.prio9 .graphics-carussel,
.spread.frontpage.template10 .blocks article.prio10 .graphics-carussel {
    display: none;
}    

/* Floating images for 4 and 5 */
.spread.frontpage.template10 .blocks article.prio4 .graphics-carussel,
.spread.frontpage.template10 .blocks article.prio5 .graphics-carussel {
    float: right;
    width: 90px;
}
.spread.frontpage.template10 .blocks article.prio4 .image-container  ,
.spread.frontpage.template10 .blocks article.prio5 .image-container  {
    max-width: 90px;
    height: 95px;
}

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


.spread.frontpage.template10 .blocks article.prio6 {
    position: absolute;
    padding-left: 1em;
    box-sizing: border-box;
    width: 225px;
    background: #4982c7;
    color: white !important;
} 



/** Overrides for portrait-only mode **/
@media all and (orientation:portrait){
    .spread.frontpage.template10 .blocks article.prio4,
    .spread.frontpage.template10 .blocks article.prio5,
    .spread.frontpage.template10 .blocks article.prio6,
    .spread.frontpage.template10 .blocks article.prio8,
    .spread.frontpage.template10 .blocks article.prio9,
    .spread.frontpage.template10 .blocks article.prio10 {
        border-bottom: none;
    }    
    
    .spread.frontpage.template10 .blocks article.prio1 {
        position: absolute;
        left: 23px;
        top: 305px;
        width: 470px;
        height: 400px;
    }
    .spread.frontpage.template10 .blocks article.prio1 .image-container {
        height: 315px;
        max-width: 470px;
    }    

    .spread.frontpage.template10 .blocks article.prio2 {
        position: absolute;
        left: 23px;
        top: 115px;
        width: 470px;
        height: 175px;
    }
    
    .spread.frontpage.template10 .blocks article.prio3 {
        position: absolute;
        left: 520px;
        top: 380px;
        height: 325px;
    }
    .spread.frontpage.template10 .blocks article.prio3 .image-container {
        height: 200px;
    }    
    
    
    .spread.frontpage.template10 .blocks article.prio4 {
        position: absolute;
        left: 23px;
        top: 0px;
        width: 330px;
        height: 100px;
    }
    .spread.frontpage.template10 .blocks article.prio4 .image-container {
        height: 80px;
    }        
    .spread.frontpage.template10 .blocks article.prio5 {
        position: absolute;
        left: 410px;
        top: 0px;
        width: 330px;
        height: 100px;
    }
    .spread.frontpage.template10 .blocks article.prio5 .image-container {
        height: 80px;
    }
    
    .spread.frontpage.template10 .blocks article.prio6 {
        left: 520px;
        top: 123px;
        height: 100px;
    } 
    .spread.frontpage.template10 .blocks article.prio7 {
        position: absolute;
        left: 520px;
        top: 240px;
        height: 125px;
    }    
    .spread.frontpage.template10 .blocks article.prio8 {
        position: absolute;
        left: 520px;
        top: 715px;
        height: 110px;
    }   
    .spread.frontpage.template10 .blocks article.prio9 {
        position: absolute;
        left: 23px;
        top: 715px;
        height: 110px;
    }           
    .spread.frontpage.template10 .blocks article.prio10 {
        position: absolute;
        left: 270px;
        top: 715px;
        height: 110px;
    }        
    
    .spread.frontpage.template10:after {
        top: 111px;
    }
}


/** Overrides for landscape-only mode **/
@media all and (orientation:landscape){     
    .spread.frontpage.template10 .blocks article.prio4,
    .spread.frontpage.template10 .blocks article.prio5,
    .spread.frontpage.template10 .blocks article.prio6,
    .spread.frontpage.template10 .blocks article.prio2,
    .spread.frontpage.template10 .blocks article.prio9,
    .spread.frontpage.template10 .blocks article.prio10 {
        border-bottom: none;
    }    
    
    .spread.frontpage.template10 .blocks article.prio1 {
        position: absolute;
        left: 27px;
        top: 130px;
        width: 470px;
        height: 295px;
    }
    .spread.frontpage.template10 .blocks article.prio1 .image-container {
        height: 200px;
        max-width: 470px;
    }    

    .spread.frontpage.template10 .blocks article.prio2 {
        position: absolute;
        left: 27px;
        top: 440px;
        width: 470px;
        height: 175px;
    }
    
    .spread.frontpage.template10 .blocks article.prio3 {
        position: absolute;
        left: 525px;
        top: 130px;
        height: 365px;
    }
    .spread.frontpage.template10 .blocks article.prio3 .image-container {
        height: 240px;
    }    
    
    
    .spread.frontpage.template10 .blocks article.prio4 {
        position: absolute;
        left: 27px;
        top: 0px;
        width: 330px;
        height: 100px;
    }
    .spread.frontpage.template10 .blocks article.prio4 .image-container {
        height: 80px;
    }        
    .spread.frontpage.template10 .blocks article.prio5 {
        position: absolute;
        left: 410px;
        top: 0px;
        width: 330px;
        height: 105px;
    }
    .spread.frontpage.template10 .blocks article.prio5 .image-container {
        height: 80px;
    }
    .spread.frontpage.template10 .blocks article.prio6 {
        left: 775px;
        top: 0px;
        height: 95px;
    } 

    .spread.frontpage.template10 .blocks article.prio7 {
        position: absolute;
        left: 775px;
        top: 130px;
        height: 130px;
    }    
    .spread.frontpage.template10 .blocks article.prio8 {
        position: absolute;
        left: 775px;
        top: 275px;
        height: 220px;
    }        
    
    .spread.frontpage.template10 .blocks article.prio9 {
        position: absolute;
        left: 525px;
        top: 510px;
        height: 105px;
    }        
    .spread.frontpage.template10 .blocks article.prio10 {
        position: absolute;
        left: 775px;
        top: 510px;
        height: 105px;
    }            
}