/*stylesheet3.css is used for screen display.  See print.css for printing and projection*/

/* Downloaded fonts must be the first items in the file according to https://css-tricks.com/snippets/css/using-font-face/
*/

@font-face 
{
  font-family: salesforcesans;
  src: url( salesforcesans-regular.ttf ) format('truetype');
}

/*******************************************************************************

	Base elements styling
	                                *******************************************************************************/

body 
{
	background-color:white;
	box-sizing:border-box;
	color: #3c3c3c;
	cursor: default;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-kerning: auto;
		-webkit-font-kerning: auto;
	font-size:13pt; /* approx 16px; */
		/*-webkit-font-smoothing:subpixel-antialiased;
		-moz-osx-font-smoothing: grayscale;*/
	font-weight:normal;
  hyphens:auto;
	/* Browser specific assignments */
		/* Chrome & Opera do not support auto hyphens as of 11/01/18 */
    -webkit-hyphens:auto;
    -ms-hyphens:auto;
    -moz-hyphens: auto;
	/* Unitless line height is recalculated for each font size -- or so says the
		 documentation*/
	line-height:1.4;
	min-width:283px;
	padding: 0 10px;
	text-align:justify;
	visibility:hidden;
}

blockquote
{
	background-color: transparent;
	box-sizing:border-box;
	/*font-family: Arial, Helvetica Neue, Helvetica, sans-serif;*/
	font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
	font-size: 100%;
	margin:0;
	padding:0 20px;
	overflow:hidden; 
	width: auto;
}

/* Prevent oversize bottom margin if <p>is used inside a blockquote*/
blockquote p:last-child 
{ 
	margin-bottom: 0;
}

.paragraph
{ 
	display:block; 
	margin-top:20px;
	margin-bottom:20px;
}

p 
{ 
	box-sizing:border-box;
	margin-bottom:15px; 
}

div.underline, div.doubleunderline, div.overunderlinem, div.underoverline,
p.underline, p.doubleunderline, p.overunderline, p.underoverline 
{ border-bottom:1px solid #006699 }

div.doubleunderline, div.overunderline, div.underoverline,
p.doubleunderline, p.overunderline, p.underoverline
{ 
	border-top:1px solid #006699;
	padding-bottom:5px; 
	padding-top: 5px;
}

sup, sub 
{
	box-sizing:border-box;
  font-weight:normal;
	position: relative;
  top: -0.4em;
	vertical-align: baseline;
}

sub { top: 0.4em; }

/* *******************************************************/
/* Tables and table elements   																			 */
/* *******************************************************/

/* Base Table */
table
{
	background-color:white;
	border:1px solid #006699; 
	box-sizing:border-box;
	border-collapse:collapse;
	font-size:12pt;
	hyphens: auto; 	
  	-webkit-hyphens: auto; 
  	-moz-hyphens: auto;
  	-ms-hyphens: auto;
	table-layout:fixed;
	text-align:left;
}

th
{
	box-sizing:border-box;
	font-weight:bold;
	hyphens: manual; 	
  	-webkit-hyphens: manual; 
  	-moz-hyphens: manual;
  	-ms-hyphens: manual;
	text-align:center;
}	

/*******************************************************************************

	Body grid classes
	                                *******************************************************************************/

.body-grid
{
	box-sizing:border-box;
	display:grid;	
				
	/* Layout the body grid */
	grid-template-areas:  
		"body-header 			body-header 		 body-header"
		"body-header-bar 	body-header-bar  body-header-bar"
		"body-left 				body-main        body-right"
		"body-comment			body-comment		 body-comment"
		"body-footer 			body-footer      body-footer"
		"body-subfooter 	body-subfooter   body-subfooter";

	/* Assign column widths */
	grid-template-columns: 170px 1fr 150px;
		
	/* Assign row heights 
			fit-content automatically expands row height to fit content.
	*/
	grid-template-rows: 	 
		fit-content( 65px )
		0  
		1fr
		minmax(1px, max-content)
		100px 
		minmax(15px, max-content) ;
	
	/* Minimum height of the body element is the viewport height.  Ensures that
	it fills the entire viewport */
	min-height: 100%;
}

.body-grid-no-right-panel
{
	box-sizing:border-box;
	display:grid;
		
	grid-template-areas:  
		"body-header 			body-header"
		"body-header-bar 	body-header-bar"
		"body-left 				body-main"
		"body-comment			body-comment"
		"body-footer 			body-footer"
		"body-subfooter 	body-subfooter";
		
 	grid-template-columns: 170px 1fr;
	
	grid-template-rows: 	 
		fit-content( 65px )
		0  
		1fr
		minmax(1px, max-content)
		100px 
		minmax(15px, max-content) ;
		
	min-height: 100%;
}

.body-grid-split
{
	box-sizing:border-box;
	display:grid;	
	grid-column-gap: 10px;
	grid-template-areas:  
		"body-header 			body-header"
		"body-split-left 	body-split-right";
	grid-template-columns: 65% 35%;
	grid-template-rows: 	 
		fit-content( 65px )
		1fr;
	min-height: 100%;
	overflow:hidden;
	width:100%;
}
	
/* Configure body grid elements */

/* Heading panel */

.body-header-class
{
	box-sizing:border-box;
	grid-area: body-header;
	display:flex;
		display: -webkit-flex; 				/* Safari */	
	flex-direction: row;						/* Display direction: row or column */
		-webkit-flex-direction:row;		/* Safari 6.1+ */
	align-content: center; 					/* Vertical space between items */
		-webkit-align-content: center;/* Safari 7.0+ */
  align-items: center; 						/* Vertical alignment */
  	-webkit-align-items: center; 	/* Safari 7.0+ */
	justify-content: space-between;	/* Set horizontal space between items*/
		-webkit-justify-content: space-between;	
  justify-items: flex-start;			/* Horizontal alignment */
  	-webkit-justify-items: flex-start; /* Safari 6.1+ */
	border-bottom: 1px solid #006699;
	width:100%;
 }
		
.body-header-bar-class 
{
	box-sizing:border-box;
	grid-area: body-header-bar;
	color:white;	
	display:flex; 
		display: -webkit-flex; 				/* Safari */
	flex-direction: row;						/* Display direction: row or column */
		-webkit-flex-direction:row;		/* Safari 6.1+ */
	align-items: baseline; 					/* Vertical alignment */
		-webkit-align-items: baseline;/* Safari 7.0+ */ 
	justify-content: space-between;
		-webkit-justiry-content: space between; 
	background-color:#006699; 			/*SCB Blue */
	margin-bottom:5px;
	width:100%;
}
		
.body-left-class
{
	box-sizing:border-box;
	grid-area: body-left; 
	display: flex;
		display: -webkit-flex; 				/* Safari */
	flex-direction: column;					/* Display direction: row or column */
		-webkit-flex-direction:column;/* Safari 6.1+ */
	border-right: 1px solid #006699;
	font-size: 0.9em;
	hyphens: auto;
	overflow:  hidden; 
	padding: 0 10px 0 0;
	/* Needed for Safari & IE-11, otherwise body-left-class it occupies the 
		 whole width of the screen.  Set to 100% if the viewport width is less
		 than 700px
	*/
	width: 170px;
}

/* NOTE: Cannot set visibility: hidden here because it does not get set to
visible in default3.js setVisible() reliably for all pages.  Set the visibility
property individually on each page until the error is fixed  2/13/18*/
.body-main-class, #body-main-class 
{ 
	box-sizing:border-box;
	grid-area:  body-main; 
	background-color: transparent;
	display: block;
	hyphens:  auto;
	padding: 0 10px 10px 10px;
	/*width: calc( 100% - 170px - 150px );*/
}

.body-split-left-class, .body-split-right-class 
{ 
	box-sizing:border-box;
	grid-area:  body-split-left; 
	background-color: transparent;
	display: block;
	hyphens:  auto;
}

.body-split-right-class 
{ 
	grid-area:  body-split-right; 
}

.body-right-class 
{ 
	grid-area: body-right; 
	box-sizing:border-box;
	display: flex;
		display: -webkit-flex; 				/* Safari */
	flex-direction: column;					/* Display direction: row or column */
		-webkit-flex-direction:column;	/* Safari 6.1+ */
	align-items: start; 						/* Vertical alignment */
		-webkit-align-items: start;		/* Safari 7.0+ */ 
  justify-items: left;						/* Horizontal alignment */
  	-webkit-justify-items: left; 	/* Safari 6.1+ */
	border: 0;
	border-left: 1px solid #006699;
	font-size: 0.9em;
	hyphens: auto;
	padding: 0 0 0 10px;
	/* Needed for Safari & E11. Otherwise it occupies the whole width of the
		 screen */
	width: 162px;
}

.body-comment-class
{
	background-color:white;
	box-sizing:border-box;
	grid-area: body-comment;
}

.body-footer-class 
{
	box-sizing:border-box;
	grid-area: body-footer;
	display:flex; 
		display: -webkit-flex; 				/* Safari */	
	flex-direction: row;						/* Display direction: row or column */
		-webkit-flex-direction:row;		/* Safari 6.1+ */
	align-content: space-between;		/* Set Vertical space between items*/ 
		-webkit-align-content: space-between;
	align-items: baseline; 					/* Vertical alignment */
		-webkit-align-items: baseline;/* Safari 7.0+ */ 	
	justify-content: space-around;	/* Set horizontal space between items*/ 
		-webkit-justify-content: space-around;
	justify-items: center; 					/* Horizontal alignment */
		-webkit-justify-items: center;/* Safari 6.1+ */
	border-top: 1px solid #006699;
	width:100%;
}

.body-subfooter-class 
{
	box-sizing:border-box;
	font-size: 12px;
	grid-area: body-subfooter;
	line-height: 0.95em;
	margin-top:8px;
	text-align:center;
}

/****************************************************************************** 
	Classes and IDs common to all pages.  Classes particular to one page are in 
	the header of the page 
*******************************************************************************/ 

/*
	Children of body-header-class 
*/

.headerbarbutton
{
	box-sizing:border-box;
	background-color:transparent;
	border-right: 1px solid white;
	color: white;
	display:block;
  font-size:1.0em;
	padding: 0 3px;
	text-align:center;
}

.headerbarbutton a,
.headerbarbutton a:link,
.headerbarbutton a:visited,
.headerbarbutton a:hover,
.headerbarbutton a:active
{
  color:white;
  font-size:1.0em;
  text-decoration:none;
}

.headerbarbutton:hover
{
	background-color: #1C7AB0; /* #1C7AB0 Lilghter than SCB blue */ 
}

/* Children of body-right class */
#publicservice
{
	border-bottom:1px solid #006699; 
	border-top:1px solid #006699; 
	padding-bottom:7px; 
	padding-top:7px;
	width:96%;
}

/* 
	Children of body-comment-class
*/

/* used in default3.js:backNext().  Container for backnextlinkitems */
.backnextlinks
{
	border-bottom: 1px solid #006699;
	border-top: 1px solid #006699;
	margin-bottom:10px; 
	margin-top:10px;
	min-height:130px; 
	padding-bottom:10px; 
	padding-top:10px; 
	text-align:center;
}

.backnextlinkitem
{
  text-align:center;
}

#googlead
{
	height:auto;
	min-height:600px;
}

/*******************************************************************************

	Faucet Classes -- used only on faucet review pages
	
*******************************************************************************/

/* This is the floating div that displays the faucet index.  See faucets3.js:
	 showFaucetIndex() */
#faucetindex, .faucetindex
{
	background-color:white;
	border-top:0;
	display:block;
	margin-bottom:5px;
	margin-top:0;
	overflow:hidden;
	text-align:left; 
}

.faucetcompanylogo, #faucetcompanylogo
{
	display:block; 
	margin:10px auto 20px auto; 
	max-width:180px; 
	width:90%;
}

.faucetflag
{
	display:block;
	height:45px;
	margin:0 auto; 
	min-width:60px; 
	max-width:60px; 
	width:60px;
}

.faucetsummary, .faucetsummarygray, .faucetsummarygrey,
#faucetsummary, #faucetsummarygray, #faucetsummarygrey,
.summary, .summarygray, .summarygrey,
#summary, #summarygray, #summarygrey
{
	display:flex; 
		display: -webkit-flex; 
	flex-direction: row; 
		-webkit-flex-direction:row; 
	align-items: stretch; 
		-webkit-align-items: stretch; 
	justify-content: space-between; 
		-webkit-justify-content: space-between;
	overflow:hidden;
}

#faucetsummarygray, #faucetsummarygrey
{
	background-color: #E8E8E8; /* very light gray */
}

.faucetsummaryblock, .summaryblock,
#faucetsummaryblock, #summaryblock 
{ 
	border:0;
	display:initial;
	height: auto;
	min-height:100%;
	overflow:hidden; 
}

/* faucet log and image, company address */
.leftfaucetsummaryblock, .leftsummaryblock,
#leftfaucetsummaryblock, #leftsummaryblock 
{
	border: 0;
	/*border-bottom:1px solid #006699;*/
	margin-top:0; 
	width:25%;
}

.middlefaucetsummaryblock, .middlesummaryblock,
#middlefaucetsummaryblock, #middlesummaryblock
{
	border-left:1px solid #006699;
	/*border-bottom:1px solid #006699;*/ 
	width:41.25%;
}

.rightfaucetsummaryblock, .rightsummaryblock,
#rightfaucetsummaryblock, #rightsummaryblock
{
	border-left: 1px solid #006699; 
	/*border-bottom:1px solid #006699;*/ 
	width:33.75%
}

.faucetsummaryitem, .summaryitem,
#faucetsummaryitem, #summaryitem,
.faucetsummaryitemnobottomborder
{
	margin:3px auto;
	padding:0 5px 5px 5px; 
	text-align:center; 
}

.faucetsummaryitem, .summaryitem,
#faucetsummaryitem, #summaryitem
{
	border-bottom:1px solid #006699; 
}

.faucetsummaryfoot, .faucetsummaryfootgray, .faucetsummaryfootgrey
{
	border-top:1px solid #006699;
	font-size:1.5em;
	font-stretch: ultra-expanded; 
	font-weight:bold;
	margin: 0 auto 20px auto; 
	padding:10px 0; 
	text-align:center; 
	width:100%;
}

.faucetsummaryfootgray, .faucetsummaryfootgrey
{
	background-color: #E8E8E8; /* very light gray */
}

.faucetcompanyaddress, #faucetcompanyaddress
{ 
	display:block;
	margin: 10px auto; 
	text-align:center; 
}

#faucetupdated
{
	font-weight:bold; 
	margin:0; 
	text-align:center;
}

/* The headline */
#companyinbrief, .companyinbrief
{
	border-bottom:5px solid #006699;
	border-top:5px solid #006699;
	font-size:1.3em;
	font-stretch: ultra-expanded;
	font-weight:bold;
	padding-bottom:10px;
	padding-top:10px; 
	text-align:center;
	text-transform: uppercase;
}

/* the division -- this is a placeholder */
#companyinbriefdiv, .companyinbriefdiv
{
	border-bottom:0;
}

.faucetfooter
{
	margin: 5px 0;
	padding: 10px 0 0 10px; 
}

#countryoforigin, .countryoforigin
{
	font-size:0.85em;
}

/* Used in Black.Market.htm */
#countryoforigin2, .countryoforigin2
{
	font-size:1.0em;
}

/*******************************************************************************

	Classes that define flex blocks
	
*******************************************************************************/

/* General style classes for flex containers */
.flex-row
{
	display:flex;
		display: -webkit-flex; 				/* Safari */	
	flex-direction: row;						/* Display direction: row or column */
		-webkit-flex-direction:row;		/* Safari 6.1+ */
	justify-content: space-between;	/* Set horizontal space between items*/
		-webkit-justify-content: space-between;	/* Safari 6.1+ */
}
	
.flex-column
{
	display: flex;
		display: -webkit-flex; 				/* Safari */
	flex-direction: column;					/* Display direction: row or column */
		-webkit-flex-direction:column;/* Safari 6.1+ */
  justify-items: center;					/* Horizontal alignment */
  	-webkit-justify-items:center; /* Safari 6.1+ */
}

/*******************************************************************************

	Floating containers
	                                 *******************************************************************************/

/* The clearfix Hack - keeps floats from overflowing their parent containers
	Syntax: <parent class="clearfix"> */
.clearfix 
{
  display:table;
}
.clearfix:after 
{
  display: table; 
  content: "";
  clear: both; 
}

.floatbox
{
	box-sizing:border-box;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.2;
	padding: 10px 10px 10px 10px;
	text-align: left;
	text-indent: 0; 
}

/* Click/Tap to Enlarge text */
.clicktap::before
{ content:" Click "; }

/* Common properties of all float boxes */
.adfloatleft,
.adfloatright,
.centerfloat,
.centerfloatborders,
.faucetindexright,
.floatleft, 
.floatright,
.floatleftinternal, 
.floatrightinternal,
.floatleftnoborders,
.floatrightnoborders,
.nofloat
{
	background-color: white;
	box-sizing:border-box;
	text-decoration: none;
	font-size: 14.25px;
	font-weight: normal;
	line-height: 1.2;
	padding: 10px;
	text-align: justify;
	text-indent: 0; 
}

.centerfloat,
.centerfloatborders,
.floatleft, 
.floatright,
.floatleftinternal, 
.floatrightinternal,
.floatleftnoborders,
.floatrightnoborders,
.nofloat
{
	letter-spacing: 0.4px;
}

.nofloat,
.centerfloat,
.centerfloatborders
{
	background-color: transparent;
}

.adfloatleft:hover,
.adfloatright:hover,
.faucetindexright:hover,
.floatleft:hover, 
.floatright:hover,
.centerfloatborders:hover
{
	border-color:darkred;
	border-width:1px;
}

.faucetindexright
{
	max-width:130px;
	minwidth:130px;
	width:130px;
}

/* Images inside floating objects created by FloatBox or given the class 
	 FloatImage */
img.floatImage 
{ 
	border: 0;
	box-sizing:border-box;
	display:block;
	margin-bottom:10px;
	transition: height 0.66s ease-out; 
}

/* Used to display google adsense ads */
.adfloatleft, .adfloatright
{
	box-sizing:border-box;
	overflow: hidden;
	min-width: 260px;
	text-align: center;
	/*width:20vw;*/
}

.nofloat, 
.centerfloat,
.centerfloatborders
{
	border: 0;
	box-sizing:border-box;
	float: none;
}
 
.centerfloat,
.centerfloatborders
{
	margin: 10px auto; 
}

.centerfloatborders
{ 
  border-bottom:1px solid #006699;
  border-top:1px solid #006699;
}

/* Set the common properties of left float boxes */
.adfloatleft, 
.floatleft,
.floatleftnoborders,
.floatleftinternal 
{
	border: 1px solid #006699;
	border-left: 0;
	box-sizing:border-box;
	float: left;
	margin: 10px 10px 10px -10px;
	padding-left:20px;
}

/* Set the common properties of right float boxes */
.adfloatright, 
.floatright,
.faucetindexright,
.floatrightnoborders,
.floatrightinternal
{
	border: 1px solid #006699;
	border-right:0;
	box-sizing:border-box;
	float: right;
	margin: 10px -10px 10px 10px;
	padding-right:20px;	
}

/* Set the common properties of internal float boxes */
.floatleftnoborders, 
.floatrightnoborders,
.floatleftinternal, 
.floatrightinternal
{
	border: 0;
}

.stickyfooter
{
	background-color:lightyellow;
	border: 1px solid black;
	border-radius:5px;
  bottom: 0;
	box-sizing:border-box;
	color:black;
	display:block;
	font-size:0.85em;
	font-weight:bold;
	height: 22px;
  right: 0;
	margin-top:10px;
	opacity: 0.6;
    filter: alpha( opacity = 50 ); /* For IE8 and earlier */	
	padding:3px;
  position: fixed;
	text-align:center;
	width: 50px;
}

/*******************************************************************************

	Elements that are displayed by setting display:block; at specified widths
	                                 *******************************************************************************/
.displayat400,
.displayat500,
.displayat700,
.displayat900,
#displayat400,
#displayat500,
#displayat700,
#displayat900 
{}

/*******************************************************************************

	Elements that expand to full width at specified widts.  Used in responsive
	designs.
	                                 *******************************************************************************/

.expandat400,
.expandat500,
.expandat700,
.expandat900,
#expandat400,
#expandat500,
#expandat700,
#expandat900 
{}

/*******************************************************************************

	Elements that are removed by setting display:none; at specified widths
	                                 *******************************************************************************/
.killat400,
.killat500,
.killat700,
.killat900,
#killat400,
#killat500,
#killat700,
#killat900 
{}

/*******************************************************************************

	Elements that are rotated at specified widths Used primrily as column captions 

*******************************************************************************/
.rotateat400,
.rotateat500,
.rotateat700,
#rotateat400,
#rotateat500,
#rotateat700,
{}
          
/*******************************************************************************
	Toggle Switch control
	
	Syntax:  
    <label class="switch">
      <input type="checkbox">
      <span class="slider round"></span>
    </label>
*******************************************************************************/

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 22px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cce0ea;
	border: 1px solid #006699;
	border-radius: 22px;
  	-webkit-transition: .2s;
  transition: .2s;
}

.slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 4px;
  bottom: 2px;
  background-color: white;
	border: 1px solid #006699;
	border-radius: 7px;
  	-webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #006699;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
	margin:3px 0;
}

.slider.round:before {
  border-radius: 50%;
}

/*******************************************************************************

	Main Menu styles 
	
*******************************************************************************/

#scbmenucontainer
{
	flex-direction:column;
		-webkit-flex-direction: column;
	height:auto;
	margin:0 auto;
	text-align:left;
}

.scbmenu 
{
	background-color: transparent;
	box-sizing:border-box;
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	list-style-position: inside;
	list-style-type: none;
	overflow:hidden;
	padding-bottom: 5px;
	padding-left: 0;
	text-align:left;		
}

/*Menu Header Styles*/
.scbmenu h5 
{
	background-color: #006699; /* SCB Blue */
	box-sizing:border-box;
	color:white;
	text-decoration: none;
	font-style: normal;
	font-weight: bold;
	list-style-type: none;
	margin: 0;
	/* Do not change. Required for proper display */
	overflow:hidden;
  padding: 10px 5px;
	text-align:left;
}

.scbmenu h5 a 
{
 	color:white;
	display: block;
	font-weight: bold;
  text-decoration: none;
}

.scbmenu h5:hover 
{ 	background-color: #1C7AB0; } /* #1C7AB0 Lilghter than SCB blue */

/*ul Styles*/

/* Universal <ul> is not indented far enough.  This brings it in to the
	 left edge of the text.*/
ul, ol 
{ padding-left:25px; }

ul.li, ol.li
{ margin-bottom:10px; }

.scbmenu ul 
{
  background-color: transparent;
	box-sizing:border-box;
	/*Collapses the menu. Reset to "auto" in jsfunctions3.js:setHeight() This 
	works only if overflow="hidden" in the .scbmenuclass, above.*/
	height: 0; 
  list-style-type: none;
	margin: 0;
	margin-left: 10px;
  padding: 0;	
	/*Animation - does not work????*/
  transition: 2s;
}

.scbmenu ul a 
{
  text-decoration: none;
  width: 100%;
}

/*li Styles*/
.scbmenu li 
{
  border-bottom: 1px solid #006699;
	box-sizing:border-box;
	padding:10px 5px;
}

/* Note: a:hover MUST come after a:link and a:visited in the CSS definition in 
   order to be effective! a:active MUST come after a:hover in the CSS definition! 
   Pseudo-class names are not case-sensitive.*/

/* panchor ( pseudo anchor) is used to simulate an anchor point */
.scbmenu li:link, .scbmenu li a:link, .panchor 
{ 
	color:#006699; /* SCB Blue */ 
	font-size:1.0em;
	font-weight:normal;

}
.scbmenu li:visited, .scbmenu li a:visited, panchor:visited 
{ 
	color:purple;
}

.scbmenu li:hover,  .scbmenu li a:hover,  .panchor:hover, 
.scbmenu li:active, .scbmenu li a:active, .panchor:active
{ 
	color:darksalmon ; 
}

/* 
	Used to give the body-header-class container some height. 
	Helps prevent screen jump 
*/
#headerdiv
{
	 height:80px; 
	 visibility:hidden;
}

#scblogo1 
{ 
	display: block;
	overflow:hidden; 
}

#scblogo2 
{ 
	display: none; 
	margin:auto 0; 
	overflow:hidden; 
}

#scblogo3 
{ display: None; 
	margin:auto; 
	overflow:hidden; 
}

#scbaddr1 
{ 
	display: block;
	font-size:82.5%; 
  hyphens:manual;
	/* Browser specific assignments */
    -webkit-hyphens:manual;
    -ms-hyphens:manual;
    -moz-hyphens: manual;
	margin:auto; 
	padding:0 20px; 
	text-align:center;
}

#scbaddr2 
{ 
	display:none;  
	font-size:85%; 
  hyphens:manual;
	/* Browser specific assignments */
    -webkit-hyphens:manual;
    -ms-hyphens:manual;
    -moz-hyphens: manual;
	line-height:1.1em; 
	margin:auto; 
	text-align:center;
}

/*******************************************************************************

	Table Classes
	
*******************************************************************************/ 

/*******************************************************************************

	Floattable classes -- used inside floating containers.  Expands to fill the
	container
	
*******************************************************************************/ 
.table-float-left, 
.table-float-right,
.big-table-float-left,
.big-table-float-right,
.fluid-table-float-left,
.fluid-table-float-right
{
	border: 1px solid #006699;
	box-sizing:border-box;
	font-size: 12pt;
	line-height: 1.2;
	padding: 0;	
}

.table-float-left,
.big-table-float-left,
.fluid-table-float-left
{
	border-left:0;
	float:left;
	margin: 10px 10px 10px 0;
}

.table-float-right,
.big-table-float-right,
.fluid-table-float-right
{
	border-right: 0;
	float:right;
	margin: 10px 0 10px 10px;
}

.fluid-table-float.left,
.fluid-table-float-right
{
	max-width:100%;
	min-width:50%;
	width: calc(100 + (-50) * ( (100vw - 50vw) / 100) );
}

/* ort Table Header Class -- For sortable.js tables. */ 
tr.sorttable
{
	background-color:#006699; /* scb blue */ 
	box-sizing:border-box;
	color:white; 
	cursor:default;
	font-weight:bold;
	vertical-align:bottom;
}

/*******************************************************************************

	Input Elements
	
*******************************************************************************/
input[type="text"], 
input[type="tel" ],
input[type="email"],
textarea
{
	-webkit-border-radius:15px;
	border-radius:15px;
	background-color:transparent;
  border: 1px solid #006699;
  padding: 5px;
}
 
input[type="text"]:hover, 
input[type="tel" ]:hover,
input[type="email"]:hover, 
textarea:hover
{
	border: 1px solid black;
}

input[type="text"]:focus, 
input[type="tel" ]:focus,
input[type="email"]:focus, 
textarea:focus
{
	background-color:transparent;
	border: 1px solid black;
}

input[type="text"]:disabled, 
input[type="tel" ]:disabled,
input[type="email"]:disabled, 
textarea:disabled
{
	background-color:#E8E8E8;  /* very light gray */
	border: 1px solid darkgray;
}

label
{
	 white-space:nowrap;
}

/*******************************************************************************

	Anchored links -- For links other than links in list.
	
	Normal link  - dark text, used for light backgrounds

	Note: a:hover MUST come after a:link and a:visited in the CSS definition in 
	order to be effective! a:active MUST come after a:hover in the CSS definition. 
	Pseudo-class names are not case-sensitive.
	
*******************************************************************************/

a,
a:link,
a:visited,
a:hover,
a:active
{
	box-sizing:border-box;
	color: #006699; /* SCB Blue */
	font-size:1.0em;
	font-weight:normal;
	text-decoration:underline;
}

a:hover 
{
	text-decoration:none;
} 

/*******************************************************************************

	Reverse link - used on dark backgrounds
	Inherits from <a...> above.  So only set changed styles 
	
*******************************************************************************/

a.reverse, 
a.reverse:active,
a.reverse:hover,
a.reverse:link,
a.reverse:visited 
{ 
	border:0;
	box-sizing:border-box;
	color:white;
	text-decoration:underline;
}

a.reverse:hover 
{
	text-decoration:none;
} 

/*******************************************************************************

	Font sizing classes"  The standard font is 14pt represented by t16
	
*******************************************************************************/

/* Fluid, scalable fonts resize ss the viewport gets narrower and wider to a max
min size.  Formula for fluid sizing is:
	font-size: calc([min size] + ([max size] - [min size]) * ((100vw - 
	[min viewport width]) / ([max viewport width] - [min viewport width])));  
	Based on an article by Geoff Graham: https://css-tricks.com/snippets/css/fluid-typography/
*/

#fluidfont, .fluidfont
{ 
	/* Max font: 16px, min font: 14px, max scrn wdth 1150px, min scrn wdth 275px*/
	font-size: calc( 10pt + ( 12pt -10 ) * (100vw - 275px ) / (275px / 1240px ) );
}

/* Copmmon font sizes */	
.t8,  .t8b    { font-size: 50%; }
.t10, .t10b   { font-size: 70%; }
.t12, .t12b   { font-size: 80%; }
.t14, .t14b   { font-size: 90%; }
.t16, .t16b   { font-size: 100%;}
.t18, .t18b   { font-size: 110%;}
.t20, .t20b   { font-size: 120%;}
.t22, .t22b   { font-size: 130%;} 
.t24, .t24b   { font-size: 140%;}
.t30, .t30b   { font-size: 175%;}
.t36, .t36b   { font-size: 210%;}
.t48, .t48b   { font-size: 280%;}
.comment 		  { font-size: 90%; color:#cc3333; } /* Chinese Red */
.footnote     { font-size: 90%; }
.photocaption { font-size: 90%; }
.uppercase		{ font-size:100%; }
.small-caps		{ font-size:100%; }

/* Set font characteristics and line height back to normal  */
.t8,  .t10,  .t12,  .t14,  .t16,  .t18,  .t20,  .t22,  .t24,  .t30,  .t36,  .t48, 
.comment, .footnote 
{ 
	box-sizing:border-box;
	font-weight: normal;
}

.footnote
{
	background-color:transparent;
}

.t8b, .t10b, .t12b, .t14b, .t16b, .t18b, .t20b, .t22b, .t24b, .t30b, .t36b, .t48b
{
	box-sizing:border-box;
	font-weight: bold;
}

.photocaption, .small-caps
{
	font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
	font-weight:bold;
	line-height:1.3;
}

/*******************************************************************************
	Font decoration
*******************************************************************************/

.bold, .boldfont, .boldtext
{ font-weight:bold; }

.italic, .italicfont, .italictext
{ font-style:italic; }

.small-caps, .smallcaps, .smallcapsfont, .smallcapstext
{ font-variant: small-caps; }

/* Transparent background */
.transparent { background-color:transparent; }

.underlinefont, .underlinetext
{ text-decoration:underline; }

.uppercase, .uppercasefont
{ text-transform:uppercase; }

/* Colored text -- most obsolete */

/* Green Text - Used for emphasis*/
.greentext, .green-text { color:#757c74; }

/* Reverse Green Text - Used for emphasis */
.reversegreentext, .reverse-green-text
{
	background-color:#006699; /* StarCraft blue*/
	font-weight:bold;
	color: white;
}

/* Bluetect, reverse Blue Text - Used for emphasis */
.blue-text, .bluetext { color: #006699; } /* scb blue */

.reversebluetext, .reverse-blue-text 
{
	background-color:#006699;
	color:white;
	font-weight:bold;
}

/*******************************************************************************

	Headings & Captions
	
*******************************************************************************/

/* Default Headers - common properties of all headers are set here, individual 
	 properties of each header style are then set below. */

/* Heading font size */
h1, .h1, .h1l, .h1u, .h1du, .h1o { font-size: 2.30em; }
h2, .h2, .h2l, .h2u, .h2du, .h2o { font-size: 2.00em; }
h3, .h3, .h3l, .h3u, .h3du, .h3o { font-size: 1.50em; } 
h4, .h4, .h4l, .h4u, .h4du, .h4o { font-size: 1.20em; }
h5, .h5, .h5l, .h5u, .h5du, .h5o { font-size: 1.00em; }

/* Heading font styling */
 h1, 		 h2, 		 h3, 		 h4, 		 h5,
.h1,		.h2,		.h3,		.h4,		.h5,
.h1u,		.h2u,		.h3u,		.h4u,		.h5u,
.h1du,	.h2du,	.h3du,	.h4du,	.h5du,
.h1o,		.h2o,		.h3o,		.h4o,		.h5o,
.h1l,		.h2l,		.h3l,		.h4l,		.h5l
{
	box-sizing:border-box;
	color: #006699; /* SCB Blue */
	display: block;
	font-family: salesforcesans, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-kerning:normal;
	font-stretch:ultra-expanded;
	font-weight: bold;
  hyphens:manual;
	/* Browser specific assignments */
    -webkit-hyphens:manual;
    -ms-hyphens:manual;
    -moz-hyphens: manual;
	line-height: 1.2;
	margin: auto;
	padding: 0;
	text-align:left;
}

.h1o,		.h2o,		.h3o,		.h4o,		.h5o,
.h1du,	.h2du,	.h3du,	.h4du,	.h5du
{
	border-top: 1px solid #006699; /* SCB Blue */
}

.h1u,		.h2u,		.h3u,		.h4u,		.h5u,
.h1du,	.h2du,	.h3du,	.h4du,	.h5du
{
	border-bottom: 1px solid #006699; /* SCB Blue */
}

.h1l,		.h2l,		.h3l,		.h4l,		.h5l
{
	display:inline;
}

/* Used in the title of document pages to add white space at the bottom of the title */
#doctitle, .doctitle
{
	border-bottom: 1px solid #006699;
	box-sizing:border-box;
	color: #006699; /* SCB Blue */
	font-size: 230%;
	margin: 15px 0;
	padding-bottom:20px;
}

/*******************************************************************************

	Special Characters
	
*******************************************************************************/

.infolink:before
{
    background-color: white;
		border: thin solid blue;
		border-radius: 1ex;
		color: #006699;
		content: '?';
		display: inline-block;
		font-size: 1.4ex;
		font-weight: bold;
		height: 1.8ex;
    line-height: 1.8ex;
    border-radius: 1.2ex;
		margin-left:4px;
    margin-right: 4px;
    padding: 1px;
		text-align: center;
    text-decoration: none;
		width: 1.8ex;
}

/*******************************************************************************

	Sections that do not display on screen, but will print
	
*******************************************************************************/

.noscreen, #noscreen, .pagebreak {	display: none;  }

/*******************************************************************************

	Ordered and Unordered Lists
	
*******************************************************************************/
ol, ol li
{
	box-sizing:border-box;
	list-style-type:decimal;
	list-style-position:inside;
	margin: 0 0 5px 0;
	padding-left:0;	
}

.noindent, .no-indent, .noindent10, .no-indent10 
{
	box-sizing:border-box;
	text-decoration:none;
	font-style:normal;
	list-style-position:inside;
	margin-left: 0;
	padding-left: 0;		
}

.noindent10, no-indent10
{
	margin-bottom:10px;
}

/* 	This displays as a block element.  There in no way to make it inline except
		in IE */
.list-item { display:list-item; }

/*******************************************************************************

	Links in lists.  Default is links on light backgrounds. For dark backgrounds 
	use class "linkreverse".  nherits from <a...> above, so set only changed 
	styles.
	
*******************************************************************************/

li a,
li a:active,
li a:hover,
li a:link,
li a:visited  
{
	box-sizing:border-box;
	font-style:normal;
} 

/* Used on dark backgrounds*/

/* Default list item that is an list link*/
li a.reverse,
li a.reverse:active,
li a.reverse:hover,
li a.reverse:link,
li a.reverse:visited,
 
li a.linkreverse,
li a.linkreverse:active,
li a.linkreverse:hover,
li a.linkreverse:link,
li a.linkreverse:visited 
{
	color: white;
	font-style:normal; 
	text-decoration:none;
}

li a.kreverse:hover,
li a.linkreverse:hover 
{
	font-style:italic;
}

/*******************************************************************************

	Hyphenation
	
*******************************************************************************/
.hyphenate
{
  hyphens: auto;
		/* Browser-specific settings */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
}

.no-hyphenate, .nohyphenate
{
	hyphens: manual; 
		/* Browser-specific settings */
  	-webkit-hyphens: manual; 
  	-moz-hyphens: manual;
  	 -ms-hyphens: manual;
}

/*******************************************************************************

	Buttons except social media buttons, see below
	
*******************************************************************************/

/* Buttons */

.buttonbar
{
	box-sizing:border-box;
	box-sizing:border-box;
  display: flex;
		display: -webkit-flex;
  flex-direction: row;
  	-webkit-flex-direction: row;
  align-items: center;
  	-webkit-align-items: center;
   justify-content: space-around;
 	-webkit-justify-content: space-around;
	text-align:center;
}

.button, .disabledbutton
{
	background-color:#006699;  /* scb Blue */
	border-radius:10px; 
	box-sizing:border-box;
	color:white; 
	font-size:0.80em; 
	font-weight:bold;
	hyphens: manual; 
		/* Browser-specific settings */
  	-webkit-hyphens: manual; 
  	-moz-hyphens: manual;
  	 -ms-hyphens: manual;
	margin: 0; 
	padding:1px 7px 3px 7px; 
	text-decoration:none; 
	vertical-align:middle;
}

.disabledbutton
{
	background-color: #E8E8E8; /* Very light gray */
}

.graybutton, .greybutton
{
	/*background-color:lightgray; 
	border: 1px solid gray; 
	border-radius:15px;*/ 
	margin:5px auto;
	padding:3px;
	text-align:center; 
	vertical-align:middle; 
	width:auto;
}

/*******************************************************************************

	Bars and Panels
	
*******************************************************************************/

/*Used in the Searchbar*/
.searchfield 
{
	background-color:yellow;
	border:1px solid #006699;
	border-radius: 0;
	box-sizing:border-box;
	display:table-cell;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size:80%;
	height:18px;
	margin: auto 0;
	padding: 5px;
	text-align:left;
	vertical-align:middle;
	width:105px; 
}

/*Used in SearchText 2/2/16*/
.textfield 
{
	box-sizing:border-box;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size:80%;
	height:25px;
	width:141px;
	background-color:transparent;
	padding-left: 5px ;
	vertical-align:middle; 
}

/*******************************************************************************

	Horizontal Lines
	
*******************************************************************************/

/* Default horizontal line */
hr, hr.normal, hr.hrnormal, hr.hr-normal 
{
	background-color:transparent;
	border-top: 1px solid #006699;
	height: 1px ;
	width: 100%;
}

/* Reversed Horizontal Line */
hr.reverse, hr.hrreverse, hr.hr-reverse
{
	background-color:transparent;
	border-top: 1px solid lightgray;
	height: 1px;
	width: 100%;
}

/*******************************************************************************

	Indented text
	
*******************************************************************************/

/* Indents */
.indent15 { margin-left:15px; }
.indent20 { margin-left:20px; }
.indent25 { margin-left:25px; }
	
/* Hanging indents */
	
/* ensp hanging indent -- OBSOLETE */
.hangingindentn, 
.hangingindent12, 
.hangingindent125, 
.hangingindent1210,
.hangingindent1215 
{
  padding-left: 12.5px ;
  text-indent: -12.5px ;
}
 
/* emsp hanging indent */
.hangingindent, 
.hangingindent5,
.hangingindent10, 
.hangingindent15,
.hangingindent20  
{
  padding-left: 17px ;
  text-indent: -17px ;
}

.hangingindent5, .hangingindent125, 	.bmargin5  	{ margin-bottom: 5px; }
.hangingindent10,.hangingindent1210, 	.bmargin10	{ margin-bottom:10px; }
.hangingindent15,.hangingindent1215,	.bmargin15	 { margin-bottom:15px; }
.hangingindent20,.bmargin20 { margin-bottom:20px; }

.indented40
{
	overflow: hidden; 
	width: auto;
	padding-left:40px;
	padding-right:40px;
}

/*******************************************************************************

	Classes that align text
	
*******************************************************************************/

/* Centers and object exactly in the centr of the viewport.  Does not
		move as page scrolls vertically
*/
.viewportcentered 
{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.centeredblock, hcentered, hblocked 
{
	/* Forced the block width the the wodth of its contents */
	display:table;
	/* Forces the blick to the horizontal center of its container */
	margin-left: auto;
  margin-right: auto;
	/* 
		If a specific width is set, it must be after the class identification
		i.e. <div class="centeredblock" style="width:50%;"
 */
}

.vcenteredblock, vcentered, .vblocked
{
	display: table-cell;
	vertical-align: middle
}

.allcentered
{
	display: table-cell;
	margin-left: auto;
  margin-right: auto;	
	vertical-align: middle 
}


/* Center text */
.centered, #centered 
{
	text-align: center;
}

/* Justified text */
.justified 
{
	box-sizing:border-box;
	display:block;
	text-align:justify;
}

/* Left-Aligned text */
.left, .left-aligned 
{
	box-sizing:border-box;
	display:block;
	text-align:left;
}

/* Right-Aligned text */
.right, .right-aligned 
{
	box-sizing:border-box;
	display:block;
	text-align:right;
}


/*******************************************************************************
	Borders
*******************************************************************************/
.bordersnone { border-width:0; }
.borders, bordrsall { border:1px solid #006699; }
.borderbottom { border-bottom:1px solid #006699; }
.borderleft { border-left:1px solid #006699; }
.borderbottom { border-right:1px solid #006699; }
.bordertop { border-top:1px solid #006699; }

/*******************************************************************************
	Columns
*******************************************************************************/
.basecolumn, .column, .break-inside-avoid
{
  page-break-inside: avoid; /* Firefox */
		-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  break-inside: avoid; /* IE 10+ */
	text-align:  left;
}

/*******************************************************************************

	Classes that put a border around a block, or remove it
	
*******************************************************************************/

.noborder 
{
	border-style: none;
	border-width: 0;
	box-sizing:border-box;
}

.noborder a:hover
{
	text-decoration: none;
}

.border, .bordered  
{
	border: solid 1px #006699; /* SCB Blue */
	box-sizing:border-box;
}

.reverse 
{
	border-bottom: 1px solid white;
	color:white;
}

/*******************************************************************************

	Classes that rotate or flip a block
	
*******************************************************************************/

/* Flip image horizontally */
#flipimage, .flipimage
{
		-moz-transform: scaleX(-1);
  	-o-transform: scaleX(-1);
  	-webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH; /*IE*/
  -ms-filter: FlipH; 
}

/* Flip text horizontally */
.fliptext
{
  	-webkit-transform: rotate(180deg);
  	-moz-transform: rotate(180deg);
  	-o-transform: rotate(180deg);
  	-ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* Rotates text for emphasis */

.rotate-5
{
	display:block; 
		-moz-transform:rotate(-5deg);
		-ms-transform:rotate(-5deg);
		-o-transform:rotate(-5deg);
		-webkit-transform:rotate(-5deg);
	transform:rotate(-5deg);
}

.rotate-7
{
	display:block; 
		-moz-transform:rotate(-7deg);
		-ms-transform:rotate(-7deg);
		-o-transform:rotate(-7deg);
		-webkit-transform:rotate(-7deg);
	transform:rotate(-7deg);
}

.rotate-15
{
	display:block; 
		-moz-transform:rotate(-15deg);
		-ms-transform:rotate(-15deg);
		-o-transform:rotate(-15deg);
		-webkit-transform:rotate(-15deg);
	transform:rotate(-15deg);
}

.rotate-22
{
	display:block; 
		-moz-transform:rotate(-22deg);
		-ms-transform:rotate(-22deg);
		-o-transform:rotate(-22deg);
		-webkit-transform:rotate(-22deg);
	transform:rotate(-22deg);
}

.rotate-45
{
	display:block; 
		-moz-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}


.rotate-60
{
	display:block; 
		-moz-transform:rotate(-60deg);
		-ms-transform:rotate(-60deg);
		-o-transform:rotate(-60deg);
		-webkit-transform:rotate(-60deg);
	transform:rotate(-60deg);
}

/* Rotates text so the bottom is toward the right edge of the page */
.rotate-270
{
	display:block; 
		-moz-transform:rotate(270deg);
		-ms-transform:rotate(270deg);
		-o-transform:rotate(270deg);
		-webkit-transform:rotate(270deg);
	transform:rotate(270deg);
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

/*******************************************************************************

	Classes that change text appearance.  Most of these are OBSOLETE.
	
*******************************************************************************/

/* Disabled text in a list.  Used to make a list item appear disabled */
.deprecated 
{
	border-bottom: 1px solid #006699; 
	box-sizing:border-box;
	color: #3c3c3c;
	font-weight: normal;
}

/* Disabled inline text -- cannot use "disabled" which is a protected word */
.dimmed { 	box-sizing:border-box; color:#c0c0c0; }

/* default revierse text */
.reverse, .reversetext { 	box-sizing:border-box; color: white; }

/* Special Characteristics for Inline Text */

/* Bold Text */
.strong { font-weight:bold; }

/* Hightlighted Text */
.highlight { background-color:transparent; }

/*******************************************************************************

	SearchBar classes
	
*******************************************************************************/

#searchbar
{	
	display:flex; 
	height:28px; 
	width:170px;
}

/* This is a box that sits in the middle of the viewable screen.  Used as a 
pop-up search bar */

#searchBox 
{
	background-color: #6c6c6c ; /* gainsboro gray */
	color: white;
	display: none ;
	height: 1px; 
	padding:10px; 
	position: absolute; 
	text-align: center;
	visibility: hidden ;  
	width: 1px; 
	z-index:85;
}

/*******************************************************************************

	Classes that color the background of blocks
	
*******************************************************************************/

#whiteblock, .whiteblock
{
	background-color:white;
}

/*******************************************************************************

	Classes that modify text for emphasis
	
*******************************************************************************/

.boxed-text 
{ 
	border: 1px solid #006699;
	margin-right:10px;
	padding:10px; 
}

/* inset text boxes */
.inset10
{
	margin-left: 10px;
}

.inset20
{
	margin-left: 20px;
}

/* Used in document titles */

.documenttitle
{
	background-color:transparent; 
	border-bottom: 1px solid #006699; 
	margin-bottom:15px;
}

/*  First Letter of the first line of the block is in a larger type */
.drop-cap, .drop-cap-small 
{
	color: #006699; /* SCB Blue */
	display:inline;
	float:left;
	font-size: 4.0em;
	font-weight:100;
	margin: -.2em 7px 10px 0;	
}

.drop-cap-small 
{
	font-size: 37.5px;
	margin: 0 7px 7px 0;
}

/* Headline Text */
.emphatic, .headline, .lead-paragraph, .leadparagraph 
{
	box-sizing:border-box;
	color: #6c6c6c;
	font-size: 1.3em;
	font-weight:bold;
	margin-bottom:15px; 
}

.emphatic
{
	box-sizing:border-box;
	color: black;
	font-size: 1.1em;
	line-height:1.35;
}

/*******************************************************************************

	Lightbox Styles -  Display box for images that appear in the middle of the 
	screen as a "popup
	
*******************************************************************************/
#lightbox{
	background-color:#eee;
	border-bottom: 2px solid #666;
	border-right:  2px solid #666;
	padding: 10px;
	}
	
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}
		
#lightboxCaption{ float: left; }

#keyboardMsg{ float: right; }

#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both; overflow-x:scroll; }
 
#overlay img{ border: none; }

#overlay{ background-image: url(/images/overlay.png); }

* html #overlay{
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/overlay.png", sizingMethod="scale");
	}
	
/*******************************************************************************

	Filter Image Class
	
*******************************************************************************/

/*	These images display at less than full opaque until the mouse is clicked over the image */

img.filterimage, img.fadeimage:hover
{
	border-width: 0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	-moz-opacity: 0.5;
	opacity:0.5;
}

img.filterimage:hover, img.fadeimage
{
	border-width: 0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-opacity: 1;
	opacity:1;
}

/* Three levels of fading */
img.dimimage5
{
	border-width: 0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	-moz-opacity: 0.5;
	opacity:0.5;
}

img.dimimage10
{
	border-width: 0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	-moz-opacity: 0.3;
	opacity:0.3;
}

img.dimimage15
{
	border-width: 0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	-moz-opacity: 0.1;
	opacity:0.1;
}

/*******************************************************************************

	Folded corner class
	
*******************************************************************************/
.foldedcorner, 
#foldedcorner 
{
  border: 0;
	box-shadow: -9px 9px 7px rgba( 208,208,208, 0.5 ); /*50% transparent */ 
	position: relative;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: black;
  background-color: ivory;
}

.foldedcorner:before, 
#foldedcorner:before 
{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 48px 48px 0;
  border-style: solid;
  border-color: #faebd7  #ffffff; /* Antique white */
	/* Needed for Firfox 3.0 */
	display:block;
	width:0;
}
/*******************************************************************************

	Pseudo tooltip class
	
*******************************************************************************/

#_tooltip
{
	background-color:white;
	border: 2px solid #006699;
	-webkit-border-radius:5px;
	border-radius:10px;
	box-shadow: 12px 12px 0 rgba( 196, 196, 196, 0.5 ); /*50% transparent */ 
	box-sizing:border-box;
	display:none;
	font-size:0.85em;
	padding: 3px;
	position:absolute;
	text-align:left;
	z-index:1000;
}
			
/* Tooltipparent Class */
.tooltipparent
{
	color:#006699; /* SCB Blue */
	text-decoration:underline;
}


/*******************************************************************************

	HTML Comment Box Skin
	
*******************************************************************************/ 

/* comment box wrapper - The floatleft <div> that contains the comment area */
#HCB_comment_box_wrapper
{
	box-sizing:border-box;
	font-size:1.1em;
	width:50%;
} 

#HCB_comment_box_caption
{
	background:transparent;
	font-size:0.95em; 
	font-weight:bold; 
	margin: 10px 10px 5px 10px;
	with:100%;
}

/* The is the container that displays the loading message */
#HCB_comment_box
{
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	background-color:transparent;
	margin: 10px 0;
	padding:0;
	with:100%;
}

#HCB_comment_box p.error
{
	border:1px solid red;
	background-color:#fee;
	padding:0.5em;
}

#HCB_comment_box textarea, 
#HCB_comment_box input.text
{
	background-color:transparent;
	border:1px solid #006699;
	color: #006699;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

#HCB_comment_box textarea
{
	font-size:0.95em;
	margin-top:10px;
	max-width:100%;
	min-width:100%;
	width:100%;
}

#HCB_comment_box input.text
{
	width:20px;
}

#HCB_comment-box input.submit::after
{
	content: " (Submit)";
}

/* "Comment" button */
#HCB_comment_box input.submit
{
	background-color:white;
	border-radius:10px;
	border:1px solid #006699;
	color:#006699;
	cursor:pointer;
	padding:2px 14px;
}

#HCB_comment_box input.submit:hover
{
	text-decoration:underline;
}

#HCB_comment_box span.home-desc
{
	color:black;
	font-size:10px;
}

#HCB_comment_box div.comment
{
	background-color:transparent;
	border-bottom:1px solid #006699;
	color: #006699;
	padding-top:3px;
	padding-bottom:6px;
}

textarea
{
	background-color:transparent;
	box-sizing:border-box;
	color: #3c3c3c;
	cursor: default;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-kerning: auto;
		-webkit-font-kerning: auto;
	font-size:13pt; /* approx 16px; */
		/*-webkit-font-smoothing:subpixel-antialiased;
		-moz-osx-font-smoothing: grayscale;*/
	font-weight:normal;
  hyphens:auto;
	/* Browser-specific assignments */
    -webkit-hyphens:auto;
    -ms-hyphens:auto;
    -moz-hyphens: auto;
	/* Unitless line height is recalculated for each font size -- or so says the
		 documentation*/
	line-height:1.4;
	min-width:330px;
	text-align:justify;
}

/*******************************************************************************

	Social media button classes
	
*******************************************************************************/
#share-buttons
{
	display: -webkit-flex;
  display: flex;
  	-webkit-flex-direction: row;
  flex-direction: row;
	flex-wrap: wrap;
  align-items: center;
  	-webkit-align-items: center;
  justify-content: center;
  	-webkit-justify-content: center;

}

#share-buttons img 
{
  border: 0;
	box-sizing:border-box;
  display: inline;
	height: 48px;
  width: 48px;
  padding: 6px;
}

/*******************************************************************************

	Sorted List Classes.  The object colParent is created by jsfunction3:
	addColParent with id = "colParent" and classes of "colParentSearch and
	colParentFaucet depending on the purpose of the sorted list.
	
*******************************************************************************/
.colParentSearch, .colParentFaucet
{	
	background-color:yellow;
	height:100px;
	overflow:hidden; 
	position:relative; 
	text-align:left; 
	text-overflow:ellipsis; 
	white-space:nowrap;
}

.colParentSearch
{ font-size:85%; }
	 
/*******************************************************************************

	Media Queries (Must be last statments in file )
	
*******************************************************************************/
@media screen and ( max-width:1000px ) 
{
	
	.lead-paragraph, .leadparagraph
  {
  	font-size: 1.25em;
  	line-height:normal;
  }			

  #scblogo1 { display:none; }	
 	#scblogo2 { display:block;}
	#scblogo3 { display:none; }

}

/* Tablet --------------------------------------------------------------------*/
@media screen and ( max-width:900px ) 
/* Tablet --------------------------------------------------------------------*/
{
 .body-grid,
 .body-grid-no-right-panel
  {

  	/* Layout the body grid */
  	grid-template-areas:  
  		"body-header 			body-header"
  		"body-header-bar 	body-header-bar"
  		"body-left 				body-main"
  		"body-comment			body-comment"
  		"body-footer 			body-footer"
  		"body-subfooter 	body-subfooter";
  			
   	/* Assign column widths */
   	grid-template-columns: 170px 1fr;
  }  

  .body-grid-split
  {
  	grid-template-areas:  
  		"body-header"
  		"body-split-left" 	
			"body-split-right";
  	grid-template-columns: 100%;
  	grid-template-rows: 	 
  		fit-content( 65px )
  		1fr;
  }
	
	/* 
	This is temporary.  Reconfigure body-right-class to display at bottom of
	the page 
	*/
	.body-right-class
	{
		display:none;
	}
	
  .floatleft,
	.floatleftnoborders,
  .floatright,
	.floatrightnoborders,
	.centerfloat,
	.centerfloatborders,
	.nofloat
	{
		min-width: 50%;
		padding: 10px;
		text-align: justify;
	}

	.floatleft,
  .floatright
	{
		/*border:1px solid #006699;*/
	}

	#leftfaucetsummaryblock,
	#middlefaucetsummaryblock,
	#rightfaucetsummaryblock
	{
		width:33.333%;
	}
	
	.expandat900, #expandat900 
	{
		/* just in case it is a floating element, remove the float */
		float:none;
		min-width:90%;	/* Safari */
		margin: auto;
		padding:5px;
	}
	
	.killat900, #killat900 
	{ display:none; }
	
	.displayat900, #displayat900
	{ display:block; }
	
  #scblogo1  { display:none; }	
 	#scblogo2  { display:block;}
	#scblogo3  { display:none; }
	
}

/*  Smartphone landscape -----------------------------------------------------*/
@media screen and ( max-width:800px )
{
	
  #scbaddr1 { display:none;  }
  #scbaddr2 { display:block; }

	/* Fluid, scalable fonts resize ss the viewport gets narrower and wider to a 
	max and min size.  Formula for fluid sizing is:
	font-size: calc([min size] + ([max size] - [min size]) * ((100vw - 
	[min viewport width]) / ([maxi viewport width] - [min viewport width])));  
	Based on an article by Geoff Graham: https://css-tricks.com/snippets/css/fluid-typography/
	*/

  #fluidfont, .fluidfont
  { 
		font-size: 1.6vw;
  }
	
	#faucetcompanyaddress
	{
		font-size:12pt;
	}

}

/* Smartphone landscape ------------------------------------------------------*/
@media screen and ( max-width:700px ) 
{
  blockquote
  {
		margin-right:  0;
		margin-left:   0;
		padding-right: 0;
		padding-left:  0;
  }
	
	.body-grid,
	.body-grid-no-right-panel 
	{
  	/* Layout the body grid */
  	grid-template-areas:  
  		"body-header"
  		"body-header-bar"
			"body-left"
  		"body-main"
  		"body-comment"
  		"body-footer"
  		"body-subfooter";
 			
  	grid-template-columns: 100%;
  		                   
		grid-template-rows: 
			225px
			33px
			minmax( 0, max-content) 
			1fr
			minmax(100px, max-content)
			minmax(100px, max-content) 
			minmax( 20px, max-content);
	}
  
	.body-header-class
	{
		flex-direction: column;
		padding-bottom: 10px;
		text-align:center;
	}
		
	/* Elements in body-header-class */
	#scblogo1, scblogo2, scblogo3
	{
		float:left; 
		width:100%;
	}

	#scblogo1	 { display:none; }
	#scblogo2	 { display:none; }
	#scblogo3  { display:block;}
	#headerdiv { max-height:0; }

	#searchbar { width: 220px; }
	#scbaddr1  { display:none; }
	#scbaddr2  { display:block; padding-bottom:5px;}

  .body-left-class 
  {
		display:flex;
		align-items:center;
			-webkit-align-items:center;
		flex-direction:column;
			-webkit-flex-direction:column;
		border: 0;
  	border-bottom: 1px solid #006699;
  	padding: 0;
		width:100%;
  }
	
	/* Elements in body-header-bar-class */	
  #scbmenucontainer
  {
		display:flex;
		flex-direction:row;
			-webkit-flex-direction:row;
  	justify-content: space-around;	/* Set horizontal space between items*/ 
  		-webkit-justify-content: space-around;
		/*border: 5px solid red;*/
  	height:0;
		margin:0 -2.5px;
  	width:100%;
  }
	
	.scbsubmainmenu
	{
		margin: 0 2.5px;
		max-width:170px;
		width:33%;
	}
	
  .body-main-class, #body-main-class 
  { 
  	padding: 0 5px 20px 5px;
  }

	/* Elements in body-left-class */
	#menucaption { display: none; }
	#menucaptionsmall { display: block; }
	
	/* Elements in body-comment-class */

  #continuetext
  {
   	border-bottom: 5px double gray;
		margin: 10px 0;
		width: 100%;
  }
  
  #moregoodreading
	{
		border-top: 5px double gray;
		font-size:0.85em;
		padding: 10px;
	}


  #share-buttons
  {
		justify-content: center;
		-webkit-justify-content: center;
  }

	.body-right-class, 
	#publicservice, 
	#rightgoogleadpanel1, 
	#rightgoogleadpanel2 
	{ display:none; }
		
	.body-footer-class
	{
		border: 0;
		flex: 1;
		flex-flow: row wrap;
	}

	/* Faucet Page classes */

	.faucetsummaryitem, .summaryitem
  {
  	font-size:12pt; 
  }

	#faucetcompanyaddress
	{
		font-size:11pt;
	}
		
	/* Miscellaneous elements not associated with a particualr body class */
	
	.adfloatleft,
	.adfloatright,
  .floatleft,
	.floatleftnoborders, 
  .floatright,
	.floatrightnoborders
	{
		/*min-width:32%;*/
	}
	
	.expandat700, #expandat700
	{ 
		/* just in case it is a floating element, remove the float */
		border: 1px solid #006699;
		float:none;
		min-width:90%;	/* Safari */
		margin: auto;
		padding:5px;
		width:100%;
	}
	
	.killat700, #killat700
	{ 
		display:none; 
	}

	.displayat7900, #displayat700
	{ display:block; }
	
	.rotateat700, #rotateat700
	{
    transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    margin:auto;left;
    vertical-align:middle; 
	}

	.killtransformat700, #killtransformat700
  {
  	-moz-transform:none;
  	-ms-transform:none;
  	-o-transform:none;
  	-webkit-transform:none;
  	transform:none;
  }
	
	/* Delete heading at top of each faucet page for smaller displays */
  #companyinbriefdiv, .companyinbriefdiv
  { display:none }

	#navhelp   		{ display:none; }
	#googlenavad 	{ display:none; }
	
  #fluidfont, .fluidfont
  { 
  	font-size: 15px; 
  }

	.table-float-right,
 	.table-float-left,
	.big-table-float-left,
	.big-table-float-right,
	.fluid-table-float-right,
 	.fluid-table-float-left
  {
		border:1px solid gray;
	}
}

/* SDmartphone Portrait ------------------------------------------------------*/
@media screen and ( max-width:500px ) 
{

  /* Heading font styling */
   h1, 		 h2, 		 h3, 		 h4, 		 h5,
  .h1,		.h2,		.h3,		.h4,		.h5,
  .h1u,		.h2u,		.h3u,		.h4u,		.h5u,
  .h1du,	.h2du,	.h3du,	.h4du,	.h5du,
  .h1o,		.h2o,		.h3o,		.h4o,		.h5o,
  .h1l,		.h2l,		.h3l,		.h4l,		.h5l
  {
    hyphens:manual;
  	/* Browser specific assignments */
    -webkit-hyphens:manual;
    -ms-hyphens:manual;
    -moz-hyphens: manual;
		text-align:center;
  }

	.centered-block,
	.table-float-left,
	.table-float-right,
	.big-table-float-left,
	.big-table-float-right,
 	.fluid-table-float-left,	
	.fluid-table-float-right
  {
		float:none;
		margin:7px auto;
		min-width:100%;  /* for Safari */
		width:100%; 		 /* for Safari */
		min-width:vw;
		width:vw; 	
		padding:0;
  }

	/* Elements in body-left-class */	
	.scbmenuimage
	{
		height: 5px;
		width: 8px;
	}

  .scbmenu ul 
  { margin-left: 5px; }

	.commentblock
	{
  	display:flex;
  	-webkit-display:flex;
  	flex-direction: column;
  	-webkit-flex-direction: column;
	}
	
	.commentbox
	{
		width:330px;
	}
			
	/* Miscellaneous elements not associated with a particualr body class */
	
	/* Floats */
  .adfloatleft,
	.adfloatright,
  .floatleft,
	.floatleftnoborders, 
  .floatright,
	.floatrightnoborders
	{
		border:none;
		border-bottom:1px solid #006699;
		border-top:1px solid #006699;
		display:block;
		float:none;
		margin: 10px auto;
		min-width:280px;
		padding: 5px;
		width:100%;
	}

  .fluidfont, #fluidfont
  { 
  	font-size: 13px; 
  }

	/* Transfors - classes that transform elements */
	
	.expandat500, #expandat500
	{ 
		/* just in case it is a floating element, remove the float */
		float:none;
		min-width:90%;	/* Safari */
		margin: auto;
		padding:5px;
	}

	#killat500, .killat500  
	{ display:none; }

	.displayat500, #displayat500
	{ display:block; }

	.rotateat500, #rotateat500
	{
		transform: rotate(-90deg); 
			-webkit-transform: rotate(-90deg);
			-moz-transform: rotate(-90deg);
			-ms-transform: rotate(-90deg);
			-o-transform: rotate(-90deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
		margin:auto;
		text-align:left;
		vertical-align:middle; 
	}

		.killtransformat500, #killtransformat500
  {
    transform:none;
      -moz-transform:none;
      -ms-transform:none;
      -o-transform:none;
      -webkit-transform:none;
    width:100%;
  }

  /* Click/Tap to Enlarge text */
  .clicktap::before
  { content:" Tap "; }
	
	
	
	.summary, .summarygray, .summarygrey,
  #summary, #summarygray, #summarygrey,
	.leftsummaryblock, #leftsummaryblock,
	.summaryblock, #summaryblock,
	.middlesummaryblock, #middlesummaryblock, 
  .rightsummaryblock, #rightsummaryblock
  {
  	border:none;
		display:block; 
  	overflow:hidden;
		width:100%;
  }
	
	.summaryitem, #summaryitem
	{
		/*border:none;*/
	}

	/* For faucet pages */
	
	#faucetsummary
  {
		display:block;
		margin: auto;
		width:100%; 
  }
	
	#faucetimage
	{
		display:block;
		margin: 20px auto 0 auto;
		width:80%;
	}

}

/* SDmartphone Portrait ------------------------------------------------------*/
@media screen and ( max-width:400px ) 
{

	/* Elements in body-header-bar-class */	
  #scbmenucontainer
  {
		font-size:0.85em;
  }
	
	/* Misc element not associated with a particual class */
	
  .adfloatleft,
	.adfloatright,
	.centerfloat,
	.centerfloatborders,
  .floatleft,
	.floatleftnoborders, 
  .floatright,
	.floatrightnoborders
	{
		background-color:#E8E8E8; /* Very light gray */
		border:none;
		border-bottom:1px solid #006699;
		border-top:1px solid #006699;
		display:block;
		float:none;
		margin: 10px auto;
		min-width:94%;
		padding:10px;		
	}

  .floatleftinternal, 
  .floatrightinternal
	{
		border-left: none;
		border-right: none;
		display:block;
		float:none;
		margin: 10px auto;
		min-width:100%;
		padding: 5px;
		width:100%;
	}
	
	/* Images inside floats */	
  img.floatImage
	{
		margin: auto;
		min-width:100%;
		padding: 0;
	}

	.table-float-left, 
  .table-float-right
  {
		min-width:100%;
		width:100%;	
  }

	.lead-paragraph, .leadparagraph
  {
  	font-size: 1.1em;
  	line-height:normal;
  }
	
  .commentbox
  {
  	width:230px;
  }
  
  /* comment box wrapper - The floatleft <div> that contains the comment area */
  #HCB_comment_box_wrapper
  {
  	width:100%;
  }
		
	#share-buttons img 
  {
    padding: 3px;
		height: 24px;
		width: 24px;
  }

	.expandat400, #expandat400
	{ 
		/* just in case it is a floating element, remove the float */
		float:none;
		min-width:90%;	/* Safari */
		margin: auto;
		padding:5px;
	}

	.killat400, #killat400 
	{ display:none; }

	.displayat400, #displayat400
	{ display:block; }

	.rotateat400, #rotateat400
	{
		transform: rotate(-90deg); 
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
		margin:auto;
		text-align:left;
		vertical-align:middle; 
	}
	
	/* Faucet Page classes */		
	.faucetsummaryitem
  {
  	font-size:1.0em; 
  }
	  
  /* This is the floating div that displays the faucet index.  See faucets3.js:
  	 showFaucetIndex() */
  #faucetindex, .faucetindex
  {
		border:0;
  }

	#leftfaucetsummaryblock
	{
		border: 0;
	}
}

/*****************************************************************************
	End: Media Queries
*****************************************************************************/