/*
CSS File for Team Rosters Plugin
Theme URI: http://shoalsummitsolutions.com
Author: Mark O'Donnell
Author URI: http://shoalsummitsolutions.com
Description: Styles required for the Team Rosters Plugin.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/*---------------------------------------------------------------------------
 *	MSTW Wordpress Plugins (http://shoalsummitsolutions.com)
 *	Copyright 2014-22 Mark O'Donnell (mark@shoalsummitsolutions.com)
 *
 *	This program is free software: you can redistribute it and/or modify
 *	it under the terms of the GNU General Public License as published by
 *	the Free Software Foundation, either version 3 of the License, or
 *	(at your option) any later version.
 *
 *	This program is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 *	GNU General Public License for more details.
 *
 *	You should have received a copy of the GNU General Public License
 *	along with this program. If not, see <http://www.gnu.org/licenses/>.
 */
 
 /*-------------------------------------------------------	
 *	General styles for controls
 *------------------------------------------------------*/
 /* Container for the controls */
 div.mstw-ms-controls {
	margin-bottom : 10px;
	margin-top    : 10px;
	font-size     : 14px;
	height        : 28px;
	display       : inline-flex;
 }
 
 .ms-control {
	 padding-right : 10px;
 }
 
 .ms-title {
	 padding-right : 5px;
 }
 
 .ms-control select {
  padding     : 2px;
  line-height : 28px;
  height      : 28px;
	font-size   : 100%;
}

 .ms-control.button {
	 padding : 0;
 }

 .ms-control input[type=submit] {
		padding           : 6px 10px;
    padding           : 0.428571429rem 0.714285714rem;
    font-size         : 11px;
    font-size         : 90%; /*0.785714286rem;*/
    line-height       : 110%; /*1.428571429;*/
    font-weight       : normal;
    color             : #7c7c7c;
    background-color  : #e6e6e6;
    background-repeat : repeat-x;
    background-image  : -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
    background-image  : -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
    background-image  : -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
    background-image  : -o-linear-gradient(top, #f4f4f4, #e6e6e6);
    background-image  : linear-gradient(top, #f4f4f4, #e6e6e6);
    border            : 1px solid #d2d2d2;
    border-radius     : 3px;
    box-shadow        : 0 1px 2px rgba(64, 64, 64, 0.1);
	vertical-align      : middle;
}

/*-------------------------------------------------------	
 *	PLAYER PROFILE (CPT "player" single page template) 
 *------------------------------------------------------*/

/* this is a patch for the 2012 theme */ 
.nav-previous_single-player {
	margin-bottom: 12px;
	margin-bottom: 1.0rem;
	}
 
/* player-header contains player photo and information */
.player-header {
	background-color: #dce6f1; /* light blue */
	color: #000;
	width: 100%;
	/*height: 162px;*/
	float: left;
	/*font-size: 12px;
	font-size: 1.0rem;*/
	padding: 10px 0;
	}

h1.player-head-title {
	float         : left;
	color         : #000;
	font-size     : 24px;
	font-weight   : bold;
	margin-bottom : 12px;
	margin-bottom : 1.0rem;
   
	}
	
/* new select-option dropdown of team's players */
div.player-select-controls {
	float         : right;
	margin-bottom : 10px;
}

div.player-select-list,
div.player-select-button {
	float         : left;
	margin-right  : 10px;
}

select#player-select {
	width : 200px;
}

select#player-select {
	font-size   : 14px;
	line-height : 20px;
}


/* player-photo is coming from the featured image */
#player-photo {
	float: left;
	padding-left: 20px;
	line-height: 0;
	}

#player-photo img {
	border: 1px solid #bbb;
	padding: 5px;
	background-color: #eee;
	width: 150px;
	height: 150px;
	}
	
div #team-logo {
	padding-left: 20px;
	padding-right: 20px;
	float: right;
	}

div#team-logo img {
	border: 1px solid #bbb;
	padding: 5px;
	background-color: #eee;
	width: 150px;
	height: 150px;
	}

#player-name-nbr {
	float: left;
	padding: 18px 0 20px 20px;
	display: inline;
	color: #000;
	}

.player-header #player-name-nbr #number {
	float: left;
	font-size: 72px;
	line-height: 1em;
	display: inline;
	}

.player-header #player-name-nbr #player-name {
	float: left;
	font-size: 24px;
	line-height: 36px;
	padding-left: 10px;
	display: inline;
	margin-right: 20px;
	}
			
#player-info {
	float: left;
	font-size: 14px;
	line-height: 16px;
	border-left: 2px solid #fff;
	}

#player-info p {
	margin-bottom: 0px;
	}

table#player-info {
	width: auto;
	font-size: 16px;
	color: #111;
	/*padding-left: 10px;*/
	/*margin-left: 20px;*/
	}

table#player-info td {
	padding-top: 2px;
	padding-bottom: 2px;
	border: 0;
	}

table#player-info td.lf-col {
	text-align: right;
	font-weight: bold; 
	padding-left: 10px;
	}
	
table#player-info td.rt-col {
	text-align: left;
	padding-left: 6px;
	}


/* 	
 *	player-bio contains whatever is in the post content 
 *	bio, stats, etc.
 */	
body.single-mstw_tr_player #content.site-content {
	width  : 1000px;
	margin : auto;
}
	
.player-bio {
	clear: both;
	border-style: solid;
	border-width: 2px;
	color: #333;
	border-color: #1982d1; 	/*Twentyeleven Default - lt blue */
	}

.player-bio h1, .player-bio h2, .player-bio h3 {
	margin-bottom: 12px;
	margin-bottom: 1.0rem;
	margin-top: 6px;
	margin-top: 1.0rem;
	margin-left: 15px;
	margin-left: 1.5rem;
	font-size: 18px;
	font-size: 1.5rem;
	font-weight: bold;
	color: #1982d1;			/*Twentyeleven Default - lt blue */
	}

.player-bio h2 {
	font-size: 15px;
	font-size: 1.25rem;
	}

.player-bio h3 {
	font-size: 13px;
	font-size: 1.0rem;
	text-transform: uppercase;
	}

.player-bio p {
	padding: 0 15px;
	padding: 0 1.5rem;
	font-size: 12px;
	font-size: 1.0rem;
	margin-bottom: 12px;
	margin-bottom: 1.0rem;
	line-height: 18px;
	line-height: 1.5em;
	}
	
/*
 *   New bio card with flexbox
 */
.tr-bio-contaner {
	display :   flex;
	flex-flow : row wrap;
	background-color : blue;
	justify-content : space-between;
	gap : 10px;
}

.tr-bio-container > div {
            background-color: gold;
						color : navyblue;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
				
#flex-player-info {
	display : flex;
	flex-flow : column wrap;
}
				
.player-info-title {
	/*justify-content : space-between;
	text-align : right;
	margin-right: 5px;*/
}

.upper {
  display: flex;
	/*flex : row wrap;*/
	flex-direction: row;
	flex-wrap: wrap;
  width: 300px;
  height: 200px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;
  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper > div.info-row {
	width: auto;
}

.info-row > div {
	flex: 1 1 auto;
	border : 1px blue solid;
	background: yellow;
	color: navyblue;
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 600px;
  height: auto;
}

.upper.mc > div.row-info {
	display : flex;
	flex-direction: row;
	flex-wrap: wrap;
}
				


/*-------------------------------------------------------	
 *	ROSTER TABLE
 *------------------------------------------------------*/
 
 /* 
  * This wrapper is an attempt to make the roster tables
  * more responsive on small screens. Remark it out or
  * modify it to suit your application.
  */
 .mstw-tr-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}

.mstw_tr_roster_title {
	color: inherit;
	font-size: 24px;
	margin-top: 24px;
	margin-bottom: 12px;
	}
	
.mstw-tr-table {
	table-layout: auto;
	}
 
.mstw-tr-table thead tr  th {
	background-color: #4e81db;		/*MS default */
	color: #fff; 					/*MS default */
	vertical-align: middle;
	padding-left: 5px;
	text-align: left;
	}

.mstw-tr-table tbody tr:nth-child(odd) {
	background-color: #dce6f1;		/*MS default */
	color: #000;					/*MS default */
	vertical-align: middle;
	}

.mstw-tr-table tbody tr:nth-child(even) {
	vertical-align: middle;
	background-color: #fff; 			/*MS default */
	color: #000; 					/*MS default */
	}
	
.mstw-tr-table tbody tr td  {
	padding-left: 5px;
	/* this is needed down this low in the stack to override twentyeleven defaults */
	border-top: #95b3d7 solid 1px;  		/* MS default */
	border-bottom: #95b3d7 solid 1px;  		/* MS default */
	vertical-align: middle;
	text-align: left;
	}

.mstw-tr-table tbody tr td a:link, .mstw-tr-table tbody tr td a:visited {	
	/* you have finer control here than you do with the admin settings */
	color: #1982d1; 		
	vertical-align: middle;
	text-decoration: none;
	}
	
.mstw-tr-table tbody tr td a:hover {	
	text-decoration: underline;
	}

.mstw-tr-table tbody tr td a:active {	
	color: #1982d1;
	}

.mstw-tr-table tbody tr td img {
	border: 1px solid #BBB;
	padding: 5px;
	background-color: #EEE;
	margin-left: 0; /*10px;*/
	/* height: 64px; removed to improve responsiveness*/
	width: 64px;
	}
 
/*-------------------------------------------------------	
 *	PLAYER GALLERY (Teams/team-slug" taxonomy page)
 *------------------------------------------------------*/
 
 #content-player-gallery {
	margin: 0 7.6% 0 7.6%;
	width: 84.8%;
	}
	
#content-player-gallery header.page-header {
	margin-bottom: 0;
	}

h1.team-head-title {
	font-size: 28px;
	color: #5899E6;
	}

.player-tile {
	float: left;
	margin: 0 15px 15px 15px;
	width: 230px;
	color: #000;
	background-color: #dce6f1;
	/*-moz-border-radius: 15px;*/
	border-radius: 15px;
	}
 
.player-tile img {
	border:           1px solid #bbb;
	padding:          5px;
	background-color: #eee;
	margin-top:       10px;
	margin-left:      10px;
	width:            125px;
	height:           125px;
	}
	
.player-info-container {
	padding-bottom: 10px;
	}
 
.player-name-number {
	font-size:   16px;
	font-weight: bold;
	color:       #000;
	}
	
 .player-name-number {
	padding: 0 0 5px 10px;
	}

.player-name, .player-number {
	display: inline;
	}
	
.player-number {
	margin-right: 10px;
	}

.player-name-number .player-name a:link, .player-name-number .player-name a:visited {
	color:           #000;
	text-decoration: underline;
	}
	
.player-name-number .player-name a:hover, .player-name-number .player-name a:active {
	text-decoration: none;
	}
 
.player-info-container table.player-info {
	padding: 0 5px 5px 10px;
	margin: 0;
	width: 100%;
	font-size: 12px;
	line-height: 16px;
	/*font-size: 1.0rem;*/
	border: 0 solid #fff;
	color: #333;
	/*line-height: 1.0rem;*/
	}

table.player-info tr td {
	border: 0 solid blue;
	padding: 0px 5px 5px 10px;
	}	
	
/*-------------------------------------------------------	
 *	Roster table sortable column header
 *------------------------------------------------------*/

.sorting-indicator {
	display        : inline-block;
	visibility     : hidden;
	width          : 10px;
	height         : 4px;
	/*margin-top   : 8px;*/
	margin-left    : 3px;
	vertical-align : middle;
}

.sorting-indicator:before {
	content: "\f142";
	font: normal 20px/1 dashicons;
	/*speak: none;*/
	display: inline-block;
	padding: 0;
	top: -4px;
	left: -8px;
	color: #fff;
	line-height: 0.5;
	position: relative;
	vertical-align: top;
	/*-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;*/
	text-decoration: none !important;
	color: #fff;
}

.column-comments .sorting-indicator:before {
	top: 0;
	left: -10px;
}

th.sorted.asc .sorting-indicator:before,
th.desc:hover span.sorting-indicator:before,
th.desc a:focus span.sorting-indicator:before {
	content: "\f142";
}

th.sorted.desc .sorting-indicator:before,
th.asc:hover span.sorting-indicator:before,
th.asc a:focus span.sorting-indicator:before {
	content: "\f140";
}

th.sorted .sorting-indicator,
th.desc:hover span.sorting-indicator,
th.desc a:focus span.sorting-indicator,
th.asc:hover span.sorting-indicator,
th.asc a:focus span.sorting-indicator {
	visibility: visible;
}