#menu, #menu ul {
	position:fixed;
	z-index: 1000;
clear:both;
margin: 0;
padding: 0;
list-style: none;

}



#menu {
	width: 100%;
	margin: 0;
	padding: 0;
	
	
	/*  
border-top: 4px solid #222222;*/ 
	background: #cccccc;
	background: url();
	background: -moz-linear-gradient(top, #cccccc 0%, #717171 100%);             /********************/
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #717171));
	background: -webkit-linear-gradient(top, #cccccc 0%, #717171 100%);
	background: -o-linear-gradient(top, #cccccc 0%, #717171 100%);
	background: -ms-linear-gradient(top, #cccccc 0%, #717171 100%);
	background: linear-gradient(to bottom, #cccccc 0%, #717171 100%);


filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#717171', GradientType=0 );                                                    /********************/
	box-shadow: 1px 1px 4px #333;

}
 /*  
*/ 
#menu:before, #menu:after {
content: "";
display: table;
}

#menu:after { clear: both; }

#menu { zoom: 1; }

#menu li {
float: left;
border-right: 1px solid #222;
position: relative;

}

#menu li:last-child {border-right:none;}

#menu a {
	
/*height:12px;	 added by me tomake menu smaller */ 
float: left;
padding: /* padding increases height of menu items */7px; /* 12 px into 320px x100 = 3.75% NOT WORK!!!!!*/
padding-left:10px;
padding-right:10px;
padding-top:7px;
padding-bottom:7px;
 /*12px;*/
 /* padding increases width of menu items, 12px left, 12 px right */
 /* changed by me tomake padding smaller */
padding-right: 12px\9; /* fix 3px jog in IE8 and below */ 
 
color: #FFF;/* colour of text on menu bar = WHITE */  

font-size: 10px; /* IE8 and below */  
text-decoration: none;
-moz-transition: all 1s; /*Mozilla*/
-webkit-transition: all 1s; /*Safari*/
-o-transition: all 1s; /*Opera*/
-ms-transition: all 1s; /*IE10*/
transition: all 1s;
}

#menu li:hover > a {
	
color: #FFF; /* colour of text on menu bar WHEN HOVER = WHITE?????????????? */ 
background-color: #666;/*#34836E;that dark green before**/                     /********************/
background-image: -o-linear-gradient(transparent, black);
background-image: -webkit-linear-gradient(transparent, black);
background-image: -moz-linear-gradient(transparent, black);
background-image: -ms-linear-gradient(transparent, black);
background-image: linear-gradient(transparent, black);
}

*html #menu li a:hover { /* IE6 only */ color: #FFF; background-color:#666;/*#34836E;*that dark green**/ } /********************/

/**drop down Sub-Menu**/
#menu ul {
margin: 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 45px;
left: 0;
z-index: 9999;
background: #cccccc;/*light grey*//********************/
background: url();
background: -moz-linear-gradient(top, #cccccc 0%, #717171 100%); /********************/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #717171));
background: -webkit-linear-gradient(top, #cccccc 0%, #717171 100%);
background: -o-linear-gradient(top, #cccccc 0%, #717171 100%);
background: -ms-linear-gradient(top, #cccccc 0%, #717171 100%);
background: linear-gradient(to bottom, #cccccc 0%, #717171 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#717171', GradientType=0 );                                         /********************/
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}

#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}

#menu ul ul {
top: 0;
left: 100%;/*sub-sub-menu staggered to the rightof sub menu by this value, waschanged from 150 px */
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
	
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#menu ul a {
	padding: 10px;
height: 10px;
_height: 10px; /*IE6 only*/

height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#menu ul a:hover {
background-color: #666;/*#34836E;*that dark green**/  /********************/                                           
background-image: -o-linear-gradient(transparent, black);
background-image: -webkit-linear-gradient(transparent, black);
background-image: -moz-linear-gradient(transparent, black);
background-image: -ms-linear-gradient(transparent, black);
background-image: linear-gradient(transparent, black);
-o-transition: background-color 1s;
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
-ms-transition: background-color 1s;
transition: background-color 1s;
}

#menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;

}

#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #FFF;
}

#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after { border-bottom-color: #333;/*#34836E;*that dark green**/ }         /********************/

#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;                                                           /********************/
border-bottom-color: transparent;
}

#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
/* screens bigger than 640 */
@media screen and (min-width: 640px) {
	#menu, #menu ul {
	height:auto;
}
#menu a {
	/*height:12px;	 added by me tomake menu smaller */ 
float: left;
/* padding increases height of menu items */
font-size: 20px; /* IE8 and below ONLY */
height:auto;; /* BLACK LINES IN BETWEEN */
padding-left:20px;
padding-right:20px;
}
#menu ul a {
	/*padding: 15px;*/
height: auto; /* height between horiz black lines insub menu items */
}
}
/* the height of menu, menu items, and sub-menu items is auto, so that the height of these boxes depends on the font-size plus any padding added to take the text away from the edges of the boxes.
when the viewport exceeds 640px across, the font size is increased to 30 px to accomadate the increased screen size, the dimensions of  menu, menu items, and sub-menu items, swells accordingly */