html, body {
    height: 100%;
}

body {
    height: 100%;
    min-height: 100%;
    font-family: Tahoma, Arial;
}

.site-wrp {
    position: relative;
    width: 100%;
    min-width: 1260px;
    min-height: 100%;
    height: 100%;
    margin: auto;
}

.main-wrapper-ctn {
    float: left;
    min-width: 1260px;
    width: 100%;    
    margin: 0px auto 0px auto;
}

#main-container {    
    margin: auto;
    min-width: 1260px;
    width: 100%;   
    height: 100%; 
}

html.busy, html.busy * {  
  cursor: wait !important;  
}  

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.ca:after {
  content: ".";
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  line-height: 0;
  width: 0;
  height: 0;
}

.ca {
    zoom: 1;
}

.ct-outer {
    width: 100%;
    text-align: center;
}

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

a { text-decoration: none; }

.tx-left {
    text-align: left;
}
.tx-right {
    text-align: right;
}

.ns {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hide {
    display: none;
}
.cc-hide {
    display: none;
}

.out-center {
    position: relative;
    float: right;
    right: 50%;    
}

.in-center {
    position: relative;
    float: right;
    right: -50%;    
}

pre {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.footer-bg {
    width: 1260px;
    height: 433px;
    background-image:url('/content/images/common/choco-bg.png');
    background-repeat:no-repeat;
    margin: auto;
}

/* Header */
.choco-hd-wrp {
    width: 100%;
    height: 105px;
    background-color: #000000;
}

.choco-hd-wrp .choco-hd-ctn {
    width: 1260px;
    height: 105px;
    margin: 0px auto 0px auto;
}

.choco-hd-wrp .choco-hd-ctn .main-logo {
    float: left;
    width: 134px;
    height: 78px;
    margin: 16px 0px 0px 115px;
    background-image:url('/content/images/common/choco-star-logo.png');
    background-repeat:no-repeat;
}

.choco-hd-wrp .choco-hd-ctn .user-info-wrp {
    float: right;
    margin-right: 122px;
}

.choco-hd-wrp .choco-hd-ctn .user-info-wrp .usr-name {
    float: left;
    font-family: 'MyriadPro-SemiBold';
    font-size: 18px;
    color: #FFFFFF;
    margin: 45px 0px 0px 0px;
}

.choco-hd-wrp .choco-hd-ctn .user-info-wrp .usr-btn-ctn {
    float: left;
    height: 28px;
    margin: 38px 0px 0px 18px;
}

.choco-hd-wrp .choco-hd-ctn .user-info-wrp .usr-btn-ctn .usr-btn {
    float: left;    
    margin-left: 10px;
}

/* Panel */
.panel-wrp {
    position: relative;
    width: 100%;
    height: 48px;
    background-color: #F1C62B;
}

.panel-wrp .panel-ctn {    
    width: 1260px;
    height: 48px;
    margin: 0px auto 0px auto;
    overflow: hidden;
}

.panel-wrp .panel-ctn .cr-rest-frm {
    float: left;    
    min-width: 290px;
    margin: 0px 0px 0px 116px;
    overflow: hidden;
}

.panel-wrp .panel-ctn .cr-rest-frm:hover {
    cursor: pointer;
}

.panel-wrp .panel-ctn .cr-rest-frm .cr-rest-lbl {
    float: left;
    min-width: 247px;
    color: #000000;
    font-family: 'MyriadPro-SemiBold';
    font-size: 18px;
    line-height: 22px;
    margin: 16px 0px 0px 0px;
}

.panel-wrp .panel-ctn .cr-rest-frm .cr-arr {
    float: left;
    width: 13px;
    height: 9px;
    margin: 15px 10px 0px 10px;
}

.panel-wrp .panel-ctn .cr-rest-frm:hover .cr-arr .arr {
    background-position: -55px -105px;
}

.panel-wrp .cr-rest-list {
    position: absolute;
    top: 48px;        
    width: auto;    
    max-height: 300px;
    margin-left: 100px;
    background-color: #232324;
    overflow: auto;
    overflow-x: hidden;
    z-index: 10;
}

.panel-wrp .cr-rest-list .cr-rest-item {
    width: auto;
    height: 50px;
}

.panel-wrp .cr-rest-list .cr-rest-item:hover {    
    background-color: #444444;
    cursor: pointer;
}

.panel-wrp .cr-rest-list .cr-rest-item .cr-rest-txt {    
    color: #999999;    
    min-width: 268px;
    padding: 16px 50px 0px 25px;
    font-family: 'quicksandbold';
    font-size: 18px;
    white-space: nowrap;   
}

.panel-wrp .cr-rest-list .cr-rest-item:hover .cr-rest-txt {    
    color: #FFC218;      
}

.panel-wrp .panel-ctn .pn-sep {
    float: left;
    width: 1px;
    height: 40px;
    background-color: #FFFFFF;
    margin-top: 4px;
}

.panel-wrp .panel-ctn .search-frm {
    float: left;
    position: relative;
    width: 362px;
    height: 38px;
    margin: 5px 0px 0px 10px;    
}

.panel-wrp .panel-ctn .search-frm .search-inp {
    position: absolute;
    width: 346px;
    height: 38px;
    font-family: 'quicksandbold';
    font-size: 22px;
    padding: 0px 8px 0px 8px;
    border: none;
    border-radius: 20px;
}

.panel-wrp .panel-ctn .search-frm .search-btn {
    position: absolute;
    width: 38px;
    height: 38px;
    right: 0;
}

.panel-wrp .panel-ctn .search-frm .search-btn:hover {
    cursor: pointer;
}

.panel-wrp .panel-ctn .filter-panel {
    float: right;
    margin-right: 122px;
    overflow: hidden;
}

.panel-wrp .panel-ctn .filter-panel .flt-label {
    float: left;
    font-family: 'MyriadPro-SemiBold';
    font-size: 18px;
    color: #000000;
    margin-top: 17px;
}

.panel-wrp .panel-ctn .filter-panel .flt-list {
    float: left;
    width: 27px; 
    height: 25px; 
    margin: 14px 0px 0px 18px;
}

.panel-wrp .panel-ctn .filter-panel .flt-list:hover {
    cursor: pointer;
}

.panel-wrp .panel-ctn .filter-panel .flt-fav {
    float: left;
    width: 28px; 
    height: 27px; 
    margin: 13px 0px 0px 14px;
}

.panel-wrp .panel-ctn .filter-panel .flt-fav:hover {
    cursor: pointer;
}

/* Navigation */
.nav-wrp {
    width: 100%;
    height: 70px;    
}

.nav-wrp .nav-ctn {
    width: 1260px;
    height: 65px;
    margin: 0px auto 0px auto;
    overflow: auto;
}

.nav-wrp .nav-ctn .nav-item {
    float: left;
}

.nav-wrp .nav-ctn .nav-item:hover {
    cursor: pointer;
}

.nav-wrp .nav-ctn .nav-item.ovw {
    margin-left: 118px;
}

.nav-wrp .nav-ctn .nav-item.cst {
    margin-left: 30px;
}

.nav-wrp .nav-ctn .nav-item.sms {
    margin-left: 30px;
}

.nav-wrp .nav-ctn .nav-item.rwd {
    margin-left: 30px;
}

.nav-wrp .nav-ctn .nav-item.email {
    margin-left: 25px;
}

.nav-wrp .nav-ctn .nav-item.rpt {
    margin-left: 30px;
}

.nav-wrp .nav-ctn .nav-item .nav-lbl {
    margin: 30px 0px 0px 0px;    
    padding: 0px 5px 0px 5px;
    font-family: 'quicksandbold';    
    font-size: 18px;
    color: #232324;
    letter-spacing: -1px;
}

.nav-wrp .nav-ctn .nav-item .nav-bar {
    display: none;
    width: 100%;
    height: 4px;
    margin: 10px 0px 0px 0px;
    background-color: #FFC218;
}

.nav-wrp .nav-ctn .nav-item:hover .nav-bar {
    display: block;
}

.nav-wrp .nav-ctn .nav-item.act .nav-bar {
    display: block;
}

.nav-wrp .nav-ctn .sms-frm {
    float: left;
    margin: 18px 0px 0px 0px;
    height: 18px;
    border-radius: 8px;
    background-color: #39B54A;
}

.nav-wrp .nav-ctn .sms-frm .sms-credit {
    font-family: 'dbhelvethaicaxbd';
    padding: 0px 10px 0px 10px;
    font-size: 15px;
    text-align: center;
    color: #FFFFFF;
    margin-top: 2px;
}

/* User Icon */
.icon.cc-user {
    width: 42px; height: 28px;
    background-image: url('/content/images/common/choco-user-btn.png');
    background-repeat: no-repeat;
    display: inline-block;
}

.cc-user.user { background-position: 0px 0px; } 
.cc-user.user.act { background-position: -84px 0px; } 
.cc-user.user:hover { background-position: -84px 0px; cursor: pointer; } 

.cc-user.setting { background-position: 0px -28px; } 
.cc-user.setting.act { background-position: -84px -28px; } 
.cc-user.setting:hover { background-position: -84px -28px; cursor: pointer; } 

.cc-user.logout { background-position: 0px -56px; } 
.cc-user.logout.act { background-position: -84px -56px; } 
.cc-user.logout:hover { background-position: -84px -56px; cursor: pointer; } 

/* Panel Icon */
.icon.cc-panel {    
    background-image: url('/content/images/common/choco-panel-icon.png');
    background-repeat: no-repeat;
    display: inline-block;    
}

.cc-panel.search { background-position: 0px 0px; width: 44px; height: 43px; }    
.cc-panel.search.act { background-position: -44px 0px; width: 44px; height: 43px; }  
.cc-panel.search:hover { background-position: -44px 0px; width: 44px; height: 43px; }    

.cc-panel.list { background-position: -9px -48px; width: 27px; height: 25px; }    
.cc-panel.list.act { background-position: -53px -48px; width: 27px; height: 25px; } 
.cc-panel.list:hover { background-position: -53px -48px; width: 27px; height: 25px; } 

.cc-panel.fav { background-position: -9px -79px; width: 28px; height: 27px; }    
.cc-panel.fav.act { background-position: -53px -79px; width: 28px; height: 27px; } 

.cc-panel.arr { background-position: -16px -117px; width: 13px; height: 9px; }    
.cc-panel.arr.act { background-position: -61px -117px; width: 13px; height: 9px; } 
.cc-panel.arr:hover { background-position: -61px -117px; width: 13px; height: 9px; cursor: pointer; } 

.icon.cc-panel-v2 {    
    background-image: url('/content/images/common/choco-panel-icon-v2.png');
    background-repeat: no-repeat;
    display: inline-block;    
}

.cc-panel-v2.search { background-position: 0px 0px; width: 40px; height: 38px; }    
.cc-panel-v2.search.act { background-position: -40px 0px; width: 40px; height: 40px; }  
.cc-panel-v2.search:hover { background-position: -40px 0px; width: 40px; height: 38px; }    

.cc-panel-v2.list { background-position: -8px -43px; width: 24px; height: 23px; }    
.cc-panel-v2.list.act { background-position: -48px -43px; width: 24px; height: 23px; } 
.cc-panel-v2.list:hover { background-position: -48px -43px; width: 23px; height: 23px; } 

.cc-panel-v2.fav { background-position: -7px -73px; width: 25px; height: 24px; }    
.cc-panel-v2.fav.act { background-position: -48px -73px; width: 25px; height: 24px; } 

.cc-panel-v2.arr { background-position: -15px -105px; width: 10px; height: 7px; }    
.cc-panel-v2.arr.act { background-position: -55px -105px; width: 10px; height: 7px; } 
.cc-panel-v2.arr:hover { background-position: -55px -105px; width: 10px; height: 7px; cursor: pointer; }