/* ===== Menu Bar =====   Starting point 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 bottom can't be less than 9px, to prevent movenent during hover */
	padding: 10px 1px 9px 1px; /* Bottom prevents gap between li and dropdown */
	position: relative;
	font-size: 16px; /* Body is 14px */
}
/* ===== Menu tabs  may be a link or not. */
a.menu-tab-anchor {
	color: white;
	/* Right/left padding affects .dropdowns left or right that are not -1 */
	padding: 10px 13px;		
}
.menu-tab-anchor {
	color: white;
	/* Right/left padding affects .dropdowns left or right that are not -1 */
	padding: 0px 13px;		
}
/*li:hover a.menu-tab-anchor {
	color:#161616;
}*/
li:hover .menu-tab-anchor {
	color:#161616;
}
/* ===== */
.menu .dropdown {   /* ================================== For hover-intent.js use */
  display: none;  
}
.menu li.hovering .dropdown { 
  display: block;  
}

.menu li:hover {	
	border: 1px solid #777777;  
	/* Border increases width and height in layout by 2px */
	padding: 8px 0 9px 0; 
	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-paradigm,
#dropdown-tools,  
#dropdown-solutions,  
#dropdown-publications,
#dropdown-videos,
#dropdown-glossary,
#dropdown-general,
#dropdown-goal {  
	padding: 10px;
	margin-top: 2px;
	position: absolute;  
	text-align: left;  
	border: 1px solid #777777;  
	border-top: none;  
	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-paradigm, #dropdown-tools {
	padding: 0;
	/* 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-paradigm img {
	border: none;	
}
#dropdown-paradigm {
	left: -1px; /* <======= Hide the drop down */
}
#dropdown-tools {
	left: -10000px; /* <======= Hide the drop down */
}
/* The 4 wide dropdowns use automatic centering via javascript. 
   Position fixed required to avoid horizontal scrollbar. */
#dropdown-solutions, #dropdown-publications, #dropdown-videos, #dropdown-glossary {
	/* position: fixed; /* Comment out to get pages to display without menus in DreamWeaver <=============<<< */
}	
#dropdown-solutions {
	top: -10000px;	
	left: -29800px; /* <======= Hide the drop down */ 
	width: 901px;
} 
#dropdown-publications {
	top: -10000px;	
	left: -38000px; /* <======= Hide the drop down */ 
	width: 901px;
} 
#dropdown-videos {	
	top: -10000px;	
	left: -51600px; /* <======= Hide the drop down */ 
	width: 901px;
}
#dropdown-glossary {
	top: -12400px; /* <======= Hide the drop down 124px */
	left: -63400px;  
	width: 941px;
}

#dropdown-general, #dropdown-goal {
   /* 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-general {
	/* Show right: -1px; */
	right: 10000px; /* <======= Hide the drop down */ 
	width: 621px;	
}
#dropdown-goal {
	/* Show right: -1px; */
	right: 10000px; /* <======= Hide the drop down */ 
	/* No width needed since contains only image. */
}


.menu li:hover #dropdown-paradigm {
    left: -1px;
	 top:  auto; /* 1.4em does same thing */
}
.menu li:hover #dropdown-tools {
    left: -1px;
	 top:  auto; 
}
.menu li:hover #dropdown-solutions {
    /*left: -298px;*/
	 top:  auto; 
	 position: fixed;
}
.menu li:hover #dropdown-publications {  
    /*left: -400px;*/
	 top:  auto; 
	 position: fixed;
}
.menu li:hover #dropdown-videos {  /* <================================= */
   /*left: -516px;*/
	top:  auto; 
	position: fixed;
}
.menu li:hover #dropdown-glossary {  
    /* left: -644px; /* Was 634 to center in FF */
	 top:  auto; 
	 position: fixed;
}
.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-solutions p { 
	font-size: 13px; 
	margin: 9px 0;
}
#dropdown-publications p { 
	font-size: 13px; 
	margin: 9px 0;
}
#dropdown-videos p { 
	font-size: 13px; 
	margin: 9px 0;
}
#dropdown-glossary p { 
	font-size: 12px; 
	margin: 3px 0 0 0;
	line-height: 18px; /* 21px normally with font-size 12px */
}
#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;
}
.float-left {
	float: left;
	/*width: 215;*/	
}
.float-right {
	float: right;
	/*width: 215;*/	
}
.clear-both {
	clear: both;	
} 
.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: 5px 15px 20px 0; }
.menu-item-image-last {    margin: 0px 15px  5px 0; }
/* Videos */
img.center {
	display: block;   
	margin-left: auto;  
	margin-right: auto; 
}
/* 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: 16px;
}
.menu-item-section, .menu-item-glossary {
	clear: both;
	margin-bottom: 10px; 
	padding: 5px 10px 5px 10px;
	-webkit-box-shadow: #666 3px 3px 6px;
	-moz-box-shadow: 	  #666 3px 3px 6px;
	box-shadow: 		  #666 3px 3px 6px;	 
}
.bkg-color-brown {  background: #a96f3e; }  /* Orange brown */
.bkg-color-green {  background: #29ad87; }  /* Pastel green */
.bkg-color-blue {   background: #8393ca; }  /* Pastel blue */
.bkg-color-purple { background: #95519e; }  /* Pastel purple */

/* 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, .menu-item-section-extra {
	color: white;
	font-size: 14px;
	font-weight: normal;
	/*letter-spacing: .05em;*/	
	/*word-spacing: 2px;*/
}
.menu-item-section-title {
	float: left;
	text-transform: uppercase;	
}
.menu-item-section-extra {
	text-align: right;
}
/* ===== Glossary ===== */
.menu-item-glossary {
	margin: 2px 0px 20px 10px;
	width: 250px;
	float: left;
}
.menu-item-glossary-extra {
	float: right;
	width: 620px;
	font-size: 12px;
	line-height: 150%;
	margin: -3px 12px 7px 0;
}
.menu-item-glossary-col {
	float: left;
	width: 200px;
	margin: 0 10px 10px 10px;
	border: 1px solid LightGray;
	padding: 5px 5px 8px 8px;
	background-color: White; 
}