/* ============================================================================== 
   File: scr_overlay.css
	- Stylesheet for TipTool OVERLAYS
	- Author: Daniel Hugentobler (DH)
	- created: 19.DEC.2018, taken from scr_generic.css
	- amended: 17.JAN.2021, DH: new media-width-breakpoints for: narrow/medium/wide
   ============================================================================== */

/* generic */
.overlay_hide {
	position: fixed;
	top: 6.4rem;
	left:  -50rem;		/* hide it: to the far left */
}
.overlay_show {
	position: fixed;
	top: 6.4rem;
	left: 3.6rem;
}

/* --------------- */
/* COOKIES-overlay */
/* --------------- */
.cookies {
	z-index: 16;
	margin-left: 1.2rem;
	margin-right: 1.2rem;
	border: 0;
	border-radius: 1rem;
	padding: 1rem;
	max-width: 10rem;
	background-color: lemonchiffon;
	color: black;
	-webkit-box-shadow: 0.2rem 0.2rem 0.4rem grey;
	-moz-box-shadow: 0.2rem 0.2rem 0.4rem grey;
	box-shadow: 0.4rem 0.4rem 0.6rem grey;	/* a bit larger for MS IEx */
}
.byNight .cookies {
	background-color: #202020;				/* extremely dark gray */
	color: lightgray;
	-webkit-box-shadow: 0 0 1rem gray;		/* gray glow */
	-moz-box-shadow: 0 0 1rem gray;
	box-shadow: 0 0 1rem gray;
}
.cookies_show {
	position: fixed;
/*	top: 8rem;*/
	bottom: 5rem;
	left: 0;
	max-width: 100%;
}
.byNight .cookies a:focus,
.byNight .cookies a:hover {
	color: black;
	background-color: lime;
}
.byNight .cookies a:active {
	color: lime;
	background-color: black;
}
/* override cookies top => bottom due to DAG special case */
#cookies {
	bottom: 5rem;
	top: auto;
}

/* ------------ */
/* HELP-overlay */
/* ------------ */
.toc,
.help {
	padding: 0.5rem;
	padding-top: 0.8rem;
	min-width: 15rem;
	max-width: 32rem;
	border-width: 0.4rem;
	border-style: ridge;
	z-index: 15;
	border-radius: 1.2rem;
}
.help {
	background-color: darkolivegreen;
	color: white;
	background-image: url('../lawn/LawnByNightHigh.jpg');
	background-repeat: no-repeat;
	background-size: cover;
}
.linkHelp {
	border-radius: 1rem;
	display: inline-block;		/* allow sizing */
	min-width: 2rem;
	max-width: 2rem;
	min-height: 2rem;
	max-height: 2rem;
	padding-top: 0.2rem;		/* move the content down a bit */
	text-align: center;
	vertical-align: bottom;
	vertical-align: top;		/* keep it aligned for textareas or line-broken labels! */
	/* Gradients etc: done by .btn */
}
span.linkHelp {
	font-weight: bold;			/* override earlier btn */
	color: #8B0000;				/* dark red */
}

/* ------------------------- */
/* TABLE-OF-CONTENTS overlay */
/* ------------------------- */
.toc {
	background-color: white;
	background-image: none;
	border-color: lightgray;
	color: black;
	padding-left: 1rem;
	position: absolute;			/* toc must be scrollable => not fixed! */
}
.toc ul li {
	list-style: none;
}
.toc h2 {
	border-bottom: 0.2rem solid olivedrab;
	color: olivedrab;
}

/*  -------  */
/*  SHADOWS  */
/*  -------  */
.toc,
.help,
.calendar {
	/* a darker than regular shadow */
	-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 */
}
.byNight .toc,
.byNight .help,
.byNight .calendar {
	background-color: black;
	background-image: url('../lawn/LawnByNightHigh.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	color: lightgray;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.byNight .toc {
	background-image: url('../lawn/Weserstadion_NachtHigh.jpg');
}

/* headings */
.help h2,
.help h3,
.help p {
	margin-left: 0.8rem;
	margin-right: 0.8rem;
}
.help h2,
.byNight .toc h2, 
.byNight .help h2 {
	background-color: transparent;
	color: lime;							/* for day and night */
	border-bottom: 0.2rem solid lime;
}
.help h3 {
	color: lime;
	margin-left: -0.2rem; /* correct weird offset - padding 0 didn't help */
	margin-right: -0.2rem;
}
/* buttons */
.toc .btn,
.help .btn {
	font-weight: bold;
	margin-top: 0.4rem;
	margin-bottom: 0.4rem;
}
.help .btn {
	/* darker shadow */
	-webkit-box-shadow: 0.2rem 0.2rem 0.4rem #404040;	/* very dark gray */
	-moz-box-shadow: 0.2rem 0.2rem 0.4rem #404040;
	box-shadow: 0.4rem 0.4rem 0.6rem #404040;			/* a bit larger for MS IEx */
}

/* ---------------- */
/* CALENDAR-overlay */
/* ---------------- */
.calendar {
	font-family: Arial, sans-serif inherit;
	padding: 1.2rem;
	border-width: 0.4rem;
	border-style: ridge;
	border-radius: 1.2rem;
	z-index: 15;
	background-color: darkolivegreen;
	background-image: url('../lawn/LawnByNightHigh.jpg');
	background-repeat: no-repeat;
	background-size: cover;
}
.byNight .calendar {
	color: lightgray;
}
#tblCalendar {
	border-collapse: collapse;
	empty-cells: show;
}
.calendar_head {
	font-weight: bold;
}
#calendar_title {
	max-width: 7.5rem;
}

#tblCalendar td,
#tblCalendar th {
	border: none;
}
#tblCalendar td {
	text-align: center;
	background-color: white;
	border: 0.2rem solid white;
	color: black;
}
.byNight #tblCalendar td {
	background-color: #202020;				/* even more extremely dark gray */			
	border: 0.2rem solid #202020;
	color: lightgray;
}

#tblCalendar th {
	background-color: #D8EBAD;				/* light olive */
	border: 0.2rem solid #D8EBAD;
	color: black;
}
.byNight #tblCalendar th {
	background-color: black;
	border: 0.2rem solid black;
	color: lightgray;
}
#tblCalendar #calendar_title {
	color: #495828;							/* very dark olive for writing only */
}
.byNight #tblCalendar #calendar_title {
	color: lime;
}

#tblCalendar input {
	height: 1.6rem;
	border-radius: 0.8rem;
	font-size: 1rem;
}
.byNight #tblCalendar input[type=text] {
	background-color: #202020;				/* even more extremely dark gray */
}
.byNight #tblCalendar input[type=text]:focus {
	background-color: #D8EBAD;				/* light olive for day and night*/
	color: black;
}
/* square-cells */
#tblCalendar .calendar_day,
#tblCalendar .calendar_entry {
	min-width: 2.5rem;
	max-width: 2.5rem;
	min-height: 2.5rem;
	max-height: 2.5rem;
	background-color: white;
	border: 0.2rem solid #D8EBAD;			/* light olive */
}
.byNight #tblCalendar .calendar_day,
.byNight #tblCalendar .calendar_entry {
	background-color: #202020;				/* even more extremely dark gray */
	border: 0.2rem solid black;
}
#tblCalendar .calendar_day {
	padding: 0;
	text-align: center;
	font-weight: bold;
	background-color: #D8EBAD;				/* light olive */
}
.byNight #tblCalendar .calendar_day {
	background-color: black;
}
#tblCalendar .selected {
	font-weight: bold;
	background-color: #D8EBAD;				/* light olive */
}

#tblCalendar .calTimeLbl {
	text-align: right;
	padding-right: 0;
}
#tblCalendar .calHour,
#tblCalendar .calMin,
#tblCalendar .calSec {
	text-align: left;
	padding-left: 0;
}

#tblCalendar tr.calendar_title .calBtn,
#tblCalendar tr.calendar_head .calBtn,
#tblCalendar tr.calendar_time .calBtn,
#tblCalendar tr.calendar_foot .calBtn {
	font-weight: bold;
	cursor: pointer;						/* render cursor like a link */
}
#tblCalendar .calendarInput {
	font-weight: normal;
	white-space: nowrap;					/* prevent the wrapping of the box */
	margin: 0;
	height: 2rem;
	text-align: center;
	max-width: 3.2rem;
	min-width: 3.2rem;
	border: 0.2rem inset gray;				/* override */
	border-radius: 1.2rem;
	margin-top: 0.2rem;
	background-color: white;
	color: black;
}
.byNight #tblCalendar .calendarInput {
	background-color: darkgray;
	color: lightgray;
}
#tblCalendar input.focused {				/* input:focus did'n do the job*/
	border: 1px solid black;				/* make some room */
}
#tblCalendar .calendar_entry {
	cursor: pointer;						/* hand */
}
/* highlight the weekend */
#tblCalendar .weekend {
	color: red;
}
.byNight #tblCalendar .weekend {
	color: #FFFF57;							/* light yellow;*/
}
/* black background is not sufficient */
.byNight #tblCalendar .selected {
	background-color: black;
	color: red;
}

tr.calendar_foot #cmdCalendarOK {
	color: #8B0000;							/* call to action: dark red */
}
.byNight tr.calendar_foot #cmdCalendarOK {
	color: red;								/* call to action: red */
}
/* onMouseOver */
#tblCalendar tr.calendar_title .calHover,
#tblCalendar tr.calendar_head .calHover,
#tblCalendar tr.calendar_time .calHover,
#tblCalendar tr.calendar_foot .calHover {
	color: red;
}
.byNight #tblCalendar tr.calendar_foot .calHover {
	color: #FFFF57;							/* light yellow;*/
}

/* ------------------------- */
/* NARROW / MEDIUM viewports */
/* ------------------------- */
@media (max-width: 60rem) { /* formerly 40rem */
	/* enlarge datepicker-tds */
	#tblCalendar .calendar_day {
		height: 2rem;
	}
	#tblCalendar .calendar_entry {
		height: 2.4rem;		/* almost a square */
	}
	.toc ul li {
		line-height: 2rem;		/* fingertip friendly */
	}
}