/* CSS Document */
@import url('fonts.css');
body {
	padding-top:20px;
	padding-bottom:50px;
	background:url(../images/bg_1.jpg) no-repeat fixed top center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.logo {
	width:1140px;
	height:535px;
	display:block;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	z-index:10;
}
.logo img {
	width:1140px;
	height:535px;
}
.header-nav {
	position:relative;
	display:block;
	margin-top:0px;
	height:60px;
	background:rgba(50, 50, 50, 0.75);
	z-index:5;
}
.header-nav .left {
	width:650px;
	height:60px;
	float:left;
	margin-left:12px;
}
.header-nav .right {
	margin-right:12px;
	width:450px;
	height:60px;
	float:right;
}
.header-nav ul {
	list-style:none;
	margin:0;
	padding:0;
}
.header-nav .right li {
	float:right;
}
.header-nav ul li {
	min-width:125px;
	float:left;
	font-size:19px;
	font-family:quark;
	text-align:center;
}
.header-nav ul li strong {
	font-family:omyim;
	font-size:25px;
}
.header-nav ul li .small {
	text-align:center;
	margin-top:-7px;
}
.header-nav ul li a {
	display:block;
	padding-top:3px;
	text-decoration:none;
	color:#FFF;
	padding-left:25px;
	padding-right:25px;
	height:60px;
}
.header-nav ul li a:hover {
	background:#333;
}
.col-lg-9, .col-lg-3 {
	margin-bottom:15px;
}
.panel-imc-page {
 	margin-top:20px;
	margin-bottom:20px;
}
.panel-imc-box {
	background:rgba(255, 255, 255, 0.7);
	padding:10px;
	margin-bottom:15px;
}
.top-ten {
	margin-bottom:0px;
}
.top-ten a:not(.btn){
	text-decoration:none;
}
.top-ten a:not(.btn):hover {
	text-decoration:underline;
}
.panel-imc-title {
	background:rgba(0, 0, 0, 0.8);
	height:40px;
	line-height:40px;
	padding-left:15px;
	padding-right:15px;
	color:#FFF;
	font-weight:bold;
	font-family:quark;
	font-size:20px;
}
.panel-imc-title small {
	font-weight:normal;
}
.panel-left {
	margin-bottom:15px;
}
.panel-left .panel-title {
	background:rgba(0, 0, 0, 0.8);;
	height:40px;
	line-height:40px;
	padding-left:10px;
	padding-right:10px;
	color:#FFF;
}
.panel-left .panel-title small {
	font-family:quark;
	font-size:16px;
}
.panel-left .panel-content {
	padding:5px;
}
.panel-form-control {
	margin-bottom:7px;
}
input[type="text"],input[type="password"] {
  display: block;
  margin: 0;
  /*width: 100%;*/
  font-family: sans-serif;
  font-size: 18px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
}
/* Product */


/* Toup */

/* jQuery */
/* Captcha */

/* Class */

/* sweetalert */

/*
 * Animations
 */

/* Internet Explorer 9 has some special quirks that are fixed here */
/* The icons are not animated. */
/* This file is automatically merged into sweet-alert.min.js through Gulp */
/* Error icon */

/* Success icon */

/*!
 * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
 * Copyright 2015 Daniel Cardoso <@DanielCardoso>
 * Licensed under MIT
 */

/*
 * Animation
 */

TABLE {
border-collapse: separate; border-spacing: 3px
}

TD {
	FONT-FAMILY: MS Sans Serif,Arial; COLOR: #333333; FONT-SIZE: 13px
}

HR {
	COLOR: #333333
}
.WText {
	COLOR: #FFF;
}
.WText:hover {
	COLOR: red;
}
.lText {
	FONT-FAMILY: MS Sans Serif,Arial; COLOR: #333333; FONT-SIZE: 13px
}
.eText {
	FONT-FAMILY: MS Sans Serif,Arial; COLOR: #333333; FONT-SIZE: 13px
}
.sText {
	FONT-FAMILY: MS Sans Serif,Arial; COLOR: #333333; FONT-SIZE: 13px
}
.sTextB {
	FONT-FAMILY: MS Sans Serif,Arial; COLOR: #333333; FONT-SIZE: 10px; FONT-WEIGHT: bold
}
.sTextRedB {
	FONT-FAMILY: MS Sans Serif,Arial; COLOR: red; FONT-SIZE: 10px; FONT-WEIGHT: bold
}
.dTextB {
	FONT-FAMILY: MS Sans Serif,Arial; COLOR: #333333; FONT-SIZE: 13px; FONT-WEIGHT: bold
}
.dTextColorB {
	FONT-FAMILY: MS Sans Serif,Arial; COLOR: #333333; FONT-SIZE: 13px; FONT-WEIGHT: bold
}
.dTextRedB {
	FONT-FAMILY: MS Sans Serif,Arial; COLOR: red; FONT-SIZE: 13px; FONT-WEIGHT: bold
}
.mText {
	FONT-FAMILY: MS Sans Serif,Arial; COLOR: #333333; FONT-SIZE: 16px; FONT-WEIGHT: bold
}
.mTextColorB {
	FONT-FAMILY: MS Sans Serif,Arial; COLOR: #333333; FONT-SIZE: 16px; FONT-WEIGHT: bold
}
.mTextRedB {
	FONT-FAMILY: MS Sans Serif,Arial; COLOR: red; FONT-SIZE: 16px; FONT-WEIGHT: bold
}
.bText {
	FONT-FAMILY: MS Sans Serif,Arial; COLOR: #333333; FONT-SIZE: 20px; FONT-WEIGHT: bold
}
.bTextColorB {
	FONT-FAMILY: MS Sans Serif,Arial; COLOR: #333333; FONT-SIZE: 20px; FONT-WEIGHT: bold
}
.bTextRedB {
	FONT-FAMILY: MS Sans Serif,Arial; COLOR: red; FONT-SIZE: 20px; FONT-WEIGHT: bold
}
.tableBG01 {
	BACKGROUND-COLOR: #cccccc; COLOR: #333333; FONT-WEIGHT: bold; TEXT-DECORATION: none
}
.tableBG02 {
	BACKGROUND-COLOR: #dddddd; COLOR: #333333; TEXT-DECORATION: none
}
.tableBG03 {
	BACKGROUND-COLOR: #eeeeee; COLOR: #333333; TEXT-DECORATION: none
}
.tableMessage {
	BORDER-BOTTOM: #333333 1px solid; BORDER-LEFT: #333333 1px solid; BACKGROUND-COLOR: #aaaaaa; COLOR: #333333; BORDER-TOP: #333333 1px solid; BORDER-RIGHT: #333333 1px solid; TEXT-DECORATION: none
}
.menuTop {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT: bold 16px MS Sans Serif,Arial; COLOR: #0000ff; TEXT-DECORATION: none; PADDING-TOP: 0px
}
.menuTop A:link {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT: bold 16px MS Sans Serif,Arial; COLOR: #99CC00; TEXT-DECORATION: none; PADDING-TOP: 0px
}
.menuTop A:visited {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT: bold 16px MS Sans Serif,Arial; COLOR: #99CC00; TEXT-DECORATION: none; PADDING-TOP: 0px
}
.menuTop A:hover {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT: bold 16px MS Sans Serif,Arial; COLOR: #ffffff; TEXT-DECORATION: none; PADDING-TOP: 0px
}
.menuLeft A:link {
	PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #eeeeee; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT: bold 14px MS Sans Serif,Arial; COLOR: #bdf400; TEXT-DECORATION: none; PADDING-TOP: 0px
}
.menuLeft A:visited {
	PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #eeeeee; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT: bold 14px MS Sans Serif,Arial; COLOR: #bdf400; TEXT-DECORATION: none; PADDING-TOP: 0px
}
.menuLeft A:hover {
	PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #999999; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT: bold 14px MS Sans Serif,Arial; COLOR: #ffffff; TEXT-DECORATION: none; PADDING-TOP: 0px
}
.tableMenu {
	MARGIN: 10px 0px 0px; 
	OVERFLOW: hidden
}
.tableMenu .table {
	BORDER-BOTTOM: #e1f5d2 1px solid; 
	BORDER-LEFT: #e1f5d2 1px solid; 
	PADDING-BOTTOM: 2px; 
	MARGIN: 0px; 
	PADDING-LEFT: 2px; 
	PADDING-RIGHT: 2px; 
	BORDER-TOP: #e1f5d2 1px solid; 
	BORDER-RIGHT: #e1f5d2 1px solid; 
	PADDING-TOP: 2px
}
.tableMenu .tdHead {
	/*background: transparent url(../images/wavetab.gif);*/
	border-bottom: 1px solid #eeeeee;
	color: #0000FF;
	letter-spacing: -1px;
	TEXT-ALIGN: center; 
	FONT-WEIGHT: bold; 
	FONT-SIZE: 15px; 
	padding: 5px;
}
.tableMenu .tdHeadB {
	TEXT-ALIGN: right; 
	FONT: bold 18px MS Sans Serif,Arial; 
	/*background: transparent url(../images/bluetab.gif);*/
	border-bottom: 1px solid #336600;
	color: #ffffff;
	letter-spacing: -1px;
	padding: 5px;
}
.lblTop {
	PADDING-LEFT: 5px; 
	FONT-FAMILY: MS Sans Serif,Arial; 
	/*background: transparent url(../images/bluetab.gif);*/
	border-bottom: 1px solid #336600;
	color: #ffffff;
	FONT-SIZE: 20px; 
	FONT-WEIGHT: bold;
	letter-spacing: -1px;
}
.imImage {
	BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid
}

/* เริ่ม CSS สำหรับหน้า Itemmall */

#itemmall_table, #itemmall_table td {
	border-collapse: collapse;
	border: none;
	padding: 3px;
	color: #000;
	text-align: center;
	background-color: #e1f5d2;
}/*#99CC00*/

#itemmall_table {
	margin: 5px 20px;
	width: 645px;
}

#itemmall_table th {
	text-align: center;
	font-weight: bold;
	border-collapse: collapse;
	/*background: transparent url(../images/bluetab.gif);*/
	border-bottom: 1px solid #336600;
	color: #ffffff;
	font-size: 15px;
	letter-spacing: -1px;
	padding: 5px;
}

#itemmall_table td:nth-child(1) {
	width: 200px;
	text-align: left;
	padding: 3px 10px;
}

#itemmall_table td:nth-child(2) {
	width: 100px;
}

#itemmall_table td:nth-child(3) {
	text-align: left;
	padding: 3px 10px;
}

#itemmall_table td:nth-child(4) {
	width: 40px;
	font-weight: bold;
	text-align: right;
	padding: 3px 10px 3px 0px;
}

#itemmall_table td:nth-child(5) {
	width: 60px;
}

#itemmall_table tr:nth-child(odd) td{
	background-color: #c5c5c5;
}

/* จบ CSS สำหรับหน้า Itemmall */

/* เริ่ม CSS สำหรับหน้า Ranking */

.rankinw_table th {
	border-collapse: collapse;
	padding: 5px;
	background-color: #272a2a;
	/*background: transparent url(../images/bluetab.gif);*/
	border-bottom: 1px solid #336600;
	color: #ffffff;
	text-align: center;
	font-weight: bold;
}

.rankinw_table, .rankinw_table td {
	border-collapse: collapse;
	/*border: 1px solid #09C;*/
	padding: 3px;
	color: #000000;
	background-color: #ffffff;
	text-align: center;
}

.noline_table, .noline_table td {
	border-collapse: collapse;
	border: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}

/* จบ CSS สำหรับหน้า Ranking */

.round {
    background-color: #f1f1f1;
    border-radius: 50%;
	padding: 8px 16px;
}
.round.active {
    background-color: #4CAF50;
    border-radius: 50%;
	padding: 8px 16px;
}
.round.disabled {
    background-color: #e1e1e1;
    border-radius: 50%;
	padding: 8px 16px;
}

a .round {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
}
.round:hover {
    background-color: #e1e1e1;
    color: white;
}