/*------------------------------------*\
	12-COL.INUIT.CSS
\*------------------------------------*/

/*
12-col.inuit.css is an inuit.css igloo
igloos are CSS plugins which extend the inuit.css framework
They are released under the Apache License, Version 2.0 -- http://www.apache.org/licenses/LICENSE-2.0

@inuitcss
inuitcss.com
*/

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

/*
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;
	max-width:1100px;
	margin:0 0 0 -2.083%;
	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 2.083% 0 0;
}
.grids [class^="grid-"]{
	margin:0 0 0 2.083%;
}
.grid-1{ width:6.25% }
.grid-2{ width:14.583% }
.grid-3{ width:22.917% }
.grid-4{ width:31.25% }
.grid-5{ width:39.583% }
.grid-6{ width:47.917% }
.grid-7{ width:56.25% }
.grid-8{ width:64.583% }
.grid-9{ width:72.917% }
.grid-10{ width:81.25% }
.grid-11{ width:89.583% }
.grid-12{ width:97.917%; margin: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;
}

/*------------------------------------*\
	$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:0.75em; /* 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 ---*/