#news, #agriculture, #featured { 
	border-width: 1px; 
	border-style: solid; 
}
#news > h4, #agriculture > h4, #featured > h4 { 
	font-weight: 400; 
	padding: 0.25em 0.5em; 
	color: #FFFFFF;
}
#news { 
	border-color: #3D85B8;
}
 #news > h4 { 
	background-color: #3D85B8;
}
#agriculture { 
	border-color: #7137BD; 
} 
#agriculture > h4 { 
	background-color: #7137BD; 
}
#featured { 
	border-color: #3CB371; 
} 
#featured > h4 { 
	background-color: #3CB371; 
}
.station-name:hover {
    background: #6531a8;
    color: white;
}
.station-name{
    cursor: pointer;
}
#graph-image{
  max-width: 100%;
  max-height: 100%;
}
#stations-and-graph{
  border: solid #d7cae8 2px;
  height: 500px;
}
#station-list{
  #border: solid orange 2px;
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width:20%;
  overflow:auto
}
#station-list{
  left-padding:1em;
}
#station-list-table{
  width: 100%;
}
#station-list-table td{
  padding-left: 1em;
}
#graph-and-downloads{
  #border: solid green 2px;
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width:79%;
}
#graph-title{
  #border: solid red 2px;
  height: 5%;
  width:100%;
  font-size: 1.2em;
  font-weight: bold;
  padding-left: 1em;
}
#graph{
  #border: solid purple 2px;
  height: 89%;
  width: 100%;
}
#downloads a{
  #border: solid red 2px;
  height: 5%;
  width:100%;
  color: #6531a8;
  font-weight: bold;
  padding-left:1em;
}
#explanation{
  border: solid #d7cae8 2px;
  height: 20em;
  overflow: auto;
  padding-left: .5em;
}
#explanation p{
  padding:.5em;
}

@media only screen and (max-width: 960px) {
	#station-list{
		width:100%;
		margin-bottom:1em;
		font-size:18px;
	}
	#graph-and-downloads{
		width:100%;
	}
	#station-list-select{
		display:inline-block;
		width:100%;
		background-color: #EEEDE9;
	}
	#station-list-table{
		display:none;
	}
	#stations-and-graph{
		height:auto;
	}
	#explanation{
		height:auto;
	}
	div[role="main"]{
		padding-bottom:1em;
	}
}

@media only screen and (min-width: 960px) {
  #station-list-select{
    display:none;
	}
}