@charset "UTF-8";
/*------------------------------------*\
	CONTENTS
\*------------------------------------*/
/*
RESET
SHARED
CLEARFIX
MAIN
HEADER
FOOTER
LOGO
NAV
MASTHEAD
ISLAND
TYPE
BUTTONS
PROMO
IMAGES
SPRITES
TABLES
CAROUSEL
FEATURE-LIST
RESPONSIVE
MISC
*/





/*------------------------------------*\
	$RESET
\*------------------------------------*/
/*
A more considered reset; more of a restart...
*/
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;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
}
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;
}





/*------------------------------------*\
	$SHARED
\*------------------------------------*/
/* Common margin-bottom for vertical rhythm. */
h1,h2,h3,h4,h5,h6,
ul,ol,dl,
p,
table,
form,
pre,
hr,
.header,
.source{
	margin-bottom:40px;
	margin-bottom:3.333rem;
}
.logo,
.site-nav,
.footer p{
	margin-bottom:1.5em;
}

/* Shared font */
h1,h2,h3{
	font-family:franklin-gothic-comp-urw, "Franklin Gothic Compressed", sans-serif;
	font-weight:700;
	line-height:1;
	text-transform:uppercase;
	text-shadow:1px 1px 0 #fff,2px 2px 0 #000;
}
h4,h5,h6,
dt,
.site-nav,
.sub-nav,
.tagline,
.btn{
	font-family:franklin-gothic-urw , "Franklin Gothic Book", sans-serif;
	font-weight:400;
	text-transform:uppercase;
	text-shadow:none;
}

/* Default indentation value for lists etc. */
ul,ol,dd{
	margin-left:1.5em;
}

label,
.text-input,
textarea,
.btn{
	cursor:pointer;
}
.text-input:active,
.text-input:focus,
textarea:active,
textarea:focus{
	cursor:text;
}





/*------------------------------------*\
	$CLEARFIX
\*------------------------------------*/
/*
Big up @necolas: nicolasgallagher.com/micro-clearfix-hack/
*/
.wrapper:before,
.wrapper:after,
nav[role=navigation]:before,
nav[role=navigation]:after,
.cf:before,
.cf:after{
	content:"";
	display:table;
}
.wrapper:after,
nav[role=navigation]:after,
.cf:after{
	clear:both;
}
.wrapper,
nav[role=navigation],
.cf{
	zoom:1;
}





/*------------------------------------*\
	$MAIN
\*------------------------------------*/
html{
	font:0.75em/1.666 Georgia, serif; /* 12px with 20px baseline. */
	color:#000;
	background:url(../img/css/page/bg.png) #efece3;
	overflow-y:scroll;
	max-width:640px;
	padding:0 1em;
	margin:0 auto;
}





/*------------------------------------*\
	$HEADER
\*------------------------------------*/
.header{
	text-align:center;
}





/*------------------------------------*\
	$FOOTER
\*------------------------------------*/
.footer h4{
	margin-bottom:0;
}





/*------------------------------------*\
	$LOGO
\*------------------------------------*/
.logo{
	display:block;
	text-align:center;
	margin-right:auto;
	margin-left:auto;
}





/*------------------------------------*\
	$NAV
\*------------------------------------*/
/*
The nav abstraction: csswizardry.com/2011/09/the-nav-abstraction/
*/
.nav{
	list-style:none;
	margin-left:0;
}
	.nav li{
		display:inline;
	}
	.nav a{
		display:inline-block;
		margin-left:5%;
	}
	.nav li:first-child a{
		margin-left:0;
	}

/*--- SITE-NAV ---*/
.site-nav{
	font-size:16px;
	font-size:1.333rem;
	line-height:2;
}
	.site-nav span{
		color:#858283;
	}
	.site-nav a:hover{
		text-decoration:none;
	}
		.site-nav a:hover span{
			color:#fff;
		}
		
/*--- SUB-NAV ---*/
.sub-nav,
.site-nav span{
	font-size:14px;
	font-size:1.166rem;
}





/*------------------------------------*\
	$MASTHEAD
\*------------------------------------*/





/*------------------------------------*\
	$ISLAND
\*------------------------------------*/
/*
The island object: csswizardry.com/2011/10/the-island-object/
*/
.island{
	padding:1em;
	background-color:#000;
	color:#fff;
}
	.island a{
		color:#fff;
	}
	/* Remove margin from the last item in a box to avoid compounded padding+margin spacings. */
	.island > :last-child{
		margin-bottom:0;
	}





/*------------------------------------*\
	$TYPE
\*------------------------------------*/
/*--- HEADINGS ---*/
h1,.alpha{
	font-size:60px;
	font-size:5rem;
	margin-bottom:0;
}
h2,.beta{
	font-size:30px;
	font-size:2.5rem;
}
h3,.gamma{
	font-size:20px;
	font-size:1.666rem;
}
h4,.delta{
	font-size:16px;
	font-size:1.333rem;
}
h5,.epsilon{
	font-size:Xpx;
	font-size:Xrem;
}
h6,.zeta{
	font-size:Xpx;
	font-size:Xrem;
}
.tagline{
	font-size:20px;
	font-size:1.666rem;
}

/*--- LINKS ---*/
a:hover{
	text-decoration:underline;
}

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

/*--- QUOTES ---*/
/*
Big up @boblet: html5doctor.com/blockquote-q-cite/
*/
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:-40px;
	margin-top:-3.333rem;
}
.source:before{
	content:"—";
}

/*--- MISC ---*/
small{
	font-style:italic;
	font-size:11px;
	font-size:0.916rem;
}





/*------------------------------------*\
	$BUTTONS
\*------------------------------------*/
.btn{
	font-size:16px;
	font-size:1.333rem;
	display:inline-block;
	line-height:1;
	background-color:#000;
	color:#efece3;
	padding:1em;
}
	.btn:after{
		content:" »";
	}





/*------------------------------------*\
	$PROMO
\*------------------------------------*/
.promo{
	font-size:18px;
	font-size:1.5rem;
	line-height:2.222; /* 40px */
	padding:1em;
	border:2px solid #aeaeae;
	border-width:2px 0;
}





/*------------------------------------*\
	$IMAGES
\*------------------------------------*/
img{
	max-width:100%;
	height:auto;
	font-style:italic; /* csswizardry.com/2011/06/styling-alt-text-on-images/ */
}





/*------------------------------------*\
	$SPRITES
\*------------------------------------*/
/*
So, as nasty as this looks, it's actually super handy for quickly creating sprited elements and minimising http requests!
*/
.s{
	display:inline-block;
	position:relative;
	line-height:1;
	background-image:url(../img/css/sprites/main.png);
}
.s.star{
	background-position:0 0;
	width:58px;
	height:58px;
}
.s.shield{
	background-position:-58px 0;
	width:51px;
	height:51px;
}
.s.house{
	background-position:0 -58px;
	width:57px;
	height:50px;
}
.s.buildings{
	background-position:-57px -58px;
	width:51px;
	height:58px;
}





/*------------------------------------*\
	$TABLES
\*------------------------------------*/
table{
	width:100%;
}





/*------------------------------------*\
	$CAROUSEL
\*------------------------------------*/
/*
Fluid carousel: csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/
*/
.carousel{
    overflow:hidden;
    width:100%;
}
.panes{
	margin-left:0;
    list-style:none;
    position:relative;
    width:500%; /* Number of panes * 100% */
    overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */
     
    -moz-animation:carousel 30s infinite;
    -webkit-animation:carousel 30s infinite;
	animation:carousel 30s infinite;
}
.panes > li{
    position:relative;
    float:left;
    width:20%; /* 100 / number of panes */
}
.panes > li > a{
    display:block;
}
.carousel img{
    display:block;
	background-color:#000;
	/* Borders on responsive images: csswizardry.com/2011/07/borders-on-responsive-images/ */
	padding:1%;
    width:98%;
    max-width:98%;
}
.carousel h2{
	font-size:1em;
    padding:0.5em;
    position:absolute;
    right:10px;
    bottom:10px;
    left:10px;
    text-align:right;
    color:#fff;
    background-color:rgba(0,0,0,0.75);
}

@-moz-keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
}

@-webkit-keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
}

@keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
}





/*------------------------------------*\
	$FEATURE-LIST
\*------------------------------------*/
.feature-list{
	list-style:none;
	margin-left:0;
}
	.feature-list h2{
		margin-bottom:0;
	}
	.feature-list a{
		color:inherit;
		border-bottom:2px solid #767570;
	}





/*------------------------------------*\
	$RESPONSIVE
\*------------------------------------*/
/* Let's go big! */
@media(min-width: 481px){
html{
	max-width:none;
	padding:0;
}

.wrapper{
	max-width:940px;
	padding:10px;
	margin:0 auto;
}

/*--- GRIDS ---*/
/*
Created with csswizardry.com/fluid-grids/
*/
.grids{
	width:auto;
	max-width:960px;
	clear:both;
	margin:0 0 0 -2.083%;
	list-style:none; /* So we can make grids out of lists. */
	overflow:hidden; /* Clear the floats */
}

[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% }

/*--- MEDIA BLOCK ---*/
/*
Based on @stubbornella’s media object: www.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:1.5em;
	}
	.media .body{
		overflow:hidden;
		margin-bottom:0;
	}

/*--- HEADER ---*/
.header,
.logo{
	text-align:left;
}
.logo{
	margin:0 1.5em 0 0;
	float:left;
}
.logo,
.header .nav{
	line-height:1;
	margin-bottom:0;
}
nav[role=navigation]{
	padding-top:12px; /* Dreadful, horrible hard coding. I'm sorry, but I had to! */
	padding-top:1rem;
	overflow:hidden;
}
.site-nav{
	text-transform:uppercase;
}
	.site-nav a{
		padding-left:1%;
		margin-left:4%;
		border-left:medium double #373737;
	}
	.sub-nav a{
		margin-left:1%;
		border-left:none;
	}
	.site-nav span{
		display:block;
	}
.masthead{
	background-position:right top;
	background-repeat:no-repeat;
}
	.page-home .masthead{
		background-image:url(../img/css/masthead/drop.png);
		/* Unfortunately these next two numbers need to be hard-coded based on the image you want to use. */
		min-height:205px;
		padding-right:150px;
	}

/*--- MISC ---*/
.desktop-accessibility	{ position:absolute; left:-99999px; }
}

@media(max-width:950px){
nav[role="navigation"]{
	clear:both;
}
}





/*------------------------------------*\
	$MISC
\*------------------------------------*/
/*
Some nasty horrible classes to make your life easier ;)
*/
.text-center	{ text-align:center; }
.accessibility	{ position:absolute; left:-99999px; }