/* CSS Document */

/* Site marcduquenoy.com // © 2008 Autrement le Web */

/* NORMALISATION
-------------------------------------------------------- */

/* Normalise les marges et le remplissage */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, label, input, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

/* Normalise les tailles de polices pour les en-têtes */
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}

/* Supprime list-style pour les listes */
ul, ol {
	list-style: none;
}

/* Normalise les styles et graisses de fontes : font-style et font-weight sont "normal" */
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}

/* Supprime les bordures dans les tableaux */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Supprime les bordures dans les éléments fieldset et img */
fieldset, img {
	border: 0;
}

/* Aligne le texte à gauche dans caption et th */
caption, th {
	text-align: left;
}

/* Petite astuce pour apprendre aux utilisateurs à cliquer sur les intitulés */
label:hover {
	cursor: pointer;	
}

/* ---------------------------------------------------- */

/* PAGE
-------------------------------------------------------- */

html {
	background-color: #000;
}

body {
	position: relative; /* important! */
	width: 755px;
	margin: 0 auto;
	padding: 0;
	font: 1em "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	color: #fff;
} 

/* ---------------------------------------------------- */

/* HEADER
-------------------------------------------------------- */

#header {
	position: relative;
	padding: 0;
	width: 755px;
	height: 265px;
}

#header h1, #header blockquote {
	position: absolute;
	text-indent: -9999px;
}

#header h1 {
	position: absolute;
	left: 0;
	top: 98px;
	width: 755px;
	height: 167px;
	background: transparent url(/img/logo.jpg) no-repeat 0 0;	
}

ul#menu {
	position: absolute;
	left: 0;
	top :0;
	width: 755px;
	height: 98px;
}

li#menu_accueil a {
	position: absolute;
	left: 0;
	top: 0;
	width: 151px;
	height: 98px;
	background: transparent url(/img/menu/accueil.gif) no-repeat 0 0;
	outline: none; /* masque les pointillés disgracieux résultant du text-indent */	
}

li#menu_demo_voix a {
	position: absolute;
	left: 151px;
	top: 0;
	width: 151px;
	height: 98px;
	background: transparent url(/img/menu/demo.gif) no-repeat 0 0;
	outline: none; /* masque les pointillés disgracieux résultant du text-indent */	
}

li#menu_videos a {
	position: absolute;
	left: 302px;
	top: 0;
	width: 151px;
	height: 98px;
	background: transparent url(/img/menu/videos.gif) no-repeat 0 0;
	outline: none; /* masque les pointillés disgracieux résultant du text-indent */	
}

li#menu_bio a {
	position: absolute;
	left: 453px;
	top: 0;
	width: 151px;
	height: 98px;
	background: transparent url(/img/menu/bio.gif) no-repeat 0 0;
	outline: none; /* masque les pointillés disgracieux résultant du text-indent */	
}

li#menu_contact a {
	position: absolute;
	left: 604px;
	top: 0;
	width: 151px;
	height: 98px;
	background: transparent url(/img/menu/contact.gif) no-repeat 0 0;
	outline: none; /* masque les pointillés disgracieux résultant du text-indent */	
}

li#menu_accueil a, li#menu_demo_voix a, li#menu_videos a, li#menu_bio a, li#menu_contact a {
	position: absolute;
	text-indent: -9999px;
}

li#menu_accueil a:hover, li#menu_demo_voix a:hover, li#menu_videos a:hover, li#menu_bio a:hover, li#menu_contact a:hover {
	background-position: 0 -98px;
}

li#menu_accueil.on {
	position: absolute;
	left: 0;
	top: 0;
	width: 151px;
	height: 98px;
	background: transparent url(/img/menu/accueil.gif) no-repeat 0 -98px;
	text-indent: -9999px;
}

li#menu_demo_voix.on {
	position: absolute;
	left: 151px;
	top: 0;
	width: 151px;
	height: 98px;
	background: transparent url(/img/menu/demo.gif) no-repeat 0 -98px;
	text-indent: -9999px;
}

li#menu_videos.on {
	position: absolute;
	left: 302px;
	top: 0;
	width: 151px;
	height: 98px;
	background: transparent url(/img/menu/videos.gif) no-repeat 0 -98px;
	text-indent: -9999px;
}

li#menu_bio.on {
	position: absolute;
	left: 453px;
	top: 0;
	width: 151px;
	height: 98px;
	background: transparent url(/img/menu/bio.gif) no-repeat 0 -98px;
	text-indent: -9999px;
}

li#menu_contact.on {
	position: absolute;
	left: 604px;
	top: 0;
	width: 151px;
	height: 98px;
	background: transparent url(/img/menu/contact.gif) no-repeat 0 -98px;
	text-indent: -9999px;
}

/* ---------------------------------------------------- */

/* CONTENT
-------------------------------------------------------- */

#content_hp {
	position: relative;
	margin-top: 20px;
	width: 755px;
	height: 574px;
	font-size: 0.95em;
	overflow: hidden;
	background: transparent url(/img/gouttiere.gif) no-repeat 0 0;
}

#demo_voix {
	position: absolute;
	left: 0;
	top: 0;
	padding: 0 40px 0 0;
	width: 368px;
	height: 335px;
}

#demo_voix h2 {
	width: 408px;
	height: 48px;
	background: transparent url(/img/h2-demo-voix.gif) no-repeat 0 0;
	text-indent: -9999px;	
}

#demo_voix p {
	padding: 10px 0 0 0;
}

#actu {
	position: absolute;
	left: 0;
	top: 335px;
	padding: 0 40px 0 0;
	width: 368px;
	height: 239px;
}

#actu h2 {
	width: 408px;
	height: 56px;
	background: transparent url(/img/h2-actu.gif) no-repeat 0 22px;
	text-indent: -9999px;	
}

#actu ul {
	padding-bottom: 20px;
}

#actu li {
	padding-left: 16px;
	background: transparent url(/img/puce.gif) no-repeat 0 6px;	
}

#medley_video {
	position: absolute;
	left: 408px;
	top: 0;
	width: 347px;
	height: 335px;
}

#medley_video h2 {
	width: 347px;
	height: 48px;
	background: transparent url(/img/h2-medley-video.gif) no-repeat 0 0;
	text-indent: -9999px;	
}

#home_studio {
	position: absolute;
	left: 408px;
	top: 335px;
	padding: 0 0 0 0;
	width: 347px;
}

#home_studio h2 {
	width: 347px;
	height: 56px;
	background: transparent url(/img/h2-home-studio.gif) no-repeat 0 22px;
	text-indent: -9999px;	
}

#content_bio, #content_videos, #content_demo_voix, #content_contact, #content_mentions {
	position: relative;
	width: 755px;
	font-size: 0.95em;
}

#content_bio h2, #content_bio h3, #content_bio p, #content_bio ul, #content_videos h2, #content_demo_voix h2, #content_demo_voix h3, #content_demo_voix p, #content_demo_voix ul, #content_contact h2, #content_contact p, #content_mentions h2, #content_mentions h3, #content_mentions p  {
	margin: 0 20px 20px 20px;
	text-align: justify;
}

#content_bio p.center, #content_contact p.center {
	margin: 0 20px 20px 20px;
	text-align: center;
}

#content_bio h2 {
	font-size: 1.25em;
	color: #f7c12b;
}

#content_bio h2.bio {
	width: 86px;
	height: 80px;
	background: transparent url(/img/bio.gif) no-repeat 0 0;
	text-indent: -9999px;		
}

#content_videos h2.videos {
	width: 86px;
	height: 80px;
	background: transparent url(/img/videos.gif) no-repeat 0 0;
	text-indent: -9999px;		
}

#content_demo_voix h2.demo_voix {
	width: 121px;
	height: 80px;
	background: transparent url(/img/demo-voix.gif) no-repeat 0 0;
	text-indent: -9999px;		
}

#content_contact h2.contact {
	width: 99px;
	height: 80px;
	background: transparent url(/img/contact.gif) no-repeat 0 0;
	text-indent: -9999px;		
}

#content_mentions h2.mentions {
	width: 177px;
	height: 80px;
	background: transparent url(/img/mentions.gif) no-repeat 0 0;
	text-indent: -9999px;		
}

#content_bio h3, #content_demo_voix h3, #content_mentions h3 {
	font-size: 1.1em;
	color: #f7c12b;
}

#content_bio li, #content_demo_voix li {
	padding-left: 16px;
	background: transparent url(/img/puce.gif) no-repeat 0 6px;	
}

#content_demo_voix #specialite {
	height: 390px;
	padding-right: 360px;
}

#content_demo_voix #specialite p {
	margin-bottom: 15px;
	text-align: left;
}

#content_demo_voix #player {
	position: absolute;
	left: 405px;
	top: 90px;
}

/* ---------------------------------------------------- */

/* FOOTER
-------------------------------------------------------- */

#footer {
	clear: both;
	padding: 34px 0 50px 0;
	width: 755px;
	font-size: 0.7em;
	text-align: center;
	background: transparent url(/img/gouttiere-footer.gif) no-repeat 0 10px;
}

/* ---------------------------------------------------- */

/* CLASSES COMMUNES
-------------------------------------------------------- */

a:link, a:visited {
	color: #f7c12b;
	text-decoration: none;
	font-weight: bold;
}

a:hover, a:active {
	color: #fff;
	text-decoration: underline;
}

strong {
	font-weight: bold;
}

.center {
	text-align: center;
}