/*------------------------------------*\
	GRID.INUIT.CSS
\*------------------------------------*/





/*
grid.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:940px;
	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:960px;
	margin:0 auto;
	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:4.167% }
.grid_2{ width:10.417% }
.grid_3{ width:16.667% }
.grid_4{ width:22.917% }
.grid_5{ width:29.167% }
.grid_6{ width:35.417% }
.grid_7{ width:41.667% }
.grid_8{ width:47.917% }
.grid_9{ width:54.167% }
.grid_10{ width:60.417% }
.grid_11{ width:66.667% }
.grid_12{ width:72.917% }
.grid_13{ width:79.167% }
.grid_14{ width:85.417% }
.grid_15{ width:91.667% }
.grid_16{ width:97.917%; margin:0 }



/************************************************************************************
MOBILE Nav Styles
*************************************************************************************/
@media screen and (max-width: 480px) {

	/* nav-wrap */
	.js_on .menu-header {
		font-size:1.125em;
	}

	/* menu icon */
	.js_on #menu-icon {
		color: #fff;
		height: 30px;
		line-height:24px;
		background: url(../../../images/menu-icon.png) no-repeat 10px center;
		padding: 8px 10px 0 42px;
		cursor: pointer;
		border: solid 1px #666;
		display: block; /* show menu icon */
	}
	
	#nav_below_header.js_on {
		margin-right:5px;
	}
	
	/* main nav */
	.js_on  ul.menu {
		clear: both;
		position: absolute;
		width:100%;
		top: 38px;
		z-index: 10000;
		padding: 5px 0;
		background: #464646;
		border-top: solid 1px #999;
		display: none; /* visibility will be toggled with jquery */
	}
	#nav_below_header.js_on ul.menu li {
		clear: both;
		float: none;
		margin: 15px 0 5px 10px;
		padding:0 5px;
	}
	#nav_below_header.js_on ul.menu a, 
	#nav_below_header.js_on ul.menuul a {
		font: inherit;
		background: none;
		display: inline;
		padding: 0;
		color: #fff;
		border: none;
	}
	#nav_below_header.js_on  a:hover, 
	#nav_below_header.js_on  li:hover, 
	#nav_below_header.js_on  .sub-menu,
	#nav_below_header.js_on ul.menu a:hover, 
	#nav_below_header.js_on ul.menu ul a:hover {
		background: #464646;
		color: #ccc;
	}
	
	/* dropdown */
	#nav_below_header.js_on ul.menu ul {
		width: auto;
		position: static;
		display: none;
		border: none;
		background: inherit;
	}
	
	#nav_below_header.js_on .menu li:hover > ul {
		display: none; /* show dropdown on hover */
	}
	
	#nav_below_header.js_on ul.menu ul li {
		margin: 15px 0 3px 15px;
	}
	
	/* Don't show sub sub menus on mobile */
	#nav_below_header.js_on ul.menu ul ul {
		display:none!important;
	}
	
	#nav_below_header.js_on ul.menu ul li:hover > ul {
	display:none; /* show dropdown on hover */
	}
	
	#nav_below_header.js_on ul.menu li .handle {
		background:url(../../../images/mobile_nav_handle.png) no-repeat;
		width:20px; height:20px;
		margin-right:10px;
		float:right;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	
	#nav_below_header.js_on ul.menu li .handle.active {
		-moz-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
	}
	

}