/* ============================================================================= File : main.css Description : Feuille de style principale pour La Trocante Author : Florent CLANET (www.choosit.com) =========================================================================== */ /* TABLE OF CONTENT /////////////////////////////////////////////////////////////////////////////////////////// 1- Reset CSS 2- Custom Fonts 3- Container & Tools 4- HEADER 5- Slider 6- Breadcrumb 7- Page R�sultats 8- Page Produits 9- Page Magasin 10- Page Standard 11- Page Contact 12- Page Erreur 404 13- Entries 14- Footer 15- Texte GLOBAL 16- Forms GLOBAL 17- Forms Estimation + Vendez 18- Mes ventes //////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* ============================================================================= 1- Reset CSS =========================================================================== */ @import url('normalize.css'); /* ============================================================================= 2- Custom Fonts =========================================================================== */ @font-face { font-family: 'thesans'; src: url('fonts/thesansextrabold-webfont.eot'); src: url('fonts/thesansextrabold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/thesansextrabold-webfont.woff') format('woff'), url('fonts/thesansextrabold-webfont.ttf') format('truetype'), url('fonts/thesansextrabold-webfont.svg#theSans') format('svg'); } @font-face { font-family: 'thesans-bold'; src: url('fonts/thesans-b.eot'); src: url('fonts/thesans-b.eot?#iefix') format('embedded-opentype'), url('fonts/thesans-b.woff') format('woff'), url('fonts/thesans-b.ttf') format('truetype'), url('fonts/thesans-b.svg#thesans-b') format('svg'); } /* ============================================================================= 3- Container & Tools =========================================================================== */ body { background-color: #FFF; font: normal 12px Helvetica, Arial, sans-serif; line-height: 18px; } .wrap { width: 975px; margin: 0 auto; } input:focus, textarea:focus { outline: none; } *:focus { outline:none; } textarea { resize: none; } a { text-decoration: none; cursor: pointer; } .clear { clear: both; } .addthis_toolbox.addthis_default_style { margin-top: 15px; } /* ============================================================================= 4- HEADER =========================================================================== */ header { z-index: 20; position: relative; margin-top: 30px !important; } #logo { float: left; display: block; margin-right: 42px; } #logo a { display: block; background: url('../images/logo.png') no-repeat; width: 177px; height: 68px; text-indent: -9999px; } #main_menu { float: left; background: #f3f3f3; margin-top: 20px; } #main_menu > ul { margin: 0; margin-left: 20px; padding: 0; list-style: none; width: 418px; height: 35px; } #main_menu > ul > li { float: left; position: relative; } #main_menu > ul > li > a { display: block; background: #f3f3f3; font: normal 15px thesans, sans-serif; text-transform: uppercase; padding: 9px 10px 7px; color: #f29400; } #main_menu > ul > li.active > a { background: #f29400; color: #FFF; } #main_menu > ul > li > a.home { display: block; background: url('../images/ui_icons.png') -1px -41px no-repeat; padding: 12px 0; padding-right: 15px; width: 11px; height: 11px; text-indent: -9999px; } #main_menu > ul > li > a.home:hover { background-position: -1px -72px; } #main_menu > ul > li > ul { z-index: 11; display: none; position: absolute; margin: 0; padding: 0; } #main_menu > ul > li > ul > li { display: block; } #main_menu > ul > li > ul > li a { display: block; background: #FFF; padding: 10px 15px 9px; width: 158px; height: 20px; font: normal 14px thesans, sans-serif; color: #555; border: 1px solid #ddd; border-bottom: none; } #main_menu > ul > li > ul > li:last-child a { border-bottom: 1px solid #ddd; } #main_menu_title { float: left; background: url('../images/depot_cash.png') no-repeat; margin-top: -2px; margin-left: -30px; width: 235px; height: 79px; } #catalogue_menu1 { background: #e95d0f; margin-top: 35px; margin-left: -95px; padding-left: 95px; padding-right: 10px; width: 675px; } #catalogue_menu1 ul { margin: 0px; padding: 0; } #catalogue_menu1 ul li { display: block; float: left; } #catalogue_menu1 ul li a { display: block; background: #e95d0f; padding: 11px 8px 10px; font: normal 15px thesans, sans-serif; color: #FFF; text-transform: uppercase; } #catalogue_menu1 ul li.active a { background: #494948; } #catalogue_menu2 { background: #494948; width: 820px; margin-left: 125px; padding-right: 95px; padding-left: 10px; } #catalogue_menu2 ul { margin: 0px; padding: 0; } #catalogue_menu2 ul li { display: block; float: left; } #catalogue_menu2 ul li a { display: block; background: #494948; padding: 11px 8px 10px; font: normal 16px thesans, sans-serif; color: #FFF; text-transform: uppercase; } #catalogue_menu2 ul li.active a { background: #e95d0f; } #search_bar { background: url('../images/bg_recherche.png') no-repeat; padding-left: 20px; width: 930px; height: 60px; } #search_bar.active { height: auto; } #search_bar form { padding-top: 9px; } #search_bar form input[type="text"] { float: left; } #search_bar form input[type="submit"] { float: left; margin-left: 10px; background: #e95d0f; width: 92px; height: 28px; font: normal 13px thesans-bold, sans-serif; color: #FFF; text-transform: uppercase; text-align: center; line-height: 26px; border: none; cursor: pointer; } #search_bar form .select_container { float: left; margin-left: 10px; } #search_bar form .advanced { display: none; background: #ffe9dc; margin-top: 30px; margin-left: -20px; width: 950px; height: 36px; } #search_bar form .advanced.active { display: block; } #search_bar form .advanced .title { float: left; display: block; background: #494948; padding-left: 20px; padding-top: 10px; width: 52px; height: 26px; font: bold 13px Helvetica, Arial, sans-serif; color: #FFF; text-transform: uppercase; } #search_bar form .advanced .row { float: left; margin-left: 10px; padding-top: 4px; } #search_bar form .advanced .row label { display: block; float: left; padding-top: 7px; width: auto; font: bold 13px Helvetica, Arial, sans-serif; color: #e95d0f; } #search_bar form .advanced .select_container { background-position: -590px 6px; width:84px; height:26px; } #search_bar form .advanced .select_container select { width:84px !important; height:26px !important; } #search_bar form .advanced .checkboxes { float: left; margin-left: 40px; padding-top: 12px; } #search_bar form .advanced .checkboxes .checkbox { float: left; margin-right: 20px; } #search_bar form .advanced .checkboxes .checkbox label, #search_bar form .advanced .checkboxes .checkbox input[type="checkbox"] { float: left; } #search_bar form .advanced .checkboxes .checkbox label { margin-top: -2px; margin-left: 5px; padding-top: 0; width: auto; color: #494948; } #arrow_jachete { position: absolute; bottom: 70px; left: -10px; background: url('../images/arrow_jachete.png') no-repeat; width: 126px; height: 27px; } #arrow_jachete.active { bottom: 112px; } #arrow_je_vends { position: absolute; top: 30px; right: -10px; background: url('../images/arrow_je_vends.png') no-repeat; width: 74px; height: 57px; } /* ============================================================================= 5- Slider =========================================================================== */ #slider { position: relative; z-index: 10; margin-top: -15px; width: 950px; height: 383px; } #slider .trocante { position: absolute; bottom: 47px; left: -95px; background: #494948; padding-left: 95px; width: 233px; height: 54px; font: normal 36px thesans-bold, sans-serif; line-height: 54px; color: #FFF; text-transform: uppercase; } /* ============================================================================= 6- Breadcrumb =========================================================================== */ #breadcrumb { margin-top: 25px; } #breadcrumb ul { margin: 0; padding: 0; list-style: none; } #breadcrumb ul li, #breadcrumb ul li a:hover { display: inline; color: #494948; } #breadcrumb ul li a { background: url('../images/ui_icons.png') right -31px no-repeat; padding-right: 10px; color: #8a8a8a; } /* ============================================================================= 7- Page r�sultats =========================================================================== */ #main_content #filtre_pagination { background: #f3f3f3; padding-top: 9px; padding-left: 20px; width: 930px; height: 26px; } #main_content #filtre_pagination .nb_resultats { float: left; background: url('../images/ui_icons.png'); padding: 0 30px; padding-right: 20px; color: #494948; border-right: 1px solid #dddddd; } #main_content #filtre_pagination .nb_resultats.over1000 { background-position: 2px 277px; } #main_content #filtre_pagination .nb_resultats.over1000 span { display: inline; } #main_content #filtre_pagination .nb_resultats span { display: none; } #main_content #filtre_pagination .nb_articles { float: left; padding-left: 20px; color: #494948; } #main_content #filtre_pagination .nb_articles span { display: block; float: left; } #main_content #filtre_pagination .nb_articles ul { float: right; padding: 0; margin: 0px 10px; margin-top: -3px; list-style: none; } #main_content #filtre_pagination .nb_articles ul li { float: left; margin: 0 1px; } #main_content #filtre_pagination .nb_articles ul li a { display: block; background: #dddddd; padding: 3px 6px; color: #494948; } #main_content #filtre_pagination .nb_articles ul li a.c100 { padding: 3px 3px; } #main_content #filtre_pagination .nb_articles ul li a.active { background: #494948; color: #FFF; font-weight: bold; } #main_content #filtre_pagination .nb_articles ul li a:hover { font-weight: bold; } .pagination { float: right; list-style: none; padding: 0; margin-top: -4px; margin-bottom: 0; margin-right: 20px; } .pagination li { float: left; margin: 0 1px; } .pagination li a { display: block; background: #494948; } .pagination li a.first { background: url('../images/ui_icons.png') 7px -147px no-repeat #494948; width: 32px; height: 24px; } .pagination li a.last { background: url('../images/ui_icons.png') -133px -147px no-repeat #494948; width: 32px; height: 24px; } .pagination li a.prev { background: url('../images/ui_icons.png') -38px -147px no-repeat #494948; width: 22px; height: 24px; } .pagination li a.next { background: url('../images/ui_icons.png') -89px -147px no-repeat #494948; width: 22px; height: 24px; } .pagination li a.num { width: 22px; height: 24px; color: #FFF; text-align: center; line-height: 25px; } .pagination li a.active { background-color: #e95d0f; font-weight: bold; } .pagination li a:hover { font-weight: bold; } #listing_articles { float: left; margin: 25px 0; margin-bottom: 15px; padding-left: 0; width: 640px; list-style: none; } #listing_articles:after { clear: both; content: ""; display: table; } #listing_articles li { margin-bottom: 10px; } #listing_articles li a.article { display: block; padding: 15px; position: relative; border: 1px solid #c0c0c0; } #listing_articles li a.article:after { clear: both; content: ""; display: table; } #listing_articles li a.article .thumbnail { float: left; margin-right: 10px; width: 135px; height: 110; overflow: hidden; } #listing_articles li a.article .thumbnail img { display: block; } #listing_articles li a.article article { float: left; position: relative; width: 460px; height: 120px; } #listing_articles li a.article article h2 { margin: 0; font: normal 18px thesans, sans-serif; color: #e95d0f; } #listing_articles li a.article article span { color: #494948; } #listing_articles li a.article article .prix_quantite { position: absolute; bottom: 0px; left: 0; } #listing_articles li a.article article .prix_quantite .prix { float: left; font: normal 30px thesans, sans-serif; padding-right: 20px; color: #f29400; } #listing_articles li a.article article .prix_quantite .quantite { float: left; padding-top: 12px; padding-left: 20px; font: normal 12px Helvetica, Arial, sans-serif; color: #494948; } #listing_articles li a.article article .prix_quantite .quantite strong { font-weight: bold; color: #f29400; } #listing_articles li a.article article .special { position: absolute; bottom: 0; right: 0; } #listing_articles li a.article article .special .arrivage { float: right; background: url('../images/ui_icons.png') 0 -235px no-repeat; margin-left: 10px; width: 90px; height: 49px; } #listing_articles li a.article article .special .incontournable { float: left; background: url('../images/ui_icons.png') 0 -180px no-repeat; margin-top: 5px; width: 150px; height: 40px; } #listing_articles li a.article article .special .vendu { float: right; background: url('../images/vendu.png') no-repeat; margin-left: 10px; width: 90px; height: 49px; } #promotions { float: left; margin-top: 25px; margin-left: 30px; } #promotions a.promotion { margin-bottom: 10px; } #promotions a.promotion, #promotions a.promotion img { display: block; } #pagination_bottom { background: #f3f3f3; padding-top: 9px; width: 950px; height: 26px; } /* ============================================================================= 8- Page Produit =========================================================================== */ #produit { margin-top: 25px; margin-bottom: 25px; padding-bottom: 25px; width: 950px; border-bottom: 10px solid #e9e9e9; } #produit .details { float: left; } #produit .details .photos { float: left; width: 300px; } #produit .details .photos .zoom_holder { position: relative; width: 295px; } #produit .details .photos .zoom_holder .incontournable { position: absolute; top: -3px; right: -4px; background: url('../images/ui_icons.png') 0 -180px no-repeat; width: 150px; height: 40px } #produit .details .photos .zoom_holder .arrivage { position: absolute; bottom: 0px; right: 1px; background: url('../images/ui_icons.png') 0 -235px no-repeat; width: 90px; height: 49px; } #produit .details .photos .zoom_holder .vendu { position: absolute; bottom: 0px; right: 1px; background: url('../images/vendu.png') no-repeat; width: 90px; height: 49px; } #produit .details .photos a.zoom { display: block; } #produit .details .photos a.zoom img { display: block; width: 100%; } #produit .details .photos .thumbnails { margin: 0; margin-top: 10px; padding: 0; list-style: none; } #produit .details .photos .thumbnails li { float: left; margin-right: 5px; margin-bottom: 5px; } #produit .details .photos .thumbnails li a { display: block; padding: 2px; border: 1px solid #c0c0c0; } #produit .details .photos .thumbnails li a img { display: block; } #produit .details .description { float: left; margin-left: 10px; width: 340px; } #produit .details .description h2 { margin: 0; font: normal 19px thesans, sans-serif; color: #e95d0f; } #produit .details .description p { margin-top: 10px; width: 330px; color: #494948; } #produit .details .description p strong { line-height: 24px; } #produit .details .description p .quantite { color: #f29400; } #produit .prix_actions { float: right; } #produit .prix_actions a.retour { display: block; width: 278px; height: 58px; border: 1px solid #c0c0c0; font: normal 17px thesans, sans-serif; color: #494948; text-align: center; line-height: 58px; } #produit .prix_actions a.retour span { background: url('../images/ui_icons.png') 0 -291px no-repeat; padding: 10px; } #produit .prix_actions a.retour:hover span { background-position: 0 -326px; } #produit .prix_actions .bloc { margin-top: 10px; padding: 20px; width: 238px; border: 1px solid #c0c0c0; } #produit .prix_actions .bloc .info { float: left; width: 140px; color: #494948; } #produit .prix_actions .bloc .info strong { color: #e95d0f; } #produit .prix_actions .bloc .info .etat, #produit .prix_actions .bloc .info .statut { display: block; padding-bottom: 5px; } #produit .prix_actions .bloc .prix { float: left; width: 95px; text-align: right; } #produit .prix_actions .bloc .prix strong { font: bold 14px Helvetica, Arial, sans-serif; color: #494948; } #produit .prix_actions .bloc .prix .promo { font: normal 18px Helvetica, Arial, sans-serif; color: #999999; text-decoration: line-through; } #produit .prix_actions .bloc .prix .normal { font: bold 28px Helvetica, Arial, sans-serif; color: #e95d0f; line-height: 20px; } #produit .prix_actions .bloc a.contact { display: block; background: #e95d0f; margin-top: 25px; margin-left: 23px; width: 194px; height: 32px; font: normal 16px thesans, sans-serif; color: #FFF; text-transform: uppercase; text-align: center; line-height: 32px; } #produit .prix_actions .bloc .actions { margin-top: 25px; padding-top: 15px; border-top: 1px solid #c0c0c0; } #produit .prix_actions .bloc .actions a { font-weight: bold; color: #e95d0f; } #produit .prix_actions .bloc .actions a:hover { color: #494948; } #produit .prix_actions .bloc .actions .sharer { display: none; position: relative; background: url('../images/ui_icons.png') 105px -385px no-repeat; padding-top: 7px; } #produit .prix_actions .bloc .actions .sharer a.close { display: block; position: absolute; top: 12px; right: 5px; background: url('../images/ui_icons.png') -655px -60px no-repeat; width: 9px; height: 9px; } #produit .prix_actions .bloc .actions .sharer ul { background: #f1f1f1; padding: 0; padding: 10px 20px; margin: 0; list-style: none; } #produit .prix_actions .bloc .actions .sharer ul:after { clear: both; content: ""; display: table; } #produit .prix_actions .bloc .actions .sharer ul li { float: left; margin-right: 10px; } #produit .prix_actions .bloc .actions .sharer ul li a { display: block; } #produit .prix_actions .bloc .actions .sharer ul li a.facebook { background: url('../images/icon_facebook_square.png') no-repeat; width: 24px; height: 24px; } #produit .prix_actions .bloc .actions .sharer ul li a.twitter { background: url('../images/icon_twitter_square.png') no-repeat; width: 24px; height: 24px; } #produit .prix_actions .bloc .actions .sharer ul li a.google { background: url('../images/icon_google_square.png') no-repeat; width: 24px; height: 24px; } /* ============================================================================= 9- Page Magasin (Inclue dans la page produit, avec h1 qui change en h3 ) =========================================================================== */ #magasin { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 10px solid #e9e9e9; } #magasin h1 { font: normal 27px thesans, sans-serif; color: #494948; } #magasin .photos_coords { float: left; width: 525px; } #magasin .photos_coords h3 { margin: 0; margin-bottom: 15px; font: normal 15px thesans, sans-serif; color: #e95d0f; text-transform: uppercase; } #magasin .photos_coords .zoom_holder { float: left; } #magasin .photos_coords .zoom_holder a { display: block; } #magasin .photos_coords .zoom_holder a img { display: block; } #magasin .photos_coords .coords { float: left; margin-left: 10px; width: 220px; color: #494948; } #magasin .photos_coords .coords p:first-child { margin-top: 0; } #magasin .photos_coords .thumbnails { margin: 0; margin-top: 10px; padding: 0; list-style: none; } #magasin .photos_coords .thumbnails li { float: left; margin-right: 5px; margin-bottom: 5px; } #magasin .photos_coords .thumbnails li a { display: block; padding: 2px; border: 1px solid #c0c0c0; } #magasin .photos_coords .thumbnails li a img { display: block; } #magasin #carte { float: left; width: 400px; height: 310px; margin-left: 25px; } #magasin .info_complementaires { margin-top: 20px; color: #494948; } #magasin .info_complementaires strong { display: block; margin-bottom: 5px; } #magasin a.btn_magasin { background: #e95d0f; padding: 3px 10px; font: normal 13px thesans, sans-serif; text-transform: uppercase; color: #FFF; } #produits_associes h3 { margin: 0; margin-bottom: 0; font: normal 15px thesans, sans-serif; color: #e95d0f; text-transform: uppercase; } #produits_associes ul:after { clear: both; content: ""; display: table; } #produits_associes ul { padding: 0; margin: 0; list-style: none; } #produits_associes ul li { float: left; margin-top: 20px; margin-right: 25px; width: 135px; text-align: center; } #produits_associes ul li.last { margin-right: 0; } #produits_associes ul li a.photo { display: block; } #produits_associes ul li a img { display: block; } #produits_associes ul li .title { margin-top: 10px; font: normal 13px Helvetica, Arial, sans-serif; color: #494948; line-height: 18px; } #produits_associes ul li .prix { font: bold 16px Helvetica, Arial, sans-serif; color: #e95d0f; line-height: 26px; } #produits_associes ul li a.lien_fiche { font: normal 12px Helvetica, Arial, sans-serif; color: #e95d0f; } #produits_associes ul li a.lien_fiche:hover { text-decoration: underline; } #plus { margin-top: 25px; padding-top: 25px; border-top: 10px solid #e9e9e9; } #plus h3:first-child { margin: 0; } #plus h3 { margin-bottom: 0; font: normal 15px thesans, sans-serif; color: #e95d0f; text-transform: uppercase; } #plus p { margin-top: 5px; color: #494948; } #plus details { margin-top: 20px; font: italic 10px Helvetica, Arial, sans-serif; color: #494948; cursor: pointer; } /* ============================================================================= 10- Page Standard =========================================================================== */ #menu_lateral { float: left; margin-top: 25px; margin-right: 25px; width: 248px; border: 1px solid #c0c0c0; } #menu_lateral ul { padding: 0; margin: 0; } #menu_lateral ul li { margin: 15px 0; } #menu_lateral ul li a { padding-left: 45px; font: normal 16px thesans, sans-serif; color: #494948; } #menu_lateral ul li a.active, #menu_lateral ul li a:hover { background: url('../images/ui_icons.png') -635px -87px no-repeat; color: #e95d0f; } #content { float: left; margin-top: 25px; width: 655px; } #content h1 { margin-top: 0; font: normal 27px thesans, sans-serif; color: #494948; } #content h2 { font: normal 23px thesans, sans-serif; color: #e95d0f; } #content h3 { font: normal 18px thesans, sans-serif; color: #494948; } #content p { color: #494948; } #content a { color: #e95d0f; text-decoration: underline; } #content a:hover { text-decoration: none; } #content ul { padding-left: 15px; list-style: none outside; } #content ul li { background: url('../images/bg_puce.gif') 0 6px no-repeat; margin: 0 0 3px; padding: 0 0 0 17px; color: #494948; } /* ============================================================================= 11- Page Contact =========================================================================== */ #contact { margin-top: 25px; color: #494948; } #contact form fieldset { border: none; float: left; padding: 0; margin: 0; width: 455px; } #contact form fieldset#col1 { } #contact form fieldset#col2 { margin-left: 40px;} #contact form label { float: left; display: block; padding-top: 5px; width: 150px; } #contact form .select_container, #contact form input[type="text"]{ float: left; } #contact form textarea { width: 290px; height: 100px; } #contact form input[type="submit"] { margin-left: 150px; margin-top: 15px; background: #e95d0f; width: 92px; height: 28px; font: normal 13px thesans, sans-serif; color: #FFF; text-transform: uppercase; text-align: center; line-height: 26px; border: none; cursor: pointer; } /* ============================================================================= 12- Page Erreur 404 =========================================================================== */ #error404 { text-align: center; margin-bottom: 50px; } #error404 h1 { margin: 0; font: normal 120px thesans, sans-serif; color: #494948; } #error404 h2 { margin-top: 15px; font: normal 30px thesans, sans-serif; color: #f29400; } #error404 a { font-size: 15px; color: #e95d0f; text-decoration: underline; } #error404 a:hover { text-decoration: none; } /* ============================================================================= 13- Entries =========================================================================== */ #entries { background: url('../images/bg_entries.gif'); padding: 30px; padding-bottom: 0; width: 890px; height: 234px; } #entries .cash { float: left; background: url('../images/handcash.png') right bottom no-repeat; width: 220px; height: 234px; margin-right: 30px; } #entries .cash h3 { margin-top: 0; margin-bottom: 7px; color: #5f5f5f; } #entries .cash p { margin-top: 0; margin-bottom: 25px; font: bold 18px Helvetica, Arial, sans-serif; color: #e95d0f; } #entries .cash p strong { font: normal 33px thesans, sans-serif; color: #5f5f5f; } #entries .cash a { background: #e95d0f; padding: 5px 10px 4px; font: normal 13px thesans, sans-serif; color: #FFF; text-transform: uppercase; } #entries .login { float: left; margin-right: 65px; width: 265px; height: 195px; } #entries .login h3 { background: url('../images/icon_lock.png') no-repeat; padding-left: 35px; margin-top: 0; margin-bottom: 10px; color: #5f5f5f; } #entries .login form { margin-left: 3px; } #entries .login form input[type="text"], #entries .login form input[type="password"] { margin-top: 10px; } #entries .login form a.oubli_mdp { display: block; float: left; margin-top: 15px; font: normal 11px Helvetica, Arial, sans-serif; color: #e95d0f; } #entries .login form a.oubli_mdp:hover { color: #494948; } #entries .login form input[type="submit"] { float: right; background: #e95d0f; margin-top: 10px; margin-right: 7px; width: 63px; height: 25px; font: normal 13px thesans, sans-serif; color: #FFF; text-transform: uppercase; text-align: center; line-height: 26px; border: none; cursor: pointer; } #entries .reseaux { float: left; background: url('../images/bg_reseaux.png') no-repeat; padding-left: 20px; padding-bottom: 20px; width: 290px; height: 220px; } #entries .reseaux h3 { margin-top: 35px; margin-bottom: 5px; color: #FFF; } #entries .reseaux p { margin-bottom: 20px; width: 120px; font: normal 13px Helvetica, Arial, sans-serif; color: #ffdfcd; } #entries .reseaux a { background: #FFF; padding: 5px 10px 4px; font: normal 13px thesans, sans-serif; color: #e95d0f; text-transform: uppercase; } /* ============================================================================= 14- Footer =========================================================================== */ footer { background: url('../images/bg_topfooter.gif') repeat-x #f3f3f3; padding: 35px 0 0; margin-top: 30px; } #categories { float: left; border-right: 1px solid #d1d1d2; } #categories .col { float: left; margin-right: 20px; width: 135px; } #categories .col h4 { margin-top: 0; margin-bottom: 5px; } #categories .col ul { padding: 0; margin: 0; margin-bottom: 15px; list-style: none; } #categories .col ul li a { color: #8e8e8f; } #categories .col ul li a:hover { color: #e95d0f; } #top_footer aside { float: left; padding-left: 23px; } #top_footer aside a { display: block; } #top_footer .utile { margin-top: 30px; padding: 30px 0; text-align: center; border-top: 1px solid #d1d1d2; } #top_footer .utile ul { margin: 0; padding: 0; list-style: none; } #top_footer .utile ul li { display: inline; } #top_footer .utile ul li a { color: #8b8b8b; } #top_footer .utile ul li a:hover { color: #e95d0f; } #sub_footer { background: url('../images/bg_subfooter.gif') repeat-x #dddddd; padding-top: 30px; padding-bottom: 20px; } #sub_footer a { float: left; display: block; } #sub_footer span { float: left; display: block; margin-top: 6px; margin-left: 20px; color: #8b8b8b; } #sub_footer .choosit { float: right; background: url('../images/logo_choosit.png') left top; margin-top: 10px; width: 41px; height: 11px; } #sub_footer .choosit:hover { background-position: left bottom; } /* ============================================================================= 15- Text GLOBAL =========================================================================== */ h1 { margin-top: 25; font: normal 27px thesans, sans-serif; color: #494948; } h2 { font: normal 24px thesans, sans-serif; color: #e95d0f; } h3 { font: normal 23px thesans, sans-serif; } h4 { font: bold 12px Helvetica, Arial, sans-serif; color: #494948; text-transform: uppercase; } a.btn, #main_content a.btn { background: #e95d0f; padding: 3px 5px; font: normal 13px thesans, sans-serif; color: #FFF; text-transform: uppercase; text-decoration: none; } /* ============================================================================= 16- Forms GLOBAL =========================================================================== */ fieldset { border: none; padding: 0; margin: 0; } form input[type="text"], form input[type="password"] { padding-top: 7px; padding-bottom: 5px; padding-left: 10px; width: 244px; height: 14px; border: 1px solid #d0d0d0; color: #7e7e7e; } form input.small { width: 50px; margin-left: 10px; } form input[type="submit"] { background: #e95d0f; width: 92px; height: 28px; font: normal 13px thesans, sans-serif; color: #FFF; text-transform: uppercase; text-align: center; line-height: 26px; border: none; cursor: pointer; } form .select_container { position:relative; background: url('../images/ui_icons.png') -420px 6px no-repeat #FFF; cursor:default; z-index:1; border: 1px solid #d0d0d0; width:254px; height:26px; } form .select_container select { position:relative; z-index:10; width:254px !important; height:26px !important; line-height:26px; color: #5f5f5f; } form .select_container span.select { position:absolute; bottom:0; float:left; left:0; line-height:26px; text-indent:10px; cursor:default; z-index:1; color: #7e7e7e; } form label { float: left; display: block; padding-top: 5px; width: 150px; } form select option.optgroup { background: #f5f5f5; padding-left: 0; text-transform: uppercase; font-weight: bold; } form select option { padding-left: 15px; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #7e7e7e; opacity: 1; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; transition: opacity 0.5s; } input:-moz-placeholder, textarea:-moz-placeholder{ color: #7e7e7e; opacity: 1; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; transition: opacity 0.5s; } input::-moz-placeholder, textarea::-moz-placeholder { color: #7e7e7e; opacity: 1; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; transition: opacity 0.5s; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #7e7e7e; opacity: 1; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; transition: opacity 0.5s; } input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color: #7e7e7e; opacity: 0.5; } input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { color: #7e7e7e; opacity: 0.5; } input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { color: #7e7e7e; opacity: 0.5; } input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { color: #7e7e7e; opacity: 0.5; } textarea { padding-top: 5px; padding-left: 5px; border: 1px solid #d0d0d0; } .placeholder { color: #7e7e7e; } form .row { position: relative; margin-bottom: 10px; } form legend.titre { font: bold 14px Helvetica, Arial, sans-serif; padding-bottom: 20px; } /* ============================================================================= 17- Forms Estimation + Vendez =========================================================================== */ #formQuestion fieldset .select_container { float: left; } #formQuestion fieldset { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #eeeeee; } #formQuestion fieldset input[type="text"] { float: left; } #formQuestion fieldset .row { float: left; margin-right: 65px; } #formQuestion fieldset .euro { position: absolute; top: 7px; right: 10px; } #formQuestion fieldset textarea { width: 306px; height: 150px; } #file_upload1, #file_upload2, #file_upload3 { float: none; margin-bottom: 10px; } #Estimer { margin-left: 150px; } /*#file_upload2, #file_upload3 { margin-left: 150px; }*/ .upload-photos-row label { float: none; width: auto; } .upload-photos-row .upload-photos-input { margin-left: 160px; } .upload-photos-row .error { margin-left: -30px; } .upload-photos-row .error~input { padding: 2px; border: 1px solid #e75747; } /* ============================================================================= 18- Mes ventes =========================================================================== */ #table-vd { width: 100%; } #table-vd .label { background: #494948; height: 45px; font: normal 16px thesans, sans-serif; color: #FFF; } #table-vd tr td { padding: 5px 0; padding-left: 20px; } #table-vd tr.odd { background: #f5f5f5; border-bottom: 1px solid #ddd; } #table-total { width: 100%; height: 30px; background: #e95d0f; border-top: 1px solid #eee; } #table-total tr td { padding-right: 20px; text-align: right; font: normal 14px Helvetica, sans-serif; color: #FFF; } #table-total tr td strong { font-size: 16px; } .infos { color: #888888; font: normal 13px Helvetica, Arial, sans-serif; } .today { color: #494948; font: bold 14px Helvetica, Arial, sans-serif; } .today .price { color: #e95d0f; } /* Popup avec message sur l'utilisation de données personnelles lors de l'accès au compte */ #fancybox-rgpd-ventes { display: none; max-width: 800px; } #fancybox-rgpd-ventes .modal a { color: #e95d0f; } #fancybox-rgpd-ventes .modal-footer { text-align: center; } #btn-valider-popup-donnees { display: inline-block; background: #e95d0f; margin-top: 20px; width: 194px; height: 32px; font: normal 16px thesans, sans-serif; color: #FFF !important; text-transform: uppercase; text-align: center; line-height: 32px; }