body{ background:#4D4D4D; overflow:visible;}
#home_page #mainwarp{ background: #FFF url(../images/home_bg.png) center top repeat-y;}
p{ margin-bottom:10px;}
ol{ margin:0 20px;}
#logo{ height:110px; background:URL(../images/logo.png) center center no-repeat; text-indent:-9999px;} 
#logo.mini{ height:50px; background:URL(../images/mini_logo.png) center center no-repeat;} 
#header{ border-bottom:1px solid #666; height:50px;}
#header{ background:#333333;}
#header, #subcontent, #footer{ color:#CCCCCC;}
#mainbody{ background:#FFF url(../images/highlight_bg.png) bottom center repeat-x; min-height:300px;}
#home_page #mainbody{ background-color:transparent !important;}

/* #homecontent{ background:URL(../images/maincontent_bg.png) center top repeat-y; padding:10px 0;} */

#highlight{ color:#4E4E4E; padding-bottom:30px;}
#highlight .description{ margin-right:10px;}
.highlight_button{ display:none;}
#news{ color:#7F7F7F;}
#subcontent{ background:#333333; padding:10px 0; border-top:2px solid #000;}
#knowledge, #learning, #resource, #service{ margin:0; padding:0 10px;}
#knowledge, #learning, #resource{ border-right:1px dotted #999; width:219px;}
.content{ padding:10px;}
.label{ font-size:13px; font-weight:bold; margin:5px 0;}
.label.big{ font-size:20px;}
.label:before, .mainlink:before{ content:"+ ";}
.black{ color:#4E4E4E;}
.white{ color:#FFF;}
.gray{ color:#CCC;}
.button_group{ padding:10px 0;}
.download_button{ text-align:center !important;}
.button_group.right{ text-align:right;}
#popup .popup_close{ top:5px; right:5px; position:absolute;}

#mainmenu{ padding:5px 0;}
.mainlink{ font-weight:bold; margin-bottom:5px; cursor:pointer;}
.mainlink.active{ color:#FDD556;}
.sublink_box{ padding-left:10px;}
.latest_content .sublink a{ display:block;}
.sublink a{ font-size:12px; color:#CCC; text-decoration:none; padding:1px 5px;}
.sublink a:hover{ background:#888; color:#FFF;}
.sublink a:hover .date{ color:#000;}
.sublink .date{ font-size:10px; font-style:italic; color:#999;}
.menubox{ float:left; margin-right:5px !important;}

#mainmenu .main{ width:100px;}
#mainmenu .highlight{ width:155px;}
#mainmenu .resource{ width:130px;}
#mainmenu .learning{ width:130px !important;}
#mainmenu .knowledge{ width:100px;}
#mainmenu .service{ margin-right:0 !important;}

.head_title, .left_title{ text-align:center; font-size:30px; margin:0 !important; padding:5px 0; color:#3B3B3B;}
.left_title{ text-align:left !important;}
.title, highlight{ font-size:16px; font-weight:bold;}
highlight{ display:block;}
textright{ text-align:right; font-style:italic; display:block;}
.sub_title{ font-weight:bold; font-size:18px; color:#666;}
a.sub_title{ text-decoration:none;}
a.sub_title:hover{ text-decoration:underline;}
.date{ font-size:10px; font-style:italic; margin-bottom:5px;}
#popup .date{ font-size:12px !important;}
.description{ color:#808080; text-align:justify;}

.highlight_image{ margin:0 10px 10px 10px; text-align:center;}
.highlight_image img{  border:1px solid #ccc; max-height:300px; max-width:100%;}

.button{ background:#333; color:#CCC; font-size:13px; text-align:center; padding:2px 10px; text-decoration:none; border:none; cursor:pointer; font-weight:bold; margin:0 2px;}
.button:hover{ background:#666;}

.news_box{ margin-bottom:10px;}

#footer{ background:#4D4D4D; border-top:1px solid #666; font-size:11px;}
#footer .contact{ text-align:right;}
#footer .copyright, #footer .contact{ padding:10px 0;}

#gallery{ padding-top:30px;}
.tn{ width:60px; height:60px; overflow:hidden; margin:5px; float:left; border:1px solid #999;}
.tn img{ width:100px;}

#myImageFlow{}
#intropage{ padding-top:30px;}
.submenu{ text-align:center; display:inline;}
.submenu a{ font-size:14px; text-decoration:none; color:#999;}
.submenu.current a, .submenu a:hover{ color:#FFF;}
.separator{ display:inline; height:20px; margin:0 20px;}
.highlight_sub_box{ text-align:center;}


.main_image{ text-align:center; margin:0 0 20px 0;}
.main_image img{ max-width:100%;}

/* jcover */
.ui-jcoverflip{ position: relative;}   
.ui-jcoverflip--item{ position: absolute; display: block;}

.title{ font-size:20px; text-align:center; color:#F90; padding:5px 0;}
/*.gallery_info .title:before, .gallery_info .title:after{ content:" \" ";}*/
.highlight_info, .page{ min-height:150px; padding-bottom:40px;}
.page{ padding-top:40px;}
#popup .page{ margin-top:0 !important; margin-bottom:0 !important;}
#hidden_image_box{ display:none;}

/* shadowbox */
#sb-title, #sb-title-inner{ line-height:normal !important; height:auto !important;}
/*#sb-title{ z-index:1; padding: 5px 5px 25px !important; bottom:0 !important; position:absolute !important;}
#sb-title-inner{ font-size:12px !important;}
#sb-info{ z-index:2;}
*/

#contact_form .label{ width:150px; display:block;}

#black{ background:#000; position:absolute; z-index:10; display:none; top:0; left:0;}
#popup{ position:absolute; background:#FFF; z-index:20; display:none; width:500px; padding:20px; overflow:auto;}
.left, .right{ margin-bottom:30px;}
.right{ margin-top:70px;}
.list_box{ margin-bottom:10px;}
.tn_image{ width:100px; border:1px solid #CCCCCC;}
.tn_image img{ width:100%;}
.list_box .tn_image{ float:left;}
.list_box .list_box_info{ float:right; width:190px;}

.commonpage .left, .commonpage .right{ float:left; margin-top:10px; padding:10px;}
.commonpage.learning .left{ width:620px;}
.commonpage.learning .right{ width:300px;}

.commonpage.knowledge .left{ width:340px;}
.commonpage.knowledge .right{ width:580px; margin-top:95px;}
.commonpage.knowledge .right .list_box{ width:140px; float:left; margin-right:5px;}
.commonpage.knowledge .right .list_box .tn_image{ float:none; margin:0 auto 10px auto; width:125px; height:160px; border:none;}
.commonpage.knowledge .right .list_box .tn_image img{ border:1px solid #CCCCCC;}
.commonpage.knowledge .right .list_box .list_box_info{ float:none; width:auto; text-align:center;}

.commonpage.knowledge .left .title, .new_title{ text-align:left; font-size:18px; color:#919191;}
.new_title{ font-weight:bold; float:none !important; clear:both;}
.commonpage.knowledge .highlight_image{ margin:0 0 10px 0; width:340px;}
.commonpage.knowledge .highlight_image img{}
.commonpage.knowledge .title_box .button_group{ text-align:right;}
.commonpage.knowledge .title_box .button{}

.commonpage.service .left{ width:180px; text-align:right;}
.commonpage.service .right{ width:740px;}
.commonpage.service .left .list_box{ margin-bottom:10px;}

.commonpage.service .right .highlight_image_box{ width:500px; float:left;}
.commonpage.service .right .info_box{ margin-left:10px; width:220px; float:right;}
.commonpage.service .highlight_image{ margin:10px auto;}
.commonpage.service .highlight_image img{ border:1px solid #CCC; max-height:none;}
.commonpage.service .title_box .button_group{ text-align:right;}
.commonpage.service .title_box .button{}
.commonpage.service .sub_title{ font-size:22px; font-weight:normal;}

.boxofrow{ margin-bottom:10px;}
.more_link{ color:#000; cursor:pointer;}
.simple_gallery .image_box{ margin-bottom:20px;}
.simple_gallery .description{ text-align:center;}
.text_right{ text-align:right;}
.right_title{ text-align:right; font-size:18px; color:#666; font-style:italic;}

.annouce{ padding:10px; font-size:24px; text-align:center; text-shadow:2px 2px 2px rgba(0, 0, 0, 0.4);}
.hidden{ display:none;}

#mainbody.resource{ padding:10px 0 20px 0;}
.complex_gallery{ padding:10px; border:1px solid #CCCCCC;}
.sub_cat_box{ margin:5px 0;}
.sub_cat_box a{ color:#919191; font-size:14px; text-decoration:none;}
.sub_cat_box a:hover{ color:#444;}
.sub_menu_link{ margin-right:10px; padding-right:10px; border-right:1px solid #CCC; float:left;}
.sub_menu_link.last{ border-right:none;}
.complex_gallery .box{ float:left; width:179px; margin-right:10px;}
.complex_gallery .box.last{ margin-right:0px !important;}
.complex_gallery .info_box{ text-align:right;}
.complex_gallery .tn_image{ margin:0 auto 10px auto; width:100%; height:150px; overflow:hidden;}
.complex_gallery .sub_title{ font-size:16px; margin-bottom:5px;}
.artist_name, .artist_work_box{ border-right:1px solid #ccc; margin-right:9px; height:100%;}
.artist_avatar{ width:50px; height:50px; overflow:hidden; border:1px solid #CCCCCC; margin-right:10px; float:left;}
.artist_avatar img{ height:100%;}
.artist_box{ margin-bottom:15px;}
/*.artist_box.active{ background:#EEE;}*/
.work_description{ text-align:justify;}
.artist_work_box .artist_box{ text-align:right; padding-right:10px;}
.artist_work .sub_title, .work_detail .new_title{ font-size:22px; font-weight:normal;}
.work_detail .description{ text-indent:50px;}
.artist_work .sub_title:hover{ text-decoration:none;}

.image_number{ text-align:right;}
.selector_gallery .image_box img{ border:1px solid #CCCCCC; max-width:100%;}
.image_num_button{ border:1px solid #666; color:#666; padding:0px 4px; margin:0 1px; text-decoration:none;}
.image_num_button:hover, .image_num_button.active{ background:#666; color:#FFF;}
.selector_gallery{ text-align:center;}
.artist .left_title{ padding-bottom:20px;}
.selector_gallery .image_description{ text-align:center; font-style:italic; margin:5px 0; color:#808080;}
#page_artist .page{ padding:0 0 20px 0!important;}

/*member menu*/
#member_button{}
#member_button a{ font-size:18px; font-weight:bold; color:#000; text-decoration:none;}
#member_button a:hover{ color:#666;}
#member_box{ padding-top:10px; border-top:1px dotted #CCC;}
#member_box .box{}
#member_menu{}
.member_text{ margin-bottom:10px; font-size:18px; text-shadow:1px 1px 1px RGBA(255,255,255,1);}
#login.firsttime, #forgot, #register, #member_setting{ display:none;}
#forgot_button, #register_button{ color:#333; text-decoration:none;}
#forgot_button:hover, #register_button:hover{ color:#000; text-decoration:underline;}
.foul{ background:#F30; color:#FFF; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5); margin:5px 0; font-weight:bold; padding:3px 5px; display:inline;}
#member_back{ margin-top:10px;}

/*lang*/
#langmenu{ margin:5px; position:absolute; top:0; left:0;}
#langmenu a{ margin:0 2px; width:16px; height:11px; text-indent:-9999px; display:block; float:left;}
#langmenu .thai{ background:url(../images/th_o.png) center center no-repeat;}
#langmenu .english{ background:url(../images/us_o.png) center center no-repeat;}
#langmenu .thai.active{ background:url(../images/th.png) center center no-repeat;}
#langmenu .english.active{ background:url(../images/us.png) center center no-repeat;}