/* eric meyer's css reset */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*** LAYOUT ***/

/* Base font.  This is a load of crap.  Why can't everyone have a default
 * browser font they actually want to see?  Fuck fuck fuckity fuck IE. */
body { font-family: DejaVu Sans, Verdana, sans-serif; font-size: 12px; }

/* General feel */
body { color: black; background: #c5baab url(/static/local/images/layout/background.png) repeat; }

/* Core layout */

/* +----------+
 * |  HEADER  |  -- top, left, right
 * |   BODY   |  -- left, right
 * |  FOOTER  |  -- bottom, left, right
 * +----------+
 */
#header, #flash, #body, #footer { margin: 4em; border: 2px solid black; background: white; }
#header { margin-top: 8em; -moz-border-radius-topright: 4em; -webkit-border-top-right-radius: 4em; }
#header, #flash, #body { margin-bottom: 0; border-bottom: none; }
#flash, #body, #footer { margin-top: 0; border-top: none; }

#header { position: relative; height: 8em; color: white; background: #6998df url(/static/local/images/layout/header-background.png) center bottom repeat-x; }
#header #logo { position: absolute; top: -80px; left: -40px; /* arbitrary */ }
#header #title { position: absolute; top: -0.87em /* very approximately puts baseline on the top border */; right: 2em; right: 0; left: 0; text-align: center; font-size: 4em; line-height: 1em; color: black; font-weight: bold; text-transform: lowercase; }
#header #page-name { font-size: 2em; margin: 1em; margin-left: 200px /* beside the logo */; }

#header #pokedex-lookup { position: absolute; right: 1em; bottom: 1em; padding-top: 160px; min-width: 194px; /* make sure pokedex image fits */ padding-right: 1em; padding-bottom: 1em; background: url(/static/local/images/layout/pokedex.png) right bottom no-repeat; }
#header #pokedex-lookup p { margin: 0; line-height: 1; }
#header #pokedex-lookup label { font-size: 1.5em; }

#menu { position: absolute; margin-top: -2em; margin-left: 4em; left: 140px; /* avoid eevee logo */ }
#menu > ul > li { display: inline-block; margin-top: -1px; padding: 1px 1px 0 1px /* for the border on hover */; }
#menu > ul > li > a { background: rgba(100%, 100%, 100%, 0.5); }
#menu li a { display: block; padding: 0.5em; }
/* Positioning of submenu */
#menu li { position: relative; }
#menu > ul > li > ul { position: absolute; width: 16em; left: -1px; border: 1px solid #3173ce; border-top: none; background: #f4f4f4; }
/* Show submenus on hover */
#menu > ul > li > ul { display: none; }
#menu > ul > li:hover { padding: 0; border: 1px solid #3173ce; border-bottom: none; }
#menu > ul > li:hover > ul { display: block; }
/* XXX This used to be for submenu headers, but there aren't enough links for that yet */
#menu > ul > li > ul > li > a:link,
#menu > ul > li > ul > li > a:visited { color: black; }
#menu > ul > li > ul > li a { padding: 0.33em; padding-left: 1em; font-weight: normal; }
#menu > ul > li > ul > li a:hover { background: #e6eefa; }

#flash { padding: 0.5em; }
#flash li { padding: 0.5em; border: 1px solid #d8bc8d; background: #e5d2b2; }
#flash li:first-child { -moz-border-radius-topright: 0.33em; -moz-border-radius-topleft: 0.33em; -webkit-border-top-right-radius: 0.33em; -webkit-border-top-left-radius: 0.33em; }
#flash li:last-child { -moz-border-radius-bottomright: 0.33em; -moz-border-radius-bottomleft: 0.33em; -webkit-border-bottom-right-radius: 0.33em; -webkit-border-bottom-left-radius: 0.33em; }
#flash li + li { border-top: none; }
#flash li img { margin: -0.17em 0 -0.17em -0.17em;  /* let icon sit in the padding but set it apart from the text */ }

#footer { padding: 0.33em; background: #e8e8e8; color: #606060; }
#footer p { margin: 0.33em; }
#footer #footer-timer { float: right; width: 20em; margin: 0.33em; line-height: 16px; text-align: right; }
#footer #footer-timer #footer-timer-pokemon { float: right; margin-left: 0.33em; }

#body { padding: 1em; }

h1 { margin-top: 1em; margin-bottom: 0.5em; padding-left: 36px; border: 1px solid #b58a4b; border-left: none; font-size: 1.6em; line-height: 1.5em; font-weight: bold; color: black; background: #cbab81 url(/static/local/images/layout/h1-background.png) left center no-repeat; -webkit-border-top-right-radius: 1em; -webkit-border-bottom-right-radius: 1em; -moz-border-radius-topright: 1em; -moz-border-radius-bottomright: 1em; }
h2 { margin-top: 1em; margin-bottom: 0.5em; font-size: 1.5em; font-weight: bold; color: #202020; border-bottom: 1px solid #808080; }
h2:before, h2:after { content: '_'; visibility: hidden; /* extend underline */ }
h3 { margin-top: 0.5em; margin-bottom: 0.25em; font-size: 1.2em; font-weight: bold; color: #202020; border-bottom: 1px dotted #808080; }
h1, h2 { overflow: hidden /* clean up cruft and ensure bg/border don't encroach on floats */; }
h1:first-child, h2:first-child { margin-top: 0; }

#error-illustration { text-align: center; }

/*** USEFUL CLASSES ***/

.faded { opacity: 0.25; }
.disabled { color: #c0c0c0; text-decoration: line-through; }

/* Links durp */
a:link { font-weight: bold; text-decoration: none; color: #3173ce; }
a:visited { font-weight: bold; text-decoration: none; color: #435b7d; }
a:hover { color: #ce3131; }
a.subtle { color: black; }
a.subtle:hover { text-decoration: underline; }

/* Tag defaults; careful what goes here! */
p { margin-bottom: 0.75em; line-height: 1.5; }
img { vertical-align: middle; }
abbr { border-bottom: 1px dotted black; }

pre { overflow: auto; margin: 0.5em 0; padding: 0.25em 0.5em; line-height: 1.5; background: #ece7df; }
code { padding: 0 0.17em; background: #ece7df; }
var { font-style: italic; font-family: monospace; }

/* Forms */
form {}
input[type='text'].error { background-color: #f2c6d8; }
dd.error { padding-left: 13em; background: url(/static/spline/icons/exclamation-small-red.png) 12em center no-repeat; color: #a02424; }
p.error { margin-top: -0.75em; padding-left: 16px; background: url(/static/spline/icons/exclamation-small-red.png) left center no-repeat; color: #a02424; }

/* Tables */
table th, table td { padding: 0.25em; }
table th { font-weight: normal; color: #2457a0; }
table tr.subheader-row th { border-bottom: 1px solid #b4c7e6; background: #b4c7e6; color: black; }
table tr.header-row th { padding: 0.33em; vertical-align: bottom; border-bottom: 1px solid #b4c7e6; background: #c6d8f2 url(/static/local/images/layout/th-background.png) bottom left repeat-x; color: black; }
table tr + tr.header-row th { border-top: 2px solid #668dcc; }

table.striped-rows tr:nth-child(2n) { background: #f0f0f0; }
table.striped-rows tr:nth-child(2n):hover { background: #fbfbc8; }
table.striped-rows tr:nth-child(2n+1):hover { background: #fcfcd5; }
table.striped-rows tr.header-row:hover, table.striped-rows tr.subheader-row:hover { outline: none; }
table tr.color1 { ; }
table tr.color2 { background: #f0f0f0; }
table tr.color1:hover { background: #fcfcd5; }
table tr.color2:hover { background: #fbfbc8; }

table tr.horizontal-line { height: 0 !important; padding: 0 !important; border-bottom: 1px solid #b4c7e6; }
table td.vertical-line { width: 0 !important; padding: 0 !important; border-right: 1px solid #b4c7e6; }


/* Lists */
ul.classic-list { margin: 0.5em 0; margin-left: 1.5em; list-style-type: disc; }
ul.classic-list li { line-height: 1.5; }

ul.inline { overflow: hidden /* new float context */; }
ul.inline li { float: left; }

ul.inline-commas { display: inline; }
ul.inline-commas > li { display: inline; }
ul.inline-commas > li:after { content: ','; }
ul.inline-commas > li:last-child:after { content: none; }

ol { margin: 0.5em 0; margin-left: 1.5em; list-style: lower-roman; }
ol li { line-height: 1.5; }

/* Definition lists via floats */
dl { overflow: hidden /* new float context */; }
dt { float: left; clear: left; width: 11.5em; margin-right: 0.5em; text-align: right; color: #2457a0; }
dt:after { content: ':'; }
dd { padding-left: 12em /* float width, so hover highlight includes dt but lines wrap correctly */; }
dd:after { content: 'float clear'; display: block; clear: both; height: 0; visibility: hidden; }
dt, dd { line-height: 1.5; }

ul.classic { padding-left: 2em; }
ul.classic > li { line-height: 1.5; list-style-type: disc; }


ul#dex-suggestions { position: absolute; max-height: 192px /* about eight entries */; overflow: auto; overflow-x: hidden; background: white; border: 1px solid #404040; }
ul#dex-suggestions li { height: 24px /* height of item icon; pokemon are cropped */; padding: 0 0.5em 0 36px; border: 1px solid transparent; line-height: 24px; vertical-align: middle; background-repeat: no-repeat; background-position: center left; }
ul#dex-suggestions li:hover { border: 1px solid #bfd3f1; background-color: #e6eefa; }
ul#dex-suggestions li.selected { border: 1px solid #95b7ea; background-color: #bfd4f2; }
ul#dex-suggestions li.dex-suggestion-pokemon { background-position: 0px -6px; }
ul#dex-suggestions li.dex-suggestion-item { background-position: 4px center; }
ul#dex-suggestions li .typed { font-weight: bold; text-decoration: underline; }

/*** General ***/

/* Pokémon sprite link grid */
a.dex-icon-link { display: inline-block; border: 1px solid transparent; }
a.dex-icon-link:hover { border: 1px solid #bfd3f1; background: #e6eefa; }
a.dex-icon-link.selected { border: 1px solid #95b7ea; background: #bfd4f2; }
a.dex-box-link { display: inline-block; margin: 0.25em; border: 1px solid transparent; }
a.dex-box-link:hover { border: 1px solid #bfd3f1; background: #e6eefa; }
a.dex-box-link.selected { border: 1px solid #95b7ea; background: #bfd4f2; }

/* Header */
ul.inline-menu { text-align: middle; }
ul.inline-menu > li { display: inline; }
ul.inline-menu > li:after { content: ' | '; }
ul.inline-menu > li:last-child:after { content: none; }

#dex-header { overflow: hidden; /* new float context */ text-align: center; line-height: 24px; /* keep buttons at least 24px tall */ }
#dex-header-prev { float: left;  text-align: left; }
#dex-header-next { float: right; text-align: right; }
#dex-header-prev, #dex-header-next { width: 15em; min-height: 24px; margin: 0; }
#dex-header-prev img, #dex-header-next img { vertical-align: middle; }
#dex-header ul.inline-menu {  line-height: 1.2; }
#dex-header + h1 { margin-top: 0.25em; }

/* Table columns */
col.dex-col-stat        { width: 3em; }
col.dex-col-stat-name   { width: 10em; }
col.dex-col-stat-bar    { width: auto; }
col.dex-col-stat-pctile { width: 5em; }
col.dex-col-stat-result { width: 5em; }
col.dex-col-version     { width: 3.5em; }  /* two versions (32px < 33px == 3em) plus 0.17em padding < 3.5em */
col.dex-col-encounter-name { width: 10em; }
col.dex-col-encounter-version { width: 12em; }
col.dex-col-first-version { border-left:  1px solid #b4c7e6; }
col.dex-col-last-version  { border-right: 1px solid #b4c7e6; }

/* Cool three-column layout */
.dex-column-container { clear: both; overflow: hidden /* float context */; margin-top: 1em; }
.dex-column { float: left; width: 32.666%; margin-left: 1%; }
.dex-column:first-child { margin-left: 0; }
.dex-column-2x { float: left; width: 66.333%; margin-left: 1%; }
.dex-column-2x:first-child { margin-left: 0; }

/* Type damage */
.dex-damage-taken-0   { font-weight: bold; color: #44c; }
.dex-damage-taken-25  { font-weight: bold; color: #4cc; }
.dex-damage-taken-50  { font-weight: bold; color: #4c4; }
.dex-damage-taken-100 { font-weight: bold; color: #999; }
.dex-damage-taken-200 { font-weight: bold; color: #c44; }
.dex-damage-taken-400 { font-weight: bold; color: #c4c; }

.dex-damage-dealt-0   { font-weight: bold; color: #44c; }
.dex-damage-dealt-25  { font-weight: bold; color: #c4c; }
.dex-damage-dealt-50  { font-weight: bold; color: #c44; }
.dex-damage-dealt-100 { font-weight: bold; color: #999; }
.dex-damage-dealt-200 { font-weight: bold; color: #4c4; }
.dex-damage-dealt-400 { font-weight: bold; color: #4cc; }

/* Size comparison */
.dex-size { height: 120px; padding-bottom: 2.5em /* for -value */; overflow: hidden /* new float context */}
.dex-size img { clip: 8px; position: absolute; bottom: 0; image-rendering: -moz-crisp-edges; }
.dex-size input[type='text'] { text-align: right; }
.dex-size .dex-size-trainer,
.dex-size .dex-size-pokemon { display: block; position: relative; float: left; height: 100%; width: 50%; text-align: left; }
.dex-size .dex-size-trainer { text-align: right; }
.dex-size .dex-size-pokemon { text-align: left; }
.dex-size .dex-size-trainer img { right: 0.25em; }
.dex-size .dex-size-pokemon img { left: 0.25em; }
.dex-size .js-dex-size-raw { display: none; }
.dex-size .dex-size-value { position: absolute; height: 2em; margin: 0; line-height: 1; padding: 0.25em; bottom: -2.5em; }
.dex-size .dex-size-trainer .dex-size-value { right: 0.25em; }
.dex-size .dex-size-pokemon .dex-size-value { left: 0.25em; }

/*** Individual pages ***/
.dex-page-portrait { float: left; width: 15em; min-height: 10em; padding-bottom: 1em; text-align: center; }
.dex-page-portrait p { margin: 0.25em 0; line-height: 1; }
.dex-page-beside-portrait:after { display: block; clear: both; content: ""; }
p#dex-page-name { font-size: 2em; margin: 0.12em 0; }
#dex-pokemon-forme { font-size: 1.25em; font-weight: bold; }
#dex-pokemon-portrait-sprite { margin: 0.33em; padding: 7px; background: url(/dex/media/chrome/sprite-frame.png) center center no-repeat; }

ul.dex-page-damage { overflow: hidden /* new float context */; margin-bottom: 2em; }
ul.dex-page-damage li { display: inline-block; text-align: center; padding: 0.125em; }
ul.dex-page-damage li img { display: block; margin-bottom: 0.25em; }

ul.dex-pokemon-compatibility { max-height: 136px /* four rows of icons plus borders */; overflow: auto; }

.dex-pokemon-item-rarity { display: inline-block; width: 3em; text-align: right; }

table.dex-evolution-chain { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0.5em; empty-cells: hide; }
table.dex-evolution-chain td { padding: 0.5em; vertical-align: middle; border: 1px solid #d8d8d8; background: #f0f0f0; }
table.dex-evolution-chain td:hover { border: 1px solid #bfd3f1; background: #e6eefa; }
table.dex-evolution-chain td.selected { border: 1px solid #95b7ea; background: #bfd4f2; }
.dex-evolution-chain-method { display: block; overflow: hidden; font-size: 0.8em; line-height: 1.25em; }
.dex-evolution-chain-pokemon { padding-top: 8px /* bump icon up a bit */; display: block; font-weight: bold; }
.dex-evolution-chain-pokemon img { float: left; margin-top: -8px /* fills link's top padding */; padding-right: 0.33em; }

table.dex-pokemon-stats { width: 100%; }
table.dex-pokemon-stats th label { display: block; text-align: right; font-weight: normal; color: #2457a0; }
table.dex-pokemon-stats th input { text-align: left; }
table.dex-pokemon-stats .dex-pokemon-stats-bar-container { background: #f8f8f8; }
table.dex-pokemon-stats .dex-pokemon-stats-bar { padding: 0.33em; border: 1px solid #d8d8d8; background: #f0f0f0; }
table.dex-pokemon-stats td.dex-pokemon-stats-pctile { text-align: right; }
table.dex-pokemon-stats td.dex-pokemon-stats-result { text-align: right; }

.dex-simple-encounters-terrain { margin-bottom: 0.5em; }
dl.dex-simple-encounters dd img { vertical-align: bottom; }
dl.dex-simple-encounters ul { display: inline; }
dl.dex-simple-encounters ul li { display: inline; }
dl.dex-simple-encounters ul li:after { content: '; '; }
dl.dex-simple-encounters ul li:last-child:after { content: ''; }

/* This is actually the locations page */
table.dex-encounters td { padding-left: 0.5em; padding-right: 0.5em; vertical-align: top; }
table.dex-encounters td.location { vertical-align: top; }
table.dex-encounters th.location { vertical-align: top; text-align: left; }
.dex-location-area { font-size: 0.8em; font-style: italic; color: black; }
.dex-encounter-condition-group { padding: 0.5em 0; }
.dex-encounter-condition-group + .dex-encounter-condition-group { border-top: 1px solid #404040; }
.dex-encounter-conditions + .dex-encounter-conditions { margin-top: 0.5em; }
.dex-encounter-conditions .dex-encounter-icon { float: left; width: 24px; height: 24px; line-height: 24px; text-align: center; overflow: hidden;}
.dex-encounter-conditions .dex-encounter-icon img { vertical-align: middle; }
.dex-encounter-conditions .dex-encounter-rarity { float: right; }
.dex-encounter-conditions .dex-rarity-bar { position: relative; overflow: auto; font-size: 0.83em; height: 1em; line-height: 1; margin-top: 0.25em; background: #e8e8e8; border: 1px solid #96bbf2; }
.dex-encounter-conditions .dex-rarity-bar-fill { height: 100%; background: #96bbf2; }
.dex-encounter-conditions .dex-rarity-bar-fills { float: left; height: 100%; background: #96bbf2; }
.dex-encounter-conditions .dex-rarity-bar-fills + .dex-rarity-bar-fills { margin-left: -1px; border-left: 1px solid #b3cef6; }
.dex-encounter-conditions .dex-rarity-bar-fills:hover { background: #668dcc; }
.dex-encounter-conditions .dex-rarity-bar-value { position: absolute; height: 100%; top: 0; right: 0; color: #808080; vertical-align: bottom; }

table.dex-pokemon-moves {;}
table.dex-pokemon-pokemon-moves { width: 100%; }
table.dex-pokemon-moves td { padding: 0.33em; vertical-align: middle; text-align: center; }
table.dex-pokemon-moves th { padding: 0.33em 0.17em; text-align: center; }
table.dex-pokemon-moves tr.subheader-row th { padding: 0.17em 0.33em; text-align: left; }
table.dex-pokemon-moves td.egg { padding: 0 /* egg sprite consumes a lot of space, so let it extend into padding */; }
table.dex-pokemon-moves td.effect { font-size: 0.8em; text-align: left; }
table.dex-pokemon-moves td.effect p { margin: 0; }
table.dex-pokemon-moves td.tutored { white-space: nowrap; }
table.dex-pokemon-moves .no-tutor { visibility: hidden; }
table.dex-pokemon-moves td.type2 { text-align: left; }
table.dex-pokemon-moves td.ability { font-size: 0.75em; }
table.dex-pokemon-moves td.egg-group { font-size: 0.75em; }
table.dex-pokemon-moves td.stat { text-align: right; }
/* javascript filtering/sorting */
table.dex-pokemon-moves tr.js-dex-pokemon-moves-controls .js-label { font-size: 0.67em; }
table.dex-pokemon-moves tr.js-dex-pokemon-moves-controls:hover { background: transparent; outline: none; }
table.dex-pokemon-moves tr.js-dex-pokemon-moves-controls td:hover { cursor: pointer; outline: 1px solid #bfd3f1; outline-offset: -1px; background: #e6eefa; }
table.dex-pokemon-moves tr.js-dex-pokemon-moves-controls td.js-not-a-button:hover { cursor: default; outline: none; background: transparent; }
table.dex-pokemon-moves tr.js-dex-pokemon-moves-controls td.js-sorted-by { background: #f0efe6; }
table.dex-pokemon-moves tr:nth-child(2n) td.js-sorted-by { background: #f0efe6; }
table.dex-pokemon-moves tr:nth-child(2n+1) td.js-sorted-by { background: #f6f4ea; }
table.dex-pokemon-moves tr:nth-child(2n) td.better-move-reason { background: #afcfaf; }
table.dex-pokemon-moves tr:nth-child(2n+1) td.better-move-reason { background: #c0d8c0; }

.dex-pokemon-flavor-generation { position: absolute; line-height: 1.5; }
dl.dex-pokemon-flavor-text + .dex-pokemon-flavor-generation { padding-top: 1.5em; }
dl.dex-pokemon-flavor-text + .dex-pokemon-flavor-generation + dl.dex-pokemon-flavor-text { padding-top: 1.5em; }
dl.dex-pokemon-flavor-text dt { width: 7em /* enough for gen, two versions, and space */; }
dl.dex-pokemon-flavor-text dd { padding-left: 7.5em; }

th { vertical-align: middle; }
.vertical-text { -moz-transform: rotate(-90deg); }

.dex-priority-fast { font-weight: bold; color: green; }
.dex-priority-slow { font-weight: bold; color: red; }

/* Move effects, etc */
.dex-effect a { font-weight: normal; }


#dex-cheat-unlocked { overflow: hidden /* float containment */; width: 60%; margin: auto; margin-top: 10em; }
#dex-cheat-unlocked .dex-cheat-unlocked-left { float: left; }
#dex-cheat-unlocked .dex-cheat-unlocked-right { float: right; }
#dex-cheat-unlocked .dex-cheat-unlocked-line1 { font-size: 48px; font-weight: bold; text-align: center; text-transform: uppercase; }
#dex-cheat-unlocked .dex-cheat-unlocked-line2 { font-size: 34px; font-weight: bold; text-align: center; text-transform: uppercase; }
#dex-cheat-list { margin-top: 1em; margin-bottom: 5em; text-align: center; }
#dex-cheat-list li { display: inline; padding: 0.5em 1em; }
#dex-cheat-list li.this-cheat { font-weight: bold; }

.dex-obdurate-word { white-space: nowrap; }