/* ---------------------------------------- base.css ---------------------------------------- */

/*
This file contains should contain basic properties
For now you see temporarly properties - the file should be derived into smaller files
for each element - and here we should have basic properties ...

Guidelines are on the wiki
http://skynettask.bc/wikimso/index.php/Css-guidelines
and on the sharepoint.


Used on the homepage:
=====================

http://www.portal.local.skynet.be/ 
http://www.portal.dvl.skynet.be/ 
http://www.portal.uat.skynet.be/ 
http://www.portal.skynet.be/ 


Special comments legend:
========================

WIP: Work In Progress meaning the declarations are in test and may be removed/replaced...
---
TODO: Means that one or more operations (e.g. converting px to % units) are pending.
----
*/



/* =Basic CSS reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{border: 0; font-size: 100%; font-weight:normal; font: inherit; text-rendering: optimizeLegibility; vertical-align: baseline; padding: 0; margin: 0; }
ol, ul {list-style: none;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
table { border-collapse: collapse; border-spacing: 0;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}



/* =BASE properties
-------------------------------------------------------------- */
html { font-size: 62.5%;}

.ie6 body  {text-align:center;}
.ie6 #portal {width:980px; margin:0 auto; text-align:left;}

body { 
    line-height: 1; 
    font-family: "Arial", Helvetica, sans-serif; 
    font-size: 12px; 
    font-size: 1.2rem;
}

.bodyContainer {
    width:980px;
    margin: 0 auto;  
    overflow:hidden;     /* check */
}

.main {
    background-color: #fff;
}

.header {width: 100%; clear:both; }

.leaderBoardWrapper {
    margin-bottom:30px;
    text-align: center;
}



/* =Base format - Sections
-------------------------------------------------------------- */

.portal-content {
    background: #fff;
    margin: 0 auto;
    overflow: hidden;
    padding: 15px 10px 0 15px;
    width: 980px;   
}

.primary,
.secondary,
.left-column,
.right-column,
.segment-column {
    overflow: hidden;
    float: left;
}

.primary {
    zoom:1;
    margin:0 0 5px 0;
    width:39.79592%;    /* 390px / 980px */
}

.secondary {
    display:block;
    margin:0 3.06122% 3.06122% 3.06122%;    /*  30px / 980px */
    width:13.77551%;                        /* 135px / 980px */
}

.left-column {
    display:block;
    margin-right:3.06122%;  /* 30px / 980px */
    width:56.63265%;        /* 555px / 980px */
    margin-bottom:2.55102%; /* 25px / 980px */
}

.right-column {
    width:39.79592%; /* 390px / 980px */
    overflow: visible; /* needed for expandable ads */
}

.right-column {
    margin-bottom:2.55102%; /* 25px / 980px */
}

.segment-column {
    margin: 0 0 0 3.06122%;         /*  30px / 980px */
    width:57.14286%;                       /* 560px / 980px */
}

/* Quick/minimal fix for IE6, No time to waste of this "sinking boat" */
.ie6 .primary {
    width:39.79592%;
}

.ie6 .secondary {
    margin:0 3% 3% 3.7%;
}

.ie6 .right-column {
    width:39.79592%;
}

.ie6 .segment-column {
    width:57.14286%;
    margin: 0 0 3.06122% 3.06122%;
}

/* Quick/minimal fix for IE6, No time to waste of this "sinking boat" */
.ie6 .take-over .primary {
    width:38.6%; /* 390px/1010px */
}

.ie6 .take-over .secondary {
    margin:0 2% 2.9% 2%; /* 30px/1010px */ 
}

.ie6 .take-over .right-column {
    width:38.6%; /* 390px/1010px*/
}

.ie6 .take-over .segment-column {
    width:55.4%;        /* 560px/1010px */ 
    margin: 0 0 2% 2%;  /*  30px/1010px */
}



/* =SPRITES
-------------------------------------------------------------- */

h2.section .powered-by a, 
h5.ad-label .tail { 
    background:url('../images/base/base-sprite.png?v20111011') 0 50px no-repeat transparent;
}



/* =HEADINGS
-------------------------------------------------------------- */

h2.section /* I'ld prefer being able to add the "section" class to the h2 but this is a common element... */
{
    padding: 0 0 5px 0;
    margin: 5px 0 5px 0;
    border-bottom: 5px solid #1199cc;
    position:relative;
    font-style: italic;
    font-size: 22px;
    font-size: 2.2rem;
    line-height: 22px;
    line-height: 2.2rem;
    overflow: hidden;  /* we needed to put this for ie7 */
}

h2.section .powered-by, 
.powered-by { 
    position:absolute;
    right:0;
    top:1px;
    color:#999;
    font-size:10px;
    font-size:1.0rem;
    line-height:30px;
    line-height:3.0rem; 
}

h2.section .powered-by span,
h2.section .powered-by a,
.powered-by span, 
.powered-by a { 
    float:left; 
}

h2.section .powered-by a, 
.powered-by a { 
    margin-left:3px;
    text-indent:-9999px;
}

.content section h2 a,
.content section h2 a:visited,
h2 a,
h2 a:visited {
    text-decoration: none;
    color: #000; 
}

.default-box h3 {
    font-size:Arial, Verdana;
    font-size:16px;
    font-size:1.6rem;
    line-height:16px;
    line-height:1.6rem;
    font-weight: bold;
    margin-bottom:15px; /*TODO*/
}

.default-box h3.first {
    margin-top:0;
}

h3.indicator {
    display:block;
    margin-bottom:10px;
    overflow: hidden;
}

    h3.indicator .box {
        display:block;
        min-width: 30px;
        text-align: left;
        font-style:italic;
        font-size:14px;
        font-size:1.4rem;
        font-weight:bold;
        padding: 6px 8px 5px 6px;
        border: solid 1px #d8dee7;
        border-bottom-color:#ccd0d9;
        color:#4C4C4C;
        
        /* border-radius */
            -moz-border-radius: 3px 3px 0 0;    /* mozilla */
            -webkit-border-radius: 3px 3px 0 0; /* webkit */
            -khtml-border-radius: 3px 3px 0 0;  /* Konqueror browsers */
            border-radius: 3px 3px 0 0;         /* future CSS3 browsers */
        
        /* background */
            background-color: #eff4f7;  /* non-CSS3 browsers will use this */
            background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f5f7),to(#eff4f7)); /* old webkit */
            background-image: -webkit-linear-gradient(#f4f5f7, #eff4f7); /* new webkit */
            background-image: -moz-linear-gradient(#f4f5f7, #eff4f7); /* mozilla */
            background-image: -ms-linear-gradient(#f4f5f7, #eff4f7); /* IE10 preview */
            background-image: -o-linear-gradient(#f4f5f7, #eff4f7); /* opera 11.10+ */
            background-image: linear-gradient(#f4f5f7, #eff4f7); /* future CSS3 browsers */
            
        /* box-shadow */
            -moz-box-shadow:    0 1px 0 0 #fff inset;
            -webkit-box-shadow: 0 1px 0 0 #fff inset;
            box-shadow:         0 1px 0 0 #fff inset;
        /* text-shadow */
            -webkit-text-shadow:    1px 1px 2px #fff;
            -moz-text-shadow:       1px 1px 2px #fff;
            text-shadow:            1px 1px 2px #fff;

    }

    h3.indicator .arrow {
        bottom: 0;
        clear: both;
        float: left;
        height: 7px;
        position: relative;
        width: 25px;
        margin-left: 4px;
        margin-top: -1px;
        background-repeat: no-repeat;
    }

    .ie6 h3.indicator .arrow {
        display: none;
    } 



/* =REUSABLE STYLING
-------------------------------------------------------------- */

.ir { 
    display: block; 
    border: 0; 
    text-indent: -999em; 
    overflow: hidden; 
    background-color: transparent; 
    background-repeat: no-repeat; 
    text-align: left; 
    direction: ltr; 
    *line-height: 0;
}

.ir br { 
    display: none;
}

.centered-bg-container {
    position: relative;
}

.centered-bg-container .centered-icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width:100%;
    height:100%;
    text-indent: -9999px;
    background-position:center center;
    background-repeat:no-repeat;
}

.default-box {
    background-color:#eff4f7;
    /* border-radius */
        -moz-border-radius:     5px 5px 5px 5px; /* mozilla */
        -webkit-border-radius:  5px 5px 5px 5px; /* webkit */
        -khtml-border-radius:   5px 5px 5px 5px; /* Konqueror browsers */
        border-radius:          5px 5px 5px 5px; /* future CSS3 browsers */
    padding:1.9%; /* 10px / 555px */
    line-height: 16px;
    line-height: 1.6rem;
}

ul.arrows,
ul.arrows li {
    display: block;
    clear:both;
}

ul.arrows {
    margin:10px 0; /* TODO */
    padding-left:20px; /* TODO */
}

ul.arrows li {
    margin-bottom: 7px;
    line-height: 15px;
    line-height: 1.5rem;
}

ul.arrows li a {
    text-decoration: none;
    color:#007fd6;
}

ul.arrows li a:hover {
    text-decoration: underline;
}

ul.arrows li span.next {
    float: left;
    text-indent: -9999px;
     background-position: -18px -370px;
    width: 7px;
    height: 15px;
    padding: 0 10px 0 0 ;
}

.ie6 ul.arrows li a {
    zoom:1;
    display: block;
    float: left;
}



/* =VIDEOS PLAY ICON
-------------------------------------------------------------- */

.icon {
    /* Sad but we have to use a standalone image here (center center) */
    cursor:pointer; /* This is needed for IE... */
    /* Base64 used to reduce the HTTP requests */
    background-image:url('data:;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAYAAAAfrhY5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAY1JREFUeNrUVz1vgzAUdCy2SBnZiyAbO11gyF8JCyxd+wu6doEl5acwwFLGSmwBkZ0xUmdqS4/KEEgcG4hy0g1IiHvv8Me9VdM0iBMq4SuhSfgCzy1qwhNhTvgNzzex4hDfAU3ED1pEDBQS1wj3d4oOFfFFWN0jTjt1CddIHr+EhyEXhsSp8BuaHp/9AvBCwgi+uxsT18DqOeGCzoX4fqJ/fA1r0OmIc28lwzDsNE03EgWYrf2sOBfKstw4jmP7vr+VKOBfXBXZy2EYbiVcoHoqFbdEy5d0wcKSJ5iMCyZml74MBFzQcO92Qgu6oOI5NjOvCxg9EApc/JNar+v6OYqiH9u2z1deq/HYXSsKz/OORVGkN4QpKgUufGuhbjtBg3aeLdgti6z957nIYSPQLRuv6na1xwt1i1g9Vjzn7TZJkjQIgqNEqIz7GY5m8Y+ZAwUNk++Q8TuHzAlS5pw4tMJDJ1wMKXMOXKRXZWwxPCq3s2vAnWBi6Vj9FLPa0JRqQRHawJRagWjGO6X+CTAA5ferGC5QAwUAAAAASUVORK5CYII=');
}

.ie6 .icon {
    /* Do NOT waste time on ie6 */
    display:none;
}

.ie7 .icon {
    /* Base64 fallback using a PNG-24 */
    background-image:url('../images/base/standalone/play-icon.png');
}



/* =DOSSIERS
-------------------------------------------------------------- */

.secondary section.beauty,
.secondary section.cinema,
.secondary section.people,
.secondary section.family,
.secondary section.men,
.secondary section.news,
.secondary section.sports,
.secondary section.foot {
    width: 94%;
    margin: 0 auto;
    margin-bottom: 21px;
    background: #eff4f7;
    border: solid 1px #efefef;
    padding: 3.70370%;          /* 5px / 135px */
    /* border-radius */
        -moz-border-radius:     3px 3px 3px 3px;    /* mozilla */
        -webkit-border-radius:  3px 3px 3px 3px;    /* webkit */
        -khtml-border-radius:   3px 3px 3px 3px;    /* Konqueror browsers */
        border-radius:          3px 3px 3px 3px;    /* future CSS3 browsers */
    /* box-shadow */
        -moz-box-shadow:     0px 0px 1px 1px #ebebeb;
        -webkit-box-shadow:  0px 0px 1px 1px #ebebeb;
        box-shadow:          0px 0px 1px 1px #ebebeb;
}

.secondary section figure {
    margin: 0 auto;
}

.ie6 .secondary section {
    width: 100%;
}

.secondary section figure a img {
    display:block;
    max-width: 96%;
}

.ie6 .secondary section figure a img {
    width: 99%;
}

.secondary section h3{
    float:left;
    display: inline-block; 
    padding: 3.70370%;  /* 5px */ 
    text-transform: uppercase; 
    font-size: 10px; 
    font-size: 1.0rem;
}

    .secondary section p,
    .secondary section p a {
        clear:both; 
        padding : 3% 2% 2.5% 1%;
        color: #014c6c; 
        font-size: 15px; 
        font-size: 1.5rem; 
        text-decoration: none;
        display: block;
    }

    .secondary section p a,
    .secondary section p a:visited {
        text-decoration: none; 
        color: #014c6c;
    }

    .secondary section p a:hover {
        text-decoration: underline;
    }

            .secondary section.people h3,
            .secondary section.cinema h3 {
                background-color: #03324a; 
                color: #fff
            }

            .secondary section.beauty h3,
            .secondary section.family h3 {
                background-color: #f7c7c9; 
                color: #445775 
            }

            .secondary section.men h3 {
                background-color: #d2cea9;
                color: #6b6538
             }

            .secondary section.news h3,
            .secondary section.sports h3 {
                background-color: #841a18; 
                color: #fff
            }

            .secondary section.foot h3 {
                background-color: #666; 
                color: #fff
            }



/* =CE -- not finished for ie 6 yet
-------------------------------------------------------------- */

.ie6 #CETopSearchPartners {
    width: 350px; 
    display:block;
    zoom: 1;
}
.ie6 #CETopSearchPartners .CEServicesList {
    width: 300px;
}
.ie6 .CEContent {
    width: 200px; 
}
.ie6 .CEContent {
    width:300px;
}
.ie6 .CEContent,
.ie6 .CEContent .leftImgBox,
.ie6 .CEContent div.txtImageBoxLightBG {
    clear:both;
}
.ie6 .CEContent,
.ie6 #CETopSearchPartners .CEHeader,
.ie6 .CEContent div.txtImageBoxDarkBG,
.ie6 .CEContent div.txtImageBoxLightBG {
    float:left;
}
.ie6 #CETopSearchPartners .CEHeader,
.ie6 .CEContent .leftImgBox,
.ie6 .CEContent div.leftImgBox,
.ie6 .CEContent div.rightImgBox {
    display:none;
} 
.ie6 #CETopSearchPartners .CEServicesList .CEContent .txtImageBoxLightBG {
    margin-left: 100px; 
    display:block;
}



/* =Advertising zones
-------------------------------------------------------------- */

.imu-segments-bottom {
    margin:10px auto;
    text-align: center;
}

h5.ad-label {
    font-size:10px;
    line-height:10px;
    color:#999;
    overflow: hidden;
    display: block;
    margin:0;
    clear:both;
}

.ie6 h5.ad-label {
    display: none;
}

h5.ad-label span {
    float:left;
}

h5.ad-label .label { /*WIP*/
    background-color:#fff;
    border:1px solid #f5f5f5;
    border-right-width:0;
    border-bottom-width:0;
    padding:4px 10px 4px 4px;
}

h5.ad-label .tail { /*WIP*/
    width:20px;
    height: 20px;
    background-position:0 -100px;
    display:block;
}



/* =POLL
-------------------------------------------------------------- */

.Poll div.PollCol div.CEQuickPollMultiple div#quickpoll_id_4332.quickpoll_box {
    width: 100%;
    /* multi column */
    -moz-column-count: 2;           /* mozilla */
    -moz-column-gap: 20px;          
    -webkit-column-count: 2;        /* webkit */
    -webkit-column-gap: 20px;
    column-count: 2;                /* future CSS3 browsers */
    column-gap: 20px;
}



/* =NEws video Container
-------------------------------------------------------------- */

.video-newsvideo-container {
    clear:both;
    overflow: hidden;
    margin: 5% 0 0;
}



/* =TODO
-------------------------------------------------------------- */

.foot-news-box-container,
.movie-me-box-container,
.contests-jfy-box-container,
.blogs,
.lifestyle-zone {
    clear:both; 
    overflow: hidden;
}
.ie .contests-jfy-box-container {
    zoom:1;
}

.ie .leaderBoardWrapper {
    clear:both;
    zoom:1;
    z-index:1099;
}

.leaderBoardWrapper .topLeaderBoard {
    margin:auto;
}

.leaderBoardWrapper .topLeaderBoard div,
.leaderBoardWrapper .topLeaderBoard object,
.leaderBoardWrapper .topLeaderBoard table,
.leaderBoardWrapper .topLeaderBoard img {
    margin:auto;
    text-align: center;
}

.ie .leaderBoardWrapper .topLeaderBoard {
    z-index:1100;
    position:relative;
}

.imu-top-right {
    margin-top:28px;
    text-align: center;
}
.imu-middle-right {
    padding-top:28px;
    text-align: center;
    clear: both;
}

.imu-top-right  div.imu,
.imu-top-right  div.imu div,
.imu-top-right  div.imu object,
.imu-top-right  div.imu img {
    text-align: center;
    margin: auto;
}

.imu-mid-left div.imu{
    text-align: center;
    margin:auto;
}

.imu-segments-bottom div.imu{
    text-align: center;
    margin:auto;
}

h3.indicator .arrow,
.article-preview header h3,
.article-preview header h3 a,
.manchette-container .manchette-content .manchette-js-block {
    z-index: 0;
}