h1 {
  font-size:20px;
  color:steelblue;
}


h3 {
  font-size:20px;
  color:steelblue;
}

img {
  width: 500px;
  height:auto;
}

.code {
  font-style: italic;
  font-family: courier;
}

#state {
  border-style: solid;
  border-width: 2px;
  border-color: steelblue;
}

/* svg {
  fill:'red';
} */

#dinput, #lane1input, #lane2input, #lane3input, #submitPlatoons, #runTDS, #state {
/* margin-top: 5px; */
padding: 5px;
}

#dinput p, #lane1input p, #lane2input p, #lane3input p {
  display:inline;
}

#state-visual {
  position:absolute;
  left: 500px;
  top: 600px
  padding: 10px;
  /* margin-top: 15px;
  margin-right: 15px; */
}

#visual-label {
  position:absolute;
  top: 70px;
  left: -68px;
  width: 200px;
}

#lane1-board {
  position:absolute;
  top:0px;
  width: 0px;
  height: 0px;
  background-color: white; // #EEE

}
#lane2-board {
  position:absolute;
  top:0px;
  width: 0px;
  height: 0px;
  background-color: white;// gray

}
#lane3-board {
  position:absolute;
  top:0px;
  width: 0px;
  height:0px;
  background-color: white; //black

}

#intersection-board {
  width: 10px;
  height: 80px;
  background-color: gray;
  position: absolute;
  left: 0px;
  top: 120px;
}

#lane1-board-svg {
  position: absolute;
  width:500px;
  left:-200px;
  top: 0px;
}

#lane2-board-svg {
  position: absolute;
  width:500px;
  left: -200px;
  top: 25px;
}

#lane3-board-svg {
  position: absolute;
  width:500px;
  left: -200px;
  top: 40px;
}
/* SVG style */
/* svg {
  margin-top: -5px;
} */

#lane1-board-svg rect, #lane2-board-svg rect, #lane3-board-svg rect {
  border-style: solid;
  border-width: 2px;
  border-color:black;
}

#lane1-board-svg rect {
  fill: red;

}

#lane2-board-svg rect {
  fill: green;
}
#lane3-board-svg rect {
  fill: blue;
}

#runButton {
  font-size: 16px;
}
