/*
CSS suggestions:
 - Please name CSS classes using camelCase and pick meaningful names.
 - Please put a comment before each block of CSS saying where it appies to.
*/

/* Component CSS */

/* Changes for RFC211 */
/* Search Box Headings */
.SearchBoxHeading
{
    font-size: 1.4em;
    font-weight: bold;
    margin: 0 0 7px 0;
}

/* Component data selector */
.index .hidden
{
    display: none;
    position: absolute;
    left: 50%;
    top: 500px;
    margin-left: 272px;
    float: right;
    z-index: 999;
}
.disruptions .hidden
{
    display: none;
    position: absolute;
    left: 50%;
    top: 165px;
    margin-left: -130px;
    float: right;
    margin-top: -30px;
    z-index: 999;
}

/* Component motorway part selector */
ul.component_motorway_part_selector
{
}
ul.component_motorway_part_selector li
{
    display: inline;
    text-decoration: none;
}

/* component mtf general */
.mtf_error_message
{
    display: block;
    font-weight: bold;
    color: Red;
    margin-top: 30px;
    margin-bottom: 30px;
}
.mtf_error_note
{
    display: block;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 30px;
}

.dsErrorBlock
{font-weight: bold;
   margin-top: 30px;
    margin-bottom: 30px;
}

.mtf_schematic_container
{
    width: 690px;
    margin-left: auto;
    margin-right: auto;
    border: 0px solid black;
}
.mtf_schematic_container td
{
    padding: 0px;
    margin: 0px;
    border-collapse: collapse;
}

/* component mtf junction */
.mtf_overall
{
    background: #E8F2FB;
    padding: 15px;
}
.mtf_junction
{
    width: 690px;
    height: 44px;
    border: 0px solid blue;
    text-align: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
.mtf_junction_center
{
    width: 44px;
    position: absolute;
    height: 44px;
    border: 0px;
    padding: 0px;
    top: 0px;
    left: 50%;
    margin-left: -22px;
}
.mtf_junction_lhs
{
    padding: 0px;
    position: absolute;
    margin: 0px;
    border: 0px;
    top: 50%;
    left: 50%;
    height: 44px;
    margin-top: -22px;
    margin-left: -20px;
}
/* 16px is a magic number */
.mtf_junction_rhs
{
    padding: 0px;
    position: absolute;
    margin: 0px;
    border: 0px;
    top: 50%;
    right: 50%;
    height: 44px;
    margin-top: -22px;
    margin-right: -20px;
}

.mtf_junction_side
{
    width: 13px;
    height: 22px;
    padding: 0px;
    margin: 0px;
}
.mtf_junction_lhs_top_container
{
    padding: 0px;
    position: absolute;
    margin: 0px;
    left: 50%;
}
.mtf_junction_lhs_bottom_container
{
    padding: 0px;
    position: absolute;
    margin: 0px;
    left: 50%;
    top: 50%;
    margin-top: 0px;
}

.mtf_junction_image_container
{
    background: transparent;
    position: absolute;
    float: left;
    padding: 0px;
    top: 50%;
    height: 44px;
    left: 50%;
    margin-left: -22px;
    margin-top: -22px;
    z-index: 2;
}

.mtf_junction_rhs_top_container
{
    padding: 0px;
    margin: 0px;
    position: absolute;
    top: 50%;
    right: 50%;
    height: 44px;
    margin-top: -22px;
    z-index: 0;
}
.mtf_junction_rhs_bottom_container
{
    padding: 0px;
    margin: 0px;
    position: absolute;
    top: 50%;
    right: 50%;
    height: 44px;
    margin-top: 0px;
    z-index: 0;
}

.mtf_junction_map_link_text_container
{
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: -0.75em;
    width: 230px;
    border: 0px solid black;
    font-size: 1.0em;
    height: 1.5em;
    margin-left: 60px;
    background: transparent;
    z-index: 2;
    text-align: left;
}
.mtf_junction_description_text_container
{
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: -0.75em;
    width: 230px;
    border: 0px solid black;
    font-size: 1.0em;
    height: 1.5em;
    margin-left: -300px;
    background: transparent;
    z-index: 2;
    text-align: right;
}

.mtf_junction_name_container
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.75em;
    width: 690px;
    border: 0px;
    font-size: 0.9em;
    height: 1.5em;
    margin-left: -345px;
    background: transparent;
    z-index: 2;
}
.mtf_junction_name_text
{
    border: 0px solid #6497C7;
    background-color: transparent;
    line-height: 1.5em;
    font-weight: bold;
    color: white;
    padding: 3px;
    text-decoration: none;
}

.mtf_junction_description_text
{
    color: #043F7E;
    border: 0px solid red;
    line-height: 1.5em;
    font-weight: bold;
}

.mtf_junction_map_link_text
{
    border: 0px solid red;
    line-height: 1.5em;
    font-weight: bold;
}

/* component mtf junction stretch */
.junction_stretch_table
{
    width: 690px;
    height: 100%;
    margin: 0px;
    border: 0px solid blue;
    text-align: center;
    position: relative;
    background: #E8F2FB;
}
.junction_stretch_carriageway
{
    width: 13px;
    padding: 0px;
    text-align: center;
    overflow: hidden;
    border: 0px;
    border-top: 2px;
    border-bottom: 2px;
}
/*note overridden for ie6*/

.junction_stretch_road_items_cell_left, .junction_stretch_road_items_cell_right
{
    width: 323px;
    text-align: left;
    padding: 0px;
    margin: 0px;
    vertical-align: top;
    height: 100%;
}

.junction_stretch_center
{
    padding: 0px;
    text-align: center;
    background: #E8F2FB;
}
.road_item_container
{
    border: 0px solid blue;
    background: white;
    text-align: center;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0px;
    padding-top: 0px;
    margin: 0px;
    border-collapse: collapse;
    width: 325px;
}
.motorwayflow_roadItemContainerSpacer
{
    width: 324px;
    height: 1px;
    border: 0px;
    margin: 0px;
    padding: 0px;
}

/* component mtf road items */
.VMSLightTL
{
    background: url(../Images/motorwayflow/VMSLightTL.gif) no-repeat 0 0 #000000;
}
.VMSLightTR
{
    background: url(../Images/motorwayflow/VMSLightTR.gif) no-repeat 100% 0;
}
.VMSLightBL
{
    background: url(../Images/motorwayflow/VMSLightBL.gif) no-repeat 0 100%;
}
.VMSLightBR
{
    background: url(../Images/motorwayflow/VMSLightBR.gif) no-repeat 100% 100%;
    color: #FFFF00;
    padding: 3px 10px;
    text-align: center;
}

.infoSpace
{
    margin: 0 0 5px 0;
    padding: 5px 0 0 0;
    clear: right;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
    background-color: #FFFFFF;
}

.text
{
    color: #183c8c;
    padding: 0 0 5px 0;
}
.textRight
{
    width: 250px;
    color: #183c8c;
    margin: 2px 0 0 0px;
    padding: 0 0 5px 0;
}

.lhs
{
    position: relative;
    width: 323px;
    margin: 0px;
    padding: 0px;
}
/* note 350 px impt for ie */
.rhs
{
    position: relative;
    width: 323px;
    margin: 0px;
    padding: 0px;
    border: 0px solid black;
}
/* note 350 px impt for ie */

.weatherItem, .roadWorksItem, .roadWorksItemPlanned, .roadWorksItemNoDelay, .genericEventItem, .cameraItem, .averageSpeedItem, .vmsItem, .matrixItem, .plannedEventItem, .roadClosureItem, .highProfileEventItem,  .roadClosureFuture, .roadClosureCurrent, .highProfileEventFuture, .highProfileEventCurrent
{
    font-family: Arial;
    font-size: 0.85em;
    color: #043F7E;
}
.lhs .title, .rhs .title
{
    font-weight: bold;
    margin-bottom:5px;
}

.lhs .title a, .rhs .title a
{
    color:Black;
}

.lhs .mtfNoResultsFound, .lhs .weatherItem, .lhs .roadWorksItem, .lhs .roadWorksItemNoDelay, .lhs .genericEventItem, .lhs .plannedEventItem, .lhs .cameraItem, 
.lhs .averageSpeedItem, .lhs .vmsItem, .lhs .matrixItem, .rhs .roadClosureItem, .lhs .highProfileEventItem
.lhs .roadClosureFuture, .lhs .roadClosureCurrent, .lhs .highProfileEventFuture, .lhs .highProfileEventCurrent
{
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 5px;
    text-align: left;
    margin: 0px;
    margin-right: 0px;
    border: 0px solid black;
    background-position: right top;
    background-repeat: no-repeat;
    float: right;
    width: 100%;
    margin-bottom: 0px;
    margin-right: 15px;
    /*padding-right:15px;*/
}

.rhs .mtfNoResultsFound, .rhs .weatherItem, .rhs .roadWorksItem, .rhs .roadWorksItemNoDelay, .rhs .roadWorksItemPlanned, .rhs .genericEventItem, .rhs .plannedEventItem, .rhs .cameraItem, .rhs .averageSpeedItem, 
.rhs .vmsItem, .rhs .matrixItem, .rhs .roadClosureItem, .rhs .highProfileEventItem
{
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 5px;
    text-align: left;
    margin: 0px;
    margin-left: 15px;
    border: 0px solid black;
    background-position: left top;
    background-repeat: no-repeat;
    float: left;
    width: 100%;
    margin-bottom: 0px;
}

.rhs .roadClosureFuture, .rhs .roadClosureCurrent, .rhs .highProfileEventFuture, .rhs .highProfileEventCurrent
{
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 5px;
    text-align: left;
    margin: 0px;
    margin-left: 15px;
    border: 0px solid black;
    background-position: left top;
    background-repeat: no-repeat;
    float: left;
   /* width: 100%; - Causing rendering issues in IE6. Don't think it's needed. Lee 26 APR 11*/
    margin-bottom: 0px;
    display: inline;
}

.weatherItemMapLink:link
{
    color:Black;  
}

.lhs .description, .lhs .mtfNoResultsFound
{
    float: right;
    font-weight: normal;
    width: 265px;
    position: relative;
    border: 0px solid black;
    text-align: right;
    right: 40px;
    line-height: 1em; /*margin-top:-0.5em; top:50%;*/
    padding-bottom:5px;
    
}
.rhs .description, .rhs .mtfNoResultsFound
{
    float: left;
    font-weight: normal;
    width: 265px;
    position: relative;
    border: 0px solid black;
    text-align: left;
    left: 40px;
    line-height: 1em; /*margin-top:-0.5em; top:50%;*/
    padding-bottom:5px;
}

.mtfNoResultsFound
{
    height: 2.5em;
    top: 12px;
}
.disruption_description_container .delay
{
    display: none;
}

.weatherItem
{
    background: url(../Images/key/adverse-weather.gif);
}

.disruption_description_container .weatherItem
{
    background: url(../Images/disruptions/icon_weather_large.gif);
    background-position: left top;
    background-repeat: no-repeat;
    height: 3.5em;
}

.weatherItem .description
{
    width: 100%;
}

.roadWorksItem
{
    background: url(../Images/key/current-roadworks.gif);
}

.roadClosureFuture
{
    background: url(../Images/key/future-road-closure.gif);
}

.roadClosureCurrent
{
    background: url(../Images/key/current-road-closure.gif);
}

.highProfileEventFuture
{
    background: url(../Images/key/future-high-profile.gif);
}

.highProfileEventCurrent
{
    background: url(../Images/key/current-high-profile.gif);
}

.disruption_description_container .roadClosureFuture
{
    background: url(../Images/disruptions/future-road-closures.gif);
    background-position: left top;
    background-repeat: no-repeat;
}

.disruption_description_container .roadClosureCurrent
{
    background: url(../Images/disruptions/current-road-closures.gif);
    background-position: left top;
    background-repeat: no-repeat;
}

.disruption_description_container .highProfileEventFuture
{
    background: url(../Images/disruptions/future-high-profile.gif);
    background-position: left top;
    background-repeat: no-repeat;
}

.disruption_description_container .highProfileEventCurrent
{
    background: url(../Images/disruptions/current-high-profile.gif);
    background-position: left top;
    background-repeat: no-repeat;
}

.disruption_description_container .roadWorksItem
{
    background: url(../Images/disruptions/current-roadworks.gif);
    background-position: left top;
    background-repeat: no-repeat;
}

.roadWorksItemNoDelay
{
    background: url(../Images/key/current-roadworks.gif);
    background-position: left top;
    background-repeat: no-repeat;
}

.disruption_description_container .roadWorksItemNoDelay
{
    background: url(../Images/disruptions/current-roadworks.gif);
    background-position: left top;
    background-repeat: no-repeat;
}
/*.disruption_description_container .roadWorksItemNoDelay{background:url(../Images/disruptions/icon_roadworks_no_delay_large.gif);   background-position:left top;   background-repeat:no-repeat;  }*/
.disruption_description_container .roadWorksItemPlanned
{
    background: url(../Images/disruptions/future-roadworks.gif);
    background-position: left top;
    background-repeat: no-repeat;
}
.roadWorksItem .title, .roadWorksItemNoDelay .title, .roadWorksItemPlanned .title, .roadClosureFuture  .title, .roadClosureCurrent .title, .highProfileEventFuture .title, .highProfileEventCurrent .title
{
    font-weight: bold;
    line-height: 1.1em;
}
.roadWorksItem .description, .roadWorksItemNoDelay .description, .roadWorksItemPlanned .description, .roadClosureFuture .description, .roadClosureCurrent .description, .highProfileEventFuture .description, .highProfileEventCurrent .description
{
    line-height: 1em;
}

.genericEventItem
{
    background: url(../Images/key/incidents-and-congestion.gif); /* height:3.5em;*/
}

.disruption_description_container .genericEventItem
{
    background: url(../Images/disruptions/incidents-and-congestion.gif);
    background-position: left top;
    background-repeat: no-repeat;
}

.genericEventItem .title
{
    font-weight: bold;
    line-height: 1.0em;
}

.genericEventItem .description
{
    line-height: 1em;
}

.disruption_description_container .plannedEventItem
{
    background: url(../Images/disruptions/future-event.gif);
    background-position: left top;
    background-repeat: no-repeat;
}

.plannedEventItem .title
{
    font-weight: bold;
    line-height: 1.0em;
}

.plannedEventItem .description
{
    line-height: 1em;
    padding-bottom:5px;
}

.cameraItem
{
    background: url(../Images/key/traffic-cameras.gif);
    height: 2.3em;
}

.averageSpeedItem
{
    background: url(../Images/key/speed-and-delays.gif);
    font-weight: bold;
    height: 2em;
}

/* POSSIBLY NOT USED (LEE 11 MAR 2011)
.roadClosureItem
{
    background: url(../Images/motorwayflow/current-road-closure.gif);
}

.highProfileEventItem
{
    background: url(../Images/motorwayflow/current-high-profile.gif);
}

*/

.vmsItem
{
    padding: 0px;
    margin: 0px;
}
.lhs .vmsContainer
{
    position: relative;
    float: right;
    text-align: right;
    margin-top: 2px;
}
/* 2px is magic number to vertical align */
.rhs .vmsContainer
{
    position: relative;
    float: left;
    text-align: left;
    margin-top: 2px;
}
/* 2px is magic number to vertical align */
.vmsItem .message
{
    background: black;
    color: yellow;
    padding: 3px;
}

.matrixItem
{
    border: 1px solid black;
    padding: 0px;
    margin: 0px;
}
.matrixDisplay
{
    display: inline;
    position: relative;
    padding-top: 2px;
    padding-bottom: 2px;
}
.lhs .matrixDisplay
{
    float: right;
    width: 32px;
    height: 32px;
    margin-top: -2px;
    top: 50%;
}
/* 2px is magic number to vertical align */
.rhs .matrixDisplay
{
    float: left;
    width: 32px;
    height: 32px;
    margin-top: -2px;
    top: 50%;
}
/* 2px is magic number to vertical align */

/* component_mtf_title.css */
.mtf_title_container
{
}
.mtf_title_container
{
    background: transparent;
    float: left;
    padding: 0px;
    position: absolute;
    top: 50%;
    height: 44px;
    left: 50%;
    margin-left: -22px;
    margin-top: -22px;
    z-index: 2;
}

.averageSpeedItem
{
    font-size: 1.1em;
    font-weight: bold;
}

/* component_regional_map.css */

#boxes
{
    display: block;
    background-image: url(../images/index/map_cropped.gif);
    background-repeat: no-repeat;
    height: 391px;
    width: 351px;
    position: relative;
    border: none;
}


#menu a
{
    position: absolute;
    height: 391px;
    width: 550px;
    text-decoration: none;
    background-repeat: no-repeat;
}

#menu a i
{
    visibility: hidden;
    border: none;
}

a#north
{
    top: 0px;
    left: 92px;
    width: 138px;
    height: 75px;
    border: none;
}
a#central_north
{
    top: 75px;
    left: 96px;
    width: 168px;
    height: 91px;
    border: none;
}
a#west_midlands
{
    top: 166px;
    left: 115px;
    width: 139px;
    height: 98px;
    border: none;
}
a#east_midlands
{
    top: 166px;
    left: 168px;
    width: 171px;
    height: 98px;
    border: none;
}
a#south_west
{
    top: 280px;
    left: -12px;
    width: 180px;
    height: 114px;
    border: none;
}
a#south_east
{
    top: 264px;
    left: 168px;
    width: 171px;
    height: 130px;
    border: none;
}
a#south
{
    top: 264px;
    left: 123px;
    width: 159px;
    height: 130px;
    border: none;
}

a#scotland
{
    top: 3px;
    left: 36px;
    width: 88px;
    height: 60px;
    border: none;
}
a#wales
{
    top: 184px;
    left: 46px;
    width: 88px;
    height: 120px;
    border: none;
}

/* component_road_selector.css */

.roadSelectorContainer
{
    margin: 0px 0px 0px 10px;
    border: 0px solid black;
    padding: 0px;
}
.roadSelectorContainer ul
{
}
.roadSelectorContainer li
{
    display: inline;
    list-style: none;
    text-decoration: none;
    padding: 0px;
    margin: 0px;
    margin-right: 15px;
    font-size: 1.1em;
}

.mtfJunctionImage
{
    display: block;
    padding: 0px;
    border-collapse: collapse;
}
.mtfJunctionImageIe6
{
    display: none;
    padding: 0px;
    border-collapse: collapse;
}

/*
Author: Martin Evans
Date: 16th February 2009
Description: Hack to deal with IE6 rendering problem with floated elements
Notes: May not be necessary for all/any of these elements
*/
* html .mtf_junction_image_container, * html .lhs .mtfNoResultsFound, * html .lhs .weatherItem, * html .lhs .roadWorksItem, * html .lhs .roadWorksItemNoDelay, * html .lhs .genericEventItem, * html .lhs .plannedEventItem, * html .lhs .cameraItem, * html .lhs .averageSpeedItem, * html .lhs .vmsItem, * html .lhs .matrixItem, * html .rhs .mtfNoResultsFound, * html .rhs .weatherItem, * html .rhs .roadWorksItem, * html .rhs .roadWorksItemNoDelay, * html .rhs .roadWorksItemPlanned, * html .rhs .genericEventItem, * html .rhs .plannedEventItem, * html .rhs .cameraItem, * html .rhs .averageSpeedItem, * html .rhs .vmsItem, * html .rhs .matrixItem, * html .lhs .description, * html .lhs .mtfNoResultsFound, * html .rhs .description, * html .rhs .mtfNoResultsFound, * html .lhs .vmsContainer, * html .rhs .vmsContainer, * html .lhs .matrixDisplay, * html .rhs .matrixDisplay, * html .mtf_title_container, lhs .roadClosureItem, lhs .highProfileEventItem, rhs .roadClosureItem, rhs .highProfileEventItem
{
    /**/ /*Uncomment line below to switch on*/
    display: inline;
    padding-bottom:5px;
    
}