@font-face {
  font-family: Bangers;
  src: url(file:///fonts/Banges.ttf);
}

@font-face {
    font-family: Galapogo;
    src: url(file:///fonts/galapogo.ttf);
}

body {
  color: #3f2614;
  font-family: Bangers;
  background: #eec285;
  margin:0;
  padding: 0;
}


nav a {
  float: left;
  width: 45%;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  height: 35px;
  padding-top: 10px;
  margin-left: 10px;
  font-weight: bold;
  font-size: 20px;
  color:  #ffe2bb;
}

.achivements-page nav{
    display: none;
}
/*.leaderboard_page nav a {*/
  /*width: 27%;*/
/*}*/

.leaderboard_page ul {
    margin-top: 44px;
}

.leaderboard_page  * {
    box-sizing: border-box;
}


nav a[data-content='daily_achievements'] {
  border-bottom-left-radius: 10px;
}

nav a[data-content='daily_achievements'] {
  border-bottom-right-radius: 10px;
}

nav {
  width: 100%;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  padding-top: 5px;

  color: #ffe2bb;
  background-color: #3f2614;
  border-bottom: #eec285 4px solid;
}

nav a.selected {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 1000;
  background: #eec285;
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(57%,#ffe2bb), color-stop(100%,#eec285)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #ffe2bb 57%,#eec285 100%); /* Chrome10+,Safari5.1+ */
  background: radial-gradient(ellipse at center, #ffe2bb 57%,#eec285 100%); /* W3C */
  color: #3f2614;
}

ul {
  clear: both;
  margin: 0;
  padding: 0;
  display: none;
}

ul {

  list-style: none;
  display: none;
  margin: 0;
  /*margin-top: 44px;*/
  padding: 0;

  background: #ffe2bb; /* Old browsers */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(57%,#ffe2bb), color-stop(100%,#eec285)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #ffe2bb 57%,#eec285 100%); /* Chrome10+,Safari5.1+ */
  background: radial-gradient(ellipse at center, #ffe2bb 57%,#eec285 100%); /* W3C */

}

ul.selected {
  display: block;
}

.achievements li, .leaderboard_page li {
  margin: 0;
  padding: 8px 0 8px 8px;
  border-bottom:  2px solid #d3ad80;
  color: #3f2614;
}

li#resetItem {
    text-align: center;
}

.achievements li {
    min-height: 54px;

}

.leaderboard_page li span{
    display: inline-block;
    margin-right: 8px;
    font-size: 22px;
    vertical-align: middle;
    height: 28px;
}

.leaderboard_page li {
    position: relative;
    min-height: 44px;
    vertical-align: middle;
}

.leaderboard_page li .rank {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: #3f2614;
    color: #ffe2bb;
    text-align: center;
    padding: 3px;
    font-size: 26px;
    line-height: 26px;
}


.leaderboard_page li .name {
    display: inline-block;
    font-family: "Galapogos BRK";
    font-size: 26px;
    height: 28px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 180px;
}

.leaderboard_page li .score {
    height: 28px;
    position: absolute;
    right: 8px;
    top: 8px;
    margin-right: 0;
    padding-right: 6px;
}

.leaderboard_page li.me {
    font-size: 30px;
    font-weight: bold;
    position: fixed;
    bottom: 0;
    z-index: 100;
    background: #d3ad80;
    width: 100%;
    border-top:  2px solid #d3ad80;
    height: 26px;
}

.leaderboard_page .leaderboards {
    margin-bottom: 44px;
}

.leaderboard_page .daily_leaderboards {
    margin-bottom: 72px;
}


.leaderboard_page .daily_leaderboards li.me {
    margin: 0;
    height: 44px !important;
    bottom: 28px;
    background: #d3ad80;
}

.leaderboard_page .daily_leaderboards li.me div {
    margin: 0 0 -1px -10px;
    clear:both;
    background: #3f2614;
    color: #ffe2bb;
    text-align: center;
    font-size: 26px;
}

.leaderboard_page li.me .rank{
    background: none;
    width: auto;
    color:  #3f2614;
}



.achievement .icon {
  float: left;
  width: 51px;
  height: 51px;
  border-radius: 28px;
  border: 2px solid #876d50;
  margin-right: 5px;
  position: relative;
}


.achievements li.achievement.achieved {
  color: #3f2614;
}

.achievements li.achievement.achieved .icon  {
  border-color: #311600;
}

.achievement h2 {
  margin: 0;
  padding: 0;
  font-size: 18px;
}

@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-size: 51px 51px;
  }
}