@charset "utf-8";
body{width:100%;margin-left:auto;margin-right:auto;margin-top:0; font-family:"Noto Sans Thai", Verdana, Geneva, Arial, Helvetica, sans-serif;}

/* Rounded, modern buttons on the login/landing pages (same treatment as
   the main app -- see kasamachrome/css/kasama.css for the reasoning) */
input[type="button"], input[type="submit"]{
  background:#F2F609; color:#29231f; border:1px solid #c7cb00; border-radius:8px;
  cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.08); transition:background .15s, box-shadow .15s;
}
input[type="button"]:hover, input[type="submit"]:hover{background:#dde200; box-shadow:0 2px 5px rgba(0,0,0,.12);}
.lang_switch{padding:4px 0; white-space:nowrap;}
.lang_switch .lang_flag{display:inline-block; margin-left:3px; padding:2px; border:1px solid transparent; border-radius:3px; line-height:0;}
.lang_switch .lang_flag:hover{border-color:#c0c0c0;}
.lang_switch .lang_flag.lang_active{border-color:#29231f; background:#fff6c0;}
.lang_switch .lang_flag img{vertical-align:middle;}

/* ---- Lightweight responsive layer -------------------------------------
   Desktop layout (above 900px) is untouched. Below that, the fixed
   width="900" table layout goes fluid and the left menu stacks above the
   content instead of sitting beside it. Needs <meta name="viewport"> in
   the page <head> to actually kick in on a phone. */
@media (max-width: 900px){
  table[width="900"]{width:100% !important;}
  .body_panel{width:100% !important;}

  .item{float:none !important; width:100% !important; box-sizing:border-box; margin-bottom:12px;}
  .item table{width:100% !important;}
  .content_center{float:none !important; width:100% !important; padding-left:0 !important;}
  .work_space{float:none !important; width:100% !important;}
  .utility{float:none !important; width:100% !important;}

  .data_table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .data_table th, .data_table td{white-space:nowrap;}

  input[type=button], input[type=submit], input[type=text], input[type=password],
  select{font-size:16px; min-height:40px;}

  .login_dv{width:92% !important; max-width:350px;}

  /* Compact, modern mobile header: ditch the big raster banner on phones */
  .header_banner{background-image:none !important; background-color:#F2F609; height:auto !important; padding:10px 0;}
  .logo_ka_head{text-align:left !important; padding-top:0 !important; padding-left:12px !important; height:auto !important;}
  .member_head{padding-top:6px !important; padding-right:12px !important; height:auto !important; font-size:12px !important; line-height:1.5 !important;}
}
.body_panel{padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px; margin:0px; width:900px;}
.left_menu_head{ font-size:11px; font-weight:bold; color:#FFFFFF; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; white-space:nowrap}
.member_head{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:13px; color:#29231f; padding-right:10px; padding-top:50px; line-height:15pt; height:60px;}
.logo_ka_head{height:32px; text-align:right; padding-top:20px; padding-right:11px;}
.content_center{float:right; width:687px; padding-left:0px; padding-top:0px;}
.work_space{ float:left; width:75%;}
.utility{float:right; width:25%}
.clear-all{clear:both; line-height:0; height:0; }
.footer_dv{background:url(../img/footer.jpg);}
.footer{color:#FFFFFF;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:14px; padding-top:10px; padding-bottom:10px; text-align:right; padding-right:10px;}
.footer_r{text-align:center;}
.copyright{padding-top:13px; font-size:11px;}
.footer A{ color:#FBE053;}
.item{float:left; width:200px; padding-right:0px; padding-left:6px; margin-bottom:10px; padding-bottom:20px; padding-top:0px; position:relative;}
.item A {
	COLOR: #3C83FF;
}
.item A:hover {
	 COLOR: #ffffff;
}
.item H4 {
	FONT-WEIGHT: normal; FONT-SIZE: 1em; MARGIN: 0px; COLOR: #ffffff;
}
.item P {
	FONT-SIZE: 0.9em; MARGIN: 0px 0px 10px; TEXT-ALIGN: justify;
}
.useracc{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:14px; color:#666666; line-height:19pt;}
.useracc_eng{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:13px; color:#666666; line-height:19pt;}

.input_useracc {
	BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: #dbeeee; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #b9bfb5; COLOR: #333333; BORDER-TOP-COLOR: #dbeeee; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:14px; HEIGHT: 18px; BACKGROUND-COLOR: #e6e9e4; TEXT-ALIGN: left; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #b9bfb5
}
.textarea{BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: #dbeeee; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #b9bfb5; COLOR: #333333; BORDER-TOP-COLOR: #dbeeee; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:14px; BACKGROUND-COLOR: #e6e9e4; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #b9bfb5;}
.list_useracc {
	BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: #dbeeee; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #b9bfb5; COLOR: #333333; BORDER-TOP-COLOR: #dbeeee; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:14px; HEIGHT: 24px; BACKGROUND-COLOR: #e6e9e4; TEXT-ALIGN: left; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #b9bfb5
}
.login{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;}
.login_dv{ width:350px; border-color:#66CC66; border-bottom-style:solid; border-bottom-width:1px; border-left-style:solid; border-left-width:1px; border-right-style:solid; border-right-width:1px; border-top-style:solid; border-top-width:1px; margin-top:30px; margin-bottom:18px; padding-top:5px; background-color:#f2fbec;}
.login_hd{ border-color:#66CC66;border-bottom-style:solid; border-bottom-width:1px; padding-bottom:5px; padding-left:6px; font-size:14px; color:#49BA00}
.login_ct{ padding-top:8px; padding-bottom:10px; padding-left:6px; font-size:13px; color:#666666; background-color:#FFFFFF; line-height:16pt;}
.data_table{empty-cells:show; border-collapse:collapse; border-style:solid; border-color:#c0c0c0; outline-color:#a0a0a0;}

#playlist tbody tr td {
  background-color: #eee;
}
#playlist tbody tr.odd  td {
  background-color: #fff;
}
table.grid{empty-cells:show; outline-style:solid; outline-width:1px; outline-color:gray; }
table.general{empty-cells:show; padding:2px; border-style:solid; border-width:1px; border-color:gray; border-collapse:collapse; border-spacing:0px;}
tr.header {empty-cells:show; background-color:yellow; border-color:gray; border-width:1px; border-spacing:0px; border-collapse:collapse; border-style:solid; border-color:#c0c0c0; outline-color:#a0a0a0;}
tr.headergray {empty-cells:show; background-color:gray; border-color:gray; border-width:1px; border-spacing:0px; border-collapse:collapse; border-style:solid; border-color:#c0c0c0; outline-color:#a0a0a0;}
tr.data {empty-cells:show; background-color:#f0f0f0; border-color:gray; border-width:1px; border-spacing:0px; border-collapse:collapse; border-style:solid; border-color:#c0c0c0; outline-color:#a0a0a0;}
tr.sale {empty-cells:show; background-color:#ccffcc; border-color:gray; border-width:1px; border-spacing:0px; border-collapse:collapse; border-style:solid; border-color:#c0c0c0; outline-color:#a0a0a0;}
tr.redeem {empty-cells:show; background-color:#ffcc99; border-color:gray; border-width:1px; border-spacing:0px; border-collapse:collapse; border-style:solid; border-color:#c0c0c0; outline-color:#a0a0a0;}
.readonlyfield {
	BORDER-WIDTH: 1px; BORDER-COLOR: #000000; COLOR: #404040; BACKGROUND-COLOR: #F8F8F8; HEIGHT: 18px; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:14px; TEXT-ALIGN: left;
}