/*Script by Dan Pearce 1/20/2010                                                     */
/* - using popup menu concept to provide an extended viewing area                    */
/*                                                                                   */
/* concept of using a scalable breadcrumb arrow comes from Veerle Pieters blog       */
/* http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs/       */
/*                                                                                   */
/* I've added a second horizontal menu after the breadcrumbs that has a popdown menu */
/* display box but (unlike my image gallery) it uses list elements so                */
/* it can be navigated -- unfortunately it must be immediately adjacent to the       */
/* parent selection or the browser will let go of the parent as active before the    */
/* the child (display box) has been activated                                        */
/* so... after many iterations I finally set it as a separate menu                   */
/* with position fixed to the location of the display box                            */
/* understanding of pop up menues helped by                                          */
/*                  http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html#menref  */

#navbar, #navbarnc {  /*these will be the first elements on the html page    */
                      /*so postion is being set relative to html page itself */      
                      /*we will be overlaying elements on the page           */
									    /*so we are taking the whole navbar out of flow        */
/*position:absolute; *//*with either absolute to allow it scroll              */
font-size : 90%;
height:2.0em;      /*height of navigation bar elements - we will have to use this elsewhere*/
width: 100%;      /*Width of display area */
background:white; /* needed especially if rest of page is scrolling past. */
border:1px solid #dedede;  /*note that both are tryint to set a border */
z-index:3;
}

#navbar {          /*the first navbar (with crumbs) is set to top left*/
position:fixed;    /* or with "fixed" to keep it from scrolling           */
top:0;
left:0;
}

#navbarnc {        /*the second navbar (no crumbs) is set to top right of a 960px wide page*/
position:fixed;    /* or with "fixed" to keep it from scrolling           */
top:2.0em;
left:0;        /*to start above display box*/
}

/*remove bullets and indents*/
#navbar ul{
list-style: none;
margin: 0;
padding:0;
float:left;
}
#navbarnc ul{
list-style: none;
margin: 0;
padding:0;
float:right;
}

#navbar li a, #navbar li.current, 
#navbarnc li a  { /*top level navbar items*/
  line-height:2.0em;/*height of navigation bar elements*/
  color:#777;       /*gray*/
	padding-left:.75em;   /*have to set padding etc directly to the <a> item */
	padding-right:.75em;  /*so that selectable area of link will be          */
	padding-top:0px;      /*full width and height of navbar                  */
	padding-bottom:0px;
	text-decoration:none;  /*need to reset this from browser default so links aren't underlined*/
	}

#navbar li.crumb {  /*veerle's approach but only used for id=crumb */
	float:left;
	background:url(crumbs.gif) no-repeat right center;
	}		

#navbar li.current{  /* options with id=nocrumb just get a right border */
	float:left;
  border-right : 1px solid #dedede; /* border on right instead of bread crumb icon */
color: #000;   /*black text*/
text-transform: uppercase; /*all upper case*/
	}		

#navbarnc li.nocrumb {  /* options with id=nocrumb just get a right border */
	float:right;
  border-left : 1px solid #dedede; /* border on left to separate items */
	}	
	
/*now links and hgeadings at main level*/
#navbar li a, #navbar h2, #navbarnc li a {
display: block;    /*set these to "block" so we can float them*/
margin: 0;
}


/*in general links are underlined and blue, hovered in red and if already visited they are purple*/
/*we'll make the links subdued for the navbar */

}
#navbar ul li a, #navbarnc ul li a{ /*links at main level and deeper*/
	color:#224; /*greyblue*/
}
#navbar ul li a:visited, #navbarnc ul li a:visited {
	color:#727; /*greypurple*/
}
#navbar ul li a:hover, #navbarnc ul li a:hover {  
  color: #c00;   /*red-even though setting hasn't changed we have to raise the specificity of this*/
}

/*now we can change the location for the second level (and deeper) menu items*/

#navbarnc ul ul {      /*note this amount of specificity affects second level deep (and deeper)*/
position: fixed;  /*fix position on page*/
  left:0;        /*to overlay display*/
  top: 4.0em;           /*start at bottom of navbar and nabarnc*/
  width: 95%;           /*leave room for scroll border and padding*/
  color: black;
  background:white;
  border:1px solid black;
	padding: 5px;         /*need spacing inside box*/
  margin:0;       /*puts box just below bottom of navbar with no navigational gap when trying to select*/
z-index:3;
} 
/*Note: because of IE we can't use child selectors*/
/*So we leave what we have but now tell it that we want to hide any <ul>'s that are */
/*two or more descendant children of the hovered <li> - Yikes! */

/*next we hide the display box and any subitems*/
div#navbarnc ul ul
{display: none;}

/*now to get them back*/
div#navbarnc ul li:hover ul
{display: block;}

#navbarnc li.statement a { 
content: "Sta";
}
#navbarnc li.reviews a { 
content: "Rev";
}
#navbarnc li.resume a { 
content: "CV";
}
#navbarnc li.contact a { 
content: "Adr";
}
.nohand {
display:none;
}
#navbarnc img{      /*reducing size of images inside the navbarnc items like bio*/
height:25%;
width:25%;
}