/* Feuille de style pour le contenu des pages
 * C'est cette feuille de style qui doit être liée aux pages du site
 * La feuille de style de la charte est appelée depuis cette feuille.
 */

/* STYLE CYC  (ne pas supprimer) */
.cyc {position: absolute; top: -10000px;}

/*  ----------------------------------------------------------------------------
    Basic
----------------------------------------------------------------------------- */
body, input, textarea, th, td{font: normal 11px/14px Arial, Verdana, Geneva, Helvetica, sans-serif; color: #FFF;}

h1{ font-size: 14px; line-height: 20px; font-weight: bold; }
h1 img{ float: left; }
h1#page-title{ clear: both; margin: 0 0 15px 0; border: 4px solid #BEBCAF; background-color: #CECCBD; display: block; padding: 5px 10px; color: #4F4F49; }
h1#page-title a:link, h1#page-title a:visited{ color: #4F4F49; }
h2{ font-size: 13px; line-height: 20px; font-weight: bold; padding: 5px 10px; border: 1px solid #8F8F83; margin: 6px 0 0 0; }
h3{ font-size: 13px; line-height: 18px; font-weight: bold; text-transform: uppercase; padding: 0 0 10px 0; }
small, .small{font-size: 10px; font-weight: bold; }
a:link, a:visited{color: #FFF; text-decoration: underline; font-weight: bold; }
a:hover, a:active{color: #FFF; text-decoration: none; }
.highlight{color: #FFFFFF; font-weight: bold;}
.star{font-family: Verdana, Arial, Helvetica, sans-serif;}

.text1{ background: #B0AE9F; }
.retour-btn{ background: url(../images/charte/retour-btn-bg.jpg) no-repeat left top; width: 75px; height: 24px; display: block; }
a.retour-btn:hover{ background-position: left bottom; }
.nous-contacter-btn{ background: url(../images/charte/nous-contacter-btn-bg.jpg) no-repeat left top; width: 123px; height: 24px; display: block; }
a.nous-contacter-btn:hover{ background-position: left bottom; }
.ajouter-btn{ background: url(../images/charte/ajouter-btn-bg.jpg) no-repeat left top; width: 138px; height: 24px; display: block; }
a.ajouter-btn:hover{ background-position: left bottom; }

.fadeMessage {position: absolute; background: #FFFFFF; border: 1px solid #4E4F49; padding: 10px; left: 0; top: 0; text-align: center; }
.fadeMessage p {margin: 0; text-align: center; color: #000; text-align: center; font-weight: bold;}
#loading{display: none; position: absolute; left: 0px; top: 0; }

#page-content h2{ margin-bottom: 10px; }
/*  ----------------------------------------------------------------------------
    Separators
----------------------------------------------------------------------------- */
.separator{overflow: hidden; display: block; line-height: 0; font-size: 0;}
.hr1{background: #CECCBD; margin: 10px 0; height: 1px;}
/*  ----------------------------------------------------------------------------
    Boxes, pannels
----------------------------------------------------------------------------- */
.pannel1{ border: 1px solid #CCC; background: #6D6D65; float: left; padding: 10px; }
/*  ----------------------------------------------------------------------------
    Thumbnails
----------------------------------------------------------------------------- */
.thumb{display: block; float: left; border: 1px solid #FFFFFF; }
.thumb img{ float: left; display: inline; }
a.thumb:hover{background: #FFFFFF;}

/*  ----------------------------------------------------------------------------
    Sidebar
----------------------------------------------------------------------------- */
#sidebar-login label{ width: 75px; padding: 0 5px 0 0; }
#sidebar-login input{ width: 90px; }
#sidebar-login .submit-button{ float: right; }
#sidebar-login .submit-button input{ height: 20px; line-height: 18px; width: 100px; }
#sidebar-login .user{ background: url(../images/charte/user.jpg) no-repeat left top; padding: 0 0 0 22px; }
.sidebar-panier{ background: url(../images/charte/bag.jpg) no-repeat left top; padding: 0 0 0 22px; line-height: 16px; }
#sidebar-logout{ background: url(../images/charte/logout.jpg) no-repeat left top; padding: 0 0 0 22px; }
.sidebar-money{ background: url(../images/charte/money.jpg) no-repeat left 5px; padding: 5px 0 0 22px; line-height: 16px; margin: 5px 0 0 0; border-top: 1px solid #8B8B81; }
/*  ----------------------------------------------------------------------------
    Content
----------------------------------------------------------------------------- */
#contenuTexte h1{}
#contenuTexte h2{ padding: 5px 10px; border: 1px solid #8F8F83; background: #CECCBD; color: #4F4F49; }
/*  ----------------------------------------------------------------------------
    FCK Styles
----------------------------------------------------------------------------- */
.separateur{width:100%; overflow: hidden; display: block; line-height: 0; font-size: 0; clear:both; height: 1px; background: #CECCBD; margin: 10px 0;}
.soustitre{padding: 5px 10px; border: 1px solid #8F8F83; background: #CECCBD; color: #4F4F49; display: block; font-weight: bold; margin: 10px 0;}
/*  ----------------------------------------------------------------------------
    PageContent
----------------------------------------------------------------------------- */
.page-content p{ text-align: justify; }

/*  ----------------------------------------------------------------------------
    Pagination
----------------------------------------------------------------------------- */

.pagination{float:left; width: 100%; padding: 10px 0; text-align: center; font-size: 11px;}
.pagination a, .pagination span{border: 1px solid #8F8F83; margin-right: 2px; padding: 2px 6px; text-decoration: none;}
.pagination .active{background: #FFFFFF; color: #4F4F49; border-color: #8F8F83;}
.pagination .disabled{background: #222222; color: #FFFFFF; border-color: #454545;}
.pagination a:link, .pagination a:visited, .pagination span{background: #B0AE9F; color: #4F4F49; font-weight: bold;}
.pagination a:hover{background: #FFFFFF; color: #000000; border-color: #8F8F83;}

/*  ----------------------------------------------------------------------------
    Listings
----------------------------------------------------------------------------- */
ul.listing1{ float: left; width: 604px; overflow: hidden; margin: 6px 0 0 0; }
ul.listing1 li{ float: left; width: 285px; height: 104px; padding: 6px; margin: 0 6px 6px 0; border: 1px solid #8F8F83; background: #BEBCAF; }
ul.listing1 li.last{ margin-bottom: 0; margin-right: 0; }
*:first-child+html ul.listing1{
    padding-bottom: 6px;
}

ul.listing2{ float: left; width: 604px; overflow: hidden; margin: 6px 0 0 0; }
ul.listing2 li{ float: left; width: 590px; height: 104px; padding: 6px; margin: 0 0 6px 0; border: 1px solid #8F8F83; background: #BEBCAF; }
ul.listing2 li.last{ margin-bottom: 0; margin-right: 0; }
*:first-child+html ul.listing2{
    padding-bottom: 6px;
}

ul.listing3{ float: left; width: 604px; overflow: hidden; margin: 6px 0 0 0; }
ul.listing3 li{ float: left; width: 102px; height: 122px; padding: 0px; margin: 0 21px 21px 0; }
ul.listing3 li.last{ margin-bottom: 0; margin-right: 0; }
*:first-child+html ul.listing3{
    padding-bottom: 6px;
}

.listing-products1 a:link, .listing-products1 a:visited{ color: #313131; text-decoration: none; }
.listing-products1 a:hover, .listing-products1 a:active{ color: #4F4F49; text-decoration: none; }
.listing-products1 .photo{ float: left; width: 102px; height: 102px; background: #BEBCAF; border: 1px solid #8B8B81; margin-right: 6px; }
    .listing-products1 .photo .thumb{ width: 100px; height: 100px; }
    .listing-products1 .photo img{ float: left; display: inline; }
.listing-products1 .text{ float: left; width: 175px; }
    .listing-products1 .description{ float: left; width: 175px; height: 90px; }
        .listing-products1 .title{ font-size: 12px; text-transform: uppercase; /*background-color: #CECCBD;*/ display: block; padding: 2px 2px; border-bottom: 1px solid #8B8B81; margin: 0 0 4px 0; text-decoration: none; }
        .listing-products1 .title:hover{ border-color: #212121; }
    .listing-products1 .details-btn{ float: right; text-align: right; font-weight: bold; }
    .listing-products1 p{ padding: 0 2px; color: #4F4F49; }


.listing-products2 a:link, .listing-products2 a:visited{ color: #313131; text-decoration: none; }
.listing-products2 a:hover, .listing-products2 a:active{ color: #4F4F49; text-decoration: none; }
.listing-products2 .photo{ float: left; width: 102px; height: 102px; background: #BEBCAF; border: 1px solid #8B8B81; margin-right: 6px; }
    .listing-products2 .photo .thumb{ width: 100px; height: 100px; }
    .listing-products2 .photo img{ float: left; display: inline; }
.listing-products2 .text{ float: left; width: 480px; }
    .listing-products2 .title{ font-size: 11px; font-weight: bold; text-transform: uppercase; background-color: #CECCBD; display: block; padding: 2px 6px; border: 1px solid #8F8F83; margin: 0 0 4px 0; text-decoration: none; }
    .listing-products2 .description{ float: left; width: 470px; height: 65px; padding: 0 5px; }
        .listing-products2 .title:hover{ background-color: #FFF; text-decoration: none; color: #4F4E49; }
    .listing-products2 .details-btn{ float: right; text-align: right; font-weight: bold; }
    .listing-products2 p{ padding: 0 2px; color: #4F4F49; }

.listing-gallery1 .photo{ border: 1px solid #8F8F83; background: #B0AE9F; float: left; }
.listing-gallery1 .thumb{ float: left; width: 100px; height: 100px; }




/*  ----------------------------------------------------------------------------
    Details
----------------------------------------------------------------------------- */
#details{ float: left; width: 604px; }
    #details #images{ float: right; width: 214px; padding: 0 0 0 15px; }
        #details #large-image{ float: left; width: 212px; height: 212px; background: #CECCBD; border: 1px solid #8B8B81; overflow: hidden; }
        #details #large-image .thumb{ float: left; width: 210px; height: 210px;}
        #details #small-images{ padding: 6px 0 0 0; }
        #details #small-images .photo{ float: left; margin: 0 6px 6px 0; background: #CECCBD; border: 1px solid #8B8B81; }
        #details #small-images .photo-last{ margin-right: 0; }
        #details .thumb{ width: 100px; height: 100px; }
    #details #description{ float: left; width: 375px; text-align: justify; }
        #details #description .title{ font-size: 13px; line-height: 14px; font-weight: bold; border: 1px solid #9E9E94; padding: 5px 10px; background: #CECCBD; color: #404040; margin: 0 0 10px 0; }
        #details #description .ref{ font-size: 11px; background: #EBEDE9; padding: 5px 10px; border: 1px solid #E5E7E3; }
        #details #description .desc{ padding: 8px 0 0 0; }
        #details #description .colors-sizes{ }
        #details #description .price{ font-size: 12px; font-weight: bold; background: #CECCBD; color: #404040; padding: 5px 10px; ; margin: 0 0 10px 0; }

/*  ----------------------------------------------------------------------------
    Registration > creer_compte
    Mon compte - Coordonnees > client_coordonnees
----------------------------------------------------------------------------- */
#compte{ float: left; width: 592px; padding: 5px; display: inline; border: 1px solid #CCC; background: #6D6D65; margin-top: 10px; }
#compte .col1{ float: left; width: 291px; margin-right: 10px; }
#compte .col2{ float: left; width: 291px; }
#compte .field{ margin: 1px 0; width: auto; }
#compte .field label{ width: 185px; padding: 0 10px 0 5px; }
#compte .field input{ width: 172px; border-color: #666666; }
#compte .field textarea{ width: 175px; height: 70px; border-color: #666666; }
#compte .buttons{ padding: 0 0 8px 0; }
#compte .buttons input{ width: 120px; border-color: #666666; }
#compte input{ width: 130px; }

/*  ----------------------------------------------------------------------------

----------------------------------------------------------------------------- */
#divAdrese{ float: left; width: 592px; padding: 5px; display: inline; border: 1px solid #CCC; background: #6D6D65; margin-top: 10px; }
#divAdrese .col1{ float: left; width: 291px; margin-right: 10px; }
#divAdrese .col2{ float: left; width: 291px; }
#divAdrese .field{ margin: 1px 0; width: auto; }
#divAdrese .field label{ width: 185px; padding: 0 10px 0 5px; }
#divAdrese .field input{ width: 172px; border-color: #666666; }
#divAdrese .field textarea{ width: 175px; height: 70px; border-color: #666666; }
#divAdrese .buttons{ padding: 0 0 8px 0; }
#divAdrese .buttons input{ width: 120px; border-color: #666666; }
#divAdrese input{ width: 130px; }

/*  ----------------------------------------------------------------------------
    Contact
----------------------------------------------------------------------------- */
#divContact{width: 604px; }
#frmContact{width: 604px;}
#frmContact .col1{float: left; width: 292px; padding: 0 20px 0 0;}
#frmContact .col2{float: left; width: 292px;}
#frmContact label{float: left; width: 110px;}
#frmContact .field input{float: left; width: 162px;}
#frmContact .field textarea{float: left; width: 165px;}
#frmContact .buttons{padding: 10px; text-align: center;}
#frmContact .buttons input{ float: none; width: 140px; }