* {
  box-sizing: border-box;
}

iframe {
  height: 100%;
  width: 100%;
  margin: 0;
  border: 0;
  display: block;
}

p {
  text-indent: 30px;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: left;
  width: 100%;
  min-width: 480px;
  max-width: 1100px;
}

.flex-container-mobile {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: left;
  width: 100%;
  min-width: 320px;
  max-width: 480px;
}

.header {
  align-self: flex-start;
  width: 912px;
  height: 168px;
}

.header_mobile {
  align-self: flex-start;
  width: 100%;
}

.left_sidebar {
  align-self: left;
  width: 270px;
}

.left_sidebar_story {
  align-self: left;
  width: 270px;
}

.copyright_footer {
  align-self: flex-end;
  width: 920px;
  background-color: #01002a;
  height: 75px;
}

.copyright {
  font-family: Open Sans, sans-serif;
  font-size: 12px;
  text-align: left;
  font-weight: bold;
  color: white;
}

.today {
  border-width: 3px;
  border-style: solid;
  border-radius: 15px;
  border-color: lightgrey;
}

.nonday {
  border-width: 3px;
  border-style: solid;
  border-radius: 15px;
  border-color: transparent;
}

.topNews {
  width: 100%;
  max-width: 600px;
}

.topNews .container img {
  max-width: 600px;
}

.recentNews {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
}

.recentNews .container {
  width: 50%;
}

.container {
  position: relative;
  margin: 0 auto;
  margin-bottom: 20px;
}

.container img {
  vertical-align: middle;
  width: 100%;
  max-width: 600px;
  border: 0;
}

.headline {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  font-family: Open Sans, sans-serif;
  font-weight: bold;
  text-align: center;
}

.storyheadline {
  color: black;
  width: 100%;
  font-family: Open Sans, sans-serif;
  font-weight: bold;
  text-align: center;
}

.photocred {
  position: absolute;
  bottom: 0;
  color: #f1f1f1;
  width: 100%;
  font-family: Open Sans, sans-serif;
  font-weight: normal;
  text-align: left;
}

.mult_img {
  display:none;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  animation:fading 5s infinite
}
@keyframes fading {
  0%{opacity:0.2}
  08%{opacity:1}
  92%{opacity:1}
  100%{opacity:0.2}}

.padres_sidebar {
  align-self: left;
  width: 270px;
}

.legion_standings {
  background-color: white;
  padding:0px;
  position: absolute;
  left: 0px;
  top: 180px;
  width: 270px;
}
.legion_scores {
  background-color: white;
  padding:0px;
  position: absolute;
  left: 0px;
  top: 440px;
  width: 270px;
}

.main {
  align-self: normal;
  margin-top: 10px;
  width: 100%;
}

.auth {
  text-align: left;
  color: darkgray;
  font-family: Open Sans, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

.profile {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: left;
  width: 100%;
}

.name {
  padding: 10px;
  font-family: Open Sans, sans-serif;
  font-size: 18px;
  text-align: left;
  font-weight: bold;
  color: black;
  width: 100%;
}

.profile img {
  vertical-align: left;
  padding: 10px;
  width: 100px;
  height: 150px;
  border: 0px;
}

.positions {
  font-family: Open Sans, sans-serif;
  font-size: 12px;
  text-align: left;
  font-weight: bold;
  color: black;
}

.story {
  position: relative;
  text-indent: 30px;
  width: 100%;
  vertical-align: middle;
  font-family: Open Sans, sans-serif;
}

.linescore {
  border-style: inset;
  border-color:  black;
  border-width: 1px;
  font-family: Open Sans, sans-serif;
  font-size: 12;
}

.league {
  padding: 10px;
  font-family: Open Sans, sans-serif;
  font-size: 14;
  text-align: center;
  font-weight: bold;
  color: black;
  width: 250px;
}

.division {
  font-family: Open Sans, sans-serif;
  font-size: 10;
  text-align: left;
  font-weight: bold;
  color: black;
  width: 140px;
}

.st_catA {
    font-family: Open Sans, sans-serif;
    font-size: 10;
    text-align: center;
    font-weight: bold;
    color: black;
    width: 15px;
}

.st_catB {
    font-family: Open Sans, sans-serif;
    font-size: 10;
    text-align: center;
    font-weight: bold;
    color: black;
    width: 25px;
}

.st {
    font-family: Open Sans, sans-serif;
    font-size: 11;
    font-weight: normal;
    color: black;
}

.st_sd {
  font-family: Open Sans, sans-serif;
  font-size: 11;
  font-weight: bold;
  color: black;
}

.st_team {
  text-align: left;
  width: 145px;
}

.st_dataA {
  text-align: center;
  width: 15px;
}

.st_dataB {
  text-align: center;
  width: 25px;
}

.st_team_sd {
  font-family: Open Sans, sans-serif;
  font-size: 11;
  text-align: left;
  font-weight: bold;
  color: black;
  width: 150px;
}

.stats {
  text-align: center;
  width: 10px;
}

.stats_sd {
    font-family: Open Sans, sans-serif;
    font-size: 11;
    text-align: center;
    font-weight: bold;
    color: black;
    width: 10px;
}

.clinch {
    font-family: Open Sans, sans-serif;
    font-size: 11;
    text-align: left;
    font-weight: normal;
    font-style: italic;
    color: black;
    width: 250px;
}

.sc_gamedate {
    margin-top: 10px;
    font-family: Open Sans, sans-serif;
    font-size: h4;
    text-align: center;
    font-weight: bold;
    color: black;
    width: 250px;
}

.sc_league {
    margin-top: 10px;
    font-family: Open Sans, sans-serif;
    font-size: 9;
    text-align: left;
    font-weight: bold;
    color: darkgray;
    width: 250px;
}

.round {
    padding: 10px;
    font-family: Open Sans, sans-serif;
    font-size: 14;
    text-align: center;
    font-weight: bold;
    color: black;
    width: 250px;
}

.gamedate {
    font-family: Open Sans, sans-serif;
    font-size: 10;
    text-align: left;
    font-weight: bold;
    color: darkgray;
    width: 250px;
}

.sc_team {
    font-family: Open Sans, sans-serif;
    font-size: 12;
    text-align: left;
    font-weight: normal;
    color: black;
    width: 160px;
}

.sc_team_sd {
    font-family: Open Sans, sans-serif;
    font-size: 12;
    text-align: left;
    font-weight: bold;
    color: black;
    width: 160px;
}

.score {
    font-family: Open Sans, sans-serif;
    font-size: 12;
    text-align: center;
    font-weight: normal;
    color: black;
    width: 15px;
}

.score_sd {
    font-family: Open Sans, sans-serif;
    font-size: 12;
    text-align: center;
    font-weight: bold;
    color: black;
    width: 15px;
}

.status {
    font-family: Open Sans, sans-serif;
    font-size: 12;
    text-align: left;
    font-weight: normal;
    color: black;
    width: 75px;
}

.tv {
    font-family: Open Sans, sans-serif;
    font-size: 12;
    text-align: left;
    font-weight: normal;
    color: black;
    width: 75px;
}

.note {
    font-family: Open Sans, sans-serif;
    font-size: 8;
    text-align: left;
    font-weight: bold;
    color: black;
    width: 250px;
}

.bottom {
  align-self: flex-end;
  width: 100%;
}

a:link {
  color: white; 
  background-color: transparent; 
  text-decoration: underline;
}
a:visited {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}
a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

ul {
  align-self: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: black;
}
ul a:link {
  color: white; 
  background-color: transparent; 
  text-decoration: none;
}
ul a:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
ul a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}
ul a:active {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

li {
  padding: 5px;
  font-family: Open Sans, sans-serif;
  font-size: 16;
  text-align: center;
  font-weight: bold;
  color: black;
}
.menu_header {
  position: relative;
  display: inline-block;
  padding: 5px;
  font-family: Open Sans, sans-serif;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  background-color: black;
  color: white;
  border: none;
  width: 100%;
}

.dropbtn {
  font-family: Open Sans, sans-serif;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  background-color: black;
  color: white;
  border: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 160px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.menu_header:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 480px) {
div.header {
  display: none; }
div.main {
  max-width: 480px; }
div.left_sidebar_story {
  display: none; }
div.story {
  max-width: 480px; }
div.headline {
  padding: 10px;
  font-size: 12; }
div.storyheadline {
  padding: 10px;
  font-size: 12; }
div.photocred {
  padding: 0;
  font-size: 8; }
.recentNews .container {
  max-width: 230px; }
.recentNews .headline {
  padding: 8px;
  font-size: 10; }
div.left_sidebar {
  display: none;
}

}

@media screen and (min-width: 481px) and (max-width: 770px) {
div.header_mobile {
  display: none; }
div.main {
  max-width: 480px; }
div.story {
  max-width: 480px; }
div.headline {
  padding: 12px;
  font-size: 14; }
div.storyheadline {
  padding: 12px;
  font-size: 14; }
div.photocred {
  padding: 0;
  font-size: 10; }
.recentNews .container {
  max-width: 230px; }
.recentNews .headline {
  padding: 8px;
  font-size: 10; }
}

@media screen and (min-width: 771px) {
div.header_mobile {
  display: none; }
div.main {
  max-width: 600px; }
div.story {
  max-width: 600px; }
div.headline {
  padding: 15px;
  font-size: 18; }
div.storyheadline {
  padding: 15px;
  font-size: 18; }
div.photocred {
  padding: 0;
  font-size: 12; }
.recentNews .container {
  max-width: 290px; }
.recentNews .headline {
  padding: 8px;
  font-size: 12; }
}