/* -------------------------------------------------------------------------------------------------------------------------------------------------------
   FONTS
   ------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* @font-face { font-family: circuitMage; src: url("./fonts/Circuit Mage.ttf"); } */
/* @font-face { font-family: unispace;    src: url("./fonts/unispace.ttf");     } */
/* @font-face { font-family: cherry;      src: url("./fonts/cherry.ttf");       } */

/* -------------------------------------------------------------------------------------------------------------------------------------------------------
   PRE-BODY STUFF
   ------------------------------------------------------------------------------------------------------------------------------------------------------- */
html { height: 100%; }

body {
          background-color: #101010;
                background: url("./img/pcb_mobile.png");
         background-repeat: no-repeat;
           background-size: cover;
     background-attachment: fixed;
       background-position: center;
                   padding: 0px;
                    margin: 0px;
                    height: 100%;
               font-family: sans-serif;
                 font-size: 12px;
  -webkit-text-size-adjust: 100%;
                     color: white;
}

a { color: #00ffff; }
h1 { font-size: 14px; } 
button { font-size: 16px; padding: 7px; }

/* use this to set a div to vertical center */
.vertical-center {
         margin: 0;
       position: absolute;
            top: 50%;
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}

/* use this to set a div to vertical and horizontal center */
.center {
         margin: 0;
       position: absolute;
            top: 50%;
           left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------
   THE MENU BAR
   ------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* The navigation bar */
.topbar {
          overflow: hidden;
    background-image: linear-gradient(to bottom, rgba(162, 0, 255, 0.6), rgba(0, 0, 35, 0.6));
        border-top: 1px solid #222;
       border-bottom: 1px solid #333;

  background-color: #222;
    /*  border-bottom: 3px solid black; */
          position: fixed; /* Set the navbar to fixed position */
               top: 0; /* Position the navbar at the top of the page */
             width: 100%; /* Full width */
            filter: drop-shadow(3px 3px 3px #000);
           z-index: 999; /* set to top layer */
        text-align: center;

}

/* Links inside the navbar */
/* .topbar a {
       text-align: center;
  text-decoration: none;
        font-size: 20px; 
            color: white;
          display: inline-block;
       border-top: 1px solid #222;
      border-left: 1px solid #222;
     border-right: 1px solid #222;
            width: 30%;
           height: 100%;
      padding-top: 10px;
}*/

.topbar a {
     /* font-family: unispace; */
          display: inline-block;
            color: white;
       text-align: center;
          padding: 10px 20px;
  text-decoration: none;
        font-size: 20px;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: #333;
}

/* Change background on mouse-over */
.topbar a:hover {
       display: inline-block;
    background: gray;
         color: black;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------
   MAIN CONTENT AREA
   ------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* THIS IS THE MAIN AREA, UNDER THE MENU */
.main       {   height: auto;     min-height: 100%;      display: flex;        width: 100%;      align: center; backgroudn-color: red; }
.mainCenter { position: relative;  min-width: 325px; margin-left: auto; margin-right: auto; margin-top: 30px;              width: 100%; background-color: rgba(0,0,25,0.8);  border: 1px solid #222; box-shadow: 0px 0px 20px 20px #000; padding: 15px; }
.main h1    {    color: #ccffff; }
.main p     {    color: #fefefe; /* font-family: cherry; */ }

.footer { display: block; border-top: 1px solid black; background-color: rgba(1,15,25,0.9); width: 100%; padding: 4px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
text-align: center;
z-index: 999;
}


/* -------------------------------------------------------------------------------------------------------------------------------------------------------
   Home.php HOME PAGE TABLES
   ------------------------------------------------------------------------------------------------------------------------------------------------------- */
.homeTable { width: 100%; /* font-family: cherry; */ }

.homeTable h1 {
  /* font-family: circuitMage; */
  color: darkgreen;
  text-align: center;
  font-weight: normal;
}

.homeTable p { /* font-family: unispace; */ color: white; }

.homeTableTextTd {
  align: left;
  vertical-align: text-top;
  width: 70%;
  padding-left: 5px;
  padding-right: 5px;  
  color: lightgray; 
}

.homeTableImageTd { width: 30%; }
.homeTableImageLeft  {float: left; }
.homeTableImageRight { float: right; }
.homeTableImageLeft .homeTableImageRight {
  display: block;
  width: 100%;
  border: solid 2px black;
  background-color: #001;
  border-radius: 25px;
  box-shadow: 4px 4px 4px black; 
  background-image: linear-gradient(to bottom right, white, black);
}

.homeContent {
  width: 100%;
  padding: 2px;
  overflow: hidden;
  text-align: left;
  opacity: 1;
}

.homeContent h1 { display: block; }


.homeContent p { display: inline; }

.homeContent img {
margin: 10px; 
  display: flex; 
  width: 40%;
  border: solid 2px black;
  background-color: #001;
  border-radius: 25px;
  box-shadow: 4px 4px 4px black; 
  background-image: linear-gradient(to bottom right, white, black);
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------
   ORDER - order.php related
   ------------------------------------------------------------------------------------------------------------------------------------------------------- */

.orderPara { }

.orderPara .head {
 font-size: 18px;
 font-weight: bold;
 text-decoration: underline;
 color: orange;
}

.orderPara .content {
}

.tablePedalConfiguration {
 background-color: #444;
}


/* -------------------------------------------------------------------------------------------------------------------------------------------------------
   PEDAL SIMULATOR
   ------------------------------------------------------------------------------------------------------------------------------------------------------- */

.pedal { 
 display: inline-block;
   float: right;
   width: 150px;
}

.pedal img {
    display: block;
  max-width: 100%;
touch-action: manipulation;

}

.simulator {
 display: inline-block;
 padding: 10px;
  height: 100%;
   min-width: 310px;
overflow: visible;
}

.simulator table {
  float: left;
 border: 1px solid black;
border-spacing: 0px;
}
.simulator table td {
font-size: 10px;
padding: 0px; margin: 0px;
}

.simWarning {
 background-color: #120000;
            width: 100%;
       text-align: center;
          padding: 0px;
           border: 1px dashed red;
       margin-top: 5px;
font-size: 10px;
}

.simulator table img { height: 75px; }
.simulator canvas { height: 150px; }
.simWarning p { text-color: white; color: white; }

.orderForm { width: 100%; text-align: center; }

.orderForm select {
       margin: 0 auto;
        width: 15%;
  /* font-family: verdana; */
     overflow: hidden;
        color: black;
    font-size: 12px; 
padding: 1px; 
}


.torchHead {  }

.configuration select { width: 100%; }

/* -------------------------------------------------------------------------------------------------------------------------------------------------------
   CART
   ------------------------------------------------------------------------------------------------------------------------------------------------------- */

.cart td { padding: 10px; border-left: 1px solid black; }

.cart table { border-spacing: 0px; width: 100%; font-size: 10px; /* font-family: verdana; */ }

.cart th {
       border-left: 1px solid black;
  background-color: #555;
           padding: 5px;
             color: yellow;
       white-space: nowrap;
}

.cart tr:nth-child(even) { background-color: #222; color: #eee; }
.cart tr:nth-child(odd) { background-color: #111; color: #eee; }

.cartEmpty { text-align: center; color: white; padding: 25px; }
.cart p { font-size: 10px; text-align: center; }