/*Credit: http://www.templatemo.com*/

/* Theme variables: defaults reflect your standard theme (blue primary, gray secondary/hover) */
:root{
  /* Colors driven by header_template.php per holiday */
  --brand:#1F4596;              /* primary: links, buttons, nav, credit */
  --link:#1F4596;               /* same as --brand by default */
  --link-hover:#666666;         /* default secondary (gray) */

  --btn-bg:#1F4596;
  --btn-hover-bg:var(--btn-bg); /* set to secondary in header if you want button hover to change */
  --btn-border:#000000;

  --nav-bg:var(--brand);        /* base nav background = primary */
  --nav-hover-bg:var(--link-hover); /* nav hover/active = secondary by default */

  --credit-bg:#1F4596;

  /* Focus ring: RGB of primary (31,69,150) for semi-transparent glow */
  --focus-border:#1F4596;
  --focus-shadow-rgb:31,69,150;

  /* Background image (overridden per holiday by header_template.php) */
  --bg-url:url('/img/background.jpg');
}

BODY
{
  font-family: Helvetica, sans-serif;

  /* Background controlled by variable so header can theme/swap it; keep base color */
  background-color: #373634;
  background-image: var(--bg-url) !important;
  background-repeat: repeat;
  background-attachment: fixed;

  overflow-x: auto;
  /*carasmo's comment https://github.com/twbs/bootstrap/issues/10711*/
}

H1, H2, H3, H4, H5, H6
{
  font-family: Helvetica;
  margin-bottom: 20px;
}
.templatemo_logo
{
  margin: 10px;
}
/* Sortable tables */
table.sortable thead {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    cursor: default;
}
.thumbnail
{
  border-radius: 0px;
  display: inline-block;
  -webkit-transition: none;
  transition: none;
}
.btn
{
  border-radius: 0px;
}
.btn-primary
{
  background-color: var(--btn-bg);
  border-color: var(--btn-border);
}
.btn-primary:hover, .btn-primary:focus
{
  background-color: var(--btn-hover-bg, var(--btn-bg));
  border-color: var(--btn-border);
}

/* Note: justified-nav.css sets gradients; we override those below with theme vars */
.nav > LI > A:hover
{
  background-color: var(--nav-hover-bg);
}
.nav-justified > LI > A
{
  color: #FFFFFF;
  background: var(--nav-bg);
}

.navbar-header
{
  letter-spacing: 2px;
  padding-left: 20px;
  align-content: center;
}
.navbar-header a,
.navbar-header a:hover,
.navbar-header a:focus
{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.navbar-header .templatemo_logo
{
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
A
{
  color: var(--link);
}
A:hover, A:focus
{
  color: var(--link-hover);
  text-decoration: underline;
}
A.thumbnail:hover, A.thumbnail:focus
{
  border-color: #000000;
}
A P
{
  margin-top: 10px;
}
IFRAME, OBJECT, EMBED
{
  border: none;
}
.left-inner-addon
{
  position: relative;
}
.left-inner-addon INPUT, .left-inner-addon TEXTAREA
{
  padding-left: 30px;
}
.left-inner-addon SPAN
{
  position: absolute;
  padding: 8px 12px;
}
.form-control
{
  border-radius: 0px;
}
.form-control:focus
{
  border-color: var(--focus-border);
  outline: 0;
  -moz-box-shadow: 0 0 8px rgba(var(--focus-shadow-rgb),0.8);
  box-shadow: 0 0 8px rgba(var(--focus-shadow-rgb),0.8) !important;
}
.container
{
  margin: 0 auto;
  padding-left: 0px;
  padding-right: 0px;
  background: #FFFFFF;
}
.row
{
  margin-left: 0px;
  margin-right: 0px;
}
FOOTER.container
{
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 20px;
}
FOOTER
{
  margin: 0 auto;
  text-align: center;
  color: #FFFFFF;
  font-size: small;
}
FOOTER A
{
  color: #FFFFFF;
}
FOOTER A:hover
{
  color: var(--link-hover);
}
.left
{
  float: left;
}
.right
{
  float: right;
}
.credit
{
  padding: 10px 0px;
  background: var(--credit-bg);
}
#other_downloads
{
  max-width: 920px;
  margin: 0 auto;
}
#other_downloads H3
{
  padding-left: 20px;
  padding-bottom: 10px;
}
#thumbnails_container, #other_downloads
{
  max-width: 920px;
  margin: 0 auto;
}
.item_container
{
  margin: 0 auto;
}
#img_preview
{
  margin-top: 30px;
}
#img_preview IMG
{
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 30px;
  background-color: #F8F5F5;
  border: 1px solid #DDD;
  padding: 4px;
}
#img_preview H3
{
  text-align: center;
}
.footer_item
{
  margin-bottom: 15px;
}
.section_box
{
  border: 1px solid #CCCCCC;
  padding: 10px;
  background: #F6F6F6;
  max-width: 250px;
  min-height: 230px;
  text-align: left;
}
.section_box P, .section_box LI
{
  font-size: 1.3rem;
  line-height: 2em;
}
#download_box
{
  float: right;
  padding-top: 10px;
}
.cleaner
{
  clear: both;
}
.videoWrapper
{
  position: relative;
  padding-bottom: 56.25%;
  /*16:9*/
  padding-top: 25px;
  height: 0;
}
.videoWrapper IFRAME
{
  position: absolute;
  top: 0;
  left: -1px;
  width: 100%;
  height: 100%;
}
.pageIcons
{
  padding-right: 10px;
  width: 79px;
  height: auto;
}
#center
{
  display: block;
  align-content: center;
}
#headeriframe
{
  width: 100%;
  height: 300px;
}
.thumbnail_lightbox {
  max-width: 40%;
  width:100px;
  border-radius: 5px;
  padding:5px;
}

.italic { font-style: italic; }
.small { font-size: 0.8em; }

/** LIGHTBOX MARKUP **/

.lightbox {
  /** Default lightbox to hidden */
  display: none;

  /** Position and style */
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(50,50,50,0.8);
  padding-top:10px;
}

lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  max-height: 80%;
  margin-top: 2%;
}

.lightbox:target {
  /** Remove default browser outline */
  outline: none;

  /** Unhide lightbox **/
  display: block;
}

/*mobile styles*/
@media only screen and (max-width: 480px)
{
  H2 { margin-bottom: 5px; }
  .navbar-form { margin-top: 0px; }
  #thumbnails_container {
    margin-left: 10px; margin-right: 10px;
    padding-left: 5px; padding-right: 5px;
  }
  #thumbnails_container .col-xs-4, #thumbnails_container .col-sm-3, #thumbnails_container .col-md-3 {
    padding-left: 5px; padding-right: 5px;
  }
  #templatemo_footer { margin-bottom: 5px; }
  #hidemobile { display: none; }
  .hidemobile { display: none; }

  /* OVERRIDE: show primary logo on mobile; size both logos nicely */
  #hidemobile2 { display: inline !important; }
  .navbar-header .templatemo_logo { height:auto; max-width:100%; margin:4px; }
  .navbar-header img.templatemo_logo:first-child { width: 90px !important; }   /* primary */
  .navbar-header img.templatemo_logo:last-child  { width: 200px !important; }  /* sub */

  #hidemobile2 { display: inline !important; }
}

/*tablet styles*/
@media only screen and (min-width: 481px) and (max-width: 767px)
{
  H2 { margin-bottom: 5px; }
  .navbar-form { margin-top: 0px; }
  #thumbnails_container {
    margin-left: 20px; margin-right: 20px;
    padding-left: 5px; padding-right: 5px;
  }
  #thumbnails_container .col-xs-4, #thumbnails_container .col-sm-3, #thumbnails_container .col-md-3 {
    padding-left: 10px; padding-right: 10px;
  }
  #download_box { float: left; padding-top: 10px; margin: 0 auto; }
  .preview_footer_container { margin-top: 10px; }
  .footer_item { margin-right: 10px; }
  .footer_item:last-child { margin-right: 0px; }
  .section_box { height: 297px; max-width: 230px; }
  #templatemo_footer { margin-bottom: 5px; }
  #hidemobile { display: none; height: auto; }

  /* OVERRIDE: show primary logo on tablet; size both logos nicely */
  #hidemobile2 { display: inline !important; }
  .navbar-header .templatemo_logo { height:auto; max-width:100%; margin:4px; }
  .navbar-header img.templatemo_logo:first-child { width: 100px !important; }  /* primary */
  .navbar-header img.templatemo_logo:last-child  { width: 220px !important; }  /* sub */

  #hidemobile2 { display: inline !important; }
}

/*desktop styles*/
@media only screen and (min-width: 768px) and (max-width: 991px)
{
  .header { height: 330px; }
  .navbar-header H2 { margin: 0px; margin-top: 34px; }
  .navbar-form { margin-top: 33px; }
  #thumbnails_container .col-xs-4, #thumbnails_container .col-sm-3, #thumbnails_container .col-md-3 {
    padding-left: 10px; padding-right: 10px;
  }
  .preview_footer_container { margin-top: 30px; }
  .footer_item { margin-right: 15px; }
  .footer_item:last-child { margin-right: 0px; }
  .section_box { height: 297px; max-width: 230px; }
  #hidemobile { height: 230px; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px)
{
  .header { margin-left: 0px; height: 385px; }
  .navbar-header H2 { margin: 0px; margin-top: 34px; }
  .navbar-form { margin-top: 33px; }
  #thumbnails_container .col-xs-4, #thumbnails_container .col-sm-3, #thumbnails_container .col-md-3 {
    padding-left: 10px; padding-right: 10px;
  }
  .preview_footer_container { margin-top: 30px; }
  #hidemobile { height: 278px; }
}

@media only screen and (min-width: 1200px)
{
  .navbar-form { margin-top: 19px; }
  #thumbnails_container .col-xs-4, #thumbnails_container .col-sm-3, #thumbnails_container .col-md-3 {
    padding-left: 10px; padding-right: 10px;
  }
  .preview_footer_container { margin-top: 66px; }
  #hidemobile { height: 436px; }
}

/* === THEMED NAV OVERRIDES (force theme colors over justified-nav gray/gradient) === */
.nav-justified > li > a {
  background: var(--nav-bg) !important;
  background-image: none !important; /* remove gray gradient from justified-nav.css */
  color: #FFFFFF !important;
}

/* Hover uses the holiday secondary */
.nav-justified > li > a:hover,
.nav > li > a:hover {
  background: var(--nav-hover-bg) !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

/* Active uses the holiday secondary (default #666666) */
.nav-justified > li.active > a,
.nav-justified > li.active > a:hover,
.nav-justified > li.active > a:focus,
.nav > li.active > a,
.nav > li.active > a:hover,
.nav > li.active > a:focus {
  background: var(--nav-hover-bg) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}