/* CSS Document */
/*	takada.css

	Notes:
	All positioning is done using floats (no absolute positioning).

	We encounter the IE div spacing bug frequently, and use the "* html" hack to
	get around it. Layout is nearly identical in IE & FF.
	
	Anytime you make positioning changes, look for a corresponding "* html" rule for WinIE specific layout.
*/
/* debugging:
div { border: solid 1px red; }
*/

/*Zero the defaults
*/
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, a { 
	margin: 0; 
	padding: 0; 
	border: 0; 
}


/* global stuff */
.image { border: 0px; }
.clear { clear: both; }

.bold {font-weight: bold; }
.center { text-align: center; }
.indent { margin-left: 30px; }
.italic { font-style:italic; }
.underline { text-decoration:underline; }
li { margin-left: 50px; }


html { font-size: 100.01%; }

body { background-color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; }
/*  main div houses both all components of teh demo: the quizmo game piece, and the questions and answers below
*/
#demomain { width: 400px; margin-left: auto; margin-right: auto; }

/* the quizmo div is where the toy image shows up.
all of the button divs live inside the quizmo div*/
#game { width: 100%; height: 403px; background-image:url(images/quizmo.jpg); background-repeat: no-repeat; margin-bottom: 20px; position: relative; }
#buttona { width: 68px; height: 68px; position: absolute; top: 82px; left: 37px; }
#buttonb { width: 68px; height: 68px; position: absolute; top: 22px; left: 111px; }
#buttonc { width: 68px; height: 68px; position: absolute; top: 19px; left: 209px; }
#buttond { width: 68px; height: 68px; position: absolute; top: 75px; left: 283px; }
#backbutton { width: 89px; height: 62px; position: absolute; top: 266px; left: 62px; background-image:url(images/buttons/back_out.gif); background-repeat: no-repeat; }
#enterbutton { width: 50px; height: 46px; position: absolute; top: 279px; left: 171px; background-image:url(images/buttons/enter_out.gif); background-repeat: no-repeat; }
#nextbutton { width: 88px; height: 64px; position: absolute; top: 261px; left: 240px; background-image:url(images/buttons/forward_out.gif); background-repeat: no-repeat; }
.buttonletter { font-size: 36px; color: white; font-weight: bold; text-transform: capitalize; padding-left: 20px; padding-top: 15px; }
.button:hover { cursor: pointer; }
#buttondown { width: 68px; height: 68px; position: absolute; top: 82px; left: 37px; background-image:url(images/buttons/button_down.gif); background-repeat: no-repeat; }

.buttonGreen { background-image: url(images/buttons/button_greendot.gif); background-repeat: no-repeat; }
.buttonRed { background-image: url(images/buttons/button_reddot.gif); background-repeat: no-repeat; }
.buttonNormal {  background-image:url(images/buttons/button.gif); background-repeat: no-repeat; }


#screen { color: #222; width: 156px; height: 110px; position: absolute; top: 126px; left: 116px; }
#instructions { font-size: 80%; margin-left: 30px; margin-top: 10px; }
#result { font-size: 100%; height: 15px; margin-left: 40px; margin-top: 5px;}
#questionNum { font-size: 300%; width: 100px; text-align: center; margin-left: auto; margin-right: auto; }






/*	the question div where the quizmo questions and answers are
 */
 
#content { font-size: 150%; width: 390px; text-align: left; border-top: 1px solid grey;  border-bottom: 1px solid grey;  padding: 8px; }
#question { text-align: left; }
.answer { margin-left: 20px; }
#answerA  { margin-left: 15px; } 
#answerB  { margin-left: 15px; }
#answerC  { margin-left: 15px; }
#answerD  { margin-left: 15px; }