/**
 * menu.css is an example of the css-file to be used by the Dw_menu-library
 * made for CodeIgniter (www.codeigniter.com).
 *
 * It is based on the work of Stu Nichols of whom you can find the works on
 * http://www.cssplay.co.uk. If you are going to use this css-file, adapted
 * or unadapted, you have to keep his copyright in your css-file as stated below.
 * You can use this css-file for free on non-commercial sites. For commercial
 * sites you should contact Stu Nicholls.
 * On his site you have the possibility to give him a donation for his work
 * if you really like it.
 *
 * This css-file is an adapted version of a 3-level dropdown-menu. Menu.css
 * assumes there is a map 'images' parallel to the map 'css' in which itself
 * resides. The map 'images' should contain pictures with the names
 * menu1.jpg ... menu6.jpg. Their functionality is clear. Of course you can
 * make your own set of pictures. All of them should have the same size. If
 * they differ from the current, adapt the heights and widths in this file.
 *
 * Menu.css
 * Adapted
 * @subpackage  Libraries
 * @category    CSS
 * @author      DW Progs
 * @license     LGPL
 * @link        dwprogsdotcom
 * @since       CI Version 1.5.3
 * @version     0.9
 *
 */

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_examples.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */

/* commom style for all browsers */
/*
 * .container -> height = the height of the menu-picture
 */
.container {
text-align:center; background:#eee; border:1px; solid #787; border-width:1px 1px 1px 1px; height:28px;
margin:0 0 0 0;
}
/*
 * .menu -> height = the height of the menu-picture
 */
.menu {
text-align:left; font-family: verdana, sans-serif; position:relative; font-size:13px; font-weight: bold; background:transparent; height:28px; margin:0 auto;
}

.menu ul {
padding:0; margin:0; list-style-type: none;
}
.menu ul li {
float:left; position:relative;
}
.menu ul li.sub_hassubs {background:transparent url(../images/menu1.jpg);}
.menu ul li.sub_nosubs {background:transparent url(../images/menu3.jpg);}
.menu ul li.top_hassubs {background:transparent url(../images/menu5.jpg);}
.menu ul li.top_nosubs {background:transparent url(../images/menu3.jpg);}
/*
 * .menu ul li a etc -> width = the width of the menu-picture - padding-left
 * .menu ul li a etc -> height = the height of the menu-picture
 * .menu ul li a etc -> line-height = the height of the menu-picture - 2 * border
 * Keep the border-size the same everywhere
 */
.menu ul li a, .menu ul li a:visited {
display:block; text-decoration:none; width:130px; height:28px; color:#fff; padding-left:10px; line-height:26px; border:1px solid #787;
}
/*
 * .menu ul li a etc -> width = the width of the menu-picture - padding-left (mentioned before)
 */
* html .menu ul li a, .menu ul li a:visited {
width:130px;
color:#fff;
}

.menu ul li ul {
visibility:hidden; position:absolute; top:0; left:0; height:0; overflow:hidden;
}
.menu table {
margin:-1px; border-collapse:collapse; font-size:13px;
}

/* first line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu ul li:hover a,
.menu ul li a:hover {
color:#000; border:0; background:transparent url(../images/menu6.jpg); border:1px solid #787;
}
.menu ul li a.nodrop:hover,
.menu ul li a:hover a.nodrop {
color:#000; border:0; background:transparent url(../images/menu4.jpg); border:1px solid #787;
}
/*
 * .menu ul li:hover etc -> width = the width of the menu-picture
 * .menu ul li:hover etc -> top = height of the menu-picture
 */
.menu ul li:hover ul,
.menu ul li a:hover ul {
visibility:visible; width:140px; height:auto; position:absolute; top:28px; left:-1px; background:#fff; border:1px solid #787; overflow:visible; font-size:13px;
}
/*
 * .menu ul li:hover ul li a etc -> line-height = the height of the menu-picture
 * .menu ul li:hover ul li a etc -> width = width of picture + 25 but have forgotten why and what for
 * .menu ul li:hover ul li a etc -> w\idth = width of picture - padding-left - padding-right
 */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block; background:transparent; text-decoration:none; color:#fff; height:auto; line-height:28px; padding:0px 10px 0px 10px; width:165px; w\idth:120px; border:1px solid #787;
}
/*
 * .menu ul li:hover ul li a.drop etc -> see .menu ul li:hover ul li a etc
 */
.menu ul li:hover ul li a.drop,
.menu ul li a:hover ul li a.drop {
display:block; color:#fff; height:auto; line-height:28px; padding:0px 10px 0px 10px; width:165px; w\idth:120px; background:transparent url(../images/menu1.jpg);
}
.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {
visibility:hidden; position:absolute; top:0; left:0; height:0; overflow:hidden;
}
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
color:#000; background:transparent url(../images/menu4.jpg); border:1px solid #787;
}
.menu ul li:hover ul li a.drop:hover,
.menu ul li a:hover ul li a.drop:hover {
color:#000; background:transparent url(../images/menu2.jpg); border:1px solid #787;
}
/*
 * .menu ul li:hover ul li:hover ul -> left = width of picture + 2 * border
 */
.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:0; color:#000; left:142px; height:auto; border:1px solid #787;
}
/*
 * Only to be used when there are submenu's on the right side of the total menu
 * Not implemented
 */
/*
.menu ul li:hover ul li:hover ul.left,
.menu ul li a:hover ul li a:hover ul.left {
left:-166px;
}
*/
/*
 * .menu ul li:hover ul li:hover ul li a -> line-height = the height of the menu-picture
 * .menu ul li:hover ul li:hover ul li a -> width = width of the picture + padding-left + padding-right + 15 extra
 * .menu ul li:hover ul li:hover ul li a -> w\idth = w\idth of the picture + padding-left + padding-right + 5 extra
 * Don't really know why this extra width is necessary, except otherwise my text does not fit in.
 */
.menu ul li:hover ul li:hover ul li a,
.menu ul li a:hover ul li a:hover ul li a {
display:block; color:#fff; height:auto; line-height:28px; padding:0px 10px 0px 10px; width:175px; w\idth:145px; border:1px solid #787; border:1px solid #787;
}
* html .menu ul li a:hover ul li a:hover ul li a {padding:0px 10px 0px 10px; color:#fff;}

.menu ul li:hover ul li:hover ul li:hover a,
.menu ul li a:hover ul li a:hover ul li a:hover {
color:#000;
}