/* Themes
 *
 * Seasonal / Holdiay Themes
 * trigger with query string theme=<season>
 * ex; ?theme=july-4th
 */
@media (max-width: 1024px) {
  #topImg {
    display: none !important;
  }
}
/* Default - no theme */
body.default {
  background: url("../static/themes/july-4th/star-pattern.png") repeat left top #363896;
}
body.default #coastline.wide.flexible #topImg.default {
  max-height: 140px;
  margin-left: 75px;
}
body.anniversary25 {
  background: url("../static/themes/new-year/star-pattern.png") repeat left top #363896;
}
body.anniversary25 #coastline.wide.flexible #topImg.anniversary25 {
  margin-left: 8px;
}
/* July 4th */
body.july-4th {
  background: url("../static/themes/july-4th/star-pattern.png") repeat left top #363896;
}
/* Winter */
body.winter {
  background: url("../static/themes/winter/snowflake_pattern.png") repeat center top #363896;
}
/* Spring */
body.spring {
  background: url("../static/themes/spring/spring-pattern.png") repeat center top #cb9ac6;
}
body.spring #coastline.wide.flexible #topImg.spring {
  margin-left: 75px;
}
/* Fall */
body.fall {
  background: url("../static/themes/fall/fall-pattern.png") repeat center top #f37821;
}
/* Back to School */
body.back-to-school {
  background: url("../static/themes/back-to-school/BTSPattern.png") repeat center top #a1363e;
}
body.back-to-school #coastline.wide.flexible #topImg.back-to-school {
  margin-left: 75px;
}
/* Summer */
body.summer {
  background: url("../static/themes/summer/summer-pattern.png") repeat center top #50c3c4;
}
/* Thanksgiving */
body.thanksgiving {
  background: url("../static/themes/thanksgiving/thanksgiving-pattern.png") repeat left top #a1363e;
}
/* Valentines */
body.valentines {
  background: url("../static/themes/valentines/heart_pattern.png") repeat center top #ef6596;
}
body.valentines #coastline.wide.flexible #topImg.valentines {
  margin-left: 75px;
}
/* halloween */
body.halloween {
  background: url("../static/themes/halloween/halloweenPattern.png") repeat center center;
}
body.halloween #coastline.wide.flexible #topImg.halloween {
  margin-left: 75px;
}
/* New Years */
body.new-year {
  background: url("../static/themes/new-year/star-pattern.png") repeat left top #363896;
}
body.new-year #coastline.wide.flexible #topImg.new-year {
  margin-left: 75px;
}
body.new-year #coastline.wide.flexible #topImg.new-year .theme-image {
  max-height: 140px;
}
/********               INDEX - ALT CONTENT TOP NAV                 *********/
.home #content {
  padding: 0;
}
body.mobile .gameHighlight li.flash {
  display: none !important;
}
#coastline.wide.flexible .beingafriend .gameHighlight a {
  border-radius: 10px;
  border: 4px solid white;
  background: white;
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 20px;
  color: #305b83;
}
#coastline.wide.flexible .beingafriend .gameHighlight a span {
  padding: 10px;
  display: block;
}
#coastline.wide.flexible .beingafriend .gameHighlight a:hover {
  text-decoration: none;
}
#coastline.wide.flexible #homeHighlight, #coastline.wide.flexible .gameHighlight {
  width: 100%;
  overflow: auto;
}
#coastline.wide.flexible #homeHighlight a, #coastline.wide.flexible .gameHighlight a {
  display: inline-block;
  position: relative;
  top: 0;
}
#coastline.wide.flexible #homeHighlight a:hover, #coastline.wide.flexible .gameHighlight a:hover {
  top: -5px;
}
#coastline.wide.flexible #homeHighlight li.big-highlight:nth-child(3) {
  clear: both;
}
#coastline.wide.flexible .big-highlight, #coastline.wide.flexible .sm-highlight {
  margin: 1% auto;
  text-align: center;
  width: 98%;
}
#coastline.wide.flexible #homeHighlight li img, #coastline.wide.flexible .gameHighlight li a img {
  width: 98%;
}
#coastline.wide.flexible #homeHighlight li a img, #coastline.wide.flexible .gameHighlight li a img, #coastline.wide.flexible .beingafriend .gameHighlight li img {
  border-radius: 10px 10px 0 0;
  border: none;
  width: 100%;
}
/********               INDEX - MINOR HIGHLIGHTS                *********/
#minor-hilights {
  background: url('../static/minor_highlights/left_rounded.png') no-repeat top left;
  /*overflow:auto;*/
  height: 266px;
  padding: 0 0 0 11px;
}
#callouts-games, #callouts-print, #callouts-videos {
  padding: 0;
  margin: 0 10px 0 0;
  /*overflow:hidden;*/
  position: relative;
  float: left;
}
#callouts-games {
  width: 291px;
}
#callouts-print {
  width: 295px;
}
#callouts-videos {
  width: 295px;
}
#callouts-print .hilight-tag {
  width: 86px;
}
#callouts-videos .hilight-tag {
  width: 86px;
}
.callout-images {
  left: 1px;
}
.hilight-tag {
  float: left;
  margin: 9px 0 0;
  display: inline-block;
  overflow: hidden;
  width: 83px;
  height: 0;
  padding: 68px 0 0;
}
#tagGames {
  background: url('../static/minor_highlights/tag_games.gif') top left no-repeat;
}
#tagPrints {
  background: url('../static/minor_highlights/tag_print.gif') top left no-repeat;
}
#tagVideos {
  background: url('../static/minor_highlights/tag_videos.gif') top left no-repeat;
}
#minor-hilights ul {
  position: relative;
  left: 0;
}
#minor-hilights li {
  float: left;
  list-style: none;
}
#minor-hilights .prev, #minor-hilights .next {
  display: block;
  width: 34px;
  height: 0;
  overflow: hidden;
  padding: 43px 0 0;
  background: url('../static/minor_highlights/arrows.gif') left top no-repeat;
  margin: 117px 0 0 0;
  position: absolute;
  top: 0;
  cursor: pointer;
}
#minor-hilights .next {
  background-position: -102px 0;
  right: 0;
}
#minor-hilights .prev {
  left: 50px;
}
#minor-hilights .prev:hover, #minor-hilights .prev.on {
  background-position: -34px 0;
}
#minor-hilights .next:hover, #minor-hilights .next.on {
  background-position: -136px 0;
}
#minor-hilights .prev:active {
  background-position: -68px 0;
}
#minor-hilights .next:active {
  background-position: -170px 0;
}
/********               INDEX - CHARACTER HIGHLIGHTS                *********/
#character-hilights {
  overflow: auto;
  padding: 5px 0 10px 10px;
}
#character-hilights li {
  float: left;
  margin: 0 0 0 2px;
}
#character-hilights a {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 69px 0 0;
}
#char-sue a {
  width: 69px;
  background: url('../static/char_highlights/icon_sue.gif') left top no-repeat;
}
#char-muffy a {
  width: 59px;
  background: url('../static/char_highlights/icon_muffy.gif') left top no-repeat;
}
#char-buster a {
  width: 68px;
  background: url('../static/char_highlights/icon_buster.gif') left top no-repeat;
}
#char-prunella a {
  width: 66px;
  background: url('../static/char_highlights/icon_prunella.gif') left top no-repeat;
}
#char-brain a {
  width: 64px;
  background: url('../static/char_highlights/icon_brain.gif') left top no-repeat;
}
#char-kate a {
  width: 64px;
  background: url('../static/char_highlights/icon_kate.gif') left top no-repeat;
}
#char-arthur a {
  width: 66px;
  background: url('../static/char_highlights/icon_arthur.gif') left top no-repeat;
}
#char-dw a {
  width: 65px;
  background: url('../static/char_highlights/icon_dw.gif') left top no-repeat;
}
#char-pal a {
  width: 65px;
  background: url('../static/char_highlights/icon_pal.gif') left top no-repeat;
}
#char-francine a {
  width: 65px;
  background: url('../static/char_highlights/icon_francine.gif') left top no-repeat;
}
#char-binky a {
  width: 65px;
  background: url('../static/char_highlights/icon_binky.gif') left top no-repeat;
}
#char-fern a {
  width: 65px;
  background: url('../static/char_highlights/icon_fern.gif') left top no-repeat;
}
#char-george a {
  width: 63px;
  background: url('../static/char_highlights/icon_george.gif') left top no-repeat;
}
#char-tibbles a {
  width: 64px;
  background: url('../static/char_highlights/icon_tibbles.gif') left top no-repeat;
}
#char-ladonna a {
  width: 66px;
  background: url('../static/char_highlights/icon_ladonna.gif') left top no-repeat;
}
#char-arthur a:hover, #char-prunella a:hover, #char-ladonna a:hover {
  background-position: -66px 0;
}
#char-sue a:hover {
  background-position: -69px 0;
}
#char-muffy a:hover {
  background-position: -59px 0;
}
#char-buster a:hover {
  background-position: -68px 0;
}
#char-brain a:hover, #char-kate a:hover, #char-tibbles a:hover {
  background-position: -64px 0;
}
#char-dw a:hover, #char-pal a:hover, #char-francine a:hover, #char-binky a:hover, #character-hilights #char-fern a:hover {
  background-position: -65px 0;
}
#char-george a:hover {
  background-position: -63px 0;
}
#appPromoUnicornApp {
  margin-top: 50px;
  text-align: center;
}
#appPromoUnicornApp img {
  border-style: none;
}
#parentTeacherContainer {
  background-color: #2f9fd1;
}
#parentTeacherContainer img {
  margin-top: 1px;
}
#descripHealthHub {
  float: right;
  font-family: 'Nunito', 'Trebuchet MS';
  color: #ffffff;
  width: 15em;
  font-size: 1em;
  leading: 1.1em;
  margin-left: 0px;
  margin-top: 5%;
  margin-right: 30px;
}
#weezieButton {
  background-color: #2f9fd1;
  text-align: center;
}
#weezieButton img {
  margin-left: 260px;
  margin-top: 10px;
}
@media screen and (min-width: 655px) {
  #coastline.wide.flexible {
    /*absolutely position pbs logo + hilight*/
  }
  #coastline.wide.flexible #home_logos {
    width: 345px;
    float: left;
  }
  #coastline.wide.flexible #pbsLogo {
    position: absolute;
    top: 10px;
    left: 8px;
    z-index: 3;
    margin: 0;
  }
  #coastline.wide.flexible #familyHealth {
    width: 35% !important;
  }
  #coastline.wide.flexible .nav-ruler.games {
    display: block;
  }
  #coastline.wide.flexible #homeHighlight, #coastline.wide.flexible .gameHighlight {
    width: 95%;
    margin: 0 auto;
    overflow: auto;
    padding: 2% 0;
  }
  #coastline.wide.flexible #homeHighlight li, #coastline.wide.flexible .gameHighlight li {
    float: left;
    margin: 1.1%;
  }
  #coastline.wide.flexible #homeHighlight li img, #coastline.wide.flexible .gameHighlight li img, #coastline.wide.flexible .beingafriend .gameHighlight li.title p {
    width: 98%;
  }
  #coastline.wide.flexible .is-mobile .gameHighlight .big-highlight.only {
    margin: 1.2% auto;
    float: none;
  }
  #coastline.wide.flexible .big-highlight {
    width: 47.6%;
  }
  #coastline.wide.flexible .sm-highlight {
    width: 46.9%;
  }
  #coastline.wide.flexible .top-game-highlight {
    background: url('../static/games/games_pattern_tile.png') top left repeat;
  }
}
@media screen and (min-width: 960px) {
  #coastline.wide.flexible .nav-icon {
    display: inline;
    padding: 7px 0 0 12px;
  }
  #coastline.wide.flexible .sm-highlight {
    width: 30.9%;
  }
  #coastline.wide.flexible .beingafriend .sm-highlight {
    width: 29.9%;
  }
}
@media screen and (min-width: 1200px) {
  #coastline.wide.flexible {
    width: 1200px;
    background: url('../static/side_border_wide.png') top left repeat-y;
    padding: 0 6px;
    /*absolutely position pbs logo + hilight*/
    /*#main-hilight { position:absolute; top:9px; left:56px;  z-index:2; }
            #main-char-hilight { position:relative; z-index:1; margin:7px 0 0 0; }*/
  }
  #coastline.wide.flexible .nav-icon {
    padding: 7px 0 0 6px;
  }
  #coastline.wide.flexible #content {
    padding: 0 0 1px 0;
  }
  #coastline.wide.flexible #siteNavBar li {
    width: 16.5%;
  }
  #coastline.wide.flexible #home_logos {
    width: 345px;
    float: left;
  }
  #coastline.wide.flexible #pbsLogo {
    position: absolute;
    top: 10px;
    left: 8px;
    z-index: 3;
    margin: 0;
  }
  #coastline.wide.flexible #homeHighlight {
    width: 84%;
  }
  #coastline.wide.flexible .gameHighlight {
    width: 93%;
  }
  #coastline.wide.flexible #homeHighlight li, #coastline.wide.flexible .gameHighlight li {
    float: left;
    margin: 1.2%;
  }
  #coastline.wide.flexible #homeHighlight li img, #coastline.wide.flexible .gameHighlight li img {
    width: 98%;
  }
  #coastline.wide.flexible .big-highlight {
    width: 47.6%;
  }
  #coastline.wide.flexible .sm-highlight, #coastline.wide.flexible .beingafriend .gameHighlight .sm-highlight {
    width: 30.9%;
  }
  #coastline.wide.flexible .gameHighlight .sm-highlight {
    width: 22.6%;
  }
  #coastline.wide.flexible #footer #fundersImg {
    float: left;
    width: 34%;
    padding: 20px 0 0 0;
    text-align: left;
  }
  #coastline.wide.flexible #footer #footerContainer {
    clear: both;
  }
}