<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
.BPMark {
position: absolute;
width: 20px;
height: 20px;
color: yellow;
background-color:Blue;
border: 4px solid #73AD21;
border-radius: 10%;
}
.BPMarkLate {
position: absolute;
width: 20px;
height: 20px;
color: white;
background-color:grey;
border: 4px solid #73AD21;
border-radius: 10%;
}
.IPAMark {
position: absolute;
width: 25px;
height: 20px;
color: yellow;
background-color:blue;
border: 4px solid #73AD21;
border-radius: 10%;
}
.IPAMarkLate {
position: absolute;
width: 25px;
height: 20px;
color: white;
background-color:grey;
border: 4px solid #73AD21;
border-radius: 10%;
}
.ColAn {
position: absolute;
width: 30px;
height: 20px;
color: yellow;
background-color:Blue;
border: 2px solid #73AD21;
border-radius: 50%;
}
.ColAnLate {
position: absolute;
width: 30px;
height: 20px;
color: white;
background-color:Grey;
border: 2px solid #73AD21;
border-radius: 50%;
}
@-webkit-keyframes blinker {
from {opacity: 1.0;}
to {opacity: 0.0;}
}
.ColAnErr {
position: absolute;
width: 30px;
height: 20px;
color: White;
background-color:Red;
border: 2px solid #73AD21;
border-radius: 50%;
text-decoration: blink;
-webkit-animation-name: blinker;
-webkit-animation-duration: 0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
}
.ColT {
position: absolute;
font-size: 10px;
width: 200px;
height: 20px;
color: black;
}
.ColC {
position: absolute;
font-size: 10px;
width: 200px;
height: 20px;
color: black;
}
.PLC {
position: absolute;
font-size: 12px;
font-style: italic;
width: 500px;
color: grey;
background-color:transparent;
border: 2px solid grey;
top: 515px;
left: 20px;
}
.JAM {
position: absolute;
font-size: 20px;
width: 200px;
color: white;
background-color:transparent;
border: 2px solid grey;
top: 20px;
left: 20px;
}
.INFO {
position: absolute;
font-size: 12px;
width: 500px;
color: white;
background-color:transparent;
border: 2px solid grey;
top: 490px;
left: 20px;
}
.dot {
position: absolute;
height: 35px;
width: 35px;
border-radius: 50%;
display: inline-block;
}
.ON {
background-color: transparent;
}
.OFF {
background-color: red;
}
.D2 {
top: 175px;
left: 565px;
}
.D3 {
top: 215px;
left: 565px;
}
.D4 {
top: 255px;
left: 565px;
}
.D5 {
top: 295px;
left: 565px;
}
.D6 {
top: 335px;
left: 565px;
}
.D7 {
top: 397px;
left: 825px;
}
.D8 {
top: 470px;
left: 725px;
}
</style>