/* ------------------------------------------------------------------ */
/* a. General Styles
/* ------------------------------------------------------------------ */

body { background: #F4F6DCFF; }

/* Navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
	 margin: 0;
	 padding: 0;
	 border: none;
	 outline: none;
}

/* nav-wrap */
#nav-wrap {
   font: 12px 'opensans-bold', sans-serif;
   width: 100%;
   text-transform: uppercase;
   letter-spacing: 2.5px;
   margin: 0 auto;
   z-index: 100;
   position: relative;
   left: 0;
   top: 0;
   background-color: #6B0014FF
}

ul#nav {
   min-height: 48px;
   width: auto;

   /* center align the menu */
   text-align: center;
}
ul#nav li {
   position: relative;
   list-style: none;
   height: 48px;
   display: inline-block;
}

/* Links */
ul#nav li a {

/* 8px padding top + 8px padding bottom + 32px line-height = 48px */

   display: inline-block;
   padding: 8px 13px;
   line-height: 32px;
	text-decoration: none;
   text-align: left;
   color: #fff;

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

ul#nav li a:active { color: 'orange' }

/* Game
--------------------------------------------------------------------- */

#game {
   height: 800px;
   overflow: hidden;
   min-height: 500px;
   width: 100%;
   background: #161415;
   color: #FFFFFFFF;
   text-align: center;
   overflow: hidden;
}

#game h1 {
   font: 40px 'opensans-bold', sans-serif;
   text-transform: uppercase;
}

#game p {
	font: 18px 'Lucida Sans Typewriter', sans-serif;

}

#game h2 {
	font: 48px cursive, sans-serif;
	padding-top: 100px;
}

#game h4 {
	float: right;
	font: 24px 'opensans-bold', sans-serif;
	padding-right: 40px;
}

#game h3 {
	float: left;
	font: 24px 'opensans-bold', sans-serif;
	padding-left: 40px;
}

#game input[type=text] {
  padding: 12px 18px;
  margin: 6px 0;
  box-sizing: border-box;
  border-radius: 4px;
  font: 14px 'opensans-bold', sans-serif;
}

#game input[type=text]:focus {
  border: 3px solid #555;
  outline: none;
}

/* Top Movers
--------------------------------------------------------------------- */

#movers {
  text-align: center;
  font-family: 'opensans-bold', sans-serif;
  border-collapse: collapse;
  border: 3px solid #ddd;
  width: 100%;
}

#movers table {
	width:70%; 
    margin-left:15%; 
    margin-right:15%;
}

#movers td, #movers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#movers tr:nth-child(even){background-color: #f2f2f2;}


#movers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #6B0014FF;
  color: white;
}


/* Recent News
--------------------------------------------------------------------- */

#news .grid-container {
  margin: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 40px 40px;
}

#news .grid-item {
  background-color: #fff;
  height: 60vh;
  overflow: hidden;
}

#news img {
  max-height: 35vh;
  width: 100%;
}

#news {
  text-align: center;
}

#news h1 {
  padding-top: 10px;
}

#news a {
  text-decoration: none;
  color: #000;
}

#news input[type="text"] {
  width: 20%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('https://www.w3schools.com/css/searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  margin-top: 40px;
}


/* Watchlist
--------------------------------------------------------------------- */

#watchlist {
  text-align: center;
  font-family: 'opensans-bold', sans-serif;
  border-collapse: collapse;
  border: 3px solid #ddd;
  width: 100%;
}

#watchlist table {
  width:70%; 
    margin-left:15%; 
    margin-right:15%;
}

#watchlist td, #watchlist th {
  border: 1px solid #ddd;
  padding: 8px;
}

#watchlist tr:nth-child(even){background-color: #f2f2f2;}


#watchlist th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #6B0014FF;
  color: white;
}

td.positive {
  color:green;
  font-weight: 700;
}

td.negative {
  color:red;
  font-weight: 700;
}

#watchlist input[type="text"] {
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
  padding: 6px 12px;
  text-align: center;
}