/* Common Styles */
*{padding:0; margin:0}
body{color:#000; font:0.9em; font-family:Calibri,arial}
p, div.para{line-height:1.4em;padding:0 0 10px 0}
a, a:link{color:#bf0000;text-decoration:none}
a:visited{color:#bf0000}
a:hover{text-decoration:underline}
a img{border:0}
ul{list-style:none}
ol{margin:0 0 0 20px;padding:0 0 0 10px}
label, textarea{display:block; float:left; width:250px}
input, select, textarea{border:1px solid #999; float:left}
input, select, label{margin:5px 0}
input::-moz-focus-inner {border:0;padding:0;}
label{clear:both}
fieldset span, fieldset a{display:block; float:left; margin:5px 0}
fieldset a{margin-left:5px}
h1{margin:10px 0 10px 240px}
table{border:1px solid #ccc}
table tr th{background-color:#ccc; margin:1px; text-align:left}
table tr td, table tr th{border-top:1px solid #ccc; margin:10px; padding:10px}
table tr td{background-color:#fff}
table tr.alt td{background-color:#eee}
table a:link, table a:visited{color:#000;text-decoration:underline}
table a:hover, table a:active{color:#bf0000;text-decoration:none}
div.noscript{background-color:#FFEBE8;border:1px solid #ff0000;display:block; margin:0 auto 10px auto; padding:10px; text-align:center; width:100%}

/* Structural Div's */
div#outerHeaderContainer{background:transparent url(../images/header_background.gif) top left repeat-x; height:100px; margin:0; width:100%}
div#headerContainer{border:0; height:100px; margin:0 auto; width:1000px}
div#outerContainer{margin:0px auto; width:1000px}
div#nav{border-bottom:1px solid #000; clear:both}
div#sideNavContainer{float:left; margin:0; padding:0 20px; width:200px}
div#sideNav{float:left; font-size:0.9em; margin:0 0 30px 0; padding:0; width:193px}
div#content{margin:0; padding:0; width:1000px}
div#mainContent{clear:right; float:left; padding:0; width:740px}
div#homepageContent{clear:right; float:left; padding:0; margin:20px 0 0 0; width:1000px}
div#footer{border-top:1px solid #ddd; clear:both;float:left;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:0.7em;margin:20px 0 50px 0;padding:5px 0;width:100%}
/* End of Structural Div's */

/* Header Container Styles */
div#header{padding:0px}
div#headerContainer a:link, div#headerContainer a:visited{text-decoration:none}
div#headerContainer a:hover, div#headerContainer a:active{text-decoration:underline}
div#header a{outline:none}
div#header ul{float:left; margin:0 0 5px 0; padding:0}
div#header ul li{border:1px solid #000; display:inline; margin:0 10px 0 0; padding:5px}
div#header ul li.active{border-bottom-color:#fff}
div#searchContainer{float:right}
div#logo{/*background:transparent url(../images/flowers.gif) top right no-repeat; */background:transparent url(../images/flowers_beta.gif) top right no-repeat; float:left; height:100px; margin:0; padding:0; width:600px}
div#logo a{outline:none}
div#logo a img{margin:30px 0 0 20px}
div#login_area{color:#fff;float:right; font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:0.7em;margin:5px 0 0 20px;text-align:left;width:360px}
div#login_area a{color:#fff; text-decoration:underline}
div#login_area a.forgot{float:left; margin:6px 0 0 0;}
div.NotLoggedInContainer{float:left;margin:5px 0 0 0}
div.NotLoggedInContainer a{margin:0; text-decoration:underline}
div.LoggedInContainer{font-size:1.1em; padding:7px 0 0 30px}
div.LoggedInContainer p{margin:5px 0 0 0}
div#loginInputBox{float:left; margin:0 3px 0 0; width:178px}
div#loginSubmitBox{float:left; width:175px}
div#loginSubmitBox label{margin:0}
div#Panel_RegisterArea, div#Panel_LoginArea{float:left}
div#Panel_LoginArea{border-bottom:1px solid #A53131; padding-bottom:5px}
div#Panel_RegisterArea{padding:9px 0 0 0; width:350px}
div#Panel_RegisterArea p{font-size:0.9em; width:100px}
div#Panel_RegisterArea a{font-size:1.0em; font-weight:bold; outline:none}
div#Panel_RegisterArea a:hover, div#Panel_RegisterArea a:active{text-decoration:underline}
div#login_area p{background-color:#FFEBE8;border:2px solid #ccc;color:#404040;line-height:1.2em;padding:3px 0 4px 6px}
div#login_area p a, div#login_area p strong{color:#404040}
span.validationSummary{color:#f00; margin:0 0 0 250px}
a.expandDown{background:transparent url(/images/down-arrow.gif) center right no-repeat;padding-right:14px}
div.menu-dropdown{background-color:#fff;border:2px solid #ccc;color:#333;padding:8px 0}
div.menu-dropdown div.header{border-bottom:1px dotted #333;margin-bottom:5px}
div.menu-dropdown div.gold{background-color:#FFC50A}
div.menu-dropdown div.silver{background-color:#BABABA}
div.menu-dropdown div.bronze{background-color:#EA7441}
div.menu-dropdown div.scoresBox{margin-bottom:2px;padding:5px}
div.menu-dropdown div.total{border-bottom:1px dotted #333;margin-bottom:7px}
div.menu-dropdown strong{color:#333;display:inline-block;padding:5px 10px}
div#headerContainer div.menu-dropdown a{display:block;color:#333;padding:5px 10px;text-decoration:none}
div#headerContainer div.menu-dropdown a:hover{background-color:#efefef}
/* End of Header Container Styles */

/* Form Styles */
fieldset.form{border:none;margin:10px 0;width:100%}
fieldset.form input{padding:3px;width:200px}
fieldset.form input.submit{background:#ddd url(/images/btn_standard.gif) top left no-repeat;border:0;height:20px;margin:10px 0 0 250px;padding:0;width:60px}
fieldset.form input.submit:hover{background-position: bottom left;cursor:pointer}
fieldset.form input.login{margin:20px 0 0 250px}
fieldset.form table.RadioList input{margin:0 5px 0 0; width:auto}
select{font-size:0.8em; padding:2px; width:auto}
div#header input{border:1px solid #A53131; float:left; margin:0}
div#adminContent input.timings{margin:0; width:auto}
div#header input.textbox{font-size:1.0em; width:170px}
div#header input.LoginInputBox{font-size:1.0em; font-family:"lucida grande",tahoma,verdana,arial,sans-serif; margin-bottom:4px; padding:2px; width:170px}
div#header input.passwordText{background:#fff url(../images/bg_password.gif) top left no-repeat}
div#header input.login{background:#f5f5f5 url(/images/btn_small.gif) top left no-repeat;border:none;font-size:1.0em;height:18px;width:50px}
div#mainContent input.login{background:#f5f5f5 url(/images/btn_standard.gif) top left no-repeat;border:none;height:20px;padding:0;width:60px}
div#header input.login:hover, div#mainContent input.login:hover{background-position:bottom left; cursor:pointer}
div#header span.checkbox input{border:none; margin:3px 0 0 3px}
div#loginSubmitBox label{clear:none; margin:3px 0 0 3px; width:auto}
div#mainContent input.loginPassword{margin-bottom:0}
div#mainContent span.keepLoggedIn{float:none; margin:0}
div#mainContent span.keepLoggedIn input{border:none; margin-left:250px; margin-right:5px; width:auto}
div#mainContent label.keepLoggedIn{clear:none; margin-top:2px}
div#mainContent a.forgot{outline:none; padding:0 0 15px 250px; margin:0}
div.validationBox{float:left;font-size:0.8em;}
div.invalidInput{background:#FFEBE8 url(/images/icon_warning.gif) center left no-repeat;border:1px solid #ff0000;margin:5px 0 0 5px;padding:3px 10px 3px 25px}
div.validInput{background:#fff url(/images/icon_tick.gif) center left no-repeat;border:0;height:16px;margin:10px 5px 5px 10px;padding:0 0 0 25px}
div.description{float:left;margin:0 0 8px 250px;font-size:0.8em;overflow:hidden;}
div.emailChecker{background:transparent url(/images/ajax-loader.gif) center left no-repeat;float:left;margin:10px 5px 5px 10px;padding:0 0 0 25px;font-size:0.8em;overflow:hidden;}
fieldset.form div.emailChecker a {margin:0;outline:none}
div.loading img{margin:5px 0 0 5px}
/* End of Form Styles */

/* Search Bar Styles */
div#searchBar{background-color:#ddd}
div#searchBarContainer{height:22px; margin:1px auto 0 auto; padding:2px 0 0 0;position:relative;width:1000px}
div#breadcrumb{float:left;font-size:0.8em; margin:0; height:20px; padding:2px 0 0 20px; width:660px}
div#breadcrumb a{color:#000; text-decoration:none}
div#breadcrumb a:hover{color:#bf0000; text-decoration:underline}
div#breadcrumb input{float:left}
div#breadcrumb ul, div#breadcrumb span{display:inline; float:left}
div#breadcrumb ul{width:550px}
div#breadcrumb ul li{display:inline}
div#breadcrumb span{margin:0 10px 0 0}
div#searchBarContainer input.searchText{border:1px solid #777; height:18px; margin:0; width:250px}
div#searchBarContainer input.searchButton{background:#ddd url(/images/btn_standard.gif) top left no-repeat;border:none;display:block;float:left;height:20px;margin:0 0 0 3px;padding:0;width:60px}
div#searchBarContainer input.searchButton:hover{background-position:bottom left;cursor:pointer}
div#searchBarContainer a.searchButton span{display:none}
/* End of Search Bar Styles */

/* Main Navigation */
div#mainNavContainer{margin:0 auto; width:1000px}
div#mainNavContainer ul{border-bottom:1px solid #ddd; height:43px; margin:1px 0 0 0}
div#mainNavContainer ul li{display:inline; float:left; width:194px}
div#mainNavContainer ul li a{color:#000;display:block;font-size:1.2em;font-weight:bold;height:35px;line-height:0.8em;outline:none;padding:8px 0 0 20px;text-decoration:none}
div#mainNavContainer ul li.first{width:222px}
div#mainNavContainer ul li.first a{background:transparent url(../images/home.gif) center left no-repeat;height:28px;padding:15px 0 0 35px}
div#mainNavContainer ul li a:hover{background-color:#FF9999}
div#mainNavContainer ul li a.current{background-color:#ddd}
div#mainNavContainer ul li a span{color:#000; font-size:0.7em; font-weight:normal}
/* Main Navigation */

/* Content Styles */
div#content h3{background-color: #fff;border-top:1px solid #fff}
div#mainContent ul li{list-style-type:circle; margin:0 0 0 20px}
div#mainContent h4{border-bottom:1px dotted #999; font-size:1.3em; margin:20px 0 10px 0}
div#mainContent ul{margin:10px 0}
/* End of Content Styles */

/* Nav Styles */
div#sideNav h3{background-color:#ddd;border-top:1px solid #fff;clear:both;float:left;width:164px}
div#sideNav h3 a:hover{background-color:#FF9999}
div#sideNav h3.active{background-color:#999;color:#fff}
div#sideNav h3.active:hover{background-color:#999}
div#sideNav h3 a{display:block;font-weight:normal;font-family:Tahoma,Verdana,Helvetica,Arial,sans-serif;font-size:13px;height:17px;line-height:1.3em;color:#000;padding:7px 10px;text-decoration:none;width:auto}
div#sideNav h3 a.current {color:#bf0000}
div#sideNav h3.active a{color:#fff}
div#sideNav div.expander{background:#ddd url(/images/arrow-down.gif) center right no-repeat;border-top:1px solid #fff;cursor:pointer;float:left;height:31px;width:25px}
div#sideNav div.expander:hover{background:#ddd url(/images/arrow-down-hover.gif) center right no-repeat;cursor:pointer}
div#sideNav div.expanderActive{background:#999 url(/images/arrow-up.gif) center right no-repeat;border-left-color:#bbb}
div#sideNav div.expanderActive:hover{background:#999 url(/images/arrow-up-hover.gif) center right no-repeat;border-left-color:#bbb}
div#sideNav div.expander span{display:none}
div#sideNav div.options{clear:both;width:189px}
div#sideNav ul{font-family:Tahoma,Verdana,Helvetica,Arial,sans-serif;font-size:12px;list-style:none}
div#sideNav ul li{background-color:#fff;background-position:center left;background-repeat:no-repeat;border-style:solid solid none none;border-width:1px 1px 0 0;border-color:#ddd;padding: 0 7px 0 0}
div#sideNav ul li.lastSideNav{border-bottom:1px solid #ddd}
div#sideNav ul li.active{background-color:#eee}
div#sideNav ul li.lesson{background-image:url(/images/outlinelesson-medium.gif)}
div#sideNav ul li.lessonComplete{background-image:url(/images/goldlesson-medium.gif)}
div#sideNav ul li.exerciseImageOutline{background-image:url(/images/outlineimages-medium.gif)}
div#sideNav ul li.exerciseImageBronze{background-image:url(/images/bronzeimages-medium.gif)}
div#sideNav ul li.exerciseImageSilver{background-image:url(/images/silverimages-medium.gif)}
div#sideNav ul li.exerciseImageGold{background-image:url(/images/goldimages-medium.gif)}
div#sideNav ul li.exerciseListenOutline{background-image:url(/images/outlinelisten-medium.gif)}
div#sideNav ul li.exerciseListenBronze{background-image:url(/images/bronzelisten-medium.gif)}
div#sideNav ul li.exerciseListenSilver{background-image:url(/images/silverlisten-medium.gif)}
div#sideNav ul li.exerciseListenGold{background-image:url(/images/goldlisten-medium.gif)}
div#sideNav ul li.exerciseWordOutline{background-image:url(/images/outlineword-medium.gif)}
div#sideNav ul li.exerciseWordBronze{background-image:url(/images/bronzeword-medium.gif)}
div#sideNav ul li.exerciseWordSilver{background-image:url(/images/silverword-medium.gif)}
div#sideNav ul li.exerciseWordGold{background-image:url(/images/goldword-medium.gif)}
div#sideNav ul li.exercisePhraseOutline{background-image:url(/images/outlinephrases-medium.gif)}
div#sideNav ul li.exercisePhraseBronze{background-image:url(/images/bronzephrases-medium.gif)}
div#sideNav ul li.exercisePhraseSilver{background-image:url(/images/silverphrases-medium.gif)}
div#sideNav ul li.exercisePhraseGold{background-image:url(/images/goldphrases-medium.gif)}
div#sideNav ul a{background: transparent url(/images/arrow-right.gif) center right no-repeat;color:#000;display:block;height:16px;padding:7px 0 7px 27px;text-decoration:none}
div#sideNav ul li ul{list-style:none; padding-left:15px}
div#sideNav ul a.active{background-image:url(/images/arrow-right-active.gif);color:#bf0000;font-weight:bold}
div#sideNav strong.score{font-size:0.9em}
div#footer ul li{display:inline}
div#nav ul{padding:10px}
div#nav ul li{display:inline; margin:0 20px 0 0}
ul#breadcrumb li{display:inline}
/* Nav Styles */

/* Footer Styles */
div#footer ul.left{float:left;padding:0 0 0 20px}
div#footer ul.left li{margin:0 15px 0 0}
div#footer ul.right{float:right;padding:0 20px 0 0}
div#footer ul.right li{margin:0 0 0 10px}
div#footer div.right{clear:both; float:right; margin:10px 20px 0 0}
div#footer a{color:#000}
/* Footer Styles */

/* Admin Styles */
div#adminContent{width:100%}
div#adminContent h1.adminTitle{margin:20px 0}
div#adminContent span, div#adminContent input, div#adminContent select{float:left; margin:5px 0; width:200px}
div#adminContent select{width:auto}
div#adminContent span{clear:both}
div#adminContent input.submit{clear:both; margin:0 20px 0 200px; width:auto}
span#breadcrumbStart{float:left; font-size:0.8em; margin:0 0 0 5px}
ul#breadcrumb{display:inline; font-size:0.8em; list-style:none; margin:10px 0}
ul#breadcrumb li{display:inline; margin:0 3px}
div#adminContent span.text{margin:0; width:auto}
div#adminContent input.standard{margin:0 0 0 10px; width:auto}
table.admin{text-align:left; width:100%}
table.admin tr th{background-color:#ccc; padding:5px}
table.admin tr td{border:1px solid #ccc; padding:5px}
p.additional{clear:both; padding:20px 0 0 0}
div#adminContent strong.adminSentence{display:block; float:left; width:150px}
div#adminContent div.sentences span{clear:none; display:block; float:left; font-weight:bold; margin:0; padding:0 4px 0 0; width:auto}
table.additional{border:1px solid #999; border-bottom:none; border-right:none; clear:both; margin:30px 0 0 0}
table.additional tr td, table.additional tr th{border-bottom:1px solid #999; border-right:1px solid #999; padding:5px}
div#adminContent input.autofill{clear:both; margin:30px 0 0 0}
div#adminContent input.changeTiming{margin:0; width:auto}
div#adminContent span#wordEffectStatus{clear:none; float:left; margin:0; padding:1px 0}
span.activeColorEffect{color:#F00}
span.activeHideEffect{color:#FFF}
div#adminContent a.adminSoundLink{float:left}
div#adminContent textarea{height:300px; width:435px}
div#adminContent span.checkbox{float:none}
div#adminContent span.checkbox input{width:auto}
/* End of Admin Styles */

/* Chapter Styles */
div#mainContent ul#chapters li{float:left;font-family:tahoma,verdana,arial,sans-serif;font-size:1.0em;list-style:none;margin:0 40px 30px 0;width:200px}
div#mainContent ul#chapters li a{color:#333333;display:block;height:25px;padding:155px 0 0 5px;text-decoration:none;width:195px}
div#mainContent ul#chapters li a:hover{color:#bf0000}
div#mainContent ul#chapters li div.iconsContainer a{border:1px solid #fff;display:block;float:left;height:auto;margin-right:3px;padding:0;width:auto} 
div#mainContent ul#chapters li div.iconsContainer a:hover{border:1px solid #ccc}
div#mainContent ul.chaptersLanding{list-style:none}
div#mainContent ul.chaptersLanding li{display:block; float:left; height:120px; list-style:none; margin:0 40px 60px 0; width:200px; text-align:center}
div#mainContent ul.chaptersLanding li a{outline:none; text-decoration:none}
div#mainContent ul.chaptersLanding li a:hover{background-position:bottom left}
div#mainContent ul.chaptersLanding li a img{border:1px solid #ddd}
ul.chaptersLanding li a.lessonIcon{background:transparent url(../images/lessonicon.gif) top left; display:block; height:120px; width:200px}
ul.chaptersLanding li a.exerciseIcon1{background:transparent url(../images/imagesicon.gif) top left; display:block; height:120px; width:200px}
ul.chaptersLanding li a.exerciseIcon2{background:transparent url(../images/listenicon.gif) top left; display:block; height:120px; width:200px}
ul.chaptersLanding li a.exerciseIcon3{background:transparent url(../images/wordicon.gif) top left; display:block; height:120px; width:200px}
ul.chaptersLanding li a.exerciseIcon5{background:transparent url(../images/phrasesicon.gif) top left; display:block; height:120px; width:200px}
ul.chaptersLanding li a.glossaryIcon{background:transparent url(../images/glossaryicon.gif) top left; display:block; height:120px; width:200px}
div#mainContent ul.chaptersLanding li a span{display:none}
div.iconsContainer{height:60px;margin:5px 0 0 5px}
div.iconsContainer div{background:transparent url(/images/green-tick.gif) center left no-repeat;clear:both;color:#009933;font-size:0.9em;padding:3px 0 3px 33px}
/* End of Chapter Styles */

/* Exercises Styles */
div#exerciseBgContainer{border:1px solid #ccc; clear:both; float:left; height:360px; margin:0; padding:auto 0; width:640px}
div#exerciseContainer{clear:both; float:left; height:360px; width:640px}
div#exerciseContainer div.left{clear:both; float:left; width:320px}
div#exerciseContainer div.right{float:left; width:320px}
div#exerciseContainer div.left div{cursor:pointer; float:right; height:140px; margin:5px; padding:1px; width:270px}
div#exerciseContainer div.right div{cursor:pointer; float:left; height:140px; margin:5px; padding:1px; width:270px}
div#soundContainer{background-color:#FFF; border:2px solid #999; height:190px; margin:50px auto 0 auto; padding:10px 0 10px 10px; width:310px}
div.soundWordBox{background-color:#fff; border:2px solid #999; clear:both; margin:0 auto 5px auto; padding:5px 0; width:330px}
div.inputBox{background-color:#fff;border:2px solid #999;font:0.9em "Arial,Verdana";margin:135px auto 0;padding:10px 0px 5px 10px;width:340px}
div#textContainer{clear:both;font-family:arial,sans-serif;padding:10px 0 0 0;text-align:center}
div#correctAnswerContainer{clear:both; text-align:center}
ul.soundAnswers{margin-left:200px; width:210px}
ul.soundAnswers li{border:1px solid #000; float:left; height:40px; margin:10px; width:80px}
div.loadingOverlay{background-color:#fff; border:1px solid #999;opacity:0.7;filter:alpha(opacity = 70)}
div.loadingOverlay img{margin-left:35%}
div.playlist{clear:both}
div.playlist a{clear:both; display:block; float:left; margin:7px 0; width:120px}
div.playlist span{cursor:pointer;display:inline;float:left;font-size:0.9em;padding:10px;width:125px}
.incorrect{color:Red; font-weight:bold}
.correct{color:#4CC552; font-weight:bold}
div.result{float:left}
div.result div.correct div{float:left; width:200px}
div#exerciseContainer div.result img.loading{border:0; float:left;margin-top:2px}
div#scoreContainer{clear:both; float:left; margin:0 5px 30px 0; padding:0 5px 0 0}
div#questionsAns{float:left; margin:0 0 10px 0}
div.pinyinContainer{background-color:#fff;position:absolute;width:190px}
table.pinyin{border:2px solid #999;clear:both;margin:0 auto;width:190px}
table.pinyin caption{background-color:#FFF; border:1px solid #999; font-weight:normal; font-size:0.8em; margin-top:5px; padding:3px; text-align:left}
table.pinyin th, table.pinyin td{background-color:#FFF; padding:2px}
table.pinyin td{border-top:1px solid #EEE; border-left:1px solid #EEE}
table.pinyin th{background-color:#DDD; text-align:center}
div.pinyinDescription{border:2px solid #999;border-top:0;font-size:0.8em;padding:3px;text-align:left;width:180px}
div.bestScore{border-left:1px solid #000;float:left;margin:0 0 0 20px;padding:0 0 0 15px;width:200px}
div.bestScore img{float:left;margin-left:5px}
div.bestScore div{float:left}
div.newBestScoreIcon{margin-top:20px}
div.newBestScoreIcon img{display:block;margin:auto}
/* End of Exercises Styles */

/* Lesson Styles */
div#lessonContainer{clear:both;height:360px;font-family:"Times New Roman";font-size:0.9em;font-weight:bold;text-align:center;width:640px}
div#whitewashOverlay{background:transparent url(../images/whitewash.png) top left no-repeat; height:360px; width:640px}
div#imageHolder{float:left; height:360px; overflow:hidden; width:260px}
div#topSentenceHolder{color:#666; float:left; font-size:1.9em; height:100px; margin:90px 0 0 0; width:360px}
div#topSentenceHolder p{background-color:#fff;line-height:1.0em;margin:10px 0 0 0;padding:5px}
div#bottomSentenceHolder{color:#666; float:left; font-size:1.9em; height:100px; margin:0; width:360px}
div#bottomSentenceHolder p{background-color:#fff;line-height:1.0em;margin:0; padding:5px}
div#lessonContainer span.highlight{color:Red}
div#lessonNumber{float:left;font-size:1.0em;padding:0;margin:3px 0;text-align:center;width:312px}
table#lessonSequencesTbl, table#lessonSequencesTbl tr, table#lessonSequencesTbl tr td{border:0;margin:0;padding:0}
table#lessonSequencesTbl{background-color:#fff;height:14px;width:640px}
table#lessonSequencesTbl tr td.seqBox{background:#fff url(/images/lesson_progress_not_finished.gif) top left repeat-x;height:14px;line-height:1px}
table#lessonSequencesTbl tr td.seqBox:hover{background:#ccc url(/images/lesson_progress_hover.gif) top left repeat-x}
table#lessonSequencesTbl tr td#seqBox0{margin-left:0px}
table#lessonSequencesTbl tr td.complete{background:#ccc url(/images/lesson_progress_finished.gif) top left repeat-x}
table#lessonSequencesTbl tr td.current{background:#ccc url(/images/lesson_progress_current.gif) top left no-repeat}div#lessonControls{clear:both; width:640px}
div#lessonControls a{color:#000}
div#playControls{display:block; float:left; margin:2px 0; padding:0; width:75px}
div#volumeControls{display:block; float:right; margin:2px 0; padding:0}
div#volumeBars{float:left; height:20px; overflow:hidden; width:30px}
div#volume1, div#volume2, div#volume3, div#volume4, div#volume5{border:1px solid #999; float:left; margin:0 1px 0 0; width:3px}
div#volume1{height:2px; margin-top:16px}
div#volume2{height:6px; margin-top:12px}
div#volume3{height:10px; margin-top:8px}
div#volume4{height:14px; margin-top:4px}
div#volume5{height:18px; margin-top:0px}
div#playControls a, div#volumeControls a, div#volumeControls div.volumeStatus, div#adminContent a#stopAdminSound{display:block;float:left;height:20px;margin:0 3px 0 0;outline:none;width:20px}
div.tooltip{z-index:9999}
div#playControls a span, div#volumeControls a span, div#adminContent a#stopAdminSound span{display:none}
div#volumeControls a.decreaseVolume, div#volumeControls a.increaseVolume{width:20px}
a.playPlaylistSound{background:transparent url(/images/icons/icon_play.png) top left no-repeat}
a.pausePlaylistSound{background:transparent url(/images/icons/icon_pause.png) top left no-repeat}
a.stopPlaylistSound{background:transparent url(/images/icons/icon_stop.png) top left no-repeat}
a.previousPlaylistSound{background:transparent url(/images/icon_previous.gif) top left no-repeat}
a.nextPlaylistSound{background:transparent url(/images/icon_next.gif) top left no-repeat}
a.stopAutoplay{background:transparent url(/images/icon_stop_autoplay.gif) top left no-repeat}
a.decreaseVolume{background:transparent url(/images/icons/icon_minus_volume.gif) top left no-repeat}
a.increaseVolume{background:transparent url(/images/icons/icon_plus_volume.gif) top left no-repeat}
div#completedOverlay{background-color:#000}
div#completedOverlay div#innerContainer{background-color:#fff;border:2px solid #999;padding:10px;width:300px}
div#completedOverlay div#innerContainer p{border-top:1px solid #666; margin-top:5px; padding-top:5px}
div#lessonControls a#modeControl {background:transparent url(/images/icon_speed_status.gif) center no-repeat;display:block;float:left;font-size:0.8em;height:20px;margin-top:2px;outline:none;text-decoration:none;width:120px}
div#lessonControls a#speedControls div, div#lessonControls a#modeControl div{padding:2px 0 0 5px}
div#lessonControls div#lessonOptions{border:1px solid #ccc}
div#lessonControls div#lessonOptions a{display:block;font-size:0.8em;padding:4px;text-decoration:none}
div#lessonControls div#lessonOptions a:hover{background-color:#efefef}
ul.actionList{}
ul.actionList li{background:tranparent url(/images/arrow_right.gif) center left no-repeat}
/* End of Lesson Styles */

/* Contact Control Styles */
div.contactPageText{float:left;padding-right:30px;width:450px}
div.ContactFormContainer{float:left}
div#content div.ContactFormContainer h3{background-color:#DDD; float:left; padding:5px; margin-bottom:5px; width:241px}
div.ContactFormContainer fieldset{background-color:#FFF; border:1px solid #DDD; padding:2px; width:250px}
div.ContactFormContainer fieldset label{clear:none; margin:0 10px 0 5px; width:auto}
div.ContactFormContainer fieldset input, div.ContactFormContainer fieldset textarea{border:1px solid #999;clear:both;margin:0 5px 10px 5px;overflow:hidden;padding:3px;width:233px}
div.ContactFormContainer fieldset a{margin:0 5px 5px 0}
div.ContactFormContainer fieldset input.submit{background:#DDD url(/images/btn_standard.gif) top left no-repeat;border:none;clear:both;display:block;float:right;height:20px;padding:0;outline:none;text-decoration:none;width:60px}
div.ContactFormContainer fieldset input.submit:hover{background-position: bottom left;cursor:pointer}
div.ContactFormContainer fieldset img.loading{float:right; margin:3px}
label.validation{color:#f00; font-weight:bold}
div.response{float:left; font-weight:bold; margin:0; padding:5px}
div.ContactFormContainer div.response a{font-weight:normal; margin:0}
/* End of Contact Control Styles */

/* Homepage styles */
div#homepageMainFeatures{float:left; height:400px; width:741px}
div#homepageRightFeatures{float:right; height:400px; width:200px}
div#homepageContent h1, div#homepageContent h2{color:#bf0000; font-size:1.4em; margin:0 0 20px 0; padding:0}
div#homepageContent h1 a{color:#bf0000; text-decoration:none}
div#homepageContent h2 a{color:#bf0000; text-decoration:none}
div#homepageContent h1 a:hover, 
div#homepageContent h2 a:hover{text-decoration:underline}
div#featuresContainer{background-color:#EEE; border:1px solid #999; border-bottom:0; width:739px}
div#featuresContainer div.feature{height:250px; padding:5px; width:730px}
div#featuresContainer img, div#featuresContainer div.innerBox{float:left}
div#featuresContainer div.innerBox{padding:10px}
div#featuresContainer div.imageBox{float:left; overflow:hidden; width:260px}
div#featuresContainer div.imageBox img{width:250px}
div#featuresContainer div.innerBox h1, div#featuresContainer div.innerBox p, 
div#featuresContainer div.innerBox h2{width:440px}
ul#featureTabs{border:0; list-style:none; margin:0; width:100%}
ul#featureTabs li{display:inline}
ul#featureTabs li a{background:#DDD url(../images/tab_shadow.gif) top left repeat-x; border:1px solid #999; border-right:0; display:block; float:left; font-size:1.2em; height:40px; padding:20px 0 0 0; outline:none; text-align:center; text-decoration:none; width:184px}
ul#featureTabs li a:hover{background-color:#f99; background-image:none; color:#333}
ul#featureTabs li a.active{background-color:#EEE; background-image:none; border-top:1px solid #EEE}
ul#featureTabs li a.last{border-right:1px solid #999}
div#content a.featureLearning{background:transparent url(/images/ph_learning_chinese.jpg) top left no-repeat;clear:both;color:#000;display:block;font-size:1.0em;height:41px;margin:0 0 20px 0;padding:159px 5px 0;text-decoration:none;width:180px}
div#content a.featureLearning:hover{background-position:left bottom}
div#content a.featureGraph{background:transparent url(../images/ph_graph.jpg) top left no-repeat;clear:both;color:#000;display:block;font-size:1.0em;height:190px;padding:5px;margin:0 0 20px 0; text-decoration:none; width:180px}
div#content a.featureGraph:hover{background-position:left bottom}
div#mainBanner{background: #fff url(/images/bg-main-banner.jpg) bottom right no-repeat;font-family:Calibri,arial;font-weight:bold;height:380px;padding:10px 0 0 20px;width:980px}
div#mainBanner h1, div#mainBanner h2{margin:0}
div#mainBanner h1{font-size:40px;color:#404040;line-height:40px}
div#mainBanner h2{font-size:28px;color:#D51316}
div#mainBanner ul{margin:59px 0 65px 10px}
div#mainBanner ul li{background:transparent url(/images/green-tick.gif) center left no-repeat;display:block;font-size:25px;height:28px;padding:0 0 0 40px;margin:0 0 5px 5px}
div#mainBanner a.bigLink{background:transparent url(/images/start-button.jpg) top left no-repeat;color:#fff;display:block;font-family:Calibri,arial;font-size:28px;font-weight:normal;height:87px;padding:6px 0 0 55px;text-decoration:none;width:307px}
div#mainBanner a.bigLink:hover{text-decoration:underline}
div.secondaryFeature{float:left; margin:20px 0; padding:20px 20px 0 0; width:980px}
div.separator{border-top:1px solid #ccc}
div.secondaryFeature img{float:right; padding:0}
div#slideShow{float:left; padding:0 20px 0 0;width:405px}
div#homepageLeft{float:left;margin-top:15px;width:790px}
div#homepageRight{border-left:1px dotted #ccc;float:left;font-family:Calibri,arial;margin-top:30px;padding-left:5px;width:200px}
div#homepageRight a{clear:both;color:#000;display:block;font-size:1.0em;height:35px;margin-bottom:10px;padding:145px 0 0 5px;text-decoration:none;width:195px}
div#homepageRight h4{font-size:1.4em;margin-bottom:5px}
#twtr-widget-1 .twtr-hd a, #twtr-widget-1 .twtr-tweet a, div#twtr-widget-1 div.twtr-ft a{display:inline;height:auto;margin:0; padding:0;width:auto}
#twtr-widget-1 div.twtr-hd h3{display:none}
div.homepageContent{border-bottom:1px dotted #ccc;clear:both;font-family:Calibri,arial;font-size:1.0em;line-height:1.5em;margin:20px 10px 0 0;padding:0 10px 20px 0;width:770px}
div.homepageContent h3{font-size:1.5em;margin:0 0 15px 0}
div.homepageContent strong{display:inline;margin:0;padding:0;}
div#content div.imageBox{background-color:#f6f6f6;border:1px solid #ccc;padding:5px}
div#content div.imageBox img{border:1px solid #ddd}
div#content div.imageBox div{clear:both;margin-top:5px;text-align:center}
div#content div.leftImage{float:left;margin-right:10px}
div#content div.rightImage{clear:right;float:right;margin-left:10px}
/* End of homepage styles */

/* Help page Styles */
select.help{border:1px solid #ccc; margin:10px 0 20px 0; outline:none}
select.help option{padding:0 10px 0 0}
div#mainContent ul#faq{clear:both; margin:0}
div#mainContent ul#faq li{list-style:none; margin:0 0 0 8px}
div.answer{background-color:#EEE; border:1px solid #CCC; margin:20px 0 0 0; padding:8px}
div#mainContent div.activeHelp{border:2px solid #f00}
div#mainContent ul#faq li a.active{color:#f00; font-weight:bold; text-decoration:none}
div#mainContent a.small{font-size:0.8em}
/* End of Help page Styles */

/* Demo page styles */
div#demoCategories{border-left:1px solid #bbb;overflow:hidden;width:100%}
div#demoCategories a{background:transparent url(/images/demo-step-arrow.gif) center right no-repeat;border-bottom:1px solid #bbb;border-top:1px solid #bbb;color:#000;display:block;float:left;height:17px;outline:none;padding:5px 14px 5px 10px;text-decoration:none;width:15%}
div#demoCategories a.last{background:none;border-right:1px solid #bbb}
div#demoCategories a.current{background:#ff9999 url(/images/demo-step-arrow-active.gif) center right no-repeat}
div#demoCategories a.complete{background:#eee url(/images/demo-step-arrow-complete.gif) center right no-repeat}
div#demoCategories a.lastComplete{background:#eee url(/images/demo-step-arrow-last-complete.gif) center right no-repeat}
div#demoCategories a.lastCurrent{background:none;background-color:#ff9999}
div#demoCategories a.lastLinkComplete{background:none;background-color:#eee;border-right:1px solid #bbb}
div#demoCategories a:hover{color:#333;text-decoration:underline}
div#demoSlides{clear:both;height:600px;margin:10px 0 0 0}
/* End of Demo page styles */

/* Site Map page styles */
div#sitemapContainer a:link,div#sitemapContainer a:visited{color:#000}
div#sitemapContainer a:hover,div#sitemapContainer a:active{color:#bf0000}
div#sitemapContainer ul{list-style:none; margin:0}
div#sitemapContainer ul li{list-style:none; margin:0}
div#sitemapContainer ul li ul li{margin:0 0 0 30px}
/* End of Site Map page styles */

/* Search page styles */
div#mainContent div#cse-search-results a{color:#404040}
div#mainContent div#cse-search-results iframe html body table{background-color:Red}
/* End of Search page styles */

/* IE6 Warning */
div.adverts{margin:0 0 20px 0}
div.footerAdverts{clear:both;padding:50px 0 0 250px}
div.ie6Warning{border:1px solid red;background:#FEEFDA;text-align:center;clear:both;height:75px;margin:0 0 10px 0;padding:0 0 10px 0;position:relative;width:640px;}
div.browserIcons{margin:0}
div.browserIcons div{width:72px;float:left;margin-top:10px}
div.ie6Warning div.warning{width:60px;float:left;margin:10px 0 0 5px}
div.ie6Warning div.warningText{width:275px;float:left;font-family:Arial,sans-serif}
/* End of IE6 Warning */

/* Blog styles */
div#blogContainer{float:left;padding-right:10px;width:660px}
div#mainContent h4.comments{clear:both;margin:30px 0 0 0}
div.blogArticle{margin-bottom:20px}
div.blogItem{border-bottom:1px dotted #333;margin-bottom:20px;padding-bottom:20px}
div.blogItem h2{color:#333}
div.commentBox{border-bottom:1px dotted #333;padding:15px 0;overflow:hidden}
div.commentBox div.commentAuthor{clear:both;float:left;width:150px}
div.commentBox div.commentText{float:left;width:430px}
div#commentsInput textarea#commentText{width:400px}
div#commentsInput div.error {color:#ff0000;float:left;margin:5px 0 0 10px}
div#commentsInput div.commentError{margin:0 0 0 250px}
div#commentsInput input.submit{clear:both}
div#blogContainer div#commentsInput img.loading{background:none;border:0;clear:none;display:inline;float:left;margin:12px 0 0 12px;padding:0}
div#sbContainer input.highlight, div#sbContainer textarea.highlight,div#blogContainer input.highlight, div#blogContainer textarea.highlight {border:1px solid #ff0000}
div#sbContainer,div#sbPlaceholder{float:left;overflow:visible;width:62px}
div#sbContainer span.fb_share_count_wrapper,div#sbContainer iframe{margin:10px 0}
div#sbContainer a.DiggThisButton, div#sbContainer a.sb-email{display:block;margin-top:10px;outline:none}
div#sbContainer div.emailBox{background-color:#fff;overflow:hidden;position:absolute}
div#sbContainer div.emailBox input, div#sbContainer div.emailBox textarea, div#sbContainer div.emailBox label{clear:both;display:inline;margin:0 0 0 10px;width:250px}
div#sbContainer div.emailBox label{margin-top:5px;width:auto}
div#sbContainer div.emailBox input.submit{background:#f5f5f5 url(/images/btn_standard.gif) top left no-repeat;border:none;clear:both;cursor:pointer;height:20px;margin:10px;width:60px}
div.emailBox p{margin:0 10px}
div.emailBox div.message{background-color:#ffffd9;border-bottom:1px dotted #999999;border-top:1px dotted #999999;margin:10px 0 10px 10px;padding:5px;width:240px}
div.emailBox a.close{display:block;float:left;margin-top:10px;outline:none}
div.emailBox div.messageError, div.emailBox div.emailError{color:red;float:left;margin-top:5px}
div.emailBox div.response{clear:both;float:left;padding:3px 0 0 10px}
div#sbContainer img.loading{background:none;border:0;clear:none;float:left;margin:12px 10px 0 0;padding:0}
div.fixed{position:fixed;top:0;}
div#blogContainer img{background-color:#f6f6f6;border:1px solid #ccc;clear:both;display:block;margin:10px auto;padding:5px}
div#blogContainer p, div#blogContainer div.para{padding:0 0 15px 0}
div#blogContainer div.small{font-size:0.8em}
div#blogContainer div.commentBox div.commentAuthor{font-size:1.1em}
div#blogContainer div.commentBox div.commentAuthor span{font-size:0.7em}
div#blogContainer div.commentBox div.commentRating{float:left;width:75px}
div#blogContainer div.commentBox div.commentRating div.ratingValue{float:right;font-size:0.8em;margin-right:2px;text-align:right;width:35px}
div#blogContainer img.loading, div#blogContainer div.commentBox div.commentRating img{background:none;border:0;clear:none;cursor:pointer;display:inline;float:right;margin:0 3px 0 0;padding:0}
div#blogContainer div.commentBox div.commentRating img.loading{clear:both;margin-top:5px}
div.commentRating div.negative{color:#ff0000}
div#blogContainer div.commentRating div.ratingResponse{clear:both;float:right;font-size:0.8em;margin:0;text-align:right;width:auto}
div#commentsInput{margin:50px 0 0 0}
div#blogContainer h3{margin-top:10px}
div#blogContainer div.commentResponse{float:left;margin:10px 0 0 10px}
div#blogContainer div.commentBox img.loading{float:left;margin-top:5px}
div.commentBox div.spamLink{font-size:0.8em;margin-top:20px}
div.commentBox div.spamLink a{display:block;float:left;margin-top:5px;outline:none}
/* End of Blog Styles */

/* Miscellaneous */
div.hrClear{clear:both; height:1px}
div.hrClear hr{display:none}
span.highlight{color:Red; font-weight:bold}
span.hide{color:#fff}
div#adminContent span.validationText{clear:none; padding:0 0 0 10px}
.tooltip, div#tooltipBox{background-color:#fff;border:1px solid #999;color:#000;display:none;left:0;margin-bottom:3px;padding:3px;position:absolute;top:0;z-index:3}
div#content a.playSound{background:#ccc url(../images/icons/icon_play.png) no-repeat scroll 0 50%;border:3px solid #ccc;color:#333;display:inline-block;font-family:"Times New Roman";font-weight:bold;outline:none;padding:0 3px 0 30px}
table a.playSound, div#content a.playSound:hover{text-decoration:none}
div#content a.pauseSound{background:#666 url(../images/icons/icon_pause.png) no-repeat scroll 0 50%;border:3px solid #666;color:#FFF;display:inline-block;font-family:"Times New Roman";font-weight:bold;padding:0 3px 0 30px;text-decoration:none}
div#content a.stopSound{background:#666 url(../images/icons/icon_stop.gif) no-repeat scroll 0 50%;border:3px solid #666;color:#FFF;display:inline-block;font-family:"Times New Roman";font-weight:bold;padding:0 3px 0 30px;text-decoration:none}
input.textInputExercise{border:1px solid #999; font-size:1.1em; height:20px; margin:0 5px 0 0;width:190px}
input.button{background:#f5f5f5 url(/images/btn_standard.gif) top left no-repeat;border:none;height:20px;padding:0;width:60px;margin:0 5px 0 0}
input.button:hover{background-position: bottom left;cursor:pointer}
span.searchHighlight{background-color:#f99}
div#lessonFeedback{float:left;padding:40px 0 50px 30px;width:270px}
div.lessonDescription, div.exerciseDescription{clear:both; float:left; margin:40px 0 0 0; width:350px}
div#mainContent div.lessonDescription h4, div#mainContent div.exerciseDescription h4{margin-top:0}
div#mainContent div.lessonDescription p, div#mainContent div.exerciseDescription p,div#mainContent div.lessonDescription div.para,div#mainContent div.exerciseDescription div.para{margin:0 0 20px 0}
div#cookiesNotEnabled, div.errorPara{background-color:#FFEBE8;border:1px solid #ff0000;margin-bottom:10px;padding:10px;text-align:center;width:100%}
p.createAccount{clear:both; margin-left:250px}
p.createAccount a{margin:0}
div#debuggingContainer{background-color:#eee;border:1px solid #ccc;font-size:0.8em;height:400px;left:0;overflow:auto;position:absolute;top:0;width:150px;z-index:9999}
div.registerPrompt{background-color:#FFFFD9;border-bottom:1px dotted #999;border-top:1px dotted #999;margin:20px 0 30px 0}
div.registerPrompt p{background-color:#FFFFD9;margin:0;padding:10px 20px}
div.dottedDivider{border-bottom:1px dotted #ccc;clear:both;height:2px}
div.errorPara{clear:both}
div#socialBookmarking{margin-bottom:10px}
div.fullClear{border:1px solid red;clear:both;display:inline-block;height:10px}
div.fullClear hr{display:none}