/*  --------------------------------------------------------------------------- menu ---------------------------------------------------------------------------*/
/*Pour le menu sur toutes les pages :*/


.menu
{
	position : absolute; 
	top : 30%; /* Cela correspond à 200 px */
	left : 2%; /* Cela correspond à 30 px */
	font-size : 100%; /* On met le texte du menu à une taille normale */
}
	
.menu li
{
	float : left;/* On a choisi la technique du flottant pour afficher le menu à l'horizontal*/
	list-style-type : none; /* On enlève les ronds à côté de la liste*/
	border : 1px solid black;
	position : relative	;
	top : -30px;       /* Positionne le menu sur la page. Définir une taille en pourcentage ne marche pas...  Je suis obligé de le mettre sinon le sous-menu ne s'affiche pas là où on veut.*/
	left : 30px;
	width : 150px;   /* On définit la largeur du menu. Si je met cette ligne dans le "paragraph" ul ul ça ne marche pas. Définir une taille en pourcentage ne marche pas...  */
	/* Si on modifie la largeur ici ne pas oublier de modifier la largeur quelques lignes en-dessous sinon le texte ne sera plus centré ! */
	
	background-color : red; /* On définit la couleur d'arrière-plan. Ca ne marche pas. Si on veut définir une couleur rouge en arrière-plan il faut insérer red dans la ligne du dessous */
	background : url("couvert.png") left no-repeat #cd0067;  /* On peut définir une image en arrière-plan : cette ligne ne marche pas si on la met dans .menu li a*/
	height : 20px;   /*  Permet de définir la hauteur du titre  */
	text-align : center; /*  On centre le texte */
	font-weight : bold;
}

/*  On personnalise chaque item de menu */
#espace
{
	background : url("rose.ico") left no-repeat #cd0067;
}

#decoration
{
	background : url("pot.png") left no-repeat #cd0067;
}

#reception
{
	background : url("collier.png") left no-repeat #cd0067;
}


#pratique
{
	background : url("trombone.png") left no-repeat #cd0067;
}

#accueil
{
	background : url("maison.ico") left no-repeat #cd0067;
}
/*  Fin des images personnalisées pour chaque item de menu */

/* J'ai isolé ces 2 propriétés pour uniformiser la couleur sur tout le menu et les sous-menus */
.menu li, .menu li a
{
	color : #fff;
}

.menu ul ul
{
	display : none; /* On cache le sous-menu (niveau 2) si le visiteur n'a pas la souris dessus */
	padding : 0;
	margin :0;
	position : absolute; /* Permet d'éviter que le menu fasse bouger le reste de la page si on va sur un sous-menu, en relative ça fait un effet pas mal, la position fixed ne marche pas*/
}

.menu ul.niveau2
{
	top : 50px; /* Pour que le sous-menu soit juste en-dessous du menu principal */
	left : -29.5px;
}

.menu ul.niveau2 li  /*  On enlève les petites images à gauche du menu pour le sous-menu */
{
	background : left no-repeat #cd0067;
}

.menu li a
{
	text-decoration : none; /* On ne souligne pas les liens  */
	display : block; /* On fait en sorte que tout le rectangle soit cliquable : en déclarant le lien comme étant un block */
	width : 150px; /*en mettant au lien la même largeur que le menu  */
}

.menu li a:hover, .menu li a:focus
{
	text-decoration : underline; /*  On ne souligne pas les liens sauf s'ils sont sélectionnés */
	/*avec background : url("enveloppes.ico") left no-repeat; On peut définir une image en arrière-plan si la souris est dessus*/
}

.menu li:hover
{
	background-color : #ff0080;  /* Permet de définir la couleur qand on a la souris sur le menu  */
}

		
.menu li:hover ul.niveau2
{
	display : block;/* On montre le sous-menu (niveau 2) si le visiteur a la souris dessus */
}


/*  ---------------------------------------------------------------------------fin du menu ---------------------------------------------------------------------------*/




/* -------------------------------------------------------------Partie coordonnee.php :--------------------------------------------------*/

iframe /* Pour la map de Google, l'iframe montrant la carte */
{
	border: 10px groove #cd0067;
	position : relative;
	left : 50px;
	margin-top :3%;
	margin-left : 22%;
}

.plan /* Paragraphe : plan d'accès   */
{
clear : both;
position : relative;
left : 27%;
}
.float
{
	float : left;
}

.floatd
{
	float : right;
}

/*  Utilisé dans la page coordonnee.php  */
.float_decale
{
	float : left;
	margin-right : 50px;
}

.float_decale_petit
{
	float : left;
	margin-right : 10px;
}

.nofloat
{
	clear : both;
	margin-top : 0px;/* Il faut mettre 60px sous IE sinon on ne voit plus le titre */
	margin-left : 15px; /* Pour faire une petite marge à gauche */
}



h1
{
	margin-bottom : 30px;
}


.margin
{
	margin-left : 140px;
}


/*On enlève la bordure qui encadre les images qui servent de lien (notamment pour le logo)*/
a img
{
	border : 0;
}


/*--------------------------------------------------Pour le formulaire : -------------------------------------------------------------------*/

h1.formulaire /*Pour mettre le contactez-nous du formulaire au bon endroit :*/
{
	margin-left : 40%;
}

/*Pour le bouton envoyer du formulaire */
.centrer
{
	width : 20%;
	margin-left : 50%;/*Pour placer le bouton pas loin du centre*/	
	font-weight : bold;
}


#gauche #input_decale
{
	position : absolute;
	left : 23%;
}

#droite
{
	position : relative;
	left : 50%;
	top : -76px;
}

#droite #input_decale
{
	position : relative;
	left : 6.5%;
}

textarea /* On décale la zone de commentaires*/
{
	position : relative;
	left : 20%;
}

input, textarea
{
	border : 2px solid black;
}

#antirobot /* On enlève le cadre de la checkbox visible */
{
	border : 0px;
}


/* ------------------------------Pour la page d'accueil version 2 : --------------------------------  */


.decale_accueil
{
margin-left : 12px;
}

.nofloat_accueil
{
	clear : both;
	margin-top : 0px;/* Il faut mettre 60px sous IE sinon on ne voit plus le titre */
}


/*-------------------------------------------- Pour le footer -------------------------------------------------------------------------------------------------------------------*/


#footer p
{
	margin-left : 3%;
}

/*-------------------------------------------- Pour la page pro -------------------------------------------------------------------------------------------------------------------*/

.bloc_texte1
{
	width : 72%;
}


/*-------------------------------------------- Pour la page déco -------------------------------------------------------------------------------------------------------------------*/

.bloc_texte2
{
	width : 50%;
}

/*-------------------------------------------- Pour la page mariage -------------------------------------------------------------------------------------------------------------------*/

.bloc_image
{
	clear : both;
	margin-top : 0px;/* Il faut mettre 60px sous IE sinon on ne voit plus le titre */
	margin-left : -15px; /* On enlève la marge pour pouvoir mettre les 4 photos*/
}

.fin_bloc
{
	margin-left : 15px; /* On remet la marge*/
}


/*-------------------------------------------- Autres -------------------------------------------------------------------------------------------------------------------*/
#logo
{
	position : absolute;
	top :0;
	left : 0;
	border-bottom : 10px solid #cd0067;	
	height : 117px; /* Hauteur du logo*/ 
	width : 500px; /* Largeur du logo*/ 
}




body
{
	 /*#343338 couleur grise de la charte et #74727d pour plus clair*/
	background-image : url(fond7.jpg);
	background-repeat : repeat-y;
	color : white;
	/*width : 95%;/*En fait la taille réelle est 1200px On a décidé d'utiliser toute la largeur dispo*/
	/*En fait la hauteur réelle est  3000px*/
	/*border: 0px solid #cd0067; On ne met plus de bordure*/
	margin-top : 300px; /* Sert à décaler le body de la page pour qu'il ne colle pas au header */
	padding : 0%;/* On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
}



#body
{
	/*background-color :#cd0067; /*#cd0067pour le rose du site   -- #9099ae*/
	width: 80%;/*Ce qui correspond à une taille de 1150px*/
	margin : auto;
	/*position : absolute;
	left:240px;	180 px est la mesure en partant de la gauche (en absolu) pour centrer le bloc de largeur 900px*/
	font-family : Arial, Verdana, Helvetica, serif;
	border : 10px groove black;

	/*padding: 1px 10px; On ne met plus de padding pour avoir toute la largeur disponible*/
	margin-bottom : 20%;
}

.hr_perso
{
	border-bottom : 1px solid black;
	padding : 0;
	margin : 0;
	width : 100%;
}



#header
{
/*margin-bottom : 150px; A mettre pour IE cela permet de décaler et de voir le titre */
}


.p-center
{
	text-align: center;
}

.petite_marge
{
	margin-left : 13px;
}



p, li
{
	font-size : 110%; /* On augmente la taille du texte */
}


q
{
	position : absolute; 
	right : 10%; /* On met la citation à droite */
	top : 20%;
}

.p-quote
{
	position : absolute;
	top : 21%;
	right : 10%;
}

.bloc_image2
{
	clear : both;
	margin-top : 0px;
	margin-left : 15%; 
}
/*text-align: center; pour centrer du texte*/

/*Pour le formulaire :

input, textarea, select
{
background-color : rgb(0,255,0);
margin-left : 70px;
}*/


/*  Dimensions de mon cadre d'image : 830px de haut par 1250 de large */