/* ===== Menu Bar ===== 
   From http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/  */
.menu {
	margin: 0;
	padding-left: 170px;
}
.menu li {
	/* display: inline; 	Fails in DW non liveview, so added next line and the
	   menu-item-left and right ids. Now editable and liveview are almost identical. */
	list-style-type: none;
	padding: 9px 1px 10px 1px; /* Bottom prevents gap between li and dropdown */
	position: relative;
	font-size: 14px; /* Same as body, to make sure */
}
#menu-item-left {
	float: left;
}
#menu-item-right {
	float: right;
}
/* ===== The two anchor styles are redfined for each menu with links. */
/* NEXT - Add .menu-tab-anchor , use to set below. Add to html for each tab. */
a.menu-tab-anchor {
	color: white;
	/* Right/left padding affects .drowdowns left or right that are not -1 */
	padding: 10px 23px;		
}
li:hover a.menu-tab-anchor {
	color:#161616;
}
/*.menu li a { 
	color: white;*/
	/* Right/left padding affects .drowdowns left or right that are not -1 */
/*	padding: 10px 23px; 
}*/
/*.menu li:hover a {  
   color:#161616;  
}*/
/* ===== */
.menu li:hover {	
	border: 1px solid #777777;  
	/* Border increases width and height in layout by 2px */
	padding: 7px 0 9px 0; 
	
	/* Background color and gradients */  
	/*background: #F4F4F4; 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
	background: -moz-linear-gradient(	top, #F4F4F4, #EEEEEE);
	/* Additional, above were in original */
	/*background: -webkit-linear-gradient(top, #F4F4F4, #EEEEEE);
	background: -o-linear-gradient(		top, #F4F4F4, #EEEEEE);
	background: linear-gradient(			top, #F4F4F4, #EEEEEE);*/
	background: url(../images/menu/Dropdown_BrushedMetal.jpg) top center no-repeat;
	 	
	/* Rounded top corners */
	-moz-border-radius: 		8px 8px 0px 0px; 
	-webkit-border-radius: 	8px 8px 0px 0px; 
	border-radius: 			8px 8px 0px 0px; 
}
#dropdown-home,
#dropdown-tools,    
#dropdown-publications,
#dropdown-videos,
#dropdown-glossary,
#dropdown-general,
#dropdown-goal {  
	padding: 10px;
	position: absolute;  
	text-align: left;  
	border: 1px solid #777777;  
	border-top: none;  
	
	/* Background color and gradients */  
	/*background:#F4F4F4;  
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);  
	background: -webkit-linear-gradient(top, #EEEEEE, #BBBBBB);
	background: -o-linear-gradient(		top, #EEEEEE, #BBBBBB);
	background: linear-gradient(			top, #EEEEEE, #BBBBBB);*/
	background: url(../images/menu/Dropdown_BrushedMetal.jpg) top center no-repeat;
  
    /* Rounded Corners, all */  
    -moz-border-radius: 	8px;  
    -webkit-border-radius: 8px;  
    border-radius: 			8px;  
}
#dropdown-home, #dropdown-tools {
	left: -10000px; /* <======= Hide the drop down with -10000 */ 
	/* width: 520px; /* Image width plus left and right margins */
    /* Rounded Corners, not top left */  
    -moz-border-radius: 	0px 8px 8px 8px;  
    -webkit-border-radius: 0px 8px 8px 8px;
    border-radius: 			0px 8px 8px 8px;
} 
#dropdown-publications {
	left: -38000px; /* <======= Hide the drop down */ 
	width: 901px;
} 
#dropdown-videos {
	left: -47000px; /* <======= Hide the drop down */ 
	width: 901px;	
}
#dropdown-glossary {
	left: -59600px; /* <======= Hide the drop down */ 
	width: 901px;	
}
#dropdown-general {
	right: -10000px; /* <======= Hide the drop down */ 
	width: 621px;	
   /* Rounded Corners, not top right */  
   -moz-border-radius: 	  8px 0px 8px 8px;  
   -webkit-border-radius: 8px 0px 8px 8px;
   border-radius: 		  8px 0px 8px 8px;}
#dropdown-goal {
	right: -10000px; /* <======= Hide the drop down */ 
	/* No width needed since contains only image. */
   /* Rounded Corners, not top right */  
   -moz-border-radius: 	  8px 0px 8px 8px;  
   -webkit-border-radius: 8px 0px 8px 8px;
   border-radius: 		  8px 0px 8px 8px;
}
.menu li:hover #dropdown-home {
    left: -1px;
	 top:  auto; /* 1.4em does same thing */
}
.menu li:hover #dropdown-tools {
    left: -1px;
	 top:  auto; 
}
.menu li:hover #dropdown-publications {  
    left: -380px;
	 top:  auto; 
}
.menu li:hover #dropdown-videos {  
    left: -504px;
	 top:  auto; 
}
.menu li:hover #dropdown-glossary {  
    left: -596px;
	 top:  auto; 
}
.menu li:hover #dropdown-general {
    right: -1px;
	 top:  auto; 
}
.menu li:hover #dropdown-goal {
    right: -1px;
	 top:  auto; 
}
/* =============== Formatting of dropdowns =============== */
/* The nomal p font size is 14px. Anything smaller than 12px is hard to read.*/
/* Dropdowns with only images need no id below */
#dropdown-publications p { 
	font-size: 13px; 
	margin: 9px 0 0 0;
}
#dropdown-videos p { 
	font-size: 13px; 
	margin: 9px 0 0 0;
}
#dropdown-glossary p { 
	font-size: 13px; 
	margin: 3px 0 0 0;
}
#dropdown-general p {
	font-size: 13px; 
	margin: 9px 0 0 0;
}
/* Publications, Video, Glossary are all same width */
.menu-item-wide-left {
	width: 440px;
	float: left;	
	padding-right: 10px; 
	border-right: 1px solid #959595;
}
.menu-item-wide-right {
	width: 440px;
	float: right;	
	padding-left: 10px;  
	/* Overlap the right div over the left one for full height vertical line. */
	border-left: 1px solid #959595;
	margin-left: -1px;}
.menu-item-image, .menu-item-image-last {
	float: left;
	-webkit-box-shadow: #666 3px 3px 6px;
	-moz-box-shadow: 	  #666 3px 3px 6px;
	box-shadow: 		  #666 3px 3px 6px;		
}
.menu-item-image { 			margin: 0 15px 20px 0; }
.menu-item-image-last {    margin: 0 15px  5px 0; }
/* Videos */
.menu-item-videos-image {
	background: url(../images/menu/Dropdown_Video_AnselAdamsOnCar.jpg) bottom center no-repeat;
}
/* General is a different width so needs smaller sections. */
.menu-item-medium-left { /* No longer generic with bkg image */
	width: 300px;
	float: left;	
	padding-right: 10px; 
	border-right: 1px solid #959595;
	background: url(../images/menu/Dropdown_General_LightBulb.png) top right no-repeat;
}
.menu-item-medium-right {
	width: 300px;
	float: right;	
	padding-left: 10px;  
	/* Overlap the right div over the left one for full height vertical line. */
	border-left: 1px solid #959595;
	margin-left: -1px; 
}

/* Sections */
.menu-item-section-leaftitle {
	font-weight: bold;
	font-size: 120%;
}
.menu-item-section1, .menu-item-section2, .menu-item-section3, 
.menu-item-section4, .menu-item-glossary {
	clear: both;
	margin-bottom: 10px; 
	padding: .5em 20px .5em 20px;
	-webkit-box-shadow: #666 3px 3px 6px;
	-moz-box-shadow: 	  #666 3px 3px 6px;
	box-shadow: 		  #666 3px 3px 6px;	 
}
.menu-item-section1 { background: #a96f3e; }  /* Orange brown */
.menu-item-section2 { background: #29ad87; }  /* Pastel green */
.menu-item-section3 { background: #8393ca; }  /* Pastel blue */
.menu-item-section4 { background: #95519e; }  /* Pastel purple */

.menu-item-glossary {
	background: #29ad87;
	margin: 0 15px 20px 10px;
	width: 250px;
	float: left;
}
.menu-item-glossary-title {
	float: right;
	font-size: 12px;
	margin: 10px 12px 0 0;
}

/* Better is a spacer class equal to margin-top, allows more reuse */
.menu-item-section3, .menu-item-section4 { margin-top: 12px; }

.menu-item-section-title {
	float: left;
	color: white;
	font-size: 120%;
	font-weight: bold;
	letter-spacing: 1px;
}
.menu-item-section-extra {
	text-align: right;
	color: white;
}
.clear {
	clear: both;	
} 
/* ===== Glossary ===== */
.menu-item-glossary-col {
	float: left;
	width: 188px;
	margin: 0 10px 10px 10px;
	border: 1px solid LightGray;
	padding: 5px 5px 10px 10px;
	background-color: White; /* c9e8de pale green, d5dce8 pale blue */	
}
.menu-item-glossary-col p {
	margin: 5px 0 0 0;
}
/*.menu-item-title {  
    font-size: 170%; /* Same as h1 */
    font-weight: bold; 
    letter-spacing: 1px;  
	 text-align: center;
    margin: 7px 0 14px 0;    
}*/