@charset "UTF-8";
/*------------------------------------*\
	INUIT.CSS
\*------------------------------------*/
/*
Author:             Harry Roberts
Twitter:            @inuitcss
Author URL:         csswizardry.com
Project URL:        inuitcss.com
Version:            3.2
Date:               24 November 2011

Copyright 2011 Harry Roberts

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

*/

/*------------------------------------*\
	$RESET
\*------------------------------------*/
/*
	http://csswizardry.com/2011/10/reset-restarted
*/

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,
a,abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,tt,var,
b,u,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
	margin:0;
	padding:0;
}
article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{
	display:block;
}
h1,h2,h3,h4,h5,h6{
	font-size:1em;
}
strong,b,mark{
	font-weight:bold;
	font-style:inherit;
}
em,i,cite,q,address,dfn,var{
	font-style:italic;
	font-weight:inherit;
}
abbr[title],dfn[title]{
	cursor:help;
	border-bottom:1px dotted;
}
ins{
	border-bottom:1px solid;
}
a,u,ins{
	text-decoration:none;
}
del,s{
	text-decoration:line-through;
}
pre,code,samp,kbd{
	font-family:monospace;
}
small{
	font-size:0.75em;
}
img{
	border:none;
	font-style:italic;
}
input,
select,option,optgroup,
textarea{
	font:inherit;
}

/*------------------------------------*\
	$MAIN
\*------------------------------------*/

html{
	overflow-y:scroll; /* Force scrollbars 100% of the time */
	font-size:100%; /* Use 16px as per informationarchitects.jp/en/100e2r/ and wilsonminer.com/posts/2008/oct/20/relative-readability/ */
	line-height:1.5; /* A safe default for type of any size. */
	/* You should always specify a colour and background, override these in your own stylesheet if desired. */
	background-color:#fff;
	color:#333;
}
body{
	min-height:100%;
}

/*------------------------------------*\
	GRIDS
\*------------------------------------*/
/*
Page wrapper. Apply to the body where possible, as per: http://csswizardry.com/2011/01/using-the-body-element-as-a-wrapper/
*/
.wrapper{
	width:960px;
	margin:0 auto;
	padding:0 30px;
}

/*
Most frameworks rely on class="end" or similar to remove the margin from the last column in a row of grids. We don't want to do that so we use a combination of margin- and negative margin-left. It's clever...
We also allow you to use grid items as stand alone columns or in a series of columns. To use a series just wrap them all in <div class="grids">...</div>
*/
.grids{
	clear:both;
	margin:0 0 0 -3.614%;
	list-style:none; /* So we can make grids out of lists */
}

/*
Here we are using an attribute selector to detect the string 'grid-' in an element's class.
This works by assuming that anything we call grid-<n> we also want to be a grid item. It means less code and less for you to remember!

Ensure any grid item's FIRST class is a grid-<n> class. e.g.
VALID: class="grid-4 text-centre"
INVALID: class="left grid-4"
*/
[class^="grid-"]{
	float:left;
	margin:0 3.614% 0 0;
}
.grids [class^="grid-"]{
	margin:0 0 0 3.614%;
}
.grid-1{ width:4.719% }
.grid-2{ width:13.052% }
.grid-3{ width:21.386% }
.grid-4{ width:29.719% }
.grid-5{ width:38.052% }
.grid-6{ width:46.386% }
.grid-7{ width:54.719% }
.grid-8{ width:63.052% }
.grid-9{ width:71.386% }
.grid-10{ width:79.719% }
.grid-11{ width:88.052% }
.grid-12{ width:96.386%; margin:0; float: none; }

/* HOLY GRAIL (no IE7) */
.display-table .fluid {
	display: table;
	width: 100%;
	min-width: 960px;
	max-width: 1140px;
	padding: 0;
}
.display-table .fluid > .grids {
	display: table-row !important;
}
.display-table .fluid > .grids > [class^="grid-"] {
	display: table-cell;
	width: auto;
	float: none;
	margin: 0;
	padding: 0 30px;
}
.display-table .fluid > .grids > .fixed {
	width: 200px;
	padding: 0;
}

/*------------------------------------*\
	$CLEARFIX
\*------------------------------------*/
/*
Fix clearing issues as per: nicolasgallagher.com/micro-clearfix-hack/
*/

.cf,
.grids,
.media{
	zoom:1;
}
.cf:before,
.grids:before,
.media:before,

.cf:after,
.grids:after,
.media:after{
	content:"";
	display:table;
}
.cf:after,
.grids:after,
.media:after{
	clear:both;
}

/*------------------------------------*\
	$ISLAND
\*------------------------------------*/
/*
Use a class of .island whenever you want to box off an area of content as per: csswizardry.com/2011/10/the-island-object/
Extend with classes like .promo to apply different colours etc to draw attention.
*/

.island{
	padding:1.5em;
}
	.island > :last-child{
		margin-bottom:0;
	}

/*------------------------------------*\
	$MEDIA
\*------------------------------------*/
/*
Based on @stubbornella’s media object: stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
<a class="media promo">
	<img src=product.jpg alt="" class=img>
	<p class=body>Get Product for half price!</p>
</a>
*/

.media{
	display:block;
}
	.media img{
		float:left;
	}
	.media .body{
		overflow:hidden;
		margin-bottom:0;
	}

/*------------------------------------*\
	$NAV
\*------------------------------------*/
/*
Create an abstraction, as per: csswizardry.com/2011/09/the-nav-abstraction/
*/

.nav{
	list-style:none;
}
.nav li{
	display:inline;
}
.nav a{
	display:inline-block;
}

/*------------------------------------*\
	$TYPE
\*------------------------------------*/

/*--- HEADINGS ---*/

h1,.alpha{
	font-size:32px;
	font-size:2rem;
	line-height:1.5;
}
h2,.beta{
	font-size:24px;
	font-size:1.5rem;
	line-height:1;
}
h3,.gamma{
	font-size:20px;
	font-size:1.25rem;
	line-height:1.2;
}
h4,.delta{
	font-size:18px;
	font-size:1.125rem;
	line-height:1.333;
}
h5,.epsilon{
	font-weight:bold;
}
h5,.epsilon,
h6,.zeta{
	font-size:16px;
	font-size:1rem;
	line-height:1.5;
}

/*--- LISTS ---*/

ul, ol, dl{
	margin-left:1.5em;
}

/*--- BLOCKQUOTE ---*/

p.blockquote {
	quotes:"\201C" "\201D";
	border-left:0.5em solid;
	padding-left:1em;
	padding-top:2em;
}
p.blockquote:before {
	content:open-quote;
	position:absolute;
	font-size:64px;
	font-size:4rem;
	margin-top:-56px;
	margin-top:-3.5rem;
}
.blockquote cite {
	font-size:0.8rem;
}

/*--- LINKS ---*/

a:hover {
	text-decoration:underline;
}
a.icon:hover {
	text-decoration:none;
}

/*--- SHARED ---*/

h1,h2,h3,h4,h5,h6,
ul,ol,dl,p,address,figure,pre{
	margin-bottom:24px;
	margin-bottom:1.5rem;
}

/*------------------------------------*\
	$IMAGES
\*------------------------------------*/
img{
	max-width:100%;
	height:auto;
	/* Give it some text styles to offset alt text */
	color:#c00;
}
img.left	{ margin:0 1.5em 0 0; }
img.right	{ margin:0 0 0 1.5em; }

/*--- FLASH/VIDEO ---*/
object,
embed,
video{
	max-width:100%;
	height:auto;
}

/*------------------------------------*\
	$MESSAGES
\*------------------------------------*/
.alert {
  background-color: #FCF8E3;
  border: 1px solid #FBEED5;
  border-radius: 4px 4px 4px 4px;
  color: #C09853;
  margin-bottom: 20px;
  padding: 8px 35px 8px 14px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.alert-success {
  background-color: #DFF0D8;
  border-color: #D6E9C6;
  color: #468847;
}
.alert-danger, .alert-error {
  background-color: #F2DEDE;
  border-color: #EED3D7;
  color: #B94A48;
}
.alert-info {
  background-color: #D9EDF7;
  border-color: #BCE8F1;
  color: #3A87AD;
}

/*------------------------------------*\
	$CLASSES
\*------------------------------------*/
/*
Some not-too-pretty and insemantic classes to do odd jobs.
*/
.left	{ float:left !important; }
.right	{ float:right !important; }

.text-left		{ text-align:left; }
.text-right		{ text-align:right; }
.text-center,
.text-centre	{ text-align:center; }