/* Opération Mathématique */
.operation { display:block; width:150px; margin-left: 3.3em; }
.clearboth { clear: both; }
.opnum1{ display:block; width:100%; float:left; text-align:right; margin:0; padding:0; }
.signe { display:block; width:2%; float:left; text-align:right; margin:0; padding:0;} 
.opnum2 { display:block; width:98%; float:left; text-align:right; margin:0; padding-bottom:5px; border-bottom:1px solid #999; margin-bottom: 5px; }
.opnum1,.opnum2 { letter-spacing:12px; }

/* contenaire jeu */

.container{
    width: 90%;
    margin:0 auto; 
    position: relative;
    padding: 10px; 
	font-family:  "Myriad", "Myriad Pro", "Helvetica","Segoe UI", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:1.4em;
}
.textstyle {  font-family:"Comic Sans MS"; font-size: 0.8em; letter-spacing:2px; }
.container img{ max-width: 100%; }

.thisForm{ display:block; position:relative; margin-left:auto; margin-right:auto; text-align:center; border-top:1px solid #f0ede1; padding-top:0.5em;margin-bottom: 1em;} 
.goTo{ font-family:  "Myriad", "Myriad Pro", "Helvetica","Segoe UI", "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:1em; padding-bottom:0.2em; margin: 0 1em 0 0; border-bottom:1px solid #f0ede1; color:#bfb3f2; display:inline-block; letter-spacing:1px; }
.btnext {
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); color: rgba(0, 0, 0, 0.61)!important; cursor:pointer; border:none; font-family:  "Myriad", "Myriad Pro", "Helvetica","Segoe UI", "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:1em; border-radius:12px; padding:0.5em 0.7em; margin:0 0.3em; text-decoration:none; display:inline-block;
}
input[type="button"]{
   outline:none;
}
input[type="button"]::-moz-focus-inner {
   border: 0;
}
.back1 { background:#fc95df } .back2 { background:#ffe579; text-align:center; } 
.back3 { background:#95cefc }

.btnext:hover{
	 background:#eee; border:0.1em solid #e8e8e8; padding:0.35em 0.65em;
}

h3{font-size: 1.2em; font-weight: normal;}
/*#question{font-size: 3em; }*/
#btnCheck{font-size: 18px; background: #04A762; border:1px solid gray; padding: 5px 15px; color:white; margin-top:1.3em; }
#question input{font-size:0.9em; letter-spacing:11px; padding: 1px 3px 1px 0; border: none; border-bottom: 1px dotted #b7b7b7;  color: blue; outline: none; width: 100%; text-align: right; position:relative }
#question input[type="text"]:disabled { background: #fff; }

.rep00{ display: block; position:relative; width: 0;  } .rep00 input { height:0; border:0!important; }
.rep01, .rep02, .rep03, .rep04, .rep05, .rep06, .rep07 { display: block; position:absolute!important; width: 16px!important; top:215px; margin-top:0.1em; }  
.rep01 input, .rep02 input, .rep03 input, .rep04 input, .rep05 input, .rep06 input, .rep07 input { position: relative; background: #f5fdff; border: 1px dotted #ccc!important; letter-spacing: 1px!important;}
.rep01 input {  } 
.virgule { display: block; position:absolute; top: 215px; width:5px;  padding: 0 2px; }

.myinput { display:block; width:14px; float: right; margin: 0 9px 5px 3px;}
.large { margin-right:24px; }

.rappel { font-family:courrier, calibri ; color:#c2c2c2; font-size:0.7em; }
#question .myinput input { font-size:0.7em; color:#ffa2b6; border: 1px solid #d9d9d9; border-radius:3px; outline: none; width: 100%; padding: 1px; letter-spacing:1px;}

.wrong img, .correct img { display:block; float:right; position: absolute; top: 0; left: 0; z-index: 10; }
.wrong{color: red !important;}
.correct{color: #04A762 !important;}
#answer, #warning, #goodResult, #badResult{list-style: none; position:absolute; left: 150px; bottom:1em;}
#answer strong{color: #04A762;}
#warning{color: #FF2300;}
.pop { position:relative; display:inline-block;}

#thistrue { display:block; padding:3px 5px; border:1px solid #bbbaae; color:#00843c; background:#fff; font-size:0.5em; width: 8px; position: relative; z-index: 10; margin-top: 9px; margin-right: 12px; left: 1px; }
.thiscolor{ color:#999 }
.thiscolor2{ display:inline-block; color:#2462bf }

ul{padding-left:0;}
#question li{display:inline-block; width:100%;}

/* #question li:before { content: "• "; margin-right:0.5em; color: #b7b7b7; }*/
#question li img { max-width:61%; margin-right:1em;}
#goodResult{color:#00843c; font-size:1.2em;}
#badResult{color:#ff2a10; font-size:1.2em;}

.code2 #answer{color:red; font-size: 0.8em; text-align: center;}
#score{
    position: absolute;
    top: 10px;
    right: 30px;
    background: #C80800;
    color: white;
    padding: 3px 6px;
    text-align: center;
    width: 85px;
	font-size: 0.9em;    
}
#score strong{
	font-size: 1.3em;    
	background: #FFCBA4;
    display: block;
    padding: 14px;
    color: black;
    margin: -6px;
    margin-top: 12px;
    border-top: 1px solid white;}
	

	/*	-==========================- MOBILE -==========================-  */
@media screen and (max-width: 400px) {
	#question input{position:inherit; bottom:0;}
	#question li img { max-width:93%; margin-right:0;}
}