: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: #fdc82f;
}

/*
 * 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: 60rem;
	margin: 1rem auto;
}

/*
 * Adjust the display of preformatted text (used throughout!)
 */
pre {
	border: thin solid #eeeeee;
	margin: .25rem 0;
	padding: .25rem .5rem;
	white-space: pre-wrap;
}

code { color: initial; white-space: nowrap; }

/* 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="sh_comment"]:before { content: '# '; }
pre[is="tty"] > kbd[is="sh_comment"]   { color: grey; }
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 {
	content: 'Ctrl-D';
	font-weight: lighter;
	font-style:  italic;
	border: thin solid;
	border-radius: .25rem;
	padding: .1rem .25rem;
}

.eof:after {
	position: relative;
	content: 'Ctrl and D keys pressed';
	border: 2px solid black;
	background-color: 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; }

/* 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;
}

.hidden { display: none; }

/*
 * Hints and asides.
 */
aside {
	border: .01rem solid var(--light); /* .border */
	border-left-width: .25rem;
	border-radius: .25rem; /* .rounded */
	margin: 1.5rem; /* .m-4 */
	padding: .5rem; /* .p-2 */
}

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

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

aside.impl-hint { border-color: var(--green); }
aside.impl-hint:before { background-color: var(--green); content: "implementaion hints: " }

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

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

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

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

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

aside.design_excellence { border-color: var(--indigo); }
aside.design_excellence:before { background-color: var(--indigo); content: "design excellence: " }

aside.preparation { border-color: var(--cyan); }
aside.preparation:before { background-color: var(--cyan); content: "Pre-Workshop Preparation: " }

aside.revision { border-color: var(--blue); }
aside.revision:before { background-color: var(--blue); content: "In-Workshop Revision: " }

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

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

section > header {
	padding: .75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid;
	border-radius: .25rem;
	border-left-width: .5rem; /* left-tab effect */
}

section > header > h3 { margin: 0; }
section.exercise > header { border-color: var(--green); }
section.exercise.pair-exercise > header { border-color: var(--yellow); }
section.exercise.peer_assessed-exercise > header { border-color: var(--orange); }
section.exercise.challenge-exercise > header { border-color: var(--red); }
section.exercise.test-exercise > header { border-color: var(--blue); }

/*
 * 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;
}

/*
 * Adjust the layout of highlighted program blocks.
 */
.highlight {
	border: 1px solid #f0f0f0;
	border-radius: 0.25rem;
	margin: .25rem 1rem;
	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 */


/*
 * cs6991 specific changes
 */
.course-title {
	font-size: 2.4rem;
}

/* Since we don't use bootstrap's menu;
 * we need our own style.
 */
#hide-contentbar {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.hidden-contentbar {
	display: none;
}

#contentbar {
	transition: all 2s linear;
}

.sidebar-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 80px;
	overflow-y: auto;
	max-height: calc(100vh - 9rem);
}

/* width */
.sidebar-sticky::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.sidebar-sticky::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.sidebar-sticky::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.sidebar-sticky::-webkit-scrollbar-thumb:hover {
  background: #555;
}