/* 
    Document   : style
    Created on : 2011-10-27, 10:54:30
    Author     : Jay
    Description:
        Purpose of the stylesheet follows.

        jaune      : #ffe716 [bg entete ]
        gris pale  : #818285 [entre autre le bg]
        gris fonce : #535456
        rouge      : #ad0d0d [commerces-participants]
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/

*/

/* css */
html.multiplebgs{
    background-image:url('/images/bg-gris.jpg'),url('/images/bg-trame-ville-jaune.jpg');
    background-position:center bottom, center top;
    background-repeat:repeat-y, repeat-x;
    background-size:1017px auto, auto auto;    
    background-color:#ffe716;   
    
    /*background: url('/images/bg-trame-ville-jaune.jpg') 0 0 / 970px 2000px repeat-y #ff0000 ;
    background-color:pink;*/
}
html.no-multiplebgs{
    background-image:url('/images/bg-trame-ville-jaune.jpg');
    background-position:center top;
    background-repeat:repeat-x;
    background-size:auto auto;    
    background-color:#ffe716;    
}
html{

}
body{
    font-family: 'Cabin', sans-serif;
}


/*
    enetete */
div.site_holder{
    width:100%;
    
}
div.site_holder div.wrapper{
    margin:0px auto;
    width:1016px;
    background:url('/images/bg-badge.png') -275px 380px #818285 no-repeat;
}
div.site_holder div.wrapper div.entete{
    position:relative;
    margin:0 15px;
    height:277px;
    background:url('/images/bg-ville.png') top left #ffe716 repeat-x; 
    text-align:center;
}
div.site_holder div.wrapper div.entete div.gradient_rad.droite,
div.site_holder div.wrapper div.entete div.gradient_rad.gauche{
    height:163px;
    width:326px;
    background:url('/images/bg-degrade-entete-gauche.png') left center no-repeat;
    position:absolute;
    top:0px;
    left:0px;
    overflow:hidden;
    z-index:0;
}
div.site_holder div.wrapper div.entete div.gradient_rad.droite{
    
}
div.site_holder div.wrapper div.entete h1{
    position:absolute;
    top:20px;
    left:0px;
    color:#FFFFFF;
    text-transform:uppercase;
    
}
div.site_holder div.wrapper div.entete h1.r1{
    font-size:31px;
}
div.site_holder div.wrapper div.entete h1.r2{
    padding-top:30px;
    font-size:27.95px;
}
div.site_holder div.wrapper div.entete a.logo_brigade img{
    padding-top:15px;   
}
div.site_holder div.wrapper div.entete a.logo_ccsi{
    position:absolute;
    right:30px;
    top:0px;
    display:block;
    
    /*
    border-left:5px solid #818285;
    border-right:5px solid #818285;
    background-color:#ffffff;
    */
    
}
div.site_holder div.wrapper div.entete a.logo_ccsi span{
    display:block;
    color:#818285;
    font-size:12px;
    font-family:Arial;
    font-weight:bold;
    /*padding:15px 0; */
}
div.site_holder div.wrapper div.entete div.menu{
    position:absolute;
    bottom:5px;
    left:20px;
    width:100%;
}
div.site_holder div.wrapper div.entete div.menu a{
    color:#818285;
    text-transform:uppercase;
    font-family: 'Anton', sans-serif;
    font-size:16px;
    line-height:16px;
    display:block;
    float:left;
    padding:20px 10px 0 10px;
    margin-right:5px;
}
div.site_holder div.wrapper div.entete div.menu a:hover,
div.site_holder div.wrapper div.entete div.menu a.active{
    background-color:#FFFFFF;
}
div.site_holder div.wrapper div.entete div.menu a.fb{
    right: 50px;
    bottom:-3px;
    position:absolute;
}
/* 
    contenu */

div.bloc{
    width:986px;
    margin:10px auto;
    position:relative;
    overflow:hidden;   
    
}

.rgba div.bloc{
   /* bg blanc opacity */
   background-color: rgba(255,255,255, .9);      
}
.no-rgba div.bloc{
   /* bg blanc opacity */
   background: url(/images/bg-blanc-90-repeat.png) repeat;      
}
div.bloc h2{
    font-family: 'Anton', sans-serif;
    font-weight:normal;
    margin-top:12px;
    background-color:#818285;
    color:#ffe716;
    line-height:33px;
    border-top:1px #c5c6c7 solid;
    border-right:1px solid #959698;
    border-bottom:1px #dcdcdd solid;
    float:left;
    text-transform:uppercase;
    padding:0 10px 0 25px;    
}
div.bloc div.texte{
    clear:left;
    padding:10px 25px; 
    color:#535456;
    font-size:13px;
}
div.bloc div.texte li,
div.bloc div.texte p{
    padding-top:15px;
}
div.bloc div.texte h4{
    font-family: 'Anton', sans-serif;
}
/* images de bg */
div.bloc img.bg{
    position:absolute;
    right:0px;
    top:50%;
    opacity:0.2;
    filter:alpha(opacity=20); /* For IE8 and earlier */    
    z-index:1;
    display:none;
}
div.bloc img.illustration{
    float:right;
    height:158px;
    display:none;
}
div.bloc img.bg.homme{
    margin-top:-348px;
}
div.bloc img.bg.femme{
    margin-top:-250px;
    margin-right:-75px;
}
div.bloc.homme img.homme{
    display:block;
}
div.bloc.femme img.femme{
    display:block;
}
div.bloc.carte_brigade img.carte_brigade{
    display:block;
}
div.bloc.texte img.texte{
    display:block;
}
/*
    pied de page    */
div.pied div.bloc{
    background-color:#FFFFFF;
    margin:35px auto 0px auto;
}
div.pied div.bloc h2{
    background-color:transparent;
    color:#6d6e71;
    font-size:14px;
    border:none;
    margin-top:5px;
    line-height:14px;
}
div.pied div.bloc div.scroll-pane{ 
    clear:left;
    width:95%;
    margin:0px auto;
    overflow:hidden;  
    height:80px; 
} 
div.pied div.bloc div.scroll-pane div.logos{
    width:4500px;
    line-height:45px;
    height:45px;
}
div.pied div.bloc div.scroll-pane div.logos a{
    display:block;
    float:left;
    padding:10px 5px; 
}
div.pied div.bloc div.scroll-pane div.logos a img{
   vertical-align:middle;
   max-height:45px;
}
/* partenaires et collaborateurs */
div.pied div.bloc.partenaires{
    margin-top:1px;
}
div.pied div.bloc.partenaires div{
    position:relative;
    padding-top:1em;
}
div.pied div.bloc.partenaires div.droite{
    float:right;
    width:450px;
    text-align:right;
}
div.pied div.bloc.partenaires div.droite a img{
    height:65px;
}
div.pied div.bloc.partenaires div.gauche{
    float:left;
    width:370px;
    margin-left:30px;
    padding-top:1.75em;
}
div.pied div.bloc.partenaires div h2{
    float:none;
    position:absolute;
    top:5px;
    left:0px;
    margin:0px !important;
    padding:0px !important;
}
/* credit */
div.pied div.bloc.credits{
    margin-top:0px;
    background:url("/images/bg-splash-repeat.jpg") repeat;
    font-family:arial;
    color:#FFFFFF;
    text-align:center;
    font-size:10px;
    padding:10px 0;
}
div.pied div.bloc.credits a{
    text-transform:uppercase;
    font-size:14px;
    color:#ffe716;
    font-weight:bold;        
}
div.pied div.bloc.credits a span{
    font-size:10px;
}

/* coins ronds */
select, input{
    border:1px solid #cfcdc8;
    height:25px;
    padding:0 15px;
    color:#a1a1a1;
}
select{
    padding:0 2px;
}
textarea{
    border:1px solid #cfcdc8;
    padding:13px 13px 0px 13px;
    color:#a1a1a1;
}