/*4 version  24th June 2025*/

body{
  max-width:960px; /*background-color: #E0E0E0;*/
  margin-left:auto;
  margin-right:auto;
}
/*general button control*/
.top-common{
  margin-left:auto;
  margin-right:auto;
  background-color: #bfbfbf;
  padding:none;
  border:none;
  margin:none;
}
.lightup a{
  text-decoration:none;
  color: #000;
  font-weight:bolder;
  padding:5px;
  border:none;
  margin:10px;
}
.lightup a:hover{
  background-color:#fff;
}
/* general button control end */

.keepcenter{
  text-align: center;
}
.keepleft{
  text-align: left;
}
.keepright{
  text-align: right;
}
     /*bgound page colors set in menus*/ 
.colors1{
  background-color: #ffc6a5;
} 
.colors2{
  background-color: #ffffc6;
}
.colors3{
  background-color: #bdc6de;
}
.colors4{
  background-color: #c6e7de;
}
.colors5{
  background-color: #e0e0e0;
}
.videocolor{
  background-color: #ffb573;
} 
.maincolor{
  background-color: #bfbfbf;
}
.accescolor{
  background-color: #00cc99;
}
.toolcolor{
  background-color: #d6c610;
}
.partcolor{
  background-color: #9c7bbd;
}
.standout{
  font-weight:bolder; 
}
/* text control */
.par1 {
  /*text-align: center;*/
  color: maroon;
}

.par2 {
  font-style: italic;
  color: maroon;
}
/*breadcrumb b/ground try-out only breadcrumb works but on all*/
.breadcrumb{
  background-color: #bfbfbf;
  font-weight:bolder;
}
.breadcrumb tools{
  background-color: #d6c610;
  font-weight:bolder;
}
.tools{
  background-color: #d6c610;
  font-weight:bolder;
}

/* BUTTON CONTROLS AND PAGE LAYOUT FOR EACH HEADER */

.videobutton a{
  text-decoration: none;
  color:#000;
  font-weight: bolder;
  padding: 5px;
  border: none;
  margin: 10px;
}
.videobutton a:hover{
  background-color: #fff;
  color: #ffb573;
}
.videopage{
 /* margin-left: auto;*/
  margin-right: auto;
  background-color: #ffb573;
  padding: none;
  border: none;
  margin: none;
}
/*text sizing*/
@media screen and (max-width: 800px){
  .TR6page{
    font-size:12px
  }
}

.mainbutton a{
  text-decoration: none;
  color: #000;
  font-weight: bolder;
  padding: 5px;
  border: none;
  margin: 10px;
}
/*.diapage.minibutton a{
  margin: 0px;
}*/
.mainbutton a:hover{
  background-color:#fff;
  color:#bfbfbf;
}

.mainpage{
 /* margin-left: auto;*/
  margin-right: auto;
  background-color: #bfbfbf;
  padding: none;
  border: none;
  margin: none;
}
/*text sizing*/
@media screen and (max-width: 800px){
  .minipage{
    font-size:12px
  }
}

.accesbutton a{
  text-decoration: none;
  color: #000;
  font-weight: bolder;
  padding: 5px;
  border: none;
  margin: 10px
}

.accesbutton a:hover{
  background-color:#fff;
  color: #00cc99;
}

.accespage{
 /* margin-left: auto;*/
  margin-right: auto;
  background-color: #00cc99;
  padding: none;
  border: none;
  margin: none;
}
/*text sizing*/
@media screen and (max-width: 800px){
  .MGBpage{
    font-size:12px
  }
}

.toolbutton a{
  text-decoration: none;
  color: #000;
  font-weight: bolder;
  padding: 5px;
  border: none;
  margin: 10px;
}

.toolbutton a:hover{
  background-color: #fff;
  color: #d6c610;
}
.toolpage{
 /* margin-left: auto;*/
  margin-right: auto;
  background-color: #d6c610;
  padding: none;
  border: none;
  margin: none;
}
/*text sizing*/
@media screen and (max-width: 800px){
  .midgetpage{
    font-size:12px
  }
}

.partbutton a{
  text-decoration: none;
  color: #000;
  font-weight: bolder;
  padding: 5px;
  border: none;
  margin: 10px;
}

.partbutton a:hover{
  background-color: #fff;
  color: #9c7bbd;
}
.partpage{
 /* margin-left: auto;*/
  margin-right: auto;
  background-color: #9c7bbd;
  padding: none;
  border: none;
  margin: none;
}
/*text sizing*/
@media screen and (max-width: 800px){
  .spitfirepage{
    font-size:12px
  }
}
.memberbutton a{
  text-decoration: none;
  color: #000;
  font-weight: bolder;
  padding: 5px;
  border: none;
  margin: 10px;
}

.memberbutton a:hover{
  background-color: #fff;
  color: #94d6e7;
}
.memberpage{
 /* margin-left: auto;*/
  margin-right: auto;
  background-color: #94d6e7;
  padding: none;
  border: none;
  margin: none;
}
/*text sizing*/
@media screen and (max-width: 800px){
  .memberpage{
    font-size:12px
  }
}
/* BUTTON AND PAGE CONTROLS ON HEADER ENDING */
/* catagory links */
/* MAIN */
.main-common{
  margin-left:auto;
  margin-right:auto;
  background-color: #94d6e7;
  padding:none;
  border:none;
  margin:none;
}
.maincat a{
  text-decoration:none;
  color: #000;
  font-weight:bolder;
  font-size: 125%;
  padding:5px;
  border:none;
  margin:20px;
}
.maincat a:hover{
  background-color:#fff;
 } 
/* TOOLS */
.tool-common{
  margin-left:auto;
  margin-right:auto;
  background-color: #d6c610;
  padding:none;
  border:none;
  margin:none;
}
.toolcat a{
  text-decoration:none;
  color: #000;
  font-weight:bolder;
  font-size: 125%;
  padding:5px;
  border:none;
  margin:20px;
}
.toolcat a:hover{
  background-color:#fff;
 } 
/* Accessories */
 .acces-common{
  margin-left:auto;
  margin-right:auto;
  background-color: #00cc99;
  padding:none;
  border:none;
  margin:none;
}
.accescat a{
  text-decoration:none;
  color: #000;
  font-weight:bolder;
  font-size: 125%;
  padding:5px;
  border:none;
  margin:20px;
}
.accescat a:hover{
  background-color:#fff;
 }
  /* Video */
 .video-common{
  margin-left:auto;
  margin-right:auto;
  background-color: #ffb573;
  padding:none;
  border:none;
  margin:none;
}
.videocat a{
  text-decoration:none;
  color: #000;
  font-weight:bolder;
  font-size: 125%;
  padding:5px;
  border:none;
  margin:20px;
}
.videocat a:hover{
  background-color:#fff;
 }
  /* Parts */
 .part-common{
  margin-left:auto;
  margin-right:auto;
  background-color: #9c7bbd;
  padding:none;
  border:none;
  margin:none;
}
.partcat a{
  text-decoration:none;
  color: #000;
  font-weight:bolder;
  font-size: 125%;
  padding:5px;
  border:none;
  margin:20px;
}
.partcat a:hover{
  background-color:#fff;
 }
  /* Members */
 .member-common{
  margin-left:auto;
  margin-right:auto;
  background-color: #94d6e7;
  padding:none;
  border:none;
  margin:none;
}
.membercat a{
  text-decoration:none;
  color: #000;
  font-weight:bolder;
  font-size: 125%;
  padding:5px;
  border:none;
  margin:20px;
}
.membercat a:hover{
  background-color:#fff;
 }
/* Catagory end */

/* sets the page for the article J2commerce display */

/*.toolpartpage { text-align: center;
} */
.tooldiv { width: 85%; 
	padding: 10px;
	margin: 10px auto 10px auto;
    text-align: center;       
}
.p { width: 75%;
	padding: 10px;
	border: 0px solid #000;
 }
.textbox{
  text-align: left;
  margin-left: 25px;
  margin-right: 25px;
}

/*Drop-down Menu */
/* Dropdown Button Parts ver */
.dropbtn {
  background-color: #9c7bbd;
  color: 000;
  padding: 5px;
  font-size: 14px;
  border: none;
  text-align: center;
}
/*Member version bkcolor*/
.dropMem {
  background-color: #c6eff7;
  color: 000;
  padding: 5px;
  font-size: 14px;
  border: none;
  text-align: center;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 110px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 5px 5px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #E0E0E0;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #fff;}
.dropdown:hover .dropMem {background-color: #fff;}

/* Drop-down menu ending */

/* Possible use for parts pop-up window */ 

/* This seems to set the target for the html to open the window 
   think this is from a previous effort and not being used */
/* modal window set up */

.modal-window {
  position: fixed;

  background-color: rgba(200, 200, 200, 0.75);
  margin: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
} 

/* This seems to set the target for the html to open the window */

.modal-window:target {
  opacity: 1;
  pointer-events: auto;
  overflow: scroll;
}

/* This seems to set the size and where the pop-up is related to the div that a table is residing inside*/

.modal-window > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 2rem;
}

/* We have different colors on each section MGB, Triumph etc. so this sets the BG color for the pop-up */

.TR6.modal-window > div{
  background-color: #ffb573;
  color: #000;
}

/* theses are to control the different elements linked by HTML */

.modal-window h1 {
  font-size: 100%;
  margin: 0 0 10px;
  text-align: center;
}
.modal-window img {
  padding-top: 10px;
  padding-bottom: 10px;
  align-content: center;
}
.modal-window button{
  margin-right: 20px;
}

.modal-close{
  color: #000;
  line-height: 25px;
  font-size: 120%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
} 

/* again this is for color control of the close button */ 

.TR6.modal-close:hover{
  color: #ffb573;
  background-color: #fff;
}