/*
   Autscape supplementary Cascading Style Sheet for wide screens
   By Martijn Dekker, loosely based on original by Peter Benie
   © 2008-2014, 2020 The Autscape Organisation
*/

html {
	overflow-y: scroll;  /* scrollbar always visible in FF */
}

body {
	padding: 0;
	margin: 0 auto;
	max-width: 1200px;
	position: relative;  /* for div#left positioning */
}

.printonly {
	display: none;
}

p#accesslinks {
	display: none;
}

div#gradient {
	margin: 0;
	padding: 0;
}

div#heading {
	margin: 0;
	/* 17em = (div#left width) + 1em */
	padding: 1ex 170px 0 17em;
	min-height: 115px;
	background: url("/image/swirl.png") no-repeat;
	background-position: right top;
	position: relative;  /* for div#logout positioning */
}
body.ireland div#heading {
	min-height: 180px;
	background-size: 180px;
	background-image: url("/image/logo-ireland.png");
}

h1 {
	padding: 10px 0 1ex 0;
	margin-bottom: 0;
}
body.ireland h1 {
	padding-top: 60px;
}

/* logout button [mcdutchie 2014-04-02] */
div#logout {
	white-space: nowrap;
	position: absolute;   /* relative to div#heading */
	top: 95px;
	right: 48px;
}
body.ireland div#logout {
	top: 153px;
}
div#logout a {
	color: black;
	text-decoration: none;
	font-weight: bold;
	font-size: 70%;
	padding: .5ex 1.5em .6ex;
	background: white;
	border: 3px solid rgb(246,134,21);
	border-radius: 20px;
}
body.ireland div#logout a {
	border-color: #4b8603;
}
div#logout a:hover {
	background: #eee;
}
div#logout a:active {
	color: white;
	background: black;
}

div#content {
	/* 15em = (div#left width) - 1em */
	margin: 0 0.5em 2ex 15em;  
	padding: 0 0 0.5ex 2em;
}

ul.spaced li, ol.spaced li {
	margin: 1.5ex .5em;
	padding: 0;
}

/* Use this to create extra blank space at the bottom of the page by simply
   inserting <div class="anchorpadding"/>. This is for pages with lots of
   anchor links, such as the sitemap, so that the browser will jump to the
   link the user expects even for the last pageful of links. (Styling this
   div is only needed for the 'wide' layout, as the 'narrow' layout already
   has something else under the content, namely the nav menu.) */
div.anchorpadding {
	margin: 40% 0;
	text-align: center;
	font-size: smaller;
	color: gray;
}
div.anchorpadding:after {
	content: "(this space intentionally left blank)";
}

div#accesshelp {
	float: right;
}

/* navigation bar */

div#left {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 16em;
	margin: 0px;
	padding-right: 1em;
}

/* block with inclining background, purely for navbar layout purposes
   (the background image is set in {blue,green,red}.css) */
div#leftbl {
	position: absolute; 
	left: 0px; top: 100%;
	height: 5%;
	width: 16em;
	padding-right: 1em;
	margin: 0px;
}

div#leftnav {
	position: relative; 
	left: 0em; top: 0ex;
	margin: 0px 1.5em 0px 0px;
	padding: 1.5ex 0px 1.5ex 0px;
	font-size: 95%;
}

div#leftnav h2 {
	font-size: 120%;
	padding: 0px;
	margin: 1ex auto 0px auto;
	text-align: center;
	letter-spacing: 3px;
	text-transform: uppercase;
}

div#leftnav ul {
	list-style-type: none;
	text-align: left;
	padding: 0;
	margin: 0 0 0 .5em;
	font-size: 90%;
}

div#leftnav ul ul {
	margin-left: 1em; /* each recursive <ul> is indented 1em ... */
	font-size: 95%;	    /* ...and loses 5% in font-size to compensate */
}

div#leftnav li {
	margin: 0;
	padding: 1px 0px 1px 0px;
}

div#leftnav a {
	text-decoration: none;
	display: block;
	margin: 0;
	padding: 0.5ex 0.5em;
}

div#leftnav a.navopen {
	font-weight: bold;
	font-style: italic;
}

div#leftnav a.navopen:after {
	content: ':';
}

/* colour scheme switcher */

div#colourscheme {
	font-size: 90%;
}
ul#stylelist {
	margin: 0px auto !important;
	width: 11em;
	border: 1px solid gray;
}
ul#stylelist li {
	margin: 0;
	padding: 0;
	text-align: center;
	letter-spacing: .2em;
}
ul#stylelist li:nth-child(n+2) {
	border-top: 1px solid gray;
}
a#styleswitcher_blue {
	color: black;
	background: #aaf;
}
a#styleswitcher_green {
	color: black;
	background: #afa;
}
a#styleswitcher_red {
	color: black;
	background: #faa;
}
a#styleswitcher_plain {
	color: black;
	background: white;
}

/* Breadcrumbs (test) */
div#breadcrumbs {
	font-size: 80%;
	padding: 1ex 1em 3ex 21.4em;
}
div#breadcrumbs a {
	background: none;
	padding: 0;
}

/* Table of contents */
div#toc {
	font-size: 80%;
	padding: 1ex 1em;
	margin-top: 1ex;
	background: white;
	border: solid 1px gray;
	border-radius: 15px;
	margin-left: 1em;
}
@media (min-width: 900px) {
	div#toc {
		width: 30%;
		float: right;
	}
}
div#toc ul {
	margin-left: -2em;
}
div#toc ul li.h3 {
	margin-left: 1em;
	list-style-type: circle;
}
div#toc ul li.h4 {
	margin-left: 2em;
	list-style-type: square;
}
div#toc ul li.h5 {
	margin-left: 3em;
	list-style-type: circle;
}
div#toc ul li.h6 {
	margin-left: 4em;
	list-style-type: square;
}

/*
  Support less-wide screens (768-1024px) by using a narrower left bar like in
  the old layout, leaving slightly more width for the content. These overrides
  are so few that it doesn't seem worth creating a separate style-semiwide.css
  file to maintain and sync with semi-wide.css.
*/
@media screen and (max-width: 1024px) {
	div#left, div#leftbl {
		width: 13em;
	}
	div#heading {
		/* 14em = (div#left width) + 1em */
		padding-left: 14em;
	}
	div#content {
		/* 12em = (div#left width) - 1em */
		margin-left: 12em;  
	}
	div#breadcrumbs {
		padding-left: 17.6em;
	}
}