/* supression des marges ,le corps occupe la totalite de l'espace*/
body, html
{
height: 100%; 
margin : 0; 
padding: 0; 
background-image: url(fonds/fond.jpg);
background-color: #4a5352;
}
/* block conteneur centré, position relative pour que les blocks qu'il contient puissent s'y référer .
Hauteur mini de 100% de la fenetre navigateur pour que la frise du bas soit tjs en bas de le fenetre*/

#conteneur
{
position: relative;
width: 950px; 
margin: 0 auto; 
min-height: 100%;
}
/* les blocks suivants sont DANS le conteneur. En position absolue se référent coin en haut a gauche du conteneur.
Meme les TAILLES en % sont en reference au conteneur*/
#menu
{
position: absolute; 
top: 2px; 
left: 13px;
margin: 0 auto;
}
/* le menu est placé avant la frise dans le code html, ainsi il apparait bien DESSOUS la frise */
#frise_haut
{
position: absolute;
width: 100%;
height: 40px;
top: 0px;
left: 0px; 
}
#friseH
{
width: 100%;
}
/* le block conteneur d'image sert uniquement a positioner l'image par rapport au bord haut-gauche du conteneur, 
et pas a definir la taille de l'image*/
#logo
{
position: absolute; 
top: 90px;
left: 0px;  
}
/* la taille du logo_image en % est referente au conteneur, et plus au block qui la contient !!
-> pas sous Mozilla!!-> mettre une taille FIXE en px !*/
#logo_image
{
width: 120px; 
height: 130px;
}
table
{
margin: 0 auto;
border-collapse: collapse;
}
td
{ 
padding: 0px;
}

a
{
color: #FFD433; 
text-decoration: none; 
}
a:hover
{
color: white; 
}
#frise_bas
{

position: absolute; 
bottom: 0; left:0; 
width: 100%;
}
#friseB
{
width: 100%; 
}
/* le block contenu n'est pas en position absolue, mais en flux, pour que la modification de sa hauteur soit prise 
en compte dans la taille du conteneur (qu'il soit imbriqué DANS le conteneur).Et donc que la frise du bas soit bien 
toujours en bas */
/* de plus , il est placé juste DESSOUS la balise conteneur dans le code html, pour que ses margin soit en refrence 
au conteneur -> ne marche pas sous mozilla pour les marges haut et bas !!!*/

#contenu
{

padding-top: 200px;
padding-bottom: 50px;
margin: 0 auto;
width: 600px;
}
/*les margin du contenu place le block vert horizontalement dans le conteneur
les margin top et bottom decalent tout sur mozzila !
les padding place le block_cadre a l'interieur du block contenu
les paddind left et right dont a calculer en fonction 
le block_cadre doit avoir une taille fixe : la taille de l'image des pavés encadrés du collier*/

#block_cadre
{

color: #eeeff0;
padding-top: 60px; 
margin: 0 auto;
background-image: url(fonds/fondContact.png);
background-repeat: no-repeat; 
width: 480px; 
height: 360px; 
overflow: auto; 
}

/* les paddings ici placent le block texte dans le block_cadre
min-width : largeur fixe d'au moins 530 px, qque doit le contenu, pour que l'image collier ne soit pas coupée
faire attention à ce que le texte ne déborde pas ... dans ce cas pré voir une barre de défilement overflow*/

#texte
{
font-family:  "trebuchet MS", verdana, serif; 
letter-spacing: 0.6px;
line-height: 130%; 
text-align: center;
}

/* les paddings du block texte place le texte dans son block*/

.celluleBas
{
padding-right: 5px; 
padding-left: 5px; 
}
.celluleBasT
{
font-weight: bold; 
}

#basPage
{
margin-right: 50px; 
}
#pied
{
font-family: arial, Verdana, Times, serif;
font-size: 0.8em;
color: #FFD433; 
position: absolute; 
bottom: 50px;
width: 100%;
height: 20px;
}