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

.logo {
	float: left;
	height: 99px;
	width: 100px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-variant: normal;
	text-align: center;
}

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%; }

#mainContainer {
	font-size: small;
	border: 4px outset #D73434;
	background-image: url(../img/fondos/fondo_general.jpg);
	height: 820px;
	width: 900px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 10;
}


body {
	background-color: #FFC;
	font-family: Arial, Helvetica, sans-serif;
	border: 4px outset #D73434;
}
/*  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(../quizmo_demo_spanish/images/quizmo.png);
	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(../quizmo_demo_spanish/images/buttons/back_out.gif); background-repeat: no-repeat; }
#enterbutton { width: 50px; height: 46px; position: absolute; top: 279px; left: 171px; background-image:url(../quizmo_demo_spanish/images/buttons/enter_out.gif); background-repeat: no-repeat; }
#nextbutton { width: 88px; height: 64px; position: absolute; top: 261px; left: 240px; background-image:url(../quizmo_demo_spanish/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(../quizmo_demo_spanish/images/buttons/button_down.gif); background-repeat: no-repeat; }

.buttonGreen { background-image: url(../quizmo_demo_spanish/images/buttons/button_greendot.gif); background-repeat: no-repeat; }
.buttonRed { background-image: url(../quizmo_demo_spanish/images/buttons/button_reddot.gif); background-repeat: no-repeat; }
.buttonNormal {  background-image:url(../quizmo_demo_spanish/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; } 
.logo2 {
	float: right;
	height: 99px;
	width: 100px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-variant: normal;
	text-align: left;
	margin-right: 16px;
}