#DriveTimesTools
{
    /* background-color: #ffffff; */
    float: left;
    height: 500px; /* 600px */
    width: 250px;
    /* overflow: auto; */
}

#DriveTimesTools h3
{
    background-color: #3366CC;
    color: #FFFFFF;
    margin: 0 0 0 0;
    padding: 0px;
    text-align: center;
}

#DriveTimesTools table
{
    width: 100%;
    z-index: 9999;
}

#RouteParameterContainer
{
    color: Black;
    border-bottom-color: #aaaaaa;
    border-bottom-width: thin;
    border-bottom-style: solid;
    margin-top: 10px;
}


#TripDetailsContainer
{
    color: black;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    clear: both;
}

#TripDetailsContainer div.panel_title
{
    display: none;
}

.panel_title
{
    color: Gray;
    font-size: 1.1em;
    margin-top: 5px;
    margin-bottom: 10px;
}

#DriveTimeData
{
    min-height: 200px;
    /* overflow: auto; */
}

#DTRefreshTimestamp
{
    float: right;
    color: Gray;
    margin-left: 5px;
    margin-right: 5px;
    font-size: .85em;
}

#DTRefreshTimestamp .timestamp
{
}

#DriveTimeData .timestamp
{
}

#DriveTimeData .warning
{
    color: Red;
}

#DriveTimeData .debugWarning
{
    color: Blue;
    visibility: hidden;
}

#DriveTimeData .infoMessage
{
    color: Black;
    font-size: 1em;
    margin-top: 10px;
}

#DriveTimeData .debugMessage
{
    color: Blue;
    visibility: hidden;
}

#ODNames
{
    display: none;
}

.poi_id
{
    display: none;
}

#ODNames div.location_name
{
    font-weight: bold;
    color: Green;
}

#RouteListPanel
{
    margin-top: 3px;
    margin-left: 5px;
    margin-right: 5px;
}

#RouteListPanel ol.routes
{
    list-style-type: none;
    list-style-position: inside;
    list-style-image: none;
    margin: 0px;
    padding: 0;
    border-color: #aaaaaa;
    border-width: thin;
    border-style: solid;
}

#RouteListPanel li.route_item
{
    border-bottom-color: #aaaaaa;
    border-bottom-style: solid;
    border-bottom-width: thin;
    padding: 5px;
}

#RouteListPanel li.route_item:hover
{
    cursor: pointer;
}

#RouteListPanel li.route_item.last_route
{
    border-bottom-style: none;
}

.route_item_container
{
}

.route_name_container
{
    margin-right: 3px;
    width: 30%;
}

.default_route
{
    /* background-color: #C6E0EF; */
}

.selected_route
{
    background-color: #8A9AA7;
}

.observed_route
{
    background-color: #99B3CC;
}

.route_info_container
{
    margin-left: 5px;
    clear: right;
    float: right;
    width: 70%;
}

.route_name
{
    font-size: 1em;
}

.route_designation
{
    display: none;
    font-size: .85em;
}

.route_clear
{
    clear: both;
}

.route_typical_info
{
    font-size: 1em;
    clear: right;
    float: right;
}

.route_current_info
{
    font-size: .85em;
    clear: right;
    float: right;
}

#RouteListPanel .route_name
{
    font-weight: bolder;
}

.route_info_message
{
    font-family: Lucida Bright;
    color: Teal;
    font-size: 1em;
    margin-top: 10px;
}

.road_info_message
{
}

#RouteDetailPanel
{
}

#RouteDetailWrapper
{
    margin: 10px;
}


#RouteDetailTable
{
    font-size: .85em;
    border: 1px solid black;
    border-collapse: collapse;
}

#RouteDetailTable th
{
    border: 1px solid black;
    background-color: Silver;
}

#RouteDetailTable td
{
    border: 1px solid black;
}

#DrivingInstructions
{
    display: none;
}

#TripDetailsWrapper
{
    position: relative;
}

#TripDetailsSpinner
{
    /* display: none; */
    position: absolute;
    top: 25%;
    width: 60%;
    height: 60%;
    display: none;
}

#TripDetailsSpinnerImage
{
}

.spinner
{
    /* position: fixed; */
    position: absolute;
    margin-left: -16px; /* half width of the spinner gif */
    margin-top: -16px; /* half height of the spinner gif */
    text-align: center;
    z-index: 9999;
    overflow: auto;
    width: 32px; /* width of the spinner gif */
    height: 34px; /*hight of the spinner gif +2px to fix IE8 issue */
}


.ui-autocomplete-loading
{
    background: white url('/images/spinners/ui-anim_basic_16x16.gif') right center no-repeat;
}

.ui-autocomplete
{
    max-height: 100px;
    max-width: 85%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px; /* add padding to account for vertical scrollbar */
}
/* 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: 100px;
}

ul.ui-autocomplete
{
    z-index: 60 !important;
    font-size: 1em;
    color: Black;
}


#Origin, #Destination
{
    width: 75%;
    font-size: .9em;
    position: relative;
    height: 24px;
    margin: 0;
}

#OriginEntry, #DestinationEntry
{
    position: relative;
    padding-bottom: 5px;
}

#OriginEntry div.a-button
{
    width: 24px;
    height: 24px;
    background: url('/images/startpoint.png') right center no-repeat;
    float: left;
    margin-right: 10px;
    margin-left: 5px;
    margin-top: 3px;
}

#OriginEntry div.click-for-origin-button
{
    float: left;
    width: 32px;
    height: 32px;
    background: url('/images/icons/direction_down_dark.png') center center no-repeat;
    margin-right: 0px;
    margin-left: 5px;
    margin-top: -3px;
    cursor: pointer;
}

#DestinationEntry div.b-button
{
    width: 24px;
    height: 24px;
    background: url('/images/endpoint.png') right center no-repeat;
    float: left;
    margin-right: 10px;
    margin-left: 5px;
    margin-top: 3px;
}

#DestinationEntry div.click-for-destination-button
{
    float: left;
    width: 32px;
    height: 32px;
    background: url('/images/icons/direction_down_light.png') center center no-repeat;
    margin-right: 0px;
    margin-left: 5px;
    margin-top: 3px;
    cursor: pointer;
}

#GetDriveTime
{
    float: right;
    padding-left: 3px;
    padding-right: 3px;
    margin-right: 5px;
}