* {
    box-sizing: border-box;
}

body {
    background-color: #0085cf;
/*	background:#0085cf url('../../images/backgrounds/packy.jpg') no-repeat left top; */
	background:#0085cf url('../../images/backgrounds/33917_148293768545046_175041_n.jpg') no-repeat left top;
    background-size: cover;
    margin:0px;
    font-size: 16px;
    line-height: 1.2;
/*	background: rgba(0, 133, 207, 0.5); Darkening filter*/
} 

a {
    text-decoration:none;
    color:black;
}

i {
    background-image: linear-gradient(135deg, white, #6B9BC3, #386890);
    color: transparent;
    background-clip: text;        
}

a img {
    border:none;
}

button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

input[type=number] {
    -moz-appearance:textfield;
    -webkit-appearance: none;
     appearance: none;
}

menu {
    padding: 0;
    margin:0;
}

select {
    border: 0px solid black;
    font-weight:bold;
}

.container {
    position:relative;
    margin: 0px 0px 20px 12px;
    border-radius: 6px;
    box-shadow: 8px 8px 8px #000000;
    opacity:0.8;
/*	opacity:0.9; */
    background-color: white;
    background-image: -webkit-gradient(linear, left top, left botto, from(white), to(#c0ddea));
    background-image: -webkit-linear-gradient(top, white, #c0ddea);
    background: linear-gradient(to bottom, white, #c0ddea);
}

 .quarter_container {
    width:250px;
    min-height:150px;
    display:inline-block;
    overflow: hidden;
}

.caption {
    color:white;
    padding:4px;
    font-weight: bold;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: rgba(0, 0, 0, 0.6); /* FALLBACK IF GRADIENT IS NOT SUPPORTED */
    background: -webkit-gradient(linear,left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.8)), color-stop(90%,rgba(0, 0, 0, 0.4)), color-stop(100%,rgba(0, 0, 0, 0)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8) ,rgba(0, 0, 0, 0.4) 90%,rgba(0, 0, 0, 0));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) ,rgba(0, 0, 0, 0.4) 90%,rgba(0, 0, 0, 0));
}

.container_msg {
    text-align:center;
    vertical-align:middle;
    height:278px;
    display:table-cell;
    width:484px;
}
	
.underline {
    text-decoration: underline;
}

.left {
    text-align: left;
}
    
.center {
    text-align: center;
}

.right {
    text-align: right;
}

.bold {
    font-weight: bold;
}
    
.darkgreen, .darkgreen a {
    color: darkgreen;
}

.gray {
    background-color: LightGray;
}

.img_clip {
    position: relative;
    overflow: hidden;
}

.img_clip img {
    position: absolute;
    height:140%;
    top:-20%;
    left:-20%;
}

.logo_mask {
	position:absolute;
	vertical-align:middle;
	top:-20%;
	height:140%;
	width:84%;
	text-align:center;
}   

.logo_mask img {
    height: 100%;
}

.logo_mask_first, .logo_mask_left {
	left:-17%; 
}     

.logo_mask_left {
    mask-image: linear-gradient(to right, black 73%, transparent 87%);
}     

.logo_mask_right {
	right:-17%; 
}

.over_text {
	position: absolute;
	z-index:3;
	top: 29%;
	width: 100%;
	font-size: 47px;
	text-align: center;
	color: white;
	text-shadow: -1px -1px black,
		-1px 0px black,
		-1px 1px black,
		0px -1px black,
		0px 1px black,
		1px -1px black,
		1px 0px black,
		1px 1px black,
		3px 3px 3px black;
	font-weight: bold;
}

.over_text a {
	color: white;
}

/* CONTROL */	
#control {
    position:relative;
    padding: 4px;
    padding-left:6px;
    width:100%;
    margin-bottom:4px;
    border-bottom: 1px solid black;
    background-color: rgba(0, 0, 0, 0.4); 
    color:white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#control a {
    color:white;
}

#control > * {
    border-right: 1px solid white;
    padding-right: 6px;    
    padding-left: 6px;
    white-space: nowrap;
}

#control img {
    height: 24px;
    margin-right: 6px;
    vertical-align: -30%;
}

#navi_search_input {
    width:80px;
    transition: width 0.4s ease-in-out;
}

#navi_search_input:focus {
    width:240px;
    max-width: 34%;
}

#control_before {
    display: none;
}

#sub_control {
    color:white;
    background-color: rgba(0, 0, 0, 0.6);
    position:absolute;
    max-height:207px;
    overflow-y:auto;
    z-index:1;
    border-bottom:1px solid black;
    padding:12px;
    margin-top:-4px;
    display:none;
    width:100%;
}

#sub_control:empty {
    padding:0px;
}

#sub_control a {
    color: white;
}

#sub_control > * {
    display: inline-block;
    margin-right: 8px;
    width: 96px;
    height: 96px;
    border: 1px solid gray;
    text-align: center;
    vertical-align: middle;
}

#sub_control > a > * {
    display: block;
}

#sub_control i {
    font-size: 40px;
    margin-top: 12px;
}

#sub_control table {
    display:inline-table;
    width:242px;
    height:190px;
    text-align:center;
    border: 1px solid gray;
    margin:2px;
    vertical-align: top;
}
	
/* LOGO */	
#logo {
    margin-left:6px;
}

/* MAIN */	
.main_col {
    display:inline-block;
    max-width: 524px;
    width: 100%;
    vertical-align: top;
}

.main {
    max-width:512px;
    min-height:382px;
    overflow: auto;
/*  height:381px; */
}

.container_main_header {
    height: 76px;
	color:white;
	font-family: Verdana Narrow;
	font-size:20px;
	font-stretch: condensed;
    font-weight:bold;
	text-shadow: 2px 2px 1px black; /* BETA */
	text-align:center;
    background-color: rgba(0, 0, 0, 0.6); /* FALLBACK IF GRADIENT IS NOT SUPPORTED */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) ,rgba(0, 0, 0, 0.4) 90%,rgba(0, 0, 0, 0));
    display: flex;
    align-items: center;
}
    
/* SIDE */	
aside {
	width:200px;
    min-width: 200px; /* preparation for RD */
    max-width: 512px; /* preparation for RD */
    display:inline-block;
    vertical-align: top;
    margin-right: 12px;
}


#side {
	min-height:560px;
    overflow:hidden;
    color:white;
    background-color: #cacac8;
	text-align: center;
/*	border: 2px solid black;*/
	background: linear-gradient(to bottom, #cacac8, #999999);
	/* 
        OLD PV red blue background
        background: linear-gradient(to right, #999999, rgb(243,40,55) 49%, white 49%, white 51%, rgb(0,28,168) 51%, #999999);  
    */
    /* 
        NEW PV yellow background
    */
    /*    background-image: linear-gradient(to right, #999999, #fbcc40, #999999);  */
    /* this latter will apply only to smaller div containing logo */
}

#side a {
    color:white;
}
	
#side_logo img {
    height: 150px;
	margin-top:8px;
    margin-left: -100%;
    margin-right: -100%;
	opacity:1;
}
    
#side_container  {
}

#side_standings  {
    table-layout: fixed;
    white-space:nowrap;
    text-shadow: 1px 1px 2px black;
    background-image:linear-gradient(to bottom, rgba(256,256,256,0.6), rgba(0,0,0,0.6) 2%, rgba(0,0,0,0.6) 98%, rgba(256,256,256,0.6));
}

#side_standings td:first-child {
    width:8%;
}

#side_standings td:nth-child(2) {
    width:10%;
    margin-left: -100%;
    margin-right: -100%;
    overflow: hidden;
}

#side_standings td:nth-child(3) {
    overflow: hidden;
    text-overflow: ellipsis;
    width:58%;
}

#side_standings td:nth-child(4) {
    width:16%;
}

#side_standings td:nth-child(5) {
    width:8%;
}

.side_container {
    padding:8px;   
    margin-top:24px;
    font-weight:bold;
    font-size:11px;
    width:100%;
}

/* CALENDAR */		
#calendar_control {
    padding-top:8px;
	text-align:center;
	font-weight:bold;
}
    
#calendar_control span {
    font-size: 15px;
    margin-right: 12px;
}
	
#calendar_control span:nth-child(3) {
    margin-right: 24px;
}
	
#calendar {
    padding: 0px 16px 16px;
    margin-left:auto;
    margin-right: auto;
    margin-bottom: 8px;
    table-layout: fixed;
}
	
#calendar th {
    font-size:8px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0px; /* to suppres own width and take width from td */
}
		
#calendar td {
    position:relative;
    border: 1px solid black;
	padding:1px;
	text-align: center;
	vertical-align: top;
	font-size:0px;
    height:54px;
	max-width:54px;
    width:12.5vw;
	box-shadow: 2px 2px 4px #000000;
	border-radius: 6px;
    overflow: hidden;
}

#fixtures {
    margin-top: 8px;
    width:100%;
    text-align: center;
    table-layout: fixed;
    white-space: nowrap;
}

#fixtures col {
    width: 10%;
}

#fixtures col.fixtures_team_name {
    width: 35%; /* fallback for chrome and older browsers */ 
    width: calc(35% - 24px);
}

#fixtures col.fixtures_team_logo, #fixtures col.fixtures_competition_logo {
    width: 24px;
}

#fixtures col#fixtures_venue {
    width: 28px;
}

#fixtures td {
    overflow: hidden;
    text-overflow: ellipsis;
}

#fixtures img{
    vertical-align: bottom;
    height: 1.2em;
}

.fixtures_day {
    background-color: lightgrey;
}

.fixtures_result {
    border-radius: 24px
}

.fixtures_result a {
    color:white;
}

.small_rank {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    color:white;
    background-color: black;
    border-radius:50%;
    min-width: 12px;
    font-size: 7px;
    font-weight: bold;
    width:auto;
    padding: 0.3px;
    right:1px;
}

.grayed {
    background-color : #cccccc; /* FALLBACK IF GRADIENT IS NOT SUPPORTED */
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#999999)); /* ANCIENT WEBKIT - E.G. OLD ANDROID BROWSER */
    background-image: -webkit-linear-gradient(top, white, #999999);
    background: linear-gradient(to bottom, white, #999999);
}

.shade {
    opacity:0.8;
    color:white;
    background-color : rgba(0,0,0,0.6); /* FALLBACK IF GRADIENT IS NOT SUPPORTED */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(70%, rgba(0,0,0,0.8)), color-stop(100%, rgba(0, 0, 0, 0.8)));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0,0,0,0.8) 70%,rgba(0, 0, 0, 0.8));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0,0,0,0.8) 70%,rgba(0, 0, 0, 0.8));
}

.cell_top {
    font-size: 10px;
    text-align: right;
}

.cell_bottom {
    position: absolute;
    bottom:-1px;
    width: 100%;
    height:33%;
    opacity: 0.8;
    color:white;
    font-size: 14px;
    font-weight: bold;
    font-stretch: condensed;
	/*text-shadow:1px 1px #0085cf;*/
    margin-left: -1px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color : rgba(0,0,0,0.6); /* FALLBACK IF GRADIENT IS NOT SUPPORTED */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(70%, rgba(0,0,0,0.8)), color-stop(100%, rgba(0, 0, 0, 0.8)));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0,0,0,0.8) 70%,rgba(0, 0, 0, 0.8));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0,0,0,0.8) 70%,rgba(0, 0, 0, 0.8));
}

.cell_bottom_edit {
    visibility:hidden;
    position:absolute;
    bottom:-1px;
    width:100%;
    height:33%;
    opacity:0.9;
    color:white;
    font-size:14px;
    font-weight:bold;
    font-stretch: condensed;
	/*text-shadow:1px 1px #0085cf;*/
    margin-left: -1px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color : rgba(0,38,100,0.6); /* FALLBACK IF GRADIENT IS NOT SUPPORTED */
    background-image: -webkit-linear-gradient(top, rgba(0, 38, 100, 0), rgba(0,38,100,0.9) 70%,rgba(0, 38, 100, 0.9));
    background: linear-gradient(to bottom, rgba(0, 38, 100, 0), rgba(0, 38, 100, 0.9) 70%,rgba(0, 38, 100, 0.9));
}

.blue_gradient {
    /*  background-color:SteelBlue;DodgerBlue;lightgray;#0085cf; */
    background-image:linear-gradient(to bottom, #6B9BC3, #386890); 
}

.green_gradient { /*Forrest green */
    background-color : rgba(37,97,0,0.6); /* FALLBACK IF GRADIENT IS NOT SUPPORTED */
    background-image: -webkit-linear-gradient(top, #4ea24e, #1b6f1b);
    background: linear-gradient(to bottom, #4ea24e, #1b6f1b);    
}

.cell_bottom_green {
    background-color : rgba(37,97,0,0.6); /* FALLBACK IF GRADIENT IS NOT SUPPORTED */
    background-image: -webkit-linear-gradient(top, transparent, rgba(37, 97, 0,0.9) 70%,rgba(37, 97, 0, 0.9));
    background: linear-gradient(to bottom, transparent, rgba(37, 97, 0, 0.9) 70%,rgba(37, 97, 0, 0.9));
}

.red_gradient { /* darkred */
    background-color : rgba( 97, 0, 37 ,0.6); /* FALLBACK IF GRADIENT IS NOT SUPPORTED */
    background-image: -webkit-linear-gradient(top, #a23333, #6f0000);
    background: linear-gradient(to bottom, #a23333, #6f0000);   
}

.cell_bottom_red {
    background-color : rgba( 97, 0, 37 ,0.6); /* FALLBACK IF GRADIENT IS NOT SUPPORTED */
    background-image: -webkit-linear-gradient(top, transparent, rgba( 97, 0, 37 ,0.9) 70%,rgba( 97, 0, 37 , 0.9));
    background: linear-gradient(to bottom, transparent, rgba( 97, 0, 37 , 0.9) 70%,rgba( 97, 0, 37, 0.9));    
}

.orange_gradient { /* peru */
    background-color : rgba( 128, 83, 0 ,0.6); /* FALLBACK IF GRADIENT IS NOT SUPPORTED */
    background-image: -webkit-linear-gradient(top, #d79d65, #a46a32);
    background: linear-gradient(to bottom, #d79d65, #a46a32);   
}

.cell_bottom_orange {
    background-color : rgba( 128, 83, 0 ,0.6); /* FALLBACK IF GRADIENT IS NOT SUPPORTED */
    background-image: -webkit-linear-gradient(top, transparent, rgba( 128, 83, 0 ,0.9) 70%,rgba( 128, 83, 0 , 0.9));
    background: linear-gradient(to bottom, transparent, rgba( 128, 83, 0 , 0.9) 70%, rgba( 128, 83, 0, 0.9));    
}

.greenred_gradient {
    background: linear-gradient(to right, rgba(37, 97, 0, 0.9) 35%, rgba( 97, 0, 37 , 0.9) 65%);    
}

.redgreen_gradient {
    background: linear-gradient(to right, rgba( 97, 0, 37 , 0.9) 35%, rgba(37, 97, 0, 0.9) 65%);     
}

.cell_bottom a, .cell_bottom_edit a, .shade a {
    color:white;
}
    
#calendar td:hover .cell_bottom_edit, .fb_img_row_cell:hover .fb_img_description {
    visibility:visible;
    animation: fade_in_to9 1s;
}

.cal_events_count {
    font-size: 10px;
    font-weight: bold;
    color:white;
    background-color: red;
    border-radius: 20px;
    width:auto;
    min-width: 13px;
    padding: 0.5px;
    position: absolute;
    bottom:10px;
    right:1px;
}

/* MATCH */	
#match_info {
    display: table;
	width: 100%;
    height: 76px;
	color:white;
	font-family: Verdana Narrow;
	font-size:20px;
	font-stretch: condensed;
    font-weight:bold;
	text-shadow: 2px 2px 1px black; /* BETA */
	text-align:center;
	border-collapse:collapse;
    background-color: rgba(0, 0, 0, 0.6); /* FALLBACK IF GRADIENT IS NOT SUPPORTED */
    background: -webkit-gradient(linear,left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.8)), color-stop(90%,rgba(0, 0, 0, 0.4)), color-stop(100%,rgba(0, 0, 0, 0)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8) ,rgba(0, 0, 0, 0.4) 90%,rgba(0, 0, 0, 0));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) ,rgba(0, 0, 0, 0.4) 90%,rgba(0, 0, 0, 0));
}

#match_info a, #match_status_bar a {
	color:white;
}

#match_info > span {
    /*border:1px solid #eeeeee; /* DEBUG ONLY */
	padding:6px;
    display: table-cell;
    vertical-align: middle;
}

.match_info_logo {
    width: 14%;
}

.match_info_logo img {
    height: 64px;
}

#match_info_result {
    position:relative;
    width:12%;
    white-space: nowrap;
}
    
#match_info_result img {
    position:absolute;
    top:28px;
    left:54px;
}

#match_info_caption {
    /*border:1px solid #eeeeee; /* DEBUG ONLY */
	width:84%;
    padding-left: 32px; /* KNOWN ISSUE : IS OVERRIDDEN BY #match_info td::padding property */
    text-align: left;
}
	
#match_container {
    min-height: 278px;
    /* min-height: 272px; SHOULD PERHAPS BE DEFAULT, IF THE ABOVE IS INCORRECTLY DRAWN */
    padding-left:12px;
    padding-right:12px;
    padding-top:4px;
	font-weight:bold;
/*	text-align:center; */
	font-family: Verdana Narrow;
	font-size: 13px;
    overflow: hidden;
}

.match_container_btns {
    margin-bottom: 16px;
    display: flex;
}

.match_container_btns > button {
    flex-grow: 1;
}

.win_ratio_bar {
    font-size:0px;
    width:100%;
    border-radius: 6px;
    padding: 0px;
    overflow: hidden;
}

.win_ratio_bar > span{
    font-size:13px;
    display: inline-block;
    height: 20px;
    padding: 2px 0px;
    overflow: hidden;
    color: white;
}
	
.fb_img_row {
    min-height:50px;
    font-size:0px;
}

.fb_img_row img {
    height: 50px;
    width: 50px;
    object-fit: cover;
}
    
#match_status_bar {
    background-color: rgba(0, 0, 0, 0.6); /* FALLBACK IF GRADIENT IS NOT SUPPORTED */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(30%, rgba(0, 0, 0, 0.4)), color-stop(100%,rgba(0, 0, 0, 0.8)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) ,rgba(0, 0, 0, 0.4) 30%,rgba(0, 0, 0, 0.8));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) ,rgba(0, 0, 0, 0.4) 30%,rgba(0, 0, 0, 0.8));
    min-height: 16px;
	font-family: Verdana Narrow;
	font-stretch: condensed;
	color:white;
    text-shadow: 2px 2px 1px black; /* BETA */
    font-weight:bold;
	font-size:12px;
	text-align:center;	
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
    clear:both;
    display: table;
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
}

#match_status_bar > * {
	padding: 10px 4px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: table-cell;
}

#match_status_bar img {
    vertical-align: middle;
    height: 1.2em;
}
        
.line_up {
    margin-top:8px;
/*    width:48.5%; */
    width:100%; 
    max-width:242px;
    margin-bottom: 8px;
}
    
.lup_pic  {
    grid-area:pic;
    float: left;
    width:50px;
    height:50px;
}

.lup_pic img  {
    height:50px;
    object-fit: cover;
}

.lup_row {
    text-align:center;
    position: relative;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lup_row:nth-child(2) {
    grid-area: row1;
}

.lup_row:nth-child(3) {
    grid-area: row2;
    font-weight: normal;
}

.lup_row span {
    position: absolute;
    width:32px;
}
    
.lup_row span img {
    vertical-align: text-top;
    margin-bottom:5px;
}

.cards {
    left:6px;
    text-align: left;
}
    
.goals {
    right:0px;
}
    
.goals img {
    margin-right: 2px;
}
    
.lup_row:nth-child(3) span {
    min-width:36px;
    position:relative;
    display: inline-block;
    border-right-width: 1px;
/*        border-right-style: solid; */
    margin:0px;
    min-height:16px;
    vertical-align:middle;
}

.lup_row:nth-child(3) span:last-child {
    border-width : 0px;
}

#home_line_up, #home_lineup {
    float:left;
}

#away_line_up, #away_lineup {
    float:right;
}
    
/* ATTENDANCE */
.attendance_control, #tr_missed {
    margin: 20px 0px 4px;
}

.attendance_control:first-child {
    margin: 0px 0px 4px;
}

/* ROSTER */
.bubble {
    background-image:linear-gradient(to bottom, white, lightgray);
    border-radius:6px;
    color:black;
}

.darked	{
    background-image:linear-gradient(to bottom, gray, darkgray);
}
	
.player_card {
    display:inline-block;
    display: inline-grid;
    grid-template-columns: 50px auto;
    grid-template-rows: 50% 50%;
    grid-template-areas: 
        "pic row1"
        "pic row2";
    grid-auto-columns: 45px;
    margin: 0px 6px 12px;
    width:230px;
    text-align:center;
    line-height:1.92em;
    box-shadow: 1px 1px 2px gray;
    overflow:hidden;
}
    
.player_card img {
    vertical-align: baseline;
    margin-right: 2px;
}
	
.lup_post {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    display:table-cell;
    float:right;
    height:50px;
    width:45px;
    vertical-align:middle;
    line-height:3.8em;
    color:white;
    overflow:hidden;
    border-top-right-radius:6px;
    border-bottom-right-radius:6px;
}
    
.lup_post a {
    color:white;
}
	
/*PLAYER*/
#stats {
    list-style-type:none;
    padding: 12px;
    white-space: nowrap;
    margin: 0px;
    font-size: 0px;
}

#stats span {
    vertical-align:middle;
    display: inline-block;
/*    border: 1px solid red; */
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
}
	
#stats > li > div {
    background-image:linear-gradient(to bottom, #6B9BC3, #386890);
    color:white;
    border-radius:6px;
    padding:2px;
}

#stats > li > ul {
    list-style-type:none;
    padding: 0px;
    margin: 0px;
}

#stats > li > ul > li {
    padding-left:2px;
/*    display:table-row; */
    width: 100%
}


#standings {
    table-layout: fixed;
    white-space: nowrap;
    overflow: hidden;
    width:100%;
    border-collapse: collapse;
    line-height: 1.5em;
}

#standings col {
   width: 52px;
}

#standings col:nth-child(1) {
    width: 32px;
}

#standings col:nth-child(2) {
    width: 24px;
}

#standings col:nth-child(3) {
    width: auto;
}

#standings col:nth-child(9) {
    width: 32px;
}

/* 
#standings col:nth-child(8), #standings col:nth-child(9) {
    width: 8%;
}
*/
#standings tr:hover td{
    background-color: lightblue;
}

#standings td {
    padding: 1px;
    overflow: hidden;
    text-overflow: ellipsis;    
}

#standings img {
    vertical-align: bottom;
}

/* EDIT_RESULT */
#match_info .spinner {
    width: 28px;
}

#er_facts menu {
    margin: 24px 0;
}

#er_facts_controls {
    display: none;
    clear:both;
    margin: 20px 0;
}

#er_facts_controls > button {
    flex-grow: 1;
}

.droppable {
/*    border:2px dashed gray; */
}
    
.bracket {
    min-width:200px;
    min-height:50px;
    text-align: center;
}

.fb_img_row_cell {
    display:inline-block;
    position:relative;
    margin-right: 4px;
}
    
.fb_img_row_cell img {
    border-radius: 25px;
    box-shadow: 1px 1px 2px gray;
    object-fit: cover;
}   
    
.fb_img_description {
    font-size: 14px;
    visibility: hidden;
    position:absolute;
    width:50px;
    display:inline;
    top:32px;
    text-align:center;
    z-index: 1;
}

.match_fact {
    clear: both;
    display: table;
    table-layout: fixed;
    width: auto; /* overrides player_card */
    margin: 0px 0px 12px; /* overrides player_card */
    min-width: 230px;
    white-space: nowrap;   
}

.match_fact > * {
    display: table-cell;
    vertical-align: middle;
}

.match_fact img {
    margin:0px;
    vertical-align: middle;
}
    
.match_fact > span:not(.match_fact_player):not(.ui-spinner) {
    padding:0px 6px;
    width: 28px;
}

.match_fact select {
    margin-right: 6px;
/*    -moz-appearance: none; */
/*    appearance: none; */
    border:1px solid lightgray;
    border-radius: 4px;
    min-width:144px;
}

/* ADD_EVENT */
#add_event_control
	{float:left;
	width:32px;}
    
#add_event_nav {
    float:left;
    width:32px;
    display: none;
}
    
#add_event_nav ol {
    list-style-type: none;    
}

.add_event_caption {
    font-size:20px;
    text-align:center;
    margin-top: 16px;
}

.add_event_description {
    font-size:20px;
	opacity:0.5;
    text-align:center;
}

.add_event_buttons {
    margin-top:12px;
    margin-bottom:8px;	
}

#add_event_type ul {
    list-style-type: none;
}
    
#add_event_type li {
    display:inline;
}
 
/* #add_event_type ul:hover li
    {opacity:0.5;
    animation: opacity_reverse_hover 0.5s;} WILL BECOME DEFAULT UPON POSSIBILITY TO SELECT */

#add_event_type ul li /* TEMPORARY ONLY WHLIE IT IS IMPOSSIBLE TO SELLECT */
    {opacity:0.5;
    animation: opacity_reverse_hover 0.5s;} /* BETA */
    
#add_event_type ul:hover li:hover
    {opacity:1; 
    animation: opacity_hover 0.5s;} /* BETA */

#add_event_teams, #add_event_competition, #add_event_place {
    display:none;
	text-align:center;
}

#add_event_competition_img {
    height:120px;
}

#add_event_home_team {
    margin-top:16px;
	margin-bottom:16px;
}
	
#add_event_home_team_logo {
    float:left;
}

#add_event_home_team_check {
    position:absolute;
    margin-left:-27px;
    visibility:hidden;
    margin-top:22px;
}

#add_event_home_team_suggest {
    position:absolute;
    background-color:white;
    margin-top:-12px;
    border-radius:6px;
    margin-left:76px;
    width:80%;
	text-align:left;
	z-index:1;
}
    
#versus {
    font-size:16px;
}
	
#add_event_away_team {
    margin-top:16px;
	margin-bottom:16px;
}

#add_event_away_team_logo {
    float:right;
}

#add_event_away_team_check {
    position:absolute;
    margin-left:-27px;
    visibility:hidden;
    margin-top:22px;
}
	
#add_event_away_team_suggest {
    position:absolute;
    background-color:white;
    margin-top:-12px;
    border-radius:6px;
    margin-left:12px;
    width:80%;
	text-align:left;
	z-index:1;
}
	
.add_event_team_input, #add_event_competition_select {
    border-radius: 6px;
	margin-left:10px;
	padding:4px;
	font-weight:bold;
	margin-top:14px;
	width:82%;
	font-size:20px;
}
	
#add_event_datetime {
    display:none;
}
	
#add_event_ending_time_checkbox {
    position:relative;
    top:6px;
    left:-45px;
}   
    
/* CSS ANIMATIONS ARE BETA */
@keyframes fade_in_to9 {
    from {
        opacity:0;
    }
    to {
        opacity:0.9;
    }
}
    
@keyframes opacity_hover {
    from {
        opacity:0.5;
    }
    to {
        opacity:1;
    }
}

@keyframes opacity_reverse_hover  {
    from {
        opacity:1;
    }
    to {
        opacity:0.5;
    }
}

@keyframes slide_control {
    from {
        width: 16px;
    }
    to {
        width: 75%
    }
}

@media (max-width: 760px) { /* smaller than (main container + side) */
    .main_col {
        max-width: 536px;
        padding-right:12px; 
    }
    
    aside {
        width: calc(100% - 24px);
    }
    
    #calendar {
        padding: 0px;
    }
    
    #side {
        min-height: auto;
    }
}

@media (min-width: 549px) { 
    .mobile_only { /* display only on mobile devices */
        display: none !important;
    }
}

@media (max-width: 548px) { /* smaller then main container and no space for two quater containers*/   
    .no_mobile { /* do not display on mobile device */
        display: none !important;
    }
    
    .quarter_container {
        width: calc(100% - 12px);
    }
    
    #control > *:nth-child(2) {    
        padding-left: 0px;
    }    

    #fixtures, #standings {
        font-size: 12px;
    }
    
/*     
    #control_before {
        vertical-align: sub;
        border-right: 0;
        content: "menu";
        color:transparent;
        display:inline-block;
        width:16px;
        height: 12px;
        background-image: -webkit-linear-gradient(top, white 20%, transparent 20%, transparent 40%, white 40%, white 60%, transparent 60%, transparent 80%, white 80%);
        background: linear-gradient(to bottom, white 16%, transparent 16%, transparent 42%, white 42%, white 58%, transparent 58%, transparent 84%, white 84%);
    }

    #control:hover, #sub_control {
        position: fixed; 
        width: 75%;
        height: 100%;
        z-index: 2;
    }
    
    #control:hover  {
        animation: slide_control 1s;
        padding: 0px;
    }
    
    #control:hover > * {
        display:block;
        border-bottom: 1px solid gray;
        line-height: 2em;
        border-right: 0;
    }
    
    #control:hover::before {
        display: none;
    }
*/
}