/* CSS Document */

/*###########################
#                           #
#   Main Styles             #
#                           #
###########################*/
/* Small header styles */
/*.mainHeader {
	background: url(../images/img_coursecntr_header.jpg) no-repeat top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-top: 110px;
	}*/

/* @group Left column */

.formSubmitphrase {
	background: url(../images/btn_submitphrase.gif) no-repeat left top;
	display: block;
	width: 192px;
	height: 27px;
	margin-right: auto;
	margin-left: auto; }
.formSubmitphrase:hover {
	background-position: 0 -30px; }
.formSubmitphrase span {
	display: none; }

/* @end */


/*###########################
#                           #
#   Middle column Styles    #
#                           #
###########################*/

.container2col .centerColumn .blckCont {
	padding: 10px; }
	* HTML .centerColumn .blckCont {
		height: 10px;
		}

.blckCont p {
	padding: 5px 0; margin: 5px 0;
	}

/* @group Category letters */

.catLetters {
	width: 100%;
	height: 39px;
	margin: 0;
	padding: 0;
	background: url(../images/bg_orangebar_spacer.gif) repeat-x 0 top;
	text-align: center; }
.catLetters .left, .catLetters .right {
	width: 14px;
	height: 38px; }
.catLetters .left {
	float: left;
	background: url(../images/bg_orangebar_left.gif) no-repeat left top; }
.catLetters .right {
	background: url(../images/bg_orangebar_right.gif) no-repeat right top;
	float: right; }
.catLetters a, .catLetters span {
	font: 18px Verdana, Arial, sans-serif;
	padding: 5px 6px 6px 7px;
	display: block;
	float: left;
	margin-top: 1px;
	color: #fff; }
.catLetters a {
	background: url(../images/bg_orangebar_link.gif) repeat-x 0 top;
	text-decoration: none; }
.catLetters a:hover {
	background-position: 0 -35px; }
.catLetters a.current {
	background-position: 0 -35px; }
.catLetters span.inactive {
	color: #aaa; }

/* @end */

/* @group Category names */

.catNames {
	background-color: #FDF5E8;
	margin-right: 14px;
	margin-left: 14px;
	padding-right: 5px;
	padding-left: 5px;
	border-bottom: 1px solid #f60;
	padding-bottom: 2px; }
.catNames a {
	font: 12px Arial, Helvetica, sans-serif;
	color: #000;
	text-decoration: none; }
.catNames a:hover { }
.catNames a:hover, .catNames .current {
	/*background-color: #f60;
	color: #fff;*/
	padding-bottom: 4px;
	background: url(../images/bg_linkborder.gif) repeat-x 0 bottom; }

/* @end */

/* @group In-page tabs */

ul.tabselect {
	height: 20px;
	margin: 10px 0 0; }

/* @end */

/* @group Phrase list */

.phraselist {
	width: 250px;
	margin-top: 0; }
.phraselist .middle {
	padding-top: 5px;
	font: 12px Arial, Helvetica, sans-serif;
	overflow-x: hidden;
	overflow: auto;
	height: 340px; }
.phraselist .bottom {
	clear: none; }
.phraselist ul {
	margin: 0;
	padding: 0;
	list-style-type: none; }
.phraselist li {
	margin-top: 3px;
	margin-bottom: 3px; }
.phraselist a {
	background: url(../images/icn_orangegrey12px.jpg) no-repeat left 2px;
	padding-left: 14px;
	color: #000;
	text-decoration: none; }
.phraselist a:hover {
	text-decoration: underline; }
.phraselist a.current, .phraselist a:hover {
	background-position: 0 -18px; }

/* @end */

/* @group Speech player */

.playerwrap {
	width: 440px;
	float: right;
	clear: right;
	margin-bottom: 10px; }
.speechPlayer {
	background: url(../images/bg_spchplyr_wrapspacer.jpg) repeat-y 0 top;
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 5px; }

/* @group Player top/bottom */

.speechPlayer .catTitle {
	background: url(../images/bg_spchplyr_ttlspacer.jpg) repeat-x;
	height: 19px; }
* html .speechPlayer .catTitle .catName {
	padding-top: 3px; }
.speechPlayer .titleLeft, .speechPlayer .titleRight {
	height: 19px;
	width: 10px; }
.speechPlayer .titleLeft {
	background: url(../images/bg_spchplyr_ttlLft.jpg) no-repeat left top;
	float: left; }
.speechPlayer .titleRight {
	background: url(../images/bg_spchplyr_ttlRgt.jpg) no-repeat right top;
	float: right; }

.speechPlayer .playerbottom {
	background: url(../images/bg_spchplyr_btmSpacer.jpg) repeat-x 0 bottom;
	margin: 0;
	padding: 0;
	position: relative; }
.speechPlayer .playerbottom,
.speechPlayer .plyrbotLeft, .speechPlayer .plyrbotRight {
	height: 6px; }
.speechPlayer .plyrbotLeft, .speechPlayer .plyrbotRight {
	width: 9px;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 0; }
.speechPlayer .plyrbotLeft {
	background: url(../images/bg_spchplyr_btmLft.jpg) no-repeat left bottom;
	left: 0; }
.speechPlayer .plyrbotRight {
	background: url(../images/bg_spchplyr_btmRgt.jpg) no-repeat right bottom;
	right: 0; }



/* @end */

/* @group Category title */
.speechPlayer .catTitle a {
	color: #fff;
	text-decoration: none;
	font: 10px Arial, Helvetica, sans-serif; }
.speechPlayer .catTitle a:hover {
	text-decoration: underline; }

/* @end */

.speechPlayer .phrases, .speechPlayer .controls, .speechPlayer .optionals, .feedback {
	width: 380px;
	margin-right: auto;
	margin-left: auto; }

/* @group "Display" colors */

.speechPlayer .displaytop {
	background: url(../images/bg_spchplyr_greyspacer.jpg) repeat-x;
	height: 5px;
	position: relative; }
.speechPlayer .displaytop .displleft {
	background: url(../images/bg_spchplyr_greylft.jpg) no-repeat left top;
	float: right;
	left: 0; }
.speechPlayer .displaytop .displright {
	background: url(../images/bg_spchplyr_greyrgt.jpg) no-repeat left top;
	right: 0; }
.speechPlayer .displaytop .displleft, .speechPlayer .displaytop .displright {
	width: 5px;
	height: 5px;
	top: 0;
	position: absolute; }
	
.speechPlayer .displaybottom {
	height: 7px;
	background: url(../images/bg_spchplyr_ylwspacer.jpg) repeat-x 0 bottom;
	position: relative; }
.speechPlayer .dispbotleft {
	background: url(../images/bg_spchplyr_ylwlft.jpg) no-repeat left bottom;
	left: 0; }
.speechPlayer .dispbotright {
	background: url(../images/bg_spchplyr_ylwrgt.jpg) no-repeat right bottom;
	right: 0; }
.speechPlayer .dispbotleft, .speechPlayer .dispbotright {
	height: 7px;
	width: 5px;
	position: absolute;
	bottom: 0; }

/* @end */
.speechPlayer .english {
	background: url(../images/bg_spchplyr_greyvspacer.jpg) repeat-y 0 top;
	color: #ffd;
	font: 12px/14px Arial, Helvetica, sans-serif;
	padding-bottom: 2px; }
.speechPlayer .english, .speechPlayer .chinese, .speechPlayer .pinyin {
	text-align: center;
	padding-right: 5px;
	padding-left: 5px; }
.speechPlayer .chinese, .speechPlayer .pinyin {
	background: url(../images/bg_spchplyr_ylwvspacer.jpg) repeat-y 0 top; }
.speechPlayer .chinese {
	font: 18px Arial, Helvetica, sans-serif;
	padding-top: 3px;
	padding-bottom: 3px; }
.speechPlayer .pinyin {
	font: 12px Arial, Helvetica, sans-serif;
	padding-top: 0;
	padding-bottom: 2px; }

/* @group Controls */

.speechPlayer .controls {
	margin-top: 5px;
	height: 26px; }
.speechPlayer .controls a {
	display: block;
	float: left;
	height: 26px; }
.speechPlayer .controls a span {
	display: none; }
.speechPlayer .cntrlPrevious, .speechPlayer .cntrlNext {
	width: 98px; }
.speechPlayer .cntrlPrevious {
	background: url(../images/bg_spchplyr_btnprev.jpg) no-repeat left top; }
.speechPlayer .cntrlPlay {
	width: 183px;
	background: url(../images/bg_spchplyr_btnplay.jpg) no-repeat left top; }
.speechPlayer .cntrlNext {
	background: url(../images/bg_spchplyr_btnnext.jpg) no-repeat left top; }
.speechPlayer .cntrlPrevious:hover, .speechPlayer .cntrlPlay:hover, .speechPlayer .cntrlNext:hover {
	background-position: 0 -26px; }
.speechPlayer .cntrlPrevious.active, .speechPlayer .cntrlPrevious:active,
.speechPlayer .cntrlPlay.active, .speechPlayer .cntrlPlay:active,
.speechPlayer .cntrlNext.active, .speechPlayer .cntrlNext:active {
	background-position: 0 -52px; }

/* @end */

.optionals {
	color: #fff;
	font: 10px/12px Arial, Helvetica, sans-serif; }

/* @group Feedback */

.feedback {
	height: 15px;
	margin-top: 3px; }
.feedback .report {
	font: 11px Arial, Helvetica, sans-serif;
	background: url(../images/icn_report.gif) no-repeat left;
	padding-left: 18px;
	float: left;
	padding-top: 4px;
	padding-bottom: 1px;
	display: none; }
.rating {
	width: 155px;
	float: left;
	position: relative; }
.rating span {
	color: #000;
	font: 11px Arial, Helvetica, sans-serif; }
.rating .ratethis:hover {
	background-position: 0 -15px; }
.rating .ratestars {
	float: right; }

.rating .ratepop {
	background: url(../images/bg_ratingpopup.png) no-repeat left top;
	width: 81px; height: 21px;
	position: absolute; left: 20px;
	padding: 3px;
	top: -2px;
	display: none; }
.rating .ratepop .ratingstar {
	background: url(../images/btn_ratingstar.gif) no-repeat left top;
	display: block; float: left;
	width: 15px; height: 15px;
	margin: 0; padding: 0; }
.rating .ratepop .ratingstar span {
	display: none; }
.rating .ratepop .ratingstar:hover {
	background: url(../images/btn_ratingstar.gif) no-repeat left -15px; }
.rating .ratepop .active {
	background: url(../images/btn_ratingstar.gif) no-repeat left -15px; }


/* @end */

/* @end */

/* @group Notezone */

.notezone {
	float: right;
	clear: right;
	width: 440px; }
.notezone p {
	margin: 0;
	padding: 2px 0; }
.notezone .endline {
	height: 1px;
	background-color: #f60;
	margin-bottom: 5px;
	margin-top: 5px; }
.notezone .question {
	background-image: url(../images/icn_help.gif); }
.notezone .search {
	background-image: url(../images/icn_search.gif); }
.notezone .question, .notezone .search {
	background-position: left 3px;
	background-repeat: no-repeat;
	padding-left: 18px;
	line-height: 16px; }
.notezone a {
	color: #f60;
	font-weight: bold;
	text-decoration: none; }
.notezone a:hover {
	text-decoration: underline; }

/* @end */

/* @group Submissions */

.submissions p, .submissions .endline {
	width: 500px; }
.submissions h4 {
	color: #f60;
	margin-bottom: 5px;
	padding-bottom: 0; }
.submissions .sentence {
	width: 300px; }
.submissions .endline {
	background-color: #f60;
	height: 1px; }

/* @end */