#menu {width: 100%; margin: 0;padding: 10px 0 0 0;margin:0 0 5px 0;list-style: none;border:solid 1px #222; background: -moz-linear-gradient(top, rgba(0,0,0,0.73) 0%, rgba(0,0,0,0.69) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.73)), color-stop(100%,rgba(0,0,0,0.69)));background: -webkit-linear-gradient(top, rgba(0,0,0,0.73) 0%,rgba(0,0,0,0.69) 100%);background: -o-linear-gradient(top, rgba(0,0,0,0.73) 0%,rgba(0,0,0,0.69) 100%);background: -ms-linear-gradient(top, rgba(0,0,0,0.73) 0%,rgba(0,0,0,0.69) 100%);background: linear-gradient(to bottom, rgba(0,0,0,0.73) 0%,rgba(0,0,0,0.69) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ba000000', endColorstr='#b0000000',GradientType=0 );} #menu li {float: left;padding: 0 0 10px 0;position: relative;line-height: 0;} #menu a {float: left;height: 25px;padding: 0 25px;color: #999;font: bold 12px/25px Arial, Helvetica;text-decoration: none;} #menu li:hover > a {color: #fafafa;} *html #menu li a:hover /* IE6 */ {color: #fafafa;} #menu li:hover > ul {display: block;} #menu ul {list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0; z-index: 99999; background:#010101;border: solid 1px #222;} #menu ul ul {top: 0;left: 150px;border: solid 1px #222;} #menu ul li {float: none;margin: 0;padding: 0;display: block; } #menu ul li:last-child {} #menu ul a {padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;} *html #menu ul a /* IE6 */ {height: 10px;} *:first-child+html #menu ul a /* IE7 */ {height: 10px;} #menu ul a:hover {background: #222;} #menu ul li:first-child > a {} #menu ul li:first-child > a:after {content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #222;} #menu ul ul li:first-child a:after {left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #222;} #menu ul li:first-child a:hover:after {border-bottom-color: #222;} #menu ul ul li:first-child a:hover:after {border-right-color: #222; border-bottom-color: transparent; } #menu ul li:last-child > a {} #menu:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;} * html #menu { zoom: 1; } /* IE6 */ *:first-child+html #menu { zoom: 1; } /* IE7 */ .zone_categ {position:relative;} .zone_categ .sort {position:absolute; top:15px; right:10px; font-size:11px;} .zone_categ .sort .ano {font-size:11px; color:#aaa; margin-left:5px; } .zone_categ .sort .adw {font-size:11px; color:#eee; margin-left:5px; } .zone_categ .sort .adw:before {content:url("../img/boutons/sortdw.png"); } .zone_categ .sort .aup {font-size:11px; color:#eee; margin-left:5px; } .zone_categ .sort .aup:before {content:url("../img/boutons/sortup.png"); } .mess-block a {color:#4b4b4b; text-align:center; font-weight:normal;} .mess-block a:hover {color:#4b4b4b;} .mess-block h1 {position:relative; font-size:15px; color:#666; letter-spacing:1px; padding:0; margin:0px 2% 20px; width:100%;} .mess-block .square {position:relative; opacity: 0; width:100%; margin:0px auto 5px auto; -webkit-transition: all 1s ease 0.2s; -moz-transition: all 1s ease 0.2s; -o-transition: all 1s ease 0.2s; transition: all 1s ease 0.2s; -moz-transform: translate3d(-300px, 0px, 0px); -webkit-transform: translate3d(-300px, 0px, 0px); -o-transform: translate(-300px, 0px); -ms-transform: translate(-300px, 0px); transform: translate3d(-300px, 0px, 0px);} .mess-block .square_inview {margin-left:1%; opacity: 1; -moz-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate3d(0px, 0px, 0px);} .listproduit {width:100%; height:auto; min-height:642px; z-index:800;} .listproduit a {color:#eee; text-align:center; font-size:17px; font-weight:normal;} .listproduit a:hover {color:#eee;} .listproduit .mess-block {width:auto; max-width:100%; margin:0px auto 0px auto;} .listproduit .mess-block h2 {position:relative; font-size:15px; color:#666; letter-spacing:1px; padding:0; margin:0px 2% 20px; width:80%;} .listproduit .mess-block .square {position:relative; opacity: 0; float:left; margin:0px auto 14px auto; text-align:center; overflow:hidden; -webkit-transition: all 1s ease 0.2s; -moz-transition: all 1s ease 0.2s; -o-transition: all 1s ease 0.2s; transition: all 1s ease 0.2s; -moz-transform: translate3d(-300px, 0px, 0px); -webkit-transform: translate3d(-300px, 0px, 0px); -o-transform: translate(-300px, 0px); -ms-transform: translate(-300px, 0px); transform: translate3d(-300px, 0px, 0px);} .listproduit .mess-block .square_inview {margin-left:1%; opacity: 1; -moz-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate3d(0px, 0px, 0px);} .listproduit .mess-block .square .img {width:100%; height:600px;} .listproduit .mess-block .square .square_hover {position:absolute; right:0px; top:0px; width:100%; height:600px; margin-top:600px; background:rgba(115,115,115,0.7); opacity:0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; z-index:990;} .listproduit .mess-block .square .square_hover .overlay {position:absolute; right:0px; top:200px; width:100%; height:200px; background:rgba(0,0,0,0.5); z-index:991;} .listproduit .mess-block .square .square_hover .overlay .titre {position:absolute; right:0px; top:20px; width:100%; text-align:center; font-size:18px; z-index:992;} .listproduit .mess-block .square .square_hover .overlay .descript {position:absolute; right:0px; top:80px; width:100%; text-align:center; font-size:14px; line-height:20px; color:#ddd; z-index:992;} .listproduit .mess-block .square .square_hover .overlay .tarif {position:absolute; right:0px; top:160px; width:100%; text-align:center; font-size:17px; z-index:992;} .listproduit .mess-block .square .square_hover .overlay .promo {position:absolute; right:10px; top:140px; width:50px; height:50px; background:url('../img/boutons/logo_promo.png'); border:none; z-index:993;} .listproduit .mess-block .square .square_hover .overlay .solder {position:absolute; right:10px; top:140px; width:50px; height:50px; background:url('../img/boutons/logo_sold.png'); border:none; z-index:993;} .listproduit .mess-block .square .square_hover .cart {position:absolute; right:10px; top:10px; width:50px; height:50px; background:url('../img/boutons/cart_add.png'); border:none; z-index:993;} .listproduit .mess-block .square .square_hover .nouveau {position:absolute; top:0px; top:0px; width:35px; height:35px; background:url('../img/boutons/logo_nouveau.png'); border:none; z-index:993;} .listproduit .mess-block .square .square_hover .handjob {position:absolute; bottom:10px; left:10px; width:50px; height:50px; background:url('../img/boutons/logo_faitmain.png'); border:none; z-index:993;} .listproduit .mess-block .square .square_hover .perso {position:absolute; bottom:10px; rightt:10px; width:50px; height:50px; background:url('../img/boutons/logo_perso.png'); border:none; z-index:993;} .listproduit .mess-block .square .vendu {position:absolute; top:0px; left:0px; width:100%; height:100%; background:rgba(255,255,255,0.3); z-index:998;} .listproduit .mess-block .square .vendu .back {position:absolute; top:50%; left:10px; font-size:80px; width:100%; text-align:center; color:rgba(218,57,57,0.9); z-index:999; -ms-transform: rotate(-23deg); -webkit-transform: rotate(-23deg); transform: rotate(-23deg);} .listproduit .mess-block .square:hover .square_hover {opacity:1; margin-top:0px;} .listprodui .mess-block .square:hover .img {webkit-filter: grayscale(100%); filter: grayscale(100%);} .viewproduit {width:100%; height:auto; margin:45px auto 25px auto; text-align:left; color:#4f4f4f; background:#d3d3d3;} .viewproduit .mess-block .square {position:relative; width:98%; height:auto; margin:0px 1%; color:#444; line-height:21px; text-align:left; opacity: 0; -webkit-transition: all 0.5s ease 0.2s; -moz-transition: all 0.5s ease 0.2s; -o-transition: all 0.5s ease 0.2s; transition: all 0.5s ease 0.2s; -moz-transform: translate3d(-300px, 0px, 0px); -webkit-transform: translate3d(-300px, 0px, 0px); -o-transform: translate(-300px, 0px); -ms-transform: translate(-300px, 0px); transform: translate3d(-300px, 0px, 0px);} .viewproduit .mess-block .square_inview {opacity: 1; -moz-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate3d(0px, 0px, 0px);} .viewproduit .mess-block .square .detproduit {width:100%; height:auto;} .viewproduit .mess-block .square .detproduit .caseleft {width:38.8%; margin:0 0 1% 0; text-align:center; float:left; display:block;} .viewproduit .mess-block .square .detproduit .caseleft .imgview {width:100%; height:auto; overflow:hidden; margin-top:25px;} .viewproduit .mess-block .square .detproduit .caseleft .imgmin {width:32%; height:100px; text-align:center; overflow:hidden; float:left; margin:1px;} .viewproduit .mess-block .square .detproduit .caseleft .imgmin img {width:110%;} .viewproduit .mess-block .square .detproduit .caseleft .keyword {font-size:10px; line-height:20px; color:#aaa; text-align:left;} .viewproduit .mess-block .square .detproduit .caseright {position:relative; width:58.8%; margin:0 0 1% 0; text-align:left; float:right; display:block; color:#666; } .viewproduit .mess-block .square .detproduit .caseright h2 {position:relative; font-size:35px; line-height: 65px; color:#555; letter-spacing:1px; padding:0; width:100%; margin:0px; text-align:left;} .viewproduit .mess-block .square .detproduit .caseright .tarif {font-size:20px; line-height:85px; width:100%; border-bottom:solid 1px #e5e5e5;} .viewproduit .mess-block .square .detproduit .caseright .caddie {margin:30px 0px 30px 0px; height:50px; line-height:50px; text-align:center; background:#a1a1a1; cursor:pointer;} .viewproduit .mess-block .square .detproduit .caseright .caddie:hover {background:#e9e9e9; color:#333;} .viewproduit .mess-block .square .detproduit .caseright .caddie:hover a {color:#333;} .viewproduit .mess-block .square .detproduit .caseright .caddie a {color:#ebebeb;} .viewproduit .mess-block .square .detproduit .caseright .caddie a:hover {color:#333;} .viewproduit .mess-block .square .detproduit .caseright .stock {line-height:30px; font-size:15px; color:#888; padding-bottom:20px; margin-bottom:30px; border-bottom:solid 1px #e5e5e5;} .viewproduit .mess-block .square .detproduit .caseright .port {position:absolute; top:230px; left:calc(50% + 180px); font-size:15px; color:#888; } .viewproduit .mess-block .square .detproduit .caseright .description2 {text-align:justify; font-size:14px; line-height:20px; padding-bottom:30px; margin-bottom:30px; border-bottom:solid 1px #e5e5e5;} .viewproduit .mess-block .square .detproduit .caseright .help {font-size:11px; line-height:15px; padding:5px;} .viewproduit .mess-block .square .detproduit .caseright .promo {position:absolute; right:10px; top:90px; width:50px; height:50px; background:url('../img/boutons/logo_promo.png'); border:none; z-index:993;} .viewproduit .mess-block .square .detproduit .caseright .solde {position:absolute; right:10px; top:90px; width:50px; height:50px; background:url('../img/boutons/logo_sold.png'); border:none; z-index:993;} .viewinfos {width:100%; height:auto; margin:45px auto 25px auto; text-align:left; color:#4f4f4f; background:#d3d3d3;} .viewinfos .mess-block {width:100%; max-width:100%;} .viewinfos .mess-block .square {position:relative; width:98%; height:auto; margin:0px auto 0px auto; color:#444; line-height:21px; text-align:left; opacity: 0; -webkit-transition: all 0.5s ease 0.2s; -moz-transition: all 0.5s ease 0.2s; -o-transition: all 0.5s ease 0.2s; transition: all 0.5s ease 0.2s; -moz-transform: translate3d(-300px, 0px, 0px); -webkit-transform: translate3d(-300px, 0px, 0px); -o-transform: translate(-300px, 0px); -ms-transform: translate(-300px, 0px); transform: translate3d(-300px, 0px, 0px);} .viewinfos .mess-block .square_inview {opacity: 1; -moz-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate3d(0px, 0px, 0px);} .viewinfos .mess-block .square .caseinfo {float:left; font-size:12px; color:#8a8a8a; background:#eaeaea; padding:10px; margin:10px 10px 10px 0px; width:18%; height:180px; filter : alpha(opacity=80); opacity : 0.8;} .viewinfos .mess-block .square .caseinfo img {margin:2px 5px 0px 0px;} .viewinfos .mess-block .square .caseinfo:hover {filter : alpha(opacity=100); opacity : 1;} @media screen and (min-width:320px) and (max-width:479px) { .listproduit .mess-block .square {width:98.8%; height:400px; float:none; clear:both;} .zone_categ {display:none;} .viewproduit .mess-block .square .detproduit .caseleft {float:none; clear:both; width:100%; margin:0;} .viewproduit .mess-block .square .detproduit .caseleft .imgmin {width:49%; height:120px;} .viewproduit .mess-block .square .detproduit .caseright {float:none; clear:both; width:100%; margin:0;} .viewproduit .mess-block .square .detproduit .caseright .caddie {width:320px; text-align:center;} .viewproduit .mess-block .square .detproduit .caseright .port {position:static; padding-bottom:20px; margin-bottom:20px; border-bottom:solid 1px #e5e5e5;} .viewinfos .mess-block .square .caseinfo {width:100%; height:120px; margin:10px auto 10px auto;} } @media screen and (min-width:480px) and (max-width:539px) { .listproduit .mess-block .square {width:98.8%; height:400px; float:none; clear:both;} .zone_categ {display:none;} .viewproduit .mess-block .square .detproduit .caseleft {float:none; clear:both; width:100%; margin:0;} .viewproduit .mess-block .square .detproduit .caseright {float:none; clear:both; width:100%; margin:0;} .viewproduit .mess-block .square .detproduit .caseright .port {position:static; padding-bottom:20px; margin-bottom:20px; border-bottom:solid 1px #e5e5e5;} .viewproduit .mess-block .square .detproduit .caseright .caddie {width:250px; text-align:center;} .viewinfos .mess-block .square .caseinfo {width:100%; height:120px; margin:10px auto 10px auto;} } @media screen and (min-width:540px) and (max-width:639px) { .listproduit .mess-block .square {width:48.8%; max-width:450px; height:400px;} .viewproduit .mess-block .square .detproduit .caseleft {float:none; clear:both; width:100%; margin:0;} .viewproduit .mess-block .square .detproduit .caseright {float:none; clear:both; width:100%; margin:0;} .viewinfos .mess-block .square .caseinfo {width:100%; height:120px; margin:10px auto 10px auto;} } @media screen and (min-width:640px) and (max-width:799px) { .listproduit .mess-block .square {width:48.8%; max-width:450px; height:400px;} .viewproduit .mess-block .square .detproduit .caseleft .imgmin {width:49%; height:120px;} .viewinfos .mess-block .square .caseinfo {width:100%; height:120px; margin:10px auto 10px auto;} } @media screen and (min-width:800px) and (max-width:959px) { .listproduit .mess-block .square {width:48.8%; max-width:450px;} .viewproduit .mess-block .square .detproduit .caseleft .imgmin {width:49%; height:120px;} .viewinfos .mess-block .square .caseinfo {width:100%; height:120px; margin:10px auto 10px auto;} } @media screen and (min-width:960px) and (max-width:1023px) { .listproduit .mess-block .square {width:31.8%; max-width:450px; height:400px;} .viewinfos .mess-block .square .caseinfo {width:16%; height:330px;} } @media screen and (min-width:1024px) and (max-width:1279px) { .listproduit .mess-block .square {width:31.8%; max-width:450px; height:400px;} .viewinfos .mess-block .square .caseinfo {width:16%; height:320px;} } @media screen and (min-width:1280px) and (max-width:1349px) { .listproduit .mess-block .square {width:31.8%; max-width:450px;} .viewinfos .mess-block .square .caseinfo {width:17%; height:320px;} } @media screen and (min-width:1350px) and (max-width:1549px) { .listproduit .mess-block .square {width:23.8%; max-width:450px;} .viewinfos .mess-block .square .caseinfo {width:17%; height:230px;} } @media screen and (min-width:1550px) { .listproduit .mess-block .square {width:18.8%; max-width:450px;} }