/* ============== Structure ============== */
.bande {
}
.container {
	position: relative;
	width: 980px;
	margin: 0px auto;
	padding: 0px;
}
.colonne {
	float: left;
	display: inline;
}
.unique {
	width: 860px;
}
.sidebar1 {
	width: 180px;
}
.sidebar2 {
	width: 120px;
}
.principale {
	width: 560px;
}
.principale-sans_sb1 {
	width: 740px;
}
.principale-sans_sb2 {
	width: 680px;
}
/* ============== Clearing ============== */
/* Self Clearing Goodness */
.container:after {
	content: "\0020";
	display: block;
	height: 0px;
	clear: both;
	visibility: hidden;
}
/* You can also use a <br class="clear" /> to clear columns */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0px;
	height: 0px;
}

/* ============== Media Queries ============== */

/* #Tablette (Portrait)
============================= */

/* largeur 768px */

@media only screen and (min-width: 768px) and (max-width: 999px) {
.container {
	width: 720px;
}
.unique {
	width: 720px;
}
.sidebar1 {
	width: 165px;
}
.sidebar2 {
	width: 120px;
}
.principale {
	width: 435px;
}
.principale-sans_sb1 {
	width: 600px;
}
.principale-sans_sb2 {
	width: 555px;
}
}

/*  #Mobile (Portrait)
============================= */

/* largeur 320px */

@media only screen and (max-width: 767px) {
.container, .unique, .sidebar1, .sidebar2, .principale, .principale-sans_sb1, .principale-sans_sb2 {
	width: 300px;
}
}

/* #Mobile (Paysage)
============================= */

/* largeur 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
.container, .unique, .sidebar1, .sidebar2, .principale, .principale-sans_sb1, .principale-sans_sb2 {
	width: 420px;
}
}