@charset "utf-8";
/* CSS Document */

body input[type="text"]{
	font-size: 15px;
	font-family:Verdana, Geneva, sans-serif;
	padding: 5px;
	border: 1px solid #8B92AF;
	margin: 1px;
}

/*true or false type*/
body form .true{
	color: #00915A;
	font-weight: bold;
}

body form .false{
	color: #C00;
	font-weight: bold;
}





/*-------------------------------*/
/* RADIO style*/
/*-------------------------------*/

/*body input[type="radio"] label{
	display:inline-block;
	padding: 5px;
	background-color:black;
}*/
/*Found out that the style does not apply for the elements added after the document ready*/

body input[type="radio"]{
	margin: 10px 5px 15px 5px;
	
	/*height:0px;
	width:0px;*/ /*only works in Chrome and IE*/
	
	/*visibility issue*/
	/*display:none;*/ /*cause tabbing problem*/
	/*visibility: hidden*/ /*cause tabbing problem*/
	opacity: 0;
}


body input[type="radio"] + label{
	background-image:url("img/comm_radio.png");
	background-repeat: no-repeat;
	background-clip:border-box;
	
	

	padding: 0px 0px 8px 31px; /*left-padding for space for radio image*/
	display:inline-block;
	max-width:750px; /*770px - padding-left*/
	
	cursor:pointer;
}

body input[type="radio"] + label > div{
	/* color changes by js*/
	padding: 7px 7px 7px 15px;
	background-color:transparent;
	
	/*partial background to create illusion 
	that radio graphic is over the label*/
	background-image:url("img/comm_radio.png"); 
	background-repeat:no-repeat;
	background-position: -31px 0px;
}

form input[type="radio"] + label:hover,
form input[type="radio"] + label.focusIn
{background-position: 1px -179px;}

form input[type="radio"] + label:hover > div,
form input[type="radio"] + label.focusIn > div{
	background-color: #EBEBEB;
	background-position: -30px 1px;
}

/*style when DONE with radio input*/
	/*correct*/
	body input[type="radio"] + label.correct{
		background-position: 0px -360px; cursor:default;}
	body input[type="radio"] + label.correct:hover{/*disable*/}
	body input[type="radio"] + label.correct > div{
		background-position: -31px -360px; cursor:default;}
	body input[type="radio"] + label.correct:hover > div{}

	/*disabled*/
	body input[type="radio"] + label.disabled{
		background-position: 0px -540px; cursor:default;}
	body input[type="radio"] + label.disabled:hover{/*disable*/}
	body input[type="radio"] + label.disabled > div{
		background-color:white;
		background-position: -31px -540px; cursor:default;}
	body input[type="radio"] + label.disabled:hover > div{}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* end: RADIO */
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/








body select{
	padding: 5px;
	font-size: 15px;
	font-family:Verdana, Geneva, sans-serif;
	border: 1px solid #8B92AF;
	margin:1px;
}

/* clickable image map*/
.clickable-imageMap {
	border: 1px solid #E8E8E8;
	border-radius: 3px;
	box-shadow: 2px 2px 3px #D7D7D7;

	cursor: pointer;
}

body .show_answer_btn{
	border: 0px solid;

}