@charset "UTF-8";
/* CSS Document */

@import url("../../fonts/opensans/opensans_bold_french/stylesheet.css");
@import url("../../fonts/opensans/opensans_light_french/stylesheet.css");
@import url("../../fonts/opensans/opensans_regular_french/stylesheet.css");
@import url("../../fonts/opensans/opensans_semibold_french/stylesheet.css");
@import url("../../fonts/chunkfive/stylesheet.css");


/* Générique **************************************************************************************************************/
p{ font-size:12px; text-align:justify; margin-bottom:5px;}

strong{ font-weight:bold; }

.s9{ font-size:9px; } .s10{ font-size:10px; } .s11{ font-size:11px; }
.s12{ font-size:12px; } .s14{ font-size:14px; } .s16{ font-size:16px; } .s18{ font-size:18px; }
.s20{ font-size:20px; } .s22{ font-size:22px; } .s24{ font-size:24px; } .s26{ font-size:26px; }
.s28{ font-size:28px; } .s30{ font-size:30px; } .s33{ font-size:33px; } .s36{ font-size:36px; } .s48{ font-size:48px; }
.s38{ font-size:38px; } .s48{ font-size:48px; }

.orange{ color:#da4b44 }

.fRight{ float:right; } .fLeft{ float:left; }
.center{ text-align:center; } .right{ text-align: right; } .left{ text-align: left; }

.color1{ color:#898989 ;} .color2{ color:#7f7f7f  ;} .color3{ color:#35a295 ;} .color4{ color:#3e3e3e  ;} 

.pad10{ padding:10px; } .padV10{ padding:10px 0; } .padH10{ padding:0 10px; }
.marg10{ margin:10px; } .margV10{ margin:10px 0; } .margH10{ margin:0 10px; }
.margB10{ margin-bottom:10px; } .margT10{ margin-top:10px; }.margT30{ margin-top:30px; }.margT50{ margin-top:50px; } .margL10{ margin-left:10px; } .margR10{ margin-right:10px; }

hr{ border:none; height:1px; color:#ccc ; background-color:#ccc; margin-bottom:15px; text-shadow : 0 1px 0 #fff}	

.img{ border: 1px solid #b8d7f0; }
.img img{ width:96%; margin:2%; }

h1,h2,h3,h4,h5{ margin-bottom:15px; font-weight:normal;}

a{ color:#fff }
a:hover{ text-decoration:underline; }

.none{display:none;}

.w620{ width:620px; }	
.relative {
    position :relative;
}

body {
    background: url("../../img/carburant/bg.jpg") no-repeat center top #efefef;
    font-family: 'open_sanslight', Helvetica, arial, sans-serif;
}
/* Header ********************************************************************************************************* Header */
#header {
   clear: both;
    font-family: Helvetica, sans-serif;
    height: 66px;
    margin-bottom: 7px;
}
.logo {
    padding-top: 8px;
    width: 85%;
}
.bloc_fb {
   padding-top: 12px;
    width: 25%;
    float: right;
}

.bloc_confiance{
    width: 25%;
float: right;
}
.bloc_confiance .info {
   text-align: right;
    padding-top: 5px;
    vertical-align: top;
    display: inline-block;
}
.bloc_confiance .nombre {
   clear: right;
    
}
.bloc_confiance .legend {
   clear: left;
   display: block;
}
.bloc_confiance {
   text-align: right;
   color: #474747;
   margin-top: 10px;
}
.bloc_confiance .icon{
    display: inline-block;
}

/* Accroche ********************************************************************************************************* accroche */
.blocprincipal {text-align: center;}
.accroche {
    text-align: center;
    width: 70%;
    position: relative;
    margin: 0px auto;
    clear: both;
    
}
.accroche h2{
    font-size: 32px;
    color: #474747;
    line-height: 35px;
    font-family: 'open_sanssemibold', Helvetica, arial, sans-serif;
}
.accroche h2 span {
    font-size: 37px;
}
.accroche h2 em {
    color: #00bbfe;
    font-size: 37px;
    text-transform: uppercase;
    font-family: 'open_sansbold', Helvetica, arial, sans-serif;
}
.accroche h2 strong {
    font-size: 45px;
    color: #f6d200;
    text-shadow: 2px 2px 3px #00bbfe;
    font-family: 'chunkfiveroman', Helvetica, arial, sans-serif;
}

/* Contenu ********************************************************************************************************* Contenu */
.contenu {
    clear: both;
    margin: 0 auto;
    width: 75%;
    position: relative;
    text-align: left;
}
.contenu div.spanun {
    margin-bottom: 30px;
    margin-top: 12px;
    padding-left: 10%;
     clear: both
}
.contenu div.spandeux {
    margin-top: 10px;
    padding-left: 10%;
     clear: both;
}
.contenu div.spanun span {
    vertical-align: middle;
}
.contenu div span {
    display: inline-block;
    font-size: 40px; 
    color: #474747;
    background-color: #00bbfe;
    width: 57px;
    height: 57px;
    border-radius: 40px;
    text-align: center;
    font-family: 'open_sansbold', Helvetica, arial, sans-serif;
}

.contenu div em {
    padding: 1%;
    position: relative;
    color: #000000;
    font-size: 24px;
    font-family: 'open_sanssemibold', Helvetica, arial, sans-serif;
    width: 82%;
    display: inline-block;
    border-radius: 20px;
}

#choix {
    margin: 0 auto;
    height: auto;
    text-align: center;
}
#choix li {
    cursor: pointer;
    display: inline-block;
    margin-right: 20px;
    width: 220px;
}
#choix li:hover .choiximg{
    top: 10px;
    position: relative;
}
/*Formulaire ***************************************************************************************************************/

#zone_formulaire {
    margin-top: 50px;
    position: relative;
    z-index: 3;
}

#zone_formulaire .dicta {
    color: #3e3e3e;
    font-family: 'open_sansregular', Helvetica, arial, sans-serif;
    font-size: 14px;
}
.form input[type=password], .form input[type=text], .form select, .form textarea {
   width:94%;
   padding : 0 3%;
   height:30px;
   line-height:30px;
   margin-bottom:7px;
   border:none;
   font-weight:bold;
   color:#7f7f7f;
   font-family:Helvetica, sans-serif;
   font-size:12px;
}
#contact_content .form textarea{
   width:94%;
   padding : 0 3%;
   height:150px;
   border: 1px solid #aeaeae  ;
   line-height:30px;
   margin-bottom:7px;
   font-weight:bold;
   color:#7f7f7f;
   font-family:Helvetica, sans-serif;
   font-size:12px;
}
#contact_content .form textarea:hover, #contact_content .form textarea:hoverfocus { box-shadow : none; color:#780102;}
.form select{ padding-right:0;}	

.form input[type=password], .form input[type=text]{ 
   
}	

.form input[type=password]:focus, .form input[type=text]:focus, .form input[type=password]:hover, .form input[type=text]:hover,
.form .message textarea:hover, .form .message textarea:focus{ background-color:#d8d8d8; color:#000000 }	
.form select option{ padding:2%; color:#fff; background-color:#00BBFE; font-size:12px;}	
.form .court{ width:100px; }
.form .home{ width:240px; }
.form .moyen{ width:240px; }
.form .long{ width:260px; }
.form label{ font-size:14px; }

.form .court, .form .home, .form .moyen{margin-right:8px; }

select, input[type=checkbox], input[type=radio]{ cursor:pointer; }

.form div, .form table tr td{
   position : relative;
}



.erreur_connexion{
   color:white;
   font-size:12px; 
   background-color:#ea4b4b;
   border-radius:5px;
   padding:5px;
}




.btnBig input, .btnBig button, .btnBig a {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00bbfe+0,00aae2+100 */
background: #00bbfe; /* Old browsers */
background: -moz-linear-gradient(top,  #00bbfe 0%, #00aae2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #00bbfe 0%,#00aae2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #00bbfe 0%,#00aae2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bbfe', endColorstr='#00aae2',GradientType=0 ); /* IE6-9 */

   border:none;
   color: #4B4B4B;
   cursor: pointer;
   float: left;
   font-size: 22px;
   font-weight: bold;
   height: 73px;
   line-height: 60px;
   margin-top: 10px;
   text-align: center;
   width: 100%;
   overflow:hidden;
}
.btnBig input:hover, .btnBig button:hover, .btnBig a:hover {
   background: #0098D0;
}
#enquete .btnBig input, #enquete .btnBig button {
   background-position: 0 -73px;
   float: right;
   font-size: 16px;
   height: 40px;
   line-height: 40px;
   width: 220px;
}

.form div .error{
   position:absolute;
   width:179px;
   height:29px;
   background: url('../../img/error.png') 0 0 no-repeat;
   font-size:12px;
   color:#fff;
   top:-27px;
   padding-left:30px;
   line-height:22px;
   left:200px;
}	
.form div.moyen .error{ left:220px; }
.form div.home .error{ left:220px; }	
.form div.court .error { left:80px; }	
.form div.long .error{ left:220px; }	
.form div.date .error{ left:150px; }	
.form div.proche .error{ left:70px; }	

.form table{
   border:none;
   background:none;
}
.form table td{
   border:none;
   text-align:left;
   padding:0;
}	
.infos_text{margin-bottom:10px;}

/* Spécial form Accueil ***************************/
#form_accueil .form_elem{
   float:left;
   margin-right:8px;
   position:relative;
   width:240px;
}
#form_accueil #id_gender{ width : auto; }
#form_accueil #postcode{ width:100px; clear:left; }
#form_accueil #birthday{ clear:left; }
#form_accueil .error{left:210px;}
#form_accueil #postcode .error, #form_accueil #id_gender .error{ left:70px;  }   

/* erreur page d'accueil */ 
#form_accueil .form div.erreur{
   position:absolute;
   top:-15px;
   color:#fff;
   right:2px;
   height:20px;
   line-height:20px;
   padding: 0 20px 0 10px;
   z-index:1;
   background-color:#e05c5c;
   font-size:12px;
   box-shadow : 0 0 3px #858585;
   /*min-width:260px*/
}	

#form_accueil .form div.erreur span{
   display:block;
   position:absolute;
   width : 35px;
   height:32px;
   right:-20px;
   bottom:-3px;
   background: url('../../img/resto/erreur.png') 0 0 no-repeat;
}	

.formStyle{
   background-color:#dbecfb;
   border:1px solid #b8d7f0
}	

.formStyle table{ width:94%; margin:3% }
.formStyle table td{ font-size:14px; }
.formStyle input[type=text]{ 
   border: 1px solid #b8d7f0;
   box-shadow : 1px 1px 1px #fff
}

.formStyle legend{ padding:10px 10px 0 10px }	

.infos_text {
    margin: 10px 0;
}
.infosplus p{
    margin: 20px 0;
    font-family: 'open_sansregular', Helvetica, arial, sans-serif;
}

/* Footer ********************************************************************************************************* Footer */
#footer{
   padding-bottom:10px;
}
.footer{
   line-height: 50px;
   text-align: center;
}
.footer a{
   font-size:14px;
   margin-right:15px;
   font-weight:bold;
   color:#00BBFE;
}

#voile{
   background: url("../../img/carburant/bg_voile.png") repeat scroll;
    -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
   bottom: 0;
   display: none;
   height: 100%;
   left: 0;
   position: fixed;
   right: 0;
   top: 0;
   width: 100%;
   z-index: 2;
}


/*Mobile*/
@media only screen and (max-width: 447px) { 
     body{
        background: url(../../img/carburant/bg_mobile.jpg) no-repeat top center;
    }
    .bloc_fb, .bloc_confiance {
        display: none;
    }
    #header {
        max-height: 100%;
    }
    #header .grid_3 {
        width: 100%;
        text-align: center;
    }
    #header .logo {
        width: 30%;
    }
    #enquete_content .grid_3{
        clear: both;
        float: none;
        text-align: center;
    }
    #enquete_content .grid_9{
        width: 100%;
    }
    #enqueteRight #banniere {
            width: 80%;
    margin: 0 auto;
    }
     
}