/*
// (C) 2004 - 2017 Serge Lamarche
// http://sergewebservice.ca/
// All codes copyrights Serge Lamarche, any reproduction and 
// use strictly forbidden without written consent.
// Tous les codes droits d'auteurs Serge Lamarche, toute reproduction et 
// utilisation est strictement interdite sans autorisation écrite.
// Contact: info@sergewebservice.ca, sergewebservice@gmail.com or/ou sergelamarche@gmail.com 
// ...for help with your website. Reliable, inexpensive website service. Thanks.
// ...pour de l'aide avec votre site. Service internet abordable et professionnel. Merci. 
*/


body { margin: 0; padding: 0 0 40px 0; text-align: justify; font-family: Verdana, Geneva, sans-serif; background: #fff url(images-gen/bg-00188c-1600px.jpg) left bottom repeat-x fixed; }
@media (max-width: 800px) { body { background: #fff url(images-gen/bg-00188c-800px.jpg) left bottom repeat-x fixed; } }
@media (max-width: 1200px) { body { background: #fff url(images-gen/bg-00188c-1200px.jpg) left bottom repeat-x fixed; } }
body.reponseperl, body.reponseperl2 { background: transparent; font-size: 12px; }
body.reponseperl2 {  }

img.png, div#bulletin { behavior: url(images-gen/iepngfix.htc); }

a:link, a:visited { text-decoration: none; }
a:hover {  }

/* fonctions diapo */
/*div#divdiapo { text-align: center; display: none; position: absolute; z-index: 2; overflow: hidden; margin: 0; padding: 0; width: 100%; min-height: 40%; background: rgba(0, 0, 0, 0.6); 
-webkit-box-shadow: #333 2px 2px 15px; -moz-box-shadow: #333 2px 2px 15px; box-shadow: #333 2px 2px 15px; }*/
div#divdiapo { float: right; position: relative; overflow: hidden; margin: 0; padding: 0; width: 40%; max-height: 50%;  }
div.diapo { text-align: center; display: block; position: absolute; z-index: 2; margin: 0; padding: 0; width: 100%; }
div.diapo img { position: absolute; margin: 0; }
div.diapo img#img1, div.diapo img#img2 { position: relative; margin: 0; max-width: 90%; max-height: 90%; 
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; 
-webkit-box-shadow: #333 2px 2px 5px; -moz-box-shadow: #333 2px 2px 5px; box-shadow: #333 2px 2px 5px; }
div.diapo p { text-align: center; margin: 0; padding: 3px 0; font-size: 18px; color: #000; text-shadow: #333 2px 2px 2px; }  /*background: rgba(255, 255, 255, 0.4);*/
a.btnarret { display: block; position: absolute; z-index: 5; right: 18%; top: 5px; padding: 7px 5px 8px 5px; font-weight: bold; font-size: 22px; line-height: 5px; background: #fff; border: solid 1px #333; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; opacity: 0.9; }
a#btnpause { text-align: center; display: block; visibility: hidden; position: absolute; z-index: 5; margin: 20% 0 0 46%; padding: 3px 3px 7px 3px; height: 24px; width: 30px; font-weight: bold; font-size: 20px; line-height: 24px; vertical-align: middle; background: #000; color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; opacity: 0.6; }

div.diapo .depart { 
-webkit-animation-name: rot; -webkit-animation-duration: 20s; 
-moz-animation-name: rot; -moz-animation-duration: 20s; 
animation-name: rot; animation-duration: 20s; }
@-webkit-keyframes rot {
    0%   { -webkit-transform: rotate(0deg); }
    50%   { -webkit-transform: rotate(180deg); }
    100%   { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rot {
    0%   { -moz-transform: rotate(0deg); }
    50%   { -moz-transform: rotate(180deg); }
    100%   { -moz-transform: rotate(360deg); }
}
@keyframes rot {
    0%   { transform: rotate(0deg); }
    50%   { transform: rotate(180deg); }
    100%   { transform: rotate(360deg); }
}

div.diapo .vis { opacity: 1;
-webkit-animation-name: vis; -webkit-animation-duration: 3s; 
-moz-animation-name: vis; -moz-animation-duration: 3s; 
animation-name: vis; animation-duration: 3s; }
div.diapo .invis { opacity: 0;
-webkit-animation-name: invis; -webkit-animation-duration: 3s; 
-moz-animation-name: invis; -moz-animation-duration: 3s; 
animation-name: invis; animation-duration: 3s; }
/* Safari 4.0 - 8.0 */
@-webkit-keyframes vis {
    0%   { opacity: 0; }
    100%   { opacity: 1; }
}
@-moz-keyframes vis {
    0%   { opacity: 0; }
    100%   { opacity: 1; }
}
@keyframes vis {
    0%   { opacity: 0; }
    100%   { opacity: 1; }
}
@-webkit-keyframes invis {
    0%   { opacity: 1; }
    100%   { opacity: 0; }
}
@-moz-keyframes invis {
    0%   { opacity: 1; }
    100%   { opacity: 0; }
}
@keyframes invis {
    0%   { opacity: 1; }
    100%   { opacity: 0; }
}


h1 { text-align: center; margin: 0; padding: 20px 0 0 0; font: bold 30px georgia, cambria, times new roman, serif; color: #B6C573; text-shadow: #ab6 2px 2px 4px; } /* blackjack, monotype corsiva, comic sans ms, script */
h2 { text-align: center; margin: 10px 0; padding: 3px; min-width: 40em; letter-spacing: 0.4em; font: bold 18px/20px serif; color: #Fd8a26; background: #FB8824 url(images-gen/bg-barrehaut.gif) center repeat-x; text-shadow: #633 1px 1px 2px; }
h3 { margin: 10px 20px; padding: 2px 0; font: bold 18px Verdana, Geneva, sans-serif; color: #A3520C; }
h4 { margin: 10px 20px; padding: 2px 0; font: bold 16px Verdana, Geneva, sans-serif; color: #A3520C; }

ul.nav { float: left; position: relative; z-index: 1; margin: 0; padding: 17px 20px 0 20px; list-style: none; background: url(images-gen/bg-toit.gif) top center no-repeat; }
ul.nav li { text-align: center; margin: 1px 0; padding: 0; font: bold 16px/18px times new roman, serif; background: #A3520C; }
ul.nav li a:link, ul.nav li a:visited { display: block; margin: 0 5px; padding: 4px; width: 10em; color: #fff; background: #FB8724 url(images-gen/bg-nav-orange-c.gif) center repeat-x; }
ul.nav li a.courant:link, ul.nav li a.courant:visited , ul.nav li a.courant:hover { background-color: #f93; }
ul.nav li a:hover { color: #78E27F; background-color: #098011; }
ul.nav li a:active { color: #1CC627; }

a.text:link, a.text:visited { color: #284CAC; border-bottom: solid 2px #284CAC; }
a.text:hover { color: #374D7F; border-bottom: solid 2px #374D7F; text-shadow: #669 1px 1px 2px; }

.droite { float: right; margin: 5px 0 5px 10px; padding: 5px; }
p.droite { clear: right; text-align: center; width: 37%; max-width: 400px; margin: 0 17px 5px 5px; padding: 5px; }
p.droite img { width: 100%; /*border: outset 1px #ccc;*/ border-radius: 5px; box-shadow: #667 2px 2px 3px; }
p.ad { clear: right; float: right; margin: 0 17px 5px 5px; padding: 5px; }
.gauche { float: left; margin: 5px 10px 5px 0; padding: 5px; }
p.gauche { clear: left; margin: 0 5px 5px 17px; padding: 5px; }
.centre { text-align: center; }
.gras { font-size: 13px; color: #333; }
.rouge { color: #f00; }
.bourgogne { color: #900; }
.pourpre { color: #006; }

.content div { margin: 10px 0; padding: 10px; background: #f9f9f9; }
.content div ul { list-style: inside; }
.content div ul li { margin: 5px auto; }

p { margin: 10px 20px; padding: 2px 0; }
p#social { position: absolute; right: 50px; margin: 100px 0 0 0; } 
p.links { clear: both; text-align: center; margin: 5px 0; padding: 1px 0; color: #900; font: bold 12px comic sans ms, sans-serif; }
p.lien { float: right; text-align: center; margin: 0 0 10px 20px; padding: 1px 0; border: outset 1px #DF938D; color: #8F4D48; font: bold 12px comic sans ms, sans-serif; }
.content p.links a, .content p.lien a { padding: 1px 4px; border: none; }
.content p.links a:link, .content p.links a:visited, .content p.lien a:link, .content p.lien a:visited { color: #8F4D48; border: none; background: #DF938D; }
.content p.links a:hover, .content p.lien a:hover { background: #DF7870; }

p.cursive { font: normal 14px/16px comic sans ms, cursive; }
p.small { font: 8px Verdana, Geneva, sans-serif; }

.inline { display: inline; list-style: none; padding-right: 20px; }

.script { font-family: comic sans ms, cursive; }
.script2 { font-family: kristen itc, comic sans ms, cursive; }

/* suit pour formulaire: */
.required, .rouge { color: #f00; }
.field_title { font-size: 12px; width: 100px; vertical-align: top; text-align:right; }
.textfield { font-size: 12px; width: 200px; }
.textarea { 	font-size: 12px; width: 400px; height: 100px; }
.field_heading { font-size: 12px; font-weight: bold; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #666666; padding-top: 10px; color: #666666; }
.select { font-size: 12px; }
.checkbox_label { font-size: 11px; cursor: pointer; }
.radio_label { font-size: 11px; cursor: pointer; }
.email { font-size: 12px; width: 200px; }


.footer { margin: 10px 0 0 0; padding: 0; height: 100px; font: 10px/14px Verdana, Geneva, sans-serif; color: #1DC527; text-shadow: #060 1px 1px 1px; } /* background: #35933D url(images-gen/bg-00188.jpg) top left no-repeat; */
.footer p { position: fixed; margin: 5px 20px; bottom: 0; }
.footer a:link, .footer a:visited { color: #1DC527; }
.footer a:hover { color: #B0D86C; }