/********************** * * styles-responsive.css * * OCS v3.0 website responsive styles * set all screen breakpoints * * !! MUST BE THE LAST CSS FILE !! * * RichardG * 08.28.2013 * */ /***** Responsive CSS backgrounds - http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios http://getbootstrap.com/2.3.2/scaffolding.html#responsive http://getuikit.com/docs/components.html - USE THIS **/ /***************************************************************************************************************** Desktops and Tablets ******************************************************************************************************************/ @media (min-width:960px) and (max-width:1199px) { #screen {background:pink} #screen:after {content:"960px to 1199px - Desktops and Tablets - (landscape)"} /**************************** SITE HEADER ********************************/ /* header */ #social-links, #logo, #search-box {text-align:left} #members {text-align:right} #SearchPhrase {width:78%} #header-info {text-align:center} h1.phone {background:none;margin:0;padding:0} #cartQty {font-size:16px} /* site-menu */ .dn-spacer {width:90px} /* Daisy Nav */ ul#main-categories {left:-50px;width:940px} ul#specials-menu {left:0} li.child-cat {float:left!important;width:30%} ul#specials-menu a {width:92%} /**************************** SITE HEADER ********************************/ /***************************** HOME PAGE *********************************/ /* why OCS */ #why-ocs li {margin:0 48px !important} /* Promo banner on home page */ #promo-banner img {width:962px;height:173px;max-width:962px;margin-left:-14px} /* Bootstrap + responsive override */ /***************************** HOME PAGE *********************************/ /*********************** PRODUCT DETAILS PAGE ****************************/ #bx-extra {width:340px} /* related products on product details page */ #related-products {height:440px} .related-product-item:nth-child(4n+2) {border-right:none} .related-product-item {width:20%} .product-detail-col1 { padding-right:30px} /*********************** PRODUCT DETAILS PAGE ****************************/ /************************* PRODUCT LIST PAGE *****************************/ select#ddlSort, select#ddlSort2 {width:116px} select#ddlPager, select#ddlPager2 {width:60px} .pages {border:0} .list-col2 {padding:0;width:40%} .list-col3 {background:none;line-height:32px;height:32px;padding:0 4px;text-align:center} .list-col4 {padding:0 12px 0 0} .list-product-name {display:block;margin:0 0 2px 0} .list-product-description {display:block} /************************* PRODUCT LIST PAGE *****************************/ /************************* CAR FIT GUIDE PAGE ****************************/ .fg-item {margin:5px !important;width:21.1% !important} /************************* CAR FIT GUIDE PAGE ****************************/ /************************** SHOPPING CART PAGE ***************************/ .cross-shop-product-price, .cross-shop-product-buy {float:none;margin:0} /************************** SHOPPING CART PAGE ***************************/ /************************* MANUFACTURERS PAGE ****************************/ td.mfg-item {float:left} td.mfg-item-thumbs {width:180px} /************************* MANUFACTURERS PAGE ****************************/ /************************** TESTIMONIALS PAGE ****************************/ .p-pad {width:260px} /************************** TESTIMONIALS PAGE ****************************/ /**************************** NEWSLETTER PAGE ****************************/ #newsletter-register {text-align:center} /**************************** NEWSLETTER PAGE ****************************/ /************************ CAR-SPECIFIC LIST PAGE *************************/ p.carspecificlist {margin:12px 0 0 0;width:50%} span.carspecificlist-name {width:80%} /************************ CAR-SPECIFIC LIST PAGE *************************/ /**************************** ABOUT US PAGE ******************************/ #three-images img {width:32%} /**************************** ABOUT US PAGE ******************************/ /************************** ACCOUNT PAGES *******************************/ #frmEditEmail .form-action, #frmEditPassword .form-action {margin-top:12px;text-align:right} /************************** ACCOUNT PAGES *******************************/ } /******************************************************************************************************************/ /****************************************************************************************************************** Portrait tablet to landscape and desktop ******************************************************************************************************************/ @media (min-width:768px) and (max-width:979px) { #screen {background:black} #screen:after {content:"768px to 979px - Tablets - (portrait)"} /**************************** SITE HEADER ********************************/ /* header */ #social-links, #logo, #search-box {text-align:left} #members {text-align:right} #SearchPhrase {width:70%} #header-info {text-align:center} h1.phone {background:none;margin:0;padding:0} #cartQty {font-size:16px} /* site-menu */ li.home-link {display:none} a.menu-link {font-size:12px!important} .dn-spacer {width:8px} /* Daisy Nav */ ul#main-categories, ul#specials-menu {left:0} ul#main-categories {width:724px} li.child-cat {float:left!important;width:28%} ul#specials-menu a {width:90%} /**************************** SITE HEADER ********************************/ /**************************** SITE FOOTER ********************************/ #sub-footer ul li{text-align:center;padding:0 2px} /**************************** SITE FOOTER ********************************/ /***************************** HOME PAGE *********************************/ /* why OCS */ #why-ocs {height:200px} #why-ocs li {margin:0 28px !important} /* promo banner */ #promo-banner img {width:746px;height:134px;max-width:746px;margin-left:-14px} /* Bootstrap + responsive override */ /***************************** HOME PAGE *********************************/ /*********************** PRODUCT DETAILS PAGE ****************************/ .MagicZoomBigImageCont {display:none} /* Magic Zoom [DISABLED] */ #product-detail-images {/*height:200px;*/height:260px;min-height:200px} #outer-zoomer[id], #outer-zoomer {/*height:120px;*/height:260px} #zoomer, #zoomer img {width:200px} #bx-extra, .hint {display:none} a#lnkSmallImg1 {width:180px!important} #product-detail-images {width:44% !important} #product-detail-details {width:50% !important} #product-detail-details select {width:154px} .detail-prices-label {margin:0 12px 0 0} ul.nav-tabs li a {padding:8px 10px} /* related products on product details page */ #related-products {height:640px} ul#product-share.inline > li {padding-right:0 !important} .related-product-item {border:1px solid #E0E0E0;border-width:0 0 1px 0;margin:10px 0 10px 0;float:left;height:300px;width:43.5%} .related-product-thumbs {height:100px;line-height:100px} .related-product-description {text-align:center !important} /*********************** PRODUCT DETAILS PAGE ****************************/ /************************* PRODUCT LIST PAGE *****************************/ select#ddlSort, select#ddlSort2 {width:116px} select#ddlPager, select#ddlPager2 {width:60px} .pages {border:0} .pages a.pageNumbers {font-size:12px;margin:10px 4px 0 4px} .list-col2 {padding:0;width:40%} .list-col3 {background:none;line-height:32px;height:32px;padding:0 4px;text-align:center} .list-col4 {padding:0 12px 0 0} .list-product-name {display:block;margin:0 0 2px 0} table.attrib-table .Headers {font-size:10px !important} /* only on this size - see controls.css */ span.table-expander {height:30px} /* only on this size - see controls.css */ /************************* PRODUCT LIST PAGE *****************************/ /************************* CAR FIT GUIDE PAGE ****************************/ .fg-item {margin:5px !important;width:28.2% !important} /************************* CAR FIT GUIDE PAGE ****************************/ /************************** SHOPPING CART PAGE ***************************/ /* shopping-cart on shopping cart page */ .cart-head-desc, .cart-description {width:51%} .cart-head-price, .cart-price {width:14%} .cart-head-qty, .cart-quantity {width:10%} .cart-head-total, .cart-total {width:16%} .cart-head-delete {display:none} .cart-description-text {width:70%} a.cart-more-info {float:none;display:block} .cart-description-thumbs {height:80px;line-height:80px} /* cross-shop products on shopping cart page */ .cross-shop-product-price, .cross-shop-product-buy {float:none;margin:0} #intl-chkout img {max-width:190px} /* NOT responsive */ /* related categories */ #related-categories a {margin:10px 12px 8px 0} /************************** SHOPPING CART PAGE ***************************/ /************************* MANUFACTURERS PAGE ****************************/ td.mfg-item {float:left} td.mfg-item-thumbs {width:120px} /************************* MANUFACTURERS PAGE ****************************/ /************************** TESTIMONIALS PAGE ****************************/ .p-pad {width:280px} /************************** TESTIMONIALS PAGE ****************************/ /**************************** NEWSLETTER PAGE ****************************/ #newsletter-register {text-align:center} input#nlEmail1 {font-size:12px;width:160px} /**************************** NEWSLETTER PAGE ****************************/ /************************ CAR-SPECIFIC LIST PAGE *************************/ p.carspecificlist {margin:12px 0 0 0;width:50%} span.carspecificlist-name {margin-top:8px !important;width:68%} /************************ CAR-SPECIFIC LIST PAGE *************************/ /*********************** REGISTRATION PAGES *****************************/ .form-horizontal .control-label {text-align:left;width:100%} .form-horizontal .controls {margin-left:0} /*********************** REGISTRATION PAGES *****************************/ /************************** ACCOUNT PAGES *******************************/ #frmEditEmail .form-action, #frmEditPassword .form-action, #frmEditShipping .form-action, #frmEditBilling .form-action {margin-top:12px;text-align:right} /************************** ACCOUNT PAGES *******************************/ /**************************** CHECKOUT PAGES *****************************/ #pp-alert {width:54%} #divBilling .form-horizontal, #divShipping .form-horizontal {padding-left:10px} /**************************** CHECKOUT PAGES *****************************/ /**************************** ABOUT US PAGE ******************************/ #three-images img {width:32%} /**************************** ABOUT US PAGE ******************************/ /******************************* Alerts **********************************/ .alert-info, .alert-success, .alert-warning, .alert-error {background-position:6px 6px} /******************************* Alerts **********************************/ } /******************************************************************************************************************/ /****************************************************************************************************************** Landscape phone to portrait tablet *******************************************************************************************************************/ @media (min-width:480px) and (max-width:767px) { #screen {background:purple} #screen:after {content:"480px to 767px - Phones - (landscape)"} /**************************** SITE HEADER ********************************/ /* social links + member's area + logo + search */ #social-links, #members, #logo, #search-box {text-align:center} .logo {padding:12px 0 4px 0;text-align:center} .logo-checkout {float:left;padding:12px 0 4px 0} #search-box, #search-box form {margin:0} /* search on header */ #SearchPhrase {width:70%} /* header */ #header-info {margin:0;text-align:left;float:left;width:180px} #header-info-checkout {float:right !important;margin:16px 0 0 0 !important;width:200px} h1.phone {margin:0;padding:0 0 0 18px} /* site-menu */ #site-menu {background:#2192E6;margin:12px 0 0 0;height:auto} li.home-link, .dn-spacer {display:none} li.left-nav {width:100%} /* Daisy Nav */ ul#main-categories, ul#specials-menu {left:0;width:100%} ul#specials-menu a {width:92.5%} li.child-cat {float:none!important;width:100%} a.menu-link {padding:4px 0 !important;width:88%} #breadcrumbs {margin:12px 0} #breadcrumbs a, span.current-page {margin:0 2px} #breadcrumbs a.bc-home {margin:0 0 0 4px} /**************************** SITE HEADER ********************************/ /**************************** SITE FOOTER ********************************/ #footer {text-align:center} #sub-footer p, #sub-footer ul {text-align:center;padding:0 12px} .foot-links {float:left;width:48%} /**************************** SITE FOOTER ********************************/ /***************************** HOME PAGE *********************************/ #slider-bar, #promo-banner img {display:none} /* Why OCS */ #why-ocs {height:300px;margin:24px 0} #why-ocs li {margin:12px 0 !important;width:28%} /* Newsletter */ #newsletter {height:140px} #nlEmail1 {margin:0 -4px 0 -42px} /***************************** HOME PAGE *********************************/ /*********************** PRODUCT DETAILS PAGE ****************************/ .MagicZoomBigImageCont {display:none} /* Magic Zoom [DISABLED] */ #product-detail-images {height:160px;min-height:160px} #outer-zoomer[id], #outer-zoomer {height:120px} #zoomer, #zoomer img, a#lnkSmallImg1 {width:180px !important} #bx-extra, .hint, #product-share {display:none} h1.detail-product-title {overflow:hidden;margin-top:28px;height:28px} #priceTag_AuthorizedDealer, #detail-product-price-container, #divWarranty, #divWarranty .shield, #trFitGuide1 {text-align:center} #divWarranty .shield, #price-savings {margin:0 auto} #divWarranty .shield {width:132px} #price-savings {width:50%} #detail-product-price-container, .detail-product-price, #price-savings {float:none} #detail-product-price-container .add-to-cart {margin:0} #product-share, p.condition {margin:0 0 8px 0;text-align:left} /* related products on product details page */ #related-products {height:640px} ul#product-share.inline > li {padding-right:0 !important} .related-product-item {border:1px solid #E0E0E0;border-width:0 0 1px 0;margin:10px 0 10px 0;float:left;height:300px;width:38.5%} .related-product-thumbs {height:100px;line-height:100px} .related-product-description {text-align:center} /*********************** PRODUCT DETAILS PAGE ****************************/ /************************* PRODUCT LIST PAGE *****************************/ .line-bar, #AttributeContainer {display:none} /* hide first */ #attributeFilter a.filter {background:#2192E6;color:#FFF;display:block;margin:6px 0;padding:4px 8px;width:62px} #attributeFilter a.filter:hover {cursor: pointer} .list-pager {margin-top:10px;margin-bottom:10px} .select-wrapper {margin:0 auto;padding:8px 0 0 0} .sort-by {float:left;margin:0 0 0 12px;width:200px} .items-per-page {float:right;margin:0 12px 0 0;width:154px} .pages {border:0;clear:both;float:right} select#ddlSort, select#ddlSort2 {width:140px} select#ddlPager, select#ddlPager2 {width:60px} #divPagerTop, #divPagerBottom {float:right} .list-col1, .list-col2, .list-col3, .list-col4 {padding:0;text-align:center} .list-col3 {display:none !important} .free-shipping {margin:0} .list-item {padding:6px} .list-item .list-col1 a {width:80px;text-align:center} .list-item .list-col2 {padding:0 8px;text-align:left} .list-item a.list-product-name {display:block;font-size:16px} .list-item span.list-product-price {font-size:18px} /************************* PRODUCT LIST PAGE *****************************/ /************************ PRODUCT SEARCH PAGE ****************************/ #search-results h1, #divUseGoogleSearch {margin:0 0 8px 0;text-align:center} #AlternateSearchResults_List_content {height:300px;overflow:auto} .list-item .search-list-col1 a {display:block;width:80px} .list-item .search-list-col2 {padding:0 8px;text-align:left} /************************ PRODUCT SEARCH PAGE ****************************/ /************************ PRODUCT REVIEW PAGE ****************************/ .reviews-list-header {border:0} #divReviewAverageRating {margin:24px 0 0 0;text-align:center} .submit-review, .btn-submit-review, .btn-write-review {float:none;text-align:center} .btn-write-review {display:block;margin:0 auto} a.review-guidelines {display:block;float:none;margin:4px 0 0 0} /************************ PRODUCT REVIEW PAGE ****************************/ /************************* CAR FIT GUIDE PAGE ****************************/ h2.select, form#cfg, .fg-description {text-align:center !important} #divCarFitGuide h4 {font-size:20px} h1.fg-header, h2.select, form#cfg, .fg-description {text-align:center !important} .fg-item {padding:0;height:120px!important;width:100% !important} .fg-thumbs-holder {float:left;height:120px;width:120px;line-height:120px} .fg-thumbs-holder img {margin:0!important} .fg-title, .fg-price, .fg-description {font-size:14px;float:left;text-align:left!important;width:266px!important} .fg-title {margin-top:18px} .fg-price {font-size:13px;font-weight:normal!important} .fg-description {margin:4px 0 0 0!important;height:36px;overflow:hidden} p.fg-description, img.car-image {display:none} /************************* CAR FIT GUIDE PAGE ****************************/ /************************** SHOPPING CART PAGE ***************************/ .cart-products {display:block} .cart-head-desc, .cart-head-price, .cart-head-qty, .cart-head-total, .cart-head-delete, .cart-price .badge, .cart-price br, #rc-testimonials {display:none} .cart-description, .cart-price, .cart-quantity, .cart-total {border-right:0} .cart-description, .protect-header {display:block;width:100%} .cart-description .full {width:98%} .cart-description-thumbs {height:80px;line-height:80px;margin:0 12px 4px 0;width:80px} .cart-description-text {float:left;margin-top:10px} .cart-price, .cart-quantity, .cart-total, .cart-delete {vertical-align:middle} .cart-price, .cart-quantity, .cart-total {width:120px} .cart-delete {width:40px} #txtQuantity {margin-bottom:2px;padding:0;width:40%} a.cart-more-info {float:right} #divCartActions h2, #confidence-banner {margin-top:12px} #divCartActions h2, #confidence-banner, #intl-chkout, #alt-payments, #coupon {text-align:center} .btn-cart-checkout {margin-right:42px} #manual-order-form {float:none!important} /* cross-shop products on shopping cart page */ #cross-shop-products {height:320px} .cross-shop-product-item {border-right:0;padding:0} .cross-shop-product-thumbs {line-height:70px;height:70px} .cross-shop-product-price, .cross-shop-product-buy {float:none;margin:0} .cross-shop-product-description {height:20px} /* related categories */ #related-categories a {margin:4px 6px} /************************** SHOPPING CART PAGE ***************************/ /************************* MANUFACTURERS PAGE ****************************/ td.mfg-item-thumbs {height:auto;width:140px} td.mfg-item-thumbs, td.mfg-item-cats {padding:12px 0} td.brand-image, td.brand-border, #brandimage {display:none} td.padded {padding:0 !important} #topsellers-title h1, #recently-viewed h1, #most-trending h1 {text-align:center} /************************* MANUFACTURERS PAGE ****************************/ /************************** TESTIMONIALS PAGE ****************************/ .p-pad {width:auto} .p-testimonials {width:99%} /************************** TESTIMONIALS PAGE ****************************/ /**************************** NEWSLETTER PAGE ****************************/ #newsletter-register {text-align:left} /**************************** NEWSLETTER PAGE ****************************/ /************************ CAR-SPECIFIC LIST PAGE *************************/ p.carspecificlist {margin:12px 0 0 0;width:98%} span.carspecificlist-thumbs {float:left;padding:4px} span.carspecificlist-name {float:none} /************************ CAR-SPECIFIC LIST PAGE *************************/ /*************************** CATEGORIES PAGE *****************************/ #category-bar {display:none} #categories .h-space {border-right:0;margin:0;height:40px} /*Tweak for dual-cols listing */ div.category {width:50%;float:left} /*************************** CATEGORIES PAGE *****************************/ /**************************** CHECKOUT PAGES *****************************/ img.cc {display:block;float:none;margin:0 auto;text-align:center} h1.login-title, h2.alt-payments {text-align:center} #alt-checkout, .form-action, #co-intl, #co-check, #co-gcheckout {float:none;text-align:center} #co-intl, #co-check, #co-gcheckout {margin:0 auto 8px auto} .checkout-progress, #btn_Continue2 {display:none} .checkout-progress-small {display:block;margin:0 0 12px 0} #pp-alert {width:auto} .co-action-bar {float:none;padding:8px;width:auto} .btn-backtoaddress {text-align:center;margin:0 auto} .co-review-billing, .co-review-shipping, .co-review-delivery {width:48%;float:left} .co-review-shipping {margin:0 0 0 12px;border:0} .co-review-payment {float:left;margin:24px 0 0 0} .co-review-delivery {border-left:1px solid #E0E0E0;padding-left:12px} /**************************** CHECKOUT PAGES *****************************/ /************************** ACCOUNT PAGES *******************************/ /*.account-box input[type="text"], .account-box input[type="password"] {width:92%}*/ #frmEditEmail .form-action, #frmEditPassword .form-action, #frmEditShipping .form-action, #frmEditBilling .form-action {margin-top:12px;text-align:right} .account-grid tr.cart-header {background-image:none} #accounts-links {margin:-32px 0 0 0} #accounts-links .left-border {border-left:0;padding:0} /************************** ACCOUNT PAGES *******************************/ /*********************** REGISTRATION PAGES *****************************/ .form-action {text-align:center} /*********************** REGISTRATION PAGES *****************************/ /**************************** ABOUT US PAGE ******************************/ #three-images img {width:32.5%} /**************************** ABOUT US PAGE ******************************/ /****************************** HELP PAGE ********************************/ #contact-bar h4 {margin:12px 0 0 0} /****************************** HELP PAGE ********************************/ /******************************* Alerts **********************************/ .alert-info, .alert-success, .alert-warning, .alert-error {background-position:6px 6px} /******************************* Alerts **********************************/ } /******************************************************************************************************************/ /****************************************************************************************************************** Portrait phones and down *******************************************************************************************************************/ @media (max-width:479px) { #screen {background:green} #screen:after {content:"up to 479px - Phones - (portrait)"} /************************** SITE PADDING *******************************/ body {padding-left:8px !important;padding-right:8px !important} /*************************** SITE PADDING *******************************/ /**************************** SITE HEADER ********************************/ /* social links + member's area + logo + search */ #social-links {display:none} #members, #search-box {text-align:center} .logo {padding:12px;text-align:left} .logo-checkout {padding:12px 12px 2px 12px;text-align:center} .logo a.site-logo img, .logo-checkout img {width:100px !important} #search-box, #search-box form {margin:0} /* search on header */ #SearchPhrase {margin-left:20px;width:70%} .typeahead {left:17px !important} /* header */ #header-info {display:none} #header-info-checkout {margin:0 0 12px 0;text-align:center} h1.phone {background:none;margin:0;padding:0} /* site-menu */ #site-menu {background:#2192E6;margin:0;height:auto} li.home-link, .dn-spacer {display:none} li.left-nav {width:100%} /* Daisy Nav */ ul#main-categories, ul#specials-menu {left:0;width:100%} li.child-cat {float:none!important;width:100%} ul#specials-menu a {width:90%} /* breadcrumbs */ #breadcrumbs {margin:12px 0;overflow:hidden} #breadcrumbs .arrow-right, #breadcrumbs a {display:none} /**************************** SITE HEADER ********************************/ /**************************** SITE FOOTER ********************************/ #footer-info {display:block;margin-top:4px;text-align:center} #footer {margin-top:12px !important;text-align:center} #sub-footer p, #sub-footer ul {text-align:center;padding:0 12px} /**************************** SITE FOOTER ********************************/ /***************************** HOME PAGE *********************************/ #slider-bar, #promo-banner img {display:none} /* Why OCS */ #why-ocs {height:388px;margin:24px 0} #why-ocs li {margin:8px 0 !important;width:48%} /* Trending items box */ #most-trending h1 {overflow:hidden;height:32px} /* Quote box */ #quote {margin:0 0 12px 0;text-align:center} #quote img {float:none;margin:8px 0 0 0} #quote p {font-size:12px;padding:12px 18px;text-align:justify} /* Newsletter box */ #newsletter-box p {margin-bottom:2px} #LeftNavNewsletter {/*margin:0 0 0 0;*/text-align:center} input.newsletter-box-email {/*margin-left:18px*/} /***************************** HOME PAGE *********************************/ /*********************** PRODUCT DETAILS PAGE ****************************/ .MagicZoomBigImageCont {display:none} /* Magic Zoom [DISABLED] */ #product-detail-images {height:200px;min-height:200px} #outer-zoomer[id], #outer-zoomer {height:120px} #zoomer, #zoomer img {height:120px} #zoomer {width:100%} #bx-extra, .hint, #product-share {display:none} a#lnkSmallImg1 {width:180px!important} h1.detail-product-title {overflow:hidden;height:28px;margin-top:12px} #priceTag_AuthorizedDealer, #detail-product-price-container, #trFitGuide1 {text-align:center} #detail-product-price-container, .detail-product-price, #price-savings {float:none} #detail-product-price-container .add-to-cart {margin:0} p.condition {margin:0 0 8px 0;text-align:left} .detail-product-number-small {display:block;float:left;padding:6px 0;width:220px} /* show only on 320x480 */ .detail-promo-small {display:block} span.promo-clearance, span.promo-hotdeal, span.promo-onsale {float:right} .detail-product-number, .detail-promo {display:none} /* hide only on 320x480 screens */ #product-detail-tabs {margin:8px 0 0 0} /* related products on product details page */ #related-products {height:100% !important} .related-product-item {border:1px solid #E0E0E0;border-width:0 0 1px 0;margin:0;padding:0;height:252px;width:100%} .related-product-thumbs {height:100px;line-height:100px} .related-product-description {margin:2px 0;text-align:center} .related-product-price {margin-bottom:0} /* Product Detail Control */ #divWarranty {text-align:center} #divWarranty .shield {background:url('../images/cps-logo.png') 72px 0 no-repeat} /*********************** PRODUCT DETAILS PAGE ****************************/ /************************* PRODUCT LIST PAGE *****************************/ .line-bar, #AttributeContainer {display:none} /* hide first */ #attributeFilter a.filter {background:#2192E6;color:#FFF;display:block;margin:6px 0;padding:4px 8px;width:62px} #attributeFilter a.filter:hover {cursor: pointer} #specials-banner .reconditioned h1 {font-size:20px !important} .list-item {padding:6px} .list-item .list-col1 a {display:block;width:80px} .list-item .list-col2 {padding-left:4px;text-align:left;width:110px} .list-item a.list-product-name {display:block;font-size:13px} .list-item span.list-product-price {font-size:16px} .list-item span.list-product-description {width:110px} .list-product-buy-now, .list-col3, .items-per-page, #divPagerTop {display:none !important} .line-bar, #category-bar, .list-pager {margin-top:10px;margin-bottom:10px} .select-wrapper {margin:6px auto 0 auto;padding:0;width:232px} .pages {padding:0;float:none;text-align:center} .pages a.pageNumbers {margin:10px 4px 0 4px !important;width:16px} #divPagerBottom {margin:8px auto 4px auto;text-align:center;width:190px} .list-col1, .list-col2, .list-col3, .list-col4 {height:120px;padding:0;text-align:center} /************************* PRODUCT LIST PAGE *****************************/ /************************ PRODUCT SEARCH PAGE ****************************/ #search-results h1, #divUseGoogleSearch {margin:0 0 8px 0;text-align:center} #divSearchResults {border:0;-webkit-box-shadow:0 0 0 rgba(255, 255, 255, 0);-moz-box-shadow:0 0 0 rgba(255, 255, 255, 0);box-shadow:0 0 0 rgba(255, 255, 255, 0)} #divSearchResultsList {padding:0} #divSearchResultsHeader, .search-list-col3 {display:none} #AlternateSearchResults_List {margin:0} #AlternateSearchResults_List_content {height:300px;overflow:auto} input.google-search {width:106px} .list-item .search-list-col1 a {display:block;width:80px} .list-item .search-list-col2 {padding-left:4px;text-align:left;width:110px} /************************ PRODUCT SEARCH PAGE ****************************/ /************************ PRODUCT REVIEW PAGE ****************************/ .reviews-list-header {border:0} #divReviewAverageRating {margin:24px 0 0 0;text-align:center} .submit-review, .btn-submit-review, .btn-write-review {float:none;text-align:center} .btn-write-review {display:block;margin:0 auto} a.review-guidelines {display:block;float:none;margin:4px 0 0 0} /************************ PRODUCT REVIEW PAGE ****************************/ /************************* CAR FIT GUIDE PAGE ****************************/ #divCarFitGuide h4 {font-size:20px} h1.fg-header, h2.select, form#cfg, .fg-description {text-align:center!important} .fg-item {padding:0;height:120px!important;width:99% !important} .fg-thumbs-holder {float:left;height:120px;width:90px;line-height:120px} .fg-thumbs-holder img {margin:0!important} .fg-title, .fg-price, .fg-description {font-size:14px;float:left;text-align:left!important;width:188px!important} .fg-title {margin-top:14px} .fg-price {font-size:13px;font-weight:normal!important} .fg-description {margin:4px 0 0 0!important;height:38px;overflow:hidden} p.fg-description, img.car-image {display:none} /************************* CAR FIT GUIDE PAGE ****************************/ /*************************** CATEGORIES PAGE *****************************/ #category-bar, .category-shop-now, #category-description, #categories .h-space {display:none} #categories, .category-name, .category-name a {margin:0;text-align:center} .category-thumbs {padding:0;height:160px;line-height:160px} .category-thumbs img {/*width:50%*/ width:120px} h1.cat-name, .category-name {float:none} /*************************** CATEGORIES PAGE *****************************/ /************************** SHOPPING CART PAGE ***************************/ .cart-head-desc, .cart-head-price, .cart-head-qty, .cart-head-total, .cart-head-delete, .cart-price .badge, .cart-price br, span#lblDescription, #rc-testimonials, h1.cart-title, .btn-cart-checkout2, #confidence-banner, #alt-payments, #g-checkout, #divRelatedCats {display:none} .cart-products {border-bottom:4px solid #E0E0E0;display:block;padding-bottom:6px} .cart-description, .cart-price, .cart-quantity, .cart-total {border-right:0} .cart-description, .protect-header {display:block;width:98%} .cart-description-thumbs {height:80px;line-height:80px;margin:0 12px 4px 0;width:60px} .cart-description-link {margin:0!important} .cart-description-text {float:left;margin-top:20px;text-align:left;width:68%} .cart-price, .cart-quantity, .cart-total, .cart-delete {font-size:16px;vertical-align:middle} .cart-price, .cart-quantity, .cart-total {width:120px} .cart-delete {width:40px} #txtQuantity {margin-bottom:2px;padding:0 4px;width:20%} a#lbUpdateQty {font-size:12px} a.cart-more-info {float:right} #divCartActions h2, #confidence-banner {margin-top:12px} #divCartActions h2, #confidence-banner, #intl-chkout, #manual-order-form, #coupons {text-align:center} #panelSelectedWarranty {width:93.4%} .btn-cart-checkout {margin:0 54px 0 0} a.continue-shopping {margin:0 70px 0 0} #intl-chkout, #manual-order-form {float:none} /* cross-shop products on shopping cart page */ #cross-shop-products {border-bottom:1px solid #E0E0E0;height:350px;margin-top:32px} .cross-shop-product-item {border-right:0;padding:0;margin:12px 0} .cross-shop-product-price, .cross-shop-product-buy {float:none;margin:0} .cross-shop-product-description {height:20px} .cross-shop-product-price {line-height:24px} .cross-shop-product-buy img {margin:0 auto} /************************** SHOPPING CART PAGE ***************************/ /************************* MANUFACTURERS PAGE ****************************/ td.mfg-item-thumbs {height:auto;width:100px} td.mfg-item-thumbs, td.mfg-item-cats, td.mfg-item-cats td {padding:8px 0} td.brand-image, td.brand-border, #brandimage, span.manufacturer_desc {display:none} h1.brand-name {text-align:center} td.padded {padding:0 !important} #recently-viewed {margin-top:12px} #topsellers-title h1, #recently-viewed h1, #most-trending h1 {text-align:center} /************************* MANUFACTURERS PAGE ****************************/ /************************** TESTIMONIALS PAGE ****************************/ .p-pad {width:auto} /************************** TESTIMONIALS PAGE ****************************/ /**************************** NEWSLETTER PAGE ****************************/ #newsletter-register {text-align:center} /**************************** NEWSLETTER PAGE ****************************/ /************************ CAR-SPECIFIC LIST PAGE *************************/ p.carspecificlist {margin:12px 0 0 0;width:98%} span.carspecificlist-thumbs {padding:4px 0;text-align:center;width:100%} span.carspecificlist-name {margin-top:2px} /************************ CAR-SPECIFIC LIST PAGE *************************/ /*************************** CHECKOUT PAGES *****************************/ .checkout-progress img, #btn_Continue2, #dgCart tr.cart-header, span.co-product-description, ul#ulOrderNotes {display:none} h1.login-title, h2.alt-payments, #alt-checkout, .form-action, #co-intl, #co-check, #co-gcheckout, .btn-backtoaddress, .co-action-bar {float:none;text-align:center} .co-action-bar {padding:8px;width:auto} /* login - secure/login.aspx */ img.cc {display:block;float:none;margin:0 auto;text-align:center} .account-box .half {width:99% !important} .account-box .confirm-password {margin-left:0} .account-box .btn-login {margin-top:8px} #co-intl, #co-check, #co-gcheckout {margin:0 auto 8px auto} .checkout-progress {display:none} .checkout-progress-small {display:block;margin:0 0 12px 0} /* Billing + Shipping - secure/checkout.aspx */ .popover {max-width:290px !important} /* Delivery + Payment - secure/checkout-delivery.aspx*/ #ddPaymentType {margin-bottom:6px} #CreditCard {padding:12px 0 0 0} #pp-banner, #pp-safer {display:none} .btn-nextstep2, .btn-paypal {margin-left:-6px} /* Review orders - secure/checkout-summary.aspx */ #co-summary-header .right-border {border:0} #co-summary-header .info-label {margin-top:12px} span.co-product-name, td.item-detail, td.item-price, td.item-qty, td.item-total, table#order-totals td {font-size:13px} .btn-backtoshipping {float:none;padding:8px;text-align:center;width:178px !important} /*************************** CHECKOUT PAGES *****************************/ /*********************** REGISTRATION PAGES *****************************/ .account-box select#ddlShippingOption {font-size:12px;width:218px} /*********************** REGISTRATION PAGES *****************************/ /************************** ACCOUNT PAGES *******************************/ .account-box .btn-update, .account-box .btn-cancel {display:block;margin:0 auto 4px auto;text-align:center;float:none} span.badge, span.od-prod-description {display:none} #txtCaptcha {margin-left:4px;width:50% !important} /* Your Orders table */ .account-grid table {font-size:11px} .account-grid tr.cart-header {background-image:none} .account-grid tr.cart-header th, .account-grid td {padding:2px} #accounts-links {margin:-32px 0 0 0} #accounts-links .left-border {border-left:0;padding:0} /************************** ACCOUNT PAGES *******************************/ /***************************** LOGIN PAGE ******************************** * Login page - secure/login.aspx + account/accountlogin.aspx * * *************************************************************************/ #frmLogin input[type="text"], #frmLogin input[type="email"], #frmLogin input[type="password"] {width:auto} input#txtExistingCustomerEmail, input#txtExistingCustomerPassword, input#txtNewCustomerEmail, input#txtNewCustomerPassword, input#txtNewCustomerPasswordConfirm {width:93% !important} /*************************************************************************/ /****************************** HELP PAGE ********************************/ #contact-bar h4 {margin:12px 0 0 0} /****************************** HELP PAGE ********************************/ /**************************** ABOUT US PAGE ******************************/ #three-images img {margin:0 0 6px 0;width:99%} /**************************** ABOUT US PAGE ******************************/ } /******************************************************************************************************************/