@charset "UTF-8";

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;
}
p{
	font-size:14px;
}
div{
	font-size:13px;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
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;
}

/*
----------------------------------
*/
h1,h2,h3,h4,h5,h6,
ul,ol,dl,p,address,figure,pre,fieldset,table,hr,
.nav,.island,.media{
	margin-bottom:24px;
	margin-bottom:1.5rem;
}
figcaption,small{
	font-size:12px;
	font-size:0.75rem;
}
ul,ol,dd{
	margin-left:3em;
}
small,code{
	line-height:1;
}
pre,code,
input,textarea{
	font:inherit;
}

/*------------------------------------*\
	$MAIN
\*------------------------------------*/
html{
	overflow-y:scroll;
	font-size:100%;
	line-height:1.5; 
	background-color:#fff;
	color:#333;
}
body{
	min-height:100%;
}

/*
-----------------------------
*/
.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{
	padding:1.5em;
}
	.island > :last-child{
		margin-bottom:0;
	}
/*
----------------------------------
*/
.media{
	display:block;
}
	.media .img{
		float:left;
		margin-right:10px;
	}
	.media .body{
		overflow:hidden;
		margin-bottom:0;
	}
/*
-----------------------------
*/
.logo,
.logo img{
	display:block;
	width:auto; 
	height:auto; 
}
/* ---------------------------- */
.logo{
	background:url(/path/to/logo);
}
	.logo:hover{
		/* Hover states */
		background-position:0 -00px;
	}
.logo img{
	position:absolute;
	left:-99999px;
}

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

/*--- HEADINGS ---*/
h1,.alpha{
	font-size:24px;			/* 32px */
	line-height:1.5;		/* 48px */
}
h2,.beta{
	font-size:22px;		/* 24px */
	line-height:1;			/* 24px */
}
h3,.gamma{
	font-size:18px;		/* 20px */
	line-height:1.2;		/* 24px */
}
h4,.delta{
	font-size:18px;		/* 18px */
	line-height:1.333;		/* 24px */
}
h5,.epsilon{
	font-weight:bold;
}
h5,.epsilon,
h6,.zeta{
	font-size:18px;			/* 16px */
	line-height:1.5;		/* 24px */
}

/*--- FIGURES ---*/
figure img{
	display:block;
	margin-bottom:0;
}

/*--- LINKS ---*/

a:visited{
	opacity:0.8; 
}
a:hover{
	text-decoration:underline;
}
a:active,
a:focus{
	
	position:relative;
	top:1px;
}

/*--- LISTS ---*/
li > ul,
li > ol{
	
	margin-bottom:0;
}

/*
--------------------------------
*/
ul.numbered{
	list-style:decimal outside;
}
dt{
	font-weight:bold;
}

/*
------------------------------------------
*/
q{ quotes:"‘" "’" "“" "”"; }

q:before{ content:"‘"; content:open-quote; }
q:after{ content:"’"; content:close-quote; }

q q:before{ content: "“"; content: open-quote; }
q q:after{ content: "”"; 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{
	text-indent:-0.4em;
}

/*
-----------------------------------
*/
.source{
	display:block;
	text-indent:0;
	margin-top:-24px;
	margin-top:-1.5rem;
}
	.source:before{
		content:"—";
	}

/*--- GENERAL ---*/
mark{
	background-color:#ffc;
	color:#333;
}

/*--- CODE ---*/
pre,
code{
	font-family:"Inconsolata", "Monaco", "Consolas", "Courier New", Courier, monospace;
}
pre{
	overflow:auto;
	line-height:24px; 
}

/*------------------------------------*\
	$IMAGES
\*------------------------------------*/
img{
	max-width:100%;
	height:auto;
	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;
}

/*
--------------------------------------
*/
table{
	width:100%;
	max-width:100%;
}
thead tr:last-of-type th{
	
	border-bottom-width:2px;
}
tbody th{
	
	border-right-width:2px;
}
th:empty{
	
	border:none;
}
th,td{
	font-weight: normal;
	color: #666;
	vertical-align:top;
	padding:0.75em;
	border:1px solid #ccc;
}
th{
	font-weight:bold;
	text-align:center
}
table [colspan]{
	text-align:center;
}
table [rowspan]{
	vertical-align:middle;
}
/*
Assuming IE has an 'implied' colspan of one on cells without an explicit colspan attribute, fix/undo it.
See jsfiddle.net/csswizardry/UJJay/
*/
[colspan="1"]{
    text-align:left;
}
[rowspan="1"]{
    vertical-align:top;
}
tbody tr:nth-of-type(odd){
	background:rgba(0,0,0,0.05);
}
tfoot{
	text-align:center;
}
tfoot td{
	border-top-width:2px;
}





/*------------------------------------*\
	$MESSAGES
\*------------------------------------*/
/*
Unfortunately feedback messages don’t fit the baseline all too well. Perhaps in a later version...
*/
.message{
	font-weight:normal;
	display:block;
	padding:10px 10px 10px 36px;
	border:1px solid #ccc;
	margin-left:0;
	
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	-moz-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
	-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
	box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
}
	/*
	With multiple errors it’s nice to group them:
	<ul class=message>
		<li>Please provide a surname.</li>
		<li>Please enter a valid email address.</li>
	</ul>
	*/
	ul.message{
		list-style:decimal outside; /* It’s also handy to number them. However, they might not necessarily be in a particular order, so we spoof it by putting numbers on an unordered list */
		padding:10px 10px 10px 56px;
	}
.error{
	border-color:#fb5766;
	background:url(../img/css/icons/error.png) 10px center no-repeat #fab;
}
.success{
	border-color:#83ba77;
	background:url(../img/css/icons/success.png) 10px center no-repeat #d1feba;
}
.info{
	border-color:#85a5be;
	background:url(../img/css/icons/info.png) 10px center no-repeat #c4dbec;
}
.warning{
	border-color:#d8d566;
	background:url(../img/css/icons/warning.png) 10px center no-repeat #fef8c4;
}





/*------------------------------------*\
	$MISC
\*------------------------------------*/
.accessibility{
	/* Hide content off-screen without hiding from screen-readers. N.B. This is not suited to RTL languages */
	position:absolute;
	left:-99999px;
}
.more-link:after{
	/* Too many people use &raquo; in their markup to signify progression/movement, that ain’t cool. Let’s insert that using content:""; */
	content:" »";
}





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

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





/*------------------------------------*\
	$DIAGNOSTICS
\*------------------------------------*/
/*
Apply a class of .debug to the html element ONLY WHEN YOUR SITE IS ON DEV.
*/

/*
Red border 		== 	something is wrong
Yellow border 	== 	something may be wrong, you should double check.
Green border 	== 	perfect, nice one!
*/

/*--- STYLES ---*/
.debug [style],
.debug style{
	/* Inline styles aren’t great, can this be avoided? */
	outline:5px solid yellow;
}
	.debug style{
		display:block;
	}

/*--- IMAGES ---*/
.debug img{
	/* Images without alt attributes are bad! */
	outline:5px solid red;
}
.debug img[alt]{
	/* Images with alt attributes are good! */
	outline-color:green;
}
.debug img[alt=""]{
	/* Images with empty alt attributes are okay in the right circumstances. */
	outline-color:yellow;
}

/*--- LINKS ---*/
.debug a{
	/* Links without titles are yellow, does your link need one? */
	outline:5px solid yellow;
}
.debug a[title]{
	/* Links with titles are green, title attributes can be very useful! */
	outline-color:green;
}
.debug a[href="#"]{
	/* Were you meant to leave that hash in there? */
	outline-color:yellow;
}
.debug a[target]/*,
.debug a[onclick],
.debug a[href*=javascript]*/{
	/* What were you thinking?! */
	outline-color:red;
}

/*--- CLASSES/IDS ---*/
.debug [class=""],
.debug [id=""]{
	/* Is this element meant to have an empty class/ID? */
	outline:5px solid yellow;
}





/*------------------------------------*\
	$NARROW
\*------------------------------------*/
/*
CSS for tablets and narrower devices
*/
@media (min-width: 721px) and (max-width: 960px){
}
/*--- END NARROW ---*/





/*------------------------------------*\
	$MOBILE
\*------------------------------------*/
/*
CSS for mobile devices.
Linearise it!
*/
@media (max-width: 720px){
/*------------------------------------*\
	MAIN
\*------------------------------------*/
html{
	font-size:12px; /* Make text slightly larger for smaller devices to improve readability. */
}
body{
	-webkit-text-size-adjust:none;
}
.wrapper{
	width:auto;
}
.grids{
	margin:0;
	width:auto;
}
[class^="grid-"],
.grids [class^="grid-"]{
	width:auto;
	float:none;
	margin:0;
}





/*------------------------------------*\
	LOGO
\*------------------------------------*/
.logo{
	margin-left:auto;
	margin-right:auto;
}





/*------------------------------------*\
	TYPE
\*------------------------------------*/
/*--- LISTS ---*/
ul,
ol,
dl{
	margin-left:1.5em;
}





/*------------------------------------*\
	IMAGES
\*------------------------------------*/
img.left,
img.right	{ max-width:50%; height:auto; }
}
/*--- END MOBILE ---*/





/*------------------------------------*\
	$PRINT
\*------------------------------------*/
/*
Good ol’ fashioned paper...
*/
@media print{
/*------------------------------------*\
	MAIN
\*------------------------------------*/
/*
Give everything some decent contrast.
*/
*{
	background-color:#fff;
	color:#000;
	text-shadow:none!important;
}
/*
Set a nice measure and take the font down to print-acceptable sizes.
*/
body{
	font-size:14px; /* 12px (if base font-size was 16px) */
}
.wrapper{
	width:75%;
	margin:0 auto;
}
/*
A list of things you don’t want printing. Add to/subtract from as necessary. 
*/
.nav,
.footer{
	display:none;
}
.logo img{
	position:static;
}
/*
Linearise
*/
.grids{
	width:auto;
}
[class^="grid-"]{
	width:auto;
	float:none;
	clear:both;
}
/*
Don’t let images break anything.
*/
img{
	max-width:100%;
	height:auto;
}
/*
Messages look odd with just borders.
*/
.message{
	border:none;
	font-weight:bold;
}
/*
Display the href of any links.
*/
a:link:after,a:visited:after{
	content:" (" attr(href) ")";
	font-size:smaller;
}
/*
Any links that are root relative to your site need prepending with your URL.
*/
a[href^="/"]:after{
	content:" (http://yoururlhere.com" attr(href) ")";
	font-size:smaller;
}
/*
Any Flash/video content can’t be printed so leave a message.
*/
object:after{
	content:"Flash/video content. Head to http://yoururlhere.com/ to view this content.";
	display:block;
	font-weight:bold;
	margin-bottom:1.5em;
}
}
/*--- END PRINT ---*/