/* *******************************

Orchid navstyles.css, Version 2.0
CSS by ppk; April 2004
http://www.quirksmode.org

democratic-x.css contains the main styles (where x is the scheme id)

customstyles.css contains the color and border definitions, these are different
for each site

This .css file contains styles that should ONLY work when the browser supports enough
JavaScript for the foldout menus. If the browser doesn't support JavaScript the user
sees the foldout menus directly below their main links.

KNOWN ISSUE: The combination "float: left" and "position: relative" does not work in
Mozilla 1.4 and below, Opera 7.23 and below and Safari 1.0 . 
As a result the foldout navigation of the top menu appears in the upper left corner
of the screen.
Since this bug affects only older versions of minority browsers I decided not to do
anything.

******************************* */



/* *******************************

BASIC POSITIONING 

Every li in the navigation gets position: relative. In itself this does nothing,
but it allows us to position another element (the foldout div) relative to this LI
instead of relative to the entire page.

Every div inside an li (ie. any foldout menu) gets position: absolute and is hidden
from view.

******************************* */

.nav li {
	position: relative;
}

#nav1 li {
	z-index: 5;
}

.nav li div {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

.nav div.foldOut {
	display: block;
	background-color: #ffffff;
	z-index: 10;
	padding: 10px;
	border: 1px solid #000000;
}

/* *******************************

FOLDOUT

The script assigns the class "foldOut" to the div that should fold out. It is visible
and its z-index is set to 100.

In #nav1 (top navigation) the foldout is positioned 18px below the LI, which makes it
appear directly below the link.

In #nav2 (left navigation) the foldout is positioned 75px right of the LI. In addition
I set its width.

******************************* */

#nav1 div.foldOut {
	top: 20px;
}

#nav2 li {
	display: block;
}

#nav2 div.foldOut {
	left: 140px;
	width: 150px;
}
.letters a{
   font-weight: bold;
}