/* Ocean Fresh checkout and account styles */

legend{ display:none; }

.basketThawte{ display:block; margin:auto; }
.thawte{ display:block; margin:15px auto 35px auto; }

#checkAccount #basket{ width:686px; margin:0 auto; top:0; background:none; }
#checkAccount #basketArea{ width:686px; }
#checkAccount #basket table{ width:686px; background:url(../img/basket/tableWide_bg.jpg) center top no-repeat; }
#checkAccount #basket table td.totalPrice{ background:url(../img/basket/cellBgRight.gif) 0 0 no-repeat; }
#checkAccount #basket table tr.topRow td.totalPrice{ background-position:0 -3px; }
#checkAccount td.description p{ width:305px; }
#checkAccount #basket table.checkTotals{ width:686px; background:url(../img/checkAccount/tableTotal_bg.gif) 0 bottom no-repeat;}
#checkAccount #basket table.checkTotals th{ width:530px; font-size:11px; color:#024665; vertical-align:top; text-align:left; padding:10px 0 0 15px; }
#checkAccount #basket table.checkTotals td{ height:25px; padding:10px 5px 0 0; vertical-align:top; text-align:right; color:#024665; font-size:100%; background:none; }
#checkAccount #basket table.checkTotals td.amount{ width:69px; text-align:center; }
#checkAccount #basket table.checkTotals tr.totalRow td {padding-bottom:20px;}

#checkAccount{ width:700px; margin:auto; position:relative; padding-top:25px; }
#checkAccount h1{ position:relative; font-size:11px; color:#fff; height:36px; text-indent:10px; line-height:1.4; background:url(../img/checkAccount/h1.jpg) 0 0 no-repeat; }
#checkAccount p{ line-height:1.2; color:#424242; width:615px; }
#checkAccount .header{ display:block; margin:auto; }

/* checkout / account login */
#accountLogin { padding:11px 0 0 0; background:url(../img/checkAccount/accLogin_bg.gif) 0 0 repeat-x; }
#accountLogin .login{ float:left;display:inline; position:relative; width:335px; height:228px; background:url(../img/checkAccount/login_bg.jpg) 0 24px no-repeat; }
#accountLogin .existing{ margin:0 10px 0 10px; }

#accountLogin .login h2{ width:335px; height:24px; margin:0; background:url(../img/checkAccount/loginH2_bg.jpg) 0 0 no-repeat; }
#accountLogin .login h3{ width:260px; margin:12px 0 9px 23px; color:#024665; font-size:11px; background:none; left:0; }
#accountLogin .login h3 span.errLogin{ color:#d9442c; }
#accountLogin .login p{ margin:0 0 10px 23px; color:#024665; width:225px; line-height:1.2; }
#accountLogin .login ul{ margin:0 0 0 15px; list-style:none; font-size:11px; }
#accountLogin .login ul li{ height:15px; padding:0 0 8px 25px; line-height:2.2; background: url(../img/icons/tick.gif) no-repeat 8px 6px; color:#024665; font-weight:bold; }
#accountLogin .loginField {position:relative;}
#accountLogin .login fieldset{ position:absolute; top:105px; left:23px; font-size:11px; }
#accountLogin .login fieldset label{ display:block; margin:0 0 3px 1px; font-weight:bold; color:#024665; }
#accountLogin .login fieldset label span{ font-weight:normal; }
#accountLogin .login fieldset input{ clear:both; width:185px; padding:2px; margin-bottom:9px; font-size:11px; background-color:#fff; border:1px solid #7f9db9; }
#accountLogin .login fieldset a{ display:block; margin-top:-5px; line-height:1.2; color:#024665; font-size:10px; text-decoration:none; }
#accountLogin .login fieldset a:hover{ text-decoration: underline; }


#checkAccount #accountText{ margin:20px 0; clear:both; }
#checkAccount #accountText h2{ width:100%; margin-bottom:5px; font-size:11px; height:20px; color:#000; border-bottom:1px solid #828b95; background:none; text-indent:0; }
#accountText p{ margin-bottom:15px; width:100%; }
#accountText a{ text-decoration:underline; color:#48b2d6; font-weight:bold; }

/* account styles */
#checkAccount .accWelcome{ position:relative; width:700px; margin:0 auto; height:57px; background:url(../img/checkAccount/accWelcome.gif) 0 0 no-repeat; }
#checkAccount .accBilling{ background-image:url(../img/checkAccount/accBilling.gif); }
#checkAccount .accOrderHistory{ background-image:url(../img/checkAccount/accOrders.gif); }
#checkAccount .accWelcome li{ display:block; float:right;display:inline; margin:13px 10px 0 0; }
#checkAccount .accWelcome li.active a {background-position:0 -18px;}

#checkAccount p.login{ width:668px; font-size:11px; color:#000; position:relative; margin:0 auto 20px auto; }
#checkAccount p.login span{ position:absolute; top:0; right:5px; }
#checkAccount p.login a{ color:#000; text-decoration:none; }

/* order history - pending */
#checkAccount .oSFilter{ position:relative; float:left; width:315px; display:block; margin:15px 0; }
#checkAccount .osfRight{ float:right; }
#checkAccount .oSFilter label{ color:#4d2e38; font-size:11px; line-height:1.3; }
#checkAccount .oSFilter label.inputLabel{ margin-left:30px; font-weight: bold; }
#checkAccount .oSFilter input{ width:150px; color:#4d2e38; padding:0 2px; font-size:11px; }
#checkAccount .oSFilter select{ margin-right:10px; background-color:#fff; font-size:11px; width:40px; }

#checkAccount .orderTable table{ width:594x; margin:auto; color:#000; font-size:11px; background:url(../img/checkAccount/orderHistoryFilter_bg.gif) 0 0 no-repeat; }

#checkAccount .orderTable table th{ color:#fff; font-weight:bold; height:21px; text-align:center; }
#checkAccount .orderTable table th.date{ width:119px; text-align:left; text-indent:12px; }
#checkAccount .orderTable table th.orderNo{ width:118px; }
#checkAccount .orderTable table th.amount{ width:119px; }
#checkAccount .orderTable table th.status{ width:118px; }
#checkAccount .orderTable table th.editOrder{ width:120px; }

#checkAccount .orderTable table td{ height:31px; text-align:center; background:#f5f5f5 url(../img/basket/td_bg.gif) bottom left no-repeat; }
#checkAccount .orderTable table td.date{ background-position:-1px bottom; text-align:left; text-indent:12px; }
#checkAccount .orderTable table td.price{ color:#000; font-weight:bold;  }
#checkAccount .orderTable table td.status{ color:#000; text-align:left; text-indent:12px; }
#checkAccount .orderTable table td a.text{ color:#000; }
#checkAccount .orderTable table tr.lastRow td{ background-position:0 -1px; }
#checkAccount .orderTable table tr.lastRow td.date{ background-position:-1px -1px; }

/* Account Order Details */
#checkAccount #orderDetails h2{ clear:both; }
#checkAccount #orderDetails dl{ position:relative; width:220px; margin:20px 0 0 90px; float:left; color:#000; font-size:11px; }
#checkAccount #orderDetails dl.address{ float:right; margin:20px 75px 15px 0; }
#checkAccount #orderDetails dl dt{ clear:left; width:120px; float:left; font-weight:bold; text-align:left; padding:2px 0; }
#checkAccount #orderDetails dl dd{ float:left; text-align:left; width:90px; padding:2px 0; }
#checkAccount #orderDetails dl dd p{ line-height:1.2; font-size:100%; width:100%; }
#checkAccount #orderDetails table.orderDetails{ clear:left; margin:10px auto; width:594px; font-size:11px; color:#000; background:url(../img/checkAccount/orderHistoryDFilter_bg.gif) 0 0 no-repeat; }
#checkAccount #orderDetails table.orderDetails th{ color:#fff; font-weight:bold; height:21px; text-align:center; }
#checkAccount #orderDetails table.orderDetails th.qty{ width:39px; }
#checkAccount #orderDetails table.orderDetails th.description{ text-align:left; padding:0 0 0 21px; }
#checkAccount #orderDetails table.orderDetails th.status{ width:146px; }
#checkAccount #orderDetails table.orderDetails th.price{ width:73px; }
#checkAccount #orderDetails table.orderDetails td{ height:31px; text-align:center; background:#dde1e5 url(../img/basket/td_bg.gif) bottom left no-repeat; }
#checkAccount #orderDetails table.orderDetails td.qty{ background-position:-1px bottom; }
#checkAccount #orderDetails table.orderDetails td.item{ text-align:left; padding:0 0 0 21px; }
#checkAccount #orderDetails table.orderDetails tr.lastRow td{ background-position:0 -1px; }
#checkAccount #orderDetails table.orderDetails tr.lastRow td.qty{ background-position:-1px -1px; }


/* information message */
#checkAccount .information { position:relative; width:671px; height:80px; margin:0 auto 20px auto; background:url(../img/checkAccount/information_bg.jpg) no-repeat 0 0; }
#checkAccount .information.secure {width:670px; background:url(../img/checkAccount/information_bg.gif) no-repeat;}
#checkAccount .checkInfo{ background:url(../img/checkAccount/thanks.jpg) 0 0 no-repeat; }
#checkAccount .information td.left { height:88px; padding-left:175px; }
#checkAccount .information td.left p{ color:#000; width:390px; line-height:1.2; }
#checkAccount .checkInfo td p{ margin-left:65px; }
#checkAccount .information td.left p a, #checkAccount .information td.left .code{ font-weight: bold; color:#48b2d6; }

.checkAccError{ position:relative; width:668px; margin:0 auto 20px auto; height:46px; border:1px solid #e00000; background:url(../img/checkAccount/pageError_bg.jpg) 0 0 no-repeat; }
#checkAccount .checkAccError p{ color:#e00000; position:absolute; top:5px; left:75px; margin:0; padding:0; line-height:1.2; }

/* Checkout / Account Containers and form fields */

.checkAccountItem{ position:relative; width:678px; margin:0 auto; padding:0 0 20px 8px; background:url(../img/checkAccount/checkAccountItem_bg.gif) 0 bottom no-repeat; color:#464646; } 
.emailAddress{ padding:0 5px 25px 6px; }
.aiBottom{ width:668px; height:6px; margin:auto; }
#checkAccount h2{ position:relative; margin:0 auto; width:680px; margin-top:14px; height:39px; font-size:11px; background:url(../img/checkAccount/h2.jpg) 0 0 no-repeat; color:#fff; text-indent:10px; line-height:1.8; }
#checkAccount h3{ width:440px; position:relative; left:172px; margin-bottom:15px; font-size:11px; color:#424242; }
.checkAccountField{ clear:both; float:left; display:inline; position:relative; width:670px; padding:3px 0; margin:0 0 4px 0; color:#424242; font-size:11px; line-height:1.7; }
.checkAccountField label{ display:block; float:left; display:inline; font-size:11px; color:#024665; font-weight:bold; text-align:right; width:165px; padding:0; }
.checkAccountField label sup{ color:#e71005; }
.checkAccountField input, .checkAccountField select{ display:block; float:left; display:inline; width:200px; margin:0 0 0 15px; font-size:11px; border:1px solid #b2b6bc; padding:2px; color:#4f4f4f; background-color:#fff; }
.checkAccountField input.discountCode{ width:110px; padding:1px; background:#fff; font-size:11px; }
.checkAccountField label.discountCode{ width:70px; }
.checkAccountField a{ color:#424242; text-decoration:none; }
.checkAccountField a:hover{ text-decoration:underline; }
#checkAccount .checkAccountField p{ width:300px; clear:both; padding:0; font-size:10px; margin-left:180px; color:#6d6f72; }
#checkAccount .fraud{ width:615px; padding:10px 20px; height:65px; margin-left:8px; line-height:1.2; position:relative; top:10px; background:#f7f2f6; }
#checkAccount .fraud p{ margin-bottom:10px; color:#024665; width:100%; }
.accountRadio { padding:10px 0 20px 35px; }
.gender{ padding-left:0; }
.accountRadio label{ color:#464646; font-weight: bold; font-size:11px; text-align:left; margin:0 0 0 22px; padding-right:5px; }
.gender label{ margin-left:15px; }
.accountRadio input{ margin:0; padding:0; border:0; }

/* checkout styles */

/* discounts */
.discounts p{ color:#024665; }
#checkAccount .appliedDiscount{ clear:both; width:291px; height:34px; margin:35px 0 0 32px; background:url(../img/checkAccount/appDiscount_bg.gif) 0 0 no-repeat; }
#checkAccount .appliedDiscount p{ color:#fff; padding-left:35px; width:200px; line-height:3.2; }

input.postcode{width:75px;}
input.cardCode{width:40px; margin:0 5px 0 15px;}
select.cardDate{width:45px; margin:0 5px 0 15px;}
select.cardType{ width:110px; margin-right:5px; }

/****** CHECKOUT BOX OPTIONS ******/
.existingDelivery{ padding:10px 0 10px 35px; width:600px; }
.existingDelivery label{ font-weight:bold; font-size:11px; text-align:left; margin:0 0 5px 10px; }
.existingDelivery input{ margin:0; padding:0; border:0; }
.accountItem fieldset .existingDelivery address{ margin:2px 0 15px 26px; }
#checkAccount .existingOn{ color:#024665; font-weight:bold; }
#checkAccount .existingOn address, .existingOff address{ font-weight:normal; line-height:1.2; margin:5px 0 5px 27px; font-size:11px; font-style:normal; }
#checkAccount .existingOn p, .existingOff p{ font-weight:normal; width:80%; line-height:1.2; margin:5px 0 5px 27px; }
#checkAccount .existingOff{ color:#a1a1a1; font-weight: bold; }
#checkAccount .existingOff p{ color:#a1a1a1; }
#checkAccount .existingCardNumber p{ line-height:1.4; }
#checkAccount .existingCardNumber p strong{ padding-right:10px; }

/**** ERROR ROW ****/
.fieldError{ background:#f8dede; }
.fieldError input, .fieldError select{ border:1px solid #e71005; }
.fieldError label{ color:#ff0000; }
.errorMsg{ position:absolute; left:395px; top:5px; padding:0 0 0 20px; color:#e71005; background: url(../img/icons/checkAccountError.gif) 0 2px no-repeat; }
.login .errorMsg {position:absolute; left:90px; top:-1px; width: 140px; padding: 1px 0 2px 20px;}

.promoErrorMsg{ position:absolute; left:34px; top:60px; line-height:1.4; padding:0 0 0 20px; font-size:11px; color:#e71005; background: url(../img/icons/checkAccountError.gif) 0 2px no-repeat; }

#deliveryDetails{ clear:both; }
.deliveryOptions{ padding:15px 5px 30px 0; /*height:176px;*/ font-size:11px; }
.deliveryOption{ margin:0 0 5px 16px; }
.deliveryOptions input{ border:none; margin:0 10px 0 17px; width:13px; height: 13px;}
.deliveryOptions label{ font-weight: bold; color:#024665; }
.deliveryOptions fieldset{ width:290px; float:left; }
.deliveryOptions .costTable{ width:291px; margin:0 0 0 52px; float:left;display:inline; background:url(../img/checkAccount/delTable_bg.gif) 0 0 repeat-x; }
.deliveryOptions table{ width:291px; color:#fff; background:url(../img/checkAccount/delTable_btm.gif) 0 bottom no-repeat; }

.deliveryOptions table tr{ position:relative; }
.deliveryOptions table tr.mid th{ background:url(../img/checkAccount/delTable_th.gif) right 0 repeat-y; }
.deliveryOptions table tr.mid td{ background:url(../img/checkAccount/delTable_td.gif) left 0 repeat-y; }
.deliveryOptions table tr.mid td, .deliveryOptions table tr.mid th{ background-color:#9f6a8f; }
.deliveryOptions table th{ text-align:right; padding-right:12px; font-weight:normal; }
.deliveryOptions table td{ width:85px; padding-left:11px; font-weight:bold; text-align:left; }
.deliveryOptions table tr{ height:25px; }
.deliveryOptions table tr.btm{ height:26px; }

.deliveryOptions .deliveryInstructions{ margin:16px 0 0 52px; }
.deliveryOptions .deliveryInstructions label{ font-weight:normal; color:#024665; }
.deliveryOptions textarea{ display:block; width:200px; border:1px solid #b2b6bc; height:60px; margin-top:4px; }
.deliveryOptions .deliveryContinue{ width:95%; clear:both; font-size:11px; text-align:right; }

.accCreditCards{ float:left; text-align:center; padding:5px 0 0 0; }
.checkoutButtons{ position:relative; width:668px; height:43px; margin:auto; }
.checkoutButtons.bottom{ margin-top:20px; }
#checkAccount .introTxt{ width:290px; margin:0 0 10px 34px; line-height:1.2; }
.accIntroTxt{ width:675px; margin:18px 0 10px 15px; line-height:1.2; }
.copyDetails{ line-height:1.2; padding:20px 0 0 24px; }
.copyDetails a{ font-weight: bold; color:#464646; text-decoration:underline; }
.accNotRquired{ width:580px; margin:13px 0 10px 24px; line-height:1.2; color:#e00000; }
#checkAccount .accNotRquired{ color:#e00000; }


/* Confirm */
.confirmDelAdd{ float:left; display:inline; width:260px; margin:20px 0 10px 30px; }
.confirmDelAdd address, .confirmBillCard address{ font-size:11px; font-style:normal; }
#checkAccount .confirmDelAdd p, #checkAccount .confirmDelAdd address{ color:#5b5b5b; line-height:1.4; }
.confirmDelAdd p strong{ display:block; margin:0 0 5px 0; }

.confirmDelOption{ width:270px; }
#checkAccount .confirmDelOption p{ width:260px; }
.confirmDelOption p strong{ width:100px; }

.confirmBillCard{ float:left; display:inline; width:280px; margin:20px 0 0 31px; }
#checkAccount .confirmBillCard p, #checkAccount .confirmBillCard address{ display:block; float:left; display:inline; height:16px; line-height:1.6; color:#5b5b5b; padding:2px 0; width:260px; }
.confirmBillCard p strong{ display:block; float:left; display:inline; width:105px; height:16px; line-height:1.6; padding-right:10px; }

p.confirmTxt{ font-size:11px; border:none; margin-top:10px; color:#ac0000; font-weight:bold; text-align:right; margin-right:24px; }
p.confirmTxt a{ color:#ac0000; }

.agreeTerms{ text-align:right; color:#383838; font-weight:bold; font-size:11px; margin:10px 13px 0 0; }
.agreeTerms input{ border:none; background:none; }
.agreeTerms a{ color:#383838; text-decoration:underline; }

/* Complete */
#checkAccount .createAccount{ width:628px; position:relative; background: url(../img/checkAccount/createAccount.jpg) no-repeat 0 0; padding:20px 0 30px 35px; }
#checkAccount .createAccount h3{ position:relative; left:118px; line-height:1.2; color:#024665; }
#checkAccount .createAccount p{ position:relative; left:118px; font-size:11px;color:#024665; margin:0 0 12px 0; width:380px; }
.createAccount ul{ position:relative; left:118px; list-style:none; width:380px; margin:0; padding:0; }
.createAccount ul li{ background:url(../img/icons/bulletDarkBlue.gif) no-repeat left center; color:#024665; padding:3px 0 3px 14px; font-size:11px; }

.createAccount fieldset label{ float:left; display:inline; width:115px; padding:1px 0 0 0px; text-align:right; font-weight:bold; font-size:11px; }
.createAccount fieldset input{ float:left; display:inline; margin:0 0 0 10px; width:200px; border:1px solid #b2b6bc; padding:2px; font-size:11px; }

/* existing user - update account*/
.createAccount fieldset .accountChanges{ margin-left:118px; width:350px; clear:both; height:22px; }
.createAccount fieldset .accountChanges input{ float:left; display:inline; margin:0px 0 0 10px; width:15px;border:0px; }
.createAccount fieldset .accountChanges label{ float:left; display:inline; width:180px; padding:1px 0 0 15px; color:#024665; text-align:left; line-height:1.2; font-weight:normal; background: url(../img/icons/bulletDarkBlue.gif) no-repeat left center; }
.createAccount fieldset .accountChanges label strong{ color:#48b2d6; }

/* new user - create account*/
.checkoutCreateAccount{ margin:20px 0 0 -35px; }
#checkAccount .checkoutCreateAccount h3{ left:153px; }
.checkoutCreateAccount fieldset{ position:relative; top:0; left:0; display:block; margin:0; }
.checkoutCreateAccount fieldset label{ padding-left:45px; }
.checkoutCreateAccount fieldset .notifyMe{ float:left; clear:both; margin:0 0 5px 45px; width:500px; line-height:1; padding-top:0;  }
.checkoutCreateAccount fieldset .notifyMe label{ float:left; display:inline; width:300px;padding:1px 0 0 5px; color:#024665; line-height:1.1; text-align:left; font-weight:normal; }
.checkoutCreateAccount fieldset .notifyMe input{ float:left; display:inline; margin:0 0 0 125px; width:14px; border:0; }
.checkoutCreateAccount fieldset .notifyMe input.checkbox{ background:none; border:none; height:13px; width:13px; }

/* new user - account created */
.createdAccount{ height:230px; text-align:center; }
.createdAccount img{ position:relative; top:75px; }
#checkAccount .createdAccount p{ position:absolute; top:135px; left:140px; text-align:center;  width:100%; left:0; font-weight:bold; color:#024665; }
