diff options
| -rw-r--r-- | templates/web/stevenage/footer.html | 8 | ||||
| -rw-r--r-- | templates/web/stevenage/header.html | 54 | ||||
| -rw-r--r-- | web/cobrands/stevenage/_colours.scss | 6 | ||||
| -rw-r--r-- | web/cobrands/stevenage/_council_header.scss | 754 | ||||
| -rw-r--r-- | web/cobrands/stevenage/_fmsbase.scss | 1537 | ||||
| -rw-r--r-- | web/cobrands/stevenage/_h5bp.scss | 271 | ||||
| -rw-r--r-- | web/cobrands/stevenage/_layout.scss | 91 | ||||
| -rw-r--r-- | web/cobrands/stevenage/base.scss | 7 |
8 files changed, 2685 insertions, 43 deletions
diff --git a/templates/web/stevenage/footer.html b/templates/web/stevenage/footer.html index c45c3c536..92449916f 100644 --- a/templates/web/stevenage/footer.html +++ b/templates/web/stevenage/footer.html @@ -34,18 +34,12 @@ <div class="nav-wrapper"> <div class="nav-wrapper-2"> <div id="main-nav" role="navigation"> - <ul id="mysoc-menu"> - <li><a id="mysoc-logo" href="http://www.mysociety.org/">mySociety</a></li>[% - %]<li><a href="http://mysociety.org/donate/">Donate</a></li>[% - %]<li><a href="http://www.mysociety.org/projects/">Our Sites</a></li> - </ul> - <ul id="main-menu"> <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn" >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% - %]<li><[% IF c.req.uri.path == '/reports' %]span[% ELSE %]a href="/reports"[% END + %]<li><[% IF c.req.uri.path == '/reports/Stevenage' %]span[% ELSE %]a href="/reports/Stevenage"[% END %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END %]>[% loc("Local alerts") %]</[% c.req.uri.path == '/alert' ? 'span' : 'a' %]></li>[% diff --git a/templates/web/stevenage/header.html b/templates/web/stevenage/header.html index d21db2b46..e04ea77bb 100644 --- a/templates/web/stevenage/header.html +++ b/templates/web/stevenage/header.html @@ -34,9 +34,59 @@ <div class="wrapper"> <div class="table-cell"> - <header id="site-header" role="banner"> + <header id="stevenage_cc_header" role="banner"> + <div id="stv-headerWrapper"> + <div id="stv-header"> + <div class="stv-inner"> + + <div id="stv-logo"> + <h1><a href="/"><img src="http://www.stevenage.gov.uk/Images/logo.gif" alt="Stevenage Borough Council"></a></h1> + </div> + + <div class="stv-mapLogo"> + <img src="http://www.stevenage.gov.uk/Images/mapLogo.gif" alt=""> + </div> + + <div id="stv-pageTools" class="stv-floatHolder"> + <div id="stv-searchStatic"> + <label for="search">Search</label> <input type="hidden" name="view" value="Search results"> <input name="search" type="text" value="" placeholder="Search for..." id="stv-search" class="stv-searchInput"> <input type="submit" value="GO"> + </div> + </div> + + <div class="stv-parf stv-floatHolder"> + <a href="http://www.stevenage.gov.uk/pay/"><span class="stv-title">Pay</span> your Council Tax bill and more</a> <a href="http://www.stevenage.gov.uk/apply/"><span class="stv-title">Apply</span> for planning permission and more</a> <a href="http://www.stevenage.gov.uk/report/"><span class="stv-title">Report</span> a missed bin and more</a> <a href="http://www.stevenage.gov.uk/find/" class="stv-find"><span class="stv-title">Find</span> your local councillor and more</a> + </div> + + </div> + </div> + <div id="stv-menu"> + <div id="stv-primaryNavigation"> + <ul id="stv-ctl00_ctl00_PrimaryNavigationLinks" class="stv-floatHolder"> + <li> + <a href="http://www.stevenage.gov.uk/council-services/">Council Services</a> + </li> + <li> + <a href="http://www.stevenage.gov.uk/about-the-council/">About the Council</a> + </li> + <li> + <a href="http://www.stevenage.gov.uk/about-stevenage/">About Stevenage</a> + </li> + <li> + <a href="http://www.stevenage.gov.uk/news-and-events/">News and Events</a> + </li> + <li> + <a href="http://www.stevenage.gov.uk/links/">Popular Links</a> + </li> + <li> + <a href="http://www.stevenage.gov.uk/have-your-say/">Have Your Say</a> + </li> + </ul> + </div> + </div> + </div> + </header> + <header id="site-header"> <div class="container"> - <a href="/" id="site-logo">FixMyStreet</a> <a href="#main-nav" id="nav-link">Main Navigation</a> </div> </header> diff --git a/web/cobrands/stevenage/_colours.scss b/web/cobrands/stevenage/_colours.scss index 62bb6d6ad..72027c302 100644 --- a/web/cobrands/stevenage/_colours.scss +++ b/web/cobrands/stevenage/_colours.scss @@ -1,9 +1,9 @@ /* COLOURS */ -$primary: #FFD000; -$primary_b: #F3B11E; -$primary_text: #222; +$primary: #066539; +$primary_b: lighten($primary, 20%); +$primary_text: #333; $contrast1: #00BD08; $contrast1_dark: #4B8304; diff --git a/web/cobrands/stevenage/_council_header.scss b/web/cobrands/stevenage/_council_header.scss new file mode 100644 index 000000000..f1942a818 --- /dev/null +++ b/web/cobrands/stevenage/_council_header.scss @@ -0,0 +1,754 @@ + + /*--------------------------------------------------*/ + + /* 1.stv- =FontFace Declarations + --------------------------------------------------*/ + @font-face { font-family: 'PTSansNarrowRegular'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN57F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN57F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN57F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN57F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN57F-webfont.svg#stv-webfontpTBqgUZV') format('svg'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'PTSansCaptionBold'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC75F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC75F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC75F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC75F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC75F-webfont.svg#stv-webfont8zHvniZB') format('svg'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'PTSansCaptionRegular'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC55F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC55F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC55F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC55F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC55F-webfont.svg#stv-webfont7qk7wodx') format('svg'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'PTSansBoldItalic'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS76F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS76F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS76F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS76F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS76F-webfont.svg#stv-webfont2oPncueb') format('svg'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'PTSansBold'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS75F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS75F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS75F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS75F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS75F-webfont.svg#stv-webfontaW07W6NV') format('svg'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'PTSansItalic'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS56F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS56F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS56F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS56F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS56F-webfont.svg#stv-webfontV5YcF68V') format('svg'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'PTSansRegular'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS55F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS55F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS55F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS55F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS55F-webfont.svg#stv-webfontakBUUg6U') format('svg'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'PTSansNarrowBold'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN77F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN77F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN77F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN77F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN77F-webfont.svg#stv-webfontSTdD4QCq') format('svg'); font-weight: normal; font-style: normal; } + + /* 2.stv- =BasicSetup and general styles + --------------------------------------------------*/ +#stevenage_cc_header { + z-index: 2; + margin: 0; + padding: 0; + font-size:62.5%; + max-width: 100%; + width: 100%; + background-color: #fff; + + #stv-everything { + /*font-size: 125%;*/ + min-width: 984px; + overflow: hidden; + width: 100%; + } + + .stv-inner { + width: 984px; + margin: 0 auto; + position: relative; + } + + .stv-hidden { + position: absolute; + left: -99999em; + } + + /* 2.stv-1.stv- =Text Elements + --------------------------------------------------*/ + h1, h2, h3, h4, h5, h6, legend { + font-family: 'PTSansCaptionRegular', PT Sans Caption, Verdana, Arial, Sans-Serif; + color: #656867; + font-weight: normal; + margin-top: 0; + } + + h1 { color: #666666; font-size: 2.4em } + h2 { font-size: 2.4em } + h3 { font-size: 1.7em } + h4 { font-size: 1.7em } + h5 { font-size: 1.5em } + h6 { font-size: 1.5em } + + p, a, li, td, th, dd, dt, span, cite { + font-family: 'PTSansRegular', PT Sans, Verdana, Arial, Sans-Serif; + font-weight: normal; + font-size: 1.5em; + color: #656867; + } + cite { + text-align: right; + display: block; + } + + #stv-main.stv-content .stv-aside { + font-size: 0.87em; + } + + + #stv-main.stv-content dl dt { + width: 16%; + margin-right: 3%; + display: inline-block; + vertical-align: top; + } + #stv-main.stv-content dl dd { + width: 70%; + margin-left: 0; + display: inline-block; + vertical-align: top; + } + + p { + margin: 0 0 0.8em 0; + } + + input, label, select, option { + font-family: 'PTSansRegular', PT Sans, Verdana, Arial, Sans-Serif; + font-weight: normal; + font-size: 1.3em; + color: #656867; + } + legend { + font-size: 1.5em; + } + + strong a, p strong, li strong, td strong, th strong, dd strong, dt strong { + font-family: 'PTSansCaptionBold', PT Sans, Verdana, Arial, Sans-Serif; + font-weight: bold; + } + + p p, p a, p li, p td, p th, p dd, p dt, p input, p label, p span, + a p, a a, a li, a td, a th, a dd, a dt, a input, a label, a span, + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, + li p, li a, li li, li td, li th, li dd, li dt, li input, li label, li span, + td p, td a, td li, td td, td th, td dd, td dt, td input, td label, td span, + th p, th a, th li, th td, th th, th dd, th dt, th input, th label, th span, + dd p, dd a, dd li, dd td, dd th, dd dd, dd dt, dd input, dd label, dd span, + dt p, dt a, dt li, dt td, dt th, dt dd, dt dt, dt input, dt label, dt span, + input p, input a, input li, input td, input th, input dd, input dt, input input, input label, input span, + label p, label a, label li, label td, label th, label dd, label dt, label input, label label, label span, + span p, span a, span li, span td, span th, span dd, span dt, span input, span label, span span, + h1 span, h2 span, h3 span, h4 span, h5 span, h6 span, + legend span, select option { + font-size: 1em; + } + + p h1, p h2, li h1, li h2, td h1, td h2, th h1, th h2 { + font-size: 1.6em; + } + + p h3, p h4, li h3, li h4, td h3, td h4, th h3, th h4 { + font-size: 1.13em; + } + + p h5, p h6, li h5, li h6, td h5, td h6, th h5, th h6 { + font-size: 1em; + } + + a, a:link { + color: #005e38; + text-decoration: none; + } + + a:hover, a:active { + text-decoration: underline; + } + + a img { + border: none; + } + + a.stv-more { + background: url("http://www.stevenage.gov.uk/Images/arrGrRgt.gif") no-repeat scroll right 7px transparent; + padding-right: 9px; + font-family: 'PTSansCaptionBold', PT Sans, Verdana, Arial, Sans-Serif; + font-weight: bold; + } + + .stv-content .stv-article a { + font-family: 'PTSansCaptionBold', PT Sans, Verdana, Arial, Sans-Serif; + font-weight: bold; + } + + .stv-content .stv-article .stv-subNav a { + font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif; + font-weight: normal; + } + + + .stv-error { + color: #FF0000; + font-family: 'PTSansCaptionBold', PT Sans, Verdana, Arial, Sans-Serif; + font-size: 1.5em; + font-weight: bold; + } + + .stv-error li { + font-size: 1em; + color: #FF0000; + } + + /* 2.stv-2.stv- =Table + --------------------------------------------------*/ + table { + border: 1px solid #c0c0be; + border-collapse: collapse; + margin: 1em 0; + } + + th { + background-color: #656867; + border: 1px solid #C0C0BE; + color: #FFFFFF; + padding: 3px 5px; + } + + td { + border: 1px solid #c0c0be; + padding: 5px 8px; + vertical-align: top; + } + + /* 2.stv-3.stv- =Form Elements + --------------------------------------------------*/ + label { + display: inline-block; + } + input[type=text], input[type=password], textarea, select, fieldset { + border-width: 1px; + border-color: #c0c0be; + border-style: solid; + } + fieldset { + margin: 0; + padding: 0.3em 0.625em 0.75em; + } + fieldset fieldset { + border: medium none; + margin: 0.5em 0; + padding-left: 0; + padding-right: 0; + } + fieldset .stv-group { + margin: 1em 0; + } + fieldset fieldset legend { + font-family: 'PTSansRegular', PT Sans, Verdana, Arial, Sans-Serif; + font-weight: normal; + font-size: 1.3em; + padding: 0; + } + input[type=submit], input[type=button] { + border: 0; + color: #ffffff; + margin: 0; + background-image: url('http://www.stevenage.gov.uk/Images/submitBG.gif'); + background-position: left top; + background-repeat: repeat-x; + background-color: #005e38; + padding: 1px; + font-family: 'PTSansCaptionRegular', PT Sans Caption, Verdana, Arial, Sans-Serif; + font-weight: normal; + cursor: pointer; + font-size: 1.5em; + } + input[type=checkbox], input[type=radio] { + margin-left: 25%; + } + textarea, select { + vertical-align: top; + } + fieldset label { + width: 25%; + word-wrap: break-word; + } + fieldset .stv-checkboxGroup label, + fieldset .stv-radioGroup label { + width: 65%; + } + + fieldset .stv-double { + text-align: center; + margin: 3em 0; + } + + fieldset .stv-double .stv-item { + position: relative; + width: 40%; + margin-left: 5%; + margin-right: 5%; + float: left; + } + + fieldset .stv-double label { + width: 100%; + } + + fieldset .stv-double .stv-separator { + position: absolute; + left: 45%; + width: 10%; + margin-top: 1em; + } + + fieldset .stv-right { + text-align: right; + } + + /* 2.stv-3.stv-1 =Form Builder + --------------------------------------------------*/ + .stv-ValidationSummaryWithoutBullets ul { + list-style-type: none; + margin-top: 0em; + } + + .stv-FormBuilderSubmitItem input[type="submit"], .stv-FormBuilderSubmitItem input[type="button"] { + margin-top: 5px; + margin-left: 25%; + } + + .stv-FormBuilderDateField { + display: inline; + font-family: 'PTSansRegular', PT Sans, Verdana, Arial, Sans-Serif; + font-weight: normal; + font-size: 1.1em; + color: #656867; + } + + .stv-FormBuilderCheckBoxListField, + .stv-FormBuilderRadioButtonListField { + display: inline-block; + font-size: 1.3em; + position: relative; + vertical-align: top; + } + + .stv-FormBuilderCheckBoxListField label, + .stv-FormBuilderRadioButtonListField label { + width: auto; + } + + .stv-FormBuilderCheckBoxListField input[type=checkbox], + .stv-FormBuilderCheckBoxListField input[type=radio], + .stv-FormBuilderRadioButtonListField input[type=checkbox], + .stv-FormBuilderRadioButtonListField input[type=radio] { + margin-left: 0; + } + + /* 2.stv-4.stv- =Grid sizing + --------------------------------------------------*/ + .stv-grid1, + .stv-grid2, + .stv-grid3, + .stv-grid4, + .stv-grid5, + .stv-grid6, + .stv-grid7, + .stv-grid8, + .stv-grid9, + .stv-grid10, + .stv-grid11, + .stv-grid12 { + margin-left: 6px; + margin-right: 6px; + } + + .stv-alpha { + margin-left: 0; + } + .stv-omega { + margin-right: 0; + } + .stv-grid1 { + width:70px; + } + .stv-grid2 { + width:152px; + } + .stv-grid3 { + width:234px; + } + .stv-grid4 { + width:316px; + } + .stv-grid5 { + width:398px; + } + .stv-grid6 { + width:480px; + } + .stv-grid7 { + width:562px; + } + .stv-grid8 { + width:644px; + } + .stv-grid9 { + width:726px; + } + .stv-grid10 { + width:808px; + } + .stv-grid11 { + width:890px; + } + .stv-grid12 { + width:972px; + } + + /* 3.stv- =Header + --------------------------------------------------*/ + #stv-headerWrapper { + position: relative; + z-index: 22; + } + + #stv-header { + background-image: url('http://www.stevenage.gov.uk/Images/headerBG.jpg'); + background-repeat: repeat-x; + background-position: left bottom; + background-color: transparent; + } + + /* 3.stv-1 =Site Logos + --------------------------------------------------*/ + #stv-header #stv-logo { + bottom: 13px; + height: 89px; + left: 4px; + position: absolute; + width: 164px; + z-index: 11; + } + + #stv-header #stv-logo a, + #stv-header #stv-logo img { + display: block; + } + + #stv-header .stv-mapLogo { + bottom: 0; + left: 247px; + position: absolute; + width: 165px; + } + + #stv-header .stv-mapLogo img { + display: block; + } + + /* 3.stv-2 =Page Tools + --------------------------------------------------*/ + #stv-header #stv-pageTools { + padding-left: 496px; + padding-top: 20px; + text-align: right; + width: 480px; + } + + /* 3.stv-2.stv-1 =Site Search + --------------------------------------------------*/ + #stv-header #stv-pageTools #stv-search, + #stv-header #stv-pageTools #stv-searchStatic { + float: right; + display: inline; + display: inline-block; + } + + #stv-header #stv-pageTools #stv-searchStatic #stv-search { + float: none; + } + + #stv-header #stv-pageTools #stv-search label, + #stv-header #stv-pageTools #stv-searchStatic label { + position: absolute; + left: -999999em; + } + + #stv-header #stv-pageTools #stv-search #stv-searchBox, + #stv-header #stv-pageTools #stv-search input.stv-searchInput, + #stv-header #stv-pageTools #stv-searchStatic #stv-searchBox, + #stv-header #stv-pageTools #stv-searchStatic input.stv-searchInput { + border-right: medium none; + margin-right: -3px; + padding: 2px 4px; + position: relative; + top: -1px; + width: 126px; + } + + /* 3.stv-2.stv-2 =Top Menu + --------------------------------------------------*/ + #stv-header #stv-pageTools #stv-topMenu { + float: right; + } + + #stv-header #stv-pageTools #stv-topMenu ul { + list-style-type: none; + margin: 0; + padding: 0 19px; + } + + #stv-header #stv-pageTools #stv-topMenu li { + color: #005E38; + display: inline; + font-size: 1.3em; + line-height: 1.7em; + } + + #stv-header #stv-pageTools #stv-topMenu li a { + word-spacing: 3px; + } + + /* 3.stv-3 =Pay, Apply, Report, Find links + --------------------------------------------------*/ + #stv-header .stv-parf { + padding-left: 496px; + padding-right: 2px; + width: 478px; + background-image: url('http://www.stevenage.gov.uk/Images/parfEnd.jpg'); + background-position: right bottom; + background-repeat: no-repeat; + } + + #stv-header .stv-parf a { + background-color: transparent; + background-image: url("http://www.stevenage.gov.uk/Images/parfBG.jpg"); + background-position: left bottom; + background-repeat: no-repeat; + color: #232122; + display: block; + float: left; + font-size: 1.1em; + line-height: 1em; + padding: 18px 16px 6px 14px; + width: 90px; + min-height: 60px; + height: auto !important; + height: 60px; + } + + #stv-header .stv-parf a:hover { + background-image: url("http://www.stevenage.gov.uk/Images/parfHoverBG.jpg"); + } + + #stv-header .stv-parf a.stv-find { + padding-right: 14px; + } + + #stv-header .stv-parf a span.stv-title { + display: block; + font-size: 2.4em; + line-height: 1em; + } + + #stv-header .stv-parf a:hover, + #stv-header .stv-parf a:active, + #stv-header .stv-parf a:hover span.stv-title, + #stv-header .stv-parf a:active span.stv-title { + color: #005E38; + text-decoration: none; + } + + /* 4.stv- =Navigation + --------------------------------------------------*/ + #stv-menu { + background-color: #363636; + background-image: url("http://www.stevenage.gov.uk/Images/navBG.jpg"); + background-position: left bottom; + background-repeat: repeat-x; + + } + + #stv-menu #stv-primaryNavigation { + width: 984px; + margin: 0 auto; + position: relative; + left: -7px; + } + + #stv-menu #stv-primaryNavigation ul { + list-style-type: none; + margin: 0; + padding: 0; + } + + #stv-menu #stv-primaryNavigation li { + display: block; + float: left; + margin: 0; + font-size: 1.5em; + height: 2em; + overflow: visible; + padding-bottom: 1px; + } + + #stv-menu #stv-primaryNavigation li:hover, + #stv-menu #stv-primaryNavigation li.stv-panelHover { + background-color: #12723b; + background-image: url('http://www.stevenage.gov.uk/Images/navHover.jpg'); + background-position: left bottom; + background-repeat: repeat-x; + } + + #stv-menu #stv-primaryNavigation a { + color: #FFFFFF; + display: block; + font-family: 'PTSansCaptionRegular',PT Sans Caption,Verdana,Arial,Sans-Serif; + font-weight: normal; + padding: 6px 14px 11px 12px; + width: 138px; + } + + #stv-menu #stv-primaryNavigation a:hover { + text-decoration: none; + } + #stv-menu #stv-primaryNavigation li.stv-panelHover a { + text-decoration: none; + background-image: url('http://www.stevenage.gov.uk/Images/arrGrDwn.gif'); + background-repeat: no-repeat; + background-position: 12px bottom; + background-color: transparent; + } + + #stv-menu #stv-primaryNavigation a:active { + text-decoration: none; + } + + #stv-menu #stv-primaryNavigation li.stv-selected { + background-color: #ffffff; + } + + #stv-menu #stv-primaryNavigation li.stv-selected a { + color: #005e38; + } + + #stv-menu #stv-primaryNavigation li.stv-selected a:hover, + #stv-menu #stv-primaryNavigation li.stv-panelHover a { + color: #FFFFFF; + } + + /* 5.stv- =Main Area + --------------------------------------------------*/ + #stv-main { + background-image: url('http://www.stevenage.gov.uk/Images/mainDropShad.png'); + background-position: top left; + background-repeat: repeat-x; + } + + /* 5.stv-1 =Information Panel + --------------------------------------------------*/ + #stv-main.stv-home .stv-infoPanel, + #stv-main.stv-landing .stv-infoPanel, + .stv-js-on #stv-main.stv-home .stv-infoPanel .stv-fadeIn { + min-height: 370px; + height: auto !important; + height: 370px; + background-image: url('http://www.stevenage.gov.uk/Images/infoBG.png'); + background-position: top left; + background-repeat: repeat-x; + background-color: #e0e0dd; + } + + #stv-main.stv-home .stv-infoPanel h2, + #stv-main.stv-landing .stv-infoPanel h2 { + line-height: 1em; + margin-bottom: 0.3em; + margin-top: 0.3em; + } + + #stv-main.stv-home .stv-infoPanel .stv-inner, + #stv-main.stv-landing .stv-infoPanel .stv-inner { + position: relative; + } + + #stv-main.stv-home .stv-infoPanel .stv-inner .stv-landingA, + #stv-main.stv-home .stv-infoPanel .stv-inner .stv-landingB, + #stv-main.stv-home .stv-infoPanel .stv-inner .stv-landingC, + #stv-main.stv-home .stv-infoPanel .stv-inner .stv-landingD, + #stv-main.stv-home .stv-infoPanel .stv-inner .stv-landingE, + #stv-main.stv-home .stv-infoPanel .stv-inner .stv-landingF, + #stv-main.stv-landing .stv-infoPanel .stv-inner > div { + height: 348px; + overflow: hidden; + background-image: url("http://www.stevenage.gov.uk/Images/infoBG.gif"); + background-position: left 17px; + background-repeat: no-repeat; + padding-top: 17px; + } + + .stv-js-on #stv-main.stv-home .stv-infoPanel .stv-inner .stv-landingA, + .stv-js-on #stv-main.stv-home .stv-infoPanel .stv-inner .stv-landingB, + .stv-js-on #stv-main.stv-home .stv-infoPanel .stv-inner .stv-landingC, + .stv-js-on #stv-main.stv-home .stv-infoPanel .stv-inner .stv-landingD, + .stv-js-on #stv-main.stv-home .stv-infoPanel .stv-inner .stv-landingE, + .stv-js-on #stv-main.stv-home .stv-infoPanel .stv-inner .stv-landingF { + position: absolute; + top: 0; + left: 0; + } + + + .stv-js-on #stv-main.stv-home .stv-infoPanel .stv-fadeIn { + z-index: 20; + position: absolute; + width: 100%; + } + + #stv-main.stv-home .stv-infoPanel .stv-inner .stv-hidden { + display: none; + } + + #stv-main.stv-home .stv-infoPanel .stv-inner .stv-selected { + display: block; + } + + #stv-main.stv-home .stv-infoPanel .stv-inner .stv-fade, + #stv-main.stv-landing .stv-infoPanel .stv-inner .stv-fade { + background-image: none; + background-position: left top; + background-repeat: repeat-x; + bottom: 0; + height: 24px; + position: absolute; + width: 100%; + z-index: 12; + } + + #stv-main.stv-home .stv-infoPanel .stv-articleCont .stv-article.stv-attached .stv-fade, + #stv-main.stv-landing .stv-infoPanel .stv-articleCont .stv-article.stv-attached .stv-fade { + background-image: url("http://www.stevenage.gov.uk/Images/infoBGfadeWh.png"); + height: 12px; + } + + + /* 9.stv- =Layout Fixes + FloatHolder can be used on any div which + has floated item within as oppposed to + floating the wrapper div aswell.stv- + --------------------------------------------------*/ + .stv-floatHolder { + position: relative; + z-index: 10; + height: auto !important; + height: 1%; + } + .stv-floatHolder:after { + content:"."; + clear:both; + height:0; + visibility:hidden; + display:block; + } + +} + + +body.mappage{ + #stevenage_cc_header{ + #stv-header .stv-parf { + display: none; + } + #stv-header #stv-logo{ + position: static; + float: left; + height: auto; + img{ + height:50px; + width: auto; + } + } + #stv-pageTools.stv-floatHolder{ + position: static; + z-index: auto; + } + } +}
\ No newline at end of file diff --git a/web/cobrands/stevenage/_fmsbase.scss b/web/cobrands/stevenage/_fmsbase.scss new file mode 100644 index 000000000..3221301c6 --- /dev/null +++ b/web/cobrands/stevenage/_fmsbase.scss @@ -0,0 +1,1537 @@ +/* HEADINGS and TYPOGRAPHY */ + +body { + font-family: 'PTSansRegular',PT Sans,Verdana,Arial,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{ + font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif; + font-style: italic; + font-size: 0.8125em; + line-height: 1.2307em; +} + +h1 { + font-family: 'PTSansCaptionRegular', PT Sans Caption, Verdana, Arial, Sans-Serif; + font-size: 2em; + line-height: 1em; + font-weight: normal; + margin-top: 0.5em; + margin-bottom: 0.5em; +} +h1#reports_heading span { + display: none; +} +h1#reports_heading a { + display: block; + font-size: 50%; +} + +h2 { + font-family: 'PTSansCaptionRegular', PT Sans Caption, Verdana, Arial, 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; +} + +// default list styles +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; +} + +// lets you have a traditional ol but with nicely styled numbers +// for older browsers it just falls back to the normal ol +ol.big-numbers { + padding: 0; + margin: 0; + counter-reset: li; // reset counter to be 'li' instead of a number + > li { + position: relative; + list-style: none; + padding:0 0 0 2.5em; + margin-bottom:2em; + &:before { + content: counter(li); // set the content to be whatever the 'li' var is + counter-increment: li; // add to the counter var + position: absolute; + left: 0; + top:-0.2em; + color:#ccc; + line-height:1; + font: { + font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif; + weight:bold; + size:2.5em; + } + } + } +} + +dl { + margin: 0; + padding: 0; + dt { + font-size: 1em; + line-height: 1.5em; + font-weight: bold; + } + dd { + font-weight: 1em; + line-height: 1.5em; + margin:0 0 1em 0; + } +} + +blockquote { + p:before { + content: '“'; + } + p:after { + content: '”'; + } +} + +pre { + font-family: monospace; +} + +img { + //do this otherwise IE will just not display + //any img without a height defined + height:auto; + max-width: 100%; +} +// So that map popups display correctly +#popup img { + max-width: none; +} + +select, input, textarea { + font-size: 99%; + max-width: 95%; +} +.ie7 { + select, input, textarea { + max-width: none; + } +} + +// To deal with bug from drop-down being wider than holder +select { + width: 100%; +} + +// links +a, +a:visited { + text-decoration:none; + color:#0BA7D1; + &:hover, + &:active { + text-decoration:underline; + color:#0D7CCE; + } +} + +// custom type +.small-print { + @extend small; + margin-bottom: 1.2307em; + color:#666666; +} +.meta{ + color:#555555; + font-style: italic; + margin-bottom: 0px; +} +.meta-2{ + font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif; + color:#666666; + font-style: italic; + font-size: 0.75em; +} + +h4.static{ + font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif; + text-transform: uppercase; + font-size: 0.875em; + line-height: 1.71428em; + color:#666; + margin-top: 2em; +} +h4.static-with-rule{ + @extend.static; + background: #f6f6f6; + border-top: 0.25em solid $primary; + margin-bottom:0.25em; + padding: 0.5em 1em; +} + +/* FORMS */ + +// input placeholders, these need to be on separate lines as if the browser +// can't understand a selector it will invalidate the whole line. +::-webkit-input-placeholder { + color: #666666; + font: { + style:italic; + size:0.9375em; + } +} +:-moz-placeholder { + color:#666666; + font: { + style:italic; + size:0.9375em; + } +} +:-ms-placeholder { + color:#666666; + font: { + style:italic; + size:0.9375em; + } +} +//this only gets used when the browser doesn't support @placeholder +.placeholder { + color:#666666; + font: { + style:italic; + size:0.9375em; + } +} + +// wrap anything inside the form in a fieldset to give +// us the right spacing +fieldset { + margin: 1em; +} + +input[type=text], +input[type=password], +input[type=email], +input[type=file], +textarea { + @include box-sizing(border-box); + width: 100%; + // adjust so the sides line up + padding: 0.5em; +} +.ie7 { + input[type=text], + input[type=password], + input[type=email], + input[type=file], + textarea { + max-width: 95%; + } + // In order to work around the IE7 specific issue of inheriting left margins + // http://techblog.willshouse.com/2009/07/12/ie6ie7-form-element-margin-inheritance-bug/ + fieldset > input[type=text], + fieldset > input[type=password], + fieldset > input[type=email], + fieldset > textarea { + margin-left: -1em; + } +} + +textarea { + border: 0.125em solid #888888; + @include border-radius(0.25em); + display: block; + font-size: 1em; + line-height: 1.5em; + font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif; + min-height:8em; +} + +input[type=text], +input[type=password], +input[type=email], +input[type=file] { + border: 0.125em solid #888888; + @include 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; + &.inline{ + display: inline; + padding: 0 2em 0 1em; + font-weight: normal; + } +} + +// grey background, full width box +.form-box { + margin: 0 -2em 0.25em -2em; + background:#eeeeee; + padding:1em 2em 1em 2em; + >input[type=text] { + margin-bottom:1em; + } + .title { + font-size:1.25em; + margin:0.5em 0; + } + h5 { + margin:0 0 1em; + font: { + size:1.125em; + weight:normal; + } + strong { + font-size:2em; + margin-right:0.25em; + } + } +} +// IE6 doesn't extend the grey box back with the above negative margins, and +// the password box falls off screen for some reason. Just have boring margins, +// it looks okay. +.ie6 .form-box { + margin: 0 0 0.25em 0; + padding: 1em; +} +// Prevent grey displaying oddly by giving it a width, and stop odd left margin issue +.ie7 .form-box { + width: 100%; + > input[type=text] { + margin-left: 2em; + } +} + +.form-txt-submit-box { + min-height:3em; + input[type=password], + input[type=text], + input[type=email] { + width: 65%; + float:left; + } + input[type=submit] { + float:right; + width:28%; + margin-right:0.25em; + padding-top:0.7em; + padding-bottom:0.6em; + } +} + +.checkbox-group { + margin:1em 0; +} + + +// form errors +div.form-error, +p.form-error { + @include inline-block; + background:#ff0000; + color:#fff; + padding:0 0.5em; + @include border-radius(0.25em 0.25em 0 0); + a { + color: white; + text-decoration: underline; + } + a:hover { + text-decoration: none; + } +} + +input.form-error, +textarea.form-error { + border-color:#ff0000; + @include border-radius(0 0.25em 0.25em 0.25em); +} + +ul.error { + background:#ff0000; + color:#fff; + padding:0 0.5em; + @include border-radius(0.25em); +} + +// don't display valid error boxes as now the page jump +// won't be until the user submits, which is fine +div.label-valid, +p.label-valid { + display:none !important; + visibility: hidden; +} + + + +/*** LAYOUT ***/ + +// Padding creates page margins on mobile +.container{ + padding: 0 1em 1em; +} + +// Use full width to reverse .container margins +.full-width { + margin: 0 -1em; +} + +// #site-header creates grey bar in mobile +// .nav-wrapper-2 is used on desktop +#site-header{ + border-top: 0.25em solid $primary; + height: 3em; + @include background(linear-gradient(#000, #222 10%, #222 90%, #000)); + .container { + min-height:4em; + } +} +#site-logo{ + display: block; + width: 175px; + height: 40px; + top: 0.4em; + background: url('data:image/png;base64,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') no-repeat; + text-indent: -999999px; + position: absolute; + z-index:2; +} +.ie6 #site-logo { + background: url('/cobrands/fixmystreet/images/ie_logo.gif') 0 -5px no-repeat; +} +.ie7 #site-logo { + background: url('/cobrands/fixmystreet/images/sprite.png') -3px -3px no-repeat; +} + +// this is a skip to nav for mobile users only +#nav-link { + width: 50px; + height: 48px; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAwCAMAAABkKdmIAAAACW9GRnMAAAAFAAADlACdjNY6AAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAF5AAAQZgCwCYXlAAABEVBMVEUAAAAiIiIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAsJAAAAABPQAAAAAAlHgBnVAAAAACSdwAAAAAAAAAaFQAAAAAAAAAAAAAAAACRdgCqigAAAAAAAABHOgDCnwAAAACriwCAaAApIQDOqABIOwCgggBqVwB8ZQDVrgCwkADjuQCafgDftgDetQCqigDrwADHogDGoQDFoAD1yADzxgDyxQDwxAD/0AD///+ZbHkYAAAAWXRSTlMAAAECAwQFBgkLDA0OEBESExQVFxgeHyEkJSkqMTI2Oj0/Q0RHSEpOT1FSVVtmZmxsdX6Kj5ebnp+goaenqKmru7y9vsTY3uPk5OTl5+zs7e7x9PX3+Pr7/fI8qpUAAAABYktHRFoDu6WiAAABMklEQVRIx+3T2VLCMBSA4ZjU1hhpUKgWlaq0VSuutYg7IJuIogKKvv+LSM2AelNOuHCGGf77b7KcBKGwT2AzYej/CIYSPCBEhRKVCILVBJQkVCwIS0NJmglCYhkoycSIINyBEocPiAsl7ljkeypTMhHko9tpD+t0QavUSjcX+bDzy9vSPYj0zg523LDtvaNCD3aWh11ziXMeT64fP0OPX1xbmCVEXdyqwm/sNEWJMr96LXHJb4fLczR1IjWXx83kyv6r3CiLG05VdvpXd9IP5n36XyaStGCiNSS6XYaRsq0LgpnlNyGi6VsMC6IZXlAfLeqBZ2iCIELNbFBpvLQjempUgqxJxb76KdT0/Fw+spzvmVRB6McYlu24ETm2ZfwW/b1pTOeR6Uwj6E8YkxFhjMbuC8zPYpEN6mT7AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDEyLTA1LTAyVDE5OjQ2OjUxKzAxOjAwHHW0eAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMi0wNS0wMlQxOTo0Njo1MSswMTowMG0oDMQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC') no-repeat; + display: block; + text-indent: -999999px; + position: absolute; + right:2em; + top:-2px; + &:hover { + top:2px; + } +} + + +#main-nav{ + ul{ + @include list-reset-soft; + li{ + a, span { + display: block; + padding: 0.5em 1em; + background:#f6f6f6; + color:#333; + font-size: 1.25em; + border-bottom: 0.25em solid #333; + } + a:hover, span.hover { + background: #333; + color:#fff; + text-decoration: none; + } + span { + background-color: #ccc; + } + } + &#mysoc-menu{ + li { + a { + color: $primary_text; + background: $primary; + &#mysoc-logo { + background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIkAAAAyCAMAAABf9whNAAAACW9GRnMAAADwAAAAJgAMZizzAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAF5AAAQZgCwCYXlAAAANlBMVEUAAAAiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiL///90WH2CAAAAEHRSTlMADx8vP09fb3+Pn6+/z9/v+t8hjgAAAAFiS0dEEeK1PboAAAGqSURBVFjD7ZbNjtwgEAY/oIE2YKj3f9ocPDOZ3eN6FCUKdWsJQ+H+saXNZrPZbDabzf/GovwdIhH8LUzHn/PqI32Jcw1v0fjidQf30EZPqmMURXeT5F5kbYwqSQbeWpAU6xg961pT+mgm+WR4Ke6SzG9JwQRWB6iaTClCzQBLknT0AibZAnCBSx2ALACGQ5JOznsmq1TA82LKIalC6Jwh5seaMGdUWKxiJQpclWVqLNlJsxThUIB6z8Qft3FQgEODrs4qUuj9qoljpAr2euKkmxVIjzrpTBUI90xMGgzJQGrMAEUGrGKQn6c7/HbngT1MMqRO1wdNDA6WpNgW5Ld38s1kuLt7fPbO5Lg7Z76ZaLJoV3WAa6wsxbmiyrMMruyMVxc3SaqvAv+YSQWS1Fs9oAi8jQKmsGB4zwJXgdO9VWnAkaUAHJ81CTAkLYAm5ZbB/QhSmm9d7Ff7Splr5jaI90zMgpQsScHsGmRFUsheH6O1jecR5m5BZlFSzF5NkpJ7lMJ85etDlPWjHdMJ6aMiFdYPdgzw6Q90Yvwo2+fM+3dps9lsNpvNP8gvi7UYry9B6TcAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTItMDUtMDJUMTk6NDY6NTErMDE6MDAcdbR4AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDEyLTA1LTAyVDE5OjQ2OjUxKzAxOjAwbSgMxAAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAASUVORK5CYII='); + background-repeat:no-repeat; + text-indent:-999999px; + } + } + } + } + } +} +.ie6 #main-nav ul#mysoc-menu li a#mysoc-logo { + background: url('/cobrands/fixmystreet/images/ie_mysoc_logo.gif') center no-repeat; +} +.ie7 #main-nav ul#mysoc-menu li a#mysoc-logo { + background: url('/cobrands/fixmystreet/images/sprite.png') -240px -38px no-repeat; +} + +//defines where the table caption is (login stuff on mob, nav menu on desktop) +.wrapper { + width:100%; + display:table; + caption-side:bottom; +} +// this is the user's logged in details or the login link etc +#user-meta { + p { + position: relative; + color: $primary_text; + background: $primary; + padding:1em 6em 1em 1em; + a { + position: absolute; + right:1em; + @include inline-block; + text-transform:uppercase; + font-size:0.75em; + background:#333; + padding:0.25em 0.75em; + color:#fff; + @include border-radius(0.25em); + } + } +} + + +// #key-tools is the list that's pulled out an stick to the bottom of the page of desktop, below is mostly just aesthetic +.shadow-wrap { + @extend .full-width; + ul#key-tools{ + @include list-reset-soft; + margin-bottom: 1em; + display: table; + width:100%; + li{ + display: table-cell; + vertical-align: bottom; + text-align: center; + border-right:0.25em solid #fff; + &:last-child { + border-right:none; + } + input[type=submit] { + width: 100%; + border: none; + } + a, input[type=submit] { + 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: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif; + } + &:hover, &.hover { + text-decoration:none; + background-color:#333; + color:#fff; + } + &.abuse { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position:center -2424px; + } + &.feed { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position:center -2563px; + } + &.chevron { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position:center -2716px; + } + &.hover { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position:center -2064px; + } + } + } + } +} + +//because display:table doesn't work we float +.ie6, .ie7 { + .shadow-wrap { + ul#key-tools{ + background:#f5f5f5; + li{ + float:left; + a { + padding-left:1.5em; + padding-right:3em; + } + } + } + } +} +.ie6 .shadow-wrap ul#key-tools li a { + &.abuse { + background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif'); + background-position: right 0px; + } + &.feed { + background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif'); + background-position: right -58px; + } + &.chevron { + background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif'); + background-position: right -116px; + } + &:hover { + background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite_dark.gif'); + } +} + + +//footer blocks +#footer-mobileapps { + @extend .full-width; + padding:1em; + h4 { + margin:0; + } + ul { + @include list-reset-soft; + li { + border-bottom:1px solid #AFAFAF; + &:last-child { + border-bottom:none; + } + a { + display:block; + padding:0.5em 0; + } + } + } +} + +#footer-help { + ul { + @include list-reset-soft; + li { + border-bottom:1px solid #AFAFAF; + &:last-child { + border-bottom:none; + } + h4 { + margin:0.75em 0 0.25em 0; + } + p { + font-size:0.75em; + } + } + } +} + + + +/*BUTTONS*/ + +// Default style set for buttons, inputs and .btn class. Red and green class available. + +button, input[type=submit],.btn{ + @include button-reset; +} + +.green-btn, +button.green-btn, +input.green-btn{ + @include button-reset(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff); +} + +.red-btn, +button.red-btn, +input.red-btn{ + @include button-reset(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff); +} + +.final-submit, +input.final-submit { + margin:1em 0.5em; + float:right; +} + +.button-right, +.button-left, +a.button-right, +a.button-left { + @include inline-block; + cursor:pointer; + font-size: 1em; + line-height: 1; + margin:0; + border:1px solid #999; + color:#333; + background: #eee; + @include border-radius(4px); + &: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('/cobrands/fixmystreet/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('/cobrands/fixmystreet/images/sprite.png'); + background-repeat:no-repeat; + background-position:-18px -802px; +} + +.big-green-banner { + position: relative; + z-index:1000; + top:-1.75em; + background: $contrast1; + color: #fff; + padding:1em; + text: { + transform:uppercase; + align:center; + } + font-size:0.875em; + &:before { + content: ""; + left:-0.5em; + top:0; + position: absolute; + width: 0; + height: 0; + border-left: 0.5em solid transparent; + border-bottom: 0.5em solid $contrast1_dark; + } +} + +.banner { + position: relative; + z-index:1100; + p { + position: absolute; + top:-1.95em; + right:0; + @include inline-block; + font-size:0.6875em;//11px + line-height:1em; + padding:0.5em 1em; + margin:0; + color:#1a1a1a; + background: #ccc; + text: { + transform:uppercase; + align:center; + } + &: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; + } + &#fixed { + color:#fff; + background: $contrast1; + &:before { + border-bottom: 0.5em solid $contrast1_dark; + } + } + } +} + +/*OTHER*/ + +.plain-list { + @include list-reset-soft; + li { + margin-bottom:1em; + } +} + +.issue-list{ + margin: 0 0 1em 0; + padding: 0; + border-bottom: 0.25em solid $primary; + li{ + list-style: none; + background: #f6f6f6; + margin: 0.25em 0 0 0; + padding: 0.5em 1em; + display:block; + .update-wrap { + display:table; + width:100%; + .update-text, + .update-img { + display:table-cell; + vertical-align:top; + p { + margin-bottom: 0.5em; + } + } + .update-img { + text-align:right; + img { + margin:-0.5em -1em 0 0.5em; + height:auto; + } + } + } + } +} +//display:table fixes +.ie7, .ie7 { + .issue-list li .update-wrap { + .update-text { + float:left; + width:19em; + } + .update-img { + float:right; + } + } +} + +.issue-list-a { + margin: 0 0 1em 0; + padding: 0; + border-bottom: 0.25em solid $primary; + li { + list-style: none; + margin:0; + padding:0; + margin: 0.25em 0 0 0; + /* see note below about this */ + display:table; + background: #f6f6f6; + color:#222222; + width:100%; + &:hover { + text-decoration:none; + color:#222222; + background:#e6e6e6; + } + a { + color:#222222; + } + a:hover { + color:#222222; + background:#e6e6e6; + text-decoration: none; + } + .text { + /* this is and the display:table above are required otherwise + on iphone the rows end up being slightly wider than the screen */ + display: table-cell; + width: 100%; + vertical-align:top; + padding: 0px 0px 0px 1em; + .img { + width: 90px; + float: right; + height:auto; + } + h4 { + padding-right: 1em; + padding-top: 0.25em; + margin:0; + } + small { + color:#666; + display: block; + padding-right: 1em; + padding-top: 0.25em; + padding-bottom: 0.25em; + } + } + >p { + margin: 0.25em 0 0 0; + padding: 0.5em 1em; + background: #f6f6f6; + } + } +} +.list-a { + @extend .issue-list-a; + a { + padding:0.5em 1em; + font-weight:bold; + } +} +//display:table fixes +.ie6, .ie7 { + .issue-list-a { + overflow:hidden; + li { + clear:both; + width:100%; + display:block; + overflow:hidden; + .text { + float:left; + } + } + } +} +.ie6 .issue-list-a li a { + height:5.5em; + .img { + height:60px; + } +} + +// fancybox gallery images have a magnifying glass in the corner +.update-img { + a { + @include inline-block; + position:relative; + span { + position:absolute; + top:0; + right:0; + display:block; + width:20px; + height:20px; + opacity: 0.5; + background:#fff url(/cobrands/fixmystreet/images/sprite.png) -16px -1098px no-repeat; + //hide text - http://nicolasgallagher.com/another-css-image-replacement-technique/ + font: 0/0 a; + color: transparent; + } + &:hover span { + opacity: 1; + } + } +} +//bit of a hack - as we can't use em's, push the span out to the right +//by how much it would be if the user did not resize the text +.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 stuff +#map_box{ + @extend .full-width; + background: #333; + height: 29em; + margin-bottom: 1em; + overflow: hidden; + position: relative; + #map { + width:100%; + height:100%; + } +} + +// OpenLayers fix for navigation being top right +// Left and right so that zoom can be left, pan right. +#fms_pan_zoom { + right: 0.5em !important; + top: 0.5em !important; + left: 0.5em !important; +} +// The left and right of the above causes the navigation to move off-screen left in IE6. +// XXX Need to check IE7 +.ie6 #fms_pan_zoom { + left: auto !important; +} + +// Openlayers map controls (overrides) +#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('/cobrands/fixmystreet/images/sprite.png') no-repeat; + &:hover { + opacity:1; + } + filter: none !important; // Override OpenLayers PNG handling of the navigation +} + +#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; +} + +//hide pins, show old reports etc +#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; + a { + @include inline-block; + font-size:0.6875em; + color:#fff; + padding:0.6em 3em 0.5em 1em; + background-repeat:no-repeat; + &#hide_pins_link { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position: right -3976px; + } + &#all_pins_link { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position: right -4022px; + } + &#map_permalink { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position: right -4070px; + } + &.feed { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position: right -3936px; + } + &:hover { + background-color:#000; + text-decoration:none; + } + } +} + +.ie6 #sub_map_links a { + &#hide_pins_link { + background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif'); + background-position: right 1px; + } + &#all_pins_link { + background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif'); + background-position: right -45px; + } + &#map_permalink { + background-image:url('/cobrands/fixmystreet/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); + a { + color:#fff; + width:50%; + padding:0.5em 0; + font-size:1em; + display:table-cell; + text-align:center; + &:hover { + background:#000; + text-decoration:none; + } + } + &.map_complete { + background:none; + display:block; + border-bottom:4px solid #fff; + a#try_again { + display:block; + margin:0 auto 6em auto; + background:rgba(0, 0, 0, 0.8); + @include border-radius(0.5em); + } + a#mob_ok { + position:absolute; + right:1em; + bottom:0; + height:20px; + padding-top:30px; + display:block; + width:4em; + background:#fff url('/cobrands/fixmystreet/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; + a { + @include button-reset(#333, #1a1a1a, #1a1a1a, #fff, #333, #1a1a1a, #1a1a1a, #fff); + font: { + weight:normal; + size:0.875em; + } + line-height:1; + padding:0.5em 0.75em; + position:absolute; + left:0.3em; + top:0.3em; + } +} + +.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, img { + position: absolute; + border: none; + max-width: none; + } + input { + cursor: crosshair; + background-color: #cccccc; + } + img { + cursor: move; + } + img.pin { + z-index: 100; + background-color: inherit; + } + a img.pin { + cursor: pointer; + cursor: hand; + } +} + +// only on mobile, this is a sidebar on desk (#report-a-problem-sidebar) +a.rap-notes-trigger, +a:hover.rap-notes-trigger { + display:block; + width:90%; + padding-left:5%; + padding-right:5%; +} +.rap-notes { + margin:1em 0; +} + +//report a problem tabs +#problems-nav { + padding:0 1em; + overflow:hidden; + border-bottom:0.25em solid #333; + ul { + @include list-reset-soft; + display:table; + width:100%; + li { + display:table-cell; + border-right:0.25em solid #fff; + &:last-child { + border-right:none; + } + a { + display:block; + background:#e2e2e2; + color:#333; + padding:1em; + text: { + transform:uppercase; + align:center; + } + &:hover { + text-decoration:none; + background:#e6e6e6; + } + &.active { + background:#333; + color:#fff; + } + } + } + } +} + +//display:table fixes +.ie6, .ie7 { + #problems-nav { + clear:both; + margin:0; + padding:0; + ul li { + float:left; + } + } +} + + +table.nicetable { + width:100%; + margin-bottom:2em; + thead { + border-bottom:0.25em solid #ccc; + th { + font-size:0.75em; + } + } + tr { + &.a { + background:#f6f6f6; + } + &:nth-child(even) { + background:#f6f6f6; + } + &.gone { + color: #666666; + background-color: #cccccc; + } + &:hover { + background:#FFF5CC; + cursor:pointer; + } + td { + padding:0.25em; + a { + &:hover { + text-decoration:none; + } + } + } + } + .title { + text-align:left; + } + .data { + width:12%; + } +} + +.promo { + @extend .full-width; + color: $primary_text; + background: $primary; + padding:1em; + margin-bottom:1em; + overflow:hidden; + position: relative; + .close-promo { + position:absolute; + top:0.5em; + right:0.5em; + display:block; + width:16px; + height:16px; + text-indent:-999999px; + background:url(/cobrands/fixmystreet/images/sprite.png) -341px -263px no-repeat; + @include border-radius(4px); + &:hover { + background:#222 url(/cobrands/fixmystreet/images/sprite.png) -341px -223px no-repeat; + } + } +} + +.alert { + @extend .full-width; + background:#ff0000; + padding:1em; + margin-bottom:1em; + color:#fff; + a, a:hover { + color:$primary; + } +} + +.pagination { + text-align:center; + padding:0.5em 1em; + background:#eee; + position:relative; + .prev { + position:absolute; + left:0.5em; + } + .next { + position:absolute; + right:0.5em; + } + a { + @include inline-block; + color: $primary_text; + background: $primary; + padding-left:0.5em; + padding-right:0.5em; + color:#1a1a1a; + &:hover { + color:#1a1a1a; + text-decoration:none; + background:$primary/1.1; + } + } +} + +// this is a bit of a hack to get some differentation between desk and mobile +.desk-only { + display:none; +} + +// hide anything with this class if js is working +.js .hidden-js { + display: none; + visibility: hidden; +} + +// hide anything with this class if js is NOT working +.no-js .hidden-nojs { + display: none !important; + visibility: hidden; +} + + +/* Front page */ +#front-main { + text-align:center; + margin: 1em; + h2 { + font: { + style:italic; + font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif; + size:1.1875em; + } + color:#4d4d4d; + } + p { + margin: 0.5em 0 0; + } + #postcodeForm { + @extend .full-width; + padding:1em; + color: $primary_text; + background: $primary; + font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif; + label { + margin:0; + } + div { + display:table; + width:100%; + background:#fff; + border:1px solid $primary; + input#pc { + display:table-cell; + margin:0; + padding:0.25em 2%; + width:86%; + border:none; + background:none; + line-height:1.5em; + } + input#submit { + display:table-cell; + border:none; + padding:0; + margin:0; + width:14%; + height:35px; + background:$primary; + color:#fff; + text-transform:uppercase; + @include border-radius(0); + &:hover { + background:lighten($primary, 10%); + } + } + } + } + a#geolocate_link { + @include inline-block; + vertical-align:top; + background:#1a1a1a; + color:#C8C8C8; + padding:0.5em; + font: { + font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif; + size:0.8125em; + } + @include border-radius(0 0 0.25em 0.25em); + &:hover { + text-decoration:none; + background:#2a2a2a; + } + } +} + +#front-howto { + #front_stats { + display:table; + width:100%; + color: $primary_text; + background: $primary; + font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif; + div { + display:table-cell; + text-align:center; + padding:1em; + line-height:1.25em; + font: { + size:0.8125em; + weight:bold; + } + big { + display:block; + margin-bottom:0.5em; + font-size:1.5385em; + } + } + } +} + +#front-recently { + .issue-list-a { + border-bottom:none; + } +} + +#alerts { + ul { + margin-bottom: 1em; + } + li { + padding: 0em; + margin-bottom: 0.5em; + } + .a { + background: #f6f6f6; + } + img[width="16"] { + float: right; + } +} + diff --git a/web/cobrands/stevenage/_h5bp.scss b/web/cobrands/stevenage/_h5bp.scss new file mode 100644 index 000000000..f4078cca6 --- /dev/null +++ b/web/cobrands/stevenage/_h5bp.scss @@ -0,0 +1,271 @@ +/* + * 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: #fff +} + +/* + * 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 { 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; } +} diff --git a/web/cobrands/stevenage/_layout.scss b/web/cobrands/stevenage/_layout.scss index 3cdb32aa8..598f7bae2 100644 --- a/web/cobrands/stevenage/_layout.scss +++ b/web/cobrands/stevenage/_layout.scss @@ -10,7 +10,7 @@ } body { - background: #1A1A1A url(/cobrands/fixmystreet/images/tile.jpg) 0 0 repeat; + background: #dddddb; //#1A1A1A url(/cobrands/fixmystreet/images/tile.jpg) 0 0 repeat; } h1 { @@ -58,13 +58,21 @@ h1 { display: table-caption; .nav-wrapper-2{ width: 100%; - min-height: 4em; + min-height: min-intrinsic; position: absolute; - border-top:4px solid #1a1a1a; - @include border-image(url(/cobrands/fixmystreet/images/tile-y-border.jpg) 4 0 0 0); + top:158px; + border-top: none; border-left:0; border-right:0; z-index:2; + padding-top: 0.75em; + padding-bottom: 0.25em; + background-color: #6b6969; + background-image: -webkit-gradient(linear, left top, left bottom, from(#6b6969), to(#555454)); /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(top, #6b6969, #555454); /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(top, #6b6969, #555454); /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(top, #6b6969, #555454); /* Opera 11.10-12.00 */ + background-image: linear-gradient(to bottom, #6b6969, #555454); /* Firefox 16+, IE10, Opera 12.50+ */ } } @@ -121,7 +129,7 @@ h1 { list-style: none; padding: 0px; margin: 0px; - float:right; + float:none; li{ list-style: none; display: inline; @@ -132,33 +140,39 @@ h1 { span { display: block; color:#fff; - background: none; - border-bottom: none; + background: none; + border-bottom: none; + margin: 0; + margin-right: 2px; + font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif; } } &#main-menu{ li{ a, span{ - padding: 0.75em; + padding: 0.5em 0.75em; font-size: 0.9em; + margin: 0; + @include border-radius(0.25em); } a:hover{ background:#444; - @include background(linear-gradient(#000, #444 10%, #444 95%, #111)); } a.report-a-problem-btn { color: $primary_text; background: $primary; padding:0.25em; margin:0.5em; - color:#333; + margin-bottom: 0; + color:#fff; @include border-radius(0.25em); &:hover { background:$primary/1.1; } } span { - color:$primary; + color: #fff; + background-color: #066539; } } } @@ -218,12 +232,17 @@ h1 { // map page - has fixed header and different styling body.mappage { + #stevenage_cc_header{ + position: fixed; + } .container { width: auto; } .content { float:left; + margin-top: 6em; } +/* #main-nav ul#main-menu li a, #main-nav ul#main-menu li span { padding: 1.4em 0.75em 1.35em 0.75em; @@ -232,12 +251,13 @@ body.mappage { padding: 0.5em; margin:0.9em 0.25em 0.85em 0.25em; } +*/ .nav-wrapper{ .nav-wrapper-2{ position: fixed; - background: #222; - @include background(linear-gradient(#000, #222 10%, #222 90%, #000)); + top:92px; } + } #site-logo{ position: fixed; @@ -245,6 +265,9 @@ body.mappage { } .ie6, .ie7 { body.mappage { + #stevenage_cc_header { + position:static; + } // The below is *mandatory* to allow pins/zoom to be clickable in IE6/7. Do NOT remove. .container { float: left; @@ -267,12 +290,16 @@ body.mappage { //the z-index base yet again :S .ie8 { body.mappage { + #stevenage_cc_header{ + position:static; + } .nav-wrapper{ position: relative; z-index:0; - .nav-wrapper-2 { + .nav-wrapper-2{ position:static; } + } #site-logo { position: absolute; @@ -286,6 +313,11 @@ body.mappage { body.fullwidthpage { .content { width: 57em; + box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow:none; + -o-box-shadow:none; + background: none; } .intro { width:40em; @@ -318,7 +350,7 @@ body.twothirdswidthpage { z-index: -1; aside { position: fixed; - top:7em; + top:19em; left:auto; } } @@ -374,7 +406,7 @@ body.twothirdswidthpage { //footer blocks #footer-mobileapps { - border-right:1em solid #fff; + border-right:1em solid transparent; background:none; padding:0; @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0); @@ -432,14 +464,14 @@ body.twothirdswidthpage { } #footer-help { - border-left:1em solid #fff; + border-left:1em solid transparent; ul { display:table; li { display:table-cell; border-bottom:none; &:last-child { - border-left:1.25em solid #fff; + border-left:1.25em solid transparent; } } } @@ -465,13 +497,13 @@ body.twothirdswidthpage { height: 29em; width: 29em; right: 1em; - top: 3em; + top: 140px; z-index:1; } // Pull OpenLayers navigation down a bit #fms_pan_zoom { - top: 4.75em !important; + top: 190px !important; } // push zoom back over to right @@ -767,10 +799,10 @@ body.frontpage { } } .nav-wrapper-2{ - height:6em; + height:auto; } #site-header{ - height:8em; + height:auto; } #site-logo{ top:3em; @@ -826,9 +858,11 @@ body.frontpage { // big yellow bit full screen width #front-main { color: $primary_text; - background: $primary url(/cobrands/fixmystreet/images/tile-y.jpg); - margin: 0; + background: #fff; + margin: 0 auto; + margin-top: 1.5em; padding: 1em; + max-width: 60em; #front-main-container { max-width: 57em; margin:0 auto; @@ -897,7 +931,7 @@ body.frontpage { } #front-howto { - border-right:1em solid #fff; + border-right:1em solid transparent; #front_stats { background:none; color: #222; @@ -921,7 +955,7 @@ body.frontpage { } #front-recently { - border-left:1em solid #fff; + border-left:1em solid transparent; } #front-howto h2, @@ -963,13 +997,14 @@ body.frontpage { #main-nav{ width: auto; - float:right; + float:left; padding-left: 180px; } .nav-wrapper { // width:auto; .nav-wrapper-2 { // width:auto; + @include background(linear-gradient(#222, #555 30%, #555 60%, #222)); } } @@ -1039,7 +1074,7 @@ body.frontpage { left:32em; top:30em; aside { - top:9em; + top:19em; } } } diff --git a/web/cobrands/stevenage/base.scss b/web/cobrands/stevenage/base.scss index 4594f832f..b1ceac384 100644 --- a/web/cobrands/stevenage/base.scss +++ b/web/cobrands/stevenage/base.scss @@ -1,7 +1,8 @@ -@import "../fixmystreet/_h5bp"; -@import "./_colours"; +@import "h5bp"; +@import "colours"; @import "../fixmystreet/_mixins"; @import "compass"; -@import "../fixmystreet/_base"; +@import "fmsbase"; +@import "council_header"; |