/* nav.css for GRD site - wed © Factor of 4, 2007-01-27 */

/*"menu" is used in a div tag to define the menu block and isolate the ul and li definitions from the content areas of the page*/
#menu          { margin: 0; padding: 0 0 1em; position: relative; width: 165px; voice-family: inherit      }
/*"menu ul" defines the overall style for the primary menu - definitions may  conflict with "nav"*/
#menu ul       { list-style: none; margin: 0; padding: 0; position: relative; border-color: #93f }
/*"menu li" defines the style of each menu item in the primary menu -  may conflict with "li first", "li second", etc*/
#menu li   { text-align: left; cursor: default; position: relative; width: 165px; float: left; border-color: #f00 }
/*"menu li ul" defines the overall style of the dropdown menu level one - may conflict with "sub". It's initial display value is set to "none" in order to hide the dropdown until rolled over*/
#menu li ul    { display: none; padding: 0; position: absolute; top: 0; left: 0; width: 30em; border-color: #36f }
/*"menu li>ul"  is a child selector that defines the ul block immediately descendent from a "menu li" tag.*/
/*#menu li > ul { left: auto; border: solid thin #f96 }*/
/*"menu li li" defines */
#menu li li      { font-family: Arial, Helvetica, SunSans-Regular, sans-serif; background-color: #ffc; display: block; margin: -4px 0; padding: 2px 0; left: 165px; width: 18em; float: none; border-color: #396 }
/*"menu li:hover ul" sets the display value to "block" which reveals the downdown menu in standard CSS browsers like Safari and Firefox*/
#menu li:hover ul { display: block }
/*"menu li:over ul" sets the display value to "block" which reveals the downdown menu in non-standard browsers like MSIE. This also need a small piece of JavaScript to work.*/
#menu li.over ul { display: block }
/*"nav a" defines the style of the primary menu when its an anchor link - may conflict with "menu ul"*/
#nav a        { color: black; font-size: 11pt; font-weight: bold; text-decoration: none; position: relative; left: 0 }
/*"nav" defines the style of the first dropdown menu when it's an anchor link. May conflict with "sub"*/
#nav li li a      { color: #060; font-size: 10pt; font-weight: normal; display: block; padding: 0.2em 10px; position: relative; width: auto }
/*"nav" defines the mouseover/hover style of the dropdown menu when it's an anchor link*/
#nav li li a:hover        { text-decoration: underline; background-color: #b3dbe2; padding: 0.2em 5px; border-right: 5px solid #9c0; border-left: 5px solid #ffc }
/*"sub defines*/
/*.sub   { position: relative; top: 0 }
.sub a        { color: green; font-weight: bold; text-decoration: none; background-color: #ffc; margin: 0; position: relative; z-index: 6; left: 11.5em; width: 11.5em; border: none }
.sub a:hover    { text-decoration: underline }*/
/* "first, second, etc' defines the styling line by line for the main nave items. This is useful for adding left  and bottom padding as needed to refine text positioning.*/
li#first      { font-size: 11pt; font-weight: bold; line-height: 120%; margin: 0; padding-left: 10px; position: relative; z-index: 3; left: 0; width: 155px; height: 3em }

li#second     { font-size: 11pt; font-weight: bold; line-height: 120%; margin: 0; padding-left: 10px; position: relative; z-index: 3; left: 0; width: 155px; height: 3em }

li#third     { font-size: 11pt; font-weight: bold; line-height: 120%; margin: 0; padding-left: 10px; position: relative; z-index: 3; left: 0; width: 155px; height: 4em }

li#fourth     { font-size: 11pt; font-weight: bold; line-height: 120%; margin: 0; padding-left: 10px; position: relative; z-index: 3; left: 0; width: 155px; height: 4em }

li#last     { font-size: 11pt; font-weight: bold; line-height: 120%; margin: 0; padding-left: 10px; position: relative; z-index: 3; left: 0; width: 155px; height: 3em }
li.solo  { font-size: 11pt; font-weight: bold; line-height: 120%; margin: 0; padding-left: 10px; position: relative; z-index: 3; left: 0; width: 155px; height: 3em }
/*"a" defines inline text links in their third states: link, visited, and active(hover)*/
a:link { color: #639; text-decoration: underline }
a:visited { color: #639; text-decoration: underline }
a:hover, a:active { color: #6a6; text-decoration: underline }