/* CSS Document - Basic setup style sheet for nfb.ca */
/*
   _____
  / ___ \
 / / _ \ \
 \ \(_)/ /
  \_   _/
   |   |   Equipe web ONF /
   |_|_|   NFB web team  / 2009
   =====
 */
/*
 * INDEX
 *
 *  1 - CSS RESET
 *  2 - CSS GENERIC STYLES
 *  3 - LAYOUT
 *      3.1 - GRID
 */


/* ( o ) ------------- */
/*  | |  1 - CSS RESET */
/* ------------------- */

/* based on http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, hr,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ( o ) ---------------------- */
/*  | |  2 - CSS GENERIC STYLES */
/* ---------------------------- */

/*---GENERIC---*/

/* MAIN TYPOGRAPHY */

html {font-size: 62.5%; font-family:  Arial, "FreeSans", Helvetica, sans-serif; }
body {color:#fff; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; }
strong, th, thead td{ font-weight: bold; }
cite, em, dfn { font-style: italic; }
code, kbd, samp, pre, tt, var, input[type='text'], textarea { font-size: 92%; font-family: Arial, "FreeSans", Helvetica, sans-serif; }
del { text-decoration: line-through; color: #999; }
ins, dfn { border-bottom: 1px solid #ccc; }
small, sup, sub { font-size: 85%; }
abbr, acronym { }
a abbr, a acronym { border: none; }
acronym[title], dfn[title] { cursor: help; border-bottom: 1px solid #ccc; }
sup { vertical-align: super; }
sub { vertical-align: sub; }

hr{display:none}

a {text-decoration:none;color:#ffcc66;}
a:focus{text-decoration:underline;}

/* FORMS */

fieldset { border: 1px solid #ccc; }
legend { background: #fff; }
textarea, input[type='text'], select, input[type='password'] { border: 1px solid #999; background: #fff; }
textarea, input[type='text'] { padding: 3px 2px }
input[type='submit']:focus {outline: 1px solid #ff9900;}
input, select { cursor: pointer; }
input[type='text'] { cursor: text; }

/*--CONTENT ONLY---*/

.content {font-size:1.2em;line-height:1.5}
/* Headings */
.content h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
.content h2 { font-size: 2em; margin-bottom: 0.75em; }
.content h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
.content h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
.content h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
.content h6 { font-size: 1em; font-weight: bold; }

.content h1 img, .content h2 img, .content h3 img, .content h4 img, .content h5 img, .content h6 img {  margin: 0;}

/* Text elements */

.content p { margin: 0 0 1.5em; }
.content p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
.content p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }
.content a:focus,
.content a:hover { color: #f90; }
.content a { text-decoration: underline; }
.content blockquote  { margin: 1.5em; color: #666; font-style: italic; }
.content strong { font-weight: bold; }
.content em, .content dfn { font-style: italic; }
.content dfn { font-weight: bold; }
.content sup, .content sub { line-height: 0; }
.content address{ margin: 0 0 1.5em; font-style: italic; }
.content del{ color:#666; }
.content pre { margin: 1.5em 0; white-space: pre; }
.content pre, .content code, .content tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

/* Lists  */

.content li ul,
.content li ol { margin:0 1.5em; }
.content ul, ol { margin: 0 1.5em 1.5em 1.5em; }
.content ul{ list-style-type: disc; }
.content ol { list-style-type: decimal; }
.content dl{ margin: 0 0 1.5em 0; }
.content dl dt{ font-weight: bold; }
.content dd{ margin-left: 1.5em;}

/* Tables */

.content table { margin-bottom: 1.4em; width:100%; }
.content th{ font-weight: bold; }
.content thead th{ background: #c3d9ff; }
.content th, .content td, .content caption { padding: 4px 10px 4px 5px; }
    tr.even td  { background: #e5ecf9; }
.content tfoot{ font-style: italic; }
.content caption{ background: #eee; }

.content hr{display:block}


/* ( o ) ---------- */
/*  | |  3 - LAYOUT */
/* ---------------- */

.master-wrap {min-width:1000px;position:relative}

@media screen and (min-device-width:768px) and (max-device-width:1024px){
    .master-wrap{width:1000px}
}
@media screen and (min-device-width:800px) and (max-device-width:1280px){
    .master-wrap{width:1280px}
}

#norm-hd, #norm-dk, #norm-bd, #norm-ft{width:100%;}
    .frame-fix, .frame{width:960px;padding:0 20px;min-height:1px}
        .frame-center{margin:0 auto;}
    .frame-ws{width:1160px;padding:0 20px;min-height:1px}/*ws = wide-screen*/
    .frame-loose, .flow{width:auto;padding:0 20px;min-height:1px;min-width:960px} /* ? */

        /*class de transition vers la version liquide*/
        .nrm-transition_explore-pages #norm-bd .frame-loose{position:relative}
        .static #norm-bd .frame{margin: 0 0 }
        .nrm-transition_user_hub .hub-background {margin-bottom:36px}

/* 3.1 - GRID */

.otv-g-bloc, .norm-g-block{float:left}
.video-screen-grid{position:relative;}

/*special - 1 bloc 12 colonne*/
    .otv-g-full .otv-g-bloc{width:auto;float:none;clear:both}
/*2 colonne 6/6 */
    .otv-g-66 .otv-g-bloc{width:480px;float:right}
    .otv-g-66 div.prim{float:left}
/* 2 colonne 7/5 560 400 */
    .otv-g-75 .otv-g-bloc{width:400px;}
    .otv-g-75 div.prim {width:560px;}
/* 2 colonne 8/4 640 320 */
    .otv-g-84 .otv-g-bloc{width:320px;}
    .otv-g-84 div.prim {width:640px;}
        .norm-g-84 .norm-g-block{width:320px;}
        .norm-g-84 div.prim {width:640px;}
/* 2 colonne 4/8 320 640 */
    .otv-g-48 .otv-g-bloc{width:640px;}
    .otv-g-48 div.prim{width:320px;}
            .norm-g-48 .norm-g-block{width:640px;}
            .norm-g-48 div.prim{width:320px;}
/* 2 colonne 9 / 3  */
    .otv-g-93 .otv-g-bloc{width:240px;}
    .otv-g-93 div.prim{width:720px;}
            .norm-g-93 .norm-g-block{width:240px;}
            .norm-g-93 div.prim{width:720px;}
/* 2 colonne 3 / 9 */
    .otv-g-39 .otv-g-bloc{width:720px;}
    .otv-g-39 div.prim{width:240px;}
/*2 colone 10 / 4   || jsb [date] -- > grille de 14*/
    .otv-g-104 .otv-g-bloc{width:276px;float:right;}
    .otv-g-104 div.prim{width:690px;float:left;}
/*2 colone 4 / 10    || jsb [date] -- > grille de 14*/
    .otv-g-410 .otv-g-bloc{width:690px;float:right;}
    .otv-g-410 div.prim{width:276px;float:left;}
/*3 colones flexible*/
    .otv-g-33pc .otv-g-bloc{width:33%;float:left;}
    .otv-g-33pc div.prim{width:32%}
/*3 colonnes et 4 colonnes (3 unit wide) fix*/
    .otv-g-33 .otv-g-bloc, .otv-g-333 .otv-g-bloc, .otv-g-3333 .otv-g-bloc {width:240px;float:left;}
    .otv-g-33 div.prim, .otv-g-333 div.prim, .otv-g-3333 div.prim{width:240px}
/*3 colonnes (4 unite wide) fix*/
    .otv-g-444 .otv-g-bloc {width:320px;float:left;}
    .otv-g-444 div.prim{width:320px}
/*3 colonnes 2/2/2 */
    .otv-g-222 .otv-g-bloc{width:160px;}
    .otv-g-222 div.prim{float:left;}

/*2 colonnes 50% */
    .norm-g-50pc .norm-g-block, .norm-g-5050pc .norm-g-block{width:50%}
    .norm-g-50pc div.prim, .norm-g-5050pc div.prim{width:50%}

/*Player page v 2.0*/
    .video-screen-grid .norm-g-block{width:418px;float:right}
    .video-screen-grid div.prim{width:520px;float:left}

        .frame-ws .video-screen-grid .norm-g-block{width:622px;float:right}
        .frame-ws .video-screen-grid div.prim{width:520px;float:left}
    /*HD video + normal monitor*/
        .hd-video .video-screen-grid .norm-g-block{width:236px;float:right}
        .hd-video .video-screen-grid div.prim{width:704px;float:left}
    /*HD video + large monitor*/
        .frame-ws .hd-video .video-screen-grid .norm-g-block{width:436px;float:right}
        .frame-ws .hd-video .video-screen-grid div.prim{width:704px;float:left}

        /* TODO : HD is in fact HQ (high quality) change HD to HQ class for futur HD channel */


    .norm-g-500x, .norm-g-x500 {min-width:1000px}
    .norm-g-500x .norm-g-block{width:auto;float:none;margin-left:500px}
    .norm-g-500x div.prim{width:490px;float:left;margin-left:0}

    .norm-g-x200 > .norm-g-block{width:auto;float:none;margin-left:0;margin-right:200px}
    .norm-g-x200 > div.prim{width:200px;float:right;margin-right:0}

/*Homepage v 2.0*/
    .norm-g-x500 {position:relative}
    .norm-g-x500 .norm-g-block{width:500px;position:absolute;right:0;top:0}
    .norm-g-x500 div.prim{position:relative;width:auto;float:none;margin-right:510px}

    .norm-g-x500sub .norm-g-block{width:286px;margin:0;float:left}
    .norm-g-x500sub div.prim{width:204px;margin:0;float:left}

/*Footer v 2.0*/
    .norm-g-720x {min-width:1000px}
    .norm-g-720x .norm-g-block{width:auto;float:none;margin-left:720px}
    .norm-g-720x div.prim{width:720px;float:left;margin-left:0}
    .norm-g-720xsub .norm-g-block{width:220px;margin-left:20px;float:left}

/*U-hub v 2.0*/
    .norm-g-240x {min-width:960px;position:relative}
    .norm-g-240x .norm-g-block{width:auto;float:none;margin-left:240px}
    .norm-g-240x div.prim{width:240px;float:left;margin-left:0}

    .norm-g-240x .norm-g-240xsub .norm-g-block{width:240px;float:none;margin-left:480px}
    .norm-g-240x .norm-g-240xsub div.prim{width:480px;float:left;margin-left:0}

    .norm-g-240x .norm-g-x240 .norm-g-block{width:auto;float:none;margin-left:0;margin-right:240px}
    .norm-g-240x .norm-g-x240 div.prim{width:240px;float:right;margin-right:0}

/*education layout*/
    .norm-g-6040pc{overflow: hidden;}
    .norm-g-6040pc .norm-g-block{width:auto;margin-left:60%;float:none;}
    .norm-g-6040pc div.prim{width:60%;float:left;margin-left:0;}

    .norm-g-6633pc{overflow: hidden;}
    .norm-g-6633pc .norm-g-block{width:auto;margin-left:66.66666%;float:none;}
    .norm-g-6633pc div.prim{width:66.6666%;float:left;margin-left:0;}

    .norm-g-5050pc{overflow: hidden;}
    .norm-g-5050pc .norm-g-block{width:auto;margin-left:50%;float:none;}
    .norm-g-5050pc div.prim{width:50%;margin-left:0;}

/*float-fix*/

.clear:after,
.norm-g-50pc:after,
.otv-g-full:after,
.otv-g-33:after,
.otv-g-333:after,
.otv-g-3333:after,
.otv-g-66:after,
.otv-g-84:after,
.otv-g-75:after,
.otv-g-48:after,
.otv-g-93:after,
.otv-g-39:after,
.otv-g-104:after,
.otv-g-410:after,
.otv-g-222:after,
.otv-g-33pc:after,
.video-screen-grid:after,
.norm-g-93:after,
.norm-g-480x:after,
.norm-g-x200:after,
.norm-g-500x:after,
.norm-g-x500:after,
.norm-g-x500sub:after,
.norm-g-720x:after,
.norm-g-720xsub:after,
.norm-g-240x:after,
.norm-g-240xsub:after,
.norm-g-6040pc:after,
.norm-g-5050pc:after,
#norm-hd:after,
#norm-bd:after,
#norm-ft:after{content:".";display:block;height:0;clear:both;visibility:hidden;}


/*style specifique a IE (zoom:1 hack) a ete deplace vers otv-ie.css */