/* Start of CMSMS style sheet 'Centre histoire' */
/* Feuille des styles du site www.chlapresquile.qc.ca */

/******** Page *********/

html {                      
   font-size: 100%;
}

html, body {
   height: 100%;	
   min-width: 950px;
}

body {
   margin: 0;
   padding: 1em;
   background: url(uploads/images/bg-page.jpg);
   color: #000;
   font: 0.85em arial, sans-serif;
   line-height: 1.5em;
}

#page {
    background: url(uploads/images/bg-page.jpg);
    position: relative;
    min-height: 100%;   
    max-width: 1280px;
    margin: 0 auto;
}

/***** Titres *****/

h3, h4, h5, h6 {
	margin: 1em 0 .5em 0;
        line-height: 1em;
	font-weight: bold;
	font-style: normal;
}
h3 {font-size: 1.6em;}
h4 {font-size: 1.4em;}
h5 {font-size: 1.3em;}
h6 {font-size: 1.2em;}
   
/****** Listes ******/

ul, ol {	
  padding: 0;
  list-style-type: none;
}

/****** Paragraphes ******/

p {
   margin: 0.5em 0;
}

/******* Quotations ******/

blockquote {
   background: url(uploads/images/bg-parchemin.png);
   margin: 0 0 1em 0;
   padding: 1em;
   border: 1px solid #000;
   font: italic 1em arial, sans-serif;
}
q {
  font-weight: bold;
  font-style: italic;
}

/****** Liens ******/

a {
  color: #000082;
  text-decoration: underline;
}
a:visited {
  color: #40006F;
}
a:hover, a:focus, a:active {
  color: #660000;
}
a img {
  border: none;
}
a.lien-ext {
  color: #7a0000;
}
/****** Divers éléments en ligne *******/

em {
  font-style: italic;
}
strong {
  font-weight: bold;
}
.soulignement {
  text-decoration: underline;
}
acronym {
  cursor: default;
}
/******* Formulaires *******/

input, button, select {
  vertical-align: middle;
}
.required {
  margin: 0 0 1em 0;
}

/*************  Entête de la page  *****************/
#entete {
   background: url(uploads/images/bg-entete.jpg) center top no-repeat;
   height: 180px;
   text-align: center;
}	
#entete img {
   width: 541px;
   height: 129px;
   margin-top: 25px;
}
#entete h1 {
  text-indent: -5000px;
  margin: 0;
  line-height: 0;
}
#entete h2 {
   text-indent: -5000px;
   line-height: 0;
   margin: 0;
}

/*************  Entête de la page sur françois-charles *****************/
/*#fc-entete {
   background: url(uploads/images/lettres/bg-fc-entete.jpg) center top no-repeat;
   height: 180px;
   text-align: center;
}	
#fc-entete img {
   width: 541px;
   height: 129px;
   margin-top: 25px;
}
#fc-entete h1 {
  text-indent: -5000px;
  margin: 0;
  line-height: 0;
}
#fc-entete h2 {
   text-indent: -5000px;
   line-height: 0;
   margin: 0;
}*/
/************* Menu de navigation rapide ****************/
#menurapide {
   font: 0.75em tahoma, sans-serif;
   margin: 0 0.5em 0.5em 0.5em;  /* laisser le margin-top à 0 pour pied de page */
   text-align: right;
}
#menurapide li {
   display: inline;
}
#menurapide a {
   color: #660000;
   margin-right: 0.5em;
}   
#menurapide a:hover {
   text-decoration: none;
}

/******************** Menu de navigation principale *********************/
#menu {
   background: #660000;
   margin: 0;                  
   text-align: center;
   height: 2em;
   line-height: 2em;
   color: #fff; 
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
}
#menu  li {
   display: inline;
   margin-right: 0.6em;
   padding: 0 0.5em 0 0.5em;
  
}
#menu a {
   color: #fff;
   font: 0.9em tahoma, sans-serif;
   text-decoration: none;
}
#menu a:hover {
   text-decoration: underline;
} 
#ariane  {
   margin: 1em 0 0 320px;
   font: 0.8em tahoma, sans-serif;
}

/**************** Colonne de gauche ******************/
#gauche { 
   float: left;
   width: 240px;	
   font: 0.8em tahoma, sans-serif;
   padding: 0;
}  
#gauche a {
   text-decoration: none;
}
#gauche a:hover {
   text-decoration: underline;
}
#gauche a.a-voir {
   color: #660000;
   font: 1.8em tahoma, sans-serif;
}
#gauche ul {
   margin: 0;
}
#gauche p {
   color: #660000;
   text-indent: 1em;
}
.vignettes img {
   width: 200px;
   height: 246px;
}
/********** module recherche **************/
#recherche {
   margin: 0 0 1em 0;
}
#recherche fieldset {
   border: none;
}
#recherche label {
   color: #000;
   font: bold 1.2em tahoma, sans-serif;
   padding: 3px;
   
}
#recherche input {
   margin-top: 0.5em;
   background: #660000;
   color: #fff;
   border: 2px solid #808080;
}
/*********** fin recherche **************/
ul#adresse {
   margin: 0 0 1em 0;
   font: bold 1em tahoma, sans-serif;
}
ul#adresse a {
   color: #000082;
   font: bold 1.2em tahoma, sans-serif;
}
ul#ouverture {
   font: bold 1em tahoma, sans-serif;
}
div#menuwrapper {
   color: #fff;
   margin: 0; 
}
/************* menu de gauche *******************/
ul#primary-nav {
   font: 1.1em tahoma, sans-serif;
   text-align: left;
   list-style-type: none;
   
}
ul#primary-nav li {
   margin: 0;
   padding: 1px 0 1px 0.5em;
}
ul#primary-nav a {
   display: block;
   line-height: 1.4em;
   color: #660000;
   text-decoration: none;
}
ul#primary-nav a:hover {
   text-decoration: underline;
   color: #660000;
}
.menuparent { 
   padding: 0;
}
.menuactive {
   font-style: italic;
}
.menuactive a:hover {
   text-decoration: none;
}
.sectionheader {
   display: block;
   line-height: 1.5em;
   color: #000;
   font-size: 1.1em;
   font-weight: bold;
}
ul.suggestion a {
   font: bold 1.1em tahoma, sans-serif;
   color: #660000;
}
ul.suggestion li {
   margin: 0 0 0.5em 0;
}
ul#test {                          /********* page françois-charles ************/
   font: bold 1.1em tahoma, sans-serif;
   color: #660000;
   
}
div#petition a {
   color: #000082;
   font: bold 1.2em tahoma, sans-serif;
}
  
/***************** fin menu de gauche ********************/

/******************* colonne de droite *********************/
#babillard {
   float: right;
   background: url(uploads/images/parmilieu.jpg) center ;
   width: 275px;
   font: 0.8em tahoma, sans-serif;
   padding: 0;
} 

/****************module calendar avec éphémérides*******************/
#ephemerides {
   background: url(uploads/images/parhaut.jpg) center top no-repeat;
   padding: 4em 3em 0 4em; 
}
#ephemerides caption {
  font-size: 1.4em;
  font-weight: bold;
  margin: 0 0 0.5em 0;
}
#ephemerides caption a {
  text-decoration: none;
  padding: 3px;
}
#ephemerides p {
 /* margin: 0.5em 0 0 0;*/
}
#cal-calendar th {
  border: 1px solid #000;
  padding: 1px;
  font-size: 0.9em;
  color: #fff;
  width: 24px;
  background-color: #660000;
}
#cal-calendar td {
  border: 1px solid #000;
  vertical-align: middle;
  padding: 1px;
  height: 20px;
  width: 24px;
}

.calendar tr td a {
  color: #660000;
  font-weight: bold;
  text-decoration: none;
}
.calendar tr td a:hover {
  text-decoration: underline;
  color: #000;
}
.calendar-today {
  font-weight: normal;
  background: #a9a9a9;
}
#cal-calendar{
  margin: 0;
  border-collapse: collapse;
  border: 1px solid #000;
}
#cal-calendar ul {
  margin: 0;
  padding: 0;
  padding-left: 1px;
}

#cal-calendar li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#cal-calendar td:hover {
  background: #dcdcdc;
}
/******************module nouvelles***********************/
#nouvelles {
  padding: 0 3em 1em 4em;
}
#nouvelles h3 {
   border-top: 1px solid #000;
}
#nouvelles a {
  color: #660000;
  text-decoration: none;
}
#nouvelles a:hover {
   text-decoration: underline; 
   color: #000;         
}
div.NewsSummaryLink a {
  font: bold 1.1em tahoma, sans-serif;
  text-decoration: none;
}
div.NewsSummaryLink a:hover {
 /* text-decoration: underline;*/
}
/*******************module bulletin****************************/
#bulletins {
  background: url(uploads/images/parbas.jpg) center bottom no-repeat;
  padding: 0 3em 6em 4em;
}
#bulletins h3 {
   border-top: 1px solid #000;
}
#bulletins a {
   display: block;
   padding-bottom: 1em;
   font: bold 1.1em tahoma, sans-serif;
   text-decoration: none;
   color: #660000;
}
#bulletins a:hover {
   text-decoration: underline; 
   color: #000;         
}

/****************** fin bulletins ***********************/
#fonds {
   width: 275px;
   text-align: center;
   float: right;
}
#droite {
   float: right;
   width: 275px;
  
   padding: 0.5em; 
}
#droite {
   text-align: left;
}

#droite p, #vignettes p {
   font-size: 0.8em;
   width: 275px;
}
#droite a {
   text-decoration: none;
   color: #660000;
   font: 0.8em tahoma, sans-serif;
}
#droite a:hover {
   text-decoration: underline;
}
#droite li {
   margin: 0 0 0.5em 0;
   list-style-type: none;
}
#droite ul {
  margin: 0; /****** important à garder ********/
}
ul#jorian li {
   color: #660000;
   margin: 0 0 0 2em;
}
ul#jorian {
   margin: 2em 0 0 0;
}
#droite-large {
   float: right;
   width: 350px;
   text-align: left;
   padding: 0.5em;
}
#droite-large p {
   font-size: 0.8em;
}
a#lien-ephemeride {
   color: #000082;
   font: bold 1.2em tahoma, sans-serif;
}
   

/****************** Bloc du contenu principal ********************/
#contenu {
   background: url(uploads/images/bg-contenu.jpg) center top repeat-y;
   margin: 1em 285px 0 250px; /* margin-bottom à 0 pour le pied de page */
   padding: 0 1em 7em 1em;    /* padding-bottom à 7em pour pied de page qui fait 6em de haut */
   height: 100%;    
}  
#contenu2 {
   background: url(uploads/images/bg-contenu.jpg) center top no-repeat;
   margin: 1em 0 0 275px; /* laisser margin-bottom à 0 pour le pied de page */
   padding: 0 1em 7em 1em; /* laisser padding-bottom à 7em pour pied de page qui fait 6em de haut */
   height: 100%;  
}  
/*#fc-contenu {
   background: url(uploads/images/bg-contenu.jpg) center top repeat-y;
   margin: 1em 0 0 260px; /* margin-bottom à 0 pour le pied de page */
   padding: 0 1em 7em 1em;    /* padding-bottom à 7em pour pied de page qui fait 6em de haut */
   height: 100%;    
}  */
ul#page-originale {
   float: right;
}
#contenu p {
   text-indent: 0em;
   margin: 0 0 1em 0; 
}
#contenu img {
   margin: 1em;
}

.lettrine {
   float: left;
   font: bold 2em/1em Georgia, serif;
   color: #660000;
   background: #e3c69c;
   margin: 3px;
   padding: 1px;
   border: 1px solid #000;
}
#contenu li {
  /* margin: 0 0 0 1em;*/
}
#contenu ul, #contenu2 ul {
   list-style: disc outside;
   /*margin: 0 0 0 1em;*/
}
#contenu ol, #contenu2 ol {
  /* margin: 0 0 0 1em;*/
   list-style: decimal outside;
}

ul.bottom li {
  list-style-type: none;
  margin: 0 0 0.3em 0;
  border-bottom: 1px solid #dcdcdc;  
}
ul.activites {
  padding: 0 0 0.3em 0;
  border-bottom: 1px solid #660000;  
}
ul.activites li {
  list-style-type: none;
}
.spacer {
  clear: both;
}
#listealpha {
   margin: 0;
   padding: 0;
   list-style: none;
   color: #000; 
}
#listealpha li {
   display: inline;	
}
#listealpha a {
   color: #000;
   margin-right: 0.6em;
   font: bold 0.9em tahoma, serif;
   text-decoration: underline;
}
#listealpha a:hover {
   text-decoration: none;
}    
#listenoms {
   margin: 0;
   padding: 0;
   color: #000; 
}
#listenoms li {
    list-style: none;	
}
#listenoms a {
   color: #000;
   margin-right: 0.6em;
   font: bold 0.8em tahoma, serif;
   text-decoration: underline;
}
#listenoms a:hover {
   text-decoration: none;
}    

.caracgros {
   font-size: 1.3em;
}
.plaque {
   font: 1em arial, sans-serif;
}
.titreplaque {
   font: 2em arial, sans-serif;
}
.soustitreplaque {
   font: 1.5em arial, sans-serif;
}
#imprimer {
   font: 0.8em tahoma, sans-serif;
}

ul.sous-liste li {
  list-style-type: circle;
   margin-left: 1em;
}
.temoin {
  background: #b0e0e6;
}
ul#info-perso {
  width: 60%;
}
#info-perso li, #categorie li {
  line-height: 2em;
}
#info-perso li {
  border-bottom: 1px solid #000;
  list-style: none;
} 
ul#categorie {
  list-style-image: url(uploads/images/saec/puce.jpg);
  list-style-position: inside;
}
a#lien-inscription {
   color: #660000;
   font: bold 1.2em tahoma, sans-serif;
}

 
ul.puce li {
   background: url(uploads/images/puce.jpg) no-repeat 0 0.5em;
   padding: 0 0 0 20px;
   list-style-type: none;  /**** laisser sur le li *****/
}

#poeme {
   margin: 2em 0 0 0;
   text-align: center;
   color: #660000;
   font: italic 1.2em arial, sans-serif;
}

p.auteur {
   color: #000;
   font: bold 0.9em tahoma, sans-serif;
}

/********************* galerie de photos *************************/
#galerie table {
}
#galerie caption {
   text-align:center
}
#galerie tr {
   height:120px; 
   vertical-align:middle;
}
#galerie td.thumb {
   border: 2px solid #000; 
   width: 100px; 
   text-align: center; 
   background: #808080;
}
#galerie td.thumb-album {
   border: none; 
   width: 500px; 
   text-align: left;
}

  /******************** expo virtuelle lalonde *********************/

.vignette img {
  border: 1px solid #000;
}
.vignette {
  top: 0; 
  text-align: left; 
  position: relative;
}
  
.vignette a {
  text-decoration: none; 
  padding-left: 4px;
}

.vignette a:hover {
  background-color: transparent;
}

.vignette a .grand1, a .grand2, a .grand3, a .grand4, a .grand5, a .grand6, a .grand7, a .grand8, a .grand9, a .grand10, a .grand11, a .grand12, a .grand13, a .grand14, a .grand15 {
  display: block; 
  position: absolute; 
  width: 0px;
}	  
  
.vignette a:hover .grand1, a:hover .grand2, a:hover .grand3, a:hover .grand4, a:hover .grand5, a:hover .grand6, a:hover .grand7, a:hover .grand8, 
a:hover .grand9, a:hover .grand10, a:hover .grand11, a:hover .grand12, a:hover .grand13, a:hover .grand14, a:hover .grand15 {
  position: absolute; 
  top: 0px;
}
.vignette a:hover .grand1 {
  right: 150px; 
  width: 350px; 
  height: 475px;
}
.vignette a:hover .grand2 {right: 0px; width: 500px; height: 430px;}
.vignette a:hover .grand3 {right:50px; width: 420px; height: 220px;}
.vignette a:hover .grand4 {right:60px; width: 400px; height: 580px;} 
.vignette a:hover .grand5 {right:70px; width: 400px; height: 500px;}

.vignette a:hover .grand6 {right:50px; width: 400px; height: 400px;}

.vignette a:hover .grand7 {right: 150px; width: 350px; height: 475px;}

.vignette a:hover .grand8 {right:50px; width: 514px; height: 450px;}

.vignette a:hover .grand9 {right:0px; width: 525px; height: 430px;}

.vignette a:hover .grand10 {right:220px; width: 300px; height: 510px;}

.vignette a:hover .grand11 {right:200px; width: 310px; height: 220px;}

.vignette a:hover .grand12 {right:100px; width: 369px; height: 253px;}

.vignette a:hover .grand13 {right:50px; width: 450px; height: 263px;}

.vignette a:hover .grand14 {right:80px; width: 380px; height: 350px;}

.vignette a:hover .grand15 {right:150px; width: 300px; height: 435px;}

#galerie {
/*  background: #000;*/
  margin: 1em 0 0 275px; /* laisser margin-bottom à 0 pour le pied de page */
  padding: 1em 1em 7em 1em; /* laisser padding-bottom à 7em pour pied de page qui fait 6em de haut */
   height: 100%;  
/*  border: 2px solid #000;*/
}
#galerie h3 {
  margin: 0 0 1em 0;
}
#galerie li {
  list-style-type: none;
}
#copy {
  font-size: 0.8em;
}
.bleu {
  color: #00008b;
}
.maron {
  color: #660000;
}
/*************************tableaux*************************/

#contenu2 table, #contenu table {
   border-collapse: collapse; 
   width: 100%;
   border: 2px solid #660000;
   margin: 0 0 1em 0;
}
#contenu2 caption, #contenu caption {
   margin: 0 auto;
   text-align: left;
   color: #660000;
   font: bold 1.3em arial, sans-serif;
   padding: 0.5em 0 0.5em 0;
/*   border: 1px solid #000;*/
}
#contenu2 th, #contenu th {
   border: 1px solid #660000;
   text-align: left;
   padding: 0.5em;
   font: bold 1.2em arial, sans-serif;
   background: url(uploads/images/bg-parchemin.png);
}
#contenu2 td, #contenu td {        /* Mettre une bordure sur les td ET les th */
   font: 1em arial, sans-serif;
   border: 1px solid #660000;
   text-align: left;
   line-height: 1.5em;
   height: 2em;
   padding: 0.5em;
}
#contenu-lettre {
   margin: 1em auto;
   background: #d2b48c;
}
table#liste-petition {
   font: 0.8em arial, sans-serif;
   border: none;
   margin: 2em 0 0 0;
}
table#liste-petition th {
   padding: 0.3em;
}
table#liste-petition td {
   padding: 0 0.3em;
}
table#liste-petition th, table#liste-petition td {
   border: none;
   background: none;

}
/*************** transcriptions******************/
/*#fc-contenu table {
   width: 100%;
   border-collapse: collapse;
}
table.transcription {
   text-align: left;
   border: 1px solid #000;
}
table.transcription td {
 /*  vertical-align: top;*/
   border-bottom: 1px solid #000;
}

/********** Ligne de temps *********************/

table#ligne {
   background: #d2b48c;
   width: 100%;
   height: 5em;
   margin: 1em 0 1em 0;
}

table#ligne td {
  text-align: center;
}*/
/************** formulaires  ****************************/

/*********** formulaire de contact **********************/
.contactform fieldset {
  padding: 1em; 
  border: 2px solid #660000;
}

.contactform fieldset legend {
  font: bold 1.3em tahoma, sans-serif;                               
  margin: 0 0 0 2em;
  padding: 0 0.5em 0 0.5em;
}
.contactform div {
  width: 100%; 
  padding: 0.25em 0 0.25em 0;
}
.contactform div label {
  display: block; 
}
.contactform input, textarea {
  background: url(uploads/images/bg-parchemin.png);
  border: 2px solid #660000;
}
.contactform textarea {
  width: 100%;                                         /*** à garder pour IE ***/
}
.contactform div.required {
  color: #660000;
  font-weight: bold;
}

.error_message {
  margin: 0 0 10px 0;
  font: bold 1.5em verdana, sans-serif;
  color: #e30606;
}
/************** fin formulaire de contact ***********************/

/*****************formulaire de la pétition ***********************/
.petitionform fieldset {
  padding: 1em; 
  border: 1px solid #660000;
}

.petitionform fieldset legend {
  font: bold 1.3em tahoma, sans-serif;                               
  margin: 0 0 0 1em;
  padding: 0 0.5em 0 0.5em;
}
.petitionform div {
/*  width: 100%; */
  padding: 0.25em 0 0.25em 0;
}
.petitionform div label {
  display: block; 
}
.petitionform input, textarea {
  background: url(uploads/images/bg-parchemin.png);
  border: 1px solid #660000;
}
.petitionform textarea {
  width: 100%;                                         /*** à garder pour IE ***/
}
.petitionform div.required {
  color: #660000;
  font-weight: bold;
}

div.captcha {
  padding: 1em;
}

/***************** fin du formulaire de la pétition ********************/

/*****************formulaire d'adhésion ***********************/
.adhesionform fieldset {
  padding: 1em; 
  border: 1px solid #660000;
}
.adhesionform fieldset legend {
  font: bold 1.3em tahoma, sans-serif;                               
  margin: 0 0 0 1em;
  padding: 0 0.5em 0 0.5em;
}
.adhesionform div {
/*  width: 100%; */
  padding: 0.25em 0 0.25em 0;
}
.adhesionform div label {
  display: block; 
}
.adhesionform input, textarea {
  background: url(uploads/images/bg-parchemin.png);
  border: 1px solid #660000;
}
.adhesionform textarea {
  width: 100%;                                         /*** à garder pour IE ***/
}
.adhesionform div.required {
  color: #660000;
  font-weight: bold;
}

/***************** fin du formulaire d'adhésion ********************/

.submit input {
  color: #660000;
  font-weight: bold;
  margin: 1em 0 0 0;
}

.form-ephemeride label {
  display: block;
  font-weight: bold;
  padding-right: 0.5em;
}

.form-ephemeride input {
  background: url(uploads/images/bg-parchemin.png);
   color: #660000;
  font-weight: bold;
  margin: 1em 0 0 0;
  border: 2px solid #660000;
}

/* ---------- Pied de page ---------- */

#pied {
   position: absolute;
   bottom: 0; 
   left: 0;
   width: 100%;
   height: 6em;
   text-align: center;
   padding: 0;
   font: 0.85em tahoma, sans-serif;
 
}
#menupied {
   margin: 0 0 10px 0;
}
#menupied li {
   display: inline;
}
#menupied a {
   color: #000;
   margin-right: 0.5em;
}
#menupied a:hover {
   text-decoration: none;
}
#pied p {
   margin: 0;
   padding: 0;
}
#pied a:hover {
   text-decoration: none;
}
/* End of 'Centre histoire' */