@charset "utf-8";
/*	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  	Styles:  ow-main.css        Version: 6.0.0
    Created: 2026-09-18 16:25:30
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Author:     DNC THomas
    Last edit:  
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


html {
    --pageWidth: 1200;
    --pageWidthPix: calc(var(--pageWidth) * 1px);
    --rowGap: 1em;
    --colGap: 1vw;

    font-size: clamp(0.8125rem, 0.7188rem + 0.375vw, 1rem);/* 13 to 16px */
    h1 { font-size: 2em; }

    h2 { font-size: 1.6em; }

    h3 { font-size: 1.3em; }

    h4 { font-size: 1.1em; }

    h5 {
        font-size: 1em;
        font-style: italic;
    }

    h6 {
        font-size: .9em;
        font-style: italic;
    }
    scroll-behavior: smooth;
}

#Head {
    /*background: var(--color1);*/
    min-height: 5em;
    border-block-end: .75vh solid var(--color5);
    /*color: var(--color9);*/
    position: relative;    /* static */
    width: 100%;
    top: 0;
    z-index:30;

    .flyingOwl {
        position: absolute;
        top: 9vh;
        right: 2.9vw;
        max-height: 3vw;
        width: auto;
    }

    .topNav {
        max-width: var(--pageWidthPix);
        margin: auto;
    }
}

.subHead {
    max-width: var(--pageWidthPix);
    margin: auto;
    height: 100%;
    padding: 0 .5vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items:end;
    grid-template-areas: "logo name" "logo stats";

    .logo {
        grid-area: logo;
        padding: 1vh 0 .25vh 0;
        max-width:20em;
        min-width: 17em;
        width: 30vw;
        height: auto;
    }

    .sitename {
        grid-area: name;
        font-weight: 700;
        font-style: italic;
        /*color: white;*/
        justify-self: end;
        margin: .3em 0;
    }

    .stats {
        grid-area: stats;
        display: grid;
        column-gap:var(--colGap);
        grid-template-columns: 1fr 7em; /* 7em = space for global coordinates */
        z-index:5;
        p {
            /*color:white;*/
            justify-self: end;
            margin: 0;
        }
        p:nth-of-type(even){font-weight: 700;}
    }
}

#Content {
    /*max-height: 80em;*/
    overflow: auto;
    position:relative;
    .subContent {
        max-width: var(--pageWidthPix);
        margin: auto;
        margin-top: 2em;
        margin-bottom: 1em;
        min-height: 10em;
        padding: 0 .5vw;
    }
}

.ow-titleBar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    column-gap: var(--colGap);
    /*background: transparent;
    color: inherit;*/

    & *:not(button) {
        margin: 0;
        padding: 0.3em 0
    }
}

#Foot {
    position: relative;    /* fixed */
    bottom: 0;
    width: 100%;
    border-block-start: .375vh solid var(--color5);
    background: var(--color1);
    color: var(--color9);
    z-index:30;
    .subFoot {
        max-width: var(--pageWidthPix);
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;

        p {
            margin: 0.3em 0;
            color:var(--color7);
            span {color:var(--color9);}
            span:last-of-type { font-size: 80%;font-style:italic;}
        }

        p:last-of-type {
            justify-self: end;
            span { padding-left:.5em ;}
        }
    }

    .oaktree {
        position: absolute;
        bottom: 1.8em;
        right: 2em;
        max-height: 3vw;
        width: auto;
    }

    .flyingowl {
        position: absolute;
        left: 2em;
        bottom: 5vh;
        width: 6em;
        height: auto;
    }
}

.ow-dataBar {
    display: flex;
    column-gap: var(--colGap);
    justify-content: space-between;
    align-items: center;
    margin: .1em -.35em;
    padding: 0 .35em;
    border-block-end: thin dotted var(--color5);
    /* Optional */
    & p {
        margin: 0;
        padding: .3em 0;
    }
    & p:last-of-type {
        justify-self: end;
        font-weight: 700;
        text-align:right;
    }
    &:hover {
        background: var(--dataBarHover);/*linear-gradient(var(--color4) 0%, transparent 15%, transparent 80%, var(--color1) 100%);*/
        color: var(--color4);
    }
}

.ow-dataGrid {
    display: grid;
    grid-template-columns: 1fr repeat(2, 9em);
    column-gap: var(--colGap);
    align-items: center;
    margin: .1em -.25em;
    border-block-end: thin dotted var(--color5);
    &.plus { grid-template-columns: 1fr repeat(2, 10em);}
    & p {
        margin: 0;
        padding: .3em 0;
        &.double { grid-column-start: span 2;}
    }
    & p:first-of-type {
        padding-left: .25em;
    }
    & p:not(:first-of-type) {
        font-weight: 700;
        justify-self: end;
        padding-right: .25em;
        text-align:right;
        /*border-radius: 0 1vh 1vh 0; /* Optional */
        box-shadow: var(--rightShadow);
    }
    &:hover {
        background: linear-gradient(var(--color1) 0%, transparent 20%, transparent 80%, var(--color1) 100%);
        color: var(--color4);
    }
    &.headings p {box-shadow:none}
    &.headings:hover { /* Use for grid header */
        background: transparent;
        color: inherit;
    }
}

button {
    border: thin solid var(--color0);
    border-radius: 1em;
    padding: .3em 1em;
    color: inherit;
    background: inherit;
    cursor: pointer;
    &:focus {
        outline: none;
    }
    &:hover {
        background: var(--color7);
        box-shadow: var(--raised);
    }
}

.ow-btnBar {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: calc( var(--rowGap) / 2) calc(var(--colGap) / 4);
    p {margin:0;}
    button:hover {
        flex-grow: 1;
        max-width: 10em;
    }
}

.ow-panel {
    /*border: thin solid var(--color5);*/
    border-radius: 0 0 1vh 1vh;
    padding: .5em 1em 1em 1em;

    .ow-titleBar {
        margin: -.5em -1em 1vh -1em;
        padding: 0 1em;
        /*background: darkblue;
        color: white;*/
    }
    .ow-dataGrid:nth-of-type(1) {
        border:none; background:red;
    }
    .ow-dataGrid:first-of-type:hover{
        background:transparent;
        color:inherit;
    }
}

.noShadow { box-shadow: none!important;}

.disabled {
    cursor: not-allowed;
    opacity:.3;
    &:hover {
        flex-grow:0!important;
        box-shadow:none;
        background:inherit;
    }
}

select,
input[type=number] {
    cursor: pointer;
    padding:.3em 1em;
    border: thin solid var(--color1);
    border-radius: 1em 0 0 1em;
    background:transparent;
    &:focus { outline:none}
    &:hover { 
        box-shadow: var(--raised);
        background: var(--color7);
    }
}

select { padding: .25em 1em;}

input[type=number] {
    padding:.3em .1vw .35em 1em;
    min-width:4em;
}

.BtoTop { /* Back to top button */
    display:none;
    position:fixed;
    bottom:4.5em;
    right:2.1em; /* If you change the sideNave to Left, you might want to adjust this as well */
    z-index:30;
    color:var(--color1);
    background:inherit;
}

.tagline {
    font-style:italic;
}

.ow-modal {
    z-index:100;
    display: none;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
    background: var(--modal);
    cursor:not-allowed;
    & .content {
        background:transparent;;
        margin:0;
        top:50%;
        left:50%;
        position:absolute;
        min-width:min-content;
        max-width:90vw!important;
        cursor:auto;
        -webkit-transform: translate(-50%, -60%);
        -moz-transform: translate(-50%, -60%);
        -ms-transform: translate(-50%, -60%);
        -o-transform: translate(-50%, -60%);
        transform: translate(-50%, -60%);
        & .ow-panel { padding-bottom: 0;}
        & .ow-titleBar:last-of-type{margin-bottom:0;justify-content:flex-end;}
    }
}

.ow-at:before {
    content: "at";
    font-size: 80%;
    padding: 0 .4em;
    font-style:italic;
}
.ow-on:before { 
    content:"on"; 
    font-size:80%; 
    padding:0 .4em;
}

.ow-in:before{ 
    content:"in"; 
    font-size:70%; 
    padding: 0 .4em;
}

.ow-hide { display: none!important; }

.unit { 
    padding-left: .25em;
    font-size:80%;
    font-style:italic;
    &.up {
        vertical-align:top;
    }
    &.noGap { padding-left:0;}
}

.lightning {
    animation: switch 4s infinite normal forwards;
}

@keyframes switch {
    0%,
    10% { color:white }
    10% { color:transparent;}
    15% { color: white; box-shadow: 0px 4px 4px -2px rgba(255, 228, 196, 0.57);}
    30% { color:transparent;}
    50% { text-shadow:none}
    80%,
    100% { color:inherit; text-shadow: 0 0 6px rgba(255,255,255,0.7)}
}

/*	~~~~~~~	  GRIDS   ~~~~~~~*/
.ow-grid {
    display: grid;
    gap: var(--rowGap) var(--colGap);
    margin-bottom: var(--rowGap);
    --available: calc(var(--pageWidthPix) - (var(--colGap) + 1em));
    &.col7 { --width-min: calc(var(--available) / 8); flex-basis: calc( var(--available) / 8 ); flex-grow:1;}
    &.col6 { --width-min: calc(var(--available) / 7); }
    &.col5 { --width-min: calc(var(--available) / 6); }
    &.col4 { --width-min: calc(var(--available) / 5); }
    &.col3 { --width-min: calc(var(--available) / 4); }
    &.col2 { --width-min: calc(var(--available) / 2.9); }
    &.col1 { --width-min: 100%; }
    grid-template-columns: repeat(auto-fill, minmax(var(--width-min), 1fr));
    grid-auto-rows:minmax(4em, auto);
}

/*  -------- Flex Boxes ----- */
.ow-flex {
    display: flex;
    gap: var(--rowGap) var(--colGap);
    flex-flow: row wrap;
    justify-content: space-between;
    margin-bottom: var(--rowGap);
    --available: calc(var(--pageWidthPix) - 1em);
    &.col7>* { 
        min-width: calc((var(--available) - 6 * var(--colGap)) / 8);
        flex-grow: 1;
    }
    &.col6>* {
        min-width: calc((var(--available) - 5 * var(--colGap)) / 7);
        flex-grow: 1;
    }
    &.col5>* {
        min-width: calc((var(--available) - 4 * var(--colGap)) / 6);
        flex-grow: 1;
    }
    &.col4>* {
        min-width: calc((var(--available) + (3 * var(--colGap))) / 5);
        flex-grow: 1;
    }
    &.col3>* {
        min-width: calc((var(--available) - 2 * var(--colGap)) / 4);
        flex-grow: 1;
    }
    &.col2>* {
        min-width: calc((var(--available) - 1 * var(--colGap)) / 3);
        flex-grow: 1;
    }
    &.col1>* {
        min-width: calc((var(--available) - 0 * var(--colGap)) / 2);
        flex-grow: 1;
    }
}

.ow-flex.ow-fixed {
    justify-content: center;
    &.col7>* {
        max-width: calc((var(--availableFlex) - 7 * var(--colGap)) / 7);
    }
    &.col6>* {
        max-width: calc((var(--availableFlex) - 6 * var(--colGap)) / 6);
    }
    &.col5>* {
        max-width: calc((var(--availableFlex) - 5 * var(--colGap)) / 5);
    }
    &.col4>* {
        max-width: calc((var(--availableFlex) - 4 * var(--colGap)) / 4);
    }
    &.col3>* {
        max-width: calc((var(--availableFlex) - 3 * var(--colGap)) / 3);
    }
    &.col2>* {
        max-width: calc((var(--availableFlex) - 2 * var(--colGap)) / 2);
    }
    &.col1>* {
        max-width: calc((var(--availableFlex) - 0 * var(--colGap)) / 1);
    }
    /* Could be 100% */
}

/*  ----------  Top Navigation --------- */
.topNav {
    overflow: hidden;
    background-color: var(--navBackground);
    & a {
        float: left;
        display: block;
        color: var(--navText);
        text-align: center;
        padding: .5em 1em;
        text-decoration: none;
        cursor: pointer;
        border-block-start: medium solid transparent;
    }

    &.active {
        background-color: var(--navActive);
        color: var(--navTextHvr);
        border-block-start: medium solid var(--navTextHvr)!important;
    }

    & .icon {
        display: none;
        z-index: 2;
    }

    & .navDropdown {
        float: left;
        overflow: hidden;
        border-block-start: medium solid transparent;
    }

    & .navDropdown .navDropBtn {
        border: none;
        border-radius: 0;
        box-shadow: none;
        outline: none;
        color: var(--navText);
        padding: .5em 1em;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
        cursor: pointer;

        i {
            padding-left: .5em;
            color: var(--navIcon);
        }
    }

    & .navDropdown-content {
        display: none;
        position: absolute;
        background-color: var(--navDropDown);
        min-width: 160px;
        box-shadow: var(--dropShadow);
        z-index: 1;
        padding: 1vh 0;
        border-radius: 0 0 1vh 1vh;

        /* Here*/
        & a {
            float: none;
            color: var(--navText);
            padding: .5em 1em;
            text-decoration: none;
            display: block;
            text-align: left;
            border-block-start: medium solid transparent;
            i { 
                float:right; 
                color:var(--navIcon);
            }
        }
        &.megaMenu {
            max-width:calc( var(--pageWidthPix) * .81);
            left: 20%;
            right: 20%;
            margin:auto;
            width:auto;
        }
    }

    & a:hover,
    .navDropdown:hover {
        border-block-start: medium solid var(--navTextHvr);
        background-color: var(--navBackground);
        color: var(--navText);
    }

    & a:hover,
    .navDropdown:hover .navDropBtn {
        background-color: var(--navBackground);
        color: var(--navTextHvr);
    }

    & .navDropdown-content a:hover {
        background-color: var(--navDropDown);
        color: var(--navTextHvr);
        border-block-start: medium solid var(--navTextHvr);
    }
}
.active {
    background-color: var(--navActive);
    color: var(--navTextHvr);
    border-block-start: medium solid var(--navTextHvr)!important;
}
@media screen and (max-width: 1000px) {

    .topNav a:not(:first-child),
    .navDropdown .navDropBtn {
        display: none;
    }

    .topNav a.icon {
        float: right;
        display: block;
        width: fit-content;
    }
}

@media screen and (max-width: 1000px) {
    .topNav.responsive {
        position: relative;
    }

    .topNav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topNav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    .topNav.responsive .navDropdown {
        float: none;
        position: relative;
    }

    .topNav.responsive .navDropdown-content {
        position: fixed;
        left: 1vw;
        width: 98vw;
        box-shadow: var(--shadow1);
    }

    .topNav.responsive .navDropdown .navDropBtn {
        display: block;
        width: 100%;
        text-align: left;
    }
    .topNav.responsive .navDropdown-content.megaMenu {
        width:100%;
        left:0;
    }
}
/*  ---------  Side Navigation   ---------*/
.sideNavIcon {
    margin-left:1em;
    cursor:pointer;
    color:var(--navHamburger);
}
.sideNav {
    position:absolute;
    top:0;
    right:0;
    height: 100%;
    width:0;/* Set to 0 when done */
    background: var(--navBackground);
    overflow-x:hidden;
    transition:0.5s;
    padding-top:3.8em;
    z-index:20;
    & a {
        float: left;
        display: block;
        width:100%;/* Change from topNav */
        color: var(--navText);
        text-align: left;
        padding: .5em 1em;
        text-decoration: none;
        cursor: pointer;
        border-block-start: medium solid transparent;
    }
    .sideNavClose {
        position:absolute;
        top:1vw;
        right:1vw;
        color:var(--navText);
        cursor:pointer;
        &:hover { color:var(--navTextHvr);}
    }
    & .active {
        background-color: var(--navActive);
        color: var(--navTextHvr);
        border-block-start: medium solid var(--navTextHvr);
    }

    & .icon {
        display: none;
        z-index: 2;
    }

    & .navDropdown {
        float: left;
        overflow: hidden;
        border-block-start: medium solid transparent;
        width:100%;
    }

    & .navDropdown .navDropBtn {
        border: none;
        border-radius: 0;
        box-shadow: none;
        outline: none;
        color: var(--navText);
        padding: .5em 1em;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
        cursor: pointer;
        width:100%;/*Change form topNav*/
        text-align:left;/* Change form topNav */
        i {
            padding-left: .5em;
            float:right;
            color: var(--navIcon);
        }
    }

    & .navDropdown-content {
        display: none;
        position: absolute;
        right:1em;/* Change fromm topNav */
        left:1em;/* Change fromm topNav */
        background-color: var(--navDropDown);
        /*min-width: 160px;/* Change fromm topNav */
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        padding: 1vh 0;
        border-radius: 0 0 1vh 1vh;
        transition:.5s;
        /* Here*/
        & a {
            float: none;
            color: var(--navText);
            padding: .5em 1em;
            text-decoration: none;
            width:auto;/*Change from topNav*/
            display: block;
            text-align: left;
            border-block-start: medium solid transparent;
            i { float:right;}
        }
    }

    & a:hover,
    .navDropdown:hover {
        border-block-start: medium solid white;
        background-color: var(--navBackground);
        color: var(--navText);
    }

    & a:hover,
    .navDropdown:hover .navDropBtn {
        background-color: var(--navBackground);
        color: var(--navTextHvr);
    }

    & .navDropdown-content a:hover {
        background-color: var(--navDropDown);
        color: var(--navTextHvr);
        border-block-start: medium solid white;
    }
}