/*------------------------------------------------------------------------------

[MEDIA:SCREEN] - CCM/Benchmark Framework

Document : Layout CSS
Author   : Damien SYREN

------------------------------------------------------------------------------*/

/*
- DEFAULT LAYOUT ---------------------------------------------------------------
*/

.body .page{ background:#fff }

.body:after,
.page:after{
    clear:both;
    display:block;
    visibility:hidden;
    overflow:hidden;
    height:0 !important;
    line-height:0;
    font-size:xx-large;
    content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
}
.page{
    margin:0 auto;
    width:1000px;
    word-wrap:break-word; /* CSS3 permet de faire des cesure sur les long mots sans espaces */
}

/* gestion de la pub */
// #oas_top, #ba_top {
//     background: none;
//     padding-top: 0;
//     margin-bottom: 20px;
// }

/*/----> GESTION DES LAYOUTS <----/*/

/* 1 colonne centrale */
.tpl_1col .ctCols{float:none; width:100%}
.tpl_1col .main{margin:0; padding:15px}
.tpl_1col .leftCol,
.tpl_1col .rightCol{ display:none }

/* 2 colonnes droite (par defaut) */
.ctCols{float:left; width:670px;}
.main{margin:15px 0 15px 15px}
.leftCol{display:none;float:left;width:190px;}
.rightCol{float:right;width:330px;}

/* 2 colonnes gauche */
.tpl_2cols .ctCols{float:none; width:100%}
.tpl_2cols .main{float:right; width:670px;}
.tpl_2cols .leftCol{display:block;float:left;width:330px;}
.tpl_2cols .rightCol{display:none}

/* 3 colonnes */
.tpl_3cols .main{float:right; width:340px;}
.tpl_3cols .leftCol{display:block; width:330px}


/*
- SKIN LAYOUT ------------------------------------------------------------------
C'est ici qu'on va skinner les �l�ments sp�cifiques aux pages avec des #id.
Ce n'est pas conseiller de skinner tout le site ici car cela est contraire �la
m�thode OOCSS.
*/

body{    
    background:#0a0e1f url(../img/bg_skin.jpg) fixed 50% 0;
    overflow:hidden;
}
/* header */
.head{
    position:relative;
    width:100%;
    height:46px;
    line-height:46px;
    top:0;
    left:0;    
    background:url(../img/bg_head.png) repeat-x 0 0;
    -webkit-box-shadow:0 0 6px rgba(0,0,0,1);
    -moz-box-shadow:0 0 6px rgba(0,0,0,1);
    box-shadow:0px 0px 6px rgba(0,0,0,1);
    z-index:100;
}
.head .page{ position:relative }
.head .icoMoreHead{ position:absolute; left:-30px; top:10px }

.head .logo { float:left; margin:10px 5px 0 0 }
.head .logoC{ float:left; margin:12px 20px 0 0 }
.head .logo img,
.head .logoC img{ display:block }

.head .searchMod{    
    -webkit-box-shadow: 1px 1px 0 #b22222;
    -moz-box-shadow: 1px 1px 0 #b22222;
    box-shadow: 1px 1px 0 #b22222;
    top:-1px;
    *margin-top:7px
}
.head .searchMod .search{ border:1px solid #999 }
.head .txtR{ _padding-top:12px; color:#000 }
.head .txtR .mb{
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,.5)
}
.head .buttonS-G{
    -webkit-box-shadow:0 1px 0 #333;
    -moz-box-shadow:0 1px 0 #333;
    box-shadow:0 1px 0 #333;
}

/* sous menu de navigation inter sites */
.sbMenu{    
    width:100%;
    background:#fff;
    z-index:-1;
}

/* menu de navigation du site */
.nav{
    position:relative;    
    height:34px;    
    border:1px solid #282731;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    background:url(../img/sprite_button.png) repeat-x 0 -495px;
    z-index:10;    
}
    .nav li{
        position:relative;        
        float:left;
        border-right:1px solid rgba(255,255,255,.1);
        border-left:1px solid #1e1e1e;        
    }
    .nav li:first-child{ border-left:none }
             
        .nav li .navLink{
            float:left;
            padding:8px 15px;
            color:#fff;
            font-size:13px;
            text-transform:uppercase;   
            line-height:1.4; /* oblig� de mettre la propriete pour le nav du forum */
        }
        .nav .navLink:hover,
        .nav .navLink:focus{
            position:relative;
            background:url(../img/sprite_button.png) repeat-x 0 -530px;
            text-decoration:none;
            z-index:3;
        }
		.nav li .navLink.gold {
			color: #c18e10;
			font-weight: bold;
		}
        .nav li .tickG-B{
            position:relative;
            top:7px;
            left:3px;
            *top:5px;
            _display:none;
        }
        .nav li:first-child .navLink:hover,
        .nav li:first-child .navLink:focus{
            -moz-border-radius-topleft:5px;
            border-top-left-radius:5px;
        }
        .nav .navLink:active,
        .nav .navLink:active,
        .nav .navLink.selected{
            color:#0376a3;
            background:url(../img/sprite_button.png) repeat-x 0 -566px;
        }
        .nav li:hover .sbnav,
        .nav li:focus .sbnav{
            display:block;
        }

/* sous nav */
.nav .sbnav{
    display:none;
    position:absolute;
    margin:0;
    top:34px;
    _top:30px;
    left:0;
    white-space:nowrap;
    z-index:200;
}
.nav .sbnav .ct{
    float:left;
    padding:15px;
    background:#fff;
    border:1px solid #8cd0eb;
    border-top:2px solid #0376a3;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    -webkit-box-shadow: 2px 3px 4px rgba(0,0,0,.15);
    -moz-box-shadow: 2px 3px 4px rgba(0,0,0,.15);
    box-shadow: 2px 3px 4px rgba(0,0,0,.15);
}
    .nav .sbnav .ct li{
        float:none;
        margin:0;
        border:none;
    }

/* footer */
.foot{
    position:relative;
    padding:20px 30px;
    border-top:2px solid #c00418;
    background:#303030;
}
.foot .h6{ color:#fff }
.foot label{ color:#9f9f9f }
.foot1{ padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #4d4d4d }
.foot2{ text-align:center }
.foot2 a{ color:#9f9f9f; margin:0 8px; font-size:12px; }

/* inscription newsletter footer */
.foot .searchMod .submit{ background-position:-76px -142px }

/* glossaire version footer */
.foot .glossary a{ margin:5px }
.foot .glossary a:hover,
.foot .glossary a:focus,
.foot .glossary a.selected{
    margin:1px 4px;
}

/* Copyright */
p.copyright {
    color: #9F9F9F;
    font-size: 12px;
    display: inline
}

/*/----> HOME <----/*/
.hme1,.hme3{ position:relative; width:315px; overflow:hidden }
.hme2{ position:relative; width:340px; overflow:hidden }
.hme2 .box1,.hme3 .box1{ border-left-color:#fff }

/* slide colonne droite */
.rgt1{ position:relative; width:270px; overflow:hidden }   

/* slider centrale de la home */
.asfSlider{    
    margin-left:15px;
    margin-right:15px;
    background:#efefef url(../img/bg_hme.png) repeat-y;
}
.asfSlider .ctSlider{ min-height:242px }

/* services home */
.srvS{
    float:left;
    width:225px;
    height:160px;
    padding-top:14px;
    text-align:center;
    font-size:18px;
    font-weight:bold;
    border-right:1px solid #ccc;
    background:url(../img/sprite_service.png) no-repeat 0 25px;
}
.srvS a{ position:relative; display:block; height:160px; color:#303030 }
.srv1{ background-position:0 25px }
.srv2{ background-position:0 -140px }
.srv3{ background-position:0 -300px }
.srv4{ background-position:0 -470px }
.srv5{ background-position:0 -630px }
.srv6{ background-position:0 -795px }

/*/----> FICHE FILM <----/*/
.fch1{ width:167px }
.fch1 .stars{ margin:0 auto }

/* ils ont aimes ce film */
.likedfilm{ width:156px }

/* text bloc tv */
.tvBloc table{ width:100%; height:48px }
.tvSt{ background:#ccc; font-size:12px; padding:4px 8px; margin-left:1px }


/*
- MOBILE LAYOUT ----------------------------------------------------------------
Media queries for responsive design
http://www.alistapart.com/articles/responsive-web-design
Inspired by http://html5boilerplate.com/
*/

@media all and (orientation:portrait) {
  /* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
    
  /* Prevent iOS, WinMobile from adjusting font size */
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
}

/*
- PRINT STYLES -----------------------------------------------------------------
* inlined to avoid required HTTP connection - http://www.phpied.com/delay-loading-your-print-css/
  alsacreation - http://www.alsacreations.com/astuce/lire/1160-une-feuille-de-styles-de-base-pour-le-medium-print.html
*/

@media print {
  * { background-color: #fff !important; color: #000 !important; text-shadow: none; }
  body { width: auto!important; margin: auto!important; font-family: serif; }
  a, a:visited { color: #000 !important; text-decoration: underline !important; }
  a:after { content: " (" attr(href) ")"; } /* affichage des URL des liens */
  abbr:after { content: " (" attr(title) ")"; } /* affichage des Abbreviations des liens */
  .ir a:after { content: ""; }  /* Don't show links for images */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3, blockquote { orphans: 3; widows: 3; }
  blockquote, ul, ol, img, h2, h3{ page-break-after: avoid; } /* pas de coupure dans ces élements */
  h1, h2, h3, caption { page-break-after: avoid; } /* pas de saut après ces éléments */
}