body
	{
	border-style: none;
	border-color: inherit;
	border-width: 0px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: small;
	margin-top: 4px;
	margin-bottom: 0px;
	margin-left: 4px;
	margin-right: 4px;
	background-color: #CCC2B6;
}

hr {
	margin-top:			0;
	margin-bottom:		2px;
}
.hidden
{
	display:			none;
}

.information
{
	font-style:			italic;
	font-weight:		smaller;
}
h2, h3, h4
{
	margin-bottom:		2px;
	margin-top:			4px;
}

div.container
{
/*	width:				960px;*/
	width:				100%;
	background-color:	white;
	margin-top:			0px;
	margin-bottom:		0px;
	margin-left:		auto;
	margin-right:		auto;
	padding:			0px;
	border:				0px;
}

div.content
{
	margin-top:			0;
	Amargin-top:			2px;
	padding:			0px;
	border:				0px;
}

Adiv.content div.main_content,
div.content div.main_content
{
	display:			flex;
	flex-direction:		column;
	Awidth:				700px;
	Awidth:				75%;
	Afloat:				left;
	Amargin-top:			12px;
	margin-top:			0;
	margin-bottom:		2px;
	margin-left:		8px;
	margin-right:		8px;
	padding:			0px;
	border:				0px;
}

div.content div.main_content_full
{
	margin-top:			12px;
	margin-bottom:		2px;
	margin-left:		8px;
	margin-right:		8px;
	padding:			0px;
	border:				0px;
}

div.subsection
{
	margin-top:			6px;
	margin-bottom:		6px;
	padding:			10px;
	border:				solid 1px gray;
	background-image:	linear-gradient(white, lightgray);
}

/* Standard/Default width of a Popup. This should appear prior to any specific popup styles. */
div.popup
{
	width:				450px;
}

div.popup.fixed {
	position:			fixed;
}

a
{
	color:				#333;
}

Aa:hover
{
	color:				#BBB;
}

a.quicklink
{
	color:				#999;
	font-size:			smaller;
}

a.active-step
{
	color:				blue;
}

a.search_link,
a.clear_search_link
{
	text-decoration:	none;
}

.clear_float
{
    clear:			both;
    height:			0px;
    margin:			0px;
    padding:		0px;
    font-size:		0px;
    border:			none;
}

.message
{
	color: maroon;
}

.important
{
	color: maroon;
}
/* input tag background label */
.text-label
{
	color:			#cdcdcd;
	font-weight:	normal;
}

.page_caption
{
	font-weight:		bold;
	font-size:			14pt;
}

.page_image {
	border-bottom:		1px solid #CCC;
	margin-bottom:		6px;
	padding-bottom:		6px;
}
.data-entry-form table
{
	margin-top:		4px;
	border:			1px solid gray;
}

.data-entry-form table table
{
	margin-top:		0px;
	border:			none;
}

.data-entry-form label
{
	color:			#AAA;
}

.data-entry-form-label
{
	width:			100px;
}

.data-entry-form h4
{
	margin-top:		4px;
	margin-bottom:	0px;
	
}

.data-entry-form p
{
	font-size:		8pt;
}

.data-entry-error
{
	background-color:	pink;
}

.action_icon
{
	width: 16px;
}

img.size_medium
{
}

input.datetimepicker
{
	width:12em;
}

td.money,
td div.money
{
	text-align:			right;
}

/* right-align monetary amounts */
td div[data-monetary-amount] {
	text-align: right;
}

/* make debit amounts show up in red */
td div[data-monetary-amount^="-"] {
	color: red;
}

img.legend {
	height: 1.5em;
	vertical-align: middle;
}

/************** CSS for rendering on an iPad ***************/
div.iPad input,
div.iPad select
{
	font-size: 14pt;
}

div.iPad input[type=button] {
	height: 40pt;
	width: 18em;
}

div.iPad span {
	font-size: 14pt;
}

.flag-icon {
	height:			2.25em;
	text-align:		center;
	vertical-align:	middle;
}

div.header {
	font-weight:	bold;
}
/*************************************************************************************************/
/***************************************     Page Header     *************************************/
/*************************************************************************************************/
.page_header
{
	position:			sticky;
	top:				0;
	z-index:			10;	/* Must be greater than a sticky table thead for a scrolling datatable on the page. */
	border:				0px;
	background-color:	#333366;
	color:				white;
	font-family:		Times New Roman;
}

.page_header_content
{
	padding:			8px;
}

.page_header .title
{
	float:				left;
	font-size:			20pt;
	font-weight:		bold;
}

.page_header .subtitle
{
	float:				left;
	font-size:			12pt;
	font-weight:		bold;
	color:				gold;
	padding-left:		2em;
}

.page_header a
{
	color:				white;
}

.Apage_header a:hover
{
	color:				#BBB;
}

.login_block
{
	float:				right;
	font-size:			8pt;
}

.login_block a
{
	color:				white;
}

.login_block a:hover
{
	color:				#BBB;
}

/*************************************************************************************************/
/**********************************     Featured Pictures     ************************************/
/*************************************************************************************************/
.featured_pictures
{
	padding-top:		4px;
	margin-bottom:		0;
	border-top:			1px solid gray;
}

.featured_pictures_content
{
	width:				100%;
/*	height:				140px;*/
}

.featured_pictures_content img
{
	border:				2px solid transparent;
	height:				140px;
}

/*************************************************************************************************/
/************************************     Navigation Bar     *************************************/
/*************************************************************************************************/
/*
#navbar
{
	font-size:			10pt;
	font-family:		Arial;
	padding-top:		2px;
	padding-left:		8px;
	padding-bottom:		2px;
	border-top:			1px solid gray;
	border-bottom:		1px solid gray;
}

#navbar a
{
	color:				White;
}

#navbar a:hover
{
	color:				#BBB;
}

#navbar ul
{
    float:				left;
    list-style:			none;
    margin:				0px;
    padding:			0px;
    padding-left:		0px;
    padding-top:		0px;
    padding-right:		0px;
    padding-bottom:		0px;
    background-color:	transparent;
}

#navbar ul li
{
    float:				left;
    padding-left:		0px;
    padding-top:		0px;
    padding-right:		0.5em;
}
*/

#navbar {
	font-family:		Arial;
	padding-top:		2px;
	padding-left:		8px;
	padding-bottom:		2px;
	margin:				0px;
	border-top:			1px solid gray;
	border-bottom:		1px solid gray;
/*	height: 1em;*/
}
#navbar ul {
	margin:				0px;
	padding:			0px;
	z-index:			1000;
}
#navbar li {
	list-style:			none;
	float:				left;
	padding:			0px 8px;
	color:				#BBB;
}
#navbar li a {
	display:			block;
	background-color:	transparent; /*#5e8ce9;*/
	color:				White;
	text-decoration:	none;
}
#navbar a:hover,
#navbar li a:hover,
#navbar ul li a:hover
{
	color:				#BBB;
}
#navbar li ul {
	display:			none; 
	width:				10em; /* Width to help Opera out */
	background-color:	#333366;
/*	background-color:	#69f;*/
	margin:				0px;
	padding:			0px;
}
#navbar li:hover ul {
	display:			block;
	position:			absolute;
	margin:				0px;
	padding:			0px;
}
#navbar li:hover li {
	float:				none;
}
#navbar li:hover li a {
	background-color:	transparent;
	border-bottom:		1px solid #fff;
/*	color:				White;*/
}
#navbar li li a:hover {
	background-color:	transparent; /*#8db3ff;*/
}
	
/*************************************************************************************************/
/***************************************     Right Sidebar    ************************************/
/*************************************************************************************************/
div.right_sidebar
{
	width:				260px;
	Afloat:				right;
	font-family:		Verdana;
	font-size:			8pt;
	border-left:		1px solid #CCC;
}

div.right_sidebar_content
{
	margin-bottom:		2px;
	margin-left:		8px;
	margin-right:		8px;
	padding:			0px;
}

/*************************************************************************************************/
/******************************        Calendar Event Popup        *******************************/
/*************************************************************************************************/
body.event_popup
{
	margin:				0px;
	background-color:	white;
}

body.event_popup div.container,
body.event_popup div.container div.content
{
	width:				100%;
	margin:				0px;
}

body.event_popup div.content div.main_content
{
	width:				100%;
	float:				none;
	margin:				0px;
}

body.event_popup div.content div.main_content div
{
	margin-left:		6px;
	margin-right:		6px;
}

.event_popup h2
{
	color:				#333366;
	margin-top:			2px;
	margin-bottom:		2px;
}

.event_popup p
{
	margin:				0px;
}

.event_popup .description
{
	margin-left:		1em;
}

.event_popup .container .content .main_content .information
{
	margin-left:		1em;
}

.event_popup .event_date
{
	font-weight:		bold;
	font-size:			10pt;
}

.event_popup img
{
	border:				none;
}

/*************************************************************************************************/
/******************************************* Popups **********************************************/
/*************************************************************************************************/
/* Cause non-popup portion of the webpage to be grayed out */
#opaque {
	position:			fixed;
	top:				0;
	left:				0;
	width:				100%;
	height:				100%;
	z-index:			1000;
	display:			none;
	background-color:	black;
	-ms-filter:			"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter:				alpha(opacity=30);
	opacity:			0.3;
}

html #opaque {
	position: absolute;
}

.popup_close
{
	float:			right;
	margin-right:	4px; /*1em;*/
	margin-left:	4px;
	font-size:		smaller;
	cursor:			pointer !important;
	font-weight:	bold;
	padding-top:	4px;
	padding-bottom:	3px;
	color:			white;
}

.popup
{
    position:			absolute;
/*

    top:				100px;
	left:				100px;
*/
    border:				none;
    padding:			0px;
    display:			none;
	z-index:			2000;
}

.popup .popup_contents
{
/*
    Awidth:				800px;
*/
    width:				auto;
    margin-left:		auto;
    margin-right:		auto;
    border:				solid 2px #999;
    background-color:	#f0f0f0;
}

.popup .popup_contents .popup_header
{
    background-color:	#333366;
    border-top:			none;
    border-left:		none;
    border-right:		none;
    border-bottom:		solid 1px #CCC;
    color:				White;
    padding-left:		0px;
    padding-right:		0px;
	padding-top:		4px;
	padding-bottom:		4px;
    font-weight:		bold;
    cursor:				move;
	width:				100%;
 }

.popup_title
{
	padding-left:		4px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;
}

.popup .popup_contents .popup_body
{
    border:				none;
    background-color:	#f0f0f0;
    padding-top:		4px;
    padding-left:		4px;
    padding-right:		4px;
    padding-bottom:		8px;
	color:				black;
}


/*************************************************************************************************/
/**********************************        Page Footer        ************************************/
/*************************************************************************************************/
#footer
{
	border:				0px;
	margin-top:			1em;
	border-top:			1px solid #CCC;
}

.footer_content
{
	padding:			8px;
}

.copyright
{
	margin:				0px;
	font-size:			8pt;
}

.acknowledgement
{
	margin:				0px;
	font-size:			8pt;
}

/*************************************************************************************************/
/************************************     Scrolling Div     **************************************/
/*************************************************************************************************/
#makeMeScrollable
{
	height:				100px;
	position:			relative;
}

#makeMeScrollable div.scrollableArea *
{
	position:			relative;
	display:			block;
	float:				left;
	padding:			0;
	margin:				0;
	height:				100px;
}

/*************************************************************************************************/
/************************************     Coach Bio's     ****************************************/
/*************************************************************************************************/
table.biography h4
{
	margin:				0px;
	margin-bottom:		14px;
	text-align:			left;
}
	
table.biography td
{
	vertical-align:		top;
	padding-bottom:		12px;
}

td.bio h4
{
	margin:				0px;
	
}

img.coach
{
	width:				140px;
	border:				1px solid gray;
	cursor:				hand;
	cursor:				pointer;
}

table.biography ul
{
	margin-bottom:		0px;
	margin-top:			0px;
	list-style:			none;
}

/*************************************************************************************************/
/************************************        Teams        ****************************************/
/*************************************************************************************************/
.team-description
{
	background-color:	#e0e0e0;;
	border:				solid 1px lightgray;
	width:				225px;
	margin-left:		10px;
	margin-bottom:		10px;
	padding:			4px;
}

table.teams h4
{
	margin:				0px;
	margin-bottom:		14px;
	text-align:			center;
}
	
img.team
{
	width:				140px;
	border:				1px solid gray;
	cursor:				hand;
	cursor:				pointer;
}

img.team_photo
{
	max-height:			200px;
}

table.team_members
{
	border:				1px solid gray;
	border-collapse:	collapse;
}

table.team_members td,
table.team_members th
{
	border:				1px solid gray;
}

table.team_members th
{
	background-color:	#BBB;
}

/*************************************************************************************************/
/***************************************     Posts     *******************************************/
/*************************************************************************************************/
#postEditor
{
	width:				800px;
}

.post
{
	margin-top:			6px;
	padding-bottom:		6px;
	border-bottom:		1px solid #CCC;
}

.media_caption
{
	font-weight:		normal;
	text-align:			center;
}

.post_caption
{
	font-weight:		bold;
}

/*.post_image img*/
div.post_image
{
	width:				50px;
	float:				left;
	border:				none;
	padding-right:		6px;
}

div.post_image img
{
	width:				100%;
	border:				none;
}

div.post_image.size_medium
{
	width:				250px;
	float:				left;
	border:				none;
	padding-right:		6px;
}

div.post_image.size_medium img
{
	width:				250px;
	border:				none;
}

div.post_image.size_large img
{
	width:				500px;
	float:				left;
	border:				none;
	padding-right:		6px;
}

div.post_image.size_large img
{
	width:				500px;
	border:				none;
}

/* List of Images for a single Post */
div.post_image_list
{
	border:				none;
}

div.post_image_list div.post_image
{
	float:				left;
	width:				200px;
	padding-right:		6px;
	border:				none;
}

div.post_image_list div.post_image img
{
	width:				200px;
	border:				none;
}

div.post_image_list div.post_image.size_medium img
{
	width:				300px;
	border:				none;
}

div.post_image_list div.post_image.size_large img
{
	width:				400px;
	border:				none;
}

.imgZoom
{
	cursor:				hand;
	cursor:				pointer;
}

.imgZoom_caption a
{
	color:				white;
}

.imgZoom_caption a:hover
{
	color:				#BBB;
}

.posts_header
{
	font-weight:		bold;
	color:				navy;
	text-decoration:	underline;
}

.post_header
{
	font-weight:		bold;
	color:				navy;
	font-size:			12pt;
}

.post_header a.quicklink
{
	font-size:			small;
	font-weight:		normal;
}

p.post_text
{
	float:				left;
	margin:				0px;
	padding:			0px;
}

p.post_text.size_medium
{
	width:				200px;
}

div.post_text
{
	float:				left;
	margin:				0px;
	margin-left:		10px;
	line-height:		1.25em;
	width:				75%;
}

div.post_text.size_medium
{
	float:				left;
	margin:				0px;
	margin-left:		10px;
	line-height:		1.25em;
	width:				60%;
}

div.post_text ul
{
	margin:				0px;
}

.post_date
{
	font-weight:		normal;
	font-size:			smaller;
}
/*************************************************************************************************/
/***************************************     Mobile     ******************************************/
/*************************************************************************************************/

body.mobile
	{
	background-color:	#CCC2B6;
	font-family:		Lucida Sans Unicode, Lucida Grande, Sans-Serif;
	font-size:			small;
	margin-top:			0px;
	margin-bottom:		0px;
	margin-left:		0px;
	margin-right:		0px;
	border:				0px;
	}

body.mobile div.container
{
	width:				314px;
	background-color:	white;
	margin-top:			0px;
	margin-bottom:		0px;
	margin-left:		auto;
	margin-right:		auto;
	padding:			0px;
	border:				0px;
}

body.mobile div.content
{
	width:				310px;
	margin-top:			2px;
	margin-bottom:		2px;
	margin-left:		2px;
	margin-right:		2px;
	padding:			0px;
	border:				0px;
}

/*************************************************************************************************/
/***************************************   DataTable    ******************************************/
/*************************************************************************************************/
table.datatable tbody tr:nth-child(odd) {
	background-color:	white;
}
table.datatable tbody tr:nth-child(even) {
	background-color:	lightcyan;
}

/*************************************************************************************************/
/***************************************     Extra      ******************************************/
/*************************************************************************************************/
table.players
{
	border:				1px gray solid;
	border-spacing:		0px;
	border-collapse:	collapse;
}

table.players thead
{
	background-color:	navy;
	color:				white;
	font-weight:		bold;
}

table.players td
{
	border:				1px gray solid;
	padding-left:		4px;
	padding-right:		4px;
	padding-top:		2px;
	padding-bottom:		2px;
}

img.player_photo
{
	height:				200px;
}

/* When a Menu/List of Menu Items is displayed as content on a page. */
.menu-as-content {
	display:		flex;
	flex-direction: column;
	font-size:		larger;
	row-gap:		0.25em;
}

/*************************************************************************************************/
/***************************************  Table Sorter  ******************************************/
/*************************************************************************************************/

table.tablesorter {
	font-family:arial;
	DWObackground-color: #CDCDCD;
	margin:10px 0pt 15px;
	font-size: 8pt;
	width: 100%;
	text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #41408c;
	border: 2px solid #FFF;
	font-size: 8pt;
	padding: 4px;
	color: white;
}
table.tablesorter thead tr .header {
	background-image: url(../img/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody {
	background-color: #FFF;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
/*	background-color: #FFF;*/
	vertical-align: top;
}
Atable.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(../img/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(../img/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}

/************************************************************************/
/*							Scrollable Table							*/
/************************************************************************/

table.scrollable {
	border-collapse:	collapse;
}

table.scrollable thead {
	background-color:	#41408c;
	color:				white;
	display:			block;
	overflow:			hidden;
	font:				600 12px/1.2 "Titillium Web", sans-serif;
	text-transform:		uppercase;
	line-height:		2.0;
}

table.scrollable thead tr {
	display:			block;
	position:			relative;
	background-color:	#41408c;
	color:				white;
}

table.scrollable tbody {
	display:			block;
	overflow-y:			scroll;
	background-color:	#eeeeee;
/*	overflow:			auto;*/
}

table tr.selected {
	background-color:	lightgray !important;
}

table.scrollable td {
	border-top:			2px solid white;
	border-bottom:		2px solid white;
	border-left:		2px solid white;
	border-right:		2px solid white;
	padding-left:		4px;
	padding-right:		4px;
}

/************************************************************************/
/*							Scrolling Table								*/
/************************************************************************/

div.scrolling-table {
	overflow-y:			auto;
	border:				1px solid gray;
	width:				max-content;
    min-height:			8em;
	padding-right:		1.4em;
}

div.scrolling-table table {
	border-collapse:	collapse;
	border-spacing:		0;
	margin:				0;
	border:				none;
}

div.scrolling-table table thead {
	background-color:	var(--MainColor_Dark);
	color:				white;
	position:			sticky;
	top:				0;
	z-index:			1;
	Afont:				600 12px/1.2 "Titillium Web", sans-serif;
	Atext-transform:		uppercase;
	Aline-height:		2.0;
}

div.scrolling-table table thead th {
	text-align:			left;
}

div.scrolling-table table thead th:first-child {
	text-align:			center;
}

div.scrolling-table table tbody tr:nth-child(odd) {
	background-color:	white;
}
div.scrolling-table table tbody tr:nth-child(even) {
	background-color:	lightcyan;
}

div.scrolling-table table {
	cursor:	default;
}

/************************************************************************/
/*								Buttons									*/
/************************************************************************/
.button-panel {
	display: flex;
	flex-direction: row;
	Ajustify-content: center;
	column-gap: 0.3em;
}
.button-panel input {
	font-size: 10pt;
	padding-left: 6px;
	padding-right: 6px;
}

.button-save,
.button-new,
.button-clear,
.button-delete {
	padding: 0 0.2em 0 0.2em;
	margin-top: 0.5em;
	width: auto;
}

.tryout-stat-column,
.tryout-player-name,
.desired-positions,
.desired-team-type {
	width: 1%;
}