@import url('/templates/fonts/thsarabunnew/thsarabunnew.css');
@import url('/templates/fonts/awesome/font-awesome.css');


.b, .f-bold {
	font-weight: bold;
}
.f-underline { text-decoration: underline; }
.form-horizontal .control-label { padding-top: 13px; }

.font-thaisarabun {
	font-family: "THSarabunNew", "THSarabun" !important;
	line-height: 180%;
}

.font-normal { font-family: "Helvetica Neue", Helvetica, tahoma, arial, 'lucida grande', sans-serif; }

.bs-callout { background-color: #FFF; }
.cursor { cursor: pointer; }
.table tbody { background-color: #FFF; }
.table > thead > tr > th { text-align: center;vertical-align: middle; }
.table-bordered > thead > tr > th, .table-bordered > thead > tr > td { border-bottom: 1px; }

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.float-left { float: left; }
.float-right { float: right; }
.clear { clear: both; }
.hide { display: none; }
.b { font-weight: bold; }
.u { text-decoration: underline; }
i[class*="icon-"] { margin-right: 3px; }

.display-inline { display: inline-block; }

.border-box {
	-webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
					box-sizing: border-box;
}

.form-control { padding-top: 2px; }
.valign-middle { vertical-align: middle; }
.valign-top { vertical-align: top; }

/* Color Swatches */
.turquoise { color: #1ABC9C !important; }
.green-sea { color: #16A085 !important; }a.green-sea:HOVER { opacity:0.5;filter:alpha(opacity=50); }
.emerald { color: #2ECC71 !important; }
.nephritis { color: #27AE60 !important; }
.peter-river { color: #3498DB !important; }a.peter-river:HOVER { opacity:0.5;filter:alpha(opacity=50); }
.belize-hole { color: #2980B9 !important; }
.amethyst { color: #9B59B6 !important; }
.wisteria { color: #8E44AD !important; }
.wet-asphalt { color: #34495E !important; }
.midnight-blue { color: #2C3E50 !important; }
.sun-flower { color: #F1C40F !important; }
.orange { color: #F39C12 !important; }
.carrot { color: #E67E22 !important; }
.pumpkin { color: #D35400 !important; }
.alizarin { color: #E74C3C !important; }a.alizarin:HOVER { opacity:0.5;filter:alpha(opacity=50); }
.pomegranate { color: #C0392B !important; }
.clouds { color: #ECF0F1 !important; }
.silver { color: #BDC3C7 !important; }
.concrete { color: #95A5A6 !important; }
.asbestos { color: #7F8C8D !important; }

.btn-upbean {
	background-color: #2E9DE8;
	color: #FFF;
	opacity: 0.8;
  filter: alpha(opacity=80);
}
.btn-upbean:HOVER {
	background-color: #2E9DE8;
	color: #FFF;
	opacity: 1;
  filter: alpha(opacity=100);
}

.disable {
	opacity:0.4;
	filter:alpha(opacity=40);
}

@media print {
	@page { margin:0.5cm; }
	#head, .welcome, .border, .head-menu, #footer {
		display: none;
	}
	* {
		text-shadow:none !important;
		color:#000 !important;
		background:transparent !important;
		box-shadow:none !important;
	}
	.btn-print {
		display: none;
	}

}

html , body { height: 100%; }

body {
	margin: 0px;
	padding: 0px;
	background: #f6f6f6;
	color: #333333;
	font-family: "THSarabunNew", "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
	font-size: 12px;
	position: relative;
}

form {
	padding: 0px;
	margin: 0px;
}

img { border: 0px; }
input,textarea,fieldset {
	border: 1px solid #888888;
}
input[type=text]:not([class*='form-']) { width: 250px; }
input[type=radio] { border: none; }
input[type=checkbox] { border: none; }
h1 { font-size: 20px;margin: 0; }
h2 { font-size: 16px;margin: 0; }
a, select, input, form, textarea, pre {
    font-family: "THSarabunNew", Arial, Helvetica, sans-serif;
    font-size: 100%;
    margin: 0;
}

a {
	text-decoration:none;
	color: #2E9DE8;
}
a:hover {
	color: #999;
	text-decoration: none;
}
p {
	text-align: left;
	text-indent: 35px;
}

#body {
	width: 1200px;
	margin: 0 auto;
	font-size:13px;
}

#head {
	margin:20px 0px 0px 0;
	font-family: "THSarabun", "THSarabunNew",tahoma,  Arial, Helvetica, sans-serif;
}

#head img {
	/* width: 160px; */
	height: 81px;
	display: inline-block;
	/* background: url("/images/logo.png") top center no-repeat; */
}

.welcome {
	text-align: right;
	margin-right: 15px;
	margin-bottom: 5px;
	font-family: "THSarabunNew", "THSarabun",tahoma,  Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #888888;
}

.border {
	height:1px;
	border:1px solid #FFF;
	background:#bdbdbd;
}

#content {
	min-height: 450px;
}
#login_status {
	font-family: "THSarabunNew", "THSarabun",tahoma,  Arial, Helvetica, sans-serif;
	font-size:13px;
	color: #FF0000;
}
#footer {
	font-family: "THSarabunNew", "THSarabun",tahoma,  Arial, Helvetica, sans-serif;
	font-size:13px;
	padding:10px;
	text-align:center;
	color:#919191;
	line-height: 20px;
}

#login {
	font-family: "THSarabunNew", "THSarabun",tahoma,  Arial, Helvetica, sans-serif;
	line-height: 20px;
	padding: 23px 0px 0px 50px;
	margin: 50px auto 0 auto;
	border: 1px solid #aeaeae;
	width: 900px;
	background-color: #FFFFFF;
	color:#808080;
}
#login a { font-family: "THSarabunNew", "THSarabun",tahoma,  Arial, Helvetica, sans-serif; }
#login h1 {
	line-height: 200%;
	font-size: 24px;
	font-weight: bold;
	margin: 10px 0 20px 0;
	color:#5d5d5d;
}
#login .login-left {
	font-size: 14px;
	line-height: 200%;
	width: 350px;
	padding-top: 65px;
}
#login .login-right {
	margin-right:20px;
	padding: 10px 30px;
	width:450px;
	background-color:#f5f5f5;
	border:#e2e2e2 1px solid;
	margin-bottom:30px;
}
#login .row {
	margin-bottom: 10px;
	font-family: "THSarabunNew", "THSarabun",tahoma,  Arial, Helvetica, sans-serif;
}
#login .row .caption, #login .row .input span {
	font-weight: bold;
	font-size: 16px;
	line-height: 34px;
	width: 150px;
	color:#a8a8a8;
}
#login .row .input input, #login .row .input select {
	min-width:290px;
	height: 30px;
	font-size: 16px;
	line-height: 34px;
	border:1px solid #d5d5d5;
	background-color:#FFF;
	color:#a8a8a8;
}
#login .login-form-botton {
	width: 117px;
	height: 37px;
	background: url("/templates/willdemy/login-botton.png") top center no-repeat;
	cursor: pointer;
	margin-top:2px;
}
#login .remember {
	font-size: 14px;
}
.shadow{
	background: url('/templates/willdemy/shadow.png') -10px no-repeat;
	height: 22px;
	margin-bottom: 30px;
	width: 980px;
	margin: 0 auto;
}

.head-menu a {
	font-family: "THSarabunNew", "THSarabun",tahoma,  Arial, Helvetica, sans-serif;
	color: #666666;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
}
.head-menu a:HOVER {
	color: #F90;
	text-decoration: none;
}
.head-menu ul li a {
	line-height: 30px;
}
.head-menu ul li ul li a {
	line-height: 20px;
}
.head-menu {
	border-bottom: 3px solid #2E9DE8;
	margin: 0px 0 10px 0;
	padding: 0px 0 20px 0px;
}

.head-menu ul {
	list-style-type: none;
	margin : 10px auto 0 auto;
}

.head-menu ul  li {
	position: relative;
	float : left ;
	margin-left : 15px;
	padding : 10px;
	padding-bottom : 20px;
	width : auto ;
	height : 13px;
}

.head-menu ul  li:hover{
	/* background-color:#4b67a1  ; */
}


.head-menu ul  li a{
	color : #666666 ;
	/*color : white ; */
}

.head-menu ul  li a:hover{
	color : #F90 ;
	/*color : white ; */
}
/* START SUB MENU */
.head-menu  li ul {
	z-index : 999;
	position:absolute;
	 visibility:hidden;
	/* display:none; */
	 background-color:#FFFFFF;
	/*border-top:1px solid #fff; */
	top : 35px;
	margin:0;
	padding:0;
	padding-bottom: 10px;
	margin-left : -20px;
	/* background: #F4F4F4; */
	border: 0px solid #000;

	-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
				  border-radius: 5px;
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
				  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);



	/* ie */
	zoom: 1;
	  filter:
          progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=1),
          progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=45,strength=1),
          progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=2),
          progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=135,strength=3),
          progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=180,strength=10),
          progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=225,strength=3),
          progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=2),
          progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=315,strength=1);
}

.head-menu  li ul li {
	text-align:left ;
	/* background-color:#3B5998; */
	float:none;
	padding:5px;
	margin: 5px 10px 10px 5px;
	width: 450px;
}

.head-menu li ul li:hover {
	/*background-color:#4b67a1 ; */
}

/* END SUB MENU */

.form {
	padding: 20px;
	background-color: #eaeaea;
	border: 1px solid #CCC;
	font-size: 14px;
	color: #666666;
}

.form, .form h1, .form table, h1.title {
	font-family: "THSarabunNew", "THSarabun",tahoma,  Arial, Helvetica, sans-serif;
}

.form h1, h1.title {
	font-weight: bold;
	color: #666666;
	margin-bottom: 10px;
}

.quo {
	font-family: "THSarabunNew", "THSarabun",tahoma,  Arial, Helvetica, sans-serif;
	font-size: 20px;
	line-height: 30px;
	font-weight: bold;
}

table.frm {
	line-height: 20px;
}

/*
Apple Button Style */

a.apple_button {
    background: #ffffff;
    padding: 5px 10px 5px 10px;      /* Button padding */
    font-size: 14px;
    font-weight: normal;
    display: inline-block;
    text-decoration: none;                 /* Remove default underline style from hyperlink */
    color: #888888;
    border: 1px solid #cccccc;
   /* border-radius:   32px;*/                 /* Full rounder corners */
	-webkit-border-radius: 5px !important;
		-moz-border-radius: 5px !important;
				  border-radius: 5px !important;
}

/* I decided to separate gradients */
a.apple_button {
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
    background: 	-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
    background: 	-webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

.Hover {
    border: 1px solid #bbbbbb !important;
    color: #777777 !important;
	-webkit-box-shadow: 0px 1px 2px #dddddd;
		-moz-box-shadow:    0px 1px 2px #dddddd;
				  box-shadow:         0px 1px 2px #dddddd;
}

.Pressed {
	background: rgb(229,229,229) !important;
	text-shadow: 0px 1px 0px #fff;
	-webkit-box-shadow: 0px 1px 1px 0px #cccccc inset;
		-moz-box-shadow:    0px 1px 1px 0px #cccccc inset;
				  box-shadow:         0px 1px 1px 0px #cccccc inset;
}
/*
End Apple Button Style */
[class^="icon-"] {
	font-size: 14px;
}

#notification {
	text-align: center;
	width: 460px;
	height: 20px;
	position:absolute;
	left: 50%;
	top: 50%;
	margin-left: -230px;
	margin-top: -10px;
	display: none;
}

.notification {
	position: relative;
	display: block;
	clear: both;
	margin-bottom: 15px;
	padding: 10px 10px 10px 40px;
	min-height: 20px;
	font-family: "Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 20px;
	-webkit-border-radius: 5px;
	 -khtml-border-radius: 5px;
		 -moz-border-radius: 5px;
				  border-radius: 5px;

	-webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.5) inset;
		 -moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.5) inset;
			 -o-box-shadow: 0 1px 0 0 rgba(255,255,255,0.5) inset;
				  box-shadow: 0 1px 0 0 rgba(255,255,255,0.5) inset;
}

.notification span {
	font-weight: bold;
	margin-right: 10px;
}
.notification .icon {
	position: absolute;
	background-image: url("/templates/willdemy/notification.png");
	background-repeat: no-repeat;
	height: 15px;
	top: 14px;
	width: 14px;
	left: 16px;
}

.success {
	color: #90b05e;
	border: 1px solid #c0df93;
	background-color: #eef9dc;
}
.success .icon  { background-position: 0 -15px; }

.fail {
	color: #a6656c;
	border: 1px solid #f3adb3;
	background-color: #ffeaea;
}
.fail .icon  { background-position: 0 0px; }

.info {
	color: #79a4b3;
	border: 1px solid #b2dceb;
	background-color: #d2f4ff;
}
.info .icon  { background-position: 0 -30px; }

.warning {
	color: #979161;
	border: 1px solid #cec899;
	background-color: #fffcde;
}
.warning .icon  { background-position: 0 -45px; }

table.list {
    border-color: #CACACA;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-spacing: 0;
	border-collapse: collapse;
}

table.list td, table.list th {
    border-color: #CACACA;
    border-width: 1px 1px 0 0;
    border-style: solid;
    border-spacing: 0;
    margin: 0;
    padding: 7px 3px 3px 3px;
		font-family: "THSarabunNew" !important;
}
table.list th {
		background-color: #F1F1F1;
		color: #383838;
		font-weight: bold;
		text-align: center
}
table.list td {
	background-color: #FFFFFF;
}
td.caption {
	vertical-align: top;
	padding-top: 5px;
}
.pagelink { margin: 10px 0 10px 0; }

.pagelink a:link,.pagelink a:visited,.pagelink a:active {
	text-decoration:none;
	color:#545454;
	background-color:#f9f9f9;
	border:1px solid #e0e0e0;
	font-size:11px;
	padding:3px 6px;
}

.pagelink a:hover {
	background-color:#BFCAEB;
	color:#fff;
	border-color:#e0e0e0;
}

.pagelink span {
	text-decoration:none;
	background-color:#fff;
	border:1px solid #e0e0e0;
	color:#545454;
	font-size:11px;
	padding:3px 6px 4px 6px;
}

.btn {
	cursor: pointer;
}

/* Tool Tip */

.tooltip {
	position:absolute;
	border: 1px solid #CCCCCC;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #FFFFFF;
	color:#000000;
	padding:5px 5px 5px 5px;
	font-size:12px;
	font-family: tahoma, Verdana, Geneva, sans-serif;
}

.tooltip-image {
	float:left;
	margin-right:5px;
	margin-bottom:5px;
	margin-top:3px;
}

.tooltip span.title {
	font-weight:700;
	text-decoration: underline;
	color:#888888;
}

.tooltip span.detail {
	text-indent: 30px;
}

.tooltip { visibility:hidden; }

p.help-block { text-indent: 0px; }


.ui-widget { font-family: inherit; }
.ui-widget-header { color: #000; }
.ui-widget input
, .ui-widget select
, .ui-widget textarea
, .ui-widget button { font-family: inherit; }
.ui-datepicker .ui-datepicker-title select { font-size: 1em; }

#modal-main {
		text-align: center;
}

@media screen and (min-width: 768px) { 
		#modal-main:before {
				display: inline-block;
				vertical-align: middle;
				content: " ";
				height: 100%;
		}
}

#modal-main .modal-dialog {
		display: inline-block;
		text-align: left;
		vertical-align: middle;
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { color: #888; }