/* 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:lightgrey } 

/* 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; }
}

body {
    color: #333;
    font-family: Open Sans;
}

h1 {
    font-family: Open Sans;
    font-weight: bold;
    font-size: 2.5rem;
    margin: 0 0 20px 0;
    color: #333;
}

h2 {
    font-family: Open Sans;
    font-weight: bold;
    margin: 40px 0 10px 0;
    color: #333;
}

p {
    font-family: Open Sans;
}


div.question {
    width: 65%;
    float: left;
    padding: 4px 2%;
}

div.row_wrapper {
    width: 100%;
    margin: 20px auto;
    padding: 20px 0px;
    clear: both;
    border: 1px solid #ccc;
}

div.ansndep {
    width: 10%;
    float: left;
    padding: 10px 0;
    margin: 4px 1% 0 1%;
    background: #eee;
    text-align: center;
}

div.answer {
    width: 35%;
    float: right;
    padding: 10px 0;
    margin: 4px 1% 0 1%;
    background: #eee;
    text-align: center;
}

div.ansesa {
    width: 27%;
    float: left;
    padding: 10px 0;
    margin: 4px 1% 0 1%;
    background: #eee;
    text-align: center;
}

div.ansernie {
    width: 18%;
    float: right;
    padding: 10px 0;
    margin: 4px 1% 0 1%;
    background: #eee;
    text-align: center;
}