/* Common Styles for WebShell 4.16+55.03 DCQ - GDH 14-Nov-18 */

/* 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: Roboto */   

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

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

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

h1, h1.bannercontent
/* Main Banner Title */
{
color: #0202FD; /* Dark Red Scheme #A40000 */
font-family: Oswald, Roboto, "Open Sans", Tahoma, Geneva, Verdana, sans-serif;
font-size: 220%;
font-weight: normal; /* normal | bold */
text-transform: none; /* none (Default) | capitalize | lowercase | uppercase */
}

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

/* Link Settings */
a:link {color: #0202FD; text-decoration:none;}      /* unvisited link */
a:visited {color: #223DC9; text-decoration:none;}  /* visited link */
a:hover {color: #DB0000; text-decoration:underline;}  /* mouse over link - a:hover MUST come after a:link and a:visited */
a:active {color: #FD0000; text-decoration:underline;}  /* selected link - a:active MUST come after a:hover */

#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;
}


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

#bannerblock
{
height: 100px; /* Normal Height */
overflow: hidden; /* Prevents mobile browsers expanding div/iframe on overflow */
}

#bannerlogo
{
/* display: none; /* Hide 'Logo' */
display: block; /* Required if horiz centering (L/R margin - auto) */
margin: 10px auto; /* T/B L/R (Centring) */
margin-left: 4%; /* Enable if not centred */
/* width: 64px; */
height: 80px;
max-width: 85%;
float: left; /* Enable if not centred */
/* border: 2px solid #A40000; /* Logo border */
/* border-radius: 50%; /* Rounded or 50% Circular */	
cursor: pointer; /* Better than 'onmouseover' for mobile/touch compatibility */
}

h1.bannercontent
{
/* display: none; /* Hide if logo image centered */
margin-top: 30px;
margin-right: 4%;
margin-left: 18px;
line-height: 40px;
/* text-align: center; */
/* text-shadow: 0.0em 0.0em 0.15em #E2D2B1; /* CSS3 Offset-Rt, Offset-Dn, Offset-Blur, Colour */
/* text-shadow: 3px 3px 0 #A40000, -1px -1px 0 #A40000, 1px -1px 0 #A40000, -1px  1px 0 #A40000, 1px 1px 0 #A40000; /* Outline effect with shadow */
/* text-shadow: -1px -1px 0.1em #E2D2B1, 1px -1px 0.1em #E2D2B1, -1px  1px 0.1em #E2D2B1, 1px 1px 0.1em #E2D2B1; /* Outline with 'glow' effect */
float: right;
cursor: pointer; /* Better than 'onmouseover' for mobile/touch compatibility */
}

/* ====== 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: 8px auto; /* T/B L/R (Centring) */
	/* margin-left: 16px; /* Enable if not centred */
	/* height: 110px; */
	}
	
	h1.bannercontent
	{
	/* Adjust for 2 line site title */
	font-size: 200%;
	line-height: 34px;
	margin-top: 34px;
	max-width: 40%;
	}
}

/* ====== 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
	{
	height: 80px;
	}
	
	#bannerlogo
	{
	margin: 10px auto; /* T/B L/R (Centring) */
	margin-left: 14px; /* Enable if not centred */
	height: 60px;
	/* float: none; */
	}

	h1.bannercontent
	{
	/* Adjust for 2 line site title */
	font-size: 180%;
	line-height: 32px;
	margin-top: 22px;
	/* margin-right: 10px; */
	max-width: 45%;
	}
}

/* ====== Media section must come below any styles that it changes ====== */
@media all and (max-width: 490px) /* Applies while window (iframe) width below this value (not IE<9)*/
{
	#bannerblock
	{
	height: 68px;
	}
	
	#bannerlogo
	{
	margin: 10px auto;
	margin-left: 10px; /* Enable if not centred */
	height: 48px;
	/* float: none; */
	}
	
	h1.bannercontent
	{
	/* Adjust for 2 line site title */
	font-size:140%;
	line-height: 24px;
	margin-right: 12px;
	margin-left: 12px;
	margin-top: 8px;
	max-width: 28%;
	}
}


/* ====== 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 #49196D /* Image border */
}

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

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

#galbody
{
/* background-color: #F4F1EC; /* Limed White */
/* background-color: transparent; /* Default */
/* background-image: url('../Images/limedplanks2-bg.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: 12px; margin-bottom: 0; */
background-image: url('../Images/limedplanks2-bg.jpg');
}

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

/* Fade-In On Load */
.fadein
{
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 2s; /* Firefox < 16 */
        animation: fadein 2s; /* Standard, IE10+ */
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

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

/* Zoom-In by Height On Load */
.zoominh
{
visibility: visible !important;
-webkit-animation: zoominh 3s 0s backwards; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: zoominh 3s 0s backwards; /* Firefox < 16 */
        animation: zoominh 3s 0s backwards; /* Standard, IE10+ */
}

/* Firefox < 16 */
@-moz-keyframes zoominh {
    from {max-height: 0%;}
    to {max-height: 100%;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes zoominh {
    from {max-height: 0%;}
    to {max-height: 100%;}
}

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

/* Zoom-In by Width On Load */
.zoominw
{
visibility: visible !important;
-webkit-animation: zoominw 3s 0s backwards; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: zoominw 3s 0s backwards; /* Firefox < 16 */
        animation: zoominw 3s 0s backwards; /* Standard, IE10+ */
}

/* Firefox < 16 */
@-moz-keyframes zoominw {
    from {max-width: 0%;}
    to {max-width: 100%;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes zoominw {
    from {max-width: 0%;}
    to {max-width: 100%;}
}

/* Standard, IE10+ */
@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;
-webkit-transition: opacity 2s ease-in-out; /* Safari, Chrome and Opera > 12.1 */
   -moz-transition: opacity 2s ease-in-out; /* Firefox < 16 */
        transition: opacity 2s ease-in-out;	/* Standard, IE10+ */
}

.transop:hover
{
opacity: 1;
}