/* ===== Menu Bar =====   Starting point from http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/  */
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;
	/* 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;
}
/* ===== */
.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-videos p { 
	font-size: 13px; 
	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;
	margin-left: -1px;
}
.menu-item-wide-right {
	width: 440px;
}
.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;	
}


/* 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-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;	
}
/* ===== For box statements ===== */
#dropdown-tools-box, #dropdown-causes-box {
	/*color: #707070;
	text-shadow: 0 1px 1px #FFFFFF;*/
}
#xxxdropdown-tools-box {
	position: absolute;
	left: 0px;
	top: 30px;
	
	width: 225px;
	font-size: 20px;
	text-align: right;
	line-height: 210%;
}
#dropdown-causes-box { /* ===== Causes */
	font-size: 16px;
	line-height: 190%;
	margin: 25px 10px 20px 50px;
}
#xxxdropdown-causes img {
	-webkit-box-shadow: #666 3px 3px 6px;
	-moz-box-shadow: 	  #666 3px 3px 6px;
	box-shadow: 		  #666 3px 3px 6px;
}
#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;
}
#xxxxxdropdown-solutions img {
	-webkit-box-shadow: #666 3px 3px 6px;
	-moz-box-shadow: 	  #666 3px 3px 6px;
	box-shadow: 		  #666 3px 3px 6px;
}
#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 ===== */
#goal-links {
	position: absolute;
	top: 190px;
	left: 60px;
}
#dropdown-goal p {
	margin-top:30px;
	color: White;
	font-size: 24px;
	letter-spacing: .05em;
}
#dropdown-goal p a:link { 
	color: White;
	text-decoration: none;
}
#dropdown-goal p a:visited {
	color: LightGray;
	text-decoration: none;
} 
#dropdown-goal p a:hover {
	/*color: LightGray;*/ 
	text-decoration: underline;
}
#dropdown-goal p a:active {
	color: LightBlue; 
	text-decoration: none;
}
/* ===== Goal photo link ===== */
#goal-photo-link {
	position: absolute;
	bottom: 10px;
	right: 30px;
}
p#goal-photo-link {
	font-size: 12px;
}