/* ----------------------------------------------------------------------------
TITLE: Core Stylesheet
AUTHOR: HCC Development
URL: http://hccdevelopment.com/
	
	DESCRIPTION: Core stylesheet that contaings base reset, structure, 
	and typography styles.
	
	TABLE OF CONTENTS
		Base Reset
		HTML & Typography CSS
		Grid/Page Structure

CREATED: 2007.04.18
MODIFIED: 2011.11.22
-------------------------------------------------------------------------------
TITLE: Base Reset v2.0b2 | 201101
AUTHOR: Eric Meyer
URL: http://meyerweb.com/
	
	DESCRIPTION: Reset styles on elements. Inspired by YUI Library, 
	Eric Meyer's "Reset Reloaded"
	http://meyerweb.com/eric/tools/css/reset/
	http://html5doctor.com/html-5-reset-stylesheet/
---------------------------------------------------------------------------- */
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, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.0;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

hr {
	clear: both;
	float: none;
	margin: 0 0 17px;
	border: none;
	width: 100%;
	height: 1px;
	color: #ccc;
	background: #ccc;
}

input, select {
	vertical-align: middle;
}



/* ----------------------------------------------------------------------------
	=Layout/Grid
---------------------------------------------------------------------------- */
/* Containers
---------------------------------------------------------------------------- */
.container-8					{ margin-left: auto; margin-right: auto; width: 920px; }


/* Grid >> Global
---------------------------------------------------------------------------- */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8							{  position: relative; display: inline; float: left; margin-left: 10px; margin-right: 10px; }

.push-1, .pull-1,
.push-2, .pull-2,
.push-3, .pull-3,
.push-4, .pull-4,
.push-5, .pull-5,
.push-6, .pull-6,
.push-7, .pull-7,
.push-8, .pull-8 				{ position: relative; }


/* Grid >> Children (Alpha ~ First, Omega ~ Last)
---------------------------------------------------------------------------- */
.alpha							{ margin-left: 0; }
.omega							{ margin-right: 0; }


/* Grid >> 8 Columns
---------------------------------------------------------------------------- */
.container-8 .col-1				{ width: 95px; }
.container-8 .col-2				{ width: 210px; }
.container-8 .col-3				{ width: 325px; }
.container-8 .col-4				{ width: 440px; }
.container-8 .col-5				{ width: 555px; }
.container-8 .col-6				{ width: 670px; }
.container-8 .col-7				{ width: 785px; }
.container-8 .col-8				{ width: 900px; }


/* Prefix Extra Space >> 8 Columns
---------------------------------------------------------------------------- */
.container-8 .prefix-1 			{ padding-left: 115px; }
.container-8 .prefix-2			{ padding-left: 230px; }
.container-8 .prefix-3 			{ padding-left: 345px; }
.container-8 .prefix-4 			{ padding-left: 460px; }
.container-8 .prefix-5 			{ padding-left: 575px; }
.container-8 .prefix-6 			{ padding-left: 690px; }
.container-8 .prefix-7			{ padding-left: 805px; }


/* Suffix Extra Space >> 8 Columns
---------------------------------------------------------------------------- */
.container-8 .suffix-1			{ padding-right: 115px; }
.container-8 .suffix-2			{ padding-right: 230px; }
.container-8 .suffix-3			{ padding-right: 345px; }
.container-8 .suffix-4			{ padding-right: 460px; }
.container-8 .suffix-5			{ padding-right: 575px; }
.container-8 .suffix-6			{ padding-right: 690px; }
.container-8 .suffix-7			{ padding-right: 805px; }


/* Push Space >> 8 Columns
---------------------------------------------------------------------------- */
.container-8 .push-1			{ left: 115px; }
.container-8 .push-2			{ left: 230px; }
.container-8 .push-3			{ left: 345px; }
.container-8 .push-4			{ left: 460px; }
.container-8 .push-5 			{ left: 575px; }
.container-8 .push-6			{ left: 690px; }
.container-8 .push-7			{ left: 805px; }


/* Pull Space >> 8 Columns
---------------------------------------------------------------------------- */
.container-8 .pull-1 			{ left: -115px; }
.container-8 .pull-2 			{ left: -230px; }
.container-8 .pull-3 			{ left: -345px; }
.container-8 .pull-4 			{ left: -460px; }
.container-8 .pull-5 			{ left: -575px; }
.container-8 .pull-6 			{ left: -690px; }
.container-8 .pull-7 			{ left: -805px; }



/* ----------------------------------------------------------------------------
TITLE: HTML & Typography CSS
	
	DESCRIPTION: Controls base HTML styling and typography. Our goal is to keep a 
	consistent vertical rhythm and baseline grid.
	
	More about these techniques can be found at:
	* < http://www.alistapart.com/articles/settingtypeontheweb >
	* < http://24ways.org/2006/compose-to-a-vertical-rhythm >
	* < http://www.markboulton.co.uk/journal/comments/incremental_leading/ >
---------------------------------------------------------------------------- */
/*	=SECTIONS
---------------------------------------------------------------------------- */
html								{ font-size: 100.01%; }

/* Default 13/px fonts with 18/px line-height */
body								{ color: #000; font: normal normal normal 13px/16px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; background-color: #fff; }

h1									{ margin-bottom: 18px; font-size: 36px; line-height: 36px; }
h2									{ margin-bottom: 0; font-size: 25px; line-height: 36px; }
h3									{ margin-bottom: 0; font-size: 20px; line-height: 36px; }
h4									{ margin-bottom: 18px; font-size: 15px; line-height: 18px; }
h5									{ margin-bottom: 0; font-size: 15px; font-weight: normal; }
h6									{ margin-bottom: 0; font-size: 13px; font-style: italic; }

/* Remove margins on images inside headings */
h1 img,
h2 img,
h3 img,
h4 img,
h5 img,
h6 img								{ margin: 0; }

address								{ font-style: italic; }


/*	=GROUPING CONTENT
---------------------------------------------------------------------------- */
p									{ margin-bottom: 18px; }
	p img,
	p img.left							{ float: left; margin: 0 10px 18px 0; }
	p img.right							{ float: right; margin: 0 0 18px 10px; }
	/* Reduced type size with incremental leading
	(http://www.markboulton.co.uk/journal/comments/incremental_leading/)

	This could be used for side notes. For smaller type, you don't necessarily want to
	follow the 1.5x vertical rhythm -- the line-height is too much.

	Using this class, it reduces your font size and line-height so that for
	every four lines of normal sized type, there is five lines of the sidenote. eg:

	New type size in em's:
	11px (wanted side note size) / 13px (existing base size) = 0.8461 (new type size in ems)

	New line-height value:
		13px x 1.3846 = 18px (old line-height)
		18px x 4 = 72px
		72px / 5 = 14.4px (new line height)
		14.4px / 11px = 1.27 (new line height in em's) */
	p.incr,
	.incr p								{ font-size: 11px; line-height: 14px; }

pre									{ margin: 18px 0 0; font: 11px 'andale mono', 'lucida console', monospace; line-height: 18px; white-space: pre; }

ol									{ list-style: decimal; }

ul									{ list-style: square; }

li									{ margin-left: 40px; line-height: 18px; }
	li ol,
	li ul								{ margin: 9px 0; }

dl									{ }
	dt									{ font-weight: bold; }
	dd									{ margin-left: 40px; }


/*	=TEXT-LEVEL SEMANTICS
---------------------------------------------------------------------------- */
em,
cite								{ font-style: italic; }

strong								{ font-weight: bold; }

small								{ font-size: 10px; }

code,
var,
samp,
kbd									{ font: 11px 'andale mono', 'lucida console', monospace; line-height: 18px; }

sup,
sub									{ font-size: 10px; line-height: 0; }
sup									{ vertical-align: text-top; }
sub									{ vertical-align: text-bottom; }

i									{ font-style: italic; }
b									{ font-weight: bold; }


/*	=EMBEDDED CONTENT
---------------------------------------------------------------------------- */
/* Remove that pesky whitespace below images, remember to float or provide width */
img									{ display: block; }


/*	=SPACING >> Adjust to match line-height
---------------------------------------------------------------------------- */
address,
p,
pre,
blockquote,
ol,
ul,
dl,
table,
form,
fieldset,
.box,
.module								{ margin-bottom: 18px; }


/*	=LINE-HEIGHTS >> Reset line-heights on inline elements to combatinheritance
---------------------------------------------------------------------------- */
a,em,strong,small,cite,dfn,abbr,
time,code,var,samp,kbd,i,b,mark,
ruby,rt,rp,bdo,span,ins,del			{ line-height: 1.0; }


/*	=CLEARING
---------------------------------------------------------------------------- */
/* http://sonspring.com/journal/clearing-floats */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix:after {
	clear: both;
}