/*  -------------------------------------------------------------
    * Filename:         style.css
    * Version:          1.0
-------------------------------------------------------------- */

/*  -------------------------------------------------------------
    0. Typography
-------------------------------------------------------------- */
body, input, textarea, th, td{
    font: normal 12px/18px Arial, Verdana, Geneva, Helvetica, sans-serif;
}

a:link, a:visited   { color: #c2d26f; text-decoration: none; }
a:hover, a:active   { color: #ede2cf; text-decoration: underline; }

h1                  { font-size: 16px; line-height: 23px; font-family: Tahoma, Arial, sans-serif; }
h2                  { font-size: 14px; line-height: 18px; }
h3                  { font-size: 13px; line-height: 17px; font-weight: bold; }
h4                  { font-size: 12px; line-height: 16px; }
h5                  {}
h6                  {}
p                   {}
small               { font-size: 11px; }
pre                 {}
blockquote          {}

/*  -------------------------------------------------------------
    1. Main layout
-------------------------------------------------------------- */
body                        { background: #221611; color: #CCBEA4; }
#container                  { width: 996px; background: url(images/container-bg.jpg) repeat-y left top; }
    #header                 { height: 262px; background: #221611; }
    #content                { width: 996px; }
        #left-outer         { width: 264px; padding: 0 0 0 1px; background: #4F3D38 url(images/left-right-outer-bg.gif) repeat-x left top; }
            #left-inner     { width: 264px; background: #33231D url(images/left-right-inner-bg.gif) repeat-x left top; font-size: 11px; }
        #middle-outer         { width: 436px; padding: 17px 15px; text-align: justify; }
            #middle-inner     {}
        #right-outer        { width: 264px; padding: 0 1px 0 0; background: #4F3D38 url(images/left-right-outer-bg.gif) repeat-x left top; }
            #right-inner    { width: 264px; background: #33231D url(images/left-right-inner-bg.gif) repeat-x left top; font-size: 11px; }
#wrap-footer                { }
    #footer                 { width: 996px; background: #2D1E18; color: #b49f79; border-top: 1px solid #221611; font-size: 11px; }
        #footer-inner       { width: 964px; padding: 11px 16px; }
            #footer-left    { width: 209px; }
            #footer-right   { width: 755px; }

/*  -------------------------------------------------------------
    2. Header elements
-------------------------------------------------------------- */


/*  -------------------------------------------------------------
    3. Content elements
-------------------------------------------------------------- */
#middle-inner p             { margin-bottom: 12px; }
#middle-inner h1            { background: url(images/h1-bg.jpg) no-repeat center bottom; padding: 0 0 10px 0; margin: 0 0 10px 0; text-align: left; color: #cbb48a; }
#middle-inner h2            { background: #462F27 url(images/h2-bg.jpg) no-repeat 8px 5px; padding: 6px 5px 6px 35px; margin: 0 0 10px 0; }
#middle-inner h3            { background: #34231C; border: 1px solid #493936; padding: 3px 8px; margin: 0 0 10px 0; }
#middle-inner h4            { background: #462F27 url(images/h2-bg.jpg) no-repeat 8px 4px; padding: 6px 5px 6px 35px; margin: 0 0 10px 0; }

.mail-icon                  { background: url(images/mail-icon.jpg) no-repeat 0 5px; padding: 0 0 0 15px; }
.zoom-icon                  { background: url(images/zoom-icon.jpg) no-repeat 0 3px; padding: 0 0 0 17px; }
.b1-icon                    { background: url(images/b1-icon.jpg) no-repeat 0 4px; padding: 0 0 0 12px; }
.b2-icon                    { background: url(images/b2-icon.gif) no-repeat 0 center; padding: 0 0 0 18px; }
.check-icon                 { background: url(images/check-icon.gif) no-repeat 0 4px; padding: 5px 0 5px 30px; }
.clock-icon                 { background: url(images/clock-icon.gif) no-repeat 0 3px; padding: 5px 0 5px 32px; }
.money-icon                 { background: url(images/money-icon.gif) no-repeat 0 center; padding: 5px 0 5px 32px; }
.tag-icon                   { background: url(images/tag-icon.gif) no-repeat 0 center; padding: 5px 0 5px 40px; min-height: 24px; height: auto !important; height: 24px; }
.alert-icon                 { background: url(images/alert-icon.gif) no-repeat 3px 2px; padding: 5px 0 5px 40px; }

.color1                     { color: #9aa946; }
.color2                     { color: #c4947c; }
.color3                     { color: #a08d6d; }
.highlight                  { color: #fef4e5; }
.star                       { font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif; }
.mandatory                  { font-weight: bold; }

/*  Messages
-------------------------------------------------------------- */
.message-info, .message-success, .message-alert{
    clear: both; display: block; padding: 12px 10px 12px 45px; border-width: 1px; border-style: solid; margin: 0 0 20px 0; font-weight: bold;
}
.message-info       { background: #34231C url(images/message-info.gif) no-repeat 10px center; border-color: #493936; color: #CCBEA4; }
.message-success    { background: #52BC1F url(../images/charte/success-bg.gif) no-repeat 10px center; border-color: #7C9E5B; color: #FFFFFF; }
.message-alert      { background: #FFBF00 url(../images/charte/alert-bg.gif) no-repeat 10px center; border-color: #b13c3c; color: #FFFFFF; }

/*  Breadcrumbs
-------------------------------------------------------------- */
.breadcrumb             { background: #34231C; font-size: 11px; padding: 3px 8px; border: 1px solid #493936; }

/*  Buttons
-------------------------------------------------------------- */
.conditions-vente-btn{ background: url(images/conditions-vente-btn-bg.jpg) no-repeat left top; display: block; width: 234px; height: 59px; margin: 0 15px; }
.conditions-vente-btn:hover{ background-position: left bottom; }
.recommander-btn{ background: url(images/recommander-btn-bg.jpg) no-repeat left top; display: block; width: 234px; height: 59px; margin: 0 15px; }
.recommander-btn:hover{ background-position: left bottom; }
.connecter-btn, .connecter-btn-over{ background: url(images/connecter-btn-bg.jpg) no-repeat left top; width: 82px; height: 21px; }
.connecter-btn-over{ background-position: left bottom; }
.retablir-btn, retablir-btn-over{ background: url(images/retablir-btn-bg.jpg) no-repeat left top; width: 82px; height: 21px; }
.retablir-btn-over{ background-position: left bottom; }

/*  Lists
-------------------------------------------------------------- */
.list1{ float: left; }
.list1 li{ padding: 0 0 0 12px; background: url(images/b2-icon.jpg) no-repeat 0 7px; }

/*  Panels
-------------------------------------------------------------- */
.panel1{ background: url(images/panel1-bg.jpg) no-repeat left top; float: left; width: 259px; height: 71px; padding: 11px; }

/*  Separators
-------------------------------------------------------------- */
.hr1, .hr2{ clear: both; overflow: hidden; display: block; line-height: 0; font-size: 0; width: 100%; }
.hr1{ background: url(images/hr1-bg.gif) repeat-x left top; margin: 9px 0; height: 1px; }
.hr2{ background: url(images/hr2-bg.gif) repeat-x left top; margin: 9px 0; height: 1px; }

/*  Titles
-------------------------------------------------------------- */
#page-title{ width: 720px; height: 30px; line-height: 30px; text-indent: 20px; margin: 0 0 10px 0; background: #1E3853; }

/*  Thumbnails
-------------------------------------------------------------- */
.thumb{ display: inline-block; padding: 2px; border: 1px solid #FFFFFF; background: #1E3853; }
a.thumb:hover{ border-color: #FFFFFF; background: #FFFFFF; }

/*  -------------------------------------------------------------
    4. Content components
-------------------------------------------------------------- */
/*  Flash
-------------------------------------------------------------- */
#flash-menu{ /* background: url(images/flash-menu-bg.jpg) no-repeat left top; */ width: 264px; height: 185px; }

/*  MDM
-------------------------------------------------------------- */
#aside-mdm{ background: url(images/aside-mdm-bg.jpg) no-repeat left top; width: 249px; height: 192px; padding: 36px 0 0 15px; }
#aside-mdm-inner { border: 1px solid #493936; padding: 1px; width: 230px; height: 168px; }
#aside-mdm .photo{ width: 113px; height: 73px; display: block; border: 1px solid #DCCCB3; background-position: center center; background-repeat: no-repeat; margin: 0 0 5px 27px; float: left; display: inline; }
#aside-mdm .photo:hover{ border-color: #FFFFFF; }
#aside-mdm .details{ float: right; margin: 3px 0 0 0; }

/*  Horaires
-------------------------------------------------------------- */
#aside-horaires{ background: url(images/aside-horaires-bg.jpg) no-repeat left top; width: 250px; min-height: 139px; height: auto !important; height: 139px; padding: 21px 0 0 14px; font-size: 12px; line-height: 14px; }

/*  Info
-------------------------------------------------------------- */
#aside-info{ background: url(images/contact-info-bg.jpg) no-repeat left top; width: 996px; height: 43px; border-top: 1px solid #221611; margin: 0 auto; }
    #aside-info p{ padding: 14px 0 0 351px; font-size: 11px; text-align: left; }

/*  Panier
-------------------------------------------------------------- */
#aside-panier{ width: 233px; height: 96px; background: url(images/aside-panier-bg.jpg) no-repeat left top; padding: 55px 0 0 31px; }
#aside-panier .link-panier{ padding: 11px 0 0 117px;}

/*  Newsletter
-------------------------------------------------------------- */
#aside-newsletter{ background: url(images/aside-newsletter-bg.jpg) no-repeat left top; width: 249px; height: 74px; padding: 130px 0 0 15px; }
#mandatory-email-Email{ width: 183px; border-right: 0; float: left; }
.ok-btn, .ok-btn-over{ background: url(images/ok-btn-bg.jpg) no-repeat left top; width: 38px; height: 20px; float: left; }
.ok-btn-over{ background-position: left bottom; }

/*  Recherche
-------------------------------------------------------------- */
#aside-recherche{ background: url(images/aside-recherche-bg.jpg) repeat-y left top; padding: 12px 15px; }
#filter-word{ width: 183px; border-right: 0; float: left; }

/*  Compte
-------------------------------------------------------------- */
#aside-compte{ width: 249px; height: 222px; padding: 63px 0 0 15px; background: url(images/aside-compte-bg.gif) no-repeat left top; }
#aside-compte label{ clear: both; padding: 0 0 6px 0; }
#aside-compte a:link, #aside-compte a:visited{ color: #a08d6d; }
#aside-compte a:hover, #aside-compte a:active{ color: #EFE2D2; }
#frmLoginRight{ }
#login_right_user, #login_right_pass{ clear: both; width: 220px; margin: 0 0 11px 0; }

.aside-compte-logged{ background: url(images/aside-compte-logged-bg.gif) no-repeat left top !important; }

/*  -------------------------------------------------------------
    5. Footer elements
-------------------------------------------------------------- */
#footer a:link, #footer a:visited{ color: #b49f79; }
#footer .copyright{ clear: both; text-align: right; }
#footer .client{ color: #EDE2CF; }
#footer .client a:link, #footer .client a:visited{ color: #EDE2CF; text-decoration: none; }
#footer .client a:hover, #footer .client a:active{ color: #FFFFFF; text-decoration: underline; }
#footer .mentions{ color: #669900; }
#footer .mentions a:link, #footer .mentions a:visited{ color: #EDE2CF; text-decoration: none; }
#footer .mentions a:hover, #footer .mentions a:active{ color: #FFFFFF; text-decoration: underline; }
#footer .ref{}
/*  -------------------------------------------------------------
    6. Menus
-------------------------------------------------------------- */
#menu2 ul{ float: right; }
#menu2 li{ float: left; display: inline; }
#menu2 a:link, #menu2 a:visited{}
#menu2 a:hover, #menu2 a:active{ color: #EDE2CF; text-decoration: none; }
#menu2 a.active{ color: #EDE2CF; }

/*  -------------------------------------------------------------
    7. Pages
-------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------
    Product Listing
----------------------------------------------------------------------------- */
.products               { margin: 0 auto; overflow: hidden; clear: both; width: 436px; }
.product                { position: relative; float: left; width: 206px; height: 201px; padding: 2px; margin: 0 15px 15px 0; background: url(../../images/listing/product-bg.jpg) no-repeat left top;  }
.product-last           { margin-right: 0 !important; }

.product p              { }
.product a:link, .product a:visited { color: #00BFC2; }
.product a:hover, .product a:active { color: #395409; }

.product a.title        { display: block; height: 38px; color: #ccbea4 !important; font: bold 12px/38px Arial, Helvetica, sans-serif; padding: 2px 5px; text-align: center; }
.product a.title:hover  { background-color: #372721; text-decoration: none; }

.product .photo         { width: 206px; height: 108px; float: left; background-repeat: no-repeat; background-position: center center; }

.product .price         { float: left; width: 97px; padding: 0 0 0 6px; font-size: 14px; color: #c8ad7f; }

.product .details-btn   { background: url(../../images/listing/details-btn-bg.gif) no-repeat left top; width: 103px; height: 26px; text-indent: -9999px; position: absolute; right: 2px; bottom: 2px; }
.product .details-btn:hover{ background-position: left bottom; }

* html .product .details-btn { bottom: 1px; }

.search{ float: left; padding: 5px 0 15px 0; }

/*  ----------------------------------------------------------------------------
    Product Details
----------------------------------------------------------------------------- */
#product                {}
#product .images        { float: right; width: 210px; padding: 0 0 10px 16px; }
#product .aside         { clear: right; float: right; width: 210px; padding: 0 0 10px 16px; }
#product .aside label.wide{ background: #533E37; margin: 10px 0 0 0; padding: 0 5px; width: 200px; font-weight: bold; }
#product .photo         { width: 174px; height: 168px; display: block; background-repeat: no-repeat; background-position: center center; }
#product .price         { color: #FFFFFF; font-size: 13px; }
#divDisponibilite       { background: #37261E; padding: 3px 6px; border: 1px solid #493936; margin: 0 0 10px 0; }
#actionButtons          { padding: 10px 0 0 0; }
.ajouter-btn            { background: url(../../images/details/ajouter-btn-bg.jpg) no-repeat left top; width: 108px; height: 20px; }
.ajouter-btn:hover      { background-position: left bottom; }
.retour2-btn            { background: url(../../images/charte/retour-btn-bg.jpg) no-repeat left top; display: inline-block; width: 72px; height: 24px; text-indent: -9999px; }
.retour2-btn:hover      { background-position: left bottom; }
.ami-btn                { background: url(../../images/details/ami-btn-bg.jpg) no-repeat left top; display: inline-block; width: 181px; height: 24px; text-indent: -9999px; }
.ami-btn:hover          { background-position: left bottom; }
.contact-btn            { background: url(../../images/details/contact-btn-bg.jpg) no-repeat left top; display: inline-block; width: 111px; height: 24px; text-indent: -9999px; margin-right: 10px; }
.contact-btn:hover      { background-position: left bottom; }

/*  Pagination
----------------------------------------------------------------------------- */
.pagination{float:left; width: 100%; padding: 10px 0; text-align: center; font-size: 11px;}
.pagination a, .pagination span{border: 1px solid #382720; margin-right: 2px; padding: 2px 6px; text-decoration: none;}
.pagination .active{background: #382720; color: #E3DBC8; border-color: #281B15;}
.pagination .disabled{background: #231610; color: #372721; border-color: #281B15;}
.pagination a:link, .pagination a:visited, .pagination span{background: #281B15; color: #E3DBC8;}
.pagination a:hover{background: #FFFFFF; color: #000000; border-color: #FFFFFF;}

/*  ----------------------------------------------------------------------------
    Popups
----------------------------------------------------------------------------- */
/*  Popups > Un ami
----------------------------------------------------------------------------- */
body#ami-popup                  { padding: 10px; }
body#ami-popup #popup-header    { width: 445px; height: 120px; background: url(../../images/charte/popup-header-bg.jpg) no-repeat left top; }
#frmRecommander                 { width: 445px; float: left; }
#frmRecommander label           { width: 220px; padding-right: 10px; }
#frmRecommander .inputText      { width: 201px; }