/*	File Name: style.css
	Theme Name: Sickle Claw
	Theme URI: http://sickleclaw.com
	Author: Charles J Mize
	Author URI: http://sickleclaw.com
	Description: Theme designed specifically for the Sickle Claw website.
	Version: 2.0
*/

@font-face { font-family: Sickle Claw; src: url('fonts/sickleclaw.otf'); } 
@font-face { font-family: Griffo; src: url('fonts/griffo.otf'); } 

html { width: 100%; min-height: 100%; }
body { height: 100%; max-height: 100%; margin: 0; font-family: 'Griffo', serif; font-weight: 300; font-size: 14px; overflow-x: scroll; overflow-y: hidden; }
p { margin: 0; }
a { text-decoration: none; color: #333333; }

#mobile-test { display: block; background-color: transparent; width: 20px; height: 20px; margin: 0; padding: 0; border: 0; }

footer { position: fixed; left: 0; bottom: 0; height: 100%; width: 100%; z-index: -1; }
#slideshow-front { position: fixed; left: 0; bottom: 0; width: 100%; height: auto; z-index: 0; background-color: transparent; }
#slideshow-back { position: fixed; left: 0; bottom: 0; width: 100%; height: auto; z-index: -1; background-color: transparent; }

#left-block { display: inline-block; margin: 0; padding: 60px; padding-top: 30px; width: 250px; float: left; height: 100%; }
#logo { margin: 0; }
#title { font-family: "Sickle Claw"; font-size: 36px; text-align: center; color: black !important; }
#subtitle { text-align: center; text-transform: uppercase; line-height: 110%; }
#a-series-of { font-size: 16px; }
#magic-and-wonder { font-size: 24px; }
#in-the-age-of-the { font-size: 16px; }
#dinosaurs { font-size: 30px; }

nav { font-family: "Sickle Claw"; font-size: 20px; text-align: center; text-transform: lowercase; padding: 50px; }
nav ul { margin: 0; padding: 0; }
nav li { list-style-type: none; margin: 6px;  }
nav li a { color: black; text-decoration: none; }

#scroll-instruction { display: block; position: absolute; right: 0; top: 0; padding: 10px; text-transform: uppercase; color: #E0E0E0; }
#scroll-instruction img { margin-left: 10px; opacity: 0.1; }

.content { position: absolute; padding-top: 30px; }
#featured-image { display: block; float: left; width: 427px; height: auto; }
#featured-image img { vertical-align: top; box-shadow: 10px 10px 30px rgba(0,0,0,0.5); }
.maincopy { position: absolute; display: block; float: right; margin-left: 60px; padding-right: 60px; text-align: justify; height: 420px; width: 300px; column-gap: 20px; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-fill: auto; -moz-column-fill: auto; line-height: 1.4; }
.maincopy p { margin: 0; text-indent: 15px; }
.maincopy a { color: #1B871F; text-decoration: none; font-weight: bold; }
.content .title { font-family: "Sickle Claw"; font-size: 24px; text-align: left; }
.content .subtitle { text-align: left; text-transform: uppercase; line-height: 100%; font-weight: bold; margin-bottom: 20px; }
.illustration img { box-shadow: none !important; }

#options { display: block; position: absolute; }
.category-title { font-weight: bold; text-transform: uppercase; font-size: 32px; display: block; padding-bottom: 20px; }
.option {padding-right: 60px; display: inline-block; vertical-align: bottom; }
.option .thumbnail { width: 100%; height: auto; margin-bottom: 6px; }
#illustrations .option .thumbnail img { width: 280px; height: auto; box-shadow: 10px 10px 30px rgba(0,0,0,0.5); border: 1px solid rgba(100,60,0,0.3); background-color: white; padding: 8px; }
#books .option .thumbnail img { width: 280px; height: auto; box-shadow: 10px 10px 30px rgba(0,0,0,0.5); border: 0; padding: 0; }
.option-title { cursor: pointer; }
.option .title { font-weight: bold; text-transform: uppercase; font-size: 20px; text-align: center; font-family: inherit; }
.option a { text-decoration: none; color: black; }
.option .subtitle { font-weight: normal; text-transform: uppercase; font-size: 12px; text-align: center; line-height: 1; } 

#question-form { width: 250px; display: inline-block; text-align: justify; padding-right: 60px; }
#question-form form { margin-top: 20px; }
#question-form form p { font-size: 80%; text-transform: uppercase; }
#question-form form input { background-color: white; width: 240px; border: 1px solid rgba(0,0,0,0.3); box-shadow: 0 4px 10px rgba(0,0,0,0.2); margin-top: 5px; margin-bottom: 20px; padding: 4px; }
#question-form form textarea { z-index: 2; background-color: white; width: 240px; border: 1px solid rgba(0,0,0,0.3); box-shadow: 0 4px 10px rgba(0,0,0,0.2); margin-bottom: 10px; padding: 4px; height: 3em; }
#question-form form input[type="submit"] { font-family: "Sickle Claw"; font-size: 70%; color: #444; text-transform: lowercase; background-color: #CCC; display: block; width: 120px; margin: 0 auto; padding: 4px; margin-top: 20px; cursor: pointer; }

#thank-you p { margin-bottom: 5px; }
#thank-you-form { margin: 20px; }
.back { width: 90px; margin-top: 30px; padding: 8px; font-weight: bold; color: white; background-color: grey; cursor: pointer; }

#answers { position: absolute; }
#answers .entry { display: inline-block; vertical-align: top; width: 280px; height: 360px; margin-right: 40px; }
#answers .question { text-align: left; font-weight: bold; margin-bottom: 4px; }
#answers .source { text-align: left; font-size: 60%; font-style: italic; color: grey; margin-bottom: 12px; }
#answers .answer { text-align: justify; column-gap: 20px; -webkit-column-fill: auto; column-fill: auto; -moz-column-fill: auto; }

#answers .next-previous { margin-top: 30px; font-size: 20px; font-weight: bold; }
#answers .previous { text-transform: uppercase; float: left; }
#answers .previous a { text-decoration: none; color: rgba(0,0,0,0.1); }
#answers .previous span { margin-left: 20px; }
#answers .previous img { display: block; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); opacity: 0.1; }
#answers .next { text-transform: uppercase; float: right; margin-right: 40px; }
#answers .next a { text-decoration: none; color: rgba(0,0,0,0.1); }
#answers .next img { margin-left: 20px; display: block; opacity: 0.1; }

.social { max-width: 310px; margin: 0 auto; margin-top: 40px; text-align: center; }
.social .share-item { display: inline-block; cursor: pointer; }

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

#mobile-test { display: none; }

body { overflow-x: auto; overflow-y: auto; }
#scroll-instruction { display: none; }
#left-block { position: relative; display: block; float: none; margin: 0 auto; height: auto; padding-bottom: 0; }
.content { position: relative; display: block; float: none; margin: 0 auto; padding: 0; width: 100%; height: auto; margin-bottom: 180px; }
.maincopy { position: relative; display: block; float: none; margin: 0 auto; padding: 0; height: auto; width: 80%; }
#options { position: relative; display: block; float: none; margin: 0 auto; padding: 0; }
.category-title { text-align: center; }
.option { position: relative; display: block; float: none; margin: 0 auto; padding: 0; margin-bottom: 30px; }
#featured-image { float: none; margin: 0 auto; margin-bottom: 60px; width: 90%; height: auto; }
#featured-image img { width: 100%; vertical-align: top; }
.social { max-width: 100%; }
.social .share-item { padding: 10px; }
#question-form { display: block; width: 80%; margin: 0 auto; padding: 0; }
#question-form form input { width: 96%; padding: 2%; }
#question-form form textarea { width: 96%; padding: 2%; }
#answers { position: relative; display: block; float: none; margin: 0 auto; width: 80%; padding: 0; padding-top: 20px; }
#answers .entry { display: block; width: 100%; margin: 0; padding: 40px 0; height: auto; }
#answers .next, #answers .previous { margin-right: 0; margin-bottom: 180px; }
#answers .next a, #answers .previous a { color: rgba(0,0,0,1); }
#answers .next img, #answers .previous img { opacity: 1; }
#books .option .thumbnail img { width: 298px; display: block; margin: 0 auto; }
#illustrations .option .thumbnail img { width: 298px; display: block; margin: 0 auto; }
}