@@--
@@--  This template implements pure CSS menus.
@@--  These menus require no javascript. However, they are displayed as soon as
@@--  the mouse is over a menu item.
@@--
@@--  This template has been tested on Opera 7 and Firefox 1.0.
@@--  It doesn't work with Internet Explorer 6
@@--
@@--  To use this template, you must do the following in your HTML file:
@@--    * Include this template in the header (between <head> and </head>).
@@--      This is done with an instruction like:
@@--
@@--          @@INCLUDE@@ menu.tcss 1=>menuClass 2=>submenuClass
@@--
@@--      where the parameters are used below
@@--
@@--   * Optional parameters:
@@--
@@--     $3 - Main menu-bar background color
@@--     $4 - Background color of the submenus
@@--     $5 - Background color of the selected menu entry
@@--     $6 - The menu text color
@@--     $7 - The selected menu text color
@@--
@@--   * Create a <ul> list in the body of your document, that describes the
@@--     menu. This list should be put in a <div> with the appropriate id
@@--     attribute.
@@--
@@--        <div class="menuClass">
@@--          <ul>
@@--            <li><h2>Menu1</h2>
@@--                <ul>
@@--                  <li><a href="...">Submenu1</a></li>
@@--                  <li><a href="..." class="submenuClass">Submenu2</a></li>
@@--                      <ul>
@@--                        <li><a href="...">SubSubmenu1</a></li>
@@--                        <li><a href="...">SubSubmenu1</a></li>
@@--                      </ul>
@@--                  </li>
@@--                </ul>
@@--            </li>
@@--          </ul>
@@--
@@--          <ul>
@@--            <li><h2>Menu2</h2>
@@--            ....
@@--
@@--      Note that for submenus, the <a> element should have a specific class
@@--      for proper rendering.
@@--
@@--  These menus will degrade properly on browsers that do not implement style
@@--  sheets, and will simply show a list instead

@@SET@@ MAIN_BG_COLOR       = $3 | #aaa
@@SET@@ BG_COLOR            = $4 | #ccc
@@SET@@ SELECTED_BG_COLOR   = $5 | #ddd
@@SET@@ TEXT_COLOR          = $6 | black
@@SET@@ SELECTED_TEXT_COLOR = $7 | black

<style>
.@_$1_@             { width:100%;
                      float:left; }
.@_$1_@ a, .@_$1_@ h2 { display:block;
                        font:bold 0.7em/1.4em arial,helvetica,sans-serif;
                        border-width:0.1em;
                        border-style:solid;
                        border-color:@_BG_COLOR_@ #888 #555 #bbb;
                        white-space:nowrap;
                        text-indent:3px;
                        margin:0;
                        padding:1px 0px; }
.@_$1_@ a           { background:@_BG_COLOR_@;
		      text-decoration:none; width:100%; }
.@_$1_@ a,
.@_$1_@ a:visited   { color:@_TEXT_COLOR_@; }
.@_$1_@ a:hover     { color:@_SELECTED_TEXT_COLOR_@;
                      background:@_SELECTED_BG_COLOR_@; }
.@_$1_@ a:active    { color:@_SELECTED_BG_COLOR_@; background:@_BG_COLOR_@; }
.@_$1_@ ul          { margin:0; padding:0;
                      position: relative;
                      list-style:none; float:left; width: 6.9em; }
.@_$1_@ li:hover    { cursor:pointer; position:relative; }
.@_$1_@ ul ul       { position:absolute; top:auto; display:none; }
.@_$1_@ ul ul ul    { top:0; left:7.05em; }
.@_$1_@ li:hover ul ul,
.@_$1_@ li li:hover ul ul,
.@_$1_@ li li li:hover ul ul,
.@_$1_@ li li li li:hover ul ul {display:none;}
.@_$1_@ li:hover ul,
.@_$1_@ li li:hover ul,
.@_$1_@ li li li:hover ul,
.@_$1_@ li li li li:hover ul    {display:block;}
.@_$1_@ h2           { color: black;
                       background:@_MAIN_BG_COLOR_@ url('/we_icons/arrow.png')
                       no-repeat bottom right;
                       text-transform:uppercase;
                       margin:0;
                       width:100%; }
.@_$1_@ li          { background: @_BG_COLOR_@; }
.@_$1_@ .@_$2_@     { background: url('/we_icons/arrow.png')
                      no-repeat bottom right;}
</style>
