/* ---------------------------------------------------- */
/*   GREG'S CYCLE LTD - DESKTOP VERSION  */
/* ---------------------------------------------------- */
body {
  background-color: #000000;
  background-image: url(blkback.png);
  background-repeat: repeat;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

html {
  height: 100%;
}

/* LINKS */
a:link {
  color: #FFCC00;
  font-weight: bold;
  text-decoration: none;
}
a:visited {
  color: #FFCC00;
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  color: #FFFFFF;
  font-weight: bold;
}

a:link.specsLink {
  color: #FFFFFF;
  font-weight: bold;
}
a:visited.specsLink {
  color: #FFFFFF;
  font-weight: bold;
}
a:hover.specsLink {
  color: #FFCC00;
  font-weight: bold;
}

a:link.main1 {
  color: #660000;
  text-decoration: none;
}
a:visited.main1 {
  color: #660000;
  text-decoration: none;
}
a:hover.main1 {
  color: #FFFFFF;
}

a:link.onw {
  color: red;
}
a:visited.onw {
  color: red;
}
a:hover.onw {
  color: black;
}
/* ----- END LINKS ----- */

.home {
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 100%;
}

.top { /* page header images - logo etc */
  color: #FFCC00;
  padding: 0;
  text-align: center;
}

.imgLeft { /* aka left header image */
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  width: 25%;
}
  .imgLeft img {
    width: 100%;
  }

.logo { /* aka middle header image - the logo */
  left: 25%;
  position: relative;
  right: 25%;
  top: 0;
  width: 48%;
}
  .logo img {
    width: 90%;
  }

.clock { /* aka right header image */
  position: absolute;
  right: 0;
  top: 0;
  width: 25%;
}
  .clock img {
    width: 100%;
  }

/*+++++++++++++++++++++++++++++++
NEW MENU - 2021
- - elements named "right"Menu etc despite
- - this menu actually being left-aligned
- - because I was too lazy to rename them
++++++++++++++++++++++++++++++++*/
.header {
  left: 0;
  max-width: 100%;
  position: relative;
  top: -55px;
  width: 50%;
  z-index: 100;
}
/*#rightMenu {
  height: 100%;
  left: 0;
  margin-top: 45px;
  position: absolute;
  transform: translateX(-148px);
  transition: transform 250ms ease-in-out;
  width: 148px;
}*/
#rightMenu { /* desktop version - static menu */
  font-size: 0.9em;
  height: 100%;
  left: 0;
  margin-top: 45px;
  position: absolute;
  width: 148px;
}
.rightMenuInner {
  padding-left: 0;
  text-align: left;
}
.rightMenuInner li {
  background-image: url(blkback.png);
  background-repeat: repeat;
  border: solid #FFCC00 1px;
  list-style: none;
  text-align: left;
}
.rightMenuCurrent {
  background-image: url(barback.png);
  background-repeat: repeat;
  border-bottom: solid #FFCC00 1px;
  border-left: solid #FFCC00 5px;
  border-right: solid #FFCC00 5px;
  border-top: solid #FFCC00 1px;
  color: white;
  font-weight: bold;
  list-style: none;
  padding-bottom: 5px;
  padding-top: 5px;    
  text-align: center;
  text-decoration: none;
}
.rightMenuInner a:link {
  color: #FFCC00;
  display: block;
  font-weight: bold;
  padding-bottom: 10px;
  padding-left: 5px;
  padding-top: 10px;
  width: 128px;
}
.rightMenuInner a:hover {
  background-image: url(barback.png);
  background-repeat: repeat;
  border-left: solid #FFCC00 5px;
  border-right: solid #FFCC00 5px;
  color: white;
  font-weight: bold;
  padding-left: 10px;
  text-align: left;
  text-transform: uppercase;
}
.rightMenuInner li span{
  display: block;
}
input[type="checkbox"]:checked ~ #rightMenu {
  transform: translateX(0);
}
input[type=checkbox] {
  box-sizing: border-box;
  display: none;
  transition: all 0.3s;
}
.menuToggle {
  box-sizing: content-box; /* orig = border-box */
  cursor: pointer;
  height: 32px;
  left: -220px; /* for desktop version - move toggle offscreen */
  padding: 4px 4px 0 4px;
  position: absolute;
  top: 16px; /* orig = 20px */
  transition: all 0.3s;
  width: 32px;
  z-index: 99;
}
.spinner {
  background-color: #FFFFFF;
  box-sizing: border-box; /* orig = border-box */
  height: 3px;
  position: absolute;
  transition: all 0.3s;
  width: 100%;
}
.horizontal {
  box-sizing: border-box;
  float: left;
  margin-top: 3px;
  position: relative;
  transition: all 0.3s;
}
.diagonal.part-1 {
  box-sizing: border-box;
  float: left;
  position: relative;
  transition: all 0.3s;
}
.diagonal.part-2 {
  box-sizing: border-box;
  float: left;
  margin-top: 3px;
  position: relative;
  transition: all 0.3s;
}
input[type=checkbox]:checked ~ .menuToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .menuToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px; /* orig = 8px */
}
input[type=checkbox]:checked ~ .menuToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px; /* orig = -9px */
}
/*++++++ END MENU +++++++*/

.topBar {
  background-color:#990000;
  background-image: url(barback.png);
  background-repeat: repeat;
  border-color: #FFCC00;
  border-top: solid 4px #FFCC00;
  border-bottom: solid 4px #FFCC00;
  color: #FFCC00;
  font-weight: bold;
  overflow: auto;
  padding-bottom: 3px;
  padding-top: 3px;
  text-align: center;
}

.main {
  margin: 0 auto;
  padding: 4px 0 0 0;
  position: relative;
  text-align: center;
  width: 100%;
}

.mainWhitePS {
  background-color: #FFFFFF;
  font-size: 1em;
  margin: 0 auto;
  padding: 0px;
  text-align: center;
  width: 60%;
}

.community { /* text comment top of page */
  font-style: italic;
  font-weight: bold;
  padding-left: 10px;
  padding-right: 10px;
}

.contact {
  float: right;
  background-color: #CC9900;
  border: 1px #FFCC00 solid;
  font-size: 0.8em;
  /*background-image: url(images/greg.jpg);
  background-repeat: no-repeat;*/
  overflow: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 5px;
  width: 148px;
  z-index: 150;
}
  .contact img {
    left: 0;
    position: relative;
    text-align: center;
    top: 0;
    width: 100%;
  }

.whiteUnder {
  color: white;
  font-weight: bold;
}

ul.check1 {
  list-style: none;
}
ul.check1 li {
  background: url(images/check.gif) 0 0 no-repeat;
  overflow: hidden;
  padding-left: 25px;
  text-align: left;
}

ul.wcheck {
  list-style:none;
  margin-left: -35px;
  margin-top: 0px;
  text-align: left;
}
ul.wcheck li {
  background: url(images/check.gif) no-repeat;
  color: white;
  padding-left: 15px;
}

ul.rcheck {
  list-style: none;
}
.rcheck li::before {
  color: #FFCC00;
  content: '•';
  display: inline-block;
  margin-left: -1em;
  width: 1em;
}

.redBar { /* bars above & below pitstop */
  background-image: url(barback.png);
  background-repeat: repeat;
  height: 10px; 
  position: relative;
  top: 10px;
  z-index: 100;
}

.redBar2 { /* bars below business hours */
  background-image: url(barback.png);
  background-repeat: repeat;
  height: 10px;
  position: relative;
  top: 0;
  z-index: 120;
}

.gregs { /* home page black box */
  background-image: url(blkback.png);
  background-repeat: repeat;
  border: 2px solid #CC9900;
  color: #FFFFFF;
  margin: 0 auto;
  overflow: auto;
  padding: 5px;;
  text-align: center;
  width: 75%;
}

.specials { /* home page red box */
  background-image: url(barback.png);
  background-repeat: repeat;
  border: 2px solid #CC9900;
  color: #FFFFFF;
  margin: 0 auto;
  overflow: auto;
  padding: 2px;
  text-align: center;
  width: 40%
}

.premiere { /* page comment box */
  clear: both;
  font-size: 0.9em;
  font-weight: bold;
  padding: 10px 0 10px 0;
  position: relative;
  text-align: center;
  top: 10px;
  width: 100%;
}

.pitStop { /* yellow background box */
  background-color: #FFCC00;
  font-weight: bold;
  font-size: 0.9em;
  margin: 0 auto;
  overflow: auto;
  padding: 5px 0 5px 0;
  position: relative;
  top: 10px;
  width: 100%;
}

.hours { /* business hours */
  background-image: url(images/shop.jpg);
  background-position: right center;
  background-repeat: no-repeat;
  font-size: 0.8em;
  margin: 0 auto;
  padding: 8px 0 0 8px;
  position: relative;
  text-align: left;
  top: 10px;
}

.navBottom {
  background-color: #CC9900;
  font-weight: bold;
  font-size: 0.9em;
  margin: 0 auto;
  padding: 4px 0 5px 0;
}

.specs { /* red brand specs box motorcycles page */
  background-image: url(barback.png);
  background-repeat: repeat;
  border:2px solid black;
  color: #FFFFFF;
  font-size: 0.9em;
  margin: 0 auto;
  overflow: auto;
  padding-top: 2px;
  position: relative;
  text-align: center;
  top: 15px;
  width: 90%;
}

.blkBoxes { /* black boxes in specs */
  background-color: #000000;
  border: 1px solid white;
  display: inline-block;
  margin-bottom: 5px;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 5px;
  padding-bottom: 3px;
  padding-top: 3px;
  width: 23%;
}

.brochures { /* black brochures box motorcycles page */
  background-image: url(blkback.png);
  background-repeat: repeat;
  border: solid black 2px;
  color: #FFFFFF;
  font-size: 0.9em;
  margin: 0 auto;
  overflow: auto;
  padding-top: 2px;
  position: relative;
  text-align: center;
  top: 30px;
  width: 90%;
}

.redBoxes { /* red boxes in brochures */
  background-color: #990000;
  border: 1px solid white;
  display: inline-block;
  margin-bottom: 5px;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 5px;
  padding-bottom: 3px;
  padding-top: 3px;
  width: 23%;
}

.specsParts { /* red parts list box parts page */
  background-image: url(barback.png);
  background-repeat: repeat;
  border:2px solid black;
  color: #FFFFFF;
  font-size: 0.9em;
  margin: 0 auto;
  overflow: auto;
  padding: 2px;
  text-align: center;
  width: 90%;
}

.blkBoxesParts { /* black 3 parts lists in specsParts */
  background-color: #000000;
  border: 1px solid white;
  display: inline-block;
  font-size: 0.8em;
  margin: 5px;
  padding: 3px;
  text-align: left;
  vertical-align: top;
  width: 28%;
}

.blkBoxCZparts { /* parts page black box */
  background-color: #000000;
  border: 1px solid white;
  display: block;
  font-size: 0.9em;
  margin: 0 auto;
  padding: 5px;
  text-align: left;
  width: 85%;
}

.partsPics {
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
}
  .partsPics img {
    border: solid black 3px;
  }

.blkGold { /* repairs box */
  background-image: url(blkback.png);
  background-repeat: repeat;
  border: 2px solid #CC9900;
  color: #FFFFFF;
  font-size: 1em;
  font-weight: bold;
  margin: 0 auto;
  overflow: auto;
  padding: 5px;
  text-align: center;
  width: 85%;
}

.boxLeft { /* left box repairs page */
  background-image: url(images/engine1b.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  border: 1px solid #CC9900;
  display: inline-block;
  height: 100px;
  margin-left: -10px;
  padding: 2px;
  vertical-align: baseline;
  width: 20%;
}

.repairs { /* middle list of repairs */
  display: inline-block;
  padding: 0;
  margin: 0 auto;
  overflow: auto;
  text-align: left;
  width: 50%;
}

.boxRight { /* right box repairs page */
  background-image: url(images/engine2a.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  border: 1px solid #CC9900;
  display: inline-block;
  height: 100px;
  margin-right: -10px;
  padding: 2px;
  vertical-align: baseline;
  width: 20%;
}

.services {
  background-image: url(blkback.png);
  background-repeat: repeat;
  border: 2px solid #CC9900;
  color: #FFFFFF;
  font-size: 0.9em;
  margin: 0 auto;
  overflow: auto;
  padding: 2px;
  width: 90%;
}

.blkRed1 {  /* custom */
  background-color: #000000;
  border:1px solid #FF0000;
  color: #FFCC00;
  display: inline-block;
  margin-top: 8px;
  overflow: auto;
  padding: 2px;
  vertical-align: top;
  width: 32%;
}

.welding {
  background-image: url(barback.png);
  background-repeat: repeat;
  border: 2px solid #000000;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 0.9em;
  margin: 0 auto;
  padding: 2px;
  width: 90%;
}

.weldImg { /* Welding samples */
  color: #FFCC00;
  display: inline-block;
  margin-top: 5px;
  padding: 3px;
  vertical-align: top;
  width: 30%;
}

/* ----- HISTORY PAGE TABLE ----- */

.wTable {
  border: 1px solid black;
  display: table;
  margin: 0 auto;
  width: 90%;
}

.wTrow { /* white row */
  display: table-row;
}

.rYears { /* left cell -TOP */
  color: red;
  display: table-cell;
  font-size: 1em;
  font-weight: bold;
  padding-bottom: 5px;
  padding-top: 5px;
  width: 15%;
}

.wTcellM { /* middle cell */
  display: table-cell;
  padding: 5px 0 5px 0;
  width: 20%;
}

.rMake { /* right cell - TOP */
   color: red;
  display: table-cell;
  font-size: 1em;
  font-weight: bold;
  padding-bottom: 5px;
  padding-top: 5px;
  width: 65%;
}

.gTrow { /*grey row*/
  background-color: #CCCCCC;
  display: table-row;
}

.wTcellL { /* left cell */
  display: table-cell;
  font-size: 0.9em;
  font-weight: bold;
  padding-top: 5px;
  vertical-align: top;
  width: 15%;
}

.wTcellR { /* right cell */
  display: table-cell;
  font-size: 0.9em;
  padding-bottom: 3px;
  padding-top: 3px;
  text-align: left;
  vertical-align: top;
  width: 65%;
}

/* END HISTORY PAGE TABLE */

.today {
  font-size: 0.9em;
  margin: 0 auto;
  padding: 3px;
  text-align: left;
  width: 90%;
}

.blkRed2 { /* welding */
float:left;
width: 220px;
height: 115px;
border:1px solid #FF0000;
padding: 2px;
text-align: center;
background-color: #000000;
color: #FFCC00;
margin-top: 8px;
margin-left: 7px;
}

.blkRed3 { /* machining */
float: left;
width: 180px;
height: 115px;
border:1px solid #FF0000;
padding: 2px;
text-align: center;
background-color: #000000;
color: #FFCC00;
margin-top: 8px;
margin-left: 7px;
}

.links { /* LINKS PAGE */
margin: 0 auto;
padding: 10px;
border: 0px solid white;
text-align: left;
font-size: 10pt;
}

.copyright {
  color: #663300;
  font-size: 0.8em;
  text-align: center;
}

/*****************************************************/
/*                        MENU                       */
/*****************************************************/
#navcontainer { /* Contains menu and side animation */
width: 149px;
Height: 510px;
float: left;
padding: 0px 0px 0px 0px;
text-align: left;
position: relative;
border-top: 1px solid #ffcc00;
/*border: 1px solid white;*/
}

#navcontainer ul { /* Menu container */
margin-top: 5px;
padding-left: 0px;
list-style-type: none;
}

#navcontainer a { /* Menu - individual items */
display: block;
padding: 5px 0px 5px 6px;
width: 141px;
border-bottom: 1px solid #ffcc00;
border-left: 1px solid #ffcc00;
border-right: 1px solid #ffcc00;
}

#navcontainer a:link, #navlist a:visited {
color: #ff0000;
font-weight:bold;
text-decoration:none;
}

#navcontainer a:hover {
color: #ffffff;
background-color: #990000;
background-image: url(barback.png);
width: 133px;
text-transform: uppercase;
border-left: 5px solid #ffcc00;
border-right: 5px solid #ffcc00;
}

.current { /* Menu: current page item, not active */
padding: 3px 6px 3px 0px;
color: #ffffff;
font-weight: bold;
text-align: center;
background-color: #990000;
background-image: url(barback.png);
width: 133px;
border-left: 5px solid #ffcc00;
border-right: 5px solid #ffcc00;
border-bottom: 1px solid #ffcc00;
}