@charset "UTF-8";

/* GLOBAL */

body {
	background: #eb701d url(../.images/fond-degrade-orange.png) repeat-x left top;
}

/* BLOC DES AVERTISSEMENTS */

div#avertissements {
	margin: 0; padding: 0;
	background: black url(../.images/index-avertissements.png) repeat-x center bottom;
	color: white;
}
div#avertissements p {
	width: 730px;
	margin: 0 auto;
	padding: .5em 0;
}
div#avertissements p strong {
	font-weight: normal;
	color: #FFAA33;
}
div#avertissements p a {
	font-size: 1.2em;
}
div#avertissements p#oggvorbis {
	padding: 1em 0 1.4em 0;
	margin-bottom: 5px;
}
div#avertissements p#internetexplorer {
	font-size: 1.4em;
	line-height: 1.3em;
}

/* BLOC D'INFORMATIONS */

div#informations {
	float: left;
	width: 380px;
	margin-top: 20px;
}

/* Introduction */
div#bloc-info {
	margin-left: 40px;
	color: white;
}
div#bloc-info div.principal {
	min-height: 60px;
	padding: 40px 40px 1px 35px;
	background: url(../.images/index-bloc-info.png) no-repeat left top;
}
div#bloc-info div.principal h2,
div#bloc-info div.principal p {
	margin: 0;
	padding: 5px 10px;
	background: black;
	color: #eee;
}
div#bloc-info div.principal h2 {
	padding-top: 10px;
	font-size: 1.2em;
	font-variant: small-caps;
}
div#bloc-info div.principal h2:first-child {
	padding-top: 0;
}
div#bloc-info div.fin {
	height: 28px;
	background: url(../.images/index-bloc-info.png) no-repeat left bottom;
}

/* En savoir plus... */
div#bloc-plus {
	margin-left: 40px;
	color: white;
}
div#bloc-plus div.principal {
	min-height: 40px;
	padding: 40px 40px 1px 35px;
	background: url(../.images/index-bloc-plus.png) no-repeat left top;
}
div#bloc-plus div.principal h2,
div#bloc-plus div.principal p {
	margin: 0;
	padding: 5px 10px;
	background: black;
	color: #eee;
}
div#bloc-plus div.principal h2 {
	padding-top: 10px;
	font-size: 1.2em;
	font-variant: small-caps;
}
div#bloc-plus div.principal h2:first-child {
	padding-top: 0;
}
div#bloc-plus div.fin {
	height: 28px;
	background: url(../.images/index-bloc-plus.png) no-repeat left bottom;
}

/* BLOC DES PLAYLISTS */

div#playlists {
	margin-left: 430px;
	margin-top: -50px;
	color: white;
}

/* Styles pour les trois blocs */
div.bloc-playlist {
	position: relative;
	margin: 15px 0;
}
div.bloc-playlist div.principal {
	min-height: 100px;
	padding: 45px 25px 1px 95px;
	background: url(../.images/index-bloc-rouge.png) no-repeat left top;
}
div.bloc-playlist div.principal h2 {
	margin: 0 0 5px 8px;
	font-size: 1em;
}
div.bloc-playlist div.principal p.vignette {
	position: absolute;
	left: 7px;
	top: -5px;
	margin: 0;
	width: 85px;
	height: 97px;
}
div.bloc-playlist div.principal p.vignette img {
	display: block;
}
div.bloc-playlist div.principal p {
	line-height: 1.3em;
	margin: 5px 0;
}
div.bloc-playlist div.principal p:first-child {
	margin-top: 0;
}
div.bloc-playlist div.principal p.smaller {
	font-size: .9em;
	margin: 2px 0;
}
div.bloc-playlist div.fin {
	height: 18px;
	background: url(../.images/index-bloc-rouge.png) no-repeat left bottom;
}

/* Styles spécifiques */
div#rock div.principal, div#rock div.fin {
	background-image: url(../.images/index-bloc-rouge.png);
}
div#electro div.principal, div#electro div.fin {
	background-image: url(../.images/index-bloc-bleu.png);
}
div#chanson div.principal, div#chanson div.fin {
	background-image: url(../.images/index-bloc-vert.png);
}

/* PIED DE PAGE */

p#piedpage {
	clear: both;
	margin: 0 40px 10px 40px;
	padding-top: 10px;
	text-align: center;
	font-size: .9em;
	color: white;
}
p#piedpage a {
	color: #ff6;
	border-bottom: none;
}
p#piedpage a:hover,
p#piedpage a:focus,
p#piedpage a:active {
	color: black;
}