/* $Id: durandal.css 781 2024-12-21 15:29:07Z jraxis $ */



@import url( "fonts/JetBrainsMono/fonts.css" );

* {
	border: 0;
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

body {
	background: #000;
	height: 100%;
}

h1, h2, h3, h4, h5, h6, nav, p, ul, li, td, th {
	line-height: 140%;
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6, nav, p, ul, li, td, th, pre, kbd, input, textarea {
	font-family: "JetBrainsMono", monospace;
}

nav, p, li, td, th, input, textarea {
	font-size: 100%;
}

th {
	font-weight: 400;
	text-align: left;
}

input[type='reset'],
input[type='submit'],
input[type='text'],
textarea {
	background: #000;
	padding: 1pt 0.5em;
}

input::file-selector-button {
	/* This rule has to be separate from the above. Older browsers do not
	 * understand it, and it breaks the whole rule above if it is not.
	 */
	background: #000;
	font-family: "JetBrainsMono", monospace;
	margin-right: 1em;
	padding: 1pt 0.5em;
}

input[type='reset']:focus,
input[type='submit']:focus,
input[type='text']:focus,
textarea:focus {
	outline: 0px none transparent !important;
}



.hidden { display: none; }



header, footer {
	background: #500;
	color: #F00;
	padding: 0 1em;
}

header { position: absolute; top: 1em; left: 1em; right: 1em; }
footer { position: absolute; bottom: 1em; left: 1em; right: 1em; }

header h1, #clock, #created, #updated, #middle, #vt920 {
	font-size: 85%;
	font-weight: 700;
}

header h1, #created, #updated, #middle { float: left; }
#clock { text-align: right; }
#vt920 { text-align: right; }
#created { display: block; }
#updated { display: none; }

header h1 a:link,
header h1 a:visited,
header h1 a:focus,
header h1 a:hover,
header h1 a:active {
	background: transparent;
	color: #F00;
	text-decoration: none;
}



#body { padding: 0 1em; }

#image {
	background: url( "durandal.png" ) no-repeat;
	position: absolute; top: 3em; left: 1em; bottom: 3em; right: 60%;
}

main {
	overflow-x: hidden;
	overflow-y: auto;
	outline: 0px none transparent !important;
	position: absolute; top: 3em; left: 40%; bottom: 3em; right: 1em;
}

main h1, main h2, main h3, main h4, main h5, main h6 {
	font-weight: 700;
}

main form   { margin: 0   1em 1em 1em; }
main h1     { margin: 1em 1em 3em 1em; font-size: 125%; }
main h2     { margin: 3em 1em 1em 1em; font-size: 100%; }
main h3     { margin: 2em 1em 1em 3em; font-size:  85%; }
main h4     { margin: 2em 1em 1em 4em; font-size:  85%; }
main h5     { margin: 2em 1em 1em 5em; font-size:  85%; }
main h6     { margin: 2em 1em 1em 6em; font-size:  85%; }
main hr     { margin: 0   1em 1em 1em; }
main p      { margin: 0   1em 1em 1em; }
main pre    { margin: 0   1em 1em 3em; }
main table  { margin: 0   1em 1em 1em; }
main ul     { margin: 0   2ch 0   6ch; }

main nav    { margin: 3em; }
main nav a  { padding: 0 0.5em; }

main li {
	list-style-type: none;
	text-indent: -1ch;
}

main li ul {
	margin-left: 4ch;
}

main    li:before { content: "]  "; font-weight: 700; }
main li li:before { content: ">  "; font-weight: 700; }

main .cyan            { color: #077; }
.cyan  main           { color: #077; }
.cyan  main .dim      { color: #044; }
.cyan  main a:link    { color: #0FF; }
.cyan  main a:visited { color: #0AA; }
.cyan  main a:focus   { color: #0CC; background: #055; }
.cyan  main a:hover   { color: #0DD; }
.cyan  main a:active  { color: #000; background: #0FF; }
.cyan  main cite      { color: #0FF; }
.cyan  main dfn       { color: #0FF; }
.cyan  main em        { color: #0FF; }
.cyan  main h2        { color: #0FF; }
.cyan  main h3        { color: #0FF; }
.cyan  main h4        { color: #0FF; }
.cyan  main h5        { color: #0FF; }
.cyan  main h6        { color: #0FF; }
.cyan  main hr        { border-top: 1pt solid #022; }
.cyan  main i         { color: #0FF; }
.cyan  main kbd       { color: #0CC; }
.cyan  main mark      { color: #000; background: #0FF; }
.cyan  main strong    { color: #0FF; }
.cyan  main th        { color: #0FF; }

.cyan  main input,
.cyan  main textarea           { color: #077; border: 1pt solid #022; }
.cyan  main input:active,
.cyan  main input:focus,
.cyan  main textarea:focus     { color: #0FF; border: 1pt solid #055; }
.cyan  main input[type='file'] { color: #077; border: 0; }
.cyan  main input::file-selector-button       { color: #077; border: 1pt solid #022; }
.cyan  main input::file-selector-button:focus { color: #0FF; border: 1pt solid #055; }

main .green           { color: #080; }
.green main           { color: #080; }
.green main .dim      { color: #040; }
.green main a:link    { color: #0F0; }
.green main a:visited { color: #0A0; }
.green main a:focus   { color: #0C0; background: #050; }
.green main a:hover   { color: #0D0; }
.green main a:active  { color: #000; background: #0F0; }
.green main cite      { color: #0F0; }
.green main dfn       { color: #0F0; }
.green main em        { color: #0F0; }
.green main h2        { color: #0F0; }
.green main h3        { color: #0F0; }
.green main h4        { color: #0F0; }
.green main h5        { color: #0F0; }
.green main h6        { color: #0F0; }
.green main hr        { border-top: 1pt solid #020; }
.green main i         { color: #0F0; }
.green main kbd       { color: #0C0; }
.green main mark      { color: #000; background: #0F0; }
.green main strong    { color: #0F0; }
.green main th        { color: #0F0; }

.green main input,
.green main textarea           { color: #080; border: 1pt solid #020; }
.green main input:active,
.green main input:focus,
.green main textarea:focus     { color: #0F0; border: 1pt solid #050; }
.green main input[type='reset']:active,
.green main input[type='submit']:active       { background: #040; }
.green main input[type='file']                { color: #080; border: 0; }
.green main input::file-selector-button       { color: #080; border: 1pt solid #020; }
.green main input::file-selector-button:focus { color: #0F0; border: 1pt solid #050; }

main .red             { color: #900; }
.red   main           { color: #900; }
.red   main .dim      { color: #400; }
.red   main a:link    { color: #F00; }
.red   main a:visited { color: #A00; }
.red   main a:focus   { color: #C00; background: #500; }
.red   main a:hover   { color: #D00; }
.red   main a:active  { color: #000; background: #F00; }
.red   main cite      { color: #F00; }
.red   main dfn       { color: #F00; }
.red   main em        { color: #F00; }
.red   main h2        { color: #F00; }
.red   main h3        { color: #F00; }
.red   main h4        { color: #F00; }
.red   main h5        { color: #F00; }
.red   main h6        { color: #F00; }
.red   main hr        { border-top: 1pt solid #200; }
.red   main i         { color: #F00; }
.red   main kbd       { color: #C00; }
.red   main mark      { color: #000; background: #F00; }
.red   main strong    { color: #F00; }
.red   main th        { color: #F00; }

.red   main input,
.red   main textarea           { color: #900; border: 1pt solid #200; }
.red   main input:active,
.red   main input:focus,
.red   main textarea:focus     { color: #F00; border: 1pt solid #500; }
.red   main input[type='reset']:active,
.red   main input[type='submit']:active       { background: #400; }
.red   main input[type='file']                { color: #900; border: 0; }
.red   main input::file-selector-button       { color: #900; border: 1pt solid #200; }
.red   main input::file-selector-button:focus { color: #F00; border: 1pt solid #500; }

main .white           { color: #777; }
.white main           { color: #777; }
.white main .dim      { color: #444; }
.white main a:link    { color: #FFF; }
.white main a:visited { color: #AAA; }
.white main a:focus   { color: #CCC; background: #555; }
.white main a:hover   { color: #DDD; }
.white main a:active  { color: #000; background: #FFF; }
.white main cite      { color: #FFF; }
.white main dfn       { color: #FFF; }
.white main em        { color: #FFF; }
.white main h2        { color: #FFF; }
.white main h3        { color: #FFF; }
.white main h4        { color: #FFF; }
.white main h5        { color: #FFF; }
.white main h6        { color: #FFF; }
.white main hr        { border-top: 1pt solid #222; }
.white main i         { color: #FFF; }
.white main kbd       { color: #CCC; }
.white main mark      { color: #000; background: #FFF; }
.white main strong    { color: #FFF; }
.white main th        { color: #FFF; }

.white main input,
.white main textarea           { color: #777; border: 1pt solid #222; }
.white main input:active,
.white main input:focus,
.white main textarea:focus     { color: #FFF; border: 1pt solid #555; }
.white main input[type='reset']:active,
.white main input[type='submit']:active       { background: #444; }
.white main input[type='file']                { color: #777; border: 0; }
.white main input::file-selector-button       { color: #777; border: 1pt solid #222; }
.white main input::file-selector-button:focus { color: #FFF; border: 1pt solid #555; }

main .yellow           { color: #770; }
.yellow main           { color: #770; }
.yellow main .dim      { color: #440; }
.yellow main a:link    { color: #FF0; }
.yellow main a:visited { color: #AA0; }
.yellow main a:focus   { color: #CC0; background: #550; }
.yellow main a:hover   { color: #DD0; }
.yellow main a:active  { color: #000; background: #FF0; }
.yellow main cite      { color: #FF0; }
.yellow main dfn       { color: #FF0; }
.yellow main em        { color: #FF0; }
.yellow main h2        { color: #FF0; }
.yellow main h3        { color: #FF0; }
.yellow main h4        { color: #FF0; }
.yellow main h5        { color: #FF0; }
.yellow main h6        { color: #FF0; }
.yellow main hr        { border-top: 1pt solid #220; }
.yellow main i         { color: #FF0; }
.yellow main kbd       { color: #CC0; }
.yellow main mark      { color: #000; background: #FF0; }
.yellow main strong    { color: #FF0; }
.yellow main th        { color: #FF0; }

.yellow main input,
.yellow main textarea           { color: #770; border: 1pt solid #220; }
.yellow main input:active,
.yellow main input:focus,
.yellow main textarea:focus     { color: #FF0; border: 1pt solid #550; }
.yellow main input[type='reset']:active,
.yellow main input[type='submit']:active       { background: #440; }
.yellow main input[type='file']                { color: #770; border: 0; }
.yellow main input::file-selector-button       { color: #770; border: 1pt solid #220; }
.yellow main input::file-selector-button:focus { color: #FF0; border: 1pt solid #550; }



a      { text-decoration: underline; }
cite   { font-style: italic; }
dfn    { font-style: normal; }
em     { font-style: normal; }
i      { font-style: normal; }
mark   { padding: 0 0.25em; }
small  { font-size: 85%; }
strong { font-weight: 400; }
sub    { font-size: 85%; }
sup    { font-size: 85%; }
u      { font-variant: small-caps; text-decoration: none }

.mdash { padding-left: 0.5ch; padding-right: 0.5ch; }

.l     { text-align: left !important;   }
.c     { text-align: center !important; }
.r     { text-align: right !important;  }

.n     { font-family: monospace !important; }



/* TODO – make all responsive and shit. Also, this is copied in the jeremyjolson.com stylesheet. */

table.autoindex tr th,
table.autoindex tr td {
	text-align: left;
	width: 20em;
}

table.autoindex tr th + th,
table.autoindex tr td + td {
	padding: 0 0.5em 0;
	text-align: right;
	width: 5em;
}

table.autoindex tr th + th + th,
table.autoindex tr td + td + td {
	text-align: left;
	width: 10em;
}



@media only screen and ( max-width: 700px ) {
	#image { display: none; }
	main {
		position: absolute; top: 3em; left: 1em; bottom: 3em; right: 1em;
	}
}

@media only screen and ( max-width: 530px ) {
	#clock { display: none; }
	#vt920 { display: none; }
	header h1, #created, #updated, #middle {
		font-size: 70%;
	}
}