:root {
  --orange: hsla(32, 100%, 50%, 1);
  --yellow: hsla(49, 99%, 50%, 1);
  --lime: hsla(82, 90%, 45%, 1);
  --green: hsla(127, 81%, 41%, 1);
  --red: hsla(342, 93%, 53%, 1);
  --pink: hsla(314, 85%, 45%, 1);
  --blue: hsla(211, 92%, 52%, 1);
  --purple: hsla(283, 92%, 44%, 1);
  --cyan: hsla(195, 98%, 55%, 1);
  --white: hsla(0, 0%, 95%, 1);
  --black: hsla(0, 0%, 10%, 1);

  /* abstract our colours */
  --boxMain: var(--cyan);
  --boxSecond: var(--blue);
  --boxHigh: var(--yellow);
  --border: 1vmin solid var(--black);
  --borderRad: 2px;
}

body {
  background-color: var(--white);
  /*padding: 4vmax;*/
  font-family: sans-serif, system-ui;
  color: var(--black);
  font-size: 20px;
  
  color: var(--black);
  margin:auto;
}

.construction{
	width:100px;height:100px;
    margin: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('construction.gif');
    box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
    border-radius: 5px;
}
.ukflag{
	float:left;
	width:68px;height:50px;
    margin: 5px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('UK.GIF');
}

input[type="range"] {
  -webkit-appearance: none;
  height:50px;
  width:120px;
  margin-left:10px;
  background-color:transparent;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top:-15px;
  width:10px;
  height:40px;
  border: 0px solid green;
  border-radius:2px;
  background-color: gold;
  cursor: grab;
}

input[type="range"]::-moz-range-thumb {
  height: 40px;
  width: 10px;
  border: 0px solid green;
  border-radius: 2px;
  background-color: gold;
  cursor: grab;
}

input[type="range"]::-ms-thumb {
  height: 4vh;
  width: 2vw;
  border: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}


input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  cursor: pointer;
  background-color: var(--white);
  border-radius: 2px;
  padding: 0 5px;
  background: repeating-linear-gradient(to right, 
    var(--white), 
    var(--white) 10%, 
    #000 10%, 
    #000 11%, 
    var(--white) 11%, 
    var(--white) 20%);
}

input[type="range"]::-moz-range-track {
  height: 5px;
  cursor: pointer;
  background-color: var(--white);
  border-radius: 2px;
  padding: 0 5px;
  background: repeating-linear-gradient(to right, 
    var(--white), 
    var(--white) 10%, 
    #000 10%, 
    #000 11%, 
    var(--white) 11%, 
    var(--white) 20%);
  border-radius: var(--borderRad);
}

.sliderbox{
  background-color: black;
  color:var(--white);
}
.playbutton{
	font-size:20px;
	background-image: url('pause2.png');
	border:0px;
	width:50px;
	height:50px;
	background-repeat: no-repeat;
	display:inline-block;
	background-color: black;
	background-position: -56px,0;
}

.resetbutton{
	font-size:20px;
	background-image: url('pause3.png');
	border:0px;
	width:56px;
	height:50px;
	background-repeat: no-repeat;
	display:inline-block;
	background-color: black;
	background-position: 0,0;
}

.playbutton2{
	background-image: url('pause2.png');
	border:0px;
	width:25px;
	height:25px;
	background-repeat: no-repeat;
	display:inline-block;
	background-color: black;
	background-position: -28px,0;
	background-size:auto 90%;
}

.editbutton{
	background-image: url('editbwsm.png');
	border:0px;
	width:25px;
	height:25px;
	background-repeat: no-repeat;
	display:inline-block;
	background-color: black;
	background-size:auto 90%;
}

table#t01{
  border: 2px solid black;
  border-collapse: collapse;
  font-size:12px;
}

table#t01 td {
	color: black;
   border: 2px solid black;
   background-color: #eee;
}
table#t01 tr:nth-child(even) {
   /* border: 2px solid black;*/
   background-color: #eee;
}
table#t01 tr:nth-child(odd) {
  background-color: #fff;
}
table#t01 th {
    border: 2px solid black;
	color: white;
	background-color: black;
}