﻿/* Bootstrap Breakpoint & Grid Viewer Classes
This box class is to display the bootstrap grid system.
.box {
background-color: lightblue;
border: 1px solid blue;
}
*/
/* Outline All Elements / Overflow Fix
{ outline: solid 1px red; }
*/

/* Display current bootstrap breakpoint 
body::before { content: "XS"; color: red; font-size: 2rem; font-weight: bold; position: fixed; top: 0; right: 0; z-index: 1500; }
@media (min-width: 576px) {	body::before { content: "SM"; }}
@media (min-width: 768px) {	body::before { content: "MD"; }}
@media (min-width: 992px) {	body::before { content: "LG"; }}
@media (min-width: 1200px) { body::before { content: "XL"; }}
@media (min-width: 1400px) { body::before { content: "XXL"; }}
*/

#Header {padding-top:60px;}

main {padding-top:25px;}

.sidenav { background-color: #F7F5FA; border-radius: 5px; margin-bottom: 20px; padding: 10px 0; text-shadow: 0 1px 0 #FFFFFF; }
.sidenav > li > strong { padding: 0 0 4px 10px; display: block; }
.sidenav > li > a { padding: 4px 20px; }
.sidenav > li > a:hover {background-color:#eee;}
.sidenav .subcat { font-size: 90%; }
.sidenav .subcat > a { padding: 3px 15px 3px 30px; }
.sidenav .glyphicon-chevron-right { float: right; margin-right: -6px; margin-top: 1px; opacity: 0.25; }
#CategoryNav {background-color:#f7f7f7;}
#CategoryNav .title { border-bottom: 1px solid #eaeaea; }
#BrandNav .title { border-bottom: 1px solid #eaeaea; }
.sidenav > .active > a, .sidenav .nav > .active:hover > a, .sidenav .nav > .active:focus > a { font-weight: bold; }

footer { background-color: #000000; color:#ffffff; padding:25px 0;}
footer .nav-link { color: var(--footer-nav-link-color);}
footer .nav-link:hover { color: var(--footer-nav-link-hover-color); }
footer .nav-link:active { color: var(--footer-nav-link-active-color); }
footer #PartsLogixBranding { margin-top: 50px; }
footer #PartsLogixBranding a { font-size: 0.65em; color: var(--footer-nav-link-color); }
footer #PartsLogixBranding a:hover { color: var(--footer-nav-link-hover-color); }
footer #PartsLogixBranding a:active { color: var(--footer-nav-link-active-color); }
footer .SiteSeals { float: right; list-style-type: none; padding: 0; }
footer .SiteSeals li { margin-bottom:10px;}

#ProductList .card:hover, #CategoryList .card:hover, .thumbnail:hover, .img-thumbnail:hover { box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.15); border-color: var(--bs-blue); transition: 0.3s; }
#ProductList .prod-caption {background-color: #fafafa; height:100% !important; font-size:0.875em; line-height:1.35em;}
#ProductList .no-price {display:none;}
#ProductList a {text-decoration:none;}
#ProductList a:hover { text-decoration: underline; }

.faq-cats {max-height:120px;}
.faq-cats-links h4 {text-transform:uppercase;}

.product-flag { position: absolute; width: 35%; top: 0; left: 0; }

.add-on-item { padding-left: 15px;}
.add-on-item label { font-size: .8rem;}

.NoPrice, .no-price { display: none; }

.img-thumbnail {margin-bottom:3.5px;padding:.2rem;}

#ProductDescription{margin-top:20px;}

.tooltip{font-size:.75em;line-height:.85em;}
.affirm-as-low-as {margin-bottom:0.5em;}
/* Reviews */
.stars {
	float: left;
}
#StarText { margin: 3px 0 0 15px; float: left; }

.star { display: inline-block; width: 80px; height: 16px; margin: 4px 8px 0 0; color: transparent; }
.star0 { background-image: url('../../images/stars_0_sm.png'); }
.star1 { background-image: url('../../images/stars_1_sm.png'); }
.star2 { background-image: url('../../images/stars_2_sm.png'); }
.star3 { background-image: url('../../images/stars_3_sm.png'); }
.star4 { background-image: url('../../images/stars_4_sm.png'); }
.star5 { background-image: url('../../images/stars_5_sm.png'); }

#ProductReviews { margin-top: 30px; }
.review h4 { margin: 0px; }
.helpful { margin-bottom: 3px; }

:root{
	--footer-nav-link-color: #ffffff;
	--footer-nav-link-hover-color: #d0d0d0;
	--footer-nav-link-active-color: #eaeaea;
}