/*
@font-face {
  font-family: 'Pokemon Solid';
  src: url('/theme/font/pokemon-solid.ttf');
}
@font-face {
  font-family: 'Pokemon Hollow';
  src: url('/theme/font/pokemon-hollow.ttf');
}
*/

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html, body {
  width: 100%;
  height: 100%;
}
body {
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  color: #000;
  background-color: #ccc;
  background-repeat: no-repeat;
  text-align: center;
  padding: 0;
  margin: 0;
}
  body.js {
    overflow: hidden;
  }
code, pre {
  white-space: pre;
  text-align: left;
  display: block;
}
a {
  -moz-transition: color 0.2s linear, background-color 0.2s linear;
  -webkit-transition: color 0.2s linear, background-color 0.2s linear;
  transition: color 0.2s linear, background-color 0.2s linear;
}
abbr {
  border-bottom: 1px dotted #b8b8d0;
}

/* Title and navigation popups */
.info-pop > ul {
  position: absolute;
  right: 0;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 5px;
  margin: 7px 0 0;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  -moz-transition: opacity 0.2s linear, visibility 0.2s linear;
  -webkit-transition: opacity 0.2s linear, visibility 0.2s linear;
  -o-transition: opacity 0.2s linear, visibility 0.2s linear;
  -ms-transition: opacity 0.2s linear, visibility 0.2s linear;
  transition: opacity 0.2s linear, visibility 0.2s linear;
}
  .info-pop > ul:before {
    content: " ";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 0;
    height: 0;
    border-width: 0 10px 5px;
    border-style: none solid solid;
    border-color: transparent transparent rgba(255, 255, 255, 0.95);
    margin-left: -7px;
    box-shadow: none;
    -moz-transition: opacity 0.2s linear, visibility 0.2s linear;
    -webkit-transition: opacity 0.2s linear, visibility 0.2s linear;
    -o-transition: opacity 0.2s linear, visibility 0.2s linear;
    -ms-transition: opacity 0.2s linear, visibility 0.2s linear;
    transition: opacity 0.2s linear, visibility 0.2s linear;
  }
  .info-pop:hover > ul, .info-pop.touch-hover > ul, .info-pop:hover > ul:before, .info-pop.touch-hover > ul:before,
  .info-pop.active > ul, .info-pop.active > ul:before {
    opacity: 1;
    visibility: visible;
  }
  .info-pop > ul li {
    line-height: 28px;
    text-align: left;
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
    white-space: nowrap;
  }
    .info-pop > ul li a {
      color: #444;
      text-decoration: none;
      text-shadow: 1px 1px 0 #ccc;
      padding: 0 8px;
      border-radius: 5px;
      display: block;
    }
      .info-pop > ul li a:hover, .info-pop > ul li a.focus {
        background-color: #d8d8c0;
      }
    .info-pop > ul li aside {
      vertical-align: middle;
      margin: 0 2px;
      display: inline-block;
    }
  .info-pop > ul.column {
    min-width: 256px;
  }
    .info-pop > ul.column li {
      min-width: 50%;
      display: inline-block;
    }
    .info-pop > ul.column.three li {
      min-width: 33.3%;
      display: inline-block;
    }

body > header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #e2e2e2;
  background-image: -moz-linear-gradient(top,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #bababa 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#bababa));
  background-image: -webkit-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#bababa 100%);
  background-image: -o-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#bababa 100%);
  background-image: -ms-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#bababa 100%);
  background-image: linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#bababa 100%);
  text-align: left;
  box-shadow: 0 2px 2px #555;
  z-index: 1001;
}
  body > header > nav.info-pop {
    position: relative;
    display: inline-block;
  }
    body > header > nav.info-pop ul {
      top: 35px;
      left: 10px;
      right: auto;
    }
  body > header h1 {
    font-style: normal;
    font-weight: normal;
    color: #012446;
    text-align: left;
    margin: 0;
  }
    body > header h1 a {
      line-height: 42px;
      text-decoration: none;
      padding: 0 10px;
    }
      body > header h1 a img {
        vertical-align: middle;
        border: 0 none;
      }
/*
    body > header h1 a {
      position: relative;
      line-height: 1.5em;
      font-family: 'Pokemon Solid', sans-serif;
      font-size: 24px;
      color: #012446;
      text-decoration: none;
      padding: 0 0 0 1em;
      z-index: 1001;
    }
      body > header h1 a:before {
        content: attr(title);
        position: absolute;
        top: -0.1em;
        left: 0.9em;
        width: 100%;
        font-family: 'Pokemon Solid', sans-serif;
        color: #d7c100;
        z-index: 1002;
      }
      body > header h1 a:after {
        content: attr(title);
        position: absolute;
        top: -0.1em;
        left: 0.9em;
        width: 100%;
        font-family: 'Pokemon Hollow', sans-serif;
        color: #0c5680;
        text-shadow: 0 0 0 #0c5680;
        z-index: 1003;
      }
*/
    body > header > div {
      position: absolute;
      top: 0;
      right: 0;
      padding: 0.6em;
      z-index: 1004;
    }
    body > header div nav {
      display: inline-block;
      cursor: default;
      opacity: 0.7;
      -moz-transition: opacity 0.2s linear;
      -webkit-transition: opacity 0.2s linear;
      transition: opacity 0.2s linear;
    }
      body > header div nav:hover {
        opacity: 1;
      }
      body > header div nav .games {
        border-radius: 8px 0 0 8px;
        vertical-align: middle;
      }
      body > header div nav .region {
        width: 44px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        text-align: center;
        color: #888;
        background-color: rgba(238, 238, 238, 0);
        border: 1px solid #aaa;
        border-left: 0 none;
        border-radius: 0 8px 8px 0;
        -moz-transition: width 0.2s linear, background-color 0.2s linear;
        -webkit-transition: width 0.2s linear, background-color 0.2s linear;
        transition: width 0.2s linear, background-color 0.2s linear;
        vertical-align: middle;
        display: inline-block;
      }
        body > header div nav:hover .region {
          background-color: rgba(238, 238, 238, 1);
        }
        body > header div nav .region.two-line {
          line-height: 12px;
        }
        body > header div nav .region em {
          line-height: 1em;
          font-size: 8px;
          text-transform: uppercase;
          margin-top: -1px;
          white-space: nowrap;
          display: block;
        }
    body > header form {
      display: inline-block;
    }
    body > header input {
      height: 18px;
      line-height: 18px;
      font-size: 10px;
      color: #888;
      background-color: rgba(238, 238, 238, 0);
      padding: 1px;
      border: 1px solid #aaa;
      margin: 0;
      -moz-transition: width 0.2s linear, background-color 0.2s linear;
      -webkit-transition: width 0.2s linear, background-color 0.2s linear;
      transition: width 0.2s linear, background-color 0.2s linear;
      vertical-align: middle;
    }
      body > header input[type="text"] {
        width: 80px;
        text-indent: 0.2em;
        border-radius: 0.8em 0 0 0.8em;
      }
      body > header input[type="submit"] {
        height: 22px;
        line-height: 22px;
        padding: 1px 5px;
        border-left: 0 none;
        border-radius: 0 0.8em 0.8em 0;
      }
      body > header input:hover, body > header input:active, body > header input:focus {
        color: #111;
        background-color: rgba(238, 238, 238, 1);
        box-shadow: 0 0 2px #666;
      }
      body > header input::-webkit-input-placeholder {
        color: #888;
        text-align: center;
      }
      body > header input:-moz-placeholder {
        color: #888;
        text-align: center;
      }
      body > header input:-o-input-placeholder {
        color: #888;
        text-align: center;
      }
    body.js > header input[type="text"] {
      border-radius: 0.8em;
    }
    body.js > header input[type="submit"] {
      display: none;
    }
    body > header .info-pop > ul {
      max-height: 300px;
      font-size: 12px;
      overflow: auto;
    }
      body > header form.info-pop > ul a {
        padding: 0 16px 0 2px;
      }
      body > header form.info-pop > ul strong {
        width: 135px;
        font-size: 14px;
        font-weight: normal;
        text-align: left;
        display: inline-block;
      }
      body > header form.info-pop > ul small {
        font-size: 10px;
        font-weight: normal;
        text-align: left;
        display: inline-block;
      }
      body > header form.info-pop > ul .type {
        font-size: 9px;
      }
body > footer {
  position: relative;
  height: 58px;
  font-size: 10px;
  color: #a8a878;
  background-color: #484038;
  padding: 0;
  border-top: 2px solid #705848;
  margin: 0;
  box-shadow: 0 0 2px #555;
  display: block;
  z-index: 1000;
}
  body > footer p {
    margin: 1em 0.2em 0;
  }
  body > footer a {
    color: inherit;
    text-decoration: none;
  }
    body > footer a:hover {
      text-decoration: underline;
    }
  body > footer a.secret {
    margin: 0 -16px -6px 0;
    vertical-align: middle;
    display: inline-block;
    opacity: 0.1;
  }
    body > footer a.secret:hover {
      opacity: 0.5;
    }

/* Debug output */
body > pre {
  font-size: 12px;
  font-family: monospace;
  color: #333;
  background-color: #ddd;
  padding: 0;
  margin: 0;
  white-space: normal;
  display: none;
}
  body > pre > h4 {
    padding: 1em 0.5em 0;
    margin: 0;
  }
  body > pre > p, body > pre > code {
    padding: 1em;
    border-bottom: 1px dotted #999;
    margin: 0;
    white-space: pre;
    overflow-x: auto;
  }
    body > pre > code {
      max-height: 20em;
      overflow-y: auto;
    }
  body > pre > p:last-child {
    border-bottom: 0 none;
  }

body > button.pane-nav {
  position: absolute;
  top: 50%;
  height: 90px;
  width: 16px;
  color: #555;
  background-color: #d1d1d1;
  font-size: 16px;
  text-align: center;
  padding: 0;
  border: 0 none;
  margin: -45px 0 0;
  display: none;
  outline: none;
  cursor: pointer;
  box-shadow: 0 0 1px #555;
  z-index: 1000;
  -moz-transition: background-color 0.2s linear;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}
  body.js > button.pane-nav {
    display: block;
  }
  body > button.pane-nav.previous {
    left: 0;
    border-radius: 0 16px 16px 0;
  }
  body > button.pane-nav.next {
    right: 0;
    border-radius: 16px 0 0 16px;
  }
  body > button.pane-nav:hover {
    background-color: #e1e1e1;
  }

body > img.loading {
  position: absolute;
  top: 47px;
  left: 2px;;
  width: 16px;
  height: 16px;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  -moz-transition: opacity 0.2s linear, visibility 0.2s linear;
  -webkit-transition: opacity 0.2s linear, visibility 0.2s linear;
  -o-transition: opacity 0.2s linear, visibility 0.2s linear;
  -ms-transition: opacity 0.2s linear, visibility 0.2s linear;
  transition: opacity 0.2s linear, visibility 0.2s linear;
}
  @-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);}7%{-webkit-transform:translateX(-5%) rotate(-20deg);}15%{-webkit-transform:translateX(4%) rotate(15deg);}22%{-webkit-transform:translateX(-3%) rotate(-15deg);}30%{-webkit-transform:translateX(2%) rotate(10deg);}37%{-webkit-transform:translateX(-1%) rotate(-5deg);}50%{-webkit-transform:translateX(0%);}100%{-webkit-transform:translateX(0%);}}
  @-moz-keyframes wobble{0%{-moz-transform:translateX(0%);}7%{-moz-transform:translateX(-5%) rotate(-20deg);}15%{-moz-transform:translateX(4%) rotate(15deg);}22%{-moz-transform:translateX(-3%) rotate(-15deg);}30%{-moz-transform:translateX(2%) rotate(10deg);}37%{-moz-transform:translateX(-1%) rotate(-5deg);}50%{-moz-transform:translateX(0%);}100%{-moz-transform:translateX(0%);}}
  @-o-keyframes wobble{0%{-o-transform:translateX(0%);}7%{-o-transform:translateX(-5%) rotate(-20deg);}15%{-o-transform:translateX(4%) rotate(15deg);}22%{-o-transform:translateX(-3%) rotate(-15deg);}30%{-o-transform:translateX(2%) rotate(10deg);}37%{-o-transform:translateX(-1%) rotate(-5deg);}50%{-o-transform:translateX(0%);}100%{-o-transform:translateX(0%);}}
  @keyframes wobble{0%{transform:translateX(0%);}7%{transform:translateX(-5%) rotate(-20deg);}15%{transform:translateX(4%) rotate(15deg);}22%{transform:translateX(-3%) rotate(-15deg);}30%{transform:translateX(2%) rotate(10deg);}37%{transform:translateX(-1%) rotate(-5deg);}50%{transform:translateX(0%);}100%{transform:translateX(0%);}}
  body > img.loading.active {
    opacity: 0.5;
    visibility: visible;
    -webkit-animation: wobble 2s linear infinite;
    -moz-animation: wobble 2s linear infinite;
    -o-animation: wobble 2s linear infinite;
    animation: wobble 2s linear infinite;
  }

body > section {
  position: relative;
  left: 0;
  width: 320px;
  min-height: 100%;
  margin: 0 auto;
  white-space: nowrap;
}
  body.js > section {
    height: 100%;
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -moz-transition: -moz-transform 0.1s ease-in-out;
    -webkit-transition: -webkit-transform 0.1s ease-in-out;
    -o-transition: -o-transform 0.1s ease-in-out;
    -ms-transition: -ms-transform 0.1s ease-in-out;
    transition: transform 0.1s ease-in-out;
  }
  body > section > div {
    width: 100%;
    height: 100%;
    vertical-align: top;
    display: inline-block;
    overflow: hidden;
  }
    body > section > div > div {
      width: 100%;
      height: 100%;
      padding-right: 20px;
      display: block;
      overflow: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }
    body > section > section, body > section > div > section, body > section > div > div > section {
      width: 28em;
      font-size: 10px;
      text-indent: 0;
    }
.dex {
  position: relative;
  top: 0;
  color: #000;
  background-color: #a8a878;
  vertical-align: top;
  padding: 0;
  border-style: solid;
  border-width: 0 2px;
  border-radius: 10px;
  margin: 60px 18px 20px;
  box-shadow: 0 5px 5px #555;
  display: inline-block;
  white-space: normal;
  z-index: 999;
  transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0), scale3d(1, 1, 1);
  -webkit-transform: translate3d(0, 0, 0), scale3d(1, 1, 1);
  -o-transform: translate3d(0, 0, 0), scale3d(1, 1, 1);
  -ms-transform: translate3d(0, 0, 0), scale3d(1, 1, 1);
  transform: translate3d(0, 0, 0), scale3d(1, 1, 1);
  -moz-transition: -moz-transform 0.1s linear;
  -webkit-transition: -webkit-transform 0.1s linear;
  -o-transition: -o-transform 0.1s linear;
  -ms-transition: -ms-transform 0.1s linear;
  transition: transform 0.1s linear;
}
  .dex.focus {
    box-shadow: 0 8px 8px #555;
  }
  .dex.unfocus {
    -moz-transform: translate3d(0, 10px, 0);
    -webkit-transform: translate3d(0, 10px, 0);
    -o-transform: translate3d(0, 10px, 0);
    -ms-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
    box-shadow: 0 2px 2px #555;
  }
  .dex.new {
    -moz-transform: scale3d(0, 1, 1);
    -webkit-transform: scale3d(0, 1, 1);
    -o-transform: scale3d(0, 1, 1);
    -ms-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
  }
  .dex > .close {
    position: absolute;
    top: -0.5em;
    right: -0.5em;
    width: 0.9em;
    height: 0.9em;
    line-height: 0.8em;
    color: #fff;
    background-color: #000;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border: 2px solid #fff;
    border-radius: 50%;
    opacity: 0;
    cursor: pointer;
    -moz-transition: opacity 0.2s ease-out;
    -webkit-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    -ms-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
  }
    .dex:hover > .close {
      opacity: 1;
    }
  .dex > header {
    position: relative;
    min-height: 1em;
    line-height: 1em;
    font-size: 20px;
    color: #fff;
    font-style: normal;
    font-weight: normal;
    text-transform: capitalize;
    text-shadow: 2px 2px 0 #807870;
  }
    .dex > header h1 {
      font-size: 1em;
      font-style: normal;
      font-weight: normal;
      text-align: left;
      padding: 0;
      margin: 10px 10px 0;
    }
      .dex > header h1 em {
        font-size: 0.7em;
        font-style: normal;
        text-transform: uppercase;
      }
    .dex > header h2 {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 12px;
      font-style: normal;
      font-weight: normal;
      text-shadow: 1px 1px 0 #807870;
      text-align: right;
      padding: 0;
      margin: 0 10px;
    }
      .dex > header h2 span {
        opacity: 0.8;
      }
        .dex > header h2 span em {
          font-size: 10px;
          font-style: normal;
          text-transform: uppercase;
        }
    .dex > header input {
      position: absolute;
      right: 0;
      width: 25%;
      height: 1.6em;
      line-height: 1.6em;
      color: #888;
      background-color: #ddd;
      text-indent: 0.8em;
      border: 1px solid #aaa;
      border-radius: 0.8em;
      margin: 0 -1px;
      -moz-transition: width 0.2s linear;
      -webkit-transition: width 0.2s linear;
      transition: width 0.2s linear;
      display: none;
    }
      .dex > header input:focus {
        width: 100%;
        color: #111;
        background-color: #eee;
        box-shadow: 0 0 2px #666;
      }
      .dex > header input.loading {
        background-image: url('/theme/image/loading.gif');
        background-position: 3px center;
        background-repeat: no-repeat;
        text-indent: 22px;
      }
    .dex > header nav {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 2em;
      line-height: inherit;
      font-size: 12px;
      font-weight: normal;
      color: #d8d8c0;
      text-align: right;
      text-transform: none;
      text-shadow: 1px 1px 0 #807870;
      padding-right: 2px;
      margin: 0 10px;
      cursor: default;
    }
      .dex > header nav ul li {
        min-width: 150px;
        text-align: right;
      }
        .dex > header nav ul li span {
          margin-right: 5px;
          float: left;
        }
    .dex > header img {
      vertical-align: middle;
      margin: -0.5em 0;
    }

  .dex > div {
    color: #000;
    background: #ECF5FA;
    font-size: 14px;
    text-align: left;
    padding: 10px;
    margin: 10px 0;
    clear: both;
  }
    .dex > div.pokeball {
      background-image: url('/theme/image/pokeball-transparent.png');
      background-position: center center;
      background-repeat: no-repeat;
    }
    .dex > div > *:first-child {
      margin-top: 0;
    }
    .dex > div > *:last-child {
      margin-bottom: 0;
    }
    .dex > div a {
      color: inherit;
    }
      .dex > div a:hover {
        text-decoration: none;
      }
    .dex > div h3 {
      font-size: inherit;
      font-weight: bold;
    }
    .dex > div hr {
      border-color: #705848;
      border-style: solid;
      border-width: 1px 0 0;
    }
    .dex > div.small, .dex > div .small {
      font-size: 12px;
    }
    .dex > div ul {
      padding: 0 0 0 1.5em;
      margin: 0.2em 0px 0.5em;
    }
      .dex > div ul li {
        padding: 0;
        margin: 0;
      }
    .dex > div > ul.top-list, .dex > div > ul.dex-list {
      font-size: 12px;
      line-height: 1.6em;
      background-color: transparent;
      background-color: rgba(255, 255, 255, 0.3);
      padding: 0;
      border-radius: 5px;
      margin: 10px 0;
      list-style: none;
      display: block;
      overflow: hidden;
      clear: both;
      box-shadow: 0 0 1px rgba(184, 184, 208, 0.7);
    }
      .dex > div > ul.dex-list {
        width: 60%;
        margin: 10px auto;
      }
      .dex > div > ul.top-list > li {
        width: 50%;
        padding: 0;
        margin: 0;
        list-style: none;
        display: inline-block;
      }
      .dex > div > ul.dex-list > li {
        padding: 0;
        margin: 0;
        list-style: none;
        display: block;
      }
        .dex > div > ul.top-list > li:nth-child(4n-1), .dex > div > ul.top-list > li:nth-child(4n-2), .dex > div > ul.dex-list > li:nth-child(even) {
          background-color: #d8d8c0;
          background-color: rgba(216, 216, 192, 0.3);
        }
      .dex > div > ul.top-list > li a, .dex > div > ul.dex-list > li a {
        line-height: 30px;
        color: #000;
        text-align: left;
        text-decoration: none;
        padding: 0;
        display: block;
      }
        .dex > div > ul.top-list > li a:hover, .dex > div > ul.dex-list > li a:hover {
          background-color: #b8b8d0;
          background-color: rgba(184, 184, 208, 0.7);
        }
        .dex > div > ul.top-list > li aside.psi, .dex > div > ul.dex-list > li aside.psi {
          vertical-align: middle;
          margin: 0 0.3em;
          display: inline-block;
        }
        .dex > div > ul.top-list > li strong {
          width: 36%;
          font-size: 14px;
          text-align: left;
          font-weight: normal;
          vertical-align: middle;
        }
    .dex > div table {
      width: 100%;
      background-color: rgba(255, 255, 255, 0.3);
      font-size: 12px;
      text-align: center;
      border-radius: 3px;
    }
      .dex > div table tr:nth-child(even) th, .dex > div table tr:nth-child(even) td {
        background-color: rgba(216, 216, 192, 0.3);
      }
      .dex > div table tr:hover th, .dex > div table tr:hover td {
        background-color: rgba(184, 184, 208, 0.7);
      }
      .dex > div table tr th.blank, .dex > div table tr td.blank {
        background-color: transparent;
      }
    .dex > div .hidden {
      display: none;
    }
      body.ipad .dex > div .hidden.ipad, body.iphone .dex > div .hidden.iphone {
        display: block;
      }
    .dex > div .secret {
      position: absolute;
      right: 5px;
      bottom: 13px;
      float: right;
      opacity: 0.025;
    }
      .dex > div .secret:hover {
        float: right;
        opacity: 0.4;
      }
  /*
  .dex > aside {
    font-size: 11px;
    text-align: right;
    color: #fff;
    margin: 0.5em 1em 0; 
  }
  */
  .dex > aside {
    width: 96px;
    height: 96px;
    font-size: 11px;
    text-align: right;
    color: #fff;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.8);
    /*
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    */
    border-radius: 5px;
    margin: 10px 10px 15px;
    float: right;
  }
    .dex > aside > img {
      margin: -12px;
    }
  .dex > ul {
    font-size: 12px;
    line-height: 1.6em;
    background-color: #fff;
    padding: 0;
    border-radius: 5px;
    margin: 10px;
    list-style: none;
    display: block;
    overflow: hidden;
    clear: both;
  }
    .dex > ul > li {
      padding: 0;
      margin: 0;
      list-style: none;
      display: block;
    }
      .dex > ul > li:nth-child(even), .dex > ul > li.even {
        background-color: #d8d8c0;
      }
      .dex > ul > li.odd {
        background-color: #fff;
      }
      .dex > ul > li.hide {
        display: none;
      }
    .dex > ul > li a {
      height: 32px;
      color: #000;
      text-align: left;
      text-decoration: none;
      padding: 0 0 0 0.8em;
      display: block;
    }
      .dex > ul > li a:hover {
        background-color: #b8b8d0;
      }
      .dex > ul > li span {
        width: 10%;
        font-size: 10px;
        text-align: center;
        vertical-align: middle;
        display: inline-block;
      }
        .dex > ul > li span.sub {
          line-height: 12px;
        }
        .dex > ul > li span.sub em {
          font-size: 8px;
          font-style: normal;
          text-transform: uppercase;
          margin: 0 -8px;
          display: block;
          opacity: 0.6;
        }
      .dex > ul > li aside.psi {
        vertical-align: middle;
        margin: 0 0.2em;
        display: inline-block;
      }
      .dex > ul > li strong {
        width: 35%;
        font-size: 14px;
        text-align: left;
        font-weight: normal;
        vertical-align: middle;
        display: inline-block;
      }
      .dex > ul > li .type {
        font-size: 9px;
        vertical-align: middle;
        display: inline-block;
      }
  /*
  .dex > .pi {
    margin: 10px 10px 15px;
    float: right;
  }
  */
    .dex nav.forms {
      position: relative;
      text-align: center;
      text-shadow: 1px 1px 0 #807870;
      /*
      padding-top: 100%;
      */
    }
      .dex nav.forms ul li a {
        padding-left: 0;
      }
  .dex > .psi {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    margin: 10px;
    float: right;
  }
  .dex > dl {
    font-size: 12px;
    line-height: 1.6em;
    background-color: #fff;
    padding: 0.2em 0.7em;
    border-radius: 5px;
    margin: 10px;
    overflow: hidden;
  }
    .dex > dl dt {
      text-shadow: 1px 1px 0 #ccc;
      margin-right: 0.5em;
      float: left;
    }
    .dex > dl dd {
      color: #444;
      border-bottom: 1px dotted #ddd;
      margin: 0;
    }
      .dex > dl dd:last-child {
        border-bottom: 0 none;
      }
  .dex > dl.info {
    margin-right: 0;
  }
  .dex > dl.effect {
    padding: 0;
    clear: both;
  }
    .dex > dl.effect dt {
      width: 40px;
      line-height: 26px;
      text-align: center;
      padding-left: 5px;
      margin: 0;
      float: left;
      clear: both;
    }
      .dex > dl.effect dt.x4 {
        color: #c03028;
        font-size: 18px;
      }
        .dex > dl.effect dt.x4 + dd {
          background-color: #ffd9d7;
        }
      .dex > dl.effect dt.x2 {
        color: #f08030;
        font-size: 16px;
      }
        .dex > dl.effect dt.x2 + dd {
          background-color: #ffe8d7;
        }
      .dex > dl.effect dt.x1 {
        color: #a8a878;
        font-size: 14px;
      }
        .dex > dl.effect dt.x1 + dd {
          background-color: #f0f0fa;
        }
      .dex > dl.effect dt.x-5 {
        color: #a8b820;
        font-size: 14px;
      }
        .dex > dl.effect dt.x-5 + dd {
          background-color: #fbffd7;
        }
      .dex > dl.effect dt.x-25 {
        color: #78c850;
        font-size: 14px;
      }
        .dex > dl.effect dt.x-25 + dd {
          background-color: #e4ffd7;
        }
      .dex > dl.effect dt.imm {
        color: #b8b8d0;
        font-size: 10px;
      }
        .dex > dl.effect dt.imm + dd {
          background-color: #ebebf5;
        }
      .dex > dl.effect dt em {
        font-size: 18px;
        font-style: normal;
        float: left;
      }
      .dex > dl.effect dt em {
        font-size: 18px;
        font-style: normal;
        float: left;
      }
    .dex > dl.effect dd {
      line-height: 18px;
      font-size: 11px;
      text-align: center;
      padding: 4px 0 4px 45px;
      border-bottom: 0 none;
    }
      .dex > dl.effect dd strong {
        font-weight: normal;
        white-space: nowrap;
      }

  .dex > dl.stats {
    background-color: #705848;
    padding: 2px;
    border: 1px solid #484038;
  }
    .dex > dl.stats dt {
      max-width: 89%;
      line-height: 1.4em;
      color: #fff;
      text-align: left;
      text-indent: 0.4em;
      text-shadow: 0.05em 0.05em 0 #807870, -0.05em -0.05em 0 #807870;
      border-width: 0.1em 0;
      border-style: solid;
      border-radius: 0.25em;
      margin: 0;
      white-space: nowrap;
    }
      .dex > dl.stats dt.hp { background-color: #c03028; border-top-color: #f08030; border-bottom-color: #484038; }
      .dex > dl.stats dt.attack { background-color: #f08030; border-top-color: #f8d030; border-bottom-color: #c03028; }
      .dex > dl.stats dt.defence { background-color: #f8a600; border-top-color: #fbd000; border-bottom-color: #bba236; }
/*      .dex > dl.stats dt.defence { background-color: #f8d030; border-top-color: #f8f878; border-bottom-color: #b8a038; }*/
      .dex > dl.stats dt.spattack { background-color: #6890f0; border-top-color: #98d8d8; border-bottom-color: #807870; }
      .dex > dl.stats dt.spdefence { background-color: #78c850; border-top-color: #c0f860; border-bottom-color: #588040; }
      .dex > dl.stats dt.speed { background-color: #f85888; border-top-color: #f8c0b0; border-bottom-color: #906060; }
    .dex > dl.stats dd {
      color: #fff;
      text-align: right;
      padding-right: 4px;
      border-bottom-color: #484038;
    }
  .dex > dl.abilities {
  }
    .dex > dl.abilities dd {
      text-align: left;
      padding-left: 1.6em;
    }
    .dex > dl.abilities dd.secret {
      background-color: #f0f0fa;
      padding: 0 0.7em 0.7em 2.3em;
      border-top: 1px dotted #b8b8d0;
      margin: -1px -0.7em -0.7em;
    }
  .dex > ul.evolution {
  }
    .dex > ul.evolution li {
      list-style: none;
      display: block;
    }
      .dex > ul.evolution li a {
        line-height: 26px;
        text-align: left;
        padding: 0 0.2em;
        display: block;
      }
        .dex > ul.evolution li a aside, .dex > ul.evolution li a strong, .dex > ul.evolution li a em {
          vertical-align: middle;
          margin: 0;
          display: inline-block;
          float: none;
        }
          .dex > ul.evolution li a strong {
            width: auto;
          }
          .dex > ul.evolution li a span {
            width: auto;
            line-height: 1.2em;
            font-size: 8px;
            font-style: normal;
            margin-left: 0.5em;
            vertical-align: middle;
            display: inline-block;
            float: none;
          }
      .dex > ul.evolution li a.current {
        background-color: #f0f0fa;
      }
      .dex > ul.evolution ul li a {
        border-radius: 5px 0 0 5px;
      }
      .dex > ul.evolution li ul {
        position: relative;
        padding: 0 0 0 2em;
        overflow: hidden;
      }
        .dex > ul.evolution ul li:before {
          content: '';
          position: absolute;
          width: 0.5em;
          height: 5.4em;
          border-width: 0 0 1px 1px;
          border-style: solid;
          border-color: #b8b8d0;
          border-radius: 0 0 0 3px;
          margin: -4.3em 0 0 -0.5em;
          box-shadow: -1px 1px 0 #d8d8c0;
          display: block;
        }

  .dex, .dex.normal { background-color: #a8a878; border-left-color: #d8d8c0; border-right-color: #705848; }
  .dex.fire { background-color: #f08030; border-left-color: #f8d030; border-right-color: #c03028; }
  .dex.water { background-color: #6890f0; border-left-color: #98d8d8; border-right-color: #807870; }
  .dex.grass { background-color: #78c850; border-left-color: #c0f860; border-right-color: #588040; }
  .dex.electric { background-color: #f8d030; border-left-color: #f8f878; border-right-color: #b8a038; }
  .dex.ice { background-color: #98d8d8; border-left-color: #d0f8e8; border-right-color: #9090a0; }
  .dex.fighting { background-color: #c03028; border-left-color: #f08030; border-right-color: #484038; }
  .dex.poison { background-color: #a040a0; border-left-color: #d880b8; border-right-color: #483850; }
  .dex.ground { background-color: #e0c068; border-left-color: #f8f878; border-right-color: #886830; }
  .dex.flying { background-color: #a890f0; border-left-color: #c8c0f8; border-right-color: #705898; }
  .dex.psychic { background-color: #f85888; border-left-color: #f8c0b0; border-right-color: #906060; }
  .dex.bug { background-color: #a8b820; border-left-color: #d8e030; border-right-color: #789010; }
  .dex.rock { background-color: #b8a038; border-left-color: #e0c068; border-right-color: #886830; }
  .dex.ghost { background-color: #705898; border-left-color: #a890f0; border-right-color: #483850; }
  .dex.dragon { background-color: #7038f8; border-left-color: #b8a0f8; border-right-color: #483890; }
  .dex.dark { background-color: #705848; border-left-color: #a8a878; border-right-color: #484038; }
  .dex.steel { background-color: #b8b8d0; border-left-color: #d8d8c0; border-right-color: #807870; }
  .dex.fairy { background-color: #e29ae5; border-left-color: #f4d7f5; border-right-color: #9d6b9f; }
  .dex.none { background-color: #68a090; border-left-color: #78c850; border-right-color: #588040; }

  .dex.sub-normal {
    background-image: -moz-linear-gradient(left, rgba(168,168,120,0) 0%, rgba(168,168,120,0) 49%, rgba(168,168,120,1) 51%, rgba(168,168,120,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(168,168,120,0)), color-stop(51%,rgba(168,168,120,1)));
    background-image: -webkit-linear-gradient(left, rgba(168,168,120,0) 49%,rgba(168,168,120,1) 51%);
    background-image: -o-linear-gradient(left, rgba(168,168,120,0) 49%,rgba(168,168,120,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(168,168,120,0) 49%,rgba(168,168,120,1) 51%);
    background-image: linear-gradient(left, rgba(168,168,120,0) 49%,rgba(168,168,120,1) 51%);
    border-right-color: #705848;
  }
  .dex.sub-fire {
    background-image: -moz-linear-gradient(left, rgba(240,128,48,0) 0%, rgba(240,128,48,0) 49%, rgba(240,128,48,1) 51%, rgba(240,128,48,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(240,128,48,0)), color-stop(51%,rgba(240,128,48,1)));
    background-image: -webkit-linear-gradient(left, rgba(240,128,48,0) 49%,rgba(240,128,48,1) 51%);
    background-image: -o-linear-gradient(left, rgba(240,128,48,0) 49%,rgba(240,128,48,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(240,128,48,0) 49%,rgba(240,128,48,1) 51%);
    background-image: linear-gradient(left, rgba(240,128,48,0) 49%,rgba(240,128,48,1) 51%);
    border-right-color: #c03028;
  }
  .dex.sub-water {
    background-image: -moz-linear-gradient(left, rgba(104,144,240,0) 0%, rgba(104,144,240,0) 49%, rgba(104,144,240,1) 51%, rgba(104,144,240,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(104,144,240,0)), color-stop(51%,rgba(104,144,240,1)));
    background-image: -webkit-linear-gradient(left, rgba(104,144,240,0) 49%,rgba(104,144,240,1) 51%);
    background-image: -o-linear-gradient(left, rgba(104,144,240,0) 49%,rgba(104,144,240,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(104,144,240,0) 49%,rgba(104,144,240,1) 51%);
    background-image: linear-gradient(left, rgba(104,144,240,0) 49%,rgba(104,144,240,1) 51%);
    border-right-color: #807870;
  }
  .dex.sub-grass {
    background-image: -moz-linear-gradient(left, rgba(120,200,80,0) 0%, rgba(120,200,80,0) 49%, rgba(120,200,80,1) 51%, rgba(120,200,80,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(120,200,80,0)), color-stop(51%,rgba(120,200,80,1)));
    background-image: -webkit-linear-gradient(left, rgba(120,200,80,0) 49%,rgba(120,200,80,1) 51%);
    background-image: -o-linear-gradient(left, rgba(120,200,80,0) 49%,rgba(120,200,80,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(120,200,80,0) 49%,rgba(120,200,80,1) 51%);
    background-image: linear-gradient(left, rgba(120,200,80,0) 49%,rgba(120,200,80,1) 51%);
    border-right-color: #588040;
  }
  .dex.sub-electric {
    background-image: -moz-linear-gradient(left, rgba(248, 208, 48,0) 0%, rgba(248, 208, 48,0) 49%, rgba(248, 208, 48,1) 51%, rgba(248, 208, 48,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(248, 208, 48,0)), color-stop(51%,rgba(248, 208, 48,1)));
    background-image: -webkit-linear-gradient(left, rgba(248, 208, 48,0) 49%,rgba(248, 208, 48,1) 51%);
    background-image: -o-linear-gradient(left, rgba(248, 208, 48,0) 49%,rgba(248, 208, 48,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(248, 208, 48,0) 49%,rgba(248, 208, 48,1) 51%);
    background-image: linear-gradient(left, rgba(248, 208, 48,0) 49%,rgba(248, 208, 48,1) 51%);
    border-right-color: #b8a038;
  }
  .dex.sub-ice {
    background-image: -moz-linear-gradient(left, rgba(152, 216, 216,0) 0%, rgba(152, 216, 216,0) 49%, rgba(152, 216, 216,1) 51%, rgba(152, 216, 216,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(152, 216, 216,0)), color-stop(51%,rgba(152, 216, 216,1)));
    background-image: -webkit-linear-gradient(left, rgba(152, 216, 216,0) 49%,rgba(152, 216, 216,1) 51%);
    background-image: -o-linear-gradient(left, rgba(152, 216, 216,0) 49%,rgba(152, 216, 216,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(152, 216, 216,0) 49%,rgba(152, 216, 216,1) 51%);
    background-image: linear-gradient(left, rgba(152, 216, 216,0) 49%,rgba(152, 216, 216,1) 51%);
    border-right-color: #9090a0;
  }
  .dex.sub-fighting {
    background-image: -moz-linear-gradient(left, rgba(192,48,40,0) 0%, rgba(192,48,40,0) 49%, rgba(192,48,40,1) 51%, rgba(192,48,40,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(192,48,40,0)), color-stop(51%,rgba(192,48,40,1)));
    background-image: -webkit-linear-gradient(left, rgba(192,48,40,0) 49%,rgba(192,48,40,1) 51%);
    background-image: -o-linear-gradient(left, rgba(192,48,40,0) 49%,rgba(192,48,40,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(192,48,40,0) 49%,rgba(192,48,40,1) 51%);
    background-image: linear-gradient(left, rgba(192,48,40,0) 49%,rgba(192,48,40,1) 51%);
    border-right-color: #484038;
  }
  .dex.sub-poison {
    background-image: -moz-linear-gradient(left, rgba(160,64,160,0) 0%, rgba(160,64,160,0) 49%, rgba(160,64,160,1) 51%, rgba(160,64,160,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(160,64,160,0)), color-stop(51%,rgba(160,64,160,1)));
    background-image: -webkit-linear-gradient(left, rgba(160,64,160,0) 49%,rgba(160,64,160,1) 51%);
    background-image: -o-linear-gradient(left, rgba(160,64,160,0) 49%,rgba(160,64,160,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(160,64,160,0) 49%,rgba(160,64,160,1) 51%);
    background-image: linear-gradient(left, rgba(160,64,160,0) 49%,rgba(160,64,160,1) 51%);
    border-right-color: #483850;
  }
  .dex.sub-ground {
    background-image: -moz-linear-gradient(left, rgba(224, 192, 104,0) 0%, rgba(224, 192, 104,0) 49%, rgba(224, 192, 104,1) 51%, rgba(224, 192, 104,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(224, 192, 104,0)), color-stop(51%,rgba(224, 192, 104,1)));
    background-image: -webkit-linear-gradient(left, rgba(224, 192, 104,0) 49%,rgba(224, 192, 104,1) 51%);
    background-image: -o-linear-gradient(left, rgba(224, 192, 104,0) 49%,rgba(224, 192, 104,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(224, 192, 104,0) 49%,rgba(224, 192, 104,1) 51%);
    background-image: linear-gradient(left, rgba(224, 192, 104,0) 49%,rgba(224, 192, 104,1) 51%);
    border-right-color: #886830;
  }
  .dex.sub-flying {
    background-image: -moz-linear-gradient(left, rgba(168,144,240,0) 0%, rgba(168,144,240,0) 49%, rgba(168,144,240,1) 51%, rgba(168,144,240,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(168,144,240,0)), color-stop(51%,rgba(168,144,240,1)));
    background-image: -webkit-linear-gradient(left, rgba(168,144,240,0) 49%,rgba(168,144,240,1) 51%);
    background-image: -o-linear-gradient(left, rgba(168,144,240,0) 49%,rgba(168,144,240,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(168,144,240,0) 49%,rgba(168,144,240,1) 51%);
    background-image: linear-gradient(left, rgba(168,144,240,0) 49%,rgba(168,144,240,1) 51%);
    border-right-color: #705898;
  }
  .dex.sub-psychic {
    background-image: -moz-linear-gradient(left, rgba(248, 88, 136,0) 0%, rgba(248, 88, 136,0) 49%, rgba(248, 88, 136,1) 51%, rgba(248, 88, 136,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(248, 88, 136,0)), color-stop(51%,rgba(248, 88, 136,1)));
    background-image: -webkit-linear-gradient(left, rgba(248, 88, 136,0) 49%,rgba(248, 88, 136,1) 51%);
    background-image: -o-linear-gradient(left, rgba(248, 88, 136,0) 49%,rgba(248, 88, 136,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(248, 88, 136,0) 49%,rgba(248, 88, 136,1) 51%);
    background-image: linear-gradient(left, rgba(248, 88, 136,0) 49%,rgba(248, 88, 136,1) 51%);
    border-right-color: #906060;
  }
  .dex.sub-bug {
    background-image: -moz-linear-gradient(left, rgba(168, 184, 32,0) 0%, rgba(168, 184, 32,0) 49%, rgba(168, 184, 32,1) 51%, rgba(168, 184, 32,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(168, 184, 32,0)), color-stop(51%,rgba(168, 184, 32,1)));
    background-image: -webkit-linear-gradient(left, rgba(168, 184, 32,0) 49%,rgba(168, 184, 32,1) 51%);
    background-image: -o-linear-gradient(left, rgba(168, 184, 32,0) 49%,rgba(168, 184, 32,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(168, 184, 32,0) 49%,rgba(168, 184, 32,1) 51%);
    background-image: linear-gradient(left, rgba(168, 184, 32,0) 49%,rgba(168, 184, 32,1) 51%);
    border-right-color: #789010;
  }
  .dex.sub-rock {
    background-image: -moz-linear-gradient(left, rgba(184, 160, 56,0) 0%, rgba(184, 160, 56,0) 49%, rgba(184, 160, 56,1) 51%, rgba(184, 160, 56,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(184, 160, 56,0)), color-stop(51%,rgba(184, 160, 56,1)));
    background-image: -webkit-linear-gradient(left, rgba(184, 160, 56,0) 49%,rgba(184, 160, 56,1) 51%);
    background-image: -o-linear-gradient(left, rgba(184, 160, 56,0) 49%,rgba(184, 160, 56,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(184, 160, 56,0) 49%,rgba(184, 160, 56,1) 51%);
    background-image: linear-gradient(left, rgba(184, 160, 56,0) 49%,rgba(184, 160, 56,1) 51%);
    border-right-color: #886830;
  }
  .dex.sub-ghost {
    background-image: -moz-linear-gradient(left, rgba(112, 88, 152,0) 0%, rgba(112, 88, 152,0) 49%, rgba(112, 88, 152,1) 51%, rgba(112, 88, 152,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(112, 88, 152,0)), color-stop(51%,rgba(112, 88, 152,1)));
    background-image: -webkit-linear-gradient(left, rgba(112, 88, 152,0) 49%,rgba(112, 88, 152,1) 51%);
    background-image: -o-linear-gradient(left, rgba(112, 88, 152,0) 49%,rgba(112, 88, 152,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(112, 88, 152,0) 49%,rgba(112, 88, 152,1) 51%);
    background-image: linear-gradient(left, rgba(112, 88, 152,0) 49%,rgba(112, 88, 152,1) 51%);
    border-right-color: #483850;
  }
  .dex.sub-dragon {
    background-image: -moz-linear-gradient(left, rgba(112, 56, 248,0) 0%, rgba(112, 56, 248,0) 49%, rgba(112, 56, 248,1) 51%, rgba(112, 56, 248,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(112, 56, 248,0)), color-stop(51%,rgba(112, 56, 248,1)));
    background-image: -webkit-linear-gradient(left, rgba(112, 56, 248,0) 49%,rgba(112, 56, 248,1) 51%);
    background-image: -o-linear-gradient(left, rgba(112, 56, 248,0) 49%,rgba(112, 56, 248,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(112, 56, 248,0) 49%,rgba(112, 56, 248,1) 51%);
    background-image: linear-gradient(left, rgba(112, 56, 248,0) 49%,rgba(112, 56, 248,1) 51%);
    border-right-color: #483890;
  }
  .dex.sub-dark {
    background-image: -moz-linear-gradient(left, rgba(112, 88, 72,0) 0%, rgba(112, 88, 72,0) 49%, rgba(112, 88, 72,1) 51%, rgba(112, 88, 72,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(112, 88, 72,0)), color-stop(51%,rgba(112, 88, 72,1)));
    background-image: -webkit-linear-gradient(left, rgba(112, 88, 72,0) 49%,rgba(112, 88, 72,1) 51%);
    background-image: -o-linear-gradient(left, rgba(112, 88, 72,0) 49%,rgba(112, 88, 72,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(112, 88, 72,0) 49%,rgba(112, 88, 72,1) 51%);
    background-image: linear-gradient(left, rgba(112, 88, 72,0) 49%,rgba(112, 88, 72,1) 51%);
    border-right-color: #484038;
  }
  .dex.sub-steel {
    background-image: -moz-linear-gradient(left, rgba(184, 184, 208,0) 0%, rgba(184, 184, 208,0) 49%, rgba(184, 184, 208,1) 51%, rgba(184, 184, 208,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(184, 184, 208,0)), color-stop(51%,rgba(184, 184, 208,1)));
    background-image: -webkit-linear-gradient(left, rgba(184, 184, 208,0) 49%,rgba(184, 184, 208,1) 51%);
    background-image: -o-linear-gradient(left, rgba(184, 184, 208,0) 49%,rgba(184, 184, 208,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(184, 184, 208,0) 49%,rgba(184, 184, 208,1) 51%);
    background-image: linear-gradient(left, rgba(184, 184, 208,0) 49%,rgba(184, 184, 208,1) 51%);
    border-right-color: #807870;
  }
  .dex.sub-fairy {
    background-image: -moz-linear-gradient(left, rgba(226, 154, 229,0) 0%, rgba(226, 154, 229,0) 49%, rgba(226, 154, 229,1) 51%, rgba(226, 154, 229,1) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(49%,rgba(226, 154, 229,0)), color-stop(51%,rgba(226, 154, 229,1)));
    background-image: -webkit-linear-gradient(left, rgba(226, 154, 229,0) 49%,rgba(226, 154, 229,1) 51%);
    background-image: -o-linear-gradient(left, rgba(226, 154, 229,0) 49%,rgba(226, 154, 229,1) 51%);
    background-image: -ms-linear-gradient(left, rgba(226, 154, 229,0) 49%,rgba(226, 154, 229,1) 51%);
    background-image: linear-gradient(left, rgba(226, 154, 229,0) 49%,rgba(226, 154, 229,1) 51%);
    border-right-color: #9d6b9f;
  }

/* Gender */
.male, .female, .nogender {
  font-style: normal;
  white-space: nowrap;
}
  .male {
    color: #6890f0;
  }
  .female {
    color: #f85888;
  }
  .male abbr, .female abbr, .nogender abbr {
    font-weight: bold;
    border-bottom: 0;
  }

/* Type blocks */
.type {
  width: 4.8em;
  line-height: 1.4em;
  color: #f8f8f8;
  font-size: 10px;
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0.1em 0.1em 0 #807870;
  vertical-align: text-top;
  border-style: solid;
  border-width: 1px 0;
  border-radius: 0.4em;
  margin: 0 0.1em;
  display: inline-block;
}
  .type.normal { background-color: #a8a878; border-top-color: #d8d8c0; border-bottom-color: #705848; }
  .type.fire { background-color: #f08030; border-top-color: #f8d030; border-bottom-color: #c03028; }
  .type.water { background-color: #6890f0; border-top-color: #98d8d8; border-bottom-color: #807870; }
  .type.grass { background-color: #78c850; border-top-color: #c0f860; border-bottom-color: #588040; }
  .type.electric { background-color: #f8d030; border-top-color: #f8f878; border-bottom-color: #b8a038; }
  .type.ice { background-color: #98d8d8; border-top-color: #d0f8e8; border-bottom-color: #9090a0; }
  .type.fighting { background-color: #c03028; border-top-color: #f08030; border-bottom-color: #484038; }
  .type.poison { background-color: #a040a0; border-top-color: #d880b8; border-bottom-color: #483850; }
  .type.ground { background-color: #e0c068; border-top-color: #f8f878; border-bottom-color: #886830; }
  .type.flying { background-color: #a890f0; border-top-color: #c8c0f8; border-bottom-color: #705898; }
  .type.psychic { background-color: #f85888; border-top-color: #f8c0b0; border-bottom-color: #906060; }
  .type.bug { background-color: #a8b820; border-top-color: #d8e030; border-bottom-color: #789010; }
  .type.rock { background-color: #b8a038; border-top-color: #e0c068; border-bottom-color: #886830; }
  .type.ghost { background-color: #705898; border-top-color: #a890f0; border-bottom-color: #483850; }
  .type.dragon { background-color: #7038f8; border-top-color: #b8a0f8; border-bottom-color: #483890; }
  .type.dark { background-color: #705848; border-top-color: #a8a878; border-bottom-color: #484038; }
  .type.steel { background-color: #b8b8d0; border-top-color: #d8d8c0; border-bottom-color: #807870; }
  .type.fairy { background-color: #e29ae5; border-top-color: #f4d7f5; border-bottom-color: #9d6b9f; }
  .type.none { background-color: #68a090; border-top-color: #78c850; border-bottom-color: #588040; }

/* Game colour blocks */
.games {
  position: relative;
  width: 45px;
  height: 22px;
  line-height: 22px;
  font-variant: small-caps;
  color: rgba(255,255,255,0.8);
  text-align: left;
  border-radius: 0.8em;
  display: inline-block;
  overflow: hidden;
}
  .games em {
    width: 50%;
    font-size: 10px;
    font-style: normal;
    text-align: center;
    text-transform: capitalize;
    vertical-align: top;
    display: inline-block;
  }
    .games em:first-child {
      line-height: 18px;
      float: left;
    }
    .games em:last-child {
      position: absolute;
      right: 0;
      top: 2px;
      margin-bottom: -2px;
    }
  .games.r-s-e {
    background-image: -moz-linear-gradient(-20deg, rgba(233,80,48,0.8) 0%, rgba(233,80,48,0.8) 32%, rgba(2,156,206,0.8) 34%, rgba(2,156,206,0.8) 65%, rgba(24,170,83,0.8) 67%, rgba(24,170,83,0.8) 100%);
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(32%,rgba(233,80,48,0.8)), color-stop(34%,rgba(2,156,206,0.8)), color-stop(65%,rgba(2,156,206,0.8)), color-stop(67%,rgba(24,170,83,0.8)));
    background-image: -webkit-linear-gradient(-20deg, rgba(233,80,48,0.8) 32%,rgba(2,156,206,0.8) 34%,rgba(2,156,206,0.8) 65%,rgba(24,170,83,0.8) 67%);
    background-image: -o-linear-gradient(-20deg, rgba(233,80,48,0.8) 32%,rgba(2,156,206,0.8) 34%,rgba(2,156,206,0.8) 65%,rgba(24,170,83,0.8) 67%);
    background-image: -ms-linear-gradient(-20deg, rgba(233,80,48,0.8) 32%,rgba(2,156,206,0.8) 34%,rgba(2,156,206,0.8) 65%,rgba(24,170,83,0.8) 67%);
    background-image: linear-gradient(110deg, rgba(233,80,48,0.8) 32%,rgba(2,156,206,0.8) 34%,rgba(2,156,206,0.8) 65%,rgba(24,170,83,0.8) 67%);
  }
    .games.r-s-e em { width: 33%; }
  .games.fr-lg {
    background-image: -moz-linear-gradient(-20deg, rgba(222,96,55,0.8) 0%, rgba(222,96,55,0.8) 49%, rgba(134,196,85,0.8) 51%, rgba(134,196,85,0.8) 100%);
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(49%,rgba(222,96,55,0.8)), color-stop(51%,rgba(134,196,85,0.8)));
    background-image: -webkit-linear-gradient(-20deg, rgba(222,96,55,0.8) 49%,rgba(134,196,85,0.8) 51%);
    background-image: -o-linear-gradient(-20deg, rgba(222,96,55,0.8) 49%,rgba(134,196,85,0.8) 51%);
    background-image: -ms-linear-gradient(-20deg, rgba(222,96,55,0.8) 49%,rgba(134,196,85,0.8) 51%);
    background-image: linear-gradient(110deg, rgba(222,96,55,0.8) 49%,rgba(134,196,85,0.8) 51%);
  }
  .games.d-p-pl {
    background-image: -moz-linear-gradient(-20deg, rgba(219,224,227,0.8) 0%, rgba(219,224,227,0.8) 32%, rgba(238,232,226,0.8) 34%, rgba(238,232,226,0.8) 65%, rgba(141,142,144,0.8) 67%, rgba(141,142,144,0.8) 100%);
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(32%,rgba(219,224,227,0.8)), color-stop(34%,rgba(238,232,226,0.8)), color-stop(65%,rgba(238,232,226,0.8)), color-stop(67%,rgba(141,142,144,0.8)));
    background-image: -webkit-linear-gradient(-20deg, rgba(219,224,227,0.8) 32%,rgba(238,232,226,0.8) 34%,rgba(238,232,226,0.8) 65%,rgba(141,142,144,0.8) 67%);
    background-image: -o-linear-gradient(-20deg, rgba(219,224,227,0.8) 32%,rgba(238,232,226,0.8) 34%,rgba(238,232,226,0.8) 65%,rgba(141,142,144,0.8) 67%);
    background-image: -ms-linear-gradient(-20deg, rgba(219,224,227,0.8) 32%,rgba(238,232,226,0.8) 34%,rgba(238,232,226,0.8) 65%,rgba(141,142,144,0.8) 67%);
    background-image: linear-gradient(110deg, rgba(219,224,227,0.8) 32%,rgba(238,232,226,0.8) 34%,rgba(238,232,226,0.8) 65%,rgba(141,142,144,0.8) 67%);
  }
    .games.d-p-pl em { width: 33%; color: rgba(0,0,0,0.8); }
    .games.d-p-pl em:last-child { color: rgba(255,255,255,0.8); }
  .games.hg-ss {
    background-image: -moz-linear-gradient(-20deg, rgba(223,179,84,0.8) 0%, rgba(223,179,84,0.8) 49%, rgba(204,210,222,0.8) 51%, rgba(204,210,222,0.8) 100%);
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(49%,rgba(223,179,84,0.8)), color-stop(51%,rgba(204,210,222,0.8)));
    background-image: -webkit-linear-gradient(-20deg, rgba(223,179,84,0.8) 49%,rgba(204,210,222,0.8) 51%);
    background-image: -o-linear-gradient(-20deg, rgba(223,179,84,0.8) 49%,rgba(204,210,222,0.8) 51%);
    background-image: -ms-linear-gradient(-20deg, rgba(223,179,84,0.8) 49%,rgba(204,210,222,0.8) 51%);
    background-image: linear-gradient(120deg, rgba(223,179,84,0.8) 49%,rgba(204,210,222,0.8) 51%);
  }
    .games.hg-ss em:last-child { color: rgba(0,0,0,0.8); }
  .games.b-w, .games.b2-w2 {
    background-image: -moz-linear-gradient(-20deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 49%, rgba(255,255,255,0.8) 51%, rgba(255,255,255,0.8) 100%);
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(49%,rgba(0,0,0,0.8)), color-stop(51%,rgba(255,255,255,0.8)));
    background-image: -webkit-linear-gradient(-20deg, rgba(0,0,0,0.8) 49%,rgba(255,255,255,0.8) 51%);
    background-image: -o-linear-gradient(-20deg, rgba(0,0,0,0.8) 49%,rgba(255,255,255,0.8) 51%);
    background-image: -ms-linear-gradient(-20deg, rgba(0,0,0,0.8) 49%,rgba(255,255,255,0.8) 51%);
    background-image: linear-gradient(110deg, rgba(0,0,0,0.8) 49%,rgba(255,255,255,0.8) 51%);
  }
    .games.b-w em:last-child, .games.b2-w2 em:last-child { color: rgba(0,0,0,0.8); }
  .games.x-y {
    background-image: -moz-linear-gradient(-20deg, rgba(13,96,155,0.8) 0%, rgba(13,96,155,0.8) 49%, rgba(207,37,72,0.8) 51%, rgba(207,37,72,0.8) 100%);
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(49%,rgba(13,96,155,0.8)), color-stop(51%,rgba(207,37,72,0.8)));
    background-image: -webkit-linear-gradient(-20deg, rgba(13,96,155,0.8) 49%,rgba(207,37,72,0.8) 51%);
    background-image: -o-linear-gradient(-20deg, rgba(13,96,155,0.8) 49%,rgba(207,37,72,0.8) 51%);
    background-image: -ms-linear-gradient(-20deg, rgba(13,96,155,0.8) 49%,rgba(207,37,72,0.8) 51%);
    background-image: linear-gradient(110deg, rgba(13,96,155,0.8) 49%,rgba(207,37,72,0.8) 51%);
  }

/* Body game colours */
body.js.r-s-e {
  background-image: -moz-linear-gradient(-20deg, rgba(233,80,48,0.1) 0%, rgba(233,80,48,0.1) 32%, rgba(2,156,206,0.1) 34%, rgba(2,156,206,0.1) 65%, rgba(24,170,83,0.1) 67%, rgba(24,170,83,0.1) 100%);
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(32%,rgba(233,80,48,0.1)), color-stop(34%,rgba(2,156,206,0.1)), color-stop(65%,rgba(2,156,206,0.1)), color-stop(67%,rgba(24,170,83,0.1)));
  background-image: -webkit-linear-gradient(-20deg, rgba(233,80,48,0.1) 32%,rgba(2,156,206,0.1) 34%,rgba(2,156,206,0.1) 65%,rgba(24,170,83,0.1) 67%);
  background-image: -o-linear-gradient(-20deg, rgba(233,80,48,0.1) 32%,rgba(2,156,206,0.1) 34%,rgba(2,156,206,0.1) 65%,rgba(24,170,83,0.1) 67%);
  background-image: -ms-linear-gradient(-20deg, rgba(233,80,48,0.1) 32%,rgba(2,156,206,0.1) 34%,rgba(2,156,206,0.1) 65%,rgba(24,170,83,0.1) 67%);
  background-image: linear-gradient(110deg, rgba(233,80,48,0.1) 32%,rgba(2,156,206,0.1) 34%,rgba(2,156,206,0.1) 65%,rgba(24,170,83,0.1) 67%);
}
body.js.fr-lg {
  background-image: -moz-linear-gradient(-20deg, rgba(222,96,55,0.1) 0%, rgba(222,96,55,0.1) 49%, rgba(134,196,85,0.1) 51%, rgba(134,196,85,0.1) 100%);
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(49%,rgba(222,96,55,0.1)), color-stop(51%,rgba(134,196,85,0.1)));
  background-image: -webkit-linear-gradient(-20deg, rgba(222,96,55,0.1) 49%,rgba(134,196,85,0.1) 51%);
  background-image: -o-linear-gradient(-20deg, rgba(222,96,55,0.1) 49%,rgba(134,196,85,0.1) 51%);
  background-image: -ms-linear-gradient(-20deg, rgba(222,96,55,0.1) 49%,rgba(134,196,85,0.1) 51%);
  background-image: linear-gradient(110deg, rgba(222,96,55,0.1) 49%,rgba(134,196,85,0.1) 51%);
}
body.js.d-p-pl {
  background-image: -moz-linear-gradient(-20deg, rgba(219,224,227,0.1) 0%, rgba(219,224,227,0.1) 32%, rgba(238,232,226,0.1) 34%, rgba(238,232,226,0.1) 65%, rgba(141,142,144,0.1) 67%, rgba(141,142,144,0.1) 100%);
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(32%,rgba(219,224,227,0.1)), color-stop(34%,rgba(238,232,226,0.1)), color-stop(65%,rgba(238,232,226,0.1)), color-stop(67%,rgba(141,142,144,0.1)));
  background-image: -webkit-linear-gradient(-20deg, rgba(219,224,227,0.1) 32%,rgba(238,232,226,0.1) 34%,rgba(238,232,226,0.1) 65%,rgba(141,142,144,0.1) 67%);
  background-image: -o-linear-gradient(-20deg, rgba(219,224,227,0.1) 32%,rgba(238,232,226,0.1) 34%,rgba(238,232,226,0.1) 65%,rgba(141,142,144,0.1) 67%);
  background-image: -ms-linear-gradient(-20deg, rgba(219,224,227,0.1) 32%,rgba(238,232,226,0.1) 34%,rgba(238,232,226,0.1) 65%,rgba(141,142,144,0.1) 67%);
  background-image: linear-gradient(110deg, rgba(219,224,227,0.1) 32%,rgba(238,232,226,0.1) 34%,rgba(238,232,226,0.1) 65%,rgba(141,142,144,0.1) 67%);
}
body.js.hg-ss {
  background-image: -moz-linear-gradient(-20deg, rgba(223,179,84,0.1) 0%, rgba(223,179,84,0.1) 49%, rgba(204,210,222,0.1) 51%, rgba(204,210,222,0.1) 100%);
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(49%,rgba(223,179,84,0.1)), color-stop(51%,rgba(204,210,222,0.1)));
  background-image: -webkit-linear-gradient(-20deg, rgba(223,179,84,0.1) 49%,rgba(204,210,222,0.1) 51%);
  background-image: -o-linear-gradient(-20deg, rgba(223,179,84,0.1) 49%,rgba(204,210,222,0.1) 51%);
  background-image: -ms-linear-gradient(-20deg, rgba(223,179,84,0.1) 49%,rgba(204,210,222,0.1) 51%);
  background-image: linear-gradient(120deg, rgba(223,179,84,0.1) 49%,rgba(204,210,222,0.1) 51%);
}
body.js.b-w, body.js.b2-w2 {
  background-image: -moz-linear-gradient(-20deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 49%, rgba(255,255,255,0.1) 51%, rgba(255,255,255,0.1) 100%);
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(49%,rgba(0,0,0,0.1)), color-stop(51%,rgba(255,255,255,0.1)));
  background-image: -webkit-linear-gradient(-20deg, rgba(0,0,0,0.1) 49%,rgba(255,255,255,0.1) 51%);
  background-image: -o-linear-gradient(-20deg, rgba(0,0,0,0.1) 49%,rgba(255,255,255,0.1) 51%);
  background-image: -ms-linear-gradient(-20deg, rgba(0,0,0,0.1) 49%,rgba(255,255,255,0.1) 51%);
  background-image: linear-gradient(110deg, rgba(0,0,0,0.1) 49%,rgba(255,255,255,0.1) 51%);
}
body.js.x-y {
  background-image: -moz-linear-gradient(-20deg, rgba(13,96,155,0.1) 0%, rgba(13,96,155,0.1) 49%, rgba(207,37,72,0.1) 51%, rgba(207,37,72,0.1) 100%);
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(49%,rgba(13,96,155,0.1)), color-stop(51%,rgba(207,37,72,0.1)));
  background-image: -webkit-linear-gradient(-20deg, rgba(13,96,155,0.1) 49%,rgba(207,37,72,0.1) 51%);
  background-image: -o-linear-gradient(-20deg, rgba(13,96,155,0.1) 49%,rgba(207,37,72,0.1) 51%);
  background-image: -ms-linear-gradient(-20deg, rgba(13,96,155,0.1) 49%,rgba(207,37,72,0.1) 51%);
  background-image: linear-gradient(110deg, rgba(13,96,155,0.1) 49%,rgba(207,37,72,0.1) 51%);
}

/* Adjust for screens and devices */
@media screen and (max-height: 800px) {
  body > footer {
    height: 38px;
  }
    body > footer p {
      font-size: 8px;
      margin-top: 0.3em;
    }
}
@media screen and (max-height: 480px) {
  body.iphone {
    height: -webkit-calc(100% + 60px);
  }
/*
  body > section, .dex {
    margin-bottom: 0;
  }
*/
  body > footer {
    display: none;
  }
}
@media screen and (max-width: 360px) {
  body > header h1 a img {
    width: 110px;
    height: auto;
  }
}

body.iphone, body.ipad {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100%;
}
  body.iphone > header, body.ipad > header {
    position: absolute;
  }

/* Simplify design for 3DS */
body.n3ds .type {
  width: 5em;
  padding: 1px 0;
  border: 0 none;
}
body.n3ds .dex {
  padding: 0 2px;
  border: 0 none;
}
  body.n3ds .dex > header h2, body.n3ds .dex > header nav {
    position: relative;
    margin-top: -20px;
  }
  body.n3ds .dex > dl dt {
    margin-right: 0.3em;
  }
  body.n3ds .dex > dl.stats dt {
    padding: 1px 0;
    border: 0 none;
  }

/* temp debug */
body div.debug, section > pre {
  color: #000;
  background: #ECF5FA;
  text-align: left;
  padding: 0 1em;
  margin: 1em 0;
  clear: both;
  overflow-x: auto;
}