@import 'normalize.css';
@import 'toltech.css';

body {
	margin: 0;
	margin-top: 66px;
}

body > header {
	position: fixed;
	top: 0;
	width: 100%;
	padding: 8px 1.25em; /* Chrome seems to round up to 8px instead of using 7.5px for 0.5em */
	background-color: rgb( 29, 37, 44 );
	border-bottom: 5px solid rgb( 118, 188, 67 );
	color: white;
}

body.visible-brain-atlas > header {
	background-color: rgb( 56, 59, 92 );
	background-color: rgb( 86, 85, 132 );
}

/* 6.4 and later use new branding with dark blue header and geen line for all editions */
:not(body[class*="vh-dissector-5"], body[class*="vh-dissector-6-0"], body[class*="vh-dissector-6-1"], body[class*="vh-dissector-6-2"], body[class*="vh-dissector-6-3"]) > header {
	font-family: 'Bai Jamjuree', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-style: normal;
}

body[class*="vh-dissector-5"], body[class*="vh-dissector-6-0"], body[class*="vh-dissector-6-1"], body[class*="vh-dissector-6-2"], body[class*="vh-dissector-6-3"] {
	margin-top: 61px;
}

body[class*="vh-dissector-5"] > header,
body[class*="vh-dissector-6-0"] > header,
body[class*="vh-dissector-6-1"] > header,
body[class*="vh-dissector-6-2"] > header,
body[class*="vh-dissector-6-3"] > header {
	border: none;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body[class*="vh-dissector-5"] > header h1,
body[class*="vh-dissector-6-0"] > header h1,
body[class*="vh-dissector-6-1"] > header h1,
body[class*="vh-dissector-6-2"] > header h1,
body[class*="vh-dissector-6-3"] > header {
	text-shadow: 0.125em 0.1875em 0.25em #000;
}

body[class*="vh-dissector-5"].vh-dissector-lite > header,
body[class*="vh-dissector-6-0"].vh-dissector-lite > header,
body[class*="vh-dissector-6-1"].vh-dissector-lite > header,
body[class*="vh-dissector-6-2"].vh-dissector-lite > header,
body[class*="vh-dissector-6-3"].vh-dissector-lite > header {
	background-color: #4a526a;
	background-image: linear-gradient( to right, #4a526a 60%, #000000 );
}

body[class*="vh-dissector-5"].vh-dissector-pro > header,
body[class*="vh-dissector-6-0"].vh-dissector-pro > header,
body[class*="vh-dissector-6-1"].vh-dissector-pro > header,
body[class*="vh-dissector-6-2"].vh-dissector-pro > header,
body[class*="vh-dissector-6-3"].vh-dissector-pro > header {
	background-color: #852119;
	background-image: linear-gradient( to right, #852119 60%, #000000 );
}

body[class*="vh-dissector-5"].vh-dissector-stereo > header,
body[class*="vh-dissector-6-0"].vh-dissector-stereo > header,
body[class*="vh-dissector-6-1"].vh-dissector-stereo > header,
body[class*="vh-dissector-6-2"].vh-dissector-stereo > header,
body[class*="vh-dissector-6-3"].vh-dissector-stereo > header {
	background-color: #8312ad;
	background-image: linear-gradient( to right, #8312ad 60%, #000000 );
}

body[class*="vh-dissector-5"].vh-dissector-touch > header,
body[class*="vh-dissector-6-0"].vh-dissector-touch > header,
body[class*="vh-dissector-6-1"].vh-dissector-touch > header,
body[class*="vh-dissector-6-2"].vh-dissector-touch > header,
body[class*="vh-dissector-6-3"].vh-dissector-touch > header {
	background-color: #008d00;
	background-image: linear-gradient( to right, #008d00 60%, #000000 );
}

body[class*="vh-dissector-5"].vh-dissector-table > header,
body[class*="vh-dissector-6-0"].vh-dissector-table > header,
body[class*="vh-dissector-6-1"].vh-dissector-table > header,
body[class*="vh-dissector-6-2"].vh-dissector-table > header,
body[class*="vh-dissector-6-3"].vh-dissector-table > header {
	background-color: #e09a03;
	background-image: linear-gradient( to right, #e09a03 60%, #000000 );
}

body > header h1 {
	margin: 0;
}

main {
	padding: 0 20px;
}

#content-web, #content-vhd-unsupported, #content-vhd-error, #content-visible-brain {
	display: none;
}

body.visible-brain-atlas #content-vhd {
	display: none;
}

body.visible-brain-atlas #content-visible-brain {
	display: block;
}

#content-visible-brain {
	padding-top: 0.5em;
}

#content-vhd-error {
	margin-top: 4em;
	margin-bottom: 4em;
	text-align: center;
}

section {
	margin-bottom: 1.5em;
}

h2 {
	margin-top: 0;
	margin-left: -20px;
	margin-right: -20px;
	padding: 2px 13px;
	background-color: #333;
	color: white;
}

h3 {
	margin-bottom: 0;
}

h3 + p, h3 + ul {
	margin-top: 0;
}

ul {
	margin: 0.5em 0;
	padding: 0;
	list-style: none;
}

ul li {
	margin: 0;
}

body > nav {
	text-align: center;
	font-weight: bold;
}

body > footer p {
	margin: 0;
}

section.pt-br, li.pt-br {
	display: none;
}

body.pt-br section.en-us, body.pt-br li.en-us {
	display: none;
}

body.pt-br section.pt-br, body.pt-br li.pt-br {
	display: block;
}