/* Some definitions used everywhere */
BODY { 
	background: #c7bc8f;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
 	font-family: arial, helvetica, sans-serif;
	font-size: 12px;
}

IMG { 
	border: 0;
	padding: 0;
	margin: 0;
}
/* Header cells in tables throughout the site */
TH { 
	background: #000;
	color: #FFF;
	font-weight: bold;
}
/* links */
A { 
	color: #b34774;
	font-weight: bold;
	text-decoration: none;
}
/* hovering links */
A:hover {
	color: #000;
	font-weight: bold;
	text-decoration: none;
}

/* Top of Page */

#container {
	background: #b34675 url(images/bannerbg.jpg) top left repeat-x;
	text-align: center;
	margin: auto;
}

#banner {
	margin: auto;
	width: 713px;
	height: 150px;
 	background: #C6BB8F url(images/banner.jpg) top center no-repeat;
}

/* the following defines your menu above the banner div */

#menu {
	padding: 5px;
	text-align:center;
	border-bottom: 1px solid #b34774;
	background: #74234b url(images/topmenubg.jpg) top left repeat-x;
}

#menulist {
 	padding: 0px;
 	margin: 0px;
}

#menulist ul {
 	margin-left: 0;
 	padding-left: 0;
 	white-space: nowrap;
}

#menulist li {
	 display: inline;
 	list-style-type: none;
}

#menulist a { 
	padding-top: 1px;
	padding-bottom: 1px;
 	padding-left: 7px;
 	padding-right: 7px;
 	margin-right: 3px;
	}

#menulist a:link, #menulist a:visited {
 	color: #fff;
 	text-decoration: none;
 	font-weight: bold;
}

#menulist a:hover{
 	color: #000;
	text-decoration: none;
	font-weight: bold;
}

/* the following defines your menu below the banner div */

#submenu {
	padding: 5px;
	text-align:center;
	border-top: 1px solid #681e43;
	border-bottom: 1px solid #3f0724;
	background: #b44675 url(images/menubg.jpg) top left repeat-x;
}

#submenulist {
 	padding: 0px;
 	margin: 0px;
 	text-align: center;
}

#submenulist ul {
 	margin-left: 0;
 	padding-left: 0;
 	white-space: nowrap;
}

#submenulist li {
 	display: inline;
 	list-style-type: none;
}

#submenulist a { 
 	padding-top: 1px;
 	padding-bottom: 1px;
 	padding-left: 7px;
 	padding-right: 7px;
 	margin-right: 3px;
	}

#submenulist a:link, #submenulist a:visited {
 	color: #fff;
 	text-decoration: none;
 	font-weight: bold;
}

#submenulist a:hover{
 	color: #000;
 	text-decoration: none;
 	font-weight: bold;
}

/* the footer box at the bottom of the page */
#footer {
	text-align:center;
	font-weight:bold;
 	color: #FFF;
	background: #c7bc8f url(images/footer.jpg) top left repeat-x;
	padding: 10px;
	clear: both;
}

#footer a{
	color:#b34774;
	}
	
#footer a:hover {
	color:#fff;
	}



/* this is a carryover from 1.1.  Generally it is used around tables and table cells. */
.tblborder { 
	padding: 6px;
	border-collapse: collapse;
}

/* Main Page Body */

#mainpage {
	padding: 15px;
	padding-top: 25px;
	background: #b34675;
	background-image: url(images/bodybg.jpg);
	background-position: top left;
	background-repeat: repeat-x;
	margin:auto;
	text-align: left;
}
html>body #mainpage { 
	height: auto;
	min-height: 550px;
}

#leftindex { 
	position:relative;
	width: 180px;
	float: left;
	margin-left: 50px;
	text-align: left;
}
#rightindex {
	position:relative;
	width: 180px;
	margin-right: 50px;
	float:right;
	text-align: left;
}

#middleindex {
	position:relative;
	margin-left: 240px;
	margin-right: 240px;
	text-align: left;
}

/* This controls the look of the blocks on the index page. */

/* The box around the block */
.block { 
	margin-bottom: 1em;
}

/* The block's title */
.block .title {
	color: #6a1d44;
	background: #eeebde url(images/blocktop.jpg) top left repeat-x;
	font-weight: bold;
	font-size: 16px;
	padding: 3px;
	padding-left: 8px;
	border-bottom: 1px solid #a4996f;
}

/* The block's content */
.block .content {
	padding: 10px 10px 15px 10px;
	background: #eeebde url(images/blockbottom.jpg) bottom left repeat-x;
}

/* Used to prevent content from going to edges */
#skinny {
	margin: 0px 100px;
	padding:15px;
	background: #eeebde url(images/defaulttop.jpg) top left repeat-x;
	
}

#skinnybottom {
	margin: 0px 100px;
	padding:15px;
	background: #eeebde url(images/blockbottom.jpg) bottom left repeat-x;
	
}

/* Most pages use pagetitle to format the page's title */
#pagetitle { 
	text-align: center;
	font-size: 14px;
	color: #000;
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: 1em;
}


/* Alphabet Setup */

#alphabet, #pagelinks {
	text-align: center;
	word-spacing: .5em;
	margin: 1em;
}
/* each link */
#alphabet A, #pagelinks A {
	color: #7d2148;
	text-decoration: underline;
	font-weight: bold;
	font-size: 1.3em;
}
/* each link when hovered over */
#alphabet A:hover, #pagelinks A:hover {
	color: #fff;
}
/* the currently selected letter and currently selected page */
#alphabet #currentletter, #pagelinks #currentletter {
	color: #333;
	font-weight: bold;
	padding: 0 2px;
}
/* End alphabet and page link declarations */

/* labels throughout the site in forms and in other places */
.label, .classification {
	color: #000;
	font-weight: bold;
}
/* Admin options in various places.  */
.adminoptions { 
	color: #000;
	font-weight: bold;
}

/* The listings of stories etc. */
/* .sectionheader styles the headings "Stories" and "Series" */
.sectionheader {
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #000;
}

/* The box around each individual story */
.listbox {
	margin: 1em 5%;
	border: 1px solid #dbdbdb;
	background: #fff;
}

/* The title bar for each story box. */
.listbox .title {
	background: #74234b url(images/topmenubg.jpg) top left repeat-x;
	color: #FFF;
	font-weight: bold;
	padding: 4px;
	padding-left: 8px;
}

/* The content of the box...summary, categories, etc. */
.listbox .content {
	padding: 6px;
	background-color: #fff;
}

/* The tail info published date etc. on the last line */
.listbox .tail {
	background: #b44675 url(images/menubg.jpg) top left repeat-x;
	padding: 4px; 
}

.listbox .title a {color:#d5ccab;}
.listbox .title a:hover {color:#fff;}
.listbox .tail a {color:#fff;}
.listbox .tail a:hover {color:#ff0000;}
/*End story/series listings */

/* titleblock is used for the title information in series and challenges */
#titleblock {
	margin: 0 10%;
}

/* The pulldown jump menus on several pages. */
.jumpmenu {
	text-align: right;
	margin-right: 1em;
}

/* On the story page, there's a jumpmenu at the bottom. It looks better centered, so this will replace the declaration above for that 
drop down list ONLY */
#pagelinks .jumpmenu2 {
	text-align: center;
}

/* story notes */
.noteinfo{
	border: 1px solid #ccc; 
	margin:1em; 
	padding: 1em;
	background: #fff;
	}

/* This is used on series and challenges and other places where a response is solicited */
.respond { 
	text-align: center;
	padding: 6px;
}

/* The sort menu on the categories page */
#sort { text-align: center; }

#sortform { text-align: center; }

/* On pages that don't use listings, the content is surrounded by a div labeled output to */
#output { 
	padding: 10px;
}

/* User Profile stuff */
/* The top list of information */
#profile {
	margin: 1em 10%;
}
/* The sort menu in the profile */
#profile #sort {
	text-align: center;
	font-weight: bold;
	color: #000;
 }
/* The following declarations control the tabs */
/* The outer tab box */
#tabs {
	text-align: center;
	margin: 0;
	padding: 0;
}
/* The individual tabs. */
#tabs span {
	padding: 5px;
}
/* Links in the tabs */

#tabs #active {
	color: #000;
}

#tabs a:{
	color: #fe6000;
}

#active a:{
	color: #fe6000;
}

/* The next link at the bottom of a multi-chapter story */
#next { float: right; }
/* The previous link at the bottom of a multi-chapter story */
#prev { float: left; }

#browse #category_content { width: 95% !important; margin: 1em auto; }

/* Newsbox tweaks */
.newsbox {
	margin-bottom: 20px; 
	border-bottom: 1px solid #000;
	}
	
.newstitle {
	font-weight: bold; 
	font-size: 1.3em; 
	border-bottom: 1px dashed #999; 
	margin-bottom: 5px;
	}
	
.commenteven, .commentodd {padding: 3px 10px; margin-bottom: 1.5em; border-bottom: 1px dashed #999;}
.commentsig {font-weight: bold;}

.recentstory , .featuredstory, .commentsig {
	margin-bottom: 1em;
	}

table {font:12px arial;}


 
@media only screen and (max-width: 768px) {

	#skinny,
	#skinnybottom {
		margin: 0px 5px;
	}

	#skinnybottom {
		width: 100%;
	}
			    
	#content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}

	#leftindex {
		position: initial;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

	#middleindex{
		position: initial;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

	#rightindex {
			position: initial;
			width: 50%;
			margin-left: auto;
			margin-right: auto;
			text-align: left;
	}

	.block {
		margin: 10px;
	}
	#banner {
		width: 100%;
		height: 110px;
		background-size: contain;
	}

	.listbox {
		margin: 1em 0;
	}
}