/*
 * This is the madscientistroom.org style sheet.
 *
 * The sorts of things the web pages hosts are:
 * 1) Family photographs
 * 2) Project descriptions
 * 3) Presentations
 * 4) Source code (e.g., C, Forth, Verilog, Pascal, Perl, etc.)
 * 5) Links to other people's pages
 * 6) Political commentary
 *
 * Beginning aroung June 1st, 2004, I decided to build this style sheet
 * to help format the madscientistroom.org web page to be easier to
 * scale.  The problem I saw was that few of the pages had the same format.
 * They were eradic and all different.
 *
 */

/*
 * "headernav" is the Header Navigation mechanism that is built into
 * the top of every web page.  This styles defined here embellish the
 * text which is #included in every web page:
 *          <!--#include file="header_links.html" -->
 * In each directory, there is a different header_links.html file.
 * If I add a new directory, then I only need to update all the
 * existing header link files, not every web page in the system.
 * The -one- difference between all the header links is that one
 * of the ul li a's is tagged as 'current'.  That entry is treated
 * special so that those perusing the site can tell in which section
 * they are currently.
 */

#headernav {
	background: #804040 none; 
	color: #FFF8E0; 
	text-align: center;
	font-size: 150%;
}

#headernav h5 {
	display: none;
}

#headernav ul {
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-top: .5em;
	margin: 0;
	font: bold 50% Verdana, sans-serif;
}

#headernav ul li {
	display: inline;
	margin-left: 5px;
	text-align: center;
}

#headernav ul li a {
	border: 1px solid #FFF8E0;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-top: 0;
	padding-bottom: 0;
	text-decoration: none;
}

#headernav ul li a:link {
	background: #804040 none; 
	color: #FFF8E0;
}

#headernav ul li a:visited {
	background: #804040 none; 
	color: #FFF8E0;
}

#headernav ul li a:link:hover, #headernav ul li a:visited:hover {
	background: #FFF8E0 none;
	color: #000;
}

#headernav ul li a#current {
	background: white;
	color: #804040;
}

/*
 * Adding a Wrapper for the body and navigation sidebar.
 * See Alistapart.com article for this style:
 * http://alistapart.com/articles/negativemargins/
 */


/*
 * body
 *
 * The body of the document is split with sidebar links.
 * The idea is to have two levels of links: global and local.
 * The header links are the global links.  They take you from
 * one area (e.g., Home, Mippy, Mason, Gina+Randy) to another.
 * The sidebar links are the local links.  They take you from
 * one area within Mippy to another area within Mippy.
 * Now, that's not quite the full story, because along with
 * the local sidebar links are external reference links.
 * But, that's just that.
 */
#wrapper {
}
#container {
	width: 100%;
	float: right;
	margin-left: -150px;
}
.clearing {
	height: 0;
	clear: both;
}

#body {
	background: #FFF8E0;
	color: #804040 ; 
/*	margin-right: 200px; */
	margin-left: 150px;
}

/*
 * sidebar
 *
 * Sidebar is a "rollover" type vertical menu without graphics.
 * This is a simple menu that is used for selecting other
 * web pages within the current directory (mostly).
 */
#sidebar {
	width: 150px;
/*	float: right; */
	float: left;
	font-size: 70%;
	font-weight: bold;
	color: #FFF8E0;
}

/*
 * WHITE:  #FFF8E0
 * MAROON: #804040
 * RED:    #CC3333
 * BLUE:   #009999
 * CREAM:  #FFCC99
 * COFFEE: #E0E0C8
 */
div.link-block {
	border: 1px solid #804040; /* BLUE */
	background: #FFF8E0;  /* CREAM */
	margin: 10px 5px 0px 10px;
	padding: 0px;
}

div.link-block p {
	background: #804040;  /* BLUE */
	color: #FFF8E0;
	display: block;
	margin: 0;
	line-height: 1.25;
	padding: 0 10px 0 10px;
}

div.link-block a,
div.link-block a:visited,
div.link-block a:link {
	display: block;
	background: #FFF8E0; /* WHITE */
	color: #804040; /* RED */
	margin: 0;
	padding: 0 3px 0 3px;
	text-decoration: none;
}

div.link-block a:hover {
	display: block;
	background: #E0E0C8; /* COFFEE */
	color: #804040; /* MAROON */
	margin: 0;
	padding: 0 3px 0 3px;
	text-decoration: none;
}

/*
 * At the bottom of every page is a footer.
 * It's a whimsical or witty saying that is specific to an
 * area of the web site.  For example, all Mason pages say
 * the same thing in the footer.  All Mippy pages have the
 * same footer, etc.
 */

#footer {
	clear: both;
	padding-bottom: 1em;
	text-align: center;
	border-top: 2px solid black;
	position: relative;
}

/*
 * Body definition
 * All body text, except where explicitly changed, is
 * defined here.
 */
body { 
	background: #FFF8E0 none; 
	color: #804040 ; 
	margin: auto auto auto auto ;
	font-family: "Comic Sans MS", sans-serif ;
}

span.define {
	color: black;
}

body.sidebar {
	background: #FFF8E0 none; 
	color: #804040 ; 
	margin: auto auto auto auto ;
	font-family: Arial, sans-serif ;
	font-size: small ;
}

td.sidebar {
	background: #FFF8E0 none;
	color: #804040 ; 
	margin: auto auto auto auto ;
	font-family: Arial, sans-serif ;
	font-size: small ;
}

/*
 * My default Header
 * This is the banner across the top of most pages.  I don't use
 * this same header for presentations, but for all other pages.
 */
p.page-header {
	background: #804040 none;
	color: #FFF8E0; 
	text-align: center;
	padding-top: .25em; 
	padding-bottom: .25em; 
	font-size: 150%; }

p.page-button {
	background: #804040 none; 
	color: #FFF8E0; 
	text-align: center;
}

div.mail {
	font-family: Verdana;
	font-size: smaller;
	background: #FFF8E0 none; 
	color: #0000FF;
	border: 1px dashed black;
	display: block;
	width: 50%;
	margin-left: 10%;
	margin-right: 10%;
	padding: 1em 2em 1em 2em;
}

div.b5-layout {
	border: 1px solid #804040;
	min-height: 140px;
}

div.b5-title {
	text-align: center;
	background: #804040 none;
	color: #FFF8E0;
}

div#b5-instructions {
	display: none;
}
div#b5-output {
	display: none;
}

div.b5-image {
	float: left;
}

div.b5-loc {
	margin-left: 170px;
}

div#b5-ucf {
/*	display: none; */
	font-family: courier;
	background: #E0E0C8; /* COFFEE */
	color: #804040; /* MAROON */
}

pre.forth {
	font-family: courier;
	background: #FFF8E0 none; 
	color: #0000FF;
	border: 1px dashed black;
	display: block;
	width: 50%;
	margin-left: 10%;
	margin-right: 25%;
	padding: 1em 2em 1em 2em;
}

pre.source {
	font-family: courier;
	background: #FFF8E0 none; 
	color: #000000;
	border: 1px dashed black;
	display: block;
	width: 50%;
	margin-left: 10%;
	margin-right: 10%;
	padding: 1em 2em 1em 2em;
}

span.source-hilight {
	background: #FFFF00;
}

pre.vt100 {
	font-family: courier;
	background: #000 none; 
	color: #880;
	border: none;
	display: block;
	width: 50%;
	margin-left: 10%;
	margin-right: 25%;
	padding: 1em 2em 1em 2em;
}

span.vt100input {
	color: #FFF;
}

span.forth-def {
	color: #FF0000;
}
span.forth-comment {
	color: #008000;
}

/*
 * Paragraph formatting
 * There are several kinds of paragraphs that are used.
 * Standard english text paragraphs want indenting.
 * Programming languages want a mono-spaced font, "pre"
 * formatting, and specific indentation.  In addition,
 * Forth uses all uppercase, for reasons that are lost.
 */
p.indent { text-indent: 3em; }
p.prog { 
	font-family: monospace, courier ; 
	white-space: pre ;
}

/*
 * Sidebar
 * There are lots of references to other people's web pages.
 */
a:link { font-weight: normal; text-decoration: none; }
a:hover { font-weight: normal; text-decoration: underline; }
a:visited { font-weight: normal; text-decoration: none; }
a:active { font-weight: normal; }

/*
 * Internal links
 * Links within the web site have a couple of different
 * looks.  For links from the front web page to elsewhere
 * in the site, I have a special format.  Other places
 * I use links that look more like a table.
 */
p.mad-link {
	text-align: center;
	font-size: 200%;
}

/*
 * Presentations
 */