/*
* HTML5 ✰ Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
/* =============================================================================
Links
========================================================================== */
a { text-decoration: none; }
a:visited { }
a:hover { text-decoration: underline; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button, input { line-height: normal; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* =============================================================================
Add On
========================================================================== */
/* Fix Outline dotted on Firefox */
:-moz-any-link:focus { outline: none; }
a:active, a:focus, #main > .inner > dl > dt { outline: 0;}
ul.h:before, ul.h:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
ul.h:after { clear: both; }
ul.h { zoom: 1; margin: 0; padding: 0; }
ul.h li, ul.h li a { display: block; float: left; margin: 0; list-style: none; }
ul.v { list-style: none; margin: 0; padding: 0; }
ul.v li, ul.v li a { float: none; display: block; }
.ui-tabs-hide { display: none; }
/* ==|== primary styles =====================================================
Author: Sappawish Siripon (@mp3wizard)
========================================================================== */
/* body, html { overflow-x: hidden; } */
/* Junt Comment 14/2/12 ตอนยังไม่มีแบนเนอร์ ที่หัว repeat-x 0 130px --> repeat-x 0 0px */
body { background: #e7e7e7 url(../images/bg-body.png) repeat-x 0 0px; font-size: 13px; }
#truehit { display: block; text-align: center; background: #e30000; position: relative; margin-top: -1px; padding-bottom: 10px;}
header { background: url(../images/bg-header.png) no-repeat center bottom; position: relative; z-index: 10; }
header > .inner { width: 950px; margin: 0 auto; height: 155px; position: relative; }
header h1, header h2, header h3 { margin: 0; }
header h1 a { width: 221px; height: 99px; background: url(../images/logo.png) no-repeat; position: absolute; top: 28px; left: 0; }
header h2 { display: none!important; }
header #breadcumb, header #contact { position: absolute; top: 5px; margin: 0; left: 10px; color: #fff; font-family: 'DBAdmanX'; font-size: 13px; }
.mac header #breadcumb, .mac header #contact { font-family: 'DBAdmanXLight'; }
header #breadcumb a { color: #e50000; }
header #contact { right: 0; left: auto;}
header #contact a { color: #fff; margin: 0 10px;}
header #contact a:last-child { margin: 0 10px 0 25px; display: inline-block; }
header .banner { position: absolute; right: 0; top: 33px; }
nav { clear: both; position: absolute; bottom: 0; height: 28px; line-height: 32px; left: 55px; }
nav > ul > li { position: relative; }
nav > ul > li > a { margin-right: 80px!important; color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.8); font-family: 'DBAdmanX'; font-weight: bold; font-size: 14px; }
nav > ul > li:last-child > a { margin-right: 0!important; }
nav > ul > li > a:hover { text-decoration: none; text-shadow: 0 0 1px rgba(0,0,0,0.1); transition: all 0.25s ease-in-out;-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; }
.mac nav > ul > li > a, .mac nav > ul > li > a:hover { font-weight: normal; }
.chrome nav > ul > li > a, .chrome nav > ul > li > a:hover { font-weight: bold; }
/* Sub Menu */
nav > ul > li > ul { position: absolute; left: -15px; top: 28px; background: #fff; padding: 5px 15px 10px!important; border-radius: 5px; box-shadow: 0px 0px 5px rgba(0,0,0,0.8); display: none; border: solid 1px #E30000;}
nav > ul > li > ul > li > a { color: #E30000; white-space: nowrap; line-height: 22px; font-size: 11px; }
#main { width: 930px; margin: 10px auto; background: #fff; border-radius: 10px; box-shadow: 0 0 3px rgba(0,0,0,0.5); padding: 10px; }
footer { background: url(../images/bg-footer.png) repeat-x; height: 296px; }
footer > ul.h { width: 930px; margin: 0 auto; height: 258px; }
footer > ul.h > li { width: 150px; padding: 15px 6px 0; }
footer > ul.h > li:nth-child(6), footer > ul.h > li:nth-child(10) { width: 100px; }
footer > ul.h > li:nth-child(1), footer > ul.h > li:nth-child(2) { height: 235px; }
footer > ul.h > li:nth-child(3), footer > ul.h > li:nth-child(4), footer > ul.h > li:nth-child(5), footer > ul.h > li:nth-child(6) { height: 95px }
footer > ul.h > li, footer > ul.h > li > a { font-size: 12px; font-weight: bold; color: #ed1c24; }
footer > ul.h > li > a { float: none; margin-bottom: 10px;}
footer > ul.h > li li { margin-bottom: 5px; }
footer > p { text-align: center; color: #fff; font-size: 11px;}
footer > p a, footer li > a { color: #fff; font-size: 11px;}
em { font-style: normal; }
a.read_more { width: 68px; height: 24px; background: url(../images/btn-read_more.png) no-repeat; float: right; }
a.create_topic { position: absolute; background: url(../images/btn-create_topic.png) no-repeat; width: 99px; height: 31px; }
p.clearfix { margin: 5px 0; }
#banner_slide { margin: 10px auto; position: relative; display: block; width: 950px; z-index: 5; }
#banner_slide a.close { width: 30px; height: 30px; background: url(../images/btn-close.png) no-repeat; position: absolute; z-index: 99; right: -10px; top: -10px; display: none; }
#banner_slide .inner { width: 950px; overflow: hidden; }
#banner_slide .full { height: 300px; display: none; }
#banner_slide .thumb { height: 50px; position: relative; }
#banner_slide a.open { color: #fff; text-transform: uppercase; font-size: 10px; position: absolute; right: 5px; bottom: 2px; }
#main > section > aside { width: 300px; float: right; }
#main > section > article { width: 620px; float: left; }
#main > section { margin-bottom: 10px; }
#search p:nth-child(1), #search #searchbox { background: #db841e url(../images/bg-orange-gradient.png) repeat-x; margin: 0; padding: 5px 0 12px; text-align: center; border-radius: 10px 10px 0 0; height: 25px; font-family: 'DBAdmanX'; font-size: 12px; color: #630; }
#search p:nth-child(1) input[type=text], #search #searchbox input[type=text] { font-size: 12px; color: #666; font-weight: bold; width: 93px; height: 25px!important; background: url(../images/bg-input_search.png) no-repeat; border: none; padding: 0 10px;}
.ie7 #search p:nth-child(1) input[type=text], .ie8 #search p:nth-child(1) input[type=text], .ie7 #search #searchbox input[type=text], .ie8 #search #searchbox input[type=text] { padding-top:4px; margin-bottom: -4px; }
#search p:nth-child(1) input[type=button], #search #searchbox input[type=button] { width: 21px; height: 21px; background: url(../images/btn-search.png) no-repeat; display: inline-block; padding: 0; margin: 0 0 0 -5px; }
#search p:nth-child(1) label, #search #searchbox label { margin-right: 8px; }
.ie7 #search p:nth-child(1) input[type=radio], .ie7 #search #searchbox input[type=radio] {margin-right: -3px; margin-left: -2px;}
#search p:nth-child(1) label, #search p:nth-child(1) input[type=radio], #search #searchbox label, #search #searchbox input[type=radio] { position: relative; top: 2px; }
/*----Junt Edit Height Search height 260 --> 380 --*/
#search p:nth-child(2), #search > div:nth-child(2), div.banner_small { background: #e40000 url(../images/bg-red-gradient3.png) repeat-x center bottom; text-align: center; padding: 10px 0; border-radius: 10px; margin: 0; position: relative; top: -10px; height: 380px; overflow: hidden; padding-left: 25px; }
div.banner_small { height: auto; }
.ie7 #search p:nth-child(2), .ie7 #search > div:nth-child(2), .ie7 div.banner_small { top: -5px; }
#search p:nth-child(2) a img, #search > div:nth-child(2) div, div.banner_small div { margin: 5px 10px 5px 0; float: left; }
/*----Junt Edit Height Social height 330 --> 445 --*/
#social { background: #630; padding: 10px; border-radius: 10px; height: 435px; overflow: hidden; margin-bottom: 10px; }
div.banner.full { background: #ebebeb url(../images/bg-stripe.png) repeat; text-align: center; }
div.banner.full > div { display: block; margin: 0 auto; }
/*----Junt Add Seperate --*/
div.banner.seperate {background: #ebebeb url(../images/bg-stripe.png) repeat; text-align: center; margin-bottom: 8px;}
div.banner.seperate a { letter-spacing: 20px; text-align: center; }
div.banner.seperate > div { display: inline-block; float: left; margin-right: 42px; }
div.banner.seperate > div:last-child { margin-right: 0; float: right; }
#webboard { background: #d8d8d8 url(../images/bg-webboard.png) no-repeat 15px 90%; border-radius: 10px; }
#webboard dt { margin: 0; color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.8); font-family: 'DBAdmanX'; font-size: 16px;background: url(../images/bg-red-gradient.png) repeat-x; height: 32px; text-indent: 20px; line-height: 32px; }
.mac #webboard h2 { font-weight: normal; }
.chrome #webboard h2 { font-weight: bold; }
#webboard > dl:nth-child(1) { width: 240px; }
#webboard > dl:nth-child(2) { width: 690px; }
#webboard > dl:nth-child(1) dt { border-radius: 5px 0 0 0; }
#webboard > dl:nth-child(2) dt { border-radius: 0 5px 0 0; border-left: solid 1px #c0454f; }
#webboard dl { display: block; float: left; margin: 0; }
#webboard dd { margin: 0; position: relative; min-height: 390px;}
#webboard dd table { width: 100%; position: relative; z-index: 2;}
#webboard dd th { text-shadow: 0 0 5px rgba(0,0,0,0.8); font-family: 'DBAdmanX'; font-size: 14px; color: #f5d682; vertical-align: middle; height: 30px; }
.mac #webboard dd th { font-weight: normal }
.chrome #webboard dd th { font-weight: bold; }
#webboard dd tr > th:nth-child(1) { text-align: left; }
#webboard dd td { border-bottom: dashed 1px #6b6b6b; padding: 6px 5px 6px 0; }
#webboard dd tbody > tr:first-child td { padding-top: 20px; }
#webboard dd tbody > tr:last-child td { border: none; }
#webboard dd td a { color: #262424; }
#webboard dd td a:hover { color: #eb0606; }
#webboard dd tr > td:nth-child(1) a { padding-left: 15px; background: url(../images/icon-right.png) no-repeat 0 3px; width: 480px; display: block; }
#webboard dd tr > td:nth-child(2) { text-align: center; color: #000; font-size: 13px; }
#webboard > dl:nth-child(2) dd { padding: 0 30px 5px 20px; }
#webboard > dl:nth-child(1) ul { padding: 15px 0 0 20px; }
#webboard > dl:nth-child(1) a { font-family: 'DBAdmanX'; color: #000; width: 110px; padding: 0 0 8px; font-size: 13px; }
#webboard > dl:nth-child(1) a:hover, #webboard > dl:nth-child(1) li.ui-state-active a { color: #eb0606; text-decoration: underline; }
#webboard a.create_topic { padding: 0; margin: 10px 0 0 125px; }
#bg-head { position: absolute; top: 0; left: 0; width: 670px; height: 30px; background: url(../images/bg-black-gradient.png) repeat-x center center; display: block; border-radius: 0 0 10px 10px; z-index: 1; }
#webboard > dl:nth-child(1) li:nth-child(1) a { margin-left: 110px; }
h3.head { margin: 0; color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.8); font-family: 'DBAdmanX'; font-size: 18px; line-height: 90%; height: 28px; border-radius: 10px 10px 0 0;}
.mac h3.head { font-weight: normal; }
.chrome h3.head { font-weight: bold; }
h3.head a, h2 a { color: #fff; }
h3.head a:hover, h2 a:hover { color: #fff; text-decoration: none; }
#banner-left, #banner-right { width: 120px; height: 480px; display: block; position: absolute; left: 50%; top: 165px; }
#banner-left { margin-right: 485px; left: auto; right: 50%; }
#banner-right { margin-left: 485px;}
#disqus_thread { text-align: left; }
/* Junt Comment 14/2/12 ตอนยังไม่มีแบนเนอร์ ที่หัว
#banner_top { width: 100%; background: #000; padding: 20px 0; height: 90px; text-align: center; }
#banner_top iframe, #banner_top > div { margin: 0 auto; }
*/
/* ==|== media queries ======================================================
PLACEHOLDER Media Queries for Responsive Design.
These override the primary ('mobile first') styles
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 480px) {
/* Style adjustments for viewports 480px and over go here */
}
@media only screen and (min-width: 768px) {
/* Style adjustments for viewports 768px and over go here */
}
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir, .button { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
/*============Add by Chan*===============/
/*LightBox Login*/
#light h2
{
background: url(../images/bg-red2-gradient.png) repeat-x;
border-radius: 10px 10px 0 0;
border-bottom: solid 1px #fff;
font-weight: normal;border-radius: 12px 12px 0 0; margin: 0; font-size: 24px; text-shadow: 2px 2px #000; text-indent: 20px; color: #fefefe;
}
.black_overlay{
display:none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content
{
font-family: 'DBAdmanX';
display:none;
position: absolute;
top: 35%;
left: 38%;
width: 23%;
padding: 0px;
border: 0px solid #a6c25c;
border-radius: 12px 12px 0 0;
background-color: black;
z-index:1002;
overflow: auto;
margin : 0;
}
.white_content a {text-decoration:none ;font-size :13px;color :#000 ;}
.white_content h4 { font-size :16px;color: #fff; text-indent: 5px; background: url(../images/bg-grey-gradient.png) repeat-x; height: 25px; line-height: 25px; border-radius: 5px 5px 5px 5px;width :105px; border : 1px solid #000}
.headertext{
font-family: 'DBAdmanX';
font-size:14px;
color:#000;
}
.textfield
{
font-family: 'DBAdmanX';
font-size :12px;
border:1px solid #000;
width:145px;
}
.ckBox
{
font-size :14px;
}
/*======Tooltip FB=======*/
#tooltipFB
{
font-family: 'DBAdmanX'; font-size: 12px;
position:relative;
text-align:center;
vertical-align :middle ;
float :right ;
}
#tooltipFB a{
margin:0 5px 5px;
text-decoration: none;
/* display the list item in single row*/
float:left;
}
#tooltipFB #box {
/* position absolute so that z-index can be defined and able to move this item using javascript */
position:absolute;
left:0;
top:0;
z-index:200;
/* image of the right rounded corner
background:url(../images/bg-tag.png) no-repeat right center;
background: url(../images/bg-orange-gradient.png) repeat-x; */
background: url(../images/bg-tooltip-fb.png) repeat-x;
border-radius: 0 6px 6px 6px;
height:23px;
margin-top :8px;
/* add padding 8px so that the tail would appear*/
padding-right:8px;
/* set the box position manually */
margin-left:5px;
font-family: 'DBLimX'; font-size: 15px; color:Black ;
line-height :23px;
visibility:hidden ;
}
#tooltipFB #box .head {
/* image of the left rounded corner */
background:url(../images/head.html) no-repeat 0 0;
/* height:35px;*/
/* force text display in one line */
white-space:nowrap;
/* set the text position manually */
padding-left:8px;
/*padding-top:5px;*/
}
/*======Div Ban content=======*/
div.Bands_green {padding:5px;margin:0 1px;font-family: 'DBLimX'; font-size :18px;background-color :#ffe6e6;}
.text_blue, .text_header_blue, strong.text_blue, a.act_blue, a.my_link_menu_blue {color:#a22b2b;}
.text_green, .text_header_green, strong.text_green, a.act_green, .text_subheader {color:#a22b2b;font-size :18px;}
.text_header_green li {font-size :18px;}
/*===================================================*/