/*
Theme Name: The Road, Re-Visioned
Description: Based on HTML5 Reset Theme
Author: Monkey Do! + @ckhicks
Author URI: http://monkeydo.biz
Version: 2.0
*/

.chromeframe {position: absolute; top: 0;}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {font: 13px Helmet, Freesans, sans-serif;}

/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */

/* We like off-black for text. */
body, select, input, textarea {color: #333;}

a {color: #03f;}
a:hover {color: #69f;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;}

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

/* UNIVERSAL
-------------------------------------------------------------------------------*/

input,
:focus {
	outline: none;
}

input {
	-webkit-appearance: none;
	border-radius: 0;
}

a {
	color: #333;
	text-decoration: none;
	-webkit-transition: color 500ms ease;
	transition: color 500ms ease;
}

a:hover {
	color: #e0dcd9;
}

h1 {
	font-size: 2.25em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.75em;
}

h4 {
	font-size: 1.4em;
}

p {
	font-size: 15px;
	line-height: 1.35em;
	letter-spacing: 0.005em;
	text-align: justify;
}

.entry h1,
.entry h2,
.entry h3,
.entry h4,
.entry p {
	margin-bottom: 15px;
}

img {
	height: auto;
}

.clear {
	clear: both;
}

.alignright {
	float: right;
	padding-left: 20px;
}

.alignleft {
	float: left;
	padding-right: 20px;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/* STRUCTURE
-------------------------------------------------------------------------------*/

body {
	background: #fff;
	font-family: "Special Elite", Courier, cursive;
	font-size: 14px;
	letter-spacing: 0.035em;
	line-height: 1.65em;
	color: #333;
}

/* ---------- HOME NAV ---------- */

.home-nav {
	width: 100%;
}

.home-nav .menu-main-nav-container {
	display: block;
	width: 100%;
	text-align: center;
}

/* ---------- MAIN NAV ---------- */

nav {
	background: #fff;
	height: 75px;
	padding: 2% 5% 0;
	text-align: center;
}

nav h1,
nav .menu-main-nav-container {
	display: inline-block;
}

nav h1 {
	width: 25%;
	font-size: 1.4em;
	text-align: left;
}

nav .menu-main-nav-container {
	width: 75%;
	text-align: right;
}

nav li {
	display: inline-block;
	vertical-align: middle;
	padding: 0 2.25%;
}

nav li.dropdown {
	position: relative;
}

nav li:first-of-type {
	padding: 0 2.25% 0 0;
}

nav li:last-of-type {
	padding: 0 0 0 2.25%;
}

nav a:hover {
	color: #e0dcd9;
}

ul.sub-menu {
	position: absolute;
	left: -80px;
	width: 225px;
	padding-top: 14px;
	text-align: center;
	z-index: 9999;
}

ul.sub-menu li {
	display: block;
	background: #fff;
	padding: 5px 0;
}

ul.sub-menu li:first-of-type {
	padding: 30px 0 5px;
}

ul.sub-menu li:last-of-type {
	padding: 5px 0 30px;
}

ul.sub-menu li a {
	color: #333;
}

ul.sub-menu li a:hover {
	color: #e0dcd9;
}

/* ---------- SECONDARY NAV ---------- */

nav.secondary-nav {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: rgba(255, 255, 255, 0.9);
	border-bottom: 1px solid #dedede;
	z-index: 999999;
	
}

nav.secondary-nav,
nav.responsive-nav {
	display: none;
}

/* ---------- FOOTER ---------- */

footer {
	width: 100%;
	padding: 2%;
	background: #333;
	color: #fff;
}

.footer {
	width: 33%;
	display: inline-block;
	vertical-align: middle;
}

.f-mid {
	text-align: center;
}

#s {
	max-width: 200px;
    	background: #fcfcfc url("images/search.png") 93% 50% no-repeat;
    	background-size: 18px;
	padding: 10px 50px 10px 10px;
	border: none;
	color: #333;
}

::-webkit-input-placeholder {
   color: #333;
}

:-moz-placeholder { /* Firefox 18- */
   color: #333;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #333;  
}

:-ms-input-placeholder {  
   color: #333;  
}

.f-right {
	text-align: right;
}

.f-right img {
	height: 20px;
	margin: 0 5px;
}

/* FRONT PAGE
-------------------------------------------------------------------------------*/

.front {
	background: url(images/dustbowl.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding: 6% 0 8%;
}

.front article {
	width: 90%;
	margin: 0 auto;
}

.front h1 {
	font-size: 2.5em;
	color: #fcfcfc;
}

.front h2 {
	max-width: 650px;
	padding-top: 30%;
	float: right;
	font-size: 1.5em;
	text-align: right;
	color: #fcfcfc;
}

.front h1,
.front h2 {
	line-height: 1.15em;
}

.front a {
	color: #fcfcfc;
	border-bottom: 1px solid #fcfcfc;
	opacity: 1;
}

.front a:hover {
	opacity: 0.7;
}


/* PAGES
-------------------------------------------------------------------------------*/

h1.page-header {
	background: url('http://www.theroadrevisioned.com/wp-content/uploads/2016/01/road.jpg') center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding: 12.5% 2%;
	letter-spacing: 0.05em; 
	text-align: center;
	text-transform: uppercase;
	color: #fcfcfc;
}

.default article {
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
	padding: 4% 0 5%;
}

.search article:first-of-type {
	padding: 3% 0 20px;
}

.search article {
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
	padding: 20px 0;
}


/* CHAPTERS
-------------------------------------------------------------------------------*/

#chapter-list {
	padding: 4%;
}

#chapter-list h2 {
	padding: 1% 0;
	text-align: center;
}

#chapter-list span.entry-title-primary {
	display: inline-block;
}

#chapter-list span.entry-subtitle {
	display: inline-block !important;
	font-size: 1em !important;
}

#chapter-list span.entry-subtitle:before {
	content: "|";
	margin-right: 8px;
}

/* ---------- SINGLE POSTS ---------- */

.single span.entry-subtitle {
	padding-top: 10px;
	font-size: 0.6em;
}

.single article {
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
	padding: 4% 0 5%;
}

#post-footer {
	margin-bottom: -1%;
}

#post-footer img {
	width: 100%;
	height: auto;
}

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

@media screen and (max-width: 1080px) {

/* NAV */

nav.primary-nav {
	display: none;
}

nav.responsive-nav {
	display: block;
	height: 100%;
	padding: 2% 0;
	text-align: center;
}

nav.responsive-nav .nav-title:hover {
	cursor: pointer;
}

nav.responsive-nav h4 {
	margin: 3% auto;
	text-transform: uppercase;
}

nav.responsive-nav ul {
	padding-bottom: 3%;
}

nav.responsive-nav li {
	display: block;
	padding: 1% 0;
}

nav.responsive-nav ul.sub-menu {
	position: static;
	left: 0;
	width: 100%;
	padding: 2% 0;
}

nav.responsive-nav ul.sub-menu li {
	padding: 1% 0;
}

}

@media screen and (max-width: 840px) {

.front {
	background: url("http://www.theroadrevisioned.com/wp-content/uploads/2016/01/two-dust-bowl-refugees-sm.jpg") no-repeat center center fixed; 
}

h1 {
	font-size: 1.8em;
}

h2 {
	font-size: 1.4em;
}

h3 {
	font-size: 1.35em;
}

}

@media screen and (max-width: 740px) {

.footer {
	display: block;
	width: 100%;
}

.f-right,
.f-left {
	padding: 1% 0;
	text-align: center;
}

.f-left p {
	text-align: center;
}

.f-mid {
	display: none;
}

}