/*
// droits d'auteurs 2004 - 2009 copyrights - serge_lamarche@hotmail.com 
// All reproductions are forbidden without written permission
// Toute reproduction est interdite sans autorisation écrite
// Javascripts effects are available at affordable prices. Thanks. 
// Les effets javascripts sont disponibles à prix abordables. Merci. 
// Serge Lamarche. 


bg-index2a-
neige.gif bordriviere tracedecerf tracepasdansneige bordriviereengel tracespasdansneige tracepatin skidanstracemotoneige traceraquettemotoneige tracemotoneigecerf tracepaschiendansneige tracesentiervelo bordriviereengel2 tracespasdeneige glaceentiges tracechienenbordure gazonpoussesousfeuillesmortes gazontrottoir trottoirgazon trottoirgazon2 */


body.index2 { margin: 0; padding: 0; background: url(images-gen/bg-index2a-tracesentiervelo.jpg) repeat-x fixed; } /* margin: 0; padding: 0; pour contrer bug sur Opera. */
a:link { color: #336633; text-decoration: none; } 
a:visited { color: #558855; text-decoration: none; }
a:hover { color: #003300; }
a:active { color: #ccffcc; }
a.txt:link { color: #336633; padding: 0px 5px; } 
a.txt:visited { color: #558855; padding: 0px 5px; }
a.txt:hover { color: #003300; background: #ddeedd; }
a.txt:active { color: #00cc00; background: #ddeedd; }
a.nav:link { color: #336633; } 
a.nav:visited { color: #558855; }
a.nav:hover { color: #003300; }
a.nav:active { color: #ccffcc; }
a.navdans:link { color: #336633; padding: 2px 5px; } 
a.navdans:visited { color: #558855; padding: 2px 5px; }
a.navdans:hover { border: 1px outset #eeffee; color: #003300; background: #aaddaa; }
a.navdans:active { border: 1px inset #99ff99; color: #ccffcc; background: #99cc99; }
a.navhors:link { display: block; margin-bottom: 1px; border: 2px solid #99cc99; color: #555522; padding: 2px 5px;  margin-left: -5px; } 
a.navhors:visited { display: block; margin-bottom: 1px; border: 2px solid #99cc99; color: #777744; padding: 2px 5px;  margin-left: -5px; }
a.navhors:hover { display: block; margin-bottom: 1px; border: 2px outset #99ff99; text-decoration: underline; color: #333300; background: #aaddaa; }
a.navhors:active { display: block; margin-top: 1px; margin-bottom: 0px; border: 2px inset #eeffee; color: #ddffdd; background: #aae0bb; }

table { empty-cells: show; }
td.navtop { cursor: pointer; white-space: nowrap; vertical-align: top; height: 40px; font: bold 14px/16px arial, helvetica; background: #b0ddb0 url(images-gen/bg-navtop-vert.gif) repeat-x center; } /* border-top: 2px solid #cfffcf; border-bottom: 5px solid #88b088; <-vieux bords */
td#tdnavtopgauche { width: 60%; }
td#tdnavtopdroit { width: 10%; }
div.navtop { padding: 2px 0px 4px 0px; margin-top: 5px; }
div.navtop span { border-bottom: solid 2px #669966; }
span.navtopg { padding: 2px 6px; background: url(images-gen/bg-btn-navtop-vert-0.gif) no-repeat top left; }
span.navtopdr { padding: 2px 6px; background: url(images-gen/bg-btn-navtop-vert-0.gif) no-repeat top right; }
div.navtop span.en, div.navtop span.fr, div.navtop span.langsep { padding: 2px 0px; text-align: center; background: url(images-gen/bg-btn-navtop-vert-0.gif) no-repeat top center; }
div.droptop { margin-top: 25px; position: absolute; z-index: 1; visibility: hidden; max-width: 220px; font: bold 14px/16px arial, helvetica; } /*overflow: hidden; */
ul.navtop { border-right: 2px solid #669966; margin: 0px; padding: 2px 5px 6px 5px; white-space: normal; font: 12px/16px comic sans ms, arial, helvetica; background: url(images-gen/bg-btn-navtop-vert-0.gif) no-repeat bottom left; }

li { list-style: outside; max-width: 180px; margin: 0px; padding: 1px 2px; border: none; }
ul.navtop li, ul.navmarge>li { list-style: none; }

td.navmarge { padding: 40px 20px 330px 20px; width: 194px; max-width: 200px; } /* hauteur marge dans le padding */
div.navmarge { margin: 0px 0px 0px 194px; position: absolute; z-index: 1; visibility: hidden; min-width: 180px; max-width: 200px; font: bold 15px/20px arial, helvetica; background: #99cc99 url(images-gen/bg-btn-navmarge-vert-1.gif) no-repeat top right; } /* overflow: hidden; */
p.navmarge { border: 2px outset #bbeebb; margin: 0; padding: 5px 0px 5px 0px; width: 190px; text-align: center; font: bold 14px/20px arial, helvetica; background: #88bb88 url(images-gen/bg-btn-navmarge-vert-0a.gif) no-repeat top left; }
/* url(images-gen/bg-btn-margeg-0.gif); */
p.navmarge span.en, p.navmarge span.fr, p.navmarge span.bi { padding: 2px 10px; color: #336633; }
ul.navmarge { border: 2px outset #bbeebb; border-left: none; margin: 0px; padding: 5px 4px; font: bold 14px/18px comic sans ms, arial, helvetica; background: url(images-gen/bg-borderg0-ombregrisp.gif) no-repeat top left; }

td.stage  { padding: 40px 50px 20px 30px; } /*padding pour IE, sur div: margin-right pour gecko, min-width: 45%; et max-width: 60%; pour opera 9 */
div.scene, div.explications { border: 2px outset #eeffee; padding: 20px; margin-right: 20px; min-width: 45%; max-width: 60%; position: absolute; z-index: 0; visibility: hidden; font: 15px/18px arial, helvetica; background: #eeffee url(images-gen/bg-stage-vert.gif) top left; } /* overflow: visible; sur firefox, hidden sur opera 9. Mis ds le js du html. */
div.explications { display: block; visibility: visible; } 
div.explications h3 { font: 22px/26px monotype corsiva, comic sans ms, arial, helvetica; } 
div.explications p { text-indent: 50px; font: 20px/24px monotype corsiva, comic sans ms, arial, helvetica; } 
div.explications div.parade { float: right; margin: 10px; width: 262px; }
div.explications div.parade p.plegende { text-indent: 0; padding: 0px 10px; font: 12px/14px comic sans ms, arial, helvetica; }

table.margin {margin-left: 35px;}
th.fr  { background: #F0F0FF; }
th.en  { background: #F0F0FF; }
td#decoration0, td#decoration1 { height: 20px; }
td#decoration2 { width: 234px; height: 20px; } /*194+2x20=234*/
td#decoration3 { height: 20px; }
td#decoration0, td#decoration1, td#decoration2, td#decoration3 { background: #afddaf; }
td.navmarge { background: #afddaf; }
td.stage { background: #afddaf url(images-gen/bg-bordcoin0-vert.gif) no-repeat top left; }
td#decoration4 { width: 234px; height: 60px; text-align: center; vertical-align: top; font: 12px comic sans ms, arial, helvetica; color: #669966; background: #afddaf url(images-gen/bg-bordcoin1-vert.gif) no-repeat bottom right; } 
td#decoration5 { height: 60px; background: #ffffff url(images-gen/bg-bordcoin2-vert.gif) no-repeat bottom left; } 
img.encastrer { margin: 20px; border: thin inset #ddeedd; }
img.parade { margin: 10px; border: 1px outset; float: right; }
p { font-family: comic sans ms, arial, helvetica; }
p#ptest { display: none; visibility: visible; }
h1 { color: #eeffff; font: 30px comic sans ms, arial, helvetica; text-align: center; text-shadow: #333344 4px 4px 2px; margin: 10px 15%; padding: 10px; }
h2 { color: #006633; font: 20px arial, helvetica; margin: 10px; }
h3 { color: #004400; font-family: comic sans ms, arial, helvetica; }
h4 { font-family: arial, helvetica; }
p span.fr { color: #000033; }
p span.en { color: #330000; }
input { color: #003300; font: 13px arial, helvetica; background: #ccddcc; }
div.yl0, div.yl1, div.yl2, div.yl3, div.yl4 { visibility: visible; display: block; }


/*border-color: #334433; 
// droits d'auteurs 2004 - 2009 copyrights - serge_lamarche@hotmail.com 
// All reproductions are forbidden without written permission
// Toute reproduction est interdite sans autorisation écrite
// Javascripts effects are available at affordable prices. Thanks. 
// Les effets javascripts sont disponibles à prix abordables. Merci. 
// Serge Lamarche.
*/