/* 
calendar cells are fixed to 16x16px plus 1px padding with background color
and plus 1px collapsed margin. margin is instead of a border.
content is either a 16x16px image or a 14px character.
*/

#Main>article>section.Calendar
{
	flex: 0 0 auto;  /* takes the table width */
}

#CalRecords /* the rendered div within calendar section for records */
{
	width: 100%;
	height: 100%;
}

.Calendar table
{
	display: flex;
	height: 100%;
	flex-direction: column;
	text-wrap: nowrap;
	font-size: 14px;
}

.Calendar thead
{
	flex: 0 0 auto;
	display: block;
}

.Calendar tbody
{
	flex: 1 1 auto;
	display: block;
	overflow-x: hidden;
	overflow-y: scroll;
}

/* ---------------------------------------------------------------------- */

.Calendar tr /* all rows */
{
	display: block;
	height: 18px;
	margin: 1px 0;
}

/* ---------------------------------------------------------------------- */

.Calendar td, /* all cells */
.Calendar th
{
	display: inline-block;
	height: 100%;
	vertical-align: top; /* otherwise cells are not exactly aligned to the row */
	margin-left: 1px; /* margins of inline block do not collapse! */
}

.Calendar td /* day and tour cells */
{
	width: 18px;
	text-align: center;
	padding: 1px;
}

.Calendar th /* month cells */
{
	width: 4em;
	text-align: right;
	padding: 1px 0.5em;
}

.Calendar thead td, /* day and month cells */
.Calendar th
{
	font-weight: bold;
	background-color: white;
}

.Calendar tbody tr /* row with tour cells */
{
	--cell_color: var(--submenu_background); /* can be overriden by html table generation */
}

.Calendar tbody td /* tour cells */
{
	background-color: var(--cell_color);
	position: relative; /* to be the reference for .Info windows */
}

.Calendar td.Dummy /* space fill-up cells */
{
	background-color: unset;
}

/* ---------------------------------------------------------------------- */

.Calendar .Highlight
{
	background-color: var(--nav_background);
	color: white;
}

/* ---------------------------------------------------------------------- */
/* border of this element is on top of the cells margin */

.Calendar tbody td>div.Label
{
	position: absolute;
	top: -1px; left: -1px;
	width: calc(100% + 2px); height: calc(100% + 2px);
	border: solid 1px grey;
}

/* ---------------------------------------------------------------------- */

.Calendar tbody td:hover .Info
{
	visibility: visible;
	transition-delay: 1.0s;
}

.Calendar .Info
{
	visibility: hidden;
	position: fixed; /* positioned dynamically by JS */
  background-color: white;
	font-weight: normal;
	text-align: left;
	color: black;
	border: solid 1px gray;
  border-radius: 3px;
	padding: 2px 0.5em;
	z-index: 1;
}

/* ---------------------------------------------------------------------- */