/*
   common.css
   Copyright (C) 2011-2021, Signalogic, Inc.

   Modified Jul-Oct 2011 JHB, website upgrade
   Modified JHB May 2019, see "JHB" comments below.  Overall mods for website upgrade including move to new QIS server, mobile friendly page (header code), faster load times (optimized images including logo), and more
   Modified JHB Dec 2021, change "number_ul" to "number_ol" (ordered list)
*/

body {

  margin:0;
  background:#fff;
/*
  background-image:gradient.jpg;
*/
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 0;
}

/* nav bar left margin and elemement horiontal spacing were 8 and 15 px, now reduced to 0 and 3 for Google-dictated mobile friendly improvements. Top items left margin was 2em, now reduced to 0, JHB May 2019 */

:root {

  --nav_bar_top_padding: 8px;
  --nav_bar_spacing: 5px;
  --top_items_left_margin: 0em;
}

/*

default is normal list style; specific classes override as needed

ul,li{ list-style:none; padding:0px; margin:0px; overflow:hidden; }
*/
div{ margin:0px; padding:0px; }
a{ padding:0px; margin:0px; overflow:hidden; outline:none; cursor:pointer; text-decoration:none; }

 img{ border:none;}
 input{ outline:none;}
.fl{ float:left;}
.fr{ float:right;}
.bgnone{ background-image:none !important;}

/* not used...

.padding_t10{ padding-top:10px;}
.padding_r10{ padding-right:10px;}
.padding_b10{ padding-bottom:10px;}
.padding_l10{ padding-left:10px;}

.margin_r10{ padding-right:11px;}
*/

h1{ color:#C40B4C; margin:0; margin-top:0.5em; font-size:2.5em; }
h2{ color:#C40B4C; padding:0; margin-top:0.4em; margin-bottom:0.4em; font-size:1.9em; }
h2 a{ color:#C40B4C; }
h3{ color:#C40B4C; padding:0; margin-top:0.4em; margin-bottom:0.4em; font-size:1.5em; }

.width_auto{ width:auto; height:auto; overflow:hidden; }

/* header classes */

.header{ width:85%; margin:auto; padding:0px; overflow:hidden; }

.logo{ width:auto; height:60px; float:left; padding:0; margin-top:0.5em; margin-left:var(--top_items_left_margin); margin-bottom:0; color:#fff;}

.follow_us{ width:auto; height:60px; float:left; padding:0; margin-top:0em; margin-left:0; margin-bottom:0; color:#fff;}  /* follow us items (LinkedIn, Facebook, etc) are right of logo.  See static/header.html, JHB May 2019 */

.sitemap{ width:85%; margin-left:0; margin-top:1em; margin-bottom:1em; margin-right:0; font-family:Arial; font-size:8pt; }

/* commented out all nav bar classes with bitmap images and replaced with non-image.  Lots of small, identical images on each page seem to be making pages look similar to the Googlebot, plus so many small images are slowing load time.  Load times can be tested with gtmetrix.com and webpagetest.org, JHB May 2018 */

/*
.navigation{ width:auto; padding:0; clear:both; margin:auto; margin-bottom:0; background:url(../images/navi_bg.gif) no-repeat; height:34px; }
*/

.navi-cen{ width:auto; height:34px; float:left; overflow:hidden; }

.navi-cen ul{ padding:0; margin:0 0 0 var(--top_items_left_margin); #margin: 0 0 0 1em; list-style-type:none; list-style-position:outside; float:left; }
/*
.navi-cen li{ height:31px; float:left; background:url(../images/naviborder_narrow.jpg) no-repeat; background-position:right; overflow:hidden; }
*/
.navi-cen li{ height:31px; float:left; background-position:right; overflow:hidden; }

.navi-cen li a{ padding:var(--nav_bar_top_padding) var(--nav_bar_spacing) 0px var(--nav_bar_spacing) ; display:block; color:#00f; float:left; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:bold; }
.navi-cen a:hover{ display:block; color:#000; padding:var(--nav_bar_top_padding) var(--nav_bar_spacing) 0px var(--nav_bar_spacing); background-image:url(../images/navi_hover.jpg) !important; background-repeat:repeat-x; height:31px; background-position: center; }

.navi-right{ width:auto; height:34px; overflow:hidden; float:left;}
.navi-right ul{ padding:0; margin:0; list-style-type:none; list-style-position:outside; float:left; }

.navi-right li{ height:31px; float:left; float:left; overflow:hidden; }

.navi-right li a{ padding:var(--nav_bar_top_padding) var(--nav_bar_spacing) 0px var(--nav_bar_spacing) ; display:block; color:#00f; float:left;font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:bold; }
.navi-right a:hover{ display:block; color:#000; padding:var(--nav_bar_top_padding) var(--nav_bar_spacing) 0px var(--nav_bar_spacing); background-image:url(../images/navi_hover.jpg) !important ; background-repeat:repeat-x; height:31px; background-position: center; }

.current { display:block; color:#000 !important;display:block; padding:var(--nav_bar_top_padding) var(--nav_bar_spacing) 0px var(--nav_bar_spacing); background-image:url(../images/navi_hover.jpg) !important; background-repeat:repeat-x; height:31px; background-position: center; }
 
 
.top_login { width:180px;height:34px; background:none; overflow:hidden; float:right; margin-right:15px;}  
.top_login ul{ float:right;} 
/*
.top_login li {  list-style:none;float:left;  height:31px; background:url(../images/naviborder.jpg) no-repeat; background-position:right;  }
*/
.top_login a{ display:block; padding:var(--nav_bar_top_padding) var(--nav_bar_spacing) 0px var(--nav_bar_spacing) ;  color:#00f;float:left;font-family: Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}
.top_login a:hover{ display:block; color:#000;padding:var(--nav_bar_top_padding) var(--nav_bar_spacing) 0px var(--nav_bar_spacing); background-image:url(../images/navi_hover.jpg) !important ;background-repeat:repeat-x; height:31px;  }

 
/* banner (if used, for example for rotating product pics), and logo */

.banner { width:85%; height:auto; margin:auto; margin-top:0; margin-bottom:0; padding: 0; clear:both; overflow:hidden; }


/* content classes */

.content { width:85%; height:auto; margin:auto; margin-top:0; font-family:Arial, Helvetica, sans-serif; font-size:10.5pt; overflow:auto; overflow-y:hidden; }  /* overflow:auto causes scroll bar to be added if content is too wide.  overflow:visible is the default */

.content ul { padding:0; margin-left:0; }
.content li { display:list-item; list-style-type:none; }
.content ul, ul { padding:0; margin-left:0.75em; }

.bullet_ul ul { margin-left:0.75em; padding:0; }
.bullet_ul li { margin-left:0.75em; padding-bottom:0.25em; vertical-align:middle; list-style-position:inside; list-style-type:disc; }

.number_ol ul { margin-left:0.1em; padding:0; }
.number_ol li { margin-left:0.1em; padding-bottom:0.25em; vertical-align:middle; list-style-type:decimal; }

.frame_autosize_rc { width:auto; height:auto; float:left; display:inline; overflow:hidden; }

.frame_autosize_rc_leftmargin { width:auto; height:auto; float:left; margin:0 0 0 1%; overflow:hidden; }

.cat_box { width:251px; height:449px; background:url(../images/boxbg.jpg) no-repeat; float:left; margin:20px 12px 0 12px; color:#fff; }  /* note -- width/height specified in px to match the background .jpg */

.cat_box h3 { color:#fff; padding:10px 0 0 0; margin:0 0 -8px 0; font-size:12pt; text-align:center; font-weight:bold; }
.cat_box p { text-align:justify; padding:0 10px 0 20px; line-height:9pt; font-family:Arial, Helvetica, sans-serif; font-size:8pt; }
.cat_box a { color:#fff; }

.seemore { width:81px; height:25px; float:right; margin-top:20px; margin-right:20px; }

/* footer classes */

.footer { width:65%; height:auto; margin:auto; margin-top:20px; overflow:hidden; }

/*
.copy_right { width:auto; height:auto; margin:auto; float:left; display:inline; font-size:0.85em; color:#fff; overflow:hidden; }
.copy_right a { padding:0; margin:0; color:#fff; }
*/
.copy_right { width:auto; height:auto; margin:auto; float:left; display:inline; font-size:0.85em; color:#000; overflow:hidden; }
.copy_right a { padding:0; margin:0; color:#000; }

/* product info and shopping cart */

.product-desc { width:auto; height:auto; padding:10px 10px 10px 10px; font-size:7pt; overflow:hidden; } /* font-size:0.85em; overflow:hidden; } */
.availability { width:auto; height:auto; padding:10px 10px 10px 10px; font-size:0.85em; overflow:hidden; }
.pricing { width:auto; height:auto; padding:10px 10px 1% 10px; font-size:0.85em; overflow:hidden; }
.get_quote { width:auto; height:auto; *margin-bottom:-5%; padding:1% 10px 1% 10px; font-size:0.85em; overflow:hidden; }  /* IE seems to have some bug where vertical space is added a </form> tag.  JHB Oct11 */
.promotions { width:auto; height:auto; padding:10px 10px 10px 10px; font-size:0.85em; overflow:hidden; }

/* Notes about tabinfo_container below:

  1) width;auto doesn't work in FireFox and a fixed-width override must be specified in the tabinfo_container div.  This is evidently a problem in Firefox, which differs from IE in what value it uses for parent width.
     Don't know how to fix this yet, maybe overflow:hidden, position relative... not sure.  JHB, Oct2011
     
  2) border-radius not supported on IE less than IE9.  There are hacks, but not worth spending time on.
*/
 
.tabinfo_container { font-size:0.85em; border:1px solid gray; border-radius:5px; -moz-border-radius:5px; width:auto; margin-bottom: 1em; padding: 10px; background-color:#ffffff; }

/*
.trademarks{ width:85%; height:auto; margin:auto; float:left; font-size:0.7em; color:#fff; }
*/

 /* rounded box code items */
 
/* \*/

/*
* html #tlc, * html #trc {height:1%;}
*/

/* */

#box{ margin-left:auto; margin-right:auto; margin-top:2em; padding:0; text-align: left; width:100%; overflow:hidden; }

#tlc, #trc, #blc, #brc { background-color:transparent; background-repeat:no-repeat; }

#tlc_lightred_bkgnd, #trc_lightred_bkgnd, #blc_lightred_bkgnd, #brc_lightred_bkgnd { background-color:transparent; background-repeat:no-repeat; }
#tlc_lightblue_bkgnd, #trc_lightblue_bkgnd, #blc_lightblue_bkgnd, #brc_lightblue_bkgnd { background-color:transparent; background-repeat:no-repeat; }

/*
#tlc{	background-image: url(../images/tlc.jpg); background-position: 0% 0%; }

#trc{ background-image:url(../images/trc.jpg); background-position: 100% 0%; }
	
#blc{ background-image:url(../images/blc.jpg); background-position: 0% 100%; }

#brc{ background-image:url(../images/brc.jpg); background-position: 100% 100%; }

#tlc_lightred_bkgnd { background-image:url(../images/tlc_lr.jpg); background-position: 0% 0%; }
#tlc_lightblue_bkgnd { background-image:url(../images/tlc_lb.jpg); background-position: 0% 0%; }

#trc_lightred_bkgnd { background-image:url(../images/trc_lr.jpg); background-position: 100% 0%; }
#trc_lightblue_bkgnd { background-image:url(../images/trc_lb.jpg); background-position: 100% 0%; }
	
#blc_lightred_bkgnd { background-image:url(../images/blc_lr.jpg); background-position: 0% 100%; }
#blc_lightblue_bkgnd { background-image:url(../images/blc_lb.jpg); background-position: 0% 100%; }

#brc_lightred_bkgnd { background-image:url(../images/brc_lr.jpg); background-position: 100% 100%; }
#brc_lightblue_bkgnd { background-image:url(../images/brc_lb.jpg); background-position: 100% 100%; }
*/

#tb, #bb { background-color:transparent; background-repeat:repeat-x; }

#tb_lightred_bkgnd{ background-color:#ffeeff; background-repeat:repeat-x; }
#tb_lightblue_bkgnd{ background-color:#eeeeff; background-repeat:repeat-x; }

#bb_lightred_bkgnd{ background-color:transparent; background-repeat:repeat-x; }  /* for color background, either top or bottom border still has to be transparent, haven't figured this out yet.  JHB, Oct2011 */
#bb_lightblue_bkgnd{ background-color:transparent; background-repeat:repeat-x; }

/*
#tb { background-image:url(../images/tb.jpg); background-position: 0% 0%; }

#tb_lightred_bkgnd { background-image:url(../images/tb_lr.jpg); background-position: 0% 0%; }
#tb_lightblue_bkgnd { background-image:url(../images/tb_lb.jpg); background-position: 0% 0%; }

#bb { background-image:url(../images/bb.jpg); background-position: 50% 100%; }

#bb_lightred_bkgnd{ background-image:url(../images/bb_lr.jpg); background-position: 50% 100%; }
#bb_lightblue_bkgnd{ background-image:url(../images/bb_lb.jpg); background-position: 50% 100%; }
	
#rb{ background-image:url(../images/r.jpg); background-position: 100% 0%;	background-repeat:repeat-y; }

#lb{ background-image:url(../images/l.jpg); background-position: 0% 100%; background-repeat:repeat-y; }

#rb_lightred_bkgnd { background-image:url(../images/r_lr.jpg); background-position: 100% 0%;	background-repeat:repeat-y; }
#rb_lightblue_bkgnd { background-image:url(../images/r_lb.jpg); background-position: 100% 0%;	background-repeat:repeat-y; }

#lb_lightred_bkgnd { background-image:url(../images/l_lr.jpg); background-position: 0% 100%; background-repeat:repeat-y; }
#lb_lightblue_bkgnd { background-image:url(../images/l_lb.jpg); background-position: 0% 100%; background-repeat:repeat-y; }
*/

#box_rnd_tlc, #box_rnd_trc, #box_rnd_blc, #box_rnd_brc { background-color:transparent; background-repeat:no-repeat; }

/*
#box_rnd_tlc{	background-image: url(../images/box_rnd_tlc.jpg); background-position:0% 0%; }

#box_rnd_trc{ background-image:url(../images/box_rnd_trc.jpg); background-position:100% 0%; }
	
#box_rnd_blc{ background-image:url(../images/box_rnd_blc.jpg); background-position:0% 100%; }

#box_rnd_brc{ background-image:url(../images/box_rnd_brc.jpg); background-position:100% 100%; }
*/

#box_rnd_t, #box_rnd_b{ background-color: transparent; background-repeat:repeat-x; }
	
/*
#box_rnd_t{ background-image:url(../images/box_rnd_t.jpg); background-position:0% 0%; }

#box_rnd_b{ background-image:url(../images/box_rnd_b.jpg); background-position:50% 100%; }
*/

/* repeat is equivalent to repeat-xy; but is the correct syntax */	
/*
#box_rnd_r{ background-image:url(../images/box_rnd_r.jpg); background-position:100% 0%; background-repeat:repeat; }

#box_rnd_l{ background-image:url(../images/box_rnd_l.jpg); background-position:0% 100%; background-repeat:repeat; }
*/

/* contact page items */

.cont form {float:left; padding:10px; margin: 0px; border:1px solid #ccc;width:400px; overflow:hidden; margin:0px;}

.contt form label { font-weight:bold;color:#444;display:block;   width:100%;}
.inputtext { width:96%;border:1px solid #ddd;padding:4px;margin:5px 0 10px 0;font:90% Verdana;}

.cont form textarea {width:96%;border:1px solid #ddd;padding:4px;margin:5px 0 10px 0;font:90% Verdana;}
.submit{ width:56px!important; height:21px;margin:0px  8px 20px 0px; margin:0px 2px 20px 0px;  border:0px;   float:right; background-image:url(../images/submit.jpg);}


.loginform  label{ width:100%; padding-top:10px; clear:both;}
.paddingt10{ padding-top:10px;}

.loginform .textbox{ width:100%; margin-top:10px; margin-bottom:10px;}
.forgot{ width:100%; margin-top:20px; height:20px;}
.forgot a{   color:#247CB7; font-size:13px; font-weight: bold;  text-decoration:none; }
.forgot a:hover{   color:#247CB7; font-size:13px; font-weight: bold;  text-decoration: underline ; }