Sans-Serif. Arial, sans-serif; Helvetica, sans-serif; ;
.palatino {font-family:  Palatino Linotype, Book Antiqua, Palatino, serif: font-size: 12pt; color: rgb (0,0,0)}
.palatino1 {font-family:  Palatino Linotype, Book Antiqua, Palatino, serif: font-size: 16pt; color: rgb (0,0,0)}
H1  {font-family: Verdana,Arial,Helvetica; font-size: 13pt; color: rgb (0,0,0); font-weight: bold;}
H5  {font-family: Verdana,Arial,Helvetica; font-size: 18pt; color: rgb (0,0,0); font-weight: bold;}

H2     {font-family: Verdana,Arial,Helvetica; font-size: 10pt; color: rgb (0,0,0)}

H3     	{font-family: Verdana,Arial,Helvetica; font-size: 11pt; color: rgb (0,0,0)}
H4     {font-family: Verdana,Arial,Helvetica; font-size: 10 pt; color: rgb (120,120,120)}
.heading {font-family: Verdana,Arial,Helvetica; font-size: 18pt; color: rgb (0,0,0); font-weight: bold;}

.heading1    {font-family: Arial, Gadget, sans-serif; font-size: 14pt; color: rgb (0,0,0) font-weight: bold;}
.heading2    {font-family: Arial Black, Gadget, sans-serif; font-size: 12pt; color: rgb (51,102,153); font-weight: bold;}
.heading3    {font-family: Arial Black, Gadget, sans-serif; font-size: 22pt; color: rgb (0,0,0); font-weight: bold;}

.century2      { font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 16px; color: rgb(102,102,0); font-weight: normal} 
.smalltext     { font-family: 'Roboto', sans-serif; font-size: 16px; color: rgb(0,0,0); font-weight: normal} 

.century3      { font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 18px; color: rgb(102,102,0); font-weight: normal} 
.wttop  	{font-family: britannic bold; font-size: 20pt; color: rgb(0,0,0)}

.titles		{font-family: agency fb; font-size: 16pt; color: rgb(51,102,153); font-weight: bold}
.kelly3		{font-family: calibri; font-size: 12pt; color: rgb(0,0,0)}
.kelly2		{font-family: calibri; font-size: 13pt; color: rgb(0,0,0)}
.kelly5		{font-family: calibri; font-size: 14pt; color: rgb(0,0,0)}
.kelly4		{font-family: calibri; font-size: 16pt; color: rgb(0,0,0)}
.kelly6	{font-family: calibri; font-size: 18pt; color: rgb(0,0,0)}

.general3	{font-family: courier; font-size: 16pt; color: rgb(0,0,0)}
.general2	{font-family: courier; font-size: 11pt; color: rgb(0,0,0)}
.generalx	{font-family: courier; font-size: 18pt; color: rgb(0,0,0)}
.general1	{font-family: courier; font-size: 12pt; color: rgb(0,0,0)}
.general	{font-family: Verdana,Arial,Helvetica; font-size: 9pt; color: rgb(0,0,0)}
.navblue	{font-family: georgia,courier; font-size: 12pt; color: rgb(74,172,157)}
.navblue2	{font-family: courier; font-size: 10pt; color: rgb(74,172,157)}
.navblue3	{font-family: Verdana,Arial,Helvetica; font-size: 9pt; color: rgb(74,172,157); line-height: 16px}
.navyellow	{font-family: courier; font-size: 8pt; color: rgb(255,255,0)}
.navyellow2	{font-family: Verdana,Arial,Helvetica; font-size: 8pt; color: rgb(255,255,0)}
.navwhite	{font-family: courier; font-size: 8pt; color: rgb(255,255,255)}
.regular	{font-family: Verdana,Arial,Helvetica; font-size: 9pt; color: Black} 
.copyright	{font-family: georgia,bookman old style,Arial,Helvetica; font-size: 8pt}
.normal  	{font-family: Verdana,Arial,Helvetica; font-size: 11pt}
.normalblink  	{font-family: Verdana,Arial,Helvetica; font-size: 11pt;color: rgb(0,102,204)}
.normalnavblack {font-family: Verdana,Arial,Helvetica; font-size: 18pt; font-weight: bold}
.normalred 	{font-family: Verdana,Arial,Helvetica; font-size: 9pt; color: rgb(153,0,0)}
.normalnav  	{font-family: Verdana,Arial,Helvetica; font-size: 10pt}
.normalnavb  	{font-family: Verdana,Arial,Helvetica; font-size: 10pt; font-weight: bold}
.normalnavsm  	{font-family: Verdana,Arial,Helvetica; font-size: 9pt}
.normalnavtopbar  	{font-family: Verdana,Arial,Helvetica; font-size: 9pt}
.normalnavsmblu  	{font-family: Verdana,Arial,Helvetica; font-size: 7pt; color: rgb(51,102,153)}
.normalnavsmred  	{font-family: Verdana,Arial,Helvetica; font-size: 7pt; color: rgb(204,0,0)}
.normaltag  	{font-family: Verdana,Arial,Helvetica; font-size: 10pt; color: rgb(0,0,0)}
.normalred1  	{font-family: Verdana,Arial,Helvetica; font-size: 12pt; color: rgb(153,0,0); font-weight: bold}
.normalred  	{font-family: Verdana,Arial,Helvetica; font-size: 10pt; color: rgb(153,0,0)}
.normalblue  	{font-family: Verdana,Arial,Helvetica; font-size: 11pt; color: rgb(51,102,204)}
.normalblueb  	{font-family: Verdana,Arial,Helvetica; font-size: 9pt; color: rgb(51,102,204); font-weight: bold}
.normalbluelink	{font-family: Verdana,Arial,Helvetica; font-size: 10pt; color: rgb(51,102,204)}
.normal2  	{font-family: Verdana,Arial,Helvetica; font-size: 10pt; color: rgb(0,0,0)}
.normalblue2  	{font-family: Verdana,Arial,Helvetica; font-size: 12pt; color: rgb(51,102,204)}
.normal3  	{font-family: Verdana,Arial,Helvetica; font-size: 12pt; color: rgb(0,0,0)}
.normal4  	{font-family: Verdana,Arial,Helvetica; font-size: 12pt; font-weight: bold }
.normal5  	{font-family: Verdana,Arial,Helvetica; font-size: 15pt; color: rgb(0,0,0);font-weight: bold}
.normal6  	{font-family: georgia,bookman old style,Verdana,Arial,Helvetica; font-size: 13pt; color: rgb(0,204,204);font-weight: bold}
.firstnation    {font-family: Gill Sans, sans-serif;font-size: 14pt; color: rgb(0,0,0)}
.firstnation1    {font-family: Gill Sans, sans-serif;font-size: 16pt; color: rgb(0,0,0)}
.fn2             {font-family: Gill Sans, sans-serif;font-size: 18pt; color: rgb(0,0,0)}
.onheader  	{font-family: georgia,bookman old style,Verdana,Arial,Helvetica; font-size: 10pt; font-weight: bold; color: rgb(0,0,200)}
.topstories    	{font-family: georgia,bookman old style,Verdana; font-size: 12pt; color: rgb(153,0,0)}
.topstorylabel 	{font-family: georgia,bookman old style,Verdana; font-size: 7pt; color: rgb(100,28,38)}
.date	 	{font-family: georgia,bookman old style,Verdana; font-size: 10pt; color: rgb(0,0,0)}
.services 	{font-family: georgia,bookman old style,Verdana; font-size: 7pt; color: rgb(0,0,0)}
.news1	 	{font-family: georgia,bookman old style,Verdana; font-size: 7pt; color: rgb(216,8,42)}

.fp1   		{font-family: georgia,bookman old style,Verdana; font-size: 9pt; color: rgb(255,255,255); font-weight: bold}
.fp2   		{font-family: georgia,bookman old style,Verdana; font-size: 8pt; color: rgb(0,0,0); font-weight: bold}
.fp3   		{font-family: georgia,bookman old style,Verdana; font-size: 10pt; color: rgb(0,0,0); font-weight: normal; text-align: left}
.fp4   		{font-family: georgia,bookman old style,Verdana; font-size: 7pt; color: rgb(0,0,0);font-weight: normal}
.fp5   		{font-family: georgia,bookman old style,Verdana; font-size: 9pt; color: rgb(0,0,0); font-weight: normal}

.century       { font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 24px; color: rgb(0,0,0); font-weight: normal} 

.centurylink      { font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 24px; color: rgb(0,102,204); font-weight: normal} 
.gothic       { font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: normal} 
.gothic1      { font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 20px; font-style: normal; font-variant: normal; font-weight: normal} 
#maincontentfp	{width:850px;position:relative;left:2px;}
#newsfp		{background:ffffff;width:160px;float:left;}
#audiofp	{background:ffffff;width:160px;top:2px;}
#photofp	{background:ffffff;width:320px;position:relative;left:2px;float:left;}
#coolerfp	{background:ffffff;width:160px;}
#h20urbanfp	{background:ffffff;width:160px;position:relative;left:2px;float:left;}
#advisoriesfp	{background:ffffff;width:160px;position:relative;left:2px;float:left;}
#alertsfp	{background:ffffff;width:160px;}
#directoryfp	{background:ffffff;width:160px;}
#weekenderfp	{background:ffffff;width:160px;position:relative;left:2px;float:left;}
#twitterfp	{background:ffffff;width:160px;}
#freshcupfp	{background:ffffff;width:160px;}

.printed 	{text-align:justify}

A:link    	{color: rgb(0,0,0)}

A:visited 	{color: rgb(0,0,0)}
A:hover   	{color: rgb(0,0,0); text-decoration:none}
A		{text-decoration:none}

ul.square {list-style-type: square; padding-left: 7;} 

.searchbox {
background-color: #fff200;
font-family: verdana;
font-size: 8pt;
color: #000000
}

.searchbox1 {
background-color: #231f9b;
font-family: courier; 
font-size: 12pt;
color: #ffffff;
width: 170px;
height: 26px;
border: 2px #0a2bf7 solid
}

.searchbox2 {
background-color: #ffffff;
font-family: courier;
font-size: 12pt;
color: #0000ff;
width: 160px;
height: 20px;
border: 2px #666666 solid
}

.searchbox3 {
background-color: #ffffff;
font-family: arial; 
font-size: 10pt;
color: #000000;
width: 170px;
height: 22px;
border: 2px #0a2bf7 solid
}
.normalnav A:link {color: rgb(0,0,0)}
.normalnav A:visited {color: rgb(0,0,0)}
.normalnav A:active {color: rgb(0,0,0)}
.normalnav A:hover {text-decoration: none; color: rgb(0,0,0)}

.news1 A:link {color: rgb(216,8,42)}
.news1 A:visited {color: rgb(216,8,42)}
.news1 A:active {color: rgb(216,8,42)}
.news1 A:hover {color: rgb(216,8,42)}

.navwhite A:link {color: rgb(255,255,255)}
.navwhite A:visited {color: rgb(255,255,255)}
.navwhite A:active {color: rgb(255,255,255)}
.navwhite A:hover {text-decoration: none; color: rgb(255,255,0)}

.general A:link {text-decoration: none; color: rgb(0,0,0)}
.general A:visited {text-decoration: none; color: rgb(0,0,0)}
.general A:active {text-decoration: none; color: rgb(0,0,0)}
.general A:hover {text-decoration: none; color: rgb(0,0,0)}

.navyellow A:link {color: rgb(255,255,0)}
.navyellow A:visited {color: rgb(255,255,0)}
.navyellow A:active {color: rgb(255,255,0)}
.navyellow A:hover {text-decoration: none; color: rgb(255,255,255)}

.navyellow2 A:link {color: rgb(255,255,0)}
.navyellow2 A:visited {color: rgb(255,255,0)}
.navyellow2 A:active {color: rgb(255,255,0)}
.navyellow2 A:hover {text-decoration: none; color: rgb(255,255,255)}

.bluelinks A:link {font-family: Verdana,Arial,Helvetica; font-size: 10pt; color: rgb(45,54,253); font-weight: bold}
.bluelinks A:visited {font-family: Verdana,Arial,Helvetica; font-size: 10pt; color: rgb(45,54,253); font-weight: bold}
.bluelinks A:active {font-family: Verdana,Arial,Helvetica; font-size: 10pt; color: rgb(45,54,253); font-weight: bold}
.bluelinks A:hover {font-family: Verdana,Arial,Helvetica; font-size: 10pt; text-decoration: underline; color: rgb(255,0,0); font-weight: bold}

.commentlink A:link {border: 1px #000066 solid; background-color: #0066cc; font-family: Verdana; font-size: 10pt; color: #ffffff; font-weight: bold}
.commentlink A:visited {color: #ffffff}
.commentlink A:active {color: #ffffff}
.commentlink A:hover {color: #000000}

ul#twitter_update_list a:link, ul#twitter_update_list a:visited {
display:block;
color:#880000;
}


.hiddenDiv {
 display: none;
 }
.visibleDiv {
 display: block;
 }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup chat - hidden by default */
.chat-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width textarea */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 200px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
</style>
</head>
<body>

<h2>Popup Chat Window</h2>
<p>Click on the button at the bottom of this page to open the chat form.</p>
<p>Note that the button and the form is fixed - they will always be positioned to the bottom of the browser window.</p>

<button class="open-button" onclick="openForm()">Chat</button>

<div class="chat-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Chat</h1>

    <label for="msg"><b>Message</b></label>
    <textarea placeholder="Type message.." name="msg" required></textarea>

    <button type="submit" class="btn">Send</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  </form>
</div>

<script>
function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}
</script>

</body>
</html>