body { margin:0; font:12px Verdana, Geneva, sans-serif; color:#333 }
#wrapper { width:100%; height:800px; background:url(../images/layout/header-bg.png) repeat-x;}
#header { height:57px; background:url(../images/layout/header-ornament-bg.png) no-repeat left; position:relative; /*z-index:300*/}
#logo { background:url(../images/layout/header-logo.png) no-repeat; width:149px; height:57px; float:left; cursor:pointer}
#usrstatus { float:right; margin:2px 10px; position:relative;z-index:0;} /*width value for IE7, z-index:0 view status should behind menu*/ 
#usr-account { margin-top:0px; float:right; position:relative; z-index:99}
#usr-account div.us-inf { float:left}
#usr-account div.us-inf div { float:left}
#usr-account div.us-inf img { /*margin-left:5px*/}
#usr-account div.us-inf a { text-decoration:none; color:#333}

#notification { position:relative; height:23px; padding-right:5px }
#icon-notif { width:19px; height:17px; /*background:url(../images/icon/icon-notif.png) no-repeat;*/ float:left; position:relative; z-index:2}
#notif-number { height:17px;color:#fff; margin:0 2px; float:left; position:relative; z-index:3; background: url(../images/layout/mkup-notifnumber.png) no-repeat; padding-left:5px}
#notif-number span { background:#025bc0; /*fldoat:right;*/ padding:0px 3px 1px; line-height:15px }
#notif-number #totalReqNumInbox { background:#c00; }
#notif-block { width:357px; position:absolute; z-index:10000; left:-352px; float:none; top:-3px}/*showhide notif*/
#hd {background:#fff; width:27px; height:25px; box-shadow:0px -2px 1px #999; border-left:1px solid #999; border-width:1px 1px 0; border-style:solid; border-color:#999; position:absolute; top:0; right:0; z-index:2}
#hd img { margin:4px!important}
#bd {background:#fff;width:355px; height:250px; box-shadow:0px 0px 2px #999 ; clear:both; border:1px solid #999; position:absolute; top:25px; z-index:1}
#bd div#title-notif { border-bottom:1px solid #666; text-align:center; font-weight:bold; padding:5px 0 5px 0; width:100%; color:black; }
#bd div#body-notif { overflow-y:auto; overflow-x: hidden; height:223px;color:#000000;}
#reqMyr { color:#025bc0 }
#reqIbx { color:#c00; }

#wrapper ul.listdownarrow { margin:0; padding:0; list-style:none; margin-left:3px; padding-left:3px}
#wrapper ul.listdownarrow li { padding:8px 10px 8px 20px; background:url(../images/layout/arrow-right.png) no-repeat left ;}
ul.listdownarrow li span { color:#c00; }

#usr-pref { clear:both; margin-top:3px; float:right; position:relative; z-index:98}
#usr-pref div { float:left;padding:2px 10px 3px}
#usr-pref div#super-search {border:1px solid #999; box-shadow:inset 0 0 2px #999;border-radius:4px; padding:0 21px 0 10px; height:20px; background:#fff url(../images/layout/search-img.png) no-repeat right; position:relative}
#usr-pref div#super-search .infocus{color:#000; width:275px; height:18px}
#super-search input {background:transparent; color:#aaa; border:0;width:150px; height:18px}
#super-search div#search-result { max-height:200px; min-height:100px; overflow-y:auto; width:345px; height:300px; background:#fff; border:1px solid #999; position:absolute; box-shadow: 0 0 3px #999; margin-top:3px; margin-left:-10px; right:0; z-index:2}
#search-result ul.listdownarrow li span { display:block; float:right; height:16px; padding:0 4px;line-height:11px; background:#666; color:#fff; margin-left:10px }
#search-result .listdownarrow { width:100%}
#search-result .listdownarrow tr {}
#search-result .listdownarrow tr td { padding:6px 5px 6px 20px; display:block; color:#545454; background:url(../images/layout/arrow-right.png) no-repeat left; text-decoration:none; text-align:left; background-position:left center !important}
#search-result .listdownarrow tr td > div { float:right; padding:0}
#search-result .listdownarrow tr td img { width:15px; height:15px}
#search-result .listdownarrow tr td  span { max-width:200px}


ul#shortcut { margin:0; padding:0; list-style:none; float:right}
ul#shortcut li { float:left; padding:3px 0; margin-left:1px; margin-top:1px; background:none; position:relative; z-index:0}
ul#shortcut li a { display:block; width:25px; height:25px; padding:0px 6px; text-decoration:none}

/*ul#shortcut li:hover div#shortcut-block { display:block}*/
ul#shortcut div#shortcut-block 
{ background:#fff; position:absolute; right:2px; top:35px; width:220px; background:none; z-index:-1; display:none }/*showhide shortcut*/
#hd-sc { width:33px; height:35px; background:#f7f7f7; position:absolute; right:-2px; top:-35px; box-shadow:0px -2px 1px #999; border:1px solid #999; border-bottom:0}
#bd-sc { width:220px; background:#fff; clear:both; box-shadow:0px 0px 2px #999; border:1px solid #999;}

#tablist {float:left; background:url(../images/layout/tablist-bg.jpg) repeat-x;}
#nav #tablist ul#tab { margin:0 5px; padding:0; list-style:none; display:block;}
#tablist ul#tab li { float:left; padding:3px 5px; border:1px solid #999; padding:8px; margin:5px 3px 0; background:#ccc; cursor:pointer; }
.tabconlist { display:none; clear:both  }
#tablist ul#tab li#tab-search { padding:3px}
#shortcut-con { display:block;}
#tablist ul#tab li.selected { border-bottom:1px solid #fff; background:#fff; display:block}
.tabcon {min-height:100px; max-height:200px; width:215px; background:#fff; overflow-y:auto; padding-left:5px }
.tabact { cursor:pointer; background:url(../images/layout/nav-btn-bg.png) repeat-x; height:30px; line-height:25px; text-align:center; border-top:1px solid #999}

.tabcon ul.listdownarrow li span { display:block; float:right; height:16px; padding:0 4px;line-height:11px; background:#666; color:#fff; margin-left:10px }
.tabcon .listdownarrow { width:100%}
.tabcon .listdownarrow tr {}
.tabcon .listdownarrow tr td { padding:6px 20px; display:block;	color:#545454; background:url(../images/layout/arrow-right.png) no-repeat left; text-decoration:none;}
.tabcon .listdownarrow tr td  span { max-width:200px;cursor:pointer;}



ul#home-dash {}
ul#home-dash li {}
ul#home-dash li#home-menu { background:url(../images/layout/nav-btn-bg-pin.png) repeat-x;}
ul#home-dash li#dash-menu { background:url(../images/layout/nav-btn-bg-pin.png) repeat-x;}
ul#home-dash li#ticketing-menu { background:url(../images/layout/nav-btn-bg-pin.png) repeat-x;}
ul#home-dash li#home-menu a { background:url(../images/icon/icon-menubar-home.png) no-repeat left; color:#fff; padding:8px 14px 9px}
ul#home-dash li#dash-menu a { background:url(../images/icon/icon-menubar-dash.png) no-repeat left; color:#fff; padding:8px 14px 9px}
ul#home-dash li#ticketing-menu a { background:url(../images/icon/icon-menubar-thread.png) no-repeat left; color:#fff; padding:8px 14px 9px}

#content { height:100%; /*width:100%;  overflow:scroll !important;-webkit-overflow-scrolling: touch !important;*/ }



#content-title-bc { background:blue}
#toolbarlist { float:right; width:50%; margin:2px 0}



input#qs { margin:10px; width:85%; padding:3px 5px}

.mod-selectbox { background:#fff url("../images/layout/sprite-login.png") no-repeat 77px -238px; border-radius:4px; padding:2px 25px 4px 10px!important ;box-shadow:inset 0 0 2px #999; position:relative; border:1px solid #999; cursor:pointer; color:#333;}
.mod-selectbox span { font-size:11px}
.mod-selectbox:hover {box-shadow:inset 0 0 3px #39c}
.mod-selectbox div { background:#fff;position:absolute; top:25px; right:0; box-shadow:0px 0px 3px #000; display:none }
.mod-selectbox div span { display:block; padding:2px 0;}

.mod-selectbox-in { background:#fff url("../images/layout/arrow-down.png") no-repeat right center; border-radius:4px; padding:2px 25px 4px 10px!important ;box-shadow:inset 0 0 2px #999; position:relative; border:1px solid #999; cursor:pointer; color:#333;}
.mod-selectbox-in span { font-size:11px}
.mod-selectbox-in:hover {box-shadow:inset 0 0 3px #39c}
.mod-selectbox-in div { background:#fff;position:absolute; top:25px; right:0; box-shadow:0px 0px 3px #000; display:none }
.mod-selectbox-in div span { display:block; padding:2px 0;}

.country-flag {}
.country-flag span.flag-id { background:url("../images/layout/sprite-login.png") no-repeat -6px -153px; display:block; padding-left:25px}
.country-flag span.flag-my { background:url("../images/layout/sprite-login.png") no-repeat -6px -135px; display:block; padding-left:25px}
.country-flag span.flag-en { background:url("../images/layout/sprite-login.png") no-repeat -6px -170px; display:block; padding-left:25px}
.country-flag span.flag-vn { background:url("../images/layout/sprite-login.png") no-repeat -6px -187px; display:block; padding-left:25px}
.country-flag span.flag-ph { background:url("../images/layout/sprite-login.png") no-repeat -6px -222px; display:block; padding-left:25px}
.country-flag span.flag-th { background:url("../images/layout/sprite-login.png") no-repeat -6px -204px; display:block; padding-left:25px}
.country-flag div span { width:80px}

.txtsearch-headbar { padding:5px;background:url(../images/layout/nav-btn-bg.png) repeat-x; float:left;box-shadow:0px 1px 2px #333}
.txtsearch-headbar input { border:1px solid #ccc; background:#fff; padding:3px 23px 3px 5px; background:#fff url(images/icon/search.png) no-repeat right; width:250px }
.txtsearch-headbar span { background:url(../images/layout/arrow-top.png) no-repeat center; padding:0px 5px 0px 10px}

.request {border-bottom:1px solid #666; position:relative; padding:5px; padding-bottom:30px; font:12px Verdana, Arial, Helvetica, sans-serif}
.odd { background:#fff} .even { background:#f7f7f7}
.info-req { float:left; padding-left:30px}
.info-req ul { margin:0; padding:0; list-style:none}
.req-type { width:20px; height:20px; background:#333; position:absolute; top:0; left:0; margin:7px 0 0 7px}
.req-title { font-weight:bold; font-size:13px}
.req-num {}
.req-by {}
.req-date { float:right; color:#999; padding-left:30px}
.req-stat { clear:both; padding-top:15px; padding-left:30px}
.req-stat span { font-weight:bold}
.req-stat span.ap { color:#060} /*approved*/
.req-stat span.rj { color:#c00} /*rejected*/
.req-stat span.wt { color:#36f} /*waiting*/
.req-stat span.rv { color:#c90} /*revised*/

.detail-req {padding:10px 0; padding-left:30px;}

.detail-req .table-detail-req { border:1px solid #666; border-right:0; width:100%; margin:0 0 10px}
.detail-req .table-detail-req tr {}
.detail-req .table-detail-req tr th { font-weight:bold; padding:3px 5px; background:#bbb; border-right:1px solid #666;}
.detail-req .table-detail-req tr .col-title { font-weight:bold; padding:3px 5px; background:#ddd} 
.detail-req .table-detail-req tr td { padding:3px 5px; border-right:1px solid #666;}

.detail-req table {}
.detail-req table th { font-weight:bold; text-align:left}

.note-req { margin-left:30px; margin-right:5px; margin-bottom:5px; height:70px; display:block; overflow:auto; border:1px solid gray; }

.act-req { position:absolute; bottom:0; right:0; margin:5px}

.arr-dwn { background:url(../images/layout/arrow-down.png) no-repeat center; float:right; width:15px; height:15px; margin-left:8px; display:block; text-decoration:none}

.wndfooter { background:#666; color:#fff}

.shortcut-header {padding-left:0px;height:auto;text-decoration: none;}
.shortcut-header td { height:25px; background:#eee; /*background:url(../images/layout/bg-active-request.png) repeat-x*/}
.shortcut-header #header-arw { width:20px}
.shortcut-header #header-myr { width:30px; background:#eee url(../images/layout/active-myrequest.png) center no-repeat}
.shortcut-header #header-ibx { width:30px; background:#eee url(../images/layout/active-inboxrequest.png) center no-repeat}
.shortcut-header #header-mdl { width:207px}
.shortcut-header #header-closeall { width:60px; color:black; cursor: pointer;}
.shortcut-header #header-closeall span { padding: 2px 4px; background-color: #9cf;}

#demo-badge {font-size:15px;font-weight:bold;padding:5px; position:absolute;text-align:center; margin-left:-100px;} 
#reminder { font-size:11px; font-weight:normal; color:#c00; text-decoration:blink}

#announce-info { /*display:none;*/ width:475px; position: absolute; z-index:100; right:45%; top:0; /*margin-right:-120px;*/ font-size:11px}
#announce-info #ann-icon { background:url(../images/layout/ann-alert.png) no-repeat; width:34px; height:34px; position:absolute; top:0; left:0; margin:2px 5px 0px 15px}
#announce-info #ann-top { background:#fff/*url(../images/layout/ann-top.png) repeat-y*/; width:300px; min-height:20px; text-align:left; padding:0px 10px 8px 55px;}
#announce-info #ann-top p { margin:0; text-shadow:0 1px 1px #fff; color:#333; padding-top:0px;overflow: hidden;line-height: 23px;}
/*#announce-info #ann-bot { background:url(../images/layout/ann-bot.png) no-repeat; width:475px; height:12px; cursor:pointer}*/