/*
 CSS for John and Linda Davies's Web site
 (c) John Davies 2000-2011
 10/6/2002:  Converted all selectors to lower case in view of XHTML 1.0 case sensitivity.
 10/6/2002:  Converted some remaining colour names to #RRGGBB values.
 Oct 2002 :  Created Holtable coloration.
 Dec 2002 :  Created rightcontent and leftcontent.
 Feb 2003 :  Added uline property
 Feb 2003 :  Added transparent b/g color to stop XHTML Validator bleating about background colors missing.
 Mar 2003 :  Adjusted font sizes following site conversion to XHTML
 Apr 2003 :  Changed to CSS-based instead of table-based positioning for holiday photos & some others.
 Jan 2005 :  Changed from absolute to relative font-sizes - recommended by WAI.
 Jul 2005 :  Numerous small amendments.
 Mar 2010 :  Used max-width on the body to prevent extra-wide screens spreading the text out too wide.  Max-width now widely supported.
 Mar 2011 :  Supported a div on main index.htm and holidays.htm to prompt users to upgrade from IE6.
 Aug 2011 :  Added width to body to give a small margin on mobile devices with small screens.  Removed assorted Tan hacks for IE5.0 and IE5.5.
 Oct 2011 :  Added in lots of styles to support tabbed interface, derived from A List Apart's venerable "Sliding Doors" styles and 'tabber.js' by Patrick Fitzgerald.
 Jan 2012 :  Added further support for HTML5/CSS3 elements, including Google's HTML5 shim code for IE lt 9.
 Mar 2012 :  Some extra code to support small-screen sizes (eg iPhone).  Contd 2020 and 2021...
 Jan 2013 :  Some extra stuff to support new h1 topbar and breadcrumb trail.
 Mar 2013 :  Used Google Web Fonts to make headings look different.
 Sep 2016 :  Added "span.emboldened" to provide bold text in my body text font, which doesn't seem to want to appear bold with <strong>.
 */

/* Google Web fonts:   */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic|Overlock:900italic,900);

* {
	margin: 0;
	padding: 0;
}

/*  "Meyer Reset" ******************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1.4;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* Now redefine sub and sup: */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}


/* End "Meyer Reset" **************************************************/

/* For HTML5 (and older browsers with Google's HTML5 shim js code):   */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
/* == end of html5 code ==================*/

em {
	font-style: italic;
}

img {
	border: 0;
}

html {
	height: 99.9%
}

body {
	text-align: left;
	background-color: #888;
	color: #333;
	width: 98%;
	margin: auto;
	white-space: normal;
	font-family: "Open Sans", Arial, Helvetica, "Liberation Sans", sans-serif;
	font-size: 96%;
	font-weight: normal;
	font-style: normal;
	max-width: 1024px;
	height: 100%;
	min-height: 100%;
	max-height: 100%;
}

div.mainbk {
	background-color: #f7f7cf;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #ffff80 #000 #000 #ffff80;
	border-radius: 0.5em;
	padding: 0em 1em;
	margin: 1px 0px;
	box-shadow: 4px 4px 3px #444;
}

header {
	width: 100%;
}

h1, h2, h3, h4, h5 {
	font-family: Overlock, Georgia, "DejaVu Serif", serif;	/* DejaVu Serif for Linux Mint */
}

h1 a {
	text-decoration: none;
}/* Remove underline if anchor is in a h1 - mainly for the RSS feed. */

div.topbar {
	margin: 0.5em 0 0 0;
	border: 4px groove #d8d8e8;
	border-radius: 0.5em;
	background-image: url(images/atlas.gif);
	background-repeat: no-repeat;
	background-position: 1.5% center;
}
div.topbar h1 {
	width: 90%;
	font-size: 220%;
	font-weight: 900;
	font-style: italic;
	color: #0000cc;
	background-color: transparent;
	text-align: left;
	padding: 0.25em 0em 0.25em 1em;
	margin: 0em 0em 0em 4%;
	text-shadow: 2px 2px 3px #888;
	border: none;
}

/* For cgi pages which don't have topbar: */
div.mainbk h1 {
	font-size: 220%;
}

h2 {
	font-size: 140%;
	font-style: italic;
	color: #000099;
	background-color: #ccc;
	text-align: left;
	width: auto;
	padding-left: 1em;
	margin: 0px 1em;
	margin: 1.5em 0em 1em 0em;
	border: 1px solid;
	border-radius: 0.25em;
	border-color: #fff #666 #666 #fff;
}

h3 {
	font-size: 140%;
	font-style: italic;
	text-align: left;
	color: #000099;
	background-color: transparent;
	margin: 1.0em 0px 0.25em 0px;
}

h4 {
	font-size: 125%;
	font-style: normal;
	text-align: left;
	color: #000099;
	background-color: transparent;
	margin: 0em 0px 0.25em 0px;
}

h5 {
	font-size: 125%;
	font-style: italic;
	text-align: left;
	text-align: justify;
	background-color: transparent;
	margin: 0px 0px 0em 1%;
	color: #000099;
}

h6 {
	font: normal normal 100% "Times New Roman", Roman, serif;
	text-align: justify;
	background-color: transparent;
	margin: 0px 0px 0em 10%;
}

p {
	text-align: justify;
	background-color: transparent;
	margin: 0px 0px 1em 0px;
}

div.breadcrumb {
	/*	position: relative;
	 top:-1.75em; */
	margin: 0.5em 0em 0.5em 1em;
	font-size: 90%;
	font-weight: bold;
}
div.breadcrumb a {
	margin: 0em 0.5em;
}

div.breadcrumb p:before {
	content: "You are here:  ";
}

p.paddown {
	padding-top: 1em;
}

ul {
	background-color: transparent;
	margin: 0px 0px 1em 0px;
}

ul li {
	text-align: justify;
	background-color: transparent;
	margin: 0px 0px 0.75em 2em;
}

ul.sitemap li {
	margin: 0px 0px 1em 1em;
}

ul.sitemap li a {
	margin: 0px 0px 1em 0em;
}

ul.sitemap li ul li {
	margin: 0px 0px 1em 1em;
}

ul.sitemap li ul li ul li {
	margin: 0px 0px 0em 1em;
}

ul {
	list-style-type: disc;
	margin: 0px 0px 1em 1em;
}
ul ul {
	list-style-type: circle;
	margin: 0px 0px 1em 2em;
}
ul ul ul {
	list-style-type: square;
	margin: 0px 0px 1em 2em;
}

ol {
	list-style-type: upper-alpha;
}/* A B C D E etc. */
ol ol {
	list-style-type: decimal;
}/* 1 2 3 4 5 etc. */
ol ol ol {
	list-style-type: lower-roman;
}/* i ii iii iv v etc. */

ol.photolist {
	list-style-type: decimal; /* 1 2 3 4 5 etc. */
	margin-left: 2em;
}

ol li {
	margin: 0px 0px 0.5em 0px;
	padding-left: 0.5em;
	list-style-type: decimal; /* 1 2 3 4 5 etc. */
}

/*  Supposed to center a table according to WDG - but it does not seem to work  */
table {
	margin-left: auto;
	margin-right: auto;
}

a {
	font-weight: bold;
	background-color: transparent;
}

a:link {
	color: #00f;
	background-color: transparent;
}/* unvisited link */
a:visited {
	color: #900;
	background-color: transparent;
}/* visited links */
a:hover {
	background-color: #0f3;
}/* roll-over colour */
a:active {
	color: #900;
	background-color: transparent;
}/* active links */

nav#menuclass {
	margin-bottom: 1em;
}
p#menuclass, nav#menuclass {
	text-align: center;
}
p#menuclass a, nav#menuclass a {
	padding: 1px 1em;
	margin: 5px -5px 0px 0px;
	border: 1px #bbb solid;
	font-weight: bold;
	text-decoration: none;
	line-height: 1.4em;
}
p#menuclass a:link, nav#menuclass a:link {
	color: #00f;
	background-color: transparent;
}
p#menuclass a:visited, nav#menuclass a:visited {
	color: #00f;
	background-color: transparent;
}
p#menuclass a:hover, nav#menuclass a:hover {
	background-color: #0f3;
}

.indent1 {
	margin-left: 3%;
}
.indent2 {
	margin-left: 6%;
}
.indent3 {
	margin-left: 9%;
}
.centred {
	text-align: center;
}
.limeborder {
	border: 1px solid #00ff00;
}
acronym {
	cursor: help;
	border-style: dotted;
	border-width: 1px;
}
acronym.highlight {
	background-color: yellow;
}
abbr {
	cursor: help;
	border-style: dotted;
	border-width: 1px;
}
span.emboldened {
	font-weight: bold;
}

/* Pullquote styles: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div.pullquote {
	width: 25%;
	background: #daa;
	float: right;
	margin: 0.5em 0em 0.5em 1em;
	padding-bottom: 0.25em;
	border-bottom: #daa solid 8px;
	border-radius: 8px;
	box-shadow: 4px 4px 3px #888;
	color: #000;
}
div.pullquote p.quote {
	margin: 0.75em;
	font-family: Verdana, Arial, Helvetica, "Liberation Sans", sans-serif;
	font-size: 85%;
	font-weight: bold;
	text-align: left;
	background-image: url(images/quotes_end.gif);
	background-repeat: no-repeat;
	background-position: bottom right;
	padding-right: 2em;
}
div.pullquote p.quote:before {
	content: url(images/quotes_start.gif);
}

div.pullquote p.source:before {
	content: "- ";
}

div.pullquote p.source {
	font-family: Verdana, Arial, Helvetica, "Liberation Sans", sans-serif;
	font-size: 70%;
	font-weight: bold;
	text-align: right;
	margin-bottom: 0.5em;
	margin-right: 5em;
}
/* End of Pullquote styles: ~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* nav links:  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div.toc, nav.toc {
	border: 1px solid #000;
	border-radius: 0.25em;
	position: relative;
	float: right;
	margin-top: 1em;
}

div.tocnew, nav.tocnew {
	display: none;
}

/*header {
 background-color:#dc0;
 margin: 0em -1em 1em -1em;
 padding: 0.25em 0.25em;
 }
 */
header nav.toc {
	margin-top: 0em;
}

/* create a button look for links */
div.toc a:link, div.toc a:visited, nav.toc a:link, nav.toc a:visited {
	display: block;
	background-color: #c8c8c8;
	border: solid 2px;
	border-color: #aaa #333 #333 #aaa;
	color: #000;
	font-weight: bold;
	font-size: 80%;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	line-height: 1.75;
	width: 9.5em;
	margin: 2px;
}

div.toc a:hover, nav.toc a:hover {
	background-color: #666;
	color: #fff;
}

/* depress effect on click */
div.toc a:active, div.toc a:focus, nav.toc a:active, nav.toc a:focus {
	border-color: #333 #ccc #ccc #333;
	letter-spacing: normal;
}

footer {
	margin: 0em 0em 0.5em 0em;
	padding: 0.25em 0em 0em 0.5em;
	border-top: 1px solid black;
	font-size: 80%;
}
/* End of nav links ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* What's New page styles: ~~~~~~~~~~~~~~~~~~~~~~~~~~*/
table.whatsnew {
	border: 1px #aaa solid;
	border-radius: 0.3em;
	margin: 1em 6% 1em 5%;
	table-layout: fixed;
}
table.whatsnew td {
	border: 1px #aaa solid;
}

table.whatsnew td.wncol1 {
	font-weight: bold;
	width: 11%;
	min-width: 6em;
}

table.whatsnew td ul {
	margin: 0.5em 0.5em 0.5em 2em;
}
table.whatsnew td li {
	margin: 0.5em;
	text-align: justify;
	color: #000000;
}
/* End of What's New page styles  ~~~~~~~~~~~~~~~*/

/*  Bit of a laugh for first letter of each para. */
.dropcap:first-letter {
	font-size: 125%;
	color: #933;
	background-color: #fff6eb;
}
.uline {
	text-decoration: underline;
}
.nodisplay {
	display: none;
	color: white;
	background-color: white;
}
.hidden {
	display: none;
}
span[lang] {
	font-style: italic;
}/* Italicise foreign words */
span.warnsome {
	font-size: 110%;
	font-style: italic;
	font-weight: bold;
}

hr {
	margin: 0.5em 0em;
}

/* Styles for PAF pages: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
blockquote {
	margin: 0.25em 0em 1em 1em;
}
/* End of styles for PAF pages ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Styles for photos/videos:  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
div.phot {
	width: 98%;
	margin: 3em auto;
	display: table;
	clear: both;
}

div.photi {
	display: table-cell; /* NB: this upsets Opera -o-transform:rotate on ourhome.htm.  Doesn't seem to make a difference elsewhere. */
	vertical-align: middle;
	text-align: center;
	/*	width:100%;*/
}

div.photi img {
	background-color: #fff;
	padding: 10px;
	border: 1px solid #888;
	width: 98%;
	height: auto;
	box-shadow: 4px 4px 3px #888;
}

div.photp {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	width: 30%;
}

div.photp p {
	text-align: center;
	float: left;
	margin-left: 2em;
	margin-right: 2em;
}

div.photp p.justl {
	text-align: justify;
	margin-left: 0em;
}

div.photp p.justr {
	text-align: justify;
	margin-right: 0em;
}

div.photp p.tacl {
	text-align: center;
	margin-left: 0em;
}

div.photp p.tacr {
	text-align: center;
	margin-right: 0em;
}

.holpic {
	border: 1px solid #000000;
}

.photwide {
	clear: both;
	margin-bottom: 4em;
	text-align: center;
}

.photwide img {
	background-color: #fff;
	color: #111111;
	padding: 10px;
	border: 1px solid #888;
	clear: both;
	width: 98%;
	height: auto;
	box-shadow: 4px 4px 3px #888;
}

.photwide a:link {
	color: #00f;
	background-color: transparent;
	cursor: default;
}

.photwide a:visited {
	color: #900;
	background-color: transparent;
	cursor: default;
}

.photwide p, .photwide figcaption {
	text-align: center;
	width: 80%;
	margin: auto;
	margin-bottom: 0.5em;
}

.phot800, .phot700, .phot600, .phot522, .phot500, .phot480, .phot400, .phot300 {
	text-align: center;
	margin: 4em auto;
}

.phot900 img {
	max-width: 900px;
}

.phot800 img {
	max-width: 800px;
}

.phot700 img {
	max-width: 700px;
}

.phot600 img {
	max-width: 600px;
}

.phot522 img {
	max-width: 522px;
}

.phot500, .phot500 img {
	max-width: 500px;
}

.phot480 img {
	max-width: 480px;
}

.phot400 img {
	max-width: 400px;
}

.phot300 img {
	max-width: 300px;
}

/* Phot2 styles */
div.phot2ir, div.phot2il {
	display: table;
	width: 98%;
	margin: 2em auto;
}
div.phot2idiv {
	display: table-cell;
	width: 60%;
}
div.phot2il div.phot2idiv {
	text-align: right;
	padding-right: 1em;
}
div.phot2ir div.phot2idiv {
	text-align: left;
	padding-left: 0em;
}
div.phot2pdiv {
	display: table-cell;
	vertical-align: middle;
	width: 40%;
	padding: 0em;
}
div.phot2il div.phot2pdiv {
	padding-left: 1em;
}
div.phot2ir div.phot2pdiv {
	padding-right: 1em;
}
div.phot2pdiv p {
	vertical-align: middle;
	text-align: center;
}
div.phot2idiv img {
	width: 100%;
	height: auto;
	border: 1px solid #888;
	padding: 10px;
	background-color: white;
	box-shadow: 4px 4px 3px #888;
}
/* end of phot2 styles */

figure a img.phot500 {
	margin: 0px auto;
}

/* Put a divider between photos, except for at the top and bottom  */
figure.photwide {
	padding: 1em 0em 1em 0em; 
	border-bottom: 2px dotted #888;
	margin-bottom: 0.5em;
}
figure.photwide:last-of-type {
	border-bottom: 0px;
}

div.photscroll {
	width: 100%;
	overflow: auto;
	clear: left;
}

div.photscroll img {
	width: auto;
	margin-bottom: 0em;
}

.transpdiv {
	background-color: transparent;
	text-align: center;
	clear: both;
	margin: 2em auto;
	border: none;
}

.transpdiv img, .transpdiv fig {
	background-color: transparent;
	border: none;
	margin: 0em auto;
	width: 98%;
	height: auto;
}

.transpdiv p, .transpdiv caption {
	text-align: center;
}

div.youtubevid, #ytplayer {
	text-align: center;
	clear: both;
	margin-bottom: 2em;
}

div.youtubevid p {
	text-align: center;
}

div.youtubevid embed {
	border: 1px solid #666;
}
/* End of styles for photos  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.backto {
	clear: both;
	padding-top: 0.5em;
	text-align: left;
}

.newphotnav {
	clear: both;
	text-align: center;
	margin-bottom: 1em;
	margin-top: -0.75em;
}

.newprevlink, .newnextlink, .newbackto {
	display: inline-block;
	width: 30%;
	text-align: center;
	margin: 0em auto 0em auto;
	border: 1px solid #777;
	border-radius: 0.35em;
	padding: 0.5em;
	box-shadow: 4px 4px 3px #aaa;
}

.newprevlink span, .newnextlink span {
	color: #ccc;
}

.newbackto a::before {
	content: "▲ ";
	font-size: 120%;
}

.newprevlink {
	float: left;
}
.newnextlink {
	float: right;
}

.newprevlink a::before, .newprevlink span::before {
	content: "◄ ";
	font-size: 120%;
}

.newnextlink a::after, .newnextlink span::after {
	content: "►";
	font-size: 120%;
}

p.cl, div.cl {
	clear: left;
}

#rightcontent {
	position: absolute;
	float: right;
	right: 5%;
	top: 1%;
	margin-top: 10pt;
	z-index: 2;
	width: 20%;
	background: #eee;
	border: 1px #000 solid;
	padding: 5px 5px 5px 5px;
	text-align: center;
	font-size: 80%;
}
#leftcontent {
	position: absolute;
	float: left;
	left: 3%;
	top: 4%;
	z-index: 2;
}

div.googlemap {
	float: right;
	margin: 0px 0px 0.75em 2em;
	text-align: center;
	border: 1px solid black;
	padding-bottom: 0.5em;
}
div.googlemap a {
	color: #0000FF;
	text-align: left;
	font-size: 75%;
}

img.insertpicright {
	float: right;
	margin: 0px 0px 0.75em 2em;
	border: 1px solid black;
	padding: 0px 0px 0px 0px;
	box-shadow: 4px 4px 3px #888;
}

/* Searchbox Section ~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Styles called from home page, holidays, 404 and search results page */
div#searchbox {
	width: 45%;
	border: double #666666 4px;
	border-radius: .4em;
	font-size: 90%;
	vertical-align: middle;
	margin: 0px auto 0.75em;
	text-align: center;
}

div#searchbox p {
	vertical-align: middle;
	margin-top: 0.5em;
	text-align: center;
}


div#searchbox input[type="text"] {
	background: url(images/search-dark.png) no-repeat 7px 4px #fff;
	vertical-align: middle;
	padding: 3px;
	border: 2px solid;
	border-color: #555 #aaa #aaa #555;
	border-radius: 2em;
	padding-left: 2em;	
}

div#searchbox input[type="submit"] {
	vertical-align: middle;
	padding: 3px;
	border: 2px solid;
	border-color: #fff #777 #777 #fff;
	border-radius: .5em;
	background-color: #ccc;
}

div#searchbox a {
	font-size: 85%;
}

div#searchbox select {
	display: none;
}
/* End Searchbox Section ~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* RSS Feed ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div.rssitems {
	margin: 3em 0;
	border-top: 1px solid #c96;
}

div.rssitems a {
	font-size: 120%;
}
/* End RSS Feed ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

p.latenews {
	border: 5px red double;
	border-radius: 0.25em;
	padding: 1em;
	color: red;
	text-align: center;
	font-style: italic;
	font-weight: bold;
	font-size: 110%;
}

.cb {
	clear: both;
	height: 1px;
}

div.cb {
	clear: both;
}

div.plsupg {
	clear: both;
	width: 70%;
	border: 5px red double;
	padding: 0.75em;
	margin: 0 15% 1em 15%;
	color: red;
	text-align: center;
	font-style: italic;
	font-weight: bold;
}

/* Cookie Law question         -------------------------- */
div#cookieq {
	border: 4px dotted black;
	background: #ff8888;
	padding: 1%;
}
div#cookieq button {
	display: inline;
	font-weight: bold;
	font-size: 125%;
	background-color: #8f8;
	padding: 0.25em 0.25em 0.5em 0.25em;
	margin-left: 2em;
	border-radius: .5em;
}
div#cookieq img {
	margin: 0em 0.5em 0em 0.5em;
	position: relative;
	top: 0.15em;
}
/* End of Cookie Law question  -------------------------- */

/* Start of 'Please turn on JavaScript' text  -------------------------- */
div.jsnoton {
	border: double;
	border-color: #833;
	margin-bottom: 0.5em;
}
div.jsnoton p {
	color: #833;
	text-align: center;
	margin: 0.5em;
	font-weight: bold;
}

/* End of 'Please turn on JavaScript' text    -------------------------- */

.xsmall {
	font-size: x-small;
}

.clearer {
	clear: both;
	display: block;
	height: 1px;
	margin-bottom: -1px;
	font-size: 1px;
	line-height: 1px;
}

div#calareaid {
	display: none;
}
div#calareaid.calareavisible {
	display: block;
}

/* Search2.php styles: */
table#phptable {
	border-collapse: collapse;
}
table#phptable td {
	border-top: 1px solid black;
}
table#phptable th {
	border: 1px solid black;
	padding: 0px 1em 0px 1em;
}
table#phptable td.nooline {
	border-top: 0px;
}

/*Amenddvd.php: */
form#insform p.lbl {
	width: 6em;
	display: inline-block;
	text-align: right;
	margin: 0px 0.25em 0.5em 0px;
}
p.dvdinserr {
	color: #FF0000;
	font-weight: bold;
	font-size: 120%;
}

/* The following styles add text wrap-around goodness.  Feb 2016 */
.float_right_text_wrapped, .float_left_text_wrapped {
	display: none;
}/* Hides the picture if the browser doesn't support @supports: IE and Edge, I'm looking at you. Feb 2016 */
@supports (shape-image-threshold: 0.5) {		/* Only turns the picture on if the browser supports @supports AND CSS Shapes.
 Image must have transparent section to flow round - ie a png not a jpg  */
.float_right_text_wrapped, .float_left_text_wrapped {
	display: block;
	width: 40%;
	/*  NB: you will need a [style="shape-outside: url('path to/IMG_9999.png')"] property in your <img> tag, eg: Maldives 2015:  */
	shape-image-threshold: 0.5;
	shape-margin: 20px;
}
/* If already in columns, make the images slightly bigger  */
.columns .float_right_text_wrapped, .columns .float_left_text_wrapped {
	width: 50%;
}

.float_right_text_wrapped {
	float: right;
}
.float_left_text_wrapped {
	float: left;
}
}   /*end "@supports" */

.columns {/*  See also '@media screen and (max-width: 600px)' section at the end  */
	-moz-columns: 2 auto;
	-moz-column-gap: 3em;
	-moz-column-rule: 1px solid #000;
	-webkit-columns: 2 auto;
	-webkit-column-gap: 3em;
	-webkit-column-rule: 1px solid #000;
	columns: 2 auto;
	column-gap: 3em;
	column-rule: 1px solid #000;
}

/* The next few lines are for hover-over tooltips: */
/* Tooltip container */	
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; 
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 5px;
  border-radius: 6px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  /* For a tooltip above: */
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
  
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
/* End of Tooltip text */


/*--------------------------------------------------
 From here on is tabber styles .....:*/
/*--------------------------------------------------
 REQUIRED to hide the non-active tab content.
 But do not hide them in the print stylesheet!
 --------------------------------------------------*/
.tabberlive .tabbertabhide {
	display: none;
}

/*--------------------------------------------------
 .tabber = before the tabber interface is set up
 .tabberlive = after the tabber interface is set up
 --------------------------------------------------*/
/* VS Code objects to this empty .tabber ruleset.  Commenting it out doesn't seem to affect anything.
.tabber {
}
*/
.tabberlive {
	margin: auto;
	max-width: 1024px;
	background: transparent;
}

/*--------------------------------------------------
 ul.tabbernav = the tab navigation list
 li.tabberactive = the active tab
 --------------------------------------------------*/
ul.tabbernav {
	margin: -1.5em 0px 0px 0px;
	padding: 10px 10px 14px 10px;
	list-style: none;
	font-weight: bold;
	/*	font-size: 90%;  */
	height: 0px;
}

ul.tabbernav li {
	float: left;
	background: url("images/left.gif") no-repeat left top;
	margin: 0;
	padding: 0 0 0 9px;
	height: 25px;
	position: relative;
	top: 1px;
	border-bottom: 1px #aaa solid;
}

ul.tabbernav li a {
	float: left;
	margin: 0;
	background: url("images/right.gif") no-repeat right top;
	padding: 3px 15px 6px 6px;
	text-decoration: none;
	font-weight: bold;
	color: #765;
	height: 16px;
}

ul.tabbernav li a:link {
	color: #448;
}
ul.tabbernav li a:visited {
	color: #667;
}

ul.tabbernav li a:hover {
	color: #f33;
}

ul.tabbernav li.tabberactive {
	background-image: url("images/left_on.gif");
	position: relative;
	top: 1px;
	height: 25px;
	border-bottom: 1px white solid;
}

ul.tabbernav li.tabberactive a {
	background-image: url("images/right_on.gif");
	color: #333;
	height: 17px;
	border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover {
	color: #f33;
	border-bottom: 1px solid #fff;
}

/*--------------------------------------------------
 .tabbertab = the tab content
 Add style only after the tabber interface is set up (.tabberlive)
 --------------------------------------------------*/
.tabberlive .tabbertab {
	clear: left;
	/*background: transparent;*/
	background: #fafafa;
	padding: 1em;
	margin-top: 11px;
	margin-bottom: 0px;
	border: 1px solid #aaa;
	border-radius: 0.5em;
	left: 0px;
	/* If you don't want the tab size changing whenever a tab is changed
	 you can set a fixed height: */
	height: 625px;
	/*	height: calc(100% - 2em) !important;  doesn't work  */
	/*	height: 90% !important; */

	/* If you set a fixed height set overflow to auto and you will get a
	 scrollbar when necessary: */
	overflow: auto;
}

.tabberlive .photos {
	background-image: url("images/old camera.gif");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 31%;
	background-size: 31vmin;
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
	display: none;
}
/*
 .tabberlive .tabbertab h3 {
 display:none;
 }
 */

/* Example of using an ID to set different styles for the tabs on the page
 .tabberlive#tab1 {
 }
 .tabberlive#tab2 {
 }
 .tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
 }
 */

.tabbertab  ol {
	list-style-type: decimal; /* 1 2 3 4 5 etc. */
	margin: 0.25em 4% 1em 5%;
}

/*  End of tabber styles 				*/

/* PRINT STYLES */
@media print {
	/* Remove menu buttons and background and margins when printed */
	body {
		background-color: #FFFFFF;
		background-image: none;
		color: #000000;
		margin-left: 0%;
		margin-right: 0%;
	}
	div.mainbk {
		border: none;
		box-shadow: none;
	}
	#rightcontent {
		display: none;
	}
	/* Change printed layout by removing tabbed interface: */
	.tabberlive .tabbertabhide, .tabberlive .tabbertab {
		display: block;
		height: auto;
		border: none;
	}
	.tabberlive .tabbertab h2, h2 {
		display: block;
		margin-top: 0em;
		border: 1px solid black;
	}
	ul.tabbernav {
		display: none;
	}
}

/* RESPONSIVE DESIGN SECTION FOR @MEDIA QUERIES  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media screen and (max-width: 925px) and (orientation: portrait) {
	body {
		font-size: 85%;
	}
	div.mainbk {
		padding: 0.5em;
		margin: 0em;
	}
	div.phot2ir div.phot2idiv img {
		position: relative;
		left: -0.5em;
	}
	h1 {
		font-size: 90%;
		line-height: 1.2;
	}
	h2 {
		font-size: 125%;
		line-height: 1.2;
		margin-top: 1em;
	}
	figure.photwide {
		margin-bottom: 1em;
	}
	figure.photwide figcaption {
		font-size: 90%;
		line-height: 1.2;
	}
	ul.tabbernav {
		font-size: 90%;	/* tabbertab navigation tab text size*/
	}
}

@media screen and (max-width: 600px) {
	div.mainbk {
		padding: 0.5em;
		margin: 0em;
	}
	table.whatsnew {
		margin: 1em 1% 1em 0%;
		table-layout: fixed;
	}

	ul.sitemap li {
		margin: 0px 0px 0em 0.5em;
	}

	ul {
		margin: 0px 0px 1em .5em;
	}
	ul ul {
		margin: 0px 0px 1em .5em;
	}
	ul ul ul {
		margin: 0px 0px 1em .5em;
	}
div.breadcrumb {
	margin: 0.75% 0;
	padding: 0em;
}
div.breadcrumb a {
	margin:0.75% 0.25%;
	padding: 0;
}

	div.topbar {
		background-image: none;
		border: none;
	}
	div.topbar h1, h1 {
		font-size: 150%;
		width: 95%;
		margin-left: 0%;
		padding: 0;
		margin: 0;
	}
	h1 {
		line-height: 1.2;
	}
	
	h2 {
		font-size: 130%;
		line-height: 1.2;
		margin-top: 1em;
	}
	figure.photwide {
		margin-bottom: 2em;
	}
	figure.photwide figcaption {
		font-size: 100%;
		line-height: 1.4;
	}

	.photwide img, div.phot img {
		width: 96%;
		padding: 4px;
	}

	div.photscroll {
		width: 100%;
		overflow: auto;
		clear: left;
	}
	div.photscroll img {
		width: auto;
		margin-bottom: 0em;
	}

	div.rotphot .phot500 {
		padding: 4px;
	}
	ul.tabbernav {
		font-size: 90%;	/* tabbertab navigation tab text size*/
	}
	.newbackto, .newprevlink, .newnextlink {
		font-size: 80%;
		line-height: 1.2em;
		width: 25%;
	}
	.newprevlink a::before, .newnextlink a::after, .newbackto a::before {
		font-size: 100%;
	}

	.columns {
		-moz-columns: 1 auto;
		-webkit-columns: 1 auto;
		columns: 1 auto;
	}

}/* End of @media screen and (max-width: 600px)  */

@media screen and (max-height: 900px) {
	div.photscroll img {
		height: 450px;   /*Bodge to stop it being higher than the screen height.  Works out at about 2/3 of a normal panorama*/
	}
}	 /*End of @media screen and (max-width: 1280px)*/

/* High PPI Devices -----------
 Can't use this yet as I don't have a retina display-type device to test on:

 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (-o-device-pixel-ratio: 3/2),
 only screen and (min-device-pixel-ratio: 1.5) {
 //high resolution stuff goes here:
 body {	max-width: 100%;}

 }
 */
/* END OF RESPONSIVE DESIGN SECTION FOR @MEDIA QUERIES  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*  End of style sheet  */