/* n8mdprev60.css */

body {
	background-color:#CCCCCC
}

a {
	text-decoration: underline;
	color:#0000ff;		
}

h1 {
  background-color: #d3d3d3;
}

h2{ 
   font-size: 36px; 
   font-family: serif; 
   color:#808000; 
/*   text-align: center;  */
   animation: animate 1.5s linear infinite; 
}

#headerbox {
  background-color: #86888a;
  padding: 5px ;
  height: 30px;
  width: 173px;
}
  
@keyframes animate{ 
   0%{ 
     opacity: 0; 
   } 
   50%{ 
     opacity: 0.7; 
   } 
   100%{ 
     opacity: 0; 
   } 
} 

.color-box1 {
  width: 100%;
  height: 20px;
  background-color: #ff0000;
}

/* New Marquee Style From ChatGPT  */
.marquee-container1 {
  display: flex;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  color: white;
  padding: 10px;
  box-sizing: border-box;
  font-family: sans-serif;
}

.marquee-title1 {
  flex: 0 0 auto;
  padding-right: 15px;
  font-weight: bold;
  white-space: nowrap;
  color: #ff0000;
}

.marquee-area1 {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
}

.marquee-text1 {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  from {
	transform: translateX(0%);
  }
  to {
	transform: translateX(-100%);
  }
}

/* New Marquee Style From ChatGPT  */
.marquee-container2 {
  display: flex;
  width: 100%;
  overflow: hidden;
  background: black;
  color: white;
  padding: 10px;
  box-sizing: border-box;
  font-family: sans-serif;
}

.marquee-title2 {
  flex: 0 0 auto;
  padding-right: 15px;
  font-weight: bold;
  white-space: nowrap;
  color: #ffffff;
}

.marquee-area2 {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
}

.marquee-text2 {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: marquee 30s linear infinite;
}

.marquee-area2:hover .marquee-text2 {
    animation-play-state: paused;
}

/* Weather Ticker CSS */
/* 
#newsbar {
	padding: 1px 5px 5px 5px;
	z-index: 3;
	display: inline;
 	float: left;   
	background-color: #FF0000;
	color: white;
	font-size: 15px;
	position: relative;
	font-weight: bold;
	width: 210px;
	height: 25px;
	left: 0px;
	border: 1px solid black;  
} 
*/

#TICKER {
	border: 1px solid #ffffff;
	float: left;
	z-index: 3;
	color: #FFFFFF;
	font-size: 15px;
	overflow: hidden;
	width: 100%;
	position: relative;
	height: 25px;
	display: inline;
	min-width: 0px;
	margin-top: 0px;
	top: 0px;
	left: 3px;
	background-color: #FFFFFF;
	vertical-align: middle;
}


.bgnormaltext {
  color: black;
  background-color: #FFFDED;
  z-index: 3;
  height: 40px;
  font-size: 20px;
}

.bgwithtext {
  color: black;
  background-color: #ff6600;
  z-index: 3;
  height: 40px;
  font-size: 20px;
}

.bgwximmediatetext {
  color: white;
  background-color: red;
  z-index: 3;
  height: 40px;
  font-size: 20px;
}

.bgwxexpectedtext {
  color: black;
  background-color: yellow;
  z-index: 3;
  height: 40px;
  font-size: 20px;
} 

img {
  max-width:100%;
  height:auto;
  max-height:100%;  
  }

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
} 
 
 /* Style tab links */
.sstvtablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 3px 3px;
  height: 130px;
  font-size: 14px;
  width: 20%;

}

.sstvtablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.sstvtabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
} 

 /* Style tab links */
.airtablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 3px 3px;
  height: 130px;
  font-size: 14px;
  width: 14%;

}
.airtabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
} 
.airtablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.hamtabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
} 

 /* Style tab links */
.hamtablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 3px 3px;
  height: 130px;
  font-size: 14px;
  width: 16%;
}

.hamtablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.projectstabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
} 

 /* Style tab links */
.projectstablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 3px 3px;
  height: 130px;
  font-size: 14px;
  width: 25%;

}

.projectstablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.projectstab {
  float:left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 100%;
  height: auto;
}

.projectstabcontent2 {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
} 

 /* Style tab links */
.projectstablink2 {
  display:block;
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 3px 3px;
  height: 130px;
  font-size: 14px;
  width: 100%;

}

.projectstablink2:hover {
  background-color: #777;
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #555;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    text-align:center;
}
/* Style the buttons */
.tab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    width: 10%;
    border-bottom: 3px solid transparent;
	
}
/* Background color of buttons on hover */
.tab button:hover {
    background-color: #700;
}

/* Create an active/current tablink class */

.tab button.active {
    border-bottom: 3px solid #FFFFFF;
    color: #E1FBFF;
}
/* Style the tab content which is shown below the Tab Menu Bar */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #EEEEEE;
    height: 100%;
}
 

 /* Place many of the styles here */
 /* BLACK */
.style0 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #000000; font-size: 10px}  
.style1 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #000000; font-size: 12px} 
.style2 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #000000; font-size: 14px}
.style3 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #000000; font-size: 16px}
.style4 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #000000; font-size: 18px}
.style5 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #000000; font-size: 20px}
.style6 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #000000; font-size: 24px}

/*  WHITE */
.style10 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 10px}
.style11 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 12px}
.style12 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 14px}
.style13 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 16px}
.style14 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 18px}
.style14 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 20px}
.style15 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 24px}
.style35 {color: #FFFFFF}
.style36 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #0000FF; font-weight: bold;}

/*  Lighter BLACK  */
.style20 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #252525; font-size: 10px}
.style21 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #252525; font-size: 12px}
.style22 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #252525; font-size: 14px}
.style23 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #252525; font-size: 16px}
.style24 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #252525; font-size: 20px}
.style25 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #252525; font-size: 24px}

/*  YELLOW */
.style30 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #FFFF00; font-size: 10px}
.style31 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #FFFF00; font-size: 12px}
.style32 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #FFFF00; font-size: 14px}
.style33 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #FFFF00; font-size: 16px}
.style34 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #FFFF00; font-size: 18px}
.style34 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #FFFF00; font-size: 20px}

/*  Deep GREEN */
.style40 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #008000; font-size: 16px}

.checkwx-container {
	background-color: #d3d3d3;
	padding: 3px;
	border: 2px solid black;
	border-radius: 4px;
	margin: 0;
	font-size:12px;
	color:black;
	width: 200px;
}

.topRowButtons {
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background-color:#79bbff;
	border-radius:6px;
	border:2px solid #84bbf3;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:3px 20px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
}
.topRowButtons:hover {
	background-color:#86888a;
}
.topRowButtons:active {
	position:relative;
	top:1px;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

.myButton {
	display:inline-block;
/*	background-color:#0d6efd;  */
	background-color:#00aeed;
	color:#252525;  
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	width: 150px;
	padding:5px;
	text-decoration:none;
}
.myButton:hover {
	background-color:#86888a;
}
.myButton:active {
	position:relative;
	top:1px;
}

/*  Container for US Map  */
.mapContainer {
      width: auto;
      margin:20px auto;
    }

    @media only screen and (min-width: 768px) and (max-width: 1000px) {
      .container {
        width: 768px;
      }
    }
    @media only screen and (max-width: 767px) {
      .container {
        width: 420px;
      }
    }
    @media only screen and (max-width: 480px) {
      .container {
        width: 300px;
      }
    }



/* --------------------------------------



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








.button {
  	background-color: #bfe2f9;
  	border:double;
	border-radius: 12px;
  	color: black;
  	padding: 0px 0px;
	width: 100px;
	height: 25px;
	padding-top: 5px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 20px;
	font-weight: bold;
	text-shadow: 0 0 1px #FF0000;
  	margin: auto;
  	cursor: pointer;
} 


  
.img-frame {
	background: transparent;
	padding: 15px;
	border: 1px solid #FFFF00;
}
 
 

 
 */