/*Script by Dan Pearce 1/20/2010                                                  */
/*                     2/17/2010 cleanup                                          */
/* - 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/    */
/*                                                                                */
/* second horizontal menu has a popdown menu over display area                    */
/* understanding of pop up menues helped by                                       */
/*               http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html#menref  */
/* using list elements <li> with visibility hidden/visible                        */
/* must be careful to keep display area contiguous  so it can be navigated        */
/* so... after many iterations I finally set it as a separate menu                */
/* with position fixed above the location of the display box                      */
#flowspacer{
height:2.0em;      /*height of navigation bar elements - we will have to use this elsewhere*/
}
#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              */
position:fixed;    /* or with "fixed" to keep it from scrolling           */
font-size : 90%;
height:2.0em;      /*height of navigation bar elements - we will have to use this elsewhere*/
margin: 0;	
padding:0;
z-index:3;
}

#navbar {          /*the first navbar (with crumbs) is set to top left*/
width: 957px;      /*+1(margin-left)+1+1(border) =960 Width of page  */
top:0;
left:0;
background:white; /* needed to cover rest of page that might be scrolling past. */
margin-left:1px;
border:1px solid #dedede;  /*note that both are tryint to set a border */
}

#navbarnc {        /*the second navbar (no crumbs) is set to top right of a 960px wide page*/
width: 590px;      /*Width of display area */
top:0;
left:358px;        /*to start above display box*/
background-color:transparent;
}

/*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:0 .75em 0 .75em;   /*have to set padding etc directly to the <a> item */
	                             /*so that selectable area of link will be          */
	                             /*full width and height of navbar                  */
	text-decoration:none;  /*need to reset this from browser default so links aren't underlined*/
	}
#navbarnc li li a {
  padding:none;
	line-height:1.0em;
}

#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 get a border instead of a crumb */
  position:relative;
	float:left;
  border-top: 1px solid #dedede; /* border on left to separate items */
  border-bottom: 1px solid #dedede;
  border-left: 1px solid #dedede;	
}	
#navbarnc img{      /*float text around images inside the navbarnc items like bio*/
    float: left; 
    margin:5px 10px 5px 0px; 
}
#navbarnc img.centered {      /*centered images inside the navbarnc items like website*/
    text-align: center;
		float:none;
    margin-top:5px; 
    margin-left:auto;
		margin-right:auto;
}
	
/*now links and hgeadings at main level*/
#navbar li a, #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*/
/*but for gallery we want this subdued for the main level 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: #c22;   /*greyred */
}

/*now have to reset colors back for lower level menues*/

#navbarnc ul ul li a{ /*links at display level and deeper*/
	color:#00f; /*bright blue*/
}
#navbarnc ul ul li a:visited {
	color:#606; /*bright purple*/
}
#navbarnc ul ul li a:hover {  
  color: #f00;   /*bright red */
}
/*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*/
  top: 2.0em;           /*start at bottom of navbar*/
  left:358px;        /*to start to in display box*/
  width: 580px;
  height: 509px;          
  color: black;
  background-color:white;
  border:1px solid #dedede;
	padding: 5px 10px 5px 10px;         /*need spacing inside box*/
  margin:3px 0 0 0;       /*puts box just below bottom of navbar with no navigational gap when trying to select*/
z-index:3;
} 

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

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

div#navbarnc ul ul li
{margin-bottom: 5px;}

div#navbarnc  ul li.nocrumb ul li a{
display: inline;
margin:0;
padding:0;
}