html, body {
	width: 100%;
	margin: 0;
	background-color : #343434;
}

/* Navigation */
#navigation {
	height: 40px;
	border-bottom: 1px solid #69696A;
	width: 100%;
	background-color : #323232;
}
#navigation ul {
	height: 40px;
	width: 804px;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
}
#navigation ul li {
	float: left;
	list-style: none;
	height: 40px;
	width: 64px;
	margin: 0;
	padding: 0 10px 0 0;
}
#navigation ul li:last-child {
	padding: 0;
}
#navigation ul li a {
	text-align: center;
	color: #69696A;
	display: block;
	height: 30px;
	width: 64px;
	font-family: Georgia, serif;
	font-style: italic;
	text-decoration: none;
	padding-top: 10px;
}
#navigation ul li:first-child a img {
	margin-top: -3px;
}
#navigation ul li a.grey {
	border-bottom: 5px solid #69696A;
	height: 25px;
}
#navigation ul li a.yellow:hover,
#navigation ul li a.yellow.active {
	border-bottom: 5px solid #ffdc21;
	height: 25px;
	color: #e8e8e8;
}
#navigation ul li a.pink:hover,
#navigation ul li a.pink.active {
	border-bottom: 5px solid #ff6cbf;
	height: 25px;
	color: #e8e8e8;
}
#navigation ul li a.blue:hover,
#navigation ul li a.blue.active {
	border-bottom: 5px solid #39d5f9;
	height: 25px;
	color: #e8e8e8;
}

/* Page d'accueil  */
#home_back {
	width: 100%;
	background: url('../images/titre/home_back.png') repeat-x left 244px;
}
#home_back img {
	display: block;
	margin: 0 auto;
	width: 800px;
}
#titre {
	margin: 0 auto;
	width: 800px;
}

#fixedwidth {
	height: 1082px;
	width: 800px;
	background: url('../images/fixedwidth.png');
	margin: 0 auto;
}
#nelson {
	height: 432px;
	width: 560px;
	background: url('../images/nelson.jpg');
	margin: 0 auto;
	display: block;
}
body.nelsonbody {
	background: white;
}

/* Gros taille par défaut */
.fullwidth{
	height: 250px;
	width:100%;
}
.grosFg, .grosR, .grosSc1 { margin-top: 20px; }
.grosMainDroite{
	width: 50px;
	height: 250px;
	float:right;
}
.grosMainGauche	{
	width: 50px;
	height: 250px;
	float:left;
}
.gros {
	width: 400px;
	height: 250px;
	margin: 0 auto;
}
.gros img {
	display: none;
	height: 250px;
	width: 100%;
}
.gros img.grosSerre {
	height: 250px;
}

.grosSc1 { background : url(../images/gros/singlecolumn/1/grosBras.png) repeat-x left top; }
.grosSc1 .grosMainDroite { background: url(../images/gros/singlecolumn/1/grosMainDroite.png) no-repeat left top; }
.grosSc1 .grosMainGauche { background: url(../images/gros/singlecolumn/1/grosMainGauche.png) no-repeat left top; }
.grosSc1 .gros {background: url(../images/gros/singlecolumn/1/grosNormal.png) no-repeat left top;}

.grosSc2 { background : url(../images/gros/singlecolumn/2/grosBras.png) repeat-x left top; }
.grosSc2 .grosMainDroite { background: url(../images/gros/singlecolumn/2/grosMainDroite.png) no-repeat left top; }
.grosSc2 .grosMainGauche { background: url(../images/gros/singlecolumn/2/grosMainGauche.png) no-repeat left top; }
.grosSc2 .gros {background: url(../images/gros/singlecolumn/2/grosNormal.png) no-repeat left top;}

.grosSc3 { background : url(../images/gros/singlecolumn/3/grosBras.png) repeat-x left top; }
.grosSc3 .grosMainDroite { background: url(../images/gros/singlecolumn/3/grosMainDroite.png) no-repeat left top; }
.grosSc3 .grosMainGauche { background: url(../images/gros/singlecolumn/3/grosMainGauche.png) no-repeat left top; }
.grosSc3 .gros {background: url(../images/gros/singlecolumn/3/grosNormal.png) no-repeat left top;}

.grosFg { background : url(../images/gros/fluidgrid/grosBras.png) repeat-x left top; }
.grosFg .grosMainDroite { background: url(../images/gros/fluidgrid/grosMainDroite.png) no-repeat left top; }
.grosFg .grosMainGauche { background: url(../images/gros/fluidgrid/grosMainGauche.png) no-repeat left top; }
.grosFg .gros {background: url(../images/gros/fluidgrid/grosNormal.png) no-repeat left top;}

.grosR { background : url(../images/gros/responsive/grosBras.png) repeat-x left top; }
.grosR .grosMainDroite { background: url(../images/gros/responsive/grosMainDroite.png) no-repeat left top; }
.grosR .grosMainGauche { background: url(../images/gros/responsive/grosMainGauche.png) no-repeat left top; }
.grosR .gros {background: url(../images/gros/responsive/grosNormal.png) no-repeat left top;}

.ligne3Gauche{
	height: 300px;
	width: 50%;
	float: left;
}
.moyenMainDroite {
	width: 53px;
	height: 300px;
	float: right;
}
.moyenMainGauche {
	float: left;
	width: 53px;
	height: 300px;
}
.moyen {
	width: 292px;
	height: 300px;
	margin: 0 auto;
}
.moyenSerre {
	display: none;
	width: 100%;
	height: 300px;
}

.moyenFg { background: url(../images/moyen/fluidgrid/moyenBras.png) repeat-x left top; }
.moyenFg .moyenMainDroite { background: url(../images/moyen/fluidgrid/moyenMainDroite.png) no-repeat left top; }
.moyenFg .moyenMainGauche { background: url(../images/moyen/fluidgrid/moyenMainGauche.png) no-repeat left top; }
.moyenFg .moyen { background: url(../images/moyen/fluidgrid/moyenNormal.png) no-repeat left top; }

.moyenR { background: url(../images/moyen/responsive/moyenBras.png) repeat-x left top; }
.moyenR .moyenMainDroite { background: url(../images/moyen/responsive/moyenMainDroite.png) no-repeat left top; }
.moyenR .moyenMainGauche { background: url(../images/moyen/responsive/moyenMainGauche.png) no-repeat left top; }
.moyenR .moyen { background: url(../images/moyen/responsive/moyenNormal.png) no-repeat left top; }

#ligne2{
	width: 100%;
}
.petit{
	width:25%;
	height: 300px;
	float:left;
}
.petit img{
	width:100%;
	height: 300px;
}
#ligne3 .petit{
	float : left;
}
.petitSemiEtire {
	display : none;
}
.petitEtire {
	display : none;
}
.petitSerre {
	display : none;
}

@media all and (min-width: 850px) {
	/* Changement de tronche du gros, semi-étiré */
	.gros { width: 408px; }
	.grosSc1 .gros { background: url(../images/gros/singlecolumn/1/grosSemiEtire.png) no-repeat left top; }
	.grosSc2 .gros { background: url(../images/gros/singlecolumn/2/grosSemiEtire.png) no-repeat left top; }
	.grosSc3 .gros { background: url(../images/gros/singlecolumn/3/grosSemiEtire.png) no-repeat left top; }
	.grosFg .gros { background: url(../images/gros/fluidgrid/grosSemiEtire.png) no-repeat left top; }
	.grosR .gros { background: url(../images/gros/responsive/grosSemiEtire.png) no-repeat left top; }

	.petitNormal {
		display : none;
	}
	.petitSemiEtire {
		display : inline;
	}
}

@media all and (min-width: 950px) {
	/* Changement de tronche du gros, étiré */
	.gros { width: 500px; }
	.grosSc1 .gros { background: url(../images/gros/singlecolumn/1/grosEtire.png) no-repeat left top; }
	.grosSc2 .gros { background: url(../images/gros/singlecolumn/2/grosEtire.png) no-repeat left top; }
	.grosSc3 .gros { background: url(../images/gros/singlecolumn/3/grosEtire.png) no-repeat left top; }
	.grosFg .gros { background: url(../images/gros/fluidgrid/grosEtire.png) no-repeat left top; }
	.grosR .gros { background: url(../images/gros/responsive/grosEtire.png) no-repeat left top; }

	/* Petit devient étiré */
	.petitSemiEtire {
		display : none;
	}
	.petitEtire {
		display : inline;
	}

	/* Moyen devient étiré */
	.moyenFg .moyen { background: url(../images/moyen/fluidgrid/moyenEtire.png) repeat-x left top; }
	.moyenR .moyen { background: url(../images/moyen/responsive/moyenEtire.png) repeat-x left top; }
}

@media all and (min-width: 980px) {
	/* Bulle du gros étiré */
	.grosSc1 .gros { background: url(../images/gros/singlecolumn/1/grosEtireBulle.png) no-repeat left top; }
	.grosSc2 .gros { background: url(../images/gros/singlecolumn/2/grosEtireBulle.png) no-repeat left top; }
	.grosSc3 .gros { background: url(../images/gros/singlecolumn/3/grosEtireBulle.png) no-repeat left top; }
	.grosFg .gros { background: url(../images/gros/fluidgrid/grosEtireBulle.png) no-repeat left top; }
	.grosR .gros { background: url(../images/gros/responsive/grosEtireBulle.png) no-repeat left top; }
}

@media all and (max-width: 800px) {
	/* Moyen devient semi-serré */
	.moyenFg .moyen { background: url(../images/moyen/fluidgrid/moyenSemiSerre.png) no-repeat left top; width: 194px; }
	.moyenR .moyen { background: url(../images/moyen/responsive/moyenSemiSerre.png) no-repeat left top; width: 194px; }
}

@media all and (max-width: 600px) {
	/* Moyen serré */
	.moyenMainGauche, .moyenMainDroite {
		display: none;
	}
	.moyen .moyenSerre {
		display: inline;
	}
	.moyenFg .moyen, .moyenR .moyen {
		background: none;
		width: 100%;
	}
	.ligne3Gauche {
		background: none;
	}

	/* Petit devient serré */
	.petitNormal {
		display : none;
	}
	.petitSerre {
		display : inline;
	}
}

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

	/* Gros devient serré */
	.fullwidth{
		background : none;
	}
	.grosMainDroite{
		display: none;
	}	
	.grosMainGauche	{
		display: none;
	}
	.grosR .gros, .grosFg .gros, .grosSc1 .gros, .grosSc2 .gros, .grosSc3 .gros {
		background: none;
		width: 100%;
	}
	.gros img.grosSerre {
		display:inline;
	}

	/* Saut du responsive le cas échéant */
	.responsive .petit {
		width: 50%;
	}
	.responsive .ligne3Gauche {
		width: 100%;
	}
	.responsive .petitNormal {
		display: inline;
	}
	.responsive .petitSerre {
		display: none;
	}

	.responsive .ligne3Gauche{
		background: url(../images/moyen/responsive/moyenBras.png) repeat-x;
	}
	.responsive .moyenMainGauche, .responsive .moyenMainDroite {
		display: inline;
	}
	.responsive .moyen .moyenSerre {
		display: none;
	}
	.responsive .moyen {
		width: 357px;
	}
}

@media all and (max-width: 400px) {
	.gros {
		margin-top: 0;
	}
	.gros img.grosSerre {
		display:none;
	}
	.gros img.grosSerreBulle {
		display:inline;
	}
}