/* --- Stellafane Home Page Styles --- */

/* --- Menu Bar --- */
nav { width:100%; }
ul#mb {
	display: inline-flex; flex-flow: row wrap; justify-content: space-around; row-gap: 0.5rem;
	width: 48rem; margin: .7rem 1rem .7rem 1rem;
	box-sizing: border-box;
	border-top: 1px silver solid; border-left: 1px silver solid; box-shadow: 5px 5px 5px 0px gray;
	z-index: 100;
}
ul#mb li {
	position: relative; /* height: 43px; */
	margin: 0 3px 0 3px;
	text-align: center; /* font-size: 10.5pt; */
	color: #000; font-weight: bold;
    text-shadow: 1px 1px 1px #ddd;
	list-style: none; padding: 0px;
}
ul#mb li a.mb1 { padding-top: 8pt; padding-bottom: 8pt; } /* Single line level 1 anchors */
ul#mb li a {
	display: block;
	padding: 2px 6px 0 6px;
	color: black;
    border-radius: 10px;
    text-decoration: none !important;
}
ul#mb li:hover a, ul#mb li.hover a { text-decoration: underline; }
ul#mb li:hover, ul#mb li.hover {
	background: #ffd0ff;
	background: linear-gradient( to bottom, #ffe7ff, #f1c0f1 );
	border: 1px gray solid;
    box-shadow: 1px 1px 2px 0px gray inset, -1px -1px 2px 0px #ccc inset;
}

/* Menu Bar level 2 list dropdowm */
ul#mb ul {
	visibility: hidden;
	margin: 0; padding: 0; width: auto;
	position: absolute; top: 44px; left: 20px;
	z-index: 105;
	border: none;
    border-radius: 10px;
    box-shadow: 10px 10px 10px gray;
	background: #f0f0f0;
}
ul#mb hr { margin: 0; }
ul#mb ul.mbleft { left: auto; right: -15px; }
ul#mb ul.mbnext { left: auto; right: -80px; }
ul#mb li:hover ul, ul#mb li.hover ul { visibility: visible; }
ul#mb li ul li {
	float: none;
	margin: 0px;
	padding: 0px;
	height: auto;
	min-width: 150px; width: auto;
	border:none; border-radius: 0;
}
ul#mb li ul li.subitem a {
	font-size:smaller; padding-left: 2em; padding-top: 0; margin-top: 0;
}
ul#mb li:hover ul li, ul#mb li.hover ul li
	{ background: none; border: none; box-shadow: none; }
ul#mb li ul li a {
	color: #333;
	text-align: left;
	font-weight: normal;
	white-space: nowrap;
	padding: 4px 8px;
	background: #f0f0f0;
	border-left: 1px gray solid; border-right: 1px gray solid;
    border-radius: 0px;
	margin-bottom: -1px;
	text-decoration: none;
}
ul#mb li ul li a.hl { font-weight:bold; }
ul#mb li:hover ul li a, ul#mb li.hover ul li a { text-decoration: none; }
ul#mb li ul li a:hover { background-color: #ffd0ff; text-decoration: underline; }
ul#mb ul li:first-child a {
    border-top-left-radius: 10px; border-top-right-radius: 10px; border-top: 1px gray solid;
}
ul#mb ul li:last-child a {
    border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom: 1px gray solid;
}
/* li.cb is the CLose Button in the drop-down menues, needed for mobile devices */
li.cb hr { color: silver; background-color: silver; }
li.cb a { text-align: center !important; color: #888 !important; font-style: italic; font-size:smaller !important; }

/* Homepage Card Area Styles */

.card {
	box-sizing: border-box;
	padding: 0;
	background: #dad2c1; /* Old browsers */
	background: linear-gradient(to bottom,  #f7eed9 0%,#dad2c1 50%,#bfb8aa 100%); /* W3C */
	border-top: 1px silver solid; border-left: 1px silver solid;
	border-bottom: 1px gray solid; border-right: 1px gray solid;
}
.cardHdr {
	border-radius: 20px 20px 0 0;
	background-color: #FFC6FE;
	border-bottom: 1px black solid;
    box-shadow: 2px 2px 2px 0px #FFDDDD inset, -2px -2px 2px 0px gray inset;
	padding: 2px 0px 4px 0px;
	margin-bottom: 3px;
	text-align: center;
	letter-spacing: 3pt;
}
.cardHdr a { color: navy; }
.cardHdr a:hover { color: blue; }
.cardPink {
	background: #ffceee;
	background: linear-gradient(to bottom, #ffceee 0%, #dd93c4 100%);
}
.cardInner { padding: 8px; text-align: center; }
.cardInner h1 {
	text-align:center;
	color: navy;
	margin: 0;
    text-shadow: 3px 3px 3px silver;
}
.cardInner p { text-align: center; }

#NewsContent { padding: 0 10px 5px 10px; }
#NewsContent h6 { margin: 12px 0 2px 0; }
#NewsContent h6:first-child { margin-top: 0; }
#NewsContent p  { margin: 0 0 3px 0; text-align: left; }
#NewsContent span { background-color: #ffCCff; }
#newsBottom { position: absolute; bottom: 0; text-align: center; font-style: italic; width: 95%; padding-bottom: 8px; }

#social a { padding: 6px 10px; border: 1px gray solid; border-radius: 1rem; }
#social a:hover { background-color: var(--STMpink); }

/* Wide Device Default Styles */
	ul#mb { border-radius: 10px; padding: 4px; }
	ul#mb { background: #dad2c1; } /* Backup if browser can't do gradients */
	ul#mb { background: linear-gradient(to bottom, #f7eed9 0%,#dad2c1 50%,#bfb8aa 100%); }
	ul#mb li { font-size: 0.875rem; height: 2.7rem; border: 1px #AAA solid; border-radius: 10px; }
	ul#mb li ul li a { font-size: 1.0rem; }
	ul#mb ul { position: absolute; top: 44px; left: 20px; }
	ul#mb li ul li a { 	padding: 4px 8px;}
	.card { width:  48.5%;  border-radius: 1rem; }
    .cardHdr { border-top-left-radius: 10px; border-top-right-radius: 10px; }
	.cardInner h1 { font-size: 1.5rem; }
	.cardInner h1.FounderH1 { font-size: 2rem; }
	.card p, .cardeHdr { font-size: 1.0rem; }
	.conv { width: 48% !important; }
	div#NewsContent h6 { font-size: 0.9rem; }
	div#NewsContent p  { font-size: 0.8rem; }

/* Narrow Device Styles*/
@media only screen and ( max-width: 480px ) {
	ul#mb { border-radius: 1rem; padding: 6px 0; background: #dad2c1; }
	ul#mb li { font-size: 1.5rem; height: 4rem; border: 2px #AAA solid; border-radius: 20px; min-width: 10.5rem; }
	ul#mb li ul li a { font-size: 2.0rem; }
	ul#mb ul { position: absolute; top: 5rem; left: 1rem; }
	ul#mb li ul li a { 	padding: 16px 8px; }
	.card { width: 100%; border-radius: 2rem; }
    .cardHdr { border-top-left-radius: 2rem; border-top-right-radius: 2rem; }
	.cardInner h1 { font-size: 3rem; }
	.cardInner h1.FounderH1 { font-size: 3rem; }
	.card p, .cardHdr  { font-size: 1.5rem; }
	.conv { width: 100% !important; padding-top: 0.5rem; }
	div#NewsContent h6 { font-size: 2.0rem; }
	div#NewsContent p  { font-size: 1.8rem; }
	#newsBottom, #newsBottomSpacer, #social { font-size: 1.5rem; }
}

/* Hide close labels on devices that have hover capability */
@media (hover: hover) {
	li.cb { display: none; }
	ul#mb li ul li:nth-last-child(-n+3) a { border-radius: 0 0 10px 10px; }
}

/* Hide close labels on devices that have hover capability */
@media (hover: hover) {
	li.cb { display: none; }
	ul#mb li ul li:nth-last-child(-n+3) a { border-radius: 0 0 10px 10px; }
}
/* --- End of Home Page Styles --- */