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; }

#banner_wrapper
{
 width: 100%;
 background: firebrick;
 color: white;
 border-top: 1px solid black;
 border-bottom: 1px solid black; 
}

#banner_image
{
 margin-top: 10px;
 margin-bottom: 5px; 
 height: 75px;
 width: 75px;
}

#banner_title
{ 
 padding-left: 20px;
 text-align: left;
 font-size: 30px;
 font-weight: bold; 
}

#banner_extra
{ 
 padding-left: 20px;
 text-align: left;
 font-size: 18px;
}

#footer_image
{
 background-size: contain;
 background-image: url("images/SportsBanner.jpg");
 background-repeat: repeat-x;
 position: fixed;
 height: 100px;
 bottom: 30px;
 width: 100%;
 background-color: #FFF1E0; 
}

#footer 
{
 font-size: 14px;
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 background-color: purple;
 color: white;
 border: 1px solid black;
 text-align: center;
 padding-bottom: 5px;
 padding-top: 5px;
}

#nav_menu, #nav_menu_2, #confirm_menu
{
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 width: 100%;
 border-bottom: 1px solid black; 
 background-color: purple;
}

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

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


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

#confirm_label, #confirm_yes, #confirm_no
{
 height: 100%;
 display: inline-block;
}

#confirm_label { padding: 5px 5px 5px 5px; color: yellow; }
#confirm_yes, #confirm_no { padding: 5px 10px 5px 10px; color: white; background-color: #5D3FD3; }
#confirm_yes:hover, #confirm_no:hover { background-color: #EE82EE; }


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

#root_table { display: none; }

#team_name_banner { display: none; font-size: 16px; background: purple; color: white; }
#introduction { padding-bottom: 10px; margin-top: 20px; }
#create_team { display: none; padding-bottom: 10px; margin-top: 15px; }
#edit_team { display: none; padding-bottom: 10px; margin-top: 15px; }
#login { display: none; margin-top: 15px; }
#select_active_players { display: none; margin-top: 10px; }
#FAQs { display: none; margin-top: 15px; }
#stopwatch { display: none; }
#stopwatch_buttons { font-size: 18px; }
#email_results { display: none; }
#saved_team { display: none; }
#saved_team_name { color: purple; font-weight: bold; }
#saved_password { color:purple; font-weight: bold; }

#nav_home { display: none; }
#nav_menu_2 { display: none; }
#confirm_menu { display: none; }

#home_menu
{
 margin-top: 20px;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}

#stopwatch_buttons, .centered
{
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}

#save_or_discard
{
 margin-left: 0px;
}

#save_or_discard td
{ 
 vertical-align: top; 
 padding-bottom: 10px;
}

#credentials_wrapper { display: none; }
#email_wrapper { display: none; margin-left: 20px; }

#and_saving { display: none; }

#team_name, #password, #login_team_name, #login_password, #email_address
{
 font-size: inherit;
 width: min(80%, 300px);
 border: 1px solid blue;
 background-color: #FCFFD8;
 padding: 5px 10px 5px 10px;
 margin-top: 1px;
 display: inline-block;
 overflow-wrap: break-word;
}

#add_player, #remove_player
{
 font-size: inherit;
 width: min(80%, 225px);
 border: 1px solid blue;
 background-color: #FCFFD8;
 padding: 5px 10px 5px 10px;
 margin-top: 1px;
 margin-bottom: 5px;
 display: inline-block;
 overflow-wrap: break-word;
}

#email_wrapper { margin-bottom: 0px;}

#error_save, #error_prepare, #error_login, #error_select_active_players, #error_send_email, #error_add_player, #error_remove_player
{
 display: block;
 color: firebrick;
}

.btn
{
 background-color: #2a52be;
 color: white;
 display: inline-block;
 text-align: center;
 padding: 10px;
 margin: 2px;
 border: 1px solid black;
 font-size: 16px;
 border-radius: 3px;
}

.btn:hover
{
 background-color: #DC143C;
 cursor: pointer;
 border-radius: 5px;
}

#btn_send_email { margin-top: 5px; }
#btn_exit_game { margin-top: 3px; }

.pair 
{
 margin-bottom: 30px;
}

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

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

#row_number
{
 background-color: #FCFFD8;
 padding: 3px 3px 3px 3px;
 text-align: center;
 font-size: inherit;
}

#number_players 
{ 
 font-size: 18px;
 text-align: center;
 width: 40px;
 height: 36px;
 border: 1px solid black;
 background-color: #FCFFD8;

}

#plus, #minus
{
 margin: 5px;
 background-color: #2a52be;
 color: white;
 font-size: 20px;
 width: 40px;
 height: 40px;
 font-weight: bold;
 border: 1px solid blue;
 font-size: 16px;
 border-radius: 3px;
}

#plus:hover, #minus:hover
{
 background-color: #DC143C;
 cursor: pointer;
 border-radius: 5px;
}

#total_minutes { text-align: center; }
#players_on_field { text-align: center; }


#team_table
{
 margin-left: auto;
 margin-right: auto;
 border-collapse: collapse;
 text-align: center;
}

#team_table td:nth-child(2)
{
 width: 200px;
 max-width: 80%; 
}

/*
 1 = number
 2 = player name, editable
 3 = player name, noneditable
 4 = on the field? y/n
 5 = minutes played 0.00 (visible)
 6 = minutes player 0.0000 (always hidden)
 7 = characters remaining -- no outline 

*/

#team_table td:nth-child(1) { border: 1px solid black;}  
#team_table td:nth-child(2) { border: 1px solid black; text-align: left; background-color:#FCFFD8; }
#team_table td:nth-child(3) { border: 1px solid black; text-align: left; }
#team_table td:nth-child(4) { border: 1px solid black; background-color: #FCFFD8; }
#team_table td:nth-child(5) { border: 1px solid black;}
#team_table td:nth-child(6) { border: 1px solid red; }
#team_table td:nth-child(7) { border: none; }

#team_table td
{
 padding: 7px 10px 7px 10px;
 font-weight: normal;
}

.moverow:hover
{
 cursor: pointer;
 font-weight: bold; 
 color: white;
 background: firebrick;
}

.mycheckbox
{
 padding: 0 0 0 0;
 margin: 0 0 0 0;
}

.mycheckbox:hover
{ 
 font-weight: bold;
 cursor: pointer;
 transform: scale(1.1);
 color: blue;
}