/* Core Typography */
h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td {
    font-size: 1.2em;
    line-height: 1.8;
}

span {
    display:block;
}

a, a:visited {
    cursor: pointer;
}

hr {
    width: 100%;
    border-top: solid 1px #b9b1a8;
    border-bottom: solid 1px #d9d5d0;
    border-width: 1px 0;
    height: 0px;
    margin: 1em 0 1em 0;
}

p {
    margin: 0 0 0.5em 0;
}

h2 {
    font-size: 5.2em;
}

/* Page Layout Setup */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    padding: 2em;
    font: 62.5% Lato, arial, sans-serif;
    color: #584d4b;
    background: #e9e6e2;
}

span.Header {
    background: #fff;
    height: 100px;
    border-bottom: solid 1px #d7d2cd;
    position: relative;
}

span.Login {
    height: 500px;
    position: relative;
}

span.Footer {
    background: #fff;
    height: 600px;
    padding: 1em 20px 1em 0;
    border-top: solid 1px #d7d2cd;
}

span.Footer p {
    font-size: 0.8em;
    letter-spacing: -0.02em;
    color: #9e9795; /* Light gray */
}

span.Datestamp
{
    font-size: 12px;
    font-weight: normal;
    color: #a8a19d;
}

input.ButtonOnWhite
{
    font-size:11px;
    font-family:Verdana,sans-serif;
    font-weight:bold;
    color:#FFF;
    width:105px;
    height:22px;
    background: url(Images/button100OnWhite.png);
    border-style:none;
}

input.ButtonOnWhite:hover
{
    background: url(Images/button100OnWhiteMouseOver.png);
}

input.ButtonOnBody
{
    font-size:11px;
    font-family:Verdana,sans-serif;
    font-weight:bold;
    color:#FFF;
    width:105px;
    height:22px;
    background: url(Images/button100OnBody.png);
    border-style:none;
}

input.ButtonOnBody:hover
{
    background: url(Images/button100OnBodyMouseOver.png);
}

input.ButtonOnEven
{
    font-size:11px;
    font-family:Verdana,sans-serif;
    font-weight:bold;
    color:#FFF;
    width:105px;
    height:22px;
    background: url(Images/button100OnEven.png);
    border-style:none;
}

input.ButtonOnEven:hover
{
    background: url(Images/button100OnEvenMouseOver.png);
}

input.ButtonOnOdd
{
    font-size:11px;
    font-family:Verdana,sans-serif;
    font-weight:bold;
    color:#FFF;
    width:105px;
    height:22px;
    background: url(Images/button100OnOdd.png);
    border-style:none;
}

input.ButtonOnOdd:hover
{
    background: url(Images/button100OnOddMouseOver.png);
}

input.LongButtonOnWhite
{
    font-size:11px;
    font-family:Verdana,sans-serif;
    font-weight:bold;
    color:#FFF;
    width:155px;
    height:22px;
    background: url(Images/button150OnWhite.png);
    border-style:none;
}

input.LongButtonOnWhite:hover
{
    background: url(Images/button150OnWhiteMouseOver.png);
}

input.LongButtonOnBody
{
    font-size:11px;
    font-family:Verdana,sans-serif;
    font-weight:bold;
    color:#FFF;
    width:155px;
    height:22px;
    background: url(Images/button150OnBody.png);
    border-style:none;
}

input.LongButtonOnBody:hover
{
    background: url(Images/button150OnBodyMouseOver.png);
}

input.LongButtonOnEven
{
    font-size:11px;
    font-family:Verdana,sans-serif;
    font-weight:bold;
    color:#FFF;
    width:155px;
    height:22px;
    background: url(Images/button150OnEven.png);
    border-style:none;
}

input.LongButtonOnEven:hover
{
    background: url(Images/button150OnEvenMouseOver.png);
}

input.LongButtonOnOdd
{
    font-size:11px;
    font-family:Verdana,sans-serif;
    font-weight:bold;
    color:#FFF;
    width:155px;
    height:22px;
    background: url(Images/button150OnOdd.png);
    border-style:none;
}

input.LongButtonOnOdd:hover
{
    background: url(Images/button150OnOddMouseOver.png);
}

input.Number /* Right-align numbers in forms */
{
    text-align: right;
}

span
{
    border: 0;
    font-family:Lato, arial;
    font-size:12px;
}

span.Title /* Screen title in page header */
{
    font-size: 1.5em;
    font-weight:bold;
    line-height:1.5;
    letter-spacing:-0.04em;
}

Span.Subtitle /* In page header */
{
    font-size:0.8em;
    color: #878282; /* Medium grey */
}

span.Minititle
{
    border: 0;
    font-family:Lato, arial;
    font-weight:bold;
    font-size:10px;
    color:#CC0000;
}

span.EquipmentSubtitle /* Used in Queue Detail and Search Detail */
{
    font-size:12px;
    font-weight:bold;
}

span.EquipmentSubtitleInverse
{
    border: 0;
    font-family:Lato, arial;
    font-weight:bold;
    font-size:11px;
    color:#00CCCC;
}

span.FormTitle /* Data entry form titles */
{
    font-size: 12px;
    font-weight: bold;
}

span.FormLabel /* Data entry form labels */
{
    font-size: 0.9em;
    font-weight: normal;
}

span.FormComment /* Data entry comments are dark, smaller */
{
    color: #746562;
    font-size:11px;
}

ScrollablePanel
{
}

Table {
    border: 0;
    font-family:Lato, arial;
    font-size:12px;
}

Table th /* Headers are white on dark */
{
    background-color: #746562;
    color:#FFFFFF;
    font-size:11px;
}

Table td
{
    padding: 3px;
}

Table.Summary, Table.Detail, Table.Admin, Table.AdminSmall, Table.AdminForm
{
  width: 100%;
  border-bottom: solid 1px #bfb9b1;
}

Table.AdminSmall
{
  font-size: 10px;
}

Table.Summary th, Table.Summary td, Table.Detail th, Table.Detail td
{
  padding: 7px 20px;
  vertical-align: middle;
}

Table.Summary th /* Summary table header: center, font, borders & bg */
{
  font-size: 12px;
  text-align: center;
  border-left: solid 1px #978380;
  background: url(Images/header.gif) no-repeat right top;
}

Table.Detail th /* Detail table header: left, font, borders & bg */
{
  font-size: 12px;
  text-align: left;
  border-left: solid 1px #978380;
  background: url(Images/header.gif) no-repeat right top;
}

Table.AdminSmall th /* Small admin table header: font, borders & bg */
{
  font-size: 12px;
  border-left: solid 1px #978380;
  background: url(Images/header.gif) no-repeat right top;
}

Table.Admin th /* Admin table header: center, font, borders & bg */
{
  font-size: 12px;
  text-align: center;
  border-left: solid 1px #978380;
  background: url(Images/header.gif) no-repeat right top;
}

Table.Summary td /* Summary table: most cells are centered & bold */
{
    padding-top: 5px;
    padding-bottom: 5px;
    border-left: solid 1px #ffffff;
    text-align: center;
    font-weight: bold;
}

Table.AdminSmall td /* Admin table */
{
    padding-top: 5px;
    padding-bottom: 5px;
    border-left: solid 1px #ffffff;
}

Table.Admin td /* Admin table: non-info cells are centered & bold */
{
    padding-top: 5px;
    padding-bottom: 5px;
    border-left: solid 1px #ffffff;
    text-align: center;
    font-weight: bold;
}

Table.Admin td.Info /* Admin table: Info cells are left-justified, not bold */
{
    text-align: left;
    font-weight: normal;
}

Table.Summary td.Info /* Summary table: Vehicle info and Alert info cells are left-justified, not bold */
{
    text-align: left;
    font-weight: normal;
}

Table.Summary td.Alert /* Summary table: Alert info cells have different bg color */
{
    color: #fff;
    font-size: 1em;
    line-height:1.4;
    padding: 0.75em 0 0.75em 32px;
    background: #8b0000!important; /* Red for alerts. NB To override HTML styles, use "!important" */
}

Table.Detail th.AlertName, td.AlertName /* Admin table: Alert cells have different bg color so use white text */
{
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    border-bottom: solid 1px #fff;
    background: #8b0000; /* Red for alerts. To override HTML styles, use "!important" */
}

Table.Detail th.AlertData, td.AlertData /* Admin table: Alert cells have different bg color so use white text */
{
    color: #fff;
    font-size: 12px;
    border-bottom: solid 1px #fff;
    background: #8b0000; /* Red for alerts. To override HTML styles, use "!important" */
}

Table.Detail th.AlertName /* Admin table: Alert header cell has an icon as well */
{
    background: #8b0000 url(Images/ico-alert.gif) no-repeat 13px 50%; /* Red for alerts. To override HTML styles, use "!important" */
    padding: 0px 0px 0px 47px;
}

Table.Summary td.first
{
    border-left: none;
}

Table.Summary .SmallDate
{
    font-size: 10px;
    color: #a8a19d;
}

Table tr.HoverNew, tr.NoHoverNew /* New row, changes color on hover (or not) */
{
    background-color: #D26262;
}

Table tr.HoverOdd, td.HoverOdd, tr.NoHoverOdd, td.NoHoverOdd /* Existing row (odd), changes color on hover (or not) */
{
    background-color: #C7C1C0;
}

Table tr.HoverErrorOdd /* Existing error row (odd), changes color on hover */
{
    background-color: #F7F8AB; /* Light yellow */
}

Table tr.HoverEven, td.HoverEven, tr.NoHoverEven, td.NoHoverEven  /* Existing row (even), changes color on hover (or not) */
{
    background-color: #D7D3CE;
    border-top: solid 1px #bfb9b1;
    border-bottom: solid 1px #bfb9b1;
}

Table tr.HoverErrorEven /* Existing error row (even), changes color on hover */
{
    background-color: #FBDF7C; /* Wheat */
}

Table tr.HoverOdd:hover, tr.HoverEven:hover, tr.HoverNew:hover, tr.HoverErrorEven:hover, tr.HoverErrorOdd:hover
{
    background-color: #BEBE66!important; /* We can override HTML by using "!important" */
}

Table tr.Hover2:hover /* Used in ScreeningSettings */
{
    background-color: #DBF1CD!important; /* We can override HTML by using "!important" */
}

TableCell {
}

Table.QueueIcon, Table.QueueIconCurrent  /* Detail screen navigation icons - prev, current, next, top vehicle*/
{
    border: solid 1px #877E7B;
    width: 110px;
    height: 81px;
    vertical-align: top;
    text-align: center;
}

Table.QueueIcon /* Detail screen navigation icons - prev, next, top vehicle*/
{
    background-color: #DCD8D4;
}

Table.QueueIconCurrent /* Detail screen navigation icons - current vehicle */
{
    font-weight: bold;
    background-color: #BBB7B0;
}

Table.QueueIcon td, Table.QueueIconCurrent td  /* Detail screen navigation icons - prev, current, next, top vehicle*/
{
    padding: 0;
    padding-left: 10px;
}

Table.QueueIcon:hover
{
    background-color: #BEB76B;
}

Table.RawData td
{
    vertical-align: top;
}

Table.QueueDetail
{
    border-style: solid;
    border-width: 1px;
    background-color: #CCCCCC;
    vertical-align: top;
}

Table.QueueDetail:hover
{
    background-color: #BEBE66;
}

Table td.QueueDetailCell
{
    border-style: solid;
    border-width: 1px;
    background-color: #CCCCCC;
    vertical-align: top;
}

Table td.QueueDetailCell:hover
{
    background-color: #BEBE66;
}