/* Base stylesheet for FixMyStreet look * * In a mobile first way, this contains the look of the site, and a basic * layout for browsers that can't handle media queries. Baseline grid of 1.5em. */ /* * HTML5 ✰ Boilerplate, with minor tweaks. * * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. * * Detailed information about this CSS: h5bp.com/css * * ==|== normalize ========================================================== */ /* ============================================================================= HTML5 display definitions ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } /* ============================================================================= Base ========================================================================== */ /* * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units * 2. Force vertical scrollbar in non-IE - mySociety removed. * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g */ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* mySociety change: line-height from 1.4 */ body { margin: 0; font-size: 1em; line-height: 1.5; } /* mySociety addition: background colour */ body, button, input, select, textarea { font-family: sans-serif; color: #222; background-color: white; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection declarations have to be separate * mySociety change: background colour from #fe57a1 */ ::-moz-selection { background: #ffeeaa; color: #000; text-shadow: none; } ::selection { background: #ffeeaa; color: #000; text-shadow: none; } /* ============================================================================= Links ========================================================================== */ /* mySociety removal: link colours specified elsewhere */ a:focus { outline: thin dotted; } /* Improve readability when focused and hovered in all browsers: h5bp.com/h */ a:hover, a:active { outline: 0; } /* ============================================================================= Typography ========================================================================== */ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } /* mySociety change: from 1em 40px; */ blockquote { margin: 1.5em 2em; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } /* Redeclare monospace font family: h5bp.com/j */ pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } /* Improve readability of pre-formatted text in all browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small, .small-print { font-size: 85%; } /* Position subscript and superscript content without affecting line-height: h5bp.com/k */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ============================================================================= Lists ========================================================================== */ /* mySociety change: left 40px, top/bottom 1em */ ul, ol { margin: 0 0 1.5em; padding: 0 0 0 2em; } dd { margin: 0 0 0 2em; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } /* ============================================================================= Embedded content ========================================================================== */ /* * 1. Improve image quality when scaled in IE7: h5bp.com/d * 2. Remove the gap between images and borders on image containers: h5bp.com/e */ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } /* * Correct overflow not hidden in IE9 */ svg:not(:root) { overflow: hidden; } /* ============================================================================= Figures ========================================================================== */ figure { margin: 0; } /* ============================================================================= Forms ========================================================================== */ form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } /* Indicate that 'label' will shift focus to the associated form element */ label { cursor: pointer; } /* * 1. Correct color not inheriting in IE6/7/8/9 * 2. Correct alignment displayed oddly in IE6/7 */ legend { border: 0; *margin-left: -7px; padding: 0; } /* * 1. Correct font-size not inheriting in all browsers * 2. Remove margins in FF3/4 S5 Chrome * 3. Define consistent vertical alignment display in all browsers */ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } /* * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) */ button, input { line-height: normal; } /* * 1. Display hand cursor for clickable form elements * 2. Allow styling of clickable form elements in iOS * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6) */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } /* * Consistent box sizing and appearance */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Remove inner padding and border in FF3/4: h5bp.com/l */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Remove default vertical scrollbar in IE6/7/8/9 * 2. Allow only vertical resizing */ textarea { overflow: auto; vertical-align: top; resize: vertical; } /* ============================================================================= Tables ========================================================================== */ table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } /* ==|== primary styles ===================================================== Author: ========================================================================== */ /* ==|== non-semantic helper classes ======================================== Please define your styles before this section. ========================================================================== */ /* For image replacement */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } .ir br { display: none; } /* Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* Contain floats: h5bp.com/q */ /* mySociety change: rename to cf */ .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } /* ==|== print styles ======================================================= Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ /* mySociety removal: bits of * and :after */ @media print { * { box-shadow: none !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { text-decoration: underline; } abbr[title]:after { content: " (" attr(title) ")"; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* COLOURS */ /* HEADINGS and TYPOGRAPHY */ body { font-family: MuseoSans, Helmet, Freesans, sans-serif; margin: 0; font-size: 1em; line-height: 1.5; color: #222; background-color: #fff; } p { font-size: 1em; font-weight: normal; margin: 0 0 1em 0; } small, .small-print { font-family: Helmet, Freesans, sans-serif; font-style: italic; font-size: 0.8125em; line-height: 1.2307em; } h1 { font-family: 'Museo300-display', MuseoSans, Helmet, Freesans, sans-serif; font-size: 2em; line-height: 1em; font-weight: normal; margin-top: 0.5em; margin-bottom: 0.5em; } #front-main h1 { margin-top: 0.7em; } h1#reports_heading span { display: none; } h1#reports_heading a { display: block; font-size: 50%; } h2 { font-family: 'Museo300-display', MuseoSans, Helmet, Freesans, sans-serif; font-size: 1.5em; /*24px*/ line-height: 1.3333em; /*32px*/ font-weight: normal; margin-top: 1.333333333em; /*32px*/ margin-bottom: 0.666666666em; /*16px*/ } h3 { font-size: 1.25em; line-height: 1.20em; margin-top: 1.2em; margin-bottom: 0.8em; font-weight: normal; } h4 { font-size: 1em; font-weight: normal; margin-bottom: 1em; } ul, ol { font-size: 1em; margin-bottom: 2em; margin-left: 2em; padding: 0; } li { margin-bottom: 0.5em; } ul li { list-style: square; } ol li { list-style: decimal; } ol.big-numbers { padding: 0; margin: 0; counter-reset: li; } ol.big-numbers > li { position: relative; list-style: none; padding: 0 0 0 2.5em; margin-bottom: 2em; } ol.big-numbers > li:before { content: counter(li); counter-increment: li; position: absolute; left: 0; top: -0.2em; color: #ccc; line-height: 1; font-family: Helmet, Freesans, sans-serif; font-weight: bold; font-size: 2.5em; } dl { margin: 0; padding: 0; } dl dt { font-size: 1em; line-height: 1.5em; font-weight: bold; } dl dd { font-weight: 1em; line-height: 1.5em; margin: 0 0 1em 0; } blockquote p:before { content: '“'; } blockquote p:after { content: '”'; } pre { font-family: monospace; } img { height: auto; } select, input, textarea { font-size: 99%; max-width: 95%; } select { width: 100%; } a, a:visited { text-decoration: none; color: #0BA7D1; } a:hover, a:active, a:visited:hover, a:visited:active { text-decoration: underline; color: #0D7CCE; } .small-print { margin-bottom: 1.2307em; color: #666666; } .meta { color: #555555; font-style: italic; margin-bottom: 0px; } .meta-2 { font-family: Helmet, Freesans, sans-serif; color: #666666; font-style: italic; font-size: 0.75em; } h4.static, h4.static-with-rule { font-family: Helmet, Freesans, sans-serif; text-transform: uppercase; font-size: 0.875em; line-height: 1.71428em; color: #666; margin-top: 2em; } h4.static-with-rule { background: #f6f6f6; border-top: 0.25em solid #ffd000; margin-bottom: 0.25em; padding: 0.5em 1em; } /* FORMS */ ::-webkit-input-placeholder { color: #666666; font-style: italic; font-size: 0.9375em; } :-moz-placeholder { color: #666666; font-style: italic; font-size: 0.9375em; } :-ms-placeholder { color: #666666; font-style: italic; font-size: 0.9375em; } .placeholder { color: #666666; font-style: italic; font-size: 0.9375em; } fieldset { margin: 1em; } input[type=text], input[type=password], input[type=email], input[type=file], textarea { width: 100%; padding: 0.5em; margin: 0 0 0 -0.5em; } textarea { border: 0.125em solid #888888; -moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; -o-border-radius: 0.25em; -ms-border-radius: 0.25em; -khtml-border-radius: 0.25em; border-radius: 0.25em; display: block; font-size: 1em; line-height: 1.5em; font-family: Helmet, Freesans, sans-serif; min-height: 8em; } input[type=text], input[type=password], input[type=email], input[type=file] { border: 0.125em solid #888888; -moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; -o-border-radius: 0.25em; -ms-border-radius: 0.25em; -khtml-border-radius: 0.25em; border-radius: 0.25em; display: block; font-size: 1em; line-height: 1em; } input[type=file] { margin-bottom: 1em; } label { display: block; margin-top: 1.25em; margin-bottom: 0.25em; font-weight: bold; } label.inline { display: inline; padding: 0 2em 0 1em; font-weight: normal; } .form-box { margin: 0 -2em 0.25em -2em; background: #eeeeee; padding: 1em 2em 1em 2em; max-width: 26em; } .form-box > input[type=text] { margin-bottom: 1em; } .form-box .title { font-size: 1.25em; margin: 0.5em 0; } .form-box h5 { margin: 0; font-size: 1.125em; font-weight: normal; } .form-box h5 strong { font-size: 2em; margin-right: 0.25em; } .ie6 .form-box { margin: 0 0 0.25em 0; } .form-txt-submit-box { min-height: 3em; } .form-txt-submit-box input[type=password], .form-txt-submit-box input[type=text], .form-txt-submit-box input[type=email] { width: 65%; float: left; } .form-txt-submit-box input[type=submit] { float: right; width: 28%; margin-right: 0.25em; padding-top: 0.7em; padding-bottom: 0.6em; } .checkbox-group { margin: 1em 0; } div.form-error, p.form-error { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; background: #ff0000; color: #fff; padding: 0 0.5em; margin: 0 0 0 -0.5em; -moz-border-radius: 0.25em 0.25em 0 0; -webkit-border-radius: 0.25em 0.25em 0 0; -o-border-radius: 0.25em 0.25em 0 0; -ms-border-radius: 0.25em 0.25em 0 0; -khtml-border-radius: 0.25em 0.25em 0 0; border-radius: 0.25em 0.25em 0 0; } div.form-error, p.form-error { *display: inline; } input.form-error, textarea.form-error { border-color: #ff0000; -moz-border-radius: 0 0.25em 0.25em 0.25em; -webkit-border-radius: 0 0.25em 0.25em 0.25em; -o-border-radius: 0 0.25em 0.25em 0.25em; -ms-border-radius: 0 0.25em 0.25em 0.25em; -khtml-border-radius: 0 0.25em 0.25em 0.25em; border-radius: 0 0.25em 0.25em 0.25em; } ul.error { background: #ff0000; color: #fff; padding: 0 0.5em; margin: 0 0 0 -0.5em; -moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; -o-border-radius: 0.25em; -ms-border-radius: 0.25em; -khtml-border-radius: 0.25em; border-radius: 0.25em; } div.label-valid, p.label-valid { display: none !important; visibility: hidden; } /*** LAYOUT ***/ .container { padding: 0 1em 1em; } .full-width, .shadow-wrap, #footer-mobileapps, #map_box, .promo, .alert, #front-main #postcodeForm { margin: 0 -1em; } #site-header { border-top: 0.25em solid #ffd000; height: 3em; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(10%, #222222), color-stop(90%, #222222), color-stop(100%, #000000)); background: -webkit-linear-gradient(#000000, #222222 10%, #222222 90%, #000000); background: -moz-linear-gradient(#000000, #222222 10%, #222222 90%, #000000); background: -o-linear-gradient(#000000, #222222 10%, #222222 90%, #000000); background: -ms-linear-gradient(#000000, #222222 10%, #222222 90%, #000000); background: linear-gradient(#000000, #222222 10%, #222222 90%, #000000); } #site-header .container { min-height: 4em; } #site-logo { display: block; width: 175px; height: 40px; top: 0.4em; background: url("../images/sprite.png") -3px -3px no-repeat; text-indent: -999999px; position: absolute; z-index: 2; } .ie6 #site-logo { background: url("../images/ie_logo.gif") 0 -5px no-repeat; } .ie7 #site-logo { background: url("../images/sprite.png") -3px -3px no-repeat; } #nav-link { width: 50px; height: 48px; background: url("../images/sprite.png") -5px -916px no-repeat; display: block; text-indent: -999999px; position: absolute; right: 2em; top: -2px; } #nav-link:hover { top: 2px; } #main-nav ul { list-style-type: none; padding: 0; margin: 0; } #main-nav ul li { list-style-type: none; padding: 0; margin: 0; border: 0; } #main-nav ul li a, #main-nav ul li span { display: block; padding: 0.5em 1em; background: #f6f6f6; color: #333; font-size: 1.25em; border-bottom: 0.25em solid #333; } #main-nav ul li a:hover, #main-nav ul li span.hover { background: #333; color: #fff; text-decoration: none; } #main-nav ul li span { background-color: #ccc; } #main-nav ul#mysoc-menu li a { background: #ffd000; } #main-nav ul#mysoc-menu li a#mysoc-logo { background-image: url("../images/sprite.png"); background-repeat: no-repeat; background-position: -240px -38px; text-indent: -999999px; } .ie6 #main-nav ul#mysoc-menu li a#mysoc-logo { background: url("../images/ie_mysoc_logo.gif") center no-repeat; } .ie7 #main-nav ul#mysoc-menu li a#mysoc-logo { background: url("../images/sprite.png") -240px -38px no-repeat; } .wrapper { width: 100%; display: table; caption-side: bottom; } #user-meta p { position: relative; background: #ffd000; padding: 1em 6em 1em 1em; } #user-meta p a { position: absolute; right: 1em; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; text-transform: uppercase; font-size: 0.75em; background: #333; padding: 0.25em 0.75em; color: #fff; -moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; -o-border-radius: 0.25em; -ms-border-radius: 0.25em; -khtml-border-radius: 0.25em; border-radius: 0.25em; } #user-meta p a { *display: inline; } .shadow-wrap ul#key-tools { list-style-type: none; padding: 0; margin: 0; margin-bottom: 1em; display: table; width: 100%; } .shadow-wrap ul#key-tools li { list-style-type: none; padding: 0; margin: 0; border: 0; } .shadow-wrap ul#key-tools li { display: table-cell; vertical-align: bottom; text-align: center; border-right: 0.25em solid #fff; } .shadow-wrap ul#key-tools li:last-child { border-right: none; } .shadow-wrap ul#key-tools li a { display: block; background-color: #f5f5f5; background-repeat: no-repeat; color: #333; padding: 4em 2em 1em 2em; text-transform: uppercase; font-size: 0.6875em; font-family: Helmet, Freesans, sans-serif; } .shadow-wrap ul#key-tools li a:hover, .shadow-wrap ul#key-tools li a.hover, .shadow-wrap ul#key-tools li a.active { text-decoration: none; background-color: #333; color: #fff; } .shadow-wrap ul#key-tools li a.abuse { background-image: url("../images/sprite.png"); background-position: center -2424px; } .shadow-wrap ul#key-tools li a.feed { background-image: url("../images/sprite.png"); background-position: center -2563px; } .shadow-wrap ul#key-tools li a.chevron { background-image: url("../images/sprite.png"); background-position: center -2716px; } .shadow-wrap ul#key-tools li a.hover, .shadow-wrap ul#key-tools li a.active { background-image: url("../images/sprite.png"); background-position: center -2064px; } .ie6 .shadow-wrap ul#key-tools, .ie7 .shadow-wrap ul#key-tools { background: #f5f5f5; } .ie6 .shadow-wrap ul#key-tools li, .ie7 .shadow-wrap ul#key-tools li { float: left; } .ie6 .shadow-wrap ul#key-tools li a, .ie7 .shadow-wrap ul#key-tools li a { padding-left: 1.5em; padding-right: 3em; } .ie6 .shadow-wrap ul#key-tools li a.abuse { background-image: url("../images/ie_key_tools_sprite.gif"); background-position: right 0px; } .ie6 .shadow-wrap ul#key-tools li a.feed { background-image: url("../images/ie_key_tools_sprite.gif"); background-position: right -58px; } .ie6 .shadow-wrap ul#key-tools li a.chevron { background-image: url("../images/ie_key_tools_sprite.gif"); background-position: right -116px; } .ie6 .shadow-wrap ul#key-tools li a:hover { background-image: url("../images/ie_key_tools_sprite_dark.gif"); } #footer-mobileapps { padding: 1em; } #footer-mobileapps h4 { margin: 0; } #footer-mobileapps ul { list-style-type: none; padding: 0; margin: 0; } #footer-mobileapps ul li { list-style-type: none; padding: 0; margin: 0; border: 0; } #footer-mobileapps ul li { border-bottom: 1px solid #AFAFAF; } #footer-mobileapps ul li:last-child { border-bottom: none; } #footer-mobileapps ul li a { display: block; padding: 0.5em 0; } #footer-help ul { list-style-type: none; padding: 0; margin: 0; } #footer-help ul li { list-style-type: none; padding: 0; margin: 0; border: 0; } #footer-help ul li { border-bottom: 1px solid #AFAFAF; } #footer-help ul li:last-child { border-bottom: none; } #footer-help ul li h4 { margin: 0.75em 0 0.25em 0; } #footer-help ul li p { font-size: 0.75em; } /*BUTTONS*/ button, input[type=submit], .btn { cursor: pointer; font-size: 0.875em; font-family: Helmet, Freesans, sans-serif; font-weight: bold; text-transform: uppercase; line-height: 1.375em; padding: 0.7em 0.5em 0.5em 0.5em; margin: 0; width: auto; height: auto; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background: #eeeeee; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #cccccc)); background: -webkit-linear-gradient(#eeeeee, #cccccc); background: -moz-linear-gradient(#eeeeee, #cccccc); background: -o-linear-gradient(#eeeeee, #cccccc); background: -ms-linear-gradient(#eeeeee, #cccccc); background: linear-gradient(#eeeeee, #cccccc); border: 1px solid #999999; color: #333333; } button:hover, input[type=submit]:hover, .btn:hover { background: #777777; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #999999), color-stop(100%, #777777)); background: -webkit-linear-gradient(#999999, #777777); background: -moz-linear-gradient(#999999, #777777); background: -o-linear-gradient(#999999, #777777); background: -ms-linear-gradient(#999999, #777777); background: linear-gradient(#999999, #777777); text-decoration: none; border: 1px solid #666666; color: white; } .green-btn, button.green-btn, input.green-btn { cursor: pointer; font-size: 0.875em; font-family: Helmet, Freesans, sans-serif; font-weight: bold; text-transform: uppercase; line-height: 1.375em; padding: 0.7em 0.5em 0.5em 0.5em; margin: 0; width: auto; height: auto; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background: #9fde23; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9fde23), color-stop(100%, #7fb900)); background: -webkit-linear-gradient(#9fde23, #7fb900); background: -moz-linear-gradient(#9fde23, #7fb900); background: -o-linear-gradient(#9fde23, #7fb900); background: -ms-linear-gradient(#9fde23, #7fb900); background: linear-gradient(#9fde23, #7fb900); border: 1px solid #5b9700; color: white; } .green-btn:hover, button.green-btn:hover, input.green-btn:hover { background: #9fde23; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7fb900), color-stop(100%, #9fde23)); background: -webkit-linear-gradient(#7fb900, #9fde23); background: -moz-linear-gradient(#7fb900, #9fde23); background: -o-linear-gradient(#7fb900, #9fde23); background: -ms-linear-gradient(#7fb900, #9fde23); background: linear-gradient(#7fb900, #9fde23); text-decoration: none; border: 1px solid #5b9700; color: white; } .red-btn, button.red-btn, input.red-btn { cursor: pointer; font-size: 0.875em; font-family: Helmet, Freesans, sans-serif; font-weight: bold; text-transform: uppercase; line-height: 1.375em; padding: 0.7em 0.5em 0.5em 0.5em; margin: 0; width: auto; height: auto; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background: #ff0038; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0038), color-stop(100%, #bf002a)); background: -webkit-linear-gradient(#ff0038, #bf002a); background: -moz-linear-gradient(#ff0038, #bf002a); background: -o-linear-gradient(#ff0038, #bf002a); background: -ms-linear-gradient(#ff0038, #bf002a); background: linear-gradient(#ff0038, #bf002a); border: 1px solid #80001c; color: white; } .red-btn:hover, button.red-btn:hover, input.red-btn:hover { background: #ff0038; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bf002a), color-stop(100%, #ff0038)); background: -webkit-linear-gradient(#bf002a, #ff0038); background: -moz-linear-gradient(#bf002a, #ff0038); background: -o-linear-gradient(#bf002a, #ff0038); background: -ms-linear-gradient(#bf002a, #ff0038); background: linear-gradient(#bf002a, #ff0038); text-decoration: none; border: 1px solid #80001c; color: white; } .final-submit, input.final-submit { margin: 1em 0.5em; float: right; } .button-right, .button-left, a.button-right, a.button-left { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; cursor: pointer; font-size: 1em; line-height: 1; margin: 0; border: 1px solid #999; color: #333; background: #eee; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; } .button-right, .button-left, a.button-right, a.button-left { *display: inline; } .button-right:hover, .button-left:hover, a.button-right:hover, a.button-left:hover { color: #fff; background: #777; text-decoration: none; border: 1px solid #666; } .button-right, a.button-right, :hover.button-right, a:hover.button-right { padding: 1em 3em 1em 1em; background-image: url("../images/sprite.png"); background-repeat: no-repeat; background-position: right -686px; } .button-left, a.button-left, :hover.button-left, a:hover.button-left { padding: 1em 1em 1em 3em; background-image: url("../images/sprite.png"); background-repeat: no-repeat; background-position: -18px -802px; } .big-green-banner { position: relative; z-index: 1000; top: -1.75em; background: #00bd08; color: #fff; padding: 1em; text-transform: uppercase; text-align: center; font-size: 0.875em; } .big-green-banner:before { content: ""; left: -0.5em; top: 0; position: absolute; width: 0; height: 0; border-left: 0.5em solid transparent; border-bottom: 0.5em solid #4B8304; } .banner { position: relative; z-index: 1100; } .banner p { position: absolute; top: -1.95em; right: 0; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; font-size: 0.6875em; line-height: 1em; padding: 0.5em 1em; margin: 0; color: #1a1a1a; background: #ccc; text-transform: uppercase; text-align: center; } .banner p { *display: inline; } .banner p:before { content: ""; left: -0.5em; top: 0; position: absolute; width: 0; height: 0; border-left: 0.5em solid transparent; border-bottom: 0.5em solid #888; } .banner p#fixed { color: #fff; background: #00bd08; } .banner p#fixed:before { border-bottom: 0.5em solid #4B8304; } /*OTHER*/ .plain-list { list-style-type: none; padding: 0; margin: 0; } .plain-list li { list-style-type: none; padding: 0; margin: 0; border: 0; } .plain-list li { margin-bottom: 1em; } .issue-list { margin: 0 0 1em 0; padding: 0; border-bottom: 0.25em solid #ffd000; } .issue-list li { list-style: none; background: #f6f6f6; margin: 0.25em 0 0 0; padding: 0.5em 1em; display: block; } .issue-list li .update-wrap { display: table; width: 100%; } .issue-list li .update-wrap .update-text, .issue-list li .update-wrap .update-img { display: table-cell; vertical-align: top; } .issue-list li .update-wrap .update-text p, .issue-list li .update-wrap .update-img p { margin-bottom: 0.5em; } .issue-list li .update-wrap .update-img { text-align: right; } .issue-list li .update-wrap .update-img img { margin: -0.5em -1em 0 0.5em; height: auto; } .ie7 .issue-list li .update-wrap .update-text, .ie7 .issue-list li .update-wrap .update-text { float: left; width: 19em; } .ie7 .issue-list li .update-wrap .update-img, .ie7 .issue-list li .update-wrap .update-img { float: right; } .issue-list-a, .list-a { margin: 0 0 1em 0; padding: 0; border-bottom: 0.25em solid #ffd000; } .issue-list-a li, .list-a li { list-style: none; margin: 0; padding: 0; } .issue-list-a li a, .list-a li a { margin: 0.25em 0 0 0; display: table; background: #f6f6f6; color: #222222; width: 100%; } .issue-list-a li a:hover, .list-a li a:hover { text-decoration: none; color: #222222; background: #e6e6e6; } .issue-list-a li a .text, .list-a li a .text, .issue-list-a li a .img, .list-a li a .img { display: table-cell; vertical-align: top; } .issue-list-a li a .img, .list-a li a .img { text-align: right; } .issue-list-a li a .img img, .list-a li a .img img { height: auto; } .issue-list-a li a .text, .list-a li a .text { padding: 0.25em 1em; } .issue-list-a li a .text h4, .list-a li a .text h4 { margin: 0; } .issue-list-a li a .text small, .list-a li a .text small, .issue-list-a li a .text .small-print, .list-a li a .text .small-print { color: #666; } .issue-list-a li > p, .list-a li > p { margin: 0.25em 0 0 0; padding: 0.5em 1em; background: #f6f6f6; } .list-a a { padding: 0.5em 1em; font-weight: bold; } .ie6 .issue-list-a, .ie6 .list-a, .ie7 .issue-list-a, .ie7 .list-a { overflow: hidden; } .ie6 .issue-list-a li a, .ie6 .list-a li a, .ie7 .issue-list-a li a, .ie7 .list-a li a { clear: both; width: auto; display: block; overflow: hidden; } .ie6 .issue-list-a li a .text, .ie6 .list-a li a .text, .ie7 .issue-list-a li a .text, .ie7 .list-a li a .text { float: left; width: 18em; } .ie6 .issue-list-a li a .img, .ie6 .list-a li a .img, .ie7 .issue-list-a li a .img, .ie7 .list-a li a .img { width: 6.25em; float: right; } .ie6 .issue-list-a li a, .ie6 .list-a li a { height: 5.5em; } .ie6 .issue-list-a li a .img img, .ie6 .list-a li a .img img { height: 60px; } .update-img a { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; position: relative; } .update-img a { *display: inline; } .update-img a span { position: absolute; top: 0; right: 0; display: block; width: 20px; height: 20px; opacity: 0.5; background: white url(images/sprite.png) -16px -1098px no-repeat; font: 0/0 a; color: transparent; } .update-img a:hover span { opacity: 1; } .issue-list li .update-wrap .update-img a span { right: -16px; top: -8px; } .problem-header { margin-bottom: 1em; } .problem-header .update-img { float: right; margin-left: 0.5em; margin-bottom: 0.5em; } #map_box { background: #333; height: 29em; margin-bottom: 1em; overflow: hidden; position: relative; } #map_box #map { width: 100%; height: 100%; } #fms_pan_zoom { right: 0.5em !important; top: 0.5em !important; left: 0.5em !important; } .ie6 #fms_pan_zoom { left: auto !important; } #fms_pan_zoom_panup, #fms_pan_zoom_pandown, #fms_pan_zoom_panleft, #fms_pan_zoom_panright, #fms_pan_zoom_zoomin, #fms_pan_zoom_zoomout { width: 36px !important; height: 36px !important; text-indent: -999999px; opacity: 0.85; background: url("../images/sprite.png") no-repeat; filter: none !important; } #fms_pan_zoom_panup:hover, #fms_pan_zoom_pandown:hover, #fms_pan_zoom_panleft:hover, #fms_pan_zoom_panright:hover, #fms_pan_zoom_zoomin:hover, #fms_pan_zoom_zoomout:hover { opacity: 1; } #fms_pan_zoom_zoomworld { display: none !important; visibility: none !important; } #fms_pan_zoom_panup { background-position: -42px -222px; right: 30px !important; left: auto !important; top: 0 !important; } #fms_pan_zoom_pandown { background-position: -42px -282px; right: 30px !important; left: auto !important; top: 72px !important; } #fms_pan_zoom_panleft { background-position: -12px -252px; width: 48px !important; right: 48px !important; left: auto !important; top: 36px !important; } #fms_pan_zoom_panright { background-position: -60px -252px; width: 48px !important; right: 0 !important; left: auto !important; top: 36px !important; } #fms_pan_zoom_zoomin { background-position: -152px -223px; height: 44px !important; left: 0 !important; top: 0 !important; } #fms_pan_zoom_zoomout { background-position: -152px -259px; height: 44px !important; left: 0 !important; top: 44px !important; } #sub_map_links { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1100; background: #333; background: rgba(0, 0, 0, 0.7); margin: 0; } #sub_map_links a { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; font-size: 0.6875em; color: #fff; padding: 0.6em 3em 0.5em 1em; background-repeat: no-repeat; } #sub_map_links a { *display: inline; } #sub_map_links a#hide_pins_link { background-image: url("../images/sprite.png"); background-position: right -3976px; } #sub_map_links a#all_pins_link { background-image: url("../images/sprite.png"); background-position: right -4022px; } #sub_map_links a#map_permalink { background-image: url("../images/sprite.png"); background-position: right -4070px; } #sub_map_links a.feed { background-image: url("../images/sprite.png"); background-position: right -3936px; } #sub_map_links a:hover { background-color: #000; text-decoration: none; } .ie6 #sub_map_links a#hide_pins_link { background-image: url("../images/ie_sub_map_links_sprite.gif"); background-position: right 1px; } .ie6 #sub_map_links a#all_pins_link { background-image: url("../images/ie_sub_map_links_sprite.gif"); background-position: right -45px; } .ie6 #sub_map_links a#map_permalink { background-image: url("../images/ie_sub_map_links_sprite.gif"); background-position: right -93px; } #mob_sub_map_links { position: absolute; z-index: 1100; bottom: 0; display: table; margin: 0; width: 100%; background: rgba(0, 0, 0, 0.7); } #mob_sub_map_links a { color: #fff; width: 50%; padding: 0.5em 0; font-size: 1em; display: table-cell; text-align: center; } #mob_sub_map_links a:hover { background: #000; text-decoration: none; } #mob_sub_map_links.map_complete { background: none; display: block; border-bottom: 4px solid #fff; } #mob_sub_map_links.map_complete a#try_again { display: block; margin: 0 auto 6em auto; background: rgba(0, 0, 0, 0.8); -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; -o-border-radius: 0.5em; -ms-border-radius: 0.5em; -khtml-border-radius: 0.5em; border-radius: 0.5em; } #mob_sub_map_links.map_complete a#mob_ok { position: absolute; right: 1em; bottom: 0; height: 20px; padding-top: 30px; display: block; width: 4em; background: white url("../images/sprite.png") 12px -4140px no-repeat; color: #000; } .mobile-map-banner { margin: 0; position: absolute; top: 0; left: 0; right: 0; font-size: 0.75em; background: rgba(0, 0, 0, 0.7); padding: 0.75em 30px; } .mobile-map-banner a { cursor: pointer; font-size: 0.875em; font-family: Helmet, Freesans, sans-serif; font-weight: bold; text-transform: uppercase; line-height: 1.375em; padding: 0.7em 0.5em 0.5em 0.5em; margin: 0; width: auto; height: auto; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background: #333333; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(100%, #1a1a1a)); background: -webkit-linear-gradient(#333333, #1a1a1a); background: -moz-linear-gradient(#333333, #1a1a1a); background: -o-linear-gradient(#333333, #1a1a1a); background: -ms-linear-gradient(#333333, #1a1a1a); background: linear-gradient(#333333, #1a1a1a); border: 1px solid #1a1a1a; color: white; font-weight: normal; font-size: 0.875em; line-height: 1; padding: 0.5em 0.75em; position: absolute; left: 0.3em; top: 0.3em; } .mobile-map-banner a:hover { background: #333333; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1a1a1a), color-stop(100%, #333333)); background: -webkit-linear-gradient(#1a1a1a, #333333); background: -moz-linear-gradient(#1a1a1a, #333333); background: -o-linear-gradient(#1a1a1a, #333333); background: -ms-linear-gradient(#1a1a1a, #333333); background: linear-gradient(#1a1a1a, #333333); text-decoration: none; border: 1px solid #1a1a1a; color: white; } .olControlAttribution { bottom: 3.25em !important; right: 0.25em !important; left: 0.25em !important; color: #222222; font-size: 0.75em !important; } .olControlAttribution img { vertical-align: bottom; } .olControlPermalink { bottom: 3px !important; right: 3px; } /* Drag is only present in noscript form. XXX Copy from core. */ #drag input, #drag img { position: absolute; border: none; max-width: none; } #drag input { cursor: crosshair; background-color: #cccccc; } #drag img { cursor: move; } #drag img.pin { z-index: 100; background-color: inherit; } #drag a img.pin { cursor: pointer; cursor: hand; } a.rap-notes-trigger, a:hover.rap-notes-trigger { display: block; width: 90%; padding-left: 5%; padding-right: 5%; } .rap-notes { margin: 1em 0; } #problems-nav { padding: 0 1em; overflow: hidden; border-bottom: 0.25em solid #333; } #problems-nav ul { list-style-type: none; padding: 0; margin: 0; display: table; width: 100%; } #problems-nav ul li { list-style-type: none; padding: 0; margin: 0; border: 0; } #problems-nav ul li { display: table-cell; border-right: 0.25em solid #fff; } #problems-nav ul li:last-child { border-right: none; } #problems-nav ul li a { display: block; background: #e2e2e2; color: #333; padding: 1em; text-transform: uppercase; text-align: center; } #problems-nav ul li a:hover { text-decoration: none; background: #e6e6e6; } #problems-nav ul li a.active { background: #333; color: #fff; } .ie6 #problems-nav, .ie7 #problems-nav { clear: both; margin: 0; padding: 0; } .ie6 #problems-nav ul li, .ie7 #problems-nav ul li { float: left; } table.nicetable { width: 100%; margin-bottom: 2em; } table.nicetable thead { border-bottom: 0.25em solid #ccc; } table.nicetable thead th { font-size: 0.75em; } table.nicetable tr.a { background: #f6f6f6; } table.nicetable tr:nth-child(even) { background: #f6f6f6; } table.nicetable tr.gone { color: #666666; background-color: #cccccc; } table.nicetable tr:hover { background: #FFF5CC; cursor: pointer; } table.nicetable tr td { padding: 0.25em; } table.nicetable tr td a:hover { text-decoration: none; } table.nicetable .title { text-align: left; } table.nicetable .data { width: 12%; } .promo { background: #ffd000; padding: 1em; margin-bottom: 1em; overflow: hidden; position: relative; } .promo .close-promo { position: absolute; top: 0.5em; right: 0.5em; display: block; width: 16px; height: 16px; text-indent: -999999px; background: url(images/sprite.png) -341px -263px no-repeat; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; } .promo .close-promo:hover { background: #222222 url(images/sprite.png) -341px -223px no-repeat; } .alert { background: #ff0000; padding: 1em; margin-bottom: 1em; color: #fff; } .alert a, .alert a:hover { color: #ffd000; } .pagination { text-align: center; padding: 0.5em 1em; background: #eee; position: relative; } .pagination .prev { position: absolute; left: 0.5em; } .pagination .next { position: absolute; right: 0.5em; } .pagination a { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; background: #ffd000; padding-left: 0.5em; padding-right: 0.5em; color: #1a1a1a; } .pagination a { *display: inline; } .pagination a:hover { color: #1a1a1a; text-decoration: none; background: #e7bd00; } .desk-only { display: none !important; } .js .hidden-js { display: none; visibility: hidden; } .no-js .hidden-nojs { display: none !important; visibility: hidden; } /* Front page */ #front-main { text-align: center; } #front-main h2 { font-style: italic; font-family: Helmet, Freesans, sans-serif; font-size: 1.1875em; color: #4d4d4d; } #front-main #postcodeForm { padding: 1em; color: #222222; background: #ffd000; font-family: Helmet, Freesans, sans-serif; } #front-main #postcodeForm label { margin: 0; } #front-main #postcodeForm div { display: table; width: 100%; background: #fff; border: 1px solid #f3b11e; } #front-main #postcodeForm div input#pc { display: table-cell; margin: 0; padding: 0.25em 2%; width: 82%; border: none; background: none; line-height: 1.5em; } #front-main #postcodeForm div input#submit { display: table-cell; border: none; padding: 0; margin: 0; width: 14%; height: 35px; background: #000; color: #fff; text-transform: uppercase; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; } #front-main #postcodeForm div input#submit:hover { background: #333; } #front-main a#geolocate_link { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; vertical-align: top; background: #1a1a1a; color: #C8C8C8; padding: 0.5em; font-family: Helmet, Freesans, sans-serif; font-size: 0.8125em; -moz-border-radius: 0 0 0.25em 0.25em; -webkit-border-radius: 0 0 0.25em 0.25em; -o-border-radius: 0 0 0.25em 0.25em; -ms-border-radius: 0 0 0.25em 0.25em; -khtml-border-radius: 0 0 0.25em 0.25em; border-radius: 0 0 0.25em 0.25em; } #front-main a#geolocate_link { *display: inline; } #front-main a#geolocate_link:hover { text-decoration: none; background: #2a2a2a; } #front-howto #front_stats { display: table; width: 100%; color: #222222; background: #ffd000; font-family: Helmet, Freesans, sans-serif; } #front-howto #front_stats div { display: table-cell; text-align: center; padding: 1em; line-height: 1.25em; font-size: 0.8125em; font-weight: bold; } #front-howto #front_stats div big { display: block; margin-bottom: 0.5em; font-size: 1.5385em; } #front-recently .issue-list-a, #front-recently .list-a { border-bottom: none; margin-bottom: 0; } #alerts ul { margin-bottom: 1em; } #alerts li { padding: 0em; margin-bottom: 0.5em; } #alerts .a { background: #f6f6f6; } #alerts img[width="16"] { float: right; }