/*open font licences from Google now as link in header in HTML page*/
/*@import url("https://fonts.googleapis.com/css?family=Varela+Round");*/
/*@import url("https://fonts.googleapis.com/css?family=Oxygen");*/

/* Normal */
@font-face {
    font-family: 'weathericons';
    src: url('https://www.wxkjbc.com/fonts/weathericons-regular-webfont.eot');
    src: url('https://www.wxkjbc.com/fonts/weathericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.wxkjbc.com/fonts/weathericons-regular-webfont.woff') format('woff'),
         url('https://www.wxkjbc.com/fonts/weathericons-regular-webfont.woff2') format('woff2'),
         url('https://www.wxkjbc.com/fonts/weathericons-regular-webfont.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?j0nelf');
  src:  url('fonts/icomoon.eot?j0nelf#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?j0nelf') format('truetype'),
    url('fonts/icomoon.woff?j0nelf') format('woff'),
    url('fonts/icomoon.svg?j0nelf#icomoon') format('svg');
  font-weight: bold;
  font-style: normal;
  /*font-display: block;*/
}

[class^="icon-Webicons"], [class*=" icon-Webicons-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' /*!important*/;
  /*speak: never;*/
  font-style: normal;
  font-weight: bold;
  font-variant: normal;
  text-transform: none;
  line-height: 1.5;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-Webicons-01:before { /*snowflake*/
  content: "\e900";
}
.icon-Webicons-02:before { /*spring plant*/
  content: "\e901";
}
.icon-Webicons-03:before { /*cross*/
  content: "\e902";
}
.icon-Webicons-04:before { /*candleabra*/
  content: "\e903";
}
.icon-Webicons-05:before { /*sun*/
  content: "\e904";
}
.icon-Webicons-06:before { /*apple*/
  content: "\e905";
}
.icon-Webicons-07:before { /*star of david*/
  content: "\e906";
}
.icon-Webicons-08:before { /*clock*/
  content: "\e907";
}


h1 {
 color:black; 
 background-color:transparent; 
 font-size:2em;
}

h2 {
 color:black; 
 background-color:transparent; 
 font-size:1.2em;
}

h3 {
  color: black;
  background-color: transparent;
  font-size: 1.1em;
}

h4 {
 color: black; 
 background-color: transparent; 
 font-size: 1em;
}

body {
  max-width:1100px;
  color:black; 
  font-family: 'Oxygen', sans-serif;
  /*font-family:Oxygen,Verdana,"Noto Sans","Arial Narrow",Helvetica,sans-serif;*/
} 


/*about statement*/
.about {
  color: black;
  font-size: 1em;
  padding:5px;
  max-width: 1000px;
  border-style: solid;
  border-radius: 8px;
  border-width: 2px;
  box-shadow: 3px 3px #999;
}

/*header*/
#header {
 color: black; 
 background-color: #FFFF66;
 border-radius:8px;
 box-shadow: 3px 3px #999;
 max-width:1100px;
}

.headerTitle {
 margin: 0;
 padding: 0.25em 4mm 0.25em 4mm;
 max-width:1100px;
}

.headerTitle a {
  color: black;
  background-color: transparent;
  text-decoration: none;
  font-size: 1.1em;
  font-weight: bold;
}

.headerTitle span {
  color: black;
  background-color: transparent;
  font-weight: normal;
}

.picfl img {
    float:left;
    margin-right: 10px;
    margin-bottom: 5px;
    padding-right: 0;
    position: relative;
    border: 1px solid #222;
    border-radius: 15%;
    box-shadow: 3px 3px #222;
}

.heading {
  color: black;
  font-size: 0.8em;
  padding: 5px 5px 5px 5px;
  font-weight: bold;
  display: inline;
  text-align: center;
}

.date {
  color: black;
  font-weight: normal;
  padding: 5px;
  background-color: #f2f2f2;
  max-width: 250px;
  border-style: solid;
  border-radius: 8px;
  border-width: 2px;
  box-shadow: 3px 3px #999;
}

/*end header*/

section { 
    display: block;
}

/*current conditions graphic*/
div.current img {
  width:auto;
  height:auto;
  /*object-fit:contain;*/
  border-radius:8px;
  box-shadow:3px 3px #777;
} 

/*past conditions graphs*/

/*weather story graphic*/
div.wxstory img {
  width:auto;
  height:auto;
  border-radius:8px;
  box-shadow:3px 3px #999;
} 

/*storm predator graphic*/
div.spred img {
  width:auto;
  height:auto;
  border-radius:8px;
  box-shadow:3px 3px #999;
} 

/*regional composite graphic*/
div.compradar img {
  width:auto;
  height:auto;
  border-radius:10%;
  box-shadow:3px 3px #999;
} 

/*CONUS composite graphic*/
div.conusradar img {
  width:800px;
  height:auto;
  border-radius:8px;
  box-shadow:3px 3px #999;
} 

/*NOHRSC precip images*/

div.nohrscprecip {
  position:relative;
  border: 1px solid transparent;
}

div.nohrscprecip img {
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 3px 3px #999;
}

/*Precipitation and Snow Data and Past Conditions text Boxes*/
.text-box {
  position:absolute;
  top: 15px;
  left: 5px;
  width: 55px;
  height:25px;
  -webkit-transform: rotate(-45deg); /* Safari */
  transform: rotate(-45deg);
  border-radius: 10px;
  overflow: visible;
}

.text-box p {
  position:absolute;
  top: -20px;
  left: 10px;
  font-weight: bold;
  text-align: center;
  font-size: 1.2em;
  background-color: #f1f1f1;
  color: black;
}

.text-boxpc {
  position:absolute;
  top: 15px;
  left: 5px;
  width: 100px;
  height:25px;
  border-radius: 10px;
  overflow: visible;
}

.text-boxpc p {
  position:absolute;
  top: -20px;
  left: 10px;
  font-weight: bold;
  text-align: center;
  font-size: 1.2em;
  color: black;
}

.text-boxwind {
  position:absolute;
  top: 15px;
  right: 5px;
  width: 150px;
  height:25px;
  border-radius: 10px;
  overflow: visible;
}

.text-boxwind p {
  position:absolute;
  top: -20px;
  right: 10px;
  font-weight: bold;
  text-align: center;
  font-size: 1.2em;
  color: black;
}


@media screen and (max-width:1100px) {
  div.text-box p, div.text-boxpc p, div.text-boxwind p {
  font-size:0.8em;
  }
}

/*End Past Conditions and wind and precip Text Boxes*/

div.sunmoon img {
  width:421px;
  height:auto;
  box-shadow:3px 3px #999;
}


@media screen and (max-width:1100px) {
  div.current img, div.nohrscprecip img, div.wxstory img, div.spred img, div.compradar img, div.conusradar img, div.sunmoon img {
  width:100%;
  height:auto;
  border-radius:1%;
  }
}

@media screen and (min-width:1101px) {
  div.current img, div.nohrscprecip img, div.wxstory img, div.spred img, div.compradar img, div.conusradar img, div.sunmoon img {
  max-width:800px;
  border-radius:10px;
  }
}


span {
   display: block;
}

.moonicon img {
    width: auto;
    height: 36px;
    border-radius: 50%;
    float: left;
    padding: 0 3px;
    margin: 0 8px 0 0;
}  

.sbnlogo img {
  width:auto;
  height:35px; 
  padding: 0 3px;
  margin: 0 8px 0 0;
  background-color:#555;
  border: 1px solid #999;
  border-radius: 10px;
  float:left;
}  

.fullMoonImage img {
    width:30px;
    height:30px;
    border: 1px solid #999;
    float: left;
}
 
li {
   display:inline;
}

/*for flexible columns and text on images*/
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create 3 equal columns that sit next to each other for past conditions */
.columnpast {
  position:relative;
  flex: 30%;
  max-width: 30%;
  padding: 0 4px;
}

.columnpast img {
  margin-top: 8px;
  vertical-align: middle;
  width:100%;
  border-radius:8px;
  box-shadow: 3px 3px #999;
}

/* Responsive layout - makes a two column-layout instead of 3 columns */
@media (max-width: 1100px) {
  .columnpast {
    flex: 40%;
    max-width: 40%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 800px) {
  .columnpast {
    flex: 100%;
    max-width: 100%;
  }
}

/*end flexbox for past conditions*/

/*for collapsible sections*/

.collapsible {
    background-color: #777;
    text-align: left;
    vertical-align:middle;
    margin:auto;
    outline: none;
    font-family:Verdana,sans-serif;
    font-size: 20px;
    color: white;
    cursor: pointer;
    padding: 16px;
    width: 100%;
    border-style: solid;
    border-color:white;
    border-radius:25px;
    box-shadow: 0 8px #999;
}

.collapsible:hover {
    background-color: #555;
    font-size: 24px;
}

.collapsible span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.collapsible:after {
  content: '\00bb';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  vertical-align:middle;
}

.active:after {
  content: "\00ab";
}

.collapsible:hover span {
  padding-right: 25px;
}

.collapsible:hover span:after {
  opacity: 1;
  right: 0;
}


@media screen and (max-width:1100px) {
  .collapsible {
   font-size: 20px;
  }
}

@media screen and (min-width:1100px) {
  .collapsible {
   font-size: 24px;
   max-width:1100px;
  }
}

.content {
    position:relative;
    padding: 8px 9px;
    margin: 8px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
    border-radius: 10px;
}
/*logo link images for reporting to other weather sites*/
.logo img {
    width:10%;
    height:auto;
    background-color: #f2f2f2;
    padding: 18px 18px;
    border-style: solid;
    border-width: 2px;
    border-color: #777;
    border-radius: 15px;
    box-shadow: 0 9px #999;
    margin: 5px;
}

.logo img:hover {
   background-color: #b3b3b3;
   box-shadow: 0 5px #555;
   transform: translateY(-4px);
}

.logo img:active {
   background-color: #b3b3b3;
   box-shadow: 0 5px #555;
   transform: translateY(4px);
}

@media screen and (max-width:1100px) {
  .logo img {
    width:15%;
    height:auto;
    background-color: #f2f2f2;
    padding: 9px 9px;
    border-style:solid;
    border-width:2px;
    border-color: #777;
    border-radius: 15px;
    box-shadow: 0 9px #999;
   }
}

@media screen and (max-width:1100px) {
  .onactive img {
    width: 100%;
    height: auto;
    padding: 9px 9px;
  }
}

/* end for collapsible sections*/

/*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 in order to be effective! Pseudo-class names are not case-sensitive.*/

a:link {
  color:blue;
} /* unvisited link */

a:visited {
  color:purple;
} /* visited link */

a:hover {
  color:green;
} /* mouse over link */

a:active {
  color:red;
} /* selected link */

/*Saratoga Alert Settings */

.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}


.advisoryBoxnoactive {
  color: black;
  font-size: 12px;
  text-align: left;
  background-color: #FFFF66;
  margin: 0 0 0 0;
  padding: 0.5em 0 0.5em 0;
  border: 0 dashed rgb(34,70,79);
}

.advisoryBox {
  max-width: 100%;
  color: black;
  font-size: 0.8em;
  text-align: center;
  background-color: #FFFF66;
  margin: 0 0 0 0;
  padding: .5em 0 .5em 0;
  border: 0 dashed black;
  border-radius: 10px;
}

/*dot like a target (F192) or checkmark (f00c)*/
.advisoryBox::before { 
  display: inline;
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f192";
  position: relative;
  right: 1.5px;
  font-size: 24px;
  color: #ff3333;
  text-shadow: 1px 1px black;
  padding: 0 2px 0 0;
}

.advisoryBoxWinter {
  max-width: 100%;
  color: black;
  font-size: 0.8em;
  text-align: center;
  background-color: #FFFF66;
  margin: 0 0 0 0;
  padding: .5em 0 .5em 0;
  border: 0 dashed black;
  border-radius: 10px;
}

/*snowflake*/
.advisoryBoxWinter::before {  
  display: inline;
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f2dc";
  position: relative;
  right: 1.5px;
  font-size: 24px;
  color: #3333ff;
  text-shadow: 1px 1px white;
  padding: 0 2px 0 0;
}

.advisoryBoxCold {
  max-width: 100%;
  color: black;
  font-size: 0.8em;
  text-align: center;
  background-color: #FFFF66;
  margin: 0 0 0 0;
  padding: .5em 0 .5em 0;
  border: 0 dashed black;
  border-radius: 10px;
}

/*thermometer*/
.advisoryBoxCold::before {
  display: inline;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f76b";
  position: relative;
  right: 1.5px;
  font-size: 24px;
  color: #3333ff;
  text-shadow: 2px 2px white;
  padding: 0 2px 0 0;
}
 

.watchBox {
  color: black;
  font-size: 0.8em;
  max-width: 100%;
  text-align: center;
  background-color: #FFFF66;
  margin: 0 0 0 0;
  padding: .5em 0em .5em 0em;
  border: 0px dashed rgb(34,70,79);
}
 /*asterisk*/
.watchBox::before {
  display: inline;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f069";
  position: relative;
  right: 1.5px;
  font-size: 24px;
  color: #ff3333;
  text-shadow: 1px 1px black;
  padding: 0 2px 0 0;
}

.warningBox {
  color: black;
  font-size: 0.8em;
  text-align: center;
  background-color: #ffe6e6;
  border-radius: 10px;
  box-shadow: 0 3px 3px 0 #ff8080;
  max-width: 100%;
  margin: 0 0 0 0;
  padding: .5em 0 .5em 0;
  border: 0 dashed rgb(255,255,255);
}

/*exclamation point*/
.warningBox::before {
  display: inline;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f071";
  position: relative;
  right: 1.5px;
  font-size: 24px;
  color: #ff3333;
  text-shadow: 1px 1px black;
  padding: 0 2px 0 0;
}

.warningBox a {
  color: white;
}
.tornadowarningBox {
  color: white;
  font-size: 12px;
  text-align: center;
  background-color: red;
  margin: 0 0 0 0;
  padding: .5em 0 .5em 0;
  border: 1px dashed rgb(255,255,255);
}
.tornadowarningBox a {
  color: white;
}

.alertButton {
 display: inline;
 position: relative;
 background-image: radial-gradient(#ffffff, #bfbfbf, #666666); /* Standard syntax (must be last) */
 border-radius: 20%;
 border: none;
 box-shadow: 0 0 1px 1px #bfbfbf;
}

/*advisory page styles*/
/*detail text box*/


.detailBox {
  max-width: 100%;
  color: black;
  font-size: 0.9em;
  text-transform: lowercase;
  text-align: center;
  background-color: #FFFF66;
  margin: 0 0 0 0;
  padding: .5em 0 .5em 0;
  border-radius: 10px;
}
  
.linkBox {
  max-width: 100%;
  color: black;
  font-size: 10px;
  text-align: center;
  background-color: #FFFF66;
  margin: 0 0 0 0;
  padding: .5em 0 .5em 0;
  border: 0 solid black; 
  border-radius: 10px;
  box-shadow: 0 3px #999; 
}