body { padding: 0; border: 0; margin: 0; background: #fff url('background-gradient.jpg') repeat-x; font: 13px/1.4 'Droid Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", Verdana, sans-serif; font-weight: 400; color: #555; } .squares-background { width: 100%; background: url('squares-bg.png') repeat-x; } a { color: #008dd0; text-decoration: none; } a:hover { text-decoration: underline; } a img { border: 0; } strong { font-weight: normal; font-family: 'Droid Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", Verdana, sans-serif; font-weight: 700; } .blue { color: #008dd0; } h1 { font: 24px/1.2 'Droid Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", Verdana, sans-serif; padding: 0; margin: 0; font-weight: 700; } h1.subheading { font: 18px/1.2 'Droid Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", Verdana, sans-serif; padding: 0.5em 0; } h2 { font: 16px/1.5 'Droid Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", Verdana, sans-serif; padding: 0; margin: 0; font-weight: 700; } p { margin: 0; padding: 0; padding-bottom: 0.5em; } .centered { width: 900px; margin: 0 auto; } /* --- header and navigation --- */ .top-grey-bar { width: 100%; background: #555; height: 25px; } .top-grey-bar ul { padding: 0; margin: 0; list-style: none; } .top-grey-bar ul li { float: right; line-height: 25px; color: #fff; } .top-grey-bar ul li a { color: #fff; padding: 0 20px 0 0; float: right; display: block; } .top-grey-bar ul li.flag a { padding: 2px 4px 0 4px; height: 20px; } .top-grey-bar ul li.float-left { float: left; } .top-grey-bar ul li.float-left a { } .header-area { height: 89px; } .logo { float: left; height: 89px; } .shipping-rosette { float: left; height: 89px; margin-left: 30px; } .header-right { float: right; height: 89px; } .navigation-bar { height: 33px; background: url('nav-bar-bg.png'); margin-bottom: 20px; } .navigation-bar-right { height: 33px; background: url('nav-bar-right.png') right no-repeat; padding-right: 6px; } .navigation-bar ul { height: 33px; padding: 0; margin: 0; list-style: none; background: url('nav-bar-left.png') left no-repeat; padding-left: 15px; } .navigation-bar ul li { display: inline; } .navigation-bar ul li.show-on-mobile { display: none; } .navigation-bar ul li a { display: block; float: left; padding: 0 25px 0 35px; color: #fff; line-height: 33px; font-size: 14px; } .navigation-bar ul li a.nav-home { background: url('nav-home-icon.png') left no-repeat; } .navigation-bar ul li a.nav-account { background: url('nav-account-icon.png') left no-repeat; } .navigation-bar ul li a.nav-software { background: url('nav-software-icon.png') left no-repeat; } .navigation-bar ul li a.nav-free-sample { background: url('nav-samples-icon.png') left no-repeat; padding-left: 25px; } .navigation-bar ul li a.nav-about-us { background: url('nav-about-us-icon.png') left no-repeat; padding-left: 25px; } .navigation-bar ul li.nav-cart a { float: right; } .navigation-bar ul li a.cart-summary { background: url('nav-cart-icon.png') left no-repeat; } .navigation-bar ul li a.checkout { background: url('nav-checkout-icon.png') left no-repeat; padding-left: 40px; } /* ---- footer ---- */ .footer { width: 100%; clear: both; background: #555; color: #fff; padding-top: 25px; padding-bottom: 25px; } .footer a { color: #fff; } .footer h2 { padding-bottom: 15px; } .footer ul { padding: 0; margin: 0; list-style: none; } .footer ul li { line-height: 1.5em; } .footer-left { float: left; width: 450px; } .footer-right { float: right; width: 450px; text-align: right; } .payment-options{ padding-bottom: 25px; } .footer-copyright{ clear: both; padding-top: 25px; } /* ---- home white box ---- */ .home-white-box { background: #f0fbff; padding: 30px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; margin-bottom: 25px; } .paper-link { float: left; margin: 0 50px 15px; width: 260px; height: 364px; } .paper-1 { margin-left: 110px; } .paper-link a { padding: 124px 20px 0 10px; width: 230px; height: 240px; text-align: center; display: block; color: #555; } .paper-link a:hover { text-decoration: none; } .paper-1 a { background: url('paper-home-IL1-sprite.png') top no-repeat; } .paper-2 a { background: url('paper-home-IL2-sprite.png') top no-repeat; } .paper-3 a { background: url('paper-home-IL2P-sprite.png') top no-repeat; } .paper-1 a:hover { background: url('paper-home-IL1-sprite.png') bottom no-repeat; } .paper-2 a:hover { background: url('paper-home-IL2-sprite.png') bottom no-repeat; } .paper-3 a:hover { background: url('paper-home-IL2P-sprite.png') bottom no-repeat; } .paper-link a h1 { font: 16px/1.2 'Droid Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", Verdana, sans-serif; padding-bottom: 0; font-weight: 700; color: #008dd0; } .paper-link h2 { font: 15px/1.5 'Droid Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", Verdana, sans-serif; font-weight: 700; padding-bottom: 10px; } .order-now-button { width: 173px; height: 31px; background: url('order-now-sprite.png') 0 0 no-repeat; margin: 0 auto; } .paper-link a:hover .order-now-button { background: url('order-now-sprite.png') 0 -31px no-repeat; } h1.site-intro { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; font-size: 14px; border: solid 1px #008dd0; margin: 25px 4px 0 0; padding: 15px 15px 15px 600px; background: #fff url('home-illustration.png') left no-repeat; clear: both; } .software-list-box { background: url('software-box-bg.png') repeat-y; clear: both; } .software-box-header { height: 38px; background: url('blue-bar-bg.png') repeat-x; } .software-box-header-contents { height: 38px; background: url('blue-bar-right.png') right no-repeat; } .software-box-header h1 { line-height: 38px; background: url('blue-bar-left.png') left no-repeat; padding: 0; text-align: center; color: white; font-size: 16px; } .software-box-footer { height: 38px; background: url('green-bar-bg.png') repeat-x; clear: both; } .software-box-footer-contents { height: 38px; background: url('green-bar-right.png') right no-repeat; } .software-box-footer h1 { line-height: 38px; background: url('green-bar-left.png') left no-repeat; padding: 0; text-align: center; color: white; font-size: 16px; } .software-box-footer h1 a { color: white; } ul.software-list { padding: 0; margin: 0; list-style: none; padding: 0; } ul.software-list li { float: left; width: 120px; height: 100px; margin: 10px 9px; text-align: center; } a.software-image { display: block; height: 80px; width: 119px; } a.software-text { display: block; height: 20px; width: 119px; } /* --- home page bottom --- */ .promo-box { width: 435px; height: 164px; float: left; margin-bottom: 25px; } .promo-box h1 { padding: 20px 15px 10px 60px; font-size: 16px; } .promo-box ul { padding: 0 0 10px 60px; margin: 0; list-style: none; font-size: 14px; } .promo-box ul li a { color: #fff; } .promo-action-button { padding-left: 60px; } .free-sample { background: #008dd0 url('free-software-icon.png') top left no-repeat; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; margin-right: 25px; } .free-sample h1, .free-sample li { color: #fff; } .software-centre { background: #5ebf33 url('software-icon-white.png') top left no-repeat; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } .software-centre h1, .software-centre li { color: #fff; } .osop { margin-right: 25px; } .module { background: #fff url('software-icon-green.png') top left no-repeat; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: solid 1px #5ebf33; width: 433px; height: 162px; } .module ul { padding-bottom: 3px; } .module h1, .module li, .module h1 a { color: #5ebf33; } .faqs { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background: #008dd0; margin-right: 25px; } .faqs h1, .faqs a { color: #fff; } .faqs ul { padding: 10px; } .faqs a { background: url('faq-bullet.png') left no-repeat; padding: 8px 0 8px 40px; display: block; } .delivery { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background: #008dd0 url(delivery-icon.png) no-repeat; } .delivery h1, .delivery li { color: #fff; } .delivery li { padding-bottom: 0.5em; } .home-box-single { width: 180px; height: 210px; padding: 10px 20px; float: left; } .home-box-double { width: 400px; height: 210px; padding: 10px 20px;  float: right; } .home-box-single h1, .home-box-double h1 { font-size: 16px; color: #008dd0; } /* --- single products --- */ .single-product-left { width: 590px; float: left; } .single-product-right { width: 200px; float: right; background: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 15px; } .single-product-right h2 { color: #008dd0; } .single-product-right p { padding-bottom: 25px; } .single-product-right ul { margin: 0; padding: 0 0 25px; list-style: none; } .single-product-right ul li a { display: block; padding: 0 0 3px 18px; } h1.page-title { color: #008dd0; padding-bottom: 0.5em; } .page-heading-text { padding-bottom: 15px; } .product-image { float: left; width: 260px; } .product-price-actions { float: right; width: 310px; } .price-heading { font-size: 16px; font-family: 'Droid Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", Verdana, sans-serif; color: #008dd0; padding-bottom: 5px; font-weight: 700; } .price-heading span { font-size: 13px; color: #555; font-family: 'Droid Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", Verdana, sans-serif; } table.price-grid { width: 250px; border-collapse: collapse; } table.price-grid td { background: #fff; border-bottom: solid 1px #f0fbff; padding: 3px; } table.price-grid td.price { color: #008dd0; font-family: 'Droid Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", Verdana, sans-serif; text-align: right; font-weight: 700; } table.price-grid2 { width: 100%; border-collapse: collapse; } table.price-grid2 td { background: #fff; border-bottom: solid 1px #f0fbff; padding: 3px; } table.price-grid2 td.price { color: #008dd0; font-family: 'Droid Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", Verdana, sans-serif; text-align: right; font-weight: 700; } .action-box { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: solid 1px #ddd; background: white; margin-top: 15px; } .quantity-label { color: #008dd0; font-family: 'Droid Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", Verdana, sans-serif; float: left; font-weight: 700; padding: 15px 5px 0 10px; } .quantity-field { float: left; padding: 10px 5px; } .quantity-field input { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: solid 1px #008dd0; background: white; font-family: 'Droid Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", Verdana, sans-serif; font-size: 16px; text-align: right; width: 40px; } .cart-button { float: right; padding: 10px 5px 0; } p.action-info { text-align: center; clear: both; color: #e90404; } a.blue-product-info { display: block; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin-top: 15px; background: #008dd0 url('go-arrow-white.png') right no-repeat; color: white; padding: 10px 50px 10px 15px; } a.blue-product-info:hover { text-decoration: none; background: #23adee url('go-arrow-white.png') right no-repeat } .tab-area { clear: both; position: relative; padding-top: 25px; } ul.tabs { padding: 0; margin: 0; list-style: none; height: 30px; } ul.tabs li { display: inline;	 } ul.tabs li a { display: block; margin-right: 3px; color: #fff; float: left; line-height: 29px; border: solid 1px #008dd0; padding: 0 10px; background: #008dd0; border-bottom: 0; -moz-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-top-right-radius: 5px; border-top-right-radius: 5px; } ul.tabs li a.selected { line-height: 30px; background: #fff; color: #008dd0; border-bottom: solid 1px #fff; } ul.tabs li a:hover { background: #fff; color: #008dd0; text-decoration: none; } .tab-contents-here { border: solid 1px #008dd0; padding: 15px; -moz-border-radius: 10px; border-radius: 10px; -moz-border-top-left-radius: 0px; border-top-left-radius: 0px; background: white; } .tabcontent{ display:none; } @media print { .tabcontent { display:block !important; } } /* --- software centre --- */ .software-centre-container { background: #f0fbff; border: solid 1px #5ebf33; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } h1.software-centre-heading { padding: 0; text-align: center; color: white; font-size: 16px; background: url('software-centre-heading.gif') repeat-x; line-height: 33px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .software-centre-heading-right { float: right; width: 350px; margin: 20px; } .software-centre-login { padding: 15px; background: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: solid 1px #5ebf33; margin-bottom: 15px; } .software-centre-product { width: 373px; height: 280px; position: relative; margin: 0 0 15px 15px; float: left; background: white; border: solid 1px #5ebf33; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 10px; } .full-width { clear: both; float: none; width: auto; height: auto; margin: 0 15px 15px; } .software-centre-image { width: 120px; float: left; margin-right: 10px; padding-bottom: 10px; } .full-width .software-centre-image { float: right; margin-left: 10px; } .software-centre-image img { border: solid 1px #ddd; } .software-centre-product h1 { float: left; color: #5ebf33; width: 200px; font-size: 16px; padding-bottom: 10px; } .software-center-buttons { position: absolute; left: 10px; bottom: 10px; } .full-width h1 { width: auto; float: none; } .software-centre-text { clear: both; } .full-width .software-centre-text { clear: none; } .full-width .software-center-buttons { position: relative; left: 0px; bottom: 0px; padding-top: 10px; } /* --- My Account --- */ .my-account-area { background: #fff; padding: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; margin: 10px 0 15px; } .buttons-right { float: right; } .buttons-left { float: left; margin-right: 10px; }