html {
height:100%;
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
height:100%;
background: #fff;
font-family: arial,helvetica,sans serif;
color: #444;
}
img
{
border:0px;
}
.rouge
{
color:#e2001a;
}
#contenant {
margin-top:0;
margin-left:auto;
margin-right:auto;
width: 800px;
background:#fff;
}
#entete
{
margin:0;
padding:0;
height:90px;
background: url(images/logo2.gif) no-repeat 0px 0px;
}
#entete img
{
float:right;
}
#entete a
{
float:left;
display:block;
height:90px;
width:150px;
position:relative;
top:0px;
left:0px;
}
#entete a:hover
{
text-decoration:none;
}
#menu
{
clear:both;
margin-top:0;
padding:0;
margin-bottom:20px;
}
#menu ul
{
height: 25px ;
margin: 0 ;
padding: 0 ;
background: #e2001a;
list-style-type: none ;
}
/* On donne une hauteur au menu, correspondant a
la taille de l'image utilisée en fond, on met ensuite l'image de fond
avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */
#menu li
{
float: right;
text-align: center ;
}
#menu li.blanc
{
width: 103px ;
line-height: 25px ;
font-size: 12px ;
font-weight: bold ;
letter-spacing: 1px ;
color: #f00 ;
background-color:#fff;
display: block ;
text-decoration: none ;
border-right: 2px solid #fff ;
}
#menu li a
{
width: 103px ;
line-height: 25px ;
font-size: 12px ;
font-weight: bold ;
letter-spacing: 1px ;
color: #fff ;
display: block ;
text-decoration: none ;
border-right: 2px solid #fff ;
}/* C'est sur les liens que le gros du travail est
effectué, largeur, hauteur de ligne, taille de police, graisse de police,
espacement des lettres, couleur, bordure et decoration du texte.
Nous pouvons dimensionner les a grâce à la propriété display: block ; */
#menu li a.dernier
{
border:0;
}
#menu li a:hover
{
background:#fff;
color:#f00;
}/* Et pour finir on décale l'image de fond au passage
de la souris pour laisser aparaître l'état survolé de l'image,
voir le tutoriel sur les roll over pour plus de détails */
#publicite
{
float:right;
width:250px;
background-color:#fff;
margin:0;
padding:0;
}
#encart
{
margin-left:auto;
margin-right:auto;
margin-top:20px;
background: url(images/8euros.jpg) no-repeat top left;
width:222px;
height:240px;
}
#encart a.bloc
{
display:block;
font-size: 12px ;
font-weight: bold ;
letter-spacing: 1px ;
color: #fff ;
width: 222px;
height:214px;
position:relative;
left:0px;
top:0px;
text-decoration: none ;
background:transparent;
}
#encart a
{
font-size: 12px ;
font-weight: bold ;
letter-spacing: 1px ;
color: #fff ;
width: 80px;
position:relative;
left:132px;
top:0px;
text-decoration: none ;
background:#e2001a;
}
#encart a:hover
{
text-decoration:underline;
}
#page
{
float:right;
width:550px;
background:#fff;
font-size: 13px;
}
#page h3
{
color:#000;
font-weight:normal;
margin:3px;
margin-left:10px;
text-align:justify;
}
#page h2
{
color:#333;
font-weight:normal;
margin:3px;
margin-left:10px;
}
#page h2.rouge
{
color:#e2001a;
}
#page p
{
margin-left: 10px;
text-align:left;
}
#page p.strong
{
font-weight:bold;
}
a
{
color:#e2001a;
text-decoration:none;
}
a:hover
{
text-decoration:underline;
}
#pied
{
background:#8c8d8e;
color:#e2001a;
clear:both;
font-weight:bold;
font-size: 11px;
}
#pied div
{
background:#ddd;
width:50%;
line-height:40px;
height:40px;
}
#pied p
{
margin-left:10px;
text-align: left;
}
#pied a
{
color:#e2001a;
text-decoration:none;
}
#pied a:hover
{
text-decoration:underline;
}
#pied .left
{
float:left;
}
#pied .right
{
float:left;
text-align:right;
}
#pied2
{
text-align:center;
background:#fff;
color:#e2001a;
font-weight:bold;
font-size: 11px;
}
#pied2 a
{
color:#e2001a;
text-decoration:none;
}
#pied2 a:hover
{
text-decoration:underline;
}
#actu
{
margin-left:auto;
margin-right:auto;
margin-top:40px;
margin-bottom:10px;
width:222px;
}
#a_haut
{
margin:0;
padding:0;
background: url(images/haut.gif) no-repeat top left;
width:222px;
height:9px;
}
#a_bas
{
margin:0;
padding:0;
background: url(images/bas.gif) no-repeat top left;
width:222px;
height:9px;
}
#a_milieu
{
margin:0;
padding:0;
background: url(images/milieu.gif) repeat-y top left;
width:222px;
}
#a_texte
{
color:#000;
margin:0;
margin-left: 5px;
margin-right: 5px;
padding:0;
width:222px;
font-size:16pt;
text-align:center;
}
#a_texte a
{
text-decoration:none;
color:#333;
}
#a_texte a:hover
{
text-decoration:underline;
}
#a_texte a:hover span.rouge
{
text-decoration:underline;
}
#a_titre
{
margin-left:5px;
color:#e2001a;
font-weight:bold;
font-size:18pt;
}
#a_sloganf
{
font-family:verdana;
font-size:16pt;
color:#fff;
background:#e2001a;
}
#a_slogan
{
margin-left:5px;
color:#fff;
}
#a_explicatif
{
font-size:12px;
margin-left:5px;
margin-right:5px;
text-align:justify;
line-height:12pt;
}
#t_texte
{
margin:0;
margin-left: 5px;
margin-right: 5px;
padding:0;
width:222px;
font-size:9pt;
text-align:center;
}
a.frouge
{
font-size: 12px ;
font-weight: bold ;
letter-spacing: 1px ;
color: #fff ;
width: 80px;
position:relative;
left:35%;
text-decoration: none ;
background:#e2001a;
}
a.frouge:hover
{
text-decoration:underline;
}
#connexion input.texte
{
float:right;
width:90px;
margin-bottom:10px;
margin-right:5px;
}
#connexion div
{
clear:both;
height:25px;
}
#connexion label
{
margin-left:5px;
float:left;
}
#commande
{
font-size:12px;
clear:both;
width:620px;
}
#commande label
{
float:left;
}
#commande input.ctexte
{
float: right;
margin-bottom: 5px;
margin-right:5px;
width:140px;
}
#commande input.check
{
float: left;
margin-bottom: 5px;
margin-right:5px;
}
#commande input.bouton
{
float:right;
margin-bottom: 5px;
margin-right:5px;
}
#commande select
{
margin-bottom: 5px;
}
#commande select.nbb
{
margin-bottom: 5px;
margin-left:85px;
}
#commande fieldset.coordonnees
{
clear:both;
width: 600px;
border-color:#e2001a;
padding-bottom:0px;
margin:auto;
}
#commande fieldset
{
clear:both;
width: 350px;
border-color:#e2001a;
padding-bottom:0px;
margin:auto;
}
#commande legend
{
color:#333;
font-weight:bold;
}
#etapes
{
width:550px;
height:64px;
background:url(images/trait.jpg) repeat-x left center;
}
#e1
{
position:relative;
top:16px;
left:0px;
}
#e2
{
position:relative;
top:16px;
left:193px;
}
#e3
{
position:relative;
top:16px;
left:390px;
}
#packs
{
width:620px;
margin-left:auto;
margin-right:auto;
}
#iadmin
{
width:720px;
margin-left:auto;
margin-right:auto;
}
#recap
{
width:720px;
margin-left:auto;
margin-right:auto;
}
.etitre
{
height:64px;
background: #e2001a;
color:#fff;
font-size:16pt;
font-weight:bold;
float:left;
margin-right:30px;
}
.eactive
{
width:64px;
height:64px;
background: url(images/eactive.png) no-repeat;
color:#e2001a;
font-size:16pt;
font-weight:bold;
float:left;
}
.einactive
{
width:64px;
height:64px;
background: url(images/einactive.png) no-repeat;
color:#fff;
font-size:16pt;
font-weight:bold;
float:left;
}
.relatif
{
position:relative;
top:5px;
left:10px;
}
.enom
{
position:relative;
top:18px;
font-weight:bold;
}