/* rob styles */

body {
 background: white;
 font-family:sans-serif;
 font-size:100%;
}

input[type="text"] {
    border: 1px solid #ddd;
    margin-top: 5px;
    padding:5px 5px;
    background:#eee;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    font-size:80%;
    align:center;
}

.logo {
  height: 120px;
  width: 171px;
  margin-left: 50px;
  margin-top: 50px;
}

.s-logo {
  height: 40px;
  width: 40px;
  margin-left: 50px;
}

.title {
  font-size: 400%;
  font-weight: bold;
  text-align: center;
}

.ib {
  display: inline-block;
}

.text_title {
  margin-top: -102px;
}

.entry {
  color: white;
  text-decoration: none;
  font-weight: bold;

  display: block;
  margin:  0px 14px;
}

.message {
 background-color:#4fb9e9;
 border-radius:5px;
 margin:auto;
 padding:10px;
 text-align:center;
 display:table;
 margin-top:10%;
/* cursor:pointer; */
}

#speed {
  margin-top: 20px;
  width: 132px;
}

.speed .text {
  margin-top: -10px;
}

.speed {
 white-space:nowrap;
 font-size:60%;
}

.message div {
 display:table-row;
}

.message span {
 display:table-cell;
 vertical-align:middle;
}

.drag {
  position:fixed;
  width:40px;
  height:40px;
  visibility:hidden;
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #e6e6e6;
  border-radius: 4px;
  border: 2px solid #e54a12;
  z-index:2;
  pointer-events:none;
}

.inst_bt {
  width:50%;
  text-align:center;
  vertical-align:middle;
  margin:auto;
}

#bt_go {
  background-color: #4fb9e9;
}

.board {
 background-color:#e6e6e6;
 border-radius: 2px;
 width:0px;
 height:0px;
 margin:auto;
 position:relative;
 padding:10px;
}

.piece {
  position:absolute;
  width:40px;
  height:40px;
  border: 1px solid;
  box-sizing:border-box;
}

.piece.l {
  border: none;
}

.piece.m {
  border: none;
 background:#0fe9af;
}

.piece.n {
  border: none;
 background:#80b36a;
}

.piece.o {
  border: none;
 background:#80b36a;
}

.piece.p {
  border: none;
 background:#FCD900;
}

.piece.q {
  border: none;
 background:#e59230;
}

.piece.r {
  border: none;
 background:#e54a12;
}

.piece.s {
  border: none;
 background:#FE8A7D;
}

.piece.t {
  border: none;
 background:#ed1c70;
}

.piece.u {
  border: none;
 background:#ac19af;
}

.piece.v {
  border: none;
 background:#a55778;
}

.piece.w {
  border: none;
 background:#4fb9e9;
}

.piece.x {
  border: none;
 background:#2a97b8;
}

.piece.y {
  border: none;
 background:#5ef493;
}

.piece.z {
  border: none;
 background:#000000;
}

.piece.blue {
 background:#4fb9e9;
 border-width: 1px;
 border-color: #0B2243;
}
.piece.red {
 background:#FE8A7D;
 border-color: #e94c4c;
}
.piece.green {
 background:#80b36a;
 border-color: #244814;
}
.piece.star {
 background:url('../img/qwasar.png');
 background-size: 30px;
 background-repeat: no-repeat;
 background-position: center;
 border:0px;
}
.piece.arrow {
 background:url('../img/arrow.png');
 background-size: 35px;
 background-repeat: no-repeat;
 background-position: center;
 border:0px;
}


.cmd, .inst {
 background-color:#e6e6e6;
 border-radius: 2px;
 width:0px;
 height:0px;
 position:relative;
 padding:10px;
}

.cmd {
 margin:auto;
}
.inst {
 display:inline-block;
 vertical-align:middle;
 text-align:center;
 margin:10px;
 float:left;
}

.cmdinst, .instinst {
  position:absolute;
  width:40px;
  height:40px;
  border:1px solid #acacac;
  border-radius: 4px;
  box-sizing:border-box;
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #d0d0d0;
}

.cmdinst.red, .drag.red {
  background:#FE8A7D;
}

.cmdinst.green, .drag.green {
  background:#80b36a;
}

.cmdinst.blue, .drag.blue {
  background:#4fb9e9;
}


.insthdr {
  position:absolute;
  width:40px;
  height:40px;
  box-sizing:border-box;
  background-size: 28px auto;
  background-position: center center;
  background-repeat: no-repeat;
}

.instinst.red, .drag .red {
  cursor: pointer;
  background-color:#FE8A7D;
}

.instinst.green, .drag .green {
  cursor: pointer;
  background-color:#80b36a;
}

.instinst.blue, .drag .blue {
  cursor: pointer;
  background-color:#4fb9e9;
}

.forward {
  background-image:url('../img/forward.png');
  cursor: pointer;
}

.left {
  background-image:url('../img/left.png');
  cursor: pointer;
}

.right {
  background-image:url('../img/right.png');
  cursor: pointer;
}


.f1  {
  cursor: pointer;
  background-image:url('../img/f1.png')
}

.f2  {
  cursor: pointer;
  background-image:url('../img/f2.png')
}

.f3  {
  cursor: pointer;
  background-image:url('../img/f3.png')
}

.f4  {
  cursor: pointer;
  background-image:url('../img/f4.png')
}

.f5  {
  cursor: pointer;
  background-image:url('../img/f5.png')
}

.level_title {
  font-weight: bold;
  padding: 0px 0 0 10px;
  margin-top: -30px;
}