
/* replace the ever slightly borked menus used previously */

/** position the menu ( centered nicely ) **/

.expand_nav  { padding-left : 50%       ; 
               z-index      : 100000000 ; }
.menu-center { width        :  780px ;
               margin-left  : -390px ;
               padding-left :   15px ;
               }

/** attach the background image to the menu bar 
    text should default to a size of 12 pixels in the menu and be centered
    the menu bar is exactly 26 pixels high
**/
.expand_nav { background : top left url(../static/shell/nav_top_bg.gif) ;
              background-position : 0px -4px ;
              background-repeat : repeat-x ;

              font-size : 12px ;

              height : 26px ;

              text-align : center ;

              }              

/** make the contained lists render as blocks ( like divs ) so we can properly float and position them 
    each menu button is a list item **/

.level-one-unordered-list { display : block ; }

.level-one-list-item { display      : block ; 
                       float        : left  ; 
                       margin       : 0px   ; 
                       padding      : 0px   ; 
                       margin-right : 8px   ; }

/** position entries in centered menu **/
.menu-entry { float       :       left ;
              height      :       28px ;
              margin-top  :        0px ;
              margin-left :        6px ;
              margin-right:        0px ;
              z-index     : 1000000000 ;
              }

.separator { float  : left ;
             margin-top : -4px;
             width  : 3px  ;
             height : 30px ;
             }

/** menu entries turn a dark color when hovered over **/
.menu-entry:hover { background-color : #001198 ; }


/** position button name in menu entry **/
.menu-entry-name { padding-top    : 5px  ; 
                   padding-bottom : 4px  ; 
                   font-weight    : bold ; }

/** contains the content for a menu entry ( for positioning sake ) 
    this entry is a 0 tall div that lines the bottom of the menu-entry
      so that the menu-content can position itself relative to the top
      of this flat line
**/
.menu-container { display : block ; position : relative ; overflow : visible ; height : 0px ; }

/** position and hide menu content in menu entry **/
.menu-content { display  : none ;
                position : absolute ;
                top : 0px ;
                padding-top : 4px ;
                padding-bottom : 4px ;
                z-index : 1000000000 ;
                }

/** unhide menu content when mouse hovers over menu-entry ( including menu-content after made visible ) **/
.menu-entry:hover .menu-content { position : absolute ;
                                  display : block ;
                                  background-image : url(../static/shell/nav_drop_bg.gif);
                                  text-align : left ;
                                  margin-top : 1px ;
                                  color : black ; }

/** assign width to menu content dropdown by style applied during rendering based on number of desired columns **/
.menu-width-1 { width : 180px ; overflow : hidden ; }
.menu-width-2 { width : 382px ; overflow : hidden ; }
.menu-width-3 { width : 573px ; overflow : hidden ; }
.menu-width-4 { width : 764px ; overflow : hidden ; }


/** menu entry names should be a bit padded, not wrap and, as links,  should be colored white all the time **/
.menu-entry-name { padding-left  : 5px ;
                   padding-right : 7px ; }
.menu-entry-name { white-space : nowrap ; }
.menu-entry-name A:link { color : #FFF ; }
.menu-entry-name A:visited { color : #FFF ; }
.menu-entry-name A:hover { color : #FFF ; }
.menu-entry-name A:active { color : #FFF ; } 

/** menu content consists of a series of lists of entries
    these lists should be floated left and sized such that they
    fit within the menu-width in a horizontal line 
**/
.menu-list {  float : left ; width : 191px ; }

/** give a bit of room on either side of the entries in these lists **/
.menu-list LI { padding-left : 5px ; padding-right : 5px ;}

/** assign styles to the entries contained in the menu-content
      L1 is a level one entry, bolder
      L2 are subentries to L1, subdued colors indicating their placement 
**/
.menu-content .L1 { color : #001198 ; margin-top : 3px ;}
.menu-content .L1:hover { color : #4E60E8 ; }

.menu-content .L2 a { font-weight : normal ; color : #6A6F8F ; margin : 1px 0px ; }
.menu-content .L2 a:hover { color : #DD5401 ; text-decoration : underline ; }


/* vet custom positioning 
   the vet site is ignoring menu entry relative positioning by
   dragging the menu contents from its position relative to the 
   button all the way over to the left side of the menu
   this is done by applying a custom class with a negative margin 
   to each of the 4 column wide menu content dropdowns */

.menu-entry.equipment-menu-entry .menu-content { margin-left :  -80px; }
.menu-entry.supplies-menu-entry  .menu-content { margin-left : -232px; }

/** faux button 
    there is a form made to look like a link in the menu for the contact
    this style accomplishes this
**/
.faux-contact-style { background-color : transparent ;
                      border           : none ;
                      color            : white ;
                      margin-top       : 3px ;
                      padding-bottom   : 4px ;
                      padding-left     : 11px ;
                      padding-right    : 11px ;
                      cursor           : pointer ;
                      font-weight      : bold ;
                      font-size        : 12px ;
                      }
.faux-contact-style:hover { background-color : #001198 ; }

