LJ/webui/ljaygrid.css

.maingrid {
  display: grid;
  grid-template-columns: 900px;
  grid-template-raw: 1fr 1fr 1fr  1fr;
  grid-gap: 1px;
  background-color: #222;
  padding: 5px;
  padding-bottom: 0px;
}
.mgtitle {
  display: grid;
  height: 90px;
  grid-template-columns: 130px 70px 80px 600px;
  background-color: #111;
  transition: all .3s ease;
  padding-top: 10px;
  border-color: #445;
  border-style: groove;
  border-width: 1px;
}
.mgstatus {
  display: grid;  
  grid-template-columns: 250px 150px 1fr;
  grid-template-raw: 30px;
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  border-color: #334;
  border-style: groove;
  border-width: 1px;
  background-color: #111;
  font-size: small;
  color:#444;
  font-family: sans-serif, Helvetica, Verdana, Arial;
  justify-items: center;
  align-items: center;
  font-family: 'hobeaux-rococeaux-background', Helvetica;
}
.mgalign {
  display: grid;
  height: 400px;
  grid-template-columns: 144px 144px 138px 138px 10px;
  grid-template-rows: 1Fr;
  background-color: #151515;
  border-color: #445;
  border-style: groove;
  border-width: 1px;
}
.mgcanvas {
  display: none;
  height: 400px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1Fr;
  background-color: #151515;
  border-color: #445;
  border-style: groove;
  border-width: 1px;
}
.mglive {
  display: none;
  height: 400px;
  grid-template-columns: 138px 138px 512px 1Fr;
  grid-template-rows: 1Fr;
  background-color: #151515;
  border-color: #445;
  border-style: groove;
  border-width: 1px;
}
.mgrun {
  display: none;
  height: 400px;
  grid-template-columns: 66px 66px 66px 66px 66px 66px 66px 66px;
  grid-template-rows: 66px 17px 69px 17px 66px 17px 66px 17px;
  background-color: #000;
  justify-items: center;
  align-items: center;
  border-color: #445;
  border-style: groove;
  border-width: 1px;
  grid-gap: 1px;
  transition: all .3s ease;
}
.mgfooter {
  display: grid;  
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-raw: 25px;
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  border-color: #334;
  border-style: groove;
  border-width: 1px;
  background-color: #111;
  font-size: small;
  font-family: sans-serif, Helvetica, Verdana, Arial;
  justify-items: center;
  align-items: center;
  font-family: 'hobeaux-rococeaux-background', Helvetica;
}
.topgrid {
  display: grid;
  height: 80px;
  grid-template-columns: 60px 75px 40px 60px 75px 60px 75px 60px 75px;
  background-color: #111;
  justify-items: center;
  align-items: center;
  grid-gap: 1px;
  border-color: #445;
  border-style: groove;
  border-width: 1px;
  transition: all .3s ease;
}
.laserbox {
  display: grid;
  height: 390px;
  width: 132px;
  grid-template-columns: 124px;
  grid-template-rows: 15px 32px 325px;
  background-color: #111;
  line-height: 1;
  padding: 4px;
  justify-items: center;
  align-items: center;
  border-color: #334;
  border-style: groove;
  border-width: 1px;
}
.lasergrid {
  display: grid;
  height: 323px;
  width: 124px;
  grid-template-columns: 62px 62px;
  grid-template-rows: 30px 19px 8px 55px 20px 19px 8px 55px 25px 19px 8px 55px 19px;
  background-color: #111;
  line-height: 1;
  justify-items: center;
  align-items: center;
  color:#88c;
}
.lissabox {
  display: grid;
  height: 353px;
  width: 126px;
  grid-template-columns: 124px;
  grid-template-rows: 15px 338px;
  background-color: #111;
  line-height: 1;
  padding: 6px;
  justify-items: center;
  align-items: center;
  border-color: #334;
  border-style: groove;
  border-width: 1px;
}
.spacer {
  display: grid;
  height: 8px;
}

.lissagrid {
  display: grid;
  height: 323px;
  width: 124px;
  grid-template-columns: 60px 60px ;
  grid-template-rows:  55px 25px 15px 8px 55px 25px 15px 8px 55px 25px 15px;
  background-color: #111;
  line-height: 1;
  justify-items: center;
  align-items: center;
}
.withaibox {
  display: grid;
  height: 353px;
  width: 126px;
  grid-template-columns: 124px;
  grid-template-rows: 15px 338px;
  background-color: #111;
  line-height: 1;
  padding: 6px;
  justify-items: center;
  align-items: center;
  border-color: #334;
  border-style: groove;
  border-width: 1px;
}
.withaigrid {
  display: grid;
  height: 323px;
  width: 124px;
  grid-template-columns: 60px 60px ;
  grid-template-rows: 55px 25px 15px 8px 55px 25px 15px 8px 55px 25px 15px;
  background-color: #111;
  line-height: 1;
  justify-items: center;
  align-items: center;
}
.projgrid {
  display: grid;
  height: 140px;
  width: 194px;
  grid-template-columns: 1Fr 1Fr 1Fr;
  grid-template-rows: 25px 8px 55px 25px 15px;
  background-color: #111;
  line-height: 1;
  justify-items: center;
  align-items: center;
  border-color: #334;
  border-style: groove;
  border-width: 1px;
}

.lasertext {
   font-size: small;
   font-family: Helvetica, Verdana, Arial, sans-serif;
   color: #bbb;
}
.lasertextxs {
   font-size: x-small;
   font-family: Helvetica, Verdana, Arial, sans-serif;
   color: #bbb;
}

.lsttgrid {
  display: grid;
  height: 20px;
  grid-template-columns: 10px 10px 25px 25px;
  grid-template-rows: 15px 15px 15px 15px 15px;
  grid-gap: 1px;
  justify-items: center;
  align-items: center;
  transition: all .3s ease;
}
.onoffgrid {
  display: grid;
  height: 14px;
  grid-template-columns: 1Fr;
  grid-template-rows: 15px 110px;
  justify-items: center;
  transition: all .3s ease;
}
.icongrid {
   padding: 2px;
   width: 100%;
   max-height: 100%;
}
#showin {
   font-family: Helvetica, Verdana, Arial, sans-serif;
   color :#444;
   width: 150px;   
   height: 25px;
   padding-top: 4px;

}
#showout {
   font-family: Helvetica, Verdana, Arial, sans-serif;
   color: #444;
   width: 150px;
   height: 25px;
   padding-top: 4px;
}
#events {
   font-family: Helvetica, Verdana, Arial, sans-serif;
   color: #444;
   width: 150px;
   height: 25px;
   padding-top: 4px;
}
.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 8px 5px;
    border: 1px solid #404040;
    background: #141414;
    background: -webkit-gradient(linear, left top, left bottom, from(#141414), to(#141414));
    background: -moz-linear-gradient(top, #141414, #141414);
    background: linear-gradient(to bottom, #141414, #141414);
    font: normal normal normal 11px arial;
    color: #ffffff;
    text-decoration: none;
}
.button:hover,
.button:focus {
    padding: 8px 5px;
    border: 1px solid #b6b6b6;
    background: #181818;
    background: -webkit-gradient(linear, left top, left bottom, from(#181818), to(#181818));
    background: -moz-linear-gradient(top, #181818, #181818);
    background: linear-gradient(to bottom, #181818, #181818);
    color: #ffffff;
    text-decoration: none;
}
.button:active {
    padding: 8px 5px;
    background: #0c0c0c;
    background: -webkit-gradient(linear, left top, left bottom, from(#0c0c0c), to(#141414));
    background: -moz-linear-gradient(top, #0c0c0c, #141414);
    background: linear-gradient(to bottom, #0c0c0c, #141414);
    border: 1px solid #6666B6;
}
.button:checked {
    padding: 8px 5px;
    background: #c0c0c0;
    color: #0c0c0c;
    border: 1px solid #6666B6;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    font: normal normal normal 11px arial;
    text-decoration: none;
}
.submit {
    background: #0c0c0c;
    color: #c0c0c0;
    width: 90px;
    text-align: center;
    vertical-align: middle;
    height: 15px;
    background: -webkit-gradient(linear, left top, left bottom, from(#0c0c0c), to(#141414));
    background: -moz-linear-gradient(top, #0c0c0c, #141414);
    background: linear-gradient(to bottom, #0c0c0c, #141414);
    border: 1px solid #445;
}