html, body{
  background-color: rgb(255,255,255);
  height:100%;
  margin: 0px;
  box-sizing: border-box;
  padding: 5px;
}

#maindiv
{
  position: relative;
  Xbackground-color: rgb(0,255,255);
  width: 100%;
  height: 100%;
  xpadding: 5px;
}

#toprow
{
  height:20%;
}

#middlerow
{
  height:40%;
}

#bottomrow
{
  height:40%;
}

.arow
{
  width: 100%;
  height:40%;
}

.acell
{
  position: relative;
  width: 20%;
  height: 100%;
  float: left;
}

.slotcontainer
{
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 10%;
  #background-color: rgb(255,0,255);
}

.slot
{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 150px;
  height: 50px;
  #background-color: rgb(200,200,200);
}

.target
{
  background-color: rgb(200,200,200);
}

.controlscontainer
{
	position: absolute;
	width: 100%;
	bottom: 10%;
	Xbackground-color: rgb(155,155,155);
}

.timecontainer
{
  position: absolute;
  width: 100%;
  height: 50px;
  top: 20%;
  Xbackground-color: rgb(255,255,255);
}

.clockcontainer
{
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
	Xbackground-color: rgb(255,255,255);
}

.clockcontainerinner {
    display: table-cell;
    vertical-align: middle;
	width: 100%;
	Xbackground-color: rgb(255,155,155);
}

.clock {
	position: relative;
    margin-left: auto;
    margin-right: auto; 
	width: 100%;
	height: 90%;
	Xbackground-color: rgb(255,255,255);
}

.buttoncontainer
{
  position: relative;
  width: 100%;
  height: 50px;
  Xbackground-color: rgb(255,255,255);
}

.timercontainer
{
  position: relative;
  width: 100%;
  height: 50px;
  Xbackground-color: rgb(255,255,255);
}

#timer
{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  Xheight: 30px;
  text-align: center;
}

.draggabletime
{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 150px;
  height: 50px;
  background-color: rgb(0,0,0);
}

.outertime
{
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
	Xbackground-color: rgb(255,255,255);
}

.innertime {
    display: table-cell;
    vertical-align: middle;
	width: 100%;
	Xbackground-color: rgb(255,155,155);
}

.time
{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  xwidth: 200px;
  width: 100%;
  Xheight: 50px;
  background-color: rgb(0,0,0);
  color: rgb(255,255,255);
  text-align: center;
}

.timedragged
{
  width: 200px;
  height: 50px;
}

#buttonStopTheClock
{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 50px;
}

#toprowcol1
{
  Xbackground-color: rgb(255,0,0);
}

#toprowcol2
{
  Xbackground-color: rgb(200,0,0);
}

#toprowcol3
{
  Xbackground-color: rgb(155,0,0);
}

#toprowcol4
{
  Xbackground-color: rgb(100,0,0);
}

#toprowcol5
{
  Xbackground-color: rgb(55,0,0);
}

#middlerowcol1
{
  Xbackground-color: rgb(0,255,0);
}

#middlerowcol2
{
  Xbackground-color: rgb(0,200,0);
}

#middlerowcol3
{
  Xbackground-color: rgb(0,155,0);
}

#middlerowcol4
{
  Xbackground-color: rgb(0,100,0);
}

#middlerowcol5
{
  Xbackground-color: rgb(0,55,0);
}

#bottomrowcol1
{
  Xbackground-color: rgb(0,0,255);
}

#bottomrowcol2
{
  Xbackground-color: rgb(0,0,200);
}

#bottomrowcol3
{
  Xbackground-color: rgb(0,0,155);
}

#bottomrowcol4
{
  Xbackground-color: rgb(0,0,100);
}

#bottomrowcol5
{
  Xbackground-color: rgb(0,0,55);
}


.map-container {
  transform-origin: 0 0;
  transition: .5s;
  background: #bacbdc;
  height: 500px;
  width: 500px;
  overflow: hidden;
}

circle
{
    background-color: White;
    fill: White;
	stroke: black;
	stroke-width: 3;
}

line
{
    background-color: White;
    fill: White;
	stroke: black;
	stroke-width: 3;
}

text
{
    background-color: black;
    fill: black;
	stroke: black;
	stroke-width: 1;
	font-size: 24px;
}

.bighand
{
    background-color: White;
    fill: White;
	stroke: Blue;
	stroke-width: 3;
}

.littlehand
{
    background-color: White;
    fill: White;
	stroke: Red;
	stroke-width: 3;
}

.display
{
	position: absolute;
	width: 98%;
	z-index: 1;
	bottom: 35%;
	text-align: center;
}

.displaytext
{
	position: relative;
	margin-left: auto;
    margin-right: auto;
	text-align: center;
	font-size: 36;
	background-color: rgb(255,255,200);
}

.timetaken
{
	color: Red;
}

.options
{
	position: absolute;
	z-index: 2;
	top: 0px;
	height: 98%;
	width: 98%;
	text-align: center;
}

.mainbuttons
{
	position: absolute;
	z-index: 5;
	bottom: 10px;
	height: 30px;
	width: 30px;
	text-align: center;
}

.cogContainerX
{
	width: 30px;
	height: 30px;
}

#optionsCog
{
	background-color: rgb(155,155,155);
    fill: rgb(155,155,155);
	stroke: black;
	stroke-width: 5;
}

.outer
{
    display: table;
    xposition: absolute;
    height: 100%;
    width: 100%;
}

.inner 
{
    display: table-cell;
    vertical-align: middle;
	width: 100%;
}

.middle
{
	margin-left: auto;
    margin-right: auto;
}

.optionsdialog
{
	position: relative;
	background-color: rgba(155,155,155,0.95);
	height: 50%;
	width: 50%;
	display: table;
}

.doneContainer
{
	position: absolute;
	bottom: 10px;
	right: 10px;
}

.optionItems
{
	position: relative;
	height: 100%;
	width: 100%;
}

.optionItem
{
	margin: 10 10 10 10;
	text-align: center;
}