/* Content Styles for B&H WebShell 4.53+56.28 - GDH 02-Apr-22 */

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

/* Image paths are relative to this css file, not the page file */

/* ====== EXTERNAL FONT FAMILIES ====== */
/* External fonts can be used either by 'link' ref in HTML page or
   using '@import' in stylesheet:
   <link href='http://fonts.googleapis.com/css?family=Family+Name' rel='stylesheet' type='text/css'>
   @import url(http://fonts.googleapis.com/css?family=Family+Name);
   Multiple families can be imported together if separated by "|" (2 max in IE)
   Due to blocking and rendering issues especially in IE, use of 'link' method is prefered.
   See: www.google.com/fonts and www.stevesouders.com/blog/2009/04/09/dont-use-import */

/* --- FONTS USED -- */
/* Oswald:300,|Open+Sans:400,400italic,700 */

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

/* Page Background (Supplements commonstyles.css)*/
body
{
/* background-color: #F8F8F8; */
font-size: 12pt; /* Default - use % for all other sizes */
}

/* h1, h2 defined in commonstyles.css */

h3
/* Content Heading */
{
margin-top: 18px;
color: #121212; /* Orange Scheme #FF6600 */
font-family: Oswald, 'Roboto Condensed', 'Open Sans', Roboto, Tahoma, Geneva, Verdana, sans-serif;
font-size: 200%;
font-weight: bold;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.06em;
/* padding-left: 6px; */
/* border-left: 4px solid #1383EC; */
}

h4
/* Content Sub-Headings */
{
margin-top: 8px;
color: #121212; /* Orange Scheme #FF6600 */
font-family: Oswald, 'Roboto Condensed', 'Open Sans', Roboto, Tahoma, Geneva, Verdana, sans-serif;
font-size: 160%;
font-weight: bold;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.06em;
/* padding-left: 6px; */
/* border-left: 4px solid #1383EC; */
}

h5
/* Image Banner Title and Heading Strapline */
{
color: #606060;
font-family: 'Open Sans',Roboto, Tahoma, Geneva, Verdana, sans-serif;
font-size: 100%;
font-weight: normal;
}

h5.byline
{
margin-top: -2px;
color: #3C3C3C; /* Orange Scheme #FF6600 */
font-family: 'Open Sans', Roboto, Tahoma, Geneva, Verdana, sans-serif;
font-size: 100%;
font-weight: normal;
/* font-style: italic; */
text-align: center;
/* padding-left: 6px; */
/* border-left: 4px solid #1383EC; */
}

h6
/* Image Caption */
{
color: #505050;
font-family: 'Open Sans', Roboto, Tahoma, Geneva, Verdana, sans-serif;
font-size: 80%;
font-weight: normal;
}

h6.caption
/* Image Caption */
{
text-align: center;
padding: 4px 0px;
}

p, td, label
/* Content Text */
{
color: #3C3C3C;
font-family: 'Open Sans', Verdana, Geneva, Tahoma, sans-serif;
font-size: 110%;
font-weight: normal;
line-height: normal; /* Default: 'normal' is approx 120%. Values can be in %, px, pt, cm, etc */
}

p.alignrt
{
text-align: right;
}

p.firstline
{
margin-top: 6px; /* Default = 0 (or 6px if boxoutinner T/B margin = 0) */
}

p.lastline
{
margin-bottom: 6px; /* Default = 0 (or 6px if boxoutinner T/B margin = 0) */
}

p.parasep, p.paraseplast
{
margin: 0px;
padding: 8px 0px; /* T-B / L-R */
border-bottom: 1px dotted #B4B4B4;
}

p.paraseplast
{
border-bottom: 0px;
}

p.revmark
{
margin-left: -8px;
padding-left: 6px;
border-left: 2px solid #888888;
}

li, ul, ol
/* Ordered and Unordered Lists */
/* Only bullets and numbers controlled by this style */
/* Note: Margin parameter renders differently in different browsers - do not use */
{
color: #808080;
font-family: 'Open Sans', Verdana, Geneva, Tahoma, sans-serif;
font-size: 100%;
font-weight: normal;
line-height: normal;
}

hr
/* Horizontal Lines */
{
color: #808080; /* IE */
background-color: #808080; /* FF, CR, etc */
width: 80%;
}

/* Link Settings */
a:link {color: #E00065; text-decoration: none;}        /* 1-unvisited */
a:visited {color: #E00065; text-decoration: none;}     /* 2-visited */
a:hover {color: #E00065; text-decoration: underline;}  /* 3-hover */
a:active {color: #FA0070; text-decoration: underline;} /* 4-selected */

a img.boxoutimg:hover
{
/* Link image hi-light */
opacity: 0.7;
width: 98%;
padding: 1%;
}

a span.imghilightbg
{
/* Enclose <img> for consistent hi-light over any page background */
display: block;
background-color: #888888;
}

.outlined
{
border: 1px solid #D4D4D4;
}

.overlined
{
border-top: 1px solid #49196D;
}

div.highlighted
{
background-image: url('../Images-UI/highlightbg.jpg');
background-color: #4DBED7;
border: 0px solid #49196D;
margin: 0 auto; /* Centre */
max-width: 100%;
}

h4.highlighted
{
color: #100080; /* Blue-Purple */
}

h5.highlighted
{
color: #FFFFFF;
}

a span.highlighted
{
/* Enclose <img> for consistent hi-light over any page background */
display: block;
/* background-image: url('../Images-UI/highlightbg.jpg'); */
background-color: #E1E1E1;
}

a.hlbtn, button.hlbtn
{
/* background-image: url('../Images-UI/highlightbg.jpg'); */
background-color: #5C5C6C; /* Orange Scheme #FF6600 */;
border: 2px solid #151515; /* Delitech Blue #0084E3 */
padding: 4px 6px;
color: #FAFAFA; /* Link Text */
}

a.hlbtn.disabled, a:hover.hlbtn.disabled, button.hlbtn.disabled, button:hover.hlbtn.disabled
{
background-color: #888888;
border: 2px solid #888888;
padding: 4px 6px;
color: #C3C3C3;
text-decoration: none;
cursor: not-allowed;
}

/* Status Message ('Loading...' etc) - this overides system default styles */
img.statmsg
{
margin: 10px;
float: left;
}

p.statmsg
{
margin: 0; 
line-height: 36px;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
font-size: 120%;
font-weight: normal;
color: #505050;
}

span.quoteunquote
{
color: #96002E;
font-weight: bold;
font-size: 120%;
}

/* ====== PAGE CONTENT SETTINGS ====== */

#pagecontainer
{
/* margin: 0 auto; */
min-width: 352px; /* boxoutcol (316) / 90% */
max-width: 100%;
overflow: hidden;
-webkit-animation: fadein 1.5s;
   -moz-animation: fadein 1.5s;
        animation: fadein 1.5s;
/* keyframes in commonstyles.css*/
}

/* #headerbar settings in commonstyles.css */

#headingtext
{
padding: 0px 18px 1px 18px; /* top right bot left; */
}

#bodytext
{
padding: 4px 18px 18px 18px; /* top right bot left; */
min-width: 324px; /* +padding = 360px = min scrn width */
max-width: 100%;
overflow: hidden; /* Prevents text flow around boxoutcol */
}

.boxoutcol
{
padding: 6px;
margin: 0px 12px 12px 12px; /* top right bot left; */
width: 314px; /* 'boxoutframe' width + padding*2 (Required for IE<9) */
/* background-image: url('../Images-UI/columnfillbg.gif'); /* Default */
float: right;
/* overflow: hidden; /* Ensures div expands to fill entire area */
}

.boxoutrow
{
box-sizing: border-box; /* Sizes include padding + border */
margin: 0 auto; /* Centre across page */
/* padding: 6px 6px 6px 6px; /* T/R/B/L */
width: 100%; /* 'boxoutframe' width + padding (Required for IE) */
/* background-image: url('../Images-UI/columnfillbg.gif'); /* Default */
overflow: hidden; /* Ensures div expands to fill entire area */
/* border-radius: 4px; /* Rounded Corners */
}

.boxoutwrapper
{
box-sizing: border-box; /* Sizes include padding + border */
margin: 0 auto; /* Centre in boxoutrow */
max-width: 100%;
padding: 0px; /* Allow rboxoutframe box-shadow to show */
overflow: hidden; /* Ensures div fills entire area when eq-height sizing */
/* border-radius: 4px; /* Rounded Corners */
}

.boxoutframe, .rboxoutframe, .rboxoutframe25, .rboxoutframe33, .rboxoutframe50, .tblframe
{
box-sizing: border-box; /* Sizes include padding + border */
padding: 0px;
border: 1px solid #A1A1B1;
/* border-radius: 4px; /* Rounded Corners */
/* background-image: url('../Images-UI/boxframebg.jpg'); /* Default */
/* background-image: url('../Images-UI/transpWhite10.png'); /* Glass Scheme */
/* box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2); */
overflow: hidden; /* Ensures div expands to fill entire area */
}

.rboxoutframe, .rboxoutframe33
{
max-width: 32.55%;
width: 32.55%; /* Force width for text boxes */
float: left;
}

.rboxoutframe25
{
max-width: 24.125%;
width: 24.125%; /* Force width for text boxes */
float: left;
}

.rboxoutframe50
{
max-width: 49.4%;
width: 49.4%; /* Force width for text boxes */
float: left;
}

.tblframe
{
margin: 0 auto; /* Centre */
/* border-spacing: 2px; /* Unmerged spacing */
border-collapse: collapse; /* Merge borders */
text-align: center;
overflow: auto; /* Fix IE+CR border-collapse partial render bug */
}

.boxoutheader, .rboxoutheader, .tblheader
{
height: 24px;
/* background-image: url('../Images-UI/titlebar-bg24.gif'); /* Default */
/* background-image: url('../Images-UI/srctranspDkRed75.png'); /*  Glass Scheme*/
/* background-color: #96002E; */
line-height: 23px; /* 1px less than bar height */
text-align: center;
}

.boxoutheader
{
display: none; /* Hide Headers */
}

.rboxoutheader
{
display: none; /* Hide Headers */
}

.boxoutinner, .tblinner
{
padding: 6px;
/* background-color: #EEEEEE; /* Default Disabled */
/* background-image: url('../Images-UI/boxoutbg.gif'); /* Default */
background-image: url('../Images-UI/transpBlack10.png'); /*  Glass Scheme*/
}

.boxoutinner
{
padding: 0px 8px; /* T/B = 0 if no img captions */
min-width: 150px; /* Set to ensure boxes line up if images vary */
overflow: hidden; /* Ensures div expands to fill entire area */
}

.boxoutbg0
{
/* background-color: #BBBBBB; /* Med Grey */
/* background-image: url(''); */
}

/* -- Best with Black Text -- */
.boxoutbg1
{
background-color: #78B5F4; /* Light Blue */
}

.boxoutbg2
{
background-color: #FFdD5E; /* Light Peach */
}

.boxoutbg3
{
background-color: #B0E8B0; /* Light Green */
}

.boxoutbg4
{
background-color: #D0B0F6; /* Lavender */
}

/* -- Best with White Text -- */
.boxoutbg5
{
background-color: #4F96F5; /* Mid Blue */
}

.boxoutbg6
{
background-color: #E21838; /* Mid Red */
}

.boxoutbg7
{
background-color: #F57D30; /* Mid Orange */
}

.boxoutbg8
{
background-color: #059E93; /* Mid Green */
}

.boxoutbg9
{
background-color: #FFC000; /* Mid Yellow */
}

.tblheader, .tblinner
{
border: 1px solid #FF8000;
font-size: 100%;
}

.tblheader
{
padding: 0px 6px;
}

img.boxoutimg
{
display: block; /* Remove bottom space and allow centring */
margin: 0 auto; /* Centre in Boxout frame */
max-width: 100%; /* Sizes larger images to fit */
width: 100%; /* Force smaller images to fit */
}

.topspacer
{
display: none; /* Hide Top Spacer */
max-width: 100%;
height: 16px;
overflow: hidden; /* Ensures div expands to fill entire area */
}

.intspacer
{
max-width: 100%;
height: 1.15vw; /* Same as midspacer width */
overflow: hidden;
}

.boxoutrow .intspacer
{
max-width: 100%;
height: 1.15vw; /* Std value 1.15vw - reduce to 0.5vw if box-shadow used */
overflow: hidden;
}

.midspacer
{
min-width: 4px;
width: 1.15%; /* Adjust to fill row */
max-width: 24px;
height: 16px;
float: left;
overflow: hidden;
}

.botspacer
{
display: none; /* Hide Bottom Spacer */
max-width: 100%;
height: 16px;
overflow: hidden;
clear: both;
}

#bodytext.toppad
{
padding-top: 6px;
}

#bodytext.overflowvis
{
overflow: visible; /* Allow full width text flow around boxoutcol */
}

div.boxoutcont
/* Boxout Layout Wrapper */
{
margin-top: 4px;
width: 300px;
float: left;
}

p.boxoutcont, span.boxoutcont
/* Boxout Content Text */
{
margin-top: 4px;
margin-bottom: 0;
color: #606060;
font-family: Tahoma, Geneva, Verdana, sans-serif;
font-size: 80%;
font-weight: normal;
line-height: normal; /* Default: 'normal' is approx 120%. Values can be in %, px, pt, cm, etc */
}

span.boxoutcont
{
margin-top: 4px;
line-height: 16px;
float: left;
}

.panel
{
max-width: 48%;
min-width: 30%;
margin-right: 2%;
float: left;
}

table.panel
{
margin: 0;
padding: 0;
min-width: 100%; /* 150px */
max-width: 100%;
border-style: none;
border-color: inherit;
border-width: 0px;
}

h4.paneltxt
{
/* font-family: "Happy Monkey", Verdana, Geneva, Tahoma, sans-serif; */
font-size: 100%;
font-weight: normal;
}

p.paneltxt, td.paneltxt, li.paneltxt
{
font-size: 100%;
/* color: #3C3C3C; /* Default Disabled */
/* padding: 6px; */
}

li.paneltxt
{
color: #3C3C3C; /* Default Disabled */
padding: 4px 0px;
}

.aboutimg
{
float: left;
padding: 4px;
margin: 16px 10px 8px 2px; /* T/R/B/L */
max-width: 33%;
width: 200px;
border: 1px solid #FF8000;
}

.boxinnerminht
{
min-height: 0px;
}

.survey
{
margin: 0 auto;
max-width: 700px;
}

.sysmsgbox
{
background-color: #FEE638;
padding: 4px;
clear: both;
}

#newsfeed
{
max-width: 300px; /* Blocks feed dkmode */
}

.instawidget
{
padding: 4px 4px; /* Match boxoutinner to widget setting */
}

/* ====== 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) */
{
	body
	{
	/* font-size: 11pt; /* Default - use % for all other sizes */
	}
	
	#headingtext
	{
	padding: 0 8px;
	}
	
	#bodytext
	{
	margin: 0 auto; /* Centre in parent div (required by some mobile browsers which reformat text) */
	clear: both; /* Required for centering */
	padding: 4px 8px 8px 8px;
	}
	
	#bodytext.toppad
	{
	padding-top: 0px; /* Zero when single col */
	}
	
	.boxoutcol, .boxoutrow
	{
	background-image: url('');
	width: auto; /* full width = auto NOT 100% */
	padding-bottom: 0px; /* Zero when single col */
	float: none;
	}
	
	.boxoutcol
	{
	margin: 0 2px; /* margin + padding = bodytext padding */
	margin-bottom: 18px; /* Spacing from text below */
	}
	
	.boxoutrow
	{
	padding: 1px; /* Alignment tweak */
	}
	
	.boxoutframe, .tblframe, .survey
	{
	margin: 0 auto;
	max-width: 92%; /* Allows a scroll margin for touch devices */
	}
	
	.rboxoutframe, .rboxoutframe25, .rboxoutframe33, .rboxoutframe50
	{
	margin: 0 auto;
	clear: both; /* Required to allow centering */
	/* Tweak max-width to match boxoutframe appearance */
	max-width: 98%;
	width: 98%;
	}
	
	img.boxoutimg
	{
	/* max-width: 300px; /* Restrict size on small screens */
	}
	
	.boxoutwrapper
	{
	padding: 0px; /* Equalise midspacer and inter-wrapper vertical spacing */
	padding-left: 2%; /* Offset tweak */
	/* Tweak max-width to match boxoutcol appearance */
	max-width: 96%; /* Allows a scroll margin for touch devices */
	overflow: hidden;
	}
	
	.topspacer
	{
	display: none; /* Hide Top Spacer */
	}
	
	.intspacer
	{
	height: 16px;
	}
	
	.boxoutrow .intspacer
	{
	height: 16px; /* Std value 16px */
	}
	
	.midspacer
	{
	max-width: 100%;
	width: 100%;
	}
	
	.botspacer
	{
	display: none; /* Hide Bottom Spacer */
	}
	
	.panel
	{
	/* max-width: 100%; */
	}
	
	table.panel
	{
	min-width: 48%;
	width: 100%;
	}
	
	.boxinnerminht
	{
	min-height: 0; /* use '0' as 'initial' not supported by IE */
	}
	
	#newsfeed
	{
	min-width: 301px; /* Allows feed dkmode */
	max-width: 100%;
	}
	
	.instawidget
	{
	padding: 2px 2px; /* Match boxoutinner to widget setting */
	}
}

/* ====== Media section must come below any styles that it changes ====== */
@media screen and (max-width: 9999px) /* Applies while browser window width (inc scrollbar) below this value (not IE<9) on screens only. Default 660px */
{	
	/* #### DARK POWER-SAVE THEME for OLED Mobiles #### */
	/* Enable by adding 'dm' class to body */
	/*
	.dm a:link {color: #1383EC; text-decoration: none;}
	.dm a:visited {color: #0E6FFA; text-decoration: none;}
	.dm a:hover {color: #1A5AB2; text-decoration: underline;}
	.dm a:active {color: #3894D6; text-decoration: underline;}
	*/
	
	.dm h3, .dm h4
	{
	color: #FFFFFF; /* Dark Red Scheme #96002E */
	}
	
	.dm h4.paneltxt
	{
	/* color: #C90041; */
	}
	
	.dm h5.byline
	{
	color: #F8F8F8; /* Orange Scheme #FF6600 */
	}
	
   .dm h6
	{
	/* color: #D4D4D4;	/* Default #D4D4D4 */
	}
	
	.dm p
	{
	color: #F0F0F0; /* Default #C3C3C3 */
	}
	
	.dm p.paneltxt, .dm td, .dm li.paneltxt, .dm label
	{
	color: #F0F0F0; /* Default #C3C3C3 */
	}
	
	.dm .boxoutinner, .dm .tblinner
	{
	background-color: #282828;
	background-image: url('../Images-UI/transpWhite10.png');
	}
	
	.dm .boxoutframe, .dm .rboxoutframe, .dm .rboxoutframe25, .dm .rboxoutframe33, .dm .rboxoutframe50, .dm .tblframe
	{
	/* background-image: url('../Images-UI/transpWhite25.png'); /* Glass Scheme */
	/* box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 0.2); */
	}
	
	.dm .boxoutbg1
	{
	background-color: #0B3B94
	}
	
	.dm .boxoutrow
	{
	background-image: url('');
	}
	
	.dm a.hlbtn, .dm button.hlbtn
	{
	/* background-image: url('../Images-UI/highlightbg.jpg'); */
	/* background-color: #5C5C6C; /* Orange Scheme #FF6600 */;
	border: 2px solid #EAEAEA;
	}
}

/* ====== PAN & ZOOM VIEWER PAGE SETTINGS ====== */

#mapwrapper
{
min-width: 475px;
max-width: 100%;
margin: 0 auto;
}

#mapwallpaper
{
background-color: #EBDBC2;
}

#maptoolbar
{
display: none;
border-left: 2px solid #888888;
height: 22px;
background-image: url('../Images-UI/butnbarbg.gif');
overflow: hidden;
}

div.mapbarbtn
{
margin: 0 0px;
border-right: 2px solid #888888;
width: 96px;
height: 22px;
background-image: url('../Images-UI/smenubutn-bg24.gif');
float: left;
}

span.mapbarbtn
{
display: block; /* Forces text-align to work in IE7 */
text-align: center;
font-family: Tahoma, Geneva, Verdana, sans-serif;
font-size: 80%;
}

div.mapbarbtn:active
{background-image:url('../Images-UI/smenubtnglo.gif');}

a.mapbarbtn
{
color:#3C3C3C; text-decoration:none; display:inline-block; width:100%; height:auto; /* Only setting that works with IE, FF, CR  */
padding:4px 0px; /*Top & Bot / Left & Right*/
}
a.mapbarbtn:visited {color:#3C3C3C; text-decoration:none;} /* visited link */
a.mapbarbtn:hover {color:#EEEEEE; text-decoration:none; background-image:url('../Images-UI/smenubutnhvr-bg24.gif');} 
a.mapbarbtn:active {color:#FEFEFE; text-decoration:none;}  /* selected link - a:active MUST come after a:hover */

div.mapbarstatus
{
margin: 0 0px;
height: 22px;
float: right;
}

span.mapbarstatus
{
display: block; /* Forces text-align to work in IE7 */
text-align: center;
font-family: Tahoma, Geneva, Verdana, sans-serif;
font-size: 80%;
color: #3C3C3C;
padding: 4px 8px;
}

img.mapbarstatus
{
margin: 3px;
float: left;
}

/* ====== END ====== */

.imgframe /* not used? */
{
margin: 0 auto; /* centre in parent object */
padding: 2px; /* frame 'border' */
background-image: url('../Images-UI/framebg.jpg');
visibility: hidden; /* Initial state */
}

.framedimg /* not used? */
{
display: block; /* Remove bottom space */
margin:0 auto; /* centre in frame width */
padding: 6px; /* inner frame 'border' */
background-image: url('../Images-UI/boxoutbg.gif');
}