/* general */
html {box-sizing: border-box; font: 1em/1.25 sans-serif; text-align: center;}
*, *::before, *::after {box-sizing: inherit;}
a {text-decoration: none; color: #00c;}
a:focus, a:hover, a:active {outline: none; border-bottom: 1px dotted currentColor; color: #c00;}
body:not(.home) footer {text-align: left;}
body.home footer {margin-bottom: 50px;}
button {padding: 0; border: 0; font-size: inherit; font-family: inherit; background-color: transparent; cursor: pointer;}
button:focus {outline: none;}
button::-moz-focus-inner {padding: 0; border: 0;}
h1, h2, h3, h4, h5, h6 {font-family: serif;}
hr {border: 0; border-bottom: 1px solid #999;}
img {height: auto; max-width: 100%;}
main > p {margin: 2em auto;}
nav {max-width: 320px; margin: 1em auto;}
nav ul {display: flex; width: 100%; margin: 0; padding: 0; list-style: none;}
nav li {align-self: center; flex: 1;}
nav a {display: inline-block; border-bottom: 1px dotted transparent; font-weight: 700;}

/* home */
.home h2 {margin-top: 2em; margin-bottom: 0;}
.header-btn:not(.pressed) + ol {display: none;}
.header-btn {display: block; margin: 2em auto 0; font: 700 1.5em serif;}
.header-btn::before {display: inline-block; width: 24px; height: 24px; margin-right: 13px; vertical-align: sub; background-image: url('toggle.png'); background-position: top center; background-size: 24px 48px;  content: '';}
.header-btn[aria-pressed]::before {background-position-y: -24px;}
.guide-list {margin: 0; padding: 0; list-style: none;}
.guide-list li {margin-bottom: .5em;}
.guide-list li:first-child {margin-top: 1em;}
.guide-list strong {font-size: smaller; line-height: 1.25rem;}
.updates {margin: 2em 0;}
.updates h3 {text-transform: uppercase;}
.poll {border-top: 1px solid #999;}
.poll > table {margin: 1em auto;}
.home footer {margin-top: 2em;}

/* guides */
body:not(.home) h2 + h3 {margin-top: -1em;}
.intro, .updates {max-width: 700px; margin: 2em auto; padding: 0 2em; border: 1px solid #333;}
.intro > :first-child {font-weight: 700;}
.credits {max-width: 600px;}
.credits a {font-weight: 700;}

/* guide tables */
.morph-table {width: 100%; max-width: 1280px; margin: 1em auto; border: 1px solid #333; border-collapse: collapse; border-spacing: 0;}
.morph-table + .morph-table {margin-top: 2em;}
.morph-table img {display: block; margin: 0 auto;}
.morph-table:not(.morph-table-special) tr > * {width: 40%;}
.morph-table:not(.morph-table-special) tr > :first-child {width: 20%;}
.morph-table-pilot1 tr > * {width: 22%;}
.morph-table-pilot1 tr > :last-child {width: 12%;}
.morph-table-pilot2 tr > * {width: 20%;}
.morph-table-videoep tr > * {width: 25%;}
.morph-table-videoep tr > :last-child {width: 50%;}
.morph-table-plus-audio tr > * {width: 35%;}
.morph-table-plus-audio tr > :first-child {width: 20%;}
.morph-table-plus-audio tr > :last-child {width: 10%;}
.morph-table-credits tr > * {width: 25%;}
.morph-table th, .morph-table td {padding: 1em; border: 1px solid #333;}
.morph-table th {text-transform: uppercase;}
.morph-table td > :first-child {margin-top: 0;}
.morph-table td > :last-child {margin-bottom: 0;}
.morph-table + h2 {margin-top: 2em;}

@media screen and (min-width: 550px) {
	.header-btn::after {display: inline-block; width: 27px; height: 24px; margin-left: 10px; vertical-align: text-top; content: '';}
	.header-btn[aria-pressed]::after, .header-btn:focus::after, .header-btn:hover::after, .header-btn:active::after {background-image: url('icons.png'); background-position-y: 0;}
	.mmpr::after {background-position-x: -108px;}
	.prz::after {background-position-x: -729px;}
	.prt::after {background-position-x: -648px;}
	.pris::after {background-position-x: -270px;}
	.prlg::after {background-position-x: -324px;}
	.prlr::after {background-position-x: -351px;}
	.prtf::after {background-position-x: -675px;}
	.prwf::after {background-position-x: -702px;}
	.prns::after {background-position-x: -432px;}
	.prdt::after {background-position-x: -243px;}
	.prspd::after {background-position-x: -594px;}
	.prmf::after {background-position-x: -405px;}
	.proo::after {background-position-x: -486px;}
	.prjf::after {background-position-x: -297px;}
	.prrpm::after {background-position-x: -513px;}
	.prs::after {background-position-x: -540px;}
	.prss::after {background-position-x: -621px;}
	.prm::after {background-position-x: -378px;}
	.prsm::after {background-position-x: -567px;}
	.prdc::after {background-position-x: -189px;}
	.prdsc::after {background-position-x: -216px;}
	.prnstl::after {background-position-x: -459px;}
	.mr::after {background-position-x: -162px;}
	.bbb::after {background-position-x: 0;}
	.bbm::after {background-position-x: -27px;}
	.vrt::after {background-position-x: -756px;}
}

@media screen and (max-width: 600px) {
	.morph-table:not(.morph-table-special) thead {display: none;}
	.morph-table:not(.morph-table-special) tr, .morph-table:not(.morph-table-special) td {display: block; width: 100% !important; border: 1px solid #333;}
	.morph-table:not(.morph-table-special) td {border: 0;}
	.morph-table:not(.morph-table-special) td:empty {padding: 0;}
	.morph-table:not(.morph-table-special) td:first-child:not(:empty)::before {content: 'Source: ';}
	.morph-table:not(.morph-table-special) td:last-child:not(:empty)::before {display: block; content: 'Edit Note:';}
}

@media screen and (max-width: 700px) {
	.morph-table-special thead {display: none;}
	.morph-table-special tr, .morph-table-special td {display: block; width: 100% !important; border: 1px solid #333;}
	.morph-table-special td {border: 0;}
	.morph-table-special td:empty {padding: 0;}

	.morph-table-pilot1 td:nth-child(1):not(:empty)::before {display: block; content: 'Episode Time Code: ';}
	.morph-table-pilot1 td:nth-child(2):not(:empty)::before {display: block; content: 'Source Time Code: ';}
	.morph-table-pilot1 td:nth-child(4):not(:empty)::before {display: block; content: 'Caption: ';}
	.morph-table-pilot1 td:nth-child(5):not(:empty)::before {content: 'Audio: ';}

	.morph-table-pilot2 td:nth-child(1):not(:empty)::before {display: block; content: 'Episode Time Code: ';}
	.morph-table-pilot2 td:nth-child(2):not(:empty)::before {display: block; content: 'Source Time Code: ';}
	.morph-table-pilot2 td:nth-child(4):not(:empty)::before {display: block; content: 'Edit Note: ';}

	.morph-table-videoep td:nth-child(1):not(:empty)::before {display: block; content: 'Video Version: ';}
	.morph-table-videoep td:nth-child(2):not(:empty)::before {display: block; content: 'Aired Version: ';}

	.morph-table-plus-audio td:first-child:not(:empty)::before {content: 'Source: ';}
	.morph-table-plus-audio td:last-child:not(:empty)::before {content: 'Audio: ';}

	.morph-table-credits td:first-child:not(:empty)::before {content: 'Source: ';}
	.morph-table-credits td:last-child:not(:empty)::before {display: block; content: 'Edit Note:';}

}