body {
	margin:0;
	padding:0;
	font-family:Verdana,Helvetica,sans-serif;
	/*font-size:14px;*/
	/*font-size:0.875em;*/
	font-size:87.5%;
	}
	
#kjcontainer {
	width:100%;
	margin:0 auto;
	max-width:1440px;
	}

#kjsidebar {
	background-color:#e8e8e8;
	float:left;
	width:150px;
	margin:0;
	padding:0;
	}


#kjsidebar img {
	border:0px;
	margin:0px;
	padding:0px;
	}
	

#kjcontentproducts {
	/*used in products and proddetail, not needed? */
	}

div.nomin { 
	border:1px solid #808080;
	padding:10px 4px 0px 4px;
	margin:auto;
	background: #FFE680;
	width:78px;
	height:68px;
	font-size:14px;
	font-weight:bold;
	color:#990000;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	}
	
#kjnews {
	border-collapse:collapse;
	border-spacing: 0px;
	background-color:#e8e8e8;
	text-align:right;
	/*font-size:0.875em;*/
	font-style: normal;
	font-weight: normal;
	text-align: center;
	color: #606060;
	}

.kjnewstext {
	/*font-size:0.875em;*/
	}
	
ul.KJbullets {
	margin-left:0;
	list-style-type:none;
	padding-bottom:10px;
	}
	
.pdmagdir {
	float:right;
	}
	
select.prodoption {
	font-size:8pt;
	}

/*MC announcements */	
.KJmsgbox {
	border-style:solid;
	border-color:#505050;
	border-width:1px;
	padding:10px;
	background-color:#f0f0f0;
	width:80%;
	margin:0px auto;
}

/*MC note in custom quote */	
.KJprodbox 
	{
	border-style:solid;
	border-color:#505050;
	border-width:1px;
	padding:10px;
	background-color:#f0f0f0;
	width:95%;
	margin:0px auto;
}

	
/*For the Sidebar Menu, based on http://www.dynamicdrive.com/style/csslibrary/item/arrow_green_vertical_menu/ */

.arrowgreen{
	width: 150px; /*width of menu*/
	border-style: solid solid none solid;
	border-color: #f00;
	border-width: 0px;
	padding:0px 0px 10px 0px;
	margin: 0px 0px 0px 0px;
	/*font-size:0.875em;*/
	}

.arrowgreen ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
	
.arrowgreen li a{
	display: block;
	height: 12px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px) default was 24*/
	padding: 1px 0 7px 12px;
	text-decoration: none;
	}	
	
.arrowgreen li a:link, .arrowgreen li a:visited {
	color: #606060;
	}

.arrowgreen li a:hover{
	color: #F8F8F8;
	background:#38f;
	}

	
.arrowgreen li a.selected{
	color: #606060;
	background:#ccc;
	}

/* similar thing for the top cart */

A:link {
	color: #0033FF;
	text-decoration: none;
}

A:visited {
	color: #0033FF;
	text-decoration: none;
}

A:active {
	color: #0033FF;
	text-decoration: none;
}

A:hover {
	color: #0033FF;
	text-decoration: underline;
}

A.dark:link {
	color: #c0c0c0;
	text-decoration: none;
}

A.dark:visited {
	color: #c0c0c0;
	text-decoration: none;
}

A.dark:active {
	color: #c0c0c0;
	text-decoration: none;
}

A.dark:hover {
	color: #ffffff;
	text-decoration: none;
}

HR {
	height: 1px;
	color: #999999;
}

IMG.catimage { border:1px; border-color:#000; border-style:solid; vertical-align:top; }

TD.catname { vertical-align:middle; text-align: center; } TD.catnavigation { vertical-align:middle; text-align: left; }

h1 {
	font-style: normal;
	font-weight: normal;
	font-size: 24pt;
}

h2 {
	font-style: normal;
	font-size: 18pt;
	font-weight: normal;
	/*background-image:url(../images/titlebarbar2.gif);*/
	background-image: url("../images/defbar.gif");
	background-repeat:no-repeat;
    text-decoration: none;
}

h3 {
	font-weight: normal;
	font-style: normal;
	font-size: 14pt;
	text-decoration: none;
	margin-bottom: 7px;
    margin-top: 14px;
}

h4 {
	font-weight: normal;
	font-style: normal;
	font-size: 1.2em;
	text-decoration: underline;
}
h5 {
	font-style: normal;
	font-size: 10pt;
	font-weight: normal;
}
h6 {
	font-weight: normal;
	font-style: normal;
	font-size: 8pt;
}

.price {
	color:#203060;
	font-weight: bold;
	font-size: 14pt;
}

.prodname {
	color:#203060;
	font-weight: bold;
	font-size: 14pt;
}


.safetyicon {
	background-color: #fa2;
    float: left;
    margin: 5px 10px;
    padding: 4px;
	width: 50px;
	border: 1px solid #777;
    border-radius: 6px;
}

.safetyiconred {
	background-color: #f44;
}

	
.cobtbl {
	border: 1px;
	border-style: solid;
	border-color:#808080;
	border-collapse:collapse;
	}
	
.cobhl {
	border: 1px;
	border-style: solid;
	border-color:#808080;
	border-collapse:collapse;
	background-color:#ebebeb;
	}
	
.cobll {
	border: 1px;
	border-style: solid;
	border-color:#808080;
	border-collapse:collapse;
	}

a.kjm:link,a.kjm:visited
	{
	color:#FFFFFF;
	}

a.kjm:hover,a.kjm:active
	{
	text-decoration:none;
	background:#1E90FF;
	color:#FFF;
	}

a.kjm2:link,a.kjm2:visited
	{
	font-weight:normal;
	color:#FFFFFF;
	text-decoration:none;
	margin:0px auto;
	}




a.kjm2:hover,a.kjm2:active 
	{
	font-weight:normal;
	text-decoration:underline;
	cursor: pointer;
	margin:0px auto;
	}	
	
 /*start inner footer table style */

.bottombar
	{
	color:#FFFFFF;
	margin:auto;
	width:75%;
	padding:40px 0px 20px 0px;
	border:0px solid white;
	text-align:center;
	float:left;
	}

.bottombar2
	{
	color:#FFFFFF;
	padding:5px 5px 5px 5px;
	border:2px solid #1E90FF;
	margin-top: 0px;
	margin-left: 100px;
	width:190px;
	text-align:center;
	}

.rohs
	{
	color:#FFFFFF;
	padding:0px 0px 0px 18px;
	border:0px solid #1E90FF;
	margin-top: 10px;
	margin-bottom: 0px;
	float:left;
	}

.rohs a:link{
	color:#FFFFFF;
	}
	
.spacer2
	{
	clear:both; 
	height:60px;
	}

.oldsearch {
	margin:30px 0 0 0;
	padding:8px;
	border: solid 2px #1E90FF;
	}
	
.spacer
	{
	clear:both; 
	height:20px;
	}

	
/* Form */
.myform
	{
	margin:0 auto;
	width:290px;
	padding-top:0px;
	padding-bottom:5px;
	padding-left:5px;
	padding-right:5px;
	}

/* stylized  */
#stylized
	{
	border:solid 2px #1E90FF;
	background:#606060 url('images/newsSignupBkg6.png') repeat-x;
	background-color: #848484;
	}
	
#stylized h1 
	{
	text-align:center;
	font-size:14px;
	font-weight:bold;
	margin-top:5px;
	margin-bottom:2px;
	color: white;
	}
	
#stylized p
	{
	text-align:center;
	color:white;
	margin:0px auto;
	border-bottom:solid 0px #b7ddf2;
	padding-top:0px;
	padding-bottom:10px;
	padding-left:0px;
	padding-right:0px;
	}
	
#stylized label
	{
	display:block;
	font-weight:bold;
	text-align:left;
	text-shadow: 1px 1px 1px #000;
	width:35px;
	float:left;
	margin-top:11px;
	margin-left:6px;
	}

#stylized .small
	{
	margin:0px auto;
	color:white;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:left;
	float:left;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:0px;
	padding-right:0px;
	}
	
#stylized input
	{
	/*float:left;
	font-size:12px;*/
	padding:4px 2px;
	border:solid 2px #aacfe4;
	width:220px;
	margin:5px 0 10px 10px;
	}
	
#stylized button
	{
	clear:both;
	margin-left:145px;
	margin-top: 0px;
	padding-top:3px;
	padding-bottom:5px;
	width:136px;
	height:29px;
	background: url('images/newssignup3.png') no-repeat;
	border: 0px;
	text-align:center;
	color: white;
	font-size:14px;
	font-weight:bold;
	text-shadow: 1px 1px 1px #000;
	cursor: pointer;
	}
	
.products {
	padding:0px;
	cell-spacing:0px;
	border-collapse: separate;
	border:0px;
	clear: both; /*MC*/
}	

.TabbedPanelsTab {
	font-size: 12px;
}

/* ~~ This the css file for the Responsive Design of Virtual Gadgets from Ecommerce Templates.
The first section correponds to the maximum width version of 960 pixels ~~ */

body{
    /*margin: 0 auto;*/
}


/* ~~ Element/tag selectors ~~ */
ul, dl { 
	padding: 0;
	margin: 0;
}

ol { 
	margin: 0;
}


a img { 
	border: none;
}

/* ~~ Main heading styling ~~ */
h1 {
	margin-top: 0;	 
	padding-right: 15px;
	padding-left: 15px; 
	color:#000;
}

.navheads2 {
	background: #36c;
	margin:0; 
	color:#fff; 
	padding:0 0 0 8px; 
	height:20px;
	text-align:left;
	font-weight: bold; 
	text-shadow: 1px 1px 1px #333;
	/*font-size:0.875em;*/
}

/*MC remnants from old search-pn in sidebar */
.sidesearch {
	padding: 12px 0px 12px 0px;
}

.sidesearchbox {
	width:148px;
	padding: 10px 0px 38px 0px;
	background:#d9d9d9;
	border: 1px solid #999;
}


.sidebaricons {
	text-align:center;
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
	background:url(../images/nbkg003.png) #0b309d repeat-x;
	height:130px;
	margin:0; /*MC used to have 5px at bottom*/
}


/*MC revamp the left stuff logos to include searchbar*/
.kjleftstuff{
	float:left;
	position:relative;
	padding:0px;
	width:575px;
}

.kjjoe{
	padding:0px;
	width:130px;
	height:126px; /*MC 130 - margin*/
	margin:4px 0px 0px 25px;
	background:url(../images/joemagneato.png) no-repeat;
}
.kjjoe img{
	width:120px;
	height:120px;
	/*size of the clearpixel, which is a clickable area*/
}

.kjlogo2{
	position:absolute;
	top:12px;
	right:0px;
	padding:0px;
	width:420px;
	height:76px;
	margin:0px;
	background:url(../images/logobig.png) no-repeat;
}
.kjlogo2 img{
	width:444px;
	height:80px;
	/*size of the clearpixel, which is a clickable area*/
}

.kjsearch {
	position:absolute;
	top:88px;
	right:0px;
	width:420px;
	height:40px;
	padding:2px 0 0 0;
}

.kjsearchfield {
	width:80%;
	font-family:Verdana,Helvetica,sans-serif;
}
.kjsearchbut {
}

.kjrightstuff{
	float:right;
	width:350px;
	padding:0px 20px 0px 0px;
}

.kjviewcart{
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
}

.kjallorders{
	background-color: #E0E0E0;
    border: 1px solid;
    border-radius: 5px 5px 5px 5px;
    color: #000099;
	width:316px;
	margin: 10px 0px 0px 0px;
	padding:10px 12px 10px 12px;
    font-size: 14px;
    font-style: normal;
    text-align: center;
}
	
.kjshippolicydets a {
	float:right;
	text-align: right;
	color: #D0D0D0;
    font-size: 11px;
	width:340px;
}

.kjshippolicydets a:hover {
	text-decoration:none;
	color:#fff;
}

.kjtopmenucontainer {
}

.kjtopmenu a {
	text-align: right;
	color: #D0D0D0;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
}

.kjmobilemenucontainer {
	display:none;
}

.pricingtable{
	margin:4px;
	float:left;
	width:295px;
}

/*More proddetail tweaks...*/
.pricequanadd{
	float:left;
	width:100%;
}

.picspacer{
	float:left;
	width:260px;
}

/*Here we add some of the CSS features from http://matthewjamestaylor.com/blog/perfect-3-column.htm */
body {
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;
	background:#fff;
	min-width:300px;		/* Minimum width of layout - remove line if not required */
					/* The min-width property does not work in old versions of Internet Explorer */
}

@media screen and (min-width: 1285px) {
body{
	max-width:1285px; /*MC */
	margin-left:auto;
	margin-right:auto;
	background:#334; /*334*/
}
}


/* holy grail 3 column settings */
/* column container */
.colmask {
	position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	clear:both;
	float:left;
	width:100%;				/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
}
/* holy grail 3 column settings */
.holygrail {
	background:#e8e8e8;    	/* Right column background colour */
}
.holygrail .colmid {
	float:left;
	width:200%;
	margin-left:-136px; 	/* Width of right column MC*/
	position:relative;
	right:100%;
	background:#fff;    	/* Centre column background colour */
}
.holygrail .colleft {
	float:left;
	width:100%;
	margin-left:-50%;
	position:relative;
	left:286px;         	/* Left column width + right column width MC*/
	background:#e8e8e8;    	/* Left column background colour */
}
.holygrail .col1wrap {
	float:left;
	width:50%;
	position:relative;
	right:150px;        	/* Width of left column MC*/
	/*padding-bottom:1em;*/ 	/* Centre column bottom padding. Leave it out if it's zero */
	padding:10px 0 10px 0;
}
.holygrail .col1 {
	margin:0px 151px 0px 165px;     	/* Centre column side padding:
							Left padding = left column width + centre column left padding width
							Right padding = right column width + centre column right padding width MC*/
	position:relative;
	left:200%;
	overflow:hidden;
}
.holygrail .col2 {
	float:left;
	float:right;			/* This overrides the float:left above */
	width:150px;        	/* Width of left column content (left column width minus left and right padding) MC*/
	position:relative;
	right:0px;         	/* Width of the left-hand side padding on the left column MC*/
}
.holygrail .col3 {
	float:left;
	float:right;			/* This overrides the float:left above */
	width:136px;        	/* Width of right column content (right column width minus left and right padding) MC*/
	margin-right:0px;  	/* Width of right column right-hand padding + left column left and right padding MC*/
	position:relative;
	left:50%;
}


/*END CSS features from http://matthewjamestaylor.com/blog/perfect-3-column.htm */

/* BEGIN MC mods to incproddetail content */
.previousnext{
	display:none;
}

.detaildescription{
	max-width:650px; /*MC*/
	float:right;
}
/* END MC mods to incproddetail content */


/* Footer styles */
#footer2012 {
	clear:both;
	float:left;
	width:100%;
	border-top:1px solid #000;
	background-color:#2669d2;
	background-image:url('../images/footbkgnd6.png');
	background-repeat:repeat-x;
}

.KJfooter2012 {
	margin: 20px 0 0 100px;
	color:white;
}

.KJfooter2012 ul {
	list-style-type: none;
	padding: 0;
	margin: 0 0 20px 0;
	width: 250px;
}

.KJfootercol {
	float:left;
}

.KJfooter2012 lh {
	background-color: #1E90FF;
    padding: 0 5px;
}

.KJfooterlistheader {
	background-color: #1E90FF;
    padding: 0 5px;
}

.KJfooter2012 li {
	padding: 5px 0 0 0;
}

#footer2012 p {
	margin:0;
}


/* MC adds softcart CSS */
.sccartitems{
	display:none;
}

.sccarttotal{
	background-color:#36c;
	color:#fff;
	text-shadow: 1px 1px 1px #333;
	padding:3px;
	text-align:right;
	/*background:#f1f1f1;*/
	/*border-top:1px dotted #567CBB;*/
	font-weight:bold;
	/*color:#666*/
}

.scwrap{
	margin:120px auto 0 auto;
	background:#FFF;
	width:500px;
	padding:6px;
	border-radius:6px;
	box-shadow:1px 1px 5px #333;
}

.scimage{
	padding:0px 0px 20px 0px;
}

.scprodsadded{
	padding:3px;
	text-align:left;
	/*width:100%;*/
	border-top:1px solid #36c; /*567CBB*/
	clear:both
}

/*Table backgrounds for cart and search*/
table.cobtbl{
	background-color: #ccc;
	border-radius: 5px;
	box-shadow: 1px 1px 3px #666;
    margin-top:12px;
} 

td.cobhl{
	/*background-color:#f6f6f6;*/
	/*font-weight: bold;*/
	color:#000;
}

td.cobll{
	background-color: #fff;
	color : #333;
}

/* The product page - view all the available classes at http://www.ecommercetemplates.com/help/css-layouts.asp
-------------------------------------*/
div.prodfilter{
	float:left;
	padding:6px;
	margin-bottom:2px;
	margin-top:2px;
}

div.prodfilterbar{
	float:left;
	background-color:#e8e8e8;
	margin:0 10px 10px 10px;
	border: 1px solid #AAAAAA;
    border-radius: 6px 6px 6px 6px;
}

select.prodfilter{
	padding:0px;
	margin:0px;
}

div.product{
	padding:10px;
	width:204px;
	float:left;
	height:350px;
	margin:4px 0px 0px 4px;
	border:1px solid #aaa;
	background-color:#E8E8E8;
	border-radius: 6px 6px 6px 6px;
}

div.prodnavigation{
	padding:10px;
	margin-bottom:10px;
	/*float:left;*/
	width:100%; /*MC*/
	/*background-color:#aaf;*/
}

/*MC adds rangesliders to discs/cylinders...*/
.rangesliders {
	background-color:#e8e8e8;
	border:1px solid #aaa;
	border-radius:6px;
	width:80%;
	padding:5px 20px 10px 20px;
	margin-left:4px;
}
.thesliders {
	/*background-color:#faa;*/
	margin:0px 135px 10px 0px;
}
.slidericon {
	float:right;
	/*background-color:#aaf;*/
}

.rangesliderlabel {
	border:0;
	color:#203060;
	font-weight:bold;
	font-size: 14pt;
	background-color:#e8e8e8;
}

.mcshowhideOLD {
	/*border-top: 1px solid #96d1f8;*/
	/*background: #070;
	background: -webkit-gradient(linear, left top, left bottom, from(#7d5), to(#070));
	background: -webkit-linear-gradient(top, #7d5, #070);
	background: -moz-linear-gradient(top, #7d5, #070);
	background: -ms-linear-gradient(top, #7d5, #070);
	background: -o-linear-gradient(top, #7d5, #070); */
	background-color: #070;
	background-image: linear-gradient(#7d5, #070);
	padding: 2px 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	/*-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
	-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;*/
	/*box-shadow: rgba(0,0,0,1) 0 1px 0;*/
	text-shadow: rgba(0,0,0,.4) 0 1px 0;
	color: white;
	font-size: 1em;
	font-family: Arial, Helvetica, Sans-Serif;
	font-weight:bold;
	text-decoration: none;
	vertical-align: middle;
	}
.mcshowhideOLD:hover {
	/*background: #181;
	background: -webkit-gradient(linear, left top, left bottom, from(#6b4), to(#181));
	background: -webkit-linear-gradient(top, #6b4, #181);
	background: -moz-linear-gradient(top, #6b4, #181);
	background: -ms-linear-gradient(top, #6b4, #181);
	background: -o-linear-gradient(top, #6b4, #181);*/
	background-color: #181;
	background-image: linear-gradient(#6b4, #181);
	}
/*.mcshowhide:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }*/


   
.mcshowhide {
  background: #88ee88;
  background-image: -webkit-linear-gradient(top, #88ee88, #22bb22);
  background-image: -moz-linear-gradient(top, #88ee88, #22bb22);
  background-image: -ms-linear-gradient(top, #88ee88, #22bb22);
  background-image: -o-linear-gradient(top, #88ee88, #22bb22);
  background-image: linear-gradient(to bottom, #88ee88, #22bb22);
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  font-family: Arial, Helvetica, Sans-Serif;
  color: black;
  /*font-size: 16px;*/
  font-weight: bold;
  text-shadow: rgba(255,255,255,.4) 0 1px 0;
  padding: 3px 8px;
  border: solid #707070 1px;
  text-decoration: none;
}

.mcshowhide:hover {
  background: #22bb22;
  text-decoration: none;
}
   
   
   
   
   
div.prodimage{
	padding: 0px 10px 5px 0px;
	text-align:left;
}

.prodimagetop {
	padding: 0px 10px 5px 0px;
}
/*
img.prodimage{
	-webkit-box-shadow: 1px 1px 2px 0px #888;
	box-shadow: 1px 1px 2px 0px #888; 
}*/

div.prodname{
	padding:0px;
	font-size: 13pt;
}

div.proddescription{
	font-size: 1em;
	padding-top:4px;
	padding-bottom:6px;
	height:120px;
}

div.prodoptions{
	float:right;
	height:28px;
}

select.prodoption{
	font-size: 0.9em;
	float:right;
	margin:6px 0 0 6px;
	background:#CCC;
}

span.prodoption{
	font-weight:bold;
}

div.optiontext{
	float:left;
	padding-top:8px;
}

div.option{
	float:left;
	padding: 0px;
}


div.prodprice{
	padding: 4px 0px 0px 0px;
	font-weight:bold;
	clear:both;
}


div.addtocart{
	padding-top:6px;
}

div.outofstock{
	text-align:center;
	padding-top:6px;
	font-weight:bold;
}

div.pagenums{
	text-align:center;
	float:left;
	padding:10px;
}

.quantitydiv {
	padding: 0px 0px 5px 0px;
}

.pricequanaddprod {
	text-align:right;
}

.prodicons {
	float:right;
	clear:both;
	background:#ccc;
	padding: 1px 3px 1px 3px;
	margin-bottom: 4px;
	border: 1px solid #aaa;
	border-radius: 2px;
	-webkit-box-shadow: 1px 1px 2px 0px #888;
	box-shadow: 1px 1px 2px 0px #888; 
}

.magdiricon {
	float:right;
	clear:both;
	/*background:#ccc;*/
	padding: 1px 3px 1px 3px;
	margin-bottom: 4px;
	/*border: 1px solid #aaa;
	border-radius: 2px;
	-webkit-box-shadow: 1px 1px 2px 0px #888;
	box-shadow: 1px 1px 2px 0px #888; */
	/*width:60px;*/
}

/* The product detail page 
-------------------------------------*/
.detailimage {
	float:left;
	width:230px; /*MC*/
	padding:0 10px 10px 10px;
} 

.detailname {
	color:#000;
	padding:0 10px;
	color: #203060;
    font-size: 14pt;
    font-weight: bold;
	margin:0 0 10px 0;
}

.detaildiscounts{
	color:#c00;
	font-weight:bold;
	font-size: 1em;
	float:left;
	width:310px;
	margin:10px 0 0 10px;
}

span.detaildiscountsapply{
	color:#c00;
	font-weight:bold;
}


div.detaildescription{
	float:left;
	padding-left:6px;
}


div.detailprice{
	width:100%;
	padding-top:8px;
}



.detailprodoption{
	width:220px;
	float:right;
	background:#ccc;
}

div.detailoptiontext{
	float:left;
	text-align:left;
	font-weight:bold;
}

div.detailoptions{
	width:100%; /*460 MC*/
	text-align:left; /*MC adds*/
	float:left;
	padding-top: 6px;
}


div.detailquantity{
	float:left;
	width:100%;/*640px MC*/
	text-align:center;
	padding-top: 6px;
}

div.detailquantitytext{
	margin:6px 0 0 0;
	float:left;
	text-align:right;
	font-weight:bold;
}

div.detailquantityinput{
	margin:4px;
	float:left; /*right MC*/
	text-align:left;
}

div.detailaddtocart{
	float:left;
	width:100%;
	padding-bottom:10px;
}


/* The category page 
-------------------------------------*/
div.category{
	width:48%;
	float:left;
	min-height:110px;
}

div.catimage{
	width:130px;
	float:left;
	margin:0 5px 5px 0;
}

div.catdesc{
	padding:0px 8px 4px 12px;
}

div.catname{
	padding-left:12px;
}



hr {
	height: 0;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #60a1de;
}


a[href^=tel]{
    color:inherit;
    text-decoration:none;
	/*Leaves styling intact on phones*/
}


.KJvideo {
	width:500px;
	height:300px;
}

/*styling for default*/
.def p {
	margin: 2px 0px 18px 10px;
}

.def h2 {
	background-image: url("../images/defbar.gif");
    background-repeat: no-repeat;
    font-size: 16px;
	margin-bottom: 4px;
}


#MCminicart, #MCminicart ul, #MCminicart ul li, #MCminicart ul ul {
  list-style: none; 
  margin: 0; 
  padding: 0;
  border: 0;
}

/* Basic Structure */

#MCminicart ul {
  position: relative;
  z-index: 397; 
}
#MCminicart ul li {
  min-height: 1px;
  line-height: 1em;
  vertical-align: middle;
}
#MCminicart ul li:hover {
  position: relative; 
  z-index: 399;
  cursor: default;
}
#MCminicart ul ul {
  visibility: hidden; /* hide sub menus by default */
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 398; 
  width: 100%;
}

#MCminicart ul li:hover > ul {
  visibility: visible; /* show sub menu */
}
#MCminicart ul ul {
  top: 100%; /*MC*/
  left: 0; /*MC*/
}

/* Custom Styles */

#MCminicart ul {
	width: 340px; /* main menu width */
	background: #efefef;
	-moz-box-shadow: 3px 3px 3px 0px #333;
	-webkit-box-shadow: 3px 3px 3px 0px #333;
	box-shadow: 3px 3px 3px 0px #333;
}
#MCminicart ul ul {
	left:30px; /*MC indent the dropdown*/
	width: 260px; /* sub menu width 340 */
}
#MCminicart ul li {
	padding: 4px 10px 4px 10px; /*MC was 4 10*/
	color: #000;
}
#MCminicart ul li:hover {
  background: #38f;
  color: #fff;
}
  
#MCminicart ul a {
	display:block; /*MC makes the whole line act like a link*/
}

#MCminicart ul ul a {
	display:block; /*MC makes the whole line act like a link*/
}

  
#MCminicart ul a:link,
#MCminicart ul a:visited {
  color: #000;
  text-decoration: none;
  /*padding: 4px 0px 0px 0px; MC*/
}
#MCminicart ul a:hover {
  color: #fff;
}
#MCminicart ul a:active {
  color: #ffa500;
}

.MCviewcart {
	color:#fff;
	align:right;
	/*text-align:right;*/
	display:block;
	background:#36c;
	float:right;
	padding: 3px 20px 4px 20px; /*MC3px 20px 3px 20px;*/
	margin: -4px -10px 0px 0px;
	border: 1px solid #333;
	font-weight: bold;
	text-shadow: 1px 1px 1px #333333;
}

.MCcartpic {
	padding: 0px 10px 0px 0px;
}

.MCcartprodname {
	/*background:#faa;*/
	clear:both;
	float:left;
	width:65%;
}

.MCcartprodqty {
	/*background:#ffa;*/
	color:#666;
}

.cartbut {
	display:block;
	background:#36c;
	text-align:center;
	color:#fff;
	font-weight:bold;
}

.cartbuttxt {
	color:#fff;
	text-shadow: 1px 1px 1px #333333;
}

.arts a{
	display:block;
	background:url(../images/SmBlogNoBtn.jpg);
	width:220px; /*MC 240 minus padding left and right */
	height:115px; /*MC 135 minus padding top and bottom */
	margin-bottom:10px;
	padding:10px;
	font-size:14px;
	color:#fff;
	text-shadow: 1px 1px 1px #333333;
}

.arts a:hover{
	text-decoration:none;
}

.newssign a{
	display:block;
	background:url(../images/newsletter2.jpg);
	width:220px;
	height:60px;
	padding:10px;
	font-size:14px;
	color:#fff;
	text-shadow: 1px 1px 1px #333333;
}

.newssign a:hover{
	text-decoration:none;
	/*color:#38f;*/
}



.fpwrapper{
   width: 100%;
   margin: 0 0 20px 0;
   height:225px;
}

.fpwrapleft{
   float: left;
   width: 100%;
}
.fpleft{
   margin-right: 250px;
   height: 200px;
}
.fpright{
   float: right;
   width: 240px;
   margin-left: -240px;
   height: 200px;
}


.KJcartbar {
	background:#ccc;
	padding: 0px;
	border: 1px solid #aaa;
	border-radius: 2px;
	-webkit-box-shadow: 1px 1px 2px 0px #888;
	box-shadow: 1px 1px 2px 0px #888;
}

.KJcartbaritem {
	background:#ccc;
	padding: 4px;
	border: 1px solid #aaa;
	border-radius: 2px;
}

.KJcartbaron {
	background:#3366cc;
	padding: 4px;
	border: 1px solid #aaa;
	border-radius: 2px;
	-webkit-box-shadow: 1px 1px 2px 0px #888;
	box-shadow: 1px 1px 2px 0px #888;
	color:#fff;
	font-weight:bold;
	text-shadow: 1px 1px 1px #333333;
}

.KJcartbarnotyet {
	background:#eee;
}

.cartimage {
	width:125px; /*MC shrinks 6.4.8 */
}


@media screen and (max-width: 980px) {
.fpright{
	display:none; /*MC*/
}

.fpleft{
   margin-right: 0px;
}
}

/*width on products.asp page*/
@media screen and (max-width: 1032px) {
div.product{
	width:196px;
}
}

@media screen and (max-width: 1000px) {
div.product{
	width:220px;
}
}

/*MC adds breakpoint hack*/
@media screen and (max-width: 1250px) {
.detaildescription{
	max-width:520px; /*MC*/
}
}

/*MC adds breakpoint hack*/
@media screen and (max-width: 1152px) {
.detaildescription{
	max-width:394px; /*MC*/
}

.KJvideo {
	width:375px;
	height:225px;
}

}

/*MC adds breakpoint hack*/
@media screen and (max-width: 1024px) {
.detaildescription{
	max-width:350px; /*MC*/
}

.KJvideo {
	width:330px;
	height:198px;
}

}

/*MC make a std way to shrink big pix for small widths */
.KJbigimg {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
@media screen and (max-width: 400px) {
.KJbigimg {
    max-width: 99%;
}
}

.blogimage {
	padding: 2px;
	margin: 5px 10px 5px 10px;
	float:right; /*MC let's do this by default */
}

/*Experiment with new image setup here */

.KJpicc {
	background-color:#e8e8e8;
	float:right;
	padding: 2px;
	margin: 5px 10px 5px 10px;
	}

.KJpic {
	/*background-color:#aaf;*/
	margin-bottom:1px;
	}

.KJcaption {
	/*background-color:#faa;*/
	max-width:300px;
	text-align:center;
	margin: 0 auto; /*center*/
	}

ol li {
	/*list-style:decimal;
	padding-left:0.5em;*/
}

/*quick links bar on front page*/
.quickcats {
	background:#faf;
	padding:0px;
	
}

.quickcat a{
	display:block;
    background-color: #E8E8E8;
    float: left;
    height: 80px;
    margin: 0px 4px 4px 0px;
    padding:6px 8px 8px 8px;
    width: 18%;/*150px;*/
	font-size:16px;
	font-weight:normal;
	color:#fff;
}

.quickcat a:hover{
	text-decoration:none;
}

.qcmore a{
	width: 12%;
}


@media screen and (max-width: 1024px) {
.quickcat a{
	width: 16%;
}
.qcmore a{
	width: 12%;
}
}

@media screen and (max-width: 770px) {
.quickcat a{
	padding:4px;
	/*font-size:14px;*/
}
}

@media screen and (max-width: 480px) {
.quickcat a{
	padding:4px;
	width: 45%;
	height: 60px;
}
.qcmore a{
	width: 93%;
}
.fpwrapper{
   display:none;
}
}

.welcomefriends {
	float: left;
}

.calctable {
	border-collapse:collapse;
	box-shadow: 1px 1px 3px #666666;
}

.optiontext {
	display:none;
	}


.makeblue {
	background-color:#3366cc;
	}

.makewhite {
	color:#fff;
	text-shadow: 1px 1px 1px #333333;
	}

.shipbill {
	color: #FFF;
	font-size: 16px;
	text-shadow: 1px 1px 1px #333333;
	}

/*Recently Viewed MC*/	
.rviewed {
	clear:both;
	padding-top:20px;
	}
	
.recviewhdr {
	background:#36c;
	color:#fff; 
	padding:2px 0 4px 8px;
	/*height:20px;*/
	text-align:left;
	font-weight: bold; 
	text-shadow: 1px 1px 1px #333;
}

.recviewitem {
	background-color: #E8E8E8;
    border: 1px solid #AAAAAA;
    border-radius: 4px 4px 4px 4px;
    float: left;
    height: 150px;
    margin: 4px 0 0 4px;
    padding: 10px;
    width: 200px;
	text-align:center;
	}

.rviewname {
	font-size:12pt;
	}

/*Recently Viewed MC, smaller width*/	
@media screen and (max-width: 700px) {

.recviewitem {
    height: 120px;
    margin: 4px 0 0 4px;
    padding: 10px 4px;
    width: 130px;
	}

.rviewname {
	font-size:9pt;
	}

.recviewdescrip {
	display:none;
	}

}

/* This is the first breakpoint and is for screen sizes between 750 and 980 pixels. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
-------------------------------------*/
@media screen and (max-width: 980px) {


.kjlogo{
	width:375px;
	height:129px;
	background:url(images/topbanner375.png);
}

.kjlogo img{
	width:375px;
	height:125px;
	/*size of the clearpixel, which is a clickable area*/
}


/*MC revamp the left stuff logos to include searchbar*/
.kjleftstuff{
	width:375px;
}

.kjjoe{
	/*float:left;*/
	padding:0px;
	width:110px;
	height:126px; /*MC 130 - margin*/
	margin:4px 0px 0px 15px;
	background:url(../images/joemagneato.png) no-repeat;
}
.kjjoe img{
	width:120px;
	height:120px;
	/*size of the clearpixel, which is a clickable area*/
}

.kjlogo2{
	/*float:left;*/
	position:absolute;
	top:8px; /*12*/
	right:0px;
	padding:0px;
	width:240px; /*420*/
	height:80px; /*76 */
	margin:0px;
	background:url(../images/logomed.png) no-repeat;
}
.kjlogo2 img{
	width:240px;
	height:80px;
	/*size of the clearpixel, which is a clickable area*/
}

.kjsearch {
	position:absolute;
	top:88px;
	right:0px;
	width:220px; /*420*/
	height:40px;
	/*background:#faf;*/
	padding:2px 0 0 0;
}

.kjsearchfield {
	width:150px;
}


h1 {
	padding-left: 38px; 
}

.detailprodoption{
	width:220px;
float:right;
}

div.detailquantitytext{
	/*width:260px;*/
}

div.detailquantityinput{
	width:100px;
}

div.detailaddtocart{
	width:600px; /* was 500 MC */
}


div.category{
	width:520px;
}

.picspacer{
	width:200px;
	/*display:none;*/
}

.spacer2 {
	height:40px;
}

}

.footartlist {
	display:none;
}

/* This is the second breakpoint and is for screen sizes between 468 and 758 pixels. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
*/
@media screen and (max-width:770px) {

.footartlist {
	display:block;
}

.header {
	background:url(../images/nbkg003c.png) #0b309d repeat-x;
	height:110px; /*was 120 before search*/
}

.kjrightstuff{
	display:none;
}

.kjlogo{
	width:310px;
	height:82px; /*was 82 before search*/
	background:url(images/topbanner310.png);
}

.kjlogo img{
	width:310px;
	height:82px; /* was 82 */
	/*size of the clearpixel, which is a clickable area*/
}

.cartimage {
	width:60px; /*MC shrinks for larger mobile */
}


/*MC revamp the left stuff logos to include searchbar*/
.kjleftstuff{
	float:left;
	position:relative;
	padding:0px;
	width:310px;
}

.kjjoe{
	padding:0px;
	width:70px;
	height:78px; /*MC 130 - margin*/
	margin:2px 0px 0px 10px;
	background:url(../images/joemagneatojr2.png) no-repeat;
}
.kjjoe img{
	width:80px;
	height:84px;
	/*size of the clearpixel, which is a clickable area*/
}

.kjlogo2{
	/*float:left;*/
	position:absolute;
	top:6px;
	right:0px;
	padding:0px;
	width:230px;
	height:40px;
	margin:0px;
	background:url(../images/logosml.png) no-repeat /*#aaa*/;
}
.kjlogo2 img{
	width:175px;
	height:40px;
	/*size of the clearpixel, which is a clickable area*/
}

.kjsearch {
	position:absolute;
	top:42px;
	right:0px;
	width:230px;
	height:38px;
	padding:2px 0 0 0;
}


/* Turn off the side columns */
.col2{
	display:none;
}

.col3{
	display:none;
}


.holygrail {
	background:#f0f0f0;    	/* Right column background colour */
}
.holygrail .colmid {
	float:left;
	width:200%;
	margin-left:0px; 		/* Width of right column MC -136*/
	position:relative;
	right:100%;
	background:#fff;    	/* Centre column background colour */
}
.holygrail .colleft {
	float:left;
	width:100%;
	margin-left:-50%;
	position:relative;
	left:0px;         		/* Left column width + right column width MC 286*/
	background:#f0f0f0;    	/* Left column background colour */
}
.holygrail .col1wrap {
	float:left;
	width:50%;
	position:relative;
	right:0px;        	/* Width of left column MC 150*/
	padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
}
.holygrail .col1 {
	margin:0px 10px;     	/* Centre column side padding: MC was 0px 10px before cart300
							Left padding = left column width + centre column left padding width
							Right padding = right column width + centre column right padding width MC 0 165px*/
	position:relative;
	left:200%;
	overflow:hidden;
}
.holygrail .col2 {
	float:left;
	float:right;			/* This overrides the float:left above */
	width:0px;        	/* Width of left column content (left column width minus left and right padding) MC 150*/
	position:relative;
	right:0px;         	/* Width of the left-hand side padding on the left column MC*/
}
.holygrail .col3 {
	float:left;
	float:right;			/* This overrides the float:left above */
	width:0px;        	/* Width of right column content (right column width minus left and right padding) MC 116*/
	margin-right:0px;  	/* Width of right column right-hand padding + left column left and right padding MC 10*/
	position:relative;
	left:50%;
}


/* Turn off the side columns END*/

.kjmobilemenucontainer {
	display:block;
	float:right;
	margin: 0px 0px 0px 10px;
}

.kjmobilemenu a {
	text-align: left;
	color: #606060;
	font-family: Tahoma,sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
	background: #e8e8e8;
    margin: 0px 0px 0px 0px;
    padding:2px 8px 2px 8px;
}


body{
	/*background:url(images/topbg480.jpg) #fff repeat-x;*/
}

.header {
	/*background:url(images/topbg480.jpg) #fff repeat-x;
	height:140px;*/
}

p{
	/*padding-left:12px;*/
}


h1 {
	/*display:none;*/
}

/*tables for cart and search*/
table.cobtbl{
	font-size: 0.8em;
    margin-left:2px;
    margin-bottom:12px;
}

td{
	font-size: 10px;
}

/*remove footer elements*/


/*the product page*/

div.product{
	width:204px;
	/*height:auto;*/
	/*margin-left:14px;*/
}

div.prodnavigation{
	/*width:340px;*/
	padding-left:14px;
}

div.prodoptions{
	/*width:325px;*/
}

select.prodoption{
	/*width:130px;*/
}

div.optiontext{
	/*min-width: 175px;*/
}


div.prodprice{
	/*width:340px;*/
}


div.addtocart{
	/*width:340px;*/
}

div.pagenums{
	width:340px;
}

/*the detail page*/
div.detailimage{
	width:460px;
	margin-left:6px;
}

.detailname {
	/*width:380px;*/
	/*background:#59c;*/
}

div.detailprice{
	width:420px;
}

.detailprodoption{
	width:220px;
	float:right;
}

div.detailoptiontext{
    /*min-width:240px;*/
	float:left;
	/*width:180px;*/ /* MC */
}

div.detailoptions{
	width:420px;
	/*padding-left:10px;*/
	float:left;
}

div.detaildescription{
	width:375px; /*MC was 420*/
}

div.detailquantity{
	width:400px;
}

div.detailquantitytext{
	/*width:180px;*/
}

div.detailquantityinput{
	width:200px;
}

div.detailaddtocart{
	width:420px;
}

div.category{
	width:420px;
}

.picspacer{
	width:50px;
	/*display:none;*/
}

.KJfooter2012 {
	margin-left: 40px;
}

}

/* This is the third breakpoint and is for smartphones. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
*/
@media screen and (max-width:400px) {

body{
	/*background:url(/images/topbg480.jpg) #fff repeat-x;*/
}

.header {
	/*background:url(images/topbg480.jpg) #fff repeat-x;
	height:140px;*/
}

h1 {
	/*display:none;*/
}

/* ~~ Remove left hand cart column ~~*/
.cobcol1{
	display:none;
}

div.prodnavigation{
	/*width:190px;*/
}

div.product{
	width:260px;
	/*height:auto;
	margin-left:4px;*/
}

div.prodnavigation{
	/*width:290px;*/
	padding-left:14px;
}

div.prodoptions{
	/*width:292px;*/
}

select.prodoption{
	/*width:130px;*/
}

div.optiontext{
	/*min-width: 142px;*/
	/*width: 80px;*/
}


div.prodprice{
	/*width:292px;*/
}


div.addtocart{
	/*width:292px;*/
}


div.pagenums{
	width:292px;
	padding:2px;
}

/*the detail page*/
div.detailimage{
	width:292px;
	/*padding:6px;*/
	float:left;
}

.detailname {
	width:292px;
}

div.detailprice{
	width:292px;
}

div.detailoptions{
	width:280px;
	/*padding-left:6px;*/
}

.detailoptiontext{
	/*width:140px;*/
}

select.detailprodoption{
	width:118px;
}

div.detailquantity{
	width:192px;
}

div.detailquantitytext{
	/*width:120px;*/
}

div.detailquantityinput{
	width:40px;
}
div.detaildescription{
	width:292px;
}

.KJvideo {
	width:272px;
	height:163px;
}

div.detailaddtocart{
	width:292px;
}

/*the category page*/
div.category{
	width:292px;
}

.pricingtable {
	width:250px;
}

.KJabbrev {
	display:none;
}

}

/*iPhone 3*/
@media screen and (max-width:380px) {

.kjlogo{
	width:310px;
	height:82px;
	background:url(images/topbanner310.png);
}

.kjlogo img{
	width:310px;
	height:82px;
	/*size of the clearpixel, which is a clickable area*/
}

.KJfooter2012 {
	margin-left: 15px;
}

}

/*iPhone 3 portrait*/
@media screen and (max-width:350px) {

div.detaildescription{
	width:275px;
}

.KJvideo {
	width:255px;
	height:153px;
}

.KJfooter2012 {
	margin-left: 5px;
}

}


.ref {
    position: relative;
    vertical-align: baseline;
   }

.refnum {
    position: relative;
    left: 2px;
    bottom: 1ex;
    color: #0033ff;
    font-size: 75%;
    /*font-weight: bold;*/
    text-decoration: underline;
    cursor: pointer;
}

.refbody {
    font-size: 80%;
    line-height: 1.1;
    display: block;
    min-width: 225px;
    position: absolute;
    right: 25px;
    bottom: 5px ;
    border: 1px solid;
    padding: 5px;
    background-color: #cedff8;
    word-wrap: break-word;
    z-index: 9999;
    overflow: auto;
}