/* xmas_2023.css - UPDATED 12 December 2023
/*.xmas_2020 edits 2020-11-10*/
/* new_xmas_2018 - modified from album_2014_rem and xmas_2015 */
/* For 1920px screen BUT Responsive */

/* 
START OF html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17	Author: Richard Clark - http://richclarkdesign.com
Default values for all HTML5 elements to be certain they are defined by the author, not the browser
My notes on selectors and combinators, such as the first line	look at www.http://reference.sitepoint.com/css for more info.
NEW SELECTOR <main> added June 2014	AND SOME OTHER ADDITIONS BY ME
*/
* { border:0 none; margin:0; padding:0; opacity:1; } /* "*" - the universal selector - matches all elements defined below. */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, main, header, hgroup, menu, nav, section, summary, time, mark, audio, video
{ outline:0; font-style:normal; font-weight:normal; vertical-align:baseline; text-indent:0; text-decoration:none; text-shadow:0 0 0 transparent; }
/* Tell the browser to render HTML 5 elements as block, NOT inline */
main, header, nav, article, aside, section, footer, details, figcaption, figure, hgroup, menu { display:block; }
img, object, embed, audio, video { max-width:100%; height: auto; }	/* MEDIA - fluid images - never flow off edges of screen */
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
a { font-size:100%; vertical-align:baseline; background-color:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration:line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border-top:1px solid #999999; margin:1rem 0 0.5rem 0; }
input, select { vertical-align:middle; }
/* 				END OF html5doctor.com Reset Stylesheet MODIFIED BY ME*/

/*				START OF My RESPONSIVE DESIGN Stylesheet for Family Photo Album, started 16 August 2014 */

html { font-size:100%; overflow-y:scroll; }
/* font-size:100%; - IMPORTANT for older browsers which do not support @media AND font-size:100%; to set base 1em=16px on most browsers */

/*Most media features can be prefixed with "min-" (= "greater or equal to" ) or "max-" (= "less than or equal to" ).
Only ONE of the following conditions will be TRUE */

@media screen and (min-width: 100px) and (max-width: 359px) { html { font-size: 18.6979%; } }	/* 360/19.20=18.75% */
@media screen and (min-width: 360px) and (max-width: 400px) { html { font-size: 20.8333%; } }	/* 400/19.20 */
@media screen and (min-width: 401px) and (max-width: 500px) { html { font-size: 26.0417%; } }	/* 500/19.20 */
@media screen and (min-width: 501px) and (max-width: 600px) { html { font-size: 31.25%; } }	/* 600/19.20=31.25% */
@media screen and (min-width: 601px) and (max-width: 640px) { html { font-size: 33.3333%; } }	/* 640/19.20=33.33% */
@media screen and (min-width: 641px) and (max-width: 768px) { html { font-size: 40%; } }	/* Screens between 641px and 768px wide - 768/19.20=40% */
@media screen and (min-width: 769px) and (max-width: 800px) { html { font-size: 41.6667%; } }
@media screen and (min-width: 801px) and (max-width: 960px) { html { font-size:50%; } }
@media screen and (min-width: 961px) and (max-width: 1024px) { html { font-size:53.3333%; } }
@media screen and (min-width: 1025px) and (max-width: 1136px) { html { font-size:59.1667%; } }	/* 1136/19.20=59.167% */
@media screen and (min-width: 1137px) and (max-width: 1280px) { html { font-size:66.6667%; } }
@media screen and (min-width: 1281px) and (max-width: 1366px) { html { font-size:71.1458%; } }
@media screen and (min-width: 1367px) and (max-width: 1440px) { html { font-size:75%; } }
@media screen and (min-width: 1441px) and (max-width: 1600px) { html { font-size:83.3333%; } }	/* 1600/19.20=83.33% */
@media screen and (min-width: 1601px) and (max-width: 1920px) { html { font-size:100%; } }		/* Designed for 1920px screen */
@media screen and (min-width: 1921px) and (max-width: 2550px) { html { font-size:132.8125%; } }
@media screen and (min-width: 2551px) and (max-width: 3840px) { html { font-size: 200%; } }		/*UHD 4K 3840px wide screens */
@media screen and (min-width: 3841px) and (max-width: 7680px) { html { font-size: 400%; } }		/*UHD 8K 7680px wide screens */

/* CANNOT USE calc WITH VARIABLES !!! at the moment		http://css-tricks.com/a-couple-of-use-cases-for-calc
@media only screen { html { font-size: calc(calc(width) / 19.20)%; } }		WOULD REPLACE ALL LINES ABOVE */


/* HEADINGS common settings first, IN ADDITION to those above in line 10 and variations below */
/* IMPORTANT USE main h1 for page headings - DO NOT USE h1 in <article>s - USE h2-h6 only. */
/* h6 used for headings of <div=text-box>, all POPUPS and all HIDDEN DIVISIONS */
h1, h2, h3, h4, h5, h6 { color:black; background-color:transparent; font-family:"comic sans ms", sans-serif; font-size:1.3rem; line-height:100%; font-weight:normal; float:none; text-align:left; }

/* Based on My Stylesheet for Snow Reports and _HTML5style_1920.css-  text-align:justify; DEFAULT */
body { width:100%; max-width:100%; z-index:10; }
body { color:black; background-color:#AADDFF; font-family:verdana, sans-serif; font-size:1rem; line-height:125%; font-style:normal; font-weight:normal; text-align:justify; text-indent:0; text-decoration:none; text-shadow:0 0 0 transparent; cursor:auto; }
body.phone { background-color:white; font-size:6rem; line-height:150%; } /* Used for phone version of XmasNews */
/* END OF <body> */

				/* NEW HEADER BANNER 2017 from Caledonian Estate Agent 105px high /16 =6.5625rem @1rem=16px default */
header { margin:0.2rem auto 0.3rem auto; width:98%; background-repeat:no-repeat; background-size:100%; border-radius:12px; }
/* header { background-image:url('banners/cairngorm_1880x105.jpg'); } */
/* h1 - Orange #FF6600 "Ray Lambert's Family Photo Album" */
header h1 { color:#FF6600; margin-left:1rem; width:60rem; font-size:3rem; line-height:100%; text-shadow:2px 2px 0 black; text-align:left; }
/* h2 - "Cairngorm from Aviemore" heading. */
header h2 { color:yellow; margin-left:68%; margin-top:1.3%; font-size:1.2rem; line-height:100%; text-shadow:1px 1px 0 black; }
/* Page name in heading - width adjusted in HTML - <h3 style="width:6rem;"> */
header h3 { color:blue; background-color:white; margin-left:0.6rem; margin-top:-1.7rem; width:21rem; padding:0.2rem 0 0.3rem 0; font-size:1.1rem; line-height:100%; text-align:center; border-radius:6px; border:1px solid black; }
/* END OF HEADER BANNER */

/* HIDDEN <div> : Default for page2019.htm onwards - style position changed on welcome.htm and elsewhere */
div#voice_info { visibility:hidden; background-color:white; position:absolute; top:28%; right:20%; z-index:20; padding:0.2rem 0.5rem 0.2rem 0.5rem; font-size:1.2rem; line-height:100%; font-family:"times new roman", serif; border:2px solid red; border-radius:12px; }

/* VISIBLE <div>"Change voice" in <header> started adding to pages 2025-03-08 page2024, page2025, welcome&technical SO FAR */
div#banner_voice_change { color:black; background-color:gold; position:absolute; top:20%; right:22%; width:30%; padding:0.2rem 0.5rem 0.2rem 0.5rem; border-radius:8px; border:2px solid red; }
/* VISIBLE <div>s INSIDE "banner_voice_change" */
#voicesSelect { width:70%; font-size:1rem; border:1px solid black; }
#speakButton { background-color:#FFFFCC; float:right; height:50%; width:18%; font-size:1rem; border-radius:4px; border:1px solid black; }
#current { font-size:0.8rem; }

/* START OF NAVIGATION  - UPDATED 2026_03_27 */
/* START OF NAVIGATION  - UPDATED Dec 3, 2025 */
/* START OF NAVIGATION  - UPDATED 02 November 2021 - <nav> table copied from silverstar.css */
/* margin doesn't work in <nav> INSTEAD, margin-bottom:0.5rem; in <header> and margin-top:0.5rem; in <main> */
/* nav { font-family:verdana, sans-serif; font-size:1.5rem; width:98%; margin:0.5rem auto 1rem auto; text-align:center; }
nav.phone { font-size:5rem; } /* Used for phone version of XmasNews */
/* nav.phone p.halfheight { line-height:100%; }		/* Smaller line-height paragraph in phone nav */

nav { }
nav { font-family:verdana, sans-serif; font-size:1rem; line-height:100%; text-align:center; }

a { }			/* NOT USED - causes problems with images used as hyperlinks */

/* Main <nav> bar below banner - <main>footer navigation is the same as top <nav> bar -  links with black on pale yellow */
a.index_link, a.inline_link, a.phone_link, a.lt_link, a.lt_link_big, a.rt_link { color:black; background-color:#FFFFCC; margin:0; padding:0.3rem 0.5rem 0.3rem 0.5rem; border-radius:4px; border:1px solid black; text-decoration:none; }
a.phone_link { font-size:5rem; text-decoration:none; } /*  */

/* IMPORTANT - USE display:inline-block;TO CURE alignment problem with float */
a.inline_link { display:inline-block; }
a.lt_link { float:left; margin-left:2rem; display:inline-block; }
a.lt_link_big{ float:left; font-size:2.5rem; padding:0 1rem 0 0.5rem; margin-left:1rem; display:inline-block; }
a.rt_link { float:right; margin-right:2rem; display:inline-block; }

.lt_link, .rt_link, .index_none_link { color:black; background-color:#FFFFCC; padding:0.1rem 0.5rem 0.3rem 0.5rem; font-size:0.9rem; font-weight:bold; line-height:100%; border-radius:4px; border:1px solid black; display:inline-block; }
.lt_link { float:left; margin-left:2rem; }			/* For use in span class="index_none_link" */
.rt_link { float:right; margin-right:2rem; }		/* For use in span class="index_none_link" */
.index_link {  }

/* Text and background and border colour changes of links */
a.index_link:link, a.inline_link:link, a.phone_link:link, a.lt_link:link, a.lt_link_big:link, a.rt_link:link { color:black; border-color:black; }
a.index_link:visited, a.inline_link:visited, a.phone_link:visited, a.lt_link:visited, a.lt_link_big:visited, a.rt_link:visited { color:blue; border-color:blue; }
a.index_link:focus, a.inline_link:focus, a.phone_link:focus, a.lt_link:focus, a.lt_link_big:focus, a.rt_link:focus { color:white; border-color:white; background-color:black; }
a.index_link:hover, a.inline_link:hover, a.phone_link:hover, a.lt_link:hover, a.lt_link_big:hover, a.rt_link:hover { color:white; border-color:white; background-color:black; }
a.index_link:active, a.inline_link:active, a.phone_link:active, a.lt_link:active, a.lt_link_big:active, a.rt_link:active { color:red; border-color:black; background-color:white; }
/* END OF NAVIGATION */


/* GENERAL DEFINITION OF ALL <main> FULL-WIDTH AREA - inherits JUSTIFIED from <body> */
main { background-color:#77AAFF; font-size:1.1rem; margin:0.6rem 1rem 0.2rem 1rem; padding:0.5rem; text-align:center; border-radius:12px; border:2px solid black; } /* Derived from main#photo_pages */
main h1 { color:black; font-size:2rem; line-height:150%; text-align:center; }
/* h1 USED FOR ALL PAGE MAIN HEADINGS. h2 used for 2nd line, h3 used for 3rd line. Text to follow h1 on same line by class="h1_subtext" */
main hr { margin:0.5rem 0 0 0; border-top:1px solid black; }

/* XMAS <main> variant used for index.html and maggie_phone_2025 */
main.phone { background-color:white; margin:0.2rem 2rem 0.2rem 2rem; border:0; }
main.phone h1 { color:red; font-size:6rem; padding:1rem 0 1rem 0; text-shadow: 1px 1px 0 black; text-align:center; }

/* Variation of <aside> on Index Page */
aside { clear:none; float:left; overflow-y:auto; border:1px solid black; border-radius:6px; }
aside { background-color:#777777; line-height:250%; padding-left:0.5rem; text-align:left; }
aside h2 { color:white; font-size:1.5rem; margin:0.5rem 0 0.5rem 0; text-align:center; }
aside hr { border-color:white; margin:0.5rem 0 0.5rem 0; }
aside ul { list-style-position:inside; padding-top:0; padding-bottom:0rem; margin-left:1.5rem; }
aside li { line-height: 2rem; }

main footer { background-color:silver; font-size:0.9rem; line-height:150%; font-weight:bold; padding:0.3rem 0 0.3rem 0; text-align:center; border-radius:4px; }
/* END OF <main> */

/* PARAGRAPHS */
p { }
p.newsletter { font-family:"comic sans ms", sans-serif; font-size:1.4rem; line-height:150%; margin-left:1rem; margin-right:1rem; }
/* END OF PARAGRAPHS */

/* GENERAL DEFINITION OF <article> properties */
article { }
article.left { text-align:left; }
article.centred { text-align:center; }

/* Photos floated in text - Margins left & right - <main> 1rem : <article> 2rem : <img> 1rem (declared below) = 4rem total plus 2px border = 66px to subtract from 1280. Divider = 12.14 */
article img.float_left_500 { float:left; margin:1rem 1rem 1rem 0; width:41.1862%; border-radius:8px; } /* Photo in text to be 500px wide on 1280px screen */
article img.float_right_500 { float:right; margin:1rem 0 1rem 1rem; width:41.1862%; border-radius:8px; } /* Photo in text to be 500px wide */

/*				Video fallback play button */
.VideoFallbackButton { background-color:red; cursor:pointer; float:left; margin:0.5rem 0rem 0 1rem; height:1.5rem; width:1.5rem; }
.red_button_in_text { background-color:red; cursor:none;margin:0; height:1.5rem; width:1.5rem; border:none; border-radius:20px; }

/*				Controls used on spoken text pages */
.speech_control_bar { color:black; background-color:gold; font-family:'comic sans ms', sans-serif; font-size:1.2rem; padding:0.2rem 0.5rem 0.5rem 0.5rem; border-radius:8px; border:1px solid black; }
button { background-color:transparent; cursor:pointer; height:2rem; width:2rem; vertical-align:middle; margin-right:1rem; outline:none; }
.button_in_text { height:2rem; width:2rem; vertical-align:middle; margin:0; }

/* Duplicates for multiple spoken paragraphs on a page */
/* No duplicate IDs allowed, so 16 variants (01-16) of <button id="playButton"> etc. created */
/* playButton + class "playing" */
button#playButton, button#playButton01, button#playButton02, button#playButton03, button#playButton04, button#playButton05, button#playButton06, button#playButton07, button#playButton08, button#playButton09, button#playButton10, button#playButton11, button#playButton12, button#playButton13, button#playButton14, button#playButton15, button#playButton16 
{ background-image:url("../graphics/ButtonSVGs/play.svg"); visibility:visible; display:inline; }
button#playButton.playing, button#playButton01.playing, button#playButton02.playing, button#playButton03.playing, button#playButton04.playing, button#playButton05.playing, button#playButton06.playing, button#playButton07.playing, button#playButton08.playing, button#playButton09.playing, button#playButton10.playing, button#playButton11.playing, button#playButton12.playing, button#playButton13.playing, button#playButton14.playing, button#playButton15.playing, button#playButton16.playing 
{ background-image:url("../graphics/ButtonSVGs/play1.svg"); }
/* pauseButton + class "paused" */
button#pauseButton, button#pauseButton01, button#pauseButton02, button#pauseButton03, button#pauseButton04, button#pauseButton05, button#pauseButton06, button#pauseButton07, button#pauseButton08, button#pauseButton09, button#pauseButton10, button#pauseButton11, button#pauseButton12, button#pauseButton13, button#pauseButton14, button#pauseButton15, button#pauseButton16 
{ background-image:url("../graphics/ButtonSVGs/pause.svg"); }
button#pauseButton.paused, button#pauseButton01.paused, button#pauseButton02.paused, button#pauseButton03.paused, button#pauseButton04.paused, button#pauseButton05.paused, button#pauseButton06.paused, button#pauseButton07.paused, button#pauseButton08.paused, button#pauseButton09.paused, button#pauseButton10.paused, button#pauseButton11.paused, button#pauseButton12.paused, button#pauseButton13.paused, button#pauseButton14.paused, button#pauseButton15.paused, button#pauseButton16.paused 
{ background-image:url("../graphics/ButtonSVGs/pause1.svg"); }
/* stopButton + class "stopped" */
button#stopButton, button#stopButton01, button#stopButton02, button#stopButton03, button#stopButton04, button#stopButton05, button#stopButton06, button#stopButton07, button#stopButton08, button#stopButton09, button#stopButton10, button#stopButton11, button#stopButton12, button#stopButton13, button#stopButton14, button#stopButton15, button#stopButton16 
{ background-image:url("../graphics/ButtonSVGs/stop.svg"); margin-right:0.5rem; }
button#stopButton.stopped, button#stopButton01.stopped, button#stopButton02.stopped, button#stopButton03.stopped, button#stopButton04.stopped, button#stopButton05.stopped, button#stopButton06.stopped, button#stopButton07.stopped, button#stopButton08.stopped, button#stopButton09.stopped, button#stopButton10.stopped, button#stopButton11.stopped, button#stopButton12.stopped, button#stopButton13.stopped, button#stopButton14.stopped, button#stopButton15.stopped, button#stopButton16.stopped 
{ background-image:url("../graphics/ButtonSVGs/stop1.svg"); margin-right:0.5rem; }

/* 									END OF spoken text */

/* 	Used to create 2 columns - left and right panes */
section.left_pane, section.right_pane { margin:0; padding-right:0.5rem; width:49.4%; }
section.left_pane { float:left; border-right:3px double black; }
section.right_pane { float:right; }
/* 	<section> also used with <article class="video_box"> - left and right panes */

/* END OF <section> */

/* 	DIV text_box_black_on_cream AND DIV text_box_black_on_white- FOR USE WITHIN AN ARTICLE to float a text box into position
	WARNING - margin-left:55%; width:40%; required when next to a FLOATED photo */
/*	Apply INLINE STYLE in HTML like this - <div class="text_box_black_on_white" style="width:90%; margin-top:1rem;" > */
div.text_box_black_on_cream, div.text_box_black_on_white, div.text_box_white_on_black, article.text_box_white_on_black 
{ width:80%; margin-left:auto; margin-right:auto; margin-top:1rem; padding:1rem; border-radius:8px; border:3px solid blue; }
div.text_box_black_on_cream, div.text_box_black_on_white, div.text_box_white_on_black, article.text_box_white_on_black 
{ color:black; background-color:#FFFFCC; font-size:1.1rem; line-height:150%; text-align:justify; }
div.text_box_black_on_cream h6, div.text_box_black_on_white h6 { color:red; font-size:1.2rem; margin-bottom:0.5rem; }
div.text_box_black_on_white { background-color:white; margin-top:0; padding:0.5rem; }
div.text_box_black_on_white h6 { color:blue; }
div.text_box_white_on_black, article.text_box_white_on_black { color:white; background-color:black; margin-top:0; }
div.text_box_white_on_black h6, article.text_box_white_on_black h6 { color:yellow; font-size:2rem; text-align:center; }

hr.ridge { border-top:20px ridge black; }

/* 				Useful CLASSES used in all websites - not all used but could be useful */
/* TEXT COLOURS to use in <span class="******"> */
.black { color:black; }
.white { color:white; }
.grey { color:#CCCCFF; }
.grey_light { color:#DDDDFF; }
.red { color:red; }
.dark_red { color:#FF6600; }
.orange { color:#FF9900; }
.green { color:green; }
.greenshock { color:#33FF00; }
.greenshock_border { color:black; padding:0.1rem 0.5rem 0.1rem 0.5rem; border-radius:6px; border:3px solid #33FF00; }
.blue { color:blue; }
.yellow { color:yellow; }
.cyan { color:#00FFFF; }
.magenta { color:#FF00FF; }
.brown { color:#993300; }

/* TEXT BACKGROUND COLOURS to use in <span class="******"> */
.back_white { background-color:white; }
.back_offwhite { background-color:#FFFFCC; }
.back_black { background-color:black; }
.back_red { background-color:red; }
.back_pale_blue { background-color:#AADDFF; }
.back_blue { background-color:blue; }
.back_transparent { background-color:transparent; }

/* TEXT FONTS mix'n match in <span class="******"> */
.sans { font-family:verdana, sans-serif; }
.serif { font-family:"times new roman", serif; }
.comic { font-family:"comic sans ms", sans-serif; }
.monospace { font-family:"Courier New", monospace; }

/* TEXT SIZES AND STYLES and VARIATIONS */
.smaller { font-size:80%; }
.smallest { font-size:60%; }
.tiny { font-size:40%; }
.bigger { font-size:120%; }
.biggest { font-size:140%; }
.giant { font-size:8rem; }
.test_size { font-size:1.6398rem; } /* Used on technical page for 1280px calibration */
.drop_cap_white { float:left; color:white; font-size:3rem; line-height:80%; padding:0 0.1rem 0 0.1rem; }
.drop_cap_white_bit_bigger { float:left; color:white; font-size:3.5rem; line-height:80%; padding:0 0.1rem 0 0.1rem; }
.drop_cap_white_bigger { float:left; color:white; font-size:4rem; line-height:80%; padding:0 0.1rem 0 0.1rem; }
.drop_cap_grey { float:left; color:#DDDDDD; font-size:3rem; line-height:80%; padding:0 0.1rem 0 0.1rem; }
.drop_cap_brown { float:left; color:#903; font-size:3rem; line-height:80%; padding:0 0.1rem 0 0.1rem; }
.drop_cap_brown_bigger { float:left; color:#903; font-size:5rem; line-height:80%; padding:0 0.1rem 0 0.1rem; }

/* TEXT STYLES and VARIATIONS + OTHERS to use in <span class="******"> */
.italic { font-style:italic; }
.bold { font-weight:bold; }
.normal { font-weight:normal; }
.super { font-size:60%; vertical-align:super; }
.sub { font-size:80%; vertical-align:sub; }
.crossout { text-decoration:line-through; }
.underline { text-decoration:underline; }

/* TEXT JUSTIFICATION */
.justified { text-align:justify; }
.left { text-align:left; }
.right { text-align:right; }
.centred { float:none; text-align:center; }

/* CURVY CORNERS */
.corners_10_border { border-radius:10px; border:2px solid black; }
.corners_20 { border-radius:20px; }
.corners_20_border { border-radius:20px; border:1px solid black; } /* Used first on Welcome page for video in table */

/* TEXT LINE HEIGHTS */
.line_height_100 { line-height:100%; }
.line_height_120 { line-height:120%; }
.line_height_150 { line-height:150%; }
.line_height_180 { line-height:180%; }

/* MARGINS */
.margin_1rem { margin:1rem; }
.margin_2rem { margin:2rem; }
.margin_3rem { margin:3rem; }
.margin_4rem { margin:4rem; }

.margin_left_1rem { margin-left:1rem; }
.margin_left_2rem { margin-left:2rem; }
.margin_left_4rem { margin-left:4rem; }
.margin_left_6rem { margin-left:6rem; }
.margin_left_8rem { margin-left:8rem; }
.margin_left_10rem { margin-left:10rem; }
.margin_left_12rem { margin-left:12rem; }
.margin_left_14rem { margin-left:14rem; }
.margin_left_18rem { margin-left:18rem; }
.margin_left_20rem { margin-left:20rem; }
.margin_left_24rem { margin-left:24rem; }

.margin_right_1rem { margin-right:1rem; }
.margin_right_2rem { margin-right:2rem; }
.margin_right_3rem { margin-right:3rem; }
.margin_right_4rem { margin-right:4rem; }
.margin_right_6rem { margin-right:6rem; }
.margin_right_8rem { margin-right:8rem; }
.margin_right_10rem { margin-right:10rem; }
.margin_right_12rem { margin-right:12rem; }
.margin_right_14rem { margin-right:14rem; }
.margin_right_18rem { margin-right:18rem; }
.margin_right_20rem { margin-right:20rem; }

.margin_top_-10rem { margin-top:-10rem; }
.margin_top_-8rem { margin-top:-8rem; }
.margin_top_-6rem { margin-top:-6rem; }
.margin_top_-4rem { margin-top:-4rem; }
.margin_top_-3rem { margin-top:-3rem; }
.margin_top_-2rem { margin-top:-2rem; }
.margin_top_-1rem { margin-top:-1rem; }
.margin_top_1rem { margin-top:1rem; }
.margin_top_2rem { margin-top:2rem; }
.margin_top_3rem { margin-top:3rem; }
.margin_top_4rem { margin-top:4rem; }
.margin_top_10rem { margin-top:10rem; }

.margin_bottom_-1rem { margin-bottom:-1rem; }
.margin_bottom_0-5rem { margin-bottom:0.5rem; }
.margin_bottom_1rem { margin-bottom:1rem; }
.margin_bottom_2rem { margin-bottom:2rem; }
.margin_bottom_10rem { margin-bottom:10rem; }

/* img not defined in _HTML5style_1920.css - IMPORTANT - margin=0 for elastic images in divs */
img { margin:0; border:1px solid black; } /* Default margin re-stated here and BORDER ON ALL IMAGES */

img.no_border {border:0; } /* NO BORDER */

/* Margins ALL ROUND and left and right on some photos - useful when img floated within text */
img.margin_1rem { margin:1rem; }
img.margin_2rem { margin:2rem; }
img.margin_3rem { margin:3rem; }
img.margin_4rem { margin:4rem; }

img.margin_left_0-6rem { margin-left:0.6rem; }
img.margin_left_1rem { margin-left:1rem; }
img.margin_left_2rem { margin-left:2rem; }
img.margin_left_3rem { margin-left:3rem; }
img.margin_left_4rem { margin-left:4rem; }
img.margin_left_5rem { margin-left:5rem; }
img.margin_left_6rem { margin-left:6rem; }
img.margin_left_8rem { margin-left:8rem; }
img.margin_left_10rem { margin-left:10rem; }
img.margin_left_12rem { margin-left:12rem; }
img.margin_left_14rem { margin-left:14rem; }
img.margin_left_20rem { margin-left:20rem; }
img.margin_left_30rem { margin-left:30rem; }

img.margin_right_0-6rem { margin-right:0.6rem; }
img.margin_right_1rem { margin-right:1rem; }
img.margin_right_2rem { margin-right:2rem; }
img.margin_right_3rem { margin-right:3rem; }
img.margin_right_4rem { margin-right:4rem; }
img.margin_right_5rem { margin-right:5rem; }
img.margin_right_6rem { margin-right:6rem; }
img.margin_right_8rem { margin-right:8rem; }
img.margin_right_10rem { margin-right:10rem; }
img.margin_right_12rem { margin-right:12rem; }
img.margin_right_14rem { margin-right:14rem; }
img.margin_right_20rem { margin-right:20rem; }
img.margin_right_30rem { margin-right:30rem; }

img.margin_top_-6rem { margin-top:-6rem; }
img.margin_top_-4rem { margin-top:-4rem; }
img.margin_top_-2rem { margin-top:-2rem; }
img.margin_top_-1rem { margin-top:-1rem; }
img.margin_top_1rem { margin-top:1rem; }
img.margin_top_2rem { margin-top:2rem; }
img.margin_top_3rem { margin-top:3rem; }
img.margin_top_4rem { margin-top:4rem; }
img.margin_top_6rem { margin-top:6rem; }
img.margin_top_8rem { margin-top:8rem; }
img.margin_top_10rem { margin-top:10rem; }

img.margin_bottom_3rem { margin-bottom:3rem; }

img.red_border {border:2px solid red; }

/* FLOAT ANYTHING */
.float_left { float:left; }
.float_right { float:right; }
.float_none { float:none; }


/* To highlight popups in normal text - Object triggering popup something - NEW red border 27 Jan 2015 */
.popup { color:black; background-color:#CCCCCC; font-size:1.1rem; font-weight:bold; padding:0 0.3rem 0 0.3rem; border-radius:4px; border:1px solid red; vertical-align:middle; cursor:default; }
.photo_popup { border:2px solid red; }	/* Place like this <img class="photo_popup" onmouseover=......... EXCEPT when img is defined in a table */

/* Used to clear floated objects */
.clear_both{ clear:both; float:none; font-size:0; line-height:0; }
.clear_left { clear:left; float:none; font-size:0; line-height:0; }
.clear_right { clear:right; float:none; font-size:0; line-height:0; }

/*		 SINGLE photos - Usually centred - Limited to 100% max-width by default - CALC will replace all these when it is implemented */
.fill { width:100%; border-radius:10px; }	/* Photo to fill the full width of a division - USED on page95-2015 */
.photo_100 { border-radius:4px; width:5.359%; }	/* 100/18.66 */
.photo_150 { border-radius:4px; width:8.03859%; }	/* 150/18.66 */
.photo_180 { border-radius:4px; width:9.6463%; }	/* 180/18.66 */
.photo_200 { border-radius:6px; width:10.718113612004287245444801714898%; }	/* 200/18.66 */
.photo_240 { border-radius:6px; width:12.86173633440514%; }	/* 240/18.66 */
.photo_250 { border-radius:6px; width:13.397642015005359056806002143623%; }	/* 250/18.66 */
.photo_270 { border-radius:6px; width:14.469453376205787781350482315113%; }	/* 270/18.66 */
.photo_300 { border-radius:8px; width:16.077170418006430868167202572347%; }	/* 300/18.66 = 16.077170418006430868167202572347% */
.photo_320 { border-radius:8px; width:17.148981779206859592711682743837%; }	/* 320/18.66 */
.photo_340 { border-radius:8px; width:18.220793140407288317256162915327%; }	/* 340/18.66 */
.photo_350 { border-radius:8px; width:18.756698821007502679528403001072%; }	/* 350/18.66 */
.photo_400 { border-radius:9px; width:21.436227224008574490889603429796%; }	/* 400/18.66 */
.photo_425 { border-radius:9px; width:22.775991425509110396570203644159%; }	/* 425/18.66 */
.photo_450 { border-radius:9px; width:24.115755627009646302250803858521%; }	/* 450/18.66 */
.photo_480 { border-radius:9px; width:25.723472668810289389067524115756%; }	/* 480/18.66 */
.photo_500 { border-radius:10px; width:26.795284030010718113612004287245%; }	/* 500/18.66 */
.photo_525 { border-radius:10px; width:28.13504823151125%; }					/* 525/18.66 */
.photo_540 { border-radius:10px; width:28.93890675241158%; }	/* 540/18.66 */
.photo_550 { border-radius:10px; width:29.47481243301178992497320471597%; }	/* 550/18.66 */
.photo_575 { border-radius:10px; width:30.814576%; }							/* 575/18.66 */
.photo_600 { border-radius:10px; width:32.154340836012861736334405144695%; }	/* 600/18.66 */
.photo_640 { border-radius:11px; width:34.297963558413719185423365487674%; }	/* 640/18.66 = 34.297963558413719185423365487674% */
.photo_650 { border-radius:10px; width:34.833869239013933547695605573419%; }	/* 650/18.66 */
.photo_680 { border-radius:10px; width:36.441586280814576634512325830654%; }	/* 680/18.66 */
.photo_700 { border-radius:12px; width:37.513397642015005359056806002144%; }	/* 700/18.66 */
.photo_720 { border-radius:12px; width:38.585209%; }							/* 720/18.66 */
.photo_750 { border-radius:13px; width:40.192926045016077170418006430868%; }	/* 750/18.66 */
.photo_774 { border-radius:14px; width:41.479099678456591639871382636656%; }	/* 774/18.66 = 41.479099678456591639871382636656% */
.photo_800 { border-radius:15px; width:42.872454448017148981779206859593%; }	/* 800/18.66 = % */
.photo_820 { border-radius:15px; width:43.944265809217577706323687031083%; }	/* 820/18.66 = % */
.photo_850 { border-radius:15px; width:45.551982851018220793140407288317%; }	/* 850/18.66 = % */
.photo_900 { border-radius:16px; width:48.231511254019292604501607717042%; }	/* 900/18.66 = % */
.photo_950 { border-radius:16px; width:50.911039657020364415862808145766%; }	/* 950/18.66 = % */
.photo_960 { border-radius:16px; width:51.446945337620578778135048231511%; }	/* 960/18.66 = % */
.photo_1000 { border-radius:20px; width:53.590568060021436227224008574491%; }	/* 1000/18.66 = % */
.photo_1100 { border-radius:20px; width:58.94962486602357984994640943194%; }	/* 1100/18.66 = % */
.photo_1225 { border-radius:20px; width:65.648445873526259378349410503751%; }	/* 1225/18.66 = % */
.photo_1400 { border-radius:20px; width:75.026795284030010718113612004287%; }	/* 1400/18.66 = % */
.photo_1600 { border-radius:20px; width:85.744908%; }	/* 1600/18.66 = % */
.photo_1800 { border-radius:20px; width:96.463022508038585209003215434084%; }	/* 1800/18.66 = 96.463022508038585209003215434084% */

/* index_page.htm (cousins table) */
table#cousins { width:80%; margin-left:auto; margin-right:auto; border:3px double #3300FF; }
table#cousins caption { color:white; background-color:red; font-family:"comic sans ms", sans-serif; font-size:1.5rem; line-height:180%; border:3px double #3300FF; }
table#cousins tr { background-color:#DDDDDD; text-align:center; }
table#cousins tr.divider { background-color:#DDFFDD; font-style:italic; }
table#cousins td { width:12.5%; font-family:verdana, sans-serif; font-size:1rem; line-height:120%; vertical-align:middle; padding:0.3rem 0 0.3rem 0; } /* 8 columns */
table#cousins img { width:80%; border-radius:6px; }