/*
Originally derived from Wordpress theme: Vantage Premium
*/

/* =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,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{
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
aside,details,figcaption,figure,footer,header,nav,section {
    display: block;
}
blockquote:before,blockquote:after,q:before,q:after {
    content: "";
}
blockquote,q {
    quotes: "" "";
}

/*
*/
a:focus {
    outline: thin dotted;
}
a:hover, a:active {
    outline: 0;
}

/*
a img {
    border: 0;
}
*/


/* + Global {{{ */

/* Font */
body, button, input, select, textarea {
    color: #333;
    font-family: Arial;
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    line-height: 1.4em;
    //font-size: 15px;
    word-wrap: break-word;
}

/* + }}} */

/* Headings and Rulers */
hr{
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}
h1, h2, h3, h4, h5, h6 {
    clear: both;
}

/* Text elements */
p {
    margin-bottom: 1.5em;
}

dt {
    font-weight:bold;
}
dd {
    margin:0 1.5em 1.5em;
}
b, strong {
    font-weight: bold;
}
dfn,cite,em,i {
    font-style: italic;
}
blockquote {
    margin: 0 1.5em;
}
address {
    margin: 0 0 1.5em;
}
pre {
    background: #eee;
    font-family: "Courier 10 Pitch", Courier, monospace;
    line-height: 1.6;
    margin-bottom: 1.6em;
    padding: 1.6em;
    overflow: auto;
    max-width: 100%;
}
code, kbd, tt, var {
    font-family: "Courier New", Courier, mono;
}
abbr, acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}
mark, ins {
    background: #fff9c0;
    text-decoration: none;
}
sup, sub {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    bottom: 1ex;
}
sub {
    top: 0.5ex;
}
small {
    font-size: 75%;
}
big {
    font-size: 125%;
}
figure {
    margin: 0;
}
table {
    margin: 0 0 1.5em 0;
    width: 100%;
}
th {
    font-weight: bold;
}

/* + Masthead {{{ */

#masthead {
    background-color: #ffffff;
}

/* + + Logo {{{ */

#logoBar {
    padding: 14px 35px 7px 35px;
    background-color: #ffffff;
}
#logoBar img {
    max-width: 100%;
    height: auto;
}

/* + + }}} */

/* + + Right sidebar {{{ */

header#masthead div #header-sidebar{
    float: right;
    padding-top: 23px;
}
header#masthead div a {
    font-size: 15px;
    text-decoration: none;
}

/* + + }}} */

/*
.google_map {
    height: 450px;
    width: 736px;
}

@media (max-width: 870px) {
.google_map {
    width: 100%;
}
}
*/

/* Hide sidebar, centre logo */
@media (max-width: 870px) {
    body.responsive header#masthead div #header-sidebar {
        display: none;
    }
    body.responsive header#masthead {
        //align-self: center;
    }
    #logoBar {
        //text-align: center;
    }
}


/* + }}} */

/* + Menu {{{ */

/* + + Basic list to menu layout {{{ */

/* Reset/hide the default list bullets and indentation */
ul.menuList, ul.menuList ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    zoom: 1;
}

/* In horizontal case arrange items horizontally */
ul.menuListHorizontal > li {
    display: block;
    position: relative;
    float: left;
}

/* + + }}} */

/* + + Mouse interaction {{{ */

/* Hide submenus until hovered */
ul.menuListMousefold  li > ul {
    display: none;
}
ul.menuListMousefold  li:hover > ul {
    display: block;
}

/* Make submenus a seperate layer */
ul.menuListMousefold  li > ul {
    position: absolute;
    /*background-color: white;*/
    z-index: 99999;
}

/* + + }}} */

/* + + Size/padding {{{ */

ul.menuList > li a {
    display: inline-block;
}

/* + + + Horizontal bars {{{ */

ul.menuListHorizontal > li a {
    padding: 10px 35px;
}

ul.menuListHorizontal > li > ul {
    left: 0;
    top: 100%;
}

/* + + + }}} */

/* + + + Vertical/dropdown lists {{{ */

ul.menuListVertical li a {
    padding: 10px 25px;
}

/* Set width of list (else gets inherited from heading) */
ul.menuListVertical {
    width: 300px;
}

/* Make items occupy full width of list */
ul.menuListVertical > li a {
    box-sizing: border-box;
    width: 100%;
}

/* + + + }}} */

/* + + }}} */

/* + + Font style {{{ */

ul.menuList li {
    font-weight: bold;
}
ul.menuList a {
    text-decoration: none;
}

ul.menuList {
    font-size: 13px;
    line-height: 1.5em;
}

/* + + }}} */

/* + + Colours {{{ */

div.menuBar {
    background-color: #1e73be;
}
/*
.menuGroup {
    background-color: #fff;
}
*/
.menuGroupHeading {
    color: #fff;
    cursor: default;
}
.menuGroup:hover {
    background-color: #fff;
    color: #1e73be;
}
.menuGroup:hover .menuGroupHeading {
    color: #1e73be;
}

.menuItem {
    background-color: #1e73be;
    color: #fff;
}
.menuItem:hover {
    background-color: #cc0099;
    color: #fff;
}

/*
ul.menuList li {
    background-color: #1e73be;
}
ul.menuListMousefold li:hover {
    color: #1e73be;
    background-color: #fff;
}
ul.menuListMousefold a:hover {
    background-color: #cc0099;
}
ul.menuList li a {
    color: #ffffff;
}
*/

/* + + }}} */

/* + + Clear floats {{{ */

ul.menuList:before {
    content: '';
    display: block;
}
ul.menuList:after {
    content: '';
    display: table;
    clear: both;
}

/* + + }}} */

/* + + Alternate layout/interaction on narrow pages {{{ */

/* + + + Menu title {{{ */

/* If wide page, hide,
   else if narrow page, show */
.menuTitle {
    display: none;
}
@media (max-width: 870px) {
    .menuTitle {
        display: block;
    }
}

/* Base visual style */
.menuTitle {
    color: white;
    padding: 10px 25px;
    font-weight: bold;
    font-size: 13px;
    border-top: 1px solid white;
}

/* When .menu container is hovered, invert colour */
.menu:hover > .menuTitle,
.menu.jshover > .menuTitle {
    color: #1e73be;
    background-color: #fff;
}

/* + + + }}} */

/* + + + Menu lists {{{ */

/* If narrow page,
   hide, and when .menu container is hovered, show */
@media (max-width: 870px) {
    .menuList {
        display: none;
    }
    .menu:hover .menuList {
        display: block;
    }
}

@media (max-width: 870px) {
    .menu > .menuList {
        /* Show on a seperate layer */
        position: absolute;
        z-index: 10;
        background-color: #1e73be;
        /* Full width */
        width: 100%;
        /* With a bottom border */
        border-bottom: #fff 2px solid;
    }

    /* Arrange first level items (intending all) vertically */
    ul.menuListHorizontal > li {
        float: none;
    }
    /* Make items occupy full width of list */
    ul.menuListHorizontal > li a {
        box-sizing: border-box;
        width: 100%;
    }
    /* Back on same layer */
    ul.menuListMousefold  li > ul {
        position: static;
    }

    /* */
    ul.menuListVertical > li a {
        display: inline-block;
    }

    /* Second level items indented and full width */
    ul.menuList li ul.menuListVertical {
        margin-left: 35px;
        width: calc(100% - 35px);
    }
    /* Add some borders */
    ul.menuList li {
        border-top: 1px solid white;
    }
    ul.menuListVertical li {
        border-left: 1px solid white;
    }
}

/* + + + }}} */

/* + + }}} */

/* + + Transition {{{ */

.navigationBar ul li
{
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/* + + }}} */

/* + }}} */


/* + Daniel new styles {{{ */

/* + + Base page structure {{{ */

html {
}

body {
}

#viewport {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.fixedBackground::after {
    content: "";
    background-position: 50% 65%;
    background-size: cover;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: -1;   
}

.fixedBackground::after {
    background-image: url('../Resources/wood_with_wild_flowers.jpeg');
}
@media (max-width: 320px) {
    .fixedBackground::after {
        background-image: url('../Resources/wood_with_wild_flowers_320.jpeg');
    }
}
@media (max-width: 480px) {
    .fixedBackground::after {
        background-image: url('../Resources/wood_with_wild_flowers_480.jpeg');
    }
}
@media (max-width: 768px) {
    .fixedBackground::after {
        background-image: url('../Resources/wood_with_wild_flowers_768.jpeg');
    }
}
@media (max-width: 1024px) {
    .fixedBackground::after {
        background-image: url('../Resources/wood_with_wild_flowers_1024.jpeg');
    }
}


.backgroundImage1::after {
    background-image: url('../Resources/wood_with_wild_flowers.jpeg');
    background-position: 50% 65%;
}
@media (max-width: 320px) {
    .backgroundImage1::after {
        background-image: url('../Resources/wood_with_wild_flowers_320.jpeg');
    }
}
@media (max-width: 480px) {
    .backgroundImage1::after {
        background-image: url('../Resources/wood_with_wild_flowers_480.jpeg');
    }
}
@media (max-width: 768px) {
    .backgroundImage1::after {
        background-image: url('../Resources/wood_with_wild_flowers_768.jpeg');
    }
}
@media (max-width: 1024px) {
    .backgroundImage1::after {
        background-image: url('../Resources/wood_with_wild_flowers_1024.jpeg');
    }
}

.backgroundImage2::after {
    background-image: url('../Resources/wood2.jpeg');
    background-position: 50% 65%;
}
@media (max-width: 320px) {
    .backgroundImage2::after {
        background-image: url('../Resources/wood2_320.jpeg');
    }
}
@media (max-width: 480px) {
    .backgroundImage2::after {
        background-image: url('../Resources/wood2_480.jpeg');
    }
}
@media (max-width: 768px) {
    .backgroundImage2::after {
        background-image: url('../Resources/wood2_768.jpeg');
    }
}
@media (max-width: 1024px) {
    .backgroundImage2::after {
        background-image: url('../Resources/wood2_1024.jpeg');
    }
}

.backgroundImage3::after {
    background-image: url('../Resources/wood3.jpeg');
    background-position: 50% 32%;
}
@media (max-width: 320px) {
    .backgroundImage3::after {
        background-image: url('../Resources/wood3_320.jpeg');
    }
}
@media (max-width: 480px) {
    .backgroundImage3::after {
        background-image: url('../Resources/wood3_480.jpeg');
    }
}
@media (max-width: 768px) {
    .backgroundImage3::after {
        background-image: url('../Resources/wood3_768.jpeg');
    }
}
@media (max-width: 1024px) {
    .backgroundImage3::after {
        background-image: url('../Resources/wood3_1024.jpeg');
    }
}

/* + + }}} */

.contentColumnBorder {
    padding: 0;
    background-color: transparent;
    padding: 17px 0;
}
.contentColumnContent {
    margin: 0 17px;
    padding: 30px;

    background: #fff;
    position: relative;  /* layer above background image */
    flex-grow: 1;
}
.contentColumn {
    padding: 30px 35px;

    background: #fff;
    position: relative;  /* layer above background image */
    flex-grow: 1;
}


/* Centred column to stop lines reading too long */
.textNarrower {
    width: 100%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

/* + + 2-column layout {{{ */

.column_pageTitle {
    float: left;
    width: 225px;
}
.column_pageText {
    margin-left: 250px;
}

@media (max-width: 870px) {
    .column_pageTitle {
        float: none;
        width: auto;
        //text-align: center;
    }
    .column_pageText {
        margin-left: auto;
    }
}

.pageTitle {
    background-color: #e065c1;
    color: #ffffff;
    font-weight: bold;
    padding: 2px;
}

.pageTitle2 {
    background-color: #5b84d6;
    color: #ffffff;
    font-weight: bold;
    padding: 2px;
}

/* + + }}} */

/* + + Prose {{{ */

.proseHeading {
    color: #36c;
    //font-size: 14px;
    font-weight: bold;
    margin-bottom: 0.4em;
}

.prosePara {
    //font-size: 14px;
}

/* + + }}} */

/* + + Captioned images {{{ */

.imageWithCaption {
    text-align: center;
    border: 1px solid #ddd;
    padding: 1em;
    margin: 1.5em;
}
.imageWithCaption img {
    width: 100%;
}
.imageWithCaption .caption {
    font-style: italic;
}

/* + + }}} */

/* + }}} */

/* + Links {{{ */

a {
    color: #248cc8;
}

a:hover, a:focus, a:active {
    color: #f47e3c;
}

/* + }}} */