html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
  }


.featured_image {
  width: 100%;
}

#logo{
    position: absolute;
    top:50px;
    left: 30px;
}

title{
    clear: both;
    float: left;
}

h1{
  font-family: 'Domine', Helvetica, Arial, sans-serif;
  font-size: 50px;
  text-align: left;
}
.menu-trigger{
  order: 1;
  background-color: #f1b41d;
}
header{
  background-color: #f1b41d;
  margin: 0;
  padding: 0 10px;
  display: flex;
  flex-flow: row;

}

/*sidebar font*/
h2{
font-family: 'Domine', Helvetica, Arial, serif;
font-size: 18px;
}

/*headline font*/
h3{
  font-family: 'Domine', Helvetica, Arial, serif;
  font-size: 30px;
  text-align: center;
}

/*subhead font*/
h4{
  font-family: 'Domine', Helvetica, Arial, serif;
  font-size: 16px;
  text-align: center;
}

/*byline font*/
h5{
  font-family: 'Open sans', Helvetica, Arial, serif;
  font-size: 12px;
  text-align: center;
  color: blue;
  text-transform: uppercase;
}

/*body text font*/
h6{
    font-family: 'Domine', Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-align: left;
  }

/*player QA QUESTION font*/
h7{
  font-family: 'Domine', Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  color: #FFFFFF;
  text-transform: uppercase;

}

/*player QA ANSWER font*/
h8{
  font-family: Helvetica, Arial, sans-serif;
  float: left;
  font-size: 12px;
}

h9{
  font-family: helvetica, arial, sans-serif;
  font-size: 10px;
}

/*DOMINANT HEADLINE AND SUMMARY TYPEFACE/FONT ON HOME PAGE*/
h10{
  font-family: 'Domine', Helvetica, Arial, serif;
  font-size: 30px;
  text-align: left;
}

h11{
  font-family: 'Domine', Helvetica, Arial, serif;
  font-size: 14px;
  text-align: center;
}

/*SECONDARY HEADLINE AND SUMMARY TYPEFACE/FONT ON HOMEPAGE*/
h12{
  font-family: 'Domine', Helvetica, Arial, serif;
  font-size: 25px;
  text-align: center;
}

h14{
  font-family: 'Domine', Helvetica, Arial, serif;
  font-size: 15px;
  text-align: center;
}


/*footer styling*/
#footer{
  padding: 5px;
  width: 100%;
  left: 0; bottom: 0;
  padding: 5px;
  background: #f1b41d;
  text-align: left;
  color: black;
}


/*MEDIA SCREEN FOR PLAYERS PAGE*/

@media screen and (max-width:700px){

#flex-wrapper{
  display: flex;
  flex-flow: column;
}

#Question{
  text-align: center;
  background-color: #323431;
  margin: 10%;
  padding: 10%;
}

.question{
  order:1;
  background-color: #323431;

}

/*<!--AnswerOdd and AnswerEven are present for color styling on QA PAGE-->
<!--img is for player image styling -->
<!--ans is for answer text styling-->*/


/*this is styling the player images on the player QA page*/
.ans1{
  order:2;
  border: 1.75%;
  background-color: #d2d2d2;
  margin: 5%;
  padding: 5%;

}

.ans2{
  order:3;
  border: 1.75%;
  background-color: #EEB00F;
  margin: 5%;
  padding: 5%;
}

.ans3{
  order:4;
  border: 1.75%;
  background-color: #d2d2d2;
  margin: 5%;
  padding: 5%;

}

.ans4{
  order:5;
  border: 1.75%;
  background-color: #EEB00F;
  margin: 5%;
  padding: 5%;
}

.ans5{
  order:6;
  border: 1.75%;
  background-color: #d2d2d2;
  margin: 5%;
  padding: 5%;

}

#img{
  width: 40%;
  margin-left: 5%;
  margin-top: 5%;
}

#ans{
  margin-left: 5%;
  margin-top: 5%;
  margin-right: 5%;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;;
  font-size: 14px;

}

}
/*end less than 700px for media screen for players page*/

/*FOR TWO COLUMNS*/
/*
@media screen and (min-width:400px) and (max-width:699px){

}
*/

/*START GREATER THAN 700PX FOR MEDIA SCREEN FOR PLAYERS PAGE*/
@media screen and (min-width:700px){

#flex-wrapper {
  display: flex;
  flex-flow: row;
  align-items: flex-start stretch;
  flex-direction: row
  align-content: flex-start;
}

.Question{
    order: 1;
    flex-flow: row;
    text-align: center;
    padding: 1.25%;
    width: 18%;
    align-content: flex-start;
  }

  .question h7 {
    color: #ffffff;
    background-color: #323431;
    width: 16%;
    margin: .5%;

  }

/*<!--AnswerOdd and AnswerEven are present for color styling on QA PAGE-->
<!--img is for player image styling -->
<!--ans is for answer text styling-->*/
.ans {
  width: 16%;
  margin: .5%;
  font-family: Helvetica, Arial, sans-serif;;
  font-size: 13px;
}

.ans1{
  order:2;
  background-color: #d2d2d2;
}

.ans2{
  order:3;
  background-color: #EEB00F;
}

.ans3{
  order:4;
  background-color: #d2d2d2;

}

.ans4{
  order:5;
  background-color: #EEB00F;
}

.ans5{
  order:6;
  background-color: #d2d2d2;
}


  /*this is styling the player images on the player QA page*/
#img{
    margin-left: 5%;
    margin-top: 5%;
    content: 8%;
    margin: 0;
    text-align: center;
  }

#ans{
    content: 8%;
    margin: 5%;
    flex-flow: row;
    text-align: center;

  }

  }

/*END GREATER THAN 700PX FOR MEDIA SCREEN FOR PLAYERS PAGE*/






#headline{
  text-align: left;
}

#container{
  width: 100%;
  margin: 0, auto, 0, 0;
  margin-bottom: 5%;
}
#sidebar {
	/*width: 30%;*/
  /*float: right;*/
	/*border-left: 2px solid #000000;*/
	padding-left: 15px;
  height: 100%;
}



/* KEEP THIS COMMENTED OUT FOR NOW thx     #sidebar {
	width: 30%;
  float: right;
  clear: all;
	border-left: 3% solid #000000;
	padding-left: 3%;
	padding-right: 3%;
}*/

#login li{
    float:right;
}




#nav a:visited {

  flex-flow: row;
  font-size: 16px;
	text-decoration: none;
	padding: 4px 0px;
	color: #000000;
	background-color: #f1b41d;
	display: flex;
	/*width: 250px;*/
  background-color: white;
  padding: 3px 0;
}

#nav a:active {
  flex-flow: row;
  background-color: white;
  color: black;
  display: flex;
}

#nav {
	width: 100%;
  display: flex;
	flex-flow: column;

	margin: 0 0 3em 0;
	padding: 0;
	list-style: none;
	background-color: #f1b41d;
	 }


#nav li {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 14px;
  margin: 0%;
  width: 100%;
}

#nav a:link, #nav a:visited {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	padding: 6px 0px;
	color: #ffffff;
	background-color: #f1b41d;
	display: block;
  text-align: center;
}

#nav a:hover, #nav a:active {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	/*float: left;*/
}

#nav a:link, #nav a:visited {
 font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
 float: center;
 text-align: center;
 font-size: 14px;
 text-decoration: none;
 display: block;
 /*width: 200px;*/
 padding: 6px;
 color: black;
 background-color: #f1b41d;
 margin: 0%;
font-weight: bold;
/*border-right: 1px solid #ccc;*/ }

#nav li a:hover, #nav a:active {
	  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  background-color: white;
  color: black;
}

#Missourian{
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #ffffff;
  text-align: center;

}

#stories{
    text-align: right;
    font-weight: bold;
    color: black;
}
#headline{
    text-align: center;
}


ul{
    list-style-type: none;
	margin: 0;
	padding: 0;
}

#quiz{
    position: absolute;
    left: 0%;
    display: block;
    width: 250px;
    height: 30px;
    padding: 4px 4px 4px 4px;
}
#fastfive{
    position: absolute;
    left: 25%;
    display: block;
    width: 250px;
    height: 100px;
    padding: 4px 4px 4px 4px;
}
#lineup{
    position: absolute;
    left: 50%;
    display: block;
    width: 250px;
    height: 100px;
    padding: 4px 4px 4px 4px;
}
#more{
    display: block;
    position: absolute;
    left: 75%;
    width: 250px;
    height: 100px;
    padding: 4px 4px 4px 4px;
}


.storiesimage{
  width: 100%;
}

.scheduleimage{
  width: 100%;
  padding-top: 7%;
}


@media screen and (min-width:700px){
     #nav{
     display: flex;
     flex-flow: row;
     width: 100%;
   }


   nav ul li{
     border-top: none;
     flex-flow: row;
   }
   .menu-trigger{
     display: none;
     order:1;
   }

   nav {
     order: 3;

   }

   header{
   order: 2;
   }

   /*Tiger Kickoff*/
   h1{
     font-family: 'Domine', Helvetica, Arial, sans-serif;
     font-size: 50px;
     text-align: left;
   }
   .menu-trigger{
     order: 1;
   }
   header{
     background-color: #ffffff;
     width: 100%;
     margin: 0;
     padding: 0 10px;
     display: flex;
     flex-flow: row;

   }
   }
   .search{
     margin: 10px auto;
     width: 25px;
     height: 50px;
     padding-left: 10px;
     flex: 1 auto;
   }
   header h1{
     flex: 2 auto;
   }

div.img
{
  height: 350px;
}

   div.desc{
       width: 300px;
       text-align: center;
   }

#images{
    width: 80%;
    height: auto;
    position:relative;

}
#bar{
    width:20%;
    height: 100%;
    position:absolute;
    left: 80%;
    top: 70%;
}

#main{
  padding-left: 15px;
  padding-right: 15px;
  font-size: 24px;
}