/*			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: 8px;
}

/* this gets defined in global.css; I don't need to override it here */
div#navcol
{
	float: left;
	width: 487px;
/*
	border: 1px dashed red;
	background-color: Yellow;
*/
}

/*-----------------------------
site head
-----------------------------*/
h1#sitehead
{
	margin-left: 42px;
	/* dimensions of image */
	width: 447px;
	height: 67px;
	/* the image itself */
	background: url("../images/eileengunndotcom447x67.jpg") no-repeat;
}

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

/*-----------------------------
news
-----------------------------*/
div#news
{
	position: relative;
	float: left;
	width: 245px;
	margin-left: 15px;
	padding: 5px;
	font-size: small;
	border: 1px solid #CCC; /*light grey*/
}
div#news h2
{
	display: block;
	margin-bottom: .6em;
	font-size: 3em;
	border-bottom: 1px solid #CCC; /*light grey*/
	text-transform: lowercase;
	text-align: right;
}
div#news span
{
}
div#news a:hover
{
	color: rgb(219,16,10);
	color: #F00; /*red*/
	text-decoration: underline;
}
div#news p
{
	margin-bottom: .6em;
	line-height: 1.3em;
}
div#news p.newsimg
{
	float: right;
	margin: 0 0 1ex 1ex;
}
img#nebula
{
	border: 1px solid black;
}

/*-----------------------------
dots & pow
-----------------------------*/
#dotspow
{
	position: absolute;
	display: block;
	left: 170px;
	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 */
	float: left;
	width: 487px;
	height: 659px;
	margin-left: 0px;
	background: url("../images/dotspow50x659.jpg") no-repeat 270px top;
	background-position: 162px;
/*
	border: 1px dashed red;
	background-color: Yellow;
*/
}

/* The first-level menu */
ul#navmenu
{
	position: relative;
	list-style: none;	/* suppress unordered list bullets */
	margin: 0;
	padding: 0;
	height: 560px;
}

/*-----------------------------
1st-level menu items
-----------------------------*/
/* default settings for all top-level menu items (the big icons) */
ul#navmenu li
{
	position: absolute;
	width: auto;
	line-height: 1.2;	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
{
	list-style: none;
	padding: 0.1em;

	/* color: #2F4F4F; /*darkslategray*/
	color: #CCC; /*light grey*/
	border: 1px solid #CCC; /*light grey*/
	background-color: #FFF; /*white*/
}

/* When a menu icon is rolled over, its sub-menu appears.  
Each sub-menu can have an h4 heading. */
/*
ul#navmenu li ul,
ul#navmenu li ul li,
ul#navmenu li ul li a,
ul#navmenu li ul li a span
{
	z-index: 1;
}
ul#navmenu li:hover ul,
ul#navmenu li:hover ul li,
ul#navmenu li:hover ul li a,
ul#navmenu li:hover ul li a span
{
	z-index: 100;
}
*/
ul#navmenu li:hover ul
{
	color: #2F4F4F; /*darkslategray*/
	border-color: #00FF00; /*lime*/
}
ul#navmenu li:hover ul h4
{
	color: #2F4F4F; /*darkslategray*/
}
ul#navmenu li ul h4
{
	font-size: 10pt;
	font-weight: bold;
	background-color: #FFF; /*white*/
}
/* Defaults for each item within a sub-menu */
ul#navmenu li ul li
{
	padding: 0.1em;
	text-align: left;
	background-color: #FFF; /*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;
	background-color: #FFF; /*white*/
}
/*
ul#navmenu li ul a:link
{
	color: #CCC !important; /*light grey* /
}
*/
ul#navmenu li ul a:hover
{
	color: #999 !important; /*dark grey*/
}

/* 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;
	color: #CCC; /*light grey*/
}
ul#navmenu ul li.quote cite
{
	display: block;
	overflow: visible;
	margin-top: 0.4em;
	font-style: normal;
	font-size: 9pt;
	color: #CCC; /*light grey*/
}


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

/*-----------------------------
Stable Strategies and Others
-----------------------------*/
ul#navmenu li#navSS
{
	top: 4px;
	left: 49px;
	width: 126px;
	height: 133px;
	background: url("../images/stablestrategies126x133.jpg") no-repeat top left;
/*
	border: 1px dashed red;
	background-color: Yellow;
*/
}
/* IE ONLY */
* html ul#navmenu li#navSS
{
	left: 0px;
	width: 176px;
	background-position: 49px top;
}
ul#navmenu li#navSS a
{
	height: 133px;		/* hyperlink has same height as image */
}
/* IE ONLY */
* html ul#navmenu li#navSS a
{
	margin-left: 50px;
}
ul#navmenu li#navSS span
{
	visibility: hidden;		/* hide the menu item text */
}

/* sub-menu attributes: */
ul#navmenu li#navSS ul
{
	position: relative;
	width: 105px;
	margin-top: 8px;
	margin-left: -51px;
}
/* IE ONLY */
* html ul#navmenu li#navSS ul
{
	margin-left: -65px;
}
/* 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 a
{
	margin-left: 0;
}
/*
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
{
	display: none;
	top: 220px;
	top: 50px;
	left: -160px;
	width: 120px;
}
ul#navmenu.navSS #sslaud1
{
}
ul#navmenu #sslaud1 a
{
	color: #2F4F4F; /*darkslategray*/
}
ul#navmenu #sslaud1 cite
{
	color: #FF1493; /*deeppink*/
}
/*-----------------------------*/
ul#navmenu #sslaud2
{
	display: none;
	z-index: 100;
	top: -170px;
	left: 430px;
	width: 10em;
}
ul#navmenu.navSS #sslaud2
{
}
ul#navmenu #sslaud2 a
{
	color: #2F4F4F; /*darkslategray*/
}
ul#navmenu #sslaud2 cite
{
	color: #FF1493; /*deeppink*/
}

/*-----------------------------
Eileen Gunn
-----------------------------*/
ul#navmenu li#navEG
{
	/* position on screen */
	top: 215px;
	top: 145px;	left: 42px;
	/* 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: 142px;
	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: #00FF00;
	*/
}

/*-----------------------------
Imaginary Friends
-----------------------------*/
ul#navmenu li#navIF
{
	z-index: 0;
	top: 76px;
	top: 6px;
	left: 198px;
	width: 96px;
	height: 96px;
	background: url("../images/imaginaryfriends96x96.jpg") no-repeat top left;
}
ul#navmenu li#navIF a
{
	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: -95px;
	margin-left: 106px;
}

/*-----------------------------
The Infinite Matrix
-----------------------------*/
ul#navmenu li#navIM
{
	top: 180px;
	top: 110px;
	left: 198px;
	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: -85px;
	margin-left: 105px;
}
ul#navmenu li#navIM ul li
{
	padding-right: 0;
/*
	background-color: yellow;
*/
}

/*-----------------------------
Infinite Matrix QUOTES
-----------------------------*/
ul#navmenu #imlaud1
{
	display: none;
	top: 41px;
	left: 330px;
	width: 90px;
}
ul#navmenu.navIM #imlaud1
{
}
ul#navmenu #imlaud1 a
{
	/* color: #2F4F4F; /*darkslategray*/
	color: #CCC; /*light grey*/
}
ul#navmenu #imlaud1 cite
{
	/* color: #FF1493; /*deeppink*/
	color: #CCC; /*light grey*/
}


ul#navmenu #imlaud2
{
	display: none;
	top: -120px;
	left: 290px;
	width: 100px;
}
ul#navmenu.navIM #imlaud2
{
}
ul#navmenu #imlaud2 a
{
	color: #2F4F4F; /*darkslategray*/
}
ul#navmenu #imlaud2 cite
{
	color: #FF1493; /*deeppink*/
}


/*-----------------------------
The Difference Dictionary
-----------------------------*/
ul#navmenu li#navDD
{
	top: 225px;
	top: 155px;
	left: 198px;
	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;
	top: 263px;
	left: 198px;
	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;
	color: #CCC; /*light grey*/
}

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

ul#navmenu li:hover ul a,
ul#navmenu li ul a:hover
{
	color: #8B008B !important;	/*darkmagenta*/
}

A
{
	cursor: pointer;
}



/*-----------------------------
Stable Strategies and Others
-----------------------------*/
ul#navmenu.navSS li#navSS
{
	background-image: url("../images/stablestrategies126x133.jpg");
}
ul#navmenu.navEG li#navSS,
ul#navmenu.navIM li#navSS,
ul#navmenu.navDD li#navSS,
ul#navmenu.navNN li#navSS,
ul#navmenu.navIF li#navSS
{
	background-image: url("../images/stablestrategies126x133pale.jpg");
}

/*-----------------------------
The Infinite Matrix
-----------------------------*/
ul#navmenu.navIM li#navIM
{
	background-image: url("../images/infinitematrix230x36.gif");
}
ul#navmenu.navEG li#navIM,
ul#navmenu.navSS li#navIM,
ul#navmenu.navDD li#navIM,
ul#navmenu.navNN li#navIM,
ul#navmenu.navIF li#navIM
{
	background-image: url("../images/infinitematrix230x36pale.gif");
}

/*-----------------------------
The Difference Dictionary
-----------------------------*/
ul#navmenu.navDD li#navDD
{
	background-image: url("../images/tn-ada84x100.gif");
}
ul#navmenu.navEG li#navDD,
ul#navmenu.navSS li#navDD,
ul#navmenu.navIM li#navDD,
ul#navmenu.navNN li#navDD,
ul#navmenu.navIF li#navDD
{
	background-image: url("../images/tn-ada84x100pale.gif");
}

/*-----------------------------
Nothing Noteworthy: A Diary
-----------------------------*/
ul#navmenu.navNN li#navNN
{
	background-image: url("../images/NothingNoteworthy99x95.jpg");
}
ul#navmenu.navEG li#navNN,
ul#navmenu.navSS li#navNN,
ul#navmenu.navIM li#navNN,
ul#navmenu.navIF li#navNN,
ul#navmenu.navDD li#navNN
{
	background-image: url("../images/NothingNoteworthy99x95pale.jpg");
}

/*-----------------------------
Imaginary Friends
-----------------------------*/
ul#navmenu.navIF li#navIF
{
	background-image: url("../images/imaginaryfriends96x96.jpg");
}
ul#navmenu.navEG li#navIF,
ul#navmenu.navSS li#navIF,
ul#navmenu.navIM li#navIF,
ul#navmenu.navNN li#navIF,
ul#navmenu.navDD li#navIF
{
	background-image: url("../images/imaginaryfriends96x96pale.jpg");
}

/*-----------------------------
Eileen Gunn
-----------------------------*/
ul#navmenu.navEG li#navEG
{
	background-image: url("../images/eileengunn56x76.jpg");
}
ul#navmenu.navIF li#navEG,
ul#navmenu.navSS li#navEG,
ul#navmenu.navIM li#navEG,
ul#navmenu.navNN li#navEG,
ul#navmenu.navDD li#navEG
{
	background-image: url("../images/eileengunn56x76pale.jpg");
}

/*-----------------------------
un-dim the sub-menus
-----------------------------*/
ul#navmenu.navEH li#navEG ul li,
ul#navmenu.navIF li#navIF ul li,
ul#navmenu.navSS li#navSS ul li,
ul#navmenu.navIM li#navIM ul li,
ul#navmenu.navNN li#navNN ul li,
ul#navmenu.navDD li#navDD ul li
{
	color: #2F4F4F; /*darkslategray*/
	border-color: #00FF00; /*lime*/
}
ul#navmenu.navEH li#navEG ul li a,
ul#navmenu.navIF li#navIF ul li a,
ul#navmenu.navSS li#navSS ul li a,
ul#navmenu.navIM li#navIM ul li a,
ul#navmenu.navNN li#navNN ul li a,
ul#navmenu.navDD li#navDD ul li a
{
	color: #00F;
	border-color: #00FF00; /*lime*/
}



div#imagepreload
{
	clear: both;
}
div#imagepreload img
{
	width: 1px;
	height: 1px;
}

div#quotebox
{
	display: none;
}

/*=============================
page footer
=============================*/
div#footer
{
	clear: left;
	margin-left: 510px;
	font-size: x-small;
}