@charset "utf-8";
/* CSS Document */

body, p, ul, li, ol, h1, h2, h3, h4, h5, h6, form, menu, hr { padding:0px; margin:0px; list-style:none }
input{font-family:Tahoma;}
body { font-family:Tahoma; font-size:12px; color:#333; background:#D8D2C5}
a { text-decoration:none; color:#333333;}
a:hover { text-decoration:underline; color:#FF6600; }
a img { border:0; }
ul, li, ol { list-style:none; }
header, section, article, hgroup, aside, footer, figure, figcaption, nav { display:block; padding:0; margin:0; }
address{ font-style:normal}
* .error { border-color:#F00 !important; }

h1{font-size:14px; display:inline; color:#333 }
h2{font-size:14px; font-weight:normal; display:inline; color:#333}

.f10{font-size:10px;}
.f11{font-size:11px;}
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f17{font-size:17px;}
.f18{font-size:18px;}
.f19{font-size:19px;}
.f20{font-size:20px;}
.f22{font-size:22px;}
.f24{font-size:24px;}
.f26{font-size:26px;}
.f28{font-size:28px;}
.f30{font-size:30px;}
.f36{font-size:36px;}

.bg_trans05{background:url(bg_trans05.png) top left repeat}
.bg_trans10{background:url(bg_trans10.png) top left repeat}
.bg_trans20{background:url(bg_trans20.png) top left repeat}
.bg_trans30{background:url(bg_trans30.png) top left repeat}
.bg_trans40{background:url(bg_trans40.png) top left repeat}
.bg_trans50{background:url(bg_trans50.png) top left repeat}
.bg_trans60{background:url(bg_trans60.png) top left repeat}
.bg_trans70{background:url(bg_trans70.png) top left repeat}
.bg_trans80{background:url(bg_trans80.png) top left repeat}
.bg_trans90{background:url(bg_trans90.png) top left repeat}

.bg_w_trans10{background:url(bg_w_trans10.png) top left repeat}
.bg_w_trans20{background:url(bg_w_trans20.png) top left repeat}
.bg_w_trans30{background:url(bg_w_trans30.png) top left repeat}
.bg_w_trans40{background:url(bg_w_trans40.png) top left repeat}
.bg_w_trans50{background:url(bg_w_trans50.png) top left repeat}
.bg_w_trans60{background:url(bg_w_trans60.png) top left repeat}
.bg_w_trans70{background:url(bg_w_trans70.png) top left repeat}
.bg_w_trans80{background:url(bg_w_trans80.png) top left repeat}
.bg_w_trans90{background:url(bg_w_trans90.png) top left repeat}

.mg_auto {margin:auto;}
.clear_both{clear:both;}
.t_align_c {text-align:center;}
.t_align_r {text-align:right;}
.t_align_l {text-align:left;}
.fl_l {float:left;}
.fl_r {float:right;}

.fco_gray01{color:#333333}
.fco_gray01 a {color:#333333}
.fco_gray01 a:hover {color:#CC0000}

.fco_gray02{color:#666}
.fco_gray02 a {color:#666}
.fco_gray02 a:hover {color:#CC0000}

.fco_gray03{color:#999}
.fco_gray03 a {color:#999}
.fco_gray03 a:hover {color:#CC0000}

.fco_fb{color:#465F8D}
.fco_fb a {color:#465F8D}
.fco_fb a:hover {color:#F60}

.fco_tw{color:#0095C6}
.fco_tw a {color:#0095C6}
.fco_tw a:hover {color:#F60}

.fco_white01{color:#FFF}
.fco_white01 a {color:#FFF}
.fco_white01 a:hover {color:#F10033}

.fco_red01{color:#F00}
.fco_red01 a {color:#F00}
.fco_red01 a:hover {color:#30F}

.fco_red02{color:#CC0000}
.fco_red02 a {color:#CC0000}
.fco_red02 a:hover {color:#30F}

.fco_brown01{color:#CC6600}
.fco_brown01 a {color:#CC6600}
.fco_brown01 a:hover {color:#F00}

.fco_brown02{color:#993300}
.fco_brown02 a {color:#993300}
.fco_brown02 a:hover {color:#FFE400}

.fco_yel01{color:#FF0}
.fco_yel01 a {color:#FF0}
.fco_yel01 a:hover {color:#F03}


.sha_t01{text-shadow:0px 1px 0px rgba(255,255,255,1); -moz-text-shadow:0px 1px 0px rgba(255,255,255,1); -webkit-text-shadow:0px 1px 0px rgba(255,255,255,1);}
.sha_t02{text-shadow:0px 1px 1px #000; -moz-text-shadow:0px 1px 1px #000; -webkit-text-shadow:0px 1px 1px #000;}
.sha_t03{text-shadow:0px 1px 2px #000; -moz-text-shadow:0px 1px 2px #000; -webkit-text-shadow:0px 1px 2px #000;}
.sha_b01{box-shadow:0 1px 2px rgba(0,0,0,0.4) inset; -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4) inset; -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4) inset;}
.sha_b02{box-shadow:0 1px 4px rgba(0,0,0,0.5); -moz-box-shadow:0 2px 4px rgba(0,0,0,1); -webkit-box-shadow:0 2px 4px rgba(0,0,0,1);}
.sha_b03{box-shadow:0 2px 3px #666666; -moz-box-shadow:0 1px 3px #333; -webkit-box-shadow:0 2px 3px #666666;}
.sha_b04{box-shadow:0 2px 3px #C7C7C7 inset; -moz-box-shadow:0 2px 3px #C7C7C7 inset; -webkit-box-shadow:0 2px 3px #C7C7C7 inset;}



.curve_con01{border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;}
.curve_con02{border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
.curve_con03{border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px;}

.curve_contest{
border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;

border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;

border-bottom-left-radius: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px;

border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;}



.gd_fr01{
background: #B3AA96; /* Old browsers */
background: -moz-linear-gradient(top,  #B3AA96 0%, #D6CEBB 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#B3AA96), color-stop(100%,#D6CEBB)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #B3AA96 0%,#D6CEBB 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #B3AA96 0%,#D6CEBB 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #B3AA96 0%,#D6CEBB 100%); /* IE10+ */
background: linear-gradient(top,  #B3AA96 0%,#D6CEBB 100%); /* W3C */
}

.gd_fr02{
background: #5F4A35; /* Old browsers */
background: -moz-linear-gradient(top,  #5F4A35 0%, #846C54 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5F4A35), color-stop(100%,#846C54)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #5F4A35 0%,#846C54 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #5F4A35 0%,#846C54 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #5F4A35 0%,#846C54 100%); /* IE10+ */
background: linear-gradient(top,  #5F4A35 0%,#846C54 100%); /* W3C */
}





hr{ border-bottom:1px solid #FFF; border-top:1px solid #A49C8B}

aside.tab_kapook{ background:url(tab_kapook.jpg) top left repeat-x; height:34px; color:#FFFFFF; font-size:14px}
aside.tab_kapook a{ color:#FFF} aside.tab_kapook a:hover{ color:#FF0}
aside.tab_kapook>div{ width:1002px; margin:auto;}
aside.tab_kapook>div>p{float:left;}
aside.tab_kapook>div>p.port_k{width:33px;}
aside.tab_kapook>div>p.slogan{width:570px; height:27px; padding:7px 0 0 10px}
aside.tab_kapook>div>p.truhit{width:30px; height:30px; padding:4px 0 0; border-right:1px solid #6E6E6E}
aside.tab_kapook>div>p.mem{ background:url(bull_member.gif) 6px 3px no-repeat; height:27px; padding:7px 5px 0 35px; border-left:1px solid #232324; border-right:1px solid #6E6E6E}
aside.tab_kapook>div>p.log{ background:url(bull_member1.gif) 6px 5px no-repeat; height:28px; padding:6px 5px 0 25px; border-left:1px solid #232324;}

/*login kapook*/
.login-slide { width:266px; height:114px; background:url(http://kapook.com/images-new/bg-login.png) top center no-repeat;  overflow:hidden; position:absolute; top:34px; right:150px; }
.login-slide ul { padding:10px 0 0 0; }
.login-slide ul li { text-align:right; padding:5px 25px 3px 0; color:#3A6909; }
.login-slide ul li input.login-email { width:140px; }
.login-slide ul li input.login-btn { float:right; margin:0 0 0 5px; }
.login-slide ul li p { float:left; width:165px; font-size:11px; line-height:12px; }
.login-slide ul li p a { color:#3A6909; text-decoration:underline; }
.login-slide ul li p a:hover { color:#990000; }
.login-slide ul.login-member { padding:0px; margin:15px 20px 0; overflow:hidden; }
.login-slide ul.login-member li.avatar { width:50px; text-align:center; margin:0 5px 0 0; }
.login-slide ul.login-member li.avatar a img { border:1px solid #FFFFFF; }
.login-slide ul.login-member li { width:160px; display:inline; float:left; text-align:left; padding:0; }
.login-slide ul.login-member li a { color:#333333; font-size:11px; color:#990000; }
.login-slide ul.login-member li strong a { font-size:16px; color:#003300; }
/*end login kapook*/

body>header{ background:url(hd_bg.jpg) top left repeat-x; height:113px;}
body>header>div{ width:1002px; overflow:hidden; position:relative; height:113px;}
body>header>div p{ float:left}
body>header>div div.logo{ position:absolute; z-index:20; top:10px; left:5px}

body>nav.innav{ background:url(nav_bg.jpg) top left repeat-x; height:48px; margin:0 0 10px}
body>nav.innav>div{width:1002px; font-size:18px; height:41px;}
body>nav.innav>div>p{float:left; padding:0 7px 0; height:39px; text-align:center; margin:0 4px 0;}
body>nav.innav>div>p:hover{background:url(bg_trans10.png) top left repeat; cursor:pointer; border:1px solid #B8B8B8; border-radius:5px; -moz-border-radius:5px; box-shadow:0 2px 3px rgba(0,0,0,0.4); -moz-box-shadow:0 2px 3px rgba(0,0,0,0.4); -webkit-box-shadow:0 2px 3px rgba(0,0,0,0.4);}
body>nav.innav>div>p.onpage{background: url(bg_trans20.png) top left repeat; border:1px solid #B8B8B8; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.4) inset; -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4) inset; -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4) inset;}
body>nav.innav>div>p.onpage span{ position:relative}
body>nav.innav>div>p.onpage span:before{ content:url(arrow.png); position:absolute; z-index:2; top:25px; left:0%}
body>nav.innav>div>p img{ float:left}
body>nav.innav>div>p span{ display:block; float:left; padding:7px 0 0 4px}


/*for index guide page - inner category and content page - guide + howto + news */
body>nav.innav2{ background:url(nav_bg.jpg) top left repeat-x; height:41px; margin:0 0 0;}
body>nav.innav2>div{width:1002px; font-size:18px; height:41px;}
body>nav.innav2>div>p{float:left; padding:0 10px 0; height:39px; text-align:center; margin:0;}
body>nav.innav2>div>p:hover{background:url(bg_trans10.png) top left repeat; cursor:pointer; border:1px solid #B8B8B8; border-radius:5px; -moz-border-radius:5px; box-shadow:0 2px 3px rgba(0,0,0,0.4); -moz-box-shadow:0 2px 3px rgba(0,0,0,0.4); -webkit-box-shadow:0 2px 3px rgba(0,0,0,0.4);}
body>nav.innav2>div>p.onpage{background: url(bg_trans20.png) top left repeat; border:1px solid #B8B8B8; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.4) inset; -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4) inset; -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4) inset;}
body>nav.innav2>div>p.onpage span{ position:relative}
body>nav.innav2>div>p.onpage span:before{ content:url(arrow.png); position:absolute; z-index:2; top:25px; left:0%}
body>nav.innav2>div>p img{ float:left}
body>nav.innav2>div>p span{ display:block; float:left; padding:7px 0 0 4px}




div.search{width:1002px; margin:15px auto 10px; overflow:hidden}
div.search>p.dis{float:left; width:600px; margin:0 20px 0 10px}
div.search>section{ background:url(bg_social.jpg) top left no-repeat; width:329px; float:left}
div.search>section>ul{ margin:7px 0 0 10px}
div.search>section>ul>li{ float:left; height:20px; display:inline}
div.search>section>ul>li.facebook{width:100px;}
div.search>section>ul>li.twitter{ width:100px; overflow:hidden}
div.search>section>ul>li.google{width:90px; overflow:hidde}
div.search>section>div{margin:15px 0 0; overflow:hidden}
div.search>section>div>p{float:left}
div.search>section>div input.p1{ border:1px #E2E2E2 solid; margin:0 10px 0; width:190px; height:26px; padding:0 5px 0}
div.search>section>div input.p2 {border:1px #E2E2E2 solid; width:70px; height:28px; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.4) inset; -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.4) inset; -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.4) inset;}


/*เรียงกล่อง*/
#tiles {position: relative; margin: 0;}
#tiles figure {width:300px; display:none; position:relative; padding:4px; border:1px solid #dedede; background:#B8AE9C; border-radius:2px; cursor:pointer; border:1px solid #E7E2D9; box-shadow:0 2px 2px rgba(0,0,0,0.4); -moz-box-shadow:0 2px 2px rgba(0,0,0,0.4); -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4);}
#tiles figure>a>span{ background:#0066FF; display:block; position:absolute; top:4px; left:4px; width:300px; height:300px; opacity:0.6;  background:url(cover_vdo.png) top left no-repeat; transition:all 0.2s ease-in-out}
#tiles figure>a>span:hover{ opacity:1;}
#tiles figure img {display: block;}
#tiles figure p {color:#573823; overflow:hidden; font-size:14px; margin:7px 0 0 0;}
#tiles figure p>span{ display:block; font-size:14px}
#tiles figure p>a.inst{display:block; float:left; padding:3px 0 0 0;}
#tiles figure p>a.lk{ float:right; display:block; background:url(like_icon.png) left 4px no-repeat; padding:3px 0 0 20px;}

/*หน้า group*/
#insta_pic{position: relative; margin:0 auto 0;}
#insta_pic>figure{ width:150px; float:left; background:#6B6055; color:#DED8CD; padding:5px; border:1px solid #E7E2D9; background:#7E7462; box-shadow:0 2px 2px rgba(0,0,0,0.4); -moz-box-shadow:0 2px 2px rgba(0,0,0,0.4); -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4);}
#insta_pic>figure img{box-shadow:0 1px 2px #564F40; -moz-box-shadow:0 1px 2px #564F40; -webkit-box-shadow:0 1px 2px #564F40;}
#insta_pic>figure a{ color:#FFFF00; font-weight:bold; font-size:14px} #insta_pic>figure a:hover{color: #FFF}
#insta_pic>figure>figcaption{ font-size:14px; overflow:hidden}
#insta_pic>figure>figcaption>a.nm{display:block; text-align:right; padding:3px 0 4px 0}
#insta_pic>figure>figcaption>a.inst2{display:block; text-align:right; color: #FFF; margin:0 0 5px}
#insta_pic>figure>figcaption>a.lk2{display:block; margin:4px 0 5px; background:url(like_icon.png) left 4px no-repeat; padding:3px 0 0 20px;}
/*end เรียงกล่อง*/





div.page_num{ text-align:left; padding:15px 50px 20px; font-size:16px;}
div.page_num a{ display:inline; color:#333; padding:3px 8px 3px; margin:0 3px; text-align:center;  border:1px solid #FFF; background:url(bg_trans20.png) top left repeat #ECE4D5; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; box-shadow:0 2px 4px rgba(0,0,0,0.4); -moz-box-shadow:0 2px 4px rgba(0,0,0,0.4); -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.4);}
div.page_num a.back, div.page_num a.next{ color:#FF0; padding:3px 12px 3px; background:url(bg_trans50.png) top left repeat #EADDB0; border: none; }
div.page_num a.on{border:1px solid #FFF; background:url(bg_trans50.png) top left repeat #ECE4D5; box-shadow:0 2px 3px rgba(0,0,0,0.5) inset; -moz-box-shadow:0 2px 3px rgba(0,0,0,0.5) inset; -webkit-box-shadow:0 2px 3px rgba(0,0,0,0.5) inset;}


div.search_at{ position:absolute; right:50px; top:215px; width:329px; margin:0 0 0; overflow:hidden}
div.search_at>p{float:left}
div.search_at input.p1{ border:1px #E2E2E2 solid; margin:0 10px 0; width:190px; height:26px; padding:0 5px 0}
div.search_at input.p2 {border:1px #E2E2E2 solid; width:70px; height:28px; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.4) inset; -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.4) inset; -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.4) inset;}


/*tab kapook*/
body>nav.kapook { background:#505051; position:relative; height:34px; margin:0 auto; box-shadow:0 -10px 10px rgba(0,0,0,0.2) inset, 0 0 2px rgba(0,0,0,0.8); }
body>nav.kapook>ul.topbar{ width:1002px; margin:auto}
body>nav.kapook>ul.topbar li { display:inline; float:right; color:#FFFFFF; height:34px; padding-right:10px; border-left:1px solid #252626; border-right:1px solid #6E6E6E; }
body>nav.kapook>ul.topbar li:first-child { border:0; }
body>nav.kapook>ul.topbar li:last-child { border-left:0; }
body>nav.kapook>ul.topbar li a { -ms-transition:color linear 0.4s; -moz-transition:color linear 0.4s; -webkit-transition:color linear 0.4s; -o-transition:color linear 0.4s; color:#FFFFFF; display:block; padding:0 5px; height:34px; line-height:32px; text-shadow:0 1px 1px rgba(0,0,0,0.8); }
body>nav.kapook>ul.topbar li a:hover { text-decoration:none; color:#F90; }
body>nav.kapook>ul.topbar li a span { -ms-transition:color linear 0.4s; -moz-transition:color linear 0.4s; -webkit-transition:color linear 0.4s; -o-transition:color linear 0.4s; font-size:18px; display:inline; float:left; color:#C5C5C5; padding:0 5px 0 10px; }
body>nav.kapook>ul.topbar li a:hover span { color:#F90; }
body>nav.kapook>ul.topbar li.submenu { float:left; }
body>nav.kapook>ul.topbar li.submenu a { display:block; width:200px; padding:0; }
body>nav.kapook>ul.topbar li.submenu a span { font-size:30px; color:#FFFFFF; padding:0; text-align:center; display:inline; float:left; width:34px; height:34px; background:#F30000; box-shadow:0 -15px 15px rgba(0,0,0,0.3) inset; border-right:1px solid #2E2F2F; }
body>nav.kapook>ul.topbar li.submenu a img { display:inline; float:left; margin:6px 0 0 7px; }
body>nav.kapook>ul.menu { overflow:hidden; width:780px; padding:0 0 0 220px; height:0; position:absolute; top:34px; left:174px; z-index:9; background:#333; background:rgba(0,0,0,0.8); border-bottom-left-radius:10px; border-bottom-right-radius:10px; box-shadow:0 2px 2px rgba(0,0,0,0.4); }
body>nav.kapook>ul.menu:before { content:" "; width:1px; height:1px; position:absolute; top:0; left:8px; border-top:9px solid #AC0000; border-left:8px solid transparent; border-right:8px solid transparent; }
body>nav.kapook>ul.menu li { border-left:1px solid #363636; display:inline; float:left; width:190px; }
body>nav.kapook>ul.menu li:first-child, nav>ul.menu li:nth-child(2), nav>ul.menu li:nth-child(3), nav>ul.menu li:nth-child(4) { margin-top:10px; }
body>nav.kapook>ul.menu li a { color:#FFF; line-height:25px; height:25px; display:inline; float:left; }
body>nav.kapook>ul.menu li a span { margin-right:5px; font-size:16px; display:inline; float:left; color:#FFF; border-left:1px solid #676767; padding-left:10px; }
body>nav.kapook>form.loginbox { color:#CCCCCC; overflow:hidden; width:330px; height:0; position:absolute; top:34px; right:0; z-index:9; background:#333; background:rgba(65,65,65,1); border-bottom-left-radius:10px; border-bottom-right-radius:10px; box-shadow:0 2px 2px rgba(0,0,0,0.4), 0 -50px 60px rgba(0,0,0,0.5) inset, 0 5px 4px rgba(0,0,0,0.2) inset; }
body>nav.kapook>form.loginbox fieldset { border-radius:10px; margin:10px; border:1px solid #676767; }
body>nav.kapook>form.loginbox fieldset legend { text-align:center; font-weight:bold; color:#98D634; padding:0 10px; }
body>nav.kapook>form.loginbox fieldset label { display:inline; float:left; width:80px; text-align:right; padding:6px 10px 0 0; margin-top:5px; }
body>nav.kapook>form.loginbox fieldset input.input-login { display:inline; float:left; width:180px; border-radius:10px; margin-top:5px; font-size:16px; padding:3px; background:#666666; border:1px solid #000; box-shadow:0 2px 2px rgba(0,0,0,0.5) inset; color:#FFFFFF; }
body>nav.kapook>form.loginbox fieldset input.input-login:focus { background:#FF9600; color:#333; }
body>nav.kapook>form.loginbox fieldset input.btn-login { margin:5px 0 0 90px; background:#4F4F4F; color:#FF9900; padding:5px 20px; border-radius:10px; border:1px solid #000; box-shadow:0 2px 2px 1px rgba(0,0,0,0.5), 0 2px 4px rgba(255,255,255,0.3) inset; cursor:pointer; }
body>nav.kapook>form.loginbox fieldset input.btn-login:hover { background:#707070; }
body>nav.kapook>form .connectFB { margin:10px; }
body>nav.kapook>form .connectFB a { display:block; padding:5px 0; transition:background linear .3s; -moz-transition:background linear .3s; -webkit-transition:background linear .3s; -o-transition:background linear .3s; background:#557AC5; border-radius:10px; margin:0 10px; border:1px solid #25567C; box-shadow:0 -15px 30px rgba(52,78,133,0.9) inset, 1px 1px 1px rgba(255,255,255,.5) inset; height:40px; color:#FFF; text-shadow:0 1px 1px rgba(0,0,0,.8); font-size:22px; line-height:40px; }
body>nav.kapook>form .connectFB a span { display:inline; float:left; padding:0 10px 0 12px; border-right:1px solid #6589D2; margin-right:10px; font-size:28px; }
body>nav.kapook>form .connectFB a:hover { text-decoration:none; background:#70C5F5; }
body>nav.kapook>form .connectFB:before { content:" หรือ "; display:block; width:100%; height:20px; clear:both; text-align:center; }

body>nav.kapook>ul.topbar li.login a.btnloginnow img { width:25px; height:25px; display:inline; float:left; margin:4px 5px 0 0 ; border:1px solid #999; }
body>nav.kapook>ul.topbar li.login a.btnloginnow { font-weight:bold; color:#FF9900; }
body>nav.kapook>div.loginnow { color:#CCCCCC; overflow:hidden; width:250px; height:0px; position:absolute; top:34px; right:0; z-index:9; background:#333; background:rgba(65,65,65,1); border-bottom-left-radius:10px; border-bottom-right-radius:10px; box-shadow:0 2px 2px rgba(0,0,0,0.4), 0 -50px 60px rgba(0,0,0,0.5) inset, 0 5px 4px rgba(0,0,0,0.2) inset; }
body>nav.kapook>div.loginnow a img { display:inline; float:left; margin:15px 10px 0 20px; border:2px solid #999; border-radius:10px; }
body>nav.kapook>div.loginnow strong { display:block; margin-top:10px; }
body>nav.kapook>div.loginnow strong a { font-size:18px; color:#FF9900; }
body>nav.kapook>div.loginnow a.subbtn { display:inline; float:left; border:1px solid #CCC; padding:2px 5px; border-radius:10px; box-shadow:0 0 3px rgba(0,0,0,0.5); margin-top:5px; background:#666666; box-shadow:0 -15px 10px rgba(0,0,0,0.3) inset; color:#FFFFFF; font-weight:bold; text-shadow:0 0 2px #000000; width:120px; }
body>nav.kapook>div.loginnow a.subbtn:hover { text-decoration:none; background:#FF6600; color:#000; text-shadow:0 0 0 #000; }
/*end tab kapook*/



/*foot kapook*/
footer { margin:0 auto; overflow:hidden; }
footer nav { overflow:hidden; position:absolute; z-index:9; }
footer nav>a { color:#FFFFFF; display:inline-block; background:#000; padding:5px 30px 5px 10px; border-radius:10px 40px 0 0; }
footer nav>ul { clear:both; width:100%; background:#333; }
footer nav>ul li { display:inline; float:left; }
footer nav>ul li a { display:block; width:100px; background:#FA0064; border-top:5px solid #FA0064; height:0px; text-align:center; font-weight:bold; color:#FFFFFF; overflow:hidden; transition:height linear .2s; -webkit-transition:height linear .2s; -moz-transition:height linear .2s; -o-transition:height linear .2s; }
footer nav>ul li a span { display:block; font-size:24px; }
footer nav>ul li:nth-child(2) a { background:#56CA33; border-top:5px solid #56CA33; }
footer nav>ul li:nth-child(3) a { background:#FFDB0D; border-top:5px solid #FFDB0D; }
footer nav>ul li:nth-child(4) a { background:#FF240E; border-top:5px solid #FF240E; }
footer nav>ul li:nth-child(5) a { background:#9427CE; border-top:5px solid #9427CE; }
footer nav>ul li:nth-child(6) a { background:#A8D6F0; border-top:5px solid #A8D6F0; }
footer nav>ul li:nth-child(7) a { background:#3C5A98; border-top:5px solid #3C5A98; }
footer nav>ul li:nth-child(8) a { background:#FFDB0D; border-top:5px solid #FFDB0D; }
footer nav>ul li:nth-child(9) a { background:#FFA10D; border-top:5px solid #FFA10D; }
footer nav>ul li:nth-child(10) a { background:#FEA7D1; border-top:5px solid #FEA7D1; }
footer nav>ul li a:hover { text-decoration:none; height:50px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; }

footer section { width:1000px; overflow:hidden; margin:30px auto 0; position:relative; padding-top:10px; }
footer section article.sitemap { width:300px; display:inline; float:left; margin:5px 15px 20px; min-height:185px; }
footer section article.sitemap h4 { border-bottom:1px dashed #CCCCCC; padding:5px 0; }
footer section article.sitemap ul { overflow:hidden; padding-top:5px; }
footer section article.sitemap ul li { display:inline; float:left; width:150px; padding:2px 0 0; }
footer section article.sitemap ul li a { color:#4D4D4D; display:block; padding:3px 0 0; -ms-transition:padding linear .3s; -webkit-transition:padding linear .3s; -moz-transition:padding linear .3s; -o-transition:padding linear .3s; }
footer section article.sitemap ul li a:hover { background:#CCC; padding-left:10px; }
footer section article.sitemap ul li a:before { content:"• ";}
footer section article.service { width:670px; display:inline; float:right; }
footer section article.service h4 { display:inline; float:right; width:340px; border-bottom:1px dashed #CCCCCC; padding:5px 0; position:relative; z-index:3; }
footer section article.service ul { display:inline; float:right; width:330px; overflow:hidden; margin-left:10px; padding-top:5px; }
footer section article.service ul li { display:inline; float:left; width:165px; }
footer section article.service ul li>a { color:#4D4D4D; display:block; padding:3px 0 3px 3px; margin-right:5px; position:relative; z-index:3; }
footer section article.service ul li>a:before { content:"•  ";}
footer section article.service ul li>a:hover { background:#666666; color:#FFF; text-decoration:none; }
footer section article.service ul li:last-child { position:absolute; bottom:0; right:0; border-radius:40px 0 0 0; border-top:3px solid #999; background:#333333; width:150px; padding-left:10px; }
footer section article.service ul li:last-child>a { color:#FFFFFF; font-size:16px; display:block; line-height:16px; text-align:center; padding:4px 0; }
footer section article.service ul li:last-child>a span { color:#92FF05; text-transform:uppercase; font-size:11px; }
footer section article.service ul li:last-child>a:before { content:" "; }
footer section article.service ul li:last-child>a:hover { background:none; }
footer section article.service figure { display:inline; float:left; width:330px; }
footer section article.service ul li figure { width:670px; padding-top:10px; position:absolute; top:0; right:0; z-index:0; visibility:hidden; display:none; background:#FFFFFF; box-shadow:0 -50px 50px rgba(0,0,0,0.1) inset; }
footer section article.service ul li:hover figure { visibility:visible; display:block; }
footer>aside { background:#535353; box-shadow:0 -10px 20px rgba(0,0,0,0.6) inset; padding:5px 10px 2px; clear:both; }
footer>aside a { display:inline-block; margin-right:5px; position:relative; }
footer>aside a.suggest { display:inline; float:right; padding:3px 10px; border:1px solid #999; background:#999999; box-shadow:0 -12px 10px rgba(0,0,0,0.3) inset; color:#FFF; font-size:12px; border-radius:10px; margin:3px; transition:background linear .3s; -moz-transition:background linear .3s; -webkit-transition:background linear .3s; -o-transition:background linear .3s; }
footer>aside a.suggest:hover { text-decoration:none; color:#000; background:#84D510; border:1px solid #5F9A0B; }



@-webkit-keyframes resize {
	0% { -webkit-transform:rotateY(0deg); }
	50% { -webkit-transform:rotateY(90deg); }
	100% { -webkit-transform:rotateY(180deg); }
}
@-moz-keyframes resize {
	0% { -moz-transform:rotateY(0deg); }
	50% { -moz-transform:rotateY(90deg); }
	100% { -moz-transform:rotateY(180deg); }
}

footer>aside a:hover img {
	-webkit-animation-name: resize;
	-webkit-animation-duration: .4s;
	-webkit-animation-iteration-count: 4;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-name: resize;
	-moz-animation-duration: .4s;
	-moz-animation-iteration-count: 4;
	-moz-animation-direction: alternate;
	-moz-animation-timing-function: ease-in-out;
}
/*end foot kapook*/








section.info{ background:url(bg_hd_dara.jpg) top left repeat-x; padding:10px 0 0; height:183px; margin:20px auto}
section.info>div{ width:1002px; margin:auto; overflow:hidden}
section.info>div>figure{ width:150px; border:1px solid #715B43; margin:10px 20px 0; float:left}
section.info>div>figcaption{float:left; max-width:440px;} section.info>div>figcaption strong{ color:#BBE057}
section.info>div>ul.count{ float:right; overflow:hidden}
section.info>div>ul.count>li{ width:100px; text-align:center; float:left; margin:0 10px 0; border:1px solid #908479; font-size:12px; color:#CCC}
section.info>div>ul.count>li span{ color:#FFF}
section.info>div>hr{ width:800px; border-bottom:1px solid #65513C; border-top:1px solid #3E3024; margin:10px 0 10px}
section.info>div>div.share{float:left; overflow:hidden;}
section.info>div>div.share>a{display:block; float:left; margin:2px 5px 0;}
section.info>div>div.share span{display:block; float:left; width:130px; margin:0 5px 0;}
	
section.info>div>div.info_dara{ float:left; width:800px; height:44px; overflow:hidden; margin:5px 0 0; }
section.info>div>div.like_dara{float: right; width:200px; text-align:center; overflow:hidden; line-height:15px}
section.info>div>div.like_dara strong{ font-size:18px; color:#FF0}
	
article.photo{ width:1002px; margin:20px auto 0; overflow:hidden}
article.photo>figure{ background:#6F6A62; float:left; width:612px; padding:8px; border:1px solid #EEEAE1; overflow:hidden}
article.photo>figure>a>img{ margin:0 0 10px}
article.photo>figure>figcaption{ float:left; line-height:26px}
article.photo>figure>p{ float:right; padding:0 10px}
	
section.info_photo{ width:350px; float:right; overflow:hidden }
section.info_photo>figure{ width:100px; margin:0 0 0 10px; float:left; border:1px solid #FFF}
section.info_photo>figcaption{ width:220px; float:left; margin:0 0 0 10px}
section.info_photo>figcaption>span{ display:block; margin:6px 0 0}
section.info_photo>div.share{ float:left; margin:10px 0 0 10px; width:340px}
section.info_photo>div.share>a{ display:block; float:left; margin:7px 5px 0;}
section.info_photo>div.share span{ display:block; float:left; width:160px; margin:0 5px 0;}
section.info_photo>hr{ float:left; width:340px; margin:10px 0 10px}
section.info_photo>div.hd{ width:345px; margin:0 0 10px}




section.relate{ width:1002px; margin:auto}
section.relate span{padding:5px 10px; display: inline-block}
	
/*slide relate*/
div#slides,div#slides_world{ position:relative;}

.slides_container {width:830px; display:none; margin:10px  auto 0}
.slides_container div {width:830px; height:205px; margin:6px 0 0;}
.slides_container ul{ overflow:hidden}	
.slides_container li{ float:left; width:150px; height:200px; margin:0 8px; text-align:center; font-size:12px;}
.pagination {list-style:none; margin:0; padding:0; display:none;}
.pagination .current a {color:red;}

div#slides a.prev,div#slides_world a.prev{position:absolute; top:20px; left:40px; z-index:98; width:40px; color:#D8D2C5; height:137px; display:block; background:url(slide_bt1.png) top left  no-repeat;}
div#slides a.next,div#slides_world a.next{position:absolute; top:20px; right:40px; z-index:99; width:40px; color:#D8D2C5; text-align:right; height:137px; display:block; background:url(slide_bt2.png) top right no-repeat;}

.content_world .slides_container li{ position:relative}
.content_world .slides_container li:before{ content:""; display:block; position:absolute; top:50%; left:50%; width:50px; height:50px; margin:-45px 0 0 -25px; border-radius:100%; background:rgba(0,0,0,0.25); z-index:1}
.content_world .slides_container li:after{ content:""; display:block; position:absolute; top:50%; left:50%; margin:-32px 0 0 -8px; z-index:2; opacity:0.7;
width: 0;
height: 0;
border-style: solid;
border-width: 12.5px 0 12.5px 20px;
border-color: transparent transparent transparent #ffffff;
}
.content_world .slides_container li:hover:before{background:rgba(0,0,0,0.7);}
.content_world .slides_container li:hover:after{opacity:1;}
/*end slide relate*/


/*like photo*/
div#slides_two{ position:relative;  }
div#slides_two div.slides_container {display:none; margin:0 auto 0;}
div#slides_two div.slides_container div{margin:2px 0 0; width:350px; height:200px;}
div#slides_two div.slides_container div a{float:left; display:block; width:40px; margin:0 4px 12px; border:1px solid #FFF; box-shadow:0 2px 2px #776F5F; -moz-box-shadow:0 2px 2px #776F5F; -webkit-box-shadow:0 2px 2px #776F5F;}
div#slides_two div.slides_container div img{float:left; display:block; width:40px; margin:0 4px 12px; border:1px solid #FFF; box-shadow:0 2px 2px #776F5F; -moz-box-shadow:0 2px 2px #776F5F; -webkit-box-shadow:0 2px 2px #776F5F;}

div#slides_two a.prev{position:absolute; top:165px; font-size:14px; left:5px; z-index:96; color:#FFF; width:52px; height:21px; padding:2px 0 0 8px; text-align:center; display:block; background:url(back.png) top left no-repeat; text-shadow:none; -moz-text-shadow:none; -webkit-text-shadow:none;}
div#slides_two a.next{position:absolute; top:165px; font-size:14px; right:5px; z-index:97; color:#FFF; width:52px; height:21px; padding:2px 8px 0 0; text-align:center; display:block; background:url(next.png) top left no-repeat; text-shadow:none; -moz-text-shadow:none; -webkit-text-shadow:none;}
/*end like photo*/

div.ad_banner{ width:300px; margin:0 auto 15px; border:1px solid #FFF; background:#FFF }





.promote-top .hhgroup { width:643px; height:30px; margin-left:35px; background-color:#FFCCCC}
.promote-top .hhgroup h1 {float:left; display:inline; margin-right:10px; font-family:Tahoma, Geneva, sans-serif; font-size:23px; color:#5b4a38}
.promote-top .hhgroup h2 {float:left; display:inline;  font-family:Tahoma, Geneva, sans-serif; font-size:23px; color:#5b4a38}