/*
Theme Name: Just Mercy
Theme URI: http://justinelm.com/
Author: Justin Elm
Author URI: http://justinelm.com/
Description: A custom theme made for Bryan Stevenson in cooperation with Random House LLC.
Version: 1.0
*/

/*** RESET ***/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}

/*** FORM ***/

/*** GLOBAL ***/
body, html {
  background-color: #EAEAEA;
}

body, html {
  background-image:  url(resources/images/leaves1.png), url(resources/images/leaves2.png);
  background-position: left top, right top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

div#wrapper {
  width: 100%;
}

section#content[role=main] {
  width: 850px;
  margin: 0 auto;
  padding-top: 50px;
}

/*** TYPOGRAPHY ***/

@font-face {
  font-family: din;
  src: url('./resources/fonts/din.ttf');
}

@font-face {
  font-family: didot;
  src: url('./resources/fonts/Didot.ttc');
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  margin-top: 5px;
}

h1 {
  font-size: 40px; 
}

h2 {
  font-size: 35px; 
}

h3 {
  font-size: 30px; 
}

h4 {
  font-size: 25px; 
}

h5 {
  font-size: 20px; 
}

h6 {
  font-size: 15px; 
}

p {
  line-height: 1.6em;
  margin: 10px 0;
}

a {
  text-decoration: none; 
}

a:hover {
  text-decoration: underline; 
}

a:active,
li.current-menu-item a {
  text-decoration: underline; 
}

b, strong {
  font-weight: bold;  
}

em {
  font-style: italic;  
}

nav#menu[role=navigation] li {
  font-family: din; 
}

body, html {
  font-family: didot; 
}

div#home-left-column {
  font-size: 35px;
}

div#press-content {
  font-size: 25px; 
}

div.quote,
div.praise-quote,
div.praise-author,
div#book-content p,
div#author-caption {
  font-size: 20px; 
}

h1.page-title,
nav#menu[role=navigation] li {
  text-transform: uppercase;
}

h1.page-title,
div#book-image,
div#author-image,
div#social-media,
div#purchase-links,
div#book-praise h3,
div#home-secondary-image,
nav#menu[role=navigation] {
  text-align: center;
}

div.press-author,
div.praise-author {
  text-align: right;
}

div#contact-content {
  line-height: 200%; 
}

div.quote,
div#author-caption,
div.single-article p,
section.entry-summary,
div.individual-story p {
  line-height: 125%; 
}

div.column-info,
div.praise-quote,
div#book-content p {
  line-height: 115%; 
}

a,
body, 
html,
hr.header-bar,
hr.home-bar
hr.page-bar,
hr.column-bar {
  color: #000000;
}

/*** HEADER ***/
header#header[role="banner"] {
  width: 1100px;
  margin: 0 auto; 
}

div#banner-image {
  padding-top: 25px;
  margin-bottom: -25px;
}

div#banner-image img {
  width: 620px;
}

/*** NAV ***/
nav#menu[role=navigation] {
  width: 1100px;
  margin: 0 auto;
}

nav#menu[role=navigation] ul {
  margin-top: 15px;
  margin-bottom: 15px;
}

nav#menu[role=navigation] li {
  display: inline;
  margin: 10px;
}

hr.header-bar {
  width: 1100px;
  height: 2px;
  background-color: #000000;  
  border: none;
}

div#container {
  width: 100%; 
}

/*** ALL TEMPLATES ***/
hr.page-bar {
  width: 300px;
  height: 2px;
  background-color: #000000;  
  border: none;
  margin-bottom: 40px;
}

/*** HOME PAGE TEMPLATE ***/
div#home-content {
  margin: 0 auto;
}

img#hero-image {
  float: left; 
  margin-right: 30px;
}

div.quote {
  padding: 20px;
  margin: 30px;
}

div#quotes,
img#hero-image {
  margin-bottom: 30px; 
}

div#home-secondary-image {
  width: 400px;
  margin: 0 auto;
  background-color: black; 
}

hr.home-bar {
  width: 100%;
  height: 2px;
  background-color: #000000;  
  border: none;
}

div#author {
  margin-top: 30px; 
  margin-bottom: 30px; 
}

div#author iframe {
  float: right; 
}

img#stevenson {
  margin-right: 15px;
}

#story-headline {
  padding: 25px; 
  text-align: center;
}

/*** HOME PAGE AND SEE THE STORIES TEMPLATES ***/
div.story img {
  height: 150px; 
}

div.story p {
  text-align: center; 
}

div.story {
  position: relative;
  float: left;
  width: 250px;
  height: 200px;
  margin: 15px;
}

img.story-image {
  position: relative;
  display: block;
  height: 150px; 
  margin: auto;
}

/*** BOOK PAGE TEMPLATE ***/
div#book-image {
  float: left; 
  width: 300px;
  padding-left: 50px;
  padding-right: 50px;
}

div#book-image h3 {
  margin-top: 25px; 
}

span.purchase-link img {
  margin: 15px;
}

div#book-content {
  min-height: 700px;
}

div#book-praise {
  width: 60%;
  margin: 20px auto;
}

div#book-praise h3 {
  text-decoration: underline; 
}

div.praise-quote {
  margin-top: 20px;
}

div.praise-author {
  margin: 15px;
}

/*** AUTHOR PAGE TEMPLATE ***/
div#author-caption {
  padding-bottom: 25px;
  text-align: center;
}

/*** CONTACT PAGE TEMPLATE ***/
div#contact-content {
  margin-top: 30px;
}

div#social-media {
  width: 40%;
  margin: 20px auto;
}

div#social-media img {
  margin: 15px;
}

/*** NEWS/BLOG TEMPLATE ***/
div.blog-entry {
  margin-top: 30px; 
}

span.entry-date {
  font-style: italic;
}

div.single-article p,
section.entry-summary {
  margin-top: 10px; 
}

/*** EVENTS TEMPLATE ***/
div.event {
  margin-top: 25px; 
}

div.event-date {
  margin-top: 10px; 
}

/*** INDIVIDUAL STORY TEMPLATE ***/
div.individual-story {
  height: 300px;
  margin-top: 20px;
}

div.individual-story p {
  padding: 20px;
}

div.individual-story img {
  float: left;
  margin-right: 20px;
  max-width: 300px;
  max-height: 300px;
}

div.back-to-link {
  margin-top: 30px; 
}

/*** GET INVOLVED TEMPLATE ***/
div#get-involved-content p {
  font-size: 20px;
}

div#get-involved-content a {
  text-decoration: underline;
}

div#get-involved-content ol li {
  list-style-type: decimel;
  margin-bottom: 25px;
}

/*** FOOTER ***/
footer#footer[role=contentinfo] {
  min-height: 50px; 
  margin-top: 50px;
}

footer#footer[role=contentinfo] p {
  float: right;
  margin: 20px;
}

/*** RESPONSIVE ***/
@media only screen and (max-width: 800px) {

body, html {
  background-image:  url(resources/images/leaves3.png);
  background-position: top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: auto 10%;
}

body,
div#author,
div#wrapper,
div#container,
div.blog-entry,
div#banner-image,
div#discussion-content,
nav#menu[role=navigation],
header#header[role="banner"] {
  width: 700px !important;
}

section#content[role=main] {
  min-height: 900px;
}

h1.page-title {
  margin: 0 auto; 
}

h1.page-title,
article.post,
hr.page-bar,
hr.header-bar,
div.blog-entry,
section#content[role=main],
div#get-involved-content {
  width: 90% !important; 
}

nav#menu[role=navigation],
nav#menu[role=navigation] ul,
nav#menu[role=navigation] li,
div#book-praise, 
nav#menu {
  display: none; 
}

div#author-caption {
  height: 500px !important; 
}

div#individual-story-content iframe,
div#video-content iframe {
  width: 630px !important; 
}

div#get-involved-content {
  margin: 0 auto;
}

div#author {
  width: 95%; 
}

div#author iframe {
  float: none; 
  width: 560px;
  margin: 50px auto;
  display: block;
}

img#stevenson {
  width: 210px;
  margin: 0 auto;
  display: block;
}

}