@charset "utf-8";
/*	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 	Script:	styles2.css
 * 	Purpose:	Structural styles for the default 
 * 				website
 * 	Version:	3.0.0
 *	Author:		Neil Thomas
 * 	Edited:		19-06-2023 12:30
 * 	Checked: 	
 *	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

:root {
	--pageWidth: 1200px;
	--fontSize: 15;	/* NO UNITS */
}

/*	Only change items above this line unless you know what your doing! */

html, body, p, td, h6, li, input {
	font-family: 'Red Rose', sans-serif;
	font-size: calc( 12px + ( var(--fontSize) - 12) * ((100vw - 300px) / (2400 - 300)));
}

h1, h2, h3, h4, h5, button { font-family: 'Red Rose', sans-serif; }

h1 { font-size: 200%; }
h2 { font-size: 180%; }
h3 { font-size: 160%; }
h4 { font-size: 130%; }
h5 { font-size: 110%; }
/* */


header { margin-top:0; }
footer { }

#content { 
	min-height: 120px;
	/*	background-image: url('../images/picture.jpg');	/**/
	background-image: url('../images/seagull-reversed.png'); /**/
	background-repeat: no-repeat;
	background-position: bottom left;
}

.page-width { 
	max-width: var(--pageWidth);
	margin: 0 auto;
}

.cmx-logo {
	width: 100%;
	max-width: 250px;
	margin-left:1%;
	padding: 1vh 0 0.5vh 0;
}
@media (max-width:801px) {.cmx-logo { max-width: 210px;} }
@media (max-width:601px) {.cmx-logo { max-width: 160px;} }



.ow-slim-btn {
	padding: 3px 8px;
}

.mx-button {
	padding: 3px 8px;
	margin-bottom: 5px;
	border-radius: 4px;
}

.panelGradient {
	background-image: linear-gradient(var(--sub5) 20px, var(--sub3) 33px, var(--theme));
	color: var(--add5);
}

.databox p {
	margin:0;
	padding:6px 0;
}
		
.databox .data {
	font-weight: 700;
}

.databox .data:hover {
	border: thin solid var(--add2);
}

.panelGradient h3 {
	margin-top:0;
	margin-bottom: 5px;
}

.databox h5 {
	margin-top: 0px;
}

.databox p:hover { color: var(--add2);}
.yesterday:hover { font-weight: 700; font-family: Inter; font-size: 90%; }
.today:hover     { font-weight: 700; font-family: Inter; font-size: 90%; }
.ow-at:before {
	content: "@";
	padding:0 0.25em;
	font-size:90%;
}


/*	---	Flex Box settings	---	*/
.ow-row, .ow-row-padding {
	margin-bottom: 1vh;
}

.ow-row-padding {
	padding: 0 1% 0.5vh 1%;
}

.ow-cell { 
	min-height: 2.2em;
	padding-top: 6px;
}

.ow-flex-st {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}

.ow-flex-en {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
}

.ow-flex-sb {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.ow-flex-cr {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}
			
.ow-flex-col {
	display: flex;
	flex-flow: column wrap;
	justify-content: space-between;
}
			
.ow-flex-top { align-items: flex-start;}
.ow-flex-bottom {	align-items: flex-end; }
.ow-flex-center { align-items: center;}

.ow-flex-sb > * {
	flex-grow: 1;
}
.ow-flex-cr > * {
	flex: 1 0 0;
}

.ow-flex-gap {
	gap: 1.5vh 1%;
}

.ow-1col {
	min-width: 100%;
}

.ow-2col {
	max-width: calc( (var(--pageWidth) - 2%) / 2  );
	min-width: calc( var(--pageWidth) / 3 );
}

@media (max-width:1030px){
	.ow-2col { max-width: 50%; min-width: 45%;}
}

.ow-3col { 
	max-width: calc( ( var(--pageWidth) - 3% ) / 3);
	min-width: calc( var(--pageWidth) / 4 );
}

.ow-4col {
	max-width: calc( ( var(--pageWidth) - 4%) / 4  );
	min-width: calc( var(--pageWidth) / 5 ); 
}

@media (max-width:700px){
	.ow-4col { max-width: 100%;}
	.ow-2col { min-width:100%;}
}

.ow-5col {
	max-width: calc( var(--pageWidth) / 5 - 2% );
	min-width: calc( var(--pageWidth) / 6 );
}

.ow-6col {
	max-width: calc( var(--pageWidth) / 6 - 2% );
	min-width: calc( var(--pageWidth) / 7 );
}

/*	Overrides	*/
.w3-dropdown-content {
	box-shadow: 3px 3px 6px rgba(0,0,0, 0.5);
}