@font-face {
    font-family: 'Cantarell';
    src: url('webfonts/cantarell.eot');
    src: url('webfonts/cantarell.eot?#iefix') format('embedded-opentype'),
         url('webfonts/cantarell.woff') format('woff'),
         url('webfonts/cantarell.ttf') format('truetype'),
         url('webfonts/cantarell.svg#Cantarell') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Consolas';
    src: url('webfonts/consolas.eot');
    src: url('webfonts/consolas.eot?#iefix') format('embedded-opentype'),
         url('webfonts/consolas.woff') format('woff'),
         url('webfonts/consolas.ttf') format('truetype'),
         url('webfonts/consolas.svg#consolas') format('svg');
    font-weight: normal;
    font-style: normal;
}



BODY {
	background-color: #fff; color: #000;
	background-image: url('./stripe-bg.gif');
	margin: 0px 10% 3em 0;
	/* padding-left: 3em; */
	font-family: Cantarell, sans-serif;
	/* font-size: 105%; */
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #000;
		color: #999;
	}
}

body.darkMode {
	background-color: #000;
	color: #999;
}

#modeToggle {
	float: right;
}

#main_content H1 {
	margin: 0.6em 0 0.1em -1em; font-size: 200%;
	border-bottom: 4px solid #399;
}
#main_content H2 {
	margin: 0.1em 5em 0.1em -1em; font-size: 145%;
	border-bottom: 2px solid #399;
}
#main_content H3 {
	margin: 0.1em 10em 0.1em -1em;
	border-bottom: 2px solid #399;
}
H2 .line2, H3 .line2 {
	white-space: nowrap;
}

@media (max-width:768px) {
	#main_content H2,
	#main_content H3 {
		margin-right: 0.5em;
	}
}

A:link { color: #366; }
A:visited { color: #666; }
A:hover { color: #fff; background-color: #399; }
A:active { color: #000; }


/* Keep anchors used for NAMEs and IDs from flashing when
   moused over.
*/
H1 A:hover { color: #000; background-color: #fff; }
H2 A:hover { color: #000; background-color: #fff; }
H3 A:hover { color: #000; background-color: #fff; }



P {
	margin-bottom: 1.25em;
}




/* "pq" stands for "pull quote" */
.pqright {
	float: right; width: 32%;
	margin: 0px 0px 0.5em 1em; padding: 0.5em 1em;
	font-style: italic; font-weight: bold;
	background-color: #ccc;
}
.pqright EM { font-style: normal; }
.pqright I { font-style: normal; }
.pqright STRONG { font-weight: bolder; }
.pqright B { font-weight: bolder; }
.pqright A:link { color: #399; }
.pqright A:hover { color: #fff; background-color: #399; }


.notice {
	margin-left: 30px; margin-right: 30px;
	padding: 0.5em; font-size: 95%; line-height: 115%;
	border-top: 1px solid #366;
	border-bottom: 1px solid #366;
	color: #000;
}
.notice.large {
	font-size: 105%;
}

.tooltip {
	border-bottom: 1px dotted #066; cursor: help;
}
abbr.tooltip {
	text-decoration: none;
}

.hanging {
	margin-left: 3em;
	text-indent: -3em;
}

div.separator,
div.divider {
	width: 20%;
	margin: 2em auto;
	border-bottom: thin groove;
	height: 1px;
}

table.std td, table.std th {
	padding: 0.25em 0.75em;
	vertical-align: top;
}
table.std th {
	font-weight: bold;
	text-align: left;
}

/* Different kinds of SPANs for different types of code
*/
.unfinished {
	background-color: #f00; color: #ff0;
	padding-left: 0.5em; padding-right: 0.5em;
}

CODE, SPAN.code {
	font-family: Consolas, monospace; font-size: 90%;
	color: #066;
}

.optional {
	font-style: italic;
}

.tt, .mono, .monospace {
	font-family: Consolas, monospace;
}
.html {
	font-family: Consolas, monospace; font-size: 90%;
}

.notice .html { font-size: 100%; }

/* Used for code variables on Software Index page */
.var {
	font-family: Consolas, monospace; font-size: 90%; font-weight: bold;
}

var, .mathVar {
	font-style: italic;
	font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}


.string {
	font-family: Consolas, monospace; font-size: 90%;
	color: #006;
}

.list {
	font-style: italic;
	color: #060;
}

.type {
	font-family: Consolas, monospace; font-size: 90%;
	color: #555;
}

.funcname {
	font-family: Consolas, monospace; font-weight: bold; font-size: 85%;
}

.file {
	font-family: sans-serif; font-weight: bold; font-size: 90%;
}

/* you need to add something like .wrong or .badIdea for the parts in your upcoming "signs you're going wrong" post that show the idea of "this, right here, is the part of this code that's a bad idea" */

.wrong {
	color: #c00;
}

SUP, SUB {
	font-size: 65%;
}

.nowrap {
	white-space: nowrap;
}

/* A DIV marked "code" should be an entire block, not just a
   one-line snippet. Make it look like a whole block of code.
*/
DIV.code,
PRE.code {
	display: block;
	background-color: #ddd; color: #066;
	margin-left: 15px; margin-right: 15px;
	padding: 0.5em 0.75em;
	font: 85% Consolas, monospace;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}


.pqright .code {
	font-size: 85%;
}

DT {
	font-weight: bold;
	margin-top: 1em;
}


/* Styles for the index page
*/
.letterlinks {
	margin: 1em 3.5em 1.5em 0em; text-align: center;
	word-spacing: 0.5em;
}
.letterlinks A {
	padding: 0px 0.5em;
}

.leftcol {
	float: left; width: 35%; margin-left: -1em;
	padding: 0px 2em 1em 1em;
	border-right: 1px solid #000; margin-right: 1.5em;
	margin-bottom: 2em;
}
.rightcol {
	float: left; width: 40%; margin-right: -1em;
	padding: 0px 2em 1em 1em;
	margin-bottom: 2em;
}

.letter {
	font-size: 125%; width: 5em;
	border-bottom: 2px solid #399;
	margin-top: 0.75em; margin-left: -1em; padding-left: 0.25em;
}

.major {
	margin: 0px 0px 0px 5em;
	text-indent: -6em;
}
.minor {
	margin: 0px 0px 0px 7em; font-size: 90%;
	text-indent: -7em;
}
.refs {
	display: inline; margin-left: 1em; font-size: 85%;
}

.minor + .major {
	margin-top: 0.5em;
}


.quotation {
	margin-left: 10%; margin-right: 10%; margin-bottom: 1em;
	font-style: italic;
}

blockquote .source,
.quotation .source {
	margin-right: 10%; text-align: right;
}
blockquote .source:before,
.quotation .source:before {
	content: "— ";
}

.pqright .quotation {
	margin-left: 4%; margin-right: 6%;
}

.quotation CITE { font-style: normal }
.quotation EM { font-style: normal }
.quotation I { font-style: normal }



/* Styles for my portfolio page
*/
.sitewriteup {
	display: block; margin-top: 2em; margin-bottom: 2em;
}
.sitewriteup:first-line {
	font-size: 145%; font-weight: bold; font-family: sans-serif;
	border-bottom: 2px solid #399;
}
.sitewriteup .clientname {
	display: block;
	font-size: 145%; font-weight: bold; font-family: sans-serif;
	text-decoration: none;
	border-bottom: 2px solid #399; margin-right: 225px;
}

/* Stop the text links from lighting up on mouseover; it just looks weird */

.sitewriteup .clientname:hover {
	background-color: #fff; color: #066;
}
.sitewriteup .clientname:visited {
	background-color: #fff; color: #066;
}

.sitewriteup .leftimg {
	float: left; margin: 0.3em 1em 0.5em 0px; border: 0px;
}
.sitewriteup .rightimg {
	float: right; margin: 0.3em 0px 0.5em 1em;  border: 0px;
}
.sitewriteup IMG {
	float: right; margin: 0px 0px 0.5em 1em;
	border: 1px solid #ccc;
}




IMG.left {
	float: left; margin: 0.3em 1em 0.5em 0px; border: 0px;
}
IMG.right {
	float: right; margin: 0.3em 0px 0.5em 1em;  border: 0px;
}

	

/* Styles for the front cover page
*/
#top_bar {
	position: absolute;
	margin: 0px; padding: 0px;
	top: 0px; left: 28%;
}
#coyote_illo {
	position: absolute;
	margin: 0px; padding: 0px;
	top: 100px; left: 28%;
}

#extras {
	margin-left: 73%; margin-top: 232px; margin-right: -48px;
	padding: 0px;
	width: 175px;
	font-size: 70%;
}

#extras P {
	margin: 0px;
}

.w3c_logo {
	margin: 1em 0px;
}

.w3c_logo .text {
	vertical-align: middle;
}

.w3c_logo IMG {
	vertical-align: middle; border: 0px;
}

.w3c_logo IMG.mid {
	float: left;
}


#main_content.mobile .button {
	padding: 2px 5px;
	border-top: 2px solid #dfd;
	border-left: 2px solid #dfd;
	border-right: 2px solid #7c7;
	border-bottom: 2px solid #7c7;
	border-radius: 5px;
	cursor: pointer;
}
#main_content.mobile .button.pressed {
	border-top: 2px solid #7c7;
	border-left: 2px solid #7c7;
	border-right: 2px solid #dfd;
	border-bottom: 2px solid #dfd;
	background-color: #eee;
	cursor: default;
}

#main_content.mobile h2.button {
	margin-bottom: 0.5em;
}


#main_content.mobile h2 button {
	/*font-size: 50%;*/
	margin-right: 0.5em;
	vertical-align: 30%;
	border-radius: 5px;
}

.hidden {
	display: none;
}

#main_content.mobile h2.NOTbutton {
	padding: 2px 5px;
	border-top: 2px solid #dfd;
	border-left: 2px solid #dfd;
	border-right: 2px solid #7c7;
	border-bottom: 2px solid #7c7;
	border-radius: 5px;
}



/* Styles for the current libraries. There's quite a few of these.
*/

.toggle {
	float: right; margin-left: 1em; margin-bottom: 0.25em;
}

SPAN.libname {
	font-family: monospace; font-weight: bold; font-size: 100%;
}


.software {
	margin-left: 2em; margin-right: 1em;
}

.software h3:first-child {
	margin-left: -0.75em;
}


.library {
	margin-left: 1em; margin-right: 1em;
}

.library h2:first-child {
	margin-left: -0.75em;
}
.library .proto {
	/* font-size: 115%; */
	margin-top: 0.5em;
}

.library .proto .return {
	font-family: serif; font-weight: normal; font-size: 90%; color: #555;
}

.library .proto .funcname {
	font-family: monospace; font-weight: bold; font-size: 110%; padding-left: 0.25em;
}

.library .proto .arg_reqd {
	font-weight: normal; font-size: 90%
}

.library .proto .arg_opt {
	font-style: italic; font-weight: normal; font-size: 80%;
}

.library .desc {
	margin-left: 2em; margin-right: 2em;
}

.funcs {
	margin-bottom: 1em;
}


/* Special stuff for the SSHblock page */

table#sshblock_schedule {
	border-top: 1px solid #066;
	border-bottom: 1px solid #066;
	margin-left: 3em;
}
table#sshblock_schedule th {
	text-align: right;
	padding-right: 1em;
}
table#sshblock_schedule th.nth_time {
	width: 8em;
}
table#sshblock_schedule th.block_hours {
	width: 6em;
}
table#sshblock_schedule th.block_days {
	width: 6em;
}
table#sshblock_schedule td {
	text-align: right;
	padding-right: 2em;
}






/* Put navbar styles last, so they override others
*/
#navbar {
	background-color: #399; color: #fff;
	position: absolute; left: 0px; top: 0px;
	width: 150px;
	text-align: center;
}

#main_content {
	margin-left: 200px;
}
UL#navbar {
	position: absolute; left: 0px; top: 0px;
	/* position: static; */
	list-style: none;
	/* float: left; */
	padding-left: 0;
	margin-left: 0;
}
#navbar A:link {
	display: block; text-decoration: none;
	color: #fff; font-size: 125%;
	width: 150px; padding: 0.5em 0em;
}
#navbar A:visited {
	display: block; text-decoration: none;
	color: #ccc; font-size: 125%;
	width: 150px; padding: 0.5em 0em;
}
#navbar A.current {
	background-color: #6cc; color: #666;
}
#navbar A:hover {
	background-color: #066; color: #fff;
}
#navbar LI {
	/* the border keeps IE6 from expanding the LI height on submenu display */
	border-bottom: 1px solid #399;
}
#navbar LI.opened A {
	background-color: #066;
	color: #fff;
}

#navbar UL {
	position: absolute;
	top: auto;
	left: 150px;
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	margin-top: -3em;
	display: none;
	background-color: #066;
	z-index: 10;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
}

#navbar UL LI {
	border-bottom: none;
}
#navbar UL A:link {
	/* display: block; text-decoration: none;
		color: #fff;  */
	font-size: 100%;
	/* width: 150px; padding: 0.5em 0em 0.5em 1em; */
}
#navbar UL A:hover {
	background-color: #033;
}
#navbar UL A:visited {
	font-size: 100%;
}




UL#bottom_nav {
	list-style: none;
	margin: 4em 0em 0.5em;
	text-align: center;
	padding: 0.75em 2em 0px;
	border-top: 2px solid #399;
	line-height: 150%;
}
UL#bottom_nav li {
	display: inline;
	white-space: nowrap;
}

#bottom_nav A {
	text-align: center; padding: 0.15em 0.5em;
	margin: 0px 0.3em;
}
#bottom_nav A.current {
	/* background-color: #6cc; color: #666; */
}
#bottom_nav A:hover {
	background-color: #399;
}

ul#bottom_nav + div.validation_buttons {
	clear: both;
	/* border: 1px dotted red; */
	text-align: center;
	margin-top: 2em;
}
div.validation_buttons a {
	padding: 8px 20px;
}
div.validation_buttons a:hover {
	background-color: #fff;
}
div.validation_buttons img {
	border: none;
}

#faq H3 { margin-right: 3em; }
#why_hire #main_content UL LI { margin-top: 0.5em; }
#why_hire #main_content UL LI:first-line { font-weight: bold; }

#site_index ul#bottom_nav {
	clear: left;
	margin-top: 5em;
}

b, strong {
	font-size: 95%;
}

ul.special {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.special li {
	margin: 0 0 0 7px;
	padding: 0 0 0.75em 23px;
	background: url(/coyote-paw.png) no-repeat left 5px;
}