/*!
 *  yogacss 1.0
 *  A responsive, flexible, css grid system for desktop, tablet and phone
 *  -------------------------------------------------------
 *  Usage examples and documentation be found at: 
 *	http://yogacss.com -or- http://onesmallpixel.com/yogacss
 *
 *  License
 *  -------------------------------------------------------
 *  - yogacss CSS files are licensed under the MIT License -
 *    http://opensource.org/licenses/mit-license.html
 *  - yogacss documentation licensed under CC BY 3.0 License -
 *    http://creativecommons.org/licenses/by/3.0/
 *  - Attribution is not required but much appreciated:
 *    "yogacss by Jordan Roberts - http://yogacss.com"
 *
 *  Contact
 *  -------------------------------------------------------
 *  Twitter: http://twitter.com/superherogeek
 *  Web: yogacss.com or onesmallpixel.com
 */
/* GLOBAL styles */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, 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;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

body {
	padding:0;
	margin:0;}
img {
	max-width:100%;}
iframe, embed {
/*	max-width: 97.916666666667%;*/
/*	margin: 2.083333333333% 1.04166666667%;*/
	/*max-height: 100%;*/}

/* Float an object right or left*/
.right {
	float: right !important;
}
.left {
	float: left !important;
}
.yoga.no-pad-top {
	padding-top: 0 !important;}


/* fancy transitions on text sizes*/
body,h1,h2,h3,h4,h5,p,span,div,small{
	/*transition: font-size 100ms linear;*/}
/**
 * Micro Clearfix
 * http://nicolasgallagher.com/micro-clearfix-hack/
 */
.yoga:before,
.cf:before,
.yoga:after,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.yoga:after,
.cf:after {
    clear: both;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
 .yoga,
.cf {
    *zoom: 1;
}
/*----------------------------*/	
/* Flexible Grid - Starting at 1024 X 768 ----------- */

	/* Container */
		.yoga {
			margin:0 auto;
			width:93.75%; /* (960px) / 1024 => 1024w x 768h is a common screen resolution */
			padding-top: 1.04166666667%; /* (10px)/960 (10px)/960 */
			text-align: left;}
		
	/* Margins */
		.desk-1, .desk-2, .desk-3, .desk-4,
		.desk-5, .desk-6, .desk-7, .desk-8,
		.desk-9, .desk-10, .desk-11, .desk-12 {
			margin: 0 1.04166666667%; /* 0px (10px)/960 (10px)/960 (10px)/960 */
			margin-bottom:1.04166666667%;
			float:left;}
	/* Edge to Edge - Switch "Margins" to "Padding" so the background color can go edge to edge */
		.edge {
			margin:0;
			padding: 0 1.04166666667%; /* 0px (10px)/960 (10px)/960 (10px)/960 */
			padding-bottom:1.04166666667%;	
		}
	/* Nested Margins */
		.nest-1, .nest-2, .nest-3, .nest-4,
		.nest-5, .nest-6, .nest-7, .nest-8,
		.nest-9, .nest-10, .nest-11, .nest-12 {
			margin: 0 1.04166666667% 0; /* 0px (10px)/960 (10px)/960 (10px)/960 */
			margin-bottom:1.04166666667%;
			float:left;}
		
		.nest-1.cf, .nest-2.cf, .nest-3.cf, .nest-4.cf,
		.nest-5.cf, .nest-6.cf, .nest-7.cf, .nest-8.cf,
		.nest-9.cf, .nest-10.cf, .nest-11.cf {		
			margin-right: 0;
			/*margin-left: 2.08333333334%;*/
		}
	/* Columns */	
		.desk-1, .nest-1 {
			width: 6.25%; /* (60px) / 960 = */}
		
		.desk-2, .nest-2 {
			width: 14.5833333333%; /* (140px) / 960 = */}
		
		.desk-3, .nest-3 {
			width: 22.9166666667%; /* (220px) / 960 = */}
		
		.desk-4, .nest-4 {		
			width: 31.25%; /* (300px) / 960 = 31.25% */}
		
		.desk-5, .nest-5 {
			width: 39.5833333333%; /* (380px) / 960 = */}
		
		.desk-6, .nest-6 {
			width: 47.9166666667%; /* (460px) / 960 = */}
		
		.desk-7, .nest-7 {
			width: 56.25%; /* (540px) / 960 = */}
		
		.desk-8, .nest-8 {
			width: 64.583333333%; /* 620px / 960px */}
		
		.desk-9, .nest-9 {
			width: 72.9166666667%; /* (700px) / 960 = */}
		
		.desk-10, .nest-10 {
			width: 81.25%; /* (780px) / 960 = */}

		.desk-11, .nest-11 {
			width: 89.5833333333%; /* (860px) / 960 = */}

		.desk-12, .nest-12 {
			width: 97.9166666667%; /* (940px) / 960 = */
			float:none; }	

		.nest-12 {
			/*width: 98.9166666667%;*/
			clear:both; }
	/* Clears */
		.clear-desktop {
			clear:both;}
		/* Hide Elements at this screen size*/
			.hide-on-desktop {
				display: none;
				visibility: hidden;}

/*-------------------------*/		
/* 1600px and Above - iMac Fullscreen and TVs */
		@media only screen and (min-width : 1200px) {
		.yoga {
			margin:0 auto;
			width:960px; /* (960px) / 1024 => 1024w x 768h is a common screen resolution */
			padding-top: 1.04166666667%; /* (10px)/960 (10px)/960 */
			text-align: left;}
		}
	
/*-------------------------*/		
/* iPads and Other Tablets */
		@media only screen and (max-width : 768px) {
			body {
				font-size:95%;
			}
			
		/* Reset Grids */
			.yoga {
				margin:0 auto;
				width: 93.750%; /* (720px) / 768 Screen Rez */}
			
		/* Margins */
			.tab-1, .tab-2, .tab-3, .tab-4,
			.tab-5, .tab-6, .tab-7, .tab-8, .tab-third, .desk-12 {
				margin: 0 1.388888888%; /* (10px) / 720 */
				margin-bottom: 1.388888888%; /* (10px) / 720 */}
	/* Edge to Edge - Switch "Margins" to "Padding" so the background color can go edge to edge */
		.edge {
			margin:0;
			padding: 0 1.04166666667%; /* 0px (10px)/960 (10px)/960 (10px)/960 */
			padding-bottom:1.04166666667%;	
		}			
		/* Tablet Grids 1 - 8 */
		.tab-1 {
			width: 9.72222222222%; /* (70px) / 720 = */}
		
		.tab-2 {
			width: 22.2222222222%; /* (160px) / 720 = */}
		
		.tab-3 {
			width: 34.7222222222%; /* (250px) / 720 = */}
		
		.tab-4 {
			width: 47.222222222%; /* (340px) / 720 */}
		
		.tab-5 {
			width: 59.7222222222%; /* (430px) / 720 = */}
		
		.tab-6 {
			width: 72.2222222222%; /* (520px) / 720 = */}
		
		.tab-7 {
			width: 84.7222222222%; /* (610px) / 720 = */}
		
		.tab-8 {
		 	width: 97.222222222% !important; /* (700px) / 720 */
		 	}
		.tab-third { 
			width: 30.555555555% !important; /* (220px) / 720 - Allow for 3 columns in a 8 column span */}

		/* Just in case someone forgets to add a .tab-8 class */
		.desk-12 {
		 	width: 97.222222222%; /* (700px) / 720 */
		 	}
	/* Tablet Only Nest */
		.tnest-1, .tnest-2, .tnest-3, .tnest-4,
		.tnest-5, .tnest-6, .tnest-7, .tnest-8,
		.tnest-9, .tnest-10, .tnest-11, .tnest-12 {
			margin: 0 1.04166666667% 0 0; /* 0px (10px)/960 (10px)/960 (10px)/960 */
			margin-bottom:1.04166666667%;
			float:left;}
		
		.tnest-1.cf, .tnest-2.cf, .tnest-3.cf, .tnest-4.cf,
		.tnest-5.cf, .tnest-6.cf, .tnest-7.cf, .tnest-8.cf,
		.tnest-9.cf, .tnest-10.cf, .tnest-11.cf {		
			margin-right: 0;
			margin-left: 2.08333333334%;
		}
	/* Columns */	
		.tnest-1 {
			width: 6.25%; /* (60px) / 960 = */}
		
		.tnest-2 {
			width: 14.5833333333%; /* (140px) / 960 = */}
		
		.tnest-3 {
			width: 22.9166666667%; /* (220px) / 960 = */}
		
		.tnest-4 {		
			width: 31.25%; /* (300px) / 960 = 31.25% */}
		
		.tnest-5 {
			width: 39.5833333333%; /* (380px) / 960 = */}
		
		.tnest-6 {
			width: 47.9166666667%; /* (460px) / 960 = */}
		
		.tnest-7 {
			width: 56.25%; /* (540px) / 960 = */}
		
		.tnest-8 {
			width: 64.583333333%; /* 620px / 960px */}
		
		.tnest-9 {
			width: 72.9166666667%; /* (700px) / 960 = */}
		
		.tnest-10 {
			width: 81.25%; /* (780px) / 960 = */}

		.tnest-11 {
			width: 89.5833333333%; /* (860px) / 960 = */}

		.tnest-12 {
			width: 98.9166666667%; }
			
	/* Clear Floats needed on Higher Resolutions */
		
		/* Clears */
		.clear-desktop {
			clear:none;}
		.clear-tablet, .clear-mobile {
			clear:both;}	
		/* Show Elements from larger sizes*/
			.hide-on-desktop {
				display: inherit;
				visibility: visible;}
				
		/* Hide Elements at this Screen size*/
			.hide-on-tablet {
				display: none;
				visibility: hidden;}
		}

/*------------------------------------*/		
/* iPhones and Other Phones at 400px */
		@media only screen and (max-width : 414px) {
		
		/* Reset Grids */
			.yoga {
				margin:0 !important;
				width: 97.5609756098%; /* (400px) / 410 Screen Res */}
							 
		/* Reset Grids */
		.desk-1, .desk-2, .desk-3, .desk-4,
		.desk-5, .desk-6, .desk-7, .desk-8,
		.desk-9, .desk-10, .desk-11, .desk-12, .r {
				width: 95.12195121952% !important;
				margin: 0 2.43902439024% 2.43902439024% 2.43902439024%; /* (10px)/410 */
				
				float:none !important;}
	/* Edge to Edge - Switch "Margins" to "Padding" so the background color can go edge to edge */
		.edge {
			margin:0;
			padding: 0 2.43902439024% 2.43902439024% 2.43902439024%; /* (10px)/410 */
		}

	/* Reset Tablet Only Nest */
		.tnest-1, .tnest-2, .tnest-3, .tnest-4,
		.tnest-5, .tnest-6, .tnest-7, .tnest-8,
		.tnest-9, .tnest-10, .tnest-11, .tnest-12 {
				width: 95.12195121952% !important;
				margin: 0 2.43902439024% 2.43902439024% 2.43902439024%; /* (10px)/410 */
				float:none !important;}

	/* Mobile Only Nest */
		.mnest-1, .mnest-2, .mnest-3, .mnest-4,
		.mnest-5, .mnest-6, .mnest-7, .mnest-8,
		.mnest-9, .mnest-10, .mnest-11, .mnest-12 {
			margin: 0 1.04166666667% 0 0 !important; /* 0px (10px)/960 (10px)/960 (10px)/960 */
			margin-bottom:1.04166666667% !important;
			float:left;}
		
		.mnest-1.cf, .mnest-2.cf, .mnest-3.cf, .mnest-4.cf,
		.mnest-5.cf, .mnest-6.cf, .mnest-7.cf, .mnest-8.cf,
		.mnest-9.cf, .mnest-10.cf, .mnest-11.cf {		
			margin-right: 0;
			margin-left: 2.08333333334%;
		}
	/* Columns */	
		.mnest-1 {
			width: 6.25%; /* (60px) / 960 = */}
		
		.mnest-2 {
			width: 14.5833333333%; /* (140px) / 960 = */}
		
		.mnest-3 {
			width: 22.9166666667%; /* (220px) / 960 = */}
		
		.mnest-4 {		
			width: 31.25%; /* (300px) / 960 = 31.25% */}
		
		.mnest-5 {
			width: 39.5833333333%; /* (380px) / 960 = */}
		
		.mnest-6 {
			width: 47.9166666667%; /* (460px) / 960 = */}
		
		.mnest-7 {
			width: 56.25%; /* (540px) / 960 = */}
		
		.mnest-8 {
			width: 64.583333333%; /* 620px / 960px */}
		
		.mnest-9 {
			width: 72.9166666667%; /* (700px) / 960 = */}
		
		.mnest-10 {
			width: 81.25%; /* (780px) / 960 = */}

		.mnest-11 {
			width: 89.5833333333%; /* (860px) / 960 = */}

		.mnest-12 {
			width: 98.9166666667%; }
						
		/* Clear Floats needed on Higher Rez */
			.clear-desktop, .clear-tablet{
				clear:none;}

			.clear-phone, .clear-mobile {
				clear:both;}

		/* Show Elements from larger sizes*/
			.hide-on-desktop {
				display: inherit;
				visibility: visible;}
		
			.hide-on-tablet {
				display: inherit;
				visibility: visible;}	
								
		/* Hide Elements at this Screen size*/
			.hide-on-phone {
				display: none;
				visibility: hidden;
				padding:0;
				margin:0;
				height:0;}
		/* Center on Phone */
		.center-on-phone {
			text-align: center;
		}
		/* Mobile Reset Float */
		.m-reset-float {
			float: none !important;
		}

	}