/*

	99Lime.com HTML KickStart by Joshua Gatcke

	kickstart-grids.css

	

	DO NOT EDIT THIS FILE unless you know what you are doing. 

*/

/*---------------------------------

	GRID/COLUMNS

-----------------------------------

	tinyfluidgrid.com

	& girlfriendnyc.com

	with changes by 99Lime

-----------------------------------*/

 /*

 & Columns : 12 

 & Gutter %: 20% 

 & MaxWidth: 1280px

 */

 /*---------------------------------

	TABS

-----------------------------------*/

ul.tabs{

margin:10px 0 -1px 0;

padding:0;

width:100%;

border-bottom:1px solid #e5e5e5;

float:left;

font-size:0;

}



	ul.tabs.left{text-align:left;}

	ul.tabs.center{text-align:center;}

	ul.tabs.right{text-align:right;}

	ul.tabs.right li{margin:0 0 0 -2px;}



	ul.tabs li{

	font-size:14px;

	list-style-type:none;

	margin:0 -2px 0 0;

	padding:0;

	display:inline-block;

	*display:inline;/*IE ONLY*/

	position:relative;

	top:0;

	left:0;

	*top:1px;/*IE 7 ONLY*/

	zoom:1;

	}



	ul.tabs li a{

	text-decoration:none;

	color:#666;

	display:inline-block;

	padding:9px 15px;

	position: relative;

	top:0;

	left:0;

	line-height:100%;

	background:#f5f5f5;

	-webkit-box-shadow: inset 0 -3px 3px rgba(0,0,0,0.03);

	-moz-box-shadow: inset 0 -3px 3px rgba(0,0,0,0.03);

	box-shadow: inset 0 -3px 3px rgba(0,0,0,0.03);

	border:1px solid #e5e5e5;

	border-bottom:0;

	font-size:0.9em;

	zoom:1;

	}



	ul.tabs li a:hover{

	background:#fff;

	}



	ul.tabs li.current a{

	position:relative;

	top:1px;

	left:0;

	background:#fff;

	-webkit-box-shadow: none;

	-moz-box-shadow: none;

	box-shadow: none;

	color:#222;

	}



	.tab-content{

	border:1px solid #efefef;

	border:1px solid #e5e5e5;

	background:#fff;

	clear:both;

	padding:20px;

	margin:0 0 40px 0;

	}











.grid{

max-width:1220px;

margin:0 auto;

/*padding:0 2em;*/

}



.grid.flex{

width:100%;

max-width:100%;

padding:0 2%;

padding:2em;

}



.row{

display:block;

overflow:hidden;

clear:both;

}



*[class*="col_"].alpha{margin-left:0;}

*[class*="col_"].omega{margin-right:0;}

 

.col_1  { width: 6.6666666666667%; }

.col_2  { width: 15%; }

.col_3  { width: 23.333333333333%; }

.col_4  { width: 31.666666666667%; }

.col_5  { width: 40%; }

.col_6  { width: 48.333333333333%; }

.col_7  { width: 56.666666666667%; }

.col_8  { width: 65%; }

.col_9  { width: 73.333333333333%; }

.col_10 { width: 81.666666666667%; }

.col_11 { width: 90%; }

.col_12 { width: 98.333333333333%; }



*[class*="col_"]{

/*margin-left: 0.83333333333333%;

margin-right: 0.83333333333333%;*/

margin-left: 0.8%;

margin-right: 0.80%;

margin-top:0.5em;

margin-bottom:0.5em;

float: left;

display: block;

}



.grid img{

max-width: 100%;

height:auto;

}



.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}

.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}

* html .clearfix, *:first-child+html .clearfix{zoom:1}



/* Viewable Grids 

	To view your grids, add the class .visible to any grid container.

	This will add a background color so you can see the layout of your grids. 

*/

*[class*="col_"].visible{

background:#eee;

border:1px dotted #ccc;

}





/*---------------------------------

	Responsive Grid Media Queries - 1280, 1024, 768, 480

	1280-1024 	- desktop (default grid)

	1024-768 	- tablet landscape

	768-480 	- tablet 

	480-less 	- phone landscape & smaller

-----------------------------------*/

@media all and (min-width: 1024px) and (max-width: 1280px) {

	

	.grid *[class*="col_"]{}

	.grid{max-width: 1024px;}

	.show-desktop	{display:block;}

	.hide-desktop	{display:none;}

	.show-tablet	{display:none;}

	.hide-tablet	{display:block;}

	.show-phone		{display:none;}

	.hide-phone		{display:block;}

	

}



@media all and (min-width: 768px) and (max-width: 1024px) {

	

	.grid *[class*="col_"]{}

	.grid{max-width: 768px;}

	.show-desktop	{display:none;}

	.hide-desktop	{display:block;}

	.show-tablet	{display:block;}

	.hide-tablet	{display:none;}

	.show-phone		{display:none;}

	.hide-phone		{display:block;}

	

}





@media all and (min-width: 480px) and (max-width: 768px) {



	.grid *[class*="col_"]{

	float:none;

	width:auto;

	clear:both;

	display:block;

	}

	

	/* columns inside of columns */

	.grid *[class*="col_"] [class*="col_"]{

	margin-left:0;

	margin-right:0;

	width:100%;

	}

	

	.grid{max-width: 480px;}

	.show-desktop	{display:none;}

	.hide-desktop	{display:block;}

	.show-tablet	{display:block;}

	.hide-tablet	{display:none;}

	.show-phone		{display:none;}

	.hide-phone		{display:block;}

	

}



@media all and (max-width: 480px) {

	

	.grid *[class*="col_"]{

	float:none;

	width:auto;

	clear:both;

	display:block;

	}

	

	/* columns inside of columns */

	.grid *[class*="col_"] [class*="col_"]{

	margin-left:0;

	margin-right:0;

	width:100%;

	}

	

	.grid{max-width: 100%;/*320*/}

	.show-desktop	{display:none;}

	.hide-desktop	{display:block;}

	.show-tablet	{display:none;}

	.hide-tablet	{display:block;}

	.show-phone		{display:block;}

	.hide-phone		{display:none;}

	

}