/* rob styles */

body {
 background: url('../img/background.png');
 font-family:sans-serif;
 font-size:120%;
}

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

input[type="button"] {
    border: 1px solid #ddd;
    background:#fee; 
    border-radius: 2px; 
    margin-top: 5px;
    padding:10px 10px; 
    font-size:80%;
    align:center;
    cursor:pointer;
}

.alert {
  display:none;
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:rgba(0, 0, 0, 0.5);
}

.alert_box {
 background-color:#CCC;
 border-radius:5px;
 width:40%;
 height:15%;
 margin:auto;
 padding:10px;
 text-align:center;
 display:table;
 margin-top:25%;
}


.alert_box_row {
 display:table-row;
 height:50%;
 width:100%;
}

.alert_box_cell {
 display:table-cell;
 vertical-align:middle;
 test-align:center;
}

.btn {
 background-color:#888;
 border-radius:5px;
 cursor:pointer;
 display:inline-block;
 margin:auto;
 width:25%;
 height:80%;
}

.message {
 background-color:#AAA;
 border-radius:5px;
 width:40%;
 height:20%;
 margin:auto;
 padding:20px;
 text-align:center;
 display:table;
 margin-top:25%;
}

.message_row {
 display:table-row;
}

.message_cell {
 padding:5px;
 display:table-cell;
 text-align:right;
 vertical-align:middle;
}


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

.drag {
  position:fixed;
  width:40px;
  height:40px;
  visibility:hidden;
  outline: 3px solid yellow;
  background-size: 35px;
  background-repeat: no-repeat;
  background-position: center;
  z-index:2;
  pointer-events:none;
}

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

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

}

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

.piece.blue {
 background:#0000FF;
 background:linear-gradient(to bottom right, #77F, #33F);
 border-top-color:#88F;
 border-left-color:#88F;
 border-bottom-color:#22F;
 border-right-color:#22F;
}
.piece.red {
 background:#FF0000;
 background:linear-gradient(to bottom right, #F77, #F33);
 border-top-color:#F88;
 border-left-color:#F88;
 border-bottom-color:#F22;
 border-right-color:#F22;
}
.piece.green {
 background:#00FF00;
 background:linear-gradient(to bottom right, #7D7, #3D3);
 border-top-color:#8D8;
 border-left-color:#8D8;
 border-bottom-color:#3D3;
 border-right-color:#3D3;
}
.piece.star {
 background:url('../img/42.png');
 background-size: 30px;
 background-repeat: no-repeat;
 background-position: center;
 border:0px;
}
.piece.arrow {
 background:url('../img/fleche.png');
 background-size: 30px;
 background-repeat: no-repeat;
 background-position: center;
 border:0px;
}


.footer {
 display:table;
 position:fixed;
 background-color:#BBBBBB;
 border-radius:5px;
 font-size:60%;
 width:50px;
 height:2em;
 bottom:10px;
 text-align:center;
 vertical-align:middle;
}
.rst { right:10px; cursor:pointer; }
.lvl { left:10px; }
.ftd {
 display:table-cell;
 height:100%;
 vertical-align:middle;
 text-align:center;
}

.cmd, .inst {
 background-color:#BBBBBB;
 border-radius:5px;
 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 #222;
  box-sizing:border-box;
  background-size: 35px;
  background-repeat: no-repeat;
  background-position: center;
}

.cmdinst.forward, .drag.forward { background-image:url('../img/forward.png'), linear-gradient(to bottom, #BBB, #777); }
.cmdinst.left, .drag.left { background-image:url('../img/left.png'), linear-gradient(to bottom, #BBB, #777); }
.cmdinst.right, .drag.right { background-image:url('../img/right.png'), linear-gradient(to bottom, #BBB, #777); }
.cmdinst.none, .drag.none {  background-image:linear-gradient(to bottom, #BBB, #777); }
.cmdinst.red, .drag.red {  background-image:linear-gradient(to bottom, #F77, #F33); }
.cmdinst.green, .drag.green {  background-image:linear-gradient(to bottom, #7D7, #3D3); }
.cmdinst.blue, .drag.blue {  background-image:linear-gradient(to bottom, #77F, #33F); }
.cmdinst.f1, .drag.f1 { background-image:url('../img/f1.png'), linear-gradient(to bottom, #BBB, #777); }
.cmdinst.f2, .drag.f2 { background-image:url('../img/f2.png'), linear-gradient(to bottom, #BBB, #777); }
.cmdinst.f3, .drag.f3 { background-image:url('../img/f3.png'), linear-gradient(to bottom, #BBB, #777); }
.cmdinst.f4, .drag.f4 { background-image:url('../img/f4.png'), linear-gradient(to bottom, #BBB, #777); }
.cmdinst.f5, .drag.f5 { background-image:url('../img/f5.png'), linear-gradient(to bottom, #BBB, #777); }


.insthdr {
  position:absolute;
  width:40px;
  height:40px;
  box-sizing:border-box;
}
.insthdr.f1 { background-image:url('../img/f1.png'); }
.insthdr.f2 { background-image:url('../img/f2.png'); }
.insthdr.f3 { background-image:url('../img/f3.png'); }
.insthdr.f4 { background-image:url('../img/f4.png'); }
.insthdr.f5 { background-image:url('../img/f5.png'); }

.instinst.forward.none, .drag.forward.none  { background-image:url('../img/forward.png'), linear-gradient(to bottom, #BBB, #777); }
.instinst.forward.red, .drag.forward.red   { background-image:url('../img/forward.png'), linear-gradient(to bottom, #F77, #F33); }
.instinst.forward.green, .drag.forward.green { background-image:url('../img/forward.png'), linear-gradient(to bottom, #7D7, #3D3); }
.instinst.forward.blue, .drag.forward.blue  { background-image:url('../img/forward.png'), linear-gradient(to bottom, #77F, #33F); }
.instinst.left.none, .drag.left.none  { background-image:url('../img/left.png'), linear-gradient(to bottom, #BBB, #777); }
.instinst.left.red, .drag.left.red   { background-image:url('../img/left.png'), linear-gradient(to bottom, #F77, #F33); }
.instinst.left.green, .drag.left.green { background-image:url('../img/left.png'), linear-gradient(to bottom, #7D7, #3D3); }
.instinst.left.blue, .drag.left.blue  { background-image:url('../img/left.png'), linear-gradient(to bottom, #77F, #33F); }
.instinst.right.none, .drag.right.none  { background-image:url('../img/right.png'), linear-gradient(to bottom, #BBB, #777); }
.instinst.right.red, .drag.right.red   { background-image:url('../img/right.png'), linear-gradient(to bottom, #F77, #F33); }
.instinst.right.green, .drag.right.green { background-image:url('../img/right.png'), linear-gradient(to bottom, #7D7, #3D3); }
.instinst.right.blue, .drag.right.blue  { background-image:url('../img/right.png'), linear-gradient(to bottom, #77F, #33F); }
.instinst.empty.none, .drag.empty.none  { background-image:linear-gradient(to bottom, #BBB, #777); }
.instinst.empty.red, .drag.empty.red   { background-image:linear-gradient(to bottom, #F77, #F33); }
.instinst.empty.green, .drag.empty.green { background-image:linear-gradient(to bottom, #7D7, #3D3); }
.instinst.empty.blue, .drag.empty.blue  { background-image:linear-gradient(to bottom, #77F, #33F); }
.instinst.f1.none, .drag.f1.none  { background-image:url('../img/f1.png'), linear-gradient(to bottom, #BBB, #777); }
.instinst.f1.red, .drag.f1.red   { background-image:url('../img/f1.png'), linear-gradient(to bottom, #F77, #F33); }
.instinst.f1.green, .drag.f1.green { background-image:url('../img/f1.png'), linear-gradient(to bottom, #7D7, #3D3); }
.instinst.f1.blue, .drag.f1.blue  { background-image:url('../img/f1.png'), linear-gradient(to bottom, #77F, #33F); }
.instinst.f2.none, .drag.f2.none  { background-image:url('../img/f2.png'), linear-gradient(to bottom, #BBB, #777); }
.instinst.f2.red, .drag.f2.red   { background-image:url('../img/f2.png'), linear-gradient(to bottom, #F77, #F33); }
.instinst.f2.green, .drag.f2.green { background-image:url('../img/f2.png'), linear-gradient(to bottom, #7D7, #3D3); }
.instinst.f2.blue, .drag.f2.blue  { background-image:url('../img/f2.png'), linear-gradient(to bottom, #77F, #33F); }
.instinst.f3.none, .drag.f3.none  { background-image:url('../img/f3.png'), linear-gradient(to bottom, #BBB, #777); }
.instinst.f3.red, .drag.f3.red   { background-image:url('../img/f3.png'), linear-gradient(to bottom, #F77, #F33); }
.instinst.f3.green, .drag.f3.green { background-image:url('../img/f3.png'), linear-gradient(to bottom, #7D7, #3D3); }
.instinst.f3.blue, .drag.f3.blue { background-image:url('../img/f3.png'), linear-gradient(to bottom, #77F, #33F); }
.instinst.f4.none, .drag.f4.none  { background-image:url('../img/f4.png'), linear-gradient(to bottom, #BBB, #777); }
.instinst.f4.red, .drag.f4.red   { background-image:url('../img/f4.png'), linear-gradient(to bottom, #F77, #F33); }
.instinst.f4.green, .drag.f4.green { background-image:url('../img/f4.png'), linear-gradient(to bottom, #7D7, #3D3); }
.instinst.f4.blue, .drag.f4.blue  { background-image:url('../img/f4.png'), linear-gradient(to bottom, #77F, #33F); }
.instinst.f5.none, .drag.f5.none  { background-image:url('../img/f5.png'), linear-gradient(to bottom, #BBB, #777); }
.instinst.f5.red, .drag.f5.red   { background-image:url('../img/f5.png'), linear-gradient(to bottom, #F77, #F33); }
.instinst.f5.green, .drag.f5.green { background-image:url('../img/f5.png'), linear-gradient(to bottom, #7D7, #3D3); }
.instinst.f5.blue, .drag.f5.blue  { background-image:url('../img/f5.png'), linear-gradient(to bottom, #77F, #33F); }