/* versatilia.com @author: $author$ @copyright: Versatilia Ltd 2008 @lastmodified: $date$ */ /* Reset */ body,html, h1,h2,h3,h4,h5,h6,p,blockquote, ul,ol,li,dl,dt,dd, aside,header,footer,article,section, table,thead,tbody,tfoot,tr,th,td, form,fieldset { /* normalise margin, padding, typography */ margin: 0; padding: 0; font-family: "Trebuchet MS", Helvetica, Arial, Lucida Sans Unicode, sans-serif; font-size: 100%; line-height: inherit; vertical-align: baseline; } ol, ul { list-style: none outside; } table { border-collapse: collapse; border-spacing: 0; border: 0; } table th, table td { vertical-align: middle; border: 0; } fieldset, img { border: 0; } q:before, q:after { content: ''; } /* bring good browsers in line with IE <= 6 (!?) */ button { width: auto; overflow: visible; } sub,sup { line-height: 0; } /* Layout ------------------------------------------------------------------------------------*/ html, body { text-align: center; background: #28688f; color: #7a7879; line-height: 1.5; } h1,h2,h3,h4,h5,h6 { line-height: 1; } #wrapper { /* this wraps everything inside the tag */ text-align: left; min-width: 960px; } .content { width: 960px; margin: 0 auto; } #header { background: #1c5678; overflow: hidden; min-height: 60px; } #header #logo { float: left; font-family: Lucida Console, Lucida Sans Unicode; text-transform: lowercase; font-weight: normal; background: url(/static/gfx/logo-full.png) no-repeat left center; line-height: 60px; margin: 10px; } #header #logo a { color: #fff; display: block; padding: 0 0 0 70px; font-size: 20px; text-decoration: none; text-indent: -9999px; width: 140px; } #header #logo a:hover { color: #fff; background: none; } #primary { border-top: 20px solid #dde7ee; float: left; width: 100%; } #primary, #secondary { background: #f9f9f9; clear: both; } #footer { background: #1c5678; border-top: 10px solid #28688f; border-bottom: 120px solid #28688f; font-size: small; color: #f9f9f9; clear: both; } #footer #meta { height: 40px; margin-bottom: -100px; padding: 30px 0; } #secondary { display: none; padding: 20px 0; width: 100%; overflow: hidden; } .home #secondary { display: block; border-top: 1px dotted #ccc; background: #fff; } #secondary-links { float: right; width: 320px; margin: 0; } #secondary-links li { margin: 0 10px 20px; width: 300px; border: 1px solid #28688f; -moz-border-radius: 6px; -webkit-border-radius: 6px; overflow: hidden; } #secondary-links li h3 { padding: 5px 10px; margin: 0; background: #28688f; color: #f9f9f9; } #secondary-links li p { margin: 5px 10px; } #secondary-links .link-box .link-box { margin: 0 10px 10px; overflow: hidden; } #secondary-links .secondary-link-submit-a-brief { background: #28688f; color: #f9f9f9; } #secondary-links .secondary-link-submit-a-brief a { float: right; display: block; background: url(/static/gfx/submit.png) no-repeat left top; width: 107px; height: 31px; text-indent: -9999px; } #secondary-links .secondary-link-any-questions- { position: relative; } #secondary-links .secondary-link-any-questions- .body { overflow: visible; } #secondary-links .secondary-link-any-questions- a { float: right; display: block; background: url(/static/gfx/chat.png) no-repeat left top; width: 107px; height: 31px; text-indent: -9999px; } #secondary-links .secondary-link-any-questions- h3 { margin-bottom: 5px; padding-left: 140px; } #secondary-links .secondary-link-any-questions- p { padding-left: 140px; } #secondary-links .secondary-link-any-questions- img { position: absolute; left: 0; bottom: 0; display: block; } #secondary-links .side-link-productivity-tools p { float: left; width: 155px; } #secondary-links .dm-form-link { display: block; background: url(/static/gfx/datamate-small.png) no-repeat left top; width: 115px; height: 54px; text-indent: -9999px; margin: 5px 0 5px; } #secondary-links .sales-chains-link { display: block; background: url(/static/gfx/sales-chains-small.png) no-repeat left top; width: 107px; height: 96px; text-indent: -9999px; vertical-align: middle; margin: 5px 0; } #secondary-links2 { width: 320px; float: right; } #secondary-links2 h3, #secondary-links2 p { margin: 0 10px 10px; } #secondary-links2 li { margin: 0 0 20px; } #secondary-links2 li li { margin: 0; width: auto; } #secondary .datamate { margin: 0; float: right; width: 320px; } #secondary .datamate label { padding: 5px 5px 5px 0; } #secondary .datamate fieldset { margin: 0 10px; padding: 0; } #secondary .datamate legend { margin: 0; padding: 0 0 0; font-weight: bold; text-transform: uppercase; font-size: large; } #secondary .datamate li input { width: 130px; } #secondary .datamate .email-address input { width: 243px; } #secondary-links2 .secondary2-link-integration-options { overflow: hidden; } #secondary-links2 .secondary2-link-integration-options ul { list-style: none; margin: 0 -20% 0 0; padding: 0; overflow: hidden; width: 120%; } #secondary-links2 .secondary2-link-integration-options li { float: left; width: 131px; height: 100px; clear: none; line-height: 100px; padding: 4px; background: #fff; text-align: center; margin: 0 10px 10px 0; } #secondary-links2 .secondary2-link-integration-options img { max-height: 88px; max-width: 130px; vertical-align: middle; } #secondary #latest-news { float: left; width: 320px; margin: 0; } #secondary #latest-news h3 { margin: 0 10px 10px; } #secondary #latest-news li { margin: 0 10px 10px; } .sidebar #login { display: none; } #tertiary { padding: 20px 0; overflow: hidden; clear: both; } #tertiary .box { float: left; width: 320px; margin: 0; } #tertiary { display: none; } /* Boxes - specific section styling ------------------------------------------------------------------------------------*/ /* =box */ .home #primary .content { width: auto; } .home #home-info { width: 960px; margin: 0 auto; } .category .body { float: left; width: 480px; margin: 0; } .category .primary h1 { float: none; } .page .primary .datamate, .page .primary .body { float: left; width: 690px; margin: 0 0; } .category .primary .inner-content, .page .primary .inner-content { float: left; width: 100%; } /* custom body html stylings */ #products { background: #dde7ee; border-bottom: 1px dotted #e9e9e9; margin-bottom: 20px; position: relative; } #products .inner-box { position: relative; padding-bottom: 50px; width: 960px; margin: 0 auto; overflow: hidden; } #products .prod-wrap { width: 800%; overflow: hidden; position: relative; padding-top: 0; } #products .product { float: left; width: 960px; margin: 0 200px 0 0; /*background: url(/static/gfx/mac.png) no-repeat 640px 0;*/ min-height: 260px; } #products .product img { float: right; margin: 0 10px 0 40px; max-height: 280px; height: auto; display: inline; } #products h2 { width: 600px; float: left; margin: 0 0 20px 10px; font-size: 32px; text-transform: uppercase; line-height: 1; color: #28688f; font-weight: normal; text-shadow: 1px 0 1px #999; text-shadow: 1px 1px 1px #999; } #products .description { margin: 20px 0 20px 0; clear: left; font-size: 14px; line-height: 1.5; /* width: 600px;*/ } #products .description p { font-weight: bold; margin-bottom: 10px; line-height: 1.2; } #products .description ul { font-size: 12px; } #products .buttons { margin: 0 10px; } #products .buttons a { display: block; float: left; height: 42px; text-indent: -9999px; } #products .buttons .learn { width: 132px; margin-right: 10px; background: url(/static/gfx/LearnMore.png) no-repeat left 1px; } #products .buttons .quote { width: 180px; background: url(/static/gfx/get-quote-button.png) no-repeat left top; } #products .pn-nav { position: absolute; top: 0; height: 100%; width: 50px; background: url(/static/gfx/pn-bg.png) no-repeat; } #products .prev { left: 50%; margin-left: -530px; background-position: left top; } #products .next { right: 50%; margin-right: -530px; background-position: right top; } #products .pn-nav a { display: block; width: 40px; height: 40px; text-indent: -9999px; margin-top: 130px; outline: 0; opacity: 0.4; } #products .next a { background: url(/static/gfx/next-arrow2.png) no-repeat center; } #products .prev a { background: url(/static/gfx/prev-arrow2.png) no-repeat center; } #products .pn-nav a:hover { opacity: 1; } #products .nav { position: absolute; z-index: 10; bottom: 0; left: 50%; width: 960px; list-style: none; margin: 0 0 0 -480px; padding: 0 0 20px; overflow: hidden; } #products .nav li { width: 140px; float: left; margin: 0 10px; font-size: 16px; line-height: 30px; } #products .nav em { display: block; float: left; font-family: Georgia, serif; background: #28688f; width: 30px; text-align: center; color: #f9f9f9; margin-right: 5px; font-weight: normal; -moz-border-radius: 6px; -webkit-border-radius: 6px; } #products #p1-link em { background-color: #98bf0c; } #products #p2-link em { background-color: #e31d7a; } #products #p3-link em { background-color: #1a171b; } #products #p4-link em { background-color: #e2171a; } #products #p5-link em { background-color: #12235b; } #products #p6-link em { } #products .nav a { color: #28688f; text-decoration: none; display: block; border-right: 0 solid #f9f9f9; -moz-border-radius: 6px; -webkit-border-radius: 6px; background: #dde7ee; } #products .nav a:hover { text-decoration: underline; } #products .nav .active, #products .nav .active:hover { font-weight: bold; text-decoration: underline; } .latest-project { float: left; width: 320px; margin: 0; } .latest-project img { border: 1px solid #ccc; background: #fff; padding: 4px; width: 300px; height: auto; margin: 10px; display: block; } .about-us { float: left; width: 640px; margin: 0; } .about-us p, .about-us ul { font-size: 12px; } /* =table (tables that ARE NOT user submitted content via FCKin editor */ .nc { margin: 0; font-size: small; clear: both; } .nc td, .nc th { font-size: small; vertical-align: top; } .nc th { font-weight: bold; text-align: left; } .nc thead th { font-size: 1.1em; font-weight: bold; border-bottom: 1px solid #ccc; } .nc tfoot th, .nc tfoot td { font-weight: bold; } .nc tfoot td { } .nc tbody td { padding: 5px 20px 5px 0; } .tac { text-align: center; } .tar { text-align: right; } .tal { text-align: left; } .nc .odd { } .nc .even { } /* =basket =steps */ .steps { text-align: center; } .steps input, .steps span, .steps a { display: inline; margin: 0 8px; border: 0; padding: 0; } .steps input, .steps span, .steps a:link, .steps a:visited, .steps a:hover, .steps a:active { text-decoration: none; } .steps a, .steps span { } .steps input { cursor: pointer; } .steps input:hover, .steps a:hover { } .steps .current { } /* =basket */ #primary .basket fieldset { margin: 0; padding: 0; position: relative; } .basket .nc { margin: 0; } .basket #pd { width: 50%; } .basket #rm { width: 12%; } .basket td.pd p { margin: 2px 0; } #primary .basket td.img { width: 54px; padding: 3px; } .basket input.submit { margin: 0; } #primary .basket fieldset.submit { padding: 16px 0; } .basket fieldset.submit a, .basket fieldset.submit input { margin: 0 8px; } .basket table img { } .tac input { text-align: center; } .quantity { width: 2.8em; text-align: center; } #tt { } .tot { } /* =nav =back */ .back { clear: both; padding: 0; margin: 0 10px; line-height: 50px; font-size: small; text-align: left; font-weight: bold; border-top: 1px dotted #ccc; } /* =news */ .news .date { margin: 20px 10px 0; } .news .primary .strapline { clear: left; margin: 20px 10px; } #news { clear: left; width: 690px; float: left; font-size: small; } #news li { overflow: hidden; margin: 0 10px 20px; } #news .date, #news h2 { margin-top: 0; float: right; width: 560px; } #news img { float: left; margin-top: -14px; } #news .body, #news .strapline, #news .more { clear: right; margin-left: 110px; } #news .body { display: none; } .news #news .body { display: block; } /* =links =top */ #top-links { float: right; text-align: right; font-size: normal; margin: 20px 10px 0; } #top-links li { float: left; margin: 0; } #top-links a { display: block; color: #dde7ee; padding: 10px; } #top-links .location a, #top-links a:hover { background: none; color: #f9f9f9; } /* =links =tabs */ #tab-links { clear: both; } #tab-links li { display: inline; } #tab-links a { padding: 0; white-space: nowrap; } /* =nav =breadcrumbs */ #breadcrumbs { font-size: 10px; line-height: 20px; position: relative; top: -20px; margin: 0 10px; } /* =nav =subcats */ #sub-categories ul { overflow: hidden; width: 480px; } #sub-categories li { float: left; clear: right; width: 220px; background: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin: 0 10px 20px; padding: 0 0 0; } #sub-categories a { display: block; overflow: hidden; padding: 9px; background: #dde7ee; color: #1c5678; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #sub-categories a img { float: left; width: 60px; height: 60px; display: block; margin: 0 10px 0 0; font-size: small; color: #ccc; } #sub-categories h2 { margin: 0; padding: 0; } #sub-categories a:hover { background: #28688f; color: #f9f9f9; } /* =sidebar =nav */ .sidebar ul { } .sidebar li { font-size: small; clear: both; } .sidebar a { } #tertiary a { color: #dde7ee; } #tertiary a:hover { background: #1c5678; } /* =links */ .links .links-title { display: none; } #product .links .links-title { display: block; } /* =nav =site-map */ #site-map { clear: left; } #site-map ul ul { list-style: disc outside; } #site-map li { margin-left: 28px; font-size: 14px; } #site-map a { } #site-map li li { font-size: 12px; } #site-map li li a { } /* =gallery */ /* =meta */ /* =links =bottom */ #footer #bottom-links { } #footer #bottom-links li { } #footer #bottom-links a { } /* =nav =back-to-top */ /* =location - this class is applied to the containing

around any link that matches the current location */ .location a, .location .location a { font-weight: bold; } .location ul a { font-weight: normal; } /* =basket =mini */ .mini-basket { font-size: small; } .mini-basket li { list-style: none; margin-left: 0; } .mini-basket .checkout-link { } /* =sidebar =news */ #latest-news { font-size: small; } /* news box on home page, contains a list of the most recent 6 articles */ #latest-news .date, #latest-news h4 { margin: 0; float: right; width: 250px; } #latest-news li { overflow: hidden; } #latest-news p { clear: right; margin-left: 50px; } #latest-news img { } /* =form */ form { font-size: small; } legend { font-weight: bold; text-transform: uppercase; font-size: large; padding: 0; padding-left: 10px; } form h3 { font-weight: bold; font-size: large; } fieldset { padding-top: 10px; } fieldset p { margin-top: 0; } fieldset ol { margin: 0; padding: 0; } fieldset li { overflow: hidden; position: relative; padding: 2px 0; } form li label { float: left; width: 160px; padding: 4px 10px 4px 10px; font-weight: bold; } form li em, .req { color: #c00; } form li em { position: absolute; left: 165px; top: 1em; } form li input, form li select, form li textarea { margin-left: 0; vertical-align: bottom; } form li textarea { width: 23em; } #wrapper .currency input { width: 6em; margin-right: 4px; vertical-align: middle; } /* use #id overrides */ #wrapper .currency select { margin-left: 0; vertical-align: middle; } form .text input, form .Text input, form .number input, form .Number input, form .URL input, form .web-address input, form .Postcode input, form .postal-code input, form .Email input, form .email input, form .email-address input, form.email-address, form .readonly input, form .password input, form .select input, form .region input, textarea, select { border: 1px solid #ccc; padding: 5px; color: #7a7879; width: 18em; } select { width: 18.9em; } .date-and-time select { width: auto; } form .region .other-Enum { margin: 0 0 0 10px; } form .region .other-Enum input { vertical-align: middle; } form .region input { margin: 0; } form .readonly input { background: #ccc; } form li.checkbox input, form li.Checkbox input { margin-top: 8px; } /* capital letters because of the datamate form write out */ form .radio input { vertical-align: top; } form li.nolabel select { margin-left: 0; width: 70%; } .amount input, input.qty { width: 2.4em; } form li.checkbox input { vertical-align: middle; } option { padding: 0em 0.2em 0em 0.4em; } form .text input:focus, form .Text input:focus, form .number input:focus, form .Number input:focus, form .URL input:focus, form .web-address input:focus, form .Postcode input:focus, form .postal-code input:focus, form .Email input:focus, form .email input:focus, form .email-address input:focus, form .email-address input:focus, form .readonly input:focus, form .password input:focus, form .select input:focus, form .region input:focus, textarea:focus, select:focus { background: #ffe; } li.file fieldset { padding: 0; margin: 0; border: 0; } li.file fieldset legend { padding: 0; } li.file fieldset img { float: left; margin-right: 10px; } li.file fieldset label { width: auto; display: block; overflow: hidden; padding: 0; } li.file fieldset span.desc { float: left; width: 9em; padding: 0; } .primary fieldset.submit { padding: 10px 0 10px 180px; } fieldset.submit input, fieldset.submit a { vertical-align: middle; } form li.active { background: #dde7ee; } fieldset fieldset { padding: 0 0 0 170px; margin-bottom: 10px; } fieldset fieldset legend { text-transform: none; font-weight: bold; font-size: small; width: 160px; white-space: wrap; margin-left: -170px; } fieldset fieldset label { width: auto; float: none; display: block; padding: 0 10px; cursor: pointer; font-weight: normal; } .primary form { clear: left; } .primary .datamate { clear: left; padding: 0 0 0; margin: 20px 0; } .primary .body form { margin: 10px 0 20px; } .primary .body form ol { margin: 0; } .sidebar .datamate li { padding: 0; margin: 5px 0; } .sidebar .datamate .text { float: left; width: 50%; clear: none; } .sidebar .datamate .text input { margin: 0; } .sidebar .datamate .email-address label { width: auto; } .sidebar .datamate .email-address input { width: 82.5%; } input.submit { background: #28688f; border: 0 solid #f9f9f9; color: #f9f9f9; -moz-border-radius: 4px; padding: 4px; cursor: pointer; font-variant: small-caps; text-transform: lowercase; text-shadow: 0 1px 1px #666; } input.submit:hover, input.submit:active { background: #dde7ee; color: #28688f; } /* =product */ #product { position: relative; clear: none; } #product h1 { float: left; width: 550px; margin-right: -243px; min-height: 40px; } #product .info-wrap { float: left; width: 680px; margin: 0; clear: left; } #product .image { width: 60px; height: 60px; position: absolute; left: 620px; top: 0; } #product .image img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #product .small { display: none; } #product .favourites { margin-left: 4px; } #product .basket .submit { clear: left; } .product-variations { text-align: left; } #product .basket { clear: both; } #product .basket h3 { margin: 0; padding-left: 0; display: none; } #product .basket label { width: 100%; display: block; clear: both; overflow: visible; } #product .basket span.desc { display: block; width: 8em; float: left; } #product .basket label span.info-link { display: none; } #product .basket label span.info-link acronym { display: none; } #product .basket label span.info-link span { display: block; background: #ffc; border: 1px solid #ccc; padding: 6px; } #product .basket label input { width: 15em; text-align: left; } #product .basket label select { width: 15.4em; } #product .results { padding: 16px 4px; clear: both; } #product .results strong { color: #c00; } #upsell { clear: both; } #primary .body .section { overflow: hidden; border-top: 1px dotted #ccc; padding-top: 20px; margin: 0 10px; } #primary .body .section h2 { float: right; width: 400px; margin: 0 0 10px; } #primary .body .section p { clear: right; } #primary .body .section img { width: 240px; height: auto; float: left; margin: 0 20px 20px 0; display: block; clear: none; } #product-links, #sub-pages { margin: 0 10px; padding: 20px 0 0; margin-left: 710px; clear: right; width: 243px; background: #1A5677 url(/static/gfx/grad-box.png) no-repeat left top; } #sub-pages { padding: 10px 0 0; margin: 0 10px 20px -10px; float: right; } #sub-pages ul ul { display: none; } #product-links h3, #sub-pages h3 { margin: 0 20px; color: #f9f9f9; } #product-links ul, #sub-pages ul { padding: 10px 20px 20px; background: url(/static/gfx/grad-box-bottom.png) no-repeat left bottom; } #product-links li, #sub-pages li { margin: 0 0 0 20px; } #page-links li:first-child, #product-links li:first-child, #sub-pages li:first-child { border: 0; } #product-links a, #sub-pages a { color: #dde7ee; font-weight: bold; display: block; padding: 5px 0; line-height: 1.2; } #product-links a:hover, #sub-pages a:hover { background: none; color: #f9f9f9; text-decoration: none; } #page-links, #related { width: 203px; margin-left: 710px; padding: 20px; font-size: small; clear: right; } #related img { display: none; } #page-links li, #related li { margin: 10px 0 10px 10px; } #page-links img { max-width: 180px; height: auto; display: block; } #page-links .body { width: auto; } /* =addresses */ #addresses .address-list { } #addresses .address-list li { float: left; width: 100%; } #addresses .address-list .options { float: right; clear: right; width: 30%; height: 3.6em; } #addresses .address-list .options fieldset { } #addresses .address-list .options label { } #addresses .address-list .options input { } #addresses .address-list .options a { } #addresses .address-list .adr { font-size: small; text-align: left; float: left; width: 60%; } /* =orders */ #past-order-filter label { margin-right: 16px; } #past-order-filter .submit { vertical-align: middle; } /* =logos */ #logos { text-align: center; } /* =users */ #my-users form h3 { } #my-users form input.submit { padding: 0; width: auto; } /* =msg */ .msg { border: 1px solid #ccc; background-color: ivory; padding: 10px 10px 10px 26px; font-size: small; margin: 10px; } #primary p.msg { margin: 10px; } .msg h3 { margin: 10px; } .msg p { margin: 10px; } .info { background: ivory url(/templates/blank/lib/info.png) no-repeat 6px 0.44em; } .error { background: ivory url(/templates/blank/lib/error.png) no-repeat 6px 0.44em; } .success { background: ivory url(/templates/blank/lib/success.png) no-repeat 6px 0.44em; } .warning { background: ivory url(/templates/blank/lib/warning.png) no-repeat 6px 0.44em; } /* =top =search */ #top-search { clear: both; margin: 0; } #top-search form fieldset { text-align: center; margin: 0; padding: 0; } #top-search form input { vertical-align: bottom; } #top-search form select { vertical-align: baseline; } #top-search form input.submit { margin-left: 0; vertical-align: baseline; } /* =product-list */ .product-list .pagination { margin-top: 0; clear: both; padding: 5px 0; border: 1px solid #ccc; border-width: 1px 0; } .product-list { width: 480px; float: left; margin: 0 0 10px; } .advanced-search #search legend { display: none; } .advanced-search .product-list { width: 100%; } .product-list ol { list-style: none outside; clear: both; margin: 0; padding: 0; } .product-list ol li { float: left; width: 220px; clear: both; min-height: 160px; margin: 0 10px 20px; } .product-list ol li.even { float: right; clear: right; } .advanced-search .product-list ol li { clear: none; } .advanced-search .product-list ol li.one { clear: left; } .advanced-search .product-list ol li.even { float: left; clear: none; } .advanced-search .product-list ol li.four { float: right; clear: right; } .product-list ol h3, .product-list ol h2 { margin-top: 0; float: right; width: 150px; } .product-list ol h3 a, .product-list ol h2 a { font-weight: bold; } .product-list ol .pid { display: none; } .product-list ol li img { float: left; width: 60px; height: 60px; margin: 0 10px 10px 0; } #primary .product-list ol .body { clear: right; width: auto; margin: 0 0 0 70px; float: none; } .product-list ol .price-box { margin-left: 70px; } .product-list ol .options { overflow: hidden; } .product-list ol .options input { margin-right: 8px; } .product-list ol .small { float: left; margin: 0; padding: 0; } .product-list ol .more { display: none; } /* knowledge-base */ #kb { margin: 10px; } #kb td { padding-right: 20px; } #a-z-list { overflow: hidden; margin: 30px 0; } #a-z-list h3 { position: absolute; left: -9999px; top: -9999px; } #a-z-list ul { width: 33.3%; float: left; } #a-z-list a { color: #dde7ee; text-decoration: none; } #a-z-list a:hover { background: #28688f; text-decoration: none; } #footer h3 { color: #f9f9f9; font-size: medium; margin: 0 10px 10px; } #footer a { color: #dde7ee; } #footer a:hover { color: #f9f9f9; background: none; } #footer .site-map { overflow: hidden; padding: 20px 0; } #footer .nav-set { float: left; width: 240px; margin: 0; } #footer .nav-set ul { margin: 0 10px; } #footer #info { clear: both; text-align: right; overflow: hidden; margin: 0 10px -120px; height: 100px; padding-top: 20px; } #footer .copyright, #footer .nav { float: left; text-align: left; clear: left; } #footer .nav li { float: left; margin-right: 10px; } /* Basic element styles (low level stuff) ---------------------------------------------------------------------------------------*/ h1 { font-size: 2em; } .primary h1 { width: 550px; margin: 0 10px 20px; font-size: 32px; text-transform: uppercase; line-height: 1; color: #28688f; font-weight: normal; text-shadow: 1px 0 1px #999; text-shadow: 1px 1px 1px #999; float: left; } h2 { font-size: large; text-transform: uppercase; margin: 20px 0 10px; } h3 { font-size: large; font-weight: bold; color: #7a7879; text-transform: uppercase; margin: 0 0 10px; } #secondary h3 { padding-top: 5px; padding-bottom: 5px; } h4 { font-size: small; font-weight: bold; } div.date { font-size: x-small; color: #aaa; font-style: italic; } .pid { font-weight: normal; color: #aaa; font-size: small; } /* product id span */ .price-box { margin: 10px 0; } .price { font-weight: bold; } /* price display (not always a span) */ .sidebar .price { } .pagination { font-size: small; overflow: hidden; vertical-align: bottom; margin: 20px 10px; } .pagination p, .pagination .per-page { float: left; clear: left; width: 40%; } .pagination .next { float: right; margin-left: 20px; } .pagination .prev { float: right; } .pagination .next a, .pagination .prev a { display: block; width: 40px; height: 40px; text-indent: -9999px; outline: 0; opacity: 0.4; margin-top: -1.5em; } .pagination .next a { background: url(/static/gfx/next-arrow2.png) no-repeat center; } .pagination .prev a { background: url(/static/gfx/prev-arrow2.png) no-repeat center; } .pagination a:hover { opacity: 1; } dl { overflow: hidden; font-size: small; margin: 10px; } dl dt { float: left; width: 10em; clear: left; margin-top: 10px; font-weight: bold; border-top: 1px solid #ccc; padding-top: 5px; } dl dd { margin-left: 10em; margin-top: 10px; border-top: 1px dotted #ccc; padding-top: 5px; } .adr { font-size: small; } .logged-in-as { font-size: x-small; float: right; position: absolute; top: -999px; left: -999px; } .document { clear: left; float: left; margin: 20px 10px; width: 400px; display: none; } a { text-decoration: none; } a:link { color: #28688f; text-decoration: none; } a:visited { color: #1c5678; } a:hover { background: #dde7ee; color: #1c5678; } a:active { } p.line-shipping { color: #666; } caption { font-weight: bold; text-align: left; padding: 16px 4px 0; text-transform: uppercase; text-decoration: underline; } .add-costs-info { border: 1px solid #ccc; } .add-costs-info th { background: #eee; } a.calendar { display: none; } /* .body encompasses the output from FCK Editor, try to avoid styling the colors etc as it's meant to be WYSIWYG and customers complain otherwise. They'll complain anyway coz they put tables in and it can break the layout but there's only so much you can do. Refer everyone to the documentation for guidelines on using FCK Editor to the best effect. */ .body { overflow: hidden; font-size: small; } /* container for FCK Editor output */ p, .body ol, .body ul, .primary ul, .body blockquote, .body dl, .body table { margin: 0; } .primary .body h2, .primary .body h3 { margin: 0 10px 20px; } .primary .body p { margin: 0 10px 20px 10px; } .body ol { list-style: decimal outside; margin-left: 44px; margin-bottom: 20px; } .body ul { list-style: disc outside; margin-left: 24px; margin-bottom: 20px; } .body li { } li { vertical-align: middle; } /* aligns bullet points in IE */ .body img { } img.fl-l { float: left; clear: left; margin: 0 10px 0 0; } img.fl-r { float: right; clear: right; margin: 0 0 0 10px; } img.news-image { float: right; clear: right; margin: 0 0 0 16px; } #wrapper .body blockquote { margin: 0 20px; } .body blockquote p { font-family: Cambria, Georgia, serif; font-style: italic; font-size: medium; font-weight: normal; } .body table { margin: 10px; width: 670px; } .body .col table { width: 100%; margin-bottom: 40px; } .body th { font-weight: bold; font-size: medium; width: auto; padding-right: 20px; vertical-align: top; } .body thead { border-bottom: 2px solid #ccc; } .body tbody th { font-size: small; } .body tbody th, .body td { padding: 5px 0; border-top: 1px solid #eee; padding-right: 20px; } .body tbody tr:hover { background: #f3f3f3; } #zivc td { padding-left: 10px; } th#websites, th#ecommerce, th#ebusiness { width: 18%; text-align: center; } .product-selector table img { display: block; margin: 0 auto; } #comparisons thead .tac { font-size: small; } small { font-size: small; } big { font-size: normal; font-weight: bold; } strong { font-weight: bold; } em { font-style: italic; } .line { width: 100%; } .line .col p, .line .col h2, .line .col h3 { margin-right: 10px; margin-left: 10px; } .line img { max-width: 100%; height: auto; } .body iframe { border: 0; margin: 10px 0; } .contact .body iframe { height: 250px; width: 100%; } /* mop up after clearspring.com box */ #atffc { display: none; }