/**********************************
 * TITLE: Cactus Wren Stylesheet  *
 * URI  : cactus-wren.css         *
 * MODIF: 2026-May-7 19:09 +0800  *
 **********************************/
.faustina {
    font-family: "Faustina", serif;
    font-optical-sizing: auto;
    font-weight: inherit;
    font-style: normal;
}
body {
  color: black;
  background-color: white;
  font-family: 'Faustina', serif;
  font-size: 73%;  /* Enables font size scaling in MSIE */
  margin: 0;
  padding: 0;
}

html > body {
  font-size: .9rem;
}

/* sets color and boarders, CSS trick to force color to display. <hr/> */
hr::after {
  content: "";
  display: block;
  clear: both;
}
hr        {
    width: 95%;
    max-width: 95%;
    overflow:hidden;
    height: 0px;
    border: 0px;
    border-top: 2px solid red;
    align-self: center;
    opacity: 0.9;
    padding: 4px;
    margin-top: 5px;
    margin-bottom: 5px;

}

/* This section sets color of URL'S and whether they are underlined or not, need to be in this order */
a:link         {
	color: #C80000;
	text-decoration: underline;
	font-size: inherit;
}
a:visited         {
	color: #0032FF;
	text-decoration: none;
	font-size: inherit;
}
a:hover         {
	color: green;
	text-decoration: underline;
	font-size: inherit;
}
a:focus         {
   color: green;
	text-decoration: underline;
	font-size: inherit;
}
a:active         {
	color: black;
	text-decoration: none;
	font-size: inherit;
}

  h1,h2,h3,h4,h5,h6  {
    color: Blue;
    font-weight: 900;
    margin-top: 0mm;
    margin-bottom: 3mm;
    line-height: 115%;
}


/* -------------------------
   DARK MODE (FIXED)
-------------------------- */
@media (prefers-color-scheme: dark) {

    body {
        background-color: #2A2A2A !important;
        color: #D6D6D6 !important;
           }
#header,
.subHeader,
p,
li,
td,
th,
div {
    color: #CFCFCF !important;
   }

    h1,h2,h3,h4,h5,h6 {
        color: #B8D9FF !important;
    }

    a:link { color: #FF4747; }
    a:visited { color: #008fff; }
    a:hover,
    a:focus { color: #2AFF14; }
    a:active { color: #6aa5ff; }

    .dataText,
    .datastrong,
    .dataTextc,
    .dataTextM {
        color: #D6D6D6 !important;
    }

    table, th, td {
        border-color: #A3CDFF !important;
    }
/* MAIN PAGE AREAS */
#page,
#header,
#main-copy,
.column-dark,
.column-light,
.leftSideBar,
.ajaxSidebar,
.ajaxDashboard,
.subHeader,
.subHeaderRight,
#footer {
    background-color: #2A2A2A !important;
    color: #D6D6D6 !important;
}

/* TABLES */
table,
td,
th {
    background-color: #2A2A2A !important;
    color: #D6D6D6 !important;
}

/* TABLE HEADER BARS */
.table-top,
.ajaxDashboard .datahead,
.ajaxDashboard .datahead2 {
    background-color: #3B5F85 !important;
    color: white !important;
}

/* DATA CELLS */
.ajaxDashboard .data1,
.ajaxDashboard .data2,
.ajaxSidebar .data,
.ajaxSidebar .meas {
    background-color: #2A2A2A !important;
    color: #D6D6D6 !important;
}

/* SIDEBAR TITLES */
.sideBarTitle {
    background-color: #2A2A2A !important;
    color: #A3CDFF !important;
}

/* LINKS INSIDE MAIN CONTENT */
#main-copy a {
    color: #66B2FF !important;
}

/* BORDERS */
#header,
.subHeader,
table,
td,
th {
    border-color: #5A5A5A !important;
}
}

/* end dark mode  */

/* ##### CONTAINER FOR PAGE##### */
#page {
        color: black;
        background-color: white;
        width: 90%;
        max-width: 1200px;
        /* margin: 0 auto;      centers everything */
        /* border: 5px solid #95959600; /* your test color, transparent here */
        margin-left: auto;
        margin-right: auto;
        display: block;
}


.doNotDisplay {
  display: none !important;
}

.picfl {
           float:left;
           padding-right: 5px;
           position: relative;
}

.picfr {
           float:right;
           padding-left: 5px;
           position: relative;
}

.picfc {
           text-align: center;
           padding-left: 5px;
           padding-right: 5px;
           position: relative;
}




/* ##### CHANGE background-color to change header color, hex code is OK ##### */
/* ##### Hex Color Chart - http://www.w3schools.com/Html/html_colors.asp  ##### */
/* ##### Header ##### */
#header {
  color: blue;
  background-color: white;
  border: #96C6F5  solid 1px;
  box-sizing: border-box;
  margin: 0px;
 }


.headerTitle {
 text-align: center;
  font-size: 3rem;
  color: blue
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.headerTitle a {
  color: blue;
  background-color: transparent;
  text-decoration: none;
  font-size: 110%;  /* For MSIE */
  font-weight: bold;
  font-style: italic;
}

.headerTitle > a {
  font-size: 110%;  /* For fully standards-compliant user agents */
}

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

.headerTemp {
  font-size: 2rem;
  font-weight: bold;
  float: right;
  right: .5ex;
  margin-right: 5px;
  margin-left: 15px;
  color: black;
  margin-top: 15px;
}

[class~="headerTemp"] {
  top: 0.18em;  /* For fully standards-compliant user agents */
}

.subHeader {
  color: black;
  float: left; 
  clear: left;
  /* border: #96C6F5  dashed 1px; */
  position: relative;
  background-color: #E6E6E6;
  font-size: 1rem;
  margin-bottom: 0px;
  margin-top: 0px;
}

.subHeaderRight {
  color: black;
  background-color: #E6E6E6;
  font-size: 1rem;
  font-weight: bolder;
  text-align: right;
  margin:  0;
  padding: 0.5ex 2ex;
}

.subHeader a {
  color: blue;
  text-decoration: underline;
  font-weight: bold;
}

.thisPage {
  background: none !important;
}


.doNotPrint {
    width: 100% ;
}

/* ##### Structer Table ##### */
.wxindexT,
.wxindexTtable {
        border-collapse: collapse !important;
        table-layout: auto !important;
        border-spacing: 0 !important;
        text-align: center;
        margin: 0 auto !important;
        vertical-align: top;
}
.wxindexT td,
.wxindexT th {
        border: solid Blue; 
        padding: 0 !important;
        margin: 0 !important;
        vertical-align: top !important;
}
#content-row table.wxindexT {
        margin: 0 auto !important;
}
#content-row td {
        padding: 0 !important;
        border: 0 !important;
        vertical-align: top !important;
}
 td    {
        border-collapse: collapse;
        table-layout: auto;
        border-spacing: 0;
        align-self: center;
        align-content: center;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        vertical-align: top;
        padding: 0px;
        margin: 0px;
}


/* ##### CONTENT-ROW ##### */
#content-row  {
/*  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important; */
        color: black;
        background-color: white;
        width: 90%;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        align-items: center;
}

/* ##### Left Side MNENU Bar ##### */
.leftSideBar {
 /* flex: 0 0 130px !important; */
  width: 115px !important;
  min-width: 130px !important;
  /* display: block !important; */
  text-align: left;
  margin-top: 0px;
  margin-bottom: 10px;
  margin-left: 0px !important;
  vertical-align: top;
  /* background-color: yellow; */
}

 .sideBarTitle {
  color: Blue;
  background-color: #D4D8BD;
  font-weight: bold;
  margin: 0;
  text-align: left;
  font-size: 1rem;
  vertical-align: top;
  width: 115px;
  box-sizing: border-box;
  border: groove #CDDBCD;
}

.leftSideBar ul {
  list-style-type: none;
  list-style-position: outside;
  margin: 0;
  padding: 0;
}

.leftSideBar li {
   margin: 0;
  padding: 0;
}

.leftSideBar a {
color: #C80000;
background-color: transparent;
     display: block;
      text-align: left;
    width: 115px !important;
    margin-left: 0px !important;
    box-sizing: border-box;
text-decoration: none;
}

.leftSideBar a:visited {
  color: #0032FF;
  background-color: transparent;
  text-decoration: none;
}

.leftSideBar a:hover {
background-color: transparent;
color: green;
}

.leftSideBar .sideBarText {
  color: black;
  background-color: transparent;
  line-height: 1.25em;
  margin: 1ex 0.25ex 1.5em 0.75ex;
  padding: 0;
}

.leftSideBar .sideBarText a {
  text-decoration: underline;
  font-weight: bold;
}

.leftSideBar .sideBarText a:visited {
  text-decoration: underline;
  font-weight: bold;
}

.leftSideBar .sideBarText a:hover {
  text-decoration: none;
}

.leftSideBar .thisPage {
  color: black;
  background-color: transparent;
  font-weight: bold;
}
/* sidebar container */
.flyoutmenu {
    width: 120px;   /* same width as header */
}

/* all menu buttons */
.flyoutmenu a,
.flyoutmenu div,
.flyoutmenu li {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;   /* or left if preferred */
    margin: 0;
    box-sizing: border-box;
}

/* ##### Main COPY Content column ##### */
#main-copy {
/*  display: block !important; */
  width: auto;
  max-width: 100%;
  align-self: center;
  align-items: center;
  color: black;
  background-color: white;
  overflow: visible;
  margin: 0px;
  box-sizing: border-box;
  vertical-align: top;
  /* background-color: orange;*/
}

 #main-copy-dark {
  grid-column: 2;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  color: white;
  background-color: black;
  text-align: justify;
  line-height: 1.5em;
  margin: .1em 0 0 9.5em;
  border-left: 1px solid rgb(216,210,195);
}

#main-copy h1 {
  color: black;
  background-color: transparent;
   font-family: 'Faustina', serif;
  font-size: 2rem;
  font-weight: bold;
  margin: 1em 0 0 0;
  border-top: 1px solid rgb(216,210,195);
}

#main-copy a {
  color: #336699;
  background-color: transparent;
  text-decoration: underline;
}
#main-copy a:hover {
  text-decoration: none;
}

#main-copy table {
  max-width: 100% !important;
  width: auto !important;
  box-sizing: border-box;
}

#main-copy table td,
#main-copy table th {
  max-width: 100% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

#main-copy .ajaxDashboard {
  max-width: 100% !important;
  width: auto !important;
  box-sizing: border-box;
  overflow-x: hidden !important;
}

#main-copy div {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}

.table-top {
  color: black;
  background-color: #96C6F5;
  text-align: left;
  font-weight: bold;
  margin-top: 30px;
  width: 100% ;
}

.column-dark {
  min-width: 0 !important;   /* 🔥 let grid control sizing */
  width: 100%;
  width: fit-content;
  align-self: center;
  align-items: center;
  display: block;
  /* background: yellow;  /* or your color if you want */
  box-sizing: border-box;
  overflow-x: hidden;
  align-items: center;
}

.column-light {
  min-width: 0 !important;   /* 🔥 let grid control sizing */
  width: 100%;
  display: block;
  background: transparent;  /* or your color if you want */
  }

p {
  margin: 1em 0 1.5em 0;
  padding: 0;
}

dt {
  font-weight: bold;
  margin: 0;
  padding: 0 0 0.5ex 0;
}

dd {
  margin: 0 0 1.5em 1.5em;
  padding: 0;
}

/****** ALERT SECTION ******/
 /* ALERT BAR (FULL WIDTH UNDER HEADER) */
.alert-bar-wrapper {
  width: 100%;          /* full width of #page, NOT screen */
  margin: 0 auto;       /* center it */
  clear: both;
}

.alert-box {
  /* display: block; */
  font-size:.8rem;
  width: 100%;
  height: auto;
  text-align: justify-all;
  margin: 0 auto;
  padding: 0px !important;
  background-color: #f0f0f0;
  box-sizing: border-box;
  border: 2px outset #f1f1f111; 
}


.alert-box {
  --alert-color: #f0f0f0;
  background-color: var(--alert-color);
  border: 4px outset var(--alert-color);
}
```
.watchBox {
  color: black;
  font-size: .9rem;
  text-align: center;
  background-color: #FF9900;
  margin: 0 0 0 0;
  border: 1px dashed rgb(34,70,79);
}
#main-copy .watchBox a {
  color: blue;
}
#main-copy .watchBox a:hover {
  color: blue;
  background-color: inherit;
  text-decoration: underline;
}

.advisoryBoxnoactive {
  color: black;
  font-size: .9rem;
  text-align: center;
  background-color: white;
  margin: 0 0 0 0;
  border: 1px dashed rgb(34,70,79);
}

.advisoryBox {
  color: black;
  font-size: .9rem;
  text-align: center;
  background-color: #FFCC00;
  margin: 0 0 0 0;
   border: 1px dashed rgb(34,70,79);
}
#main-copy .advisoryBox a {
  color: blue;
}
#main-copy .advisoryBox a:hover {
  color: blue;
  background-color: inherit;
 text-decoration: underline;
}

.warningBox {
  color: white;
  font-size: .9rem;
  text-align: center;
  background-color: #CC0000;
  margin: 0 0 0 0;
   border: 1px dashed rgb(255,255,255);
}
#main-copy .warningBox a {
  color: white;
}
#main-copy .warningBox a:hover {
  color: white;
  background-color: inherit;
  text-decoration: underline;
}

.tornadowarningBox {
  color: white;
  font-size: .9rem;
  text-align: center;
  background-color: #CC0000;
  margin: 0 0 0 0;
  border: 1px dashed rgb(255,255,255);
}
#main-copy .tornadowarningBox a {
  color: white;
}
#main-copy .tornadowarningBox a:hover {
  color: white;
  background-color: inherit;
  text-decoration: underline;
}

/* ##### ajaxSidebar ##### */
.ajaxSidebar {
    background-color: white;
        border: none;
        width: 114px;
}
.ajaxSidebar h2 {
        font-size: 1.6rem;
        color: white;
        background-color: #5B9AD2;
        text-align: center;
        margin-right: 6px;
}

.ajaxSidebar .meas {
        font-family: 'Faustina', serif;
        color: black;
        text-align : right;
        background-color: white;
        width: 35%;
        }
.ajaxSidebar .data {
         font-family: 'Faustina', serif;
        color: #3173B1;
        text-align : left;
        background-color: white;
        }
.ajaxSidebar td {
         border: none;
         background-color: white;
}
.ajaxDashboard {
    font-size: 96%;
    font-family: 'Faustina', serif;
    min-width: 0 !important;   /* 🔥 let grid control sizing */
    width: 100%;
}
.ajaxDashboard .datahead {
        font-size: 100%;
        font-weight: bold;
        color:  white;
        background-color: #3173B1;
        text-align: center;
}
.ajaxDashboard .datahead2 {
        font-size: 100%;
        font-weight: bold;
	    	border-bottom: 1px solid #CCCCCC;
        color:  white;
        background-color: #3173B1;
        text-align: center;
}
.ajaxDashboard .data1 {
         color: black;
         font-size: 100%;
         border-bottom: 1px solid #CCCCCC;
         background-color: white;
         text-align: left;
}
.ajaxDashboard .data2 {
         color: black;
         font-size: 100%;
         background-color: white;
         text-align: left;
}
.ajaxDashboard td {
         border: none;
         background-color: white;
}


/* ##### Footer ##### */

#footer {
  width: 60%;
  color: black;
  background-color: white;
  font-size: .8rem;
  text-align: center;
  line-height: 1.25em;
  margin: auto;
  padding: 1em 4mm 1em 4mm;
  min-width: fit-content;
  text-wrap: wrap;
}

#footer div {
   margin: 0;
  padding: 0 0 1ex 0;
}

#footer a {
  color: black;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}

#footer a:visited {
  color: black;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}

#footer a:hover {
  text-decoration: none;
}

.jsuparrow {
background-color:#CDDBCD;
border:0px none;
color:#22464F;
text-decoration:none;
}

.jsupoutline {
background:#CDDBCD none repeat scroll 0%;
border:0px solid #2266AA;
height:15px;
left:0px;
padding:0px;
position:absolute;
top:0px;
width:24px;
}


/* Added for image alignment issued */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.thread-alt {
  color: black;
  background-color: #F1F8FE;
}

.thread-even {
  color: black;
  background-color: white;
}

/* ##### mjc extra ##### */

#horizontal-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#horizontal-menu ul li {
display: inline;
padding: .2em 1em;
}

.menuLinkSelectedhoriz {
background-color: #3173B1;
color: white;
width: 100px;
padding: .2em;
}

.menuLinkSelected {
display: block;
background-color: #3173B1;
color: white;
width: 90px;
padding: .04em;
}
/* =========================================
   MOBILE / TABLET
========================================= */
@media screen and (max-width: 900px) {

  /* PAGE */
  #page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 6px !important;
    box-sizing: border-box;
  }

  body {
    overflow-x: hidden;
  }

  /* MAIN LAYOUT TABLE */
  table.layoutTable,
  .layoutTable tbody,
  .layoutTable tr,
  .layoutTable td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* MENU COLUMN */
  .leftSideBar {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 15px 0 !important;
    text-align: center;
  }

  .leftSideBar ul {
    padding: 0;
  }

  .leftSideBar li {
    display: inline-block;
    margin: 3px;
  }

  .leftSideBar a,
  .menuLinkSelected,
  .sideBarTitle {
    width: auto !important;
  }

  /* MAIN CONTENT */
  #main-copy {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }

  .column-dark,
  .column-light {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }

  /* TABLES */
  table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  td,
  th {
    word-break: break-word;
  }

  /* IMAGES */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* WEATHER MAPS */
  .map-row,
  .wxindexTtable {
    width: 100% !important;
    overflow-x: auto;
  }

  /* AJAX DASHBOARD */
  .ajaxDashboard {
    width: 100% !important;
    font-size: 90%;
  }

  .ajaxDashboard table {
    width: 100% !important;
  }

  /* HEADER */
  .headerTitle {
    font-size: 2rem !important;
  }

  .headerTemp {
    float: none !important;
    display: block;
    text-align: center;
    margin: 5px 0;
    font-size: 1.5rem !important;
  }

  .subHeader,
  .subHeaderRight {
    float: none !important;
    display: block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  /* ALERT BOXES */
  .alert-box {
    height: auto !important;
    min-height: 35px;
  }

  /* FOOTER */
  #footer {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    box-sizing: border-box;
  }
}