/*
stylesheet for BBLAM (www.bblam.co.th)
main stylesheet for monitor and projection style
create 2007-12-03
edit 2008-08-05

3 column layout
orange #FF7E00, new #EC8000
blue #330099, new #00129D
*/

/* ---------------------------------- import reset screen components onto it */
@import "../../screen_reset.css";


/* -------------------------------------- setting typograpgy and general tag */

html, body {height: 100%; background: #FFFFFF;}
body, th, td, input, select, textarea {font: 100%/1.4 Tahoma, "Lucida Grande", Thonburi, Loma, sans-serif;}

body, #container {min-height: 100%;}

pre, code, kbd, samp, tt, xmp {font-family: monospace; line-height: 99%;}
abbr, acronym {font-variant: small-caps; letter-spacing: 0.1em;}
blockquote {margin: 0 40px;}
del  {text-decoration: line-through;}
ins {text-decoration: underline;}
em {font-style: italic;}
strong {font-weight: bold;}
sub {vertical-align: sub; font-size: 0.75em;}
sup {vertical-align: super; font-size: 0.75em;}
p {text-indent: 20px;}

h1 {font-size: 1.35em;}
h2 {font-size: 1.25em;}
h3 {font-size: 1.15em;}
h4 {font-size: 1em;}
h5 {font-size: 0.85em;}
h6 {font-size: 0.7em;}

ol {list-style-type: decimal; list-style-position: inside;}
ul {list-style-type: square; list-style-position: inside;}
li {line-height: 150%;}
li.question {cursor: pointer; cursor: hand; list-style-type: circle;}
li.question:hover {color: #3333CC;}
li.answer {display: none; visibility: hidden; list-style-type: none; padding: 5px 20px; background-color: #EEEEFF;}
dl ol {margin-left: 20px;}
dl {padding-bottom: 10px;}

hr {border: none; margin-top: 20px; background-color: #FF9966; color: #FF9966; width: 94%; height: 1px;}

a {text-decoration: none; color: #0033CC;}
a:hover {color: #FF6600;}


/* ----------------------------------------------------------- setting table */

table {width: 100%; border-collapse: collapse; font-size: inherit; font: 100%;}

caption {text-align: center;}
thead {}
tbody {}
tfoot {}

th, td {border: 1px solid #FFFFFF; padding: 1px;}
th {text-align: center; font-weight: bold;}
th.vertical {text-align: left;}
td.number {text-align: right;}
tr.odd {background: #EFEFF1;}
tr.even {background: #F6F6FA;}


/* ------------------------------------------------------------ setting form */

form {margin: 10px 5px 10px 5px;}

fieldset {}
legend {text-align: right;}
label {display: block;}

input, select, textarea {background: #FFFFFF; border: 1px solid #777777;}
textarea {height: 160px;}
input.button, button {
	clear: both;
	margin: 5px 15px; 
	text-align: center;
	font-weight: bold;
	color: #FFFFFF;
	background: #EC8000;
	border: 1px solid #EDEDED;
	cursor: pointer;
	cursor: hand;
}
input.navbutton {background-color: #EC8000; color: #FFFFFF; cursor: pointer; cursor: hand;}
input.button:hover, input.navbutton:hover,  button:hover {background: #F8981D;}

#searchbox {width: 245px; clear: both; float: right; margin-top: 15px; background: #EEF0FF; color: #000000;}
#searchbox label {margin-left: 15px;}
#searchbox input, #searchbox select {width: 200px; margin: 0 0 5px 15px;}
#searchbox input.button {width: 80px;}

.bannerright {width: 245px; clear: both; float: right; margin-top: 5px;}

#newsletterbox {
	width: 170px;
	clear: both;
	margin: 15px 5px;
	background: #EEF0FF url("../images/bg_newsletter.png") no-repeat;
	color: #000000;
}
#newsletterbox h4 {text-align: center; background: #BABADA;}
#newsletterbox label {clear: left; margin: 10px 0 0 15px; font-size: 0.85em;}
#newsletterbox input {width: 135px; margin: 0 0 5px 15px; font-size: 0.85em;}
#newsletterbox label.inlinetext {width: 125px; margin: 2px 0;}
#newsletterbox input.inlinechoice {width: 20px; margin: 5px 0 0 12px;}
#newsletterbox input.button {clear: both; width: 95px; margin-bottom: 15px;}

#questionaire {clear: both; margin-top: 10px;}
#questionaire th {text-align: left;}
#questionaire input.choice {text-align: right;}
#questionaire input.button {width: 110px;}

#contactform {width: 480px; padding: 10px; background: #EEEEFF;}
#contactform h3 {font-weight: bold; color: #00129D;}
#contactform input, #contactform textarea {width: 420px; margin-bottom: 5px;}
#contactform input.button {width: 100px;}

.short {width: 60px;}
.small {width: 100px; height: 100px; display: inline;} /* small textarea */
.big {width: 450px; height: 300px;} /* big textarea */
.inlinechoice {clear: left; float: left;} /* radio and checkbox element */
.inlinetext {float: right; text-align: left;} /* radio and checkbox text label */


/* ---------------------------------------------------------- setting header */

#header {margin: 0 auto; width: 970px; height: 180px; background: #FFFFFF;}
#branding {float: left; width: 700px; height: 180px;}
#logo {float: right; width: 250px; height: 180px; background: transparent url("../images/logo.jpg") no-repeat;}


/* -------------------------------------------------- setting all navigation */

/* #textzoom {float: left; margin-left: 10px; padding: 160px 0 0 0; height: 18px;} */
#textzoom {float: right; font-size: 12px; padding: 10px 0 0 0;}

#langnav {float: right; padding: 133px 10px 0 0; height: 20px;}
#langnav li {
	list-style-type: none;
	float: left;
	margin-left: 5px; 
	width: 75px; height: 20px;
	font-size: 0.75em;
	line-height: 20px;
	text-align: center;
	background: #00129D;
	color: #FFFFFF;
}
#langnav li.current {background: #EC8000;}
#langnav li a:link, #langnav li a:visited, #langnav li a:active {color: #FFFFFF;}
#langnav li a:hover {color: #FF6666;}

#mainnav {
	margin: 0 auto;
	width: 970px; height: 1.5em;
	font-size: 0.95em;
	font-weight: normal;
	background-color: #00129D;
	border-top: 6px solid #EC8000;
} /* drop down menu */
#mainnav ul {list-style: none;}
#mainnav a {display: block; padding: 0 0.5em; color: #FFFFFF;}
#mainnav a.level2 {background: url("../images/bullet_arrow.gif") center right no-repeat;}
#mainnav a:hover {color: #111111;}
#mainnav li {float: left; line-height: 1.5em;}
#mainnav li.current {color: #333333; background-color: #EC8000;}
#mainnav li:hover, #mainnav li.iehover {background-color: #EC8000;}
#mainnav li ul {
	position: absolute;
	display: none;
	width: 22.5em;
	border-bottom: 2px solid #000000;
	font-size: 0.9em;
	background-color: #00129D;
	opacity: .9;
} /* menu level 2 */
#mainnav li ul ul {
	margin: -1.65em 0 0 22.5em;
	font-size: 1em;
	opacity: .9;
} /* menu level 3 */
#mainnav li:hover ul ul, #mainnav li:hover ul ul ul,
	#mainnav li.iehover ul ul, #mainnav li.iehover ul ul ul
	{display: none;}
#mainnav li:hover ul, #mainnav li li:hover ul, #mainnav li li li:hover ul,
	#mainnav li.iehover ul, #mainnav li li.iehover ul, #mainnav li li li.iehover ul
	{display: block;}
#mainnav li li {width: 22.5em; border-top: 2px solid #000000;}

#footnav, #subnav {
	clear: both;
	margin: 0 auto;
	width: 970px; height: 25px;
	color: #DEDEDE;
	background: #00129D;
}
#footnav li, #subnav li {list-style-type: none; float: left; margin-left: 20px; font-size: 0.85em; line-height: 25px;}
#footnav li.current, #subnav li.current {font-weight: normal;}
#footnav a, #subnav a {color: #FFFFFF;}
#footnav a:hover {color: #FF6666;}

#subnav {height: 18px; background: #EC8000;}
#subnav li {font-size: 0.8em; line-height: 18px;}
#subnav a:hover {color: #3333CC;}


/* --------------------------------------------------- setting column layout */
/*
contentcontainer - contain everything
subcontent - left column
maincontent - container for maincolumn and subcolumn (and use for 2 column layout)
maincolumn - center column and biggest
subcolumn - right column
...box - small box in any column
*/

.date {text-indent: 0; font-size: 0.85em;}
.description {text-indent: 0; font-size: 0.8em;}
.paginate {padding-top: 10px; font-size: 0.8em; text-indent: 0;}
.paginate a {padding: 0 2px; border: 1px solid #FFFFFF; background: #FFFFFF;}
.paginate a:hover {border: 1px solid #FF9900; background: #FFFF99;}

#contentcontainer {clear: both; margin: 0 auto; width: 970px; background: #FFFFFF; font-size: 0.95em;}

#maincontent {float: right; width: 760px;}
#maincontent img {margin-top: 5px;}
#maincontent h4 {margin-top: 10px; padding-left: 5px; color: #111111; font-weight: bold;}
#maincontent h4.funddata {background: #CCEEFF;}
#maincontent dl {margin-top: 5px; padding-bottom: 5px; font-size: 0.85em;}
#maincontent dt {display: inline; font-weight: bold;}
#maincontent dd {display: inline;}
#maincontent dl.navdetail {clear: left;}
#maincontent dl.navdetail dt {float: left; display: block; width: 200px;}
#maincontent dl.navdetail dd {float: left;}
#maincontent ul {
	clear: left;
	margin: 10px 0 0 20px; padding-bottom: 8px;
	list-style-type: disc; list-style-position: outside;
	font-size: 0.85em;
}
#maincontent ul ul {margin-top: 0; padding-bottom: 6px; font-size: 1em; list-style-type: circle;}
#maincontent ul ul ul {margin-top: 0; padding-bottom: 4px; list-style-type: square;}

#subcontent {float: left; width: 200px;}
#subcontent h3 {margin: 10px 4px 0 0; padding-left: 3px; border-bottom: 2px solid #EC8000;}
#subcontent ul {margin: 0 0 10px 20px; list-style-position: outside; font-size: 0.85em;}
#subcontent iframe {margin: 0 0 10px 5px;}

#maincolumn {float: left; width: 500px;}
#maincolumn h2 {}

#subcolumn {float: right; width: 250px;}
#subcolumn h2 {}

#announce {
	margin-top: 5px;
	width: 500px;
	background: #EEEEFF url("../images/bg_announce.jpg") repeat-x;
}

#heading {margin-top: 5px; width: 500px; height: 75px;}
#heading h2 {color: #FFFFFF; padding: 6px 0 0 10px; font-size: 1.3em; font-weight: normal;}

#hotfundbox {
	clear: both; float: right;
	width: 245px;
	margin-top: 20px; padding-bottom: 15px;
	background: #FFF0ED url("../images/bg_hotfund.png") no-repeat;
	color: #000000;
}
#hotfundbox h3 {padding: 0 5px; background: #EC8000; color: #FFFFFF;}
#hotfundbox dl {margin: 5px 5px 0 5px; font-weight: bold;}
#hotfundbox dd {display: block; margin: 5px 5px 0 15px; font-weight: normal;}

#promotebox {clear: both; float: right; width: 245px; margin-top: 20px; background: #FFFFFF; color: #000000;}
#promotebox ul {list-style-type: none; list-style-position: outside; margin: 0; font-size: 0.85em;}
#promotebox li {margin-bottom: 10px;}
#promotebox p {text-indent: 0; margin-left: 15px;}

#flashvideo {width: 195px; height: 140px; margin: 5px 5px 5px 0;}
#flashvideolist {width: 195px; margin: 0 5px 5px 0; background: #FFFFCC; font-size: 0.9em;}
#flashvideolist h5 {font-weight: bold; margin-left: 5px;}
#flashvideolist ul {list-style-position: outside; margin-left: 20px;}
#flashvideolist .description {margin: 5px;}


/* --------------------------------------------------- setting tabulate data */
/* nav table header, not scroll */
table.navhead {clear: both; width: 100%;}
table.navhead tr {background-color: #00129D; color: #FFFFFF;}
table.navhead th {font-size: 0.85em; font-weight: normal;}

/* scrollable div */
#shownav, #shownavfull {height: 420px; overflow: auto;}

/* nav table */
table.navdata, #table.navdata {clear: both; margin: 1px auto 15px auto;}
table.navdata th, table.navdatafull th {
	font-size: 0.8em; font-weight: normal;
	background: #00129D;
	color: #FFFFFF;
	vertical-align: center;
}
table.navdata th.vertical, table.navdatafull th.vertical {
	background: transparent;
	color: #000000;
	font-weight: normal;
}
table.navdata td, table.navdatafull td {padding: 1px; font-size: 0.75em;}
table.navdata td.navcat, table.navdatafull td.navcat {
	padding-right: 5px;
	border-bottom: 1px solid #EC8000;
	background: transparent url("../images/bg_navtablecaption.jpg") top right no-repeat;
}
table.navdata td.navcat h3, table.navdatafull td.navcat h3 {font-weight: normal; color: #FAFAFA; text-align: right;}
table.navdata td.navname, table.navdatafull td.navname {background-color: #FFCC99; font-weight: normal;}
table.navdata tr.odd:hover, table.navdata tr.even:hover,
	table.navdatafull tr.odd:hover, table.navdatafull tr.even:hover {background: #FFEEBB;}

table.funddata {clear: both; margin-bottom: 5px;}
table.funddata caption {text-align: left; padding-left: 5px; background: #FFFFFF; color: #000000; font-size: 0.8em;}
table.funddata th {background: #CCEEFF; color: #000000; font-size: 0.85em; font-weight: normal;}
table.funddata td {font-size: 0.8em;}

table.questresult {width: 490px; margin-left: 10px;}
table.questresult th, table.questresult td {border: 1px solid #444444; padding: 0 3px;}


/* --------------------------------------------------------- setting gallery */

/* thumbnail size 245px */
#gallery {padding: 20px 0; width: 550px;}
#gallery li {list-style-type: none; margin: 0 10px 0 0; padding: 0; float: left; width: 245px; height: 245px;} 


/* ---------------------------------------------------------- setting footer */

#footer {
	clear: both;
	margin: 0 auto;
	width: 970px; height: 100px;
	background-color: #EEEEFF;
} /* background: #00129D url("../images/bg_footer.jpg") repeat-x; */
#footer p {float: left; margin-top: 6px; width: 800px; font-size: 0.7em; color: #666666;}
#footer p.address {color: #111111; margin-left: 20px; text-indent: 0; font-size: 0.8em;}
#footer img {float: right; margin: 7px 10px;} /* izzisoft webbutton */


/* -------------------------------------------------------- setting lightbox */

#lightboxbg {
	display: none; visibility: hidden;
	position: absolute;
	top:0; left:0;
	width: 100%; height: 100%;
	z-index: 1000;
	background-color: #AAAAAA;
	opacity: .70;
	filter: alpha(opacity=70);
}

#lightbox {
	display: none; visibility: hidden;
	overflow: auto;
	z-index: 1010;
	position: absolute;
	top: 50%; left: 50%;
	margin: -170px 0 0 -250px; padding: 0;
	width: 500px; height: 300px;
	border: 6px solid #EC8000;
	text-align: left;
	background-color: #FFFFFF;
	color: #222222;
}

#lightbox .closebutton {
	background-color: #DEDEDE;
	text-align: right;
	cursor: pointer;
	cursor: hand;
}
#lightbox h4 {margin-left: 10px; font-weight: bold;}
#lightbox p {text-indent: 0; margin-left: 10px; font-size: 0.9em;}
#lightbox li {list-style-type: none; display: inline;}

#lightboxgallery li {list-style-type: none; width: 100px; height: 100px; margin: 10px 10px;}

#ajaxcalendar {
	display: none; visibility: hidden;
	z-index: 2000;
	width: 200px;
	background-color: #BBBBBB;
	opacity: .85;
	filter: alpha(opacity=85);
}
#ajaxcalendar .closebutton {
	display: none; visibility: hidden;
	overflow: auto;
	background-color: #DEDEDE;
	text-align: right;
	cursor: pointer;
	cursor: hand;
}
#ajaxcalendarcontent {font-size: 0.8em;}
#ajaxcalendarcontent table {border-collapse: collapse;}
#ajaxcalendarcontent table th, #ajaxcalendarcontent table td {border: 1px solid #BBBBBB;}
#ajaxcalendarcontent table th {background-color: #FFCC00;}
#ajaxcalendarcontent table a {display: block; background-color: #FFFFCC;}
#ajaxcalendarcontent table a:hover {background-color: #EFD560;}


/* ------------------------------------------------------------------ bbcode */

.bbctext {clear: both; padding-top: 20px; font-size: 0.95em; line-height: 140%;} /* span around user text */
.bbctext ul, .bbctext ol {list-style-position: outside; margin-left: 20px;}
.bbctext ul {list-style: circle;}
.bbctext li {font-size: 1em;}

.bbcunderline {text-decoration: underline;}
.bbcbig {font-size: 1.15em;}
.bbcsmall {font-size: 0.85em;}

.bbcwhite {color: #FFFFFF;}
.bbcblack {color: #000000;}
.bbcred {color: #FF0000;}
.bbcblue {color: #330099;}
.bbcyellow {color: #FFFF00;}
.bbcorange {color: #FF7E00;}
.bbcgreen {color: #99FF66;}
.bbccyan {color: #333399;}
.bbcviolet {color: #CC00FF;}
.bbcpink {color: #FF99FF;}
.bbcgrey {color: #666666;}
.bbcbrown {color: #993300;}