/* Global Declaration */

div.selector, 
div.selector span, 
div.checker span, 
div.radio span, 
div.uploader, 
div.uploader span.action {
    background-image: url(/assets/conso-enquete/img/ordinateur2/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;
}