/** * HTML5 âœ° Boilerplate * * style.css contains a reset, font normalization and some base styles. * * Credit is left where credit is due. * Much inspiration was taken from these projects: * - yui.yahooapis.com/2.8.1/build/base/base.css * - camendesign.com/design/ * - praegnanz.de/weblog/htmlcssjs-kickstart */ /** * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark * html5doctor.com/html-5-reset-stylesheet/ */ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } html,body{ height:100%; /* height:auto!important; */ } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /** * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/ */ body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */ /* Normalize monospace sizing: en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ pre, code, kbd, samp { font-family: monospace, sans-serif; } /** * Minimal base styles. */ /* 1) Always force a scrollbar in non-IE 2) Remove iOS text size adjust without disabling user zoom: www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ html { overflow-y: scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } /* j.mp/webkit-tap-highlight-color */ a:link { -webkit-tap-highlight-color: #FF5E99; text-decoration: none; } /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ a:hover, a:active { outline: none; } a, a:active, a:visited { color: #607890; } a:hover { color: #036; } ul, ol { margin-left: 2em; } ul {list-style-type: none;} ol { list-style-type: decimal; } /* Remove margins for navigation lists */ nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } small { font-size: 85%; } b, strong, th { font-weight: bold; } td { vertical-align: top; } /* Set sub, sup without affecting line-height: gist.github.com/413930 */ sub, sup { font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; } pre { /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; } .ie6 legend, .ie7 legend { margin-left: -7px; } /* 1) Make inputs and buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ 2) WebKit browsers add a 2px margin outside the chrome of form elements. Firefox adds a 1px margin above and below textareas 3) Set font-size to match 's, and font-family to sans-serif 4) Align to baseline */ button, input, select, textarea { width: auto; overflow: visible; margin: 0; font-size: 100%; font-family: sans-serif; vertical-align: baseline; } /* 1) Remove default scrollbar in IE: www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ 2) Align to text-top */ textarea { overflow: auto; vertical-align:text-top; } /* Hand cursor on clickable input elements */ label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } /* Remove extra padding and inner border in Firefox */ input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } /* Colors for form validity */ input:valid, textarea:valid { } input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } /* Bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ .ie7 img { -ms-interpolation-mode: bicubic; } /** * You might tweak these.. */ body, select, input, textarea { /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ color: #444; /* Set your base font here, to apply evenly */ /* font-family: Georgia, serif; */ } /* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */ h1, h2, h3, h4, h5, h6 { font-weight: bold; } /* These selection declarations have to be separate No text-shadow: twitter.com/miketaylr/status/12228805301 */ ::-moz-selection { background: #003466; color:#fff; text-shadow: none; } ::selection { background:#003466; color:#fff; text-shadow: none; } /** * Primary styles * * Author: Sascha Steinbach * Date: 2012/04/09 * * */ #skip-link a, #skip-link a:visited { display: block; width: 100%; padding: 2px 0 3px 0; text-align: center; background-color: #666; color: #fff; } /** * Generic theme-independent base styles. imported from Drupals system.base.css */ /** * Autocomplete. * * @see autocomplete.js */ /* Suggestion list */ #autocomplete { border: 1px solid; overflow: hidden; position: absolute; z-index: 100; } #autocomplete ul { list-style: none; list-style-image: none; margin: 0; padding: 0; } #autocomplete li { background: #fff; color: #000; cursor: default; white-space: pre; } /* Animated throbber */ html.js input.form-autocomplete { background-image: url(../../misc/throbber.gif); background-position: 100% 2px; /* LTR */ background-repeat: no-repeat; } html.js input#edit-address.form-autocomplete { background-image: none; } html.js input.throbbing { background-position: 100% -18px; /* LTR */ } /** * Collapsible fieldsets. * * @see collapse.js */ html.js fieldset.collapsed { border-bottom-width: 0; border-left-width: 0; border-right-width: 0; height: 1em; } html.js fieldset.collapsed .fieldset-wrapper { display: none; } fieldset.collapsible { position: relative; } fieldset.collapsible .fieldset-legend { display: block; } /** * Resizable textareas. * * @see textarea.js */ .form-textarea-wrapper textarea { display: block; margin: 0; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .resizable-textarea .grippie { background: #eee url(../../misc/grippie.png) no-repeat center 2px; border: 1px solid #ddd; border-top-width: 0; cursor: s-resize; height: 9px; overflow: hidden; } /** * TableDrag behavior. * * @see tabledrag.js */ body.drag { cursor: move; } .draggable a.tabledrag-handle { cursor: move; float: left; /* LTR */ height: 1.7em; margin: -0.4em 0 -0.4em -0.5em; /* LTR */ padding: 0.42em 1.5em 0.42em 0.5em; /* LTR */ text-decoration: none; } a.tabledrag-handle:hover { text-decoration: none; } a.tabledrag-handle .handle { background: url(../../misc/draggable.png) no-repeat 0 0; height: 13px; margin-top: 4px; width: 13px; } a.tabledrag-handle-hover .handle { background-position: 0 -20px; } div.indentation { float: left; /* LTR */ height: 1.7em; margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */ padding: 0.42em 0 0.42em 0.6em; /* LTR */ width: 20px; } div.tree-child { background: url(../../misc/tree.png) no-repeat 11px center; /* LTR */ } div.tree-child-last { background: url(../../misc/tree-bottom.png) no-repeat 11px center; /* LTR */ } div.tree-child-horizontal { background: url(../../misc/tree.png) no-repeat -11px center; } .tabledrag-toggle-weight-wrapper { text-align: right; /* LTR */ } /** * TableHeader behavior. * * @see tableheader.js */ table.sticky-header { background-color: #fff; margin-top: 0; } /** * Progress behavior. * * @see progress.js */ /* Bar */ .progress .bar { background-color: #fff; border: 1px solid; } .progress .filled { background-color: #000; height: 1.5em; width: 5px; } .progress .percentage { float: right; /* LTR */ } /* Throbber */ .ajax-progress { display: inline-block; } .ajax-progress .throbber { background: transparent url(../../misc/throbber.gif) no-repeat 0px -18px; float: left; /* LTR */ height: 15px; margin: 2px; width: 15px; } .ajax-progress .message { padding-left: 20px; } tr .ajax-progress .throbber { margin: 0 2px; } .ajax-progress-bar { width: 16em; } /** * Inline items. */ .container-inline div, .container-inline label { display: inline; } /* Fieldset contents always need to be rendered as block. */ .container-inline .fieldset-wrapper { display: block; } /** * Prevent text wrapping. */ .nowrap { white-space: nowrap; } /** * For anything you want to hide on page load when JS is enabled, so * that you can use the JS to control visibility and avoid flicker. */ html.js .js-hide { display: none; } /** * Hide elements from all users. * * Used for elements which should not be immediately displayed to any user. An * example would be a collapsible fieldset that will be expanded with a click * from a user. The effect of this class can be toggled with the jQuery show() * and hide() functions. */ .element-hidden { display: none; } /** * Hide elements visually, but keep them available for screen-readers. * * Used for information required for screen-reader users to understand and use * the site where visual display is undesirable. Information provided in this * manner should be kept concise, to avoid unnecessary burden on the user. * "!important" is used to prevent unintentional overrides. */ .element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } /** * The .element-focusable class extends the .element-invisible class to allow * the element to be focusable when navigated to via the keyboard. */ .element-invisible.element-focusable:active, .element-invisible.element-focusable:focus { position: static !important; clip: auto; } .hide-text { overflow: hidden; text-indent:110%; } /** * Markup free clearing. * * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* IE6 */ * html .clearfix { height: 1%; } /* IE7 */ *:first-child + html .clearfix { min-height: 1%; } /* BIKES 2012 LINK */ a#bikes2012 { position: absolute; top: 0; right: 90px; color: #fff; background-color: #000; padding: 4px; height: 12px; overflow: hidden; font-size: 12px; line-height: 12px; text-transform: uppercase; } .messages.error { position: absolute; top: 0; left: 0; font-size: 12px; } /* * Corratec specific styles -> mobile first */ @font-face { font-family: 'AvantageBold'; src: url('../files/webfonts/avab-webfont.eot'); src: url('../files/webfonts/avab-webfont.eot?#iefix') format('embedded-opentype'), url('../files/webfonts/avab-webfont.woff') format('woff'), url('../files/webfonts/avab-webfont.ttf') format('truetype'), url('../files/webfonts/avab-webfont.svg#AvantageBold') format('svg'); font-weight: normal; font-style: normal; } body { font: 1em/1.5em 'PT Sans', sans-serif; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center top; background-attachment: fixed; } body.front { background-image: url(/sites/all/themes/corratec/images/bg-images/mountains-bikes-01.jpg); } body.not-front { background: #c7c7c7 url(../images/bg-body-tile.gif) 0 0 repeat-x; } #wrapper { position: relative; width: 98%; max-width: 480px; min-height: 100%; margin: 0 auto -162px; } header { position: relative; width: 100%; max-width: 480px; margin: 0 auto; padding-top: 43px; z-index: 100; } /* specific styles for mobile which has to be reset on other versions, e.g. display: none, etc. */ #user-login-form { display: none; } .navbar .nav-collapse { background-color: #000; } #likebutton { float:left; margin-right:65px; } .not-logged.in .loggedlink { display: none; } /* NAVI -> original desktop copied, has to be cleansed up!!!! */ #nav{ background: black; height: auto } #nav a{ display:block; } #nav li > ul{ position: relative; max-height:0; overflow: hidden; } #nav .toggle > ul { max-height:9999px; overflow: visible; } #nav > li > ul > li{ display:block; width: 100%; position:relative; background: white; } *+html #nav > li > ul > li{ float: left; } #nav > li > ul > li > a { padding: 15px; font-size: 13px; font-weight: bold; color: black; line-height: 8px; border-top: 1px solid #cccccc; position: relative; } #nav > li > ul > li:first-child > a{ border: none; } #nav > li > ul > li > a > span{ display: block; color: #949494; font-size: 11px; } #nav > li > ul > li.toggle > a, #nav > li > ul > li:hover > a, #nav > li > ul > li > a:hover{ background: #f4f4f4; } #nav > li > ul > li.toggle > a:after, #nav > li > ul > li:hover > a:after, #nav > li > ul > li > a:hover:after{ background: url("../images/css-sprite.png") 0 -178px no-repeat; content:''; display: block; height:9px; margin-top: -4px; position: absolute; right: 15px; top: 50%; width:5px; } #nav a.active-trail { color:#000; } #nav > li > ul > li.toggle > a > span, #nav > li > ul > li:hover > a > span, #nav > li > ul > li > a:hover > span{ color: #92b4d4; } #nav > li > ul > li > ul > li{ display: block; background: white; background: #cecece; /* Old browsers */ background: -moz-linear-gradient(left, #cecece 0%, #ffffff 5%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cecece), color-stop(5%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #cecece 0%,#ffffff 5%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #cecece 0%,#ffffff 5%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #cecece 0%,#ffffff 5%,#ffffff 100%); /* IE10+ */ background: linear-gradient(left, #cecece 0%,#ffffff 5%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } *+html #nav > li > ul > li > ul > li{ float: left; width: 100%; } #nav > li > ul > li > ul > li > a{ color: #003466; border-top: 1px solid #cfcfcf; padding: 10px 15px; font-size: 13px; line-height: 11px; font-weight: bold; } #nav > li > ul > li > ul > li > a > span{ display: block; color: #949494; font-size: 11px; } #nav > li > ul > li > ul > li:first-child > a{ border-top: none; } #nav > li > ul > li > ul > li.toggle > a, #nav > li > ul > li > ul > li > a:hover, #nav > li > ul > li > ul > li:hover > a{ color: white; background: #003466; background: #002d59; /* Old browsers */ background: -moz-linear-gradient(left, #002d59 0%, #003466 5%, #003466 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#002d59), color-stop(5%,#003466), color-stop(100%,#003466)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #002d59 0%,#003466 5%,#003466 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #002d59 0%,#003466 5%,#003466 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #002d59 0%,#003466 5%,#003466 100%); /* IE10+ */ background: linear-gradient(left, #002d59 0%,#003466 5%,#003466 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002d59', endColorstr='#003466',GradientType=1 ); /* IE6-9 */ } #nav > li > ul > li > ul > li > ul{ width: 100%; /* padding: 10px 0; */ padding:0; background: #cecece; /* Old browsers */ background: -moz-linear-gradient(left, #cecece 0%, #ffffff 5%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cecece), color-stop(5%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #cecece 0%,#ffffff 5%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #cecece 0%,#ffffff 5%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #cecece 0%,#ffffff 5%,#ffffff 100%); /* IE10+ */ background: linear-gradient(left, #cecece 0%,#ffffff 5%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } /* Usability: Displays the submenu after hovering once */ #nav > li > ul > li > ul > li.open > ul{ display: block; } #nav > li > ul > li > ul > li.open > ul > li{ opacity: 1 !important; } *+html #nav > li > ul > li > ul > li.open > ul > li{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important; filter: alpha(opacity=100) !important; } #nav > li > ul > li > ul > li > ul > li{ display: block; margin-left: 15px; border-left: 1px solid #a5a5a5; padding-left: 10px; } *+html #nav > li > ul > li > ul > li > ul > li{ float: left; width: 100%; } #nav > li > ul > li > ul > li > ul > li > a{ color: #0b0b0b; line-height: 13px; padding-top: 10px; padding-bottom: 10px; font-size: 12px; } /*#nav > li > ul > li > ul > li > ul > li:first-child > a{ padding-top: 0; } */#nav > li > ul > li > ul > li > ul > li.open > a, #nav > li > ul > li > ul > li > ul > li > a:hover, #nav > li > ul > li > ul > li > ul > li:hover > a{ color: black; } #nav > li > ul > li > ul > li > ul > li > a > span{ display: block; font-size: 11px; color: #949494; } /* END OF mobile NAvi*/ /* Slider */ .rhino-btn { background: 0 0 no-repeat; z-index: 10; width: 56px; height: 53px; display: block; text-indent: -999%; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .rhino-play { background-position: 0 0; } .rhino-play:hover { background-position: 0 -53px; } .rhino-pause { background-position: -56px 0; } .rhino-pause:hover { background-position: -56px -53px; } .rhino-container { position: relative; } .rhino-bullets {display: none;} .rhino-bullets, .rhino-bullets div { position: absolute; z-index: 9; left:50%; height:11px; overflow:hidden; } .rhino-bullets { overflow:visible; bottom: -3px; background: transparent url(../images/bg-black-transparency.png) 0 0 repeat; bottom: 40px; right: 24px; left: auto!important; margin-left:auto!important; padding: 5px; } .rhino-bullets ol { position: relative; overflow: hidden; margin-left:0!important; } .rhino-bullets li { float: left; display: inline; margin: 0; } .rhino-bullets .rhino-bullet { text-indent: -9000px; display: block; margin: 0 5px 0 0; left:0; top:0; width: 11px; height: 11px; cursor: pointer; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; background: transparent url(../images/css-sprite.png) -11px -53px no-repeat; } .rhino-bullets .rhino-bullet:hover, .rhino-bullets .rhino-bullet:focus { color: #999; } .rhino-bullets .rhino-bullet.rhino-active-bullet { background: transparent url(../images/css-sprite.png) 0 -53px no-repeat; } .rhino-bullets .rhino-bullet.rhino-last-bullet {margin-right:0!important;} /* */ /* bulletType == hoverImage */ .bullets-hoverImage .rhino-hover-images { position:absolute; padding: 2px; background:#fff; width:120px; display:none; z-index:10; margin-left:-32px; } .bullets-hoverImage .rhino-hover-images:after { content: ""; position: absolute; bottom: -7px; border-width: 7px 7px 0; border-style: solid; border-color: #fff transparent; display: block; width: 0; left:50%; margin-left:-7px; } .bullets-hoverImage .rhino-hover-images img { position:absolute; top:0; left:0; z-index:0; padding: 2px; display:none; } /* */ #slider {width:978px;height:395px;overflow: hidden;} #slider article { position: relative; width: 100%; max-width: 978px; height: 100%; max-height: 395px; overflow: hidden; padding: 0; } #slider article .image-big { position: relative; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; font-size: 100%; } #slider article .image-big .spacer { width: 100%; height: 100%; position: relative; } #slider article .image-big img { width: 100%; height: 100%; position: absolute; } #slider article .image-big .spacer img { width: auto; height: 100%; left: 50%; margin-left: -30%; } #slider article .image-big a { display: block; position: absolute; left: 0px; padding: 0; width: 100%; height: 356px; max-height: 100%; color: #fff; font-size: 140%; text-align: left; text-transform: uppercase; z-index: 100; } #slider article .image-big a.externalLink { position: relative; } #slider article .image-big a.externalLink img { position: absolute; top: 0; left: 0; z-index: 0; } #slider article .image-big .sliderextratitle p { text-transform: upper-case; padding: 10px; max-width: 60%; background-color: #000; font-family:'PT Sans',sans-serif; font-size: 60%; line-height: 90%; } @media (min-width: 768px) { #slider article .image-big .sliderextratitle p { text-transform: upper-case; padding: 10px; max-width: 60%; background-color: #000; font-family:'PT Sans',sans-serif; font-size: 140%; line-height: 150%; } #nav > li > ul > li > ul{ position:absolute; left: 25%; top: 0; width: 100%; } } #slider article .image-big .sliderLink { position: absolute; padding: 10px; z-index: 10; bottom: 10%; font-size: 80%; left: 39px; background: transparent url(../images/bg-black-transparency.png) 0 0 repeat; } #slider article .image-big .sliderextratitle.sliderLink { background: none; } @media only screen and (min-width: 480px) { #slider article .image-big .sliderLink {background: none;} } @media only screen and (min-width: 768px) { #slider article .image-big .sliderLink { position: absolute; z-index: 10; bottom: 10%; font-size: 80%; left: 39px; } article.frontpage-block { padding: 0; width: 100%; margin-top: 10px; background-color: #000; } .frontpage-block .left { float: left; width: 671px; margin: 0 10px 0 0; } .frontpage-block h2 { font-size: 18px; color: #fff; margin: 5px 0 10px 15px; } .frontpage-block .right { position: relative; float: left; width: 280px; font-size: 14px; line-height: 18px; color: #fff; } .frontpage-block .right h2 { float: none; text-align: left; font-size: 16px; line-height: 18px; color: #fff; margin: 0 0 20px 0; } .frontpage-block .right a.blocklink { display: inline-block; margin: 0 0 0 0; } } #slider article .image-big.news a { font-family: "AvantageBold",sans-serif; } #slider article h2 { position: absolute; bottom: 10%; left: 40px; color: #fff; margin: 0; text-align: left; } #slider article.biketeaser h2 { position: relative; bottom: 0; left: 0; color: #fff; padding-right: 20px; margin: 12px 0 0 20px; text-align: left; text-transform: none; } #slider article .intro { position: absolute; bottom: 35px; left: 40px; width: 60%; height: 66px; padding: 10px 106px 10px 10px; background-color: #000; color: #fff; text-align: left; font-size: 85%; line-height: 115%; } #slider article.biketeaser .intro { width: auto; } #slider article .intro p { position: relative; width: 60%; height: 66px; padding: 0px 0px 0px 0px; } #slider article .intro a { position: absolute; top: 0; right: 0; display: block; width: 86px; height: 86px; text-indent: -9000px; border: none; border-radius: 0; padding: 0; background: transparent url(../images/css-sprite.png) 0 -72px no-repeat; } #headernavs { width: 100%; position: absolute; height: 42px; right: 0; top: 0; padding: 5px 10px; background-color: rgba(255,255,255,0.4); box-sizing: border-box; } #headernavs .container { margin: 0 auto; width: 100%; max-width: 978px; } #headernav { float: right; width: 536px; } #headernav a { float: left; } @media screen and (max-width: 769px) { #headernavs { z-index: 110; } } @media screen and (max-width: 681px) { #headernav { float: none; width: 80%; } } @media screen and (max-width: 523px) { #headernav { float: none; width: 80%; } .header-dsv { display: none; } #header-yumpu { margin-right: 5px!IMPORTANT; } .language-switcher-locale-url { margin-left: 0; } } #headernav i { font-size: 24px; color: #003466; margin: 7px 5px 0 0; float: left; } li.da, li.nl, li.be { display: none; } .header-dsv { float: left; margin: 5px 20px 0 0; } .header-dsv img { width: 120px; height: auto; } a.extralink { font-size: 14px; line-height: 35px; padding: 0 5px; color: #000000; font-weight: 600; } #twbikes { display: none; } #header-youtube { display: block; } #header-yumpu { float: left; display: block; width: 22px; height: 21px; margin: 8px 0px 0px 2px; margin-right: 30px; background-image: url(/sites/default/files/background-images/bg-yumpu.png); } .language-switcher-locale-url { float: right; position: relative; top: 0; right: 0; } .language-switcher-locale-url li { float: left; } .language-switcher-locale-url a, .language-switcher-locale-url span { color:#000; display: block; font-size:.75em; line-height:2.7em; padding:0 12px; text-transform: uppercase; } .language-switcher-locale-url a:hover, .language-switcher-locale-url span:hover { background: #767676; color:#fff; } .language-switcher-locale-url abbr { border:none; cursor: pointer; } .language-switcher-locale-url a.active, .language-switcher-locale-url span.active { background: #003466; color:#fff; } header nav ul, header nav li, #footer-navi nav ul, #footer-navi nav li { margin: 0; list-style:none; list-style-image: none; } header ul li.expanded, header ul li.leaf, #footer-navi ul li.expanded, #footer-navi ul li.leaf { list-style-image: none; list-style-type: none; padding: 0; } .navbar { background:#000; border-bottom:12px solid #003466; font-size: 80%; padding: 8px 21px; position: relative; z-index: 2; } header h1 { float: left; width: 138px; margin:11px 22px 11px 0; } header h1 a { display: block; width: 138px; height: 14px; text-indent: -9000px; background: transparent url(../images/logo-corratec-small.png) 0 0 no-repeat; } .main-content { padding-bottom:20px; } .centered-content { width: 100%; max-width: 480px; margin: 0 auto; z-index: 90; } .spamspan { float: none!IMPORTANT; margin: 0!IMPORTANT; } .column { float: left; } #user-login-form .item-list { display: none; } /* --------------------------------------------------- h2 TAGS ----------------------------------------- */ h2 { font-size: 100%; margin:0 15px 0px 0; text-transform:uppercase; text-align:right; font-family: "AvantageBold", sans-serif; line-height: 120%; padding:10px 0 0 0; } h2 span { font-size:80%; line-height: 100%; color:#898888; } h2 small { color:#898888; display: block; font-size:.4em; line-height:100%; } /* ----------------------------- node-bike-seite styles ----------------------------- */ .node-type-bike-seite h2 { text-align: left; font-size: 24px; } .node-type-bike-seite h2 small { font-size: 18px; } .node-type-bike-seite h2 .colors { font-size: 13px; line-height: 14px; font-family: "PT Sans",sans-serif; margin-top: 15px; } .node-type-bike-seite .teaser-toggle { display: none; } article.node-bike-seite { width: 100%; padding: 0 1.5%; box-sizing: border-box; } .techniquelogos { float: none; padding-left: 0; position: relative; width: 100%; } .techniquelogos a { margin: 0 10px 10px 0; width: auto; } #viewport { background:#fff; clear: both; width:100%; height: auto; } .hotspots-pointers, #hotspot-description, #magnification, .hotspotLine { display: none; } @media only screen and (min-width: 480px) { } @media only screen and (min-width: 768px) { #viewport { height:580px; margin:35px 0 45px; padding:50px 0 0; position:relative; text-align: center; -webkit-moz-box-shadow:0 0 15px 5px rgba(163, 163, 163, .25); -moz-moz-box-shadow:0 0 15px 5px rgba(163, 163, 163, .25); -ms-moz-box-shadow:0 0 15px 5px rgba(163, 163, 163, .25); -o-moz-box-shadow:0 0 15px 5px rgba(163, 163, 163, .25); box-shadow:0 0 15px 5px rgba(163, 163, 163, .25); } .hotspots-pointers, #hotspot-description, #magnification, .hotspotLine { display: block; } article.node-bike-seite { padding:15px 0 0 0; box-sizing: border-box; } .node-type-bike-seite .teaser-toggle { display: block; } .techniquelogos { float: left; padding-left:20px; position: relative; width: 33%; } .techniquelogos a { display: inline-block; margin-bottom: 4px; min-height: 36px; text-align: center; vertical-align: middle; width: 40%; } h2 { font-size: 120%; margin:0 15px 0px 0; text-transform:uppercase; text-align:right; font-family: "AvantageBold", sans-serif; line-height: 130%; padding:10px 0 0 0; } .node-type-bike-seite h2 { text-transform: none; font-size: 40px; line-height: 42px; text-align: right; width: 33%; margin-right: 0; padding:10px 10px 0 0; } .node-type-bike-seite h2 small { font-size: .4em; } h2 span { font-size:100%; color:#898888; } .node-type-bike-seite h2, .node-type-bike-seite .teaser, .node-type-bike-seite .techniquelogos { box-sizing:border-box; } .node-type-bike-seite .teaser { border-right: 1px solid #8e8e8e; border-left: 1px solid #8e8e8e; margin-top: 10px; padding:0 20px; position: relative; width: 33%; } } /* --------------------------------------------------- end of h2 TAGS ----------------------------------------- */ h3 { font-size: 110%; text-transform:uppercase; } h4 { font-size: 90%; text-transform:uppercase; } .hidden { display:none; } /*details*/ #details { margin: 0 auto; min-width: 15em; width: 25%; } #details ul { padding:15px 15px 15px 15px; margin: 0; } #details ul li { font-size:16px; color:#c6c5c5; border-bottom:1px solid #333333; padding:0 0 10px 0; margin:0 0 10px 0; } #details ul li:last-child { padding:0; margin:0; border:none; } #details ul li:last-child { padding:0; margin:0; border:none; } #details ul li.highlight a { text-transform:uppercase; color:#fff; font-weight:bold; } #details h3.accToggle { background:url(../images/bg-details-switch.gif) top right no-repeat #fff; color:#000; padding:13px 0 7px 10px; font-size:20px; margin: 0; } #details h3.accToggle.active { background:url(../images/bg-details-switch.gif) bottom right no-repeat #000; color:#fff; } #details span.title { text-transform: uppercase; font-weight: bold; color: #fff; } #details #details-manuals li { list-style-type: disc; line-height: 14px; } #details #details-manuals a { font-size: 12px; } /*structure*/ article { width: 100%; margin:0 auto; padding:15px 0 0 0; } #headline { width:100%; height:auto; } .teaser { float:left; font-size:12px; line-height:15px; } #addInfo { clear: both; width: 100%; max-width:565px; margin:0 auto; position:relative; } .prev-next-bike { margin-top:42px; margin-bottom:35px; } .prev-next-bike a:active, .prev-next-bike a:visited { color:#fff; } .prevBike, .nextBike { width:43px; height:43px; display:block; text-indent:-5000px; float:left; } .prevBike { margin:0 1px 0 0; background:url(../images/bg-prevbike.gif) top left no-repeat; } .nextBike { background:url(../images/bg-nextbike.gif) top right no-repeat; } .prevBike:hover { background-position:0 -43px; } .nextBike:hover { background-position:0 -43px; } .factswitch { height:37px; width: 100%; position:relative; top: 0; margin:0; text-align: center; } .factswitch li { display: inline; margin:0 15px 0 0; padding:8px 40px 0 15px; background:url(../images/bg-factswitch.png) top right no-repeat; } .factswitch li:last-child { background-image: none; } .factswitch li .factswitch li a { text-align:center; font-size:14px; font-weight:bold; text-transform:uppercase; color:#000; } .factswitch li a:hover, .factswitch li a.active { color:#013566; } .facts { width: 100%; } .facts li { font-size:13px; line-height:19px; display: inline; } .facts li span{ font-weight:bold; text-transform:uppercase; } /*features*/ .features { width:191px; position:relative; z-index:5; } .features li { height:30px; text-align:right; } .features li a { font-size:16px; text-transform:uppercase; font-weight:bold; color:#fff; background-color:#000; padding:4px 10px 5px 10px; } .features li a:hover { background-color:#013566; } /*techniques*/ .techniques { float:right; } .js .techniquelogos .teaser-toggle { left:auto; right:0; top:0; } .techniques li { height:23px; float:left; margin:0 30px 30px 0; display:block; } .techniques li:nth-child(2n) { margin:0 0 30px 0; } /*bikes*/ .section-bikes #main-content { max-width:none; padding-bottom:0; } .bikes{ width:978px; position:absolute; top:20px; z-index:0; } .bikes li { width:auto; height:575px; margin:0 auto; } .node-bike-seite section#headline { position: relative; } a#testsiegel { position: absolute; top: 90px; right: 0; } .not-logged-in a#testsiegel { z-index: 50; } .hotspots-view .image { margin: 0 auto; width: 840px; } .hotspots-pointers { position: absolute; top: 0; left: 0; } /* Technologien */ body.node-type-technologien { background:#000; -webkit-background-size: auto; -moz-background-size: auto; -o-background-size: auto; background-size: auto; } body.node-type-technologien.page-node-11, body.node-type-technologien.page-node-514 {background: url(../images/bg-technologien/bg-2circle-suspension.jpg) center top fixed no-repeat;} body.node-type-technologien.page-node-27, body.node-type-technologien.page-node-522 {background: url(../images/bg-technologien/biometricbow.jpg) center top fixed no-repeat;} body.node-type-technologien.page-node-26, body.node-type-technologien.page-node-521 {background: url(../images/bg-technologien/c-29er.jpg) center top fixed no-repeat;} body.node-type-technologien.page-node-28, body.node-type-technologien.page-node-520 {background: url(../images/bg-technologien/fusion-tube.jpg) center top fixed no-repeat;} body.node-type-technologien.page-node-21, body.node-type-technologien.page-node-519 {background: url(../images/bg-technologien/lpc-NEW.jpg) center top fixed no-repeat;} body.node-type-technologien.page-node-30, body.node-type-technologien.page-node-523 {background: url(../images/bg-technologien/procontrolfork.jpg) center top fixed no-repeat;} body.node-type-technologien.page-node-25, body.node-type-technologien.page-node-516 {background: url(../images/bg-technologien/prosizesystem.jpg) center top fixed no-repeat;} body.node-type-technologien.page-node-20, body.node-type-technologien.page-node-518 {background: url(../images/bg-technologien/tcm+revolution.jpg) center top fixed no-repeat;} body.node-type-technologien.page-node-29, body.node-type-technologien.page-node-517 {background: url(../images/bg-technologien/ubbs.jpg) center top fixed no-repeat;} body.node-type-technologien.page-node-152, body.node-type-technologien.page-node-524 {background: url(../images/bg-technologien/maurosannio.jpg) center top fixed no-repeat;} body.node-type-technologien.page-node-153, body.node-type-technologien.page-node-515 {background: url(../images/bg-technologien/miss-c.jpg) center top fixed no-repeat;} body.node-type-technologien.page-node-1245, body.node-type-technologien.page-node-1248 {background: url(../images/bg-technologien/linkinside.jpg) center top fixed no-repeat;} .page-node-28 .technology img, .page-node-21 .technology img, .page-node-153 .technology img, .page-node-30 .technology img, .page-node-29 .technology img, .page-node-26 .technology img, .page-node-515 .technology img, .page-node-521 .technology img, .page-node-520 .technology img, .page-node-519 .technology img, .page-node-523 .technology img, .page-node-517 .technology img { margin-left: 8px; background-color: #fff;} /* Imagevideo & Bikefinder Frontpage */ #front-bikefinder { width:100%; overflow: hidden; height:auto; margin-top:20px; } #front-bikefinder.videos { background-color: #000; text-align: center; height: 399px; } #front-bikefinder h2 { background-color: black; width: 98%; text-align: left; padding: 2%; font-size: 18px; color: #fff; margin:0; position: relative; } #front-testthebest{ width:100%; height:auto; max-height: 35px; overflow: hidden; margin-top:20px; background-color: #000; } #front-testthebest p { display: none; } #front-testthebest h2{ background-color: black; width: 96%; text-align: left; padding: 2%; font-size: 18px; color: #fff; margin:0; position: relative; } #front-testthebest h2 a, #front-bikefinder h2 a { color: #fff; } @media only screen and (min-width: 978px) { #front-bikefinder { width:642px; float: left; overflow: hidden; height:400px; margin-top:20px; } #front-bikefinder h2 { background-color: black; width: 622px; text-align: left; padding: 10px; font-size: 18px; color: #fff; margin:0; position: relative; } #front-testthebest{ width:306px; max-height:399px; float: left; margin-right:30px; overflow: hidden; margin-top:20px; } #front-testthebest h2{ width: 286px; text-align: left; padding: 10px; font-size: 18px; color: #fff; margin:0; position: relative; } #front-testthebest h2 a { color: #fff; } } @media only screen and (min-width: 978px) { #front-testthebest p { display: block; } } .readmore { text-indent:-9999px; display: block; position: absolute; right:0; top:0; background:url(../images/bg-readmore.jpg) no-repeat; width:35px; height:35px; } /* NEWS und Standardseiten -> formerly in styles-mel.css */ #news ul, #news ol, #news dl, #standardseite ul, #standardseite ol, #standardseite dl { padding: 0; margin: 0; list-style:none; } #standardseite ol.styled { list-style: decimal; margin-left: 20px; margin-bottom: 20px; } #news h2, #standardseite h2{ padding-bottom:30px;font-family: 'AvantageBold'!important; text-transform:uppercase; font-size:40px; color:#000000; line-height:16px;} #standardseite h2 {text-align: left;} #standardseite h2.sub { padding-bottom: 0; margin-bottom: 0; font-size: 32px; line-height: 40px; } #standardseite h2.sub span { font-size: 20px; } #news h2 span, #standardseite h2 span { color:#9f9f9f; font-size:16px;text-transform:uppercase;} #news, #standardseite {font-size:16px; line-height:19px; color: #013566; padding-bottom:15px; position:relative; margin:0 auto!important; width:978px!important;} .content {float:left; clear:both;} article#news, article#standardseite { width:100%; line-height:24px; /*background: #dadada;*/ font-size:16px; margin: 0; padding: 0; color: #222121; } article#news p, article#standardseite p { margin-bottom: 24px; } article#news .left , article#standardseite .left { float:left; width:443px; padding-right:30px; } article#news .right , article#standardseite .right { float:right; width:443px; } article#news section , article#standardseite section { float:left; padding-bottom:50px; } article#news section div, article#standardseite section div { padding-right:30px; float:left; line-height:16px; } article#news section div p, article#standardseite section div p { color:#464646; font-size:13px; padding:20px; background:#ffffff; margin-top: -2px; } article#news section div h3, article#standardseite section div h3 { font-family: 'AvantageBold'!important; color:#ffffff; background:#000000; padding: 10px 0px 12px 10px; } article#news section div h3 span, article#standardseite section div h3 span { color:#989898; font-size:12px; } article#news .col, article#standardseite .col { width:306px; } article#news .smallCol , article#standardseite .smallCol { width:222px; } article#news .midCol , article#standardseite .midCol { width:474px; } article#news .largeCol, article#standardseite .largeCol { width:642px; } article#news .col:nth-child(3n), article#news .smallCol:nth-child(4n), article#news .midCol:nth-child(2n), article#news .largeCol:nth-child(2n), article#standardseite .col:nth-child(3n), article#standardseite .smallCol:nth-child(4n), article#standardseite .midCol:nth-child(2n), article#standardseite .largeCol:nth-child(2n) { margin:0 0 0 0; padding: 0 0 0 0; } article#news .col img, article#standardseite .col img { width:306px; height:189px; } article#news .smallCol img , article#standardseite .smallCol img { width:222px; height:138px; } article#news .midCol .title img , article#standardseite .midCol img { /*width:474px; height:293px; */ width: 100%; height: auto; margin: 10px 0; } article#news .largeCol img , article#standardseite .largeCol img { width:642px; height:397px; } article#news .image-big, article#standardseite .image-big { float:left; clear:both; padding-bottom:30px; } article#news .intro, article#standardseite .intro { color:#222121; font-size:29px; line-height:30px; padding-bottom:50px; padding-right:40px; } article#news .introSmall, article#standardseite .introSmall { font-size:16px; line-height:24px; padding-top:30px; padding-bottom:30px; } article#news .infoBox , article#standardseite .infoBox { border:1px solid #c0c0c0; background:#ffffff; float:left; padding:30px; width:918px; margin-bottom:50px; } article#news .infoBox p, article#news p.infoBox, article#standardseite .infoBox p, article#standardseite p.infoBox { color:#464646; font-size:13px; line-height: 19px; } article#news .infoBox h3, article#standardseite .infoBox h3 { color:#222121; } article#news .infoExtended, article#standardseite .infoExtended { float:left; margin-bottom:50px; font-size:13px; color: #ffffff; padding:3px 15px 5px 50px; background: #013566 url(../images/infoExtended.png) no-repeat left top; } article#news .list , article#standardseite .list { } article#news ul, article#standardseite ul { margin-bottom: 24px; } article#news ul li , article#standardseite ul li { background: url(../images/list.png) no-repeat left 7px; padding-left:22px; width: 421px; text-transform: uppercase; height: 29px; } .node-type-2-spaltige-standardseite article#standardseite ul li, .page-stellenangebote article#news ul li { background: none; padding-left:22px; width:auto; text-transform:none; height:auto; padding-left: 15px; margin-bottom: 8px; } .node-type-2-spaltige-standardseite article#standardseite ul li:before, .page-stellenangebote article#news ul li:before { background: url(../images/list.png) no-repeat left 4px; content: ''; width: 12px; height: 15px; margin-left: -15px; display: inline-block; } article#news a img, article#standardseite a img { border: none; } article#news a:link , article#standardseite a:link { color: #42413C; text-decoration: underline; } article#news a:visited, article#standardseite a:visited { color: #6E6C64; text-decoration: underline; } article#news a:hover, a:active, a:focus, article#standardseite a:hover, a:active, a:focus { text-decoration: none; } article#standardseite a:link.btnlink, article#standardseite a.btnlink, article#standardseite a:visited.btnlink { color: #fff; background: #003466; text-decoration: none; padding: 4px 10px; display: block; margin: 0 0 10px 0; } article#standardseite a:link.btnlink:hover, article#standardseite a.btnlink:hover, article#standardseite a:visited.btnlink:hover { background: #000; text-decoration: none; } article#standardseite .field-collection-view-links { position: relative; display: block; background: #a4a9ad; padding: 10px; box-shadow: 1px 1px 1px rgba(0,0,0,0.8); margin: 15px 0 40px 0; } article#standardseite .field-collection-view-links:before { content: ''; display: block; position:absolute; top: -15px; left: 10px; width: 0; height: 0; border-style: solid; border-width: 0 15px 15px 15px; border-color: transparent transparent #a4a9ad transparent; } article#standardseite ul.field-collection-view-links li { float: none; width: auto; border: none; margin-left: 10px; height: 27px; } article#standardseite .field-collection-view-links a, article#standardseite .field-collection-view-links a:link { text-decoration: none; } /* NEWS Special Begin */ .eventsRight h2{color:#003466!important;} article#news label { display:none; } article#news select { float:left;margin-right: 20px; } article#news form { height:82px; } article#news .filter {width:170px;} article#news .jahr {width:115px;} article#news .event { background: #dadada url(../images/events-date.png) no-repeat 0 0; min-width:320px; height:38px;color:#000000; float:left; } article#news .date { float:left; padding: 7px 0 0 10px; min-width: 120px; font-size:23px; } .node-type-news span.title { display: block; text-transform: none; font-size: 20px; } article#news .place { float:left; padding: 7px 15px 0 35px; text-transform: uppercase; font-size:13px; } article#news .place img { margin-right: 4px; } article#news .title { float:left; background:#000000; color:#ffffff; font-weight:bold; font-size:20px; padding: 16px 10px 10px 10px; width:443px;text-transform: uppercase; line-height:25px; } .eventsRight .title, .jobs .title {background:#003466!important;} article#news .title .more { float:right; /*margin-right:20px; margin-top:-25px;*/ margin: 0 0 5px 5px; background: url(../images/more.png) no-repeat 0 0; width:29px; height:29px; text-indent:-9999px; display:block; } /* NEWS Special End */ article#news .clearfix:after, article#standardseite .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } article#news .clearfix , article#standardseite .clearfix { display: inline-block; /* for IE/Mac */ } /* Hides from IE-mac \*/ * html .clearfix { height: 1%;/*zoom: 1; *//* triggers hasLayout */ } article#news .clearfix, article#standardseite .clearfix { display: block; } /* End hide from IE-mac */ /* HÃ¤ndlerportal, Service */ body.section-haendlerportal, body.section-dealer-portal { background:url("../images/bg-images/bg-body-service.jpg") center top no-repeat fixed; } body.section-service, body.section-service-center { background:url("../images/bg-images/bg-body-service.jpg") center top no-repeat fixed; } #webform-component-weitere-angaben--holderleft, #webform-component-weitere-angaben--holderright, #webform-component-additional-information--holderleft, #webform-component-additional-information--holderright { float: left; width: 50%; margin-bottom: 20px; } #webform-component-weitere-angaben--holderleft div:hover, div#where-articlelnr:hover { color: #fff; } #webform-component-weitere-angaben--holderleft div, #webform-component-weitere-angaben--holderright--wo-artikelnummer div, #webform-component-additional-information--holderleft div, #webform-component-additional-information--holderright div { color: #ffffff; } #webform-component-weitere-angaben--holderleft a:hover + div.infohider, #webform-component-weitere-angaben--holderright--wo-artikelnummer a:hover + div.infohider, #webform-component-additional-information--holderleft a:hover + div.infohider, #webform-component-additional-information--holderright a:hover + div.infohider, #webform-component-weitere-angaben--holderleft div:hover + div.infohider, #webform-component-weitere-angaben--holderright--wo-artikelnummer div:hover + div.infohider, #webform-component-additional-information--holderleft div:hover + div.infohider, #webform-component-additional-information--holderright div:hover + div.infohider { display:block; } .js .webform-client-form fieldset div.infohider { display: none; float: none; } .infohider img { } #where-articlelnr { margin-left: 10px; } .js .webform-client-form fieldset input.even#edit-submitted-purchase-date-name-and-address-of-dealer, .js .webform-client-form fieldset input.even#edit-submitted-additional-information-holderleft-serial-number { margin-left: 0; } .reverse h2.node-title { color:#fff; text-align:left; } .reverse h2.node-title span { color:#000; } .page-node .block { background:#fff; } .box-block { background:#fff; padding:23px; } .page-node-437 .box-block, .page-node-655 .box-block { background-color: transparent; clear both; } .page-node-437 p, .page-node-655 p { font-weight: bold; } .page-node .block h2 { background-color: black; color: #fff; float:none; font-size: 18px; margin:0; padding: 10px 10px 10px 20px; text-align: left; } .page-node .block h2 a { color: #fff; } .page-node .block h2 a:hover { color:#607890; } .page-node .block h2 span { color:#989898; font-family:'PT Sans',sans-serif; font-size:12px; text-transform:none; } #block-downloads, #block-neuigkeiten, #block-testberichte { float:left; margin:0 30px 30px 0; width:643px; } #block-service-support, #block-shopausstattungen, #block-presseportal, #block-haendlerportal { float:right; margin:0 0 30px 0; width:305px; } #block-downloads .view-content, #block-neuigkeiten .view-content, #block-testberichte .view-content { padding:10px 20px 29px 20px; } .teaser-img a { background-repeat:no-repeat; display: block; height:189px; overflow: hidden; text-indent:-9999px; width:306px; } #block-service-support .teaser-img { background-image:url(../images/haendlerportal.jpg); } #block-shopausstattungen .teaser-img { background-image:url(../images/shopausstattungen.jpg); } #block-haendlerportal .teaser-img { background-image:url(../images/haendlerportal.jpg); } #block-presseportal .teaser-img { background-image:url(../images/presseportal.jpg); } .views-table { clear:both; width:100%; } .views-table td { font-size:13px; padding:5px 0; } .views-table tr, .views-table td.active { background:transparent; } .views-table .views-field-created { color:#929292; width:80px; } .views-table .views-field-title { color:#003466; font-weight:bold; padding:5px 10px; text-transform:uppercase; } .views-table .views-field-field-download-file, .views-table .views-field-view-node { text-align:right; width:100px; } .views-table .views-field-field-download-file a, .views-table .views-field-view-node a { color:#a1a1a1; font-style:italic; } .views-table .views-field-field-download-file a:hover, .views-table .views-field-view-node a:hover { color:#036; } .views-table .views-field-field-download-file span, .views-table .views-field-view-node span { text-indent:-9999px; background:url(../images/bg-download-arrow.gif) right center no-repeat; display:inline-block; width:12px; height:9px; vertical-align:middle; } .views-table .views-row-last { border:none; } /* HÃ¤ndlerportal: Neuigkeiten */ body.page-haendler-neuigkeiten { background:url("../images/bg-images/bg-body-service.jpg") center top no-repeat fixed; } body.page-haendler-neuigkeiten .title { clear:left; width:auto; } /* HÃ¤ndlerportal: Downloads, Service & Support, Shopausstattungen */ body.page-haendler-downloads { background:url("../images/bg-images/bg-body-service.jpg") center top no-repeat fixed; } body.page-haendler-service-support { background:url("../images/bg-images/bg-body-service.jpg") center top no-repeat fixed; } body.page-haendler-shopausstattungen { background:url("../images/bg-images/bg-body-service.jpg") center top no-repeat fixed; } .download-files .view-content { background:#fff; } .download-files #headline { margin:0; } .download-files .views-table td, .download-files .views-table th { padding:10px 10px 10px 20px; } .download-files .views-table thead tr { background:#000; } .download-files .views-table thead th { color:#fff; font-family: "AvantageBold",sans-serif; font-size:18px; text-transform:uppercase; } .download-files .views-table thead th a { color:#fff; } #views-exposed-form-downloads-page label { color:#fff; text-transform:uppercase; } #edit-field-download-type-value-wrapper { float: right; padding:0; } /* Unternehmen */ /*headlines*/ .page-unternehmen { font-family: 'PT Sans', sans-serif; font-size: 13px; line-height: 19px; color: black; } .page-unternehmen h2 { font-size:40px; margin:0; text-transform:uppercase; font-family: "AvantageBold", sans-serif; line-height:20px; margin-bottom:15px; } .page-unternehmen h2 span { font-size:16px; color:#898888; } .page-unternehmen .dark h2, .page-unternehmen .light h2 { position:absolute; top:35px; left:35px; } .page-unternehmen .light h2 { line-height:34px; } .page-unternehmen h3 { font-size:23px; text-transform:uppercase; } .page-unternehmen .konrad { text-align:right; position:absolute; top:500px; left:35px; font-family: "AvantageBold", sans-serif; line-height:25px; background:#000; padding:0 5px 0 5px; } .page-unternehmen .cielo { position:absolute; top:500px; right:80px; font-family: "AvantageBold", sans-serif; line-height:25px; background:#000; padding:0 5px 0 5px; } .page-unternehmen .cielo {} .page-unternehmen .infoContainer h3 { margin:0 0 10px 0; } .page-unternehmen h3.accToggle { background:url(../images/bg-acctoggle.gif) 425px 27px no-repeat #003466; color:#fff; padding:13px 0 12px 10px; cursor:pointer; font-size:30px; line-height:28px; } .page-unternehmen h3.accToggle:hover, .page-unternehmen h3.accToggle.active { background:url(../images/bg-acctoggle-hover.gif) 425px 27px no-repeat #898888; color:#000; } article#partner { margin-bottom: 60px; } .hidden { display:none; } /*structure*/ .page-unternehmen article { width:100%; padding:0!important; } .page-unternehmen section { width:100%; position:relative; margin:0 0 70px 0; clear: both; } .page-unternehmen section.dark { height:640px; color:#fff; } .page-unternehmen section.light { height:640px; color:#000; } .page-unternehmen .infoContainer { width:245px; position:absolute; top:35px; right:35px; } .midCol { width:474px; float:left; margin:0 30px 0 0; } .midCol.eventsRight {margin-right: 0;} .midCol:last-child { margin:0; } .partnerlogos { width:932px; height:auto; background:#fff; padding:23px; } .partnerlogos li { display: table; min-height: 155px; margin: 10px 0 0 0 0; float:left; width: auto; height: auto; } .partnerlogos li a { text-align: center; height: auto; width: auto; min-width: 130px; display: table-cell; height: 142px; vertical-align: middle; padding-left: 15px; padding-right: 15px; } .partnerlogos li.last a { border:none; } .accContent { padding:23px; background:#fff; display:none; } .node-type-news .accContent { display: block; } article#news .accContent{ display: block; padding: 0; width: 98%; } article#news .accContent > div{ padding: 23px; } article#news h3{ margin-top:30px; cursor: pointer; width: 98%; } article#news > div > h2{ padding-bottom: 0px; } /* pager */ body.front .pager a { border-radius: 0px; background-color: transparent; border: none; } article#news ul.pager, article#standardseite ul.pager, ul.pager { margin-top: 15px; text-align: left; } ul.pager li, article#news ul.pager li, article#standardseite ul.pager li { background-image: none; border: none; -webkit-border-radius: 0px; padding-left: 0; margin: 0 5px 0 0; } ul.pager li.pager-first.first { width: auto; padding-left: 0 !IMPORTANT; } ul.pager li.pager-last.last { } ul.pager a, ul.pager a:visited { border: none; border-radius: 0px; -webkit-border-radius: 0px; text-decoration: none !IMPORTANT; text-transform: none; color: #003466; } article#news ul.pager li.pager-current, article#standardseite ul.pager li.pager-current, ul.pager li.pager-current { color: #fff; background-color: #003466; padding: 8px 17px; margin-left: 5px; } /* node-type-bikewear */ /*headlines*/ article.biketeaser { background-color: #f1f1f1; } .node-type-bikewear .bx-pager{ bottom:-17px!important; left:0px; width:380px; background-color: #000; padding: 5px; } .node-type-bikewear .sizes { float: left; padding: 10px; background-color: #000; color: #fff; margin-right:5px; margin-top:50px; font-size:13px; } .node-type-bikewear .field-label { float:left; } .node-type-bikewear h2 { font-size:40px; margin:0 15px 23px 0; text-transform:uppercase; font-family: "AvantageBold", sans-serif; line-height:18px; padding:10px 0 0 0; color:#000; float: none; text-align: left; } .node-type-bikewear h2 span { font-size:16px; color:#9f9f9f; } .node-type-bikewear blockquote { position:absolute; font-size:55px; font-family: "AvantageBold", sans-serif; color:#fff; background:#f39200; text-transform:uppercase; line-height:55px; padding:0 10px 0 10px; display:inline-block; top:260px; left:40px; } .node-type-bikewear #mission h3 { font-size:29px; margin:0 0 15px 0; } .node-type-bikewear #mission .teaser h3 { color:#f49910; font-size:16px; text-transform:uppercase; margin:0; } .node-type-bikewear #info h3 { font-size:16px; padding:8px 0 8px 10px; text-transform:uppercase; color:#fff; background:#e94b25; font-family: "AvantageBold", sans-serif; } .node-type-bikewear hr { color:#e5e5e5; background-color:#e5e5e5; border-style:none none dotted; margin:0 0 10px 0; } /*structure*/ .node-type-bikewear article { width:100%; padding:55px 0 0 0; } .node-type-bikewear #headline { width:100%; height:auto; background:url(../images/bg-bikewearcross.png) top right no-repeat; margin:0 0 50px 0; } .node-type-bikewear .sliderContainer { width:650px; height:450px; position:relative; } .node-type-bikewear .slider { width:650px; height:450px; } .node-type-bikewear .slider li { width:622px; height:396px; padding:8px; background:#fff; -moz-box-shadow:0 0 1px #b3b3b3; -webkit-box-shadow:0 0 1px #b3b3b3; box-shadow:0 0 1px #b3b3b3; } .node-type-bikewear #bikewear { margin:0 0 50px 0; line-height:24px; font-size:16px; color:#222121; } .node-type-bikewear .columnLeft { float:left; margin:0 30px 30px 0; } .node-type-bikewear .columnLeft { width:551px; } .node-standardseite .columnLeft, .node-2-spaltige-standardseite .columnLeft { float:left; width: 48%; margin:0 2% 0 0; } .node-standardseite .columnRight, .node-2-spaltige-standardseite .columnRight { float:left; width: 48%; margin: 0 0 0 2%; } .node-type-bikewear .readMore { font:'PT Sans', sans-serif; color:#fff; background:#000; text-transform:uppercase; position:absolute; width:126px; height:28px; text-align:center; padding:5px 0 0 0; font-size:13px; margin-top:40px; } .node-type-bikewear .readMore:hover, .node-type-bikewear .readMore.active { background:#003466; } .node-type-bikewear .columnRightSlider{ width:390px; float:left; margin:-100px 0 0 0; } /* --------------------------------------- ------------------SLIDER------------------ ----------------------------------------*/ .node-type-bikewear #slides{ position:relative; background:url(../images/bg-slides.png) center 9px #fff no-repeat; width:390px; height:513px; padding:0; /*overflow:hidden;*/ } /*#slides .slides_control{ width:390px; height:477px; }*/ .node-type-bikewear #slides h2{ text-indent:-5000px; } .node-type-bikewear #slides p{ position:absolute; font:14px 'PT Sans', sans-serif; text-transform:uppercase; bottom:8px; left:16px; } .node-type-bikewear .slides_container{ position:relative; width:390px; height:477px; } .node-type-bikewear div.blau, .node-type-bikewear div.pink, .node-type-bikewear div.gruen, .node-type-bikewear div.orange{ width:390px; height:477px; } .node-type-bikewear div.blau{ background:url(../images/slider/blau.jpg) 0 0 no-repeat; } .node-type-bikewear div.pink{ background:url(../images/slider/pink.jpg) 0 0 no-repeat; } .node-type-bikewear div.gruen{ background:url(../images/slider/blau.jpg) 0 0 no-repeat; } .node-type-bikewear div.orange{ background:url(../images/slider/pink.jpg) 0 0 no-repeat; } .node-type-bikewear #slides ul.pagination{ position:relative; background:#fff; display:block; width:270px; height:27px; float:right; padding:9px 0 0 0; } .node-type-bikewear #slides ul.pagination li{ width:19px; height:21px; float:left; margin-right:2px; } .node-type-bikewear #slides ul.pagination li a{ background-image:url(../images/slider/bg-pagination-a.png); text-indent:-5000px; width:19px; height:21px; display:block; } /*.node-type-bikewear #slides ul.pagination > li:first-child > a{ background-position:0 0; }*/ .node-type-bikewear #slides ul.pagination > li:first-child > a:link, .node-type-bikewear #slides ul.pagination > li:first-child > a:link{ background-position:0 0; } .node-type-bikewear #slides ul.pagination > li:first-child > a:hover, .node-type-bikewear #slides ul.pagination > li:first-child > a:active{ background-position:0 -21px; } .node-type-bikewear #slides ul.pagination > li:first-child + li > a:link, .node-type-bikewear #slides ul.pagination > li:first-child + li > a:visited{ background-position:-19px 0; } .node-type-bikewear #slides ul.pagination > li:first-child + li > a:hover, .node-type-bikewear #slides ul.pagination > li:first-child + li > a:active{ background-position:-19px -21px; } .node-type-bikewear #slides ul.pagination > li:first-child + li + li > a:link, .node-type-bikewear #slides ul.pagination > li:first-child + li + li > a:visited{ background-position:-38px 0; } .node-type-bikewear #slides ul.pagination > li:first-child + li + li > a:hover, .node-type-bikewear #slides ul.pagination > li:first-child + li + li > a:active{ background-position:-38px -21px; } .node-type-bikewear #slides ul.pagination > li:first-child + li + li + li > a:link, .node-type-bikewear #slides ul.pagination > li:first-child + li + li + li > a:visited{ background-position:-57px 0; } .node-type-bikewear #slides ul.pagination > li:first-child + li + li + li > a:hover, .node-type-bikewear #slides ul.pagination > li:first-child + li + li + li > a:active{ background-position:-57px -21px; } /*.node-type-bikewear #slides ul.pagination > li:first-child + li + li + li + li > a{ background: black; } .node-type-bikewear #slides ul.pagination > li:first-child + li + li + li + li + li > a{ background: lime; } .node-type-bikewear #slides ul.pagination > li:first-child + li + li + li + li + li + li > a{ background: lime; } .node-type-bikewear #slides ul.pagination > li:first-child + li + li + li + li + li + li + li > a{ background: lime; } .node-type-bikewear #slides ul.pagination > li:first-child + li + li + li + li + li + li + li + li > a{ background: lime; }*/ #slides ul.pagination li a:link, #slides ul.pagination li a:visited{ background-position:0 0; } #slides ul.pagination li a:hover, #slides ul.pagination li a:active{ background-position:0 -21px; } .node-type-bikewear a.prev, .node-type-bikewear a.next { position:absolute; display:none; width:50px; height:50px; text-indent:-5000px; top:0; } .node-type-bikewear a.prev { left:8px; } .node-type-bikewear a.next { right:8px; } .node-type-bikewear a.prev:link, .node-type-bikewear a.prev:visited{ background:url(../images/bg-pfeile.png) 0 0 no-repeat; } .node-type-bikewear a.prev:hover, .node-type-bikewear a.prev:active{ background:url(../images/bg-pfeile.png) 0 -290px no-repeat; } .node-type-bikewear a.next:link, .node-type-bikewear a.next:visited { background:url(../images/bg-pfeile.png) -75px 0 no-repeat; } .node-type-bikewear a.next:hover, .node-type-bikewear a.next:active { background:url(../images/bg-pfeile.png) -75px -290px no-repeat; } /* ------------------------------------------------------------------- Footer ---------------------- */ footer { width:98%; margin: 0 auto; height: auto; } #footer-container { background:#000; border-bottom:8px solid #124d86; height: auto; padding:13px 10px 11px 10px; position: relative; width: 100%; box-sizing: border-box; } @media screen and (max-width:500px) { #footer-container { border-bottom:2px solid #124d86; padding:5px; } } #footer-container p { float: right; text-align: right; } #footer-sitemap:link, #footer-sitemap:visited { display:block; width:77px; height:24px; background:url(../images/css-sprite.png) 0 -205px no-repeat; text-indent:-9999px; float:left; margin-right:10px; } #footer-sitemap:hover, #footer-sitemap:active { background-position:0 -229px; } @media screen and (max-width:500px) { #footer-sitemap, #footer-sitemap:link, #footer-sitemap:visited { display: none; } } #footer-slideshow { display:none; } #header-social { padding: 3px 5px 2px 5px; background-color: #000; position: absolute; right: 170px; top: 0px; } #footer-social { float: left; } #footer-social a { background:url(../images/css-sprite.png) no-repeat; float: left; height:26px; margin: 0 7px 0 0; text-indent:-9999px; width:26px; } #footer-facebook:link, #footer-facebook:visited { background-position:-77px -205px; } #footer-facebook:hover, #footer-facebook:active { background-position:-77px -231px; } #footer-twitter:link, #footer-twitter:visited { background-position:-129px -205px; width:29px; } #footer-twitter:hover, #footer-twitter:active { background-position:-129px -231px; } #footer-vimeo:link, #footer-vimeo:visited { background-position:-103px -205px; } #footer-vimeo:hover, #footer-vimeo:active { background-position:-103px -231px; } footer .partner { float: left; font-size: 11px; line-height: 14px; width: 313px; color: #fff; } footer .partner img { float: left; } .en .language-icon { width:35px; height:20px; } .de .language-icon { width:23px; height:20px; } #footer-navi ul.menu { clear: both; position: relative; margin: 0 10px 20px 10px; } #footer-navi ul.menu li { float: left; margin-right:10px; } #footer-navi ul.menu li a:link, #footer-navi ul.menu li a:visited { font-size:11px; text-transform:uppercase; color: #989898; -moz-transition:all 0.6 ease-in-out; -webkit-transition:all 0.6 ease-in-out; -ms-transition:all 0.6 ease-in-out; -o-transition:all 0.6 ease-in-out; transition:all 0.6 ease-in-out; } #footer-navi ul.menu li a:hover, #footer-navi ul.menu li a:active { color: #fff; } #footer-search:link, #footer-search:visited { background:url(../images/css-sprite.png) -159px -205px no-repeat; display: inline-block; height:17px; margin-right:10px; overflow: hidden; text-indent:110%; vertical-align: middle; width:17px; } #footer-search:hover, #footer-search:active { background-position:-159px -222px; } @media only screen and (min-width: 480px) { } @media only screen and (min-width: 768px) { footer { position: relative; width: 978px; height: auto; margin: 0 auto 80px auto; } #footer-container { width:auto; height: auto; } #footer-navi ul.menu { clear: none; position: relative; } #footer-navi { float:left; min-width: 570px; } } #search-block-form { position:fixed; margin: 0; width: inherit; max-width: 315px; height: 30px; overflow: hidden; bottom: -190px; background-color: #000; padding: 20px 0; z-index:100; } #search-block-form input#edit-search-block-form--2 { width: 160px; margin: 0 0 0 20px; } #search-block-form div { float: left; } #search-block-form div.container-inline { } #search-block-form div.container-inline .form-actions { float: left; padding: 0 20px 18px; margin: 0; background:none!important; border:0!important; } #search-block-form #edit-submit { background-color:#fff; color: #000; border:0; border-radius:0; } #search-block-form #edit-submit .form-text { background-color:#fff!important; color: #000!important; border:0!important; border-radius:0!important; -moz-border-radius:0!important; -ms-border-radius:0!important; -o-border-radius:0!important; -webkit-border-radius:0!important; } /* Search Results */ .search-results { width:100%; float: left; margin: 0; } .search-result { width:21%; height:230px; float: left; margin:0 30px 20px 0; list-style:none; } .search-result h3 { background-color: #000; border-bottom:7px solid #003466; padding: 3px 0px 3px 10px; } .search-snippet-info{ height:75%; } .search-snippet{ height:80%; display: block; padding-top:5px; } .search-info { background-color: #000; padding: 2px 10px; color: #fff; font-size:11px; margin: 20px 0px 0px 0px; } #facebook-like-box{ width: 98%; max-width:468px; overflow: hidden; margin: 0 auto 20px auto; background-color: #000; padding: 0px; } @media only screen and (min-width: 480px) { } @media only screen and (min-width: 768px) { #search-block-form { position:fixed; margin: 0; width: 300px; height: 30px; bottom: -190px; background-color: #000; padding: 20px; z-index:100; right: 50%; margin-right: -489px; } #facebook-like-box{ position: relative; width: 100%; max-width:958px; overflow: hidden; margin: 0 auto 16px auto; background-color: #000; padding: 10px; } } /** * Non-semantic helper classes: please define your styles before this section. */ /* For image replacement */ .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } .ir br { display: none; } /* Hide for both screenreaders and browsers: css-discuss.incutio.com/wiki/Screenreader_Visibility */ .hidden { display: none; visibility: hidden; } /* Hide only visually, but have it available for screenreaders: by Jon Neal. www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements in most situations. nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1;} /** * Placeholder media queries for responsive design. Modify as design requires. * These follow after, and will override, the primary ('mobile first') styles * The closing /mediaquery comment is required by respond.js min/max-width Media Query polyfill */ @media only screen and (min-width: 480px) { /* reset those mobile only styles like display: none, etv.*/ .rhino-bullets {display: block;} /* end of mobile reset */ .page-unternehmen article { width:978px!important; margin:0 auto; } section { width:978px; } header { width: 100%; max-width: 768px; } #wrapper { width: 100%; max-width: 768px; } .centered-content { width: 100%; max-width: 768px; } .node-type-bikewear article { width:978px; margin:0 auto; } .node-type-bikewear #headline { width:978px; } }/*/mediaquery*/ @media only screen and (min-width: 768px) { /* Style adjustments for viewports 768px and more go here */ /* * header */ #wrapper { position: relative; width: 100%; max-width: 1980px; } article { padding-top:1.5em; } header { position: relative; width: 100%; max-width: 978px; margin: 0 auto; margin: 42px auto 0 auto; padding: 9px 0 0 0; } #user-login-form { background: #003466; bottom:0; display: block; position:absolute; margin: 0; right: 0px; padding: 15px 23px; z-index:1; -webkit-moz-transition:bottom 300ms ease-in-out; -moz-moz-transition:bottom 300ms ease-in-out; -ms-moz-transition:bottom 300ms ease-in-out; -o-moz-transition:bottom 300ms ease-in-out; transition:bottom 300ms ease-in-out; } #user-login-form:target, #user-login-form.toggled { bottom:-3em; } #user-login-form > div > div{ float: left; position:relative; } #user-login-form [type=text], #user-login-form [type=password], #user-login-form label{ color: white; font-size:.75em; float: left; width: auto; } #user-login-form [type=text], #user-login-form [type=password] { background:transparent; border: 1px solid white; margin-right:23px; } #user-login-form [type=text]:hover, #user-login-form [type=password]:hover{ border-color: white; } #user-login-form [type=text]:focus, #user-login-form [type=password]:focus{ border-color: #326ea0; background: white; color: #1a1a1a; } #user-login-form label{ color: white; cursor: pointer; line-height:2em; margin-right:10px; text-transform: uppercase; } #user-login-form label.error{ position:absolute; bottom: -29px; left: 0px; display:block; float: none; height: 18px; padding: 3px; width: auto; color: black; border: 1px solid #a41a1a; background: #fff; -webkit-border-radius: 0px 3px 3px 3px; border-radius: 0px 3px 3px 3px; font-size: 11px; line-height: 20px; } #user-login-form label.error:before{ display: block; content: " > "; color: transparent; background: transparent; position:absolute; top: -5px; left: 0px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #a41a1a; } #user-login-form .item-list{ float: right; } #user-login-form .item-list ul{ margin: 0; padding: 0; font-size: .75em; color: #898888; } #user-login-form .item-list ul li{ float: left; margin: 5px; } #user-login-form .item-list ul li a:hover{ color: white; } #user-login-form .form-actions{ float: right; margin: 0; padding: 0; border: 0; background: none; } #user-login-form .form-actions input[type=submit]{ background:url(../images/css-sprite.png) -160px -239px no-repeat; border:none; color: white; font: .8em/1.5em 'PT Sans', sans-serif; float: right; height: 24px; padding-top:24px; overflow: hidden; width: 25px; } #user-login-form .form-actions input[type=submit]:hover{ background-position: -185px -239px; } #toggle-user-login-form{ background: url(../images/css-sprite.png) -177px -205px no-repeat; cursor: pointer; display: block; height: 15px; margin-top:-8px; right: 5px; position:absolute; top: 50%; width:13px; } #toggle-user-login-form:hover{ background-position:-177px -220px; } .floatRight { float: right; } /* Contact form */ #webform-client-form-473 [type=hidden] #webform-client-form-473 .hidden, #webform-component-angaben-zu-ihrer-person--geburtsdatum, #webform-component-personal-information--date-of-birth{ display: none !important; } #webform-client-form-581 [type=hidden] #webform-client-form-581 .hidden, #webform-component-angaben-zu-ihrer-person--geburtsdatum, #webform-component-personal-information--date-of-birth{ display: none !important; } #webform-client-form-473 fieldset, #webform-client-form-581 fieldset { clear:left; width: 100%; } #webform-client-form-473 .form-item, #webform-client-form-473 .form-actions, #webform-client-form-581 .form-item, #webform-client-form-581 .form-actions { margin:0; } #webform-client-form-473 legend, #webform-client-form-581 legend { text-align: center; display: block; color: #FFF; font-size: 30px; text-transform: uppercase; font-family: "AvantageBold",sans-serif; } #webform-client-form-473 label, #webform-client-form-581 label { float: left; width: 489px; font-size: 20px; color: white; padding: 10px 0 0 0; height: 40px; } .js #webform-client-form-473 label, .js #webform-client-form-581 label { display:none; } #webform-client-form-473 input, #webform-client-form-473 textarea, #webform-client-form-581 input, #webform-client-form-581 textarea{ float: left; height: 46px; width: 479px; padding: 2px 5px; background: none repeat scroll 0 0 #FFFFFF; border: none; color: #C5C5C5; font-size: 20px; font-weight: bold; box-shadow: 0 1px 1px #C9C9C9 inset; z-index: 1; } #webform-client-form-473 input, #webform-client-form-581 input { width: 469px; } #webform-client-form-473 textarea, #webform-client-form-581 textarea { width: 978px; } #webform-client-form-473 input.error, #webform-client-form-473 textarea.error, #webform-client-form-581 input.error, #webform-client-form-581 textarea.error { border: 1px solid #A41A1A; width: 467px; height: 44px; } #webform-client-form-473 fieldset div.form-item, #webform-client-form-581 fieldset div.form-item { position:relative; float: left; width:479px; } #webform-component-angaben-zu-ihrer-person--name, #webform-component-angaben-zu-ihrer-person--strasse, #webform-component-angaben-zu-ihrer-person--telefon, #webform-component-personal-information--name, #webform-component-personal-information--address, #webform-component-personal-information--phone-number, #webform-component-angaben-zum-fahrrad--seriennummer, #webform-component-angaben-zum-fahrrad--Modell, #webform-component-angaben-zum-fahrrad--bknummer { margin-right:20px !important; } #webform-client-form-473 label.error, #webform-client-form-581 label.error { margin: 0; z-index: 2; background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #A41A1A; border-radius: 0 3px 3px 3px; bottom: -5px; color: black; display: block; float: none; font-size: 11px; height: 18px; left: 10px; line-height: 20px; padding: 3px; position: absolute; width: auto; } #webform-client-form-473 label.error:before, #webform-client-form-581 label.error:before { background: none repeat scroll 0 0 transparent; border-bottom: 5px solid #A41A1A; border-left: 5px solid transparent; border-right: 5px solid transparent; color: transparent; content: " > "; display: block; height: 0; left: 0; position: absolute; top: -5px; width: 0; } #webform-client-form-473 textarea.error, #webform-client-form-581 textarea.error {height: 148px; width: 966px} #webform-client-form-473 .form-submit, #webform-client-form-581 .form-submit { background: none repeat scroll 0 0 #003466; color: #FFFFFF; cursor: pointer; display: block; float: right; font-family: 'PT Sans',sans-serif; font-size: 20px; font-weight: bold; height: 53px; text-transform: uppercase; width: 488px; } #webform-client-form-473 textarea, #webform-client-form-581 textarea { height: 150px; resize: none; padding-top: 10px; } #webform-client-form-473 .form-actions, #webform-client-form-581 .form-actions { background:transparent; border:none; padding:10px 0 0 0; } /* * Sannino Form * */ #webform-client-form-3136 { clear: both; padding-top: 2em; background: rgba(0,0,0,0.8); padding: 20px; } #webform-client-form-3136 label { color: #fff; } #webform-client-form-3136 label { width: 200px; margin-right: 15px; } #webform-client-form-3160 fieldset label { display: block; color: #000; font-weight: normal; height: auto; line-height: 20px; } .js .webform-client-form#webform-client-form-3160 fieldset div.form-item-submitted-holderright-teilnahmebedingungen-akzeptiert label { float: left; } .js .webform-client-form#webform-client-form-3160 fieldset div.form-item-submitted-holderright-teilnahmebedingungen-akzeptiert:after { content: ''; clear: both; height: 1px; display: block; } #webform-client-form-3136 .form-text { width: 280px; } #webform-client-form-3136 .form-item-submitted-ich-interessiere-mich-fuer { float: left; width: 100px; line-height: 16px; } #webform-client-form-3136 #edit-submitted-ich-interessiere-mich-fuer.form-radios .form-item { margin: 0; } #webform-client-form-3136 #webform-component-name { clear: both; } #webform-client-form-3136 .form-item { padding-top: 20px; } #webform-client-form-3136 .form-item.form-type-radio { padding-top: 0; } #webform-client-form-3136 #webform-component-sonstiges label:first-child { float: none; margin: 0 0 10px 0; } #webform-client-form-3136 .form-textarea-wrapper textarea { margin: 0; width: 509px; } #webform-client-form-3136.webform-client-form input[type=submit] { background-image: none; background-color: #003466; text-indent: 0; color: #fff; font-size: 16px; float: right; } #webform-client-form-3136.webform-client-form .form-actions { width: 509px; text-align: right; } #webform-ajax-wrapper-3136 { clear: both; background: rgba(0,0,0,0.8); padding: 20px; } #webform-ajax-wrapper-3136 .links a { display: none; } #webform-client-form-3160 #webform-component-holderleft, #webform-client-form-3160 #webform-component-holderright { float: left; width: 45%; } #webform-client-form-3160 #webform-component-holderleft { margin-right: 10%; } #webform-client-form-3160 #webform-component-holderleft legend, #webform-client-form-3160 #webform-component-holderright legend { display: none; } .js .webform-client-form#webform-client-form-3160 fieldset div { float: none; margin-bottom: 15px; } .js .webform-client-form#webform-client-form-3160 fieldset div label, .js .webform-client-form#webform-client-form-3160 fieldset div input { float: none; width: 90%; } .js .webform-client-form#webform-client-form-3160 fieldset div input.form-radio, .js .webform-client-form#webform-client-form-3160 fieldset div input.form-checkbox { width: 20px; height: 20px; float: left; margin: 9px 10px 0 0 !important; } .js .webform-client-form#webform-client-form-3160 fieldset div#webform-component-holderright--konfektion--konfektionsgroesse-xs---4xl, .js .webform-client-form#webform-client-form-3160 fieldset div#webform-component-holderright--rennenfieldset--ich-bin-bei-folgenden-rennen-am-start { padding: 10px 20px; margin: 0; background: #000; color: #fff; } .js .webform-client-form#webform-client-form-3160 fieldset#webform-component-holderright--konfektion div div, .js .webform-client-form#webform-client-form-3160 fieldset#webform-component-holderright--rennenfieldset > div > div { padding: 10px 20px; } .js .webform-client-form#webform-client-form-3160 fieldset#webform-component-holderright--konfektion, .js .webform-client-form#webform-client-form-3160 fieldset#webform-component-holderright--rennenfieldset { border: 1px solid #fff; width: 92%; } .js .webform-client-form#webform-client-form-3160 fieldset#webform-component-holderright--rennenfieldset { margin-top: 20px; } .webform-client-form#webform-client-form-3160 input[type=submit] { float: right; margin-right: 32px; } /* Webform messages */ #webform-ajax-wrapper-3160 > div { position: relative; border: 2px solid black; background: #003466; color: #fff; padding: 20px; } #webform-ajax-wrapper-3160 .messages { position: relative; } h2.extra{ font-size: 98px; color: black; text-align: center; width: 100%; line-height: 55px; } h2.extra br{ display: none; } h2.extra small{ display: block; color: #FFF; font-size: 30px; } /** * LARGE SCREEN NAVIGATION */ #nav{ background: black; } #nav a { display:block; } #nav > li{ float: left; } #nav > li > a{ padding: 11px 14px; font-size: 13px; line-height: 1em; color: white; } #nav > li.toggle > a, #nav > li > a:hover, #nav > li:hover > a{ background: white; color: #003466; } /* First level */ #nav > li > ul { display: none; background: white; box-shadow:0 5px 20px rgba(0,0,0,.2); position:absolute; left: 0; line-height: 16px; top: 150%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; } #nav > li.toggle > ul { display: block; padding-bottom:70px; overflow: hidden; min-height:400px; } .level-two:before { bottom:35px; color:#f4f4f4; content:attr(data-section); font-size:57px; font-weight:700; position: absolute; right:30px; text-transform: uppercase; } /* Second level */ #nav > li > ul > li { position: static; width: 25%; } #nav > li > ul > li.first { padding-top:25px; } #nav > li > ul > li.last { padding-bottom:25px; } #nav > li > ul > li:not(.expanded) { float:left; margin-top:15px; } #nav > li > ul > li:not(.expanded).first { padding-top:0; } #nav > li > ul > li > a { border:none; line-height:19px; padding:10px 25px; } /* Third level */ #nav > li > ul > li > ul { padding-top:28px; width:75%; } #nav > li > ul > li > ul.level-three { padding-top:0; } #nav > li > ul > li.toggle > ul { -webkit-moz-box-shadow:10px 0px 20px #F4F4F4 inset; -moz-moz-box-shadow:10px 0px 20px #F4F4F4 inset; -ms-moz-box-shadow:10px 0px 20px #F4F4F4 inset; -o-moz-box-shadow:10px 0px 20px #F4F4F4 inset; box-shadow:10px 0px 20px #F4F4F4 inset; display: table; padding-bottom:0; height:400px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #nav > li > ul > li > ul > li { background:none; display: inline-block; padding:0 20px; vertical-align: top; width:19%; } #nav > li > ul > li > ul > li.expanded { border-left:1px solid #eff2f6; border-right:1px solid #eff2f6; display: table-cell; float:none; height:100%; padding-bottom:34px; padding-top:28px; width:auto; } #nav > li > ul > li > ul > li > a{ border:none; color:black; line-height:18px; padding: 6px 0; } #nav > li > ul > li > ul > li.toggle > a, #nav > li > ul > li > ul > li > a:hover, #nav > li > ul > li > ul > li:hover > a { background:none; color:#003888; } #nav > li > ul > li > ul > li.nolink > a, #nav > li > ul > li > ul > li.nolink > a:hover { color:black; cursor: default; } /* Fourth level */ #nav > li > ul > li > ul > li > ul { background:none; height:100%; max-height:none!important; } #nav > li > ul > li > ul > li > ul > li { border:none; margin:0; padding-left:0; } #nav > li > ul > li > ul > li > ul.level-three > li.first.leaf.nolink { padding-top:0; padding-bottom: 10px; } #nav > li > ul > li > ul > li > ul.level-three > li.first.leaf.nolink a, #nav > li > ul > li > ul > li > ul.level-three > li.first.leaf.nolink a:hover { padding-top: 0; cursor: default; color: #003466; } #nav > li > ul > li > ul > li > ul > li > a { color:#646b75; font-size:13px; } /* Fallback without javascript */ .no-js #nav .nolink:hover > ul { max-height:none!important; height:460px; } .no-js #nav > li > ul { top:101px; } /* Content */ #map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .centered-content { width: 100%; max-width: 978px; } .column { width: 306px; margin-right: 30px; } .column.last { margin-right: 0; } h2 { font-size:40px; margin:0 15px 23px 0; text-transform:uppercase; text-align:right; float:left; font-family: "AvantageBold", sans-serif; font-weight:400; line-height: 18px; padding:10px 0 0 0; } .js .teasered { max-height:5.4em; overflow: hidden; -moz-transition:max-height .6s ease-in-out 100ms; -webkit-transition:max-height .6s ease-in-out 100ms; -ms-transition:max-height .6s ease-in-out 100ms; -o-transition:max-height .6s ease-in-out 100ms; transition:max-height .6s ease-in-out 100ms; } .js .tech-logos-inner { max-height:2.7em; } .js .teasered.open { max-height:70em; } .js .teaser-toggle { bottom:-36px; cursor: pointer; left:50%; height:30px; margin-left:-10px; position: absolute; width:40px; -moz-transition:background .6s ease; -webkit-transition:background .6s ease; -ms-transition:background .6s ease; -o-transition:background .6s ease; transition:background .6s ease; } .js .tech-logos-inner .teaser-toggle { left:auto; right:0; top:0; } .js .teaser-toggle:hover, .js .teaser-toggle:active, .js .teaser-toggle:focus { background: #fff; } .js .teaser-toggle:after { background:url(../images/css-sprite.png) -189px -205px no-repeat; content:''; display: block; height:11px; left:50%; margin:-5px 0 0 -10px; opacity:.3; position: absolute; top:50%; width:21px; } .js .teaser-toggle:hover:after { opacity:1; } .node-type-bike-seite .techniquelogos { margin-top: 15px; } h2 span { font-size:16px; color:#898888; } h3 { font-size:14px; text-transform:uppercase; } #headline { margin-top: 0px; } .teaser { width: 330px; } .prevBike, .nextBike { width: auto; height: 24px; bottom:20px; font-size:16px; color:#fff; display:block; text-indent: 0; } .prevBike { float:left; padding:12px 12px 7px 55px; background:url(../images/bg-prevbike.gif) top left no-repeat #000; } .nextBike { float:right; padding:12px 55px 7px 12px; background:url(../images/bg-nextbike.gif) top right no-repeat #000; } .prevBike:hover { background-position:left bottom; color:#fff; } .nextBike:hover { background-position:right bottom; color:#fff; } .factswitch { top:-37px; } .facts img { float: left; } .facts table { float: left; width: 100%; font-size: 80%; line-height: 80%; } .node-type-technologien .centered-content { padding-top: 30px; } }/*/mediaquery*/ @media (max-width: 978px) { /* Mobile navigation toggle */ #navi:target { height:auto; } .rhino-container { width: 100%!important; min-width:286px!important; max-width: inherit !important; } #nav > li:nth-child(6) > ul > li > ul { right: 100%; left: auto; } #nav > li > a { padding: 11px 10px; font-size: 13px; line-height: 1em; color:white; } /* #nav > li > a:focus + ul, #nav > li > a:active + ul { display:block; }*/ } @media only screen and (min-width: 978px) { /* Slider */ #navigationOverlay{ background: #000; width: 100%; height: 100%; position:fixed; top: 0; left: 0; } #slider article { position: relative; width: 978px; height: 395px; overflow: hidden; padding: 0; } #slider article .image-big { position: relative; top: 0px; left: 0px; width: 978px; height: 395px; z-index: 0; } #slider article .image-big a { display: block; position: absolute; left: 0px; padding: 305px 0 0 39px; width: 940px; height: 90px; color: #fff; font-size: 140%; text-align: left; text-transform: uppercase; z-index: 100; } #slider article .image-big a.externalLink { position: relative; } #slider article .image-big a.externalLink img { position: absolute; top: 0; left: 0; z-index: 0; } #slider article .image-big .sliderextratitle p { text-transform: upper-case; padding: 10px; max-width: 650px; background-color: #000; font-family:'PT Sans',sans-serif; } #slider article .image-big .sliderLink { position: absolute; z-index: 10; left: 39px; } #slider article .image-big.news a { font-family: "AvantageBold",sans-serif; } #slider article h2 { position: absolute; bottom: 142px; left: 40px; color: #fff; margin: 0; text-align: left; } #slider article.biketeaser h2 { position: relative; bottom: 0; left: 0; color: #fff; padding-right: 20px; margin: 12px 0 0 20px; text-align: left; text-transform: none; } #slider article .intro { position: absolute; bottom: 35px; left: 40px; width: 486px; height: 66px; padding: 10px 106px 10px 10px; background-color: #000; color: #fff; text-align: left; font-size: 85%; line-height: 115%; } #slider article.biketeaser .intro { width: auto; } #slider article .intro p { position: relative; width: 486px; height: 66px; padding: 0px 0px 0px 0px; } #slider article .intro a { position: absolute; top: 0; right: 0; display: block; width: 86px; height: 86px; text-indent: -9000px; border: none; border-radius: 0; padding: 0; background: url(../images/css-sprite.png) 0 -72px no-repeat; } .bx-pager { position: absolute; bottom: 52px; right: 28px; padding: 5px; background: url(../images/bg-black-transparency.png) 0 0 repeat; } .bx-pager a { text-indent: -9000px; display: block; float: left; margin: 0 5px 0 0; width: 11px; height: 11px; background: url(../images/css-sprite.png) -11px -53px no-repeat; } .bx-pager a.pager-active { text-indent: -9000px; display: block; float: left; width: 11px; height: 11px; background: url(../images/css-sprite.png) 0 -53px no-repeat; } } @media only screen and (min-width: 980px) { #toggle-user-login-form { right: 21px; } } .description { position:relative; width: 100%; max-width: 565px; margin: 100px auto 42px auto; font-size: 13px; text-align: justify; } .js .description > li{ width: 100%; height: 100%; } .no-js .description > li{ position:relative; } .description > li strong{ text-transform: uppercase; } .no-js .description > li > *:first-child + *{ display: none; } .no-js .description > li:hover > *:first-child + *{ display: block; } .description > li > h3{ margin-top: 25px; } .description > li:first-child > h3{ margin-top: 0; } .js .description > li > h3 { position:absolute; width: 45%; height: 30px; line-height: 110%; text-transform: uppercase; text-align: left; top: -4.3em; font-size: 110%; cursor: pointer; margin-top: 0; text-align: left; right:0; } .js .description > li > h3.one-three { left:0; } .js .description > li > h3.two-three { left:40%; } .js .description > li > h3.three-three { right:0; text-align: right; } .js .description.topics-1 > li > h3 { width: 100%; } .js .description.topics-1 > li > h3 { left:0; } .js .description.topics-2 > li:first-child > h3:before{ content: ' / '; display: block; font-weight: normal; width: 30px; height: 30px; font-size: 110%; position:absolute; right: 0; margin-right: -45px; text-align: center; color: #979797; } .js .description.topics-2 > li:first-child > h3{ text-align: right; left: 0; right:auto; } .description > li:hover > h3 { color: #013566; } .description img { float: left; margin: 30px 10px 0 0; } .description table.table { float: left; width: 300px; } .description .notice{ width: 100%; padding-top: 0px; margin-top: 1em; border-top: 1px solid #C7C7C7; font-size: .95em; text-align: center; display:block; float:left; color: #b7b7b7; text-shadow: 0px 1px 1px #FFFFFF; } /* bike overview pages */ .page-bikes-2014 .view-filters { background-color: #e1e1e1; padding: 10px; } .page-bikes-2014 .view-filters .views-widget { float: left; margin: 0 20px 0 0; } .page-bikes-2014 .view-filters label:first-child { font-weight: bold; width: 120px; line-height: 26px; float: left; } .page-bikes-2014 .view-filters select { width: 220px; background-color: transparent; border: none; margin-right: 40px; } .bikefield { float: left; width: 240px; height: 182px; text-align: center; margin: 10px 0; } .bikefield img { width: 100%; height: auto; } a .bikefield { color: #000000; text-decoration: none; } a .bikefield span { font-size: 0.8em; color: #6d6d6d; } .bikefield:hover { background-color: #fff; } .bikefield .bikename { display: block; background: transparent; } a:hover .bikefield .bikename { display: block; background: #003466; color: #ffffff; } @media screen and (max-width: 960px) { .frontpage-block { max-width: 100%; } .frontpage-block img { width: 100%; height: auto; } } /** * Print styles. * * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ a, a:visited { color: #444 !important; text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } }