@charset "utf-8";

@font-face {
	font-family: 'tandy225';
	src: url('fonts/myCGA.eot');
	src: url('fonts/myCGA.eot?#iefix') format('embedded-opentype'),
			 url('fonts/myCGA.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

hr {
	display:none;
	/*
		HR in my code are for semantic breaks in topic/section, NOT
		style/presenation, so hide them from screen.css users
	*/
}

@media (max-width:480px) {
	/*
		Some older small screen devices will try to force a text-size
		adjustment regardless of our viewport meta, this overrides that
		so it obeys what we tell it. This is in a max-width query so that
		we don't send this to desktop safari, as it breaks zooming there...
		Even though it does NOT break zooming in mobile Safari?
		
		Way to herpa that derp there Apple!
	*/
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

html,
body {
	height:100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
button,
table {
	font:normal 100%/160% tahoma,helvetica,sans-serif;
	letter-spacing:1px;
}

body {
	display:flex;
	flex-direction:column;
	background:#000;
	color:#AAA;
}

#top {
	overflow:hidden;
	zoom:1;
	flex:1 0 auto;
	background:#005;
}

a {
	color:#0AA;
	transition:color 0.3s, background 0.3s, text-shadow 0.3s;
}

a:visited {
	color:#C8C;
}

a:active,
a:focus,
a:hover {
	color:#4FF;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow:hidden;
	zoom:1;
	padding:0.25em 1em;
	margin-bottom:1em;
	color:#FF5;
}

strong {
	color:#FFF;
}

em {
	color:#999;
}

pre, code {
	font:normal 87.5%/150% consolas,monospace;
	-moz-tab-size:2;
	tab-size:2;
}

pre {
	margin:1em;
	padding:1em;
	background:#210;
	color:#F80;
	word-wrap:break-word;
	white-space:pre-wrap;
	-webkit-border-radius:1em;
	border-radius:1em;
	-webkit-box-shadow:inset 0 0 4em #000;
	box-shadow:inset 0 0 4em #000;
}

kbd {
	font:normal 100%/150% consolas,monospace;
	color:#5FF;
}


h1 {
	overflow:hidden;
	zoom:1;
	margin:0;
	text-align:right;
	color:#F55;
	background:#000;
}

h1 br {
	display:none;
}

h1 small {
	font-size:100%;
}

#top h1 a { /* including #top forces specificity */
	float:left;
	text-decoration:none;
	text-transform:uppercase;
	color:#FF5;
}

#mainMenuShowHide {
	position:absolute;
	left:-999em;
}

#mainMenu {
	list-style:none;
	padding:0 0.5em;
	margin-bottom:1em;
	background:#444;
}

#mainMenu li {
	display:inline;
}

#mainMenu a {
	display:inline-block;
	padding:0.25em 0.5em;
	text-decoration:none;
	color:#AAA;
}

#mainMenu a span {
	color:#FFF;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	background:#44C;
}

.widthWrapper {
	width:100%;
	max-width:72em;
	margin:0 auto;
}

.hasExtras .contentWrapper {
	width:100%;
	float:left;
}

.hasExtras #content {
	margin-right:21em;
}

#content,
#extras,
.subsection,
.blogEntry,
.blogEntry h2 {
	overflow:hidden;
	zoom:1;
}

#extras {
	position:relative;
	float:left;
	width:20em;
	margin-left:-20em;
}

#footer {
	clear:both;
	background:#000;
	padding:1em 0;
	text-align:center;
}

.widthWrapper h2 {
	background:#44C;
}

.widthWrapper h2 a {
	color:#4FF;
	text-decoration:none;
	text-shadow:
		-0.1em 0 0.1em rgba(0,0,0,0.25),
		0.1em 0 0.1em rgba(0,0,0,0.25);
}

.widthWrapper h2 a:active,
.widthWrapper h2 a:focus,
.widthWrapper h2 a:hover {
	color:#FFF;
		-0.1em 0 0.2em rgba(0,0,0,0.5),
		0.1em 0 0.2em rgba(0,0,0,0.5);
}

.widthWrapper h3,
.widthWrapper h4,
.widthWrapper h5,
.widthWrapper h6 {
	margin-bottom:-1em;
}

.widthWrapper p {
	margin:1em;
}

.widthWrapper ul,
.widthWrapper ol {
	padding-left:2em;
	margin:1em 1em 1em 0;
}

.widthWrapper dl {
	margin:1em 1em 1em 2em;
}

.widthWrapper dt {
	color:#FFF;
}

.widthWrapper dd {
	padding-left:1em;
	margin-bottom:1em;
}

.widthWrapper ol {
	margin-left:0.5em;
}

.widthWrapper li {
	margin-bottom:0.75em;
	padding-left:0.25em;
}

.subsection,
.blogEntry {
	margin-bottom:1em;
	background:#000;
}

.blogEntry h2 span {
	float:right;
}

.blogEntry h2 span span {
	display:none;
}

.readMore {
	margin:1em;
	text-align:right;
}

.readMore span {
	float:left;
	color:#FFF;
}

.readMore a span {
	position:absolute;
	left:-999em;
}

.limitPlate,
.slab img {
	display:block;
	max-width:100%;
	margin:0 auto 0.5em;
}

.plate,
.fullPlate,
.slab {
	display:block;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:0 1em;
	margin:0 auto 1em;
}

.fullPlate {
	width:100%;
}

.plate {
	max-width:100%;
}

.slab {
	text-align:center;
}

.leadingPlate,
.leadingSlab,
.trailingPlate,
.trailingSlab {
	max-width:40%;
	text-align:center;
}

.leadingPlate,
.leadingSlab {
	float:left;
	margin:0 1em 1em 1em;
}

.trailingPlate,
.trailingSlab {
	float:right;
	margin:0 1em 1em 1em;
}

.trailingSlab img {
	display:block;
	margin:0 auto 0.5em;
	max-width:100%;
}

.avatar {
	-webkit-border-radius:8px;
	border-radius:8px;
}

.callout {
	float:right;
	padding:0 0 1em;
	margin:0 1em 1em;
	text-align:center;
	color:#F80;
	background:#310;
}

.callout h3 {
	padding:0.25em 1em;
	margin:0 0 1em;
	font-weight:bold;
	background:#630;
	color:#F80;
}

.keepTogether {
	margin:0 1em 1em;
}

.keepTogether span {
	display:inline-block;
	white-space:nowrap;
}

.widthWrapper .sectionPrevNext {
	overflow:hidden;
	zoom:1;
	list-style:none;
	margin:0 0 1em;
	padding:0;
}

.sectionPrevNext li {
	display:inline;
}

.sectionPrevNext a {
	float:left;
	padding:0.25em 0.5em;
	text-decoration:none;
	background:#00A;
	color:#FF5;
}

.sectionPrevNext a:active,
.sectionPrevNext a:focus,
.sectionPrevNext a:hover {
	background:#55F;
	color:#FFF;
}


.sectionPrevNext .next a {
	float:right;
}

.sectionPrevNext .prev a:before {
	content:"\25C0";
	padding-right:0.4em;
}

.sectionPrevNext .next a:after {
	content:"\25B6";
	padding-left:0.4em;
}

.sectionList .current a {
	color:#FFF;
}

.commands {
	border-collapse:collapse;
}

.commands th,
.commands td {
	font-weight:normal;
	vertical-align:top;
	padding:0 1em 1em;
}

.commands th {
	text-align:center;
	line-height:1.2em;
}

.subfeature {
	padding-left:1.5em;
}

.apiSubset {
	padding:1em 0 0 1.5em;
}

.apiSubset h4 {
	color:#FFF;
}

pre.c64 {
	padding:2px;
	min-height:6em;
	font:bold 125%/100% consolas,monospace;	
	background:#33A;
	color:#77D;
	border:0.8em solid #77D;
	-webkit-box-shadow:none;
	box-shadow:none;
	-webkit-border-radius:0.5em;
	border-radius:0.5em;
}

.shareAndLike {
	padding:0;
	margin-bottom:1em;
	line-height:1em;
	text-align:right;
	text-transform:uppercase;
}

.shareAndLike a,
.shareAndLike .info {
	position:relative;
	display:inline-block;
	vertical-align:bottom;
	-webkit-box-shadow:0 0.125em 0.75em rgba(0,0,0,0.5);
	box-shadow:0 0.125em 0.75em rgba(0,0,0,0.5);
}

.shareAndLike a,
.shareAndLike a:visited {
	padding:0.3em 0.5em 0.3em;
	margin-left:0.6em;
	text-decoration:none;
	font-weight:bold;
	color:#FFF;
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
}

.shareAndLike a:active,
.shareAndLike a:focus,
.shareAndLike a:hover {
	color:#FFF;
	-webkit-box-shadow:0 0 0.75em rgba(0,0,0,0.4);
	box-shadow:0 0 0.75em rgba(0,0,0,0.4);
}

.shareAndLike #share_googlePlus {
	background:#F00;
}

.shareAndLike #share_googlePlus:active,
.shareAndLike #share_googlePlus:focus,
.shareAndLike #share_googlePlus:hover {
	background:#800;
}

.shareAndLike #share_facebook {
	padding-left:1.8em;
	background:#44D;
}

.shareAndLike #share_facebook:active,
.shareAndLike #share_facebook:focus,
.shareAndLike #share_facebook:hover {
	background:#00C;
}


.shareAndLike #share_facebook span {
	position:absolute;
	top:50%;
	left:0.15em;
	margin-top:-0.5em;
	padding:0 0.15em 0 0.45em;
	text-align:center;
	text-transform:lowercase;
	font:bold 120%/100% tahoma,helvetica,sans-serif;
	background:#FFF;
	color:#22D;
}

.shareAndLike #share_facebook:active span,
.shareAndLike #share_facebook:focus span,
.shareAndLike #share_facebook:hover span {
	color:#00C;
}

.shareAndLike .info,
.shareAndLike .info span {
	background:#FFF;
	-webkit-border-radius:0.5em;
	border-radius:0.5em;
}

.shareAndLike .info {
	font:normal 100%/150% arial,helvetica,sans-serif;
	margin-left:0.5em;
	height:1.5em;
}

.shareAndLike .info span {
	position:relative;
	display:block;
	padding:0 0.5em;
}

.shareAndLike .info:before {
	content:"";
	position:absolute;
	left:-0.25em;
	top:50%;
	margin-top:-0.25em;
	width:0.5em;
	height:0.5em;
	background:#FFF;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform: rotate(45deg);	
	box-shadow:-0.25em 0.25em 0.5em rgba(0,0,0,0.1);
}

.disqus {
	padding:1em;
}

.webMail {
	display:block;
	padding:0 1em;
}

.webMail fieldset {
	padding-left:14em;
}

.webMail label {
	clear:both;
	float:left;
	position:relative;
	width:14em;
	margin-left:-14em;
	padding-top:0.25em;
	text-align:right;
	color:#CCC;
}

.webMail fieldset input,
.webMail fieldset select,
.webMail fieldset textarea {
	display:inline-block;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	width:100%;
	max-width:100%;
	padding:0.25em;
	margin-bottom:0.5em;
	background:#EEE;
	border:1px solid #9C8;
}

.webMail label b,
.webMail label i,
.webMail label span {
	display:inline-block;
	padding:0 0.3em;
}

.webMail .infoBox i {
	padding-right:0.2em;
}

.webMail label b,
.webMail .infoBox b {
	color:#F44;
}

.webMail label i,
.webMail .infoBox i {
	font-style:normal;
	font-weight:bold;
	color:#FF4;
}

.webMail label span {
	font-weight:bold;
	color:#F00;
}

.webMail textarea {
	height:15em;
}

.webMail .compareFailed {
	padding:0 0 0.6em 14em;
	color:#F00;
}

.webMail .submitsAndHiddens {
	padding-bottom:1em;
}

.webMail .submit {
	/* 
		the following three parameters are needed to make all versions of
		IE actually allow you to click anywhere on the submit.
	*/
	display:block;
	position:relative;
	zoom:1;
	margin:0 0 0 auto;
	padding:0.25em 0.5em;
	color:#FF4;
	background:#44F;
	border:0;
	-webkit-transition:background 0.3s;
	transition:background 0.3s;
}

.webMail .submit:active,
.webmail .submit:focus,
.webMail .submit:hover {
	background:#00A;
}

.webMail .required {
	background:#FFF;
}

.webMail .error {
	background:#FF8;
}

.errorBox {
	padding:1em;
}

.errorBox h2 {
	margin-bottom:0.4em;
}

.webMail .errorBox {
	margin:0 0 1em;
	padding:0.25em 0.5em;
	color:#FF5;
}

.webMail .infoBox {
	margin-bottom:1em;
	color:#C40;
}

#legacyFontEnable {
	position:absolute;
	left:-999em;
}

#legacyFontLabel {
	float:right;
	padding:0.25em 1em 0 0;
}

#legacyFontLabel:before {
	content:"\25CE";
	padding-right:0.4em;
}

#legacyFontEnable:checked + #top #legacyFontLabel:before {
	content:"\25C9";
}

#legacyFontLabel {
	font:normal 100%/160% "tandy225",sans-serif;
	letter-spacing:0;
}

#legacyFontEnable:checked + #top,
#legacyFontEnable:checked ~ #footer,
#legacyFontEnable:checked + #top input,
#legacyFontEnable:checked + #top  textarea,
#legacyFontEnable:checked + #top  button,
#legacyFontEnable:checked + #top  table,
#legacyFontEnable:checked + #top  h1,
#legacyFontEnable:checked + #top  h2,
#legacyFontEnable:checked + #top  h3,
#legacyFontEnable:checked + #top  h4,
#legacyFontEnable:checked + #top  h5,
#legacyFontEnable:checked + #top  h6,
#legacyFontEnable:checked + #top #legacyFontLabel {
	font:normal 100%/120% "tandy225",sans-serif;
	letter-spacing:0;
}


#glkfDownloads {
	text-align:center;
}

#glkfDownloads h3 {
	margin:0.5em 1em 0;
}

@media (max-width:52em) {
	.contentWrapper,
	.hasExtras .contentWrapper,
	#content,
	.hasExtras #content,
	#extras {
		clear:both;
		float:none;
		width:auto;
		margin:0;
		padding:0;
	}
}

.pagination {
	text-align:center;
	margin:0 0 1em;
}

.pagination ul {
	list-style:none;
	display:inline;
	padding:0;
	margin:0;
}

.pagination li {
	display:inline;
}

.moreBlogs {
	margin-bottom:1em;
	text-align:right;
}

.moreBlogs a,
.pagination a,
.pagination a:visited, /* fix specificity bug */
.pagination span {
	display:inline-block;
	padding:0.25em 0.5em;
	text-decoration:none;
	color:#FF4;
	background:#44F;
}

.pagination span {
	background:#555;
	color:#FFF;
}

.moreBlogs a:active,
.moreBlogs a:focus,
.moreBlogs a:hover,
.pagination a:active,
.pagination a:focus,
.pagination a:hover {
	background:#00A;
	color:#FFF;
}

@media (max-width:40em) {
	#top {
		min-width:256px;
	}
	#top h1 {
		text-align:center;
	}
	#top h1 a { /* including #top forces specificity */
		display:block;
		float:none;
	}
	#top h1 small {
		font-size:87.5%;
	}
	#legacyFontLabel {
		padding:0 0.5em 0 0;
	}
	#mainMenu,
	.subsection,
	.blogEntry {
		margin-bottom:0;
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		padding:0.25em 0.5em;
	}
	.widthWrapper p {
		margin:1em 0.5em;
	}
	.widthWrapper ul,
	.widthWrapper ol {
		padding-left:1.5em;
		margin:1em 0.5em 1em 0;
	}
	.widthWrapper dl {
		margin:1em 0.5em 1em 1.5em;
	}
	#footer {
		padding:1em 0.5em;
		border-top:2px solid #44F;
	}
	#footer br {
		display:none;
	}
}

@media (max-width:36em) {
	#top {
		background:#005;
	}
	#legacyFontLabel,
	#mainMenuShowHide + label{
		float:left;
		width:7em;
		padding:0.5em 0;
		margin:0.5em;
		background:#55F;
		color:#FF4;
		text-align:center;
	}
	#mainMenuShowHide + label {
		float:right;
	}
	#mainMenuShowHide + label:before {
		content:"Show Menu";
	}
	#mainMenuShowHide:checked + label:before {
		content:"Hide Menu";
	}
	#mainMenu {
		clear:both;
		display:none;
		text-align:center;
	}
	#mainMenu a {
		padding:0.5em 1em;
	}
	#mainMenuShowHide:checked ~ #mainMenu {
		display:block;
	}
}