/* import stylesheets */
/*@import url("reset.css");
@import url("ie.css");*/

*.mobileonlyblock { display:none; }
*.exceptmobileblock { display: block; }
	
/*body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin:16px 2% 0 2%; }
	
h1 { color:blue; margin-bottom: 8px; font-size:200%; }
h2 { color:blue; margin: 24px 0 4px 0; font-size:150%; }

p { margin-top: 8px; }*/

div.row_wrapper { width: 90%; margin: 10px auto; padding: 0px; clear:both; border: 1px solid #ccc; }
div.row_wrapper:after { /* Clear floated contents */
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
	
div.question { width: 73%; float:left; padding:4px 2%; }
div.answer   { width: 23%; float:right; padding: 2px 2%; margin:4px 2% 4px 0; background:#eee; text-align:center; }

div.answer select { border: 1px solid #ccc; }

div.ndepQ { width: 36%; float:left; padding:4px; margin:0 1%; }
div.ndepQ.newline { clear:both; }
div.ansndep { width: 10%; float:left; padding:4px 0; margin: 4px 1% 0 1%; background:#eee; text-align:center; }
	
div.genQ { width: 50%; float:left; padding:4px 2%; }
div.genQ.newline { clear:both; }
div.ansgen { width: 45%; float:right; margin:4px 2% 4px 0; background:#eee; text-align:center; }

div.ernieQ { width: 58%; float:left; padding:4px 2%; clear:both; }
div.ansernie { width: 18%; float:right; margin:4px 2% 4px 0; background:#eee; text-align:center; }

div.esaQ {  float:left; width: 100%; padding:4px 2%; }
div.ansesa { width: 27%; float:left; margin:4px 0 4px 4.25%; background:#eee; text-align:center; }

.finalbox { 
  border:1px solid #C0C0C0;
  background-color:#FFFF99;
  color:black; 
  font-weight: bold;     
} 

.cyanbox { 
  border:1px solid #C0C0C0; 
  background-color:#CCFFFF; 
  color:black;
  font-weight: bold;     
} 

input.autocalc { border-width: 2px 8px; border-style: solid; border-color: white; }
input.autocalc:focus { border-color: lime; }

.lgfont { color:#737373 } 

/* Tweak layout to look OK on small screens (eg: mobile phones) */
@media screen and (max-width: 650px)
{
  *.mobileonlyblock { display:block; float:left; }
  *.exceptmobileblock { display: none; }
  *.mobileonlyclear { clear:both; }
  
  div.question { width: 100%; }
  div.answer { width:auto; float: left; margin-left: 10%; }
  
  div.ndepQ { width: 100%; clear:both; }
  div.ansndep { float:left; margin: 0 0 16px 10%; width:auto; }
 
  div.genQ { width: 100%; }
  div.ansgen { float:left; margin-left: 10%; }
  
  div.ernieQ { width: 100%; }
  div.ansernie { float:left; width: 30%; }
  div.ansernie + div.ansernie { margin-left: 2%; }
  div.ansernie.mobileonlyblock { float: left; margin-left: 10%; }
  div.ansernie.mobileonlyblock + div.ansernie.mobileonlyblock { margin-left: 2%; }
  div.ansernie + div.ansernie.mobileonlyclear { margin-left: 10%; }
  div.ansernie + div.ernieQ { margin-top: 24px; }
  
  div.ansesa { width: 40%; float:left; margin-left:10%; clear:both; }
}