@charset "UTF-8";
/* CSS Document */

body	{
		font-family: Arial, Helvetica, sans-serif;
		background-color: #6c6c6c;
		font-size: 100%;
		color: #000;
		padding: 0;
		margin: 0;
		}
		
#container	{
			margin: 0 auto;
			padding: 0;
			width: 960px;
			height: 640px;
			text-align: left;
			position: relative;
			}
			
#banner	{ 
		padding: 12px 0 0 164px; 
		background-image: url(images/banner.jpg);
		background-repeat: no-repeat;
		height: 56px;
		}	
		
h1	{ display: inline; color: #333; font-size: 20px; line-height: 1.2em; }
h2	{ display: inline; color: #333; font-size: 16px; line-height: 1.9em; }		
			
#content	{
			width: 860px;
			height: 552px;			
			padding: 20px 50px 0 50px;
			position: relative;
			background-image: url(images/background.jpg);
			background-repeat: no-repeat;
			}
			
#topicName	{
	position: absolute;
	top: 19px;
	left: 51px;
	font-size: 20px;
	color: #1b3664;
	font-weight: bold;
	width: 705px;
			}
			
#instructions	{
				font-size: 16px;
				color: #000;
				left: 63px;
				position: absolute;
				top: 51px;
				width:790px;
				}
				
hr	{
	position: absolute;
	top: 89px;
	height: 1px;
	width: 860px;
	background-color: #b2b2b2;
	color: #b2b2b2;
	border: none;
	}
	
#supText	{
			font-size: 16px;
			color: #1b3664;
			font-weight: bold;	
			position: absolute;
			top: 107px;
			}
			
#photo1	{
		width: 418px;
		height: 317px;
		background-image: url(images/photoFrame.png);
		background-repeat: no-repeat;
		padding: 7px 0 0 11px;
		position: absolute;
		top: 140px;
		left: 45px;
		opacity:0.0;
		}
		
#photo2	{
		width: 418px;
		height: 317px;
		background-image: url(images/photoFrame.png);
		background-repeat: no-repeat;
		padding: 7px 0 0 11px;
		position: absolute;
		top: 140px;
		left: 45px;
		opacity:0.0;
		}		
		
#blankPhoto	{
		width: 418px;
		height: 317px;
		background-image: url(images/photoFrame.png);
		background-repeat: no-repeat;
		padding: 7px 0 0 11px;
		position: absolute;
		top: 140px;
		left: 45px;
		}	
		
#wordBox	{
		width: 418px;
		height: 317px;
		background-image: url(images/wordBox.png);
		background-repeat: no-repeat;
		padding: 25px 0 0 40px;
		position: absolute;
		top: 1000px;
		left: 268px;
		color:#FFFFFF;
		line-height: 135%;
		cursor: pointer;
		}				
		
		
/* Buttons */
a#bttnHome { 
				background-image: url(images/bttnHome.png);
				background-repeat: no-repeat;
				width: 52px;
				height: 32px;
				position: absolute; 
				top: 0;
				right: 288px;
				}
a#bttnHome span { display:none; }
a#bttnHome:hover { background-image:url(images/bttnHomex.png); }

a#bttnDictionary { 
					background-image: url(images/bttnDictionary.png);
					background-repeat: no-repeat;
					width: 75px;
					height: 32px;
					position: absolute; 
					top: 0;
					right: 178px;
					}
a#bttnDictionary span { display:none; }
a#bttnDictionary:hover { background-image:url(images/bttnDictionaryx.png); }

a#bttnStore { 
				background-image: url(images/bttnStore.png);
				background-repeat: no-repeat;
				width: 52px;
				height: 32px;
				position: absolute; 
				top: 0;
				right: 94px;
				}
a#bttnStore span { display:none; }
a#bttnStore:hover { background-image:url(images/bttnStorex.png); }

a#bttnQuit { 
				background-image: url(images/bttnQuit.png);
				background-repeat: no-repeat;
				width: 40px;
				height: 32px;
				position: absolute; 
				top: 0;
				right: 21px;
				}
a#bttnQuit span { display:none; }
a#bttnQuit:hover { background-image:url(images/bttnQuitx.png); }

a#bttnActivityMenu { 
					background-image: url(images/bttnActivityMenu.png);
					background-repeat: no-repeat;
					width: 119px;
					height: 31px;
					position: absolute; 
					top: 37px;
					right: 48px;
					}
a#bttnActivityMenu span { display:none; }
a#bttnActivityMenu:hover { background-image:url(images/bttnActivityMenux.png); }

a#bttnStart { 
				background-image: url(images/bttnStart.png);
				background-repeat: no-repeat;
				width: 100px;
				height: 36px;
				position: absolute; 
				top: 463px;
				left: 365px;
				width:100px;
				cursor: pointer;
				}
a#bttnStart span { display:none; }
a#bttnStart:hover { background-image:url(images/bttnStartx.png); }

a#bttnStart2 { 
				background-image: url(images/bttnStart.png);
				background-repeat: no-repeat;
				width: 100px;
				height: 36px;
				position: absolute; 
				top: 463px;
				left: 365px;
				width:100px;
				
				}
a#bttnStart2 span { display:none; }
a#bttnStart2:hover { background-image:url(images/bttnStartx.png); }



a#bttnListen { 
				background-image: url(images/bttnListen.png);
				background-repeat: no-repeat;
				width: 100px;
				height: 36px;
				position: absolute; 
				top: 469px;
				left: 47px;
				cursor: pointer;
				}
a#bttnListen span { display:none; }
a#bttnListen:hover { background-image:url(images/bttnListenx.png); }		

a#bttnNewWord { 
				background-image: url(images/bttnNewWord.png);
				background-repeat: no-repeat;
				width: 100px;
				height: 36px;
				position: absolute; 
				top: 469px;
				left: 365px;
				cursor: pointer;
				}
a#bttnNewWord span { display:none; }
a#bttnNewWord:hover { background-image:url(images/bttnNewWordx.png); }

a#w1:hover { color:#FFD633; }
a#w2:hover { color:#FFD633; }
a#w3:hover { color:#FFD633; }
a#w4:hover { color:#FFD633; }
a#w5:hover { color:#FFD633; }
a#w6:hover { color:#FFD633; }
a#w7:hover { color:#FFD633; }
a#w8:hover { color:#FFD633; }
a#w9:hover { color:#FFD633; }
a#w10:hover { color:#FFD633; }
a#w11:hover { color:#FFD633; }
a#w12:hover { color:#FFD633; }
a#w13:hover { color:#FFD633; }
a#w14:hover { color:#FFD633; }

#feedback	{
			font-size: 18px;
			color: #1b3664;
			font-weight: bold;
			position: absolute;
			top: 536px;
			width: 675px;
			left:900px; 
			opacity:0.0;
			}

a#bttnBack { 
				background-image: url(images/bttnBack.png);
				background-repeat: no-repeat;
				width: 22px;
				height: 36px;
				position: absolute; 
				top: 532px;
				right: 193px;
				}
a#bttnBack span { display:none; }
a#bttnBack:hover { background-image:url(images/bttnBackx.png); }	

#counter	{
			background-image: url(images/counter.png);
			background-repeat: no-repeat;
			width: 71px;
			height: 29px;
			position: absolute; 
			top: 532px;
			font-size: 13px;
			color: #1b3664;
			padding-top: 7px;
			text-align: center;
			left:772px;
			opacity:0.0;
			}
#xOf	{
			position: absolute; 
			top: 7px;
			left:-15px;
			color: #193662;
			font-size: 14px;
			font-weight: bold;
			font-family: Arial, Helvetica, sans-serif;
			text-align: center;
			width:100px;
		}

a#bttnNext { 
				background-image: url(images/bttnNext.png);
				background-repeat: no-repeat;
				width: 64px;
				height: 36px;
				position: absolute; 
				top: 532px;
				left: 0px; 
				opacity:0.0;
;
				}
a#bttnNext span { display:none; }
a#bttnNext:hover { background-image:url(images/bttnNextx.png); }	

/* Preloaders for button graphics */
#preload-01 { background: url(images/bttnHomex.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(images/bttnDictionaryx.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(images/bttnStorex.png) no-repeat -9999px -9999px; }
#preload-04 { background: url(images/bttnQuitx.png) no-repeat -9999px -9999px; }
#preload-05 { background: url(images/bttnListenx.png) no-repeat -9999px -9999px; }
#preload-06 { background: url(images/bttnPausex.png) no-repeat -9999px -9999px; }
#preload-07 { background: url(images/bttnNewWordx.png) no-repeat -9999px -9999px; }
#preload-08 { background: url(images/bttnNextx.png) no-repeat -9999px -9999px; }
#preload-09 { background: url(images/bttnBackx.png) no-repeat -9999px -9999px; }
#preload-10 { background: url(images/bttnActivityMenux.png) no-repeat -9999px -9999px; }
#preload-11 { background: url(images/bttnStartx.png) no-repeat -9999px -9999px; }


		
/* style below shifts positions to accommodate Learn New Words layout */
#LearnNewWords	{
				position: absolute;
				top: -55px;
				left: 224px;
				}
				
#word1	{
			color:#7F190D;
			font-weight:bold; 
			font-size:36px; 
			position:absolute; 
			top: 507px;
			width:350px;
			left:900px; 
			opacity:0.0;
			}
			
#word2	{
			color:#7F190D;
			font-weight:bold; 
			font-size:36px; 
			position:absolute; 
			top: 507px;
			width:350px;
			left:900px; 
			opacity:0.0;
			}			
						
a:link { color: #06528e; }
a:visited { color: #06528e; }
a:hover { color: #990000; text-decoration: none; }
a:active { color: #FF0000; }
									
.smallText{ font-size: .8em; }