@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;
			/*background-image: url(graphics/USAL-Activity-Page-2014-12.jpg);
			background-repeat: no-repeat; */
			}
			
#banner	{ 
		padding: 12px 0 0 164px; 
		background-image: url(graphics/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(graphics/background.jpg);
			background-repeat: no-repeat; 
			}

.hidden {
    display: none;
}


		

.activity-item {
	position: absolute;
	top: 0px;
	left: 0px;
	/*opacity: 0.0; */   /*RESTORE THIS LINE!  */
}

.photo, .photo-2 {
    width: 418px;
	height: 317px;
	background-image: url(graphics/photoFrame.png);
	background-repeat: no-repeat;
	padding: 7px 0 0 11px;
	position: absolute;
	top: 140px;
}

.photo {
   /* opacity: 0.0;  */
	left: 45px;
}

.photo-2 {
    left: -179px;
}

.image{
	width: 422px;
	height: 323px;
	padding: 7px 0 0 11px;
	position: absolute;
	float: left;
	top: 46px;
	left:-4px;	
	background-image: url(graphics/photoFrame.png);
	background-repeat: no-repeat; 
}
}

.word-box {
    margin: 0;
    width: 418px;
    height: 317px;
    background-image: url(graphics/wordBox.png);
    background-repeat: no-repeat;
    padding: 25px 0 0 40px;
    position: absolute;
    top: 140px;
    left: 268px;
    color: #FFFFFF;
    line-height: 135%;
    list-style-type: none;
}

    .word-box > li {
        cursor: pointer;
    }

        .word-box > li:hover {
            color: #FFD633;
        }


.bttn > span {
    display: none;
}




.word-1, .word-2 {
    color:#7F190D;
	font-weight:bold; 
	font-size:36px; 
	position:absolute; 
	top: 526px;
	width:350px;
    opacity: 0;
}

.word-1 {
    left: 47px;
}
.word-2 {
    left: 900px;
}

.counter {
    background-image: url(graphics/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; */
}

.bttn-next {
    background-image: url(graphics/bttnNext.png);
    background-repeat: no-repeat;
    width: 64px;
    height: 36px;
    position: absolute;
    top: 532px;
    left: 0;
}

.bttn-next:hover { background-image:url(graphics/bttnNextx.png); }	
    

.bttn-back { 
    background-image: url(graphics/bttnBack.png);
    background-repeat: no-repeat;
    width: 22px;
    height: 36px;
    position: absolute; 
    top: 532px;
    right: 193px;
}

.bttn-back:hover { background-image:url(graphics/bttnBackx.png); }	



.topicName	{
	position: absolute;
	top: 20px;
	left: 50px;
	font-size: 20px;
	color: #1b3664;
	font-weight: bold;
	width: 705px;
			}

.instructions	{
	font-size: 16px;
	color: #000;
	position: absolute;
	top: 51px;
	left: 61px;
	width: 860px;
				}
				
.instructions2	{
	font-size: 16px;
	color: #000;
	position: absolute;
	top: 70px;
	left: 61px;
	width: 860px;
				}

.supText	{
	font-size: 16px;
	color: #1b3664;
	font-weight: bold;
	position: absolute;
	top: 107px;
	left: 49px;
	width: 860px;
			}

.supText.hidden{
	display:none;	
}








			
hr	{
	position: absolute;
	top: 89px;
	left: 50px;
	height: 1px;
	width: 860px;
	background-color: #b2b2b2;
	color: #b2b2b2;
	border: none;
	}
	
			
#photo1	{
		width: 418px;
		height: 317px;
		background-image: url(graphics/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(graphics/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(graphics/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(graphics/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(graphics/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(graphics/bttnHomex.png); }

a#bttnDictionary { 
					background-image: url(graphics/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(graphics/bttnDictionaryx.png); }

a#bttnStore { 
				background-image: url(graphics/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(graphics/bttnStorex.png); }

a#bttnQuit { 
				background-image: url(graphics/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(graphics/bttnQuitx.png); }

a#bttnActivityMenu { 
					background-image: url(graphics/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(graphics/bttnActivityMenux.png); }

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

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


a#bttnCheck { 
				background-image: url(graphics/bttnCheck.png);
				background-repeat: no-repeat;
				width: 100px;
				height: 36px;
				position: absolute; 
				top: 0px;
				left: 0px;
				}
a#bttnCheck span { display:none; }
a#bttnCheck:hover { background-image:url(graphics/bttnCheckx.png); }	

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

a#bttnPause { 
				background-image: url(graphics/bttnPause.png);
				background-repeat: no-repeat;
				width: 100px;
				height: 36px;
				position: absolute; 
				top: 469px;
				left: 47px;
				}
a#bttnPause span { display:none; }
a#bttnPause:hover { background-image:url(graphics/bttnPausex.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(graphics/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(graphics/bttnBackx.png); }	

#counter	{
			background-image: url(graphics/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(graphics/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(graphics/bttnNextx.png); }	

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

.readingTextBox{
	width: 374px;
	height: 312px;
	margin: 20px;
	padding: 0px 25px 0px 25px;
	overflow: auto;
	font-family: arial, Helvetica, sans-serif;
	font-size: 15px;
	background-color: #FFFFFF;
	border: 2px ridge #b0b1b3;
	position: absolute;
	top: 120px;
	left: 462px;
	line-height: 135%;
			}
.readingTextBoxOneColumn{
	width: 748px;
	height: 312px;
	margin: 20px;
	padding: 0px 25px 0px 25px;
	overflow: auto;
	font-family: arial, Helvetica, sans-serif;
	font-size: 15px;
	background-color: #FFFFFF;
	border: 2px ridge #b0b1b3;
	position: absolute;
	top: 120px;
	left: 58px;
	/*line-height: 135%; */
			}	
					
		
#videoHolder {
	position: absolute;
	top: 140px;
	left:45px;	
	background-image: url(graphics/photoFrame.png);
	background-repeat: no-repeat; 
}
#myAlternativeContent2{
	position: absolute;
	top: 6px;
	left: 10px;
}

table.center {
	margin: 0 auto;
  }
  
.blueBold { 
	color: #1B3664;
	font-size: 1.2em;
	font-weight: bold;
}

.MCform{
	width: 440px;
	position: absolute;
	top: 140px;
	left: 483px;
			}
.MCquestion{
	width: 420px;
	font-family: arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight:bold;
	position: relative;
	top: 0px;
	left: 0px;
	margin-bottom:20px;
			}	
			
.MCanswers{
	width: 420px;
	font-family: arial, Helvetica, sans-serif;
	font-size: 15px;
	position: relative;
	top: 0px;
	left: 0px;
	line-height: 115%;
			}	
			
.checkButtonDiv{
	position: relative;
	top: 0px;
	left: 0px;
}

label {
    display: block;
    margin-left: 20px;
	
}
input {
    float: left;
    margin-left: -20px;
    margin-right: 7px;
}