@charset "UTF-8";
/* CSS Document */

body {
	background: url("../../images/hashline3.png") repeat-x fixed top;
	margin: 0;
}

/* Using a non-HTML5 browser??? */
article, aside, footer, header, nav, section {
	display: block;
}

.red {
	color: red;
}

/* Typography
----------------------------------------------------------------------------------------------------*/
body {
	font-family: source-sans-pro, sans-serif;
	font-style: normal;
	font-weight: 400;
}

h1, h2, h4, h6, main figcaption {
	font-family: museo-slab, sans-serif;
	font-style: normal;
	font-weight: 700;
}

h1, h2 {
	font-size: 1.2rem;
}

nav h2 {
	font-size: .8rem;
	color: #666;
}


/* header
----------------------------------------------------------------------------------------------------*/
header {
	position: fixed;
	top: 0;
	width: 100%;
}

.headerWrapper {
	height: 0;
	margin: 0 auto;
}

.name {
	line-height: 50px;
}

.name a {
	background-color: white;
	color: #333;
	padding: 40px 100px 3px 50px;
	text-decoration: none;
}

/* nav
----------------------------------------------------------------------------------------------------*/

.primaryNav {
	margin-left: 50px;
	width: 290px;
}

.secondaryNav {
	display: none;
}

.secondaryNav h2 {
	font-size: 1rem;
}

nav ul {
	font-size: .8rem;
	list-style-type: none;
	padding: 0;
}

nav li {
	margin: 5px 10px 5px 0;
}

nav a {
	display: block;
	padding: 5px;
	text-decoration: none;
}

nav a:link {
	color: black;
}

nav a:visited {
	color: black;
}

nav a:hover {
	background-color: #ebbc2e;
	color: white;
}

nav a:active	{
	background-color: cyan;
	color: white;
}

/* main
----------------------------------------------------------------------------------------------------*/
main, footer div {
	margin: 0 auto;
	min-width: 300px;
}

.mainWrapper {
	margin-left: 350px;
	overflow: hidden;
	padding: 80px 0 0 0;
}

main .thin {
	font-weight: 300;
}

main .kicker {
	border: thin solid #ddd;
	margin: 0;
	padding: 5px;
	width: 35px;
}

main .kicker p {
	background-color: white;
	color: #666;
	font-size: 1rem;
	margin: 0;
	padding: 5px;
	text-transform: uppercase;
	width: 200px;
}

main h1, main h2, main h3 {
    max-width: 400px;
	min-width: 280px;
}

main h2 {
	margin-bottom: 0;
	margin-top: 4rem;
	text-transform: uppercase;
}

main h3 {
	font-weight: 600;
	margin-bottom: .5rem;
	margin-top: 2.5rem;
}

main > ol, main > ul {
	padding-left: 15px;
}

main .detail {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

main .describe {
	margin-bottom: 0;
	margin-top: 0;
	padding-left: 15px;
}

main p, main li {
	font-size: .8rem;
    line-height: 1.6rem;
	max-width: 500px;
}

main .interest {
    color: darkcyan;
    font-weight: bold;
    font-style: italic;
}

main figure {
	margin:10px 10px 50px 0;
	display:inline;
	float: left;
	position: relative;
}

main img {
	border-bottom: thick solid #ddd;
}

main figcaption {
	color: #666;
	font-family: "museo-slab",serif;
	font-size: .6em;
	font-style: normal;
	font-weight: 300;
	line-height: 2.4em;
	margin: 0 0 0 10px;
    padding: 0;
}

	main figcaption h1 {
	font-family: "museo-slab",serif;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 2em;
	margin: 0;
	}

	main figcaption {
	font-family: "museo-slab",serif;
	font-size: .8rem;
	font-weight:500;
	line-height: 2em;
	margin: 0;
	max-width:350px;
	}

	main figcaption p.credit {
	font-weight: 300;
	font-size: 1em;
	line-height: 2em;
	}

    main blockquote {
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 2em;
    border-left: solid thick #ddd;
    padding-left:20px;
    }

#research {
	padding-top:75px;
}

main select {
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: .5rem;
    margin-top: .5rem;
    width: 100%;
    max-width: 500px;
    height:40px;
    border-color: #666;
    /*background-color: #ebbc2e;*/
}

main label {
    font-style: italic;
}

main option {
    
}

/* footer
----------------------------------------------------------------------------------------------------*/
footer {
	background-color: #333333;
	bottom: 0;
	color: #fff;
	font-size: .8rem;
	line-height: 1.6rem;
	margin-top: 100px;
	overflow: hidden;
	padding-bottom: 20px;
	position: relative;
}

footer h2 {
	font-size: 1rem;
}

footer ul {
	list-style-type: none;
	padding: 0;
}

footer li {
	color: white;
}

footer li a {
	display: block;
	height: 20px;
	padding: 5px;
	width: 3000px;
}

footer li a:link,
footer li a:visited,
footer li a:active,
footer li a:hover {
	color: white;
	text-decoration: none;
}

footer li a:hover {
	background-color: #FFC157;
}



/* responsive styles
----------------------------------------------------------------------------------------------------*/

@media all and (min-width: 1040px) {

	.headerWrapper, main, footer div {
		width: 1040px;
	}
	
	.name {
		width: 310px;
	}

	footer h2 {
		margin: 20px 0 20px 50px;
	}
	
	footer ul {
		margin-left: 50px;
	}
}


/* ----- 960px -> 1039px ----- */
@media all and (min-width: 960px) and (max-width: 1039px) {

	.headerWrapper, main, footer div {
		width: 960px;
	}
	
	.name {
		width: 310px;
	}

	.mainWrapper{
		margin-left: 330px;
	}
	
	footer h2 {
		margin: 20px 0 20px 50px;
	}
	
	footer ul {
		margin-left: 50px;
	}
}


/* ----- 720px -> 959px ----- */
@media all and (min-width: 720px) and (max-width: 959px) {

	.headerWrapper, main, footer div {
		width: 720px;
	}
	
	.name {
		width: 240px;
	}

	.name a {
		padding: 40px 50px 3px 20px;
	}
	
	.primaryNav {
		margin-left: 20px;
		width: 200px;
	}
	
	.mainWrapper {
		margin-left: 240px;
	}
	
	main p, main li {
		padding-right: 20px;
	}

	footer h2 {
		margin: 20px 0 0 20px;
	}
	
	footer ul {
		margin-left: 20px;
	}
}


/* ----- 501px -> 720px ----- */
@media screen and (min-width: 500px) and (max-width: 719px) {
	
	.headerWrapper, main {
		width: 500px;
	}
	
	.name {
		width: 240px;
	}

	.name a {
		padding: 40px 50px 3px 20px;
	}
	
	.primaryNav {
		display: none;
	}
	
	.secondaryNav {
		background-color: lightgrey;
		display: block;
		padding: 20px;
	}
	
	nav, footer div {
		margin: 0 auto;
		width: 460px;
	}
	
	.mainWrapper {
		margin: 0 20px;
	}
	
	footer {
		margin-top: 0;
	}
}


/* ----- 300px -> 499 ----- */
@media screen and (min-width: 300px) and (max-width: 499px) {
	body {
		background-image: none; 
	}

	header {
		display: none;
	}
	
	main, footer div{
		max-width: 500px;
		min-width: 300px;
	}
	
	.mainWrapper{
		margin-left: 0;
		padding: 20px 20px;
	}
	
	.secondaryNav {
		background-color: lightgrey;
		display: block;		
		padding: 20px;
	}
	
	nav ul {
		margin: 0;
	}
	
	nav a:link,
	nav a:visited {
		color: #333;
	}

	footer {
		margin: 0;
	}
	
	footer div {
		padding: 20px;
	}
	
	footer h2, footer ul {
		margin: 0;
	}
}


/* ----- Under 299px ----- */
@media screen and (max-width: 299px) {
	
	body {
		background-image: none; 
	}

	header {
		display: none;
	}
	
	main {
		width: 300px;
	}
	
	.mainWrapper {
		margin-left: 0;
		padding: 20px;
	}
	
	.secondaryNav {
		background-color: lightgrey;
		display: block;
		padding: 20px;
		width:260px;
	}
	
	nav ul {
		margin: 0;
	}
	
	nav a:link,
	nav a:visited {
		color: #333;
	}

	footer {
		margin: 0;
		width: 300px
	}
	
	footer div {
		padding: 20px;
	}
	
	footer h2, footer ul {
		margin: 0;
	}
}