/* GLOBAL */ /* Layout */ #cyclestreets-content {width: auto; min-height: 400px;} * html #cyclestreets-content {height: 400px;} /* Emulation of min-height for IE6 */ /* Fonts */ #cyclestreets-content h2, #cyclestreets-content h2 a, #cyclestreets-content h2 a:link, #cyclestreets-content h2 a:visited {color: #786e4e; padding-top: 0.5em;} .action {padding-left: 0.5em; padding-right: 0.5em; border: 2px solid #ddd; background-color: #eee; border-style: outset; cursor: pointer; text-decoration: none; line-height: 150%; color:black;} .action:active { border-style: inset; cursor: pointer;} .miniicon {border: 0; width: 16px; height: 16px; margin-right: 3px;} * html #switchabletabs .miniicon {margin-right: 0;} /* IE6 hack */ *+html #switchabletabs .miniicon {margin-right: 0;} /* IE7 hack */ /* Map key */ #cyclestreets-content a.mapkey {background-color: white; font-weight: normal; margin-right: 0; padding: 3px 6px; border: 1px solid gray; position: relative; top: -1px; right: -4px;} #cyclestreets-content a.mapkey strong {color: green; font-weight: bold;} /* Links */ #cyclestreets-content a, #cyclestreets-footer a {text-decoration: none; color: gray;} #cyclestreets-content a:hover {border-bottom: 1px solid #666;} #cyclestreets-content a.noborder {border-bottom: 0;} /* External links - add arrow - CSS2 not supported by IE<7 */ #cyclestreets-content a[target=_blank]:link, #cyclestreets-content a[target=_blank]:visited {background-image: url(../images/general/offsite.gif); background-repeat: no-repeat; background-position: 100% 60%; padding-right: 13px;} #cyclestreets-content a[target=_blank].noarrow:link, #cyclestreets-content a[target=_blank].noarrow:visited {background: none; padding-right: 0; border-bottom: 0;} /* Button */ #cyclestreets-content .button {background-color: #eee; border-color: #eee #999 #999 #eee; border-style: solid; border-width: 2px; color: #000; padding: 2px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; white-space: nowrap;} /* #!# Needs checking where used */ p.adminnotice {color: #555; background: #fdf2ee; margin-top: 2em;} /* #!# Needs checking how used */ p#permalink {font-size: smaller;} #content p {margin-top: 0;} #cyclestreets-content ul {list-style: square;} #cyclestreets-content li {margin-top: 0.4em;} /* Postcode page */ #cyclestreets-content.widgetBoxCreator div.postcode input, #cyclestreets-content.widgetBoxCreator div.postcoderesult p {color: #603; font-size: 1.4em; padding: 0.2em;} #cyclestreets-content.widgetBoxCreator #link div.postcode input#form_name {padding: 0.1em 0.2em; font-size: 1.2em;} #cyclestreets-content.widgetBoxCreator #link div {margin-left: 3em; margin-bottom: 2em;} #cyclestreets-content.widgetBoxCreator #link div.cyclestreets a {border: 0;} /* Get rid of the border */ #cyclestreets-content.widgetBoxCreator #link div.postcoderesult p a {border: 0; color: #603;} #cyclestreets-content.widgetBoxCreator #link div.postcode {width: 40em; padding: 0.5em 3em; margin-top: 2em;} #cyclestreets-content.widgetBoxCreator #link div.postcode input.button {margin-left: 8.8em;} #cyclestreets-content.widgetBoxCreator #link div.postcoderesulthtml pre {font-family: "Lucida Console", monospace; font-size: 0.83em;} #cyclestreets-content.widgetBoxCreator #example {float: right; position: relative; top: -3em;} p#addorganisationlink {float: right;} /* Table of Contents */ /* Note: potential confusion with global.css toc */ div.helptoc#toc {float: right; width: 20em; margin: 0 0 2em 1.5em; border: 1px dotted #F1EDC2; padding: 0.5em; background-color: #f6f9ed; font-size: 0.9em; line-height: 150%; } div.helptoc#toc a{ text-decoration: none; color: #686;} div.helptoc#toc li {list-style: none;} div.helptoc#toc .level2 { margin-left: 1em; } div.helptoc#toc .level3 { margin-left: 2em; } div.helptoc#toc .level4 { margin-left: 3em; } div.helptoc#toc .level5 { margin-left: 4em; } div.helptoc#toc .level6 { margin-left: 5em; } /* #!# Need to check where this block is used */ td.code, span.code { font-family: monospace;} p.abctag { color: red; } #cyclestreets-content code.osmtag {background: #E0E0F0; font-size:larger;} #cyclestreets-content code.osmtag a { color: blue; text-decoration: none;border-bottom: 0;} /* !! Note: this gets overruled by #cyclestreets-content a */ ul.code,dl.code,p.code, pre.code { font-family: monospace; padding: 1em; border: 1px solid silver; line-height: 150%; background: #f6f9ed; overflow: auto} pre.code.window { max-height: 36em; } dl.code dd { margin-bottom: 1em; } /* Swatches for national and regional cycle networks */ span.ncn { border: 2px solid white; border-radius: 5px; padding: 2px 4px; background: #e32739; font-family: sans-serif; font-weight: bold; color: white;} span.rcn { border: 2px solid white; border-radius: 5px; padding: 2px 4px; background: #1378c7; font-family: sans-serif; font-weight: bold; color: white;} /* Mini lists of further options */ /* #!# Need to check where this block is used */ ul.furtheroptions {display: inline; list-style: none; margin-top: 5px;} /* Journey listing */ table.journeylisting {margin-top: 25px; clear: right;} table.journeylisting td p:first-child {margin-top: 0;} table.journeylisting tr.street.attention {background-color: #ECF0F1;} table.journeylisting tr td.turn {font-size: smaller; opacity: 0.7} table.journeylisting tr td.surface {font-size: smaller; opacity: 0.7} table.journeylisting tr td.maplet img.maplet {cursor: zoom-in;} table.journeylisting tr td.streets div.focusmap {font-weight: bold;cursor: zoom-in;} table.journeylisting tr td.streets ul.streetNamesMenu div.focusmap {font-weight: normal;} table.journeylisting th {background-color: #eee;} table.journeylisting img.photothumbnail {margin-right: 10px; padding: 5px 0 25px;} #cyclestreets-content table.journeylisting a.photothumbnail {border-bottom: 0;} table.journeylisting img.photothumbnail {opacity: 0.7;} table.journeylisting img.photothumbnail {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); -moz-opacity: 0.7;} /* Vendor specific implementations of opacity */ table.journeylisting img.photothumbnail:hover {opacity: 1;} table.journeylisting img.photothumbnail:hover {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1;} /* Vendor specific implementations of opacity */ p.alignright {text-align: right;} table.journeylisting ul.hurdles {font-size: smaller;} table.journeylisting tr#streetviewRow div#streetViewContainer{ height: 300px; } /* Itinerary display page */ form.listingIncludes { float: right; } .itineraryMetadata {width: 300px; /* Also set in elevationProfile.setWidth in code */ min-height: 612px; /* i.e. #map height plus tolerance of 12px */} * html .itineraryMetadata {height: 612px;} /* IE6 emulation of min-height */ #itinerarytitle h1 {margin: 0;} #itinerarytitle h1 span, #itinerarytitle h1 a {font-size: 0.6em;} #itinerarytitle h1 a {display: inline; margin-left: 3px; padding: 2px 6px; border: 1px solid #ddd; text-transform: lowercase;} #itinerarytitle h1 a.changebutton {margin-left: 20px;} #cyclestreets-content #itinerarytitle h1 a:hover {border-color: #888; background-color: #f7f7f7; color: #603;} p#itineraryjourneynumber {float: right; text-align: right; margin: 0; padding: 0 0 0 8px; color: #a60101;} #itinerarytitle ul {float: right; margin: 0; padding: 0 0 0 8px; list-style: none;} #itinerarytitle ul li {list-style: none; margin: 0 0 5px; padding: 0; font-size: 0.93em;} div.itinerarydisplay {margin-bottom: 2em;} .itineraryMetadata ul {list-style-type: none; margin: 0; padding: 0; margin-bottom: 2em;} .itineraryMetadata ul li {list-style: none; padding-bottom: 7px; display: block; width: auto; padding: 3px 10px; background-color: #f7f7f7;} #cyclestreets-content .itineraryMetadata ul li a {border: 0;} .itineraryMetadata ul img.miniicon {opacity: 0.65;} .itineraryMetadata ul img.miniicon {filter:alpha(opacity=65); -moz-opacity: 0.65; -khtml-opacity: 0.65;} /* Vendor-specific implementations of opacity */ .itineraryMetadata ul li, p.itinerarytext {font-size: 0.9em; color: #333;} .itineraryMetadata ul li a {color: #777;} p.elevationchart {padding-bottom: 0; margin-bottom: 5px; color: #333; font-size: 0.9em; margin-bottom: 10px;} .itinerarydisplay h2 {padding: 0; margin: 0 0 1em; border-bottom: 1px solid #ddd; display: block;} #quietest.itinerarydisplay h2 {color: green;} #fastest.itinerarydisplay h2 {color: #cc0000;} #shortest.itinerarydisplay h2 {color: #5555dd;} ul#switchabletabs {margin-top: 1.4em;} ul#switchabletabs li a {color: #666;} ul#switchabletabs li a.selected {font-weight: bold;} /* PER photos-en-route */ checkbox#showphotosenroute[disabled='disabled'], checkbox#showmaplets[disabled='disabled'] {color: #ccc;} /* Captioned Images - for use on help pages */ div.image-container { border: 1px solid #888; padding: 0.2em; margin: 0.2em; background-color: #eee; } div.strip-captioned-image { float: left; padding: 1em; width: 330px;} div.strip-captioned-image p { text-align: center; font-style: italic; width: 330px;} div.single-captioned-image { padding: 1em; text-align: center; font-weight: bold; } div.single-captioned-image p { text-align: center; font-style: italic; } div.single-captioned-image-right { padding: 1em; text-align: center; font-weight: bold; width: 300px; float: right;} div.single-captioned-image-right p { text-align: center; font-style: italic; width: 300px; float: right;} tr.datetime fieldset {padding: 0;} /* Buttons */ ul.actions {margin-bottom: 1.5em;} p.actions a {padding: 3px;} p.actions a img {border: 0;} /* Map panel: hierarchy is: (1) #mapContainer contains the map panel, locationfinder and other attached info; and (2) #map, the slippy map itself */ #mapContainer {/* width auto = 100% minus any margin-right subsequently applied */ position: relative;} #map {height: 600px;} #cyclestreets-content .activeArea {position: absolute; top: 0; right: 0; left: 0; height: 100%;} /* Overriden when overlay required */ #journeyPlannerPanel {position: relative;} /* networkBrowser */ #cyclestreets-content #mapContainer div#detail {height: 600px;} #cyclestreets-content #mapContainer div#detail h2 { margin-top: 0; padding-top: 0 } #cyclestreets-content #mapContainer div#detail div#selectionbody { height: 560px; overflow: auto} #cyclestreets-content #mapContainer div#detail table td div.example {display: flex; justify-content: space-between;} #cyclestreets-content #mapContainer div#detail div#selectionbody tr.scrollRange form { display: inline } #cyclestreets-content #mapContainer div#detail div#selectionbody tr.scrollRange form input[name=id]{ text-align: center; font-size: 1.1em; line-height: 1.3em; border: 0} #cyclestreets-content #mapContainer div#detail div#selectionbody tr.scrollRange form input[name=id][type=text]{ width: 6em;} #cyclestreets-content #mapContainer div#detail div#selectionbody tr.scrollRange form input[name=id][type=number]{ width: 9em;} #cyclestreets-content #mapContainer div#detail div#selectionbody tr.scrollRange form input[name=id]:hover { color: #603; } #cyclestreets-content #mapContainer div#detail div#selectionbody tr.scrollRange form select[name=id] { width: 9em; } #cyclestreets-content #mapContainer div#detail div#selectionbody tr.scrollRange form select[name=id]:hover { color: #603; } /* Select */ #cyclestreets-content.selectData #mapContainer .map {height: 250px; width: 400px;} /* Pages with a placefinding panel: allocate space to the right and add a right-margin to the map */ #journeyPlannerPanel.horizontal .activeArea {right: 275px;} #journeyPlannerPanel.horizontal #placeFindingPanelWrapper {position: absolute; right: 0; z-index: 100; width: 270px; background-color: rgba(255,255,255, 0.85); height: 100%;} #journeyPlannerPanel.horizontal #placeFindingPanelWrapper #placeFindingPanel {padding: 10px 10px 10px 20px;} /* NB Cannot use 'overlay' as one hosted site has an aggressive CSS rule with !important overriding that class name */ #cyclestreets-content #journeyPlannerPanel.overlaypanel .leaflet-control-layers {margin-right: 280px;} #cyclestreets-content #journeyPlannerPanel.overlaypanel .leaflet-control-attribution {margin-right: 270px;} #cyclestreets-content #journeyPlannerPanel div.jpDeveloperControl {font-size: 80%;} /* Vertical version of placefinding panel */ #journeyPlannerPanel.vertical #placeFindingPanel {width: auto; height: 149px; /* Test height carefully in browsers if changing */ position: relative;} #journeyPlannerPanel.vertical #placeFindingPanel ul#waypoints li, #journeyPlannerPanel.vertical #placeFindingPanel #jpGo {float: left; width: 200px; margin-left: 0; margin-right: 15px; height: 120px; } #journeyPlannerPanel.vertical #placeFindingPanel div h3 {font-size: 1.25em;} #journeyPlannerPanel.vertical #placeFindingPanel ul.quickzoom {position: absolute; top: 160px; right: 5px; width: 110px; z-index: 98; background-color: white; padding: 5px 5px 10px; opacity: 0.93;} #journeyPlannerPanel.vertical #placeFindingPanel ul.quickzoom {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=93)"; filter: alpha(opacity=93); -moz-opacity: 0.93; -khtml-opacity: 0.93;} /* Vendor specific implementations of opacity */ #journeyPlannerPanel.vertical #placeFindingPanel ul.quickzoom li {font-weight: bold;} #journeyPlannerPanel.vertical #placeFindingPanel ul.quickzoom li a {font-weight: normal; color: black; border-bottom-color: #aaa;} #journeyPlannerPanel.vertical #placeFindingPanel #jpGo {float: left; width: 220px; padding: 0; margin: 0 0 10px;} #journeyPlannerPanel.vertical ul#waypoints li.inactive, #journeyPlannerPanel.vertical #jpGo.inactive {display: inline; border-color: #aaa;} #journeyPlannerPanel.vertical #placeFindingPanel #jpGo.inactive {border: 1px solid #ddd; padding: 0.5em 5px;} * html #journeyPlannerPanel.vertical #placeFindingPanel {z-index: 99;} /* IE6 hack - see http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ */ *+html #journeyPlannerPanel.vertical #placeFindingPanel {z-index: 99;} /* IE7 hack - see http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ */ /* Journey Planner Places view */ #cyclestreets-content.journeyPlannerPlaces #journeyPlannerPanel {clear: right;} /* Front page: when unexpanded, override placefinding panel to be narrower */ #cyclestreets-content.home .activeArea {right: 240px;} #cyclestreets-content.home #journeyPlannerPanel.horizontal #placeFindingPanelWrapper {width: 240px;} #cyclestreets-content.home #journeyPlannerPanel.overlaypanel .leaflet-control-layers {margin-right: 250px;} #cyclestreets-content.home #journeyPlannerPanel.overlaypanel .leaflet-control-attribution {margin-right: 240px;} /* Itinerary page */ #cyclestreets-content #itineraryDisplayWrapper #itineraryDisplay {float: right; width: 610px;} /* streetNamesMenu ui-menu formating */ ul.streetNamesMenu { border: 0 } #cyclestreets-content ul.streetNamesMenu li {margin-top: 0} #cyclestreets-content ul.streetNamesMenu li a {background-position: 96% 60%; padding-right: 20px;} /* Location finder, within the map */ #cyclestreets-content #locationfinder {position: absolute; top: 10px; left: 50px; z-index: 41;} #cyclestreets-content #locationfinder input {width: 240px; padding: 7px; border: 1px solid #ddd; box-shadow: 3px 3px 5px 0px #aaa;} #cyclestreets-content #locationfinder .ui-autocomplete-loading {background-position: right 24px center;} #cyclestreets-content ul.ui-autocomplete li a {color: #603;} #cyclestreets-content ul.ui-autocomplete li span {color: #333; font-size: smaller;} /* Journey Planner boxes */ #waypoints.inactive {display: none;} ul#waypoints li {border-width: 1px; border-style: solid;} ul#waypoints li {padding: 0.5em 1em; cursor: zoom-in;} ul#waypoints li p {min-height: 24px; font-size: 1.1em; margin-bottom: 10px; padding-bottom: 0;} ul#waypoints li p strong {color: #603; font-size: 1.1em; line-height: 1.45em; font-weight: bold;} ul#waypoints li p img {vertical-align: middle;} ul#waypoints li {margin: 0 0 1em;} ul#waypoints li h3 { display: none; margin-top: 0; border-bottom: 0; padding-left: 0; margin-bottom: 4px;} ul#waypoints li.focussed h3 {display: block;} ul#waypoints li input { display: none; } ul.experimental#waypoints li input {display: block;} ul#waypoints li p a { font-size: smaller; cursor: pointer;} ul#waypoints li.inactive, #jpPrompt.inactive {display: none;} ul#waypoints li.focussed {border-width: 2px; cursor: pointer;} ul#waypoints li.focussed input {display: block;} /* Routing analysis */ #cyclestreets-content #journeyPlannerPanel #jpInfo div.routing-analysis.hidden {display:none;} #cyclestreets-content #journeyPlannerPanel #jpInfo div.routing-analysis div.head.hidden {display:none;} #cyclestreets-content #journeyPlannerPanel #jpInfo div.routing-analysis div.body { max-height: 22em; overflow: auto; } #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis.hidden {display:none;} #cyclestreets-content #journeyPlannerPanel #jpInfo dl.analysisOther.hidden {display:none;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis {font-size: smaller;border-collapse: collapse;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr.attention {background-color: #ECF0F1;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr th {position: -webkit-sticky;position: sticky; top: 0; background-color: white;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr.totals th {top: 22px;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr th.travelMode {text-align: center;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr th.dismounts {text-align: center;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr th.note {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr td.travelMode {text-align: center;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr.leg {cursor: zoom-in;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr.joint {cursor: zoom-in;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tbody:hover td {outline: 1px solid #eee;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr:hover {background-color: #ECF0F1;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr th.ridingTime {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr td.ridingTime {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr th.pause {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr td.pause {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr th.hurdle {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr td.hurdle {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr th.hill {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr td.hill {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr th.lengthMetres {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr td.lengthMetres {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr th.busynance {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr td.busynance {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr th.turnCost {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr td.turnCost {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr th.timeSeconds {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr td.timeSeconds {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr th.balanceder {text-align: right;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.analysis tr td.balanceder {text-align: right;} /* Scrolling Road */ #cyclestreets-content #journeyPlannerPanel #jpInfo table.scrolling-road.hidden {display:none;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.scrolling-road {font-size: smaller; border-spacing: 0;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.scrolling-road td {padding: 0;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.scrolling-road td.road {width: 30px; text-align: center;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.scrolling-road th.leftTurn {text-align: right; width: 50%;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.scrolling-road th.rightTurn {text-align: left; width: 50%;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.scrolling-road tr.joint td {font-size: smaller; color: gray;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.scrolling-road td.leftTurn {text-align: right; width: 50%;} #cyclestreets-content #journeyPlannerPanel #jpInfo table.scrolling-road td.rightTurn {text-align: left; width: 50%;} /* Minimal tabbing initially based on http://keith-wood.name/uitabs.html#tabs-min */ #cyclestreets-content #journeyPlannerPanel #jpInfo { background: transparent; border: none; } #cyclestreets-content #journeyPlannerPanel #jpInfo .ui-widget-header { background: transparent; border: none; } #cyclestreets-content #journeyPlannerPanel #jpInfo .ui-tabs-nav .ui-state-default { background: transparent; border: none; } #cyclestreets-content #journeyPlannerPanel #jpInfo .ui-tabs-nav .ui-state-default a { color: #c0c0c0; } #cyclestreets-content #journeyPlannerPanel #jpInfo .ui-tabs-nav .ui-state-active a { color: #111; font-weight: bold; } #cyclestreets-content #journeyPlannerPanel #jpInfo.ui-tabs .ui-tabs-panel { padding: 0; } #cyclestreets-content #journeyPlannerPanel #jpInfo.ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: .1em .1em; } #cyclestreets-content #journeyPlannerPanel #jpInfo .ui-widget-content { border: 0 } #cyclestreets-content #journeyPlannerPanel #jpInfo.ui-tabs { padding: 0 } /* Vary the border on completed waypoint boxes as a subtle hint that clicking centres on that point */ ul#waypoints li.complete:hover {border-style: dotted;} /* The right padding is to leave room for the autocomplete rotating progress gif that appears while waiting for results. */ ul#waypoints li input { width: 80%; padding: 4px 24px 4px 4px; font-size: 1.3em; color: #603; font-weight: normal;} /* Waypoint box default amber and cornsilk */ ul#waypoints li {border-color: #FF7E00;} ul#waypoints li h3 {color: #FF7E00;} ul#waypoints li {background-color: #FFF8DC;} /* Start & Finish box colour differences */ ul#waypoints li:first-child {border-color: #3c3;} ul#waypoints li:first-child h3 { color: #383; display: block;} ul#waypoints li:first-child.focussed { background-color: #F1FDED;} ul#waypoints li:first-child.complete { background-color: #DFFAD6;} ul#waypoints li:last-child { border-color: #f30;} ul#waypoints li:last-child h3 { color: #f30; display: block;} ul#waypoints li:last-child.inactive { border-color: #cbb;} ul#waypoints li:last-child.inactive h3 { color: #aaa;} ul#waypoints li:last-child.focussed { background-color: #FDF1ED;} ul#waypoints li:last-child.complete { background-color: #FADFD6;} ul#waypoints li.complete p.geolocation,ul#waypoints li.complete p.homelocation {display: none;} ul#waypoints li.complete p {margin: 0;} ul.experimental#waypoints li.complete h3 { display: none; } ul.experimental#waypoints li p { display: none; } ul.experimental#waypoints li.complete input { background-color: transparent; border: 0} ul.experimental#waypoints li.focussed input { background-color: white; border: 0} ul#waypoints li img.closeicon { display: none;} ul#waypoints li:hover.complete img.closeicon { display: block; width: 20px; float: right; margin-top: 0.5em;} ul.quickzoom li {font-size: 11px; line-height: 12px;} /* Set as an exact size to avoid text getting too small if using em-percentage */ #jpOptions { padding-left: 0.5em;} #jpOptions.inactive { display: none; } #jpOptions ul li.untouched { opacity: .65; } #jpOptions ul li.untouched {filter: alpha(opacity=65); -moz-opacity: .65;} /* Hack to add vendor-specific support for opacity while CSS3 support unavailable - see http://www.quirksmode.org/css/opacity.html */ #jpOptions ul li.touched {font-weight: bold; color: gray;} /* Journey Planner page map: Move cursor only for the icon, not the shadow */ img.leaflet-marker-draggable.waypointicon { cursor: move; } img.leaflet-marker-draggable.leaflet-drag-target.waypointicon { cursor: none; } /* Hide cursor on waypoint drag */ /* Simple style to show a zoom-in for the map cursor when it is zoomed out too far. Leaflet's dragging styles overwrite it to grabbing. */ .tooFarOot { cursor: zoom-in; } /* Handling journey planner page's hoverMode */ #journeyPlannerPanel.hoverModeActive #placeFindingPanelWrapper { display: none; } #journeyPlannerPanel.hoverModeActive #map { cursor: crosshair; outline: inset thick gray; } /* Dragging waypoings also hides place finding panel */ #journeyPlannerPanel.dragWaypointActive #placeFindingPanelWrapper { display: none; } /* Journey planner analysis: forcedFollow display */ #journeyPlannerPanel #placeFindingPanelWrapper .forcedFollowNavigation.hidden { display: none; } ul.forcedFollowNavigation { margin-bottom: 1.2em } #cyclestreets-content.journeyPlannerPage {min-height: 800px;} /* Fix float issues - problem is that IE doesn't treat the large map panel as being properly floated */ /* #!# This doesn't appear to be used */ *+html #cyclestreets-content.journeyPlannerPage #tabbed table {width: 850px;} /* Hack for IE7 layout bug fix */ /* Table warning row */ table tr.warning { color: red; } #cyclestreets-content input#jpPlanButton { border: 1px solid #603; margin-top: 0.8em; color: white; background-color: #B48A9F; padding: 10px; font-size: 1.4em; font-weight: bold; width: 100%;} #cyclestreets-content input#jpPlanButton.inactive {display: none;} a img {border: 0;} #cyclestreets-content .spaced li, #cyclestreets-content li.spaced {margin-top: 12px;} /* Generic styles, overriden from generic.css */ .small {font-size: 0.9em;} #cyclestreets-content ul.tabs li a.selected {background-color: #faedb2; color: #666;} /* General text formatting */ .nowrap {white-space: nowrap;} /* Street View */ #streetViewContainer {clear: both; width: 100%;} #cyclestreets-content table.journeylisting a.streetview {color: #aaa; font-size: 11px; cursor: pointer;} table.journeylisting a.streetview span {line-height: 13px;} /* Third-party sites */ #cyclestreets-content p.poweredby {clear: right; float: right; margin-top: 10px; margin-bottom: 20px; color: #aaa;} #cyclestreets-content p.poweredby a {color: #444; border-bottom: 0;} #cyclestreets-content p.poweredby a.poweredby {display: inline-block;} /* Print styles */ @media print { #itinerarytitle a, #itinerarytitle h1 a, #switchabletabs, .noprint {display: none;} /* JP-specific */ table.journeylisting th {background-color: lightgray; color: black;} div#itineraryDisplay { clear: both; } div.itinerarydisplay {margin-top: 2em;} .itinerarydisplay p.comment { color: black; } .itinerarydisplay p.comment a:after {content:" (" attr(href) ") "; font-size:smaller; color: black;} .itineraryMetadata ul li.noprint {display: none;} .itineraryMetadata ul li { background-color: transparent;} /* Photos en route */ table.journeylisting img.photothumbnail {opacity: 1.0;} /* This trick makes use of an attribute of polyline as set in a styleMap to hide non-selected tracks from the print out. Will only work on browsers that support svg. */ polyline[stroke-linecap=butt] { display: none; } /* Map controls */ .leaflet-control-zoom, .leaflet-control-layers, a.mapkey {display: none;} } /* Mobile responsiveness */ @media screen and (max-width: 480px) { .leaflet-top.leaflet-right {display: none;} body #journeyPlannerPanel.horizontal #placeFindingPanelWrapper {width: 50%;} body #journeyPlannerPanel.horizontal #placeFindingPanelWrapper #placeFindingPanel {padding: 5px 5px;} body ul#waypoints li {padding: 8px; font-size: 0.84em;} body ul#waypoints li input {width: 99%;} body ul#waypoints li p {font-size: 0.84em;} body #jpOptions {display: none;} body ul.quickzoom li {font-size: 0.93em;} body #cyclestreets-content input#jpPlanButton {font-size: 1.15em;} #switchabletabs li#choosearoute {display: none;} #switchabletabs li span {display: none;} #itinerarytitle ul {float: none;} body #cyclestreets-content #itineraryDisplayWrapper #itineraryDisplay {width: 100%;} #mapContainer {width: 90%; margin-bottom: 20px;} #map {height: 450px;} #minimapscontrol {display: none;} table.journeylisting td {font-size: 0.91em;} table.journeylisting th {font-size: 0.74em;} } /* Quick navigation panel for Geolocate button. Also a home location button. */ div.quickNavPanel { position: absolute; top: 8px; left: 56px; background: white; /* fallback for IE - IE6 requires background shorthand*/ background: rgba(255,255,255,0.4); border-radius: 4px; padding: 2px; } div.quickNavPanel:hover { background: rgba(255,255,255,0.9); } div.quickNavPanel div { float: left; /* Without this controls stack vertically */ margin: 1px; padding: 1px; cursor: pointer; width: 22px; height: 22px; background-color: rgba(255, 255, 255, 0.4); background-image: none; } div.quickNavPanel div.GoHomeButtonItemInactive { border-radius: 4px; border: 1px solid rgba(192, 192, 192, 0.4); background: #ccc url(../images/icons/house.png) center no-repeat; background-color: rgba(255, 255, 255, 0.4); } div.quickNavPanel div.GoHomeButtonItemInactive:hover { border: 1px solid rgba(192, 192, 192, 0.9); background-color: rgba(255, 255, 255, 0.9); } /* Extra: added this graphic which is missing from the jQuery theme download */ #cyclestreets-content .ui-autocomplete-loading { background: white url('../images/jquery/ui-anim_basic_16x16.gif') right center no-repeat; } /* Ensure that popup dialogs open in front of leaflet map controls */ #cyclestreets-content .ui-dialog { z-index: 101 !important ;} /* Leaflet default z-index for these too is a bit strong at 1000. Keeping it less than 100 means they grey out properly when a modal dialog appears over them. */ #cyclestreets-content .leaflet-top, #cyclestreets-content .leaflet-bottom {z-index: 90;} #cyclestreets-content .leaflet-pane {z-index: 40;} /* #!# Patch pending https://github.com/Leaflet/Leaflet/pull/3647 */ #cyclestreets-content .leaflet-container .leaflet-marker-pane img {max-width: none !important;} /* Patch to ensure the location control icon appears vertically centred */ #cyclestreets-content div.leaflet-control-locate a span.fa { padding: 6px; } /* Blog */ /* Background opacity has to be set at the same time as the image; see: https://css-tricks.com/design-considerations-text-images/ */ #cyclestreets-content.blog h2.background, #cyclestreets-content.blog h2.background a {color: white;} #cyclestreets-content.blog h2.background {width: 100%; height: 170px; padding: 20px 10px 10px; font-size: 2em; color: white; text-shadow: 4px 4px 20px rgba(0, 0, 0, 1); margin-bottom: 1em; background-repeat: no-repeat;}