/* Styles généraux */
body {
	margin: 0;
	padding: 126px 0 0 204px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 10px;
	line-height: 12px;
}
form {
	margin: 0;
	padding: 0;
}
#contour, #conteneur, #conteneur2, #haut, #haut2, #bas, #gauche, #droite, #gauche2, #droite2, #liste, #partenaires, fieldset, fieldset p, *.clear {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}
fieldset {
	padding: 10px;
	z-index: 100;
}
.bg {
	z-index: 0;
}
fieldset label, fieldset input {
	display: block;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 10px;
	line-height: 12px;
}
*.clear {
	clear: both;
	float: none;
	overflow: hidden;
	height: 0;
}
a {
	color: #008dd7;
	cursor: pointer;
}
a img {
	border: 0;
}


/* Haut de page */
#haut, #haut2 {
	width: 603px;
	height: 61px;
}
html>body #haut {
	background: url(../img/haut.png) no-repeat 0 0;
}
html>body #haut2 {
	background: url(../img/haut2.png) no-repeat 0 0;
}


/* Conteneurs principaux */
#contour {
	background: #92897b;
	padding: 0 6px 0 9px;
	width: 588px;
}
#conteneur {
	background: #aba190 url(../img/arriere-plan.jpg) no-repeat 0 0;
	width: 571px;
	padding: 325px 0 0 17px;
}
#conteneur2 {
	background: #aaa190 url(../img/arriere-plan2.jpg) no-repeat 0 0;
	width: 571px;
	padding: 341px 0 0 17px;
}


/* Bas de page */
#bas {
	width: 603px;
	height: 57px;
}
html>body #bas {
	background: url(../img/bas.png) no-repeat 0 0;
}


/* Entête - Liens vers la toune et la fiche artiste */
a#ecoutez {
	position: absolute;
	display: block;
	top: 110px;
	left: 300px;
	width: 230px;
	height: 38px;
	outline: 0;
}
a#ecoutez img {
	display: block;
	width: 230px;
	height: 38px;
}
html>body a#ecoutez {
	background: url(../img/ecoutez.png) no-repeat 0 0;
}
html>body a#ecoutez:hover {
	background: url(../img/ecoutez-o.png) no-repeat 0 0;
}
a.fiche {
	position: absolute;
	display: block;
	top: 304px;
	left: 17px;
	width: 531px;
	height: 16px;
	padding: 0 0 4px 0;
	outline: 0;
}
a.fiche img {
	display: block;
	width: 531px;
	height: 16px;
}
#conteneur2 a.fiche {
	top: 325px;
}
html>body a.fiche {
	background: url(../img/fiche.png) no-repeat 0 0;
}
html>body a.fiche:hover {
	background: url(../img/fiche-o.png) no-repeat 0 0;
}


/* Inscription - Colonne de gauche */
#gauche {
	float: left;
	width: 173px;
	height: 250px;
}
#gauche .bg {
	position: absolute;
	display: block;
	top: 38px;
	left: 0;
	width: 173px;
	height: 212px;
}
html>body #gauche .bg {
	background: url(../img/deja-inscrit-arriere-plan.png) repeat 0 0;
}


/* Téléchargement - Colonne de de gauche */
#gauche2 {
	float: left;
	width: 263px;
	height: 300px;
}
#gauche2 .bg {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 263px;
	height: 300px;
}
html>body #gauche2 .bg {
	background: url(../img/deja-inscrit-arriere-plan.png) repeat 0 0;
}


/* Bloc règlements */
a.reglements {
	position: relative;
	display: block;
	width: 173px;
	height: 34px;
	padding: 0 0 4px 0;
	outline: 0;
}
html>body a.reglements {
	background: url(../img/reglements.png) no-repeat 0 0;
}
html>body a.reglements:hover {
	background: url(../img/reglements-o.png) no-repeat 0 0;
}


/* Bloc "Déjà inscrit" */
fieldset.deja {
	width: 153px;
	height: 192px;
	color: #c3c3c3;
}
fieldset.deja a {
	color: #c3c3c3;
}
fieldset.deja p {
	padding: 0 0 4px 0;
}
fieldset.deja strong {
	position: relative;
	display: block;
	width: 94px;
	height: 14px;
	padding: 0 0 4px 0;
}
html>body fieldset.deja strong {
	background: url(../img/deja-inscrit.png) no-repeat 0 0;
}


/* Bloc "Téléchargez les pistes" */
fieldset.telechargez {
	width: 243px;
	height: 280px;
	color: #c3c3c3;
	overflow: hidden;
}
fieldset.telechargez a {
	color: #c3c3c3;
}
fieldset.telechargez b {
	font-size: 12px;
}
fieldset.telechargez p {
	padding: 0 0 12px 0;
}
fieldset.telechargez strong {
	position: relative;
	display: block;
	width: 243px;
	height: 23px;
	padding: 0 0 8px 0;
}
html>body fieldset.telechargez strong {
	background: url(../img/telechargez.png) no-repeat 0 0;
}


/* Inscription - Colonne de droite */
#droite {
	float: left;
	width: 353px;
	height: 250px;
	margin: 0 0 0 5px;
}
#droite .bg {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 353px;
	height: 250px;
}
html>body #droite .bg {
	background: url(../img/inscrivez-vous-arriere-plan.png) repeat 0 0;
}


/* Téléchargement - Colonne de droite */
#droite2 {
	float: left;
	width: 263px;
	height: 300px;
	margin: 0 0 0 5px;
}
#droite2 .bg {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 263px;
	height: 300px;
}
html>body #droite2 .bg {
	background: url(../img/inscrivez-vous-arriere-plan.png) repeat 0 0;
}


/* Liste des remix */
#liste {
	width: 531px;
	height: 590px;
}
#liste .bg {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 531px;
	height: 590px;
}
html>body #liste .bg {
	background: url(../img/inscrivez-vous-arriere-plan.png) repeat 0 0;
}
#liste strong {
	position: relative;
	display: block;
	width: 531px;
	height: 58px;
}
html>body #liste strong {
	background: url(../img/par-les-remixeurs.png) no-repeat 0 0;
}

/* Lignes pour chaque remix */
#liste p {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	width: 531px;
	height: 22px;
}
#liste p a {
	position: relative;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	width: 493px;
	height: 22px;
	color: #000;
	padding: 0 0 0 38px;
	text-decoration: none;
	font-size: 13px;
	line-height: 21px;
	z-index: 100;
	outline: 0;
}
html>body #liste p a:hover {
	background: url(../img/deja-inscrit-arriere-plan.png) repeat 0 0;
}
#liste p a.o, #liste p a.o:hover {
	color: #fff;
	background: #008dd7;
}
#liste p .bg, #liste p .bg2 {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 531px;
	height: 22px;
	z-index: 0;
}
#liste p .bg2 {
	display: none;
}
#liste p a em {
	font-style: normal;
	font-weight: bold;
}
#liste p a small {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 32px;
	height: 22px;
}
html>body #liste p a small {
	background: url(../img/ecouter-remix.png) no-repeat 0 0;
}
#liste input {
	position: relative;
	display: block;
	float: right;
}
#liste p a .col1 {
	position: relative;
	display: block;
	overflow: hidden;
	float: left;
	margin: 0;
	padding: 0;
	width: 391px;
	z-index: 100;
}
#liste p a .col2 {
	position: absolute;
	display: block;
	overflow: hidden;
	right: 4px;
	margin: 0;
	padding: 0 25px 0 0;
	width: 200px;
	font-size: 10px;
	line-height: 10px;
	color: #fff;
	z-index: 100;
	text-align: right;
	font-weight: bold;
}
.col2 .e1_blanc {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 22px;
}
html>body .col2 .e1_blanc {
	background: url(../img/e1-blanc.png) no-repeat top left;
}
#liste p a .col3 {
	position: relative;
	display: block;
	overflow: hidden;
	float: left;
	margin: 0;
	padding: 0;
	width: 100px;
	z-index: 100;
}
.col3 img {
	position: relative;
	display: block;
	float: left;
	width: 20px;
	height: 22px;
}
html>body .col3 .e1_gris {
	background: url(../img/e1-gris.png) no-repeat 0 0;
}
html>body .col3 .e2_gris {
	background: url(../img/e2-gris.png) no-repeat 0 0;
}
html>body .col3 .e3_gris {
	background: url(../img/e3-gris.png) no-repeat 0 0;
}
html>body .col3 .e4_gris {
	background: url(../img/e4-gris.png) no-repeat 0 0;
}
html>body .col3 .e5_gris {
	background: url(../img/e5-gris.png) no-repeat 0 0;
}
html>body .col3 .e1_blanc {
	background: url(../img/e1-blanc.png) no-repeat 0 0;
}
html>body .col3 .e2_blanc {
	background: url(../img/e2-blanc.png) no-repeat 0 0;
}
html>body .col3 .e3_blanc {
	background: url(../img/e3-blanc.png) no-repeat 0 0;
}
html>body .col3 .e4_blanc {
	background: url(../img/e4-blanc.png) no-repeat 0 0;
}
html>body .col3 .e5_blanc {
	background: url(../img/e5-blanc.png) no-repeat 0 0;
}
html>body .col3 .e1_noir {
	background: url(../img/e1-noir.png) no-repeat 0 0;
}
html>body .col3 .e2_noir {
	background: url(../img/e2-noir.png) no-repeat 0 0;
}
html>body .col3 .e3_noir {
	background: url(../img/e3-noir.png) no-repeat 0 0;
}
html>body .col3 .e4_noir {
	background: url(../img/e4-noir.png) no-repeat 0 0;
}
html>body .col3 .e5_noir {
	background: url(../img/e5-noir.png) no-repeat 0 0;
}
#liste fieldset {
	width: 455px;
	padding: 21px 38px 10px 38px;
	margin: 0;
}
#liste fieldset input {
	float: none;
}
#liste fieldset .nom {
	position: relative;
	display: block;
	float: left;
	width: 223px;
	padding: 0 0 16px 0;
}
#liste fieldset .courriel {
	position: relative;
	display: block;
	float: right;
	width: 200px;
	padding: 0 0 16px 0;
}
a#soumettre {
	position: relative;
	display: block;
	width: 224px;
	height: 50px;
	margin: 0 auto;
}
html>body a#soumettre {
	background: url(../img/soumettre.png) no-repeat 0 0;
}
a#soumettre img {
	display: block;
	width: 224px;
	height: 50px;
}


/* Bloc "Inscrivez-vous" */
fieldset.inscrivez {
	width: 333px;
	height: 240px;
	padding-top: 0;
	color: #000;
}
fieldset.inscrivez a {
	color: #000;
}
fieldset.inscrivez strong {
	position: relative;
	display: block;
	width: 331px;
	height: 31px;
	padding: 0 0 4px 0;
}
html>body fieldset.inscrivez strong {
	background: url(../img/inscrivez-vous.png) no-repeat 0 0;
}
fieldset.inscrivez p {
	float: left;
	width: 50%;
	padding: 0 0 4px 0;
}


/* Bloc "Soumettez votre remix" */
fieldset.soumettez {
	width: 243px;
	height: 280px;
	color: #000;
}
fieldset.soumettez a {
	color: #000;
}
fieldset.soumettez p {
	padding: 0 0 12px 0;
}
fieldset.soumettez strong {
	position: relative;
	display: block;
	width: 243px;
	height: 23px;
	padding: 0 0 8px 0;
}
html>body fieldset.soumettez strong {
	background: url(../img/soumettez.png) no-repeat 0 0;
}


/* Bloc "En collaboration avec" */
#partenaires {
	width: 531px;
	height: 143px;
	padding: 20px 0 10px 0;
}
#partenaires img {
	display: block;
	border: 0;
}


/* Messages d'erreur */
p.error, fieldset.inscrivez p.error {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 10px;
	line-height: 12px;
	clear: both;
	float: none;
	width: auto;
	margin: 0;
	padding: 8px 0 8px 0;
	color: #a00;
}


/* Lecteurs Flash */
#mp1 {
	position: absolute;
	display: block;
	top: 132px;
	left: 305px;
	width: 0px;
	height: 0px;
}
#mp2 {
	position: absolute;
	display: block;
	top: 32px;
	left: 320px;
	width: 200px;
	height: 20px;
}
#loading1, #loading2 {
	position: absolute;
	display: none;
	width: 200px;
	height: 19px;
}
#loading1 {
	top: 132px;
	left: 305px;
}
#loading2 {
	top: 32px;
	left: 320px;
}