.clearfix:after { display: block; content: ''; clear: both; } /** * I converted the SCSS mixin to LESS for the awesome coders like myself in response to a blog post on 37Signals - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss * * Update: 2014-08-04 - Updated a long-standing bug where retina images were shown no matter what in the first background-image property. * - Updated retina media query to be more reliable () * Update: 2013-11-13 - Picked up another technique thanks to reading this post from Tyler Tate, auto-fill in the second filename for the retina image, http://tylertate.com/blog/2013/06/11/retina-images-using-media-queries-and-LESS-CSS.html * Update: 2013-04-16 - Have recently found a few use cases when using a retina pattern from Subtle Patterns on the , this has come in handy * Update: 2013-04-05 - Some research in the Wordpress Core(http://core.trac.wordpress.org/ticket/22238#comment:5) was pointed out that some tests may be redundant (Thanks @kbav) so I've cleaned these up * Update: 2012-12-29 - Updated AGAIN to add MS IE10 declaration and fix wonky 'min--moz-' declaration which Mozilla engineers are aware of * Update: 2012-11-21 - Updated again based on information from an article I found, added dppx and changed opera ratio to target more devices (http://www.uifuel.com/hd-retina-display-media-queries/) * Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629) */ /** * The filename convention for the retina-sized image is image@2x.png, * but of course you can change this in the mixin when you use it */ /*! normalize.css v1.1.3 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. * Known issue: no IE 6 support. */ [hidden], .hide { display: none; } /* ========================================================================== Base ========================================================================== */ /* Apply a natural box layout model to all elements: */ *, *:before, *:after { box-sizing: border-box; } /** * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using * `em` units. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-size: 100%; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ background: #fff; } /** * Address `font-family` inconsistency between `textarea` and other form * elements. */ html, body, button, input, select, textarea { font-family: "Myriad Pro", Arial, sans-serif; font-size: 14px; color: #373636; } /** * Address margins handled incorrectly in IE 6/7. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ a { color: #f99839; } /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; color: #f87e07; } /* ========================================================================== Typography ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; padding: 0; } address { font-style: normal; } /** * Address styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */ b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. * Known issue: no IE 6/7 normalization. */ hr { box-sizing: content-box; height: 0; } /** * Address styling not present in IE 6/7/8/9. */ mark { background: #ff0; color: #000; } /** * Address margins set differently in IE 6/7. */ p, pre { margin: 0; } /** * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /** * Address CSS quotes not supported in IE 6/7. */ q { quotes: none; } /** * Address `quotes` property not supported in Safari 4. */ q:before, q:after { content: ''; content: none; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Lists ========================================================================== */ /** * Address margins set differently in IE 6/7. */ dd, dl, menu, ol, ul { margin: 0; } /** * Address paddings set differently in IE 6/7. */ menu, ol, ul { padding: 0; } /** * Correct list images handled incorrectly in IE 7. */ nav ul, nav ol { list-style: none; list-style-image: none; } /* ========================================================================== Embedded content ========================================================================== */ /** * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. * 2. Improve image quality when scaled in IE 7. */ img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */ } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Correct margin displayed oddly in IE 6/7. */ form { margin: 0; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct color not being inherited in IE 6/7/8/9. * 2. Correct text not wrapping in Firefox 3. * 3. Correct alignment displayed oddly in IE 6/7. */ legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ } /** * 1. Correct font size not being inherited in all browsers. * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, * and Chrome. * 3. Improve appearance and consistency in all browsers. */ button, input, select, textarea { font-size: 100%; /* 1 */ margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ *vertical-align: middle; /* 3 */ } /** * Address Firefox 3+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. * 4. Remove inner spacing in IE 7 without affecting normal text inputs. * Known issue: inner spacing remains in IE 6. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to content-box in IE 8/9. * 2. Remove excess padding in IE 8/9. * 3. Remove excess padding in IE 7. * Known issue: excess padding remains in IE 6. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ *height: 13px; /* 3 */ *width: 13px; /* 3 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-input-placeholder { color: #676767; text-transform: uppercase; } ::-moz-placeholder { color: #676767; text-transform: uppercase; } /** * Remove inner padding and border in Firefox 3+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 6/7/8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Helpers ========================================================================== */ .clear { clear: both; } .pull-left { float: left; } .pull-right { float: right; } .hide, [hidden] { display: none; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } table th { text-align: left; font-weight: normal; } /* ========================================================================== Browsehappy ========================================================================== */ .browsehappy { margin: 0 0 20px; background: #eee; color: #666; padding: 5px 20px; width: 100%; display: block; } /* ========================================================================== iCheck ========================================================================== */ /* iCheck plugin Square skin, black ----------------------------------- */ .icheckbox_square, .iradio_square { display: inline-block; *display: inline; vertical-align: middle; margin: 0; padding: 0; width: 22px; height: 22px; background: url(/assets/site/images/layout/icheck-square.png) no-repeat; border: none; cursor: pointer; } .icheckbox_square { background-position: 0 0; } .icheckbox_square.hover { background-position: -24px 0; } .icheckbox_square.checked { background-position: -48px 0; } .icheckbox_square.disabled { background-position: -72px 0; cursor: default; } .icheckbox_square.checked.disabled { background-position: -96px 0; } .iradio_square { background-position: -120px 0; } .iradio_square.hover { background-position: -144px 0; } .iradio_square.checked { background-position: -168px 0; } .iradio_square.disabled { background-position: -192px 0; cursor: default; } .iradio_square.checked.disabled { background-position: -216px 0; } /* Retina support */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .icheckbox_square, .iradio_square { background-image: url(/assets/site/images/layout/icheck-square@2x.png); background-size: 240px 24px; } } .icheckbox_square, .iradio_square { background-image: url(/assets/site/images/layout/icheck-square.png); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .icheckbox_square, .iradio_square { background-image: url(/assets/site/images/layout/icheck-square@2x.png); } } /* ========================================================================== Magnific Popup ========================================================================== */ /* ========================================================================== Magnific Popup ========================================================================== */ /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; filter: alpha(opacity=80); } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #cccccc; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #cccccc; } .mfp-preloader a:hover { color: white; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; filter: alpha(opacity=65); padding: 0 0 18px 10px; color: white; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; filter: alpha(opacity=100); } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: white; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #cccccc; font-size: 12px; line-height: 18px; } .mfp-arrow { position: absolute; opacity: 0.65; filter: alpha(opacity=65); margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; filter: alpha(opacity=100); } .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after, .mfp-arrow .mfp-a { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before, .mfp-arrow .mfp-b { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { border-right: 17px solid white; margin-left: 31px; } .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { margin-left: 25px; border-right: 27px solid #3f3f3f; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { border-left: 17px solid white; margin-left: 39px; } .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { border-left: 27px solid #3f3f3f; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: black; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444444; } .mfp-figure small { color: #bdbdbd; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #f3f3f3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { transform: scale(0.75); } .mfp-arrow-left { transform-origin: 0; } .mfp-arrow-right { transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } .mfp-ie7 .mfp-img { padding: 0; } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px; } .mfp-ie7 .mfp-container { padding: 0; } .mfp-ie7 .mfp-content { padding-top: 44px; } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; } .mfp-bg { background: rgba(0, 0, 0, 0.9); } .mfp-iframe-holder .mfp-content { max-width: 1200px; min-width: 680px; /* max-height: 95%; */ } .no-rgba .mfp-bg { background: url('/assets/site/images/layout/pixel-black-90-procent.png'); } /* overlay at start */ .mfp-fade.mfp-bg { opacity: 0; transition: all 0.15s ease-out; } /* overlay animate in */ .mfp-fade.mfp-bg.mfp-ready { opacity: 0.8; } /* overlay animate out */ .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } /* content at start */ .mfp-fade.mfp-wrap .mfp-content { opacity: 0; transition: all 0.15s ease-out; } /* content animate it */ .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } /* content animate out */ .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } /* padding-bottom and top for image */ .mfp-no-margins img.mfp-img { padding: 0; } /* position of shadow behind the image */ .mfp-no-margins .mfp-figure:after { top: 0; bottom: 0; } /* padding for main container */ .mfp-no-margins .mfp-container { padding: 0; } /* ========================================================================== Core Owl Carousel 2.0.0 ========================================================================== */ /* * Owl Carousel - Animate Plugin */ .owl-carousel .animated { animation-duration: 1000ms; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { animation-name: fadeOut; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Owl Carousel - Auto Height Plugin */ .owl-height { transition: height 500ms ease-in-out; } /* * Core Owl Carousel CSS File */ .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-controls .owl-nav .owl-prev, .owl-carousel .owl-controls .owl-nav .owl-next, .owl-carousel .owl-controls .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel .owl-refresh .owl-item { display: none; } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; } .owl-carousel.owl-text-select-on .owl-item { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } .owl-carousel .owl-grab { cursor: move; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity 400ms ease; } .owl-carousel .owl-item img { transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: scale 100ms ease; } .owl-carousel .owl-video-play-icon:hover { transition: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; } .search-wrapper { border: 1px solid #afafaf; padding: 1px; position: relative; display: inline-block; } .search-wrapper .field { border: none; margin: 0; padding: 3px 44px 0 12px; font-size: 15px; width: 266px; height: 33px; line-height: 33px; background: #e6e7e9; } .search-wrapper .button { display: block; position: absolute; right: 0; top: 1px; height: 33px; width: 44px; border: 0; background: url('/assets/site/images/icons/search.png') no-repeat right top; } .btn { display: inline-block; border: 0; background-color: #f99839; line-height: 28px!important; text-transform: uppercase; text-decoration: none; color: #fff!important; padding: 3px 10px 0!important; font-size: 14px; cursor: pointer; } .btn:hover { background-color: #faa552; text-decoration: none; } .btn.disabled, .btn.btn-disabled, .btn [disabled] { opacity: .6; cursor: default; } .btn.disabled:hover, .btn.btn-disabled:hover, .btn [disabled]:hover { background-color: #f99839; } .btn.btn-busy { padding-left: 25px!important; background-image: url('/assets/site/images/icons/loading-white.gif'); background-repeat: no-repeat; background-position: 5px center; cursor: wait; } .hover { display: none; } .container { width: 988px; margin: 0 auto; position: relative; } .heading { background: #676767; color: #fff; height: 33px; line-height: 37px; overflow: hidden; text-transform: uppercase; padding: 0 0 0 15px; margin: 0; font-size: 16px; position: relative; } .heading .more, .heading .more:visited { color: #fff; display: block; min-width: 200px; text-align: right; height: 33px; text-decoration: none; position: absolute; right: 0; top: 0; font-size: 10px; padding-right: 18px; cursor: pointer; } .heading .more:hover, .heading .more:visited:hover { color: #f99839; } .tag { height: 26px; line-height: 26px; margin-bottom: 2px; } .tag .inner { height: 26px; line-height: 28px; margin-bottom: 2px; background: #676767; display: inline-block; padding: 0 8px; text-transform: uppercase; color: #fff; position: relative; } .tag .arrow { position: absolute; display: inline-block; width: 8px; height: 26px; background: url('/assets/site/images/icons/tag-arrow-sprite.png') no-repeat; right: -8px; top: 0; } .tag.orange .inner { background: #f99839; } .tag.orange .inner .arrow { background-position: 0 -26px; } .tag.red .inner { background: #d64b42; } .tag.red .inner .arrow { background-position: 0 -52px; } .tag.blue .inner { background: #3798e2; } .tag.blue .inner .arrow { background-position: 0 -78px; } .tag.green .inner { background: #a3de93; } .tag.green .inner .arrow { background-position: 0 -104px; } .tag.black .inner { background: #2a2a2a; } .tag.black .inner .arrow { background-position: 0 -130px; } .imagebox { position: relative; overflow: hidden; display: block; background-image: url('/assets/site/images/icons/loading.gif'); background-position: center center; background-repeat: no-repeat; } .imagebox img { position: relative; width: 100%; } .chart { position: absolute; top: 10px; left: 180px; height: 60px; } .chart .inner { position: absolute; top: 7px; left: 7px; background: #7a7a7a; border-radius: 23px; height: 46px; width: 46px; color: #fff; text-align: center; behavior: url(/assets/site/plugins/PIE.htc); } .chart .inner .inner-text { margin-top: 12px; } .chart .inner .inner-text .percent { font-size: 1.2em; } .chart.chart-large { height: 187px; } .chart.chart-large .inner { top: 22px; left: 22px; border-radius: 63px; height: 126px; width: 126px; behavior: url(/assets/site/plugins/PIE.htc); } .chart.chart-large .inner .inner-text { margin-top: 30px; } .chart.chart-large .inner .inner-text .percent { font-size: 3em; display: inline; border-bottom: 1px solid #fff; line-height: 1.2em; padding: 0 10px; } .chart.chart-large .inner .inner-text span.total { text-transform: uppercase; } .textbox { font-size: 15px; line-height: 26px; margin-bottom: 26px; /* Dropcap */ } .textbox.textbox-page h1 { font-size: 43px; line-height: 45px; margin: 0 0 40px; } .textbox.textbox-page h2 { font-size: 25px; line-height: 27px; margin: 0 0 25px; } .textbox.textbox-page h3 { font-size: 20px; line-height: 22px; margin: 0 0 20px; } .textbox.textbox-page h4, .textbox.textbox-page h5, .textbox.textbox-page h6 { font-size: 16px; margin: 0; } .textbox h1, .textbox h2, .textbox h3, .textbox h4, .textbox h5 { margin: 0; padding: 0; background: none; color: #272727; font-weight: normal; font-size: 15px; line-height: 26px; } .textbox h2 { color: #676767; font-size: 40px; line-height: 46px; margin-bottom: 20px; } .textbox p { margin: 0 0 26px; } .textbox a { color: #f99839; } .textbox a:hover, .textbox a:visited, .textbox a:focus { color: #f88311; } .textbox small { font-size: 14px; } .textbox .text-muted { color: #B4B4B4; } .textbox .dc { float: left; background: #2a2a2a; color: #fff; font-size: 36px; padding: 15px 12px 7px; margin-right: 7px; display: block; } .textbox ol, .textbox ul { margin: 0 0 13px 0; padding: 0 0 0 20px; } .textbox ul { list-style-type: square; padding-left: 15px; } .textbox .photobox { float: left; display: block; width: 360px; margin: 0 20px 10px 0; padding: 20px 20px 10px 0; border: 2px solid #e6e7e9; border-left: none; color: #676767; } .textbox .photobox .imagewrap { margin: 0 0 10px; } .textbox .photobox h3 { color: #676767; } .textbox .photobox p { margin: 0; } .textbox .leftborderbox { display: block; margin: 0 0 20px 160px; padding: 0 0 0 20px; color: #676767; border-left: 2px solid #e6e7e9; } .textbox .leftborderbox h3 { color: #676767; font-size: 16px; font-weight: bold; } .textbox .leftborderbox p { margin: 0; } .textbox .imagewrap { display: block; margin: 0 0 20px; line-height: 0; } .textbox .imagewrap.imagewrap-one-left { float: left; max-width: 200px; margin-right: 20px; margin-top: 4px; } .textbox .imagewrap.imagewrap-one-right { float: right; max-width: 200px; margin-left: 20px; margin-top: 4px; } .textbox .imagewrap.imagewrap-two a { width: 322px; } .textbox .imagewrap.imagewrap-two a.child-1 { margin: 0 20px 0 0; } .textbox .imagewrap.imagewrap-three a { width: 209px; } .textbox .imagewrap.imagewrap-three a.child-2 { margin: 0 20px; } .textbox .imagewrap a { display: inline-block; width: 100%; border: 1px solid #e6e7e9; max-height: 384px; overflow: hidden; } .textbox .imagewrap a, .textbox .imagewrap img { line-height: 0; } .textbox table { width: 100%; margin-bottom: 16px; } .textbox table thead th, .textbox table thead td { vertical-align: bottom; } .textbox table td, .textbox table th { padding: 0 5px; vertical-align: top; } .textbox table.table-striped thead { background: #676767; color: #fff; } .textbox table.table-striped tbody tr { border-top: 1px solid #e6e7e9; } .textbox table.table-striped tbody tr:first-child { border-top: 0; } /* Textbox */ .breadcrumbs { width: 100%; margin: 0 0 20px; padding: 0 0 5px; display: block; } .breadcrumbs ul { padding: 0; margin: 0; list-style-type: none; display: block; } .breadcrumbs ul li { float: left; color: #676767; display: block; height: 20px; line-height: 23px; font-size: 1.1em; text-transform: uppercase; } .breadcrumbs ul li.sep { width: 22px; background: url('/assets/site/images/icons/gt.jpg') no-repeat center center; } .breadcrumbs ul li.label.orange { color: #f99839; } .breadcrumbs ul li.label.red { color: #fd5338; } .breadcrumbs ul li a { color: #676767; display: block; height: 100%; padding: 0 5px; text-decoration: none; } .breadcrumbs ul li a:hover { color: #2a2a2a; } /* Breadcrumbs */ #pagination { width: 100%; margin: 0 0 20px 0; } #pagination ul { padding: 0; margin: 0; list-style-type: none; display: block; } #pagination ul li { float: left; color: #fff; display: block; background: #afafaf; border-right: 1px solid #fff; height: 33px; min-width: 34px; font-size: 1.4em; line-height: 36px; } #pagination ul li span, #pagination ul li a, #pagination ul li a:visited { color: #fff; display: block; height: 33px; text-decoration: none; text-align: center; padding: 0 6px; } #pagination ul li.active { background: #676767 !important; } #pagination ul li.disabled { background-color: #ccc!important; cursor: default!important; } #pagination ul li:hover { background-color: #f99839; } #pagination ul li.back, #pagination ul li.next { background-position: center center; background-repeat: no-repeat; } #pagination ul li.back { background-image: url('/assets/site/images/icons/pagination-arrow-left.png'); } #pagination ul li.next { background-image: url('/assets/site/images/icons/pagination-arrow-right.png'); border: 0; } #pagination ul li.more.archive { text-transform: uppercase; } #pagination ul li.more.dots { background: #afafaf url('/assets/site/images/icons/pagination-dots.png') no-repeat center center; width: 60px; } /* Pagination */ #header .logo { margin: 23px 0 16px 0; float: left; } #header .logo a { width: 340px; color: transparent; height: 73px; display: block; font-size: 0; background-image: url(/assets/site/images/layout/logo-auto55.jpg); background-repeat: no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #header .logo a { /* on retina, use image that's scaled by 2 */ background-image: url(/assets/site/images/layout/logo-auto55@2x.jpg); background-size: 340px 73px; } } #header .search-wrapper { float: right; margin-top: 22px; } #header #nav { width: 988px; background: #676767; margin-bottom: 5px; height: 33px; /* /.DROPDOWN */ } #header #nav .parent1 { padding: 0; margin: 0; list-style-type: none; width: 988px; display: block; position: relative; } #header #nav .child1 { float: left; display: block; font-size: 16px; } #header #nav .child1 > a, #header #nav .child1 > a:visited { color: #fff; display: block; padding: 0 15px 0 14px; text-decoration: none; text-transform: uppercase; border-right: 1px solid #afafaf; height: 33px; line-height: 36px; } #header #nav .child1 > a:hover, #header #nav .child1 > a:visited:hover { background: #2a2a2a; } #header #nav .child1.orange, #header #nav .child1.active { background: #f99839; } #header #nav .child1.orange > a:hover, #header #nav .child1.active > a:hover { background: #2a2a2a; } #header #nav .child1.red { background: #fd5338; } #header #nav .child1.blue { background: #3798e2; } #header #nav .child1.green { background: #a3de93; } #header #nav .child1:hover .dropdown { left: 0; top: auto; display: block; } #header #nav .child1:hover > a { background: #2a2a2a; } #header #nav .dropdown { position: absolute; z-index: 9999900; background: #fbfbfd url('/assets/site/images/layout/dropdown-bg.jpg') repeat-y top right; display: none; width: 988px; border: 1px solid #2a2a2a; /* /.INNER */ /* BACKGROUND */ /* NEWS */ /* INFO */ /* RETRO / DOSSIERS */ /* MULTIMEDIA */ /* /.DROPDOWN-MULTIMEDIA */ /* MAKES */ } #header #nav .dropdown .footer { border-top: 1px solid #2a2a2a; padding: 5px 0; margin-right: 18px; } #header #nav .dropdown .footer i { margin: 0 5px; } #header #nav .dropdown .footer a { display: inline-block !important; line-height: 20px; text-transform: uppercase; } #header #nav .dropdown .footer a:hover { background: transparent; } #header #nav .dropdown .inner { position: relative; border: 1px solid #676767; padding: 18px 0 0 18px; font-size: 14px; font-weight: normal; color: #2a2a2a; min-height: 300px; /* /.COL-LEFT */ /* /.COL-RIGHT */ /* TYPOGRAPHY */ /* LISTS */ /* /.ITEMLIST */ } #header #nav .dropdown .inner .col-left, #header #nav .dropdown .inner .col-right { display: block; margin-right: 18px; } #header #nav .dropdown .inner .col-left { float: left; width: 635px; } #header #nav .dropdown .inner .col-left .cell { width: 295px; margin-right: 18px; float: left; } #header #nav .dropdown .inner .col-left .cell.cell1 { width: 140px; } #header #nav .dropdown .inner .col-left .cell.cell2 { width: 295px; } #header #nav .dropdown .inner .col-left .cell a:hover { text-decoration: underline; } #header #nav .dropdown .inner .col-right { float: right; width: 292px; } #header #nav .dropdown .inner .col-right .newsletter { background: #f99839; color: #fff; width: 330px; padding: 18px; margin: 44px 0 0 -20px; } #header #nav .dropdown .inner .col-right .newsletter h4 { border: 0; font-size: 21px; } #header #nav .dropdown .inner .col-right .newsletter p { margin: 0 0 10px; } #header #nav .dropdown .inner .col-right .newsletter form { position: relative; } #header #nav .dropdown .inner .col-right .newsletter form .btn, #header #nav .dropdown .inner .col-right .newsletter form .input { display: inline-block; height: 30px; border: 0; width: 175px; padding: 0 10px; line-height: 30px; } #header #nav .dropdown .inner .col-right .newsletter form .btn { background: #fbc28a; width: 120px; overflow: hidden; position: absolute; right: 0; top: 0; padding: 0; line-height: 26px!important; } #header #nav .dropdown .inner .col-right .newsletter form .btn:hover { background-color: #676767; } #header #nav .dropdown .inner h1, #header #nav .dropdown .inner h2, #header #nav .dropdown .inner h3, #header #nav .dropdown .inner h4, #header #nav .dropdown .inner h5, #header #nav .dropdown .inner h6 { font-size: 16px; } #header #nav .dropdown .inner h4 { font-size: 18px; text-transform: uppercase; border-bottom: 1px solid #2a2a2a; margin: 0 0 10px 0; } #header #nav .dropdown .inner h5 { font-size: 16px; text-transform: uppercase; margin: 0 0 10px 0; } #header #nav .dropdown .inner h4, #header #nav .dropdown .inner h5 { position: relative; } #header #nav .dropdown .inner h4 span, #header #nav .dropdown .inner h5 span { position: absolute; right: 0; bottom: 0; font-size: 13px; } #header #nav .dropdown .inner h4 a:hover, #header #nav .dropdown .inner h5 a:hover { text-decoration: none!important; } #header #nav .dropdown .inner a { display: block; color: #2a2a2a; text-decoration: none; } #header #nav .dropdown .inner a:hover, #header #nav .dropdown .inner a:hover span { text-decoration: underline!important; } #header #nav .dropdown .inner .linklist > div { margin-bottom: 20px; font-size: 14px; } #header #nav .dropdown .inner .linklist > div > span { font-size: 18px; display: block; } #header #nav .dropdown .inner .linklist > div > a { margin: 2px 0 0; padding: 1px 0 0; } #header #nav .dropdown .inner .itemlist .item { display: block; position: relative; } #header #nav .dropdown .inner .itemlist .item h1 { height: 77px; overflow: hidden; } #header #nav .dropdown .inner .itemlist a { text-decoration: none!important; } #header #nav .dropdown .inner .itemlist.itemlist-md { margin-bottom: 20px; } #header #nav .dropdown .inner .itemlist.itemlist-md .item { height: 110px; padding: 10px 110px 10px 10px; overflow: hidden; transition: background-color 0.3s; -o-transition: background-color 0.3s; -moz-transition: background-color 0.3s; -webkit-transition: background-color 0.3s; } #header #nav .dropdown .inner .itemlist.itemlist-md .item:hover { background: #e6e7e9; } #header #nav .dropdown .inner .itemlist.itemlist-md .item h1 { margin: 12px 0 0; font-size: 16px; } #header #nav .dropdown .inner .itemlist.itemlist-md .item img { width: 90px; height: 90px; border: 1px solid #676767; position: absolute; right: 10px; top: 10px; } #header #nav .dropdown .inner .itemlist.itemlist-lg .item { margin-bottom: 20px; } #header #nav .dropdown .inner .itemlist.itemlist-lg .item h5 { margin: 8px 0 0; font-size: 16px; } #header #nav .dropdown .inner .itemlist.itemlist-lg .item span { height: 128px; border: 1px solid #676767; overflow: hidden; display: block; } #header #nav .dropdown .inner .itemlist.itemlist-lg .item span img { bottom: 0; } #header #nav .dropdown.dropdown-makes, #header #nav .dropdown.dropdown-multimedia { background-image: none; } #header #nav .dropdown.dropdown-news .inner { min-height: 560px; } #header #nav .dropdown.dropdown-news .inner .cell-a { width: 153px; } #header #nav .dropdown.dropdown-news .inner .cell-b { width: 133px; } #header #nav .dropdown.dropdown-news .inner .cell-c { width: 250px; } #header #nav .dropdown.dropdown-info .inner .cell-a { width: 323px; } #header #nav .dropdown.dropdown-info .inner .cell-b { width: 275px; } #header #nav .dropdown.dropdown-info .inner .cell-c { width: 200px; } #header #nav .dropdown.dropdown-info .contact { border-top: 1px solid #2a2a2a; padding: 10px 0; margin-right: 18px; } #header #nav .dropdown.dropdown-info .contact a { display: inline-block; } #header #nav .dropdown.dropdown-info .contact .cell { width: 220px; } #header #nav .dropdown.dropdown-info .contact .cell-d { width: 140px; } #header #nav .dropdown.dropdown-info .contact .cell-e { width: 200px; } #header #nav .dropdown.dropdown-info .social-media { margin-top: 5px; } #header #nav .dropdown.dropdown-dossiers .highlighted a, #header #nav .dropdown.dropdown-retro .highlighted a { display: block; height: 324px; overflow: hidden; border: 1px solid #e6e7e9; } #header #nav .dropdown.dropdown-dossiers .highlighted a:hover, #header #nav .dropdown.dropdown-retro .highlighted a:hover { border-color: #676767; } #header #nav .dropdown.dropdown-dossiers .highlighted a img, #header #nav .dropdown.dropdown-retro .highlighted a img { width: 100%; } #header #nav .dropdown.dropdown-dossiers .highlighted h1, #header #nav .dropdown.dropdown-retro .highlighted h1 { font-size: 20px; margin: 20px 0; } #header #nav .dropdown.dropdown-dossiers .btn, #header #nav .dropdown.dropdown-retro .btn { display: inline-block; margin: 10px auto; } #header #nav .dropdown.dropdown-multimedia .col-left, #header #nav .dropdown.dropdown-multimedia .col-right { width: 482px; margin-right: 0; } #header #nav .dropdown.dropdown-multimedia h4 { margin-right: 18px; } #header #nav .dropdown.dropdown-multimedia .item { position: relative; float: left; margin: 0 17px 17px 0; overflow: hidden; } #header #nav .dropdown.dropdown-multimedia .item a { width: 103px; height: 103px; border: 1px solid #676767; } #header #nav .dropdown.dropdown-multimedia .item a .hover { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#B2FFFFFF', endColorstr='#B2FFFFFF'); /* IE */ color: #676767; text-align: center; font-size: 1.0em; } #header #nav .dropdown.dropdown-multimedia .item a .hover i { display: block; width: 42px; height: 42px; margin: 20px auto 5px; background-image: url('/assets/site/images/layout/photo-hover.png'); background-repeat: no-repeat; background-position: center center; } #header #nav .dropdown.dropdown-multimedia .item:hover a { border-color: #2a2a2a; } #header #nav .dropdown.dropdown-multimedia .item:hover .hover { display: block; } #header #nav .dropdown.dropdown-multimedia .item.video a { width: 223px; } #header #nav .dropdown.dropdown-multimedia .item.video .play { display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: transparent url('/assets/site/images/icons/play.png') center center no-repeat; } #header #nav .dropdown.dropdown-makes h4 { margin-right: 18px; } #header #nav .dropdown.dropdown-makes ul { overflow: hidden; margin: 0 0 10px; } #header #nav .dropdown.dropdown-makes ul li { margin: 0 19px 15px 0; float: left; } #header #nav .dropdown.dropdown-makes ul li a { display: block; width: 101px; height: 90px; background: #fff; border: 1px solid #e6e7e9; overflow: hidden; } #header #nav .dropdown.dropdown-makes ul li a:hover { background: #fff; border-color: #373636; } #header #nav .dropdown.dropdown-makes ul li a img { margin: 10px auto; display: block; } #header #nav-topright ul { padding: 0; margin: 0; list-style-type: none; margin-top: 8px; float: right; } #header #nav-topright ul li { float: left; font-size: 0.7em; } #header #nav-topright ul li.seperator { padding: 0 10px; } #header #nav-topright ul li a, #header #nav-topright ul li a:visited { color: #676767; text-transform: uppercase; text-decoration: none; } #header #nav-topright ul li a:hover, #header #nav-topright ul li a:visited:hover { color: #f99839; } #header #nav-middle ul { padding: 0; margin: 0; list-style-type: none; margin-top: 35px; margin-right: 19px; float: right; } #header #nav-middle ul li { float: left; font-size: 10px; } #header #nav-middle ul li.seperator { padding: 0 10px; } #header #nav-middle ul li a, #header #nav-middle ul li a:visited { color: #676767; text-transform: uppercase; text-decoration: none; display: inline-block; height: 15px; line-height: 15px; } #header #nav-middle ul li a:hover, #header #nav-middle ul li a:visited:hover { color: #f99839; } #header #nav-middle ul li a.language, #header #nav-middle ul li a:visited.language { padding-left: 18px; background-position: left 42%; background-repeat: no-repeat; background-image: url('/assets/site/images/icons/flag-be.png'); } #header #nav-middle ul li a.language.fr, #header #nav-middle ul li a:visited.language.fr { background-image: url('/assets/site/images/icons/flag-fr.png'); } #header .advertisement { margin-bottom: 20px; } /* Header */ .header-notification { color: #2a2a2a !important; display: block; background: #e6e7e9; transition: background .2s; margin-bottom: 20px; text-decoration: none; } .header-notification:hover { background: #c2c3c5; } .header-notification span { color: #fff; display: inline-block; padding: 8px 5px 8px 10px; position: relative; background: #f99839; margin-right: 15px; text-transform: uppercase; } .header-notification span:after { top: 0; right: -8px; width: 8px; height: 100%; content: ''; display: block; position: absolute; background: url(/assets/site/images/icons/arrow-right-large-orange-filled.png) 0 0 no-repeat; background-size: 100% 100%; } .advertisement { text-align: center; } ul.social-media { padding: 0; margin: 0; list-style-type: none; clear: both; display: inline-block; } ul.social-media li { float: left; margin-right: 10px; margin-bottom: 10px; line-height: 45px; font-size: 16px; } ul.social-media li:last-child { margin-left: 0; } ul.social-media li a, ul.social-media li a:visited { background: url('/assets/site/images/icons/socialmedia-sprite.jpg'); width: 45px; height: 45px; display: block; font-size: 0; color: transparent; } ul.social-media li.facebook a { background-position: 450px 0; } ul.social-media li.facebook:hover a { background-position: 450px 45px; } ul.social-media li.mail a { background-position: 45px 0; } ul.social-media li.mail:hover a { background-position: 45px 45px; } ul.social-media li.twitter a { background-position: 90px 0; } ul.social-media li.twitter:hover a { background-position: 90px 45px; } ul.social-media li.youtube a { background-position: 135px 0; } ul.social-media li.youtube:hover a { background-position: 135px 45px; } ul.social-media li.instagram a { background-position: 405px 0; } ul.social-media li.instagram:hover a { background-position: 405px 45px; } ul.social-media li.mobilesite a { background-position: 360px 0; } ul.social-media li.mobilesite:hover a { background-position: 360px 45px; } ul.social-media li.print a { background-position: 180px 0; } ul.social-media li.print:hover a { background-position: 180px 45px; } ul.social-media li.acrobat a { background-position: 315px 0; } ul.social-media li.acrobat:hover a { background-position: 315px 45px; } ul.social-media li.googleplus a { background-position: 270px 0; } ul.social-media li.googleplus:hover a { background-position: 270px 45px; } ul.social-media li.pinterest a { background-position: 225px 0; } ul.social-media li.pinterest:hover a { background-position: 225px 45px; } #wrapper { margin: 0 auto; padding: 0 10px; } #content { width: 668px; float: left; } #content table.fiche td, #content table.fiche th { padding: 4px 0 1px 10px; } #content table.fiche td { color: #666; } #content table.fiche th { width: 290px; } #content table.fiche th.caption { background: #e6e7e9; font-weight: bold; padding-right: 10px; text-transform: uppercase; } #content table.fiche th.caption .title { float: right; font-weight: normal; } #content table.fiche tr:last-child th, #content table.fiche tr:last-child td { padding-bottom: 20px; } #content .block { width: 324px; height: 174px; overflow: hidden; float: left; margin-bottom: 20px; background: #e6e7e9; display: block; position: relative; } #content .block.right { float: right; } #content .block.right .imagebox { width: 320px!important; height: 170px!important; } #content .block.right .imagebox img { width: 100%; } #content .block.tall { height: 368px; } #content .block.tall .imagebox { width: 320px!important; height: 364px!important; } #content .block.tall .imagebox img { height: 100%; width: auto; } #content .block.tall.right .imagebox { width: 319px!important; } #content .block.tall .play { background: url('/assets/site/images/icons/play-120.png') no-repeat center 40%; } #content .block.wide { width: 668px; } #content .block.wide .block-title p.title, #content .block.wide .hover p.title { font-size: 20px; } #content .block.wide.tall { height: 320px; } #content .block.wide.tall .imagebox { width: 663px!important; height: 316px!important; } #content .block.wide.tall .imagebox img { width: 100%; height: auto!important; } #content .block.wide.column .imagebox { width: 668px!important; } #content .block.wide .chart { left: 595px; } #content .block.wide .play { background: url('/assets/site/images/icons/play-120.png') no-repeat center 40%; } #content .block .chart { left: 252px; } #content .block .imagebox { margin: 2px; width: 320px; height: 100%; } #content .block .tags { position: absolute; top: 15px; left: 0; z-index: 15; } #content .block .play { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: url('/assets/site/images/icons/play.png') no-repeat center 40%; } #content .block .block-title { background: #e6e7e9; position: absolute; bottom: 0; width: 100%; color: #1f1f1f; } #content .block .block-title p.title { font-size: 16px; margin: 0; padding: 12px 55px 8px 18px; } #content .block .block-title .date { float: right; font-size: 0.7em; padding: 5px 7px 0 0; } #content .block .block-title .arrow { position: absolute; width: 20px; height: 7px; background: url('/assets/site/images/icons/block-text-arrow.png'); top: -7px; right: 17px; } #content .block.column { background: #fff; border: 2px solid #e6e7e9; width: 664px; height: 170px; } #content .block.column img { margin: 0; top: -40%; } #content .block.column .column-title { position: absolute; top: 17px; left: 250px; text-transform: uppercase; font-size: 1.3em; width: 394px; } #content .block.column .column-title .quote-open, #content .block.column .column-title .quote-close { color: #f99839; } #content .block.column a, #content .block.column a:visited { color: #676767; display: block; text-decoration: none; } #content .block.column .button { background: #676767 url('/assets/site/images/icons/fastforward.png') no-repeat right center; border-right: 5px solid #676767; color: #fff; height: 10px; width: 70px; margin: 0; padding: 4px 5px 6px 5px; font-size: 0.6em; font-weight: normal; text-transform: uppercase; margin-top: 4px; } #content .block.score { height: 562px; background: #fff; } #content .block.score .owl-controls { top: 25px; left: 0; right: 0; color: #fff; position: absolute; } #content .block.score .owl-controls .owl-dot { float: left; padding: 0 4px 0 2px; display: block; } #content .block.score .owl-controls .owl-dot span { width: 12px; height: 12px; display: block; background: url(/assets/site/images/icons/owl-dots.png) no-repeat; } #content .block.score .owl-controls .owl-dot.active span { background-position: 0 -12px; } #content .block.score .title { font-size: 1.2em; margin: 0 0 14px; color: #7a7a7a; } #content .block.score .title span { padding-right: 5px; text-decoration: uppercase; color: #222; } #content .block.score .chartsbox { height: 267px; position: relative; } #content .block.score .chartsbox .chart { position: relative; left: auto; right: 0; top: 0; } #content .block.score .chartsbox .chart.chart-large { margin-left: 130px; } #content .block.score .chartsbox ul.charts { padding: 0; margin: -10px auto 12px; display: inline-block; list-style-type: none; } #content .block.score .chartsbox ul.charts li { float: left; margin: 0 5px; } #content .block.score .chartsbox ul.charts li .chart { width: 60px; } #content .block.score .chartsbox ul.charts li .chart-title { text-transform: uppercase; font-size: 0.8em; margin-bottom: 5px; } #content .block.score .positive, #content .block.score .negative { padding: 20px 50px 20px 20px; height: 129px; line-height: 20px; overflow: hidden; } #content .block.score .positive { background: #e2f5de url('/assets/site/images/icons/positive.png') no-repeat 258px 10px; margin-bottom: 2px; } #content .block.score .negative { background: #f5d5d4 url('/assets/site/images/icons/negative.png') no-repeat 258px 10px; } #content .block.score-table { background: #fff; overflow: visible; } #content .block.score-table table { width: 100%; font-size: 0.8em; text-transform: uppercase; border-spacing: 0; border-collapse: collapse; } #content .block.score-table table td, #content .block.score-table table th { padding: 3px 17px 0; } #content .block.score-table table th { height: 17px; background: #e6e7e9; } #content .block.score-table table td { height: 15px; } #content .block.score-table table td.align-right { text-align: right; } #content .block.competitors { background: none; height: auto!important; } #content .block.competitors .block { margin-bottom: 0; position: relative; height: 167px; } #content .block.competitors .block:last-child { margin-top: 1px; } #content .share { text-align: center; border-bottom: 1px solid #676767; margin-bottom: 20px; padding-bottom: 5px; } #content .photos { margin-bottom: 20px; } #content .photos .spotlight { width: 668px; max-height: 348px; overflow: hidden; position: relative; margin-bottom: 10px; } #content .photos .imagebox { float: left; width: 101px; height: 101px; margin-left: 12px; display: block; border: 1px solid #676767; background-image: url('/assets/placeholders/square.jpg'); } #content .photos .imagebox:first-child { margin-left: 0; } #content .photos .imagebox.imagebox-wide { width: 214px; } #content .photos .imagebox.imagebox-wide img { width: 100%; height: auto; margin-top: -9px; } #content .photos .imagebox img { width: auto; height: 101px; } #content .photos .imagebox .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background: url('/assets/site/images/icons/play.png') no-repeat center center; } #content .quote-open { font-size: 6em; line-height: 0; display: block; height: 40px!important; margin-left: -8px; } #content .quote-close { font-size: 2.5em; line-height: 0!important; margin-left: 2px; } #content .quote-close .cufon { height: 10px!important; top: 2px; } #content .timeline { position: relative; } #content .timeline .line { position: absolute; width: 100%; height: 3px; background: #676767; top: 154px; left: 0; z-index: 1; } #content .timeline .left, #content .timeline .right { position: absolute; top: -9px; width: 33px; height: 21px; z-index: 200; top: 145px; } #content .timeline .left { left: 0; background: url('/assets/site/images/icons/timeline-left.png'); } #content .timeline .right { right: 0; background: url('/assets/site/images/icons/timeline-right.png'); } #content .timeline .period { width: 602px; height: 292px; margin: 10px 0 0 33px; position: relative; } #content .timeline .period .period-inner { position: relative; width: 602px; height: 292px; } #content .timeline .period .period-circle { z-index: 100; position: absolute; left: 0; top: 119px; width: 52px; height: 52px; background: url('/assets/site/images/layout/timeline-period.png'); text-transform: uppercase; z-index: 2; } #content .timeline .period .period-circle .period-circle-inner { margin: 12px 0 0 12px; width: 27px; height: 27px; font-size: 0.75em; text-align: center; overflow: hidden; white-space: normal; } #content .timeline .period .event { z-index: 100; position: absolute; left: 0; top: 137px; width: 17px; height: 17px; background: url('/assets/site/images/layout/timeline-event.png'); } #content .timeline .period .event-info, #content .timeline .period .event .event-info { height: 109px; width: 268px; position: absolute; background: #fff; padding: 10px; white-space: normal; } #content .timeline .period .event-info .text, #content .timeline .period .event .event-info .text { float: left; width: 148px; padding-top: 2px; } #content .timeline .period .event-info .text .type, #content .timeline .period .event .event-info .text .type { color: #676767; text-transform: uppercase; font-size: 1.1em; } #content .timeline .period .event-info .text .title, #content .timeline .period .event .event-info .text .title { color: #1f1f1f; text-decoration: none; font-size: 1.2em; } #content .timeline .period .event-info a .title, #content .timeline .period .event .event-info a .title, #content .timeline .period .event-info a:visited .title, #content .timeline .period .event .event-info a:visited .title { color: #1f1f1f; text-decoration: none; } #content .timeline .period .event-info:hover, #content .timeline .period .event .event-info:hover { background: #d8dadd; } #content .timeline .period .event-info:hover .arrow.arrow-down, #content .timeline .period .event .event-info:hover .arrow.arrow-down { background-position: right bottom; } #content .timeline .period .event-info:hover .arrow.arrow-up, #content .timeline .period .event .event-info:hover .arrow.arrow-up { background-position: left bottom; } #content .timeline .period .event-info .image, #content .timeline .period .event .event-info .image { float: right; border: 1px solid #6b6b6a; display: block; } #content .timeline .period .event-info .arrow, #content .timeline .period .event .event-info .arrow { background: url('/assets/site/images/icons/timeline-arrow-sprite.png') no-repeat; position: absolute; width: 16px; height: 8px; bottom: -8px; } #content .timeline .period .event-info .arrow.arrow-down, #content .timeline .period .event .event-info .arrow.arrow-down { background-position: right top; } #content .timeline .period .event-info .arrow.arrow-up, #content .timeline .period .event .event-info .arrow.arrow-up { top: -8px; } #content .comments { margin-bottom: 20px; } #content .comments .inner { padding: 15px 0; } /* Content */ #content .article .article-header h1 { font-size: 2.7em; margin: 0 0 16px 0; padding: 0; } #content .article .article-header h1 span { display: block; color: #676767; } #content .article .article-content { margin-bottom: 20px; } #content .article .article-content .advertisement { float: left; border-bottom: 6px solid #fff; border-right: 12px solid #fff; background: #fff; } #content .article .article-content .author { display: block; height: 22px; border-bottom: 1px solid #2a2a2a; margin-bottom: 10px; font-size: 12px; } #content .article .article-content .author .date { float: right; } #content .article .article-content p a, #content .article .article-content p a:visited { color: #f99839; } #content .article .article-content p a:hover, #content .article .article-content p a:visited:hover { text-decoration: none; } #content .article .article-content .quote { float: right; background: #292929; width: 300px; padding: 18px; color: #fff; margin: 0 0 10px 10px; font-size: 18px; text-transform: uppercase; } #content .article .article-content .quote .orange { color: #f99839; } #content .article .article-tags { clear: both; margin-bottom: 20px; } #content .article .article-tags p { margin-bottom: 0; } #content .article.article-test-simple .article-content .sidebox { float: right; width: 324px; margin: 0 0 15px 15px; } #content .article.article-test-simple .article-content .sidebox .block { margin-bottom: 0; } #content .article.article-test-simple .article-content .sidebox .block.score { height: auto; margin-bottom: 20px; } #content .related { margin-bottom: 20px; width: 668px; height: 357px; background: #e6e7e9; } #content .related .related-item { background: #e6e7e9; border-bottom: 1px solid #fff; padding: 10px; display: block; width: 334px; float: left; } #content .related .related-item .text { float: left; width: 143px; padding-top: 2px; } #content .related .related-item .text .type { color: #676767; text-transform: uppercase; font-size: 1.1em; } #content .related .related-item .text .title { font-size: 1.08em; } #content .related .related-item a .title, #content .related .related-item a:visited .title { color: #1f1f1f; text-decoration: none; } #content .related .related-item:hover { background: #d8dadd; } #content .related .related-item .image { float: right; border: 1px solid #6c6b6a; display: block; width: 87px; height: 87px; overflow: hidden; } /* Content.articles */ #sidebar { width: 300px; float: right; } #sidebar .sidebox { margin-bottom: 20px; } #sidebar .sidebox .inner { padding: 15px; background: #e6e7e9; } #sidebar .share { margin-bottom: 20px; } #sidebar .share a.share-item, #sidebar .share a.share-item:visited { width: 69px; margin-left: 8px; display: block; float: left; text-decoration: none; } #sidebar .share a.share-item:first-child, #sidebar .share a.share-item:visited:first-child { margin-left: 0; } #sidebar .share a.share-item.facebook:hover .count, #sidebar .share a.share-item:visited.facebook:hover .count { background: #6786b5; } #sidebar .share a.share-item.mail:hover .count, #sidebar .share a.share-item:visited.mail:hover .count { background: #8d8d8d; } #sidebar .share a.share-item.twitter:hover .count, #sidebar .share a.share-item:visited.twitter:hover .count { background: #69c3e6; } #sidebar .share a.share-item.youtube:hover .count, #sidebar .share a.share-item:visited.youtube:hover .count { background: #dc655d; } #sidebar .share a.share-item .icon, #sidebar .share a.share-item:visited .icon { height: 68px; margin-bottom: 3px; display: block; background: url('/assets/site/images/icons/socialmedia-sprite-lg.jpg') no-repeat; } #sidebar .share a.share-item.facebook .icon, #sidebar .share a.share-item:visited.facebook .icon { background-position: 0 0; } #sidebar .share a.share-item.facebook .icon:hover, #sidebar .share a.share-item:visited.facebook .icon:hover { background-position: 0 -68px; } #sidebar .share a.share-item.mail .icon, #sidebar .share a.share-item:visited.mail .icon { background-position: -69px 0; } #sidebar .share a.share-item.mail .icon:hover, #sidebar .share a.share-item:visited.mail .icon:hover { background-position: -69px -68px; } #sidebar .share a.share-item.twitter .icon, #sidebar .share a.share-item:visited.twitter .icon { background-position: -138px 0; } #sidebar .share a.share-item.twitter .icon:hover, #sidebar .share a.share-item:visited.twitter .icon:hover { background-position: -138px -68px; } #sidebar .share a.share-item.youtube .icon, #sidebar .share a.share-item:visited.youtube .icon { background-position: -207px 0; } #sidebar .share a.share-item.youtube .icon:hover, #sidebar .share a.share-item:visited.youtube .icon:hover { background-position: -207px -68px; } #sidebar .share a.share-item .count, #sidebar .share a.share-item:visited .count { color: #fff; font-size: 0.7em; text-align: center; padding-top: 2px; display: block; } #sidebar .share a.share-item.facebook .count, #sidebar .share a.share-item:visited.facebook .count { background: #4c70a8; } #sidebar .share a.share-item.twitter .count, #sidebar .share a.share-item:visited.twitter .count { background: #4fbae3; } #sidebar .share a.share-item.youtube .count, #sidebar .share a.share-item:visited.youtube .count { background: #d64b42; } #sidebar .share a.share-item.mail .count, #sidebar .share a.share-item:visited.mail .count { background: #7a7a7a; } #sidebar .advertisement { margin-bottom: 20px; } #sidebar .spotlight { margin-bottom: 20px; } #sidebar .spotlight .spotlight-item { background: #e6e7e9; border-bottom: 1px solid #fff; padding: 10px; transition: background-color 0.3s; -o-transition: background-color 0.3s; -moz-transition: background-color 0.3s; -webkit-transition: background-color 0.3s; } #sidebar .spotlight .spotlight-item .number { float: left; width: 38px; color: #c6c6c6; font-size: 1.8em; line-height: 1; margin-top: 4px; } #sidebar .spotlight .spotlight-item .text { float: left; width: 143px; padding-top: 2px; } #sidebar .spotlight .spotlight-item .text .type { color: #676767; text-transform: uppercase; font-size: 1.1em; } #sidebar .spotlight .spotlight-item .text .title { font-size: 1.08em; } #sidebar .spotlight .spotlight-item a .title, #sidebar .spotlight .spotlight-item a:visited .title { color: #1f1f1f; text-decoration: none; } #sidebar .spotlight .spotlight-item:hover { background-color: #d8dadd; } #sidebar .spotlight .spotlight-item .image { float: right; border: 1px solid #6c6b6a; display: block; width: 87px; height: 87px; overflow: hidden; } #sidebar .gas-prices .gas-price { float: left; width: 100px; height: 164px; background: url('/assets/site/images/icons/gas.png') no-repeat center center; color: #fff; text-align: center; font-size: 1.5em; margin-bottom: 20px; } #sidebar .gas-prices .gas-price.diesel { background-color: #edd47c; } #sidebar .gas-prices .gas-price.diesel:hover { background-color: #e7c54f; } #sidebar .gas-prices .gas-price.petrol { background-color: #bde39f; } #sidebar .gas-prices .gas-price.petrol:hover { background-color: #a2d778; } #sidebar .gas-prices .gas-price.lpg { background-color: #A0D8D8; } #sidebar .gas-prices .gas-price.lpg:hover { background-color: #7cc9c9; } #sidebar .gas-prices .gas-price .name { text-transform: uppercase; margin-top: 20px; } #sidebar .gas-prices .gas-price .price { margin-top: 73px; } #sidebar .popular-photo-specials { background: #e6e7e9; margin: 0 0 20px; padding: 0 0 10px; } #sidebar .popular-photo-specials .cycle { margin-top: 20px; } #sidebar .popular-photo-specials .cycle .prev-photo, #sidebar .popular-photo-specials .cycle .next-photo { position: absolute; top: 16px; height: 66px; width: 23px; cursor: pointer; background-image: url('/assets/site/images/layout/cycle-arrow-sprite.png'); display: none; } #sidebar .popular-photo-specials .cycle .prev-photo { left: 10px; width: 24px; background-position: 94px 0; } #sidebar .popular-photo-specials .cycle .prev-photo:hover { background-position: 70px 0; } #sidebar .popular-photo-specials .cycle .next-photo { right: 10px; background-position: 46px 0; } #sidebar .popular-photo-specials .cycle .next-photo:hover { background-position: 23px 0; } #sidebar .popular-photo-specials .cycle .item { width: 200px; margin-right: 10px; font-size: 1.1em; } #sidebar .popular-photo-specials .cycle .item img { border: 1px solid #676767; } #sidebar .popular-photo-specials .cycle .item a, #sidebar .popular-photo-specials .cycle .item a:visited { text-decoration: none; } #sidebar .popular-photo-specials .cycle .item a img, #sidebar .popular-photo-specials .cycle .item a:visited img { display: block; width: 198px; height: 106px; } #sidebar .popular-photo-specials .cycle .item .title { padding: 0 5px; margin-top: 5px; color: #1f1f1f; } #sidebar .popular-photo-specials .cycle .item:hover .title { color: #f99839; } #sidebar .popular-photo-specials .cycle .item .title-sub { padding: 0 5px; text-transform: uppercase; color: #676767; } /* Sidebar */ #cycle { height: 109px; margin-bottom: 25px; position: relative; } #cycle #prev, #cycle #next { position: absolute; top: 0; height: 109px; width: 45px; cursor: pointer; background-image: url('/assets/site/images/layout/cycle-arrow-sprite.png'); } #cycle #prev { left: 0; background-position: 0 0; } #cycle #prev:hover { background-position: 229px 0; } #cycle #next { right: 0; background-position: 184px 0; } #cycle #next:hover { background-position: 139px 0; } #cycle .item { width: 263px; height: 109px; background: #e6e7e9; margin-right: 2px; padding: 9px; } #cycle .item .text { float: left; width: 164px; font-size: 1.1em; white-space: normal; } #cycle .item .text .type { color: #676767; text-transform: uppercase; } #cycle .item .text .title { color: #1f1f1f; } #cycle .item img { float: right; border: 1px solid #6d6d6d; } #footer { border-top: 5px solid #292929; background: #e6e7e9; margin-bottom: 25px; } #footer .title { color: #2a2a2a; text-transform: uppercase; font-size: 1.1em; } #footer .title a { color: #2a2a2a; text-decoration: none; } #footer .advertisement { text-align: center; margin: 20px 0; } #footer .cols { padding: 10px 25px 20px; overflow: hidden; } #footer .cols .col { width: 250px; float: left; } #footer .cols .col:last-child { width: 188px; } #footer .cols .col p { margin: 1em 0; } #footer .cols .col .distributor a, #footer .cols .col .distributor a:visited { color: #2a2a2a; text-decoration: none; } #footer .cols .col .distributor a:hover, #footer .cols .col .distributor a:visited:hover { color: #409900; } #footer .cols .col .distributor a img, #footer .cols .col .distributor a:visited img { margin-right: 5px; } #footer .cols .col p.contact-details a, #footer .cols .col p.contact-details a:visited { color: #2a2a2a; text-decoration: none; } #footer .cols .col p.contact-details a:hover, #footer .cols .col p.contact-details a:visited:hover { text-decoration: underline; } #footer .cols .col ul.links { padding: 0; margin: 0 0 25px; list-style-type: none; line-height: 20px; } #footer .cols .col ul.links li a, #footer .cols .col ul.links li a:visited { color: #2a2a2a; text-decoration: none; font-size: 13px; } #footer .cols .col ul.links li a:hover, #footer .cols .col ul.links li a:visited:hover { text-decoration: underline; } #footer .copyright { height: 69px; background: #2a2a2a; color: #fff; padding: 20px; } #footer .copyright p { text-transform: uppercase; float: left; padding: 0; margin: 0; } #footer .copyright .icon { float: right; } /* Footer */ #sticky { display: block; width: 198px; position: absolute!important; top: 163px; left: -208px; } #sticky a { margin: 0 0 5px; } .cycle-fullwidth { margin: 0 0 20px 0; overflow: hidden; position: relative; } .cycle-fullwidth .item { display: block; float: left; margin-right: 1px; } .cycle-fullwidth .item a { color: #2a2a2a; text-decoration: none; position: relative; display: block; width: 263px; height: 109px; background: #e6e7e9; padding: 15px 110px 0 15px; } .cycle-fullwidth .item a:hover { background: #d8dadd; } .cycle-fullwidth .item h1 { text-transform: uppercase; height: 16px; font-size: 16px; color: #676767; margin-bottom: 10px; } .cycle-fullwidth .item h1, .cycle-fullwidth .item p { width: 143px; overflow: hidden; white-space: normal; } .cycle-fullwidth .item p { font-size: 14px; line-height: 18px; } .cycle-fullwidth .item .image { position: absolute; right: 10px; top: 10px; border: 1px solid #676767; display: block; width: 89px; height: 89px; } .cycle-fullwidth .prev, .cycle-fullwidth .next { position: absolute; top: 0; z-index: 10; height: 109px; width: 45px; cursor: pointer; background-image: url('/assets/site/images/layout/cycle-arrow-sprite.png'); display: none; } .cycle-fullwidth .prev { left: 0; background-position: 0 0; } .cycle-fullwidth .prev:hover { background-position: -45px 0; } .cycle-fullwidth .next { right: 0; background-position: -90px 0; } .cycle-fullwidth .next:hover { background-position: -135px 0; } #cycle-webshop .cycle-carousel-wrap { background: #eee; } #cycle-webshop .item { margin-right: 2px; } #cycle-webshop .item:hover a { background: #eee; } #cycle-webshop .item a { padding: 10px 15px 0 15px; background: #fff; transition: background .2s; } #cycle-webshop .item h1 { width: 100%; } #cycle-webshop .item p { width: 165px; height: 36px; } #cycle-webshop .item .image { top: auto; right: 15px; width: 60px; height: 60px; bottom: 10px; } #cycle-webshop .item .price { left: 15px; color: #08b200; bottom: 10px; position: absolute; font-size: 18px; } #cycle-webshop .item .price s { color: #000; font-size: 12px; } .logobox h1 { font-size: 16px; font-weight: bold; text-transform: uppercase; padding: 4px 0 1px 5px; text-indent: 5px; background: #e6e7e9; margin: 15px 0 20px; } .logobox .cell { display: inline-block; padding: 2px 10px; width: 220px; } .logobox .cell:hover { background-color: #d8dadd; } .logobox .cell.spaced { margin: 0 10px; } .logobox .logo { display: block; width: 146px; height: 100px; margin: 0 21px 20px 0; float: left; border: 1px solid #e6e7e9; overflow: hidden; padding: 10px; text-align: center; } .logobox .logo:hover { border-color: #676767; } .logobox a { display: block; width: 100%; color: #2a2a2a; text-decoration: none; } .subpage-navigation { margin: 20px 0; } .subpage-navigation a { display: block; background-repeat: no-repeat; background-color: #e6e7e9; text-decoration: none; text-transform: uppercase; color: #292929; font-size: 1.2em; color: #676767; } .subpage-navigation a .dark { color: #373636; } .subpage-navigation a.up { height: 33px; line-height: 38px; padding: 0 22px; background-image: url('/assets/site/images/icons/arrow-up.png'); background-position: 582px 0; } .subpage-navigation a.up:hover { background-position: 582px bottom; } .subpage-navigation a.large { height: 144px; padding: 22px 70px 22px 22px; margin-top: 2px; background-image: url('/assets/site/images/icons/arrow-right-large-gray.png'); background-position: 600px 20px; font-size: 1.4em; } .subpage-navigation a.large:hover { background-image: url('/assets/site/images/icons/arrow-right-large-orange.png'); } .subpage-navigation a.large .title { display: block; text-transform: none; font-size: 1.6em; line-height: 1.1em; max-height: 103px; overflow: hidden; } .subpage-navigation a.large .title .dark { display: block; font-size: 0.8em; } .subpage-navigation a.large .image { display: block; width: 103px; height: 103px; border: 1px solid #676767; float: left; margin-right: 20px; } .articlelist { margin-bottom: 20px; } .articlelist .article { display: block; position: relative; height: 154px; overflow: hidden; padding: 10px 10px 10px 270px; } .articlelist .article:nth-child(odd) { background: #e6e7e9; } .articlelist .article:nth-child(odd):hover { background: #d8dadd; } .articlelist .article .innerbox { overflow: hidden; position: relative; height: 134px; } .articlelist .article .innerbox .title { font-size: 1.2em; margin: 5px 50px 0 0; } .articlelist .article .innerbox .intro { height: 60px; margin: 0.5em 0 0; } .articlelist .article .innerbox .links { position: absolute; bottom: 0; left: 0; } .articlelist .article .innerbox .links .tag .inner { margin-right: 10px; text-decoration: none; } .articlelist .article:hover { background: #f3f3f3; } .articlelist .article:hover .innerbox .links .tag .inner { background: #f99839; } .articlelist .article:hover .innerbox .links .tag .inner .arrow { background: url('/assets/site/images/icons/tag-arrow-sprite.png') 0 -26px no-repeat; } .articlelist .article:hover .figurebox .play { /* background-color: #fff; */ } .articlelist .article .date { font-size: 0.7em; position: absolute; top: 10px; right: 10px; } .articlelist .article .figurebox { position: absolute; left: 10px; top: 10px; border: 1px solid #676767; } .articlelist .article .figurebox .tags { position: absolute; top: 15px; left: 0; z-index: 5; } .articlelist .article .figurebox .play { display: block; width: 100%; height: 100%; background: url('/assets/site/images/icons/play.png') 50% 50% no-repeat; position: absolute; left: 0; top: 0; } .articlelist .article .figurebox .imagebox { width: 250px; height: 134px; } .articlelist .article .figurebox .imagebox .thumbs { display: block; overflow: hidden; width: 67px; height: 100%; position: absolute; right: 0; top: 0; line-height: 0!important; } .articlelist .article .figurebox .imagebox .thumbs img { width: 67px; height: 67px; border-left: 1px solid #676767; } .articlelist .article .figurebox .imagebox .thumbs img:first-child { border-bottom: 1px solid #676767; } .fuelbox { margin-bottom: 25px; } .fuelbox.icon { min-height: 60px; padding-left: 100px; background-repeat: no-repeat; } .fuelbox.icon-pump { background-image: url('/assets/site/images/icons/icon-pump.png'); } .fuelbox.icon-oil { background-image: url('/assets/site/images/icons/icon-oil.png'); } .fuelbox.icon-flame { background-image: url('/assets/site/images/icons/icon-flame.png'); } .fuelbox table { color: #fff; } .fuelbox table thead { color: #2a2a2a; } .fuelbox table .green { background-color: #edd47c; } .fuelbox table .green.hover:hover { background-color: #e7c54f; } .fuelbox table .lightgreen { background-color: #bde39f; } .fuelbox table .lightgreen.hover:hover { background-color: #a2d778; } .fuelbox table .gray { background-color: #656565; } .fuelbox table .gray.hover:hover { background-color: #4b4b4b; } .fuelbox table .lightgray { background-color: #6f6f6f; } .fuelbox table .lightgray.hover:hover { background-color: #565656; } .fuelbox table .red { background-color: #df4502; } .fuelbox table .red.hover:hover { background-color: #ac3502; } .fuelbox table .lightred { background-color: #ee4900; } .fuelbox table .lightred.hover:hover { background-color: #bb3900; } .fuelbox table .lightblue { background-color: #A0D8D8; } .fuelbox table .lightblue.hover:hover { background-color: #7cc9c9; } /* Vertical centering */ .template-list-1 { /* http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */ /* for adaptive (quirk) explorer only*/ /* for adaptive (quirk) explorer only */ /* optional: #inner[id] {position: static;} */ } .template-list-1 .outer { overflow: hidden; position: relative; } .template-list-1 .outer[id] { display: table; position: static; } .template-list-1 .middle { position: absolute; top: 50%; } .template-list-1 .middle[id] { display: table-cell; vertical-align: middle; width: 100%; position: static; } .template-list-1 .inner { position: relative; top: -50%; } /* TEMPLATE LIST 1 + 2 */ .template-list-1 { margin-bottom: 60px; /* &.circles */ } .template-list-1 .header { margin-bottom: 50px; } .template-list-1 .header h1 { font-size: 40px; line-height: 42px; } .template-list-1 .header p { margin: 20px 0 0 210px; font-size: 16px; line-height: 29px; font-weight: bold; } .template-list-1 .item { display: -ms-flexbox; display: flex; padding: 15px 0; -ms-flex-align: center; align-items: center; } .template-list-1 .item .item-body { width: 100%; position: relative; } .template-list-1 .item .item-body .back { position: absolute; top: 50%; z-index: -1; display: block; width: 100%; font-size: 240px; text-align: center; color: #e6e7e9; transform: translateY(-50%); } .template-list-1 .item .item-image { -ms-flex: 0 0 50%; flex: 0 0 50%; -ms-flex-order: -1; order: -1; display: -ms-flexbox; display: flex; margin-right: 40px; -ms-flex-line-pack: center; align-content: center; -ms-flex-pack: center; justify-content: center; } .template-list-1 .item .item-image img { border: 2px solid #e6e7e9; } .template-list-1 .item h1 { font-size: 25px; line-height: 27px; margin: 29px 0 0; } .template-list-1 .item p { font-size: 16px; line-height: 29px; margin: 5px 0 16px; } .template-list-1 .item a { text-decoration: none; } .template-list-1 .item a.tag { margin-bottom: 10px; } .template-list-1 .item a.tag:hover .inner { background-color: #f99839; } .template-list-1 .item a.tag:hover .inner .arrow { background: url('/assets/site/images/icons/tag-arrow-sprite.png') 0 -26px no-repeat; } .template-list-1 .item-even .item-image { -ms-flex-order: 1; order: 1; margin-left: 40px; margin-right: 0; } .template-list-1.circles .header { margin-bottom: 0; } .template-list-1.circles .item-body .back { font-size: 250px; } .template-list-1.circles .item-image .mask-circle { width: 248px; border: 8px solid #e6e7e9; height: 248px; margin: auto; display: -ms-flexbox; display: flex; overflow: hidden; border-radius: 100%; } .template-list-1.circles .item-image img { width: 100%; border: 0; height: auto; } /* LIST 3 (LARGE NUMBER, TEXT + PHOTO) */ .template-list-3 { margin-bottom: 60px; } .template-list-3 .header { margin-bottom: 30px; } .template-list-3 .header h1 { font-size: 42px; margin-bottom: 23px; } .template-list-3 .header p { margin: 20px 0 0 213px; font-size: 16px; line-height: 29px; font-weight: bold; } .template-list-3 .item { margin-bottom: 20px; } .template-list-3 .item:last-child { margin-bottom: 0; } .template-list-3 .item:hover { background: #e6e7e9; } .template-list-3 .item a { color: #f99839; text-decoration: none; } .template-list-3 .item a.tag:hover .inner { background: #f99839; } .template-list-3 .item a.tag:hover .arrow { background: url('/assets/site/images/icons/tag-arrow-sprite.png') 0 -26px no-repeat; } .template-list-3 .item .top, .template-list-3 .item .content { width: 100%; display: block; padding-left: 212px; } .template-list-3 .item .top { position: relative; border-bottom: 2px solid #676767; } .template-list-3 .item .top .no { left: 0; color: #676767; width: 212px; bottom: -48px; display: block; position: absolute; font-size: 175px; text-align: center; } .template-list-3 .item .top .imagebox { width: 456px; height: 238px; } .template-list-3 .item .content { margin-top: 20px; } .template-list-3 .item .content h1 { font-size: 24px; } .template-list-3 .item .content p { margin: 16px 10px 16px 0; font-size: 16px; line-height: 26px; } .template-list-3 .item .content .tag { margin-bottom: 16px; } /* .template-list-3 */ input[type="text"], input[type="email"], textarea { width: 450px; border: 1px solid #e6e7e9; margin: 0; padding: 6px 4px 2px; font-size: 14px; line-height: 20px; } input[type="text"]:focus, input[type="email"]:focus, textarea:focus { border: 1px solid #676767; } input[type="text"]:hover, input[type="email"]:hover, textarea:hover { border-color: #cbcdd1; } input[type="radio"], input[type="checkbox"] { width: auto; } textarea { min-height: 150px; height: 200px; resize: vertical; max-height: 440px; } .form-horizontal .form-group { margin: 0 0 10px; } .form-horizontal .form-group .control-label { display: inline-block; width: 160px; float: left; margin: 0 10px 0 0; line-height: 32px; } .form-horizontal .form-group .form-control { display: inline-block; width: 460px; } .form-horizontal .form-group input[type="radio"], .form-horizontal .form-group input[type="checkbox"] { margin: 0 5px 0 0; } #searchwrapper { width: 532px; background: #e6e7e9; margin: 30px auto 40px; } #searchwrapper .top { padding: 20px; } #searchwrapper .top .report { font-size: 20px; } #searchwrapper .top .report .count { color: #42d66c; display: block; margin-top: 5px; } #searchwrapper .top .center { margin-top: 20px; } #searchwrapper .top .center .search-wrapper { margin: 0 20px 0 80px; } #searchwrapper .top .center .search-wrapper .field { background-color: #fff; } #searchwrapper .top .center .btn { height: 35px; line-height: 35px; position: relative; top: -1px; } #searchwrapper .cols { border: 1px solid #fff; border-width: 1px 0; } #searchwrapper .cols .col { width: 133px; display: inline-block; float: left; padding: 6px 0 0 6px; } #searchwrapper .cols .col label { display: block; text-transform: uppercase; font-size: 13px; line-height: 22px; color: #676767; margin-bottom: 6px; cursor: pointer; } #searchwrapper .cols .col label.hover, #searchwrapper .cols .col label.hover > div { display: inline-block; } #searchwrapper .cols .col label div { margin-right: 5px; } #searchwrapper .bottom { padding: 6px; } /* /searchwrapper */ .filterform { display: block; width: 580px; margin: 20px auto 30px; background: #e6e7e9; position: relative; padding: 10px 87px 10px 10px; } .filterform .inner .row { margin: 20px 0 0; } .filterform .inner .row:first-child { margin: 0; } .filterform .inner select { width: 240px; margin: 0 20px 0 0; } .filterform .inner select.small { width: 160px; } .filterform .submit { position: absolute; bottom: 10px; right: 10px; line-height: 21px; color: #fff; border: 0; font-size: 14px; padding: 3px 10px 0; text-transform: uppercase; display: inline-block; background: #f99839; } .filterform .submit:hover { background-color: #faa552; text-decoration: none; } .filterform .checkboxtable label { display: block; text-transform: uppercase; font-size: 13px; line-height: 25px; color: #676767; cursor: pointer; } .filterform .checkboxtable label.hover, .filterform .checkboxtable label.hover > div { display: inline-block; color: #4e4e4e; } .filterform .checkboxtable label div { margin-right: 5px; } /* /.filterform */ .filterform2 { display: block; width: 580px; margin: 20px auto 30px; padding: 20px; background: #e6e7e9; position: relative; } .filterform2 .make-year-button { height: 50px; } /* /.filterform */ .form { width: 640px; margin-top: 25px; } .form input[type="text"], .form input[type="email"], .form textarea { width: 450px; } .form .btn { float: right; } .form label { float: left; margin-right: 20px; width: 170px; padding-top: 3px; } /* Form */ .alert { padding: 8px 35px 8px 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; margin-bottom: 20px; } .alert.close { position: relative; top: -2px; right: -21px; line-height: 18px; } .alert.alert-success { background-color: #dff0d8; border-color: #d6e9c6; } .alert.alert-success.alert-heading { color: #468847; } .alert.alert-success { background-color: #dff0d8; border-color: #d6e9c6; } .alert.alert-danger, .alert.alert-error, .alert.alert-danger { background-color: #f2dede; border-color: #eed3d7; } .alert.alert-danger .alert-heading, .alert.alert-error .alert-heading, .alert.alert-danger .alert-heading { color: #b94a48; } .alert.alert-info { background-color: #d9edf7; border-color: #bce8f1; } .alert.alert-info .alert-heading { color: #3a87ad; } .alert .alert-heading { display: block; margin-bottom: 22px; } .alert p { margin: 0; } /* Alert */ .lt-ie9.no-touch #content .block .hover { display: none; } .lt-ie9.no-touch #content .block:hover .hover { display: block; } .no-touch { /* #content */ } .no-touch #content { /* .block */ /* .photos */ } .no-touch #content .block .hover { display: block; /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 5-7 */ filter: alpha(opacity=0); /* Netscape */ -moz-opacity: 0; /* Safari 1.x */ -khtml-opacity: 0; /* Good browsers */ opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); color: #1f1f1f; transition: all .3s; -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; } .no-touch #content .block .hover p.title { font-size: 1.2em; margin: 0 auto; text-align: center; } .no-touch #content .block .hover .tag { position: absolute; bottom: 13px; right: 20px; } .no-touch #content .block:hover .hover { /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 5-7 */ filter: alpha(opacity=100); /* Netscape */ -moz-opacity: 1; /* Safari 1.x */ -khtml-opacity: 1; /* Good browsers */ opacity: 1; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#B2FFFFFF', endColorstr='#B2FFFFFF'); /* IE */ } .no-touch #content .block:hover .block-title { display: none; } .no-touch #content .block.column:hover .button { background-color: #f99839; border-color: #f99839; } .no-touch #content .block.competitors .block:hover .block-title { display: none; } .no-touch #content .block.competitors .block:hover .hover { display: block; } .no-touch #content .block.competitors:hover .block-title { display: block; } .no-touch #content .block.competitors:hover .hover { display: none; } .no-touch #content .photos .spotlight .hover { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#B2FFFFFF', endColorstr='#B2FFFFFF'); /* IE */ background-image: url('/assets/site/images/layout/photo-spotlight-hover.png'); background-repeat: no-repeat; background-position: center center; color: #676767; text-align: center; font-size: 1.4em; } .no-touch #content .photos .spotlight .hover .count { padding-top: 216px; } .no-touch #content .photos .spotlight .hover.zoom { background-image: url('/assets/site/images/layout/zoom-spotlight-hover.png'); } .no-touch #content .photos .spotlight .hover.video { background-image: url('/assets/site/images/layout/video-spotlight-hover.png'); } .no-touch #content .photos .spotlight .hover span { font-size: 1.3em; display: block; text-align: center; margin-top: 250px; } .no-touch #content .photos .spotlight:hover .hover { display: block; } .no-touch #content .photos .imagebox .hover { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.7); background-repeat: no-repeat; background-position: center center; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#B2FFFFFF', endColorstr='#B2FFFFFF'); /* IE */ } .no-touch #content .photos .imagebox .hover.photo { background-image: url('/assets/site/images/layout/photo-hover.png'); color: #676767; text-align: center; font-size: 1.4em; } .no-touch #content .photos .imagebox .hover.photo .count { position: absolute; top: 73px; left: 0; text-align: center; display: block; width: 100%; } .no-touch #content .photos .imagebox:hover .hover { display: block; } .no-touch #content .photos .imagebox:hover .video { background-color: rgba(255, 255, 255, 0.7); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#B2FFFFFF', endColorstr='#B2FFFFFF'); /* IE */ } /* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } /* a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } */ /* * Don't show links for images, or javascript/internal links */ a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } #header > *, #sidebar, #promobalk, #footer, .breadcrumbs, .advertisement, .related, .comments, .share { display: none; } #header .logo { display: block; } #content { margin-top: 30px; width: 100%; } }