/*			navmenu.css

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

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

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

body
{
	margin-top: 18px;
	margin-left: 18px;
}

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

#dotspow
{
	position: absolute;
	display: block;
	left: 120px;
	top: 74px;
	height: 659px;
	width: 50px;
	background: url("../images/dotspow50x659.jpg") no-repeat;
}

#dotspow span
{
	display: none;
}

/*=============================
navigation menu
=============================*/
/*
This is the main menu, currently styled to look like a big picture of Eileen surrounded by icons of 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;
	background-color: white;
}
/* Defaults for each item within a sub-menu */
ul#navmenu li ul li
{
	padding: 0.1em;
	text-align: left;
	background-color: white;
}

/* 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
{
	display: block;
}
/* The following rule cancels that for 2nd-level menu items: */
ul#navmenu li ul a
{
	display: inline;
	height: auto;
	xbackground-color: white;
}

/* 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 Banner
-----------------------------*/
ul#navmenu li#sitehead
{
	top: 0px;
	left: 0px;
	/* dimensions of image */
	width: 447px;
	height: 67px;
	/* the image itself */
	background: url("../images/eileengunndotcom447x67.jpg") no-repeat;
}

#sitehead span
{
	visibility: hidden;
	/* display: none; */
}

/*-----------------------------
Stable Strategies and Others
-----------------------------*/
ul#navmenu li#navSS
{
	top: 74px;
	left: 7px;
	width: 126px;
	height: 133px;
	background: url("../images/stablestrategies126x133.jpg") no-repeat top left;
}
ul#navmenu li#navSS a
{
	height: 133px;		/* hyperlink has same height as image */
}
ul#navmenu li#navSS span
{
	visibility: hidden;		/* hide the menu item text */
}

/* sub-menu attributes: */
ul#navmenu li#navSS ul
{
	width: 230px;
	margin-top: -55px;
	margin-left: 80px;
}
/* override the rule above that hides the 1st-level menu item text */
ul#navmenu li#navSS ul span
{
	visibility: visible;
}

ul#navmenu li#navSS ul,
ul#navmenu li#navSS ul li,
ul#navmenu li#navSS ul a
{
	z-index: 100;
}

/* 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. */

/*-----------------------------
Stable Strategies QUOTES
-----------------------------*/
ul#navmenu #sslaud1
{
	top: 220px;
	left: -30px;
	width: 10em;
}
ul#navmenu #sslaud1 a
{
	color: darkslategray;
}
ul#navmenu #sslaud1 cite
{
	color: deeppink;
}
/*-----------------------------*/
ul#navmenu #sslaud2
{
	top: 40px;
	left: 400px;
	width: 10em;
}
ul#navmenu #sslaud2 a
{
	color: darkslategray;
}
ul#navmenu #sslaud2 cite
{
	color: deeppink;
}

/*-----------------------------
Eileen Gunn
-----------------------------*/
ul#navmenu li#navEG
{
	/* position on screen */
	top: 215px;
	left: 0px;
	/* dimensions of image */
	width: 132px;
	height: 76px;
	/* the image itself */
	background: url("../images/eileengunn56x76.jpg") no-repeat;
	background-position: 76px 0px ;
}
/* This makes the hyperlink be as big as the photo so the whole photo appears to be a link */
ul#navmenu li#navEG a
{
	height: 76px;
}
/* Here's where I can suppress the menu item from display.  
However, the text is still in the HTML mark-up and therefore will display in browsers that don't know CSS. 
I'm using "visibility: hidden" instead of "display: none" because although invisible I still want the menu item text to occupy space on the screen so that the hyperlink will function properly. */
ul#navmenu li#navEG span
{
	visibility: hidden;
}

/* Here's where I position the sub-menu on the screen */
ul#navmenu li#navEG ul
{
	width: 129px;
	height: auto;
	margin-top: 10px;
	margin-left: 0px;

	/* If I wanted this sub-menu to be a different color from my default, I'd do that here.
	color: green;
	border-color: green;
	background-color: lime;
	*/
}

/*-----------------------------
Imaginary Friends
-----------------------------*/
ul#navmenu li#navIF
{
	z-index: 0;
	top: 76px;
	left: 156px;
	width: 96px;
	height: 96px;
	background: url("../images/imaginaryfriends96x96.jpg") no-repeat top left;
}
ul#navmenu li#navIF a
{
	xz-index: 0;
	height: 96px;		/* hyperlink has same height as image */
}
ul#navmenu li#navIF span
{
	visibility: hidden;			/* hide the menu item text */
}
ul#navmenu li#navIF a
{
	margin-left: 0;
}
ul#navmenu li#navIF ul
{
	width: 160px;
	margin-top: -75px;
	margin-left: 106px;
}

/*-----------------------------
The Infinite Matrix
-----------------------------*/
ul#navmenu li#navIM
{
	top: 180px;
	left: 156px;
	width: 230px;
	height: 36px;
	background: url("../images/infinitematrix230x36.gif") no-repeat top left;
}
ul#navmenu li#navIM a
{
	height: 36px;		/* hyperlink has same height as image */
}
ul#navmenu li#navIM span
{
	visibility: hidden;			/* hide the menu item text */
}
ul#navmenu li#navIM ul
{
	width: 15em;
	margin-top: -36px;
	margin-left: 245px;
}

/*-----------------------------
Infinite Matrix QUOTES
-----------------------------*/
ul#navmenu #imlaud1
{
	top: 41px;
	left: 180px;
	width: 10em;
}
ul#navmenu #imlaud1 a
{
	color: darkslategray;
}
ul#navmenu #imlaud1 cite
{
	color: deeppink;
}


ul#navmenu #imlaud2
{
	top: -80px;
	left: 180px;
	width: 14em;
}
ul#navmenu #imlaud2 a
{
	color: darkslategray;
}
ul#navmenu #imlaud2 cite
{
	color: deeppink;
}


/*-----------------------------
The Difference Dictionary
-----------------------------*/
ul#navmenu li#navDD
{
	top: 225px;
	left: 156px;
	width: 84px;
	height: 100px;
	background: url("../images/tn-ada84x100.gif") no-repeat top left;
}
ul#navmenu li#navDD a
{
	height: 100px;		/* hyperlink has same height as image */
}
ul#navmenu li#navDD span
{
	visibility: hidden;			/* hide the menu item text */
}
ul#navmenu li#navDD ul
{
	width: 11em;
	margin-top: -90px;
	margin-left: 94px;
}

/*-----------------------------
Nothing Noteworthy: A Diary
-----------------------------*/
ul#navmenu li#navNN
{
	top: 333px;
	left: 156px;
	width: 99px;
	height: 95px;
	background: url("../images/NothingNoteworthy99x95.jpg") no-repeat top left;
}
ul#navmenu li#navNN a
{
	height: 95px;		/* hyperlink has same height as image */

}
ul#navmenu li#navNN span
{
	visibility: hidden;			/* hide the menu item text */
}
ul#navmenu li#navNN ul
{
	width: 9em;
	margin-top: -70px;
	margin-left: 110px;
}

/*=============================
sub-menus
=============================*/
ul#navmenu.navEG li#navEG ul,
ul#navmenu.navSS li#navSS ul,
ul#navmenu.navIM li#navIM ul,
ul#navmenu.navDD li#navDD ul,
ul#navmenu.navNN li#navNN ul,
ul#navmenu.navIF li#navIF 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 blue */
}

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

A {cursor: hand}