.warpper{
  opsition : relative;
}

.bg {
  height : 1024px;
  width: 1280px;
  position : absolute;
  background : url(../images/scathach.jpg) center top no-repeat ;
  opacity : .2;
  z-index : -1;
}

.controllerDiv{
  z-index : 2;
}

.panel{
  width: 50%;
  border: 1px solid black;
  border-collapse: collapse;
  padding : 10px;
  z-index : 2;
}

.resultTable{
  width: 90%;
  border: 1px solid black;
  padding : 10px;
}

td, th{
  border: 1px solid black; 
}

.saber{
  width: 11%;
  text-align:left;
}

.archer{
  width: 11%;
  text-align:left;
}

.lancer{
  width: 11%;
  text-align:left;
}
.rider{
  width: 11%;
  text-align:left;
}
.assassin{
  width: 11%;
  text-align:left;
}
.caster{
  width: 11%;
  text-align:left;
}
.berserker{
  width: 11%;
  text-align:left;
}
.ex{
  width: 11%;
  text-align:left;
}

.hidden{
  display:none;
}

.blueMetal{
  color:blue;
  font-weight:bold;
}

.goldMetal{
  color:yellow;
  font-weight:bold;
}

.silverMetal{
  color:grey;
  font-weight:bold;
}

.craftFixed{
  color:red;
}

.note{
  padding : 5px;
  border: 1px solid grey;
  width: 45%;
  display: inline-block;
  float: left;
}