.sv-tabs-wrapper { --spacing: 1rem; --border: 1px solid #ccc; --tab-bg-on: #fff; --tab-bg-off: #eee; --tab-bg-hover: #ddd; --tab-text-on: #000; --tab-text-off: #777; margin-bottom:var(--spacing) } .sv-tabs-tab-list { display: flex; flex-wrap: wrap; border-bottom:var(--border) } .sv-tabs-tab { min-width: 100px; margin: 0 0 -1px .5rem; padding: .25rem 1rem; border: var(--border); border-radius: 8px 8px 0 0; background-color: var(--tab-bg-off); color: var(--tab-text-off); text-align: center; text-decoration:none } .sv-tabs-tab:hover, .sv-tabs-tab:active, .sv-tabs-tab:focus { background-color:var(--tab-bg-hover) } .sv-tabs-tab.active { background-color: var(--tab-bg-on); border-bottom-color: var(--tab-bg-on); color:var(--tab-text-on) } .sv-tabs-panel { display: none; padding:var(--spacing) 0 } .sv-tabs-panel.active { display:block } .sv-tabs-panel:target { background-color:transparent } .sv-tabs-grow > .sv-tabs-tab { flex-grow:1 } @media (max-width: 899px) { .sv-tabs-tab { flex: 1 1 0; min-width:auto } } .sv-tabs-wrapper { --tab-text-on: #404040; --tab-text-off: #737373 } .sv-tabs-onetab > .sv-tabs-tab-list { display:none } @font-face { font-family: "Fira Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/fira-sans-v17-latin-ext-400i.woff2") format("woff2"); unicode-range:U + 0100-02AF, U + 0304, U + 0308, U + 0329, U + 1E00-1E9F, U + 1EF2-1EFF, U + 2020, U + 20A0-20AB, U + 20AD-20CF, U + 2113, U + 2C60-2C7F, U + A720-A7FF } @font-face { font-family: "Fira Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/fira-sans-v17-latin-400i.woff2") format("woff2"); unicode-range:U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 0304, U + 0308, U + 0329, U + 2000-206F, U + 2074, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD } @font-face { font-family: "Fira Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/fira-sans-v17-latin-ext-600i.woff2") format("woff2"); unicode-range:U + 0100-02AF, U + 0304, U + 0308, U + 0329, U + 1E00-1E9F, U + 1EF2-1EFF, U + 2020, U + 20A0-20AB, U + 20AD-20CF, U + 2113, U + 2C60-2C7F, U + A720-A7FF } @font-face { font-family: "Fira Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/fira-sans-v17-latin-600i.woff2") format("woff2"); unicode-range:U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 0304, U + 0308, U + 0329, U + 2000-206F, U + 2074, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD } @font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/fira-sans-v17-latin-ext-400.woff2") format("woff2"); unicode-range:U + 0100-02AF, U + 0304, U + 0308, U + 0329, U + 1E00-1E9F, U + 1EF2-1EFF, U + 2020, U + 20A0-20AB, U + 20AD-20CF, U + 2113, U + 2C60-2C7F, U + A720-A7FF } @font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/fira-sans-v17-latin-400.woff2") format("woff2"); unicode-range:U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 0304, U + 0308, U + 0329, U + 2000-206F, U + 2074, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD } @font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/fira-sans-v17-latin-ext-600.woff2") format("woff2"); unicode-range:U + 0100-02AF, U + 0304, U + 0308, U + 0329, U + 1E00-1E9F, U + 1EF2-1EFF, U + 2020, U + 20A0-20AB, U + 20AD-20CF, U + 2113, U + 2C60-2C7F, U + A720-A7FF } @font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/fira-sans-v17-latin-600.woff2") format("woff2"); unicode-range:U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 0304, U + 0308, U + 0329, U + 2000-206F, U + 2074, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD } * { box-sizing:border-box } html { min-height: 100%; color: #404040; font-family: "Fira Sans", "Trebuchet MS", Ubuntu, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: none; text-size-adjust:none } body { margin: 0; padding: 0; background-color: #727272; background-image: repeating-linear-gradient(-45deg, #6a6a6a 0, #6a6a6a 2px, #727272 2px, #727272 11px); background-size: 16px 16px; font-size:1rem } main, header, nav, article, section, aside, footer, details, figcaption, figure, hgroup, menu { display:block } h1, h2, h3, h4, p, dl, pre { margin: 0 0 1rem; padding:0 } ul, ol, blockquote, dd { margin: 0 0 1rem 2rem; padding:0 } h1, h2, h3, h4 { color: #000; font-family: "Fira Sans", "Trebuchet MS", Ubuntu, Helvetica, Arial sans-serif; font-weight: bold; line-height: 1.2; word-wrap: break-word; overflow-wrap:break-word } h1 > a, h2 > a, h3 > a, h4 > a { color:#000 } h1, .text-tera { font-size: 2.5rem; text-align:center } h2, .text-giga { font-size:2rem } h3, .text-mega { font-size:1.5rem } h4, .text-kilo { font-size:1.25rem } table { margin: 0 auto 1rem; border-collapse: collapse; border-spacing:0 } th, td { padding:4px 10px } a { color: #2769be; text-decoration: none; transition:color .2s, background-color .2s } a:hover, a:active, a:focus { color: #a42121; text-decoration: underline; outline:0 } img { border: 0; max-width: 100%; height: auto; font-size: .75rem; color:#a3a3a3 } img:-moz-loading { color:#fff } b, strong, th { font-weight:bold } q::before { content: "‘" } q::after { content: "’" } blockquote { padding: 0 8px; border-left: 3px solid #6fad57; color: #484848; font-style:italic } small { font-size:.875rem } abbr[title], dfn[title] { cursor: help; border: 0; text-decoration: underline dotted #a3a3a3; text-decoration-thickness: 1px; text-underline-offset:1px } ins { background-color: #d1e1ad; color: #405a04; text-decoration:none } del { background-color: #e5bdb2; color: #a82400; text-decoration:line-through } code, tt, samp, kbd { padding: 1px 3px; border: 1px solid #dbdbdb; background-color: #f0f0f0; border-radius: 4px; font-family: "Consolas", "Ubuntu Mono", "Menlo", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 14px; color:#080 } pre code { display: block; overflow: auto; max-height: 300px; margin-left: 2rem; padding:.75rem } hr { height: 1px; margin: 2rem auto; background: #dbdbdb; border: 0; clear:both } dt { font-weight:bold } sup, sub { line-height:1 } details > summary { display: list-item; cursor: pointer; padding: .25rem .5rem; background-color: #dbdbdb; border-radius:4px } details[open] > summary { margin-bottom:.25rem } details > :last-child { margin-bottom:0 } :target { background-color:#f0f0f0 } @view-transition { navigation:auto } @media (max-width: 619px) { h1 { font-size:2rem } h2 { font-size:1.5rem } h3 { font-size:1.25rem } } .grid-container { margin: 0 auto; max-width:1220px } .grid-row { display: flex; flex-wrap: wrap; justify-content: flex-start; margin:0 -1rem } .grid-col { margin-bottom: 1rem; padding: 0 1rem; width:100% } .grid-col > :last-child { margin-bottom:0 } .grid-col-center { margin-left: auto; margin-right:auto } @media (min-width: 620px) { .span-sm-1 { width:8.3333333333% } .span-sm-2 { width:16.6666666667% } .span-sm-3 { width:25% } .span-sm-4 { width:33.3333333333% } .span-sm-5 { width:41.6666666667% } .span-sm-6 { width:50% } .span-sm-7 { width:58.3333333333% } .span-sm-8 { width:66.6666666667% } .span-sm-9 { width:75% } .span-sm-10 { width:83.3333333333% } .span-sm-11 { width:91.6666666667% } .span-sm-12 { width:100% } .grid-col-sep-sm { border-left:1px solid #dbdbdb } } @media (min-width: 900px) { .span-md-1 { width:8.3333333333% } .span-md-2 { width:16.6666666667% } .span-md-3 { width:25% } .span-md-4 { width:33.3333333333% } .span-md-5 { width:41.6666666667% } .span-md-6 { width:50% } .span-md-7 { width:58.3333333333% } .span-md-8 { width:66.6666666667% } .span-md-9 { width:75% } .span-md-10 { width:83.3333333333% } .span-md-11 { width:91.6666666667% } .span-md-12 { width:100% } .grid-col-sep-md { border-left:1px solid #dbdbdb } } @media (min-width: 1220px) { .span-lg-1 { width:8.3333333333% } .span-lg-2 { width:16.6666666667% } .span-lg-3 { width:25% } .span-lg-4 { width:33.3333333333% } .span-lg-5 { width:41.6666666667% } .span-lg-6 { width:50% } .span-lg-7 { width:58.3333333333% } .span-lg-8 { width:66.6666666667% } .span-lg-9 { width:75% } .span-lg-10 { width:83.3333333333% } .span-lg-11 { width:91.6666666667% } .span-lg-12 { width:100% } .grid-col-sep-lg { border-left:1px solid #dbdbdb } } .wrap-left { float: left; margin-right: 1rem; margin-bottom:1rem } .wrap-right { float: right; margin-left: 1rem; margin-bottom:1rem } @media (max-width: 619px) { .wrap-left, .wrap-right { display: block !important; float: none; margin-left: auto; margin-right:auto } table.wrap-left, table.wrap-right { display:table !important } } .hidden { display:none } @media (min-width: 900px) { .hidden-md { display:none } } .clear { clear:both } .sr-only { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space:nowrap } .resp-scroll { margin-bottom:1rem } @media (max-width: 1219px) { .resp-scroll { overflow-x:auto } } .resp-scroll > :last-child { margin-bottom:0 } .component { margin-bottom:1rem } .component-lg { margin-bottom:1.5rem } .block-wide { width:100% } .pull-up { margin-top:-0.75rem } .panel-success { text-align:center } .panel-warning { text-align:center } .panel-error { text-align:center } .col-split-4 { column-count: 3; column-gap:1rem } @media (min-width: 620px) { .col-split-4 { column-count:4 } } .text-small { font-size:.875rem } .text-large { font-size:1.25rem } .text-muted { color:#737373 } :not(h1, h2) > .text-muted { font-weight:normal } .text-center { text-align:center } .text-right { text-align:right } .text-shadow-dark { text-shadow:1px 1px 2px rgba(0, 0, 0, .7) } .text-shadow-light { text-shadow:1px 1px 2px rgba(255, 255, 255, .6) } .text-positive { color:#184 } .text-negative { color:#c11 } .nav-forward { font-weight:bold } .nav-forward::after { content: " »" } .nav-backward { font-weight:bold } .nav-backward::before { content: "« " } .fraction > sup { font-size: .66em; vertical-align:.5em } .fraction > sub { font-size: .66em; vertical-align:-0.2em } @keyframes target { 0% { background-color:#ffc } 100% { background-color:#fff } } .target-anim:target { animation:target 2s ease-in-out forwards } @keyframes spin { 0% { transform:rotate(0deg) } 100% { transform:rotate(360deg) } } .loader { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding:1.25rem 1.5rem } .loader::after { content: ""; width: 50px; height: 50px; margin: 2rem auto; border: 8px solid #f0f0f0; border-top-color: #f34444; border-radius: 50%; animation:spin 2s linear infinite } .text-red { color:#f34444 } .text-yellow { color:#ffdd57 } .text-green { color:#23cd5e } .text-turquoise { color:#00c2b8 } .text-blue { color:#3273dc } .text-pink { color:#ff6bce } input, button, select, option, textarea { margin: 0; padding: .5rem .75rem; color: inherit; font: inherit; vertical-align:middle } input[disabled], button[disabled], select[disabled], option[disabled], textarea[disabled] { color:#888 } label[for], label:has(input) { cursor:pointer } .input-text, .input-number, .input-long-text, .input-date, .input-datetime-local, textarea { width: 250px; max-width: 100%; background-color: #fff; border: 1px solid #dbdbdb; border-radius:4px } .input-text:focus, .input-number:focus, .input-long-text:focus, .input-date:focus, .input-datetime-local:focus, textarea:focus { outline: 0; border-color:#3273dc } .input-number { max-width:100px } .input-long-text { width:100% } textarea { width: 100%; min-height:200px } select { min-width: 100px; max-width: 100%; height: 42px; line-height: 42px; background-color: #fff; border: 1px solid #dbdbdb; border-radius:4px } select:focus { outline: 0; border-color:#3273dc } input[type=checkbox], input[type=radio] { cursor:pointer } ::placeholder { color: #a3a3a3; font: inherit; font-size: .875rem; opacity:1 } .form-wide-label, .form-wide-static { padding-top:.5rem } .form-wide-label { display: block; text-align:right } @media (max-width: 619px) { .form-wide-label { text-align: left; margin-bottom: .25rem; padding-top:0 } } .form-wide-checkbox { margin-top:.75rem } .form-wide-radio { display: inline-block; margin-right: .75rem; padding-top:.5rem } .form-wide-radio:last-child { margin-right:0 } .btn { display: inline-block; cursor: pointer; margin: 0; background-color: #dbdbdb; background-image: linear-gradient(#f0f0f0, #dbdbdb); border: 1px solid #c2c2c2; border-radius: 4px; color: #404040; text-align: center; text-shadow:1px 1px 2px rgba(255, 255, 255, .6) } .btn:active { outline: 0; box-shadow:inset 0 1px 5px rgba(0, 0, 0, .2) } .btn:focus { outline: 0; border-color: #a3a3a3; background-image:linear-gradient(#dbdbdb, #c7c7c7) } .btn[disabled] { cursor: default; background-image: none; text-shadow: none; color: #404040; opacity:.6 } .btn-small { padding: .25rem .5rem; font-size:.875rem } .btn-primary { background-color: #3273dc; background-image: linear-gradient(#558be2, #3273dc); border-color: #205bbc; text-shadow:1px 1px 2px rgba(0, 0, 0, .7) } .btn-primary, .btn-primary[disabled] { color:#fff } .btn-primary:active { box-shadow:inset 0 1px 5px rgba(0, 0, 0, .4) } .btn-primary:focus { border-color: #184690; background-image:linear-gradient(#3273dc, #2160c4) } .btn-danger { background-color: #f34444; background-image: linear-gradient(#f66a6a, #dd0e0e); border-color: #c50d0d; text-shadow:1px 1px 2px rgba(0, 0, 0, .7) } .btn-danger, .btn-danger[disabled] { color:#fff } .btn-danger:active { box-shadow:inset 0 1px 5px rgba(0, 0, 0, .4) } .btn-danger:focus { border-color: #9e0a0a; background-image:linear-gradient(#f34444, #ce0d0d) } .btn-link { padding: 0; background: transparent; border: 0; color:#2769be } .btn-link:hover, .btn-link:active, .btn-link:focus { color: #a42121; text-decoration: underline; box-shadow: none; outline:0 } .panel { --panel-text: #404040; display: block; margin-bottom: 1rem; padding: 1rem; border-radius: 4px; color:var(--panel-text) } .panel > :last-child { margin-bottom:0 } .panel-link, .panel-link:hover, .panel-link:active, .panel-link:focus { color: var(--panel-text); text-decoration:none } .panel-eq { height:100% } .panel-orange { background-color: #ff7f0f; --panel-text: white } .panel-cyan { background-color: #20b0ee; --panel-text: white } .panel-blue { background-color: #3273dc; --panel-text: white } .panel-offwhite, .panel-intro { background-color:#f0f0f0 } .panel-yellow { background-color:#ffdd57 } .panel-palered, .panel-error { background-color:#fde2e2 } .panel-paleyellow, .panel-warning { background-color:#fff9e0 } .panel-palegreen, .panel-success { background-color:#e5fbec } .panel-palecyan, .panel-nav { background-color:#e3f5fd } .list-blank { list-style: none; margin-left:0 } .list-nav { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; margin-left: 0; text-align:center } .list-nav > li:not(.list-nav-title):not(:last-child) { border-right:1px solid #dbdbdb } .list-nav > li { padding:0 1rem } .list-nav-title { padding: 0 1rem; font-weight:bold } .list-focus { list-style:none } .list-focus > li { position:relative } .list-focus > li::before { content: "›"; font-size: 1.25rem; position: absolute; top: -3px; left:-1rem } .list-focus a { font-size: 1.125rem; font-weight:bold } .img-fixed { display: inline-block; max-width: none; vertical-align:middle } .icon-string { padding-left: .5rem; vertical-align:middle } a[rel=lightbox] { display:inline-block } .figure { margin-bottom: 1rem; color: #737373; font-size: .875rem; text-align:center } .video-lazyload { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; background-color:#f0f0f0 } .video-iframe { position: absolute; left: 0; top: 0; width: 100%; height:100% } .icon-16 { width: 16px; height:16px } .icon-24 { width: 24px; height:24px } .data-table th, .data-table td { vertical-align: middle; border-width: 1px 0; border-style: solid; border-color:#dbdbdb } .data-table th { padding: 8px 10px; background-color: #ebebe5; text-align: left; white-space:nowrap } .data-table th:nth-child(n + 2) { border-left-width:1px } .data-table .highlight { background-color:#e0fffd } .data-table tr:hover { background-color:#fff9e0 } .data-table .cell-grid { border-width:1px } .data-table .sorting { cursor: pointer; text-decoration:underline } .data-table .sorting-asc, .data-table .sorting-desc { background-color:#ecdfec } .sortwrap { position:relative } .vitals-table { width:100% } .vitals-table th, .vitals-table td { border-width: 1px 0; border-style: solid; border-color: #f0f0f0; background-color:#fff } .vitals-table th { color: #737373; font-size: .875rem; font-weight: normal; text-align:right } .sticky-header { border-collapse: separate; border-spacing:0 } .sticky-header th, .sticky-header td { border-width:0 0 1px } .sticky-header th { position: sticky; top: 0; border-top-width:1px } .cell-fixed { width: 1px; white-space:nowrap } .cell-num { white-space: nowrap; text-align:right } .cell-total { font-weight:bold } .cell-med-text { min-width:125px } .cell-long-text { font-size: .875rem; min-width:250px } .cell-xl { min-width:580px } .cell-name { min-width: 175px; line-height:1.2 } .table-filters { margin: 0 auto 1rem; text-align:center } .table-filters > label, .table-filters > .component > label { margin-right:.5rem } .table-filters > label:not(:first-child), .table-filters > .component > label:not(:first-child) { margin-left:1rem } @media (min-width: 620px) { .data-table .sorting { padding-right: 28px; text-decoration:none } .sorting > .sortwrap::before { display: block; position: absolute; top: 3px; right: -18px; content: ""; width: 8px; height: 16px; background: transparent url("https://img.pokemondb.net/images/icons/sort-arrows.png") no-repeat 0 0 } .sorting-asc > .sortwrap::before { background-position:0 -16px } .sorting-desc > .sortwrap::before { background-position:0 -32px } .vitals-table th { width: 1px; white-space:nowrap } } .modal-wrapper { display: flex; justify-content: center; align-items: center; position: fixed; z-index: 200; left: 0; top: 0; right: 0; bottom: 0; background-color: #000; background-color: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transition:visibility 0s .4s, opacity .4s 0s ease } .modal-wrapper.visible { opacity: 1; visibility: visible; transition:visibility 0s 0s, opacity .4s 0s ease } .modal-wrapper * { box-sizing:border-box } .modal { position: fixed; z-index: 210; min-width: calc(480px - 2rem); max-width: calc(100% - 2rem); max-height: calc(100% - 2rem); overflow: auto; padding: 1.25rem; border-radius: 4px; background-color: #fff; box-shadow:1px 1px 2px rgba(0, 0, 0, .7) } @media (max-width: 480px) { .modal { min-width:auto } } .modal-close { cursor: pointer; position: absolute; top: 1.25rem; right: 1.25rem; width: 21px; height: 21px; line-height: 21px; border-radius: 100%; font-size: 1.5rem; font-weight: bold; text-align:center } .modal-close:hover { color: #fff; background-color:#777 } .modal-title { padding-right:31.5px } .modal-content { max-width: 100%; margin: 0 auto; transition-property: width, height; transition-duration:.4s } .main-header { height: 124px; background-color: #202020; background-image:linear-gradient(#3b3b3b, #202020) } .main-header > .grid-container { position:relative } .header-logo { display: block; height: 124px; overflow:hidden } .header-logo > picture { display: flex; justify-content:center } @media (max-width: 375px) { .header-logo > picture { justify-content:right } } .header-logo > picture > img { display: block; max-width:none } .main-content { margin: 1.25rem auto 2rem; padding: .75rem 1rem; background-color:#fff } .main-footer { padding: 1rem; background-color: #202020; background-image: linear-gradient(#3b3b3b, #202020); font-size: .875rem; color:#dbdbdb } .main-footer a:link, .main-footer a:visited, .main-footer a:hover { color:#fff } @media (min-width: 620px) { .main-content { margin-top: 2rem; padding:1.5rem 2rem } } @media (min-width: 900px) { .main-content { min-height:600px } } @media (min-width: 1220px) { .main-content { border-radius:4px } } .main-menu { margin-top: -24px; background-color: #363636; background-image:linear-gradient(#404040, #363636) } .main-menu-list { position: relative; display: flex; flex-wrap: wrap; margin:0 } .main-menu-list li { list-style:none } .main-menu-item { flex: 1 0; color: #f0f0f0; text-shadow:1px 1px 2px rgba(0, 0, 0, .7) } .main-menu-item a { color: #f0f0f0; text-decoration:none } .main-menu-item-active > .main-menu-sub { visibility: visible; opacity:1 } .main-menu-item-active > a { background-color:rgba(0, 0, 0, .1) } .main-menu-heading { display: flex; flex-direction: column; align-items: center; height: 100%; padding: .25rem .5rem 0; font-size: .75rem; text-align:center } .main-menu-icon { width: 24px; height: 24px; margin:0 0 .25rem } .main-menu-title-long { display:none } .main-menu-sub { position: absolute; left: 0; right: 0; z-index: 100; visibility: hidden; opacity: 0; transition: opacity .3s ease-in-out, visibility .3s ease-in-out; margin: 0; padding: 0; background-color: #000; border-radius: 0 0 4px 4px; font-size:.875rem } .main-menu-sub > li { line-height:1.5 } .main-menu-sub > li > a { display: block; width: 100%; height: 100%; padding: .5rem .75rem; line-height:1.3 } .main-menu-sub > li > a:hover { background-color:rgba(255, 255, 255, .2) } .main-menu-hr { height: 1px; margin: 0 auto; background: #404040; border-width: 0 .75rem; border-style: solid; border-color:#000 } .main-menu-hr-title { width: 100% !important; padding: .25rem .75rem; background: #404040; font-size: 10px; text-transform:uppercase } .sitesearch-form { position: relative; width: 100%; height: 100%; padding:.5rem } .sitesearch-input { display: block; width: 100%; height: 100%; padding: .25rem 27px .25rem .5rem; border: 0; border-radius: 4px; background-color: #737373; color: #dbdbdb; line-height:1 } .sitesearch-results { visibility: hidden; opacity: 0; transition: opacity .3s ease-in-out, visibility .3s ease-in-out; position: absolute; z-index: 120; top: 110%; top: calc(100% + 6px); right: 0; width: 100%; min-width: 200px; background-color: #000; text-shadow:none } .sitesearch-results::before { content: ""; display: block; position: absolute; top: -10px; left: 3%; border: 5px solid transparent; border-bottom-color:#000 } .sitesearch-active { visibility: visible; opacity:1 } .sitesearch-results-item { display: flex; justify-content: space-between; padding: .25rem .5rem; border-bottom: 1px solid #404040; line-height:1.5 } .sitesearch-results-item.sitesearch-results-item-active { background-color: rgba(255, 255, 255, .2); color:#fff9e0 } .sitesearch-results-item:last-child { border-bottom:0 } .sitesearch-results-type { margin-left: 8px; color: #a3a3a3; text-align:right } .main-menu-item-search .main-menu-icon { position: absolute; top: calc(50% - 9.5px); right: 12px; width: 19px; height: 19px; margin:0 !important } @media (min-width: 760px) { .main-menu-item { position:relative } } @media (max-width: 619px) { .main-menu-item-search { min-width: 100%; min-height:48px } } @media (min-width: 620px) and(max-width: 899px) { .main-menu-heading { font-size:.875rem } } @media (min-width: 620px) { .main-menu-heading { padding-bottom:.25rem } .sitesearch-results::before { left: auto; right:5% } } @media (min-width: 900px) { .main-menu-item { line-height:2.5rem } .main-menu-title { display:none } .main-menu-title-long { display:block } .main-menu-heading { flex-direction: row; justify-content: center; font-size: .875rem; font-weight:bold } .main-menu-icon { margin:0 .5rem 0 0 } } @media (min-width: 1220px) { .main-menu { border-radius:4px } .main-menu-heading { font-size:1rem } } .icon-pkmn { width: 60px; height:56px } .icon-item-img { width: 32px; height:32px } .img-sprite { width: 128px; height:128px } .img-sprite-v201, .img-sprite-v203, .img-sprite-v21, .img-sprite-v20 { width: 128px; height:128px } .img-sprite-v19 { width: 128px; height:120px } .img-sprite-v18, .img-sprite-v204, .img-sprite-v205 { width: 120px; height:112px } .img-sprite-v17 { width: 112px; height:112px } .img-sprite-v16, .img-sprite-v15 { width: 128px; height: 128px; image-rendering:pixelated } .img-sprite-v14 { width: 120px; height: 120px; image-rendering:pixelated } .img-sprite-v12, .img-sprite-v11 { width: 96px; height: 96px; image-rendering:pixelated } .img-sprite-v10, .img-sprite-v9, .img-sprite-v8 { width: 80px; height: 80px; image-rendering:pixelated } .img-sprite-v7, .img-sprite-v6, .img-sprite-v5 { width: 64px; height: 64px; image-rendering:pixelated } .img-sprite-v4, .img-sprite-v3, .img-sprite-v2, .img-sprite-v1 { width: 56px; height: 56px; image-rendering:pixelated } .img-trainer-v17, .img-trainer-v18, .img-trainer-v21 { width: 108px; height:108px } .img-trainer-v13, .img-trainer-v14, .img-trainer-v15, .img-trainer-v16 { width: 150px; height:90px } .img-trainer-v12, .img-trainer-v11, .img-trainer-v10, .img-trainer-v9, .img-trainer-v8 { width: 80px; height: 80px; image-rendering:pixelated } .img-trainer-v7, .img-trainer-v6, .img-trainer-v5 { width: 64px; height: 64px; image-rendering:pixelated } .img-trainer-v4, .img-trainer-v3, .img-trainer-v2, .img-trainer-v1 { width: 56px; height: 56px; image-rendering:pixelated } .icon-shuffle { width: 40px; height: 40px; image-rendering:pixelated } .infocard-list { margin-bottom:1rem } td > .infocard-list { margin-bottom:0 } .infocard { display: inline-block; padding: 0 .75rem 2rem; line-height: 1.25; text-align:center } .infocard-list-pkmn-lg > .infocard { width:138px } .infocard-list-pkmn-md > .infocard { width: 218px; text-align:left } .infocard-list-pkmn-sm > .infocard { width: 90px; color: #737373; font-size:.75rem } .infocard-list-trainers > .infocard { width:218px } .infocard-lg-img, .infocard-lg-data { display:block } .infocard-md-img, .infocard-cell-img { margin-right:.25rem } .infocard-md-img, .infocard-md-data { display: inline-block; vertical-align:top } .infocard-cell-img, .infocard-cell-data { display: inline-block; vertical-align:middle } .infocard-list-trainer-pkmn { display: flex; flex-wrap: wrap; align-items: flex-end; margin-bottom:1rem } .infocard-list-trainer-pkmn > .infocard { width:154px } .infocard-list-trainer-pkmn > .infocard.trainer-head { width: 210px; border-right:1px solid #dbdbdb } @supports (display: grid) { .infocard-list { display: grid; grid-gap:2rem .75rem } .infocard-list > .infocard { width: auto; padding:0 } .infocard-list-pkmn-lg { grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)) } .infocard-list-pkmn-md { grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)) } .infocard-list-pkmn-md > .infocard { display:flex } .infocard-list-pkmn-sm { grid-gap: .75rem; grid-template-columns:repeat(auto-fill, minmax(82px, 1fr)) } .infocard-list-trainers { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items:end } } .stat-summary { text-align:center } .stat-summary-item { display: inline-block; margin: 0 1rem 1rem; font-size:.875rem } .stat-summary-count { font-size: 1.5rem; font-weight:bold } .entity-nav { overflow: hidden; text-align:center } .entity-nav-next:hover, .entity-nav-prev:hover { background-color: #eeeeec; color: #000; text-decoration:none } .entity-nav-prev { float: left; padding: 2px 5px; border-radius:30px 0 0 30px } .entity-nav-prev::before { content: "◂ " } .entity-nav-next { float: right; padding: 2px 5px; border-radius:0 30px 30px 0 } .entity-nav-next::after { content: " ▸" } .modal-content iframe { display: block; max-width: 100%; max-height:56vw } .ent-name { font-size: 1rem; font-weight:bold } .num-infinity { font-size: 1.5rem; line-height:1 } .ad-responsive { margin: 0 auto 1rem; padding: 0; overflow: hidden; clear: both; text-align:center } ins.adsbygoogle { background:transparent } .type-icon { display: inline-block; width: 66px; margin-bottom: 4px; background: #dbdbdb; border: 1px solid #a3a3a3; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .2); color: #fff; font-size: .75rem; font-weight: normal; line-height: 1.5rem; text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, .7); text-transform: uppercase; transition:opacity .4s } .type-icon:hover, .type-icon:active, .type-icon:focus { color: #fff; text-decoration:none } .type-icon:link:hover, .type-icon:link:active, .type-icon:link:focus { opacity:.85 } .type-normal { background-color:#aa9 } .type-fire { background-color:#f42 } .type-water { background-color:#39f } .type-electric { background-color:#fc3 } .type-grass { background-color:#7c5 } .type-ice { background-color:#6cf } .type-fighting { background-color:#b54 } .type-poison { background-color:#a59 } .type-ground { background-color:#db5 } .type-flying { background-color:#89f } .type-psychic { background-color:#f59 } .type-bug { background-color:#ab2 } .type-rock { background-color:#ba6 } .type-ghost { background-color:#66b } .type-dragon { background-color:#76e } .type-dark { background-color:#754 } .type-steel { background-color:#aab } .type-fairy { background-color:#e9e } .type-curse { background-color:#698 } .data-table .type-icon, .vitals-table .type-icon { margin:1px 0 } .itype { color:#737373 } .itype.normal { color:#797964 } .itype.fire { color:#d52100 } .itype.water { color:#0080ff } .itype.electric { color:#c90 } .itype.grass { color:#5cb737 } .itype.ice { color:#0af } .itype.fighting { color:#a84d3d } .itype.poison { color:#88447a } .itype.ground { color:#bf9926 } .itype.flying { color:#556dff } .itype.psychic { color:#ff227a } .itype.bug { color:#83901a } .itype.rock { color:#a59249 } .itype.ghost { color:#5454b3 } .itype.dragon { color:#4e38e9 } .itype.dark { color:#573e31 } .itype.steel { color:#8e8ea4 } .itype.fairy { color:#e76de7 } .igame.red, .igame.ruby, .igame.firered, .igame.y, .igame.omega-ruby, .igame.shield { color:#c03028 } .igame.blue, .igame.sapphire, .igame.x, .igame.alpha-sapphire, .igame.sword { color:#5d81d6 } .igame.yellow, .igame.lets-go-pikachu { color:#d6b11f } .igame.gold, .igame.heartgold { color:#ad9551 } .igame.silver, .igame.platinum, .igame.soulsilver, .igame.white, .igame.white-2 { color:#9797ab } .igame.crystal { color:#87bfbf } .igame.leafgreen, .igame.legends-arceus { color:#65a843 } .igame.emerald { color:#909e1b } .igame.diamond, .igame.brilliant-diamond { color:#8471bd } .igame.pearl, .igame.shining-pearl { color:#de4f7a } .igame.black, .igame.black-2 { color:#574438 } .igame.sun, .igame.ultra-sun { color:#db8624 } .igame.moon, .igame.ultra-moon { color:#7038f8 } .igame.lets-go-eevee { color:#ac8639 } .igame.scarlet { color:#a12721 } .igame.violet { color: #9621a1 }