@charset "UTF-8";
/*------------------------------------------
MAIN
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Main stylesheet for project,
include all partials to this file.
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
TODO:
*
------------------------------------------*/
/*
Settings
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Import project variables and any mixins & functions
*/
/*------------------------------------------
$CONFIG
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Setup variables there
------------------------------------------*/
/* ------------------------
$Breakpoints
------------------------ */
/**
* Use of breakpoints from generic/mixins.scss
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Styles for mobile = devices < $break-lap
@include mq(mobile) { [styles here] }
@media only screen and (max-width:$palm-end) { [...] }
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Styles for lap devices, such as wide phones = devices < $break-portable - 1px
@include mq(lap) { [styles here] }
@media only screen and (min-width:$break-lap) and (max-width:$lap-end) { [...] }
@include mq(lap-and-up) { [styles here] }
@media only screen and (min-width:$break-lap) { [...] }
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Styles for portable devices, such as tablets = devices > $break-portable
@include mq(portable) { [styles here] }
@media only screen and (max-width:$break-portable) { [...] }
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Styles for desktop devices = devices > $break-desk
@include mq(desktop) { [styles here] }
@media only screen and (max-width:$break-desk) { [...] }
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Styles for wide desktop devices = devices > $break-wide
@include mq(wide) { [styles here] }
@media only screen and (max-width:$break-wide) { [...] }
*/
/*------------------------------------*\
$DEBUG
\*------------------------------------*/
/**
* Debug mode will visually highlight any potential markup/accessibility quirks
* in the browser. Set to `true` or `false`.
*/
/* ------------------------
$Typography
------------------------ */
/*------------------------------------*\
$Font-Sizes
\*------------------------------------*/
/**
* Font-sizes (in pixels). Refer to relevant sections for their implementations.
*/
/* ------------------------
Brand
------------------------ */
/**
* Brand stuff
*/
/**
* How big would you like round corners to be by default?
*/
/* ------------------------
Colours
------------------------ */
/*------------------------------------*\
$MIXINS
\*------------------------------------*/
/**
* Set icon font family
*
@include icon-font('font-name')
*
*/
/**
* Clearfix
*
@include clearfix()
* [1] : The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* [2] : The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
/**
* Px to Rems
* as per http://hugogiraudel.com/2013/03/18/ultimate-rem-mixin/
*
@include rem(font-size, 1.6rem);
! The mixin relies on a baseline of 16px
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
1. The mixin relies on a function to parse the integer from a value with a unit
2. We define a list of values for both units
3. We iterate through each value in the given parameter $values
4. If the value is either auto or 0, we append it to the list as-is
5. If the value has a unit, we split it to get both the unit and the raw value
6. We append according values to the lists depending on the unit of the given value
7. If the two lists are the same, we ouput only one (like margin-top: 0)
8. We output the result
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
*
*/
/**
* Force overly long spans of text to truncate, e.g.:
*
`@include truncate(100%);`
*
* Where `$truncation-boundary` is a united measurement.
*/
/**
* Media query mixins
*
@include media-query(palm){ [styles here] }
*/
/*
Bower Components
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Import project variables and any mixins & functions
*/
/*
Generic
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Anything generic here, typically normalize & reset
*/
/*! normalize.css v2.1.0 | 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 styling not present in IE 8/9.
*/
[hidden] {
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 */
-webkit-text-size-adjust: 100%;
/* 2 */
-ms-text-size-adjust: 100%;
/* 2 */ }
/*
* Remove default margin.
*/
body {
margin: 0; }
/* ==========================================================================
Links
========================================================================== */
/*
* 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 {
-webkit-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.
* 2. Remove excess padding in IE 8/9.
*/
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
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 */
-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; }
/*------------------------------------*\
$RESET
\*------------------------------------*/
/**
* Reset provided by Harry Roberts | @csswizardry
* A more considered reset; more of a restart...
* As per: csswizardry.com/2011/10/reset-restarted
*/
/**
* Let’s make the box model all nice, shall we...?
*/
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased; }
/**
* The usual...
*/
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul,
form, fieldset, legend,
table, th, td, caption,
hr {
margin: 0;
padding: 0; }
/**
* Give a help cursor to elements that give extra info on `:hover`.
*/
abbr[title], dfn[title] {
cursor: help; }
/**
* Remove underlines from potentially troublesome elements.
*/
u, ins {
text-decoration: none; }
/**
* Apply faux underline via `border-bottom`.
*/
ins {
border-bottom: 1px solid; }
/**
* So that `alt` text is visually offset if images don’t load.
*/
img {
font-style: italic; }
/**
* Give form elements some cursor interactions...
*/
label,
input,
textarea,
button,
select,
option {
cursor: pointer; }
.text-input:active,
.text-input:focus,
textarea:active,
textarea:focus {
cursor: text;
outline: none; }
/*------------------------------------------
$SHARED
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Shared element styling
------------------------------------------*/
/**
* Base element - margin bottom
*/
h1, h2, h3, h4, h5, h6, hgroup,
ul, ol, dl,
blockquote, p, address,
table,
fieldset, figure,
pre, label,
.form-fields > li {
/* 2 */
/* 2 */
/* 3 */
/* 5 */
/* 5 */
/* 6 */
margin-bottom: 16px;
/* 8 */
margin-bottom: 1rem;
/* 8 */ }
/**
* HR - margin bottom
*/
hr {
/* 2 */
/* 2 */
/* 3 */
/* 5 */
/* 5 */
/* 6 */
margin-bottom: 14px;
/* 8 */
margin-bottom: 0.875rem;
/* 8 */ }
/**
* Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
* Extend the clearfix class with Sass to avoid the `.cf` class appearing over
* and over in your markup.
*/
.cf:after {
content: "";
display: table;
clear: both; }
/*
Base
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Unclasses HTML elements
*/
/*------------------------------------------
$MAIN
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Default styles to body and HTML element
------------------------------------------*/
html {
/* 2 */
/* 2 */
/* 3 */
/* 5 */
/* 5 */
/* 6 */
font-size: 16px;
/* 8 */
font-size: 1rem;
/* 8 */
font-family: "futura-pt", sans-serif;
overflow-y: scroll;
min-height: 100%;
color: #404040;
min-width: 768px; }
/*------------------------------------------
$HEADINGS
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Default heading styles
------------------------------------------*/
/**
* As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
*
* When we define a heading we also define a corresponding class to go with it.
* This allows us to apply, say, `class=alpha` to a `h3`; a double-stranded
* heading hierarchy.
*/
h1, .alpha {
/* 2 */
/* 2 */
/* 3 */
/* 5 */
/* 5 */
/* 6 */
font-size: 36px;
/* 8 */
font-size: 2.25rem;
/* 8 */ }
h2, .beta {
/* 2 */
/* 2 */
/* 3 */
/* 5 */
/* 5 */
/* 6 */
font-size: 30px;
/* 8 */
font-size: 1.875rem;
/* 8 */ }
h3, .gamma {
/* 2 */
/* 2 */
/* 3 */
/* 5 */
/* 5 */
/* 6 */
font-size: 24px;
/* 8 */
font-size: 1.5rem;
/* 8 */ }
h4, .delta {
/* 2 */
/* 2 */
/* 3 */
/* 5 */
/* 5 */
/* 6 */
font-size: 20px;
/* 8 */
font-size: 1.25rem;
/* 8 */ }
h5, .epsilon {
/* 2 */
/* 2 */
/* 3 */
/* 5 */
/* 5 */
/* 6 */
font-size: 16px;
/* 8 */
font-size: 1rem;
/* 8 */ }
h6, .zeta {
/* 2 */
/* 2 */
/* 3 */
/* 5 */
/* 5 */
/* 6 */
font-size: 14px;
/* 8 */
font-size: 0.875rem;
/* 8 */ }
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "futura-pt", sans-serif; }
/**
* Heading groups and generic any-heading class.
* To target any heading of any level simply apply a class of `.hN`, e.g.:
*
inuit.css
Best. Framework. Ever!
*
*/
hgroup .hN {
margin-bottom: 0; }
/**
* A series of classes for setting massive type; for use in heroes, mastheads,
* promos, etc.
*/
.giga {
/* 2 */
/* 2 */
/* 3 */
/* 5 */
/* 5 */
/* 6 */
font-size: 96px;
/* 8 */
font-size: 6rem;
/* 8 */ }
.mega {
/* 2 */
/* 2 */
/* 3 */
/* 5 */
/* 5 */
/* 6 */
font-size: 60px;
/* 8 */
font-size: 3.75rem;
/* 8 */ }
.kilo {
/* 2 */
/* 2 */
/* 3 */
/* 5 */
/* 5 */
/* 6 */
font-size: 48px;
/* 8 */
font-size: 3rem;
/* 8 */ }
/*------------------------------------*\
$PARAGRAPHS
\*------------------------------------*/
/**
* The `.lede` class is used to make the introductory text (usually a paragraph)
* of a document slightly larger.
*/
.lede,
.lead {
/* 2 */
/* 2 */
/* 3 */
/* 5 */
/* 5 */
/* 6 */
font-size: 18px;
/* 8 */
font-size: 1.125rem;
/* 8 */ }
hr {
width: 65px;
height: 4px;
border: none;
background-color: #404040;
opacity: 0.5;
margin-bottom: 30px;
margin-right: auto;
display: block; }
/*------------------------------------*\
$SMALLPRINT
\*------------------------------------*/
/**
* A series of classes for setting tiny type; for use in smallprint etc.
*/
.smallprint,
.milli {
/* 2 */
/* 2 */
/* 3 */
/* 5 */
/* 5 */
/* 6 */
font-size: 12px;
/* 8 */
font-size: 0.75rem;
/* 8 */ }
.micro {
/* 2 */
/* 2 */
/* 3 */
/* 5 */
/* 5 */
/* 6 */
font-size: 10px;
/* 8 */
font-size: 0.625rem;
/* 8 */ }
/*------------------------------------*\
$QUOTES
\*------------------------------------*/
/**
* If you want English quotes then please do not edit these; they’re only here
* because Sass needs them.
*/
/**
* Big up @boblet: html5doctor.com/blockquote-q-cite
*/
/**
* Inline quotes.
*/
q {
quotes: "‘" "’" "" ""; }
q:before {
content: "\2018";
content: open-quote; }
q:after {
content: "\2019";
content: close-quote; }
q q:before {
content: "\201C";
content: open-quote; }
q q:after {
content: "\201D";
content: close-quote; }
blockquote {
quotes: "" ""; }
blockquote p:before {
content: "";
content: open-quote; }
blockquote p:after {
content: "";
content: no-close-quote; }
blockquote p:last-of-type:after {
content: "";
content: close-quote; }
blockquote q:before {
content: "\2018";
content: open-quote; }
blockquote q:after {
content: "\2019";
content: close-quote; }
/**
*
Insanity: doing the same thing over and over again and expecting
different results.
Albert Einstein
*
*/
blockquote {
/**
* .4em is roughly equal to the width of the opening “ that we wish to hang.
*/ }
blockquote p:last-of-type {
margin-bottom: 0; }
.source {
display: block;
text-indent: 0; }
.source:before {
content: "\2014"; }
/*------------------------------------*\
$CODE
\*------------------------------------*/
/**
* Use an explicit font stack to ensure browsers render correct `line-height`.
*/
pre {
overflow: auto; }
pre mark {
background: none;
border-bottom: 1px solid;
color: inherit; }
/**
* Add comments to your code examples, e.g.:
*
</div>
*
*/
.code-comment {
/**
* Override this setting in your theme stylesheet
*/
opacity: 0.75;
filter: alpha(opacity=75); }
/**
* You can add line numbers to your code examples but be warned, it requires
* some pretty funky looking markup, e.g.:
*
.nav{ list-style:none; margin-left:0;} .nav > li, .nav > li > a{ display:inline-block; *display:inline-block; zoom:1; }
*
* 1. Make the list look like code.
* 2. Give the list flush numbers with a leading zero.
* 3. Make sure lines of code don’t wrap.
* 4. Give the code form by forcing the `code` to honour white-space.
*/
.line-numbers {
font-family: monospace, serif;
/* [1] */
list-style: decimal-leading-zero inside;
/* [2] */
white-space: nowrap;
/* [3] */
overflow: auto;
/* [3] */
margin-left: 0; }
.line-numbers code {
white-space: pre;
/* [4] */ }
/*------------------------------------*\
$IMAGES
\*------------------------------------*/
/**
* Demo: jsfiddle.net/inuitcss/yMtur
*/
/**
* Fluid images.
*/
img {
max-width: 100%; }
/**
* Non-fluid images if you specify `width` and/or `height` attributes.
*/
img[width],
img[height] {
max-width: none; }
/**
* Rounded images.
*/
.img--round {
border-radius: 15px; }
/**
* Image placement variations.
*/
.img--right {
float: right;
margin-bottom: 16px;
margin-left: 16px; }
.img--left {
float: left;
margin-right: 16px;
margin-bottom: 16px; }
.img--center {
display: block;
margin-right: auto;
margin-bottom: 16px;
margin-left: auto; }
/**
* Keep your images on your baseline.
*
* Please note, these will not work too nicely with fluid images and will
* distort when resized below a certain width. Use with caution.
*/
.img--short {
height: 80px; }
.img--medium {
height: 160px; }
.img--tall {
height: 240px; }
/**
* Images in `figure` elements.
*/
figure > img {
display: block; }
/*------------------------------------------
$LISTS
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Default list styles
------------------------------------------*/
/**
* Remove vertical spacing from nested lists.
*/
li > ul,
li > ol {
margin-bottom: 0; }
/**
* Have a numbered `ul` without the semantics implied by using an `ol`.
*/
/*ul*/
.numbered-list {
list-style-type: decimal; }
ul,
ol {
margin-left: 1.2em; }
li {
margin-bottom: 0.5em; }
/*------------------------------------*\
$TABLES
\*------------------------------------*/
/**
* We have a lot at our disposal for making very complex table constructs, e.g.:
*
Foo
Bar
Lorem
Ipsum
Dolor
Sit
Sit
Dolor
03.788
Lorem
Dolor
32.210
Lorem
Dolor
47.797
Lorem
Sit
Dolor
09.640
Lorem
Dolor
12.117
Lorem
*
*/
table {
width: 100%; }
th,
td {
padding: 4px;
text-align: left; }
@media screen and (min-width: 480px) {
th,
td {
padding: 8px; } }
/**
* Cell alignments
*/
[colspan="1"] {
text-align: left; }
[rowspan] {
vertical-align: middle; }
[rowspan="1"] {
vertical-align: top; }
.numerical {
text-align: right; }
/**
* In the HTML above we see several `col` elements with classes whose numbers
* represent a percentage width for that column. We leave one column free of a
* class so that column can soak up the effects of any accidental breakage in
* the table.
*/
.t5 {
width: 5%; }
.t10 {
width: 10%; }
.t12 {
width: 12.5%; }
/* 1/8 */
.t15 {
width: 15%; }
.t20 {
width: 20%; }
.t25 {
width: 25%; }
/* 1/4 */
.t30 {
width: 30%; }
.t33 {
width: 33.333%; }
/* 1/3 */
.t35 {
width: 35%; }
.t37 {
width: 37.5%; }
/* 3/8 */
.t40 {
width: 40%; }
.t45 {
width: 45%; }
.t50 {
width: 50%; }
/* 1/2 */
.t55 {
width: 55%; }
.t60 {
width: 60%; }
.t62 {
width: 62.5%; }
/* 5/8 */
.t65 {
width: 65%; }
.t66 {
width: 66.666%; }
/* 2/3 */
.t70 {
width: 70%; }
.t75 {
width: 75%; }
/* 3/4*/
.t80 {
width: 80%; }
.t85 {
width: 85%; }
.t87 {
width: 87.5%; }
/* 7/8 */
.t90 {
width: 90%; }
.t95 {
width: 95%; }
/**
* Bordered tables
*/
.table--bordered th,
.table--bordered td {
border: 1px solid #ccc; }
.table--bordered th:empty,
.table--bordered td:empty {
border: none; }
.table--bordered thead tr:last-child th {
border-bottom-width: 2px; }
.table--bordered tbody tr th:last-of-type {
border-right-width: 2px; }
/**
* Striped tables
*/
.table--striped tbody tr:nth-of-type(odd) {
background-color: #ffc;
/* Override this color in your theme stylesheet */ }
/**
* Data table
*/
.table--data {
font: 12px/1.5 sans-serif; }
/*------------------------------------*\
$FORMS
\*------------------------------------*/
/**
*
* Demo: jsfiddle.net/inuitcss/MhHHU
*
*/
fieldset {
padding: 16px; }
/**
* Text inputs
*
* Instead of a `[type]` selector for each kind of form input, we just use a
* class to target any/every one, e.g.:
Select an option below:
*
*/
label,
.label {
display: block; }
/**
* Extra help text in `label`s, e.g.:
*
Card number No spaces
*
*/
.additional {
display: block;
font-weight: normal; }
/*
* Groups of checkboxes and radios, e.g.:
*
*
*/
.check-list {
list-style: none;
margin: 0; }
/*
* Labels in check-lists
*/
.check-label,
.check-list label,
.check-list .label {
display: inline-block; }
/**
* Spoken forms are for forms that read like spoken word, e.g.:
*
Hello, my name is
country is
UK
US
Other
*
*/
.spoken-form label {
display: inline-block;
font: inherit; }
/**
* Extra help text displayed after a field when that field is in focus, e.g.:
*
Email:
Read more...
*
*/
.proceed {
text-align: right !important; }
/**
* Add a right-angled quote to links that imply movement, e.g.:
*
Read more
*
*/
.go:after {
content: " " "»" !important; }
/**
* Apply capital case to an element (usually a `strong`).
*/
.caps {
text-transform: uppercase !important; }
/**
* Hide content off-screen without resorting to `display:none;`, also provide
* breakpoint specific hidden elements.
*/
.accessibility,
.visuallyhidden {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; }
/*# sourceMappingURL=maps/main.css.map */
#wastageloading, #wastageDaySwitching {
width: 100%;
height: 500px;
background-image: url("../images/wastage-loading.gif");
background-repeat: no-repeat;
/*background-attachment: fixed;*/
background-position: center;
background-color: white; }
#wastageloading p, #wastageDaySwitching p {
padding: 20px; }
td.wastageDisabled {
font-weight: bold;
font-size: 16px;
padding: 14px !important; }
button.tempDisabled {
background-color: #e0e0e0 !important; }
.wastage-table tr.invalid td {
background-color: #ffd9d9; }
/* ordering page */
/* grey-out disabled days */
a[data-toggle="tab"].disabled {
color: #9c9c9c;
pointer-events: none; }
html {
overflow-y: hidden; }
html, body {
height: 100%; }
body {
overflow-x: hidden; }
.type-header {
text-transform: uppercase; }
.type-news-header {
text-transform: uppercase;
border-bottom: 1px solid #4F2C1D;
padding-bottom: 10px; }
.type-label {
text-transform: uppercase;
margin-bottom: 5px; }
.type-location {
font-size: 2rem; }
.colour-main {
color: #75D0DD; }
.colour-secondary {
color: #4F2C1D; }
.colour-white {
color: #fff; }
.colour-text {
color: #404040; }
.text-center {
text-align: center; }
.no-underline {
text-decoration: none; }
.text-input {
border-radius: 0; }
.btn {
text-transform: uppercase;
border-radius: 0; }
.btn--secondary {
color: #fff;
background-color: #4F2C1D; }
.background {
position: relative;
padding: 0; }
.background:before {
position: absolute;
top: 0;
z-index: 0;
right: -300px;
content: "";
height: 100%;
width: 300px;
background-image: url("/images/left_banner.jpg");
background-repeat: no-repeat;
background-position: top left; }
.background:after {
position: absolute;
top: 0;
left: -300px;
content: "";
height: 100%;
width: 300px;
background-image: url("/images/right_banner.jpg");
background-repeat: no-repeat;
background-position: top right; }
.background--main {
background-color: #75D0DD; }
.background--grey {
background-color: #f2f2f2; }
.header__shell {
text-align: right; }
.header__navigation {
padding-top: 45px; }
.site-header__navigation {
padding-right: 1.3rem; }
.header__logo {
width: 200px;
padding-left: 1.3rem; }
.site-header {
background-image: url("/images/marble_bg.jpg");
background-size: cover;
background-color: #fff;
border: none; }
.page-header {
background-image: none;
background-color: #fff;
border: none; }
.site-header__container {
padding: 0 0 1rem 0; }
.site-header__location {
padding-top: 63px; }
.report-draw {
padding: 1rem; }
.login-page {
height: 100%;
padding: 0; }
.login__form {
padding: 3rem 2rem 2rem; }
.login__submit {
width: 60%; }
.page-header--home .page-header__image {
width: 100%;
height: auto; }
.page-header__image img {
display: block;
width: 100%; }
.post__content {
padding-top: 2rem; }
.post-teaser {
background: #fff;
position: static;
border-radius: 0;
overflow: hidden;
margin-bottom: 30px;
-webkit-box-shadow: none;
box-shadow: none; }
.post-teaser__intro {
padding: 0; }
.flyout--link, .flyout--shell {
position: fixed; }
.flyout--link {
display: none;
padding-right: 50px;
right: 0;
top: 10%; }
@media (min-width: 750px) {
.flyout--link {
display: block; } }
.flyout--shell {
right: 0;
bottom: 70px; }
.shell__container {
display: inline-block;
overflow: hidden;
width: 185px; }
.site-footer {
border: none;
background-image: url("/images/marble_bg.jpg");
background-size: cover; }
.footer__candy, .footer__candy--fixed {
width: 100%;
height: 30px;
background: repeating-linear-gradient(145deg, #75D0DD, #75D0DD 100px, #AADBEA 100px, #AADBEA 200px); }
.footer__candy--fixed {
position: absolute;
left: 0;
bottom: 0; }
.hexagon {
position: relative;
width: 150px;
height: 86.60px;
margin: 43.30px 0;
background-size: auto 161.6581px;
background-position: center;
border-left: solid 5px #fefcff;
border-right: solid 5px #fefcff; }
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 106.07px;
height: 106.07px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 16.97px; }
/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 140.0000px;
height: 80.82903768654762px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-40.4145px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-40.4145px);
transform: rotate(45deg) scaleY(1.7321) translateY(-40.4145px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit; }
.hexTop {
top: -53.0330px;
border-top: solid 7.0711px #fefcff;
border-right: solid 7.0711px #fefcff; }
.hexTop:after {
background-position: center top; }
.hexBottom {
bottom: -53.0330px;
border-bottom: solid 7.0711px #fefcff;
border-left: solid 7.0711px #fefcff; }
.hexBottom:after {
background-position: center bottom; }
.hexagon:after {
content: "";
position: absolute;
top: 2.8868px;
left: 0;
width: 140.0000px;
height: 80.8290px;
z-index: 2;
background: inherit; }