/*****************************************************************************/
/* wrcc.css
/*
/* master stylesheet for WRCC; includes style elements common to all site 
/*   pages, including standardized WRCC headers & footers
/*
/* THIS VERSION IS FOR OLD DESIGN & TEMPORARY FOR MIGRATION PURPOSES ONLY,
/*   ALTHOUGH IT USES THE NEW WIDER PAGE FORMAT
/*
/* Written 12/13/2016, L.Pritchett, Cliffson Solutions, LLC, for WRCC
/* Revised 10/10/2020, L.Pritchett
/*****************************************************************************/

/*===========================================================================*/
/* external fonts
/*===========================================================================*/

@import url('Fonts/genericons/genericons.css');

@font-face
{
  font-family: 'Courgette';
  font-style: normal;
  font-weight: 400;
  src: url(/Styles/Fonts/Courgette/courgette-v4-latin-regular.woff) format('woff');
}


@font-face
{
  font-family: 'OpenSans';
  font-style: normal;
  font-weight: 400;
  src: url(/Styles/Fonts/OpenSans/open-sans-v13-latin-regular.woff) format('woff');
}


@font-face
{
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  src: url(Fonts/Oxygen/oxygen-v5-latin-regular.woff) format('woff');
}


@font-face
{
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url(/Styles/Fonts/Raleway/raleway-v10-latin-regular.woff) format('woff');
}


/*===========================================================================*/
/* global settings
/*===========================================================================*/

html
{
  /* Always show Safari scrollbar */

  margin-bottom: 1px;
  height: auto;
}


body
{
  margin: 0px;
  padding: 0px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.7em;
  text-align: left;
  color: #222222;
  background-color: #f3f3f3;
}


a,
a.plain
{
  color: #0066cc;
color: #223ba9;
  font-weight: bold;
}


a.plain
{
  text-decoration: none;
}


a:hover
{
  color: #0099ff;
}


a:active
{
  color: #0099ff;
}


a:focus
{
  /* Remove link outlines */

  outline: none;
}


a img
{
  /* IE needs to be told specifically not to put borders on linked images */

  border: none;
}


h1,h2,h3,h4,h5,h6
{
  text-align: center;
}


h1.left,h2.left,h3.left,h4.left
{
  text-align: left;
}


/*===========================================================================*/
/* overall page contents
/*===========================================================================*/

.box_page,
.box_page_content
{
  /* the portion of the page with content (as opposed to the entire browser  */
  /*   page): box_page_content contains header, content, and footer elements;*/
  /*   box_page contains both box_page_content as well as pseudo-pop-up      */
  /*   windows; even though the two boxes overlap exactly, they are distinct */
  /*   so lightbox effects with the pop-up windows work properly             */

  margin: 0px auto;
  padding: 0px;
  position: relative;
  width: 950px;
width: 1100px;
  text-align: left;
}


.box_page_content
{
  /* do not apply this to box_page, or sub-win divs may be cut off */

  overflow: hidden;
}


h1.site_title
{
  /* include header for search engines, but display outside page area */

  position: absolute;
  top: -9999px;
}


/*===========================================================================*/
/* header, including banner & logo
/*===========================================================================*/

.box_header
{
  /* header container, includes banner graphic and banner title */

  margin: 0px;
  padding: 0px;
  position: relative;
  overflow: hidden;
  font-family: Oxygen;
  clear: both;

  box-shadow: 0px 2px 2px #222222;

z-index: 50;
}


.box_header h1
{
  font-family: Cardo;
  font-size: 28px;
}


.box_header h3
{
  font-size: 13px;
}


.box_header .box_banner
{
  /* currently the banner is defined as extending the entire width of */
  /*   the header & could be considered to be redundant with it;      */
  /*   however, at some time in the future it may be a smaller image, */
  /*   so we'll leave it defined separately                           */

  margin: 0px;
  padding: 0px;
  position: relative;
  width: 950px;
width: 1100px;
  height: 166px;
  text-align: center;

  color: #ffffff;

  /* this is default banner; actual banner displayed will be randomly */
  /*   selected by PHP and overridden in JS on-load block             */

/* comment this out to avoid nasty flicker of tmp img
  background-image: url("/Graphics/Banners/head_logo1_1100x166.jpg");
*/

z-index: 1;
}


.box_header .box_banner:hover
{
  cursor: pointer;
}


.box_header .box_banner .box_title
{
  position: relative; 
  right: 93px;
  top: 105px; 
  color: white; 
  font-family: Arial,open-sans;
  text-align: right;
  font-style: italic; 
  font-size: 14px; 
  text-transform: uppercase;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* testbed indicator
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.box_header .box_testbed
{
  padding-top: 10px;
  position: absolute;
  top: 115px;
  left: 290px;
  width: 150px;
  height: 22px;
  color: #cc0000;
  background-color: #ffff00;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 16px;
  border: 1px solid #cc0000;
z-index: 500;
}


/*===========================================================================*/
/* actual page contents, between header and footer
/*===========================================================================*/

.box_content_wrapper
{
  margin: 0px auto 0px auto;
  padding: 0px;
padding: 0px 40px 40px 40px;
  position: relative;
  overflow: hidden;

  /* placeholder value; this will be dynamically changed by JS on */
  /*   page load to at least fill the browser window area         */

  min-height: 500px;

  color: #333333;
/*
  background: #d7dfe8 linear-gradient(to bottom, #7a91ad, #d7dfe8 40%);
*/

background: #d7dfe8 url(/Graphics/bg_gradient.gif) top left repeat-x;

  font-size: 12px;
  line-height: 1.7em;

z-index: 1;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* menu bar is part of contents, not header
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.box_content_wrapper .box_menubar
{
  margin: 18px auto 0px auto;
  width: 870px;
width: 1028px;
  background-color: #eeeeee;
  text-align: center;

  border-color: #eeeeee #cccccc #cccccc #eeeeee;
  border-style: solid;
  border-width: 2px;

  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}


.box_content_wrapper .box_menubar .box_menu_opt
{
  /* primary menu layer */

  margin: 0px;
  padding: 0px;
  display: inline-block;
  cursor: pointer;
}


.box_content_wrapper .box_menubar .box_menu_opt .box_menu_prompt
{
  padding: 0px 9px 0px 9px;
  color: #5d5d5d;
  font-family: arial,sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 2.4em;
  border-right: 1px solid #fafafa;

  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -khtml-border-top-left-radius: 5px;
  -khtml-border-top-right-radius: 5px;
}


.box_content_wrapper .box_menubar .box_menu_opt ul.submenu
{
  margin: 0px;
  padding: 0px;
  width: 260px;
  position: absolute;
  display: none;
  list-style-type: none;
  color: black;
  text-align: left;
  font-size: 12px;
  line-height: 2.4em;
}


.box_content_wrapper .box_menubar .box_menu_opt ul.submenu li
{
  display: block;
  background-color: #f0f0ff;
  border: 1px solid white;
  border-bottom: 0;
}


.box_content_wrapper .box_menubar .box_menu_opt ul.submenu li:hover
{
  background-color: #d7dfe8;
}


.box_content_wrapper .box_menubar .box_menu_opt ul.submenu li a,
.box_content_wrapper .box_menubar .box_menu_opt ul.submenu li span.link
{
  margin-left: 10px;
  color: black;
  text-decoration: none;
  font-weight: normal;
}


.box_content_wrapper .box_menubar .box_menu_opt ul.submenu li a:hover,
.box_content_wrapper .box_menubar .box_menu_opt ul.submenu li span.link:hover
{
  color: #990000;
  text-decoration: underline;
}


/* hover behavior */

.box_content_wrapper .box_menubar .box_menu_opt:hover .box_menu_prompt
{
  color: #ffffff;
  background-color: #444455;
}


.box_content_wrapper .box_menubar .box_menu_opt:hover ul.submenu
{
  display: block;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* end menu bar
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.box_content_wrapper .box_content
{
  margin: 18px auto 10px auto;
  padding: 9px 12px 9px 12px;
padding: 30px 12px 30px 12px;
  width: 850px;
width: 1006px;
overflow: hidden;
  color: #333333;
  background-color: #ffffff;
font-size: 12px;
  border: 1px solid #aaa;
  border-radius: 5px;
  z-index: 1;
}


.box_content_wrapper .box_content h2
{
  color: #333333;
  text-align: left;
  font-family: Arial, sans-serif;
font-weight: normal;
font-size: 25px;
  line-height: 1.2em;
border-bottom: 1px solid #eeeeee;
text-shadow: 0px 1px 2px #cccccc;
}


.box_content_wrapper .box_content h3
{
  color: #333333;
  text-align: left;
  font-family: Arial, sans-serif;
font-weight: normal;
font-size: 18px;
  line-height: 1.2em;
}


.box_content_wrapper .box_content h3.err
{
  color: #cc0000;
}


.box_content_wrapper .box_content span.link
{
  font-size: 12px;
  font-weight: normal;
  color: #0066ff;
color: #223ba9;
font-weight: bold;
  text-decoration: underline;
}


.box_content_wrapper .box_content span.link:hover
{
  color: #0099ff;
  cursor: pointer;
}


.box_content_wrapper .box_content p.instructions
{
  text-align: center;
  font-style: italic;
}


.box_content_wrapper .box_content p.center
{
  text-align: center;
}


.box_content_wrapper .box_content p.byline
{
  padding-left: 100px;
  font-style: italic;
}


.box_content_wrapper .box_content ul.no_bullets
{
  list-style: none;
}


.box_content_wrapper .box_content li
{
  padding-bottom: 10px;
}


.box_content_wrapper .box_content .box_split_wrapper
{
  /* use with .box_12, .box_23, & .box_13 to keep floats confined */

  overflow: hidden;
}


.box_content_wrapper .box_content .box_full
{
  /* full-width equiv of box_12 & box_13 to keep margins & padding consistent */

  margin-left: 30px;
  padding-right: 8px;
width: 950px;
}

.box_content_wrapper .box_content .box_12
{
  /* box 1/2 of width of parent */

  margin-left: 30px;
  padding-right: 8px;
float: left;
  width: 380px;
width: 430px;
}


.box_content_wrapper .box_content .box_23
{
  /* box 2/3 of width of parent */

  margin-left: 30px;
margin-left: 20px;
  padding-right: 8px;
float: left;
  width: 525px;
width: 620px;
}


.box_content_wrapper .box_content .box_13
{
  /* box 1/3 of width of parent */

  padding-top: 20px;
  padding-left: 30px;
float: left;
  width: 240px;
width: 310px;
width: 300px;
}


.box_content_wrapper .box_content .border_vert
{
  margin-right: 10px;
  border-right: 1px solid #dddddd;
}


.box_content_wrapper .box_content .box_img_wrapper
{
  text-align: center;
}


.box_content_wrapper .box_content .box_img_wrapper img
{
  max-width: 1000px;
}


.box_content_wrapper .box_content .box_caption
{
  margin-top: 15px;
  font-size: 12px;
  text-align: center;
  font-style: italic;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* page-specific content: about box on home page
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.box_content_wrapper .box_home_about
{
  overflow: hidden;
}


.box_content_wrapper .box_home_about a
{
  color: #0066cc;
font-weight: normal;
}


.box_content_wrapper .box_home_about a:hover
{
  color: #223ba9;
}


.box_content_wrapper .box_home_about .box_wrcc
{
  padding-left: 35px;
  width: 250px;
width: 260px;
  display: inline-block;
  vertical-align: top;
}


.box_content_wrapper .box_home_about .box_agencies
{
  padding: 20px 0px 0px 75px;
  width: 550px;
  display: inline-block;
  vertical-align: top;
}


.box_content_wrapper .box_home_about .box_agencies .box_logos
{
  margin-bottom: 15px;
  text-align: center;
}


.box_content_wrapper .box_alert
{
  /* special announcements full width on home page under menu bar */ 

  margin: -30px 30px 15px 30px;
  padding: 7px;
  font-size: 16px;
  color: #983331;
  background-color: #f2dede;
  text-align: center;
  font-weight: bold;
  border: 1px solid #ff0000;

  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
}


.box_content_wrapper .box_alert a
{
  text-decoration: none;
}


.box_content_wrapper .box_alert button
{
  padding: 7px;
  font-size: 14px;
  color: #ffffff;
  background-color: #d9534f;
  border: 1px solid #cc0000;

  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
}


.box_content_wrapper .box_alert button:hover
{
  color: #990000;
  background-color: #ea645f;
  cursor: pointer;
}


.box_content_wrapper .box_highlight
{
  /* highlight special events on home page in left sub-pane */ 

  margin: 15px 0px 15px -15px;
  padding: 7px;
  width: 300px;
  font-size: 12px;
  color: #000000;
  background-color: #ffffcc;
  border: 1px solid #333333;

  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
}


.box_content_wrapper .box_highlight h3
{
  margin-top: 10px;
  color: #990000;
}

.box_content .box_main .box_highlight a
{
  font-size: 16px;
}



/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* page-specific content: citations page
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.box_content_wrapper .box_content h3.citation
{
  text-align: left;
  font-size: 18px;
  font-weight: normal;
}


.box_content_wrapper .box_citation_format
{
  padding: 15px 30px 15px 40px;
}



.box_content_wrapper .box_citation_format h4
{
  margin: 0px 0px 15px 0px;
  font-size: 16px;
  font-weight: normal;
  text-align: left;
  line-height: 1.25em;
}


.box_content_wrapper .box_citation_format p
{
  margin-bottom: 25px;
  padding: 10px;
  background-color: #dddddd;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* page-specific content: personnel page
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.box_content_wrapper .box_bio
{
  padding: 10px 7px 10px 7px;
  width: 400px;
width: 465px;
  display: inline-block;
  min-height: 235px;
  vertical-align: top;
}


.box_content_wrapper .box_bio img
{
  margin: 6px 15px 4px 7px;
  float: left;
  height: 222px;
  border: 1px solid #000000;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* page-specific content: glossary page
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.box_content_wrapper .box_content .box_glossary
{
  padding: 20px 50px 50px 50px;
}


.box_content_wrapper .box_content .box_glossary p
{
  margin-bottom: 20px;
  text-indent: -25px;
  line-height: 1.4em;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* page-specific content: various data selection TOC & data presentation pages
/*   note that table width is expected to be defined on a table-by-table basis
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.box_content_wrapper table.toc,
.box_content_wrapper table.data
{
  margin: 0px auto 0px auto;
  background-color: #ffffff;
  line-height: 1em;
  border-collapse: collapse;
}


.box_content_wrapper table.data
{
  margin: 10px 0px 0px 55px;
  border: 1px solid #333333;
}


.box_content_wrapper table.toc tr.dark,
.box_content_wrapper table.toc td.dark,
.box_content_wrapper table.data tr.dark,
.box_content_wrapper table.data td.dark
{
  background-color: #e5ecf9;
}


.box_content_wrapper table.toc tr.highlight,
.box_content_wrapper table.toc td.highlight,
.box_content_wrapper table.data tr.highlight,
.box_content_wrapper table.data td.highlight
{
  background-color: #e5ecf9;
background-color: #f2fffe;
}


.box_content_wrapper table.toc th,
.box_content_wrapper table.toc td,
.box_content_wrapper table.data th,
.box_content_wrapper table.data td
{
  padding: 10px 15px 10px 10px;
  font-size: 12px;
  line-height: 15px;
  vertical-align: top;
}


.box_content_wrapper table.toc th,
.box_content_wrapper table.data th
{
  border-bottom: 1px solid #333333;
  vertical-align: bottom;
}


.box_content_wrapper table.toc th
{
  text-align: center;
}


.box_content_wrapper table.toc td.narrow,
.box_content_wrapper table.data td.narrow
{
  padding: 10px 5px 10px 5px;
}


.box_content_wrapper table.toc td.nowrap,
.box_content_wrapper table.data td.nowrap
{
  /* if <br /> forced, indent subsequent lines */

  padding-left: 18px;
  text-indent: -8px;
  white-space: nowrap;
}


.box_content_wrapper table.toc td.center,
.box_content_wrapper table.data td.center
{
  text-align: center;
}


.box_content_wrapper table.toc td.link:hover,
.box_content_wrapper table.data td.link:hover
{
  cursor: pointer;
}


.box_content_wrapper .genericon-checkmark
{
  font-size: 28px;
  color: #009900;
}


.box_content_wrapper .genericon-close
{
  font-size: 28px;
  color: #990000;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* page-specific content: monthly climate summaries
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.box_content_wrapper .box_clim_summary
{
  padding: 0px 55px 50px 55px;
}


.box_content_wrapper .box_clim_summary h2
{
  margin: 30px 0px -40px -25px;
}


.box_content_wrapper .box_clim_summary h3
{
  margin-top: 55px;
}


.box_content_wrapper .box_clim_summary p.charts
{
  text-align: center;
}


.box_content_wrapper .box_clim_summary p.charts img
{
  width: 400px;
}



.box_content_wrapper .box_clim_summary p.byline
{
  padding-top: 50px;
  padding-left: 0px;
  font-style: italic;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* page-specific content: data projects TOC
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.box_content_wrapper .box_proj_row
{
  margin-bottom: 20px;
  overflow: hidden;
}


.box_content_wrapper .box_proj_row .box_proj_img
{
  margin: 0px 20px 15px 35px;
  width: 50px;
  float: left;
}


.box_content_wrapper .box_proj_row .box_proj_desc
{
  margin: 0px 0px 15px 0px;
  width: 370px;
  float: left;
}


.box_content_wrapper .box_proj_row .box_proj_delim
{
  width: 15px;
  float: left;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* page-specific content: LCD state selection map
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.box_content .box_lcd_opts .box_map_wrapper
{
  margin: 15px 0px 15px 0px;
  width: 400px;
  height: 300px;
  display: inline-block;
  font-size: 12px;
  text-align: center;
}


.box_content .box_lcd_opts .box_map_wrapper .box_map
{
  width: 395px;
  height: 240px;
  background-color: #eeeeff;
  border: 1px solid black;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}


.box_content .box_lcd_opts .box_map_wrapper .box_map .jqvmap-pin 
{
  font-family: sans-serif,Verdana;
  font-size: 8px;
  pointer-events: none;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* page-specific content: rapid response maps
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.box_content_wrapper .box_rr_map_wrapper
{
  margin: 35px 0px 35px 0px;
  text-align: center;
}


.box_content_wrapper .box_rr_map_wrapper img
{
  border: 1px solid black;
}


.box_content_wrapper .box_rr_map_wrapper .box_attribution
{
  padding-top: 5px;
  width: 210px;
  position: absolute;
  right: 150px;
  font-style: italic;
}


.box_content_wrapper .box_rr_logo_wrapper
{
  margin-left: 25px;
  overflow: hidden;
  text-align: center;
}


.box_content_wrapper .box_rr_logo_wrapper .box_rr_org
{
  padding: 0px 7px 0px 7px;
  float: left;
  width: 90px;
  height: 145px;
  font-size: 11px;
}


.box_content_wrapper .box_rr_logo_wrapper .box_rr_org a
{
  font-size: 11px;
  line-height: 1.3em;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* page-specific content: Alaska climatology dashboard
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.box_content_wrapper .box_tabs
{
}


.box_content_wrapper .box_tabs
{
  margin: 20px 0px 0px 80px;
  width: 1006px;
  height: 25px;
  overflow: hidden;
}


.box_content_wrapper .box_tabs:hover
{
  cursor: pointer;
}


.box_content_wrapper .box_tabs .box_tab
{
  padding: 2px 7px 0px 12px;
  float: left;
  width: 170px;
  height: 21px;

  color: #2b4946;
  background-color: #81d8d0;
  text-align: center;
  font-family: RobotoCondensed, Arial, sans-serif;
  font-weight: bold;
  font-size: 13px;

  border: 1px solid black;
  border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
  -khtml-border-top-left-radius: 10px;

  border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -khtml-border-top-right-radius: 10px;

  /* prevent tab text from being selectable, which happens if mouse is */
  /*   accidentally dragged across tab                                 */

  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}


.box_content_wrapper .box_tabs .box_tab:hover
{
  background-color: #93f6ed;
}


.box_content_wrapper .box_tabs .selected
{
  background-color: #ffffff;
  border-bottom: 1px solid #ffffff;
}


.box_content_wrapper .box_tabs .selected:hover
{
  background-color: #ffffff;
  cursor: default;
}


.box_content_wrapper .box_tab_contents_wrapper
{
  margin: -1px -25px 0px -25px;
  padding: 30px 25px 0px 25px; line-height: 1.3em;
  border-top: 1px solid black;
}


.box_content_wrapper .box_tab_contents_wrapper h2
{
  margin-top: 35px;
}


.box_content_wrapper .box_tab_contents
{
  display: none;
}


.box_content_wrapper .box_akdash_map_wrapper
{
  margin: 35px 0px 35px 0px;
  text-align: center;
}


.box_content_wrapper .box_akdash_map 
{
  padding-bottom: 15px;
  width: 155px;
  display: inline-block;
  text-align: center;
  font-size: 14px;
}


.box_content_wrapper .box_akdash_map img
{
  margin-bottom: 5px;
  border: 1px solid black;
border: 1px solid #385c58;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
box-shadow: none;
}


.box_content_wrapper .box_akdash_map img:hover
{
  cursor: pointer;
}


.box_content_wrapper .box_akdash_map span.link
{
  font-size: 12px;
}


.box_content_wrapper .box_firedash_map_wrapper
{
  margin: 35px 0px 35px 0px;
  text-align: center;
}


.box_content_wrapper .box_firedash_map 
{
  padding-bottom: 15px;
  height: 200px;
  display: inline-block;
  text-align: center;
  font-size: 14px;
}


.box_content_wrapper .box_firedash_map img
{
  margin-bottom: 5px;
  height: 200px;
  border: 1px solid #385c58;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  box-shadow: none;
}


.box_content_wrapper .box_firedash_map img:hover
{
  cursor: pointer;
}


.box_content_wrapper .box_firedash_map span.link
{
  font-size: 12px;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* page-specific content: webcams
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.box_content_wrapper .box_13_webcam
{
  /* box 1/3 of width of parent, but with less separation than .box_13 */

  margin: 10px 0px 0px 0px;
  display: inline-block;
  width: 300px;
}


.box_content_wrapper .box_13_webcam img
{
  width: 300px;
  height: 205px;
  overflow: hidden;
}


.box_content_wrapper .box_13_webcam img:hover
{
  cursor: pointer;
}


.box_content_wrapper .box_13_webcam .box_webcam_caption
{
  padding: 15px 0px 25px 0px;
}


.box_content_wrapper .box_webcam_update
{
  margin: 20px 0px 10px 0px;
  padding-right: 55px;
  text-align: right;
  font-style: italic;
}


.box_content_wrapper .box_webcam_update span.timer
{
  font-weight: bold;
}


.box_content_wrapper .box_webcam_update button
{
  margin: 0px;
  padding: 3px 5px 3px 5px;
  color: #2b4946;
  background-color: #81d8d0;
vertical-align: text-bottom;
  font-size: 10px;
  font-weight: bold;
  border: 1px solid #385c58;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  box-shadow: 2px 2px 4px #333333;
}


.box_content_wrapper .box_webcam_update button:hover
{
  background-color: #93f6ed;
  cursor: pointer;
}


/*===========================================================================*/
/* site announcement box
/*===========================================================================*/

.box_announcement
{
  padding: 15px;
  position: absolute;
  left: 250px;
  top: 150px;
  width: 550px;
  background-color: #ffeefb;
  text-align: center;

  border: 2px solid black;
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -khtml-border-radius: 7px;

  z-index: 100;
}


.box_content .box_announcement h2,
.box_content .box_announcement h3
{
  text-align: center;
  font-family: Arial, sans-serif;
}


.box_announcement button
{
  margin: 35px 0px 20px 0px;
  padding: 3px 7px 3px 7px;
  color: #222222;
  background-color: #81d8d0;

  border: 1px solid #385c58;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  box-shadow: 2px 2px 4px #333333;
}


.box_announcement button:hover
{
  background-color: #93f6ed;
  cursor: pointer;
}


/*===========================================================================*/
/* page footer
/*===========================================================================*/

.box_footer
{
  padding: 10px;
  overflow: hidden;

  color: #333333;
  background-color: transparent;
  font-family: Arial,sans-serif;
  font-size: 11px;
  line-height: 1.4em;
}


.box_footer .box_copyright
{
  /* container for copyright statement; intended to be located inside */
  /*   box_footer                                                     */

  margin: 0px;
  padding: 0px;
  float: left;
  width: 350px;
  color: #444444;
}


.box_footer .box_links
{
  margin: 0px;
  padding: 0px 25px 0px 0px;
  float: right;
  width: 550px;
width: 580px;
  text-align: right;
}


.box_footer .box_links a,
.box_footer .box_links span.link
{
  font-size: 12px;
  font-weight: normal;
  color: #0066ff;
}


.box_footer .box_links a:hover,
.box_footer .box_links span.link:hover
{
  color: #0099ff;
  cursor: pointer;
}


.box_footer .box_links .box_totop_wrapper
{
  display: inline-block;
}


.box_footer .box_links .box_totop_wrapper .genericon-top,
.box_footer .box_links .box_totop_wrapper span.to_top
{
  color: #0066cc;
  font-size: 11px;
}


.box_footer .box_links .box_totop_wrapper .genericon-top
{
  font-size: 16px;
}


.box_footer .box_links .box_totop_wrapper:hover .genericon-top,
.box_footer .box_links .box_totop_wrapper:hover .to_top
{
  color: #0099ff;
  cursor: pointer;
}


/*===========================================================================*/
/* pseudo-pop-up subwindow for simple msgs
/*===========================================================================*/

.box_msg
{
  padding: 25px 25px 25px 35px;
  position: absolute;
  left: 265px;
  top: 100px;
  width: 600px;
  display: none;
  background-color: #ffffff;
  font-size: 15px;
  line-height: 20px;

  border-radius: 10px;
  -moz-border: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;

  border: 2px solid #000000;
  box-shadow: 3px 3px 5px #385c58;

  /* make sure takes precedence over all other layers */

  z-index: 1000;
}


.box_msg .box_corner_close
{
  padding: 3px 2px 2px 2px;
  float: right;
  width: 10px;
  text-align: center;
  line-height: 1.0em;
  color: #cc0000;
  background-color: #eeeeee;
background-color: #81d8d0;
  font-weight: bold;
  border: 1px solid black;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}


.box_msg .box_corner_close:hover
{
  color: #990000;
  background-color: #ffffff;
background-color: #93f6ed;
  cursor: pointer;
}


.box_msg p
{
  font-size: 14px;
}


.box_msg li
{
  padding-bottom: 10px;
}


.box_msg .box_buttons
{
  text-align: center;
}


.box_msg .box_buttons button
{
  margin: 0px 0px 10px 10px;
  padding: 3px 5px 3px 5px;
  color: #2b4946;
  background-color: #81d8d0;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #385c58;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  box-shadow: 2px 2px 4px #333333;
}


.box_msg .box_buttons button:hover
{
  background-color: #93f6ed;
  cursor: pointer;
}


/*===========================================================================*/
/* pseudo-pop-up subwindow for displaying maps
/*===========================================================================*/

.box_subwin_map
{
  padding: 25px 25px 25px 35px;
  position: absolute;
  left: 200px;
  top: 100px;
  width: 600px;
  display: none;
  background-color: #ffffff;
  font-size: 15px;

  border-radius: 10px;
  -moz-border: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;

  border: 2px solid #000000;
  box-shadow: 3px 3px 5px #385c58;

  /* make sure takes precedence over all other layers */

  z-index: 1000;
}


.box_subwin_map p.instructions
{
  color: #009900;
  text-align: center;
  font-style: italic;
}


.box_subwin_map .box_corner_close
{
  padding: 3px 2px 2px 2px;
  float: right;
  width: 10px;
  text-align: center;
  line-height: 1.0em;
  color: #cc0000;
  background-color: #eeeeee;
background-color: #81d8d0;
  font-weight: bold;
  font-size: 12px;
  border: 1px solid black;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}


.box_subwin_map .box_corner_close:hover
{
  color: #990000;
  background-color: #ffffff;
background-color: #93f6ed;
  cursor: pointer;
}


.box_subwin_map .box_buttons
{
  text-align: center;
}


.box_subwin_map .box_buttons button
{
  margin: 0px 0px 10px 10px;
  padding: 3px 5px 3px 5px;
  color: #2b4946;
  background-color: #81d8d0;
  font-size: 11px;
  font-weight: bold;
  border: 1px solid #385c58;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  box-shadow: 2px 2px 4px #333333;
}


.box_subwin_map .box_buttons button:hover
{
  background-color: #93f6ed;
  cursor: pointer;
}


.box_subwin_map .box_map
{
  text-align: center;
  padding: 15px 7px 15px 7px;
  border: 2px solid #444444;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  box-shadow: 2px 2px 4px #333333;
}


.box_subwin_map area
{
  /* custom cursor when hovering over map area w/o defining href */

  cursor: pointer;
  display: block;
}


.box_subwin_map span.link
{
  font-size: 16px;
  font-weight: normal;
  color: #0066ff;
color: #223ba9;
  text-decoration: underline;
}


.box_subwin_map span.link_selected:before
{
  content: '▶ ';
}



.box_subwin_map span.link_selected:after
{
  content: ' ◀';
}


.box_subwin_map span.link:hover
{
  color: #0099ff;
  cursor: pointer;
}


/*===========================================================================*/
/* pseudo-pop-up subwindow for displaying plots & graphics
/*===========================================================================*/

.box_subwin_plot
{
  padding: 25px 25px 25px 35px;
  position: absolute;
  left: 200px;
  top: 100px;
  width: 600px;
  display: none;
  background-color: #ffffff;
  font-size: 15px;

  border-radius: 10px;
  -moz-border: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;

  border: 2px solid #000000;
  box-shadow: 3px 3px 5px #385c58;

  /* make sure takes precedence over all other layers */

  z-index: 1000;
}


.box_subwin_plot .box_corner_close
{
  padding: 3px 2px 2px 2px;
  float: right;
  width: 10px;
  text-align: center;
  line-height: 1.0em;
  color: #cc0000;
  background-color: #eeeeee;
background-color: #81d8d0;
  font-weight: bold;
  font-size: 12px;
  border: 1px solid black;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}


.box_subwin_plot .box_corner_close:hover
{
  color: #990000;
  background-color: #ffffff;
background-color: #93f6ed;
  cursor: pointer;
}


.box_subwin_plot .box_buttons
{
  text-align: center;
}


.box_subwin_plot .box_plot img
{
  width: 575px;
}


.box_subwin_plot .box_buttons button
{
  margin: 0px 0px 10px 10px;
  padding: 5px 7px 5px 7px;
  color: #2b4946;
  background-color: #81d8d0;
  font-size: 11px;
  font-weight: bold;
  border: 1px solid #385c58;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  box-shadow: 2px 2px 4px #333333;
}


.box_subwin_plot .box_buttons button:hover
{
  background-color: #93f6ed;
  cursor: pointer;
}


.box_subwin_plot .box_buttons button.disabled
{
  color: #555555;
  background-color: #eeeeee;
  cursor: default;
  pointer-events: none;
}


/*===========================================================================*/
/* pseudo-pop-up subwindow for displaying webcam imgs & loops
/*===========================================================================*/

.box_subwin_webcam
{
  padding: 25px 25px 25px 35px;
  position: absolute;
  left: 200px;
  top: 100px;
  width: 640px;
  display: none;
  background-color: #ffffff;
  font-size: 15px;

  border-radius: 10px;
  -moz-border: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;

  border: 2px solid #000000;
  box-shadow: 3px 3px 5px #385c58;

  /* make sure takes precedence over all other layers */

  z-index: 1000;
}


.box_subwin_webcam img,
.box_subwin_webcam video
{
  margin: 20px 0px 35px 0px;
  width: 640px;
}


.box_subwin_webcam .box_corner_close
{
  padding: 3px 2px 2px 2px;
  float: right;
  width: 10px;
  text-align: center;
  line-height: 1.0em;
  color: #cc0000;
  background-color: #eeeeee;
background-color: #81d8d0;
  font-weight: bold;
  font-size: 12px;
  border: 1px solid black;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}


.box_subwin_webcam .box_corner_close:hover
{
  color: #990000;
  background-color: #ffffff;
background-color: #93f6ed;
  cursor: pointer;
}


.box_subwin_webcam .box_buttons
{
  margin: 0px auto 0px auto;
  width: 55px;
}


.box_subwin_webcam .box_buttons button
{
  margin: 0px;
  padding: 3px 5px 3px 5px;
  color: #2b4946;
  background-color: #81d8d0;
  font-size: 11px;
  font-weight: bold;

  border: 1px solid #385c58;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  box-shadow: 2px 2px 4px #333333;
}


.box_subwin_webcam .box_buttons button:hover
{
  background-color: #93f6ed;
  cursor: pointer;
}


.box_subwin_webcam .box_webcam_update
{
  margin: 20px 0px 0px 0px;
  padding-right: 5px;
  text-align: right;
  font-size: 12px;
  font-style: italic;
}


.box_subwin_webcam .box_webcam_update span.timer
{
  font-weight: bold;
}


/*===========================================================================*/
/* special purpose fonts                                                     */
/*===========================================================================*/

.font_err
{
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #cc0000;
}


.font_reqd
{
  /* font for asterisk indicating a required form element; intended */
  /*   to be used in a "span" tag                                   */

  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #cc0000;
}