@font-face {
    font-family: 'seven';
    src: url('../fonts/seven.ttf') format('truetype');
}

body {
  margin: 0;
  padding: 60px;
  background-color: #eee;
  font-family: arial;
}

article {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 500px;
  position: relative;
  z-index: 2;
  border-width: 70px;
  border-style: solid;
  -webkit-border-image: url(../images/border.png) 90 80 repeat;
     -moz-border-image: url(../images/border.png) 90 80 repeat;
          border-image: url(../images/border.png) fill 90 80 repeat;
  border-image-width: 70px;
}

h1 {
  position: absolute;
  top: -65px;
  left: 115px;
  z-index: 3;
  border-width: 30px 35px;
  border-style: solid;
  -webkit-border-image: url(../images/title.png) 35 30 repeat;
     -moz-border-image: url(../images/title.png) 35 30 repeat;
          border-image: url(../images/title.png) fill 35 30 repeat;
  border-image-width: 30px 35px;
  font-family: seven;
  font-weight: normal;
  margin: 0;
  padding: 0;

}

#backdrop {
  margin: 0;
  padding: 0;
  background-repeat: repeat-x;
  position: relative;
  z-index: 1;
}

#ninja {
  position: absolute;
  bottom: 15px;
  left: 20px;
  background-repeat: no-repeat;
}

ul.actions {
  list-style: none;
  position: absolute;
  bottom: -65px;
  left: 0;
  margin: 0;
  padding: 0;
}

ul.actions li {
  float: left;
  list-style: none;
  background-color: #838383;
  border-style: solid;
  border-width: 2px;
  border-color: #ababab #555 #555 #ababab;
  -webkit-border-radius:10px;
     -moz-border-radius:10px;
          border-radius:10px;
  padding: 5px 15px;
  margin: 0 5px 0 0;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}


/** Backdrop images **/

.temple {
  background-image: url("../images/temple.png");
}


/** Ninja images **/

.walk {
  background-image: url("../images/walk-sequence.png");
}

.flip {
  background-image: url("../images/flip-sequence.png");
}

.pose {
  background-image: url("../images/flip-sequence.png");
  background-position: 0 0;
}

.hide {
  background-image: url("../images/hide.png");
  background-position: 0 0;
}