/* 
 * adapted from:
 * http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
/*
    This file is used to allow all browsers to start from the same style properties.
*/
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
hgroup,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
nav,
section,
mark,
m,
meter,
progress,
small,
time {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
/* html and body need layout otherwise ie6 will starts at -1px */
html,
body {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  zoom: 1;
}
body {
  line-height: 1.08;
}
/* lists */
ol {
  list-style-type: decimal;
}
ol ol {
  list-style-type: lower-alpha;
}
ol li {
  zoom: normal;
}
ul {
  list-style-type: disc;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
/* remember to define focus styles! */
:focus {
  outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* additional reset styles */
a img {
  border: 0;
}
/* html 5 elements */
article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
mark,
m,
meter,
progress,
small,
time {
  display: inline;
}
/* form elements */
input[type="submit"]::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input[type="submit"] {
  display: inline-block;
  position: relative;
  padding: 0;
  margin-right: .1em;
  text-decoration: none !important;
  cursor: pointer;
  text-align: center;
  zoom: 1;
  overflow: visible;
  /* the overflow property removes extra width in IE */

}
/* Prevent iOS, WinMobile from adjusting font size */
@media screen and (max-device-width: 480px) {
  html {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
  }
}
@font-face {
  font-family: 'League Gothic';
  src: url("../fonts/league_gothic-webfont.eot");
  src: url("../fonts/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/league_gothic-webfont.woff") format("woff"), url("../fonts/league_gothic-webfont.ttf") format("truetype"), url("../fonts/league_gothic-webfont.svg#LeagueGothicRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}
/*
    brand.css
    =================================
    These styles are used to set basic elements to fit to a brand.
    It should be able to be added to a page no matter what the media type 
    to set the brand.
    It must not contain layout styles [ie margins,position,padding,display]. 
    It would be used for: colors, text, fonts
    It should not contain ids, only elements and classes
    
    - Document Elements
    - links
    - paragraphs 
    - headers 
    - lists 
    - tables
    - forms 

*/
/**
	=> Colors

	__________________________
	Base & Background
	--------------------------
	#F7F7F5 (light grey)
	#E6E6E4 (medium grey)
	#C2C2C2 (dark grey)
	
	__________________________
	Brand main colour
	--------------------------
	#BFBAB6 (light stone)
	#99908A (medium stone)
	#66625C (dark stone)
	
	__________________________
	Brand complementary colour
	--------------------------
	#00C0F3 (light blue)
	#008CBF (medium blue)
	#00598C (dark blue)
	#DBE129 (light yellowgreen)
	#A7AD00 (medium yellowgreen)
	#747A00 (dark yellowgreen)
	
	__________________________
	Alternative highlights
	--------------------------
	#9843D9 (purple)
	#6DD08E (green/turquoise)
	#0054A6 (navy)
	#EC008C (pink)
	
	__________________________
	Status & Alerts
	--------------------------
	#EE1C24 (red)
	#FF8517 (orange)
	#39B54A (green)

--------------------------------------------------*/
/**
    => Document Elements
--------------------------------------------------*/
/* always force a scrollbar in non-IE */
/* set global font family */
body,
select,
input,
textarea {
  font-family: Georgia, serif;
}
body {
  font-size: 20px;
  line-height: 1.666666;
  color: #66625c;
}
/* hand cursor on clickable input elements */
label,
input[type=button],
input[type=submit],
button {
  cursor: pointer;
}
/* webkit browsers add a 2px margin outside the chrome of form elements */button,
input,
select,
textarea {
  margin: 0;
}
/* make buttons play nice in IE:   
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {
  width: auto;
  overflow: visible;
}
/**
    => links
--------------------------------------------------*/
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a {
  outline: none;
}
a:focus {
  outline: thin dotted;
}
a:active,
a:hover {
  outline: none;
}
a {
  color: #9843d9;
  text-decoration: underline;
}
a:visited {
  color: #9843d9;
}
a:hover,
a:active {
  color: #9843d9;
  text-decoration: underline;
}
a img {
  border: none;
}
a:link {
  -webkit-tap-highlight-color: #6DD08E;
}
nav a,
nav a:visited {
  color: #66625c;
  text-decoration: none;
}
nav a:hover {
  color: #66625c;
  text-decoration: underline;
}
/* bicubic resizing for non-native sized IMG: 
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
img {
  -ms-interpolation-mode: bicubic;
  display: inline;
}
pre {
  padding: 16px;
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */

  white-space: pre;
  /* CSS2 */

  white-space: pre-wrap;
  /* CSS 2.1 */

  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */

  word-wrap: break-word;
  /* IE */

}
em {
  font-weight: normal;
}
small {
  font-size: 62.5%;
}
/* normalize monospace sizing 
 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
 */
pre,
code,
kbd,
samp {
  font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
}
b,
strong {
  font-weight: normal;
  color: #004;
}
/* 
    => headers 
----------------------------------------------------*/
/* www.aestheticallyloyal.com/public/optimize-legibility/ */h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  text-rendering: optimizeLegibility;
  font-family: "League Gothic", "Arial Narrow", "Arial", sans-serif;
  line-height: 1;
  text-transform: uppercase;
}
h1 {
  font-size: 60px;
  margin-bottom: 0.1em;
}
h2 {
  font-size: 50px;
  margin-bottom: 0.518em;
  /*27px/14*/

}
h3 {
  font-size: 40px;
}
/* Footer
----------------------------------------------------*/
footer,
footer p,
footer li,
footer a {
  font-family: Georgia, serif;
  color: #99908a;
}
/* 
    => paragraphs 
----------------------------------------------------*/
p {
  margin-bottom: 1.143em;
  font-family: Georgia, serif;
}
h1 + p {
  font-size: 1.286em;
}
/* 
    => lists 
----------------------------------------------------*/
/*
    DL Lists
    Width needs to be explicitly set on the dd it the sum if the dt and th dd width is greater than the dl.
    This is to ensure the content is restricted to it's container and the layout
    does not break cross browser.
*/
dl {
  padding: 0 0 16px;
}
dl:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
dt {
  clear: left;
  display: inline-block;
  float: left;
  font-weight: normal;
}
dd {
  float: left;
  width: 200px;
  *float: none;
}
li {
  font-family: Georgia, serif;
}
ol {
  padding: 0 0 16px 23px;
}
ol ol {
  padding-top: 0;
}
ul {
  padding: 0 0 16px 20px;
}
ul ul {
  padding-top: 0;
}
nav li {
  list-style: none;
}
/*
 * Add this in if you want to use an image for the list items
ul li           { list-style-type:none; list-style-image: url("/images/li-main.gif"); }
ul li li        { list-style-image: none; list-style-type: circle; }
ul li li li     { list-style-image: none; list-style-type: disc; }
ul li li li li  { list-style-image: none; list-style-type: square; }
*/
/* when lists come straight after a paragraph */
p + ul,
p + ol {
  padding-top: 0;
}
/* 
    => tables
----------------------------------------------------*/
table {
  font-size: inherit;
  margin: 0.286em 0 0.5em;
  width: 100%;
}
table caption {
  background-color: #F7F7F5;
  color: #99908A;
  font-size: 1.1em;
  font-weight: normal;
  text-align: left;
}
table caption span {
  display: block;
  padding: 0.714em 0.714em 0.571em;
  position: relative;
}
table caption .aside {
  position: absolute;
  top: 0;
  right: 0;
}
th,
td {
  border: solid 1px #C2C2C2;
  padding: 8px 3px 7px;
  text-align: center;
}
th {
  font-weight: normal;
}
tr:nth-child(odd) td {
  background: #E6E6E4;
}
.ie6 tr.odd td,
.ie7 tr.odd td,
.ie8 tr.odd td {
  background: #E6E6E4;
}
/* 
    => forms 
----------------------------------------------------*/
button,
select,
input,
textarea {
  font-size: 99%;
  font-family: inherit;
}
/* make buttons play nice in IE:    
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {
  width: auto;
  overflow: visible;
}
input {
  vertical-align: middle;
}
label {
  vertical-align: middle;
}
.ie6 legend,
.ie7 legend {
  margin-left: -7px;
}
select {
  padding: 4px 0;
  vertical-align: middle;
}
textarea {
  overflow: auto;
  vertical-align: 1px;
}
/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] {
  vertical-align: text-bottom;
}
input[type="checkbox"] {
  vertical-align: middle;
  *vertical-align: baseline;
}
.ie6 input {
  vertical-align: text-bottom;
}
a.button,
button {
  cursor: pointer;
  margin: 0;
  border-radius: 3px;
  font-family: Georgia, serif;
  outline: none;
  zoom: 1;
  position: relative;
  text-decoration: none;
  overflow: visible;
  /* removes extra side padding in IE */

  background-color: #6dd08e;
  border: 0;
  color: #fff;
  padding: 10px 30px;
  font-size: 18px;
  vertical-align: middle;
  display: inline-block;
}
a.button:hover,
button:hover {
  text-decoration: underline;
}
a.button:hover,
button:hover {
  background-color: #4a8c60;
  text-decoration: none;
}
button::-moz-focus-inner {
  border: none;
  /* overrides extra padding in Firefox */

}
button:hover {
  text-decoration: none;
}
a.button.secondary,
button.secondary,
a.button-secondary {
  cursor: pointer;
  margin: 0;
  border-radius: 3px;
  font-family: Georgia, serif;
  outline: none;
  zoom: 1;
  position: relative;
  text-decoration: none;
  overflow: visible;
  /* removes extra side padding in IE */

  background-color: transparent;
  border: 1px solid #e2dfdb;
  color: #00c0f3;
  padding: 5px 15px;
  font-size: 13px;
  vertical-align: baseline;
  display: inline;
}
a.button.secondary:hover,
button.secondary:hover,
a.button-secondary:hover {
  text-decoration: underline;
}
.btn {
  font-size: 1.28em;
  display: inline-block;
  text-transform: uppercase;
  text-align: center;
  font-family: "DINWeb-Cond", Arial, Helvetica, Sans-Serif;
  padding: 5px 13px 0;
  border-radius: 5px;
  height: 25px;
  -webkit-box-shadow: 0px 0 1px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0 1px 0px rgba(0, 0, 0, 0.1);
}
.container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}
header {
  padding: 2em 0;
  background-color: #bae9ca;
}
section {
  padding: 1em 0;
}
.cssify input[type=text] {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 0.25em;
}
.cssify section {
  text-align: center;
}
.cssify section #cssout,
.cssify section input,
.cssify section p {
  text-align: left;
  margin-bottom: 1em;
}