/* 
    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.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: 111px;
    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: 100px;
    height: 95px;
}
.spread.frontpage article.prio4 .article-footer,
.spread.frontpage article.prio5 .article-footer {
    display: none;
}

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


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



/** Overrides for portrait-only mode **/
@media all and (orientation:portrait){
    .spread.frontpage.template10 .blocks article {
        width: 224px;
    }    
    
    .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: 24px;
        top: 308px;
        width: 472px;
        height: 405px;
    }
    .spread.frontpage.template10 .blocks article.prio1 .image-container {
        height: 315px;
        max-width: 470px;
    }    

    .spread.frontpage.template10 .blocks article.prio2 {
        position: absolute;
        left: 24px;
        top: 126px;
        width: 472px;
        height: 167px;
    }
    
    .spread.frontpage.template10 .blocks article.prio3 {
        position: absolute;
        left: 520px;
        top: 392px;
        height: 321px;
    }
    .spread.frontpage.template10 .blocks article.prio3 .image-container {
        height: 200px;
    }    
    
    
    .spread.frontpage.template10 .blocks article.prio4 {
        position: absolute;
        left: 24px;
        top: 0px;
        width: 348px;
        height: 98px;
    }
    .spread.frontpage.template10 .blocks article.prio4 .image-container {
        height: 98px;
    }        
    .spread.frontpage.template10 .blocks article.prio5 {
        position: absolute;
        left: 396px;
        top: 0px;
        width: 348px;
        height: 98px;
    }
    .spread.frontpage.template10 .blocks article.prio5 .image-container {
        height: 98px;
    }
    
    .spread.frontpage.template10 .blocks article.prio6 {
        left: 520px;
        top: 126px;
        height: 98px;
    } 
    .spread.frontpage.template10 .blocks article.prio7 {
        position: absolute;
        left: 520px;
        top: 238px;
        height: 139px;
    }    
    .spread.frontpage.template10 .blocks article.prio8 {
        position: absolute;
        left: 520px;
        top: 728px;
        height: 112px;
    }   
    .spread.frontpage.template10 .blocks article.prio9 {
        position: absolute;
        left: 24px;
        top: 728px;
        height: 112px;
    }           
    .spread.frontpage.template10 .blocks article.prio10 {
        position: absolute;
        left: 272px;
        top: 728px;
        height: 112px;
    }        
    
    .spread.frontpage.template10:after {
        top: 111px;
    }
}


/** Overrides for landscape-only mode **/
@media all and (orientation:landscape){     
    .spread.frontpage.template10 .blocks article {
        width: 221px;
    }
    
    .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: 28px;
        top: 126px;
        width: 470px;
        height: 293px;
    }
    .spread.frontpage.template10 .blocks article.prio1 .image-container {
        height: 196px;
        max-width: 470px;
    }    

    .spread.frontpage.template10 .blocks article.prio2 {
        position: absolute;
        left: 28px;
        top: 434px;
        width: 470px;
        height: 168px;
    }
    
    .spread.frontpage.template10 .blocks article.prio3 {
        position: absolute;
        left: 526px;
        top: 126px;
        height: 349px;
    }
    .spread.frontpage.template10 .blocks article.prio3 .image-container {
        height: 224px;
    }    
    
    
    .spread.frontpage.template10 .blocks article.prio4 {
        position: absolute;
        left: 28px;
        top: 0px;
        width: 346px;
        height: 98px;
    }
    .spread.frontpage.template10 .blocks article.prio4 .image-container {
        height: 98px;
    }        
    .spread.frontpage.template10 .blocks article.prio5 {
        position: absolute;
        left: 402px;
        top: 0px;
        width: 346px;
        height: 98px;
    }
    .spread.frontpage.template10 .blocks article.prio5 .image-container {
        height: 98px;
    }
    .spread.frontpage.template10 .blocks article.prio6 {
        left: 776px;
        top: 0px;
        height: 98px;
    } 

    .spread.frontpage.template10 .blocks article.prio7 {
        position: absolute;
        left: 775px;
        top: 126px;
        height: 139px;
    }    
    .spread.frontpage.template10 .blocks article.prio8 {
        position: absolute;
        left: 775px;
        top: 280px;
        height: 195px;
    }        
    
    .spread.frontpage.template10 .blocks article.prio9 {
        position: absolute;
        left: 526px;
        top: 490px;
        height: 112px;
    }        
    .spread.frontpage.template10 .blocks article.prio10 {
        position: absolute;
        left: 775px;
        top: 490px;
        height: 112px;
    }            
}