<?
header("Content-Type: text/css");
header("Cache-Control: max-age=604800, public"); 
include("../../conf/website.conf");
?>

/* RESET */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, address, em, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; font-size:100%; }
*{ font-family:Arial, Helvetica, sans-serif}
a{ text-decoration:none }
ul, li{ list-style-type:none; margin:0; padding:0 }

/* FONTS */
@font-face {
    font-family: '21mai';
    src: url('/images/polices/21mai-webfont.eot');
    src: url('/images/polices/21mai-webfont.eot?#iefix') format('embedded-opentype'),
         url('/images/polices/21mai-webfont.woff') format('woff'),
         url('/images/polices/21mai-webfont.ttf') format('truetype'),
         url('/images/polices/21mai-webfont.svg#21mairegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'museo500';
    src: url('/images/polices/Museo500-RegularWeb.eot');
    src: url('/images/polices/Museo500-RegularWeb.eot?#iefix') format('embedded-opentype'),
         url('/images/polices/Museo500-RegularWeb.woff') format('woff'),
         url('/images/polices/museo500-regular-webfont.ttf') format('truetype'),
         url('/images/polices/museo500-regular-webfont.svg#museo500') format('svg');
    font-weight: normal;
    font-style: normal;
}

.mai{ font-family:21mai}
.museo{ font-family:museo500}


/* COLORS */
.bleu { color:#0198AB; }
.rose { color:#E462A2; }
.rouge { color:#E74C4E; }
.orange { color:#FF8A38; }
.vert{ color:#B4C02C;}
.blanc{ color:#FFFFFF; }
.black { color:#000000; }
.darkgrey { color:#333333; }
.lightgrey { color:#CCCCCC; }
.red { color:#FF3333; }

/* BACKGROUND COLORS */
.bgbleu { background-color:#0198AB; }
.bgrose { background-color:#E462A2; }
.bgrouge { background-color:#E74C4E; }
.bgvert{ background-color:#B4C02C;}
.bgorange { background-color:#FF8A38; }
.bgblanc{ background-color:#FFFFFF; }
.bgblack { background-color:#000000; }
.bgdarkgrey { background-color:#333333; }
.bggrey { background-color:#9DADAF; }
.bglightgrey { background-color:#CCCCCC; }
.bgred { background-color:#FF3333; }

/* FONT SIZES */
.base { font-size:16px; }
.xxsmall { font-size:10.048px; }
.xsmall { font-size:11px; }
.small { font-size:12px; }
.medium { font-size:14px; }
.large { font-size:18px; }
.xlarge { font-size:20px; }
.xxlarge { font-size:24px; }
.xxxlarge { font-size:32px; }

/* FONT WEIGHT */
.bold { font-weight:bold; }
.italic {font-style:italic;font-weight:normal;}
.uppercase { text-transform:uppercase; }
.normal { font-weight:normal; }

/* AUTRES PROPRIETES */
.center { margin:0 auto; }
.text-center { text-align:center; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.block { display:block; }
.inline-block { display:inline-block; }
.none { display:none; }
.hidden { visibility:hidden; }
.right { float:right; }
.left { float:left; }
.noborder { border:none; }
.nocursor { cursor:default; }
.relative { position:relative; }
.clear { clear:both; }

/* BOUTON */
.bouton{border-radius:5px; border:0; color:#FFFFFF; font-size:14px; padding:6px 20px; text-align:center;}

/* MESSAGE ERREUR */
.msg_error{ font-size:12px; font-weight:bold; color:#FF0000;}

/* BALISES GENERALES */
html{ background-color:#efefef; background-image:url("/images/background-generique.jpg"); background-position:center top; background-repeat:no-repeat}
body{ margin:0 auto; border:0 auto; background-color:#FFFFFF; height:auto; width:1000px; max-width:1000px; min-width:1000px; z-index:1; }
#page{ padding:0 10px; min-height:350px;}

/* PORTAIL LOGIN */
#portail{height:530px;}
#portail .enseignes{ width:1000px;}
#portail .enseignes .centrer{ position:relative; float:right; right:50%; height:160px; margin-top:20px;}
#portail .enseignes .centrer .centreragain{ position:relative; right:-50%;}
#portail .enseignes .logoAVDJ{ display:block; float:left; padding-right:20px; border-right:1px solid #CCCCCC;}
#portail .enseignes .logoEntreprise{ display:block; float:left; margin:22px 0 0 20px;}
#portail .intro{ font-size:24px; text-align:center; width:1000px; margin:20px 0;}
#portail p span{ font-size:16px;}
#portail form{ width:600px; margin:0 0 0 199px; padding:50px 0; background:linear-gradient(to bottom, #ffffff, #f0f0f0) repeat scroll 0 0 rgba(0, 0, 0, 0); border:1px solid #cccccc; border-radius:5px; box-shadow:0 0 8px #999; text-align:center}
#portail form label{ margin-right:5px;}

/* HEADER */
.bandeauhaut{position:absolute; z-index:5; left:0; right:0; top:0; height:30px; background-color:#58acdc}
.accroche{ height:30px; left:0; line-height:30px; padding-left:10px; position:relative; right:0; vertical-align:middle; z-index:10;}

#header{width:1000px; height:200px; position:relative}
#header .logo{margin:10px 0 10px 20px;width:160px;height:160px;}
#header p{margin:10px; padding:10px;border:1px solid #999; width:400px;color:#0198ab; font-size:18px;}
#header .comite{ position:absolute;right:20px; top:60px; width: 730px;}
#header .comite span{ display:block; font-size:16px; text-align:center; }
#header .comite img{ display:block; margin-left: 30px; }

/* HEADER - MOTEUR DE RECHERCHE */
#header .search{ position:absolute; z-index:50; background-color:#f3f3f3; width:400px; height:70px; left:250px; top:85px; border:1px solid #f3f3f3;  border-radius: 9px; }
#header .search .form_searchbox{ margin:10px 0 0 13px; }
#header .search .input_searchbox{ display:block; float:left; width:287px; border:1px solid #999; height:34px; border-radius: 9px; margin:0; padding:0; margin-right:10px; font-size:14px; color:#666; padding-left:40px; background:#fff url(/images/design_elements/loupe-IE.png) no-repeat 0 0; line-height:32px; }
#header .search .button_searchbox{ display:block; padding-top:3px; }
#header .search .text_suggest{font-size:10px; color:#999; display:block; float:left; margin:4px 0 0 15px;}

/* HEADER - AUTOSUGGEST MOTEUR DE RECHERCHE */
#divautosuggest{ position:absolute; width:284px; left:297px; top:131px; z-index:50; padding:5px; border:1px solid #999; border-top:1px dashed #e4e3e3; border-radius:0px 0px 9px 9px; border-radius:0px 0px 9px 9px; visibility:hidden; background-color:#FFF; }
#divautosuggest ul{ list-style: none; overflow: hidden; text-align:inherit; }
#divautosuggest ul li{ color:#666666; font-size:14px; padding:0; padding-left:5px; margin:1px; text-align:left; display:block; }
#divautosuggest ul li a{ color: #666666; font-size:14px; text-decoration:none; background-color:transparent; display:block; padding:2px; }
#divautosuggest ul li a strong,#divautosuggest ul li a.selected strong{ color: #666666; font-size:14px; }
#divautosuggest ul li a.selected{ background-color:#f3f3f3; display:block; font-size:14px; margin-right:5px; width:364px; }
#divautosuggest span{ color:#999999; text-align:right; font-size:10px; padding:2px; display:block; }
#divautosuggest ul li.catSuggest a{ color:#123A9F; font-size:14px; }


/* HEADER - ESPACE CLIENT ET PANIER CLIENT */
#EspaceClientPanier{ margin:20px 10px 0 0; float:right;}
#EspaceClientPanier .EspaceClient{ display:block; float:left; font-size:14px; color:#000; font-weight:normal; margin:0; text-align:right; width:500px;  }
#EspaceClientPanier .EspaceClient img{ display:block; float:right; margin:0 10px; }
#EspaceClientPanier .EspaceClient .EspaceClientPanierTitle2{ display:block; min-width:88px; text-align:right; float:right; font-size:14px; color:#000; font-weight:normal; margin:0; }
#EspaceClientPanier .EspaceClient .EspaceClientPanierSubTitle{ display:block; float:right; font-size:12px; color:#000; font-weight:normal; font-style:italic; }
#EspaceClientPanier .EspaceClient .EspaceClientPanierSubTitle:hover,#EspaceClientPanier .Panier .PanierSubTitle:hover{ text-decoration:underline; }
#EspaceClientPanier .Panier{ display:block; float:left; width:160px; }
#EspaceClientPanier .Panier img{ display:block; float:left; margin-right:10px; }
#EspaceClientPanier .Panier a{ display:block; float:left; font-size:14px; color:#000; font-weight:normal; }
#EspaceClientPanier .Panier .PanierSubTitle{ font-size:12px; color:#000; font-weight:normal; font-style:italic; }

/* MENU */
#menu{list-style-type:none; height:30px; width:980px; padding:0; margin:0 0 30px 10px;}
#menu li{float:left; width:195px; border-right:1px solid #ffffff; text-align:center; height:30px; line-height:30px;}
#menu li a{font-size:16px; color:white; display:block; width:195px; height:30px;}
#menu li.lastchild{ border:none;}

/* ACCUEIL */
#accueil{ padding:40px; text-align:center}

/* LISTING - CUBE PRODUIT */
#listing { width:790px; float:left; }
.main-cube{ width:180px;margin-left:7px;padding:10px 10px 10px 0;background:url(/images/design_elements/separateur_horiz_grey_white.gif) bottom repeat-x; height:270px;}
.main-cube.prix{height:290px;}

.cube-listing{width:170px;padding:10px 14px;background:url(/images/design_elements/separateur_vert_grey_white.gif) repeat-y;}
.cube-listing .designation{margin-top:10px; height:55px;}
.cube-listing .prix{margin-bottom:10px; height:20px;}

/* LISTING - FILTRES */
#filtres{ width:190px; background-color:#FFFFFF; margin-left:10px; }
#filtres .title{ width:100%; padding:8px 0; margin:10px 0 15px; }
#filtres .arrow-open, #filtres .arrow-closed { display:block; width:8px; height:4px; position:absolute; right:10px; top:50%; margin-top:-2px; }
#filtres .arrow-open { background:url(/images/design_elements/arrow-up.png) no-repeat; }
#filtres .arrow-closed { background:url(/images/design_elements/arrow-down.png) no-repeat; }
#filtres .titlen1 { position:relative; padding:3px 0 7px 7px; margin:10px 0; border-top:1px solid #0198AB; border-bottom:1px solid #cccccc; }
#filtres .titlen2 { position:relative; padding-left:7px; line-height:22px; }
#filtres .titlen2b { position:relative; padding:3px 25px 7px 7px; margin:4px 0; border-bottom:1px solid #cccccc; }
#filtres .blocn2b { margin:-4px 0 17px; }
#filtres .blocn3b { border-bottom:1px solid #cccccc; padding:5px 0; }
#filtres select { width:180px; margin:7px 5px; border:1px solid #cccccc; }
#filtres .erase { margin-bottom:10px; padding:0 25px 8px 7px; border-bottom:1px solid #ccc; position:relative; }
#filtres .erase img { position:absolute; right:10px; margin-top:-9px; top:50%; }
#filtres .eraseall { padding:8px 0; }

/* LISTING - PAGINATION */
#pagination{margin:10px; float:left;}
#pagination .tri{ width:759px; background-color:#9DADAF; padding:7px 10px; font-size:14px; color:#FFFFFF; overflow:hidden; }
#pagination .numbers{ background:url(/images/design_elements/separateur_horiz_grey_white.gif) bottom repeat-x; padding:10px 0 15px 10px; width:769px; height:21px; }
#pagination .pages { float:right; }
#pagination .tri select{font-size:12px; color:#666666; border:1px solid #9DADAF}
#pagination .tri select,#pagination .tri span{ display:block; float:left; margin-right:5px;}
#pagination .tri .afficher{ margin-left:350px;}
#pagination .selected, #pagination .unselected { color:#FFFFFF; display:inline-block; zoom:1; *display:inline; margin-left:3px; width:25px; height:25px; text-align:center; line-height:25px; }
#pagination .selected { background-color:#9dadaf; }
#pagination .unselected { background-color:#cccccc; }

/* FICHE PRODUIT */

/* Bloc visuel produit */
#blocvisuel{ float:left; width:570px; margin:0 0 20px 20px; }
#blocvisuel .flag_picture{ background-color:#0395aa; display:block; position:absolute; text-align:center; padding:2px 10px 1px; font-weight:bold; color:#FFFFFF; font-size:15px; text-transform:uppercase; top:0; left:0 }
#blocvisuel .loupe{ display:block; position:absolute; right:0; bottom:0}
#blocvisuel .first_picture{ width:400px; height:400px; display:block; }
#blocvisuel .pictures{ width:70px; float:left; text-align:center; margin:0 50px 0 20px }
#blocvisuel .big_picture{ float:left; margin:0 0 20px 80px; }
#blocvisuel .pictures .fleche{ margin:5px 0 }
#blocvisuel .pictures .small_pictures{ border:solid 1px #cccccc }
#blocvisuel .footer_pictures{ border-top:solid 1px #c6c6c6; width:570px; clear:both }
#blocvisuel .references{ margin:8px 0 0 20px; float:left }
#blocvisuel .references h3{ font-weight:normal }
#blocvisuel .references a{ color:#7f8c8d; text-decoration:underline }
/* Bloc texte produit */
#bloctexte{ width:350px; float:left; margin:0 0 30px 29px }
#bloctexte .libelle{ color:#000000; font-size:22px; font-weight:lighter; margin-bottom:5px }
#bloctexte .descriptif_produit{ clear:both; font-size:12px; border-bottom:solid 1px #c6c6c6; border-top:solid 1px #c6c6c6; margin-top:15px; padding:30px 0; }
#bloctexte .desc_truncate a{ text-decoration:underline;}
#bloctexte .price_bloc{ width:350px; margin-top:25px }
#bloctexte .price_bloc .price{ text-align: center; font-weight: bold; font-size: 30px; margin-bottom: 25px;}


/* BOUTON produit */
.btfiche{ font-size:22px;}
/* Carrousel de la fiche produit */
.carrousel_produit { position:relative; z-index:1; overflow:hidden; width : 70px; height:390px; }
.carrousel_produit .before,
.carrousel_produit .after { position:absolute; z-index:3; left:0; right:0; height:25px; background-color:#fff; text-align:center; }
.carrousel_produit .before { top:0; background:#FFF url(<?=$Cf_CDN?>/images/design_elements/flechehaut_vignettes.png) top center no-repeat; cursor:pointer }
.carrousel_produit .after { bottom:0; background:#FFF url(<?=$Cf_CDN?>/images/design_elements/flechebas_vignettes.png) bottom center no-repeat; cursor:pointer }
.carrousel_produit .before_fin { top:0; background:#FFF none !important; cursor:default; }
.carrousel_produit .after_fin { bottom:0; background:#FFF none !important; cursor:default; }
.carrousel_produit .groupe_precedent { position:absolute; left : 0px; top:-390px; bottom:390px; }
.carrousel_produit .groupe_courant { position:absolute; left : 0px; top:25px; bottom:25px; }
.carrousel_produit .groupe_suivant { position:absolute; left : 0px; top:390px; bottom:-390px; }
/* Informations détaillées produit */
#infos { clear:both; margin:0 15px }
#infos .titleOnglet{ background-color:#9dadaf; color:#FFFFFF; font-size:18px; font-weight:bold; padding:5px 0 5px 10px; margin-top:10px }
#infos .a_descriptif{ border:1px solid #cccccc; font-size:12px; color:#666666; padding:15px; margin-top:10px  }

/* MODAL - FANCYBOX D'AJOUT AU PANIER */
.fancybox-inner{ background-color:#FFFFFF}
#modal .header{ padding:20px; background:url(/images/design_elements/separateur_horiz_grey_white.gif) bottom repeat-x; height:20px;}
#modal span .closeModal{ width:24px; height:24px; background:url('/images/design_elements/bt_fermer2.png') center center no-repeat;}
#modal .modalProduit{ padding:10px 20px; text-align:center;}
#modal .modalLinks{ padding:20px; background:url(/images/design_elements/separateur_horiz_grey_white.gif) top repeat-x}
#modal .modalLinks button{ width:220px; cursor:pointer; border:0;}

/* PANIER */
#panier{ width:980px;}
.titlePanier{ margin-bottom:15px}
/* PANIER - HEADER */
#panier thead{background-color:#9DADAF; height:30px; color:#FFFFFF; font-size:12px; text-align:center;}
#panier thead tr td.firstColumn{ width:730px}
#panier thead tr td.secondColumn{ width:150px}
#panier thead tr td.thirdColumn{ width:100px}
#panier thead tr td.thirdColumn a{ color:#FFFFFF; text-decoration:underline}
#panier thead tr td{border-right:1px solid #FFFFFF}
/* PANIER - LIGNE */
#panier tbody .ligne td{ padding:10px 0; border-bottom:1px solid #9DADAF}
#panier tbody .ligne .designation img{ width:80px; height:80px; padding:10px; margin-left:20px; border:1px solid #CCC}
#panier tbody .ligne .designation span{ padding: 37px 50px 0; margin-left:102px;}
#panier tbody .ligne .price { text-align: right;}
#panier tbody .ligne .price span{ padding-right: 15px;}
#panier tbody .ligne .selectChildren{text-align:center; vertical-align:middle;}
#panier tbody .ligne .selectChildren select{ font-size:14px; margin-top:10px; width:140px;}
#panier tbody .ligne .Supprimer a{ background:url(/images/design_elements/corbeille.png) center no-repeat; width:18px; height:21px; margin:0 41px;}
/* PANIER - BOUTON VALIDATION */
.btpanier{ width:200px; float:right; margin:20px 20px 60px 0;}
/* PANIER - COMMANDE TERMINEE */
.termine{ margin-bottom:30px;}

.alert{border: 2px solid red; margin: 5px; padding: 5px; text-align: center;}

/* FOOTER */
#footer{ clear:both; margin-top:30px;}
#footer .limite-footer{ background-color:#46a1ac; height:28px; }
#footer .credits{ background-color:#58c9d7; padding:20px 0; color:#065d67; text-align:center; font-size:11px;}
#footer .credits a{ color:#065d67;}
#best-brands{ height:130px;}
#best-brands .titre{font-size:18px; text-align:center; margin-bottom:20px;}
#best-brands img{display:block; float:left; margin-left:30px;}