/*-----------Write fraction-------------*/
.math-box {
  display: inline-block;
  font-size:1.2em; margin-top: 0.5em;
}
.math-box .vstack {
  display: inline-block;
  position: relative; 
}
.math-box .vstack > div {
  position: relative;
  text-align: center;
  height: 0; 
}
.math-box .baseline-fix {
  display: inline-table;
  table-layout: fixed;
}
/*-----------Write fraction End-------------*/

.container{
    width: 90%;
    margin:0 auto; 
    position: relative;
    padding: 10px; 
	font-family:  verdana,"Myriad", "Myriad Pro", "Helvetica","Segoe UI", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:1em; line-height: 32px;
}
.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: 1em; position: relative; background: #F3F9FF; border: 1px solid #C4DFFF; letter-spacing: 1px; width: 35px; text-align: center; color: blue; outline: none; margin: 2px 0;  }
#question input[type="text"]:disabled { background: #fff; }

#question { height: 140px; }

.rep01, .rep02, .rep03, .rep04 { display: block; position:absolute!important; margin-top:0.1em; }  
.rep01 input, .rep02 input, .rep03 input, .rep04 input { position: relative; background: #fff; border: 1px dotted #ccc!important; letter-spacing: 1px!important; width: 25px;} 
.rep01, .rep03 { top:240px; } .rep02, .rep04 { top:260px;}

.rappel { font-family: calibri ; color:#c2c2c2; font-size:1em; font-style: italic; }

.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:1em; position: relative; z-index: 10; margin-top: -1.5em; margin-right: 12px; left: 125px;  }
.thiscolor{ color:#999 }
.thiscolor2{ display:inline-block; color:#2462bf }
ul {margin-left: 0; padding-left: 0;}
#question li{display:inline-block; margin-right:0.5em;}
/* #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;}
}