/* For useful help, see here:															*/
/*	FIDDLE: http://jsfiddle.net/yRJ9g/													*/
/*	SOURCE: https://forum.jquery.com/topic/howto-create-jquery-ui-menu-horizontally		*/

TABLE#menu2016 {
	/* For some reason these styles don't take effect, so they are also set as element-level styles */
	width: 100%;
	position: fixed;
	top: 0px;
	/*	z-index: 600;*/
}

TABLE.topmenu-prefs			{ width: 612px; padding: 10px 16px 0px 16px; overflow: hidden; background-attachment: local; }
IMG.topmenu-prefs-dialog-close.safari { left: -20px; }
DIV#DefaultsApplied			{ visibility: hidden; 
								position: relative; top: -107px; 
								height: 36px; 
								opacity:0.0; 
								border-width:6px; border-radius: 12px;
								font-size: 10pt; font-weight: 700; text-align: center; margin: 4px; padding: 10px; 
								margin: 0px 155px 0px 155px; box-shadow: 0px 0px 20px yellow; }
DIV#DefaultsApplied.shown	{ visibility: visible; }
DIV#DefaultInstructions		{ position: relative; top: 12px; margin:0px; }

DIV.Bloo.dark.site-option	{ margin: 4px; padding: 12px; min-height: 82px; width: 245px; text-align: center; font-size: 8pt;}
TR.site-options				{ vertical-align: top; }
TD.site-options-note		{ font-size: 10pt; font-weight: 400; text-align:center; }
TD.site-options-header		{ margin-top: 6px; font-size: 16pt; font-weight: 600; text-align:center; }
INPUT.site-option			{ margin: 2px 0px 10px 0px; font-size: 12pt; transform: scale(1.3); -webkit-transform: scale(1.4);}

DIV#pageDimmerOverlay {
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  background-color: black;
  opacity:0.22;
}
DIV#pageDimmerOverlay.darken-me {
	transition-property: opacity;
	transition-duration: 1s;
	opacity: 0.8;
}

TR#postMenuRow {
	min-height: 400px;
	height: 0px;
}

TABLE#menu2016 TD {
	text-align: center;
}
TR#MenuRow {
	vertical-align: top;
	min-width: 1020px;
}
TD#MenuCell {
	width: 100%;
	min-width: 812px;
}

#menu.topmenu { 
	text-align: center;
	border: 2px solid #0075B2;
	box-shadow: 0px 0px 9px 9px rgba(10,10,10,0.9);	/* 0075B2 = 00/75/178 */
	border-radius: 8px;
	list-style: none;
	margin-top: 4px;
	padding: 2px;
	font-size: 14pt;
	height: 36px;
	background-color: #002844;
	background: url(/assets/backgrounds/orig_bluefog3.gif); 
	overflow: visible;
	position: relative;
	opacity: 0.95;
	/*	z-index: 800;*/
} 

#menu.topmenu UL, #menu.topmenu.OL {
	float: left;		/* NEW */
}

.ui-widget.ui-widget-content {
	border: none;
}
.ui-widget-content {
	color: #C0C0C0;
	background-color: transparent;
}
UL LI UL LI.level1 {
	float: left;
	height: 30px;
}
UL LI UL LI.level1 DIV.menu-item-label {
	left: -6px;
	float: left;
	border: none;
	background-color: transparent;

}
LI.ui-menu-item.level1 {
	text-align: left;
	padding-left: 28px;
	box-shadow: 6px 6px 4px 3px rgba(10,10,10,0.45);	/* 0075B2 = 00/75/178 */
	background: #002844;
	border-radius: 4px;
	width: inherit; /* calc(inherit+60px);  195px; */
	border: 2px solid #0075b2;
	margin-top: 4px !important;
	margin-bottom: 0px !important; 
	/* padding: 8px 12px 12px 12px; */
	padding: 4px 2px 0px 6px;
	position: relative;
	top: 16px;
/*	z-index: 900;*/
	font-size: 14pt;
	font-weight: 500; 
	white-space: nowrap;
}
LI.level1:hover {
	left: -2px;
	top: 14px;
	box-shadow: 8px 8px 6px 4px rgba(0,0,0,0.75);	/* 0075B2 = 00/75/178 */
	color: white;
 	font-weight: 700;
	background-color: #004060;
}

/* LI.level1 DIV, LI.level1:hover DIV
*/
DIV.menu-site-icon {
	border: none !important; 
	background-color: transparent !important;
}

LI.ui-menu-item.level0 { 
	float: left;
	clear: none;
	font-weight: 500;
	min-width: 86px;
	margin: 3px 2px 6px 2px;
	padding: 2px 4px 2px 4px;
	border: 2px solid transparent; 
	position: relative;
	cursor: default;
} 
LI.ui-menu-item.level0:hover {
	color: white;
	box-shadow: 3px 3px 3px 4px rgba(0,0,0,0.2);
	/* background: url(/assets/backgrounds/sp3k-stars-background.gif); */
	background-color: #004060 !important;
	font-weight: 700;
	border: 2px solid #0075B2; 
	border-radius: 4px;
}

DIV#MainMenuInnerWrapper, DIV#MainMenuInnerWrapper UL LI {
	display: inline-block;
}

DIV#MainMenuOuterWrapper {
/*	width: 100%;			/* EXPERIMENT */
	top: 0px;
	left: 0px;
	/* left: 156px; */
/*	z-index: 110;*/
}

DIV#MainMenuInnerWrapper {
}

LI.underlying {
	position:absolute;	/* Make relative for 'following' doormats */
	z-index: -1;	/* 400;	*/	/* LI.swag-items are at 1000 */
	top: 0px;
	left: -12px;
/*	box-shadow: 6px 6px 4px 3px rgba(10,10,10,0.55);	 */
	box-shadow: 15px 15px 10px 5px rgba(0,0,0,0.75);
/*	background: url(/assets/backgrounds/orig_bluefog3.gif);  */
/* 	border-radius: 8px;
	border: 2px solid #0075B2; */
}
LI.ui-menu-item.level0.icon-only-menu-item {
	border: none;
	min-width: 24px;
	background-color: transparent;
}
LI.ui-menu-item.level0.icon-only-menu-item IMG.hamburger-menu {
	border: none;
	margin: 1px 0px -2px 0px; 
	padding: 0px;
	background-color: silver; 
	width: 24px; height: 24px;
	border-radius: 4px; 
}
LI.ui-menu-item.level0.icon-only-menu-item IMG.hamburger-menu:hover {
	background-color: white;
	box-shadow: 0px 0px 3px 4px rgba(255,255,255,0.6); /* rgba(0,0,0,0.6); for black */
}

DIV.ui-menu-item-wrapper.menu-site-icon {
	float: right;
	clear: none;
	height: 0px;
	width: 0px;
	top: 1px;
	left: -26px;
	padding: 0px;
}
IMG.menu-site-icon {
	border-radius: 3px;
	padding: 0px;
	width: 24px;
}

#MenuSpacer, DIV.page-title						{ transition-duration: 0.5s; }
/* DIV.fast-mover, div.page-title.fast-mover		{ transition-duration: 0s; } */
#MenuSpacer.initial-state						{ margin-top: 0px;}
#MenuSpacer										{ margin-top: 0px; }
#MenuSpacer.homepage, 
#MenuSpacer.initial-state.homepage				{ margin-top: 52px; }
#MenuSpacer.menu-hidable.homepage				{ margin-top: 0px; }
#MenuSpacer.menu-hidable,
#MenuSpacer.initial-state.menu-hidable			{ margin-top: 0px; } 
#MenuSpacer.logo-hidden							{ margin-top: 52px; }
/* #MenuSpacer.logo-hidden.menu-hidable			{ margin-top: 52px; } */
#MenuSpacer.logo-hidden.menu-hidable			{ margin-top: 12px; }	/* Also is overridden for homepage, in homepage.css */
																		/* And possibly also in microbb.css if necessary. */
DIV.page-title									{ margin-top: 52px; }
DIV.page-title.menu-hidable						{ margin-top: 4px; }
DIV.page-title.homepage-page-title				{ margin-bottom:4px; display:none; } 
IMG#SwagContentLoader							{ position: absolute; top: 222px; }
IMG#SwagContentLoader.logo-hidden				{ top: 158px; }
DIV#PageSticky									{ background: rgba(0,117,178,0.7); color: silver;
												  text-align: center; width: 575px; padding: 6px;
												  width: 525px;
												  margin-left: 20px;
												  margin-right: 20px;
												  margin: auto; 
												  margin-bottom: 6px; margin-top: 10px;
												  font-size: 12pt; font-weight: 600;
												  border: 2px solid #DDDDDD; border-radius: 10px;
												  }
DIV#PageSticky.on-homepage						{ margin-top: 4px; margin-bottom: 18px; }
DIV#PageSticky.on-content-page					{ clear:both; margin-top: 8px; margin-bottom: 12px; }
DIV#PageSticky.pulse-border						{ animation-iteration-count: infinite;
												  animation-duration: 0.6s;
												  animation-direction: alternate; 
												  animation-name: pulse-border; }
@keyframes pulse-border {
	0% { box-shadow: 0px 0px 4px 4px; }
	100% { box-shadow: 0px 0px 8px 8px; }
}


A#ResetSiteOptions								{ color: #44FFFF; }

IMG.menu-logo {
	margin: 7px;
	padding-top: 0px;
	width: 90px;	/* was 90px */
	opacity: 1.0;
}
IMG.menu-logo.pulse-logo {
	animation-iteration-count: infinite;
	animation-duration: 0.6s;
	animation-direction: alternate;
	animation-name: pulse-logo;
}
@keyframes pulse-logo {
	0% {transform: scale(1); }
	100% {transform: scale(1.2); }
}
/* IMG.menu-logo:hover { box-shadow: 0px 0px 10px 10px green; } */

DIV#topmenu_loading {
	width: 100%;
	/* opacity: 0.94; */
	margin-left: auto;
	margin-right: auto;
	position: fixed;
	top: 45%;
	transform: translateY(-50%);			/* Moves the DIV up just-more-than-halfway from the 50% Y position */
	-webkit-transform: translateY(-50%);	
}
DIV#topmenu-loading.safari { top: 30%; }	/* Moves loading GIF even higher in Safari. */

TABLE.loader-popup			{ box-shadow: 0px 0px 25px 25px rgba(0,0,0,0.8); /*, 0px 0px 154px 154px rgba(140, 140, 140, 0.85) ; */
								border-width: 5px; border-radius: 30px; /* 125px; = circle */ }
TABLE.loader-popup TD		{ text-align: center;  width: 220px; height: 220px;}
TABLE.loader-popup TD IMG	{ width: 50% }

TABLE.standby IMG.menu-logo {
	/* opacity: 0.55;	Not so sure I like the logo going semi-transparent... */
}

#FadeNoticeWrapper {
	font-size: 12pt; 
	font-weight: 500;
	color: lightgray; 
	height: 0px; 
	padding-top: 2px; 
	margin-left: auto; 
	margin-right: auto; 
	position: relative; 
	top: -12px; 
/*	z-index: 1150;*/
	opacity: 1.0;
	display: none;
}

#FadeNotice {
	width: 290px; 
	margin: inherit; 
	background-color: #003040; 
	opacity: 1.0; 
	padding: 8px; 
	border: 2px solid #0075B2; 
	border-radius: 10px;
}
DIV.site-option.show-glow {
	animation: shadowThrob-opts 0.33s 6;
	animation-direction: alternate;
	-webkit-animation: shadowThrob-opts 0.33s ease-out 6;
	-webkit-animation-direction: alternate;
}

#FadeNotice.show-glow {

	/* Pulse-outward-only edition. 
	animation: shadowThrob 0.7s infinite;
	animation-direction: normal;
	-webkit-animation: shadowThrob 0.7s ease-out infinite;
	-webkit-animation-direction: normal; */

	/* Alternating in/out pulse edition: */
		animation: shadowThrob 0.5s infinite;
		animation-direction: alternate;
		-webkit-animation: shadowThrob 0.5s ease-out infinite;
		-webkit-animation-direction: alternate;
}

@keyframes shadowThrob		{ 0% { box-shadow: none; } 100% { box-shadow : 0px 0px 20px 20px silver; } }
@keyframes shadowThrob-opts	{ 0% { box-shadow: none; } 100% { box-shadow : 0px 0px 4px 4px #CCCC00; } }