/* ============================================================================== 
   File: scr_table.css
	- Stylesheet for TipTool TABLES
		for ANY viewports
	- Author: Daniel Hugentobler (DH)
	- created: 19.DEC.2018, taken from scr_generic.css
	- amended: 19.MAY.2020, Firefox hack
	- amended: 17.JAN.2021, DH: new media-width-breakpoints for: narrow/medium/wide
   ============================================================================== */

.tblScroll {						/* scroll-container for wide tables */
	width: 100%;
	margin: 0;
	padding: 0;
	/* horizontal scrollbar to the very bottom */
	overflow-x: auto;			
	overflow-y: hidden;
}

/* temporary makeshift only: until reserached why tables fail to inherit correctly */
/* --------------------------------------------- */
table {
	color: inherit;
	font-size: inherit;
}
 
table,
.tblDisplay {
	empty-cells: show;
	border-collapse: collapse;
	max-width: 96%;					/* prevent nested horizontal scrollbars ! */
}

table .cmd,
table .icon {
	/* a darker shadow for a dark background */
	-webkit-box-shadow: 0.2rem 0.2rem 0.6rem #4b4b4b;
	-moz-box-shadow: 0.2rem 0.2rem 0.6rem #4b4b4b;
	box-shadow: 0.4rem 0.4rem 1rem #4b4b4b;			/* a bit larger for MS IEx */
}

.tblScroll {						/* scroll-container for wide tables */
	width: 100%;
	margin: 0;
	padding: 0;
}

/* provide some space to the table's bottom to allow last row's explanations to be fully displayed - instead of being cut off */
.extra_space,
.bottom_space,
#tblDisplayTranslations {
	margin-bottom: 2rem;
}
.extra_space {
	margin-top: 2rem;
}

td {
	background-color: #D8EBAD;		/* light olive */
}
.byNight td {
	background-color: #303030;		/* very dark gray */
}
/* tippable/open games get a different color */
.openGame td {
	/*background-color: #eed7ac;*/	/* bright darkgoldenrod */
	/*background-color: #f1dfbd;*/	/* brighter darkgoldenrod */
	background-color: #f4e5ca;	/* much brighter tint of darkgoldenrod */
}
.byNight .openGame td {
	background-color: #505050;
	color: #e3e3e3;	/* brighter tint of lightgray */
}

tr,
td.top {
	vertical-align: top;
}
td.middle {
	vertical-align: middle;
}

/* specific & fixed cell-width */
th .extra_narrow,
td .extra_narrow {
	min-width: 1rem;
	max-width: 3rem;
}
th .narrow,
td .narrow {
	min-width: 3rem;
	max-width: 6rem;
}
th .medium,
td .medium {
	min-width: 6rem;
	max-width: 10rem;
}
th .wide
td .wide {
	min-width: 10rem;
	max-width: 20rem;
}
th .extra_wide
td .extra_wide {
	min-width: 20rem;
}

th, 
td {
	padding: 0.4rem;
	vertical-align: middle;
	border-right: 0.3rem solid white;	/* aligns the tables' top left to text */
	border-bottom: 0.3rem solid white;
}
th {
	text-align: center;				/* dft */
}
.byNight th {
	color: lightgray;
	background-color: #202020;			/* even more extremely dark gray */
}

td {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	text-align: left;				/* dft */
}
td.center {
    text-align: center;
}
td.right,
th.right {
	text-align: right;
}

th.left {
	text-align: left;
}

th.buffer,
td.buffer {
	padding-right: 1.2rem;
}
/* override this one, else bottom looks exaggerated */
.tblDisplay th.sort {
	padding-bottom: 0;
}
.tblDisplay th.sort a {
	padding:0;
	margin: 0;
}

/* --------------- */
/*  WIDE viewport  */
/* --------------- */
@media (min-width: 40rem) {
	tr {
		background-color: transparent;
	}
	th {
		color: white;
		background-color: darkolivegreen;	/* 556B2F => darker olive: 495828 too dark => ok for writing not for th */
	}
	/* provide black borders only in wide screen */
	.byNight td,
	.byNight th {
		border-right: 0.3rem solid black;	/* aligns the tables' top left to text */
		border-bottom: 0.3rem solid black;
	}
	/* glossary */
	#page_glossary table {
		width: 100%;
	}
	#page_glossary .tblDisplay th,
	#page_glossary .tblDisplay td {
		vertical-align: top;
	}
	.colHowTo {
		min-width: 20%;
		max-width: 30%;
		width: 25%;
	}

} /* end of WIDE */

/* --------------- */
/* NARROW viewport */
/* --------------- */
@media (max-width: 40rem) {
	/* BREAK table-structure */ 
	/* --------------------- */ 
    table,
    .tblDisplay {
        width: 100%;
        background-color: inherit;
        color: inherit;
    }
	tr {
		background-color: #D8EBAD;			/* light olive - important default for narrow viewports */
        display: block;
		width: 100%;
        padding: 0.4rem;
        margin-bottom: 0.5rem;
		border-radius: 1rem;
		max-width: 100%;
	}
	.byNight tr {
		background-color: #303030;			/* very dark gray */
	}
	/* tippable/open games get a different color */
	.openGame {
		background-color: #f4e5ca;	/* much brighter tint of darkgoldenrod */
	}
	.byNight .openGame {
		background-color: #505050;
		color: #e3e3e3;	/* brighter tint of lightgray */
	}

	.user_input .tblDisplay td,
	.tblDisplay th.td_dtalbl,
	.tblDisplay td {				/* override generic border-settings => hence class-prefix */
		border: none;
	}
    td {
		display: block;
		padding: 0;
        background-color: inherit;
        color: inherit;
    }
	td .btn {
		vertical-align: top;
	}
	th.td_dtalbl {					/* selective display of th-elements */
        display: block;
		padding: 0.4rem;
	}
    td.center,
    td.right {
        text-align: left;			/* override */
    }
	th.buffer,
	td.buffer {
		padding-right: 0;
		margin: 0; 
	}

    thead,
    .td_hide {
        display: none;
    }
 
	th {
		color: black;
		background-color: #D8EBAD;			/* light olive */
		border: none;
	}
	.byNight th {
		background-color: #303030;			/* very dark gray */
	}


	/* add header's description to each and every cell's content */
    /* to keep this approach language-independent: get the td-itemtype's/title's value */
	/* the class td_dtalbl means that the td's title is being used as content's before */
    th.td_dtalbl:before,
    td.td_dtalbl:before {
        content: attr(data-tt-lbl);
		font-weight: bold;
        display: inline-block;
		min-width: 7rem;
		max-width: 7rem;
		padding-top: 0.4rem;				/* padding-bottom would disrupt the line broken content */
    }
	/* set individual widths */
	#tblHistory td.td_dtalbl:before,
	#tblHistory td.td_dtalbl:before,
	#tblCategory td.td_dtalbl:before,
	#tblCategory td.td_dtalbl:before,
	#tblKeepAlive th.td_dtalbl:before, 
	#tblKeepAlive td.td_dtalbl:before,
	#tblDisplayTranslations th.td_dtalbl:before,
	#tblDisplayTranslations td.td_dtalbl:before {
		min-width: 8rem;
		max-width: 8rem;
	}
/* WEIRD SPACING BEFORE LINKS IN NARROW TABLES */
td a {
	margin-left: 0;	/*no effect*/
}

	/* prevent wrong heading for rankhistory fake-subtitles */
	td.fakeSubtitle:before {
        content: none;
	}

	/* override for calendar-table, ranking-list and game-comparison */
	.tblRanklist,
	.tblThisGame,
	#tblCalendar {
		display: table;
	}
	.tblRanklist,
	.tblThisGame {
		width: auto;
	}

	.tblRanklist thead,
	.tblThisGame thead {
		display: table-header-group;
	}

	.tblRanklist tr,
	.tblThisGame tr,
	#tblCalendar tr {
		display: table-row;
	}
	.tblRanklist tr.hide,
	.tblThisGame tr.hide,
	#tblCalendar tr.hide {
		display: none;
	}

	.tblRanklist th,
	.tblRanklist td,
	.tblThisGame th,
	.tblThisGame td,
	#tblCalendar th,
	#tblCalendar td {
		display: table-cell;
	}
	.tblThisGame th,
	.tblThisGame td {
		vertical-align: middle;
		text-align: center;
	}

	/* ranking-list and game-comparison: same as in wide viewport */
	.tblRanklist th,
	.tblThisGame th {
		color: white;
		background-color: darkolivegreen;
		border-right: 0.3rem solid white;	/* aligns the tables' top left to text */
		border-bottom: 0.3rem solid white;
	}
	/* ranking-list and game-comparison: same as in wide viewport */
	.byNight .tblRanklist th,
	.byNight .tblRanklist td,
	.byNight .tblThisGame th,
	.byNight .tblThisGame td {
		color: lightgray;
		border-right: 0.3rem solid black;	/* aligns the tables' top left to text */
		border-bottom: 0.3rem solid black;
	}
	.byNight .tblRanklist th,
	.byNight .tblThisGame th {
		background-color: #202020;			/* even more extremely dark gray */
	}

	/* suppress some columns in the ranking-list */
	.tblRanklist .noNarrow,
	.tblThisGame .noNarrow {
		visibility: collapse;
		max-width: 0;
		margin: 0;
		padding: 0;
		border: none;
		border-collapse: collapse;
	}
	/* keep alignment in the ranking-list */
	.tblRanklist .center,
	.tblThisGame .center {
		text-align: center;
	}
	.tblRanklist .right,
	.tblThisGame .right {
		padding-right: 0.4rem;
		text-align: right;
	}
	/* keep icon-cells as they are */
/* most probaly dead code */
/*    .tblRanklist th.td_icon:after,
    .tblRanklist td.td_icon:after,
    .tblThisGame th.td_icon:after,
    .tblThisGame td.td_icon:after {
        margin-left: 0rem;
    }*/
} /* end of NARROW */

/* ----------------
   hack for Firefox 
   ---------------- */
@media screen and (-moz-images-in-menus:0) {
	td,
	th {
		background-clip: padding-box;
	}
}