style
  @font-face {
    font-family: 'origicideregular';
    src: url('https://p-insurgence.com/fonts/Origicide-webfont.eot');
    src: url('https://p-insurgence.com/fonts/Origicide-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://p-insurgence.com/fonts/Origicide-webfont.woff') format('woff'),
         url('https://p-insurgence.com/fonts/Origicide-webfont.ttf') format('truetype'),
         url('https://p-insurgence.com/fonts/Origicide-webfont.svg#origicideregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  body {
    font-family: 'Helvetica Neue', Helvetica, Arial;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #3b3b3b;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    background: #2b2b2b;
  }
  .wrapper {
    margin: 0 auto;
    padding: 40px;
    max-width: 800px;
  }
  table {
    margin: 0 0 40px 0;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    display: table;
  }
  @media screen and (max-width: 580px) {
    .table {
      display: block;
    }
  }
  .row {
    display: table-row;
    background: #f6f6f6;
  }
  .row:nth-of-type(odd) {
    background: #e9e9e9;
  }
  .row.header {
    font-weight: 900;
    color: #fff;
    background: #ea6153;
  }
  .row.header.name {
    font-family: 'origicideregular';
    font-size: large;
    font-weight: 100;
  }
  .row.green {
    background: #27ae60;
  }
  .row.blue {
    background: #2980b9;
  }
  @media screen and (max-width: 580px) {
    .row {
      padding: 8px 0;
      display: block;
    }
  }
  .cell {
    padding: 6px 12px;
    display: table-cell;
    width: 50px;
  }
  @media screen and (max-width: 580px) {
    .cell {
      padding: 2px 12px;
      display: block;
    }
  }
  a {
    color: black;
    text-decoration: none;
  }
  .crown {
    vertical-align: bottom;
    width: 25px;
    float: right;
  }

div
  .wrapper
    .table
      .row.header.name
        .cell
        .cell Insurgence
        .cell OU
        .cell
        .cell
      .row.header
        .cell
          | Rank
        .cell
          | Player
        .cell
          | Score
        .cell
          | Win Ratio
        .cell
          | Total Battles
      each member, i in players
        .row
          .cell
            | #{i + 1}
            if i == 0
              img.crown(src="../Sprites/images/goldcrown.png")
            else if i == 1
              img.crown(src="../Sprites/images/silvercrown.png")
            else if i == 2
              img.crown(src="../Sprites/images/bronzecrown.png")
          .cell
            | <a href=http://forums.p-insurgence.com/users/#{member.username}>#{member.username}</a>
          .cell
            | #{member.score}
          - var totalbattles = member.ratio.win + member.ratio.draw + member.ratio.lose
          - var winratio = ((member.ratio.win / totalbattles) * 100).toFixed(2)
          .cell
            | #{winratio}%
          .cell
            | #{totalbattles}