body{ margin: 0; padding: 0; min-width: 1000px; color: #606060; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5em; background-color: #e0e0e0; }
a{ color: #606060; text-decoration: underline; cursor: pointer; }
a:hover{ text-decoration: none; }
a img{ border: none; }
p{ display: block; margin: 0 0 1.5em 0; padding: 0; }
ul, li, form, label{ margin: 0; padding: 0; }

.img{ display: block; margin: 0 20px 20px 0; width: 300px; border-radius: 4px; }
.img.left{ float: left; margin: 0 20px 20px 0; }
.img.right{ float: right; margin: 0 0 20px 20px; }

.full{ width: 100%; }
.clear{ clear: both; }
.hide{ display: none; }
.left{ float: left; }
.right{	float: right; }

.content{ margin: 20px; }
.title{ display: block; margin: 0 0 1.5em 0; color: #404040; font-size: 14px; font-weight: bold; }

.extend-loader-box{ display: block; text-align: center; }
.loader-box{ display: inline-block; margin: 0 auto; padding: 10px 20px; font-size: 14px; font-weight: bold; background-color: #ffffff; border-radius: 4px; }

.extend-header{ width: 100%; text-align: center; background: #002E47 url(header.png) no-repeat top center; }
	.header{ position: relative; margin: 0 auto; width: 1000px; height: 140px; text-align: left; background: #002E47 url(header.png) no-repeat top center; }
		.header-logo{ position: absolute; top: 18px; left: 10px; }
			.header-logo img{ display: block; }

.extend-player-navigation{ width: 100%; text-align: center; background: #222222 url(player/shader.png) repeat-x top left; overflow: hidden; }
	.player-navigation{ margin: 0 auto; width: 1000px; height: 40px; text-align: left; }
		.player-navigation ul{ display: block; }
		.player-navigation li{ display: block; float: left; background: none; }
		.player-navigation li.right{ float: right; }
		.player-navigation a{ display: block; margin: 0; padding: 0 18px; height: 40px; color: #606060; text-decoration: none; font-size: 13px; font-weight: bold; line-height: 40px; }
		.player-navigation a:hover{ color: #ffffff; }
		.player-navigation a.current{ margin: 4px 0 0 0; height: 36px; line-height: 36px; color: #ffffff; background-color: #333333; background: #333333 url(player/player-background.png) repeat top center; border-radius: 4px 4px 0 0; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.6); }

.extend-player{ padding: 4px 0; width: 100%; text-align: center; background-color: #333333; background: #333333 url(player/player-background.png) repeat top center; }
	.player{ margin: 0 auto; width: 1000px; height: 120px; text-align: left; overflow: hidden; }
		.player-cover{ float: left; width: 120px; height: 120px; background: #222222 url(player/no-cover.png) no-repeat center center; }
			.player-cover img{ display: block; width: 120px; height: 120px; }
		.player-controls{ position: relative; float: left; margin: 10px; }
		.player-control-play{ float: left; display: block; width: 32px; height: 32px; background: #222222 url(player/button-playPause.gif) no-repeat; }
		.player-control-play.played{ background-position: 0 -32px; }
		.player-control-play.paused{ background-position: 0 0; }
		.player-control-play.load{ background-position: 0 -64px; }
		.player-infos{ float: left; margin: 18px; }
			.player-title{ display: block; margin: 0 0 8px 0; color: #ffffff; font-size: 14px; font-weight: bold; }
			.player-artist{ display: block; color: #909090; }
		.player-volume{ float: right; }

.extend-navigation{ width: 100%; text-align: center; background-color: #006796; overflow: hidden; }
	.navigation{ margin: 0 auto; width: 1000px; height: 40px; text-align: left; }
		.navigation ul{ display: block; }
		.navigation li{ display: block; float: left; background: none; }
		.navigation li.right{ float: right; }
		.navigation a{ display: block; margin: 0; padding: 0 18px; height: 40px; color: #aad9ea; text-decoration: none; font-size: 14px; font-weight: bold; line-height: 40px; }
		.navigation a:hover{ color: #ffffff; }
		.navigation a.current{ margin: 4px 0 0 0; height: 36px; line-height: 36px; color: #404040; background-color: #e0e0e0; border-radius: 4px 4px 0 0; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.6); }

.extend-container{ width: 100%; text-align: center; }
	.container{ margin: 0 auto; width: 1000px; padding: 40px 0; text-align: left; }
		.container-left{ float: left; width: 640px; }
		.container-right{ float: right; width: 340px; }

.playlist{ float: left; margin: 0 0 20px 0; width: 340px; height: 300px; overflow: hidden; }
	.playlist-song{ position: relative; margin: 0 0 5px 0; width: 100%; height: 70px; }
		.playlist-song-cover{ position: absolute; top: 5px; left: 5px; width: 60px; height: 60px; background: #c0c0c0 url(no-cover.png) no-repeat center center; border-radius: 4px; overflow: hidden; }
			.playlist-song-cover img{ width: 60px; height: 60px; }
		.playlist-song-infos{ position: absolute; top: 10px; left: 90px; width: 230px; height: 50px; }
			.playlist-song-title{ display: block; margin: 0 0 8px 0; color: #404040; font-weight: bold; font-size: 14px; line-height: 1.5em; }
			.playlist-song-artist{  }
			.playlist-song-time{  }

.slider{ position: relative; float: right; width: 640px; height: 300px; background: #e0e0e0; border-radius: 4px; overflow: hidden; }
	.slider img{ position: absolute; top: 0; left: 0; width: 640px; height: 300px; }
	.slider-controls{ position: relative; float: right; margin: 0 0 20px 0; width: 640px; height: 40px; text-align: center; overflow: hidden; }
		.slider-controls ul{ position: absolute; top: 14px; left: 0; right: 0; display: block; }
		.slider-controls li{ display: inline-block; }
		.slider-controls a{ display: inline-block; margin: 0 10px; width: 12px; height: 12px; background-color: #c0c0c0; border-radius: 6px; }
		.slider-controls a.current{ background-color: #03719a; }

.container-content{ margin: 0 0 20px 0; background-color: #ffffff; border-radius: 4px; overflow: auto; }

.container-box{ margin: 0 0 20px 0; color: #ffffff; background-color: #006796; border-radius: 4px; overflow: auto; }
	.box-name{ padding: 10px 20px; color: #ffffff; font-weight: bold; background: #005177; }

.membre{ width: 50%; }
	.membre-avatar-container{ float: left; position: relative; margin: 0 0 20px 0; width: 180px; height: 160px; }
		.membre-picture{ position: absolute; top: 0; right: 0; width: 140px; height: 140px; background: #c0c0c0 url(no-picture.png) no-repeat center center; border-radius: 4px; overflow: hidden; }
			.membre-picture img{ width: 140px; height: 140px; }
		.membre-avatar{ position: absolute; bottom: 0; left: 0; width: 80px; height: 80px; background: #c0c0c0 url(no-avatar.png) no-repeat center center; border: 1px solid #909090; border-radius: 4px; overflow: hidden; }
			.membre-avatar img{ width: 80px; height: 80px; }
	.membre-infos{ float: left; margin: 0 0 20px 20px; }

.extend-footer{ width: 100%; text-align: center; background-color: #006796; }
	.footer{ margin: 0 auto; width: 1000px; color: #ffffff; text-align: left; overflow: auto; }