/*
   Autscape main Cascading Style Sheet
   By Martijn Dekker, loosely based on original by Peter Benie
   © 2008-2024 The Autscape Organisation

   DESIGN NOTES:

   Name classes after their function, not how they look. Layouts change.

   Try to have as few overrides between different .css files as possible, so
   we don't have to deal with override priority headaches. If the use of
   "!important" is needed, add a comment so others can understand why.

   However, don't be afraid of redundancy between
   style-{wide,narrow,print}.css, as only one of these is active
   at any time. Prioritise ease of understanding/maintenance.
*/

@import url("../fonts/webfonts.css") screen, print;

/* Layout versions for different media. */
@import url("style-narrow.css") screen and (max-width: 800px);
@import url("style-wide.css") screen and (min-width: 801px);
@import url("style-print.css") print;


/* ------------------------------------------------- */
/* ONLY style common to all media belongs here below */

body,textarea { 
	font-family: "Open Sans", "Verdana", sans-serif;
}

div#content p:first-child {
	margin-top: 0;
}

tt,pre,code {
	font-family: "Inconsolata", "Andale Mono", "Monaco", "Courier", monospace;
	font-size: 100%; /* some browsers make tt/pre smaller by default */
}

textarea {
	font-size: 100%; /* some browsers make these smaller by default */
}

em {
	font-style: italic;
}

/* downsize gracefully */
img#hdrlogo {
	max-width: 100%;
	height: auto;
}

h1,h2,h3,h4,h5,h6 {
	font-family: "Open Sans", "Helvetica", sans-serif;
}

h1 {
	font-weight: normal;
	letter-spacing: 2pt;
	color: black;
}

h2 {
	font-weight: normal;
	letter-spacing: 1pt;
	margin: 2ex 0 1ex;
}
h2:first-child {
	margin-top: 0;
}

h2 span.subhead {
	font-size: smaller;
	font-style: italic;
	letter-spacing: 0;
}

p, ul, ol, dl {
	line-height: 150%;
}

/* mark external http and https links [image source: Wikipedia] */
a[href^="http"], a.external {
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=") no-repeat scroll right center transparent;
	padding-right: 13px;
}
/* avoid external-link icon on non-relative internal links */
a[href^="http://www.autscape."], a[href^="https://www.autscape."] {
	background: none;
	padding: 0;
}
/* mark internal login links [image source: Wikipedia] */
a[href^="https://login.autscape."] {
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAdUlEQVQYV2P4//8/Awxv3LThf0dXKxyD+DA5DEUg+tWrV2AaWTFcIboJyJrhCtGtRMcgebhpL2/4/v//Lvn//x+7IRjIfn8v+P/t055gxZgKPzaC8Y/nMYQVLpnM8f/zo3AqKfzyOOL/h/sh/59c9sBUSIyvAeRdJWjk4E//AAAAAElFTkSuQmCC") no-repeat scroll right center transparent;
	padding-right: 13px;
}

dl dt {
	font-style: italic;
}

ul.simplelist li {
	list-style-type: none;
}

div.intro {
	font-size: 85%;
	width: 85%;
	margin: auto;
}
div#historicalhdr {
	font-size: 85%;
	text-align: center;
	margin-bottom: 1ex;
}
div.notice {
	max-width: 40em;
	margin: 1ex auto;
	padding: 1ex 1em;
	border: 2px solid;
	border-radius: 15px;
	background-color: #EEE;
}
div.photoframe {
	float: right;
	clear: both;
	background: white;
	width: 260px;
	text-align: center;
	line-height: 100%;
	border: solid 1px gray;
	border-radius: 15px;
	margin: 1ex 0 0 1em;
	padding: 5px;
}
div.photoframe img {
	border-radius: 12px;
	width: 256px;
	height: auto;
}

.warning {
	color: red;
}

.error {
	color: red;
	font-weight: bold;
}

input {
	font: inherit;
}

input.submit {
	font-size: 90%;
	font-weight: bold;
	text-decoration: none;
	border: 2px solid gray;
	color: black;
	background: #f4f4f4;
	border-radius: 25px;
	padding: 0 1em .25ex 1em;
	margin: 0 .2em;
}
input.submit:hover {
	background: #e8e8e8;
}
input.submit:active {
	color: white;
	background: #404040;
}
input.submit[disabled] {
	color: gray;
 	background: #f4f4f4; /* override :hover and :active */
}

input.submitlink {
	/* give the "button" a link appearance */
	text-decoration: underline;
	border: none;
	background: none;
	margin: 0 .2em;
	padding: 0;
	overflow: visible;
	cursor: pointer;
	white-space: normal;
	text-align: left;
	vertical-align: top;
}
input.submitlink:active {
	color: red;
}
input.submitlink[disabled] {
	color: gray;
	text-decoration: none;
	cursor: auto;
}
table tr th input.submitlink {
	/* don't underline table sort buttons */
	text-decoration: none;
}

div.address {
	display: table;
	background: white;
	padding: 1.5ex 1.5em;
}

div.address2 {
	display: table;
	margin-left: 3em;
	padding: 1.5ex 1.5em;
}

table.aligntopleft th, table.aligntopleft td {
	text-align: left;
	vertical-align: top;
}

table.newstable, table.prettytable { 
	margin-right: 1em; 
	background: white;
	line-height: 150%;
}

table.prettytable caption {
	font-size: larger;
}

table.newstable th, table.newstable td, table.prettytable th, table.prettytable td {
	padding: 5px 8px;
	text-align: left; 
	vertical-align: top;
}

table.newstable th {
	font-weight: normal;
	font-style: italic;
	white-space: nowrap;
}

table.newstable ul, table.newstable ol {
	margin: 0;
}

table.simpletable {
	border: 1px solid gray;
	border-collapse: collapse;
}

table.simpletable th {
	border: 1px solid gray;
	padding: 2px 5px;
}

table.simpletable td {
	border: 1px solid gray;
	padding: 2px 5px;
}

div#footer p {
	font-size: smaller;
	color: gray;
	/* margin-right: 25%; */
}

img.venue {
	/* margin-left: 2em; t r b l  */
	float: right; 
	margin: 1ex 0em 1ex 2em;
	border: 0;
}


/* nav: generic navigation style */
div.nav {
	font-size: 90%;
	margin: 0 auto;
	padding: 1ex 0 1.5ex 0;
	max-width: 45em;
	text-align: center;
	line-height: 200%;
	background: white;
	border: 1px solid gray;
	border-radius: 15px;
}
div.nav a.prev, div.nav a.curr, div.nav a.next, div.nav a.item {
	border: 2px solid #bbb;
	color: black;
	padding: 0 1.5em .25ex;
	margin: .5em;
	display: inline-block;
	height: 28px;
	vertical-align: middle;
	white-space: nowrap;
}
div.nav a.prev, div.nav a.next, div.nav a.item {
	text-decoration: none;
	font-weight: bold;
	background: #f4f4f4;
}
div.nav a.item {
	border-radius: 25px;
}
div.nav a.prev:hover, div.nav a.next:hover, div.nav a.item:hover {
	background: #e8e8e8;
}
div.nav a.prev:active, div.nav a.next:active, div.nav a.item:active {
	color: white;
	background: #404040;
}
/* dirty, dirty CSS border trickery for triangles :before and :after...
   see: https://stackoverflow.com/a/7091927 */
@media screen and (min-width: 1px) {  /* lock out pre-CSS3 browsers */
	div.nav a.prev:before {
		content: " ";
		position: absolute;
		top: -2px;
		left: -17px;
		border-color: transparent #bbb transparent transparent;
		border-style: solid;
		border-width: 17px 17px 17px 0;
		height: 0;
		width: 0;
	}
	div.nav a.next:after {
		content: " ";
		position: absolute;
		top: -2px;
		right: -17px;
		border-color: transparent transparent transparent #bbb;
		border-style: solid;
		border-width: 17px 0 17px 17px;
		height: 0;
		width: 0;
	}
	div.nav a.prev {
		border-left: none;
		border-radius: 0 25px 25px 0;
		position: relative;
	}
	div.nav a.next {
		border-right: none;
		border-radius: 25px 0 0 25px;
		position: relative;
	}
}