/*this css is used for "test your knowledge" pages that include a form (interactive)*/


form{

	margin-left:1.5em;
	margin-bottom: 2em;
	width:90%;
	font-family:arial,geneva,sans-serif;
	border:medium solid gray;
	padding: 1em;	
}

form fieldset legend{
  background-color: gray;
  color: white;
  padding: 5px 10px;
  font-weight:bolder;  
  margin-bottom: 1em;
  margin-left: 1em;
}
form input{
	margin-top: .5em;
}

form aside#test_left{
	float:left;
	margin-bottom: 2em;
}
form aside#test_left div{
	margin-left: 2em;
	margin-top: 1em;
}
form aside#test_left span{
	margin-left: 2.5em;
	
}

fieldset{
	padding-bottom: 1em;
}
form#test_precedence_form label{
	float: left;
	width: 10em;
	text-align: right;
}
form#test_precedence_form input{
	margin-top: 0;
}
form#test_precedence_form div{
	margin-bottom: 0.5em;
}
form aside#test_right{
	float:right;
	margin-right: 4em;
}
form aside#test_right div{
	margin-top: 1em;
}
form aside#test_right span{
	display:block;
	margin-left: 2em;
}
#test_standards_form div{
	margin-top:1.5em;
}
#test_precedence_form div{
	margin-left: 3em;
} 
#buttonSubmit, #buttonReset{
	width: 13em;
}
input[type="button"]{
	width: 7em;
	margin-bottom: .5em;
}

/*max width up to 640px*/
@media only screen and (max-width: 768px) {
	form{
		margin-left: 0;
		border: none;
	}
	form aside#test_right{
		margin-right: 1em;
	}

	fieldset div input[type="text"]{
		width: 3em;
	}
	#buttonSubmit, #buttonReset{
		width: 100%;
	}
	#buttonSubmit{
		margin-bottom: .5em;
	}
}

@media only screen and (max-width: 479px) {
	form aside#test_right{
		float:none;
		margin-bottom: 2em;
	}
	form aside#test_right div{
		margin-left: 1em;
	}
	p#answer{
		padding-top: .5em;
	}
}