/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - https://richclarkdesign.com
Twitter: @rich_clark
*/
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, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  background: transparent;
  border: 0;
  font-size: 100%;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, main, section {
    display: block;
}

a {
    background: transparent;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

blockquote {
    quotes: none;
}

blockquote:before, blockquote:after {
    content: '';
    content: none;
}

body {
    line-height: 1;
}

del {
    text-decoration: line-through;
}

hr {
    border: 0;
    border-top: 1px solid #cccccc;
    display: block;
    height: 1px;
    margin: 1em 0;
    padding: 0;
}

input, select {
    vertical-align: middle;
}

ins {
    text-decoration: none;
}

mark {
    font-style: italic;
    font-weight: bold;
}

nav ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

sup, sub {
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    position: relative;
}

sup {
    bottom: 1ex;
}

sub {
    top: 0.5ex;
}

main a:link, footer a:link {
    text-decoration: none;
    font-weight: bold;
}

main a:hover, footer a:hover {
    text-decoration: underline;
    font-weight: bold;
} /* Must appear after a:link and a:visited */

#colleft a:link, #colright a:link {
    text-decoration: none;
}

#colleft a:hover, #colright a:hover {
    text-decoration: underline;
} /* Must appear after a:link and a:visited */

main, footer {
    background-color: transparent;
    margin: 1em;
    padding: 1em;
    max-width: 680px;
}

#colleft, #colright {
    background-color: transparent;
    padding: 0 1em 0 1em;
    max-width: 180px;
}

#colleft img, #colright img {
    border: 0;
    margin: 0 auto 0 auto;
    padding: 0.5em 0 0.5em 0;
}

#generalinfo:before {
    /* Otherwise treated as inline */
    content: 'Info';
    display: block;
    margin: 0 0 0.5em 0;
    text-align: center;
}

#newsinfo:before {
    /* Otherwise treated as inline */
    content: 'News';
    display: block;
    margin: 0.5em;
    text-align: center;
}

#relatedinfo:before {
    /* Otherwise treated as inline */
    content: 'Related';
    display: block;
    margin: 0 0 0.5em 0;
    text-align: center;
}

#searchinfo, #navinfo, #generalinfo, #relatedinfo
/* Links in TOC not underligned */ {
    margin: 1em 0 1em 0;
    padding: 0.5em;
}

#searchinfo:before {
    /* Otherwise treated as inline */
    content: 'Search our site';
    display: block;
    font-size: 1em;
    font-weight: bold;
    margin: 0 0 0.5em 0;
    text-align: center;
}

#navinfo img {
    border: 1px solid black;
    margin: 0;
    padding: 0;
}

#navinfo:before {
    /* Otherwise treated as inline */
    content: "Other Rooms in Dr Garry's Terrace";
    display: block;
    margin: 0 0 0.5em 0;
    text-align: center;
}

#TOC, #newsinfo {
    margin-bottom: 0.5em;
    padding: 0 0.25em 0.25em 0;
}

#TOC::before {
    /* Otherwise treated as inline */
    content: 'Contents';
    display: block;
    margin: 0.5em;
    text-align: center;
}

header {
    margin-left: 1em;
    max-width: 680px;
}

.boxed {
    border: 1px solid Teal;
    margin: 0.5em auto 2em auto;
    padding: 5px;
}

.boxed p {
    margin: 0;
    padding: 0.25em 0 0.25em 0;
}

.cgraphic {
    margin: 0 auto 2em auto;
}

.clear {
    clear: both;
}

.graphic {
    float: left;
    margin: 0 2em 2em 0;
}

.graphic img, .cgraphic img {
    border: 1px solid black;
    margin: 0;
}

.navbox {
    /* Height is left to individual instance */
    display: table;
    margin: 1em auto 1em auto;
    padding: 0;
    background-repeat: no-repeat;
    border: none;
}

.navboxcell {
    margin: 0;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.navboxcell p {
    margin-top: 0.5em;
}

.updated {
    color: gray;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 1em 0 1em 0;
    text-align: center;
}

a {
    /*  html5doctor.com*/
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

a, a:link, a:visited, a:hover {
    /* This is correct order to specify links: link, visited, hover */
    text-decoration: none;
}

aside.callout {
    float: left;
    margin: 0 0.5em 0.25em 0;
    width: 30%;
}

aside.callout p {
    /*  font-size: 1.1em;
  line-height: 1.1em;
  */
    padding: 0.25em 0.5em 0.25em 0.5em;
}

aside.pullquote {
    float: left;
    /*
  font-size: 1.25em;
  */
    margin: 0 0.5em 0.25em 0;
    padding: 0.25em 0.25em 0 0;
    text-align: left;
    width: 20%;
}

aside.pullquote p {
    margin: 0;
    padding: 0;
}

blockquote.quote {
    display: block;
    margin: 0.5em 1.5em 0.5em 1.5em;
    padding: 0.5em 0.5em 0.25em 0.5em;
}
blockquote p::after {
    content: '';
}

blockquote p::before {
    content: '\201C';
}

blockquote p:last-child {
    /* Supposedly removes excess space from bottom of block quote */
    margin-bottom: 0;
}

blockquote p:last-child::after {
    content: '\201D';
}

blockquote, q {
    quotes: '\201C' '\201D';
}

body {
    background: white scroll;
    border: none;
    color: black;
    /* Note on font property;
Format is font-style font-variant font-weight font-size/line-height font-family
Mandatory: font-size and font-family
Prop font-size only takes one value, and must be used with line-height. Prop inherit does not work well
*/
    font-family: sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1.1em;
    padding: 1em;
    text-align: left;
    background-repeat: no-repeat;
    margin: 0;
    max-width: 1110px;
    font-size: 16px;
}

em, i {
    font-style: italic;
}
span.strike {
    text-decoration: line-through;
}
figcaption, footer p {
    margin: 0;
    padding: 0 0 0.75em 0;
}

footer {
    clear: both;
    margin-top: 2em;
}

footer p {
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    line-height: 1.25em;
    margin: 1em 0 0.5em 0;
    font-family:serif;
}

h1 {
    font-size: 2.5em;
    margin-top: 0;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.25em;
}

h4 {
    font-size: 1.1em;
}

h5 {
    font-size: 1em;
}

hr {
    background-color: gray;
    border: none;
    border-top: 1px solid gray;
    color: gray;
    display: block;
    height: 1px;
    margin: 1em 0;
    padding: 0;
}

img {
    border: none;
    display: block;
    margin: 0;
    max-width: 100%;
    height: auto;
}

img .toprule {
    /* Nothing */
}

li {
    line-height: 1.2em;
    list-style: disc outside none;
    margin: 0 0 0.25em 0;
}

li.H2, li.H3
/*  The TOC builder creates a single UL, with heading 2 a LI as class=H2, a heading 3 as class=H3 etc
*/ {
    list-style: disc;
    margin-left: 0em;
}

li.H3
/*  The TOC builder creates a single UL, with heading 2 a LI as class=H2, a heading 3 as class=H3 etc
*/ {
    margin-left: 1em;
}

p {
    font-size: 1em;
    line-height: 1.5em;
    margin: 0;
    padding: 0 0 0.75em 0;
}

strong, b {
    font-weight: bold;
}
/*
sup {
  font-size: 1em;
  line-height: 0.75em;
  vertical-align: text-top;
}
*/

table {
    border: none;
    border-collapse: collapse;
    margin: 0.5em auto 2em auto;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

td {
    text-align: center;
}

ul ul, ol ol {
    margin: 0.25em 0 1em 2.5em;
    padding: 0;
}

ul, ol {
    margin: 0.25em 0.25em 1em 2em;
    padding: 0;
}

ul.widespace li {
    line-height: 2em;
}

/* Flexible layout stuff */
* {
    box-sizing: border-box;
}
body {
    display: flex;
    min-height: 100vh;
    flex-direction: row;
}
.outer-col-1 {
    align-self: baseline;
    flex: 1;
}
.outer-col-2 {
    display: flex;
    flex-direction: column;
    flex: 5;
}
.inner-row {
    display: flex;
    flex-direction: row;
}
.inner-col {
    flex: 4;
}
.inner-row main {
    min-height: 60vh;
}
.inner-row #colright {
    flex: 1;
}
header, footer {
}

/* media rules */
/* Small devices (portrait tablets and large phones, 684px and below) */
/* 12px @ 480px increasing to 16px @ 1200px */
@media only screen and (min-width: 200px) {
    body {
        font-size: -moz-calc(0.75rem + ((1vw - 4.8px) * 0.5556));
        font-size: -webkit-calc(0.75rem + ((1vw - 4.8px) * 0.5556));
        font-size: calc(0.75rem + ((1vw - 4.8px) * 0.5556));
        /* Where: * 0.5556 = 100 * font_Size_Difference / viewport_Width_Difference */
    }
}

@media only screen and (max-width: 684px) {
    #colleft {
        display: none;
    }
    #colright {
        display: none;
    }
    body {
        font-size: 12px;
        /* max-width:80%; */
    }
}

/* Medium devices (landscape tablets, 768px and below) */
@media only screen and (max-width: 768px) {
    #colleft {
        display: none;
    }
    body {
        font-size: 12px;
        /* max-width:80%; */
    }
}

/* Large devices (laptops/desktops, 769px and up not 992px) */
@media only screen and (min-width: 769px) {
    body {
        font-size: 14px;
        /* max-width:80%; */
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    body {
        font-size: 16px;
        /* max-width:80%; */
    }
}

/* Print stuff */
@media print {
    footer, header {
        display: none;
    }
    body, div {
        font-size: 12pt;
        display: block !important;
    } /* Must appear before colleft and colright to work in Chrome*/
    table, img {
        page-break-inside: avoid;
    }
    #colleft {
        display: none !important; /* need the important! */
    }
    #colright {
        display: none !important; /* need the important! */
    }
}

@page {
    margin: 0.5cm;
}