* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
	background: linear-gradient(#05ABE0, #4DC8EF, #05ABE0);
	height:90px;
	padding-top:7px;
	padding-bottom:7px;
	/*text-align: center;*/
	font-size: 35px;
	color: black;
}

/* Create two columns/boxes that floats next to each other */
main-left {
  float: left;
  width: 33%;
  height: 100%; /* only for demonstration, should be removed */
  background: #fff;
  padding: 0px;
}

/* Style the list inside the menu */
main-center {
  float: left;
  width: 33%;
  height: 100%; /* only for demonstration, should be removed */
  background: #fff;
  padding: 0px;
}

main-right {
  float: left;
  width: 33%;
  height: 100%; /* only for demonstration, should be removed */
  background: #fff;
  padding: 0px;
}

/* Clear floats after the columns */
section:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
footer {
  background-color: #fff;
  padding: 0px;
  text-align: center;
  color: black;
}



.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;
	}
}




div.logo-button
{
    width:300px;
	padding-left:5px;
	padding-right:5px;
    margin-bottom:3px;
	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: 14pt;
}


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


.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;
}

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


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




div.banner-left
{
	float:left;
	width:15%; 
	line-height:35px;
	/*border:1px solid red;*/
}

div.banner-center{
	float:left;
	width:65%;
	line-height:35px;
	/*border:1px solid white;*/
}

	
div.banner-right
{
	float:left;
	width:20%;
	color:white;
	/*border:1px solid orange;*/
}



.inner-banner
{
	width:14rem;
	height:25px;
    padding-top:4px;
	text-align:right;
	padding-right:15px;
	font-size:1.1rem;
	font-weight:bold;
	line-height:1.1rem;
	background: url(images/inner-logo.png) top left no-repeat;
    background-size:100%;
	/*border:1px solid black;*/
}


.inner-banner2
{
	width:14rem;
	height:25px;
	padding-top:3px;
	padding-left:3px;
	font-size:1.1rem;
	font-weight:bold;
	text-align:right;
	padding-right:15px;
	line-height:35px;
	line-height:1.1rem;
	color:white;
	/*border:1px solid black;*/
}

	
.inner-banner3
{
	float:left;
	width:75%;
	line-height:35px;
	color:white;
}


.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;
}


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

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

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

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





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


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