@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.

*/





/*------------------------------------*\
	CONTENTS
\*------------------------------------*/
/*
RESET
SHARED
MAIN
GRIDS
CLEARFIX
ISLAND
MEDIA
LOGO
NAV
TYPE
IMAGES
FORMS
TABLES
MESSAGES
MISC
CLASSES
DIAGNOSTICS
NARROW
MOBILE
PRINT
*/





/*------------------------------------*\
	$RESET
\*------------------------------------*/
/*
A more considered reset; more of a restart... csswizardry.com/2011/10/reset-restarted
*/
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;
}
a:focus, button::-moz-focus-inner {
  border: 0;
  outline: none; 
}




/*------------------------------------*\
	$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;
}



/*------------------------------------*\
	$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;
	margin-right:10px;
}
.media .body{
	overflow:hidden;
	margin-bottom:0;
}



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


/*------------------------------------*\
	$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;
}

/*------------------------------------*\
	$MOBILE
\*------------------------------------*/
/*
CSS for mobile devices.
Linearise it!
*/
@media (max-width: 720px){
/*------------------------------------*\
	MAIN
\*------------------------------------*/
html{
	font-size:1.125em; /* 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 !important;
	margin:0;
}

}
/*--- 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: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 ---*/