@import "compass";
/* loading Pictos from CodePen; hope that's ok for this demo */
@font-face{font-family:'Pictos Custom';src:url("/fonts/pictos_custom-webfont.eot");src:url("/fonts/pictos_custom-webfont.eot?#iefix") format("embedded-opentype"),url("/fonts/pictos_custom-webfont.woff") format("woff"),url("/fonts/pictos_custom-webfont.ttf") format("truetype"),url("/fonts/pictos_custom-webfont.svg#PictosRegular") format("svg");
}


body {
  background: #343434 url(http://subtlepatterns.com/patterns/dark_matter.png);
}

div.bevel {
  height: 200px;
  margin: 40px auto;
  padding: 10px;
  position: relative;
  width: 200px;
  @include border-radius(110px);
  @include background-image(radial-gradient(center top, 160px 210px, rgba(17, 17, 17, .4), rgba(51, 51, 51, .3)));
  a.center {
    background: #888;
    border: 1px solid #444;
    color: #3a3a3a; /*rgba(0, 95, 160, 0.7); */
    display: block;
    font-family: 'Pictos Custom';
    font-size: 36px;
    height: 80px;
    left: 50px;
    padding-top: 40px;
    position: absolute;
    text-align: center;
    top: 50px;
    width: 120px;
    z-index: 2;
    @include border-radius(100px);
	  @include background-image(radial-gradient(center top, 120px 120px, #333, #222));
    @include box-shadow(#111 0 0 8px);
    @include text-shadow(#1c1c1c 0 -1px 1px, #5c5c5c 0 1px 1px);
  }
}

div.bezel {
  background: #282828;
  border: 1px solid #181818;
  height: 200px;
  overflow: hidden;
  width: 200px;
  @include border-radius(100px);
  @include background-image(radial-gradient(center center, 160px 210px, #292929, #292929, #222, #1c1c1c));
}

ul.dial {
  border-radius: 100px;
  color: #4c4c4c;
  float: left;
  font-family: 'Pictos Custom';
  height: 200px;
  padding-left: 120px;
	width: 480px;
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(0);
  li {
    border-right: 1px solid #212121;
    display: block;
    float: left;
    font-size: 20px;
    height: 92px;
    padding-top: 8px;
    width: 39px;
    -webkit-transform-origin: bottom center;
    @include text-shadow(#000 0 0 3px);
    @include single-transition(color, 0.1s, linear, 0);
  }
  li.active {
    color: #fff;
    font-weight: bold;
  }
  li:hover {
    color: #fcc793;
    @include text-shadow(rgba(251, 223, 124, 0.8) 0 0 5px);
    @include single-transition(color, 0.3s, linear, 0);
  }
  @for $i from 1 through 12 {
    li:nth-child(#{$i}) {
      text-align: center;
      -webkit-transform: 
        translateX(-40px * $i)
        rotate(30deg * $i)
        translateY(-0px);
      cursor: pointer;
    }
  }
}