/*
Theme Name: US-Mint
Description: The theme for the US Mint's homepage (usmint.gov)

Author: Mario Hendricks, Leidos

Version: 1.0

License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html

Permission is granted to copy, distribute and/or modify this document
under the terms of the GNU Free Documentation License, Version 1.3
or any later version published by the Free Software Foundation;
with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
A copy of the license entitled "GNU Free Documentation License" can be
found at http://www.gnu.org/licenses/fdl-1.3-standalone.html

This stylesheet contains the base styles that should be used when on all screens and small/mobile
screens.
*/

/*
* REMINDERS
* -Use lowercase and separate words with hyphens when naming selectors. Avoid camelcase and underscores
* -Prefixed vendor-specific properties pairs should appear directly before the generic property they refer to
*
*/

/* =============================================================================
   US Mint Kids Site Custom Styles - General, site-wide styles
   ========================================================================== */

/* Ensures that there isn't a white bar at the bottom of the page if content is smaller than the vh */
html {
  min-height: 100vh;
}

body.kids-site {
  font-family: 'Lato', sans-serif;
  font-size: 112.5%;  /* This equates to 18px (16px is assumed as the user's default) */
  background-color: #fff;
  overflow-x: hidden;
}


/* We include this because the base.css has a different font specified for these elements */

body.kids-site h1, body.kids-site h2, body.kids-site h3,
body.kids-site h4, body.kids-site h5, body.kids-site h6 {
  font-family: 'Lato', sans-serif;
  line-height: 1.1em;
  color: #0b5578;
}


body.kids-site h1 {
  font-size: 194.4%;
  font-weight: 900;
  text-align: center;
}

body.kids-site h2 {
  font-size: 172.2%;
  font-weight: bold;
  margin-bottom: .4em;
}

body.kids-site h3 {
  font-size: 138.8%;
  font-weight: bold;
  margin-bottom: .3em;
}

body.kids-site h4 {
  font-size: 111.1%;
  font-weight: bold;
}

body.kids-site h5 {
  font-size: 83.3%;
  font-weight: bold;
}

body.kids-site h6 {
  font-size: 55.5%;
  font-weight: bold;
}

/* Paragraphs that follow an H2 or an H3 have a smaller top margin. */
body.kids-site h2 + p,
body.kids-site h3 + p {
  margin-top: .4em;
}

body.kids-site figcaption, body.kids-site .wp-caption-text {
  font-family: 'Lato', sans-serif;
  font-size: 77.7%;
  font-style: italic;
  line-height: 1.3em;
}

.centered-contents {
  margin: auto;
  display: table;
}

.hidden-content {
  display: none;
}

body.kids-site button {
  font-family: 'Lato', sans-serif;
}

body.kids-site button,
body.kids-site input[type='submit'],
body.kids-site input[type='button'] {
  border: 1px solid #0b5578;
  font-size: 111.1%;
  font-weight: bold;
  color: #0b5578;
  text-shadow: none;
  background: -moz-linear-gradient(top, #f1d958 5%, #f1c934 100%);
  background: -webkit-linear-gradient(top, #f1d958 5%, #f1c934 100%);
  background: -o-linear-gradient(top, #f1d958 5%, #f1c934 100%);
  background: -ms-linear-gradient(top, #f1d958 5%, #f1c934 100%);
  background: linear-gradient(to bottom, #f1d958 5%, #f1c934 100%);
  background-color: #f1c934;
  padding: .2em .45em;
  height: auto;
}

body.kids-site button:disabled,
body.kids-site input[type='submit']:disabled,
body.kids-site input[type='button']:disabled {
  background: -moz-linear-gradient(top, #ccbd6f 5%, #927f38 100%);
  background: -webkit-linear-gradient(top, #ccbd6f 5%, #927f38 100%);
  background: -o-linear-gradient(top, #ccbd6f 5%, #927f38 100%);
  background: -ms-linear-gradient(top, #ccbd6f 5%, #927f38 100%);
  background: linear-gradient(to bottom, #ccbd6f 5%, #927f38 100%);
  background-color: ##797154;
  color: #4b6571;
}

body.kids-site .no-bottom {
  margin-bottom: 0;
  padding-bottom: 0;
}

body.kids-site .wp-caption {
  border: none;
}

body.kids-site .add-top {
  margin-top: 15px;
}

body.kids-site a {
 #3344dd
}

/* Remember that the order of the 4 pseudo-selectors should be link, visited, hover, active. */

body.kids-site #kids-utility-bar .bar-container  a {
  color: #13416D;
  text-decoration: none;
  font-weight: bold;
}

body.kids-site a:visited {
  color: #884488;
}

body.kids-site a:hover, body.kids-site a:active, body.kids-site a:focus {
  color: #bb1122;
}

/* When the class 'not-link-style' is added to an a element, don't style as a link */
body.kids-site a.not-link-style:link,
body.kids-site a.not-link-style:visited,
body.kids-site a.not-link-style:hover,
body.kids-site a.not-link-style:active,
body.kids-site a.not-link-style:focus {
  color: inherit;
  text-decoration: none;
}

body.kids-site a.not-link-style:hover {
  text-decoration: underline;
}

body.kids-site #primary-container main {
  padding-bottom: 35px;
  background-color: #fff;
}

body.kids-site #primary-container main.transparent {
  background-color: transparent;
}

/* =============================================================================
   US Mint Kids Site Custom Styles - General
   ========================================================================== */

body.kids-site article.fun-fact-entry {
  margin: 1.5em 0;
}

body.kids-site div.show-link {
  box-sizing: border-box;
}

/* =============================================================================
   US Mint Kids Site Custom Styles - Featured Links Widget Styles
   ========================================================================== */

div.usmint-featured-links-widget {
  background-color: #fff;
  padding-bottom: 10px;
}

div#usmint-featured-links-header {
  height: 50px;
  background-color: #f1c934;
}

div#usmint-featured-links-header h3 {
  padding: 10px;
  margin-top: 0;
}

ul.usmint-featured-links {
  list-style: none outside none;
  padding-left: 10px;
}

ul.usmint-featured-links h4 {
  margin-bottom: 2px;
}

ul.usmint-featured-links span.featured-link-caption {
  font-style: italic;
  line-height: 1.2em;
  display: block;
}


/* =============================================================================
   US Mint Kids Site Custom Styles - Coins & Medals
   ========================================================================== */

body.kids-site #coin-container {
  background-color: #ffffff;
  padding: 15px 0 30px 0;
  overflow: auto;
}

body.kids-site .coin-caption {
  font-style: italic;
  font-size: 75%;
  text-align: center;
  line-height: 1.3em;
  width: 70%;
  margin: 10px auto 0 auto;
}

body.kids-site #coin-lesson-plans p {
  margin: 0;
}

/* =============================================================================
   US Mint Kids Site Custom Styles - Mobile Styles
   ========================================================================== */

/* We need to load the logo in case we want to print. Otherwise, it won't be in cache
   and won't load before we print. Some browsers don't load content with display: none,
   so we simply keep the size small and put it behind the blue header background to hide it. */
#kids-print-header {
  background: url(/wordpress/wp-content/plugins/mint-kids/public/img/kids-logo-small.png);
  width: 1px;
  height: 1px;
  z-index: -1;
}

body.kids-site div#header-container {
  height: 100px;
}

body.kids-site div#header-bar {
  height: 61px;
  background-color: #1E6BA7;
}

/* We have this style becuase the info site has a rule for just the header that we override. */
body.kids-site header {
  height: auto;
}

body.kids-site div#mobile-title-container {
  text-align: center;
  color: #fff;
  font-size: 88.8%;
  font-weight: bold;
}

body.kids-site div#title-container {
  display: none;
}

body.kids-site nav#menu-container {
  display: none;
}

/* Styles the "button" to show the menu */
body.kids-site #show-kids-menu {
  clip: auto;
  display: inline-block;
  position: absolute;
  text-decoration: none;
  text-align: center;
  font-size: 13px;
  color: #fff;
  height: 61px;
  width: 54px;
  background: url(/wordpress/wp-content/themes/us-mint/img/menu_icon.png) no-repeat scroll center 50%;
  cursor: pointer;
  margin: 3.2% 0;
}

@media (max-width: 425px) {
	body.kids-site #show-kids-menu {
		margin: 0;
		top: 1px;
	}
}

body.kids-site div#primary-container {
  position: relative;
  width: 98%;
  left: 0;
  transition: left 0.5s;
}

/* When we select the menu button, push the content out */
body.kids-site input#kids-menu-checkbox:checked ~ div#primary-container {
  left: 80%;
  transition: left 0.5s;
}

body.kids-site div#kids-mobile-menu {
  position: absolute;
  display: inline-block;
  background-color: #DAEAF5;
  width: 80%;
  left: -80%;
  transition: left 0.5s;
  z-index: 9000;
}

body.kids-site input#kids-menu-checkbox:checked ~ div#kids-mobile-menu {
  left: 0;
}

body.kids-site div#kids-mobile-menu div#left-menu-search {
  padding: 16px;
}

body.kids-site div#kids-mobile-menu div#left-menu-search form#left-menu-search-form {
  background-color: #fff;
  display: flex;
}

/* Make the label (which contains the input field) use all available space. */
body.kids-site #kids-mobile-menu #left-menu-search #left-menu-search-form label#left-menu-search-input {
  flex: 1;
}

/* Make the input and suggestions block use all available space. */
body.kids-site form.search-form div.input-and-suggestions {
  flex: 1;
  position: relative;
  margin-right: 2px;
}

body.kids-site div#kids-mobile-menu div#left-menu-search input.search-field {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding: 1px 3px;
  border: none;
}

body.kids-site div#kids-mobile-menu div#left-menu-search button#left-menu-search-btn {
  float: right;
  height: 40px;
  width: 40px;
  padding: 6px;
  margin: 1px 1px 1px 0;
  border: none;
  border-radius: 0;
  background-image: url(/wordpress/wp-content/plugins/mint-kids/public/img/kids-search-white.png);
  background-color: #0B4470;
  background-position-x: center;
  background-position-y: center;
  background-repeat: no-repeat;
}

/* Search Suggestion styling section */

body.kids-site form.search-form div.search-suggestion-box {
  position: absolute;
  left: 0;
  top: 42px;
  width: 100%;
  z-index: 6;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.kids-site form.search-form div.search-suggestion-box ul.suggestion-list {
  padding: 0;
  margin:  0;
  list-style: none outside none;
}

body.kids-site form.search-form div.search-suggestion-box li.search-suggestion {
  text-align: left;
  padding: 4px 16px;
  border-bottom: 1px solid #aaa;
}

body.kids-site form.search-form div.suggestions-hidden {
  display: none;
}

body.kids-site form.search-form li.suggestion-hidden {
  display: none;
}

body.kids-site form.search-form li.suggestion-selected {
  background-color: #eee;
}

body.kids-site div#kids-mobile-menu div#kids-navigation a,
body.kids-site div#kids-mobile-menu div#kids-navigation a:link,
body.kids-site div#kids-mobile-menu div#kids-navigation a:visited,
body.kids-site div#kids-mobile-menu div#kids-navigation a:hover
body.kids-site div#kids-mobile-menu div#kids-navigation a:active {
  color: #0B4470;
  text-decoration: none;
}

body.kids-site div#kids-mobile-menu div#kids-navigation ul {
  list-style: none outside none;
  font-weight: 900;
  line-height: 1.5em;
  padding: 0 10px;
}

body.kids-site div#kids-mobile-menu div#kids-navigation>ul {
  margin-top: 8px;
  margin-bottom: 0px;
}

body.kids-site div#kids-mobile-menu div#kids-navigation > ul > li {
  position: relative;
}

body.kids-site div#kids-mobile-menu div#kids-navigation > ul > li > a {
  font-size: 140%;
  padding: 12px 0;
  display: block;
  line-height: 1.2em;
  border-bottom: 1px solid #0b5578;
}

body.kids-site div#kids-mobile-menu div#kids-navigation > ul > li:first-of-type > a {
  border-top: 1px solid #0b5578;
}

body.kids-site div#kids-mobile-menu div#kids-navigation li > input:checked ~ a {
  border-bottom: 1px solid #0b5578;
}

body.kids-site div#kids-mobile-menu div#kids-navigation li > .show-kids-sub-menu {
  background-image: url(/wordpress/wp-content/plugins/mint-kids/public/img/dark_blue_arrow.png);
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  height: 54px;
  width: 54px;
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(-90deg);
  transition: .4s;
}

body.kids-site div#kids-mobile-menu div#kids-navigation li > input:checked ~ label.show-kids-sub-menu {
  transform: rotate(0deg);
  transition: .5s;
}

body.kids-site div#kids-mobile-menu div#kids-navigation > ul > li > ul {
  display: none;
  padding: 0 0 0 20px;
}

body.kids-site div#kids-mobile-menu div#kids-navigation > ul > li > input:checked ~ ul {
  display: block;
}

/* Style for the level 2 menu items */
body.kids-site div#kids-mobile-menu div#kids-navigation > ul > li > ul > li > a {
  font-size: 120%;
  padding: 8px 0;
  display: block;
  border-bottom: 1px solid #0b5578;
  line-height: 1.2em;
}

/*
body.kids-site div#kids-mobile-menu div#kids-navigation > ul > li > ul > li:last-of-type > a {
  border-bottom: none;
}
*/
body.kids-site div#kids-mobile-menu #did-you-know div#kids-logo {
    background: url(/wordpress/wp-content/plugins/mint-kids/public/img/us_mint_coin_classroom_logo.png) no-repeat scroll 0 0 transparent;
    width: 130px;
    height: 130px;
    background-size: cover;
}
body.kids-site div#kids-mobile-menu div#did-you-know {
  border-bottom: 1px solid #0b5578;
  margin: 0 10px;
  padding: 35px 0;
  color: #0B4470;
}

body.kids-site div#kids-mobile-menu div#did-you-know div#did-you-know-title {
  font-size: 140%;
  font-weight: 900;
  padding-bottom: 10px;
}

body.kids-site div#kids-mobile-menu div#did-you-know div#did-you-know-content {
  font-size: 120%;
  font-weight: 500;
}

body.kids-site div#kids-mobile-menu div#did-you-know div#did-you-know-content a {
  color: #0B4470;
  text-decoration: none;
}

body.kids-site div#kids-mobile-menu div#mobile-menu-footer ul {
  list-style: none outside none;
  padding-left: 10px;
  font-size: 120%;
}

body.kids-site div#kids-mobile-menu div#mobile-menu-footer li a,
body.kids-site div#kids-mobile-menu div#mobile-menu-footer li a:link,
body.kids-site div#kids-mobile-menu div#mobile-menu-footer li a:visited,
body.kids-site div#kids-mobile-menu div#mobile-menu-footer li a:active {
  font-weight: 500;
  color: #0B4470;
  text-decoration: none;
  line-height: 200%;
}

body.kids-site div#kids-mobile-menu div#kids-legal-footer-content p {
  margin: 15px .3em 0 0;
  background: url(/wordpress/wp-content/themes/us-mint/img/USTreasurySeal.gif) no-repeat right center;
  text-align: right;
  min-height: 42px;
  padding: 0 48px 0 0;
  color: #0B4470;
}

body.kids-site div#kids-content-overlay {
  left: 0;
  top: 0;
  position: fixed;
  background-color: transparent;
  display: none;
  width: 20%;
  height: 100%;
}

body.kids-site input#kids-menu-checkbox:checked ~ div#kids-content-overlay {
  display: block;
  z-index: 999;
  left: 80%;
}

footer p#kids-legal-footer {
}

body.kids-site div.kids-breadcrumbs {
  display: none;
}

body.kids-site div.hide-breadcrumbs {
  display: none;
}

body.kids-site footer {
  display: none;
}


/* =============================================================================
   US Mint Kids Site Mobile Styles - Coins & Medals
   ========================================================================== */

body.kids-site .kids-coin h1 {
  text-align: center;
  margin-bottom: 15px;
}

body.kids-site #coin-left {
  width:100%;
}

body.kids-site #coin-right {
  display: none;
}

body.kids-site #mobile-coin-image-slider {
  display: block;
  margin-top: 40px;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
}

body.kids-site #mobile-coin-image-slider img {
  width: 180px;
}

body.kids-site .left-arrow-div {
  float: left;
  width: 20%;
}

body.kids-site #slides-container {
  float: left;
  width: 60%;
  overflow-x: hidden;
  overflow-y: auto;
}

body.kids-site .right-arrow-div {
  float: right;
  width: 20%;
}

body.kids-site .left-arrow, body.kids-site .right-arrow  {
  border:0;
  text-shadow: none;
  box-shadow: none;
  background-image: url(/wordpress/wp-content/plugins/mint-kids/public/img/blue-arrow.png);
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  height: 54px;
  width: 54px;
  transition: .5s;
  margin-top: 75px;
}

body.kids-site .left-arrow {
  transform: rotate(90deg);
}

body.kids-site .right-arrow {
  transform: rotate(-90deg);
}

/* =============================================================================
   US Mint Kids Site Mobile Styles - Landing Page Content Blocks
   ========================================================================== */

body.kids-site div.feature-group div.group-header {
  border-top: 4px solid #f1c934;
  padding: .2em 1em;
  text-align: center;
}

body.kids-site div.feature-group div.group-header h2 {
  margin: .4em .5em;
  display: inline-block;
  max-width: 80%;
  vertical-align: middle;
}

body.kids-site div.feature-group div.group-header div.group-header-icon {
  display: inline-block;
  background-image: url(/wordpress/wp-content/plugins/mint-kids/public/img/blue-arrow-small.png);
  background-repeat: no-repeat;
  background-position: center center;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

body.kids-site div.feature-group div.feature-group-content {
  width: 90%;
  margin: 0 auto;
  border-top: 3px solid #f1c934;
}

/* =============================================================================
   US Mint Kids Site Search Page Styles
   ========================================================================== */

body.kids-site div.pagination {
  margin-top: 15px;
}

body.kids-site div.pagination .page-numbers {
  margin: 0 7px;
}

body.kids-site div.pagination a.prev, body.kids-site div.pagination a.next {
  margin: 0;
}

body.kids-site .kids-search-next-page {
  transform: rotate(-90deg);
}

body.kids-site .kids-search-prev-page {
  transform: rotate(90deg);
}

body.kids-site  div.usmint-kids-search-result img.usmint-kids-search-thumbnail {
  display: none;
}

@media only screen and (max-width: 768px){

  .desktop-screen{
    display: none;
  }
}

/*
Fix for Menu hamburger button
*/

@media only screen and (max-width: 924px){
  body.kids-site #show-kids-menu {
    margin: 50px 0px 0px 0px;
  }
  body.logged-in.kids-site #show-kids-menu {
    margin: 82px 0px 0px 0px;
  }
}

@media only screen and (max-width: 768px){
  body.kids-site #show-kids-menu {
    margin: 23px 0px 0px 0px;
  }
  body.logged-in.kids-site #show-kids-menu {
    margin: 68px 0px 0px 0px;
  }
}

@media only screen and (max-width: 639px){
  body.kids-site #show-kids-menu {
    margin: 41px 0px;
  }
  body.logged-in.kids-site #show-kids-menu {
    margin: 86px 0px 0px 0px;
  }
}
/*
Fix for secondary nav showing and shouldn't be there.
*/

body.kids-site .nav-ribbon-menu {
  display: none !important;
}

/* =============================================================================
   US Mint Kids Site Print Styles
   ========================================================================== */

@media only print {
  @page {
    margin: 1.5cm;
  }

  #header-container {
    display: none;
  }

  /* When printing, include the Kids Site logo in the header (even if the browser doesn't print images. */
  #kids-print-header {
    display: list-item;
    list-style-image: url(/wordpress/wp-content/plugins/mint-kids/public/img/kids-logo-small.png);
    list-style-position: inside;
    width: 91px;
    height: 96px;
    margin: 0 auto;
  }

  #widget-sidebar {
    display: none;
  }

  footer #kids-footer-content {
    display: none;
  }

  footer#kids-legal-footer {
    display: none;
  }

  .no-print {
    display: none !important;
  }

  .print-only-block {
    display: block !important;
  }

  .long-block {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Make Feature Groups appear like they do on the desktop site when printing. */
  body.kids-site div.feature-group div.group-header {
    text-align: left;
    border-top: none;
  }

  body.kids-site div.feature-group div.group-header h2 {
    margin: 0;
  }

  body.kids-site div.feature-group div.feature-group-content {
    width: 100%;
    box-sizing: border-box;
    border-top: none;
    padding: .6em;
  }

  /* Make Coins & Medals appear like they do on the desktop site when printing. */
  body.kids-site #coin-container {
    overflow: hidden;
  }

  body.kids-site .kids-coin h1 {
    text-align: left;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  body.kids-site #coin-full {
     width: 100%;
  }

  body.kids-site #coin-left {
    width: 70%;
    float: left;
  }

  body.kids-site #coin-right {
    display: block;
    width: 24%;
    float: right;
  }

  body.kids-site #coin-image-one, body.kids-site #coin-image-two {
    text-align: center;
  }

  body.kids-site #coin-image-one img, body.kids-site #coin-image-two img {
    width: 160px;
  }

  body.kids-site #coin-image-one {
    margin-top: 60px;
  }

  body.kids-site #coin-image-two {
    margin-top: 40px;
  }

  body.kids-site #mobile-coin-image-slider {
    display: none;
  }

  body.kids-site .coin-caption {
    width: 160px;
  }

  #coin-lesson-plans a[href]:after {
    content: " (" attr(href) ")";
  }

}