/* stylesheet.css */
/* Style rule for the body element */
body{
  background-color:white;
  background-image:url(field_bg.jpg);
  margin:0 auto;
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
}

.hamburger{
  width: 100%;
  position: relative;
  margin-top: 1%;
  margin-right: 4%;
}

/* Style The Dropdown Button */
.dropbtn {
  background-color: rgba(0,0,0,75);
  color: white;
  padding: 4px;
  font-size: 30px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: absolute;
  display: inline-block;
  margin: .4% 0px 0 95%;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(0,0,0,50);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #f1f1f1;
color: black;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}


.dropdown-content {
  right: 0;
}

/*Style rule for the wrapper div */
#wrapper {
    position: relative;
    top: -4px;
    width: 90%;
    max-width:1200px;
   margin:0 auto;
   background-color: white;
   background-image:url(draft_board_wrapper_bg.png);
    /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
   border-left: black solid 6px;
   border-right: black solid 6px;
}

/*================================== Layout Sections */
/*======== Styling for page header */
header{
display: block;
width: 100%;
}

/*======= Styling for the sidebar section (aside) */
aside{
  width:130px;
  padding:10px;
  float:left;
}

aside.right {
  float: right;
}

/* Styling for the article section */
article.date{
   /* side margins should match neigihboring column widths */
 margin: 40px auto;
}

/*=== Styling for tables in the article section ===*/
 /* Styling for the table as a whole */

  table.right{
    float:right;
  }


/* Styling for footer */
footer{
  position:relative;
  clear:both;
  height:35px;
  background-color: black;
  z-index: 2; 
 }

 /* Style for paragraphs */
 p{
   line-height:1.5;
   margin: 0 auto;
  font-family: helvetica, arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
 }



 /* Style Classes */

 .trophy{
   width:22%;
   float:right;
   margin-right: 5%;
   margin-top: 2%;
   position: relative;
 }

 .loserpicleft{
   float:left;
   margin-left: 7%;
   margin-top: 5%;
  position: relative;
 }

 .loserpicright{
  float:right;
  margin-right: 7%;
  margin-top: 5%;
  position: relative;
  
}

 .secondplayer{
  width: 35%;
  margin-left: 0%;
  margin-bottom: 0px;
  margin-top: -20%;
  float: left;
}
.draftyrright{
float:right;
margin-top: 2%;
width: 40%;
}

 .draftright{
float: right;
   margin-right: 5px;
   margin-top: .5%;
   width: 65%;
 }

 /* 2020 Draft Year banner*/
 .draft_banner_2020{
  float:left;
  margin-left: 0%;
  margin-top: 3%;
  width: 40%;
  }

  /*draft board 2020*/
  .draft_baord_2020{
    float: leftt;
       margin-left: 5px;
       margin-top: .5%;
       width: 65%;
     }
 /* Header style rules*/
 .header{
   text-align: center;
   width: 100%
 }
 
 /* Image floating to the left of neighboring text */
 img.left {
   float: left;
   width: 30%;
   margin-right: 10px
 }
 /* Image floating to the right of neighboring text */
 img.right {
   float: right;
   width: 30%;
   margin-left: 10px;
 }
/* Use class="centeral" in p or div to center all text and images inside the element */
.centerall{
  text-align: center;
  /* Clear any floating elements */
  clear: both;
}