@charset "UTF-8";
/*------------------------------------*\
	BASE.CSS
\*------------------------------------*/
/*
Author: Andrea M Rawlings            
Project URL: http://staging.howlonghaveibeenon.com/       
Version: 1.0           
Date: Nov 12, 2011              


*/

/*------------------------------------*\
	RESET
\*------------------------------------*/
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{
	overflow-y:scroll; /* Force scrollbars 100% of the time */
	font-size:75%; /* Use 16px as per http://www.informationarchitects.jp/en/100e2r/ and http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ */
	line-height:1.5;
	background:#d6dbdc;
	color:#333;
}

body{
	min-height:100%;
	text-align: center;
}

h2, h3, h4, h5, h6, body, input, textarea {font-family: Verdana, Geneva, sans-serif;}

.container {
	position: relative;
	width:940px;
	padding:0 10px;
	margin:0 auto;
	text-align: left;
}

/*------------------------------------*\
	GRIDS
\*------------------------------------*/
/*
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{
	margin-left:-20px;
	overflow:hidden;
	clear:both;
}
ul.grids,
.cols-12 ul.grids{
	/* So we can make grids out of lists */
	margin:0 0 0 -20px;
	list-style:none;
}
.grid{
	float:left;
	margin:0 20px 0 0;
}
.grids .grid{
	margin:0 0 0 20px;
}

/*
Grid sizes based on 960.gs by @nathansmith
For the sake of file-size and load-time please delete all CSS pertaining to the grid system you aren’t using.
The ability to use one of two different grid systems from the same file means there is a lot of code needed to alter intricate styles--look out for lists!
*/


.grid-1		{ width:60px; }
.grid-2		{ width:140px; }
.grid-3		{ width:220px; }
.grid-4		{ width:300px; }

.grid-5		{ width:380px; }
.grid-6		{ width:460px; }
.grid-7		{ width:540px; }
.grid-8		{ width:620px; }

.grid-9		{ width:700px; }
.grid-10	{ width:780px; }
.grid-11	{ width:860px; }





/*------------------------------------*\
	LOGO
\*------------------------------------*/
#logo,
#logo a{
	display:block;
	width:515px;
	height:92px;
	text-indent:-99999px;
	overflow: hidden;
}
#logo{
	background:url(images/hdr_title.png) no-repeat center bottom;
}
#logo:hover{
	/* Hover states 
	background-position:0 -00px;*/
}


/*------------------------------------*\
	TYPE
\*------------------------------------*/
/*--- HEADINGS ---*/
h1{
	font-size:2em;			/* 32px */
	margin-bottom:0.75em;	/* 24px */
	line-height:1.5;		/* 48px */
}
h2{
	font-size:1.5em;		/* 24px */
	margin-bottom:1em;		/* 24px */
	line-height:1;			/* 24px */
}
h3{
	font-size:1.25em;		/* 20px */
	margin-bottom:1.2em;	/* 24px */
	line-height:1.2;		/* 24px */
}
h4{
	font-size:1.125em;		/* 18px */
	margin-bottom:1.333em;	/* 24px */
	line-height:1.333;		/* 24px */
}
h5{
	font-weight:bold;
}
h5,
h6{
	font-size:1em;			/* 16px */
	margin-bottom:1.5em;	/* 24px */
	line-height:1.5;		/* 24px */
}

h1,h2,h3,h4,h5,h6 {font-weight: normal; color: #111; }

h1 {font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 {font-size: 2em; margin-bottom: 0.75em; }
h3 {font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 {font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 {font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 {font-size: 1em; font-weight: bold; }

h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
  margin: 0;
}


/*--- PARAGRAPHS ---*/
p{
	margin:0 0 0 1.5em;
}
/*
Mo’ robust paragraph indenting: http://csswizardry.com/2010/12/mo-robust-paragraph-indenting/
Uncomment to activate
p+p{
	text-indent:2em;
	margin-top:-1.5em;
}
*/

/*--- LINKS ---*/
/*
Say no to negative hovers!
A negative hover is one whose appearance is subtracted from on hover rather than added to.
*/
a{
	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 60px;
}
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;
}
/*
I personally love this next one. Create a list of keywords by adding a single class to a <ul>:
*/
.keywords{
	list-style:none;
	margin:0 0 1.5em;
}
.keywords li{
	display:inline;
	text-transform:lowercase;
}
.keywords li:first-of-type{
	text-transform:capitalize;
}
.keywords li:after,
.keywords li::after{
	content:", ";
}
.keywords li:last-of-type:after,
.keywords li:last-of-type::after{
	content:".";
}

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

/*--- CODE ---*/
pre,
code{
	font-family:monospace;
	font-size:1em;
}
pre{
	overflow:auto;
	margin-bottom:1.5em;
	line-height:24px; /* Having to define explicit pixel values :( */
}
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 0 0; }
img.right	{ margin:0 0 0 20px; }

/*--- FLASH/VIDEO ---*/
object,
embed,
video{
	max-width:100%;
	height:auto;
}





/*------------------------------------*\
	FORMS
\*------------------------------------*/
/*
Unfortunately, and somewhat obviously, forms don’t fit the baseline all too well. Perhaps in a later version...
*/
fieldset{
	padding:10px;
	border:1px solid #ccc;
	margin-bottom:1.5em;
}
label{
	display:block;
	cursor:pointer;
}
label:after,
label::after{
	content:":";
}
input,
textarea{
	font-family:inherit;
	font-size:1em;
	line-height:1.5;
}
.check-list{
	width:100%;
	overflow:hidden;
	list-style:none;
	margin:0 0 1.5em 0;
}
.cols-12 .check-list{
	/* Change to suit 12 col version */
	margin-left: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
\*------------------------------------*/
/*
Unfortunately, and somewhat obviously, tables don’t fit the baseline all too well. Perhaps in a later version...
*/
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
\*------------------------------------*/
/*
Unfortunately feedback messages don’t fit the baseline all too well. Perhaps in a later version...
*/
.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 particular order, so we spoof it by putting numbers on an unordered list */
	padding:10px 10px 10px 56px;
}
.cols-12 ul.message{
	/* Change to suit 12 col version */
	margin-left:0;
}
.error{
	border-color:#fb5766;
	background: #fab;
}
.success{
	border-color:#83ba77;
	background: #d1feba;
}
.info{
	border-color:#85a5be;
	background: #c4dbec;
}
.warning{
	border-color:#d8d566;
	background: #fef8c4;
}





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





/*------------------------------------*\
	CLASSES
\*------------------------------------*/
/*
Some not-too-pretty and insementic classes to do odd jobs.
*/
.left	{ float:left; }
.right	{ float:right; }
.clear	{ clear:both; float:none; }

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

.clearTop {margin-top: 0;}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
}

.small {font-size: .8em; margin-bottom: 1.875em; line-height: 1.5em;}
.large {font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em;}

.quiet      {color: #666;}
.loud       {color: #000;}
.highlight  {background:#ff0;}
.added      {background:#060; color: #fff;}
.removed    {background:#900; color: #fff;}

.first      {margin-left:0; padding-left:0;}
.last       {margin-right:0; padding-right:0;}
.top        {margin-top:0; padding-top:0;}
.bottom     {margin-bottom:0; padding-bottom:0;}

.hide,
.hidetext span	{display: none;}


