/******* /nx/mainmenu.css
 * Copyright 1999-2012 Energy X Systems Ltd. (EXS), All Rights Reserved.
 * Please use this work freely, as you will; however, layout, colours, and form specific to EXS are reserved.
 *
 * Please refer to http://www.grc.com/menudemo.htm for the genisis of this.
 * 
 * This implements a dropdown menu using CSS on a <UL> structure
 * Using 1em = 12px, better decimal rounding then 10px
 *******/

/*======= Colouration =======*/
/*
 * Menu:
 * default text: #000000
 * bg: #c0c0c0 gray-silver
 * tier 1: {normal | hover | selected/here}
 * 	bg: { #c0c0c0 gray-silver | #FFC800 yellowish-hint of orange | #FFC800 }
 *	text: {#FF8800, shadowed #000000 | #303030 grayish | #303030 }
 * tier 2: dropdown 1 {normal | hover | selected/here}
 * 	bg: { #FFC800 | #b3b3b3 | #FFDF69 }
 * 	text: { #303030 | #000000 | #303030 }
 */ 

#topmenu {
    height: 24px; /*2em;*/ /*30px*/
    width: auto;
    margin: 2px 0 0 0; /* top + border := 12px */
    padding: 0;
    padding-left: 145px;  /* push all menu items to the right, space for overlapping logo */
    border-top : #000000 solid 5px;
    border-bottom: #000000 solid 5px;
    font-family: 'Verdana', sans-serif;
    font-weight: 500;
    font-size: 14px;  /* this (and also below) sets the menu's font size => 1em*/
    background-color: #c0c0c0 /* silver-grey */;
    color: #000000;
}

.menu {
    position: relative;        /* establish a menu-relative positioning context */
    /*float: left;*/                                 /* play nicely with others */
    /*width: 100%;*/
    color: #000000;
}

.menu img {
    vertical-align: top;      /* prevent images from being pushed down by text */
}

/*******
 *  NOTES:      REMEMBER!, parameter values cascade =)
 * 
 *  - rendering of 'em' may slightly differ on browsers, depending on how em => px (rounding,etc)
 *  Box: margin | border | padding | inner element
 * 	background colour: includes padding, ends at border
 *
 * Padding: tricky, could be on 'li' or on 'a'
 *  using 'a' to set padding, so all inner 'li' element must pad them selves
 */

/*-=-=-=-=-=-=-=-=-=- TIER 1 - TOP LEVEL MENU -=-=-=-=-=-=-=-=-=- */

/*-=-=-=  parent style to all unordered list elements in menu */
.menu ul {    
    position: absolute;
    z-index:2;
    height: auto;        /* bounded by .menu div */
    margin: 0;
    padding: 0;
    list-style-type: none;          /* we don't want to view the list as a list */
    white-space: nowrap;
    /*clear: both;*/  /* no flow along its sides */
}
/*-=-=-=  parent style to all list item elements in menu */
.menu li {		
    float: left;    /* side-by-side arrangement */
    position: relative;    /* create local positioning context for dropdown menu*/
    margin: 0;
    padding: 0;
}
/*-=-=-=  parent style to all li.here item elements in menu, dropdown will inherit these */
.menu li.here {
    /*border-bottom: #000000 solid 1px;*/
    /*border-top: #000000 solid 1px;*/
    font-weight : 700;
    text-decoration:none;
    text-transform : uppercase;
    text-shadow: none;
    background-color: #FFC800;
    color: #303030;
}
/*-=-=-=  Unselected top-level menu items */
.menu a,
.menu a:visited {                    
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    /*text-shadow: #000000 -1px 1px 1px, #000000 2px 2px 2px, #000000 1px -1px 1px, #000000 -1px -1px 1px;*/ /*colour x y radius*/
    text-shadow: #000000 0px 0px 1px, #000000 1px 1px 0px, #000000 0px 1px 1px, #000000 1px 0px 1px, #d0d0d0 -1px -1px 1px;
    color : #d8d8d8 /*#FF8800;*/  /*#FFC000*/
}
/*-=-=-= style all list item elements within a 'ul' */
.menu ul li {		
    height: auto;
}
/*-=-=-= style all 'a' elements within a 'ul' */
.menu ul li a {		
    display: block;
    /*float:left;*/
    height: auto;
    width: auto;    /* this sets the link to be full width of li (inside of li padding)-- 0 to be only width of text!*/
    padding: 3px 7px 4px 7px;  /*spacing between tier1 menu words: top, right, bottom, left*/
}
.menu ul li a.here {
    padding-bottom: 4px;   /* overlap bottom border for effect */
    text-shadow: none;
    color: #303030;
}
/*-=-=-= active top-level menu item: link */
.menu ul li:hover {        
    border: #000000 solid 1px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #FFC800;
}
/*-=-=-= active top-level menu item: link */
.menu ul li:hover a,
.menu ul li a:hover {
    padding: 2px 6px 5px 6px; /* stop dancing text when border added to 'li' */
    text-shadow: none; /*colour x y radius*/
    color: #303030; /*color: #53455A;*/
}

/*-=-=-=-=-=-=-=-=-=- TIER 2 : 2nd level (drop-down) -=-=-=-=-=-=-=-=-=-*/
.menu ul ul {
    display: none;    /* initially hide the entire list hierarchy */
}
/*-=-=-= 2nd level item marked as here */
.menu ul ul li.here {              
    border-top: #000000 solid 1px;
    border-bottom: #000000 solid 1px;
    text-shadow: none;
    background-color: #FFDF69/*#FFC800*/;
    color: #303030;
}
/*-=-=-= 2nd level drop-down box */
.menu ul li:hover ul,
.menu ul li a:hover ul {                           
    display: block;
    position: absolute;
    top: 1.62em;              /* place us just up underneath the top-level box */
    left: -1px;       /* left-align our drop-down to the previous button border */
    height: auto;      /* the drop-down height will be determiend by line count */
    width: 10.5em;
    border: #000000 solid 1px;
    background-color: #FFC800;  /* this sets the drop-down menu background color */
    color: #303030;                        /* this sets the unselected-text color */
}
/*-=-=-= 2nd level unselected item container */
.menu ul li:hover ul li {                
    width: 10.5em;    /* match 2nd level ul width, minus any 'ul' padding */
}
/*-=-=-= 2nd level unselected items */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {                    
    border: 0;
    /*width: 100%; */   /* this sets the link to be full width of 'li' - inherited*/
    color: #000000;    /* this sets the unselected drop-down text color */
}
/*-=-=-= 2nd level active item container */
.menu ul li:hover ul li:hover{              
    border: 0;   /* undoes border set by '.menu ul li:hover' */
    background-color: #b3b3b3;
}
/*-=-=-= 2nd level active item */
.menu ul li:hover ul li:hover a,
.menu ul li a:hover ul li a:hover {                
    font-weight: 700;
    color: #000000;
}