AkiUI_MainPageCSS.css

.MainDivide{
  border-top: 5px solid black;
  border-left: 5px solid black;
  border-bottom: 5px solid #200000;
  border-right: 5px solid #380000;
  border-radius: 2vmin;
  padding: 0.5vw;
}

.Timers{
    color:black;
}

.buttonactive{
    text-shadow:0 1px 0 #fff;
    background-image:-webkit-linear-gradient(top,#fff 0,#980000 100%);
    background-image:-o-linear-gradient(top,#fff 0,#980000 100%);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#980000));
    background-image:linear-gradient(to bottom,#fff 0,#980000 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#111242', GradientType=0);
    filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat:repeat-x;
    border-color:#b31c18;
    border-color:#b31c18;
}

.SpecialButtons{
  margin: 5vh auto;
   height:14vh;
  width:16vw;
  margin-left:0.5vw;
  font-size:4vmin;
}

.Robotimg{
   	height: 38vh;
  	width: 18vw;
    display:inline-block;
    border:1px;
}

.UIPage{
    /*background-image:url("RobotUIBackground.png");*/
    /*background-color: #EBF8FF;*/
    background-image:-webkit-linear-gradient(top,#980000 0,##000 100%);
    background-image:-o-linear-gradient(top,#980000 0,#000 100%);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#980000),to(#000));
    background-image:linear-gradient(to bottom,#980000 0,#000 100%);
    background-size:100vw 100vh;
    background-repeat: no-repeat;
}

#leftSection {
  position: fixed;
  left: 1vw;
  top: 2vh;

  width: 28vw;
  height: 54vh;
}

#leftSection ul {
  border: none;
}
#camtab li{
  width: 4.75vw;
  height: 3vh;
  font-size:2.5vmin;
}
#frontcam-tab {
  width: 30vw;
}

.webcam-img {
  position: fixed;
  left: 2vw;
  top: 10.25vh;
  width: 26vw;
  height: 21.5vw;
}
#AutoPathHolder{
  position: fixed;
  top: 25vh;
  right: 6vw;
  width: 37vw;
}
#hammertime {
  position: fixed;
  top: 76vh;
  left: 11vw;
}

#RobotDiagram{
    position: fixed;
    left: 29.5vw;
    top: 2vh;
    height: 96vh;
    width: 50vw;

}

#AutoPathChoice{
  width: 16vw;
  margin-top: 5vmin;
  font-size: 4vmin;
}

#AutoBox{
    position: fixed;
    top: 2vh;
    right: 1vw;
    width: 19vw;
    height: 96vh;
}
#Checklist{
    position: fixed;
    top:80vh;
    bottom: 2vh;
    left:41vw;
    right: 41vw;
    border: 5px inset gray;
    border-radius: 2vmin;
    display:block;
    margin:auto;
    height: 20vh;
    width: 18vw;
    font-size:2.7vmin;

}
#GyroStuff{
    position: fixed;
    top:60vh;
    bottom: 22vh;
    left:41vw;
    right: 41vw;
    border: 5px inset gray;
    border-radius: 2vmin;
    display:block;
    margin:auto;
    height: 20vh;
    width: 18vw;
    font-size:2.7vmin;

}
#GameTimer{
    top: 8vh;
    bottom: 72vh;
    left:59vw;
    right: 23vw;
    height:50vh;
    width:50vh;
    border: 5px inset gray;
    border-radius: 2vmin;
    margin:auto;
}
#SpareBox{
    position: fixed;
    top: 28vh;
    bottom: 52vh;
    left:59vw;
    right: 23vw;
    border: 5px inset gray;
    border-radius: 2vmin;
    display:block;
    margin:auto;
    height: 20vh;
    width: 18vw;
    font-size:2.7vmin;

}
.settingsBox{
  overflow:scroll;
  height: 65vh;
  width: 50vw;
  border-radius: 2vmin;
  display:block;
  position: fixed;
  top: 7.5vh;
  left: 1vw;
}
#settingsBox{
    position: fixed;
    bottom: 20px;
    right: 10px;
    float:left;
}
#SubmitRobospeed{
    position: fixed;
    top:40vh;
    left:21vw;
    height:4vh;
    width:7vw;
}
#myForm{
  font-size:2.25vmin;
}
#Robospeed1{
  position: fixed;
  top:38vh;
  left:9vw;
  height:4vh;
  width:11.5vw;
}
#Robospeed2{
  position: fixed;
  top:42vh;
  left:9vw;
  height:4vh;
  width:11.5vw;
}

.AlloftheLevels {
  width: 10vw;
}

.AlloftheLevels button{
   	height:13.75vh;
	  width:12vw;
    margin:0.5vmin;
  	display:inline;
    font-size:4vmin;
}

#AllofthemTotes {
  left: 66vw;
  top: 2vw;
  position: fixed;
}

#AllofthemTotes button {
  height: 11.5vh;
}

.Atonpageselect {
  height:38vh;
  width: 39vw;
  border: 1vmin none;
  margin:1vmin;
    display:inline-block;
  font-size:50px;

}

.RoboPhoto {
	height: 80px;
	width: 800px;

}
.gap{
  height: 20px;
  width:10px;
  margin:auto;
}

#Settings{
  height: 250px;
  width: 550px;
  border: 1.5px solid black;
  display:inline-block;
}
#TimerButton{
   	height:6vh;
	  width:10vw;
    margin:auto;
    position: fixed;
    top: 6vh;
    bottom: 60vh;
    left:60vw;
    right: 24vw;
  	display:inline-block;
    font-size:2.5vmin;
}
#Timetilldoom{

  position: fixed;
  top: 12vh;
  bottom: 63vh;
  left:63vw;
  right: 27vw;
  font-size: 2.5vmin;
}
#dog
{
    position:fixed;
    top:65vh;
    left:43vw;
    height:5vh;
    width:4vw;
}
#do
{
    position:fixed;
    top:65vh;
    right:34.5vw;
    height:5vh;
    width:4vw;
}
#robotsv
{

    position:fixed;
    height:80vh;
    right:39.5vw;
    width:13vw;
    top:10vh;

}
#binArm
{
    position:fixed;
    height:15vh;
    right:51.625vw;
    width:6vw;
    top:50vh;
}

#toteArm1
{
    position:fixed;
    height:100vh;
    width:27.5vw;
    right:21.225vw;
    top:5vh;

}
#toteArm2
{
    position:fixed;
    height:100vh;
    width:27.5vw;
    right:21.225vw;
    top:-5vh;

}
#toteArm3
{
    position:fixed;
    height:100vh;
    width:27.5vw;
    right:21.225vw;
    top:-15vh;

}
#toteArm4
{
    position:fixed;
    height:100vh;
    width:27.5vw;
    right:21.225vw;
    top:-25vh;

}


.part{
    visibility:hidden;
.topDown
{
  background-image: url(topDownImage.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 20vw;
  height: 20vh;

}

.rotate {
   transform: rotate(0deg);


}
.topDown { background-image: url(topDownImage.png);
   background-repeat: no-repeat;
   background-position: center;
   width: 20vw;
   height: 20vh; }
.rotate { -webkit-transform: rotate(0deg); }