@import "animations.css";

html { background-image:url("logo.png"), url("logo.png"), url("entete2.png"); background-position:center left, center right, top center; 
       background-repeat:no-repeat; background-attachment:fixed, fixed, fixed; background-size:auto; }

body { width:800px; margin:160px auto 0px; font-size:15px; font-family:Verdana; color:#544A3B; }

p, h2, h3, h4, h5 { padding-left:12px; padding-right:12px; }
h2 { font-size:32px; text-shadow:2px 2px 0px #eee; padding-top:16px; }
h3 { font-size:20px; padding-bottom:10px; border-bottom:4px solid #ccbfba; }
h4 { font-size:17px; }
h5 { font-size:15px; }
h3, h4, h5 { color:#654; text-shadow:1px 1px 0px #fff; clear:both; }
blockquote { margin:0 0 2em 0; padding-left:12px; }

table.b    { border-collapse:collapse; }
table.b th { border:1px solid #bbb; padding:2px 8px; text-align:left; color:#000; background-color:#eee; }
table.b td { border:1px solid #bbb; padding:2px 8px; }

td.top,    th.top    { vertical-align:top; }
td.bottom, th.bottom { vertical-align:bottom; }
td.nw, th.nw         { white-space:nowrap; }

.clear { clear:both; }
.relief    { background-color:#fffcf8; border:#ddd 1px solid; margin:30px 0; padding:10px; border-radius:5px; box-shadow:0 0 20px #aaa; }
.attention { background-color:#fff8f8; border:#caa 1px solid; margin:30px 0; padding:10px; border-radius:5px; box-shadow:0 0 20px #f88;
             color:#800; font-weight:bold; font-style:italic; }
.hleft     { text-align:left !important; }
.hcenter   { text-align:center !important; }
.hright    { text-align:right !important; }

img.b      { border:#888 1px solid; box-shadow:5px 5px 8px #bfbab7; border-radius:4px; }
img.left   { float:left; margin:0 30px 16px 0; }
img.right  { float:right; margin:0 0 16px 30px; }
img.margintop { margin-top:16px; }
div.clear, p.clear { clear:both; margin:-1em 0; padding:0; }

a:hover { color:#f00; }
a:hover img.b { border-color:#f00; }

/* les styles pour les diapos en mosaïque */
/* -------------------------------------- */
table.mosaique { margin:auto; }
table.mosaique td  { padding:0; text-align:center; }
table.mosaique img { border:1px solid #bbb; margin:6px 0; border-radius:4px; transition:0.4s; }
table.mosaique a         { background-color:#efe8e0; background-color:rgba(220, 210, 200, 0.3); color:#a00; text-decoration:none;
                           display:inline-block; margin:2px; padding:5px 7px; border:1px solid #ccc; border-radius:8px; transition:all 0.3s; }
table.mosaique a:visited { color:#c77; }
table.mosaique a:hover   { border-color:#800; background-color:#eeb8b0; background-color:rgba(128, 0, 0, 0.3); color:#000; }
/*table.mosaique a img       { transform:perspective(200px) rotateY(0deg); transition:none; }
table.mosaique a:hover img { border:1px solid #800; transform:perspective(200px) rotateY(360deg); transition:transform 0.4s; }*/
table.mosaique a img       { transform:scale(0.95, 0.95); transition:transform 0.4s; }
table.mosaique a:hover img { border-color:#666; transform:scale(1, 1); }

/* les styles pour les formulaires */
/* ------------------------------- */
#form { margin:30px 0 0; padding:0 12px; border:1px solid #ccc; box-shadow:5px 5px 8px #bfbab7; border-radius:10px; }
#form h3 { margin-top:16px; }
#form input, #form textarea, #form select { border:1px solid #bbb; border-radius:8px; transition:all 0.15s; }
#form input[type = submit]:hover, #form input[type = reset]:hover, #form input[type = button]:hover { border:1px solid #666; }
input, select { font-family:verdana; font-size:15px; }
input, select, textarea { padding:4px 10px; }
textarea { font-size:14px; }
input.debut { margin-left:-12px; }

/* les styles de l'en-tête, du menu et du pied de page */
/* --------------------------------------------------- */
div#entete { position:fixed; top:0px; left:0px; width:100%; text-align:center; padding-bottom:10px; border-bottom:1px solid #eee;
             background-color:#808F87; box-shadow:0 5px 8px #999;
             background-image:url("entete.png"), url("entete-g.gif"), url("entete-d.gif");
             background-position:top center, top left, top right;
             background-repeat:no-repeat, no-repeat, no-repeat; }

div#entete h1 { font-size:48px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:bold0; margin:0 12px 40px; text-shadow:2px 2px 1px #eee; color:#316548; }

div#entete ul { list-style-type:none; margin:0; padding:0; display:inline-block; }
div#entete li { float:left; margin:0 6px; }
div#entete a  { color:#300; font-size:14px; font-weight:bold; padding:8px 11px; display:block; text-shadow:1px 1px 0px #fcc;
                border:1px solid #fdc; border-radius:16px; box-shadow:5px 5px 8px #333; text-decoration:none;
                background-image:url("fondmenu.png"); background-position:center center; transition:all 0.3s; }
div#entete a:hover { color:#fff; border-radius:4px; text-shadow:1px 1px 0px #000; }
div#entete #divNbreVisiteurs { position:absolute; top:0; right:0; color:#fff; }

div#pied { font-size:14px; position:absolute; margin-top:200px; left:0px; width:100%; background-color:#808F87;
           border-top:1px solid #eee; box-shadow:0 -5px 8px #999; }
div#pied table { width:800px; margin:0 auto; }
div#pied td { padding:12px 0; }

/* les styles pour la connexion */
/* ---------------------------- */
div#connexion { position:absolute; top:50px; right:10px; text-align:left; }
div#connexion input.petit { color:#bbb; border:1px solid #bbb; font-size:10px; background-color:transparent; padding:4px; border-radius:4px; }
div#connexion input.petit:hover { border-color:#888; }
div#connexion form { border:1px solid #888; background-color:#bbb; padding:12px; margin-top:4px; border-radius:6px; box-shadow:5px 5px 8px #666; }

/* les styles pour les MAJ de la base de données */
/* --------------------------------------------- */
div.bd        { border:1px solid #bbb; box-shadow:0 0 50px #fff; border-radius:10px; clear:both; margin:-1px -12px 0px -12px; padding:2px 12px 1px; transition:all 0.5s; overflow:auto; }
div.bdmaj     { border:1px solid #f00; box-shadow:0 0 50px #f00; }
div.bdmasque  { border:2px dashed #800; margin-bottom:1px; }
div.bd p      { margin-bottom:2px; }
p.bdmasque    { color:#800; background:#fff; border:1px solid #800; box-shadow:0 0 10px #800; padding:8px; border-radius:5px; text-align:center; }
a.bdbouton    { border0:1px solid #ccc; border-radius:20px; font-weight:bold; text-decoration:none; background-color:#ddd; padding:6px 24px;
                   color:#000; box-shadow:-2px -2px 2px #fff inset, 0 0 1px #ccc, -6px -6px 6px #bbb inset, 6px 6px 6px #fff inset; transition:all 0.15s; }
a.bdbouton:hover { color:#800; box-shadow:-2px -2px 2px #fff inset, 0 0 12px #800; }

/* les styles propres à la page des news */
/* ------------------------------------- */
div#news h3 { margin-top:6px; }
div#news h3 small { float:right; font-size:13px; font-weight:normal; }
div#news p.clear  { margin:12px 0px 20px 10px; }
div#news div.bd p.clear  { margin-bottom:11px; }

div#news .news { transition:all 1s; }

/* les styles propres à la page biblio */
/* ----------------------------------- */
div#biblio h3 { margin-top:6px; }
div#biblio h3 small { float:right; font-size:13px; font-weight:normal; }
div#biblio p.clear  { margin:12px 0px 20px 10px; }
div#biblio div.bd p.clear  { margin-bottom:11px; }

div#biblio .biblio { transition:all 1s; }

/* les styles propres à la page bonnesadresses */
/* ------------------------------------------- */
div#bonnesadresses div.bd  { margin:-1px 0px 0px 0px; padding-bottom:8px; }
div#bonnesadresses div.bd p, div#bonnesadresses h3 { margin-left:0; padding-left:0; color:inherit; }
div#bonnesadresses h3 { font-size:22px; text-shadow:2px 2px 0px #fff; margin-top:14px; margin-bottom:4px; border:none; }
div#bonnesadresses h3 small { float:right; font-size:13px; font-weight:normal; }
div#bonnesadresses h3 input { border-radius:50%; padding:2px 6px; margin-left:2px; transition:all 0.3s; }
div#bonnesadresses h3 input:hover { border-radius:10%; }
div#bonnesadresses blockquote { border:1px solid #ccc; border-radius:5px; margin:0; padding:10px; background-color:rgba(255, 255, 255, 0.3); overflow:auto; }
div#bonnesadresses { color:#444; background:#eee; background-color:rgba(255, 255, 255, 0.1); transition:all 1s; }
div#bonnesadresses .tous              { color:#000; }
div#bonnesadresses .sitestouristiques { color:#840; background:#fed; background-color:rgba(255, 128, 0, 0.1); transition:all 1s; }
div#bonnesadresses .bonscoins         { color:#363; background:#efe; background-color:rgba(50, 200, 50, 0.1); transition:all 1s; }
div#bonnesadresses .artisansproches   { color:#226; background:#eef; background-color:rgba(0, 0, 255, 0.1); transition:all 1s; }
div#bonnesadresses .gites             { color:#440; background:#ffd; background-color:rgba(255, 255, 0, 0.1); transition:all 1s; }
div#bonnesadresses .divers            { color:#044; background:#dee; background-color:rgba(0, 255, 255, 0.1); transition:all 1s; }

div#bonnesadresses #options    { list-style-type:none; margin:0 0 6px; padding:0; display:inline-block; }
div#bonnesadresses #options li { float:left; margin:0px; }
div#bonnesadresses #options .encours { border-bottom:4px solid #888; padding-bottom:7px; }
div#bonnesadresses #options a  { font-weight:bold; padding:10px 10px; display:block; border:1px solid #ccc; margin-right:-1px; border-bottom0:6px solid #eee; border-radius:6px; text-decoration:none; transition:all 0.4s; }
div#bonnesadresses #options a.tous:hover              { box-shadow:0 55px 0px #000 inset; color:#ddd; }
div#bonnesadresses #options a.sitestouristiques:hover { box-shadow:0 55px 0px #840 inset; color:#fc9; }
div#bonnesadresses #options a.bonscoins:hover         { box-shadow:0 55px 0px #080 inset; color:#afa; }
div#bonnesadresses #options a.artisansproches:hover   { box-shadow:0 55px 0px #008 inset; color:#aaf; }
div#bonnesadresses #options a.gites:hover             { box-shadow:0 55px 0px #440 inset; color:#ffa; }
div#bonnesadresses #options a.divers:hover            { box-shadow:0 55px 0px #044 inset; color:#aff; }

/* les styles propres à la page des liens */
/* -------------------------------------- */
div#liens table       { width:735px; cursor:pointer; border-radius:10px; margin-bottom:12px; border:1px solid #ccc; 
                        background:#eee; background:rgba(220, 220, 220, 0.1); transition:all 0.4s; }
div#liens table:hover { background:#ccc; background-color:rgba(255, 128, 0, 0.1); color:#840; border-color:#ca8; box-shadow:5px 5px 5px #888; }
div#liens table:hover img { border-color:#c88; }
div#liens td:nth-child(2) { padding:3px 18px; width:100%; }
div#liens table       strong.lien::before { content:"➔ "; left:-10px; }
div#liens table       strong.lien         { border-bottom:2px solid #000; padding:0 0 3px 0; transition:all 0.4s; }
div#liens table:hover strong.lien         { border-bottom:2px solid #800; margin-left:16px; }
div#liens table img       { transform:perspective(200px) rotateY(0deg);  transition:transform 0.4s; border-radius:8px; }
div#liens table:hover img { transform:perspective(200px) rotateY(30deg); transition:transform 0.4s; }
div#liens div    table { margin-left:24px; }
div#liens div.bd table { margin-left:0px; margin-bottom:0; }
div#liens div.bd       { margin-bottom:7px; padding-right:0; }
div#liens div.outils   { float:right; }
div#liens div.outils small { font-size:10px; }
div#liens a.bdbouton   { padding:3px 24px; }

div#liens .clubami       { transition:all 1s; }
div#liens .sitepassionne { transition:all 1s; }
div#liens .garage        { transition:all 1s; }
div#liens .marchand      { transition:all 1s; }

/* les styles propres à la page des petites annonces */
/* ------------------------------------------------- */
div#annonces div.bd  { margin:-1px 0px 0px 0px; padding-bottom:8px; }
div#annonces div.bd p, div#annonces h3 { margin-left:0; padding-left:0; color:inherit; }
div#annonces h3 { font-size:22px; text-shadow:2px 2px 0px #fff; margin-top:14px; margin-bottom:4px; border:none; }
div#annonces blockquote { border:1px solid #ccc; border-radius:5px; margin:0; padding:10px; background-color:rgba(255, 255, 255, 0.3); }
div#annonces            { color:#444; background:#eee; background-color:rgba(255, 255, 255, 0.1); transition:all 1s; }
div#annonces .tous      { color:#000; }
div#annonces .avendre   { color:#800; background:#fee; background-color:rgba(255, 0, 0, 0.1); transition:all 1s; }
div#annonces .achete    { color:#080; background:#efe; background-color:rgba(0, 255, 0, 0.1); transition:all 1s; }
div#annonces .echange   { color:#008; background:#eef; background-color:rgba(0, 0, 255, 0.1); transition:all 1s; }
div#annonces .alouer    { color:#440; background:#ffd; background-color:rgba(255, 255, 0, 0.1); transition:all 1s; }
div#annonces .recherche { color:#840; background:#fed; background-color:rgba(255, 128, 0, 0.1); transition:all 1s; }
div#annonces .contacts  { color:#444; background:#eee; background-color:rgba(200, 200, 200, 0.1); transition:all 1s; }
div#annonces .mariage   { color:#888; background:#fff; background-color:rgba(255, 255, 255, 0.6); transition:all 1s; }
div#annonces .autre     { color:#444; background:#eee; background-color:rgba(200, 200, 200, 0.1); transition:all 1s; }

div#annonces #options    { list-style-type:none; margin:0 0 6px; padding:0; display:inline-block; }
div#annonces #options li { float:left; margin:0px; }
div#annonces #options .encours { border-bottom:4px solid #888; padding-bottom:7px; }
div#annonces #options a  { font-weight:bold; padding:10px 10px; display:block; border:1px solid #ccc; margin-right:-1px; border-bottom0:6px solid #eee; border-radius:6px; text-decoration:none; transition:all 0.4s; }
div#annonces #options a.tous:hover      { box-shadow:0 55px 0px #000 inset; color:#ddd; }
div#annonces #options a.avendre:hover   { box-shadow:0 55px 0px #800 inset; color:#faa; }
div#annonces #options a.achete:hover    { box-shadow:0 55px 0px #080 inset; color:#afa; }
div#annonces #options a.echange:hover   { box-shadow:0 55px 0px #008 inset; color:#aaf; }
div#annonces #options a.alouer:hover    { box-shadow:0 55px 0px #440 inset; color:#ffa; }
div#annonces #options a.recherche:hover { box-shadow:0 55px 0px #840 inset; color:#fb8; }
div#annonces #options a.contacts:hover  { box-shadow:0 55px 0px #444 inset; color:#ddd; }
div#annonces #options a.mariage:hover   { box-shadow:0 55px 0px #888 inset; color:#ddd; }
div#annonces #options a.autre:hover     { box-shadow:0 55px 0px #444 inset; color:#ddd; }

/* les styles propres à la page des archives */
/* ----------------------------------------- */
div#archives div       { cursor:pointer; border-radius:10px; margin-bottom:12px; border:1px solid #ddd; padding:12px;
                         background:#eee; background:rgba(220, 220, 220, 0.1); transition:all 0.4s; }
div#archives div.bdmasque  { border:2px dashed #800; margin-bottom:1px; }
div#archives p         { margin:0; padding:0; }
div#archives p:nth-child(1) { padding-bottom:4px; margin-bottom:10px; border-bottom:2px solid #bbb; }
div#archives div:hover { background:#ccc; background-color:rgba(255, 0, 0, 0.1); color:#800; border-color:#c88; box-shadow:5px 5px 5px #888; }
div#archives div:hover img { border-color:#c88; }
div#archives div img       { transform:perspective(200px) rotateY(0deg);  transition:transform 0.4s; border-radius:8px; }
table.parametres { margin-left:10px; margin-bottom:26px; background:#eee; background-color:rgba(0, 0, 0, 0.07); border:1px solid #bbb; border-radius:10px; box-shadow:5px 5px 8px #bfbab7; }
table.parametres td { padding:2px 12px; }

/* les styles propres aux albums */
/* ----------------------------- */
table.mosaique a.masque { border:2px dashed #800; background-clip: padding-box; color:#888; display:block }
table.mosaique a.masque:hover { color:#000; }