@charset "utf-8";
/* CSS Document for the home page
Elateral colours

Elateral Red - #800000
grey text link - #454545
lighter gray text #636363;
light grey text - #929292
light grey - #e4e4e4

*/

/*--------------------------------------------------------- overide global */

#pageContent {
	padding:0 0 10px 0;
}

/*--------------------------------------------------------- home styles */
#sliderPanel {
	margin:0 0 10px 0;
}
#welcomeContainer {
	float:left;
	width:454px;
	padding:0 0 10px 20px;
}
/*------------------------------------------------------ banner panels*/

#bannerContainer {
	position: relative;
	height: 191px;
	margin:0 0 10px 0;
	}
	
	#bannerContainer div{
		position:absolute;
		top: 0;
		left:0;
	}
	#banner1 {
	    background-color:#fff;
	}
	#loadingDiv {
	    background-color:#e3e3e3;
	    height:168px;
	    width:950px;
	}
	#bannerContainer ul, #bannerContainer li {
		margin: 0;
		padding: 0;
		}
	#bannerContainer ul {
		position: absolute;
		top:155px;
		left:20px;
		background:url(../images/new/home-panel/bg-nav-sprite.png) top left no-repeat;
		height:29px;
	}
	#bannerContainer li {
		float: left;
	}
	#bannerContainer li.f {
		padding-left:5px;
	}
	#bannerContainer li a {
		display: block;
		padding:0 7px 0 7px;
		margin: 0 0px 0 0;
		height:29px;
		line-height:28px;
		text-decoration:none;
		}
.cross-link {
	background:#f2f2f2 url(../images/new/home-panel/bg-nav-sprite.png) left -39px repeat-x;
	color: #454545;
}
.pause-link {
	height:29px;
	width:75px;
	text-indent:-9999px;
	background:url(../images/new/home-panel/bg-nav-sprite.png) left -156px no-repeat;
}
.play-link {
	height:29px;
	width:75px;
	text-indent:-9999px;
	background:url(../images/new/home-panel/bg-nav-sprite.png) left -117px no-repeat;
	position:relative;
	left:-89px;
}
a.active-thumb {
	/*background:#922525 url(../images/new/home-panel/bg-nav-sprite.png) top left repeat-x;*/
	color:#FFF;
	background-position:left -78px;
}
#debug {
margin: 20px;
}
div.bannerNoFlash {
    background-color:#800000;
    height:168px;
    width:950px;
}
    div.bannerNoFlash h4, div.widgetNoFlash h4 {
        color:#fff;
        padding:10px 0 10px 20px;
    }
     div.bannerNoFlash p, div.widgetNoFlash p {
        color:#fff;
        padding:10px 10px 10px 10px;
    }
	div.bannerNoFlash p {
        color:#fff;
        margin:10px 0 0 10px;
    }
	div.bannerNoFlash p, div.widgetNoFlash img {
		padding:10px 0 0 0;
	}
/*--------------------------------------------------------- widget */

#widgetContainer {
	float:right;
	/*width:433px;*/
	width:302px;
	height:196px;
	margin:0 0 0 10px;
	background:url(../images/new/movie-widget-left-sprite.png) top left no-repeat;
	overflow:hidden;
}
#movieContainer, #demoContainer, #newsContainer {
	width:302px;
	height:196px;
	float:left;
}
#movieContainer {
	position:relative;
}
#abc {
    width:100px; 
    height:100px; 
    background-color:#ff0000; 
    position:absolute;
    top:50px;
    z-index:5;
    }
#abcd {
    width:100px; 
    height:100px; 
    background-color:#ffff00; 
    position:absolute;
    top:65px;
    z-index:4;
    }
	#movieContainer #FlashID2 {
		/*margin:8px 0 0 17px;*/
		position:absolute;
		top:8px;
		left:17px;
	}
	#movieContainer #movieLink {
		display:block;
		width:270px;
		height:180px;
		position:absolute;
		top:8px;
		left:17px;
	}
	#movieContainer #movieLink a{
		display:block;
		width:270px;
		height:180px;
		background:url(../images/new/trans.gif) top left;
	}
	#movieContainer div.viewAllNews a{
    margin:2px 0 2px 15px;
    font-size:9px;
}
#demoContainer {
	background:url(../images/new/movie-widget-left-sprite.png) -312px top  no-repeat;
}
/*	#demoContainer p.title {
		padding:10px 0 5px 15px;
		color:#929292;
	}
	#demoContainer form p{
		padding:0;
	}
	#demoContainer form label {
		float:left;
		width:80px;
		font-size:0.8em;
		margin:12px 0 0px 15px;
	}
	
	#demoContainer form input {
		float:left;
		width:180px;
		margin:10px 0 0px 0;
	}
	#demoContainer div.submit {
		clear:left;
		float:right;
		padding:5px 20px 0 0;
		cursor:pointer;
	}
	#demoContainer div.submit input {
	    float:right;
		width:auto;
		margin:2px 0 0px 0;
		padding:0 10px;
	} */
#errorMessage {
    padding:0px 0 0px 15px;
    font-size:0.9em;
}
#errorMessageForm {
    margin:0 0 10px 0; 
    padding:0;
    font-size:1em;
}
#newsContainer {
	background:url(../images/new/movie-widget-left-sprite.png) -624px top no-repeat;
}
#newsContent {
	margin:10px 0 5px 15px;
	width:285px;
	height:161px;
	overflow:auto;
}
	#newsContent div.newsSummary {
		margin:0 5px 15px 0;
	}
	#newsContent div.date {
		font-size:9px;
		padding:0 0 2px 0;
	}
	#newsContent h2 {
		padding:0 0 0px 0;
		line-height:120%;
	}
	#newsContent h2 a {
		color:#800000;
		font-weight:bold;
		font-size:12px;
		text-decoration:none;
	}
	#newsContent p {
		font-size:10px;
		color:#636363;
	}
	#newsContent p a{
		font-size:10px;
		text-decoration:underline;
		color:#636363;
	}
	#newsContent h2 a:hover{
		text-decoration:underline;
	}
	#newsContent p a:hover {
		text-decoration:none;
	}
#newsContainer div.viewAllNews a{
    margin:2px 0 2px 15px;
    font-size:9px;
}
	
#widgetNav {
	float:right;
	width:131px;
	height:196px;
	/*background:url(../images/new/movie-widget-right-dark2.png) top left no-repeat;*/
	position:relative;
}
	#widgetNav li.movie a{
		position:absolute;
		top:0;
		left:0;
		width:131px;
		height:67px;
		background:url(../images/new/movie-widget-sprite.gif) left top no-repeat;
	}
	#widgetNav li.demo a{
		position:absolute;
		top:67px;
		left:0;
		width:131px;
		height:63px;
		background:url(../images/new/movie-widget-sprite.gif) left -67px no-repeat;
	}
	#widgetNav li.news a{
		position:absolute;
		top:130px;
		left:0;
		width:131px;
		height:66px;
		background:url(../images/new/movie-widget-sprite.gif) left -130px no-repeat;
	}
	#widgetNav li.movie a span,
	#widgetNav li.demo a span,
	#widgetNav li.news a span {
	    position:absolute;
	    left:-500em;
	}
/*--------------------------------------------------------- benefit */
#benefitBar {
	clear:both;
	padding:0px 0 0 0;
}
	/*#benefitBar div.box1-top, #benefitBar div.box2-top, #benefitBar div.box3-top {
		float:left;
		padding:10px 0 0 0;
		margin:0px 0 10px 10px;
		width:310px;
		height:190px;
		background:url(../images/new/home-benefit-top.png) top left no-repeat;
	}
	#benefitBar div.box1-top {
		margin:0px 0 0px 0px;
	}
	#benefitBar div.box1-mid, #benefitBar div.box2-mid, #benefitBar div.box3-mid {
		width:310px;
		background:url(../images/new/home-benefit-mid.png) top left repeat-y;
	}
	#benefitBar div.box1-bot {
		background:url(../images/new/home-benefit-bot-cost.png) bottom left no-repeat;
		_height:180px;
		min-height:180px;
		margin:0px 0 0px 0;
	}
	#benefitBar div.box2-bot {
		background:url(../images/new/home-benefit-bot-control.png) bottom left no-repeat;
		margin:0px 0 0px 0;
		_height:180px;
		min-height:180px;
	}
	#benefitBar div.box3-bot {
		background:url(../images/new/home-benefit-bot-channel.png) bottom left no-repeat;
		margin:0px 0 0px 0;
		_height:180px;
		min-height:180px;
	}
	#benefitBar h2 {
		margin:20px 0 5px 130px;
		font-size:14px;
		font-weight:bold;
		line-height:1.4em;
		color:#636363;
	}
	#benefitBar h2 a{
		color:#636363;
		text-decoration:none;
	}
	#benefitBar h2 a:hover{
		text-decoration:none;
	}
	#benefitBar p {
		margin:0 7px 0 130px;
		font-size:9px;
		padding:0;
	}
	#benefitBar p a {
	    text-decoration:none;
	}
	#benefitBar p a:hover {
		text-decoration:none;
	}*/
	
/*--------------------------------------------------- 100616 add styles for new multi banner panel */
#boxLeft, #boxRight, #benefitBox {
    float:left;
	padding:0px 0 0 0px;
	margin:15px 0 10px 10px;
	_margin:5px 0 10px 10px;
	width:310px;
	height:190px;
	position:relative;
}
#boxLeft {
    margin:15px 0 10px 0px;
    _margin:5px 0 10px 0px;
    }
#boxLeft h2, #boxLeft p, #boxRight h2, #boxRight p {
    position:absolute;
	top:-500em;
	left:0;
	height:1px;
	width:1px;
}
#benefitBox {
    background:url('../images/new/home-benefit-sprite.jpg') left 0px no-repeat;
    width:310px;
	height:190px;
    }
#boxBot1 {
    background:url('../images/new/home-benefit-sprite.jpg') left -200px no-repeat;
    width:310px;
	height:190px;
	overflow:hidden;
    }
#boxBot2 {
    background:url('../images/new/home-benefit-sprite.jpg') left -600px no-repeat;
    width:310px;
	height:190px;
	overflow:hidden;
    }
#boxBot3 {
    background:url('../images/new/home-benefit-sprite.jpg') left -400px no-repeat;
    width:310px;
	height:190px;
	overflow:hidden;
    }
/*------------------------------------end new styles */
	#benefitBar div.box-bot {
		position:absolute;
		top:0px;
		left:0;
	}
	#benefitBar div.benefit-img {
	   /*position:absolute;
	    top:0;
	    left:0;*/
	}
	/*#benefitBar #boxBot1 div.benefit-text {
	    position:relative;
	    top:24px;
	    left:123px;
	}
	#benefitBar #boxBot2 div.benefit-text {
	    position:relative;
	    top:24px;
	    left:123px;
	}
	#benefitBar #boxBot3 div.benefit-text {
	    position:relative;
	    top:23px;
	    left:130px;
	}*/
	#benefitBar a {
	    text-decoration:none;
	    }
	#benefitBar a h2 {
		padding:20px 0 7px 125px;
		font-size:14px;
		font-weight:bold;
		line-height:17px;
		color:#636363;
		width:172px;
	}
	/*#benefitBar h2 a{
		color:#636363;
		text-decoration:none;
	}*/
	#benefitBar a p {
		font-size:11px;
		padding:0;
	    color:#636363;
	}
	#benefitBar a p span {
	    display:block;
	    padding:5px 0 0px 125px;
	    width:172px;
	    }
	/*#benefitBar p a {
	    text-decoration:none;
	    color:#636363;
	}
	#benefitBar p a:hover, #benefitBar h2 a:hover {
		text-decoration:none;
	}*/
/*---------------------------------------------------------- Movie layer */
#showMovie {
	width:905px;
	height:460px;
}
#mainMovieContainer {
	float:left;
	margin:40px 0 40px 0;
}
div.movieNoFlash {
	float:left;
	margin:40px 0 40px 0;
	color:#636363;
	width:600px;
}
div.lmHomeContainer {
	float:left;
	width:280px;
	margin:40px 0 40px 10px;
}
div.lmHomeContainerTop {
	background:url(../images/new/bg-sub-top-lite.png) top left no-repeat;
	height:37px;
	text-align:left;
}
	div.lmHomeContainerTop h2{
		color:#800000;
		font-weight:bold;
		font-size:1.2em;
		line-height:37px;
		padding:0 0 0 20px;
	}
div.lmHomeContainerMid {
	background:url(../images/new/bg-sub-mid.png) top left repeat-y;
	height:235px;
	text-align:left;
	min-height:10px;
}
div.lmHomeContainerContent {
	background:url(../images/new/bg-sub-shadow.gif) top left repeat-x;
}
	div.lmHomeContainerContent ul {
		padding:20px 0px 20px 20px;
	}
	div.lmHomeContainerContent li {
		display:block;
		background:url(../images/new/arrow-red.gif) top left no-repeat;
		padding:0 0 5px 0;
	}
	div.lmHomeContainerContent ul li a{
		color:#454545;
		text-decoration:none;
		font-size:1em;
		display:block;
		margin:0 0 0 30px;
	}
	div.lmHomeContainerContent ul li a:hover{
		text-decoration:underline;
	}
div.lmHomeContainerBot {
	background:url(../images/new/bg-sub-bot-line.png) bottom left no-repeat;
	height:100px;
	min-height:65px;
}

/*------------------------------------------------------------------------ demo layer */
#homeFormContainer {
	width:500px;
	height:400px;
	text-align:left;
	color:#636363;
}
#homeFormContainer p.title {
		padding:10px 30px 15px 15px;
	}
	#homeFormContainer form p{
		padding:0;
	}
	
	#homeFormContainer #form label {
		float:left;
		width:100px;
		font-size:0.9em;
		margin:10px 0 0px 15px;
		padding-top:0px;
	}
	
	#homeFormContainer #form input,
	#homeFormContainer #form textarea {
		float:left;
		width:300px;
		margin:10px 0 0px 0;
		font-size:11px;
		color:#636363;
	}
	#homeFormContainer #form input {
		height:18px;
	}
	#homeFormContainer #form textarea {
		height:60px;
	}
	#homeFormContainer div.submit {
		clear:left;
		padding:5px 0px 0 320px;
		cursor:pointer;
	}
	#homeFormContainer #form div.submit input {
	    width:100px;
	    height:40px;
		margin:2px 0 0px 0;
		padding:0 10px;
		height:auto;
	}