/* AUMP.org stylesheet by Philip Semanchuk. The tricks to hide various bits of CSS from browsers were gleaned from here:
http://w3development.de/css/hide_css_from_browsers/summary/
http://centricle.com/ref/css/filters/

Test browsers referred to in the comments are FF1 (Firefox 1.0 under OS X and Win2k), S1.2 (Safari 1.2 under OS X), O7 (Opera 7 
under Win2k), N6 (Netscape 6 under Win98), IE6 (Internet Explorer 6 under Win2k) and IE5 (Internet Explorer 5.0 under Win98). 
FF1/OSX was my main test browser. I have yet to see a case where FF/OSX renders differently from FF/Win, so I didn't 
differentiate them in my comments. I occasionally tested IE 5.2 under OS X, but I didn't do it consistently enough to make 
notes. Netscape 4.x and IE4 were deemed beneath my attention ;) so I didn't test with them. I know for sure the site looks like 
a train wreck in NS4.03 and I'm sure it does in IE4 as well.

I tested in screen resolutions of 1680x1050 (my external monitor), 1280x854 (my Powerbook), 1024x768 (Win2k) and 
800x600 (Win98 and Win2k). 

*/

body { 
	width: 92%; 
	margin-left: 3%; 
	margin-right: 5%; 
	margin-top: 0px; 
	margin-bottom: 3em; 
	font-family: sans-serif;
	background-image: url(/common/images/background.jpg);
}

div#copyright {
	margin-left: 11em; 
	text-align: right;
	font-size: 80%;
	padding-top: .5em;
}

div#logo {
	float: right; 
	width: 110px; 
	height: 106px; 
	margin-left: .5em;
	margin-bottom: .5em;
}

.RightFloat { float: right; }
	
.LeftFloat { float: left; }

h1 {
	font-variant: small-caps;
	font-size: 200%;
	font-family: serif;
	letter-spacing: 2px;
	margin: .25em 0em .25em 0em;
	padding: 0px;
	border-width: 0em 0em .2em 0em;
	border-color: #000000;
	border-style: double;
}

h1 span { color: #555555; }

/* These stylings are for headings the content author(s) might add. */ 
div#ContentBox h3 {
	/* To use a double border, the bottom border has to be at least 3px height in FF, IE6, O7. Didn't test elsewhere. */
	border-width: 0px 0px 3px 0px;
	border-color: #000000;
	border-style: double;
	width: 75%;
	font-size: 125%;
	font-weight: bold;
}

div#ContentBox h4 {
	border-width: 0px 0px 2px 0px;
	border-color: #000000;
	border-style: solid;
	width: 60%;
	font-size: 115%;
	font-weight: bold;
}

div#ContentBox h5 {
	border-width: 0px 0px 2px 0px;
	border-color: #000000;
	border-style: solid;
	width: 60%;
	font-size: 100%;
	font-weight: bold;
}

ul#LanguagePicker {
	list-style-type: none;
	border: 1px #444444 solid;
	margin: 0px;
	text-align: center;
	padding: .5em;
	background-color: #dddddd;
	width: 6.5em;
}

#ContentBox {
	background-color: #ffffff;
	border: 3px solid #000000;
	margin-left: 10.5em;
	margin-top: .5em;
	padding: .5em;
	/* min-height is set to the height of the logo plus a bit. When there's no text (or very little), this
	   helps to ensure that the logo renders entirely inside its enclosing content box. Unfortunately, only 
	   FF and O7 respect this setting. */
	min-height: 120px;
}

/* Menu color scheme is puddle/submenu highlight #f7f574  hover color #000000. Borders around the menus are dashed not because 
   they look nicer (I prefer solid) but because they make less obvious the rounding errors that result in borders being 
   off from one another by 1px. The off-by-one errors are most visible at the corners and that's where a dashed line really helps. 
   IE5 draws dashed borders as solid. */

div#MainMenuContainer {
	float: left;
	width: 10.5em;
	font-size: 90%;
	background-color: #f7f574;
	border-color: #000000;
	border-style: dashed;
	border-width: 1px 1px 0px 0px;
	position: relative;
	left: 0px;
	z-index: 0;
}

div#LanguagePickerContainer {
	background-image: url(/common/images/background.jpg);
	width: 9em;
	border-color: #000000;
	border-style: dashed;
	border-width: 0px 1px 0px 0px;
	background-color: #ffffff;
	position: relative;
	top: -1px;
	/* One can increase the padding-bottom here and move the main menu south away from the 
	   language picker without any ill formatting effects. */
	padding-bottom: 1em;
}

ul#MainMenu {
	position: relative;
	top: -1px;
	margin: 0px;
	padding-left: 1.25em;
	width: 9.25em;
	background-color: #dddddd;
}

ul#MainMenu li {
	/* IE5 adds a 3px margin to the bottom of each LI. Here I undo that, and then restyle it immediately below. The result 
	   is that only IE5 is affected by this style. */
	margin-bottom: -3px;
}

ul#MainMenu li/* This is a comment to hide this selector from IE5.0. */ { margin-bottom: 0px ! important; }

ul#MainMenu li.AboveCurrent   { 
	background-color: #f7f574; 
	border-color: #000000; 
	border-width: 0px 1px 0px 0px; 
	border-style: dashed;
	/* Specifying "width: 100%;" is good enough for most browsers, but not IE5. */
	width: 9.25em;
}

ul#MainMenu li.IsCurrent {
	background-color: #f7f574;
	border-color: #000000;
	border-width: 0px 0px 1px 0px;
	border-style: dashed;
	/* I need to specify a margin-bottom here otherwise the bottom border gets covered up.  */
	margin-bottom: 1px;
	list-style-type: none;
	padding-left: 0px;
	/* Moving the left margin into negative territory ensures that the entire horizontal space inside the UL is 
	   painted with the puddle color. */
	margin-left: -1.25em;
	/* IE5 renders this item short unless I specify the width here. All other browsers render it correctly without the width hint. */  
	width: 10.5em;
}

ul#MainMenu li.BelowCurrent {
	background-color: none;
	background-image: url(/common/images/background.jpg);
	/* I make these items just a wee bit long to cover up the dashed border of the container DIV which would otherwise
	   disrupt the puddle illusion. This works beautifully in FF, S and 07 but not in IE, surprise surprise. So IE gets
	   special styling (below). I could use the "position: relative" styling for all browsers, but I don't because a) I prefer
	   this simpler route and b) "position: relative" triggers a bug(?) in O7 that causes the LIs to render without bullets. */
	width: 102%;
}

/* This is an illegal selector; FF1, N6, S1.2 and O7 correctly ignore it while IE5 & IE6 treat it as legal. In other words, 
   only IE5 & IE6 use this style. */
* html ul#MainMenu li.BelowCurrent { 
	width: 100%;
	position: relative; 
	left: 2px;
}

ul#MainMenu a {
	display: block;
	width: 9em;
	padding: .2em 0em .2em .25em;
	background-color: #dddddd;
}

ul#MainMenu a:hover {
	background-color: #000000;
	color: #ffffff;
}

ul#MainMenu a.AboveCurrent {
	border-color: #000000; 
	border-width: 0px 1px 0px 0px;
	border-style: dashed;
	width: 7.5em;
}

/* This h2 takes the place of the Anchor in the currently selected item. */
ul#MainMenu h2 {
	width: 7.75em;
	margin: 0px;
	padding: .2em .2em .2em 1em;
	background-color: #f7f574;
	border-color: #000000; 
	border-width: 1px 0px 0px 1px; 
	border-style: dashed; 
	font-size: 100%;
	font-weight: bold;
}

ul#SubMenu {
	background-color: #f7f574;
	padding: .25em 0em .25em 2em;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10.5em;
	font-size: 90%;
	border-color: #000000; 
	border-width: 1px 1px 1px 0px; 
	border-style: dashed;
}

/* I want to move the SubMenu UL one pixel to the left and up in the z-order to ensure that its border-less left edge paints
   over the border on the right edge of the MainMenuContainer DIV which is crucial to creating the puddle illusion. Unfortunately,
   specifying position: relative causes a strange & stubbon rendering problem in IE. Notably, the SubMenu has a small (5px?) 
   horizontal gap at the top where the body bleeds through. If I specify height: 2em, the problem goes away but 
   then IE changes its interpretation of the relative positioning, and I need to specify left: -4px to get the SubMenu UL where
   I want it. In addition, specifying a fixed height causes problems when there's a lot of menu items and they wrap to a 
   second line. FF1 and S1.2 paint the items outside of the UL borders, even if I specify overflow: visible. IE5 (and IE6?) 
   and N6 simply expand the UL to fit them items, ignoring the height specification. (One of the few cases I've seen where 
   N6 differs from FF1). In short, FF1, S1.2 and N6 get this right, IE5 & IE6 require the quirky styling below. */

/* This is an illegal selector; FF1, N6, S1.2 and O7 correctly ignore it while IE5 & IE6 treat it as legal. In other words, 
   only IE5 & IE6 use this style. */
* html ul#SubMenu { 
	position: relative;
	z-index: 1;
	left: -4px;
	height: 2em; 
	overflow: visible; 
}

/* IE's child-selector bug hides this style from IE5 & IE6 but not from my other test browsers. */
body>ul#SubMenu {
	position: relative;
	z-index: 1;
	left: -1px;
}

ul#SubMenu li {
	display: inline;
	padding: .25em;
	/* line-height is critical when the menu items are wide/numerous enough to wrap onto a second line. When there's multiple lines 
	   of menu items and no line-height specification, the menu items appear on top of each other in FF1, O7 & IE6. 
	   Margin-top and margin-bottom seem to be ignored on inline LIs in all of these browsers. */
	line-height: 2em;
}

/* When a main menu item has no subitems, the UL.Submenu is logically empty but that's illegal per HTML 4.01. So I create an
   LI for UL.Submenu but I use this style to keep that LI from appearing to the user. It works perfectly in FF1, N6, IE6 and O7,
   and IE5 and S1.2 do well enough that only anal-retentive nitpickers like myself might notice any rendering artifacts.  */
ul#SubMenu li.invisible { visibility: hidden; }

ul#SubMenu a {
	margin-left: .25em; 
	padding: .3em .3em .3em .8em; 
}

/* This H3 takes the place of the Anchor in the currently selected item. */
ul#SubMenu h3 { 
	margin-left: .25em; 
	padding: .3em .3em .3em .8em;
	font-size: 100%;
	font-weight: bold; 
	display: inline;
}

ul#SubMenu a:hover {
	background-color: #000000;
	color: #ffffff;
}

table, td, th {
	border-color: #000000;
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
}

th { text-align: center; }

td, th { padding: .25em; }

.PrintHeading { display: none; }

/* Print-specific stuff ***************************************/

@media print {
	#LanguagePickerContainer, #MainMenuContainer, #SubMenu { display: none; }
	
	/* This class is used by two headings that mirror the currently selected main & sub menu items. The menus don't
	   show when the page is printed; these take their place. */
	.PrintHeading {
		font-variant: small-caps;
		font-family: serif;
		display: inline; 
	}
	
	body {
		margin: 0px;
		padding: 0px;
		width: 100%;
	}
	
	#ContentBox { margin-left: 0em; }
}