body {
	font-family: sans-serif;
	font-size: .9rem;
}

#menu1 {
position: absolute;
background-color: rgb(235,235,235);
top: 0;
left: 0;
height: 100%;
width: 200px;
border: 0;
border-right: 1px solid gray; }

#main1 {
position: relative;
top: 0;
left: 0;
border: 0;
height: 100%;
width: 100%; 
	margin: 0;
	padding: 0;
	padding-left: 200px;
}

h1 {
  text-align: center;
}

/* 1 column: 320px */
.autowide {
  margin: 0 auto;
	width: 98%;
}

/* .autowide img {
  float: left;
  margin: 0 .75rem 0 0;
} */

.autowide .module {
  /* background-color: lightgrey; */
  border-radius: .25rem;
  margin-bottom: 1rem;
}
.autowide .module p {
  padding: .25rem .75rem;
}

/* 2 columns: 600px */
@media only screen and (min-width: 600px) {
  .autowide .module {
		float: left;
		margin-right: 2.564102564102564%;
		width: 48.717948717948715%;
	}
	.autowide .module:nth-child(2n+0) {
		margin-right: 0;
	}
}

/* 3 columns: 768px */
@media only screen and (min-width: 768px) {
  .autowide .module {
		width: 31.623931623931625%;
	}
	.autowide .module:nth-child(2n+0) {
		margin-right: 2.564102564102564%;
	}
	.autowide .module:nth-child(3n+0) {
		margin-right: 0;
	}
}

/* 4 columns: 992px and up */
@media only screen and (min-width: 1100px) {
  .autowide .module {
		width: 30.076923076923077%;
	}
	.autowide .module:nth-child(3n+0) {
		margin-right: 2.564102564102564%;
	}
	.autowide .module:nth-child(4n+0) {
		margin-right: 0;
	}
}

.button {
    
	width:200px;
	height:30px;
	background: linear-gradient(#05ABE0, #4DC8EF, #05ABE0);
	text-align:left;
    text-shadow: 1px 1px grey;
    box-shadow: 1px 1px 2px grey;
    cursor: pointer;
	margin-bottom:4px;
}

.button:hover {
	color:white;
    text-shadow: 1px 1px black;
}

.button-select {
    
	width:200px;
	height:30px;
	background: linear-gradient(#05ABE0, #4DC8EF, #05ABE0);
	text-align:left;
    text-shadow: 1px 1px black;
    box-shadow: 1px 1px 2px gold;
    cursor: pointer;
	margin-bottom:4px;
	color:white;
}

.cardDiv{
    text-align:center;
    font-size:.9rem;
    font-family:Times New Roman;
    margin-right:10px;
    color:blue;
    cursor:pointer;
    border-bottom:1px solid black;
    padding-bottom: 10px;
}

.cardDiv:hover{
    color:red;
}

.elementCenter{
	margin-left:auto;
	margin-right:auto;
}

.grad {
  background: linear-gradient(#05ABE0, #4DC8EF, #05ABE0);
  width:100%;
  height:90px;
  padding-top:7px;
}

.inner-banner{
	width:250px;;
	height:24px;
    padding-top:2px;
	text-align:right;
	padding-right:15px;
	font-size:1.1rem;
	font-weight:bold;
	line-height:20px;
	background: url(images/inner-logo.png) top left no-repeat;
    background-size:100%;
}

.inner-banner2{
	width:300px;;
	height:24px;
    padding-top:0px;
	text-align:left;
	padding-right:15px;
	font-size:1.1rem;
	font-weight:bold;
	line-height:25px;
	color:white;
}
	
.inner-banner3{
	font-size:10px;
	font-weight:bold;
	line-height:35px;
	color:white;
}

div.logo-button{
    
    margin: auto;
	text-align:center;
    text-shadow: 2px 2px grey;
	cursor:pointer;
	background-color:#1459AC;
    border-radius: 7px;
    box-shadow: 1px 1px 6px grey;
	color:white;
    font-size: 10pt;
}

/* If the screen size is 801px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 801px) {
  div.inner-banner {
    font-size:1.1rem;
    max-width:250px;
  }
}

/* If the screen size is 800px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 800px) {
  div.inner-banner {
    font-size:1.0rem;
    max-width:200px;
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  div.inner-banner {
    font-size:.9rem;
    max-width:180px;
  }
}



/* If the screen size is 801px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 801px) {
  div.inner-banner2 {
    font-size:1.1rem;
    max-width:350px;
    padding-left:70px;
  }
}

/* If the screen size is 800px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 800px) {
  div.inner-banner2 {
    font-size:1.0rem;
    max-width:300px;
    padding-left:50px;
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  div.inner-banner2 {
    font-size:.9rem;
    max-width:280px;
    padding-left:40px;
  }
}









/* If the screen size is 801px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 801px) {
  div.logo-button {
    font-size: 20px;
    max-width:350px;
  }
}

/* If the screen size is 800px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 800px) {
  div.logo-button {
    font-size: 15px;
    max-width:250px;
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  div.logo-button {
    font-size: 10px;
    max-width:200px;
  }
}

.logo-button:hover{
	color:gold;
}

.logo-table {
	margin-top:4px;
	width: 100%;
	border-collapse:collapse;
}

.logo-th {
    height: 35px;
}

.header-links{
	display: -moz-inline-stack;
	display: inline-block;
	zoom: 1;
	*display: inline;
	text-align:center;
}

.listenDiv{
	width:500px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
}

.menu{
	width:220px;
}

.menu-button{
	width:200px;
	background-color:yellow;
	text-align:center;
    text-shadow: 1px 1px grey;
	cursor:pointer;
    box-shadow: 1px 1px 3px grey;
}

.musicLink
{
	text-decoration:none;
	text-shadow:.5px .5px gray;
	background-color:white;
	cursor:pointer;
}

.musicLink:hover
{
	background-color:lightblue;
}

.musicLink-select
{
	width:200px;
	text-shadow:1px 1px gray;
	cursor:pointer;
	background-color:green;
	color:white;
}

.navLinks{
    color:blue;
    cursor:pointer;   
}

.navLinks:hover{
    color:red;
}

.radioLink
{
	margin-left:70px;
	width:100px;
	text-shadow:1px 1px gray;
	background-color:white;
	cursor:pointer;
	margin-left:auto;
	margin-right:auto;
	border:0px solid white;
}

.radioLink:hover
{
	background-color:lightblue;
}

.radioLink-select
{
	width:120px;
	text-shadow:1px 1px gray;
	cursor:pointer;
	background-color:green;
	color:white;
}

.radioLink-select:hover
{
	background-color:lightblue;
}

.sermonDiv{
	cursor:pointer;
	font-size:14px;
	font-weight:bold;
	padding:4px;
}

.sermonDiv:hover{
	background-color:lightblue;
}

.newYearButton{
    width:80px;
    font-size:16pt;
    font-weight:bold;
    border:1px solid black;
    margin-right:3px;
    float:left;
    cursor:pointer;
}

.newYearButton:hover{
    background-color: lightblue;
}

.newYearButton-Select{
    width:80px;
    font-size:16pt;
    font-weight:bold;
    border:1px solid black;
    margin-right:3px;
    float:left;
    cursor:pointer;
    background-color: lightblue;
}

.speakerButton
{
	display: table-cell;
    width:300px;
    height:100px;
	border:1px solid black;
	padding:10px;
	font-weight:bold;
	font-size:18pt;
	cursor:pointer;
    vertical-align: middle;
}

.speakerButton-Select
{
	display: table-cell;
    width:300px;
    border:1px solid black;
    height:100px;
	padding:10px;
	font-weight:bold;
	font-size:18pt;
	cursor:pointer;
	background-color:lightblue;
    vertical-align: middle;
}

.speakerButton:hover
{
	background-color:lightblue;
}

.yearDiv{
    width:605px;
    text-align:center;
    margin:auto;
}

.yearButton{
	width:90px;
	border:1px solid black;
	font-weight:bold;
	font-size:18pt;
	cursor:pointer;
}

.yearButton-Select{
	width:90px;
	border:1px solid black;
	font-weight:bold;
	font-size:18pt;
	cursor:pointer;
	background-color:lightblue;
}

.yearButton:hover{
	background-color:lightblue;
}