/* Global Declaration */

div.selector, 
div.selector span, 
div.checker span, 
div.radio span, 
div.uploader, 
div.uploader span.action {
    background-image: url(/assets/tu-opinion/bebe/img/form.png);
    background-repeat: no-repeat;

}

.selector, 
.radio, 
.checker, 
.uploader, 
.selector *, 
.radio *, 
.checker *, 
.uploader *{
    margin: 0;
    padding: 0;
}

/* SPRITES */

/* Select */

/* Select */
div.selector {
    background-position: -890px -76px;
    line-height:38px;
    height: 40px;
    padding: 0 0 0 10px;
    position: relative;
    overflow: hidden; 
    margin-bottom:7px
}

div.selector span {
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    background-position: right 0;
    height: 38px;
    line-height: 38px;
    padding-right: 50px;
    cursor: pointer;
    width: 100%;
    display: block; }

div.selector.fixedWidth {
    width: auto; }
div.selector.fixedWidth span {
    width: auto;
    float:none;
    max-width:300px
}
@media screen and (max-width:960px) {
    div.selector.fixedWidth span{ max-width:none; } 
}

div.selector select {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    border: none;
    background: none;
    position: absolute;
    height: 38px;
    top: 2px;
    left: 0px;
    width: 100%; }
div.selector.active {
    background-position: -890px -114px;}
div.selector.active span {
    background-position: right -38px; }
div.selector.hover, div.selector.focus {
    background-position: -890px -114px; }
div.selector.hover span, div.selector.focus span {
    background-position: right -38px; }
div.selector.hover.active, div.selector.focus.active {
    background-position: -890px -114px; }
div.selector.hover.active span, div.selector.focus.active span {
    background-position: right -38px; }
div.selector.disabled, div.selector.disabled.active {
    background-position: -890px -114px; }
div.selector.disabled span, div.selector.disabled.active span {
    background-position: right -38px; }


/*Spécial accueil*/
/*.accueil div.selector { background-position: -389px -170px; }		
.accueil div.selector span { background-position: right -68px; }
.accueil div.selector.hover { background-position: -389px -136px; }		
.accueil div.selector.hover span { background-position: right -34px; }		*/

/* Checkbox */

div.checker {
    width: 20px;
    height: 20px;
}

div.checker input {
    width: 20px;
    height: 20px;
    cursor:pointer;
}

div.checker span {
    background-position: 0 -220px;
    height: 20px;
    width: 20px;
}

div.checker:active span, 
div.checker.active span {
    background-position: -40px -220px;
}

div.checker.focus span,
div.checker:hover span {
    background-position: -20px -220px;
}

div.checker.focus:active span,
div.checker:active:hover span,
div.checker.active:hover span,
div.checker.focus.active span {
    background-position: -20px -220px;
}

div.checker span.checked {
    background-position: -60px -220px;
}

div.checker:active span.checked, 
div.checker.active span.checked {
    background-position: -40px -220px;
}

div.checker.focus span.checked,
div.checker:hover span.checked {
    background-position: -40px -220px;
}

div.checker.focus:active span.checked,
div.checker:hover:active span.checked,
div.checker.active:hover span.checked,
div.checker.active.focus span.checked {
    background-position: -40px -220px;
}

div.checker.disabled span,
div.checker.disabled:active span,
div.checker.disabled.active span {
    background-position: -40px -220px;
}

div.checker.disabled span.checked,
div.checker.disabled:active span.checked,
div.checker.disabled.active span.checked {
    background-position: -40px -220px;
}

/* Radio */

div.radio {
    width: 20px;
    height: 20px;
}

div.radio input {
    width: 20px;
    height: 20px;
    cursor:pointer
}

div.radio span {
    height: 20px;
    width: 20px;
    background-position: 0 -200px;
}

div.radio:active span, 
div.radio.active span {
    background-position: -20px -200px;
}

div.radio.focus span, 
div.radio:hover span {
    background-position: -20px -200px;
}

div.radio.focus:active span,
div.radio:active:hover span,
div.radio.active:hover span,
div.radio.active.focus span {
    background-position: -40px -200px;
}

div.radio span.checked {
    background-position: -60px -200px;
}

div.radio:active span.checked,
div.radio.active span.checked {
    background-position: -40px -200px;
}

div.radio.focus span.checked, div.radio:hover span.checked {
    background-position: -40px -200px;
}

div.radio.focus:active span.checked, 
div.radio:hover:active span.checked,
div.radio.focus.active span.checked,
div.radio.active:hover span.checked {
    background-position: -40px -200px;
}

div.radio.disabled span,
div.radio.disabled:active span,
div.radio.disabled.active span {
    background-position: -40px -200px;
}

div.radio.disabled span.checked,
div.radio.disabled:active span.checked,
div.radio.disabled.active span.checked {
    background-position: -40px -200px;
}

/* Uploader */

div.uploader {
    background-position: 0px -350px;
    height: 32px;
}

div.uploader span.action {
    background-position: right -478px;
    height: 32px;
    line-height: 32px;
}

div.uploader span.filename {
    height: 32px;
    /* change this line to adjust positioning of filename area */
    margin: 2px 0px 2px 2px;
    line-height: 32px;
}

div.uploader.focus,
div.uploader.hover,
div.uploader:hover {
    background-position: 0px -414px;
}

div.uploader.focus span.action,
div.uploader.hover span.action,
div.uploader:hover span.action {
    background-position: right -510px;
}

div.uploader.active span.action,
div.uploader:active span.action {
    background-position: right -542px;
}

div.uploader.focus.active span.action,
div.uploader:focus.active span.action,
div.uploader.focus:active span.action,
div.uploader:focus:active span.action {
    background-position: right -574px;
}

div.uploader.disabled {
    background-position: 0px -382px;
}

div.uploader.disabled span.action {
    background-position: right -446px;
}

/* PRESENTATION */

/* Select */
div.selector {
    margin-bottom: 15px;
    width: 100%;
}

.court div.selector{
    width:150px;
}

.long div.selector{
    width:280px;
}

.mini div.selector{
    width:57px;
}				

div.selector select {
    width: 100%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1em;
    border: solid 1px #fff;
    cursor:pointer;
}

div.selector span {
    padding: 0px 50px 0px 2px;
    cursor: pointer;
}

div.selector span {
    color: #000;
    width: 158px;
    font-size:15px;
}

.court div.selector span {
    width:123px;
}
.long div.selector span{
    width:242px;
}
.mini div.selector span{
    width:30px;
}			


.home div.selector span { width:255px }

div.selector.disabled span {
    color: #bbb;
}

/* Checker */
div.checker {
    margin-right: 5px;
}

/* Radio */
div.radio {
    margin-right: 5px;
}

/* Uploader */
div.uploader {
    width: 190px;
    margin-bottom: 20px;
    cursor: pointer;
}

div.uploader span.action {
    width: 85px;
    text-align: center;
    text-shadow: #fff 0px 1px 0px;
    background-color: #fff;
}

div.uploader span.filename {
    color: #777;
    width: 82px;
    border-right: solid 1px #bbb;
    font-size: 90%;
}

div.uploader input {
    width: 190px;
}

div.uploader.disabled span.action {
    color: #aaa;
}

div.uploader.disabled span.filename {
    border-color: #ddd;
    color: #aaa;
}
/*

CORE FUNCTIONALITY 

Not advised to edit stuff below this line
-----------------------------------------------------
*/

.selector select:focus, .radio input:focus, .checker input:focus, uploader input:focus {
    outline: 0;
}

/* Select */

div.selector {
    position: relative;
    padding-left: 10px;
    overflow: hidden;
}

div.selector span {
    display: block;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.selector select {
    position: absolute;
    opacity: 0;
    height: 38px;
    border: none;
    background: none;
}

/* Checker */

div.checker {
    position: relative;
    float: left;
}

div.checker span {
    display: block;
    float: left;
    text-align: center;
}

div.checker input {
    opacity: 0;
    display: inline-block;
    background: none;
    vertical-align:top;
}

/* Radio */

div.radio {
    position: relative;
    display:inline-block;
    vertical-align:middle
}

div.radio span {
    display: block;
    float: left;
    text-align: center;
}

div.radio input {
    opacity: 0;
    text-align: center;
    display: inline-block;
    background: none;
    vertical-align:top;
}

/* Uploader */

div.uploader {
    position: relative;
    float: left;
    overflow: hidden;
}

div.uploader span.action {
    float: left;
    display: inline;
    padding: 2px 0px;
    overflow: hidden;
    cursor: pointer;
}

div.uploader span.filename {
    padding: 0px 10px;
    float: left;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.uploader input {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    float: right;
    height: 25px;
    border: none;
}



/**********************************************************************************************************************/
/*MODIFS POUR LE CHOIX DES CADEAUX ************************************************************************************/
/**********************************************************************************************************************/

/* Checkbox */

.cadeaux div.checker {
    width:137px;
    height:26px;
}

.cadeaux div.checker input {
    width:137px;
    height:26px;
    cursor:pointer;
}

.cadeaux div.checker span {
    background-position: -261px -247px;
    width:137px;
    height:26px;
}

.cadeaux div.checker:active span, 
.cadeaux div.checker.active span {
    background-position: -33px -166px;
}

.cadeaux div.checker.focus span,
.cadeaux div.checker:hover span {
    background-position : -261px -274px;
}

.cadeaux div.checker.focus:active span,
.cadeaux div.checker:active:hover span,
.cadeaux div.checker.active:hover span,
.cadeaux div.checker.focus.active span {
    background-position: -261px -247px;
}

.cadeaux div.checker span.checked {
    /*background-position: -261px -328px;*/
    background-position: -261px -247px;
}

.cadeaux div.checker:active span.checked, 
.cadeaux div.checker.active span.checked {
    background-position: -261px -328px;
}

.cadeaux div.checker.focus span.checked,
.cadeaux div.checker:hover span.checked {
    /*background-position : -261px -301px;*/
    background-position : -261px -274px;
}

.cadeaux div.checker.focus:active span.checked,
.cadeaux div.checker:hover:active span.checked,
.cadeaux div.checker.active:hover span.checked,
.cadeaux div.checker.active.focus span.checked {
    /*background-position : -261px -301px;*/
    background-position : -261px -274px;
}

.cadeaux div.checker.disabled span,
.cadeaux div.checker.disabled:active span,
.cadeaux div.checker.disabled.active span {
    /*background-position : -261px -301px;*/
    background-position : -261px -274px;
}

.cadeaux div.checker.disabled span.checked,
.cadeaux div.checker.disabled:active span.checked,
.cadeaux div.checker.disabled.active span.checked {
    /*background-position : -261px -301px;*/
    background-position : -261px -274px;
}

.prestige div.checker span,
.prestige div.checker span.checked  {
    background-position : -261px -423px;
}

.prestige div.checker.focus span,
.prestige div.checker:hover span {
    background-position : -261px -451px;
}	

.prestige div.checker span:hover,
.prestige div.checker.focus:active span,
.prestige div.checker:active:hover span,
.prestige div.checker.active:hover span,
.prestige div.checker.focus.active span{
    background-position : -261px -451px;
}	

.prestige div.checker.focus:active span.checked,
.prestige div.checker:hover:active span.checked,
.prestige div.checker.active:hover span.checked,
.prestige div.checker.active.focus span.checked {
    /*background-position : -261px -301px;*/
    background-position : -261px -451px;
}

.prestige div.checker.disabled span,
.prestige div.checker.disabled:active span,
.prestige div.checker.disabled.active span {
    /*background-position : -261px -301px;*/
    background-position : -261px -451px;
}

.prestige div.checker.disabled span.checked,
.prestige div.checker.disabled:active span.checked,
.prestige div.checker.disabled.active span.checked {
    /*background-position : -261px -301px;*/
    background-position : -261px -451px;
}	


/*******************************************************************************************************************/
/* Enquete *********************************************************************************************************/
/*******************************************************************************************************************/

/*#enquete{ background:none; background-color:#f1f1f1 }*/
body#enquete, body#vitrine {
    font-family:helvetica, arial, sans-serif;
    background-image:url('/assets/tu-opinion/bebe/img/background.jpg');
    background-position:center top;
    background-size:cover;
    background-repeat:no-repeat;
}
body#enquete #header, body#vitrine #header {
    position: inherit;
    margin-bottom: 7em;
}
body#vitrine .operations .content {
    background-image: none;
    background-color: #FFF;
}nquete_content,
#enquete_content .qualifiante form,
#enquete_content .bloccoreg
{
    background-color:#fff;
    box-shadow : 0 0 5px rgba(0,0,0,0.05);
    border:1px solid #e3e3e3;
    margin-top:20px;
}
#enquete_content{ margin-top:0 }
#enquete_content .qualifiante form{
    padding:10px;
    margin-top:0;
}
#enquete_content .bloccoreg {
    border-top: 5px solid #000000;
}
/*#enquete_content .qualif-suiv{
    height:27px;
    background:url('/assets/conso-enquete/img/arrow-qualif.png') center 0 no-repeat;
}*/

#enquete_content .question {
    margin-bottom: 10px;
    font-size: 1.6em;
    /* font-weight: 300 !important; */
    color: #0e0e0e;
    line-height: 1.6em;
}
.long {
    width:340px;
}

/* Code postal et ville dans l'enquete' */

#enquete_content #cpv {
    float:right;
}

#enquete_content .fakecity,#enquete_content .fakecp {
    padding : 0 10px;
    height:40px;
    line-height:40px;
    margin-bottom:7px;
    border:none;
    font-weight:normal;
    font-size:14px;
    border: 1px solid #e3e3e3;
    width: 260px;
    background-color:#f1f1f1
}

#enquete_content .erreur2{
    display:inline-block;
    background-color:#e55454;
    padding: 5px 10px 5px 32px;
    color:#fff;
    font-size:14px;
    background-image: url('/assets/conso-enquete/img/picto-erreur.png');
    background-position:  7px center;
    background-repeat:no-repeat;
}	

/*******************************************************************************************************************/
/* ProgressBar *****************************************************************************************************/
/*******************************************************************************************************************/

#progressBar{
    padding:0 ;
    background : url('/assets/tu-opinion/bebe/img/bg-progressbar.png') 0 center repeat-x;
    height:42px;
    margin-top:4px;
}
.progressbar {
    background: #444444;
    height: 50px;
    position: relative;
    width: auto;
    z-index: 1;
    max-width:none;
}
.progressbar .container{ position:relative; }
.progressbar .bar {
    background : url('/assets/tu-opinion/bebe/img/progressbar.png') right 0 no-repeat;
    height:40px;
    margin-top:1px
}
.progressbar .percent {
    color: #000000;
    font-size: 18px;
    line-height: 30px;
    float: right;
    display: inline-block;
    width: 50px;
    height: 30px;
    text-align: center;
    margin-right: 20px;
    margin-top: 5px;
    font-weight: bold;
}
.progressbar .progress {
    color: #fff;
    font-size: 12px;
    left: 7px;
    position: absolute;
    top: 5px;
    display: none;
    width: 100px;
    font-weight: 300;
}


/*******************************************************************************************************************/
/* Droite enquête **************************************************************************************************/
/*******************************************************************************************************************/

#enqueteRight{
    border:1px solid #e3e3e3;
    z-index:2;
}

.enqueteRight p{
    text-align: center;
    font-size:16px;  
}

.enqueteRight p .rep{ margin-bottom: 7px; display:block}
.enqueteRight p .tir{ font-size:14px;  text-transform:uppercase; display:block; margin-bottom:7px}
.enqueteRight p .remp{ font-size:22px; text-transform:uppercase; font-weight:bold;}
.enqueteRight p .remp strong{ color:#007ac3; font-weight:bold; }


#wrapper div.selector.fixedWidth span{
    padding-right:50px;
}

@media screen and (max-width:1200px) {
    .enqueteRight p .remp{ font-size:22px }
}

/*******************************************************************************************************************/
/* Eléments de formulaire ******************************************************************************************/
/*******************************************************************************************************************/

/* Coreg OUI non */

.blocquestion strong {
    color: #000;
    /* font-size: 16px; */
}
.coreg_oui_non li label, .checkH li label, .checkV li label {
    background-color: #f1f1f1;
    border: 1px solid #e4e4e4;
    font-size: 1.5em;
}
.coreg_oui_non2 li label {
    display: inline-block;
    font-weight: 400 !important;
    color: #252325;
}
.checkV li label{ width:100%; }
.coreg_oui_non li label:hover, .checkH li label:hover, .checkV li label:hover, .checkH li label.active, .checkV li label.active {
    border-color: #174787;
}

.checkH li label.active, .checkV li label.active {
    background-color: #174787;
    border: 1px solid #4e97f9;
    color: #fff;
}
.checkV li {
    font-size: 1.1em !important;
    font-weight: 400 !important;
}
.coreg_oui_non li label.active{ 
    background-color:#808080;
    color:#fff;
    border-color:#6f6f6f;
}
.coreg_oui_non li label.active.label_oui{ 
    background-color:#007ac3;
    border-color:#007ac3;
}
.coreg_oui_non li label.label_non div.radio{ width:13px; height:13px; }
.coreg_oui_non li label.label_non div.radio span{
    width:13px;
    height:13px;
    background-position: -48px -293px;
}
.coreg_oui_non li label.label_non.active div.radio span{ background-position : -34px -200px }
.coreg_oui_non li label.label_oui div.radio{ width:16px; height:13px; }
.coreg_oui_non li label.label_oui div.radio span{
    width:16px;
    height:13px;
    background-position: -17px -293px;
}
.coreg_oui_non li label.label_oui.active div.radio span{ background-position : 0 -200px }

/* Bloc Radio et Checkbox */

.checkV li label:hover div.radio span,
.checkH li label:hover div.radio span{
    background-position: -20px -200px;
}

/* Bouton enquête */

.btn-enquete{ text-align:right;  }
.btn-enquete button {
    width: 265px;
    height: 60px;
    background: none;
    background-color: #174687;
    border: none;
    color: #ffffff;
    font-size: 22px;
    text-align: center;
    padding: 15px 0;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 3px;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    margin: 20px 0;
    text-transform: uppercase;
    box-shadow: none;
    border-radius: 0;
}


/* 4 couleurs de base ******************************************************************************************/

#enquete_content .color1{ color : #000 }
#enquete_content .color2{ color : #8090FF }
#enquete_content .color3{ color:#020202 }
#enquete_content .color4{ color: #77b251  }
#enquete #footer {
    position:inherit;
    background-color:transparent;
}