/* CSS MOVIE MOOD */

header{background-color: #202020;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5%;
} 
h1 {
	margin: auto;
	height:130px;
	text-align: center;
	background-color: #202020;
	display: flex;
  justify-content: center;
  align-items: center;
}
.title {
	font-family: cursive;
	font-size: 2em;
	background-color: #202020;
	text-decoration: none;
}
a.title:link{
	color:goldenrod;
}
a.title:visited{
	color:goldenrod;
}
a.title:hover{
	color:#ffd966;
}
div.menuLine {
  width: 50px;
  height: 3px;
  background-color: black;
  margin: 12px 2px 10px 2px;
}
.nav {
	border-width: thick;
	border-color: goldenrod;
	border-style: ridge;
  background: linear-gradient(to top right, #b8860b 0%, #ffffff 100%);
	display: flex;
	position: relative;
}
div.wholeLine, .hpmenu, .hpmenusearch {
	cursor: pointer;
	background: linear-gradient(to top right, #b8860b 0%, #ffffff 100%);
	/*background:none;*/
	border-color: goldenrod;
	border-style: ridge;
	border-width: medium;
	border-top: none;
	border-bottom: none;
}
.hpmenu {
	padding:.3%;
	width: 30%;
	font-size: 1.2em;
	font-weight: bold;
	align-items: center;
	margin-top: 0;
	margin-bottom: 0;
}
.hpmenusearch{
	position:fixed;
	bottom:7%;
	border: medium ridge goldenrod;
	overflow-x: hidden;
	justify-content: center;
	align-items: center;
	width:100%;
	margin-top: 2%;
	left:0;
}
.wholeLine {
	padding:.3%;
	margin-right: auto;
  align-items: center;
	margin-top: 0;
	margin-bottom: 0;
}
.hpmenu:hover{
	background: linear-gradient(to top left, #ffffff 0%, #b8860b 100%);
}
.hpmenu:focus{
	color: white;
	background: linear-gradient(to top left, #ffffff 0%, #b8860b 100%);
}
.wholeLine:hover{
	background: linear-gradient(to top left, #ffffff 0%, #b8860b 100%);
}
body {
	background-color: #F8F8F8;
	margin:0;
}
.hpmenusibling {
	margin-bottom: 15%;
}
main {
	text-align: center;
	margin: auto;
	clear:both;
	width:90%;
	margin-bottom: 18%;
}
footer {
	background-color: #808080;
	width:100%;
	text-align: center;
	bottom: 0;
	position: fixed;
}
select {
	margin:auto;
	width:40%;
}
.category {
	margin: auto;
	margin-bottom: 2%;
	margin-top: 2%;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color: black;
  padding: 12px;
  text-decoration: none;
	cursor: pointer;
	width:40%;
	border-radius: 50%;
	outline: none;
	font-size: 1.3em;
}
.category:hover {
  background-color: black;
  color: white;
}
.category:focus {
  background-color: black;
  color: white;
}
.subCat {
	display: inline;
	margin:auto;
	padding: 10px;
	background-color: #F8F8F8;
	color: black;
	outline: none;
	border:solid thin;
	border-left: none; border-right: none;
	border-radius: 5%;
	text-decoration: none;
	cursor: pointer;
	width:25%;
	text-align: center;
	font-size: 1.1em;
}
.subCat:hover {
  background-color: black;
  color: white;
}
.subCat:focus {
  background-color: black;
  color: white;
}
.subtop {
	margin:auto;
	margin-top: 2%;
	padding: 5px;
	background-color: #f1f1f1;
	width: 20%;
}
a.topItem {
	padding: 5px;
	border: none;
	margin: 2%;
	cursor: pointer;
}
a.topItem:hover {
	background-color: #808080;
	color:white;
}
a.topItem:focus {
	background-color: #808080;
	color:white;
}
a {
	text-decoration: none;
	color: black;
}
a:hover {
	color:goldenrod;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
	margin-left: 2%;
}
/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px;
  text-decoration: none;
  display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content
container when the user clicks on the dropdown button) */
.show {display:block;}
/*------------------------Amoviemood.php specific results output--------------*/
section{
	margin: auto;
	text-align: center;
	font-size: 1.3em;
}
article.reset {
	display: block;
	text-align: center;
	margin: auto;
	margin-bottom: 10%;
	font-size: 2em;
	font-weight: bold;
	background-color: #f1f1f1;
	border-radius: 80%;
	width: 30%;
}
.moodmovie {
	text-shadow: 1px 1px grey;
	padding: .5%;
}
.moodmovie:hover {
	background-color: goldenrod;
	color: white;
}
.moodmovie:focus {
	background-color: goldenrod;
	color: white;
}

/*------------------------News Styles--------------*/
h4 {
	text-align: left;
	text-decoration: underline;
	margin-bottom: 1%;
}

.feed-item-desc {
	text-align: left;
	margin-top: 1%;
}

.news-reel {
	border: solid;
	margin-top: 2%;
	padding: 2%;
	text-align: left;
}
/*------------------------End Cell Phone------------------------------------------*/
@media only screen and (min-width: 800px) {
  body {
    background-color: #FFFFF0;
  }
	.hpmenusearch{
		margin-left: auto;
		margin-right: 0;
		position:static;
		bottom:auto;
		margin-top: auto;
	}
	.hpmenu {
		width:37%;
	}

.news-reel {
	float: left;
	width: 44%;
	margin: .5%;
	margin-bottom: 1%;
	}

}