@media (min-width:993px){
	#main {width:700px; padding-top:50px;}
	#question { width: 700px; margin: 25px auto;
	ol {margin-left:20px;}
	}
}
@media (max-width:992px){
	
	#main {width:94%;margin:0 auto; padding-top:10px}
	#question {
	width: 100%;
	}
	ol {margin-left:0px;}
	input[type="radio"] {display: none;}
	
}

#main {
	margin: 0 auto;
	font-family: 'Segoe UI',Helvetica,Arial,sans-serif;
	background-color:white;
	padding-bottom: 100px;
}



h1.test {
	padding:0;
	border-bottom:1px solid #666;
	font-weight:normal;
	font-family: 'Segoe UI',Helvetica,Arial,sans-serif;
	margin-bottom:5px;
	line-height: 1.2;
	margin-top:0;
}



#q {
	border:1px solid #fff;
	background-color:#fff;
	font-size:18px;
	line-height: 1.5;
	font-weight:bold;
	padding:15px;
}
#q.correct {
	border:1px solid #0c0;
	background-color:#CFC;
}

#q.wrong {
	border:1px solid #c00;
	background-color:#Fcc;
}

#q p {
	font-weight:normal;
	margin-bottom:0;
	margin-top: 0.5em;
}
#q img {
	display:block;
	max-width:250px;
	margin: 15px auto;
}

#q img.herb {
	width: 450px;
	height:300px;
	max-width:600px;
}

#qNum {
 text-align:right;
 margin: 10px auto;
 font-size:0.8em;
 font-weight:bold;
}

 
ol {
	font-weight:bold;
}
ol li {
	padding:5px 0;
}
ol li label {
	font-weight:normal;
}

label.correct {
	font-weight: bold;
}

label.wrong {
	color: #999;
	text-decoration: line-through;
}

#tip, #herbtip {
	font-size:0.9rem;
	line-height:1.5;
}

#tip {
	clear:both;
	margin-top: 75px;
	border:1px solid #999;
	padding:20px;
	visibility: hidden;
}
#tip p {
	font-size:0.8em;
}
#herbtip {
	clear:both;
	margin-top: 25px;
	border:1px solid #999;
	padding:20px;
	visibility: hidden;
}