/*styles to set up the main structure - the background and main divs */
body {
	color: black;
	background-color: black;
	font-family: "Georgia", serif;
	/* font-size: 14px; */
	line-height: 1.5;
	letter-spacing: 0.02em;
	margin: 0px; /* matters more for mobile */
}




a:link {
	text-decoration:none;
	color: #851A18;
}
a:visited {
	text-decoration:none;
	color: #851A18;
	}
a:hover {
	text-decoration:underline;
	}
a:active {
	text-decoration:underline;
	}


a, img {
    border:none;
}


#whiteBackgroundContainer {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	background-color:rgba(255,255,255,0.90);
}

#imageContainer {
	max-width: 1000px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	background-image: url('../images/KaerMagaBackground1000med.jpg');
	background-repeat:repeat-y;
	background-position:center top;
	background-attachment: fixed;
}

#container {
	/* width: 100%; */
	padding: 25px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	/* position: relative; */
	overflow: hidden;
	/* word-break: break-all; */
}


 /*begin general use CSS */
 div {
	display: block;
 }

 .center {
	text-align: center;

}

.centerBlock {
	margin-left: 150px;
	margin-right: auto;
}

.clear {
	clear: both;
}

 .floatLeft {
	float: left;
	padding-right: 10px;
 }

 .floatRight {
	float: right;
	padding-left: 10px;
 }

 img {
	vertical-align: top;
}
 /*end general use CSS */

 /*footer styles */
 #footerImage {
	background-color: black;
	padding: 5px;
}
#footerImage > a {
	background-image: url('../images/Footer110.jpg');
	display: block;
	text-decoration: none;
}
/* #footSocialIcons {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
 } */

#footer {
	margin-top: 20px;
}

 #footerText {
	font-size: .8em;
	color: #372115;
	max-height: 999999px;
	padding: 10px 4px;
}

 /*header styles */
#headImage {
	position: relative;
	background-color: black;
	padding: 0px;
	margin-bottom: 10px;
}
#headImage > a > img,
#footerImage > a > img {
	width: 100%;
}
 #headSocialIcons {
	position: absolute;
	/* z-index: 1; */
	top: 12px;
	right: 10px;
}

 #navMenu {
	margin-top: 5px;
	background: #851A18;
}


/* Begin fancy drop-down menu code.  From http://www.handy-html.com/create-a-simple-css-dropdown-menu/ and modified by me.*/
#navMenu ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* this is applied only to the uls that are direct children of the #navMenu, and then again only to the direct li children of that ul */
#navMenu > div > ul > li {
    display: block;
    position: relative;
    float: left;
	/* this is the width of the drop-down menu  */
    width: calc(100% / 6);
    z-index: 2;
}
li ul {
    display: none;
	z-index: 2
}
#navMenu ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    padding: 5px 15px 5px 15px;
    background: #851A18;
    white-space: nowrap;
    /* z-index: 2 */
}
#navMenu ul li a:hover {
	background: #372115;
	/* z-index: 2 */
}

li:hover ul {
    display: block;
    position: absolute;
	z-index: 2
}
li:hover li {
    float: none;
    font-size: 11px;
	z-index: 2
}
#navMenu li:hover a {
	background: #372115;
	z-index: 2
}

#navMenu li:hover li a:hover {
	background: #851A18;
	font-weight: bold;
	z-index: 2
}

#hamburger {
	display: none;
	cursor: pointer;
	fill: white;
	height: 32px; /* shouldn't have to specify this */
}
#hamburger svg {
	padding: 2px 3px;
}

img {
	max-width: 100%;
	height: auto;
}
iframe {
	max-width: 100%;
}

@media only screen and (max-width: 560px) {
	#hamburger {
	  display: block;
	}
	#menu {
		display: none;
	}
	#navMenu:hover svg {
		background: #372115;
	}
	#navMenu:hover #menu {
		display: block;
	}
	#menu {
		position: absolute;
	}
	#navMenu > div > ul > li {
		float: unset;
		width: unset;
	}
	#navMenu > div > ul ul {
		position: absolute;
		left: 99%;
		top: 1px;
	}
	#navMenu li {
		margin-top: -1px; /* weird that need this, not sure why*/
	}
	#headImage .clear {
		display: none;
	}
	#container {
		padding: 8px;
	}
	#headSocialIcons {
		top: 0px;
		right: 0px;
	}
	.landing-page-link {
		max-height: 180px;
	}
}

/* End fancy drop-down menu code.  From http://www.handy-html.com/create-a-simple-css-dropdown-menu/ */

/* begin styles for home page */
.landing-page-link {
	margin: 5px;
	padding-bottom: 10px;
	overflow: hidden;
}

#content-homepage {
	margin-top: 20px;
}
/* end styles for home page */

/*begin styles for writing section */
.bookCover {
	float: left;
	clear: both;
}
.bookCover img {
	box-shadow: 5px 5px 5px #888888;
	margin-right: 15px;
	margin-bottom: 10px;
}
@media only screen and (max-width: 560px) {
	.bookCover {
		display: block;
		float: unset;
	}
}

#amznBest {
	box-shadow: 5px 5px 5px #888888;
}

.bookTitle {
	font-size: 125%;
	font-weight: bold;
}

.storyTitle {
	font-size: 125%;
	font-weight: bold;
}

.storyTitle:before {
	content: '"';
}
.storyTitle:after {
	content: '"';
}

.bookBlurb {
	padding-top: 1em;
	padding-bottom: 10px;
	margin-bottom: 30px;

	//border-bottom: thin solid;

}

.nonFicBlurb {
	padding-top: 1em;
	padding-bottom: 10px;
	margin-bottom: 30px;f
	border-bottom: thin solid;
}
.publicationTitle {
	font-style: italic;
}

.articlePubDate {
	display: none;
}

.articleTitle {
	font-weight: bold;
	font-size: 110%;
}

.articleTitle:before {
	content: '"';
}

.articleTitle:after {
	content: '"';
}

.bookPubInfo {
	font-size: 110%;
	font-weight: bold;
}

.publication {
	font-size: 125%;
	font-weight: bold;
}

#salim {
	box-shadow: 5px 5px 5px #888888;
}

/*end styles for writing section*/

/*begin styles for blog page aka news */


 .blogTitle {
	font-weight: bold;
	font-size: 115%;
	color: black;
	padding-top: 20px;
 }

 .blogContent {
	margin-bottom: 30px;
	border-bottom: thin solid;
 }

 .blogContent img {
	padding: 10px;
 }

 .blogTitle a:link {
	text-decoration:none;
	color: black;
}
.blogTitle a:visited {
	text-decoration:none;
	color: black;
	}
 /*end styles for blog page aka news */

 /*begin styles for music section */
.bandName {
	font-weight: bold;
	font-size: 150%;
}

.flex-with-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.flex-with-wrap > img {
	margin: 0px 30px 15px 0px;
	box-shadow: 5px 5px 5px #888888;
}
#jp_container_sdVid {
	/* width: 100%; */
	max-width: 480px;
}

#sOfS {
	float:right;
}

.sdCoverImg {
	width: 250px;
}

#sdKick-audio-player {
	/* margin-left: 350px; */
}

#sdWhere-audio-player {
	/* margin-left: 350px; */
}

#jp_container_byLand .jp-video-play {
	display: none !important;
}
 /*end styles for music section */

 /*begin styles for about and contact pages*/
.reviewTitle {
	font-size: 1.20em;
	font-weight: bold;
}

 /*end styles for about and contact page*/

 /*Begin CSS for testing things.  Delete at the very end? */

 /*End CSS for testing things.  Delete at the very end? */