/* ---------------------------------------------------------------------------- * Filename: style.css * Description: Default theme * Version: 1.0 (2010-10-14) ------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- 1. Layouts ----------------------------------------------------------------------------- */ /* home (B1) ----------------------------------------------------------------------------- */ .home { background: #FFFFFF; } .home #wrap-container { margin-top: 0px; } .home #container { width: 996px; } .home #header { width: 996px; height: 363px; } .home #header-inner { } .home #content { width: 996px; } .home #content-inner { } .home #sidebar { width: 300px; } .home #sidebar-inner { } .home #main { width: 996px;} .home #main-inner { } .home #wrap-footer { margin-bottom: 0px; padding-bottom: 0px; background: transparent /* url(../images/layout/wrap-footer-bg.jpg) no-repeat center top */; } .home #footer { width: 996px; } .home #footer-inner { padding-bottom:14px;} a:link, a:visited { color: #CC0000; } a:hover, a:active { color: #000000; } /* ---------------------------------------------------------------------------- 2. Header elements ----------------------------------------------------------------------------- */ .flash-header{ position:absolute; z-index:1; height:363px; width:996px; } #newsletter{ width:295px; height:22px; position:relative; z-index:99; top:129px; left:692px; } #newsletter-inner { padding:0;} #newsletter .newsletter-text { font-size:11px; line-height:15px; color:#494949; width:94px; float:left; padding-right:5px;} #news-form { padding-top:0px; float:left; width:295px;} #mandatory-email-Email { width:238px; height:18px; float:left; background:#ffffff; border:none; font-size:11px; padding:4px 12px 0 11px; margin-right:2px; display:inline; color:#6b6b6c;} .ok-btn {width:31px; height:22px; float:left; background:url(../images/layout/ok-btn.jpg) no-repeat left top; border:none; cursor:pointer; display:inline;} .ok-btn-over {width:31px; height:22px; float:left; background:url(../images/layout/ok-btn-over.jpg) no-repeat left top; border:none; cursor:pointer;} /* ---------------------------------------------------------------------------- 3. Content elements ----------------------------------------------------------------------------- */ #main h1 { margin: 0; } #nav { clear: both; background: #DDDDDD; } #nav-inner { padding: 5px; } #info {float:left; width:346px; height:110px; background:url(../images/layout/bg-coordonnees.jpg) no-repeat left top; color:#162b5a; } #info-inner { padding:32px 11px 0 11px;} .info-adress { width:160px; float:left;} .info-mail { background:url(../images/layout/mail-icon.jpg) no-repeat left 6px; padding:0px 27px 0 20px; float:left;} .info-plan { background:url(../images/layout/info-plan.jpg) no-repeat left 4px; padding-left: 17px; float:left;} #horaires {float:left; width:336px; height:110px; background:url(../images/layout/bg-horaires.jpg) no-repeat left top; color:#162b5a;} #horaires-inner {padding:31px 11px 0 16px;} .content-box1 {width:316px; height:282px; float:left; background:url(../images/layout/bg-box.jpg) no-repeat left top; padding: 7px 10px;} .content-box2 {width:316px; height:282px; float:left; background:url(../images/layout/bg-box2.jpg) no-repeat left top; margin:0px 10px; padding:7px 10px;} .spot {width:304px; height:296px; float:left; } .little-box1 {float:left; width:336px; height:104px;} .little-box2 {float:left; width:336px; height:104px; margin:0px 10px;} #assitance {float:left; width:150px; height:104px; background:url(../images/layout/bg-assistance.jpg) no-repeat left top;} #assitance-inner { padding:30px 10px 0 10px;} .assitance-title { font-weight:bold; color:#FE1E1E; float:right; width:80px; text-align:right; line-height:16px;} .logo-mentions { width:996px; float:left; background: #ffffff url(../images/layout/logo.jpg) no-repeat right 20px;} .logo-center { width:996px; float:left; background: #ffffff url(../images/layout/logo.jpg) no-repeat center 70px; padding:0 0 100px 0;} .logo-center-small { width:280px; float:left; background: #ffffff url(../images/layout/logo2.jpg) no-repeat center top; padding:0 0 150px 0;} /* ---------------------------------------------------------------------------- 4. Footer elements ----------------------------------------------------------------------------- */ #footer .box3 { float: right; text-align: right; width:303px; background:url(../images/layout/bg-menu.jpg) no-repeat left top; height:110px; padding: 0 11px 0 0;} #copyright { text-align:right; width:191px; float:right;} #copyright .site-name { font-weight: bold; } #made-by { float:left; padding-left:21px; width:87px; padding-top:11px;} #made-by-logo { display: inline-block; } #made-by a:link, #made-by a:visited { } #made-by a:hover, #made-by a:active { } #legal { } #legal a:link, #legal a:visited { color:#385991; text-decoration:underline;} #legal a:hover, #legal a:active { color:#17294F; text-decoration:none;} .menu { padding: 15px 0px 6px 0; float: right; width:300px; text-align:right; } .menu ul {float:right; width:275px; } .menu li { display: inline; } .menu li a:link, .menu li a:visited { color:#17294F; text-decoration:none;} .menu li a:hover, .menu li a:active, .menu li.active a { color:#385991; text-decoration:underline;} /* ---------------------------------------------------------------------------- 5. Generic elements ----------------------------------------------------------------------------- */ /* -------------| Padding top |------------- */ .pt1 {padding-top:1px;}.pt2 {padding-top:2px;} .pt3 {padding-top:3px;}.pt4 {padding-top:4px;} .pt5 {padding-top:5px;}.pt6 {padding-top:6px;} .pt7 {padding-top:7px;}.pt8 {padding-top:8px;} .pt9 {padding-top:9px;}.pt10 {padding-top:10px;} .pt11 {padding-top:11px;}.pt12 {padding-top:12px;} .pt13 {padding-top:13px;}.pt14 {padding-top:14px;} .pt15 {padding-top:15px;}.pt16 {padding-top:16px;} .pt17 {padding-top:17px;}.pt18 {padding-top:18px;} .pt40 {padding-top:40px;} /* -------------| Padding left |------------- */ .pl15 {padding-left:28px;} /* Breadcrumbs ----------------------------------------------------------------------------- */ .breadcrumbs { background: #DDDDDD; padding: 10px; margin: 0 0 10px 0; font-weight: bold; } /* Lists ----------------------------------------------------------------------------- */ .list { float: left; width:996px;} .list li.normal { padding: 2px 0 2px 20px; background: url(../images/bullets/bullet.jpg) no-repeat 0px 8px; border-bottom:1px solid #dbdbdb;} .list li.over { padding: 2px 0 2px 20px; background: url(../images/bullets/bullet.jpg) no-repeat 5px 8px; border-bottom:1px solid #7CAFFF;} .list2 { float: left; padding-left:14px; line-height:16px;} .list2 li { padding: 0 0 0 16px; background: url(../images/bullets/bullet.png) no-repeat 0px 4px; } /* Loaders ----------------------------------------------------------------------------- */ .loading-full { cursor: wait; background: #FFFFFF url(../images/loading.gif) no-repeat center center; } .loading-elem { cursor: wait; background: #FFFFFF url(../images/loading.gif) no-repeat center center; } /* Paginations ----------------------------------------------------------------------------- */ .pagination { clear: both; float: left; display: table; width: 100%; font-size: 11px; line-height: 17px; text-align: center; } .pagination a:link, .pagination a:visited, .pagination span { display: inline-block; overflow: hidden; margin: 0 5px 0 0; padding: 1px 7px; border-width: 1px; border-style: solid; text-decoration: none; background: #000000; color: #ffffff; border-color: #222222; } .pagination a:hover { background: #E3E3E3; color: #000000; border-color: #000000; } .pagination .active { background: #2f67c3; color: #ffffff; border-color: #000000; font-weight:bold; } .pagination .disabled { background: #EAEAEA; color: #999999; border-color: #BEBEBE; } /* Separators ----------------------------------------------------------------------------- */ .s1 { height: 1px; margin: 10px 0; background: #E5E5E7; } .s2 { height: 1px; margin: 10px 0 0 0; background: #E5E5E7; } /* Thumbnails ----------------------------------------------------------------------------- */ .thumb { display: inline-block; border: 1px solid #FFFFFF; background: #1E3853; } a.thumb:hover { border: 1px solid #FFFFFF; background: #FFFFFF; } /* Typography ----------------------------------------------------------------------------- */ .highlight { color: #CC0000; } .star { font: normal 11px Verdana, Arial, Helvetica, sans-serif; } /* ---------------------------------------------------------------------------- 6. Modules ----------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- Category Listing ----------------------------------------------------------------------------- */ .category-list { } .category-list .category { margin: 0 0 10px 0; padding: 7px; border: 1px dotted #777777; background: #FFFFFF; } .category-list .category-photo { float: left; width: 118px; height: 118px; margin: 0 10px 0 0; border: 1px solid #000000; } .category-list .category-photo img { display: block; width: 118px; height: 118px; background: no-repeat center center; } /* ---------------------------------------------------------------------------- Product Filters ----------------------------------------------------------------------------- */ .product-filters { padding-left:50px} .product-filters .field { float: left; width: 300px; margin:0 0 2px 0;} .product-filters label { float: left; width: 110px; } .product-filters .input-text { float: left; width: 116px; } .product-filters select { float: left; width: 150px; } /* ---------------------------------------------------------------------------- Product Listing ----------------------------------------------------------------------------- */ .product-list { clear: both; } .product-list .product { margin-top: 10px; margin-right:25px; width:479px; float:left; background: url(../images/layout/bg-product.jpg) no-repeat left top; color:#162B5A;} .product-list .product-last { margin-right: 0 !important; float:right;} .product-list .product-inner { padding:5px;} .product-list .product-promo { } .product-list .product-ref { } .product-list .product-title { } .product-list .product-btn { float:right; margin-top:4px;} .mark-title { width:459px; float:left; background: #194488 url(../images/layout/bg-btn-x.jpg) repeat-x left top; height:22px; font-size:12px; font-weight:bold; padding:5px 0px 0px 10px; margin:0 0 0px 0; color:#ffffff;} .product-list .product-photo-holder { float:left; width:190px; height:120px;} .product-list .product-details-holder {float:left; width:277px; height:95px; } .product-details-holder span {text-align:left !important;} .product-mark, .product-model, .product-ref, .product-price, .product-km, .product-power, .product-warranty, .product-color, .product-energy {text-align:right; border-bottom:1px solid #C3C3C3;} .product-details .product-mark:hover, .product-details .product-model:hover, .product-details .product-ref:hover, .product-details .product-price:hover, .product-details .product-km:hover, .product-details .product-power:hover, .product-details .product-warranty:hover, .product-details .product-color:hover, .product-details .product-energy:hover {text-align:right; border-bottom:1px solid #162B5A; color:#212121; background:#e9e9e9; } .product .product-mark:hover, .product .product-model:hover, .product .product-ref:hover, .product .product-price:hover, .product .product-km:hover, .product .product-power:hover, .product .product-warranty:hover, .product .product-color:hover, .product .product-energy:hover {text-align:right; border-bottom:1px solid #162B5A; color:#212121; background:#e9e9e9;} .product-mark span, .product-model span, .product-ref span, .product-price span, .product-km span, .product-power span, .product-warranty span, .product-color span, .product-energy span {text-align:left; float:left; } /* Product Listing > Prices ----------------------------------------------------------------------------- */ .product-list .product-prices { overflow: hidden; } .product-list .price-holder, .product-list .best_price-holder, .product-list .reduced_price-holder { background: #009933; color: #FFFFFF; padding: 5px 10px; } .product-list .price-holder.old { background: #CC0000; color: #FFFFFF; } .product-list .price-holder.old .price { text-decoration: line-through; } /* Product Listing > Photos ----------------------------------------------------------------------------- */ .product-list .product-photo { float: left; width: 178px; height: 118px; margin: 0 10px 0 0; border: 1px solid #919191; } .product-list .product-photo img { display: block; width: 178px; height: 118px; background: no-repeat center center; } /* ---------------------------------------------------------------------------- Product Details ----------------------------------------------------------------------------- */ .noimage {} .product-no-image {width:178px; margin:0 13px 0 0px; display:block; height:118px; float:left; border:1px solid #454545; padding:30px 30px; background: #fbfbfc url(../images/layout/bg-product2.jpg) repeat-x left top;} .product-no-image img { border:1px solid #000000;} .details-holder {width:741px; float:left; } .product-description {text-align:justify;} .retour-btn {float:right; margin:10px 0px; display:inline;} /* Product Details > Photos ----------------------------------------------------------------------------- */ .product-details .product-photos { float: left; width: 244px; margin: 0 10px 0 0; } .product-details .product-large_photo { display: block; width: 240px; height: 240px; border: 1px solid #909090; } .product-details .product-large_photo img { display: block; width: 240px; height: 240px; background: no-repeat center center; } .product-details .product-small_photos { margin: 10px 0; } .product-details .product-small_photo { display: block; width: 80px; height: 80px; background-color: #FFFFFF; background: no-repeat center center; } /* Product Details > Prices ----------------------------------------------------------------------------- */ .product-details .product-prices { float: left; overflow: hidden; width: 300px; height: 56px; } .product-details .price-holder, .product-details .reduced_price-holder { background: #009933; color: #FFFFFF; padding: 5px 10px; } .product-details .price-holder.old { background: #CC0000; color: #FFFFFF; } .product-details .price-holder.old .price { text-decoration: line-through; } .product-details .message_price { padding: 5px 10px; } /* Product Details > Availability ----------------------------------------------------------------------------- */ .product-details .product-availability { float: left; overflow: hidden; width: 300px; height: 56px; margin: 10px 0; padding: 10px; border: 1px solid #333333; } /* ---------------------------------------------------------------------------- Modules > Content management ----------------------------------------------------------------------------- */ .content-management { } .content-management .paragraph { } .content-management .paragraph-title { margin: 0 0 7px 0; padding: 5px 10px; font-weight: bold; background: #222222; color: #FFFFFF; } .content-management .paragraph-text { } .content-management .paragraph-images { } .paragraph.images .paragraph-images { } .paragraph.images-left .paragraph-images { float: left; margin: 0 10px 0 0; } .paragraph.images-right .paragraph-images { float: right; margin: 0 0 0 10px; } /* ---------------------------------------------------------------------------- Modules > MDM ----------------------------------------------------------------------------- */ #news { width:150px; height:104px; float:left; background:url(../images/layout/bg-actualites.jpg) no-repeat left top; margin-left:4px;} #news-inner { padding: 29px 7px 0 7px; } #news .news-title { font-weight: bold; } #news .news-photo { float: left; margin: 0 10px 0 0; padding: 3px; border: 1px solid #CCCCCC; } #news .news-text { text-align: left; width:87px; float:left; clear:both; line-height:16px;} #news .news-btn { float: right; font-weight: bold; } /* ---------------------------------------------------------------------------- Module > Actualites ----------------------------------------------------------------------------- */ #news-list { } #news-list-inner { } #news-list .news { margin: 0 0 10px 0; } #news-list .news-title { margin: 0 0 7px 0; padding: 5px 10px; font-weight: bold; background: #e8e8ea url(../images/layout/bg-title.jpg) repeat-y left top; } #news-list .news-title-over { margin: 0 0 7px 0; padding: 5px 10px; font-weight: bold; background: #d4d8e0 url(../images/layout/bg-title.jpg) repeat-y right top; } #news-list .news-date { } #news-list .news-photo { float: left; margin: 0 10px 10px 0; padding: 1px; border: 1px solid #8B8B8B; } #news-list .news-text { text-align: justify; } #news-list .news-url { } /* ---------------------------------------------------------------------------- Modules > Annuaires Web ----------------------------------------------------------------------------- */ #web-directory-desc { width: 100%; margin: 5px auto; } #web-directory-desc p { padding: 5px 0; text-align: center; } #web-directory-desc a:link, #web-directory-desc a:visited { } #web-directory-desc a:hover, #web-directory-desc a:active { } table#web-directory { width: 100%; margin: 0 auto; } table#web-directory td.chenar2 { padding: 2px 10px 2px 20px; vertical-align: top; background: url(../images/bullets/bullet.jpg) no-repeat 0px 8px; border-bottom:1px solid #dbdbdb;} table#web-directory td.chenar2-over { padding: 2px 10px 2px 20px; background: url(../images/bullets/bullet.jpg) no-repeat 5px 8px; border-bottom:1px solid #7CAFFF; } table#web-directory img { float: left; margin: 3px 5px; } table#web-directory a:link, table#web-directory a:visited { } table#web-directory a:hover, table#directory a:active { } /*********** plan ***************/ #map { display: block; margin: 0px 10px 0px 0; width: 692px; height: 400px; float:left;} #map img { border:1px solid #8B8B8B; padding:1px;} #zoom-buttons { float: left; width:250px; text-align:center; padding-left:40px;} .zoom-btn { width: 20px; height: 20px; display: block; float: left; } .zoom-btn:hover, .zoom-btn-active{ background-position: left bottom !important; } .zoom-btn-active{ cursor: default !important; } #zoom-1 { background: url(../images/plan/zoom1-btn.jpg) no-repeat left top; margin-right: 10px; } #zoom-2 { background: url(../images/plan/zoom2-btn.jpg) no-repeat left top; margin-right: 10px; } #zoom-3 { background: url(../images/plan/zoom3-btn.jpg) no-repeat left top; } .print-btn { background: url(../images/plan/print-btn.jpg) no-repeat left top; width: 110px; height: 20px; display: block; float: left; margin-right:10px;} .print-btn:hover{ background-position: left bottom; }