/************HOMEPAGE STYLES*********************/

#main { min-height: 500px;}
h2.bar {
	font-size: 2rem;
}
.hanging {padding-bottom: 5px; text-indent: -5 px; padding-left: 0px;}
.ul {margin-top: 5px; }
a img { border: none;}
#left { float: left; width:  35%;}
#right { float: right;  width:  65%;}
.resources {margin-bottom: 2%; clear:both;}
.inner_left {float: left; width: 48%; padding-left: 2%; }
.inner_right {float: right; width: 45%; padding-left: 2%; padding-right: 3%}
.bar { background-color: var(--main); color: #eee; border: none; border-radius: 4px; margin: 10px; padding: 6px; width: 90%;}
.database_box {	background-color: #DFE7FB; border: none; border-radius: 4px; margin: 10px; padding: 6px; width: 90%;}	
.db_left { float: left; width: 15%; vertical-align:middle;}
.db_right { margin-left: 18%; width: 83%; vertical-align:middle;}

/*************SEARCH SCREEN STYLES**************/
.search_fields { background-color: #B1C9F3; padding: 5%; -webkit-border-radius: 8px 8px 8px 8px; -moz-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; -moz-background-clip: padding;  -webkit-background-clip: padding-box; background-clip: padding-box; 	}
.search_fields label {padding-bottom: 0; margin-bottom: 0;}

/************LIST.JS STYLES**********/
.list {margin: 0 20% 0 20%; padding:2% 0 0;}
.list > li { display:block; background-color: #eee; padding:1%; box-shadow: inset 0 1px 0 #fff;}
input {border:solid 1px #ccc;  border-radius: 5px;  padding:7px 14px;  margin-bottom:10px}
input:focus { outline:none; border-color:#aaa;}
.sort, .clear { padding:8px 30px; border-radius: 6px; border:none; display:inline-block; color:#eee; text-decoration: none;background-color: #1b3f8b; height:30px;}
.clear {padding:8px 8px}
.sort:hover, .clear:hover {text-decoration: none; background-color:#1b8aba;}
.sort:focus, .clear:focus {outline:none;}
.sort:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;  border-bottom: 5px solid transparent; content:"";  position: relative;  top:-10px;  right:-5px;}
.sort.asc:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; content:""; position: relative; top:13px; right:-5px;}
.sort.desc:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;  border-bottom: 5px solid #fff; content:""; position: relative; top:-10px; right:-5px;}
#searchItems {margin: 0 8% 0 8%;}
#sort { margin: 0 25% 0 25%;}
.speechLinks {margin-right:20px; display:inline;}
.years { display:none;}

/***********MEDIA QUERIES***********/
@media screen and (max-width: 840px) {
.inner_left {width: auto; float: none;}
.inner_right {width: auto; float: none;}
	   }

@media screen and (max-width: 768px) {
#left { width: auto; float: none;}	
#right { width: auto; float: none;}
#center { width: auto; margin: 0 auto;}
.list {margin: 0 5% 0 5%; padding:2% 0 0;}	
#search {margin: 0 ;}
#sort { margin: 0 10% 0 10%;}
.sort {margin-bottom: 4px;}	
	   }