/*	Grid para layout responsivo
 *	http://simplegrid.info
 *	Author: Marcus Pereira do Couto
 *  Date: 2012-01-12
 */

/* Containers */
.clear{ clear: both; }

/* configuraçoes dos blocos */
.c-10,.c-8,.c-7,.c-6,.c-5,.c-4,.c-3,.c-2,.p-30,.p-40,.p-60,.p-70,.p-80,.p-90
{ display:inline; float:left; }

img{
	/*width: 100%;*/
	max-width: 100%;
}

/*padrao caso nao haja suporte a css3 1024x768px */
	.grid { width:960px; }

	.d-margin 			{margin:30px; }
	.d-margin-left 		{margin-left:30px; }
	.d-margin-right 	{margin-right:30px; }
	.d-margin-top 		{margin-top:30px; }
	.d-margin-bottom 	{margin-bottom:30px; }

	.d-padding 			{padding:30px; }
	.d-padding-left 	{padding-left:30px; }
	.d-padding-right 	{padding-right:30px; }
	.d-padding-top 		{padding-top:30px; }
	.d-padding-bottom 	{padding-bottom:30px; }

	.margin 		{margin:20px; }
	.margin-left 	{margin-left:20px; }
	.margin-right 	{margin-right:20px; }
	.margin-top 	{margin-top:20px; }
	.margin-bottom 	{margin-bottom:20px; }

	.padding 		{padding:20px; }
	.padding-left 	{padding-left:20px; }
	.padding-right 	{padding-right:20px; }
	.padding-top 	{padding-top:20px; }
	.padding-bottom {padding-bottom:20px; }

	.h-margin 		{margin:10px; }
	.h-margin-left 	{margin-left:10px; }
	.h-margin-right 	{margin-right:10px; }
	.h-margin-top 	{margin-top:10px; }
	.h-margin-bottom 	{margin-bottom:10px; }

	.h-padding 		{padding:10px; }
	.h-padding-left 	{padding-left:10px; }
	.h-padding-right 	{padding-right:10px; }
	.h-padding-top 	{padding-top:10px; }
	.h-padding-bottom {padding-bottom:10px; }

	.c-10{width: 96px;} /* 10 colunas */
	.c-8{width: 120px;} /* 8 colunas */
	.c-6 { width: 160px; } /* 6 colunas */
	.c-5{width: 192px;} /* 5 colunas */
	.c-4{width: 240px;} /* 4 colunas */
	.c-3{width: 320px;} /* 3 colunas */
	.c-2{width: 480px;} /* 2 colunas */
	.p-30{width: 288px;}
	.p-40{width: 384px;}
	.p-60{width: 576px;}
	.p-70{width: 672px;}
	.p-80{width: 768px;}
	.p-90{width: 864px;}


@media all and (min-width: 720px) {
{}
	.grid { width: 720px; }

	.d-margin 			{margin:21px; }
	.d-margin-left 		{margin-left:21px; }
	.d-margin-right 	{margin-right:21px; }
	.d-margin-top 		{margin-top:21px; }
	.d-margin-bottom 	{margin-bottom:21px; }

	.d-padding 			{padding:21px; }
	.d-padding-left 	{padding-left:21px; }
	.d-padding-right 	{padding-right:21px; }
	.d-padding-top 		{padding-top:21px; }
	.d-padding-bottom 	{padding-bottom:21px; }

	.margin 		{margin:14px; }
	.margin-left 	{margin-left:14px; }
	.margin-right 	{margin-right:14px; }
	.margin-top 	{margin-top:14px; }
	.margin-bottom 	{margin-bottom:14px; }

	.padding 		{padding:14px; }
	.padding-left 	{padding-left:14px; }
	.padding-right 	{padding-right:14px; }
	.padding-top 	{padding-top:14px; }
	.padding-bottom {padding-bottom:14px; }

	.h-margin 		{margin:7px; }
	.h-margin-left 	{margin-left:7px; }
	.h-margin-right 	{margin-right:7px; }
	.h-margin-top 	{margin-top:7px; }
	.h-margin-bottom 	{margin-bottom:7px; }

	.h-padding 		{padding:7px; }
	.h-padding-left 	{padding-left:7px; }
	.h-padding-right 	{padding-right:7px; }
	.h-padding-top 	{padding-top:7px; }
	.h-padding-bottom {padding-bottom:7px; }
}


@media all and (min-width: 970px) {
	{}
	.grid { width:960px; }

	.d-margin 			{margin:30px; }
	.d-margin-left 		{margin-left:30px; }
	.d-margin-right 	{margin-right:30px; }
	.d-margin-top 		{margin-top:30px; }
	.d-margin-bottom 	{margin-bottom:30px; }

	.d-padding 			{padding:30px; }
	.d-padding-left 	{padding-left:30px; }
	.d-padding-right 	{padding-right:30px; }
	.d-padding-top 		{padding-top:30px; }
	.d-padding-bottom 	{padding-bottom:30px; }

	.margin 		{margin:20px; }
	.margin-left 	{margin-left:20px; }
	.margin-right 	{margin-right:20px; }
	.margin-top 	{margin-top:20px; }
	.margin-bottom 	{margin-bottom:20px; }

	.padding 		{padding:20px; }
	.padding-left 	{padding-left:20px; }
	.padding-right 	{padding-right:20px; }
	.padding-top 	{padding-top:20px; }
	.padding-bottom {padding-bottom:20px; }

	.h-margin 		{margin:10px; }
	.h-margin-left 	{margin-left:10px; }
	.h-margin-right 	{margin-right:10px; }
	.h-margin-top 	{margin-top:10px; }
	.h-margin-bottom 	{margin-bottom:10px; }

	.h-padding 		{padding:10px; }
	.h-padding-left 	{padding-left:10px; }
	.h-padding-right 	{padding-right:10px; }
	.h-padding-top 	{padding-top:10px; }
	.h-padding-bottom {padding-bottom:10px; }

	.c-10{width: 96px;} /* 10 colunas */
	.c-8{width: 120px;} /* 8 colunas */
	.c-6 { width: 160px; } /* 6 colunas */
	.c-5{width: 192px;} /* 5 colunas */
	.c-4{width: 240px;} /* 4 colunas */
	.c-3{width: 320px;} /* 3 colunas */
	.c-2{width: 480px;} /* 2 colunas */
	.p-30{width: 288px;}
	.p-40{width: 384px;}
	.p-60{width: 576px;}
	.p-70{width: 672px;}
	.p-80{width: 768px;}
	.p-90{width: 864px;}

}

@media all and (min-width: 1200px) {
	{}

	.grid { width:1200px; }

	.d-margin 			{margin:45px; }
	.d-margin-left 		{margin-left:45px; }
	.d-margin-right 	{margin-right:45px; }
	.d-margin-top 		{margin-top:45px; }
	.d-margin-bottom 	{margin-bottom:45px; }

	.d-padding 			{padding:45px; }
	.d-padding-left 	{padding-left:45px; }
	.d-padding-right 	{padding-right:45px; }
	.d-padding-top 		{padding-top:45px; }
	.d-padding-bottom 	{padding-bottom:45px; }

	.margin 		{margin:30px; }
	.margin-left 	{margin-left:30px; }
	.margin-right 	{margin-right:30px; }
	.margin-top 	{margin-top:30px; }
	.margin-bottom 	{margin-bottom:30px; }

	.padding 		{padding:30px; }
	.padding-left 	{padding-left:30px; }
	.padding-right 	{padding-right:30px; }
	.padding-top 	{padding-top:30px; }
	.padding-bottom {padding-bottom:30px; }

	.h-margin 		{margin:15px; }
	.h-margin-left 	{margin-left:15px; }
	.h-margin-right 	{margin-right:15px; }
	.h-margin-top 	{margin-top:15px; }
	.h-margin-bottom 	{margin-bottom:15px; }

	.h-padding 		{padding:15px; }
	.h-padding-left 	{padding-left:15px; }
	.h-padding-right 	{padding-right:15px; }
	.h-padding-top 	{padding-top:15px; }
	.h-padding-bottom {padding-bottom:15px; }


	.c-10{width: 120px;} /* 10 colunas */
	.c-8{width: 150px;} /* 8 colunas */
	.c-6 { width: 200px; } /* 6 colunas */
	.c-5{width: 240px;} /* 5 colunas */
	.c-4{width: 300px} /* 4 colunas */
	.c-3{width: 400px} /* 3 colunas */
	.c-2{width: 600px} /* 2 colunas */
	.p-30{width: 360px;}
	.p-40{width: 480px;}
	.p-60{width: 720px;}
	.p-70{width: 840px;}
	.p-80{width: 960px;}
	.p-90{width: 1080px;}
}