/*
	Name: Soulizen Connected Creations
	Date: February 2010
	Website http://www.soulizen.com
*/

/* -----------------------------------------------------------------
	Contents of this file:
	-----------------------------------------------------------------
	1.	Global reset and site defaults
	    - Headings
		- Common Formatting
		- Links
	2. Main Structure
		- Header
		- Body
		- Footer
	3. Navigation
	4. Content
		- Body Content 
		- Banner
		- Holder for content - absolute position
		- Booking Box
		- promotion
		- Gallery page
		- Contact Us Page
		- Room page , Promotion Page
		- Location
	5. Form Elements
	6. Picture Arrangement

/* ------------------------------------------------------------
   1. Global reset and site defaults
---------------------------------------------------------------*/
/* CSS Document */

html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, li, ol, dl, address, img {
	margin:0;
	padding:0;
	font-family: "Arial", Calibri, Tahoma, sans-serif;
}

body {
	margin:8px 0 0 0;
	font-size: 9pt;
	color:#3c0914;
	line-height: 1.5em;
	background:url(../i/bg.jpg) center top no-repeat #f79821;
}

body.nobg{
	background:#f5f5f5;
	font-size: 8pt;	
	color:#734f57;
}


a, input, div, object, embed {
	outline:none;
}
/* Headings
---------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
	font-family: "Arial", Calibri, Tahoma, sans-serif;
}
h1 {
	font:normal 180% "Arial";
	text-align:left;
	padding:16px 0 9px 0;
	color:#f05431;
	width:500px;
}

h2 {
	font:bold 120% "Arial";
	text-align:left;
	color:#f05431;
	width:500px;
	padding:0 0 5px 0;
}
h3 {
	font:bold 110% "Arial";
}
h4 {
	font:bold 120% "Arial";
	text-align:left;
	color:#792020;
	padding:5px 0;
	border-bottom:1px solid #ffeaea;
	margin:0 0 5px 0;
}
h5 {
	font:bold 110% "Arial";
	color:#ff6633;
}
h6 {
	/* Define your style*/
}
/* Common Formatting
---------------------------------------------------------------*/
p {
	margin:0;
}
fieldset, img {
	border:0;
}

sup {
	position:relative;
	bottom:0.3em;
	vertical-align:baseline;
}
sub {
	position:relative;
	bottom:-0.2em;
	vertical-align:baseline;
}
.right {
	float:right;
}
.left {
	float:left;
}

#clearfloat {
	clear:both;
}

#row{
	width:100%;
	float:left;
}

/* Links
---------------------------------------------------------------*/  
a:link, a:visited {
	text-decoration:none;
	color:#333333;
}
a:hover {
	text-decoration: underline;
	color:#ee5825;
}

/* ------------------------------------------------------------
   2. Structure
---------------------------------------------------------------*/
/* Container*/
#wrapper{
	width:960px;
	position: relative;
	margin: 0px auto;
}


#container-left{
	width:400px;
	float:left;
}

#container-right{
	width:560px;
	float:left;
	padding:80px 0 0 0;
}


.logo{
	width:400px;
	float:left;
}

.side-human{
	width:394px;
	float:left;
}

/* Footer*/
#footer {
	width:960px;
	float:left;
	color:#925a15;
	font:normal 7pt "Tahoma";
	line-height:1.6em;
	padding:14px 0 0 0;
}
#footer a {
	Color:#925a15;
	text-decoration: none;
}
#footer a:hover {
	color:#ffffff!important;
	text-decoration: underline;
}

.foot-txt-white{
	color:#ffffff;
	text-transform:uppercase;
}

/* ------------------------------------------------------------
   4. Navigation
---------------------------------------------------------------*/
#nav{
	width:560px;
	float:left;
	padding:20px 0 0 0;
}

#nav li{
	display:inline;
	float:left;
}

a.btn-home { display: block; width: 101px; height: 68px;background: url("../i/btn-home.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-home { background: url("../i/btn-home1.gif") 0 0 no-repeat;}

a.btn-pro { display: block; width: 94px; height: 68px;background: url("../i/btn-programme.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-pro { background: url("../i/btn-programme1.gif") 0 0 no-repeat;}

a.btn-about { display: block; width: 108px; height: 68px;background: url("../i/btn-about.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-about { background: url("../i/btn-about1.gif") 0 0 no-repeat;}

a.btn-reg { display: block; width: 99px; height: 68px;background: url("../i/btn-reg.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-reg { background: url("../i/btn-reg1.gif") 0 0 no-repeat;}

a.btn-prize { display: block; width: 64px; height: 68px;background: url("../i/btn-prize.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-prize { background: url("../i/btn-prize1.gif") 0 0 no-repeat;}

a.btn-contact { display: block; width: 94px; height: 68px;background: url("../i/btn-contact.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-contact { background: url("../i/btn-contact1.gif") 0 0 no-repeat;}




/* ------------------------------------------------------------
   4. Content
---------------------------------------------------------------*/


#body {
	width:560px;
	float:left;
}

#holder{/*for layering purpose*/
	width:560px;
	float:left;
	position:relative;
}

.index-margintop{
	margin:10px 0 0 0;	
}

#content {
	width:510px;
	float:left;
	background:url(../i/box-w-bottom.gif) center bottom no-repeat #ffffff;
	padding:25px;
}

#content .eng{
	width:510px;
	float:left;
}

#content .cn{
	width:510px;
	float:left;
	font-size:10pt;
	padding:15px 0 0 0;
}

#content .btn-center{
	width:510px;
	float:left;
	text-align:center;
	padding:10px 0 0 0;	
}

#content .tc-bg{
	width:490px;
	background:#f5f5f5;
	border:1px solid #d8d8d8;
	padding:5px;
	margin:0 0 10px 0;
}


ol.entry{
	margin:0 0 0 25px;
}

ol.entry li{
	padding:3px 0;
}


#tc-content{
	width:450px;
	float:left;
	text-align:justify;
}

ul.tc{
	margin:0 0 0 35px;
}

ul.tc li{
	list-style:lower-alpha;
	padding:2px 0;
}

ul.tc-agree{
	list-style:none;
	padding:5px 0;
}

ul.tc-agree li{
	padding:3px 0;
	list-style:none;
	text-align:justify;
}

ul.tc-agree li p{
	width:30px;
	float:left;
}

ul.tc-agree li span{
	width:470px;
	float:left;
	padding:0 0 2px 0;
}

#index-des{
	width:480px;
	position:absolute;
	top:360px;
	left:30px;
	z-index:20;
}


#index-fb{
	width:44px;
	position:absolute;
	top:345px;
	left:5px;
	z-index:25;	
}

#index-tvc{
	width:425px;
	position:absolute;
	background:url(../i/index-white.gif) left top no-repeat;
	padding:10px;
	margin:20px 0 0 55px;
	z-index:10;
}

#index-tab-v1{
	width:24px;
	position:absolute;
	z-index:10;
	top:36px;
	left:500px;
}

#index-tab-v2{
	width:24px;
	position:absolute;
	z-index:10;
	top:70px;
	left:500px;
}


a.btn-v1 { display: block; width: 24px; height: 32px;background: url("../i/tab-v1-2.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-v1 { background: url("../i/tab-v1-1.gif") 0 0 no-repeat;}
#index-tab-v1	a.selected {
	background: url("../i/tab-v1-1.gif") 0 0 no-repeat;
}

a.btn-v2 { display: block; width: 24px; height: 32px;background: url("../i/tab-v2-2.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-v2 { background: url("../i/tab-v2-1.gif") 0 0 no-repeat;}
#index-tab-v2	a.selected {
	background: url("../i/tab-v2-1.gif") 0 0 no-repeat;
}

/* ---------------------------------------------------------------*/
/* ----->2nd phase<<<-------------*/
/* ---------------------------------------------------------------*/



#content2 {
	width:540px;
	float:left;
	background:url(../i/box-w-bottom.gif) center bottom no-repeat #ffffff;
	padding:2px 10px 10px 10px;
}

#content2 .photoviewer{
	width:540px;
	height:360px;
	overflow:hidden;
	float:left;
}
/* give each slide the same dimensions */
#slideshow div { width: 540px; height: 360px;  }

/* make sure each slide image is centered */
#slideshow div img { margin: auto; display: block }


#content2 .photono{
	width:540px;
	float:left;
	padding:0 0 5px 0;
}

#content2 .phototext{
	float:left;
	width:450px;
	padding:5px 0 0 0;
	}
	
#ctrl-thumb{
	width:540px;
	float:left;
}

#ctrl-thumb .arrow{
	width:20px;
	float:left;
	padding:50px 0 0 0;
}
.arrow a.disabled {
	display:none !important;
}

#ctrl-thumb .ctrl-t{
	width:100%;
	padding:0 0 7px 0;
}

#ctrl-thumb .row{
	width:488px;
	float:left;
	padding:0 5px;
	border-left:1px solid #e5e5e5;
	border-right:1px solid #e5e5e5;
}

#ctrl-thumb ul li{
	list-style:none;
}

#ctrl-thumb li{
	float:left;
	width:91px;
	height:134px;
	padding:0 3px;
}

#ctrl-thumb li p{
	width:90px;
	padding:5px 0 0 0;
	font-size:8pt;
}

#ctrl-thumb li a{
	color:#cccccc;
}

#ctrl-thumb li a:hover{
	color:#666666;
}

.selected{
	color:#666666!important;
}


#content2 .video{
	float:left;
	width:315px;
}

#content2 .video-content{
	float:left;
	width:215px;
	padding:0 0 0 10px;
}

#content2 .video-content-detail{
	float:left;
	width:205px;
	padding:5px;
	color:#666666;
	height:180px;
}

#content2 .video-share{
	float:left;
	width:205px;	
}

.red-t{
	color:#cc6633;
	}
	



#about-host{
	width:520px;
	float:left;
	padding:10px;
	}
#about-host p.host-pic{
	width:159px;
	float:left;
	padding:16px;
	background:url(../i/bg-host-pic.gif) left top no-repeat;

}
#about-host p.host-txt{
	width:310px;
	float:left;
	padding:0 0 0 10px;
}

#about-host p.host-title{
	width:310px;
	float:left;
	padding:10px 0 0 10px;
	color:#ff9933;
	font:bold 140% "Arial";
}

#about-host p.host-name{
	width:310px;
	float:left;
	padding:0 0 10px 10px;
	font:bold 180% "Arial";
	color:#ff6633;
}

#about-host p.host-name2{
	width:310px;
	float:left;
	padding:13px 0 10px 10px;
	font:bold 180% "Arial";
	color:#ff6633;
}

.sep-judge{
	border-bottom:1px solid #f2f2f2;	
}

#news-listing{
	width:520px;
	float:left;
	padding:15px 10px 15px 10px;
}

#news-listing p.news-pic{
	width:150px;
	float:left;
	padding:0 25px 0 0;

}
#news-listing p.news-txt{
	width:310px;
	float:left;
}

#news-listing p.newstitle{
	font:bold 120% "Arial";
	text-align:left;
	color:#f05431;
	width:310px;
	padding:10px 0;
	float:left;
}

#news-listing p.newsdate{
	width:310px;
	float:left;
	font:normal 90% "Arial";
	color:#707070;
	clear:right;
}

ul.news-link{
	width:520px;
	list-style:none;
	float:left;
}

ul.news-link li{
	width:520px;
	float:left;
	list-style:none;
	padding:5px 10px;
	border-bottom:1px solid #f2f2f2;	
	
	}
ul.news-link li span{
	width:150px;
	float:left;
	font:normal 90% "Arial";
	color:#707070;
	padding:0 25px 0 0;
	text-decoration:none;
	}
ul.news-link li p{
	width:300px;
	float:left;
	cursor:hand;
	}

#news{
	width:520px;
	float:left;
	padding:15px 10px 15px 10px;	
	}
	
#news p.news-txt{
	width:520px;
	float:left;
}

#news p.newstitle{
	font:bold 150% "Arial";
	text-align:left;
	color:#f05431;
	width:520px;
	padding:10px 0;
	float:left;
}

#news p.newsdate{
	width:520px;
	float:left;
	font:normal 90% "Arial";
	color:#707070;
	clear:right;
}

#news p.newsimage{
	width:520px;
	float:left;
	padding:10px 0 0 0;
	}
	


/* ----->Index Corner<<<-------------*/

#corner{
	width:100%;
	float:left;
}

#corner .corner{
	width:7px;
	float:left;
}

#corner .c-center{
	float:left;
	background:#ffffff;
	height:7px;
}

#corner-content{
	float:left;
	padding:0 10px 0 10px;
	background:#ffffff;
}

#corner-content .content-t{
	float:left;
	width:200px;
}

#onair{
	list-style:none;
	margin:10px 0 0 0;
	width:230px;
	float:left;
}

#onair ul{
	list-style:none;
	margin:0;
}

#onair ul li{
	padding:5px;
	width:220px;
	color:#660000;
	background:#f2f2f2;
	font-size:8pt;
	margin:0;
}

#onair ul li a{
	color:#660000!important;
}

#onair ul li a:hover{
	color:#ff7a4e!important;
}

#onair ul li p.li-left{
	float:left;
	width:170px;
}
#onair ul li p.li-right{
	float:left;
	width:30px;
}


#onair ul li.darkgrey{
	background:#e6e6e6;
}

/* ----->Quiz<<<-------------*/

#content-quiz {
	width:530px;
	float:left;
	background:url(../i/box-w-bottom.gif) center bottom no-repeat #ffffff;
	padding:20px 10px 20px 20px;
}

/* ----->Cast<<<-------------*/

#cast-thumb{
	width:510px;
	float:left;
	padding:0 0 15px 0;
	border-bottom:1px solid #eeeeee;
	margin:0 0 10px 0;
	}
#cast-thumb p{
	width:510px;
	float:left;
	padding:0 0 10px 0;
	}
#cast-thumb ul{
	list-style:none;
	}
	
#cast-thumb li{
	display:inline;
	float:left;
	padding:0 5px 0 0;
}

a.btn-team1 { display: block; width: 80px; height: 84px;background: url("../i/thumb-t1.jpg") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-team1 { background: url("../i/thumb-t1-1.jpg") 0 0 no-repeat;}

a.btn-team2 { display: block; width: 80px; height: 84px;background: url("../i/thumb-t2.jpg") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-team2 { background: url("../i/thumb-t2-1.jpg") 0 0 no-repeat;}

a.btn-team3 { display: block; width: 80px; height: 84px;background: url("../i/thumb-t3.jpg") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-team3 { background: url("../i/thumb-t3-1.jpg") 0 0 no-repeat;}

a.btn-team4 { display: block; width: 80px; height: 84px;background: url("../i/thumb-t4.jpg") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-team4 { background: url("../i/thumb-t4-1.jpg") 0 0 no-repeat;}

a.btn-team5 { display: block; width: 80px; height: 84px;background: url("../i/thumb-t5.jpg") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-team5 { background: url("../i/thumb-t5-1.jpg") 0 0 no-repeat;}

a.btn-team6 { display: block; width: 80px; height: 84px;background: url("../i/thumb-t6.jpg") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-team6 { background: url("../i/thumb-t6-1.jpg") 0 0 no-repeat;}

#cast{
	width:510px;
	float:left;
	}
	
#cast .cast-title{
	width:510px;
	float:left;
	font:bold 15pt "Arial";
	color:#ff6633;
	}
	
#cast .cast-pic{
	width:510px;
	float:left;
	padding:10px 0 15px 0;
	}
#cast .cast-slogan{
	width:220px;
	float:left;
	color:#ffa347;
	padding:0 10px 0 0;
	}
#cast .cast-txt{
	width:259px;
	float:left;
	padding:0 0 0 20px;
	border-left:1px solid #e5e5e5;
	}
/* Bubble list out all Location */


#bubble{
	position:absolute;
	z-index:9999;
	width:220px;
	display:none;
}

#bubble-corner{
	width:220px;
	float:left;
}

#bubble-corner .corner{
	width:19px;
	float:left;
}

#bubble-corner .corner-center{
	width:182px;
	float:left;
	margin:5px 0 0 0;
	background:#ffffff;
	border-top:3px solid #ff9933;
	height:11px;
}

#bubble-corner .corner-center2{
	width:182px;
	float:left;
	margin:0 0 5px 0;
	background:#ffffff;
	border-bottom:3px solid #ff9933;
	height:11px;
}

#bubble-content{
	width:182px;
	float:left;
	padding:0 5px;
}

.b-cast{
	width:174px;
	float:left;
	padding:0 15px;
	background:#ffffff;
	border-left:3px solid #ff9933;
	border-right:3px solid #ff9933;
}
/* ---------------------------------------------------------------*/
/* ----->Form element<<<-------------*/
/* ---------------------------------------------------------------*/

#form-outer{
	width:480px;
	font-size:8pt;
}

#form {
	float:left;
	width:98%;
	padding:1%;
}
#form label {
	display: block;
	float: left;
	width: 20%;
	padding: 0 10px 0 0;
}

#form p.row {
	width:99%;
	float:left;
	margin:4px 0;
}

#form p.row2 {
	width:75%;
	float:left;
	margin:4px 0;
	padding:0 0 0 22%;
}


#form span.forgotpass {
	width:56%;
	float:left;
	background:url(../i/dash2.gif) left center repeat-x;
	padding:15px 0 15px 5px;
}

#form span.txt-red2-invalid {
	color:#ff0600;
	float:left;
	display:block;
	clear:left;
	margin:10px 0 0 120px;
}
.textarea {
	border:1px solid #bababa;
	width:360px;
	background:#f7f7f7;
}

.input {
	border:1px solid #bababa;
	height:20px;
	background:#f7f7f7;
	width:170px;
}


.select {
	border:1px solid #bababa;
	margin:0 10px 0 0;
	height:25px;
	font:normal 9pt "Arial";
	background:#f7f7f7;
}


.txt-red2 {
	color:#ff0600;
	font:bold 7pt "tahoma";
}
input.required {
	border:1px solid #e6e6e6;
	height:15px;
	font:normal 8pt "Arial";
	width: 180px;
}
.field {
	border:1px solid #e6e6e6;
	height:15px;
	font:normal 8pt "Arial";
	width: 200px;
}
input.required, textarea.required {
	border: 1px solid #d9d9d9;
}
input.validation-failed, textarea.validation-failed {
	border: 1px solid #ff7f00;
	color : #FF3300;
}
input.validation-passed, textarea.validation-passed {
	border: 1px solid #00CC00;
	color : #000;
}
.validation-advice {
	margin: 5px 0;
	padding: 5px;
	background-color: #ff7f00;
	color : #FFF;
	font-weight: bold;
	text-align:center;
}

/* ------------------------------------------------------------
   6. Picture Arrangement
---------------------------------------------------------------*/
.s-r10px{
	margin:0 10px 0 0;
}

.t-5px{
	margin:5px 0 0 0;
	}
.b-5px{
	margin:0 0 10px 0;
	}
	
	
#soul_overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #666;
	opacity:0.5;
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity:0.5;
	z-index: 30000;
}
#soul_message {
	position:relative;
	color:black;
	width:200px;
	padding:20px;
	height:100px;
	text-align:center;
	z-index:40000;
}

/* ------------------------------------------------------------
   6. Table-airtime
---------------------------------------------------------------*/
#table-airtime{
		width:100%;
			margin:0 auto 8px auto;	
	border-collapse: collapse;
	}
#table-airtime td{
	padding:5px 10px;
	text-align:left;
	border-bottom:1px solid #f0f0f0;
	text-align:center;
}

#table-airtime tr.td-grey{
	padding:5px 10px;
	text-align:left;
	border-bottom:1px solid #f0f0f0;
	text-align:center;
	background:#f0f0f0;
}

#table-airtime th{
	padding:5px 10px;
	text-align:center;
	background:#ff7800;
	border-bottom:1px solid #f0f0f0;
	font-weight:bold;
	color:#ffffff;
}