/* Use Century Gothic throughout */
@font-face {
	font-family: 'century-gothic';
	src: url('CenturyGothic/century-gothic.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'century-gothic';
	src: url('CenturyGothic/century-gothic-bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'century-gothic';
	src: url('CenturyGothic/century-gothic-italic.woff2') format('woff2');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'century-gothic';
	src: url('CenturyGothic/century-gothic-bold-italic.woff2') format('woff2');
	font-weight: bold;
	font-style: italic;
}
* {
	font-family: 'century-gothic';
}

/* setup HCERES colors */
html {
	--hceres-purple: rgb(97, 57, 149);
	--hceres-pink: rgb(201, 67, 95);
	--hceres-light-purple: rgba(97, 57, 149, 0.15);
	--hceres-light-pink: rgba(201, 67, 95, 0.15);
}
h2 {
	color: var(--hceres-pink);
}
h3 {
	color: var(--hceres-purple);
}
a { /* links are in bold ... */
	color: var(--hceres-purple);
	font-weight: bold;
}
a[href^="http://"], a[href^="https://"] { /* ... but external links are not */
	font-weight: normal;
}
code {
	color: var(--hceres-pink);
}

/* stick logo to the right */
#logo {
	height: 80px;
	float: right;
	padding-right: 40px;
}

/* stick menu for selecting team to the right */
#team-selector {
	float: right;
}

/* grey text */
.grey {
	color: grey;
}

/* small text */
.small {
	font-size: small;
}

/* hidden content */
.hidden {
	display: none !important;
}

/* full-width body so that the banner and tabs line look OK */
body {
	margin-left: 0;
	margin-right: 0;
}

/* full-height html and body for drag-and-drop to work on the entire window */
html, body {
	height: 100%;
}

/* indent content to align to the leftmost tab */
header, div.title, #content {
	padding-left: 40px;
	padding-right: 40px;
}

/* title banner */
div.title {
	border-top-style: solid;
	border-bottom-style: solid;
	border-width: 2px;
	border-color: var(--hceres-purple);
	background-color: var(--hceres-light-purple);
	margin-bottom: 30px;
}
div.title p {
	font-weight: bold;
}

/* tab row */
ul.tabs {
	border-bottom-style: solid;
	border-width: 2px;
	border-color: var(--hceres-purple);
	padding-bottom: 4px;
}
ul.tabs li {
	display: inline;
	border-style: solid;
	border-width: 2px;
	border-color: var(--hceres-purple);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 4px 10px 4px 10px;
	background-color: var(--hceres-light-purple);
	color: var(--hceres-purple);
	cursor: pointer;
}
ul.tabs li.selected {
	border-bottom-color: white;
	background-color: white;
}
ul.tabs li a {
	text-decoration: none;
}

/* tab content */
div.tab-content {
	display: none;
}

div.tab-content.selected {
	display: block;
}

/* footer */
footer {
	height: 80px;	/* to have some blank at the bottom */
	margin-top: 20px;
	padding-left: 40px;
	border-top: 2px solid var(--hceres-purple);
	background-color: var(--hceres-light-purple);
	font-size: small;
}