p,li,div,caption,th,td {
  font-family: Trebuchet MS, Verdana, sans-serif;
  font-size: 12px;
  line-height: 16px;
}

h1 {
	font-size: 18px;
	font-family: Trebuchet MS, Verdana, sans-serif;
	color: rgb(64, 103, 168);
	white-space: nowrap;
}

h2 {
	font-size: 16px;
	font-family: Trebuchet MS, Verdana, sans-serif;
	color: rgb(64, 103, 168);
	margin-top: 24px;
}

h3 {
	font-size: 14px;
	font-family: Trebuchet MS, Verdana, sans-serif;
	color: rgb(64, 103, 168);
}

h4 {
	font-size: 12px;
	font-family: Trebuchet MS, Verdana, sans-serif;
	color: rgb(64, 103, 168);
}

/* the MOTD in the header */
div.motd {
  position: absolute;
  height: 42px;
  width: 510px;
  right: 5px;
  top: 0px;
  z-index: 5;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  line-height: 14px;
  background: transparent;
  color: #FFFFA0;
  overflow: hidden;
  text-align: left;
}

/* links in the MOTD in the header */
a.motdLink:link,a.motdLink:visited,a.motdLink:active {
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  line-height: 14px;
  background: transparent;
  color: #FFFF00;
}

a.motdLink:hover {
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  line-height: 14px;
  background: transparent;
  color: #FFFF00;
  text-decoration: underline;
}

/* -- Gateway Traveler Information System text in header -- */
span.gtis {
  font-family: arial, helvetica, sans-serif;
  font-size: 12px;
  color: #aaaaaa;
  text-align: right; 
}

/* -- Formerly gcmtravel.com in header -- */
span.formerly {
  font-family: arial, helvetica, sans-serif;
  font-size: 9px;
  color: #aaaaaa;
  text-align: right; 
}

/* menus */
td.menuHeaderOut, a.menuHeaderOut:link, a.menuHeaderOut:visited, a.menuHeaderOut:active, a.menuHeaderOut:hover {
	width: 87px;
	height: 16px;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background: rgb(64, 103, 168);
  color: white;
  cursor: pointer;
}

td.menuHeaderOver, a.menuHeaderOver:link, a.menuHeaderOver:visited, a.menuHeaderOver:active, a.menuHeaderOver:hover {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background: #93B2CE;
  color: #000066;
  cursor: pointer;
}

div.menu {
	position: fixed;
	top: 124px;
	width: 180px;
	z-index: 8;
	visibility: hidden;
	cursor: pointer;
}

ul.menuItem {
  margin: 0px;
  padding: 0px;
}

li.menuItemOut {
  list-style-type: none;
  list-style-image: none;
	border-top: 1px solid white;
  background: #93B2CE;
  height: 24px;
  line-height: 24px;
  vertical-align: middle;
}

a.menuItemOut:link, a.menuItemOut:visited, a.menuItemOut:active, a.menuItemOut:hover {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: none;
  background: #93B2CE;
  color: #000066;
  margin: 4px 0px 0px 17px;
  cursor: pointer;
}

li.menuItemOver {
  list-style-type: none;
  list-style-image: none;
	border-top: 1px solid white;
  background: #93B2CE;
  color: white;
  height: 24px;
  line-height: 24px;
  vertical-align: middle;
  background-image: url(images/menuitem_arrow.gif);
  background-repeat: no-repeat;
}

a.menuItemOver:link, a.menuItemOver:visited, a.menuItemOver:active, a.menuItemOver:hover {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: none;
  background: #93B2CE;
  color: white;
  margin: 4px 0px 0px 17px;
  cursor: pointer;
}


/* the content div of a page (following banner which is ~103 pixels tall and menus) */
div.content {
	position: absolute;
	/*overflow: hidden;*/
	left: 10px;
	right: 10px;
	top: 128px;
	border: 0px none white;
	z-index: 0;
}

/* for various footnotes, etc. */
td.small,p.small {
	font-size: 11px;
}

td.smaller,p.smaller {
	font-size: 10px;
}

/* --- link settings --- */
a:link,a:visited,a:active {
	font-family: Trebuchet MS, Verdana, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: 16px;
	font-weight: normal;
	color: rgb(34, 73, 138);
	text-decoration: none
}

a:hover {
	font-family: Trebuchet MS, Verdana, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: 16px;
	font-weight: normal;
	color: rgb(0, 0, 102);
	text-decoration: underline
}

/* links to reports at the top of the report page */
a.reportLink:link,a.reportLink:visited,a.reportLink:active {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  line-height: 16px;
  font-weight: bold;
  color: rgb(64, 103, 168);
  text-decoration: none;
  white-space: nowrap;
}

a.reportLink:hover {
  font-size: 12px;
  font-style: normal;
  line-height: 16px;
  font-weight: bold;
  color: rgb(0, 0, 102);
  text-decoration: underline;
}

/* links in report cells */
a.reportCell:link,a.reportCell:visited,a.reportCell:active {
  font-family: Trebuchet MS, Verdana, sans-serif;
  font-size: 11px;
  font-style: normal;
  line-height: 14px;
  font-weight: normal;
  color: rgb(34, 73, 138);
  text-decoration: none;
}

a.reportCell:hover {
  font-size: 11px;
  font-style: normal;
  line-height: 14px;
  font-weight: normal;
  color: rgb(0, 0, 52);
  text-decoration: underline;
}

a.cqtCaption:link,a.cqtCaption:visited,a.cqtCaption:active {
  text-align: center;
  font-weight: bold;
  background-color: white;
  color: rgb(0, 0, 102);
}

a.cqtCaption:hover {
  text-align: center;
  font-weight: bold;
  background-color: white;
  color: rgb(0, 0, 52);
  text-decoration: underline;
}

a.viewerCell:link,a.viewerCell:visited,a.viewerCell:active {
  font-family: Trebuchet MS, Verdana, sans-serif;
  font-size: 10px;
  font-style: normal;
  line-height: 12px;
  font-weight: normal;
  color: rgb(64, 103, 168);
  text-decoration: none;
}

a.viewerCell:hover {
  font-size: 10px;
  font-style: normal;
  line-height: 14px;
  font-weight: normal;
  color: rgb(0, 0, 102);
  text-decoration: underline;
}

/* --- map side panel settings --- */
td.navigator {
  font-family: Trebuchet MS, Verdana, sans-serif;
  font-size: 11px;
  font-style: normal;
  line-height: 14px;
  font-weight: bold;
  color: white;
  text-decoration: none;
  white-space: nowrap;
  text-align: left;
  padding: 2px 6px;
  margin: 1px;
  background-color: rgb(75, 64, 44);
}

td.layerControls {
  font-family: Trebuchet MS, Verdana, sans-serif;
  font-size: 11px;
  font-style: normal;
  line-height: 14px;
  font-weight: bold;
  color: rgb(0, 0, 102);
  text-decoration: none;
  white-space: nowrap;
  text-align: left;
  padding: 2px 6px;
  margin: 1px;
  background-color: rgb(151, 185, 212);
}

table.viewer {
  border-collapse: separate;
  border: 1px solid rgb(189, 190, 195);
  margin: 5px 18px 5px 5px;
  width: 265px;
}

caption.viewerCaption {
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  font-weight: bold;
  padding: 2px 2px 2px 2px;
  background-color: white;
  color: rgb(0, 0, 102);
  border-top: 3px double rgb(74, 74, 74);
  border-right: 1px solid rgb(189, 190, 195);
  border-bottom: 3px double rgb(74, 74, 74);
  border-left: 1px solid rgb(189, 190, 195);
}

th.viewerHeader,td.viewerHeader {
  font-size: 10px;
  line-height: 12px;
  text-align: left;
  font-weight: bold;
  border: 1px solid white;
  padding: 4px;
  background-color: rgb(163, 166, 201);
  color: black;
}

td.viewerCell {
  font-size: 10px;
  line-height: 12px;
  text-align: left;
  border: 1px solid white;
  padding: 4px;
  background-color: rgb(242, 242, 242);
  color: black;
}

td.viewerButton {
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  border: 1px solid white;
  padding: 4px;
  background-color: rgb(242, 242, 242);
}

input.viewerButton {
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  font-weight: bold;
  background-color: white;
  color: rgb(0, 0, 102);
}	

td.cameraViewerCell {
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  border: 0px solid white;
  width: 257px;
  padding: 5px;
  background-color: rgb(242, 242, 242);
  color: black;
}

td.lakeCoDirTabSelectedViewer {
  font-size: 10px;
  line-height: 12px;
	background-color: rgb(242, 242, 242);
  border-width: 1px 1px 0px 1px;
  border-color: rgb(159, 160, 165);
  border-style: solid;
  padding: 0px 5px;
  width: 25px;
}

td.lakeCoDirTabUnselectedViewer {
  font-size: 10px;
  line-height: 12px;
  background-color: rgb(210,210,210);
  border-width: 1px 1px 1px 1px;
  border-color: rgb(159, 160, 165);
  border-style: solid;
  padding: 0px 5px;
  width: 25px;
}

td.lakeCoCameraInnerViewer {
  font-size: 10px;
  line-height: 12px;
  background-color: rgb(242, 242, 242);
  border-width: 0px 1px 1px 1px;
  border-color: rgb(189, 190, 195);
  border-style: solid;
  padding: 4px;
}

/* --- announcement settings --- */
td.announcementTitle {
  font-size: 14px;
  font-weight: bold;
  vertical-align: middle;
  color: rgb(65, 103, 168);
}

div.announcementRule {
	background-color: rgb(65, 103, 168);
	color: rgb(65, 103, 168);
	height: 2px;
	width: 100%;
	border: none;
	margin: 0px;
	padding: 0px;
}

td.announcementDate {
  font-size: 10px;
  line-height: 12px;
  width: 100%;
  text-align: right;
  padding: 2px 5px 5px 2px;
}

/* --- report table settings --- */
td.reportTitleDate {
  font-size: 10px;
  text-align: left;
  vertical-align: middle;
  padding: 0px;
  white-space: nowrap;
}

/*NOTE width 100% keeps all the tables in the column the same width */
table.report {
  border-collapse: collapse;
  border-top: 0px solid rgb(255, 255, 255);
  border-right: 1px solid rgb(189, 190, 195);
  border-bottom: 0px solid rgb(255, 255, 255);
  border-left: 1px solid rgb(189, 190, 195);
  width: 100%;
}

table.cameraReport {
  border-collapse: collapse;
  border: 1px solid rgb(189, 190, 195);
  width: 100%;
}

table.lakeCoCamera {
  border-collapse: collapse;
  table-layout: fixed;
}

caption.reportCaption {
  text-align: center;
  font-weight: bold;
  padding: 2px 2px 2px 2px;
  background-color: white;
  color: rgb(0, 0, 102);
  border-top: 3px double rgb(74, 74, 74);
  border-right: 1px solid rgb(189, 190, 195);
  border-bottom: 3px double rgb(74, 74, 74);
  border-left: 1px solid rgb(189, 190, 195);
}

th.reportHeader {
  text-align: left;
  font-weight: bold;
  border: 1px solid white;
  padding: 4px;
  background-color: rgb(163, 166, 201);
  color: black;
}

th.reportHeaderNumeric {
  text-align: right;
  font-weight: bold;
  border: 1px solid white;
  padding: 4px;
  background-color: rgb(163, 166, 201);
  color: black;
}

th.reportHeaderIcon {
  text-align: center;
  font-weight: bold;
  border: 1px solid white;
  padding: 4px;
  background-color: rgb(163, 166, 201);
  color: black;
}

td.reportCell {
  font-size: 11px;
  line-height: 13px;
  text-align: left;
  border: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-left: 1px solid rgb(186, 186, 186);
  padding: 4px;
  color: black;
}

td.reportCellNumeric {
  font-size: 11px;
  line-height: 13px;
  text-align: right;
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-left: 1px solid rgb(186, 186, 186);
  padding: 4px;
  color: black;
}

td.reportCellIcon {
  font-size: 11px;
  line-height: 13px;
  text-align: center;
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-left: 1px solid rgb(186, 186, 186);
  padding: 4px;
  color: black;
}

td.cameraReportCell {
  font-size: 11px;
  line-height: 13px;
  text-align: center;
  vertical-align: top;
  border: 0px solid white;
  width: 184px;
  padding: 5px;
  background-color: rgb(242, 242, 242);
  color: black;
}

td.lakeCoDirTabSelected {
  background-color: rgb(242, 242, 242);
  border-width: 1px 1px 0px 1px;
  border-color: rgb(159, 160, 165);
  border-style: solid;
  padding: 0px 5px;
  text-align: center;
  width: 30px;
}

td.lakeCoDirTabUnselected {
  background-color: rgb(210,210,210);
  border-width: 1px 1px 1px 1px;
  border-color: rgb(159, 160, 165);
  border-style: solid;
  padding: 0px 5px;
  text-align: center;
  width: 30px;
}

td.lakeCoDirTabSpacer {
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-color: rgb(159, 160, 165);
  width: 100%;
}

td.lakeCoCameraInner {
  background-color: rgb(242, 242, 242);
	border-width: 0px 1px 1px 1px;
  border-color: rgb(189, 190, 195);
  border-style: solid;
  padding: 4px;
}

td.dmsReportCell {
  font-size: 11px;
  line-height: 13px;
  text-align: center;
  vertical-align: top;
  border: 0px solid white;
  width: 244px;
  padding: 5px;
  background-color: rgb(242, 242, 242);
  color: black;
}

td.reportCellTotalLabel {
  font-size: 11px;
  text-align: left;
  font-weight: bold;
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-left: 1px solid rgb(186, 186, 186);
  padding: 2px 4px;
  color: black;
}

td.reportCellTotal {
  font-size: 11px;
  text-align: right;
  font-weight: bold;
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-left: 1px solid rgb(186, 186, 186);
  padding: 2px 4px;
  color: black;
}

/* used on traveltimes.jsp and ChicagoQuickTraffic.jsp when travel time is more than 50% above average */
span.highTravelTime {
  color: red;
  font-weight: bold;
}

/* used to shade every other row in report tables (see paintTableRows.js) */
tr.shade0 {
  background-color: rgb(206, 207, 228);
}
tr.shade1 {
  background-color: rgb(242, 242, 242);
}


/* --- locations table settings --- */
td.locationsMyTravel {
	text-align: left;
	padding: 2px 6px;
	margin: 1px;
	background-color: rgb(75, 64, 44);
}

td.locationsRegion {
	text-align: left;
	padding: 2px 6px;
	margin: 1px;
	background-color: rgb(151, 185, 212);
  font-family: Trebuchet MS, Verdana, sans-serif;
  font-size: 11px;
  font-style: normal;
  line-height: 14px;
  font-weight: bold;
  color: rgb(0, 0, 102);
  text-decoration: none;
  white-space: nowrap
}

td.locationsState {
	text-align: left;
	padding: 2px 2px 2px 6px;
	margin: 1px;
	background-color: rgb(65, 103, 168);
  font-family: Trebuchet MS, Verdana, sans-serif;
  font-size: 10px;
  font-style: normal;
  line-height: 13px;
  font-weight: bold;
  color: rgb(198, 223, 255);
  text-decoration: none;
  white-space: nowrap
}

td.locationsArterial {
  text-align: left;
  padding: 2px 2px 2px 6px;
  margin: 1px;
  background-color: rgb(151, 185, 212);
}

td.locationsLeaf {
	text-align: left;
	padding: 0px 0px 0px 8px;
	background-color: white;
  font-family: Trebuchet MS,Verdana,sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: normal;
  line-height: 13px;
  text-decoration: none;
  white-space: nowrap;
}

td.locationsIndented {
	text-align: left;
	padding: 0px 0px 0px 16px;
	background-color: white;
  font-family: Trebuchet MS,Verdana,sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: normal;
  line-height: 13px;
  text-decoration: none;
  white-space: nowrap;
}

a.locationsMyTravel:link,a.locationsMyTravel:visited,a.locationsMyTravel:active {
	font-family: Trebuchet MS, Verdana, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: 14px;
	font-weight: bold;
	color: white;
	text-decoration: none;
	white-space: nowrap
}

a.locationsMyTravel:hover {
	font-family: Trebuchet MS, Verdana, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: 14px;
	font-weight: bold;
	color: rgb(200, 200, 200);
	text-decoration: underline;
	white-space: nowrap
}

a.locationsRegion:link,a.locationsRegion:visited,a.locationsRegion:active {
  font-family: Trebuchet MS, Verdana, sans-serif;
  font-size: 11px;
  font-style: normal;
  line-height: 14px;
  font-weight: bold;
  color: rgb(0, 0, 102);
  text-decoration: none;
  white-space: nowrap
}

a.locationsRegion:hover {
  font-family: Trebuchet MS, Verdana, sans-serif;
  font-size: 11px;
  font-style: normal;
  line-height: 14px;
  font-weight: bold;
  color: rgb(50, 50, 152);
  text-decoration: underline;
  white-space: nowrap
}

a.locationsState:link,a.locationsState:visited,a.locationsState:active {
  font-family: Trebuchet MS, Verdana, sans-serif;
  font-size: 10px;
  font-style: normal;
  line-height: 13px;
  font-weight: bold;
  color: rgb(198, 223, 255);
  text-decoration: none;
  white-space: nowrap
}

a.locationsState:hover {
  font-family: Trebuchet MS, Verdana, sans-serif;
  font-size: 10px;
  font-style: normal;
  line-height: 13px;
  font-weight: bold;
  color: rgb(148, 183, 213);
  text-decoration: underline;
  white-space: nowrap
}

a.locationsArterial:link,a.locationsArterial:visited,a.locationsMyTravel:active {
  font-family: Trebuchet MS, Verdana, sans-serif;
  font-size: 10px;
  font-style: normal;
  line-height: 13px;
  font-weight: bold;
  color: white;
  text-decoration: none;
  white-space: nowrap
}

a.locationsArterial:hover {
  font-family: Trebuchet MS, Verdana, sans-serif;
  font-size: 10px;
  font-style: normal;
  line-height: 13px;
  font-weight: bold;
  color: rgb(200, 200, 200);
  text-decoration: underline;
  white-space: nowrap
}

a.locationsLeaf:link,a.locationsLeaf:visited,a.locationsLeaf:active {
	font-family: Trebuchet MS, Verdana, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: 13px;
	font-weight: normal;
  color: rgb(34, 73, 138);
	text-decoration: none;
	white-space: nowrap
}

a.locationsLeaf:hover {
	font-family: Trebuchet MS, Verdana, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: 13px;
	font-weight: normal;
  color: rgb(0, 0, 102);
	text-decoration: underline;
	white-space: nowrap
}

/* --- forms --- */
table.formTable {
	border: rgb(64, 103, 168) solid 1px;
	background-color: #EEEEEE;
}

td.formCaption {
  text-align: center;
  font-weight: bold;
  padding: 2px 2px 2px 2px;
  background-color: white;
  color: rgb(0, 0, 102);
  border-top: 3px double rgb(74, 74, 74);
  border-right: 0px solid rgb(255, 255, 255);
  border-bottom: 3px double rgb(74, 74, 74);
  border-left: 0px solid rgb(255, 255, 255);
}

td.formLabel {
	font-size: 12px;
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
	color: rgb(64, 103, 168);
	text-align: right;
}

td.formLabelTop {
	font-size: 12px;
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
	color: rgb(64, 103, 168);
	text-align: center;
}

/* --- FAQ settings --- */
p.faq {
	font-family: arial, helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: bold;
}

/* --- form:errors --- */
div.errorBox {
	border: medium solid red;
	padding: 2px;
	margin-bottom: 10px;
}