/*
 * Style sheet for my main pages
 * $Id: main.css,v 1.8 2006/04/29 03:18:40 gadams Exp $
 */

body {
	color: black;
	background: white;
	font-family: Optima, Verdana, sans-serif;
}
a {
	text-decoration: none;
	font-weight: bold;
	background: transparent
}
a:link {
	color: #b54040;
}
a:hover {
	text-decoration: underline;
}
a:visited {
	color: #994c99;
}
a:active {
	color: #332649;
}

.sidebar {
	padding: 1em;
	border: solid thin;
	border-color: black;
	margin: 1em 3em;
	color: black;
	background: #ddd;
}

img {
	border: 0;
}

/* Let's have a way to show known-broken links that I still want to keep
 * on the page. */
a.broken {
	text-decoration: line-through;
	color: gray;
}

/* This is part of the Mozilla workaround.  See the next rule. */
address {
	position: relative;
}

address span {
	float: right;
	/* Well, the above doesn't do what I want in Mozilla. The following
	   does, but it's a bit more heavy-handed than I'd like.  (Note that it
	   also requires setting the position attribute of the enclosing address
	   element to relative.)  And my reading of the CSS spec tells me I
	   shouldn't need it; the above should work. */
	position: absolute;
	right: 0px;
	top: 0px;
}

/* Typesetting notes (from my original index.html file):

The subsection title graphics are in 16-point Times New Roman.
Underlines were added by hand with the line tool.  The red chosen
for making the text was around #990000 (153, 0, 0), while that for
the red underline was #B54040 (181, 64, 64).

I don't recall the type on the main section titles, but I'd
guess 18-point Times New Roman for starters.

*/

pre {
	font-family: Courier, Monaco, fixed, monospace;
	white-space: pre;
}

/* Dave Raggett recommends we set the font for headings, ul and p elements
   if we ever want to include them in a div.  This works around browser
   bugs that involve forgetting to inherit the font family from the body.
   See <http://www.w3.org/MarkUp/Guide/Style>.  I'll skip the headings;
   I've set most of them above already.

   Note: This is a maintainability problem, since I'll want to keep it in
   sync with the body element at the beginning of my stylesheet. :(  */

/* Also, I've found that A bug in iCab (at least, in version 2.9) causes
   td tags not to inherit the font information from the enclosing body
   element */
ul,p,td {
	font-family: Optima, Verdana, sans-serif;
}


/* Remove the normal margin from the body, so that our red-background boxes
   go right to the viewable area's edges. */
body {
	margin: 0;
	padding: 0;
	/* font-size: 76%;/* font sizing in ems, baby. if you want to change anything, just change this.*/
}
/* Put a normal margin around elements directly within the body. */
body>p, body>h3, body>h4, body>h5, body>h6, body>ol, body>ul, body>dl,
 	#content>p, #content>h3, #content>h4, #content>h5, #content>h6,
	#content>ol, #content>ul, #content>dl, #content>blockquote,
	#content>.sidebar, #content>pre {
	margin: 1.0em;
}

h1 {
	background: #c33;
	color: #fff;
	padding: 0.5em 1.0em;
	margin: 0em 0em;
	font-size: 2.0em;
	font-weight: normal;
	margin-top: 0em;
	margin-bottom: 0em;
	font-style: normal;
}
h2 {
	border-top: 1px solid #c33;
	border-left: 7px solid #c33;
	padding-left: 0.5em;
}
h1, h2, h3, h4, h5, h6 {
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: normal;
}

/* Make the text more readable by limiting column width. */
p, li {
    /* <http://www.maxdesign.com.au/presentation/em/> and
      <http://www.svendtofte.com/code/max_width_in_ie/> suggest using 30em. */
    max-width: 35em;
    /* text-align: justify; */
    /* IE 5-6 kludge (emulates 30em max-width).
       Is this necessary in IE 7? */
    width: expression( 
        document.body.clientWidth > (500/12) * 
        parseInt(document.body.currentStyle.fontSize) ?
            "30em" :
            "auto" );
}

/* Our main page content, plus the footer, goes in here.
*/
#content {
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
	background: white;
}
#footer {
	margin-left: auto;
	margin-right: auto;
	background: white;
}

/* Special box for my self-protrait image (right now, looks just like
	the navigation bar, but doesn't disappear when printing) */
#mugshot {
    float: right;
    border: 1px solid #c33;
    margin: 1em;
    padding: 0.5em;
	background: #fff;
}

/* Let's try a navigation box, header, and footer */
#navigation {
    float: right;
    border: 1px solid #c33;
    margin: 1em;
    padding: 0.5em;
	background: #fff;
}

/* Special stuff for our footers. */

#footer {
	padding: 0.15em 1.0em;
	/* font-size: 0.8em; */
	color: #fff;
	background-color: #c33;
	/* text-align: center; */
}
#footer hr {
	display: none;
}
#footer a {
	color: white;
}

/* Make the quotation marks larger than life and somewhat icon-like. */
.block-quote {
	font-size: 4em;
	color: #ccc;
	font-family: Times, serif;
}

blockquote {
	display: block;
	padding: 0.5em;
	padding-left: 2em;
}
blockquote:before, blockquote:after {
	color: #ccc;
	display: block;
	font-size: 700%;
	font-family: Times, serif;
}
blockquote:before {
	content: open-quote;
	height: 0;
	margin-left: -0.5em;
	margin-left: -0.45em;
}

table {
	border: 0;
	border-spacing: 2;
}
th {
	background: #D0D0D0;
	font-weight: normal;
}
td {
	background: #EDEDED;
	/* XXX Center the text, by default */
}

/* Center figures, (but not their captions?) */
div.figure {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
/* Here's a way we could avoid centering the captions, but it doesn't look
   all that great:
div.figure>div {
	text-align: left;
	margin-left: 1.0em;
	margin-right: 1.0em;
}
*/

/* These rules are for section header images, which either float to the left
   or right side of the corresponding section header. */
.left-header {
	float: left;
	margin-right: 1em;
}

.right-header {
	float: right;
	margin-left: 1em;
}

/* For the best looks, the start of the next section should clear the floating
   header image described in the above two rules. */
.clear-left {
	clear: left;
}
.clear-right {
	clear: right;
}

/*
 * Media-type specific tuning
 */

@media print {
	/* Instead of a colored background, which won't print well, we'll draw a
	   line under our page header. */
	h1 {
		border-bottom: 1px solid #c33;
		background: #fff;
		color: #000;
	}

	#navigation {
		display: none;
	}

	#footer {
		border-top: 1px solid #c33;
		background-color: #fff;
		color: #000;
	}
	#footer a {
		color: black;
	}
}

#footer {
	position: absolute;
	bottom: 0;
	/* right: 0; */
	/* width: 10em; */
	xwidth: 100%;
	xborder: 2px solid red;
	/*
	padding-top: 1em;
	padding-bottom: 1em;
	*/
	/* margin: 1em; */
	xmargin-bottom: 1em;
	xmargin-bottom: 10px;
	xdisplay: table-row;
	xtext-align: center;
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
}
#footer>div {
	width: 100%;
}
html, body {
	height: 100%;
}
#content {
	/* padding-bottom: 100px; */
	xpadding: .5em;
	/* border: 2px solid orange; */
	height: auto;
	padding-bottom: 4em; /* Make room for the nav footer */
}
#containerx {
	position: relative;
	min-height: 100%;
}
#spacer {
	position: relative;
	min-height: 100%;
}