/*================================================================================================*/

[class^=content]
{
	position: relative;
	margin:   0 auto;
	overflow: hidden;
}

.content1280
{
	width: 1280px;
}

/*================================================================================================*/

[class^=col]
{
	position: relative;
	float:    left;
	padding:  10px;
	overflow: hidden;
}

.col320
{
	width: 320px;
}

.col640
{
	width: 640px;
}

.col960
{
	width: 960px;
}

/*================================================================================================*/

.container
{
	position: relative;
	width:    100%;
	padding:  10px;
	overflow: hidden;
}

/*================================================================================================*/

.wrapper
{
	content:    '\0020'; 
	display:     block; 
	height:      0; 
	line-height: 0;
	overflow:    hidden; 
	width:       100%;
}

.wrapper.mbtm10  { height:  10px; }
.wrapper.mbtm15  { height:  15px; }
.wrapper.mbtm20  { height:  20px; }
.wrapper.mbtm30  { height:  30px; }
.wrapper.mbtm40  { height:  40px; }
.wrapper.mbtm50  { height:  50px; }
.wrapper.mbtm60  { height:  60px; }
.wrapper.mbtm70  { height:  70px; }
.wrapper.mbtm80  { height:  80px; }
.wrapper.mbtm90  { height:  90px; }
.wrapper.mbtm100 { height: 100px; }

/*================================================================================================*/
/* MEDIAS QUERIES */
/*================================================================================================*/

@media only screen and (max-width: 1280px) /* ECRANS INFERIEURS A 1280px */
{
	.content1280
	{
		width: 960px;
	}
	
	.col414,
	.col323,
	.col313,
	.col3132,
	.col211,
	.col212,
	.col221,
	.col222
	{
		float:  none;
		margin: 0 auto;
	}
	
	.col311
	{
		margin-left: 160px;
	}
}

/*================================================================================================*/

@media only screen and (max-width: 960px) /* ECRANS INFERIEURS A 960px */
{
	.content1280,
	.col960
	{
		width: 640px;
	}
	
	.col414,
	.col323,
	.col313,
	.col3132,
	.col211,
	.col212,
	.col221,
	.col222
	{
		float:  left;
		margin: 0;
	}
	
	.col311
	{
		margin: 0;
	}
	
	.col3112,
	.col3132,
	.col211,
	.col212
	{
		float:  none;
		margin: 0 auto;
	}
}

/*================================================================================================*/

@media only screen and (max-width: 640px) /* ECRANS INFERIEURS A 640px */
{
	.content1280,
	.col960,
	.col640
	{
		width:  480px;
	}
	
	.col320
	{
		float:  none;
		margin: 0 auto;
	}
}

/*================================================================================================*/

@media only screen and (max-width: 480px) /* ECRANS INFERIEURS A 480px */
{
	.content1280,
	.col960,
	.col640
	{
		width: 320px;
	}
}

/*================================================================================================*/

/*
		
<div class="content1280">

	<div class="col320 col411">Un</div>
	<div class="col320 col412">Deux</div>
	<div class="col320 col413">Trois</div>
	<div class="col320 col414">Quatre</div>

</div>

<div class="content1280">

	<div class="col320 col311">Un</div>
	<div class="col320 col312">Deux</div>
	<div class="col640 col323">Trois</div>

</div>

<div class="content1280">

	<div class="col640 col321">Un</div>
	<div class="col320 col3122">Deux</div>
	<div class="col320 col313">Trois</div>

</div>

<div class="content1280">

	<div class="col320 col3112">Un</div>
	<div class="col640 col322">Deux</div>
	<div class="col320 col3132">Trois</div>

</div>

<div class="content1280">

	<div class="col320 col211">Un</div>
	<div class="col960 col232">Deux</div>

</div>

<div class="content1280">

	<div class="col960 col231">Un</div>
	<div class="col320 col212">Deux</div>

</div>

<div class="content1280">

	<div class="col640 col221">Un</div>
	<div class="col640 col222">Deux</div>

</div>

*/

/*================================================================================================*/