/* Colors: 
000000-black
#1a1a1a - charcoal
#ffe59c - pale yellow
#ba9a30 - dull gold
AB000B - reddish
#00b3c7 - robins egg blue


#00c799-teal
#ff0000 - red
#ffc7d4 - pale reddish
#00c757 - greenish
#2effcf - light blueish
#51586c - blue-gray

MHB
F1EBE4-off-white
BA9A30-dull gold c6a024 less saturate ae943c more saturate
AB000B-dull red

font-family: 'Tangerine', cursive;
font-family: 'Marvel', sans-serif;
*/

/* HTML 5 default tag */
header, main, nav, footer, section, article, figure, figcaption, aside {
	display: block;
}

/*a:link { color: #00b3c7; }*/
a:link { color: AB000B; }
a:visited { color: #51586c; }
a:hover {  	color: #ffffff; }
aside {
	margin-left: 2%;
	text-align: left;
	padding: 0;
	line-height: .8em;
	font-size: 1.1em;
}
aside a {
	text-decoration: underline;
}
body {
	font-family: 'Marvel', sans-serif;
	font-size: 1.2em;
	color: black;
	background-image: linear-gradient(to bottom right, #ffe59c, #ffe59c, #ffffff);
}
/* Descendant selector: removes bullet from creature/gender lists in game */
fieldset ul {
	list-style-type:none;
}
figure {
    display: inline-block;
	vertical-align: top;
	margin: 5px;
	padding: 0;
}
figure img {
    vertical-align: top;
}
figure figcaption {
	width: 200px;
	text-align: center;
	padding: 5px;
}
footer {
	clear: both;
	text-align: center;
	display: block;
}
footer h6 {
	font-size: .6em;
/*	background-image: linear-gradient(to bottom right, #ffe59c, #ffe59c, #ffffff); */
}
h1 {
	font-size: 3.7em;
	font-family: 'Tangerine', cursive;
	color: AB000B;
	font-weight: bold;
}
header {
	text-align: center;
	background-image: url(../images/Moods/broodingKing.jpg);
	background-position: left;
	background-repeat: no-repeat;
	background-color: #1a1a1a;
	color: #ffe59c;
}
nav {   
	background-image: linear-gradient(to bottom right, #000000, AB000B, #ba9a30, #ffe59c, #ffe59c); 
/*	background-color: #000000; */
	letter-spacing: 0.1em;
	font-weight: bold;
	text-align: center;; 
	font-size: 1.4em;
	padding-right: 2em;
	position: relative;
} 
nav ul { 
	list-style-type: none; 
    margin: 0;
}
nav li { 
	padding: 0.5em;
    display: inline-block;
	color: #FFFFFF; 
}
nav a { 
	text-decoration: none; 
    display: block;
}
/*
nav a:link { color: #00c757; }
nav a:visited { color: #2effcf; }
nav a:hover {  	color: #00c799; }
*/
nav ul ul { 
	position: absolute;
	background-color: #00b3c7;
	padding: 0;
	display: none; 
	text-align: left;
	z-index: 16; /* higher index stacks on top */
}
nav ul ul li { 
	border: 1px solid  #000000;
	display: block;
	width: 8em;
	font-size: .8em;
	line-height: .7em;
	padding-left: 1em;
	margin-left: 0; 
	z-index: 16; 
}
nav li:hover ul { display: block; }
picture {
	width: 200px;
}

/* IDs */
#Ancients, #allBooks, #BitingLove, #newReleases {
	clear: both;
}
#allBooks h2, #allBooks h3, #allBooks h4, #newReleases h2 {
	line-height: 50px;
	background-image: linear-gradient(to bottom right, #ffe59c, #ffffff); 
	text-align: center;
}
#gameTab {
	display: none;
}
#goPNRName {
	font-size: 1.2em;
	margin: 16px;
    clear: both;
    display: block;	
}
#indexHeader {
	padding-bottom: 10px;
}
#interestFieldset{
	clear: both;
	width: 18em;
}
#menuSpace {
	height: 20px;
}
#newPNRName {
	margin: 2px;
}
#NewsletterForm {
	margin-left: 5%;
}
#NewsletterForm label {
	display: block;	
}
#NewsletterForm input {
	margin-right: 5px;
}
#PNRName {
	box-sizing: border-box;
	border: 3px black groove;
	border-radius: 4px;
	font-size: 2em;
	text-align: center;
	display: none;
}
#PNRNameGameForm {
	margin-left: auto;
	margin-right: auto;
}
#PNRNameGameForm[type="button"] {
	margin-left: 15px;
}
#pullQuote {
	display: block;
	text-align: center;
	clear: both;
}
#pullQuote a:link { color: #000000; }
#pullQuote a:visited { color: #313730; }
#pullQuote a:hover {  color: AB000B; }
#wrapper {
	margin-left: auto;
	margin-right: auto;
	padding: 2em;
}

/* Classes */
.bold {
	font-weight: bold;
}
.boldItalics {
	font-weight: bold;
	font-style: italic;	
}
.captionRight {
	text-align: right;
	color: black;
    display: block;
	margin-left: 500px;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.centerImg {
	margin-left: auto;
	margin-right: auto;
}
.connectLeft {
	float: left;
	margin: 5px;
}
.connectRight {
	float: right;
	margin: 10px;
}
.currentNav {
	color: #000000;
}
.icon {
	height:40px;
	width: 40px;
}
.italics {
	font-style: italic;
}
.modalPic {
	background-image: url(../images/NLPopup.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.moonrise {
	float: left;
	background-image: radial-gradient(circle, white, #F1EBE4, silver, #BA9A30);
	padding: 5px;
	margin: 5px;
	box-shadow: 3px 3px #333333;
	
}
.myControl {
	/* empty class for js */
}
.NLSignupLabel {
	width: 7em;
/*	float: left; */
	clear: both;
}
.NLSignupField {
	float: left;
}
.notice {
	color: AB000B;
	background-image: linear-gradient(to bottom right, #BA9A30, #F1EBE4);
	font-size: 1.2em;
}
.NLPopupNotice {
	color: AB000B;
	background-image: linear-gradient(to bottom right, #F1EBE4, #FFFFFF);
	font-size: 1.2em;
	
}
.NLStyle {
	color: #000000;
	font-size: 1.2em;
	margin-left: 10%;
	margin-right: 11%;
}
.sunrise {
	float: left;
	background-image: radial-gradient(circle, white, yellow, AB000B);
	padding: 5px;
	margin: 5px;
}
.test {
		color: black;
	background-image: linear-gradient(to bottom right, #FFFFFF, #F1EBE4);
	transition-property: background;
	transition-duration: 2s;
	transition-timing-function: ease-in;
}


/* Media queries */
/* Bootstrap defaults:
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... } (=36em)
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... } (=48em)
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... } (=62em)
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... } (=75em)
*/

/* Reduced browser display */
@media only screen and (max-width: 58em) {
	.myCarouselCaption {
		font-size: .9em;
		line-height: .9em;
	}
}

/* Tablet display (was max-width: 48em) */
@media only screen and (max-width: 47.999em) {
	header {
		margin: 0;
		padding: 0;
		background-image: url(../images/Moods/broodingKing_small.jpg);
	}
	h1 {
		font-size: 2.7em;
		margin: 0;
		padding: 0;
	}
	h2 {
		font-size: 1.2em;
		margin:0;
		padding:0;
	}
	body {
		margin: 0;
		padding: 0;
		font-size: 1.2em;
		}
	figure figcaption {
		width: 100px;
	}	
	footer {
		padding: 0.5em;
		margin: 0;
	}
	nav {
		font-weight: bold;
		padding: 0;
		margin: 0;
		font-size: 100%;
	}
	#wrapper {
		margin-left: auto;
		margin-right: auto;
		padding: 0em;
	}

	.carouselPic {
		width: 30em;
	}
	.NLStyle {
		font-size: 1em;
	}
	
}

/* Phone display */
@media only screen and (max-width: 36em) {
	header {
		margin: 0;
		padding: 0;
		background-image: none;
	}
	h1 {
		font-size: 2em;
		margin: 0;
		padding: 0;
	}
	h2 {
		font-size: .8em;
		margin:0;
		padding:0;
	}
	h3, h4, h5, h6 {
		margin: 0;
		padding: 0;
	}
	body {
		margin: 0;
		padding: 0;
		font-size: 1.2em;
		}
	nav {
		font-weight: bold;
		padding: 0;
		margin: 0;
		font-size: 100%;
	}
	figure {
		margin: 2px;
	}
	figure figcaption {
		display: none;
	}
	footer {
		padding: 0.5em;
		margin: 0;
	}
	picture {
		width: 100px;
	}
	#indexHeader {
		height: 135px;
	}
	#wrapper {
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}
	.carouselPic {
		width: 100%;
	}
	.connectLeft {
		float: left;
		margin: 0px;
	}
	.connectRight {
		float: right;
		margin: 0px;
	}
}