/** * @package templateSystem * @copyright Copyright 2003-2005 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0 * @version $Id: stylesheet_new.css 3286 2006-03-28 01:14:04Z drbyte $ */ #mainWrapper{text-align:left;vertical-align:top;width:960px;background-color:#fff;margin:8px auto 0 auto;padding-bottom:10px}#bottomShadow{height:16px;margin:0 auto 0 auto;width:960px;background-color:transparent;background-image:url(../images/bottom_shadow.gif);background-repeat:no-repeat;background-attachment:scroll;background-position:0 0;overflow-x:hidden;overflow-y:hidden;float:left}.smallProductImage img{margin-right:6px}a:visited{color:#0092c2;text-decoration:none;font-weight:normal}CODE{font-family:arial,verdana,helvetica,sans-serif;font-size:1em}#tellafriendContent input{vertical-align:middle}#logo,.centerBoxContents,.specialsListBoxContents,.categoryListBoxContents,.centerBoxContentsAlsoPurch,.attribImg{float:left}LABEL.inputLabelPayment{width:15em;float:left}LABEL.selectLabel,LABEL.switchedLabel,LABEL.uploadsLabel{width:12em;float:left}ADDRESS{font-style:normal}.clearBoth{clear:both}#mainWrapper{text-align:left;vertical-align:top}#contentMainWrapper{margin:0}#headerpic{margin:0 auto 0 auto;padding:0;width:960px}#headerpic img{display:block}#logotop{position:relative;height:80px;width:960px;margin:0 auto 0 auto;padding:0}#logotop img{border:0;margin-top:8px}#headerWrapper{width:100%}#headerWrapper img{border:0}#navColumnOneWrapper,#navColumnTwoWrapper{margin:auto}#sendSpendWrapper{border:1px solid #cacaca;float:right;margin:0 0 1em 1em}#navMainWrapper{position:absolute;color:#fff;top:2px;right:0}#navMainWrapper a:link,#navMainWrapper a:visited{color:#00aee7;text-decoration:none}#navMainWrapper a:hover{color:#acacac}#headerContent #logoimg{border:0;position:relative;top:25px;left:30px}#nameWrapper{padding:25px 0 10px 30px}#nameWrapper a,#nameWrapper a:visited{font-size:25px;text-decoration:none;color:#fff;font-weight:normal}#taglineWrapper{font-size: 1.5em;;padding:10px 0 10px 60px;margin-top:-30px;color:#fff}#navCurrenciesWrapper .nav_language{float:left;margin-top:8px;padding:0 15px 3px 0}#navCurrenciesWrapper .nav_currencies{float:left;margin-top:8px;padding:0 15px;border-left:1px solid #d2d2d2}#navCurrenciesWrapper form{margin:0;padding:0}#navCurrenciesWrapper select,#navCurrenciesWrapper input{margin:0;padding:0}#navEZPagesTop{text-align:left;padding-top:0;padding-left:0;padding-bottom:0;color:#515151}#navEZPagesTop a:link,#navEZPagesTop a:visited{display:block;color:#fff;font-family:Helvetica,Arial,sans-serif;font-size: 0.95em;;text-decoration:none;padding:12px 25px 11px 25px;white-space:nowrap;background-image:url(../images/menu_a_bg.gif);background-repeat:no-repeat;background-position:right center;line-height:16px}#navEZPagesTop ul{margin:0;list-style:none;padding-left:0}#navEZPagesTop ul li{float:left;padding:0}#navEZPagesTop a:hover{color:#00aee7;background-color:#353535}#topmenubarinner{height:41px;width:960px;margin:0 auto 0 auto}#indexDefaultMainContent{padding-left:0}#indexDefaultMainContent p{margin:0;padding-bottom:10px}#navMainSearch{position:absolute;margin:0 5px 0 0;top:32px;right:0}#navMainSearch input{font-size:10px}#footerhsy a:link,#footerhsy a:visited{color:#a5a5a5;text-decoration:none}#footerhsy a:hover{color:#00aee7}#footerhsy{background-color:#1d1d1d;color:#767676;width:100%;padding-bottom:0;float:left}#footerhsyInner{position:relative;width:960px;margin:0 auto 0 auto}.imgtop{position:absolute;top:-2px;right:16px}#footerline{height:2px;margin-top:5px;background-color:transparent;background-image:url(../images/footerborder.gif);background-repeat:repeat-x;background-attachment:scroll;background-position:0 0;overflow-x:hidden;overflow-y:hidden;float:left}#navMain{padding-right:3px}#navMain ul,#navCatTabs ul{margin:0;padding:2px 0;list-style-type:none;text-align:center;line-height:18px}#navSupp ul{margin:0;padding:2px 0;list-style-type:none;text-align:center;line-height:18px}#navMain ul li,#navSupp ul li,#navCatTabs ul li{display:inline}#navSupp ul li a,#navCatTabs ul li a{text-decoration:none;padding:0 9px 0 5px;margin:0;white-space:nowrap}#navMain ul li a{text-decoration:none;padding:0 0 0 8px;margin:0;white-space:nowrap}#navEZPagesTOCWrapper{font-weight:bold;float:right;height:1%;border:1px solid #dfdfdf}#navEZPagesTOC ul{margin:0;padding:.5em 0;list-style-type:none;line-height:1.5em}#navEZPagesTOC ul li{white-space:nowrap}#navEZPagesTOC ul li a{padding:0 .5em;margin:0}#contentColumnMain,#navColumnOne,#navColumnTwo,.centerBoxContents,.specialsListBoxContents,.categoryListBoxContents,.additionalImages,.centerBoxContentsSpecials,.centerBoxContentsAlsoPurch,.centerBoxContentsFeatured,.centerBoxContentsNew,.alert{vertical-align:top}#gvFaqDefaultMainContent{padding-left:10px}#productGeneral{margin:10px}#cartInstructionsDisplay{margin-left:10px}.gvBal{float:right}#bannerFour,#bannerFive,#bannerSix{padding:.8em}#bannerOne{padding:7px .8em .1em 10px}#bannerTwo,#bannerThree{padding:0;margin:8px 0 0 0;clear:both;background-color:#f5f5f5}#bannerTwo img,#bannerThree img{display:block;vertical-align:bottom}#siteinfoLegal,#siteinfoCredits,#siteinfoStatus,#siteinfoIP{font-size:.9em;padding-bottom:8px}#scUpdateQuantity{width:2em}.cartQuantity{width:4.7em}#cartAttribsList{margin-left:1em}#cartBoxListWrapper ul,#ezPageBoxList ul{list-style-type:none}.totalBox{width:5.5em;text-align:right;padding:.2em}#productMainImage a:link{text-decoration:none}#productAdditionalImages a:link{text-decoration:none}.centerBoxContents{padding:0 5px 5px 5px}h3.itemTitle a:link,h3.itemTitle a:visited{text-decoration:none}h3.itemTitle a:hover{text-decoration:underline}#navColumnOne,#navColumnTwo{background-color:#fff}h2.greeting{margin-top:13px}#navColumnOneWrapper{margin-left:7px;margin-right:1px;margin-top:0;color:#4b4b4b}#navColumnTwoWrapper{margin-left:1px;margin-right:9px;margin-top:0;color:#4b4b4b}#navCatTabsWrapper{background-color:#ededed}#navCatTabs{background-color:#ededed;width:960px;margin:0 auto 0 auto}#navCatTabs a.category-top:link,#navCatTabs a.category-top:visited{color:#0092c2}#navCatTabs a.category-top:hover{color:#c41200}#ezpagesContent a:link,#ezpagesContent a:visited{background-image:url(../images/point.gif);background-repeat:no-repeat;background-position:center left}h3 label{font-size:1.0}#navColumnOneWrapper h3.leftBoxHeading a:link,#navColumnOneWrapper h3.leftBoxHeading a:visited{color:#fff;font-size: 0.9em;font-weight:bold;padding-left:2px;line-height:16px}#navColumnTwoWrapper h3.rightBoxHeading a:link,#navColumnTwoWrapper h3.rightBoxHeading a:visited{color:#fff;font-size: 0.9em;font-weight:bold;padding-left:2px;line-height:16px}#navColumnOneWrapper h3.leftBoxHeading a:hover,#navColumnTwoWrapper h3.rightBoxHeading a:hover{color:#c41200}#search input{font-size:11px}.listingProductImage{padding:0;margin:8px}#productDetailsList,#productDetailsList li{list-style-type:none;margin-left:0;padding-left:0}#authorLink{text-align:center;font-size:.9em}.navNextPrevWrapper{margin-bottom:15px}#upProductsHeading{text-align:left}#upDateHeading{text-align:right}.back1{float:right}.bold{font-weight:bold}.rowOdd{background-color:#fdfdfd;height:1.5em;vertical-align:top}#myAccountGen li,#myAccountNotify li{margin:0}.accountQuantityDisplay{width:10%;vertical-align:top}#siteMapList{width:90%;float:right}.ratingRow{margin:1em 0 1.5em 0}LABEL#textAreaReviews{font-weight:normal;margin:1em 0}#popupShippingEstimator,#popupSearchHelp,#popupAdditionalImage,#popupImage,#popupCVVHelp,#popupCouponHelp,#popupAtrribsQuantityPricesHelp{background-color:#f5f5f5;background-image:none}.hiddenField{display:none}.visibleField{display:inline}#infoShoppingCart{background-image:none;background-color:#f5f5f5}a:link.productListing-heading{text-decoration:none}.cartBoxCheckout a:link,.cartBoxCheckout a:visited{margin:0;padding:0}.searchinput{background:url("../images/sinputbg.gif") no-repeat left top;height:21px;padding:2px 3px 0 5px;float:left;margin-right:0}.header-search{position:absolute;margin:0;top:7px;right:0}.header-search input{border:0;margin:0;color:#a6a6a6;background:0}.header-search form{float:left}.header-search input:focus{background:0}#cart_top{position:absolute;height:32px;right:2px;top:43px;background:url(../images/cart_bg.gif) 0 0 no-repeat;padding:0 0 0 40px;text-align:right;color:#9a9a9a}#cart_top a:link,#cart_top a:visited{color:#00aee7;text-decoration:none}#cart_top a:hover{color:#acacac}#indexCategoriesMainContent{margin-top:8px}#indexDefaultMainContent{margin-top:8px}/* ASRM - Category cards */ .asrm-cat-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; padding-left:0; } .asrm-cat-grid > li { list-style:none; } .subcategory_list.asrm-cat-grid{ float:none !important; width:100%; background:transparent; margin:0; padding:0; } #subproduct_name{ margin:0; } .categoryListBoxContents { list-style:none; } .asrm-cat-card { display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; background:#f8f9fb; text-decoration:none; color:#222; box-shadow:0 2px 8px rgba(0,0,0,.06); transition:transform .15s ease, box-shadow .15s ease; text-align:center; } .subcategory_list #subproduct_name a.asrm-cat-card{ background:#f8f9fb !important; color:#222 !important; border:none !important; border-radius:12px !important; padding:12px 14px !important; display:flex !important; flex-direction:column; align-items:center; gap:10px; text-align:center; } .asrm-cat-card:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.12); color:#0b7fad; } .asrm-cat-image img { width:46vw; max-width:48vw; height:46vw; max-height:48vw; object-fit:cover; border-radius:10px; background:#fff; padding:8px; } .asrm-cat-title { font-weight:600; font-size:14px; line-height:1.2; } .asrm-cat-badge { margin-left:auto; background:#0b7fad; color:#fff; border-radius:10px; padding:2px 8px; font-size:12px; font-weight:700; } @media (min-width:576px){ .asrm-cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px } } @media (min-width:768px){ .asrm-cat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } .asrm-cat-card{padding:14px 16px} .asrm-cat-title{font-size:15px} } @media (min-width:992px){ .asrm-cat-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } .asrm-cat-card{padding:16px 18px} .asrm-cat-image img{ width:180px; height:180px; max-width:180px; max-height:180px; object-fit:cover; margin-inline:auto } .asrm-cat-title{font-size:16px} } /** * @author Perfectus Inc. * @author website www.perfectusinc.com * @copyright Copyright 2015-2016 Perfectus Inc. * CSS Document */ html { } body { font-family: 'Telex', Arial, Helvetica; color:#404040; font-size:85%; margin:0; line-height: 1.322; } TEXTAREA { display: block; width: 100%; } ul { list-style:none; } input[type="text"],input[type="password"],input[type="email"],input[type="url"],textarea,select{ border:1px solid #c2c2c2; color:#404040; line-height:20px; margin:1px 0 3px; min-height:20px; padding:4px 5px 3px; font-size: 0.95em; transition:all .3s ease-in 0; -moz-transition:all .3s ease-in 0; -webkit-transition:all .3s ease-in 0; -o-transition:all .3s ease-in 0; -ms-transition:all .3s ease-in 0 } input[type="text"]:hover,input[type="password"]:hover,input[type="email"]:hover,input[type="url"]:hover,textarea:hover,select:hover { border:1px solid #a9a9a9; transition:all .3s ease-in 0; -moz-transition:all .3s ease-in 0; -webkit-transition:all .3s ease-in 0; -o-transition:all .3s ease-in 0; -ms-transition:all .3s ease-in 0; } textarea { overflow:auto } .button,input[type="submit"],input[type="reset"],input[type="button"],.readmore,button, .forward.productpage_links #reviewsWriteProductPageLink a { color:#FFFFFF; cursor:pointer; display:inline-block; font-size: 14px; padding:7px 10px; line-height: normal; border-bottom:3px solid rgba(0,0,0,0.2); border-top:none; border-right:none; border-left:none; text-decoration:none; width:auto !important; transition: all 0.3s ease-in 0s; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; -ms-transition: all 0.3s ease-in 0s; background:none repeat scroll 0 0 #404040; } .forward.productpage_links #reviewsWriteProductPageLink input[type="submit"] { padding: 0; background:none; border-bottom:medium none; } .forward.productpage_links #reviewsWriteProductPageLink a { padding: 7px 10px; display:inline-block; border-bottom:3px solid rgba(0,0,0,0.2); line-height: normal; font-size: 14px; } .forward.productpage_links #reviewsWriteProductPageLink a > input[type="submit"] { font-size: 14px; } img { max-width:100%; } a, a:hover { outline: none; font-weight:normal; transition: all 0.3s ease-in-out 0s !important; -moz-transition: all 0.3s ease-in-out 0s !important; -webkit-transition: all 0.3s ease-in-out 0s !important; -o-transition: all 0.3s ease-in-out 0s !important; -ms-transition: all 0.3s ease-in-out 0s !important; } a:active, a:visited { outline:none; } #right-column{ vertical-align:top; } #left-column, #right-column { text-shadow:none; } #left-column h3 label, #right-column h3 label{ margin-bottom:0px; } .centerBoxWrapper { margin-bottom: 10px; } #right-column .select[multiple], select[size] { height: auto !important; } #content-wrapper table td{ border-bottom:none; } #centercontent-wrapper { position: relative; float:left; } .single-column { right: 0; width:100%; } a:hover, a:active { outline: 0 none; } .centerBoxWrapper, .tabTable { padding: 0px; height: 1%; /*do not remove- IEhack*/ /*line-height:1.4;*/ } .leftBoxContainer, .rightBoxContainer{ width:100% !important; margin-bottom: 30px; float:left; } #left-column div:last-child, #right-column div:last-child { margin-bottom: 0; } .leftBoxContainer, .rightBoxContainer { box-shadow: 0 8px 5px -7px rgba(0, 0, 0, 0.4); } h3.rightBoxHeading, h3.leftBoxHeading { margin: 0; } .sideBoxContent ul {margin:0; padding:0; list-style:none;} .sideBoxContent ul li { margin-bottom: 0; } #reviewsHeading > a { padding-left: 0 !important; } table td, .centerBoxWrapperContents table td{ padding:0px; } #contentarea-wrapper .grid-64 { width: 63%; } #bannerbox2Content a, #bannerboxallContent a, #bannerboxContent a, #whatsnewHeading > a, .sideBoxContentItem a, .reviewsContent a, #twittercachedsideboxContent a, #searchContent a { padding-left:0px !important; padding-top:1px; } .centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navNextPrevWrapperTop, #navNextPrevWrapperBottom, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .accountQuantityDisplay, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg, .specialsListBoxContents { text-align: center; } /*CSS for login page */ #loginForm FIELDSET { padding: 0 0 1.5em 0; } FIELDSET { border:none !important; } LEGEND { font-weight: bold; padding: 0.3em 0.3em 0.3em 0; } .return_customer LEGEND{ padding: 0 0 0.5em 0; } LABEL.checkboxLabel, LABEL.radioButtonLabel { font-size: 0.95em; margin: 0.2em 0.5em; font-weight: bold; } #createAccountForm fieldset legend { font-size: 1.2em; } #createAccountForm fieldset legend { font-size: 1.2em; } /*CSS For Breadcrumb*/ #breadcrumb-wrapper .breadcrumb-title { color: #FFFFFF; float: left; font-size: 36px; text-align: center; width: 100%; display:none; } /*CSS For Breadcrumb End*/ .productinfo-wrapper { display: block; float: left; text-align: center; width: 100%; } .product_name, #whatsNew .centerBoxContentsNew.centeredContent .product_price, #featuredProducts .centerBoxContentsFeatured.centeredContent .product_price, #specialsDefault .centerBoxContentsSpecials.centeredContent .product_price, #specialsListing .specialsListBoxContents .product_price, #alsopurchased_products .product_price, #upcomingProducts .product_price { font-size: 1.1em; text-align: left; float:left; width:100%; margin: 10px 0 0; padding: 0 20px; text-align:center; } .productListing-data .product_name, .newproductlisting .product_name { text-align:left; } .product_name { margin: 1em 0 0; } .product-name-desc { float: left; width: 100%; min-height: 85px; transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; } .homepage_v3 .product-name-desc { min-height: 105px} .product_price { text-align: left; display:inline-block; width: 100%; } /*width For button*/ input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] { width: auto; } #shoppingcartHeading > a { padding: 0 !important; } #shoppingcart h3, #reviews h3 { padding: 13px 13px 13px 10px; } .cartBoxTotal { font-size: 1.2em; float: left; text-align: center; width: 100%; padding:1em 0; } #ezPageBoxList li { margin: 0; padding: 0.2em 0; text-align: center; } #contentMainWrapper, #logoWrapper, #ezPageBoxList, #ezPageBoxList ul, #popupAdditionalImage, #popupImage { float: left; margin: 0 6px 10px; padding: 0; width:94%; } .categoryIcon, .information, #checkoutShippingContentChoose { margin-bottom: 15px; } .product-name-desc .normalprice, .product-name-desc .productSpecialPriceSale { color:#595959; } .normalprice, .productSpecialPriceSale { text-decoration: line-through; color: #595959; font-size: 14px; } .sidebox_price .normalprice, .sidebox_price .productSpecialPriceSale { color:#595959; } #indexDefaultMainContent { margin-top: -5px; } #contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert-info { vertical-align: top; } #contentarea-wrapper #centercontent-wrapper .alsoPurchased .centerBoxWrapperContents table td{ background-color:#FFFFFF; border:1px solid #E1E1E1; padding:5px; } #contentarea-wrapper #centercontent-wrapper .alsoPurchased .centerBoxWrapperContents table td.no-border{ border:none; } #contentarea-wrapper #centercontent-wrapper .navNextPrevWrapper { margin:10px 0 0; } #contentarea-wrapper #centercontent-wrapper .alsoPurchased .centerBoxWrapperContents .centerBoxContentsAlsoPurch { margin:0 !important; background-color:#E1E1E1; padding:4%; width:92% !important; } #contentarea-wrapper #centercontent-wrapper .alsoPurchased .centerBoxWrapperContents img { height:100px; } /*For full width layout padding */ #ezPagesHeading { padding-bottom:14px; margin-bottom:14px; padding-top:7px; border-bottom: 1px solid #E9E8E8; } #contactUsForm .alert-info.forward { margin-bottom: 15px; } .alert-text, .information .alert-text, .msgalert { color: #595959; font-style:italic; } #loginForm .back { padding-left: 22px; line-height:35px; } .login-emailaddress, #loginForm .buttonRow { float:left; } LABEL.inputLabel { float: left; margin-top:7px; margin-right:10px; } .login-emailaddress .inputLabel { width:110px; margin-top:5px; } .login-password { float:left; } .login-password .inputLabel { width:80px; margin-top:5px; } #createAccountForm .alert-info.forward{ margin-bottom: 10px; } input[type="radio"], input[type="checkbox"] { cursor: pointer; line-height: normal; margin: 6px 0; } #subproduct_name img { height: auto; margin-bottom: 25px; } /*for bck button */ #ezPageDefault h4 { text-transform:none; margin-top:5px; } #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage { margin: 0 4% 1% 0; } #productListing { margin:10px 0 14px; } #cartAdd strong, .add_title{ font-size: 1.2em;; } .product_info, .product_description, .addtocart-info, .product_quantity, .product_review, .navNextPrevWrapper, .alsoPurchased, #productAttributes{ float:left; width:100%; } span.title { display: block; font-size: 1.5em; font-weight: normal; margin: 0 0 14px; padding-bottom:9px; border-bottom: 1px solid #E9E9E9; } .product_review span.title { margin-bottom:15px; } .alsoPurchased span.title, #centercontent-wrapper #productGeneral { margin:0; } .cssButton.button_reviews{ width:100%; } .navNextPrevCounter { margin: 0em; font-size: 0.9em; } #navMainWrapper, #navSuppWrapper, #navCatTabsWrapper { margin: 0em; font-weight: normal; height: 1%; width: 100%; } span.bold { display: block; font-size: 0.95em; font-weight: 700; } .review_img{ text-align:center; float:left; } #checkoutConfirmDefault .productprice-amount { font-size:15px; width:50%; } .cartQuantity input[type='text']{ text-align:center; vertical-align:middle; } #shoppingCartDefault .buttonRow a, #checkoutShipping .change_address a, #checkoutPayment .change_address a, #checkoutConfirmDefault .change_address a, #addressBookDefault .change_address a span, #accountEditDefault .change_address a span, #accountHistoryDefault .change_address a, #accountHistInfo .change_address a, #createAcctSuccess .change_address a, #unsubDefault .change_address a { color:#FFFFFF; } #shoppingCartDefault .buttonRow, .change_address > a, #pageThree .buttonRow.back > a, #pageFour .buttonRow.back > a, #pageTwo .buttonRow.back > a, #discountcouponInfo .content .buttonRow.forward > a { background: none repeat scroll 0 0 #404040; border-color: -moz-use-text-color -moz-use-text-color rgba(0, 0, 0, 0.2); border-style: none none solid; border-width: medium medium 3px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size: 14px; padding: 7px; text-decoration: none; width: auto !important; } .instructions p:nth-child(2){ font-style:italic; } #prevOrders .user-accountinfo, .user-accounthistory { text-align:center; } #accountDefault h2, #addressBookDefault h2, caption #orderHistoryDetailedOrder, caption #orderHistoryStatus { padding-left:0px; } #checkoutConfirmDefault #orderTotals { float:right; width:40%; } #checkoutConfirmDefault .product_price.total strong { float:left; width:63%; } #checkoutConfirmDefault div.total_price { float:left; width:37%; } #orderTotals .lineTitle { float:left; width:60%; } #orderTotals .amount { float:left; width:40%; font-weight:bold; } #shippingEstimatorContent label.inputLabel { width: 100px; } #advSearchDefault .centeredContent{ text-align:left; position: relative; } #advSearchDefault .centeredContent .resultsContainer { top: 36px; } #productAttributes .label { border-bottom: 1px solid #cccccc; border-radius: 0; padding: 0 0 5px; line-height: 45px; color: #666666; font-size: 14px; font-weight: 300; text-transform: capitalize; } #productAttributes .attribute_options > label { font-weight: normal; text-transform: capitalize; font-size: 14px; } .attribImg { margin: 0.3em 0; width: 20%; } .productprice-wrapper > img, .product_price > img { min-height: auto; margin-left:10px; float: right; } h4.optionName{ width:10.8%; float:left; margin-top:2px; } #addressBookDefault .productinfo-leftwrapper .change_address{ margin-right: 3px; } .productprice-wrapper > a { float: left; margin-top: 15px; width: 35%; } #addressBookDefault .productinfo-leftwrapper > a{ display:none; } #productQuantityDiscounts > table { border: 1px solid; border-collapse: collapse; width: 100%; } .indexDefaultHeading { background: url("../images/icons/line.png") repeat-x scroll 0 bottom transparent; padding: 0 0 13px; } .navbar .nav { width:100%; } .jsn-header .container, .navbar .container { width:auto !important; } h2#gvFaqDefaultSubHeading, #gvFaqDefaultMainContent { padding-left:0px; background: none repeat scroll 0 0 transparent; color: #595959; } .jsn-header .container, .navbar .container { width:auto !important; display: block; } /* For Products */ #whatsNew .centerBoxWrapperContents .centerBoxContentsNew, #specialsDefault .centerBoxWrapperContents .centerBoxContentsSpecials, #featuredProducts .centerBoxWrapperContents .centerBoxContentsFeatured { width:95.4% !important; margin-left: 5px; margin-bottom:2px; } #whatsNew .centerBoxWrapperContents, #specialsDefault .centerBoxWrapperContents, #featuredProducts .centerBoxWrapperContents { margin-bottom:-10px; } #centercontent-wrapper .item-page h2 { display: block; margin-bottom: 10px; padding-bottom: 10px; padding-left: 0; font-size: 1.5em;; } em { font-style:normal !important; } /* short */ .item-page .thindottedheader a.button { color: #FFFFFF; } #siteMap .content, #gvFaqDefault .content, #discountcouponInfo .content, #privacy .content, #conditions .content, #shippingInfoMainContent { left: 0%; position: relative; } /* Opera */ .opera #slideshow-wrapper { min-height:450px; } .opera .detailbutton-image a { width:78px; } .pagination-style a{ text-shadow: none !important; padding: 5px 10px; text-decoration: none; border:1px solid #E9E9E9; color: #FFFFFF !important; } .pagination-style .fa { margin: 0; } .pagination-style .current { color: #FFFFFF; padding: 5px 10px; } .cat-count { margin-left: 5px; } .pagination-style a > img { position: relative; top: 3px; } #createAccountForm LABEL.inputLabel, #accountEditDefault LABEL.inputLabel { width: 250px; } .content_box fieldset { padding: 0; } .next-prev { display:inline-block; width: 100%; } #accountNotifications .next-prev { margin-top: 20px; } .next-prev .buttonRow { float: left; margin-right: 10px; } .alert-text, .information .alert-text, .msgalert, .alertrequired { color: #FF4444; font-style: italic; } /*Products homepage */ #specialsListing > ul { margin:15px 0 0; padding:0; } #whatsNew .item, #featuredProducts .item, #specialsDefault .item, #specialsListing li, #alsopurchased_products .centerBoxContentsAlsoPurch, #upcomingProducts li { border-bottom: 1px solid #E9E9E9; display: inline-block; box-shadow:0 8px 5px -7px rgba(0, 0, 0, 0.4); margin: 0 15px 3px; overflow: inherit; position: relative; float:left; padding:10px 10px 20px; background:none repeat scroll 0 0 #F9F9F9; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -webkit-backface-visibility: hidden; } #featuredProducts #featured-slider-inner .item { margin: 0 13px 13px 13px; } #specialsListing li { width: 29.75%; -webkit-backface-visibility: hidden; margin:15px; } .homepage_v3 #specialsListing li {width:29.59%} #indexCategories #whatsNew li:nth-child(3n+3), #indexCategories #featuredProducts li:nth-child(3n+3), #indexCategories #specialsDefault li:nth-child(3n+3), #indexProductList #whatsNew li:nth-child(3n+3), #indexProductList #featuredProducts li:nth-child(3n+3), #indexProductList #specialsDefault li:nth-child(3n+3), #alsopurchased_products li:nth-child(3n+3) { margin-right: 0; } #indexCategories #featuredProducts li:last-child, #indexProductList #featuredProducts li:last-child { display:none; } .zoom-button .fa, .detailbutton-wrapper .fa { margin:0; } #whatsNew, #featuredProducts, #specialsDefault, #upcomingProducts { float: left; margin: 0 0 30px; width: 100%; } #indexDefault .centerBoxWrapper:last-child, #indexCategories .centerBoxWrapper:last-child { margin: 0; } .productSpecialPriceSale, .productSalePrice, .normalprice, .productSpecialPrice, .productPriceDiscount{ margin-right:10px; } .productPriceDiscount { margin-right: 0; } #indexCategories #whatsNew, #indexCategories #featuredProducts, #indexCategories #specialsDefault { margin-top: 0px; overflow: hidden; } #indexProductList #whatsNew, #indexProductList #featuredProducts, #indexProductList #specialsDefault { margin-top:20px; overflow: hidden; margin-bottom: 0; } .centerBoxHeading .fa { margin: 0 0 0 10px; } .border-bg { float: left; } .productprice-wrapper .product_price { padding:5px; bottom: 0; padding: 5px; position: absolute; } p.short-description { margin: 0; } /* Create Account Success */ #createAcctSuccess .buttonRow.forward.change_address { float: left; margin-right: 10px; } #createAcctSuccess .buttonRow.forward.change_address:last-child { margin-right: 0; } /* Product Detail Page */ #productAdditionalImages li { display: inline-block; list-style: none outside none; margin-bottom: 4px; padding: 5px; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; border:1px solid #E9E9E9; } .additionalImages.centeredContent img { height: auto; width: 90%; } #productMainImage { display: inline-block; } .product_info .product_image { text-align: center; width: 100%; } #additionalimages-slider { border-top: 1px solid #E9E9E9; padding: 15px 0 0; } #upcomingProducts .product_image { width: 30%; } #whatsNew .product_image:after, #featuredProducts .product_image:after, #specialsDefault .product_image:after, #specialsListing .product_image:after, .centerBoxContentsAlsoPurch .product_image:after { content: ""; display: block; margin: 1.9em auto 0; width: 150px; border-bottom:1px dashed #E9E9E9; transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s; } #upcomingProducts .product-name-desc { float: right; width: 65%; } #upcomingProducts .product_name { margin: 0; } #whatsNew .product_image img, #featuredProducts .product_image img, #specialsDefault .product_image img, #specialsListing .product_image img, .centerBoxContentsAlsoPurch .product_image img, #upcomingProducts .product_image img{ height: auto; width: 100%; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } #productAdditionalImages { float: left; text-align: center; width: 100%; margin-top:20px; } .imgLink { display: none; } #centercontent-wrapper .alsoPurchased > h1 { margin: 0; } #centercontent-wrapper .product_title h1#productName { margin-bottom: 0; } .product_info { margin-bottom: 35px; margin-top:15px; } .product_info_tab { float: left; width: 100%; margin: 15px 0; } .alsoPurchased { margin: 35px 0 0; } .tabcontents #description > p { margin: 0; } #product_info_display .product_price { border-bottom: 1px solid #E9E9E9; margin: 15px 0 0; padding-bottom: 15px; } #product_info_display .grid-32.noleft-margin.noright-margin { float: right; } .productprice-amount{ font-size: 1.3em; font-weight: normal; width:100%; } .product_quantity { border-bottom: 1px solid #E9E9E9; line-height: 25px; padding-bottom: 13px; } .product_info_tab #productQuantityDiscounts { display: inline-block; margin: 20px 0 0; width: 100%; } .product_info_accordian .product_description, .product_review { margin: 0 0 10px; padding:0 } #alsopurchased_products { float: left; } .centerBoxContentsAlsoPurch { list-style: none outside none; } /* Cart Button */ .addtocart-info .cart_quantity { position:relative; } .addtocart-info .qty_in_cart { margin-bottom: 20px; } .cart_quantity > strong { display: inline-block; float: left; line-height: 35px; margin-right: 1em; } .addtocart-info .cart_quantity span.minus { top: 17px; } .addtocart-info .cart_quantity span { color: #ffffff; cursor: pointer; font-size: 17px; line-height: 18px; position: absolute; text-align: center; top: 0; width: 19px; } .addtocart-info .cart_quantity .cart_button { float: left; margin: 0 0 0 2.4em; width: auto; } .addtocart-info .cart_quantity .cart-min-qty { float: left; margin-top: 20px; width: 100%; } .addto_cart .cart_quantity strong { float: left; margin-right: 10px; margin-top: 9px; } .product_info_accordian { background: #F2F2F2; float: left; padding: 10px; width: 96%; box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.1); margin-left: 3px; } .product_info_tab .tabcontents #description .productGeneral.centeredContent { margin: 10px 0 0; text-align: left; } a:focus { outline: none; text-decoration: none; } /*Accordian */ .accordian-header { cursor: pointer; float: left; font-weight: normal; height: 35px; line-height: 35px; text-align: left; width: 93.6%; display: block; text-decoration: none; } h4.accordian-header { font-size: 1.8em; margin: 0; padding: 0 0 0 4%; width: 100%; } .accordian-header a { color: #FFFFFF; } .accordian-header a:hover { color: #FFFFFF; } .accordian-content { border-bottom: 1px solid #909090; clear: both; padding: 2%; width: 100%; background: #FFFFFF; font-size: 1.4em; } .accordian-header.active { background: url("../images/plus-minus.png") no-repeat scroll 5px -91px rgba(255,255,255,0.3) !important; } .accordian-header { background: url("../images/plus-minus.png") no-repeat scroll 5px 7px rgba(255,255,255,0.3) !important; } .contentText.accordian-content > p { margin: 0; } /* Product Attributes */ .addtocart-info { border-bottom: 1px solid #E9E9E9; float: left; margin-top: 15px; padding: 0; width: 100%; padding-bottom: 15px; } #product_info_display .addtocart-info .cart_quantity span.cssButton.button_sold_out { display: inline-block; width: auto; } #product_info_display #productAttributes { border-bottom: 1px solid #E9E9E9; padding: 0 0 15px; margin-top:5px; } #product_info_display #productAttributes .attribImg { float: left; margin: 10px 10px 0 0; } #product_info_display #productAttributes h5 { margin-bottom: 0; } .addthis_toolbox { float: left; margin-top: 15px; width: 100%; } #contentarea-wrapper #centercontent-wrapper .productinfo-rightwrapper .navNextPrevWrapper.centeredContent { float: left; margin: 20px 0 0; text-align: left; } #contentarea-wrapper .navNextPrevWrapper .navNextPrevList .button_return_to_product_list { font-size:19px; position:relative; top:2px; } .navNextPrevList i.fa { font-size: 0.8em; line-height: 0; margin: 0; } #twttrHubFrameSecure { height: 0 !important; position: relative !important; } #twttrHubFrame { height: 0 !important; position: relative !important; } .product_attributes{ width:82%; float:left; } .attribute_label { float: left; font-size: 1.2em; width: 18%; } .attribute_options > input[type="radio"], .attribute_options > input[type="checkbox"] { margin-right: 8px; } .attribute_options > label { font-size: 1em; margin-right: 10px; } /* Left Right Box */ #left-column h3, #right-column h3 { color: #FFFFFF; font-size: 1.2em; line-height: 25px; padding: 10px; text-transform: uppercase; } #left-column .leftBoxContainer a, #right-column .rightBoxContainer a{ font-size: 0.95em;; line-height: 18px; padding: 8px 0px; text-decoration: none; word-wrap:break-word; display: block; } #left-column .leftBoxContainer .product_sideboxname > a, #right-column .rightBoxContainer .product_sideboxname > a { font-size: 1em; } #left-column .leftBoxContainer #categoriesContent a, #right-column .rightBoxContainer #categoriesContent a, #right-column #cartBoxListWrapper li > a, #left-column #cartBoxListWrapper li > a, #right-column .rightBoxContainer #informationContent a , #left-column .leftBoxContainer #informationContent a, #right-column .rightBoxContainer #moreinformationContent a , #left-column .leftBoxContainer #moreinformationContent a { border-left: 4px solid #F9F9F9; line-height: 35px; padding: 0 0 0 10px; } #left-column #languagesContent > a, #right-column #languagesContent > a { float: left; padding: 0 5px 3px 0; } #left-column #shoppingcartContent .cartBoxTotal, #right-column #shoppingcartContent .cartBoxTotal { padding: 5px 13px; text-align: left; } #left-column .leftBoxHeading a, #right-column .rightBoxHeading a { float: right; line-height: 25px; padding: 0; text-transform: none; font-weight:normal; font-size: 0.7em; } #whatsnew .sideBoxContentItem, #specials .sideBoxContentItem, #reviews .random-reviews, #featured .sideBoxContentItem{ float: left; margin-bottom:0; text-align: left; width:100%; } #whatsnew .sideBoxContentItem .sidebox_content, #specials .sideBoxContentItem .sidebox_content, #reviews .random-reviews .sidebox_content, #featured .sideBoxContentItem .sidebox_content { margin: 0; } .sidebox_content { float: left; margin: 15px 0; width: 100%; } .sidebox_price { float: left; margin: 10px 0 0; width: 100%; } #featured .sidebox_price { margin : 0; } .product_sideboxname { float: right; width: 65%; } .product_sideboximage { float: left; width: 30%; margin: 0 10px 0 0; } .product_sideboximage > img { width:70px; height:auto; padding: 5px 0; } .sideBoxContentItem { border-bottom: 1px dashed #E9E9E9; margin-bottom: 10px; } .sideBoxContentItem:last-child { border: medium none; } #specials .sideBoxContent .sideBoxContentItem a, #whatsnew .sideBoxContentItem a, #reviews .sideBoxContentItem a{ float: left; width: 100%; } /* Category Sidebox */ #right-column #categories li:hover a, #left-column #categories li:hover a { background: none repeat scroll 0 0 #F9F9F9; padding: 0 0 0 10px; } /* Breadcrumb */ #navBreadCrumb > ul, #navBreadCrumb .breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; } #navBreadCrumb li { position: relative; display: flex; align-items: center; color: #5a6b7b; font-size: 0.95em; } #navBreadCrumb li + li::before { content: "/"; color: #a8b3bd; margin: 0 6px; } #navBreadCrumb li a { color: #2e6db4; text-decoration: none; } #navBreadCrumb li a:hover, #navBreadCrumb li a:focus { text-decoration: underline; } #navBreadCrumb li:last-child a, #navBreadCrumb li:last-child { color: #111; pointer-events: none; } #navBreadCrumb li:last-child a:focus { outline: none; } .footer-toplinks a:hover{ font-size: 1em; } #breadcrumb-wrapper { background: none repeat scroll 0 0 #F1F1F1; float: left; margin: 2px 0 30px; padding: 20px 0; width: 100%; } /* Category Page */ #indexCategories { float: left; width: 100%; } #subproduct_name img { height: auto; margin-bottom: 25px; width: 100%; } #indexCategories #subcategory_names li { display: inline-block; float: left; margin: 5px 10px 5px 0; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } #indexCategories #subcategory_names li a {padding: 10px;display: inline-block;} #indexCategories #subcategory_names li:first-child { background:none repeat scroll 0 0 transparent; margin:5px 0; padding:10px 10px 10px 0; } #indexCategories #subcategory_names li:first-child:hover { background:none repeat scroll 0 0 transparent; border-radius: 0; } #subproduct_name > a { color: #FFFFFF !important; } .subcategory_list { background: none repeat scroll 0 0 #F9F9F9; float: left; margin: 0; padding: 15px; width: 100%; } #subcategory_names { float: left; margin: 0; width: 100%; } .content_box { background: none repeat scroll 0 0 #F9F9F9; border: 5px solid #E9E9E9; float: left; padding:2%; margin: 0 0 15px; width:100%; } .content_box strong { font-size: 1em; font-weight: bold; opacity: 0.8; } .content_box > p { line-height: 20px; margin: 5px 0 0; opacity: 0.8; font-size: 1em; } /* Product Listing */ .sort-list { float: right; margin-top: 6px; width: auto; } .productlisting_sort { float: left; width: auto; } .sorter label { float: left; margin-right: 10px; margin-top: 5px; width: auto; font-weight:normal; } .sorter{ width: auto; float:left; } .sorter form { float: left; width: auto; } #newProductsDefault .buttonRow.forward, #allProductsDefault .buttonRow.forward, #featuredDefault .buttonRow.forward, #indexProductList .buttonRow.forward, #advSearchResultsDefault .buttonRow.forward { float: left; width:35%; } #specialsListing .speciallisting_number_links .navSplitPagesLinks { float: left; } #specialsListing .speciallisting_number_links .navSplitPagesResult, #indexProductList #productsListingBottomNumber { line-height:42px; } .navSplitPagesResult { float: right; margin-top: 2px; text-align: right; width: 35%; } .next-prev .navSplitPagesResult { line-height: 47px; margin: 0; } .navSplitPagesLinks { float:right; width:auto; line-height:30px; } #indexProductList .tabTable, #advSearchResultsDefault .tabTable, #newProductsDefault table, #featuredDefault table, #allProductsDefault table { float: left; width: 100%; } .pageresult_bottom, .pageresult_top, .speciallisting_number_links { float: left; margin: 20px 0 0; width: 100%; } .special_toplinks { margin: -5px 0 0; } .special_bottomlinks { margin: 10px 0 0; } .productListing-odd, .productListing-even, .newproductlisting { border: 1px solid #E9E9E9; background:none repeat scroll 0 0 #F9F9F9; float: left; margin: 20px 0 0; padding: 10px; transition: all 0.3s ease-in-out 0s; width: 100%; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .productListing-odd:hover, .productListing-even:hover, .newproductlisting:hover { transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .productListing-rowheading { display: none; } .productListing-data .listingProductImage, .newproductlisting img { margin: 0 20px 0 0; padding: 0; } .productListing-data .short-description, .productListing-data .product_name, .productlisting_btn, .newproductlisting .product_name, .newproductlisting .short-description{ padding: 0; width: 90%; } .newproductlisting .product_name {margin: 0 0 10px } .productnewprice > a.button {padding: 7px} .productnewprice > a.button:hover, .productnewprice > a.button:visited, .productnewprice > a.button:focus, #indexProductList a.button:hover, #indexProductList a.button:focus, #indexProductList a.button:visited {color:#FFFFFF} .productnewprice > a.more-info-text {font-size:14px;} .productListing-data .short-description, .newproductlisting .short-description { font-size:1em; } .productlisting_price { float: left; font-size: 1.4em; line-height: 30px; margin: 0 0 15px; width: 100%; } .productListing-data .product_name > a, .newproductlisting .product_name > a { font-size: 1.4em; } .productListing-data .productlisting{ float: right; margin: 0 10px 0 0; font-size: 1.2em; } .newproductlisting .productnewprice { font-size: 1.2em; } .newproductlisting .productnewprice > input, .productlisting > input { font-size: 16px; height: 35px; line-height: 40px; padding: 0; text-align: center; width: 45px; } .newproductlisting .productlisting{ float: left; width:100%; } /* Shopping Cart Page */ #cartImage > img { float:left; height: auto; width: 75px; } .cartTableHeading, #cartSubTotal { background-color: #F9F9F9; height: 2.5em; } table#cartContentsDisplay tr th, #prevOrders .tableHeading th, #accountHistInfo .tableHeading th, #cartSubTotal { border-bottom: 1px solid #E9E9E9; } table#cartContentsDisplay tr th, #prevOrders .tableHeading th, #accountHistInfo .tableHeading{ background-color:#F9F9F9; } #cartContentsDisplay tr, #prevOrders tr { background: none repeat scroll 0 0 transparent; border-bottom: 1px solid #E9E9E9; } #prevOrders td { padding: 15px; } .cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay { padding: 15px 20px !important; vertical-align:middle !important; text-align: center; } #shoppingCartDefault table, table#prevOrders, #accountHistInfo table { margin: 0; } #cartSubTotal { font-size: 1.1em; line-height: 2.5em; padding-right: 4em; text-align: right; } table#cartContentsDisplay tr th, #prevOrders .tableHeading th, #accountHistInfo .tableHeading, #accountHistInfo th { font-size: 1.1em; padding: 10px; } .cartQuantityUpdate > input[type="image"]:focus { border: medium none; box-shadow: none; } .cartQuantityUpdate > input[type="image"] { border: medium none; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .cartQuantityUpdate > input[type="image"]:hover { transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .cartRemoveItemDisplay img{ transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; width:14px; height:auto; } .cartRemoveItemDisplay img:hover { transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .buttonRow.forward.checkout_button { float: right; } #content-wrapper table#cartContentsDisplay tr td { border-bottom: 1px solid #CCCCCC; vertical-align: middle; } .cartProductDisplay > #product_name { display: inline-block; line-height: 80px; } #content-wrapper table#cartContentsDisplay tr:last-child td{ border:none; } /* Login Page */ #createAccountForm fieldset { padding: 0; width: 100%; margin:10px 0 0; } #loginDefault #createAccountForm .content_box .buttonRow.forward { margin: 25px 0 0; } #loginDefault .content_box { margin: 0; } /* CheckOut Shipping */ /*For Steps */ #checkoutShipping .productinfo-rightwrapper { float: right; } #checkoutShipto { float: left; } .sendto-address { float: left; margin: 15px 0; width: 100%; } .add_title { color: #FFFFFF; padding: 5px; } #checkoutShipping .content_choose FIELDSET { border: 1px solid #D9D9D9 !important; margin-top: 10px; padding: 0.5em 0.5em 0.5em 1em; } address { float: left; font-size: 1em; font-weight: bold; line-height: 22px; width: 100%; } #accountHistInfo .change_address { display:inline-block; } #checkoutShipping .buttonRow.forward, #checkoutShipAddressDefault .buttonRow.forward, #checkoutPayment .buttonRow.forward, #checkoutPayAddressDefault .buttonRow.forward { float: left; } #checkoutConfirmDefault #cartContentsDisplay .buttonRow.forward { float: none; margin: 0; } #checkoutShipAddressDefault .productinfo-leftwrapper, #checkoutShipping .productinfo-leftwrapper, #checkoutPayAddressDefault .productinfo-leftwrapper, #addressBookDefault .productinfo-leftwrapper, #checkoutPayment .productinfo-leftwrapper{ width: 35%; } #checkoutShipAddressDefault .productinfo-rightwrapper, #checkoutShipping .productinfo-rightwrapper, #checkoutPayAddressDefault .productinfo-rightwrapper, #addressBookDefault .productinfo-rightwrapper, #checkoutPayment .productinfo-rightwrapper{ width: 65%; float:right; } #checkoutPayment .product_price.total > strong { font-size: 1.2em; font-weight: normal; margin-right: 10px; } #checkoutPayment .product_price.total span.total_price { font-size: 1.2em; font-weight: normal; } #checkoutConfirmDefault .productinfo-leftwrapper { margin-right: 2%; width: 49%; } #checkoutConfirmDefault .productinfo-rightwrapper { float: right; width: 49%; } /* Time Out */ .timeout_email, .timeout_password { float: left; width: 100%; } /* Account Page */ .allorder_text { float: right; font-size: 11px; margin-top: 5px; text-transform: none; } #content-wrapper table .user-accountinfo > td, #content-wrapper #accountHistInfo table td { border-bottom: 1px solid #CCCCCC; padding: 15px 20px; } #accountHistInfo #myAccountShipInfo address, #accountHistInfo #myAccountPaymentInfo address, #addressBookDefault address { margin-bottom: 20px; } /* Write Review Page */ #reviewsWrite .productprice-amount, #reviewsInfoDefault .productprice-amount{ width:100%; } #reviewsWrite .product_price, #reviewsInfoDefault .product_price{ width:auto; } #reviewsWrite .productprice-amount .normalprice, #reviewsInfoDefault .productprice-amount .normalprice, #reviewsDefault .productprice-amount .normalprice { color:#595959; } .forward.productpage_links { float:right; width:auto; } #reviewsWriteReviewer { background: url("../images/icons/slider_line.png") repeat-x scroll center bottom transparent; float: left; margin: 10px 0; padding: 0 0 15px; width: 100%; } LABEL#textAreaReviews{ float:left; margin: 0 !important; } textarea#review-text { margin-bottom: 15px; } /* Product Review Info */ .ratings { background: none repeat scroll 0 0 #F1F1F1; box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1) inset; display: block; float: left; padding: 1.5% 1%; width: 98%; margin:20px 0 0; } .rating { float: right; } .user_detail { float: left; margin-top: 1px; text-align: center; width: 80%; } .bold.user_reviewer { float: left; font-size: 1em; margin-right: 10px; margin-top: 2px; letter-spacing: 1px; } .reviews-list span.date { float: left; font-size: 1em; margin-top: 2px; letter-spacing: 1px; } .reviews-list .productreviews-wrapper { background: none repeat scroll 0 0 #FFFFFF; float: left; padding: 1%; width: 98%; } .reviews-list .review_content { float: left; width: 100%; } .review_left{ float:left; width:100%; margin-top:10px; font-size: 1em; } #productReviewsDefaultProductPageLink { margin-top: 10px; float: left; } .reviews-list .navSplitPagesResult { margin-bottom: 10px; } .reviews-list #reviewsDefaultListingTopLinks { margin-bottom: 23px; } #reviewsListingDefault #reviewsDefaultListingBottomLinks, .reviews-list #reviewsDefaultListingTopLinks { float:left; } .productreviews-wrapper .smallProductImage img { margin: 0 15px 0 0; } /* Search Sidebox */ #searchContent input[type="text"]{ float: left; font-size: 10px !important; height: 26px; margin: 0; width: 185px !important; } #search #searchContent input { font-size: 1em; padding: 3px 7px; } #searchContent a { float: left; } #currenciesContent select { width: 100%; } /* Order History Sidebox */ .orderHistList li { background: url("../images/icons/cart.gif") no-repeat scroll left center transparent; } a.orderhistory_cart { padding: 8px 12px 8px 22px !important; } /* Manufacturer Info Sidebox */ #manufacturerinfoContent .centeredContent > img { border: 1px solid #E9E9E9; } #manufacturerinfoContent li { text-align: center; } /* Contact Us */ FIELDSET#contactUsForm { border: medium none !important; padding: 0; } #contactUsForm .contactus-name { margin: 6px 0 0; float:left; width:20%; } #contactUsForm Label { float: left; width: 80%; } .custom.contactus-details { background: none repeat scroll 0 0 #595959; float: left; width: 100%; margin:0 0 15px; } .custom.contactus-details .address, .custom.contactus-details .mail, .custom.contactus-details .phone { color: #EAEAEA; float: left; margin: 0; padding: 1.5% 1.5% 1.5% 6%; width:24.32%; min-height:5%; line-height:15px; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .custom.contactus-details .address { width: 28.87%; background-position: 7px -355px !important; } .custom.contactus-details .mail { background-position: 7px -530px !important; } .custom.contactus-details .phone { background-position: 7px -443px !important; } /* Contact Us - enhanced form UI */ #contact-us-form .form-group { margin-bottom: 12px; } #contact-us-form .form-group .help-text { color: #777777; font-size: 0.9em; margin-top: 4px; } /* Professional Contact Layout */ .contact-hero { text-align: center; padding: 28px 12px 16px; background: #f7f7f8; border: 1px solid #E9E9E9; margin-bottom: 18px; } .contact-hero h1 { margin: 0 0 6px; font-weight: 600; } .contact-hero .subtitle { color: #666666; } .contact-intro { margin-bottom: 14px; } .contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 18px; } .contact-wrapper { max-width: 1080px; margin: 0 auto; padding: 0 12px; } .field-row { display: flex; gap: 16px; } .field-row .col { flex: 1 1 0; } /* Neutralize legacy floats on labels inside the contact form */ #contactUsForm label.inputLabel { float: none; width: auto; display: block; margin: 0 0 6px; } #contactUsForm .alert.forward { float: none; } #contactUsForm .help-text { margin-top: 4px; } #contact-us-form .form-group { margin-bottom: 14px; } #contact-us-form input[type="text"], #contact-us-form input[type="email"], #contact-us-form select, #contact-us-form textarea { border: 1px solid #dfe1e5; border-radius: 4px; padding: 8px 10px; } #contact-us-form input[type="text"]:focus, #contact-us-form input[type="email"]:focus, #contact-us-form select:focus, #contact-us-form textarea:focus { outline: none; border-color: #8ab4f8; box-shadow: 0 0 0 3px rgba(138,180,248,0.25); } .card { background: #ffffff; border: 1px solid #E9E9E9; border-radius: 4px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .card h3 { margin-top: 0; margin-bottom: 12px; font-size: 1.2em; border-bottom: 1px solid #F0F0F0; padding-bottom: 6px; } .faq-card .content p { margin: 0 0 8px; } .faq-card .content ul { margin: 0 0 8px 18px; } .faq-card .content li { margin-bottom: 6px; } .contact-sidebar .card + .card { margin-top: 16px; } .contact-list { list-style: none; padding: 0; margin: 0; } .contact-list li { margin-bottom: 8px; } .map-card iframe { border-radius: 3px; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .field-row { flex-direction: column; gap: 0; } } #contact-us-form input[type="text"], #contact-us-form input[type="email"], #contact-us-form select, #contact-us-form textarea { max-width: 520px; width: 100%; box-sizing: border-box; } #contact-us-form textarea { min-height: 120px; resize: vertical; } #contact-us-form .radio-group label { margin-right: 16px; } #contact-us-form .consent label { display: inline-flex; align-items: center; gap: 8px; } #contact-us-form .contact-actions { margin-top: 10px; } @media (max-width: 600px) { #contact-us-form input[type="text"], #contact-us-form input[type="email"], #contact-us-form select, #contact-us-form textarea { max-width: 100%; width: 100%; } } /* Site Map */ #siteMapList ul{ list-style:square; line-height: 25px; padding-left: 15px; } #siteMapList ul li ul{ list-style:circle; margin-bottom:0; } ul.nav-child .submenu > a { background: url("../images/icons/cat_bullet.png") no-repeat scroll 160px 17px transparent; } #siteMap #siteMapList { float: left; width: 100%; } /* Best Seller Sidebox */ ol{ counter-reset: li; /* Initiate a counter */ list-style: none; /* Remove default numbering */ *list-style: decimal; /* Keep using default numbering for IE6/7 */ padding: 0; } ol ol{ margin: 0 0 0 2em; /* Add some left margin for inner lists */ } .rectangle-list a{ position: relative; display: block; padding: .4em .4em .4em .8em; *padding: .4em; margin: .5em 0 .5em 2.5em; color: #444; text-decoration: none; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } #bestsellers #bestsellersContent li:last-child { margin:0; } #left-column h3 a, #right-column h3 a, .buttonRow.back.change_address > a { color:#FFFFFF; } .rectangle-list a:hover{ background: none repeat scroll 0 0 #F9F9F9; } .rectangle-list a:before{ content: counter(li); counter-increment: li; position: absolute; left: -2.5em; top: 50%; margin-top: -1em; height: 2em; width: 2em; line-height: 2em; text-align: center; color:#FFFFFF; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } .rectangle-list a:after{ position: absolute; content: ''; border: .5em solid transparent; left: -1em; top: 50%; margin-top: -.45em; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } #bestsellersContent li a:link, #bestsellersContent li a:visited { padding: 0.4em; } .sideBoxContent { padding: 10px; background:none repeat scroll 0 0 #F9F9F9; width:100%; float:left; border-bottom: 1px dashed #E9E9E9; text-align: left; } #featured .sideBoxContent { padding: 0; } #featured .sideBoxContent .sideBoxContentItem { padding: 10px; } /* About Us Page */ .simple-boxcontent.team_info { border: 1px solid #E9E9E9; float: left; width: 97.1%; } .team_image { float: left; width: 35%; } .team_detail { background: none repeat scroll 0 0 #F5F5F5; float: right; padding: 10px; width: 61%; } .team_name, .team_title, .team_about{ float: left; margin-bottom: 10px; width: 100%; } .team_about{ margin-bottom:0; } /* Advanced Search */ #advSearchDefault .content_box > strong { float: left; margin-bottom: 10px; width: 100%; } #advSearchDefault .simple-boxcontent { border: 1px solid #E9E9E9; float: left; width: 96.5%; } /* Discount Coupon */ #discountcouponInfo > form { float: left; width: 100%; } /* Password Forgotten */ #passwordForgotten .buttonRow.forward { margin-top: 10px; } #passwordForgotten label { float: left; margin-top: 9px; } /* Page not found */ .pagenot_found { float: left; width: 100%; text-align:center; } .notfound_title { display: inline-block; margin: 30px 0 0; text-align: center; text-transform: uppercase; } .notfound_title > em { float: left; font-size: 200px; line-height: 170px; } .notfound_title > p { float: left; line-height: 76px; padding: 0 0 0 30px; } .notfound_title p span { float: left; font-size: 60px; text-align: left; } .notfound_title p em { font-size: 75px; } .notfound_text { color: #EAEAEA; float: left; font-size: 40px; padding: 2%; width: 96%; } .home_button .buttonRow.back.button > a { color: #EAEAEA; } .home_button { float: left; margin: 20px 0 0; text-align: center; width: 100%; } /* Link Color */ #subproduct_name > a, #subproduct_name > a:active, #subproduct_name > a:visited, a.table_edit_button span.cssButton.small_edit, #accountDefault a, .allorder_text > a, .allorder_text > a:active, .allorder_text > a:visited, .buttonRow.product_price > a, .content_box .bold.user_reviewer > strong, .content_box .date.user_reviewdate > strong, #reviewsContent > a, #searchContent a, .accordian-header, .jsn-mainnav.navbar .nav > li > a, .box_heading_style h1 a, ul.tabs li a, .info-links a, .info-links a:active, .info-links a:visited, #siteMapList a, #siteMapList a:active, #siteMapList a:visited, #cartContentsDisplay a.table_edit_button, #cartContentsDisplay a.table_edit_button:active, #cartContentsDisplay a.table_edit_button:visited { color:#595959; } .current-step > a, .checkout-steps > a { color:#595959 !important; } .footer-toplinks a{ color: #E9E9E9 !important; } .content_box td:first-child { width:22%; } .content_box td:last-child { width:22%; } #navBreadCrumb li a:hover, .footer-toplinks a:hover{ border-bottom: 1px solid; } FIELDSET { border: 1px solid #D4D4D4; } LEGEND { color: #555555; } .footer-toplinks > li { border-left: 1px solid #E9E9E9; } /* Admin Options CSS */ .msadmin_options { width: 100%; } .logo_setting .accordian-content img { background: none repeat scroll 0 0 #AAAAAA; padding: 10px; } span.admin-text { font-size: 11px; } .msadmin_options .accordian-content label { float: left; margin-top: 3px; width: 250px; } .msadmin_options .slideshow_image { float: left; width: auto; } .msadmin_options .slideshow_image { float: left; margin: 0 16px 10px 0; width: auto; } .msadmin_options .slideshow_image:last-child { margin-right: 0; } .banners .slideshow_image input { position: relative; top: 23px; vertical-align: top; } #checkoutConfirmDefault .productinfo-leftwrapper .important{float:left;} .zoom { display:inline-block; position: relative; } .zoom:after { content:''; display:block; width:33px; height:33px; position:absolute; top:0; right:0; background:url(../images/icon.png); } .zoom img { border: 1px solid #E9E9E9; display: block; padding: 10px; } .zoom img::selection { background-color: #FFFFFF; } #ex2 img:hover { cursor: url(grab.cur), default; } #ex2 img:active { cursor: url(grabbed.cur), default; } /* New Design CSS */ h3.product_head_admin { text-align: center; } .edify_admin .accordian-content { margin: 0 0 10px; float: left; } .edify_admin .accordian-header { margin: 0 0 10px; } .edify_admin .accordian-header.active { margin:0; } .store_banners .banners, .store_bottom_banners .banners, .custom_content .custom_block_content { border-bottom: 1px solid #E9E9E9; margin-bottom: 15px; } .custom_content .custom_block_content h5 { border-bottom: 1px solid; display: inline-block; font-size: 16px; padding: 0 0 5px; } /* Font Awesome */ i.fa { margin-right: 10px; } p.reviewCount { margin-bottom: 0; } span.centerBoxHeading { padding: 0; } #centercontent-wrapper span.centerBoxHeading h2, .categories-wrapper span.centerBoxHeading h2 { padding: 15px 0; text-transform: none; margin-bottom: 20px; background:#FFFFFF; font-size:2em; border-bottom:1px solid #E9E9E9; } .centerBoxHeading a { float: right; font-size: 0.55em; margin:7px 0; } /*label*/ span.label-new { color: #FFFFFF; font-size: 1em; padding: 5px 10px; position: absolute; left: 10px; text-transform: uppercase; top: 10px; background:none repeat scroll 0 0 #7BC5FF; } span.label-sale { color: #FFFFFF; font-size: 1em; padding: 5px 10px; position: absolute; left: 10x; text-transform: uppercase; top: 45px; background:#AE2340; } span.label-featured { color: #FFFFFF; font-size: 1em; padding: 5px 10px; position: absolute; left: 10px; text-transform: uppercase; top: 45px; background:none repeat scroll 0 0 #FFAA00; } span.label-upcoming { color: #FFFFFF; font-size: 1em; padding: 5px 10px; position: absolute; left: 10px; text-transform: uppercase; top: 105px; background:none repeat scroll 0 0 #00C6B7; } .bottom-upcoming-wrapper, .bottom-special-wrapper { padding: 30px 0 0 !important; } .bottom-upcoming-wrapper #upcomingProducts, .bottom-special-wrapper #specialsDefault { margin: 0; } .our-services header, .know-us header { margin-bottom: 30px; text-align: center; width: 100%; } .know-us header, .extra header, .my-account header { margin-bottom: 0; position: relative; text-align: center; top: -23px; } .our-services header > h2, .know-us header > h2, .my-account header > h2, .extra header > h2 { background-color: #FFFFFF; color: #404040; display: inline-block; margin: 0; padding: 10px; text-align: center; font-size:1.4em; text-transform:uppercase; } .extra header > h2 { font-size:1.5em; } .footer_container { display: inline-block; width: 100%; font-size: 0.9em; -webkit-backface-visibility: hidden; } .know-us-details #indexDefaultMainContent { margin: 0; padding: 0; } .our-services-details .custom-block i { font-size: 40px; } .our-services-details > div { border-left: 1px solid #151b23; text-align: center; } .our-services-details > div:first-child {border:medium none} .our-services-details .custom-block { color: #ffffff; display: inline-block; padding: 10px; text-align: center; } .our-services-details .block-content { display: inline-block; } .our-services-details .custom-block .block-title { font-size: 16px; text-transform:uppercase; display:block; text-align:left; } .our-services-details .custom-block .block-text { font-size: 14px; } .navbar .nav > li.tab_active > a:after, .navbar .nav > li:hover > a:after, .navbar .nav > li > a:active:after { border-style: solid; border-width: 0 7px 6px; bottom: 3px; content: " "; display: block; height: 0; left: 50%; margin: 0 0 0 -7px; position: absolute; width: 0; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } #upcomingProducts .expected-date { display: block; float: left; margin: 1em 0 0; text-align: left; width: 100%; } .product-date { display: inline-block; text-align: left; } .about-us #indexDefaultMainContent > img { margin-bottom: 20px; -webkit-backface-visibility: hidden; } .know-us-details .fa { color: rgba(0, 0, 0, 0.3); float: left; margin-right: 15px; position: relative; top: -10px; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } #indexDefaultMainContent > p.drop-cap:first-letter { line-height:23px; } .product_title .navNextPrevWrapper.centeredContent { display: inline-block; margin: 0 !important; position: absolute; right: 10px; top: 15px; width: auto; } .navNextPrevList { display: inline-block; list-style-type: none; margin: 0; line-height:0; white-space: nowrap; } .navNextPrevList > a { font-size: 1.2em; } .addtocart-info .cart_quantity span.cssButton.button_sold_out, .addtocart-info .cart_quantity span.cssButtonHover.button_sold_out.button_sold_outHover, .cssButton.button_sold_out_sm, .cssButtonHover.button_sold_out_sm.button_sold_out_smHover { background: none repeat scroll 0 0 #FF0000; padding: 7px; font-size: 14px; position: relative; color:#FFFFFF; text-align:center; } /*--Extra Box--*/ .extrabox .arrow-down { border-left: 22px solid rgba(0, 0, 0, 0); border-right: 22px solid rgba(0, 0, 0, 0); border-top: 22px solid #191919; bottom: -22px; color: #FFFFFF; cursor: pointer; height: 0; position: absolute; right: 70px; transition: all 1s ease 0s; width: 0; z-index: 9999; } .extrabox .arrow-down i { bottom: 6px; position: absolute; right: -4px; } .extrabox .arrow-down.opened { border-bottom: 22px solid #FFFFFF; border-top: 0 none; bottom: 0; color: #191919; transition: all 0.5s ease 0s; } .extrabox .arrow-down.opened i { bottom: -20px; } .arrow-down i { margin:0; } .extrabox { background: url("../images/bgpatterns/wrapper.png") no-repeat scroll center top #2B2B2B; position: absolute; right: 0; width: 100%; z-index: 999; display:none; padding:30px 0; } #contactForm-widget #senderName:focus, #contactForm-widget #senderEmail:focus, #contactForm-widget #message:focus { border: 1px solid #696969; box-shadow: none; } #contactForm-widget #senderName, #contactForm-widget #senderEmail { -moz-box-sizing: border-box; background: none repeat scroll 0 0 #222222; border: 1px solid #2C2C2C; border-radius: 3px; color: #AAAAAA; display: block; font-size: 11px; height: 40px; line-height: 24px; padding: 0 10px; transition: all 0.3s ease 0s; width: 100%; float:left; margin-bottom:10px; } #contactForm-widget #message { -moz-box-sizing: border-box; background: none repeat scroll 0 0 #222222; border: 1px solid #2C2C2C; border-radius: 3px; color: #AAAAAA; display: block; font-size: 11px; padding: 16px 10px; transition: all 0.3s ease 0s; width: 100%; float:left; margin-bottom:15px; } #contactForm-widget .col-lg-6:first-child { padding: 0; } #contactForm-widget .col-lg-6.message { padding-right: 0; } .extra-content header h4 { border-bottom: 1px solid rgba(126, 126, 126, 0.3); color: #AAAAAA; margin:0 0 20px; padding: 0 0 15px; } #map1 a { display: none; } .fieldtrue { border: 1px solid #1ABC5B !important; } .fielderror { border-color: #FF0000 !important; } .fieldtrue { border: 1px solid #1ABC5B !important; } .fielderror { border-color: #FF0000 !important; } #contactForm-widget span { color: #FF0000; margin-left:20px; } .widget-content .alert-box.alert-success > p { margin: 0; } /*Tab CSS */ ul.tabs{list-style-type:none;}ul.tabs li{display:inline;margin:0}div.tabcontent{display:block}div.tabcontents{background:none repeat scroll 0 0 #F9F9F9;box-shadow:0 8px 5px -7px rgba(0, 0, 0, 0.4);width:100%}div.tabcontents>div{padding:20px} /*IE CSS*/ *+html .grid-32{width:30%}*+html .grid-16{width:13.666%}*+html .grid-72{width:70%}*+html .grid-24{width:22%}*+html .grid-88{width:89.60%}*+html .grid-8{width:6.30%}*+html .nspCol3{width:32.3%}*+html #centercontent-wrapper{right:0 !important;position:relative !important}*+html #contentarea-wrapper .grid-16{width:16.666% !important;float:left !important}*+html #right-column{position:relative !important;right:0}*+html #productListing{float:none}*+html #contentarea-wrapper #left-column{vertical-align:top !important}*+html #centercontent-wrapper{position:relative !important;left:17%}*+html #left-column{position:relative !important;left:-68% !important}*+html .subcontent-wrapper{position:relative !important}*+html #breadcrumb-wrapper .breadcrumb-title{float:none;width:0}*+html #breadcrumb-wrapper{padding-bottom:30px}*+html .productListing-data{float:left !important;width:auto !important}*+html #shoppingCartDefault .buttonRow,*+html #createAcctSuccess .buttonRow,*+html #addressBookDefault .buttonRow,*+html #checkoutShipping .buttonRow,*+html #checkoutPayment .buttonRow,*+html #checkoutConfirmDefault .buttonRow{float:left;margin-right:3px}*+html input[type="radio"],*+html input[type="checkbox"]{margin-top:0;margin-bottom:0}*+html #logo-wrapper{width:21.9% !important}*+html textarea:focus,*+html input[type="text"]:focus,*+html input[type="password"]:focus,*+html input[type="datetime"]:focus,*+html input[type="datetime-local"]:focus,*+html input[type="date"]:focus,*+html input[type="month"]:focus,*+html input[type="time"]:focus,*+html input[type="week"]:focus,*+html input[type="number"]:focus,*+html input[type="email"]:focus,*+html input[type="url"]:focus,*+html input[type="search"]:focus,*+html input[type="tel"]:focus,*+html input[type="color"]:focus,*+html .uneditable-input:focus{outline:thin dotted}*+html .dropdown-menu{border-right-width:2px;border-bottom-width:2px}*+html .dropdown-toggle{margin-bottom:-3px}*+html .dropdown-menu .divider{width:100%;margin:-5px 0 5px}*+html .open{z-index:1000}*+html .btn{display:inline;margin-left:.3em;line-height:20px;background-color:#e6e6e6;border:0}*+html .btn:hover,*+html .btn:active,*+html .btn.active,*+html .btn.disabled,*+html .btn[disabled]{background-color:#d9d9d9}*+html .btn:active,*+html .btn.active{background-color:#ccc}*+html .btn:first-child{margin-left:0}*+html .btn:hover{background-color:#d9d9d9} /* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000}#colorbox{outline:0}#cboxTopLeft{width:14px;height:14px;background:url(../images/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(../images/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(../images/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(../images/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(../images/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(../images/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(../images/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(../images/controls.png) repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url(../images/loading_background.png) no-repeat center center}#cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7c7c7c}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7c7c7c}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;position:absolute;bottom:-29px;background:url(../images/controls.png) no-repeat 0 0;width:23px !important;height:23px;min-height:0;text-indent:-9999px}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxPrevious{left:0;background-position:-51px -25px}#cboxPrevious:hover{background-position:-51px 0}#cboxNext{left:27px;background-position:-75px -25px}#cboxNext:hover{background-position:-75px 0}#cboxClose{right:0;background-position:-100px -25px}#cboxClose:hover{background-position:-100px 0}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0;right:27px}.cboxSlideshow_on #cboxSlideshow:hover{background-position:-150px 0}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px}.cboxSlideshow_off #cboxSlideshow:hover{background-position:-125px 0} /*! Menucool Custom Color Picker v2012.8.30. http://www.menucool.com/color-picker */ div#colorpicker { width: 191px; height: 164px; padding-top: 10px; padding-left: 10px; padding-bottom:0; padding-right:0; position: absolute; top: 22px; left: 0px; background-color: #EEE; border: 1px solid #BBB; display: none; z-index: 200; } div#colorpicker div { float: left; padding:0; } div#colorpicker div.clear { float: none; clear: both; border: 0; overflow:hidden; height:0; font-size:0; } div#colorpicker div#colorContainer { float: left; border:0; border-right: 1px solid black; border-bottom: 1px solid black; cursor: pointer; } div#colorContainer div { border:0; border-top: solid 1px black; border-left: solid 1px black; width:9px; height:9px; overflow:hidden;/*for IE6*/ } div#colorpicker div#hexBox, div#colorpicker div#bgBox { border: 1px solid #999; font: normal 9px verdana; height: 16px; margin-bottom: 4px; } div#colorpicker div#hexBox { width: 60px; padding-left: 3px; color: Black; line-height: 16px; } div#colorpicker div#bgBox { width: 110px; margin-left: 4px; clear: right; } div.transChooser { background: transparent url("../images/transChooser.gif"); } span.colorChooser { width: 37px; height: 20px; background: transparent url("../images/colorChooser.gif"); margin-left: 1px; margin-bottom: 4px; position: relative; display: inline-block; overflow: visible; vertical-align: middle; z-index:1; } /* New CSS 12-04 */ .header-container .header .header-top { border-bottom:1px solid rgba(0, 0, 0, 0.05); background:none repeat scroll 0 0 rgba(0, 0, 0, 0.05); line-height: 40px; list-style: none outside none; } .header-container .header .language-switcher, .header-container .header .currency_top { float: left; } .header-container .header .language-switcher a, .header-container .header .currency_top a { text-transform:uppercase; background:none repeat scroll 0 0 rgba(0, 0, 0, 0.1); padding:3px 7px; font-size:85%; margin-right:2px; } .header-container .header a { font-size: 100%; outline: medium none; } .header-container .header a, .greeting{ color: #FAFAFA; } .header-container .header a:hover, .item .product_image .hover_info a:active { color: #FAFAFA; } .greeting { border-right: 1px solid rgba(0, 0, 0, 0.1); margin-right: 15px; padding-right: 15px; } .header-container .header .header-top ul.links { float: right; margin: 0; padding: 0; } .header-container .header .header-top .header-top-right ul.links li.first { padding-left: 0; } .header-container .header .header-top ul.links li { float: left; margin: 0; outline: medium none; } .header-container .header .header-top ul.links li a { display: block; font-size: 100%; height: 42px; line-height: 38px; outline: medium none; padding: 0 15px; text-decoration: none; transition: all 0.25s ease 0s; } a { outline: medium none; text-decoration: none; transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; } ul, ol { list-style: none outside none; } .header-container .header .header-top .header-top-right ul.links li.last a { background-position: 0 -148px; background-color:rgba(0, 0, 0, 0.1); } .header .header-det { padding: 30px 0; position: relative; } .header .logo { margin: 0; outline: medium none; text-align: center; } .logo img { height: auto; width: 250px; } .form-search { position: relative; width: 100%; margin: 0; } .input-text { font-size: 1em; color: #ddd; border-width: 0; background: transparent; } .form-search input[type="text"] { border: medium none; box-shadow: none; margin: 0; min-height: 0; outline: medium none; padding: 2px 0 3px 1em; width: 90%; } .header .form-search .input-text { background: url("../images/search.png") no-repeat scroll 8px 12px rgba(0,0,0,0.1); cursor: pointer; float: left; line-height:16px; font-size: 0.95em; margin: 15px 0px; padding: 6px 12px; border: 1px solid rgba(0, 0, 0, 0.05); cursor: text; padding: 11px 14px 11px 34px; width: 100%; color:#FAFAFA !important; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .header .header-left-wrapper.input-group { width: 85%; } .header-container .header .resultsContainer a:hover, .header-container .header .resultsContainer a:active, .header-container .header .resultsContainer a:focus { background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important; } /*Top Header*/ .header-container .header .header-content .logo > a:hover { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); } .header .form-search .button { display: none; } .block-header label { color: #FAFAFA; font-weight: normal; margin: 0; } .header .block-header .language-switcher { border-right: 1px solid rgba(0, 0, 0, 0.05); margin-right: 14px; padding-right: 14px; } .header .block-header .language-switcher, .header .block-header .currency_top { display: inline-block; } .greeting_msg { display: inline-block; margin: 26px 0; width: 100%; text-align:right; } .greeting_msg > a { padding: 3px 7px; background:none repeat scroll 0 0 rgba(0, 0, 0, 0.1); } /*Nav*/ .header-container .header #nav > li > a { font-size:1.05em; text-transform:uppercase; } .header-container .header #nav li ul a { font-size:100%; text-transform:none; border-bottom: 1px solid #F2F2F2; background-color:#FFFFFF; word-wrap: break-word; } .header-container #nav li ul li a.parent { background: url("../images/icons/cat_bullet-1.png") no-repeat scroll right 15px center #FFFFFF; } .nav-maincontainer { padding: 0; } /* Desktop menu must always be visible - only apply on desktop screens */ @media (min-width: 768px) { #cssmenu { display: block !important; visibility: visible !important; height: auto !important; overflow: visible !important; } #cssmenu ul { display: block !important; visibility: visible !important; height: auto !important; } #cssmenu > ul { display: block !important; visibility: visible !important; height: auto !important; } #cssmenu #nav { display: block !important; visibility: visible !important; height: auto !important; } #cssmenu ul#nav { display: block !important; visibility: visible !important; height: auto !important; } #cssmenu .nav { display: block !important; visibility: visible !important; } .nav-maincontainer { display: block !important; height: auto !important; } .nav-maincontainer .nav-container { display: block !important; height: auto !important; } /* Force menu items to be visible on desktop */ #cssmenu ul li { display: list-item !important; height: auto !important; } #cssmenu ul li a { display: block !important; height: auto !important; padding: 10px 15px !important; } } /* CRITICAL: Mobile menu must be hidden by default */ @media (max-width: 1199px) { /* FORCE hide menu on mobile - this overrides everything */ #cssmenu > ul#nav { display: none !important; } #cssmenu ul#nav { display: none !important; } #cssmenu > ul { display: none !important; } #cssmenu ul { display: none !important; } /* Only show when explicitly opened */ #cssmenu.small-screen > ul#nav.open { display: block !important; } #cssmenu.small-screen ul#nav.open { display: block !important; } #cssmenu.small-screen > ul.open { display: block !important; } /* Ensure menu button is visible when small-screen class is applied */ #cssmenu.small-screen #menu-button { display: block !important; } /* Force menu button to show even without small-screen class (fallback) */ #cssmenu #menu-button { display: block !important; } } /* Additional safety: Hide menu on any screen smaller than desktop */ @media (max-width: 767px) { #cssmenu ul#nav { display: none !important; } #cssmenu > ul { display: none !important; } } .header-container #nav > li.tab_active > a, .header-container #nav > li:hover > a, .header-container #nav > li > a:active, .header-container #nav li a { color:#FAFAFA; } .header-container #nav li ul a:hover { background-color:#FFFFFF; } /* Remove decorative icons from desktop menu items */ ul.nav-child .submenu > a, .header-container #nav li ul li a.parent { background: none !important; background-image: none !important; } /* Slideshow */ .slideshow-container, .main-breadcrumb { background: url("../images/bgpatterns/overlay1.png") repeat scroll 0 0 #F5F5F5; box-shadow:0 5px 15px -15px inset; padding:30px 0; } .main-breadcrumb { border-bottom: 1px dashed #E9E9E9; padding: 30px 0; } .bx-viewport > ul { padding: 0; } .top-custom-block { background: none repeat scroll 0 0 #F9F9F9; border: 1px dashed #E9E9E9; margin: 0 0 20px; } /* DIRECTION CONTROLS (NEXT / PREV) */ .brands-wrapper .bx-wrapper .bx-prev, #additionalimages-slider .owl-controls .owl-prev { left: 0; background: url("../images/brands_slider_arrows.png") no-repeat scroll 100% 0% #CCCCCC; } .brands-wrapper .bx-wrapper .bx-next, #additionalimages-slider .owl-controls .owl-next { right: 0; background: url("../images/brands_slider_arrows.png") no-repeat scroll 0% 100% #CCCCCC; } .brands-wrapper .bx-wrapper .bx-controls-direction a, #additionalimages-slider .owl-controls .owl-prev, #additionalimages-slider .owl-controls .owl-next { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 22px; height: 22px; text-indent: -9999px; z-index: 99; } #additionalimages-slider .owl-controls .owl-prev, #additionalimages-slider .owl-controls .owl-next { margin-top:-10px; } .brands-wrapper, .category-slideshow-wrapper { padding: 30px 0; background:none repeat scroll 0 0 #F3F3F3; } .category-slideshow-wrapper { background:none repeat scroll 0 0 #FFFFFF; } .brands-wrapper h2, .category-slideshow-wrapper h2, .box_heading h2 { margin: 0; display: inline-block; margin: 0; padding: 10px; font-size:1.2em; text-transform:uppercase; position:relative; background:#FFFFFF; } .brands-wrapper h2 { background: none repeat scroll 0 0 #f3f3f3; } #indexCategories .box_heading h2, #indexProductList .box_heading h2 { font-size:1.1em; } .brands-wrapper header, .category-slideshow-wrapper header, .box_heading header { text-align: left; margin:0 0 30px; position:relative; } .brands-wrapper header:before, .category-slideshow-wrapper header:before, .box_heading header:before { content: ""; height: 1px; left: 0; position: absolute; top: 50%; width: 100%; } .footer-top-wrapper { padding: 30px 0 20px; } .newsletter h2, .social h2, .payment h2 { color: #FAFAFA; } /*News Letter*/ .newsletter #mc_embed_signup label { font-size: 1.5em; font-weight: normal; line-height: 75px; padding-bottom: 30px; display:inline-block; } #mc-embedded-subscribe-form > p { padding-bottom: 15px; } .footer-1, #footer-2 { padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid #151b23; } #footer-3 {padding-bottom:30px} .footer-wrapper #footer-2 h2, .footer-wrapper #footer-3 h2 { color: #fff; font-size: 16px; margin: 0 0 20px; padding-bottom: 10px; position: relative; text-transform: uppercase; } .footer-v3-container .footer-wrapper .footer-1, .footer-v3-container .footer-wrapper #footer-2, .footer-v3-container .footer-wrapper #footer-3 { padding: 30px; } .footer-v3-container .footer-wrapper {padding: 0} .footer-v3-container .footer-bottom #footer-2, .footer-v3-container .footer-bottom .footer-1 {margin-bottom:0} .footer-wrapper #footer-2 h2 {margin: 0 0 10px} .footer-wrapper #footer-2 h2:after, .footer-wrapper #footer-3 h2:after { background: none repeat scroll 0 0 #fff; bottom: 0; content: ""; height: 1px; left: 0; position: absolute; width: 50px; } .footer-wrapper .newsletter h2 { border-bottom: medium none; padding: 0 0 30px; font-size:18px; text-transform:uppercase; margin: 0; } .newsletter #mc_embed_signup input.email { background: none repeat scroll 0 0 #FFFFFF; color: #404040; display: block; float: left; margin: 0; min-width: 130px; min-height: 39px; padding: 15px 0; text-indent: 15px; width: 70%; } .newsletter #mc_embed_signup input.button, #contactForm-widget input[type="submit"] { display: block; float: left; margin: 0; min-width: 90px; min-height:39px; width: 100% !important; border-bottom:3px solid rgba(0, 0, 0, 0.2); line-height: inherit; height:auto; padding: 9px 15px; font-weight:normal; border-radius:0; background-color: rgba(0, 0, 0, 0.3); transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .newsletter #mc_embed_signup input.button { border-bottom:medium none; padding:15px 30px; } #contactForm-widget input[type="submit"] { width:auto !important; border-top:none; border-left:none; border-right:none; color:#FAFAFA; } .newsletter .fa { color: rgba(0, 0, 0, 0.3); float: left; left: 10px; margin-right: 30px; position: relative; transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); top:5px; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -webkit-backface-visibility: hidden; } .footer-wrapper .newsletter { text-align:center; } .newsletter #mc_embed_signup .clear { clear: none; display: inline-block; } .newsletter #mc_embed_signup input { border:none; } .newsletter #mc_embed_signup form { padding: 0 0 0 14.5% !important; } .newsletter > header, .social > header, .payment > header { margin: 0 0 20px; width: 100%; text-align:left; float:left; } /*Social Wrapper*/ .social-wrapper { display: inline-block; text-align: left; width: 100%; } .social_bookmarks { display: inline-block; margin: 0; padding:0 ; text-align: left; } .social_bookmarks li { padding: 0 5px 5px 0; float:left; } .social_bookmarks li a { border: 1px solid rgba(0, 0, 0, 0.2); background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1); color: #FFFFFF; display: block; float: left; height: 40px; line-height: 40px; text-align: center; transition: all 0.3s ease-in-out 0s !important; -moz-transition: all 0.3s ease-in-out 0s !important; -webkit-transition: all 0.3s ease-in-out 0s !important; -o-transition: all 0.3s ease-in-out 0s !important; -ms-transition: all 0.3s ease-in-out 0s !important; width: 40px; } ul.social_bookmarks .fa { margin: 0; } .social_bookmarks li.facebook a { border: 1px solid #2A5BB6; background: none repeat scroll 0 0 #2A5BB6; } .social_bookmarks li.twitter a { border: 1px solid #12CBED; background: none repeat scroll 0 0 #12CBED; } .social_bookmarks li.pinterest a { border: 1px solid #C11B1B; background: none repeat scroll 0 0 #C11B1B; } .social_bookmarks li.google_plus a { border: 1px solid #DD4B39; background: none repeat scroll 0 0 #DD4B39; } .social_bookmarks li.tumblr a { border: 1px solid #3F729B; background: none repeat scroll 0 0 #3F729B; } .social_bookmarks li.linkedin a { border: 1px solid #007FB1; background: none repeat scroll 0 0 #007FB1; } .social_bookmarks li.youtube a { border: 1px solid #D63030; background: none repeat scroll 0 0 #D63030; } .social_bookmarks li a:hover { border: 1px solid rgba(0, 0, 0, 0.1); color: #FFFFFF; transition: all 0.3s ease-in-out 0s !important; -moz-transition: all 0.3s ease-in-out 0s !important; -webkit-transition: all 0.3s ease-in-out 0s !important; -o-transition: all 0.3s ease-in-out 0s !important; -ms-transition: all 0.3s ease-in-out 0s !important; } /*On Hover*/ .hover_info { left: 0; position: relative; bottom: -20px; width: 100%; } .hover_info:hover h1 { right: 0; transition-delay: 250ms; -moz-transition-delay: 250ms; -webkit-transition-delay: 250ms; -o-transition-delay: 250ms; -ms-transition-delay: 250ms; } .hover_info h1 { color: #fafafa; font-size: 1.5em; right: -100%; padding: 10px 20px; position: absolute; top: 0; margin:0; transition: right 200ms linear 0s; -moz-transition: right 200ms linear 0s; -webkit-transition: right 200ms linear 0s; -o-transition: right 200ms linear 0s; -ms-transition: right 200ms linear 0s; } .hover_info:hover p { opacity: 1; transition-delay: 300ms; -moz-transition-delay: 300ms; -webkit-transition-delay: 300ms; -o-transition-delay: 300ms; -ms-transition-delay: 300ms; } .hover_info p { color: #FFFFFF; font-size: 1.1em; left: 5%; line-height: 1.4; opacity: 0; position: absolute; text-align: center; top: 80px; transition: opacity 200ms linear 0s; -moz-transition: opacity 200ms linear 0s; -webkit-transition: opacity 200ms linear 0s; -o-transition: opacity 200ms linear 0s; -ms-transition: opacity 200ms linear 0s; width: 90%; } .item .product_image .hover_info p, .centerBoxContentsAlsoPurch .product_image .hover_info p, .specialsListBoxContents .product_image .hover_info p { top:40px; font-size:1em; } .hover_info:hover a { left: 0; transition: left 200ms linear 700ms, color 0s ease 0s, background 200ms linear 0s; -moz-transition: left 200ms linear 700ms, color 0s ease 0s, background 200ms linear 0s; -webkit-transition: left 200ms linear 700ms, color 0s ease 0s, background 200ms linear 0s; -o-transition: left 200ms linear 700ms, color 0s ease 0s, background 200ms linear 0s; -ms-transition: left 200ms linear 700ms, color 0s ease 0s, background 200ms linear 0s; } .hover_info a:hover, .hover_info a:visited, .hover_info a:active { color:#FAFAFA; } .hover_info a { background: none repeat scroll 0 0 rgba(0,0,0,0.5); bottom: 0; color: #FAFAFA; font-size: 1em; padding: 10px 20px; position: absolute; left: -100%; } .owl-item .product_image .hover_info .zoom-button a, .owl-item .product_image .hover_info .detailbutton-wrapper a, .specialsListBoxContents .product_image .hover_info .zoom-button a, .specialsListBoxContents .product_image .hover_info .detailbutton-wrapper a { background: none repeat scroll 0 0 #FFFFFF; bottom: 30px; font-size: 12px; height: 35px; width:35px; left: 0; line-height: 35px; opacity: 0; position: absolute; padding: 0; } .item:hover .product_image .hover_info .zoom-button a, .item:hover .product_image .hover_info .detailbutton-wrapper a, .specialsListBoxContents:hover .product_image .hover_info .detailbutton-wrapper a, .specialsListBoxContents:hover .product_image .hover_info .zoom-button a { opacity:1; left:34%; transition: left 200ms linear 700ms, color 0s ease 0s, background 200ms linear 0s; -moz-transition: left 200ms linear 700ms, color 0s ease 0s, background 200ms linear 0s; -webkit-transition: left 200ms linear 700ms, color 0s ease 0s, background 200ms linear 0s; -o-transition: left 200ms linear 700ms, color 0s ease 0s, background 200ms linear 0s; -ms-transition: left 200ms linear 700ms, color 0s ease 0s, background 200ms linear 0s; } .homepage_v3 .item:hover .product_image .hover_info .zoom-button a, .homepage_v3 .item:hover .product_image .hover_info .detailbutton-wrapper a, .homepage_v3 .specialsListBoxContents:hover .product_image .hover_info .detailbutton-wrapper a, .homepage_v3 .specialsListBoxContents:hover .product_image .hover_info .zoom-button a { opacity:1; left:33%; transition: left 200ms linear 700ms, color 0s ease 0s, background 200ms linear 0s; -moz-transition: left 200ms linear 700ms, color 0s ease 0s, background 200ms linear 0s; -webkit-transition: left 200ms linear 700ms, color 0s ease 0s, background 200ms linear 0s; -o-transition: left 200ms linear 700ms, color 0s ease 0s, background 200ms linear 0s; -ms-transition: left 200ms linear 700ms, color 0s ease 0s, background 200ms linear 0s; } .item:hover .product_image .hover_info .detailbutton-wrapper a, .specialsListBoxContents:hover .product_image .hover_info .detailbutton-wrapper a { left:51%; } .homepage_v3 .item:hover .product_image .hover_info .detailbutton-wrapper a, .homepage_v3 .specialsListBoxContents:hover .product_image .hover_info .detailbutton-wrapper a { left:51%; } .owl-item .product_image .hover_info a:hover, .specialsListBoxContents .product_image .hover_info a:hover { color:#FFFFFF; } /*Main Content*/ .main-top { padding: 30px 0; } .owl-carousel { overflow:hidden; } #indexCategories .box_heading, #indexProductList .box_heading { display:block; } .owl-pagination { display:none; } .brands .item > a > img { height: auto; width: 100%; max-height: 80px; object-fit: contain; } .brands .item { margin:5px 15px; text-align: center; display: flex; align-items: center; justify-content: center; } .brands .item > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 80px; } #main-slideshow .owl-buttons { opacity: 0.5; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } #main-slideshow:hover .owl-buttons { opacity: 1; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .centerBoxWrapper .owl-theme .owl-controls .owl-buttons div, #main-slideshow .owl-controls .owl-buttons div, .brands-slider .owl-controls .owl-buttons div { background: url("../images/icons/item-slider.png") no-repeat scroll 100% 100% #CCCCCC; cursor: pointer; height: 60px; position: absolute; top: 42%; text-indent: -9999px; overflow: hidden; width: 50px; outline: 0; z-index: 99; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .brands-slider .owl-controls .owl-buttons div { background: url("../images/icons/item-slider.png") no-repeat scroll 94% 93% #CCCCCC; height: 50px; width: 40px; top:29%; } .centerBoxWrapper .owl-theme .owl-controls .owl-buttons div.owl-next, .brands-slider .owl-controls .owl-buttons div.owl-next, #main-slideshow .owl-controls .owl-buttons div.owl-next { right: 0%; background-position:100% 0; } .brands-slider .owl-controls .owl-buttons div.owl-next { background-position: 90% 8%; } .centerBoxWrapper .owl-theme .owl-controls .owl-buttons .disabled, .centerBoxWrapper .owl-theme .owl-controls .owl-buttons .disabled:hover, #additionalimages-slider .owl-controls .owl-prev.disabled, #additionalimages-slider .owl-controls .owl-next.disabled, #additionalimages-slider .owl-controls .owl-prev.disabled:hover, #additionalimages-slider .owl-controls .owl-next.disabled:hover, .brands-slider .owl-controls .owl-next.disabled, .brands-slider .owl-controls .owl-next.disabled:hover, .brands-slider .owl-controls .owl-prev.disabled, .brands-slider .owl-controls .owl-prev.disabled:hover { cursor: default; background-color:#E9E9E9; } .custom-banner-container { background: none repeat scroll 0 0 #F9F9F9; border-bottom: 1px dashed #E9E9E9; border-top: 1px dashed #E9E9E9; padding: 30px 0; } .custom-banner-container .top-banner { position: relative; } .custom-banner-container .top-banner:hover:before { transform: scale(1); } .custom-banner-container .top-banner:hover:after { transform: scale(1); } .custom-banner-container .top-banner:before { background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; bottom: 0; content: ""; display: block; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; transform: scale(0); transition: all 0.5s ease-out 0s; } .custom-banner-container .top-banner:after { background: rgba(0, 0, 0, 0) url("../images/plus-img.png") no-repeat scroll 0 0; bottom: 0; content: ""; display: block; height: 60px; left: 0; margin: auto; pointer-events: none; position: absolute; right: 0; top: 0; transform: scale(0); transition: all 0.5s ease-out 0s; width: 60px; } .main-top .main .custom-banner-container { background: none; border: none; } .custom-banner-container .custom-banner-image img { width:100%; height:auto; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .custom-banner-container .custom-banner-image a { display: block; overflow: hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .top-banner h3 { font-weight: 100; margin: 20px 0 12px; text-align: center; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .top-banner p { margin-bottom: 20px; text-align: center; } /*Custom-content*/ .custom-content-wrapper { padding: 30px 0; background:#2B2B2B; } .bottom-banner-wrapper { padding:30px 0; background: none repeat scroll 0 0 #F9F9F9; border-bottom: 1px dashed #E9E9E9; } .bottom-banner img { background: none repeat scroll 0 0 #F9F9F9; } /*Footer*/ .footer-wrapper { background: #2B2B2B; color: #AAAAAA; font-size: 100%; } .aboutus_address, .aboutus_mail, .aboutus_phone, .aboutus_fax, .aboutus_skype { float: left; padding-bottom: 10px; text-align: left; width: 100%; } .footer-wrapper .contact-us li:last-child { padding: 0; } .mail > a { color: #AAAAAA; } .footer-wrapper { padding: 30px 0 0; } .footer-wrapper header { margin: 0 0 25px; width: 100%; } .footer-wrapper ul { padding: 0; } .extra-links > li { line-height: 30px; width: 100%; } .extra-links li a { color: #AAAAAA; display: inline-block; padding: 5px 0; width: 100%; } .extra-links li a:last-child{padding:5px 0 0} .extra-links li a:hover { color: #FFFFFF; } #footer-2 .about-us-container, #footer-2 .contact-us ul {padding-top: 10px;} .contact-us .fa, .about-us .address .fa { border: 1px solid #AAAAAA; border-radius: 0%; color: #AAAAAA; display: inline-block; height: 35px; line-height: 35px; text-align: center; width: 35px; float:left; margin-right: 15px; } .contact-us ul li p { display: inline-block; width: 75%; } .contact-us ul li:last-child > p, #footer-2 .about-us-container .address { margin-bottom: 0; } .contact-us ul li:hover .fa, .about-us .address:hover .fa { border: 1px solid rgba(255, 255, 255, 0.2); color: #FFFFFF; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .about-us-container div.address { float: left; margin: 10px 0 0; width: 100%; } .extra-links li a .fa { margin-right: -16px; line-height: inherit; opacity:0; transition:all 0.3s ease 0s; } .extra-links li a:hover .fa { margin-right:2px; opacity:1; transition:all 0.3s ease 0s; } .copyright { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3); padding: 15px 0; } .footer-v3-container .footer-wrapper .copyright {padding: 15px 30px} .copyright-text > p { margin: 0; text-align: center; } .back-to-top { background: url("../images/totop_arrows.png") no-repeat scroll 0% 0% #E1E1E1; cursor: pointer; float: right; height: 45px; right: 20px; bottom:20px; position:fixed; color:#FFFFFF; width: 45px; padding:0; font-size:0; z-index:999; } /*Sticky Header*/ .sticky-header-wrapper { float: left; width: 100%; box-shadow:0 3px 3px -1px rgba(0, 0, 0, 0.1); position:fixed; top:0; left:0; z-index:9999999; display:none; } .sticky-header-wrapper .logo { margin: 12px 0; text-align: left; } .sticky-header-content .logo img { width: 180px; } .sticky-header-wrapper .custom_links.topbar_links { float: right; line-height: 30px; margin: 0; } .sticky-header-wrapper .top-search { float: left; } .sticky-header-wrapper .topbar_links a { float: right; color:#FFFFFF; margin:15px 1px; background:none repeat scroll 0 0 rgba(0, 0, 0, 0.1); } .topbar_links a { float: left; padding: 10px; line-height:22px; } .sticky-header-wrapper .topbar_links nav ul li { float:right; line-height:30px; } .sticky-header-wrapper .topbar_links nav ul li:hover { background:none; } .sticky-header-wrapper .custom_links.topbar_links ul { margin: 0; } .header .sticky-header-content .form-search .input-text { width:100%; } /*Product Info*/ .cart_quantity > input[type="text"] { float: left; font-size: 12px; height: 35px; margin: 0 0.8em 0 0; padding: 10px; text-align: center; width: 35px; } ul.tabs { margin-bottom: 30px; padding: 0; position: relative; text-align: left; } ul.tabs:before { content: ""; height: 1px; left: 0; position: absolute; top: 50%; width: 100%; } ul.tabs li a { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #E9E9E9; cursor: pointer; display: inline-block; font-size: 1.1em; list-style: none outside none; margin: 0 10px 0 0; padding: 5px 8px; position: relative; text-transform: uppercase; } .product_info #productDetailsList, .product_info #productDetailsList li { margin:0; } #centercontent-wrapper header { margin: 0 0 30px; position: relative; text-align: left; } #centercontent-wrapper header:before { content: ""; height: 1px; left: 0; position: absolute; top: 50%; width: 100%; } #centercontent-wrapper header > h1, .checkout-steps { background: none repeat scroll 0 0 #FFFFFF; display: inline-block; margin: 0; padding: 10px; position: relative; font-size:1.2em; text-transform:uppercase; line-height:22px; } .checkout-steps, .current-step { border: 1px solid #E9E9E9; margin: 0 10px 0 0 !important; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } #indexProductListCatDescription, #categoryDescription { margin-bottom:30px; } #categoryImgListing > img { height: auto; width: auto; } /*ToolTip CSS*/ /*.tooltip{ position:absolute; z-index:1020; display:block; visibility:visible; padding:5px; font-size:11px; opacity:0; filter:alpha(opacity=0) } .tooltip.in{ opacity:.8; filter:alpha(opacity=80) } .tooltip.top{ margin-top:-2px } .tooltip.right{ margin-left:2px } .tooltip.bottom{ margin-top:2px } .tooltip.left{ margin-left:-2px } .tooltip.top .tooltip-arrow{ bottom:0; left:50%; margin-left:-5px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #4EB1BA } .tooltip.left .tooltip-arrow{ top:50%; right:0; margin-top:-5px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:5px solid #000 } .tooltip.bottom .tooltip-arrow{ top:0; left:50%; margin-left:-5px; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid #000 } .tooltip.right .tooltip-arrow{ top:50%; left:0; margin-top:-5px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-right:5px solid #000 } .tooltip-inner{ max-width:200px; padding:3px 8px; color:#fff; text-align:center; text-decoration:none; background-color:#000; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px } .tooltip-arrow{ position:absolute; width:0; height:0 }*/ /*Alert Box*/ .alert { font-weight:normal; border:none; display:inline-block; width:100%; margin:0 0 20px; } body > div.alert.alert-success.alert-dismissable { margin-bottom: 0; } button.close:hover { background:none; } .mousetrap { width: 100% !important; height: 100% !important; } /* CLOUD ZOOM CSS - DISABLED .cloud-zoom img { width: 100%; height:auto; } .cloud-zoom-lens { border: 1px solid #ccc; margin:-1px; background-color:#fff; cursor:move; } .cloud-zoom-title { position:absolute !important; background-color:#000; color:#FFFFFF; padding:3px; width:100%; text-align:center; font-weight:bold; font-size:10px; top:0px; display:none; } .cloud-zoom-big { border:4px solid #ccc; overflow:hidden; background: #FFFFFF } .cloud-zoom-loading { color:white; background:#222; padding:3px; border:1px solid #000; display:none; } CLOUD ZOOM CSS - DISABLED */ /*Login Page*/ .split-login .content { border-bottom: 0 none; border-style: solid solid none; border-width: 1px 1px 0; min-height: 270px; padding: 14px 21px; border-color:#E9E9E9; background:none repeat scroll 0 0 #F9F9F9; } .split-login .buttons-set { border-style: solid; border-width: 1px; margin: 0; padding: 8px 13px; display:inline-block; width:100%; } .split-login .buttons-set { background: none repeat scroll 0 0 #F9F9F9; border-color: #E9E9E9; } .split-set { border-top-style: solid; border-top-width: 1px; clear: both; margin: 4em 0 0; padding: 8px 0 0; text-align: right; } .split-set { border-top-color: #E9E9E9; } .split-login .content h4, .create-account-page .content h4, #contactUsDefault .content h4, #checkoutShipping .content h4, #checkoutPayment .content h4, #checkoutConfirmDefault .content h4, #checkoutSuccess .content h4, #accountDefault .content h4, #accountHistoryDefault .content h4, #accountHistInfo .content h4, #accountEditDefault .content h4, #addressBookDefault .content h4, #addressBookProcessDefault .content h4, #acctNewslettersDefault .content h4, #accountNotifications .content h4, #checkoutShipAddressDefault .content h4, #checkoutPayAddressDefault .content h4, #timeoutDefault .content h4, #createAcctSuccess .content h4, #gvFaqDefault .content h4, #reviewsDefault .content h4, #advSearchDefault .content h4 { border-bottom: 1px solid #E9E9E9; margin: 0 0 20px; padding: 0 0 10px; text-align:left; } #advSearchDefault .content h4 .forward { display: inline-block; float: right; font-size: 0.8em; } #advSearchDefault .content .row .select2-container { margin-right: 10px; } .split-login .create-account-button { display: inline-block; float: right; } .login-buttons .button_login { float: right; } .login-buttons > a { float: left; line-height:35px; } .split-login #loginForm label { float: left; font-weight: 400; position: relative; z-index: 0; } .split-login #loginForm input#login-email-address, .split-login #loginForm input#login-password, #accountEditDefault .content input[type="text"], #addressBookProcessDefault .content input[type="text"], #accountPassword .content input[type="text"], #accountPassword .content input[type="password"], #checkoutNewAddress .content input[type="text"], #gvFaqDefault .content input[type="text"], #discountcouponInfo .content input[type="text"], #advSearchDefault .content input[type="text"] { width: 100%; min-height:35px; } /*Create Account*/ .create-account-page .content, #passwordForgotten .content, #timeoutDefault .content, #contactUsDefault .content, #checkoutShipping .content, #checkoutPayment .content, #checkoutConfirmDefault .content, #checkoutSuccess .content, #accountDefault .content, #accountHistoryDefault .content, #accountHistInfo .content, #accountEditDefault .content, #addressBookDefault .content, #addressBookProcessDefault .content, #accountPassword .content, #acctNewslettersDefault .content, #accountNotifications .content, #checkoutShipAddressDefault .content, #checkoutPayAddressDefault .content, #createAcctSuccess .content, #gvFaqDefault .content, #discountcouponInfo .content, #reviewsInfoDefault .content, #reviewsDefault .content, #reviewsWrite .content, #advSearchDefault .content { padding: 14px 21px; border: 1px solid #E9E9E9; background:none repeat scroll 0 0 #F9F9F9; margin: 20px 0; } #accountNotifications > form > .content { margin-bottom: 0; } #loginDefault #loginForm .content { border-color: #E9E9E9; border-style: solid solid none; border-width: 1px 1px 0; padding: 20px; width: 100%; background:none repeat scroll 0 0 #F9F9F9; } .split-login .buttons-set, #loginDefault #loginForm .buttons-set { border-style: solid; border-width: 1px; display: inline-block; margin: 0; padding: 8px 13px; width: 100%; background:none repeat scroll 0 0 #F9F9F9; } .split-login .buttons-set, #loginDefault #loginForm .buttons-set { border-color: #e9e9e9; } #loginDefault #loginForm .buttons-set { padding: 15px 20px; } #passwordForgotten .content, #timeoutDefault .content { margin: 0; } #contactUsDefault .content, #reviewsDefault .content, #reviewsWrite .content { margin: 0 0 20px } .create-account-page .content label, #timeoutDefault .content label, #contactUsDefault .content label, #checkoutSuccess .content label, #accountEditDefault .content label, #addressBookProcessDefault .content label, #accountPassword .content label, #checkoutNewAddress .content label, #gvFaqDefault .content label, #discountcouponInfo .content label, #advSearchDefault .content label, #acctNewslettersDefault .content label { font-weight:400; } .create-account-page .content input.inputlogin, .create-account-page .content select.inputlogin, #passwordForgotten .content input#email-address, #timeoutDefault .content #login-email-address, #timeoutDefault .content #login-password, #contactUsDefault .content input#contactname, #contactUsDefault .content input#email-address, #contactUsDefault .content #enquiry, #advSearchDefault .content select, .create-account-page .statezone input.inputLabel.visibleField, #loginForm .login-password > input, #loginForm .login-emailaddress > input { width:100%; min-height:35px; } .create-account-page .content select, .create-account-page .content select.inputlogin, #addressBookProcessDefault .content select, #checkoutNewAddress .content select { width: 100% !important; } .create-account-page .content select, #addressBookProcessDefault .content select, #checkoutNewAddress .content select, #advSearchDefault .content select, #loginForm .login-password > input, #loginForm .login-emailaddress > input { height:35px; line-height:35px; } .create-account-page .submit-info .button_submit { float: right; } #createAcctDefault .create-account-page { margin-top: 20px; } #createAcctDefault .create-account-page .content, #loginDefault #createAccountForm .content { margin: 0 0 24px; } .create-account-page .newsletter-details .content { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border-color: #E9E9E9 -moz-use-text-color -moz-use-text-color; border-style: solid none none; border-width: 1px medium medium; padding: 20px 0 0; } #checkoutShipAddressDefault .row.address-entries address, #checkoutPayAddressDefault .row.address-entries address{ margin: 10px 0 0 20px; } .create-account-page .newsletter-details-signup .newsletter.row .newsletter { width: auto; } .create-account-page .newsletter-details-signup .newsletter.row .submit-info { float: right; width: auto; } #accountHistoryDefault .buttonRow.forward.change_address.account-history-back { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; } /*Timeout*/ #timeoutDefault .timeoutbuttons { display:inline-block; width:100%; } #timeoutDefault .timeoutbuttons .button_login { float:right; } #timeoutDefault .timeoutbuttons a { float:left; margin:12px 0; } /*Contact Us*/ .contactus-sendbutton .button_send { float: right; } .contactus-sendbutton .alert-text { display: inline-block; float: left; } .contactus-sendbutton { margin-top: 20px; } /*Checkout*/ .shipping-methods > .col-lg-12{ border-bottom: 1px solid #E9E9E9; margin-bottom: 20px; padding-bottom: 15px; } .ship-method { margin-top: 15px; } .shipping-methods:last-child > .col-lg-12 { border: medium none; margin-bottom: 0; padding-bottom: 0; } #checkoutShipping .checkout-shipping-button .buttonRow.forward, #checkoutPayment .checkout-shipping-button .buttonRow.forward, #checkoutConfirmDefault .checkout-shipping-button .buttonRow.forward, #checkoutShipAddressDefault .checkout-shipping-button .buttonRow.forward, #checkoutPayAddressDefault .checkout-shipping-button .buttonRow.forward { float:right; } #checkoutConfirmDefault .payment-module .important { margin-top: 15px; } #checkoutConfirmDefault .buttonRow.forward { display:inline-block; } #checkoutShipping .buttonRow.back, #checkoutShipAddressDefault .buttonRow.back, #checkoutPayment .buttonRow.back, #checkoutPayAddressDefault .buttonRow.back, #checkoutConfirmDefault .checkout-shipping-button .buttonRow.back { float: left; line-height:45px; display:inline-block; } #checkoutSuccess .content .buttonRow.forward { display: inline-block; margin: 15px 0 0; } /*Account Pages - Modern Design Override*/ #accountDefault { background: none !important; } #accountDefault .my_accountpage { background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05) !important; padding: 30px !important; margin: 20px 0 !important; } #accountDefault .my_accountpage header h1 { color: #2c3e50 !important; font-size: 28px !important; font-weight: 600 !important; margin: 0 0 25px 0 !important; padding: 0 0 15px 0 !important; border-bottom: 2px solid #e74c3c !important; background: none !important; text-shadow: none !important; } /* Remove ALL purple/ugly styling from account page headings */ #accountDefault h1, #accountDefault h2, #accountDefault h3, #accountDefault h4 { background: none !important; color: #2c3e50 !important; text-shadow: none !important; border: none !important; } #accountDefault #prevOrders { border-radius: 8px !important; overflow: hidden !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; margin: 25px 0 !important; } #accountDefault #prevOrders caption h4 { background: #f8f9fa !important; color: #495057 !important; font-size: 18px !important; font-weight: 600 !important; padding: 15px 20px !important; margin: 0 !important; border-bottom: 1px solid #dee2e6 !important; border: none !important; } #accountDefault #prevOrders .tableHeading { background: #007bff !important; color: white !important; } #accountDefault #prevOrders .tableHeading th { padding: 12px 15px !important; font-weight: 500 !important; font-size: 14px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; background: #007bff !important; color: white !important; } #accountDefault #prevOrders .user-accountinfo td { padding: 12px 15px !important; border-bottom: 1px solid #f1f3f4 !important; font-size: 14px !important; color: #495057 !important; } #accountDefault #prevOrders .user-accountinfo:nth-child(even) { background: #f8f9fa !important; } #accountDefault #prevOrders .user-accountinfo:hover { background: #e3f2fd !important; transition: background-color 0.2s ease !important; } #accountDefault #accountLinksWrapper { background: #f8f9fa !important; border-radius: 8px !important; padding: 25px !important; margin: 30px 0 !important; border: 1px solid #e9ecef !important; } #accountDefault #accountLinksWrapper h4 { color: #343a40 !important; font-size: 20px !important; font-weight: 600 !important; margin: 0 0 20px 0 !important; padding: 0 0 10px 0 !important; border-bottom: 1px solid #dee2e6 !important; background: none !important; text-shadow: none !important; } #accountDefault #myAccountGen { list-style: none !important; padding: 0 !important; margin: 0 !important; } #accountDefault #myAccountGen li { margin: 0 0 12px 0 !important; border-radius: 6px !important; overflow: hidden !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } #accountDefault #myAccountGen li a { display: flex !important; align-items: center !important; padding: 15px 20px !important; background: white !important; color: #495057 !important; text-decoration: none !important; font-size: 15px !important; font-weight: 500 !important; border-left: 4px solid #007bff !important; transition: all 0.2s ease !important; } #accountDefault #myAccountGen li a:hover { background: #007bff !important; color: white !important; transform: translateX(3px) !important; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2) !important; } #accountDefault #myAccountGen li a i.fa { margin-right: 15px !important; width: 18px !important; font-size: 16px !important; opacity: 0.8 !important; } #accountDefault #myAccountGen li a:hover i.fa { opacity: 1 !important; } /* Force override any existing ugly purple or other styling */ #accountDefault [style*="purple"], #accountDefault [style*="#800080"], #accountDefault [style*="#9966CC"], #accountDefault [style*="background"], #accountDefault .purple-header, #accountDefault .ugly-header { background: none !important; color: #2c3e50 !important; text-shadow: none !important; } #accountDefault ul { padding: 0; } /*GV FAQ*/ #discountcouponInfo LABEL.inputLabel{ width:auto; margin-top:4px; margin-right:10px; } #gvFaqDefault #gvFaqDefaultMainContent .gv_faq { padding: 0; margin:0; } #gvFaqDefault .content .button_redeem, #gvFaqDefaultContent, #discountcouponInfo .content .button_send { margin: 10px 0 0; } #gvFaqDefault .alert h4 { margin:0; } /* Account History */ .user-orderhistory { border-bottom: 1px solid #E9E9E9; display: inline-block; line-height: 20px; margin: 0 0 30px; padding: 0 0 20px; width: 100%; } .user-orderhistory:last-child { border: medium none; margin: 0 0 5px; padding: 0; } .account_history .next-prev { margin: 0; } .user-orderhistory .change_address { margin-top: 10px; display:inline-block; } #accountHistInfo #orderTotals { padding: 10px; } #accountHistInfo tr.user-accounthistory { border-bottom: 1px solid #E9E9E9; } #orderTotals { display: inline-block; padding-right: 6em !important; text-align: right; width: 100%; } /*Reviews*/ .reviews-list .smallProductImage img { display: inline-block; height: auto; margin-right: 15px; width: 100%; } .reviews-list blockquote p { font-size: 0.8em; margin: 15px 0; } .reviews-list blockquote .product-review-default footer img, .reviews-list blockquote .reviews-description img { margin-top: 10px; } .reviews-list blockquote { background: none repeat scroll 0 0 #F9F9F9; border-left: 5px solid #E9E9E9; padding: 15px 20px; } .review-links { display: inline-block; margin-top: 15px; } .review-links > .buttonRow { float: left; margin: 0 5px 5px 0; padding: 2px 7px 5px; } .review-links.review-info-btn > .buttonRow {padding: 0} .review-links.review-info-btn > .buttonRow > a, #reviewsWrite .review-links.review-info-btn > .buttonRow > a { padding: 7px 5px; display: inline-block; line-height:normal; font-size:14px; } blockquote .review-links a, #reviewsWrite .review-links a{ color: #FAFAFA !important; font-size: 0.8em; } #reviewsWrite .ratingRow { margin: 1em 0 0; } /*Menu*/ .header-container .header a.toggleMenu { display: none; padding: 10px 15px; color: #FAFAFA; background-image:url("../images/menuicon.png"); background-repeat:no-repeat; background-position:center right; width:100%; font-size: 1.2em; text-transform:uppercase; } .nav { list-style: none; *zoom: 1; } .nav:before, .nav:after { content: " "; display: table; } .nav:after { clear: both; } .nav ul { list-style: none; width: 13em; padding:0; } .nav a { padding: 10px 15px; } .nav li { position: relative; } .nav > li { float: left; } .nav > li > a { display: block; } .nav li ul { position: absolute; left: -9999px; } .nav > li.hover > ul { left: 0; } .nav li li.hover > ul { left: 100%; top: 0; } .nav li li a { display: block; position: relative; z-index:100; } .nav li li li a { z-index:200; } @media screen and (max-width: 1149px) { .active { display: block; } .nav > li { float: none; } .nav > li > .parent { background-position: 99% 50%; } .nav > li > .parent { background-image: url("../images/arrows/arrow40.png"); background-repeat: no-repeat; background-position: 99% 50%; } .nav ul { display: block; width: 100%; } .nav > li.hover > ul , .nav li li.hover > ul { position: static; } } #centercontent-wrapper .table-responsive { border: medium none; margin: 0; } #myAccountGen li a { display: inline-block; padding: 5px 0; } .columnwith-left { left: 25%; } #left-column { right: 75%; } .two-column { left: 25%; } .three-columns { right: 50% !important; } #bannerboxall { box-shadow: none; } #bannerboxall h3 { display: none; } #bannerboxall #bannerboxallContent > a { box-shadow:0 8px 5px -7px rgba(0, 0, 0, 0.4); padding:0; } #bannerboxall .sideBoxContent { padding: 0; background:none; } #bannerboxall #bannerboxallContent > a:first-child { margin-bottom:30px; } button.close { min-height:0; } /*Home Page V3*/ .home-top-wrapper, .footer-v3-wrapper { background: url("../images/banners/home_v3.jpg") no-repeat fixed 0 0 #F1F1F1; } .home-container, .footer-v3-container { background: none repeat scroll 0 0 #FFFFFF; } .homepage_v3 .header-container .header .header-top, .homepage_v3 .header-container .header .header-content, .homepage_v3 .header-container .header .nav-maincontainer { padding: 0 30px; } .homepage_v3 .slideshow-container { padding: 30px; background: none repeat scroll 0 0 #FFFFFF; box-shadow:none; } .homepage_v3 .custom-banner-container, .homepage_v3 .main-top, .footer-v3-container .custom-banner-container, .footer-v3-container .custom-content-wrapper, .footer-v3-container .bottom-banner-wrapper, .footer-v3-container .brands-wrapper, .homepage_v3 .main-breadcrumb{ padding: 30px; } .map { height: 350px; width: 100%; } #map1 iframe, #contactUsDefault .content iframe { height: 100%; width: 100%; border: none; } #map-canvas { height: 400px; margin: 30px 0; padding: 0; } #map-canvas img { max-width: none; } /* * Core Owl Carousel CSS File * v1.3.2 */ /* clearfix */ .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* display none until init */ .owl-carousel{ display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper{ display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer{ /*overflow: hidden;*/ position: relative; width: 100%; } .owl-carousel .owl-wrapper-outer.autoHeight{ -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel .owl-item{ float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div{ cursor: pointer; } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* mouse grab icon */ .grabbing { cursor:url(grabbing.png) 8 8, move; } /* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); } /* * Owl Carousel Owl Demo Theme * v1.3.2 */ /* Clickable class fix problem with hover on touch devices */ /* Use it for non-touch hover action */ .owl-theme .owl-controls.clickable .owl-buttons div:hover{ filter: Alpha(Opacity=100);/*IE7 fix*/ opacity: 1; text-decoration: none; } /* Styling Pagination*/ .owl-theme .owl-controls .owl-page{ display: inline-block; zoom: 1; *display: inline;/*IE7 life-saver */ } .owl-theme .owl-controls .owl-page span{ display: block; width: 12px; height: 12px; margin: 5px 7px; filter: Alpha(Opacity=50);/*IE7 fix*/ opacity: 0.5; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #869791; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{ filter: Alpha(Opacity=100);/*IE7 fix*/ opacity: 1; } /* If PaginationNumbers is true */ .owl-theme .owl-controls .owl-page span.owl-numbers{ height: auto; width: auto; color: #FFF; padding: 2px 10px; font-size: 12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } /* preloading images */ .owl-item.loading{ min-height: 150px; background: url(AjaxLoader.gif) no-repeat center center } #indexDefaultMainContent.content .main-page-text { background-color: #fafafa; float: left; margin-bottom: 30px; padding: 20px; width: 100%; font-size: 13px; } #indexDefaultMainContent .main-page-text p:last-child { padding: 0; } /* Mega Menu CSS */ .header-container #cssmenu ul.nav-child .submenu > a {background-image: none} @media only screen and (min-width:1217px) and (max-width:1600px) { li.submenu:hover .megamenu { background: #FFFFFF none repeat scroll 0 0; box-shadow: 0 4px 2px rgba(0, 0, 0, 0.5); left: 0; padding: 20px; position: absolute; width: 100%; z-index: 1; } #nav .megamenu li > ul, #nav .megamenu li ul a { border-bottom: medium none ; } .main-menu-2 ul.nav-child .submenu > a { background: none; border-bottom: medium none !important; } .header-container .header #nav.main-menu-2 li ul a { border-bottom: medium none; display: inline-block; } #cssmenu .main-menu-2 ul ul li{height:auto;} .megamenu { left: -99999px; position: absolute; } .megamenu > .nav-child > li > a { font-weight: bold; } #cssmenu .main-menu-2 ul ul { border: medium none; left: 0; position: relative; } .nav-maincontainer .inner{position:relative;} li#cssmenu .main-menu-2 ul ul ul {maring-left:0;} #cssmenu .main-menu-2 li .megamenu > ul > li { float: none; height: auto !important; margin: 0 0 0 0; width: 100%; } #cssmenu .nav.main-menu-2 ul ul { list-style: outside none disc; margin-left: 10px; padding-left: 10px; } #cssmenu .nav.main-menu-2 > li { float: left; position: inherit; } .megamenu .unstyled1{ -moz-column-count: 5; -moz-column-gap: 10px; -webkit-column-count: 5; -webkit-column-gap: 10px; column-count: 5; column-gap: 10px; width: 18%; } .megamenu > .nav-child > li { display: inline-block; width: 100%; } } #shoppingCartDefault > div:last-child { margin: 0; } /* ULTIMATE MOBILE MENU FIX - MAXIMUM PRIORITY */ @media screen and (max-width: 1199px) { /* Nuclear option - hide everything with maximum specificity */ html body div.nav-maincontainer div.container div.nav-container div#cssmenu ul#nav, html body div.nav-maincontainer div.container div.nav-container div#cssmenu > ul, html body div#cssmenu ul#nav, html body div#cssmenu > ul, body div#cssmenu ul#nav, body div#cssmenu > ul, div#cssmenu ul#nav, div#cssmenu > ul, #cssmenu ul#nav, #cssmenu > ul, #cssmenu ul, .nav-maincontainer #cssmenu ul, .nav-maincontainer #cssmenu > ul { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; } /* Only show when explicitly opened (works with or without small-screen class) */ html body div#cssmenu.small-screen ul#nav.open, body div#cssmenu.small-screen ul#nav.open, div#cssmenu.small-screen ul#nav.open, #cssmenu.small-screen ul#nav.open, #cssmenu.small-screen > ul.open, /* general open overrides */ html body div#cssmenu ul#nav.open, body div#cssmenu ul#nav.open, div#cssmenu ul#nav.open, #cssmenu ul#nav.open, #cssmenu > ul.open, /* ensure any nested ul opened via JS shows */ #cssmenu ul.open, #cssmenu li > ul.open { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; overflow: visible !important; position: static !important; left: auto !important; } } @media screen and (max-width: 767px) { /* Extra safety for smaller screens */ html body div#cssmenu ul, body div#cssmenu ul, div#cssmenu ul, #cssmenu ul { display: none !important; visibility: hidden !important; } }/* Home Page Enhancements * Lightweight styles for hero, trust badges, quicklinks, how-it-works, testimonials */ .home-hero{background:linear-gradient(180deg,#f7f9fc 0%, #ffffff 100%);padding:48px 0 28px;margin-bottom:24px;text-align:center} .home-hero .hero-title{font-size:28px;line-height:1.25;margin:0 0 8px;font-weight:600} .home-hero .hero-subtitle{font-size:16px;color:#5f6368;margin:0 0 16px} .home-hero .hero-actions{display:inline-flex;gap:12px;flex-wrap:wrap} .home-hero .btn-primary{background:#1a73e8;color:#fff;border:0} .home-hero .btn-primary:hover{background:#1558b3;color:#fff} .home-hero .hero-trust{margin-top:18px;color:#5f6368} .home-hero .hero-trust i{color:#1a73e8;margin-right:6px} .home-quicklinks{margin:8px auto 28px} .home-quicklinks .quick-card{display:block;border:1px solid #e5e7eb;border-radius:8px;padding:14px;text-align:center;text-decoration:none;color:#202124;background:#fff;transition:box-shadow .15s ease, transform .15s ease} .home-quicklinks .quick-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.06);transform:translateY(-2px)} .home-quicklinks .quick-card i{font-size:22px;color:#1a73e8;margin-bottom:8px;display:block} .home-quicklinks .quick-card h3{font-size:16px;margin:4px 0} .home-quicklinks .quick-card p{font-size:13px;color:#5f6368;margin:0} .home-how-it-works{margin:8px auto 28px} .home-how-it-works .section-title{font-size:20px;margin:0 0 14px;font-weight:600;text-align:center} .home-how-it-works .how-card{border:1px solid #e5e7eb;border-radius:8px;padding:16px;text-align:center;background:#fff;height:100%} .home-how-it-works .how-card i{font-size:22px;color:#1a73e8;margin-bottom:8px;display:block} .home-how-it-works .how-card h4{font-size:16px;margin:4px 0} .home-how-it-works .how-card p{font-size:13px;color:#5f6368;margin:0} .home-testimonials{margin:8px auto 36px} .home-testimonials .section-title{font-size:20px;margin:0 0 14px;font-weight:600;text-align:center} .home-testimonials blockquote{border-left:3px solid #1a73e8;background:#f8fafc;margin:0 0 12px;padding:12px 14px;font-size:14px;color:#202124;border-radius:6px} .home-testimonials small{color:#5f6368} @media (max-width:767px){ .home-hero{padding:36px 0 20px} .home-hero .hero-title{font-size:22px} .home-hero .hero-subtitle{font-size:14px} } /* Premium Buttons - sitewide enhancements */ .button, button, .btn, input[type="submit"], input[type="button"], input[type="reset"], .cssButton, .buttonRow > a { border-radius: 10px; padding: 10px 16px; font-weight: 600; line-height: 1.2; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 4px 10px rgba(0,0,0,.08); transition: box-shadow .15s ease, transform .08s ease, background-color .15s ease, color .15s ease; text-decoration: none !important; } .button:hover, button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, .cssButton:hover, .buttonRow > a:hover { box-shadow: 0 8px 18px rgba(0,0,0,.12); transform: translateY(-1px); } .button:active, button:active, .btn:active, input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active, .cssButton:active, .buttonRow > a:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(0,0,0,.10); } .button:focus, button:focus, .btn:focus, input[type="submit"]:focus, input[type="button"]:focus, input[type="reset"]:focus, .cssButton:focus, .buttonRow > a:focus { outline: none; box-shadow: 0 0 0 3px rgba(26,115,232,.25), 0 6px 14px rgba(0,0,0,.12); } /* Icon alignment inside buttons */ .button i, button i, .btn i, .button span > i { margin-right: 8px; vertical-align: -0.1em; } /* Subtle size variants if present */ .button.small, .cssButton.small, .btn-small { padding: 8px 12px; border-radius: 8px } .button.large, .cssButton.large, .btn-large { padding: 12px 18px; border-radius: 12px; font-size: 16px } /* Primary CTA refinement (keeps existing theme colors) */ .button.btn-primary, .btn.btn-primary { color: #fff !important; border-color: rgba(0,0,0,.08); box-shadow: 0 6px 16px rgba(0,0,0,.14); } .button.btn-primary:hover, .btn.btn-primary:hover { box-shadow: 0 10px 24px rgba(0,0,0,.18) } /* Ensure image-based legacy buttons inherit the premium container */ .button img, .cssButton img { vertical-align: middle } /* Car Logos Dialog Styles */ .car-logos-section { margin: 8px auto 28px; text-align: center; } .car-logos-section .section-title { font-size: 20px; margin: 0 0 8px; font-weight: 600; } .car-logos-section .section-subtitle { font-size: 14px; color: #5f6368; margin: 0 0 16px; } /* Dialog Styles */ .car-logos-dialog { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; align-items: center; justify-content: center; } .dialog-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); } .dialog-content { position: relative; background: #fff; border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); max-width: 90vw; max-height: 90vh; width: 1000px; overflow: hidden; animation: dialogSlideIn 0.3s ease-out; } @keyframes dialogSlideIn { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #e5e7eb; background: #f8fafc; } .dialog-header h3 { margin: 0; font-size: 18px; font-weight: 600; color: #202124; } .dialog-close { background: none; border: none; font-size: 18px; color: #5f6368; cursor: pointer; padding: 8px; border-radius: 6px; transition: all 0.15s ease; } .dialog-close:hover { background: #e5e7eb; color: #202124; } .dialog-body { padding: 24px; max-height: 70vh; overflow-y: auto; } /* Car Logos Grid - Desktop: 10 logos per row */ .car-logos-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; align-items: center; justify-items: center; } .logo-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 8px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer; min-height: 80px; justify-content: center; } .logo-item:hover { background: #f8fafc; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .logo-item img { width: 40px; height: 40px; object-fit: contain; margin-bottom: 6px; filter: grayscale(20%); transition: filter 0.2s ease; } .logo-item:hover img { filter: grayscale(0%); } .logo-item span { font-size: 11px; color: #5f6368; font-weight: 500; line-height: 1.2; } /* Tablet: 6 logos per row */ @media (max-width: 1024px) { .dialog-content { width: 90vw; max-width: 800px; } .car-logos-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; } .logo-item { min-height: 70px; padding: 10px 6px; } .logo-item img { width: 35px; height: 35px; } .logo-item span { font-size: 10px; } } /* Mobile: 4 logos per row */ @media (max-width: 768px) { .dialog-content { width: 95vw; max-width: 500px; } .dialog-header { padding: 16px 20px; } .dialog-header h3 { font-size: 16px; } .dialog-body { padding: 20px; } .car-logos-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; } .logo-item { min-height: 65px; padding: 8px 4px; } .logo-item img { width: 30px; height: 30px; } .logo-item span { font-size: 9px; } } /* Small Mobile: 3 logos per row */ @media (max-width: 480px) { .car-logos-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .logo-item { min-height: 60px; padding: 6px 2px; } .logo-item img { width: 28px; height: 28px; } .logo-item span { font-size: 8px; } } /* * Last update: 2025-08-30 00:00 UTC * Author: GaryH * Related: tpl_product_info_display.php, templatecss.css * Summary: Modern, professional product page layout and components */ /* Container spacing */ .centerColumn#productGeneral { padding: 20px 0; } /* Product header */ .product_head { font-size: 24px; font-weight: 600; line-height: 1.3; margin: 10px 0 20px 0; color: #212529; font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; } /* Product title styling */ .product-overview-title { font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 28px !important; font-weight: 700 !important; line-height: 1.2 !important; color: #1a1a1a !important; margin: 0 0 8px 0 !important; text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; letter-spacing: -0.5px !important; } #productName { font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 26px !important; font-weight: 700 !important; line-height: 1.2 !important; color: #1a1a1a !important; margin: 0 0 8px 0 !important; text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; letter-spacing: -0.5px !important; } /* Two-column layout spacing */ .productinfo-container { gap: 24px; display: flex; flex-wrap: wrap; align-items: flex-start; } /* Responsive container for mobile */ @media screen and (max-width: 768px) { .productinfo-container { flex-direction: column !important; gap: 15px !important; } } .productinfo-leftwrapper { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 16px; } .productinfo-rightwrapper { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 20px; } /* Price block */ .product_price { margin: 10px 0 16px 0; } .productprice-amount { font-size: 22px; font-weight: 700; color: #0c7db1; } /* Add to cart CTA buttons (replacing image buttons visually) */ .asrm-cta-group { display: flex; gap: 12px; align-items: center; margin: 12px 0 20px 0; } /* Product listing specific button styles */ #indexProductList .asrm-cta-group { margin: 8px 0; gap: 8px; } #indexProductList .asrm-cta-group .asrm-btn { flex: 1; min-height: 44px; font-size: 14px; padding: 12px 16px; white-space: normal; /* Allow text wrapping in product listings */ text-align: center; line-height: 1.2; } .asrm-btn { display: inline-flex; align-items: center; gap: 8px; padding: 20px 32px; border-radius: 8px; font-weight: 600; font-size: 16px; text-decoration: none; border: 1px solid transparent; white-space: normal; /* Changed from nowrap to normal */ min-height: 48px; /* Ensure consistent button height */ } .asrm-btn span { white-space: normal !important; /* Changed from nowrap to normal */ display: inline-block; text-align: center; line-height: 1.2; } .asrm-btn.primary { background: #28a745; color: #fff; border-color: #1e7e34; } /* Changed to green for download button */ .asrm-btn.secondary { background: #007bff; color: #fff; border-color: #0056b3; } /* Changed to blue for USB button */ .asrm-btn:hover { filter: brightness(0.97); } /* Enhanced Product Details List */ #productDetailsList { margin: 0 0 20px 0; padding: 0; list-style: none; background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } #productDetailsList li { padding: 0; margin: 0; border-bottom: 1px solid rgba(255,255,255,0.5); display: flex; align-items: center; min-height: 50px; transition: all 0.3s ease; } #productDetailsList li:last-child { border-bottom: none; } #productDetailsList li:hover { background: rgba(255,255,255,0.3); transform: translateX(4px); } /* Product Detail Items */ .product-detail-item { display: flex; align-items: center; width: 100%; padding: 12px 20px; gap: 15px; } .product-detail-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #007bff, #0056b3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,123,255,0.3); } .product-detail-content { flex: 1; display: flex; flex-direction: column; gap: 2px; } .product-detail-label { font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; } .product-detail-value { font-size: 16px; font-weight: 700; color: #333; margin: 0; } /* Specific styling for different detail types */ .product-detail-item.model .product-detail-icon { background: linear-gradient(135deg, #28a745, #20c997); } .product-detail-item.manufacturer .product-detail-icon { background: linear-gradient(135deg, #17a2b8, #138496); } .product-detail-item.weight .product-detail-icon { background: linear-gradient(135deg, #ffc107, #e0a800); } .product-detail-item.quantity .product-detail-icon { background: linear-gradient(135deg, #6f42c1, #5a32a3); } /* Legacy support - enhance existing structure */ #productDetailsList li:not(.enhanced) { padding: 15px 20px; color: #333; font-size: 14px; font-weight: 500; position: relative; background: rgba(255,255,255,0.1); } #productDetailsList li:not(.enhanced):before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(135deg, #007bff, #0056b3); } /* Enhanced product details container */ .product_quantity { margin-bottom: 25px; } .enhanced-details { position: relative; } .enhanced-details:before { content: ''; position: absolute; top: -10px; left: 20px; right: 20px; height: 2px; background: linear-gradient(90deg, transparent, #007bff, transparent); border-radius: 1px; } /* Animation for enhanced details */ .enhanced-details li.enhanced { animation: slideInLeft 0.6s ease-out; animation-fill-mode: both; } .enhanced-details li.enhanced:nth-child(1) { animation-delay: 0.1s; } .enhanced-details li.enhanced:nth-child(2) { animation-delay: 0.2s; } .enhanced-details li.enhanced:nth-child(3) { animation-delay: 0.3s; } .enhanced-details li.enhanced:nth-child(4) { animation-delay: 0.4s; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } /* Hover effects for icons */ .product-detail-icon { transition: all 0.3s ease; } .product-detail-item:hover .product-detail-icon { transform: scale(1.1) rotate(5deg); box-shadow: 0 4px 16px rgba(0,123,255,0.4); } .product-detail-item.model:hover .product-detail-icon { box-shadow: 0 4px 16px rgba(40,167,69,0.4); } .product-detail-item.manufacturer:hover .product-detail-icon { box-shadow: 0 4px 16px rgba(23,162,184,0.4); } .product-detail-item.weight:hover .product-detail-icon { box-shadow: 0 4px 16px rgba(255,193,7,0.4); } .product-detail-item.quantity:hover .product-detail-icon { box-shadow: 0 4px 16px rgba(111,66,193,0.4); } /* Mobile responsive */ @media (max-width: 768px) { #productDetailsList { margin: 0 0 15px 0; } .product-detail-item { padding: 10px 15px; gap: 12px; } .product-detail-icon { width: 35px; height: 35px; font-size: 14px; } .product-detail-label { font-size: 11px; } .product-detail-value { font-size: 14px; } /* Reduce animations on mobile for performance */ .enhanced-details li.enhanced { animation: none; } .product-detail-item:hover .product-detail-icon { transform: scale(1.05); } } /* Tabs */ .product_info_tab { margin-top: 24px; } .product_info_tab .tabs { display: flex; gap: 8px; margin: 0 0 12px 0; } .product_info_tab .tabs li a { display: block; padding: 10px 14px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; } .product_info_tab .tabs li.selected a, .product_info_tab .tabs li a:hover { background: #e9f5fb; border-color: #b6e0ef; color: #0c7db1; } .product_info_tab .tabcontent { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 16px; } /* Desktop adjustments - ensure buttons have enough space */ @media (min-width: 768px) { .asrm-btn { min-width: 180px; /* Increased from 160px to accommodate longer Spanish text */ padding: 16px 24px; } .asrm-btn span { white-space: normal !important; /* Changed from nowrap to normal to allow text wrapping */ text-align: center; line-height: 1.2; } } /* Spanish language specific adjustments for longer button text */ html[lang="es"] .asrm-btn, html[lang="es-ES"] .asrm-btn, body[lang="es"] .asrm-btn, body[lang="es-ES"] .asrm-btn { min-width: 200px; /* Extra width for Spanish text */ padding: 16px 20px; } @media (min-width: 768px) { html[lang="es"] .asrm-btn, html[lang="es-ES"] .asrm-btn, body[lang="es"] .asrm-btn, body[lang="es-ES"] .asrm-btn { min-width: 220px; /* Even more width on desktop for Spanish */ padding: 16px 28px; } /* Ensure Spanish version also respects desktop width constraints */ html[lang="es"] .responsive-product-listing, html[lang="es-ES"] .responsive-product-listing, body[lang="es"] .responsive-product-listing, body[lang="es-ES"] .responsive-product-listing { max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important; } /* Spanish-specific container constraints */ html[lang="es"] .centerColumn, html[lang="es"] .center-column, html[lang="es"] #centercontent-wrapper, html[lang="es-ES"] .centerColumn, html[lang="es-ES"] .center-column, html[lang="es-ES"] #centercontent-wrapper, body[lang="es"] .centerColumn, body[lang="es"] .center-column, body[lang="es"] #centercontent-wrapper, body[lang="es-ES"] .centerColumn, body[lang="es-ES"] .center-column, body[lang="es-ES"] #centercontent-wrapper { max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important; } } /* Responsive Product Listing Styles */ .responsive-product-listing { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 100%; padding: 0; margin: 0; } /* Desktop layout constraints - ensure proper width on desktop */ @media (min-width: 768px) { .responsive-product-listing { max-width: 1200px; /* Constrain maximum width on desktop */ margin: 0 auto; /* Center the listing */ padding: 0 20px; /* Add some padding on sides */ } /* Ensure the center column doesn't exceed reasonable width */ .centerColumn, .center-column, #centercontent-wrapper { max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important; } /* Container width constraints for desktop */ .container { max-width: 1200px !important; margin: 0 auto !important; } } .responsive-product-card { display: flex; flex-direction: row; gap: 16px; padding: 16px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #ffffff !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: box-shadow 0.2s ease; } /* Override any existing dark backgrounds with maximum specificity */ .responsive-product-card.productListing-even, .responsive-product-card.productListing-odd, .responsive-product-card.content_box, .responsive-product-card.product-card, .responsive-product-card.product-card-mobile, .product-card.responsive-product-card, .content_box.responsive-product-card { background-color: #ffffff !important; color: #333333 !important; } /* Force white background on product details section */ .responsive-product-card .product-details, .product-details { background-color: transparent !important; color: #333333 !important; } /* Ensure all child elements inherit proper colors */ .responsive-product-card .product-details *, .responsive-product-card .product-info *, .responsive-product-card .product-actions * { background-color: transparent !important; } .responsive-product-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .product-image-container { flex-shrink: 0; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6px; background-color: #f8f9fa; } /* Desktop view improvements */ @media (min-width: 768px) { .product-image-container { width: 156px; /* Increased by 30%: 120px * 1.3 = 156px */ height: 156px; } .product-actions { justify-content: flex-end; /* Align buttons to the right on desktop */ } /* Additional desktop layout constraints for product listings */ .responsive-product-card { max-width: 100%; /* Ensure cards don't exceed container width */ } /* Ensure proper spacing and alignment for desktop */ .product-details { flex: 1; min-width: 0; /* Allow flex item to shrink */ } /* Individual product page image sizing for desktop */ .product_image, .centeredContent { width: 100%; max-width: 400px; /* Increased from default to make images more prominent */ margin: 0 auto; display: flex; justify-content: center; } .product_image img, .centeredContent img, #productGeneral img[alt*="Service"], #productGeneral img[alt*="Manual"], #productGeneral img[alt*="Repair"] { width: 100% !important; height: auto !important; max-width: 400px !important; max-height: 400px !important; object-fit: contain !important; border-radius: 12px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important; } } .product-image-container img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Styling for placeholder images when original fails to load */ .product-image-container img[src*="data:image/svg+xml"] { opacity: 0.7; background-color: #f5f5f5; } /* Product name link styling (moved from inline styles) */ .product-name-link { color: #000040 !important; font-size: 13pt !important; text-decoration: none; } .product-name-link:hover { text-decoration: underline; } /* Product base price styling (moved from inline styles) */ .productBasePrice { font-size: 18pt !important; font-weight: bold !important; color: #B00000 !important; } /* Empty category state styling */ .empty-category-message { display: flex; justify-content: center; align-items: center; min-height: 400px; padding: 40px 20px; text-align: center; } .empty-category-content { max-width: 500px; padding: 40px; background-color: #f8f9fa; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .empty-category-content h2 { font-size: 24px; color: #333; margin-bottom: 16px; font-weight: 600; } .empty-category-content p { font-size: 16px; color: #666; line-height: 1.6; margin-bottom: 24px; } .empty-category-actions { margin-top: 24px; } .empty-category-actions .asrm-btn { padding: 12px 24px; font-size: 16px; border-radius: 8px; text-decoration: none; display: inline-block; transition: all 0.2s ease; } .empty-category-actions .asrm-btn.primary { background-color: #007bff; color: white; border: none; } .empty-category-actions .asrm-btn.primary:hover { background-color: #0056b3; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,123,255,0.3); } /* Footer full width fix - break out of container constraints */ .footer-wrapper, .footer-modern, footer { width: 100vw !important; max-width: 100vw !important; box-sizing: border-box !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; padding-left: 0 !important; padding-right: 0 !important; } /* Ensure footer content has proper padding */ .footer-wrapper > *, .footer-modern > * { padding-left: 15px !important; padding-right: 15px !important; } .product-details { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; } .product-info { flex: 1; } .product-info .product_name { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; line-height: 1.3; } .product-info .product_name a { color: #000040 !important; text-decoration: none; } .product-info .product_name a:hover { text-decoration: underline; } .product-info .product-price { margin: 8px 0; font-size: 18px; font-weight: 700; color: #e91e63 !important; /* Changed to a more vibrant pink/red color */ } .product-info .product-description { margin: 8px 0; font-size: 14px; line-height: 1.4; color: #666 !important; } /* Ensure all text in product cards is readable */ .responsive-product-card * { color: inherit; } .responsive-product-card .product-info * { color: #333333 !important; } .responsive-product-card .product-info .product_name a { color: #000040 !important; } .responsive-product-card .product-info .product-price { color: #e91e63 !important; /* Vibrant pink/red for better visibility */ } .product-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .product-actions .asrm-btn { padding: 8px 16px; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; text-align: center; transition: all 0.2s ease; border: none; cursor: pointer; } .product-actions .asrm-btn:first-child { background-color: #007bff; color: white; } .product-actions .asrm-btn:first-child:hover { background-color: #0056b3; } .product-actions .asrm-btn:last-child { background-color: #28a745; color: white; } .product-actions .asrm-btn:last-child:hover { background-color: #1e7e34; } /* Override white background for buttons in responsive product cards */ .responsive-product-card .product-actions .asrm-btn:first-child { background-color: #007bff !important; color: white !important; } .responsive-product-card .product-actions .asrm-btn:first-child:hover { background-color: #0056b3 !important; } .responsive-product-card .product-actions .asrm-btn:last-child { background-color: #28a745 !important; color: white !important; } .responsive-product-card .product-actions .asrm-btn:last-child:hover { background-color: #1e7e34 !important; } /* Mobile adjustments - optimize for full screen utilization */ @media (max-width: 767px) { .responsive-product-listing { padding: 0 1vw; } .responsive-product-card { flex-direction: column; gap: 12px; padding: 12px; } /* Hide product images on mobile to save space */ .product-image-container { display: none !important; } .product-details { gap: 8px; } .product-info .product_name { font-size: 18px; margin-bottom: 12px; } .product-info .product-price { font-size: 20px; text-align: center; margin: 12px 0; } .product-actions { flex-direction: column; gap: 8px; } .product-actions .asrm-btn { width: 100%; padding: 12px 16px; font-size: 16px; } } @media (max-width: 767px) { /* COMPREHENSIVE LAYOUT FIX - Ensure all containers use consistent full width and padding */ /* Fix Bootstrap grid system causing left column space reservation */ .row { margin-left: 0 !important; margin-right: 0 !important; width: 100vw !important; max-width: 100vw !important; } /* Hide left and right columns completely on mobile */ .left-column, .right-column, .col-md-3.left-column, .col-md-3.right-column { display: none !important; width: 0 !important; padding: 0 !important; margin: 0 !important; } /* Force center column to use full width regardless of Bootstrap classes */ .center-column, .col-md-12.center-column, .col-md-9.center-column, .col-md-6.center-column, .centerColumn, #productGeneral, .centerColumn#productGeneral { width: 100vw !important; max-width: 100vw !important; padding: 0 !important; margin: 0 !important; flex: none !important; position: relative !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; transform: translateX(-3.890625px) !important; /* Counteract the offset */ } /* Reset all major containers to use full viewport width with consistent positioning */ html, body, .container, #container, .main-content-wrapper, #main-content-wrapper, .centercontent-wrapper, #centercontent-wrapper, .centerContent-wrapper, .wrapper, #wrapper, .page-wrapper, #page-wrapper, .content-wrapper, #content-wrapper { width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; position: relative !important; left: 0 !important; right: 0 !important; overflow-x: hidden !important; } /* Ensure all content containers have consistent padding */ .centerColumn, #centerColumn, .centerColumn#productGeneral, .col-md-12.center-column, .center-column, .productinfo-container, .row.productinfo-container, .product_info, .product_info_tab, .centercontent-wrapper, #centercontent-wrapper, .centerContent-wrapper { width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 1vw !important; box-sizing: border-box !important; position: relative !important; left: 0 !important; right: 0 !important; } /* Specific fix for centercontent-wrapper with higher specificity */ .centerColumn #centercontent-wrapper, div#centercontent-wrapper { width: 100vw !important; max-width: 100vw !important; padding-left: 1vw !important; padding-right: 1vw !important; margin: 0 !important; box-sizing: border-box !important; position: relative !important; left: 0 !important; right: 0 !important; } /* Specific fix for product_info divs with higher specificity */ .centerColumn .product_info, .centerColumn .product_info_tab, div.product_info, div.product_info_tab { width: 100vw !important; max-width: 100vw !important; padding: 20px 1vw !important; margin: 15px 0 35px 0 !important; box-sizing: border-box !important; position: relative !important; left: 0 !important; right: 0 !important; transform: translateX(-7.78125px) !important; /* Counteract the offset */ } /* Additional fix for product_info_tab transform */ .centerColumn .product_info_tab, div.product_info_tab { transform: translateX(-14.4375px) !important; /* Counteract the larger offset: -11.109375 - 3.328125 */ } /* MOBILE-ONLY STYLES: Full-width layout for screens 768px and below */ @media (max-width: 768px) { /* Footer consistent padding */ .footer-wrapper, .footer-modern, footer, #footer { width: 100vw !important; max-width: 100vw !important; padding: 20px 1vw !important; margin: 0 !important; box-sizing: border-box !important; position: relative !important; left: 0 !important; right: 0 !important; } /* Fix body and html for full viewport width */ html, body { width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; overflow-x: hidden !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; position: relative !important; left: 0 !important; right: 0 !important; } /* Ensure body uses full viewport width with higher specificity */ body.mobile-optimized, body { width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; overflow-x: hidden !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Fix main container layout for full screen width */ .main-content-wrapper, #main-content-wrapper, .centercontent-wrapper, #centercontent-wrapper, .centerContent-wrapper { width: 100vw !important; max-width: 100vw !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; position: relative !important; left: 0 !important; right: 0 !important; } .container { width: 100vw !important; max-width: 100vw !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* Container adjustments for mobile */ .centerColumn#productGeneral, .col-md-12.center-column, .center-column { width: 100vw !important; max-width: 100vw !important; padding: 10px 1vw !important; margin: 0 !important; position: relative !important; left: 0 !important; right: 0 !important; margin: 0 !important; box-sizing: border-box !important; } .productinfo-leftwrapper, .productinfo-rightwrapper { padding: 12px; margin: 0 0 16px 0; border-radius: 12px; box-sizing: border-box; } /* Fix title truncation - allow full width and proper wrapping */ .product_head, #productGeneral h2 { font-size: 18px !important; margin: 8px 0 16px 0 !important; padding: 0 1vw !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; line-height: 1.3 !important; } /* Ensure all content respects mobile padding but allow full width */ #productGeneral > *, #productGeneral ul, #productGeneral .product_price, #productGeneral .asrm-cta-group, #productGeneral .productprice-amount { padding-left: 1vw !important; padding-right: 1vw !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } /* Override for elements that should be full width */ .product_image { padding-left: 0 !important; padding-right: 0 !important; } /* Fix price display - ensure full visibility */ .productprice-amount, .product_price { width: 100% !important; max-width: 100% !important; overflow: visible !important; text-align: right !important; display: block !important; font-size: 16px !important; font-weight: bold !important; color: #dc2626 !important; margin: 15px 0 !important; } /* Fix button layout - ensure single column on mobile */ .asrm-cta-group { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; grid-template-columns: none !important; margin: 16px 0 !important; } .asrm-btn { width: 100% !important; max-width: 100% !important; padding: 16px 20px !important; font-size: 16px !important; border-radius: 12px !important; text-align: center !important; display: block !important; box-sizing: border-box !important; } /* Fix product image container padding */ .centeredContent { padding: 0 1vw !important; margin: 0 auto !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Fix product_info div to use full width with proper positioning */ .product_info, .product_info_tab { width: 100vw !important; max-width: 100vw !important; padding: 20px 1vw !important; margin: 15px 0 35px 0 !important; box-sizing: border-box !important; position: relative !important; left: 0 !important; right: 0 !important; transform: translateX(0) !important; /* Reset any transforms */ background-color: #ffffff !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; } /* Force all tab-related elements to proper positioning with maximum specificity */ .centerColumn .product_info_tab, .col-md-12 .product_info_tab, div.product_info_tab, .product_info_tab { transform: translateX(3.328125px) !important; /* Counteract the negative offset */ } .product_info_tab .tabs, .product_info_tab .tabcontents, .product_info_tab .tabcontent, .tabcontents, .tabcontent, #description { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; position: relative !important; left: 0 !important; right: 0 !important; transform: translateX(0) !important; /* Reset any transforms */ } /* Ensure tab content has proper padding */ .product_info_tab .tabcontent, .tabcontent, #description { padding: 20px 0 !important; margin: 0 !important; } /* Add wow fadeInUp animation to product_info_tab */ .product_info_tab.wow.fadeInUp { animation-duration: 0.8s !important; animation-fill-mode: both !important; animation-name: fadeInUp !important; } /* Define fadeInUp animation keyframes */ @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* Fix all container divs for full width */ .container, #container, .main-container, #main-container { width: 100vw !important; max-width: 100vw !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; position: relative !important; left: 0 !important; right: 0 !important; } /* Ensure all wrapper divs use full width */ .wrapper, #wrapper, .page-wrapper, #page-wrapper, .content-wrapper, #content-wrapper { width: 100vw !important; max-width: 100vw !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; } /* Force body to use full viewport width with maximum specificity */ html body, html body.mobile, html body[class*="mobile"], html body[id*="mobile"] { width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; overflow-x: hidden !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; position: relative !important; left: 0 !important; right: 0 !important; } /* Fix tab content and related elements */ .product_info_tab .tabs, .product_info_tab .tabcontents, .product_info_tab .tabcontent, .tabcontents, .tabcontent, #description { width: 100vw !important; max-width: 100vw !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; position: relative !important; left: 0 !important; right: 0 !important; } .product_info_tab .tabcontent, .tabcontent, #description { padding: 20px 1vw !important; margin: 0 !important; } /* Add padding and styling to product intro section */ #productIntro, .productIntro, div#productIntro { padding: 16px 1vw !important; margin: 0 0 20px 0 !important; background-color: #f8f9fa !important; border-radius: 8px !important; border-left: 4px solid #007bff !important; box-sizing: border-box !important; font-size: 16px !important; line-height: 1.6 !important; color: #333 !important; } /* Ensure tabs use full width */ .product_info_tab .tabs { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 0 1vw !important; margin: 0 !important; } .product_info_tab .tabs li { flex: 1 !important; min-width: 120px !important; } .product_info_tab .tabs li a { width: 100% !important; text-align: center !important; padding: 12px 8px !important; display: block !important; box-sizing: border-box !important; } /* Mobile layout: stack vertically, full width */ .productinfo-container, .row.productinfo-container { width: 100vw !important; max-width: 100vw !important; flex-direction: column; gap: 16px; padding: 0 !important; margin: 0 !important; position: relative !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } .productinfo-leftwrapper, .productinfo-rightwrapper, .col-md-5.col-sm-5, .col-md-7.col-sm-7.productinfo-rightwrapper.col-xs-12 { width: 100vw !important; max-width: 100vw !important; flex: none !important; padding: 12px 1vw !important; margin: 0 0 16px 0 !important; position: relative !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } /* Product images: 95% width, 1:1 aspect ratio, rounded corners */ .product_image, .centeredContent { width: 95vw; max-width: 95vw; margin: 0 auto; display: flex; justify-content: center; } .product_image img, .listingProductImage, .productimage-large img, .centeredContent img, #productGeneral img[alt*="Service"], #productGeneral img[alt*="Manual"], #productGeneral img[alt*="Repair"] { width: 95vw !important; height: 95vw !important; max-width: 95vw !important; max-height: 95vw !important; object-fit: cover !important; border-radius: 16px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; } /* Additional product images in mobile */ #productAdditionalImages img { width: 18vw !important; height: 18vw !important; object-fit: cover !important; border-radius: 8px !important; margin: 4px !important; } /* Buttons: full width on mobile */ .asrm-cta-group { flex-direction: column; gap: 8px; margin: 16px 0; } .asrm-btn { width: 100%; justify-content: center; padding: 16px 20px; font-size: 16px; border-radius: 12px; } /* Tabs: full width, larger touch targets */ .product_info_tab .tabs { flex-wrap: wrap; gap: 6px; } .product_info_tab .tabs li a { padding: 12px 16px; font-size: 16px; border-radius: 8px; min-width: 120px; text-align: center; } .product_info_tab .tabcontent { padding: 20px; border-radius: 12px; font-size: 16px; line-height: 1.6; } } } /* End of mobile-only styles for screens <= 768px */ /* DESKTOP STYLES: Full-width responsive layout for screens > 768px */ @media (min-width: 769px) { /* Full-width desktop layout */ .productinfo-container, .row.productinfo-container { display: flex; flex-direction: row; gap: 30px; max-width: 100%; width: 100%; margin: 0; padding: 0 30px; } .productinfo-leftwrapper { flex: 0 0 45%; max-width: 45%; } .productinfo-rightwrapper { flex: 1; max-width: 55%; } /* Full-width container for desktop */ .centerColumn, .center-column, #productGeneral { max-width: 100%; width: 100%; margin: 0; padding: 30px; } /* Desktop product info styling - full width */ .product_info, .product_info_tab { max-width: 100%; width: 100%; margin: 20px 0; padding: 40px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } } /* Ensure product dialog/Colorbox and tab content are fully visible on mobile */ @media (max-width: 767px) { /* Do not clip tab contents on small screens */ .product_info_tab .tabcontents, .product_info_tab .tabcontent { overflow: visible !important; max-height: none !important; } /* Colorbox/mobile dialog sizing - full screen utilization */ #cboxOverlay { position: fixed !important; width: 100vw !important; height: 100vh !important; } #colorbox, #cboxWrapper { left: 1vw !important; right: 1vw !important; width: 98vw !important; max-width: 98vw !important; top: 5vh !important; border-radius: 16px !important; overflow: hidden !important; } #cboxContent { box-sizing: border-box !important; width: 100% !important; border-radius: 16px !important; } #cboxLoadedContent { max-height: calc(90vh - 60px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 16px !important; } /* Image in dialog: maintain 1:1 aspect ratio with rounded corners */ #cboxLoadedContent img { width: 100% !important; height: auto !important; max-width: 100% !important; border-radius: 12px !important; object-fit: contain !important; } } /* Category Description Layout Styles */ #indexProductListCatDescription { margin-bottom: 30px; padding: 20px; background-color: #f8f9fa; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } #indexProductListCatDescription .categoryImg { display: flex; align-items: flex-start; justify-content: center; padding-right: 20px; } #indexProductListCatDescription .categoryImg img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .category-description { display: flex; align-items: flex-start; padding-left: 20px; } .category-desc-content { width: 100%; } .category-desc-content p { margin: 0 0 15px 0; line-height: 1.6; color: #333; font-size: 16px; } .category-desc-toggle { background: linear-gradient(135deg, #007bff, #0056b3); color: white; border: none; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0,123,255,0.3); } .category-desc-toggle:hover { background: linear-gradient(135deg, #0056b3, #004085); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,123,255,0.4); } .category-desc-toggle .toggle-icon { transition: transform 0.3s ease; font-size: 12px; } .category-desc-toggle.expanded .toggle-icon { transform: rotate(180deg); } .category-desc-full { animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 1000px; } } /* Mobile responsive styles for category description */ @media (max-width: 768px) { #indexProductListCatDescription { padding: 15px; } #indexProductListCatDescription .categoryImg { padding-right: 0; padding-bottom: 15px; justify-content: center; } .category-description { padding-left: 0; } .category-desc-content p { font-size: 14px; } .category-desc-toggle { font-size: 13px; padding: 6px 12px; } } @media (max-width: 576px) { #indexProductListCatDescription .row { flex-direction: column; } #indexProductListCatDescription .categoryImg, .category-description { width: 100% !important; max-width: 100% !important; flex: none !important; } } /* Breadcrumb Navigation Styles */ .breadcrumb-nav { margin: 20px 0; padding: 0; } .breadcrumb { background: linear-gradient(135deg, #f8f9fa, #e9ecef); border: 1px solid #dee2e6; border-radius: 8px; padding: 12px 20px; margin: 0; list-style: none; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .breadcrumb a { color: #007bff; text-decoration: none; transition: color 0.2s ease; } .breadcrumb a:hover { color: #0056b3; text-decoration: underline; } .breadcrumb .current { color: #6c757d; font-weight: 500; } /* Mobile responsive breadcrumbs */ @media (max-width: 768px) { .breadcrumb { padding: 10px 15px; font-size: 13px; word-break: break-word; } .breadcrumb-nav { margin: 15px 0; } } @media (max-width: 576px) { .breadcrumb { padding: 8px 12px; font-size: 12px; } .breadcrumb-nav { margin: 10px 0; } } /* Shopping Cart Button Styles */ .cart-buttons-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin: 30px 0; padding: 20px; background-color: #f8f9fa; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .cart-button-group { display: flex; gap: 15px; flex-wrap: wrap; } .cart-checkout-group { display: flex; gap: 15px; } /* ASRM Button Base Styles */ .asrm-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.1); text-align: center; white-space: nowrap; } .asrm-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); text-decoration: none; } .asrm-btn:active { transform: translateY(0); } /* Button Variants */ .asrm-btn.primary { background: linear-gradient(135deg, #007bff, #0056b3); color: white; } .asrm-btn.primary:hover { background: linear-gradient(135deg, #0056b3, #004085); color: white; } .asrm-btn.secondary { background: linear-gradient(135deg, #6c757d, #545b62); color: white; } .asrm-btn.secondary:hover { background: linear-gradient(135deg, #545b62, #3d4142); color: white; } .asrm-btn.danger { background: linear-gradient(135deg, #dc3545, #c82333); color: white; } .asrm-btn.danger:hover { background: linear-gradient(135deg, #c82333, #a71e2a); color: white; } /* Button Sizes */ .asrm-btn.small { padding: 8px 12px; font-size: 14px; gap: 6px; } .asrm-btn.large { padding: 16px 28px; font-size: 18px; gap: 10px; } /* Checkout Button Special Styling */ .checkout-btn { font-size: 18px; padding: 16px 32px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,123,255,0.3); } .checkout-btn:hover { box-shadow: 0 6px 20px rgba(0,123,255,0.4); } /* Cart Table Button Styles */ .update-btn, .delete-btn { min-width: 40px; justify-content: center; } .update-btn:hover { background: linear-gradient(135deg, #28a745, #1e7e34); } .delete-btn:hover { background: linear-gradient(135deg, #dc3545, #bd2130); } /* Mobile Responsive Cart Buttons */ @media (max-width: 768px) { .cart-buttons-container { flex-direction: column; align-items: stretch; gap: 15px; } .cart-button-group, .cart-checkout-group { justify-content: center; width: 100%; } .asrm-btn { flex: 1; justify-content: center; min-width: 120px; } .checkout-btn { font-size: 16px; padding: 14px 24px; } } @media (max-width: 576px) { .cart-button-group { flex-direction: column; } .asrm-btn { width: 100%; justify-content: center; } } /* Contact Us Page Optimization */ #contactUsDefault { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Contact Hero Section */ .contact-hero { text-align: center; padding: 60px 0; background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 16px; margin-bottom: 40px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .contact-hero h1 { font-size: 48px; font-weight: 700; color: #2c3e50; margin-bottom: 16px; text-shadow: 0 2px 4px rgba(0,0,0,0.1); } .contact-hero .subtitle { font-size: 20px; color: #6c757d; margin: 0; font-weight: 300; } /* Contact Grid Layout */ .contact-wrapper { margin-bottom: 40px; } .contact-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; } /* Contact Form Styling */ .contact-main.card { background: white; border-radius: 16px; padding: 40px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); border: 1px solid #e9ecef; } #contactUsForm { border: none; padding: 0; margin: 0; } #contactUsForm legend { font-size: 28px; font-weight: 600; color: #2c3e50; margin-bottom: 24px; padding: 0; border: none; width: auto; } /* Form Groups and Fields */ .form-group { margin-bottom: 24px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; } .form-group label.inputLabel { display: block; font-weight: 600; color: #2c3e50; margin-bottom: 8px; font-size: 16px; } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group select, .form-group textarea { width: 100%; padding: 14px 16px; border: 2px solid #e9ecef; border-radius: 8px; font-size: 16px; transition: all 0.3s ease; background-color: #fff; box-sizing: border-box; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0,123,255,0.1); transform: translateY(-2px); } .form-group textarea { resize: vertical; min-height: 120px; font-family: inherit; } /* Help Text */ .help-text { font-size: 14px; color: #6c757d; margin-top: 6px; font-style: italic; } /* Required Symbol */ .alert { color: #dc3545; font-weight: bold; margin-left: 4px; } /* Radio Group */ .radio-group { display: flex; gap: 20px; flex-wrap: wrap; } .radio-group label { display: flex; align-items: center; gap: 8px; font-weight: normal; cursor: pointer; padding: 8px 12px; border-radius: 6px; transition: background-color 0.2s ease; } .radio-group label:hover { background-color: #f8f9fa; } .radio-group input[type="radio"] { width: auto; margin: 0; } /* Consent Checkbox */ .form-group.consent { background-color: #f8f9fa; padding: 16px; border-radius: 8px; border-left: 4px solid #007bff; } .form-group.consent label { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; cursor: pointer; } .form-group.consent input[type="checkbox"] { width: auto; margin: 0; margin-top: 2px; } /* Contact Actions */ .contact-actions { margin-top: 32px; padding-top: 24px; border-top: 1px solid #e9ecef; } .contact-button-group { display: flex; gap: 16px; justify-content: flex-end; align-items: center; } .submit-btn { min-width: 160px; } /* Success Message */ .mainContent.success { background: linear-gradient(135deg, #d4edda, #c3e6cb); color: #155724; padding: 24px; border-radius: 12px; border: 1px solid #c3e6cb; margin-bottom: 24px; font-size: 18px; text-align: center; box-shadow: 0 4px 12px rgba(21,87,36,0.1); } .contact-success-actions { text-align: center; margin-top: 24px; } /* Sidebar Styling */ .contact-sidebar { display: flex; flex-direction: column; gap: 24px; } .contact-sidebar .card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); border: 1px solid #e9ecef; } .contact-sidebar .card h3 { font-size: 20px; font-weight: 600; color: #2c3e50; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #007bff; } .contact-list { list-style: none; padding: 0; margin: 0; } .contact-list li { padding: 12px 0; border-bottom: 1px solid #f1f3f4; display: flex; flex-direction: column; gap: 4px; } .contact-list li:last-child { border-bottom: none; } .contact-list strong { color: #2c3e50; font-weight: 600; } .contact-list a { color: #007bff; text-decoration: none; transition: color 0.2s ease; } .contact-list a:hover { color: #0056b3; text-decoration: underline; } /* Map Card */ .map-card iframe { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } /* Mobile Responsive Design */ @media (max-width: 992px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } .contact-hero h1 { font-size: 36px; } .contact-hero .subtitle { font-size: 18px; } } @media (max-width: 768px) { #contactUsDefault { padding: 0 16px; } .contact-hero { padding: 40px 20px; margin-bottom: 32px; } .contact-hero h1 { font-size: 32px; } .contact-main.card { padding: 24px; } .field-row { grid-template-columns: 1fr; gap: 16px; } .contact-button-group { flex-direction: column-reverse; align-items: stretch; } .asrm-btn { justify-content: center; } .radio-group { flex-direction: column; gap: 12px; } } @media (max-width: 576px) { .contact-hero h1 { font-size: 28px; } .contact-hero .subtitle { font-size: 16px; } .contact-main.card { padding: 20px; } #contactUsForm legend { font-size: 24px; } } /* ======================================== CREATE ACCOUNT PAGE OPTIMIZATION ======================================== */ /* Reset template styles with high specificity */ body #createAcctDefault * { box-sizing: border-box; } /* Override all template form styles */ body #createAcctDefault fieldset, body #createAcctDefault .content, body #createAcctDefault .split-login, body #createAcctDefault .create-account-page { background: transparent !important; border: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; } /* Main Container - Higher specificity to override template styles */ body #createAcctDefault { max-width: 1000px !important; margin: 0 auto !important; padding: 0 20px !important; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; background: transparent !important; } /* Override template container styles */ body #createAcctDefault .create-account-page { margin-top: 0 !important; background: transparent !important; } body #createAcctDefault .create-account-page .content { margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; } /* Enhanced Page Header */ body #createAcctDefault .page-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: white !important; text-align: center !important; padding: 60px 40px !important; border-radius: 20px !important; margin: 30px 0 40px 0 !important; box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3) !important; position: relative !important; overflow: hidden !important; border: none !important; } #createAcctDefault .page-header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } } #createAcctDefault .page-header h1 { font-size: 3.5rem; font-weight: 700; margin: 0 0 16px 0; text-shadow: 0 4px 8px rgba(0,0,0,0.2); position: relative; z-index: 2; } #createAcctDefault .page-header h1 i { margin-right: 16px; font-size: 0.9em; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } #createAcctDefault .page-subtitle { font-size: 1.3rem; opacity: 0.95; font-weight: 300; margin: 0; position: relative; z-index: 2; } /* Login Prompt Enhancement */ #createAcctDefault .login-prompt { margin-bottom: 40px; } #createAcctDefault .login-prompt .alert { background: linear-gradient(135deg, #e3f2fd, #bbdefb); border: 2px solid #2196f3; color: #0d47a1; border-radius: 16px; padding: 20px 24px; display: flex; align-items: center; gap: 16px; font-size: 16px; box-shadow: 0 4px 16px rgba(33, 150, 243, 0.2); transition: all 0.3s ease; } #createAcctDefault .login-prompt .alert:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(33, 150, 243, 0.3); } #createAcctDefault .login-prompt .alert i { font-size: 20px; color: #1976d2; } #createAcctDefault .login-prompt .alert a { color: #0d47a1; font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.3s ease; } #createAcctDefault .login-prompt .alert a:hover { border-bottom-color: #0d47a1; } /* Enhanced Form Container */ body #createAcctDefault .create-account-container { background: white !important; border-radius: 20px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.1) !important; overflow: hidden !important; margin-bottom: 40px !important; border: none !important; } /* Form Header */ #createAcctDefault .form-header { background: linear-gradient(135deg, #f8f9fa, #e9ecef); padding: 30px 40px; border-bottom: 1px solid #e9ecef; } #createAcctDefault .form-header .alert { background: linear-gradient(135deg, #fff3cd, #ffeaa7); border: 2px solid #ffc107; color: #856404; border-radius: 12px; padding: 16px 20px; margin: 0; display: flex; align-items: center; gap: 12px; font-weight: 500; } #createAcctDefault .form-header .alert i { font-size: 18px; color: #f39c12; } /* Enhanced Form Sections */ body #createAcctDefault .form-section { margin: 0 !important; border: none !important; border-radius: 0 !important; background: white !important; transition: all 0.3s ease !important; position: relative !important; box-shadow: none !important; } #createAcctDefault .form-section:hover { background: #fafbfc; } body #createAcctDefault .section-header { background: linear-gradient(135deg, #6c5ce7, #a29bfe) !important; color: white !important; padding: 20px 40px !important; margin: 0 !important; border: none !important; position: relative !important; overflow: hidden !important; } #createAcctDefault .section-header::after { content: ''; position: absolute; top: 0; right: -50px; width: 100px; height: 100%; background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1)); transform: skewX(-15deg); } #createAcctDefault .section-header h3 { margin: 0; font-size: 1.4rem; font-weight: 600; display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; } #createAcctDefault .section-header h3 i { font-size: 1.2em; padding: 8px; background: rgba(255,255,255,0.2); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } /* Form Content */ #createAcctDefault .form-content { padding: 40px; } /* Enhanced Form Controls */ #createAcctDefault .form-group { margin-bottom: 28px; position: relative; } #createAcctDefault .form-label { display: block; font-weight: 600; color: #2c3e50; margin-bottom: 10px; font-size: 15px; position: relative; } #createAcctDefault .form-control { width: 100% !important; padding: 16px 20px; font-size: 16px; line-height: 1.5; color: #2c3e50; background: #fff; border: 2px solid #e9ecef; border-radius: 12px; transition: all 0.3s ease; box-sizing: border-box; font-family: inherit; } #createAcctDefault .form-control:focus { border-color: #6c5ce7; outline: none; box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.1); transform: translateY(-2px); background: #fafbfc; } #createAcctDefault .form-control:hover { border-color: #ced4da; background: #fafbfc; } #createAcctDefault .form-control::placeholder { color: #6c757d; opacity: 0.8; } /* Enhanced Form Rows */ #createAcctDefault .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 0; } #createAcctDefault .form-row .form-group { margin-bottom: 28px; } /* Required Field Styling */ #createAcctDefault .required { color: #e74c3c; font-weight: 700; margin-left: 4px; font-size: 16px; } /* Help Text */ #createAcctDefault .help-text { display: block; margin-top: 8px; font-size: 13px; color: #6c757d; font-style: italic; line-height: 1.4; } /* Enhanced Radio and Checkbox Groups */ #createAcctDefault .radio-group, #createAcctDefault .checkbox-wrapper { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; } #createAcctDefault .radio-label, #createAcctDefault .checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 14px 20px; background: linear-gradient(135deg, #f8f9fa, #e9ecef); border: 2px solid #e9ecef; border-radius: 12px; transition: all 0.3s ease; font-weight: 500; font-size: 15px; min-width: 140px; justify-content: center; position: relative; overflow: hidden; } #createAcctDefault .radio-label::before, #createAcctDefault .checkbox-label::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(108, 92, 231, 0.1), transparent); transition: left 0.5s ease; } #createAcctDefault .radio-label:hover::before, #createAcctDefault .checkbox-label:hover::before { left: 100%; } #createAcctDefault .radio-label:hover, #createAcctDefault .checkbox-label:hover { background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: white; border-color: #6c5ce7; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(108, 92, 231, 0.3); } #createAcctDefault .radio-label i, #createAcctDefault .checkbox-label i { font-size: 18px; color: #6c5ce7; transition: color 0.3s ease; } #createAcctDefault .radio-label:hover i, #createAcctDefault .checkbox-label:hover i { color: white; } /* Selected State */ #createAcctDefault input[type="radio"]:checked + .radio-label, #createAcctDefault input[type="checkbox"]:checked + .checkbox-label { background: linear-gradient(135deg, #00b894, #00cec9); color: white; border-color: #00b894; box-shadow: 0 8px 24px rgba(0, 184, 148, 0.4); } #createAcctDefault input[type="radio"]:checked + .radio-label i, #createAcctDefault input[type="checkbox"]:checked + .checkbox-label i { color: white; } /* Privacy Section Enhancement */ #createAcctDefault .privacy-section .privacy-info { background: linear-gradient(135deg, #dff0d8, #d4edda); border: 2px solid #28a745; border-radius: 12px; padding: 20px; margin-bottom: 20px; font-size: 14px; line-height: 1.6; color: #155724; } /* reCAPTCHA Section */ #createAcctDefault .recaptcha-section { background: linear-gradient(135deg, #f8f9fa, #e9ecef); padding: 30px; text-align: center; border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef; } /* Enhanced Submit Section */ #createAcctDefault .submit-section { background: linear-gradient(135deg, #2d3436, #636e72); color: white; text-align: center; padding: 40px; margin: 0; } #createAcctDefault .submit-section .form-content { padding: 0; } /* Enhanced Submit Button */ #createAcctDefault .buttonRow { margin: 0; padding: 0; } #createAcctDefault .buttonRow input[type="image"], #createAcctDefault .buttonRow input[type="submit"], #createAcctDefault .buttonRow button { background: linear-gradient(135deg, #00b894, #00cec9) !important; color: white !important; border: none !important; padding: 18px 40px !important; font-size: 18px !important; font-weight: 600 !important; border-radius: 50px !important; cursor: pointer !important; transition: all 0.3s ease !important; text-transform: uppercase !important; letter-spacing: 1px !important; min-width: 200px !important; box-shadow: 0 8px 24px rgba(0, 184, 148, 0.3) !important; position: relative !important; overflow: hidden !important; } #createAcctDefault .buttonRow input[type="image"]:hover, #createAcctDefault .buttonRow input[type="submit"]:hover, #createAcctDefault .buttonRow button:hover { background: linear-gradient(135deg, #00a085, #00b7b7) !important; transform: translateY(-3px) !important; box-shadow: 0 12px 32px rgba(0, 184, 148, 0.4) !important; } #createAcctDefault .buttonRow input[type="image"]:active, #createAcctDefault .buttonRow input[type="submit"]:active, #createAcctDefault .buttonRow button:active { transform: translateY(-1px) !important; } /* Section-Specific Color Themes */ #createAcctDefault .personal-section .section-header { background: linear-gradient(135deg, #e17055, #fd79a8); } #createAcctDefault .contact-section .section-header { background: linear-gradient(135deg, #0984e3, #74b9ff); } #createAcctDefault .dob-section .section-header { background: linear-gradient(135deg, #fdcb6e, #e17055); } #createAcctDefault .login-section .section-header { background: linear-gradient(135deg, #6c5ce7, #a29bfe); } #createAcctDefault .preferences-section .section-header { background: linear-gradient(135deg, #00b894, #00cec9); } #createAcctDefault .referral-section .section-header { background: linear-gradient(135deg, #fd79a8, #fdcb6e); } #createAcctDefault .company-section .section-header { background: linear-gradient(135deg, #636e72, #2d3436); } /* Enhanced Select Styling */ #createAcctDefault select.form-control { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236c5ce7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 16px center; background-repeat: no-repeat; background-size: 16px 12px; padding-right: 48px; appearance: none; } /* Mobile Responsive Design */ @media (max-width: 992px) { #createAcctDefault { padding: 0 16px; } #createAcctDefault .page-header { padding: 40px 30px; margin: 20px 0 30px 0; } #createAcctDefault .page-header h1 { font-size: 2.8rem; } #createAcctDefault .form-content { padding: 30px; } #createAcctDefault .form-row { grid-template-columns: 1fr; gap: 0; } } @media (max-width: 768px) { #createAcctDefault .page-header { padding: 30px 20px; border-radius: 16px; } #createAcctDefault .page-header h1 { font-size: 2.4rem; } #createAcctDefault .page-subtitle { font-size: 1.1rem; } #createAcctDefault .form-content { padding: 24px; } #createAcctDefault .section-header { padding: 16px 24px; } #createAcctDefault .section-header h3 { font-size: 1.2rem; } #createAcctDefault .radio-group, #createAcctDefault .checkbox-wrapper { flex-direction: column; gap: 12px; } #createAcctDefault .radio-label, #createAcctDefault .checkbox-label { justify-content: flex-start; min-width: auto; } } @media (max-width: 576px) { #createAcctDefault { padding: 0 12px; } #createAcctDefault .page-header { padding: 24px 16px; margin: 16px 0 24px 0; } #createAcctDefault .page-header h1 { font-size: 2rem; } #createAcctDefault .form-content { padding: 20px; } #createAcctDefault .form-control { padding: 14px 16px; font-size: 15px; } #createAcctDefault .submit-section { padding: 30px 20px; } #createAcctDefault .buttonRow input[type="image"], #createAcctDefault .buttonRow input[type="submit"], #createAcctDefault .buttonRow button { padding: 16px 32px !important; font-size: 16px !important; min-width: 180px !important; } } /* Animation Enhancements */ #createAcctDefault .form-section { animation: slideInUp 0.6s ease-out; animation-fill-mode: both; } #createAcctDefault .form-section:nth-child(1) { animation-delay: 0.1s; } #createAcctDefault .form-section:nth-child(2) { animation-delay: 0.2s; } #createAcctDefault .form-section:nth-child(3) { animation-delay: 0.3s; } #createAcctDefault .form-section:nth-child(4) { animation-delay: 0.4s; } #createAcctDefault .form-section:nth-child(5) { animation-delay: 0.5s; } #createAcctDefault .form-section:nth-child(6) { animation-delay: 0.6s; } #createAcctDefault .form-section:nth-child(7) { animation-delay: 0.7s; } #createAcctDefault .form-section:nth-child(8) { animation-delay: 0.8s; } @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Focus and Accessibility Enhancements */ #createAcctDefault .form-control:focus, #createAcctDefault .radio-label:focus-within, #createAcctDefault .checkbox-label:focus-within { outline: 3px solid rgba(108, 92, 231, 0.3); outline-offset: 2px; } /* Error and Success States */ #createAcctDefault .form-group.has-error .form-control { border-color: #e74c3c; background: #fdf2f2; } #createAcctDefault .form-group.has-error .help-text { color: #e74c3c; font-weight: 500; } #createAcctDefault .form-group.has-success .form-control { border-color: #00b894; background: #f0fff4; } /* Loading States */ #createAcctDefault .form-control:disabled { background: #f8f9fa; opacity: 0.7; cursor: not-allowed; } /* Message Stack Styling */ #createAcctDefault .messageStackError, #createAcctDefault .messageStackWarning, #createAcctDefault .messageStackSuccess { margin: 20px 0; padding: 16px 20px; border-radius: 12px; font-weight: 500; } #createAcctDefault .messageStackError { background: linear-gradient(135deg, #fdf2f2, #fce4ec); color: #c62828; border: 2px solid #e74c3c; } #createAcctDefault .messageStackWarning { background: linear-gradient(135deg, #fff8e1, #ffecb3); color: #f57f17; border: 2px solid #ffc107; } #createAcctDefault .messageStackSuccess { background: linear-gradient(135deg, #f0fff4, #e8f5e8); color: #2e7d32; border: 2px solid #4caf50; } /* Product Rating Section */ .product-rating-section { margin: 16px 0 20px 0; padding: 16px 20px; background: linear-gradient(135deg, #fff9e6, #fffbf0); border: 1px solid #ffd700; border-radius: 12px; box-shadow: 0 4px 12px rgba(255, 215, 0, 0.15); position: relative; overflow: hidden; } .product-rating-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #ffd700, #ffb300, #ffd700); } .star-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .star-rating .stars { color: #ffd700; font-size: 22px; letter-spacing: 2px; text-shadow: 0 3px 6px rgba(255, 215, 0, 0.4), 0 2px 4px rgba(0,0,0,0.1); filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5)); font-weight: bold; position: relative; } .star-rating .stars::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%); pointer-events: none; } .star-rating .rating-text { font-size: 16px; font-weight: 700; color: #333; background: linear-gradient(135deg, #ffd700, #ff8c00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 1px 2px rgba(0,0,0,0.1); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .customer-count { margin-top: 6px; } .customer-count .customer-text { font-size: 14px; color: #2e7d32; font-weight: 600; background: linear-gradient(135deg, #4caf50, #2e7d32); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; position: relative; } .customer-count .customer-text::before { content: '✓'; color: #4caf50; font-weight: bold; margin-right: 6px; } /* Responsive adjustments for rating section */ @media (max-width: 768px) { .product-rating-section { margin: 10px 0 12px 0; padding: 10px 0; } .star-rating .stars { font-size: 16px; } .star-rating .rating-text { font-size: 13px; } .customer-count .customer-text { font-size: 12px; } } /* Related Products Section Styling */ .categoryRelated { margin: 40px 0; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); padding: 0; overflow: hidden; } .related-products-section { padding: 30px; } .related-products-title { font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; font-size: 24px; font-weight: 600; color: #2c3e50; margin: 0 0 25px 0; padding: 0 0 15px 0; border-bottom: 2px solid #e9ecef; display: flex; align-items: center; gap: 10px; } .related-products-title i { color: #0c7db1; font-size: 22px; } .related-products-grid { margin: 0; } /* Related Products Grid Items */ .centerBoxContentsRelated { text-align: center; padding: 15px; background: #fafbfc; border: 1px solid #e9ecef; border-radius: 8px; margin: 5px; transition: all 0.3s ease; box-sizing: border-box; } .centerBoxContentsRelated:hover { background: #f8f9fa; border-color: #0c7db1; box-shadow: 0 4px 12px rgba(12, 125, 177, 0.15); transform: translateY(-2px); } .centerBoxContentsRelated img { max-width: 100%; height: auto; border-radius: 6px; margin-bottom: 10px; transition: transform 0.3s ease; } .centerBoxContentsRelated:hover img { transform: scale(1.05); } .related-product-name { display: block; font-weight: 600; color: #2c3e50; text-decoration: none; line-height: 1.4; margin: 8px 0; font-size: 14px; } .related-product-name:hover { color: #0c7db1; text-decoration: none; } .related-product-price { font-weight: 700; color: #0c7db1; font-size: 16px; } /* Responsive adjustments for related products */ @media (max-width: 768px) { .categoryRelated { margin: 20px 0; border-radius: 8px; } .related-products-section { padding: 20px 15px; } .related-products-title { font-size: 20px; margin-bottom: 20px; } .centerBoxContentsRelated { margin: 3px; padding: 12px; } .related-product-name { font-size: 13px; } .related-product-price { font-size: 15px; } } /* * Last update: 2025-01-27 12:00:00 * Author: GaryH * Related: tpl_shopping_cart_default.php, templatecss.css * Summary: Modern, responsive shopping cart optimization */ /* MODERN SHOPPING CART STYLES */ /* Cart Container */ .modern-cart-container { max-width: 1200px; margin: 0 auto; padding: 20px; background: #fff; } /* Cart Header */ .cart-header { background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 12px; padding: 20px; margin-bottom: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .cart-header-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; } .cart-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 28px; font-weight: 600; color: #333; } .cart-title i { color: #007bff; font-size: 24px; } .cart-count { background: #007bff; color: white; padding: 4px 12px; border-radius: 20px; font-size: 14px; font-weight: 500; margin-left: 10px; } .continue-shopping-btn { background: #28a745; color: white; padding: 10px 20px; border-radius: 25px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; } .continue-shopping-btn:hover { background: #218838; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(40,167,69,0.3); color: white; text-decoration: none; } /* Cart Messages */ .cart-messages { margin-bottom: 20px; } .cart-messages .alert { border-radius: 8px; padding: 15px; margin-bottom: 15px; } /* Enhanced Table Styling */ .table-responsive { background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; margin-bottom: 30px; } #cartContentsDisplay { margin: 0; border: none; } #cartContentsDisplay th { background: linear-gradient(135deg, #343a40, #495057); color: white; font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; padding: 18px 15px; border: none; } #cartContentsDisplay td { padding: 20px 15px; vertical-align: middle; border-bottom: 1px solid #f0f0f0; } #cartContentsDisplay tr:last-child td { border-bottom: none; } #cartContentsDisplay tr:hover { background: #f8f9fa; } /* Product Display */ .cartProductDisplay { display: flex; align-items: center; gap: 15px; } #cartImage img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } #product_name a { font-weight: 600; color: #333; text-decoration: none; font-size: 16px; line-height: 1.4; } #product_name a:hover { color: #007bff; text-decoration: underline; } .alert-text { background: #dc3545; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; margin-top: 8px; display: inline-block; } .cartAttribsList { margin-top: 10px; } .cartAttribsList ul { list-style: none; padding: 0; margin: 0; } .cartAttribsList li { background: #f8f9fa; padding: 6px 10px; margin: 4px 0; border-radius: 4px; font-size: 13px; color: #666; } /* Price Display */ .cartUnitDisplay, .cartTotalDisplay { font-weight: 600; font-size: 16px; color: #28a745; } /* Quantity Controls */ .cartQuantity { text-align: center; } .cartQuantity input[type="text"] { width: 60px; padding: 8px; border: 2px solid #e9ecef; border-radius: 6px; text-align: center; font-weight: 600; transition: border-color 0.3s ease; } .cartQuantity input[type="text"]:focus { border-color: #007bff; outline: none; box-shadow: 0 0 0 3px rgba(0,123,255,0.1); } /* Action Buttons */ .update-btn, .delete-btn { padding: 8px 12px; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .update-btn { background: #17a2b8; color: white; } .update-btn:hover { background: #138496; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(23,162,184,0.3); } .delete-btn { background: #dc3545; color: white; } .delete-btn:hover { background: #c82333; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(220,53,69,0.3); color: white; text-decoration: none; } /* Cart Summary */ .cart-summary { background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 12px; margin-bottom: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; } .cart-summary-content { padding: 25px; } .summary-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid rgba(0,0,0,0.1); } .summary-row:last-child { border-bottom: none; } .summary-row.subtotal { font-size: 22px; font-weight: 700; color: #333; background: linear-gradient(135deg, #28a745, #20c997); margin: -25px -25px 20px -25px; padding: 20px 25px; color: white; } .summary-label { font-weight: 600; } .summary-value { font-weight: 700; } .summary-additional { margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.1); } /* Legacy Cart Subtotal - Keep for compatibility */ #cartSubTotal { background: linear-gradient(135deg, #f8f9fa, #e9ecef); padding: 20px; border-radius: 12px; text-align: right; font-size: 20px; font-weight: 700; color: #333; margin-bottom: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } /* Cart Buttons Container */ .cart-buttons-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; padding: 20px; background: #f8f9fa; border-radius: 12px; margin-bottom: 30px; } .cart-button-group, .cart-checkout-group { display: flex; gap: 15px; flex-wrap: wrap; } .checkout-btn { background: linear-gradient(135deg, #28a745, #20c997); color: white; padding: 15px 30px; font-size: 18px; font-weight: 600; border-radius: 25px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(40,167,69,0.3); display: flex; align-items: center; gap: 10px; } .checkout-btn:hover { background: linear-gradient(135deg, #218838, #1ea080); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(40,167,69,0.4); color: white; text-decoration: none; } .checkout-btn i { font-size: 20px; } /* Empty Cart Styling */ #cartEmptyText { text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 12px; color: #666; font-size: 24px; margin-bottom: 30px; } /* MOBILE RESPONSIVE DESIGN */ @media (max-width: 768px) { .modern-cart-container { padding: 15px; } .cart-header-content { flex-direction: column; text-align: center; } .cart-title { font-size: 24px; flex-direction: column; gap: 8px; } .cart-count { margin-left: 0; } /* Mobile Table - Stack Layout */ .table-responsive { overflow-x: auto; } #cartContentsDisplay { min-width: 600px; } #cartContentsDisplay th, #cartContentsDisplay td { padding: 12px 8px; font-size: 14px; } .cartProductDisplay { flex-direction: column; gap: 10px; text-align: center; } #cartImage img { width: 60px; height: 60px; } .cart-buttons-container { flex-direction: column; text-align: center; } .cart-button-group, .cart-checkout-group { justify-content: center; width: 100%; } .checkout-btn { width: 100%; justify-content: center; padding: 18px; } #cartSubTotal { text-align: center; font-size: 18px; } } @media (max-width: 480px) { .cart-title { font-size: 20px; } .continue-shopping-btn { width: 100%; justify-content: center; } /* Ultra-mobile: Card-based layout */ #cartContentsDisplay, .table-responsive { display: none; } .cart-items-mobile { display: block; } } /* Card-based mobile layout */ .cart-items-mobile { display: none; } @media (max-width: 480px) { .cart-items-mobile { display: block; } .cart-item-mobile { background: white; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .cart-item-mobile-header { display: flex; gap: 15px; margin-bottom: 15px; } .cart-item-mobile-image img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; } .cart-item-mobile-info h3 { margin: 0 0 10px 0; font-size: 16px; font-weight: 600; } .cart-item-mobile-details { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; } .cart-item-mobile-detail { text-align: center; } .cart-item-mobile-detail label { display: block; font-size: 12px; color: #666; margin-bottom: 5px; text-transform: uppercase; font-weight: 600; } .cart-item-mobile-detail .value { font-size: 16px; font-weight: 600; color: #333; } .cart-item-mobile-actions { display: flex; gap: 10px; justify-content: center; } } /* Animation and Transitions */ .cart-item-mobile, #cartContentsDisplay tr, .cart-buttons-container { animation: fadeInUp 0.5s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Loading States */ .cart-loading { text-align: center; padding: 40px; color: #666; } .cart-loading i { font-size: 24px; animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Success/Error States */ .cart-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; padding: 15px; border-radius: 8px; margin-bottom: 20px; } .cart-error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; padding: 15px; border-radius: 8px; margin-bottom: 20px; } /* * Modern Search Page Design * Last updated: 2025-09-13 * Author: Assistant * Summary: Comprehensive modern design for product search pages with improved UX */ /* Main search results container */ #advSearchResultsDefault { background: #ffffff; border-radius: 12px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05); padding: 30px; margin: 20px 0; } /* Search page header */ #advSearchResultsDefault header { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #e74c3c; } #advSearchResultsDefault header h1 { color: #2c3e50 !important; font-size: 28px !important; font-weight: 600 !important; margin: 0 !important; padding: 0 !important; background: none !important; text-shadow: none !important; display: flex; align-items: center; gap: 15px; } #advSearchResultsDefault header h1::before { content: "🔍"; font-size: 24px; } /* Search summary section */ .search-summary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px 25px; border-radius: 10px; color: white; margin-bottom: 30px; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); } .search-summary .results-count { font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 10px; } .search-summary .results-count strong { font-weight: 700; } .search-summary .results-count em { background: rgba(255, 255, 255, 0.2); padding: 2px 8px; border-radius: 4px; font-style: normal; font-weight: 600; } /* No results section */ .no-results { text-align: center; padding: 60px 20px; background: #f8f9fa; border-radius: 12px; border: 2px dashed #dee2e6; } .no-results-icon { font-size: 64px; margin-bottom: 20px; opacity: 0.5; } .no-results h3 { color: #495057; font-size: 24px; font-weight: 600; margin-bottom: 10px; } .no-results p { color: #6c757d; font-size: 16px; margin-bottom: 30px; } /* Search suggestions */ .search-suggestions { background: white; padding: 25px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); text-align: left; max-width: 500px; margin: 0 auto; } .search-suggestions h4 { color: #495057; font-size: 18px; font-weight: 600; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .search-suggestions ul { list-style: none; padding: 0; margin: 0; } .search-suggestions li { padding: 8px 0; color: #6c757d; font-size: 15px; position: relative; padding-left: 25px; } .search-suggestions li::before { content: "✓"; position: absolute; left: 0; color: #28a745; font-weight: bold; } /* Search results grid */ .search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin: 30px 0; } /* Product listing improvements */ .productListing-data { background: white; border-radius: 12px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); padding: 20px; transition: all 0.3s ease; border: 1px solid #f1f3f4; } .productListing-data:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); border-color: #007bff; } .productListing-data .listingProductImage { text-align: center; margin-bottom: 15px; border-radius: 8px; overflow: hidden; } .productListing-data .listingProductImage img { max-width: 100%; height: auto; border-radius: 8px; transition: transform 0.3s ease; } .productListing-data:hover .listingProductImage img { transform: scale(1.05); } .productListing-data .product_name { font-size: 16px !important; font-weight: 600 !important; color: #2c3e50 !important; margin-bottom: 10px !important; line-height: 1.4 !important; } .productListing-data .product_name a { color: #2c3e50 !important; text-decoration: none !important; } .productListing-data .product_name a:hover { color: #007bff !important; } .productListing-data .short-description { color: #6c757d; font-size: 14px; line-height: 1.5; margin-bottom: 15px; } .productListing-data .productlisting_price { font-size: 18px !important; font-weight: 700 !important; color: #e74c3c !important; margin-bottom: 15px !important; } .productListing-data .productlisting_btn { text-align: center; } .productListing-data .productlisting_btn a, .productListing-data .productlisting_btn input { background: linear-gradient(135deg, #007bff, #0056b3) !important; color: white !important; padding: 10px 20px !important; border: none !important; border-radius: 25px !important; font-weight: 600 !important; font-size: 14px !important; text-decoration: none !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; transition: all 0.2s ease !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3) !important; } .productListing-data .productlisting_btn a:hover, .productListing-data .productlisting_btn input:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4) !important; } /* Pagination styling */ .navSplitPagesResult { background: #f8f9fa; padding: 20px; border-radius: 10px; text-align: center; margin: 30px 0; border: 1px solid #e9ecef; } .navSplitPagesLinks { margin-top: 15px; } .navSplitPagesLinks a { display: inline-block; padding: 8px 12px; margin: 0 4px; background: white; color: #007bff; text-decoration: none; border-radius: 6px; border: 1px solid #dee2e6; font-weight: 500; transition: all 0.2s ease; } .navSplitPagesLinks a:hover { background: #007bff; color: white; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3); } .navSplitPagesLinks .current { background: #007bff; color: white; padding: 8px 12px; margin: 0 4px; border-radius: 6px; font-weight: 600; } /* Advanced search form improvements */ #advSearchDefault { background: #ffffff; border-radius: 12px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05); padding: 30px; margin: 20px 0; } #advSearchDefault .content { background: #f8f9fa; padding: 25px; border-radius: 10px; border: 1px solid #e9ecef; } #advSearchDefault .form-group { margin-bottom: 20px; } #advSearchDefault label { font-weight: 600; color: #495057; margin-bottom: 8px; display: block; } #advSearchDefault input[type="text"], #advSearchDefault select { width: 100%; padding: 12px 15px; border: 1px solid #dee2e6; border-radius: 8px; font-size: 14px; background: white; transition: border-color 0.2s ease; } #advSearchDefault input[type="text"]:focus, #advSearchDefault select:focus { border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); outline: none; } #advSearchDefault .search-button { background: linear-gradient(135deg, #28a745, #20c997); color: white; padding: 12px 30px; border: none; border-radius: 25px; font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3); } #advSearchDefault .search-button:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4); } /* Mobile responsive */ @media screen and (max-width: 768px) { #advSearchResultsDefault { padding: 20px; margin: 10px; border-radius: 8px; } #advSearchResultsDefault header h1 { font-size: 22px !important; } .search-results { grid-template-columns: 1fr; gap: 15px; } .productListing-data { padding: 15px; } .search-summary { padding: 15px 20px; } .no-results { padding: 40px 15px; } .no-results-icon { font-size: 48px; } } @media screen and (max-width: 576px) { .search-summary .results-count { flex-direction: column; gap: 8px; text-align: center; } .productListing-data .productlisting_btn a, .productListing-data .productlisting_btn input { width: 100%; padding: 12px !important; } }/* * Modern Account Page Design * Last updated: 2025-09-13 * Author: Assistant * Summary: Modern, clean design for My Account Information page - removes purple styling and aligns with overall design */ /* Remove ugly purple headings and replace with modern design */ #accountDefault .my_accountpage { background: #ffffff; border-radius: 12px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05); padding: 30px; margin: 20px 0; } #accountDefault .my_accountpage header h1 { color: #2c3e50 !important; font-size: 28px !important; font-weight: 600 !important; margin: 0 0 25px 0 !important; padding: 0 !important; border-bottom: 2px solid #e74c3c; padding-bottom: 15px; background: none !important; text-shadow: none !important; } /* Remove any purple styling from headings */ #accountDefault h1, #accountDefault h2, #accountDefault h3, #accountDefault h4 { background: none !important; color: #2c3e50 !important; text-shadow: none !important; border: none !important; } /* Modern order history table */ #accountDefault #prevOrders { border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin: 25px 0; } #accountDefault #prevOrders caption h4 { background: #f8f9fa; color: #495057 !important; font-size: 18px !important; font-weight: 600 !important; padding: 15px 20px; margin: 0 !important; border-bottom: 1px solid #dee2e6; } #accountDefault #prevOrders .allorder_text { float: right; font-size: 14px; font-weight: 400; } #accountDefault #prevOrders .allorder_text a { color: #007bff; text-decoration: none; font-weight: 500; } #accountDefault #prevOrders .allorder_text a:hover { color: #0056b3; text-decoration: underline; } /* Table headers */ #accountDefault #prevOrders .tableHeading { background: #007bff; color: white; } #accountDefault #prevOrders .tableHeading th { padding: 12px 15px; font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } /* Table rows */ #accountDefault #prevOrders .user-accountinfo td { padding: 12px 15px; border-bottom: 1px solid #f1f3f4; font-size: 14px; color: #495057; } #accountDefault #prevOrders .user-accountinfo:nth-child(even) { background: #f8f9fa; } #accountDefault #prevOrders .user-accountinfo:hover { background: #e3f2fd; transition: background-color 0.2s ease; } /* Status badges */ #accountDefault .status-badge { padding: 4px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } #accountDefault .status-badge.status-pending { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; } #accountDefault .status-badge.status-processing { background: #cce5ff; color: #004085; border: 1px solid #74b9ff; } #accountDefault .status-badge.status-delivered, #accountDefault .status-badge.status-completed { background: #d4edda; color: #155724; border: 1px solid #00b894; } #accountDefault .status-badge.status-cancelled { background: #f8d7da; color: #721c24; border: 1px solid #e17055; } /* Download links styling */ #accountDefault #prevOrders a[style*="color:red"] { color: #ffffff !important; font-weight: 600 !important; text-decoration: none !important; padding: 6px 12px !important; background: linear-gradient(135deg, #28a745, #20c997) !important; border-radius: 20px !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3) !important; transition: all 0.2s ease !important; display: inline-block !important; } #accountDefault #prevOrders a[style*="color:red"]:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(40, 167, 69, 0.4) !important; } /* Account Links Section */ #accountDefault #accountLinksWrapper { background: #f8f9fa; border-radius: 8px; padding: 25px; margin: 30px 0; border: 1px solid #e9ecef; } #accountDefault #accountLinksWrapper h4 { color: #343a40 !important; font-size: 20px !important; font-weight: 600 !important; margin: 0 0 20px 0 !important; padding: 0 !important; border-bottom: 1px solid #dee2e6; padding-bottom: 10px; } /* Modern account navigation list */ #accountDefault #myAccountGen { list-style: none; padding: 0; margin: 0; } #accountDefault #myAccountGen li { margin: 0 0 12px 0; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } #accountDefault #myAccountGen li a { display: flex; align-items: center; padding: 15px 20px; background: white; color: #495057; text-decoration: none; font-size: 15px; font-weight: 500; border-left: 4px solid #007bff; transition: all 0.2s ease; } #accountDefault #myAccountGen li a:hover { background: #007bff; color: white; transform: translateX(3px); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2); } #accountDefault #myAccountGen li a i.fa { margin-right: 15px; width: 18px; font-size: 16px; opacity: 0.8; } #accountDefault #myAccountGen li a:hover i.fa { opacity: 1; } /* Gift Voucher Section */ #accountDefault #sendSpendWrapper { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; padding: 25px; margin: 30px 0; color: white; } /* Mobile responsive adjustments */ @media screen and (max-width: 768px) { #accountDefault .my_accountpage { padding: 20px; margin: 10px; border-radius: 8px; } #accountDefault .my_accountpage header h1 { font-size: 22px !important; } #accountDefault #prevOrders { font-size: 12px; } #accountDefault #prevOrders .tableHeading th { padding: 8px 6px; font-size: 12px; } #accountDefault #prevOrders .user-accountinfo td { padding: 8px 6px; font-size: 12px; } #accountDefault #accountLinksWrapper { padding: 20px; } #accountDefault #myAccountGen li a { padding: 12px 15px; font-size: 14px; } } /* Clear any existing purple/ugly styling */ #accountDefault .purple-header, #accountDefault .purple-bg, #accountDefault [style*="purple"], #accountDefault [style*="#800080"], #accountDefault [style*="#9966CC"] { background: none !important; color: #2c3e50 !important; } /* Ensure tables are responsive */ #accountDefault .table-responsive { border-radius: 8px; overflow: hidden; } @media screen and (max-width: 576px) { #accountDefault .table-responsive { font-size: 11px; } #accountDefault #prevOrders .allorder_text { float: none; display: block; margin-top: 10px; } }