/* BASE */
html {
	color: #CCCCCC;
	background-color: #333333;
	
}
body {
	/*line-height: 1.5em;*/
}
a {
	color: #CC99CC;
}
a:hover {
	color: #FF9900;
	/*text-decoration: underline;*/
}


/* Layout */
#hd , #hd-2  , #ft , .color-pallet-wrapper , #breadscrum , #nav-1 {
	border: 1px solid #783F8C;
	background-color: #000000;
	margin-bottom: 0.5em;
	padding: 10px;
	overflow: hidden;
}

.nav-container {
	width: 93%;
	margin: 0 auto;
	margin-bottom: 0.5em;
}
#nav-1 , #nav-2 {
	border-top: none;
	padding: 0px;
	text-align: left;
	background: #462552;
	overflow: hidden;

}
#nav-1 {
	padding-right: 14em;
	float:left;
}
#nav-1 li  {
	display: inline-block;
	padding: 5px 0;
	*padding: 6px 0;
}
#nav-1 li a   {
	background: #783F8C url(images/gradient.jpg) repeat-x center;
	padding: 1em;
	text-decoration: none;
	color: #CCCCCC;
	font-weight: bold;
	border: 1px solid #783F8C;
	vertical-align:middle;
}
#nav-1 li a:hover   {
	color: #FF9900;
	background: #783F8C;
}
#nav-1 li {
	float: left;
}
#nav-1 li.nav-right {
	float: right;
}
#nav-2 {
	width: 14em ;
	float:right;
	position: relative;
	top: -57px;
}


/* ชั่วคราวเด่วเอาออก */
.color-pallet-wrapper {
	border: none;
}
.color-pallet {
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 1px solid #666666;
}

/* รูปภาพในเนื้อหาหลัก */
.main img {

}


#content {
	overflow: auto;
	padding: 1em;
}
#content img {

}
#hd , #bd  {
	padding: 0px;
}
#hd-2 {
	text-align: left;
}
#ft {
	text-align: center;
	font-size: 11px;
}
#logo {
	display: inline-block;
	background: transparent url('images/logo.jpg') no-repeat center ;
	width: 264px;
	height: 109px;
	position: relative;
	top: 30px;
	*top:25px;
	z-index: 0;
	left: 10px;
}
#film {
	display: inline-block;
	background: transparent url('images/film.jpg') no-repeat center ;
	width: 327px;
	height: 134px;
}
#download {
	
	padding-top: 50px;
	background: transparent url(images/icon/download.png) no-repeat scroll  7px 0px;
}
#download ul {
	border: 1px dashed #783F8C;
	padding: 1em;
}

/* Panel */
.panel {
	border: 1px solid #783F8C;
	margin-bottom: 7px;
}
.panel .hd {
	background: #783F8C url('images/gradient.jpg') repeat-x 50% 50%;
	border-bottom: 1px solid #783F8C;
	padding: 5px;
	color: #EEEEEE;
}
.panel .hd h3 , strong {
	font-weight: 900;
}
.panel .bd {
	padding: 10px;
	background-color: #000000;
}

.listing-table img {

}
.listing-table td {
	padding: 0.5em;
}

#content .bd {
	text-align: left;
}
.color-pallet {float:left;}

/*.main .yui-b {
	text-align: left;
	border: 1px solid #783F8C;
	background-color: #000000;
	margin-bottom: 0.5em;
	padding: 10px;
	overflow: hidden;
}*/



form input.text {
	padding: 2px;
	background-color: #eee;
	border: none;
}
form button {
	padding: 1px 5px;
}

/* shared กันหลายๆ อัน*/
.login-panel h3 ,
.category-panel h3 ,
.statistic-panel h3
{ 
	text-indent: 20px;
}
.login-panel a {
	font-weight: 900;
}
.login-panel h3 {
	background: url(images/icon/user.png) no-repeat 2px center;
}
.login-panel .bd {
	background: black url('images/eye.jpg') no-repeat top left;
}
.login-form input.text {
	width: 148px; /* ชดเชย padding */
}
.login-form table td {
	padding: 2px 0;
	font-weight: bold;
}
.login-form table td.first-child {
	padding-top: 0px;
}
.login-form table td.last-child {
	padding-bottom: 0px;
	padding-top: 13px;
	font-size: 93%;
}

.statistic-panel h3 {
	background: url(images/icon/chart.png) no-repeat left center;
}
.category-panel h3 {
	background: url(images/icon/category.png) no-repeat left center;
}

.recommend-panel h3 {
	text-indent: 30px;
	padding: 2px 0;
	background: url(images/icon/recommend.png) no-repeat left center;
}
.new-video-panel h3 , .category-video-panel h3 {
	text-indent: 30px;
	padding: 2px 0;
	background: url(images/icon/video.png) no-repeat left center;
}
.news-panel h3 {
	text-indent: 30px;
	padding: 2px 0;
	background: url(images/icon/new.png) no-repeat left center;
}
.payment-panel h3 {
	text-indent: 20px;
	background: url(images/icon/new.png) no-repeat left center;
}


/* Recommend Movies */
.recommend-panel .bd  , .new-video-panel .bd {
	white-space: nowrap;
	overflow: hidden;
}
.recommend-thumb , .movie-thumb {
	height: 176px;
	overflow: hidden;
}
.recommend-item , .movie-item {
	width: 130px;
	float: left;
	text-align:center;
	vertical-align: top;
	margin-left: 3px;
	padding: 5px 0;
}
.movie-item  {
	/*float:none; 
	display: inline-block;*/
}
.recommend-title , .movie-title {
	white-space: normal;
	margin-top: 5px;
}
.recommend-item img , .movie-item img {
	width: 100px;
	height: 150px;
	/*padding: 2px;*/
	border: 1px solid #444;
}
.recommend-no-items , .movie-no-items {
	text-align:center;
	padding: 2em;
}

.movie-table td {
	text-align: center;
}

a:hover img {
	border: 1px solid #555;
}

.category-panel a img {
	border: 1px solid #333;
	height: 130px;
}
.category-panel a:hover img {
	border: 1px solid #333;
}


.reflect img , .reflect canvas {
	position: relative;
	*position: static;
	left: 13px;
}

.reflected {
	border: 1px solid #444;
}

.more-movies {
	text-align: right;
	margin-top: 20px;
}
.more-movies a  {
	font-weight: 900;
}

#breadscrum {
	padding: 0px;
	background: black url(images/k.jpg) no-repeat scroll top right;
}
#breadscrum div {
	background: transparent url(images/icon/pin.png) no-repeat 5px 8px;
	text-indent: 20px;
	padding: 10px;
}


/* Post */
.post img {
	max-width: 700px;
	max-height: 500px;
	_width: expression(this.width > 700 ? 700 : true);
	_height: expression(this.height > 500 ? 500 : true);
	border: 1px solid #444;
}


.info-panel {
	background: black url(images/icon/favourite.png) no-repeat 5px 7px;
	text-indent: 20px;
}
.info-panel .bd {
	background: transparent;
}



form table td {
	padding: 5px;
}

form table td.field-guide {
	font-size: 11px;
	vertical-align:bottom;
}
form table td.field-guide strong {
	color: white;
	font-weight: 900;
}
form .label {
	vertical-align: top;
}
form .radio , form .virtual-click {
	vertical-align: middle;
}
form .virtual-click {
	margin-left: 7px;
	cursor: pointer;
}

/* Toottip CSS */
#tooltip {
	position:absolute;
	border:1px solid #333;
	background:#f7f5d1;
	padding:2px 5px;
	color:#333;
	font-size:11px;
	z-index:99;
	display:none;

}


.error {
	color: #CC6600;
	background: black;
}


.not-found-panel .bd {
	background: black url(images/error-icon.png) no-repeat center 10px;
	padding-top: 126px ;
	text-align: center;
	font-size: 16px;
}

table.movie-table {
	/*width: 100%;*/
}
table.movie-table td {
	width: 147px;
}