@charset "UTF-8";
/* CSS Document for Main Page */
/* Pedram Badakhchani 09.09.2010*/ 

* {margin:0; padding:0;}

html{ text-align : center; background:#E3D3A0 url(../img/repeat_theme_ic.png) repeat-y top center;}
body{	background:url(../img/body_top_theme.png) no-repeat top center; font : 75%/150% verdana, kai, arial, helvetica, sans-serif; text-align:left;}

#wrapper{ position:relative; margin: 0 auto; width:800px; left:32px;}

#banner{
	position: relative;
   background: url(../img/banner_theme.png) no-repeat top center; 
	width: 400px;
	height:150px;
	right:60px;
	top:5px;
	left:-55px;
	text-indent:-9999px;
	margin-top: 0em;

}

#theme_title{
	position: relative;
	left: -16px;
   background: url(../img/title_top.png) no-repeat top center;
   display:block;
	width: 800px;
	height:80px;
	margin-top:3em;
	margin-bottom:0em;
	text-indent:-9999px;
}

#ref_btn{
	float:right;
	padding-left: 5px;
    background: url(../img/reference_btn.png) no-repeat top center;
	display:block;
	width: 130px;
	height:40px;
	margin-top:-18.5em;
}

#ref_btn a{ color:#6D0101;	padding-left: 30px; text-decoration:none; }

/* breadcrumb navigation */
#breadcrumb{ padding-top: 5px; margin-left: -50px; float:left;  width: 100%;}
#breadcrumb ul#breadcrumb{ list-style:none; padding-left: 120px;}
#breadcrumb ul#breadcrumb li{ display:inline; background-image:url(../img/bullet_nav.png); background-repeat: no-repeat; background-position: 50% 50%,;}
#breadcrumb ul#breadcrumb li a{ padding: 3px 25px 3px 30px; margin-left:-15 px; font-size:1em; text-decoration: none; color:#000;}
#breadcrumb ul#breadcrumb li a:hover{ color: #4D4D4D;}

/* content */
#content{ float: left; margin: 0 0.5em 1.5em 0.3em; background-image: url(../img/content_back.png);}
/* mediaplayer */
#largePlayerContainer{ position:relative; width:250px; left:500px; top:-120px; margin-bottom:-1em;}
/* footer */
#footer{ clear: both; font-size: 0.8em; text-align: center; line-height: 1.3em; margin: 5em auto 0 auto;}
#footer a{ color:#6D0101;}


/* Font sizes only */
h1 {font-size:1.5em; margin-top:2em; } 
h2 {font-size:1.1em; } 
h3 {font-size:1em; }
p {font-size:1em;margin-bottom:0.8em;} 
/* html styles and hacks*/
.floatleft {float:left;}
.floatright {float:right;}
.block {display:block;}
.inline, form {display:inline;}
.centered {margin-left:auto; margin-right:auto; display:block;}
.centercopy  {text-align:center;}

#tabs{ margin:-0.5em 2em 1.3em auto; width:750px;}
/*removes dotted lines in anchor links in firefox*/
#tabs a { outline: 0;}
#tabs h2 {  padding-bottom:1em;}

#tabs-2, #tabs-3 {background-image:url(../img/act_panel_repeat.png);margin-top: 0px;margin-bottom: 40px; background-repeat: repeat-y;}

 /*need this to overwrite the default settings in jquery theme css */

.ui-widget  ul li p#chineseSortable  {
 /*border: 1px solid green;*/
	font-family: Kai, Lucida Sans, Arial, sans-serif; font-size: 1.1em; 
	font-size: 1.1em;
	color: #220000;
	margin-top:-5px;
}



.introImage{ float: left; padding-top:20px; padding-bottom:10px; width:365px; height:250px;}
	
#introductionParagraph{ margin: 1em 3em 1em 3em;}

#table{ width:730px; display: table; padding-top:10px;}
/*#table h2{ margin-top: -1.5em;}*/

#table ul{margin-left: 1.5em;}



#row{ display: table-row;}
#leftCell{ width:300px; display: table-cell; float:left;}
#innerLeftCell{ width:80px; display: table-cell;}
#innerMiddleCell{ width:80px; display: table-cell; font-size:.7em;}
#innerRightCell{ width:140px; display: table-cell;}
#rightCell{ width:300px; display: table-cell; float:right;}




#speakerName { display: table-cell;	width:100px; padding:0.1em;}
#speakerSentence { width:600px; padding:0.1em; display: table-cell;}

.audioActivitywrapper{ position: relative; float: left; left: 50px; width: 500px; margin-bottom: 15px; background-color: #ccc;}
.leftCell1{	position: relative; float: left; left: 0px; width: 88px; height: 88px; background-color: #ffc;}
.leftCell2{ position: relative; float: left; left: 15px; width: 88px; height: 88px; background-color: #ffc;}
.leftCell3{ position: relative; float: left; left: 30px; width: 88px; height: 88px; background-color: #ffc;}
.leftCell4{ position: relative; float: left; left: 45px; width: 88px; height: 88px; background-color: ffc;}
.leftCell5{ position: relative; float: left; left: 60px; width: 88px; height: 88px; background-color: #ffc;}


#sortableContainer{ width:720px; height:350px; padding-top:10px; display: table; background-image:url(../img/act_bottom.png); background-repeat: no-repeat; background-position: 100% 100%;}
#sortableContainerLeft{ display: table-cell; float:left; width:300px; padding-left:20px;}
#sortableContainerMiddle{ display: table-cell; float:left; width:330px;}
#sortableContainerRight{ display: table-cell; float:right; width:50px; padding-right:20px;}






/*sortableelements in activity 5*/
#sortable { list-style-type: none; margin: 0; padding: 0; width:90%; }
#sortable li { margin: 0 3px 5px 3px; padding: 0.5em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:pointer;}
#sortable li span { position: absolute; margin-left: -1.3em; }
#sortable li p{ font : 75%/150% verdana, arial, helvetica, sans-serif;}


#audioAndTextContainer{
	padding-bottom:4px;
	width:320px;
	height:40px;
	}
	
	
#audioAndTextContainer p {
	padding-left:10px;
	}
	

	
#textHolder{
	float:left;
	width:270px;
	height:28px;
	padding:5px;
   background-color:#dcdccf; 
	
	}


#activityAudio{
   background: url(../img/audio-icon.png) no-repeat 0 0; 
	display:block;
	height:40px;
	width:40px;
	text-indent:-9999px;
}

#transcriptCell{ display: table-cell; }

.togglePinyinButton{
	background: url(../img/helpIcons.png) no-repeat 0px 0px; 
	text-indent:-9999px;
	width: 100px;   
	height: 65px;
	float:right;
}

.toggleFeedback{
	background: url(../img/helpBtn.png) no-repeat 0px 0px; 
	text-indent:-9999px;
	width: 60px;   
	height: 40px;
	float:right;
	padding-bottom:0.3em;
}


.tickCrossButton { 	  
	background: url(../img/tick_cross.png) no-repeat 0px 0px;
	padding-bottom:3px;
	width: 40px;   
	height: 40px;	
}





#checkAnswers{
   background: url(../img/checkAnswers.png) no-repeat 0px 0px; 
	display:block;
	width:80px;
	
	height:40px;
	text-indent:-9999px;
	float:right;
	cursor:pointer;
}

#checkAnswers:hover{
   background-position:-80px;	
}




#resetAnswers{
	position:relative;
	top:-0.2em;
	left:-2em;
	margin-right:10px;
   background: url(../img/resetBtn.png) no-repeat 0 0; 
	display:block;
	width:40px;
	height:40px;
	text-indent:-9999px;
	float:right;	
}

#resetAnswers:hover{
   background-position:-40px;	
}





.feedback{ width:74%; margin:0 55px; background-color:#ede3c3;}
.feedback p.pinyin{ margin-left:40px; margin-bottom:-1px; }
.feedback p { margin-left:25px; }


.pinyin , p.pinyin a{ color: #906; text-decoration:none;}

p.pinyin a:hover{ color: #4f3e3e;}

.chinese , p.chinese a{
	font-family:Kai, verdana, arial, helvetica, sans-serif;
	text-decoration:none;
	font-size:1.5em;
	line-height:120%;
	margin-bottom:0.8em;
	
}

h2.chinese{
	font-family:Kai, verdana, arial, helvetica, sans-serif;
	text-decoration:none;
	font-weight:normal;
	font-size:1.5em;
	margin-bottom:0.9em;	
}

#textHolder p.chinese a{
	font-family:Kai, verdana, arial, helvetica, sans-serif;
	text-decoration:none;
	font-size:1.0em;
	line-height:110%;
	
	
}

 


p.chinese a:hover{ color: #837447;}

p.indented{	margin-left: 1em;}

.oddParagraph { color: #837447;}
.evenParagraph { color: #4f3e3e;}


/*highlight colours for language note section*/
.highlight1{ background-color: #d4dfe3;}
.highlight2{ background-color: #b0a072;}
.highlight3{ background-color: #eef0a7;}
.highlight4{ background-color: #bbb69c;}
.highlight5{ background-color: #d2b86d;}
.highlight6{ background-color: #fdfede;}





styles for the functions tabs  
#functionWrapperPrimary{
	position:relative;
	left:-0.5em;
	padding-top:1em;
	padding-bottom:3em;
/*	background-color:#FDFEDE;*/
	
}

#functionWrapperPrimary ul{
	margin-top:-1em;
	margin-left:4em;
	list-style-type:none;
	
}

#functionWrapperPrimary h1 {
	padding:0em 0.5em;
	margin-top:-0.5em;
	
}

#functionWrapperPrimary h2 {
	padding:1em 1em;
	
}

#functionWrapperPrimary h3 {
	padding:0.5em 1.5em;
	
}



#functionWrapperPrimary ul li {
	padding:1em 0;
	
}

#functionWrapperPrimary ul li a {
	text-decoration:none;
}

#functionWrapperPrimary ul li p.first {
	display:inline;
	
}

#functionWrapperPrimary ul li p.second{
	position:absolute;
	display:inline;
	padding-top:0.3em;
	left:18em;
	
}


/*for activity 2 tab 6 multiple choice*/

	
	
	.mchoice1 { width: 700px; height:1250px; background-image:url(../img/act_bottom.png); background-repeat: no-repeat; background-position: 100% 100%;}
		
		#questionContainer {
			position:relative;
			width: 650px;
			height:150px;
			margin-bottom: 0em;
			}
		#questionHeader {
			margin-bottom: -9px;
			margin-left:80px;
			padding-left: 20px;
			width: 493px;
			background-color:#e0e2be;
			}
			
		#questionHeader a {
			text-decoration: none;
			}
		
		#iconContainer { 
			float:left;
			padding-left: 1em;
			width: 60px; 
			}
			
		#hintContainer {
			margin-top:1px;
			position:relative;
			margin-left:80px;
			padding-left: 1em;	
			width: 500px; 	
			background-color:#e0e2be; 
		}
		
		#options{ width:720px; height:250px; padding-top:10px; display: table; background-color:#FCFED7; background-image:url(../img/act_bottom.png); background-repeat: no-repeat; background-position: 100% 100%;}
			
		#optionContainer { 
			position:relative;
			padding-top: 15px;
			margin-top:-50px;
			margin-left:50px;
			margin-bottom:20px;
			padding-left: 1em;
			padding-bottom: 1em;
			width: 550px; 
			height:80px; 
			background-color:#dcdccf; 
		}
		
	
				
		#audioHolder{	
			width:40px;
			height:40px;
			padding-left: 5px;
			padding-top: 5px;
	
		}
	
		#hintIconHolder{
			padding-top: 5px;
			width:60px;
			height:40px;
	
		}
		
		#activityAudio{
		background: url(../img/audio-icon.png) no-repeat 0px 0px;
		display:block;
		height:40px;
		width:40px;
		text-indent:-9999px;
		}
		
	#activityHint{
		background: url(../img/helpBtn.png) no-repeat 0px 0px; 
		display:block;
		width:60px;
		height:40px;
		text-indent:-9999px;
		cursor:pointer;
		}
		
#activityHint:hover{
		background: url(../img/helpBtn.png) no-repeat -60px 0px; 
	
		}
		
 #optionText{
	 padding-left: 1em;
	 }
	 
	 
.tickCrossbutton {  
	position:relative;
	left: 45em;
	background: url(../img/tick_cross.png) no-repeat 0 0; 
	width: 40px;   
	height: 40px;
	margin-top:-3em;
	}






#accordionWrapper {
	position:relative;
	left:-55px;
	width: 790px;
	margin-left: auto;
	margin-right: auto;
	/*border: 1px dotted teal;*/
	}

.accordionButton {	
	width: 790px;
	height:60px;
	float: left;
	_float: none;   /*Float works in all browsers but IE6 */
	 background: url(../img/accord_btn_panel.png) no-repeat top center;
	/*border-bottom: 1px solid #FFFFFF;*/
	cursor: pointer;
	}
	
.accordionButton h2 {
	padding-left: 9em;
	padding-top: 1.3em;
	}
	
.accordionContent {	
	width: 790px;
	float: left;
	margin-left:6em;
	_float: none;
	background: url(../img/section_repeat.png);
	/* Float works in all browsers but IE6 */
	/*background: #95B1CE;*/
	}
	
	
	
/***********************************************************************************************************************
 EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS
************************************************************************************************************************/

.on {
	/*background: #990000;*/
	background: url(../img/accord_btn_panel_on.png) no-repeat top center;
	}
	
.over {
	/*background: #CCCCCC;*/
	background: url(../img/accord_btn_panel_on.png) no-repeat top center;
	}