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

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

/* 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;.header
  src: url( salesforcesans-regular.ttf ) format('truetype');
}

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

	Base elements styling

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

body 
{
	background-color:white;
	box-sizing:border-box;
	color: #3c3c3c;
	cursor: default;
	font-family: salesforcesans, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-kerning: normal;
		-webkit-font-kerning: normal;
	font-size:16px; /* approx 12pt; */
	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;
	
	line-height:1.4; /* Unit-less line height is recalculated for each font size -- or so says the documentation*/
	max-width: 100vw; /* 100% view width */
	padding: 0 10px;
	visibility:hidden;
}

/* Conditional settings for body. If the browser supports auto hyphenation
text is justified.  If not, text is aligned left. */
@supports ( hyphens:auto ) 
{
  body
  {
  	text-align:justify;	
	}
}	

/****************************************************************************** 
                      /* Modifications to basic controls */
/******************************************************************************/ 

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

/* Gray link, used to emphasize/demphasize a link variation. See 
	 showFaucetIndex() in faucets2.js */
a.graylink, 
a.graylink:active,
a.graylink:hover,
a.graylink:link,
a.graylink:visited,
.graylinkcolor 
{ 
	color:#2b2d2f; /* charcoal gray */
	text-decoration:underline;
}

a.graylink:hover,
.graylinkcolor 
{
	text-decoration:none;
}

/* red link, used to emphasize/demphasize a link variation. See 
	 showFaucetIndex() in faucets2.js */
a.redlink, 
a.redlink:active,
a.redlink:hover,
a.redlink:link,
a.redlink:visited,
.redlinkcolor 
{ 
	color:#ff7f7f;/* light red */
	text-decoration:underline;
}

a.redlink:hover,
.redlinkcolor 
{
	text-decoration:none;
}
	  
/****************************************************************************** 
blockquote
/******************************************************************************/ 
blockquote, .blockquote
{
	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: 90%;
	margin:0;
	overflow:hidden;
	padding:0 20px;
}

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

/****************************************************************************** 
/* Change a <div to behave like a <p */
/******************************************************************************/ 
div.paragraph, div.p
{ 
	display:block; 
	margin-top:15px;
	margin-bottom:15px;
}

/****************************************************************************** 
/* Default paragraph */
/******************************************************************************/ 

p 
{ 
	box-sizing:border-box;
	color: #3c3c3c;
	margin-bottom:15px; 
}

/* Hanging indents :nth-child(n+2)*/

/****************************************************************************** 
	Superordinate and subordinate text
*******************************************************************************/ 
sup, sub 
{
	box-sizing:border-box;
	position: relative;
}

/* Add a nonbreaking space beore the <sup> content*/
sup::before
{
  /*content: narrow no-break space*/
	content: "\202f"
}

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

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

/*******************************************************************************
	Killpadding, killtransform
*******************************************************************************/
	.killpaddingat500,
	.killpaddingleftat600,
	.killpaddingrightat600
	{}

	.killtransformat500,
	.killtransformat600,
	.killtransformat700
	{}

/****************************************************************************** 
	Underlined <p and <div 
*******************************************************************************/ 

.underline, .doubleunderline, .overunderline, .underoverline
{ 
	border-bottom:1px solid #006699; 
	padding-bottom:15px; 
}

.overline, .doubleoverline, .overunderline, .underoverline
{ 
	border-top:1px solid #006699;
	padding-top: 15px;
}

/****************************************************************************** 
	Font Families
*******************************************************************************/ 
.arialfont 
	{ font-family: Arial, Helvetica Neue, Helvetica, sans-serif; }
	
.avantgardefont 
	{ font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif; }
	
.georgiafont 
	{ font-family: Georgia, Times, Times New Roman, serif; }

.palatinofont
	{ font-family: palatino Linotype, Book Antiqua, Palatino, serif; }
	
.trebuchetfont 
	{ font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; }
	
/****************************************************************************** 
	Ordered and unordered lists
*******************************************************************************/ 
/*
	<div> used to allow Mul>s to wrap around floats
*/
div.wrap, div.wrapped
{
	display:flex; 
	justify-content:space-evenly;
	margin-bottom: -10px;;
	margin-top: -10px;;
}

/* Universal <ul> is not indented far enough.  This brings it in to the
	 left edge of the text - 10px.*/
ul, ol 
{ 
	box-sizing:border-box;
	font-weight:normal;
	padding-left:15px;
	text-align:left;
	text-decoration:none; 
}

/* Default ordered list marker*/
ol, ol li
{ list-style-type:decimal; }

/* Default marging bottom set to 10px except the last kist item*/
ul li, ol li
{ margin-bottom:10px; }

li:last-child, li.lastitem
{ margin-bottom:0; }

/* noindent10 is OBSOLETE. Kill in code */
ol.noindent, ol.no-indent, ol.noindent10, ol.no-indent10, 
ul.noindent, ul.no-indent, ul.noindent10, ul.no-indent10 
{ list-style-position:inside;	}


ul.nomarker, 
ol.nomarker, 
li.nomarker
{ 
	list-style-type:none;
}

ul.nopad, ol.nopad
{
	padding-left: 0;
}

ul.square, 
ol.square, 
li.square
{ 
	list-style-type:square;
}

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

/* *******************************************************/
/* 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-variant: small-caps;
	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: 	 
		max-content
		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: center;
		-webkit-justiry-content: center; 
	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 700 px
	*/
	width: 170px;
}

/* Classes in body-left-class*/
.mainmenugooglead
{
	display:block;
}

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

.body-split-left-class, .body-split-right-class 
{ 
	box-sizing:border-box;
	grid-area:  body-split-left; 
}

.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-width: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;
}

/****************************************************************************** 
                      /* Children of body-header-class */
/******************************************************************************/ 

.headerbarbutton
{
	box-sizing:border-box;
	background-color:transparent;
	border-right: 1px solid white;
	color: white;
	display:block;
	font-variant:small-caps;
  font-size:1.5em;
	font-weight:bold;
	margin-top:-5px;
	padding: 0 3px;
	text-align:center;
	text-decoration:lowercaps;
}

/* left border is displayed only for the main menu button*/
#headerbarmenubutton
{
	border-left: 1px solid white;
}

.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: #7DB1CA; /* #7DB1CA; 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;
}

/*******************************************************************************
	Nebraska Wood Classes -- Used only on hardwoods pages
*******************************************************************************/
/* For Wood species pages */
.woodgrainimagerotated
{
	padding: 10px;
		-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);
	margin:-100px auto -100px auto;
}

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

/* Indents Faucets3.js/showCerts() when viewport width > 700 */
.certindent 
{
	padding-left:25px;
}

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

#faucetindexcolumn
{
	column-width:250px;
}

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

.faucetcompanynarrative, .faucetwarrantynarrative
{
	padding-left: 5px;
	padding-right:5px;
	text-align:left;
}

/* Conditional settings for body. If the browser supports auto hyphenation
text is justified.  If not, text is aligned left. */
@supports ( hyphens:auto ) 
{
  .faucetcompanynarrative,
  .faucetwarrantynarrative
  {
  	text-align:justify;	
	}
}	

.faucetwarrantyheading
{
	margin-bottom:10px;
	text-align:center;
}

.faucetwarrantygroup
{
	font-size:85%;	
	margin:0 auto;
	min-width:80%;
	text-align:center; 
	width:80%;
}

	/* Display a heading.*/
.faucetwarrantygroup::before
{ 
	content:" Warranty Details";
	font-size:120%;
	font-weight:bold;
	text-decoration:underline;
}

.faucetwarrantyitem
{
	margin:0 auto; 
	border-bottom:0; 
}

.faucetwarrantyfootnotes
{
	font-size:85%;
	margin:7px; 
	padding:0; 
	text-align:justify;
}

	/* Display a heading.*/
.faucetwarrantyfootnotes::before
{ 
	content:" Warranty Notes";
	font-weight:bold;
	text-align:center;
	text-decoration:underline;
}
  
.faucetflag, #faucetflag
{
	display:block;
	height:45px;
	margin:0 auto; 
	min-width:60px; 
	max-width:60px; 
	width:60px;
}
	
.faucetflaggroup
{
	display:flex; 
	align-items:flex-start;
	flex-wrap:wrap; 
	justify-content:center;
}
	
.faucetheading, #faucetheading
{
	margin-left:-10px; 
	text-align:center;
	border-top:1px solid #006699; 
	border-bottom:1px solid #006699;
}

.faucetsummary, #faucetsummary,
.summary, #summary
{
	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;
}

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

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

.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; 
	width:29.375%;
}

/* Used in faucets2.htm */
.faucetsummaryitem, .summaryitem,
#faucetsummaryitem, #summaryitem,
.faucetsummaryitemnobottomborder,
.faucetsummarybottom
{
	margin:0 auto 10px auto;
	padding:5px; 
	text-align:center; 
}

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

.faucetsummaryitemnobottomborder,
.faucetsummarybottom
{
	border: 0;
}

.faucetsummaryitemcaption, .summaryitemcaption
{
	font-size:130%; /* Same as T22 */
}

.faucetsummaryfoot
{
	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%;
}

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

.faucetupdated, #faucetupdated
{
	display:block;
	font-weight:bold; 
	margin:0; 
	text-align:center;
}

/* The headline */
#companyinbrief, .companyinbrief
{
	border-bottom:5px solid #006699;
	border-top:5px solid #006699;
	display:block;
	font-size:1.3em;
	font-stretch: ultra-expanded;
	font-weight:bold;
	margin:auto auto 15px auto;
	padding-bottom:20px;
	padding-top:20px; 
	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; 
}

.faucettitle, #faucettitle
{
	font-weight:bold; 
	margin: 0 auto; 
	padding:10px 0; 
	text-align:center; 
	width:100%;	
}

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

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

.header-block-class, .header-block-class a
{
	font-weight:bold;
}

/*******************************************************************************
	                       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
{
	border-radius:5px;
	box-sizing:border-box;
	font-size: 11pt;
	font-weight: bold;
	line-height: 1.2;
	padding: 10px 10px 10px 10px;
	text-align: left;
	text-indent: 0; 
}

/* Common properties of all floating controls */
.adfloatleft,
.adfloatright,
.centerfloat,
.centerfloatborders,
.floatleft, 
.floatright,
.floatleftnomessage,
.floatrightnomessage,
.floatleftinternal, 
.floatrightinternal,
.floatleftnoborders,
.floatrightnoborders,
.nofloat
{
	background-color: white;
	box-sizing:border-box;
	font-family: salesforcesans, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size: 11pt;
	font-weight: normal;
	letter-spacing: 0.5px;
	line-height: 1.2;
	padding: 10px;
	text-align: left;
	text-indent: 0; 
	text-decoration: none;
}

/* If the browser supports auto-hyphendation, justify text.*/
@supports ( hyphens:auto ) 
{
  .centerfloat,
  .centerfloatborders,
  .faucetindexright,
  .floatleft, 
  .floatright,
  .floatleftnomessage,
  .floatrightnomessage
  .floatleftinternal, 
  .floatrightinternal,
  .floatleftnoborders,
  .floatrightnoborders,
  .nofloat
  {
  	text-align:justify;	
	}
}		  

/* These controls are usually inside floats and take on the bakground of the
   parent */
.nofloat,
.centerfloat,
.centerfloatborders,
.floatleftinternal, 
.floatrightinternal
{
	background-color: transparent;
}

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

/* Used to display google adsense ads */
.adfloatleft, 
.adfloatright
{
	border-radius:5px;
	height:auto;
	overflow: hidden;
	max-width: 30%;
	text-align: center;
	width:320px;
}

/* Non-floating elements are usually inside parent floats.  They do not usually
   have a border */
.nofloat, 
.centerfloat,
.centerfloatborders
{
	border-width:0;
	box-sizing:border-box;
	display:block;
	margin:auto;
	float: none;
}

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

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

.floatleftinternal
{ margin: 10px 10px 10px 0; }

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

/* Round corners on floating inserts */
.floatleft,
.floatright
{
	border-radius:5px;
}

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

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

/* Format for Google Ads */
.adsbygoogle
{
	display:block;
}

/* Float extending over left and right boundaries, appearing to float above the page.*/	
.insertfloatleft, .insertfloatright {
	background-color:lightyellow; /* #fbeec1 Beige-ish */
	border:1px solid #006699;
	box-shadow: 10px 10px 0 rgba( 128, 128, 128, 0.50 ); /*50% transparent */
	float: left;
	margin-bottom:20px;
	margin-left:-85px;
	margin-right:30px; 
	padding:15px; 
	text-align:left; 
	width: 35%;
}

.insertfloatright {
	box-shadow: -10px 10px 0 rgba( 128, 128, 128, 0.50 ); /*50% transparent */
	float: right;
	margin-right:-65px;
	margin-left: 30px;
}

/* noticediv used to display a floating notice in front of all text on a page.*/
#noticediv
{	
	background-color:transparent;
	border-radius:5px;
	box-sizing:border-box;
	color:red;
	display:table;
	max-width:600px;
	padding:10px;
  position:fixed;
	text-align:justify;
	visibility: visible;
	width: 50%;
	z-index: 100;
}

.stickyfooter
{	
	background-color: transparent;
  bottom: 0;
	box-sizing:border-box;
	color:black;
	display:block;
	font-size:.85em;
	height: 25px;
	padding:3px 7px;
  position: fixed;
	right:0;
	text-align:center;
	z-index: 100;
}

/* Additional settings for mouse or other pointer.  Clicktap is the class of any
element actuated by clicking a mouse, such as a menu item.  If the instruction 
for the element is "click", then change it to "tap" when the pointer is a finger
or other coarse pointer.*/
.clicktap::before
{ content:" Click "; }

/*******************************************************************************
	Elements that are displayed by setting display:block; at specified widths
*******************************************************************************/
.displayat400,
.displayat500,
.displayat600,
.displayat700,
.displayat900,
#displayat400,
#displayat500,
#displayat700,
#displayat900,
.displayat400inline,
.displayat500inline,
.displayat600inline,
.displayat700inline,
.displayat900inline,
#displayat400inline,
#displayat500inline,
#displayat700inline,
#displayat900inline 
 
{ display:none;}

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

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

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

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

	Elements that are converted to justified text at certain widths.  Used in 
	responsive design.
*******************************************************************************/

.justifyat400,
.justifyat500,
.justifyat600,
.justifyat700,
.justifyat900,
#justifyat400,
#justifyat500,
#justifyat700,
#justifyat900 
{}

/*******************************************************************************
	Elements that are removed by setting display:none; at specified widths
*******************************************************************************/

.killat400,
.killat500,
.killat600,
.killat700,
.killat900,
.killat1000,
#killat400,
#killat500,
#killat700,
#killat900,
#killat1000 
{}

/*******************************************************************************
	Left padding that is removed by setting padding-left:0; at specified widths.
	Used primarily with <ul> and <ol>.
*******************************************************************************/

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

.rotateat400,
.rotateat500,
.rotateat600,
.rotateat700,
#rotateat400,
#rotateat500,
#rotateat700,
{}


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

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

.scbmenu 
{
	background-color: white;
	box-sizing:border-box;
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	list-style-position: inside;
	list-style-type: none;
	overflow:hidden;
	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: normal;
	hyphens:auto;
	list-style-type: none;
	margin: 0;
	margin-bottom:3px;
	/* Do not change. Required for proper display */
	overflow:hidden;
  padding: 10px 5px 10px 10px;
	text-align:left;
}

.scbmenu h5 a,
.scbmenu h5 a:link,
.scbmenu h5 a:visited,
.scbmenu h5 a:active
{
 	color:white;
	display: block;
	font-weight: normal;
  text-decoration: none;
}

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

.scbmenu ul 
{
  background-color: white;
	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:15px;
  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:0 5px 5px 0;
}

/* 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:150px;
	 visibility:hidden;
}

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

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

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

#donate1 { font-size: 1em; }
#donate2 { font-size: 1em; }


#scbaddr1 
{ 
	display: block;
	font-weight:bold; 
  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;   
  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,
.fluid-table-float-left,
.fluid-table-float-right
{
	background-color: ivory;
	border: 1px solid #006699;
	box-sizing:border-box;
	font-size: 12pt;
	line-height: 1.2;
	padding: 0;	
}

.table-float-left,
.fluid-table-float-left
{

	float:left;
	margin: 10px 10px 10px 0;
	padding-left:10px;
	padding-right:10px;
}

.table-float-right,
.fluid-table-float-right
{
	float:right;
	margin: 10px 0 10px 10px;
	padding-left:10px;
	padding-right:10px;
}

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

/* Alternating row blue and white table */

/* Table with rows that alternate background colors between white and blue */
.table_alternating_row_color_blue tr { background-color: white;}
/*  Define the background color for all the ODD background rows  */
.table_alternating_row_color_blue tr:nth-child(odd){ background-color: #b2d1e0;}
/*  Define the background color for all the EVEN background rows  */
.table_alternating_row_color_blue tr:nth-child(even){ background-color: white; }
/*  Define the styles of td's  */
.table_alternating_row_color_blue td { 
		border-bottom: 1px solid #006699;
		border-top: 1px solid #006699; 
		padding: 5px; }
/* Remove the bottom border from the last td's in the table */
.table_alternating_row_color_blue tr:last-child td {	Border-bottom: 0 }

/* Alternating row tan and white table */

/* Table with rows that alternate background colors between white and tan */
.table_alternating_row_color_tan {background-color:yellow;}
.table_alternating_row_color_tan tr { background-color: white;}
/*  Define the background color for all the ODD background rows  */
.table_alternating_row_color_tan tr:nth-child(odd){ background-color: #d2b48c;}
/*  Define the background color for all the EVEN background rows  */
.table_alternating_row_color_tan tr:nth-child(even){ background-color: white; }
/*  Define the styles of td's  */
.table_alternating_row_color_tan td { 
		border-bottom: 1px solid #d2b48c;
		border-top: 1px solid #d2b48c; 
		padding: 5px; }
/* Remove the bottom border from the last td's in the table */
.table_alternating_row_color_tan tr:last-child td {	Border-bottom: 0 }

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

/*******************************************************************************
	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
{ 
	font-size: 12pt;
}

/* 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 */
.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 
{ 
	box-sizing:border-box;
	font-weight: normal;
}

.photocaption, .small-caps
{
	box-sizing:border-box;
	font-family:Futura, Trebuchet MS, Arial, sans-serif;
	font-weight:bold;
	line-height:1.3;
}

.footnote, footnotes
{
	box-sizing:border-box;
	background-color:transparent;
	font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
	font-size: 100%;
	font-weight:normal;
}

.photocaption {	font-size:80%;}

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

/*******************************************************************************
	                           Font Decoration Classes
*******************************************************************************/
.normal, .normalfont, .normaltext
{ font-weight:400; }

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

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

.blue-text,  .bluetext  { color: #006699; } /* scb blue */

.gray-text,  .graytext, 
.grey-text,  .greytext  { color: #707070; }

.green-text, .greentext { color: green; }

.red-text,   .redtext   { color: red; }

.rust-text,  .rusttext  { color: #b7410e; } /* Medium dark shade of red-orange */

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

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

/*******************************************************************************
	                           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
{
	background-color:transparent;
	box-sizing:border-box;
	color: #006699; /* SCB Blue */
	display: block;
	font-family: salesforcesans, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-kerning:normal;
	font-weight:bold;
	letter-spacing:1.3px;
  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
{
	background-color:transparent;
	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;  }

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

/*******************************************************************************
	Hyphenatio
*******************************************************************************/
.hyphenate, .hyphenated
{
  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	
*******************************************************************************/

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

/*******************************************************************************
		Elements that can expand to show more text on the click of a button. Used
	 	to minimize the length of sidebars on smartphones. On larger screens, the
	 	text displays as notmal without the option to minimize.
		
		HTML
		
			<div class="showlessmoreheading" id="lessmore_heading">
				[Minimum test to be displayed]
			</div>
			
			<div class="showlessmoretext" id="lessmore_text">	
				[The rest of the text that is hidden unto the less/more button is
				clicked]
			</div>
					
		  <div 
        class="showlessmorebutton"
        id = "lessmore_button" 
        onclick="toggleLessMore('lessmore_' )">
        <u>Show More</u>
      </div>

*******************************************************************************/
	 
/* Does not display until screen is 500 px wide or less See the settings at
	 500 px.*/
.showlessmorebutton
{ 
	color:#006699;
	display:none;
	font-size: 90%;
	margin:auto;
	padding:10px 0;	
}

/* Text that serves as the heading.  When the sidebar is minimized, the 
	 bottoms rows of text fade out. see .showlessmoreheading at 500 px*/	 
.showlessmoreheading
{ 
	background-color:transparent;
	font-weight:initial; 
}

/* Text that is hidden (display;none) when the sidebar is minimized.*/
.showlessmoretext {}

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

/* Classes used by Freefind */
.search-footer-table,
.search-header-table,
.search-headline
{ border-width: 0; }

/*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,
hr.reverse, hr.hrreverse, hr.hr-reverse 
{
	/* Mozilla, Opera */
	background-color:#006699;
	border:0;
	dusplay:table;
	height:1px;
	margin:5 auto;
	width: 100%;
}

/* Reversed Horizontal Line */ss
hr.reverse, hr.hrreverse, hr.hr-reverse
{
	background-color:white;
}

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

/* Indents */
.indent10 { margin-left:10px; }
.indent15 { margin-left:15px; }
.indent20 { margin-left:20px; }
.indent25 { margin-left:25px; }
.indent30 { margin-left:30px; }
.indent35 { margin-left:35px; }
.indent40 { margin-left:40px; }
.indent45 { margin-left:45px; }

/* Obsolete remove after 1/1/21*/
.indented40
{
	overflow: hidden; 
	width: auto;
	padding-left:40px;
	padding-right:40px;
}

/* Hanging indents */
	
/* ensp hanging indent -- OBSOLETE */
.hangingindentn, 
.hangingindent12, 
.hangingindent125, 
.hangingindent1210,
.hangingindent1215 
{
  padding-left: 12.5px ;
  text-indent: -12.5px ;
}
 
/* emsp hanging indent */
.hangingindent,
.hangingindent0, 
.hangingindent5,
.hangingindent8,
.hangingindent8f, /* special for faucet index, see jsfunctionxx.htm */
.hangingindent10, 
.hangingindent15,
.hangingindent20  
{
  padding-left: 17px ;
  text-indent: -17px ;
}

.hangingindent8f
	{ margin-bottom: 4px; }

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

/* Nullifies hanging indents. Used in internal paragraphs where the hanging
	 indent effect is not wanted. */
.nohangingindent
{
	padding-left: 0;
	text-indent: 0;
}

/*******************************************************************************
	Classes that align text or blocks of text
*******************************************************************************/

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


/* Center a <div or other block horizontally*/
.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%;"
 */
}

.centeredtable
{
	margin-left: auto;
	margin-right:auto;
}

/* Justified text */
.justified 
{
	box-sizing:border-box;
	text-align:left;
}

/* If browser supports auto hyphenation, text is justified.  
	 If not, text ramains aligned left. */
@supports ( hyphens:auto ) 
{
	.justified 
  {
  	text-align:justify;	
	}
}		  

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

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

/* Center vertically */
.vcenteredblock, .vcentered, .vblocked
{
	position: absolute;
	left: 50%;
  top:  50%;
  transform: translate(-50% -50%);
}

/* Center horizontally and vertically */
.allcentered
{
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

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

/* Conditional settings for body. If the browser supports auto hyphenation
text is justified.  If not, text is aligned left. */
@supports ( hyphens:auto ) 
{
	.justified 
  {
  	text-align:justify;	
	}
}		  


/* Left-Aligned text */
.left, .left-aligned, .leftaligned, .lefttext  
{
	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, .bordersall { border:1px solid #006699; }
.borderbottom { border-bottom:1px solid #006699; }
.borderleft { border-left:1px solid #006699; }
.borderright { border-right:1px solid #006699; }
.bordertop { border-top:1px solid #006699; }

/*******************************************************************************
	Columns
*******************************************************************************/
.basecolumn, .column, .break-inside-avoid
{
  column-gap:10px;
		-webkit-column-gap: 10px; /* Chrome, Safari, Opera */
  	-moz-column-gap: 10px; /* Firevox */
  break-inside: avoid; /* IE 10+ */
	break-inside: avoid-column;
	page-break-inside: avoid; /* Firefox */
		-moz-page-break-inside: avoid;
		-o-column-break-inside:avoid;
		-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
	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, .borders, .bordered  
{
	border: solid 1px #006699; /* SCB Blue */
	box-sizing:border-box;
}

.bottomborder
{
	border-bottom: solid 1px #006699; /* SCB Blue */
}

.leftborder
{
	border-left: solid 1px #006699; /* SCB Blue */
}

.rightborder
{
	border-right: solid 1px #006699; /* SCB Blue */
}

.topborder
{
	border-top: solid 1px #006699; /* SCB Blue */
}

.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
{
  	-moz-transform: rotate(180deg);
  	-ms-transform: rotate(180deg);
  	-o-transform: rotate(180deg);
  	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

/* Rotates text for emphasis */

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

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

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

.rotate-22 /* 22 degree rotation  -- approx 1/8th of a circle */
{
	display:block; 
		-moz-transform:rotate(-22deg);
		-ms-transform:rotate(-22deg);
		-o-transform:rotate(-22deg);
		-webkit-transform:rotate(-22deg);
	transform:rotate(-22deg);
}

.rotate-45 /* 45 degree rotation  -- 1/4 of a circle */
{
	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 /* 60 degree rotation , approx 2/3rds of a circle*/
{
	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 left edge of the page */
.rotate-90
{
	display:block; 
		-moz-transform:rotate(90deg);
		-ms-transform:rotate(90deg);
		-o-transform:rotate(90deg);
		-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

/* 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 
	 The color is a very light gray
*/
.dimmed { 	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 */
.highlighted 
{ background-color:yellow; }

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

.button-text,
.button-text2,
.button-text3,
.boxed-text,
.boxed-text2,
.boxed-text3, 
.boxed-text-table 
{ 
	border:2px solid #006699; 
	font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
	font-size: 95%;
	padding:3px;
}

.boxed-text
{ border-radius:5px; }

.button-text2, .boxed-text2
{ border-width:2px; }

.button-text3, .boxed-text3
{ border-width:3px; }

.boxed-text-table
{
	border-radius: 5px;
	display:table;
	margin: 20px auto;
	max-width:90%;
	padding: 15px;
}

/* Draws text inside a black border */
.blackbox
{ border-color:black; }

/* Draws text inside a blue circle */
.circledtext 
{
  display: flex; 
  align-items: center;
	background-color:ivory;
	border: 1px solid #006699;
  border-radius: 100%;
	height:100px;
  justify-content: center;
	margin: 5px 20px;
	padding:15px;
	text-align:center;
	width:100px;
}

/* inset text boxes */

.inset10
{ margin-left: 10px; }

.inset15
{ margin-left: 15px; }

.inset20
{ margin-left: 20px; }

.inset25
{ margin-left: 25px; }

/* 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: -.20em 7px 5px 0;	
}

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

/* Headline Text */
.emphatic, .headline, .headlinebottom, .lead-paragraph, .leadparagraph 
{
	box-sizing:border-box;
	color: black;
	font-size: 1.2em;
	font-weight:normal;
	margin-bottom:15px; 
}

.headlinebottom
{
	border-bottom: 5px solid #006699;
	margin-bottom:15px; 
	padding-bottom:15px;
}

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

/* fadeout class: Used to fadeout text at the bottom of a paragraph.  Indicates 
   that there is more to read.  Used in conjunction with the .showlessmore 
	 button class.*/
.fadeout 
{ position:relative; }
  
.fadeout:after 
{
  /*background-image: linear-gradient( to bottom, rgba(255,255,255, 0.0 ), rgba(255,255,255, 0.9 ) );*/
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
	max-height:100px;
  width: 100%;
  height:50%;
}

/*******************************************************************************
															Cookies Banner Class
*******************************************************************************/

/*******************************************************************************
	                              Lightbox Class 
																
	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,  
#foldedcornerright, .foldedcornerright,
#foldedcornerleft, .foldedcornerleft 
{
  background-color: #fafaef; /* Light beige */
  border-width:0;
	box-shadow: -9px 9px 7px rgba( 208,208,208, 0.5 ); /*50% transparent */ 
  color: black;
  margin: 2em auto;
  padding: 1em 1.5em;
	position: relative;
}

#foldedcornerleft, .foldedcornerleft
{ 
	box-shadow: 9px 9px 7px rgba( 208,208,208, 0.5 ); /*50% transparent */ 
	margin-right: 20px;
}

#foldedcornerright, .foldedcornerright
{ margin-left: 20px; }

#foldedcorner:before , .foldedcorner:before,
#foldedcornerright:before , .foldedcornerright:before 
{
  border-color:#dedec8  white;
  border-style: solid;
  border-width: 0 56px 56px 0;
  content: "";
	display:block; /* Needed for Firefox 3.0 */
  position: absolute;
  right: 0;
  top: 0;
	width:0;
}

#foldedcornerleft:before , .foldedcornerleft:before 
{
  border-color: #dedec8  white;
  border-style: solid;
  border-width: 0 0 56px 56px;
  content: "";
	display:block; /* Needed for Firefox 3.0 */
  left: 0;
  position: absolute;
  top: 0;
	/* this is key.  A 56px border is displayed on a box that has not width */
	width:0;
}

/*******************************************************************************
	                            Message Box class
*******************************************************************************/
			
#msgBox {
  background-color:lightblue;
	border: 1px solid black;
	border-radius:10px;
  display:none;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-weight:normal;
	opacity: 0.8;
  padding:20px 30px;
  position: fixed;
  top:  50%;
  left: 50%;
  transform: translate(-50%, -50%);
	Width:250px;
  z-index:1000;
}


/*******************************************************************************
	                            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: 10px;
	position:absolute;
	text-align:left;
	visibility:visible;
	z-index:100;
}
			
/* Tooltipparent Class */
.tooltipparent, #tooltipparent
{
	color:green;
	text-decoration:underline;
}

/* Conditional settings for body. If the browser supports auto-hyphenation
text is justified.  If not, text is aligned left. */
@supports ( hyphens:auto ) 
{
	textarea
  {
  	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-width: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%; }

/*******************************************************************************
	                              CAPTCHA Classes.	
*******************************************************************************/

.capbox 
{
	display: table;
	*display: inline; zoom: 1; /* FOR IE7-8 */
	margin:auto;
	padding: 8px;
}

.capbox-inner 
{
	display:block;
	margin: 5px auto 0 auto;
	padding: 3px;
}

#CaptchaDiv 
{
	color: gray;
	display:block;
	font-size:1.5em;
	font-style: italic;
	font-weight:bold;
	margin:auto;
	text-align:center;
}

#CaptchaInput 
{ 
	color: gray;
	display:block; 
	font-weight:bold;
	margin:auto;
	text-align:center;
	width: 135px; 
}

/* *****************************************************************************
   																HCB COMMENT BOX 
   ****************************************************************************/

.author { margin-top:-20px; }

	 /* Buttons */
.btn
{
	border-radius:15px;
}

.comment { }

	 /* The "like' button */
.hcb-like
{
	margin-left:20px;
}

/* The comments are now blockquotes. Change style from ordinary blockquotes. */
.comment blockquote
{
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size:14pt;
	font-weight:bold;
}

/* "Not using HCB comment box yet" TEXT */
.home-desc
{
	display:none;
}
	 
/*******************************************************************************
/*******************************************************************************
	          Media Queries (Must be last statments in file )	
/*******************************************************************************
*******************************************************************************/
@media screen and ( max-width:1250px ) 
{
	/* Elements in body-header-class */
	#scblogo1, scblogo2, scblogo3
	{
		float:left; 
		width:100%;
	}

	#scblogo1	{ display:none; }
	#scblogo2	{ display:block;}
	#scblogo3 { display:none; }
	
	#donate1 	 { font-size: .8em; }
	#donate2 	 { font-size: .8em; }
}

@media screen and ( max-width:1000px ) 
{
	
	#donate1 	 { font-size: .7em; }
	#donate2 	 { font-size: .7em; }
}

/* Smartphone landscape ------------------------------------------------------*/
@media screen and ( max-width:950px ) 
{

	.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: 
			max-content
			33px
			minmax( 0, max-content) 
			1fr
			minmax(100px, max-content)
			minmax(100px, max-content) 
			minmax( 20px, max-content);
	}
	/* 950px */
  .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;
  }
	/* 950px */	
	.body-header-class
	{
		flex-direction: column;
		padding-bottom: 10px;
		text-align:center;
	}
	/* 950px */		
	/* Elements in body-header-class */
	#scblogo1, scblogo2, scblogo3
	{
		float:left; 
		width:100%;
	}
	/* 950px */

	#scblogo1	{ display:none; }
	#scblogo2	{ display:none;}
	#scblogo3 { display:block; }
	
	#donate1 	 { font-size: .9em; }
	#donate2 	 { font-size: .9em; }
	
	#headerdiv { height:200px; }
	#headerdiv { max-height:0; }

	#searchbar { width: 220px; }
	#scbaddr1  { display:none; }
	#scbaddr2  { display:block; padding-bottom:5px;}
	
	/* 950px */
  .body-left-class 
  {
		display:flex;
		align-items:center;
			-webkit-align-items:center;
		flex-direction:column;
			-webkit-flex-direction:column;
		border-width:0;
  	border-bottom: 1px solid #006699;
  	padding: 0;
		width:100%;
  }
	/* 950px */	
	/* Elements in body-left-class */
  .mainmenugooglead
  {
  	display:none;
  }
	/* 950px */	
	/* Elements in body-header-bar-class */	
  #scbmenucontainer
  {
		display:flex;
		flex-direction:row;
			-webkit-flex-direction:row;
		flex-wrap:nowrap;
			-webkit-flex-wrap:nowrap;
  	justify-content: space-around;	/* Set space between columns*/ 
  		-webkit-justify-content: space-around;
  	height:0;
		margin:0 -2.5px;
  	width:100%;
  }
		/* 950px */
	.scbmenucolumn
	{
		width:32%;
	}
	/* 950px */	
	.scbmenu h5
	{
		padding: 10px 5px 10px 10px;
	}
	/* 950px */	
  .body-main-class, #body-main-class 
  { 
  	padding: 0 5px 20px 5px;
  }

	/* Elements in body-left-class */
	/* 950px */	
	/* Menu caption is displayed for menus displayed in the left panel.  
		 Menu divider is displayed for menus displayed in the top panel. */
	.menucaption { display:none; }
	.menudivider { display:block; }
	.menudividerx { display:none; }
	/* 950px */	
	/* Elements in body-comment-class */
	.body-right-class, 
	#publicservice 
	{ display:none; }
	/* 950px */		
	.body-footer-class
	{
		border-width:0;
		flex: 1;
		flex-flow: row wrap;
	}

	/* 950px */		
  .floatleft, 
  .floatright,
  .floatleftnomessage,
  .floatrightnomessage
  .floatleftnoborders,
  .floatrightnoborders
	{
		min-width: 25%;
	}

	/* Faucet Page classes */
  /* Indents Faucets3.js/showCerts() when viewport width > 850. Reduce indent
	back to zero when < 950 */
  .certindent 
  {
  	padding-left:0;
  }
	/* 950px */
	.faucetsummaryitem, .summaryitem
  { font-size:12pt; }
	/* 950px */
	.faucetcompanyaddress, #faucetcompanyaddress
	{ font-size:11pt; }
	/* 950px */	
  .faucetwarrantygroup
  {
		margin-left:5px;
  	min-width:100%;
  	width:100%;
  }
		
	/* 950px */	/* Miscellaneous elements not associated with a particualr body class */
	.expandat700, #expandat700, 
	.expandat800, #expandat800, 
	.expandat900, #expandat900
	{ 
		/* just in case it is a floating element, remove the float */
		border: 1px solid #006699;
		float:none;
		margin: auto;
		padding:5px;
		width:90%;
	}
	/* 950px */	
	/* Used in faucets3.js: showFaucetIndex()*/
	.indexletter
	{
		font-size:12pt;
		font-weight:bold;
	}
	/* 950px */	
  /* Conditional settings for body. If the browser supports auto hyphenation
  text is justified.  If not, text is aligned left. */
  @supports ( hyphens:auto ) 
  {
  	.justifyat700, #justifyat700 
    {
    	text-align:justify;	
  	}
  }	
		  
	/* 950px */
	.killat700, #killat700
	{ 
		display:none; 
	}
	
	/* 950px */
	.displayat700, #displayat700
	{ display:block; }
	
	/* 950px */	
	.displayat700inline, #displayat700inline
	{ display:inline; }
	
	/* 950px */	
	.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; 
	}
	
	/* 950px */
	.killtransformat700
  {
  	-moz-transform:none;
  	-ms-transform:none;
  	-o-transform:none;
  	-webkit-transform:none;
  	transform:none;
  }
		/* 950px */
	/* Delete heading at top of each faucet page for smaller displays */
  #companyinbriefdiv, .companyinbriefdiv
  { display:none }
	/* 950px */
	#navhelp   		{ display:none; }
	#googlenavad 	{ display:none; }
	
  #fluidfont, .fluidfont
  { 
  	font-size: 12pt; 
  }
}

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

	/* Floats */	
	.adfloatleft,
	.adfloatright,
  .floatleft, 
  .floatright,
  .floatleftnomessage,
  .floatrightnomessage
  .floatleftnoborders,
  .floatrightnoborders
	{
		min-width: 25%;
	}
	/* 850px */
	#killat600, .killat600  
	{ display:none; }
	
	/* 850px */
	.killpaddingat500,
	.killpaddingleftat600
	{ padding-left: 0;}
	
	.killpaddingat500,
	.killpaddingrightat600
	{ padding-right: 0;}
	
	/* 850px */
	.killtransformat600,
  {
    transform:none;
      -moz-transform:none;
      -ms-transform:none;
      -o-transform:none;
      -webkit-transform:none;
    width:100%;
  }
	/* 850px */
	.displayat600, #displayat600
	{ display:block; }
	/* 850px */
	.displayat600inline, #displayat600inline
	{ display:inline; }
	/* 850px */	
	.expandat600, #expandat600
	{ 
		/* just in case it is a floating element, remove the float */
		border: 1px solid #006699;
		color:green;
		float:none;
		margin: auto;
		padding:5px;
		width:80%;
	}
	/* 850px */
	.rotateat600, #rotateat600
	{
		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 pages */
  .faucetwarrantygroup
  {
  	min-width:100%;
  	width:100%;
  }
}

/* SDmartphone Portrait ------------------------------------------------------*/
@media screen and ( max-width:750px ) 
{
  body 
  {
		text-align:left;
	}
	/* 750px */	
  .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;
	}
	/* 750px */	
  ul, ol 
  { 
		padding-left:25px;
  }
	
	/* 750px */	
  ol.noindent, ol.no-indent, ol.noindent10, ol.no-indent10, 
  ul.noindent, ul.no-indent, ul.noindent10, ul.no-indent10 
  {
  	list-style-position:outside;
		
  }
	
	/* 750px */	
  /* 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
  {
		background-color:transparent;
  	/* Browser specific assignments */
      -webkit-hyphens:auto;
      -ms-hyphens:auto;
      -moz-hyphens: auto;
    hyphens:auto;

  }
	/* 750px */	
	.centered-block,
	.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;
		float:none;
		margin:7px auto;
		min-width:90%;
		width:100%;
		padding:0;
  }
	/* 750px */	
	/* Elements in body-left-class */	

	/* Menu Elements */	
	.commentblock
	{
  	display:flex;
  	-webkit-display:flex;
  	flex-direction: column;
  	-webkit-flex-direction: column;
	}
	/* 750px */				
	/* Miscellaneous elements not associated with a particualr body class */
	
	/* 
			At 750 px format changes fron desktop to tablet with all floats and tables
		 centered on the page
	*/	
	.adfloatleft,
	.adfloatright,
  .floatleft, 
  .floatright,
  .floatleftnomessage,
  .floatrightnomessage,
  .floatleftinternal, 
  .floatrightinternal,
  .floatleftnoborders,
  .floatrightnoborders,
  .nofloat
	{
		border:1px solid #006699;
		display:block; 
		float:none;
		margin:15px auto;
		min-width: 60%;
		padding:5px;
	}
	
		/* 750px */
	.adfloatleft,
	.adfloatright
	{ 
		min-width:320px; 
	}	

	/* 750px */	
  .centerfloat,
	.centerfloatborders,
  .floatleftinternal, 
  .floatrightinternal,
  .floatleftnoborders,
  .floatrightnoborders,
  .nofloat
	{
		border-width: 0;
	}
	/* 750px */		
	.centerfloatborders
	{
		border-bottom:1px solid #006699;
		border-top:1px solid #006699;
	}	

/*		
  .floatleft::before,
  .floatright::before,
	.floatrightnoborders::before
	{
		background-color: white;
		border:1px solid #006699;
		color:#006699;
		content:" Article Continues Below ";
		display:block;
		font-size:8pt;
		font-variant:small-caps;
		bont-weight:bold;
		margin: -17px auto 5px auto;	
		min-width:170px;
		text-align:center;
		width:35%;
	}
*/
	/* 750px */		
  .fluidfont, #fluidfont
  { 
  	font-size: 12px; 
  }
	/* 750px */	
  /* Document title.  Reduce font size for viewport < 550px wide */
  #doctitle, .doctitle
  {
  	font-size: 200%;
  }
	/* 750px */		
  /* Headline Text */
  .headline, .lead-paragraph, .leadparagraph 
  {
		color:black;
  	font-size: 1.25em;
		font-weight:normal;
  }
	/* 750px */			
  /* Conditional settings for body. If the browser supports auto hyphenation
  text is justified.  If not, text is aligned left. */
  @supports ( hyphens:auto ) 
  {
  	.justifyat500, #justifyat500 
    {
    	text-align:justify;	
  	}
  }		  
	/* 750px */	
	.displayat500, #displayat500
	{ display:block; }
	
		/* 750px */	
	.displayat500inline, #displayat500inline
	{ display:inline; }
	
		/* just in case it is a floating element, remove the float */
	.expandat500, #expandat500
	{ 
		/* just in case it is a floating element, remove the float */
		border: 1px solid #006699;
		float:none;
		margin: auto;
		padding:5px;
		width:80%;
	}
	/* 750px */	
	#killat500, .killat500  
	{ display:none; }
	
	/* 750px */
	.killpaddingat500,	
	.killpaddingleftat500
	{ padding-left: 0;}
	
	.killpaddingat500,	
	.killpaddingrightat500
	{ padding-right: 0;}
	
	/* 750px */	
	.killtransformat500
  {
    transform:none;
      -moz-transform:none;
      -ms-transform:none;
      -o-transform:none;
      -webkit-transform:none;
    width:100%;
  }
	
	/* 750px */	
	.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; 
	}
	
	/* 750px */	
	#foldedcorner, .foldedcorner,  
  #foldedcornerright, .foldedcornerright,
  #foldedcornerleft, .foldedcornerleft 
  {
		background-color: #fafaef;
    border-width:0;
  	box-shadow: none; 
    margin: auto;
  }

  /* Additional settings for mouse or other pointer.  Clicktap is the class of any
  element actuated by clicking a mouse, such as a menu item.  If the instruction 
  for the element is "click", then change it to "tap" when the pointer is a finger
  or other coarse pointer.*/
  .clicktap::before
  { content:" Tap "; }
	
	/* 750px */	
  /* Does not display until screen is 500px wide or less See the settings at
  	 500 px.*/
  .showlessmorebutton
  { display:table; }
	
	/* 750px */			  
  /* Text that is hidden (display;none) when the sidebar is minimized.*/
  .showlessmoretext
  { display:none }
	
	/* 750px */	
	.summary, #summary,
	.summaryblock, #summaryblock,
	.leftsummaryblock, #leftsummaryblock,
	.leftfaucetsummaryblock, #leftfaucetsummaryblock,	
	.middlesummaryblock, #middlesummaryblock,
	.middlefaucetsummaryblock, #middlefaucetsummaryblock,
  .rightsummaryblock, #rightsummaryblock,
	.rightfaucetsummaryblock, #rightfaucetsummaryblock
  {
  	border:none;
		display:block; 
  	overflow:hidden;
		width:100%;
  }
	
	/* 750px */	
	/* For faucet pages */
	.middlefaucetsummaryblock, #middlefaucetsummaryblock,
	.rightfaucetsummaryblock, #rightfaucetsummaryblock,
	.faucetcolumntopborder
  {
  	border-top: 1px solid #006699;
		padding-top:10px;
  }
	
	/* 750px */			
	.faucetsummary, #faucetsummary
  {
		display:block;
		margin: auto;
		width:100%; 
  }
	
	/* 750px */		
	.faucetimage, #faucetimage
	{
		display:block;
		margin: 20px auto 0 auto;
		min-width:250px;
		max-width:250px;
	}
}

/* Tablet Portrait ------------------------------------------------------*/
@media screen and ( max-width:600px ) 
{
	/* Floats *********/
	/* 600px */		
	.adfloatleft,
	.adfloatright,
  .floatleft, 
  .floatright,
  .floatleftnomessage,
  .floatrightnomessage,
  .floatleftnoborders,
  .floatrightnoborders,
  .nofloat
	{
		border: 1px solid #006699;
		min-width:80%;
	}
	
		/* 600px */
	.adfloatleft,
	.adfloatright
	{ 
		max-width:320px; 
	}	

	/* 600px */
	/* Used on faucet pages */		
	.faucetimage, #faucetimage
	{
		min-width:75%;
	}
	
}

/* SDmartphone Portrait ------------------------------------------------------*/
@media screen and ( max-width:500px ) 
{
	/* 500px */	
	.adfloatleft,
	.adfloatright,
  .floatleft, 
  .floatright,
  .floatleftnomessage,
  .floatrightnomessage,
  .floatleftinternal, 
  .floatrightinternal,
  .floatleftnoborders,
  .floatrightnoborders,
  .nofloat
	{
		border: 1px solid #006699;
		min-width:85%;
	}

	/* 500px */
	.adfloatleft,
	.adfloatright
	{ 
		max-width:320px; 
	}
	
	/* 500px */		
	.displayat400, #displayat400
	{ display:block; }
	
	/* 500px */		
	.displayat400inline, #displayat400inline
	{ display:inline; }

  /* Used in the title of document pages to add white space at the bottom of the title */
		/* 500px */	
  #doctitle, .doctitle
  {
  	text-align:center;
  }
	
	/* 500px */	
	.expandat400, #expandat400
	{ 
		/* just in case it is a floating element, remove the float */
		color:green;
		float:none;
		min-width:95%;
		margin: auto;
		padding:5px;
		width:90%;
	}
	
	/* 500px */	
	/* Used on faucet pages */		
	.faucetimage, #faucetimage
	{
		min-width:85%;
	}
		
	/* 500px */	
	 floatleftinternal, 
  .floatrightinternal
	{ border-width:0; }

  	/* Indents */
	.indent25,
	.indent30,
	.indent35,
	.indent40,
	.indent45 
	{ margin-left:15px; }
	
	
	/* 500px */	
	.insertfloatleft, insertfloatright
	{
		border:none;
		box-shadow: 0 0;
		float:none;
		margin:7px auto;
		min-width:200px;  /* for Safari */
		width:95%; 		 /* for Safari */
		min-width:vw;
		width:vw; 	
		padding:10px;
	}
	
	/* 500px */	
	.killat400, #killat400 
	{ display:none; }
	
	/* 500px */
	.killpaddingat400,		
	.killpaddingleftat400
	{ padding-left: 0;}
	
	.killpaddingat400,		
	.killpaddingrightat400
	{ padding-right: 0;}

  	ul, ol 
  { 
  	padding-left:15px;
  
  }
	
}

@media screen and ( max-width:450px ) 
{
	
	.adfloatleft,
	.adfloatright,
  .floatleft, 
  .floatright,
  .floatleftnomessage,
  .floatrightnomessage,
  .floatleftinternal, 
  .floatrightinternal,
  .floatleftnoborders,
  .floatrightnoborders,
  .nofloat
	{
		border: 1px solid #006699;
		min-width:95%;
	}
	
	/* 450px */
	.adfloatleft,
	.adfloatright
	{ 
		max-width:320px; 
	}
		
}

/* SDmartphone Portrait ------------------------------------------------------*/
@media screen and ( max-width:400px ) 
{
  .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;
  }
	/* 400px */	
  ul, ol 
  { 
		padding-left:15px;
  }
	/* 400px */		
	/* Elements in body-header-bar-class */	
  #scbmenucontainer
  {
  	align-items: center;
  		-webkit-align-items: center;
  	display:flex;
  	flex-direction:column;
  		-webkit-flex-direction: column;
  	height:auto;
  	margin:0 auto;
  	text-align:left;
  }
	/* 400px */		
	.scbmenucolumn
	{
		min-width:70%;
		width:70%;
	}
	
	/* Misc elements not associated with a particual class */	
	/* 400px */		
	/* Floats @ 400 */
	.adfloatleft,
	.adfloatright,
 	.centerfloat,
	.centerfloatborders,
  .floatleft, 
  .floatright,
  .floatleftinternal, 
  .floatrightinternal,
  .floatleftnomessage,
  .floatrightnomessage,
  .floatleftnoborders,
  .floatrightnoborders
	{
		width:95%;		
	}
	/* 400px */		
  .floatleftinternal, 
  .floatrightinternal,
	.centerfloat
	{ border-width: 0; }
	
	/* 400px */	
	/* Images inside floats */	
  img.floatImage
	{
		margin: auto;
		min-width:100%;
		padding: 0;
	}
	/* 400px */	
	.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;
		margin: 0;
		padding: 0;
		min-width:100%;
		margin:15px auto 15px auto;
		max-width:100%;
		width:100%;
  }
	/* 400px */	
	.lead-paragraph, .leadparagraph
  {
  	font-size: 1.1em;
  	line-height:normal;
  }
	/* 400px */		
  .commentbox
  {
  	width:230px;
  }
	
	/* 400px */			
	#share-buttons img 
  {
    padding: 3px;
		height: 24px;
		width: 24px;
  }
	/* 400px */		
  /* Conditional settings for body. If the browser supports auto hyphenation
  text is justified.  If not, text is aligned left. */
  @supports ( hyphens:auto ) 
  {
  	.justifat400, #justifyat400 
    {
    	text-align:justify;	
  	}
  }	
	/* 400px */			  
	.displayat400, #displayat400
	{ display:block; }
	/* 400px */		
	.displayat400inline, #displayat400inline
	{ display:inline; }
	/* 400px */	
	.expandat400, #expandat400
	{ 
		/* just in case it is a floating element, remove the float */
		float:none;
		min-width:95%;
		margin: auto;
		padding:5px;
		width:95%;
	}
	/* 400px */	
	.killat400, #killat400 
	{ display:none; }
	
	/* 400px */		
	.killpaddingat400,		
	.killpaddingleftat400
	{ padding-left: 0;}

	.killpaddingat400,		
		.killpaddingrightat400
	{ padding-right: 0;}

	/* 400px */	
	.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);
		text-align:left;
	}
	/* 400px */	
	#foldedcorner, .foldedcorner,  
  #foldedcornerright, .foldedcornerright,
  #foldedcornerleft, .foldedcornerleft 
  {
		background-color: #fafaef;
    border-width:0;
  	box-shadow: none; 
    margin: auto;
  }
	
	/* Faucet Page classes */		
	/* 400px */	
	/* Used on faucet pages */		
	.faucetimage, #faucetimage
	{
		min-width:95%;
	}
	/* 400px */	
	.faucetsummaryitem
  {
  	font-size:1.0em; 
  }
	  
  /* This is the floating div that displays the faucet index.  See faucets3.js:
  	 showFaucetIndex() */
	/* 400px */			 
  #faucetindex, .faucetindex,
	#leftfaucetsummaryblock, .leftfaucetsummaryblock
  {
		border-width:0;
  }


}

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