/* OC Bootstrap Bootstrap 3 in an OpenCart theme. */ /* What no reset? Well Bootstrap uses normalize.css instead so we shouldnt need resets huh... */ /* Mobile First - Base styles for extra small devices i.e Phones (<768px). This is our base CSS, the minimum amount of styles required to display the site beautifully on a mobile device less than 768 pixels. We will add more intensive styling as the screen size increases. */ /* Bootstrap theme styles */ .carousel-control .glyphicon-chevron-left { left: 20%; } .carousel-control .glyphicon-chevron-right { left: 70%; } .btn-group > .tooltip + .btn, .btn-group > .popover + .btn{ margin-left:-1px; /* Hack for tooltip as it moves stuff within a btn group */ } .product-filter .btn-group { position: inherit; /* Hack to get tooltip to work in the button group within the product filter */ } .sort .form-control, .limit .form-control, .sort .input-group-addon, .limit .input-group-addon { width: auto; } .btn-group > .btn:last-of-type { -webkit-border-top-right-radius: 4px; -moz-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .dropdown-menu { margin: 0; } .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-default:active, .btn-primary:active, .btn-success:active, .btn-info:active, .btn-warning:active, .btn-danger:active, .btn-default.active, .btn-primary.active, .btn-success.active, .btn-info.active, .btn-warning.active, .btn-danger.active { -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .btn:active, .btn.active { background-image: none; } .btn-default:active, .btn-default.active { background-color: #e6e6e6; border-color: #e0e0e0; } .btn-primary:active, .btn-primary.active { background-color: #3071a9; border-color: #2d6ca2; } .btn-success:active, .btn-success.active { background-color: #449d44; border-color: #419641; } .btn-warning:active, .btn-warning.active { background-color: #ec971f; border-color: #eb9316; } .btn-danger:active, .btn-danger.active { background-color: #c9302c; border-color: #c12e2a; } .btn-info:active, .btn-info.active { background-color: #31b0d5; border-color: #2aabd2; } .thumbnail, .img-thumbnail { -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); } .navbar .navbar-nav > .active > a { background-color: #f8f8f8; } .navbar-brand, .navbar-nav > li > a { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); } .navbar-inverse .navbar-nav > .active > a { background-color: #222222; } .navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .navbar-static-top, .navbar-fixed-top, .navbar-fixed-bottom { border-radius: 0; } @media (max-width: 320px) { .topbar .nav > li > a { padding: 10px; } #logo img { width: 100% } } .alert { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); } .list-group { border-radius: 4px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); } .panel { -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .topbar + .container { padding-bottom: 20px; } /* Globals */ body { padding: 50px 0 0; } body, td, th, input, textarea, select, a { transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -webkit-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; } select > option { padding: 5px; } h1 { font-size: 32px; margin-top: 0; } h2 { font-size: 18px; font-weight: bold; } p.margin5 { margin: 5px; } a, a:visited, a b { cursor: pointer; } a:hover { text-decoration: none; } small{ font-size:10px; } /* Header */ .topbar .navbar-form { margin: 0; padding: 0; border: none; } .topbar .navbar-nav > li, .topbar .navbar-form { float: left; display: inline; } .topbar-nav { float: right; } #header { z-index: 99; } #header #logo { margin: 1.5em 0; text-align: center; } #language, #currency { line-height: 46px; margin-right: 20px; padding-top: 2px; } @media (max-width: 768px) { #currency, #language { float: left; } } #currency a { font-size: 18px; } #currency a:hover { background-color: #333; } .button-search { cursor: pointer; } .cart-totals { margin: 0; padding: 0 20px; } #cart { width: 100%; margin: 1.2em 0; } #cart .btn { width: 100%; } #cart .table td { border: 0 none; padding: 20px; } #cart .table .name { font-weight: bold; white-space: nowrap; } .cart-totals strong { display: inline-block; text-align: left; width: 40%; } .cart-totals span { display: inline-block; text-align: right; width: 58%; } #cart .empty { padding: 10px; } #cart .table tr:nth-last-child(2n+1) { background: none repeat scroll 0 0 #FFFFFF; } #cart .table tr { border-bottom: 1px solid #DDDDDD; } #cart .dropdown-menu { background: none repeat scroll 0 0 #EEEEEE; z-index: 1001; } .cart-btns li a { font-weight: bold; } #header #search { width: 1px; /* Small hack to keep everything right aligned */ float: right; } #header #search input { width: 75px; -moz-transition-duration: 400ms; -moz-transition-property: width, background; -moz-transition-timing-function: ease; -webkit-transition-duration: all 400ms ease; -webkit-transition-property: width, background; -webkit-transition-timing-function: ease; -ms-transition-duration: 400ms; -ms-transition-property: width, background; -ms-transition-timing-function: ease; -o-transition-duration: 400ms; -o-transition-property: width, background; -o-transition-timing-function: ease; transition-duration: 400ms; transition-property: width, background; transition-timing-function: ease; } #header #search input:focus { width: 200px; } @media (max-width: 768px) { #header #search { width: 100%; } #header #search input { width: 100%; } } #language img { cursor: pointer; margin-left: 10px; } #language img:first-child { margin-left: 0; } #currency a { text-decoration: none; } #currency a b { text-decoration: none; } /* Main Menu */ .navbar-collapse{ max-height:none!important; } .navbar .dropdown-menu { padding: 5px 0 0 0; float: none; } .navbar .dropdown-menu li a { display: block; padding: 4px 20px; clear: both; font-weight: normal; line-height: 20px; } #menu-wrapper { width: 100%; position: absolute; left: 0; top: 0; ; z-index: 99999; background-color: rgba(0, 0, 0, 0.4);} #menu-wrapper #menu-accordion{width: 60%; background-color: #FFF} #menu-wrapper .logo{width: 70%; background-color: #FFF; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #ddd;} #menu-wrapper .logo .close { opacity: 1; height: 20px; width: 20px; position: relative; top: 10px; right: 14px; background: url('../image/mobile/icn_menu_button_close.png') no-repeat; cursor: pointer;} #menu-wrapper .logo .img-responsive { height: 54px; display: inherit; } #menu-wrapper a{ color: #5F5B5A } #menu-wrapper .panel-title{ text-transform: uppercase; font-weight: 400} #menu-wrapper .panel-group { margin-bottom: 0px; } #menu-wrapper .panel-body { padding: 0px; background-color: #EEE} #menu-wrapper .panel-group .panel{ border-radius: 0; } #menu-wrapper .panel-default{ border: none; border-top: 1px solid #ddd; } #menu-wrapper #menu-accordion > .panel-default:first-child{ border-top: none; } #menu-wrapper #menu-accordion .accordion-toggle { display: block; background: url('../image/mobile/menu-open.png') calc(100% - 2px) 50% no-repeat; padding-right: 20px } #menu-wrapper #menu-accordion .accordion-toggle.collapsed { background-image: url('../image/mobile/menu-close.png'); } #menu-wrapper #menu-accordion .accordion-toggle[aria-expanded^="true"] { background-image: url('../image/mobile/menu-open.png'); } #menu-wrapper .panel-group .panel + .panel{ margin-top: 0;} #menu-wrapper #menu-accordion > .panel-default > .panel-heading{background-color: #FFF;} #menu-wrapper #menu-accordion > .panel-default .panel-default .panel-heading {background-color: #EEE;} #menu-wrapper .panel-default > .panel-heading + .panel-collapse .panel-body { border-top: none; } #menu-wrapper .panel-group .panel-group .panel{ padding-left: 20px; background-color: #EEE} #menu-wrapper ul{list-style: none; padding-left: 15px; font-size: 15px; font-weight: 100;} #menu-wrapper h3{padding-left: 15px;} .see-all { display: block; margin-top: 0.5em; border-top: 1px solid #DDD; padding: 3px 20px; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } .see-all:hover, .see-all:focus { text-decoration: none; color: #ffffff; background-color: #229ac8; background-image: -moz-linear-gradient(top, #23a1d1, #1f90bb); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#23a1d1), to(#1f90bb)); background-image: -webkit-linear-gradient(top, #23a1d1, #1f90bb); background-image: -o-linear-gradient(top, #23a1d1, #1f90bb); background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff23a1d1', endColorstr='#ff1f90bb', GradientType=0); } /* Slideshow */ .slideshow { padding-bottom: 20px; } /* Messages */ .success, .warning, .attention, .information { padding: 10px 10px 10px 33px; margin-bottom: 15px; } .success .close, .warning .close, .attention .close, .information .close { float: right; padding-top: 4px; padding-right: 4px; } .success { background: #EAF7D9 url('../image/success.png') 10px center no-repeat; border: 1px solid #BBDF8D; } .warning { background: #FFD1D1 url('../image/warning.png') 10px center no-repeat; border: 1px solid #F8ACAC; } .attention { background: #FFF5CC url('../image/attention.png') 10px center no-repeat; border: 1px solid #F2DD8C; } .information { background: #E8F6FF url('../image/information.png') 10px center no-repeat; border: 1px solid #B8E2FB; } .success .close, .warning .close, .attention .close, .information .close { cursor: pointer; } .success, .warning, .attention, .information { color: #555555; } .required:before { font-weight: bold; color: #FF0000; content: '*'; } .required { font-weight:bold; } .error { display: block; color: #FF0000; } .help { color: #999; font-size: 10px; font-weight: normal; font-family: Verdana, Geneva, sans-serif; display: block; } /* Tables */ table.form { width: 100%; border-collapse: collapse; margin-bottom: 20px; } table.form tr td:first-child { width: 150px; } table.form td { padding: 4px; } input.large-field, select.large-field { width: 300px; } table.list { border-collapse: collapse; width: 100%; margin-bottom: 20px; } table.list thead td {; padding: 0px 5px } table.list tbody td { vertical-align: top; padding: 0px 5px; } table.list .left, table.list .right, table.list .center { padding: 7px; } table.list .asc, table.list .desc { padding-right: 15px; } table.list { border-top: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD; } table.list td { border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; } table.list thead td { background-color: #EFEFEF; } table.list .asc { background: url('../image/asc.png') right center no-repeat; } table.list .desc { background: url('../image/desc.png') right center no-repeat; } table.form > * > * > td { /*color: #000000;*/ } table.list thead td a, .list thead td { text-decoration: none; font-weight: bold; } table.list tbody td a { text-decoration: underline; } table.list .left { text-align: left; } table.list .right { text-align: right; } table.list .center { text-align: center; } /* Pagination */ .pagination { width: 100%; } .pagination .results { text-align: right; } /* Tabs */ .tab-content { padding: 15px; } /* Category View Page */ .category-info { float: left; margin-bottom: 20px; width: 100%; } .category-info .image { float: left; padding: 8px; margin-right: 15px; border: 1px solid #E7E7E7; } .category-list { margin-bottom: 15px; overflow: auto; } .category-list ul li { padding: 4px 5px; } /* Sidebar Box */ aside .box { margin-bottom: 15px; } .inner-box { padding: 0 10px 10px; } /* Category Module */ .cat-menu .nav .nav { display: none; } .cat-menu .nav > .active .nav { display: block; } #column-left .cat-menu .nav > .active > a, #column-left .cat-menu .nav > .active:hover > a, #column-left .cat-menu .nav > .active:focus > a { background-color: rgba(0, 0, 0, 0); border-right: 2px solid #5BC0DE; color: #5BC0DE; } #column-left .cat-menu .nav a { border-right: 1px solid transparent; padding-right: 14px!important; } #column-left .cat-menu .nav a:hover, #column-left .cat-menu .nav a:focus { background-color: rgba(0, 0, 0, 0); border-right: 1px solid #5BC0DE; color: #5BC0DE; padding-right: 14px; } #column-left .cat-menu .nav .nav > li > a { font-size: 13px; padding-bottom: 5px; padding-left: 30px; padding-top: 0; } #column-right .cat-menu .nav > .active > a, #column-right .cat-menu .nav > .active:hover > a, #column-right .cat-menu .nav > .active:focus > a { background-color: rgba(0, 0, 0, 0); border-left: 2px solid #5BC0DE; color: #5BC0DE; } #column-right .cat-menu .nav a { border-left: 1px solid transparent; padding-left: 14px; } #column-right .cat-menu .nav a:hover, #column-right .cat-menu .nav a:focus { background-color: rgba(0, 0, 0, 0); border-left: 1px solid #5BC0DE; color: #5BC0DE; padding-left: 14px; } #column-right .cat-menu .nav .nav > li > a { font-size: 13px; padding-bottom: 5px; padding-left: 30px; padding-top: 0; } /* Account Module */ .side-menu { border: 1px #E7E7E7 solid; } .side-menu > li + li { margin-top: 0; } .side-menu > li a{ -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } /* Manufacturers */ .manufacturer-heading { font-size: 15px; font-weight: bold; } .manufacturer-list ul { list-style: none; } .manufacturer-list { padding: 5px; overflow: auto; margin-bottom: 20px; } .manufacturer-heading { padding: 5px 8px; margin-bottom: 6px; } .manufacturer-content { padding: 8px; } .manufacturer-list ul { float: left; width: 25%; margin: 0; padding: 0; margin-bottom: 10px; } .manufacturer-list { border: 1px solid #DBDEE1; } .manufacturer-heading { background: #F8F8F8; } /* Product Display */ .product-filter { padding-bottom: 15px; overflow: auto; } .product-filter .display { float: left; } .product-filter .display a { font-weight: bold; } .product-filter .sort { float: right; color: #333; } .product-filter .limit { margin-left: 15px; float: right; color: #333; } @media (max-width: 480px) { .product-filter .sort select { width: 100px; padding: 5px; } .product-filter .limit { margin-left: 0; } .product-filter .limit select { width: 60px; padding: 5px; } .product-filter .sort .input-group-addon, .product-filter .limit .input-group-addon { padding: 5px; } } @media (max-width: 640px) { .product-filter { width: 100%; padding-top: 10px; } .product-filter .sort { float: left; } } .product-compare { margin-bottom: 15px; } .product-compare a { font-weight: bold; } /* Product List Display */ .product-list { width: 100%; } .product-list > article { padding: 15px; } .product-list > article.col-md-3 { width: 100%; } .product-list > article > .product-inner { border: 1px solid #E7E7E7; } .product-list > article > .product-inner:hover { -webkit-box-shadow: 0px 0px 6px 5px #DDD; -moz-box-shadow: 0px 0px 6px 5px #DDD; box-shadow: 0px 0px 6px 5px #DDD; } .product-list .image { padding: 15px; width: 30%; float: left; } .product-list .image img { width: 100%; } .product-list .name { padding: 15px; width: 70%; float: left; } .product-list .name a { font-weight: bold; text-decoration: none; } .product-list .description { line-height: 15px; padding: 15px; width: 70%; float: left; } .product-list .rating { color: #7B7B7B; } .product-list .price { float: right; padding: 15px; text-align: right; font-weight: bold; } .product-list .price + div{ padding: 15px; float: left; } .product-list .price-old { color: #F00; text-decoration: line-through; } .product-list .price-tax, .product-grid .price-tax { color: #BBBBBB; font-size: 12px; } /* Product Grid Display */ .product-grid { width: 100%; } .product-grid > article { text-align: center; padding: 15px; } .product-grid > article .btn { font-size: 14px; background-color: #E7E7E7; -webkit-border-radius: 0!important; -moz-border-radius: 0!important; border-radius: 0!important; height: 35px; color: #888; width: 33.33333333333333%; float: left; } .product-grid > article .btn:hover { background-color: #CCC; color: #333; } .product-grid > article > .product-inner { border: 1px solid #E7E7E7; } .product-grid > article > .product-inner:hover { -webkit-box-shadow: 0px 0px 6px 5px #DDD; -moz-box-shadow: 0px 0px 6px 5px #DDD; box-shadow: 0px 0px 6px 5px #DDD; } .product-grid .image { padding: 15px; } .product-grid .image img { width: 100%; } .product-grid .name a, .product-grid .price, .product-grid .rating, .product-grid .description { display: block; padding: 0 15px 5px; text-decoration: none; height: 25px; overflow: hidden; } .product-grid .description { text-align: justify; min-height: 105px; } .product-grid .price { font-weight: bold; } .product-grid .price-old { text-decoration: line-through; color: #F00; } .product-inner { background: #FFF; } /* Product Grid within sidebar columns */ aside .product-grid > article { width: 100%; } .product-info { overflow: auto; margin-bottom: 20px; } .product-info .image { border: 1px solid #E7E7E7; margin-bottom: 20px; padding: 10px; text-align: center; } .product-info .image img { width: 100%; } .product-info .image-additional { margin-bottom: 10px; } .product-info .image-additional img { border: 1px solid #E7E7E7; margin-bottom: 10px; width: 100%; } .product-info .description { padding: 0 0 10px; margin-bottom: 10px; line-height: 20px; } .product-info .price { border-bottom: 1px solid #E7E7E7; padding: 0 0 10px; margin-bottom: 10px; font-size: 16px; font-weight: bold; } .product-info .price-old { color: #F00; text-decoration: line-through; } .product-info .price-new { } .product-info .price-tax { font-size: 12px; font-weight: normal; color: #999; } .product-info .price .reward { font-size: 12px; font-weight: normal; color: #999; } .product-info .price .discount { font-weight: normal; font-size: 12px; color: #4D4D4D; } .product-info .options .form-group{ margin-bottom: 0; } .product-info .option-image { margin-top: 3px; margin-bottom: 10px; } .product-info .option-image label { display: block; width: 100%; height: 100%; } .product-info .option-image img { margin-right: 5px; border: 1px solid #CCCCCC; cursor: pointer; } .product-info .cart { padding: 0 0 10px; } .product-info .cart div > span { padding-top: 7px; display: block; color: #999; } .product-info .cart .minimum { padding-top: 5px; font-size: 11px; color: #999; clear: both; } .product-info .review { border-top: 1px solid #E7E7E7; } .product-info .review > div { padding: 10px 0; } .product-info .review > div a.review-link { padding-left: 15px; } .product-info .options h3 { margin-top: 10px; } .product-info .options .option { margin-bottom: 10px; } #review .author { margin-bottom: 5px; } #review article:nth-child(2n+2) { background-color: #F8F8F8; padding: 5px; } /* Add This Share Box*/ #at15s a, #at15s span { transition: none; -ms-transition: none; -moz-transition: none; -webkit-transition: none; -o-transition: none; } .reviewmeta{ padding: 5px 0; } .reviewmeta img{ margin: 0 0 -4px; } .tags{ padding-bottom: 10px; } .attribute { border-collapse: collapse; width: 100%; border-top: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD; margin-bottom: 20px; } .attribute thead td, .attribute thead tr td:first-child { text-align: left; background-color: #E7E7E7; } .attribute tr td:first-child { font-weight: bold; text-align: right; width: 20%; } .attribute td { padding: 7px; text-align: center; vertical-align: top; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; } /* Compare */ .compare-info { border-collapse: collapse; width: 100%; border-top: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD; margin-bottom: 20px; } .compare-info thead td, .compare-info thead tr td:first-child { color: #000000; font-size: 14px; font-weight: bold; background: #F7F7F7; text-align: left; } .compare-info tr td:first-child { color: #000000; font-weight: bold; text-align: right; } .compare-info td { padding: 7px; width: 20%; color: #4D4D4D; text-align: center; vertical-align: top; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; } .compare-info .name a { font-weight: bold; } .compare-info .price-old { font-weight: bold; color: #F00; text-decoration: line-through; } .compare-info .price-new { font-weight: bold; } /* Wishlist */ .wishlist-info table { width: 100%; border-collapse: collapse; border-top: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; margin-bottom: 20px; } .wishlist-info td { padding: 7px; } .wishlist-info thead td { color: #4D4D4D; font-weight: bold; background-color: #F7F7F7; border-bottom: 1px solid #DDDDDD; } .wishlist-info thead .image { text-align: center; } .wishlist-info thead .name, .wishlist-info thead .model, .wishlist-info thead .stock { text-align: left; } .wishlist-info thead .quantity, .wishlist-info thead .price, .wishlist-info thead .total, .wishlist-info thead .action { text-align: right; } .wishlist-info tbody td { vertical-align: top; border-bottom: 1px solid #DDDDDD; } .wishlist-info tbody .image img { border: 1px solid #DDDDDD; } .wishlist-info tbody .image { text-align: center; } .wishlist-info tbody .name, .wishlist-info tbody .model, .wishlist-info tbody .stock { text-align: left; } .wishlist-info tbody .quantity, .wishlist-info tbody .price, .wishlist-info tbody .total, .wishlist-info tbody .action { text-align: right; } .wishlist-info tbody .price s { color: #F00; } .wishlist-info tbody .action img { cursor: pointer; } /* Order and Return */ .order-list, .return-list { margin-bottom: 10px; } .order-list .order-content, .return-list .return-content { padding: 10px 0; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; } .order-list .order-status, .return-list .return-status { text-align: right; } .order-list .order-info, .return-list .return-info { text-align: right; } .order-detail { font-weight: bold; } .return-captcha { padding-bottom: 15px; } .download-info { font-size: 40px; margin-top: -8%; float: right; } /* Cart */ .cart-info table { width: 100%; margin-bottom: 15px; border-collapse: collapse; border-top: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; } .cart-info td { padding: 7px; } .cart-info thead td { color: #4D4D4D; font-weight: bold; background-color: #F7F7F7; border-bottom: 1px solid #DDDDDD; } .cart-info thead .image { text-align: center; } .cart-info thead .name, .cart-info thead .model, .cart-info thead .quantity { text-align: left; } .cart-info thead .price, .cart-info thead .total { text-align: right; } .cart-info tbody td { vertical-align: top; border-bottom: 1px solid #DDDDDD; } .cart-info tbody .image img { border: 1px solid #DDDDDD; } .cart-info tbody .image { text-align: center; } .cart-info tbody .name, .cart-info tbody .model, .cart-info tbody .quantity { text-align: left; } .cart-info tbody .quantity input[type='image'], .cart-info tbody .quantity img { position: relative; top: 4px; cursor: pointer; } .cart-info tbody .price, .cart-info tbody .total { text-align: right; } .cart-info tbody span.stock { color: #F00; font-weight: bold; } .cart-module > div { display: none; } .cart-total { border-top: 1px solid #E7E7E7; overflow: auto; padding-top: 15px; margin: 15px 0; } .cart-total table { float: right; } .cart-total td { padding: 3px; text-align: right; } /* Checkout */ .checkout-heading { background: #F8F8F8; border: 1px solid #E7E7E7; padding: 10px; font-weight: bold; color: #222222; margin-bottom: 15px; } .checkout-heading a { float: right; margin-top: 1px; font-weight: normal; text-decoration: none; } .checkout-content { padding: 0px 0px 15px 0px; display: none; overflow: auto; } .checkout-content .left { float: left; width: 48%; } .checkout-content .right { float: right; width: 48%; } .checkout-content .buttons { clear: both; } .checkout-product table { width: 100%; border-collapse: collapse; border-top: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; margin-bottom: 20px; } .checkout-product td { padding: 7px; } .checkout-product thead td { color: #4D4D4D; font-weight: bold; background-color: #F7F7F7; border-bottom: 1px solid #DDDDDD; } .checkout-product thead .name, .checkout-product thead .model { text-align: left; } .checkout-product thead .quantity, .checkout-product thead .price, .checkout-product thead .total { text-align: right; } .checkout-product tbody td { vertical-align: top; border-bottom: 1px solid #DDDDDD; } .checkout-product tbody .name, .checkout-product tbody .model { text-align: left; } .checkout-product tbody .quantity, .checkout-product tbody .price, .checkout-product tbody .total { text-align: right; } .checkout-product tfoot td { text-align: right; border-bottom: 1px solid #DDDDDD; } .highlight td{ padding: 5px; } .contact-info { overflow: auto; } /* Footer */ #footer { width: 100%; background: #222; color: #FFF; } #footer h3 { font-size: 16px; font-weight: bold; } #footer a { color: #999999; } #footer a:hover { color: #FFF; } #footer #cards { float: left; clear: left; margin-top: 5px; } #footer #cards img { float: left; margin: 0 5px 5px 0; display: block; } #powered { padding: 15px 0 0; margin-top: 15px; text-align: right; border-top: 1px #999 solid; } #the1path { text-align: right; padding: 0 0 15px; } /* Banner */ .banner img { margin-bottom: 15px; width: 100%; height: auto; } /* Timepicker Addon Styles */ .ui-timepicker-div .ui-widget-header{margin-bottom:8px}.ui-timepicker-div dl{text-align:left}.ui-timepicker-div dl dt{float:left;clear:left;padding:0 0 0 5px}.ui-timepicker-div dl dd{margin:0 10px 10px 40%}.ui-timepicker-div td{font-size:90%}.ui-tpicker-grid-label{background:0;border:0;margin:0;padding:0}.ui-timepicker-rtl{direction:rtl}.ui-timepicker-rtl dl{text-align:right;padding:0 5px 0 0}.ui-timepicker-rtl dl dt{float:right;clear:right}.ui-timepicker-rtl dl dd{margin:0 40% 10px 10px} /* Add This Styles - hack to get it to show all borders */ .addthis_32x32_style .addthis_counter.addthis_bubble_style { width: 62px!important; } /* Small devices; Tablets (≥768px) Lets add the styling required for slightly bigger mobile divices from 768 pixels to 991 pixels */ @media (min-width: 768px) { .topbar .glyphicon { margin: 3px 5px 0 0; } .topbar .navbar-nav > li:last-child > a { padding-right: 0; } #header #search { margin: 2em 0 0; } #header #logo { text-align: left; } .navbar .dropdown:hover .dropdown-menu { /* By default you have to click a top level menu item with Bootstrap, great for mobiles but could be annoying for mouse users. This little bit of CSS will display the drop down on hover but retains the click feature too :) */ display: block; } .navbar .dropdown-menu li a { min-width: 120px; color: #333333; } .navbar .dropdown-menu li a:hover { color: #5BC0DE; } .navbar .nav>li.dropdown:after { content: ''; display: none; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; position: absolute; bottom: 0; left: 50%; margin-left: -3px; margin-bottom: -1px; } .navbar .nav>li.dropdown:hover:after { display: block; } .navbar .nav>li .dropdown-menu:after, .navbar .nav>li .dropdown-menu:before { display: none; } .navbar-inverse .navbar-nav > .dropdown:active > a, .navbar-inverse .navbar-nav > .dropdown:hover > a, .navbar-inverse .navbar-nav > .dropdown:focus > a { background-color: #080808; color: #FFFFFF; } .navbar .nav>li>.dropdown-menu:before { content: none; } .navbar .nav>li>.dropdown-menu:after { content: none; } .navbar .nav>li>.dropdown-menu:first-of-type:before { content: ""; } .navbar .nav>li>.dropdown-menu:first-of-type:after { content: ""; } .navbar .dropdown-menu ul { display: table-cell; } } /* Medium devices; Laptops & Desktops (≥992px) Lets add the styling required for medium sized devices from 992 pixels to 1199 pixels */ @media (min-width: 992px) { /* Structure */ #content { width: 100%; } #column-left + #content { width: 83.33333333333334%; } #column-left + #content .product-grid .col-md-3 { width: 33.33333333%; } #column-right + #content { width: 83.33333333333334%; right: 16.666666666666664%; } #column-right + #content .product-grid .col-md-3 { width: 33.33333333%; } #column-left + #column-right + #content { width: 66.66666666666666%; } #column-left + #column-right + #content .product-grid .col-md-3 { width: 50%; } #column-right { left: 83.33333333333334%; } #column-left + #column-right { left: 66.66666666666666%; } } /* Large devices; Desktops (≥1200px) Lets add the styling required for the big boy devices from 1200 pixels and greater */ @media (min-width: 1200px) { }