@charset "UTF-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300);
html, body {
	font-size:100%;
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
}
#main-navigation  h1 {
	content:url(images/pulse.png);
	position:fixed;
	background-color:white;
	padding:1.25em;
	padding-right:100%;
	box-shadow: -0.625em 0.625em 1.25em 0.3125em white; /* gives the header a drop shadow so there is a smooth transition when scrolling */
	z-index: 2;
}
#main-navigation nav {
	font-weight:700;
	width:19.625em;
	left:-15.75em;
	height:100vh;
	position:fixed;
	overflow:auto;
	margin-top:7.5em;
	transition: left 0.5s
}
body.show-nav #main-navigation nav {
	left:0;
}
#main-navigation nav::-webkit-scrollbar { 
    display: none;	/* hides scrollbar from nav bar, keeps clean look */
}
body.show-nav #toggle-nav {
	transform: rotate(-180deg); /* when the nav bar becomes active, the arrow rotates */
}
#toggle-nav {
	content: "";
	position: absolute;
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin-left:16.75em;
	padding-top:4em;
	background: transparent url("images/pointer.png") no-repeat center center;
	background-size: contain;
	transition: transform 0.5s;	/* animate the rotation of the arrow  */
}
body.show-nav #nav-links li:hover {
	background-color: #1A96C1;	/* when the nav bar is inactive, the color does not change on hover. keeps from being distracting */
}
#nav-links li {
	background-color:#27A9E1;
	color:white;
	float:left;
	width:18.625em;
	height:3.125em;
	color:#000;
	padding-left:.625em;
	padding-top:0.25em;
    transition: background 0.5s linear;	/*animate the background colour change for smooth transition */
	display:hidden;
	font-weight:300;
}
#nav-links .story {
	color:white;
	font-weight:300;
}
#nav-links a {
	color:white;
	font-weight:600;
	text-decoration:none;
}
#nav-links li:hover {
	background-color:#27A9E1;
}
#nav-links li:last-child {
	padding-bottom:8.125em; /* ensures the last item in the nav bar doesn't get cut off by ui elements */
}
#nav-links li:first-child  {
	height:2.5em;
	padding-top:1.25em;
}
#nav-links li a {
	display:block;
}
#content {
	width:60em;
	line-height:150%;
	padding-left:10em;
	transition: padding-left 0.5s;
}
body.show-nav #content, body.show-nav #acknowledgements {
	padding-left:26em; /* using the code from tutorials to creating the sliding nav bar. when the div created by js is active the padding changes. */
}
#content article {
	padding-top:10em;
}
#content article a {
	float:right;
	width:10em;
	padding:0.5em;
	height:3em;
	display: block;
	background-color:#27A9E1;
	transition: 0.5s;
	text-transform: lowercase;
	text-decoration: none;
	text-align:right;
	font-weight:600;
	font-size: 80%;
	}
#content article a:visited, a:active {
	color:white
}
#content article a:hover {
	background-color:#1A96C1;
}
#content .story header, #foreword header, #introduction header { /* creates the red box header for all relavent classes */
	font-weight:600;
	float:left;
	width:20em;
	height:8em;
	background-color:#ef3e36;
	transition: 0.5s;
	color:white;
	font-size:125%;
	padding:.75em;
	margin-right:100vw;
	margin-bottom:1.25em;
	line-height:120%;
}
#content header h2 {
	font-weight:300;
	font-size:90%;
}
#content .story header:hover, #foreword header:hover, #introduction header:hover {
	background-color:#ce231b;	/* colour change on hover for header boxes */
}
#content p {
	margin:1.25em 0 1.25em 0;
}
#title-page info {
	padding:0;
	background-color:white;
	color:black;
}
#title-page header h1 {
	display:none;

}
#title-page header h2 {
	font-weight:600;
	font-size:150%;
	margin-bottom:1em;
	line-height:150%;
}
#title-page header h3 {
	font-weight: 600;
	font-size:125;
	margin-bottom:2em;
}
#title-page p {
	line-height:80%;
}
#the-bringer img {
	width:90%;
}
#on-the-beach, #the-archeological-dig, #night-walk, #sunday-afternoon, #nuts, #love-song, #canberra, #whats-inside {
	line-height:100%; /* changes the leading for poems to better suit the medium */
}
#how-not-to-write p:nth-of-type(1n+4) {
	font-size:80%; /* starting with the fourth <p> the text is smaller. used for the definitions */
	margin: .2em;
}
#how-not-to-write strong {
	font-weight:600;
}
#contents {
	display:none;
}
#biographical-notes header {
	background-color:white;
}
#biographical-notes strong {
	font-weight:600;
	float:left;
	width:25em;
	height:8em;
	background-color:#ef3e36;
	transition: background 0.5s;
	color:white;
	font-size:125%;
	padding:10px;
	margin-right:1em;
}
#biographical-notes strong:hover {
	background-color:#ce231b;
}
#biographical-notes p {
	margin-bottom:3em;
	height:9.375em;
	font-size:90%;
}
#biographical-notes h1 {
	font-weight:600;
	font-size:125;
}
#acknowledgements {
	margin-top:15em;
	margin-bottom:3em;
	padding-left:13em;
	width:70em;
	transition:padding-left 0.5s;
	font-size:75%;
}
	
/* _____________________ */
/* /// MEDIA QUERIES /// */
/* --------------------- */

@media all and (max-width: 1300px) {
	#content {
		width:40em;
	}
	#content .story header, #foreword header, #introduction header {
		width:15em;
		height:6em;
		font-size:110%;
		transition: 0.5s;
	}
	#content article a {
		width:6em;
		height:2em;
		display: block;
	}
	#biographical-notes strong {
		width:14em;
		height:8em;
	}
	#title-page p {
		line-height:125%;
	}
}
@media all and (max-width: 960px) {  /* makes changes to widths, text size, padding etc. of divs to better suit the smaller horizontal resolution */
	#main-navigation h1 {
		height:5em;
		width:auto;
	}
	#main-navigation nav {
		margin-top:6em;
	}
	#content {
		width:40em;
		padding:5em;
		padding-top:0em;
	}
	#acknowledgements {
		width:40em;
		padding-left:7em;
		margin-top:4em;
	}
	#content .story header, #foreword header, #introduction header {
		width:10em;
		height:6em;
		font-size:90%;
		transition: 0.5s;
	}
	#content article a {
		width:6em;
		height:2em;
		display: block;
	}
	body.show-nav #content, body.show-nav #acknowledgements {
		padding-left:20em;
	}
	#title-page p {
		line-height:150%;
	}
	#biographical-notes h1 {
		margin-bottom:-2em;
	}
	#biographical-notes strong {
		width:10em;
		height:4em;
		margin-right:100%;
	}
	#biographical-notes p {
		margin-top:6em;
		margin-bottom:1em;
		width:40em;
	}
}
@media all and (max-width: 600px) { /* changes to shape of headers (long and short). continuing to decrease width etc. */
	#main-navigation h1 {
		height:3em;
		width:auto;
	}
	#main-navigation nav {
		margin-top:4em;
		font-weight:600;
		font-size:90%;
	}
	#content, #biographical-notes {
		width:24em;
	}
	#acknowledgements {
		width: 34em;
		margin-top:4em;
	}
	#content .story header, #foreword header, #introduction header {
		width:100%;
		height:3em;
		font-size:90%;
		transition: 0.5s;
	}
	#title-page p {
		line-height:125%;
	}
	#biographical-notes h1 {
		margin-bottom:-2em;
	}
	#biographical-notes strong {
		width:100%;
		height:3em;
		margin-bottom:1em;
		font-size:90%;
	}
	#biographical-notes p {
		margin-bottom:2em;
		height:13em;
		width:100%;
		margin-right:0;
	}
}
@media all and (max-width: 480px) {
	#main-navigation h1 {
		height:2em;
		width:auto;
		}
	#main-navigation nav {
		font-weight:600;
		font-size:80%;
	}
	#content, #biographical-notes {
		width:20em;
		font-size:90%;
		line-height:120%;
	}
	#acknowledgements {
		width:24em;
		padding-left:6em;
	}
	#content .story header, #foreword header, #introduction header {
		width:20em;
		height:3em;
		font-size:90%;
		transition: 0.5s;
	}
	body.show-nav #content, body.show-nav #acknowledgements {
		padding-left:19em;
	}
	#title-page p {
		line-height:125%;
	}
	#biographical-notes h1 {
		margin-bottom:-2em;
	}
	#biographical-notes p {
		margin-bottom:8em;
		height:12em;
	}
	#biographical-notes strong {
		width:24em;
		height:2em;
		margin-bottom:1em;
	}
}
@media all and (max-height: 700px) { /* using height media queries to change size of header. avoids taking up too much vertical space */
	#main-navigation h1 {
		height:3em;
		width:auto;
	}
	#main-navigation nav {
		margin-top:4.5em;
	}
}
@media all and (max-height: 500px) {
	#main-navigation h1 {
		height:2em;
		width:auto;
	}
	#main-navigation nav {
		margin-top:4em;
	}
}
@media all and (max-height: 320px) and (max-width: 480px) { /* adjustments for landscape phone use. addresses limited vertical space but uses up horizontal */
	#main-navigation h1 {
		height:1.5em;
		width:auto;
	}
	#main-navigation nav {
		margin-top:3em;
	}
	#content {
		width:24em;
		font-size:90%;
	}
	#acknowledgements {
		width:28em;
		padding-left:6em;
		line-height:120%;
	}
	#content .story header, #foreword header, #introduction header {
		width:24em;
		height:3em;
	}
	body.show-nav #content, body.show-nav #acknowledgements {
		padding-left:19em;
	}
	#biographical-notes {
		width:24em;
		margin-bottom:3em;
	}
	#biographical-notes h1 {
		margin-bottom:-2em;
	}
	#biographical-notes p {
		margin-bottom:6em;
		width:28em;
		height:12em;
	}
	#biographical-notes strong {
		width:32em;
		height:2em;
		margin-bottom:1em;
	}
}