body, html 
{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 background: #FFF1E0; 
 font-family: hevetica,sans-serif;
}

body { overflow-y: scroll; } /* always show vertical scrollbar */

.body_font { font-size: 18px; }
.small_font { font-size: 75%; color: purple; margin-bottom: 3px; }
.heading { font-weight: bold; }

#introduction { display: block; }
#questions { display: none;  }
#locations { display: none; }
#contact { display: none; }
#coaches { display: none; }
#tryouts { display: none; }
#accomplishments { display: none; }

#banner
{
 width: 100%;
 border-top: 1px solid black;
 border-bottom: 1px solid black; 
 background: firebrick;
 color: white;
 padding-top: 8px;
 padding-bottom: 12px;
 font-weight: bold;
 text-align: center;
 font-size: 40px;
}

#top_banner
{
 display: block;
 height: 60px;
 background-size: contain;
 background-image: url("players_banner_black.png");
 background-repeat: repeat-x;
 width: 100%;
}


.centered
{
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 font-size: 22px;
 font-weight: bold;
 text-decoration: none;
}

#img_full_page
{
 height: 100%; 
 width: 100%;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 background-image: url("feet.jpg");
 position: fixed;
 top: 0;
 left: 0;
 z-index:1;
}

#img_feet
{
 padding-top: 12px;
 text-align: center;
 width: 375px;
}

#img_team
{
 margin-left: auto;
 margin-right: auto;
 width: min(850px,90%);
 display: block;
}

#img_hamid
{
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 width: 90%;
 cursor: pointer;
}

#img_hamid:hover
{
 outline: 2px solid blue;	
}

#img_locations
{
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 width: min(750px,90%);
 display: block;
}

#img_background
{
 width: 15vw;
 height: 15vw;
 position:absolute; 
 margin-left: 30px;
 margin-top: 50px;	
 background-repeat: no-repeat;
 background-size: contain;
 background-image: url("feet.jpg");
}

a
{
 white-space: nowrap;
}

#club_name
{
 padding-top: 10px;
}

#nav_menu
{
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 width: 100%;
 border-bottom: 1px solid black;
 padding-top: 3px;
 padding-bottom: 3px; 
 background-color: purple;
 margin-bottom: 20px;
}

.nav
{
 display: inline-block;
 color: white;
 height: 100%;
}

.nav { padding: 5px 15px 5px 15px; }

.nav:hover
{
 border-radius: 3px;
 cursor: pointer;
 background-color: #EE82EE;
}

.text_area
{
 font-size: 18px;
 margin-left: auto;
 margin-right: auto;
 width: min(750px, 85%);
}


.pair 
{
 margin-bottom: 30px;
}

.qn
{
 color: black;
 margin-bottom: 10px;
}

.an
{
 display: none;
 color: firebrick;
}
	
.qn:hover
{
 cursor: pointer;
 color: blue;
}

#coaches_grid
{
}

#coaches_grid > div
{
 border: 1px solid black;
 border-radius: 10px;
 height: 80px;
 min-width: 200px;
 text-align: center;
 display: inline-block;
 margin: 0px 0px 20px 20px;
 padding: 70px 0;
}

ul li 
{
 margin-bottom: 7px;
}

dt { margin-bottom: 5px; font-weight: bold; }
dd { margin-bottom: 15px; }

/* Adjustments for smaller screen sizes */

@media screen and (max-width: 1500px) 
{
 #img_background { width: 10vw; height; 10vw; } 
}

@media screen and (max-width: 1200px) 
{
 #img_background { display: none; } 
}


@media screen and (max-width: 900px) 
{
 .text_area { font-size: 16px; }
}


@media screen and (max-width: 550px)
{
	
 #banner { font-size: 25px; }
 #nav_menu { font-size: 14px; }
 .text_area { font-size: 14px; }
 
}


@media screen and (max-width: 400px) 
{
	
 #banner { font-size: 20px; }
 #nav_menu { font-size: 14px; }
 .text_area { font-size: 14px; }
 .nav { padding: 5px 3px 5px 3px; }
 
}