/* Create by BooM Start 19/11/2009 */
body {font:normal 12px Arial; color:#333333; line-height:16px; margin:0; padding:0; behavior: url(csshover.htc);}

a {color:#333333;}
a:hover {color:red;}
* img {border:0;}

.clr {clear:both;}
.hidden {display: none;}
.shown { }

#container {width:970px; margin:0 auto;}


/* HEADER */
.header {height:120px;}
.logo { height:120px; position:relative; background:url('images/bangkokcity_header.jpg') no-repeat;}

/*  For Menu top  */
.menutop {background:url('images/menu-nav-bg.jpg') repeat-x; float:left; font-size:14px; width:790px; height:30px; z-index:1; position:absolute;}
.menutop ul {float:left; list-style:none; margin:0; padding:0;}
.menutop li {float:left; padding:0 7px; position:relative; width:110px;}
.menutop li a {display:block; overflow:hidden; line-height:30px; color:#E5F2FB; text-decoration:none; font-weight:bold;}
a .menu-left {background:url("images/menu-left.gif") no-repeat; float:left; height:30px; width:8px;}
a .menu-mid {background:url("images/menu-mid.gif") repeat-x; float:left; height:30px;}
a .menu-right {background:url("images/menu-right.gif") no-repeat; float:left; height:30px; width:8px;}

.menutop li a:hover .menu-left, .menutop li:active a .menu-left, .menutop li:hover a .menu-left, .menutop li a:hover .menu-mid, .menutop li:active a .menu-mid, .menutop li:hover a .menu-mid, .menutop li a:hover .menu-right, .menutop li:active a .menu-right, .menutop li:hover a .menu-right {background-position:0 -37px; font-weight:bold;}
.menutop li a:hover, .menutop li:active a, .menutop li.hover a, .menutop li:hover a {color:#09548B;}
.menutop li:hover .sub, .menutop li.hover .sub {display:block;}
.menutop li .sub {background:url("images/menu-submenu-top.gif") no-repeat; display:none; left:7px; padding-top:5px; position:absolute; top:30px; height:10px; width:200px;}
.menutop li ul {background:url("images/menu-submenu-bg.gif") repeat-y; height:auto; list-style:none; margin:0; font-size:13px;}
.menutop li:hover li, .menutop li:active li {border-bottom:1px dashed #CACACA; padding:5px; width:100%;}
.menutop li:hover li a, .menutop li:active li a {color:#09548B; background-color: #E8EFF9; line-height:normal; width:190px; font-weight:normal;}
.menutop li:hover li a:hover, .menutop li:active li a:hover {background:#6BCDE6; color:white; line-height:normal; text-decoration:none;}
.menutop li li a:hover, .menutop li li a:hover {background:#6BCDE6; color:white;  line-height:normal; text-decoration:none;}
.menutop .btm-bg {background:url("images/menu-submenu-bottom.gif") no-repeat; clear:both; height:15px; width:200px;}


/* CONTENT 1 */
#content-left {width:775px; margin:40px 10px 0 5px;}

/* introduction*/
.bangkok-intro {height:170px; padding:10px; text-align:justify; background-image:url('images/bg_bangkokintro.jpg');}

/* Main area link */
.bangkok-area {width:765px; margin-right:10px;}
.bangkok-area .link {float:right; width:170px; font-size:11px; line-height:25px; margin-top:12px; font-weight:bold;}
.bangkok-area .link ul {float:left; margin:0 0 8px 0; padding:0; text-align:left; list-style:none;}
.bangkok-area .button-more {width:145px; height:23px; display:block; background-image:url('images/button_more.jpg'); text-align:center; font-size: 11px; font-weight:bold;}
.bangkok-area .button-more a {color:white; text-decoration:none;}
.bangkok-area .button-more :hover {color:#FFCC33;}
.bangkok-area .info {width:410px; margin:0 10px 0 170px; text-align:justify;}
.bangkok-area .info a {text-decoration:none;}

/* Other area link */
.bangkok-location-menu {padding:3px 8px 0; margin-bottom:10px;}
.bangkok-location-menu a {padding:7px; font-weight:bold;}

/*  For Other Pages  */
.menulist {margin:15px 0; border-top:1px #999999 dotted; border-bottom:1px #999999 dotted;}
.menulist ul {width:190px; margin:10px 0; padding:0; list-style:none; float:left; }
.menulist ul li a {background:url('images/bullet.gif') no-repeat left; padding-left:15px; margin-left:15px; line-height:30px; color:#000066; text-decoration:none; font-weight:bold;}
.menulist ul li a:hover {color:red;}

.pageblock {width:775px; margin:15px 0 10px;}
.pageblock .top {height:20px; padding:10px; background:url('images/pageblock-top.jpg') no-repeat;}
.pageblock .middle {background:url('images/pageblock-middle.jpg') repeat-y; padding:0 10px 10px;}
.pageblock .listwidth {width:60px; float:left;}
.pageblock .location {width:509px; float:right; margin-bottom:20px;  font-weight:bold;}
.pageblock .location ul {margin:5px 0 0 0; padding:0; line-height:38px;}
.pageblock .location ul li {width:120px; float:left; list-style:none; margin-right:7px;}
.pageblock .bottom {height:16px; background:url('images/pageblock-bottom.jpg') no-repeat;}

.topichead {color:#003399; font-size:14px; font-weight:bold; margin:15px 0 5px 0;}
.img-small {float:left; padding:3px; margin:0 10px 10px 0; border:1px #C0C0C0 solid;}
.img-big {padding:3px; border:1px #C0C0C0 solid;}
.fleft {float:left; margin:0 10px 10px 0; font-size:11px; color:#999999;}
.fright {float:right; margin:0 0 20px 10px; font-size:11px; color:#999999;}

.txt-headstyle {font-weight:bold; margin-bottom:10px;}
.txt-headstyle a {color:#0099FF;}
.txt-headstyle a:hover {color:#FF0000;}

.topic {color:#003399; font-weight:bold; height:16px; margin:20px 0 5px; padding:5px; background-color:#AEDBFF;}
.topic .left {float:left; font-size:14px;}
.topic .right, .topic .right a {float:right; color:#990000; text-decoration:none;}
.topic .right a:hover {color:black;}

.subtopic, .subtopic a {color:#003399; font-weight:bold; font-size:13px; text-decoration:none; margin:10px 0;}
.subtopic a:hover {color:red; text-decoration:underline;}

.head-topic {float:left; font-weight:bold; font-size:20px; line-height:normal;}
.head-subtopic, .head-subtopic a {margin:15px 0 5px 0; color: #990000; font-weight: bold; font-size:16px; text-decoration:none;}
.head-subtopic a:hover {color: red;}

.style-tb1 {width:755px; clear:left; border:1px double #B6B6B6; background-color:#B0B0B0; margin:20px auto auto;}
.style-tb1 th { background-color:#D4D4D4; color:black; font-weight:bold; text-align:center;}
.style-tb1 td { background-color:white; padding-left:10px;}

.style-tb2 {width:auto; margin:auto; text-align:center;}

.style-tb3 {width:755px;}
.style-tb3 td {vertical-align:top;}

.style-tb4 {width:100%; margin:20px auto auto;}
.style-tb5 th { font-weight:bold; text-align:left;}

.bangkok-map-style {height:800px; border:1px solid #333333;}
.address-detail {margin:5px 0 5px 15px;}
.address-detail strong {text-decoration:underline;}
.txt-centered {text-align:center; font-weight:bold; margin-bottom:5px; border-top:1px #CCCCCC dotted; border-bottom:1px #CCCCCC dotted;}
.dotted-line {border-bottom:1px #999999 dotted; margin:5px 10px 10px 0;}
.search-style select, .search-style input {width:160px; font-size:10px; margin:5px;}
.gotop {float:right;}
.link-area a {color:#990000; text-decoration:none;}
.link-area a:hover {color:red;}
.cont {margin-top:0;}
.txtcenter {text-align:center;}


/* CONTENT 2 */
#content-bottom {margin-left:5px; width:960px;}
.topic-left {margin-bottom:10px; height:30px; background:url('images/menu-nav-bg.jpg') repeat-x; color:white; font-size:14px; font-weight:bold; text-align:left;}
.topic-text {padding:7px 0 0 10px; display:block;}

.bangkok-guide-link {width:155px; color:maroon; font-weight:bold;}
.bangkok-guide-link .bangkok-guide-menu {display:block; height:150px;}
.bangkok-guide-link a {text-decoration:none; color:maroon;}
.bangkok-guide-link :hover {text-decoration:none; color:#0066CC;}

.bangkok-guide-detail {width:590px; height:405px; margin-left:170px !important; margin-left:160px; padding:15px; background:url('images/bg_guide.jpg') no-repeat;} 
.bangkok-guide-detail .listdetail {background:url('images/bullet.gif') no-repeat left; padding-left:20px; width:50%;}
.bangkok-guide-detail a {color:#333333; text-decoration:none;}
.bangkok-guide-detail a:hover {color:red;}
.bangkok-guide-detail .readmore {float:right; font-weight:bold; margin-top:10px;}
.bangkok-guide-detail .readmore a {color:red;}
.bangkok-guide-detail .readmore a:hover {color:#333333;}



/* CONTENT RIGHT */
#content-right {width:180px; float:right;}
#content-right .topic-right {width:180px; height:30px; font-weight:bold; background-image:url('images/bg_head.jpg');}
#content-right a {color:#000066; text-decoration:none;}
#content-right a:hover {color: red;}
#content-right .box {width:180px; background:url('images/bg_search.jpg') repeat-y; border-bottom:1px solid #666; text-align:center;}
#content-right .button-search {color:white; width:66px; height:18px; margin:auto; display:block; background-image:url('images/button_search.gif'); text-align:center; font: bold 11px Arial; padding-top:3px;}
#content-right .button-search a {color:white; text-decoration:none;}
#content-right .button-search :hover {color:#FFCC33;}

/*  For Advertise */
.ad-head {width:180px; height:20px; padding-top:10px; margin-top:10px; font:bold 14px Arial; text-align:center; color:#880000; background-image:url('images/bg_advertise.gif')}
.ad-area {display:block; border:1px solid #666666; padding:3px; text-align:center; margin-bottom:10px;}
.ad-centered {text-align:center; font-weight:bold;}

.ad-name {color:maroon;  font-weight:bold; text-align:center;}
.ad-name a {color:maroon; text-decoration:none;}
.ad-name a:hover {color: red;}
.ad-name span {text-decoration:underline;}

.ad-style {color:#006; font:normal 11px Arial; line-height:18px; text-align:left;}
.ad-style th {text-align:right; vertical-align:top;}


/* FOOTER */
div#footer {width:970px; padding-top:5px; margin-top:10px; background-color:#0D56A1;}
.footer-menu {width:auto; font-size:11px; line-height:19px;}
.footer-menu ul {width:960px; margin:5px 0 0 10px; padding:0; list-style:none;}
.footer-menu ul li {width:140px; height:390px; float:left; padding: 0 7px; margin:0; background:url('images/bg_footer1.jpg') repeat-x;}
.footer-menu a {color:#D8D8D8; text-decoration:none;}
.footer-menu a:hover {color:yellow;}
.topic-menu {text-align:left; font-weight:bold; font-size:14px; color:white;}
.footer-copyright {background:url('images/bg_footer2.jpg') repeat-x; height:44px; color:#C3C3C3; font-size:11px;}
.text-left {float:left; padding-top:7px; margin-left:10px;}
.text-left a {text-decoration:none; color:#C3C3C3;}
.text-left :hover {text-decoration:none; color:white;}
.text-right {float:right; padding-top:7px; margin-right:10px; text-align:right;}