/* supression des marges par défaut */

.mer {
margin: 0;
padding: 0;
background-image: url(images/mer.jpg);
background-repeat:repeat; 
font-family: Comic Sans MS;
font-size: 100%;
}

.mer1 {
margin: 0;
padding: 0;
background-image: url(images/mer.jpg);
background-repeat:repeat; 
font-family: Comic Sans MS;
font-size: 100%;
}

/* supression des puces*/

li {
list-style-type: none;
}

.right_align
{
    text-align: right;
    margin : 0px;
}

.retrait {
margin-left: 30px;
width: 1000px;
}

.retrait4ph {
margin-left: 20px;
width: 950px;
}

.retrait3ph {
margin-left: 30px;
width: 740px;
}

.retrait2ph {
margin-left: 30px;
width: 500px;
}

.retrait3phlarg {
margin-left: 70px;
width: 850px;
}

.retrait4phlarg {
margin-left: 70px;
width: 950px;
}

.retraitcentrage {
margin-left: 120px;
width: 850px;
}


#paragraphe {
float: left;
width: 680px;
}

/* soulignements */

.souslignevieux
{
text-decoration: underline;
padding: 5px;  0px; 5px; 0px;
margin: 5px;  0px; 5px; 0px;
font-size: 90%;
}

.sousligne
{
text-decoration: underline;
padding: 5px; 
margin: 5px;
font-size: 90%;
}

.nonsouligne {
text-decoration: none;
padding : 5px;
margin : 5px;
}

.bouton
{
padding: 5px 8px 5px 8px;
border-width: 9px;
border-style: groove;
border-color: grey;
}

/* Centrage des titres h2 */

h2
{
width: 600px;
left: 40%;
color: #639;
font-size: 110%;
}

.blanc
{
text-decoration: none;
color: white;
font-size: 140%;
}

/*bloque l'espace */

.titre
{
width: 700px;
}

.maj
{text-decoration: none;
color: red;
}

/* supression des bordures des images */

img {
border-width: 0;
border-style: none;
}

/* couleur des liens*/

a {text-decoration: none;
color: blue;
}

a:hover {
color: red;
}

.maj
{text-decoration: none;
color: red;
}

/* conteneur page accueil */

#cadreaccueil {
width: 1000px;
position: absolute;
left: 50%;
margin-left: -500px;
}

/* conteneur page photos */

#cadrealbum4photos {
width: 1000px;
position: absolute;
left: 50%;
margin-left: -500px;
}

/* conteneur bannière */

#conteneurbanniere {
width: 950px;
top: 10px;
position: absolute;
height: 140px;
margin-left: 40px;
background-repeat: no-repeat;
background-position: center;
}

#cadrecentre {
width: 750px;
position: absolute;  
top: 215px;
left: 260px;
}

/* positionnement de l'image page accueil */

.imageaccueil {
text-align: center;
position: absolute;
top: 450px;
left: 45%;
}

/*conteneur menu*/

#navcontainer {
border-right: 1px solid blue;
padding-top: 20px;
position: absolute;
top: 210px;
left: -10px;
width: 245px;
}

/* bas de page webmaster*/

.webmaster li {
float: left;
padding:0 4px;
height: 40px;
font-size: 70%;
}

/* petits caracteres*/

#petite {
font-size: 60%;
}

.imgagauche {
float:left;
}



.imageadroite                  /* A utiliser pour mettre le texte a gauche et une image a droite */
{
    text-align: left;         /* Aligne le texte à gauche */
    margin-top: 1%;           /* crée une marge externe en haut du bloc */
    margin-left: 2%;          /* crée une marge externe à gauche du bloc */
    margin-right: 2%;         /* crée une marge externe à droite du bloc */
    margin-bottom: 2%;        /* crée une marge externe en bas du bloc */
    vertical-align: middle;    /* censé aligner le texte verticalement eu centre  */
    }
    
.imageadroite img               /* Classe automatique : assigne l'image dans le bord droit du bloc */
{
    float: right;               /* L'image est positionnée à droite sans "bloquer "la partie gauche */    
    margin-left: 4%;            /* Crée une marge interne à gauche de l'image */
    margin-bottom: 1%;           /* Crée une marge interne en dessous de l'image */ 
}

.imageagauche               /* Classe automatique : assigne l'image dans le bord gauche du bloc */
{
    float: left;               /* L'image est positionnée à gauche sans "bloquer "la partie droite */    
    margin-right: 4%;            /* Crée une marge interne à droite de l'image */
    margin-bottom: 2%;           /* Crée une marge interne en dessous de l'image */ 
}

.art_spacer { clear: both;} 
/* Permet de ne pas avoir les ligne du dessous à coté de l'image :) */

/* vignettes pour les albums*/

.vignette {float: left; padding: 6px; margin: 6px;}
.vignette ul {margin: 0.25em 0 0; padding: 0; font: bold small Arial, Verdana, sans-serif;}
.title li{display: block; text-align: center;}

/* format du tableau */

.tableau {
border-style: solid; 
border-width: 3px; 
border-color: black;
width:50%;
background-color: silver;
}

.tableau td { 
border-style: solid; 
border-width: 1px; 
border-color: black;
text-align: left;
}