/*	Variables
	============================================================= */

	html {
		--greenish: #005247;
		--pinkish: #ffcccc;
	}

/*	Layout
	============================================================= */

	body {
		width: 80em;
		margin: auto;
	}

	p {
		margin: 0.5em 0px;
	}

	div#body {
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: 1fr auto;
		&>div, &>form {
			position: relative;
			&:before, &:before {
				position: absolute;
				right: 0;
			}
		}
		&>div#jobtable {
			qgrid-row: 1/2;
			qgrid-column: 1/3;

			display: grid;
			grid-template-columns: 1fr auto;
			grid-template-rows: auto auto;
		}
	}


	table#calendar {
		grid-column: 1/3;
	}

	div#body>form#booking {
		qgrid-row: 1/2;
		qgrid-column: 3/5;
	}
	div#body>form#show {
		grid-row: 2/3;
		grid-column: 1/4;
	}
	div#body>form {
		qgrid-row: 2/3;
		qgrid-column: 4/5;
	}

/*	General
	============================================================= */

	html {
		font-family: Helvetica,Arial,Sans-Serif;
		font-size: 87.5%;
	}

	h1, h2, h3 {
		color: var(--greenish);
	}

	h1 {
		font-size: 2em;
		width: 100%;
		padding-bottom: 4px;
		border-bottom: 2px solid;
	}
	h2 {
		font-size: 1.5em;
	}
	h3 {
		font-size: 0.8em;
	}

	a {
		text-decoration: none;
		font-weight: bold;
	}
	a:link, a:visited {
		color: var(--greenish);
	}
	a:hover {
		text-decoration: underline;
	}

	td, th {
		vertical-align: top;
		text-align: left;
		font-size: 1rem;
	}

	select {
		font-weight: bold;
	}
	label {
		font-weight: bold;
	}

	.left, .right, .notes {
		font-size: 1.5em;
	}

/*	Calendar
	============================================================= */

	table#calendar {
		border-collapse: collapse;
		border: medium solid var(--greenish);
		font-size: 1rem;
		width: 100%;

		colgroup {
			&.week {
				width: 5%;
			}
			&.weekend {
				width: 8%;
				background-color: #eee;
				color: #960;
			}
			&.weekday {
				width: 14%;
			}
		}
		:is(td, th) {
			border-color: var(--greenish);
			box-sizing: border-box;
		}
		th {
			background-color: var(--greenish);
			color: white;
			padding: 2px 2px;
			text-align: center;
			vertical-align: middle;
			border-style: solid;
			border-width: 1px;
		}
		td {
			height: 4em;
			border: thin solid #CCC;
			vertical-align: top;
			&:hover {
				outline: 2px solid #666;
			}
		}
	}

/*	Calendar Days
	=============================================================
	td
		span.dn	chosen					3
		span.job mark busy
			span.aka					DWT
			span.jobid					2985
			span.summary				SQL Essentials
			span.ref					70372
			span.location online travel	Online
	============================================================= */

	table#calendar td {
		& span.chosen {
			background-color: #999;
			color: white;
		}
		& span.job {
			font-weight: normal;
			display: grid;
			grid-template-columns: 1fr 1fr;
			padding: 0.5em;
			&>span {
				padding: 0.25em;
			}
			& :is(span.jobid,span.aka) {
				font-weight: bold;
				border-bottom: thin solid #333;
			}
			& :not(:is(span.jobid,span.aka)) {
				grid-column: 1/3;
			}
			&:hover {
				background-color: #DDD;
			}
			&+span.job {
				border-top: none;
			}

			span.travel, span.online {
				line-height: 1;
			}
			span.travel:before {
				content: "✈️";
				margin-right: .25em;
			}
			span.online:before {
				content: "📺";
				margin-right: .25em;
			}
		}

	}


/*	Highlighted
	============================================================= */
	.job {
		text-align: center;
		border-color: #CCC;
		cursor: default;
	}

	.mark {
		text-align: left;
	}

	.busy {
		font-weight: bold;
		color: #333;
	}

	.tentative {
		font-weight: bold;
		color: #800;
	}

	#information {
		background-color: var(--greenish);
		color: white;
	}

/* Other Styles */



	.heading	{
		font-weight: bold;
	}
	.left		{	text-align: left;	}
	.right		{	text-align: right;	}


	table#calendar td.current {
		border: 2px solid #999;
	}
	table#calendar td.selected {
		border: 2px solid black;
	}

/* Visibility */



/* Absolute Sizes */


	#information {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 240px;
		visibility: hidden;
		border-style: solid;
		border-width: 2px;
		border-color: black;
		padding: 2px;
		font-weight: bold;
	}
	table#calendar span.dn {
		display: block;
		border-style: solid;
		border-width: thin 0 thin 0;
		border-color: var(--greenish) white #ccc white;
		padding: .25em .25em;
		margin: 0 0 .125em 0;
		color: #666666;
		color: var(--greenish);
		font-weight: bold;
		qfont-size: 1.2em;
		text-align: center;
		background-color: #f8f8f8;
	}

	#calendar span.dn.today {
		color: white;
		background-color: var(--greenish);
	}


	#calendar td.current span.dn {
		color: #333333;
		font-weight: bold;
	}

	#booking {
		padding: 8px;
	}
	#booking span {
		display: block;
		qfloat: left;
		margin: 4px;
	}

	div#select {
		display: flex;
		flex-direction: row;
		padding: 0.25em;
	}

	div#select a {
		margin: 0;
	}
	div#select select {
		margin: 0;
	}

	#select label, #booking label {
		font-weight: bold;
		float: left;
	}

	#select p, #booking p {
		/*! margin: 2em 1em; */
	}


	div#select>a {
		background-color: #005247;
		color: white;
		padding: .375em .25em;
		margin: 0 .125em;
		font-size: 3em;

		vertical-align: baseline;
		line-height: 0;
		position: relative;
		/* border-radius: .125em; */
	}

	div#list {
		float: left;
		width: 24em;
	}
	div#data {
		float: left;
		width: 30em;
	}
	div#list option {
		font-size: 10pt;
		width: 18em;
	}
	fieldset label {
		/* float: left; */
		/* display: table-cell; */
	}

	fieldset#booking  {
			display: table;
	}
	fieldset#booking div {
			display: table-cell;
	}



/*	Forms
	=============================================================
	============================================================= */
	fieldset#booking-details {
		padding: 0;
	}
	fieldset#booking-details>div {
		padding: 0;
	}

	form#booking {
		border: thin solid red;
		display: flex;
		flex-direction: column;
		grid-template-rows: 1fr ;
		grid-template-columns: 1fr 1fr;
	}
	fieldset#booking-details {
		display: flex;
	}
	fieldset#booking-details>div {
		flex: 1;
		box-sizing: border-box;
		padding: 1em;
	}

	fieldset#booking-details>div label {
		width: 100%;
		font-weight: bold;
		margin-bottom: 0.75em;
	}
	fieldset#booking-details>div label :is(input[type="text"],textarea,select) {
		box-sizing: border-box;
		width: 100%;
		margin-top: 0.25em;
		font-weight: normal;
	}

	fieldset#booking-details>div label :is(input[type="text"],textarea) {
		padding: 0.25em 0.5em;
		font-family: monospace;
	}

	fieldset#control {
		display: flex;
		button {
			border: thin solid rgb(0, 82, 71);
			background-color: rgb(0, 82, 71);
			color: white;
			padding: 0.5em 0.25em;
			&:nth-child(n+1) {
				border-left: thin solid white;
			}
		}
	}