/*---------------------------------------------------------- Style principal Projet: Sommaire: Reset css Balises par défaut Disposition Mise en page générale Eléments récurrents Les pages internes home.php category.html videos.html video.html product.html articles.html (actualités) formulaires sur contact.html & newsletter.html search.php mentions.html forget.html manageorder.html order-cart.php Classes générales ----------------------------------------------------------*/ /* ======================================================================== * Reset CSS * ========================================================================*/ @import "reset.css"; /* ======================================================================== * Balises par défaut * ========================================================================*/ html {} body {font-family: verdana, arial, sans-serif; font-size: 12px; color: #656565; background: url(../images/bgd_body.jpg) top center repeat-x;} h1 { } h2 { } h3 { color:#3B90E3; font-weight:bold; font-size: 14px;} h4 { } h5 { } h6 { } p { } img { } sup { } abbr, acronym { } blockquote, q { } blockquote { } cite { } ul { } ol { } dl { } form { } fieldset { } input { } label { } a {font-family: verdana, arial, sans-serif; font-size: 12px; color: #656565; text-decoration: none; outline: 0;} a:link { } a:visited { } a:hover {text-decoration: underline;} a:focus { } a img { } code, pre { } pre { } hr { } object {position:relative; z-index:10;} /* ======================================================================== * Disposition * ========================================================================*/ /* ----------------------------------------- * Mise en page générale * ------------------------------------------*/ #main {text-align: center; margin: 0 auto;} #wrap-header {background: url(../images/bgd_wrapHeader.jpg) bottom center no-repeat; min-width: 970px; height: 263px; } #wrap-header #wrap-img-header {margin:0 auto; width:1200px;position: relative;} #wrap-header #progress {position: absolute; top: 0;} #header {text-align: left; width:970px; margin: 0 auto; height: 263px; background: url(../images/bgd_header.jpg) top right no-repeat; position: relative; z-index: 15;} #header h1 {display:inline; padding: 0 38px 0 0;} #log {text-align: right; width: 520px; position:absolute; top: 8px; left: 380px;} #menu-login {float: right;} #menu-login p {font-weight: bold;} #menu-login p a {font-weight: bold;} #menu-logged {background: white; height: 22px; width: 250px; position: absolute; top:0; right:0; z-index: 1;} #bonjour {position: absolute; top:0; right:0; z-index: 10;} #langues {position: absolute; right:0; top: 8px;} #langues a {margin: 0 0 0 12px;} #nav {width:731px; float:left; margin: 115px 0 0 0; width: 740px; z-index:15;} #menu li {float:left; position: relative; z-index:15;} #menu a{background: url(../images/menu_integration.png) 0px 0px no-repeat; display: block; height: 34px; } #menu a span {position:absolute; text-indent: -9999em;} #menu a img {float:left;} #menu .menu-home a {background-position: 0px 0px; width: 84px;} #menu .menu-actu a {background-position: -84px 0px; width: 135px;} #menu .menu-groupe a {background-position: -219px 0px; width: 124px;} #menu .menu-produits a {background-position: -343px 0px; width: 113px;} #menu .menu-video a {background-position: -456px 0px; width: 102px;} #menu .menu-contact a {background-position: -558px 0px; width: 173px;} #menu .menu-home a:hover {background-position: 0px -34px; width: 84px;} #menu .menu-actu a:hover {background-position: -84px -34px; width: 135px;} #menu .menu-groupe a:hover {background-position: -219px -34px; width: 124px;} #menu .menu-produits a:hover {background-position: -343px -34px; width: 113px;} #menu .menu-video a:hover {background-position: -456px -34px; width: 102px;} #menu .menu-contact a:hover {background-position: -558px -34px; width: 173px;} #menu .menu-home a.btn-active {background-position: 0px -68px; width: 84px;} #menu .menu-actu a.btn-active {background-position: -84px -68px; width: 135px;} #menu .menu-groupe a.btn-active {background-position: -219px -68px; width: 124px;} #menu .menu-produits a.btn-active {background-position: -343px -68px; width: 113px;} #menu .menu-video a.btn-active {background-position: -456px -68px; width: 102px;} #menu .menu-contact a.btn-active {background-position: -558px -68px; width: 173px;} #menu .menu-home a.btn-active:hover {background-position: 0px -68px; width: 84px;} #menu .menu-actu a.btn-active:hover {background-position: -84px -68px; width: 135px;} #menu .menu-groupe a.btn-active:hover {background-position: -219px -68px; width: 124px;} #menu .menu-produits a.btn-active:hover {background-position: -343px -68px; width: 113px;} #menu .menu-video a.btn-active:hover {background-position: -456px -68px; width: 102px;} #menu .menu-contact a.btn-active:hover {background-position: -558px -68px; width: 173px;} #menu li ul {display:block; padding:0; position:absolute; left: -999em; width:150px; z-index:18;} #menu li:hover ul, #menu li.sfhover ul {left:auto;} #menu li ul li {display: block;} #menu li:hover ul ul, #menu li.sfhover ul ul { left: -999em;} #menu li:hover ul ul, #menu li.sfhover ul ul { left: -999em;} #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {left: auto; position: absolute; z-index: 18;} #nav #menu li ul li a {background: url(../images/bgd_menuLvl2.png) top left repeat-y; height: auto; color: white; padding: 8px 5px; text-transform: uppercase; font-size: 11px; width: 150px;} #nav #menu li ul li a:hover {background: url(../images/bgd_menuLvl2_h.png) top left repeat-y; text-decoration: none;} #menu li ul li ul {margin-left:150px; margin-top:-29px; position:absolute; width:320px;} #nav #menu li ul li ul li a, #nav #menu li ul li ul li {width: 200px;} #nav #menu li ul li ul li a {background: #DFDFDF; color: #004C98;} #nav #menu li ul li ul li a:hover {background: white;} #menu-search {float:right; margin: 124px 0 0 0; width: 230px;} #menu-search .inputsearch {background: white; height: 15px; width: 181px; border: 1px solid #a4a4a4; float: left; font-family: verdana, arial, sans-serif; font-size: 11px; color: #003265;} #menu-search .ok {padding: 0 0 0 5px; float: right;} #container {background: url(../images/bgd_main.jpg) top center no-repeat; margin: 5px 0 10px 0; overflow: hidden; min-width: 970px;} #content-bottom {background: url(../images/bgd_mainBottom.png) bottom center no-repeat; padding: 20px 0 8px 0; min-height: 600px; height: auto !important; height:600px; min-width: 970px; } #content-repeat {background: url(../images/bgd_main-Repeat.png) top center repeat-y; overflow:hidden !important; overflow: none; min-width: 970px; min-height: 600px; height: auto !important; height: 600px;} #content {width: 970px; margin: 0 auto; text-align: left; min-height:600px; } #cont {min-height: 300px; height: auto !important; height: 300px; float: left; width: 675px; padding: 0 0 0 4px; margin: 0 0 0 0;} #breadcrumb {background: #dddddd url(../images/bgd_breadcrumb.png) top right repeat-y; float:left; width: 100%;} #breadcrumb ul {list-style: none; padding: 0 0 0 10px;} #breadcrumb ul li {float:left; padding: 10px 0;} #breadcrumb ul li a {font-weight: bold; color: #717171;} #breadcrumb ul li a:hover {text-decoration: none; color: #0051A3;} .titre-page {background: url(../images/bgd_titreH2.png) center left no-repeat; padding: 10px 0 5px 40px; clear: both;} #aside {float: right; padding: 10px 10px 0 0; width: 266px;} #menu-basket {background: url(../images/bgd_panier.png) top left no-repeat;} #menu-basket .total {padding: 8px; background: url(../images/bgd_encartPanier.png) bottom center no-repeat; font-weight:bold; color: white;} #menu-basket .total span {color: #8FB800; float:right;} #menu-basket p a{ display: block; width: 246px; text-align: right; line-height: 28px; font-weight: bold; padding: 0 20px 0 0; text-decoration: none; color:#8fb800} #newsletter {background: url(../images/bgd_newsletter.png) top center no-repeat; margin: 9px 0 0 0; } .newsletter {overflow: hidden; padding: 30px 10px 15px 10px; width: 246px;} .adresse-email {float: left; width:145px; height: 20px; border: 1px solid #86aa00; color: #8fb800; font-weight: bold; padding: 0 0 0 3px;} .btn-valider {float:right;} #infos { margin: 5px 0 0 0;} .video {position: relative; height:197px; background: url(../images/bgd_boxInfos.png) top center no-repeat;} .video h3 {color: #3b90e3; font-weight: bold; padding: 8px 15px;} .video .video-center {text-align: center;} .video .video-center a {display: inline-block; position:relative;} .video .video-center a .btn-video {background: #858d94; position: absolute; bottom:0; right:0; padding:2px;color: white; font-weight: bold; font-size: 13px;} .video .video-center a:hover{text-decoration: none;} .video .video-center img {border: 1px solid #a0a0a0; } #wrap-footer {background: url(../images/bgd_footer.gif) top center repeat-x; min-width: 970px;} #footer {width:970px; margin: 0 auto; padding: 3px 0 0 0; overflow: hidden; text-align: center;} #footer p, #footer p a {font-size: 11px;} #footer ul {overflow: hidden; padding: 15px 0;} #footer ul li{display: inline; color: #004e99; font-size: 11px;} #footer ul li a {color: #004e99; font-size: 11px;} #footer address {text-align: left; display: inline-block; clear:both; color: #004e99;width: 280px; padding: 0 0 10px 0;} #footer address img{float:left; margin: 0 8px 0 0;} /* ----------------------------------------- * Eléments récurrents * ------------------------------------------*/ #content .voir-tout {text-align: right; position: absolute; bottom: 12px; right: 12px; padding: 0;} .page-content {padding: 10px; float:left; width: 665px; overflow:hidden;} .lien-retour {background: url(../images/puce_retour.gif) center left no-repeat; margin: 5px 0 0 0;} .lien-retour a {font-weight: bold; color: #8ab104; padding: 0 0 0 15px;} .titre-produits {font-weight: bold; font-size: 18px; color: #0054a7; background: url(../images/puce_titreProduit.png) center left no-repeat; padding: 8px 0 8px 40px;} a.button {display: inline-block; background: url(../images/btn_buttonLeft.png) center left no-repeat; padding: 0 0 0 8px;} a.button:hover {background: url(../images/btn_buttonLeft_h.png) center left no-repeat;} a.button span {display: inline-block; background: url(../images/btn_buttonRight.png) center right no-repeat; padding: 4px 8px 4px 0;} a.button:hover span {background: url(../images/btn_buttonRight_h.png) center right no-repeat; } #cont a.button span img {cursor: pointer; margin: 0;} #cont a {color: #004E99;} #cont a:hover {color: #4A4B45;} #cont .retour{padding: 10px 25px 0 0; text-align: right} #cont p {padding: 8px 15px 5px 0; text-align: justify;} #cont .center {text-align: center;} #cont .page-content img {margin: 8px;} #cont .page-content .retour img, #cont .page-content .voir-tout img {margin: 0;} address {padding: 15px;} address strong {color: #0054A7} .denied ul li {padding: 0 0 0 15px; font-weight: bold; color: red;} /* ----------------------------------------- * Les pages internes * ------------------------------------------*/ /* home.php */ .bottom-home {background: #d9ecff; padding: 0 0 10px 0; min-height: 288px; height: auto !important; height: 288px; float:left; margin: 20px 1px 0 2px; width: 967px; display:inline;} .box {width: 265px; float: left; background: url(../images/bgd_boxBottom.png) center bottom no-repeat; min-height: 268px; height: auto !important; height:268px; margin: 10px 3px 0 15px; position:relative; display: inline overflow: hidden;} .box h2 {background: url(../images/bgd_encartBottomLeft.png) top left no-repeat; padding: 0 0 0 5px; display: block;} .box h2 span {background: url(../images/bgd_encartBottomRight.png) top right no-repeat; padding: 0; display:inline-block; text-align: center; width: 100%} .box h3 {color: #3b90e3; font-weight: bold; padding: 8px 15px;} .box .marquee .ref {padding: 0 15px 6px 15px;} .box .img{text-align: center;} .box .img img{ border: 1px solid #a0a0a0;} .bottom-home .actu {width: 370px; background: url(../images/bgd_boxActu.png) center bottom no-repeat; padding:0 0 30px; min-height: 238px; height: auto !important; height:238px;} .corps-actu {float:left; background: #eaeaea; width: 168px; min-height: 148px; height: auto !important; height: 148px; margin: 12px 0 10px 10px; padding: 5px 0; display:inline;} .corps-actu p{padding: 0 12px;} .corps-actu .title-actu {font-weight: bold; color: #3b90e3;margin:0 0 3px 0;} .corps-actu .date-actu {font-size: 11px; margin:0 0 5px 0;} .presentation {background: url(../images/illus_presentation.jpg) bottom center no-repeat; width: 653px; height: 338px; position: relative; display: inline-block; margin: 10px 0 0 10px;} .presentation .contenu-presentation {background: none; height: 220px !important; position: absolute; bottom: 22px; right: 5px; margin:0; padding: 0 12px; width: 240px;} .presentation .contenu-presentation .en-avant{font-weight: bold; color: #004d99; margin: 15px 0 8px 0;} /* category.html */ .cat-column { width: 210px; float:left; padding: 0 0 45px 0; display: inline; margin: 10px 10px 10px 0; background: url(../images/bgd_BoxCat.png) bottom center no-repeat; position: relative;} .cat-column .titre-cat{background: url(../images/bgd_headBoxCat.png) top center no-repeat; text-align: center; font-size: 14px; color: white; padding: 8px 0 8px 0; line-height: 15px;} .cat-column .illus {text-align: center; padding: 5px 0;} .cat-column .illus img, .wrap-products .illus img {border: 1px solid #a0a0a0;} #cont .descri-cat {padding: 0;} #cont .cat-column .nombre-prods {padding: 0 8px; font-weight: bold; color: #3b90e3;} #cont .list-products {background: white url(../images/bgd_topProduits.jpg) top left repeat-x; width: 653px; padding: 0 0 0 0; overflow: hidden; width: 653px;} #cont .list-products .links {text-align: center; padding: 8px; float:left; width: 637px; position: relative;} #cont .list-products .links a {color: #8ab104; font-weight: bold; padding: 5px 5px; margin: 0 3px; background: #cad6a2; display: inline-block;} #cont .list-products .links a:hover {text-decoration:none; background: none;} #cont .list-products .links span {color: white; font-weight: bold; padding: 5px 5px; margin: 0 3px; background: #8ab104; display: inline-block;} #cont .list-products .links a.last-page {display:none;} #cont .list-products .links a.first-page {display:none;} #cont .list-products .links a.previous-page {background: url(../images/puce_previousPage.gif) center left no-repeat; position:absolute; top: 10px; left:0; display: inline-block; width: 100px; height: 20px; padding: 0;} #cont .list-products .links a.previous-page:hover {background: url(../images/puce_previousPage.gif) center left no-repeat;} #cont .list-products .links .previous-page span{position:absolute;text-indent: -999em; background: none;} #cont .list-products .links a.next-page {background: url(../images/puce_nextPage.gif) center right no-repeat; position:absolute; top: 10px; right:0; display: inline-block; width: 100px; height: 20px; padding: 0;} #cont .list-products .links a.next-page:hover {background: url(../images/puce_nextPage.gif) center right no-repeat;} #cont .list-products .links .next-page span{position:absolute;text-indent: -999em; background: none;} #cont .wrap-products {width: 210px; display: inline; float: left; position:relative; margin: 8px 2px 10px 5px; padding:0 0 30px 0;background: url(../images/bgd_wrapProducts.png) bottom center no-repeat;} #cont .wrap-products p {margin:0 ; padding: 0;} #cont .wrap-products .titre-produit {font-weight: bold; font-size: 13px; padding: 10px 8px 35px 8px; line-height: 12px; background: url(../images/bgd_wrapProductsTop.png) top center no-repeat;} #cont .wrap-products .illus {text-align: center; padding: 0 0 8px;} #cont .bottom-list-products {background: url(../images/bgd_bottomProduits.jpg) bottom left repeat-x; padding: 15px 0 0 0; clear: left; min-height: 45px; height: auto !important; height:45px; position: relative; overflow:hidden;} #cont .bottom-list-products .links{top: 5px;} #cont .wrap-products p.pricepromo {padding: 0 5px 8px 5px;} #cont .wrap-products p.pricepromo .old {color: #48A4FF;} #cont .wrap-products p.pricepromo .new {color: #0057AD; font-weight: bold; font-size: 14px;} /* videos.html */ .wrap-products-video {width: 210px; display: inline; float: left; position:relative; margin: 8px 2px 10px 5px; background: url(../images/bgd_wrapVideosTop.png) top center no-repeat; } .wrap-products-video .titre-video {font-weight: bold; padding: 5px 15px; color:#3b90e3;} .wrap-products-video-bottom {background: url(../images/bgd_wrapVideosBottom.png) bottom center no-repeat; width: 210px; height: 15px;} /* video.html*/ /* product.html */ .column-images {float:left; width: 266px; display: inline;} .column-images .img-principale {display: block; text-align: center;} .column-images .miniatures {display: inline-block; width: 80px; height: 60px; border: 2px solid #c1c1c1; float: left; margin: 8px 3px 0 0;} .column-images .miniatures img {width: 80px; height:60px} .wrap-product {float: left; width: 364px; display: inline; background: white url(../images/bgd_ficheProduct.png) top left no-repeat; min-height: 384px; height: auto !important; height: 384px; position: relative; padding: 10px 0 15px 18px;} .wrap-product p {margin: 5px 0 8px 0;} .wrap-product strong {color: #3b90e3} .documents {display: inline-block;} #cont .documents p{padding: 0; margin: 0; float:right} #cont .documents p a span {padding: 0 8px 0 0;} .bottom-fiche-product {background: url(../images/bgd_bottomFicheProduct.png) bottom left no-repeat; height: 10px; position: absolute; left:0; bottom: 0; width:100%;} #cont .demande-infos {margin: 10px 0; text-align: right; clear: both;} #cont .demande-infos a img {margin: 0;} #cont .wrap-product p.price-promo {padding: 0 5px 8px 5px;} #cont .wrap-product p.price-promo .old {color: #48A4FF;} #cont .wrap-product p.price-promo .new {color: #0057AD; font-weight: bold; font-size: 14px;} #cont #wrapPrincipal img{margin: 0;} .cross-selling {clear: both;} /* articles.html (actualités) */ .column-actu {padding: 15px; width: 280px; float: left; display: inline; border: 1px solid #C2E1FE; margin: 10px 4px 3px 8px; position: relative; background: white;} .column-actu h3 {color:#3B90E3; font-weight:bold; font-size: 14px; padding: 0 0 5px 0;} #cont .column-actu .descri-actu{text-align: justify; padding: 15px 0 50px 0;} #cont .add-basket {margin: 10px 0;} /* formulaires sur contact.html & newsletter.html */ #cont .infos {font-style: italic;} .formatform { width: 450px; margin: 8px auto;} #cont .formatform p {overflow:hidden; width: 450px; padding: 3px 0;} #cont .formatform h3 {margin: 12px 0 0 0;} .formatform .lbleft {float: left;} .formatform input{ float: right; width: 232px;} .formatform select { float: right; width: 236px;} .formatform input.ok {width: auto;} .formatform input#copie {float:left; width: auto; margin: 0 0 0 25px;} .formatform .radio li {overflow: hidden;} .formatform .radio input {float: right; width: auto; margin: 5px;} .formatform .radio label {float: right;margin: 5px 0;} .formatform label strong {color: #0054A7} #cont .conformement { font-size:11px; font-style: italic; padding: 5px 0 12px 0;} /*search.php*/ .search-form {overflow:hidden; width: 100%;} .search-form label {float: left; padding: 2px 0 0 0;} .search-form .ok {float: left; padding: 0 0 0 10px;} #cont .wrap-products p.descripromo {padding: 0 8px;} /*mentions.html*/ .blocmentions {width: 280px; float:left; display: inline; border: 1px solid #49A3FB; padding: 15px; margin: 0 0 0 12px; background: #E3E3E3;} /* forget.html */ .formatform .forget-mail input {float:left;} .formatform .forget-mail label {padding: 8px 0 0 0;} .formatform .forget-mail input {margin: 5px 0 0 0;} .formatform .forget-mail input.ok {margin: 3px 0 0 10px;} /* manageorder.html */ .order thead tr th{background: #BEBEBE; font-weight: bold; color: white; padding: 5px 2px;} .order tbody .bordered{ border-top: 1px solid white; background: #E3E3E3; padding: 5px 2px;} #cont .order p{text-align: left;} .order tbody .bordered table {border-top: 1px solid #004487; font-size: 10px;} .order tbody .bordered table tr td {border-bottom: 1px solid #004487; padding: 3px; color: #004487;} /* panier */ #cont .order-cart h2{background: url(../images/h2_panier.png) top left no-repeat; padding: 6px 0 0 50px;} #cont .order-cart h2 img{margin: 0;} #cont .order-cart .suividAchat{background: url(../images/bgd_btnPanier.jpg) top left repeat-x; height: 55px; padding: 15px 0 0 0; margin: 0 ; text-align: center;} #cont .order-cart .suividAchat img{margin: 8px 2px;} #cont .order-cart .formatform{margin:1px 0 0 0; width:653px;} #cont .order th{background: url(../images/bgd_thPanier.png) top right no-repeat; padding: 5px 2px 4px 2px; border:none;} #cont .order tbody td{background:#ddd url(../images/bgd_borderOrder.png) top right repeat-y; padding: 4px 2px; border-bottom: 1px solid #8fb800;} #cont .order tbody td img{margin:0;} #cont .order tbody .colored td{background:white url(../images/bgd_borderOrder.png) top right repeat-y; padding: 4px 2px; border-bottom: 1px solid #8fb800;} #cont .order tbody td.last{background:#ddd; padding: 4px 2px;} #cont .order tbody .colored td.last{background:white; padding: 4px 2px;} #cont .order tbody td.center{text-align: center;} #cont .order tbody td .product-quantity {display:block; width: 58px; margin: 0 auto;} #cont .order tbody td .btn-minus {float:left; margin:0; cursor:pointer; width: 16px; height: 18px; background: url(../images/bgd_numMinus.png) top right no-repeat; color:white;} #cont .order tbody td .btn-plus {float:left; margin:0; cursor:pointer; width: 16px; height: 18px; background: url(../images/bgd_numPlus.png) top left no-repeat; color:white;} #cont .order tbody td .quantity {float:left; display:inline-block; width: 25px; border: none; text-align: center; border-top: 1px solid #8f877a; border-bottom: 1px solid #8f877a;} #cont .order tfoot .btn-cart {background:url(../images/bgd_btnPanier.jpg) top left repeat-x;} #cont .order tfoot .btn-cart td{padding: 8px 0;} #cont .order tfoot td{padding: 4px;} #cont .order tfoot .btn-cart input{float:none;} #cont .order-cart .caddie .form-cart {margin:5px auto; width:450px;} #cont .order-cart .caddie .form-cart p.center {margin: 12px 0 0 0} #cont .order-cart .caddie .form-cart p.center input{float:none;} .caddie {width:653px;} .caddie .address {width: 300px; display: inline; padding: 10px; border: 1px solid #AFD100;margin: 8px 0;} .caddie .invoice {float:left;} .caddie .delivery {float:right;} .denied {margin: 8px auto; width: 450px;} /* ======================================================================== * Classes générales * ========================================================================*/ .clear { clear:both; line-height:0; height:0; } .nodisplay { display:none; } .center { text-align:center; } .right { text-align:right !important; } .flright { float:right; } .flleft { float:left; } /* ===================================== * imports *=======================================*/ @import url(css/milkbox/milkbox.css);