@charset "utf-8";

body {
	background-attachment: fixed; 
	background-color: #D8BFD8;
	background-repeat: no-repeat;
	background-size: cover;
	font-family: 'Montserrat', Helvetica, sans-serif;
	font-size: 100%;
	font-weight: 400;
	line-height: 180%;
	margin: 0;
	padding: 0;
	width: 100%;
}

em, i {
	font-style: italic;
}

strong, b {
	font-weight: 600;
}

pre {
	margin: 1.5em 0;
}

pre.inexact {
	font-family: 'Montserrat', Helvetica, sans-serif;
}

/* header and top navigation */

#header {
	margin: 0;
	padding:0;
  	position: fixed;
  	top: 0;
	width: 100%;
	z-index: 3;
}

#nav-bar {
	background-color: #000;
	-webkit-box-shadow: 1px 1px 4px 0 rgba(0,0,0,.2);
	        box-shadow: 1px 1px 4px 0 rgba(0,0,0,.2);
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	display: block;
	margin: 0 auto;
	max-width: 960px;
}

#main-nav a {
	text-decoration: none;
	color: #FFF;
}

#main-nav .logo {
	-ms-flex-line-pack: center;
	    align-content: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-size: 1.5em;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
}

/* main content */

#container {
	background-color: rgba(255, 255, 255, 0.95);
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	display: block;
	margin: 0 auto;
	max-width: 960px;
	padding: 4.5em 20px 15px 30px;
}

h1 {
	font-size: 1.8em;
	line-height: 140%;
	font-weight: 400;
	margin: .5em 0 0;
	padding: 0;
}

h2 {
	font-size: 1.5em;
	line-height: 140%;
	font-weight: 600;
	margin: 0;
	padding: 0;
}

h2 a {
	text-decoration: none;
}

a {
	-webkit-transition: color .2s ease;
	-o-transition: color .2s ease;
	transition: color .2s ease;
}

a:link {
	color: #7B68EE;
}

a:visited {
	color: #3A3172;
}

a:hover {
	color: #A596FF;
}

a:active {
	color: #5B3FFF;
}

.homepage ul,
.archives ul {
	list-style: none;
	margin: 0.3em 0.5em 2em 2em;
	padding: 0;
}

.archives ul {
	margin-top: 0;
}

.archives li {
	margin: 1em 0 2em;
}

.archives #poems-list li {
	margin: 1em 0 0;
}

.date-written {
	text-transform: uppercase;
}

.archives .date-written,
.homepage .date-written {
	color: #909090;
	font-size: 0.6em;
	font-weight: 600;
	grid-area: date;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.summary {
	font-size: 0.9em;
	grid-area: summary;
	line-height: 160%;
	padding: 0;
}

.content h1 {
	font-size: 1.6em;
	line-height: 120%;
	margin-top: 0.8em;
	font-weight: 400;
}

.content p {
	margin: 1.5em 0;
}

.details {
	background-color: lavender;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	font-size: 0.9em;
	margin: 40px auto 30px;
	padding: 1em 1.5em 0.5em 2em;
}

.details p {
	margin: 0 0 0.5em;
	padding: 0;
}

.details .date-written {
	font-size: 0.9em;
}

/* styling for interactive pieces */

h1.interactive-home-link {
	font-size: 1em;
	line-height: 140%;
	-ms-flex-line-pack: center;
	    align-content: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}

h1.interactive-home-link a {
	text-decoration: none;
}

h1.interactive-home-link a:link,
h1.interactive-home-link a:visited {
	color: #7B68EE;
}

h1.interactive-home-link a:hover {
	color: #A596FF;
}

h1.interactive-home-link a:active {
	color: #5B3FFF;
}

/* styling for archive page navigation */

.pages-nav {
	background-color: lavender;
	padding: 10px;
	margin: 3em auto;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 4fr 1fr;
	grid-template-columns: 1fr 4fr 1fr;
}

.pages-nav div {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	text-align: center;
	width: 100%;
}

.pages-nav a {
	padding: 10px 20px;
}

.pages-nav .pages-links {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.pages-nav .page-prev {
	-ms-grid-column: 1;
	-ms-grid-row: 1;
}

.pages-nav .page-next {
	-ms-grid-column: 3;
	-ms-grid-row: 1;
}

.pages-nav .pages-links {
	-ms-grid-column: 2;
	-ms-grid-row: 1;
}

.pages-nav .page-current {
	color: #909090;
	font-weight: 600;
}

/* styling for chapters */

.table-of-contents {
  column-count: 2;
  column-rule: 1px solid #000;
  margin: 1em 0 0;
}

.chapters-list {
 	display: grid;
 	grid-template-columns: 1;
 	grid-template-rows: auto;
	list-style-type: none;
}

.chapters-list li {
	font-size: 1.4em;
	font-weight: 600;
	margin: 0 0 1em;
	
}

.chapters-list a {
	text-decoration: none;
}

.chapter-nav {
	background-color: lavender;
	padding: 10px;
	margin-bottom: 3em;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	-ms-grid-rows: 1;
	grid-template-rows: 1;
	grid-template-areas:
		"prevChap storyLink nextChap";
}

.bottom-chapter-nav {
	margin-top: 3em;
}

.prev-chapter {
	grid-area: prevChap;
	-ms-grid-column: 1;
	-ms-grid-row: 1;
}

.story-link {
	grid-area: storyLink;
	-ms-grid-column: 2;
	-ms-grid-row: 1;
}

.next-chapter {
	grid-area: nextChap;
	-ms-grid-column: 3;
	-ms-grid-row: 1;
}

.chapter-nav div {
	-ms-flex-line-pack: center;
	    align-content: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

/* styling for Selling Mistakes */

.typed-message {
	font-family: "Courier New", Courier, monospace;
}

.rabbit-thoughts {
	font-style: italic;
	font-variant: small-caps;
}

.rabbit-thoughts em,
i em {
	font-weight: 600;
}

.the-end {
	text-align: center;
	text-transform: uppercase;
}

/* footer */

footer {
	margin-top: 30px 30px 0;
	font-size: 0.7em;
	-ms-flex-line-pack: center;
	    align-content: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}

footer p {
	margin: 0;
	padding: 0;
}


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

	/* menu */
	/* https://codepen.io/mutedblues/pen/MmPNPG */

	#main-nav {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 6fr 1fr 1fr 1fr 1fr;
		grid-template-columns: 6fr 1fr 1fr 1fr 1fr;
		    grid-template-areas:
			"logo logo logo . icon"
			"menu menu menu menu menu ";
		-ms-grid-rows: auto;
		grid-template-rows: auto;
	}

	#main-nav a {
		line-height: .75em;
		padding: 25px 20px 25px 30px;
	}

	#main-nav .logo {
		grid-area: logo;
		-ms-grid-row: 1;
		-ms-grid-column: 1;
	}

	#main-nav .nav-item a {
		border-top: 1px solid #3A3172;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		display: block;
		font-size: 1.5em;
		-webkit-transition: background-color .3s ease;
		-o-transition: background-color .3s ease;
		transition: background-color .3s ease;
		width: 100%;
	}

	#stories-nav-link {
		grid-area: stories;
		-ms-grid-row: 1;
		-ms-grid-column: 1;
	}

	#poetry-nav-link {
		grid-area: poetry;
		-ms-grid-row: 2;
		-ms-grid-column: 1;
	}

	#interactive-nav-link {
		grid-area: interactive;
		-ms-grid-row: 3;
		-ms-grid-column: 1;
	}

	#header .menu {
		background-color: #000;
		display: grid;
		-ms-grid-column: 1;
		-ms-grid-row: 2;
		-ms-grid-column-span: 5;
		grid-column-span: 5;
		grid-area: menu;
		grid-template-areas:
			"stories"
			"poetry"
			"interactive";
		margin: 0;
		max-height: 0;
		overflow: hidden;
		padding: 0;
		-webkit-transition: max-height .2s ease-out;
		-o-transition: max-height .2s ease-out;
		transition: max-height .2s ease-out;
	}

	#header .nav-item a:hover,
	#header .menu-btn:hover {
		background-color: #3A3172;
	}

	/* menu icon */

	#header .menu-icon {
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		cursor: pointer;
		grid-area: icon;
		/* using fixed positioning because flex broke in IE
		display: flex;
		align-content: center;
		justify-content: flex-end;
		position: relative;
		*/
		-ms-grid-row: 1;
		-ms-grid-column: 5;
		padding: 33px 20px;
		position: fixed;
		right: 15px;
		top: 0;
		-webkit-user-select: none;
		   -moz-user-select: none;
		    -ms-user-select: none;
		        user-select: none;
		
	}

	#header .menu-icon .navicon {
		background: #FFF;
		display: block;
		height: 0.1em;
		position: relative;
		-webkit-transition: background .2s ease-out;
		-o-transition: background .2s ease-out;
		transition: background .2s ease-out;
		width: 1.7em;
	}

	#header .menu-icon .navicon:before,
	#header .menu-icon .navicon:after {
		background: #FFF;
		content: '';
		display: block;
		height: 100%;
		position: absolute;
		-webkit-transition: all .2s ease-out;
		-o-transition: all .2s ease-out;
		transition: all .2s ease-out;
		width: 100%;
	}

	#header .menu-icon .navicon:before {
		top: 0.5em;
	}

	#header .menu-icon .navicon:after {
		top: -0.5em;
	}

	/* menu btn */

	#header .menu-btn {
		display: none;
	}

	#header .menu-btn:checked ~ .menu {
		max-height: 240px;
	}

	#header .menu-btn:checked ~ .menu-icon .navicon {
		background: transparent;
	}

	#header .menu-btn:checked ~ .menu-icon .navicon:before {
		-webkit-transform: rotate(-45deg);
		    -ms-transform: rotate(-45deg);
		        transform: rotate(-45deg);
	}

	#header .menu-btn:checked ~ .menu-icon .navicon:after {
		-webkit-transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		        transform: rotate(45deg);
	}

	#header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
	#header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
		top: 0;
	}

	/* story divider for small screens */

	hr.story-divider {
	  border: 0;
	  background-color: transparent;
	  height: 0;
	  margin: 2rem auto 2rem;
	  text-align: center;
	  width: 100%;
	}

	  hr.story-divider:before,
	  hr.story-divider:after {
	    background-color: #7B68EE;
	    content: '';
	    height: 1px;
	    left: 0;
	    margin: 0 auto;
	    position: absolute;
	    right: 0;
	    width: 10%;
	  }

	  hr.story-divider:before {
	    transform: rotate(10deg);
	  }

	  hr.story-divider:after {
	    transform: rotate(-10deg);
	  }
}


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

	/* header and top navigation */

	#nav-bar {
		padding: 5px 20px 5px 30px;
	}

	#main-nav {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
	}

	#main-nav a {
		padding: 10px 2em;
	}

	#main-nav a:link,
	#main-nav a:visited {
		color: #FFF;
	}

	#main-nav a:hover {
		color: #A596FF;
	}

	#main-nav a:active {
		color: #5B3FFF;
	}

	#main-nav .logo a {
		padding: 10px 1.8em 10px 0.2em;
		-ms-grid-column: 1;
	}

	.menu {
		display: -ms-grid;
		display: grid;
		-ms-grid-row: 1;
		-ms-grid-column: 2;
		-ms-grid-columns: 1fr 1fr 1fr;
		grid-template-columns: 1fr 1fr 1fr;
	}

	#main-nav .nav-item {
		-ms-flex-line-pack: center;
		    align-content: center;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		font-size: 1.2em;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}

	#stories-nav-link {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
	}

	#poetry-nav-link {
		-ms-grid-row: 1;
		-ms-grid-column: 2;
	}

	#interactive-nav-link {
		-ms-grid-row: 1;
		-ms-grid-column: 3;
	}	

	#header .menu-btn,
	#header .menu-icon {
		display: none;
	}

	/* styling for main content */

	h1 {
		font-size: 2.1em;
	}

	h2 {
		font-size: 1.6em;
	}

	article {
		margin-right: 5em;
	}

	.archives ul,
	.homepage ul {
		margin: 0.3em 5em 2em 0;
	}

	.homepage ul {
		margin: 0.3em 0.5em 2em 0;
	}

	#interactives-list li,
	#poems-list li,
	#stories-list li {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 9em 1fr;
		grid-template-columns: 9em 1fr;
		-ms-grid-rows: auto;
		grid-template-rows: auto;
		margin: 2.5em 0;
	}

	.homepage #interactives-list li,
	.homepage #poems-list li,
	.homepage #stories-list li {
		margin: 1.0em 0 0 0;
	}

	#interactives-list li,
	#stories-list li {
		    grid-template-areas:
			"date title"
			". summary";
	}

	#poems-list li {
		    grid-template-areas:
			"date title";
	}

	.homepage h2,
	.archives h2 {
		grid-area: title;
		-ms-grid-column: 2;
		-ms-grid-row: 1;
	}

	.date-written {
		font-size: 0.7em;
	}

	.summary {
		font-size: 1em;
		padding: 0.5em 0 0;
		-ms-grid-column: 2;
		-ms-grid-row: 2;
	}

	.archives .date-written,
	.homepage .date-written {
		-ms-grid-column: 1;
		-ms-grid-row: 1;
	}

	/*
	hr.story-divider {
		border-top: 1px solid #8c8b8b;
		border-bottom: 1px solid #fff;
		width: 50%;
	}

	hr.story-divider:after {
		content: '';
		display: block;
		margin-top: 2px;
		border-top: 1px solid #8c8b8b;
		border-bottom: 1px solid #fff;
	}
	*/

	/*
	hr.story-divider {
	  border: 0;
	  background-color: transparent;
	  height: 0;
	  margin: 2rem auto 3rem;
	  text-align: center;
	  width: 100%;
	}

	  hr.story-divider:before,
	  hr.story-divider:after {
	    background-color: #000;
	    content: '';
	    height: 1px;
	    left: 0;
	    margin: 0 auto;
	    position: absolute;
	    right: 0;
	    width: 7%;
	  }

	  hr.story-divider:before {
	    transform: rotate(10deg);
	  }

	  hr.story-divider:after {
	    transform: rotate(-10deg);
	  }
	*/

	/* story divider for large screens */

	hr.story-divider {
		display: block;
	    border: none;
	    color: transparent;
	    height: 1px;
	    background: #000;
	    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000), to(transparent));
	    margin: 4em auto;
	}

}

/* IE10+ CSS styles go here */
@media all and (min-width: 700px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	hr.story-divider {
		width: 50%;
	}
}

/* prevent excessive right margin as the viewport gets smaller */
@media screen and (min-width: 700px) and (max-width: 930px) {
	.archives ul,
	.homepage ul {
		margin-right: 1em;
	}

	article {
		margin-right: 1em;
	}

}

/* I use device-width for most background images to prevent loading multiple images if the viewport is resized */

@media screen and (max-device-width : 500px) {
	body {
		-webkit-text-size-adjust: none;
		-moz-text-size-adjust: none;
		 -ms-text-size-adjust: none;
		     text-size-adjust: none;
	}

}

@media screen and (max-width : 500px) and (orientation : landscape) {
	body {
		background-image: url('images/ink-and-oil-500x332.jpg');
		position: absolute;
	}
}

@media screen and (max-width : 500px) and (orientation : portrait) {
	body {
		background-image: url('images/ink-and-oil-500x868.jpg');
		position: absolute;
	}
}

@media screen and (min-device-width : 501px) and (max-device-width : 800px) {
	body {
		background-image: url('images/ink-and-oil-800x532.jpg');
	}
}

@media screen and (min-device-width : 801px) and (max-device-width : 1600px) {
	body {
		background-image: url('images/ink-and-oil-1600x1064.jpg');
	}
}

@media screen and (min-device-width : 1601px) and (max-device-width : 2880px) {
	body {
		background-image: url('images/ink-and-oil-2880x1915.jpg');
	}
}


/* "You are logged in..." header on admin pages */

.admin-page #adminHeader {
	box-sizing: border-box;
	width: 100%;
	padding: 0 10px;
	border-bottom: 1px solid #A596FF;
	margin-bottom: 40px;
	font-size: 0.8em;
}

.admin-page form {
	background: transparent;
	border: 1px solid #D5D5D5;
	margin: 20px auto;
	overflow: auto;
	padding: 40px 20px;
}

/* Give form elements consistent margin, padding and line height */

.admin-page form * {
	line-height: 1em;
}

/* The field labels */

.admin-page label {
	box-sizing: border-box;
	display: block;
	text-align: right;
	width: 100%;
	padding: .4em 1em 0 0;
}


/* The fields */

.admin-page input,
.admin-page select,
.admin-page textarea {
	box-sizing: border-box;
	display: block;
	margin: 0;
	padding: .4em;
	width: 100%;
}

.admin-page input, 
.admin-page textarea, 
.admin-page .date {
	border: 2px solid #B4B3B3;
	background: #FFF;
}

.admin-page input {
	font-size: .9em;
}

.admin-page select {
	border: 2px solid #B4B3B3;
	padding: .4em;
}

.admin-page textarea {
	font-family: 'Montserrat', Helvetica, sans-serif;
	font-size: .9em;
	height: 5em;
	line-height: 1.5em;
}

.admin-page textarea#content {
	font-family: "Courier New", courier, fixed;
}
  
/* Place a border around focused fields */

.admin-page form *:focus {
	border: 2px solid #3A3172;
	outline: none;
}

.admin-page input:valid, 
.admin-page textarea:valid {
	background: #F0F0FF;
}

/* Submit buttons */

.admin-page .buttons {
	grid-column: 1 / span 2;
	text-align: center;
	margin: 40px 0 0 0;
}

.admin-page input[type="submit"] {
	display: inline;
	margin: 0 20px;
	width: 12em;
	padding: 10px;
	border: 2px solid #3A3172;
	color: #FFF;
	background: #3A3172;
	font-weight: 600;
	-webkit-appearance: none;
}

.admin-page input[type="submit"]:hover, 
.admin-page input[type="submit"]:active {
	cursor: pointer;
	background: #FFF;
	color: #3A3172;
}

.admin-page input[type="submit"]:active {
	background: lavender;
	-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
	-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
	box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
}

/* Tables */

.admin-page table {
	width: 100%;
	border-collapse: collapse;
}

.admin-page tr, 
.admin-page th, 
.admin-page td {
	padding: 10px;
	margin: 0;
	text-align: left;
}

.admin-page table, 
.admin-page th {
	border: 1px solid #A596FF;
}

.admin-page th {
	border-left: none;
	border-right: none;
	background: #3A3172;
	color: #FFF;
	cursor: default;
}

.admin-page tr:nth-child(odd) {
	background: lavender;
}

.admin-page tr:nth-child(even) {
	background: #FFF;
}

.admin-page tr:hover {
	background: #CDCDCD;
	cursor: pointer;
}

/* Status and error boxes */

.admin-page .statusMessage, 
.admin-page .errorMessage {
	font-size: .8em;
	padding: .5em;
	margin: 2em 0;
}

.admin-page .statusMessage {
	background-color: #2b2;
	border: 1px solid #080;
	color: #fff;
}

.admin-page .errorMessage {
	background-color: #f22;
	border: 1px solid #800;
	color: #fff;
}

.admin-page .input-block {
	margin: 0 0 2em;
}

.admin-page .no-date-box {
	display: -ms-grid;
		display: grid;
	-ms-grid-columns: 1fr 4fr 15fr;
	grid-template-columns: 1fr 4fr 15fr;
	-ms-grid-rows: 1;
	grid-template-rows: 1;
}

.admin-page .no-date-box label {
	margin: 0;
	padding: 0;
	align-items: flex-end;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: flex-start;
		    -ms-flex-pack: flex-start;
		        justify-content: flex-start;
}

.admin-page input[type="checkbox" i] {
	margin-top: 10px;
}

.admin-page .radio-input {
	display: -ms-grid;
		display: grid;
	-ms-grid-columns: 1fr 1fr 8fr;
	grid-row-gap: 1em;
	grid-template-columns: 1fr 1fr 8fr;
	-ms-grid-rows: 3;
	grid-template-rows: 3;
	grid-template-areas:
		". . ."
		"radio1 label1 ."
		"radio2 label2 .";
}

.admin-page .radio-label label {
	margin: 0;
	padding: 0;
	text-align: left;
}

.admin-page .first-radio-label {
	grid-area: label1;
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}

.admin-page .first-radio-button {
	grid-area: radio1;
	-ms-grid-row: 1;
	-ms-grid-column: 2;
}

.admin-page .second-radio-label {
	grid-area: label2;
	-ms-grid-row: 2;
	-ms-grid-column: 1;
}

.admin-page .second-radio-button {
	grid-area: radio2;
	-ms-grid-row: 2;
	-ms-grid-column: 2;
}

.admin-page .radio-button input[type="radio" i] {

}

#login-form-fields label {
	margin: 0 0 10px;
	text-align: left;
}

#login-form-fields input {
	margin: 0 0 1em 0;
}

@media screen and (max-width: 699px) {
	.admin-page label {
		margin: 0 0 0.5em 0;
		text-align: left;
	}

	.admin-page .input-area {
		margin-bottom: 2em;
	}
}

@media screen and (min-width: 700px) {
	.admin-page #edit-form {
		display: -ms-grid;
			display: grid;
		-ms-grid-columns: 1fr 5fr;
		grid-row-gap: 2em;
		grid-template-columns: 1fr 5fr;
		-ms-grid-rows: auto;
		grid-template-rows: auto;
	}

	.admin-page #login-form {
		width: 50%;
	} 
}