body { 
    font-family: Verdana, Helvetica, sans-serif; 
    font-size: 70%; 
    color:black;
    background:white; 
}

#logo { height: 120px; text-align: center; }
#logo h1 { display: none; }

.box { 
    height: 152px;      
    font-size: large;     
    background-image: url('images/question-inactive.png');   
    background-repeat: no-repeat;    
    background-position:  left center;
    padding-left:14px; padding-right:14px; padding-top:10px; padding-bottom:10px
}
.boxactive { 
    background-image: url('images/question-active.png');
}

.boxactive h3 {
    /*color: #fd9a68; this is unreadable on browser with no text-shadow support */
    text-shadow: 3px 3px 5px red;
}

#graphpanel { text-align: center; }
/* summar.php */
#tablepanel {
    padding:5px;      
    border: 2px solid gray; 
    background-color: #eee;    
    font-size: small;
    text-align: center;      
}
#tablepanel h1 { font-size: large; }
#tablepanel h2 {         
    font-size: 15px;
    font-weight: bold; 
    margin-bottom: 0.2em;            
} 
#tablepanel #header { text-align: left; margin: 0 1.5em 1.5em 1.5em; }
#tablepanel table {  	    
    border-style: ridge; 
    border-color: red;
    border-width: 1px;
    margin: 0em auto 1em;    
} 
#tablepanel td { padding: 0.2em; } 
#tablepanel th { width: 80px; }
#tablepanel td.main { color: blue ; font-weight:bold; width: 160px; }
#tablepanel td.sub { font-weight:bold; width: 160px; }

#menu {
    width: 15%;
    border: 2px solid gray; 
    background-color: #eee; 
    text-align: center;           
}
#menu ul { margin-top: 0.5em; text-align: left;}
#menu li { list-style-type: square; text-align: left;} 
/* end summar.php */
@media screen {
	#tablepanel { float: right; width: 83%; }
	#graphpanel { float:right; width: 514px; }
	#printonly { display: none; }
	div.box { display: block; /* this causes MSIE to do silly things: width: 95%; */ }
	div.boxactive { display: block; }
	
}
@media print {
	#questionpanel { }
	#graphpanel { }	
	#tablepanel table {}
	#tablepanel th { }
	#questionpanel h2, #graphpanel h2 { display: none; }
	#minigraph { display: none; }
	#btnRotate { display: none; }
	#screenonly { display: none; }	
	div.box { display: none; }
	div.boxactive { display: block; }
	#menu { display: none; }
	#tablepanel { border-style: none; }
	/*label { display: none; }
	label:active { display: inline; }	*/
}

#graph { position: relative; }
#minigraph { margin-bottom:1em; }
#graphpanel #img { width: 510px; height:512px;border: 2px solid black; margin-bottom: 1em;}

#questionpanel { }
#questionpanel h2, #graphpanel h2 {
	font-size: small;		
	color:blue; 
}
#questionpanel h3 {	
    font-size: small;
    font-weight: bold;          
    color: black; 
    padding-top: 0.5em;       
}
#questionlist { }

div.question{
    font-size: small;
    color: black;
    margin-bottom: 1em;
}
select.question {
	font-family: Verdana, Helvetica, sans-serif; 
	font-size: small;
    color: black;	
}

/*label:active, label:hover { font-weight: bold; background-color: black;color:white; }*/

#summary {
	border: thin solid black;
	visibility: hidden; 
	width: 514px;
    margin: 0 auto;
}
#summary table {    
    font-size: small;
    border: 1px solid black;
    width: 500px;
    margin: 0.5em auto;
    text-align: center;
}
#summary table td { text-align: center; width: 60px; }
#summary h3{ 
	color: blue; 
	font-size: small;
    font-weight: bold; 
    margin-top:0.7em;            
}

#all-summary-table { /* changed using JavaScript: display: none; */ }
#error { visibility: hidden; color: red; }

input.rotate { visibility: hidden; }
#btnRotate {
	position: absolute; 
	top: 490px; 
	left: 3px;
}

#typing { visibility: hidden; color: red; }
#typing.visible { visibility: visible; }

a{
	color: #00487D;
	font-weight: bold;
	text-decoration: underline;	
	font-size: small;	
}
a:hover{
	text-decoration: none;	
}

#screenonly, #printonly { clear: both; text-align: center; font-size: small; }