@charset 'UTF-8';

body {
	font-family: 'verdana';
	font-size: 15px;
}

header {
    text-align: left;
  }

h1, h2, h4, p {
	text-align: left;
	font-weight: normal;
	color: #000 */ black */
}

h1, h2 {
	font-weight: bold;
}

h1 { /* Website title. */
	font-size: 1.5em;
	position: absolute;
	padding-top: 1.25em;
	padding-left: 2em;
	width: 10em;
}

h2 { /* Caption for individual book. */

	font-size: 1.5em;
	position: absolute;
	padding-top: 7em;
	padding-left: 5em;
	width: 10em;
	display: inline;
}

h4 {
    font-size: 1em;
	color: #000;
	background: #F4A261;
	margin-top: 2em;
	margin-bottom: 2em;
	margin-right: 8em;
	margin-left: 8em;
	padding: 1em;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Class Selectors */

.poster { 
	width: 100%;
	max-width: 100%;
	height: auto;
}

.cover
	{
	width: 30%;
	margin-top: 100px;
	margin-left: 500px;
	display: inline;
}

.caption { /* Caption for individual book. */

	font-size: 1.5em;
	position: absolute;
	padding-top: 7em;
	padding-left: 5em;
	width: 10em;
	display: inline;
}

.descriptor { /* Info block for individual book and info blocks. */
	font-size: 1em;
	background: lightblue;
	margin-top: 2em;
	margin-bottom: 2em;
	margin-right: 8em;
	margin-left: 8em;
	padding: 1em;
}

.site-nav {
	position: absolute;
	display: inline;
	top: 4em;
	right: 0em; 
	width: 100%;
	color: #000;
}

.site-nav ul {
	list-style-type: none;
	margin: 0;
	text-align: left;
}
.site-nav ul li {
	margin-left: 30em;
	margin-top: 0em;
}

.site-nav ul li a {
	text-decoration: none;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-size: 0.75em;	
	color: #000;
}
.site-nav ul li a:hover {
	outline: none;
	background-color: sandybrown;
}

ul.see-more {
	font-size: 1em;
	position: relative;
	display: inline;
	top: 20em;
	transition: all .3s;
	text-decoration: none;
	color: #000;
}

ul.see-more li {
	margin-top: 0em;
	margin-left: 7.5em;
}

ul.see-more li a {
	text-decoration: none;
	letter-spacing: .15em;
	text-transform: uppercase;
	font-size: -0.5em;	
	color: #000;
}

ul.see-more li a:hover {
	outline: none;
	background-color: sandybrown;
}

/* Core Podcast List - scrolling text box - has access to mp3 files stored locally.
Plays audio from locally hosted website, not from an external host. */

.core-podcast-list ul{
	top: 10em;
	height:200px;
	width: 250px;
	margin-left: 25em;
	margin-top: 4em;
	overflow:hidden; 
	overflow-y:scroll;
	background-color:#ccf;
}

.core-podcast-list ul li {

	text-decoration: none;
	letter-spacing: .15em;
	text-transform: uppercase;
	font-size: -0.5em;	
	color: #000;
	font-size: 1em;
	font-family: verdana;
	padding: 3px;
	color: #714D03;}
/*
<div style="width:150px;height:150px;line-height:3em;overflow:scroll;padding:5px;background-color:#FCFADD;color:#714D03;scrollbar-base-color:#DEBB07;">
This 'div' element uses 'overflow:scroll' to create scrollbars whenever the contents of the 'div' become too large. 
</div>


}
/* Phones and tablets - management of size and spacings for image and text.
------------------------------------*/

@media screen and (min-width : 1090px ){}

@media screen and (max-width:749px){
	
  h1 {
    font-size: 1em;
	width: 6em;
  }
	
 .site-nav {
	  top: 3.25em;	
  }

 .site-nav ul li {
    margin-left: 10em;
	margin-top: -0.75em;
  }	
	
 .site-nav ul li a {
    font-size: 0.5em;
  }
	
  .caption {
	font-size: 1em;
	padding-top: 4em;
	padding-left: 4em;
	width: 8em;
	display: inline-block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	}
	
  .descriptor, p, h4 { 
	font-size: 0.75em;
	margin: 1em;
	padding: 1em;
	border: 5em;
}	
	
  .cover {
	width: 70%;
	margin-top: 2em;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	display: block;
  }

  ul.see-more {
	top: 1em;	
	}
	
  ul.see-more li {
	margin-left: auto;
	margin-right: auto;
	width: 250px;
	margin-top: -1em;
	}

  ul.see-more li a {
	font-size: 0.75em;	
	}

  .core-podcast-list ul{
	margin-left: 5em;  
	}
	
}
}