/* ===== 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-bar-placeholder { /* An empty div */
	width: 994px;
	height: 20px;
}
#menu-bar { /* At bottom of html body so it's loaded last, to increase page load speed */
	width: 994px;
	position: absolute;
	top: 83px;
	z-index: 1;
}
.menu-bar-text { /* Could not solve double text issue, so it's just on the real menu bar */
	/*opacity: 0.1;*/
	/*filter: alpha(opacity=20); /* For IE8 and earlier - Fails to work */
	/*text-shadow:  0px 0px 2px #4573b1;*/
	/*background-color: #4573b1;*/
}
ul.menu {
	margin: 0;
	padding-left: 170px;
}
ul.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 movement during hover */
	padding: 0px 1px 9px 1px; /* Bottom prevents gap between li and dropdown */
	margin-top: 10px;
	position: relative;
	font-size: 14px; /* Body is 14px */
}
/* ===== Menu tabs  may be a link or not. */
/*a.menu-tab-anchor {
	color: white;
	padding: 10px 13px;		
}
*/.menu-tab-anchor {
	color: white;
	/* Right/left padding affects .dropdowns left or right that are not -1 */
	padding: 0px 13px; /* Was 0px 15px; for no The Goal */
}
/*li:hover a.menu-tab-anchor {
	color:#161616;
}*/
li:hover .menu-tab-anchor {
	color:#161616;
	/*text-shadow: none;*/
	/*background-color: none;*/
}
/* ===== */
.image-map-area { 
	position: absolute;
	/* border: dotted 1px #000000; /* ======================= Turn on border for testing */
}
.image-map-area:hover {
	border: dashed 1px #000000;
/*	background-color: White;
	opacity: .1;*/
}
ul.menu li:hover {	
	border: 1px solid #777777;  
	/* Border increases width and height in layout by 2px */
	padding: 0px 0 7px 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-causes,  
#dropdown-solutions,  
#dropdown-publications,
#dropdown-videos,
#dropdown-glossary,
#dropdown-general,
#dropdown-goal {  
	top:  auto;
	padding: 10px;
	position: absolute;  
	/* z-index: 1; /* Not necessary, tried it to get Google in page analytics to work better */
	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: -10000px; /* <============== Hide the drop down */
	height: 400px; /* To eliminate 5px gap at bottom for unknown reasons */
}
#dropdown-tools {
	left: -10000px; /* <============== Hide the drop down */
}
#dropdown-causes {
	left: -29000px; /* <============== Hide the drop down */
	width: 901px;
}
#dropdown-solutions {
	left: -36900px; /* <============== Hide the drop down */ 
	width: 901px;
} 
#dropdown-publications {
	left: -46300px; /* <============== Hide the drop down */ 
	width: 901px;
} 
#dropdown-videos {	
	left: -57300px; /* <============== Hide the drop down */ 
	width: 901px;
}
#dropdown-glossary {
	left: -68000px;  /* <============== Hide the drop down */
	width: 941px;
}
#dropdown-general {
	/* Show right: -1px;  Hide with 100000 */
	right: 10000px; /* <============== Hide the drop down  */ 
	width: 721px;	
}
#dropdown-goal {
	/* Show right: -1px; */
	right: 10000px; /* <============== Hide the drop down */ 
	/* No width needed since contains only image. */
}
#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;
}
.menu li:hover #dropdown-paradigm {			left: -1px;   }
.menu li:hover #dropdown-tools {				left: -1px;   }
.menu li:hover #dropdown-causes {			left: -290px; }
.menu li:hover #dropdown-solutions {		left: -375px; }
.menu li:hover #dropdown-publications {	left: -469px; }
.menu li:hover #dropdown-videos {			left: -579px; }
.menu li:hover #dropdown-glossary {			left: -680px; }
.menu li:hover #dropdown-general {			right: -1px;  }
.menu li:hover #dropdown-goal {				right: -1px;  }

/* =============== 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-causes p { /* Same as solutions */
	font-size: 14px; 
	margin: 9px 0;
}
#dropdown-solutions p { 
	font-size: 14px; 
	margin: 9px 0;
}
#dropdown-publications p { 
	font-size: 14px; 
	margin: 9px 0;
}
#dropdown-glossary p { 
	font-size: 12px; 
	margin: 1px 0 0 0;
	line-height: 16px; /* 21px normally with font-size 12px */
}
#dropdown-general p {
	font-size: 14px; 
	margin: 9px 0 0 0;
}

.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; 
}

/* Publications, Video, Glossary are all same width */
.menu-item-wide-left, .menu-item-medium-left  {
	float: left;	
	padding-right: 10px; 
	border-right: 1px solid #959595;
}
.menu-item-wide-left {
	width: 440px;
}
.menu-item-medium-left { /* No longer generic with bkg image */
	width: 300px;
	/*background: url(../images/menu/Dropdown_General_LightBulb.png) top right no-repeat;*/
}
.menu-item-wide-right, .menu-item-medium-right {
	float: right;	
	padding-left: 10px;  
	/* Overlap the right div over the left one for full height vertical line. */
	/*border-left: 1px solid #959595; Assumes left column taller than right*/
	margin-left: -1px;
}
.menu-item-wide-right {
	width: 439px; /* Was 440 */
}
.menu-item-medium-right { /* Only used on General dropdown */
	width: 300px;
	/*background: url(../images/menu/Dropdown_ComingSoon.png) left center no-repeat;*/
}
.menu-item-wide-right .menu-item-section {
	xxmargin-bottom:5px;	
}
/* =========== Publications ========== */
#pubs-most-influential-container {
	position: relative;	
}
#pubs-most-influential {
	position: absolute;
	top: 48px;
	right: -7px;
}

/* =========== Videos ================ */
#dropdown-videos p { 
	font-size: 13px; 
	margin: 9px 0;
	line-height: 110%; /* Normally 150% */
}
#dropdown-videos-dl-part1, #dropdown-videos-dl-part2, #dropdown-videos-dl-part3 {
	font-weight: 600;
	padding-top: 7px;
}
#dropdown-videos-dl-tight p {
	line-height: 90%;
}
#dropdown-videos blockquote {
	margin: 0 0 0 20px;
}

/* Sections */
.menu-item-section-leaftitle {
	font-weight: bold;
	font-size: 15px;
}
.menu-item-section, .menu-item-glossary {
	clear: both;
	margin-bottom: 5px; 
	padding: 4px 10px 4px 10px;
	-webkit-box-shadow: #666 3px 3px 6px;
	-moz-box-shadow: 	  #666 3px 3px 6px;
	box-shadow: 		  #666 3px 3px 6px;	 
}
/* ===== .menu-item-section Links - These have colored backgrounds ===== */
.menu-item-section a:link { 
	color: White; 
	text-decoration: none;
}
.menu-item-section a:visited {
	color: White;  
} 
.menu-item-section a:hover {
	/* color: #FF2D2D; /* Red, this is overly redundant since underlined. */
	text-decoration: underline;
}
.menu-item-section a:active {
	/*color: #990000;*/ 
	text-decoration: none;
}


.bkg-color-brown {  background: #a96f3e; }  /* Orange brown */
.bkg-color-green {  background: #29ad87; }  /* Pastel green */
.bkg-color-blue {   background: #8393ca; }  /* Pastel blue */
.bkg-color-gold {   background: #9E9F3B; }  /* Dark gold */
.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: 240px;
	float: left;
}
#menu-item-glossary-extra {
	float: right;
	width: 620px;
	font-size: 12px;
	line-height: 150%;
	margin: -3px 5px 7px 0;
}
.menu-item-glossary-col {
	float: left;
	width: 200px;
	min-height: 340px; /* Based on tallest column, 17px per row */
	margin: 0 10px 10px 10px;
	border: 1px solid LightGray;
	padding: 5px 5px 8px 8px;
	background-color: White; 
	
	-webkit-box-shadow: #acacac 0px 2px 3px;
	-moz-box-shadow: 	  #acacac 0px 2px 3px;
	box-shadow: 		  #acacac 0px 2px 3px;	
}
#menu-item-glossary-image1 {
	margin: 4px 0 4px 1px;	
}
#menu-item-glossary-image2 {
	float: right;
	margin: 13px 6px 3px 0;	
}
p#menu-item-glossary-footer {
	clear: both;
	font-size: 13px;
	line-height: 13px;
	text-align: center;
}

/* ===== General ===== */
#dropdown-general-lightbulb {
	float: right;
	margin-right: -15px;
	padding-left: -5px;
}

/* ===== For box statements ===== */
#dropdown-tools-box, #dropdown-causes-box {
	/*color: #707070;
	text-shadow: 0 1px 1px #FFFFFF;*/
}
#dropdown-causes-box { /* ===== Causes */
	font-size: 16px;
	line-height: 190%;
	margin: 25px 10px 20px 50px;
}
#dropdown-causes .menu-item-wide-left img {
	margin: 10px 25px 10px 20px;	
}
#dropdown-causes .menu-item-wide-right img {
	margin: 6px 20px 15px 0;	
	float: left;
}
#dropdown-causes .menu-item-wide-right .last-in-list {
	margin-bottom: 10px;
}
#dropdown-causes .menu-item-wide-right p {
	margin-bottom: 12px;
}
#dropdown-solutions .menu-item-wide-right p { /* ===== Causes */
	margin-bottom: 20px;
}
#dropdown-solutions .menu-item-wide-left img {
	margin: 6px 20px 270px 0;	
	float: left;
}
#dropdown-solutions .menu-item-wide-right img {
	margin: 6px 20px 15px 0;	
	float: left;
}
#dropdown-solutions .menu-item-wide-right .last-in-list {
	margin-bottom: 10px;
}
#dropdown-general .menu-item-medium-right {
	width: 400px;	
}
/* ===== Goal links ===== */
#dropdown-goal p a:link {    color: White; }
#dropdown-goal p a:visited { color: LightGray; } 
#dropdown-goal p a:hover { /*color: LightGray;*/ }
#dropdown-goal p a:active {  color: LightBlue; text-decoration: underline; }

/* ===== Goal other ===== */
#tab-goal {
	padding-right: 10px; /* Normally 13px */	
}
p#goal-link1, p#goal-link2, p#goal-link3 {
	position: absolute;
	margin: 0;
	color: #E5E4A9;
	font-size: 14px;
	/*letter-spacing: .05em;*/	
}
p#goal-link1 {
	bottom: 25px;
	right: 30px;
}
p#goal-link2 {
/*	bottom: 20px;
	right: 30px;
*/	display: none;
}
p#goal-link3 {
/*	bottom: 25px;
	right: 30px;*/
	display: none;
}
p#goal-link3 a {
	font-size: 18px;	
}

/* ====== Paradigm links ===== */
#paradigm-index {
	position: absolute;
	bottom: 15px;
	left: 90px;
	width: 600px;
	
	font-size: 22px;
	/*font-weight: 600;*/
	letter-spacing: .05em;	
}
#dropdown-paradigm p a:link { 	color: White; }
#dropdown-paradigm p a:visited { color: LightGray; }
#dropdown-paradigm p a:hover { 	/*color: White;*/ }
#dropdown-paradigm p a:active { 	color: LightBlue; text-decoration: underline; }