/*			StableStrategies/navmenu.css

for: Stable Strategies and Others by Eileen Gunn
www.eileengunn.com

This stylesheet affects the main menu on the EileenGunn.com/StableStrategies home page only.
*/

/*=============================
page stuff
=============================*/

/* don't want no stinkin' scrollin on this page */
body
{
	margin-top: 18px;
	margin-left: 18px;
}

/* this gets defined in global.css; I don't need to override it here */
#pagewrapper
{
}

/* I'm suppressing this from display, so it will show up as the main headline only in browsers that don't support CSS */
#sitehead
{
	display: none;
}

/*=============================
navigation menu
=============================*/
/*
This is the main menu, currently styled to look like a big picture of a bomb surrounded by icons linked to webpages.
Without CSS, it looks like a regular unordered list.
Each list item is positioned independently, absolutely on the screen.
Each list item can contain a 2nd-level menu (an unordered list).

The menu structure looks like this:

	<div id="navmenubox"
		><ul id="navmenu"

			><li id="navSS"
				><a href="StableStrategies/index.html"
					><span>Stable Strategies and Others</span
				></a

				><ul
					><li><h4>Stable Strategies and Others</h4></li
					><li><a href="StableStrategies/index.html">Eileen's new short-story collection</a></li
					><li><a href="StableStrategies/praise.html">Praise for Stable Strategies and Others</a></li
					...
				></ul
			></li
		></ul
	></div>

where:

	#navmenubox = the container for the menu (helps with formatting).
	#navmenu = 1st-level menu.

	#navSS = 1st-level menu item, named so we can position it anywhere on the screen.
	#navSS a = the menu item is a hyperlink to a sub-page.
	#navSS a span = menu item text inside a span so we can easily suppress it from display if desired.

	#navSS ul = 2nd-level menu.
	#navSS ul li = 2nd-level menu item.
	#navSS ul li h4 = heading for a group of sub-menu items.
*/

#navmenubox
{
	/* This is the box in which the menu sits.  Not styled at present */
}

/* The first-level menu */
ul#navmenu
{
	list-style: none;	/* suppress unordered list bullets */
	margin: 0;
	padding: 0;
	width: 760px;		/* fill the 800 x 600 screen */
	height: 560px;
}

/*-----------------------------
1st-level menu items
-----------------------------*/
/* default settings for all top-level menu items (the big icons) */
ul#navmenu li
{
	position: absolute;
	width: auto;
	font-size: 9pt;
	font-weight: bold;
	text-align: center;
}

/*-----------------------------
2nd-level menu items
-----------------------------*/
/* Defaults for every sub-menu (every UL that occurs within an LI tag).
Notice that the default is for these sub-menus NOT to be displayed.
When you roll over a top-level menu item, JavaScript turns on the display 
by matching up class names & ids (see the "sub-menus" section far below). */
ul#navmenu li ul
{
	display: none;
	list-style: none;
	padding: 0.1em;

	color: darkslategray;
	border: 1px solid lime;
	background-color: white;
}

/* When a menu icon is rolled over, its sub-menu appears.  
Each sub-menu can have an h4 heading. */
ul#navmenu li ul h4
{
	font-size: 10pt;
	font-weight: bold;
}
/* Defaults for each item within a sub-menu */
ul#navmenu li ul li
{
	padding: 0.1em;
	text-align: left;
}

/* This will enable me to make first-level menu-item hyperlinks as tall as the images they overlay 
so that the entire image will act like a link: */
ul#navmenu li a
{
	position: relative;
	display: block;
}
/* The following rule cancels that for 2nd-level menu items: */
ul#navmenu li ul a
{
	display: inline;
	height: auto;
}

/* Some sub-menu items are actually quotations that appear at various spots on the screen. 
These next two sections describe their default properties */
ul#navmenu ul li.quote
{
 	position: absolute;
	padding: 1em;
	<!-- font-style: italic; -->
	font-size: 10pt;
}
ul#navmenu ul li.quote cite
{
	display: block;
	overflow: visible;
	margin-top: 0.4em;
	font-style: normal;
	font-size: 9pt;
}


/*=============================
customized menu items
=============================*/
/* Here's where each menu item and its sub-menu are positioned & styled. */

/*-----------------------------
page head
-----------------------------*/
/* here's the banner image that forms the headline for the page */
ul#navmenu li#pagehead
{
	display: block;
	top: 0px;
	left: 0px;
	width: 504px;
	height: 67px;
	background: url("../images/pagehead504x67.jpg") no-repeat;
}

ul#navmenu li#pagehead span
{
	display: none;
}
/*-----------------------------
back to site home page
-----------------------------*/
/* The lefthand "GUNN" segment of the page banner is overlaid with a hyperlink to the site's home page */
ul#navmenu li#navHome
{
	top: 0px;
	left: 0px;
	width: 108px;
	height: 39px;
}
ul#navmenu li#navHome a
{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 39px;
	width: 108px;
}
ul#navmenu li#navHome span
{
	visibility: hidden;		/* hide the menu item text */
}

/* sub-menu attributes: */
ul#navmenu li#navHome ul
{
	position: absolute;
	width: 108px;
	top: 30px;
	left: 43px;
	height: 2em;
}
/* override the rule above that hide the 1st-level menu item text */
ul#navmenu li#navHome ul li
{
	padding-top: 1ex;
	padding-bottom: 1ex;
}

/* Next are sub-menu items that are taken out of the flow so they can sit anywhere on the screen.
Each of these items has the class "quote" -- see the rule above for "ul#navmenu ul li.quote" 
that applies to all of them. */


/*-----------------------------
What They're Saying About Stable Strategies
-----------------------------*/
ul#navmenu li#navPraise
{
	top: 74px;
	left: 0px;
	width: 131px;
	height: 100px;
	background: url("../images/AkMouth131x100.jpg") no-repeat;
}
ul#navmenu li#navPraise a
{
	height: 100px;		/* hyperlink has same height as image */
}
ul#navmenu li#navPraise span
{
	visibility: hidden;			/* hide the menu item text */
}
ul#navmenu li#navPraise ul
{
	width: 129px;				/* 2 pixels narrower than the image, because the border is 1px thick */
	margin-top: 10px;			/* come down slightly from the image */
	margin-left: 0px;			/* share the image's left margin */
}

/*-----------------------------
About Eileen Gunn
-----------------------------*/
ul#navmenu li#navGunn
{
	top: 74px;
	left: 145px;
	width: 99px;
	height: 142px;
	background: url("../images/gunn8j-099x142.jpg") no-repeat;
}
ul#navmenu li#navGunn a
{
	height: 142px;		/* hyperlink has same height as image */
}
ul#navmenu li#navGunn span
{
	visibility: hidden;			/* hide the menu item text */
}
ul#navmenu li#navGunn ul
{
	width: 97px;
	margin-top: 10px;
	margin-left: 0px;
}
/*-----------------------------
About Stable Strategies
-----------------------------*/
ul#navmenu li#navAbout
{
	top: 74px;
	left: 254px;
	width: 109px;
	height: 175px;
	background: url("../images/StableStratsCover109x175.jpg") no-repeat;
}
ul#navmenu li#navAbout a
{
	height: 175px;		/* hyperlink has same height as image */
}
ul#navmenu li#navAbout span
{
	visibility: hidden;			/* hide the menu item text */
}
ul#navmenu li#navAbout ul
{
	width: 120px;
	margin-top: 10px;
	margin-left: 0px;
}



/*-----------------------------
On the Road
-----------------------------*/
ul#navmenu li#navStops
{
	top: 74px;
	left: 374px;
	width: 86px;
	height: 103px;
	background: url("../images/GunnStops084x103.jpg") no-repeat;
}
ul#navmenu li#navStops a
{
	height: 103px;		/* hyperlink has same height as image */
}
ul#navmenu li#navStops span
{
	visibility: hidden;			/* hide the menu item text */
}
ul#navmenu li#navPraise a
{
	margin-left: 0;
}
ul#navmenu li#navStops ul
{
	width: 100px;
	margin-top: 10px;
	margin-left: 0px;
}

/*=============================
sub-menus
=============================*/
ul#navmenu.nav0SS li#nav0SS ul,
ul#navmenu.navHome li#navHome ul,
ul#navmenu.navAbout li#navAbout ul,
ul#navmenu.navPraise li#navPraise ul,
ul#navmenu.navGunn li#navGunn ul,
ul#navmenu.navStops li#navStops ul
{
	display: block;
}


ul#navmenu li ul li
{
	position: relative;
	padding: 0.3em 1em;
	font-size: 8pt;
}

/*=============================
links
=============================*/
ul#navmenu a,
ul#navmenu a:link,
ul#navmenu a:visited,
ul#navmenu a:hover,
ul#navmenu a:active
{
	color: blue;	/*rgb(127,125,126);		/* cover dark grey */
}

ul#navmenu ul a:hover
{
	color: darkmagenta;
}