/* Feuille de style pour touchedubois.com */
/* ############################### General */
body {
font-family: sans-serif;
}
body, #menu .menucol, table.tblcoords td, .commande p.pcoords  {
background-color: #FFDFB8;
background-image: url("img/fonds/lnature.jpg");
background-attachment: fixed;
}
#entete, .accueil div, .contact, .cgv, .fabricants, .pdesc, .ppanier, .panier, .commande {
background-color: #FFECD3;
background-image: url("img/fonds/ulnature.jpg");
background-attachment: fixed;
}
#menu, div.titre, ul#menucible {
background-color: #B68751;
background-image: url("img/fonds/nature.jpg");
background-attachment: fixed;
}
.clear { 
clear: both;
visibility: hidden;
margin: 0;
}

p.spacer {
line-height: 0px;
text-align: right;
width: 36%;
margin: 0;
padding: 0;
}
a { color: #1A00C2; }
a:visited { color: #A10027; }
a:hover { color: #1C00FF; }
div.titre {
text-align: center;
color:#FFF;
margin: 0;
padding: 22px 0 11px;
}
div.titre a img {
border: none;
}
div.titre p {
margin: 0 auto;
color:#000;
width: 750px;
}
/* ------------------------------- le menu principal */
#menu {
position: relative;
float: left;
width: 19em;
padding: 0;
margin: 0 12px 0 0;
font-size: 80%;
z-index: 10;
}
#menu .menucol {
margin: 12px;
margin-top: 0;
padding: 0;
}
#menu hr {
padding: 0;
margin: 0 6px;
}
#menu h2 {
font-size: 1.24em;
font-weight: bold;
padding: 0.4em;
margin: 0;
text-align: center;
color: #FFF;
background-color: #775122;
background-image: url("img/fonds/dnature.jpg");
background-attachment: fixed;
border-bottom: 2px solid silver;
}
#menu ul {
padding: 0;
margin: 0;
list-style-type: none;
text-align: left;
}
#menu ul#menucat {
}
#menu ul#menugen {
}
#menu li {
padding: 0;
margin: 0;
}
#chercheform { width: 100%; }
#chercheform p {
padding: 0.2em;
margin: 0;
font-size: 90%;
text-align: right;
}
#chercheform #cherchetexte { width: 95%; }
#chercheform label {
display: block;
text-align: left;
}/* ------------------------------- traitement des liens des menus */
#menu a, #menucible a, #menuclasse a {
text-decoration: none;
font-weight: bold;
}
#menu a {
padding: 0.35em;
color: #000;
margin: 0;
display: block;
}
#menucible a, #menuclasse a {
padding: 0.5em;
margin: 0;
color: #fff;
border-width: 3px;
border-style: solid;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1.1em;
}
#menu a:visited {
color: #65000B;
}
#menu a:hover{
color: #fff;
}

#menucible a:hover, #menuclasse a:hover {
color: #000;
}










/* ############################### images des pages d'accueil */
a.vignacc {
margin: 4px;
/*height: 232px;*/
/*max-width: 200px;
min-width: 9em;*/
padding: 5px 5px 1px;
border-style: solid;
border-width: 8px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
border-radius: 24px;
background-color: #EFEFEF;
}
a.vignacc img {
border: none;
margin: 0;
padding: 0;
}

.droite { float: right; }
.gauche { float: left; }












/* ############################### Pages du catalogue */
/* ------------------------------- l'entete de cible */
#entete {
z-index: 1;
margin: 0;
padding: 0.3em 0 0 0;
}
#entete h1 {
text-align: center;
margin: 0;
padding: 0;
font-variant: small-caps;
font-weight: bold;
color: #40a;
border-bottom: 3px solid #EDC48E;
}
#entete h2 {
text-align: right;
font-style: italic;
font-weight: normal;
margin: 0 1em 0.3em;
padding: 0;
color: #864;
}
ul#menucible, ul#menuclasse {
margin: 0;
line-height: 2.8em;
padding: 5px;
}
ul#menucible { text-align: center; }
#menucible li {
font-size: 88%;
display:inline;
display:inline-block;
padding: 0;
margin: 0;
list-style-type: none;
text-align: center;
}
/* ------------------------------- l'entete de classe */
#classeentete {
z-index: 1;
margin: 1em 15% 1em 1%;
padding: 8px;
border-style: solid;
border-width: 8px;
-moz-border-radius: 36px;
-webkit-border-radius: 36px;
border-radius: 36px;
}
#classeentete h2 {
z-index: 100;
text-align: center;
margin: 0;
padding: 0;
font-variant: small-caps;
font-weight: bold;
color: #411B79;
}
#menuclasse { text-align: center; }
ul#menuclasse {}
#menuclasse li {
font-size: 78%;
display:inline;
display:inline-block;
padding: 0;
margin: 0;
list-style-type: none;
text-align: center;
}

/* ------------------------------- les sous-classes */
.sousclasse {
margin: 1em 1%;
padding: 8px;
-moz-border-radius: 36px;
-webkit-border-radius: 36px;
border-radius: 36px;
}
.sousclasse h3 {
text-align: center;
font-variant: small-caps;
color: #fff;
margin: 0 0 0.6em;
padding: 0.7em;
-moz-border-radius-topright: 36px;
-moz-border-radius-topleft: 36px;
-webkit-border-top-right-radius: 36px;
-webkit-border-top-left-radius: 36px;
border-top-right-radius: 36px;
border-top-left-radius: 36px;
}

/* ------------------------------- les vignettes */
.vignette {
float: left;
margin: 4px;
max-width: 200px;
min-width: 9em;
padding: 0;
border-style: solid;
border-width: 8px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
border-radius: 24px;
}


.ventete {
height: 4em;
text-align: center;
color: #ffffff;
margin: 0;
padding: 0;
font: bold 0.9em sans-serif;
line-height: 1em;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.ventete a {
width: 100%;
height: 4em;
margin: 0;
padding: 0;
display: table;
vertical-align: middle;
text-align: center;
text-decoration: none;
color: #ffffff;
}
.ventete span {
width: 6em;
display: table-cell;
vertical-align: middle;
margin: 0;
padding: 0;
max-width: 12em;
height: 4em;
}
.vprix {
margin: 0;
padding: 0;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.vprix a {
display: block;
margin: 0;
padding: 0.15em 0.5em;
line-height: 1.2em;
font: bold 1em sans-serif;
text-decoration: none;
color: #ffffff;
text-align: right;
}
.vimage {
width: 100%;
height: 212px;
display: table;
padding: 0;
margin: 0;
text-align: center;
background-color: #EFEFEF;
}
.vimage a {
width: 100%;
display: table-cell;
vertical-align: middle;
margin: 0;
padding: 0;
height: 212px;
border: 0px;
}
.vimage img {
margin: 0;
padding: 0;
border: none
}

/* ############################### Pages produits */
.proddesc {
float: left;
max-width: 30em;
margin: 0.2em;
padding: 0;
border: 8px solid transparent;
-moz-border-radius: 36px;
-webkit-border-radius: 36px;
border-radius: 36px;
background-color: #fff;
}
.pentete {
margin: 0;
padding: 0.3em 0.3em 0.6em;
color: #fff;
font-weight: bold;
-moz-border-radius-topleft: 25px;
-moz-border-radius-topright: 25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.proddesc em {
text-decoration: underline;
font-weight: normal;
font-style: normal;
font-size: 0.9em;
}
.pentete p {
margin: 0.3em;
padding: 0;
}
.pdesc {
margin: 0;
padding: 0.8em;
}
.pentete p.nom { text-align: center; }
.proddesc .pdesc p {
margin: 0;
padding: 0.6em;
}
.proddesc .prix {
font-weight: bold;
font-size: 1.07em;
}

.prodimg {
float: left;
}
.proddesc .pspecs {
margin: 0;
padding: 0.2em 2em;
text-align: right;
background-color: #ffff88;
background-image: url("img/fonds/ljaune.jpg");
background-attachment: fixed;
}
.proddesc .pspecs p {
margin: 0.3em;
padding: 0.2em;
}
.ppanier {
text-align: left;
margin: 0;
padding: 0.3em 2em;
-moz-border-radius-bottomleft: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-bottom-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
#ajoutpanier label {
display: block;
margin-bottom: 0.4em;
font-size: 80%;
text-decoration: underline;
}

.produit .prodimg {
float: left;
margin: 8px 0 0 0;
padding: 0;
}
.pfabric {
background-color: transparent;
margin: 0 50px;
padding: 0;
}
.pfabric a img {
margin: 2px;
padding: 3px;
border: 1px solid transparent;
background-color: #fff;
}
.pfabric a:hover img { border-color: silver; }
/*span.pdesc {
margin: 0.6em 0.2em;
padding: 0.3em 0.5em;
min-width: 10em;
max-width: 22em;
background-color: #fff;
}*/
.produit img.photo {
margin: 6px;
padding: 0;
}

/* ------------------------------- gestion des couleurs */

div.rouge, a.rouge , .lirouge { border-color: #C12631; }
.rouge .ventete, .lirouge , .rouge .vprix { background-color: #620204; }
div.orange, a.orange , .liorange { border-color: #ff9933;}
.orange .ventete, .liorange , .orange .vprix { background-color: #703800; }
div.jaune, a.jaune , .lijaune { border-color: #F1F120;}
.jaune .ventete, .lijaune, .jaune .vprix { background-color: #807100; }
div.vert, a.vert , .livert { border-color: #479612;}
.vert .ventete, .livert, .vert .vprix { background-color: #19410C; }
div.bleu, a.bleu , .libleu { border-color: #406FF0;}
.bleu .ventete, .libleu, .bleu .vprix { background-color: #123360; }
div.violet, a.violet , .liviolet { border-color: #AB3FB5;}
.violet .ventete, .liviolet, .violet .vprix { background-color: #570245; }

.ssrouge h3, .rouge .pentete, #menu .menucol.rouge:hover h2, #menu .menucol.rouge a:hover { background-color: #620204;
background-image: url("img/fonds/drouge.jpg"); background-attachment: fixed;
}
.ssorange h3, .orange .pentete { background-color: #703800;
background-image: url("img/fonds/dorange.jpg"); background-attachment: fixed;
}
.ssjaune h3, .jaune .pentete, #menu .menucol.jaune:hover h2, #menu .menucol.jaune a:hover  { background-color: #807100;
background-image: url("img/fonds/djaune.jpg"); background-attachment: fixed;
}
.ssvert h3, .vert .pentete, #menu .menucol.vert:hover h2, #menu .menucol.vert a:hover { background-color: #19410C;
background-image: url("img/fonds/dvert.jpg"); background-attachment: fixed;
}
.ssbleu h3, .bleu .pentete, #menu .menucol.bleu:hover h2, #menu .menucol.bleu a:hover  { background-color: #123360;
background-image: url("img/fonds/dbleu.jpg"); background-attachment: fixed;
}
.ssviolet h3, .violet .pentete { background-color: #570245;
background-image: url("img/fonds/dviolet.jpg"); background-attachment: fixed;
}

.ssrouge, #menu .menucol.rouge:hover { background-color: #F27072;
background-image: url("img/fonds/lrouge.jpg"); background-attachment: fixed;
}
.ssorange { background-color: #F6B652;
background-image: url("img/fonds/lorange.jpg"); background-attachment: fixed;
}
.ssjaune, #menu .menucol.jaune:hover { background-color: #F1F268;
background-image: url("img/fonds/ljaune.jpg"); background-attachment: fixed;
}
.ssvert, #menu .menucol.vert:hover { background-color: #9EEAA0;
background-image: url("img/fonds/lvert.jpg"); background-attachment: fixed;
}
.ssbleu, #menu .menucol.bleu:hover { background-color: #AEABFF;
background-image: url("img/fonds/lbleu.jpg"); background-attachment: fixed;
}
.ssviolet { background-color: #DE95FF;
background-image: url("img/fonds/lviolet.jpg"); background-attachment: fixed;
}

.lirouge:hover, a.rouge:hover { background-color: #F27072; }
.liorange:hover, a.orange:hover { background-color: #F6B652; }
.lijaune:hover, a.jaune:hover { background-color: #F1F268; }
.livert:hover, a.vert:hover { background-color: #9EEAA0; }
.libleu:hover, a.bleu:hover { background-color: #AEABFF; }
.liviolet:hover, a.violet:hover { background-color: #DE95FF; }

/* ################################ Liens "haut de page" et "retour" */
p.haut a img { border: none;}
p.retour a img {
border: none;
display: inline;
vertical-align: middle;
}
p.haut { text-align: center; }
p.retour { text-align: left; }
p.haut, p.retour {
padding: 0;
margin: 0.6em;
}
p.haut a, p.retour a {
padding: 5px;
margin: 0;
text-decoration: none;
font: bold 1em sans-serif;
color: #0010A0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
p.haut a:visited, p.retour a:visited {
color: #0010A0;
}
p.haut a:hover, p.retour a:hover {
background-color: #B68751;
color: #fff;
}

/* ################################ Le Panier / La Commande / BDC */
.panier, .commande {
float: left;
width: 66%;
margin-top: 12px;
}
.bdc {
float: none;
width: 75%;
margin: 12px auto;
}
/*.bdc p {
padding: 0.4em 1em;
margin: 16px;
}*/
.panier p, .commande p {
text-align: center;
}
.panier #boutonok, .commande #boutonok {
font-weight: bold;
}
.commande em {
font-weight: bold;
font-style: normal;
color: red;
}
.commande p.info {
font-size: 85%;
}
.commande input#adrslivr, .commande input#cgv {
vertical-align: middle;
}
.commande p.pcoords {
padding: 8px;
margin: 6px;
}
.commande dl {
}
.commande dt {
float: left;
clear: left;
text-align: right;
width: 40%;
font-size: 90%;
font-weight: bold;
text-decoration: underline;
}
.commande dd, .commande dt {
padding: 0.2em 0.3em;
}
.commande p.pcoords textarea{
vertical-align: top;
}
.commande p.pcoords a, .commande p.pcoords a:hover, .commande p.pcoords a:visited {
color: #0010A0;
}
.commande p.pcoords a:hover {
background-color: #FFE1B1;
}
.commande h3 {
padding-left: 3em;
font-variant: small-caps;
color: #208;
border-top: 2px solid #208;
}
.commande p.pnotes {
margin: 0.5em 2em;
text-indent: 2em;
text-align: left;
}
.commande p.vcnom {
font-weight: bold;
margin-bottom: 0;
padding-bottom: 0;
}

/* ################################ Les Tableaux Panier / Validation Commande */
.panier p {
padding: 0.2em 1em;
}
#tblpanier, table.tblcoords {
margin: auto;
border-collapse: collapse;
}
#tblpanier th {
font-size: 75%;
padding: 0.2em 0.5em;
background-color: silver;
border-left: 1px solid silver;
}
#tblpanier td {
font-size: 0.9em;
text-align: center;
border-bottom: 1px solid silver;
padding: 0.4em 0.2em;
margin: 0.15em;
background-color: #fff;
}
#tblpanier td.toto {
text-align: right;
background-color: yellow;
}
#tblpanier tr.totottc th {
text-align: right;
font-weight: bold;
background-color: #ddd;
}
#tblpanier tr.totottc td.toto {
font-weight: bold;
background-color: #ffb;
}
#tblpanier tr.tototva {
text-align: right;
}
#tblpanier td.tpref {
border-left: 1px solid silver;
text-align: left;
}
#tblpanier td.tppu {
text-align: right;
}
#tblpanier td.tpsuppr,
#tblpanier tr.totottc td.toto,
#tblpanier tr.tototva td.toto,
.commande #tblpanier td.toto {
border-right: 1px solid silver;
}
#tblpanier td.vide {
border: none;
background-color: transparent;
}
#tblpanier a {
text-decoration: none;
color: #30a;
}
#tblpanier a:visited { color: #30a; }
#tblpanier a:hover {
text-decoration: underline;
color: #30a;
}
#tblpanier a img {
border: 1px solid transparent;
padding: 2px;
margin: 0 5px;
vertical-align: middle;
}
#tblpanier a img:hover {
border-color: red;
}
#tblpanier tfoot td {
border: none;
font-size: 70%;
}
table.tblcoords {
margin: auto;
}
table.tblcoords tr {
border-top: 4px solid #FFECD3;
}
table.tblcoords textarea {
vertical-align: top;
}
table.tblcoords td {
padding: 4px;
vertical-align: top;
}
table.tblcoords td.tclabel {
text-align: right;
vertical-align: top;
}
table.tblcoords td.milieu {
vertical-align: middle;
}
/* ################################ Les alertes (panier/commande) */
p.alerte {
margin: 0.3em;
padding: 0.8em 10px 0.8em 40px;
background-color: #FFE1B1;
background-image:url(http://www.touchedubois.com/img/tention.png);
background-repeat:no-repeat;
background-position: 5px 50%;
border: 2px solid red;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
font-weight: bold;
}

/* ################################ Les pages FIXES */
/* ----------------------------------- Conditions generales de vente */
.cgv {
float: left;
width: 66%;
margin: 12px 0;
}
.cgv #entete h2 {
font-size: 0.85em;
}
.cgv #entete ol {
margin-left: 3em;
font-size: 0.85em;
font-weight: bold;
}
.cgv #entete a {
text-decoration: none;
}
.cgv #entete a:hover {
text-decoration: underline;
}
.cgv h3 {
border-top: 6px solid #EDC48E;
padding: 1em 2.6em 0;
font-variant: small-caps;
text-decoration: underline;
font-size: 1.4em;
font-weight: bolder;
color: #40a;
}
.cgv p {
margin: 0.7em 1.2em;
}
.cgv dl {
margin: 0.7em 1.8em;
}
.cgv dt {
font-variant: small-caps;
text-decoration: underline;
font-size: 1.1em;
font-weight: bold;
color: #2F1B83;
}
.cgv ul {
margin: 1em;
}
/* ----------------------------------- Contact */
.contact {
float: left;
width: 66%;
min-width: 20em;
text-align: left;
margin: 12px 0;
}
.contact h3 {
text-align: center;
border-top: 3px solid #EDC48E;
padding-top: 1.2em;
font-variant: small-caps;
font-size: 1.4em;
font-weight: bolder;
color: #40a;
}
.contact label, .contact input, .contact textarea {
display: block;
text-align: left;
}
.contact p {
margin: 0.6em 0.3em 0.6em 1.7em;
}
.contact p.pcontact {
margin: 0.6em 0 0.4em 10%;
max-width: 20em;
float: left;
}
.contact h1, .contact h3 {
clear: both;
}
.contact form {
float: right;
margin: 0.4em 0.2em;
}
/* ----------------------------------- Fabricants */
.fabricants {
float: left;
width: 66%;
margin: 12px 0;
}
.fabricants #entete h2 {
font-size: 0.85em;
}
.fabricants h3 {
border-top: 6px solid #EDC48E;
padding: 1em 2.6em 0;
font-variant: small-caps;
text-decoration: underline;
font-size: 1.4em;
font-weight: bolder;
color: #40a;
}
.fabricants p {
padding: 0.2em 1em;
margin: 0.2em;
}
.fabricants .fab {
min-height: 85px;
margin: 24px 12px;
padding: 0;
border: 24px solid #fff;
}
.fabricants .fab img {
float: left;
clear: both;
padding: 0 24px 24px 0;
margin-right: 1em;
background-color: #fff;
}
/* ----------------------------------- Accueil */
.accueil {
margin: 0 10% 0 0;
}
.accueil.index {
float: left;
width: 66%;
margin: 0;
}
.accueil #entete h2 {
font-size: 0.85em;
}
.accueil div {
padding: 1em;
margin: 0 0 12px;
}
.accueil p {
margin: 0.4em 0.7em;
padding: 0.3em 0.5em;
}
.accueil p.cite {
text-align: right;
font-family: serif;
font-style: italic;
color: #775122;
margin: 0.7em 0.6em 0.4em;
padding: 0.6em 0.3em 0.3em
}
.accueil p.tab {
padding-left: 6em;
}
.accueil ul {
margin: 1em;
}
.accueil li {
margin: 0.72em;
}
/* ##########################  Pied de page */
div#pied {
clear: both;
text-align: left;
font-size: 92%;
color: #FFF;
background-color: #775122;
background-image: url("img/fonds/dnature.jpg");
background-attachment: fixed;
width: 100%;
margin: 0;
padding: 0;
display: table;
}
#pied span {
min-height: 31px;
display: table-cell;
vertical-align: middle;
padding: 0.3em 2em;
}
#pied a img {
border: none;
float: right;
padding: 0;
margin: 0 10px 0 0;
}
#pied a, #pied a:visited {
color: #A7EFFF;
text-decoration: none;
}
#pied a:hover {
text-decoration: underline;
}