@charset "utf-8";
/* CSS Document */

body {
	width: 100%
	font-family: Arial, Helvetica, sans serif;
	font-size: 16px;
	background-color: #F0EAD6;
	font-family: Tahoma, Geneva, sans-serif;
}

#mainContent {
	width: 95%;
	background-color:#F0EAD6;
	margin:0 auto;
	overflow:hidden;
}

#banner_container {
	width: 100%;
	border:solid thin black;
	background-color:#F0EAD6;

}

#banner {
//	background-color: #FFF;
	width:90%;
//	min-height:163px;
//	line-height: 0.5em;
	margin: 0 auto;
//	border: 10px solid #7030A0;
	overflow:hidden;
}

#banner_pic {
	width: 115px;
	height: auto;
	float: right;
	margin: 5px 3em 5px 10px;
}

#banner_pic2 {
	width: 100%;
	margin: 0 auto;
	float:left;
}

#jules_name {
	height: 70px;
	width: auto;
	margin-left: 3em;
}

#roles {
	position: relative;
	height: 45px;
	width: auto;
	margin-left: 20em;
}

// navigation
#nav {
	width: 90%;
	height: 1.5em;
	border: none;
	margin: 0 auto 10px 0;
	font-family:Tahoma, Geneva, sans-serif;
	font-weight:bold;
	font-size: 1.25em;
	padding-left: 50px;
	color: #7030a0;
}

#nav ul {
//	padding-left: 30px;
}

#nav li {
	display:block;
	float:left;
	text-align:center;
	margin-left: 40px;
	list-style:none;
}

#nav li a, .dropbtn {
	text-decoration: none;
	font-weight: bold;
	border: 0.5px none #660167;
	display:block;
	font-family:Tahoma, Geneva, sans-serif;
	font-weight:bold;
	font-size: 1.25em;
	color: #7030a0;


}
#nav li a:hover, .dropdown:hover .dropbtn:hover {
	background-color: #7030a0;
	color: #FFF;
}

/*#myBlank:hover {
	cursor: default;
	color: #7030a0;
	background-color: #fff;
}*/

.dropdown-content {
    display: none;
    position: absolute;
	background-color: #fff;
//    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
//		color: #7030a0;
	border:thin solid #7030a0;
	z-index:10;

}

li.dropdown {
    display: block;
}

.dropdown-content a {
//    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
	background-color: #7030a0;
	color:#fff;
}

.dropdown:hover .dropdown-content {
    display: block;
}

#nav a:active {
	color:white;
	background-color:#7030a0;
}

#nav .active {
	color: #F0EAD6;
	background-color:#7030a0;
}

.bar {
	width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
//    display:block;
}

#menuIcon {
	width: 37px;
	display:none;
	overflow:hidden;
	margin-left:85px;
	
}

#mobile_menu {
	float:left;
//	display:block;
}

.clearfix::after {
	content:" ";
	clear:both;
	display:table;
}


	




#topics, .flex-container, .table-container, .book-container {
//	float:left;
	width: 90%;
//	max-width: 1200px;
//	margin: 0 auto;
	margin: 16px auto 0 auto;
//	display:block;
	height:auto;
	display:flex;
	align-content:space-between;
	flex-wrap:wrap;
	justify-content:center;
}

#topics>div, .flex-container>div{
//	max-width: 300px;
//	min-width: 250px;
	width: 22%;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 1em;
	font-weight: bold;
	padding-right:10px;
//	float:left;
//	border:thin solid black;
	flex-wrap:wrap;
	margin: 10px;
}

.table-container div {
	width: 47%;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 1em;
	font-weight: bold;
	padding-right:10px;
//	float:left;
//	border:thin solid black;
//	flex-wrap:wrap;
	margin: 10px;	
}

#topics div img, .flex-container>div img {
	width: 70%;
//	height: 215.4px;
	height:auto;
//	width: auto;
//	max-width: 90%;
}

.table-container div img {
	width: 100px;
	height: auto;
	float:left;
	margin-right: 10px;
	display:table-cell;
	vertical-align: middle;
}

.blog-img {
	width: 90% !important;
	height: auto !important;
}

.article {
	width: 90%;
	margin: 16px auto 0 auto;
	height:auto;
	display:block;
	margin-top: 2em;
}

.subarticle {
	width: 100%;
	text-align: left;
}

.bookListing {
	height: auto;
	width: 100%;
	overflow: inherit;
	display: block;
	border-bottom: 1px solid gray;
	padding-bottom: 30px;
}

.bookTitle {
	font-size: 1.25em;
	color: #1f8941;
}

.coverPic {
	width: 15%;
	float:left;
	margin-right: 20px;
	margin-bottom: 10px;
	height:auto;
}

.coverDiv {
	width: 30%;
//	float:left;
	margin-right: 20px;
	margin-bottom: 10px;
	height:auto;
	display:table-cell;
	padding-top:0;

}

.coverDiv img {
	width: 100%;
	height: auto;
	margin-right: 20px;
}

.book_info {
	width: 100%;
	display:table;
	clear:both;
}

.bookText {
	height: auto;
	width: 50%;
	overflow: hidden;
	display: table-cell;
	padding-bottom: 30px;	
	padding-left: 20px;
	vertical-align:top;
}

.book_sample {
	width: 45%;
	height: auto;
	margin-right: 20px;
	margin-bottom: 15px;
}

.menu_spacer {
	line-height:0.8em;
}


#buybtn {width: 63px; height:36px;}

.buyleft {
	float:left;
	margin-right: 50px;
}

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; 
height: 0; 
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 90%;
height: 90%;
}

.songArea {
	background-color:#0000cc;
	padding: 15px;
	width: 700px;
	height: auto;
	margin:0 auto;
	overflow:hidden;
}

.lyricArea {
	background-color:#D86E60;
	width:52.5%;
	height:auto;
	padding: 5px 10px;
display:inline-block;
//display:block;

overflow:hidden;
float:left;
}

.lyricArea h2 {
	text-align:center;
	margin-top:10px;
}

.songArea2 {
	width: 40%;
	height:auto;
display:inline-block;
//display:block;
position:relative;
//top:-100px;
padding-left: 10px;
text-align:center;
}

.songArea2 div {
	margin:0 auto;
}





@media screen and (max-width: 650px) {
#topics div, .flex-container>div, .table-container div {
	min-width: 270px;
	width: 95%;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1em;
	float:left;
	
}

.table-container td {
	overflow:hidden;
}

.table-container div img{
	width: 50%;
	height: height:auto;
	float:none;
	clear:right:
}

#topics, .flex-container, .table-container {
	width:100%;
	height:auto;
	flex-wrap:nowrap;
	flex-direction:column;
}

.article {
	width: 100%;
	height: auto;
} 

.article  td {
	text-align:left;
	min-width: 270px;
	width: 85%;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1em;
	float:left;
	padding-right: 20px;
	display:block;
}

#myMenu {
	display: none;
}

#myMenu li {
	float:none;
	text-align:left;
	width: 90%;
	margin-left:0;
}

#menuIcon {
	display:block;
	margin-left: 0;
}

.menu_spacer {
	display:none;;
}

buybtn: {width:32px; height:18px;}
}

@media screen and (min-width:1078px) and (max-width:1290px) {
	#nav li a {font-size: 1em;}	
}

@media screen and (min-width: 651px) and (max-width:1117px) {
	#topics div {width: 20%;}
	#menuIcon {display:block; margin-left:0;}
	#myMenu {display:none;}
	#myMenu li {
		float:none;
		text-align:left;
		width: 90%;
		margin-left:0;
	}
//	.article div {width: 20%;}
}

/*@media screen and (min-width: 994px) and (max-width:1110px) {
	#myMenu {display:block;}
	#nav li a {font-size: .8em;}
	#myMenu li {
		float:left;
		text-align:left;
		width: 90%;
		margin-left:0;
	}*/

}

@media (min-width: 1118px) {
	#mymenu {display:block;}
	#nav li {list-style:none;}
}

@media (min-width:570px) and (max-width:866px) {
	.lyricArea {
		width:52.5%
	}
	
	.songArea {
		width:100%;
	}
	
	.songArea2 {
		width:35%;
	}
}
	
	@media (max-width:569px) {
		. songArea {
			width: 100%;
		}
		.lyricArea {
			width: 40%;
			float: none;
			display:block;
		}
		
		.lyricArea h2 {
			text-align:left;
		}
		
		.songArea2 {
			width: 40%
			display:block;
			float:none;
			margin-top: 15px;
			}
			

	}
	
	@media (min-width: 1025px) {
		.pluto-book {
			min-width: 250px;
height:auto;
		}
		
		.for-computers {
			display:block;
		}
	}
	
	@media (max-width: 1024px) {
		.for-computers {
			display:none;
		}
	}