/**** BASE ELEMENTS *****/
html { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; }
body { margin:0px 0px 0px 0px; }

/**** MISC PALLETE ITEMS  *****/
.back1Background { background-color: #FFFBF4; }
.back2Background { background-color: #FFF3E5; }
.back3Background { background-color: #FFD9AA; }
.back4Background { background-color: #FFD9AA; }
.lite1border { border-color: #FFD9AA; }
.dark1border { border-color: #990000; }
.dark1borderTop1pxSolid { border-top: solid 1px #990000; }
.inverse1 { background-color: #990000; color:#FFFFFF;}
.alertTextColor { color: #990000; }

/**** HEADINGS *****/
h1 {font-family: Times New Roman, Serif; font-size:x-large;color:#000000;font-weight:bold;margin:2px;}
h1 a {color:#000000;}
h1 a:hover {color:#000000;}
h1.alternate {color:#FFFFFF;margin-top:15px;margin-bottom:5px;background-color:#aa3333;padding:3px;font-weight:normal;}
h2 {font-family: Times New Roman, Serif;  font-size: large; color: #000000;font-weight: bold;margin: 0px;}

/************************************************************************
 * Navigation Bar
 ************************************************************************/

#BodyContainer .sidebar-content hr {
	border-width: 0px 0px 1px 0px;
	border-style: solid;
	border-color: #FFD9AA;
	margin: 6.5px 0px 6.5px 0px;
}

#BodyContainer .sidebar-content > ul {
	width: 136px;
}

#navbarNewStories {
	display: flex;
	justify-content: space-between;
	flex: 1;
}

#BodyContainer #navbarNewStories a {
	width: unset;
}

#BodyContainer .sidebar-content li a {
	display: inline-block;
	width: 100%;
}

#BodyContainer .sidebar-content li li a {
	white-space: nowrap;
}

#BodyContainer .sidebar-content li li a.narrower {
	display: block;
	transform: scaleX(0.9);
	transform-origin: left;
}

#BodyContainer .sidebar-content li a.navbar-menu::after {
	content: "▸";
	color: #8f7373;
	font-family: "Times New Roman", serif;
	font-weight: bold;
	font-size: 14pt;
	height: 32px;
	line-height: 32px;
	padding-right: 10px;
	position: absolute;
	right: -2px;
	text-align: right;
	top: -5px;
	width: 138px;
}

#BodyContainer .sidebar-content li a.navbar-menu.selected::after {
	content: " ";
}

#BodyContainer .sidebar-content li ul li:hover,
#BodyContainer .sidebar-content li ul li:focus,
#BodyContainer .sidebar-content li > a:not(.selected):hover,
#BodyContainer .sidebar-content li > a:not(.selected):focus {
	background-color: #FFD9AA;
}

#BodyContainer .sidebar-content li {
	position: relative;
}

#BodyContainer .sidebar-content ul.navbar-menuitem-container {
	background-color: #fffbf4;
	border: solid 1px #ffd9aa;
	top: -5px;
	padding-right: 15px;
	position: absolute;
	z-index: 1000;
	min-height: 22px;
	padding-top: 5px;
	padding-bottom: 5px;
	transition: left 100ms step-end;
	left: -9999px;
}

#BodyContainer .sidebar-content ul a.selected ~ ul {
	border: none;
	display: block;
	padding: 0;
	position: static;
}

#BodyContainer .sidebar-content ul a.selected ~ ul::after {
	content: none;
}

#BodyContainer .sidebar-content .navbar-menuitem-container::before {
	content: " ";
	max-height: 32px;
	height: 100%;
	width: 1px;
	left: -1px;
	background-color: #fffbf4;
	position: absolute;
	top: 0;
}

#BodyContainer .sidebar-content ul li:hover ul {
	left: 138px;
}

.navbar-menuitem-container > a {
	position: relative;
	z-index: 1;
}

/************************************************************************
 * Storygame Search
 ************************************************************************/

#storygameListContainer {
	display: flex;
	font-size: 14px;
	line-height: 2;
	margin-top: 20px;
}

#storygameListContainer #storygameListFilters {
	border-right: 1px solid #752f19;
	flex: 0 0 200px;
	margin-right: 10px;
	padding-top: 10px;
}

#storygameListContainer #storygameListFilters label {
	color: #871d18;
	display: block;
}

#storygameListContainer #storygameListPages {
	flex: 1 0 580px;
}

#storygameListContainer #storygameListPagination {
	border-bottom: 1px solid #752f19;
	display: flex;
	justify-content: space-between;
	padding: 10px;
}

#storygameListContainer #storygameListSubPagination {
	border-top: 1px solid #752f19;
	display: flex;
	justify-content: flex-end;
	padding: 10px;
}

#storygameListContainer #storygameList {
	display: flex;
	flex-direction: column;
}

#storygameListContainer #paginationSubsearch {
	margin-right: -1.5em;
}

#storygameListContainer label[for="paginationSubsearch"] {
	color: #757575;
	font-size: xx-small;
	font-weight: inherit;
	position: absolute;
	right: 2em;
}

#storygameListContainer .entry {
	border-bottom: 1px solid #752f19;
	display: flex;
	flex-wrap: wrap;
	padding: 10px 0 10px 10px;
}

#storygameListContainer .entry:last-child {
	border-bottom: none;
}

#storygameListContainer .entry > div {
	flex: 1 0 0;
}

#storygameListContainer .entry > div:nth-child(2) {
	flex: 0 0 440px;
}

#storygameListContainer .entry .fullwidth {
	flex: 1 0 100%;
}

#storygameListContainer .multiInput {
	display: inline-flex;
	position: relative;
	padding: 0;
	padding-right: 1.5em;
}

#storygameListContainer .ratingContainer {
	background-image: url("/i/svg/star-empty.svg");
	background-size: auto 100%;
	display: inline-block;
	height: 18px;
	width: 144px;
}

#storygameListContainer .rating {
	background-image: url("/i/svg/star.svg");
	background-size: auto 100%;
	height: 100%;
}

#storygameListContainer .rating.rated {
	background-image: url("/i/svg/star-green.svg");
}

#storygameListContainer .category,
#storygameListContainer .tag {
	border-radius: 4px;
	color: #eee;
	cursor: pointer;
	display: inline-block;
	font-size: 0.95em;
	height: 1.3em;
	line-height: 1.3em;
	margin-right: 1em;
	padding: 0.2em 0.4em;
}

#storygameListContainer .category {
    color: #6f231f;
	font-weight: bold;
}

#storygameListContainer .category:hover {
	color: #9c3e21;
}

#storygameListContainer .tag {
	background-color: #6f231f;
}

#storygameListContainer .category:last-child,
#storygameListContainer .tag:last-child {
	margin-right: 0;
}

#storygameListContainer .tag.featured::before {
	background-image: url("/i/svg/star-alt.svg");
	background-repeat: no-repeat;
	background-size: auto 100%;
	content: " ";
	display: inline-block;
	height: 100%;
	vertical-align: top;
	width: 1.3em;
}

#storygameListContainer .category a,
#storygameListContainer .tag a {
	color: inherit !important;
}

#storygameListContainer .loading::after {
	background-image: url("/i/svg/spinner.svg");
	background-repeat: no-repeat;
	background-size: contain;
	content: " ";
	display: block;
	height: 1.2em;
	width: 1.2em;
}

#storygameListContainer #storygameList.loading::after {
	background-position-x: 50%;
	height: 2em;
	margin-top: 1em;
	width: 100%;
}

#storygameListContainer h2[data-for] {
	cursor: pointer;
}

#storygameListContainer h2[data-for]::after {
	content: " ▾";
}

#storygameListContainer h2[data-for].collapsed::after {
	content: " ▸";
}

#storygameListContainer h2[data-for][data-value]:not([data-value=""])::after {
	content: " (" attr(data-value) ") ▾";
}

#storygameListContainer
h2[data-for][data-value]:not([data-value=""]).collapsed::after {
	content: " (" attr(data-value) ") ▸";
}

/************************************************************************
 * Specific Areas
 ************************************************************************/

td#SideNavigation {font-family: Times New Roman, Serif; padding: 0px 0px 0px 5px;vertical-align: top;font-size: medium;}
td#SideNavigation a {text-decoration: none;	color: #330000;	display:block;vertical-align: middle;}
td#SideNavigation img {vertical-align: middle;}
td#SideNavigation a.primary { font-size: 1.2em;font-weight: bold;margin-top: 8px;}
td#SideNavigation a.secondary {margin-left: 30px;}

div#maincontent {padding: 0px 0px 0px 0px;}
div#divWhosOnline {margin: 20px 25px 15px 25px; background-color:#FFFBF4;}

div.categoryBoxExtras { /* MAG Specific */ }
div#stories_storylistdiv { overflow:auto; }
.stories_storylistheaders { position: relative; /* top: expression(this.offsetParent.scrollTop); */ }

div#profile_Sidebar { background-color: #FFFBF4; float:right;width: 150px; text-align: center; padding-bottom: 10px;}
div#profile_Sidebar h2 { margin-top:10px; }
div#profile_Text {}
div#profile_Trophies{padding:10px; width:500px;}
div#profile_Trophies h2{margin-bottom: 5px;}
div#profile_Stories { }
div#profile_Stories h1 {}
div#profile_Stories a {font-weight:bold; display:block;}
div#profile_Posts {}
div#profile_Posts a {font-weight:bold;}
div#profile_Articles {}
div#profile_Articles a {font-weight:bold;display:block;}

body.mystuff_menupopup { background-color: #FFD9AA; border: solid 1px #FFD9AA; font-size: xx-small;  }
body.mystuff_menupopup td {text-align:right;}
body.mystuff_menupopup a {font-size: xx-small;}
.mystuff_webpartchrome { background-color:#FFFBF4; }
.mystuff_webparttitle { background-color: #aa3333; padding:5px; color: #ffffff }
.mystuff_webparttitle a { color: #ffffff; font-weight: bold; }
.mystuff_webparttitle a:hover { color: #ffffff; font-weight: bold; text-decoration:underline; }

select, input {font-size: x-small;}

/* From V3.5 */
th,label {font-size: x-small;font-weight: bold;color: #330000;}

label.selected { color:#FFFFDD; background-color:#330000; }

span.tertiaryButton { font-size:xx-small; font-weight:bold; color:#000033; }
span.tertiaryButtonSelected { color:#FFFFDD;font-size:xx-small; font-weight:bold; background-color:#000033; color:#FFFFFF;padding:2px; }


p {margin: 7px 0px 0px;}

a {color: #000099;text-decoration: none;}
a:hover {color: #000099;text-decoration: underline;}

h3 {font-size: medium; color: #330000; font-weight:bold; margin: 0px; display:inline;}

/* Older */

.footerText {color: #FFFFFF;text-align: center;text-decoration: none;letter-spacing: 0.2pc;font-size: 13px;font-weight: normal;}
.footerText:hover {text-decoration: underline;color:#FFFFFF;}

.smallerText {font-size: xx-small;}

.formLabel {font-size: xx-small;font-weight: bold;color: #330000;}
.formHeading2 {font-size: x-small;color: #330000;font-weight: bold;}



.navTabs {text-decoration: none;font-weight: bold;font-size: 13px;}
.navTabs:hover {text-decoration: underline;}

.secNavBar {text-decoration: none;	letter-spacing: 0.2em;	font-size: 12px;}
.secNavBarLink {text-decoration: none;	color: #000000;}
.secNavBarLink:hover {color: #000000;text-decoration: underline;}
.secNavBarSelectedLink {font-weight: bold;}
.error {color: #CC3333; font-size:xx-small;}
.tableHead {
	font-size: xx-small;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #000066;
}