* {padding:0;margin:0;background:0;}

html, body {background:silver; width:100%; height:100%;}

.nosel {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.content {padding:33px;}

.exercise .marker {background: blue; display:inline-block; width:20px;}
.exercise .marker.correct {background: green;}
.exercise .marker.wrong {background: red;}

/*[ singlechoice */

.choice #exercise-area {
    font-size:14px;
    background:white;
    position: absolute;
    top:0;
    left:580px;
    width:405px;
    height:100%;
}
.type2,.type2 div {color:black}

.type2 {
    
  background: white -webkit-linear-gradient(#d1e2dc, white); /* For Safari 5.1 to 6.0 */
  background: white -o-linear-gradient(d1e2dc, white); /* For Opera 11.1 to 12.0 */
  background: white -moz-linear-gradient(d1e2dc, white); /* For Firefox 3.6 to 15 */
  background: white linear-gradient(d1e2dc, white); /* Standard syntax */
    
}


.type2 .choice #exercise-area {
    top:0;
    left:0;
    width:580px;
    height:100%;
    background:transparent;
}

.type2 #background-image {
    position:absolute;
    top:0;
    left:580px;
}

.choice .question-area {
    padding-bottom:20px;
}

.choice .option-area {
     border-top:solid 1px #dddddd;
     padding:15px 0 5px 0;
}

.checkbox {
    display:block;
    cursor:pointer;
    padding-left:25px;
 }

.checkbox .marker {
    vertical-align: top;
    display:inline-block;
    width:25px;
    height:25px;
    margin-left:-30px;
    background: url(../gfx/sprite.png) no-repeat;
}

.checkbox.checked .marker{ background-position: 0 -50px;}
.checkbox.solution.checked .marker{background-position: -50px -50px ;}
.checkbox.solution .marker{background-position: -50px 0;}

.checkbox.disabled {cursor:default;}

.checkbox .text{
    display:inline-block;
    padding:5px 0 10px 5px;
}
.exercise .comment {display:block; padding-bottom:0.5em; color:#007465}
.exercise .comment.wrong {color:#cc0033}
.exercise .comment.correct {}
.exercise .control-area {
    position:absolute;
    bottom:0;
    right:0;
    width:100%;
    text-align:right;
    padding: 0 26px 8px 0;
 }
 .type2 .exercise .control-area {
    position:absolute;
    bottom:0;
    right:-405px;
    width:405px;
    text-align:right;
    padding: 0 26px 8px 0;
 }
 
.type2 #exercise-area{color:black;}


.finalTest #exercise-area h2
{
  margin: 0 0 1em 0;
  font-size: 1.2em;
}


.exercise #message-area {
    padding:15px 0 0 0;
    border-top:solid 1px silver;
}

.dragdrop {position:absolute;} 
.dragdrop .drag {
    width:155px;
    text-align:center;
    display:inline-block;
    font-size: 12px;
}

.dragdrop .drag .marker {
    width:15px;
    height:15px;
    display:block;
    position:absolute;
    right:0;
    bottom:0;
}

.dragdrop .drag.correct .marker {
    background: url(../gfx/sprite.png) no-repeat -0px -100px ;
}

.dragdrop .drag.wrong .marker {
    background: url(../gfx/sprite.png) no-repeat -50px -100px ;
}

.dragdrop #exercise-area {
    font-size:14px;
    background:white;
    position: absolute;
    top:330px;
    left:0px;
    width:985px;
    height:230px;
}


.dragdrop #drags-area {
    width:650px;
    height:100px;
    background:white;
    padding:15px 30px 0 30px;
    position:relative;
}

.dragdrop .drop {
    width:180px;
    height:30px;
    background:transparent;
    outline:solid 1px white;
    position:absolute;
    visibility:hidden;
}

.dragdrop #drops {
    position:absolute;
    left:0;
    top:0;
}

.dragdrop .dragging {
    background:pink;
}

.dragdrop  .question-area{
    padding:15px 30px 0 30px;
    width:650px;
    height:110px;
}

.dragdrop  #message-area {
    padding: 15px 30px 0 0;
    position:absolute;
    top:0;
}

.dragdrop  #info-area{
    position:absolute;
    left:253px;
    top:255px;
    width:460px;
    height:50px;
    border:solid 3px #008f7d;
    border-radius: .5em;
}
.dragdrop  #info-area p{padding:0.5em;}

.dragdrop  .control-area{
    position:absolute;
    right:50px;
    top:140px;
}

.dragdrop  .line div {
    border-top:solid 1px silver;
}

.dragdrop  .line  {
    padding:0 30px 0 30px;
}

.dragdrop .btn{margin:0 1em 1em 0}

.ui-state-disabled {
    background-image: none;
    opacity: 1;
}



#background-image,
#background-image .img1,
#background-image .img2 {
    position:absolute;
    top:0;
    left:0;
}


/*Typographie*/
body {color:#070707}
h1 {font-size:18px; font-weight:normal; margin-bottom:1em;}
p {line-height:150%;}



/***** Non Audio Window *****/
.nonAudioContainer {
    visibility: hidden;
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 365px;
    height: 200px;
    border-radius: 12px;
    background-color: #ffffff;
    padding: 6px;
}

.nonAudioContainer p {
/*  font-size: 1.2rem;*/
  color: black;
}
.nonAudioContainer .jspDrag {
    background:#00927f; 
    width:9px;
    border-radius: 4px;
}
.nonAudioContainer .jspVerticalBar {
   background:transparent;
}

.nonAudioContainer .jspTrack {
    background:#76c3b9; 
    width:9px;
    border-radius: 4px;
}

.nonAudioContainerHeader {
    width: 100%;
}

.nonAudioTitleBar {
    width: 100%;
    height: 30px;
    cursor: pointer;
    position: relative;
}

.nonAudioTitleBarText {
    cursor: pointer;
    color: #000000;
/*    font-size: 1.2rem;*/
    margin-left: 12px;
    line-height: 30px;
}

.btnNonAudioClose,
.btnNonAudioClose_hi {
    position: absolute;
    cursor: pointer;
    right: 3px;
    top: 6px;
    width: 16px;
    height: 16px;
    background: url(../gfx/btn_popup_close.gif) no-repeat scroll 0 0;
}

.btnNonAudioClose_hi {
    background: url(../gfx/btn_popup_close.gif) no-repeat scroll 0 -28px;
}

.nonAudioWhiteBG {
    width: 100%;
    height: 170px;
    background-color: #eaf6f4;
    top: 30px;
}

.nonAudioTextContainer {
    position: relative;
    left: 10px;
    top: 10px;
    width: 345px;
    height: 130px;
    /*background:url(../gfx/nonaudio_text_bg.gif);*/
}

.nonAudioTextContainerContent{
    position: relative;
    left: 3px; 
    top: 3px; 
    width: 345px;
    height: 130px;
}

.audioTextScroll {
    width:343px;
    height:140px;
    float:left;
    z-index: 1;
}
.audioText {padding-right:5px;}



.btnNonAudioNext_hi { background-position: 0 -12px; }


.btnNonAudioBack_hi { background-position: 0 -12px; }