/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Store ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ div.bannerStore { background: url(../images/banners/banner_store.jpg) no-repeat; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Payment Types ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #orderPaymentTypes { margin-top: 6px; } #orderPaymentTypes img { margin-left:6px; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Purchase Navigation ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #purchaseNav { position:relative; height:55px; width:100%;} #purchaseBack { position:relative; float:left; margin-top:12px; } #purchaseBack input { float:left; } #purchaseBack p { display:inline; position:absolute; padding-top: 5px; margin-left: 12px; font-family:arial black; font-size:10pt; color:white; } #purchaseNext { position:relative; float:right; width: 260px; } #purchaseNext input { float:right; } #purchaseNext p { display:inline; position:absolute; width:204px; font-family:arial black; font-size:10pt; color:white; padding-top: 12px; text-align:right; } #processing { position: absolute; left: 400px; top:50px; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Purchase Structure ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #purchaseOuter { position: relative; width: 574px; min-height:620px; border:1px dotted gray;} #purchaseSteps { position: relative; top: 18px; padding-bottom: 32px; height: 30px; width: 528px;} #purchaseTitle { position: relative; margin-top: 12px; width:528px; color:white; font-family:verdana } #purchaseBody { position: relative; left: 23px; margin-top: 6px; margin-bottom: 6px; width:528px; } #purchaseTotal { position: relative; left: 440px; height:58px; width: 112px;} #purchaseSteps p { display:inline; font-family: arial black; font-size:8pt; color:white; } p.opacityFull { opacity: 1.0; } p.opacityFaded { opacity: 0.2; } #step1 { position: absolute; top:5px; left:17px; width:108px; text-align:center; } #step2 { position: absolute; top:5px; left:145px; width:108px; text-align:center; } #step3 { position: absolute; top:5px; left:275px; width:108px; text-align:center; } #step4 { position: absolute; top:5px; left:405px; width:108px; text-align:center; } #formBuy { position: relative; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Table Structure ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ div.bundleTable { display: block; position: relative; } div.bundleTable table { display:inline; border-collapse:collapse; width:100%; table-layout:fixed; } div.bundleTable td.name { width:302px; } div.bundleTable td.bundle { width:100px; text-align:right;} div.bundleTable td.currency { width:14px; text-align:right;} div.bundleTable td.price { width:54px; text-align:right;} div.bundleTable td.checkbox { width:104px; text-align:right; } #orderTotalTable { position:relative; margin-top: 20px; padding-top:6px; padding-bottom:6px; width:100%; border-top:1px dotted white; border-bottom:1px dotted white;} #orderTotalTable table { display:inline; border-collapse:collapse; width:100%; table-layout:fixed; text-align:right; } #orderTotalTable tr { height:20px; } #orderTotalTable td.totalTip { width:329px; } #orderTotalTable td.totalName { width:96px; } #orderTotalTable td.totalCurrency { width:19px; } #orderTotalTable td.totalValue { width:60px; } #vatCurrencyInfo { position:relative; margin-top:4px; margin-left:329px; padding-bottom:6px; border-bottom:1px dotted white; text-align:right; } div#formBuy label { color:white; } div#formBuy input,img { } div.productEntry{ display:inline; } div.bundleEntry{ display:block; font-weight:bold; } div.singleEntry{ display:block; font-size: 8pt; } div.bundleDivider{ margin-top:9px; margin-bottom: 9px; border-top:1px dotted gray; } div.bundleComplete{ display:inline; position:absolute; padding-top: 3px; left:334px; font-family:verdana; font-size:7pt; color:yellow; } div.price { display:inline; position:absolute; left: 440px; height: 15px; width:60px; color:white; padding-right:8px; } div.checkbox { display:inline; position:absolute; left: 510px; height: 8px; width:18px; padding-top:1px; line-height:5px; } #formBuy p { display:inline; font-family: verdana; font-size:9pt; color:white; } p.purchase { display:inline; font-family: verdana; font-size:9pt; color:white; } div.square { float:left; margin-top:5px; width: 8px; height: 8px; margin-right: 6px; } div.squares { float:left; margin-top:3px; width: 8px; height: 8px; margin-right: 6px; } div.colour0 { background:orange; } div.colour1 { background:pink; } div.colour2 { background:yellow; } div.colour3 { background:blue; } div.colour4 { background:green; } div.clear{ clear:both; } #total { display:block; position: relative; top:24px; left: 400px; width: 150px; margin-bottom:12px;} #totalDynamic { display:inline; position: relative; } #purchaseNextOrder { position:relative; float:right; margin-top: 8px; width: 260px; } #purchaseNextOrder input { float:right; } #purchaseNextOrder p { display:inline; float:right; font-family:arial black; font-size:10pt; color:white; padding-top: 12px; margin-right: 9px; text-align:right; } /* purchase_order.jsp via checkout */ div.checkoutProduct { display:block; } div.checkoutPrice { display:inline; position: absolute; left: 250px; } div.checkoutRemove { display:inline; position: absolute; left: 200px; } #checkoutTotal { position: relative; left: 360px; top:24px; } div.checkboxHidden { display:none; } /* purchase_personal_form.jsp */ #purchaseLeftCol { position:relative; float:left; width:280px; } #purchaseRightCol { position:absolute; float:right; left: 270px; width:274px; height: 480px; background:url(../images/background_proceed.png); } #purchaseForm { display:inline; position:relative; } #purchaseForm label { display:block; font-family: verdana; font-size:9pt; color:yellow; margin-bottom:2px; } #purchaseForm input { display:block; padding-bottom:2px; } #postcodeCountry { position:relative; min-width:215px; margin-bottom:6px; } #purchasePostcode { position:relative; float:left; min-width:94px; } #purchaseCountry { display:inline; position: relative; margin-left:4px; } /* purchase_payment_form.jsp */ #cardsButtonWrap { position:relative; display:block; } #cardsButtonWrap img { position:relative; top:1px; left:1px;} .cardHighlight { float:left; height:18px; width:33px; margin-right:3px; } span.fieldInfo { color:white; font-family:helvetica; font-size:7pt; } /* a.card:hover { display:block; padding:3px; background:green; } */ #cardsButtonWrap a { display:block; } #cardsButtonWrap a:hover { background:red; } #paymentDateWrap { display:inline; position: relative; margin-bottom:18px; } div.paymentDateText { display:inline; position:relative; font-family:helvetica; font-size:8pt; margin-right:6px; color:white; } #paymentDateWrap p { display:inline; position:relative; font-family:helvetica; font-size:8pt; margin-right:6px; color:white; } #paymentDateWrap input { display:inline; float:left; margin-right:8px;} #paymentDateWrap select.month { width: 60px; } #paymentDateWrap select.year { width: 80px; } #purchaseLeftCol h1 { font-family:helvetica; font-size:10pt; margin-top:16px; margin-bottom:8px; } #orderTable { border-top: 1px dotted cyan; border-bottom: 1px dotted cyan; margin-bottom:12px; width:340px;} #orderTable table { font:8pt helvetica; color:white; border-collapse:collapse; width:300px; margin-top:8px; margin-bottom:8px; table-layout:fixed;} #orderTable tr { line-height: 1.5; } #orderTable tr td.product { width:270px; } #orderTable tr td.symbol { width:10px; text-align:right; } #orderTable tr td.price { width:44px; text-align:center; } #checkoutTable { border-top: 1px dotted white; border-bottom: 1px dotted white; margin-bottom:4px; width:420px;} #checkoutTable table { font:9pt helvetica; color:white; border-collapse:collapse; width:300px; margin-top:8px; margin-bottom:4px; table-layout:fixed;} #checkoutTable tr { line-height: 1.5; } #checkoutTable tr td.product { width:270px; } #checkoutTable tr td.symbol { width:10px; text-align:right; } #checkoutTable tr td.price { width:50px; text-align:right; } #checkoutTable tr td.remove { width:75px; text-align:center; } #orderTotal {position:relative; left: 228px;} #orderTotal table { table-layout:fixed; font:8pt helvetica; color:white; border-collapse:collapse; width:100px; margin-top:8px; margin-bottom:8px;} #orderTotal td.name { color:yellow; width:33px; text-align:left; } #orderTotal td.symbol { width:10px; text-align:right} #orderTotal td.value { text-align:right; width:40px;} #checkoutTotal {position:relative; left: 265px;} #checkoutTotal table { table-layout:fixed; font:9pt helvetica; color:white; border-collapse:collapse; width:140px; margin-bottom:8px; } #checkoutTotal td.totalTip { width:20px; text-align:left; } #checkoutTotal td.name { color:yellow; width:55px; text-align:left;} #checkoutTotal td.symbol { width:15px; text-align:right;} #checkoutTotal td.value { text-align:right; width:50px; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CurrencyVatWarning ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #currencyVatWarning { padding:8px; border-top:1px solid red; border-bottom:1px solid red; } div.currencyVatChange { margin-left: 10px; margin-top:8px; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Order Tooltips ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ div.orderTip { max-width:600px;}