/* LANDING PAGE */
#section_text { float: left; width: 200px; }

#sections { float: right; width: 692px; }
#sections .section { float: left; margin: 0 0 0 4px; width: 225px; }

#sections .section h2 {
    background: #80A251 url(../img/bar225.png) repeat-x scroll left top;
    border-bottom: 1px solid #FFF;
    margin: 0 0 1px 0;
    padding-bottom: 3px;
    width: 100%;
}

#sections .section h2 a, .section h2 a:visited {
    font-weight: bold;
    color: #FFF;
    font-size: 0.75em;
    text-decoration: none;
    padding-left: 5px;
}

#sections .section .section_image { display: block; margin-bottom: 1px; }

#sections .section .section_info {
    background: #EEEEEE url(../img/section_info_gradient.gif) repeat-x;
}

#sections .section .section_info h3 { padding: 8px 0 0 16px; }

#sections .section .section_info h3, #sections .section .section_info p {
    margin-bottom: 0;
}

#sections .section .section_info input.large {
    margin: 0 0 0 9px;
}

#sections .section .section_info input {
    margin: 0 0 0 10px;
}

#sections .section .section_info select {
    margin: 0 7px 0 16px;
}

#sections .section .section_info p {
    padding: 0 7px 0 16px;
}

#sections .section .section_info .section_text {
    height: 110px;
}

/* ROUTE PLANNER PAGE */
#route_content {
    background: #EEEEEE url(../img/route_gradient.gif) repeat-x;
    margin: 0 auto;
    padding: 21px 19px 0 23px;
    width: 414px;
}

    #route_content img.hr {
        display: block;
    }
    
    #route_content h2 {
        font-size: 1.2em;
        font-weight: bold;
        margin: 0;
    }
    
    #route_content h3 {
        font-size: 1.1em;
        font-weight: bold;
        height: 24px;
        margin: 0 0 3px 0;
        padding: 12px 0 0 36px;
    }

        #route_content h3.home {
            background: transparent url(../img/home.gif) no-repeat;
        }
        
        #route_content h3.destination {
            background: transparent url(../img/destination.gif) no-repeat;
        }
    
    #route_content label {
        font-size: 1em;
        margin: 0 0 1px 0;
    }
    
    #route_content table {
        width: 100%;
    }
    
    #route_content select {
        width: 194px;
    }

    #route_content select#sDistanceFromRoute {
        width: 78px;
    }

    #route_content input {
        width: 188px;
    }
    
    #route_content .col2 {
        padding: 0 0 0 20px;
    }
    
    #route_content #start {
        margin: 8px 0 10px 0;
    }
    
        #route_content #start label {
            display: block;
        }

    #route_content #destination {
        margin: 6px 0 10px 0;
    }

        #route_content #destination label {
            display: block;
        }

    #route_content #distance {
        margin: 7px 0 8px 0;
    }

    #route_content #controls {
        margin: 8px 0 8px 0;
        text-align: right;
    }
    
    #route_content #controls input {
        width: auto;
    }

/* LOCATOR PAGE */
#station_content {
    background: #EEEEEE url(../img/route_gradient.gif) repeat-x;
    margin: 0 auto;
    padding: 21px 19px 0 20px;
    width: 417px;
}

    #station_content label {
        font-size: 1em;
    }

    #station_content h2 {
        font-size: 1.2em;
        font-weight: bold;
        margin: 0;
    }
    
    #station_content table {
        width: 100%;
    }
    
    #station_content select {
        width: 194px;
    }
    
    #station_content td.col2 {
        padding: 0 0 0 19px;
    }
    
    #station_content #destination input {
        width: 188px;
    }
    
    #station_content img.hr {
        display: block;
    }
    
    #station_content #stations {
        margin: 9px 0 10px 0;
    }
    
    #station_content #station_type {
        margin: 0 0 12px 0;
    }
    
        #station_content #station_type input {
            vertical-align: middle;
        }
    
    #station_content #services {
        margin: 0 0 14px 0;
    }
    
        #station_content #services input {
            vertical-align: middle;
        }
    
    #station_content #destination {
        margin: 14px 0 12px 0;
    }
    
        #station_content #destination label {
            display: block;
        }
        
    #station_content #specifyLocation {
        margin: 14px 0 12px 0;
    }
        
    #station_content #specifyLocation select {
        width: 412px;
    }
        
    #station_content #controls {
        padding: 8px 0 8px 0;
        text-align: right;
    }
    
/* EXPORT PAGE */
#export_content {
    background: #EEEEEE url(../img/download_gradient.gif) repeat-x;
    margin: 0 auto;
    padding: 21px 19px 0 20px;
    width: 417px;
}

    #export_content label {
        font-size: 1em;
    }

    #export_content #country {
        margin: 15px 0 10px 0;
    }

        #export_content #country label {
            display: block;
        }

    #export_content input {
        margin: 0;
        vertical-align: middle;
    }
    
    #export_content select {
        width: 194px;
    }
    
    #export_content #controls {
        padding: 8px 0 8px 0;
        text-align: right;
    }

/* MAPS */
#map_section {
    float: left;
    width: 690px;
}

    #map_section h2 {
        background: #80A251 url(../img/bar225.png) repeat-x scroll left top;
        border-bottom: 1px solid #FFF;
        color: #FFF;
        font-size: 1.1em;
        font-weight: bold;
        margin: 0;
        padding-bottom: 3px;
        padding-left: 5px;
        width: 681px;
    }
    
    #map_section #map_container {
        border: 1px solid #999999;
        overflow: auto;
        width: 684px;
    }
    
        #map_container div#west_control {
            background: transparent url(../img/move_west.png) no-repeat 50% 50%;
            cursor: pointer;
            float: left;
            height: 472px;
            width: 16px;
        }
    
        #map_container div#north_control {
            background: transparent url(../img/move_north.png) no-repeat 50% 50%;
            cursor: pointer;
            float: left;
            height: 16px;
            width: 652px;
        }
    
        #map_container #map {
            float: left;
            height: 440px;
            width: 652px;
        }
    
            #map_container #map img {
                
            }
    
        #map_container div#south_control {
            background: transparent url(../img/move_south.png) no-repeat 50% 50%;
            cursor: pointer;
            float: left;
            height: 16px;
            width: 652px;
        }
    
        #map_container div#east_control {
            background: transparent url(../img/move_east.png) no-repeat 50% 50%;
            cursor: pointer;
            float: right;
            height: 472px;
            width: 16px;
        }
    
    #map_section #map_disclaimer {
        float: left;
        font-size: 0.8em;
        margin: 5px 0 15px 0;
        text-align: left;
        width: 380px;
    }
    
    #map_section #controls {
        float: right;
        margin: 10px 0 10px 0;
        overflow: auto;
        width: 310px;
    }
    
        #map_section #controls #buttons {
            float: right;
            text-align: right;
            width: 310px;
        }
        
            #map_section #controls #buttons input {
                float: left;
                margin: 0 0 0 10px;
            }
            
            #map_section #controls #buttons img {
                float: left;
                margin: 0 0 0 10px;
                cursor: hand;
            }
            
            #map_section #controls #buttons input.close {
                margin-left: 0px;
            }
            
            #map_section #controls #buttons input.zoom_step {
                background: transparent;
                border: 0px none #FFFFFF;
                display: inline;
                float: left;
                height: 20px;
                margin:0 0 0 -8px;
                width: 19px;
            }
                
                #map_section #controls #scroll_section {
                    background:transparent url(../img/scroll_bg.png) no-repeat scroll 50% 50%;
                    float:left;
                    height:20px;
                    overflow:auto;
                    padding:0;
                    width:102px;
                }
    
                    #scroller {
                        overflow: auto;
                        width: 102px;
                    }
                    
                    .zoom1 {
                        background: url(../img/scroll_marker.png) no-repeat 4%;
                    }
                    
                    .zoom2 {
                        background: transparent url(../img/scroll_marker.png) no-repeat 11%;
                    }
                    
                    .zoom3 {
                        background: transparent url(../img/scroll_marker.png) no-repeat 22%;
                    }
                    
                    .zoom4 {
                        background: transparent url(../img/scroll_marker.png) no-repeat 33%;
                    }
                    
                    .zoom5 {
                        background: transparent url(../img/scroll_marker.png) no-repeat 44%;
                    }
                    
                    .zoom6 {
                        background: transparent url(../img/scroll_marker.png) no-repeat 55%;
                    }
                    
                    .zoom7 {
                        background: transparent url(../img/scroll_marker.png) no-repeat 66%;
                    }
                    
                    .zoom8 {
                        background: transparent url(../img/scroll_marker.png) no-repeat 77%;
                    }
                    
                    .zoom9 {
                        background: transparent url(../img/scroll_marker.png) no-repeat 85%;
                    }
    
    #details_section .stations {
        float: left;
        padding: 5px 0 5px 42px;
        width: 165px;
    }
    
    #details_section .extra {
        background: transparent url(../img/station_extra.png) no-repeat;
    }
    
    #details_section .normal {
        background: transparent url(../img/all_stations.png) no-repeat;
    }
    
    #divCriteria input, #divCriteria input {
        float: left;
    }
    
    #divCriteria label {
        float: right;
        width: 140px;
    }
    
    #journey img { margin: 0 0 -8px 0; padding: 5px 0 0; }
    #journey ul, #journey li { list-style: none; }
    #journey li span.from, #journey li span.to { margin: 0 0 0 4px; }
    #journey .text { padding: 0 0 0 32px; }
    #journey .important { font-weight: bold; }
    
    #journey_key { display: none; }
        
    #directions_data {
        margin: 20px 0 0 0;
        width: 100%;
    }
    
        #directions_data .important {
            font-weight: bold;
        }
    
        #directions_data th {
            border-bottom: 2px solid #e5e5e5;
            font-size: 13px;
            font-weight: bold;
            padding: 0 0 15px 0;
        }
    
        #directions_data td.instruction {
            padding: 2px 0 2px 0;
            vertical-align: middle;
        }
    
        #directions_data td.home, #directions_data td.step, #directions_data td.route_end, #directions_data td.station_end {
            padding: 5px 0 5px 10px;
        }
    
        #directions_data td.step {
            background: url(../img/start_icon.png) no-repeat 0 3px;
            padding-bottom: 16px;
            padding-top: 12px;
        }
    
        #directions_data td.route_end {
        }
    
        #directions_data td.station_end {
        }
    
        #directions_data td.totals {
            font-weight: bold;
        }
        
        

#details_section {
    float: right;
    width: 207px;
}

    #details_section h2 {
        color: #333333;
        font-size: 14px;
    }

    #details_section .label {
        color: #000000;
        font-weight: bold;
    }

    #details_section #from {
        background: transparent url(../img/start_icon.png) no-repeat;
        padding: 8px 0 7px 32px;
    }

    #details_section #to {
        background: transparent url(../img/destination_icon.png) no-repeat;
        padding: 8px 0 7px 32px;
    }

    #details_section #nearest_station {
        background: transparent url(../img/star_icon.png) no-repeat;
        padding: 8px 0 7px 32px;
    }

    #details_section a {
        text-decoration: none;
    }

    #details_section ul {
        padding: 0;
        margin: 0;
    }
    
    #details_section li {
        list-style-type: none;
    }
    
    #details_section #address {
        margin: 10px 0 0 0;
    }
    
        #details_section #address p {
            margin: 0;
        }
    
    #details_section #facilities {
        margin: 15px 0 0 0;
    }
    
    #details_section #directions {
        margin: 10px 0 0 0;
    }
    
        #details_section #directions label {
            display: block;
            padding: 0 0 3px 0;
            width: 169px;
        }
    
        #details_section #directions p {
            margin: 0 0 15px 0;
        }
    
        #details_section #directions input, #details_section #directions select {
            margin: 0 0 4px 0;
            vertical-align: middle;
        }
        
        #details_section #directions input.destination {
            width: 196px;
        }
        
        #details_section #directions label {
            font-size: 12px;
        }
        
        #details_section #directions select.distanceFromRoute {
            font-size: 12px;
            width: 91px;
        }
        
        #details_section #directions input.get_route {
            margin: 15px 0 0 3px;
        }
    
    #details_section #links {
        float: left;
        margin: 15px 0 0 0;
    }
    
        #details_section #links .add.active {
            background: transparent url(../img/plus_active.png) no-repeat 0px 1px;
            margin-bottom: 0.5em;
            padding: 2px 0 1px 20px;
        }
        
        #details_section #links .add.inactive {
            background: transparent url(../img/plus_inactive.png) no-repeat 0px 1px;
            margin-bottom: 0.5em;
            padding: 2px 0 1px 20px;
        }
        
            #details_section #links p {
                margin-bottom: 1em;
            }

/* GENERIC STYLES */

/* Error messages */    
#station_content #destination .error, #details_section #directions .error, #route_content .error {
    color: #ff0000;
    font-weight: normal;
}

#route_content .error {
    margin-top: 8px;
}

#station_content #destination .error_command, #details_section #directions .error_command, #route_content .error_command {
    font-weight: bold;
}

/* Remove any footer image spacer */
#footer li { background: none; }
#footerlinks { font-size: 0.8em; }
