/* 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:#000033; background-color:#cccc33; border:3px double #cc0033; background-image:none;}
.warning a:link, .content-warning a:link {color:#0000ff; background:transparent;}
.warning a:visited, .content-warning a:visited {color:#7a00ad; 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 #666699;}
table[border] {border-collapse: collapse;}

.sa {color:#cc0033;}
 .sb {color:#007aff;}
 .sc {color:#007a33;}
 .sd {color:#cc7a33;}
 .se {color:#7a7a33;}

.forward-back {margin-left:30px;}
 .prev {
	position: fixed; top:0px; left:0px; height:50%; width:20px;
	background:#ccccff; text-decoration:none; text-align:center;
	border-bottom:1px solid;
}
 .next {
	position: fixed; top:50%; left:0px; height:50%; width:20px;
	background:#ccccff; 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: #cc0033;}
.l .i {color: #008833;}
.l .u {color: #0044ff;}
.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:#ccccff; 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:#ccccff !important;
		color:#000033 !important;
		opacity:1.0 !important;
	}
	a {color:#000033 !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: #a3ccff;
	color: #000033;
}


#floating-audio {
	position:fixed;
	right:5px;
	bottom:5px;
	border: 3px double;
	background: #ccccff; color: #000033;
	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 LIGHT THEMES */
body {color:#000033;}
section, footer, table, pre code {background:#ccccff;}
:target {outline-color:#000033;}
mark {background:#cccc33; color:#000033;}

code, pre code {background-color:#e5e5ff; border:1px solid #a3a3d6;}
.bwbg, body.picture #thepicture.bwbg {background:#ccccff;}

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

.disabled {color:#7a7aad;}

/* specific pages */
.made-up-words .greek {color:#0000ad;}
.made-up-words .latin {color:#7a0033;}
.made-up-words .english {color:#515184;}
.made-up-words .other {color:#007a33;}

.revvid {background:#000033; color:#ccccff;}

/* need: body background, link colors, tag type keyword literal specialchar comment (opt:sh), sel */
body {
	background-color:#0000ff;
	/*background:linear-gradient(75deg, #0000ff, #5151ff, #0000ff, #0000ff, #5151ff, #0000ff, #5151ff, #0000ff, #5151ff, #0000ff, #0000ff, #5151ff, #0000ff, #0000ff, #5151ff, #0000ff, #5151ff, #0000ff, #0000ff, #0000ff, #0000ff) fixed #0000ff;*/
	background:linear-gradient(75deg, #0000ff, #6666ff, #6666ff, #0000ff, #0000ff, #6666ff, #6666ff, #0000ff, #6666ff, #6666ff, #0000ff, #6666ff, #6666ff, #0000ff, #0000ff, #6666ff, #6666ff, #0000ff, #0000ff, #6666ff, #6666ff, #0000ff, #6666ff, #6666ff, #0000ff, #0000ff, #6666ff, #6666ff) fixed #0000ff;
	background:linear-gradient(0deg, rgba(0,0,255,1.0), rgba(0,0,255,0.0)) fixed, linear-gradient(75deg, #0000ff, #6666ff, #6666ff, #0000ff, #0000ff, #6666ff, #6666ff, #0000ff, #6666ff, #6666ff, #0000ff, #6666ff, #6666ff, #0000ff, #0000ff, #6666ff, #6666ff, #0000ff, #0000ff, #6666ff, #6666ff, #0000ff, #6666ff, #6666ff, #0000ff, #0000ff, #6666ff, #6666ff) fixed #0000ff;
	color:#ccccff;
}

section, footer, table {
	color:#000033;
}
section, footer, table, a {
	background:#a3ccff;
	-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
}

/*a {background:#a3ccff; transition:text-shadow 3s;}*/
a:link {color:#0000ff;}
a:visited {color:#28a35b;}
a:hover {color:#cc28ff; /*text-shadow:#ccccff 0px 0px 4px;*/}
a:active {color:#cc0033;}

.showtarget :target {background-color:#cc7ad6}
 section ::selection,  section::selection {background-color:#cc7ad6;}
 section ::-moz-selection,  section::-moz-selection {background-color:#cc7ad6;}
 .showtarget :target ::selection,  .showtarget :target::selectio {background-color:#cc51ad;}
 .showtarget :target ::-moz-selection,  .showtarget :target::-moz-selection {background-color:#cc51ad;}
 ::selection {background-color:#cc51ad;}
 ::-moz-selection {background-color:#cc51ad;}

h1 img.black {display:none;}
h1 img.white {display:inline;}

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