/* GLOBAL */ /* Layout */ #cyclestreets-container {width: 984px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px;} body {background-color: #fdf9ee; color: #4E4628; margin: 0; padding: 0;} #cyclestreets-menu {padding: 8px 0 0 15px; margin: 0 auto 3px;} #cyclestreets-contentouter {clear: both; background-color: white; margin: 8px auto 0; border: 2px solid #EDE8DA; padding: 22px;} .spacer {clear: both;} /* Basically used as a clearfix */ /* Fonts */ body, textarea, option, select, body #cyclestreets-content .ui-widget {font-family: Arial, Helvetica, sans-serif;} body, textarea, option, select {font-size: 91%;} body {color: #333;} h1, h2, h3, h4, h5, h6 {font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal;} h1 {color: #a60101;} /* Generic styles */ .shadow {box-shadow: 5px 5px 10px 0px #999;} /* Signin links */ /* Reduce the top and bottom margins here so that the cyclestreets menu tabs don't get bumped down. */ #cyclestreets-menu ul.signin {float: right; margin-top: 0.5em; margin-bottom: 0.25em; margin-right: 1em;} /* The line-height here helps keep the text lined up when there is an icon (e.g. tinkle) in one of the list items.*/ #cyclestreets-menu ul.signin li {float: left; list-style: none; margin-left: 20px; font-size: 0.83em; line-height: 2em;} #cyclestreets-menu ul.signin li a {color: gray; text-decoration: none;} #cyclestreets-menu ul.signin li span.username {font-weight: bold; margin-right: 1em;} /* Layout */ #cyclestreets-menu {height: 5.9em;} #cyclestreets-footer {clear: both; width: auto; margin: 0 auto; padding: 10px 0 50px;} /* Global menu */ #cyclestreets-menu #cyclestreets-logo img.logo {border: 0; float: left; margin: 0 34px 0 0; width: 150px; height: 81px} /* The minus 40px for margin-right allows the normal flow to carry on uninterrupted by this relatively positioned element. The logo itself is 40px wide. */ #cyclestreets-menu #cyclestreets-logo img.beta {float: left; position: relative; top: 50px; left: -80px; margin-right: -40px; width: 40px; height: 40px} #cyclestreets-menu p {padding: 0; margin: 0;} #cyclestreets-menu ul.cyclestreets-tabs {list-style: none; height: 2.4em; margin: 50px 0 0; padding: 0;} #cyclestreets-menu ul.cyclestreets-tabs li {float: left; margin-right: 8px; background-color: #FCFAF3;} #cyclestreets-menu ul.cyclestreets-tabs li img {vertical-align: middle;} #cyclestreets-menu ul.cyclestreets-tabs li a {display: block; width: auto; padding: 5px 5px; border: 0 solid #ccc; border-bottom: 3px solid #ccc; border-radius: 10px 0; text-decoration: none; color: #4E4628; -moz-opacity: 0.65;} #cyclestreets-menu ul.cyclestreets-tabs li a:hover {border-color: gray; background-color: #fefefe;} #cyclestreets-menu ul.cyclestreets-tabs li.selected a {background-color: #fefefe; border-bottom-color: #786E4E;} #cyclestreets-menu ul.cyclestreets-tabs li.journeyPlannerPage a, #cyclestreets-menu ul.cyclestreets-tabs li.photomap a {width: 130px;} #cyclestreets-menu ul.cyclestreets-tabs li.mobilePage a {width: 80px;} #cyclestreets-menu ul.cyclestreets-tabs li.journeyPlannerPage a, #cyclestreets-menu ul.cyclestreets-tabs li.photomap a, #cyclestreets-menu ul.cyclestreets-tabs li.mobilePage a {opacity: 1; background: no-repeat 7px 7px; padding-left: 10px; border-width: 1px 1px 3px 1px;} #cyclestreets-menu ul.cyclestreets-tabs li.journeyPlannerPage a, #cyclestreets-menu ul.cyclestreets-tabs li.photomap a, #cyclestreets-menu ul.cyclestreets-tabs li.mobilePage a {-moz-opacity: 1;} /* Hack to add vendor-specific support for opacity while CSS3 support unavailable - see http://www.quirksmode.org/css/opacity.html */ #cyclestreets-menu ul.cyclestreets-tabs li.journeyPlannerPage {margin-left: 15px;} #cyclestreets-menu ul.cyclestreets-tabs li.mobilePage {margin-right: 20px;} #cyclestreets-menu ul.cyclestreets-tabs li.signin, #cyclestreets-menu ul.cyclestreets-tabs li.edit, #cyclestreets-menu ul.cyclestreets-tabs li.collisions {display: none;} #cyclestreets-menu ul.cyclestreets-tabs li a.login {margin-left: 20px;} /* Donate button */ #donatebutton {float: right; margin-top: 10px; margin-left: 40px; opacity: 0.8;} #donatebutton {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8;} /* Vendor specific implementations of opacity */ #cyclestreets-menu div.adminBanner {float: left; line-height: 1.1em;} #cyclestreets-menu div.adminBanner a {text-decoration: none; color: gray;} /* Submenu */ #searchbar {float: right;} #searchbar input {color: #666;} #searchbar input.search {padding: 1px 4px; width: 95px;} ul.cyclestreets-subtabs {float: none; padding: 0 0 0.5em; margin: 0 0 2em; border-bottom: 1px solid #ddd; text-align: left;} ul.cyclestreets-subtabs li {display: inline; margin-right: 0.6em; font-size: 0.83em;} ul.cyclestreets-subtabs li a {color: #666; padding-bottom: 2px; text-decoration: none; white-space: nowrap;} * html #cyclestreets-content ul.cyclestreets-subtabs li a:hover {border-bottom: 0;} /* IE6 hack to prevent subtabs having hover underlining */ ul.cyclestreets-subtabs li a img {border: 0; vertical-align: middle; margin-right: 2px;} ul.cyclestreets-subtabs li a {border: 0;} /* Footer */ #cyclestreets-footer {padding: 10px 22px;} #cyclestreets-footer p {font-size: 0.83em; line-height: 16px; padding: 0 0 1em 0; margin: 0;} #cyclestreets-footer p a {color: #0b0b0b;} #cyclestreets-footer p.history {float: right;} #cyclestreets-footer dl {font-size: 0.83em;} #cyclestreets-footer dl dt {float: left; width: 9.5em; color: #616161; clear: left; font-weight: bold; padding: 0 0 0.5em 0; margin: 0;} #cyclestreets-footer dl dd {padding: 0 0 0.5em 0; margin:0;} #cyclestreets-footer dl dd ul {padding: 0; margin: 0;} #cyclestreets-footer dl dd ul li {padding: 0 0.8em 0 0; display: inline; list-style-type: none;} /* FRONT PAGE */ /* Front page - about */ #cyclestreets-content.home #cyclestreets-about {float: left; width: 603px; padding: 0 15px 2px 22px;} #cyclestreets-content.home #cyclestreets-about h2 {color: #786E4E; padding: 0 0 10px 0; font-size: 2.05em; line-height: 42px; float: left; margin: 0;} #cyclestreets-content.home #cyclestreets-about h2 span {background-color: #FFFFFF; color: #0B0B0B; font-size: 16px; line-height: 20px;} #cyclestreets-content.home #cyclestreets-about ul {padding: 0; margin: 0; margin-top: -10px; list-style: none;} #cyclestreets-content.home #cyclestreets-about ul, #cyclestreets-content.home #cyclestreets-about p, #cyclestreets-content.home #cyclestreets-about div.jumplist {margin-left: 190px;} #cyclestreets-content.home #cyclestreets-about ul img {border: 0; margin-right: 2px; vertical-align: middle;} #cyclestreets-content.home #cyclestreets-about ul li {font-size: 14px; line-height: 16px; color: #4E4628; padding: 0 0 0 6px; text-align: left;} * html #cyclestreets-content.home #cyclestreets-about ul li {border: 1px solid white;} /* Hack for IE6 */ #cyclestreets-content.home #cyclestreets-about ul li a {text-decoration: none; color: #4E4628; margin: 0; padding: 4px; display: block;} #cyclestreets-content.home #cyclestreets-about ul li a:hover {background-color: #F4EFDF;} #cyclestreets-content.home #cyclestreets-about p {padding: 10px 0 0 250px;} #cyclestreets-content.home div.jumplist {margin-top: 15px;} #cyclestreets-content.home div.jumplist form {display: inline;} /* Front page photomap/journeyplanner boxes */ #cyclestreets-content.home #journeyplanner, #cyclestreets-content.home #photomap, #cyclestreets-content.home #blog {background-color: #FCFAF3; color: #0B0B0B; border: 1px solid #eee; padding: 10px 25px;} #cyclestreets-content.home #photomap, #cyclestreets-content.home #blog {float: right; width: 200px;} #cyclestreets-content.home #journeyplanner, #cyclestreets-content.home #photomap {margin-top: 18px;} #cyclestreets-content.home #photomap h2, #cyclestreets-content.home #journeyplanner h2 {background-color: #FCFAF3; color: #A60101; font-size: 1.9em; line-height: 40px; margin: 0 0 10px; padding: 0;} #cyclestreets-content.home #photomap h2, #cyclestreets-content.home #journeyplanner h2, #cyclestreets-content.home #photomap h2 a, #cyclestreets-content.home #journeyplanner h2 a {color: #A60101; border-bottom: 0;} #cyclestreets-content.home #photomap h2 span, #cyclestreets-content.home #journeyplanner h2 span {color: #0B0B0B;} /* Front page - photomap */ #collapse {float: right; width: 5em; text-align: right;} #collapse:hover {background-color: #d59999; color:white; font-weight: bold;} /* See if these can be less hard-coded */ #cyclestreets-content.home #journeyplanner.narrow {float: left; width: 614px;} #cyclestreets-content.home #journeyplanner.narrow div#collapse {display: none;} #cyclestreets-content.home #journeyplanner.expanded {float: left; width: 884px;} #cyclestreets-content.home #photomap.collapsed {display: none;} #cyclestreets-content.home #journeyplanner p.map {margin: 0; width: 400px; height: 400px; float: left; border: 1px solid gray;} #cyclestreets-content.home #journeyplanner p.start, #cyclestreets-content.home #journeyplanner p.end {height: 75px; border: 1px solid #ddd; width: 145px; margin: 0 0 10px 415px; padding: 10px;} #cyclestreets-content.home #journeyplanner p.start {background-color: #92b591;} #cyclestreets-content.home #journeyplanner p.end {background-color: #eee;} #cyclestreets-content.home #journeyplanner p.end:hover {background-color: #d59999;} #cyclestreets-content.home #journeyplanner p.button {float: right; clear: right; margin-top: 1.5em;} #cyclestreets-content.home #journeyplanner p.button input {width: 190px; background-color: white; border: 2px solid #ccc; font-size: 1.6em; font-family: Georgia, "Times New Roman", Times, serif; padding: 10px; position: relative; left: -10px;} #cyclestreets-content.journeyPlannerPlaces h2 div.jumplist, #cyclestreets-content.journeyPlannerPlaces h2 div.jumplist form {display: inline;} #cyclestreets-content.journeyPlannerPlaces h2 div.jumplist form {vertical-align: bottom;} #cyclestreets-content.journeyPlannerPlaces h2 div.jumplist form select {font-family: Georgia, "Times New Roman", Times, serif; color: #786e4e;} #cyclestreets-content.journeyPlannerPlaces h2 div.jumplist form input.button {display: none;} /* Front page - photomap */ #cyclestreets-content.home #photomap p {margin: 7px 0 10px;} #cyclestreets-content.home #photomap p a {text-decoration: none; color: #666;} #cyclestreets-content.home #photomap p.introduction {margin: 0 0 20px; padding: 0; font-size: 0.93em; text-align: left;} #cyclestreets-content.home #photomap li a {border: 1px solid #aaa; width: 180px; padding: 4px 8px; font-weight: bold; -moz-border-radius: 3px; margin-bottom: 5px;} #cyclestreets-content.home #photomap li a:hover {border-color: gray; color: #333;} #cyclestreets-content.home #photomap ul {float: none;} #cyclestreets-content.home #photomap li {background-repeat: no-repeat; background-position: 173px center; background-color: white;} #cyclestreets-content.home #photomap li.browse {background-image: url(../../../images/icons/map.png);} #cyclestreets-content.home #photomap li.add {background-image: url(../../../images/icons/add.png);} #cyclestreets-content.home #photomap li.recent {background-image: url(../../../images/icons/images.png);} #cyclestreets-content.home #photomap p.photomap {margin-top: 20px;} #cyclestreets-content.home #photomap p.photomap a {border-bottom: 0;} /* Front page - blog */ #cyclestreets-content.home #blog {margin: 0; height: 80px;} #cyclestreets-content.home #blog h2 {font-size: 1em; line-height: 14px; margin: 0 0 13px; padding: 0;} #cyclestreets-content.home #blog h2, #cyclestreets-content.home #blog h2 a {color: #A60101; border-bottom: 0;} #cyclestreets-content.home #blog ul {list-style: none; margin: 0; padding: 0;} #cyclestreets-content.home #blog li {font-size: 0.83em; margin: 8px 0 3px;} #cyclestreets-content.home #blog li a {color: #333;} /* Blog pages */ .blog #postings .post {background-color: #FCFAF3; color: #0B0B0B; margin: 0; padding: 10px 25px 2.5em 25px; width: auto; border: 1px solid #eee; width: 600px; margin-bottom: 1em;} .blog #sidebar {float: right; width: 200px; font-size: 82%; border: 1px solid #ccc; background-color: #f7f7f7; padding: 10px;} .blog #sidebar ul {list-style: none; margin-left: 0; padding-left: 0;} .blog #sidebar ul li ul {list-style: square; margin-left: 10px; padding-left: 10px;} .blog div.description {font-style: italic; color: gray; font-size: 0.9em; border-bottom: 1px solid #ddd; margin-bottom: 1em; margin-right: 300px;} .blog div.post {border-bottom: 1px solid #ddd; padding-bottom: 1em; margin-right: 300px;} .blog div.post h2 {margin-bottom: 5px;} .blog div.post small {display: block; margin-bottom: 2em;} .blog p.postmetadata {font-size: 0.9em; margin-top: 1.8em; color: gray;} .blog *:target {background: white; padding-top: 2em;} .blog *:target:before {content: none;} /* Large input boxes around the site */ div.photoimport .url input {color: #603; font-size: 1.4em; padding: 0.2em;} input.editableUrl {color: #603; font-size: 1.4em; padding: 0.2em;} .signinform input {color: #603; font-size: 1.4em; padding: 0.2em;} /* Photonumber form */ div.photonumber { margin-bottom: 3px; text-align: center;} form#photonumber { display: inline; } form#photonumber input { border: 0; font-size: 1.1em; font-weight: bold; text-align: center;} /* Search result */ #searchform #query, .searchform input, .searchform label {color: #603; font-size: 1.4em; padding: 0.2em;} .searchform p {line-height: 2.8em;} #searchform p.phrase {margin-top: 6px; padding: 0; color: #603;} div.searchformcontainer {padding: 2em; margin-bottom: 1em;} p.searchresult {margin-bottom: 2em;} /* Go button to match size of input.editableUrl */ input.button#goButton {font-size: 1.4em; padding: 0.2em;} input#searchgo {color: #603; font-size: 1.4em; padding: 0.2em;} /* Link formats page */ #cyclestreets-content.journeyPlannerUrl #formats table td:first-child {width: 180px;} #cyclestreets-content.journeyPlannerUrl #formats table td {white-space: nowrap;} #cyclestreets-content.journeyPlannerUrl #example {float: right; position: relative; top: -3em;} /* Debug tag */ div.debugtag {color: #555; background: white; border: 2px dashed silver; margin-top: 0; padding: 0.5em;} div.debugtag a {color: #666;text-decoration: none;} div.debugtag a:hover {border-bottom: 1px solid #666;} div.debugtag ul {font-size: 0.9em;max-height: 12em; overflow: auto; padding: 2px; background: #F7F7F7;} div.debugtag li {margin-bottom: 0.5em;} ul#pagedebugging {list-style: none;} ul#pagedebugging li {display: inline; margin: 0; padding: 0 0.4em;} ul#pagedebugging li+li { border-left: 2px solid #AAA } /* Tinkle */ #tinkleForm_tinkle {color: #603; font-size: 1.4em; padding: 0.2em;} td p.newtinkle {color: #069; font-size: 1.4em;} td p.tinkle {color: #033; font-size: 1.4em;} td p.lastTinkleViewed {border-top: 2px solid red;} #cyclestreets-content td p.tinkleTime a {color: #ccc; font-size: small; border-bottom: none; text-decoration: none;} div#characterCountdown {color: #603; font-size: 1.4em; padding: 0.2em; float: right;} /* Legend */ #cyclestreets-content #legendContainer {position: absolute; top: 10px; right: 65px; z-index: 100;} #cyclestreets-content #legendContainer .ui-widget-header {margin: 4px 10px;} #cyclestreets-content #legendContainer table li {padding-left: 0; margin-left: 0;} #cyclestreets-content #legendContainer table li div {display: inline-block; width: 32px; text-align: center;} #cyclestreets-content #legendItems {-webkit-column-count: 3; column-count: 3;} /* Nearby page */ #cyclestreets-content.photomapListings div.nearbymainphoto {float: left; width: 95%; margin: 1em 1.4em 0.2em 0; padding: 1em; background-color: #f7f7f7; border: 1px solid #888; border-width: 1px 0;} #cyclestreets-content.photomapListings div.nearbymainphoto p.comment {margin: 0.2em 0 1.4em;} #cyclestreets-content.photomapListings div.nearbymainphoto div.image {float: left; text-align: center; margin-right: 15px; margin-bottom: 2em;} #cyclestreets-content.photomapListings div.nearbymainphoto p.caption {text-align: left;} p#itineraryjourneynumber {font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.1em;} /* Itinerary debugging */ p#debugging {text-align: right;} /* Photo listings */ div.photolisting div.photo {float: left; width: 45%; height: 180px; margin: 1em 1.4em 0 0; padding: 0.8em; background-color: #f7f7f7; border: 1px solid #888; border-width: 1px 0} div.photolisting div.photo:hover {background-color: #f3f3f3; border-color: gray;} div.photolisting div.image {float: left; text-align: center; margin-right: 15px; min-height: 160px; max-width: 180px;} div.photolisting div * {background-color: transparent;} div.photolisting div.image img {border: 1px solid gray;} div.photolisting div.image p.colophon {font-style: italic; margin: 2px 0 0; float: left; font-size: 0.82em;} div.photolisting div.image p.rating {font-size: 0.83em; margin: 2px 0 0; text-align: right; color: #bbb;} div.photolisting p.caption {text-align: left;} div.photolisting.upright div.photo {width: 21%; height: 357px; margin-right: 0.9em;} div.photolisting.upright div.image {float: none;} #cyclestreets-content.photomapListings h2.recent {clear: both; padding-top: 40px;} #cyclestreets-content.photomapListings div.fadeout {opacity: 0.3;} #cyclestreets-content.photomapListings div.highlight, #cyclestreets-content.photomapListings div.highlight:hover {border-color: red; background-color: pink;} #cyclestreets-content.photomapListings form#photooftheday {padding-top: 0.2em;} /* IE8+ accelerator for Photomap search page when using IE */ #cyclestreets-content.photomapListings p.accelerator {text-align: right;} /* GPS tracks */ #cyclestreets-content.userProfiles #gpstracksmap {clear: right; margin-top: 20px; width: auto; height: 400px;} #cyclestreets-content.userProfiles table.gpstracks {width: 99%;} #cyclestreets-content.userProfiles table.gpstracks tr.active td {background-color: #e0e6fe;} #cyclestreets-content.userProfiles table.gpstracks tr td:first-child {width: 65px; padding-left: 25px;} #cyclestreets-content.userProfiles table.gpstracks tr td:nth-child(2) {width: 150px;} #cyclestreets-content.userProfiles table.gpstracks td.map .map {width: 400px; height: 250px;} /* Feedback section */ #cyclestreets-content.feedback p#feedbacknumber {float: right;} #cyclestreets-content.feedback div.feedbackbox {margin: 1.5em 0;} #cyclestreets-content.feedback div.feedbackbox p.timestamp {float: right; font-size: 0.87em; color: #777; font-style: italic;} #cyclestreets-content.feedback div.feedbackbox p.statuslabels span {border: 2px solid #ddd; color: #999; padding: 4px 13px; margin: 10px 5px 10px 0; font-size: 0.74em; text-transform: uppercase;} #cyclestreets-content.feedback div.feedbackbox blockquote {margin-top: 20px;} #cyclestreets-content.feedback div.feedbackbox p span {color: #aaa; margin-right: 0.5em;} #cyclestreets-content.feedback div.feedbackbox table.submitter {max-width: 58%;} #cyclestreets-content.feedback div.feedbackbox table.submitter td:first-child {white-space: nowrap; text-align: right; color: #777; padding-right: 10px;} #cyclestreets-content.feedback div.feedbackbox div.metadata {width: 40%; float: right;} #cyclestreets-content.feedback div.feedbackbox div.metadata p {color: #777; margin: 4px 0;} #cyclestreets-content.feedback div.feedbackbox a.permalink {color: #999; margin-left: 10px;} #cyclestreets-content.feedback div.feedbackbox tr.suggestedItineraryId td {padding-bottom: 50px;} #cyclestreets-content.feedback div.feedbackbox.internal blockquote.response, #cyclestreets-content.userProfiles div.feedbackbox.internal blockquote.response {border-color: yellowgreen;} #cyclestreets-content.feedback table.feedbacks {width: 99%; font-size: 0.87em;} #cyclestreets-content.feedback table.feedbacks tr td {min-height: 60px; max-height: 200px;} #cyclestreets-content.feedback table.feedbacks tr td, #cyclestreets-content.feedback table.feedbacks tr th {padding-right: 15px;} #cyclestreets-content.feedback table.feedbacks tr.active td {background-color: #e0e6fe;} #cyclestreets-content.feedback table.feedbacks tr td:first-child {width: 80px;} #cyclestreets-content.feedback table.feedbacks tr td p:first-child {margin-top: 0;} #cyclestreets-content.feedback table.feedbacks td.map {max-width: 200px;} #cyclestreets-content.feedback table.feedbacks td.map .map {height: 200px;} #cyclestreets-content.feedback table.feedbacks td.id a {padding: 3px 5px;} #cyclestreets-content.feedback table.feedbacks td.map {width: 400px;} #cyclestreets-content.feedback table.feedbacks td.type {max-width: 50px;} #cyclestreets-content.feedback table.feedbacks td.comments {max-width: 200px;} #cyclestreets-content.feedback table.feedbacks td.response {max-width: 200px;} #cyclestreets-content.feedback table.feedbacks p.metadata {color: gray; margin-top: 0; margin-bottom: 5px;} #cyclestreets-content.feedback table.feedbacks p.metadata:last-child {margin-bottom: 15px;} #cyclestreets-content.feedback table.feedbackerlocations {width: 99%; table-layout: fixed;} #cyclestreets-content.feedback table.feedbackerlocations td.key {width: 30%;} #cyclestreets-content.feedback table.feedbackerlocations td.value .map {width: 400px; height: 250px;} #cyclestreets-content.feedback table.feedbackerlocations td.value #map {height: 450px;} div.feedbackbox {margin: 30px 0 30px;} div.feedbackbox blockquote.noresponse {color: gray; border-color: #bbb; opacity: 0.35;} div.feedbackbox blockquote.noresponse.triangle-border.top:before {border-color: #bbb transparent;} /* http://nicolasgallagher.com/pure-css-speech-bubbles/demo/default.css */ .triangle-border { position:relative; padding:10px; margin:1em 0 3em; border:5px solid #aaa; color:#333; /* css3 */ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; background: linear-gradient(45deg, #fff 0%, #eee 100%); } .triangle-border:before { content:""; position:absolute; bottom:-20px; /* value = - border-top-width - border-bottom-width */ left:40px; /* controls horizontal position */ border-width:20px 20px 0; border-style:solid; border-color:#aaa transparent; /* reduce the damage in FF3.0 */ display:block; width:0; } /* creates the smaller triangle */ .triangle-border:after { content:""; position:absolute; bottom:-13px; /* value = - border-top-width - border-bottom-width */ left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */ border-width:13px 13px 0; border-style:solid; border-color:#fff transparent; /* reduce the damage in FF3.0 */ display:block; width:0; } .triangle-border.top { background: #fff; border-color: #5a8f00; } /* creates the larger triangle */ .triangle-border.top:before { top:-20px; /* value = - border-top-width - border-bottom-width */ bottom:auto; left:auto; right:40px; /* controls horizontal position */ border-color: #5a8f00 transparent; border-width:0 20px 20px; } /* creates the smaller triangle */ .triangle-border.top:after { top:-13px; /* value = - border-top-width - border-bottom-width */ bottom:auto; left:auto; right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */ border-width:0 13px 13px; } /* Pop-up bubbles within a Dynamic Photomap -style display */ /* #!# Some of these probably unused now */ .photobubble {min-height: 202px;} .photobubble.preview {min-width: 300px; width: auto; min-height: 200px;} .photobubble p.peekimage {min-height: 225px; /* 0.75 * iconmapPhotoSize */} .photobubble #cyclestreets-content p.peekimage a {border: 1px solid white;} /* #!# Still has a wierd padding effect though at the bottom */ .photobubble #cyclestreets-content p.peekimage a:hover {border-color: gray;} .photobubble p.caption { max-height: 6em; overflow: auto;} .placeholderbubble {width: 335px; min-height: 81px;} .placeholderbubble.preview {min-width: 200px; width: auto; min-height: 150px;} .placeholderbubble p.caption { max-width: 12em; max-height: 12em; overflow: auto;} /* Pop-up bubbles within a Journey Planner places display */ .journeyplacesbubble {width: 350px; height: 300px;} .journeyplacesbubble #streetviewpanel {width: 100%; height: 200px; border: 1px solid #e7e7e7;} .journeyplacesbubble p.websitelink {margin: 0 0 0 20px; float: right;} /* POI links above the journey planner panel */ p#poilinks {font-size: 0.73em; padding: 0; margin: 0 0 6px;} #cyclestreets-content p#poilinks a {text-decoration: none; border: 1px solid #eee; padding: 0 7px; margin-left: 5px;} #cyclestreets-content p#poilinks a:hover, #cyclestreets-content p#poilinks a.selected {border: 1px solid #888; background-color: #f2f2f2;} /* Workshop page */ #cyclestreets-content.workshop div.workshop { border: 1px dashed gray; padding: 1em;} #cyclestreets-content.utility div.workshop { border: 1px dotted gray; padding: 1em;} #cyclestreets-content .map.multiplemaps {height: 400px;} /* Photomap tabs */ ul.photomaptabs {clear: right;} /* Photomap/locate header */ /* #!# Some of these divs are probably not necessary and could be replaced with #cyclestreets-content.photomap/locate hierarchy */ #photomapheader {height: 3.5em; margin-bottom: 2em;} #photomapheader h1 {margin-top: 0; float: left;} #photomapheadercolophon {width: 75%; float: right; margin-left: 1em;} #photomapheadercolophon p, p#markerexplanation {margin: 0 0 5px; color: #666;} #photomapheadercolophon p img {vertical-align: middle;} #photomapheader ul.actions li {font-weight: bold; margin-bottom: 3px;} #photomapheader ul.actions li#mainactions-view {background-color: yellow;} #photomapheader ul.actions li {float: left; margin-left: 4px;} #photomapheader ul.actions li a {width: 145px;} #cyclestreets-content.photomapView #photomapheader, #cyclestreets-content.photomapLocate #photomapheader {height: auto; margin-bottom: 0;} #cyclestreets-content.photomapView div#streetViewPhotomap {height: 300px;} /* Other map providers shown beneath the map */ #cyclestreets-content ul#providerlinks {display:inline; list-style:none; margin:0;padding:0; font-size:0.8em;} #cyclestreets-content ul#providerlinks li {display: inline; margin: 0; padding: 0;} /* Photomap pages */ #mapcolophon.unset {background-color: yellow;} #mapcolophon.set {background-color: white; visibility: hidden;} p#editing, p#utilities {font-size: 0.8em;} p#mapcolophon, p#markerexplanation {margin: 0; font-size: 0.83em;} #cyclestreets-content p#mapcolophon a, #cyclestreets-content p#utilities a, #cyclestreets-content p#copyright a {border: 0;} #cyclestreets-content p#utilities a.copyright {margin-right: 2em;} #cyclestreets-content p#editing a {border: 1px solid #bbb; padding: 2px 4px 4px; -moz-border-radius: 2px;} #cyclestreets-content p#editing a:hover {background-color: #eee;} #cyclestreets-content p#editing a.delete:hover {background-color: #FF6D6D; color: black;} #cyclestreets-content p#editing img {vertical-align: middle;} #cyclestreets-content div.caption {text-align: justify; color: #900;} /* Placeholder */ #cyclestreets-content.photomapAdd #mapContainer #map {height: 300px;} /* Photomap prioritisation system */ #cyclestreets-content.prioritisation div.organisationsjumplist {float: right;} #cyclestreets-content.prioritisation table.categoryselection td.type {width: 250px; text-align: right; padding-right: 15px;} #cyclestreets-content.prioritisation table.categoryselection td.type h3 {font-size: 1.7em; margin-top: 0; padding-top: 5px; margin-bottom: 0; padding-bottom: 5px; text-align: right;} #cyclestreets-content.prioritisation table.categoryselection td.type img.prioritisationicon {border: 0; float: right; padding: 0; margin: 10px 0 0 10px;} #cyclestreets-content.prioritisation table.categoryselection td.type ul {list-style: none; padding: 0; margin: 0; margin-right: 60px;} #cyclestreets-content.prioritisation table.categoryselection td.type ul li {margin-top: 3px;} #cyclestreets-content.prioritisation p.largesubmit {margin-top: 1em;} #cyclestreets-content.prioritisation p.largesubmit input {font-size: 1.6em;} #cyclestreets-content.prioritisation table.prioritisation td {border-top: 2px solid #ccc; padding-top: 12px; padding-bottom: 12px;} #cyclestreets-content.prioritisation table.prioritisation {margin-top: 2em; border-bottom: 2px solid #ccc; background-color: white;} #cyclestreets-content.prioritisation p.key {text-align: left;} #cyclestreets-content.prioritisation p.key span {font-size: 1.4em;} #cyclestreets-content.prioritisation p.key span.annotated {color: #dee9ff;} #cyclestreets-content.prioritisation table.editing tr.annotated, #cyclestreets-content.prioritisation table.editing tr.duplicate, #cyclestreets-content.prioritisation table.editing tr.bogus {background-color: #dee9ff;} #cyclestreets-content.prioritisation p.key span.duplicate {color: #ddd;} #cyclestreets-content.prioritisation table.prioritisation tr.duplicate td, #cyclestreets-content.prioritisation table.prioritisation tr.bogus td {opacity: 0.6;} #cyclestreets-content.prioritisation table.prioritisation tr.duplicate td, #cyclestreets-content.prioritisation table.prioritisation tr.bogus td {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); -moz-opacity: 0.6;} /* Vendor specific implementations of opacity */ #cyclestreets-content.prioritisation p.key span.resolved {color: #cfffb7;} #cyclestreets-content.prioritisation table.prioritisation th {padding-bottom: 12px; background-color: #f7f7f7;} #cyclestreets-content.prioritisation table.prioritisation th abbr {border-bottom: 1px dotted #999;} #cyclestreets-content.prioritisation table.prioritisation tr td.id a {font-weight: bold;} #cyclestreets-content.prioritisation table.prioritisation tr td.id span.date {font-size: 0.9em; color: #777;} #cyclestreets-content.prioritisation table.prioritisation tr td.scores p.desirability {margin-top: 2px;} #cyclestreets-content.prioritisation table.prioritisation tr td.caption p {padding: 0; margin: 0 0 5px; font-size: 0.9em;} #cyclestreets-content.prioritisation table.prioritisation tr td.id span.email a, #cyclestreets-content.prioritisation table.prioritisation tr td.caption a, #cyclestreets-content.prioritisation table.prioritisation tr td.location a {border-bottom: 0;} #cyclestreets-content.prioritisation table.prioritisation tr td.resolved {background-color: white;} #cyclestreets-content.prioritisation table.prioritisation tr.duplicate td.resolved {background-color: #eee;} #cyclestreets-content.prioritisation table.prioritisation tr.resolved td.resolved {background-color: #cfffb7;} #cyclestreets-content.prioritisation table.prioritisation td label {display: none;} /* This is rather brittle if ultimateForm gives better support for label. Replace with a td:last-child class when CSS browser support better soon */ #cyclestreets-content.prioritisation table.prioritisation td.caption p {width: 200px; overflow: hidden;} #cyclestreets-content.prioritisation table.listing td.score {font-weight: bold;} /* #cyclestreets-content.prioritisation .ultimateform table.prioritisation td.scores p.status select {color: black;} #cyclestreets-content.prioritisation .ultimateform table.prioritisation td.scores p.status option[value=unconsidered] {color: gray;} */ /* #!# This doesn't work when selected */ #cyclestreets-content.prioritisation table.prioritisation td.scores p.status option[value=investigating] {background-color: orange;} #cyclestreets-content.prioritisation table.prioritisation td.scores p.status option[value=approved] {background-color: mediumseagreen; color: white;} #cyclestreets-content.prioritisation table.prioritisation td.scores p.status option[value=improved] {background-color: green; color: white;} #cyclestreets-content.prioritisation table.prioritisation td.scores p.status option[value=rejected] {background-color: #c99; color: white;} #cyclestreets-content.prioritisation h1 {margin-bottom: 1.3em;} #cyclestreets-content.prioritisation div.organisationsjumplist {position: relative; top: -7px;} #cyclestreets-content.prioritisation div.categoryjumplistcontainer {float: right;} #cyclestreets-content.prioritisation p#editablemarkertext {color: #603; margin-top: 2em; font-weight: bold; font-size: 1.2em;} #cyclestreets-content.prioritisation p#editablemarkertext a.editablemarkerlinkdisabled {color: #ccc;} #cyclestreets-content.prioritisation p.maplink {float: right; font-size: 0.92em; clear: right; margin-top: 0.7em; margin-bottom: 0; padding: 0;} #cyclestreets-content.prioritisation p.maplink img {vertical-align: middle;} #cyclestreets-content.prioritisation p.maplink a {border: 0;} /* Pagination */ div.pagination {margin: 1em;} div.pagination ul.pages {text-align: center; font-size: 0.85em; margin: 0; padding: 0;} div.pagination ul.pages li {list-style: none; margin: 0 0 0 0.5em; padding: 0 0 0 0.75em; display: inline; border-left: 1px solid #778;} div.pagination ul.pages li:first-child {border-left: 0;} ul.resultSet {float: right; margin-top: -1.5em; padding: 0; width: 250px;} ul.resultSet li {display: inline;} ul.resultSet li div.jumplist, ul.resultSet li form {display: inline;} ul.resultSet img {width: 16px; border: 0; vertical-align: middle;} #cyclestreets-content ul.resultSet li a {border-bottom: 0;} /* Clearance */ div.clearboth {clear: both;} /* Network browser */ #cyclestreets-content.networkBrowser #mapContainer div.detail { float: left; width: 22em; } #cyclestreets-content.networkBrowser #mapContainer #locationfinder {left: calc(22em + 50px);} #cyclestreets-content.networkBrowser #mapContainer #statusIndicatorId {position: absolute; right: 5px; bottom: 5px; z-index: 41; background-color: white; opacity: 70%;} /* Location page */ #cyclestreets-content.photomapView #mapContainer #map, #cyclestreets-content.photomapLocate #mapContainer #map {height: 360px;} #cyclestreets-content.photomapView div.locatedPhoto {width: 640px;} /* Profiles area */ #cyclestreets-content.userProfiles h1 span {color: gray; font-size: 0.5em; font-style: italic; margin-left: 8px;} #cyclestreets-content.userProfiles ul.tabs li span.private a {border-style: dashed;} #cyclestreets-content.userProfiles table.userdetails td.actions a {font-size: 0.83em; margin-left: 20px;} #cyclestreets-content.userProfiles div.contentbox {border: 1px solid #ccc; padding: 10px 12px; clear: left; width: 95%; margin-bottom: 20px;} #cyclestreets-content.userProfiles div.contentbox.halfwidth {width: 45%; float: left; margin-right: 2%; height: 200px; clear: none;} #cyclestreets-content.userProfiles div.contentbox.private {border: 1px dashed #ccc;} #cyclestreets-content.userProfiles div.contentbox p.private {float: right; text-transform: uppercase; color: #bbb; margin: 0; font-size: 0.75em; position: relative; top: -6px; right: -6px;} #cyclestreets-content.userProfiles div.contentbox h3 {margin-top: 15px; color: #a60101;} #cyclestreets-content.userProfiles div.contentbox p.fullpagelink {clear: right; float: right;} #cyclestreets-content.userProfiles div.contentbox h3 a {color: #a60101; text-decoration: none; border: 0;} #cyclestreets-content.userProfiles .settingsform form table {width: 900px; margin-top: 30px;} #cyclestreets-content.userProfiles .settingsform tr td {padding-bottom: 20px;} #cyclestreets-content.userProfiles .settingsform tr.listPhotos td, #cyclestreets-content.userProfiles .settingsform tr.listJourneys td {padding-bottom: 6px;} #cyclestreets-content.userProfiles .settingsform td.title {width: 275px; padding-right: 15px;} #cyclestreets-content.userProfiles .settingsform p.formmaplabel {text-align: right; float: left; width: 275px; margin-top: 2px;} #cyclestreets-content.userProfiles .settingsform tr.longitude, #cyclestreets-content.userProfiles .settingsform tr.latitude, #cyclestreets-content.userProfiles .settingsform tr.zoom {display: none;} #cyclestreets-content.userProfiles .settingsform #locationfinder p {font-size: 0.83em;} #cyclestreets-content.userProfiles .settingsform p#mapcolophon {display: none;} #cyclestreets-content.userProfiles .settingsform #mapContainer, #cyclestreets-content.userProfiles .settingsform p.maphelptext {width: auto; margin-left: 295px;} #cyclestreets-content.userProfiles .settingsform #mapContainer #map {height: 300px;} #cyclestreets-content.userProfiles .settingsform #mapContainer #map .mapkey {display: none;} #cyclestreets-content.userProfiles table.privileges h3 {margin: 0; padding: 0; font-size: 1.3em;} /* Photo metadata view */ /* #!# Audit this section - not all seem to be used */ #cyclestreets-content.photomapView #details, #cyclestreets-content.photomapLocate #details, #cyclestreets-content.photomapAdd #details {float: right; width: 270px; margin-left: 20px;} #cyclestreets-content.photomapView #details #mapContainer, #cyclestreets-content.photomapLocate #details #mapContainer, #cyclestreets-content.photomapAdd #details #mapContainer {width: 100%;} /* Only necessary for IE */ #cyclestreets-content.photomapView table.metadata td {font-size: 0.83em; padding: 4px 0;} #cyclestreets-content.photomapView table.metadata td:first-child {width: 90px;} /* Photo metadata update */ /* #!# Use of hiding here is very hacky - script shouldn't be generating some of these fields */ .photometadata .longitude, .photometadata .latitude, .photometadata .zoom, .photometadata .basemap, .photometadata .masterLocationId {display: none;} #cyclestreets-content.photomapLocate .photometadata td.title {width: 29%;} #cyclestreets-content.photomapLocate .photometadata h3 {margin: 1em 0 0.5em;} /* #!# unused? */ #cyclestreets-content.photomapLocate .photometadata td.description {color: gray; width: 20%; font-size: 0.9em;} #cyclestreets-content.photomapLocate .photometadata #locaterform_datetime_time {width: 70px;} #cyclestreets-content.photomapLocate .photometadata .bearing input {width: 15px;} #cyclestreets-content.photomapLocate .photometadata .bearing label {display: inline-block; width: 1.1em;} #details .ultimateform .basemap {display: none;} #cyclestreets-content.photomapLocate .photometadata h3 {border: 0;} /* #!# unused? */ /* Make whole rows of tables clickable.*/ /* https://developer.mozilla.org/en/Giving_%27cursor%27_a_Hand A script adds wholeRowClickable where any of the row cells is linked. */ table.hover tr.wholeRowClickable:hover {background-color: #eaf5fd; cursor: pointer; cursor: hand;} /* Notification bar */ #notificationbar {display: none; position: fixed; top: 0; left: 0; width: 100%; z-index: 105; text-align: center; font-weight: bold; font-size: 100%; color: #666; padding: 10px 0 10px 0; background-color: #f4a83d; border-bottom: #d6800c;} #notificationbar p {text-align: center; width: 95%; float: left; padding: 0; margin: 0;} #notificationbar p a {color: #444;} #notificationbar a.close-notify {white-space: nowrap; float: right; margin-right: 10px; color: #fff; text-decoration: none; border: 2px #fff solid; padding-left: 3px; padding-right: 3px;} #notificationbar a.close-notify:hover {border-bottom: 2px #fff solid; /* i.e. no change */ background-color: gray;} /* Edit Network Page */ form select#displayed_paths { width: 30em;} form select#displayed_paths option { width: 30em;} form select#displayed_paths optgroup { width: 30em;} /* Table Row Form */ .formCompletion { text-align: center; font-weight: bold; } .formCompletion span {background: #caff70; padding: 0.2em;} /* location line */ #cyclestreets-content.selectData p.locationline {font-style: italic; font-size: 0.85em; margin: 0;} div.privileged { float: right; color: #555; background-color: #faf0f0; font-size: 0.85em; padding: 0.4em; text-align: right; border: 3px solid #eae0e0; margin-left: 7px;} /* Photomap listings */ #cyclestreets-content.photomapListings dl.portal dt {font-weight: bold; margin: 1.2em 0 0.6em; border-top: 1px solid #ddd; padding-top: 1em; padding-left: 1em;} #cyclestreets-content.photomapListings dl.portal dd {padding-left: 2em;} /* Photomap tags */ #cyclestreets-content.photomapListings ul.tagcloud {margin: 0; padding: 0; padding: 15px; border: solid 1px #eee; background: #f7f7f7; text-align: center;} #cyclestreets-content.photomapListings ul.tagcloud li {padding: 10px 15px; display: inline; line-height: 1.4em;} #cyclestreets-content.photomapListings ul.tagcloud li a {white-space: nowrap;} #cyclestreets-content.photomapListings ul.tagcloud li.tagcloud1 {font-size: 75%;} #cyclestreets-content.photomapListings ul.tagcloud li.tagcloud2 {font-size: 90%;} #cyclestreets-content.photomapListings ul.tagcloud li.tagcloud3 {font-size: 130%;} #cyclestreets-content.photomapListings ul.tagcloud li.tagcloud4 {font-size: 150%;} #cyclestreets-content.photomapListings ul.tagcloud li.tagcloud5 {font-size: 190%;} #cyclestreets-content.photomapListings ul.tagcloud li span {font-size: 80%;} /* Browse table */ table.browse th {min-width: 5em; white-space: nowrap;} table.browse td.photoname img {border: 1px solid gray;} #cyclestreets-content.views table.browse th.datetime {width: 10em;} /* numeric cells */ table th.numeric, table td.numeric {text-align: right;} /* Table hover class to add background color on mouse tracking - IE6 doesn't yet support */ table.hover tr:hover {background-color: #eaf5fd;} table.hover tr.selected:hover {background-color: #cac5cd;} table.hover tr.headings:hover {background-color: #f0f0f1;} /* Table stripeing */ table.browse th {background: #f0f0f1;} table.browse tr:nth-child(odd) {background: #f4f4f7;} /* Added by library.js */ table.browse tr.selected {background:#dae5ed;} table.browse tr.blushed.selected {background:#d6e2eb;} /* Area page */ #cyclestreets-content.cityPages ul.areas li.add {margin-top: 7px;} #cyclestreets-content.cityPages p.otherareas {clear: both; margin-top: 2em; float: right; margin-right: 10em;} #cyclestreets-content.cityPages table.splitlist {width: 90%;} #cyclestreets-content.cityPages table.splitlist ul li {font-size: 0.93em;} /* Control panel */ #cyclestreets-content.admin div.controlpanel table td.title {width: 15em;} /* Features/getinvolved pages */ #cyclestreets-content.features div.ideabox, #cyclestreets-content.apiDocumentation div.ideabox, #cyclestreets-content.basicPages div.ideabox {width: 45%; margin: 0 20px 20px 0;} div.ideabox {height: 120px; float: left; background-color: #f9f9f9; border: 1px solid #e7e7e7; border-right-width: 2px; border-bottom-width: 2px; border-right-color: #ddd; border-bottom-color: #ddd; padding: 10px;} div.ideabox:hover {background-color: #f4f4f4;} div.ideabox img {margin-top: 10px; float: left; width: 200px; height: 100px; border: 1px solid #bbb;} div.ideabox h2, div.ideabox h3 {margin-top: 2em; margin: 0 0 10px 220px; font-size: 1.35em; padding: 0;} div.ideabox h3 {font-size: 1.2em;} #cyclestreets-content div.ideabox h3 a {color: #786e4e;} div.ideabox p {margin: 12px 0 0 220px; color: gray;} #cyclestreets-content.apiDocumentation div.private {border-style: dashed;} #cyclestreets-content.apiDocumentation div.private p.private {float: right; text-transform: uppercase; color: #bbb; margin: 0; font-size: 0.75em; position: relative; top: -6px; right: -6px;} #cyclestreets-content.basicPages table.customapps {border-spacing: 0 30px;} #cyclestreets-content.basicPages table.customapps td {padding: 20px 5px 20px 20px;} #cyclestreets-content.basicPages table.customapps td.screenshots {width: 550px;} #cyclestreets-content.basicPages table.customapps td img {width: 250px; height: 444px; margin-left: 10px; margin-right: 10px; box-shadow: 5px 5px 15px #999;} #cyclestreets-content.basicPages table.customapps h3 {margin-top: 0; padding-top: 0;} /* Features */ #cyclestreets-content.features div.gallerylist {overflow: auto;} #cyclestreets-content.features div.gallerybox {width: 48%; margin: 0 16px 16px 0; overflow: hidden;} #cyclestreets-content.features div.gallerybox {opacity: 0.999; height: 110px; float: left; background-color: #f9f9f9; border: 1px solid #e7e7e7; border-right-width: 1px; border-bottom-width: 1px; border-right-color: #ddd; border-bottom-color: #ddd; padding: 0px;} #cyclestreets-content.features div.gallerybox:hover {opacity: 0.75} #cyclestreets-content.features div.gallerybox div.crop {width: 225px; height: 110px; overflow: hidden; float: left; margin: 0 7px 0 0;} #cyclestreets-content.features div.gallerybox div.crop img {width: 225px; height: auto; margin: 0 20px 0 0; border: 0;} #cyclestreets-content.features div.gallerybox div.imageblur {position: absolute; z-index: -1; width: 225px; height: 110px; overflow: hidden; float: left; margin: 0 0 0 225px;} #cyclestreets-content.features div.gallerybox div.imageblur img {width: 300px; height: auto; margin: 0; border: 0;} #cyclestreets-content.features div.gallerybox div.imageblur img {-webkit-filter: blur(2px); filter: blur(2px); opacity: 0.13} #cyclestreets-content.features div.gallerybox h2, #cyclestreets-content.features div.gallerybox h3, #cyclestreets-content.features div.gallerybox p {margin: 6px 9px 9px 9px;} #cyclestreets-content.features div.gallerybox h3 {color: #635c46; text-align: center;} #cyclestreets-content.features div.gallerybox p {color: #333; text-align: center;} /* API documentation */ #cyclestreets-content.apiDocumentation ul.tabs li div.jumplist {display: inline; margin-right: 2em; margin-bottom: 0;} #cyclestreets-content.apiDocumentation ul.tabs li div.jumplist select {margin-bottom: 0;} #cyclestreets-content.apiDocumentation h2 a {color: #ddd; font-size: 0.87em;} #cyclestreets-content.apiDocumentation h3 {margin-top: 2em; color: #603; padding-bottom: 3px; border-bottom: 1px solid #ccc;} #cyclestreets-content.apiDocumentation .ideabox h3 {margin-top: 0; padding-bottom: 0; border: 0;} #cyclestreets-content.apiDocumentation .ideabox p {font-size: 0.9em;} #cyclestreets-content.apiDocumentation table td, #cyclestreets-content.apiDocumentation table th {padding: 1.2em;} #cyclestreets-content.apiDocumentation div.ideabox img {margin-top: 4px;} #cyclestreets-content.apiDocumentation ul.tabs li div.jumplist {display: inline; margin-right: 2em; margin-bottom: 0;} #cyclestreets-content.apiDocumentation div.ideabox div.imageblock {float: left; width: 200px; min-height: 102px;} #cyclestreets-content.apiDocumentation div.ideabox div.imageblock img {float: none; height: 100px; border: 1px solid #bbb;} #cyclestreets-content.apiDocumentation div.ideabox div.imageblock img.miniicon {float: left; height: 12px; width: 12px; border: 0;} #cyclestreets-content.apiDocumentation div.ideabox div.imageblock p {text-transform: uppercase; color: #bbb; margin: 0; margin-top: 3px; padding: 0; font-size: 0.75em;} /* Commenting system */ .usercomments p.addreply {} .usercomments div.usercomment {border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 5px; margin: 0 0 1em;} .usercomments div.usercomment p.colophon {padding-top: 0; margin-top: 0;} .usercomments div.usercomment p.addreply {text-align: right; font-size: 0.74em; margin-bottom: 0; padding-bottom: 0;} .usercomments div.usercomment p.author {background-color: #ffffce;} .usercomments div.usercomment.depth1 {margin-left: 0;} .usercomments div.usercomment.depth2 {margin-left: 1.5em;} .usercomments div.usercomment.depth3 {margin-left: 3em;} .usercomments div.usercomment.depth4 {margin-left: 4.5em;} .usercomments div.usercomment.depth5 {margin-left: 6em;} /* Mobile */ #cyclestreets-content.mobilePage table.apps td h3 {margin-top: 7px; padding-top: 0; font-size: 1.3em;} #cyclestreets-content.mobilePage #cyclestreets-content table.apps td h3 a {color: #786e4e;} #cyclestreets-content.mobilePage table.apps td:first-child {width: 200px; padding-right: 12px;} #cyclestreets-content.mobilePage table.apps td:first-child div {float: right;} #cyclestreets-content.mobilePage div.artwork {position: relative;} #cyclestreets-content.mobilePage div.artwork > span.mask {background: url(../../../images/mobile/mask175.png) no-repeat 0px 0px; display: block; height: 179px; left: -1px; position: absolute; top: 0px; width: 177px; z-index: 1;} #cyclestreets-content.mobilePage tr.thirdparty div.artwork > span.mask {background-image: url(../../../images/mobile/mask117.png); width: 119px; top: -1px;} #cyclestreets-content.mobilePage #iphone h1 sup {font-size: 12px;} #cyclestreets-content.mobilePage #iphone img.iphone {background-color: white; margin-left: 0;} #cyclestreets-content.mobilePage #iphone p, #cyclestreets-content.mobilePage #iphone td {font-size: 0.87em;} #cyclestreets-content.mobilePage #iphone table.funders {width: 400px; margin-top: 20px;} #cyclestreets-content.mobilePage #iphone table.funders td.key {padding: 10px 15px 10px 0; text-align: right; width: 100px;} #cyclestreets-content.mobilePage #iphone p.caption {text-align: right; color: #666;} #cyclestreets-content.mobilePage #iphone p img {border-color: #ccc; margin-bottom: 2px; margin-left: 20px;} #cyclestreets-content.mobilePage #iphone p.applecolophon {clear: both; padding-top: 2em;} #cyclestreets-content.mobilePage table.spaced td {padding: 0 15px 20px 0;} #cyclestreets-content.mobilePage table.spacedcaptions img {margin-bottom: 7px;} /* Local Authorities */ /* #!# These appear not to be used */ #cyclestreets-content.localAuthorities table.options tr td {padding-top: 10px; padding-bottom: 20px;} #cyclestreets-content.localAuthorities table.options h3 {padding-top: 0; margin-top: 0; color: #786e4e;} #cyclestreets-content.localAuthorities p.placefordexample {padding: 12px 0;} #cyclestreets-content.localAuthorities a.actions {padding: 10px; background-color: #f7f7f7; color: #603;} #cyclestreets-content.localAuthorities table ul {margin-left: 10px; padding-left: 10px;} #cyclestreets-content.localAuthorities table li {list-style: none;} #cyclestreets-content.localAuthorities table ul li {margin-bottom: 13px;} #cyclestreets-content.localAuthorities table ul ul {margin-left: 15px; padding-left: 15px;} #cyclestreets-content.localAuthorities table ul ul img {width: 12px; height: 12px;} #cyclestreets-content.localAuthorities table ul ul li {margin-bottom: auto;} #cyclestreets-content.localAuthorities blockquote {font-style: italic; border: 1px solid #ddd; padding: 0px 10px; margin: 0 10px 10px 0; background-color: #fcfcfc;} /* Editing */ #cyclestreets-content.edit #locate #mapContainer {float: left; width: 600px;} #cyclestreets-content.edit #locate #editor {width: 100%; height: 640px;} #cyclestreets-content.edit #locate ul.actions li a {width: 270px; border-width: 2px; padding: 10px 5px; margin-top: 10px; font-weight: bold; color: #603; padding-left: 20px; background-color: #f7f7f7; color: #444;} #cyclestreets-content.edit #locate ul.actions li:first-child {color: #603; font-weight: bold;} #cyclestreets-content.edit #merging #mapContainer {width: 550px; height: 550px;} #cyclestreets-content.edit #merging #mapContainer #map {height: 100%;} /* Help */ #cyclestreets-content.help #menu {width: 200px; float: left;} #cyclestreets-content.help #menu ul {padding-left: 0; margin-left: 0; list-style: none;} #cyclestreets-content.help #menu ul ul {padding-left: 5px; margin-left: 5px;} #cyclestreets-content.help #menu ul li.current a {background-color: #eee; padding: 3px 1px; display: block; border-bottom: 1px solid white;} #cyclestreets-content.help #menu ul li.current li a {background-color: white; padding: 0;} #cyclestreets-content.help #content {margin-left: 210px; border-left: 1px solid #eee; padding: 20px; min-height: 650px;} #cyclestreets-content.help #content p.warning {color: #999; margin-bottom: 35px;} #cyclestreets-content.help #content h1 {margin-top: 0; padding-top: 0;} #cyclestreets-content.help table.embedding a img.photo {border-color: #ddd;} #cyclestreets-content.help table.embedding p.highlight {background-color: #eee; padding: 5px 3px} #cyclestreets-content.help table.embedding td:first-child {width: 280px;} #cyclestreets-content.help table.embedding h3 {font-size: 1.4em; margin-top: 0; color: #a60101;} #cyclestreets-content.help table.embedding h3 span {font-size: 0.7em;} #cyclestreets-content.help table.embedding h4 {font-size: 1.2em; margin: 5px 0 5px; padding: 0;} /* Gallery */ div.slideshow {height: 522px;} #cyclestreets-content.galleries #mapContainer {margin: 20px 0;} #cyclestreets-content.galleries div.gallerylist {overflow: auto;} #cyclestreets-content.galleries div.gallerybox {width: 48%; margin: 0 16px 16px 0; overflow: hidden;} #cyclestreets-content.galleries div.gallerybox {opacity: 0.9999; height: 140px; float: left; background-color: #f9f9f9; border: 1px solid #e7e7e7; border-right-width: 1px; border-bottom-width: 1px; border-right-color: #ddd; border-bottom-color: #ddd; padding: 0px;} #cyclestreets-content.galleries div.gallerybox:hover {opacity: 0.7;} #cyclestreets-content.galleries div.gallerybox div.crop {width: 225px; height: 140px; overflow: hidden; float: left; margin: 0 7px 0 0;} #cyclestreets-content.galleries div.gallerybox div.crop img {width: 225px; height: auto; margin: 0 20px 0 0; border: 0;} #cyclestreets-content.galleries div.gallerybox div.imageblur {position: absolute; z-index: -1; width: 451px; height: 140px; overflow: hidden; float: left; margin: 0 0 0 0;} #cyclestreets-content.galleries div.gallerybox div.imageblur img {width: 251px; height: auto; margin: 0 0 0 210px; border: 0;} #cyclestreets-content.galleries div.gallerybox div.imageblur img {-webkit-filter: blur(8px); -moz-filter: blur(7px); filter: blur(7px); opacity: 0.25} #cyclestreets-content.galleries div.gallerybox h2, #cyclestreets-content.galleries div.gallerybox h3, #cyclestreets-content.galleries div.gallerybox p {margin: 5px 9px 9px 9px;} #cyclestreets-content.galleries div.gallerybox h3 {color: #635c46; text-align: center;} #cyclestreets-content.galleries div.gallerybox p {color: #333; text-align: center;} #cyclestreets-content.galleries div.gallerybox img.miniicon {height: 16px; width: 16px; border: 0; float: right; margin: 5px;} #cyclestreets-content.galleries blockquote {border: 1px solid #f2f2f2; padding: 10px; background-color: #f2f2f2; margin-left: 0; margin-right: 0;} /* Overlay, used by collisions */ #cyclestreets-content .geometryDrawingOverlay .activeArea {right: 190px;} .map-tools-overlay {position:absolute;top:0;right:0;height:100%;width:190px;background:rgba(0,0,0,0.8);z-index:95} .map-tools-overlay nav ul {margin:0;padding:0;list-style-type:none;overflow:hidden} .map-tools-overlay nav ul li {list-style-type:none;padding:0;margin:0;border:0;float:left;display:inline} .map-tools-overlay nav ul li a {float:left;display:block} .map-tools-overlay nav ul li a {display:block;color:#e6e6e6;height:80px;width:50px;cursor:pointer;font-weight:bold;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:1px} .map-tools-overlay nav ul li a span {width:50px;height:50px;display:block;border:1px solid #1a1a1a;background:#e6e6e6 url(../../../images/general/geometrydrawing.png) 4px -534px no-repeat;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px} .map-tools-overlay nav ul li a span.area {background-position:4px -534px} .map-tools-overlay nav ul li a span.route {background-position:4px -616px} .map-tools-overlay nav ul li a span.point {background-position:13px -706px} .map-tools-overlay nav ul li a:hover {text-decoration:none} .map-tools-overlay nav ul li a:hover span {background-color:#eee} .map-tools-overlay nav ul li a.current span {-webkit-box-shadow:inset rgba(0,0,0,0.7) 0 0 8px;-moz-box-shadow:inset rgba(0,0,0,0.7) 0 0 8px;box-shadow:inset rgba(0,0,0,0.7) 0 0 8px} .map-tools-overlay .panes {padding:10px} .map-tools-overlay .panes .pane h3,.map-tools-overlay .panes .pane p {color:#e6e6e6} .map-tools-overlay .panes .pane p {display:block;margin-bottom:10px;font-weight:normal;font-size:13px;font-style:italic} .map-tools-overlay ul.undo-clear {margin:0;padding:0;list-style-type:none;overflow:hidden;position:absolute;bottom:10px;left:10px} .map-tools-overlay ul.undo-clear li {list-style-type:none;padding:0;margin:0;border:0;float:left;display:inline} .map-tools-overlay ul.undo-clear li a {float:left;display:block} .map-tools-overlay ul.undo-clear li {float:left;margin-right:10px} .map-tools-overlay ul.undo-clear li a {display:block;width:80px;height:32px;cursor:pointer} .map-tools-overlay ul.undo-clear li a span.txt {color:#e6e6e6;float:right;margin-top:5px;font-weight:bold;font-size:10px;letter-spacing:1px;text-transform:uppercase;text-align:right} .map-tools-overlay ul.undo-clear li a span.icon-undo,.map-tools-overlay ul.undo-clear li a span.icon-clear {float:left;width:30px;height:30px;display:block;border:1px solid #999;background:url(../../../images/general/geometrydrawing.png) 3px -780px no-repeat;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px} .map-tools-overlay ul.undo-clear li a span.icon-clear {background-position:4px -825px} .map-tools-overlay ul.undo-clear li a:hover {text-decoration:none} .map-tools-overlay ul.undo-clear li a:hover span.icon-undo,.map-tools-overlay ul.undo-clear li a:hover span.icon-clear {border:1px solid #e6e6e6} /* Changes from Cyclescape */ .map-tools-overlay nav ul li a span.browse {background-position:4px -357px;} .map-tools-overlay {background: #000; opacity: 0.9;} .map-tools-overlay {-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8;} /* Vendor-specific hacks */ .map-tools-overlay {z-index: 95;} .map-tools-overlay nav ul li a {padding: 6px;} .map-tools-overlay {height: 600px;} /* Same as main #map div - mapContainer currently includes the 'Showing XXX markers' section */ /* Collisions */ #cyclestreets-content.collisions #map .leaflet-control-layers {margin-right: 200px;} #cyclestreets-content.collisions #map .leaflet-popup-content-wrapper {width: 360px; min-height: 80px;} #cyclestreets-content.collisions #map .leaflet-popup-content .placeholderbubble p {margin: 0 0 10px;} body a.leaflet-popup-close-button {border: 0;} #cyclestreets-content.collisions p.introduction {font-size: 1.3em; color: #603; margin-top: 2em; background-color: #f7f7f7; padding: 20px 6px; width: 60%;} /* Collisions - map tools overlay */ #cyclestreets-content.collisions #collisionlocation {clear: right; float: right; width: 300px; background-color: white; padding: 0 0 40px 30px;} #cyclestreets-content.collisions #collisionlocation #map {height: 300px;} #cyclestreets-content.collisions .placeholderbubble a {color: blue;} #cyclestreets-content.collisions .placeholderbubble a:visited {color: purple;} #cyclestreets-content.collisions div#streetViewPhotomap {height: 300px;} #cyclestreets-content.collisions #legendContainer table td.key {text-align: center;} #cyclestreets-content.collisions #legendContainer {right: 255px; z-index: 50;} /* Batch routes */ #cyclestreets-content.batchRoutes #mapContainer .map {height: 200px; width: 280px;} #cyclestreets-content.batchRoutes #mapContainer .map .leaflet-control-attribution {display: none;} #cyclestreets-content.batchRoutes table.jobs tr.otheruser {opacity: 0.5;} #cyclestreets-content.batchRoutes table.jobs a.actions {padding: 2px 3px;} #cyclestreets-content.batchRoutes table.jobs a.actions:hover {background-color: #f7f7f7;} #cyclestreets-content.batchRoutes table.alljobs {clear: right;} #cyclestreets-content.batchRoutes table.alljobs th {background-color: #f7f7f7;} #cyclestreets-content.batchRoutes table.alljobs th, #cyclestreets-content.batchRoutes table.alljobs td {font-size: 0.92em;} #cyclestreets-content.batchRoutes table.alljobs td.id {width: 5em;} #cyclestreets-content.batchRoutes table.alljobs td.name {width: 8em;} #cyclestreets-content.batchRoutes table.alljobs td.editing {width: 10em;} #cyclestreets-content.batchRoutes ul.control li {margin-top: 24px; font-weight: bold;} #cyclestreets-content.batchRoutes ul.control li.terminate a:hover {background-color: red; color: white;} #cyclestreets-content.batchRoutes table.threads a.actions {padding-top: 2px; padding-bottom: 2px;} #cyclestreets-content.batchRoutes table.servers tr.add td {padding-top: 20px; opacity: 0.7;} /* Route networks */ #cyclestreets-content.routeNetworks table.alljobs #mapContainer .map {height: 200px; width: 280px;} #cyclestreets-content.routeNetworks .map-tools-overlay {height: 400px;} #cyclestreets-content.routeNetworks table.alljobs #mapContainer .map .leaflet-control-attribution {display: none;} #cyclestreets-content.routeNetworks table.jobs a.actions {padding: 2px 3px;} #cyclestreets-content.routeNetworks table.jobs a.actions:hover {background-color: #f7f7f7;} /* API key management */ #cyclestreets-content.apiKeyManagement form {width: 700px;} #cyclestreets-content.apiKeyManagement div.usage, #cyclestreets-content.statistics div.usage {width: 180px; height: 400px; overflow: auto; margin-bottom: 1.5em; float: left; margin-right: 2em;} #cyclestreets-content.apiKeyManagement img.chart, #cyclestreets-content.statistics img.chart {border: 1px solid #ddd; padding: 20px;} #cyclestreets-content.apiKeyManagement div.poitypes form {width: auto;} #cyclestreets-content.apiKeyManagement div.poitypes table {table-layout: fixed; width: 100%;} #cyclestreets-content.apiKeyManagement div.poitypes table td {width: 33%; vertical-align: top;} /* Toggle buttons*/ img:hover.toggler { cursor: pointer; border: 1px outset;} /* Highlight hovered photomap icons (not their shadows) by adding a padded background without offsetting the result */ img.leaflet-icon-layer.leaflet-clickable:hover { border: 1px solid whitesmoke; padding: 3px; left: -4px; top: -4px; background-color: rgba(255, 255, 255, 0.7);} /* Tests */ #cyclestreets-content.tests div.contentbox p.title {float: right; text-transform: uppercase; color: #bbb; margin: 0; font-size: 0.75em; position: relative; top: -6px; right: -6px;} #cyclestreets-content.tests div.contentbox span.clear {margin-left: 3em; font-size: 0.83em;} /* Likes */ #likes {margin: 0; float: left; padding-top: 0; margin-top: 0; color: #999; font-size: 0.83em; background-color: #fcfcfc; padding: 2px 6px; border: 1px solid #eee;} #likes.liked {border: 1px solid #999;} #likes form {margin: 0; padding: 0; display: inline;} #likes form input[type='submit'] {border: 0; outline: none; background: url(../../../images/icons/thumb_up.png) no-repeat;} #likes form input {display: inline;} #likes span {padding-left: 3px;} #likes.changed {animation: yellow-fade 2s ease-in 1;} @keyframes yellow-fade { 0% {background: yellow;} 100% {background: none;} } /* Print styles */ @media print { /* Hide unwanted parts */ ul.signin, ul.cyclestreets-tabs, #searchbar, ul.cyclestreets-subtabs, #feedbackpanel, #cyclestreets-footer, p#utilities span.viewfullsize, div.photonumber img, #cyclestreets-content ul#providerlinks, #photomapheadercolophon, ul.photomaptabs, #cyclestreets-content.blog #sidebar {display: none;} /* #!# Seemingly unused */ h4#tabsheading, div.quickNavPanel {display: none;} /* Improve legibility */ body {color: black; background-color: transparent;} /* Hide unwanted parts */ #cyclestreets-menu {width: auto; padding: 0; margin: 0;} #cyclestreets-contentouter {clear: none; width: auto; margin: 0; border: 0; padding: 0;} /* Page break */ .pagebreak { page-break-before: always; } } /* Mobile changes for blog */ @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { body.blog #cyclestreets-menu, body.blog .cyclestreets-subtabs, body.blog #cyclestreets-footer, body.blog #sidebar, body.blog h1, body.blog .description {display: none;} body.blog #cyclestreets-container {width: auto;} body.blog div.post {margin-right: 0;} body.blog img {max-width: 100%;} }