/* ================================================================ 
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 */
.container4 {
text-align:center; background:#eee url(images/menu-bg.jpg); border:0px solid #a6300c; border-width:0px 0px 0px 0px; height:56px; /* for correct height, the "padding-top" must be SUBTRACTED from the target height size. So, here for example, the real height is 58px because the 2 pixels from the padding-top have been subtracted from the target height of 36, leaving 34. */
width:666px;
margin-left:0; /* this addes margin/space around the menu */
padding-top:2px;
padding-left:30px; /* the actual width is 696, but since the padding-left is ste to 30px the width had to be changed to 666px. THIS IS WHAT WILL PUSH THE MENU OVER TO THE LEFT FOR POSITIONING CORRECTLY OVER THE BACKGROUND IN THE MENU!!! */
font-size: 12px;
color: #f6efda;
}
.menu4 {
text-align:left; font-family: Arial, Helvetica, sans-serif; position:relative; font-size:0.9em;/*size of type in entire menu*/ color: #ffffff;/*color of type in MAIN MENU items with dropdowns*/ background:transparent; width:696px; height:58px; margin-left:0;
}
.menu4 ul {
padding-left:0; margin:0; list-style-type: none;
}
.menu4 ul li {
float:left; position:relative;
}
.menu4 ul li.about {background:transparent url(images/dividing_rule_main.gif) no-repeat right;}/*the "right" here positions icons/graphics to right of menu text*/
.menu4 ul li.services {background:transparent url(images/drop_icon_main.gif) no-repeat right;}
.menu4 ul li.portfolio {background:transparent url(images/drop_icon_main.gif) no-repeat right;}
.menu4 ul li.advice {background:transparent url(images/dividing_rule_main.gif) no-repeat right;}
.menu4 ul li.email {background:transparent url(images/dividing_rule_email.gif) no-repeat right;}
.menu4 ul li.contact {background:transparent url(images/dividing_rule_main.gif) no-repeat right;}
.menu4 ul li.home {background:transparent;}
.menu4 ul li.subprod {background:transparent;}
.menu4 ul li.subprod2 {background:transparent;}
.menu4 ul li.subprod3 {background:transparent;}
.menu4 ul li.subnews {background:transparent;}
.menu4 ul li.subnews2 {background:transparent;}
.menu4 ul li.subnews3 {background:transparent;}
.menu4 ul li.subserv {background:transparent;}
.menu4 ul li.subserv2 {background:transparent;}
.menu4 ul li.subserv3 {background:transparent;}
.menu4 ul li.subserv4 {background:transparent;}
.menu4 ul li.subserv5 {background:transparent;}
.menu4 ul li.subsubl {background:#eee;}
.menu4 ul li.subsubr {background:#eee;}/*this one adds icon to right of sub-submenu item based on offset distance*/

.menu4 ul li a, .menu4 ul li a:visited {
display:block; text-decoration:none; width:90px; height:30px; color:#ffffff;/* MAIN MENU ITEMS color of type without dropdowns*/ padding-left:20px; line-height:29px;
}
* html .menu4 ul li a, .menu4 ul li a:visited {
width:100px; w\idth:90px;/*changes width of area that the main menu individual items resides in, but I believe the width also needs to be changed in the line of code above*/
}

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

/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu4 ul li:hover a,
.menu4 ul li a:hover {
color:#a9fc47; text-decoration:none; border:0;/*this is the attributes of MAIN MENU ITEMS TEXT IN HOVER STATE. The original color was red with this color number... #be0101*/
}
.menu4 ul li:hover ul,
.menu4 ul li a:hover ul {
visibility:visible; width:140px;/*width of pulldown panels*/ height:auto; position:absolute; top:30px; left:-1px; background:#fff; border:1px solid #4e0e08; overflow:visible; 
filter:alpha(opacity=80);/*opacity of dropdown menus panels*/
	opacity: .8;
	-moz-opacity: .8;
}

.menu4 ul li:hover ul li a,
.menu4 ul li a:hover ul li a {
display:block; background:transparent; text-decoration:none; color:#c00; height:auto; line-height:1.5em; padding:5px 10px 5px 15px;/*paddding of dropdown text withot pullouts*/ width:120px; w\idth:115px;/*width of dropdown text without pullout menus*/

filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
}
.menu4 ul li:hover ul li a.drop,
.menu4 ul li a:hover ul li a.drop {
display:block; color:#000; height:auto; line-height:1.5em; padding:5px 10px 5px 15px;/*paddding of dropdown text with pullouts*/ width:170px; w\idth:130px;/*width of dropdown text with pullout menus*/
}
.menu4 ul li:hover ul li ul,
.menu4 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; top:0; left:0; height:0; overflow:hidden;
}

.menu4 ul li:hover ul li a:hover,
.menu4 ul li a:hover ul li a:hover {
color:#ffffff; text-decoration:none; font-weight:bold; background-color:#007ef2;
}/*this is the attributes of the dropdown menu text*/

.menu4 ul li:hover ul li:hover ul,
.menu4 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:0; color:#000; left:150px;/*offset of pulldown's pullout panels on RIGHT SIDE*/ height:auto; border:1px solid #909;
}
.menu4 ul li:hover ul li:hover ul.left,
.menu4 ul li a:hover ul li a:hover ul.left {
left:-170px;/*offset of dropdown's pullout panels on LEFT SIDE*/
}
.menu4 ul li:hover ul li:hover ul li a,
.menu4 ul li a:hover ul li a:hover ul li a {
display:block; color:#00f; height:auto; line-height:1.5em; padding:5px 10px 4px 35px; width:170px; w\idth:140px;
}
* html .menu4 ul li a:hover ul li a:hover ul li a {padding:4px 10px 4px 35px;}

.menu4 ul li:hover ul li:hover ul li:hover a,
.menu4 ul li a:hover ul li a:hover ul li a:hover {
color:#000; text-decoration:underline;
}