@import "reset.css";

body {font-size:62.5%;} /* 10px */
body {background: #ded5c4 url(../img/bg/body.jpg) repeat top center;position:relative;}
html, body, form, fieldset, table { font-family: Trebuchet, "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; color: #424242;}

a:link {color: #424242;}
a:visited {color: #424242;}
a:hover { text-decoration: none; color: #424242;}
/*a:focus,a:active {}*/

#interest a {padding: 0 0.2em;}
#interest a:hover {color: #3A5998;}
a.lien-homme {background-color: #8ad5fc;}
a.lien-femme {background-color: #f29a31;}
a.lien-enfant {background-color: #cac2b2;}
p {line-height: 125%;margin: 0 0 1em 0;}

/* -- HEADERS -- */
h1 {font-size: 200%;margin: 0 0 1em 0;font-weight: bold;}
h2 {font-size: 140%;margin: 0 0 1em 0;font-weight: bold;}
.feature h2 {text-align:center;font-family:verdana;}
#product h2 {font-size:180%;margin-bottom:0.4em;}
h3 {font-size: 140%;margin: 0 0 1em 0;font-weight: bold;color:white;}
h4 {font-size: 180%;margin: 0 0 0.5em 0;color:#76bcf5;font-family: Georgia;}
h5 {font-size: 100%;margin: 0 0 1em 0;}
h6 {font-size: 14px;margin: 0 0 1em 0; color:#424242;text-shadow: 1px 1px 0 #FFF;}

/* -- GRID FACILITIES -- */

.grid_wrap, .grid_half, .grid_quarter, .grid_third,.grid_twothird {padding-right:10px;padding-left:10px;}
.grid_wrap {width:960px;}
.grid_quarter {width:220px;}
.grid_third {width:300px;}
.grid_half {width:460px;}
.grid_twothird {width:620px;}

.centered {
    width: 980px;
    margin: 0 auto 0 auto;
}
#container {
    position:relative;
    background: url(../img/bg/container.gif) repeat-x top left;
}
#content {
    background: url(../img/bg/content.gif) repeat-y top left;
    overflow: hidden;
    padding-bottom:3em;
}

/* -- HEADER -- */

#header { height: 86px;background: url(../img/bg/header.jpg) no-repeat top center;}
#header h1 {
    /*position: absolute; top: 4px;*/
    width: 640px; height: 86px;
    background: url(../img/logo-tablier-jeanne.jpg) no-repeat;
    text-indent: -9999px;
    overflow : hidden;
}
#header h1 a{display: block;width: 100%; height: 100%;}
#panier {position:absolute; width: 320px; height: 122px;top:0; right: 10px; background: url(../img/panier.jpg) no-repeat top left;font-size:1.2em; }
#panier p {letter-spacing:0px; padding: 26px 0 0 60px; line-height: 1.4em;}
#panier a {font-size:1.7em;color:#f29a31;letter-spacing:0px;text-decoration:underline;}

/* -- FOOTER -- */
#footer {clear: both;font-family:Georgia;font-size:1.4em;padding-top:20px;padding-bottom:10px;}
#footer {background: #ded5c4 url(../img/footer-couture.jpg) no-repeat 50% 2px;}
#footer p{margin-bottom:0.2em;}
#footer #copyright { text-align:center;}
#footer #liensdubas {text-align:center; font-size:0.9em;margin:0.4em 0 0.8em;}
#footer #liensdubas a {text-decoration:underline;}
#footer ul {list-style: none; margin:0; padding:0;}
#footer li {padding-bottom:0.6em;}
#brand p {font-size:1.2em;text-shadow: 1px 1px 0 #FFF;}
#brand ul {margin-top:1em;}
#links {font-size:11px;}

/*---- HOMEPAGE  ----*/

#interest {height: 314px; padding: 18px 20px 0 20px;background: url(../img/presentation-tablier.jpg) no-repeat top center;}
#interest p {width: 440px; font-size: 18px; line-height: 24px;}

#features {overflow: hidden; padding-top:1em;}

.article a img {border: 8px solid #76bcf5;}
.article a:hover img {border-color: #8ad5fc;}
.publicite a:hover img,.article a:hover img {-moz-box-shadow: 0 0 8px rgba(0,0,0,0.4);-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.4);}
.article {position:relative;margin-bottom:0.8em;}
.price {position:absolute; bottom:8px;left:8px; background-color:#8ad5fc; color:#042d71; font-size:1.4em; margin:0; padding: 0.3em;}

#avis {padding-top:2em;overflow:hidden;}
#avis h3{color:#3a5998;margin-left:10px;font-size:2.2em;text-shadow:1px 1px 2px #DED5C4;}
.avis1 {
    background: url(../img/bulle-avis.gif) no-repeat 10px 0px;
}
.avis1 .quote {height:80px;text-align:center; padding: 25px 20px 0 20px;font-size:14px;}
.avis1 .client { font-size:1.8em;}
.avis1 .client span { font-size:1.3em; color:#76bcf5; line-height:110%;}

/* -- PRODUITS ---*/

#top  {padding: 18px 10px 0 10px;background: url(../img/content-top-product.jpg) no-repeat top left;overflow:hidden;}
#top-wrap {background: #79c0f7 url(../img/content-top-product-repeat.jpg) repeat-y top left;}

#breadcrumb {margin-bottom:20px;}
#breadcrumb, #breadcrumb a {color:white; font-weight:bold;font-family:verdana;}

#thumbnails, #visuel, #product {margin-bottom:10px;float:left;}


#thumbnails {width: 60px;}

#thumbnails img {
	cursor:pointer;
	border: 2px solid #FFF; margin-bottom: 8px;
}
#thumbnails img.current {
	-moz-box-shadow: 0 0 3px rgba(0,0,0,0.7);-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.7);
	cursor: auto !important;
	opacity: 0.5;
	filter:alpha(opacity=50);
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
#thumbnails img.hover {
	-moz-box-shadow: 0 0 3px rgba(0,0,0,0.7);-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.7);
}

#visuel {height:400px;width:300px;}
#visuel img {
    border: 4px solid #FFF;
	position:absolute;
    z-index: 0;
}
/*#visuel img.former {z-index: 1;}*/
#visuel img.current {z-index: 2;}

#product {width:540px;} /*380px description + {20px} + sidebar 140px*/
.product-left {width:380px;float:left;}
.product-right {width:140px;float:right;}
#description {font-family:Verdana;font-size:1.2em;}
#sidebar { color:white;}
#sidebar p {margin:0;}
#sidebar img {margin: 0.7em 0 1em 0;padding:0;}

#price-wrap {width:380px;text-align:center;color:#0b295c;font-family:Verdana;margin-bottom:2em;}
#price {
    background-color:#a1d3f9;
    line-height:30px;
    font-size:2em;
    -moz-border-radius:     12px;
    -webkit-border-radius:  12px;
}
#price-wrap p { margin:0.6em 0 0 0;}
#notabene {padding:1.4em 20px 1.4em 20px; background: url('../img/product-top-separator.gif') no-repeat top left;}
#sorry {
    font: bold 1.1em/1.1em Verdana, sans-serif; color:#FFF;
}
#sorry span {font-size:1.4em;line-height:1.2em;}
#output {margin-top:0.6em;}

/* PAGES */
#entete {margin-bottom:1.4em;}
#fulltext {font-size:1.2em;padding-left:20px;padding-right:20px;width:940px;}

/* MENU */

#navbar {overflow:hidden;padding-left:24px;background: url(../img/bg/navbar.jpg) no-repeat top center;}
ul.menu {
    margin: 0; padding: 0;
    list-style: none;
}
ul.menu li {
    display:inline; /* no pushdown in ie6 */
    margin:0; padding:0;
    font-family: Georgia;
    font-size: 17.2px;
    font-weight: bold;
}
ul.menu a {
    float:left;
    background:url(../img/sprites/navbar-tab-left.png) no-repeat left bottom;
    margin:0 4px 0 0; /* utiliser margin-right pour ecarter deux onglets */
    padding:0 0 0 10px; /* largeur de l'image*/
    height: 36px;
    text-decoration:none;
    cursor:pointer;
}
ul.menu a span {
    display:block;
    line-height: 1em;
    height: 20px;
    padding:12px 16px 4px 5px;
    background:url(../img/sprites/navbar-tab-right.png) no-repeat right bottom;
    color:#e1d7c2;text-shadow:0 0 2px rgba(0, 0, 0, 0.3);
    font-variant: small-caps;
}
ul.menu a:hover {background-position:left center;}
ul.menu a:hover span {background-position:right center;height: 24px;padding-top:8px;}

body#homepage ul.menu a.homepage, body#femme ul.menu a.femme, body#homme ul.menu a.homme, body#enfant ul.menu a.enfant {background-position:left top; cursor:default;}
body#homepage ul.menu a.homepage span, body#femme ul.menu a.femme span,body#homme ul.menu a.homme span, body#enfant ul.menu a.enfant span {background-position:right top; color:#FFF;height: 24px;padding-top:8px;}


/* -- LISTES -- */
ul, ol, dl {margin: 1em 0;}
ol, ul, dl {padding-left: 2em;}
ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0; }
dl dd {padding-left: 1em;}

/* -- FORMULAIRES -- */
input, textarea, select, button {border: 1px solid #cecec6; font-size: 12px; color: #A49F9B; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;padding:0 4px;}
input:focus, textarea:focus {border-color: #cecec6;}
input[type=submit], input[type=button],button {cursor:pointer;}
label {cursor:pointer}

form#formDispo {margin: 1em 0;}
#formDispo input[type=text] {float:left;width:170px;height:20px;line-height:20px;background:#fbfbfb url(../img/form-input-repeat.png) repeat-x top left;}
#formDispo input[type=submit] {float:left;width:200px;height:22px;font-size:10px;color:#FFF;background: #cecec6 url(../img/form-button-repeat-sprite.png) repeat-x top left;}
#formDispo input[type=submit]:hover {background-position: center left;}
#formDispo input[type=submit]:focus, #formDispo input[type=submit]:active {background-position: bottom left;}

form input.active {border-color: #A49F9B !important;}
form input.error {color:red !important;}
#add-cart{font-family:Verdana;font-size:1.4em;font-weight:bold;width: 140px;}
input.add-cart-button  {
    width:140px;
	padding:5px 10px;
	margin-bottom: 0.8em;
	border:none;
	background: #f29a31 url(../img/form-button-overlay-sprite.png) repeat-x top left;
    color:#FFF; text-align:center;
    white-space: nowrap;
	cursor: pointer;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 2px rgba(29,38,85,0.4); 
    -webkit-box-shadow: 0 1px 2px rgba(29,38,85,0.4);
    border-radius: 10px;
    -moz-border-radius: 10px;
	-webkit-border-radius:10px;
}
input.add-cart-button:hover {background-position: center left;}
input.add-cart-button:focus, input.submit:active {background-position: bottom left;}

#contact {
/*   margin: 0 auto;*/
}

/* -- TABLES -- */
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}
th{font-weight:bold;text-align:center;}
caption{text-align:center;margin-bottom: 0.5em;}

/* -- CITATIONS -- */
blockquote, q { font: italic normal normal 1.1em/1.5em Georgia, Times, "Times New Roman", serif;}
blockquote {margin: .75em 0 .75em 2em;}
cite {font-style: italic;}
/* -- CODE -- */
pre, code {margin-bottom: 1em;font-family: "Bitstream Vera Mono", "Lucida Console", "Courier New", monospace;}
pre {width: 90%;overflow: auto;overflow-y: hidden;margin: .75em 0;padding: 1em;background: #eee;color: #555;}

/* -- MISC -- */
noscript{font-size:2em;color:red;position:absolute;top:0;left:20%;right:20%;background-color:white;z-index:1000;}

#formDispo {position:relative;}
#ajaxIndicator {
    display:none;
    position:absolute;
    top:0px;
    left:386px;
    width:auto;
}
.clear {clear:both;}
.left {float:left;}
.right {float:right;}