/* CSS: John Germany  2009-2020  Main CSS Code */
/* Last validated 2020-1026 */
/* Number of lines: 505>298>361 */
/* HTML Elements */
h1 {font-weight: bold; margin: 0px; color: var(--color-pair-darker); font-style: italic; } 
h2,h3,h4,h5,h6 { color: var(--color-pair); }
img { height: auto; width: 100%; }
hr { height: 3px; color: var(--color-pair-darker); }
p { line-height: 160%; color: var(--color-text); text-align: justify; }
textarea { width: auto; }
input { margin: auto; width: auto; display: inline; }
ol > li { list-style-type: square; color: var(--color-text); }
li {list-style-type: none; line-height: 130%;}
li::marker {color: var(--color-offset-darker);}
a {color: var(--color-link); }
a:hover {color: var(--color-link-hover); text-decoration: underline; }
button:hover {color: var(--color-link-hover); }
legend {text-decoration: none; text-align: left; font-weight: bold; font-size: 1.10em; margin: 10px; color: var(--color-legend);}
/* Top Navigation Menus */
#menuProductCatalogButton {display: none; }
#site_page {padding-left: 1%; padding-right: 0px; margin: 0px; }
/* Target Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
#menuProductCatalogButton {display: initial; }
h1 { font-size: 1.50em; }
}
/* Target Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Target Large devices (desktops, 992px and up) */
@media (min-width: 992px) { }
/* Target Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { }

/* Navigation Bar - Site Header */
#siteHeaderRow { background-color: #eee; /* For browsers that do not support gradients */
				background-image: var(--color-header-gradient); }
#siteHeaderMenu {padding: 8px; background-color: var(--color-primary-lightest); border-bottom: 2px solid var(--color-offset);}
#siteHeaderMenu a {color: black; background-color: var(--color-primary-lightest); border: 1px solid transparent; padding: 5px; }
#siteHeaderMenu a:hover {color: var(--color-orange); border: 1px solid gray;}
#site_footer {background-color: var(--color-pair-lightest); }

/* Optional Body. <div> Must be on each page */
#siteMessage * {margin: 0px; text-align: center; padding: 1%; color: var(--color-offset-lightest); 
				background-color: black; line-height: 150%;
				border-bottom: 4px groove var(--color-pair); border-top: 2px solid var(--color-pair); }

/* Site Specific */
.searchBox {padding: 1%; border: 1px solid #dcdcdc; border-top: 5px solid #dcdcdc;}
.siteAppBar { padding: 5px; }

/* Site Page Standard*/
#site_bottom_msg {background-color: var(--color-primary); color: var(--color-primary-lightest); }
.pageHeader {padding: 5px; background-color: var(--color-primary-lighter);  }
.pageHeader h2 {font-size: 1.1em; }
.pageHeader p {font-size: .9em; }
.pageHeader h3 {color: var(--color-primary-dark); }
.pageMenu {padding: 5px; margin-bottom: 3px; 
			background-color: var(--color-primary-lightest); 
			border-top: 2px solid var(--color-primary-lighter);
			border-radius: 5px 5px 0px 0px; }
.pageMenu a {padding: 3px; margin: 3px; }
.pageMenu a:hover {color: var(--color-link-hover); text-decoration: none; }
.pageFilterMenu {padding: 5px; margin-bottom: 15px; background-color: var(--color-comp-lightest); border-top: 2px solid var(--color-primary-lighter);}
.pageFilterMenu a {padding: 3px; margin: 3px; }
.pageFilterMenu a:hover {color: var(--color-link-hover); text-decoration: none; }

.catalogMenu { margin-bottom: 15px; 
				background-color: var(--color-comp-lightest); 
				border-top: 2px solid var(--color-primary-lighter); 
				border-bottom: 4px solid var(--color-primary-light); 
				padding: 1%; }
.catalogMenu a {padding: 5px; margin: 1px; font-weight: bold; }
.catalogMenu a:hover { border-radius: 5px; padding: 5px; color: var(--color-link-hover); background-color: #000000; text-decoration: none; }

/* Used for page headers H2 */
.sectionPage > h2 { font-weight: bold ;}
.sectionHeader { padding: 3px 0px; }
.sectionMenu { margin: 10px; padding: 3px; }
.sectionMenu > a { padding: 2px 3px; }
.sectionFooter { padding: 3px; }
.sectionBar { margin: 0px; background-color: var(--color-offset-lightest); text-align: center; font-size: 1.1em; }
.sectionBar p { padding: 5px; text-align: center; display: block; color: var(--primary-dark); }

/* Used on site footer */
.boxMenu {border: 1px solid grey; border-bottom: 4px solid var(--color-primary); padding: .6em; background-color: var(--color-offset-lightest); }
.boxMenu > h5 {margin: 3px; color: var(--color-offset-darker); margin-bottom: .5rem; }
.boxMenu > a {display: block;} 

/* Data sections */
.data-section {}
.data-header {background-color: var(--color-offset-lightest); padding: 1%; border: 1px solid lightgrey; }
.data-title {}
.data-body {}
.data-footer {}

/* Used in search results */
.resultsMenu {font-size: .9em; }
.resultsMenu > a {display: block; text-align: left; } 
.formBar {border: 1px solid var(--color-light); padding: 8px; background-color: var(--color-primary-lighter); }

/* Site Application Bar  and Site Menus */
#featured {padding: 10px; background: linear-gradient(to top, #ffff66 -16%, #ffffff 89%);}
#featured a {margin: 10px; }
#featured a:hover {border: none; }
.tipofday {font-style: italic; color: var(--color-primary-text); font-size: .8em; }

/* Products */
.updateHeader {padding: 1%; background-color: var(--color-comp-lightest); border: 1px solid var(--color-primary-light); }
.pidhover {color: red; }  /* Keep this for JS activation over PID */
.product-image-div {padding: 2px; border: 1px solid white; width: auto; }
.product-image {display: block; width: auto; height: auto; max-width: 150px; max-height: 150px;  }
.product-image-small {display: block; width: auto; max-width: 100px; height: 100px; }
.department {background-color: var(--color-primary-lightest); }
.department-body {height: auto ; }
.department-image {display: block; margin: auto; width: 125px; height: 125px; }
.department-category {height: 200px; overflow: auto;  }
.missing-img {border: 1px solid #ccc; margin: 2px; padding: 3px; text-align: center; font-size: .90rem; }
.product-image-detail-div {border: 0px solid lightgrey; width: auto; height: auto; padding: 15px;  }
.product-image-detail-lg {display: block; width: 25%; height: auto; border: 1px solid transparent;}
.product-image-detail-lg:hover {border: 1px solid #ccc;}
.product-image-detail-sm {display: block; width: auto; height: auto; max-width: 100px; max-height: 100px; margin: auto; } 
.product-image-fixed-sm {}

.carousel-item {width: 97%; overflow: hidden; }
.carousel-control-prev {height: auto; width: 30px; background-color: transparent; margin: 0px; padding:0px; }
.carousel-control-next {height: auto; width: 30px; background-color: transparent; margin: 0px; padding:0px; }
.carousel-control-prev-icon { padding: 15px; background-color: blue; }
.carousel-control-next-icon { padding: 15px; background-color: blue; }
.carousel-image {display: inline; width: 150px; }


.retailprice  {font-weight: bold; color: var(--color-retail-price); padding: 3px;}
.sellingprice {font-weight: bold; color: var(--color-selling-price); padding: 3px;}
.specialprice {font-weight: bold; color: var(--color-special-price); padding: 3px;}
.product-new {font-size: .8em; color: white; background-color: var(--color-alert); padding: 2px; border: 2px solid red; border-radius: 5px;}
.product-bullets {font-weight: bold; }
.results-row {margin: 0px; padding: 2px; border: 1px solid var(--color-primary-lightest); }
.row-border-hover:hover {border: 1px solid var(--color-offset);}
.product-cell {border: 1px solid var(--color-primary-dark); border-radius: 2px; margin-top: 5px; padding: 4px; width: 20%; height: auto; text-align: center; }
.product-cell:hover {background-color: var(--color-primary-lightest); border: 1px solid lightgrey; box-shadow: 2px 5px 7px #888888;}
.product-cell-header {text-align: center; padding: 3px; text-justify: none;  }
.product-cell-header {height: 80px; overflow: hidden; }
.product-cell-image {height: 175px; width: 175px; border: 0px; margin: auto; }
.product-cell-footer {height: auto; background-color: var(--color-offset-lightest); }
.cell-image {border: 0px solid lightgrey; max-height: 100%; max-width: 100%;  overflow: hidden; }
/* Adjust product-cell width on media size */
@media screen and (max-width: 992px) {
    .product-cell  {width: 32%;}
}
@media screen and (max-width: 768px) {
    .product-cell  {width: 48%;}
}
@media screen and (max-width: 576px) {
    .product-cell  {margin: auto; width: 98%; font-size: 1.20em; }
}

/* Site Web Content */
.content-image-div {border: 1px solid white; width: auto; }
.content-image {float: left; padding: 3px; margin-right: 20px; margin-bottom: 10px; width: 200px; border: 1px solid white; }
.content-image:hover {border: 1px solid lightgrey; }


/* BS4 CARDS */
.card {padding: 2px; border: 1px solid var(--color-primary-lighter);}
.card p {text-justify: none; }
.card-body {}
.card-header {}
/* With box shadow .card:hover {border: 1px solid var(--color-offset-lighter); box-shadow: 2px 5px 7px var(--color-offset-lighter);} */
.card:hover {border: 1px solid var(--color-offset-dark); }
.card-nohover {border: 0px solid var(--color-offset-lightest); }
.card-title {color: var(--color-offset-darker);}
.card-header > p:first-child {color: var(--color-card-header); }
.card-image {display: block; margin-bottom: 2px; height: 98%; width: auto; overflow: hidden;}
.btn-span {color: black; font-weight: bold; }

/* BS4 Dropdown Menus */
/* .dropdown > .dropdown-menu {color: var(--color-primary-lighter);} */
/* .dropdown-menu { background-color: #999999; border: 4px solid #aaaaaa; } */
.dropdown-menu a {background-color: var(--color-primary-lightest); color: black; }
.dropdown-menu a:hover {background-color: var(--color-pair); color: white; }
.dropdown-item {color: var(--color-primary-darkest); }

/* Font  Sizes and Colors */
.ajax-message {font-size: 1.1em; background-color: var(--color-primary-lightest); font-weight: bold; color: var(--color-ajax);}
.ajax-color-insert { color: orange; }

.paddress {font-style: italic; font-size: .9em; margin-bottom: 1em; }
.pxsmall {font-size: .75em;}
.psmallest {font-size: .8em;}
.psmaller {font-size: .85em;}
.psmall {font-size: .90em;}
.plittle {font-size: .95em;}
.pnormal {font-size: 1rem;}
.pbig {font-size: 1.05em;}
.plarge {font-size: 1.1em;}
.plarger {font-size: 1.2em;}
.plargest {font-size: 1.3em;}
.pxlarge {font-size: 1.4em;}
.p15x {font-size: 1.5em;}
.p2x {font-size: 2.0em;}
.p3x {font-size: 3.0em;}
.p4x {font-size: 4.0em;}
.p5x {font-size: 5.0em;}
.text-underline {text-decoration: underline;}
.pstrike { text-decoration: line-through;}
.pindent {margin-left: 15px; }
.readmore {font-style: italic; font-size: .9em; color: red; }
.numeric {text-align: right; }
.text-justify-none {text-justify: none;} 
.hr-grey1 {border: 3px solid #dddddd;  color: #dddddd; }
.hr-grey {height: 3px; background-color: #ccc; border: none; }
.line-menu-divider {border-bottom: 3px solid white; }
.line-section-divider {border-bottom: 5px solid var(--color-primary-lighter);}

.wordwrap {word-break: keep-all;}
.wordtags {word-spacing: 20px;}
.nowrap {overflow: hidden;text-overflow: ellipsis; word-break: keep-all;}

/* SITE COLORS - Add to database in version 3.00 */
/* Primary Color */
.color-primary-lightest {color: var(--color-primary-lightest);}
.color-primary-lighter {color: var(--color-primary-lighter);}
.color-primary-light {color: var(--color-primary-light);}
.color-primary {color: var(--color-primary);}
.color-primary-dark {color: var(--color-primary-dark);}
.color-primary-darker {color: var(--color-primary-darker);}
.color-primary-darkest {color: var(--color-primary-darkest);}
/* Pair Color */
.color-pair-lightest {color: var(--color-pair-lightest);}
.color-pair-lighter {color: var(--color-pair-lighter);}
.color-pair-light {color: var(--color-pair-light);}
.color-pair {color: var(--color-pair);}
.color-pair-dark {color: var(--color-pair-dark);}
.color-pair-darker {color: var(--color-pair-darker);}
.color-pair-darkest {color: var(--color-pair-darkest);}
/* Offset Color */
.color-offset-lightest {color: var(--color-offset-lightest);}
.color-offset-lighter {color: var(--color-offset-lighter);}
.color-offset-light {color: var(--color-offset-light);}
.color-offset {color: var(--color-offset);}
.color-offset-dark {color: var(--color-offset-dark);}
.color-offset-darker {color: var(--color-offset-darker);}
.color-offset-darkest {color: var(--color-offset-darkest);}
/* Complementary Color */
.color-comp-lightest {color: var(--color-comp-lightest);}
.color-comp-lighter {color: var(--color-comp-lighter);}
.color-comp-light {color: var(--color-comp-light);}
.color-comp {color: var(--color-comp);}
.color-comp-dark {color: var(--color-comp-dark);}
.color-comp-darker {color: var(--color-comp-darker);}
.color-comp-darkest {color: var(--color-comp-darkest);}

/* Standard Colors */
.color-company {color: var(--color-primary);}
.color-motto {color: var(--color-pair);}
.color-white {color: var(--color-white);}
.color-black {color: var(--color-black);}
.color-yellow {color: yellow;}
.color-orange {color: var(--color-orange);}
.color-red {color: var(--color-red);}
.color-green {color: var(--color-green);}
.color-blue {color: var(--color-blue);}
.color-gray {color: var(--color-gray);}
.color-alert {color: var(--color-alert);}
.color-standout {font-weight: bold; background-color: var(--color-alert); }
.bgcolor-comp {background-color: var(--color-comp-lightest);}
.bgcolor-blue {background-color: blue; }
.bgcolor-green {background-color: green; }
.bgcolor-orange {background-color: orange; }
.bgcolor-red {background-color: red; }
.bgcolor-white {background-color: white; }
.bgcolor-darkgreen {background-color: darkgreen; }
.bgcolor-lightest {background-color: var(--color-primary-lightest);}
.bgcolor-lighter {background-color: var(--color-primary-lighter);}
.bgcolor-light {background-color: var(--color-primary-light);}
.bgcolor-dark {background-color: var(--color-primary-dark);}
.bgcolor-darker {background-color: var(--color-primary-darker);}
.bgcolor-darkest {background-color: var(--color-primary-darkest);}
.bgcolor-gray {background-color: gray;}
.bgcolor-grey {background-color: grey;}
.bgcolor-inherit {background-color: inherit;} /* Force to inherit background color */
/* Telephones and addresses */
.address {text-align: left; display: block; font-style: italic;}
.telephone {text-align: center; font-style: italic; font-weight: 400; font-size: .9em ;}

/* Site font and appearance settings */
a.nolink {text-decoration: none; }
.float-clear {clear: both;}
.float-left {float: left;}
.float-right {float: right;}
.phighlight {background-color: yellow;}

/* Images */
.image-logo img {max-width: 50%; }
.image-30p { display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;}
.col-image {height: auto ; max-height: 250px; width: auto; max-width: 95%;  overflow: hidden; margin: auto; }
.image-thumbnail {width: 100px;}
.image-resize {max-width: 100%; height: auto; width: auto;} /* IE8 */
.image-1x {width: 60px;}
.image-2x {width: 120px;}
.image-3x {width: 180px;}
.image-icon32 {width: 32px;}
.image-icon64 {width: 64px;}
.image-header {width: 80px;}
.image-sm {width: auto; max-width: 50px; height: auto; max-height: 50px; }
.image100 {max-width: 100px; max-height: 100px; }
.image150 {max-width: 150px; max-height: 150px; }
.image-md {display: block; width: auto; height: auto; max-width: 100px; max-height: 100px; margin: auto; }

/* Breadcrumbs & Pageination */
.breadcrumb {background-color: transparent; text-align: center; padding: 0px; margin: 0px 0px 1% 2%; }
.pagination {background-color: var(--color-pagination-bg); border: 1px solid Gainsboro; border-top: 3px solid gray; color: black; 
			 text-justify: none; border-radius: 0px 0px 8px 8px;  font-size: .9em;
			 margin: 5px; padding: 5px; }
.pagination a {color: blue; margin: 0px; padding: 5px; border-radius: 2px; }
.pagination a:hover {color: black; background-color: orange; text-decoration: none; }
.pagination p {display: inline; }

/* HORINZONTAL TABS */
div.tab {overflow: hidden; border-bottom: 3px solid var(--color-tab-active); border-top: 0px solid var(--color-primary-light); background-color: var(--color-comp-lighter); }
div.tab button {border-bottom: 2px; color: var(--color-blue); background-color: inherit; float: left; outline: none; cursor: pointer; padding: 6px 12px; transition: 0.3s; }
div.tab button:hover {color: var(--color-offset-lightest); background-color: var(--color-link); }
div.tab button.active {color: var(--color-offset-darkest); background-color: var(--color-tab-active);}
.tabcontent { display: none; padding: 12px; }

/* SITE FORMS  */
/* .form-control .text-left {text-align: left;} */
.form-input-group {margin: 0px; padding: 1%; border: 1px solid var(--color-primary-lighter); background-color: var(--color-offset-lightest); }
.form-inline {display: inline;}  /* this is important */

/* Site Section */
.siteSection { padding-right: 2%; }
.siteSection p {}
.siteSection h3 {font-weight: bold; color: var(--color-primary-dark); }
.siteSection h4 {color: var(--color-orange); }
.siteSectionBar { padding: 5px; background-color: var(--color-comp-lightest); }


.docSection {padding: 2%; }
.docTopic { font-size: .9rem; color: var(--color-offset); }
.docTitle { text-transform: capitalize; color: var(--color-blue); font-weight: bold; }
.docTitle > h5 { font-weight: 300; color: #0080FF;  }
.docDescription { font-weight: bold; line-height: 100%;  }
.docContent {}
.docCredits { font-size: .85em; font-weight: 400; }

/* Side Menu for both Public and Admin Sections */
#sideMenu { margin-bottom: 4px; padding: 0px; border: 1px solid var(--color-primary-light); 
			background-color: var(--color-pair-lightest);
			border-left: none; border-radius: 5px 5px 0px 0px; }
#sideMenu a {display: block; line-height: 150%;  }
#sideMenu .sideMenuHeader a:first-child { font-weight: bold; font-size: 1.3em; }
#sideMenu p {text-align: left;}
.sideMenus { padding: 4%; background-color: var(--color-primary-lightest; ) }
.sideMenuHeader { padding: 1%; background-color: var(--color-primary-lightest); border-bottom: 1px solid var(--color-primary-lighter);}
.sideMenuCommandBar { padding: 2%; background-color: white; border-bottom: 1px solid var(--color-primary-lighter);}
.sideMenuBody { padding: 4%;}
.sideMenuFooter {padding: 4%;border-top: 2px solid var(--color-primary-lighter);  } 
.asideMenuSectionDesc {font-size: .8em; margin: 0px; color: var(--color-comp-darker); }

/* Side Search Menus */
#sideSearchMenu { padding: 3px; }
#sideSearchMenu a {display: block; line-height: 140%;  }
.sideSearchMenu {font-size: .95em; border-right: 2px solid grey; 
				 border-top: 1px solid grey; padding: 1px;
				 border-radius: 5px 5px 0px 0px; }


/* Used in table lookup via JS and Ajax. */
.table-search td {padding: 4px; }
.table-search tr:hover {color: green; background-color: lightgrey; }
.modal-title {font-size: 1.10em; color: var(--color-pair); }
.ajaxRowAdded {color: orange; }
.ajaxRowAdded th {color: black; }

/* Site Bars */
.feedbackBar {background-color: #090909; padding: 3%; }
.feedbackBar p {color: white; }
.feedbackBar a {color: red; }
.cartBar {}
.adminBar {}
/* EOF for site.css  */