/*
This contains all the CSS that does not need the LESS pre-processor.
It is included in head.php before the LESS css.
The LESS pre-processor takes css/vah.less and adds the resultant css directly into page source.
Media queries for mobile devices go in css/stylesheet_mobile.css but during development, are entered directly into head.php to avoid caching.
*/
@font-face { /* Modified version with tick mark */
  font-family: 'Chicago';
  src: url('SysfontE-Regular.woff2') format('woff2'),
  url('SysfontE-Regular.woff') format('woff'),
  url('SysfontE-Regular.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face { /* Modified version with tick mark */
  font-family: 'ChicagoGrey';
  src: url('SysfontGrey-Regular.woff2') format('woff2'),
  url('SysfontGrey-Regular.woff') format('woff'),
  url('SysfontGrey-Regular.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


/*@font-face {
  font-family: 'FindersKeepers';
  src: url('FindersKeepers.woff2') format('woff2'),
  url('FindersKeepers.woff') format('woff'),
  url('FindersKeepers.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}*/

@font-face {
  font-family: 'GenevaNew';
  src: url('GenevaNew-Medium.woff2') format('woff2'),
  url('GenevaNew-Medium.woff') format('woff'),
  url('GenevaNew-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.mobile {
	display:none;
}

.desktop {
	display:block;
}

body {
	font-family:Verdana, Helvetica, Arial, sans-serif;
	margin:0px;
}

img {
	border: 0;
	border-width: 0px;
	border-style: none;
	display:block;
	outline-style:none;
	-moz-outline-style:none;
    cursor: default;
}

img.invert {
	filter: invert(1);
}

div.invert {
	background-color: #000;
	color:#FFF
}

a { text-decoration: none; color:inherit; }

a:active, a:focus { outline-style: none; -moz-outline-style:none; }

/* Overrides the default browser text highlight color */
::selection {
        background-color: #000000;
        color: #ffffff;
}

/* Removes yellow shading on auto-filled inputs like login. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 60px #fafafa inset !important;
    background-color: #fafafa !important;
    background-clip: content-box !important;
}

svg {
	pointer-events: none;
}

.indexPanel {
	width:990px;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:5px;
}

.w100pc {
	width:100%;
}
/* Widths for input elements of different size values. Allows to be overridden for mobile. */
.inputsize16 {
	width:184px;
}
.inputsize28 {
	width:284px;
}

.inputsize30 {
	width:324px;
}

.cols50 {
	width:530px;
}

.float700 {
	float:left;
	width:700px;
}

.table {
    display: table;
    width: 100%;
}

.tr {
    display: table-row;
}

.td {
    display: table-cell;
}

.greyed {
	opacity: 0.4;
}

.padr20 {
	padding-right:20px;
}

.padt10 {
	padding-top:10px;
}

.infoBoxHeading {
	font-weight: bold;
	color: #505050;
	font-size: 11px;
}

.infoBoxContents {
	color: #505050;
	font-size: 11px;
}

.smallText {
	color: #505050;
	font-size: 10px;
}

/*#container {
margin: 20px auto 20px auto;
width: 960px;
background-color: #FFFFFF;
}*/

.container {
	margin: 0px auto 20px auto;
	width: 1024px;
}

#copyright {
width: 100%;
margin-right: auto;
margin-left: auto;
font-size: 11px;
color: #6f6f6f;
padding-bottom: 10px;
padding-top: 20px;
text-align: center;
}

#copyright A {
font-size: 11px;
text-decoration:none;
color: #505050;
}

.break {
clear: both;
}

#clearance {
/*background-position: 0px 10px;
background-repeat: no-repeat;
background-image: url(images/base.png);
height: 20px;*/
clear: both;
}

#tabs {
	color: white;
	text-align: right;
	padding-right: 40px;
	padding-left: 40px;
	line-height: 30px;
	font-size: 10px;
	height: 30px;
	background-color: black;
}

#header {
	height: 110px;
	/*background-color:#000000;*/
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-bottom-left-radius: 11px;
  -webkit-border-bottom-right-radius: 11px;
  /* Firefox 1-3.6 */
  -moz-border-bottom-left-radius: 11px;
  -moz-border-bottom-right-radius: 11px;
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
	border-bottom-left-radius: 11px;
	border-bottom-right-radius: 11px;
}

#logo {
	float: left;
	padding: 0 0 20px 35px;
}

#logo img {
	width:280px;
}

.logoTop {
	padding-top: 6px;
	padding-bottom: 10px;
	display:block;
}

.logoBottom {
	display:none;
}

.storeNameTop {
	color:#FFFFFF;
	font-family: GenevaNew;
	font-size: 19px;
	line-height: auto;
	text-align: center;
	padding-bottom:10px;
}

#tagline {
	float: right;
	padding-right: 20px;
	padding-top: 65px;
}

#menu {
	text-align: left;
	line-height: 40px;
	font-size: 12px;
	padding-right: 40px;
	padding-left: 40px;
	height: 40px;
}

#menu li {
	padding-right: 12px;
	display: inline;
}

#menu ul {
list-style-type: none;
}

#menu a {
	color: #999999;
	text-decoration: none;
}

#advsearch {
  display:inline;
  position:relative;
  left:180px;
}

#menu a:hover {
	color: white;
	text-decoration: none;
}

#search {
	float: right;
}

#search input {
	width: 160px;
}

#macs {
/*	background-position: 0px 0px;
	background-repeat: no-repeat;
	background-image: url(images/macs.png);*/
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-top-left-radius: 11px;
  -webkit-border-top-right-radius: 11px;
  /* Firefox 1-3.6 */
  -moz-border-top-left-radius: 11px;
  -moz-border-top-right-radius: 11px;
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
	border-top-left-radius: 11px;
	border-top-right-radius: 11px;
	font-size: 11px;
	padding-left: 40px;
	text-align: center;
	height: 170px;
	background-color: #ff8700;
}

#macs a {
	color: white;
	text-decoration: none;
}

#macs a:hover {
	color: #ffb464;
	text-decoration: none;
}

#macs h1 {
	font-style: normal;
	font-weight: normal;
	padding-bottom: 20px;
	padding-left: 20px;
	text-align: left;
	padding-top: 30px;
	color: white;
	font-size: 15px;
}

#decode {
	padding-bottom: 18px;
	padding-left: 40px;
	background-color: #505050;
	padding-right: 20px;
	border-top-color: white;
	border-top-width: 1px;
	border-top-style: solid;
	color: #c8c8c8;
	font-size: 11px;
}

#decode h1 {
	padding-top: 19px;
	font-style: normal;
	font-weight: normal;
	font-size: 20px;
}

#decode li {
	color: #c8c8c8;
	font-size: 11px;
	list-style-type: none;
}

#decode a {
	color: #CCCCCC;
	text-decoration: none;
}

#decode a:hover {
	color: #ff8700;
	text-decoration: none;
}

#decodeform {
	width:300px;
	float:left;
}

#serialhomepage {
	width: 85px;
	height:12px;
}

.snpartsscale {
	width:66px;
}

.snbuttonscale {
	width:18px;
}

#nomacs {
	background-position: 0px 0px;
	background-repeat: no-repeat;
	background-image: url(images/macsblack.png);
	font-size: 11px;
	padding-left: 10px;
	padding-top: 3px;
	text-align: center;
	height: 29px;
	background-color: black;
}

#clockdiv {
	border-top: white 1px solid;
	background-position: 0px 0px;
	font-size: 18px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	height :auto;
	min-height: 25px;
	background-color: black;
	color:white;
}

.clockdiv{
	font-size: 22px;
	color:red;
	font-weight: bold;
}

.cdSuffix {
	font-size: 16px;
	color:#FFFFFF;
	font-weight: normal;
}

/* .sectiontitle {
	padding-top:20px;
} */

.machine {
	padding-right: 19px;
	padding-left: 19px;
	float: left;
}

.machine img {
	margin-right: auto;
	margin-left: auto;
}

.tickerfade {
	background-position: 0px 0px;
	background-repeat: no-repeat;
	background-image: url(images/fade.png);
	position:relative;
	top:0px;
	left:20px;
	width:20px;
}

#content {
/*	background-image: url(images/grey.png);
	background-position: 0px 0px;
	background-repeat: repeat-y;*/
	background-color: white;
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-bottom-left-radius: 11px;
  -webkit-border-bottom-right-radius: 11px;
  /* Firefox 1-3.6 */
  -moz-border-bottom-left-radius: 11px;
  -moz-border-bottom-right-radius: 11px;
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
	border-bottom-left-radius: 11px;
	border-bottom-right-radius: 11px;
}

#sidebar {
	font-size: 11px;
	float: left;
	width: 240px;
	background-color: #D4D4D4;
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-bottom-left-radius: 11px;
  /* Firefox 1-3.6 */
  -moz-border-bottom-left-radius: 11px;
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
	border-bottom-left-radius: 11px;
}

#sidebar ul {
	list-style-type: none;
}

#sidebar li {
}

#sidebar h2 {
	padding-top: 19px;
	font-weight: bold;
	color: black;
	font-size: 11px;
}

#sidebar a {
	color: #3c3c3c;
	text-decoration: none;
}

#sidebar a:hover {
	color: #787878;
	text-decoration: none;
}

.sidebox {
	padding-right: 20px;
	padding-bottom: 20px;
	border-top-color: white;
	border-top-width: 1px;
	border-top-style: solid;
	padding-left: 40px;
}

.screen {
    position:relative;
}

.screen a:hover {
	text-decoration: none;
	color: #000;
}

#mymac {
	padding-bottom: 20px;
	background-position: 9px 18px;
	background-repeat: no-repeat;
	background-image: url(images/identify.png);
	background-color: #505050;
	padding-right: 20px;
	border-top-color: white;
	border-top-width: 1px;
	border-top-style: solid;
	padding-left: 40px;
}

#mymac h2 {
	padding-top: 19px;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
}

#mymac li {
	color: #c8c8c8;
}

#mymac a {
	color: white;
	text-decoration: none;
}

#mymac a:hover {
	color: #ff8700;
	text-decoration: none;
}

.indent {
	padding-left: 10px;
}

#main, .main {
	float: left;
	width: 720px;
	background-color: white;
}

#main h1, .main h1 {
	padding-top: 30px;
	padding-bottom: 10px;
	font-size: 15px;
	font-style: normal;
	font-weight: normal;
	color:#000000;
}

#main h2, .main h2 {
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color:#000000;
}

#main h3, .main h3 {
	padding-top: 10px;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color:#000000;
}

#main input, .main input {
	font-size: 12px;
	padding:2px;
}

#main a, .main a {
/*	color: #323232;*/
	text-decoration: none;
}

#main a:hover, .main a:hover {
	color: #969696;
	text-decoration: none;
}

#main p, .main p {
	padding-bottom: 10px;
	color: #646464;
/*	font-size: 11px;*/
	font-style: normal;
	font-weight: normal;
}

td.main {
	width:auto;
}

#popupPanel {
	background-color: white;
	font-size:11px;
	color:#000000;
	font-style: normal;
	font-weight: normal;
}

#popupPanel TD {
	font-size:11px;
	color:#000000;
	font-style: normal;
	font-weight: normal;
}

.banner {
	float: left;
	width: 640px;
	background-color: black;
	padding-left:40px;
	padding-top:20px;
	padding-right:40px;
	padding-bottom:20px;
	border-top-color: #dcdcdc;
	border-top-width: 1px;
	border-top-style: solid;
}

.banner p {
	padding-bottom: 10px;
	font-size:11px;
	color:#CCCCCC;
	font-style: normal;
	font-weight: normal;
}

.banner a {
	text-decoration: none;
	color: #ff8700;
}

.bannerTitle {
	float: left;
	padding-left:20px;
	padding-top:10px;
	color:#FFFFFF;
	font-size:18px;
}

/*.button {
	margin-left: 5px;
	background-position: 0px 0px;
	background-image: url(images/buttonleft.png);
	background-repeat: no-repeat;
	padding-left: 10px;
	float: right;
	background-color: #282828;
}

.button a {
	font-size: 12px;
	color: white;
	text-decoration: none;
}

.button a:hover {
	font-size: 12px;
	color: #ff8700;
	text-decoration: none;
}

.buttontext {
	float: left;
}

.buttonimage {
	float: left;
}*/

.buttonContainer {
	float: right;
	padding: 10px 0px 10px 30px;
	text-align: right;
}

.buttonBottom {
	position:absolute;
	bottom: 15px;
	right: 15px
}

.buttonBottomDesktop {
	position:absolute;
	bottom: 15px;
	right: 15px
}

.buttonText {
	float: left;
	padding-top:12px;
	vertical-align: middle;
}

.buttonTextSpacer {
	width:1px;
	height:12px;
}

.buttonMax {
	width:190px;
}

.flag {
	height:30px;
	float: right;
	margin-left: 5px;
	background-color: #282828;
	background-position: 0px 0px;
	background-image: url(images/buttonleft.png);
	background-repeat: no-repeat;
	padding-left:10px;
}

.flagimage {
	float: left;
	padding-top:8px;
	padding-bottom:2px;
	margin-right: 2px;
}

.currency {
	height:30px;
	float: right;
	margin-left: 5px;
	background-color: #282828;
	background-position: 0px 0px;
	background-image: url(images/buttonleft.png);
	background-repeat: no-repeat;
	padding-left:10px;
}

.currencyimage {
	float: left;
	padding-top:6px;
	padding-bottom:2px;
	margin-right: 2px;
}

.snFieldname {
	font-size: 10px;
	color:#000000;
}

.snFielddata {
	font-size: 10px;
	color:#CCCCCC;
	padding-top:6px;
	line-height:150%;
}

.snFielddata A {
	font-size: 10px;
	color:#000000;
	font-weight:bold;
}

.snFieldlist {
	font-size: 10px;
	color:#CCCCCC;
	padding-top:10px;
	line-height:150%;
	border-width:1px;
	border-top-style:solid;
	border-top-color:#909090;
	margin-top:5px;
	width:170px;
}

.snmFieldname {
	color: #000000;
	padding-top:2px;
	padding-bottom:2px;
	float:left;
	width:140px;
	line-height:110%;
	min-height: 26px;
}

.snmFielddata {
	color:#000000;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:5px;
	float:left;
	width:295px;
	line-height:110%;
}

.snBox {
	padding-bottom:10px;
	float:left;
	width:440px;
}

.snGutter {
	float:left;
	width:20px;
}

.language {
	text-align: left;
	float: right;
	margin-left: 5px;
	background-color: #282828;
}

.header {
	background-color: #000;
	padding-top:14px;
}

.headerError {
  font-size: 11px;
  background: #000000;
  color: #ff1010;
  padding-left: 10px;
  padding-bottom: 2px;
  text-align : center;
}


.headerInfo {
  font-size: 11px;
  background: #000000;
  color: #ffffff;
  padding-left: 10px;
  padding-bottom: 2px;
  text-align : center;
}

.normal {
	width: 100%;
	float: left;
	padding: 0px 10px 0px 25px;
	box-sizing:border-box;
}

.normal a {
/*	color: #323232;*/
	text-decoration: underline;
}

.normal a:hover {
	background-color:#000000;
	color: #FFFFFF;
}

/*.normal a:hover {
	color: #969696;
	text-decoration: none;
}*/

.normal ol {
	padding-bottom: 10px;
	list-style-position: inside;
	list-style-type: decimal;
}

.normal ul {
	padding: 10px 20px 10px 40px;
	list-style-position: outside;
	list-style-type: "• ";
/*	list-style-type: disc; */
	line-height: 20px;
	margin-block-start: 0;
	margin-block-end: 0;
}

.normal li {
	padding-bottom:10px;
}

.normal p {
	padding-bottom: 10px;
	margin:0px;
}

.contentPad {
	width: 100%;
	padding: 10px 10px 10px 25px;
	box-sizing:border-box;
}

.contentPad p {
	margin: 0px;
	padding:0px 0px 15px 0px;
}

.contentPad a {
	text-decoration: underline;
}

.contentPad a:hover {
	background-color: #000000;
	color: #FFFFFF;
}

.pop p {
	padding-bottom: 10px;
	color: #646464;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
}

.pop h1 {
	padding-top: 30px;
	padding-bottom: 10px;
	font-size: 15px;
	font-style: normal;
	font-weight: normal;
	color:#000000;
}

.pop h2 {
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color:#000000;
}

.pop a {
	color: #323232;
	text-decoration: none;
}

.pop ul {
padding-bottom: 10px;
list-style-position: inside;
font-size: 11px;
color: #646464;
list-style-type: disc;
}

.popupBox {
  	padding-left:20px;
  	margin-right:40px;
  	padding-bottom:20px;
	width:100%;
	height:100%;
	background-color:white;
}

.addbox {
	margin-bottom: 1px;
	margin-top: 1px;
	margin-left: 1px;
	float: left;
	background-color: black;
	height: 240px;
	width: 239px;
}

.list {
	width: 100%;
	padding-bottom: 10px;
	padding-top: 10px;
	float: left;
	border-top-color: #dcdcdc;
	border-top-width: 1px;
	border-top-style: solid;
}

.listend {
	width: 100%;
	height:1px;
	padding-bottom: 10px;
	padding-top: 10px;
	float: left;
	border-bottom: 1px #000 dotted;
}

.list a {
	color: #000;
	text-decoration: none;
}

.list a:hover {
	color: #a0a0a0;
	text-decoration: none;
}

.list ul {
/*font-size: 11px;
color: #646464;*/
list-style-type: none;
	margin:0px;
}

.listpicture {
	position:relative;
	float: left;
	margin-right: 8px;
	width: 100px;
}

.listdescription {
	padding-top:10px;
	padding-bottom:10px;
	width: 670px;
	float: left;
}

.listdescriptionshort {
	margin-right: 10px;
	width: 350px;
	float: left;
}

.listdescriptionlong {
	margin-right: 20px;
	width: 500px;
	float: left;
}

.listdescriptionXlong {
	width: 550px;
	float: left;
}

.listdescriptionVlong {
	margin-right: 20px;
	width: 600px;
	float: left;
}

.listdescriptionCart {
	padding-top:20px;
	width: 640px;
	float: left;
}

.listtitle {
	color: #999999;
	width: 120px;
	float: left;
}

.listdata {
	color: #000000;
	width: 500px;
	float: left;
}

.listname {
	float:left;
	color: #282828;
	width:380px;
}

.listmodel {
/*	font-size: 9px;*/
/*	float:left;*/
}

.listattribute {
/*	font-size: 10px; */
/*	color: #282828; */
}

.listselect {
	width: 20px;
	float: right;
	text-align:right;
}

.listprice {
	text-align: right;
/*	width: 175px; */
	float: right;
}

.listpricesmall {
	text-align: right;
	width: 100px;
	float: right;
}

.listbuy {
	text-align: right;
	width: 150px;
	float: right;
}

.listsmallbuttons	{
	text-align: right;
	width: 120px;
	float: right;
}

.listqty {
	width: 100px;
	float: right;
}

.listqtytag {
	width: 50%;
	float: left;
	text-align: right;
}

.listqtyfield {
	box-sizing: border-box; /* prevents padding from causing width to go over 100% */
	text-align: left;
	width: 50%;
	float: left;
	padding-left:5px;
}

.listtotal {
	text-align: right;
	width: 200px;
	float: right;
}

.listbutton {
	text-align: right;
	width: 540px;
	float: left;
}

.listquotes {
	width: 540px;
	float: right;
}

.listfbname {
	float: left;
	margin-right: 10px;
	width: 70px;
}

.listfield, .listfield2 {
	float: left;
	margin-right: 10px;
	width: 100px;
}

.listaddress {
	width: 400px;
	float: left;
}

.radioBox {
	float:right;
	padding-left:8px;
}

.checkBox {
	float:left;
	padding-right:8px;
}

.specialoffer, .specialoffer A {
/*	font-weight: bold;
	color: #ff8700;*/
	text-decoration: underline;
	float:left;
}

.instock {
/*	float: right; */
/*	font-size: 10px;*/
/*	font-weight: bold;*/
/*	color: #787878;*/
	padding:10px;
}

.outofstock {
	float: right;
/*	font-size: 10px;*/
/*	font-weight: bold;*/
/*	color: red;*/
}

.vat {
/*	color: #ff8700;*/
/*	font-size: 9px;*/
}

.trade {
	color: #787878;
	font-size: 9px;
}

.old {
	display: inline;
	text-decoration: line-through;
}

.new {
	display: inline;
	color: red;
}

.bold {
	font-weight: bold;
}

/*.red {
	color:red;
}*/

.sys6Red {
/*	font-weight: bold;*/
}

.sys7Red {
	color: red;
}

.imgautofit {
	max-width:100%;
	max-height:100%;
}

/*.boxtoo {
	margin-bottom: 10px;
}

.boxtoo ul {
padding-bottom: 0px;
font-size: 11px;
color: #646464;
list-style-type: none;
}*/

.box {
	padding-right: 8px;
	padding-left: 8px;
	float: left;
	text-align: center;
	width: 170px;
	height:170px;
	position:relative;
}

.box a {
	color: #000;
	text-decoration: none;
	cursor:default; /* Keeps the cursor as an arrow and stops it becoming iBeam over div buttons.*/
}

.box a:hover {
	color: #000;
	text-decoration: none;
}

.box img {
	max-width:150px;
	height:auto;
	margin:auto;
}

.boxTop {
	padding-right: 10px;
	padding-left: 10px;
	float: left;
	text-align: center;
	width: 140px;
	height:174px;
}

.boxTop a {
	color: #000;
	text-decoration: none;
	cursor:default; /* Keeps the cursor as an arrow and stops it becoming iBeam over div buttons.*/
}

.boxTop a:hover {
	color: #000;
	text-decoration: none;
}


/*.box ul {
	list-style-position: inside;
}

.box li {
	display: inline;
}

.boxWide {
	padding-bottom: 20px;
	padding-right: 40px;
	float: left;
	font-size: 10px;
	color: #323232;
	text-align: center;
	width: 640px;
}

.boxWide a {
	color: #323232;
	text-decoration: none;
}

.boxWide a:hover {
	color: #969696;
	text-decoration: none;
}

.boxWide ul {
	list-style-position: inside;
}

.boxWide li {
	display: inline;
}

.select {
	color: #646464;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
}

.boxthree {
	padding-top: 40px;
	float: left;
	height: 60px;
	width: 160px;
	text-align:center;
	font-size:15px;
	line-height:normal;
	color: #ffE1BF;
}

.boxthree a {
	font-size:15px;
	color: #ff8700;
}*/

.boxDone {
	padding-top: 40px;
	float: left;
	height: 60px;
	width: 160px;
	text-align:center;
	font-size:15px;
	line-height:normal;
	color: #ff8700;
}

.checkoutProgress {
	width: 720px;
	float: left;
	padding-top: 20px;
	padding-bottom: 20px;
}

.cbbox1 {
	position:relative;
	width:25%;
	height:10px;
	margin-top:15px;
	margin-bottom:15px;
	background-color: #ffe1bf;
	float:left;
}

.cbbox1a {
	width:50%;
	height:10px;
	background-color: #ffe1bf;
	float:right;
}

.cbbox2 {
	position:relative;
	width:25%;
	height:10px;
	margin-top:15px;
	margin-bottom:15px;
	background-color: #FF8000;
	float:left;
}

.cbboxfloat {
	position:absolute;
	left:50%;
	top:-15px;
	margin-left:auto;
	margin-right:auto;
	width:60px;
	color: #fdd9b0; /* #ffe1bf */
	z-index:1;
	-webkit-transform: translateX(-50%);
  	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	text-align:center;
}

.cbcircle {
	width:40px;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:5px;
}

.results {
	float: left;
/*	width: 350px;*/
}

.moreresults {
	text-align: right;
	float: right;
/*	width: 450px;*/
}

#homeresults {
	padding-top: 15px;
/*	padding-bottom: 15px; */
	float: left;
	width: 600px;
	font-size: 11px;
}

.homeResultsPanel1 {
	float: left;
	width: 260px;
	font-size: 11px;
	padding-right:10px;
}

.homeResultsPanel2 {
	float: left;
	width: 170px;
	font-size: 11px;
	padding-right:10px;
}

.homeResultsPanel3 {
	float: right;
	width: 140px;
	padding-top:5px;
	padding-right:10px;
	font-size: 11px;
}

.product {
	float: left;
	width: 100%;
}

.picture {
	float: right;
/*	width: 320px; */
	text-align: center;
	margin-left:20px;
	margin-bottom:10px;
	position:relative;
}

.proddesc {
	overflow: hidden;
	margin-bottom:10px;
	position: relative;
	min-height:320px;
}

.oneimage { /* used to alter proddesc min height if there is only one image so no image selector. */
	min-height:268px;
}

.cropdesc {
	max-height: 360px;
}

#moredesc {
	position: absolute;
	bottom:0px;
	width:100%;
	height: 80px;
	display: none; /* Set to flex when visible */
}

.prodfields {
	float:left;
	overflow: hidden;
	margin-bottom:10px;
	position: relative;
	width:620px;
}

.sys6moredesc {
	background-image: url(/images/dithered_fade3.png);
	background-repeat: repeat-x;
	background-size: 40px 80px;
}

.sys7moredesc {
	background-image: linear-gradient(to bottom, transparent 0, white 70%, white 100%);
}

#morelink {
	align-self: flex-end;
	width:100%;
	text-align: center;
	cursor: pointer;
}

.sysImage {
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
	height:auto;
	margin:auto;
}

.pictureWrap {
	float: right;
	padding-left: 20px;
	padding-bottom: 20px;
}

.catpicture {
	float: right;
	padding-left: 15px;
}

.space {
	padding-top: 20px;
}

.bigbox {
	float: left;
	padding-top:15px;
}

#offer {
	float: left;
	width: 640px;
	text-align: left;
	padding-top: 10px;
}

.sys6Offer, .sys7Offer {
	float: left;
	width: 640px;
	text-align: left;
	padding-top: 10px;
}

.sys7Offer {
	color: #FF0000;
}

.totalsContainer {
	float: right;
	text-align:right;
}

.totalsLine {
	padding-top: 2px;
}

.formcolumn {
	float: left;
	width: 460px;
}

.formelement {
	float: left;
	width: 450px;
	padding-bottom: 10px;
}

.formelementFull {
	float: left;
	width: 100%;
	padding-right: 20px;
	padding-bottom: 10px;
	box-sizing: border-box;
}

.formtitleshort {
	float: left;
	width: 80px;
	min-height:1px;
	padding-bottom:5px;
}

.formtitle {
	float: left;
	width: 120px;
	min-height:1px;
	padding-bottom:5px;
}

.formtitlelong {
	float: left;
	width: 150px;
}

.formtitlexlong {
	float: left;
	width: 200px;
	min-height: 35px;
}

.formdata, .formdatalong {
	float: left;
	width: auto;
	padding-right: 10px;
	padding-bottom: 10px;
	color:#000000;
	position:relative;
}

.formdatatextarea, .formdatadropdown {
	float: left;
	width: auto;
	padding-right: 10px;
	padding-bottom: 10px;
}

.formdataTight {
	float: left;
	padding-bottom: 4px;
}

#formerror {
	display:none;
	color:white;
	background-color:red;
	padding:4px;
	text-align:center;
}

/*.uhoh {
	display:none;
	position:relative;
	float: right;
	height: 18px;
	width: 18px;
	z-index:2;
	right:-5px;
	top:2px;
}*/

.huh {
	height: 24px;
	width: 24px;
	background-color: #FFF;
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 0H22V2h2V22h-2v2H2v-2H0V2H1.94l.07-2ZM14 4h-4V14h4V4Zm0 12h-4v4h4v-4Z'/%3E%3C/svg%3E");
}

#taxApply {
	float:right;
	border-style:solid;
	border-width:1px;
	border-color:#dcdcdc;
	margin: 0;
	visibility: hidden;
	padding: 10px 10px 10px 10px;
}

.orderlist {
	float:left;
	padding-right:20px;
	width:220px;
	padding-bottom: 5px;
}

.threecols {
	font-size: 11px;
	color: #646464;
	float:left;
	padding-right:20px;
	padding-bottom:20px;
	width:190px;
}

.orderEdit {
	font-size: 9px;
	color: #646464;
}

.inputRequirement {
	float:right;
	color: #CC0000;
}

.featureBox {
	font-size: 10px;
	color: #646464;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:20px;
}

.info {
	margin-top:10px;
	margin-bottom:10px;
}

.choices {
	height:30px;
	padding-left:20px;
}

#main div.choices a {
	color: #808080;
}

#main div.choices a:hover {
	color: #303030;
}

#hint_container {
	position:relative;
	width:auto;
	height: auto;
	padding-top:5px;
	font-size:10px;
	font-weight:normal;
	color:#CCCCCC;
	text-align:left;
}

#hint_container2 {
	float:right;
	position:relative;
	width:100%;
	height: auto;
	margin-top:3px;
	font-size:11px;
	font-weight:normal;
	color:#CCCCCC;
	text-align:right;
}

#parts_hint { visibility:hidden;
	position:absolute;
	width:auto;
	height:auto;
	overflow:auto;
	left:0px;
	top:1px;
}

#specs_hint { visibility:hidden;
	position:absolute;
	width:auto;
	height:auto;
	overflow:auto;
	left:0px;
	top:1px;
}

#more_hint { visibility:hidden;
	position:absolute;
	width:auto;
	height:auto;
	overflow:auto;
	left:0px;
	top:1px;
}

#error_hint { visibility:hidden;
	position:absolute;
	width:auto;
	height:auto;
	overflow:auto;
	left:0px;
	top:1px;
}

#parts_hint1 { visibility:hidden;
	position:absolute;
	width:auto;
	height:auto;
	overflow:auto;
	right:0px;
	top:1px;
}

#specs_hint1 { visibility:hidden;
	position:absolute;
	width:auto;
	height:auto;
	overflow:auto;
	right:0px;
	top:1px;
}

#more_hint1 { visibility:hidden;
	position:absolute;
	width:auto;
	height:auto;
	overflow:auto;
	right:0px;
	top:1px;
}

#error_hint1 { visibility:hidden;
	position:absolute;
	width:auto;
	height:auto;
	overflow:auto;
	right:0px;
	top:1px;
}

.floatyL1 {
	float:left;
	padding-right:6px;
}

.snIcon {
	float:left;
	margin-right:10px;
}

.snIcon a {
	color:#00CC00;
}
.snIcon:hover, .snConfirm:hover {
	background-color:#ff7000;
}

.snIcon1 {
	float:left;
	margin-right:6px;
}

.snIcon1 a {
	color:#00CC00;
}
.snIcon1:hover {
	background-color:#ff7000;
}

.snIcon2 {
	float:right;
	margin-left:6px;
}

.snIcon2 a {
	color:#CCCCCC;
}
.snIcon2:hover {
	background-color:#ff7000;
}

.snConfirm {
	float:right;
	margin-left:4px;
	margin-right:5px;
	background-color:#303030;
}

#findicon {
	float:left;
	margin-top:3px; width:16px; height:16px;
}

#findicon:hover {
	background-color:#ff7000;
}

.modelDiv {
	border-top:solid 1px #dcdcdc;
	padding-top:6px;
}
.modelData {
	line-height:normal;
	padding:2px 0 2px 0;
	margin:0;
}

.markProductOutOfStock {
	color:#FF0000;
}

TD.myTable {
	line-height:normal;
	padding-right: 15px;
	padding-bottom: 2px;
	color: #FFFFFF;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
}

TD.orangeLinks a, .orangeLinks a, P.orangeLinks a, SPAN.orangeLinks a, DIV.orangeLinks a, orangeText {
	text-decoration:underline;
}

TD.orangeLinks a:hover, .orangeLinks a:hover, P.orangeLinks a:hover, SPAN.orangeLinks a:hover, DIV.orangeLinks a:hover {
	color: #969696;
	text-decoration: none;
}

.floatl { float:left; }

.floatr { float:right; }

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError TD, .messageStackWarning TD { padding:2px 5px 2px 5px;}
.messageStackSuccess TD { padding:2px 5px 2px 5px; }
.messageStackError IMG, .messageStackWarning IMG { display:inline; }
.messageStackSuccess IMG { display:inline; }

/* Admin styles for Invoice*/

.dataTableHeadingRow { background-color: #999999; }
.dataTableHeadingContent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ffffff; font-weight: bold; vertical-align:top; }
.dataTableRow { background-color: #EEEEEE;}
.dataTableRowSelected { background-color: #DEE4E8; }
.dataTableRowOver { background-color: #DDFFDD; cursor: pointer; cursor: hand;  }
.dataTableContent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }
.dataTableContentRedAlert { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #FF0000; font-weight: bold; }
.smallText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
TD.smallText A { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.smallTitle { font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold;  }
.main { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
.main A { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
.largeText { font-family: Verdana, Arial, sans-serif; font-size: 14px; }

.jcarousel-wrapper {
    margin: 0px 40px 0px 20px;
    position: relative;
}

.carouselImage {
	margin-left:auto;
	margin-right:auto;
}

a.ui-link {
	line-height:100%;
}

.fadeBlock .fadeBox {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  margin: 0px 0px 20px 0px;
  padding: 0px;
  /* "transparent" only works here because == rgba(0,0,0,0) */
  background-image: -webkit-gradient(
	  linear,
	  left top,
	  left bottom,
	  color-stop(0, rgba(255, 255, 255, 0)),
	  color-stop(1, rgba(255, 255, 255, 100)));
}

.fadeBlock .fadeBox .readMore {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0; padding: 0px 0px 0px 0px;
  background-color: #FFFFFF
}

#upsapPanel {
	display:none;
	background-color: white;
	padding:10px ;
}

#upsapIframe {
	width:1080px;
	height:750px;
	text-align: center;
}

/* leanModal.js css */
#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

.modalButton {
	position: absolute;
	bottom: 10px;
	right: 0px;
	z-index: 1;
}

.modalContent {
	overflow-y:auto;
	position: absolute;
	top:27px;
	background-color: white;
	padding-right:10px;
}

.modalIcon {
	float:left;
	padding: 0 20px 10px 0px;
}

.textbox {
	box-shadow: none;
	border: 2px black solid;
	margin-bottom: 10px;
	padding: 4px;
}

.devInfoImg {
	float:left;
	width:120px;
	height:120px;
	padding-right: 10px;
}

.modal_close {
	position: absolute;
	top: 5px;
	right: 12px;
	display: block;
	width: 20px;
	height: 20px;
	background: url("images2/modal_close.png");
	z-index: 2;
}

.header1 {
	padding-top: 30px;
	padding-bottom: 10px;
	font-size: 15px;
	font-style: normal;
	font-weight: normal;
	color:#000000;
}

.categories {
	width:100%;
/*	box-sizing: border-box;*/
	padding: 0px 0px 0px 13px;
}

.marginTop {
	height:16px;
	clear: both;
}

.browseDevicesCell {
	position:relative;
	height:100%;
	width:100%;
}

.tightGeneva {
	line-height: 24px;
}

#ticker ul{
  margin: 0;
  padding: 0 0 10px 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}

#ticker li{
  list-style: none;
  margin: 0 3em 0 0;
  padding: 0;
  display: inline-block;
  font-family: sans-serif;
  font-size: 10pt;
  vertical-align: center;
  color: white;
}

#ticker span{
  display: inline-block;
}

.dtPattern {
	float:left;
	width:36px;
	height:36px;
	border: 4px #fff solid;
	outline: 4px #fff solid;
	margin-right:10px;
	margin-top:6px;
}

.dtPatternSelected {
	outline-color:#000;
}

.dtPatternPreviewPane {
	float:left;
	width:112px;
	height:84px;
/*	border: 2px #000 solid;*/
}

.heartPL { /* Favourite containers on product list. */
    z-index:1;
    position:absolute;
    left:16px;
    top:4px;
    width: 30px;
    height: 28px;
}

.heartPP { /* Favourite container on product page. */
    z-index:1;
    position:absolute;
    right:0px;
    top:0px;
    width: 30px;
    height: 28px;
}

.favOff {
    fill: #FFF;
}

.sys6favOn {
    fill: #000;
}

.sys7favOn {
    fill: #FF0000;
}

.dtPatternPreviewPane::after {
/*content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 56 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;"><rect x="1" y="0" width="54" height="1"/></svg>'); */
    content: "";
    display: block;
  width: 108px;
  height: 2px;
  background-color:#000;
  position:relative;
  left:2px;
}

#dtPatternPreview {
    clear: both;
	width:100%;
	height:70px;
	box-sizing:border-box;
	border-top: 2px #000 solid;
	border-left: 2px #000 solid;
	border-right: 2px #000 solid;
	background-size: 0px 0px, 0px 0px, 12px 12px; /* Settings for Control Panel Swatch. Overridden by .desktop */
}

#dtPatternSwatch {
	float:left;
	width:80px;
	height:80px;
	border: 2px #000 solid;
	margin-right:16px;
	background-size: 0px 0px, 0px 0px, 60px 60px; /* Settings for Control Panel Swatch. Overridden by .desktop */
}

.dtSelectL {
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 28 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;"><rect x="0" y="1" width="1" height="5"/><rect x="1" y="0" width="27" height="1"/><rect x="16" y="1" width="1" height="5"/><rect x="15" y="2" width="1" height="3"/><rect x="14" y="3" width="1" height="1"/></svg>');
	background-position: 0px 0px;
	background-size: 56px 12px;
	background-repeat: no-repeat;
	float: left;
	width: 56px;
	height: 12px;
}

.dtSelectR {
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 28 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;"><rect x="0" y="0" width="27" height="1"/><rect x="27" y="1" width="1" height="5"/><rect x="11" y="1" width="1" height="5"/><rect x="12" y="2" width="1" height="3"/><rect x="13" y="3" width="1" height="1"/></svg>');
	background-position: 0px 0px;
	background-size: 56px 12px;
	background-repeat: no-repeat;
	float: right;
	width: 56px;
	height: 12px;
}

.logoContainer {
	float:left;
	background-color: #000;
	padding: 8px 2px 8px 2px;
	margin: 6px 20px 6px 0px;
}

.invTitleTop {
	color:#FFFFFF;
	text-align: center;
	padding-top:0px;
	padding-bottom:10px;
	background-color: #000000;
}

.modalPuzz {
	background-color: #FFFFFF;
	position:absolute;
	top:180px;
/*	padding: 4px 8px 10px 8px; */
	border: 4px #000000 solid;
  	clip-path: polygon(
    	5% 0, 95% 0, 95% 1%, 97% 1%, 97% 2%, 98% 2%, 98% 3%, 99% 3%, 99% 5%, 100% 5%,
		100% 95%, 99% 95%, 99% 97%, 98% 97%, 98% 98%, 97% 98%, 97% 99%, 95% 99%, 95% 100%,
		5% 100%, 5% 99%, 3% 99%, 3% 98%, 2% 98%, 2% 97%, 1% 97%, 1% 95%, 0 95%,
		0 5%, 1% 5%, 1% 3%, 2% 3%, 2% 2%, 3% 2%, 3% 1%, 5% 1%, 5% 0
  	);
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 4 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;"><rect x="0" y="0" width="1" height="1"/><rect x="0" y="2" width="1" height="1"/><rect x="1" y="1" width="1" height="3"/><rect x="2" y="0" width="1" height="1"/><rect x="3" y="0" width="1" height="2"/><rect x="2" y="2" width="1" height="1"/><rect x="3" y="3" width="1" height="1"/></svg>');
	background-position: 2px 4px;
	background-size: 8px 8px;
	background-repeat: repeat;
}

#puzzle {
	display: table;
	border-top: 2px #FFFFFF solid;
	border-left: 2px #FFFFFF solid;
	margin:10px;
}

.puzzTile {
	background-color: #FFFFFF;
	padding-right:2px;
	padding-bottom:2px;
	display: table-cell;
}

.puzzT1, .puzzT2, .puzzT3, .puzzT4, .puzzT5, .puzzT6, .puzzT7, .puzzT8, .puzzT9  {
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
	width: 60px;
	height: 60px;
	background-image: url("/images2/puzzlelogo.png");
	background-size: 180px 180px;
	cursor: pointer;
}

.puzzT1 { background-position: left top; }
.puzzT2 { background-position: center top; }
.puzzT3 {
	background: white;
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 4 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;"><rect x="0" y="0" width="1" height="1"/><rect x="2" y="2" width="1" height="1"/></svg>');
	background-position: 0px 0px;
	background-size: 8px 8px;
	background-repeat: repeat;
	cursor: default;
}
.puzzT4 { background-position: left center; }
.puzzT5 { background-position: center center; }
.puzzT6 { background-position: right center; }
.puzzT7 { background-position: left bottom; }
.puzzT8 { background-position: center bottom; }
.puzzT9 { background-position: right bottom; }