/*---BASICS-----------------------------*/

body {
    background: url(../images/bcgr.jpg) repeat-x #4d8611;
	font: 75%/1.4em Verdana, "Lucida Grande", sans-serif;
	margin: 0; padding: 0;
	color: #232323; 
	}
#wrapper{
	position: relative; width: 900px; margin: 0 auto;
	}
p {
	padding:0; margin:0;
	}
ul, ol, li { 
	list-style: none; padding: 0; margin: 0;
	}
.clear { 
	clear: both; height: 1px; line-height: 1px;
	}
a:link, a:visited, a:hover { 
	color: #232323; 
	}
a:link img, a:visited img { 
	border: none;
	}
a:focus, a:active, a:visited {
	outline: none; 
	}
#errorDisplay {
    padding: 100px 0 0 0;  
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
	}
#errorDisplay p {
	padding-bottom: 12px;
	}
.noUnderline {
	text-decoration: none;
	}



/*---TOP-----------------------------*/

#top { 
	position: relative; top: 0; left: 0; width: 900px; 
	height: 111px; /* relative to height next = where white starts */  
	}
#logoImg { 
    position: absolute; top: 4px; left: 11px; width: 150px; 
	}
h1.imageText { 
	position: absolute; width: 900px; text-indent: -999em; margin: 0; padding: 0;  
	background: url(../images/forEachWord.gif) no-repeat 186px 14px #5d740d; /* location to start text */ 
	height: 81px; /* height of green banner */ 
	top: 30px; /* where green banner starts at top - goes w height above */  
	}
#top a#headerLink {
	border: none;
	position: absolute;
	top: 70px;
	left: 330px;
	width: 285px;
	height: 30px; 
	}	
ul#menuTop {
	position: absolute; left: 363px; top: 7px; width: 530px; height: 18px; /*adj left & width (=893?) if add menu item + 3 places below + in footer*/ 
	}
ul#menuTop li {
	float: left; width: 60px; height: 18px; border-right: 1px solid #ffffd8;
	}
ul#menuTop li.subjects {
    width: 78px;
	}
ul#menuTop li.faq {
    width: 44px;
	}
ul#menuTop li.totals {
    width: 64px;
	}
ul#menuTop li.options {
    width: 75px;
	}
ul#menuTop li.press {
    width: 59px;
	}
ul#menuTop li.contact {
	width: 76px; 
	}	
ul#menuTop li.about {
	width: 64px; border-right: 0; /* border-right = thin white line between menu sections - don't want after last one */
	}	
ul#menuTop li a {
	display: block; width: 100%; text-indent: -999em; height: 18px;
	}
ul#menuTop li.home a {
	background: url(../images/topMenu2.gif) no-repeat 0 -18px; 
	}
ul#menuTop li.subjects a {
	background: url(../images/topMenu2.gif) no-repeat -429px -18px;
	}
ul#menuTop li.faq a {
	background: url(../images/topMenu2.gif) no-repeat -127px -18px;
	}
ul#menuTop li.totals a {
	background: url(../images/topMenu2.gif) no-repeat -170px -18px;
	}
ul#menuTop li.options a {
	background: url(../images/topMenu2.gif) no-repeat -233px -18px;
	}
ul#menuTop li.press a {
	background: url(../images/topMenu2.gif) no-repeat -304px -18px;
	}		
ul#menuTop li.contact a {
	background: url(../images/topMenu2.gif) no-repeat -357px -18px;
	}	
ul#menuTop li.about a {
	background: url(../images/topMenu2.gif) no-repeat -63px -18px;
	}
ul#menuTop li.home a:hover, body#index ul#menuTop li.home a { 
	background: url(../images/topMenu2.gif) no-repeat 0 0;
	}
ul#menuTop li.subjects a:hover, body#subjects ul#menuTop li.subjects a { 
	background: url(../images/topMenu2.gif) no-repeat -429px 0;
	}
ul#menuTop li.faq a:hover, body#faq ul#menuTop li.faq a { 
	background: url(../images/topMenu2.gif) no-repeat -127px 0;
	}
ul#menuTop li.totals a:hover, body#totals ul#menuTop li.totals a { 
	background: url(../images/topMenu2.gif) no-repeat -170px 0;
	}
ul#menuTop li.options a:hover, body#options ul#menuTop li.options a { 
	background: url(../images/topMenu2.gif) no-repeat -233px 0;
	}
ul#menuTop li.press a:hover, body#press ul#menuTop li.press a { 
	background: url(../images/topMenu2.gif) no-repeat -304px 0;
	}		
ul#menuTop li.contact a:hover, body#contact ul#menuTop li.contact a { 
	background: url(../images/topMenu2.gif) no-repeat -357px 0;
	}
ul#menuTop li.about a:hover, body#about ul#menuTop li.about a { 
	background: url(../images/topMenu2.gif) no-repeat -63px 0;
	}
body#index ul#menuTop li.home a, body#about ul#menuTop li.about a, body#index ul#menuTop li.home a:hover, body#about ul#menuTop li.about a:hover {
	/* cursor: default; */ 
	}





	
/*---CONTENT - FIRST PAGE (and some SECOND PAGE)----------------------------*/

.contentWrap { 
	float: left; width: 900px; padding: 0 0; 
	display: block;  
	}
.topPatch {   
	float: left; width: 900px; height: 10px; background-color: #ffffff; 
	}
.topPatch p {   
    line-height: 0px; /* for IE so height in topPatch above will work */    
	}	
.contentFirst { 
	background: url(../images/contentFirstBackground2.gif) repeat-y 0 0 #CBD48E; /* match light green bg color */
	}
#contentLeft {
	float: left; width: 152px; color: #ffffd8; text-align: center;
	margin-left: 10px;
	display: inline; /* for IE so no double-margin */
	}
#contentLeft p { 
	padding: 0px 6px; line-height: 1.5;
	}
p#tenGrains { 
	height: 3.4em; padding-top: 71px;  
	background: url(../images/wordGrains.gif) 0 10px no-repeat; 
	}
p#fiftyGrains { 
	height: 3.4em; padding-top: 72px;
	background: url(../images/wordGrains.gif) -152px 0 no-repeat; 
	margin-top: 15px;
	}
p#ricePile { 
	height: 4em; line-height: 1.2;
	background: url(../images/wordGrains.gif) -304px 0 no-repeat;
	padding-top: 56px; 
	margin-top: 12px; 
	margin-bottom: -10px; /* make sure middle section height = what determines height */
	}
#contentMid { 
	position: relative; float: left; width: 516px; padding: 0 10px; 
	}
#contentMid #yesterdayDonated {   
	background: url(../images/grainsDonated3.jpg) 0 0 no-repeat; 
	height: 80px;
	} 
#contentMid #yesterdayDonatedText {	 
	padding-top: 17px; 
	line-height: 1.4em;
	text-align:center;
	font-size: 14px !important;
	font-weight: bold;
    color: #ffffd8;
	}
#contentMid #yesterdayDonatedText a {
    color: #ffffd8;
	}	
#questionDisplay {
    height: 260px;    /* HEIGHT DISPLAY SECTION --- */   
    }
#questionDisplayAudio {
    position: absolute;
	left: 480px;
	}
#questionDisplayPage1Extra { /* EXTRA HEIGHT DISPLAY PAGE 1 */
    height: 18px;
	}
#questionDisplayTopMenuBar {
    height: 23px; 
	background-color: #5d740d;/*#96AA4B;*/
	line-height:14px; /*for ie*/
	}
#questionDisplayTopMenuBar table {
    color: #ffffd8;
    padding-top: 4px; 
	font-size: 100%;
	}
#questionDisplayTopMenuBar table p a {
    color: #ffffd8;	
    padding-top: 4px; 
    text-decoration: none;
	border:0; outline:0;
	font-size: 100%;
	}
#questionDisplayTopMenuBar table p a:hover { 
	font-weight: bold;
	}
#questionDisplayBottomMenuBar {
    height: 23px; 
	background-color: #5d740d;
	line-height:14px; /*for ie*/
	}
#questionDisplayBottomMenuBar table {
    color: #DFEA9A;/*#cbd48e;*/
	padding-top:4px;
	font-size: 100%;
	}
#questionDisplayBottomMenuBar table p a {
    color: #DFEA9A;	
    padding-top: 4px; 
	text-decoration: none;
	border:0; outline:0;
	font-size: 100%;
	}
#questionDisplayBottomMenuBar table p a:hover { 
	font-weight: bold;
	}
.questionDisplayChoices {
	margin: 0px 10px 0px 180px; 
	padding-top: 42px; /* margin-top not work with ff height */
	}
.questionDisplayChoices .hover {
	cursor: pointer;
	}
.questionDisplayChoices li {
	margin-bottom: 19px; 
	}
.questionDisplayChoices li a{ 
	text-decoration: none;
	color: #232323;
	}	
.questionDisplayChoices ol a:hover { 
	font-weight: bold;
	}	
#contentRight { 
	float: left; width: 187px; 
    line-height: 1.3em;
	}
h2#tHowToPlay { 
	height: 40px; width: 100%; font-size: 1px; text-indent: -999em; 
	margin:0; padding: 0;
    background: url(../images/tHowToPlay.gif) 50px 13px no-repeat;
	margin-bottom: -15px;
	}
#contentRight li { 
    list-style: disc inside; 
    padding: 18px 0px 0 8px; 
	margin:0;
	}	
#contentRight p { 
	padding: 25px 0px 0 8px; 
	margin:0;
	}
#pictureDisplay {
    position: absolute;
	}




/*---FIRST PAGE BOTTOM WHITE SPACE --------------*/

#homeWhiteSpace {
	clear: both; padding: 0; background-color: #ffffff;
	position: relative;
	height: 108px; 
	}
#homeWhiteSpace #giveMoreRice {
    position: absolute;
	top: 9px;
	left: 10px;
	}
#homeWhiteSpace #whereRiceDistributed {
    position: absolute;
	top: 55px;
	left: 10px;
	}
#homeWhiteSpace #inPartnership {  
    position: absolute;
	top: 9px; 
	left: 699px;
	}



	
/*---CONTENT - SECOND PAGE -----------------------------*/

.contentSecond {
	background: url(../images/contentSecondBackground2.gif) repeat-y 0 0 #CBD48E; display: block; 
	}
#contentSecLeft {
	float: left; width: 516px;
	margin-left: 10px;
	display: inline; /* for IE so no double-margin */
	}
#contentSecLeftTop {
	padding: 0px 10px 0px 10px;
	background-color: #c2ce79;  
	height: 55px; /* HEIGHT 2nd PAGE CORRECT/INCORRECT (goes w height of wordDisplay above) ---*/
	}
#correct {
    font-weight: normal;
	padding-top: 18px; 
	color: #536a03; /* same as vocab level */
	}	
#incorrect {
	font-weight: bold; 
    padding-top: 18px;
	}
#contentSecRight {
    position: relative; 
	float: left; width: 354px;
	background: url(../images/bowl.jpg) 71px 25px no-repeat;  
	}
#contentSecRight #ricePicture { 
	position: absolute; top: 60px; left: 106px; 
	}
#contentSecRight #amountThousands {
	position: absolute; top: 23px; left: 20px; 
	background: url(../images/iconsThousand.gif) no-repeat; 
	width: 45px; /* height set in style in html=how many hundreds to show */
	} 	
#contentSecRight #amountHundreds {
	position: absolute; top: 23px; left: 317px; 
	background: url(../images/iconsHundred.gif) no-repeat; 
	width: 45px; /* height set in style in html=how many hundreds to show */
	} 	
p#donatedAmount {
	font-size: 1.2em; color: #ffffd8; text-align: center; 
	margin: 288px 16px 6px 38px; 
	}
p#moreWays {
	font-size: 80%;
	margin-top: 18px;
	text-align: right;
}
p#moreWays a {
	color: #fff;
}


/*---SPONSORS (SECOND PAGE BOTTOM WHITE SPACE)----------------*/

#sponsorList {
	clear: both; padding: 0; background-color: #ffffff;
	position: relative;
	height: 110px;
	}
#sponsorList #leaderboard {
	position: absolute;
	top: 10px;
	left: 10px; 
	}
#sponsorList #leaderboard img {
	width: 728px;
	height: 90px; 
	}	
#sponsorList #adsPayFor {
	color: #777777; 
	font-size: .9em; 
	line-height: 1.2; 
	padding: 72px 0 0 765px
	}
#sponsorList #adsPayFor a {
	color: #777777; 
	}



/*---FOOTER-----------------------------*/
#footer {
	width: 100%; padding: 38px 0; color: #ffffd8; font-size: .9em; text-align: center;
	}
#footer ul {
	margin-left: 10px;
	}
#footer li {
	display: inline; margin: 0 7px 0 0px;
	}
#footer li a {
	border-left: 1px #ffffd8 solid; padding: 0 0px 0 10px;
	text-decoration: none; 
	}
#footer li.home a {
	border-left: none; padding-left: 0;
	}
#footer a:link, #footer a:visited, #footer a:hover {
	color: #ffffd8;
	}
#footer a:hover {
	text-decoration: underline;
	}
body#index #footer li.home a:hover,
body#subjects #footer li.subjects a:hover,
body#faq #footer li.faq a:hover,
body#totals #footer li.totals a:hover, 
body#options #footer li.options a:hover, 
body#press #footer li.press a:hover, 
body#about #footer li.about a:hover,
body#privacy #footer li.privacy a:hover,
body#banners #footer li.banners a:hover,
body#contact #footer li.contact a:hover {
	cursor: default; text-decoration: none;
	}
	



/*---SUBJECTS, LEVELS (SELECT)-------------------------------------------------------*/

#selectTopBar {
	clear: both; 
	background-color: #5d740d;
	height: 22px;
	margin: 0 10px;
	}
#selectTopBar p{
	color: #ffffd8;
	padding-top: 2px;
	text-align: center;
	}	
#selectContent {
	position: relative; 
	float: left; 
	height: 439px; 
	background: none; 
	width: 860px; 
	padding: 0 10px;
	}
#selectContent a:link, #selectContent a:visited, #selectContent a:hover {
	color: #536a03;
	text-decoration: none;
	}
#selectContent a:hover {
	font-weight: bold;
	}
#selectListSubjects {
	position: absolute; 
	top: 0px; 
	left: 40px;
	}
#selectListSubjects h3 {
	color:#536a03;
	font-weight: bold;
	margin: 35px 0 7px 0;
	font-size: 1.1em;
	}
#selectListSubjects p{
	margin-bottom: 2px;
	}
#selectListSubjects #column1{
	position: relative;
	float: left;
	width: 250px;
	}
#selectListSubjects #column2{
	position: relative;
	float: left;
	width: 250px;
	}
#selectListSubjects #column3{
	position: relative;
	float: left;
	width: 250px;
	}
#subjectsNote {
    position: absolute;
	top: 415px;
	width: 860px;
	color:#536a03;
	font-style: italic;
    text-align: center;
	}	
#selectListLevels {
	position: absolute; 
	top: 25px;
	left: 35px;
	}
#selectListLevels h3 {
	color:#536a03;
	font-weight: bold;
	margin: 0 0 15px 0;
	font-size: 1.1em;
	}
#selectListLevels p{
   	color:#536a03;
	padding-bottom: 1px;
	}
#selectListLevels #column1{
	position: relative;
	float: left;
	width: 150px;
	}
#selectListLevels #column2{
	position: relative;
	float: left;
	width: 150px;
	}
#selectListLevels #column3{
	position: relative;
	float: left;
	width: 150px;
	}
#selectListLevels #column4{
	position: relative;
	float: left;
	width: 150px;
	}



	
/*---ABOUT, FAQ, TOTALS, BANNERS, OPTIONS, PRESS, CONTACT-----------------------------*/

body#faq, body#privacy, body#totals, body#banners, body#press, body#options, body#contact { 
     background: url(../images/bcgrRepeat.jpg) repeat #4d8611;
	}	
#afContentWrap {
	width: 880px; padding: 10px 10px 0 10px;
	background-color: #ffffff; 
	}
#afSideBar {
    background: url(../images/faqContentBcgr.jpg) repeat-y; /* repeating for long pages */
	}
body#about #afSideBar {
    background: url(../images/aboutContentBcgr.jpg) no-repeat; /* just for shorter page about */
    }
#afContent {
	width: 658px; margin-left: 164px; padding: 30px 32px 25px 26px; background-color: #cbd48e;  /*ie6 problem with width at 660*/
	}
body#about #afContent {	
	height: 445px; /* fits rice grain picture on side for short page - 445 for 500 pic, 495 for 550 (for form)*/
	}
#afContent h2 {
 	margin: 0;  /* since 35 padding-top below on h3 */
	}
body#about #afContent h2, body#totals #afContent h2, body#options #afContent h2, body#banners #afContent h2, body#press #afContent h2 {
    margin-bottom: 24px; /* for when no h3 next  */
	}
#afContent h3 { 
	padding-top: 35px;
	font-size: 1.1em;
	}
#afContent p {
	margin: 0 0 20px 0; padding: 0; line-height: 1.5;
	}
#afContent button {
	margin-left:5px;
	}	
body#faq #afContent ul {
	margin-bottom: 12px;
	}
body#faq #afContent ul li { 
    list-style: disc inside; 
    padding: 0px 14px 6px; 
	}
body#faq #afContent ol li { 
    list-style: decimal;
	margin-left: 32px;
	padding-right: 14px;
	}	
body#about #afContent ol{
	margin: 0px 0px 18px 20px;
	}
body#about #afContent ol li{
	list-style: decimal inside;
	margin-bottom: 12px; 
	}
#afContentBottom {   
	clear: both; width: 900px; background-color: #ffffff;
	height: 10px; 
	}
#afContentBottom p {   
    line-height: 0px; /* for IE so height in afContentBottom above will work */    
	}	
body#totals table {
	line-height: 1.5;
	margin: 0 0 30px -10px;
	}
body#totals td,th {
	text-align: right;
	vertical-align: bottom;
	}		
body#totals th {
	font-size:110%;
	}	
body#totals #sideQuote {
	position: absolute;
	margin: 0; padding: 0; 
	top:200px;
	left:540px;
	background: url(../images/totalsQuote4.gif) no-repeat 0px 0px; 
	height: 320px;
	width: 320px; 
	}		
body#totals #sideQuote a#sideQuoteLink1{
	border: none;
	position: absolute;
	top: 190px; 
	left: 240px;
	width: 60px;
	height: 40px;
    }
body#banners #afContent img {
	margin: 20px 0 20px 20px;
	}
body#press #afContent p {
	margin: 35px 10px 0 0;
	}
body#press #afContent #pressSource {
	margin: 10px 0 40px 370px;
	}