/*------------------------------------*\
	INUIT.CSS
\*------------------------------------*/
/*
Author:			Harry Roberts
Twitter:		@inuitcss
Author URL:		csswizardry.com
Project URL:	inuitcss.com
Version:		1.1
Codename:		Eskimo
Date:			April 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://www.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
\*------------------------------------*/
@charset "UTF-8";
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
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;
}

table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{ 
	border:0;
}
address,caption,cite,dfn,th,var{
	font-style:normal;
	font-weight:normal;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}





/*------------------------------------*\
	MAIN
\*------------------------------------*/
html{
	height:101%; /* Force scrollbars 100% of the time */
	font-size:87.5%; 
	font-family: Tahoma, Geneva, "Helvetica Neue", Arial, sans-serif; 
	color:#000;
	line-height:1.5;
}
body{
	width:820px;
	min-height:100%;
	padding:0 0 20px;
	margin:0 auto;
	background:url(images/bkg-body-2.jpg);
}
body * {
}


/*------------------------------------*\
	GRID/COL
\*------------------------------------*/
.cols {
	overflow:hidden;
	clear: both;
	width: 100%;
	margin: 0 auto;
	padding: 0 30px;
}
.col {float: left;margin: 0;padding: 0 30px 0 0;}

.span_2 {width: 333px;}
.span_3 {width: 200px;}
.span_4 {width: 140px;}
.span_full {margin: 0 20px;}

/* .span_2_right {margin-left: 333px!important; } */

/*------------------------------------*\
	LOGO
\*------------------------------------*/
/*
Your logo is an image, not a h1: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/
*/
#logo,
#logo img{
	display:block;
	width:353px; /* Width of your logo in pixels (ideally a round grid-number) */
	height:87px; /* Height of your logo in pixels */
}
/* Based on the fact that we need to use an <img /> in our markup, let’s hide the actual image and use a background on the <a>--this gives us sematically sound markup and the ability to use sprites for hover effects! */
#logo{
	background:url(../images/logo.png);
}
#logo:hover{
	/* Hover states */
	background-position:0 -00px;
}
#logo img{
	position:absolute;
	left:-99999px;
}





/*------------------------------------*\
	NAV
\*------------------------------------*/
.nav{
	width:100%;
	list-style:none;
	overflow:hidden;
	margin:0;
	height: 40px;
	line-height: 34px;
}
.nav li{
	float:left;
}
	#header .nav li {
		font-size: 10px;	
	}
.nav a{
	color: #151515;
	margin: 0 4px 0 0;
}
	#header .nav a {
		font-size: 12px;
	}
/*
http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/
Add a class of centred/centered to create a centred nav.
*/
.nav.centred,
.nav.centered{
	text-align:center;
}
.nav.centred li,
.nav.centered li{
	display:inline;
	float:none;
}
.nav.centred a,
.nav.centered a{
	display:inline-block;
}





/*------------------------------------*\
	TYPE
\*------------------------------------*/
/*--- HEADINGS ---*/
h1{
	font-size:1.75em;		
	margin-bottom:0.75em;	
	line-height:0.75;		
}
h2{
	font-size:1.5em;		
	margin-bottom:1em;		
	line-height:1;			
}
h3{
	font-size:1.25em;		
	margin-bottom:1.2em;	
	line-height:1.2;		
}
h4{
	font-size:1.125em;		
	margin-bottom:1.333em;	
	line-height:1.333;		
}
h5{
	font-weight:bold;
}
h5,
h6{
	font-size:1em;			
	margin-bottom:1.5em;	
	line-height:1.5;		
}

/*--- PARAGRAPHS ---*/
p{
	margin-bottom:1.5em !important;
}

/*--- LINKS ---*/
a{
	color: #8b8b8b;
	text-decoration:none;
}
a:visited{
	opacity:0.8; /* A bit generic, but it’s a bare minumum... */
}
a:hover{
	text-decoration:underline;
}
a:active,
a:focus{
	/* Give clicked links a depressed effect. */
	position:relative;
	top:1px;
}

/*--- LISTS ---*/
ul,
ol{
	margin:0 0 1.5em 25px;
	line-height: 1.714;
}
ul ul,
ol ol,
ul ol,
ol ul{
	/* Let’s take care of lists in lists */
	margin:0 0 0 60px;
}
dl{
	margin-bottom:1.5em;
}
dt{
	font-weight:bold;
}
dt:after,
dt::after{
	content:":";
}
dd{
	margin-left:60px;
}

/*--- QUOTES ---*/
blockquote{
	text-indent:-0.4em; /* Hang that punctuation */
}
blockquote b,
blockquote .source{
	/* Mark the source up with either a <b> or another element of your choice with a class of source. */
	display:block;
	text-indent:0;
}

/*--- GENERAL ---*/
q,
i,
em,
cite{
	font-style:italic;
	font-weight:inherit;
}
b,
strong{
	font-weight:bold;
	font-style:inherit;
}
mark{
	background:#ffc;
}
s,
del{
	text-decoration:line-through;
}
small{
	font-size:0.75em;
	line-height:1;
}
hr {
	border-width: 1px 0 0 0;
	color: #d7d7d7;
	margin: 25px 0;
}


/*--- CODE ---*/
pre,
code{
	font-family:monospace;
	font-size:1em;
}
pre{
	overflow:auto;
	margin-bottom:1.5em;
	line-height:24px; 
}
code{
	line-height:1;
}



/*------------------------------------*\
	IMAGES
\*------------------------------------*/
img{
	max-width:100%;
	height:auto;
	/* Give it some text styles to offset alt text */
	font-style:italic;
	color:#c00;
}
img.left	{ margin:0 20px 10px 0; }
img.right	{ margin:0 0 10px 20px; }





/*------------------------------------*\
	FORMS
\*------------------------------------*/

fieldset{
	padding:10px;
	border:1px solid #ccc;
	margin-bottom:1.5em;
}
label{
	display:block;
}
label:after,
label::after{
	content:":";
}
input,
textarea{
	font-family:inherit;
	font-size:1em;
	line-height:1.5;
	width: 200px;
}
.check-list{
	width:100%;
	overflow:hidden;
	list-style:none;
	margin:0 0 1.5em 0;
}
.check-list li{
	width:25%;
	float:left;
}
.check-label{
	display:inline;
}
.check-label:after,
.check-label::after{
	content:normal;
}
.button{
	cursor:pointer;
}
fieldset > :last-child{
	/* Remove the margin from the last element in the fieldset--this makes our padding more consistent. */
	margin:0;
}





/*------------------------------------*\
	TABLES
\*------------------------------------*/

table{
	margin-bottom:1.5em;
	width:100%;
	max-width:100%;
}
thead tr:last-of-type th{
	/* Thicker border on the table-headers of the last row in the table head */
	border-bottom-width:2px;
}
tbody th{
	/* Thicker right border on table-headers in the table body */
	border-right-width:2px;
}
th:empty{
	/* Hide the borders on any empty table-headers */
	border:none;
}
th,td{
	vertical-align:top;
	padding:0.75em;
	border:1px solid #ccc;
}
th{
	font-weight:bold;
	text-align:center
}
td[colspan]{
	/* This looks lovely, trust me... */
	text-align:center;
}
tbody tr:nth-of-type(odd){
	background:rgba(0,0,0,0.05);
}
tfoot{
	text-align:center;
}
tfoot td{
	border-top-width:2px;
}


/*------------------------------------*\
	MESSAGES
\*------------------------------------*/

.message{
	font-weight:normal;
	display:block;
	padding:10px 10px 10px 36px;
	border:1px solid #ccc;
	margin:0 0 1.5em 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.message{
	list-style:decimal outside; /* It’s also handy to number them however they might not necessarily be in a certain order, that’s why we spoof it by putting numbers on an unordered list */
	padding:10px 10px 10px 56px;
}
.error{
	border-color:#fb5766;
}
.success{
	border-color:#83ba77;
}
.info{
	border-color:#85a5be;
}
.warning{
	border-color:#d8d566;
}





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



/*------------------------------------*\
	CLASSES
\*------------------------------------*/

.left	{ float:left; }
.right	{ float:right; }
.clear	{ clear:both; float:none; }

/* clearfix */
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1;}

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

/*
These are here, but use them sensibly ;)
*/
.round			{ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
.round > .round	{ -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.letterpress	{ text-shadow:0 -1px 0 rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.25); } /* Colours may need adjustment */


/*------------------------------------*\
	LAYOUT
\*------------------------------------*/

.wrapper {
	padding: 0 20px;
	margin: 0 auto;
}
	#header .wrapper {background: url(images/bkg-header.jpg);}
	#content .wrapper {
	background: url(images/bkg-content.jpg); 
	background: url(images/bkg-shadow.png) center bottom no-repeat, 
				url(images/bkg-content.jpg);
}
	#content .wrapper {
		padding-top: 20px;
		padding-bottom: 30px;
	}
	
.container {
	padding: 0 10px;
	background: #f2f2f2;
}
	#header .container {
		padding: 10px 18px 14px;
		border-bottom: 2px solid #90929a;
		position: relative;
	}
	#content .container {
		padding: 20px 10px 1px;
		border-top: 2px solid #90929a;
	}


/*--- HEADER ---*/

#header .desc {
	font-size: 12px;
	color: #070837;
	text-align: right;
	margin: 40px 0 0;
}
#header .desc .lrg {font-size: 16px;}


/*--- FEATURE ---*/

#feature {
	padding: 20px 30px;
	background: url(images/bkg-feature.jpg) center repeat-y;
	background: url(images/bkg-feature.jpg) center repeat-y,
				url(images/bkg-feature-upper.png) top no-repeat,
				url(images/bkg-feature-lower.png) bottom no-repeat;
}
#feature .feature_img {
	width: 530px;
	height: 349px;
	float: left;
	margin: 0 20px 0 0;
	background: no-repeat;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#feature .feature_links {
	list-style: none;
	margin: 0;
	float: left;
}
#feature .button {
	font-size: 114.3%;
	color: #f2f2f2;
	text-align: center;
	line-height: 1.1;
	display: block;
	width: 130px;
	padding: 22px 40px;
	margin: 0 0 10px;
	background: #424242;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
	#feature li:last-child .button {margin: 0;}
	#feature .button:hover {text-decoration: none;}
	#feature .button:visited {opacity: 1;} 


/*--- CONTENT ---*/

#img_slider {margin: 0 auto;height: 120px; position: relative;}

	#img_slider .ctrl {
		display: block;
		width: 17px;
		height: 100%;
		float: left;
		background: no-repeat center center url(images/slider_arrows.png);
	} 
	#img_slider .slide_prev {
		background-position: center left;
		margin: 0 10px 0 0;
	}
	#img_slider .slide_next {
		background-position: center right;
		margin: 0 0 0 10px;
	}
		
	#img_slider .slides {list-style: none; margin: 0;float: left;}
	#img_slider .slides .item {float: left;margin: 0 10px;}

/* SIDE SCROLL STYLES */
	div#scrollbox { height: 160px; position: absolute; overflow: hidden; top: 0; left: 30px; right: 0;}
	div#scrollbox div#bigbox {width: 1000%}
	div#scrollbox div#bigbox div.block {width: 920px; height: 160px; float: left;} 
	
	#moveRight {position: absolute; right: 0; z-index: 99;}


/*--- FOOTER ---*/

#footer {
	font-size: 85.7%;
	text-align: center;
	color: #676767;
	padding: 10px 0 15px 0;
}