/** * main style sheet * @author knguyen@zestedegenie.com * @creationDate 2014-01-14 * @editDate 2014-01-14 */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, button, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block;} body { line-height: 1;} ol, ul { list-style: none;} blockquote, q { quotes: none;} blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;} table { border-collapse: collapse; border-spacing: 0;} /* migth as well since inherit doesn't work for IE7 and below */ h1, h2, h3, h4, h5, h6, .h2 { font-weight: normal; } strong { font-weight: bold;} em { font-style: italic;} a, button { outline: none;} button::-moz-focus-inner { padding: 0; border: 0 } ::selection { background: #e9f6f9; color: #666;} ::-moz-selection { background: #e9f6f9; color: #666;} html { } body { background: #fff; font-size: 16px; line-height: 1.4; color: #333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; text-align: center;} /* iphone */ @media only screen and (max-device-width: 568px) { body{ -webkit-text-size-adjust: none;} } /* bug chrome */ @-webkit-keyframes body { from { opacity: 1; } to { opacity: 1; } } /* Generated by Font Squirrel (http://www.fontsquirrel.com) on May 21, 2014 */ @font-face { font-family: 'source_sans_prolight'; src: url('fonts/sourcesanspro-light-webfont.eot'); src: url('fonts/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/sourcesanspro-light-webfont.woff') format('woff'), url('fonts/sourcesanspro-light-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'source_sans_proregular'; src: url('fonts/sourcesanspro-regular-webfont.eot'); src: url('fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/sourcesanspro-regular-webfont.woff') format('woff'), url('fonts/sourcesanspro-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'source_sans_prosemibold'; src: url('fonts/sourcesanspro-semibold-webfont.eot'); src: url('fonts/sourcesanspro-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/sourcesanspro-semibold-webfont.woff') format('woff'), url('fonts/sourcesanspro-semibold-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'source_sans_problack'; src: url('fonts/sourcesanspro-black-webfont.eot'); src: url('fonts/sourcesanspro-black-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/sourcesanspro-black-webfont.woff') format('woff'), url('fonts/sourcesanspro-black-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } .del, .ls-achats .price, .ls-subs .price, #foot-nav, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300;} strong { font-weight: bold;} .content h1, .content h3, .content .main-title + .h2, /*#foot-nav,*/ #steps .no, #testimony blockquote p, #testimony cite .city, .testimonies blockquote, .testimonies cite .city, .content h3 small, .price, #article h1 + time, .content .title h2, #selection h2 small, .content .promo h2, .ls-achats time, .ls-subs time, #frm-search label, .quote, #follow h3 { font-family: 'source_sans_proregular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal;} #menu, .bt, button, #testimony cite, .testimonies cite, table th, #faq-q small, .ls-pag, .bloc-info dt, .bloc-addr .name, .content .products article h3, .ls-articles h3, .content h5, .content h4, #steps li h2, #choix > h2, #subnav .sub, #foot-nav h4 { font-family: 'source_sans_prosemibold', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal;} .content h1 strong, .content .main-title strong, #selection h2 strong, h2 strong, h3 strong, .del, .pop-close { font-family: 'source_sans_problack', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal;} /** ******************************************************* * links */ a { color: #57D9F1; text-decoration: none;} a:hover, a:active, a:focus { color: #000;} a.selected, .selected a, .disabled a { cursor: default !important; /*text-decoration: none!important;*/} a.selected:hover, a.selected:active, a.selected:focus, .selected a:hover, .disabled a:hover { cursor: default!important;} a:visited {} /** ******************************************************* * transitions */ .hover a img, #selection article:hover .ti, #head-bar #logo img, .products article img, .conseils article img, .cb img, .cat-menu img, #choix .text, #frm-abonnement .feature, #gallery .tab img, #follow img { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;} /* { -webkit-transition: none 0 linear; -moz-transition: none 0 linear; -o-transition: none 0 linear; transition: none 0 linear;} */ .hover a:hover img, .hover a:focus img, #follow a:hover img, #follow a:focus img, .products article a:hover img, .products article a:focus img, .conseils article a:hover img, .conseils article a:focus img, .cb:hover img, .cb:focus img, .cat-menu a:hover img, .cat-menu a:focus img, #choix .feature:hover .text, #head-bar #logo a:hover img, #head-bar #logo a:focus img { opacity: 0.5;} #gallery .tab a:hover img, #gallery .tab a:focus img, #gallery .tab .selected img { opacity: 0.25;} #pg-acc #head-bar #logo a:hover img, #pg-acc #head-bar #logo a:focus img { opacity: 1;} /** ******************************************************* * class gen */ .hide { position: absolute; margin-left: -9000px!important;} .hidden { visibility: hidden;} .none, .printonly { display: none!important;} .ir { display: block; background-position: 0 0; background-repeat: no-repeat; overflow: hidden; text-indent: -9999px;} .clear { clear: both;} .clearer { display: block!important; width: 100%!important; clear: both!important; height: 0!important; line-height: 0!important; font-size: 1px!important; float: none!important; overflow: hidden; margin: 0!important; padding: 0!important; border: none!important} .selfclear { overflow: hidden;} .center { text-align: center;} .right { text-align: right;} .fl { float: left!important;} .fl-r { float: right!important;} .no-fl { float: none!important;} .no-space { margin-bottom: 0!important;} .space-sml { margin-bottom: 5px;} .space { margin-bottom: 10px;} .spaced { margin-bottom: 15px;} .space-big { margin-bottom: 30px;} .space-bigger { margin-bottom: 45px;} .space-biggest { margin-bottom: 60px;} .space-top { margin-top: 15px;} .space-top-big { margin-top: 30px;} .vbottom img { vertical-align: bottom;} .sup, sup { font-size: 0.75em; position: relative; top: -4px;} .nobr { white-space: nowrap;} .spinner { margin: 0!important; padding: 0!important;} .rel { position: relative;} /** * jquery-ui */ body #ui-datepicker-div { display: none;} body .ui-widget { font-size: 1em;} body .ui-dialog { text-align: left;} body .ui-dialog .ui-dialog-content { padding-top: 20px !important;} #cboxLoadedContent { text-align: left;} #tip { display: none; position: absolute; max-width: 300px; padding: 2px 10px; font-size: 11px; background: #222; color: #fff; white-space: nowrap; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 5px #222; -webkit-box-shadow: 0 1px 5px #222; box-shadow: 0 1px 5px #222; z-index: 9999;} .rgba #tip { background: rgba(0,0,0,.75);} #overlay { position:fixed; top: 0; left: 0; z-index:9999; width:100%; height:100%; background:url(images/overlay.png) repeat 0 0;} .browsehappy { padding: 5px;} .browsehappy a { color: #cb4343;} #pop { position: fixed; z-index: 10000; top: 50%; left: 50%; min-height: 100px; width: 570px; margin: -100px 0 0 -305px; padding: 20px; background: #fff;} #pop.absolute { position: absolute; z-index: 10000; top: 20px; margin-top: 0;} #pop .pop-close { position: absolute; top: 10px; right: 10px;} #pop .submit { margin-bottom: 0;} /** ******************************************************* * forms */ fieldset { margin-bottom: 20px;} form input, form select, form textarea, button { font-size: 1em;} form div { margin-bottom: 10px;} input[type=text], input[type=password], input[type=email], textarea { width: 250px; height: 20px; padding: 4px 10px 4px; background: #fafafa; border: 1px solid #ddd; outline: none; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; font-family: 'source_sans_proregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;} textarea { height: 150px; overflow: auto; vertical-align: top;} select { max-width: 250px;} input[type=file] { font-size: 12px;} input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, textarea:focus { border-color: #57D9F1; } label { font-size: 14px;} form .label-in { color: #999;} input.sml { width: 60px;} input.med { width: 125px;} input.i-date { width: 130px; background-image: url(../img/icn-cal.png); background-position: right center; background-repeat: no-repeat;} input.disabled { background-color: #ddd;} .i-multi {} .i-multi p, .i-multi span, .i-multi input[type=text], .i-multi input[type=password], .i-multi input[type=email], .i-multi select { margin-right: 15px;} .i-multi .last { margin-right: 0;} .i-info { color: #ccc; font-size: 11px; line-height: 1; font-style: italic;} .i-lg {} .i-lg label, .i-lg .label { float: left; width: 100px; margin: 8px 0 0; line-height: 1; text-align: left; font-size: 14px; } .i-lg .dbl label, .i-lg .dbl .label { margin-top: 0;} .i-lg input[type=text], .i-lg input[type=password], .i-lg input[type=email], .i-lg input[type=file], .i-lg textarea, .i-lg select { float: left; margin-left: 10px;} .i-lg .submit, .inside { margin-left: 110px;} .i-lg .i-select label, .i-lg .i-file label { margin-top: 4px;} .i-lg textarea { width: 325px;} .i-lg .i-xtra { float: left; margin: 6px 0 0 5px;} .i-lg .i-select .i-xtra { margin-top: 3px;} .i-lg .i-checkbox .i-multi, .i-lg .i-radio .i-multi { float: left; margin-left: 10px; margin-bottom: 0;} .i-lg .i-checkbox .label, .i-lg .i-radio .label { margin-top: 0;} .i-lg .i-checkbox label, .i-lg .i-radio label { display: block; float: none; width: auto; margin: 0 0 0 25px; font-weight: normal;} .i-lg input[type=checkbox], .i-lg input[type=radio] { float: left; width: auto; margin: 0 0 0;} .i-hg {} .i-hg label, .i-hg .label { display: block; width: auto; margin-bottom: 2px; line-height: 1.2; float: none; text-align: left;} .i-hg input[type=text], .i-hg input[type=password], .i-hg input[type=email], .i-hg input[type=file], .i-hg textarea, .i-hg select, .i-hg .i-checkbox p, .i-hg .i-radio p { margin-left: 0;} .i-hg .i-checkbox label, .i-hg .i-radio label { display: inline; font-weight: normal;} .i-hg textarea { max-width: 98%;} .i-hg .col2 input[type=text], .i-hg .col2 input[type=password], .i-hg .col2 input[type=email], .i-hg .col2 select, .i-hg .col3 input[type=text], .i-hg .col3 input[type=password], .i-hg .col3 input[type=email], .i-hg .col3 select { max-width: 95%;} .submit { margin: 15px 0 30px;} .submit button, .submit a { margin-right: 15px; vertical-align: middle;} .submit.center button, .submit.center a { margin-left: 7px; margin-right: 7px;} .submit a { color: #999; font-size: 14px;} .submit .bt, .submit button span span { font-size: 16px; line-height: 1; color: #f8981d; text-transform: none;} .submit a:hover, .submit a:focus { color: #f8981d;} button { display: inline; background: none; cursor: pointer; line-height: 1;} button>span { display: inline-block;} button span span, .bt { display: inline-block; padding: 7px 15px; background: transparent; color: #f8981d; font-size: 18px; white-space: nowrap; border: 1px solid #f8981d; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;} button:hover span span, button:focus span span, .bt.selected, .bt:hover, .bt:focus { background: #ffe7d0; color: #f8981d;} .bt.sml { padding: 5px 10px; font-size: 12px;} .bt.med { padding: 7px 10px; font-size: 16px;} form .i-text button span span { padding: 5px 15px;} .bt.sec, .content .bt.sec { border-color: #a4a4a4; color: #a4a4a4;} .bt.alt, .content .bt.alt { border-color: #e70700; color: #e70700;} .bt.invert, .content .bt.invert { border-color: #fff; color: #fff;} .rgba .bt.sec:hover, .rgba .bt.sec:focus, .rgba .content .bt.sec:hover, .rgba .content .bt.sec:focus, .rgba .bt.selected { background-color: rgba(0, 0, 0, 0.05);} .bt.sec:hover, .bt.sec:focus, .bt.selected, .content .bt.sec:hover, .content .bt.sec:focus { background: #f2f2f2; color: #a4a4a4;} .bt.invert:hover, .bt.invert:focus, .content .bt.invert:hover, .content .bt.invert:focus { background-color: rgba(255, 255, 255, 0.3);} .bt.alt:hover, .bt.alt:focus, .content .bt.alt:hover, .content .bt.alt:focus { background: #fde6e5; color: #e70700;} .msgbox { position: relative; margin-bottom: 15px; padding: 0 20px 12px 20px; color: #666; font-size: 13px; line-height: 1.4; border: 1px solid #666; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;} .msgbox.fixed { position: fixed; left: 0; right: 0; top: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; text-align: center;} .msgbox p, .msgbox ul { padding: 12px 0 0;} .msgbox ul { margin-left: 20px; list-style-type: disc;} .msgbox label { display: block; float: none; margin: 0;} .msgbox .close { position: absolute; top: 2px; right: 2px; display: none;} .msgbox.success { background: #008000; border-color: #869c74; color: #fff;} .msgbox.errors, .browsehappy { background: #e70700; border-color: #cb4343; color: #fff; } /** ******************************************************* * bts */ .msgbox .close, .td-del button, #bt-search span, #bt-cart span, #testimony > p a, .bt-nav-mobile, #tools .nav a { display: block; width: 18px; height: 18px; background: url(../img/icons.png) 0 0 no-repeat; text-indent: -9999px;} #gallery a.selected:after { display: block; width: 18px; height: 18px; background: url(../img/icons.png) 0 0 no-repeat; text-indent: -9999px;} .success .close { background-position: 0 0;} .errors .close, .td-del button { background-position: -18px 0;} #bt-search span { background-position: -18px -18px;} #bt-cart span { background-position: -54px 0;} #tools .nav .prev, #testimony .prev { background-position: 0 -36px;} #tools .nav .next, #testimony .next { background-position: -36px -36px;} .bt-nav-mobile { background-position: -72px -36px;} #nav-sec-menu { background-position: -108px -36px;} #gallery a.selected:after { background-position: -72px 0;} /* iphone 4 */ @media only screen and (-webkit-min-device-pixel-ratio: 2){ .msgbox .close, .td-del button { background-image: url(../img/icons@2x.png); background-size: 233px 72px;} } /** * cols */ #wrapper { width: 900px; margin: 0 auto; text-align: left;} .container { width: 900px; margin: 0 auto; margin-bottom: -1px; padding: 0 30px 1px;} .container .container { width: auto;} /** ******************************************************* * header */ #head { margin-bottom: 50px;} #head-top { margin: 0 -10px; padding: 10px 0; font-size: 13px;} #head-top li { float: left; display: inline; /*margin-right: 12px;*/ padding: 0 10px; border-right: 1px solid #a4a4a4;} #head-top a { display: inline; color: #a4a4a4; border: 1px solid #fff; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;} #head-top a:hover, #head-top a:focus { color: #57D9F1; } #head-top .selected, #head-top .selected:hover, #head-top .selected:focus { color: #a4a4a4; padding: 2px 10px; border-color: #a4a4a4;} #head-top .last { border-right: none;} #site-select { float: left;} #sec-nav { float: right;} #sec-nav ul { float: left;} #sec-nav > img { float: right;} #head-bar { position: relative; padding: 15px 0; background-color: #e9f6f9;} #head-bar a { display: inline-block; color: #999; line-height: 1;} #head-bar #logo { float: left;} #pg-acc #head-bar #logo a:hover, #pg-acc #head-bar #logo a:focus { cursor: default;} #head-bar .bt-nav-mobile, .nav-mobile { display: none;} #mobile-menu-sec img { display: none;} #menu { float: right; margin-top: 59px; font-size: 18px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;} .en #menu { margin-top: 54px;} #menu li { display: inline-block; margin-left: 19px; vertical-align: middle;} .en #menu li { margin-left: 17px;} #menu a:hover, #menu a:focus { color: #000;} #menu .selected, #menu .selected:hover, #menu .selected:focus { border-bottom: 1px dotted #999; color: #000;} #bt-search { display: inline-block; padding: 5px;} #bt-search span { display: inline-block;} #bt-search.selected, #bt-search.selected:hover, #bt-search.selected:focus, #bt-search:hover span, #bt-search:focus span { background-position: 0 -18px; border-bottom: none;} #bt-search.selected span { background-position: 0 -18px;} #bt-search.selected:hover span, #bt-search.selected:focus span { background-position: -18px -18px; cursor: pointer} #bt-cart {} #bt-cart span { display: inline-block;} #bt-cart:hover span, #bt-cart:focus span { background-position: -36px 0; border-bottom: none;} #bt-cart em { position: relative; top: 3px; font-size: 12px; font-style: normal; color: #000;} #frm-search { position: absolute; left: 0; right: 0; bottom: -74px; z-index: 10; padding: 17px 30px; background-color: #57D9F1; color: #fff; text-align: right;} #frm-search .i-text { margin-bottom: 0;} #frm-search label { margin-right: 10px; font-size: 28px; line-height: 1; text-transform: uppercase; vertical-align: middle;} #frm-search input { height: 30px; font-size: 18px; vertical-align: middle; background: #57D9F1; border-color: #eee; color: #fff; outline: none;} #frm-search input:focus { border-color: #fff;} #frm-search button span span { padding: 9px 15px 10px; vertical-align: middle; background-color: #fff; border-color: #fff; color: #a4a4a4;} #frm-search button:hover span span, #frm-search button:focus span span { background-color: #f2f2f2; color: #a4a4a4;} #frm-search-page { margin-bottom: 30px;} #frm-search-page input { height: 30px; font-size: 18px; vertical-align: middle;} #frm-search-page button span span { padding: 10px 15px; vertical-align: middle;} .search-nb { float: right; margin-top: 11px; font-size: 14px; color: #666;} #subnav { margin: -5px 0 30px 0; padding: 0 0 15px; font-size: 15px; border-bottom: 1px solid #ccc; } #subnav .subsub { display: none;} #subnav > ul { position: relative; width: 100%;} #subnav li { display: inline-block; z-index: 1;} #subnav a { display: inline-block; margin: 0 30px 0 0; color: #666; text-transform: uppercase; line-height: 1.2;} #subnav a:hover, #subnav a:focus { color: #000;} .main-title + #subnav, .main-title + .h2 + #subnav { margin: 30px 0 30px; text-align: center;} .main-title + #subnav a, .main-title + .h2 + #subnav a { margin: 0 15px;} #main { display: block; margin: -30px 0 15px; border-top: 5px solid;} #main img { display: block;} .bt-nav-mobile { position: absolute; right: 68px; top: 50%; width: 36px; height: 36px; margin-top: -24px; background-color: #57D9F1; border: 6px solid #57D9F1;} #nav-sec-menu { right: 15px;} .nav-mobile { padding: 15px; background-color: #57D9F1;} .nav-mobile a { display: block; color: #fff; font-size: 20px;} .nav-mobile a:hover, .nav-mobile a:focus { color: #000;} /** ******************************************************* * content */ .content { margin-bottom: -1px; padding: 0 0 30px;} #pg-acc .content { padding-bottom: 1px;} .content h1, .main-title { margin-bottom: 30px; font-size: 38px; line-height: 1; color: #000;} .content h2, .content .h2 { margin-bottom: 15px; font-size: 32px; line-height: 1.1; color: #000;} .content h3, #pop h3 { margin-bottom: 15px; font-size: 24px; line-height: 1.1; color: #000;} .content h4 { margin-bottom: 5px; font-size: 18px; line-height: 1.4; color: #333;} h4 + h4 { margin-top: 15px;} .content .text p + h2, .content .text ul + h2, .content .text div + h2, .content .text p + h3, .content .text ul + h3, .content .text div + h3, .content .text p + h4, .content .text ul + h4, .content .text div + h4 { margin-top: 30px;} .content .text img + h3 { margin-top: 10px;} .content h3 small { text-transform: none; font-size: 14px; font-style: italic; color: #999;} .content h2.space-sml { margin-bottom: 5px;} .content h2.space { margin-bottom: 10px;} .content h2 a { display: inline-block; color: inherit; border-bottom: 1px dotted #ccc; color: #333;} .content h2 a:hover, .content h2 a:focus { color: #999;} .content .main-title { margin-bottom: 0; font-size: 42px; text-align: center;} .main-title + .h2 { font-size: 24px; text-align: center;} img { max-width: 100%; /*height: auto;*/} .text { margin-bottom: 40px;} .text.spaced { margin-bottom: 15px;} .text.space-bigger { margin-bottom: 45px;} .text.space-biggest { margin-bottom: 60px;} .text p, .text ul, .text ol, .text dl { margin-bottom: 20px; line-height: 1.5;} .text ul, .ls { list-style-type: disc; margin-left: 20px; line-height: 1.3;} .text ul li, .ls li { margin-bottom: 8px;} .text ul ul { margin-top: 8px; margin-bottom: 0; list-style-type: circle;} .text ol { list-style-type: decimal; margin-left: 20px;} .text ol[type=i] { list-style-type: lower-roman;} .text ol[type=a] { list-style-type: lower-alpha;} .text .no-ls { list-style-type: none; margin-left: 0;} .img-bloc { display: block; margin-bottom: 12px;} .med { font-size: 18px; line-height: 1.2;} .info, label em { font-size: 12px; font-style: italic; color: #666;} .split { margin-bottom: 45px; padding-bottom: 15px; border-bottom: 1px solid #ccc;} .split-sml { margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid #ccc;} .feature .split { border-bottom-color: #fff;} .split-v { margin-bottom: 30px; padding-bottom: 0; background: url(../img/split-v.png) 50% 0 repeat-y;} img.fl { margin: 0 15px 15px 0;} img.fl-r { margin: 0 0 15px 15px;} .bloc { margin-bottom: 30px;} .bloc .submit { margin-bottom: 15px;} .intro { margin-bottom: 15px; font-size: 15px;} .intro p, .intro ul { line-height: 1.2;} .content .subtitle { margin: -25px 0 30px; font-size: 18px; color: #000; /*text-transform: uppercase;*/} .title-back { float: right; margin-top: 7px;} p.sml, span.sml { display: inline-block; font-size: 12px;} ul.med { font-size: 14px;} /* colors */ .fam table thead, #selection .color1 .ti, #selection .color1 .desc, .fam.feature, .fam #steps .no, #tools.fam, #choix .feature.fam h2, #frm-abonnement .feature.fam header { background-color: #41ae2e;} .rgba #choix .feature.fam h2, #frm-abonnement .feature.fam { background-color: rgba(65, 174, 46, 0.5);} .fam .products a h3, .fam .bt, .fam .bt:hover, .fam .bt:focus, .fam .main-title, .fam #subnav .selected, .fam a h4, .fam .content .main-title, .fam #steps h3, .fam .color, .fam .cat-head .cat-menu .selected h4, .fam #gallery .selected a { color: #41ae2e;} .fam table, .fam .bt, .fam .ls-pag a, .fam #main { border-color: #41ae2e;} .fam table .alt, .fam .bt:hover, .fam .bt:focus, .fam button:hover span .bt, .fam button:focus span .bt { background-color: #f1faed;} /* garderie */ .pro table thead, #selection .color2 .ti, #selection .color2 .desc, .pro.feature, .pro #steps .no, #tools.pro, #choix .feature.pro h2, #frm-abonnement .feature.pro header { background-color: #0092d7;} .rgba #choix .feature.pro h2, .rgba #frm-abonnement .feature.pro { background-color: rgba(0, 146, 215, 0.5);} .pro .products a h3, .pro .bt, .pro .bt:hover, .pro .bt:focus, .pro .main-title, .pro #subnav .selected, .pro a h4, .pro .content .main-title, .pro #steps h3, .pro .color, .pro .cat-head .cat-menu .selected h4, .pro #gallery .selected a { color: #0092d7;} .pro table, .pro .bt, .pro #main { border-color: #0092d7;} .pro table .alt, .pro .bt:hover, .pro .bt:focus, .pro button:hover span .bt, .pro button:focus span .bt { background-color: #ebf5fa;} .trotti table thead, #selection .color2 .ti, #selection .color2 .desc, .trotti.feature, .trotti #steps .no, #tools.trotti { background-color: #f8981d;} .trotti .products a h3, .trotti .bt, .trotti .bt:hover, .trotti .bt:focus, .trotti .main-title, .trotti #subnav .selected, .trotti a h4, .trotti .content .main-title, .trotti #steps h3, h2.color, .trotti .color, .trotti .cat-head .cat-menu .selected h4, .trotti #gallery .selected a { color: #f8981d;} .trotti table, .trotti .bt, .trotti #main { border-color: #f8981d;} .trotti table .alt, .trotti .bt:hover, .trotti .bt:focus, .trotti button:hover span .bt, .trotti button:focus span .bt { background-color: #ffe7d0;} .zone .products a h3, .zone .bt, .zone .bt:hover, .zone .bt:focus, .zone .center a { color: #fd0087;} .zone .bt { border-color: #fd0087;} .zone .bt:hover, .zone .bt:focus { background-color: #ffe5f3;} /* hover */ .color1 a:hover, .color1 a:focus, .color2 a:hover, .color2 a:focus, .color1 a:hover h3, .color1 a:focus h3, .fam a:hover h4, .fam a:focus h4, .pro a:hover h4, .pro a:focus h4 .fam .products a:hover h3, .fam .products a:focus h3, .pro .products a:hover h3, .pro .products a:focus h3, .zone .center a:hover, .zone .center a:focus { color: #000;} .title { position: relative; margin-bottom: 30px; padding: 45px 25px 10px;} .title:after { content: ''; display: block; position: absolute; left: 17px; bottom: -13px; width: 26px; height: 13px;} .title h2 { margin-bottom: 0; font-size: 38px; color: #fff; text-transform: none;} .title.sml { padding: 20px 25px 10px;} .title.sml h2 { font-size: 24px;} .title h2 a { color: #fff;} .color1 .title:after { background: url(../img/bg-ti-1.png) 0 0 no-repeat;} .color2 .title:after { background: url(../img/bg-ti-2.png) 0 0 no-repeat;} .promo { padding: 30px 0; background-color: #f5f5f5;} .promo .container { text-align: center;} .promo h2 { margin-bottom: 30px; text-transform: none;} .ls-details, .text .ls-details { list-style-type: none; margin-left: 0;} .ls-details > li { margin-bottom: 10px; font-size: 14px;} .ls-details h4 { line-height: 1.1;} table { width: 100%; border-bottom: 2px solid #57D9F1;} table.receipt, .receipt table { border-bottom: none;} table.receipt td, .receipt table td { padding: 0;} .receipt .tbl td { padding: 6px 15px;} table.sml { font-size: 14px;} table.sml thead { font-size: 14px; text-transform: none;} table thead { background-color: #57D9F1; color: #fff; font-size: 15px;} table tfoot { background-color: #f8981d; color: #fff;} table tfoot .alt { background-color: #ffe7d0; color: #666;} table td, table th { padding: 6px 15px; vertical-align: top;} table .alt { background-color: #e9f6f9;} table small, table .sml { font-size: 13px;} .tbl-achat { margin: 10px 0 15px; border-bottom-width: 1px; font-size: 12px; border-bottom: none;} .tbl-achat thead { font-size: 13px; background-color: transparent; color: #000;} .tbl-achat th, .tbl-achat td { padding: 4px 0; line-height: 1; border-bottom: 1px dotted #ccc;} .ls-pag { margin-bottom: 30px; text-align: center; font-size: 16px;} .ls-pag li { display: inline;} .ls-pag a { display: inline-block; padding: 5px 12px; border: 1px solid #a4a4a4; color: #a4a4a4; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;} .ls-pag a:hover, .ls-pag a:focus, .ls-pag .selected { background-color: #f2f2f2;} .feature { margin-bottom: 30px; padding: 15px 15px 1px; background-color: #f8981d; color: #fff;} .rgba .feature h2, .rgba .feature h3, .rgba .feature h4 { color: rgba(255, 255, 255, 1);} .rgba .feature h5 { color: rgba(255, 255, 255, 0.7);} .rgba .feature p, .rgba .feature ul { color: rgba(255, 255, 255, 0.9);} .feature.invert .col2 { float: right;} .feature.sml { font-size: 14px;} .feature h2 + h5, .feature h4 + h5 { margin: -15px 0 25px; font-size: 14px; /*text-transform: uppercase;*/} .feature h5 { /*text-transform: uppercase;*/ font-size: 14px;} .feature h4 + h5 { margin-top: 0;} .feature p + h5 { margin-top: 8px;} .content .feature .bt { border-color: #fff; color: #fff;} .rgba .feature .bt.sec:hover, .rgba .feature .bt.sec:focus, .rgba .content .feature .bt.sec:hover, .rgba .content .feature .bt.sec:focus, .rgba .feature button:focus .bt.sec { background-color: rgba(255, 255, 255, 0.2); color: #fff;} .rgba .feature .bt.selected, .rgba .content .feature .bt.selected:hover, .rgba .content .feature .bt.selected:focus { background-color: #fff; color: #666;} .feature .text { margin-bottom: 15px;} .feature .submit { margin-bottom: 0;} .feature.alt { background-color: #aaa;} .feature.success { background-color: #37a603;} .feature.errors { background-color: #e70700;} #sub-menu { margin-top: -15px; padding-bottom: 15px; border-bottom: 1px solid #ccc;} .cat-head { margin-bottom: 30px;} .cat-head .h2 { font-size: 24px;} .cat-head .cat-menu { margin: 40px 0 0;} .cat-head .cat-menu h4 { font-size: 14px;} .cat-head .cat-menu p { display: none;} .cat-head .cat-menu a h4 { color: #707070;} .cat-head .cat-menu .img { min-height: 60px;} .cat-head .cat-menu img { width: auto; max-height: 50px;} .cat-head .cat-menu .high img { max-height: 60px;} .cat-head .cat-menu .img:after { height: 60px;} .cat-head .cat-img { width: auto; max-height: 175px; height: auto;} .cat-menu, .text .cat-menu { margin: 15px 0 30px; text-align: center; font-size: 14px;} .fam .cat-menu { margin-bottom: 15px;} .cat-menu p { margin-bottom: 0; line-height: 1.4;} .cat-menu .img { display: block; min-height: 73px; margin-bottom: 5px;} .cat-menu .img:after { content: ""; display: inline-block; height: 102px;} .cat-menu .img img { vertical-align: bottom;} .cat-menu h4 { line-height: 1;} h1.h2 { font-size: 38px;} /** ******************************************************* * pages */ /* home */ #steps { margin-bottom: 30px;} #steps > h2 { position: relative; z-index: 5; margin-bottom: 30px; text-align: center; color: #f8981d;} #steps ol { margin-bottom: 0; background: url(../img/bg-steps.png) center 30px no-repeat;} #steps li { position: relative; text-align: center;} #steps .no { display: inline-block; width: 70px; height: 70px; margin-bottom: 12px; line-height: 72px; font-size: 45px; color: #fff; background-color: #57D9F1; text-align: center; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;} #steps .step1 { position: absolute; top: -107px; left: -38px;} #steps .step2 { position: absolute; top: -15px; right: -10px;} #steps .step3 { position: absolute; top: -144px; right: -5px;} #steps p { margin-bottom: 12px;} #steps li h2 { margin-bottom: 0; color: #57D9F1; text-transform: uppercase; font-size: 20px;} #steps img { margin-bottom: 15px;} .en #steps > h2 { margin-left: 125px; margin-right: 125px; font-size: 28px;} .en #steps .step1 { top: -63px; z-index: 1;} .en #steps .step3 { top: -102px; right: -30px; z-index: 1;} .fam #steps ol, .pro #steps ol { background: transparent; font-size: 14px;} #choix { font-size: 14px;} #choix > h2 { margin-top: -30px; color: #f8981d; font-size: 20px; text-transform: uppercase;} #choix .feature { position: relative; text-align: center;} #choix .feature h2 { position: absolute; left: 0; right: 0; top: 0; padding: 10px 0 7px; text-align: center; font-size: 18px;} #choix .feature h2 strong { font-size: 32px; text-transform: uppercase; letter-spacing: 0.3em;} #choix .feature p { margin-bottom: 0; } #choix .feature .text { margin-bottom: 10px;} .box-img { display: block; max-width: inherit; margin: -15px 0 10px -15px;} #testimony { position: relative; margin: 60px 0; padding: 45px 120px; background-color: #999; color: #fff;} .en #testimony { background-color: #1989c8;} #testimony > img { position: absolute; left: -40px; bottom: 0;} .en #testimony > img { position: absolute; left: -90px; bottom: 0;} #testimony blockquote:before { content: ''; display: block; width: 33px; height: 28px; margin: 0 auto 15px; background: url(../img/quote2.png) 0 0 no-repeat;} #testimony blockquote p { font-size: 26px; line-height: 1.1;} #testimony cite { display: block; margin-top: 20px; font-size: 18px;} #testimony cite:before { content: '— ';} #testimony ul img { float: left;} #testimonies { position: relative; width: 660px; overflow: hidden;} #testimonies ul { width: 9999px; cursor: pointer;} #testimonies ul:hover p { opacity: 0.8;} #testimonies li { float: left; width: 660px;} #testimony > p { position: absolute; top: 20px; right: 20px;} #testimony > p a { display: inline-block; width: 36px; height: 36px; background-color: #fff; border: 1px solid #a4a4a4; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;} #testimony > p a:hover, #testimony > p a:focus { background-color: #f2f2f2;} #testimony > p .disabled, #testimony > p .disabled:hover, #testimony > p .disabled:focus { cursor: default; background-color: #ccc;} /* produits */ .products {} .products.split { padding-bottom: 15px;} .products.split.no-t { padding-bottom: 30px;} .products article { margin-bottom: 30px; text-align: center;} .products.no-t article { margin-bottom: 15px;} .bottom .products article { margin-bottom: 0;} .products article h3 { margin-bottom: 0; font-size: 16px;} .products a h3 { color: #57D9F1;} .products .img { position: relative; display: block; margin-bottom: 10px;} .products .img:after { content: ''; display: inline-block; height: 198px;} .products img { max-height: 198px; vertical-align: bottom;} .products .price, .conseils .price { font-size: 14px; color: #999;} .products .price a, .conseils .price a { color: #999;} .products strong { font-size: 14px; color: #666;} .products a:hover h3, .products a:focus h3, .products .price a:hover, .products .price a:focus, .conseils .price a:hover, .conseils .price a:focus { color: #000;} .products.prod3 .img:after { content: ''; display: inline-block; height: 277px;} .products.prod3 img { max-height: 277px; vertical-align: bottom;} .products.games article h3 { font-size: 14px;} /*.products.games .img:after { height: 198px;}*/ /*.products.games img { max-height: 198px;}*/ .products.auto .img:after { display: none;} .products.border .img { height: 196px; border: 1px dotted #ccc; text-align: center;} .products.border img { display: inline-block; max-height: 196px; vertical-align: middle;} .products.border .img:after { height: 196px; vertical-align: middle;} .oos { position: absolute; left: 0; bottom: 0; height: auto;} .product {} .product .prod-main .price { margin-bottom: 15px; font-size: 28px;} .product-img { position: relative; float: left; width: 245px; height: 245px; margin-bottom: 30px;} .prod-main { margin-left: 275px;} .prod-main.no-img { margin-left: 0;} .product .desc { margin-bottom: 30px;} .updated { background-color: #e9f6f9; color: #000;} .ls-themes { margin-top: 2px; line-height: 1.2;} /*.ls-themes li:before { content: '— ';}*/ #frm-add-cart { display: inline-block; margin-bottom: 30px;} #frm-add-cart label { font-size: 14px;} #frm-add-cart .price { float: left; margin-top: 20px; padding: 5px 0;} #frm-add-cart .price.last { margin-left: 35px; padding-left: 35px; border-left: 1px solid #000;} #frm-add-cart .price > small { display: block; font-size: 14px; line-height: 1;} #frm-add-cart .price > span { display: block; margin-bottom: 10px;} #frm-add-cart .price > span small { font-size: 14px;} .sub-product { margin: 0 0 15px 0; font-size: 14px;} .sub-product.no-img { margin-bottom: -15px;} .sub-product img { float: left;} .sub-product p { line-height: 1.4;} .sub-product div { margin-left: 140px;} .sub-product.no-img h3, .sub-product.no-img h4, .sub-product.no-img div { margin-left: 0;} .sub-product h3 + .info { margin-top: -15px;} .box-ziraf-plus { border-top: 1px solid #ccc;} .box-ziraf-plus h2 { padding-top: 30px;} #gallery { margin-bottom: 45px;} #gallery section { position: relative; margin-bottom: 60px;} #gallery section img { display: block;} #gallery section p { margin-top: 8px;} #gallery section a { position: absolute; top: 50%; display: block; width: 68px; height: 68px; margin-top: -34px; background: url(../img/prod/arrows.png) 0 0 no-repeat; text-indent: -9999px;} #gallery section .prev { left: -34px;} #gallery section .next { right: -34px; background-position: right 0;} /*#gallery section .prev.inactive, #gallery section .prev:hover { background-position: 0 -68px;} #gallery section .next.inactive, #gallery section .next:hover { background-position: right -68px;}*/ #gallery nav { border-bottom: 1px solid #ccc;} #gallery nav li { position: relative; float: left; width: 40%; height: 60px; margin-bottom: 0; vertical-align: bottom;} #gallery nav .selected { position: relative; bottom: -1px; border-bottom: 1px solid #fff; border-top: 1px solid #ccc; border-right: 1px solid #ccc;} #gallery nav img { position: absolute; bottom: 0; left: 15px;} #gallery nav span { display: block; margin-left: 115px; margin-right: 15px; padding-top: 20px;} .en #gallery nav span { padding-top: 10px;} #gallery nav a { display: block; height: 100%; color: #000;} #gallery .large { float: right; width: 59%;} #gallery .selected.large { border-right: none; border-left: 1px solid #ccc;} #gallery .large span { margin-left: 260px; padding-top: 10px;} #gallery .tab { display: none; padding-top: 30px;} #gallery > .active { display: block;} #gallery .tab a { position: relative; margin-bottom: 20px;} #gallery a.selected:after { content: ''; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;} #faq-q { margin: 0 0 30px 0; padding-bottom: 30px; border-bottom: 1px solid #ccc;} #faq-q li { margin-bottom: 3px; font-size: 16px;} #faq-q small { float: left; min-width: 40px; margin-top: 1px; font-size: 20px; line-height: 1; text-align: center;} #faq-q a { display: block; margin-left: 40px; color: #999;} #faq-q a:hover, #faq-q a:focus { color: #000;} #faq-a {} #faq-a article { margin-bottom: 45px;} .kit { float: right; margin: 0 0 30px 30px;} .outils-pres { float: right; margin: 0 0 30px 30px;} .box-plus { position: relative;} .box-plus img { position: absolute; right: 0; bottom: -38px;} /* abonnement */ .abo .content h1 { padding-top: 70px;} .img-abonnement { float: left; margin: -10px 30px 0 0;} .img-panier { float: left; margin-right: 15px;} #frm-abonnement {} #frm-abonnement .price { margin: 33px 0 0; font-size: 30px; line-height: 1;} #frm-abonnement div { margin-bottom: auto;} #frm-abonnement input[type=radio] { display: none;} #frm-abonnement .split { margin-bottom: 20px; padding-bottom: 1px;} #frm-abonnement button { margin-top: 31px;} #frm-abonnement header { margin: -15px -15px 0 -15px; padding: 15px 15px 15px;} #frm-abonnement header h5 { margin-bottom: 0;} #frm-abonnement .feature { margin-bottom: 30px;} .feature.abonnement img { float: right; margin: -15px 0 -30px;} .feature.abonnement h2, #frm-abonnement h3 { margin-bottom: 5px;} .feature.abonnement h4 { margin-bottom: 0;} .feature.abonnement p { margin-bottom: 0;} .feature.abonnement .submit { margin-bottom: 15px; clear: right;} #sub-sec .feature.fam header p { margin-right: 235px;} #sub-sec .feature.fam img { margin-top: -90px;} #frm-abonnement .inactive .feature { opacity: 0.5; background-image: none;} #frm-abonnement .inactive .feature:hover { opacity: 1;} .en #date-start, .en #date-end { text-transform: capitalize;} /* aide */ .icons {} .icons h3 small { display: block;} .icons h3 { margin-left: 68px; min-height: 48px;} .icon { float: left; margin-top: 2px;} .cards { margin-top: 75px;} #bons-de-commande {} #bons-de-commande ul { width: 100%; overflow: hidden; margin-bottom: 25px;} #bons-de-commande li { /*float: left; margin-right: 10px; padding-right: 10px;*/ font-size: 14px;/* border-right: 1px solid #ccc;*/} .rgba #bons-de-commande li { border-color: rgba(255, 255, 255, 0.7);} #bons-de-commande .last { margin-right: 0; padding-right: 0; border-right: none;} #bons-de-commande h4 { line-height: 1.2;} #bons-de-commande a { color: #fff;} .rgba #bons-de-commande a { color: rgba(255, 255, 255, 0.7);} #bons-de-commande a:hover, #bons-de-commande a:focus { color: #000;} /* entreprise */ .highlights { margin-bottom: 40px; padding: 25px 30px 15px;} .highlights h2 { text-align: center;} .highlights li { margin-bottom: 20px;} .highlights h5 { float: left; margin-top: -5px; font-size: 20px;} .highlights p { line-height: 1.4; margin: 0 0 8px 0;} .rgba .highlights h5 { color: #fff;} .quote { float: right; max-width: 33%; margin: 0 0 30px 30px; padding: 15px 0 15px 30px; font-size: 24px; border-left: 1px solid #ddd;} p + .quote { margin-top: 10px;} .quote:before { content: ''; display: block; width: 33px; height: 28px; margin: 0 auto 15px; background: url(../img/quote.png) 0 0 no-repeat;} .quote p { margin-bottom: 0; line-height: 1.4;} .team { display: block; margin-bottom: 10px;} /* temoignages */ .testimonies {} .testimonies blockquote { margin: 0 120px 30px; font-size: 20px; /*padding-bottom: 30px; border-bottom: 1px solid #eee;*/} .testimonies blockquote:before { content: ''; display: block; width: 33px; height: 28px; margin: 0 auto 15px; background: url(../img/quote.png) 0 0 no-repeat;} .testimonies cite { display: block; margin-top: 15px; font-size: 16px; text-transform: uppercase; /*color: #57D9F1;*/} .testimonies cite:before { content: '— ';} .testimonies cite .city { text-transform: none;} /* jeux en ligne */ #game { width: 900px; height: 600px; width: 898px; height: 599px; margin: 0 auto 30px; border: 1px dotted #ccc;} #game-en { width: 648px; height: 792px; margin: 0 auto 30px;} /* conseils */ .content .conseils { margin-bottom: 15px;} .conseils article { margin-bottom: 15px; font-size: 14px;} .conseils .jeu { margin-top: -40px;} .conseils article img { display: block; margin-bottom: 15px;} .conseils a h3 { margin-bottom: 2px; color: #e70700;} .conseils a:hover h3, .conseils a:focus h3 { color: #000;} .conseils article > p {/* margin-bottom: 0;*/} .conseils .price { margin-bottom: 12px; line-height: 1.2;} .tags { font-size: 12px; text-transform: uppercase;} .tags.menu { margin: -20px 0 30px;} .conseils a + .tags { margin: -8px 0 10px;} .tags a { position: relative; display: inline-block; margin-right: 5px; padding: 2px 6px 0px 17px; font-size: 11px; color: #666; border: 1px solid #ccc; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;} .tags.menu a { margin-bottom: 5px; padding-top: 4px; padding-bottom: 2px; font-size: 12px;} .tags a:before { position: absolute; content: ''; left: 5px; top: 50%; margin-top: -4px; width: 5px; height: 5px; border: 1px solid #ccc; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;} .tags a:hover, #article .tags a:focus { color: #000!important; border-color: #999;} .tags a:hover:before { border-color: #999;} #article .tags { margin: 13px 0 30px; font-size: 14px; color: #666;} #article .tags a { margin-bottom: 4px; padding: 3px 8px 2px 17px; font-size: 12px;} #article {} #article h1 + time { display: block;} /* contact */ .content .contact { font-size: 14px;} .content .contact div { margin-bottom: 30px;} .content .contact a { color: #fff; text-decoration: underline;} .content .contact a:hover, .contact a:focus { color: #000;} .img-contact { position: absolute; right: 0; bottom: -28px;} .en .img-contact { right: -15px;} .col2.i-lg textarea { width: 295px;} #pg-con.fr form { min-height: 462px} /* account */ .list { margin-bottom: 18px; font-size: 13px;} .list .price { font-size: 13px;} .list time { color: #999; text-transform: none;} .list h5, .list dt { color: #333; text-transform: uppercase;} .list li { margin-bottom: 5px; padding: 10px; background-color: #F2FCFE; border: 1px solid #96E6F5;} .del, .pop-close, .list .del { position: absolute; top: 10px; right: 10px; width: 15px; height: 15px; font-size: 13px; line-height: 15px; color: #cb4343; text-align: center; border: 1px solid #cb4343; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;} .del:hover, .del:focus, .pop-close:hover, .pop-close:focus { background-color: #cb4343; color: #fff;} .status { padding: 4px 5px; font-size: 11px; line-height: 1; min-width: 70px; text-align: center; text-transform: uppercase; white-space: nowrap; border: 1px solid #a4a4a4; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;} .status.s1 { border-color: #389322; color: #389322;} .status.s2 { border-color: #d1d108; color: #d1d108;} .status.s3 { border-color: #d1d108; color: #d1d108;} .status.s4 { border-color: #389322; color: #389322;} .status.s5 { border-color: #b62020; color: #b62020;} /*.status.s6 { border-color: #389322; color: #389322;}*/ .status.issue.s1 { border-color: #d1d108; color: #d1d108;} .status.issue.s2 { border-color: #389322; color: #389322;} .status.issue.s3 { border-color: #d1d108; color: #d1d108;} .status.issue.s4 { border-color: #389322; color: #389322;} .status.issue.s5 { border-color: #b62020; color: #b62020;} .bloc-info { padding: 10px 10px 5px; line-height: 1.2; background-color: #F2FCFE; border: 1px solid #96E6F5;} .bloc-info dt { float: left; margin-top: 3px;} .bloc-info dd { margin: 0 0 5px 0; padding: 3px 0 5px 120px;} .bloc-addr {} .bloc-addr li { position: relative;} .ls-achats { padding: 0; background-color: transparent;} .ls-achats .tbl-achat { margin-bottom: 0;} .ls-achats .tbl-achat .qty, .ls-achats .tbl-achat .tot { width: 80px;} .ls-achats .status, .ls-subs .status { float: right;} /* panier */ .panier { font-size: 14px; line-height: 1.2; border-bottom: none;} .td-img img { display: block;} .td-del { padding-left: 0; text-align: right;} .td-del button { display: inline-block;} .td-title a, .td-title span { display: block;} input.qty { width: 30px;} tfoot td { vertical-align: middle;} .bt-update { color: #fff; text-decoration: underline;} .bt-update:hover, .bt-update:focus { color: #ddd;} .bt-modify { text-decoration: underline; font-size: 12px;} .addr-select { padding: 15px 15px 1px;} #box-print { position: fixed; left: 0; right: 0; top: 0; padding: 15px; background-color: #e9f6f9;} .img-livraison { float: right; position: relative; right: -30px;} /* checkout */ .frm-cc { margin-bottom: 0; padding-top: 5px; font-size: 12px;} .frm-cc label { font-size: 12px;} .frm-cc input { height: 16px; font-size: 14px;} .frm-cc input, .frm-cc select { max-width: 220px;} .zone-head {} .zone-head h1 { padding-top: 30px;} .zone-head img { float: left; max-width: 180px; height: auto; margin: 0 50px 30px 0;} /** ******************************************************* * footer */ #foot { color: #777;} #follow { margin-bottom: 30px; padding: 30px 0; background-color: #57D9F1; color: #fff;} #follow h3 { margin-bottom: 5px; font-size: 28px; line-height: 1; text-transform: uppercase;} #follow a { color: #fff;} #follow form .i-text { margin: 15px 0 0;} #follow input { width: 300px; height: 31px; background: #57D9F1; border-color: #eee; color: #fff; outline: none; vertical-align: middle;} #follow input:focus { border-color: #fff;} #follow button { vertical-align: middle;} #follow button span span { padding: 10px 15px; background-color: #fff; border-color: #fff; color: #a4a4a4; vertical-align: middle;} #follow button:hover span span, #follow button:focus span span { background-color: #f2f2f2; color: #a4a4a4;} #follow input::-webkit-input-placeholder {color: #eee;} #follow input:-moz-placeholder { color: #eee;} #follow input:-ms-input-placeholder { color: #eee;} #follow h3 { float: left; margin: 12px 30px 0 0;} #follow .social { float: left;} .social li { display: inline; margin-right: 15px;} #follow .scroll { float: right; margin-top: 10px; font-size: 14px;} #foot-nav { padding: 0 30px 30px; font-size: 13px;} #foot-nav a { display: block; color: #333;} #foot-nav h4 { font-size: 14px;} #foot-nav a:hover, #foot-nav a:focus { color: #57D9F1;} #foot-nav nav { margin-bottom: 15px;} #foot-nav img { float: right; position: relative; margin-bottom: -25px;} .contact { margin-bottom: 15px;} .copy { font-size: 12px;} /** ******************************************************* * responsive */ /* 768 */ @media screen and (max-width: 1023px) { .container { width: 708px;} img { height: auto;} /* head */ #head-bar #logo { width: 120px;} .en #head-bar #logo { width: 180px;} #menu { margin-top: 45px; letter-spacing: normal;} #menu li { margin-left: 20px;} .en #menu { margin-top: 38px;} #frm-search .i-text { padding-right: 30px;} .main-title + #subnav a, .main-title + .h2 + #subnav a { margin: 0 7px;} /* home */ #steps {} #steps .container { padding-left: 0; padding-right: 0;} #steps > h2 { font-size: 28px;} .en #steps > h2 { margin-left: 100px; margin-right: 100px;} #steps ol { background: transparent;} #steps .step1 { left: -20px;} .en #steps .step1 { left: -30px;} #steps .step2 { right: -20px;} #steps .step3 { right: -15px;} #testimony { padding-right: 60px;} #testimonies, #testimonies li { width: 528px;} #testimony blockquote p { font-size: 24px;} .box-img { max-width: 340px;} .conseils .jeu { margin-top: -31px;} .feature .text { margin-bottom: 20px;} .feature .submit { margin-bottom: 15px;} .submit a, .submit button span span { margin-bottom: 10px;} /* gen */ #sub-final {} #sub-final .col2 .col2-3 { float: none; width: auto; margin-right: 0;} #sub-final .col2 .col3 { float: none; width: auto; margin-bottom: 15px;} #sub-final .col2 .col2 { float: none; width: auto; margin-right: 0;} #sub-final .col2.right { text-align: left;} #sub-final p { margin-bottom: 12px;} #frm-abonnement .price { margin-top: 0;} #bons-de-commande ul li { float: none; display: block; margin-right: 0; padding-right: 0; border-right: none;} #bons-de-commande ul li a { display: block;} #game { width: 706px; height: 471px;} #pg-con .container > .col2 { float: none; width: auto; margin-right: 0;} .img-contact, .en .img-contact { right: 0; max-width: 35%;} #pg-con.fr form { min-height: 432px} .cat-head .cat-menu { margin-top: 0;} .cat-menu h4 { line-height: 1.1;} .box-plus img { width: 50%;} .col2 .i-lg input, .col2.i-lg input, .i-lg .col2 input { width: 200px;} .i-checkbox input { width: auto!important;} .sub-product.col2-3 { float: none; width: auto; margin-right: 0;} .col2-3.full { float: none; width: 100%;} .products.prod3 .img:after { height: 218px;} .products.prod3 img { max-height: 218px;} .feature.abonnement img { max-width: 75%;} .img-livraison { right: 0;} #sub-menu {} #sub-menu .col4 { display: none;} #sub-menu .col3-4 { width: 100%;} #gallery nav { font-size: 12px;} #gallery section .prev { left: -30px;} #gallery section .next { right: -30px} /* foot */ #foot-nav nav ul { margin-bottom: 15px;} #foot-nav .contact > div { width: 30.75%;} #foot-nav .contact .empty { display: none;} } /* 640 */ @media screen and (max-width: 767px) { body { font-size: 14px;} .container { width: 580px;} /* head */ .en #head-bar #logo { width: 140px;} #menu { font-size: 15px;} .en #menu { margin-top: 28px;} #menu li { margin-left: 10px;} /* home */ #pg-acc .content .space-bigger { margin-bottom: 30px;} #steps {} #steps > h2 { margin-bottom: 20px;} .en #steps > h2 { margin-left: 0; margin-right: 0;} #steps .step2 { right: -5px;} #steps .step1, #steps .step2, #steps .step3 { display: none;} #testimony { padding: 30px;} #testimony > img { display: none;} #testimonies, #testimonies li { width: 490px;} #testimony blockquote p { font-size: 22px;} #testimony cite { font-size: 18px;} .box-img { max-width: 278px;} .conseils .jeu { margin-top: -26px;} /* gen */ .testimonies blockquote { margin: 0 0 30px;} .icons h3 { font-size: 18px;} #game { width: 578px; height: 386px;} .img-contact { display: none;} .feature.abonnement img { display: none;} .tbl-wrap { overflow-x: scroll; -webkit-appearance: none;} .tbl-wrap table { min-width: 580px; font-size: 12px;} .tbl-wrap::-webkit-scrollbar { -webkit-appearance: none;} .tbl-wrap::-webkit-scrollbar:vertical {width: 11px;} .tbl-wrap::-webkit-scrollbar:horizontal { height: 11px;} .tbl-wrap::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid white; background-color: rgba(0, 0, 0, .5);} .tbl-wrap::-webkit-scrollbar-track { background-color: #fff; border-radius: 8px;} #gallery nav { font-size: 13px;} #gallery nav li { width: 35%;} #gallery nav .large { width: 64%;} #gallery nav img { display: none;} .products.prod3 .img:after { height: 178px;} .products.prod3 img { max-height: 178px;} #gallery nav span, #gallery nav .large span { margin-left: 20px; padding-top: 25px;} #frm-add-cart .price { float: none; margin-bottom: 0;} #frm-add-cart .price.last { margin-bottom: 0; margin-left: 0; padding-left: 0; border-left: none;} .col2 .i-lg input, .col2.i-lg input, .i-lg .col2 input { width: 140px;} .submit button, .submit a { margin-right: 0;} /* foot */ #foot-nav ul { margin-bottom: 15px;} } /* 480 */ @media screen and (max-width: 639px) { .container, #foot-nav { width: 450px; padding-left: 15px; padding-right: 15px;} .col2 { width: 100%; margin-right: 0;} /* head */ #head-bar .bt-nav-mobile { display: block;} #menu, #sec-nav { display: none;} #bt-search, #bt-cart { display: block; padding: 0;} #bt-search span, #bt-cart span { display: block; width: 100%; height: auto; text-indent: 0; background: transparent;} #bt-cart { width: 100%;} #bt-cart span { display: inline-block; width: auto;} #bt-cart em { color: #fff; top: -5px;} #site-select, #sec-nav { float: left; width: 100%;} /* home */ #steps > h2, .en #steps > h2 { margin-bottom: 20px; font-size: 22px;} #steps h2 { font-size: 22px;} #steps .col3 { width: 100%; margin-right: 0; margin-bottom: 30px;} #steps p { font-size: 18px;} #testimonies, #testimonies li { width: 390px;} .box-img { width: 450px; max-width: inherit; margin-left: -15px;} .conseils .jeu { margin-top: 0;} /* gen */ .products .col2, .conseils .col2, #foot-nav .col2, .cat-menu .col2, #gallery .tab .col2, .bloc-addr .col2, #paymentForm > section .col2 { width: 48%; margin-right: 3.8%;} .products .last, .conseils .last, #foot-nav .last, .cat-menu .last, #gallery .tab .last, .bloc-addr .last, #paymentForm > section .last { margin-right: 0;} .products.prod3 .img:after { height: 216px;} .products.prod3 img { max-height: 216px;} .quote { font-size: 18px;} .testimonies blockquote { font-size: 16px;} #ab-coffret > div { margin-right: 0;} .cards { margin-top: -45px;} .cols .col3 { float: none; width: auto; margin: 0 0 30px;} .icons .col2-3 { float: none; width: 100%;} .icon { margin-top: -5px;} .cols .icon { margin-top: -10px;} .icons .cards { margin-top: -30px;} #game { width: 448px; height: 299px;} .contact.feature { padding-bottom: 30px;} .outils-pres { float: none; margin: 0 auto 30px;} .main-title + #subnav, .main-title + .h2 + #subnav { text-align: left;} #subnav li { display: block;} #subnav a { padding: 5px 0;} .kit { float: none; margin-left: 0;} .fl-r { max-width: 50%;} .product-img { float: none; margin-bottom: 15px;} .prod-main { margin-left: 0;} #frm-add-cart .price { float: left; margin-bottom: 20px;} #frm-add-cart .price.last { margin-left: 25px; padding-left: 25px; border-left: 1px solid #000;} .feature.abonnement img { display: block;} .box-plus img { display: block; position: static; margin: 0 auto;} .col2 .i-lg input, .col2.i-lg input, .i-lg .col2 input { width: 240px;} .search-nb { float: none; margin: 0 0 15px;} #gallery nav span, #gallery nav .large span { padding-top: 15px;} .en #gallery nav li { width: 38%;} .en #gallery nav .large { width: 61%;} #gallery section .prev { left: -15px;} #gallery section .next { right: -15px} /* foot */ #follow .col2.last { display: none;} } /* 320 */ @media screen and (max-width: 479px) { .container, #foot-nav { width: 290px;} .content h1 { font-size: 30px;} .content h2 { font-size: 24px;} .content h3 { font-size: 18px;} .content h4 { font-size: 14px;} .content .main-title { font-size: 30px;} /* home */ #testimonies, #testimonies li { width: 230px;} #testimony blockquote p { font-size: 18px;} #testimony cite { font-size: 14px;} .box-img { width: auto; max-width: 290px; margin-left: -15px;} /* gen */ .feature { padding: 15px 15px 1px;} .quote { max-width: inherit; margin-left: 0; padding: 15px 0; border-left: none; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc;} #game { width: 288px; height: 192px;} .bt.sml.fl-r { float: none!important; margin-bottom: 15px;} .fl-r { float: none; max-width: 100%; margin-left: 0;} .bloc-addr .col2 { float: none; width: 100%;} .bloc-addr .last { margin-top: 15px;} .i-lg label { float: none; display: block; margin-bottom: 5px;} .i-lg input[type=text], .i-lg input[type=password], .i-lg input[type=email], .i-lg input[type=file], .i-lg textarea, .i-lg select { float: none; margin-left: 0;} .col2.i-lg textarea { width: 250px;} .i-lg .submit { margin-left: 0;} .sub-product img { float: none;} .sub-product div { margin-left: 0;} #gallery nav { font-size: 12px;} #gallery nav span, #gallery nav .large span { margin-left: 10px; margin-right: 10px;} .en #gallery nav li { width: 49%;} .en #gallery nav .large { width: 50%;} .box-ziraf-plus > .col2-3 { width: 100%;} .box-ziraf-plus h2 { padding-top: 0;} .products.prod4 .img:after, .products.prod3 .img:after { height: 139px;} .products.prod4 img, .products.prod3 img, .products.border .img { max-height: 139px;} #frm-add-cart .price { float: none; margin-bottom: 0;} #frm-add-cart .price.last { margin-bottom: 0; margin-left: 0; padding-left: 0; border-left: none;} #frm-search-page input { max-width: 200px;} #frm-hip-fam button { margin-top: 15px;} .feature.abonnement img { max-width: 60%;} #bt-print-close { display: none;} .inside { margin-left: 0;} #faq-a table { font-size: 12px;} /* foot */ #foot-nav .contact > div { width: 48%; margin: 0 0 15px;} #foot-nav .contact .col2-5 { width: 100%; margin-right: 0;} #foot-nav .contact img { float: none; margin-bottom: 0;} } /** ******************************************************* * clear */ .clearfix:after, .i-lg .i-text:after, .i-lg .i-textarea:after, .i-lg .i-select:after, .i-lg .i-file:after, .i-lg .i-checkbox:after, .i-lg .i-radio:after, .i-lg .i-multi:after, .bloc-info dd:after, .feature.abonnement:after, .sub-product:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden;} /** ******************************************************* * ColorBox Core Style */ #colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center} /* FROM cari */ /** ******************************************************* * titles */ h1, h2, h3, h4, h5, h6 { line-height: 1.1; font-weight: normal; } h1 a, h2 a, h3 a, h5 a, h6 a { } h1 a:hover, h1 a:active, h1 a:focus, h2 a:hover, h2 a:active, h2 a:focus, h3 a:hover, h3 a:active, h3 a:focus, h4 a:hover, h4 a:active, h4 a:focus, h5 a:hover, h5 a:active, h5 a:focus, h6 a:hover, h6 a:active, h6 a:focus { } /** ******************************************************* * class gen */ .hide { position: absolute; margin-left: -9000px!important;} .hidden { visibility: hidden;} .none, .printonly { display: none!important;} .ir { display: block; background-position: 0 0; background-repeat: no-repeat; overflow: hidden; text-indent: -9999px;} .clear { clear: both;} .clearer { display: block!important; width: 100%!important; clear: both!important; height: 0!important; line-height: 0!important; font-size: 1px!important; float: none!important; overflow: hidden; margin: 0!important; padding: 0!important; border: none!important} .selfclear { overflow: hidden;} .center { text-align: center;} .right { text-align: right;} .fl { float: left!important;} .fl-r { float: right!important;} .no-fl { float: none!important;} .no-space { margin-bottom: 0!important;} .space-sml { margin-bottom: 5px!important;} .space { margin-bottom: 10px!important;} .spaced { margin-bottom: 15px!important;} .space-top { margin-top: 15px!important;} .space-big { margin-bottom: 30px!important;} .space-bigger { margin-bottom: 45px!important;} .space-top-big { margin-top: 30px!important;} .sup { font-size: 0.83em; position: relative; top: -2px;} /** * jquery-ui */ body #ui-datepicker-div { display: none;} body .ui-widget { font-size: 1em;} body .ui-dialog { text-align: left;} body .ui-dialog .ui-dialog-content { padding-top: 20px !important;} #cboxLoadedContent { text-align: left;} /** ******************************************************* * forms */ fieldset { margin-bottom: 30px;} label { margin-right: 10px;} form input, form select, form textarea, button { font-size: 1em;} .i-txt, .i-area, .i-sel, .i-check, .i-file { margin-bottom: 15px;} .i-txt input, .i-area textarea { width: 200px; height: 20px; border: 1px solid #ccc; padding: 4px 5px 1px;} .i-area textarea { height: 100px;} form .label-in { color: #666;} input.disabled, textarea.disabled { background-color: #ececec;} .check-multi label { margin-right: 20px;} .i-multi { margin-bottom: 15px;} .i-multi span { margin-right: 10px;} .i-multi .last { margin-right: 0;} .i-lg {} .i-lg label { float: left; width: 80px; margin: 4px 0 0; text-align: right; } .i-lg .i-txt input, .i-lg .i-file input, .i-lg .i-area textarea, .i-lg .i-sel select { float: left; margin-left: 10px;} .i-lg .submit, .inside { margin-left: 90px;} .i-lg .i-sel label, .i-lg .i-file label { margin-top: 1px;} .i-lg .i-area textarea { width: 325px;} .i-lg .i-xtra { float: left; margin: 6px 0 0 5px;} .i-lg .i-sel .i-xtra { margin-top: 3px;} .i-lg .i-check label { float: none; width: auto; margin: 0 0 0 5px; font-weight: normal;} .i-lg .i-check input { float: none; width: auto; margin: 0;} .i-hg {} .i-hg label, .i-hg .label { display: block;} .i-hg .i-check label { display: inline; font-weight: normal;} .i-hg .i-area textarea { width: 98%;} .submit { margin: 30px 0;} .submit button, .submit a { margin-right: 15px;} button { display: inline; background: none; cursor: pointer; white-space: nowrap;} button>span { display: inline-block;} button:hover span, button:focus span {} .msgbox { position: relative; margin-bottom: 15px; padding: 0 10px 10px; line-height: 1.4;} .msgbox p, .msgbox ul { padding: 10px 0 0;} .msgbox ul { margin-left: 20px; list-style-type: disc;} .msgbox .close { position: absolute; top: 2px; right: 2px; display: none;} .msgbox label { display: inline; width: auto; float: none; text-transform: none!important;} .success { background: #c4e5a9; color: #666;} .errors label { color: #666!important;} .errors { background: #f68c95; color: #333;} .errors label { color: #333!important;} label em { padding-right: 3px; color: red;} label.error { color: red; font-style: italic;} /** ******************************************************* * bts */ .msgbox .close { display: block; width: 18px; height: 18px; background: url(../img/icons.png) 0 0 no-repeat; text-indent: -9999px;} .success .close { background-position: 0 0;} .errors .close { background-position: -18px 0;} /** * cols */ #wrapper { width: 900px; margin: 0 auto; text-align: left;} /** ******************************************************* * content */ h2 { margin-bottom: 30px; padding-top: 30px; font-size: 24px; border-top: 1px solid #ccc;} .col2 { width: 49%; float: left;} .col2.last, .col3.last { float: right;} .col3 { width: 33%; float: left;} #header { margin-bottom: 30px;} #header * { vertical-align: top;} #main-bloc { text-align: center; line-height: 1.2; font-size: 13px;} #main-bloc strong { color: #333;} .text { margin-bottom: 30px;} .text p, .text ul, .text ol, .text dl { margin-bottom: 15px;} .text ul, .text ol, #ls-members ul, #ls-members ol, .ls { list-style-type: disc; margin-left: 20px;} #frm-contact { margin: 0 0 45px;} #i-zip { width: 100px;} /** ******************************************************* * clear */ .clearfix:after, .i-lg .i-txt:after, .i-lg .i-area:after, .i-lg .i-sel:after, .i-lg .i-file:after, .i-lg .i-check:after, .i-lg .i-multi:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden;}