/* Copyright (c) 2005-2006 Michael Alyn Miller.  All rights reserved. */


/* ---------------------------------------------------------
 * Base style for all strangeGizmo.com pages.
 */

body {
	color: black;
	background-color: white;
	font-family: optima, "arial unicode ms", arial, helvetica, sans-serif;
	font-size: 12pt;
}



/* ---------------------------------------------------------
 * Header (logo and navbar) style.
 */

#header {
 	color: white;
 	background-color: black;
	margin-bottom: 1em;
}

#logo {
	font-size: 36px;
	padding: 16px 16px 8px 16px;
}
#logoimgdiv {
	display: inline;
}
#logotext {
	padding-left: 12px;
}
#logotext a {
	color: white;
	background-color: inherit;
	text-decoration: none;
}

#navbar {
	line-height: 24px;
	width: 100%;
	border-top: 1px solid white;
}
#navbar a {
	color: white;
	background-color: black;
	text-align: center;
	text-decoration: none;
	display: block;
}
#navbar a.current {
	color: white;
	background-color: #333;
}
#navbar a:hover, #navbar a.current:hover {
	color: white;
	background-color: #666;
}
#navbar #articles, #navbar a#products, #navbar a#services {
	font-size: 0.9em;
	width: 8em;
	border-right: 1px solid white;
	float: left;
}
#navbar a#about, #navbar a#contact {
	font-size: 0.7em;
	width: 6em;
	float: right;
}
#navbar a#about {
	border-right: 1px solid white;
}
#navbar .sep {
	display: none;
}
#navbartail {
	line-height: 24px;

	/* The line below is a hack that hides the "display: none" from everything
	 * but Internet Explorer.  In a perfect world, we would use inline-block
	 * with percentage-width for everything (instead of all of these floats),
	 * but most browers do not support inline-block correctly/at all. */
	_display: none;
}



/* ---------------------------------------------------------
 * Footer style.
 */

#footer {
	font-size: 0.6em;
	text-align: center;
	border-top: 1px solid black;
	clear: both;
}



/* ---------------------------------------------------------
 * Content style.
 */

/* 'content' and 'pagelist' use 2/3rd's of the window; 'widecontent' and
 * 'widepagelist' take up the whole thing. */
.content, .pagelist {
	width: 65%;
	float: left;
	clear: left;

	/* Temporary fix for IE until we can figure out why it is removing
	 * margins after footnotes. */
	_padding: 0em 0.5em;
}

.widecontent, .widepagelist {
	width: 100%;
	clear: both;

	/* Temporary fix for IE until we can figure out why it is removing
	 * margins after footnotes. */
	_padding: 0em 0.5em;
}


/* All 'content' and 'widecontent' has a slightly smaller base font and a
 * a slightly larger line height. */
.content, .widecontent {
	font-size: 10.5pt;
	line-height: 1.75em;
	text-align: justify;
}


/* All links in the content area have our custom color.  They are the
 * standard, blue color when hovered over, however.  The exception to
 * these rules is the titletext, which should not be underlined nor
 * should it appear in a different color. */
.content a, .widecontent a {
	color: #930;
	background-color: inherit;
}
.content a:hover, .widecontent a {
	color: blue;
	background-color: inherit;
}


/* The title block, which includes the breadcrumb trail and title.  We
 * override the link colors for the titletext so that it displays in
 * the normal black color. */
.titleblock {
	font-size: 12pt;
	border-bottom: 2px solid #333;
	padding: 0;
	margin: 0 0 1em 0;
	height: 4em;
	clear: both;
}
.titletrail {
	color: #999;
	background-color: inherit;
	font-size: 0.7em;
}
.titletrail a {
	color: #999;
	background-color: inherit;
	text-decoration: none;
}
.titletrail a:hover {
	text-decoration: underline;
}
.titletext {
	font-size: 2em;
	font-weight: bold;
}
.titletext a {
	color: black;
	background-color: inherit;
	text-decoration: none;
}
.titletext a:hover {
	text-decoration: underline;
}


/* Table markup. */
.content table, .widecontent table {
	padding: 0em;
	border-left: 1px solid #666;
	margin: 1.6em; /* blockquote font-size * blockquote margin */
}

.content table th, .widecontent table th {
	color: black;
	background-color: #ccc;
	font-size: 0.9em;
	line-height: 120%;
	padding: 0.25em;
	text-align: center;
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
	border-right: 1px solid #666;
}

.content table td, .widecontent table td {
	font-size: 0.85em;
	line-height: 175%;
	padding: 0.75em;
	border-bottom: 1px solid #666;
	border-right: 1px solid #666;
}

.content table p, .widecontent table p {
	margin: 0em;
}


/* Special classes for screenshots. */
div.screenshot {
	font-size: 0.7em;
	text-align: center;
	overflow: hidden;
}
div.screenshot a, div.screenshot a:hover {
	color: #666;
	background-color: inherit;
	text-decoration: none;
}
div.screenshot img {
	border: none;
}


/* Classes for notes, quotations, etc. */
div.abstract, div.note {
	color: black;
	background-color: #eee;
	font-size: 0.85em;
	line-height: 175%;
	padding: 0em 1em 0em 1em;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	margin: 2em;
}

div.quotation {
	color: #333;
	background-color: #eee;
	font-size: 0.85em;
	font-style: italic;
	line-height: 175%;
	padding: 0em 1em 2.5em 1em;
	border-top: 1px dotted #999;
	border-bottom: 1px dotted #999;
	margin: 2em;
}
div.quotation span.attribution:before {
	content: "\2014 ";
}
div.quotation span.attribution {
	color: #666;
	background-color: inherit;
	float: right;
}
div.quotation a {
	color: black;
	background-color: inherit;
}
div.quotation span.attribution a {
	color: #666;
	background-color: inherit;
}
div.quotation a:hover, div.quotation span.attribution a:hover {
	color: blue;
	background-color: inherit;
}


/* Classes for footnotes. */
.footnoteref {
	font-size: 0.8em;
	font-weight: bold;
	line-height: 100%;
	vertical-align: super;
	text-decoration: none;
}
a.footnoteref:hover {
	text-decoration: underline;
}
div.footnote {
	color: #333;
	background-color: #eee;
	font-size: 0.85em;
	line-height: 175%;
	padding: 1em;
	border-left: 1px solid #666;
	margin: 2em;
}
a.footnotereturn {
	color: #999;
	background-color: inherit;
	font-style: italic;
	padding-right: 1em;
	float: left;
}
div.footnote p {
	margin: 0em 1em;
}


/* Icon blocks: each block is 16em wide and contains a (background) icon,
 * header text and content text.  The background icons are specified
 * at the end of the file as id-based selectors. */
ul.icnblocklist {
	padding: 0;
	margin: 0;
	float: left;
}
ul.icnblocklist li {
	list-style-type: none;
	width: 16em;
	margin: 0 0 0 1em;
	float: left;
}
ul.icnblocklist li a {
	color: black;
	background-color: inherit;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	text-decoration: none;
	display: block;
	min-height: 48px;
	padding-left: 64px;
	padding-bottom: 8px;
	margin-bottom: 0.5em;
}
ul.icnblocklist li a:hover {
	background-color: inherit;
	background-position: 0px 0px;
	background-repeat: no-repeat;
}
ul.icnblocklist li a:hover span {
	color: blue;
	background-color: inherit;
	text-decoration: underline;
}
ul.icnblocklist li span.icnblockhead {
	color: black;
	background-color: inherit;
	font-size: 1.1em;
	font-weight: bold;
}
ul.icnblocklist li span.icnblocktext {
	color: #333;
	background-color: inherit;
	font-size: 0.8em;
}


/* Comment classes. */
div.comment {
	font-size: 0.9em;
	margin: 0em 1em 2em 1em;
}

div.comment .commentbyline {
	font-style: italic;
}

div.comment .commentbyline .commentauthor {
	width: 50%;
	display: block;
	float: left;
}
div.comment .commentbyline .commentdate {
	font-size: 0.9em;
	text-align: right;
	width: 50%;
	display: block;
	float: left;
	clear: right;
}

div.comment .commenttext {
	background-color: #eee;
	line-height: 150%;
	padding: 0em 1em;
	border-top: 1px dotted #999;
	border-bottom: 1px dotted #999;
	margin: 1em;
	clear: both;
}

/* Comment form classes. */
form.commentform table, form.commentform td {
	border: none;
	margin: 1em 2em;
}

form.commentform table td {
	padding: 0.25em;
}

form.commentform label {
    font-weight: bold;
}



/* Special classes for inline text. */
.midinote {
	background-color: #eee;
	font-size: 0.8em;
	border: 1px dotted #999;
}
.midinote .flat, .midinote .sharp {
	font-size: 0.9em;
	vertical-align: top;
}
.midinote .octave {
	font-size: 0.8em;
	vertical-align: bottom;
}


/* Classes for literal blocks. */
pre {
	color: #111;
	background-color: #eee;
	font-family: Lucida Console, Courier, monospace;
	font-size: 9pt;
	line-height: 120%;
	padding: 0.5em;
}

/* Classes for embedded source code. */
code {
	color: #111;
	background-color: #eee;
	font-family: Lucida Console, Courier, monospace;
	font-size: 9pt;
	line-height: 120%;
	white-space: nowrap;
	padding: 0.5em;
	display: block;
}

code .c_commentline,
code .c_comment,
code .p_commentline,
code .h_comment,
code .css_comment,
code .hermes_comment
{
	color: #080;
}

code .c_word,
code .c_preprocessor,
code .p_word,
code .h_tag,
code .h_tagunknown,
code .css_identifier,
code .css_unknown_identifier,
code .hermes_keyword
{
	color: #008;
	font-weight: bold;
}

code .h_attribute,
code .h_attributeunknown
{
	color: #008;
}

code .c_string,
code .c_character,
code .p_character,
code .p_string,
code .p_triple,
code .p_tripledouble,
code .h_doublestring,
code .h_singlestring,
code .css_doublestring,
code .css_singlestring
{
	color: #808;
}

code .p_classname,
code .p_defname,
code .css_class,
code .css_pseudoclass,
code .css_unknown_pseudoclass,
code .css_tag,
code .hermes_stringid
{
	color: #088;
	font-weight: bold;
}

code .hermes_separator
{
	color: #800;
	font-weight: bold;
}
code .hermes_escape
{
	color: #800;
}


/* Override classes for Markdown comments. */
div.commenttext.markdown pre, div.commenttext.markdown pre code {
    white-space: pre;
}

div.commenttext.markdown > code {
    display: inline;
}



/* ---------------------------------------------------------
 * Sidebar style.
 */

/* The sidebar block and related sidebar.  Related sidebars are displayed
 * in a lighter color, but other than that they are identical to normal
 * sidebars. */
.sidebar {
	color: black;
	background-color: white;
	width: 30%;
	float: right;
	clear: right;

	/* Temporary fix for IE until we can figure out why it is removing
	 * margins after footnotes. */
	_padding: 0em 0.5em;
}

/* The ".sidebar.related.span" should be unnecessary (the * should cover
 * it), but Internet Explorer needs it to give enough precedence to this
 * rule. */
.sidebar.related *, .sidebar.related span {
	color: #666;
	background-color: inherit;
	font-weight: normal;
}


/* All links in the sidebar are the strangeGizmo.com standard link color
 * and are not underlined.  Each sidebar block contains zero or one
 * clickable links, so the underlining is not necessary.  Note that the
 * link color is almost always overriden by a block-specific style.  The
 * color is only set here to support class-less and id-less tags.
 *
 * Related links get their color information from the base related style
 * above. */
.sidebar a {
	color: #930;
	background-color: inherit;
	text-decoration: none;
}

/* We need both the ".sidebar a:hover" and the ".sidebar a:hover *" because
 * some anchor tags have only text in them, and others have other inline
 * elements.  We also provide ".sidebar a:hover span" to deal with the
 * fact that the ".sidebar.related span" style above is more specific than
 * these styles (on MacIE). */
.sidebar a:hover, .sidebar a:hover *, .sidebar a:hover span {
	color: blue;
	background-color: inherit;
	text-decoration: underline;
}


/* Sidebar headers.  Each sidebar has an h2 tag that contains its header
 * text.  Headers in related sidebars are drawn in a ligher color than normal
 * sidebars and have a thinner border.  Note that the first sidebar in a file
 * must include the class name 'first' or it will not be given the correct
 * margin. */
.sidebar h2 {
	font-size: 1.2em;
	height: 1.3em;
	border-bottom: 2px solid #333;
	margin: 0.5em 0 0 0;
}
.sidebar.first h2 {
	margin-top: 2.084em;
}
.sidebar.related h2 {
	border-bottom: 1px solid #999;
}


/* Paragraphs in the sidebar are rendered left-justified in the same size
 * font as kvlists. */
.sidebar p {
	font-size: 0.8em;
}


/* Key-Value lists contain a series of list items in the format "Key: Value".
 * The key is identified by an element with the 'kvlistkey' class and the
 * value is given the 'kvlistvalue' class. */
.sidebar ul.kvlist {
	padding-left: 0.5em;
	margin-left: 0;
	margin-bottom: 0.5em;
}
.sidebar ul.kvlist li {
	font-size: 0.8em;
	margin-left: 36px;
}
.sidebar ul.kvlist li .kvlistkey {
	font-weight: bold;
}


/* Icon Lists contain a (background) icon that is 24x24 pixels in size, a
 * header text element (icnlisthead) and text element (icnlisttext). */
.sidebar ul.icnlist {
	list-style: none;
	padding-left: 0.5em;
	margin-left: 0;
	margin-bottom: 0;
}
.sidebar ul.icnlist li {
	font-size: 0.7em;
	display: block;
	margin-bottom: 0.7em;
}
.sidebar ul.icnlist li div {
	background-color: inherit;
	background-position: 2px 2px;
	background-repeat: no-repeat;
	min-height: 26px;
	padding-left: 36px;
	padding-bottom: 2px;
}
.sidebar ul.icnlist li div.icnlistselected {
	background-color: #eee;
	border: 1px solid #ccc;
	margin: -1px;
}
/* The second selector (which is identical to the first, except for the fact
 * that it ends in "*") is used to override the IE-specific hover selector
 * for sidebar links that also ends in "*". */
.sidebar ul.icnlist li .icnlistselected a:hover, .sidebar ul.icnlist li .icnlistselected a:hover * {
	color: black;
	text-decoration: none;
}
.icnlisthead {
	color: black;
	background-color: inherit;
	font-size: 1.4em;
	font-weight: bold;
}
.icnlisthead a {
	color: black;
	background-color: inherit;
}
.icnlisttext {
	color: #333;
	background-color: inherit;
}


/* Definition Lists are similar to standard, HTML definition lists, except
 * that they are composed of standard ul and li tags.  The item that is
 * being defined is given its own li tag with the class 'deflistitem'.  The
 * definition item (of which there may be more than one) is in an li tag
 * with the class 'deflisttext'. */
.sidebar ul.deflist {
	font-size: 0.7em;
	padding-left: 0.5em;
	margin-left: 0em;
}
.sidebar ul.deflist li.deflistitem {
	color: black;
	background-color: inherit;
	font-size: 1.4em;
	font-weight: bold;
	list-style: none;
	margin-left: 3px;
	margin-bottom: 0.7em;
}
.sidebar ul.deflist ul.deflisttext {
	padding-left: 36px;
	margin: 0;
}
.sidebar ul.deflist ul.deflisttext li {
	color: #333;
	background-color: inherit;
	font-size: 0.72em;
	font-weight: normal;
	list-style-type: disc;
}



/* ---------------------------------------------------------
 * Background images.
 */

/* Product Icons */
#icon_directnfs { background-image: url(/img/icon_directnfs.png); }
#icon_eiomail { background-image: url(/img/icon_eiomail.png); }
#icon_emptymagic { background-image: url(/img/icon_emptymagic.png); }
#icon_hermesbbs { background-image: url(/img/icon_hermesbbs.png); }
#icon_hermespython { background-image: url(/img/icon_hermespython.png); }
#icon_mforth { background-image: url(/img/icon_mforth.png); }
#icon_perfreviews { background-image: url(/img/icon_perfreviews.png); }


/* Global Bullets */
#bullet_asm { background-image: url(/img/bullet_asm.png); }
#bullet_comments { background-image: url(/img/bullet_comments.png); }
#bullet_eiomail { background-image: url(/img/bullet_eiomail.png); }
#bullet_emptymagic { background-image: url(/img/bullet_emptymagic.png); }
#bullet_hermesbbs { background-image: url(/img/bullet_hermesbbs.png); }
#bullet_java { background-image: url(/img/bullet_java.png); }
#bullet_javadoc { background-image: url(/img/bullet_javadoc.png); }
#bullet_license { background-image: url(/img/bullet_license.png); }
#bullet_macosx { background-image: url(/img/bullet_macosx.png); }
#bullet_mforth { background-image: url(/img/bullet_mforth.png); }
#bullet_pgpkey { background-image: url(/img/bullet_pgpkey.png); }
#bullet_pydoc { background-image: url(/img/bullet_pydoc.png); }
#bullet_python { background-image: url(/img/bullet_python.png); }
#bullet_return { background-image: url(/img/bullet_related.png); }
#bullet_rom { background-image: url(/img/bullet_rom.png); }
#bullet_windows { background-image: url(/img/bullet_windows.png); }

/* For 'related' icon blocks.  Must be a class (not id) selector, because
 * it may appear more than one time on a page. */
.bullet_related { background-image: url(/img/bullet_related.png); }

/* Homepage Bullets. */
#bullet_home1 { background-image: url(/img/bullet_home1.png); }
#bullet_home2 { background-image: url(/img/bullet_home2.png); }
#bullet_home3 { background-image: url(/img/bullet_home3.png); }
#bullet_home4 { background-image: url(/img/bullet_home4.png); }

/* Product List Bullets. */
#bullet_java1 { background-image: url(/img/bullet_java1.png); }
#bullet_java2 { background-image: url(/img/bullet_java2.png); }
#bullet_java3 { background-image: url(/img/bullet_java3.png); }
#bullet_python1 { background-image: url(/img/bullet_python1.png); }
#bullet_python2 { background-image: url(/img/bullet_python2.png); }
#bullet_python3 { background-image: url(/img/bullet_python3.png); }

/* Empty Magic */
#bullet_magickeys { background-image: url(/img/bullet_em_magickeys.png); }
#bullet_magicmute { background-image: url(/img/bullet_em_magicmute.png); }
#bullet_magictouch { background-image: url(/img/bullet_em_magictouch.png); }
#bullet_magicwheels { background-image: url(/img/bullet_em_magicwheels.png); }
#bullet_try { background-image: url(/img/bullet_em_try.png); }

/* Forth Resources. */
#bullet_forth_colorforthlist { background-image: url(/img/bullet_forth_colorforth.png); }
#bullet_forth_machineforthlist { background-image: url(/img/bullet_forth_machineforth.png); }
#bullet_forth_nosclist { background-image: url(/img/bullet_forth_nosc.png); }
#bullet_forth_misclist { background-image: url(/img/bullet_forth_misc.png); }
#bullet_forth_cflinks { background-image: url(/img/bullet_forth_cflinks.png); }
#bullet_forth_ultratechnology { background-image: url(/img/bullet_forth_ut.png); }