aboutsummaryrefslogtreecommitdiffstats
path: root/phonegap/www/css
diff options
context:
space:
mode:
Diffstat (limited to 'phonegap/www/css')
-rw-r--r--phonegap/www/css/base.css2148
-rw-r--r--phonegap/www/css/layout.css1012
-rw-r--r--phonegap/www/css/mobile.css179
3 files changed, 3339 insertions, 0 deletions
diff --git a/phonegap/www/css/base.css b/phonegap/www/css/base.css
new file mode 100644
index 000000000..35b1853a2
--- /dev/null
+++ b/phonegap/www/css/base.css
@@ -0,0 +1,2148 @@
+/* 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;
+}
diff --git a/phonegap/www/css/layout.css b/phonegap/www/css/layout.css
new file mode 100644
index 000000000..568c81389
--- /dev/null
+++ b/phonegap/www/css/layout.css
@@ -0,0 +1,1012 @@
+/* COLOURS */
+.desk-only {
+ display: block !important;
+}
+
+.mob-only {
+ display: none !important;
+}
+
+body {
+ background: #1a1a1a url../images/tile.jpg) 0 0 repeat;
+}
+
+body.white {
+ background: #FFFFFF;
+}
+
+.container {
+ margin: 0 auto;
+ padding: 0em;
+ width: 60em;
+ position: relative;
+ z-index: 1;
+}
+
+.ie6 .container, .ie7 .container {
+ z-index: 100;
+}
+
+.wrapper {
+ display: table;
+ caption-side: top;
+ width: 100%;
+}
+.wrapper .table-cell {
+ display: table-cell;
+}
+
+.ie6 .wrapper, .ie7 .wrapper {
+ padding-top: 4em;
+}
+
+.nav-wrapper {
+ display: table-caption;
+}
+.nav-wrapper .nav-wrapper-2 {
+ width: 100%;
+ min-height: 4em;
+ position: absolute;
+ border-top: 0.25em solid #ffd000;
+ z-index: 2;
+}
+
+.white .nav-wrapper .nav-wrapper-2 {
+ background: #1a1a1a url../images/tile.jpg) 0 0 repeat;
+}
+
+.ie6 .nav-wrapper, .ie7 .nav-wrapper {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+}
+.ie6 .nav-wrapper .nav-wrapper-2, .ie7 .nav-wrapper .nav-wrapper-2 {
+ position: static;
+}
+
+#site-header {
+ height: auto;
+ background: none;
+ border-top: 0px;
+}
+#site-header .container {
+ position: static;
+}
+
+#site-logo {
+ top: 0.9em;
+ position: absolute;
+ z-index: 3;
+}
+
+.ie6 #site-header, .ie7 #site-header {
+ height: 3em;
+}
+.ie6 #site-header .container, .ie7 #site-header .container {
+ position: relative;
+}
+.ie6 #site-logo, .ie7 #site-logo {
+ position: absolute;
+ top: -3.25em;
+}
+
+#nav-link {
+ left: -999999px;
+}
+
+#main-nav {
+ margin: 0 auto;
+ padding: 0em;
+ width: 60em;
+}
+#main-nav ul {
+ list-style: none;
+ padding: 0px;
+ margin: 0px;
+ float: right;
+}
+#main-nav ul li {
+ list-style: none;
+ display: inline;
+ margin: 0px;
+ padding: 0px;
+ float: left;
+}
+#main-nav ul li a,
+#main-nav ul li span {
+ display: block;
+ color: #fff;
+ background: none;
+ border-bottom: none;
+}
+#main-nav ul#main-menu li a, #main-nav ul#main-menu li span {
+ padding: 0.75em;
+ font-size: 0.9em;
+}
+#main-nav ul#main-menu li a:hover {
+ background: #444;
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(10%, #444444), color-stop(95%, #444444), color-stop(100%, #111111));
+ background: -webkit-linear-gradient(#000000, #444444 10%, #444444 95%, #111111);
+ background: -moz-linear-gradient(#000000, #444444 10%, #444444 95%, #111111);
+ background: -o-linear-gradient(#000000, #444444 10%, #444444 95%, #111111);
+ background: -ms-linear-gradient(#000000, #444444 10%, #444444 95%, #111111);
+ background: linear-gradient(#000000, #444444 10%, #444444 95%, #111111);
+}
+#main-nav ul#main-menu li a.report-a-problem-btn {
+ background: #ffd000;
+ padding: 0.25em;
+ margin: 0.5em;
+ color: #333;
+ -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;
+}
+#main-nav ul#main-menu li a.report-a-problem-btn:hover {
+ background: #ffe700;
+}
+#main-nav ul#main-menu li span {
+ color: #ffd000;
+}
+#main-nav ul#mysoc-menu {
+ padding: 0em 0.5em;
+ margin-left: 0.25em;
+ background: #ffd000;
+ -moz-border-radius: 0 0 0.375em 0.375em;
+ -webkit-border-radius: 0 0 0.375em 0.375em;
+ -o-border-radius: 0 0 0.375em 0.375em;
+ -ms-border-radius: 0 0 0.375em 0.375em;
+ -khtml-border-radius: 0 0 0.375em 0.375em;
+ border-radius: 0 0 0.375em 0.375em;
+ -moz-box-shadow: 0em 0.3em 0.1em 0em black;
+ -webkit-box-shadow: 0em 0.3em 0.1em 0em black;
+ -o-box-shadow: 0em 0.3em 0.1em 0em black;
+ box-shadow: 0em 0.3em 0.1em 0em black;
+}
+#main-nav ul#mysoc-menu li a {
+ color: #000;
+ text-transform: uppercase;
+ font-size: 0.6875em;
+ padding: 1.3em 0.7em 1em 0.7em;
+}
+#main-nav ul#mysoc-menu li a#mysoc-logo {
+ width: 84px;
+ height: 16px;
+ background-position: -260px -43px;
+ opacity: 0.8;
+}
+#main-nav ul#mysoc-menu li a#mysoc-logo:hover {
+ opacity: 1;
+}
+#main-nav ul#mysoc-menu li a:hover {
+ color: #fff;
+}
+
+.content {
+ width: 27em;
+ margin-top: 3em;
+ background: #fff;
+ padding: 1em;
+ padding-bottom: 3em;
+ margin-left: 0.5em;
+ margin-bottom: -1em;
+ -moz-box-shadow: 0px 0px 6px 1px black;
+ -webkit-box-shadow: 0px 0px 6px 1px black;
+ -o-box-shadow: 0px 0px 6px 1px black;
+ box-shadow: 0px 0px 6px 1px black;
+}
+
+body.white .content {
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ -o-box-shadow: none;
+ box-shadow: none;
+}
+
+.ie6 .content, .ie7 .content, .ie8 .content {
+ border: 1px solid black;
+ margin: 0;
+}
+
+.ie8 .content {
+ margin-top: 3em;
+}
+
+body.white.mappage .content {
+ -moz-box-shadow: 0px 0px 6px 1px black;
+ -webkit-box-shadow: 0px 0px 6px 1px black;
+ -o-box-shadow: 0px 0px 6px 1px black;
+ box-shadow: 0px 0px 6px 1px black;
+}
+
+body.mappage .content {
+ float: left;
+}
+body.mappage #main-nav ul#main-menu li a,
+body.mappage #main-nav ul#main-menu li span {
+ padding: 1.4em 0.75em 1.35em 0.75em;
+}
+body.mappage #main-nav ul#main-menu li a.report-a-problem-btn {
+ padding: 0.5em;
+ margin: 0.9em 0.25em 0.85em 0.25em;
+}
+body.mappage .nav-wrapper .nav-wrapper-2 {
+ position: fixed;
+ background: #222;
+ 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);
+}
+body.mappage #site-logo {
+ position: fixed;
+}
+
+.ie6 body.mappage .container, .ie7 body.mappage .container {
+ float: left;
+ width: 27em;
+ margin-left: 1.4em;
+}
+.ie6 body.mappage .nav-wrapper, .ie7 body.mappage .nav-wrapper {
+ z-index: 1;
+}
+.ie6 body.mappage .nav-wrapper .nav-wrapper-2, .ie7 body.mappage .nav-wrapper .nav-wrapper-2 {
+ position: static;
+}
+.ie6 body.mappage #site-logo, .ie7 body.mappage #site-logo {
+ position: absolute;
+ top: -3.25em;
+}
+
+.ie6 body.mappage .container {
+ margin-left: 0.7em;
+}
+
+.ie8 body.mappage .nav-wrapper {
+ position: relative;
+ z-index: 0;
+}
+.ie8 body.mappage .nav-wrapper .nav-wrapper-2 {
+ position: static;
+}
+.ie8 body.mappage #site-logo {
+ position: absolute;
+ top: -3.25em;
+}
+.ie8 body.mappage #user-meta p {
+ top: 1em;
+}
+.ie8 body.mappage .content {
+ margin-top: 3em;
+}
+
+body.fullwidthpage .content, body.twothirdswidthpage .content {
+ width: 57em;
+}
+body.fullwidthpage .intro, body.twothirdswidthpage .intro {
+ width: 40em;
+}
+
+body.twothirdswidthpage .content {
+ width: 40em;
+ position: relative;
+}
+body.twothirdswidthpage .content aside {
+ background: #eee;
+ position: absolute;
+ left: 42em;
+ top: 0;
+ z-index: -1;
+ width: 13em;
+ padding: 1em;
+ -moz-box-shadow: 0px 0px 6px 1px black;
+ -webkit-box-shadow: 0px 0px 6px 1px black;
+ -o-box-shadow: 0px 0px 6px 1px black;
+ box-shadow: 0px 0px 6px 1px black;
+}
+body.twothirdswidthpage .content aside h2 {
+ margin-top: 0;
+}
+body.twothirdswidthpage .content aside img {
+ margin-bottom: 0.25em;
+}
+body.twothirdswidthpage .content .sticky-sidebar {
+ position: absolute;
+ left: 42em;
+ z-index: -1;
+}
+body.twothirdswidthpage .content .sticky-sidebar aside {
+ position: fixed;
+ top: 7em;
+ left: auto;
+}
+
+.ie6 body.twothirdswidthpage .content .sticky-sidebar {
+ position: static;
+}
+.ie6 body.twothirdswidthpage .content .sticky-sidebar aside {
+ position: absolute;
+ left: 42em;
+ top: 0;
+}
+
+.tablewrapper {
+ display: table;
+ width: 100%;
+ padding: 1em 0;
+}
+.tablewrapper > div {
+ display: table-cell;
+ width: 50%;
+}
+.tablewrapper .full-width {
+ width: auto;
+ margin: 0;
+}
+
+.ie6 .tablewrapper, .ie7 .tablewrapper {
+ display: block;
+}
+.ie6 .tablewrapper div, .ie7 .tablewrapper div {
+ width: 48%;
+ display: block;
+ float: left;
+ border: none !important;
+}
+
+.bordered {
+ margin: 0 -1em;
+ padding: 0 1em;
+ width: auto;
+ border-top: 0.25em solid #ffd000;
+}
+
+#footer-mobileapps {
+ border-right: 1em solid #fff;
+ background: none;
+ padding: 0;
+ -moz-box-shadow: inset rgba(0, 0, 0, 0) 0 0 0;
+ -webkit-box-shadow: inset rgba(0, 0, 0, 0) 0 0 0;
+ -o-box-shadow: inset rgba(0, 0, 0, 0) 0 0 0;
+ box-shadow: inset rgba(0, 0, 0, 0) 0 0 0;
+}
+#footer-mobileapps h2 {
+ color: #222;
+ margin-top: 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;
+ float: left;
+}
+#footer-mobileapps ul li a {
+ float: left;
+ display: block;
+}
+#footer-mobileapps ul li {
+ border-bottom: none;
+ float: left;
+ margin: 0 1em 1em 0;
+}
+#footer-mobileapps ul li a {
+ color: #222;
+ padding: 0;
+ width: 96px;
+ height: 32px;
+ margin: 0 auto;
+ text-indent: -999999px;
+ background: url(../images/sprite.png) -12px -3610px no-repeat;
+ opacity: 0.8;
+}
+#footer-mobileapps ul li a:hover {
+ opacity: 1;
+}
+#footer-mobileapps ul li a.m-app-iphone {
+ background-position: -12px -3610px;
+}
+#footer-mobileapps ul li a.m-app-iphone-streetreport {
+ background-position: -12px -3678px;
+ height: 50px;
+}
+#footer-mobileapps ul li a.m-app-droid {
+ background-position: -12px -3756px;
+}
+#footer-mobileapps ul li a.m-app-nokia {
+ background-position: -12px -3820px;
+ width: 74px;
+}
+
+.ie6 #footer-mobileapps, .ie7 #footer-mobileapps {
+ margin: 0 0.5em;
+ margin-right: 2%;
+}
+
+.ie6 #footer-mobileapps ul li a {
+ background: url(../images/ie_mobileapps.gif) -1px -1px no-repeat;
+}
+.ie6 #footer-mobileapps ul li a.m-app-iphone-streetreport {
+ background-position: -1px -69px;
+ height: 50px;
+}
+.ie6 #footer-mobileapps ul li a.m-app-droid {
+ background-position: -1px -148px;
+}
+.ie6 #footer-mobileapps ul li a.m-app-nokia {
+ background-position: -1px -212px;
+ width: 74px;
+}
+
+#footer-ads {
+ border-left: 1em solid #fff;
+}
+#footer-ads ul {
+ display: table;
+}
+#footer-ads ul li {
+ display: table-cell;
+ border-bottom: none;
+}
+#footer-ads ul li:last-child {
+ border-left: 1.25em solid #fff;
+}
+
+.ie6 #footer-ads, .ie7 #footer-ads {
+ margin-left: 2%;
+}
+.ie6 #footer-ads ul, .ie7 #footer-ads ul {
+ width: 100%;
+}
+.ie6 #footer-ads ul li, .ie7 #footer-ads ul li {
+ float: left;
+ width: 45%;
+}
+
+#map_box {
+ position: absolute;
+ height: 29em;
+ width: 29em;
+ right: 1em;
+ top: 3em;
+ z-index: 1;
+}
+
+#fms_pan_zoom {
+ top: 4.75em !important;
+}
+
+#fms_pan_zoom_zoomin {
+ left: auto !important;
+ right: 30px;
+ top: 130px !important;
+}
+
+#fms_pan_zoom_zoomout {
+ left: auto !important;
+ right: 30px;
+ top: 174px !important;
+}
+
+.olControlAttribution {
+ bottom: 0.5em !important;
+ left: auto !important;
+}
+
+#sub_map_links {
+ left: auto;
+ bottom: auto;
+ bottom: 2em;
+}
+#sub_map_links #map_links_toggle {
+ display: block;
+ cursor: pointer;
+ position: absolute;
+ left: -1em;
+ width: 1em;
+ height: 100%;
+ background: black url(../images/sprite.png) right -4119px no-repeat;
+ -moz-border-radius: 0.25em 0 0 0.25em;
+ -webkit-border-radius: 0.25em 0 0 0.25em;
+ -o-border-radius: 0.25em 0 0 0.25em;
+ -ms-border-radius: 0.25em 0 0 0.25em;
+ -khtml-border-radius: 0.25em 0 0 0.25em;
+ border-radius: 0.25em 0 0 0.25em;
+}
+#sub_map_links #map_links_toggle:hover {
+ left: -1.5em;
+ border-right: 0.5em solid #000;
+}
+#sub_map_links #map_links_toggle.closed {
+ background-position: right -4159px;
+}
+
+.ie6 #sub_map_links #map_links_toggle {
+ height: 1.75em;
+ background: black url(../images/ie_sub_map_links_sprite.gif") center -143px no-repeat;
+}
+.ie6 #sub_map_links #map_links_toggle.closed {
+ background-position: center -183px;
+}
+
+#user-meta {
+ display: block;
+ position: relative;
+ max-width: 57em;
+ margin: 0 auto;
+}
+#user-meta p {
+ display: -moz-inline-box;
+ -moz-box-orient: vertical;
+ display: inline-block;
+ vertical-align: middle;
+ *vertical-align: auto;
+ position: absolute;
+ top: 1em;
+ height: 2em;
+ padding: 0.25em 6em 0.5em 0.5em;
+ -moz-box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 4px 1px;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 4px 1px;
+ -o-box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 4px 1px;
+ box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 4px 1px;
+}
+#user-meta p {
+ *display: inline;
+}
+#user-meta p a {
+ top: 0.5em;
+ right: 0.5em;
+ font-size: 0.6875em;
+ padding: 0.5em 0.75em;
+ line-height: 1em;
+}
+#user-meta p a:hover {
+ text-decoration: none;
+ background: #444;
+}
+
+.ie6 #user-meta, .ie7 #user-meta {
+ z-index: 1;
+}
+
+.ie8 #user-meta p {
+ top: 5em;
+}
+
+.shadow-wrap {
+ position: fixed;
+ bottom: 0;
+ width: 29em;
+ overflow: hidden;
+ padding-top: 3em;
+}
+.shadow-wrap ul#key-tools {
+ border-top: 0.25em solid #ffd000;
+ margin: 0;
+ -moz-box-shadow: 0em 0px 1em 1em white;
+ -webkit-box-shadow: 0em 0px 1em 1em white;
+ -o-box-shadow: 0em 0px 1em 1em white;
+ box-shadow: 0em 0px 1em 1em white;
+}
+.shadow-wrap ul#key-tools li {
+ border: none;
+}
+.shadow-wrap ul#key-tools li a {
+ font-size: 0.75em;
+ color: #888888;
+ padding: 0.5em 1.5em 0.5em 0;
+ text-transform: none;
+}
+.shadow-wrap ul#key-tools li a.abuse {
+ background-image: url../images/sprite.png);
+ background-position: right -2935px;
+}
+.shadow-wrap ul#key-tools li a.feed {
+ background-image: url../images/sprite.png);
+ background-position: right -3074px;
+}
+.shadow-wrap ul#key-tools li a.chevron {
+ background-image: url../images/sprite.png);
+ background-position: right -3225px;
+}
+.shadow-wrap ul#key-tools li a.hover {
+ background-image: url../images/sprite.png);
+ background-position: right -1876px;
+}
+.shadow-wrap ul#key-tools.singleton li {
+ text-align: right;
+}
+.shadow-wrap ul#key-tools.singleton li a {
+ padding-right: 3em;
+}
+.shadow-wrap.active {
+ padding: 3em 0;
+ position: static;
+}
+
+.ie6 .shadow-wrap {
+ padding-top: 0;
+}
+
+.big-green-banner {
+ top: auto;
+ right: -1.25em;
+ margin-left: -2em;
+ font-size: 1.375em;
+ padding: 1em 3em 1em 1em;
+ background: #00bd08 url../images/sprite.png) right -2188px no-repeat;
+}
+.big-green-banner:before {
+ right: 0;
+ left: auto;
+ top: -0.5em;
+ position: absolute;
+ border-top: 0.5em solid transparent;
+ border-left: 0.5em solid #4B8304;
+ border-bottom: none;
+}
+
+.ie6 .big-green-banner {
+ background: #00bd08 url../images/ie_green_chevron.gif) right center no-repeat;
+}
+
+.banner p {
+ top: -2.25em;
+ padding: 1em;
+}
+.banner p:before {
+ left: -0.75em;
+ border-left: 0.75em solid transparent;
+ border-bottom: 0.75em solid #888;
+}
+.banner p#fixed {
+ padding-top: 5em;
+ background-image: url../images/sprite.png);
+ background-position: -324px -326px;
+ background-repeat: no-repeat;
+}
+.banner p#fixed:before {
+ border-bottom: 0.75em solid #4B8304;
+}
+
+.ie6 .banner p {
+ top: -1.5em;
+}
+.ie6 .banner p#fixed {
+ background-image: url../images/ie_fixed.gif);
+ background-position: center 0.75em;
+}
+
+.full-width {
+ margin: 0 0 0em -1em;
+ width: 29em;
+}
+
+/*FORMS*/
+input[type=text],
+input[type=password],
+input[type=email],
+textarea {
+ width: 25em;
+}
+
+.form-box {
+ max-width: 25em;
+}
+
+/* form errors */
+div.form-error,
+p.form-error {
+ display: block;
+ width: 24.7em;
+}
+
+input.form-error,
+textarea.form-error {
+ -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;
+}
+
+#report-a-problem-sidebar {
+ position: absolute;
+ z-index: -1;
+ left: 29.5em;
+ top: 5em;
+ width: 15em;
+ -moz-box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 4px 1px;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 4px 1px;
+ -o-box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 4px 1px;
+ box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 4px 1px;
+}
+#report-a-problem-sidebar .sidebar-tips {
+ background: #eeeeee;
+ padding: 1em;
+ font-size: 0.75em;
+}
+#report-a-problem-sidebar .sidebar-notes {
+ background: #333333;
+ padding: 1em;
+ color: #ffffff;
+ font-size: 0.75em;
+}
+
+.ie6 #report-a-problem-sidebar, .ie7 #report-a-problem-sidebar {
+ left: 29em;
+}
+
+.no-js #report-a-problem-sidebar {
+ position: static;
+ width: auto;
+ -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+ -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+ -o-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}
+.no-js #report-a-problem-sidebar .sidebar-tips,
+.no-js #report-a-problem-sidebar .sidebar-notes {
+ font-size: 1em;
+}
+
+.general-sidebar-notes {
+ position: absolute;
+ left: 29.5em;
+ width: 15em;
+ z-index: -1;
+ -moz-box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 4px 1px;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 4px 1px;
+ -o-box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 4px 1px;
+ box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 4px 1px;
+}
+.general-sidebar-notes p {
+ background: #eeeeee;
+ font-size: 0.75em;
+ padding: 0.75em;
+ margin: 0;
+}
+.general-sidebar-notes p.dark {
+ background: #333333;
+ color: #ffffff;
+}
+
+.problem-header {
+ min-height: 19em;
+}
+
+body.frontpage .table-cell > .container {
+ width: 100%;
+}
+body.frontpage .table-cell .content {
+ padding-top: 14em;
+ margin: 0 auto;
+}
+body.frontpage .nav-wrapper-2 {
+ height: 6em;
+}
+body.frontpage #site-header {
+ height: 9em;
+}
+body.frontpage #site-logo {
+ top: 3em;
+ width: 300px;
+ height: 60px;
+ background-position: -2px -108px;
+}
+body.frontpage #user-meta p {
+ top: -2em;
+ right: 0;
+}
+
+body.frontpage.white #site-header {
+ background: #1a1a1a url../images/tile.jpg) 0 0 repeat;
+}
+
+.ie6 body.frontpage #site-header, .ie7 body.frontpage #site-header, .ie8 body.frontpage #site-header {
+ height: 4em;
+}
+.ie6 body.frontpage #site-logo, .ie7 body.frontpage #site-logo, .ie8 body.frontpage #site-logo {
+ position: relative;
+ width: 60em;
+ margin: 0 auto;
+}
+.ie6 body.frontpage .wrapper .content, .ie7 body.frontpage .wrapper .content, .ie8 body.frontpage .wrapper .content {
+ padding-top: 12em;
+ margin-top: 1em;
+}
+.ie6 body.frontpage #user-meta p, .ie7 body.frontpage #user-meta p, .ie8 body.frontpage #user-meta p {
+ top: -1em;
+}
+
+.ie6 body.frontpage #site-logo, .ie7 body.frontpage #site-logo {
+ top: -1em;
+}
+
+.ie6 body.frontpage #site-logo {
+ background: url../images/ie_front_logo.gif) 0 0 no-repeat;
+}
+
+.ie8 body.frontpage .wrapper .content {
+ margin-top: 5em;
+}
+.ie8 body.frontpage #user-meta p {
+ top: 3em;
+}
+
+#front-main {
+ background: #ffd000;
+ position: absolute;
+ width: 100%;
+ left: 0;
+ top: 1em;
+}
+#front-main #front-main-container {
+ max-width: 57em;
+ margin: 0 auto;
+}
+#front-main h2 {
+ font-style: normal;
+ margin: 0;
+ color: #222;
+}
+#front-main #postcodeForm {
+ overflow: hidden;
+ margin-right: 0.5em;
+}
+#front-main #postcodeForm label {
+ margin: 0.5em 0;
+}
+#front-main #postcodeForm div {
+ display: block;
+ margin: 0 auto;
+ width: 20em;
+ overflow: hidden;
+}
+#front-main #postcodeForm div input#pc {
+ display: block;
+ float: left;
+ padding: 0.25em 0.5em;
+ height: 1.5em;
+ width: 16em;
+}
+#front-main #postcodeForm div input#submit {
+ display: block;
+ float: right;
+ width: 3em;
+ height: 2.3em;
+ padding-top: 0.2em;
+}
+#front-main a#geolocate_link {
+ background: none;
+ color: #222;
+ margin: -1em 0 0.5em 0;
+}
+#front-main a#geolocate_link:hover {
+ text-decoration: underline;
+ background: none;
+}
+
+.ie6 #front-main, .ie7 #front-main {
+ top: 2em;
+ padding-top: 1em;
+}
+
+#front-howto {
+ border-right: 1em solid #fff;
+}
+#front-howto #front_stats {
+ background: none;
+ border-top: 0.25em solid #ffd000;
+ padding-top: 1em;
+}
+#front-howto #front_stats div big {
+ color: #ffd000;
+ font-size: 3.2308em;
+}
+
+.ie6 #front_stats div, .ie7 #front_stats div {
+ width: 8em;
+ float: left;
+}
+
+#front-recently {
+ border-left: 1em solid #fff;
+}
+
+.ie6 .tablewrapper #front-howto, .ie7 .tablewrapper #front-howto {
+ margin-right: 2%;
+}
+.ie6 .tablewrapper #front-recently, .ie7 .tablewrapper #front-recently {
+ margin-left: 2%;
+}
+
+/* MEDIA QUERIES */
+@media only screen and (min-width: 48em) and (max-width: 61em) {
+ .container {
+ width: 100%;
+ }
+
+ /*FORMS*/
+ input[type=text],
+ input[type=password],
+ input[type=email],
+ textarea {
+ width: 95%;
+ }
+
+ #main-nav {
+ width: auto;
+ float: right;
+ padding-left: 180px;
+ }
+
+ #main-menu {
+ margin-top: 3em;
+ }
+
+ #site-header {
+ height: 6em;
+ }
+
+ #fms_pan_zoom {
+ top: 7em !important;
+ }
+
+ #user-meta p {
+ left: 1em;
+ }
+
+ body.frontpage #user-meta p {
+ left: auto;
+ }
+
+ #map_box {
+ left: 32em;
+ width: auto;
+ }
+
+ #report-a-problem-sidebar {
+ position: static;
+ width: auto;
+ -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+ -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+ -o-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+ }
+ #report-a-problem-sidebar .sidebar-tips,
+ #report-a-problem-sidebar .sidebar-notes {
+ font-size: 1em;
+ }
+
+ .full-width {
+ width: auto;
+ margin: 0em -1em 0 -1em;
+ }
+
+ body.fullwidthpage .content, body.twothirdswidthpage .content {
+ width: auto;
+ }
+
+ body.twothirdswidthpage .content {
+ width: 30em;
+ }
+ body.twothirdswidthpage .content .sticky-sidebar {
+ left: 32em;
+ top: 30em;
+ }
+ body.twothirdswidthpage .content .sticky-sidebar aside {
+ top: 9em;
+ }
+}
diff --git a/phonegap/www/css/mobile.css b/phonegap/www/css/mobile.css
new file mode 100644
index 000000000..f17f753fd
--- /dev/null
+++ b/phonegap/www/css/mobile.css
@@ -0,0 +1,179 @@
+/* stop scrolling on iphone */
+#container {
+ width: 100%;
+ height: 100%;
+}
+
+#container .container {
+ padding-bottom: 0;
+}
+
+.mobile-nav-banner {
+ position: fixed;
+ background: black;
+}
+
+.mobile-sign-in-banner {
+ display: none;
+ background: none;
+}
+
+.mobile-sign-in-banner a {
+ position: absolute;
+ left: auto;
+ right: 0.3em;
+ top: 0.8em;
+}
+
+.mobile-info {
+ position: fixed;
+ bottom: 0px;
+ width: 100%;
+ height: 20px;
+ text-align: right;
+ z-index: 1;
+}
+
+.mobile-info a {
+ cursor: pointer;
+ font-size: 0.875em;
+ font-family: Helmet, Freesans, sans-serif;
+ font-weight: bold;
+ 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;
+ right: 0.3em;
+ bottom: 0.3em;
+}
+
+.mobile-header {
+ margin-top: 35px;
+}
+
+.mobile-header #site-logo {
+ margin-top: 35px;
+}
+
+#front-main #postcodeForm {
+ padding-top: 0.5em;
+ padding-bottom: 0.5em;
+}
+
+#front-main #postcodeForm label {
+ font-size: 0.9em
+}
+
+#front-main a#geolocate_link {
+ font-size: 1.2em;
+ -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;
+ margin-top: 0.5em;
+}
+
+#front-howto h2 {
+ margin-top: 0.8em;
+}
+
+ol.big-numbers > li {
+ margin-bottom: 0.8em;
+}
+
+#multiple {
+ margin: auto;
+ margin-bottom: 1em;
+}
+
+#multiple li {
+ list-style: none;
+ margin: auto;
+}
+
+#nav-link {
+ display: none;
+}
+
+#form_sign_in {
+ margin-top: 1em;
+}
+
+#sign_out,
+#sign_in {
+ display: none;
+}
+
+input.green-btn,
+input.green-btn:hover {
+ border-radius: 2px;
+ background: #9fde23;
+ border-top: #CAEF80;
+ border-left: #BCEF58;
+ border-right: #BCEF58;
+}
+
+#loadingSpinner {
+ display: none;
+}
+
+div.spinner {
+ position: absolute;
+ width: 54px;
+ height: 54px;
+ display: inline-block;
+}
+
+div.spinner div {
+ width: 12%;
+ height: 26%;
+ background: #000;
+ position: absolute;
+ left: 44.5%;
+ top: 37%;
+ opacity: 0;
+ -webkit-animation: fade 1s linear infinite;
+ -webkit-border-radius: 50px;
+ -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
+}
+
+div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}
+div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
+div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
+div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
+div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
+div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
+div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
+div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
+div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
+div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
+div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
+div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}
+
+@-webkit-keyframes fade {
+ from {opacity: 1;}
+ to {opacity: 0.25;}
+}