[lantea.git] / style / lantea.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

body {
  font-family: sans-serif;
  margin: 0;
  background: url("loading.png") repeat;
}

h1 {
  display: none;
}

.hidden {
  display: none;
}

.debugHide {
  display: none;
}

/* Main window UI areas */
#map, #track {
  position: fixed;
  border: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#map {
  z-index: 1;
}

#track {
  z-index: 3;
}

.autoFade {
  position: absolute;
  z-index: 5;
  transition-property: opacity;
  transition-duration: .2s;
}

.autoFade.hidden {
  opacity: 0;
  transition-duration: 1s;
  display: block;
}

#menuArea {
  /* width: 30em; */
  left: 1%;
  top: 1em;
}

#zoomArea {
  right: 1%;
  top: 1em;
  text-align: center;
}

.autoFade > input[type="button"],
.autoFade > .controlButton {
  font-size: 1.2em;
  font-weight: bold;
  width: 2em;
  height: 2em;
  border-radius: 2em;
  background-color: rgba(255, 255, 255, .25);
  background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
  color: #0000FF;
  border: none;
  padding: 0;
  margin: 0;
}

#zoomArea > input[type="button"] {
  border: 2px solid #0000FF;
}

.autoFade > input[type="button"]:hover,
.autoFade > .controlButton:hover {
  background-color: rgba(255, 255, 255, .8);
}

.autoFade > input[type="button"]:active,
.autoFade > .controlButton:active {
  background-color: rgba(255, 255, 127, .8);
}

.autoFade > input[type="button"]:focus,
.autoFade > .controlButton:focus {
  background-color: rgba(255, 255, 255, .5);
}

#fullscreenArea {
  right: 1%;
  bottom: 2em;
  text-align: center;
}

#zoomLevel {
  /* background-color: rgba(255, 255, 255, .8); */
  background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
  border-radius: .5em;
  padding: .5em .2em;
  margin: 2px 0;
}

#action {
  position: absolute;
  bottom: 5px;
  left: .5em;
  margin: 0;
  z-index: 3;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 3px;
  padding: 0 3px;
}

#actionimg {
  vertical-align: text-bottom;
}

#copyright {
  bottom: 5px;
  right: .5em;
  margin: 0;
  font-size: .8em;
  opacity: .66;
  z-index: 2;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 3px;
  padding: 0 3px;
}

#copyright.hidden {
  opacity: 0;
  display: block;
}

/* non-standard touch screen detection for Mozilla browsers */
.overlayArea:-moz-system-metric(touch-enabled),
.menuDrawer:-moz-system-metric(touch-enabled) {
  font-size: 3mm;
  font-size: 3mozmm;
}
/* Standard, Media Queries Level 4 touch screen detection */
@media (pointer:coarse) {
  .overlayArea,
  .menuDrawer {
    font-size: 16px;
  }
}

.overlayArea input[type="button"],
.overlayArea button,
.overlayArea select,
.menuDrawer input[type="button"],
.menuDrawer button,
.menuDrawer input[type="text"],
.menuDrawer input[type="number"],
.menuDrawer select {
  font-size: inherit;
}

/* Menu Drawers */
.menuDrawer {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: auto;
  transform: translateX(calc(-40ch - 1ch)); /* account for padding */
  width: 40ch;
  max-width: 95%; /* make sure we don't overflow the screen */
  border: 0;
  padding: 0 .5ch; /* account for legend */
  margin: 0;
  z-index: 10;
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: ease;
}

.menuDrawer:not(.hidden) {
  transform: translateX(0);
}

@media screen and (max-width: 330px) {
  .menuDrawer {
    transform: translateX(calc(-300px - 1ch)); /* account for padding */
    width: 300px;
  }
}

.menuDrawer p {
  margin: .5em 0;
}

/* Menu title */
.menuDrawer > h2 {
  font-size: 1.2em;
  font-weight: bold;
  margin: .5em 0;
  background-color: #CCCCCC;
  color: #404040;
  border-radius: 3px;
  padding: 2px;
}

.menuDrawer > h2 > img {
  vertical-align: text-top;
  height: 1.2em;
}

/* For optical conveniece, display an "x" for closing. */
.menuDrawer > h2:after {
  content: '\00D7'; /* multiplication sign */
  display: inline-block;
  vertical-align: text-top;
  float: right;
  margin-top: 0;
  margin-right: .2em;
  font-size: .75em;
}

.dialogHelp {
  margin: .5em 0;
  font-size: .8em;
  opacity: .66;
}

#trackData {
  margin: 0;
}

#trackDialogArea {
  border-top: 2px solid;
  border-bottom: 2px solid;
  padding: 3px 0;
}

#uploadDesc {
  max-width: 95%;
}

/* Secondary UI: menu drawers, full screen overlays, etc. */
.secondaryUI {
  background-color: rgba(15, 15, 15, .9);
  color: #CCCCCC;
}

/* Custom checkbox design */
.secondaryUI input[type="checkbox"] {
  display: none;
}

.secondaryUI input[type="checkbox"] + label:before {
  content: '\00A0'; /* non-breaking space */
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: .3em;
  text-align: center;
  vertical-align: middle;
  background-color: rgba(204, 204, 204, .2);
  border: 1px solid #CCCCCC;
  border-radius: 3px;
}

.secondaryUI input[type="checkbox"]:hover + label:before {
  background-color: rgba(204, 204, 204, .4);
  border: 1px solid #FFFFFF;
}
.secondaryUI input[type="checkbox"]:hover + label {
  color: #FFFFFF;
  position:relative;
  height: 1.2em;
}

.secondaryUI input[type="checkbox"]:active + label:before {
  background-color: rgba(204, 204, 255, .3);
  border: 1px solid #FFCCAA;
}
.secondaryUI input[type="checkbox"]:active + label {
  color: #FFCCAA;
}

.secondaryUI input[type="checkbox"]:checked + label:before {
  content: '\2714'; /* tick mark */
}

/* Custom button design */
.secondaryUI input[type="button"],
.secondaryUI button {
  text-align: center;
  vertical-align: middle;
  background-image: none;
  background-color: rgba(204, 204, 204, .2);
  color: #CCCCCC;
  padding: 1px .5em;
  border: 1px solid #CCCCCC;
  border-radius: 3px;
}

.secondaryUI input[type="button"]:disabled,
.secondaryUI button:disabled {
  background-color: rgba(204, 204, 204, .1);
  color: rgba(204, 204, 204, .5);
  border: 1px solid rgba(255, 255, 255, .5);
}

.secondaryUI input[type="button"]:not(:disabled):hover,
.secondaryUI button:not(:disabled):hover {
  background-color: rgba(204, 204, 204, .4);
  border: 1px solid #FFFFFF;
}

.secondaryUI input[type="button"]:not(:disabled):active,
.secondaryUI button:not(:disabled):active {
  background-color: rgba(204, 204, 255, .3);
  color: #FFCCAA;
  padding-top: 2px;
  padding-right: calc(.5em - 1px);
  padding-bottom: 0;
  padding-left: calc(.5em + 1px);
}

/* Custom select design */
.secondaryUI select {
  text-align: left;
  vertical-align: middle;
  background-image: none;
  background-color: rgba(204, 204, 204, .2);
  color: #CCCCCC;
  padding: 0 .5em;
  border: 1px solid #CCCCCC;
  border-radius: 3px;
}

.secondaryUI select:hover {
  background-color: rgba(204, 204, 204, .4);
  border: 1px solid #FFFFFF;
}

.secondaryUI select:active {
  background-color: rgba(204, 204, 255, .3);
  color: #FFCCAA;
}

.secondaryUI option:checked:not(:hover) {
  background-color: rgba(204, 204, 204, .1);
}

.secondaryUI option:hover {
  background-color: #CCCCCC;
  color: #404040;
}

/* Custom textbox design */
.secondaryUI input[type="text"],
.secondaryUI input[type="number"] {
  font-size: 1em;
  vertical-align: middle;
  background-image: none;
  background-color: rgba(204, 204, 204, .7);
  color: #404040;
  padding: 1px .5em;
  border: 1px solid #CCCCCC;
  border-radius: 3px;
}

.secondaryUI input[type="text"] {
  text-align: left;
}

.secondaryUI input[type="number"] {
  text-align: right;
}

.secondaryUI input[type="text"]:disabled,
.secondaryUI input[type="number"]:disabled {
  background-color: rgba(204, 204, 204, .1);
  color: rgba(204, 204, 204, .5);
  border: 1px solid rgba(255, 255, 255, .5);
}

.secondaryUI input[type="text"]:not(:disabled):hover,
.secondaryUI input[type="number"]:not(:disabled):hover {
  border: 1px solid #FFFFFF;
}

.secondaryUI input[type="text"]:not(:disabled):focus,
.secondaryUI input[type="number"]:not(:disabled):focus {
  background-color: rgba(204, 204, 255, .8);
  border: 1px solid #FFFFFF;
  color: #202020;
}

/* custom style for paragraphs and links */
.secondaryUI p.subTitle {
  margin: .75em 0 .5em;
  font-weight: bold;
}

.secondaryUI a:link {
  color: #DDDDDD;
}

.secondaryUI a:visited {
  color: #AAAAAA;
}

.secondaryUI a:hover {
  color: #FFFFFF;
}

.overlayArea .minorbutton {
  font-size: 75%;
  border: none !important;
  padding: 0 2px;
}
.overlayArea .minorbutton:not(:disabled):active {
  padding: 0 1px 0 3px;
}
.overlayArea .statusmsg {
  font-size: 75%;
}
.overlayArea .statusmsg.error {
  color: #FF8080;
}

#loginerror {
  color: red;
  font-weight: bold;
  padding: .5em;
}

/* dialog area - for loading error and welcome messages */
#dialogArea {
  position: absolute;
  top: 20%;
  right: 0;
  left: 0;
  width: 50ch;
  max-width: 92%;
  z-index: 10;
  background-color: rgba(255, 255, 255, .8);
  border: 0;
  margin: auto;
  padding: .5em;
  border-radius: 5px;
}

#dialogArea.hidden {
  top: -1000%;
  display: block;
}

.dialogTitle {
  margin: 0 0 .5em;
  font-weight: bold;
}

.dialogButtonLine {
  text-align: center;
}

/* full screen overlay - library, etc. */
.fullScreenOverlay {
  position: absolute;
  top: 1%;
  bottom: 1%;
  right: 1%;
  left: 1%;
  z-index: 10;
  background-color: rgba(15, 15, 15, 1.0);
  border: 0;
  margin: auto;
  padding: .5em;
  border-radius: 5px;
}

.fullScreenOverlay.hidden {
  top: -1000%;
  bottom: auto;
  height: 90%;
  display: block;
}

.fullScreenOverlay > .closeButtonContainer {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0.5em;
  text-align: right;
}
/*
.fullScreenOverlay > .closeButtonContainer > .closeButton {
  font-size: 2em;
}
*/

.fullScreenOverlay p {
  margin: 0.5em 0;
}

.fullScreenOverlay > p:first-child {
  margin-top: 0;
  /* leave space for close button */
  margin-right: 1.5em;
}

#libTrackList {
  overflow: auto;
  /* 2em is top/bottom margin, and one line is shown above and below, with .5em margin each */
  height: calc(100% - 5em);
}

#libTrackPages {
  margin-bottom: 0;
}

/* small screen media adaptations */
@media screen and (max-width: 500px),
       screen and (max-height: 500px) {
  body {
    font-size: 10px;
  }
  #menuArea {
    top: 2px;
    left: 2px;
  }
  #zoomArea {
    top: 2px;
    right: 2px;
  }
  #fullscreenArea {
    right: 2px;
    bottom: 20px;
  }
  #copyright {
    bottom: 1px;
    right: 1px;
  }
}
Commit	Line	Data
	1	/* This Source Code Form is subject to the terms of the Mozilla Public
	2	* License, v. 2.0. If a copy of the MPL was not distributed with this file,
	3	* You can obtain one at http://mozilla.org/MPL/2.0/. */
	4
	5	body {
	6	font-family: sans-serif;
	7	margin: 0;
	8	background: url("loading.png") repeat;
	9	}
	10
	11	h1 {
	12	display: none;
	13	}
	14
	15	.hidden {
	16	display: none;
	17	}
	18
	19	.debugHide {
	20	display: none;
	21	}
	22
	23	/* Main window UI areas */
	24	#map, #track {
	25	position: fixed;
	26	border: 0;
	27	top: 0;
	28	left: 0;
	29	right: 0;
	30	bottom: 0;
	31	}
	32
	33	#map {
	34	z-index: 1;
	35	}
	36
	37	#track {
	38	z-index: 3;
	39	}
	40
	41	.autoFade {
	42	position: absolute;
	43	z-index: 5;
	44	transition-property: opacity;
	45	transition-duration: .2s;
	46	}
	47
	48	.autoFade.hidden {
	49	opacity: 0;
	50	transition-duration: 1s;
	51	display: block;
	52	}
	53
	54	#menuArea {
	55	/* width: 30em; */
	56	left: 1%;
	57	top: 1em;
	58	}
	59
	60	#zoomArea {
	61	right: 1%;
	62	top: 1em;
	63	text-align: center;
	64	}
	65
	66	.autoFade > input[type="button"],
	67	.autoFade > .controlButton {
	68	font-size: 1.2em;
	69	font-weight: bold;
	70	width: 2em;
	71	height: 2em;
	72	border-radius: 2em;
	73	background-color: rgba(255, 255, 255, .25);
	74	background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
	75	color: #0000FF;
	76	border: none;
	77	padding: 0;
	78	margin: 0;
	79	}
	80
	81	#zoomArea > input[type="button"] {
	82	border: 2px solid #0000FF;
	83	}
	84
	85	.autoFade > input[type="button"]:hover,
	86	.autoFade > .controlButton:hover {
	87	background-color: rgba(255, 255, 255, .8);
	88	}
	89
	90	.autoFade > input[type="button"]:active,
	91	.autoFade > .controlButton:active {
	92	background-color: rgba(255, 255, 127, .8);
	93	}
	94
	95	.autoFade > input[type="button"]:focus,
	96	.autoFade > .controlButton:focus {
	97	background-color: rgba(255, 255, 255, .5);
	98	}
	99
	100	#fullscreenArea {
	101	right: 1%;
	102	bottom: 2em;
	103	text-align: center;
	104	}
	105
	106	#zoomLevel {
	107	/* background-color: rgba(255, 255, 255, .8); */
	108	background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
	109	border-radius: .5em;
	110	padding: .5em .2em;
	111	margin: 2px 0;
	112	}
	113
	114	#action {
	115	position: absolute;
	116	bottom: 5px;
	117	left: .5em;
	118	margin: 0;
	119	z-index: 3;
	120	background-color: rgba(255, 255, 255, .8);
	121	border-radius: 3px;
	122	padding: 0 3px;
	123	}
	124
	125	#actionimg {
	126	vertical-align: text-bottom;
	127	}
	128
	129	#copyright {
	130	bottom: 5px;
	131	right: .5em;
	132	margin: 0;
	133	font-size: .8em;
	134	opacity: .66;
	135	z-index: 2;
	136	background-color: rgba(255, 255, 255, 1);
	137	border-radius: 3px;
	138	padding: 0 3px;
	139	}
	140
	141	#copyright.hidden {
	142	opacity: 0;
	143	display: block;
	144	}
	145
	146	/* non-standard touch screen detection for Mozilla browsers */
	147	.overlayArea:-moz-system-metric(touch-enabled),
	148	.menuDrawer:-moz-system-metric(touch-enabled) {
	149	font-size: 3mm;
	150	font-size: 3mozmm;
	151	}
	152	/* Standard, Media Queries Level 4 touch screen detection */
	153	@media (pointer:coarse) {
	154	.overlayArea,
	155	.menuDrawer {
	156	font-size: 16px;
	157	}
	158	}
	159
	160	.overlayArea input[type="button"],
	161	.overlayArea button,
	162	.overlayArea select,
	163	.menuDrawer input[type="button"],
	164	.menuDrawer button,
	165	.menuDrawer input[type="text"],
	166	.menuDrawer input[type="number"],
	167	.menuDrawer select {
	168	font-size: inherit;
	169	}
	170
	171	/* Menu Drawers */
	172	.menuDrawer {
	173	position: absolute;
	174	top: 0;
	175	bottom: 0;
	176	overflow: auto;
	177	transform: translateX(calc(-40ch - 1ch)); /* account for padding */
	178	width: 40ch;
	179	max-width: 95%; /* make sure we don't overflow the screen */
	180	border: 0;
	181	padding: 0 .5ch; /* account for legend */
	182	margin: 0;
	183	z-index: 10;
	184	transition-property: transform;
	185	transition-duration: 1s;
	186	transition-timing-function: ease;
	187	}
	188
	189	.menuDrawer:not(.hidden) {
	190	transform: translateX(0);
	191	}
	192
	193	@media screen and (max-width: 330px) {
	194	.menuDrawer {
	195	transform: translateX(calc(-300px - 1ch)); /* account for padding */
	196	width: 300px;
	197	}
	198	}
	199
	200	.menuDrawer p {
	201	margin: .5em 0;
	202	}
	203
	204	/* Menu title */
	205	.menuDrawer > h2 {
	206	font-size: 1.2em;
	207	font-weight: bold;
	208	margin: .5em 0;
	209	background-color: #CCCCCC;
	210	color: #404040;
	211	border-radius: 3px;
	212	padding: 2px;
	213	}
	214
	215	.menuDrawer > h2 > img {
	216	vertical-align: text-top;
	217	height: 1.2em;
	218	}
	219
	220	/* For optical conveniece, display an "x" for closing. */
	221	.menuDrawer > h2:after {
	222	content: '\00D7'; /* multiplication sign */
	223	display: inline-block;
	224	vertical-align: text-top;
	225	float: right;
	226	margin-top: 0;
	227	margin-right: .2em;
	228	font-size: .75em;
	229	}
	230
	231	.dialogHelp {
	232	margin: .5em 0;
	233	font-size: .8em;
	234	opacity: .66;
	235	}
	236
	237	#trackData {
	238	margin: 0;
	239	}
	240
	241	#trackDialogArea {
	242	border-top: 2px solid;
	243	border-bottom: 2px solid;
	244	padding: 3px 0;
	245	}
	246
	247	#uploadDesc {
	248	max-width: 95%;
	249	}
	250
	251	/* Secondary UI: menu drawers, full screen overlays, etc. */
	252	.secondaryUI {
	253	background-color: rgba(15, 15, 15, .9);
	254	color: #CCCCCC;
	255	}
	256
	257	/* Custom checkbox design */
	258	.secondaryUI input[type="checkbox"] {
	259	display: none;
	260	}
	261
	262	.secondaryUI input[type="checkbox"] + label:before {
	263	content: '\00A0'; /* non-breaking space */
	264	display: inline-block;
	265	width: 1.2em;
	266	height: 1.2em;
	267	margin-right: .3em;
	268	text-align: center;
	269	vertical-align: middle;
	270	background-color: rgba(204, 204, 204, .2);
	271	border: 1px solid #CCCCCC;
	272	border-radius: 3px;
	273	}
	274
	275	.secondaryUI input[type="checkbox"]:hover + label:before {
	276	background-color: rgba(204, 204, 204, .4);
	277	border: 1px solid #FFFFFF;
	278	}
	279	.secondaryUI input[type="checkbox"]:hover + label {
	280	color: #FFFFFF;
	281	position:relative;
	282	height: 1.2em;
	283	}
	284
	285	.secondaryUI input[type="checkbox"]:active + label:before {
	286	background-color: rgba(204, 204, 255, .3);
	287	border: 1px solid #FFCCAA;
	288	}
	289	.secondaryUI input[type="checkbox"]:active + label {
	290	color: #FFCCAA;
	291	}
	292
	293	.secondaryUI input[type="checkbox"]:checked + label:before {
	294	content: '\2714'; /* tick mark */
	295	}
	296
	297	/* Custom button design */
	298	.secondaryUI input[type="button"],
	299	.secondaryUI button {
	300	text-align: center;
	301	vertical-align: middle;
	302	background-image: none;
	303	background-color: rgba(204, 204, 204, .2);
	304	color: #CCCCCC;
	305	padding: 1px .5em;
	306	border: 1px solid #CCCCCC;
	307	border-radius: 3px;
	308	}
	309
	310	.secondaryUI input[type="button"]:disabled,
	311	.secondaryUI button:disabled {
	312	background-color: rgba(204, 204, 204, .1);
	313	color: rgba(204, 204, 204, .5);
	314	border: 1px solid rgba(255, 255, 255, .5);
	315	}
	316
	317	.secondaryUI input[type="button"]:not(:disabled):hover,
	318	.secondaryUI button:not(:disabled):hover {
	319	background-color: rgba(204, 204, 204, .4);
	320	border: 1px solid #FFFFFF;
	321	}
	322
	323	.secondaryUI input[type="button"]:not(:disabled):active,
	324	.secondaryUI button:not(:disabled):active {
	325	background-color: rgba(204, 204, 255, .3);
	326	color: #FFCCAA;
	327	padding-top: 2px;
	328	padding-right: calc(.5em - 1px);
	329	padding-bottom: 0;
	330	padding-left: calc(.5em + 1px);
	331	}
	332
	333	/* Custom select design */
	334	.secondaryUI select {
	335	text-align: left;
	336	vertical-align: middle;
	337	background-image: none;
	338	background-color: rgba(204, 204, 204, .2);
	339	color: #CCCCCC;
	340	padding: 0 .5em;
	341	border: 1px solid #CCCCCC;
	342	border-radius: 3px;
	343	}
	344
	345	.secondaryUI select:hover {
	346	background-color: rgba(204, 204, 204, .4);
	347	border: 1px solid #FFFFFF;
	348	}
	349
	350	.secondaryUI select:active {
	351	background-color: rgba(204, 204, 255, .3);
	352	color: #FFCCAA;
	353	}
	354
	355	.secondaryUI option:checked:not(:hover) {
	356	background-color: rgba(204, 204, 204, .1);
	357	}
	358
	359	.secondaryUI option:hover {
	360	background-color: #CCCCCC;
	361	color: #404040;
	362	}
	363
	364	/* Custom textbox design */
	365	.secondaryUI input[type="text"],
	366	.secondaryUI input[type="number"] {
	367	font-size: 1em;
	368	vertical-align: middle;
	369	background-image: none;
	370	background-color: rgba(204, 204, 204, .7);
	371	color: #404040;
	372	padding: 1px .5em;
	373	border: 1px solid #CCCCCC;
	374	border-radius: 3px;
	375	}
	376
	377	.secondaryUI input[type="text"] {
	378	text-align: left;
	379	}
	380
	381	.secondaryUI input[type="number"] {
	382	text-align: right;
	383	}
	384
	385	.secondaryUI input[type="text"]:disabled,
	386	.secondaryUI input[type="number"]:disabled {
	387	background-color: rgba(204, 204, 204, .1);
	388	color: rgba(204, 204, 204, .5);
	389	border: 1px solid rgba(255, 255, 255, .5);
	390	}
	391
	392	.secondaryUI input[type="text"]:not(:disabled):hover,
	393	.secondaryUI input[type="number"]:not(:disabled):hover {
	394	border: 1px solid #FFFFFF;
	395	}
	396
	397	.secondaryUI input[type="text"]:not(:disabled):focus,
	398	.secondaryUI input[type="number"]:not(:disabled):focus {
	399	background-color: rgba(204, 204, 255, .8);
	400	border: 1px solid #FFFFFF;
	401	color: #202020;
	402	}
	403
	404	/* custom style for paragraphs and links */
	405	.secondaryUI p.subTitle {
	406	margin: .75em 0 .5em;
	407	font-weight: bold;
	408	}
	409
	410	.secondaryUI a:link {
	411	color: #DDDDDD;
	412	}
	413
	414	.secondaryUI a:visited {
	415	color: #AAAAAA;
	416	}
	417
	418	.secondaryUI a:hover {
	419	color: #FFFFFF;
	420	}
	421
	422	.overlayArea .minorbutton {
	423	font-size: 75%;
	424	border: none !important;
	425	padding: 0 2px;
	426	}
	427	.overlayArea .minorbutton:not(:disabled):active {
	428	padding: 0 1px 0 3px;
	429	}
	430	.overlayArea .statusmsg {
	431	font-size: 75%;
	432	}
	433	.overlayArea .statusmsg.error {
	434	color: #FF8080;
	435	}
	436
	437	#loginerror {
	438	color: red;
	439	font-weight: bold;
	440	padding: .5em;
	441	}
	442
	443	/* dialog area - for loading error and welcome messages */
	444	#dialogArea {
	445	position: absolute;
	446	top: 20%;
	447	right: 0;
	448	left: 0;
	449	width: 50ch;
	450	max-width: 92%;
	451	z-index: 10;
	452	background-color: rgba(255, 255, 255, .8);
	453	border: 0;
	454	margin: auto;
	455	padding: .5em;
	456	border-radius: 5px;
	457	}
	458
	459	#dialogArea.hidden {
	460	top: -1000%;
	461	display: block;
	462	}
	463
	464	.dialogTitle {
	465	margin: 0 0 .5em;
	466	font-weight: bold;
	467	}
	468
	469	.dialogButtonLine {
	470	text-align: center;
	471	}
	472
	473	/* full screen overlay - library, etc. */
	474	.fullScreenOverlay {
	475	position: absolute;
	476	top: 1%;
	477	bottom: 1%;
	478	right: 1%;
	479	left: 1%;
	480	z-index: 10;
	481	background-color: rgba(15, 15, 15, 1.0);
	482	border: 0;
	483	margin: auto;
	484	padding: .5em;
	485	border-radius: 5px;
	486	}
	487
	488	.fullScreenOverlay.hidden {
	489	top: -1000%;
	490	bottom: auto;
	491	height: 90%;
	492	display: block;
	493	}
	494
	495	.fullScreenOverlay > .closeButtonContainer {
	496	position: absolute;
	497	top: 0;
	498	right: 0;
	499	margin: 0;
	500	padding: 0.5em;
	501	text-align: right;
	502	}
	503	/*
	504	.fullScreenOverlay > .closeButtonContainer > .closeButton {
	505	font-size: 2em;
	506	}
	507	*/
	508
	509	.fullScreenOverlay p {
	510	margin: 0.5em 0;
	511	}
	512
	513	.fullScreenOverlay > p:first-child {
	514	margin-top: 0;
	515	/* leave space for close button */
	516	margin-right: 1.5em;
	517	}
	518
	519	#libTrackList {
	520	overflow: auto;
	521	/* 2em is top/bottom margin, and one line is shown above and below, with .5em margin each */
	522	height: calc(100% - 5em);
	523	}
	524
	525	#libTrackPages {
	526	margin-bottom: 0;
	527	}
	528
	529	/* small screen media adaptations */
	530	@media screen and (max-width: 500px),
	531	screen and (max-height: 500px) {
	532	body {
	533	font-size: 10px;
	534	}
	535	#menuArea {
	536	top: 2px;
	537	left: 2px;
	538	}
	539	#zoomArea {
	540	top: 2px;
	541	right: 2px;
	542	}
	543	#fullscreenArea {
	544	right: 2px;
	545	bottom: 20px;
	546	}
	547	#copyright {
	548	bottom: 1px;
	549	right: 1px;
	550	}
	551	}