/* Implemented with modification for Edward Moss by Creative Infusion */

/*==============================================================================

	GRC multi-level script-free pure-CSS menuing system stylesheet.
   This code is hereby placed into the public domain by its author
   Steve Gibson. It may be freely used for any purpose whatsoever.

	Computed Geometries:	with a default 12px font, 1.0em == 12px and
	1px == 0.08333em.
	Thus, our 98px wide Freeware & Research buttons are 8.166666em wide.

==============================================================================*/


 /*========================= TOP OF THE MENU CASCADE =========================*/

.menu {
	position:relative;        /* establish a menu-relative positioning context */
	float:right;                                    /* play nicely with others */
       z-index: 10;
	display: inline;
	margin:35px 15px 0 0;
	padding:0;
	border:0;
	height:24px;                                  /* the menu's overall height */
	background:#FFFFFF;
	/*font-family: Verdana, Arial, Helvetica, sans-serif;
	/*font-size:0.75em;         /* this (and also below) sets the menu's font size *//* 16*0.75=12px */
	color: #FFF;
}                             


.menu ul {
	padding:0;
	margin:0;
	border:0;
	list-style-type:none;          /* we don't want to view the list as a list */
	line-height:24px;           /* globally set the menu's item spacing. note */
}                               /* 16*1.5=24px */

.menu li {
	float:left;    /* this creates the side-by-side array of top-level buttons */
	position:relative;    /* create local positioning contexts for each button */
	margin:0;
	height:24px;
	cursor:pointer;      /* IE tries to switch back to an I-beam, don't let it */
	cursor:hand;           /* IE5 only knows about "hand", so set it both ways */
}

.menu ul li table {
	margin:-1px 0;              /* IE5 needs -1px top and bottom table margins */
	m\argin:0;               /* re-zero the table margins for everyone but IE5 */
	border-collapse:collapse;      /* IE5 needs this for the sub-menus to work */
}

/*======================== TOP LEVEL MENU DEFINITIONS ========================*/

.menu ul li ul {
	display:none;                  /* initially hide the entire list hierarchy */
}

.menu ul li a,
.menu ul li a:visited {                    /* unselected top-level menu items */
	display:block;
	float:left;
	text-decoration:none;
	height:24px;
}

.menu ul li:hover a,
.menu ul li a:hover {                        /* selected top-level menu items */
	
}
.menu ul li:hover, .menu ul li a:hover{                        /* selected top-level menu items */
}

.menu ul li a{
	display:block; /*makes the anchor fill the list item so clicking any part of the graphical button will work, also allows the anchor to take a width*/
	position:relative;
	height:24px;
	color:#EEE;	/* colour for link text if images are turned off */
	text-decoration:none; /* stop text link underlining if images are turned off */
	border-bottom-style: none; /* tidy up later */
	text-align: left;
	padding:0;margin:0;
	overflow:hidden;
} 

.menu ul li ul li a {
	color: #FFFFFF;
}
.menu ul li a span {
	position:absolute;
	left:0px;
	top:0px;
	display:block;
	height:24px;
	background-repeat: no-repeat;
	background-position:0 0;
	padding:0;margin:0;
}

/* Set width and image on each link and span (if all equal set individual width on anchor instead.
Make sure the combined width doesn't exceed the total width of the menu bar */

.menu ul li a#menu_home{width:56px;}
.menu ul li a#menu_portfolio{width:75px;}
.menu ul li a#menu_biography{width:86px;}
.menu ul li a#menu_news{width:48px;}
.menu ul li a#menu_login{width:53px;}
.menu ul li a#menu_logout{width:53px;}
.menu ul li a#menu_contact{width:73px;}

.menu ul li a#menu_home span{background-image:url(http://www.edwardmoss.co.uk/images/interface/menu_home.gif);
	width:56px;
}
.menu ul li a#menu_portfolio span{
	width:75px;
	background-image:url(http://www.edwardmoss.co.uk/images/interface/menu_portfolio.gif);
}
.menu ul li a#menu_biography span{
	width:86px;
	background-image:url(http://www.edwardmoss.co.uk/images/interface/menu_biography.gif);
}
.menu ul li a#menu_news span{
	width:48px;
	background-image:url(http://www.edwardmoss.co.uk/images/interface/menu_news.gif);
}
.menu ul li a#menu_login span{
	width:53px;
	background-image:url(http://www.edwardmoss.co.uk/images/interface/menu_login.gif);
}
.menu ul li a#menu_logout span{
	width:53px;
	background-image:url(http://www.edwardmoss.co.uk/images/interface/menu_logout.gif);
}
.menu ul li a#menu_contact span{
	width:73px;
	background-image:url(http://www.edwardmoss.co.uk/images/interface/menu_contact.gif);
}

.menu ul li a:link span, .menu ul li a:visited span{ background-position: 0 0;} /* image in base position */
.menu ul li:hover a span, .menu ul li:focus a span, .menu ul li:active a span, .menu ul li a:hover span, .menu ul li a:focus span, .menu ul li a:active span  { 
	background-position: 0 -24px; /* shift image up to selected position */
}
.menu ul li:hover a, .menu ul li:focus a, .menu ul li:active a, .menu ul li a:hover, .menu ul li a:focus, .menu ul li a:active {
	color: #73BFCF; /* selected text colour*/
}

.menu ul li:hover a, .menu ul li a:hover{
	overflow:visible; /* show second level on hover */
}

/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/

.menu ul li:hover ul,
.menu ul li a:hover ul {                           /* 2nd level drop-down box */
	display:block;
	position:absolute;
        z-index: 10;
	margin:0;
	top:24px;              /* place us just up underneath the top-level images */
	left:0px;       /* left-align our drop-down to the previous button border */
	height:auto;      /* the drop-down height will be determiend by line count */
	color:black;                        /* this sets the unselected-text color */
}

.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {                   /* 2nd level unselected items */
	border:0;
	margin:0;
	padding:0;
	height:24px;
	color:#FFF;               /* this sets the unselected drop-down text color */
	width:129px;
	display:block;
	overflow:hidden;
	background:#FFFFFF; /* needed for hover below to work */
}

.menu ul li:hover ul li:hover a, .menu ul li a:hover ul li a:hover{
	color: #73BFCF; /* selected text colour*/
	background:#FFFFFF; /*needed for hover to work */
}

.menu ul li ul li a#submenu_portrait span{background-image:url(http://www.edwardmoss.co.uk/images/interface/submenu_portrait.gif);
	width:129px; /* specify individually for IE6 to get width */
}
.menu ul li ul li a#submenu_corporate span{background-image:url(http://www.edwardmoss.co.uk/images/interface/submenu_corporate.gif);
	width:129px;
}
.menu ul li ul li a#submenu_lifestyle span{background-image:url(http://www.edwardmoss.co.uk/images/interface/submenu_lifestyle.gif);
	width:129px;
}
.menu ul li ul li a#submenu_published span{background-image:url(http://www.edwardmoss.co.uk/images/interface/submenu_published.gif);
	width:129px;
}
.menu ul li ul li a#submenu_personal span{background-image:url(http://www.edwardmoss.co.uk/images/interface/submenu_personal.gif);
	width:129px;
}

.menu ul li ul li a:link span, .menu ul li ul li a:visited span{ background-position: 0 0;} /* image in base position */
.menu ul li ul li:hover a span, .menu ul li ul li:focus a span, .menu ul li ul li:active a span, .menu ul li ul li a:hover span, .menu ul li ul li a:hover span, .menu ul li ul li a:active span{ 
	background-position: -129px 0px; /* shift image left to selected position */
}