body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, th, td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: normal; } ol, ul { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr, acronym { border: 0; } a { text-decoration: none; outline: none; } input, input:focus { outline: none !important; } /* master text styles */ body { font-family: Verdana, Arial, sans-serif; font-size: 75%; /* 12px */ line-height: 1.5; color: #444; } html>body { font-size: 12px; } *:first-child+html body { font-size: 75%; } p { font-size: 12px; margin-bottom: 18px; } select, input, textarea { font: 99% Verdana, Arial, sans-serif; } h2 { font-family: Tahoma, Geneva, sans-serif; font-size: 24px; line-height: 28px; letter-spacing: -1px; margin-bottom: 8px; color: #0062ab; } h3 { font-family: Tahoma, Geneva, sans-serif; font-size: 16px; line-height: 1.2; color: #0062ab; margin-bottom: 8px; } h4 { font-size: 12px; font-weight: bold; line-height: 18px; margin-top: 18px; color: #0062ab; } a { color: #f78f1e; } a:hover, a:active { color: #498ee0; } ul, ol { list-style-type: disc; list-style-position: inside; margin-bottom: 18px; } li { margin-bottom: .4em; } dl { margin: 18px 0; } dt { font-weight: bold; } /* page layout styles */ html, body { height: 100%; } #non-footer { position: relative; min-height: 100%; width: 960px; margin: 0 auto; } * html #non-footer { height: 100%; } body { background: #fff url(/static/images/body-background.png) repeat-x; } body#in-home { background-image: url(/static/images/body-background-home.png); } #header { position: relative; overflow: hidden; width: 960px; margin: 0 auto 44px auto; } .line { position: relative; overflow: visible; width: 960px; margin: 0 auto; } #footer { position: relative; clear: both; height: 22em; margin: -22em 0 0 0; } .inner-line { position: relative; float: right; width: 720px; padding: 0 10px; } .item { position: relative; overflow: auto; float: left; left: 100%; } #navbar { margin-left: -950px; width: 190px; } #content { margin-left: -740px; width: 490px; } #sidebar { margin-left: -230px; width: 220px; } #wide { margin-left: -740px; width: 730px; } #non-footer .line { padding-bottom: 23em; } /* header */ #header h1 a { display: block; overflow: hidden; width: 190px; height: 150px; padding: 0; margin-left: 10px; text-indent: -100em; background: url(/static/images/banner-background.png) no-repeat; } #header #catch-phrase { overflow: hidden; position: absolute; left: 222px; top: 51px; width: 438px; height: 49px; text-indent: -100em; background: url(/static/images/catch-phrase.png) no-repeat; } /* menus */ #main-menu { position: relative; margin: 0 auto; padding: 8px 0 7px 0; } #main-menu ul { position: relative; overflow: hidden; text-align: center; top:0 ; left: 0; height: 21px; margin: 0; background: #00003e url(/static/images/body-background.png) 0 -158px repeat-x; } #main-menu li { display: inline; } #main-menu li.back { position: absolute; width: 9px; border: 1px solid #1071c6; z-index: 8; background: url(/static/images/menu-highlight.png) repeat-x; } #main-menu li a { position: relative; font: 13px Verdana, Arial, sans-serif; line-height: 19px; color: #e2e2e2; outline: none; padding: 0 10px; z-index: 10; } #sub-menu { position: absolute; top: 15px; right: 180px; } #sub-menu li { float: left; line-height: 1; padding-left: .5em; color: #aaa; list-style: disc inside none; } #sub-menu li.first { list-style: none; } #sub-menu a { font-size: 11px; color: #aaa; } /* global search */ #global-search { position: absolute; right: 10px; top: 10px; width: 162px; height: 24px; background: url(/static/images/search.png) no-repeat; } #global-search #id_query { font-size: 11px; width: 142px; height: 18px; padding-left: 6px; margin: 4px 0 0 2px; border: none; background: transparent; } #global-search .go { position: absolute; top: 0; right: 0; width: 30px; height: 24px; } /* navbar (left sidebar) and category menu */ #navbar { } #category-menu { width: 170px; background-color: #fff; } #category-menu li { margin-bottom: 8px; list-style: none; } #category-menu ul { border-style: solid; border-color: #dadee4; border-width: 0 3px ; } #category-menu ul li { margin: 0; border: none; } #category-menu a.header { display: block; font-weight: bold; height: 30px; padding: 5px 10px 0 10px; color: #555; background: url(/static/images/accordion-header.png) repeat-x; } #category-menu a.opened { height: 30px; color: #333; } #category-menu a.closed { height: 25px; color: #333; } #category-menu a:hover { color: #333; } #category-menu ul li a { display: block; font-size: 11px; line-height: 18px; padding: 0 10px; color: #444; } #category-menu ul li a:hover, #category-menu ul li a:active { color: #0062ab; } #category-menu .even { background-color: #f2f2f2; } /* breadcrumbs */ #breadcrumbs { position: absolute; left: 220px; top: 196px; width: 480px; color: #0062ab; } #breadcrumbs li { float: left; font-size: 10px; padding: 0 4px 0 6px; margin: 0; list-style: none; background: transparent url(/static/images/bullet.gif) 0 5px no-repeat; } #breadcrumbs li.first { padding-left: 0; background: none; } #breadcrumbs a { color: #666; } #breadcrumbs a:hover, #breadcrumbs a:active { color: #498ee0; } /* footer */ #footer { font-size: 11px; line-height: 18px; color: #b0b0b0; background: #262754 url(/static/images/footer-background.png) repeat-x; } #footer p { font-size: 11px; line-height: 18px; } #navigate { margin-left: -950px; width: 240px; } #navigate ul.primary { float: left; width: 140px; } #browse { margin-left: -710px; width: 200px; } #contact { margin-left: -230px; width: 210px; } #register { margin-left: -470px; width: 210px; } #footer .catch-phrase { font-size: 14px; font-weight: bold; font-style: italic; text-transform: uppercase; color: #fff; padding: 20px 0 12px; margin-left: -950px; } #footer .catch-phrase span { font-weight: normal; color: #f78f1e; } #footer h3 { font-family: Verdana, Arial, sans-serif; font-size: 12px; line-height: 18px; text-transform: uppercase; margin: 0; color: #f78f1e; border: none; } #footer h3 span { color: #caccd9; } #footer li { margin: 0; margin-bottom: 0; list-style: none outside; } #footer a { color: #c8c8c8; border-bottom: 1px dotted #c8c8c8; } #footer a:hover, #footer a:active { color: #fff; border-bottom: 1px solid #fff; } #footer .contacts { margin-bottom: 18px; } #footer .contacts li { text-align: right; width: 100%; } #footer .contacts li:hover { color: #fff; } #footer .contacts .head-office { font-size: 1.1em; font-weight: bold; } #footer .contacts .branch { float: left; } #footer .contacts .phone { } #footer dl.contacts .head-office { font-size: 1.1em; font-weight: bold; } #footer dl.contacts dt { margin-bottom: .5em; } #footer dl.contacts dd { float: right; margin-top: -1.8em; } #footer .right div { margin-top: 1.3em; } #footer .credit { position: absolute; right: 480px; bottom: 32px; color: #989898; } #footer .credit a { display: block; position: absolute; overflow: hidden; right: -70px; bottom: 2px; width: 65px; height: 22px; line-height: 100em; border: none; background: url(/static/images/itavor.png) no-repeat; } #footer .copyright { position: absolute; text-align: center; left: 0; bottom: 12px; width: 100%; color: #989898; } #to-top { position: absolute; display: block; top: -36px; right: 20px; border: none; } /* main content area */ .teasers dt { font-size: 16px; font-weight: normal !important; line-height: 18px; width: 100%; padding: 27px 0 9px 0; color: #0062ab; clear: both; } .teasers dt.first { padding-top: 9px; } .teasers dt a { color: #0062ab; } .teasers dd.photo { float: right; width: 120px; } .teasers dd.content, .teasers dd.date { } .teaser { width: 100%; padding-top: 6px; margin-top: 12px; border-top: 1px dotted #d8d8d8; } .teaser.first { padding-top: 0; margin-top: 0; border: none; } .teaser h3 a { color: #444; } .teaser img.photo { float: right; margin-top: 2px; } a.category { display: block; font-size: 16px; line-height: 1.2; color: #444; margin-top: 8px; } a.product { display: block; font-size: 12px; font-weight: bold; color: #666; } a.category:hover, a.category:active, a.product:hover, a.product:active { color: #498ee0; } .event-information { margin-bottom: 1.5em; order-collapse: collapse; } .event-information th { color: #ddd; background-color: #47638f; } .event-information th, .event-information td { padding: 4px 12px; border: 1px solid #2d3c69; } /* sidebar and portlets */ .portlet { margin-bottom: 18px; } .portlet h3 { margin: 0 0 18px 0; } .portlet dt { font-size: 12px; padding: 16px 0 0 0; margin: 18px 0 0 0; border-top: 1px dotted #d8d8d8; } .portlet dt.first { border: none; padding-top: 0; margin-top: 0; } .portlet dd.image { float: right; margin-top: 2px; } .portlet dd.brief { margin-right: 100px; } .portlet li { list-style: none; list-style-position: outside; padding: 8px 0 0 0; margin: 9px 0 0 0; color: #444; border-top: 1px dotted #d8d8d8; } .portlet li.first { border: none; padding-top: 0; margin-top: 0; } .portlet a:hover { color: #498ee0; } .portlet img { float: left; } .portlet .more { clear: left; } .portlet .date { display: block; font-weight: normal; font-size: 11px; line-height: 18px; color: #989898; } .portlet.news { float: left; width: 220px; padding: 0 10px 0 0; } .portlet.events { float: left; width: 230px; padding: 0 10px 0 10px; } .portlet.promotion, .portlet.register { border: 3px solid #dadee4; background-color: #fff; margin-top: -8px; } .portlet.promotion h3 { display: block; padding: 5px 6px 4px 8px; margin: 0 0 8px 0; color: #fff; border: none; background: #ce1f21 url(/static/images/promotion-header.png) no-repeat; } .portlet.register h3 { display: block; margin: 0 0 6px 0; padding: 4px 6px 3px 8px; color: #fff; border: none; background: #2a3461 url(/static/images/register-header.png) no-repeat; } .portlet.promotion img { display: block; float: none; margin: 12px auto; } .portlet.promotion div, .portlet.register div { padding: 6px; background-color: #fff; } .portlet.promotion div div, .portlet.register div div { margin-left: auto; width: 60%; } .portlet.article-feature h4 { font-family: Tahoma, Geneva, sans-serif; font-size: 24px; line-height: 36px; letter-spacing: -1px; color: #0062ab; } /* forms */ form { margin-bottom: 2em; } form .row { position: relative; margin-bottom: 1em; padding-left: 160px; width: 570px; } form label { float: left; clear: both; font-weight: normal; width: 150px; margin-left: -160px; } form label.required { font-weight: bold; } form input { height: 1.4em; } form input, form textarea { width: 240px; } form .helptext { color: #777; } form .errorlist { position: absolute; left: 420px; top: 0; color: #f78f1e; } form .help { color: #888; margin-top: 3px; } form li { list-style: none; } form li label { display: block; float: none; clear: none; font-weight: normal; width: 590px; margin: 0; } form li label input { width: 30px !important; } div.error-prompt { margin-bottom: 2em; padding: .5em 1em; width: 380px; border: 2px solid #f78f1e; } /* paginator */ .paginator { clear: both; margin: 0 auto; padding-top: 20px; text-align: center; font-size: 1.1em; } .paginator a, .paginator span { margin: 0 6px; padding: 3px 6px 2px 6px; border: 1px solid #ccc; text-decoration: none !important; } .paginator a:hover, .paginator a:active { text-decoration: none; } .paginator span.current { font-weight: bold; background: #e0e0e0; } /* * javascript-based image caption display * http://lab.arc90.com/2006/07/image_caption_1.php */ div.image-with-caption { position: relative; } div.image-with-caption .bar { position: absolute; display: block; bottom: 2px; left: 2px; width: 100%; height: 16px; background: #444; } div.image-with-caption .caption { position: absolute; display: block; bottom: 2px; left: 2px; width: 100%; color: #ddd; padding: 4px 6px 0 6px; } div.image-with-caption p { margin-bottom: 1em; padding: 4px 6px 0 6px; } div .float-left { float: left; margin-right: 2em; } div .float-right { float: right; margin-left: 2em; } a.file { display: block; margin-left: 22px; white-space: normal; } a.file img { margin-left: -22px; } a.file .size { white-space: nowrap; } .date { font-style: italic; color: #caccd9; } img.photo { padding: 1px; border: 1px solid #ccc; } a:hover img.photo { border-color: #0062ab; } img.inline { float: left; margin: 0 12px 6px 0; } a.more { display: inline; font-style: italic; color: #f78f1e; white-space: nowrap; border-bottom: 1px dotted #f78f1e; } a.more:hover, a.more:active { color: #498ee0; border-bottom: 1px solid #498ee0; } .amp { font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", serif; font-size: 1.1em; line-height: 10%; /* Fix to maintain correct baseline */ font-style: italic; } .category-photos { float: right; width: 180px; padding: 2px 10px 16px 10px; } .product-photos { float: right; width: 180px; padding: 2px 10px 16px 10px; } .product-photos div { margin-bottom: 12px; } .product-photos .caption { display: block; } .example { color: #888; } /* Flash snapshots with image fallback */ #snapshots { width: 940px; height: 180px; margin-left: 10px; background: #25325b url(/static/images/snapshots.jpg) no-repeat; } /* link and form buttons */ .button { display: block; overflow: hidden; font-weight: normal; height: 26px; padding: 0 28px 0 0; margin: 0; color: #f0f0f0; border: none; background: #2a3461 url(/static/images/button-right.png) right top no-repeat; } .button span { display: block; line-height: 16px; padding: 5px 20px 5px 16px; background: transparent url(/static/images/button-left.png) no-repeat; } .button:hover, .button:active { color: #fff; background-position: right -26px; outline: none; } .button:hover span, .button:active span { color: #fff; padding: 6px 19px 4px 17px; background-position: left -26px; } /* product display elements and tables */ .superceded { padding: 6px; margin: 12px 10px 18px 0; border: 3px solid #f00; background-color: #fff; } .superceded a { display: block; } .replaces { clear: right; margin-top: 18px; border-top: 2px solid #dadee4; } .replaces .note { font-style:italic; text-transform: uppercase; } .new { position: absolute; top: 0; right: 0; overflow: hidden; width: 100px; height: 100px; text-indent: -100em; background: transparent url(/static/images/new-product-badge.png) left top no-repeat; } .sku { font-weight: bold; color: #666; } .product-list { width: 100%; border-collapse: collapse; border: 1px solid #999; clear: right; } .product-list th { color: #eee; background-color: #555; } .product-list .odd { background-color: #dfdfdf; } .attribute-list { border-collapse: collapse; clear: right; width: 99%; margin-left: 1px; table-layout: fixed; } .attribute-list caption { display: -moz-inline-box; display: inline-table; display: inline-block; white-space: nowrap; font-family: Tahoma, Geneva, sans-serif; font-size: 16px; line-height: 1.2; color: #0062ab; padding-bottom: 1px; margin: 8px 0; } .attribute-list th { text-align: center; vertical-align: bottom; width: 60px; padding: 4px; color: #fff; background-color: #4168a6; border: 2px solid #2b3865; } .attribute-list td { text-align: center; vertical-align: top; padding: 8px 4px; border: 2px solid #2b3865; } .attribute-list td.icon { vertical-align: middle; padding: 4px; background-color: #a0a0a0; } .attribute-list .unused { border: none; background-color: transparent; } .variations { } .variations th, .variations td { padding: 1px 4px; } .variations th { background: #4f81bd; color: #fff; } .variations .odd td { background: #dce6f2; } /* jquery.toltip */ #tooltip { position: absolute; z-index: 3000; border: 1px solid #111; background-color: #eee; padding: 5px; } #tooltip h3, #tooltip div { font: 12px Verdana, Arial, sans-serif; margin: 0; border: none; } /* Clearfix http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack/ */ .clearfix, .teaser { display: inline-block; } .clearfix:after, .teaser:after, .line:after, #footer .line:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } #DEBUG ol { margin: 0; } #jump-to-content { position: absolute; left: -100em; }