/* 
	Style definitions used in:home.jsp	
*/

#main div{
	/*border: 1px dotted #ccc;*/
}

#banner{
	height:470px;
}

#banner .panel{
	width:958px;
}

#banner .panel .panelMiddle{
	width:956px;
	margin-top:-2px;
}

#images {
	width:951px;
	height:317px;
}
#animation {
	width:958px;
	height:317px;
}

#animation #movie{
	width:948px;
	margin-left:4px;
}

#animation #skipLink{
	bottom:10px;
	right:10px;
	z-index:2;
}

#images .layer{	
	width:100%;
	height:100%;
	position:absolute;
}

#bgLayer{
	/*background:transparent url(../../../images/module/home/images_bg.png) no-repeat;*/
}

#arrowLayer{
	background:transparent url(../../../images/module/home/arrow.png) no-repeat 95% 0;
}

.lessonCover, .lessonCover .coverImg{
	position:absolute;
	width:136px;
	height:106px;
}

#transparentLayer .mockDiv{
	width:100%;
	height:100%;
}

.blurImg{
	opacity:0.9;
	filter:alpha(opacity=90);
}

#bgLayer .loading{
	top:125px;
	left:440px;
}

.l1{
	top:0;
	left:0;
}
.l1 .lessonOverlay{
	top:53px;
	left:111px;
}
.l2{
	top:53px;
	left:136px;
}
.l2 .lessonOverlay{
	top:53px;
	left:111px;
}
.l3{
	top:0;
	left:340px;
}
.l3 .lessonOverlay{
	top:53px;
	left:111px;
}
/*
.l4{
	left:476px;
	top:53px;
}
.l4 .lessonOverlay{
	top:53px;
	right:101px;
}*/
.l4{
	top:0;
	left:612px;
}
.l4 .lessonOverlay{
	top:53px;
	right:101px;
}
.l5{
	top:53px;
	right:0;
}
.l5 .lessonOverlay{
	top:53px;
	right:101px;
}
.l6{
	bottom:0;
	left:408px;
}
.l6 .lessonOverlay{
	bottom:53px;
	left:111px;
}/*
.l8{
	bottom:53px;
	left:544px;
}
.l8 .lessonOverlay{
	bottom:53px;
	right:101px;
}*/
/*
.l7{
	bottom:0;
	right:136px;
} 
.l7 .lessonOverlay{
	bottom:53px;
	right:101px;
}*/

.l7{
	bottom:0;
	right:0;
}
.l7 .lessonOverlay{
	bottom:53px;
	right:101px;
}

.bannerTitle{
	position:absolute;
	bottom:53px;
	left:68px;
}

.bannerTitle img{
	width:339px;
	height:105px;
}

.lessonCover .lessonOverlay{
	width:415px;
	height:178px;
	z-index:2;
}

.lessonCover .lessonOverlay .overlayCover,.lessonCover .lessonOverlay .overlayCover img{
	float:left;
	width:211px;
	height:168px;	
}

.lessonCover .lessonOverlay .overlayContent{
	float:left;
	width:174px;
	height:158px;
	padding:5px;
}

.lessonCover .lessonOverlay .overlayContent div{
	float:left;
	width:100%;
}

.lessonOverlay .center{
	*width:395px;
}

.lessonOverlay .fadeBackgroundImage{
	*height:168px;
}

.overlayContent .name{
	margin-top:10px;
	height:100px;
	color:#434343;
	font-size:15px;
}

.overlayContent .instructor{
	font-style : italic; 
	font-size:13px;
}

#information{
	width:951px;	
}

#information #globalSearch, #information #instructorStart{
	float:left;
	width:46%;
	margin-left:4%;
}

#information .description{
	float:left;
	height:81px;
	margin-top:15px;
	width:100%;
}

#information .description div{
	float:left;
	width:100%;
}

#information .description .content{
	height:60px;
	font-size:14px;
	font-weight:normal;
}

#information .button{
	margin-top:10px;
	float:left;
}

#instructorStart .button{
	width:258px;
}

#globalSearch .button{
	width:105px;	
	margin-left:10px;
}

#globalSearch .middle div{
	float:left;
}

#globalSearch .input{
	float:left;
	height:30px;
	margin-top:15px;
	width:152px;
	*width:142px;
}

#globalSearch input{
	border:1px solid #ccc;
	float:left;
	height:22px;	
	padding-top:5px;
	width:152px;
	padding-left:5px; 
	*width:142px;
	*height:20px;
}

#homeClip{
	width:626px;
	float:left;
	margin-top:25px;
}

#home_flash{
	float:left;
	width:626px;
	height:357px;
}

#home_flash img{
	width:100%;
	height:100%;
}

#featureLessons{
	float:left;
	height:357px;
	width:320px;
	margin-left:11px;
	clear:right;
	margin-top:25px;
}

#featureLessons div{
	overflow:hidden;
	float:left;
}

#featureLessons .lessonList{
	height:322px;	
	overflow-y:auto;
	overflow-x:hidden;
	border-top:2px solid #D3D3D3;
	border-bottom:2px solid #D3D3D3;
	width:100%;
}

#featureLessons li{
	overflow:hidden;
	width:100%;
	height:49px;
	padding:15px 0;
	border-bottom:1px solid #DFDFDF;
}

#featureLessons .subTitle{
	width:100%;
	font-size:18px;
	margin-bottom:10px;
}

#featureLessons .cover{	
	width:86px;
}

#featureLessons .cover img{
	width:63px;
	height:50px;
	margin-left:10px;
}

#featureLessons .info{
	width:205px;
}

#featureLessons .instructor,#featureLessons .name,#featureLessons .rate{
	width:100%;
}

#featureLessons .name a{
	max-width:205px;
	width:205px;
}

#featureLessons .instructor span{
	float:left;
	margin-right:5px;
}

#featureLessons .instructor a{
	margin-left:5px;
	max-width:190px;
	width:190px;
}

#featureLessons .hoverBackground{
	background:transparent url(../../../images/module/home/feature_lessons_hvoer_bg.png) repeat-x;
}

#share{
	width:100%;
	float:left;
	margin-top:20px;
}

#share .line{
	height:1px;
}

#twitter,#facebook,#rss{
	float:left;
	width:32%;
	margin-right:1%;
	min-height:75px;
	padding-top:10px;
}

#share .intro,#share .siteLogo{
	float:left;
}
/*
#share .siteLogo{
	width:85px;
}
*/
#share .intro{
	padding-top:20px;
	font-size:14px;
}

#share .intro a{
	margin-left:10px;
}

#twitterWiget{
	width:200px;
	margin-top:-6px;
}

.twtr-doc{
	width:230px !important;
}

.twtr-widget p{
	font-family:Arial,Helvetica,sans-serif  !important;
	font-size:12px !important;
}

#twitter #twitterWiget .twtr-timeline i a{
	font-family:Arial,Helvetica,sans-serif  !important;
	font-size:12px !important;
	color:#810000 !important;
	margin-left:0px;
}

#twitter #twitterWiget .twtr-timeline i a:hover{
	color: #336699 !important;
	text-decoration:none !important;
}

.twtr-hd {display:none; }
.twtr-ft {display:none; }

/* HK >>> */ 
#information .subTitle { 
	font-size: 120%; 
} 
/* HK <<< */ 
#information .description .content{ 
    height:60px; 
    width: 400px; /* HK */ 
    margin-top: 4px; /* HK */ 
    line-height: 140%; /* HK */ 
    font-size:14px; 
    font-weight:normal; 
}

#overlay #content{
	float:left;
	background:transparent url(../../../images/module/home/win_video.png) no-repeat;
	position:fixed;
	z-index:1000;
	height:720px;
	padding:80px 25px;
	width:720px;
} 

#content pre{
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
	font-family:arial;
	font-size:14px;
	color:#565656;
	line-height:1.2;
}

#content .button{
	float:left;
	width:85px;
	margin-top:20px;
}

#content #closeIcon{
	background:transparent url(../../../images/module/dialogue/dialogue_close_btn.png) no-repeat;
	position:absolute;
	right:30px;
	top:15px;
	width:15px;
	height:15px;
}

.homePage #header .search{
	visibility:hidden;
}

.headTabDiv {
	border-bottom:1px solid #D3D3D3;
	height:7%;
	width:100%;
}

#tabFLessons {
	*width:122px;
}

#tabRPLessons {
	*width:163px;
}

.headTab {
	font-weight:bold;
	margin:0 1px;
	color:#810000;
	cursor:pointer;
	clear:none;
}

.headTab .leftHeadTab {
	background:url(../../../images/module/home/left_on.png) no-repeat;
	width:5px;
	height:26px;
	float:left !important;
}
.headTab .middleHeadTab {
	background:url(../../../images/module/home/mid_on.png) repeat-x;
	height:26px;
}
.headTab .rightHeadTab {
	background:url(../../../images/module/home/right_on.png) no-repeat;
	width:5px;
	height:26px;
	float:right !important;
}

.currentHeadTab {
	/*border-bottom:2px solid #000;*/
	color:#434343;
}

.currentHeadTab .leftHeadTab {
	background:url(../../../images/module/home/left_off.png) no-repeat;
	width:5px;
	height:26px;
	float:left !important;
}
.currentHeadTab .middleHeadTab {
	background:url(../../../images/module/home/mid_off.png) repeat-x;
	height:26px;
}
.currentHeadTab .rightHeadTab {
	background:url(../../../images/module/home/right_off.png) no-repeat;
	width:5px;
	height:26px;
	float:right !important;
}