html, body {
  height:           100%;
  display:          block;
}

html {
  overflow-y:       scroll;
}

body {
  background-color: #eff4fa;
  font-size:        12px;
  color:            #4c4c4c;
  margin:           0;
}

body, button, input, textarea, select {
 font-family:       Arial,'Helvetica Neue',Helvetica,sans-serif;
}

#page {
  min-width:        1020px;
  min-height:       100%;
  position:         relative;
  overflow-x:       hidden;
}

#page-dispatching {
  min-width:        860px;
  min-height:       100%;
  position:         relative;
  overflow-x:       hidden;
}

div[id="page"] {
  background: url('/images/layout/rgn-noise.png') repeat fixed 0 0;
  background-color: #F2F5F7;
}

#header, #footer {
  color:            #4c4c4c;
  background-color: #e5eef7;
}

#header-cn {
  width:        1020px;
  height:       60px;
  padding-top:  20px;
  margin:       0 auto;
  overflow:     hidden;
}

#header-cn-dispatching {
  width:        820px;
  height:       60px;
  padding-top:  20px;
  margin:       0 auto;
  overflow:     hidden;
}

#branding {
  width:        190px;
  padding:      15px 0 20px 0;
  float:        left;
  position:     relative;
}

#branding a {
  font-size:    24px;
  font-weight:  bold;
  color:        #6e6e6e;
  text-shadow:  0 1px 0 #fff;
}

#login-info {
  width:    250px;
  float:    right;
}

#main {
  min-height:     264px;
  padding-bottom: 136px;
  position:       relative;
  z-index:        2;
}

#main-cn:after, #nav-cn:after, #content-cn:after, #aside-cn:after, #footer-cn:after {
  height:         0;
  display:        block;
  clear:          both;
  visibility:     hidden;
  content:        ' 0020';
}

#nav {
  padding:  21px 0 28px 0;
  width:    1020px;
  margin:   0 auto;
}

#nav-cn {
  width:    980px;
  margin:   0 auto;
  padding:  0 20px;
}

#nav-global {
  width:    1020px;
  float:    left;
}

#nav-dispatching {
  padding:  21px 0 28px 0;
  width:    860px;
  margin:   0 auto;
}

#nav-cn-dispatching {
  width:    820px;
  margin:   0 auto;
  padding:  0 20px;
}

#nav-global-dispatching {
  width:    860px;
  float:    left;
}

nav ul, .nav ul {
  margin:     0;
  padding:    0;
  list-style: none;
}

#nav ul li {
  float:    left;
  position: relative;
}

ul {
  list-style-type:  disc;
  padding:          0 0 0 20px;
}

ol, ul {
  margin: 0 0 16px;
}

.nav ul li a {
  padding:        8px 10px 9px 10px;
  font-size:      16px;
  letter-spacing: .3px;
  text-shadow:    none;

  border:         solid transparent;
  border-image:   url('/images/layout/nav-sep.png') 0 2 0 0;
  border-width:   0 1px 0 0;
}

.nav ul li.current a {
  -webkit-border-radius:  3px;
  border-radius:          3px;
  background-color:       #92ACC8;
  color:                  #fff;
}

a {
  color:           #006;
  text-decoration: none;
  cursor:          pointer;
}

a:link, a:visited {
  color:            #006;
  text-decoration:  none;
}

#nav-utlities {
  width:  380px;
  float:  right;
}

#content {
  width:      1020px;
  margin:     20px auto 0;
}

#content-cn {
  width:    1020px;
  margin:   0 auto;
  padding:  0 20px;
}

#content-dispatching {
  width:    860px;
  margin:   20px auto 0;
}

#content-cn-dispatching {
  width:    860px;
  margin:   0 auto;
  padding:  0 0;
}

#header {
  border-bottom:  1px solid #b3bdc6;
}

#footer {
  padding:        10px 0 10px 0;
  width:          100%;
  position:       fixed;
  bottom:         0;
  z-index:        4;
  min-width:      750px;
  text-align:     center;
  border-top:     1px solid #eef4ff;
}

#footer-cn {
  width:    980px;
  margin:   0 auto;
}

#footer-cn-dispatching {
  width:    860px;
  margin:   0 auto;
}

#globalSearch {
  width:            500px;
  margin:           0 auto;
  padding:          5px;
  text-align:       center;
  background-color: #e5eef7;
  border-left:      1px solid #b3bdc6;
  border-right:     1px solid #b3bdc6;
  border-bottom:    1px solid #b3bdc6;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius:  5px;
  -moz-border-radius-bottomright:     5px;
  -moz-border-radius-bottomleft:      5px;
  border-bottom-right-radius:         5px;
  border-bottom-left-radius:          5px;
}

.stdBorder {
  border:           1px solid;
  position:         relative;
  background-color: #e5edf6;
  border-color:     #eef4ff #b3bdc6 #b3bdc6 #eef4ff;
  padding:          10px;
  margin:           0 auto;
}

.hidden {
  display:      none;
}

h1, h2 {
  margin:       0 0 16px;
  font-size:    16px;
  line-height:  24px;
  font-weight:  normal;
}

h3 {
  margin:        0 0 5px;
  font-size:     14px;
  line-height:   18px;
  font-weight:   normal;
  border-bottom: 1px solid #B3BDC6;
}

h4 {
  margin:       0 0 16px;
  font-size:    14px;
  line-height:  16px
}

h5,h6 {
  margin:       0 0 8px;
  font-size:    12px;
  line-height:  16px
}

.hpLogin {
  width:        300px;
  margin-top:   100px;
}

tr.form-error td, tr.form-error th {
  padding-top:    0 !important;
  padding-bottom: 0 !important;
  margin-top:     0 !important;
  margin-bottom:  0 !important;
}

.form-error-arrow {
  position:     relative;
  top:          -3px;
  left:         2px;
  margin-right: 5px;
}

th {
  text-align:  left;
  font-weight: normal;
}

tfoot tr:first-child td {
  padding-top: 10px;
}


.button {
  cursor:                 pointer;
  color:                  #6e6e6e;
  font:                   bold 12px Helvetica, Arial, sans-serif;
  text-decoration:        none;
  padding:                7px 12px;
  position:               relative;
  display:                inline-block;
  text-shadow:            0 1px 0 #fff;
  -webkit-transition:     border-color .218s;
  -moz-transition:        border .218s;
  -o-transition:          border-color .218s;
  transition:             border-color .218s;
  background:             #f3f3f3;
  border:                 solid 1px #dcdcdc;
  border-radius:          2px;
  -webkit-border-radius:  2px;
  -moz-border-radius:     2px;
  -webkit-user-select:    none;
  -moz-user-select:       none;
}

a.button {
  color: #4c4c4c;
}

a.button:hover {
  color:                #333;
  border-color:         #999;
  -moz-box-shadow:      0 2px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow:   0 2px 5px rgba(0, 0, 0, 0.2);
  box-shadow:           0 1px 2px rgba(0, 0, 0, 0.15);
  -webkit-user-select:  none;
  -moz-user-select:     none;
}

a.button:active {
  color: #000;
  border-color: #444;
}

.userTouchButton {
  cursor:   pointer;
  width: 220px;
  height: 64px;
  margin:  5px;

}

.userTouchButton-selected {
  cursor:   pointer;
  width: 220px;
  height: 64px;
  margin:  3px;
  border:  3px solid green;
}

.touchButton {
  cursor:   pointer;
}


.green-btn {
  color:      #fff !important;
  background: #24B700 !important;
  background: -webkit-gradient(linear,0% 40%,0% 70%,from(#28CC00),to(#2BD800)) !important;
  background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#28CC00),to(#2BD800)) !important;
  border:     solid 1px #dcdcdc !important;
}

a.green-btn {
  text-shadow: 0 1px 0 #a5a5a5;
}

.red-btn {
  color:                  #fff !important;
  font:                   bold 12px Helvetica, Arial, sans-serif;
  text-decoration:        none;
  padding:                7px 12px;
  position:               relative;
  display:                inline-block;
  text-shadow:            0 1px 0 #fff;
  -webkit-transition:     border-color .218s;
  -moz-transition:        border .218s;
  -o-transition:          border-color .218s;
  transition:             border-color .218s;
  background:             #cf163c !important;
  background:             -webkit-gradient(linear,0% 40%,0% 70%,from(#f01649),to(#cf163c)) !important;
  background:             -moz-linear-gradient(linear,0% 40%,0% 70%,from(#f01649),to(#cf163c)) !important;
  border:                 solid 1px #dcdcdc !important;
  border-radius:          2px;
  -webkit-border-radius:  2px;
  -moz-border-radius:     2px;
}

.red-btn-hover {
  color:                  #6e6e6e;
  font:                   bold 12px Helvetica, Arial, sans-serif;
  text-decoration:        none;
  padding:                7px 12px;
  position:               relative;
  display:                inline-block;
  text-shadow:            0 1px 0 #fff;
  -webkit-transition:     border-color .218s;
  -moz-transition:        border .218s;
  -o-transition:          border-color .218s;
  transition:             border-color .218s;
  background:             #f3f3f3;
  background:             -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
  background:             -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
  border:                 solid 1px #dcdcdc;
  border-radius:          2px;
  -webkit-border-radius:  2px;
  -moz-border-radius:     2px;
}

.red-btn-hover:hover {
  color:                  #fff !important;
  background:             #cf163c !important;
  background:             -webkit-gradient(linear,0% 40%,0% 70%,from(#f01649),to(#cf163c)) !important;
  background:             -moz-linear-gradient(linear,0% 40%,0% 70%,from(#f01649),to(#cf163c)) !important;
  border:                 solid 1px #dcdcdc !important;
}

a.red-btn-hover {
  color: #4c4c4c;
}

a.red-btn-hover:hover {
  color:              #333;
  border-color:       #999;
  -moz-box-shadow:    0 2px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  box-shadow:         0 1px 2px rgba(0, 0, 0, 0.15);
}

a.big {
  font-size:  16px;
  padding:    10px 15px;
}

a.medium {
  font-size:  14px;
  padding:    10px 15px;
}

a.small {
  font-size:  12px;
  padding:     4px 4px;
}


input[type="submit"], input[type="reset"] {
  cursor:                 pointer;
  color:                  #4c4c4c;
  font:                   bold 12px Helvetica, Arial, sans-serif;
  text-decoration:        none;
  padding:                7px 12px;
  position:               relative;
  display:                inline-block;
  text-shadow:            0 1px 0 #fff;
  -webkit-transition:     border-color .218s;
  -moz-transition:        border .218s;
  -o-transition:          border-color .218s;
  transition:             border-color .218s;
  background:             #f3f3f3;
  background:             -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
  background:             -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
  border:                 solid 1px #dcdcdc;
  border-radius:          2px;
  -webkit-border-radius:  2px;
  -moz-border-radius:     2px;
  -webkit-user-select:    none;
  -moz-user-select:       none;
}

input[type="submit"]:hover, input[type="reset"]:hover {
  color:                #333;
  border-color:         #999;
  -moz-box-shadow:      0 2px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow:   0 2px 5px rgba(0, 0, 0, 0.2);
  box-shadow:           0 1px 2px rgba(0, 0, 0, 0.15);
  -webkit-user-select:  none;
  -moz-user-select:     none;
}

input[type="submit"]:active, input[type="reset"]:active {
  color:        #000;
  border-color: #444;
}

input[type="submit"].green-btn, input[type="reset"].green-btn {
  color:        #fff !important;
  background:   #24B700 !important;
  background:   -webkit-gradient(linear,0% 40%,0% 70%,from(#28CC00),to(#2BD800)) !important;
  background:   -moz-linear-gradient(linear,0% 40%,0% 70%,from(#28CC00),to(#2BD800)) !important;
  border:       solid 1px #dcdcdc !important;
  text-shadow:  0 1px 0 #a5a5a5;
}

input[type="submit"].big, input[type="reset"].big {
  font-size:  16px;
  padding:    10px 15px;
}

input[type="submit"].medium, input[type="reset"].medium {
  font-size:  14px;
  padding:    10px 15px;
}


.noTextSelect {
  -webkit-user-select:  none;
  -moz-user-select:     none;
}


#pause-button {
  margin-right: 10px;
}

.userPic {
  border:       1px solid;
  border-color: #EEF4FF #B3BDC6 #B3BDC6 #EEF4FF;
  width:        64px;
  height:       64px;
  margin:       10px 0 10px 25px;
}

.clicked {
  background:   #0f0 !important;
}


/*
.odd {
  background-color: #f8f8f8;
}

.even {
  background-color: #fff;
}
*/

.double_list_select, .double_list_select-selected {
  min-width:  180px;
}

#unread-msg-count {
  font-size:      16px;
  color:          red;
  font-weight:    bold;
  padding-left:   5px;
  padding-right:  5px;
}

table {
  border:           0;
  border-spacing:   0;
  border-collapse:  collapse;
  padding:          0;
}

table.full {
  width:            100%;
}

table.data th {
  padding:          7px;
  font-style:       italic;
}

table.data td {
  padding:          7px;
  border-bottom:    1px solid #dadee4;
  vertical-align:   middle;
}

table.no-border td {
  border:           none !important;
}

tr.no-border td {
  border-bottom:    none;
}

table.noBorders td {
  border-bottom:    0;
}

table.valign-top th, table.valign-top td {
  vertical-align:   top !important;
}

table.valign-middle th, table.valign-middle td {
  vertical-align:   middle !important;
}

table.data tr:last-of-type td {
  border-bottom:    0;
}

table.data td.empty {
  height:           10px;
  border-bottom:    0;
}

table.data thead td {
  border-bottom:    0;
}

table.data tfoot td {
  border-bottom:    0;
}

tr.addBottomBorder td {
  border-bottom:    1px solid #dadee4;
}

.bold {
  font-weight:  bold;
}

.hiddenData {
  display:      none;
  margin:       20px 0 20px 0;
}

.inactive {
  color:        #aaa;
}

.msgSent {
  margin-top:   150px;
  width:        100%;
  text-align:   center;
}

/* Pagination */
.pager {
  margin:       10px 0 10px 0;
  width:        100%;
  text-align:   center;
}

.pagination-row {
  padding:        0 !important;
}

.pagination-links {
  font-size:      90%;
  color:          #808080;
  position:       relative;
  line-height:    140%;
}

.pagination-links ul {
  display:        inline;
  padding-left:   0;
  margin-left:    0;
}

.pagination-links li {
  display:        inline;
  list-style:     none;
  text-align:     center;
  margin:         2px;
}

.pagination-links li a {
  font-weight:      100;
  font-size:        10px !important;
  text-decoration:  none !important;
  border:           1px #ccc solid;
  padding:          3px 6px 3px 6px !important;
}

.pagination-links li a.last {
  border:           2px #ccc solid;
}

.pagination-links li a:hover {
  background-color: #006;
  color:            #fff !important;
  font-weight:      bold;
  border:           1px #000 solid;
}

.pagination-links li a.last:hover {
  border:           2px #000 solid;
}

.pagination-links .current {
  font-weight:      bold;
  font-size:        10px;
  text-decoration:  none;
  padding-left:     2px;
  padding-right:    2px;

}

.pagination-links .current a {
  border:           1px solid #006;
}

.pagination-links .next a, .pagination-links .previous a {
  padding:          3px 6px 3px 6px;
}

.pagination-links .next a:hover, .pagination-links .previous a:hover {
  font-weight:      normal;
}

.pagination-links .total {
  font-size:        80%;
}
/* /Pagination */


.alignRight {
  text-align:       right !important;
}

.noPadding {
  padding:          0;
}

table.noPadding td, table.noPadding th {
  padding-top:      0;
  padding-bottom:   0;
}

.floatLeft {
  float:            left !important;
}

.floatRight {
  float:            right !important;
}

.stdTableTH {
  padding-top:      8px;
  padding-right:    5px;
}

.filterIcon {
  position:         absolute;
  top:              10px;
  right:            10px;
}

.filterActiveIcon {
  position:         absolute;
  top:              10px;
  right:            30px;
}

.filterBlock {
  display:          none;
  padding-left:     5px;
  margin-bottom:    20px;
}

.flashMessage {
  font-size:              14px;
  width:                  500px;
  margin:                 0 auto 20px;
  text-align:             center;
  padding:                15px 10px 10px 10px;
  border-radius:          5px;
  -webkit-border-radius:  5px;
  -moz-border-radius:     5px;
}

.flashError {
  background-color: red;
  color:            white;
}

.flashNotice {
  background-color: orange;
}

.flashSuccess {
  background-color: #31692c;
  color:            #fff;
}

.ordernumber-found {
  color:            green;
  font-weight:      bold;
}

.ordernumber-invalid {
  color:            #C44;
  font-weight:      bold;
}

.autocomplete {
	z-index: 3;
	position: relative;
}


.ui-datepicker-trigger {
  margin-bottom: -7px;
  margin-left:    3px;
  cursor:         pointer;
}

.ui-autocomplete-group {
  font-weight:	bold;
  padding:			.2em .4em;
  margin:				.8em 0 .2em;
  line-height:	1.5;
}

.ui-menu-item {
  padding-left: 5px !important;
}

.addressTable {
  padding:  10px;
  border:   1px solid black;
  display:  block;
}

.toggleMe {
  display: none;
}

.addressDiv {
  padding:					4px;
  background-color:	#E5EDF6;
  height:						80px;
  width:						260px;
  margin-bottom:		10px;
  border:           1px solid;
  border-color:     #eef4ff #b3bdc6 #b3bdc6 #eef4ff;
}

.delAddressLink {
  position:         absolute;
  top:              0;
  left:             185px;
}

.chooseSubnavArrow {
  float:            left;
  background-image: URL('/images/layout/arrow.png');
  width:            100px;
  height:           63px;
}

.chooseSubnavText {
  float:        left;
  margin-left:  10px;
  color:        #4C4C4C;
  margin-top:   40px;
  font-size:    16pt;
  width:        170px;
}


.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
	margin-right: 5px !important;
}


/* css for timepicker */
.ui-timepicker-div .ui-widget-header  { margin-bottom: 8px; }
.ui-timepicker-div dl                 { text-align: left; }
.ui-timepicker-div dl dt              { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd              { margin: 0 10px 10px 65px; }
.ui-timepicker-div td                 { font-size: 90%; }
.ui-tpicker-grid-label                { background: none; border: none; margin: 0; padding: 0; }

/* css for live gui */
#live-gui-main h2, #live-gui-queue h2 { font-weight: bold; }
#live-gui-main div { float: left }
#live-gui-main #sendBox { margin-top: -3px; }
#live-gui-main ul { list-style-type: none; }
#live-gui-main li { margin-bottom: 10px; }

#live-gui-queue { width: 100% }

.wkz_stats_data_set {
    vertical-align: top;
    display: inline-grid;
    margin: 10px;
    padding: 5px;
}

.wkz_stats_data_set > h2,
.wkz_stats_data_set > table > thead > tr > th {
    font-weight: bold;
}


.wkz_stats_data_set > table > tbody > tr > td,
.wkz_stats_data_set > table > thead > tr > th {
    padding-right: 10px !important;
    text-align: right;
}

.wkz_stats_data_set > table > tbody > tr > td:first-child,
.wkz_stats_data_set > table > thead > tr > th:first-child {
    text-align: left !important;
}

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor: pointer; }
#sortable li span { position: absolute; margin-left: -1.3em; }