body,html { height: 100%; }

body {
	
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 11px;
}

.mainBG {

background: white url(images/body_bg.gif) top left repeat-x;

}

.col6.logo > h2 {
    padding: 10px;
}

table,td {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 11px;
}

li {
 margin-bottom:4px;
}

#mainTable {
  height: 100%;
  width: 90%;
  /*
  border-left: 1px solid #444;
  border-right: 1px solid #444;
  */
  background: white;
}

a { color: #0099CC; }
a:hover { color: #26e; }

#pageHeader {
  height: 80px; 
  background-color: #888;
}

#HMenu {
  height: 29px;
  background-color: #666;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  font-size: 12px;
}
#HMenu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
#HMenu li {
  display: inline;
  float: left;
  margin-bottom:0px;
}
#HMenu a.hmenu {
  display: block;
  padding: 4px 18px 4px 18px;
  min-width: 80px;
  text-align: center;
}
#HMenu a.active {
  background: red;
}
#HMenu a:hover.hmenu {
  background: #444;
  color: #4af;
}

div.menuTitle {
  padding: 4px;
  border-bottom: 1px solid #aaa;
}

#leftMenu ul {
  font-weight: bold;
  list-style-type: none;
  margin: 0px; padding: 0px;
  margin-bottom: 2px;
  font-size: 11px;
}
#leftMenu li {
  display: inline;
  /*float: left;*/
  margin: 0px; padding: 0px;
}
#leftMenu a {
  display: block;
  padding: 2px;
  padding-left: 5px;
  margin-bottom: 2px;
  height: 20px;
  border-bottom: 1px solid #eee;
  background: white;
}
#leftMenu li.active a {
  background-color: #fffaf2;
}
#leftMenu a:hover, 
#leftMenu a:hover.active {
  background-color: #f6f6f6;
}

#leftMenu td {
  /*background-color: #f6f6f6;*/
}

#leftCol {
  border-right: 1px solid #ddd;
}

#footer {
  height: 20px;
  background-color: #aaa;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
}
#footer td {
  font-size: 12px;
}

#footer span.copyright {
  color: #888;
}

#main {
  width: 100%;
  min-width: 400px;
  font-size: 11px;
}

.loginbody {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 11px;

}

#userLogin input.text, 
#userLogin input.password {
  border: 1px solid black;
  width: 110px;
  padding: 1px 2px 1px 2px;
  font-size: 11px;
}
#userLogin input.button {
  border: 1px solid #444;
  font-size: 10px;
  padding: 1px 2px 1px 2px;
}

#userLogin input.button :hover {
  background: red;
}

#frontLogin div.frontLoginUser {
  padding: 4px 4px 2px 32px;
  background: white url(images/user.gif) center left no-repeat;
  
}
#frontLogin div.frontLoginPass {
  padding: 4px 4px 2px 32px;
  background: white url(images/key.gif) center left no-repeat;
}

#frontLogin input.text,
#frontLogin input.password {
  border: 1px solid black;
  padding: 1px 2px 1px 2px;
  width: 180px;
  font-size: 14px;
  background: white url(/images/input_bg1.gif) top left repeat-x;
}
#frontLogin input:focus.text,
#frontLogin input:focus.password {
  border-color: blue;
  background: white url(/images/input_bg1_on.gif) top left repeat-x;
}

td#frontLoginContainer {
  background: white;
}

div.hwelcome {
  color: #ddd;
}


div.pageTitle {
  font-size:12px;
  font-weight: bold;
  padding: 5px;
  border-bottom: 1px solid #ddd;
}
div.pageSubTitle {
  font-weight: bold;
  font-size: 95%;
  padding: 2px;
  padding-left: 5px;
}

table.dataTable td { font-size: 80%; }

tr.tableHeader {
  background-color: #734BA9;
}
tr.tableHeader td {
  color:#ffffff;
  font-weight: bold;
  border-bottom: 1px solid #fff;
  font-size:13px;
  padding:5px 10px 5px 10px;
}

td { padding:5px 5px 5px 5px; }

tr.tableHeader td a { color:#fff; }

tr.even { background-color: #f6f6f6; }
tr.odd  { background-color: #fefefe; }
tr.clickable {
  cursor: pointer;
}
tr:hover.clickable,
tr:hover.clickable { 
  background-color: #4C87B9;
  color:#ffffff;
  
}
tr.incomplete{
	background-color: #FFFFAA;
}

tr.archivedrow{
	background-color:#CCCCCC;
}

form.cleanForm input.text,
form.cleanForm input.password {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 11px;
	border: 1px solid #DDDDDD;
	padding: 5px 10px 5px 10px;
	background: white url(/images/input_bg1.gif) top left repeat-x;
	margin: 0px;
  	width:100% !important;
  	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
	float:left;
}
form.cleanForm select {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 11px;
	border: 1px solid #DDDDDD;
	padding: 5px 10px 5px 10px;
	margin: 0px;
  	width:100% !important;
  	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float:left;
}
form.cleanForm textarea {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 11px;
	border: 1px solid #DDDDDD;
	padding: 5px 10px 5px 10px;
	margin: 0px;
  	width:100%;
  	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}
form.cleanForm textarea:focus {
  border-color: #734BA9;
  background: #fafaff;
}
form.cleanForm input:focus.text,
form.cleanForm input:focus.password {
  border-color: #734BA9;
  background: white url(/images/input_bg1_on.gif) top left repeat-x;
}
form.cleanForm input.checkbox {
  /*height: 22px; width: 22px;*/
  position: relative;
  
}
form.cleanForm table.dateSelect {
  float:left;
  
}
form.cleanForm label {
 /* width: 120px;*/
  text-align: left;
  margin: 4px;
  float: left;
}
form.cleanForm br {
  clear: both;
}

form.cleanForm { position:relative; }

form div.buttonBar {

}

form input.reset,
form input.button,
form input.submit {

  width: 100px;
  padding: 3px; margin-left: 3px;
  background:#734BA9;
  border-collapse:collapse;
  border:none;
  color:#FFFFFF;
  padding:10px;
  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(155, 155, 155, 0.25); -moz-box-shadow:0px 0px 4px 0px rgba(155, 155, 155, 0.25); box-shadow:0px 0px 4px 0px rgba(155, 155, 155, 0.25);
  -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
  text-transform:uppercase;
  cursor:pointer;
  
}

form input.reset:hover,
form input.button:hover,
form input.submit:hover {


}

.yesButton { background:#3FABA4 !important; }
.noButton { background:#D05555 !important; }

label.invalidField { color: #800; }
img.calendarButton {
  margin: 4px; padding: 0px;
}

table.dateSelect tr.dayLetters td {
  background: #eee;
}
table.dateSelect td.emptyDay {
  color: #aaa;
}
table.dateSelect td.current {
  border: 1px solid #ddd;
  background: #fed;
}
td.calendarDateInput {
  letter-spacing:normal;
  line-height:normal;
  font-family:Verdana,Sans-Serif;
  font-size:12px;
  padding: 3px;
  background:white;
}
select.calendarDateInput {
  letter-spacing:.06em;
  font-family:Verdana,Sans-Serif;
  font-size:11px;
}
input.calendarDateInput {
  letter-spacing:.06em;
  font-family:Verdana,Sans-Serif;
  font-size:11px;
}
div.tooltip{
	padding: 6px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 10px;
	border:1px dashed #DDDDDD;
	background-color:#FFFFEE;
}
div.alert{
	width:100%;
	padding:5px 10px 5px 20px;
	background:url(/themes/default/images/error.gif) #FFFFAA no-repeat top left;
}
div.sectionNavigation {
	font-weight:bold;
	margin-bottom:10px;
}
span.requiredField{
	color:#734BA9;
}

table.calendarMain{
	margin-top:25px;
	margin-left:5px;
}

html>body table.calendarMain{
	margin-top:0px;
	margin-left:0px;
}

.pagingContainer{
	text-align:left;
}

.pagingNav{
}

.pagingNavItem{
	display:inline;
}

.pagingNavItem:hover{
	display:inline;
}

.archivedVehicle {
	background-color:#CCCCCC;
}


#headerbg {background: #4c87b9 none repeat scroll 0 0;color: #fff;font-size: 14px;padding: 10px;text-align: center;}

#headerbg > a {color: #fff;text-decoration: underline;}

a { text-decoration:none; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }


.container { width:990px; margin:auto; }

.header { padding:10px 0px 10px 0px; }
.header > [class^='col']:last-child { text-align:right; }

.nav { background:#1D2127; border-bottom:5px solid #C1C2C5; height:50px;  }

.content { background:#ECEDF0; min-height:350px; height:300px; height:auto !important; padding:20px 0px 20px 0px; }

.footer { text-align:right; padding:20px 0px 20px 0px; color:#B9B9C8; }

.header-img { background:url('images/top-01.jpg') center center no-repeat; }
.header-img .col12 { text-align:right; padding:10px 0px 10px 0px; font-size:50px; color:#fff; }

.feature { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 0px 4px 0px rgba(155, 155, 155, 0.25); -moz-box-shadow:    0px 0px 4px 0px rgba(155, 155, 155, 0.25); box-shadow:         0px 0px 4px 0px rgba(155, 155, 155, 0.25); position:relative; margin-bottom:20px; cursor:pointer; }
.feature .inner { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:#fff; margin-left:5px; padding:20px 30px 10px 90px; min-height:100px; color:#B2B3B5; font-size:11px; }
.feature .circle { height:50px; width:50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; position:absolute; top:20px; left:20px; }
.feature .circle i { height:50px; width:50px; display:block; text-align:center; font-size:30px; color:#fff; padding:10px 0px 0px; }
.feature .inner a { display:block; border-top:1px dotted #ddd; text-align:right; padding:5px 0px 0px 0px; font-size:30px; margin:10px 0px 0px 0px; }
.feature .inner h3 { padding:0px 0px 0px 0px; margin:10px 0px 5px 0px; font-size:24px; font-weight:normal; color:#1D2026;  }

.title { border-bottom:1px solid #DFE1E6; margin:20px 0px 20px 0px; }
.title h2 { color:#757C93; font-size:18px; font-weight:normal; border-bottom:1px solid #fff; padding:0px 0px 10px 0px; margin:0px; }
.title h2 i { color:#fff; text-shadow: 0px 0px 5px #6A7386; font-size:22px; }

.feature-01 { background:#4C87B9; }
.feature-01 .circle { background:#4C87B9; }
.feature-01 .inner a { color:#4C87B9; }

.feature-02 { background:#D05454; }
.feature-02 .circle { background:#D05454; }
.feature-02 .inner a { color:#D05454; }

.feature-03 { background:#3FABA4; }
.feature-03 .circle { background:#3FABA4; }
.feature-03 .inner a { color:#3FABA4; }

.feature-04 { background:#00A2D5; }
.feature-04 .circle { background:#00A2D5; }
.feature-04 .inner a { color:#00A2D5; }

.feature-05 { background:#ED9C28; }
.feature-05 .circle { background:#ED9C28; }
.feature-05 .inner a { color:#ED9C28; }

.feature-06 { background:#734BA9; }
.feature-06 .circle { background:#734BA9; }
.feature-06 .inner a { color:#734BA9; }

.feature-login { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 0px 4px 0px rgba(155, 155, 155, 0.25); -moz-box-shadow:    0px 0px 4px 0px rgba(155, 155, 155, 0.25); box-shadow:         0px 0px 4px 0px rgba(155, 155, 155, 0.25); position:relative; margin-bottom:20px; }
.feature-login .inner { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:#fff; margin-left:5px; padding:20px 30px 10px 130px; min-height:100px; color:#B2B3B5; font-size:11px; }
.feature-login .circle { height:98px; width:98px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; position:absolute; top:20px; left:20px; }
.feature-login .circle i { height:100px; width:100px; display:block; text-align:center; font-size:70px; color:#fff; padding:15px 0px 0px; }
.feature-login .inner a { display:block; border-top:1px dotted #ddd; text-align:right; padding:5px 0px 0px 0px; font-size:30px; margin:10px 0px 0px 0px; }
.feature-login .inner h3 { padding:0px 0px 0px 0px; margin:10px 0px 5px 0px; font-size:28px; font-weight:normal; color:#1D2026;  }

.feature-login { background:#4C87B9; }
.feature-login .circle { background:#4C87B9; }
.feature-login .inner a { color:#4C87B9; }
.feature-login input[type="submit"] { background:#4C87B9; }

.formrow { padding:5px 20px 5px 0px; }
.formrow.btn { padding:5px 0px 25px 0px; text-align:right; }
.formrow input[type="text"], .formrow input[type="password"] { width: 100%; padding: 8px 10px; background-color: #FFF; border: 1px solid #BBB; margin-top:5px; }
.formrow input[type="submit"] { width: 50%; padding: 8px 10px; border:none; margin-top:5px; margin:auto; color:#fff; text-transform:uppercase; }

.menuTitle { display:none; }

.menu-row { position:absolute; }
.menu-row .menu-col, .menu-mobile { position:relative; text-align:center; width:165px; margin:0px; border-bottom:5px solid #C1C2C5; }
.menu-row .menu-col a, .menu-mobile a { display:block; padding:15px 0px 0px 40px; color:#8E9093; font-size:14px; height:35px; border-left:1px solid #2F3338; }
.menu-row .menu-col a:hover, .menu-mobile a:hover { color:#fff; background:#171717; }
.menu-row .menu-col i, .menu-mobile i { position:absolute; left:0px; top:0px; color:#fff; font-size:18px; display:block; background:#171717; border-right:1px solid #2F3338; width:40px; height:35px; padding:15px 0px 0px 0px; margin-left:1px; }
.menu-row > [class^='col']:last-child a { border-right:1px solid #2F3338; }

.hwelcome { padding-right:100px; padding-top:20px; position:relative; min-height:80px; }
.hwelcome .circle { height:78px; width:78px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; position:absolute; top:10px; right:5px; background:#0099CC; }
.hwelcome .circle i { height:78px; width:78px; display:block; text-align:center; font-size:78px; color:#fff; padding:10px 0px 0px 0px !important; margin-left:0em !important; }
.hwelcome h3 { color:#757C93; font-size: 18px; font-weight: normal; border-bottom: 1px solid #FFF; padding: 0px 0px 10px; margin: 0px; }

.hwelcome [class^="icon-"]:before, [class*=" icon-"]:before {

  font-variant: normal;
  text-transform: none;

  margin-left: 0em !important;
  margin-right: 0em !important;

 }
 
 table { width:100% !important; }
 
 .hNav {
    border-bottom: 1px solid #DFE1E6;
    margin: 0px 0px 20px 0px; padding-bottom:20px;
} 
 .hNav .col2 {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:#4C87B9; padding-left:5px; -webkit-box-shadow: 0px 0px 4px 0px rgba(155, 155, 155, 0.25); -moz-box-shadow:    0px 0px 4px 0px rgba(155, 155, 155, 0.25); box-shadow:         0px 0px 4px 0px rgba(155, 155, 155, 0.25); }
 .hNav a { text-align:center; padding:16px 0px 0px 0px; display:block; height:34px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:#fff; color:#000; }
 .hNav a.long { padding:10px 0px 0px 0px; height:40px; }
 .hNav a:hover { background:#4C87B9; color:#fff; }
 .hNav .col2.empty { background:none; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; }
 .hNav .topbtn { background:#D05454; }
 .hNav .topbtn a:hover { background:#D05454; }
 
 .paging, .pagingNav { text-align:center; border-top:1px solid #DFE1E6; padding-top:20px; margin-top:20px; }
 .paging a, .pagingNavItem a { background:#734BA9; color:#fff; display:inline-block; padding:5px 0px 5px 0px; margin-left:1px; margin-top:1px; width:26px; }
 .paging b, .pagingNavItem b { display:inline-block; padding:5px 0px 5px 0px; margin-left:1px; margin-top:1px; width:26px; }

 /* highlight results */
.ui-autocomplete span.hl_results {
    background-color: #ffff66;
}
 
/* loading - the AJAX indicator */
.ui-autocomplete-loading {
    background: white url('/themes/default/images/ui-anim_basic_16x16.gif') right center no-repeat;
}
 
/* scroll results */
.ui-autocomplete {
    max-height: 250px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding for vertical scrollbar */
    padding-right: 5px;
}
 
.ui-autocomplete li {
    font-size: 12px;
}
 
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
    height: 250px;
}

.ui-menu .ui-menu-item a {
    text-align: left;
}


form .yesButton { background:url('images/icon_yes.png') #EEF3F6 95% center no-repeat; border:1px solid #AAAAAA; padding:3px; }
form .noButton { background:url('images/icon_no.png') #EEF3F6 95% center no-repeat; border:1px solid #AAAAAA; padding:3px; }
form .yesButton:hover { cursor:pointer; }
form .noButton:hover { cursor:pointer; }
form .approvalButton:hover { cursor:pointer; }

.needsApproval, .needsApproval.clickable:hover {background: red;color: white;}
.needsApproval div {background-color: red !important;color: white;}
.needsApproval div span {color: white;}

.cancelled, .cancelled.clickable:hover {background: #666666 none repeat scroll 0 0;color: white;}

.info {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 20px 15px 20px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('info.png');
}


@media only screen and (max-width: 767px) {
  
  table.responsive { margin-bottom: 0; }
  
  .pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
  .pinned table { border-right: none; border-left: none; width: 100%; }
  .pinned table th, .pinned table td { white-space: nowrap; }
  .pinned td:last-child { border-bottom: 0; }
  
  div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
  div.table-wrapper div.scrollable { margin-left: 35%; }
  div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }  
  
  table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
  table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
  
  
}
.clearfix:after{content:" ";display:block;clear:both;visibility:hidden;line-height:0;height:0}
div.table-wrapper div.scrollable:after{content:" ";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.pinned:after{content:" ";display:block;clear:both;visibility:hidden;line-height:0;height:0}
div.table-wrapper:after{content:" ";display:block;clear:both;visibility:hidden;line-height:0;height:0}

#dhtmltooltip { z-index:100; }

.fleetLogo { max-width:200px; }
.footer .fleetLogo { max-width:100px; }

.icon-cancel { color:#EE3C3E; }
.icon-ok-1 { color:#59A151; }


/* 280 MOBILE */
@media only screen and (min-width: 0px) and (max-width: 767px), (orientation: portrait) and (min-width: 0px) and (max-width: 767px), (orientation: landscape) and (min-width: 0px) and (max-width: 767px) {

.nav { height:auto; border:none; }
.menu-row { position:static; }
.menu-row > [class^='col']:last-child a { border-right:none; }
.menu-row .menu-col { width:100%; }
.container { width:100%; margin:auto; }
.header-img .col12 { text-align:center; }
.header .logo img { max-width:200px; margin:0px auto 0px auto !important; }
.usertop { border-top:4px solid #ECEDF0; padding-top:10px;}
.content { padding:20px 20px 20px 20px; }
.feature .inner { font-size:10px; }
.feature .inner h3 { font-size:20px; }
.footer .col12 { text-align:center; }
.menu-col { display:none; }
.menu-mobile { margin-bottom:0px !important; }
.hNav a, .hNav a.long { padding:10px 0px 10px 0px; height:auto; }
.hNav .col2.empty { display:none; }
img[src$="calendar.png"], img[src$="cross.gif"], img[src$="tick.gif"], img[src$="help.gif"] { max-width:16px; display: inline-block !important; }
.fleetLogo { max-width:200px; display: inline-block; margin:auto; }
.footer .fleetLogo { max-width:100px; display: inline-block; margin:auto; }
}

/* 700 IPAD PORTRAIT */
@media only screen and (min-width: 768px) and (max-width: 989px), (orientation: portrait) and (min-width: 768px) and (max-width: 989px) {
	
.container { width:100%; margin:auto; }
.feature .inner { font-size:10px; }
.feature .inner h3 { font-size:20px; }
.footer .col12 { text-align:center; }
.menu-row { position:static; }
.menu-row .menu-col, .menu-mobile { width:17%; margin:0px; }
.menu-row .menu-col a, .menu-mobile a { padding:18px 10px 0px 50px;  font-size:11px; height:32px; }
.menu-row > [class^='col']:last-child { width:15%; }
.menu-mobile { display:none; }
.menu-col { display:block; }

}

/* 960 IPAD LANDSCAPE / DESKTOP*/
@media only screen and (min-width: 990px), (orientation: landscape) and (min-width: 990px) {
	
.menu-mobile { display:none; }
.menu-col { display:block; }

}