/* Archetype Basic Styles: v1.5 - 2017-01-06 
-1.5 - remove style influencing selectors or properties. Focus on structure.
*/

*, *::before, *::after {box-sizing: border-box;}

html
{
  height:100%;
  overflow-x:auto;
  overflow-y: scroll;
  line-height: 1.5;
  font-size: 62.5%; /*Enables use of rem values like 1.4rem = 14px */
}

body {padding:0;margin:0;font-size: 1.4rem; /* =14px */}

main,section,article {display:block;/*for old ie*/}
a, a:hover, a:visited {text-decoration:none;}
a:hover {}
img {max-width:100%;}
hr{border:0; border-bottom: 1px solid #000;height:1px;}

/* Structure positioning and sizing */
.maxw {margin-left:auto;margin-right:auto;max-width:1240px;}

/* Utilities */
.clearfix::after{content:' ';display:block;clear:both;}
.clear{clear:both;/*REQUIRED*/}

/* Archetype Modules */
.slide
{
  /* REFERENCE STYLES: It's expected that these values will be overriden locally */
  background-size:contain;
  background-repeat: no-repeat;
  background-position: top center;
  height:450px;
  /*
  Slide show ratio:
  Solves the issue of the slide show not resizing correctly on responsive views.
  */
  height:calc(100vw * (450 / 1280) ); /* h/w ratio for slide image */
  /*On larger screens the height goes out of wack using the ratio above, 
  so limit this with a max-height*/
  max-height: 450px;
}

/* Phone 2 module */
/* REQUIRES: .phone class wrapper
<div class="phone">{archetype: name="phone_number_2" type="module"}</div>
*/
.phone a {display:none;}
.phone span {}

/* CKEditor requires these styles */
.text-align-left {text-align:left;}
.text-align-center {text-align:center;}
.text-align-right {text-align:right;}
.text-align-justify {text-align:justify;}

/* Image alignment  */
.align-left {float:left;margin:0 15px 15px 0;}
.align-right{float:right; margin:0 0 15px 15px;}
.align-center{text-align:center;}

/* Mobile "to top" button */
#go_top
{
  opacity:.5;
  display: none;
  background: rgba(0,0,0,.4);
  border-radius: 4px;
  bottom: 10px;
  height: 36px;
  position: fixed;
  right: 10px;
  width: 36px;
  outline: none;
  z-index: 100;
}

#go_top:before
{
  border: 2px solid #fff;
  border-width: 5px 5px 0 0;
  content: '';
  display: block;
  height: 11px;
  position: relative;
  top: 13px;
  transform: rotate(-45deg);
  width: 11px;
  left: 11px;
}

/* Flexible columns */
/* These need to be fairly early in the document, so they can be overriden */
.flex_columns
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  vertical-align: top;
}

.flex_row
{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row; /*This is redundant here, but shows the intention*/

}

.flex_column
{
  -ms-flex-item-align: stretch;
  align-self: stretch;
  -webkit-box-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  vertical-align: top;
}

.flex_column-shrink
{
  -webkit-box-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

/*Basic 2 column (flex based) layout
Must go after the flex column structure*/
.main_col_small {flex: 0 0 375px;min-width:375px;flex-basis:375px;}
.main_col_large {flex-basis: -webkit-fill-available;flex-basis: -moz-available;flex-basis: fill;}
.main_col_large.large_col_right {padding-left:40px;}
.main_col_large.large_col_left {padding-right:40px;}

@media (max-width: 1024px),(max-device-width: 1024px){
  .flex_columns .flex_columns /*Columns inside columns should convert from rows in a wider screen*/
  {flex-direction: column;-webkit-flex-direction: column;}

  .flex_columns .flex_row.flex_columns
  {flex-direction: row;-webkit-flex-direction: row;}
}


@media (max-width: 800px),(max-device-width: 800px){
  .main_col_small {padding:0;flex: 1 1 auto;-webkit-box-flex: 1 1 auto;min-width:100px;order:2; /*small columns should go after large columns in mobile*/}
  .main_col_large,.main_col_large.large_col_left,.main_col_large.large_col_right {padding:0;}
  
  /* Image alignment  */
  .align-left,.align-right,.align-center
  {float:none;margin: 15px auto;display:block;}

  /* Phone 2 module */
  .phone a {display:inline;}
  .phone span {display:none;}
  .flex_columns
  {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .flex_column {}

  .flex_row
  {
    -webkit-flex-direction: row;
    flex-direction: row;
  }

  img.align-left {
    float: none;
    display: block;
    margin: 10px auto;
  }

  img {max-width:100%;height:auto;}
  #go_top {display: block;}
}

/* NAVIGATION */
nav {width:100%;position:relative;/*Required for dropdown positioning*/}
nav .at-minimal_toolbar {/*position navbar editing toolbar*/}
nav ul 
{
  margin:0;list-style-type:none;padding:0;
  display:flex;display:-webkit-flex;
  height:auto;
  align-items: stretch;-webkit-align-items: stretch;
  flex-flow: row wrap; -webkit-flex-flow: row wrap; /* Safari 6.1+ */
  flex:1 1 auto;-webkit-flex: 1 1 auto;
  align-self: stretch;
}

nav li
{
  display: inline-block;
  flex: 1 1 auto;-webkit-flex: 1 1 auto;
  align-self: stretch;-webkit-align-self: stretch;
  width: auto;
}
nav a {display:block;/*Not in :hover state, as it can cause odd behavior on elements that hide/show*/}
nav a,nav a:visited,nav a:hover
{
  outline: none;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

nav a:hover
,nav li:hover > a /*keep hovered item highlighted when hovering over menu below*/
{}

/* SELECTED NAV */
nav .selected_nav > a,nav .selected_nav > a:hover {} 

/*Dropdown menu item styles*/
nav ul ul a,nav ul ul a:visited,nav ul ul a:hover 
{padding: 0 10px;line-height:2.5;text-align:left;display:block;}
nav ul ul a:hover{}

/* VERTICAL NAV */
nav.nav_vertical {}
nav.nav_vertical .at-minimal_toolbar {top:0;}
nav.nav_vertical ul {flex-flow:column;-webkit-box-orient: vertical;-webkit-box-direction: normal;}
nav.nav_vertical ul li
{
  display:block;
  float:none;
  clear:both;
  text-align:left;
}

nav.nav_vertical {height:auto;}
nav.nav_vertical a,nav.nav_vertical a:visited,nav.nav_vertical a:hover
{text-align:left;}

/*Navbar in footer*/
footer nav {}
footer nav.nav_vertical .at-minimal_toolbar {right:0;}
footer nav ul {flex-direction: column;}
footer nav a,footer nav a:visited,footer nav a:hover
,footer nav .selected_nav > a,footer nav .selected_nav > a:visited,footer nav .selected_nav > a:hover
{}

footer nav a:hover
,footer nav .selected_nav > a
,footer nav .selected_nav > a:visited
,footer nav .selected_nav > a:hover 
{}

/* MOBILE NAV */

.mobile_top_nav_show
,.mobile_top_nav_hide
{
  cursor:pointer;
  color:inherit;
  position: relative;
  display: block;
  font-size: 28px;/*Makes "menu" icon fit better*/
  line-height: 1;
}
.mobile_top_nav_hide
{}

.mobile_top_nav_hide::before
,.mobile_top_nav_show::before
{}

nav.fontawesome .mobile_top_nav_hide::before
,nav.fontawesome .mobile_top_nav_show::before
{
  content:' \f0c9';font-family:"FontAwesome";
}

.mobile_top_nav_hide::before {}
nav.fontawesome .mobile_top_nav_hide::before {content:' \f00d';font-family:"FontAwesome";}

.mobile_top_nav_hide::after
,.mobile_top_nav_show::after
{
  content: "Close";
  display: block;
  font-size: 10px;
}

.mobile_top_nav_show::after {content: "Menu";}

.mobile_top_nav_hide,.mobile_top_nav_show {display:none;}

.mobile_top_nav_show {}

/** DROPDOWN NAV **/
/* remove all the bullets, borders and padding from the default list styling */
nav ul {padding:0;margin:0;list-style-type:none;}
nav ul ul {display:none;text-align:left;z-index:1000;}
/* float to make it horizontal and a relative positon to control the dropdown menu positon */
nav li {float:left;position:relative;white-space:nowrap;}
nav ul ul li {float:none;display:block;}
/* style the links for the top level */
nav li:last-child a {}
/* style the second level background */
nav li.has_submenu > a:after {
  content:' \25BE';padding-left:5px;opacity:.4;
}

nav.fontawesome li.has_submenu > a:after {content:' \f078';font-family:"FontAwesome";}

nav li.has_submenu a {}

/* hide the sub levels */
nav ul ul {position:absolute;top:100%;left:0; width:auto;min-width:100%;}
nav ul li:last-child ul {left:auto;right:0;}
/* MENU ACTIONS */
/* make the second level visible when hover on first level list OR link */
nav ul li:hover ul,
nav ul a:hover ul{display:block;}

@media (max-width: 800px),(max-device-width: 800px){

  nav.mobile_nav a,
  nav.mobile_nav a:visited {font-size:1em;}
  nav.mobile_nav ul {}
  nav.mobile_nav ul ul {width: 100%;position: static;}
  nav.mobile_nav ul ul li a
  ,nav.mobile_nav ul ul li a:visited 
  ,nav.mobile_nav ul ul li a:hover 
  {padding-left:20px;background: #4D4D4D;white-space: normal;}
  
  body > header nav ul.navbar_dropdown_menu_ul
  {
    position: absolute;
    width:100%;
    z-index:100; /*ensure it's above close elements*/
    top: 100%; /*At bottom of open/close*/
  }

  /*nav in main */
  main nav ul li {flex-wrap: wrap;}
  main nav a, main nav a:hover, main nav a:visited {line-height:1.5;}
  /*MOBILE NAV*/
  nav.mobile_nav {/*Enables full display of "menu" button*/}
  nav.mobile_nav li {display:block;float:none;position:static;white-space:normal;line-height:20px;width:100%;}

  nav.mobile_nav a,nav.mobile_nav a:visited, nav.mobile_nav a:hover
  {
    padding:6px 8px;
    display:block;
    background:#333;
    color:#fff;
    font-size:1.4rem;
    line-height:2;
    text-align:left;
  }

  nav.mobile_nav .selected_nav > a
  ,nav.mobile_nav .selected_nav > a:hover
  {background:#ccc;color:black;box-shadow:none;}

  nav.mobile_nav ul {display:none;}
  nav.mobile_nav_open ul {display:block;position: absolute;width: 100%;z-index: 100;}
  .mobile_top_nav_show {display:block;}
  .mobile_nav_open .mobile_top_nav_hide {display:block;}
  .mobile_nav_open .mobile_top_nav_show {display:none;}

  nav.mobile_nav a {border-bottom: 1px solid #000;}
  nav.mobile_nav a:hover {background:#515151;}
}


/* TABS */
.tabs.clearafter::after{display:none;/*Fix this hack from form.2.css, no longer needed.*/}

.tabs:empty {display:none;} /* Used if there are no tabs, or one tab */

.tabs 
{
  /*OLD BROWSERS*/
  float:left;
  width:220px;
  /*END OLD BROSWERS*/
  padding:0;
  margin:0;
  display:flex;display:-webkit-flex;
  height:auto;
  align-items: stretch;-webkit-align-items: stretch;
  flex-flow: row wrap; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap;

  flex:1 1 auto;-webkit-flex: 1 1 auto;
  align-self: stretch;
}

.tabs > .tab
{
  /*OLD BROWSERS*/
  display: inline-block;
  /*END OLD BROSWERS*/
  flex: 1 1 100%;-webkit-flex: 1 1 100%;
  align-self: stretch;-webkit-align-self: stretch;
  width: auto;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tabs_content 
{
  /*OLD BROWSERS*/
  float:left;
  width:75%;
  /*END OLD BROSWERS*/
  width:-moz-calc(100% - 330px);width:-webkit-calc(100% - 330px);
  width:calc(100% - 230px);
  background:none;
  border:none;
  overflow:visible;
  padding: 0 0 0 20px;
}

.tab a,.tab a:visited,.tab a:hover,.tab_selected a,.tab_selected a:visited
{
  color:#000;
  display:block;
  height:auto;
  position:relative;
}

.tab a,.tab a:visited,.tab a:hover,.tab_selected a,.tab_selected a:visited
{
  background: rgba(0,0,0,.1);
  margin-bottom: 5px;
  text-decoration: none;
  padding: .7rem 1.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
}
.tab a:hover {background:#666;}

/* EXTRA FEATURES */
.tab .item_count
{
  font-style: italic;
  opacity: 0.5;
  font-size: 0.7em;
  position:absolute;
  right:10px;
  top: 10px;
  line-height: normal;
}

.tab_category_group_heading {}

/** HORIZONTAL TABS **/
.tabs_h .tab {flex: 0 1 auto;-webkit-flex: 0 1 auto;}
.tabs_h .tab a,.tabs_h .tab a:visited,.tabs_h .tab a:hover,.tabs_h .tab_selected a,.tabs_h .tab_selected a:visited
{margin-bottom:0px;margin-right:5px;}

.tabs_h .tab a:hover {}

/** SELECTED TAB **/
.tab_selected a,.tab_selected a:hover,.tab_selected a:visited
{background:rgba(0,0,0,.3);}

/** SELECTED TAB : HORIZONTAL **/
.tabs_h .tab_selected a,.tabs_h .tab_selected a:visited,.tabs_h .tab_selected a:hover
{border-bottom:none;}


/** HORIZONTAL TABS **/
.tabs_h .tabs_content,.tabs_h .tabs
{float:none;width:auto;}
.tabs_h .tabs {border-bottom:1px solid #ccc;margin-bottom:10px;}
.tabs_h .tab,.tabs_h .tab_selected
{display:inline-block;}

.tabs_h .tabs {padding-bottom:0;}
.tabs_h .tabs_content {padding:0;}

.tabs_h .tab a
,.tabs_h .tab a:visited
,.tabs_h .tab a:hover
,.tabs_h .tab_selected a
,.tabs_h .tab_selected a:visited
{
  text-decoration:none;
}

@media (max-width:800px),(max-device-width: 800px){

  .tabs {}
  .tabs_content {}

  /** Flexible columns **/
  .tabs 
  {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-start;
    vertical-align: top;
    margin:0;
    padding:0;
    flex-wrap: wrap;
    list-style:none;
  }

  .tabs .tab
  {
    float:left;
    align-self: stretch;-webkit-align-self: stretch;
    flex: 1 1 auto;-webkit-flex: 1 1 auto;
    min-height: 100%;
    vertical-align: top;
    padding:5px;
    text-align:center;
    margin:0;padding:0;
  }

  .tabs 
  {
    float:none;
    width:100%;
    padding:0;
  }

  .tabs .tab {display:inline-block;}

  .tabs_content 
  {
    float:none;
    width:100%;
    padding: 12px;
  }

  .tabs_h .tab a,.tabs_h .tab a:visited,.tabs_h .tab a:hover
  {margin:3px;}

}


/* MEMBER STYLES */
#member_login_status
{
  position:absolute;
  top:5px;right:5px;
  font-size:.9rem;
  background: #fff;
  border-radius: 4px;
  box-shadow: 1px 1px 6px rgba(0,0,0,.1);
  font-size: 0.9rem;
  padding: .4rem .6rem;
}
#admin_login_status {font-size:.85rem;}