/* CSS Document */

body {
margin:0;
padding:0;
background:url(image/fond_page.gif) repeat-y top center;
}

img {
border:0;
}

ul {
list-style:none;
margin:0;
padding:0;
}

li {
margin:5px 0;
padding:0;


}

#conteneur {
position:relative;
width:850px;
left:50%;
margin-left:-425px;
font-family: Helvetica, Verdana;
font-size:11px;
line-height:14px;
color:#333333;
}


#look {
float:left;
width:500px;
padding:25px 0 10px 0;
margin:0 0 0 30px;
text-align:center;
color:#FFFFFF;
font-size:13px;
font-weight:700;
}

#video {
float:left;
text-align:center;
margin:10px 0 50px 30px;
width:500px;
}

#spot {
float:left;
text-align:left;
margin:10px 0 450px 30px;
width:500px;
color:#fff;
font-weight:700;
line-height:16px;
font-size:12px;
}

#nav {
position:absolute;
width:270px;
height:200px;
top:230px;
left:570px;
background:url(image/fond_nav.jpg) no-repeat top left;
padding:15px 0 0 10px;
}

#nav a {
background:url(image/puce.jpg) no-repeat left center;
color:#FFFFFF;
font-weight:700;
font-size:12px;
line-height:17px;
text-decoration:none;
padding:8px 0 0 30px;
}

#nav a:hover {
text-decoration:underline;
}

#nav .message {
clear:left;
color:#FFFFFF;
line-height:12px;
font-size:11px;
padding:0 0 0 10px;
}

#formulaire  {
float:left;
padding:5px 0 0 25px;
}

#formulaire .champ {
float:left;
height:30px;
}

input, textarea {
color:#333333;
}


.submit {
color:#333;
font-weight:700;
text-align:center;
line-height:23px;
height:23px;
border:1px solid #333333;
background:#CCCCCC;
font-size:13px;
}


input:focus {
font-weight:700;

}



#footer {
clear:left;
background:#336699;
width:850px;
height:25px;
line-height:25px;
color:#FFFFFF;
text-align:center;
}


#bouton {
position:absolute;
width:245px;
height:97px;
top:456px;
left:605px;

}

#footer a {
color:#FFFFFF;
font-weight:700;
font-size:12px;
text-decoration:none;
}

#footer a:hover {
text-decoration:underline;
}

/* ---------------------------------    QUIZ ------------- */ 

#quiz {
float:left;
width:550px;
margin:40px 0 50px 20px;
}

#quiz ul {
background:url(image/puce_bleu.jpg) no-repeat left top;
color:#FFFFFF;
font-weight:700;
font-size:15px;
padding:2px 0 0 35px;
list-style-type:none;
margin:0 0 25px 0;
}

#quiz li {
margin:0 0 0 5px;
padding:0;
font-size:11px;
line-height:20px;
}

#quiz ul li {
padding:1px 0 0 0;
}


#quiz p {
margin:0;
padding:0 0 0 150px;

}

#quiz h3 {
color:#FFFFFF;
font-size:11px;
margin:0;
padding:0;
}

#quiz h2 {
color:#FFFFFF;
font-size:12px;
margin:0 0 20px 0;
padding:0;
}

/* ---------------------------------    QUIZ2 ------------- */ 

#quiz2 {
float:left;
width:820px;
margin:40px 0 50px 20px;
}

#quiz2 ul {
background:url(image/puce_bleu.jpg) no-repeat left top;
color:#FFFFFF;
font-weight:700;
font-size:15px;
padding:2px 0 0 35px;
list-style-type:none;
margin:0 0 25px 0;
}

#quiz2 li {
margin:0 0 0 5px;
padding:0;
font-size:11px;
line-height:20px;
}

#quiz2 ul li {
padding:1px 0 0 0;
}


#quiz2 p {
margin:0;
padding:0 0 0 150px;

}

#quiz2 h3 {
color:#FFFFFF;
font-size:11px;
margin:0;
padding:0;
}

#quiz2 h2 {
color:#FFFFFF;
font-size:12px;
margin:0 0 20px 0;
padding:0;
}


.pourcentage {
color:#87b5ff;
font-size:16px;
font-weight:700;
}

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

#mentions {
float:left;
width:500px;
color:#FFFFFF;
font-size:12px;
margin:20px 0 50px 20px;
}

#mentions h1 {
font-size:18px;
color:#336699;
font-weight:700;
padding:0 0 5px 0;
}

#mentions h2 {
font-size:15px;
color:fff;
font-weight:700;
}