/* ---------- Typography ---------- */

a {
	text-decoration: none;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
	font-size: 16px;
	font-size: 1rem;
	line-height: 1;
}

.site-title {
	font-size: 4em;
}

.entry-title {
	line-height: 1.3;
}

.entry-meta,
.widget-missing {
	font-style: italic;
}



/* ---------- Colors, borders and backgrounds ---------- */

/* Light gray */

.hentry {
	border-bottom: 1px solid #e6e6e6;
}

body {
	background: #eee;
}

/* Medium gray */

.entry-meta {
	color: #999;
}

/* Dark gray */
/* Site text color */

body, button, input, select, textarea {
	color: #333;
}

.header-background-image,
.widget-area,
.site-footer {
	background: #333;
}

/* Darker gray */

.widget-preheader-area {
	background: #111;
}

/* Orange */

a,
a:active,
a:focus,
a:visited {
	color: orange;
}

button, input[type="button"], input[type="reset"], input[type="submit"]/* Buttons and form buttons */,
.nav-menu li a:hover, .nav-menu li.current_page_item a /* Navigation menu items*/ {
	background: orange;
}

.header-background-color {
	/* Use rgba to overlay a color over the header background image */
}

a:hover {
	color: darkorange;
}

.main-navigation,
.nav-menu li a,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: darkorange;
}

/* White */

.widget-preheader-area,
.site-header,
.site-header a,
.site-header a:active,
.site-header a:visited,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.widget-area {
	color: white;
}

.site {
	background: rgba(255,255,255,0.6);
}

/* Background images */
/* Background patterns from subtlepatterns.com */

.header-background-image {
	background: url('img/header-background.png');
}

body {
	/*background: url('img/content-background.png');*/
	/* Use this to place a subtle texture behind the whole site */
}

/* Colorless */

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: none;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: none;
	box-shadow: none;
}



/* ---------- Dimensions, padding and margins ---------- */

/* Fix lists*/

ul,
ol,
li > ul,
li > ol {
	margin-left: 0;
	padding-left: 1em;
}

/* Site width */

.preheader-container,
.site-branding,
.menu,
.site-content,
.site-info,
.footer-container {
	max-width: 1000px;
	margin: 0 auto;
}

/* Pad all the stuff */

.preheader-container,
.site-branding,
.nav-menu li a,
.site-content,
.site-info,
.widget-area {
	padding: 1em;
}

/* Fix whacky padding */

.widget-preheader-area,
.widget-footer-area {
	padding: 0;
}

.site-branding,
.site-content,
.site-info {
	padding-top: 4em;
	padding-bottom: 4em;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
	padding: .5em 1em;
}

.hentry {
	padding: 0 0 4em;
}

/* Fix whacky margins */

p,
.attachment-post-thumbnail {
	margin: 0 0 1em;
}

figure {
	margin: 1em 0;
}

.widget-preheader,
.site-title,
.site-description,
.widget-footer {
	margin: 0;
}

.hentry {
	margin: 0 0 4em;
}

.entry-title {
	margin: 0 0 .25em;
}

.entry-content {
	margin: 1em 0 0;
}

.entry-footer span {
	margin-right: 1em;
}

.entry-footer span:last-of-type {
	margin-right: 0;
}



/* Display properties */

.preheader-title,
.footer-title {
	display: none;
}



/* ---------- Media queries ---------- */

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

	/* ----- Typography ----- */

	/* Pre-header and footer widget sidebars */

	.widget-preheader:nth-child(even),
	.widget-footer:nth-child(even) {
		text-align: right;
	}

	/* ----- Dimensions, padding and margins ----- */
	
	/* Layout: Main content + right sidebar */

	.content-area {
		float: left;
		margin: 0 -33% 0 0;
		width: 100%;
	}

	.site-main {
		margin: 0 33% 0 0;
	}

	.site-content .widget-area {
		float: right;
		overflow: hidden;
		width: 30%;
		margin: 0 0 0 3%;
	}

	.site-footer {
		clear: both;
		width: 100%;
	}

	/* Pre-header and footer widget sidebars */

	.widget-preheader,
	.widget-footer {
		width: 67%;
		display: inline-block;
		vertical-align: top;
	}

	.widget-preheader:nth-child(even),
	.widget-footer:nth-child(even) {
		width: 33%;
	}

}