/*DEFAULTS*/ * {margin:0; padding:0;} body {background-color:#7da07d; color:#333; display:block; margin:0px; padding:0px; font-family:Arial,Helvetica,sans-serif; font-size:9pt; width:100%; height:100%; overflow: hidden;} html {width:100%; height:100%;} p {margin:0px 0px 6px 0px;} .bold {font-weight:bold;} .italic {font-style:italic;} .center {text-align:center;} .clear {clear:both; color:#fff; display:none;} a {color:#4c644c; text-decoration:none;} a:hover {color:#333; text-decoration:underline;} ul {display:inline; position:relative; list-style:none; width:100%;} ul li {display:inline; position:relative; float:left; margin-top: 10px; margin-left:0px; width:100%;} /* ROW COLORS USED ON TABLIST AND ARRIVAL LIST TABLES */ .rowOdd {background-color:#ececb6;} .rowHover {background-color:#b9cab9;} /* BOXES FOR ISOLATING AND HOLDING MULTIPLE, RELATED COMPONENTS */ #pageContainer {display:block; position:absolute; top:0px; left:0px; width:100%; height:100%;} #contentPanel {display:block; position:absolute; top:98px; right:14px; bottom:28px; left:14px; width:auto; height:auto;} #routePanel {display:block; position:absolute; top:28px; bottom:0px; left:0px; width:300px; height:auto;} #mapPanel {display:block; position:absolute; top:0px; bottom:0px; left:300px; right:0px; width:auto; height:auto;} /* Accordion */ #dr-utility-drawers {display:block; position:absolute; top:0px; bottom:6px; left:0px; width: 300px; height:auto;} /* Drawer Styles */ /* #dr-utility-drawers ul {display:inline; position:relative; list-style:none; width:100%;} #dr-utility-drawers ul li {display:inline; position:relative; clear: left; float:left; width:100%;} #dr-utility-drawers ul li .routeListItem {display: inline; position: relative;} #dr-utility-drawers ul li .routeListItem li {width: 282px;} */ .routeListItem {display:inline; position:relative;} .routeListItem li {width: 282px;} #drawers {width: 100%;} #drawers a {font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight:bold; text-align: center;} .dr-drawer {background-color: #fefecb; padding: 3px 3px 3px 3px;} .dr-drawer iframe {background-color: #fefecb; top: 3px; left: 3px; right: 3px; bottom: 3px;} #routeSearchSelection {width: 290px; text-align: left;} #vehicleSearchSelection {width: 290px; text-align: left;} /*Overflow-y and overflow-x are required and added to enable vertical scrolling*/ .alert-screen-type {display: block; background-color: #fefecb; width: 100%; height: 98%; overflow-y:auto; overflow-x:hidden;} .alert-screen-type h2 {background-color: #d3d39d; text-align: center; width: 100%;} .alert-form-selection {} .alert-item-container {width: 100%; background-color: #fefecb; display: block; height: auto;} .alert-item {clear: both;} .alert-item a {text-decoration: underline;} .alert-item-header {width: 100%; text-align: center; background-color: #c3c39d;} .alert-item-footer {clear: both; border-bottom-style: solid; border-bottom-width: 1px;} .alert-item-clear {clear: both; margin-top: 3px; margin-bottom: 3px;} .alert-item-info {clear: both;} .alert-item-info-label {width: 37%; display: block; left: 0px; text-align: left; white-space: normal; top: 1em; float: left; font-weight: bold;} .alert-item-info-data {width: 63%; display: block; right: 0px; text-align: left; white-space: normal; top: 1em; float: right;} .alert-item-info-clear {clear: both;} .alert-form-buttons {display: inline; width: 100%; padding: 0; clear: both;} .alert-form-button-left {display: inline; left: 0px;} .alert-form-button-middle {display: inline;} .alert-form-button-right {display: inline; right: 0px;} .alert-label {text-align: center; font-weight: bold;} /* HEADER COMPONENT */ #header {display:block; position:absolute; top:0px; left:0px; width:100%; height:98px;} #otviaLogo {position:absolute; top:14px; left:14px; width:300px; height:70px;} #agencyName {left:328px; font-size:16pt; font-weight:bold; position:fixed; text-align:center; top:14px; right:14px; height:21px;} #agencyLogo {display:block; position:absolute; width:auto; top:14px; left:342px; right:160px; height: 70px; max-height:70px;} #agencyLogo img.align-left {display:block; margin-left:0px; margin-right:auto; height: 70px; max-height:70px;} #agencyLogo img.centered {display:block; margin-left:auto; margin-right:auto; height: 70px; max-height:70px;} #agencyLogo img.align-right {display:block; margin-left:auto; margin-right:0px; height: 70px; max-height:70px;} #agencyLogoLeft {display:block; position:absolute; top:14px; left:14px; height: 70px; max-height:70px;} #agencyLogoLeft img.align-left {display:block; margin-left:0px; margin-right:auto; height: 70px; max-height:70px;} #agencyLogoCenter {display:block; position:absolute; top:14px; left:342px; right:126px; height: 70px; max-height:70px;} #agencyLogoCenter img.centered {display:block; margin-left:auto; margin-right:auto; height: 70px; max-height:70px;} #otviaTime {display: block; position: absolute; background-color: #A0DF82; top: 14px; width: 128px; right: 28px; height: 56px; max-height: 70px; padding-top: 14px;} #oDOW {position: relative; text-align: center; font-size: 11px;} #oDate {position: relative; text-align: center; font-size: 11px;} #oTime {position: relative; text-align: center; font-weight: bold; font-size: 14px;} #oTZ {position: relative; text-align: center; font-size: 11px;} /* ROUTE COMPONENT */ #routeTop {background: #D3D39D; position:absolute; top:28px; left:0px; right: 0px; width:100%; height:35px;} #routeTop h1 {display:block; position:relative; float:left; font-size:12pt; font-variant:small-caps; letter-spacing:0.2em; margin-top:3px; text-align:center; width:66%; height: 35px;} #routeTop h2 {display:block; position:relative; float:right; font-size:8pt; font-variant:small-caps; letter-spacing:0.2em; margin-top:3px; text-align:center; width:25%; height: 35px;} #routeTop h3 {display:block; position:relative; margin-top: 8px; margin-right:0px; margin-bottom:3px; margin-left:0px; float:left; text-align:center; width:7%;} #routes {position:absolute; top:63px; bottom:18px; margin-top: 3px; left:0px; width:100%; height:auto; overflow:auto;} #routeHeader {background: #D3D39D; position:absolute; top:28px; left:0px; right: 0px; width:100%; height:35px;} #routeContent {} .routeCheckbox {display:block; position:relative; margin-top: 0px; margin-right:0px; margin-bottom:3px; margin-left:0px; float:left; text-align:center; width:7%;} .routeColor {display:block; position:relative; margin-top: 2px; margin-right:0px; margin-bottom:3px; margin-left:2%; background:#0c0; border:1px solid #000; float:left; height:10px; text-align:center; width:7%;} .routeDesc {display:block; position:relative; margin-top: 0px; margin-right:0px; margin-bottom:3px; margin-left:4%; float:left; width:78%;} .routeName {display:block; position:relative; margin-top: 0px; margin-right:0px; margin-bottom:3px; margin-left:0px; float:left; width:82%;} .routeExpander {display:block; position:relative; margin-top: 0px; margin-right:0px; margin-bottom:3px; margin-left:0px; float:left; bottom:0px; width:18%; height:100%;} .routeExpander img {float:right; right:0px; top:0px;} /* .routeExpander img + ul {float:right; list-style:none; display:none; position:absolute; right:0px; top:98%; width:130px; border:1px solid #000; background-color:#ddd; overflow:visible;}*/ .routeExpander img + ul {list-style:none; display:none; position:absolute; left:-180px; top:15px; width:200px; border:1px solid #000; background-color:#eee; overflow:visible;} .routeExpander img + ul li { margin-top:0px; margin-right:1px; background-color:#eee; border:1px solid #000; width:100%; text-align:right;} .routeExpander img + ul li a {color: #000; text-decoration:none; display:block; background-color:#eee; padding:4px; margin-left:4px;} .routeExpander img + ul li a:hover {color: #ff0000; text-decoration:underline;} #routeBottom {background:#fefecb url(../../images/DigitalRecorders/route_bkgd_bottom.gif) no-repeat bottom left; position:absolute; bottom:0px; left:0px; width:100%; height:18px;} /* COMPLEX MAP EXPANDER COMPONENT */ #mapExpanderD1 {position:absolute; left:0px; top: 0px; width:28px; height:100%; } #mE_D2 {display:none; position:absolute; left:0px; top: 0px; width:14px; height:14px; background:#d3d39d url(../../images/map_expander_UL.gif) no-repeat center; } #mE_D3 {display:none; position:absolute; right:0px; top: 0px; width:14px; height:14px; background:#d3d39d url(../../images/map_expander_UR.gif) no-repeat center; } #mE_D4 {display:none; position:absolute; left:0px; top: 14px; bottom: 14px; width:14px; height:auto; background:#d3d39d url(../../images/map_expander_L.gif) repeat-y center; } #mE_D5 {display:none; position:absolute; right:0px; top: 14px; bottom: 14px; width:14px; height:auto; background:#d3d39d url(../../images/map_expander_R.gif) repeat-y center; } #mE_D6 {display:none; position:absolute; left:0px; bottom: 0px; width:14px; height:14px; background:#d3d39d url(../../images/map_expander_LL.gif) no-repeat center; } #mE_D7 {display:none; position:absolute; right:0px; bottom: 0px; width:14px; height:14px; background:#d3d39d url(../../images/map_expander_LR.gif) no-repeat center; } #mE_D8 {position:absolute; left:0px; top:0px; bottom:50%; width:28px; height:auto; } #mE_D8_H1 {position:absolute; font-size:10pt; font-variant:small-caps; letter-spacing:0.2em; bottom:0px; left:0px; text-align:center; width:28px} #mE_D9 {position:absolute; left:0px; top:50%; bottom:0px; width:28px; height:auto; } #mE_D9_Img {display:block; position:absolute; top:0px; left:7px; cursor: pointer; } #mE_D9_H1 {position:absolute; font-size:10pt; font-variant:small-caps; letter-spacing:0.2em; top:0px; left:0px; text-align:center; width:28px} /* MAP COMPONENT */ #mapExpander {position:absolute; left:0px; top: 0px; width:14px; height:100%} #mapExpanderH1 {display:none; position:absolute; background:#d3d39d; font-size:10pt; font-variant:small-caps; letter-spacing:0.2em; top:14px; left:0px; text-align:center; width:14px} #mapExpanderImg {display:block; position:absolute; top:49%;} #mapTL {background:url('../../images/OTvia-Map-UL.gif') no-repeat center; height:14px; left:28px; position:absolute; top:0px; width:14px;} #mapTop {background:url('../../images/OTvia-Map-TOP.gif') repeat-x center; height:14px; left:42px; position:absolute; right:14px; top:0px;} #mapTR {background:url('../../images/OTvia-Map-UR.gif') no-repeat center; height:14px; position:absolute; right:0px; top:0px; width:14px;} #mapLeft {background:url('../../images/OTvia-Map-LEFT.gif') repeat-y center; bottom:14px; left:28px; position:absolute; top: 14px; width:14px;} #mapRight {background:url('../../images/OTvia-Map-RIGHT.gif') repeat-y center; bottom:14px; position:absolute; right:0px; top:14px; width:14px;} #mapBL {background:url('../../images/OTvia-Map-LL.gif') no-repeat center; bottom:0px; height:14px; left:28px; position:absolute; width:14px;} #mapBottom {background:url('../../images/OTvia-Map-BOTTOM.gif') repeat-x center; bottom:0px; height:14px; left:42px; position:absolute; right:14px;} #mapBR {background:url('../../images/OTvia-Map-LR.gif') no-repeat center; bottom:0px; height:14px; position:absolute; right:0px; width:14px;} #map {background:url('../../images/OTvia-Map-BODY.gif'); display:block; position:absolute; top:14px; right:14px; bottom:14px; left:42px;} /* FOOTER COMPONENT #footerPanel {display:block; bottom:1px; color:#4c644c; border-top-style: solid; border-top-width: 1px; border-top-color: #333333; position:absolute; width:100%; font-family: Arial, Helvetica, sans-serif; font-size: 11px;} #footerR {display:block; position:absolute; top:0px; right:0px; text-align:right; width:50%;} */ #footerPanel {bottom:1px; color:#000; border-top-style: solid; border-top-width: 1px; border-top-color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 11px; position:absolute; text-align:center; width:100%;} #footerR {display:block; position:absolute; top:0px; right:14px; text-align:right; width:40%;} #footerL {display:block; position:absolute; top:0px; left:14px; width:50%; text-align:left; font-family: Arial, Helvetica, sans-serif;} #footerL a {font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight:bold; color:#ffff00;} #footerL .OTviaLogoTextCaps {display: block; position: absolute; top: -1px; left: 63px; width: 100%; color: #4c644c; font-size: 14px; font-weight:bold;} #footerL .OTviaLogoTextRegular {display: block; position: absolute; top: -1px; left: 81px; width: 100%; color: #1d1d8f; font-family: Times, sans-serif; font-size: 14px; font-weight:bold; font-style: italic;} #footerL .trademark {display: block; position: absolute; top: -1px; left: 98px;} /* For GxMarker... */ /* .markerTooltip {background: #d3d39d; padding: 3px 3px; white-space:normal; border: black solid 1px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; -moz-border-radius: 3%; -moz-opacity: 84%; opacity: 0.84; filter: alpha(opacity=84); width: 300px;} .markerTooltip {background: #d3d39d; padding: 3px 3px; white-space:normal; border: black solid 1px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; -moz-border-radius: 3%; width: 300px;} */ /* ...For Vehicle Label */ .labelVehicleTooltip {background:#4C6BC4; padding: 3px 3px; white-space:normal; border: black solid 1px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; -moz-border-radius: 3%; width: 300px;} .labelVehicleHeader {background:#AAAAF8; height:17px; text-align:center; font-variant:small-caps; font-weight:bold; width:270px; padding-left:15px; padding-right:15px; border-bottom-style: solid; border-bottom-width: 1px; overflow:hidden;} .labelVehicleCurrentRow {background:#EEEEF8; font-family: 'Courier New',Courier,monospace; overflow:hidden;} .labelVehicleNextRow {background:#DDDDF8; font-family: 'Courier New',Courier,monospace; overflow:hidden;} /* ...For Shelter Label */ .labelShelterTooltip {background:#3CB371; padding: 3px 3px; white-space:normal; border: black solid 1px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; -moz-border-radius: 3%; width: 325px;} .labelShelterHeaderStopRow {background:#AAF8AA; height:17px; text-align:center; font-variant:small-caps; font-weight:bold; width:319px; padding-left:3px; padding-right:3px; border-bottom-style: solid; border-bottom-width: 1px; overflow:hidden;} .labelShelterRouteListing {display:block; position:relative; width:100%; max-height:140px; overflow:auto;} .labelShelterHeaderRouteRow {background:#CCF8CC; height:17px; text-align:center; font-variant:small-caps; font-weight:normal; padding-left:3px; padding-right:3px; border-top-style: solid; border-top-width: 1px; overflow:hidden;} .labelShelterArrivalRowOdd {background:#EEF8EE; font-family: 'Courier New',Courier,monospace; overflow:hidden;} .labelShelterArrivalRowEven {background:#DDF8DD; font-family: 'Courier New',Courier,monospace; overflow:hidden;} /* Close Icon for Labels */ .labelCloseIcon {position: absolute; top: 2px; right: 3px; float: right; height:17px; width:17px; cursor: pointer; background:url(../../images/close.png) no-repeat center; } /* Menu Icons for Alert Menu */ .alertIcon {position: relative; display: inline; top: -16px; right: -3px; float: right; height: 16px; width: 16px;} .alertIcon img {cursor: pointer;} /* ...For Group Shelter Label */ .labelShelterGroupTooltip {background: #3CB371; padding: 3px 3px; white-space:normal; border: black solid 1px; -moz-border-radius: 3%; width: 200px;} .labelShelterGroupInstructions {background:#AAF8AA; display:block; padding-left:3px; padding-right:3px; padding:0px; border-bottom-style: solid; border-bottom-width: 1px; overflow:hidden; } .labelShelterGroupInstructions_H1 {background:#AAF8AA; display:block; text-align:center; font-variant:small-caps; font-weight:bold; font-size: 13px; } .LabelShelterGroupStopsList {display:block; position:relative; width:100%; max-height:127px; overflow:auto; } .labelShelterGroupStopRowOdd {margin-top:0px; display:block; background:#CCF8CC; overflow:hidden;} .labelShelterGroupStopRowEven {margin-top:0px; display:block; background:#EEF8EE; overflow:hidden;} /* ...For Shelter List */ /* .listShelterTooltip {background:#C0C0C0; padding: 3px 3px; white-space:normal; border: black solid 1px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; -moz-border-radius: 3%; width: 300px;}*/ /**/ /* .listShelterInstructions {background:#C0C0C0; height:17px; text-align:center; font-variant:small-caps; font-weight:bold; width:270px; padding-left:15px; padding-right:15px;}*/ /* */ /* .listShelterRouteSelection {display:block; position:relative; margin-top:10px; margin-right:0px; margin-bottom:0px; margin-left:5px; width:95%; background-color:#000000;}*/ /**/ /* .listShelterRouteSelection ul {list-style:none; display:block; position:absolute; left:-135px; top:15px; width:150px; border:1px solid #000; background-color:#C0C0C0; overflow:visible;}*/ /**/ /* .listShelterRouteSelection ul li {margin-right:1px; background-color:#C0C0C0; border:1px solid #000; width:100%; text-align:right;}*/ /**/ /* .listShelterRouteSelection ul li a {color: #fff; text-decoration:none; display:block; background-color:#C0C0C0; padding:4px; margin-left:4px;}*/ /* .listShelterRouteSelection ul li a:hover {color:#ff0000; text-decoration:underline;}*/ /* .listShelterCheckbox {display:block; position:relative; margin-top: 0px; margin-right:0px; margin-bottom:0px; margin-left:0px; float:left; text-align:center; width:20px;}*/ /* .listShelterRouteName {display:block; position:relative; margin-top: 0px; margin-right:0px; margin-bottom:0px; margin-left:5px; float:left; width:80%}*/ /* ALERT MESSAGE COMPONENT -- Note: Sizes must be set explicitly for IE6: see the JavaScript file OTvia.js. Also, the opacity and filter methods used below are browser-dependent parameters, and are not part of the CSS1/CSS2 standards. */ #otviaDRAVLServerStatus { /* This is the 70% screen, or mask, over the content window, to block interactivity with the map elements when OTvia is in restart mode. */ display:none; /* Starting condition is as a hidden element. */ position:absolute; top:98px; right:14px; bottom:28px; left:14px; width:auto; height:auto; background-color:#7da07d; opacity:0.7; /* NON-STANDARD CSS! Sets 30% transparency for Firefox and Safari. */ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* NON-STANDARD CSS! Sets 30% transparency for IE6 and IE7. */ z-index:5000; /* Needed for Safari. */ } #otviaDRAVLServerStatusMsg { /* This is the container for the Alert Message. */ display:none; /* Starting condition is as a hidden element. */ position:absolute; top:98px; left:14px; right:14px; bottom:28px; width:auto; height:auto; text-align: center; opacity:1.0; /* NON-STANDARD CSS! Sets 0% transparency for Firefox and Safari: primarily for inheritance by H1 element. */ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* NON-STANDARD CSS! Sets 0% transparency for IE6 and IE7: primarily for inheritance by H1 element. */ z-index:6000; /* Needed for Safari. */ } #otviaAlertMsg h1 { /* This is the Alert Message content. */ position:relative; margin-top:14px; margin-left:30%; margin-right:30%; width:auto; height:auto; text-align:center; color: #ffffff; font-size:14pt; font-variant:small-caps; letter-spacing:0.2em; } .vehicleLabelStyle {color: #ffffff; font-weight:bold; font-size:8pt;} .vehicleLabelStyle-yellow {color: #000000; font-weight:bold; font-size:8pt;}