@import "compass";
@import "lib/mixins";
@import "lib/style-lib";
@include webfont(font-awesome/fontawesome-webfont,awesome);
body{
  padding:0;
  margin:0;
  background:url("../../img/bg/pool_table.png");
}
$a:100px;
.dice{
  margin:25px;
  position:relative;
  @include square($a);
  box-sizing:border-box;
  @include perspective(1000px);
  @include in-bl;
  .side{
    @include square($a);
    color:#fff;
    text-align:center;
    font-weight:bold;
    text-align:center;
    line-height:$a;
    font-size:60px;
    background-color:rgba(#fff,.7);
    box-shadow: inset 0 0 30px rgba(#555,.7),0 0 10px rgba(#000,.4);
    box-sizing:border-box;
    .point{
      @include square(20%);
      background-color:#0045BC;
      border-radius:100%;
      box-shadow:inset 0 4px 10px rgba(0, 0, 0, 0.4),inset 0 -2px 2px rgba(255, 255, 255, 0.18);
      background-image:-webkit-radial-gradient(circle,lighten(#0045BC,30%),#0045BC);
      position:absolute;
      &.one{
        @include square(30%);
        top:50%!important;
        left:50%!important;
        margin-left:-$a*0.30/2;
        margin-top:-$a*0.30/2;
      }
      &.red{
        background-image:-webkit-radial-gradient(circle,lighten(#D0513E,20%),#D0513E);
      }
      &.ptop{
        top:12%;
      }
      &.pbottom{
        bottom:12%;
      }
      &.pycenter{
        top:40%;
      }
      &.pxcenter{
        left:40%;
      }
      &.pleft{
        left:12%;
      }
      &.pright{
        right:12%;
      }
    }
  }
}
.solid .side{
  background-color:#fff;
  @include backface-visibility(hidden);
}
.cube{
  @include transform-style(preserve-3d);
  @include square(100%);
  position:absolute;
  @include transition(400ms);
  @include transform(translateZ(-$a*0.5) rotateX(0) rotateY(0));
  .side{
    position:absolute;
  }
  &.front{
    @include transform(translateZ(-$a*0.5));
  }
  &.back{
    @include transform(translateZ(-$a*0.5) rotateX(180deg) rotateY(0));
  }
  &.top{
    @include transform(translateZ(-$a*0.5) rotateX(-90deg) rotateY(0));
  }
  &.bottom{
    @include transform(translateZ(-$a*0.5) rotateX(90deg) rotateY(0));
  }
  &.left{
    @include transform(translateZ(-$a*0.5) rotateX(0) rotateY(90deg));
  }
  &.right{
    @include transform(translateZ(-$a*0.5) rotateX(0) rotateY(-90deg));
  }

  .top{
    @include transform(rotateX(90deg) translateZ($a*0.5));
  }
  .bottom{
    @include transform(rotateX(-90deg) translateZ($a*0.5));
  }
  .front{
    @include transform(translateZ($a*0.5));
  }
  .back{
    @include transform(rotateX(-180deg) translateZ($a*0.5));
  }
  .left{
    @include transform(rotateY(-90deg) translateZ($a*0.5));
  }
  .right{
    @include transform(rotateY(90deg) translateZ($a*0.5));
  }

  .rolling{
    @include transition(4s);
  }
}

.option{
  ul{
    overflow:hidden;
  }
  li{
    float:left;
    margin-right:10px;

  }
}
.btn{
  width:80px;
  @include in-bl;
  @include center(40px);
  background-image:-webkit-linear-gradient(top,skyblue,darken(skyblue,30%));
  cursor:pointer;
  color:darken(skyblue,50%);
  @include unselectable;
  &:hover{
    background-image:-webkit-linear-gradient(top,skyblue,darken(skyblue,20%));
  }
  &:active{
    background-image:-webkit-linear-gradient(top,darken(skyblue,30%),darken(skyblue,20%));
  }
  border-radius:3px;
}
.select{
  color:#fff;
  margin-left:40px;
  margin-top:20px;
  margin-bottom:20px;
}
.roll{
  color:#fff;
  margin-left:40px;
}
.sound{
  width:80px;
  line-height:40px;
  text-align:center;
  background:rgba(skyblue,.4);
  color:darken(skyblue,50%);
  cursor:pointer;
  &:after{
    content:'\f028';
  }
  &.shut{
    &:after{
      content:'\f026';
    }
  }
}