/* Establish the font and remove the page margins. X-overflow is disabled to hide the slide-in tray. */
body {
	font-family: "Karla", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	margin: 0;
	background-color: #fafafa;
	overflow: hidden;
	color: #121;
	font-size: 10pt;
}

/* Disable text selection on everything since we'll be doing lots of dragging and dropping. */
* {
	-webkit-user-select: none;
	user-select: none;
}

/* The header and its elements are stickily positioned and have simple presentation. */
.header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 0.25rem;
	padding-left: 5.5rem;
	max-height: 32px;
	display: flex;
	align-items: center;
	gap: 1rem;
}
	.header > h1 a {
		color: #000;
	}
	.header > h1 a.white {
		color: #fff;
	}
	.header > img {
		width: 3em;
	    position: absolute;
	    left: 2.5em;
	    top: 0.5rem;
	}
	/* This div is styled to represent the current drawing style. */
	.header > div#colour > div#line {
		border-bottom-width: 4px;
		border-bottom-style: solid;
		min-width: 100px;
	}
	.header > div#colour.red > div#line {
		color: #ff0000;
	}
	.header > div#colour.green > div#line {
		color: #008000;
	}
	.header > div#colour.orange > div#line {
		color: #ffa500;
	}
	.header > div#colour.blue > div#line {
		color: #0000ff;
	}
	.header > div#colour.black > div#line {
		color: #000000;
	}
	.header > div#colour.white > div#line {
		color: #ffffff;
	}
	.header > div#colour.grey > div#line {
		color: #808080;
	}
	.header > div#colour > div#line {
		border-bottom-style: solid;
	}
	.header > div#colour > div#line.dotted {
		border-bottom-style: dotted;
	}
	.header > div#colour > div#line.dashed {
		border-bottom-style: dashed;
	}

/* Lightbox is a green non-interactive element that appears under the slide-in tray. It fades in and out. */
#lightbox {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background-color: rgba(0, 55, 0, 0.5);
	visibility: hidden;
	opacity: 0;
	transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
	backdrop-filter: blur(8px);
}

/* The show class is applied to the lightbox when it is needed which triggers its transition. */
#lightbox.show {
	visibility: visible;
	opacity: 1;
	transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
}

/* Horizontal rules are grey and faint. */
hr {
	border: 1px solid #777;
}

/* Hyperlinks are blue. */
a {
	color: #36c;
	text-decoration: none;
}
	/* Affordance effects for buttons and links: underline off, pink highlight. */
	a:hover {
		text-decoration: underline;
		color: #25a;
	}

/* Any element can be hidden with this class. */
.hidden {
	display: none;
}

/* Any element can get slightly smaller text with this class. */
.small {
	font-size: 90%;
}

/* Convenience class for spacing elements a little. */
.gapAfter {
	margin-right: 1em;
}

/* Toolbars generally hold buttons and go top-right of their containers. */
div.toolbar {
	position: absolute;
	right: 0em;
	top: 1em;	
	color: #595959;
}

/* Keyframes which manage the tray sliding in and out by setting its left position. */
@keyframes slideIn {
  0% { left: 100% }
  100% { left: 60% }
}
@keyframes slideOut {
  0% { left: 60% }
  100% { left: 100% }
}

/* Styling and layout for the slide-in tray itself. */
div#tray {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	width: auto;
	height: 100%;
	background-color: #fff;
	border-left: #777 1px solid;
	z-index: 2;
	padding: 1rem;
	min-height: 100%;
	overflow-y: scroll;
}
	/* These two classes are applied to the tray to trigger its animations in and out. */
	div#tray.open {
		box-shadow: 0px 0px 16px rgba(0,0,0,0.5);
		animation: slideIn 0.5s forwards;
	}
	div#tray.closed {
		animation: slideOut 0.5s forwards;
	}

	/* Other tray styles ... */
	div#tray > img {
		width: 8rem;
		height: 8rem;
	}
	div#tray hr {
		margin: 1rem 0;
		border-color: #ddd;
	}
	div#tray * {
		line-height: 1.4em;
		margin: 0 0 0.1rem 0;
	}
	div#tray #instructions p {
		margin-top: 1rem;
	}

	/* Adverts for other horse-related services and app. */
	div#tray ul.horses {
		display: flex;
		gap: 1rem;
		list-style-type: none;
		margin: 1rem 0rem 2rem;
		padding-inline-start: 0;
	}
		div#tray ul.horses li a {
			border-radius: 8px;
			border: 1px solid #ccc;
			padding: 0.5rem;
			display: flex;
			align-items: center;
			flex-direction: column;
			box-shadow: 4px 4px 8px rgba(0,0,0,0.1);
		}
		div#tray ul.horses li a:hover {
			box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
			border: 1px solid #aaa;
		}
		div#tray ul.horses li img {
			max-width: 4rem;
			aspect-ratio: 1;
			display: block;
		}