/* GLOBAL */

/* Neutralise rules from third-party stylesheets */
body#cyclestreets-westsussex ul li {background-image: none; background-position: 0% 0%; padding-left: auto;}
body#cyclestreets-westsussex ul#switchabletabs li {padding-left: 2px;}
body#cyclestreets-westsussex p.routedetail {padding: 0;}
body#cyclestreets-westsussex #feedbackpanel table {font-size: 100%;}
body#cyclestreets-westsussex.help #cyclestreets-content ul {margin-bottom: 15px; margin-left: 5px; padding-left: 5px;}
body#cyclestreets-westsussex.help #cyclestreets-content ol {margin-bottom: 20px;}
body#cyclestreets-westsussex.help #cyclestreets-content ul li {margin-left: 5px; padding-left: 5px;}
body#cyclestreets-westsussex.help h3 {margin-top: 1.5em;}
* html body#cyclestreets-westsussex .textContainer {height: 1%;} /* IE6 hack to avoid jog */
*+html body#cyclestreets-westsussex .textContainer {height: 1%;} /* IE7 hack to avoid jog */

body#cyclestreets-bikehub div.left > div.article img {border: 0; padding: 0;}
body#cyclestreets-bikehub ul.sidebar + ul + div > div.left.wide {width: 700px; /* Actually 721 but add padding */}
body#cyclestreets-bikehub h1 {margin-bottom: 10px; clear: none;}
body#cyclestreets-bikehub h2 {clear: none;}
body#cyclestreets-bikehub div.left > div.article ul li, div.left > div.article ol li {background-image: none; padding-left: 2px;}
body#cyclestreets-bikehub .searchform {z-index: 999;}

body#cyclestreets-movingsomersetforward ul li {background: none 0 0 no-repeat;}
body#cyclestreets-movingsomersetforward ul.nobullet li {padding-bottom: 0; margin-left: 0;}
body#cyclestreets-movingsomersetforward #placefindingPanel {width: 200px;}
body#cyclestreets-movingsomersetforward #journeyPlannerPanel.vertical #placefindingPanel #jpStart, body#cyclestreets-movingsomersetforward #journeyPlannerPanel.vertical #placefindingPanel #jpFinish, body#cyclestreets-movingsomersetforward #journeyPlannerPanel.vertical #placefindingPanel #jpGo {width: 185px;}
/* This next one needs fixing better */
body#cyclestreets-movingsomersetforward ul.am_b0-l1 li#am_b0-l1-i54 a.active {background-color: #4c0c22;}

body.cyclistssay ul li {background: none 0 0 no-repeat;}



/* Specific styles for particular sites */

body#cyclestreets-placeford.journeyPlannerPage #itineraryDisplay {width: 430px;}
body#cyclestreets-placeford #cyclestreets-content {position: relative;}
body#cyclestreets-placeford #itinerarytitle ul {position: absolute; left: 450px;}


body#cyclestreets-westsussex.journeyPlannerPage #itineraryDisplay {width: 400px;}
body#cyclestreets-westsussex #journeyPlannerPanel {clear: right;}
body#cyclestreets-westsussex #cyclestreets-content {clear: left; /* Clear needed to standardise starting point after "You are in ..." line between browsers */ position: relative;}
body#cyclestreets-westsussex #locallogo {position: absolute; top: -28px; right: 0; width: 126px; height: 75px;}
body#cyclestreets-westsussex #journeyPlannerPanel {margin-top: 20px; /* Prevent overlap with logo */}
body#cyclestreets-westsussex #mapContainer {margin-right: 230px;}
body#cyclestreets-westsussex.journeyPlannerPage #itineraryDisplay #mapContainer {margin-right: 0;}
body#cyclestreets-westsussex #placefindingPanel {width: 215px;}
body#cyclestreets-westsussex #locallogo {right: 30px;}
body#cyclestreets-westsussex div.helptoc#toc {background-color: #ebf7fc; width: 260px;}
body#cyclestreets-westsussex div.helptoc#toc p {color: #333;}
body#cyclestreets-westsussex div.helptoc#toc a {border-bottom: 1px solid #001777;}
body#cyclestreets-westsussex.help #cyclestreets-content a {color: #001777; border-bottom: 0;}
body#cyclestreets-westsussex p.geolocation a {color: #888;}
body#cyclestreets-westsussex #journeyPlannerPanel.vertical #placefindingPanel ul.quickzoom li a {font-weight: normal; color: black; border-bottom-color: #888;}
body#cyclestreets-westsussex #itineraryMetadata ul li a {color: #001777;}
body#cyclestreets-westsussex #cyclestreets-content #itinerarytitle ul a {color: #001777;}
body#cyclestreets-westsussex #itinerarytitle h1 span {display: block;}
body#cyclestreets-westsussex p#howtouselink {display: block;}
body#cyclestreets-westsussex p#howtouselink a {color: #001777; border-bottom: none;}
body#cyclestreets-westsussex li#choosearoute {color: #333;}
body#cyclestreets-westsussex img#nowplanninganimation, body#cyclestreets-westsussex p#plannedondate {display: none;}

body#cyclestreets-bikehub.journeyPlannerPage #itineraryDisplay {width: 385px;}
body#cyclestreets-bikehub a[target=_blank]:link, body#cyclestreets-bikehub a[target=_blank]:visited {background: none; padding-right: 0; border-bottom: 0;}

body#cyclestreets-movingsomersetforward.journeyPlannerPage #itineraryDisplay {width: 400px;}
* html body#cyclestreets-movingsomersetforward.journeyPlannerPage #itineraryDisplay {width: 320px;}
*+html body#cyclestreets-movingsomersetforward.journeyPlannerPage #itineraryDisplay {width: 360px;} /* IE7 layout hack */
* html body#cyclestreets-movingsomersetforward.journeyPlannerPage #content-area-inner2 div {height: 1%;}
body#cyclestreets-movingsomersetforward #itinerarytitle ul {position: absolute; left: 690px;}


body#cyclestreets-lcc .main-holder #content {width: 957px; background-color: white;}
body#cyclestreets-lcc .main-holder #content h1 {font-size: 2.2em; margin-bottom: 16px; width: 700px;}
body#cyclestreets-lcc .main-holder #content h1 .cufon {line-height: 70px;}
body#cyclestreets-lcc .main-holder #content {position: relative;}
body#cyclestreets-lcc .main-holder #content #itinerarytitle ul {left: 750px;}
body#cyclestreets-lcc .main-holder #content #itineraryMetadata ul li {font-size: 1.2em;}
body#cyclestreets-lcc .main-holder #content #itineraryMetadata h2 {overflow: hidden; margin-bottom: 16px;}
body#cyclestreets-lcc .main-holder #content #itineraryMetadata p.itinerarytext {font-size: 1.2em;}
body#cyclestreets-lcc .main-holder #content #cyclestreets-content p.routedetail a, body#cyclestreets-lcc .main-holder #content #cyclestreets-content p.routedetail a:hover {font-size: 1.2em;}
body#cyclestreets-lcc .main-holder #content #cyclestreets-content #placefindingPanel h3 {font-size: 1.6em;}

body.cyclistssay #content-area-inner2 {min-height: 600px;}
body.cyclistssay #mapContainer {width: 50%; height: 618px; float: right;}
body.cyclistssay #map {height: 512px;}
body.cyclistssay table.mainportal td ul li {margin: 0; padding: 0; font-size: 1.1em; font-weight: bold;}
body.cyclistssay table.mainportal td ul li a {display: block; background-color: #eee; padding: 10px 2px;}
body.cyclistssay ul.selecttype {margin: 10px 0;}
body.cyclistssay ul.selecttype li {margin: 0; padding: 0 0 10px 10px;}
body.cyclistssay ul.selecttype li a {display: block; background-color: #eee; padding: 10px 5px; width: 25em; font-weight: bold; font-size: 1.1em;}


/* Common changes for all placeford-style sites */
body.journeyplanneronly-profile #map .olControlPermalink {display: none;}


/* #!# These camcycle rules all need auditing on an old machine to check if they are still really needed */
body#cyclestreets-camcycle #searchbar input.search {width: 65px;}
*+html body#cyclestreets-camcycle #cyclestreets-content, * html body#cyclestreets-camcycle #cyclestreets-content {clear: right; margin-top: 20px;}	/* IE6 and IE7 hack */
* html body#cyclestreets-camcycle #cyclestreets-content {padding-top: 15px;}	/* IE6 and IE7 hack */
body#cyclestreets-camcycle #cyclestreets-about {width: 550px; padding-left: 0;}
* html body#cyclestreets-camcycle #cyclestreets-about {width: 545px;}
body#cyclestreets-camcycle #cyclestreets-about ul {margin-left: 170px;}
body#cyclestreets-camcycle #journeyplanner.narrow {width: 500px;}
body#cyclestreets-camcycle #journeyplanner.expanded {width: 767px;}
body#cyclestreets-camcycle.home #journeyplanner.narrow #placefindingPanel {width: 175px;}
body#cyclestreets-camcycle.home #journeyplanner.narrow #mapContainer {margin-right: 190px; /* 20px more than the panel width */}
body#cyclestreets-camcycle.home #map {height: 470px;}
body#cyclestreets-camcycle.journeyPlannerPage #itineraryDisplay {width: 490px;}
body#cyclestreets-camcycle div.locatedPhoto {width: 425px;}
body#cyclestreets-camcycle ul.photomaptabs li {font-size: 0.93em;}
body#cyclestreets-camcycle #content ul.signin {height: 80px;}	/* These three lines are emulation of clear: both */
body#cyclestreets-camcycle #content ul.cyclestreets-tabs {clear: right;}
body#cyclestreets-camcycle #cyclestreets-menu {height: 150px;}




/* Layout */
#cyclestreets-menu {height: 5.9em;}
#cyclestreets-content {width: auto; min-height: 400px;}
* html #cyclestreets-content {height: 400px;}	/* Emulation of min-height for IE6 */
#cyclestreets-footer {clear: both; width: auto; margin: 0 auto; padding: 10px 0 50px;}

/* Fonts */
h2, #cyclestreets-content h2 a, #cyclestreets-content h2 a:link, #cyclestreets-content h2 a:visited {color: #786e4e; padding-top: 0.5em;}


/* Global menu */
#cyclestreets-menu #cyclestreets-logo img.logo {border: 0; float: left; margin: 0 34px 0 0;}
/* The minus 40px for margin-right allows the normal flow to carry on uninterrupted by this relatively posistioned element. The logo itself is 40px wide. */
#cyclestreets-menu #cyclestreets-logo img.beta {float: left; position: relative; top: 50px; left: -80px; margin-right: -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 {-webkit-border-radius: 0;} /* Disable border-radius in Safari/Chrome while webkit rendering is so poor */
#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 {display: none;}
#cyclestreets-menu ul.cyclestreets-tabs li a.login {margin-left: 20px;}

#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;}
#cyclestreets-content ul.cyclestreets-subtabs li a {border: 0;}


/* 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: 15px; font-size: 0.83em; line-height: 2em;}
#cyclestreets-menu ul.signin li a {color: gray; text-decoration: none;}
#cyclestreets-menu ul.signin li:last-child {margin-left: 40px; opacity: 0.8;}
#cyclestreets-menu ul.signin li:last-child {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8;}	/* Vendor specific implementations of opacity */

#cyclestreets-menu ul.signin li span.username { font-weight: bold; margin-right: 1em;}

/* 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 */
.home #cyclestreets-about {float: left; width: 603px; padding: 0 15px 2px 22px;}
.home #cyclestreets-about h2 {color: #786E4E; padding: 0 0 10px 0; font-size: 2.05em; line-height: 42px; float: left; margin: 0;}
.home #cyclestreets-about h2 span {background-color: #FFFFFF; color: #0B0B0B; font-size: 16px; line-height: 20px;}
.home #cyclestreets-about ul {padding: 0; margin: 0; margin-top: -10px; list-style: none;}
.home #cyclestreets-about ul, .home #cyclestreets-about p, .home #cyclestreets-about div.jumplist {margin-left: 190px;}
.home #cyclestreets-about ul img {border: 0; margin-right: 2px; vertical-align: middle;}
.home #cyclestreets-about ul li {font-size: 14px; line-height: 16px; color: #4E4628; padding: 0 0 0 6px; text-align: left;}
* html .home #cyclestreets-about ul li {border: 1px solid white;} /* Hack for IE6 */
.home #cyclestreets-about ul li a {text-decoration: none; color: #4E4628; margin: 0; padding: 4px; display: block;}
.home #cyclestreets-about ul li a:hover {background-color: #F4EFDF;}
.home #cyclestreets-about p {padding: 10px 0 0 250px;}
.home div.jumplist {margin-top: 15px;}
.home div.jumplist form {display: inline;}


/* Front page photomap/journeyplanner boxes */
.home #journeyplanner, .home #photomap, .home #blog {background-color: #FCFAF3; color: #0B0B0B; border: 1px solid #eee; padding: 10px 25px;}
.home #photomap, .home #blog {float: right; width: 200px;}
.home #journeyplanner, .home #photomap {margin-top: 18px;}
.home #photomap h2, .home #journeyplanner h2 {background-color: #FCFAF3; color: #A60101; font-size: 1.9em; line-height: 40px; margin: 0 0 10px; padding: 0;}
.home #photomap h2, .home #journeyplanner h2, .home #photomap h2 a, .home #journeyplanner h2 a {color: #A60101; border-bottom: 0;}
.home #photomap h2 span, .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 */
.home #journeyplanner.narrow {float: left; width: 614px;}
.home #journeyplanner.narrow div#collapse {display: none;}
.home #journeyplanner.expanded {float: left; width: 884px;}

.home #photomap.collapsed {display: none;}
.home #journeyplanner p.map {margin: 0; width: 400px; height: 400px; float: left; border: 1px solid gray;}
.home #journeyplanner p.start, .home #journeyplanner p.end {height: 75px; border: 1px solid #ddd; width: 145px; margin: 0 0 10px 415px; padding: 10px;}
.home #journeyplanner p.start {background-color: #92b591;}
.home #journeyplanner p.end {background-color: #eee;}
.home #journeyplanner p.end:hover {background-color: #d59999;}
.home #journeyplanner p.button {float: right; clear: right; margin-top: 1.5em;}
.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;}

.journeyPlannerPlaces h2 div.jumplist, .journeyPlannerPlaces h2 div.jumplist form {display: inline;}
.journeyPlannerPlaces h2 div.jumplist form {vertical-align: bottom;}
.journeyPlannerPlaces h2 div.jumplist form select {font-family: Georgia, "Times New Roman", Times, serif; color: #786e4e;}
.journeyPlannerPlaces h2 div.jumplist form input.button {display: none;}

/* Front page - photomap */
.home #photomap p {margin: 7px 0 10px;}
.home #photomap p a {text-decoration: none; color: #666;}
.home #photomap p.introduction {margin: 0 0 20px; padding: 0; font-size: 0.93em; text-align: left;}
.home #photomap li a {border: 1px solid #aaa; width: 180px; padding: 4px 8px; font-weight: bold; -moz-border-radius: 3px; margin-bottom: 5px;}
.home #photomap li a:hover {border-color: gray; color: #333;}
.home #photomap ul {float: none;}
.home #photomap li {background-repeat: no-repeat; background-position: 173px center; background-color: white;}
.home #photomap li.browse {background-image: url(images/icons/map.png);}
.home #photomap li.add {background-image: url(images/icons/add.png);}
.home #photomap li.recent {background-image: url(images/icons/images.png);}
.home #photomap p.photomap {margin-top: 20px;}
.home #photomap p.photomap a {border-bottom: 0;}

/* Front page - blog */
.home #blog {margin: 0; height: 80px;}
.home #blog h2 {font-size: 1em; line-height: 14px; margin: 0 0 13px; padding: 0;}
.home #blog h2, .home #blog h2 a {color: #A60101; border-bottom: 0;}
.home #blog ul {list-style: none; margin: 0; padding: 0;}
.home #blog li {font-size: 0.83em; margin: 8px 0 3px;}
.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;}



.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 */


/* May key */
/* Override the OpenLayers style to move the attribution text to the bottom of the map. ('body' is used to increase specificity)*/
body .olControlAttribution {bottom: 0; margin-left: 100px; text-align: right; line-height: 1.3em;}
body .olControlAttribution .withmapkeylink {line-height: 1.5em;}
body .olControlAttribution .withmapkeylink a.mapkey {top: 1px;}
a.mapkey {background-color: white; font-weight: normal; margin-right: 0; padding: 3px 6px; border: 1px solid gray; position: relative; top: -1px; right: -4px;}
a.mapkey strong {color: green; font-weight: bold;}


/* Links */
#cyclestreets-content a, #cyclestreets-footer a {text-decoration: none; color: gray; border-bottom: 1px solid #ddd;}
#cyclestreets-content a:hover {border-bottom: 1px solid #666;}
#cyclestreets-content a.noborder {border-bottom: 0;}
th a {color: teal;}

p.debug, p.adminnotice {color: #555; background: #FDF2EE; margin-top: 2em;}
p.debug a {color: #666;}
p.debug {max-height: 12em; overflow: auto;}

p#rate {font-size: 0.83em; display: inline;}
p#permalink {font-size: smaller;}

#content p {margin-top: 0;}

p.accelerator {text-align: right;}

img.marker_tag {border: 0;}

#cyclestreets-content ul {list-style: square;}
#cyclestreets-content li {margin-top: 0.4em;}

/* Search result */
#searchform #query, input#searchgo, div.photoimport .url input, input.editableURL, body.widgetBoxCreator div.postcode input, body.widgetBoxCreator div.postcoderesult p {color: #603; font-size: 1.4em; padding: 0.2em;}
#searchform p.phrase {margin-top: 6px; padding: 0; color: #603;}
div.searchformcontainer {padding: 2em; margin-bottom: 1em;}
p.searchresult {margin-bottom: 2em;}

/* Postcode page */
body.widgetBoxCreator #link div.postcode input#form_name {padding: 0.1em 0.2em; font-size: 1.2em;}
body.widgetBoxCreator #link div {margin-left: 3em; margin-bottom: 2em;}
body.widgetBoxCreator #link div.cyclestreets a {border: 0;}	/* Get rid of the border */
body.widgetBoxCreator #link div.postcoderesult p a {border: 0; color: #603;}
body.widgetBoxCreator #link div.postcode {width: 40em; padding: 0.5em 3em; margin-top: 2em;}
body.widgetBoxCreator #link div.postcode input.button {margin-left: 8.8em;}
body.widgetBoxCreator #link div.postcoderesulthtml pre {font-family: "Lucida Console", monospace; font-size: 0.83em;}

/* Link formats page */
body.journeyPlannerUrl #formats table td:first-child {width: 180px;}
body.journeyPlannerUrl #formats table td {white-space: nowrap;}
body.journeyPlannerUrl #example, body.widgetBoxCreator #example {float: right; position: relative; top: -3em;}


/* 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;}

/* Nearby page */
div.nearby {float: left; width: 95%; margin: 1em 1.4em 0.2em 0; padding: 1em; background-color: #f7f7f7; border: 1px solid #888; border-width: 1px 0;}
div.nearby p.comment {margin: 0.2em 0 1.4em;}
div.nearby div.image {float: left; text-align: center; margin-right: 15px; margin-bottom: 2em;}
div.nearby p.caption {text-align: left;}


/* 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;}
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;}
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;}

body.photomapListings h2.recent {clear: both; padding-top: 40px;}
body.photomapListings div.fadeout {opacity: 0.3;}
body.photomapListings div.highlight, body.photomapListings div.highlight:hover {border-color: red; background-color: pink;}

body.photomapListings form#photooftheday {padding-top: 0.2em;}


/* 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 a:hover{ text-decoration: none; background: #eef3e2;}

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; }

span.code { font-family: monospace;}
tt.osmtag { background: #E0E0F0;font-size:larger;}
#cyclestreets-content tt.osmtag a { color: blue; text-decoration: none;border-bottom: 0;} /* !! Note: this gets overruled by #cyclestreets-content a */
dl.code,p.code, pre.code { font-family: monospace; padding: 1em; border: 1px solid silver; line-height: 150%;  background: #f6f9ed;}
dl.code dd { margin-bottom: 1em; }

/* Mini lists of further options */
ul.furtheroptions {display: inline; list-style: none; margin-top: 5px;}

/* List of journeys */
body.journeyListings table.browse td.whence {width: 21em;}

/* Journey listing */
table.journeylisting {margin-top: 25px; clear: right;}
table.journeylisting td p:first-child {margin-top: 0;}
table.journeylisting tr.hasphotos td {border-bottom: 0;}
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 tr#streetviewRow div#streetViewContainer{ height: 300px; }


/* Itinerary display page */

#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.withchangelist {width: 410px; min-height: 2.3em;}
#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;}
#itinerarytitle ul {position: absolute; left: 430px; margin: 0; padding: 0; list-style: none; width: 190px;}
#itinerarytitle ul li {list-style: none; margin: 0 0 5px; padding: 0; font-size: 0.93em;}
p#itineraryjourneynumber {float: right; text-align: right; color: #a60101; font-size: 1.1em; font-family: Georgia, "Times New Roman", Times, serif;}
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 {color: #666;}
ul#switchabletabs li.selected {font-weight: bold;}

/* PER photos-en-route */
checkbox#showphotosenroute[disabled='disabled'], checkbox#showmaplets[disabled='disabled'] {color: #ccc;}
#routefeedbackbox table.lines {margin-bottom: 1em;}



/* Pop-up bubbles within a Dynamic Photomap -style display */
.photobubble {width: 335px; min-height: 202px;}
.photobubble p.peekimage {min-height: 150px; /* 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 p.caption { 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;}

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;}

/* 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;}
ul#providerlinks {padding-top: 5px; margin-left: 0; padding-left: 0; list-style: none; text-align: left;}
ul#providerlinks li {display: inline; margin: 0; padding: 0;}
ul#providerlinks li img {vertical-align: bottom; opacity: .75; border: 0; width: 82px; height: 22px;}
ul#providerlinks li img {filter: alpha(opacity=75); -moz-opacity: .75;}	/* Hack to add vendor-specific support for opacity while CSS3 support unavailable - see http://www.quirksmode.org/css/opacity.html */


/* Test page */
body.tests div.test { border: 1px dashed gray; padding: 1em;}



/* Photomap tabs */
ul.photomaptabs {clear: right;}


/* Photomap/locate header */
/* #!# Some of these divs are probably not necessary and could be replaced with body.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, ul#providerlinks {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;}
div.view #photomapheader, div.locate #photomapheader {height: auto; margin-bottom: 0;}
div.view div#streetViewPhotoMap{ height: 300px; }


/* Photomap pages */
#mapcolophon.unset {background-color: yellow;}
#mapcolophon.set {background-color: white; visibility: hidden;}
p#image {margin: 6px 0; /* Should be 8px but not sure why 6px is in line instead */ min-height: 300px;}
* html p#image {height: 300px;}	/* IE6 hack to emulate min-height */
#cyclestreets-content p#image a {border: 0;}	/* Removes space under image for some reason */
p#photonumber {text-align: right; font-size: 0.83em; margin-top: 0;}
p#editing, p#utilities {font-size: 0.8em;}
p#mapcolophon, p#markerexplanation, ul#providerlinks {margin: 0; font-size: 0.83em;}
p#locatePrompt {margin: 4px 0 1em; height: 1em;}
#cyclestreets-content p#mapcolophon a, #cyclestreets-content p#photonumber 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 p#caption {text-align: justify; color: #900;}


/* Photomap prioritisation system */
body.prioritisation div.organisationsjumplist {float: right;}
body.prioritisation table.categoryselection td.type {width: 250px; text-align: right; padding-right: 15px;}
body.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;}
body.prioritisation table.categoryselection td.type img.prioritisationicon {border: 0; float: right; padding: 0; margin: 10px 0 0 10px;}
body.prioritisation #cyclestreets-content table.categoryselection td.type ul {list-style: none; padding: 0; margin: 0; margin-right: 60px;}
body.prioritisation #cyclestreets-content table.categoryselection td.type ul li {margin-top: 3px;}
body.prioritisation p.largesubmit {margin-top: 1em;}
body.prioritisation p.largesubmit input {font-size: 1.6em;}
body.prioritisation table.prioritisation td {border-top: 2px solid #ccc; padding-top: 12px; padding-bottom: 12px;}
body.prioritisation table.prioritisation {margin-top: 2em; border-bottom: 2px solid #ccc; background-color: white;}
body.prioritisation p.key {text-align: left;}
body.prioritisation p.key span {font-size: 1.4em;}
body.prioritisation p.key span.annotated {color: #dee9ff;}
body.prioritisation table.editing tr.annotated, body.prioritisation table.editing tr.duplicate, body.prioritisation table.editing tr.bogus {background-color: #dee9ff;}
body.prioritisation p.key span.duplicate {color: #ddd;}
body.prioritisation table.prioritisation tr.duplicate td, body.prioritisation table.prioritisation tr.bogus td {opacity: 0.6;}
body.prioritisation table.prioritisation tr.duplicate td, body.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 */
body.prioritisation p.key span.resolved {color: #cfffb7;}
body.prioritisation table.prioritisation th {padding-bottom: 12px; background-color: #f7f7f7;}
body.prioritisation table.prioritisation th abbr {border-bottom: 1px dotted #999;}
body.prioritisation table.prioritisation tr td.id a {font-weight: bold;}
body.prioritisation table.prioritisation tr td.id span.date {font-size: 0.9em; color: #777;}
body.prioritisation table.prioritisation tr td.scores p.desirability {margin-top: 2px;}
body.prioritisation table.prioritisation tr td.caption p {padding: 0; margin: 0 0 5px; font-size: 0.9em;}
body.prioritisation #cyclestreets-content table.prioritisation tr td.id span.email a, body.prioritisation table.prioritisation tr td.caption a, body.prioritisation #cyclestreets-content table.prioritisation tr td.location a {border-bottom: 0;}
body.prioritisation table.prioritisation tr td.resolved {background-color: white;}
body.prioritisation table.prioritisation tr.duplicate td.resolved {background-color: #eee;}
body.prioritisation table.prioritisation tr.resolved td.resolved {background-color: #cfffb7;}
body.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  */
body.prioritisation table.prioritisation td.caption p {width: 200px; overflow: hidden;}
body.prioritisation table.listing td.score {font-weight: bold;}
/* body.prioritisation .ultimateform table.prioritisation td.scores p.status select {color: black;}
body.prioritisation .ultimateform table.prioritisation td.scores p.status option[value=unconsidered] {color: gray;} */	/* #!# This doesn't work when selected */
body.prioritisation table.prioritisation td.scores p.status option[value=investigating] {background-color: orange;}
body.prioritisation table.prioritisation td.scores p.status option[value=approved] {background-color: mediumseagreen; color: white;}
body.prioritisation table.prioritisation td.scores p.status option[value=improved] {background-color: green; color: white;}
body.prioritisation table.prioritisation td.scores p.status option[value=rejected] {background-color: #c99; color: white;}
body.prioritisation h1 {margin-bottom: 1.3em;}
body.prioritisation div.organisationsjumplist {position: relative; top: -7px;}
body.prioritisation div.categoryjumplistcontainer {float: right;}
body.prioritisation p#editablemarkertext {color: #603; margin-top: 2em; font-weight: bold; font-size: 1.2em;}
body.prioritisation p#editablemarkertext a.editablemarkerlinkdisabled {color: #ccc;}
body.prioritisation p.maplink {float: right; font-size: 0.92em; clear: right; margin-top: 0.7em; margin-bottom: 0; padding: 0;}
body.prioritisation p.maplink img {vertical-align: middle;}
body.prioritisation #cyclestreets-content 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;}


/* Map cursors */
/* http://haslayout.net/css/Custom-Cursor-Bug describes how some versions of MSIE use an unexpected location to find url(*.cur). A mod_rewrite directive is used as a work around. */
#map .olLayerDiv {cursor: url(images/cursors/openhand.cur), move;}	/* The actual viewport */
#map .olDragDown .olLayerDiv {cursor: url(images/cursors/closedhand.cur), move;}	/* While dragging */
body.photomap #map .olLayerDiv svg image {cursor: pointer;}


/* 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;}

/* Pages with a placefinding panel: allocate space to the right and add a right-margin to the map */
#placefindingPanel {float: right; width: 250px;}
body.home #mapContainer, body.journeyPlannerPage #journeyPlannerPanel #mapContainer, body.journeyPlannerPlaces #mapContainer {margin-right: 270px; /* 20px more than the panel width */}

/* Vertical version of placefinding panel */
body.journeyPlannerPage #journeyPlannerPanel.vertical #mapContainer {margin-right: 0;}
#journeyPlannerPanel.vertical #placefindingPanel {float: none; width: auto; height: 149px; /* Test height carefully in browsers if changing */ position: relative;}
#journeyPlannerPanel.vertical #placefindingPanel #jpStart, #journeyPlannerPanel.vertical #placefindingPanel #jpFinish, #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: 9998; 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 #jpOptions, #journeyPlannerPanel.vertical #placefindingPanel #jpPlans, #journeyPlannerPanel.vertical #placefindingPanel #jpGo {float: left; width: 220px; padding: 0; margin: 0 0 10px;}
#journeyPlannerPanel.vertical #jpStart.inactive, #journeyPlannerPanel.vertical #jpFinish.inactive, #journeyPlannerPanel.vertical #jpGo.inactive {display: inline; border-color: #aaa;}
#journeyPlannerPanel.vertical #placefindingPanel #jpGo.inactive {border: 1px solid #ddd; padding: 0.5em 5px;}
#journeyPlannerPanel.vertical #jpFinish.inactive #jpFinishTitle {color: #aaa;}
* html #journeyPlannerPanel.vertical #itinerary {margin-bottom: 0;}		/* IE6 hack */
*+html #journeyPlannerPanel.vertical #itinerary {margin-bottom: 0;}		/* IE7 hack */
* html #journeyPlannerPanel.vertical #placefindingPanel {z-index: 9999;}	/* IE6 hack - see http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ */
*+html #journeyPlannerPanel.vertical #placefindingPanel {z-index: 9999;}	/* IE7 hack - see http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ */


/* Journey Planner Places view */
body.journeyPlannerPlaces #journeyPlannerPanel {clear: right;}

/* Front page: when unexpanded, override placefinding panel to be narrower */
body.home #journeyplanner.narrow #placefindingPanel {width: 210px;}
body.home #journeyplanner.narrow #mapContainer {margin-right: 230px; /* 20px more than the panel width */}

/* Location page: small map (photo itself will be floated to the right) */
body.photomap div.view #mapContainer, body.photomap div.locate #mapContainer {height: 470px;}
body.photomap div.view #mapContainer #map, body.photomap div.locate #mapContainer #map {height: 360px;}

/* Settings: small map floated to right */
body.admin #settingsform {float: left; width: 50%;}
body.admin #settingsform tr.longitude, body.admin #settingsform tr.latitude, body.admin #settingsform tr.zoom {display: none;}
body.admin #mapContainer {margin-left: auto; /* i.e. float right */ width: 45%;}
body.admin #mapContainer #map {height: 400px;}


/* Itinerary page */
body.journeyPlannerPage #itineraryDisplay {float: right; width: 610px;}


/* Legend */
#legendContainer {position: absolute; right: 24px; z-index: 1000;}
div.legend {margin: 10px 0 5px; padding: 2px 10px;}
div.legend ul {list-style: none; margin: 0; padding: 0;}
#legendContainer.ui-expandable .ui-widget-content {padding: 11px 18px 13px 18px;}
#legendContainer.ui-expandable {width: 365px; background-color: white; border: 1px solid #eee;}
#legendContainer.ui-expandable .ui-widget-header {background: none; border: none; padding-left: 20px; background-image: url(images/jquery/expandable-closed.png); background-repeat: no-repeat;}
#legendContainer.ui-expandable-open .ui-widget-header.ui-state-hover {outline: 1px dotted #cccccc; outline-width: 0 0 1px 0; /* fails in firefox */}
#legendContainer.ui-expandable .ui-widget-content {border: none; padding: 0 0 5px 18px;}
#legendContainer .ui-icon {display: inline;}
/* #!# These don't seem to work, so the expandable-closed icon has been added above, as a workaround */
#legendContainer.ui-expandable .ui-widget-header .ui-icon {background-image: url(images/jquery/expandable-closed.png);}
#legendContainer.ui-expandable .ui-widget-header .ui-icon.icon-open {background-image: url(images/jquery/expandable-open.png);}

/* Routing debugging links under the map */
p#routingdebugginglinks {font-size: 0.88em;}
p#routingdebugginglinks img {vertical-align: middle;}
p#routingdebugginglinks a {border: 1px solid #ddd; padding: 2px 5px; margin-right: 5px; background: none; background-color: #f7f7f7;}




/* Location finder (centre the map / SAYT) above the map */
#locationfinder h3 {display: none;}
#locationfinder * {display: inline;}
#locationfinder input {width: 200px;}


/* Map panel layer buttons
.olControlMapTypePanel {
    float:right;
    right: 3px;
    top: 3px;
    padding:2px;
    font-size: 12px;
    line-height: 14px;
    font-family:arial,sans-serif,vera;
}
.olControlMapTypePanel  div {
    position: relative !important;
    float:left;
    margin: 1px;
    cursor: pointer;
}
.olControlMapTypePanel > div > div {
    padding: 0px;
    margin: 0px;
    background-color: white;
    border: 1px solid black;
}
.olControlMapTypePanel > div > div {
    width: auto;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid #B0B0B0;
    border-bottom: 1px solid #B0B0B0;
    margin: 0px;
    padding: 1px 8px;
    text-align:center;
}
.olControlMapTypePanel .olControlMapTypeItemActive {
    font-weight: bold;
}
.olControlMapTypePanel .olControlMapTypeItemActive .olControlMapType div {
    border-top: 1px solid #6C9DDF;
    border-left: 1px solid #6C9DDF;
    border-right: 1px solid #345684;
    border-bottom: 1px solid #345684;
}
 */



/* Journey Planner boxes */
#jpStart, #jpFinish, #jpPlans {border-width: 1px; border-style: solid;}
#jpStart, #jpFinish {padding: 0.5em 1em;}
#jpStart p, #jpFinish p {min-height: 24px; }
#jpStart p img, #jpFinish p img {vertical-align:middle; }
#jpStart, #jpFinish, #jpOptions, #jpPlans {margin: 0 0 1em;}
#jpStart h3, #jpFinish h3 { margin-top: 0; border-bottom: 0; padding-left: 0; margin-bottom: 4px;}
#jpStart form#streetSearchStart, #jpFinish form#streetSearchFinish { display: none; }
#jpStart.inactive, #jpFinish.inactive, #jpPrompt.inactive { display: none;}
#jpStart.focussed, #jpFinish.focussed, #jpOptions { border-width: 2px;}
#jpStart.focussed form#streetSearchStart, #jpFinish.focussed form#streetSearchFinish { display: block; }
#jpStartCue a, #jpFinishCue a {margin-left: 2em; font-size: smaller; }
input#jpStartStreetSearch, input#jpFinishStreetSearch { width: 80%; }
#jpStart img.marker_tag, #jpFinish img.marker_tag {float: right; margin-left: 10px;}

input#jpStartStreetSearch[disabled], input#jpFinishStreetSearch[disabled] { color: black; }
input#jpStartStreetSearch, input#jpFinishStreetSearch {padding: 4px 24px 4px 4px;}
input#jpStartStreetSearch, input#jpFinishStreetSearch, p#jpStartCue strong, p#jpFinishCue strong {color: #603; font-weight: normal;}
p#jpStartCue, p#jpFinishCue {font-size: 1.1em; margin-bottom: 10px; padding-bottom: 0;}
input#jpStartStreetSearch, input#jpFinishStreetSearch {font-size: 1.3em;}
#jpStartCue strong.chosen, #jpFinishCue strong.chosen {font-size: 1.1em; line-height: 1.45em; font-weight: bold;}

#jpStart {border-color: #3c3;}
#jpStart h3 { color: #383; }
#jpStart.focussed { background-color: #F1FDED;}
#jpStart.complete { background-color: #DFFAD6;}
#jpStart.complete p.geolocation {display: none;}
#jpStart.complete p.homelocation {display: none;}

ul.quickzoom li {font-size: 11px; line-height: 12px;}	/* Set as an exact size to avoid text getting too small if using em-percentage */

/* Search as you type - overruling those style in sayt/styles/ */
#searchAsYouType div.searchResults div.searchResult { padding: 0 0 0 0.6em; border: 0;}
#searchAsYouType div.searchResults div.searchResult p.result { color:#660033; margin: 0; padding: 0 0 2px;}
#searchAsYouType div.searchResults div.searchResult p.result span { color:#999; }
#searchAsYouType div.searchResults div.highlighted { background: #ddd; }
#searchAsYouType div.searchResults div.searchResult:hover { background: #eee !important;}


p#howtouselink {display: none;}
#placefindingPanel #whence {width: 100px;}

/* Finish box */
#jpFinish { /* background-color: #fee; */ border-color: #f30;}
#jpFinish h3 { color: #f30; }

#jpFinish.inactive { border-color: #cbb;}
#jpFinish.inactive h2 { color: #c88;}
#jpFinish.focussed { background-color: #FDF1ED;}
#jpFinish.complete { background-color: #FADFD6;}
#jpFinish.complete p.homelocation {display: none;}

#jpOptions { padding-left: 1em; background: #eee; border-color: #ddd; background: transparent; border-color: white;}
#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;}

#jpPlans {border: 0; }
#jpPlans.inactive {display: none;}







/* Photo location page */
div.locatedPhoto {width: 640px;}

/* Photo metadata view */
body.photomap #details {float: right; width: 270px; margin-left: 20px;}
body.photomap #details #mapContainer {width: 100%;}	/* Only necessary for IE */
div.view table.metadata td {font-size: 0.83em; padding: 4px 0;}
div.view table.metadata td:first-child {width: 90px;}

/* Photo metadata update */
.photometadata .longitude, .photometadata .latitude, .photometadata .zoom, .photometadata .basemap {display: none;}
div.update #details .ultimateform td.title {width: 29%;}
div.update #details .ultimateform h3 {margin: 1em 0 0.5em;}
div.update #details .ultimateform td.description {color: gray; width: 20%; font-size: 0.9em;}
div.update #details .ultimateform #locaterform_datetime_time {width: 70px;}
div.update #details .ultimateform .bearing input {width: 15px;}
div.update #details .ultimateform .bearing label {display: inline-block; width: 25px;}
#details .ultimateform .basemap  {display: none;}
div.update #details .ultimateform h3 {border: 0;}





body.journeyPlannerPage #cyclestreets-content {min-height: 800px;}

/* Fix float issues - problem is that IE doesn't treat the large map panel as being properly floated */
*+html body.journeyPlannerPage #cyclestreets-content #tabbed table {width: 850px;} /* Hack for IE7 layout bug fix */



/* 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;}


/* Journey Planner */
td.maplet { width: 300px; height: 250px; }

/* Maplet clipping: see http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html */
.clipwrapper {position: relative; width: 192px; height: 192px;}
.clip {position: absolute; clip: rect(32px 224px 224px 32px); top: -32px; left: -32px;}


/* Table Row Form */
.formCompletion { text-align: center;  font-weight: bold; }
.formCompletion span {background: #caff70; padding: 0.2em;}


/* location line */
p.locationline {font-style: italic; font-size: 0.85em; margin: 0;}

p.privileged { float: right; color: #555; background-color: #fbf0f0;  font-size: 0.85em; padding: 0.4em; text-align: right; border: 2px solid #ebe0e0; margin-left: 7px;}

/* Paths with problems page */
p.feedbackMessage {margin-left: 4em; background-color: white; padding: 1em; border: solid 1px #ddd;}

/* Table warning row */
table tr.warning { color: red; }

/* Photomap listings */
dl.browsephotos dt {font-weight: bold; margin: 1.2em 0 0.6em; border-top: 1px solid #ddd; padding-top: 1em; padding-left: 1em;}
dl.browsephotos dd {padding-left: 2em;}

/* Photomap tags */
ul.tagcloud {margin: 0; padding: 0; padding: 15px; border: solid 1px #eee; background: #f7f7f7; text-align: center;}
ul.tagcloud li {padding: 10px 15px; display: inline; line-height: 1.4em;}
ul.tagcloud li a {white-space: nowrap;}
ul.tagcloud li.tagcloud1 {font-size: 75%;}
ul.tagcloud li.tagcloud2 {font-size: 90%;}
ul.tagcloud li.tagcloud3 {font-size: 130%;}
ul.tagcloud li.tagcloud4 {font-size: 150%;}
ul.tagcloud li.tagcloud5 {font-size: 190%;}
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;}
body.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 */
tr.selected	{background:#dae5ed;}
tr.blushed.selected	{background:#d6e2eb;}


#cyclestreets-content p.routedetail a, #cyclestreets-content p.routedetail a:hover {border-bottom: 0; color: white; display: block; border: 1px solid #603; background-color: #B48A9F; padding: 10px; font-size: 1.4em; font-weight: bold;}
p.routedetail:hover {border-color: #333;}


a img {border: 0;}
form#streetSearchStart input, form#streetSearchFinish input {vertical-align:middle; display:inline;}
form#streetSearchStart img.streetSearchImage, form#streetSearchFinish img.streetSearchImage {vertical-align:middle; margin-left: -24px;}

/* Area page */
body.cityPages ul.areas li.add {margin-top: 7px;}
body.cityPages p.otherareas {clear: both; margin-top: 2em; float: right; margin-right: 10em;}
body.cityPages table.splitlist {width: 90%;}
body.cityPages table.splitlist ul li {font-size: 0.93em;}


/* Feedback anti-spam measure */
form tr.formStamp { display: none; }


/* Generic styles, overriden from generic.css */
.small {font-size: 0.9em;}
#cyclestreets-content ul.tabs li.selected a {background-color: #faedb2; color: #666; border-bottom: 1px solid white;}


/* General text formatting */
.nowrap {white-space: nowrap;}

/* The mouse position control is required to avoid a script error in IE6&7. See cyclestreets.js createMap(). We hide it here. */
body div.olControlMousePosition { display: none;}

/* Control panel */
div.controlpanel table {table-layout: fixed; width: 900px;}
div.controlpanel table td.title {width: 300px;}
div.controlpanel table td.data {width: 450px;}

/* Features/getinvolved pages */
body.features div.ideabox {width: 45%; margin: 0 20px 20px 0;}
body.basicPages div.ideabox {width: 95%; margin-bottom: 13px;}
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 {float: left; width: 200px; height: 100px; border: 1px solid #bbb;}
div.ideabox h2 {margin: 0 0 10px 220px; font-size: 1.35em; padding: 0;}
div.ideabox p {margin: 12px 0 0 220px; color: gray;}

/* 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;}

/* 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;}

/* Mobile */
.mobilePage table.apps td h3 {margin-top: 7px; padding-top: 0; font-size: 1.3em;}
.mobilePage #cyclestreets-content table.apps td h3 a {color: #786e4e;}
.mobilePage table.apps td:first-child {width: 200px; padding-right: 12px;}
.mobilePage table.apps td:first-child div {float: right;}
.mobilePage div.artwork {position: relative;}
.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;}
.mobilePage tr.thirdparty div.artwork > span.mask {background-image: url(images/mobile/mask117.png); width: 119px; top: -1px;}
.mobilePage #iphone h1 sup {font-size: 12px;}
.mobilePage #iphone img.iphone {background-color: white; margin-left: 0;}
.mobilePage #iphone p, .mobilePage #iphone td {font-size: 0.87em;}
.mobilePage #iphone table.funders {width: 400px; margin-top: 20px;}
.mobilePage #iphone table.funders td.key {padding: 10px 15px 10px 0; text-align: right; width: 100px;}
.mobilePage #iphone p.caption {text-align: right; color: #666;}
.mobilePage #iphone p img {border-color: #ccc; margin-bottom: 2px; margin-left: 20px;}
.mobilePage #iphone p.applecolophon {clear: both; padding-top: 2em;}

/* Local Authorities */
body.localAuthorities table.options tr td {padding-top: 10px; padding-bottom: 20px;}
body.localAuthorities table.options h3 {padding-top: 0; margin-top: 0; color: #786e4e;}
body.localAuthorities p.placefordexample {padding: 12px 0;}
body.localAuthorities a.actions {padding: 10px; background-color: #f7f7f7; color: #603;}
body.localAuthorities table ul {margin-left: 10px; padding-left: 10px;}
body.localAuthorities table li {list-style: none;}
body.localAuthorities table ul li {margin-bottom: 13px;}
body.localAuthorities table ul ul {margin-left: 15px; padding-left: 15px;}
body.localAuthorities table ul ul img {width: 12px; height: 12px;}
body.localAuthorities table ul ul li {margin-bottom: auto;}
body.localAuthorities blockquote {font-style: italic; border: 1px solid #ddd; padding: 0px 10px; margin: 0 10px 10px 0; background-color: #fcfcfc;}

/* 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;}

/* Editor */
.edit #mapContainer {float: left; width: 600px;}
.edit #editor {width: 100%; height: 640px;}
.edit 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;}
.edit #cyclestreets-content ul.actions li a {color: #444;}
.edit ul.actions li:first-child {color: #603; font-weight: bold;}

/* Help section */
body.help #toc {display: none;}	/* #!# Hacky - need to fix server-side */
body.help table.embedding a img.photo {border-color: #ddd;}
body.help table.embedding p.highlight {background-color: #eee; padding: 5px 3px}
body.help table.embedding td:first-child {width: 280px;}
body.help table.embedding h3 {font-size: 1.4em; margin-top: 0; color: #a60101;}
body.help table.embedding h3 span {font-size: 0.7em;}
body.help table.embedding h4 {font-size: 1.2em; margin: 5px 0 5px; padding: 0;}

/* Gallery */
div.slideshow {height: 522px;}

/* API poitypes */
body.api div.poitypes {width: auto;}
body.api div.poitypes form {width: auto;}
body.api div.poitypes table.checkboxcolumns {table-layout: fixed; width: 100%;}
body.api div.poitypes table.checkboxcolumns td {width: 33%; vertical-align: top;}



/* Handheld styles - needs much more development */
/* See www.bushidodesigns.net/blog/mobile-device-detection-css-without-user-agent/ and www.thecssninja.com/css/iphone-orientation-css */
@media screen and (max-device-width: 480px)
{
	#cyclestreets-container {width: auto; padding: 0;}
	body, textarea, option, select {font-size: 100%;}
	
	.home ul.cyclestreets-subtabs, .home #cyclestreets-about ul, .home div.jumplist, .home #photomap, .home #blog {display: none;}
	.home #cyclestreets-about {float: none; width: auto;}
	.home #cyclestreets-about h2 {font-size: 3em;}
	.home #cyclestreets-about h2 span {font-size: 0.6em;}
	.home #cyclestreets-about br {display: none;}
	
	.home #journeyplanner {background-color: white; border: 0; padding: 0 25px;}
	.home #journeyplanner h2 {background-color: white;}

	.home #journeyplanner.narrow, .home #journeyplanner.expanded {float: none; width: auto;}
}

/* Print styles */
@media print {
	
	/* Hide unwanted parts */
	ul.signin, ul.cyclestreets-tabs, #searchbar, h4#tabsheading, ul.cyclestreets-subtabs, #itinerarytitle a, #switchabletabs, div.olControlPermalink, div.olControlAttribution, img#OpenLayers_Control_MaximizeDiv_innerImage, img#OpenLayers_Control_MinimizeDiv_innerImage, div.olControlPZ, #feedbackpane, #cyclestreets-footer, p#utilities span.viewfullsize, #photonumber img, ul#providerlinks, #photomapheadercolophon, ul.photomaptabs, .noprint, .olControlPanZoomBar, .olControlLayerSwitcher, body.blog #sidebar {display: none;}
	
	/* JP-specific */
	table.journeylisting th {background-color: gray; color: black;}

  #itineraryMetadata ul li.noprint {display: none;}

	/* PER */
	table.journeylisting img.photothumbnail {display: none;}
}




/*
* Feedback system styles
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/

/* Layout helpers */
.ui-helper-clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.ui-helper-clearfix {display: inline-block;}
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix {height:1%;}
.ui-helper-clearfix {display:block;}
/* end clearfix */

/* Dialog */
.ui-dialog {position: relative; padding: .2em; width: 300px;}
.ui-dialog .ui-dialog-titlebar {padding: .5em .3em .3em 1em; position: relative; }
.ui-dialog .ui-dialog-title {float: left; margin: .1em 0 .2em;} 
.ui-dialog .ui-dialog-titlebar-close {position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px;}
.ui-dialog .ui-dialog-titlebar-close span {display: block; margin: 1px;}
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus {padding: 0;}
.ui-dialog .ui-dialog-content {border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1;}
.ui-dialog .ui-resizable-se {width: 14px; height: 14px; right: 3px; bottom: 3px;}
.ui-draggable .ui-dialog-titlebar {cursor: move;}
.ui-resizable {position: relative;}
.ui-resizable-handle {position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-n {cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0;}
.ui-resizable-s {cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0;}
.ui-resizable-e {cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%;}
.ui-resizable-w {cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%;}
.ui-resizable-se {cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px;}
.ui-resizable-sw {cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px;}
.ui-resizable-nw {cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px;}
.ui-resizable-ne {cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}

/* Component containers */
.ui-widget-content {border: 1px solid #aaa; background: #fff url(images/jquery/ui-bg_glass_75_ffffff_1x400.png) 0 0 repeat-x; color: #222;}
.ui-widget-header {border: 1px solid #aaa; background: #ccc url(images/jquery/ui-bg_highlight-soft_75_cccccc_1x100.png) 0 50% repeat-x; color: #222; font-weight: bold;}

/* Interaction states */
.ui-state-default, .ui-widget-content .ui-state-default {border: 1px solid #d3d3d3; background: #e6e6e6 url(images/jquery/ui-bg_glass_75_e6e6e6_1x400.png) 0 50% repeat-x; font-weight: normal; color: #555555; outline: none;}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {color: #555555; text-decoration: none; outline: none;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {border: 1px solid #999999; background: #dadada url(images/jquery/ui-bg_glass_75_dadada_1x400.png) 0 50% repeat-x; font-weight: normal; color: #212121; outline: none;}
.ui-state-hover a, .ui-state-hover a:hover {color: #212121; text-decoration: none; outline: none;}
.ui-state-active, .ui-widget-content .ui-state-active {border: 1px solid #aaa; background: #fff url(images/jquery/ui-bg_glass_65_ffffff_1x400.png) 0 50% repeat-x; font-weight: normal; color: #212121; outline: none;}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {color: #212121; outline: none; text-decoration: none;}

/* states and images */
.ui-icon {display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; width: 16px; height: 16px; background-image: url(images/jquery/ui-icons_222222_256x240.png);}
.ui-widget-content .ui-icon, .ui-widget-header .ui-icon {background-image: url(images/jquery/ui-icons_222222_256x240.png);}
.ui-state-default .ui-icon {background-image: url(images/jquery/ui-icons_888888_256x240.png);}
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-state-active .ui-icon {background-image: url(images/jquery/ui-icons_454545_256x240.png);}

/* positioning */
.ui-icon-closethick {background-position: -96px -128px;}
.ui-icon-gripsmall-diagonal-se {background-position: -64px -224px;}

/* Corner radius */
.ui-corner-all {-moz-border-radius: 4px; -webkit-border-radius: 4px;}

/* Overlays */
.ui-widget-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #aaa none 0 0 repeat-x; opacity: .3;filter:Alpha(Opacity=30);}
.ui-widget-shadow {margin: -4px 0 0 -4px; padding: 4px; background: #aaa none 0 0 repeat-x; opacity: .35;filter:Alpha(Opacity=35); -moz-border-radius: 4px; -webkit-border-radius: 4px;}

/* API section */
body.api form {width: 600px;}

/* Statistics */
body.api div.usage, body.statistics div.usage {width: 180px; height: 400px; overflow: auto; margin-bottom: 1.5em; float: left; margin-right: 2em;}
body.api img.chart, body.statistics img.chart {border: 1px solid #ddd; padding: 20px;}

/* Survey */
body.survey div.ultimateform span.description {font-size: 0.9em;}

/* Toggle buttons*/
img:hover.toggler { cursor: pointer; border: 1px outset;}

/* Photomaplet sprite */
.photomapletSprite { width: 256px; height: 256px; background-position: 0px px;}
.photomapletSprite:hover { background-position: 0px 256px !important;}