html {
	font-size: 16px;
}

/* large monitor */


@media screen and (min-width: 1001px) {
	body {
		color: 					#404040;
	font-size:           	14pt; 
		font-family:         	century gothic, verdana, tahoma, arial, sans-serif;
		background: 			linear-gradient(to right, #F8F8F8,  #D8D8D8);
	}
}

/* mobile display */

@media screen and (max-width: 1000px) {
	body {
		color: 					#404040;
		font-size:           	18pt !important; 
		font-family:         	century gothic, verdana, tahoma, arial, sans-serif;
		background: 			linear-gradient(to right, #F8F8F8,  #D8D8D8);
	}
}


h1 {
  	color:               	#040406;
	font-size:           	200%;
  	text-shadow: 			3px 3px 3px  #585858;
}




h2 {
  	font-size:           	130%;
}

h3 {
	color:               	#383838;
}



#allcontent {
	max-width:				1000px;
	margin-top: 			15px;
	margin-left:			auto;
	margin-right:			auto;
}

#header {
	background-image:		url(images/skyline02.jpg);
	background-repeat: 		no-repeat;
	background-size: 		100vw;
	max-width:				100vw;
	height:					120px;
	border-width:			thin;
	border-style:			solid;
	border-color:			#ffcc00;
	border-radius:			6px;
	border-bottom:			#000000;
	text-align:				center;
	box-shadow: 			3px 3px 3px #888888;
	display: 				block;
}

#header > h1 {
  	color:               	#FFDB4D;
	font-size: 200%;
}

/* ====================================================================================== */
/* =============================  NAVIGATION BAR ======================================== */
/* ====================================================================================== */

/* 	The navigation bar is a div element.
	 Its id is: #button_panel
	 Its class is either .navbar or .navbar.responsive (the class name changes dynamically) 

	 The toggling happens because the JavaScript sets up a click event handler on the hamburger
	 (which is identified by an id that doesn't change) which changes the class name back and 
	 forth between the two values.

	 On mobile displays, when the menu elements are visible, we want them laid out vertically.
	 This means float:none and display:block so each <a> is on a different line.

*/

.navbar {
	text-align:				center;
	background-color: 	  black;
	background-image: 		none;
	font-size: 				120%;
	margin-bottom: 			15px;
	margin-top: 			0px;
	padding-top: 			5px;
	padding-bottom: 		5px;
	display: block;
}

.navbar a {
	color:               	#FFDB4D;
	list-style-type:		none;
	display:				inline-block;
	padding-left:			25px;
	padding-right:			25px;
}

.navbar a:link {
	color:               	#FFDB4D;
}

.navbar a:visited {
	color:               	#FFDB4D;
}

/*
.navbar a:hover{
	font-size:				95%;
	text-decoration:		none;
  	text-shadow: 			none;
	background-color: 		#50896C;
}
*/

/* For non-mobile display, hide the hamburger icon */
.navbar .hamburger-icon {
    display: none;
}

/* CREATE THE HAMBURGER LINES */
.navbar .hamburger-icon .hamburger-line {
        width: 75px;
        height: 8px;
        background-color: #ffcc00;
        margin-top: 15px;
        transition: 0.4s;
        color: white;
    }



/* When the screen is less than 1000 pixels wide, hide all "normal" links, except for the first one ("Home"). 
   Reveal the link that contains the hamburger icon */
@media screen and (max-width: 1000px) {
    .navbar a {
        display: none;
    }

    .navbar .hamburger-icon {
        display: block;
		width: 72px;
		height: 72px;
		margin-left: auto;
		margin-right: auto;
    }
}


@media screen and (max-width: 1000px) {
    .navbar.responsive {
        position: relative;
		align-items: center;
    }

	.navbar.responsive div.hamburger-icon {
        display: block;
		width: 70px;
		margin-left: auto;
		margin-right: auto;
    }

    .navbar.responsive a {
        float: none;
        display: block;
		text-align: left;
		margin-top: 20px;
		margin-bottom: 20px;
		padding-top: 0px;
		padding-bottom: 10px;
    }
	/* last <a> doesn't need a bottom border; the others do */
	.navbar.responsive a:not(:last-child) {
		border-bottom-width: 5px;
		border-bottom-style: groove;
		border-bottom-color: #3d3003;
 }
	.navbar.responsive a:last-child {
		border-bottom-width: 0px;
		border-bottom-style: none;
		margin-bottom: 0px;
	}
} 





/* ====================================================================================== */

.clear {
	clear: right;
}

#booklinks_panel li{
	background: 			linear-gradient(to right, #52527A, #1F1F2E);
	margin:					5px;
	padding:				10px 10px 10px 10px;
	display:				inline-block;
	text-align:				center; 
	font-weight:			bold;
	font-size:				85%;
	border-radius:			3px;
	color:					#FFFF9D;
}

#booklinks_panel li a:link{
	color:					#FFFF9D;
}

#booklinks_panel li a:visited{
	color:					#FFFF9D;
}

/* responsive: make the book links into a vertical, not horizontal menu */


@media screen and (max-width: 1000px) {
	#booklinks_panel li{
		display:				block;
		text-align:				left;	
	}
}

#story{
	background-color:		#eeeeee;
	color:					#000000;
	padding-left:			25px;
	padding-right:			20px;
	border-radius:			6px;
	font-family:			Times New Roman, serif;
  	font-size:       		110%;
}


p.storyheader{
	text-align:				center;
	margin-right: 			0.6cm;
	margin-bottom: 			0cm;
}


#storycontent{
	margin-right: 			0.6cm;
	margin-bottom: 			0cm;
}

/* large-display inserts */
@media screen and (min-width: 1001px) {
	.insert_panel {
		width:					200px;
		padding:				20px;
		margin:					5px;
		float:					right;
		font-family:			serif;
		color:					#9966FF;
		border-width:			none;
		text-align:				center;

	}
}

/* mobile-display inserts */
@media screen and (max-width: 1000px) {
	.insert_panel {
		width:					200px;
		padding:				20px;
		margin:					5px;
		font-family:			serif;
		color:					#9966FF;
		border-width:			none;
		text-align:				center;
	}
}

/* mobile-display images */
@media screen and (max-width: 1000px) {
	img {
		display: block;
		margin-bottom: 10px;
		width: auto;
	}
}

#centre_panel {
	margin-top: 			10px;
	padding:				10px;
	padding-left:			30px;
	border-width:			thin;
	border-color:			#222222;
	text-align:				left;
	display: block;
}

#side_column_panel {
	background-image:		url(images/skull.jpg);
	background-repeat:		repeat-y;
	padding:				10px;
	float:					right;
	width:					100px;
	text-align:				center;
	margin-right:			10px;
}

#footer {
	background-image:		url(images/skull.jpg);
	text-align:				center;
	font-size:				70%;
	clear:					both;
	border-width:			thin;
	border-style:			solid;
	border-color:			#333333;
	border-radius:			6px;	
	color:					#CDCDCD;
	box-shadow: 			3px 3px 3px #888888;
}

a:link {
	color:					#50896C;
	text-decoration:		none;
}

a:visited {
	color:					#50896C;
	text-decoration:		none;
}

a:hover {
	color:					#B80000;
	text-decoration:		none;
	font-size:				95%;
}

q {
	font-style:				italic;
	color:					#934AB8;
}

em {
	font-family:			serif;
	font-size:				120%;
	color:					#9966FF;
}

.highlight_text {
  	color:               	#ffcc00;
}

img {
	border-radius:			4px;
	box-shadow:				3px 3px 3px #888888;
}


h1 a:link {
  	color:               	#040406;
  	text-shadow: 			3px 3px 3px  #585858;
	font-size:				100%;
}

h1 a:visited {
  	color:               	#040406;
  	text-shadow: 			3px 3px 3px  #585858;
	font-size:				100%;
}

h1 a:hover {
  	color:               	#040406;
  	text-shadow: 			3px 3px 3px  #585858;
	font-size:				100%;
}