/* * Mattias Bengtsson * Copyright Sector 5 AB 2010 * ----------------------------------------------------------------------------- */ @media screen { /* * Normalise various elements (unset margins, borders etc) */ 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, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; } body { line-height: 1; } ol, ul { list-style: none; } img { display: block; } /* * Generics, defauls, shared */ body { background: white; } body, input, select, textarea, button { font-family: arial, sans-serif; color: #333; } a { color: #bf0000; text-decoration: none;} a:hover { text-decoration: underline; } /* Try to match IE margins to Firefox */ input.checkbox { vertical-align: bottom; } * html input.checkbox { margin: -2px -3px -3px -4px; } *:first-child+html input.checkbox { margin: -2px -3px -3px -4px; } /* * Layout */ .richtext { font-size: 14px; line-height: 20px; color: #4d4d4d; } .richtext p { margin-bottom: 12px; } .richtext img { margin-top: 5px; margin-bottom: 7px; display: block; } .richtext table { margin-bottom: 12px; } .richtext strong { font-weight: bold; } .richtext h2 { font-size: 20px; line-height: 24px; font-weight: bold; margin: 0 0 8px 0;} .richtext h3 { font-weight: bold; } .richtext ul, .richtext ol { margin-bottom: 12px; } .richtext ul ul, .richtext ol ol { margin-bottom: 0; } .richtext ul li { background: url(../images/richtext-bullet.gif) 2px 8px no-repeat; padding-left: 10px; } .richtext ol li { list-style: decimal inside;} .richtext blockquote { color: #4d4d4d; font: italic 16px/20px Arial, Verdana, sans-serif; padding: 5px 0 5px 15px; margin: 20px 0 20px 44px; text-indent: 3px; background: url(../images/gray-border.gif) left top repeat-y; } .richtext blockquote p { margin: 0;} .richtext p.date { margin: 28px 0 6px 0; font-size: 12px;} p.image-description { font-size: 12px; margin: -7px 0 15px 0;} .richtextcontainer { float:left; width: 455px; padding-right: 10px; margin:32px 0px 20px 0px;} .richtextcontainer .richtext a { font-size: 12px; line-height: 16px; padding: 0 0 4px 7px; background: url(../images/related-bullet.gif) 0 5px no-repeat; } /* * Layout */ #container { width: 977px; margin: 0 auto; background: white url(../images/body-bg.gif) left top repeat-x; position: relative; height: 900px; } #logotype { padding: 26px 0 0 26px; float: left;} #logotype a { display: block; width: 88px; height: 42px; } #logotype img { display: none; } #theme { background-repeat: no-repeat; float: left; } #header { float: right; margin: 32px 0 0 0; width: 837px; background: #111111; } #search { float: right; padding: 8px 13px 0 0; font-size: 12px; } #search input { border: 1px solid #999999; padding: 2px; width: 155px; margin-right: 10px; float: left; } a.button { background: url(../images/form-button-bg.gif) left top no-repeat; display: block; color: white; float: left; margin-top: 1px; font-size: 12px; padding-left: 1px;} a.button span { background: url(../images/form-button-bg.gif) right top no-repeat; display: block; padding: 4px 6px 4px 5px; float: left; cursor: pointer;} #main { float: left; padding-left: 15px; width: 707px; } #preamble, #prod-preamble { width: 707px; float: left;} #content { padding: 35px 31px 15px 30px; background: white; float: left; width: 646px; } #sidebar { float: right; padding-right: 15px; width: 227px; } #main, #sidebar { padding-top: 240px;} .transparent { background: rgba(255,255,255,0.7); } .transparent { filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B3FFFFFF', EndColorStr='#B3FFFFFF'); } #footer { float: left; width: 977px; color: #9a9a99; background: #fdfdfd url(../images/footer-bg.gif) left 113px repeat-x; padding-bottom: 100px; font-size: 11px; line-height: 15px; } #footer img { border: 20px solid white; border-width: 20px 0 9px; } #footer #flags { float: right; width: 977px; margin-bottom: 32px; } #footer #flags ul { float: right; margin-right: 9px; } #footer #flags li { float: left; margin-left: 8px; } #footer #flags a { display: block; height: 11px; width: 16px; text-indent: -999px; overflow: hidden; background: url(../images/flags.gif) left top no-repeat; } #footer #flags #flag-ch { background-position: left -16px; } #footer #flags #flag-it { background-position: left -31px; } #footer #flags #flag-nl { background-position: left -47px; } #footer #flags #flag-es { background-position: left -63px; } #footer #flags #flag-fr { background-position: left -78px; } #footer #flags #flag-de { background-position: left -93px; } #footer #flags #flag-gb, #footer #flags #flag-uk { background-position: left -108px; } #footer #flags #flag-fi { background-position: left -127px; } #footer #flags #flag-no { background-position: left -144px; } #footer #flags #flag-dk { background-position: left -160px; } #footer #flags #flag-se { background-position: left -176px; } #footer #flags #flag-blx { background-position: left -192px; } #footer #flags #flag-global { background-position: left -208px; } #footer .section { float: left; width: 120px; padding-left: 10px; } #footer .section.first { padding-left: 15px; } #footer .section li { line-height: 12px; margin-bottom: 4px;} #footer #contact { width: 170px; } #footer a { color: #9a9a99; } #footer strong { font-weight: bold; text-transform: uppercase; font-size: 11px; margin-bottom: 5px; display: block; } #footer p { margin-bottom: 16px; } /* * Menu / Mega drops */ #mega-drop { float: left; position: relative; z-index: 101;} #mega-drop ul { float: left; } #mega-drop li { float: left; position: relative; z-index: 100;} #mega-drop a.mega-link { color: white; font-size: 15px; display: block; padding: 12px 16px 11px; } #mega-drop li.active { z-index: 99; } #mega-drop li.active a.mega-link { background: #bf0000; } #mega-drop li:hover a.mega-link { background: url(../images/nav-gfx.gif) left top repeat-x; text-decoration: none; color: #303030;} #mega-drop li:hover .mega-content { left:0px;top:auto;} #mega-drop li:hover .mega-content.dif { right: 0px; left: auto;} #mega-drop .mega-content { background: #f8f8f8; font-weight:normal; left:-999em; padding: 20px 20px 10px; position:absolute; text-align:left; width:344px; border-bottom: 4px solid #b00000; z-index: 99; } #mega-drop .mega-content a { float: none; background: transparent; position: static; color: #303030; padding: 0; margin: 0; display: inline;} #mega-drop .mega-content a:hover { color: #b00000;} #mega-drop .mega-content a:hover span { text-decoration: underline; } #mega-drop .mega-content li { float: none;} #mega-drop .mega-content .mega-list { float: left;} #mega-drop .mega-content .mega-list ul { width: 160px; padding: 15px 10px 0 0;} #mega-drop .mega-content .mega-list li { font-size: 14px; line-height: 17px; margin: 0 0 10px 0; } #mega-drop .mega-content .mega-list ul ul { padding: 5px 0 0 10px; float: none; width: auto;} #mega-drop .mega-content .mega-list li li { padding: 0 0 0 10px; background: url(../images/mega-list-bullet.gif) left 8px no-repeat; margin: 0 0 5px 0;} #mega-drop .mega-header { border-bottom: 1px solid #dcdcdc; padding-bottom: 12px; float: left; width: 344px;} #mega-drop .mega-header h2 { font-size: 12px; font-weight: bold; margin: 5px 0 4px; line-height: normal;} #mega-drop .mega-header a { float: left; padding: 0 0 7px 7px;} #mega-drop .mega-header a.first { padding-left: 0px; clear: left;} #mega-drop .mega-header a img { margin: 0;} #mega-drop .mega-header a img.first { margin-left: 0px;} #mega-drop .mega-header img { float: left; border: 1px solid white; margin: 0 0 7px 7px; } #mega-drop .mega-header img.first { margin-left: 0px; clear: both; } #mega-drop .mega-header { font-size: 12px; line-height: 16px; } #mega-drop .mega-header-text a { float: none;} #mega-drop .mega-header-text p { margin: 0 0 0px 0;} #mega-drop .mega-header-text { float: left; width: 220px; margin-left: 10px;} #mega-drop .mega-header-text.single { width: 300px; margin: 0;} #mega-drop .mega-header-text p.learn-more { margin-top: 10px;} #mega-drop .mega-header-text p.learn-more a { background: url(../images/related-bullet.gif) left 5px no-repeat; font-weight: bold; padding-left: 8px;} #mega-drop .mega-entrance { float: left; width: 168px;} #mega-drop .mega-entrance.first { margin-right: 8px;} #mega-drop .mega-entrance img { margin: 0 0 5px 0;} #mega-drop .mega-entrance p { font-size: 12px; margin: 0px 0 0 4px;} #mega-drop li .entrance-link a { background: url(../images/entrance-bullet.gif) right -90px no-repeat; color: #303030; padding-right: 16px; text-transform: uppercase; font-size: 11px;} #mega-drop #mega-contact h2 { font-size: 20px; line-height: 28px; color: #4d4d4d; margin-bottom: 10px;} #mega-drop #mega-contact h2 span { color: #bf0000;} #mega-drop #mega-products { width: 445px;} #mega-drop #mega-products p.area-header { font-size: 12px; font-weight: bold; display: block; margin: 0 0 12px;} #mega-drop #mega-products li { float: left; width: 210px; margin: 0 0 6px 0; font-size: 14px;} #mega-drop #mega-products img { float: left; margin-right: 10px;} #mega-drop #mega-products span { float: left; margin: 8px 0 0 0;} #mega-drop #mega-products .column { float: left; width: 210px; margin-right: 12px;} * html #mega-drop li.hover a.mega-link { background: url(../images/nav-gfx.gif) left top repeat-x; text-decoration: none; color: #303030;} * html #mega-drop li.hover .mega-content { left:0px; top: auto;} * html #mega-drop li.hover .dif { right: 0px; left: auto ; } * html #mega-drop li li a { cursor: pointer;} /* * Tagline */ #main.tagline { padding: 95px 0 0 0; width: 977px;} #tagline-text { margin: 0 0 0 0px; height: 70px; float: left; padding: 15px 10px 5px; position: absolute; left: 50px;} #tagline-text h1 { font-size: 65px; font-weight: normal; } #tagline-text h1 span { font-size: 53px;} #tagline-text h1 a, #tagline-text h1 a:hover { color: #000; text-decoration: none;} #tagline-text-sub { height: 50px; float: left; padding: 10px 10px 5px; position: absolute; left: 50px; top: 255px; } #tagline-text-sub h2 { font-size: 42px; font-weight: normal; color: #000; } /* * Entrances */ #overview { float: left;} .hover-list ul { float: left; width: 960px; overflow: hidden; } .hover-list li { float: left; width: 227px; margin: 0 13px 13px 0; position: relative; height: 184px; overflow: hidden;} .hover-list li .img-container { width: 225px; height: 160px; float: left; position: relative; overflow: hidden; border: 1px solid white; border-bottom: none;} .hover-list li img { display: block; position: absolute;} .hover-list .info { padding: 0 1px; float: left; position: relative; width: 225px;} .hover-list .info-content { background: #111111; float: left; width: 225px; height: 22px; padding: 0; border-top: 1px solid white; overflow: hidden;} .hover-list .info a { float: left; width: 207px; color: #fff; padding: 0 9px 0 9px;} .hover-list .info a:hover { text-decoration: none;} .hover-list .info span { float: left; width: 207px; cursor: pointer;} .hover-list .info span.title { font-size: 14px; padding: 4px 0 0 0; height: 18px; line-height: 15px; background: url(../images/entrance-bullet.gif) right 6px no-repeat; margin: 0 0 2px 0; } .hover-list .info span.descr { font-size: 12px; line-height: 15px; padding: 0 0 7px 0;} .hover-list .info a:hover span { color: #ffc0c0;} .hover-list .info-content.hover { position: absolute; bottom: -23px; left: 1px; background: #bf0000;} .hover-list .info-content.hover span.title { background-position: right -36px;} #entrances { padding: 319px 0 55px 15px; float: left; height: 223px; width: 962px;} #entrances.hover-list ul { height: 223px;} #entrances.hover-list li .img-container { height: 200px; width: 227px; border: none;} #entrances.hover-list li { width: 227px; height: auto; padding-bottom: 0; overflow: visible;} /* * Preamble */ #preamble h2, #prod-preamble h2, #subsection { padding: 6px 22px; } #preamble h2, #prod-preamble h2 { font-size: 25px; background: white; font-weight: normal;} #preamble h1, #prod-preamble h1 { font-size: 52px; padding-top: 23px; font-weight: normal; padding-bottom: 24px;} #preamble h1.small-header { font-size: 32px; line-height: 34px; padding-bottom: 0; height: auto;} #subsection { width: 663px; float: left;} #subsection.auto { height: auto;} #preamble #subsection.auto h1 { height: auto;} #filter { font-size: 14px; padding-bottom: 8px; } #filter select { margin-right: 14px; z-index: -1;} .cufon-ready #preamble h2, .cufon-ready #prod-preamble h2 { /* for Cufon.replace('h2') */ padding-top: 8px; padding-bottom: 4px; } /* * Content */ #related li, #designers .richtext li{ font-size: 12px; line-height: 16px; padding: 0 0 4px 7px; background: url(../images/related-bullet.gif) 0 7px no-repeat; } #content #main-content { width: 404px; float: left; } #related { width: 200px; margin-left: 0; float: right; font-size: 12px; line-height: 16px; color: #4d4d4d; } #related #measurements, #related #specifications { float: left; width: 200px;} #related #measurements { padding-bottom: 8px;} #related #specifications { padding-bottom: 15px; } #related #specifications table { border-collapse: collapse; width: 100%; margin-top: 5px; margin-bottom: 7px; } #related #specifications table caption { font-weight: bold; text-align: left; padding-bottom: 7px; padding-left: 2px; } #related #specifications tr.odd td { background-color: #f2f2f2; } #related #specifications td.value { text-align: right; white-space: nowrap; } #related #specifications td { padding: 1px 3px; } #related #specifications p { font-size: 11px; line-height: 13px; padding-left: 3px; padding-top: 2px; } #related h4{ font-size: 11px; color: #909090; text-transform: uppercase; font-weight: bold; margin: 0 0 8px 0;} #related .block-item { border-bottom: 1px solid #e9e9e9; padding: 0 0 8px 0; margin: 0 0 10px; float: left; width: 200px;} #related li a { color: #4d4d4d; font-weight: bold;} #related li { padding-bottom: 8px; font-size: 11px; } #related .documents li { background-image: url(../images/icons.gif); background-repeat: no-repeat; padding-left: 22px;} #related li.pdf { background-position: 0px 0px;} #related li.doc { background-position: -300px 0px;} #related .richtext p { font-size: 12px; line-height: 16px; } #related .richtext h4 { padding-top: 5px;} #sharewidget { float: left; width: 200px; padding-top: 12px; } .addthis_button_compact { color: #115bb5; } /* * Slideshow */ .image-holder { position: relative; width: 404px;} .magnify { position: absolute; right: 0; bottom: 10px; background: #fff url(../images/magnify.gif) 8px 5px no-repeat; padding: 4px 8px 2px 30px; height: 20px; font-size: 11px; color: #303030;} .slideshow-container { padding-bottom: 15px;} .slideshow-container.loader { background: url(../images/loading.gif) center center no-repeat;} .slideshow-container img { margin-top: 0;} .slideshow-container p.image-description { margin-bottom: 0; display: none; } #related .slideshow-nav { float: left; width: 200px; padding-bottom: 10px;} #related .slideshow-nav img { display: block;} #related .slideshow-nav li { background: transparent; float: left; padding: 0; margin: 0 0 10px 10px;} #related .slideshow-nav li.first { margin-left: 0;} #related .slideshow-nav li a { display:block; float:left; height:50px; margin:0; position:relative; width:60px;} #related .slideshow-nav li a.current span { /*background:none repeat scroll 0 0 #bb3671;*/ background: url(../images/selected-thumb.gif) left top no-repeat; display:block; height:50px; left:0; position:absolute; top:0; width:60px } /* * Product */ #main.product-content #prod-preamble { margin-bottom: 13px;} #main.product-content #content { padding-top: 20px; } /* * Product family */ #family { padding-bottom: 30px; float: left;} #family ul { float: left; width: 646px;} #family li { float: left; width: 150px; padding: 0 0 11px 11px;} #family li a { color: #4d4d4d; font-size: 11px; text-transform: uppercase; position: relative; float: left;} #family li a img { display: block; float: left;} #family li a:hover { text-decoration: none;} #family li a span { background: url(../images/entrance-bullet.gif) right -90px no-repeat; color: #303030; padding-right: 16px; margin-top: 12px; float: left;} #family li a:hover span { text-decoration: underline;} #family .tooltip { text-transform: none;} #related #functions { padding-bottom: 0;} #related #functions h4 { padding-top: 0;} /* * Designers */ #designers li { float: left; width: 646px; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #e9e9e9; } #designers li li { margin: 0; width: auto; float: none; padding: 0; margin-bottom: 0; border-bottom: 0; } #designers .richtext { float: left; width: 390px; padding: 0 0 10px 0;} #designers .richtext h3 a { font-weight: bold; color: #4d4d4d;} #designers .richtext .sub-header { font-size: 12px; line-height: 14px;} #designers .richtext li a, .richtextcontainer .richtext a { color: #4d4d4d; font-weight: bold;} #designers .images { float: right; width: 225px;} #designers .images li { margin: 0 0 7px 7px; float: left;} #designers .images li.first { margin: 0;} #designers .images img { display: block;} /* * Inspiration */ #inspiration #preamble { width: 947px;} #inspiration #inspiration-wrapper { float: left; width: 947px;} #inspiration #inspiration-wrapper h1 { padding: 29px 22px 0; height: 97px;} #inspiration #inspiration-content { padding: 0 0 0 9px;} #inspiration .area { float: left; padding: 0 0 20px 0;} #inspiration img { border: 1px solid white; display: block;} #inspiration .main-image { float: left; width: 227px; padding: 0 7px 0px 0;} #inspiration .area ul { float: left; width: 702px; } #inspiration .area ul.inspiration-thumbs { padding-bottom: 12px;} #inspiration .area li.row { float: left; margin: 0 0 7px 0;} #inspiration .area li li { margin: 0 7px 0px 0; float: left;} #inspiration .area-title { float: left; margin: 4px 0 0 0;} #inspiration .area-title { background: url(../images/entrance-bullet.gif) right -87px no-repeat; padding-right: 16px;} #inspiration .area-title a { color: #303030;} #inspiration .area-title a:hover { text-decoration: underline;} .highres { display: none;} /* * Sidebar */ #sidebar-image { margin-bottom: 13px; border: 1px solid white; } #sidebar-image a { position: relative; display: block; color: #4d4d4d; font-size: 12px; width: 225px; height: 179px;} #sidebar-image .image-zoom { display: block; font-weight: bold; position: absolute; z-index: 1; right: 0; bottom: 0; background: url(../images/image-zoom.png) right top no-repeat; height: 25px; padding: 13px 46px 0 12px; cursor: pointer; } * html #sidebar-image .image-zoom { right: -1px; bottom: -1px;} #sidebar-image .environment-images { display: none;} #sidebar-content { background: white; padding: 15px 13px; color: #4d4d4d; font-size: 12px; float: left; width: 201px;} #sidebar-content a { color: #4d4d4d; font-weight: bold;} #sidebar-content p { padding-bottom: 8px; line-height: 18px; } #sidebar-content img { margin-bottom: 11px; } #sidebar-content li a { font-weight: bold;} #sidebar-content h4 { color: #909090; text-transform: uppercase; font-weight: bold; font-size: 14px; margin: 0 0 12px 0;} #sidebar-content .news-list li { padding: 0 0 8px 7px; background: url(../images/related-bullet.gif) 0 5px no-repeat; } #sidebar-content .news-list li.active a { color: #bf0000;} #sidebar-content .news-list li span.date { font-size: 10px; margin: 0 5px 0 0; display: block; line-height: 14px;} #sidebar-content #color-thumbs { float: left; } #sidebar-content #color-thumbs img { float: left; margin-left: 10px; } #sidebar-content #color-thumbs img.first { margin-left: 0; } #sidebar-content #colors { float: left;} .colorinformation-thumbs { float: left; width: 480px; } .colorinformation-thumbs img { float: left; margin-right: 10px; } .colorinformation-text { margin-bottom: 20px; } .colorinformation-text p { font-size: 12px; } #stickers { float: left; padding: 0 0 12px 0;} #stickers p { float: left; width: 200px; margin: 0; line-height: normal; padding: 0;} #stickers a { float: left; margin: 0 13px 10px 0;} #stickers img { margin: 0; float: left;} #sidebar-content #product-info { font-size: 11px; line-height: 14px; float: left; padding-bottom: 15px;} #sidebar-content #product-info a { color: #b00000; font-weight: normal;} #environment { float: left; padding: 15px 0; border-top: 1px solid #e9e9e9; width: 201px;} #environment li { position: relative; float: left; margin: 0 0 10px 10px;} #environment li.first { margin-left: 0; } #environment li a.tip-trigger { background-image: url(../images/environment-icons.gif); background-repeat: no-repeat; text-indent: -10000px; overflow: hidden; width: 41px; height: 41px; float: left; } #environment a.co2 { background-position: left top;} #environment a.co2:hover { background-position: left -44px;} #environment a.energy { background-position: -46px top;} #environment a.energy:hover { background-position: -46px -44px;} #environment a.epd { background-position: -92px top;} #environment a.epd:hover { background-position: -92px -44px;} #environment a.recycle { background-position: -138px top;} #environment a.recycle:hover { background-position: -138px -44px;} #environment .tooltip p { margin: 0 0 3px 0; padding: 0; line-height: 14px;} #environment .tooltip .link { margin-top: 8px; } #environment .tooltip a { font-weight: normal; color: #6ba44e;} #environment .tooltip a.document { background: url(../images/icons.gif) 100px 100px no-repeat; padding: 2px 0 2px 22px; } #environment .tooltip a.pdf { background-position: left top;} #container .fancy-inline-content { display: none;} .fancy-inline-content { width: 480px; padding: 10px 10px 0; } /* * Tooltips */ .tooltip { background:transparent url(../images/tooltip.png) left bottom no-repeat; font-size:11px; line-height: 14px; width:115px; padding: 0px 0 25px 0px; color:#4d4d4d; display: none; z-index: 99; position: absolute; } .tooltip .tooltip-content { background: transparent url(../images/tooltip.png) left top no-repeat; width: 84px; display: block; padding: 13px 18px 2px 15px;} .tooltip.large { background-position: -140px bottom; width:231px;} .tooltip.large .tooltip-content { background-position: -140px top; width: 198px;} * html .tooltip { background-image: url(../images/tooltip-ie.gif);} * html .tooltip .tooltip-content { background-image: url(../images/tooltip-ie.gif);} /* * Haxx */ #main.wide { width: 947px;} /* placed here because ie6 way of doing hierachy is stupid */ /* * Linklist */ .link-list { float: left; width: 200px; padding-bottom: 22px; } .link-list li { border-bottom: 1px solid #e9e9e9; float: left; width: 200px;} .link-list li a { background: url(../images/sidebar-bullet.gif) right 12px no-repeat; padding: 7px 11px 7px 0; float: left; } .link-list .toggle a, .link-list .pdf a { width: 189px;} .link-list .toggle a { background: url(../images/side-icons.gif) 189px 7px no-repeat;} .link-list .toggle.expanded a { background-position: -211px 7px;} .link-list .toggle .content { display: none; float: left; width: 200px; padding-bottom: 4px;} .link-list .toggle .content p, #sidebar-content .link-list .toggle .content p { padding: 0 0 4px; line-height: 16px;} .link-list .pdf a { background: url(../images/side-icons.gif) -11px 7px no-repeat;} #related .link-list .toggle .content a, #sidebar-content .link-list .toggle .content a { width: auto; background: transparent; font-weight: normal; padding: 0; color: #B00000; float: none;} #related .link-list { border-top: 1px solid #e9e9e9; padding-bottom: 15px;} #related .link-list li { background: transparent; padding: 0;} #related .link-list .toggle a { background: url(../images/side-icons.gif) -416px 7px no-repeat;} #related .link-list .toggle.expanded a { background-position: -616px 7px;} #related .link-list .content li { padding: 3px 0;} /* * Order form */ #order-form h3 label { font-size: 12px; font-weight: bold; display: block; margin: 10px 0 6px 0;} #order-form label { font-size: 14px; color: #4d4d4d;} #order-form input.text , #order-form select { font: 14px/18px Arial, Verdana, sans-serif; color: #4d4d4d; margin: 0 0 12px 0;} #order-form input.text { width: 296px; height: 20px; padding: 0 2px;} #order-form select { width: 304px;} #order-form input.has-error { background: #fff5c7;} #order-form .status { float: left; width: 300px; margin: 25px 0 0 20px; font-size: 11px;} #order-form .status p.error { display: none;} #order-form a.validate { background: url(../images/form-button-bg.gif) left bottom no-repeat; display: block; color: white; float: left; font-size: 12px; height: 20px; margin-top: 20px; padding-left: 1px; } #order-form a.validate span{ background: url(../images/form-button-bg.gif) right bottom no-repeat; display: block; padding: 4px 6px 0 5px; float: left; height: 16px; cursor: pointer;} .form span.formrow { margin: 0 0 15px 0; display: block;} .form span span.formrow { margin: 0 0 3px 0;} .form label, .form .grouplabel { font-size: 12px; color: #4d4d4d; display: block; font-weight: bold; margin: 0 0 4px 0;} .form .checkbox label, .form .radio label { display: inline; font-weight: normal;} .form .formrow.validationerror { font-size: 12px;} .form .error { font-size: 11px; margin: -5px 0 10px; display: block;} .form .grouplabel .error { font-weight: normal; margin-top: 5px;} .form input.text , .form select, .form textarea { font: 12px/16px Arial, Verdana, sans-serif; color: #4d4d4d; margin: 0 0 12px 0;} .form input.text { width: 296px; height: 20px; padding: 0 2px;} .form textarea { width: 296px;} .form select { width: 304px;} .form .form-button { background: url(../images/form-button-bg.gif) left bottom no-repeat; bordeR: none; color: #fff; padding: 2px; font-size: 11px;} /* * find-reseller */ .find-reseller { margin-bottom: 10px; border-bottom: 1px solid #E9E9E9; padding-bottom: 25px; } .find-reseller label { display: block; font-weight: bold;} .find-reseller input.text { width: 180px; height: 20px; padding: 0 2px;} .find-reseller select { width: 190px; } .find-reseller input, .find-reseller select { margin-bottom: 13px; } .button-submit-link { background: url(../images/form-button-bg.gif) left bottom no-repeat; border: none; color: #fff; padding: 2px 7px; font-size: 11px; } a:hover.button-submit-link { text-decoration: none; } /* * Searchresults */ #search-bar { float: left; padding: 15px; background: #F2F2F2; width: 445px;} #search-bar .button { float: right;} #search-bar input { background: #fff; border: 1px solid #999999; padding: 2px; float: left; width: 400px; margin-right: 5px;} #result-header { float: left; width: 475px; padding: 10px 0 0; font-size: 12px;} #quicklinks { float: left; width: 475px; font-size: 12px; padding: 10px 0 2px;} #quicklinks li { float: left; margin-right: 10px;} .listing h3 { margin: 10px 0 10px 0; border-bottom: 1px solid #e9e9e9; padding-bottom: 5px; float: left; width: 475px;} .listing h3 a { color: #4d4d4d; text-decoration: none;} .listing { float: left; width: 475px; padding: 15px 0 0;} .listing li { float: left; width: 475px; margin-bottom: 20px; line-height: 16px; font-size: 13px; line-height: 17px;} .listing li strong.header, .listing li p { float: left; width: 420px;} .listing li strong.header { font-size: 13px; margin-bottom: 3px;} .listing li strong.category { color: #999999; text-transform: uppercase; margin-bottom: 6px; font-size: 12px;} .listing li p.reseller { width: 410px; padding-left: 10px;} .listing li p a { color: #b00000;} .listing li span { float: left; text-align: right; width: 40px; margin: 0 15px 0px 0; font-size: 12px;} .paging { float: left; width: 475px; font-size: 14px; font-weight: bold; border-top: 1px solid #e9e9e9; padding-top: 12px; margin-top: 5px; } .paging a { color: #b00000; font-weight: normal; } .paging ul { float: left; } .paging li { float: left; padding: 2px 9px 2px 0; } .paging li.prev { padding-right: 15px; } .paging li.next { padding-left: 6px; } /* * Errorpage */ #container.error { background: transparent; height: auto;} #container.error #theme { width: 977px;} #container.error #main { width: 900px;} #container.error h1 { font-size: 30px; line-height: 30px; margin: 0 0 15px 0;} . /* * Print */ @media print { body { font-size: 10pt; color: #303030; padding-right: 30pt; } h1, h2, h3, h4, h5, h6, p, li, a, blockquote, label, legend, table, td { font-family: Arial, Verdana sans-serif; } #footer, #header, #related, #sidebar { display: none; } .print { display: block;} a img { border: none;} h1 { font-size: 14pt; line-height: 18pt; margin: 20pt 0 10pt 0;} h2 { font-size: 30pt; line-height: 34pt; margin: 0 0 20pt; padding: 0;} h3 { font-size: 12pt; line-height: 18pt;} h3 { font-size: 10pt; text-transform: uppercase; } #main a:link:after, #main a:visited:after { content:" [" attr(href) "] "; } .preamble p { font-size: 12pt;} .preamble .image-container p { font-size: 9pt; color: #858585;} .richtext { line-height: 14pt;} .richtext li p, .richtext table p { margin: 0;} .richtext ul, .richtext p, .richtext table { margin: 0 0 14pt 0;} blockquote { font-size: 13pt; font-style: italic; font-weight: normal; padding: 0 50pt 0 15pt; line-height: 16pt;} }