@charset "utf-8";
/*	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 	Resource:	main.css        *        v:5.0.0
 * 	Author:		Neil Thomas     *   October 2025
 *  Created:    2025-08-20 16:31:06
 * 	Last Edit:  2025-10-03 15:19:34
 *	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 	Role:	All public website global styles
 * 	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

 /*	Variables
 * 	Generally you chould only change values here to affect the whole site	*/
html {
    --pageWidth: 1200;
    --rowGap: 2vh;
    --colGap: 1vw;
}

/*  ~~~~~   w3.css MODIFICATIONS    ~~~~~ */
.w3-stretch {
    padding: 0 1em;
}
.w3-button {
    border-radius: 1.5em;
    padding: 6px 16px;
}
.ows-menu .w3-button { padding: 8px 16px;}

.w3-card, .w3-card-2 {
    box-shadow: var(--shadow1);
}

.w3-modal-content {
    /*  This centers modal popups */
    position:fixed;
    margin: 0;
    top: 50%;
    left: 50%;
    padding-top: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media (max-width: 600px) { .w3-modal-content { margin:0; max-width:95%; min-width:90%!important;}}
@media (max-width: 768px) { .w3-modal-content { max-width: 80%!important; min-width:70%!important;}}
@media (max-width: 993px) { .w3-modal-content { max-width: 75%;}}

/*  These styles are common across all pages */ 
html, body {
    font-family: Inter, serif;
    font-size: clamp(0.8125rem, 0.7188rem + 0.375vw, 1rem); /* 13 to 16px */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Red Rose', Inter, serif;
    margin:0;
}

h1 {font-size: 220%;}
h2 {font-size: 190%;}
h3 {font-size: 155%;}
h4 {font-size: 140%;}
h5 {font-size: 120%;}
h6 {font-size: 105%;}

#siteContent { position:relative;}

#siteHeader { background-size: cover!important;}

.pageWidth {
    max-width: calc( var(--pageWidth) * 1px);
    margin:auto;
    padding:0 0.5vw;
}

.ows-headerGrid {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px 1vw;
    grid-template-rows: auto;
    grid-template-areas: "logo . ." "logo location location" "menu1 menu1 menu1";
}

.ows-footerGrid {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 1vw;
    grid-template-rows:auto;
    grid-template-areas: "myVersion cmxVersion";
    align-items:baseline;
    font-style: italic;
    color: var(--color7);
}

.myVersion {
    font-size: 80%;
}

.myVersion span { color: var(--color8);}

.cmxVersion{
    text-align: right;
}

#siteLogo {
    width:auto; 
    max-height: 80px; 
    min-height:55px; 
    padding: 0.5vh 0 0.5vh;
}
        
.ows-location {
    grid-area: location;
    text-align: right;
    padding-bottom:0.5vh;
}

.ows-location span {
    display:inline-block;
    min-width:8em;
    font-weight: 700;

}

.ows-stationName {
    grid-area: station;
    text-align: right;
}

.ows-at:before { 
    content: "at"; 
    padding: 0 0.5em; 
    font-size: 80%;
}

/*  ~~~~~~~  GULL  ~~~~~~~~~~ */
/*	Used for the Gull bottom left	*/
#ows-Gull {
    position: fixed;
    bottom: 0px;
    left: 3%;
    width: 9vw;
    min-width: 70px;
    max-width: 120px;
    height: auto;
    z-index: -200;
    transform-origin: bottom center;
}

@keyframes gull-FadeIn {
    0% {opacity:0}
    100% {opacity: 1}
}

@keyframes gull-GrowUp {
    0% {transform: scale(0%)};
    100% {transform: scale(100%)};
}

@keyframes gull-SlideIn-from-Left {
    0% { left: -5%; opacity:0; transform: scale(10%);}
    100% { left: 3%; opacity:1; transform: scale(100%);}
}

@keyframes gull-SlideIn-from-Right {
    0% { rotate: y 90deg; left: 100%;}
    100% { left: 3%;}
}

/*  Gull in any other position  */
.ows-gull2 {
    position: absolute;
    bottom: 0;
    right: 1em;
    width:5em;
    height:auto;
    transform-origin: bottom center;
    animation: gull-GrowUp 2s
}

/*  MENU    */
/*  Hamburger */
.ows-menu {
    grid-area: menu1;
    text-align: left;
}

/*  Menu Sidebar    */
#menuSidebar {
    transform-origin: 0 0;
    width: 15em;
    min-width:180px;
}

.menuIcon {
    float:right;
    margin-bottom:-0.3em;
    padding-left:0.5em;
}

.mnuDivider {
    height: 2px!important;
    background: var(--color2);
    /*margin-top:-1vh;*/
    padding:0!important;
}
/*  Both    */
#menuSidebar .w3-button,
.ows-menu .w3-button {
    border-radius: 0;
}

/* TITLE Bars */
.ows-titleFlex {
    /* Any number of items as long as the fit on one row  */
    display:flex;
    justify-content: space-between;
    align-items:baseline;
    row-gap: var(--rowGap);
}

.ows-titleGrid {
    /* Only TWO items on this bar - the second max 2em wide  */
    display:grid;
    grid-template-columns: 1fr 2em;
    grid-template-rows: auto;
    gap: 0 var(--colGap);
    align-items: baseline;
    grid-auto-rows: 0;
    margin-bottom:0;
}

.ows-titleFlex *,
.ows-titleGrid * {
    margin:0;
}

/*  ~~~~~  BUTTON BAR  ~~~~~ */
.ows-btnBar {
    display: flex;
    justify-content: space-between;
    gap: 0.3em calc( var(--rowGap) / 2);
    flex-flow:row wrap; 
    align-items: baseline;
}
.ows-btnBar > div,
.ows-btnBar > button {
    flex-grow:1;
}

.ows-btnBar > p { margin:0;}

.ows-btnBar > div.w3-button,
.ows-btnBar >button.w3-button {
    padding: 4px 1.5em;
    border: 1px solid var(--color5);
}

.ows-btnBar > div.w3-button:hover {
    background: var(--gradient-up);
    color: var(--color2)!important;
}
.ows-btnBar > i {padding: 0 0.5vw}

.ows-stretch { flex-grow:4;}

/*  ~~~~~   DATA ROWS  ~~~~~  */
/*  Using a grid */
.ows-dataRow2c {
    display: grid;
    grid-template-columns: 1fr minmax(5em,7em);
    grid-template-areas: 'label data';
    grid-template-rows: auto;
    gap: 0 0;
    align-items:baseline;
    margin-top: 0.5vh;
}

.label {grid-area: label;}

.ows-dataRow2c p {
    margin:0; 
    padding: 0.2vh 0
}

.w3-container .label {
    margin:0 0 0 -0.5em!important; 
    padding:0.2vh 0 0.2vh 0.5em
}

.data {
    grid-area: data;
    text-align:right;
}

.w3-container .data {
    margin:0 -0.5em 0 0!important;
    padding:0 0.5em 0 0
}

.ows-dataRow2c:last-of-type { margin-bottom: 1vh;}

div.ows-dataRow2c:hover p {
    background: var(--gradient-databar);
    font-weight: 600;
}

.ows-dataRowFlex,
.ows-dataRowFlex-Heading {
    display:flex;
    justify-content:space-between;
    column-gap: 0;
    margin:0.4vh -16px 0.4vh -16px;
    padding:0.2em 1em 0.2em 1em;
}

.ows-dataRowFlex-Heading { border-bottom:1px solid var(--color5);}

div.ows-dataRowFlex:last-of-type{ margin-bottom:1vh;}

div.ows-dataRowFlex p { margin:0;}
    
.ows-dataRowFlex:hover {
    background: var(--gradient-databar);
    font-weight:600;
}

/*  ~~~~~   ANIMATIONS   ~~~~~ */
/*  The Menu    */
@keyframes openMenu {
    0% { opacity: 0; transform: scaleX(0); }
    100% { opacity: 100%; transform: scaleX(1); }
}

@keyframes closeMenu {
    0% {opacity: 100%; transform: scaleX(1);}
    100%{opacity: 0; transform: scaleX(0);}
}

/*	~~~~~~~	  GRIDS   ~~~~~~~*/
.ows-grid {
    display:grid;
    grid-gap: var(--rowGap) var(--colGap);
    margin-bottom: var(--rowGap);
    --space: calc( ( var(--pageWidth) * 1px ) - var(--colGap) );
    &.col7 {
        --min-size: calc( var(--space) / 8 );
    }
    &.col6 {
        --min-size: calc( var(--space) / 7 );
    }
    &.col5 {
        --min-size: calc( var(--space) / 6 );
    }
    &.col4 {
        --min-size: calc( var(--space) / 5 );
    }
    &.col3 {
        --min-size: calc( var(--space) / 4 );
    }
    &.col2 {
        --min-size: calc( var(--space) / 3 );
    }
    &.col1 {
        --min-size: 100%;
    };
	grid-template-columns: repeat( auto-fill, minmax( var(--min-size), 1fr ));
    grid-template-rows:auto;
    grid-auto-rows:minmax(1em, auto);
}

/*  ~~~~~~  FLEXBOXES    ~~~~~*/
/*  Styles for basic layout */
.ows-flex {
    display:flex;
    gap: var(--rowGap) var(--colGap);
    margin-bottom: var(--rowGap);
    /*justify-content: stretch;*/
    flex-flow: row wrap;
    --space: calc( ( var(--pageWidth) * 1px ) - var(--colGap));
    & > div {
        flex:1;
        min-height: 1em;
    }
    &.col7 > div { flex-basis: calc( var(--space) / 8); flex-grow:1; }
    &.col6 > div { flex-basis: calc( var(--space) / 7); flex-grow:1; }
    &.col5 > div { flex-basis: calc( var(--space) / 6); flex-grow:1;}
    &.col4 > div { flex-basis: calc( var(--space) / 5); flex-grow:1;}
    &.col3 > div { flex-basis: calc( var(--space) / 4); flex-grow:1; }
    &.col2 > div { flex-basis: calc( var(--space) / 3); flex-grow:1;}
    &.col1 > div { min-width: 100%; }
}
/*  Fixed width boxes */
.ows-fixed {
    justify-content:space-around;
    &.ows-flex.col7 > div { max-width: calc( ( var(--pageWidth) * 1px - (var(--colGap) * 6)) / 7);}
    &.ows-flex.col6 > div { max-width: calc( ( var(--pageWidth) * 1px - (var(--colGap) * 5)) / 6); }
    &.ows-flex.col5 > div { max-width: calc( ( var(--pageWidth) * 1px - (var(--colGap) * 4)) / 5); }
    &.ows-flex.col4 > div { max-width: calc( ( var(--pageWidth) * 1px - (var(--colGap) * 3)) / 4); }
    &.ows-flex.col3 > div { max-width: calc( ( var(--pageWidth) * 1px - (var(--colGap) * 2)) / 3); }
    &.ows-flex.col2 > div { max-width: calc( ( var(--pageWidth) * 1px - (var(--colGap))) / 2); }
}
/*  Growing Flexbox individual divs */
.ows-flex.col7.ows-fixed .ows-growX2 {
    max-width: calc( var(--pageWidth) * 1px / 7 * 2 - var(--colGap) );
}
.ows-flex.col6.ows-fixed .ows-growX2 {
    max-width: calc( var(--pageWidth) * 1px / 3 - var(--colGap));
}
.ows-flex.col5.ows-fixed .ows-growX2 {
    max-width: calc( var(--pageWidth) * 1px / 5 * 2 - var(--colGap));
}
.ows-flex.col4.ows-fixed .ows-growX2 {
    max-width: calc( var(--pageWidth) * 1px / 2 - var(--colGap) );
}
.ows-flex.col3.ows-fixed .ows-growX2 {
    max-width: calc( var(--pageWidth) * 1px / 3 * 2 - var(--colGap));
}
.ows-flex.col2.ows-fixed .ows-growX2 {
    max-width: calc( var(--pageWidth) * 1px);
}
.ows-flex.col7.ows-fixed .ows-growX3 {
    max-width: calc( var(--pageWidth) * 1px / 7 * 3 - (var(--colGap) * 2));
}
.ows-flex.col6.ows-fixed .ows-growX3 {
    max-width: calc( var(--pageWidth) * 1px / 2 - (var(--colGap) * 2));
}
.ows-flex.col5.ows-fixed .ows-growX3 {
    max-width: calc( ( var(--pageWidth) * 1px ) / 5 * 3 - (var(--colGap) *2 ));
}
.ows-flex.col4.ows-fixed .ows-growX3 {
    max-width: calc( ( var(--pageWidth) * 1px) / 4 * 3 - (var(--colGap) * 2 ));
}
.ows-flex.col7.ows-fixed .ows-growX4 {
    max-width: calc( ( var(--pageWidth) * 1px) / 7 * 4 - (var(--colGap) * 3 ));
}
.ows-flex.col6.ows-fixed .ows-growX4 {
    max-width: calc( ( var(--pageWidth) * 1px) / 6 * 4 );
}
.ows-flex.col5.ows-fixed .ows-growX4 {
    max-width: calc( (var(--pageWidth) * 1px) / 5 * 4 );
}

/*  ~~~~~   Main Panel animations. ~~~~~  */
/* No animations have been added to the site but they are still available
   This is to make the site more accessible.  Add any of the following
   style animations to any element as required.
   To add your own a good place to start is animista.net */
.ows-animate-slideLTR {
    transform-origin: top left;
    animation: slideSideways 2s;
}
@keyframes slideSideways {
    0%   { scale:  10% 1;}
    100% { scale: 100% 1;}
}
.ows-animate-slideRTL {
    transform-origin: top right;
    animation: slideSideways 2s;
}

.ows-animate-slideUp {
    transform-origin: bottom center;
    animation: slideVertical 2s;
}
@keyframes slideVertical {
    0%  { scale: 1 10%; }
    100% { scale: 1 100%;}
}
.ows-animate-slideDown {
    transform-origin: top center;
    animation: slideVertical 2s;
}

.ows-animate-entryOne {
    transform-origin: top center;
    animation: entryOne 2s;
}
@keyframes entryOne {
    0% { translate: 0 3em ;scale: 1 .1; opacity: .1;}
    20% { scale: 1 1; }
    80% { translate: 0 0;}
    100% { opacity: 1;}
}