:root {
	/*
	 * Various different 'brand' colours.
	 *
	 * Dandelion:      #fdc82f
	 * WebCMS3
	 *   blue:         #45a6f4
	 *   l. blue:      #9ccff9
	 *   d. orange:    #ff7144
	 *   l. d. orange: #ffb39b
	 *   d. purple:    #825dc4
	 *   l. d. purple: #beace0
	 *   green:        #6abd6e
	 *   indigo:       #6170c2
	 *   l. indigo:    #adb4e0
	 *   orange:       #ffaa2c
	 *   pink:         #ed447d
	 *   l. pink:      #f59dbb
	 *   purple:       #af50bf
	 *   l. purple:    #d6a6de
	 *   red:          #e05757
	 *   l. red:       #ffacb4
	 *   teal:         #42a097
	 */
	--main-color: #e05757;
}

.navbar-brand, .navbar-brand:hover {
	color: black;
}

/*
 * Fix content widths --- this ensures the text column is a reasonable
 * width to read, and is centered on the viewport.
 */
main[aria-label="Content"] {
	max-width: 56rem;
	margin: 1rem auto;
}

a {
	text-decoration: none;
}

/**********************************************************************/
/* Lists                                                              */

/* Cause list markers to not waste space */
ul, ol {
	padding-left: 1.2em;
}

/* Improve appearance of lists using letter markers */
/*
ol[type="a"] {
	padding-left: 1.8rem;
}

ol[type="a"] > li::marker {
	font-family: "Lucida Console", Monaco, monospace;
}
*/

/**********************************************************************/
/* Colours                                                            */

.red {
	color: red;
}

.blue {
	color: blue;
}

.green {
	color: #1abf17;
}

/**********************************************************************/
/* Tables                                                             */

table.center {
	margin: auto;
}

td.col-pad-1 {
	padding: 0 15px;
}

/**********************************************************************/

/*
 * Comments
 */
.comment {
	color: grey;
}

/*
 * Adjust the display of preformatted text (used throughout!)
 */
pre {
	background-color: #f8f8f8;
	border-radius: 5px;
	margin: .25rem 0;
	padding: .25rem .5rem;
	white-space: pre-wrap;
	text-align: left;
}

pre[is="kbd"] {
	border: none;
	margin: 0;
	padding: 0;
}

.linenodiv > pre {
	background-color: white;
	border: 1px solid #f0f0f0;
}

code {
	/* color: initial; */
	font-size: 105%;
	white-space: nowrap;
}

/**********************************************************************/
/* horizontal dl                                                      */

dl.dl-horizontal {
	display: grid;
	grid-template-columns: max-content auto;
}

dl.dl-horizontal > dt {
	text-align: right;
	grid-column-start: 1;
	margin-right: 1rem;
}

dl.dl-horizontal > dd {
	grid-column-start: 2;
}

/**********************************************************************/
/* vertical dl                                                        */

dl.dl-vertical > dd {
	margin-left: 2rem;
}

/**********************************************************************/
/* images                                                             */

img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.w-15 { width: 15%; }
img.w-20 { width: 20%; }
img.w-25 { width: 25%; }
img.w-30 { width: 30%; }
img.w-35 { width: 35%; }
img.w-40 { width: 40%; }
img.w-45 { width: 45%; }
img.w-50 { width: 50%; }
img.w-55 { width: 55%; }
img.w-60 { width: 60%; }
img.w-65 { width: 65%; }
img.w-70 { width: 70%; }
img.w-75 { width: 75%; }
img.w-80 { width: 80%; }
img.w-85 { width: 85%; }
img.w-90 { width: 90%; }
img.w-95 { width: 95%; }
img.w-99 { width: 99%; }

/**********************************************************************/
/* terminal box                                                       */

/* Style command entry into various tools. */
/* pre[is="tty"] {} */
pre[is="tty"] > kbd {
	font-weight: bold;
	font-size: 100%; padding: 0;
	background: none; border: none; color: black;
}

pre[is="tty"] > kbd:before { font-weight: normal; color: var(--gray); }
pre[is="tty"] > kbd[data-prompt]:before { content: attr(data-prompt) ' '; }
pre[is="tty"] > kbd[is="sh"]:before    { content: '$ '; }
pre[is="tty"] > kbd[is="gdb"]:before   { content: '(gdb) '; }
/* COMP1521 says hi! */
pre[is="tty"] > kbd[is="spim"]:before  { content: '(spim) '; }
/* COMP2041 says hi! */
pre[is="tty"] > kbd[is="py"]:before    { content: '>>> '; }
pre[is="tty"] > kbd[is="node"]:before  { content: ' > '; }
/* COMP3311 and COMP9315 say hi! */
pre[is="tty"] > kbd[is="psql"]:before  { content: attr(db) '=# '; }
pre[is="tty"] > kbd[is="psql,"]:before { content: attr(db) '-# '; }

/* Show the `ctrl-d' widget. */
.eof:before {
	background-color: black;
	border-radius: .25rem;
	color: white;
	content: 'Ctrl-D';
	font-weight: lighter;
	font-style: italic;
	padding: .1rem .25rem;
}

.eof:after {
	position: relative;
	content: 'Ctrl and D keys pressed';
	border: 1px solid black;
	background-color: white; /* var(--main-color); */
	opacity: 0;
	width: 10px;
	height: 5em;
	border-radius: .25rem;
	transition: opacity 0.5s;
}

.eof:hover::after {
	opacity: 1;
}

/* Fix indentation. */
pre       { tab-size: 4; -moz-tab-size: 4; }
pre.mips  { tab-size: 8; -moz-tab-size: 8; }

/* Custom indentation width */
pre.tab-4 { tab-size: 4; -moz-tab-size: 4; }
pre.tab-8 { tab-size: 8; -moz-tab-size: 8; }

/**********************************************************************/

/* Tutorial questions. */
body > ol > li { margin-top: 1rem; }
/* li > code:nth-child(1) { margin-left: 1ex; } */

p { margin-bottom: 0.5rem; }
* + p { margin-top: 0.5rem; }

/*
 * Sectioning for the home page.
 * Replaces ad-hoc .thick_hr with a bordered section.
 */
section.homepage-section {
	/* inherits .thick_hr */
	margin-top: .5rem;
	border-top: .25rem solid var(--main-color);
	padding-top: .5rem;
}

/*
 * Lay out tutorial answers.
 */
.answer {
	border: 1px solid blue;
	border-radius: .25rem;
	padding: 1rem;
	padding-bottom: 0.5rem;
	margin: 1rem 0;
}

.answer > h4 {
	background-color: #eef;
	border-top-left-radius: .25rem;
	border-top-right-radius: .25rem;
	border-bottom: 1px solid var(--blue);
	display: block;
	padding: 0.5rem 1rem;
	margin: -1rem -1rem 0.5rem;
	font-size: 1rem;
	font-weight: bold;
}

.hidden { display: none; }

/*
 * Hints and asides.
 */
aside {
	border: 1px solid; /* .border */
	border-left-width: .25rem;
	border-radius: .25rem; /* .rounded */
	margin: 1.5rem 0rem; /* .m-4 */
	padding: .5rem; /* .p-2 */
	/* padding-bottom: 0rem; */
}

aside:before {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 90%;
	display: block;
	color: white;
	max-width: 7rem;
	padding: .5rem;
	margin-top:  -.5rem; /* undo .p-2 */
	margin-left: -.5rem; /* undo .p-2 */
	margin-bottom: .5rem;
	border-bottom-right-radius: .25rem; /* .routded */
}

aside.hint            { border-color: #60b44b; }
aside.hint:before { background-color: #60b44b; content: "hint: " }

aside.note            { border-color: #4eb1b1; }
aside.note:before { background-color: #4eb1b1; content: "note: " }

aside.warning            { border-color: #db7724; }
aside.warning:before { background-color: #db7724; content: "warning: " }

aside.danger            { border-color: var(--red); }
aside.danger:before { background-color: var(--red); content: "danger: " }

body > nav.navbar { background-color: var(--main-color); }

/*
 * Exercise layout on the lab page.
 */
.exercise {
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #eee;
}

.exercise > header {
	padding: .75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid;
	border-radius: .25rem;
	border-left-width: .5rem; /* left-tab effect */
}
.exercise > header > h3 { margin: 0; }
.exercise.with-self > header { border-color: var(--red); }
.exercise.with-pair > header { border-color: var(--green); }
.exercise.with-test > header { border-color: var(--blue); }

/**********************************************************************/
/* login form                                                         */

/*
 * Tidy up the login form.
 */
.login-form {
	margin: 1rem auto;
}

.login-form .form-group {
	margin-top: 0; margin-bottom: 0;
}

.login-form button {
	margin-top: 1rem;
}

.login-form div.form-group input[type="text"] {
	border-radius: .3rem .3rem 0 0;
}

.login-form div.form-group input[type="password"] {
	border-radius: 0 0 .3rem .3rem;
}

/**********************************************************************/
/* tabs                                                               */

/*
.nav-tabs {
	background-color: #f7f7f7;
	border: 1px solid #ddd;
	border-radius: 5px 5px 0px 0px;
	padding: 10px 10px 0px 10px;
}
*/

.tab-content {
	border: 1px solid #ddd;
	border-radius: 0px 0px 5px 5px;
	border-top-style: none;
}

.tab-pane {
	padding: .7rem;
}

/**********************************************************************/
/* exam                                                               */

.exam.terminal-window {
	background-color: #f5f5f5;
	border: 1px solid #555;
	/* background-color: #f6f6ff; */
	/* border: 1px solid #a08fff; */
	border-radius: 0px;
	padding: 5px 7px;
}

/**********************************************************************/
/* toc                                                                */

#toc {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 70px;
}

/**********************************************************************/
/* text selection                                                     */

.no-text-selection {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

/**********************************************************************/
/* code highlighting                                                  */

/*
 * Adjust the layout of highlighted program blocks.
 */
.highlight {
	border: 1px solid #f0f0f0;
	border-radius: 0.25rem;
	margin: .25rem 0rem;
	padding: .25rem .5rem;
}
.highlight > pre {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Code highlighting styles, from Pygments:
 */
.highlight .hll { background-color: #ffffcc }
.highlight      { background: #f8f8f8; }
.highlight .c   { color: #408080; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #FF0000 } /* Error */
.highlight .k   { color: #008000; font-weight: bold } /* Keyword */
.highlight .o   { color: #666666 } /* Operator */
.highlight .ch  { color: #408080; font-style: italic } /* Comment.Hashbang */
.highlight .cm  { color: #408080; font-style: italic } /* Comment.Multiline */
.highlight .cp  { color: #BC7A00 } /* Comment.Preproc */
.highlight .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
.highlight .c1  { color: #408080; font-style: italic } /* Comment.Single */
.highlight .cs  { color: #408080; font-style: italic } /* Comment.Special */
.highlight .gd  { color: #A00000 } /* Generic.Deleted */
.highlight .ge  { font-style: italic } /* Generic.Emph */
.highlight .gr  { color: #FF0000 } /* Generic.Error */
.highlight .gh  { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi  { color: #00A000 } /* Generic.Inserted */
.highlight .go  { color: #888888 } /* Generic.Output */
.highlight .gp  { color: #000080; font-weight: bold } /* Generic.Prompt */
.highlight .gs  { font-weight: bold } /* Generic.Strong */
.highlight .gu  { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt  { color: #0044DD } /* Generic.Traceback */
.highlight .kc  { color: #008000; font-weight: bold } /* Keyword.Constant */
.highlight .kd  { color: #008000; font-weight: bold } /* Keyword.Declaration */
.highlight .kn  { color: #008000; font-weight: bold } /* Keyword.Namespace */
.highlight .kp  { color: #008000 } /* Keyword.Pseudo */
.highlight .kr  { color: #008000; font-weight: bold } /* Keyword.Reserved */
.highlight .kt  { color: #B00040 } /* Keyword.Type */
.highlight .m   { color: #666666 } /* Literal.Number */
.highlight .s   { color: #BA2121 } /* Literal.String */
.highlight .na  { color: #7D9029 } /* Name.Attribute */
.highlight .nb  { color: #008000 } /* Name.Builtin */
.highlight .nc  { color: #0000FF; font-weight: bold } /* Name.Class */
.highlight .no  { color: #880000 } /* Name.Constant */
.highlight .nd  { color: #AA22FF } /* Name.Decorator */
.highlight .ni  { color: #999999; font-weight: bold } /* Name.Entity */
.highlight .ne  { color: #D2413A; font-weight: bold } /* Name.Exception */
.highlight .nf  { color: #0000FF } /* Name.Function */
.highlight .nl  { color: #A0A000 } /* Name.Label */
.highlight .nn  { color: #0000FF; font-weight: bold } /* Name.Namespace */
.highlight .nt  { color: #008000; font-weight: bold } /* Name.Tag */
.highlight .nv  { color: #19177C } /* Name.Variable */
.highlight .ow  { color: #AA22FF; font-weight: bold } /* Operator.Word */
.highlight .w   { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb  { color: #666666 } /* Literal.Number.Bin */
.highlight .mf  { color: #666666 } /* Literal.Number.Float */
.highlight .mh  { color: #666666 } /* Literal.Number.Hex */
.highlight .mi  { color: #666666 } /* Literal.Number.Integer */
.highlight .mo  { color: #666666 } /* Literal.Number.Oct */
.highlight .sa  { color: #BA2121 } /* Literal.String.Affix */
.highlight .sb  { color: #BA2121 } /* Literal.String.Backtick */
.highlight .sc  { color: #BA2121 } /* Literal.String.Char */
.highlight .dl  { color: #BA2121 } /* Literal.String.Delimiter */
.highlight .sd  { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.highlight .s2  { color: #BA2121 } /* Literal.String.Double */
.highlight .se  { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
.highlight .sh  { color: #BA2121 } /* Literal.String.Heredoc */
.highlight .si  { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
.highlight .sx  { color: #008000 } /* Literal.String.Other */
.highlight .sr  { color: #BB6688 } /* Literal.String.Regex */
.highlight .s1  { color: #BA2121 } /* Literal.String.Single */
.highlight .ss  { color: #19177C } /* Literal.String.Symbol */
.highlight .bp  { color: #008000 } /* Name.Builtin.Pseudo */
.highlight .fm  { color: #0000FF } /* Name.Function.Magic */
.highlight .vc  { color: #19177C } /* Name.Variable.Class */
.highlight .vg  { color: #19177C } /* Name.Variable.Global */
.highlight .vi  { color: #19177C } /* Name.Variable.Instance */
.highlight .vm  { color: #19177C } /* Name.Variable.Magic */
.highlight .il  { color: #666666 } /* Literal.Number.Integer.Long */