/* Color scheme: http://kuler.adobe.com/#themeID/913725 */

/* Global Styles */
	body {
		background-color: white;
		font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
		margin: 0;
	}
	
	header, h1, h2, h3, h4, h5, h6 {
		font-family: "Bree Serif", Rockwell, sans-serif;
		font-weight: normal;
	}
	
	p, ul, ol, dl {
		line-height: 1.6em;
	}
	
	.emphasizedBlock {
		font-size: larger;
		font-weight: bold;
	}
	
	.column {
		display: table-cell;
	}
	
	.button {
		text-align: center;
	}
	
	/* Common Colors */
		/* red color */
		#mainNav .current, #contentHeader, .button {
			background-color: rgb(184, 0, 0);
		}
		.button:hover {
			background-color: rgba(184, 0, 0, 0.8) !important;
		}
		.button:active {
			background-color: rgba(184, 0, 0, 0.9) !important;
		}
		
		.emphasizedBlock, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
			color: rgb(184, 0, 0);
		}
		
		#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
			border-color: rgb(184, 0, 0);
		}
		
		/* white color */
		.button {
			color: white !important;
		}
		
		/* dark grey color */
		#headerContainer, #mainNav ul, #footerContainer {
			background-color: rgb(32, 32, 31);
		}
		
		/* light grey highlight color */
		#headerContainer, #mainNav ul, #footerContainer {
			color: rgb(226, 226, 228);
		}

		#mainNav a:hover {
			background-color: rgba(226, 226, 228, 0.2);
		}
		#mainNav a:active {
			background-color: rgba(226, 226, 228, 0.1);
		}
		
		#content a:hover {
			background-color: rgb(226, 226, 228);
		}

/* Centers the main column of the page */
	.pageCentered {
		max-width: 45em;
		margin: 0 auto;
	}

/* Main Page Header */
	#mainHeader {
		padding: 1.5em;
	}
	#mainHeader hgroup {
		background-image: url("../Images/ShareMeNot Logo.svg");
		background-repeat: no-repeat;
		background-size: auto 6em;
		
		min-height: 6em;
		padding-left: 6em; /* space for background image logo; should be equal to background-size and min-height */
	}
	#mainHeader h1, #mainHeader h2 {
		margin: 0;
	}
	#mainHeader h1 {
		font-size: 2em;
	}
	#mainHeader h2 {
		font-size: 1.25em;
	}

/* Main Navigation */
	#mainNav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#mainNav li {
		display: inline;
		position: relative; /* for positioning secondary level menus */
	}
	#mainNav a, .button {
		color: inherit; /* inherit the text color from the parent element; otherwise the link is blue */
		display: inline-block;
		font-weight: bold;
		padding: 0.75em;
		text-decoration: none;
	}
	
	/* styles for the secondary level menu */
	#mainNav ul ul {
		display: none;
		
		width: 10em;
		
		z-index: 100;
		
		position: absolute;
		left: 0;
	}
	#mainNav ul ul a {
		display: block; /* make secondary level menu items fill the entire width of the menu */
		white-space: nowrap;
	}
	#mainNav li:hover > ul {
		display: block; /* show the secondary menu when hovering over its parent */
	}

/* Main Content */
	/* Content Header */
		#contentHeader {
			padding: 1em 0;
		}
		#contentHeader h1 {
			color: white;
			font-size: 3em;
			margin: 0;
		}
	
	#content section.pageCentered {
		margin-top: 2em;
		margin-bottom: 2em;
	}
	
	/* Content Text Headings */
		#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
			border-bottom-width: 0.075em;
			border-bottom-style: solid;
		}
	
	/* Content Hyperlink Colors */
		#content a {
			color: rgb(89, 4, 2);
		}
		#content a:visited {
			color: rgb(89, 71, 71);
		}
		#content a:active {
			background-color: rgb(126, 126, 127);
		}

/* Main Footer */
	#footerContainer {
		padding: 0.75em 0;
	}
	#mainFooter p {
		font-size: 0.75em;
	}
	
	/* Footer Hyperlinks */
	#mainFooter a {
		color: inherit;
	}
	#mainFooter a:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}
	#mainFooter a:active {
		background-color: rgba(255, 255, 255, 0.5);
	}
	
	/* Footer Logos */
		#mainFooterLogos {
			text-align: center;
		}
		#mainFooterLogos a {
			display: inline-block;
			margin: 0 2em;
		}
		#mainFooterLogos img {
			vertical-align: middle;
		}
		#cseLogo {
			height: 4.3em;
			width: 4.3em;
		}
		#nsfLogo {
			height: 5em;
			width: 5em;
		}