/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9.
* Hide the `template` element in IE, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre-wrap;
}
/**
* Set consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9.
*/
img {
border: 0;
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
* Variables
*/
/*
* Extenders
* I think the best way to do these is only single level, nothing nested, and only things that'll apply to all levels to avoid the fact it doesn't work inside media queries.
*/
/* zeldman style image replacement, 110% to stop occasional firefox issues */
/* clearfix */
p.button:after, .clearfix:after, .inner:after, .left-help:after, .number-wrapper:after, .number-wrapper .number:after, .search-options:after, .search-options .search-wrapper:after, .file-upload:after, .summary .totals:after, .summary .totals li:after, .fixed .summary .small-fixed:after, .submit:after, .row:after {
content: "";
display: table;
clear: both;
}
/* visually hidden */
.visuallyhidden {
/* html5bp style visually hidden */
position: absolute !important;
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
width: 1px;
}
/* fonts */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Roboto, "Proxima Nova", Arial, sans-serif;
}
body {
font-family: Roboto, "Proxima Nova", Arial, sans-serif;
}
/* ul/ol reset */
.mainfooter ul, .questions, .uploaded-files, .summary .totals ul, .fixed .summary .totals ul, .validation-summary-errors ul, .steps ul {
margin: 0;
padding: 0;
list-style: none;
}
/*
* Mixins
* Most mixins will be in this file, a couple of the more complext ones are imported at the bottom
* Contents
* IE support
* Border radius
* Retina images
* Vertical Gradient
* Horizontal Gradient
* Box Shadow
* ng-sprite
* RGba
* Link colours
* Background size
* placeholder colour
* Font sizing
* Imports
*/
/* IE support
* This mixin will handle all the css for IE8 & 9
Usage is quite simple, it'll only work when the versions are 8 or 9 (the mixin automatically adds 1 so the .lt- value is correct)
@include ie(9) {
//CSS here
}
*/
/* Border radius
* for all borders, each side, or each corner
*/
/* Retina images
* Use in the format @include image-2x("path/to/image.ext", WIDTHpx, HEIGHtpx);
* the path should be the same as the regular image with the extra /retina/ directory
* width and height are the width and height of the original image (not the element if you're using a sprite)
* For ease of code maintenence it's best to have these the line afer the non-retina background
* from https://signalvnoise.com/posts/3271-easy-retina-ready-images-using-scss
*/
/* Vertical Gradient
* from http://breakthebit.org/post/5214569460/sass-mixin-for-css3-gradients
*/
/* Horizontal Gradient
*/
/* Box Shadow
* from http://stackoverflow.com/questions/10435056/creating-a-box-shadow-mixin-using-sass
*/
/*
* ng-sprite
* This is the Nicolas Gallagher style sprite from http://nicolasgallagher.com/css-background-image-hacks/
* This can be applied to :before, :after or both (so an item can have 2 background images)
* it assumes absolute position on the psuedo element as the is the most likely method, floating could also be used but would need to be manually coded
* the containing element will need to be position: relative or absolute;
* z-index defaults to 0, can be useful to set if there's 2 things
* if you want to position from something other than top left set them as auto an manually add the right and/or bottom
* the easiest thing will be to copy the code below and use that
selector {
position: relative;
&:before {
//($width, $height, $top, $left, $image, $imageLeft, $imageTop, $zindex:0)
@include ng-sprite(XXpx, XXpx, XXpx, XXpx, "../images/filename.png", XXpx, XXpx);
}
}
*/
/*
* RGba
* An IE8 friendly version, takes a hex colour and an opacity
*/
/*
* Link colours
* use inside the a tag
* based on http://www.sitepoint.com/sass-basics-the-mixin-directive/
*/
/*
* Background size
* creates a background size thing, including an ie8 fallback
*/
/*
* placeholder colour
*/
/*
* Font sizing
*/
/*
* Breakpoint
* The fresh air breakpoint works as simply as possible, it assumes that most queries will just be min-width using a pre-defined break point variable, so the usage would be
@include fresh-breakpoint($bp-size) {
//CSS here
}
The function automatically outputs an IE8 fallback, so IE8 will get all breakpoint sizes, this means IE8 is always going to see the desktop version.
The only caveat on this is breakpoints need to be in order from smallest to largest.
The IE8 fallback can be turned off if needed, for example if you're targeting an IE9 bug inside a breakpoint, the ie8 fallback would give you the following selector which would do nothing.
.lt-ie9 .lt-ie10 #selector { }
Also turning off IE8 for some things can be useful, fresh-grid has it turned off on bp-medium as IE8 will never see this, some other mixins might also use it
The following sass
@include fresh-breakpoint(900px) {
width: 860px;
}
would output
@media screen and (min-width: 900px) {
#selector {
width: 860px;
}
}
.lt-ie9 #selector {
width: 860px;
}
Or to demo the extra options, with a max width and IE8 turned off this sass
@include fresh-breakpoint(900px, 1200px, false) {
width: 1100px;
}
would output
@media screen and (min-width: 900px) and (max-width: 1200px) {
#selector {
width: 1100px;
}
}
*/
/*
* Fresh Grid
* The basic grid system is done with the following code. (There is a more comprehensive, class based, grid system in grids.scss)
* The variables set 2 widths, for the default breakpoints, a default number of columns, and default gutter.
These can be replaced in _variables without the !default
* The extenders add in the styles that anything using the grid systen will need, with a width of 100% as the default mobile behaviour is to go single column. The second extender handles the float right/left last/first child code which avoids the jagged right hand issues you can get with rounding.
These are extenders to stop a lot of repetition of css, it does mean there will be a big selector. It probably doesn't matter either way when gzipping, but the extender will almost definitely make the pre-compression code smaller so be better for those without gzip support.
* Mixins
fresh-grid($cols, $prefix:false, $suffix:false, $alpha:false, $omega:false)
This is the main function for creating grid based layouts, it takes the following variables
$cols - how wide this element will be in columns
$prefix & $suffix - optionally, how many columns to prefix or suffix the element with (uses additional padding)
$alpha & $omega - optionally, not having the default gutter padding left (alpha) and right (omega)
Based on these variables the mixin will:
1. run the extender on the element giving it the default mobile values
2. using the fresh-breakpoint mixin, style for medium and large sizes,
these are identical except for the last/first child float changes that only need to be on medium
- Variables for the width (container width divided by total columns, multiplied by $cols)
This includes a default variable for later use
- Alpha and omega changes in if functions, if these are set to true set the padding varaibles to 0
- Some floating changes to avoid rounding issues (the last div in a container will be floated right)
This is a rip-off of the zen grids idea, but can be the wrong way to do it so may need to change on a project
- If the prefix is set add it as additional left padding
if the alpha is set don't include the gutter on that left padding
and set the width to take into acount the default width (from the earlier variable) and the new extra padding
- If the suffix is set add it as additional right padding
if the omega is set don't include the gutter on that right padding
and set the width to take into acount the default width (from the earlier variable) and the new extra padding
but if prefix is set as well both the prefix and suffix padding are added to the default width
- The css width is now set based on the variable
- And if they've changed the left and right padding are updated from the default $gutter
fresh-grid-margin($cols, $negative:false)
This function is useful for positioning based on grid sizes.
It's very simple it will only change the left margin, optionally negatively
But this is enough for basic float based layouts, that will adapt responsively.
Output is only for medium and large breakpoints as the default is one column, and is just margin-left of the number of columns the element needs to move
fresh-grid-width($cols)
A very stripped down version of the main grid mixin that just returns a width at the 3 breakpoints.
This can be useful for things that need to be x columns wide, but not get the rest of the styling
*/
/**
* _styleguide.scss
* Version 2
* *********
*
*******
* NOTES
*******
* TODO: rewrite this documentation
* TODO: this file to change to defaults.css
* This file should be responsible for setting css defaults only
* both typographic and html element spacing for starting-point
* consistency.
*
* This stylesheet provides the basics for typographic
* styling including the spacing between elements.
*
* For sub themes, you can copy this file and work through
* each of the classes to adjust the settings as your theme
* requires.
*
* Styles are limited to setting only font size, margin and
* padding in order to provide the underlying look and feel
* for the theme.
*
* Vertical spacing between elements is set here with
* margin-bottom styles to ensure that elements
* are always presented with spacing between them. By making
* sure that it is always the bottom of elements that are
* spaced with margin, it should mean that it won't matter
* in what order elements are used in the source HTML,
* vertical spacing is maintained between elements.
*
* Percentages are used for font sizes and line height.
* Body has a size of 10 pixels to make calculations easy.
* Margins based on font size should still be done with EMs
* as % based could be based on the height of the whole element
*/
/*
* note that the border-box option means width is the entire width of the element, including padding.
* so div { width: 100px; padding: 10px; } will be in total 100px wide, not 120px. and any elements inside would be 80px wide
*/
*, :before, :after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
overflow-y: auto;
}
body {
/* body's font-size and line-height are set in fresh air.css */
/* background: #ffffff; */
color: #131313;
line-height: 21px;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
body {
font-size: inherit;
}
}
.lt-ie9 body {
font-size: 13px;
}
@media screen and (min-width: 960px) {
body {
font-size: inherit;
}
}
.lt-ie9 body {
font-size: 14px;
}
h1 {
margin: 0 0 1em;
color: #131313;
font-weight: 300;
font-size: 16px;
}
@media screen and (min-width: 768px) {
h1 {
font-size: 19px;
}
}
.lt-ie9 h1 {
font-size: 19px;
}
@media screen and (min-width: 960px) {
h1 {
font-size: 20px;
}
}
.lt-ie9 h1 {
font-size: 20px;
}
h2 {
margin: 0 0 1em;
color: #131313;
font-weight: 300;
font-size: 16px;
}
@media screen and (min-width: 768px) {
h2 {
font-size: 19px;
}
}
.lt-ie9 h2 {
font-size: 19px;
}
@media screen and (min-width: 960px) {
h2 {
font-size: 20px;
}
}
.lt-ie9 h2 {
font-size: 20px;
}
h3 {
margin: 0 0 1.11em;
font-weight: 300;
font-size: 13px;
}
@media screen and (min-width: 768px) {
h3 {
font-size: 16px;
}
}
.lt-ie9 h3 {
font-size: 16px;
}
@media screen and (min-width: 960px) {
h3 {
font-size: 17px;
}
}
.lt-ie9 h3 {
font-size: 17px;
}
h4,
h5,
h6 {
margin: 0 0 1.25em;
font-weight: 400;
font-size: 12px;
}
@media screen and (min-width: 768px) {
h4,
h5,
h6 {
font-size: 13px;
}
}
.lt-ie9 h4, .lt-ie9
h5, .lt-ie9
h6 {
font-size: 13px;
}
@media screen and (min-width: 960px) {
h4,
h5,
h6 {
font-size: 14px;
}
}
.lt-ie9 h4, .lt-ie9
h5, .lt-ie9
h6 {
font-size: 14px;
}
p,
table {
margin: 0 0 10px;
}
p.large {
font-weight: 300;
font-size: 16px;
}
@media screen and (min-width: 768px) {
p.large {
font-size: 19px;
}
}
.lt-ie9 p.large {
font-size: 19px;
}
@media screen and (min-width: 960px) {
p.large {
font-size: 20px;
}
}
.lt-ie9 p.large {
font-size: 20px;
}
ul,
ol {
margin: 0 0 20px 40px;
padding: 0;
}
ul {
list-style: disc outside;
}
ol {
list-style: decimal outside;
}
ul li, ol li {
margin: 0;
padding: 0;
}
/* we don't typically require bottom margin on nested lists */
ul ul,
ol ol,
ul ol,
ol ul,
dl ul,
dl ol,
ul dl,
ol dl {
margin: 0 0 0 20px;
}
dl {
margin: 0 0 20px;
}
dt, dd {
line-height: 19px;
margin: 0 0 1.43em;
float: left;
}
dt {
clear: left;
width: 45%;
max-width: 180px;
font-weight: 400;
font-size: 12px;
}
@media screen and (min-width: 768px) {
dt {
font-size: 13px;
}
}
.lt-ie9 dt {
font-size: 13px;
}
@media screen and (min-width: 960px) {
dt {
font-size: 14px;
}
}
.lt-ie9 dt {
font-size: 14px;
}
@media screen and (min-width: 768px) {
dt {
max-width: 195px;
}
}
.lt-ie9 dt {
max-width: 195px;
}
dd {
width: 55%;
padding-left: 20px;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
dd {
font-size: 13px;
}
}
.lt-ie9 dd {
font-size: 13px;
}
@media screen and (min-width: 960px) {
dd {
font-size: 14px;
}
}
.lt-ie9 dd {
font-size: 14px;
}
a:link,
a:visited {
text-decoration: underline;
color: #0000ff;
}
a:hover,
a:active {
text-decoration: none;
color: #74889f;
}
img {
display: block;
margin: 0;
padding: 0;
}
img.left {
float: left;
margin: 0 20px 20px 0;
}
img.right {
float: right;
margin: 0 0 20px 20px;
}
q {
font-style: italic;
color: #3A3A3A;
}
sub {
font-size: 75%;
vertical-align: sub;
bottom: 0;
}
sup {
font-size: 75%;
vertical-align: baseline;
top: -4px;
position: relative;
}
ins {
text-decoration: underline;
}
address {
font-style: normal;
margin: 0 0 1.43em;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
address {
font-size: 13px;
}
}
.lt-ie9 address {
font-size: 13px;
}
@media screen and (min-width: 960px) {
address {
font-size: 14px;
}
}
.lt-ie9 address {
font-size: 14px;
}
em, i {
font-style: italic;
}
strong, b {
font-weight: 400;
}
/* TODO: style this to simply insert padding and 66/99 quotations */
blockquote {
margin: 20px;
padding: 20px;
border-left: 1px solid #3A3A3A;
}
blockquote cite {
display: block;
margin: 0;
}
pre {
display: block;
margin: 0 0 1.43em;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
pre {
font-size: 13px;
}
}
.lt-ie9 pre {
font-size: 13px;
}
@media screen and (min-width: 960px) {
pre {
font-size: 14px;
}
}
.lt-ie9 pre {
font-size: 14px;
}
table, tr, th, td {
margin: 0;
padding: 0;
border: none;
}
table {
margin: 0 0 1.43em;
}
table tr {
margin: 0;
padding: 0;
}
table th,
table td {
padding: 5px;
border: 1px solid #d1d1d1;
margin: 0;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
table th,
table td {
font-size: 13px;
}
}
.lt-ie9 table th, .lt-ie9
table td {
font-size: 13px;
}
@media screen and (min-width: 960px) {
table th,
table td {
font-size: 14px;
}
}
.lt-ie9 table th, .lt-ie9
table td {
font-size: 14px;
}
hr {
color: #e40031;
background-color: #e40031;
height: 1px;
border: none;
margin: 0 0 20px;
}
caption {
caption-side: bottom;
margin: 11px 0;
text-align: left;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
caption {
font-size: 13px;
}
}
.lt-ie9 caption {
font-size: 13px;
}
@media screen and (min-width: 960px) {
caption {
font-size: 14px;
}
}
.lt-ie9 caption {
font-size: 14px;
}
/* form elements */
span.req {
color: #B40000;
}
input[type="checkbox"] {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
background-clip: padding-box;
/* stops bg color from leaking outside the border: */
}
input[type="file"] {
max-width: 100%;
}
input[type="text"],
textarea {
-webkit-appearance: none;
font-size: 16px;
line-height: 19px;
font-weight: 300;
height: 42px;
color: #131313;
padding: 8px;
border: 3px solid #e3e3e3;
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
background-clip: padding-box;
/* stops bg color from leaking outside the border: */
}
input[type="text"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #939393;
font-weight: 300;
}
input[type="text"]:-moz-placeholder,
textarea:-moz-placeholder {
/* Firefox 18- */
color: #939393;
font-weight: 300;
}
input[type="text"]::-moz-placeholder,
textarea::-moz-placeholder {
/* Firefox 19+ */
color: #939393;
font-weight: 300;
}
input[type="text"]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #939393;
font-weight: 300;
}
input[type="text"]:focus,
textarea:focus {
outline: 0;
}
.no-js input[type="text"]:required, .no-js
textarea:required {
border-color: #cc0000;
}
input[type="text"].full-width,
textarea.full-width {
width: 100%;
}
input[type="text"].input-validation-error,
textarea.input-validation-error {
border-color: #cc0000;
}
textarea {
float: left;
width: 100%;
max-width: 463px;
}
.no-js textarea {
height: 117px;
}
input[disabled] {
background: #f0f0f0;
}
.dotted-border {
border-bottom: 1px solid #d5d4d4;
padding-bottom: 20px;
}
.button + .button,
button + .button,
.button + button,
button + button {
margin-top: 12px;
}
input[type="submit"],
.button a,
button {
padding: 12px 56px 12px 18px;
color: #fff;
line-height: 19px;
position: relative;
text-align: left;
display: inline-block;
vertical-align: top;
border: none;
background: url(../images/sprite-submit.png) no-repeat right -36px scroll;
background-color: #8092a7;
font-weight: 300;
font-size: 13px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
background-clip: padding-box;
/* stops bg color from leaking outside the border: */
}
/*.paybutton a,
.photosbutton a,
.continuebutton a {
padding: 12px 56px 12px 18px;
color: #fff;
line-height: 19px;
position: relative;
text-align: left;
display: inline-block;
vertical-align: top;
border: none;
background-color: #8092a7;
background-image: url(../images/sprite-submit.png);
background-attachment: scroll;
background-repeat: no-repeat;
background-position-x: right;
background-position-y: -36px;
font-weight: 300;
font-size: 17px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
background-clip: padding-box;
width: 242px;
}*/
@media screen and (min-width: 768px) {
input[type="submit"],
.button a,
button {
font-size: 16px;
}
}
.lt-ie9 input[type="submit"], .lt-ie9
.button a, .lt-ie9
button {
font-size: 16px;
}
@media screen and (min-width: 960px) {
input[type="submit"],
.button a,
button {
font-size: 17px;
}
}
.lt-ie9 input[type="submit"], .lt-ie9
.button a, .lt-ie9
button {
font-size: 17px;
}
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
input[type="submit"],
.button a,
button {
/* on retina, use image that's scaled by 2 */
background-image: url("../images/retina/sprite-submit.png");
background-size: 25px 65px;
}
}
input[type="submit"]:hover,
.button a:hover,
button:hover {
background-color: #74889f;
}
input[type="submit"]:active,
.button a:active,
button:active {
background-color: #687d96;
}
/*input[type="submit"].disabled,
.button a.disabled,
button.disabled {
background-color: #a1a1a1;
}*/
.button.return a {
background-color: #000;
border-color: #000;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.button.return a {
font-size: 13px;
}
}
.lt-ie9 .button.return a {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.button.return a {
font-size: 14px;
}
}
.lt-ie9 .button.return a {
font-size: 14px;
}
.button.back input {
display: block;
background-image: url(../images/button-sprite--reversed.png);
background-position: 10px -36px;
padding-left: 30px;
}
.no-placeholder {
display: none;
}
.lt-ie10 .no-placeholder {
display: inline;
}
/*
input[type="checkbox"],
input[type="radio"] {
/* basic classes */
.push1 {
margin-bottom: 10px !important;
}
@media screen and (min-width: 768px) {
.push1 {
margin-bottom: 13px !important;
}
}
.lt-ie9 .push1 {
margin-bottom: 13px !important;
}
@media screen and (min-width: 960px) {
.push1 {
margin-bottom: 15px !important;
}
}
.lt-ie9 .push1 {
margin-bottom: 15px !important;
}
.push2 {
margin-bottom: 20px !important;
}
@media screen and (min-width: 768px) {
.push2 {
margin-bottom: 25px !important;
}
}
.lt-ie9 .push2 {
margin-bottom: 25px !important;
}
@media screen and (min-width: 960px) {
.push2 {
margin-bottom: 30px !important;
}
}
.lt-ie9 .push2 {
margin-bottom: 30px !important;
}
.clear {
clear: both;
}
.clearleft {
clear: left;
}
.clearright {
clear: right;
}
.clearnone {
clear: none;
}
.left {
float: left;
}
.right {
float: right;
}
/* Hide for both screenreaders and browsers
css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden {
display: none;
visibility: hidden;
}
/* Hide only visually, but have it available for screenreaders
www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
/* Hide visually and from screenreaders, but maintain layout */
.invisible {
visibility: hidden;
}
/* Clearfix */
/**
* _accessibility.scss
*/
/**
* Skip Links
*
* Fresh Air adds skip-links for accessibility to page.tpl.php
* There are various techniques for hiding skip links and to
* save theming time, these styles hide the skip links by
* default and shows them on focus.
*/
ul#skip-links {
width: 1px;
height: 1px;
overflow: hidden;
margin: -1px 0 0 0;
}
ul#skip-links a:link, ul#skip-links a:hover, ul#skip-links a:visited {
display: block;
position: absolute;
top: -500px;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
ul#skip-links a:active, ul#skip-links a:focus {
position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
/* background: #fff;
/* An attempt to ensure that any admin menus don't get in the way */
z-index: 99999999;
}
/*
* finally import the partials
*/
/*
Header
*/
.mainheader {
/*background: #ffffff; */
}
.mainheader .branding {
border-bottom: 2px solid #131313;
padding: 44px 0 22px;
}
@media screen and (min-width: 768px) {
.mainheader .branding {
padding-bottom: 33px;
}
}
.lt-ie9 .mainheader .branding {
padding-bottom: 33px;
}
@media screen and (min-width: 960px) {
.mainheader .branding {
padding-bottom: 33px;
}
}
.lt-ie9 .mainheader .branding {
padding-bottom: 33px;
}
.mainheader .branding .button {
float: right;
margin-top: -44px;
}
@media screen and (min-width: 960px) and (min-height: 575px) {
.mainheader .branding .button {
margin-right: -85px;
width: 242px;
}
}
.mainheader .branding .button a {
/* background-color: #fff; */
color: #666;
background-position: right 14px;
padding-right: 46px;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.mainheader .branding .button a {
font-size: 13px;
}
}
.lt-ie9 .mainheader .branding .button a {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.mainheader .branding .button a {
font-size: 14px;
}
}
.lt-ie9 .mainheader .branding .button a {
font-size: 14px;
}
@media screen and (min-width: 768px) {
.mainheader .branding .button a {
/*background-color: #000;*/
color: #fff;
background-position: right -36px;
padding-right: 56px;
}
.mainheader .branding .button a:hover {
background-color: #333;
}
}
.lt-ie9 .mainheader .branding .button a {
background-color: #000;
color: #fff;
background-position: right -36px;
padding-right: 56px;
}
.lt-ie9 .mainheader .branding .button a:hover {
background-color: #333;
}
@media screen and (min-width: 960px) and (min-height: 575px) {
.mainheader .branding .button a {
display: block;
}
}
.mainheader .branding img {
max-width: 50%;
height: auto;
}
.mainheader .heading {
padding: 30px 0 10px;
}
/*
Footer
*/
.mainfooter {
background: #ededed;
padding: 40px 0 15px;
clear: both;
}
@media screen and (min-width: 768px) {
.mainfooter {
text-align: center;
}
}
.lt-ie9 .mainfooter {
text-align: center;
}
.mainfooter ul {
margin: 0 -6px;
}
@media screen and (min-width: 768px) {
.mainfooter ul {
margin: 0 -10px;
}
}
.lt-ie9 .mainfooter ul {
margin: 0 -10px;
}
.mainfooter li {
display: inline-block;
margin: 0 6px 15px;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.mainfooter li {
font-size: 13px;
}
}
.lt-ie9 .mainfooter li {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.mainfooter li {
font-size: 14px;
}
}
.lt-ie9 .mainfooter li {
font-size: 14px;
}
@media screen and (min-width: 768px) {
.mainfooter li {
margin-bottom: 30px;
}
}
.lt-ie9 .mainfooter li {
margin-bottom: 30px;
}
.mainfooter a {
display: block;
padding: 0 0 2px;
color: #999999;
border-bottom: 1px dotted #999999;
}
.mainfooter a:hover {
color: #4d4d4d;
border-bottom: 1px solid #4d4d4d;
}
.mainfooter p {
color: #131313;
font-weight: 300;
font-size: 11px;
}
@media screen and (min-width: 768px) {
.mainfooter p {
font-size: 11px;
}
}
.lt-ie9 .mainfooter p {
font-size: 11px;
}
@media screen and (min-width: 960px) {
.mainfooter p {
font-size: 12px;
}
}
.lt-ie9 .mainfooter p {
font-size: 12px;
}
/*
* layout
*/
.inner {
margin: 0 auto;
padding: 0 10px;
width: 100%;
}
@media screen and (min-width: 768px) {
.inner {
width: 672px;
}
}
@media screen and (min-width: 960px) {
.inner {
width: 672px;
}
}
.lt-ie9 .inner {
width: 672px;
}
@media screen and (min-width: 768px) {
.inner {
padding: 0;
}
}
.lt-ie9 .inner {
padding: 0;
}
@media screen and (min-width: 960px) and (min-height: 575px) {
.fixed section .inner {
width: 840px;
padding-right: 252px;
}
}
section {
background: transparent;
padding: 16px 0;
}
@media screen and (min-width: 768px) {
section {
padding: 20px 0;
}
}
.lt-ie9 section {
padding: 20px 0;
}
/*
Main content elements
*/
section h2 {
font-weight: 400;
font-size: 16px;
}
@media screen and (min-width: 768px) {
section h2 {
font-size: 19px;
}
}
.lt-ie9 section h2 {
font-size: 19px;
}
@media screen and (min-width: 960px) {
section h2 {
font-size: 20px;
}
}
.lt-ie9 section h2 {
font-size: 20px;
}
section.border .inner {
position: relative;
padding-bottom: 40px;
}
section.border .inner:before {
content: " ";
display: block;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
border-bottom: 1px solid #d5d4d4;
}
@media screen and (min-width: 960px) and (min-height: 575px) {
.fixed section.border .inner:before {
width: 588px;
}
}
.has-help {
position: relative;
}
@media screen and (min-width: 960px) {
.has-help {
width: 550px;
}
}
.lt-ie9 .has-help {
width: 550px;
}
.has-help label.help {
max-width: 750px;
width: 100%;
background: #fcfcfc;
margin: 15px 0;
padding: 10px;
border: 2px solid #e3e3e3;
float: right;
position: relative;
font-weight: 300;
font-size: 12px;
}
.has-help dialog.help {
max-width: 300px;
width: 100%;
background: #fcfcfc;
margin: 15px 0;
padding: 10px;
border: 2px solid #e3e3e3;
float: right;
position: relative;
font-weight: 300;
font-size: 12px;
}
.js .has-help label.help {
display: none;
}
.js .has-help dialog.help {
display: none;
}
@media screen and (min-width: 768px) {
.has-help label.help {
font-size: 13px;
}
}
.lt-ie9 .has-help label.help {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.has-help label.help {
font-size: 14px;
}
}
.lt-ie9 .has-help label.help {
font-size: 14px;
}
@media screen and (min-width: 960px) {
.has-help label.help {
width: 250px;
margin: -1px -258px 0 0;
}
}
.lt-ie9 .has-help label.help {
width: 250px;
margin: -1px -258px 0 0;
}
.has-help label.help:before {
content: "";
position: absolute;
top: -12px;
left: 80%;
width: 22px;
height: 12px;
background: transparent url("../images/sprite.png") no-repeat -110px 0px scroll;
z-index: 0;
}
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
.has-help label.help:before {
/* on retina, use image that's scaled by 2 */
background-image: url("../images/retina/sprite.png");
background-size: 250px 60px;
}
}
@media screen and (min-width: 960px) {
.has-help label.help:before {
width: 12px;
height: 22px;
background-position: -85px 0;
top: 8px;
left: -12px;
}
}
.lt-ie9 .has-help label.help:before {
width: 12px;
height: 22px;
background-position: -85px 0;
top: 8px;
left: -12px;
}
.has-help label.help.help-textarea {
clear: both;
float: left;
max-width: 463px;
}
@media screen and (min-width: 960px) {
.has-help label.help.help-textarea {
margin: 12px 0 0 0;
width: 463px;
}
}
.lt-ie9 .has-help label.help.help-textarea {
margin: 12px 0 0 0;
width: 463px;
}
.has-help label.help.help-textarea:before {
content: "";
position: absolute;
top: -12px;
left: 10%;
width: 22px;
height: 12px;
background: transparent url("../images/sprite.png") no-repeat -110px 0px scroll;
z-index: 0;
}
.has-help label.help h3 {
margin: 0;
padding: 0 0 9px;
font-weight: 400;
font-size: 13px;
}
@media screen and (min-width: 768px) {
.has-help label.help h3 {
font-size: 16px;
}
}
.lt-ie9 .has-help label.help h3 {
font-size: 16px;
}
@media screen and (min-width: 960px) {
.has-help label.help h3 {
font-size: 17px;
}
}
.lt-ie9 .has-help label.help h3 {
font-size: 17px;
}
.has-help label.help p {
margin: 0;
padding: 0;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.has-help label.help p {
font-size: 13px;
}
}
.lt-ie9 .has-help label.help p {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.has-help label.help p {
font-size: 14px;
}
}
.lt-ie9 .has-help label.help p {
font-size: 14px;
}
.has-help label.help a {
display: inline-block;
}
@media screen and (min-width: 768px) {
.has-help label.help {
font-size: 13px;
}
}
.lt-ie9 .has-help label.help {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.has-help label.help {
font-size: 14px;
}
}
.lt-ie9 .has-help label.help {
font-size: 14px;
}
@media screen and (min-width: 960px) {
.has-help label.help {
width: 250px;
margin: -1px -258px 0 0;
}
}
.lt-ie9 .has-help label.help {
width: 250px;
margin: -1px -258px 0 0;
}
.has-help label.help:before {
content: "";
position: absolute;
top: -12px;
left: 80%;
width: 22px;
height: 12px;
background: transparent url("../images/sprite.png") no-repeat -110px 0px scroll;
z-index: 0;
}
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
.has-help label.help:before {
/* on retina, use image that's scaled by 2 */
background-image: url("../images/retina/sprite.png");
background-size: 250px 60px;
}
}
@media screen and (min-width: 960px) {
.has-help label.help:before {
width: 12px;
height: 22px;
background-position: -85px 0;
top: 8px;
left: -12px;
}
}
.lt-ie9 .has-help label.help:before {
width: 12px;
height: 22px;
background-position: -85px 0;
top: 8px;
left: -12px;
}
.has-help label.help.help-textarea {
clear: both;
float: left;
max-width: 463px;
}
@media screen and (min-width: 960px) {
.has-help label.help.help-textarea {
margin: 12px 0 0 0;
width: 463px;
}
}
.lt-ie9 .has-help label.help.help-textarea {
margin: 12px 0 0 0;
width: 463px;
}
.has-help label.help.help-textarea:before {
content: "";
position: absolute;
top: -12px;
left: 10%;
width: 22px;
height: 12px;
background: transparent url("../images/sprite.png") no-repeat -110px 0px scroll;
z-index: 0;
}
.has-help label.help h3 {
margin: 0;
padding: 0 0 9px;
font-weight: 400;
font-size: 13px;
}
@media screen and (min-width: 768px) {
.has-help label.help h3 {
font-size: 16px;
}
}
.lt-ie9 .has-help label.help h3 {
font-size: 16px;
}
@media screen and (min-width: 960px) {
.has-help label.help h3 {
font-size: 17px;
}
}
.lt-ie9 .has-help label.help h3 {
font-size: 17px;
}
.has-help label.help p {
margin: 0;
padding: 0;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.has-help label.help p {
font-size: 13px;
}
}
.lt-ie9 .has-help label.help p {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.has-help label.help p {
font-size: 14px;
}
}
.lt-ie9 .has-help label.help p {
font-size: 14px;
}
.has-help label.help a {
display: inline-block;
}
@media screen and (min-width: 768px) {
.has-help dialog.help {
font-size: 13px;
}
}
.lt-ie9 .has-help dialog.help {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.has-help dialog.help {
font-size: 14px;
}
}
.lt-ie9 .has-help dialog.help {
font-size: 14px;
}
@media screen and (min-width: 960px) {
.has-help dialog.help {
width: 250px;
margin: -1px -258px 0 0;
}
}
.lt-ie9 .has-help dialog.help {
width: 250px;
margin: -1px -258px 0 0;
}
.has-help dialog.help:before {
content: "";
position: absolute;
top: -12px;
left: 80%;
width: 22px;
height: 12px;
background: transparent url("../images/sprite.png") no-repeat -110px 0px scroll;
z-index: 0;
}
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
.has-help dialog.help:before {
/* on retina, use image that's scaled by 2 */
background-image: url("../images/retina/sprite.png");
background-size: 250px 60px;
}
}
@media screen and (min-width: 960px) {
.has-help dialog.help:before {
width: 12px;
height: 22px;
background-position: -85px 0;
top: 8px;
left: -12px;
}
}
.lt-ie9 .has-help dialog.help:before {
width: 12px;
height: 22px;
background-position: -85px 0;
top: 8px;
left: -12px;
}
.has-help dialog.help.help-textarea {
clear: both;
float: left;
max-width: 463px;
}
@media screen and (min-width: 960px) {
.has-help dialog.help.help-textarea {
margin: 12px 0 0 0;
width: 463px;
}
}
.lt-ie9 .has-help dialog.help.help-textarea {
margin: 12px 0 0 0;
width: 463px;
}
.has-help dialog.help.help-textarea:before {
content: "";
position: absolute;
top: -12px;
left: 10%;
width: 22px;
height: 12px;
background: transparent url("../images/sprite.png") no-repeat -110px 0px scroll;
z-index: 0;
}
.has-help dialog.help h3 {
margin: 0;
padding: 0 0 9px;
font-weight: 400;
font-size: 13px;
}
@media screen and (min-width: 768px) {
.has-help dialog.help h3 {
font-size: 16px;
}
}
.lt-ie9 .has-help dialog.help h3 {
font-size: 16px;
}
@media screen and (min-width: 960px) {
.has-help dialog.help h3 {
font-size: 17px;
}
}
.lt-ie9 .has-help dialog.help h3 {
font-size: 17px;
}
.has-help dialog.help p {
margin: 0;
padding: 0;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.has-help dialog.help p {
font-size: 13px;
}
}
.lt-ie9 .has-help dialog.help p {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.has-help dialog.help p {
font-size: 14px;
}
}
.lt-ie9 .has-help dialog.help p {
font-size: 14px;
}
.has-help dialog.help a {
display: inline-block;
}
label.upload {
max-width: 400px;
width: 100%;
background: #fcfcfc;
margin: 15px 0;
padding: 10px;
display: block;
border: 2px solid #e3e3e3;
position: relative;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
label.upload {
font-size: 13px;
}
}
.lt-ie9 label.upload {
font-size: 13px;
}
@media screen and (min-width: 960px) {
label.upload {
font-size: 14px;
}
}
.lt-ie9 label.upload {
font-size: 14px;
}
label.upload:before {
content: "";
position: absolute;
top: -12px;
left: 10%;
width: 22px;
height: 12px;
background: transparent url("../images/sprite.png") no-repeat -110px 0px scroll;
z-index: 0;
}
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
label.upload:before {
/* on retina, use image that's scaled by 2 */
background-image: url("../images/retina/sprite.png");
background-size: 250px 60px;
}
}
.no-js .left-help {
min-height: 90px;
}
.left-help input {
width: 240px;
float: left;
}
.left-help label.help {
max-width: none;
clear: both;
float: left;
width: 280px;
}
@media screen and (min-width: 768px) {
.left-help label.help {
clear: none;
width: 420px;
position: absolute;
top: 14px;
left: 250px;
}
.left-help label.help:before {
width: 12px;
height: 22px;
background-position: -85px 0;
top: 8px;
left: -12px;
}
}
.lt-ie9 .left-help label.help {
clear: none;
width: 420px;
position: absolute;
top: 14px;
left: 250px;
}
.lt-ie9 .left-help label.help:before {
width: 12px;
height: 22px;
background-position: -85px 0;
top: 8px;
left: -12px;
}
@media screen and (min-width: 960px) {
.left-help label.help {
top: 30px;
}
}
.lt-ie9 .left-help label.help {
top: 30px;
}
@media screen and (min-width: 768px) {
.left-help dialog.help {
clear: none;
width: 420px;
position: absolute;
top: 14px;
left: 250px;
}
.left-help dialog.help:before {
width: 12px;
height: 22px;
background-position: -85px 0;
top: 8px;
left: -12px;
}
}
.lt-ie9 .left-help dialog.help {
clear: none;
width: 420px;
position: absolute;
top: 14px;
left: 250px;
}
.lt-ie9 .left-help dialog.help:before {
width: 12px;
height: 22px;
background-position: -85px 0;
top: 8px;
left: -12px;
}
@media screen and (min-width: 960px) {
.left-help dialog.help {
top: 30px;
}
}
.lt-ie9 .left-help dialog.help {
top: 30px;
}
.number-wrapper {
padding: 0 10px;
margin-bottom: -10px;
background: #ededed;
}
@media screen and (min-width: 768px) {
.number-wrapper {
padding: 10px 25px;
margin-bottom: 0px;
}
}
.lt-ie9 .number-wrapper {
padding: 10px 25px;
margin-bottom: 0px;
}
.number-wrapper .number {
max-width: 400px;
}
@media screen and (min-width: 520px) {
.number-wrapper .number {
float: left;
min-width: 300px;
padding-right: 30px;
}
}
.lt-ie9 .number-wrapper .number {
float: left;
min-width: 300px;
padding-right: 30px;
}
@media screen and (min-width: 768px) {
.number-wrapper .number {
min-width: 0;
padding-right: 0;
}
}
.lt-ie9 .number-wrapper .number {
min-width: 0;
padding-right: 0;
}
.number-wrapper .number h2 {
display: inline-block;
padding: 8px 8px 6px 0;
margin: 0;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.number-wrapper .number h2 {
font-size: inherit;
}
}
.lt-ie9 .number-wrapper .number h2 {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.number-wrapper .number h2 {
font-size: 14px;
}
}
.lt-ie9 .number-wrapper .number h2 {
font-size: 14px;
}
@media screen and (min-width: 768px) {
.number-wrapper .number h2 {
padding-top: 13px;
padding-bottom: 11px;
}
}
.lt-ie9 .number-wrapper .number h2 {
padding-top: 13px;
padding-bottom: 11px;
}
.number-wrapper .number h3 {
max-width: 120px;
padding: 8px 18px 6px 5px;
margin: 0;
float: right;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.number-wrapper .number h3 {
font-size: inherit;
}
}
.lt-ie9 .number-wrapper .number h3 {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.number-wrapper .number h3 {
font-size: 14px;
}
}
.lt-ie9 .number-wrapper .number h3 {
font-size: 14px;
}
@media screen and (min-width: 768px) {
.number-wrapper .number h3 {
padding-top: 13px;
padding-bottom: 11px;
}
}
.lt-ie9 .number-wrapper .number h3 {
padding-top: 13px;
padding-bottom: 11px;
}
@media screen and (min-width: 768px) {
.number-wrapper .number + .number {
padding-left: 16px;
}
}
.lt-ie9 .number-wrapper .number + .number {
padding-left: 16px;
}
@media screen and (min-width: 768px) {
.summary .number-wrapper .number {
width: 190px;
}
.summary .number-wrapper .number h2,
.summary .number-wrapper .number h3 {
padding-right: 0;
float: left;
}
.summary .number-wrapper .number + .number {
padding-left: 0;
}
}
.lt-ie9 .summary .number-wrapper .number {
width: 190px;
}
.lt-ie9 .summary .number-wrapper .number h2,
.lt-ie9 .summary .number-wrapper .number h3 {
padding-right: 0;
float: left;
}
.lt-ie9 .summary .number-wrapper .number + .number {
padding-left: 0;
}
.questions {
clear: both;
margin: 30px 0px;
}
.search-options .questions {
margin-bottom: 0;
}
.questions li {
border-top: 1px dotted #d5d4d4;
padding: 16px 16px 16px 42px;
position: relative;
cursor: pointer;
}
.questions li:before {
content: "";
position: absolute;
top: 19px;
left: 16px;
width: 10px;
height: 14px;
background: transparent url("../images/sprite.png") no-repeat -15px 0px scroll;
z-index: 0;
}
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
.questions li:before {
/* on retina, use image that's scaled by 2 */
background-image: url("../images/retina/sprite.png");
background-size: 250px 60px;
}
}
.questions li:hover {
/* fallback/image non-cover color
background-color: white; */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFF7F7F7');
/* IE6-9 */
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(white, #f7f7f7);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#f7f7f7));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(white, #f7f7f7);
/* Opera 11.10+ */
background-image: -o-linear-gradient(white, #f7f7f7);
/* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
background-image: linear-gradient(to bottom, white, #f7f7f7);
}
.questions li.expanded:before {
background-position: 0 0;
width: 14px;
height: 10px;
top: 21px;
left: 13px;
}
.questions li.expanded .extra {
display: block;
}
.questions li.selected {
background: #ededed;
/* fallback/image non-cover color */
background-color: white;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFF2F2F2');
/* IE6-9 */
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(white, #f2f2f2);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#f2f2f2));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(white, #f2f2f2);
/* Opera 11.10+ */
background-image: -o-linear-gradient(white, #f2f2f2);
/* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
background-image: linear-gradient(to bottom, white, #f2f2f2);
}
.hardlimit .questions li * {
color: #595959;
}
.hardlimit .questions li.opened * {
color: #131313;
font-weight:500;
}
.questions h2 {
margin: 0 0 0 -40px;
padding: 0 0 0 40px;
z-index: 2;
position: relative;
font-weight: 300;
font-size: 13px;
}
@media screen and (min-width: 768px) {
.questions h2 {
font-size: 16px;
}
}
.lt-ie9 .questions h2 {
font-size: 16px;
}
@media screen and (min-width: 960px) {
.questions h2 {
font-size: 17px;
}
}
.lt-ie9 .questions h2 {
font-size: 17px;
}
.questions p {
margin: 0;
padding: 0;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.questions p {
font-size: 13px;
}
}
.lt-ie9 .questions p {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.questions p {
font-size: 14px;
}
}
.lt-ie9 .questions p {
font-size: 14px;
}
.questions label,
.questions .view {
position: relative;
display: none;
margin-left: -26px;
padding: 10px 10px 0px 26px;
cursor: pointer;
z-index: 4;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.questions label,
.questions .view {
font-size: 13px;
}
}
.lt-ie9 .questions label, .lt-ie9
.questions .view {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.questions label,
.questions .view {
font-size: 14px;
}
}
.lt-ie9 .questions label, .lt-ie9
.questions .view {
font-size: 14px;
}
.questions .expanded label,
.questions .expanded .view {
display: block;
}
.questions input[type="checkbox"] {
position: absolute;
top: 14px;
left: 8px;
}
.questions .extra {
position: relative;
padding: 18px 0px 0 0;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.questions .extra {
font-size: 13px;
}
}
.lt-ie9 .questions .extra {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.questions .extra {
font-size: 14px;
}
}
.lt-ie9 .questions .extra {
font-size: 14px;
}
.js .questions .extra {
display: none;
}
.questions .extra-requirement {
padding-top: 0;
}
.questions .extra li {
border-top: none;
padding: 0;
background: transparent;
}
.questions .extra li:before {
display: none;
}
#results {
margin-top: -30px;
padding-top: 30px;
}
.search-options {
position: relative;
}
.search-options:before {
content: "";
position: absolute;
top: 13px;
left: 12px;
width: 15px;
height: 15px;
background: transparent url("../images/sprite.png") no-repeat -70px 0px scroll;
z-index: 20;
}
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
.search-options:before {
/* on retina, use image that's scaled by 2 */
background-image: url("../images/retina/sprite.png");
background-size: 250px 60px;
}
}
.search-options input[type="text"] {
padding-left: 30px;
width: 100%;
margin: 0;
}
@media screen and (min-width: 400px) {
.search-options input[type="text"] {
float: left;
width: 240px;
}
}
.lt-ie9 .search-options input[type="text"] {
float: left;
width: 240px;
}
@media screen and (min-width: 520px) {
.search-options input[type="text"] {
float: left;
width: 338px;
}
}
.lt-ie9 .search-options input[type="text"] {
float: left;
width: 338px;
}
.lt-ie9 .fixed .search-options input[type="text"] {
padding-left: 8px;
width: 338px;
}
.search-options button,
.search-options .button a,
.search-options input[type="submit"] {
float: right;
min-width: 100px;
width: 125px;
line-height: 18px;
color: #666;
background-color: #e3e3e3;
background-position: right 14px;
}
@media screen and (min-width: 400px) {
.search-options button,
.search-options .button a,
.search-options input[type="submit"] {
float: left;
}
}
.lt-ie9 .search-options button, .lt-ie9
.search-options .button a, .lt-ie9
.search-options input[type="submit"] {
float: left;
}
.search-options button:hover,
.search-options .button a:hover,
.search-options input[type="submit"]:hover {
background-color: #d9d9d9;
}
.search-options button:active,
.search-options .button a:active,
.search-options input[type="submit"]:active {
background-color: #cfcfcf;
}
.lt-ie9 .search-options button, .lt-ie9
.search-options .button a, .lt-ie9
.search-options input[type="submit"] {
min-width: 65px;
width: 65px;
}
#FreeText {
width: 100%;
}
@media screen and (min-width: 400px) {
#FreeText {
width: 365px;
}
}
.lt-ie9 #FreeText {
width: 365px;
}
@media screen and (min-width: 520px) {
#FreeText {
width: 463px;
}
}
.lt-ie9 #FreeText {
width: 463px;
}
.file-upload {
line-height: 30px;
}
.file-upload input {
font-weight: 300;
}
@media screen and (min-width: 520px) {
.file-upload input {
float: left;
}
}
.lt-ie9 .file-upload input {
float: left;
}
.file-upload input[type="submit"] {
float: right;
min-width: 100px;
line-height: 18px;
color: #666;
background-color: #e3e3e3;
background-position: right 8px;
padding-top: 6px;
padding-bottom: 6px;
padding-right: 46px;
margin-left: 10px;
}
@media screen and (min-width: 520px) {
.file-upload input[type="submit"] {
width: 125px;
padding-right: 56px;
float: left;
}
}
.lt-ie9 .file-upload input[type="submit"] {
width: 125px;
padding-right: 56px;
float: left;
}
.file-upload input[type="submit"]:hover {
background-color: #d9d9d9;
}
.file-upload input[type="submit"]:active {
background-color: #cfcfcf;
}
.lt-ie9 .file-upload input[type="submit"] {
min-width: 65px;
width: 65px;
}
.uploaded-files li {
line-height: 20px;
margin-bottom: 8px;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.uploaded-files li {
font-size: 13px;
}
}
.lt-ie9 .uploaded-files li {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.uploaded-files li {
font-size: 14px;
}
}
.lt-ie9 .uploaded-files li {
font-size: 14px;
}
.uploaded-files input {
line-height: 1;
vertical-align: middle;
margin-right: 4px;
}
.summary .totals {
padding: 10px;
background: #ededed;
margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
.summary .totals {
padding: 25px;
margin-bottom: 20px;
}
}
.lt-ie9 .summary .totals {
padding: 25px;
margin-bottom: 20px;
}
.summary .totals .message {
margin-bottom: 0;
}
.summary .totals .back {
margin-top: 10px;
}
@media screen and (min-width: 768px) {
.summary .totals .back {
margin-top: 20px;
}
}
.lt-ie9 .summary .totals .back {
margin-top: 20px;
}
.summary .totals .back input[type="submit"] {
float: none;
min-width: none;
width: auto;
line-height: 21px;
color: #0000ff;
background: transparent;
margin: 0;
padding: 0;
display: inline;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.summary .totals .back input[type="submit"] {
font-size: 13px;
}
}
.lt-ie9 .summary .totals .back input[type="submit"] {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.summary .totals .back input[type="submit"] {
font-size: 14px;
}
}
.lt-ie9 .summary .totals .back input[type="submit"] {
font-size: 14px;
}
.summary .totals h2 {
font-weight: 500;
font-size: 13px;
}
@media screen and (min-width: 768px) {
.summary .totals h2 {
font-size: 16px;
}
}
.lt-ie9 .summary .totals h2 {
font-size: 16px;
}
@media screen and (min-width: 960px) {
.summary .totals h2 {
font-size: 17px;
}
}
.lt-ie9 .summary .totals h2 {
font-size: 17px;
}
.summary .totals h3 {
margin-bottom: 2px;
}
@media screen and (min-width: 520px) {
.summary .totals h3 {
float: left;
max-width: 180px;
margin-bottom: 4px;
}
}
.lt-ie9 .summary .totals h3 {
float: left;
max-width: 180px;
margin-bottom: 4px;
}
@media screen and (min-width: 960px) {
.summary .totals h3 {
margin-bottom: 10px;
}
}
.lt-ie9 .summary .totals h3 {
margin-bottom: 10px;
}
.summary .totals h4 {
margin-bottom: 2px;
}
@media screen and (min-width: 520px) {
.summary .totals h4 {
padding-left: 190px;
margin-bottom: 4px;
}
}
.lt-ie9 .summary .totals h4 {
padding-left: 190px;
margin-bottom: 4px;
}
@media screen and (min-width: 960px) {
.summary .totals h4 {
margin-bottom: 10px;
}
}
.lt-ie9 .summary .totals h4 {
margin-bottom: 10px;
}
.summary .totals h5 {
margin-bottom: 20px;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.summary .totals h5 {
font-size: 13px;
}
}
.lt-ie9 .summary .totals h5 {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.summary .totals h5 {
font-size: 14px;
}
}
.lt-ie9 .summary .totals h5 {
font-size: 14px;
}
@media screen and (min-width: 520px) {
.summary .totals h5 {
padding-left: 190px;
}
}
.lt-ie9 .summary .totals h5 {
padding-left: 190px;
}
.summary .totals hr {
width: 100%;
margin: 10px auto;
background-color: transparent;
}
@media screen and (min-width: 960px) {
.summary .totals hr {
margin: 15px auto;
}
}
.lt-ie9 .summary .totals hr {
margin: 15px auto;
}
@media screen and (min-width: 520px) {
.summary .totals ul {
padding-left: 190px;
clear: both;
}
}
.lt-ie9 .summary .totals ul {
padding-left: 190px;
clear: both;
}
.summary .totals li {
position: relative;
line-height: 20px;
margin-bottom: 2px;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 520px) {
.summary .totals li {
margin-bottom: 10px;
}
}
.lt-ie9 .summary .totals li {
margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
.summary .totals li {
font-size: 13px;
}
}
.lt-ie9 .summary .totals li {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.summary .totals li {
font-size: 14px;
}
}
.lt-ie9 .summary .totals li {
font-size: 14px;
}
.summary h3 {
font-weight: 300;
font-size: 13px;
}
@media screen and (min-width: 768px) {
.summary h3 {
font-size: 16px;
}
}
.lt-ie9 .summary h3 {
font-size: 16px;
}
@media screen and (min-width: 960px) {
.summary h3 {
font-size: 17px;
}
}
.lt-ie9 .summary h3 {
font-size: 17px;
}
.fixed .summary {
padding-bottom: 60px;
}
.fixed .summary .totals h2 {
font-weight: 300;
font-size: 13px;
}
@media screen and (min-width: 768px) {
.fixed .summary .totals h2 {
font-size: 16px;
}
}
.lt-ie9 .fixed .summary .totals h2 {
font-size: 16px;
}
@media screen and (min-width: 960px) {
.fixed .summary .totals h2 {
font-size: 17px;
}
}
.lt-ie9 .fixed .summary .totals h2 {
font-size: 17px;
}
.fixed .summary .totals h3 {
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.fixed .summary .totals h3 {
font-size: 13px;
}
}
.lt-ie9 .fixed .summary .totals h3 {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.fixed .summary .totals h3 {
font-size: 14px;
}
}
.lt-ie9 .fixed .summary .totals h3 {
font-size: 14px;
}
.fixed .summary .totals ul {
padding: 0 0 5px;
list-style: disc inside;
}
.fixed .summary .totals li {
margin-bottom: 2px;
}
.fixed .summary .small-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 40px;
margin: 0;
z-index: 1000;
overflow: hidden;
padding: 10px;
text-align: center;
background: #ededed;
border-top: 1px solid #d6d6d6;
}
.fixed .summary .small-fixed .sf-icon {
display: inline-block;
padding: 0 20px 0 30px;
line-height: 20px;
position: relative;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.fixed .summary .small-fixed .sf-icon {
font-size: 13px;
}
}
.lt-ie9 .fixed .summary .small-fixed .sf-icon {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.fixed .summary .small-fixed .sf-icon {
font-size: 14px;
}
}
.lt-ie9 .fixed .summary .small-fixed .sf-icon {
font-size: 14px;
}
.fixed .summary .small-fixed .sf-icon:before {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 20px;
height: 20px;
background: transparent url("../images/sprite.png") no-repeat 0px 0px scroll;
z-index: 0;
}
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
.fixed .summary .small-fixed .sf-icon:before {
/* on retina, use image that's scaled by 2 */
background-image: url("../images/retina/sprite.png");
background-size: 250px 60px;
}
}
.fixed .summary .small-fixed .reasons:before {
background-position: -195px 0;
}
.fixed .summary .small-fixed .files:before {
background-position: -215px 0;
}
.fixed .summary .small-fixed .typed:before {
background-position: -175px 0;
}
.fixed .summary .small-fixed .error:before {
background-position: -135px 0;
}
.fixed .summary .small-fixed a {
color: #cc0000;
}
.fixed .summary .small-fixed i {
font-style: normal;
display: none;
}
@media screen and (min-width: 520px) {
.fixed .summary .small-fixed i {
display: inline;
}
}
.lt-ie9 .fixed .summary .small-fixed i {
display: inline;
}
@media screen and (min-width: 520px) {
.fixed .summary .totals h3 {
float: none;
max-width: 100%;
}
.fixed .summary .totals ul {
padding-bottom: 10px;
}
}
.lt-ie9 .fixed .summary .totals h3 {
float: none;
max-width: 100%;
}
.lt-ie9 .fixed .summary .totals ul {
padding-bottom: 10px;
}
@media screen and (min-width: 960px) and (min-height: 575px) {
.fixed .summary {
position: fixed;
top: 157px;
left: 50%;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
margin-left: 168px;
width: 252px;
}
.fixed .summary .inner {
width: 100%;
padding-left: 10px;
padding-right: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.fixed .summary button,
.fixed .summary .button a,
.fixed .summary input[type="submit"] {
float: right;
}
.fixed .summary .totals {
margin-bottom: 0;
}
.fixed .summary .totals h2 {
margin-bottom: 10px;
}
.fixed .summary .submit {
float: right;
padding-top: 25px;
/*background: #fff; */
}
.fixed .summary .small-fixed {
display: none;
}
}
.fixed .summary .submit,
.fixed .summary .button {
padding-bottom: 0;
margin-bottom: 0;
}
.fixed .summary .submit button,
.fixed .summary .submit .button a,
.fixed .summary .submit input[type="submit"] {
width: 242px;
}
/*
* Error styling
*/
.validation-summary-errors + .questions {
margin-top: 0;
}
.validation-summary-errors li,
#divError {
display: inline-block;
padding: 5px 10px 5px 30px;
margin: 0 10px 10px 0;
line-height: 20px;
position: relative;
color: #cc0000;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.validation-summary-errors li,
#divError {
font-size: 13px;
}
}
.lt-ie9 .validation-summary-errors li, .lt-ie9
#divError {
font-size: 13px;
}
@media screen and (min-width: 960px) {
.validation-summary-errors li,
#divError {
font-size: 14px;
}
}
.lt-ie9 .validation-summary-errors li, .lt-ie9
#divError {
font-size: 14px;
}
@media screen and (min-width: 768px) {
.validation-summary-errors li,
#divError {
margin-bottom: 15px;
}
}
.lt-ie9 .validation-summary-errors li, .lt-ie9
#divError {
margin-bottom: 15px;
}
@media screen and (min-width: 960px) {
.validation-summary-errors li,
#divError {
margin-bottom: 20px;
}
}
.lt-ie9 .validation-summary-errors li, .lt-ie9
#divError {
margin-bottom: 20px;
}
.validation-summary-errors li:before,
#divError:before {
content: "";
position: absolute;
top: 3px;
left: 4px;
width: 20px;
height: 20px;
background: transparent url("../images/sprite.png") no-repeat -135px 0px scroll;
z-index: 0;
}
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
.validation-summary-errors li:before,
#divError:before {
/* on retina, use image that's scaled by 2 */
background-image: url("../images/retina/sprite.png");
background-size: 250px 60px;
}
}
@media screen and (min-width: 960px) {
.validation-summary-errors li.hide-large,
#divError.hide-large {
display: none;
}
}
.lt-ie9 .validation-summary-errors li.hide-large, .lt-ie9
#divError.hide-large {
display: none;
}
.validation-summary-errors li a,
#divError a {
color: inherit;
}
#divError {
margin-top: 5px;
margin-bottom: 0px;
border: 0;
display: none;
clear: left;
float: left;
}
p.message,
label.error {
display: inline-block;
padding: 5px 10px;
margin: 0 10px 20px 0;
line-height: 20px;
position: relative;
font-weight: 300;
font-size: 12px;
}
@media screen and (min-width: 768px) {
p.message,
label.error {
font-size: 13px;
}
}
.lt-ie9 p.message, .lt-ie9
label.error {
font-size: 13px;
}
@media screen and (min-width: 960px) {
p.message,
label.error {
font-size: 14px;
}
}
.lt-ie9 p.message, .lt-ie9
label.error {
font-size: 14px;
}
p.message.error,
label.error.error {
padding-left: 30px;
color: #AD0000;
}
p.message.error:before,
label.error.error:before {
content: "";
position: absolute;
top: 3px;
left: 4px;
width: 20px;
height: 20px;
background: transparent url("../images/sprite.png") no-repeat -135px 0px scroll;
z-index: 0;
}
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
p.message.error:before,
label.error.error:before {
/* on retina, use image that's scaled by 2 */
background-image: url("../images/retina/sprite.png");
background-size: 250px 60px;
}
}
p.message.error a,
label.error.error a {
font-weight: bold;
}
@media screen and (min-width: 960px) {
p.message.hide-large,
label.error.hide-large {
display: none;
}
}
.lt-ie9 p.message.hide-large, .lt-ie9
label.error.hide-large {
display: none;
}
p.message a,
label.error a {
color: inherit;
}
/*
- The Contravention number doesn't seem valid: please re-enter it.