@charset "utf-8";
/* CSS Document */
body {background-color:#F3FCFF; background-image:url(topbarnew.png); background-repeat:repeat; width:auto; height:100%;}
div.nar{display:none;}
div.med{display:none;}
div.wid{display:none;}
input.ninety{width:90px;}
p {font-size:medium;
	font-family:Arial, Helvetica, sans-serif;} 
td {font-size:medium;
	font-family:Arial, Helvetica, sans-serif;} 
td p,h3 {margin-bottom:5px; margin-top:5px;}
li {font-size:medium;
	font-family:Arial, Helvetica, sans-serif;} 	
h1, h2, h3, h4 {
	font-family:Arial, Helvetica, sans-serif;}
input.warnfield { border-width:0; width:100%; background-color:#F3FCFF; border-color:#F3FCFF; color:red;}
p.warnfield { font-size:1.0em; color:red; }
input.pricefield {border-color:#F3FCFF; background-color:#F3FCFF; border-width:0; text-align:right; width:65px;}
input.pricefield2 {border-color:#F3FCFF; background-color:#F3FCFF; border-width:0; text-align:right; width:45px;}
div.general {background-color:#F3FCFF; width:100%; height:100%; margin:auto;}
div.rightpic {width:100%; background-color:inherit; margin:0; display:flex; flex-flow: column; }
/*The above "flex-flow" allows us to put the image first in the HTML for the division, but have the text rise above the image on the mobile version.  This means the float works AND the order works.  Note "order" parameters for p and img below. */
.rightpic p, h3 {order:1;}
.rightpic table{align-self:center; float:none; display:inline-flex; order:2;  }
.rightpic img{align-self:center; float:none; display:block; order:3; max-width:100%; }
.rightpic figure{align-self:center; float:none; display:block; order:3; max-width:100%; }
div.leftpic {width:100%; background-color:inherit; margin:0; display:flex; flex-flow: column;  }
/*The above "flex-flow" allows us to put the image first in the HTML for the division, but have the text rise above the image on the mobile version.  This means the float works AND the order works.  Note "order" parameters for p and img below. */
.leftpic p, h3 {order:1; }
.leftpic img{align-self:center; float:none; display:block; order:2; max-width:100%; }
.leftpic figure{align-self:center; float:none; display:block; order:2; max-width:100%; }
div.infoonly{width:95%; background-color:inherit; margin:auto; display:flex; flex-flow: column;}
.infoonly p, h3 {order:1;}
input.buttons{
	background:#EBECF0;
	color:black;
	border-style:outset;
	font-family:Arial, Helvetica, sans-serif;
	text-shadow:none;
	font-weight:normal;
}
input[type=text] {font-size:16px;} /*this stops iphones from zooming in when filling out text inputs*/
input[type=button],select, input[type=submit] {font-size:16px;}
/*the following "invisibles" are useful for forcing table column widths*/
tr.invisible {padding:0px;}
td.invisible {padding:0px;}

div.bottommenu {
	text-align:center;
	position:relative;
	clear:both;
	width:100%;
	overflow:hidden;
}
	div.widelogo {display:none;}
div.tablogoandcart {width:auto; padding:0px; margin:0px;}
img {width:auto; max-width:100%; text-align:center;}
img.scart {width:26px;}

div.desktopmenu {display:none;}
/*menu stuff*/
td.menuboxes { 
	display:table-cell;
	background-color:#adc3ef;
	font-family: Arial, "sans-serif";
	/*font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";*/
	font-weight:bold;
	font-style:italic;
	color: black ;
	font-size:16px;
	text-shadow: none;
	padding: 7px 10px;
	text-align: center;
	vertical-align:middle;
	box-shadow:0 1px 2px #fff, /*bottom external highlight*/
  		inset 0 -2px 2px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  		inset 0 2px 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  		inset 2px 0 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  		inset -2px 0 2px rgba(0,0,0,0.5); /*bottom internal shadow*/ 
}
td.cartbox { 
	background-color:#adc3ef;
	font-weight:bold;
	/*color:yellow;*/
	min-width:26px;
	text-shadow:0px 0px 2px black;
	padding: 7px 10px; /*9px 10px 5px 10px;*/
	text-align: center; 
	box-shadow:0 1px 2px #fff, /*bottom external highlight*/
  		inset 0 -2px 2px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  		inset 0 2px 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  		inset 2px 0 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  		inset -2px 0 2px rgba(0,0,0,0.5); /*bottom internal shadow*/ 
}

td.logoboxnar { 
	background-image:url(/images/graphics/bjcl2stripe.jpg); background-repeat:repeat;
}


.menuboxes:hover .dropdown-content {
  display: block;
	position:absolute;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color:#adc3ef;
  font-size:14px;
  max-width: 150px;
 /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
  padding: 12px 16px;
  z-index: 1;
	box-shadow:0 1px 2px #fff, /*bottom external highlight*/
  inset 0 -2px 2px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 2px 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  inset 2px 0 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  inset -2px 0 2px rgba(0,0,0,0.5); /*bottom internal shadow*/
	/* font-family:Times New Roman, Georgia, serif;font-size:small;font-weight:bold;color:yellow;*/
	font-family:Arial, Helvetica, sans-serif;
	 
}
.dropdown-contentsub:hover .dropdown-content1 {
  display: block;
}

a.dropdown {
	text-decoration:none;
	color:yellow;
}

span.dropdown-content1 {
  display: none;
  position: absolute;
	left:70px;
	top:5px;
  padding: 12px 16px;
  background-color:#adc3ef;
  z-index: 1;
	box-shadow:0 1px 2px #fff, /*bottom external highlight*/
  inset 0 -2px 2px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 2px 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  inset 2px 0 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  inset -2px 0 2px rgba(0,0,0,0.5); /*bottom internal shadow*/
	 /*font-family:Times New Roman, Georgia, serif;font-size:small;font-weight:bold;color:black;*/
	font-family:Arial, Helvetica, sans-serif;
	 
}
.dropdown-content1 a {text-decoration:none; color:black;}
.dropdown-contentsub a {text-decoration:none; color:black;}
.menuboxes a {text-decoration:none; color:black; font-size:16px; }
.dropdown-content a {text-decoration:none; color:black; font-size:14px; }
div.dropdown-contentsub {position:relative;}

span.separator {
	color:#A78C2B; 
	text-shadow:0 0 0 #A78C2B; 
}
div.noflow {	
height:1px;
	width:100%;
	background-image:url(images/graphics/trans1.png); 
	background-repeat:repeat-x; 
	clear:both;
	position:relative;
}
div.bluedivide {	
height:35px;
	width:100%;
	background-image:url(bluerepeat35h.png); 
	background-repeat:repeat-x; 
	clear:both;
	position:relative;
}	

div.invisibledivide {	
height:1px;
	width:100%;
	background-image:url(transgif.gif); 
	background-repeat:repeat-x; 
	clear:both;
	position:relative;
}	


div.rightinfobox { align-self:center; width:225px; background-color:#f5f5f5; border-width:2px; border-style:solid; border-color:#000000; margin-left:10px; order:3;}
div.leftinfobox { align-self:center; width:225px; background-color:#f5f5f5; border-width:2px; border-style:solid; border-color:#000000; margin-right:10px; order:3;}
li.infobox { margin-bottom:3px; list-style-type:inherit; }
li.nobullet {list-style-type:none;}
li.infohead { list-style-type:none; text-align:left; text-indent:-10px; margin-left:0px; font-size:1.3em; margin-bottom:0px; }
ul.infobox {margin-left:20px; padding-left:0px; margin-top:5px; list-style-type:disc;}
figure.left {
    display:table;
	margin-right: 10px;
	margin-top:10px;
	clear:both;
	float:left;
	margin-inline-start:0px;
		
	
}
figure img {display:block;
width:auto;}
figcaption {text-align:center;}
figcaption.left {
	
    display: table-caption;
    caption-side: bottom;
	text-align:center;
	border: 1px dotted blue;
	
}

figure.right {
    display: table;
    margin-left: 10px;
	margin-top:10px;
	margin-inline-end:0px;
	clear:both;
	float:right;
}
figcaption.right {

    display: table-caption;
    caption-side: bottom;
    border: 1px dotted blue;
	text-align:center;
}
p.footnote { font-family: arial,sans-serif; font-size:0.9em; margin:10px 3px; text-indent:0em;}
a.ns {color:#000001; text-decoration:none; }
p.indentquote { font-family: arial,sans-serif; font-size:1.0em; margin:10px 40px; text-indent:0em;}

table.linetwo{display:none;}


@media(max-width:499px){ 
	div.nar{display:block;}
	tr.nartr{display:table-row;}
	div.logo {width:310;text-align:center;}
	div.general {background-color:#F3FCFF; width:95%; height:95%; margin:auto;}
	div.widelogo {display:none;}
	div.tablogoandcart {display:block;}

}




@media(min-width:500px) and (max-width:649px) { 
	div.widelogo {display:none;}
	div.tablogoandcart {display:block;}
	div.mobilemenu {display:block;}
	div.desktopmenu {display:none;}
}
	
/*special case for menu only, tweak if menu width changes*/
@media(min-width:650px) and (max-width:749px){
	
	div.widelogo {display:block;width:auto; text-align:center;}
	div.tablogoandcart {display:none;}
	div.mobilemenu {display:none;}
	div.desktopmenu {display:block; margin:auto; width:100%;}
	
	.menuboxes a {text-decoration:none; color:yellow; font-size:small; }
	td.menuboxes {
	background-color:#adc3ef;
	font-weight:bold;
	color:yellow;
	font-size:small;
	text-shadow:2px 2px 2px black;
	padding: 7px 10px;
	text-align: center; 
	box-shadow:0 1px 2px #fff, /*bottom external highlight*/
  		inset 0 -2px 2px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  		inset 0 2px 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  		inset 2px 0 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  		inset -2px 0 2px rgba(0,0,0,0.5); /*bottom internal shadow*/ }
	
	td.menuboxes { 
	background-color:#adc3ef;
	font-family: Arial, "sans-serif";
	/*font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";*/
	font-weight:bold;
	font-style:italic;
	color: yellow ;
	font-size:small;
	text-shadow: 2px 2px 2px black;
	padding: 7px 10px;
	text-align: center; 
	box-shadow:0 1px 2px #fff, /*bottom external highlight*/
  		inset 0 -2px 2px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  		inset 0 2px 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  		inset 2px 0 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  		inset -2px 0 2px rgba(0,0,0,0.5); /*bottom internal shadow*/ 
}
span.dropdown-content1 {
  display: none;
  position: absolute;
	left:70px;
	top:5px;
  padding: 12px 16px;
  background-color:#adc3ef;
  z-index: 1;
	box-shadow:0 1px 2px #fff, /*bottom external highlight*/
  inset 0 -2px 2px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 2px 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  inset 2px 0 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  inset -2px 0 2px rgba(0,0,0,0.5); /*bottom internal shadow*/
	 /*font-family:Times New Roman, Georgia, serif;font-size:small;font-weight:bold;color:black;*/
	font-family:Arial, Helvetica, sans-serif;
	 
}
.dropdown-content1 a {text-decoration:none; color:yellow;}
.dropdown-contentsub a {text-decoration:none; color:yellow;}
.menuboxes a {text-decoration:none; color:yellow; font-size:small; }
	
	
}

/*experiment with medium widths*/
@media(min-width:500px) and (max-width:749px) { 
	div.general {background-color:#F3FCFF; width:95%; height:95%; margin:auto;}
	div.infoonly{display:block;}
	div.med{display:block;}
	div.winfo{width:100%; background-color:inherit; margin:0; display:grid; grid-template-columns: auto 235px; justify-items:left; }
	.winfo div.leftinfobox, div.rightinfobox { grid-column-start:2; grid-column-end:3; order:3; width: 225px; margin-right:10px; }
	.winfo p, h3 {grid-column-start:1; grid-column-end:2;}
	.winfo img{grid-column-start:1; grid-column-end:2; order:2;   margin-right:10px; }
	.winfo figure{grid-column-start:1; grid-column-end:2; order:2;   margin-right:10px; }
	p.imgdivs{width:100%; }
	div.rightinfobox {float:right; margin-left:10px; padding-left:0px; width:225px; }
	div.leftinfobox {float:left; margin-right:10px; padding-right:0px; width:225px; }
	div.stackedimage {width:100%; background-color:inherit; margin:0; display:grid; grid-template-columns: auto auto; justify-items:left; }
	.stackedimage p, h3{grid-column-start:1; grid-column-end:3;}
	.stackedimage leftofpair{grid-column-start:1; grid-column-end:2; order:2; margin-left:10px; }
	.stackedimage rightofpair{grid-column-start:2; grid-column-end:3; order:2; margin-right:10px; }
	
	


}


@media(min-width:750px){
	div.general {background-color:#F3FCFF; width:95%; height:95%; margin:auto;}
	div.infoonly{display:block;}
	div.wid{display:block;}
	div.pic{text-align:left;}
	div.rightpic{display:block;}
	.rightpic table{ }
	.rightpic img{float:right; width:auto; max-width:30%; align-self:auto; margin-left:20px; }
	.rightpic figure{float:right; width:auto; max-width:30%; align-self:auto; margin-left:20px; }
	.rightpic figure img{max-width:none;}
	.rightpic h3, p{}
	div.leftpic{display:block;}
	.leftpic img{float:left; width:auto; max-width:30%; align-self:auto; margin-right:20px;}
	.leftpic figure{float:left; width:auto; max-width:30%; align-self:auto; margin-right:20px;}
	.leftpic figure img{max-width:none;}
	.leftpic h3, p{}
	img.right {width:auto; float:right;}

}
@media(min-width:750px){
	div.logo {width:auto; text-align:center;}
	div.mobilemenu {display:none;}
	div.desktopmenu {display:block;}
	div.rightinfobox { float:right;}
	div.leftinfobox { float:left;}
	div.widelogo {display:block; width:auto; text-align:center;}
	div.tablogoandcart {display:none;}
	
.menuboxes a {text-decoration:none; color:yellow; font-size:medium; }
	td.menuboxes {
	text-decoration:none;
	background-color:#adc3ef;
	font-weight:bold;
	color:yellow;
	font-size:medium;
	text-shadow:2px 2px 2px black;
	padding: 7px 10px;
	text-align: center; 
	box-shadow:0 1px 2px #fff, /*bottom external highlight*/
  		inset 0 -2px 2px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  		inset 0 2px 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  		inset 2px 0 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  		inset -2px 0 2px rgba(0,0,0,0.5); /*bottom internal shadow*/ }
div.rightinfobox {float:right; margin-left:10px; padding-left:0px; width:225px; }
div.leftinfobox {float:left; margin-right:10px; padding-right:0px; width:225px; }
	
td.menuboxes { 
	background-color:#adc3ef;
	font-family: Arial, "sans-serif";
	/*font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";*/
	font-weight:bold;
	font-style:italic;
	color: yellow ;
	font-size:18px;
	text-shadow: 2px 2px 2px black;
	padding: 7px 10px;
	text-align: center; 
	box-shadow:0 1px 2px #fff, /*bottom external highlight*/
  		inset 0 -2px 2px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  		inset 0 2px 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  		inset 2px 0 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  		inset -2px 0 2px rgba(0,0,0,0.5); /*bottom internal shadow*/ 
}
span.dropdown-content1 {
  display: none;
  position: absolute;
	left:70px;
	top:5px;
  padding: 12px 16px;
  background-color:#adc3ef;
  z-index: 1;
	box-shadow:0 1px 2px #fff, /*bottom external highlight*/
  inset 0 -2px 2px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 2px 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  inset 2px 0 2px rgba(255,255,255,0.8),  /*top internal highlight*/ 
  inset -2px 0 2px rgba(0,0,0,0.5); /*bottom internal shadow*/
	 /*font-family:Times New Roman, Georgia, serif;font-size:small;font-weight:bold;color:black;*/
	font-family:Arial, Helvetica, sans-serif;
	 
}
.dropdown-content1 a {text-decoration:none; color:yellow;}
.dropdown-contentsub a {text-decoration:none; color:yellow;}
.menuboxes a {text-decoration:none; color:yellow; font-size:18px; }
	
div.general {background-color:#F3FCFF; width:95%; height:95%; margin:auto;}
div.infoonly{display:block;}

div.winfo{width:100%; background-color:inherit; margin:0; display:grid; grid-template-columns: auto 235px; justify-items:left; }
.winfo div.leftinfobox, div.rightinfobox { grid-column-start:2; grid-column-end:3; order:3; width: 225px; margin-right:10px; }
.winfo p, h3 {grid-column-start:1; grid-column-end:2;}
/*.winfo img{grid-column-start:1; grid-column-end:2; order:2;   margin-right:10px; }
.winfo figure{grid-column-start:1; grid-column-end:2; order:2;   margin-right:10px; }*/
.winfo div.rightpic {grid-column-start:1; grid-column-end:2;}
p.imgdivs{width:100%; }
div.rightinfobox {float:right; margin-left:10px; padding-left:0px; width:225px; }
div.leftinfobox {float:left; margin-right:10px; padding-right:0px; width:225px; }
div.stackedimage {width:100%; background-color:inherit; margin:0; display:grid; grid-template-columns: auto auto; justify-items:left; }
.stackedimage p, h3{grid-column-start:1; grid-column-end:3;}
.stackedimage leftofpair{grid-column-start:1; grid-column-end:2; order:2; margin-left:10px; }
.stackedimage rightofpair{grid-column-start:2; grid-column-end:3; order:2; margin-right:10px; }
	
	
}


@media(hover:none){div.mobilemenu {overflow:auto; white-space:nowrap;}}
@media(hover:hover) and (max-width:600px){
	td.linetoolong{display:none;}
	table.linetwo{display:table;}
}