/*---------------------------------
	GRID/COLUMNS
-----------------------------------
	tinyfluidgrid.com
	& girlfriendnyc.com
	with changes by 99Lime
-----------------------------------*/
 /*
 & Columns : 12 
 & Gutter %: 20% 
 & MaxWidth: 1024px
 */
 
.grid{
max-width:1080px;
min-width:560px;
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-top:0.5em;
margin-bottom:0.5em;
float: left;
display: block;
}


.grid *[class*="col_"] 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: 768px) and (max-width: 1024px) {
	
	.grid *[class*="col_"]{
	display:block;
	margin: 0 auto;
	padding: 0 auto;
}
	.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;}

	#top_header { max-width: 768px;}
	#top_header.show-desktop	{display:none;}
	#top_header.hide-desktop	{display:block;}
	#top_header.show-tablet	{ background-image: url(../images/top_alos_tablet.png);
		margin: 0 auto;
		padding: 0 auto;
}
	#top_header.hide-tablet	{display:block;}
	#top_header.show-phone		{display:none;}
	#top_header.hide-phone		{display:block;}

	.grid #top-l_menuarea { 
	   width: 96%;
		max-width: 720px;
	float:none;
}

	.grid #top-r_menuarea { 
	   width: 92%;
		max-width: 720px;
		margin: 16px auto;
	float:none;
}

	#etop_header { max-width: 768px;}
	#etop_header.show-desktop	{display:none;}
	#etop_header.hide-desktop	{display:block;}
	#etop_header.show-tablet	{ background-image: url(../images/etop_alos_tablet.png);
		margin: 0 auto;
		padding: 0 auto;
}
	#etop_header.hide-tablet	{display:block;}
	#etop_header.show-phone		{display:none;}
	#etop_header.hide-phone		{display:block;}

	#footer a {
	font-size: 8pt;}
	#footer span {
	font-size: 8pt;}
	#footer img {
	width: 10%;
	height: auto;}

}


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

body {
		width: 80%;
}

.ebody {
		width: 80%;
}

	.grid *[class*="col_"]{
	float:none;
	width:auto;
	clear:both;
	display:block;
	margin: 0;
	padding: 0;
	}
	
	/* 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;}

	.grid #top-l_menuarea { 
	   width: 98%;
	float:none;
}

	.grid #top-r_menuarea { 
	   width: 96%;
		margin: 16px auto;
	float:none;
}

	.grid #top-r_menuarea h6 { width: 480px; }
	.grid #top-r_menuarea p { width: 480px;}

	#top_header { max-width: 560px;}
	#top_header.show-desktop	{display:none;}
	#top_header.hide-desktop	{display:block;}
	#top_header.show-tablet	{ 
		background-image: url(../images/top_alos_sphone.png);
		margin: 0 auto;
		padding: 0 auto;
	   width: 560px;
}
	#top_header.hide-tablet	{ display:block;}
	#top_header.show-phone		{display:none;}
	#top_header.hide-phone		{display:block;}


	#etop_header { max-width: 560px;}
	#etop_header.show-desktop	{display:none;}
	#etop_header.hide-desktop	{display:block;}
	#etop_header.show-tablet	{ 
		background-image: url(../images/etop_alos_sphone.png);
		margin: 0 auto;
		padding: 0 auto;
	   width: 560px;
}
	#etop_header.hide-tablet	{ display:block;}
	#etop_header.show-phone		{display:none;}
	#etop_header.hide-phone		{display:block;}

	#footer.efooter a {
	font-size: 7pt;}
	#footer.efooter span {
	font-size: 7pt;}
	#footer img {
	width: 12%;
	height: auto;}
}

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

body {
		width: 80%;
}

.ebody {
		width: 80%;
}

	.grid *[class*="col_"]{
	float:none;
	width:auto;
	clear:both;
	display:block;
	margin: 0;
	padding: 0;
	}
	
	/* 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:block;}
	.hide-tablet	{display:block;}
	.show-phone		{display:block;}
	.hide-phone		{display:none;}

	#top_header { max-width: 100%;}
	#top_header.show-desktop	{display:none;}
	#top_header.hide-desktop	{display:block;}
	#top_header.show-tablet	{ 
		background-image: url(../images/top_alos_sphone.png);
}
	#top_header.hide-tablet	{ display:block;}
	#top_header.show-phone		{display:block;}
	#top_header.hide-phone		{display:none;}

	#etop_header { max-width: 100%;}
	#etop_header.show-desktop	{display:none;}
	#etop_header.hide-desktop	{display:block;}
	#etop_header.show-tablet	{ 
		background-image: url(../images/etop_alos_sphone.png);
}
	#etop_header.hide-tablet	{ display:block;}
	#etop_header.show-phone		{display:block;}
	#etop_header.hide-phone		{display:none;}

	#footer img {
	width: 12%;
	height: auto;}
	#footer.efooter img {
	width: 12%;
	height: auto;
}
	#footer.efooter a {
	font-size: 7pt;}
	#footer.efooter span {
	font-size: 7pt;}

}