html, body {
	/* vh => viewport height, 100vh => 100% of browser window height. */
	min-height: 100vh;
}

body {
	background-color: #e0e0e0;
	/* sticky footer */
	display: flex;
	flex-direction: column;
}

a {
	color: #337ab7;
}
a:hover,
a:focus {
	color: #23527c;
}

/* Custom page header */
.head {
	background-image: url("https://plg.uwaterloo.ca/pic/turing-bg.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-color: #f8f8f8
}

.header {
	/* padding-bottom: 20px; */
	border-bottom: 1px solid #e5e5e5;
	background-color: #f8f8f8
}

h3 {
	margin: 0.75em 0 0.5em 0;
}

/* Prevent spacing collapse */
blockquote {
	margin-top: 1em;
	margin-left: 1.5em;
}

/* Make the masthead heading the same height as the navigation */
.header h3 {
	margin-top: 0px;
	margin-bottom: 0;
	line-height: 40px;
}

.container-narrow > hr {
	margin: 30px 0;
}

/* Better padding for jumbotron */
.container .jumbotron {
	padding-right: 60px;
	padding-left: 60px;
	padding-top: 25px;
	padding-bottom: 25px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
	/* Remove the padding we set earlier */
	.header,
	.marketing,
	.footer {
	padding-right: 0;
	padding-left: 0;
	}
	/* Space out the masthead */
	.header {
	margin-bottom: 30px;
	}
	/* Remove the bottom border on the jumbotron for visual effect */
	.jumbotron {
	border-bottom: 0;
	}
}

.clearfix:before,
.clearfix:after {
    content: " ";

}

.clearfix:after {
    clear: both;
}

.clearfix {
	background-color: #e2e2e2;
}

/* make active navbar same colour as body background */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: #e2e2e2;
}

/* adjust PLG logo size/position in navbar */
#logo {
	width: 40px;
	padding-right: 10px;
	margin-top: -6px;
}

/* reduce spacing above and below the jumbotron */
.jumboLocal {
	padding-top: 10px;
	padding-bottom: 25px;
}

.jumbotron.head.jumboLocal p {
	font-size: 1.3em;
}

/* sticky footer */
.content {
	flex: 1 0 auto;
}

.anchor {
	padding-top: 60px;
	margin-top: -60px;
}

/* circle around picture */
.circle-image {
	width: 120px;
	height: 120px;
	border-radius: 90px;
	-webkit-border-radius: 90px;
	-moz-border-radius: 90px;
}

#plgheading {
	font-size: 36px;
}

/* adjust separator colour and width */
hr {
	margin: 2em 0;
	border-top: 1.5px solid #000000;
}
/*	border-top: 1px solid #f8f8f8; */

/* Fix broken navbar in chrome/opera */
.navbar {
	display: initial;
}

/* adjusted lists inside navs */
.nav-justified>li {
	display: inline-table;
	padding-right: 15px;
	padding-left: 15px;
	max-width: 260px;
}

/* align portraits properly with the text */
.nav-justified>li>a.portrait {
	padding-left: 0px;
	padding-right: 30px;
	min-width: 180px;
	display: block;
	text-align: center;
}

/* Restore normal previous hovering behaviour */
.nav-justified>li>a.portrait:hover {
	text-decoration: underline;
	background-color: unset;
}

/* More discreet background on pills */
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	color: #0056b3;
	background-color: #eee;
}

/* More discreet background on pills */
.nav-link:focus, .nav-link:hover  {
	color: #0056b3;
	background-color: #eee;
}

/* Border on page headers */
.page-header {
	padding-bottom: 9px;
	margin: 40px 0 20px;
	border-bottom: 1px solid #eee;
}

/* Fix bootstrap columns */
.contact-block {
	display: inline-block!important;
}

/* Fix bootstrap columns, different in firefox */
@-moz-document url-prefix() {
	.contact-block {
		display: table-cell!important;
	}
}

/* use <pre> for code blocks rather than <code> */
pre {
	/* font-family: Helvetica; */		/* code font */
	font-family: monospace;
	-moz-tab-size:    4;				/* Firefox 4+ */
	-o-tab-size:      4;				/* Opera 11.5 & 12.1 only */
	tab-size:         4;				/* Chrome 21+, Safari 6.1+, Opera 15+ */
	padding: 9.5px;
	margin: 0 0 10px;
	line-height: 1.42857143;
	word-break: break-all;
	word-wrap: break-word;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 4px;
    font-size: 105%;
}

/* print text in red, e.g., <r->red text</r-> */
r- {
	color: red;
}
g- {
	color: green;
}
b- {
	color: blue;
}

/* print text in code font, e.g., <c->some code</c-> */
c- {
	/* font-family: Helvetica; */
	font-family: monospace;
    font-size: 125%;
}

/* Local Variables: */
/* tab-width: 4 */
/* End: */
