/* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Site Styles ================================================== */ /* #Page Styles ================================================== */ body {padding-bottom:100px; background:rgba(0,0,0,0.04);; height:100%; color:#333;} fieldset {min-width: 180px;} .container {margin:0px auto 0;} div, p { line-height: 22px; font-size:15px; } h1, strong { color: #333 !important; } h1.remove-bottom {padding:0; margin:0; padding-top:40px;} .logo-alt {display:none;} /* home logo */ body.home .container h1.remove-bottom { background-color:rgba(102,102,102,0.80);} body.home .container #searchPanel, body.home .container .socialToolsPanel {display:none;} body.home .container nav {margin-top:44px;} body.home .container .logo-alt a, body.home .container h2.logo-alt a:link, body.home .container .logo-alt a:visited { padding:0 !important; margin:0 !important; text-decoration:none; height:101px; border:none} body.home .container .logo-alt { display:block; padding:0; margin:0; margin-top:-57px; height:101px; position:absolute;} .logo-alt { padding: 0; margin: 0; margin-top: -57px; height: 101px; position: absolute; } /* grids */ .grid .itemContainer {display:block; float:left; background-color:#fff; margin-right:20px; margin-bottom:20px; position:relative; } .grid .itemContainer.last-in-row {margin-right:0;} input[type="submit"].edit {padding:5px; border-radius:3px; background-color:#147A3D; color:#fff;} #mainLoad {position: relative; z-index: 1;} #menu-bg {overflow:hidden; position:absolute; top:0; height:0; z-index:0; width:300px; opacity:0;} #menu-bg div {background-color:rgba(255,255,255,0.80); position:absolute; height:100%; width:100%; top:0;} .logo-alt img {max-width:none !important;} .container .four.columns { position:relative; } .banner .itemContainer .itemContent {background:url(siteimages/rollover-full-333333-60.png) no-repeat bottom right;} .itemContainer .itemContent { top:0; padding:6px; line-height:22px; color:#fff; cursor:pointer; display:block; z-index:10; position: absolute; } .banner .itemContainer .itemContent { text-transform:uppercase; } .banner .itemContainer .itemContent strong { font-size:24px; line-height:24px; text-transform:uppercase; letter-spacing:-2px; } .itemContainer .backgroundBlock { background:#333; min-height:30px; position:absolute; top:0; width: calc(100% - 4px); margin:2px; padding:6px 0;} .itemContainer .itemContent a:link, .itemContainer .itemContent a:visited, .itemContainer .itemContent a:hover, .itemContainer .itemContent a:active {color:#333; text-decoration:none; display: block; position: absolute; vertical-align: baseline; bottom: 0; padding:0 0 2px 5px; text-align: left; line-height: 18px;} .hover-border {border:5px solid rgba(0,0,0,0.4) !important; position:absolute; width:calc(100% - 14px); height:calc(100% - 14px); display:none;} .itemContainer .hover {position:absolute; opacity:1 !important; width:calc(100% - 4px); height:calc(100% - 4px); top:2px; left:2px; background-color: rgba(0,0,0,0.3) !important; /*background:linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2),rgba(255,255,255,0.8),rgba(255,255,255,0.8),rgba(255,255,255,0.2),rgba(255,255,255,0.2)) !important;*/ z-index: 10; cursor:pointer;} .itemContainer .itemImage a {display:block; width:100%; height:100%;} .small .itemContainer {width:100px; height:100px;} .small .itemContainer .itemImage {display:block; width:96px; height:96px; margin:2px;} .small .itemContainer .itemImage img {width:96px; height:96px; position:absolute; top:2px; } .small .itemContainer .itemContent {margin-top:85px; text-align:center;} .small .itemContainer .itemContent {font-size:12px; line-height:13px; font-weight:700;} .small .itemContainer .itemContent a {font-size:11px; line-height:14px;} .med .itemContainer {width:220px; height:220px;} .med .itemContainer .itemImage {display:block; width:216px; height:216px; margin:2px; background-color:transparent !important; } #e-all.itemContainer .itemImage {background-color:#444 !important;} .med .itemContainer .itemImage img {width:216px; height:216px; position:absolute; top:2px; } .med .itemContainer .itemContent { margin-top:0; margin-left: 2px; text-align:center; font-weight:700; font-size: 15px; width: 200px; height: 200px;} .itemContainer.nextNav .itemContent {margin-top:0px; text-align:center; vertical-align:central; background-position:bottom left; font-weight:bold;cursor:default; } .small .itemContainer.nextNav .itemContent {line-height:96px; width:88px; padding-right:6px; } .med .itemContainer.nextNav .itemContent {line-height:216px; width:208px; padding-right:6px; } .med .itemContainer.nextNav .itemContent .navSymbol { display:inline-block; height:208px; width:60px; font-size:1.3em; } .small .itemContainer.nextNav .itemContent .navSymbol { display:inline-block; height:88px; width:21px; } .itemContainer span.price {display:block; font-size:15px;} .banner .itemContainer { display:block; float:left; margin-right:0; width:940px; height:474px; } .banner .itemContainer .itemImage {display:block; width:936px; height:470px; padding:2px ; float: left; } .banner .itemContainer .itemImage img {width:936px; height:470px; } /* .banner .itemContainer .itemContent {display:block; display:inline-block; margin-top:-354px; padding-right:2em; position:absolute; } */ .banner .itemContainer .itemContent {display:block; display:none; margin-top:-474px; padding-right:2em; position:absolute; } .banner .itemContainer:active .itemContent, .banner .itemContainer:hover .itemContent, .itemContent, .banner .itemContainer:visited .itemContent {margin-top:-474px;} .banner .itemContent strong {color:#fff;} a.add-to-basket .remove {background-image:url('siteimages/cross.png'); background-repeat:no-repeat; background-size:contain; background-position:50%; opacity:0.6; cursor:pointer;} a.add-to-basket .remove:hover {opacity:1;} a.button span.reset {background-image:url('siteimages/reset.png');} a.button span.update {background-image:url('siteimages/basket.png');} a.button span.update, a.button span.reset {background-repeat:no-repeat; background-size:30px; background-position:58px 58px; cursor:pointer;} .columns a.button.update, .columns a.button.undo {float:left;} a.button.update:not(.active), a.button.undo:not(.active) {background-color:#ccc !important;} .bannerImages {overflow:hidden; max-width:100%;} a.add-to-basket {position:relative;} a.add-to-basket.active .basket {background-color:#bbb; color:#fff; background-image:url('siteimages/basket.png');} a.button.update.active .update {background-color:#aaa; color:#fff; background-image:url('siteimages/basket.png');} a.add-to-basket.active .count {color:#fff; cursor:pointer;} a.add-to-basket.active:hover .basket {background-color:#999;} a.add-to-basket span.remove {border:none; position:absolute; min-height:2px; height:15px; width:15px; top:15px; right:15px; margin:0; padding:0; display:none;} a.add-to-basket span.count {background:none; border:none; position:absolute; min-height:20px; top: 50px; color: #777; text-align: center; font-size: 30px;} a.add-to-basket span.count input {background:none; width:32px; height:20px; line-height:20px; min-height:20px; margin:0; display:inline-block; padding:5px; text-align:center; font-size:25px; font-weight:900;} .underline {margin-top:5px; background:#333 !important;} .mini.banner .itemContainer {height:90px;} .mini.banner .itemContainer .itemImage {height:86px; overflow:hidden; } .mini.banner .itemContainer .itemContent, .mini.banner .itemContainer:link .itemContent, .mini.banner .itemContainer:visited .itemContent, .mini.banner .itemContainer:hover .itemContent, .mini.banner .itemContainer:active .itemContent {margin-top:-90px; min-height:78px;} .mini.banner .itemContainer .itemContent h2 {padding-top:2px; color:#eee;} .mini.banner .itemContainer .itemContent h2 span {font-size:16px;} /* bannerNav */ .bannerNav { padding:0; margin:0; } .bannerNav a { background-image:url(siteimages/icons-23x25.png); background-repeat:no-repeat; margin-top:8px; margin-bottom:8px; line-height:23px; text-decoration:none; color:#333; } .bannerNav a.previousNav { float:left; background-position:left -150px; text-align:left; padding-left:23px; } .bannerNav a.nextNav { float:right; background-position:right -175px; text-align:right; padding-right:23px;} .bannerNav a:hover {color:#999;} /* bannerThumbs */ .banner .bannerThumbs {text-align:center; margin-top:-10px;} .banner .bannerThumbs .itemContainer {background-color:#fff !important; height:auto; width:auto; float:none; opacity:1 !important; display:inline-block; margin:-36px 3px 0; border-radius: 5px;} .banner .bannerThumbs .itemContainer .itemImage img {width:auto; height:48px; border-radius: 3px;} .banner .bannerThumbs .itemContainer .itemImage {width:auto; height:48px; padding:3px; } .banner .bannerThumbs .itemContainer .itemContent {display:none;} .banner .bannerThumbs .itemContainer.current, .banner .bannerThumbs .itemContainer:hover, .banner .bannerThumbs .itemContainer:active, .banner .bannerThumbs .itemContainer.active { background-color:rgba(0,0,0,0.5) !important; -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); box-shadow: 0 0 3px rgba(0,0,0,.2); } /* lists in body copy */ .bodytext ul, .textBlock.overlay ul {list-style:disc outside;} .bodytext ul li {margin-left:20px; font-weight:300; color:#333;} .textBlock.overlay ul li {margin-left:20px;} /* special handling of columns */ .twelve.columns {padding-top:46px;} .four.columns.overlay {background-color:transparent;} .twelve .six.columns, .twelve .eight.columns, .twelve .four.columns {margin-left: 0px; margin-right: 0; } .twelve .eight.columns {margin-left: 0px; margin-right: 20px; } .twelve .four.columns {margin-left: 0px; margin-right: 0px; } /* buttons */ input[type="submit"] {margin:0; padding:0; border:none;} .overlay span.button input[type="submit"] {margin:0; padding:0; text-align:left; vertical-align:baseline; color:red;} .button {display:block; float:left; margin:10px 10px 0 0; width:110px; padding:0; background-color:rgba(0,0,0,0.5) !important; border-radius:12px; } .button span, .button input {display:block; margin:5px; padding:10px; min-height:80px; width:80px; border:none !important; } p .button:first-child {margin:10px 10px 0 0;} .six.columns .button {margin:20px 0px 0 10px;} .six.columns p .button:first-child {margin:20px 0px 0 0;} .button span:hover {background-color:rgba(255,255,255,1); } .button span, .button input {background-color:rgba(255,255,255,1); font-weight:400; color:#333;} .button span, .button input {background-image:url(siteimages/icons-23x25.png); background-repeat:no-repeat; background-position:63px -913px; border-radius: 10px;} .button .email {background-position:63px -313px;} .button .dwnrht {background-position:63px -413px;} .button .uprht {background-position:63px -513px;} .button .lft {background-position:63px -613px;} .button .rht {background-position:63px -713px;} .button .up {background-position:63px -813px;} .button .dwn {background-position:63px -913px;} .button .basket {background-image:url('siteimages/basket-ccc.png'); background-size:30px; background-position:63px 58px; background-repeat:no-repeat; cursor:pointer;} .button.buy-online span { background-color: #999; color:#fff;} .button .minus, .count .minus {background-image:url('siteimages/minus.png'); position: relative; z-index: 100;} .button .plus, .count .plus {background-image:url('siteimages/plus.png'); position: relative; z-index: 100;} .add-to-basket .basket {background-position:63px 10px;} .cell-content .icon {display:inline-block; width:20px; height:30px; background-size:80%; background-position:50% 50%; background-repeat:no-repeat; cursor:pointer; padding:0; margin:0;} .cell-content input[type=text] {width:30px; display:inline-block; padding:5px; margin:0 10px;} .button .minus, .button .plus {background-color:transparent; display:inline-block; width:15px; height:15px; padding:0; min-height:0; background-size:contain; margin:0; border-radius: 0; background-position:50%; cursor:pointer;} .button .minus:hover, .button .plus:hover {background-color:transparent;} .basketProducts .button .minus {background-image:url('siteimages/minus-white.png'); height:12px;} .basketProducts .button .plus {background-image:url('siteimages/plus-white.png'); height:12px;} .four nav li.level2:last-of-type {margin-bottom:30px;} body .four nav ul.level3 {margin-top:-20px; margin-bottom:10px;} /* BASKET */ #basketFooter {overflow:hidden; display:none; height:120px; min-width:100%;} #basketFooter .itemContainer {display:block; float:left; height:80px; width:80px; border-radius:5px; position:relative; overflow: hidden; margin-left: 10px;margin-top: 20px;} #basketFooter .itemContainer img {height:80px; width:auto;} #basketFooter .itemContainer .hover {height:100%; width:100%; left:0; top:0; margin:0; opacity:0.4; display:block;} #basketFooter .itemContainer:hover .hover {opacity:0.6;} #basketFooter .itemContainer .itemContent {width: 68px; height: 68px; text-align: center; position:absolute; top:0; margin-top:0;} #basketFooter .itemContainer .itemContent a {width: 68px; height: 68px; text-align: center; font-size: 25px; font-weight: 900; line-height: 68px;} footer .basketContent {overflow:scroll;} .basketContent {background-color: #333;} .basketDetails {width:200px; margin:15px 0 0 0; float:left;} .basketDetails ul li {color:#eee; margin:0; font-size:12px; line-height:14px;} .basketDetails ul li:first-child {font-size:18px; line-height:30px; color:#fff; border-bottom:1px solid #eee; margin-bottom:8px;} .basketDetails ul li strong {color:#ddd;} .basketDetails ul li.button { border-radius: 8px; background-color: rgb(99, 177, 68); color: #fff; text-align: center; font-size: 13px; padding: 5px 0; margin-top:5px; font-weight:100; color:#fff; cursor:pointer; text-decoration:none; } .basketDetails ul li.button a { color: #fff; text-decoration:none; } .basketDetails ul li.button:hover { background-color: rgba(82,146,56,1.00); } .basketProducts {width:calc(100% - 300px); float:left; overflow:scroll;} .basketProducts .basketList {} .basketIcon { background-image:url('siteimages/basket.png'); background-size:50%; background-position:40% 60%; background-repeat:no-repeat; width:80px; height:120px; float:left; font-size: 20px; font-weight: 900; color: #fff; text-align: center; line-height: 70px; vertical-align: bottom; } .basketSmall {width:60px; height:30px; background-image:url('siteimages/basket-ccc.png'); background-repeat:no-repeat; margin-left:10px; background-size:20px; background-position:5% 50%; display:block; float:left;} .basketSmall .basketCount { font-size: 16px; color: #ccc; font-weight: 900; display: block; text-align: right; margin-top: 5px;} .eight textarea.full { width: calc(100% - 10px); height: 120px; margin:20px 0 40px 0; } /* pages using background overlay */ .four.columns.overlay .button {margin: 0 10px 10px 0px; width:110px; padding:0; } .four.columns.overlay .button span, .four.columns.overlay .button input { display:inline-block; color:#333;} .four.columns.overlay .button {margin-bottom:10px; float:none;} /*.overlay, .four.columns.overlay .button, .four.columns.overlay .button span, .four.columns.overlay .button input { background-color:rgba(235,235,235,0.70); }*/ .overlay { background-color:rgba(255,255,255,.8); } .overlay, .overlay *, .overlay a:link, .overlay a:visited {color:#333;} .four.columns.overlay .button:hover {background-color:#999; color:#fff; } .bodytext {padding:40px 2px 10px 2px;} .textBlock { padding:16px 10px;} .textBlock.overlay {min-height:569px; margin-bottom:16px; padding:20px; color:#333; border-radius:5px;} /* product pages */ .eight.columns > p {margin-right:10px;} .product>.eight.columns, .basket>.eight.columns {width:580px; margin-right:10px; } .product>.seven.columns, .basket>.seven.columns {margin-right:10px; } .product>.eight.columns select, .product>.seven.columns select {width:calc(100% - 20px);} .product>.four.columns, .basket>.four.columns, .product>.five.columns, .basket>.five.columns { background-color:rgba(0,0,0,0.05); padding:30px 15px 20px 30px; margin-top:-10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 5px; border:none !important; } .basket>.five.columns, .basket>.six.columns { float:right; } /* designer pages */ .designer.text>.twelve.columns { padding-top:0; padding-bottom:21px; -moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap : 20px; } /* search bar */ #searchPanel {margin:0; padding:4px; height:36px; position:relative; margin-bottom: 10px;} #searchPanel input {padding-left:2px; padding-right:2px; margin:0; border:none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; display:inline-block;} #searchPanel input[type=submit] { width:30px; height:30px; margin:0px; /*position:absolute; margin-top:-30px;*/ background-color:transparent; float:right; margin-top:-30px;} #searchPanel input[type=submit]:hover, #searchPanel input[type=submit]:active { } #searchPanel input#search {height:30px; line-height:30px; width:154px; background:transparent; margin:3px 0 0 0; padding:0; padding-left:28px; padding-right:30px; background-image:url(siteimages/icons-23x25.png); background-repeat:no-repeat; background-position: 2px 2px; } #searchPanel input#search:focus, #searchPanel input#search.active {background-color:rgba(238,238,238,1.0); border:none;} #searchPanel input#search.active {width:calc(100% - 58px) !important; cursor:auto !important;} /* sharetools */ .socialToolsPanel {float:right; /* margin-top:-34px; */ margin-right:10px; margin-top:-33px; } .socialShareList li span.link span {display:none;} .socialShareList li span.link {display:block; width:23px; height:23px; background-image:url(siteimages/icons-23x25.png); background-repeat:no-repeat;} .socialShareList li.email span.link { background-color:rgba(48,177,154,0.6); background-position:center -25px;} .socialShareList li.email span.link:hover { background-color:rgba(48,177,154,1.00)} .socialShareList li.facebook span.link {background-color: rgba(85,125,186,0.6); background-position:center -50px;} .socialShareList li.facebook span.link:hover {background-color: rgba(85,125,186,1.00);} .socialShareList li.pinterest span.link { background-color:rgba(235,98,99,0.6); background-position:center -75px;} .socialShareList li.pinterest span.link:hover { background-color:rgba(235,98,99,1.00)} .socialShareList li.twitter span.link { background-color:rgba(110,204,236,0.6); background-position:center -100px;} .socialShareList li.twitter span.link:hover { background-color:rgba(110,204,236,1.00)} .socialShareList li.instagram span.link { background-color:rgba(177,174,152,0.6); background-position:center -125px;} .socialShareList li.instagram span.link:hover { /*background-color:rgba(140,199,127,1.00);*/ background-color:rgba(177,174,152,1);} .option-details {margin-top:20px; margin-bottom:40px;} .option-details select {margin-bottom:5px; width:calc(100% - 40px) !important;} .option-details h6 {margin-bottom:10px; font-size: 22px; line-height:28px;} .option-details .three, .option-details .five {margin:0;} .two.columns.omega {margin-left:0;} /* nav */ li a.prevmenu, li a.nextmenu {padding-left: 40px; display: inline-block; text-decoration: none; color: #777; cursor:pointer;} .four nav ul.level3 li {margin-bottom:5px;} .four nav ul.level3 li:first-child {margin-top:30px;} .four nav ul.level3 li:last-child {margin-bottom:20px;} .four nav ul, .four nav li {padding:0; margin:0;} .four nav li { padding:0; margin:0; color:#fff; overflow:hidden;} .four nav li a:link , .four nav li a:visited { display:inline-block; height:36px; margin:0; padding:0 0 0 8px; color:#333; text-decoration:none;} .four nav ul.level1 li a:hover { color:#666;} .four nav li a span {display:block; vertical-align:middle;} .four nav li.level2 a:link, .four nav li.level2 a:visited {color:#333; padding-left:20px;} .four nav li.level3 a:link, .four nav li.level3 a:visited {color:#333; padding-left:40px;} /* .four nav ul.level1 li a:hover, .four nav ul.level1 li a:active { background-color:#ccc; color:#666;} */ /* handling of expandNavLink */ .four nav li a.expandNavLink, .four nav li a.expandNavLink:link, .four nav li a.expandNavLink:visited {background-color:transparent; display:block; height:23px; line-height:23px; text-decoration:none; width:20px; background-image:url(siteimages/icons-23x25.png); background-repeat:no-repeat; background-position:1px -150px; position:absolute; margin:10px 0px 11px -20px;} .four nav ul.level1 li a.expandNavLink:hover, .four nav ul.level1 li a.expandNavLink:active { background-color:transparent; background-position:-1px -150px;} .four nav li a.expandNavLink span {display:none;} .four nav li a.scrollLink, .four nav li a.scrollLink:link, .four nav li a.scrollLink:visited { padding:0; background-color:transparent; display:block; height:33px; line-height:33px; text-decoration:none; width:23px; background-image:url(siteimages/icons-23x25.png); background-repeat:no-repeat; margin:-38px 0px 0px 0px; float:right;} .four nav li a.scrollLink.up {background-position:center -195px;} .four nav li a.scrollLink.down {background-position:center -220px;} .four nav ul.level1 li a.scrollLink.up:hover, .four nav ul.level1 li a.scrollLink.up:active {background-color:transparent; background-position:center -197px;} .four nav ul.level1 li a.scrollLink.down:hover, .four nav ul.level1 li a.scrollLink.down:active {background-color:transparent; background-position:center -218px;} .four nav li a.scrollLink span {display:none;} .basket .itemContainer {vertical-align:top; margin-bottom:20px; border-bottom:1px solid #ddd; padding-bottom: 30px;} .basket .itemContainer:last-child {border-bottom:none;} .basket .itemContainer .itemContent {margin-top:0; display:inline-block; vertical-align: top; color:#666; font-size:12px; width:55%; margin-left:10px; padding:0;} .basket .itemContainer .itemContent h4 {line-height:30px; vertical-align:top; font-size:18px;} .basket .itemContainer .itemImage {display:inline-block; max-width:150px; width:40%; margin-top: 40px;} .basket .button {padding:10px; color:#fff; text-align:center; border-radius:5px; width:auto; } .basket .itemContainer .button {padding:5px; width:auto; float:none; margin:15px 0 0 0; display: inline-block;} .basket input[type=text], .enquiries input[type=text], .enquiries input[type=email] {width:calc(100% - 10px); border-radius:5px; padding: 15px 0 0 10px; height: 35px; vertical-align: bottom;} .basket .count input[type=text] {display:inline-block; width:30px; margin:0; padding:4px; text-align:center; height:12px;} .basket .count .icon {width:16px; height: 16px; display: inline-block; background-size: contain; position: relative; z-index: 100;} .basket div.count {margin-top: -10px;} .basket label, .enquiries label {margin: 2px 0 0 10px; position: absolute; color: #999; font-weight: 400;} footer, .footer {position:fixed; z-index:2000; bottom:0; display:block; clear:both; width:100%; background-color:#444;} footer .container, .footer .container {width:100%;} footer .copyright {} #fullimage {width:100%; height:100%; display:none; position:fixed; background-color:rgba(20,20,20,1); z-index:9999; top:0; left:0;} #fullimage div {margin:10px; width:calc(100% - 20px); height:calc(100% - 20px); background-position:50% 50%; background-size:contain; background-repeat:no-repeat;} .footerControl .show {display:block; background-position:center -253px;} .footerControl .hide {display:none; visibility:hidden; background-position:center -278px;} .footerControl {display: block; float:right; margin-top:-8px; height:8px; margin-right:8px;} .footerControl a {display: block; float:right; height:16px; width:16px; line-height:16px; padding:0; margin:0; background-color:#ccc; background-image:url(siteimages/icons-23x25.png);} .footerControl a:hover, .footerControl a:active {background-color:#333;} .footerControl a span {display:none;} #footerContent { display:block; clear:both; padding-top:1px; cursor:pointer;} #footerContent.hide {height:30px; overflow:hidden;} #footerContent nav {color:#fff; display:inline-block; width:calc(100% - 100px); text-align:right; height:31px; float:right;} #footerContent nav ul {margin:0; padding:0;} #footerContent nav li {color:#fff; display:inline-block; margin: 0; padding: 0; line-height: 30px; vertical-align: middle; margin-bottom: 2px;} #footerContent nav li a, #footerContent nav li a:link, #footerContent nav li a:visited {text-decoration:none; color:#fff; cursor:pointer; vertical-align: top; display: block;} #footerContent nav li.level1 {font-weight:bold;} #footerContent nav li.level1.copyright, #footerContent nav li.level1.number {position:relative; padding:0; margin:0 20px 0 10px; font-weight:200;} #footerContent nav ul.level2 {margin-left:0; list-style:disc outside; color:#fff;} #footerContent nav li.level2 {font-weight:normal; margin:0; margin-left:10px;} #scrollHeader {display:none; height:35px; line-height:35px; vertical-align:middle; background:#666; color:#fff; position:fixed; top:0; width:100%; margin-top:-35px; z-index:999;} #scrollHeader div div {float:left; text-transform:uppercase;} #scrollHeader .logo {background:url(siteimages/catapult-light.png); background-repeat:no-repeat; background-size:auto 28px; width:220px; height:28px; margin-top:3px; margin-left:20px;} #scrollHeader .breadcrumb {margin-left:10px; font-size:12px;} #scrollHeader .breadcrumb ul li {display:inline-block; margin-left:5px; line-height: 36px;} #scrollHeader .breadcrumb ul li:after {content:" / ";} #scrollHeader .breadcrumb ul li:last-child {font-weight:bold;} #scrollHeader .breadcrumb ul li:last-child:after {content:"";} #scrollHeader .skip-to-menu {display:block; float:right; margin-right:20px; height:25px; width:75px; margin-top:5px; cursor:pointer;} #scrollHeader .skip-to-menu div.text {line-height:27px; vertical-align:middle;} #scrollHeader .skip-to-menu div.icon {width:25px; height:25px; float:right;} #scrollHeader .skip-to-menu div.icon div.line {height:3px; width:100%; background:#eee; margin-top:4px;} #scrollHeader .skip-to-menu:hover div.text {color:#ccc;} #scrollHeader .skip-to-menu:hover div.icon div.line {background:#ccc;} #scrollHeader a {text-decoration:none; color:#eee;} #scrollHeader a:hover {text-decoration:none; color:#ccc;} #mainLoader {margin-top:0; position:fixed; top:calc(50% - 25px);} input[value=Edit] { border-radius: 5px; border: 1px solid #ff9900; background-color: #ff6600; color: #fff; margin:10px 0; cursor:pointer; text-transform:uppercase; padding:5px; } input[value=Edit]:hover { background-color: #ff9900; } .alert {border:1px solid #ff9900; box-shadow:0 0 2px #ff9900;} .not-available {opacity:0.5;} .table {display:table; border:1px solid #999; font-size: 12px;} .table-row, .table-row-header {display:table-row; background-color:#ccc; margin:5px; padding:5px;} .table-row-header {background-color:#444; color:#fff;} .table-row:nth-child(odd) {background-color:#ddd;} .table-cell {display:table-cell; padding:5px;} .table-cell .cell-content {padding-top: 8px; min-height:35px;} .table-cell.select-amount .cell-content {padding-top:3px;} .table input[type=text] {width:calc(100% - 54px); font-size:11px; padding:2px; height:20px; margin:0; display:inline-block; vertical-align:top; border:none; margin-top:5px;} .order-table {width:calc(100% - 20px); border-radius:5px 5px 0 0; margin-top: 10px;} .order-table * {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} .order-table .table-cell {width:30%; padding:0; margin:0; vertical-align: top;} .order-table .table-row-header .table-cell {padding-left:10px; height:35px; line-height:35px; vertical-align:middle;} .order-table .table-row-header .table-cell:first-child {border-radius:3px 0 0 0;} .order-table .table-row-header .table-cell:last-child {border-radius:0 3px 0 0;} .order-table .table-row {background-color:#fff;} .order-table .table-cell div.cell-content {margin:0; padding-left:10px; height:30px; line-height:18px; vertical-align:middle; cursor:pointer; overflow: hidden; min-height: 35px;} .order-table .table-cell div.cell-content span.price {font-size:11px; font-style:italic;} .order-table .table-cell div.cell-content:nth-child(odd) {background-color:#eee;} .order-table .table-cell div.cell-content:hover {background-color:#ccc;} .order-table .table-cell div.cell-content.active {background-color:#999; color:#fff;} .order-table .table-cell div.cell-content.selected {background-color:#ccc; color:#333;} .order-table .hide {display:none;} .order-table .table-row .select-size .cell-content, .order-table .table-row .select-finish .cell-content {min-height:35px; height:auto; font-size:14px; padding-right:5px; padding-bottom: 7px;} .radio-option { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-size:13px; } ul.radio-option li {display:inline-block; width:30%; padding:5px; background-color:#ccc; margin:3px 0 0 0; cursor:pointer;} ul.radio-option li:nth-child(odd) {background-color:#ddd;} ul.radio-option li:hover, ul.radio-option li.active {background-color:#666; color:#fff;} ul.radio-option li input {display:inline-block; width:22px;} #maximage {display:none;} .four nav li a.level2:link, .four nav li a.level2:visited {height:auto;} .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } /* #Media Queries ================================================== */ @media only screen and (min-width:1300px) { .four nav li a span { font-size: 120%; } .four nav li a:link, .four nav li a:visited { height: 40px; } } @media only screen and (min-width: 768px) { .med.mixed .itemContainer:first-child { width:460px; height:460px; margin-right:20px; margin-bottom:20px; font-size:30px;} .med.mixed .itemContainer:first-child .itemImage {display:block; width:456px; height:456px; margin:2px; } .med.mixed .itemContainer:first-child .itemImage img {width:456px; height:456px; } .med.mixed .itemContainer:first-child .itemContent { margin-top: 245px; background-position:bottom right; } .med.mixed .itemContainer:first-child .itemContent a {font-size: 26px; padding-bottom: 10px; line-height: 28px; width: 400px;} } @media only screen and (max-width: 979px) { .banner .bannerThumbs {display:none; visibility:hidden;} .basket .six.columns, .basket .five.columns {float:none; width:100%; background-color:transparent;} .product > .four.columns, .basket > .four.columns, .product > .five.columns, .basket > .five.columns {padding: 30px 10px 20px 30px;} } @media only screen and (max-width: 1279px) { ul.radio-option li {width:calc(50% - 15px);} } @media only screen and (min-width: 980px) and (max-width: 1279px) { .text.twelve.columns {margin-left:70px; width:630px;} .text .four.columns.overlay {width:100%;} .text .four.columns.overlay .button {float:left;} .text .four.columns.overlay {width:100%;} .text .eight.columns .textBlock, .text .eight.columns {min-height:0px; width:100%; margin-right:0;} .grid .itemContainer.last-in-row {margin-right:20px;} .product>.four.columns { margin-top:10px; width:220px; } .product>.eight.columns {width:420px; margin-right:10px; } .twelve.columns .grid {width:720px;} .banner .itemContainer { width: 700px; height:354px; } .banner .itemContainer .itemImage { width:696px; height:350px;} .banner .itemContainer .itemImage img {width:696px; height:350px; } .banner .itemContainer .itemContent { margin-top:-354px;} .banner .itemContainer:active .itemContent, .banner .itemContainer:hover .itemContent, .itemContent, .banner .itemContainer:visited .itemContent { margin-top:-354px;} .banner .bannerThumbs .itemContainer .itemImage img { width: auto; height: 45px; } .banner .bannerThumbs .itemContainer .itemImage { width: auto; height: 45px; padding: 3px; } } @media only screen and (min-width: 768px) and (max-width: 979px) { .banner .itemContainer { width: 556px; height:282px; } .banner .itemContainer .itemImage { width:552px; height:278px;} .banner .itemContainer .itemImage img {width:552px; height:278px; } .banner .itemContainer .itemContent { margin-top:-282px;} .banner .itemContainer:active .itemContent, .banner .itemContainer:hover .itemContent, .itemContent, .banner .itemContainer:visited .itemContent { margin-top:-282px;} .product>.four.columns { margin-top:20px; width:510px; } .product>.eight.columns {width:550px; margin-right:0; } .text.twelve.columns {margin-left:65px; width:450px;} .text .four.columns.overlay .button {float:left;} .text .four.columns.overlay {width:100%;} .text .eight.columns .textBlock, .text .eight.columns {min-height:0px; width:100%; margin-right:0;} #menu-bg {width: 192px;} } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { div, p { font-weight: 400; } ul.radio-option li {width:100%;} #menu-bg {height:610px !important; width:100% !important;} #mainLoad { margin-left: -10px; } .four.columns.overlay .button {margin-bottom:16px; float:left; } .product>.four.columns { margin-top:20px; width:406px; } #menu-bg {margin-left: -10px;} .product>.eight.columns {width:280px; margin-right:0;} .product>.eight.columns h1 {display:none;} .designer.text>.twelve.columns { padding-bottom:0px; -moz-column-count: 1; -webkit-column-count: 1; } .grid.med {margin-left:10px;} .grid .itemContainer { /*margin-left:calc(50% - 110px);*/ float: left; } .med .itemContainer { width: 200px; height: 200px; } .med .itemContainer .itemImage, .med .itemContainer .itemImage img { width: 196px; height: 196px; } .grid .itemContainer.last-in-row { margin-right: 20px; } .med .itemContainer .itemContent {margin-top: -20px;} .banner .itemContainer { width: 280px; height:142px; } .banner .itemContainer .itemImage { width:276px; height:138px;} .banner .itemContainer .itemImage img {width:276px; height:auto; } .banner .itemContainer .itemContent { margin-top:-213px;} .banner .itemContainer:active .itemContent, .banner .itemContainer:hover .itemContent, .itemContent, .banner .itemContainer:visited .itemContent { margin-top:-213px;} #scrollHeader .container {width:100%;} #scrollHeader .logo {width:30px; margin-left:10px;} #scrollHeader .breadcrumb {width:calc(100% - 135px); text-align:center;} #scrollHeader .breadcrumb ul li {display:none;} #scrollHeader .breadcrumb ul li:last-child {display:inline-block; font-size:12px;} #scrollHeader .skip-to-menu {margin-right:10px; cursor:pointer;} #mainLoader {left:calc(50% - 25px) !important; margin-left:0 !important;} .left, .right {float:none;} .left a, .right a {margin-top:10px !important;} #menu-bg div {border-radius:0 0 5px 5px;} } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { .product>.eight.columns {width:450px;} .banner .itemContainer { width: 450px; height: 215px; } .banner .itemContainer .itemImage { width:446px; height:209px;} .banner .itemContainer .itemImage img {width:446px; height:auto; } body > .container { padding-left: 25px; } #menu-bg { width:450px !important; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { #scrollHeader .breadcrumb {overflow: hidden;} .breadcrumb ul { width: 600px; text-align: left;} #scrollHeader .skip-to-menu div.text {display:none;} .grid .itemContainer { margin-left: calc(50% - 100px); float: none; } #maximage {display:none !important;} /*footer, .footer {display:none; visibility:hidden;}*/ .product>.four.columns { margin-top:10px; width:calc(100% - 40px); } #menu-bg {width:calc(100% - 40px); margin-left: 0;} .product>.eight.columns {width:100%; margin-right:0;} .button {margin-bottom: 10px;} .banner .itemContainer .itemContent { margin-top:-152px;} .banner .itemContainer:active .itemContent, .banner .itemContainer:hover .itemContent, .itemContent, .banner .itemContainer:visited .itemContent { margin-top:-152px;} #mainLoad { margin-left:0;} .g-recaptcha > div:first-child {margin-left: -20px;} .container > .four.columns > * {margin-left:20px;} #searchPanel input#search {margin-left:20px;} .basketProducts {display:none;} #footerContent .level1.copyright {display:none;} #footerContent nav ul {margin-top: 2px; margin-right: 5px;} } @media only screen and (min-width: 320px) and (max-width: 479px) { .banner .itemContainer { width: 300px; height:153px; } .banner .itemContainer .itemImage { width:296px; height:148px;} .banner .itemContainer .itemImage img {width:296px; height:auto; } }