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

[MEDIA:SCREEN] - CCM/Benchmark Framework

Document : Layout CSS
Author   : Damien SYREN

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

/*
- GESTION PUB ------------------------------------------------------------------
*/

/* Il faudra faire le menage dans la feuille http://www.linternaute.com/html_externe3/style/publi_info.css */
.publi-info{ margin:0 !important }


/*
- 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 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;}
.leftCol{display:none;float:left;width:190px;}
.rightCol{float:right;width:300px;}

/* 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 elements specifiques aux pages avec des #id.
Ce n'est pas conseiller de skinner tout le site ici car cela est contraire a la
methode OOCSS.
*/

body{    
    background:#fff url(../img/bg_skin.jpg) repeat-x 0 0 fixed;
    overflow:hidden;
}
.head .page{ position:relative }
.head .size3of4{ width: 620px} /* pour laisser le + de place possible a l'affichage du pseudo' */
.head .size1of4{ white-space: nowrap; width: auto; float: none; height: 46px; overflow: hidden\9; /*hack ie*/ } /* pour empecher le passage a la ligne */

/* hack Opera */ 
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
    .head .size1of4 { overflow: hidden }	  
}
.head .searchMod{
    position:relative;
    top:-2px;
}
.ie7 .head .searchMod{
    margin-top:7px
}
.head .searchMod .search{ border:1px solid #5e5e5e;font-size:16px; }
.head .txtR{ _padding-top:12px; color:#fff }

/* header et footer externe pour la regie */
.headExt{
    position:relative;
    width:100%;
    height:46px;
    line-height:46px;
    top:0;
    left:0;
    border-bottom:solid 1px #e2e2de;
    background: #f9f9f9; /* Old browsers */
    background: -moz-linear-gradient(top, #f9f9f9 0%, #ededed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* IE10+ */
    background: linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */    
    z-index:100;
    -webkit-box-shadow:0 0 5px rgba(0,0,0,.2);
    -moz-box-shadow:0 0 5px rgba(0,0,0,.2);
    box-shadow:0 0 5px rgba(0,0,0,.2);
    *zoom:1;
}
.headExt .logo,
.foot .logo{ float:left; margin:10px 6px 0 0 }
.headExt .logoC,
.foot .logoC{ float:left; margin:12px 20px 0 0 }
.headExt .logo img,
.headExt .logoC img{ display:block }
.foot.footExt{ padding-top:20px }

/*
- SERVICES ---------------------------------------------------------------------
*/

.services{
    margin:0;
    padding:20px 0;
    width:960px;
    overflow: hidden;
    position: relative;    
}
.services ul{position:relative;display:block}
.services li{width:235px;}
.srvS{
    position:relative;
    background:url(../img/chaines_sprite_services.jpg?4) no-repeat 0 25px;
    border-right:0 none;
    float:left;
    width:235px;height:160px;
    font-size:20px;font-weight:bold;text-align:center;    
}
.srvS a{position:relative; display:block; height:160px; color:#303030 }
.srvS a:hover{color:#303030}
/*
* .srv1 = petites annonces / Guide des musees
* .srv2 = forums / Quiz
* .srv3 = cote auto
* .srv4 = guide des vins
* .srv5 = (timbre)
* .srv6 = itineraires et plans
* .srv7 = agenda
* .srv8 = appel a temoin
* .srv9 = seances cinema
* .srv10 = sondage
* .srv11 = restaurants
* .srv12 = radar
* .srv13 = achat neuf (auto)
* .srv14 = assurance
* .srv15 = covoiturage
* .srv16 = programme TV
* .srv17 = petites annonces auto
*/
.srv1{ background-position:0 10px }
.srv2{ background-position:0 -160px }
.srv3{ background-position:0 -320px }
.srv4{ background-position:0 -480px }
.srv5{ background-position:0 -640px }
.srv6{ background-position:0 -800px }
.srv7{ background-position:0 -960px }
.srv8{ background-position:0 -1120px }
.srv9{ background-position:0 -1280px }
.srv10{ background-position:0 -1440px }
.srv11{ background-position:0 -1600px }
.srv12{ background-position:0 -1760px }
.srv13{ background-position:0 -1920px }
.srv14{ background-position:0 -2080px }
.srv15{ background-position:0 -2240px }
.srv16{ background-position:0 -2400px }
.srv17{ background-position:0 -2560px }

.services .prevBtn {left:0  }
.services .nextBtn {right:0 }

/* footer */
.foot{
    position:relative;
    padding:0 0 20px;
    border-top:4px solid #151515;
    background:#000;
}
.foot .page {
    padding: 0;
    width: 1000px;
}
.foot label{ color:#9f9f9f }
.foot1{ padding:10px 20px 20px; margin-bottom:20px; border-bottom:1px solid #4d4d4d }
.foot2{ text-align:center;border-top:0 none;padding:0 }
.foot2 a,
.foot2 span{ color:#9f9f9f; margin:0 8px; font-size:12px; }
.foot2 a:hover{color:#9f9f9f}
.foot2 span{ margin:0 }

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

.foot .searchMod .submit{ background-position:0 -130px;right:-1px }
.foot .searchMod .submit:hover,
.foot .searchMod .submit:focus{ background-position:0 -163px }
.foot .searchMod .submit:active{ background-position:0 -196px }