html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } h4 { font-size:14px; font-weight:bold; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* MANUAL.KEYTEQ.NO REDESIGN WINTER 09 * * Implemented by Hein Haraldson Berg * Design by Andreas Nygaard * * ================================================================ */ /* GENERIC CSS ---------------------------------------------------------------- */ body { font-size: 62.5%; line-height: 1; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", FreeSans, sans-serif; background: #FFF; color: #666; } strong { font-weight: bold; } em { font-style: italic; } /* THE FOLLOWING CLASSES DECREASE CSS REDUNDANCY ---------------------------------------------------------------- */ .clear { clear: both; } .rel { position: relative; } .abs { position: absolute; } .hid { overflow: hidden; } .section .center { width: 940px; margin: 0 auto; } .full-block { width: 940px; float: left; } .col { float: left; } .col-wide { width: 620px; } .col-narrow { width: 300px; } .col-half { width: 460px; } .col-third { width: 290px; margin-right: 25px; } .col-ultra-wide { width: 630px; padding: 0 30px 30px 0; } .col-ultra-narrow { width: 146px; padding: 0 24px 40px 0; background: url(/sitefiles/5005/09/gfx/col-separator.png) 100% 100% no-repeat; } .col-right { float: right; clear: right; margin-right: 0; } .col-half .full-block { width: 460px; } .col-wide .full-block { width: 640px; } .col-narrow .full-block, .col-third .full-block { width: 300px; } .col-ultra-wide .full-block { width: 630px; } /* SECTION: NAVIGATION ================================================================ */ #section-navigation { height: 123px; background: url(/sitefiles/5005/09/gfx/section-navigation-x.png) 0 0 repeat-x; } #section-navigation .center { width: 960px; } a#home { display: block; width: 185px; height: 29px; text-indent: -9999px; float: left; clear: left; background: url(/sitefiles/5005/09/gfx/logo.png) 0 0 no-repeat; margin: 49px 0 0; } #product-menu { height: 108px; float: right; clear: right; margin: 15px 0 0; padding: 0 50px 0 0; } #product-menu li { padding: 0 50px 0 0; } #product-menu li.last { padding: 0; } #product-menu li, #product-menu li a { display: block; float: left; } #product-menu li a { background: 0 41px no-repeat; padding: 41px 0 50px; text-indent: -9999px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: .4; position: relative; overflow: hidden; } #product-menu li.active a, #product-menu li a:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } #product-menu li.active a .arrow { display: block; width: 14px; height: 9px; bottom: 0; left: 50%; margin-left: -7px; background: url(/sitefiles/5005/09/gfx/main-menu-active-arrow.png) 0 0 no-repeat; } #top-menu { width: 210px; height: 25px; background: url(/sitefiles/5005/09/gfx/top-menu.png) 0 15px no-repeat; top: 0; right: 0; } #top-menu .inner { width: 100%; } #top-menu ul { height: 25px; left: 50%; float: left; } #top-menu ul li { position: relative; right: 50%; float: left; padding: 0 8px 0 0; border-right: 1px solid #CCC; margin: 6px 8px 6px 0; height: 13px; } #top-menu ul li.last { padding-right: 0; border: none; margin-right: 0; } #top-menu ul li a { display: block; float: left; color: #CCC; font-size: 1.1em; height: 13px; line-height: 13px; text-decoration: none; } #top-menu ul li a:hover { color: #FFF; } /* SECTION: INTRO ================================================================ */ #section-intro { background: #E6E6E6; padding: 26px 0 33px; /* 30px 0 33px */ border-bottom: 1px solid #C7C5C5; } #section-intro .col-wide { background: url(/sitefiles/5005/09/gfx/vertical-separator.gif) 574px 0 repeat-y; } #section-intro .col-wide h1 { color: #333; font-size: 3.2em; font-weight: 200; padding: 0 80px 0 10px; line-height: 1.25; } body#front #section-intro .col-wide h1 { padding-bottom: .5em; } #section-intro .col-wide p { font-size: 1.4em; line-height: 1.214; padding: 0 80px 0 10px; } #section-intro .col-narrow form { width: 260px; height: 23px; background: url(/sitefiles/5005/09/gfx/search.png) 0 0 no-repeat; margin: 7px 0 0; } body#front #section-intro .col-narrow form { margin: 28px 0 0; } #section-intro .col-narrow form label { display: none; } #section-intro .col-narrow form input { position: absolute; top: 0; clear: both; } #section-intro .col-narrow form #search-text { width: 215px; height: 18px; padding: 5px 10px 0 0; right: 0; border: 0; background: none; font-size: 1.1em; color: #666; } #section-intro .col-narrow form #search-text:focus, #section-intro .col-narrow form #search-text.focus { color: #333; } #section-intro .col-narrow form #search-submit { width: 28px; height: 23px; cursor: pointer; left: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; border: 0; padding: 0; } /* ON-PAGE SUB MENU ---------------------------------------------------------------- */ #sectionContent li { float: left; clear: left; width: 305px; height: 119px; background: url(/sitefiles/5005/09/gfx/onpage-menu.png) 0 0 no-repeat; margin: 0 0 20px; position: relative; overflow: hidden; } #sectionContent li.right { float: right; clear: right; } #sectionContent li a { display: block; height: 83px; padding: 18px 25px; color: #E5E5E5; text-decoration: none; } #sectionContent li a:hover { color: #FFF; text-shadow: 1px 1px 2px #000; } #sectionContent li a strong { font-size: 2em; font-weight: 800; display: block; padding: 0 0 .35em; } #sectionContent li a span { display: block; font-size: 1.2em; line-height: 1.5; } /* SECTION: CONTENT ================================================================ */ #section-content { padding: 23px 0 30px; } #section-content .center { width: 920px; } #section-content h2, #section-content h3 { color: #333; font-size: 2.8em; font-weight: 200; padding: 0 0 .75em; } #section-content h2.articleHeading, #section-content .faqElement h3 { font-size: 2.2em; padding: 0 0 .25em; } #section-content .articleSpace { height:15px; } #section-content h2 a, #section-content h3 a { color: #333; text-decoration: none; } #detail img { display: block; float: left; padding: 0 1.5em 1.5em 0; } a.listArtImg { display: block; float: right; padding: 0 0 1.5em 1.5em; } #section-content .articleImage img { background:rgb(0); padding:5px; border:1px solid rgb(190,190,190); margin-right:10px; } #section-content p { font-size: 1.4em; line-height: 1.214; padding: 0 0 1.5em; } #section-content p a { color: #708131; text-decoration: none; } #section-content p a:hover, #section-content h2 a:hover, #section-content h3 a:hover { text-decoration: underline; } .listing, .listing h2, .listing ul, .listing ul li { width: 630px; float: left; clear: both; } .listing ul li { padding: 0 0 3.5em; } .listing ul li .img { width: 150px; float: left; clear: left; } .listing ul li .img a, .listing ul li .img img { display: block;} #section-content .listing ul li .img img { padding: 5px; background: #FFF; border: 1px solid #BEBEBE; } .listing ul li .text { width: 460px; float: right; clear: right; } #section-content .listing ul li .text p.excerpt { padding-bottom: .75em; } #section-content .listing ul li .text p.read-more { padding-bottom: 0; } #sub-menu, #sub-menu li, #sub-menu li a, #sub-menu li ul { width: 146px; float: left; clear: both; display: block; } #sub-menu li a { width: 146px; color: #333; font-weight: bold; font-size: 1.4em; font-family: Arial, "Helvetica Neue", Helvetica, "Lucida Grande", FreeSans, sans-serif; text-decoration: none; padding: 0 0 .75em; position: relative; } #sub-menu li a:hover { text-decoration: underline; } #sub-menu li .sub li.active a { color: #708131; text-decoration: underline; } #sub-menu li .sub { padding: 1.1em 0; width: 146px; } #sub-menu li li { width: 136px; padding: 0 0 0 10px; } #sub-menu li li a { font-weight: normal; width: 136px; font-size: 1.2em; } .relatedArticles h5 a { font-size:12px; font-weigth:bold; color:#22AECE; } .relatedArticles h5 { margin-bottom:5px; } /* FAQ =============================================================== */ .faqElement{ border:1px solid #C7C5C5; margin-top:10px; padding:20px 10px 10px 20px; } /* SEARCH RESULTS =============================================================== */ #search-results #hits .hit h2 { font-size: 1.8em; padding: 0 0 .25em; } #search-results #hits .hit p.extract { font-size: 1.2em; line-height: 1.5; padding: 0 0 2em; } /* CONTACT FORM [FRONT] ---------------------------------------------------------------- */ #form-2031,#form-2058 { margin: 0 20px 0 0; } #form-2031,#form-2058 #form-2031 ul, #form-2058 ul, #form-2031 ul li, #form-2058 ul li { width: 300px; float: left; clear: none; padding: 0 0 40px; } #form-2031 ul, #form-2058 ul { padding: 0; } #form-2031 ul li, #form-2058 ul li { padding: 0 0 10px; } #form-2031 ul li.heading, #form-2058 ul li.heading { color: #333; font-size: 2.4em; line-height: 1; font-weight: 200; padding: 0 0 .9em; margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", FreeSans, sans-serif; } #form-2031 ul li input, #form-2058 ul li input { width: 282px; height: 20px; padding: 7px 9px 0; background: url(/sitefiles/5005/09/gfx/inputs.png) 0 0 no-repeat; border: 0; margin: 0; color: #CCC; font-size: 1.2em; font-family: Arial, "Helvetica Neue", Helvetica, "Lucida Grande", FreeSans, sans-serif; } #form-2031 ul li textarea, #form-2058 ul li textarea { width: 282px; height: 101px; padding: 7px 9px; background: url(/sitefiles/5005/09/gfx/inputs.png) 0 -27px no-repeat; border: 0; color: #CCC; font-size: 1.2em; font-family: Arial, "Helvetica Neue", Helvetica, "Lucida Grande", FreeSans, sans-serif; } #form-2031 ul li input:focus, #form-2058 ul li input:focus, #form-2031 ul li input.focus, #form-2058 ul li input.focus, #form-2031 ul li textarea:focus, #form-2058 ul li textarea:focus, #form-2031 ul li textarea.focus, #form-2058 ul li textarea.focus { color: #666; } #form-2031 ul li.form-controls, #form-2058 ul li.form-controls { padding: 5px 0 0; margin: 0; } #form-2031 ul li.form-controls input, #form-2058 ul li.form-controls input { width: 111px; height: 29px; padding: 0 0 2px; font-size: 1.4em; font-weight: 500; color: #AAC937; text-align: center; float: right; background-position: 0 100%; } /* VIDEO OVERVIEW ---------------------------------------------------------------- */ .videoverview ul.videos, .videoverview ul.videos li { width: 630px; float: left; clear: both; } .videoverview ul.videos li { margin: 0 0 10px; } .videoverview ul.videos li a { display: block; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #999; border-right: 1px solid #666; border-bottom: 1px solid #666; padding: 9px 18px 12px; font-size: 1.4em; color: #FFF; font-weight: bold; text-decoration: none; text-shadow: 1px 1px 1px #666; background: #999 url(/sitefiles/5005/09/gfx/play.png) 592px 50% no-repeat; } .videoverview ul.videos li a:hover { background-position: 595px 50%; } /* TOPIC MAP ---------------------------------------------------------------- */ #topic-map ul.top-links li { line-height: 2; } #topic-map ul.top-links li a { display: block; font-size: 1.4em; color: #333; text-decoration: none; } #topic-map ul.top-links li a:hover { color: #690; text-decoration: underline; } /* THICKBOX ==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==- */ #TB_window a { color: #666; } #TB_window a:hover { color: #000; } #TB_overlay { position: fixed; z-index: 3; top: 0; left: 0; clear: both; height: 100%; width: 100%; } .TB_overlayBG { background: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85); opacity: .85; } * html #TB_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } #TB_window { position: fixed; background: #FFF; z-index: 4; display: none; text-align: left; top: 50%; left: 50%; } * html #TB_window { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB_ImageWrap { float: left; clear: both; position: relative; } #TB_window img#TB_Image { display: block; padding: 10px 10px 50px; } #TB_ImageWrap a { display: block; width: 50%; height: 100%; position: absolute; top: 0; clear: both; background: url(/sitefiles/45/gfx/blank.gif); } #TB_ImageWrap a#TB_prev { left: 0; } #TB_ImageWrap a#TB_next { right: 0; } #TB_ImageWrap a:hover { text-indent: 1px; } #TB_ImageWrap a strong { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; text-indent: -9999px; background: #FFF; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } #TB_ImageWrap a:hover strong { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=5)"; *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=5); opacity: .05; } #TB_ImageWrap a .arrow { display: block; width: 20px; height: 40px; position: absolute; top: 50%; margin-top: -48px; clear: both; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; background: url(/sitefiles/45/gfx/thickbox-arrows.gif) 0 0 no-repeat; } #TB_ImageWrap a#TB_prev .arrow { left: -20px; } #TB_ImageWrap a#TB_next .arrow { right: -20px; background-position: -20px 0; } #TB_ImageWrap a:hover .arrow { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } #TB_caption span a { display: block; width: 40px; height: 30px; position: relative; } #TB_caption { width: 100%; height: 30px; position: absolute; bottom: 0; left: 0; clear: both; padding: 0 0 10px; } #TB_caption em.caption { display: block; padding: 0 20px; font-size: 1.3em; height: 17px; line-height: 17px; } #TB_secondLine { padding: 0 20px; height: 13px; line-height: 13px; font-size: 1.1em; color: #BBB; } a#TB_ImageOff { display: block; width: 100px; text-align: center; height: 30px; line-height: 30px; background: #EEE; color: #666; font-weight: bold; position: absolute; bottom: 0; right: 0; font-size: 13px; text-decoration: none; } #TB_load { position: fixed; display: none; height: 17px; width: 160px; z-index: 3; top: 50%; left: 50%; margin: -8px 0 0 -80px; } * html #TB_load { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB_HideSelect { z-index: 2; position: fixed; top: 0; left: 0; background-color: #FFF; border: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; height: 100%; width: 100%; } * html #TB_HideSelect { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); }