@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%; */
}


#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;
}

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: 3em; margin-right: 3em;
	padding: 0.5em; font-size: 90%; 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;
}

div.separator {
	width: 20%;
	margin: 1.5em 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 {
	font-family: Consolas, monospace;
}
.html {
	font-family: Consolas, monospace; font-size: 90%;
}

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

.var {
	font-family: Consolas, monospace; font-size: 90%; font-weight: bold;
}

.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%;
}

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: 1em; margin-right: 1em;
	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;
}

.quotation .source {
	margin-right: 10%; text-align: right;
}

.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;
}

	

/* 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;
}

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

.hidden {
	display: none;
}




/* 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%;
}