/* Some definitions used everywhere */
BODY { 
        background: #fff;
	color: #353846;
	margin: 0;
	padding: 0;
	text-align: center;
 	font-family: 'Source Sans Pro', sans-serif;
	font-size: 13px;
}

IMG { 
	border: 0;
	padding: 0;
	margin: 0;
}

/* Header cells in tables throughout the site */
TH { 
	background: #666;
	color: #FFF;
	font-weight: bold;
}
/* links */
A { 
	color: #B4654A;
	font-weight: 600;
	text-decoration: none;
}
/* hovering links */
A:hover {
	color: #333;
	font-weight: 600;
	text-decoration: none;
}

/* For Sitename */
h1 {
	color: #53777A;
	font-size: 48px;
}

label {
	font-weight: 600;
	display: inline-block;
	font-size: 15px;
	margin: 10px 5px 0 0;
}

input[type="text"] {
	padding: 3px;
}

/* Main Layout */

/* Overall Container */
#container { 
	width: 100%;
	margin: 0px;
	padding: 0px;
	text-align: left;
	background: #353846;
}

/* Menus under header */

/* Menu with top border */

/* Menu with bottom border */
#menu {
	background:#fff;
	padding: 10px 5px;
	clear: both;
}

#menulist {
 	padding: 0px;
 	margin: 0px;
 	text-align: center;
	font-size: 16px;
	color: #9cb525;
}

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

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

/* Menu link colors */
#menulist a { 
	padding: 1px 14px;
 	margin-right: 3px;
	}

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

#menulist a:hover{
	text-decoration: none;
	font-weight: normal;
	border-bottom: 2px solid #000;
}

#submenu {
margin: 0 auto;
padding: 0;
font-size: 15px;
text-align: center;
}

#submenu ul{
margin-left: 0;
padding-left: 0;
list-style-type: none;
}

#submenu li {
display: block;
margin: 0;
padding: 0;
	}

#submenu li a {
display: block;
padding: 3px 8px;
}

#submenu li a:link , #submenu li a:visited { 
color: #fff;
text-decoration: none;
}

#submenulist li a:hover { 
color: #eee;
text-decoration: underline;
}


#othermenu ul{
margin-left: 0;
padding-left: 0;
list-style-type: none;
}

#othermenu li {
display: block;
margin: 0;
padding: 0;
}

#othermenulist li a {
display: block;
padding: 3px 8px;
border-bottom: none;
}

#othermenulist li a:link , #othermenulist li a:visited { 
color: #00A9A5;
text-decoration: none;
}

#othermenulist li a:hover { 
text-decoration: underline;
}

/* left column */
#leftindex { 
	position:relative;
	width: 300px;
	float: left;
	text-align: left;
	padding: 0px 5px;
	margin: 0px;
	background: #353846;
}

/* right column */
#middleindex {
	position:relative;
	margin-left: 310px;
	text-align: left;
	padding: 0px 5px;
}

/* left column */
#leftcol{ 
	position:relative;
	width: 395px;
	float: left;
	text-align: left;
	padding: 10px;
}

/* right column */
#rightcol {
	position:relative;
	margin-left: 410px;
	text-align: left;
	padding: 10px;
}
/* Main page surrounds the text between the header and the footer.  
For IE, height is set to 650 to force the footer down to the bottom of the page where the content is short.  
And the second declaration is for everyone else so that it will scroll if longer but be a minimum of 650px
*/
#mainpage {
	height: 950px;
	text-align: left;
	padding: 5px;
}
html>body #mainpage { 
	height: auto;
	min-height: 950px;
}

/* Site  Footer */
#footer {
	background:#4c3152 url(images/menubg.png) repeat-x top center;
 	color: #fff;
	padding: 5px 10px 15px 10px;
	text-align:center;
	clear: both;
}

.gb-full.footer {
	padding: 2em;
}

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

.search-textbox .textbox {
	border: none;
	outline: none;
	padding: 5px;
	border-bottom: 1px solid;
	margin: 10px 0 20px;
	width: 100%;
}

.search-dropdown {
	margin: 0 10px 10px;
}

/* Most pages use pagetitle to format the page's title */
#pagetitle { 
	text-align: center;
	font-size: 25px;
	color: #666;
	font-weight: 600;
}

/* 
Where there's a list of alphabet links #alphabet controls their look. 
Just to make things simpler #pagelinks controls the look of the links at the bottom of multi-page results
and will be set here too. Generally, they look alike.
*/
/* the box around the links */
#alphabet, #pagelinks {
	text-align: center;
	word-spacing: .3em;
	margin: 1em;
}
/* each link */
#alphabet A, #pagelinks A {
	color: #00A9A5;
	text-decoration: none;
	font-weight: bold;
	padding: 0 2px;
}
/* each link when hovered over */
#alphabet A:hover, #pagelinks A:hover {
	color: #000;
}
/* the currently selected letter and currently selected page */
#alphabet #current_letter, #pagelinks #currentpage {
	color: #000;
	font-weight: bold;
	padding: 0 2px;
}

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

/* The listings of stories etc. */
/* .sectionheader styles the headings "Stories" and "Series" */
.sectionheader {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #333;
	margin-top: 1em;
}

/* The box around each individual story */
.listbox {
	margin: 2em 5% 3em 5%;
	background: #FFF;
	padding: 15px;
	box-shadow: 4px 4px 10px 3px #666;
	border-radius: 6px;
}

/* The title bar for each story box. */
.listbox .title {
	color: #353846;
	font-size: 16px;
	font-weight: bold;
	padding: 4px;
	padding-left: 8px;
	border-bottom: 2px solid #B4654A;
}

.listbox .title .story-title a {
	font-weight: bold;
	font-size: 18px;
	color: #0E6866;
}

/* listbox links */
.listbox .title a{color:#0E6866;}

.listbox .title a:hover {color:#B4654A;}

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

/* The tail info published date etc. on the last line */
.listbox .tail {
	padding: 4px; 
}

/*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 .jumpmenu {
	text-align: center;
}

/* 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; margin: 1em; }
#sortform { text-align: center; margin-bottom: 1em; }


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

#skinny { 
	padding: 35px;
	background: #FFF;
	margin:1em;
	border-radius: 9px;
}

#story {
	margin: 2em 4em;
}

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

#tabs #active {
	background: #315077;
	color: #fff;
}

/* tab link colors */
#active a{color:#fff;}
#tabs #active:hover {background: #111;}

#tabs span:hover {background: #151515;}


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


/* The box around the block */
.block { 
	margin: 0px;
	margin-bottom: 2em;
	background: #FFF;
	border-radius: 9px;
	
}

/* The block's title */
.block .title {
	color: #0E6866;
	font-weight: 600;
	font-size: 21px;
	padding: 5px 10px;
	border-bottom: 2px solid #B4654A;
}

/* The block's content */
.block .content {
	padding: 10px;
}


/* 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; }

/* Misc Tweaks */

/* Neater News */
.newsbox { background-color: #fff; margin-bottom: 2em; border-left: 5px solid #26547C; padding: 5px;}
.newstitle {font-weight: bold; font-size: 1.3em; border-bottom: 1px dashed #999; margin-bottom: 5px; color:#353846;}
.commentsig {font-weight: bold; margin-top: .5em; margin-bottom: 2em; border-bottom: 1px dashed #666;}

.odd {background: #eee;}

/* Space between stories in block */
.recentstory {padding-bottom: 12px;}
.featuredstory {padding-bottom: 12px;}

.home-story .home-title a {
	color: #0E6866;
	font-weight:bold;
	font-size: 15px;
}
.home-story .home-title a:hover {
	color:#333;
}
.home-story {
	margin: 0 0 10px;
	padding: 10px 10px 20px;
	border-bottom: 1px solid;
}
/* the login block in the left column */
#loginblock { background-color: #fff; padding: 10px 30px; text-align: center; width: 200px; color: #000; font-weight: bold; border: 1px solid #000; margin: 10px 0; border-radius: 6px;}
#loginblock LABEL { color: #000; }
#loginblock .button { display: block;  margin: 0 auto;}
/* end login block */

#settingsform {
	float: none;
}

@media only screen and (max-width: 768px) {
	html > body .column {
		width: 50%;
	}

	#menulist a {
		line-height: 30px;
	}
	select { 
		max-width: 100%;
	}
	#leftindex {
		position: static;
		width: auto;
		float: none;
		text-align: center;
	}

	#mainpage {
		box-sizing: border-box;
		display: block;
	}

	#submenu {
		margin: 0;
		width: 100%;
	}

	#middleindex {
		position: static;
		margin-left: 0px;
		padding: 0px;
		display: block;
	}

	#leftcol {
		position: static;
		width: auto;
		float: none;
		padding: 0;
		min-width: 300px;
	}

	#rightcol {
		position: static;
		margin-left: 0;
		padding: 0;
		min-width: 300px;
	}
	.listbox {
		margin: 2em 0 3em 0;
		padding: 15px 5px;
	}
	#skinny {
		margin: 1em 0;
		padding: 3px;
	}
	#story {
		margin: 2em 1em;
	}

}