html, body {height: 100%;padding: 0;}
body, nav, ul, li, a {margin: 0; padding: 0;}
/* END MEYER RESET */
/* ============================== */
/* ! TYPOGRAPHY */
/*=============================== */
html { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 90%; line-height: 1.429; color: #2c2c2c; font-weight: 500; }
input { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 100%; line-height: 1.429; color: #2c2c2c; }
h1, h2, h3, h4, h5, h6, #header p, .categorytitle, a.toggleMenu, button, #button, a.button, input.addCart, input#SubmitCheckout, input.usethis, input.payment, input.guest, input.login {font-weight: 500;}
#categories h3, #products h3 { font-family: 'Roboto', Arial, Helvetica, sans-serif;/* text-transform: uppercase; */}
/* Colours */
/* #050505 black*/
h2, h3, h4, nav#mainMenu ul li a, a.toggleMenu, h2.toolBox, p.cart strong, #searchheader {color: #4a4a4a;}
/* #2c2c2c dark grey */
#leftMenu ul a, h2.toolBox {color:#2c2c2c;}
/* #999d9e light grey */
#header p span, #phone em, h2.toolBox span{ color:#999d9e; }
/* #09b5d5 blue */
.bluetxt, h1, #phone strong, nav#mainMenu ul li a:hover, .parent { color:#09b5d5; }
.blue, body.Home h1, body.index h1, body.ProductsProducts-12 h1, #rightcol h1, #rightcol h5, .blocks h1{ background-color:#09b5d5;} /*3257a8*/
/* #fd4a21 orange */
/* white*/
body.Home h1, #rightcol h1, .blocks h1, #rightcol h5, body.ProductsProducts-12 h1, body.index h1, .blue h3, .blue, .blue a, button, #button, a.button, .addmessage, nav#mainMenu ul li a.activerootmenulink,
.blue input#Submit1,
input#addCart,
body.viewcart input[type=submit],
input#SubmitCheckout,
body.viewform input[type=submit],
#footer a, #footer {color:#fff;}
/* Headings */
h1, h2.toolBox, #product h2, #rightcol h1, #rightcol h5 {font-size: 130%;}
h1 { margin-bottom:1em; }
body.Home h1, body.index h1, body.ProductsProducts-12 h1, #rightcol h1, #rightcol h5, .blocks h1 { margin-bottom:0em; padding: 0.5em;}
h2, a.toggleMenu, nav#mainMenu ul li a, #phone, button, #button, a.button, #footer h5, #searchheader,
.blue input#Submit1,
input#addCart,
body.viewcart input[type=submit],
input#SubmitCheckout,
body.viewform input[type=submit]{font-size: 125%;text-decoration: none;}
#contentcol h2 { margin-top: 2em; }
#contentcol #product h2 { margin-top:0em; margin-bottom: 0em; clear:left;}
h2.toolBox { background-color:transparent; }
h3, #header p { margin-bottom: 0.5em;}
h4 {font-size: 115%; }
body.ItemHistory h4{clear:left;}
h5, #categories h3, #products h3, .mb-inside h3 {font-size: 100%; }
h5 {font-size: 100%; margin-bottom: 0.5em }
h6 {font-size: 1em}
#header p span, .smalltxt{font-size: 10px}
/* Anchors */
a {outline: 0;color:#fd4a21;text-decoration: none;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited { }
a:hover, a:active{ text-decoration: underline; }
a.cboxElement:hover, a.cboxElement:active, a.no-effect:hover, a.no-effect:active{ background-color: transparent; }
/* Paragraphs */
p {margin-bottom: 1.143em; }
h2 + p, h2 div + p {margin-top: 1em; }
/** p:last-child {margin-bottom: 0;}*/
strong, b {font-weight: bold;}
em, i {font-style: italic;}
::-moz-selection {background: #1D1D1D; color: #fff;}
::selection {background: #1D1D1D;color: #fff;}
/* Lists */
ul { list-style: outside disc; }
#contentcol ul { margin-left: 2em; }
ol { list-style: outside decimal; margin: 1em 2em; }
ol li{ margin-bottom: 0.5em; padding-bottom: 0.5em; color:#ba2025; border-bottom: 1px solid #dad7d7;}
dl {}
dt {}
dd {}
/* Quotes */
blockquote {font-size: 200%; font-weight: 600; line-height: 130%}
.Trade-231 blockquote {font-size: 100% ! important;}
cite {}
q {}
/* Tables */
table {/*margin: .5em auto 1.5em auto;*/ width: 98%;}
/* Thead */
thead th, tbody th {padding: 0; text-align: left; color: #53c403; font-weight:normal;}
thead td {}
/* Tbody */
tbody td {padding: .2em 0em;}
.grid_12 tbody td {padding: 1em .2em;}
tbody th {}
tbody .alt td { background-color:#f1e9f1;}
tbody .alt th {}
/* Tfoot */
tfoot th {}
tfoot td {}
/*Alter case */
#leftMenu ul a{ text-transform:capitalize; }
/* Form elements*/
form{ margin:0; padding:0}
#rightcol input[type=text], #rightcol input[type=password] { width: 89.5%; padding: 2% 5%; margin: 0; margin-bottom: 0.25em; border:none; min-height:22px; outline: none;}
input:focus, textarea:focus {border-bottom-color: #EEEEEE; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;}
/* ============================== */
/* ! Design elements */
/* ============================== */
.greybox, form#search, h2, #leftMenu ul ul, #leftMenu ul ul li a, p.cart, #nextpage{/* padding: 0.5em 0; */}
a.toggleMenu{padding: .5em 1em;}
.greyborder, form#search .input, h2, #leftMenu ul, nav#mainMenu ul ul, #rightcol div.whiteBg, p.cart, #nextpage {border: 1px solid #c8cbcc;}
/*turn off border*/
.noborder, #leftMenu ul ul, h2.toolBox { border:none; }
.bottomRadius {
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px; /* future proofing */
-khtml-border-radius: 0px 0px 10px 10px; /* for old Konqueror browsers */
}
.topRadius {
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px; /* future proofing */
-khtml-border-radius: 10px 10px 0px 0px; /* for old Konqueror browsers */
}
.fullRadius {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
.smallRadius, h2, a.toggleMenu, form#search, a.button, input[type=text], input[type=password], .blue input[type=submit], #leftMenu ul, .block, p.cart, body.Home h1, #rightcol h1, .blocks h1, #rightcol h5, rightblock h1, body.index h1, body.ProductsProducts-12 h1, .addmessage, nav#mainMenu ul li a.activerootmenulink,
.blue input#Submit1,
input#addCart,
body.viewcart input[type=submit],
input#SubmitCheckout,
body.viewform input[type=submit] {
-moz-border-radius: 3px;/* Firefox 3.6+ */
-webkit-border-radius: 3px;/* Safari 5.1+, Mobile Safari, Chrome 10+ */
-khtml-border-radius: 3px;/* for old Konqueror browsers */
border-radius: 3px 3px 3px 3px;/* future proofing */
}
#deleteAllBut {
background-color: #FF0400; /* fallback/image non-cover color */
background-image: url(../images/fallbackGradient.png); /* fallback image */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF7F3A), to(#FF0400)); /* Safari 4+, Chrome 1-9 */
background-image: -webkit-linear-gradient(top, #FF7F3A, #FF0400); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -moz-linear-gradient(top, #FF7F3A, #FF0400); /* Firefox 3.6+ */
background-image: -ms-linear-gradient(top, #FF7F3A, #FF0400); /* IE 10+ */
background-image: -o-linear-gradient(top, #FF7F3A, #FF0400);/* Opera 11.10+ */
}
/* Promotions Button */
div.promotionbutton
{
display: block;
margin: -1em;
text-align: center;
line-height: 30px;
text-decoration: none;
cursor: pointer;
color: #FFFFFF;
border: 1px solid #98cf22;
background-color: #98cf22;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
div.promotionbutton > a
{
color: #FFFFFF;
font-family: 'Trebuchet MS';
font-weight: 400;
font-size: 115%;
text-decoration: none !important;
}
/*turn off border radius*/
.noradius, #leftMenu ul ul, h2.toolBox {
-moz-border-radius: 0px;/* Firefox 3.6+ */
-webkit-border-radius: 0px;/* Safari 5.1+, Mobile Safari, Chrome 10+ */
-khtml-border-radius: 0px;/* for old Konqueror browsers */
border-radius: 0px;/* future proofing */
}
#circle, #checkoutBreadcrumbs a span {
width: 30px;
height: 30px;
-moz-border-radius: 15px;/* Firefox 3.6+ */
-webkit-border-radius: 15px;/* Safari 5.1+, Mobile Safari, Chrome 10+ */
-khtml-border-radius: 15px;/* for old Konqueror browsers */
border-radius: 15px;/* future proofing */
}
.blackGradient, .activerootmenulink, a.button, #contact input#addCart, nav#mainMenu ul li a.activerootmenulink,
input#addCart,
body.viewcart input[type=submit],
input#SubmitCheckout,
body.viewform input[type=submit] {
background-color: #050505; /* fallback/image non-cover color */
background-image: url(../images/fallbackGradient.png); /* fallback image */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4a4949), to(#050505)); /* Safari 4+, Chrome 1-9 */
background-image: -webkit-linear-gradient(top, #4a4949, #050505); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -moz-linear-gradient(top, #4a4949, #050505); /* Firefox 3.6+ */
background-image: -ms-linear-gradient(top, #4a4949, #050505); /* IE 10+ */
background-image: -o-linear-gradient(top, #4a4949, #050505);/* Opera 11.10+ */
}
.greenGradient, .blue input[type=submit], #mobileLogin {
/* background-color: #98cf22; /* fallback/image non-cover color */
/* background-image: url(../images/fallbackGradient.png); /* fallback image
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4a4949), to(#98cf22)); /* Safari 4+, Chrome 1-9
background-image: -webkit-linear-gradient(top, #c6ed58, #98cf22); /* Safari 5.1+, Mobile Safari, Chrome 10+
background-image: -moz-linear-gradient(top, #c6ed58, #98cf22); /* Firefox 3.6+
background-image: -ms-linear-gradient(top, #c6ed58, #98cf22); /* IE 10+
background-image: -o-linear-gradient(top, #c6ed58, #98cf22);/* Opera 11.10+ */
}
.noGradient, a#favourites, a#itemhistorybutton, a#cutomerinvoicesbutton, a#customerbackordersbutton, a#contactbutton,a#editdetailsbutton,a#applybutton, a#checkoutbutton, a#logoutbutton, #search input[type=submit] {
background-color: transparent; /* fallback/image non-cover color */
background-image: none; /* fallback image */
}
/* ============================== */
/* ! Layout for desktop version */
/* ============================== */
body {/* background: #fff url('../images/bg-medsurg.jpg') repeat-x center top; */}
body.admindex { background: #eae9e9; }
body.cke_show_borders { background-color: #FFFFFF;}
.admtoolbox td {background-position: top right; background-repeat: no-repeat;}
/***** Declare sprite image 1x ****/
.sprite, #logo a, h2.toolBox, /*.footer ul li, #rightcol ul li,*/ .icons, a#favourites, a#itemhistorybutton, a#cutomerinvoicesbutton, a#customerbackordersbutton, a#contactbutton,a#editdetailsbutton,a#applybutton, a#checkoutbutton, a#logoutbutton, #viewCart, #Submit1{background-image: url('../images/sprite-1x.png');background-repeat:no-repeat;background-position:left top;display:block;}
/****** Z-index positioning **********/
#holdTopNav { z-index:800; }
#holdTopNav nav ul{z-index:900;}
#holdTopNav .prodNav nav ul {position: absolute;background-color: white;width: 300px;border-radius: 0; overflow-x: hidden; overflow-y: scroll; max-height: 700px; box-shadow: 0px 9px 10px 2px rgba(0,0,0,0.5); }
#holdTopNav .prodNav nav ul ul{background-color: #e2e2e2;}
ul.nav {z-index:700;}
#holdTopNav .prodNav nav ul::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#holdTopNav .prodNav nav ul::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#holdTopNav .prodNav nav ul::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
/****** spacing overwriting 1140 grid **********/
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol { margin-right: 2.5%;}
.row{ max-width: 1400px;/*padding: 0 1em;*/}
#content { padding-top: 1.5em /*0em 0em 0em*/; }
#content .row, #bottomBlocks .row{ /*padding: 1em 1em 2em 1em;*/ }
#bottomBlocks .row{ padding-top:0em}
.footer div.fourcol {margin-left: 1.3%; margin-right: 1.4%;}
.last { margin-right: 0%;}
/****** TOP NAV & CART ********/
/* TOP NAV + DOP-DOWNS both menus at the top using this*/
#holdTopNav{position:relative;background-color: transparent;padding-top: 0;padding-bottom: 0;margin-bottom: 0px;border-bottom: 4px solid #09b5d5;}
#holdTopNav div.row { overflow:visible; }
nav#mainMenu {text-align: center;vertical-align: middle;}
nav#mainMenu ul{ width: 100%; }
nav#mainMenu ul ul {display: none; width: auto;}
nav#mainMenu ul li:hover > ul { display: block; }
nav#mainMenu ul {
padding: 0px;
list-style: none;
position: relative;
text-align: right;
}
nav#mainMenu ul:after { content: ""; clear: both; display: block;}
nav#mainMenu ul li {/* float: left; */ display: inline-block; margin-right: 1em;}
nav#mainMenu ul li:hover { }
nav#mainMenu ul li:hover a { }
nav#mainMenu ul li a:hover { border-bottom: 0px solid #000;}
nav#mainMenu ul li a {display: block;text-decoration: none;line-height: 1.5;border-bottom: 0px solid transparent;padding: 0.5em.25em;}
body:not(.admin) nav#mainMenu > ul > li:first-child > a{visibility: hidden; width: 30px; height:10px; overflow: hidden;}
nav#mainMenu > ul > li:nth-child(3){display: none;}
/* nav#mainMenu > ul > li:last-child > a{display: none;}*/
body:not(.admin) nav#mainMenu > ul > li:first-child > a:before {content: "\f015";font-family: 'Font Awesome 5 Pro'; font-weight: 900; display: inline-block; visibility: visible;}
nav#mainMenu ul li a.activerootmenulink { padding-left: 0.5em; padding-right: 0.5em;}
nav#mainMenu ul ul { background: #fff; border-radius: 0px; padding: 0; position: absolute; top: 100%; width: 200px; }
nav#mainMenu ul ul li { width:100%; float: none; text-align: left; border-top: 1px solid #c8cbcc; position: relative; }
nav#mainMenu ul ul li:first-child { border-top: none; }
nav#mainMenu ul ul li a { padding: 0.25em; line-height: 1.8em; background: transparent none; font-size: 100%; border-bottom: none; }
nav#mainMenu ul ul li a:hover { background: #f1f1f1; border-bottom: none;}
nav#mainMenu ul ul ul { position: absolute; left: 100%; top:0; }
/*specific to right col*/
#rightcol nav#mainMenu {margin-top: 8px; margin-bottom: 1em;}
/*#rightcol nav#mainMenu ul li:first-child, #rightcol nav#mainMenu ul li:last-child{ display:none;}*/
#rightcol nav#mainMenu ul ul li:first-child, #rightcol nav#mainMenu ul ul li:last-child{ display:block;}
/*CART*/
#cart { margin: 0; color: #fff; width:25.5%; }
#cart span.cart a{ display:block; float: left; margin:0em; background-position: -0px -175px; width: 28px; height:26px; }
#cart p{text-align: left; line-height: 2.5em; margin-bottom:0; }
#cart p em{font-style: normal; color:#ba2025; }
#cart a{color: #fff;}
#cart p a{ padding-left: 0.5em; padding-right: 20px; background: transparent url('../images/arrow-white-1x.png') no-repeat center right; text-transform:uppercase;}
#cart em.price { padding-right: 0em; }
/*PHONE*/
#phone {text-align: right;vertical-align: middle;display: inline-block;}
#phone strong { font-weight:400; }
#phone em { font-style:normal }
/****** HEADER **********/
#header{position: relative;background: #ececec;padding: 0;padding-top: 0.5em;/* height: 233px; */}
#header.darkHeader{width: 100%;position: fixed;top: 0;z-index: 999;box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.3); padding-top: 0;/* background: #222222; */}
#header.darkHeader nav#mainMenu ul {text-align: right;width: auto;/* float: right; */margin-left: auto;}
#header.darkHeader > .row #logo, #header.darkHeader > .row #phone{display: none;}
#header.darkHeader > .row #searchContainer {text-align: left;position: absolute;right: 0;width: auto;padding: 0.5em 1em;z-index: 999;}
#header.darkHeader > .row #searchContainer input#ProductQuery{width: 50%;}
#header.darkHeader > .row #searchContainer form#search{width: 400px;margin-top: 0;position: relative;/* text-align: left; */}
#header.darkHeader nav#mainMenu, #header.darkHeader #menuhold{width: auto;}
#header.darkHeader nav#mainMenu {position: absolute; right: 350px;}
#header.darkHeader #searchContainer form input.sprite {height: 30px; padding: 0 2em;}
#header div.row{
padding-right: 0em;
}
#header div.row .onecol{width: 8.85%;/* position: absolute; *//* left: 1em; */padding-bottom: 0.25em;padding-left: 1em;}
#header div.row .fivecol{ width: 37.45%; position: relative; top: 2em; font-size: 1.4em;}
#logo a{ width: 100px; height: 120px; }
#header p{ line-height:1em; /*padding-top: 2em*/ }
#header p em, #mobileLogin{ display:none; }
#header p span{ clear: left; display:block; }
#header #phone a{color: #222222; font-weight: 700; font-size: 1.5em }
/*cards*/
#cards { margin-bottom: 1em}
#cards span, #cards p{display: block; float:left}
.creditCards { width: 220px; height: 60px; background-position: 0px -320px!important; margin-right:10px;}
/*SEARCH*/
div#searchContainer{text-align: right;float: right;margin-right: 1em;}
#searchContainer form{display: inline-block;vertical-align: middle;width: 50%;text-align: right;display: block;vertical-align: middle;margin-left: auto;margin-top: 0.25em;}
#searchContainer form .input {width: 400px;padding: 0px 5%;/* line-height:28px; */height: 28px;background: white;border: none;border: 1px solid #dddddd;border-radius: 0;max-width: 100%;border-radius: 4px;font-family: 'Roboto', sans-serif;}
#searchContainer form .input:focus { box-shadow: none;}
#searchContainer input.input {display: inline-block;/* float: right; */outline:none;line-height: 2;vertical-align: top;height: 40px;min-width: 0;margin: 0;width: 57%;margin-right: 4px;}
.darkHeader #searchContainer input.input {display: inline-block;/* float: right; */outline:none;line-height: 2;vertical-align: top;height: 29px;min-width: 0;margin: 0;width: 57%;margin-right: 0px;}
#searchContainer form input.sprite {display: inline-block;/* float: right; */outline:none;line-height: 2;vertical-align: top;height: 40px;min-width: 0;margin: 0;font-family: 'Font Awesome 5 Pro';width: auto;font-weight: 900;}
.darkHeader #search form input.sprite {display: inline-block;/* float: right; */outline:none;line-height: 2;vertical-align: top;height: 29px;min-width: 0;margin: 0;width: 30%; padding: 0;}
#searchContainer input[type=submit] {display: inline-block;outline:none;border: none;line-height: 3;background:#222222;padding: 0px 5%;vertical-align: middle;color: white;/* width: 30%; */border-radius: 4px;}
#searchContainer input[type=submit]:hover {background:#444444;}
#searchContainer input[type=submit]:active, #searchContainer input[type=submit]:focus {background:#333333;}
/****** CATEGORY NAV + DROP-DOWNS **********/
a.toggleMenu {display:block!important;/* margin-bottom:0.25em; */}
a.toggleMenu, .nav a {text-decoration:none;}
#mainMenu {}
#mainMenu ul{ margin:0; padding: 0; }
nav { overflow: visible!important; }
#leftMenu ul { list-style: none; *zoom: 1; border-bottom: none;}
#leftMenu ul:before, #leftMenu ul:after { content: " "; display: table; }
#leftMenu ul:after { clear: both;}
#leftMenu ul ul { list-style: none; width: 12em; }
#leftMenu ul a { }
#leftMenu ul a:hover, #leftMenu ul li:hover > a{ color:#09b5d5 }
#leftMenu ul a.activemenuitem, #leftMenu ul li.hover li.hover > a, #leftMenu ul .hover a.parent {color:#09b5d5}
#leftMenu ul li { position: relative; }
#leftMenu ul > li {float: left;border-bottom: 1px solid #dad7d7;margin-left: 0;margin-right: 0.25em;background-position: 0 -416px;}
#leftMenu ul > li:hover { background-position: -256px -416px;}
/*#leftMenu ul > li > .parent { background-image: url("../images/downArrow.png"); background-repeat: no-repeat; background-position: right; background-position: 95% 50%;}*/
#leftMenu ul > li > a {display: block;font-size: 11px;}
#leftMenu ul li ul { position: absolute; left: -9999px; }
#leftMenu ul > li.hover > ul { left: 0;}
#leftMenu ul li li.hover ul { left: 100%; top: 0;}
#leftMenu ul li li a { display: inline-block; /* For IE 7 and below, but anyone can see it */}
#leftMenu ul li li a { display: block; position: relative; z-index:100; }
#leftMenu ul li li li a { z-index:200; }
#leftMenu ul li li a:hover { }
.toggleMenu {}
a.toggleMenu {background: #09b5d5;height: 27px;border-bottom: none;color: white;border-radius: 3px 3px 0 0;font-size: 18px;}
.toggleMenu span{display: block; width:auto; float:right;}
#leftMenu ul a, #leftMenu ul li li a {padding: 5px 0em 5px 10px; }
#leftMenu ul a:hover, #leftMenu ul li li a:hover, #leftMenu ul a.activemenuitem { background-image: url("../images/menu-icon.jpg"); background-repeat: no-repeat; background-position: 0px 5px; }
#leftMenu ul > li { float: none; }
#leftMenu ul > li > .parent {/* background-position: 95% 50%; */}
#leftMenu ul li li .parent { background-image: url("../images/downArrow.png"); background-repeat: no-repeat; background-position: 95% 50%; }
#leftMenu ul ul { display: block; width: 100%; padding:0px;}
#leftMenu ul > li.hover > ul , #leftMenu ul li li.hover ul { position: static; }
/**/
/*overwrite drop down left nav on noblocks pages and erp pages*/
body.noblocks ul.nav, body.product ul.nav, body.viewcart ul.nav, body.identification ul.nav, body.checkout ul.nav, body.confirmation ul.nav {position: absolute; width: 262px;}
/****** HERO **********/
#hero {margin-bottom: 2em; position: relative;}
/************* LEFT COL ****************/
#leftcol {padding-top:2em; width: 20.05%}
/****** LEFT SUB-CATEGORY MENU **********/
/*leftmenu*/
#menu{ }
#menu h1{ border-bottom:1px dotted #c8c9ca; margin-bottom:0px; padding:1em 0 0.5em 0; line-height: 95%; font-size: 130%; text-transform: uppercase;}
#menu ul{ list-style:none; margin:1em; border-bottom:5px solid #ecebec; }
#menu ul li{ border-bottom:1px dotted #c8c9ca; }
#menu ul li:last-child{ border-bottom:none; }
#menu ul li a{ display: block; padding: 0.5em 0 1em 1.35em; background: transparent url('../images/icon-arrow-off.jpg') no-repeat 0 0.8em;}
/*active state on left menu*/
a.rootActiveProdSecondaryCtgLink { font-style:italic; }
#menu ul li a:hover, a.activeProdCtgLink, a.activeProdCtgLink:hover{ background: transparent url('../images/icon-arrow.jpg') no-repeat 0 0.8em;}
/*second level*/
#menu ul li.prodCtgItem { padding:0em; }
#menu ul li.prodCtgItem a { display: block; padding:0.25em 0.5em 0.25em 1em; background-color:#dbf1be; color:#6fab43 }
/****** MAIN CONTENT AREA **********/
#contentcol {/* padding-top: 2em; */padding-bottom: 2em;}
#content { padding-top:0px; min-height: 100vh;}
#content div.row{background:#fff url('../images/content-bg.png') repeat-x left top;padding-top:0px;}
#leftcol div h3 {margin-bottom:15px;}
/*colorbox*/
.cboxPhoto { max-height:600px;}
/****** PRODUCT SLIDER **************************/
#holdSlider { background-color:#fff; overflow:visible; clear:left; border: 1px solid #dad7d7; border-top: none; }
#holdSlider p{ position:relative; margin-bottom: 0px;}
#holdSlider h3.featured{ height:60px }
#holdSlider p.featured{ height:120px }
#holdSlider p img{/*position:absolute; top: -5px; left: -5px;*/ /*display:none;*/ }
#holdSlider p span{ position:absolute; top:0; left:0;}
#holdSlider p.last{ text-align: right; }
#holdSlider p.last a{ margin-right: 1em; }
.mb-wrapper {clear: left;}
/* Moving Boxes demo CSS */
/*Dim non current panel*/
.mb-panel {
opacity: 0.5;
filter: alpha(opacity=50);
}
.mb-panel.current {
opacity: 1;
filter: alpha(opacity=100);
}
/* Dimensions set via css in MovingBoxes version 2.2.2+ */
body.Home ul#slider, body.index ul#slider { width: 90%; margin-left: 0em; }
#slider li { width: 33%; text-align: center; padding-bottom: 0;}
a.mb-scrollButtons.mb-right {right: -30px;}
a.mb-scrollButtons.mb-left { left: -30px;}
.demo-title {
text-align: center;
color: #a71700;
text-transform: uppercase;
padding: 30px 0 0;
font-size: 60px;
}
/* Navigation bar */
.main-nav {
display: block;
text-align: center;
border-bottom: 2px solid #a71700;
margin: 0 0 20px 0;
padding: 0 0 10px 0;
}
.main-nav a {
text-decoration: none;
color: #3e63ec;
/*font-size: 18px;*/
margin: 0 8px;
}
.main-nav a:hover {
color: black;
border-bottom: 2px solid black;
}
/* Moving Boxes title image wrapper */
#title {
text-align: center;
}
#title img {
border: 0;
}
.mb-inside { border: none;}
/* Panel images */
.mb-inside img {/* width: 100%; */ margin:0 auto;}
/* height of the placeholder until image completely loads - needed for
webkit browsers, add this only if you don't want the height animation
on startup. 326px measures the height of the current image when enlarged
*/
#slider-two .current img { /* height: 326px; */ }
/* Panel links */
.mb-inside a { }
.mb-inside a:hover { }
/* Add/remove panels buttons */
.buttons { padding: 5px 10px; text-align: center; }
/* Direct link styling */
.dlinks {
text-align: center;
margin: 0 0 20px 0;
}
.dlinks * {
vertical-align: middle;
}
#breadcrumbs { padding-bottom: 0.5em; clear:left; border-bottom: 1px solid #c8cbcc; margin-bottom: 0.5em; }
body.Home div#breadcrumbs { display: none; }
/*CATEGORIES + PRODUCTS */
.whiteBg, /*#CategoryList,*/ #products, #menu { clear: left; background-color:#fff; padding: 1em; }
#product { padding-bottom: 3em;}
/*body.category #rightcol #products div {display:none!important;}*/
/* products stuff*/
.addmessage { background-color:#98cf22; padding:0.25em} /* style for added to cart message*/
.rrp { text-decoration: line-through; padding-right:10px; color:#918f8f;}
.save, .rrp { text-transform: uppercase }
.price { color: #ba2025; font-weight: 600; padding-right:1em; line-height:2em; }
.products p { margin-bottom: 0.5em;}
/*.products span.price, .products input.addCart { display:block; float:left}*/
#product span.price strong { font-size: 160%; }
/*CATEGORY LIST*/
#contentcol ul#CategoryList {list-style:none; margin-left: 0em;}
#CategoryList li{ float: left; width: 28%; margin:0px 0px 1% 1%; text-align:center; padding:1%; /* border: 5px solid #ECEBEC; */height: 17.5em;}
#CategoryList li img{ }
ul#categories, ul#products{clear:left;}
ul#categories, #categories ul, ul#products, #products ul {margin: 0; padding: 0; list-style:none;}
#categories li, #products li{ /*float: left;*/ width:32.5%; margin-right:0%; /*min-height: 20em;*/ list-style:none; /*display:inline;*/ padding-bottom: 1em; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; vertical-align:top; border-top: 1px solid #DAD7D7; padding-top:1em;}
#categories li a, #products li a{ display: block; margin-left:auto; margin-right:auto;}
#categories li h3 a, #products li h3 a, .related li h3 a{ display: inline; width: auto; height: auto; }
/*#categories li:hover, #products li:hover{ border:5px solid #ecebec; }*/
#categories h3, #categories p, #products h3, #products p{ margin:0 10px; text-align:center;}
#products p.prodImage{ position:relative; padding-top:0.25em; padding-bottom:0.25em; max-height:125px;}
#products p.prodImage span{ /*position:absolute; bottom:0; left:0;*/ display: none;}
#categories h3, #products h3{ display:block; /*height: 40px;*/ padding-top: 0em; }
#products li li { width:98%;}
/* NEW HOVER EFFECT ON IMAGE */
#prodImgDiv { position: relative; width: auto; height: auto; }
.hoverimage { position: absolute; top: 0; left: 0; display: none; }
#prodImgDiv:hover .hoverimage { display: block; }
/*MULTIPLE IMAGES ON PRODUCT PAGES*/
/* Tiny Carousel */
#slider1 { height: 1%; overflow:hidden; padding: 10px 0; border-bottom: 1px solid #d0d0d0; }
#slider1 .viewport { float: left; width: 85%; height: 80px; overflow: hidden; position: relative; }
#slider1 .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 20px 0 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 30px; overflow: hidden; position: relative; opacity:0.6 }
#slider1 .buttons:hover { opacity:1 }
#slider1 .next { background-position: 0 0; margin: 20px 0 0 0px; }
#slider1 .disable { visibility: hidden; }
#slider1 ul.overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 100%; left: 0 top: 0; border: none; }
#slider1 ul.overview li{ float: left; margin: 0 5px 0 0 !important; padding: 1px; height: 157px; width: 110px;}
#content ul.product li ul.overview li {width: 70px;}
/*CUSTOMISE colorbox*/
#cboxCurrent, #cboxNext, #cboxNext, #cboxPrevious, #cboxClose { top: 4px;}
#cboxCurrent { font-size:120%; line-height: 1.8em;}
#cboxLoadedContent { margin-top: 28px;}
/*CUSTOMISE colorbox*/
#searchresults { list-style:none; }
#searchresults li {border-bottom: 1px solid #dad7d7; padding-bottom:1em; margin-bottom:1em;}
#nextpage {text-align: right; margin-bottom:1em}
/* RELATED PRODUCTS */
div.related{ margin-top: 1em; }
div.related ul#products li{ width:30.5%; }
div.related ul#products li h3{ display: none; }
div.related ul#products li a img, div.related ul#products li a{ width:140px; height: 120px; }
/* CONFIDENCE TRIGGERS*/
div.confidence p{ margin-bottom: 0.25em }
/*TABS*/
.shadetabs{padding:0; margin: 0; margin-top: 1em; line-height:2.8em; list-style-type: none; text-align: left; /*set to left, center, or right to align the menu as desired*/}
.shadetabs li{display: inline; margin: 0; float: left;}
.shadetabs li a{ display:block; width:auto; text-decoration: none; color:#4C5357; padding-left:1em; padding-right:1em; position: relative; z-index: 1; line-height:2.8em; border: 1px solid #d0d0d0; border-bottom:none; border-right:none;}
.shadetabs li:last-child{ border-right: 1px solid #d0d0d0; }
.shadetabs li a:visited{}
.shadetabs li a:hover{text-decoration: underline; color: #0079C2;}
.shadetabs li a.selected{ /*selected main tab style */position: relative; background-color: #ECEBEC;}
.shadetabs li a.selected:hover{ /*selected main tab style */text-decoration: none;}
.holdtabs{border-top:1px solid #d0d0d0; background: transparent url('../images/bg-gradient.jpg') repeat-x top left; clear:left; padding:1em; min-height: 200px;}
.tabcontent{display:none;}
/****** ADMIN COL **********/
#admincol { margin-left: 0.6%; margin-right: 1.4%; width: 98%;}
/****** RIGHT COL **********/
#rightcol { background: transparent url('../images/bg-rightcol.jpg') repeat-y left top; padding-top:2em; padding-bottom: 2em; width: 23.35%}
#rightcol ul { list-style:none; margin:0; padding-top: 0.5em;}
#rightcol ul li{ margin-bottom: 0.5em; background-position: -30px -574px;}
#rightcol ul li{ padding-left: 1.5em;}
/****** ADD BY STOCK **********/
div#SuggestedStock { width:98%; padding:2% }
div#SuggestedStock ul { }
div#SuggestedStock ul li{ display:block; background-color:whiteSmoke; padding-left: 0em; background-image:none; padding: 0.25em}
div#SuggestedStock ul li div{ float: left; width: 59.3%;}
div#SuggestedStock ul li div.addCartPluProductName {
clear: both;
float: none;
display: inline-block;
width: 70%;
vertical-align: top;
}
div#SuggestedStock ul li div.addCartPluProductQty {
clear: both;
float: none;
display: inline-block;
width: 20%;
padding: 4px;
vertical-align: top;
}
div#SuggestedStock ul li div.addCartPluProductQty input[name=qtyPlu] {
width: 100%;
padding: 4px;
margin-top: 4px;
}
div#SuggestedStock ul li div.addbyplu > input[name=qtyPlu] {
display: block;
width: 70%;
}
div#SuggestedStock ul li div.addbybutton {
width: 39.3%;
}
div#SuggestedStock ul li div.addbybutton input#addCart { text-align:center;}
/****** BLOCKS **********/
.block {margin-bottom: 1em; padding:1em }
/*whiteblock*/
#rightcol div.whiteBg { margin-left:0%; padding:0.5em;}
/*greyblock*/
#rightcol div.grey { margin-left:0%;}
p.cart{ text-align:center; margin-bottom: 0px;}
h2.toolBox { background-position: -30px -515px; margin-left: 0.5em; padding-left: 32px; padding-bottom: 0.5em; line-height:35px }
/****** Forms ******/
#contact div{ /*width: 10%; float:left;*/ }
#contact table, #contact div.formlayout {width: 90%; margin: 0 auto; margin-top: 0em;}
#contact input, #contact textarea, #contact option { display: block; clear:left;}
#contact input, #contact textarea, #contact option, #contact select, #ItemContainer input {-moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none no-repeat scroll right top whiteSmoke; border-color: #c8cbcc; border-radius: 3px 3px 3px 3px; border-style: solid; border-width: 1px; font: inherit; margin-top: 0px; outline: 0 none; padding: 2%; width: 90%; }
#contact input.required, #contact textarea.required, #contact option.required { background: url("../images/contact-corner.png") no-repeat scroll right top whiteSmoke; }
#contact input:focus, #contact textarea:focus, #ItemContainer input {background-color: #FFFFFF;border-bottom-color: #EEEEEE;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;}
#contact textarea {height: 100px;}
#contact input[type="checkbox"], #contact input[type="radio"] { margin: 3px 3px 3px 4px; width:auto; display:inline;}
#contact input.formbutton {background-color: #171717;background-image: none; border: 1px solid #828282; box-shadow: 0 1px 3px #373737, 0 1px rgba(255, 255, 255, 0.15) inset, 0 -2px rgba(0, 0, 0, 0.1) inset; color: #FFFFFF; cursor: pointer;display: inline;font-weight: bold;padding: 15px 0;text-shadow: 1px 1px 1px #000;text-transform: uppercase;width: 155px;margin-right: 0 auto; text-align:center;}
#contact input.formbutton:hover {background-color: #373737;}
iframe { width:100%;}
#contact p.smMessage { margin-left:0px; width:90%; background-color: whiteSmoke;}
label.crew{ background-color:#65d1f2; display:block; width:90%; padding:10px;}
/*Search filter*/
#contact div.formlayout input{width: 41.5%; margin-right: 2%; margin-bottom: 1em; float: left; clear:none;}
/****** SUBSCRIBE ********/
#subscribe { background-color:#f7f4f4; padding-bottom: 2em; }
#subscribe div.row{ background-color:#333; overflow:visible }
#subscribe p{ position:relative; height: 84px; margin-bottom: 0px;}
#subscribe p img{position:absolute; top: -5px; left: -5px;}
#subscribe form input.input{ width: 80%; line-height: 2.4em; float: left; margin-top: 20px; }
/*******HOME SUBSCRIBE*******/
.subscribeWrap{background: whitesmoke; padding: 2em;}
.subscribeWrap h2{border: none; text-align: center; padding-bottom: 2em}
.subscribeWrap form table td{width: 49%; display: table-cell;}
.subscribeWrap form label{display: block;}
.subscribeWrap form input[type="text"], .subscribeWrap form input[type="email"] {display: block; border: 1px solid grey; outline: none; border-radius: 0; line-height: 2; padding: 0.5em; width: 90%}
.subscribeWrap form td.center{margin: 0 auto;}
.subscribeWrap form .center input[type="text"] {display: block; border: 1px solid grey; outline: none; border-radius: 0; line-height: 2; padding: 0.5em; width: 50%; margin: 0 auto;}
.subscribeWrap form .center img{text-align: center; display: block; margin: 1em auto;}
.subscribeWrap form .center input[type="submit"] {display: block; margin: 0 auto; background: #222222; color: white; line-height: 2; padding: 0.5em 1em; text-transform: uppercase; outline: none; border: none; margin-top: 0.25em;}
.subscribeWrap form .center input[type="submit"]:hover{opacity: 0.8;}
/****** FOOTER **********/
#footer{margin:0px auto;background: #222222;box-shadow: 0px -5px 20px 0px rgba(0, 0, 0, 0.88) inset, 0px 5px 20px 0px rgba(0, 0, 0, 0.88) inset;}
#footer div.row{padding-bottom: 1em;}
.footer { padding-top: 2em; }
.footer ul { list-style:none;}
.footer ul li{ margin-bottom: 0.5em; background-position: 0 -422px; margin-left: 0em}
.footer ul li a{ padding-left: 1em}
.footer a, .footer p {}
#smLogo{ }
#smLogo a{ display: block; width: 150px; height: 150px;}
#support p{}
#meta div.row{padding-top: 1em;}
#meta p.last{ text-align: right; }
/****** SLIDESHOW - http://responsiveslides.com v1.32 by @viljamis **********/
.rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; }
.rslides li { position: absolute; display: none; width: 100%; left: 0; top: 0; }
.rslides li:first-child { position: relative; display: block; float: left; }
.rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }
.rslides > ul {margin-left:0px !important; padding:0px !important;}
.slideshow_with_captions_container > ul {margin-left:0px !important; padding:0px !important;}
.slideshow_with_captions_container img {position: relative; /*max-width:508px;*/}
/*.slideshow_with_captions_container .slideshow_caption
{
position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
color: black;
padding: 0 0 0 1.5em;
bottom: 0;
height: 3em;
line-height: 3em;
}*/
.slideshow_caption {
display: none;
z-index:50;
color: #ffffff;
font-size: 1.8em;
font-weight: 700;
line-height: 1.1em;
height:auto;
width:55%;
position:absolute;
bottom: 8%;
left: 8%;
text-shadow: 0px 2px 2px rgba(0, 0, 0, 1);
}
.slideshow_with_captions_container .rslides_tabs {
left:10px;
position:absolute;
bottom: 10px;
/*display: none;*/
width: 140px;
float: right;
list-style: none;
}
.slideshow_with_captions_container .rslides_tabs li {
display: list-item;
float: left;
margin: 0 2px;
}
.slideshow_with_captions_container .rslides_tabs a {
display: block;
width: 12px;
height: 12px;
border-radius: 12px;
background-color: white;
/*padding-top: 12px;*/
overflow: hidden;
color:White;
font-size:1px;
}
.rslides_here > a {
background-color: blue !important;
}
/****** BUTTONS **********/
/*button,*/ #button, a.button,
.blue input[type=submit],
input#addCart,
body.viewcart input[type=submit],
input#SubmitCheckout,
body.viewform input[type=submit] {
display: block;
text-align:left;
text-indent:20%;
padding: 0 5%;
line-height: 30px;
min-height: 30px;
font-weight: 400;
text-decoration: none;
cursor:pointer;
opacity: 0.9;
border:1px solid #050505;
}
.blue input[type=submit] { border:1px solid #98cf22; width:89.5%}
a#favourites, a#itemhistorybutton, a#cutomerinvoicesbutton, a#customerbackordersbutton, a#contactbutton,a#editdetailsbutton,a#applybutton, a#checkoutbutton, a#logoutbutton { background-color:#09b5d5; margin:0.5em 0; border:1px solid #0794ae;}
input#addCart, #contentcol input[type=submit], .updatecart input[type=submit], input#SubmitCheckout, input#btnUpdate, #contact input.formbutton, #mobileLogin, #tableCart input[type=submit], .cart_left input[type=submit], .cart_right input[type=submit], body.viewcart input[type=submit] { text-indent: 0; }
body.product input.addCart {
margin-left:0px;
font-size: 140%!important;
}
body.product div.related input.addCart {
margin-left:0px;
font-size: 90%!important;
}
input#button.submit {
margin: 20px 0px 0 0; line-height:2.4em;
}
input.guest, input.payment {
width: 190px;
height: 39px;
float: left;
text-align:center;
margin-left:0px;
border:none;
cursor:pointer;
}
input.payment {
float: right;
}
input[type=submit], input#addCart, body.viewcart div.cart_right input[type=submit] {display: inline-block;}
input#search {cursor:pointer;}
#Submit1 { background-position: -0px -601px; color: #222!important; }
a#viewCart { background-position: -0px -631px; }
a#favourites, a#itemhistorybutton, a#cutomerinvoicesbutton, a#customerbackordersbutton, a#contactbutton,a#editdetailsbutton,a#applybutton, a#checkoutbutton, a#logoutbutton { background-position: -0px -660px; }
button:hover, a.button:hover, input[type=submit]:hover{
outline: none; /* hide dotted outline in Firefox */
opacity: 1;
}
/****** ICONS **********/
.icons { float: left; width:23px; height:23px; background-position: -60px -203px; text-indent: -96422em;}
.hide{ background-position: -120px -203px; margin-right: 0.25em;}
.unhide{ background-position: -90px -203px; margin-right: 0.25em;}
.add{ background-position: -150px -203px;margin-right: 0.25em;}
.fav{ background-position: -180px -203px;}
.unfav{ background-position: -210px -203px;}
/**********************--------------------------clearfix*/
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
.clearfix {
display:block; padding-bottom: 0px;
}
* html .clearfix {
height:1px;
}
/* clearfix required for h2's*/
h2:before,
h2:after {
content:"";
display:table;
}
h2:after {
clear:both;
}
h2 {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
/********* Responsive width video embed **************/
.video-container { position: relative; padding-bottom: 56.25%; padding-top:30px; height: 0; overflow: hidden; margin-left: 0px; margin-right: 0px;}
.video-container iframe,
.video-container object,
.video-container embed
{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/**********************--------------------------END clearfix*/
/* Admin WMS */
/* Menu */
.adminmenucontainer {width: 100%; background-color: #eeeeee;}
.adminmenu {width: 770px;}
.adminmenurow {text-align: center; height: 24px;}
.adminrootheading {line-height: 14px; display: block; color: #000000; padding: 6px; font-weight: bold; font-size: 13px;}
.adminrootitem {text-align: center; background-color: #eeeeee; color: #000000; text-decoration: none; width: 20%; text-indent: 30px;}
a.adminrootmenulink {line-height: 14px; display: block; color: #000000; padding: 6px; text-decoration: none; font-weight: bold; font-size: 13px;}
.adminsubmenu {line-height: 14px; width: 180px; display: none; position: absolute; background-color: #eeeeee; margin: 0px; padding: 0px; text-decoration: none; list-style-type: none; z-index: 1000;}
.adminmenuitem {height: 24px; padding: 3px;}
a.adminmenulink {line-height: 14px; display: block; color: #000000; padding: 6px; text-align:left; text-decoration: none; font-size: 12px; text-indent: 10px;}
div.admin_content_block {width: 100%!important;}
div.admin_content_block div {margin: 0px;}
/* Gallery */
.cke_button_Kook_Gallery .cke_icon,.cke_button_Kook_Templates .cke_icon,.cke_button_Kook_Forms .cke_icon,.cke_button_Kook_Slideshows .cke_icon,.cke_button_Kook_Embed .cke_icon {display: none !important;}
.cke_button_Kook_Gallery .cke_label,.cke_button_Kook_Templates .cke_label,.cke_button_Kook_Forms .cke_label,.cke_button_Kook_Slideshows .cke_label,.cke_button_Kook_Embed .cke_label {display: inline !important;}
/**********************************************************************************/
/*OLD WMS CHECKOUT STUFF*/
/*viewcart*/
.cart_left, .cart_right { float:left; width:50%; }
.cart_right { text-align: right; }
table.ViewCart
{
margin: 0px auto; border-collapse:collapse
}
#rightcol table.ViewCart
{
table-layout: fixed;
width:auto;
}
#rightcol td.ViewCart_Product_Right, #rightcol td.ViewCart_Product_Left, #rightcol td.ViewCart_Header_Left, #rightcol td.ViewCart_Header_Right
{
padding: 5px 0px;
}
#rightcol td.ViewCart_Product_Right input[type=text] { width:auto; max-width:20px; padding: 0 0; text-align:center; -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none no-repeat scroll right top whiteSmoke; border-color: #c8cbcc; border-radius: 3px 3px 3px 3px; border-style: solid; border-width: 1px; font: inherit; margin-top: 0px; outline: 0 none; padding: 2%; }
#rightcol td.ViewCart_Product_Right img { }
#rightcol td.ViewCart_Product_Right img.delicon { width: 22px; height:22px; margin-left: 2px; }/* I put this here because - don't judge */
#rightcol td.ViewCart_Product_Right { min-width: 23px }
td.ViewCart_Header_Left
{
background: #808080;
color: #FFFFFF;
font-weight: bold;
padding: 5px 10px;
text-align: left;
}
td.ViewCart_Header_Right
{
background: #808080;
color: #FFFFFF;
font-weight: bold;
padding: 5px 5px;
text-align: right;
}
td.ViewCart_Product_Left
{
padding: 5px 10px;
text-align: left;
vertical-align: top;
}
td.ViewCart_Product_Right
{
padding: 5px 10px;
text-align: right;
vertical-align: top;
}
hr.ViewCart_Separator
{
background: #C0C0C0;
border: none;
color: #808080;
height: 1px;
}
td.ViewCart_Price_Left
{
/*font-weight: bold;*/
padding: 5px 10px;
text-align: right;
vertical-align: middle;
}
div.ViewCart_Price_Left
{
/*font-weight: bold;*/
position: relative;
text-align: right;
}
td.ViewCart_Price_Right
{
padding: 5px 10px;
text-align: right;
vertical-align: top;
width: 45%;
}
body.viewcart td.ViewCart_Price_Right
{
width: 12%;
}
td.ViewCart_Footer_Left
{
font-weight: bold;
padding: 5px 10px;
text-align: left;
}
td.ViewCart_Footer_Right
{
font-weight: bold;
padding: 5px 10px;
text-align: right;
}
td.ViewCart_Freight
{
padding: 5px 10px;
vertical-align: middle;
}
div.ViewCart_Freight_Good, div.ViewCart_Freight_Bad, div.ViewCart_Freight_Good_Quote, div.ViewCart_Freight_Bad_Quote
{
color: #000000;
font-weight: normal;
height: 40px;
margin: -25px 0px 0px auto;
padding: 10px 30px 10px 10px;
position: absolute;
right: 100px;
text-align: left;
width: 200px;
}
div.ViewCart_Freight_Good, div.ViewCart_Freight_Good_Quote
{
background: URL('/wmsimages/freight_good.png');
}
div.ViewCart_Freight_Bad, div.ViewCart_Freight_Bad_Quote
{
background: URL('/wmsimages/freight_bad.png');
}
/*endviewcart*/
a.suburb
{
color: #000000;
display: block;
padding: 5px 10px;
text-align: left;
white-space: nowrap;
}
a.suburb:hover
{
background: #000080;
color: #FFFFFF;
text-decoration: none;
}
/************************************************************************************/
/*CHECKOUT CSS*/
/*Checkout Breadcrumbs*/
ul#checkoutBreadcrumbs{ margin:0; list-style: none; height:48px; background-color:#EBECF0; margin-bottom:10px;}
ul#checkoutBreadcrumbs li{ float: left; width: 33.3%; }
ul#checkoutBreadcrumbs li a{ font-size: 100%; color:#8f8f91; text-transform: uppercase; padding-left: 8px; display: block; height:48px; line-height:44px;}
ul#checkoutBreadcrumbs li a span{ display: block; float: left; font-size: 140%; text-align:center; font-weight:600; letter-spacing:-1px; border: 1px solid #8f8f91; background-color:#EBECF0; margin: 5px 5px 0 0; line-height: 30px; }
/*Set body class to change styles*/
/*First - View Cart*/
body.viewcart ul#checkoutBreadcrumbs li.first a span{ border: 1px solid #fd4a21; background-color:#fd4a21;color:#fff; }
body.viewcart ul#checkoutBreadcrumbs li.second a:hover,
body.viewcart ul#checkoutBreadcrumbs li.third a:hover,
body.viewcart ul#checkoutBreadcrumbs li.fourth a:hover{ cursor: default; text-decoration:none; }
/*Second - ID*/
body.identification ul#checkoutBreadcrumbs li.second a span{ border: 1px solid #fd4a21; background-color:#fd4a21;color:#fff; }
body.viewcart ul#checkoutBreadcrumbs li.third a:hover,
body.viewcart ul#checkoutBreadcrumbs li.fourth a:hover{ cursor: default; text-decoration:none; }
/*Third - Checkout*/
body.checkout ul#checkoutBreadcrumbs li.second a span{ border: 1px solid #fd4a21; background-color:#fd4a21;color:#fff; }
body.viewcart ul#checkoutBreadcrumbs li.third a:hover{ cursor: default; text-decoration:none; }
/*fourth - Confirmation*/
body.finalise ul#checkoutBreadcrumbs li.third a span{ border: 1px solid #fd4a21; background-color:#fd4a21;color:#fff; }
#FullWidth div.grid_3{width: 250px;}
#FullWidth aside#rightcol {display: inline-block; padding-top:0px;}
#FullWidth aside#rightcol {width: 250px; margin-left: 10px;}
.Blocks { border:4px solid #EBECF0; margin-bottom:10px}
table.Blocks { width: 100%; margin-bottom:10px}
/***** order history table ********/
.ItemHistory dt, .ItemHistory dd, .FullItemHistory dt, .FullItemHistory dd
{
/*padding:.25em;*/
border-right:0px solid #c00;
border-bottom:0px solid #c00;
width:11.28%;
padding:.5%;
float:left;
/*height:40px;*/
display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline;
margin:0;
word-wrap:break-word;
}
/* adjust widths for wider columns */
.ItemHistory dt:first-child, .ItemHistory dd:first-child {width:15.28%}
.ItemHistory dt:nth-child(2), .ItemHistory dd:nth-child(2) {width:20.28%}
.ItemHistory dt:nth-child(3), .ItemHistory dd:nth-child(3) {width:15.28%}
.ItemHistory dt:nth-child(6), .ItemHistory dd:nth-child(6) {width:8.28%}
#ajax_tooltipObj div.FullItemHistory dt, #ajax_tooltipObj div.FullItemHistory dd {width:31.3%}
.ItemHistory dd, .FullItemHistory dd
{
border-top:1px solid #dad7d7;
}
.ItemHistory dl.headings dt, .FullItemHistory dt
{
height:40px;
}
#ajax_tooltipObj div.FullItemHistory dt
{
height:25px;
}
.ItemHistory dl:nth-of-type(odd) dt, .ItemHistory dl:nth-of-type(odd) dd .FullItemHistory dl:nth-of-type(odd) dt, .FullItemHistory dl:nth-of-type(odd) dd {
background: #eee;
}
.headings {background: #eee;}
.ItemHistory dl, .FullItemHistory dl
{
clear: left;
}
.FullItemHistory dt, .FullItemHistory dd
{/*
padding:.25em;
border-right:1px solid #c00;
border-bottom:1px solid #c00;
width:45px;
float:left;
*/}
div.ItemHistory p { display:block; text-align:center; width: 100%; clear:left; background-color:#dad7d7; padding: 5px 0px; line-height: 2em;}
div.ItemHistory p span{ margin:0 5px; }
#ajax_tooltipObj div.FullItemHistory {width: 100%;}
/*Item order history exceptions - */
dl.alternativeitem { background-color:#EBECF0; background-image:url('../images/triangle.png'); background-repeat: no-repeat; background-position: center -1px; padding-top:20px; padding-bottom:10px;}
dl.alternativeitem dd { border-top: 0px dotted #dad7d7; }
dl.itemException dd:first-child {width:99%; border-top: 0px dotted #dad7d7; text-align:center; color:#fd4a21; padding-bottom:10px;}
/****Cart Table************/
/*Hide some elements for the view cart page*/
body.viewcart h2.toolBox,
/*body.viewcart div.customertoolstable,*/
body.viewcart a#viewCart,
body.viewcart a#favourites,
body.viewcart p > a.customertoolslink
{ display:none;}
.updatecart { float:left; width:49.9%; }
td.ViewCart_Header_Left {
background: none repeat scroll 0 0 #EBECF0;
color: #444548;
font-weight: normal;
padding: 5px 5px;
text-align: left;
font-size: 100%;
}
td.ViewCart_Header_Right {
background: none repeat scroll 0 0 #EBECF0;
color: #444548;
font-weight: normal;
padding: 5px 5px;
text-align: right;
font-size: 100%;
}
td.ViewCart_Header_Center {
background: none repeat scroll 0 0 #EBECF0;
color: #444548;
font-weight: normal;
padding: 5px 5px;
text-align: center;
font-size: 100%; text-transform: uppercase;
}
td.ViewCart_Product_Center {
text-align: center;
vertical-align: middle;
}
td.ViewCart_Product_Left {
vertical-align: middle;
padding: 5px 5px;
}
td.ViewCart_Product_Right {
vertical-align: middle;
padding: 5px 5px;
}
.ViewCart_Separator td{border-bottom:1px dotted #afafb3;}
.ViewCart_Alternative td{border-bottom:1px dotted #afafb3;}
.ViewCart_Alternative { background-color:#EBECF0; padding-top:20px; padding-bottom:10px;}
.ViewCart_Alternative td:last-child {background-image:url('../images/triangle.png');background-repeat: no-repeat; background-position: center -1px; }
.ViewCart_Alternative td { border-top: 0px dotted #dad7d7; }
/*TOTALS*/
.ViewCart_Price_Left {font-size: 100%; text-transform: uppercase; font-weight: normal;}
.ViewCart_Price_Left em { color:#8f8f91; font-style: normal; font-weight: normal;}
.ViewCart_Price_Left strong, .ViewCart_Price_Right strong { font-weight: normal; font-size:150%;}
/*FREIGHT*/
div.ViewCart_Freight_Good, div.ViewCart_Freight_Bad {
/*right: 300px;*/
text-transform:none;
}
/*FREIGHT QUOTE*/
div.ViewCart_Freight_Good_Quote, div.ViewCart_Freight_Bad_Quote {
right: 80px;
top: 15px;
text-transform:none;
}
td.BackToStoreLink
{
padding-top: 60px;
width: 176px;
}
td.ContinueShopping { text-align:left;}
/** PROMO CODE ***/
.PromoCode { padding: 10px; }
.PromoCode p{ width: 50%; float:left; text-align:left; line-height: 2em; margin-bottom:0px; }
.PromoCode div{ width: 50%; float:left; text-align:right; }
.PromoCode div input{clear: left; float: right; }
a.BlueLink { color:#00aeed; font-size: 100%; text-transform: uppercase; padding:10px;}
/** button code further up the page needs copying over input.usethis**/
/******* Proceed *****/
.Proceed{ background-color:#98ca3c; margin-bottom:40px; font-size: 150%; text-transform: uppercase; text-align:right; clear: left;}
.Proceed.left-aligned{ text-align:left; }
.Proceed a{ color:#fff; padding: 20px; line-height: 2em;}
.Proceed span{ color:#fff; font-size: 50%; float:left;}
/******* getQuote *****/
.getQuote{ background-color:#555557; margin-bottom:40px; font-size: 150%; text-transform: uppercase; text-align:right; display:block; clear:both;}
.getQuote a{ color:#fff; padding: 20px; line-height: 2em;}
.getQuote span{ color:#fff; font-size: 50%; float:left;}
.rightaside{ clear:right;}
/**************************************************/
/* STEP 2/3 Checkout */
#checkout {/*width: 682px; margin-left: 10px;*/ margin-right: 2.8%; border:4px solid #EBECF0; margin-bottom:10px; padding-bottom:20px;}
#checkout div{width: 46.5%; float:left; margin-left:3%}
#checkout div.guest{width: 94%; float: none; margin-left:0%; margin:0 auto 10px auto; border-bottom:4px solid #EBECF0; padding: 30px 0 }
#checkout div.guest h2, #checkout div.guest input.guest{ float:left; display:block;}
#checkout div.guest input.guest{ margin-left: 90px; margin-top: -20px; }
#checkout_promo {width: 682px; margin-left: 10px; border:4px solid #EBECF0; margin-bottom:10px; padding-bottom:20px;}
#checkout_promo div{width: 46.5%; float:left; margin-left:3%}
#checkout_email {width: 682px; margin-left: 10px; border:4px solid #EBECF0; margin-bottom:10px; padding-bottom:20px;}
#checkout_email div{width: 46.5%; float:left; margin-left:3%}
#checkout_instructions {width: 682px; margin-left: 10px; border:4px solid #EBECF0; margin-bottom:10px; padding-bottom:20px;}
#checkout_instructions div{width: 46.5%; float:left; margin-left:3%}
#checkout_card {width: 682px; margin-left: 10px; border:4px solid #EBECF0; margin-bottom:10px; padding-bottom:20px;}
#checkout_card div{width: 46.5%; float:left; margin-left:3%}
.tableBorders{border-top:1px dotted #afafb3; border-bottom:1px dotted #afafb3; padding: 10px 0px;}
.Redtxt { color:#e31b23;}
/** button code further up the page needs copying over input.login**/
/** button code further up the page needs copying over input.guest**/
#checkout h2, #checkout p{ margin-left: 10px; margin-right:10px;}
#checkout div h2, #checkout div p{ margin-left:0px; margin-right:0px;}
#checkout div p.smMessage, p.smMessage {font-size:80%; text-transform: uppercase; padding: 10px; background-color: #EBECF0; margin-left:10px; margin-right:10px;}
#checkout_promo h2, #checkout_promo p{ margin-left: 10px; margin-right:10px;}
#checkout_promo div h2, #checkout_promo div p{ margin-left:0px; margin-right:0px;}
#checkout_promo div p.smMessage, #checkout_promo p.smMessage {font-size:80%; text-transform: uppercase; padding: 10px; background-color: #EBECF0; margin-left:10px; margin-right:10px;}
a.greytext{color: #444548;}
/******* Proceed *****/
#Proceed{ width: 670px; margin-left: 0px; background-color:#555557; margin-bottom:40px; margin-bottom:10px; padding:10px;}
#Proceed span{ color:#fff; text-transform: uppercase; font-size: 70%; float:left; line-height:4em;}
/** button code further up the page needs copying over input.payment**/
/*Right Blocks*/
/*aside#rightcol {display: inline-block; padding-top:0px;}
#rightcol {width: 250px; margin-left: 10px;}*/
#rightcol table td.ViewCart_Product_Left img{width: 60px;}
#rightcol table td.ViewCart_Product_Left strong{font-size: 150%;}
.outstandingInvoicesContainer {
margin-bottom: 20px;
}
.invoicesItemContainer {
width: 100%;
border-bottom: 1px solid #efefef;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
}
.invoicesItemContainer .invoicesItem {
margin-top: 4px;
margin-bottom: 4px;
}
.invoicesItemContainer .invoiceDateContainer {
display: inline-block;
width: 45%;
}
.invoicesItemContainer .invoiceNumberContainer {
display: inline-block;
width: 45%;
}
.invoicesItemContainer .invoiceAmountContainer {
display: inline-block;
width: 45%;
}
.invoicesItemContainer .invoiceDatePaidContainer {
display: inline-block;
width: 45%;
}
.invoicesItemContainer .invoiceLinkContainer {
display: inline-block;
width: 45%;
}
.pastInvoicesDateSelectionContainer {
margin-top: 10px;
}
.dateSelectionContainer {
display: inline-block;
width: 45%;
}
.dateSelectionContainer input {
padding: 4px;
}
.requestInvoicesActionContainer {
margin-top: 10px;
}
.invoiceSearchMessagesContainer {
margin-top: 10px;
color: Red;
}
.backOrderListContainer {
width: 100%;
}
.backOrderItemContainer {
width: 100%;
border-bottom: 1px solid #efefef;
margin-top: 10px;
margin-bottom: 10px;
}
.backOrderItemContainer .backorderItem {
margin-top: 4px;
margin-bottom: 4px;
}
.backOrderItemContainer .backOrderReferenceContainer {
display: inline-block;
width: 45%;
}
.backOrderItemContainer .backOrderQuantityContainer {
display: inline-block;
width: 45%;
}
.backOrderItemContainer .backOrderItemDescriptionContainer {
display: inline-block;
width: 95%;
}
.backOrderItemContainer .backOrderETAContainer {
display: inline-block;
/*width: 15%;*/
}
.backOrderItemContainer .backOrderDateCreatedContainer {
display: inline-block;
width: 45%;
}
.backOrderItemContainer .backOrderDateUpdatedContainer {
display: inline-block;
width: 45%;
}
.backOrderCartWarning {
color: Red;
padding: 4px;
font-weight: 600;
}
.backOrderCartWarning a{
text-decoration: underline;
}
.backOrderInBasketListContainer {
padding: 10px;
background: orange;
color: #ffffff;
}
.backOrderInBasketListContainer h3{
color: Red;
}
.backOrderInBasketListContainer ul{
margin-left: 30px;
}
.confirmBackorderButton {
display: inline-block;
padding: 6px 10px;
background: red;
color: #ffffff;
font-size: 14px;
border-radius: 4px;
margin-top: 10px;
}
.backOrderIncludedCheckOut {
display: inline-block;
margin-top: 10px;
color: #ffffff;
background: #98ca3c;
padding: 6px 10px;
border-radius: 4px;
}
/* ============================== */
/* ! Turn off print only stuff */
/* ============================== */
.printable {display: none;}
/* ============================== */
/* ! Print Only */
/* ============================== */
@media print {
.printable {display: block;}
}
@media print {
@page {
size: landscape
}
.noPrint {
display: none !important;
}
.printBusinessName {
display: inline !important;
}
#leftcol {
display: none;
}
#rightcol {
display: none;
}
#contentcol {
width: 100% !important;
}
#breadcrumbs {
display: none;
}
#header {
display: none;
}
#holdTopNav {
display: none;
}
#footer {
display: none;
}
#meta {
display: none;
}
}
/* ============================= */
/* ! Layout for mobile version */
/* ============================= */
@media handheld, only screen and (max-width: 767px) {
body {
}
/*TYPOGRAPHY*/
#header p{font-size: 100%;}
.white, a.toggleMenu { color: #fff; }
#header.darkHeader{width: 100%;position: relative;top: 0;z-index: 999;box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.3);/* background: #222222; */}
/*design elements*/
/*.blackGradient, a.toggleMenu {
background-color: #050505; /* fallback/image non-cover color */
/* background-image: url(../images/fallbackGradient.png); /* fallback image */
/* background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4a4949), to(#050505)); /* Safari 4+, Chrome 1-9 */
/* background-image: -webkit-linear-gradient(top, #4a4949, #050505); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
/* background-image: -moz-linear-gradient(top, #4a4949, #050505); /* Firefox 3.6+ */
/* background-image: -ms-linear-gradient(top, #4a4949, #050505); /* IE 10+ */
/* background-image: -o-linear-gradient(top, #4a4949, #050505);/* Opera 11.10+ */
/*}*/
/*turn OFF elements for small devices*/
nav#mainMenu ul, #header p span, #leftcol div.block {display: none;}
input[type=submit].button {-webkit-appearance: none;}
/*turn ON elements for small devices*/
.active, #mobileLogin { display: block; }
/*global margins*/
.row, #content .row, #bottomBlocks .row{padding-left: 0em;padding-right: 0em;max-width: 100%;width: 100%;}
/* put back correct widths from 1140 */
#leftcol, #contentcol, #rightcol {width:auto;}
/*re-arrange header elements */
#header div.row .onecol{/* float: left; */width: 100%;padding-top: 0;padding-left: 1em;padding-right:0px;padding-bottom: 0.5em;display: block;}
#header div.row .fivecol{ float: left; width: 100%; padding-left:0px; padding-right:0px; text-align: center; top: 0;}
#logo a{ width: 100px; height: 120px; }
#header p{ padding-top: 1em; text-align:right; }
/* #header p em{ display:block; padding-bottom:0.5em } */
#phone {position:absolute;top: 0;right: 1em;/* line-height:1em; */font-size: 85%;display: block;}
#searchContainer form {width: 100%;/* max-width: 100%; */margin: 0;display: block;position: relative;text-align: center;}
div#searchContainer {/* clear:left; */margin-top:0;/* width: 100%; *//* padding: 0; */float: none;max-width: 100%;/* overflow: hidden; */display: block;max-width: 100vw;width: 100%;margin: 0.5em auto;}
form#searchContainer {/* padding:0.5em; */}
#searchContainer form .input {/* width: 79%; */}
.darkHeader #searchContainer input.input{position: relative;}
#mobileLogin {width: auto;display: block;/* float: right; */height: 40px;line-height: 42px;max-height: 46px;max-width: 100px;text-align: center;margin: 0.5em auto;border: 1px solid #222222;position: absolute;top: 3em;right: 0.5em;}
#holdTopNav div.row {border:none;}
#Proceed {width: 90%;text-align: center;}
#Proceed span {display:none!important;}
#Proceed .payment {margin: 0 auto;float: none;}
/*CART*/
/*#mainMenu {border-bottom: 1px dotted #f7f4f4;}*/
#cart { width: 150px; float:left; margin-left:150px; padding-left:0; padding-right:0; padding-top: 0.5em;}
#cart p{ line-height: 1.6em;}
#cart p a{ clear: left; display: block; width:auto;}
/*leftcol*/
#leftcol { padding-top: 0em;}
/*menu*/
.toggleMenu {line-height: 1.2em;}
#leftMenu {/* margin-bottom: 1em; */}
a.toggleMenu {border-bottom: none;margin-bottom: -1px;}
#leftMenu ul > li { background-image: none;}
#leftMenu ul > li > .parent { background-image: url("../images/downArrow.png"); background-repeat: no-repeat; background-position: right; background-position: 95% 50%;}
/*Content*/
#content div.row { background-image:none; padding-top: 0px;}
/*turn off left blocks*/
#contentcol { padding-top: 1em; padding-bottom: 1em;}
/*BUTTONS*/
#Submit1 { background-position: -0px -597px; }
a#viewCart { background-position: -0px -627px; }
a#favourites, a#itemhistorybutton, a#cutomerinvoicesbutton, a#customerbackordersbutton, a#contactbutton,a#editdetailsbutton,a#applybutton, a#checkoutbutton, a#logoutbutton { background-position: -0px -656px; }
/*move search down on category page*/
body.category div#content div.row section#rightcol{ position: relative; }
body.category div#content div.row section#rightcol ul#categories, body.category div#content div.row section#rightcol ul#products {margin-bottom:0em; padding-bottom: 4em;}
body.category div#content div.row section#rightcol div#search{ position: absolute; bottom:0em; width: 92%; margin-bottom: 0em; }
/*move search down on product page*/
body.product div#content div.row { position: relative; }
body.product div#content div.row div#rightcol { position: absolute; bottom:1em; }
/*product slider*/
/*#holdSlider p{ width: 40%; display:block; float:left; padding-right:0px; clear:left }
#holdSlider form p{ width: 60%; }
#holdSlider p.last{ padding-left:0px; }*/
#slider { width: 260px; }
#slider li { width: 95%; }
#holdSlider h3.featured{ height:auto }
#holdSlider p.featured{ height:auto }
a.mb-scrollButtons.mb-left { left: -15px; }
a.mb-scrollButtons.mb-right { right: -15px; }
.mb-inside { display:block; max-height: 380px;}
/*content area*/
#leftcol { margin-left: 0px; margin-right: 0px; width:92%}
#rightcol { margin-left: 0px; margin-right: 0px; width:92%}
/* categories/products */
#CategoryList li {width: 43.5%; /*text-align:center;*/}
#categories li, #products li, div.related ul#products li{width: 44.5%; /*text-align:center;*/}
/*#categories li img, #products li img, div.related ul#products li img { width: 100px; height: 86px;}*/
#categories li span img, #products li span img, div.related ul#products li span img { width: auto; height: auto;}
#product div.sixcol { padding-left: 0px; padding-right: 0px;}
.categorytitle { width: 95%;}
/*body.product div.related input.addCart { margin-left:auto; margin-right:auto; }*/
/*thumbnails */
#slider1 .viewport { }
/* product tabs */
.shadetabs li a { padding-left: 0.25em; padding-right: 0.25em; }
/*first footer elements*/
#footer div.row div.threecol {width: 42%; padding-right: 0em; float:left; word-wrap: break-word}
footer h5 { clear: left; margin-top:1.2em}
#meta, #meta p.last { text-align:center;}
#meta div { padding-top:1em; }
/*******HOME SUBSCRIBE*******/
.subscribeWrap{background: whitesmoke; padding: 2em;}
.subscribeWrap h2{border: none; text-align: center; padding-bottom: 2em}
.subscribeWrap form table td{width: 95%;display: block;}
.subscribeWrap form label{display: block;}
.subscribeWrap form input[type="text"], .subscribeWrap form input[type="email"] {display: block; border: 1px solid grey; outline: none; border-radius: 0; line-height: 2; padding: 0.5em; width: 100%}
.subscribeWrap form td.center{margin: 0 auto;}
.subscribeWrap form .center input[type="text"] {display: block;border: 1px solid grey;outline: none;border-radius: 0;line-height: 2;padding: 0.5em;width: 95%;margin: 0 auto;}
.subscribeWrap form .center img{text-align: center; display: block; margin: 1em auto;}
.subscribeWrap form .center input[type="submit"] {display: block; margin: 0 auto;}
/*CART PROCESS CSS*/
/*Checkout Breadcrumbs*/
ul#checkoutBreadcrumbs li a{ text-indent: -9998em; font-size: 80%}
ul#checkoutBreadcrumbs li a span{ text-indent: 0em;}
/*Set body class to change styles*/
/*First - View Cart*/
body.viewcart ul#checkoutBreadcrumbs li.first a{ text-indent: 0em; }
body.viewcart ul#checkoutBreadcrumbs li.first{ width: 60% }
body.viewcart ul#checkoutBreadcrumbs li.second,
body.viewcart ul#checkoutBreadcrumbs li.third,
body.viewcart ul#checkoutBreadcrumbs li.fourth { width: 12.5% }
/*Second - ID*/
body.identification ul#checkoutBreadcrumbs li.second a{ text-indent: 0em; }
body.identification ul#checkoutBreadcrumbs li.second{ width: 60% }
body.identification ul#checkoutBreadcrumbs li.first,
body.identification ul#checkoutBreadcrumbs li.third,
body.identification ul#checkoutBreadcrumbs li.fourth { width: 12.5% }
/*Third - Checkout*/
body.checkout ul#checkoutBreadcrumbs li.second a{ text-indent: 0em; }
body.checkout ul#checkoutBreadcrumbs li.second{ width: 60% }
body.checkout ul#checkoutBreadcrumbs li.first,
body.checkout ul#checkoutBreadcrumbs li.third,
body.checkout ul#checkoutBreadcrumbs li.fourth { width: 12.5% }
/*fourth - Confirmation*/
body.finalise ul#checkoutBreadcrumbs li.third a{ text-indent: 0em; }
body.finalise ul#checkoutBreadcrumbs li.third{ width: 60% }
body.finalise ul#checkoutBreadcrumbs li.first,
body.finalise ul#checkoutBreadcrumbs li.second,
body.finalise ul#checkoutBreadcrumbs li.fourth { width: 12.5% }
/* cart links or buttons*/
.Proceed { font-size: 90% }
/*viewcart postcode*/
div.ViewCart_Freight_Good, div.ViewCart_Freight_Bad { right: 0px;}
div.ViewCart_Freight_Good, div.ViewCart_Freight_Bad, div.ViewCart_Freight_Good_Quote, div.ViewCart_Freight_Bad_Quote { position: relative; margin: 0px 0px 0px auto; width: 170px; padding:10px 10px 10px 10px; height:60px; font-size:80%; line-height:110%;}
td.freight span{ display:block; margin-top: 80px;}
div.ViewCart_Freight_Good, div.ViewCart_Freight_Good_Quote { background: URL('/wmsimages/freight_good.responsive.png'); }
div.ViewCart_Freight_Bad, div.ViewCart_Freight_Bad_Quote { background: URL('/wmsimages/freight_bad.responsive.png'); }
td.ViewCart_Price_Right { padding: 5px 5px;}
.ViewCart_Price_Left strong, .ViewCart_Price_Right strong { font-weight: 600; font-size: 100%;}
/* ========================================== */
/* ! VIEW CART TABLES */
/* ========================================== */
/* Force table to not be like tables anymore */
table.Blocks {width: 98%}
table#tableCart, table#tableCart head, table#tableCart tbody, table#tableCart th, table#tableCart td, table#tableCart tr { display: block; }
/* Hide table headers (but not display: none;, for accessibility) */
table#tableCart thead tr.tablehead { position: absolute; top: -9999px; left: -9999px; }
table#tableCart tr { border-bottom: 1px dotted #afafb3;}
table#tableCart td {
/* Behave like a "row" */
border: none; position: relative; padding-left:40%!important; }
table#tableCart td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px; left: 6px; width: 40%; padding-right: 10px; white-space: nowrap; text-align:left; font-weight: 600}
/* add in the Label for the data */
table#tableCart td:nth-of-type(1):before { content: "Item:"; }
table#tableCart td:nth-of-type(2):before { content: "Quantity:"; }
table#tableCart td:nth-of-type(3):before { content: "Subtotal:"; }
table#tableCart td:nth-of-type(4):before { content: " "; }
/* ========================================== */
/* ! ORDER HISTORY TABLE LAYOUT */
/* ========================================== */
/* Position relative for elements to align to */
div.ItemHistory div#tableCart { position: relative;}
/* Force table to not be like tables anymore */
div.ItemHistory div#tableCart dt, div.ItemHistory div#tableCart dd { display: block; width:55%;}
/* Hide table headers (but not display: none;, for accessibility) */
div.ItemHistory div#tableCart dl.headings { position: absolute; top: -9999px; left: -9999px; }
div.ItemHistory div#tableCart dd {
/* Behave like a "row" */
border: none; border-bottom: 1px solid #eee; position: relative; padding-left:43%;min-height: 30px; }
div.ItemHistory div#tableCart dd:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px; left: 5%; width: 40%; padding-right: 0%; white-space: nowrap; text-align:left; font-weight: 600}
/* add in the Label for the data */
div.ItemHistory div#tableCart dd:nth-of-type(1):before { content: "Item:"; }
div.ItemHistory div#tableCart dd:nth-of-type(2):before { content: " "; }
div.ItemHistory div#tableCart dd:nth-of-type(3):before { content: " "; }
div.ItemHistory div#tableCart dd:nth-of-type(4):before { content: "Price:"; }
div.ItemHistory div#tableCart dd:nth-of-type(5):before { content: "Last Ordered:"; }
div.ItemHistory div#tableCart dd:nth-of-type(6):before { content: "Quantity:"; }
div.ItemHistory div#tableCart dd:nth-of-type(7):before { content: " "; }
div.ItemHistory div#ItemContainer input[type=text] { border:solid 1px gray; }
/* identification page */
body.identification div#pnlCartFull, body.checkout div#pnlCartFull, body.identification div#pnlCartEmpty, body.checkout div#pnlCartEmpty { display: none;}
div#checkout div {width: 94%; border-bottom: 4px solid #EBECF0; padding-bottom: 1em; padding-top: 2em;}
#checkout div.guest input.guest { margin-left: 0px; margin-top: 1em; }
div#checkout table.tableBorders { border-bottom: none; }
/* specific styling for exceptions */
div.ItemHistory div#tableCart dl.itemException dd:before { position: absolute; top: -9999px; left: -9999px; }
div.ItemHistory div#tableCart dl.itemException dd { width: 99%; padding-left: 0; }
}
/* ========================================== */
/* ! Layout for tablet version */
/* ========================================== */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
.container {
padding-left: 10px;
padding-right: 10px;
}
.row { min-width: 748px; }
/****** HEADER **********/
#header div.row .onecol{ width: 11.85% }
#header div.row .fivecol{ width: 37.45% }
#header div.row .sixcol{ width: 44.45% }
/*******menu******/
#leftMenu ul > li { background-position: 0 -418px;}
#leftMenu ul > li:hover { background-position: -256px -418px;}
/*featured product slider*/
#holdSlider p.featured{ height:110px }
/*colorbox*/
.cboxPhoto { max-height:380px!important;}
.footer { padding: 1em 0em;}
.footer div.fourcol {margin-left: 1.3%; margin-right: 1.4%;}
/*BUTTONS*/
#Submit1 { background-position: -0px -603px; }
a#viewCart { background-position: -0px -627px; }
a#favourites, a#itemhistorybutton, a#cutomerinvoicesbutton, a#customerbackordersbutton, a#contactbutton,a#editdetailsbutton,a#applybutton, a#checkoutbutton, a#logoutbutton { background-position: -0px -661px; }
/*Adjusted item order history columns for tablet only*/
/*.ItemHistory dt, .ItemHistory dd, .FullItemHistory dt, .FullItemHistory dd{width:11.32%; padding:.5%;}*/
}
/* ========================================== */
/* ! Provide higher res assets for iPhone 4 */
/* ========================================== */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/***** Declare sprite image 1x ****/
.sprite, #logo a, h2.toolBox, /*.footer ul li, #rightcol ul li,*/ a#favourites, a#itemhistorybutton, a#cutomerinvoicesbutton, a#customerbackordersbutton, a#contactbutton,a#editdetailsbutton,a#applybutton, a#checkoutbutton, a#logoutbutton, #viewCart, #Submit1 { background-image: url('../images/sprite-2x.png'); background-size: 265px 690px; }
/* .logo {
background: url(logo2x.jpg) no-repeat;
background-size: 212px 303px;
}*/
}
.customUserProductListActionsContainer a.button {
display: inline-block;
text-align: center;
text-indent: 0;
}
.customUserProductListContainer {
border-bottom: 1px solid #656565;
padding-top: 6px;
padding-bottom: 6px;
}
.customUserProductListContainer a.button {
display: inline-block;
text-align: center;
text-indent: 0;
}
.customUserProductList {
display: inline-block;
width: 70%;
}
.customUserProductListActions {
display: inline-block;
width: 26%;
}
.customUserProductListActions a.button {
margin-left: 8px;
}
.customUserProductListPrint {
display: none;
margin-top: 20px;
}
.customUserProductListPrint a.button {
display: inline-block;
text-align: center !important;
text-indent: 0;
}
.customUserProductListActions a.button.customProductListDelete {
background: red;
border: 1px solid #f79494;
}
.customUserProductListActionsContainer input {
padding: 6px;
}
.newCustomUserProductListInputContainer {
margin-top: 20px;
display: none;
}
.customUserProductListListContainer {
margin-top: 20px;
}
.customUserProductListListContainer .customUserProductList {
cursor: pointer;
font-size: 18px;
}
.newCustomUserProductListMessages {
margin-top: 10px;
padding: 6px;
}
.alert-error {
background: red;
color: #ffffff;
}
.addToListTrigger {
position: relative;
text-align: center;
margin-top: 10px;
border: 1px solid #efefef;
padding: 2px;
border-radius: 2px;
cursor: pointer;
}
.addToListTrigger .addToListChoiceContainer {
display: none;
position: absolute;
top: -100px;
left: 6px;
background: #646464;
border: 1px solid #656565;
border-radius: 4px;
padding: 2px;
width: 90%;
}
.addToListTrigger .addToListChoiceContainer a {
border-bottom: 1px solid #ffffff;
display: block;
padding: 4px 0 4px 0;
color: #ffffff;
text-decoration: none;
}
.addToListTrigger .addToListChoiceContainer a:hover {
background: #949393;
}
.customUserProductListItemContainer {
margin-top: 20px;
}
.customUserProductListItemRow {
background: #ffffff;
}
tr.customUserProductListItemRow td.sortHandle {
cursor: ns-resize;
background: #656565;
color: #ffffff;
text-align: center;
}
tr.customUserProductListItemRow td.sortHandle div{
width: 40px;
}
tr.customUserProductListItemRow td.available {
background: green;
color: #ffffff;
text-align: center;
}
tr.customUserProductListItemRow td.unavailable {
background: red;
color: #ffffff;
text-align: center;
}
.customUserProductListItemRow td {
border-bottom: 1px solid #656565;
background: #ffffff;
font-size: 11px;
}
.customUserProductListItemRow input[type=number] {
width: 30px;
}
.customUserProductListItemRow input.item-id {
display: none;
}
#dialog-confirm {
display: none;
}
.addedToListNotification {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding: 2px;
background: green;
color: #ffffff;
border-radius: 2px;
}
.searchByStockCodeInputContainer {
margin-top: 20px;
}
.searchByStockCodeInputContainer input {
padding: 6px;
}
.searchByStockCodeInputContainer a.button {
margin-left: 10px;
}
.searchByStockCodeResults {
margin-top: 10px;
max-height: 300px;
overflow-y: scroll;
}
.searchByStockCodeResult {
border-bottom: 1px solid #efefef;
padding-top: 4px;
padding-bottom: 4px;
}
.searchByStockCodeResultDetail {
display: inline-block;
width: 70%;
}
.searchByStockCodeResultQty {
display: inline-block;
width: 10%;
}
.searchByStockCodeResultQty input{
padding: 4px;
width: 30px;
}
.searchByStockCodeResultActions {
display: inline-block;
width: 20%;
}
.addedToListByStockNumberNotification {
background: green;
width: 85px;
text-align: center;
padding: 8px 0px 8px 0px;
border-radius: 4px;
color: #ffffff;
}
.addToCustomListFromOrderHistoryContainer {
position: relative;
display: inline-block;
}
a.addToCustomListFromOrderHistory {
position: relative;
display: inline-block;
margin-top: 2px;
}
a.addToCustomListFromOrderHistory img {
width: 24px;
height: auto;
}
a.existsInOrderTemplate {
border: 2px solid green;
cursor: default;
height:21px;
}
.addToCustomListFromOrderHistoryContainer .addToListChoiceContainer {
display: none;
position: absolute;
top: 0;
right: 0 !important;
background: #4a4949;
color: #ffffff;
width: 200px;
border-radius: 2px;
}
.addToCustomListFromOrderHistoryContainer .addToListChoiceContainer .addToListItem {
cursor: pointer;
border-bottom: 1px solid #efefef;
padding: 6px 4px 4px 4px;
}
.addToCustomListFromOrderHistoryContainer .addToListChoiceContainer .addToListItem:hover {
background: #333333;
}
a.closeCustomListChoice {
display: block;
padding: 4px;
background: #efefef;
color: #656565;
}
.favouritesAddToTemplateContainer {
position: relative;
}
a.favouritesAddToTemplate {
position: relative;
line-height: 17px;
text-align: center;
text-indent: 0;
display: inline-block;
margin-top: 4px;
background-color: #050505;
background-image: none;
}
.favouritesAddToTemplateContainer .addToListChoiceContainer {
position: absolute;
top: 0;
right: 0 !important;
background: #4a4949;
color: #ffffff;
width: 200px;
border-radius: 2px;
text-align: left;
}
.favouritesAddToTemplateContainer .addToListChoiceContainer .addToListItem {
cursor: pointer;
border-bottom: 1px solid #efefef;
padding: 6px 4px 4px 4px;
}
.favouritesAddToTemplateContainer .addToListChoiceContainer .addToListItem:hover {
background: #333333;
}
input.favAddToCart {
background-color: #050505;
position: relative;
line-height: 17px;
text-align: center;
text-indent: 0;
display: inline-block;
margin-top: 4px;
min-height: 30px;
font-weight: 400;
text-decoration: none;
cursor: pointer;
opacity: 0.9;
border: 1px solid #050505;
border-radius: 3px;
color: #ffffff;
}
.printListContainer {
display: inline-block;
width: 30%;
}
.importFavouritesIntoListContainer {
display: inline-block;
width: 30%;
}
.addListToCartContainer {
display: inline-block;
width: 30%;
}
.customUserProductListNameContainer {
display: none;
}
.customUserProductListNameContainer h2 {
margin-top: 10px !important;
text-transform: uppercase;
font-weight: 600;
}
.customUserProductListItemRow .productStockNumber, .customUserProductListItemRow .productCategory {
font-size: 10px;
}
.customUserProductListItemContainer table thead th {
color: #2d2d2d;
vertical-align: top;
background: #efefef;
color: #656565;
padding: 2px;
}
.customUserProductListItemContainer table thead th a {
color: #53c403;
}
.highlightPlaceholder {
border: 1px solid red;
font-weight: bold;
background-color: lightblue;
height: 60px;
}
.checkoutRegulationsNotification {
margin-top: 20px;
margin-bottom: 10px;
background: #656565;
padding: 10px;
color: #efefef;
}
.printBusinessName {
display: none;
}
@media only screen and (max-device-width : 1300px) {
#header.darkHeader nav#mainMenu {position: relative; right: 0;}
#header.darkHeader > .row #searchContainer {display: none;}
}
@media only screen and (max-height : 900px) {
#menuhold .nav{max-height: 800px; overflow-y: scroll; overflow-x: hidden;}
}