@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Raleway:700');

/* general */

body {
	background-color: white;
	color: black;
	font-family: 'Open Sans', sans-serif;
	margin: 0;
}
a img {
	border: none;
	vertical-align: middle;
}
nav > ul {
	list-style-type: none;
	margin: 0;
	padding: 1em 0;
}
nav > ul > li {
		display: inline;
}
nav > ul > li a {
	text-decoration: none;
}
nav > ul > li a:hover {
	text-decoration: underline;
}
table {
	border: 1px solid gray;
	margin: 2em auto;
}
table > caption {
	background-color: gray;
	color: white;
	font-size: small;
}
table tr > th {
	background-color: lightgray;
	padding: .5em;
	text-align: left;
}
table tr > td {
	background-color: #eee;
	padding: .5em;
}

/* layout */

header {
	background-color: steelblue;
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px);
}
	header > h1 {
		float: left;
	}
		header > h1 a {
		}
		header > h1 img {
			border: none;
			width: 343px;
			height: 69px;
		}
	header > form {
		float: right;
	}
		header > form fieldset {
			border: none;
		}
		header > form legend {
			display: none;
		}
		header > form input[type="search"] {
			padding: .5em 0;
		}
		header > form input[type="submit"] {
			padding: .5em 1em;
		}
	header > nav {
		background-color: darkorange;
		clear: both;
		text-align: center;
	}
		header > nav > ul {
		}
			header > nav > ul li {
				padding: 0 .5em;
			}
			header > nav > ul a {
				color: white;
				text-decoration: none;
			}
			header > nav > ul a:hover {
				text-decoration: underline;
			}
main {
}
	main > nav {
		font-size: small;
		text-transform: uppercase;
	}
		main > nav > ul {
		}
			main > nav > ul li::before {
				content: ' > ';
			}
			main > nav > ul a {
				color: black;
				text-decoration: none;
			}
	main > section {
		margin: 4em 0;
	}
		main > section h1 {
			border-bottom: 1px solid steelblue;
			clear: both;
			color: steelblue;
			font-family: Raleway, sans-serif;
			font-size: 1.5em;
			font-style: normal;
			font-weight: 700;
			margin: 2em 0;
		}
		main > section h2 {
			clear: both;
			color: steelblue;
			font-family: Raleway, sans-serif;
			font-size: 1em;
			font-style: normal;
			font-weight: 700;
			margin: 2em 0;
		}
			main > section h2 > a {
				color: steelblue;
				text-decoration: none;
			}
			main > section h2 > a:hover {
				text-decoration: underline;
			}
		main > section a {
			color: dodgerblue;
		}
		main > section a:hover {
			color: royalblue;
		}
		main > section ul > li,
		main > section ol > li {
			margin-top: 1em;
			margin-bottom: 1em;
		}
		main > section div.box,
		main > section div.smallbox {
			padding: 2em 1em;
		}
		main > section div.third img {
			display: block;
		}
		main > section div.small {
			font-size: small;
		}
		main > section > article > time {
			display: block;
			font-size: small;
			margin: -1em 0;
		}
footer {
	border-top: 1px solid lightgray;
	clear: both;
	text-align: center;
}
	footer > nav {
	}
		footer > nav > ul {
		}
			footer > nav ul li {
			}
			footer > nav ul img {
				width: 3em;
				height: 3em;
				margin: .75em;
			}
			footer > nav ul span {
				display: none;
			}
	footer > section {
		background-color: lightgray;
		border-top: 1px solid gray;
		color: gray;
		font-size: small;
		padding: 2em 0;
	}
		footer > section p {
		}
		footer a {
			color: dimgray;
			text-decoration: underline;
		}
		footer a:hover {
			color: black;
			text-decoration: none;
		}

/* responsive */

header h1 {
	padding-left: 1px;
}
header form {
	padding-right: 1px;
}
main {
	padding-left: 1em;
	padding-right: 1em;
}

@media only screen
and (min-width: 700px) {
header h1 {
	padding-left: 5%;
}
header form {
	padding-right: 5%;
}
main {
	padding-left: 5%;
	padding-right: 5%;
}
}

@media only screen
and (min-width: 760px) {
main > section div.box {
	border-left: 1px dotted gray;
	border-right: 1px dotted gray;
	height: 200px;
}
main > section div.smallbox {
	border-left: 1px dotted gray;
	border-right: 1px dotted gray;
	height: 100px;
}
main > section div.box img,
main > section div.smallbox img {
	margin: 0 auto;
}
main > section div.third {
	float: left;
	margin: 1em 0;
	padding: 1em 1%;
	width: 30%;
}
}

@media only screen
and (min-width: 900px) {
header h1 {
	padding-left: 10%;
}
header form {
	padding-right: 10%;
}
main {
	padding-left: 10%;
	padding-right: 10%;
}
}

@media only screen
and (min-width: 1100px) {
header h1 {
	padding-left: 20%;
}
header form {
	padding-right: 20%;
}
main {
	padding-left: 20%;
	padding-right: 20%;
}
}