﻿/* == Override Base Elements
------------------------------------------------------------------------------------------------------------------------ */
.templateStore h1{zoom: 1;border: solid 1px #ccc;padding: 0 10px;background: #f6f6f6;}
.templateStore h2{position: relative;zoom: 1;border: solid 1px #e4e4e4; border-width: 1px 0;padding: 0 10px;background: #f6f6f6;}

/* == Mini Basket
------------------------------------------------------------------------------------------------------------------------ */
#miniBasket{background: #eee; border: solid 1px #bbb;padding: 3px 3px;float: right;margin-left: 10px;}
#miniBasket .item{float: left;padding: 3px 3px 0 0;}
#miniBasket .price{font-weight: bold;float: left;padding: 3px 3px 0 0;}
#miniBasket a.btn{background: #D30202; color: #fff;}

/* == View Account Link
------------------------------------------------------------------------------------------------------------------------ */
.viewAccount{float: right;}

/* == Store Breadcrumb 
------------------------------------------------------------------------------------------------------------------------ */
ul.crumbList{margin: 10px 0; list-style: none; list-style-image: none;font-size: 90%;}
ul.crumbList li{display: inline;}

/* == Banner Zone Markers
------------------------------------------------------------------------------------------------------------------------ */
.bannerZone{background: #eee;text-align: center; text-transform: uppercase;color: #ccc; font-size: 500%;letter-spacing: -3px;}

/* == Default Product Listing Styles
------------------------------------------------------------------------------------------------------------------------ */
.prodList{margin: 10px 0 0 0; list-style: none;zoom: 1;}
.prodList:after{content: ".";clear: both;display: block;height: 0;visibility: hidden;}
.prodList li{float: left;width: 48%;padding-right: 2%;margin: 0 0 10px 0;}
.prodList li .prodImage{float: left;}
.prodList li .prodImage img{border: solid 1px #aaa; padding: 2px;}
.prodList li .prodText{padding-left: 214px;}
.prodList li .prodText h3{margin: 0;line-height: 1.2em;}
.prodList li .prodText .prodPrice{font-size: 140%;font-weight: bold;color: #666;}
.prodList li .prodText p{margin: 5px 0;font-size: 90%;}
.prodList li .prodText .prodStock{margin-bottom: 10px;}
.prodList li .prodText .btnMoreInfo{margin: 5px 0;}

/** set up holders for a product list that's in a slider **/
.prodSlider{border: 0; border-width: 0; background: none;padding: 0px 25px 0px 35px;position: relative;zoom: 1;}
.prodSlider .sliderPrev{position: absolute;top: 40px; left: 5px;}
.prodSlider .sliderNext{position: absolute; top: 40px; right: 5px;}

/** override above prod list styles for product slider panel **/
.prodSlider .prodSliderInner ul li{width: 33%;padding: 0;margin: 0;}
.prodSlider .prodSliderInner ul li .prodText{padding-left: 91px;}
.prodSlider .prodSliderInner ul li .prodText h3{font-size: 100%;font-weight: bold;}

.catProductList .clr{height: 1px; line-height: 1px;}

/* == Product Detail/View Page
------------------------------------------------------------------------------------------------------------------------ */
.prodView{zoom: 1;}
.prodView:after{content: ".";clear: both;display: block;height: 0;visibility: hidden;}

/** Product View Images **/
.prodView .prodImages{float: left; width: 330px;}
.prodView .prodImages .main{float: left;position: relative;}
.prodView .prodImages .main img{border: solid 1px #aaa; padding: 2px;}
.prodView .prodImages .thumbs{float: right;margin: 0; list-style: none; list-style-image: none;}
.prodView .prodImages .thumbs li{margin: 0 0 5px 0;}
.prodView .prodImages .thumbs li a img{border: solid 1px #aaa;padding: 1px;}

/** Product View Text **/
.prodView .prodText{padding-left: 350px;}
.prodView .prodText h3{margin-top: 0;font-weight: bold;color: #222;}
.prodView .prodText .prodDesc{padding-bottom: 10px;}
.prodView .prodText .prodTextMoreInfo{margin: 0;padding-top: 10px;}
.prodView .prodText .prodStock{margin: 0 0 10px 0;}
.prodView .prodText .prodStock .prodStockPreviousPrice{text-decoration: line-through;}
.prodView .prodText .prodStock .prodStockPrice{font-weight: bold;font-size: 150%;}
.prodView .prodText .prodStock .prodStockAvailability{font-size: 95%;}
.prodTrackLists .label{font-weight: bold; margin: 0;}
.prodTrackLists .discHold ul{margin: 10px 0; list-style: none; list-style-image: none;}

/** Product View Text Banner Column **/
.prodView .prodText .prodTextBannerCol{float: right; width: 250px;margin-left: 10px;}
.prodView .prodText .prodTextBannerCol .bannerZone{margin-bottom: 10px;}
.prodView .prodText .prodTextAlt{border: solid 1px #e4e4e4;background: #f6f6f6;margin-bottom: 10px;}
.prodView .prodText .prodTextAlt .inner{padding: 5px;border: solid 1px #fff;}
.prodView .prodText .prodTextAlt .prodTextAltTitle{margin: 0;border: solid 1px #fff;border-bottom: solid 1px #e4e4e4;}

/** Product View Text Tools **/
.prodView .prodText .prodTextTools{border-top: dotted 2px #ccc;padding: 10px 0 0 0; margin: 10px 0 0 0;clear: right;zoom: 1;font-size: 95%;}
.prodView .prodText .prodTextTools ul{margin: 0; list-style: none; list-style-image: none;}
.prodView .prodText .prodTextTools ul li{margin: 0; display: inline;}

/* == Store Category Listings
------------------------------------------------------------------------------------------------------------------------ */
.catList{margin: 0; list-style: none; list-style-image: none;}
.catList .catViewMore{position: absolute; top: 5px; right: 10px;font-size: 60%;}

/* == Store Category View Page
------------------------------------------------------------------------------------------------------------------------ */
.catView .catText .catTextTitle{margin-bottom: 0;}
.catView .catText .catSummary{background: #f9f9f9;margin-top: 0;padding: 10px;border: solid 1px #e4e4e4;border-top: solid 1px #fff;}
.catView .prodView{margin-bottom: 10px;border-bottom: solid 1px #ccc;padding-bottom: 10px;}
.catView .prodImages{}
.catView .prodText{padding-left: 270px;}

/* == Product Added To Basket Popup
------------------------------------------------------------------------------------------------------------------------ */
.prodStockFlyout{background: #eee; border: solid 1px #ccc; border-right-color: #111; border-bottom-color: #111; position:absolute; width:180px;z-index: 10;}
.prodStockFlyout div{border: solid 1px #fff;padding: 5px;zoom: 1;}
.prodStockFlyout div.success{background: url(/_img/success.gif) no-repeat top left;padding-left: 50px;}
.prodStockFlyout div.failure{background: url(/_img/warning.gif) no-repeat top left;padding-left: 50px;}
.prodStockFlyout h3{font-weight: bold; font-size: 100%;color: #111;}
.prodStockFlyout p{font-size: 95%;line-height: 1.2em; border-bottom: dotted 2px #ccc; margin: 0 0 5px 0; padding: 0 0 5px 0;}

/* == Ticket View
------------------------------------------------------------------------------------------------------------------------ */
.ticketView{margin-bottom: 10px;}
.ticketView:after{content: ".";clear: both;display: block;height: 0;visibility: hidden;}
.ticketView h3.ticketName{float: left;font-size: 200%;margin-right: 20px;margin-top: 0;}
.ticketView h4 .date{display: block;}
.ticketView .info{border-bottom: solid 1px #ccc; padding-bottom: 10px;}
.ticketView .ticketDesc{padding-top: 1px;}
.ticketView .ticketOptions{float: left; border:solid 1px #ccc; width: 230px;margin-right: 10px;padding: 0 10px 10px 10px;margin-bottom: 10px;}
.ticketView .ticketOptions .prodStockPricing{font-size: 140%;font-weight: bold;}
.ticketView .ticketOptions .ticketInfo{border-top: solid 1px #ccc;margin-top: 10px;}
.ticketView .ticketImages{float: right; width: 250px; margin-left: 10px;}
.ticketView .ticketComments{clear: left;border-top: solid 1px #ccc; margin-top: 10px;}

/* == Checkout Process
------------------------------------------------------------------------------------------------------------------------ */
/** Global Checkout styles **/
.coBasketWrap, .tableWrap{border: solid 1px #ddd; background: #f6f6f6;padding: 0 8px;zoom: 1;}
.coBasketWrap .prodThumb, .tableWrap .prodThumb{float: left; margin: 2px 5px 2px 2px;}
.coIntroText{font-weight: bold;}
.coCheckout .addSelLbl{width: 90%;margin-bottom: 10px;}
.coCheckout .addressSelect{width: 465px;}

/** Progress bar indicator **/
.coCheckout .progressList{zoom: 1; margin: 20px 0 20px 0; list-style-type: none; list-style-image: none;}
.coCheckout .progressList:after{content: ".";clear: both;display: block;height: 0;visibility: hidden;}
.coCheckout .progressList li{float: left;margin: 0 10px 0 0;background: url(/_img/progress-bar-off.gif) top center no-repeat;margin-right: 10px; padding: 20px 40px 0 40px;color: #999;}
.coCheckout .progressList li.on{color: #000; font-weight: bold;background-image: url(/_img/progress-bar-on.gif);}

/** Proceed/Continue Shopping Buttons **/
.coProceed{height: 1%;margin: 10px 0;border-top: dotted 2px #ccc;border-bottom: dotted 2px #ccc;padding: 10px 0;}
.coProceed:after{content: ".";clear: both;display: block;height: 0;visibility: hidden;}
.coProceed .btnContinue{float: left;}
.coProceed .btnProceed{float: right;}
.coProceed .btnProceed .btn{background: green;}
.coProceed .btnBack{float: left;}
.coProceed .btnLogOut{float: right;background: #fe0000;}
.coPaypalBtn{text-align: right;}

/** Basket Screen **/
.coBasket .coBasketTotal{border: solid 1px #ccc; border-width: 1px 0;padding: 8px 15px;text-align: right;margin: 10px 0;background: #eee; font-weight: bold;}
.coBasket .coBasketTotal .value{color: #000;}
.coBasket .coBasketShipping{text-align: right;}
.coBasket .coBasketShipping a{background: url(/_img/store-icon-shipping.gif) center left no-repeat; padding-left: 22px;}

/** Checkout Form Holders **/
.coCheckout .coFormPanel{zoom: 1;}
.coCheckout .coFormPanel:after{content: ".";clear: both;display: block;height: 0;visibility: hidden;}
.coCheckout .coFormPanel .input{width: 300px;}
.coCheckout .coFormPanel .coSplitOne{float: left; width: 48%;}
.coCheckout .coFormPanel .coSplitTwo{float: right; width: 48%;}
.coCheckout .coFormPanel .coContinueBtn{text-align: right;padding-right: 40px;}

/** Checkout Log In Screen **/
.coCheckout .coLogIn .small{font-size: 90%;float: right;margin-right: 40px;}
.coCheckout .coLogIn .coSplitTwo .btn{float: right;margin-right: 40px;}

/** Checkout Your Details Screen **/
.coCheckout .coCheckoutDetails .coBilling .coSplitOne .btn{float: left;margin-right: 3px;}
.coCheckout .coCheckoutDetails .coBilling .coSplitTwo .btn{float: right;margin: 10px 0 7px 0;}
.coCheckout .coCheckoutDetails .coBilling .delAddressChoice{clear: right;text-align: right;}

/** Checkout Order Summary Screen **/
.coCheckout .coCheckoutSummary .coDeliveryOptions h3{margin-top: 0;}
.coCheckout .coCheckoutSummary .coDeliveryOptions .coSplitOne label{float: none;}
.coCheckout .coCheckoutSummary .coPromos p{float: left;padding-right: 5px;margin: 0;}
.coCheckout .coCheckoutSummary .coOrderTotal .inner{border: solid 1px #ccc; border-width: 1px 0;background: #eee;zoom: 1;padding: 8px 0;}
.coCheckout .coCheckoutSummary .coOrderTotal .inner:after{content: ".";clear: both;display: block;height: 0;visibility: hidden;}
.coCheckout .coCheckoutSummary .coOrderTotal .inner label{text-align: right; width: 48%;margin-right: 2%;}

/** Checkout Payment Screen **/
.coCheckout .coCheckoutPayment .coOrderTotal .inner{border: solid 1px #ccc; border-width: 1px 0;background: #eee;zoom: 1;padding: 8px 0;}
.coCheckout .coCheckoutPayment .coOrderTotal .inner:after{content: ".";clear: both;display: block;height: 0;visibility: hidden;}
.coCheckout .coCheckoutPayment .coOrderTotal .inner label{text-align: right; width: 48%;margin-right: 2%;}

/** Checkout Security Message **/
.coSecurity{font-size: 95%;}

/** Checkout Confirmation Message **/
.coCheckout .coCheckoutConfirmation .coStoreDetails h2{margin-bottom: 0;}
.coCheckout .coCheckoutConfirmation .coStoreDetails .inner{border-bottom: solid 1px #e4e4e4;background: #f9f9f9;padding: 10px;}
.coCheckout .coCheckoutConfirmation .coStoreDetails .inner p{margin: 0 0 10px 0;}
.coCheckout .coCheckoutConfirmation .coStoreVIP h2{margin-bottom: 0;}
.coCheckout .coCheckoutConfirmation .coStoreVIP .inner{border-bottom: solid 1px #e4e4e4;background: #f9f9f9;padding: 10px;}
.coCheckout .coCheckoutConfirmation .coStoreVIP .inner p{margin: 0 0 10px 0;}
.coCheckout .coCheckoutConfirmation .coProceed .btnContinue{float: right;}
.coCheckout .coCheckoutConfirmation .coOrderSummary .coOrderTotal{border: solid 1px #ccc; border-width: 1px 0;background: #eee;zoom: 1;padding: 8px 0;}
.coCheckout .coCheckoutConfirmation .coOrderSummary .coOrderTotal:after{content: ".";clear: both;display: block;height: 0;visibility: hidden;}
.coCheckout .coCheckoutConfirmation .coOrderSummary .coOrderTotal label{text-align: right; width: 48%;margin-right: 2%;}

/** Checkout Terms **/
.coCheckout .coTerms{text-align: right;}

/* == My Account Process
------------------------------------------------------------------------------------------------------------------------ */

/** Account Global Styles **/
.coAccount .introText{font-weight: bold;}
.coAccount .coAccountArea ul{border: solid 1px #ccc; border-width: 1px 0;background: #eee;margin: 0;list-style: none;text-align: center;}
.coAccount .addSelLbl{width: 90%;margin-bottom: 10px;}
.coAccount .addressSelect{width: 465px;}

/** Account Form Panels **/
.coAccount .coFormPanel{zoom: 1;}
.coAccount .coFormPanel:after{content: ".";clear: both;display: block;height: 0;visibility: hidden;}
.coAccount .coFormPanel .input{width: 300px;}
.coAccount .coFormPanel .coSplitOne{float: left; width: 48%;}
.coAccount .coFormPanel .coSplitTwo{float: right; width: 48%;}

/** Account Update Details Page **/
.coAccount .coBilling .coSplitTwo .btn{float: right;}

/** Account Update Addresses Page **/
.coAccount .coNewAddress .coSplitTwo .btn{float: right;}

/** Account Order History Page **/
.coAccount .coOrderSummary .orderRef{color: #000;}

/* == Popup Checkout and Account Forms
------------------------------------------------------------------------------------------------------------------------ */
#popup .input{width: 300px;}
#popup label{width: 220px;}
#popup .btn{margin-bottom: 10px;}
