/*
* ColorLabs Responsive Layout Framework
* Copyright 2011, ColorLabs
* www.colorlabsproject.com
*/

/* #Base 978 Grid
================================================== */

	.container                { position: relative; padding: 0 15px; }
	.row                      { margin:0 auto; max-width:978px; min-width:420px; width:100%; margin-bottom:20px }

	.col1, .col2, .col3, .col4, .col5, .col6, 
	.col7, .col8, .col9, .col10, .col11, .col12 { float: left; display: inline; position:relative; min-height:1px; margin-left:3.08% }
	.col1:first-child, .col2:first-child, .col3:first-child, .col4:first-child, .col5:first-child, .col6:first-child, 
	.col7:first-child, .col8:first-child, .col9:first-child, .col10:first-child, .col11:first-child, .col12:first-child,
	.alpha								     { margin-left: 0; }

	/* Base Grid */
	.col1                       { width:5.5% }
	.col2                       { width:14.1% }
	.col3                       { width:22.69% }
	.col4                       { width:31.08% }
	.col5                       { width:39.87% }
	.col6                       { width:48.46% }
	.col7                       { width:57% }
	.col8                       { width:65.6% }
	.col9                       { width:74% }
	.col10                      { width:82.8% }
	.col11                      { width:91.4% }
	.col12                      { width:100% }
	.one-third                  { width:33.3% }

	/* Flexible images */
	.column > img					{ max-width:100%; max-height:100%; display:block }

/* #Tablet (Portrait)
================================================== */

	@media only screen and (min-width: 768px) and (max-width: 959px) {
	}

/*  #Mobile (Portrait)
================================================== */
	
	@media only screen and (max-width: 767px) {
		.row > .column					{ border:none; margin-left:0 }
		.row							{ max-width:767px; min-width:0 }
		.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { margin-left:0; width:100% }

		.row  > .col1, .row > .col2, .row > .col3, .row > .col4, .row > .col5, .row > .col6,
		.row > .col7, .row > .col8, .row > .col9, .row > .col9, .row > .col10, .row > .col11, .row > .col12 { width: 100%; }
		
	}

/*  #Mobile (Landscape)
================================================== */
	
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
	}

/* #Clearing
================================================== */

		.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

		/* Use clearfix class on parent to clear nested columns,
		or wrap each row of columns in a <div class="row"> */
		.clearfix:before,
		.clearfix:after,
		.row:before,
		.row:after {
			content: '\0020';
			display: block;
			overflow: hidden;
			visibility: hidden;
			width: 0;
			height: 0; }
		.row:after,
		.clearfix:after {
			clear: both; }
		.row,
		.clearfix {
			zoom: 1; }
		.row { clear:both }

		/* You can also use a <br class="clear" /> to clear columns */
		.clear {
			clear: both;
			display: block;
			overflow: hidden;
			visibility: hidden;
			width: 0;
			height: 0;
		}

/* #Class Helper
================================================== */
	
	/* Floating */
	.fl, .fr { display:inline }
	.fl { float:left }
	.fr { float:right }

	/* Aligning */
	.align-center { text-align:center }

/* #Reset (Inspired by E. Meyers)
================================================== */
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; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
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; }
