@charset "utf-8";
/* CSS Document */

/* Credits: CSSplay */
/* http://www.cssplay.co.uk/menus/pro_drop2 */
/*.preload2 {background: url(../images/css_dropdown_menu/button4.png);}*/
.menu2 {padding:2px 0 0 32px; margin:0; list-style:none; height:40px; /*background:#fff url(../images/css_dropdown_menu/button1a.gif) repeat-x;*/ position:relative;}
.menu2 li.top {display:block; float:left; position:relative;}

/* below styling for the main navigation text i.e. 'color' sets the initial colour of the main naviagation text */
.menu2 li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#000; text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 6px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(../images/css_dropdown_menu/down.gif) no-repeat right top;}
.menu2 li a.top_link:hover {color:#fff; /*background: url(../images/css_dropdown_menu/button4.png) no-repeat;*/}
/*.menu2 li a.top_link:hover span {background:url(../images/css_dropdown_menu/button4.png) no-repeat right top;}*/
/*.menu2 li a.top_link:hover span.down {background:url(../images/css_dropdown_menu/button4a.gif) no-repeat right top;}*/

.menu2 li:hover > a.top_link {color:#fff; /*background: url(../images/css_dropdown_menu/button4.png) no-repeat;*/}
/*.menu2 li:hover > a.top_link span {background:url(../images/css_dropdown_menu/button4.png) no-repeat right top;}*/
.menu2 li:hover > a.top_link span.down {background:url(../images/css_dropdown_menu/down_white.gif)/*url(../images/css_dropdown_menu/button4a.gif)*/ no-repeat right top;}


.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul, 
.menu2 :hover ul ul, 
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

/* below styles the dropdown menu */
/* left moves drop downs to the left, top moves them up/down, grey background colour, orange border, width, padding etc */
.menu2 :hover ul.sub {left:11px; top:35px; background: #ccc; padding:3px 0; border:1px solid #f68b22; white-space:nowrap; width:145px; height:auto; /*opacity:0.95;*/
    -moz-border-radius-bottomleft:7px;
		-webkit-border-bottom-left-radius:7px;
    -moz-border-radius-bottomright:7px;
		-webkit-border-bottom-right-radius:7px;
}

/* below styles the list items */
/* height is the vertical space between list items, not sure what width does */
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:100px;}

/* below styles the list item links.  I.e. the drop-down menu links. Width here represents the hover over background colour change */
.menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px; width:145px; line-height:20px; text-indent:6px; color:#000; text-decoration:none; /*border:3px solid #fff; border-width:0 0 0 3px;*/}
.menu2 :hover ul.sub li a.fly {background:#fff url(../images/css_dropdown_menu/arrow.gif) 80px 7px no-repeat;}

/* below styles the list item hover over links */
.menu2 :hover ul.sub li a:hover {background:#333; color:#fff;}
.menu2 :hover ul.sub li a.fly:hover {background:#333 url(../images/css_dropdown_menu/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#333 url(../images/css_dropdown_menu/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; z-index:200; height:auto;}

/* CSS below by Steve. This allows the main navigation text to change colour, depending if the user is on the the relevant page */
/* I.e if user is on one of the 'services' pages then the main navigation heading of SERVICES will be grey (rather than white) */
/* The second part 'a.top_link:hover#aboutus' sets the hover over colour back to white */
/* This works by using the BODY ID tag and each page has the appropriate ID entered, ie. services, about us etc */
/* Firstly the CSS targets the page / the BODY ID, then the CSS rule which sets colur property is targetted */
#homebody #container #navbar-background-middle ul.menu2 li a.top_link#home {color:#444;}
#homebody #container #navbar-background-middle ul.menu2 li a.top_link:hover#home {color:#fff;}
#servicesbody #container #navbar-background-middle ul.menu2 li a.top_link#services {color:#444;}
#servicesbody #container #navbar-background-middle ul.menu2 li a.top_link:hover#services {color:#fff;}
#previousworkbody #container #navbar-background-middle ul.menu2 li a.top_link#previouswork {color:#444;}
#previousworkbody #container #navbar-background-middle ul.menu2 li a.top_link:hover#previouswork {color:#fff;}
#aboutusbody #container #navbar-background-middle ul.menu2 li a.top_link#aboutus {color:#444;}
#aboutusbody #container #navbar-background-middle ul.menu2 li a.top_link:hover#aboutus {color:#fff;}
#contactusbody #container #navbar-background-middle ul.menu2 li a.top_link#contactus {color:#444;}
#contactusbody #container #navbar-background-middle ul.menu2 li a.top_link:hover#contactus {color:#fff;}


	 /*-ms-filter: "alpha(opacity=40)";*/ /* IE8 opacity */
	 /*filter:alpha(opacity=40);*/ 	/* IE's opacity*/
	 /*opacity: 0.4;*/ 	/* Firefox 2+ / CSS3 opacity */