Colors

We only use white for copy or for outline boxes. We never use black or grey.

  • #fff100
    Ice Cream
  • #ffd204
    Custard
  • #f06b30
    Marmalade
  • #d21c5d
    Jam
  • #6f2c91
    Grape
  • #006e45
    Pea
  • #0071bb
    Blueberry
  • #08b8ad
    Icing
  • #a6ce38
    Apple
  • #cce7d3
    Ice
.whtTxt, .whtTxt h2, .whtTxt h3, .whtTxt h4, .whtTxt h5, .whtTxt h6, .whtTxt p, .whtTxt a, body p.whtTxt{ color: #fff; } .whtTxt a:hover { color: #ccc; } .grnTxt, .grnTxt h2, .grnTxt h3, .grnTxt h4, .grnTxt h5, .grnTxt h6, .grnTxt p, .grnTxt a { color: #09b8ae; } .grnTxt a: hover { color: #23eadd; } .grnClrTwoTxt, .grnClrTwoTxt h2, .grnClrTwoTxt h3, .grnClrTwoTxt h4, .grnClrTwoTxt h5, .grnClrTwoTxt h6, .grnClrTwoTxt p, .grnClrTwoTxt a { color: #07b8ae; } .grnClrTwoTxt a: hover { color: #2de5d9; } .yellTxt, .yellTxt h2, .yellTxt h3, .yellTxt h4, .yellTxt h5, .yellTxt h6, .yellTxt p, .yellTxt a { color: #fff200; } .grnClrTwoTxt a: hover { color: #dbcc00; } .lghtGrnTxt, .lghtGrnTxt h2, .lghtGrnTxt h3, .lghtGrnTxt h4, .lghtGrnTxt h5, .lghtGrnTxt h6, .lghtGrnTxt p, .lghtGrnTxt a { color: #cce7d4; } .lghtGrnTxt a: hover { color: #79e598; } .orangeTxt, .orangeTxt h2, .orangeTxt h3, .orangeTxt h4, .orangeTxt h5, .orangeTxt h6, .orangeTxt p, .orangeTxt a { color: #f16b31; } .orangeTxt a: hover { color: #d65e2a; } .darkYelTxt, .darkYelTxt h2, .darkYelTxt h3, .darkYelTxt h4, .darkYelTxt h5, .darkYelTxt h6, .darkYelTxt p, .darkYelTxt a { color: #ffd204; } .darkYelTxt a: hover { color: #ffd204; } .darkPinkTtlClr, .darkPinkTtlClr h2, .darkPinkTtlClr h3, .darkPinkTtlClr h4, .darkPinkTtlClr h5, .darkPinkTtlClr h6, .darkPinkTtlClr p, .darkPinkTtlClr a { color: #d31c5d; } .darkPinkTtlClr a: hover { color: #a31647; } .darkPinkTxt, .darkPinkTxt h2, .darkPinkTxt h3, .darkPinkTxt h4, .darkPinkTxt h5, .darkPinkTxt h6, .darkPinkTxt p, .darkPinkTxt a { color: #d41c5e; } .darkPinkTxt a: hover { color: #000; } .yellTtlAndTxt, .yellTtlAndTxt h2, .yellTtlAndTxt h3, .yellTtlAndTxt h4, .yellTtlAndTxt h5, .yellTtlAndTxt h6, .yellTtlAndTxt p, .yellTtlAndTxt span, .yellTtlAndTxt li, .yellTtlAndTxt a { color: #fdd309; } .yellTtlAndTxt a: hover { color: #000; } .genericPnkClrTxt, .genericPnkClrTxt h2, .genericPnkClrTxt h3, .genericPnkClrTxt h4, .genericPnkClrTxt h5, .genericPnkClrTxt h6, .genericPnkClrTxt p, .genericPnkClrTxt span, .genericPnkClrTxt li, .genericPnkClrTxt a { color: #d3205f; } .genericPnkClrTxt a: hover { color: #000; } .darkPurpleTxt h2, .darkPurpleTxt h3, .darkPurpleTxt h4, .darkPurpleTxt h5, .darkPurpleTxt h6, .darkPurpleTxt p, .darkPurpleTxt span, .darkPurpleTxt li, .darkPurpleTxt a { color: #793995; } .darkPurpleTxt a: hover { color: #000; } .darkBluClrTxt, .darkBluClrTxt h2, .darkBluClrTxt h3, .darkBluClrTxt h4, .darkBluClrTxt h5, .darkBluClrTxt h6, .darkBluClrTxt p, .darkBluClrTxt span, .darkBluClrTxt li, .darkBluClrTxt a { color: #0072bc; } .darkBluClrTxt a: hover { color: #000; } .pnkTxtClrTxt, .pnkTxtClrTxt h2, .pnkTxtClrTxt h3, .pnkTxtClrTxt h4, .pnkTxtClrTxt h5, .pnkTxtClrTxt h6, .pnkTxtClrTxt p, .pnkTxtClrTxt span, .pnkTxtClrTxt li, .pnkTxtClrTxt a { color: #d31d5c; } .pnkTxtClrTxt a: hover { color: #000; } .darkGrnTxt, .darkGrnTxt h2, .darkGrnTxt h3, .darkGrnTxt h4, .darkGrnTxt h5, .darkGrnTxt h6, .darkGrnTxt p, .darkGrnTxt span, .darkGrnTxt li, .darkGrnTxt a { color: #006f45; } .darkGrnTxt a: hover { color: #000; } .lghtGrnTxtClr { color: #bcd85f; } .OrngTxtClr { color: #793995; } .lightYellBg { background-color: #fff200; } .purpleBg { background-color: #702c91; } .yelwBg { background-color: #ffd204; } .orngBg { background-color: #f16b31; } .grnBg { background-color: #09b8ae; } .darkPinkbg { background-color: #d31c5d; } .bgGrnClr { background-color: #a6ce39; } .bgDrkBl { background-color: #0072bc; }

Fonts

Primary font: "Maiden Orange", "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font italic: "Maiden Orange", "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font bold: "Maiden Orange", "HelveticaNeue", "Helvetica", "Arial", sans-serif;


Secondary font: "Geared Slab", Georgia, Times, "Times New Roman", serif;

Secondary font italic: "Geared Slab", Georgia, Times, "Times New Roman", serif;

Secondary font bold; "Geared Slab", Georgia, Times, "Times New Roman", serif;

body { font-family: 'maiden_orangeregular'; background: url('../images/bg-body-home.gif') repeat 0 0; font-size: 17px/1.7rem; line-height: 1.3; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: 'geared_slabbold'; color: #000; text-transform: uppercase; }

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
<h2 class="darkPinkTtlClr">Welcome To Station Promenade</h2> h1 { font-size: 36px/3.6rem; line-height: 1.2; margin-bottom: 15px; } h2 { font-size: 34px/3.4rem; line-height: 1.2; margin-bottom: 7px; } h3 { font-size: 32px/3.2rem; line-height: 1.15; margin-bottom: 15px; } h4 { font-size: 28px/2.8rem; line-height: 1.1; margin-bottom: 10px; } h5 { font-size: 24px/2.4rem; line-height: 1.2; margin-bottom: 10px; } h6 { font-size: 22px/2.2rem; line-height: 1.2; margin-bottom: 10px; }

Paragraph

So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

<p>So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.</p> body { background: #fff; font: 100%/1.5; font-family: "Maiden Orange", HelveticaNeue, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; color: #333333; } p { margin-bottom: 1em; }

Blockquote

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

<blockquote><p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p></blockquote> body { background: #fff; font: 100%/1.5; font-family: "Maiden Orange", HelveticaNeue, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; color: #333333; } blockquote { font-style: italic; border-left: 1px solid gray; color: gray; margin-bottom: 1em; padding-left: 1em; }

Intro Text

The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.

<p class="intro">The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.</p> .intro { font-size: 1.0625em; font-weight: 600; }

Caption

A caption can be applied to an image, quote, form field, etc.

<p class="caption">A caption can be applied to an image, quote, form field, etc.</p> .caption { font-style: italic; } body { background: #fff; font: 100%/1.5; font-family: "Maiden Orange", HelveticaNeue, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; color: #333333; }

Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variarble element, such as x = y

<div class="text"> <p><a href="#">This is a text link</a></p> <p><strong>Strong is used to indicate strong importance</strong></p> <p><em>This text has added emphasis</em></p> <p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p> <p>The <i>i element</i> is text that is set off from the normal text</p> <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p> <p><del>This text is deleted</del> and <ins>This text is inserted</ins></p> <p><s>This text has a strikethrough</s></p> <p>Superscript<sup>®</sup></p> <p>Subscript for things like H<sub>2</sub>O</p> <p><small>This small text is small for for fine print, etc.</small></p> <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p> <p>Keybord input: <kbd>Cmd</kbd></p> <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p> <p><cite>This is a citation</cite></p> <p>The <dfn>dfn element </dfn> indicates a definition.</p> <p>The <mark>mark element </mark> indicates a highlight </p> <p><code>This is what inline code looks like.</code></p> <p><samp>This is sample output from a computer program</samp></p> <p>The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p> </div><!--end .text--> a { color: #333333; text-decoration: none; outline: 0; } a:hover, a:focus { color: gray; } abbr { border-bottom: 1px dotted gray; cursor: help; }

Emphasis Colors

This is what standard body content looks like

This is what valid input text looks like

This is what warning input text looks like

This is what information text looks like.

<p class="error">This is what error text looks like</p> <p class="valid">This is what valid text looks like</p> <p class="warning">This is what warning text looks like</p> <p class="information">This is what information text looks like</p> .valid { color: #089e00; } .error { color: red; } .warning { color: #fff664; } .information { color: #000db5; }

Hr


<hr /> hr { border: 0; height: 2px; background: #eee; margin: 2em 0; }

Unordered

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item
<div class="text"> <ul> <li>This is a list item in an unordered list</li> <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.</li> <li>Lists can be nested inside of each other <ul> <li>This is a nested list item</li> <li>This is another nested list item in an unordered list</li> </ul> </li> <li>This is the last list item</li> </ul> </div> ol, ul { margin: 0; padding: 0; list-style: none; }

Ordered

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item
<div class="text"> <ol> <li>This is a list item in an ordered list</li> <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li> <li>Lists can be nested inside of each other <ol> <li>This is a nested list item</li> <li>This is another nested list item in an ordered list</li> </ol> </li> <li>This is the last list item</li> </ol> </div> ol, ul { margin: 0; padding: 0; list-style: none; }

Definition

Definition List
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
And it gets a definition too, which is this line.
<dl> <dt>Definition List</dt> <dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd> <dt>This is a term.</dt> <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd> <dt>Here is another term.</dt> <dd>And it gets a definition too, which is this line.</dd> <dt>Here is term that shares a definition with the term below.</dt> <dd>And it gets a definition too, which is this line.</dd> </dl> dl { overflow: hidden; margin: 0 0 1em; } dt { font-weight: bold; } dd { margin-left: 0; }

Header panel (835px x 305px)

Header panel (835px x 305px) <img src="images/wacky/header-panel.jpg" alt="Header panel (835px x 305px)" />

Page header panel (835px x 185px)

Page header panel (835px x 305px) <img src="images/wacky/page-header.gif" alt="Page header panel (835px x 185px)" />

Full page panel bottom (835px x 230px)

Full page panel bottom(835px x 203px) <img src="images/wacky/full-page-panel-bottom.png" alt="Full page panel bottom (835px x 230px)" />

Page panel left/right (253px x 285px)

Page panel left/right (253px x 285px) <img src="images/wacky/page-panel-left.gif" alt="Page panel left/right (253px x 285px)" />

Page panel 3x1 (270px x 270px)

Page panel 3x1 (270px x 270px) <img src="images/wacky/page-panel-3x1.gif" alt="Page panel 3x1 (270px x 270px)" />

Party panel (245px x 290px)

Party panel (245px x 290px) <img src="images/wacky/party-panel.png" alt="Party panel (245px x 290px)" />

Party full panel (811px x 124px)

Party full panel (811px x 124px) <img src="images/wacky/party-full-panel.jpg" alt="Party full panel (811px x 124px)" />

Admission panel (263px x 173px)

Admission panel (263px x 173px) <img src="images/wacky/admission-panel.jpg" alt="Admission panel (263px x 173px)" />

Food panel 2x2 (524px x 165px)

Food panel 2x2 (524px x 165px) <img src="images/wacky/food-panel-2x2.png" alt="Food panel 2x2 (524px x 165px)" />

Food panel 2x1 (253px x 165px)

Food panel 2x1 (253px x 165px) <img src="images/wacky/food-panel-2x1.gif" alt="Food panel 2x1 (253px x 165px)" />

Gallery panel (377px x 383px)

Gallery panel (377px x 383px) <img src="images/wacky/gallery.jpg" alt="Gallery panel (377px x 383px)" />

Contact page panel (245px x 106px)

Contact page panel (245px x 106px) <img src="images/wacky/contact-page-panel.jpg" alt="Contact page panel (245px x 106px)" />

Your pub page ad panel 1x1 (156px x 205px)

Your pub page ad panel (156px x 205px) <img src="images/wacky/your-pub-ad-panel-1x1.png" alt="Your pub page ad panel 1x1 (156px x 205px)" />

Your pub page ad panel 1x2 (189px x 157px)

Your pub page ad panel 1x2 (189px x 157px) <img src="images/wacky/your-pub-ad-panel-1x2.png" alt="Your pub page ad panel 1x2 (189px x 157px)" />

Icons

<div class="text"> <span class="fa fa-try"></span> <span class="fa fa-glass"></span> <span class="fa fa-music"></span> <span class="fa fa-search"></span> <span class="fa fa-envelope-o"></span> <span class="fa fa-heart"></span> <span class="fa fa-star"></span> <span class="fa fa-star-o"></span> <span class="fa fa-user"></span> <span class="fa fa-film"></span> <span class="fa fa-th-large"></span> <span class="fa fa-th"></span> <span class="fa fa-th-list"></span> <span class="fa fa-check"></span> <span class="fa fa-times"></span> <span class="fa fa-search-plus"></span> <span class="fa fa-search-minus"></span> <span class="fa fa-power-off"></span> <span class="fa fa-signal"></span> <span class="fa fa-gear"></span> <span class="fa fa-trash-o"></span> <span class="fa fa-home"></span> <span class="fa fa-file-o"></span> <span class="fa fa-clock-o"></span> <span class="fa fa-road"></span> <span class="fa fa-download"></span> <span class="fa fa-arrow-circle-o-down"></span> <span class="fa fa-arrow-circle-o-up"></span> <span class="fa fa-inbox"></span> <span class="fa fa-play-circle-o"></span> <span class="fa fa-rotate-right"></span> <span class="fa fa-refresh"></span> <span class="fa fa-list-alt"></span> <span class="fa fa-lock"></span> <span class="fa fa-flag"></span> <span class="fa fa-headphones"></span> <span class="fa fa-volume-off"></span> <span class="fa fa-volume-down"></span> <span class="fa fa-volume-up"></span> <span class="fa fa-qrcode"></span> <span class="fa fa-barcode"></span> <span class="fa fa-tag"></span> <span class="fa fa-tags"></span> <span class="fa fa-book"></span> <span class="fa fa-bookmark"></span> <span class="fa fa-print"></span> <span class="fa fa-camera"></span> <span class="fa fa-font"></span> <span class="fa fa-bold"></span> <span class="fa fa-italic"></span> <span class="fa fa-text-height"></span> <span class="fa fa-text-width"></span> <span class="fa fa-align-left"></span> <span class="fa fa-align-center"></span> <span class="fa fa-align-right"></span> <span class="fa fa-align-justify"></span> <span class="fa fa-list"></span> <span class="fa fa-dedent"></span> <span class="fa fa-indent"></span> <span class="fa fa-video-camera"></span> <span class="fa fa-picture-o"></span> <span class="fa fa-pencil"></span> <span class="fa fa-map-marker"></span> <span class="fa fa-adjust"></span> <span class="fa fa-tint"></span> <span class="fa fa-edit"></span> <span class="fa fa-share-square-o"></span> <span class="fa fa-check-square-o"></span> <span class="fa fa-move"></span> <span class="fa fa-step-backward"></span> <span class="fa fa-fast-backward"></span> <span class="fa fa-backward"></span> <span class="fa fa-play"></span> <span class="fa fa-pause"></span> <span class="fa fa-stop"></span> <span class="fa fa-forward"></span> <span class="fa fa-fast-forward"></span> <span class="fa fa-step-forward"></span> <span class="fa fa-eject"></span> <span class="fa fa-chevron-left"></span> <span class="fa fa-chevron-right"></span> <span class="fa fa-plus-circle"></span> <span class="fa fa-minus-circle"></span> <span class="fa fa-times-circle"></span> <span class="fa fa-check-circle"></span> <span class="fa fa-question-circle"></span> <span class="fa fa-info-circle"></span> <span class="fa fa-crosshairs"></span> <span class="fa fa-times-circle-o"></span> <span class="fa fa-check-circle-o"></span> <span class="fa fa-ban"></span> <span class="fa fa-arrow-left"></span> <span class="fa fa-arrow-right"></span> <span class="fa fa-arrow-up"></span> <span class="fa fa-arrow-down"></span> <span class="fa fa-mail-forward"></span> <span class="fa fa-resize-full"></span> <span class="fa fa-resize-small"></span> <span class="fa fa-plus"></span> <span class="fa fa-minus"></span> <span class="fa fa-asterisk"></span> <span class="fa fa-exclamation-circle"></span> <span class="fa fa-gift"></span> <span class="fa fa-leaf"></span> <span class="fa fa-fire"></span> <span class="fa fa-eye"></span> <span class="fa fa-eye-slash"></span> <span class="fa fa-warning"></span> <span class="fa fa-plane"></span> <span class="fa fa-calendar"></span> <span class="fa fa-random"></span> <span class="fa fa-comment"></span> <span class="fa fa-magnet"></span> <span class="fa fa-chevron-up"></span> <span class="fa fa-chevron-down"></span> <span class="fa fa-retweet"></span> <span class="fa fa-shopping-cart"></span> <span class="fa fa-folder"></span> <span class="fa fa-folder-open"></span> <span class="fa fa-resize-vertical"></span> <span class="fa fa-resize-horizontal"></span> <span class="fa fa-bar-chart-o"></span> <span class="fa fa-twitter-square"></span> <span class="fa fa-facebook-square"></span> <span class="fa fa-camera-retro"></span> <span class="fa fa-key"></span> <span class="fa fa-gears"></span> <span class="fa fa-comments"></span> <span class="fa fa-thumbs-o-up"></span> <span class="fa fa-thumbs-o-down"></span> <span class="fa fa-star-half"></span> <span class="fa fa-heart-o"></span> <span class="fa fa-sign-out"></span> <span class="fa fa-linkedin-square"></span> <span class="fa fa-thumb-tack"></span> <span class="fa fa-external-link"></span> <span class="fa fa-sign-in"></span> <span class="fa fa-trophy"></span> <span class="fa fa-github-square"></span> <span class="fa fa-upload"></span> <span class="fa fa-lemon-o"></span> <span class="fa fa-phone"></span> <span class="fa fa-square-o"></span> <span class="fa fa-bookmark-o"></span> <span class="fa fa-phone-square"></span> <span class="fa fa-twitter"></span> <span class="fa fa-facebook"></span> <span class="fa fa-github"></span> <span class="fa fa-unlock"></span> <span class="fa fa-credit-card"></span> <span class="fa fa-rss"></span> <span class="fa fa-hdd-o"></span> <span class="fa fa-bullhorn"></span> <span class="fa fa-bell"></span> <span class="fa fa-certificate"></span> <span class="fa fa-hand-o-right"></span> <span class="fa fa-hand-o-left"></span> <span class="fa fa-hand-o-up"></span> <span class="fa fa-hand-o-down"></span> <span class="fa fa-arrow-circle-left"></span> <span class="fa fa-arrow-circle-right"></span> <span class="fa fa-arrow-circle-up"></span> <span class="fa fa-arrow-circle-down"></span> <span class="fa fa-globe"></span> <span class="fa fa-wrench"></span> <span class="fa fa-tasks"></span> <span class="fa fa-filter"></span> <span class="fa fa-briefcase"></span> <span class="fa fa-fullscreen"></span> <span class="fa fa-group"></span> <span class="fa fa-chain"></span> <span class="fa fa-cloud"></span> <span class="fa fa-flask"></span> <span class="fa fa-cut"></span> <span class="fa fa-copy"></span> <span class="fa fa-paperclip"></span> <span class="fa fa-save"></span> <span class="fa fa-floppy-o"></span> <span class="fa fa-square"></span> <span class="fa fa-reorder"></span> <span class="fa fa-list-ul"></span> <span class="fa fa-list-ol"></span> <span class="fa fa-strikethrough"></span> <span class="fa fa-underline"></span> <span class="fa fa-table"></span> <span class="fa fa-magic"></span> <span class="fa fa-truck"></span> <span class="fa fa-pinterest"></span> <span class="fa fa-pinterest-square"></span> <span class="fa fa-google-plus-square"></span> <span class="fa fa-google-plus"></span> <span class="fa fa-money"></span> <span class="fa fa-caret-down"></span> <span class="fa fa-caret-up"></span> <span class="fa fa-caret-left"></span> <span class="fa fa-caret-right"></span> <span class="fa fa-columns"></span> <span class="fa fa-unsorted"></span> <span class="fa fa-sort"></span> <span class="fa fa-sort-down"></span> <span class="fa fa-sort-asc"></span> <span class="fa fa-sort-up"></span> <span class="fa fa-sort-desc"></span> <span class="fa fa-envelope"></span> <span class="fa fa-linkedin"></span> <span class="fa fa-rotate-left"></span> <span class="fa fa-undo"></span> <span class="fa fa-legal"></span> <span class="fa fa-gavel"></span> <span class="fa fa-dashboard"></span> <span class="fa fa-tachometer"></span> <span class="fa fa-comment-o"></span> <span class="fa fa-comments-o"></span> <span class="fa fa-flash"></span> <span class="fa fa-bolt"></span> <span class="fa fa-sitemap"></span> <span class="fa fa-umbrella"></span> <span class="fa fa-paste"></span> <span class="fa fa-clipboard"></span> <span class="fa fa-lightbulb-o"></span> <span class="fa fa-exchange"></span> <span class="fa fa-cloud-download"></span> <span class="fa fa-cloud-upload"></span> <span class="fa fa-user-md"></span> <span class="fa fa-stethoscope"></span> <span class="fa fa-suitcase"></span> <span class="fa fa-bell-o"></span> <span class="fa fa-coffee"></span> <span class="fa fa-cutlery"></span> <span class="fa fa-file-text-o"></span> <span class="fa fa-building"></span> <span class="fa fa-hospital"></span> <span class="fa fa-ambulance"></span> <span class="fa fa-medkit"></span> <span class="fa fa-fighter-jet"></span> <span class="fa fa-beer"></span> <span class="fa fa-h-square"></span> <span class="fa fa-plus-square"></span> <span class="fa fa-angle-double-left"></span> <span class="fa fa-angle-double-right"></span> <span class="fa fa-angle-double-up"></span> <span class="fa fa-angle-double-down"></span> <span class="fa fa-angle-left"></span> <span class="fa fa-angle-right"></span> <span class="fa fa-angle-up"></span> <span class="fa fa-angle-down"></span> <span class="fa fa-desktop"></span> <span class="fa fa-laptop"></span> <span class="fa fa-tablet"></span> <span class="fa fa-mobile-phone"></span> <span class="fa fa-mobile"></span> <span class="fa fa-circle-o"></span> <span class="fa fa-quote-left"></span> <span class="fa fa-quote-right"></span> <span class="fa fa-spinner"></span> <span class="fa fa-circle"></span> <span class="fa fa-mail-reply"></span> <span class="fa fa-reply"></span> <span class="fa fa-github-alt"></span> <span class="fa fa-folder-o"></span> <span class="fa fa-folder-open-o"></span> <span class="fa fa-expand-o"></span> <span class="fa fa-collapse-o"></span> <span class="fa fa-smile-o"></span> <span class="fa fa-frown-o"></span> <span class="fa fa-meh-o"></span> <span class="fa fa-gamepad"></span> <span class="fa fa-keyboard-o"></span> <span class="fa fa-flag-o"></span> <span class="fa fa-flag-checkered"></span> <span class="fa fa-terminal"></span> <span class="fa fa-code"></span> <span class="fa fa-reply-all"></span> <span class="fa fa-mail-reply-all"></span> <span class="fa fa-star-half-empty"></span> <span class="fa fa-star-half-full"></span> <span class="fa fa-star-half-o"></span> <span class="fa fa-location-arrow"></span> <span class="fa fa-crop"></span> <span class="fa fa-code-fork"></span> <span class="fa fa-unlink"></span> <span class="fa fa-chain-broken"></span> <span class="fa fa-question"></span> <span class="fa fa-info"></span> <span class="fa fa-exclamation"></span> <span class="fa fa-superscript"></span> <span class="fa fa-subscript"></span> <span class="fa fa-eraser"></span> <span class="fa fa-puzzle-piece"></span> <span class="fa fa-microphone"></span> <span class="fa fa-microphone-slash"></span> <span class="fa fa-shield"></span> <span class="fa fa-calendar-o"></span> <span class="fa fa-fire-extinguisher"></span> <span class="fa fa-rocket"></span> <span class="fa fa-maxcdn"></span> <span class="fa fa-chevron-circle-left"></span> <span class="fa fa-chevron-circle-right"></span> <span class="fa fa-chevron-circle-up"></span> <span class="fa fa-chevron-circle-down"></span> <span class="fa fa-html5"></span> <span class="fa fa-css3"></span> <span class="fa fa-anchor"></span> <span class="fa fa-unlock-o"></span> <span class="fa fa-bullseye"></span> <span class="fa fa-ellipsis-horizontal"></span> <span class="fa fa-ellipsis-vertical"></span> <span class="fa fa-rss-square"></span> <span class="fa fa-play-circle"></span> <span class="fa fa-ticket"></span> <span class="fa fa-minus-square"></span> <span class="fa fa-minus-square-o"></span> <span class="fa fa-level-up"></span> <span class="fa fa-level-down"></span> <span class="fa fa-check-square"></span> <span class="fa fa-pencil-square"></span> <span class="fa fa-external-link-square"></span> <span class="fa fa-share-square"></span> <span class="fa fa-compass"></span> <span class="fa fa-toggle-down"></span> <span class="fa fa-caret-square-o-down"></span> <span class="fa fa-toggle-up"></span> <span class="fa fa-caret-square-o-up"></span> <span class="fa fa-toggle-right"></span> <span class="fa fa-caret-square-o-right"></span> <span class="fa fa-euro"></span> <span class="fa fa-eur"></span> <span class="fa fa-gbp"></span> <span class="fa fa-dollar"></span> <span class="fa fa-usd"></span> <span class="fa fa-rupee"></span> <span class="fa fa-inr"></span> <span class="fa fa-cny"></span> <span class="fa fa-rmb"></span> <span class="fa fa-yen"></span> <span class="fa fa-jpy"></span> <span class="fa fa-ruble"></span> <span class="fa fa-rouble"></span> <span class="fa fa-rub"></span> <span class="fa fa-won"></span> <span class="fa fa-krw"></span> <span class="fa fa-bitcoin"></span> <span class="fa fa-btc"></span> <span class="fa fa-file"></span> <span class="fa fa-file-text"></span> <span class="fa fa-sort-alpha-asc"></span> <span class="fa fa-sort-alpha-desc"></span> <span class="fa fa-sort-amount-asc"></span> <span class="fa fa-sort-amount-desc"></span> <span class="fa fa-sort-numeric-asc"></span> <span class="fa fa-sort-numeric-desc"></span> <span class="fa fa-thumbs-up"></span> <span class="fa fa-thumbs-down"></span> <span class="fa fa-youtube-square"></span> <span class="fa fa-youtube"></span> <span class="fa fa-xing"></span> <span class="fa fa-xing-square"></span> <span class="fa fa-youtube-play"></span> <span class="fa fa-dropbox"></span> <span class="fa fa-stack-overflow"></span> <span class="fa fa-instagram"></span> <span class="fa fa-flickr"></span> <span class="fa fa-adn"></span> <span class="fa fa-bitbucket"></span> <span class="fa fa-bitbucket-square"></span> <span class="fa fa-tumblr"></span> <span class="fa fa-tumblr-square"></span> <span class="fa fa-long-arrow-down"></span> <span class="fa fa-long-arrow-up"></span> <span class="fa fa-long-arrow-left"></span> <span class="fa fa-long-arrow-right"></span> <span class="fa fa-apple"></span> <span class="fa fa-windows"></span> <span class="fa fa-android"></span> <span class="fa fa-linux"></span> <span class="fa fa-dribbble"></span> <span class="fa fa-skype"></span> <span class="fa fa-foursquare"></span> <span class="fa fa-trello"></span> <span class="fa fa-female"></span> <span class="fa fa-male"></span> <span class="fa fa-gittip"></span> <span class="fa fa-sun-o"></span> <span class="fa fa-moon-o"></span> <span class="fa fa-archive"></span> <span class="fa fa-bug"></span> <span class="fa fa-vk"></span> <span class="fa fa-weibo"></span> <span class="fa fa-renren"></span> <span class="fa fa-pagelines"></span> <span class="fa fa-stack-exchange"></span> <span class="fa fa-arrow-circle-o-right"></span> <span class="fa fa-arrow-circle-o-left"></span> <span class="fa fa-toggle-left"></span> <span class="fa fa-caret-square-o-left"></span> <span class="fa fa-dot-circle-o"></span> <span class="fa fa-wheelchair"></span> <span class="fa fa-vimeo-square"></span> <span class="fa fa-turkish-lira"></span> <span class="fa fa-try"></span> @font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.0.1');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.1') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.0.1') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.0.1') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.0.1#fontawesomeregular') format('svg');font-weight:normal;font-style:normal} .fa { text-decoration: none; } .fa.solo { } .fa.solo span { display: none; } .fa:before { display:inline-block; font-family: FontAwesome; font-size: 1.25em; text-decoration: none; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .fa-lg{font-size:1.3333333333333333em;line-height:.75em;vertical-align:-15%} .fa-2x{font-size:2em} .fa-3x{font-size:3em} .fa-4x{font-size:4em} .fa-5x{font-size:5em} .fa-fw{width:1.2857142857142858em;text-align:center} .fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none}.fa-ul>li{position:relative} .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;top:.14285714285714285em;text-align:center}.fa-li.fa-lg{left:-1.8571428571428572em} .fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em} .pull-right{float:right} .pull-left{float:left} .fa.pull-left{margin-right:.3em} .fa.pull-right{margin-left:.3em} .fa-spin{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear} @-moz-keyframes spin{0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)} 100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)} 100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)} 100%{transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)} .fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)} .fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)} .fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1)} .fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1)} .fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle} .fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center} .fa-stack-1x{line-height:inherit} .fa-stack-2x{font-size:2em} .fa-inverse{color:#fff} .fa-glass:before{content:"\f000"} .fa-music:before{content:"\f001"} .fa-search:before{content:"\f002"} .fa-envelope-o:before{content:"\f003"} .fa-heart:before{content:"\f004"} .fa-star:before{content:"\f005"} .fa-star-o:before{content:"\f006"} .fa-user:before{content:"\f007"} .fa-film:before{content:"\f008"} .fa-th-large:before{content:"\f009"} .fa-th:before{content:"\f00a"} .fa-th-list:before{content:"\f00b"} .fa-check:before{content:"\f00c"} .fa-times:before{content:"\f00d"} .fa-search-plus:before{content:"\f00e"} .fa-search-minus:before{content:"\f010"} .fa-power-off:before{content:"\f011"} .fa-signal:before{content:"\f012"} .fa-gear:before,.fa-cog:before{content:"\f013"} .fa-trash-o:before{content:"\f014"} .fa-home:before{content:"\f015"} .fa-file-o:before{content:"\f016"} .fa-clock-o:before{content:"\f017"} .fa-road:before{content:"\f018"} .fa-download:before{content:"\f019"} .fa-arrow-circle-o-down:before{content:"\f01a"} .fa-arrow-circle-o-up:before{content:"\f01b"} .fa-inbox:before{content:"\f01c"} .fa-play-circle-o:before{content:"\f01d"} .fa-rotate-right:before,.fa-repeat:before{content:"\f01e"} .fa-refresh:before{content:"\f021"} .fa-list-alt:before{content:"\f022"} .fa-lock:before{content:"\f023"} .fa-flag:before{content:"\f024"} .fa-headphones:before{content:"\f025"} .fa-volume-off:before{content:"\f026"} .fa-volume-down:before{content:"\f027"} .fa-volume-up:before{content:"\f028"} .fa-qrcode:before{content:"\f029"} .fa-barcode:before{content:"\f02a"} .fa-tag:before{content:"\f02b"} .fa-tags:before{content:"\f02c"} .fa-book:before{content:"\f02d"} .fa-bookmark:before{content:"\f02e"} .fa-print:before{content:"\f02f"} .fa-camera:before{content:"\f030"} .fa-font:before{content:"\f031"} .fa-bold:before{content:"\f032"} .fa-italic:before{content:"\f033"} .fa-text-height:before{content:"\f034"} .fa-text-width:before{content:"\f035"} .fa-align-left:before{content:"\f036"} .fa-align-center:before{content:"\f037"} .fa-align-right:before{content:"\f038"} .fa-align-justify:before{content:"\f039"} .fa-list:before{content:"\f03a"} .fa-dedent:before,.fa-outdent:before{content:"\f03b"} .fa-indent:before{content:"\f03c"} .fa-video-camera:before{content:"\f03d"} .fa-picture-o:before{content:"\f03e"} .fa-pencil:before{content:"\f040"} .fa-map-marker:before{content:"\f041"} .fa-adjust:before{content:"\f042"} .fa-tint:before{content:"\f043"} .fa-edit:before,.fa-pencil-square-o:before{content:"\f044"} .fa-share-square-o:before{content:"\f045"} .fa-check-square-o:before{content:"\f046"} .fa-move:before{content:"\f047"} .fa-step-backward:before{content:"\f048"} .fa-fast-backward:before{content:"\f049"} .fa-backward:before{content:"\f04a"} .fa-play:before{content:"\f04b"} .fa-pause:before{content:"\f04c"} .fa-stop:before{content:"\f04d"} .fa-forward:before{content:"\f04e"} .fa-fast-forward:before{content:"\f050"} .fa-step-forward:before{content:"\f051"} .fa-eject:before{content:"\f052"} .fa-chevron-left:before{content:"\f053"} .fa-chevron-right:before{content:"\f054"} .fa-plus-circle:before{content:"\f055"} .fa-minus-circle:before{content:"\f056"} .fa-times-circle:before{content:"\f057"} .fa-check-circle:before{content:"\f058"} .fa-question-circle:before{content:"\f059"} .fa-info-circle:before{content:"\f05a"} .fa-crosshairs:before{content:"\f05b"} .fa-times-circle-o:before{content:"\f05c"} .fa-check-circle-o:before{content:"\f05d"} .fa-ban:before{content:"\f05e"} .fa-arrow-left:before{content:"\f060"} .fa-arrow-right:before{content:"\f061"} .fa-arrow-up:before{content:"\f062"} .fa-arrow-down:before{content:"\f063"} .fa-mail-forward:before,.fa-share:before{content:"\f064"} .fa-resize-full:before{content:"\f065"} .fa-resize-small:before{content:"\f066"} .fa-plus:before{content:"\f067"} .fa-minus:before{content:"\f068"} .fa-asterisk:before{content:"\f069"} .fa-exclamation-circle:before{content:"\f06a"} .fa-gift:before{content:"\f06b"} .fa-leaf:before{content:"\f06c"} .fa-fire:before{content:"\f06d"} .fa-eye:before{content:"\f06e"} .fa-eye-slash:before{content:"\f070"} .fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"} .fa-plane:before{content:"\f072"} .fa-calendar:before{content:"\f073"} .fa-random:before{content:"\f074"} .fa-comment:before{content:"\f075"} .fa-magnet:before{content:"\f076"} .fa-chevron-up:before{content:"\f077"} .fa-chevron-down:before{content:"\f078"} .fa-retweet:before{content:"\f079"} .fa-shopping-cart:before{content:"\f07a"} .fa-folder:before{content:"\f07b"} .fa-folder-open:before{content:"\f07c"} .fa-resize-vertical:before{content:"\f07d"} .fa-resize-horizontal:before{content:"\f07e"} .fa-bar-chart-o:before{content:"\f080"} .fa-twitter-square:before{content:"\f081"} .fa-facebook-square:before{content:"\f082"} .fa-camera-retro:before{content:"\f083"} .fa-key:before{content:"\f084"} .fa-gears:before,.fa-cogs:before{content:"\f085"} .fa-comments:before{content:"\f086"} .fa-thumbs-o-up:before{content:"\f087"} .fa-thumbs-o-down:before{content:"\f088"} .fa-star-half:before{content:"\f089"} .fa-heart-o:before{content:"\f08a"} .fa-sign-out:before{content:"\f08b"} .fa-linkedin-square:before{content:"\f08c"} .fa-thumb-tack:before{content:"\f08d"} .fa-external-link:before{content:"\f08e"} .fa-sign-in:before{content:"\f090"} .fa-trophy:before{content:"\f091"} .fa-github-square:before{content:"\f092"} .fa-upload:before{content:"\f093"} .fa-lemon-o:before{content:"\f094"} .fa-phone:before{content:"\f095"} .fa-square-o:before{content:"\f096"} .fa-bookmark-o:before{content:"\f097"} .fa-phone-square:before{content:"\f098"} .fa-twitter:before{content:"\f099"} .fa-facebook:before{content:"\f09a"} .fa-github:before{content:"\f09b"} .fa-unlock:before{content:"\f09c"} .fa-credit-card:before{content:"\f09d"} .fa-rss:before{content:"\f09e"} .fa-hdd-o:before{content:"\f0a0"} .fa-bullhorn:before{content:"\f0a1"} .fa-bell:before{content:"\f0f3"} .fa-certificate:before{content:"\f0a3"} .fa-hand-o-right:before{content:"\f0a4"} .fa-hand-o-left:before{content:"\f0a5"} .fa-hand-o-up:before{content:"\f0a6"} .fa-hand-o-down:before{content:"\f0a7"} .fa-arrow-circle-left:before{content:"\f0a8"} .fa-arrow-circle-right:before{content:"\f0a9"} .fa-arrow-circle-up:before{content:"\f0aa"} .fa-arrow-circle-down:before{content:"\f0ab"} .fa-globe:before{content:"\f0ac"} .fa-wrench:before{content:"\f0ad"} .fa-tasks:before{content:"\f0ae"} .fa-filter:before{content:"\f0b0"} .fa-briefcase:before{content:"\f0b1"} .fa-fullscreen:before{content:"\f0b2"} .fa-group:before{content:"\f0c0"} .fa-chain:before,.fa-link:before{content:"\f0c1"} .fa-cloud:before{content:"\f0c2"} .fa-flask:before{content:"\f0c3"} .fa-cut:before,.fa-scissors:before{content:"\f0c4"} .fa-copy:before,.fa-files-o:before{content:"\f0c5"} .fa-paperclip:before{content:"\f0c6"} .fa-save:before,.fa-floppy-o:before{content:"\f0c7"} .fa-square:before{content:"\f0c8"} .fa-reorder:before{content:"\f0c9"} .fa-list-ul:before{content:"\f0ca"} .fa-list-ol:before{content:"\f0cb"} .fa-strikethrough:before{content:"\f0cc"} .fa-underline:before{content:"\f0cd"} .fa-table:before{content:"\f0ce"} .fa-magic:before{content:"\f0d0"} .fa-truck:before{content:"\f0d1"} .fa-pinterest:before{content:"\f0d2"} .fa-pinterest-square:before{content:"\f0d3"} .fa-google-plus-square:before{content:"\f0d4"} .fa-google-plus:before{content:"\f0d5"} .fa-money:before{content:"\f0d6"} .fa-caret-down:before{content:"\f0d7"} .fa-caret-up:before{content:"\f0d8"} .fa-caret-left:before{content:"\f0d9"} .fa-caret-right:before{content:"\f0da"} .fa-columns:before{content:"\f0db"} .fa-unsorted:before,.fa-sort:before{content:"\f0dc"} .fa-sort-down:before,.fa-sort-asc:before{content:"\f0dd"} .fa-sort-up:before,.fa-sort-desc:before{content:"\f0de"} .fa-envelope:before{content:"\f0e0"} .fa-linkedin:before{content:"\f0e1"} .fa-rotate-left:before,.fa-undo:before{content:"\f0e2"} .fa-legal:before,.fa-gavel:before{content:"\f0e3"} .fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"} .fa-comment-o:before{content:"\f0e5"} .fa-comments-o:before{content:"\f0e6"} .fa-flash:before,.fa-bolt:before{content:"\f0e7"} .fa-sitemap:before{content:"\f0e8"} .fa-umbrella:before{content:"\f0e9"} .fa-paste:before,.fa-clipboard:before{content:"\f0ea"} .fa-lightbulb-o:before{content:"\f0eb"} .fa-exchange:before{content:"\f0ec"} .fa-cloud-download:before{content:"\f0ed"} .fa-cloud-upload:before{content:"\f0ee"} .fa-user-md:before{content:"\f0f0"} .fa-stethoscope:before{content:"\f0f1"} .fa-suitcase:before{content:"\f0f2"} .fa-bell-o:before{content:"\f0a2"} .fa-coffee:before{content:"\f0f4"} .fa-cutlery:before{content:"\f0f5"} .fa-file-text-o:before{content:"\f0f6"} .fa-building:before{content:"\f0f7"} .fa-hospital:before{content:"\f0f8"} .fa-ambulance:before{content:"\f0f9"} .fa-medkit:before{content:"\f0fa"} .fa-fighter-jet:before{content:"\f0fb"} .fa-beer:before{content:"\f0fc"} .fa-h-square:before{content:"\f0fd"} .fa-plus-square:before{content:"\f0fe"} .fa-angle-double-left:before{content:"\f100"} .fa-angle-double-right:before{content:"\f101"} .fa-angle-double-up:before{content:"\f102"} .fa-angle-double-down:before{content:"\f103"} .fa-angle-left:before{content:"\f104"} .fa-angle-right:before{content:"\f105"} .fa-angle-up:before{content:"\f106"} .fa-angle-down:before{content:"\f107"} .fa-desktop:before{content:"\f108"} .fa-laptop:before{content:"\f109"} .fa-tablet:before{content:"\f10a"} .fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"} .fa-circle-o:before{content:"\f10c"} .fa-quote-left:before{content:"\f10d"} .fa-quote-right:before{content:"\f10e"} .fa-spinner:before{content:"\f110"} .fa-circle:before{content:"\f111"} .fa-mail-reply:before,.fa-reply:before{content:"\f112"} .fa-github-alt:before{content:"\f113"} .fa-folder-o:before{content:"\f114"} .fa-folder-open-o:before{content:"\f115"} .fa-expand-o:before{content:"\f116"} .fa-collapse-o:before{content:"\f117"} .fa-smile-o:before{content:"\f118"} .fa-frown-o:before{content:"\f119"} .fa-meh-o:before{content:"\f11a"} .fa-gamepad:before{content:"\f11b"} .fa-keyboard-o:before{content:"\f11c"} .fa-flag-o:before{content:"\f11d"} .fa-flag-checkered:before{content:"\f11e"} .fa-terminal:before{content:"\f120"} .fa-code:before{content:"\f121"} .fa-reply-all:before{content:"\f122"} .fa-mail-reply-all:before{content:"\f122"} .fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"} .fa-location-arrow:before{content:"\f124"} .fa-crop:before{content:"\f125"} .fa-code-fork:before{content:"\f126"} .fa-unlink:before,.fa-chain-broken:before{content:"\f127"} .fa-question:before{content:"\f128"} .fa-info:before{content:"\f129"} .fa-exclamation:before{content:"\f12a"} .fa-superscript:before{content:"\f12b"} .fa-subscript:before{content:"\f12c"} .fa-eraser:before{content:"\f12d"} .fa-puzzle-piece:before{content:"\f12e"} .fa-microphone:before{content:"\f130"} .fa-microphone-slash:before{content:"\f131"} .fa-shield:before{content:"\f132"} .fa-calendar-o:before{content:"\f133"} .fa-fire-extinguisher:before{content:"\f134"} .fa-rocket:before{content:"\f135"} .fa-maxcdn:before{content:"\f136"} .fa-chevron-circle-left:before{content:"\f137"} .fa-chevron-circle-right:before{content:"\f138"} .fa-chevron-circle-up:before{content:"\f139"} .fa-chevron-circle-down:before{content:"\f13a"} .fa-html5:before{content:"\f13b"} .fa-css3:before{content:"\f13c"} .fa-anchor:before{content:"\f13d"} .fa-unlock-o:before{content:"\f13e"} .fa-bullseye:before{content:"\f140"} .fa-ellipsis-horizontal:before{content:"\f141"} .fa-ellipsis-vertical:before{content:"\f142"} .fa-rss-square:before{content:"\f143"} .fa-play-circle:before{content:"\f144"} .fa-ticket:before{content:"\f145"} .fa-minus-square:before{content:"\f146"} .fa-minus-square-o:before{content:"\f147"} .fa-level-up:before{content:"\f148"} .fa-level-down:before{content:"\f149"} .fa-check-square:before{content:"\f14a"} .fa-pencil-square:before{content:"\f14b"} .fa-external-link-square:before{content:"\f14c"} .fa-share-square:before{content:"\f14d"} .fa-compass:before{content:"\f14e"} .fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"} .fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"} .fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"} .fa-euro:before,.fa-eur:before{content:"\f153"} .fa-gbp:before{content:"\f154"} .fa-dollar:before,.fa-usd:before{content:"\f155"} .fa-rupee:before,.fa-inr:before{content:"\f156"} .fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"} .fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"} .fa-won:before,.fa-krw:before{content:"\f159"} .fa-bitcoin:before,.fa-btc:before{content:"\f15a"} .fa-file:before{content:"\f15b"} .fa-file-text:before{content:"\f15c"} .fa-sort-alpha-asc:before{content:"\f15d"} .fa-sort-alpha-desc:before{content:"\f15e"} .fa-sort-amount-asc:before{content:"\f160"} .fa-sort-amount-desc:before{content:"\f161"} .fa-sort-numeric-asc:before{content:"\f162"} .fa-sort-numeric-desc:before{content:"\f163"} .fa-thumbs-up:before{content:"\f164"} .fa-thumbs-down:before{content:"\f165"} .fa-youtube-square:before{content:"\f166"} .fa-youtube:before{content:"\f167"} .fa-xing:before{content:"\f168"} .fa-xing-square:before{content:"\f169"} .fa-youtube-play:before{content:"\f16a"} .fa-dropbox:before{content:"\f16b"} .fa-stack-overflow:before{content:"\f16c"} .fa-instagram:before{content:"\f16d"} .fa-flickr:before{content:"\f16e"} .fa-adn:before{content:"\f170"} .fa-bitbucket:before{content:"\f171"} .fa-bitbucket-square:before{content:"\f172"} .fa-tumblr:before{content:"\f173"} .fa-tumblr-square:before{content:"\f174"} .fa-long-arrow-down:before{content:"\f175"} .fa-long-arrow-up:before{content:"\f176"} .fa-long-arrow-left:before{content:"\f177"} .fa-long-arrow-right:before{content:"\f178"} .fa-apple:before{content:"\f179"} .fa-windows:before{content:"\f17a"} .fa-android:before{content:"\f17b"} .fa-linux:before{content:"\f17c"} .fa-dribbble:before{content:"\f17d"} .fa-skype:before{content:"\f17e"} .fa-foursquare:before{content:"\f180"} .fa-trello:before{content:"\f181"} .fa-female:before{content:"\f182"} .fa-male:before{content:"\f183"} .fa-gittip:before{content:"\f184"} .fa-sun-o:before{content:"\f185"} .fa-moon-o:before{content:"\f186"} .fa-archive:before{content:"\f187"} .fa-bug:before{content:"\f188"} .fa-vk:before{content:"\f189"} .fa-weibo:before{content:"\f18a"} .fa-renren:before{content:"\f18b"} .fa-pagelines:before{content:"\f18c"} .fa-stack-exchange:before{content:"\f18d"} .fa-arrow-circle-o-right:before{content:"\f18e"} .fa-arrow-circle-o-left:before{content:"\f190"} .fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"} .fa-dot-circle-o:before{content:"\f192"} .fa-wheelchair:before{content:"\f193"} .fa-vimeo-square:before{content:"\f194"} .fa-turkish-lira:before,.fa-try:before{content:"\f195"}

Loading Icon

Loading <img src="images/ajax-loader.gif" alt="Loading" />

Favicon

Wacky Warehouse icon <img src="images/favicon_16x16.jpg" /> <img src="images/favicon_32x32.jpg" />

Text Fields

<fieldset> <div class="field-container"> <label for="text">Text Input <abbr title="Required">*</abbr></label> <input id="text" type="text" placeholder="Text Input"> </div> <div class="field-container"> <label for="password">Password</label> <input id="password" type="password" placeholder="Type your Password"> </div> <div class="field-container"> <label for="webaddress">Web Address</label> <input id="webaddress" type="url" placeholder="http://yoursite.com"> </div> <div class="field-container"> <label for="emailaddress">Email Address</label> <input id="emailaddress" type="email" placeholder="name@email.com"> </div> <div class="field-container"> <label for="search">Search</label> <input id="search" type="search" placeholder="Enter Search Term"> </div> <div class="field-container"> <label for="text">Number Input <abbr title="Required">*</abbr></label> <input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*"> </div> <div class="field-container"> <label for="textarea">Textarea</label> <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea> </div> <div class="field-container"> <label class="error">Error Input</label> <input class="is-error" type="text" placeholder="Text Input"> </div> <div class="field-container"> <label class="valid">Valid</label> <input class="is-valid" type="text" placeholder="Text Input"> </div> </fieldset>

Select Menu

<fieldset> <div class="field-container"> <label for="select">Select</label> <select id="select"> <optgroup label="Option Group"> <option>Option One</option> <option>Option Two</option> <option>Option Three</option> </optgroup> </select> </div> </fieldset>

Checkbox

Checkbox *
<form action="#"> <fieldset class="options"> <legend>Checkbox <abbr title="Required">*</abbr></legend> <ul> <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li> <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li> <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li> </ul> </fieldset> </form>

Radio Buttons

Radio
<form action="#"> <fieldset class="options"> <legend>Radio</legend> <ul> <li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li> <li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li> <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li> </ul> </fieldset> </form>

Html5 Inputs

<fieldset> <div class="field-container"><label for="ic">Color input</label> <input type="color" id="ic" value="#000"></div> <div class="field-container"><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></div> <div class="field-container"><label for="ir">Range input</label> <input type="range" id="ir" value="10"></div> <div class="field-container"><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></div> <div class="field-container"><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></div> <div class="field-container"><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></div> <div class="field-container"><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></div> <div class="field-container"><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></div> </fieldset>

Buttons

Button

Alternate Button

Disabled Button

Text Button

<p><a href="#" class="btn">Button</a></p> <p><a href="#" class="btn alt">Alternate Button</a></p> <p><a href="#" class="btn disabled">Disabled Button</a></p> <p><a href="#" class="text-btn">Text Button</a></p>

Table

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
<table> <thead> <tr> <th>Table Heading 1</th> <th>Table Heading 2</th> <th>Table Heading 3</th> <th>Table Heading 4</th> <th>Table Heading 5</th> </tr> </thead> <tfoot> <tr> <th>Table Footer 1</th> <th>Table Footer 2</th> <th>Table Footer 3</th> <th>Table Footer 4</th> <th>Table Footer 5</th> </tr> </tfoot> <tbody> <tr> <td>Table Cell 1</td> <td>Table Cell 2</td> <td>Table Cell 3</td> <td>Table Cell 4</td> <td>Table Cell 5</td> </tr> <tr> <td>Table Cell 1</td> <td>Table Cell 2</td> <td>Table Cell 3</td> <td>Table Cell 4</td> <td>Table Cell 5</td> </tr> <tr> <td>Table Cell 1</td> <td>Table Cell 2</td> <td>Table Cell 3</td> <td>Table Cell 4</td> <td>Table Cell 5</td> </tr> <tr> <td>Table Cell 1</td> <td>Table Cell 2</td> <td>Table Cell 3</td> <td>Table Cell 4</td> <td>Table Cell 5</td> </tr> </tbody> </table>

One Up

1/1
<div class="demo"> <!--Grid 1up--> <div class="g g-1up"> <div class="gi">1/1</div> </div> <!--End Grid 1up--> </div><!--end .demo-->

Two Up

1/2
1/2
<div class="demo"> <!--Grid 2up--> <div class="g g-2up"> <div class="gi">1/2</div> <div class="gi">1/2</div> </div> <!--End Grid 2up--> </div><!--end .demo-->

Three Up

1/3
1/3
1/3
<div class="demo"> <!--Grid 3up--> <div class="g g-3up"> <div class="gi">1/3</div> <div class="gi">1/3</div> <div class="gi">1/3</div> </div> <!--End Grid 3up--> </div><!--end .demo-->

Four Up

1/4
1/4
1/4
1/4
<div class="demo"> <!--Grid 4up--> <div class="g g-4up"> <div class="gi">1/4</div> <div class="gi">1/4</div> <div class="gi">1/4</div> <div class="gi">1/4</div> </div> <!--End Grid 4up--> </div><!--end .demo-->

Media Block

This pattern contains: atoms-square <div class="block block-thumb"> <a href="#" class="b-inner"> <div class="b-thumb"> <img src="images/wacky/page-panel-left.gif" alt="Wacky Warehouse location map" /> </div> <div class="b-text pnkTxtClrTxt"> <h2 class="headline">10% off food</h2> <p>Just flash your Wacky Club card to get 10% off food in both Wacky Warehouse and Fayre & Square.</p> <h2 class="headline">There's always a wacky</h2> <p>You can use it at any one of our 70+ venues throughout the country, find out which ones are close to you or your destination now.</p> </div> </a> </div>

Block Hero

This pattern contains: atoms-Header panel (835px x 305px) <div class="block block-hero"> <a href="#" class="inner"> <div class="b-thumb"> <img src="images/wacky/header-panel.jpg" alt="Header panel (835px x 305px)" /> </div> <div class="b-text"> <h2 class="headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2> </div> </a> </div>

Newsletter

<form action="#" method="post" class="inline-form newsletter-form"> <fieldset> <legend>Sign up for our newsletter</legend> <label for="newsletter-scope">Sign up for our newsletter</label> <div class="inline-container"> <input type="newsletter" placeholder="E-mail address" id="newsletter-field" class="newsletter-field" /> <button class="btn newsletter-submit">Sign Me Up</button> </div> </fieldset> </form>

Primary Nav

<nav id="nav" class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav><!--end .nav-->

Breadcrumbs

<ul class="breadcrumbs"> <li><a href="#">Grandparent</a></li> <li><a href="#">Parent</a></li> <li><a href="#">Child</a></li> <li><a href="#">Grandchild</a></li> <li><a href="#">Great-Grandchild</a></li> </ul>

Pagination

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
<ol class="pagination"> <li class="current"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> </ol>

Tabs

<div class="tabs"> <ul class="tab-list"> <li><a href="#" class="active">Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> </ul> </div>

Social Share

<div class="social-share"> <ul class="social-share-list"> <li><a href="#">Like</a></li> <li><a href="#">Tweet</a></li> <li><a href="#">Email</a></li> <li><a href="#">Comment</a></li> </ul> </div>

Accordion

<div class="accordion"> <ul> <li> <a href="#" class="acc-handle">Accordion 1</a> <div class="acc-panel"> </div> </li> <li> <a href="#" class="acc-handle">Accordion 2</a> <div class="acc-panel"> </div> </li> <li> <a href="#" class="acc-handle">Accordion 3</a> <div class="acc-panel"> </div> </li> </ul> </div>

Header

This pattern contains: atoms-logo molecules-primary-nav molecules-search <!-- Begin .header --> <header class="header cf" role="banner"> <a href="#"><img src="images/logo.png" class="logo" alt="Logo Alt Text" /></a> <a href="#search-form" class="nav-toggle nav-toggle-search icon-search"><span class="is-vishidden">Search</span></a> <a href="#nav" class="nav-toggle nav-toggle-menu icon-menu"><span class="is-vishidden">Menu</span></a> <nav id="nav" class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav><!--end .nav--> <form action="#" method="post" class="inline-form search-form"> <fieldset> <legend class="is-vishidden">Search</legend> <label for="search-field" class="is-vishidden">Search</label> <input type="search" placeholder="Search" id="search-field" class="search-field" /> <button class="search-submit"> <span class="icon-search" aria-hidden="true"></span> <span class="is-vishidden">Search</span> </button> </fieldset> </form> </header> <!-- End .header -->