/* Common Styles for WebShell Master v4.27+00.09 - GDH 18-Jul-25 */

/* Add the following to the head section of each page (below the defaultstyles.css reference): */
/* <link rel="stylesheet" type="text/css" href="css/commonstyles.css"> */

/* Styles in this file are overridden by specific styles applied in-line and directly in a page */

/* ====== EXTERNAL FONTS USED ====== */
/* See content.css for usage and font families
   <link href='http://fonts.googleapis.com/css?family=Family+Name' rel='stylesheet' type='text/css'>
   should be placed in HTML page, after default.css */
   
/* Font Families used: Open+Sans:400,700|Roboto:400,900 */   

/* ====== COMMON BASIC SETTINGS ====== */

/* Page Backgound */
body
{
background-color: transparent;
}

#banbody, #galbody, #galbodytrans, #smbody, #sshowbody, #vidwrap, .noscrollbar
{
overflow: hidden; /* IE standards mode iframe scrolling fix */
}

h1, h1.bannercontent
/* Main Banner Title */
{
color: #FF8000; /* Orange Scheme #FF8000 */
font-family: 'Sirin-Stencil', 'Racing Sans One', 'Open Sans', Roboto, Tahoma, Geneva, Verdana, sans-serif; 
font-size: 260%;
font-weight: normal; /* normal | bold */
text-transform: none; /* none (Default) | capitalize | lowercase | uppercase */
}

.txtoverlay h1
{
font-size: 890%; /* Gallery Overlay Text (Default 890%) */
}

h2
/* Header Bar Title */
{
color: #C3C3C3;
font-family: 'Open Sans', Roboto, Tahoma, Geneva, Verdana, sans-serif;
font-size: 100%;
font-weight: normal;
}

#headerbar
{
/* Applies to Gallery, SideMenu and Content */
/* Use WebShell 'sf_headerBar' setting to display/hide Header Bar if needed, not CSS */
display: none; /* Initially hide - prevents 'flash' during loading */
height: 36px;
background-image: url('../Images-UI/contentbar-bg36.gif');
line-height: 35px; /* 1px less than bar height */
}

img.hbicon
{
margin: 8px;
width: 20px;
height: 20px;
float: left;
}

.nav-arrow-dn
{
height: 0px;
width: 0px;
position: relative;
top: 14px; /* Offsets */
right: 0px;
margin-left: 6px;
border-top: 6px solid; /* Set border, color from parent */
border-left: 6px solid transparent; /* force left triangle */
border-right: 6px solid transparent; /* force right triangle */
}


/* ====== BANNER AREA SETTINGS ====== */

#bannerblock
{
height: 80px; /* Normal Height */
overflow: hidden; /* Prevents mobile browsers expanding div/iframe on overflow */
display:flex;
/* justify-content: flex-end; /* (Default disabled) */
align-items:center;
}

.phol#bannerblock
{
height: 140px;
}

#bannerlogo
{
/* display: none; /* Hide if banner text centred */
display: block; /* Required if horiz centering (L/R margin - auto) */
margin: 24px auto; /* T/B L/R (Centring) */
margin-left: 16px; /* Enable if not centred */
/* margin-right: -10px; /* Offset if logo has blank area on RHS */
height: 48px;
max-width: 85%;
/* border: 1px solid #808080; /* Logo border */
/* border-radius: 50%; /* Rounded or 50% Circular */
cursor: pointer; /* Better than 'onmouseover' for mobile/touch */
/* background-color: rgba(0,0,0,1); /* semi-transparent */
/* padding: 8px; */
/* box-shadow: 4px 4px #000, -4px 4px #000, 4px -4px #000, -4px -4px #000; */
/* float: left; /* Enable if not centred [Not if Flexbox] */
}

.phol > #bannerlogo
{
height: 0px;
visibility: hidden;
}

h1.bannercontent
{
/* display: none; /* Hide if logo image centered */
margin: 0px auto; /* T/B L/R (Centring) */
margin-right: 18px; /* Enable if not centred */
text-align: center;
/* line-height:26px; */
text-shadow: 0.0em 0.0em 0.2em #02102E; /* CSS3 Offset-Rt, Offset-Dn, Offset-Blur, Colour */
/* text-shadow: 3px 3px 0 #02102E, -1px -1px 0 #02102E, 1px -1px 0 #02102E, -1px  1px 0 #02102E, 1px 1px 0 #02102E; /* Outline effect with shadow */
/* text-shadow: -1px -1px 0.1em #8DE5FC, 1px -1px 0.1em #8DE5FC, -1px  1px 0.1em #8DE5FC, 1px 1px 0.1em #8DE5FC; /* Outline with 'glow' effect */
cursor: pointer; /* Better than 'onmouseover' for mobile/touch */
/* float: right; /* Enable if not centred [Not if Flexbox] */
/* text-transform: uppercase; */
}

/* ====== COMMON FLEX DIV BASIC SETTINGS ====== */
.flex-container
{
display: flex;
flex-wrap: wrap;
justify-content: center;
/* align-items: center; */
}

.flex-container.align
{
align-items: center;
}

.flex-container > div
{
box-sizing: border-box;
width: 50%;
/* text-align: center; */
font-size: 100%;
overflow: hidden;
}

.fleximg

{
/* background-color: #E1E1E1; */
position: relative;
}

.fleximg img
{
max-width: 100%;
display: block; /* Prevents gap under image */	
}

.fleximg .cover
{
/* Note: Conflicts with align-items */
width: 100%;
height: 100%;
object-fit: cover;
}

.fleximg .mobscrnsht
{
max-width: 80%;
border: 0px solid #C3C3C3;
margin: 25px auto;
padding: 10px;
border-radius: 25px;
background-color: #BBBBBB;
}

.fleximg #imglabel
{
z-index: 1;
position: absolute;
bottom: 0px;
left: 14px;
padding: 0px 8px;
border: 1px solid #888888;
border-radius: 4px;
}

.flexcontent
{
padding: 18px;
}

.flexcontent h1
{
font-family: 'Jost', 'Open Sans', Roboto, Tahoma, Geneva, Verdana, sans-serif; 
font-size: 410%;
font-weight: normal;
font-style: normal;
/* color: #3C3C3C; */
text-shadow: none;
text-transform: none;
white-space: normal;
line-height: 1em;
margin-bottom: 4%;
}

.flexcontent h2
{
font-family: 'Jost', 'Open Sans', Roboto, Tahoma, Geneva, Verdana, sans-serif; 
font-size: 220%;
font-weight: normal;
font-style: normal;
/* color: #3C3C3C; */
text-shadow: none;
text-transform: none;
white-space: nowrap;
}

.flexcontent p
{
font-family: 'Open Sans', Roboto, Tahoma, Geneva, Verdana, sans-serif; 
font-size: 120%;
font-weight: normal;
font-style: normal;
color: #3C3C3C;
text-shadow: none;
text-transform: none;
text-align: left;
white-space: normal;
}

/* ====== Media section must come below any styles that it changes ====== */
@media all and (max-width: 800px) /* Applies while window (iframe) width below this value (not IE<9)*/
{
	#bannerblock
	{
	/* height: 120px; */
	}
	
	#bannerlogo
	{
	/* margin: 24px auto; /* T/B L/R (Centring) */
	/* margin-left: 16px; /* Enable if not centred */
	/* height: 48px;
	}
	
	h1.bannercontent
	{
	/* Adjust for 2 line site title */
	font-size: 200%;
	/* line-height: 34px; */
	/* margin-top: 32px; */
	/* margin-right: 0px; */
	/* max-width: 33%; */
	}
	
	.txtoverlay h1
	{
	font-size: 760%;
	}
	
	.flexcontent h1
	{
	font-size: 360%;
	}
	
	.flexcontent h2
	{
	font-size: 180%;
	}
}

/* ====== Media section must come below any styles that it changes ====== */
@media all and (max-width: 660px) /* Applies while window (iframe) width below this value (not IE<9)*/
/* Single column style for narrow (mobile) devices - also set narrow device max-width in _wsframestyles to same value + 2 x container padding (frame border) */
{
	#bannerblock, .phol#bannerblock
	{
	height: 80px;
	}
	
	#bannerlogo
	{
	/* margin: 22px auto; /* T/B L/R (Centring) */
	margin-left: 16px; /* Enable if not centred */
	height: 36px;
	/* float: none; */
	}

	h1.bannercontent
	{
	/* Adjust for 2 line site title */
	font-size: 190%;
	line-height: 26px;
	/* margin-top: 14px; */
	/* margin-right: 10px; */
	max-width: 40%;
	}
	
	.txtoverlay h1
	{
	font-size: 560%;
	}
	
	.flex-container > div
	{
	width: 100%;
	}
		
	.flexcontent h1
	{
	font-size: 420%;
	}
	
	.flexcontent h2
	{
	font-size: 180%;
	}
}

/* ====== Media section must come below any styles that it changes ====== */
@media all and (max-width: 460px) /* Applies while window (iframe) width below this value (not IE<9)*/
{
	#bannerblock, .phol#bannerblock
	{
	/* height: 64px; */
	}
	
	#bannerlogo
	{
	margin: 25px auto; /* T/B L/R (Centring) */
	margin-left: 16px; /* Enable if not centred */
	/* margin-right: -10px; /* Logo has large space on RHS */
	height: 28px;
	/* float: none; */
	}
	
	h1.bannercontent
	{
	/* Adjust for 2 line site title */
	font-size: 140%;
	line-height: 22px;
	/* margin-right: 18px; */
	margin-left: 8px;
	/* margin-top: 20px; */
	max-width: 33%;
	}
	
	.txtoverlay h1
	{
	font-size: 390%;
	}
	
	.flexcontent h1
	{
	font-size: 320%;
	}
	
	.flexcontent h2
	{
	font-size: 156%;
	}
}


/* ====== COMMON SPLASH PAGE BASIC SETTINGS ====== */

/* Applies to General, Xmas and New Year Splash pages*/

.splashimgframe
{
margin:0 auto; /* centre in page */
padding: 6px; /* frame 'border' */
background-image: url('../Images-UI/framebg.jpg');
visibility: hidden; /* Initial state to avoid sizing script artefacts */
}

.splashframedimg
{
display: block; /* Remove bottom space and allow centring */
margin: 0 auto; /* centre in frame width */
padding: 2px; /* inner frame 'border' */
background-image: url('../Images-UI/boxoutbg.gif'); /* Default */
/* background-image: url('../Images-UI/boxframebg.jpg'); */
/* border: 2px solid #808080; /* Image border */
}

#spltopspacer, #splbotspacer
{
height: 100px;
}

/* ====== GALLERY PAGE BASIC SETTINGS ====== */

#galbody
{
/* background-color: #FFFFFF; */
background-color: transparent;
/* background-image: url('../Images/gallerybg.jpg'); */
}

#galbodyparallax
{
background-color: transparent;
/* background-image: url('../Images/gallerybg.jpg'); */
}

.galimg
{
display: block; margin: 0 auto; max-width: 100%; max-height: 360px;
}

.galtopsidemargin
{
margin: 0px; margin-bottom: 0;
/* background-image: url('../Images/limedplanks2-bg.jpg'); */
}

#galwrapper
{
position: relative;
}

.txtoverlay
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:100; /* On top of slides */
opacity: 1;
visibility: visible;
}

.txtoverlay h1
{
margin-bottom: -2%;
font-family: "Fjalla One", "Amatic SC", "Shadows Into Light Two", Tahoma, Geneva, Verdana, sans-serif;
font-weight: normal;
white-space: nowrap;
text-transform: uppercase;
color: rgba(255,230,179,1);
text-shadow: 3px 3px 0.05em #96002E, -1px -1px 0 #96002E, 1px -1px 0 #96002E, -1px 1px 0 #96002E, 1px 1px 0 #96002E;
}

.txtoverlay p
{
/* display: none; */
margin: 0px auto;
font-family: "Open Sans", "Happy Monkey", Verdana, Geneva, Tahoma, sans-serif;
font-weight: normal;
font-size: 360%;
font-style: italic;
white-space: nowrap;
color: rgba(255,230,179,1);
text-shadow: 3px 3px 0.05em #96002E, -1px -1px 0 #96002E, 1px -1px 0 #96002E, -1px 1px 0 #96002E, 1px 1px 0 #96002E;
}

/* ====== COMMON ANIMATION SETTINGS (CSS3) ====== */

/* Fade-In On Load */
.fadein
{
animation: fadein 2s; /* Standard */
}

/* Standard */
@keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}
/* Fade-In End */

/* Delayed Fade-Out On Load */
.delfadeout
{
	/* Name, duration, delay, filltype */
	animation: delfadeout 2s 10s forwards; /* Standard */
}

/* Standard */
@keyframes delfadeout {
    from {opacity: 1; visibility: visible;}
    to {opacity: 0; visibility: hidden;}
}
/* Del-Fade-Out End */

/* Zoom-In by Height On Load */
.zoominh
{
visibility: visible !important;
animation: zoominh 3s 0s backwards; /* Standard */
}

/* Standard */
@keyframes zoominh {
    from {max-height: 0%;}
    to {max-height: 100%;}
}

/* Zoom-In by Width On Load */
.zoominw
{
visibility: visible !important;
animation: zoominw 3s 0s backwards; /* Standard */
}

/* Standard */
@keyframes zoominw {
    from {max-width: 0%;}
    to {max-width: 100%;}
}
/* Zoom-In End */

/* ====== COMMON TRANSITION SETTINGS (CSS3) ====== */

/* Transition on property change */
.transop
{
opacity: 0.25;
transition: opacity 2s ease-in-out;	/* Standard */
}

.transop:hover
{
opacity: 1;
}