/* FOR ALL THEMES */
/* compatibility */
section, nav, footer {display:block;}
/* http://stackoverflow.com/questions/3226001/some-font-sizes-rendered-larger-on-safari-iphone */
/* http://blog.55minutes.com/2012/04/iphone-text-resizing/ though this seems to be fixed in the version I have (Safari 7.1.2) */
body {-webkit-text-size-adjust: 100%;}

/* basic formatting */
body {font-size: medium; font-family:"Times", serif;}
h1 {font-size: large; border-bottom-width:1px; border-bottom-style:solid; margin-bottom:5px;}
h2 {font-size: medium; text-decoration:underline;}
h3 {font-size: medium;}
p {margin-bottom: 0.5em;}
ul, ol {margin-top: 0em;}
nav.bc, footer {font-size: small;}
nav.bc p {margin-top:0px;}
nav.bc .common, nav.bc .bcright {float:right;}
footer p {margin:0px;}
/* [rel="home"]::before {content:"🏠";} */
/*label {white-space: nowrap;}*/

/* home page */
h1.home {background:#99ffcc; color:#9900ff; font-weight:normal; font-size:x-large; border-bottom-style:solid; border-bottom-width:1px; font-family:serif; opacity:1.0; line-height:1.2em;} /* Yes, my name is purple! */
h1.home img {height:1.2em; vertical-align:top;}

/* sections */
section {margin-bottom:1em; margin-top:0.5em;}
section > :first-child, h2 {margin-top:0em;}
section > :last-child {margin-bottom:0em;}
section::after {content:""; clear:both; display:block;}
h2, h3 {margin-bottom:0.25em;}
h2 + *, h3 + * {margin-top:0em;}

/* paragraph formatting */
.para {}
.para p {line-height:160%; text-indent:2em; margin-top:0em; margin-bottom:0em; }
.para h2, .para h3 {margin-bottom:0em; }
.para hr {visibility:hidden;}
.para .greeting, .para .noindent {text-indent:0;}
.poems p {white-space:pre-wrap;}

/* compatibility */
.req .reqlink {text-decoration:line-through;}
.req .reqtext {font-weight:bold;}
.reqmet .reqtext {font-size:small;}
.req {opacity:0.5; font-size:0.9em;}
.req:hover {opacity:1.0; transition: opacity 0.5s;}
.req:hover .reqlink {opacity:0.75; transition: opacity 0.5s;}
.reqmet .reqtext {opacity:0.25;}
.reqmet:hover .reqtext {opacity:0.75; transition: opacity 0.5s;}
.req, .reqtext, .reqlink {transition: opacity 2s;}

/* other things */
.showtitle, abbr {border-bottom-style:dotted; border-bottom-width:1px;}
/* .showtitles *[title] - was in here, but isn't used anywhere */
abbr {text-decoration:none;}
h1 abbr {padding-bottom:2px;}
:target {outline-style:dotted; outline-width:1px;}
/*.req {text-decoration:line-through; opacity:0.75;}
.reqsmall {font-size:small; opacity:0.75;}*/
hr {border:1px solid; border-color:inherit; color:inherit; margin-top:1em; margin-bottom:1em;}
@supports (text-decoration:dotted underline) {
	span.showtitle, abbr {border-bottom:none; text-decoration:dotted underline;}
	a span.showtitle, a abbr, h2 span.showtitle, h2 abbr {border-bottom:dotted 1px; text-decoration:none;}
	/*a.showtitle, h2.showtitle {text-decoration:underline;}*/
}
pre code {display:inline-block;} /* for background */

/* links */
a[href] {text-decoration:underline;}
a[href^="#"] {text-decoration:none;}
a[href^="http:"], a[href^="https:"] {border-bottom-style:solid;border-bottom-width:1px;}
@supports (text-decoration:double underline) {
	a[href^="http:"], a[href^="https:"] {border-bottom:none; text-decoration:double underline;}
}

.warning, .content-warning {color:#000000; background-color:#ffff00; border:3px double #ff0000; background-image:none;}
.warning a:link, .content-warning a:link {color:blue; background:transparent;}
.warning a:visited, .content-warning a:visited {color:#990099; background:transparent;}
.cw-placeholder {display:none;}
#globalwarning {position:fixed; right:5px; top:5px; opacity:0.75; z-index:1}
#globalwarning:hover {opacity:1.0;}
div.content-warning > :first-child {margin-top:0em;}
div.content-warning > :last-child {margin-bottom:0em;}

/* tables */
table[border] td, table[border] th {border: 1px solid gray;}
table[border] {border-collapse: collapse;}

.sa {color:#ff0000;}
 .sb {color:#0099ff;}
 .sc {color:#009900;}
 .sd {color:#ff9900;}
 .se {color:#999900;}

.forward-back {margin-left:30px;}
 .prev {
	position: fixed; top:0px; left:0px; height:50%; width:20px;
	background:white; text-decoration:none; text-align:center;
	border-bottom:1px solid;
}
 .next {
	position: fixed; top:50%; left:0px; height:50%; width:20px;
	background:white; text-decoration:none; text-align:center;
	border-top:1px solid;
}
 .prev span, .next span {position:relative; top:50%;}
.writing p, .writing li,
 .anywr p, .anywr li, .anywr dl {max-width:50em;}
.twosp p, p.twosp,
 .twosp li, li.twosp,
 .twosp dd, dd.twosp,
 table.twosp td, td.twosp,
 table.twosp th, th.twosp,
 span.twosp {white-space: pre-wrap;}
 .twosp li ul, .twosp li ol {white-space: normal;}
#comments dd {white-space: normal;}

.l .a {color: #ff0000;}
.l .i {color: #00aa00;}
.l .u {color: #0055ff;}
.handshapes img {max-width:none;}

iframe {border:none; width:100%; height:20em;}

img.white {display:none;}
#prompt, .prompt {font-size:smaller;}

.iconned {list-style:none;}
.iconned img {
	position:relative;
	left:-1.25em;
	width:1em; height:1em;
	margin-right:-1em;
	vertical-align:middle;
}
.previewed {
	list-style:none;
	padding-left:0px;
}
.previewed img {
	width:5em;
	max-width:30%;
	height: auto;
	float:left;
}
.previewed li {
	clear:left;
	padding-top:8px;
}
.previewed li:first-child {
	padding-top:0px;
}
.previewed::after {clear:left;}

@media (min-width: 20rem) {
	.previewed li {
		padding-left: 5.25rem;
	}
	.previewed img {
		position: relative;
		right: 5.25rem;
		margin-right: -5.25rem;
		max-width: 5em;
	}
}

.thumbgrid {display:block; margin-left:0px; padding-left:0px; text-align:center; vertical-align:middle;}
.thumbgrid li {display:inline-block; list-style:none; width:auto; text-align:center; margin-bottom:0.5em; vertical-align:middle;}
.thumbgrid img {height:auto; max-width:40vw; vertical-align:middle;}

@media (max-width: 150px) {
	.thumbgrid img {max-width:100%;}
}


/* hidden things */
.nowhidden {display:none; } /* as I'm writing this, used on section, ul, table; p.nowhidden used in esolangs */
.nowhidden:target {display:block} /* TODO do this better, and it's not really used anywhere anyways */
table.nowhidden:target {display:table;}
.show {font-style:italic;}

a.hider::before {content:"▼ ";}
.nowhidden a.hider::before {content:"▶ ";}
section.nowhidden {display:block;}
section.nowhidden > * {display:none;}
section.nowhidden > h2 {display:block;}

/* used by /convert/ */
/* http://stackoverflow.com/questions/6938900/css-input-take-remaining-space */
p.textfield label {float:left; margin-right:0.5em;}
p.textfield span {padding-right:6px;}
p.textfield span, td.textfield span {display:block; overflow:hidden; margin-right:0.2em;}
p.textfield span input, td.textfield span input {width:100%;}
p.textfield input[type='button'] {float:right;}
/* http://stackoverflow.com/questions/1060933/how-to-make-last-cell-of-a-row-in-a-table-occupy-all-remaining-width */
table.textfield {width:100%;}
table.textfield td.textfield, table.textfield td.nottextfield {width:99%;}
table.textfield td {white-space: nowrap;}
p.textfield2 {display:flex;}
.textfield2 input {flex:auto;}
.textfield2 input[type="button"] {flex:initial;}
.biggener:checked ~ * input[type='text'] {font-size:2em;}
.biggener {float:right; z-index:1; position:relative;}
/*.biggener.higher {position:relative; top:-1em;}*/
/*.biggener::after {content:"Bigger";}*/
.fullwidth {width:100%; box-sizing:border-box;}
input {box-sizing:border-box;}

/* math (when not using MathML) */
/*.frac {display:inline-table;}
.fractrnum, .fractrden {display:table-row;}
.fractdnum, .fractdden {display:table-cell;}
.fractdnum {border-bottom:1px solid;}
.fracslash {display:none;}*/
.fractrnum {vertical-align:super;}
.fractrden {vertical-align:sub;}
.rootarg {display:inline-block; vertical-align:top; border-top:1px solid; margin-top:2px;}
.overline {border-top:1px solid; margin-top:2px; display:inline-block; margin-left:1px; margin-right:1px;}

/* audio icon */
.audioicon {
	border:1px solid;
}
.audioicon img {width:1em; height:1em; min-width:16px; min-height:16px; vertical-align:middle;}

#comments pre {white-space: pre-wrap; word-wrap:break-word;}
.justgame #comment-placeholder, .justgame #comment-link-item {display:none;}

img {max-width:100%;}
.xkcdsw #transcript p {margin-bottom:0em; margin-top:0em;}
.xkcdsw #transcript h3 {margin-bottom:0em;}
.xkcdsw #transcript .title-text {margin-top:1em;}

body.picture {height:100%;}
body.picture #thepicture {height:auto; width:auto; max-width:100%; max-height:100%; max-height:100vh; background:white; outline:none;}
.biggener:checked ~ #thepicture, .biggener:checked ~ * #thepicture {max-height:none; max-width:none;}
/*body.picture p.picture {display:inline;}*/
@media print {
	body.picture section, body.picture p, body.picture nav, body.picture h1, .biggener {display:none;}
	body.picture p.warning, body.picture p.content-warning {display: none !important;}
	body.picture #main {display: block !important;}
	body.picture #thepicture {border:none; padding:0px; margin:0px; outline:none;}
	body.picture object#thepicture {width:100%; height:100%;} /* needed for Firefox */
	body.picture {margin:0px;}
	/*body.forward-back {margin-left:0px;}*/
	
	body, section, footer, table, p, nav, h1, pre code {
		background:white !important;
		color:black !important;
		opacity:1.0 !important;
	}
	a {color:black !important; color:inherit !important; text-decoration:none !important; border:none !important;}
	img.black {display:inline !important;}
	img.white {display:none !important;}
	.mover, .show, .noprint {display:none;}
	.hider::before {display:none;}
	.hidden {display:none;}
	nav {display:none;}
	nav.bc {display:block;}
	.forward-back {margin-left:0px;}
}

.showtarget :target p {background:none; color:inherit;}

.opt_l_checkbox {
	background-color: #000000;
	color: #a37a28;
}


#floating-audio {
	position:fixed;
	right:5px;
	bottom:5px;
	border: 3px double;
	background: white; color: black;
	padding:3px;
	opacity:0.75;
	box-shadow: black 3px 3px 8px;
	transition: opacity 1s;
}
#floating-audio * {
	vertical-align: middle;
	display: inline;
}
#floating-audio:hover {opacity:1.0;}

.pin-top {margin-top:0px;}

.game-error {display: none;}
/* FOR ALL DARK THEMES */
body {color:#ffffff;}
section, footer, table, pre code, .prev, .next {background:#000000;}
:target {outline-color:#ffffff;}
mark {background:yellow; color:black;}

.l .a {color:#ff88bb;}
.l .i {color:#11ff11;}
.l .u {color:#11eeff;}
.l .pai {color:#ffff00;}
.l .kiltel {color:#00ee00;}

img.black {display:none;}
img.white {display:inline;}
.invertible, .simple-invertible {
	filter:invert(100%);
	-webkit-filter:invert(100%);
}
@media screen, projection {
	.bwbg, body.picture #thepicture.bwbg {background: black;}
}

.audioicon img {
	filter:invert(100%);
}

code, pre code {background-color:#000000; border:1px solid #666666;}

/* comments */
.author-chridd {color:#cc99ff;}

.disabled {color:#666666;}

/* specific pages */
.made-up-words .greek {color:#6666ff;}
.made-up-words .latin {color:#ff3333;}
.made-up-words .english {color:#999999;}
.made-up-words .other {color:#00ff00;}

.revvid {background:white; color:black;}


/* need: body background, link colors, tag type keyword literal specialchar comment (opt:sh), sel */
/* THEME: night */
body {
	background: #003366;
	background: url(/theme-images/stars.png) fixed, linear-gradient(to bottom, #000000, #000033) fixed #003366;
	color: #cc9933;
}
section, footer {background: #000000; color:#cc9933;}
table {background:#000000;}
a:link {color:#0055ff;}
a:visited {color:#7700bb;}
a:hover:link {color:#0088ff;}
a:hover:visited {color:#9900ff;}
a:active:link, a:active:visited {color: #ffffff;}

.l {color:#ffffcc;}

.showtarget :target {background-color:#003377}
 ::selection {background-color:#003377;}
 ::-moz-selection {background-color:#003377;}
 .showtarget :target ::selection,  .showtarget :target::selection {background-color:#000000;}
 .showtarget :target ::-moz-selection,  .showtarget :target::-moz-selection {background-color:#000000;}

.sd {color: #ff6600;}
 .se {color: #ffffff;}
@media print { .se {color:#999900}}

.white {
	filter:url(/theme-images/filters.svg#white-c93);
	-webkit-filter:url(/theme-images/filters.svg#white-c93);
}

/* syntax highlighting (copied from default) */
.tag {color:#cc6633; }
 .type {color:#9900ff; }
 .keyword {color:#ff9900; }
 .literal {color:#0099ff; }
 .specialchar {color:#ff0099; }
 .comment {color:#669900; }

.invertible {
	filter:url(/theme-images/filters.svg#bw-c93-000);
	-webkit-filter:url(/theme-images/filters.svg#bw-c93-000);
}