/* this is not the essential part, just so that the page looks nice,
   you'll have your own style... */
body {
        background-color: #ffffff;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: small;
        color: #000000;
        background-color: #ffffff;
        margin: 0px;
        padding: 0px;
        border-style: none;
}
p {
  margin-left: 20px;
  margin-right: 20px;
}
table {
  border-style: none;
  margin: 0;
  width: 100%;
}




/* CSS-ONLY MENU */

/*
I wrote this because some users may have JS turned off after all the
security warnings out there and I want them to see my beautiful menus!! ;-)
This menu RESIZES to all sizes the user chooses (in Mozilla, that's
CTRL-+/- to change the browsers font size very quickly, I do that a lot
for websites with tiny fonts). I found at least one JS/CSS menu implementation
which calculated submenu sizes once during pageload - but when I change my
browser font size AFTER load that does not work! So, don't use fixed PIXEL
sizes (use "em" or "ex" instead) when you have text inside! (positioning the
OUTSIDE of a box is something else of course)

Tested browsers: Mozilla 1.7, Konqueror 3.2.1 - the latter does not work
since it displays the submenus at position "left:0" always (left edge of
screen) which is wrong.
*/

/* License: there is none, it's completely FREE. After all, I looked at
   countless other websites for inspiration myself! */


/* ************ */
/* the menu bar */
/* ************ */

table#navbar
{
  width: 100%;
  background-color: #666666;  /* medium/dark grey */
  border-bottom: 2px solid #000;
  padding: 2px;
  white-space : nowrap;
  font-weight: bold;
  position: relative;
}

#navbar a:link    { text-decoration: none; color: #ffffff; padding: 0 2px; border: 1px solid #666; }
#navbar a:visited { text-decoration: none; color: #ffffff; padding: 0 2px; border: 1px solid #666; }
#navbar a:hover   { text-decoration: none; color: #000000; background-color: #ff9000; border: 1px solid #333; }
#navbar a:active  { text-decoration: none; color: #333333; background-color: #ffffff; border: 1px solid #333; }


/* ****************************************** */
/* the styles and the magic for the sub menus */
/* ****************************************** */

/* Every single menu item that is meant to open a submenu gets its own id,
   see html code. This is necessary, we can't use a class, see the very next
   style which opens the submenu and try that with a class... */
#info, #products, #services, #travel {
  position: relative;
}

/* This shows the submenu! */
#info:hover #menu1, #products:hover #menu2, #services:hover #menu3, #travel:hover #menu4 {
  display: block;
}

/* How the sub-menu will look like when it's open */
#menu1, #menu2, #menu3, #menu4 {
  background-color: transparent;
  position: absolute;
  /* best position to place menu just below the trigger link text, far better
     than absolute values because it also works when users change font sizes
     dynamically */
  top: 1.25em;
  /* left: should be the same as the padding value - see comment there */
  left: -70px;
  /* padding: into this - invisible - area around the menu box the cursor
     can move without the menu disappearing! Change to refelct your own taste.
     This is to overcome the following issue with menus: As soon as the cursor
     leaves the menu by even one pixel it disappears, which makes selecting
     a menu item a pain for most people. So in JavaScript powered menus there
     usually is a timeout of e.g. 300ms before it disappears after the cursor
     is out, and/or it disappears if you click anywhere else. We don't have
     JavaScript so I had to think of something else! Solution: I draw an invisible
     (transparent, i.e. you see the page below so that the user sees the submenu
     only) area around the submenu, and while the cursor is in there the menu stays
     there! Try it, as far as I'm concerned, and I'm picky, this is just as good
     (for me as a consumer of webpages) as the other solutions which need JS.
     The area above the submenu must be 0 of course or you shift the entire menu down!
     Not a problem, no one selects a menu and then goes UP to select something BELOW :-)
     */
  padding: 0 70px 50px 70px;
  min-width: 120px;
  margin: 0;
  display: none;
}

/* create a small space between where the menu starts and the triggering item
   see html code for the menu, this (empty) div is placed just above the UL
   list - this is for beauty, have a look, try setting this large (e.g. 20)
   to see what it does and see how it looks with "0" - if you like "0" you
   can delete this additional div in the html and this rule here */
#menu1 div, #menu2 div, #menu3 div, #menu4 div {
  height: 3px;
  background-color: transparent;
  display: invisible;
}

#navbar ul {
  /* a mozilla/netscape bug makes fixed "width" necessary: overwise li cannot be made to
     occupy the whole length - "20ex" means 20 times the width of an x, set to the max.
     number of characters in your submenus plus a few (e.g. 5) and you're fine. You
     have to set it below for the "li" too!
     What is this for? In Mozilla, without this the lines (see "li" style below)
     did not extend beyond the text to the edge of the submenu box - even with
     "width: 100%" it did not help. Other browsers (e.g. konqueror) had no such
     issue. */
  width: 20ex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-position: inside;
  background-color: #e9e9e9;
  z-index: 100;
}

#navbar li {
  width: 20ex;
  background-color: #e9e9e9;
  border-bottom: 1px dotted #333333;
  border-left: 1px dotted #333333;
  border-right: 1px dotted #333333;
  padding: 2px 4px 2px 4px;
  /* padding value of the "ul" above must be subtracted below - this is
     for the background hover effect - if any! - to be over
     the full length of the "li" from border to border of the "ul"
     This is done slightly different from the same thing for class .mainNav
     below because here we do padding in the "ul" for the border, there we
     don't have a ul-padding/border */
  margin-right: -4px;
  margin-left: -4px;
}
#navbar li:hover { background-color: #ffd000; }

#navbar li a:link    { text-decoration: none; background-color: transparent; color: #000; font-weight: normal; border-style: none; }
#navbar li a:visited { text-decoration: none; background-color: transparent; color: #000; font-weight: normal; border-style: none; }
#navbar li a:hover   { text-decoration: none; background-color: transparent; color: #000; font-weight: normal; border-style: none; }
#navbar li a:active  { text-decoration: none; background-color: transparent; color: #400; font-weight: normal; border-style: none; }

/******** END Header Styles ********/