/* styles used everywhere */

* {
  box-sizing:border-box;
}
body
{
  font-family:Verdana,"Lucida Sans",sans-serif;
}
h1
{
  color:#000080;  /* Navy Blue */
  font-size:1.25em;
}
h2
{
  font-size:1.25em;
}
h3
{
  color:#000080;  /* Navy Blue */
  font-size:1.125em;
}
h4
{
  font-size:1.125em;
}
h5
{
  font-size:1.125em;
  font-style:italic;
}
h6
{
  font-size:1.0em;
  font-style:italic;
}
p
{
  font-size:1.0em;
  padding: 0px 10px 10px 10px;
}
ol, ul
{
  list-style-position:outside;
  margin: 0;
  padding: 0 0 10px 16px;
}
li
{
  font-size:1.0em;
  padding: 12px 0px;
}
li.tight
{
  font-size:0.9375em;
  padding: 5px 0px;
}
a:link, a:visited
{
  color:#696969;
}
a:hover, a:active
{
  color:#000099;
}
img
{
  border:none;
}
hr
{
  display:block;
  margin-top:6px;
  margin-bottom:2px;
  margin-left:auto;
  margin-right:auto;
  width:70%;
  height:2px;
  border-style:none;
  background-color:#CCCCCC;
}

/* styles for key link (top 3) buttons */
.keylink {
  text-align:center;
}
a.keylink:link, a.keylink:visited {
  display:inline-block;
  font-family:Verdana,"Lucida Sans",sans-serif;
  font-size:1.0em;
  background-color:#CCCCCC;
  color:#000080;
  border:none;
  border-radius:18px;
  padding:15px 40px;
  margin:10px;
  text-decoration:none;
  min-width:220px; 
}
a.keylink:hover, a.keylink:active {
  background-color: gray;
  color: white;
}

/* styles for shipping button */
a.otherlink:link, a.otherlink:visited {
  display:inline-block;
  font-family:Georgia,Garamond,serif;
  font-size:1.125em;
  text-decoration:none;
  border:none;
  border-radius:15px;
  padding:10px 5px;
  margin:3px;
  background-color:#000080;
  color:white;
  min-width:160px;
}

/* styles for green buttons */
.popbuttons {
  text-align:center;
  padding: 10px 2px;
}
a.popularlink:link, a.popularlink:visited {
  display:inline-block;
  font-size:0.9375em;
  text-decoration:none;
  border:none;
  border-radius:10px;
  padding:8px 2px;
  margin:3px;
  background-color:#00cc66;
  color:white;
  min-width:160px;
}
a.popularlink:hover, a.popularlink:active {
  background-color:#00b359;
  color:white;
}

/* styles for the outlined and centered text like see also links */
.outlined-link p
{
text-align:center;
margin-left: 15px;
margin-right: 15px;
padding: 15px 10px;
border-radius: 25px;
border: 2px solid #CCCCCC;
}

.pre-table-centered
{
text-align:center;
padding:20px 30px 2px;
}

.pre-table-left
{
text-align:left;
padding:20px 30px 2px;
}

.iframe-container
{
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 aspect ratio */
}

.responsive-iframe
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}

/* styles used on the home page */

.toplinks 
{
text-align:center;
color: #696969;
padding:0px 10px;
font-family:Verdana,"Lucida Sans",sans-serif;
font-size:0.875em;
}
.toplinks img
{
position:relative;
top:6px;
}
.logo
{
text-align:center;
padding:10px 0px;
}
.keybutton
{
text-align:center;
}
.keybutton h1
{
color: #000080;
font-size:1.375em;
}
.keybutton p
{
color: #000000;
font-size:1.0em;
font-style:italic;
}
a.keybutton:link, a.keybutton:visited
{
display: inline-block;
background-color: #CCCCCC;
border:none;
border-radius:30px;
padding:15px 30px;
margin:8px;
text-decoration:none;
}
a.keybutton:hover, a.keybutton:active
{
background-color: #808080;
}
a.keybutton:hover h1, a.keybutton:hover p
{
color: #FFFFFF;
}
.featuredproduct
{
text-align:center;
padding:12px;
}
.featuredproduct div
{
height:100%;
padding:15px 10px;
border-radius: 25px;
border: 2px solid #CCCCCC;
}
.featuredproduct p
{
text-align:left;
}
.info
{
text-align:left;
padding:20px 40px;
}
.testimonial
{
text-align: center;
color: #696969;
padding:20px 10px;
font-size:1.0em;
font-style:italic;
}
.testimonialname
{
text-align: center;
color: #000080;
font-size:0.9375em;
font-style:italic;
}
.footer
{
text-align: center;
color: #696969;
padding:20px 10px;
font-size:0.875em;
}

/* styles used on the tool organizer page and related pages */

/* styling for the filter containers */
#fcType {
  text-align:center;
}
#fcBrand {
  text-align:center;
}
#fcWidth {
  text-align:center;
}
/* styling for type filter buttons */
.button_type {
  border:none;
  border-radius:5px;
  padding: 2px 8px;
  margin:2px;
  background-color:#0077ff;
  color:white;
  font-size:0.9375em;
  text-decoration:none;
  cursor:pointer;
  min-width:195px;
}
.button_type:hover {
  background-color:#005fcc;
}
.button_type.active {
  background-color:#000080;
  color:white;
}
/* styling for brand filter buttons */
.button_brand {
  border:none;
  border-radius:5px;
  padding: 2px 8px;
  margin:2px;
  background-color:#0077ff;
  color:white;
  font-size:0.9375em;
  text-decoration:none;
  cursor:pointer;
  min-width:185px;
}
.button_brand:hover {
  background-color:#005fcc;
}
.button_brand.active {
  background-color:#000080;
  color:white;
}
/* styling for width filter buttons */
.button_width {
  border:none;
  border-radius:5px;
  padding: 2px 8px;
  margin:2px;
  background-color:#0077ff;
  color:white;
  font-size:0.9375em;
  text-decoration:none;
  cursor:pointer;
  min-width:165px;
}
.button_width:hover {
  background-color:#005fcc;
}
.button_width.active {
  background-color:#000080;
  color: white;
}
/* styling for the back to top button */
div.fixed_br {
  position:fixed;
  bottom:0;
  right:0;
  text-align:center;
  min-width:160px;
  background-color:#cccccc;
  border:none;
  border-radius:10px;
  padding:8px 20px;
  margin:10px;
}
a.jumptop:link, a.jumptop:visited {
  text-decoration:none;
  font-size:0.9375em;
}
/* styling for the organizer list */
.organizerlist {
  overflow:hidden;
  text-align:left;
}
.tool_org {
  display:none; /* hidden at first, but script adds show class on load */
  border: 2px solid #CCCCCC;
  border-radius:25px;
  margin: 5px 20px;
}
.show {
  display:block;
}
.summary0 {
  display:block;
  padding:5px;
  text-align:center;
}
.sumflex {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start; /* controls vertical alignment */
}
.summary1 {
  display:inline-block;
  padding: 5px;
  max-width:360px;
}
.summary1 p {
  font-size:0.75em;
  font-style:italic;
  margin: 0px 20px; 10px;
}
.summary2 {
  display:inline-block;
  max-width:300px;
}
.summary2 p {
  font-size:0.875em;
  color:#000080;
  padding: 0px 10px 4px;
}
.summary3 {
  display:inline-block;
  padding: 5px;
  text-align:center;
  max-width: 200px;
}
.summary3 p {
  font-size:0.875em;
  padding: 0px 10px 4px;
}
.price {
  font-size:1.0em;
  padding: 0px 10px 4px;
}
.intro {
  text-align:left;
  padding:15px 40px 0px;
}
.intro p {
  padding: 0px 0px;
}
.badges {
  text-align:center;
  padding: 30px 10px 5px;
}
.badges p {
  font-size:0.875em;
  font-style:italic;
}
.flexpic {
  display:flex;
  justify-content:center;
  align-content:center;
  align-self:center;
  justify-self:center;
  text-align:center;
}
.detailscart {
  text-align:center;
  padding: 20px 5px;
}
.detailspic {
  text-align:center;
  padding:20px 0px;
}
.detailspic p {
  font-size:0.875em;
  font-style:italic; 
  padding:0px 0px;
  margin:0px 0px;
}
.detailshead {
  text-align:center;
  padding:5px 20px;
  margin:10px 0px;
  border-radius: 25px;
  border: 2px solid #CCCCCC;
  width: 80%;
  margin-left:auto;
  margin-right:auto;
}
.tool_list {
  padding:5px 20px;
  margin:30px 0 0 0;
  border-radius: 25px;
  background-color: #f2f2f2;
}
.tools {
  color: #000080;
  font-size:0.9375em;
  padding:0 0 0 30px;
}
.toolboxdiag {
  text-align:center;
  padding:30px 10px;
}
.organizertable {
  overflow-x:auto;
}
.organizertable table {
  border-collapse: collapse;
  border-style: none;
  margin-left:auto;
  margin-right:auto;
  margin-top:20px;
  margin-bottom:10px;
}
.organizertable th, td {
  border-collapse: collapse;
  border: 1px solid #C8C8C8;
  padding: 10px;
  text-align: center;
  font-size:0.875em;
}
.organizertable td:nth-child(1) {
  text-align: left;
}
.organizertable td:nth-child(3) {
  width: 150px;
}
.organizertable tr {
  min-height: 25px;
}
.eraseborder {
  border-top-style: none;
  border-bottom-style: none;
  border-right-style: none;
  border-left-style: none;
}
.partnumbercell {
  min-width: 100px;
}
.gray {
  background-color: #D9D9D9;
}
.green {
  background-color: #EBF1DE;
}
.blue {
  background-color: #DAEEF3;
}
.red {
  background-color: #F2DCDB;
}
.orange {
  background-color: #FDE9D9;
}
a.drawing:link, a.drawing:visited
{
  display: inline-block;
  background-color: #CCCCCC;
  border:none;
  border-radius:20px;
  padding:15px 30px;
  margin:8px;
  text-decoration:none;
}
a.drawing:hover, a.drawing:active
{
  background-color: #808080;
}
a.collection:link, a.collection:visited
{
  display:inline-block;
  text-decoration:none;
  border:none;
  border-radius:20px;
  padding:15px 30px;
  margin:8px;
  background-color:#00cc66;
  color:white;
  min-width:160px;
}
a.collection:hover, a.collection:active
{
  background-color:#00b359;
  color:white;
}
/* grid area names for home, tool organizers, legacy organizers */

.item1 { grid-area: TLK; }
.item2 { grid-area: LGO; }
.item3 { grid-area: B_B; }
.item4 { grid-area: B_T; }
.item5 { grid-area: B_K; }
.item6 { grid-area: FP1; }
.item7 { grid-area: FP2; }
.item8 { grid-area: FP3; }
.item9 { grid-area: FP4; }
.item10 { grid-area: FP5; }
.item11 { grid-area: FP6; }
.item12 { grid-area: BEN; }
.item13 { grid-area: CST; }
.item14 { grid-area: TST; }
.item15 { grid-area: BLK; }
.empty-area1 { grid-area: aaa; background-color: #ffffff; }
.empty-area2 { grid-area: bbb; background-color: #ffffff; }
.empty-area3 { grid-area: ccc; background-color: #ffffff; }
.empty-area4 { grid-area: ddd; background-color: #ffffff; }
.area3-organizers { grid-area: KLK; }
.area4-organizers { grid-area: TX1; }
.area5-organizers { grid-area: TX2; }
.area6-organizers { grid-area: TX3; }
.area7-organizers { grid-area: FB1; }
.area8-organizers { grid-area: FB2; }
.area9-organizers { grid-area: FB3; }
.area10-organizers { grid-area: FB4; }
.area11-organizers { grid-area: T_O; }
.area7-sets { grid-area: TK1; }
.area8-sets { grid-area: HK1; }
.area9-sets { grid-area: CK1; }
.area10-sets { grid-area: CK2; }
.area11-sets { grid-area: CK3; }
.area5-setL { grid-area: SL1; }
.area6-setL { grid-area: SV1; }
.area7-setL { grid-area: SL2; }
.area8-setL { grid-area: SV2; }
.area9-setL { grid-area: SL3; }
.area10-setL { grid-area: SV3; }
.area11-setL { grid-area: SL4; }
.area12-setL { grid-area: SV4; }
.area13-setL { grid-area: SL5; }
.area14-setL { grid-area: SV5; }
.area15-setL { grid-area: SL6; }
.area16-setL { grid-area: SV6; }
.area17-setL { grid-area: SL7; }
.area18-setL { grid-area: SV7; }
.area19-setL { grid-area: SL8; }
.area20-setL { grid-area: SV8; }
.area21-setL { grid-area: SL9; }
.area22-setL { grid-area: SV9; }
.area23-setL { grid-area: SLX; }
.area24-setL { grid-area: SVX; }
.area25-setL { grid-area: SLY; }
.area26-setL { grid-area: SVY; }
.area4-setC { grid-area: HSH; }
.area5-setC { grid-area: TAB; }
.area6-setC { grid-area: PAR; }
.area7-setC { grid-area: VID; }
.area8-setC { grid-area: MOR; }
.area7-pic { grid-area: IM1; }
.area8-pic { grid-area: IM2; }
.area9-pic { grid-area: IM3; }
.area10-pic { grid-area: IM4; }
.area11-pic { grid-area: IM5; }
.area4-details { grid-area: NAM; }
.area5-details { grid-area: OVE; }
.area6-details { grid-area: CRT; }
.area7-details { grid-area: OP1; }
.area8-details { grid-area: OP2; }
.area9-details { grid-area: TL1; }
.area10-details { grid-area: TL2; }
.area11-details { grid-area: SPE; }
.area12-details { grid-area: FAB; }
.area13-details { grid-area: BGS; }
.area8-groups { grid-area: DIA; }
.area9-groups { grid-area: TBL; }

/* grid layouts for important pages */

.grid-container {
  display: grid;
  justify-content: center;
  background-color: #ffffff;
  column-gap: 0px;
  row-gap: 0px;
  grid-template-columns: minmax(380px, auto);
}
.homepg {
  grid-template-areas:
    'TLK'
    'LGO'
    'B_B'
    'B_T'
    'B_K'
    'FP1'
    'FP2'
    'FP3'
    'BEN'
    'CST'
    'TST'
    'BLK';
}
.toolorgpg {
  grid-template-areas:
    'TLK'
    'LGO'
    'KLK'
    'TX1'
    'TX2'
    'TX3'
    'FB1'
    'FB2'
    'FB3'
    'FB4'
    'T_O'
    'BLK';
}
.keysetspg {
  grid-template-areas:
    'TLK'
    'LGO'
    'KLK'
    'TX1'
    'TX2'
    'TX3'
    'TK1'
    'HK1'
    'CK1'
    'CK2'
    'CK3'
    'IM1'
    'IM2'
    'IM3'
    'IM4'
    'IM5'
    'BLK';
}
.keysetLpg {
  grid-template-areas:
    'TLK'
    'LGO'
    'KLK'
    'HSH'
    'SL1'
    'SV1'
    'SL2'
    'SV2'
    'SL3'
    'SV3'
    'SL4'
    'SV4'
    'SL5'
    'SV5'
    'SL6'
    'SV6'
    'SL7'
    'SV7'
    'SL8'
    'SV8'
    'SL9'
    'SV9'
    'SLX'
    'SVX'
    'SLY'
    'SVY'
    'MOR'
    'BLK';
}
.keysetCpg {
  grid-template-areas:
    'TLK'
    'LGO'
    'KLK'
    'HSH'
    'TAB'
    'PAR'
    'VID'
    'MOR'
    'BLK';
}
.detailspg {
  grid-template-areas:
    'TLK'
    'LGO'
    'KLK'
    'NAM'
    'OP1'
    'OVE'
    'CRT'
    'OP2'
    'TL1'
    'TL2'
    'SPE'
    'FAB'
    'BGS'
    'BLK';
}
.groupdetailspg {
  grid-template-areas:
    'TLK'
    'LGO'
    'KLK'
    'NAM'
    'OP1'
    'OVE'
    'TBL'
    'DIA'
    'SPE'
    'BGS'
    'BLK';
}


@media only screen and (min-width: 760px) {
  .grid-container {
    display: grid;
    justify-content: center;
    background-color: #ffffff;
    column-gap: 0px;
    row-gap: 0px;
    grid-template-columns: repeat(4, minmax(190px, 285px));
  }
  .homepg {
    grid-template-areas:
      'TLK TLK TLK TLK'
      'LGO LGO LGO LGO'
      'B_B B_B B_T B_T'
      'aaa B_K B_K bbb'
      'FP1 FP1 FP2 FP2'
      'ccc FP3 FP3 ddd'
      'BEN BEN BEN BEN'
      'CST CST CST CST'
      'TST TST TST TST'
      'BLK BLK BLK BLK';
  }
  .toolorgpg {
    grid-template-areas:
      'TLK TLK TLK TLK'
      'LGO LGO LGO LGO'
      'KLK KLK KLK KLK'
      'TX2 TX1 TX1 TX3'
      'FB1 FB1 FB2 FB2'
      'FB3 FB3 FB4 FB4'
      'T_O T_O T_O T_O'
      'BLK BLK BLK BLK';
  }
  .keysetspg {
    grid-template-areas:
      'TLK TLK TLK TLK'
      'LGO LGO LGO LGO'
      'KLK KLK KLK KLK'
      'TX2 TX1 TX1 TX3'
      'TK1 TK1 IM1 IM1'
      'IM2 IM2 HK1 HK1'
      'CK1 CK1 IM3 IM3'
      'IM4 IM4 CK2 CK2'
      'CK3 CK3 IM5 IM5'
      'BLK BLK BLK BLK';
  }
  .keysetLpg {
    grid-template-areas:
      'TLK TLK TLK TLK'
      'LGO LGO LGO LGO'
      'KLK KLK KLK KLK'
      'HSH HSH HSH HSH'
      'SL1 SL1 SL2 SL2'
      'SV1 SV1 SV2 SV2'
      'SL3 SL3 SL4 SL4'
      'SV3 SV3 SV4 SV4'
      'SL5 SL5 SL6 SL6'
      'SV5 SV5 SV6 SV6'
      'SL7 SL7 SL8 SL8'
      'SV7 SV7 SV8 SV8'
      'SL9 SL9 SLX SLX'
      'SV9 SV9 SVX SVX'
      ' .  SLY SLY  . '
      ' .  SVY SVY  . '
      'MOR MOR MOR MOR'
      'BLK BLK BLK BLK';
  }
  .keysetCpg {
    grid-template-areas:
      'TLK TLK TLK TLK'
      'LGO LGO LGO LGO'
      'KLK KLK KLK KLK'
      'HSH HSH HSH HSH'
      'TAB TAB TAB TAB'
      'PAR PAR MOR MOR'
      'VID VID VID  . '
      'BLK BLK BLK BLK';
  }
  .detailspg {
    grid-template-areas:
      'TLK TLK TLK TLK'
      'LGO LGO LGO LGO'
      'KLK KLK KLK KLK'
      'NAM NAM NAM NAM'
      'OVE OP1 OP1 CRT'
      'OP2 OP2 TL1 TL1'
      'TL2 TL2 TL1 TL1'
      'SPE SPE FAB FAB'
      'BGS BGS BGS BGS'
      'BLK BLK BLK BLK';
  }
  .groupdetailspg {
    grid-template-areas:
      'TLK TLK TLK TLK'
      'LGO LGO LGO LGO'
      'KLK KLK KLK KLK'
      'NAM NAM NAM NAM'
      'OVE OVE OP1 OP1'
      'TBL TBL TBL TBL'
      ' .  DIA DIA  . '
      'SPE SPE SPE  . '
      'BGS BGS BGS BGS'
      'BLK BLK BLK BLK';
  }
}

@media only screen and (min-width: 1140px) {
  .grid-container {
    display: grid;
    justify-content: center;
    background-color: #ffffff;
    column-gap: 0px;
    row-gap: 0px;
    grid-template-columns: repeat(6, minmax(190px, 250px));
  }
  .homepg {
    grid-template-areas:
      'TLK TLK TLK TLK TLK TLK'
      'LGO LGO LGO LGO LGO LGO'
      'B_B B_B B_T B_T B_K B_K'
      'FP1 FP1 FP2 FP2 FP3 FP3'
      'BEN BEN BEN CST CST CST'
      'aaa TST TST TST TST bbb'
      'BLK BLK BLK BLK BLK BLK';
  }
  .toolorgpg {
    grid-template-areas:
      'TLK TLK TLK TLK TLK TLK'
      'LGO LGO LGO LGO LGO LGO'
      'KLK KLK KLK KLK KLK KLK'
      'TX2 TX2 TX1 TX1 TX3 FB4'
      'FB1 FB1 FB3 FB2 FB2 FB4'
      'FB1 FB1 FB3 FB2 FB2 FB4'
      'aaa T_O T_O T_O T_O bbb'
      'BLK BLK BLK BLK BLK BLK';
  }
  .keysetspg {
    grid-template-areas:
      'TLK TLK TLK TLK TLK TLK'
      'LGO LGO LGO LGO LGO LGO'
      'KLK KLK KLK KLK KLK KLK'
      'aaa TX2 TX1 TX1 TX3 bbb'
      'aaa TK1 TK1 IM1 IM1 bbb'
      'aaa IM2 IM2 HK1 HK1 bbb'
      'aaa CK1 CK1 IM3 IM3 bbb'
      'aaa IM4 IM4 CK2 CK2 bbb'
      'aaa CK3 CK3 IM5 IM5 bbb'
      'BLK BLK BLK BLK BLK BLK';
  }
  .keysetLpg {
    grid-template-areas:
      'TLK TLK TLK TLK TLK TLK'
      'LGO LGO LGO LGO LGO LGO'
      'KLK KLK KLK KLK KLK KLK'
      ' .  HSH HSH HSH HSH  . '
      'SL1 SL1 SL2 SL2 SL3 SL3'
      'SV1 SV1 SV2 SV2 SV3 SV3'
      'SL4 SL4 SL5 SL5 SL6 SL6'
      'SV4 SV4 SV5 SV5 SV6 SV6'
      'SL7 SL7 SL8 SL8 SL9 SL9'
      'SV7 SV7 SV8 SV8 SV9 SV9'
      ' .  SLX SLX SLY SLY  . '
      ' .  SVX SVX SVY SVY  . '
      ' .  MOR MOR MOR MOR  . '
      'BLK BLK BLK BLK BLK BLK';
  }
  .keysetCpg {
    grid-template-areas:
      'TLK TLK TLK TLK TLK TLK'
      'LGO LGO LGO LGO LGO LGO'
      'KLK KLK KLK KLK KLK KLK'
      ' .  HSH HSH HSH HSH  . '
      'TAB TAB TAB TAB TAB TAB'
      ' .  PAR PAR MOR MOR  . '
      ' .  VID VID MOR MOR  . '
      'BLK BLK BLK BLK BLK BLK';
  }
  .detailspg {
    grid-template-areas:
      'TLK TLK TLK TLK TLK TLK'
      'LGO LGO LGO LGO LGO LGO'
      'KLK KLK KLK KLK KLK KLK'
      'NAM NAM NAM NAM NAM NAM'
      'OVE OVE OP1 OP1 CRT CRT'
      'OP2 OP2 OP2 TL1 TL1 TL1'
      'TL2 TL2 TL2 TL1 TL1 TL1'
      'SPE SPE SPE FAB FAB FAB'
      ' .  BGS BGS BGS BGS  . '
      'BLK BLK BLK BLK BLK BLK';
  }
  .groupdetailspg {
    grid-template-areas:
      'TLK TLK TLK TLK TLK TLK'
      'LGO LGO LGO LGO LGO LGO'
      'KLK KLK KLK KLK KLK KLK'
      'NAM NAM NAM NAM NAM NAM'
      ' .  OVE OVE OP1 OP1  . '
      'TBL TBL TBL TBL TBL TBL'
      'SPE SPE SPE SPE DIA DIA'
      ' .  BGS BGS BGS BGS  . '
      'BLK BLK BLK BLK BLK BLK';
  }
}