/* CSS screen Document */
/*Copyrignt : Guillaume BIZET*/
/*Mail: GuillaumeBizet@GMail.com*/


/* ----------------------------------------------------------------------------- */
/* --------------------------- Mise en page générale --------------------------- */
* { padding: 0;	margin: 0; }

body { font-family: "Trebuchet MS", Trebuchet, Verdana, sans-serif; font-size: 75%; /*font-size: 0.8em;*/}

div#header { height: 150px;  margin: 0px; padding: 0px; background: url(img/bg_header.png) repeat-x top left; }
div#conteneur { width: 900px; margin-left: auto; margin-right: auto; padding: 0 25px; background: transparent url(img/bg_body.png) no-repeat top center; }
div#navigation { height: 30px; margin: 0px; padding: 0px; background: url(img/bg_nav.png) repeat-x; }
html>body div#centre { height: auto; min-height: 800px; }
div#centre { height: 800px; background: #fff url(img/bg_tags.png) no-repeat 0px 15px; }
html>body div#centrephoto { height: auto; min-height: 800px; }
div#centrephoto { height: 800px; padding: 30px 20px 0px 320px; background: url(img/bg_photo.png) no-repeat 10px 255px; }
div#footer { width: 900px; height: 50px; margin-left: auto; margin-right: auto; padding: 0 25px; background: transparent url(img/bg_footer.png) no-repeat bottom center; text-align: right; color: #711e1e; }

/* -------------------------------------------------------------------- */
/* -------------------------- CSS génériques -------------------------- */
.right	{ float: right; margin: 5px; }
.center	{ text-align: center; }
.left	{ float: left; margin: 5px; }
.gris	{ margin: 15px 0px; padding: 10px; border: 1px solid #666; background: #999; }
.italic {font-style: italic;}
.bold {font-style: bold;}
p	{ margin: 10px 0px 0px 0px; padding-right: 15px; }
.strong	{ font-weight: bold; }
#centre ul	{ margin: 10px 0px 10px 30px; }
#footer p	{ padding: 15px 15px 0px 0px;}
.plus { font-size: 120%;}
.plus2 { font-size: 105%;}
.margetop {margin-top: 50px; }
.accueil p {margin: 20px 0px; }
a.goto {float: right; margin: 5px 10px 0px 0px;}

p.top {text-align: right; padding-right: 20px;}

hr {margin: 0; padding: 0; border: 0;}

/* ------------------------------------------------------------------------- */
/* -------------------------- TITRES TOUTES PAGES -------------------------- */

h1	{ width:900px; height: 150px; line-height: 150px; margin: 0 auto; padding: 0; }
h1 a { display: block; }
h2	{ height: 35px; margin-bottom: 15px; padding: 2px 0px 0px 10px; font-size: 16px; font-weight: blod; color: #BB1A31; background: #F5F5F5 url(img/bg_h2.png) no-repeat bottom left; }
h3	{ padding: 5px 10px; margin-top: 40px; margin-bottom: 15px; font-size: 16px; font-weight: blod; color: #BB1A31; background: #F5F5F5; }


/* --------------------------------------------------------------- */
/* -------------------------- Les liens -------------------------- */
a img	{ border: 0px; }
#centre a, #centre a:visited, p.top a, p.top a:visited	{ color: #BB1A31; text-decoration: underline; }
#centre a:hover,  p.top a:hover	{ text-decoration: none; font-weight: bold; }
#footer a, #footer a:visited { color: #BB1A31; text-decoration: none; font-weight: bold; }
#footer a:hover	{ color: #BB1A31; text-decoration: underline; font-weight: bold; }


/* ------------------------------------------------------------- */
/* -------------------------- Le menu -------------------------- */

#navigation ul li	{ float: left;  height: 30px; line-height: 30px; border-right: 1px solid #fff; list-style: none; }
#navigation ul li a, #navigation ul li a:hover, #navigation ul li a:visited	{  display: block; padding: 0px 15px; color: #fff; font-weight: bold; text-decoration: none; }
#navigation ul li a:hover	{ background: url(img/bg_navhover.png) repeat-x top left; }

/* ------------------------------------------------------------------ */
/* -------------------------- PAGE Accueil -------------------------- */
.accueil {text-align: justify; }

#sign	{ text-align: right; padding-right: 100px; }
.signmeus {font-size: 16px; font-weight: blod; font-style: italic; color: #BB1A31;}

/* -------------------------------------------------------------------- */
/* -------------------------- PAGES Liturgie -------------------------- */
#messe dl, #benediction dl {margin: 0px 10px;}

dl.liturgie dt	{ float: left;  width: 150px; height: 25px; margin-right: 15px; font-weight: bold; }
dl.liturgie dd	{ margin-bottom: 25px; }

/* ----------------------------------------------------------------------- */
/* -------------------------- PAGES Témoignages -------------------------- */
#temoignage {text-align: justify; }
#temoignage .temleft {float: left; margin-right: 15px;}
#temoignage .chalau {margin-bottom: 70px; }
#temoignage .arianehadrien {margin-bottom: 225px; }
#temoignage .qui	{ margin: 10px 0px 30px 0px; text-align: right; font-style: italic; font-weight: bold; }

/* -------------------------------------------------------------------- */
/* -------------------------- PAGES Médias -------------------------- */

#jQalbum { margin: 1em auto; width: 475px; height: 300px; /*border: 1px solid #ccc;*/ background: transparent url(img/ajaxloader.gif) no-repeat 50% 50%;  }

#extraits p {margin: 0px 10px;}
#extraits object {margin: 0px 10px 15px 10px;}

.clear {
   clear: both;
} 

#gallery { width: 530px; }
#gallery ul { list-style: none; margin: 5px 0px 0px 0px; }
#gallery ul li { display: inline;}
#gallery ul img {
	border: 5px solid #B1B1B1;
	max-width: 120px;
	max-height: 72px;
	}

#gallery ul a:hover img {
	border: 5px solid #3e3e3e;
}

#gallery ul a:hover { color: #fff; }

/* ------------------------------------------------------------------ */
/* -------------------------- PAGES Tarifs -------------------------- */
dl#tarifs dt	{ margin-top: 15px; font-weight: bold; }
dl#tarifs dd.infos	{ font-style: italic; }
table	{ width: 100%; }
td	{ padding: 5px; }
td.col1	{ width: 70%; border: 1px solid #000; }
td.col2	{ width: 30%; border: 1px solid #000; text-align:center;}
.entete	{ background: #999;  color: #fff; }

/* ------------------------------------------------------------------ */
/* -------------------------- PAGES Agenda -------------------------- */

iframe {margin-top: 15px;}

/* ------------------------------------------------------------------ */
/* -------------------------- PAGE Contact/Devis -------------------------- */

/*** Mise en forme du formulaire ***/
#formulairecontact {
	border: none;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	width: 580px;	/*** Largeur du formulaire ***/
	}

#formulairecontact .fleft	{
	float: left;
	}

#titreForm, #piedForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	font-size: 1.1em;
	color: white;
	background: transparent;
	margin: 0;
	padding: 0.5em;
	}


#piedForm {
	text-align: center; /*** Les boutons sont alignés au centre ***/
	}

#piedForm input {
	margin-left: 1em; /*** Pour améliorer la lisibilité des boutons ***/
	}

#corpForm {	/*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
	border: none;
	color: black;
	background: transparent;
	margin: 0;
	padding: 1em;
	}

#corpForm fieldset, #piedForm fieldset {	/*** Mise en forme des cadres ***/
	margin: 0;
	font-style: normal;
	padding: 0 1em 1em;
	}

#corpForm legend, #piedForm legend	{	/*** Mise en forme des titres des cadres ***/
	padding: 0px 10px 0px 7px;
	font-weight: bold;
	font-size: 1.2em;
	background: transparent;
	}

#corpForm p {	/*** Mise en forme des lignes du formulaire ***/
	padding: .2em 0;
	margin: 0 0 .2em 0;
	}

#corpForm input	{
	Width: 250px;
	}

#corpForm fieldset#coordonnees label {	/*** Mise en forme des intitulés de champs ***/
	float: left;	/*** Très important, ne pas suprimer ! ***/
	width: 40%;	/*** Les intitulés prennent 20% de la largeur totale du formulaire... ***/
	text-align: right;	/*** ... et ils sont alignés à droite... ***/
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;	/*** ... et centrés verticalement. ***/
	}

#corpForm fieldset#infosmariage label {	/*** Mise en forme des intitulés de champs ***/
	/*float: left;*/	/*** Très important, ne pas suprimer ! ***/
	width: 40%;	/*** Les intitulés prennent 20% de la largeur totale du formulaire... ***/
	text-align: right;	/*** ... et ils sont alignés à droite... ***/
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;	/*** ... et centrés verticalement. ***/
	}

#corpForm label:hover, #piedForm input {
	cursor: pointer;	/*** Petite astuce pour apprendre aux utilisateurs à cliquer sur les intitulés ***/
	}

#corpForm label.oblig {
	font-weight: normal;	/*** Mise en évidence des champs obligatoires ***/
	color: gray;
	}

#corpForm .block	{
	display: block;
	width: 100%;
	}

#corpForm #organiste, #corpForm #pretre, #corpForm #typepresta {
	width: 100%;
	height: 50px;
	}

#corpForm option	{
	padding: 0px 10px 0px 0px;
	}

#corpForm #message {
	width: 100%;
	height: 250px;
	}

#corpForm .legende {	/*** Mise en forme des aides contextuelles ***/
	font-style: normal;
	color: #666;
	background: transparent;
	margin: 0;
	padding: 0;
	}

#corpForm a.aide {	/*** Mise en forme des bulles d'aide ***/
	text-decoration: none;
	}

#corpForm a.aide img_rouge {	/*** Mise en forme de l'image des bulles d'aide ***/
	margin: 0;
	padding: 0;
	border: 0;
	}

#corpForm a.aide:hover {/*** Le curseur de la souris change d'aspect quand il passe au-dessus d'une bulle d'aide ***/
	cursor: help;
	}

#corpForm .focus {	/*** Mise en avant des champs en cours d'utilisation ***/
	background: #EDFFF3;
	color: black;
	}

#corpForm .normal {	/*** Retour à l'état normal après l'utilisation ***/
	background: white;
	color: black;
	}

/*** Mise en forme des messages d'erreur ***/
#corpForm .alerte {	/*** Mis en évidence des champs mal renseignés ***/
	border: 1px solid red;
	}

#corpForm .messageAlerte {	/*** Mise en forme des message d'alerte ***/
	display: block;
	margin: 0 0 .3em .3em;
	padding-left: 2em;
	color: red;
	font-weight: bold;
	background: url('icon_alert.gif') no-repeat left center;
	}
	
	/* ----------------------------------------------------------------------- */
/* -------------------------- PAGES mentions -------------------------- */
.mentions {text-align: justify; }