/* Content Styles for WebShell 4.43.55.07 DCQ - GDH 05-Mar-19 */

/* 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"> */

/* Styles in this file are overridden by specific styles applied in-line and directly in a page */
/* 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 */

/* --- Handwriting Families --- */
/* Gloria+Hallelujah */
/* Courgette */
/* Shadows+Into+Light+Two */

/* --- San Serif Families --- */
/* Raleway:400,700 */
/* Happy+Monkey */
/* Open+Sans:400,400italic,700|Open+Sans+Condensed:300,700 */
/* Roboto:300,400,700,900|Roboto+Condensed:300,400,700 */
/* Oswald:300,400,700 */

/* --- FONTS USED -- */
/* Roboto */

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

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

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

h3
/* Content Heading */
{
padding-top: 18px;
color: #223DA9; /* Dark Red Scheme #A40000 */
font-family: Oswald, Roboto, "Open Sans Condensed", Tahoma, Geneva, Verdana, sans-serif;
font-size: 200%;
font-weight: bold;
}

h4
/* Content Sub-Headings */
{
padding-top: 8px;
color: #223DA9; /* Dark Red Scheme #A40000 */
font-family: Oswald, Roboto, "Open Sans Condensed", Tahoma, Geneva, Verdana, sans-serif;
font-size: 140%;
font-weight: bold;
}

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

h5.byline
{
margin-top: 2px;
/* color: #A40000; */
font-family: Roboto, "Open Sans", Tahoma, Geneva, Verdana, sans-serif;
font-size: 110%;
font-weight: normal;
font-style: italic;
}

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

h6.caption
/* Image Caption */
{
text-align: center;
}

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

p.alignrt
{
text-align: right;
}

p.firstline
{
margin-top: 0px;
}

p.lastline
{
margin-bottom: 0px;
}

p.parasep, p.paraseplast
{
margin: 0px;
padding: 8px 0px;
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: Roboto, "Open Sans", Verdana, Geneva, Tahoma, sans-serif;
font-size: 100%;
font-weight: normal;
line-height: 1.45;
}

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

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

a img.boxoutimg:hover
{
/* Link image hi-light */
opacity: 0.7;
}

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

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

.highlighted
{
background-image: url('../Images-UI/highlightbg.jpg');
}

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

/* 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%;
}

.marquee span
{
color: #222222 /* Changes settings in defaultsyles.css */
}

.marquee span img
{
height: 16px;
display: inline-block;
vertical-align: middle;
border: 1px solid #D22222; /* Default #CCCCCC */
border-radius: 15%; /* Rounded or 50% Circular */
}

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

#pagecontainer
{
/* margin: 0 auto; */
min-width: 352px; /* boxoutcol (316) / 90% */
max-width: 100%;
overflow: hidden;
}

/* #headerbar settings in commonstyles.css */

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

#bodytext
{
padding: 8px 18px 18px 18px; /* top right bot left; */
min-width: 324px;
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
{
margin: 0 auto; /* Centre across page */
padding: 0.5% 0 0.5% 0.5%; /* Offset to improve visual centring */
width: 99%; /* 'boxoutframe' width + padding (Required for IE) */
/* background-image: url('../Images-UI/columnfillbg.gif'); /* Default */
/* overflow: hidden; /* Ensures div expands to fill entire area */
}

.boxoutwrapper
{
margin: 0 auto; /* Centre in boxoutrow */
max-width: 100%;
padding: 2px 0px 2px 0px;
overflow: hidden; /* Ensures div expands to fill entire area */
border-radius: 4px; /* Rounded Corners */
}

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

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

.rboxoutframe50
{
max-width: 49%;
width: 49%; /* 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: #FFFFFF;
/* background-image: url('../Images-UI/boxoutbg.gif'); */
/* background-image: url('../Images-UI/srctranspDkCream50.png'); /*  Glass Scheme*/
}

.boxoutinner
{
padding: 6px;
min-width: 150px; /* Set to ensure boxes line up if images vary */
overflow: hidden; /* Ensures div expands to fill entire area */
}

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

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

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

.tblheader, .tblinner
{
border: 1px solid #49196D;
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 image to fit */
}

.topspacer
{
/* display: none; /* Hide Top Spacer */
width: 100%;
height: 2px;
}

.intspacer
{
width: 100%;
height: 16px;
}

.midspacer
{
min-width: 4px;
width: 1%;
max-width: 16px;
height: 16px;
float: left;
}

.botspacer
{
display: none; /* Hide Bottom Spacer */
width: 100%;
height: 16px;
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: 0px;
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: 150px;
max-width: 100%;
border-style: none;
border-color: inherit;
border-width: 0px;
}

h4.paneltxt
{
/* font-family: "Open Sans Condensed", Verdana, Geneva, Tahoma, sans-serif; */
font-size: 120%;
font-weight: bold;
}

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

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

.aboutimg
{
float: left;
padding: 4px;
margin: 18px 6px 2px 0px; /* T/R/B/L */
max-width: 33%;
width: 200px;
border: 1px solid #D4D4D4;
}

.boxinnerminht
{
min-height: 100px;
}

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

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

/* ====== 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) */
{
	#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: 0 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: 0;
	}
		
	.boxoutframe, .tblframe, .survey
	{
	margin: 0 auto;
	max-width: 90%; /* Allows a scroll margin for touch devices */
	}
	
	.rboxoutframe, .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: 1%; /* Offset tweak */
	/* Tweak max-width to match boxoutcol appearance */
	max-width: 92%; /* Allows a scroll margin for touch devices */
	}
	
	.topspacer
	{
	display: none; /* Hide Top Spacer */
	}
	
	.midspacer
	{
	max-width: 100%;
	width: 100%;
	}
	
	.botspacer
	{
	display: block; /* Show 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 */
	}
}

/* ====== Media section must come below any styles that it changes ====== */
@media screen and (max-width: 0px) /* Applies while browser window width (inc scrollbar) below this value - default 660px - (not IE<9) on screens only */
{	
	/* #### DARK POWER-SAVE THEME for OLED Mobiles #### */
	h3, h4
	{
	/* color: #C9002E; /* Dark Red Scheme #96002E */
	}
	
   h6
	{
	/* color: #D4D4D4;	/* Default #D4D4D4 */
	}
	
	p, td, li.paneltxt
	{
	/* color: #C3C3C3; */
	}
	
	.boxoutinner, .tblinner
	{
	/* background-color: #111111; */
	/* background-image: url(''); */
	}
	
	.boxoutframe, .rboxoutframe, .rboxoutframe33, .rboxoutframe50, .tblframe
	{
	/* background-image: url('../Images-UI/transpWhite10.png'); /* Glass Scheme */
	}
}

/* ====== 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: 110px;
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');
}