
<!DOCTYPE HTML>
<html>
    <head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="cmp-role" content="everyone">
<meta name="cmp-magazine" content="upfront">
<meta name="keywords">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" type="image/vnd.microsoft.icon" href="/etc/designs/scholastic/kids/favicon.ico">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/etc/designs/scholastic/kids/favicon.ico">


    
    
	    <link rel="canonical" href="http://www.scholastic.com/kids/news/"/>
    


    
    
    
        <meta name="description" content="Read breaking news for kids from Scholastic’s online blogs and magazines, Ink Splot 26, Scholastic News Online, and Kids Press Corps.">
    
    	<meta name="cq:page" content="news"/>
    	<meta name="pagePath" content="/content/kids/en/news"/>
    	
    	<meta name="pageType" content="categorylanding"/>
    	
        
        
        
        
        
        
        
        
        
        
        
        
        <meta name="robots" content="index, follow"/>
        
        

<!-- CCK-6491 Suppress Custom Impression-->
<!-- <sly data-sly-use.impressionUse="com.scholastic.kids.controllers.ImpressionControl"></sly> -->

<!-- kids analytics header script -->
<script> 
  (function() {
    var channel = 'kidscontent';
    document.write("<scr" + "ipt id='schheadtag' src='//ltm.scholastic.com/ltm/headtag/" + document.location.hostname + "/" + channel + "'></scr" + "ipt>"); 
  }());
</script>


<!-- kids App Dynamics header script -->

<script src="/etc/designs/scholastic/kids/clientlibs/core/scripts/adrum.js"/>
<script type="text/javascript">
    window['adrum-start-time']= new Date().getTime();
</script>

<!--css libs-->

    
    
<link rel="stylesheet" href="/etc/designs/scholastic/kids/clientlibs/core.min.css" type="text/css">



    
    



    













<title>News for Kids (Arts, Sports &amp; Recreation, Pop Culture, Math &amp; Science, Animals, Technology, Health &amp; Body, History &amp; World Events, Holidays)</title></head>
    <body class="sticky_footer"><div id="sticky_section">
</div>

<div class="angular-app" ng-app="scholasticKids">
  <div class="main-container" ng-controller="MainCtrl">
        <div class="navbar-row">
      <div class="navbar-cell">
        <div class="topbar-nav">
          <nav ng-controller="NavbarCtrl" class="navbar" role="navigation">
  <div class="navbar-header">
    <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" navicon-toggle="menu">
      <span class="navbar-text">Menu</span>
      <span class="icon-container">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </span>
    </button>
    <a ng-click="search()" class="nav-link-primary icon-text hidden-md hidden-lg search-btn" target="_self">
      <span class="icon-search"></span>
    </a>
    <div class="center mobile-logo">
      <a href="http://www.scholastic.com/home/" class="logo-height">
        <!-- removed as part of CCK-7488 to use single image for 320~759 and 760~959 breakpoints -->
        <!-- <img src="/content/dam/scholastic/kids/image/logo/logo.320.759.png" alt="Logo" class="img-sch-logo visible-xs-inline-block"/> -->
        <img src="/content/dam/scholastic/kids/image/logo/logo.760.959.png" alt="Logo" class="img-sch-logo"/>
      </a>
    </div>
  </div>
  <div ng-if="!$parent.loggedIn" class="access-bar hidden">
    <div class="pull-left"><a class="nav-link-secondary" href="#" ng-click="logIn()" rel="nofollow">Sign In</a></div>
    <div class="pull-right"><a class="nav-link-secondary" href="#" ng-click="signUp()" rel="nofollow">Register</a></div>
  </div>
  <!-- Disabling Stricker Drawer Button as part of CCK-7141
  <div  id="sticker-drawer-button"  sticker-drawer="stickers"  data-ng-click="desktopSideBar()" class="peel-close sticker-peel-animation">
    <div class="up-shadow">
      <div class="top-arc"></div>
      <div class="bottom-arc"></div>
    </div>
    <div class="sticker-animate-cntr">
      <div class="bend-shadow"></div>
      <div class="sticker-open">
        <div class="sticker-text">Stickers</div>
      </div>
      <div class="sticker-close">
        <div class="sticker-text close-text">Close</div>
      </div>
    </div>
  </div>
  -->
</nav>
        </div>
      </div>
    </div>
    <!--sticker drawer goes here-->
    <!-- Disabling Stricker Drawer as part of CCK-7141
    <div data-sly-include="templates/sticker-drawer.html" data-sly-unwrap></div> 
    -->
    <!--sticker drawer goes here-->
    <div class="main-row">
      <div class="main-cell">
        <div class="content-container">
          <div class="sidebar-nav sidebar-collapse collapse width" id="navbar-collapse-1">
            <nav ng-controller="SidebarCtrl" class="navbar">
  <div>

    <a class="logo" href="http://www.scholastic.com/home/">
      <img src="/content/dam/scholastic/kids/global/SCH_KIDS_Nav-RBL-EC1D25.png" alt="Logo"/>
    </a>
    <div class="navbar-menu" ng-cloak>
      <ul ng-if="!$parent.loggedIn" class="nav navbar-nav fixed-nav hidden-xs hidden-sm">
        <li><span></span><a class="nav-link-primary selected" ng-click="signUp()" rel="nofollow">Register</a></li>
        <li><span></span><a class="nav-link-secondary" ng-click="logIn()" rel="nofollow">Sign In</a></li>
      </ul>

      <ul ng-if="$parent.loggedIn" class="nav navbar-nav fixed-nav">
        <li ng-if="$parent.hasAvatar">
          <a id="sidebar-avatar" class="myavatar noavatar" ng-click="avatar()">
            <img class="avatar-ie" ng-if="$parent.avatarIE" ng-src="{{$parent.avatarIE}}">
            <img class="avatar-image-container" ng-class="{'ie-compatible': $parent.avatarIE}" alt="avatar" ng-src="{{$parent.avatarData}}"/>
          </a>
        </li>
        <li ng-if="!$parent.hasAvatar">
          <a id="sidebar-avatar" class="myavatar noavatar" ng-click="avatar()">
            <img class="default-avatar" src="/etc/designs/scholastic/kids/clientlibs/core/images/avatar/default.svg">
          </a>
        </li>
        <li><span></span><a class="nav-link-secondary" href="/kids/me-page.html">See My Page</a></li>
      </ul>

      <!-- Disabling Stricker Drawer Button as part of CCK-7141
      <div  id="sticker-drawer-button"  sticker-drawer="stickers"  data-ng-click="desktopSideBar()" class="peel-close sticker-peel-animation  hidden-xs hidden-sm">
        <div class="up-shadow">
          <div class="top-arc"></div>
          <div class="bottom-arc"></div>
        </div>
        <div class="sticker-animate-cntr">
          <div class="bend-shadow"></div>
          <div class="sticker-open">
            <div class="sticker-text">Stickers</div>
          </div>
          <div class="sticker-close">
            <div class="sticker-text close-text">Close</div>
          </div>
        </div>
      </div>
      -->

      <ul class="nav navbar-nav navbar-border nav-block">
        <li>
          <span></span>
          <a class="nav-link-primary " href="/kids/home.html">
            <span>
              <pre>Home</pre>
            </span>
            
          </a>
        </li>
      
        <li>
          <span></span>
          <a class="nav-link-primary " href="/kids/books.html">
            <span>
              <pre>Books</pre>
            </span>
            
          </a>
        </li>
      
        <li>
          <span></span>
          <a class="nav-link-primary " href="/kids/games.html">
            <span>
              <pre>Games</pre>
            </span>
            
          </a>
        </li>
      
        <li>
          <span></span>
          <a class="nav-link-primary " href="/kids/videos.html">
            <span>
              <pre>Videos</pre>
            </span>
            
          </a>
        </li>
      
        <li>
          <span></span>
          <a class="nav-link-primary " href="/kids/community.html">
            <span>
              <pre>Community</pre>
            </span>
            
          </a>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-border">
        <li>
          <span></span>
          <a ng-click="search()" class="nav-link-primary icon-text">
            <span class="icon-search"></span>
            <span>
              <pre class="text-inline">Search</pre>
            </span>
          </a>
        </li>
        <li ng-if="$parent.loggedIn"><a class="nav-link-secondary logoutbtn no-auth" ng-click="logOut()">Sign Out</a></li>
      </ul>
      <div style="clear:both"></div>
    </div>
    <a class="logo-mobile" href="http://www.scholastic.com/home/">
      <img src="/content/dam/scholastic/kids/global/SCH_KIDS_Nav-RBL-EC1D25.png" alt="Logo"/>
    </a>
  </div>
</nav>

          </div>
    
    <div class="main-content">
      <div class="main-page container-fluid">
        <!-- modals -->
        
<div ng-controller="LoginCtrl as lctrl" class="bg0 row md-modal login-modal" custom-modal="login-modal">
  <div class="col-md-12 top-bar table-container-full">
    <div class="table-row">
      <div class="table-cell text-left"><a class="text-link privacy-policy-link" ng-href="{{privacyPolicyLink}}" target="_blank">Privacy Policy</a></div>
      <div class="table-cell text-right"><a class="close-lnk" href="#" ng-click="lctrl.closeModal($event)"><i class="icon-close"></i></a></div>
    </div>
  </div>
  <div class="col-md-12 login-form-container">
    <div class="form-title">
      <p class="title no-upper-title strong1">Sign In</p>
    </div>
    <div class="small-form center-block">
      <form id="formid" class="signup-form" method="post">
        <div class="form-group">
          <input id="login-username" class="input-field" name="username" placeholder="Username" type="text" ng-model="lctrl.form.username" focus-me="showlogin"/>
        </div>
        <div class="form-group">
          <input id="login-password" class="input-field" name="password" placeholder="Password" type="password" ng-model="lctrl.form.password">
        </div>
        <div class="form-group">
          <div class="table-container-full">
            <div class="table-row">
              <!-- This feature will be enabled for phase-II release -->
              <!-- <div class="table-cell text-left padding-right" id="keep-me-logged" element-id="keep-me-logged" position="left" content="If you stay logged in, your account may be visible to others using this computer." error-tooltip>
                <label class="checkbox">
                  <input name="rememberme" type="checkbox" value="">
                  <span class="cr-control">
                    <span class="cr"><i class="cr-icon icon-check"></i></span>
                  </span>
                  <span class="cr-text">Keep me logged in</span>
                </label>
              </div> -->
              <div class="table-cell text-right padding-left forgot-password-container">
                <a class="forgot-password" ng-click="lctrl.resetPassword()">Forgot Password?</a>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group text-center">
          <button class="center-block cta-primary" name="login" ng-click="lctrl.login()" ng-disabled="lctrl.dataloading">
            <div class="loading-spinner" ng-show="lctrl.dataloading"></div>Sign In
          </button>
          <input class="submit-hide" type="submit" ng-disabled="lctrl.dataloading"/>
        </div>
      </form>
      <form class="signup-form small-form center-block" method="post">
        <h4 class="createaccount-title">Don't have an account?</h4>
        <div class="form-group text-center">
          <input class="center-block cta-primary" name="signup" type="button" value="Register Now" ng-click="lctrl.signUp()"/>
        </div>
      </form>
    </div>
  </div>
  <img src="/etc/designs/scholastic/kids/clientlibs/core/images/Charac-01.png" class="character-left hidden-xs" alt="A character"/>
</div>


<div ng-controller="LoginForgotCtrl as lfctrl" class="bg0 row md-modal resetpass-modal" custom-modal="resetpass-modal">
  <!-- step 1 -->
  <div ng-if="lfctrl.step == 1">
    <div class="col-md-12 top-bar table-container-full">
  <div class="table-row">
    <div class="table-cell text-left"><a class="text-link privacy-policy-link" ng-href="{{privacyPolicyLink}}" target="_blank">Privacy Policy</a></div>
    <div class="table-cell text-right"><a class="close-lnk" href="#" ng-click="lfctrl.closeModal()"><i class="icon-close"></i></a></div>
  </div>
</div>
<div class="col-md-12">
  <div class="form-title">
    <p class="title no-upper-title strong1">{{lfctrl.headTitleStep1}}</p>
    <h4 class="text-center">{{lfctrl.headCopyStep1}}</h4>
  </div>
  <form class="signup-form small-form center-block" method="post">
    <div class="form-group text-center">
      <input id="login-email" class="input-field" name="login-email" placeholder="Email" type="text" ng-model="lfctrl.form.loginEmail" focus-me="showlogin"/>
    </div>
    <div class="form-group text-center">
      <button class="center-block cta-primary" ng-click="lfctrl.resetUserPass()" ng-disabled="lfctrl.dataloading">
        <div class="loading-spinner" ng-show="lfctrl.dataloading"></div>Reset Password
      </button>
      <input class="submit-hide" type="submit" ng-disabled="lfctrl.dataloading"/>
    </div>
  </form>
</div>
<img src="/content/dam/scholastic/kids/styles/images/Charac-01.png" class="character-right hidden-xs" alt="A character">
  </div>
  <!-- step 2 -->
  <div ng-if="lfctrl.step == 2">
    <div class="col-md-12 top-bar table-container-full">
  <div class="table-row">
    <div class="table-cell text-left"><a class="text-link privacy-policy-link" ng-href="{{privacyPolicyLink}}" target="_blank">Privacy Policy</a></div>
    <div class="table-cell text-right"><a class="close-lnk" href="#" ng-click="lfctrl.closeModal()"><i class="icon-close"></i></a></div>
  </div>
</div>
<div class="col-md-12">
  <div class="form-title">
    <p class="title no-upper-title strong1">An Email Is Headed<br/>Your Way</p>
  </div>
  <div class="text-center">
    <h4 class="forgot-confirmation ">
      We've sent a message<br/>
      <!--commented for MVP <span id="email-sent" class="forgot-to-email">{{lfctrl.loginEmail}}</span><br/> -->
      so you can pick a new password.
    </h4>
  </div>
  <div class="signup-form small-form center-block">
    <h4 class="createaccount-title">Didn't get the email?</h4>
    <div class="form-group text-center">
      <button id="email-sent" class="cta-primary text-center" ng-click="lfctrl.resendEmail()" ng-disabled="lfctrl.dataloading">
        <div class="loading-spinner" ng-show="lfctrl.dataloading"></div>Send Again
      </button>
      <input class="submit-hide" type="submit" ng-disabled="lfctrl.dataloading"/>
    </div>
  </div>
</div>
<img src="/content/dam/scholastic/kids/styles/images/Charac-01.png" class="character-right hidden-xs" alt="A character">
  </div>
  <!-- step 3 -->
  <div ng-if="lfctrl.step == 3">
    <div class="col-md-12 top-bar table-container-full">
  <div class="table-row">
    <div class="table-cell text-left"><a class="text-link privacy-policy-link" ng-href="{{privacyPolicyLink}}" target="_blank">Privacy Policy</a></div>
    <div class="table-cell text-right"><a class="close-lnk" href="#" ng-click="lfctrl.closeModal()"><i class="icon-close"></i></a></div>
  </div>
</div>
<div class="col-md-12">
  <div class="form-title">
    <p class="title no-upper-title strong1">Reset Your Password</p>
    <h4 class="text-center">Think of a password that is at least 6 characters long.</h4>
  </div>
  <div>
    <form id="resetpasswordform" class="signup-form small-form center-block" method="post">
      <div class="form-group">
        <input id="new-password" class="input-field" name="new-password" placeholder="Create Password" type="password" ng-model="lfctrl.form.newpassword" focus-me="showlogin"/>
      </div>
      <div class="form-group">
        <input id="new-password-two" class="input-field" name="password" placeholder="Confirm Password" type="password" ng-model="lfctrl.form.newpasswordtwo">
      </div>
      <div class="form-group text-center">
        <button class="center-block cta-primary" ng-click="lfctrl.changePassword()" ng-disabled="lfctrl.dataloading">
          <div class="loading-spinner" ng-show="lfctrl.dataloading"></div>Change Password
        </button>
        <input class="submit-hide" type="submit" ng-disabled="lfctrl.dataloading"/>
      </div>
    </form>
  </div>
</div>
<img src="/content/dam/scholastic/kids/styles/images/Charac-01.png" class="character-right hidden-xs" alt="A character">
  </div>
  <!-- step 4 -->
  <div ng-if="lfctrl.step == 4">
    <div class="col-md-12 top-bar table-container-full">
  <div class="table-row">
    <div class="table-cell text-left"><a class="text-link privacy-policy-link" ng-href="{{privacyPolicyLink}}" target="_blank">Privacy Policy</a></div>
    <div class="table-cell text-right"><a class="close-lnk" href="#" ng-click="lfctrl.closeModal()"><i class="icon-close"></i></a></div>
  </div>
</div>
<div class="form-title">
  <p class="title no-upper-title strong1">Success! You now have a new password.</p>
  <h4 class="text-center">Please be sure to memorize it or write it in a safe place.</h4>
</div>
<div>
  <form>
    <div class="form-group text-center">
      <button class="center-block cta-primary" id="go-to-me-page" ng-click="lfctrl.goToMyAccount()">
        Go To Your Account
      </button>
    </div>
  </form>
</div>
<img src="/content/dam/scholastic/kids/styles/images/Charac-01.png" class="character-right hidden-xs" alt="A character">
  </div>
  ﻿<div ng-controller="WaitFormCtrl" id="lf-wait-screen" class="overlay md-modal md-effect-fade">
  <div class="col-md-12">
    <div class="form-title">
      <p class="title no-upper-title strong1">Wait!</p>
      <h4 class="sub-title">Are you sure you want to exit?<br/>Your password will not be reset!</h4>
    </div>
    <form class="signup-form medium-form center-block" method="post" ng-submit="lfctrl.continueModal()">
      <div class="form-group text-center">
        <input class="center-block cta-primary" name="next" type="submit" value="Finish Now"/>
      </div>
    </form>
    <div class="bottom-link no-margin">
      <a class="cta" href="#" ng-click="lfctrl.closeModal()">I'll reset password later</a>
    </div>
  </div>
  <img src="/etc/designs/scholastic/kids/clientlibs/core/images/Charac-04.png" class="character-left hidden-xs" alt="A character"/>
</div>
  <!-- TODO: the folling html code will be removed when IDAM service are ready -->
  <div class="text-center">
    <span>{{lfctrl.notice}}</span>
  </div>
</div>

<div ng-controller="SignupCtrl" class="slick-row row md-modal" custom-modal="signup-modal">
  <slick vertical="true" settings="slickConfig" slides-to-show="1" accessibility="false" arrows="false" draggable="false" infinite="false" adaptive-height="false" init-onload="true" vertical-swiping="false" touch-move="false" swipe="false">
    <div class="bg1 slick-item" id="step1-form" style="display:none">
      <div ng-controller="Step1FormCtrl">
  <div class="col-md-12 top-bar table-container-full">
    <div class="table-row">
      <div class="table-cell text-left"><a class="text-link privacy-policy-link" ng-href="{{privacyPolicyLink}}" target="_blank">Privacy Policy</a></div>
      <div class="table-cell text-right"><a class="close-lnk" href="#" ng-click="closeModal()"><i class="icon-close"></i></a></div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="form-title">
      <div class="upper-title hidden-xs">REGISTER</div>
      <p class="title strong1">Step 1</p>
      <div class="sub-title">Create a username by filling in the sentences.</div>
    </div>
    <form class="signup-form text-center" method="post" novalidate="">
      <div class="form-group">
        <h3 class="step-text">My favorite</h3>
        <select id="step1-favorite" name="favorite" ng-model="form.favorite" title="Choose a Category" class="drop-down selectpicker" selectpicker="" data-size="5" ng-options="value.label for value in favoriteKeys" ng-required="true">
          <option value="" data-hidden="true"></option>
        </select>
        <h3 class="step-text">is</h3>
        <div class="loading-container" ng-show="favoriteLoading">
          <div class="loading-spinner"></div>
        </div>
        <select id="step1-fav-thing" name="favThing" ng-model="form.favThing" title="Choose a Word" class="drop-down selectpicker" ng-disabled="!favoriteValues.length || favoriteLoading" selectpicker="" data-size="5" ng-options="value.label for value in favoriteValues" ng-required="true">
          <option value="" data-hidden="true"></option>
        </select>
        <h3 class="step-text hidden-xs">.</h3>
      </div>
      <div class="form-group">
        <h3 class="step-text">The coolest</h3>
        <select id="step1-see" name="see" ng-model="form.see" title="Choose a Category" class="drop-down selectpicker" selectpicker="" data-size="5" ng-options="value.label for value in seeKeys" ng-required="true" required>
          <option value="" data-hidden="true"></option>
        </select>
        <h3 class="step-text">is</h3>
        <div class="loading-container" ng-show="seeLoading">
          <div class="loading-spinner"></div>
        </div>
        <select id="step1-think" name="think" ng-model="form.think" title="Choose a Word" class="drop-down selectpicker" ng-disabled="!seeValues.length || seeLoading" selectpicker="" data-size="5" ng-options="value.label for value in seeValues" ng-required="true" required>
          <option value="" data-hidden="true"></option>
        </select>
        <h3 class="step-text hidden-xs">.</h3>
      </div>
      <div class="form-group">
        <div class="spin-table">
          <div class="spin-row">
            <div class="spin-cell text-right">
              <span class="spin-text hidden-xs">Press start to select the next number: </span>
              <span class="spin-text hidden-sm hidden-md hidden-lg">Select the next number: </span>
            </div>
            <div class="spin-cell text-center">
              <div class="spin-box" ng-class="{'no-hover': isSpinning || !(form.favThing && form.think)}" ng-click="makeRandom()">
                <span ng-if="!randomNum && !isSpinning">Spin me</span>
                <h2 class="loading-flip" ng-if="!randomNum && isSpinning">0</h2>
                <h2 id="spin-number" ng-if="randomNum">{{randomNum}}</h2>
              </div>
            </div>
            <div class="spin-cell text-left">
              <button id="step1-start" name="start" class="cta-secondary" ng-click="makeRandom()" ng-class="{'no-hover': isSpinning || !(form.favThing && form.think)}">start</button>
            </div>
          </div>
        </div>
        <h3 ng-if="!userName" class="custom-name center-block">Choose two words for your username.</h3>
        <h3 ng-if="userName" class="custom-name center-block">{{userName}}</h3>
      </div>
      <div class="form-group button-container">
        <input name="customUserName" type="hidden" ng-required="true"/>
        <button ng-show="randomNum" name="next" class="cta-primary center-block" ng-click="next()">next</button>
      </div>
    </form>
    <div class="bottom-link text-right">
      Already have an account? <a class="text-link" href="#" ng-click="logIn()">SIGN IN</a>
    </div>
  </div>
</div>
    </div>
    <div class="bg2 slick-item" id="step2-form" style="display:none">
      <div ng-controller="Step2FormCtrl">
  <div class="col-md-12 top-bar table-container-full">
    <div class="table-row">
      <div class="table-cell text-left"><a class="text-link privacy-policy-link" ng-href="{{privacyPolicyLink}}" target="_blank">Privacy Policy</a></div>
      <div class="table-cell text-right"><a class="close-lnk" href="#" ng-click="closeModal()"><i class="icon-close"></i></a></div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="form-title signup-form-title">
      <div class="upper-title hidden-xs">REGISTER</div>
      <p class="title strong1">Step 2</p>
      <div class="sub-title">Enter your (or your parent's) email address.</div>
    </div>
    <form name="step2Form" class="signup-form small-form center-block" method="post">
      <div class="form-group">
        <input id="step2-email" ng-model="form.email" name="email" class="input-field" placeholder="Email" type="email" ng-required="true"/>
      </div>
      <div class="form-group">
        <input id="step2-confirm-email" ng-model="form.confirmEmail" name="confirm-email" class="input-field" placeholder="Confirm Email" type="email" ng-required="true" compare-to="form.email"/>
      </div>
      <div>
        <div class="howisused"><a class="cta text-link" tabindex="-1" ng-href="{{privacyPolicyLink + HowItIsUsedHash}}" target="_blank">How will it be used?</a></div>
        <div class="password-requirements">Think of a password that is at least 6 characters long.</div>
      </div>
      <div class="form-group">
        <input id="step2-password" ng-model="form.password" name="password" class="input-field" placeholder="Create Password" tooltip-is-open="showPasswordTooltip" ng-focus="passwordFocussed()" ng-blur="passwordBlurred()" tooltip-trigger="none" type="password" ng-minlength="6" ng-required="true" tooltip-placement="right" uib-tooltip="Do not use your real name or any personal information."/>
      </div>
      <div class="form-group">
        <input id="step2-confirm-password" ng-model="form.confirmPassword" name="confirm-password" class="input-field" placeholder="Confirm Password" type="password" ng-minlength="6" ng-required="true" compare-to="form.password"/>
      </div>
      <div class="form-group text-center">
        <button ng-if="step2Form.$valid" class="cta-primary center-block" name="next" ng-click="register($event)" ng-disabled="isSubmitting">
          <div class="loading-spinner" ng-show="isSubmitting"></div>REGISTER!
        </button>
        <input ng-if="step2Form.$valid" class="submit-hide" type="submit" ng-click="register($event)" ng-disabled="isSubmitting"/>
      </div>
    </form>
    <div class="goback-link">
      <a class="cta" href="#" ng-click="prev()"><i class="icon-up"></i> Go back</a>
    </div>
  </div>
  <img src="/etc/designs/scholastic/kids/clientlibs/core/images/Charac-13.png" class="signup-character-img character-left hidden-xs" alt="A character"/>
</div>
    </div>
    <div class="bg5 slick-item" id="newsletter-form" style="display:none">
      <div ng-controller="NewsLetterFormCtrl">
  <div class="col-md-12 top-bar table-container-full">
    <div class="table-row">
      <div class="table-cell text-left"><a class="text-link privacy-policy-link" ng-href="{{privacyPolicyLink}}" target="_blank">Privacy Policy</a></div>
      <div class="table-cell text-right"><a class="close-lnk" href="#" ng-click="closeModal()"><i class="icon-close"></i></a></div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="form-title">
      <div class="upper-title hidden-xs">You are now registered!</div>
      <p class="title strong1">Sign Up for Free E-Newsletters</p>
      <div class="tip-text">(Optional)</div>
      <div data-ng-click="showOverlayPreviewSignUp('/content/dam/scholastic/kids/Newsletter/Newsletter_oct-10-14-16.png', '')" class="tip-text-content">Why sign up? <a class="black-anchor" href="#">Preview the latest newsletters here.</a></div>
    </div>
    <form name="newsletterForm" class="signup-form medium-form center-block" method="post" ng-submit="next()">
      <div id="newsLetterError" class="form-group">
        <h3 class="step-text hidden-xs">I am interested in</h3> 
        <select data-ng-change="optionsSelected()" id="newsletterSignUp" ng-model="newsLetterform.newsletters" name="newsletter" class="drop-down newsletter-signup-3rd-step-tag-names selectpicker done-button" selectpicker="" multiple="multiple" data-size="5" title="Choose Newsletters">
          
            <option value="001">Scholastic Kids Newsletter</option>
          
            <option value="002">Graphix Newsletter</option>
          
        </select>
        <h3 class="step-text hidden-xs">.</h3>
      </div>
      <div class="form-group">
        <input id="newsLetterChildEmail" ng-model="newsLetterform.email" name="newsLetterChildEmail" class="input-field" placeholder="Your Email" type="email" ng-required="true" data-ng-blur="validateFormNewsLetterSignUp($event)" data-ng-change="newsLetterform.showButtonSignUp = false"/>
      </div>
      <div class="form-group">
        <input id="newsLetterParentEmail" ng-model="newsLetterform.parentsEmail" name="newsLetterParentEmail" class="input-field" placeholder="Parent's Email" type="email" ng-required="true" data-ng-focus="validateFormNewsLetterSignUp($event)" data-ng-blur="validateFormNewsLetterSignUp($event)" data-ng-change="newsLetterform.showButtonSignUp = false"/>
      </div>
      <div class="form-group text-center">
        <input id="sign-up" ng-show="newsLetterform.showButtonSignUp" class="center-block cta-primary" name="signup" type="submit" value="sign up"/>
      </div>
    </form>
    <div class="nl-bottom-text">
      No thanks. I'll <a class="black-anchor" href="#" ng-click="closeModal()">browse the site</a><br/>or <a class="black-anchor" href="#" ng-click="showAvatar();">choose my avatar.</a>
    </div>
  </div>
  <img class="character-right hidden-xs"/>
</div>
    </div>
    <div class="bg5 slick-item" id="congrats-form" style="display:none">
      <div ng-controller="CongratsFormCtrl">
  <div class="col-md-12 top-bar table-container-full">
    <div class="table-row">
      <div class="table-cell text-left"><a class="text-link privacy-policy-link" ng-href="{{privacyPolicyLink}}" target="_blank">Privacy Policy</a></div>
      <div class="table-cell text-right"><a class="close-lnk" href="#" ng-click="closeModal()"><i class="icon-close"></i></a></div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="form-title">
      <div class="upper-title hidden-xs">Congrats!</div>
      <p class="title strong1">You're Signed up for {{newsletters}}</p>
      <h2 class="congrats-text">The next newsletter will arrive in your inbox within a few weeks.</h2>
    </div>
    <form class="signup-form text-center center-block form-inline" method="post">
      <div class="form-group">
        <button class="center-block cta-primary" name="pickavatar" ng-click="pickAvatar()">pick an avatar</button>
      </div>
      <div class="form-group">
        <button class="center-block cta-primary" name="browsesite" ng-click="closeModal()">browse site</button>
      </div>
    </form>
  </div>
  <img src="/etc/designs/scholastic/kids/clientlibs/core/images/Charac-06.png" class="character-right hidden-xs" alt="A character"/>
</div>
    </div>
  </slick>
  ﻿<div ng-controller="WaitFormCtrl" id="wait-screen" class="overlay md-modal md-effect-fade">
  <div class="col-md-12">
    <div class="form-title">
      <p class="title no-upper-title strong1">Wait!</p>
      <h4 class="sub-title">Are you sure you don't want to finish?<br/>You're almost done!</h4>
    </div>
    <form class="signup-form medium-form center-block" method="post" ng-submit="continueModal()">
      <div class="form-group text-center">
        <input class="center-block cta-primary" name="next" type="submit" value="Finish Now"/>
      </div>
    </form>
    <div class="bottom-link no-margin">
      <a class="cta" href="#" ng-click="closeModal()">I'll sign up later</a>
    </div>
  </div>
  <img src="/etc/designs/scholastic/kids/clientlibs/core/images/Charac-04.png" class="character-left hidden-xs" alt="A character"/>
</div>
</div>
<div ng-controller="SearchController" custom-modal="search-modal" class="row md-modal search_module search-modal">
  <div class="bg-category-color bg-drk-gray ui_dark">
    <div class="search_form sticky-menu" sticky sticky-show="{{!isModal}}" sticky-container=".search_module" sticky-auto-position="true">
  <div class="custom-popup-wrapper"></div>
  <form action="/kids/search-results.html" class="search-form typeahead_form_container">
    <div class="search_container search_topform">
      <div class="search_topbar">
        <a class="search_topbar--close-btn" href="#" ng-click="closeModal()"><span>Close</span></a>
        <div class="search_input">
          <label for="autocomplete-input" class="search_input--label">Search</label>
          <mlphinput ng-model="searchText" type="text" name="text" ng-enter="search()" placeholder="What are you looking for?" maxlength="80" class="search_input--input" id="autocomplete"></mlphinput>
        </div>
      </div>
    </div>
    <div class="search_suggestions" id="search-suggestions"></div>
  </form>
  <div ng-show="!isModal" class="fixed-sticky">
    <div ng-show="loading" class="search_category" ng-cloak>
      <div class="search_container search_status">Loading...</div>
    </div>
    <div ng-show="error" class="search_category" ng-cloak>
      <div class="search_container search_status">Error loading the service</div>
    </div>
    <div ng-show="success && !searchChanged" ng-cloak>
      <div class="search_category">
        <div class="left arrow">
          <a href="#" ng-click="setCategoryPosition('left')"><span class="icon-left"></span></a>
        </div>
        <div class="search_container">
          <ul>
            <li ng-repeat="prefilter in prefilterOptions" ng-class="{'search_category--selected':isCategory(prefilter)}">
              <a href="" class="search_category--item" ng-click="setPrefilter(prefilter)" ng-bind-html="prefilter.name"></a>
            </li>
          </ul>
        </div>
        <div class="right arrow">
          <a href="#" ng-click="setCategoryPosition('right')"><span class="icon-right"></span></a>
        </div>
      </div>
    </div>
  </div>
</div>
<div xdata-sly-use.searchUse="com.scholastic.kids.controllers.search.SearchUse">
  <script type="text/javascript">
    (function () {
      window.sch = window.sch || {};
      sch.kids = sch.kids || {};
      sch.kids.search = sch.kids.search || {};
      sch.kids.search.searchUrl = '/bin/scholastic/kids/search';
      sch.kids.search.filterUrl = '/bin/scholastic/kids/search';
    })();
  </script>
</div>
  </div>
</div>


<div ng-controller="AvatarCtrl" class="slick-row row md-modal avatar-modal" custom-modal="avatar-modal">
  <slick vertical="true" settings="slickConfig" slides-to-show="1" accessibility="false" arrows="false" draggable="false" infinite="false" adaptive-height="false" init-onload="true" vertical-swiping="false" touch-move="false" swipe="false">
    <div class="bg6 slick-item" id="avatar-select" style="display: none;">
      <div ng-controller="AvatarSelectCtrl" class="avatar-main">
  <div class="col-md-12 top-bar table-container-full">
    <div class="table-row">
      <div class="table-cell text-right"><a class="close-lnk" href="#" ng-click="closeModal()"><i class="icon-close"></i></a></div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="form-title">
      <p class="title no-upper-title strong1">Choose Your Avatar</p>
      <div class="sub-title">First, pick a character.</div>
    </div>
  </div>
  <div class="col-xs-12 col-lg-10 col-lg-offset-1">
    <div class="row avatar-selection">
      <div class="col-md-3 col-sm-3 col-xs-6" ng-repeat="avatar in avatarList">
        <div class="avatar-select" ng-class="{'selected': $index === selectedAvatar}" ng-click="selectAvatar($index);">
          <img class="avatar-border top" ng-src="{{getImageBorder('top', $index === selectedAvatar)}}"/>
          <img ng-src="{{avatar.url}}"/>
          <img class="avatar-overlay" ng-src="{{urlOverlay}}"/>
          <img class="avatar-border bottom" ng-src="{{getImageBorder('bottom', $index === selectedAvatar)}}"/>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-12 centered">
    <div class="form-group avatar-base-select button-container">
      <button ng-if="selectedAvatar !== -1" name="next" class="cta-primary center-block" ng-click="next()">next</button>
    </div>
  </div>
</div>
    </div>
    <div class="bg6 slick-item" id="avatar-costume" style="display: none;">
      <div ng-controller="AvatarCostumeCtrl" class="avatar-main avatar-costume">
  <div class="col-md-12 top-bar table-container-full">
    <div class="table-row">
      <div class="table-cell text-left">
        <div class="goback-link">
          <a class="cta" href="#" ng-click="prev()"><i class="icon-up"></i> Go back</a>
        </div>
      </div>
      <div class="table-cell text-right">
        <a class="close-lnk" href="#" ng-click="closeModal()"><i class="icon-close"></i></a>
      </div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="form-title">
      <p class="title no-upper-title strong1">Choose Your Avatar</p>
      <div class="sub-title">Now pick your costume!</div>
    </div>
  </div>
  <div class="col-md-12 avatar-costume-container">
    <slick class="avatar-costume-list" settings="costumesConfig" init-onload="true" ng-if="$parent.inCostumeSelection">
      <div ng-repeat="costume in costumeList">
        <div class="avatar-select" ng-class="{'selected': costume.id === selectedCostume}" ng-click="costumesConfig.method.slickGoTo(costume.id);">
          <div class="avatar-image-container">
            <img class="avatar-border top" ng-src="{{getImageBorder('top', costume.id === selectedCostume)}}"/>
            <img class="avatar-costume" ng-src="{{costume.url}}"/>
            <img class="avatar-border bottom" ng-src="{{getImageBorder('bottom', costume.id === selectedCostume)}}"/>
          </div>
        </div>
      </div>
    </slick>
    <div class="move-prev" ng-click="costumesConfig.method.slickPrev();"><i class="icon-left"></i></div>
    <div class="move-next" ng-click="costumesConfig.method.slickNext();"><i class="icon-right"></i></div>
    <div class="avatar-final"><img ng-src="{{$parent.baseAvatarURL}}"/></div>
    <canvas id="composite-image" width="200" height="250"></canvas>
  </div>
  <div class="col-sm-12 avatar-costume-thumbnail-container">
    <div class="thumb left" ng-click="movePrevSlides();">
      <i class="icon-left"></i>
    </div>
    <slick class="avatar-costume-full-list" settings="costumesThumbConfig" init-onload="true" ng-if="$parent.inCostumeSelection">
      <div class="avatar-thumbnail" ng-repeat="costume in costumeList">
        <div class="avatar-select" ng-class="{'selected': costume.id === selectedCostume}" ng-click="costumesConfig.method.slickGoTo(costume.id);">
          <img class="avatar-thumb" ng-src="{{costume.thumbnail || costume.url}}"/>
          <img class="avatar-border" ng-src="{{getImageBorder('small', costume.id === selectedCostume)}}"/>
        </div>
      </div>
    </slick>
    <div class="thumb right" ng-click="moveNextSlides();">
      <i class="icon-right"></i>
    </div>
  </div>
  <div class="col-md-12 centered">
    <div class="form-group button-container">
      <button name="finish" class="cta-primary center-block" ng-click="finish();" ng-disabled="savingAvatar">
        <div class="loading-spinner" ng-show="savingAvatar"></div>finish
      </button>
    </div>
  </div>
</div>
    </div>
  </slick>
</div>

<div ng-controller="UpdateEmailCtrl as uectrl" class="bg0 row md-modal resetpass-modal" custom-modal="uemail-modal">
  <div class="col-md-12 top-bar table-container-full">
    <div class="table-row">
      <div class="table-cell text-left"><a class="text-link privacy-policy-link" ng-href="{{privacyPolicyLink}}" target="_blank">Privacy Policy</a></div>
      <div class="table-cell text-right"><a class="close-lnk" href="#" ng-click="uectrl.closeModal()"><i class="icon-close"></i></a></div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="form-title">
      <p class="title no-upper-title strong1">We are missing your email address.</p>
      <h2 class="sub-title">Please enter your or your parent's email address. We will only use your email address to reset your password should you forget it.</h2>
    </div>
    <div>
      <form id="resetpasswordform" class="signup-form small-form center-block" method="post">
        <div class="form-group">
          <input id="new-email" class="input-field" name="new-email" placeholder="email" type="text" ng-model="uectrl.form.newemail"/>
        </div>
        <div class="form-group">
          <input id="new-email-two" class="input-field" name="new-email-two" placeholder="confirm email" type="text" ng-model="uectrl.form.newemailtwo">
        </div>
        <div class="form-group text-center">
          <button class="center-block cta-primary" ng-click="uectrl.updateEmail()" ng-disabled="uectrl.dataloading">
            <div class="loading-spinner" ng-show="uectrl.dataloading"></div>Submit
          </button>
          <input class="submit-hide" type="submit" ng-disabled="uectrl.dataloading"/>
        </div>
      </form>
    </div>
  </div>
  <img src="/content/dam/scholastic/kids/styles/images/Charac-01.png" class="character-right hidden-xs" alt="A character">
  <wait-screen title="Wait!!!" subtitle="Are you sure you don't want to enter your email address?
  You will need it to reset your password." confirm-btn="Return to form" cancel-btn="Yes, I'm sure." modal="uemail-modal" trigger="uectrl.wait" parent-callback="uectrl.waitCallback()"></wait-screen>
</div>

<div ng-controller="NewsLettersCtrl as nlctrl" class="bg0 slick-row row md-modal" custom-modal="newsletter-modal">
  <!-- step 1 -->
  <div ng-if="nlctrl.step == 1">
    <div class="col-md-12 top-bar table-container-full">
  <div class="table-row">
    <div class="table-cell text-left"><a class="text-link privacy-policy-link" ng-href="{{privacyPolicyLink}}" target="_blank">Privacy Policy</a></div>
    <div class="table-cell text-right"><a class="close-lnk" href="#" ng-click="nlctrl.closeModal()"><i class="icon-close"></i></a></div>
  </div>
</div>
<div class="col-md-12">
  <div class="form-title">
    <p class="title strong1">Sign Up for Free E-Newsletters</p>
    <div class="tip-text">(Optional)</div>
    <div class="tip-text-content">Why sign up? <a class="black-anchor" href="#">Preview the latest newsletters here.</a></div>
  </div>
  <form name="newsletterForm" class="signup-form medium-form center-block" method="post" ng-submit="nlctrl.submit()">
    <div class="form-group">
      <h3 class="step-text hidden-xs">I am interested in</h3>
      <select id="newsletter" ng-model="nlctrl.form.newsletters" name="newsletter" class="drop-down selectpicker done-button" multiple="multiple" data-size="5" title="Choose Newsletters">
        <option value="Newsletter 1">Newsletter 1</option>
        <option value="Newsletter 2">Newsletter 2</option>
        <option value="Newsletter 3">Newsletter 3</option>
        <option value="Newsletter 4">Newsletter 4</option>
        <option value="Newsletter 5">Newsletter 5</option>
      </select>
      <h3 class="step-text hidden-xs">.</h3>
    </div>
    <div class="form-group">
      <input ng-model="form.email" name="youremail" class="input-field" placeholder="Your Email" type="email" ng-required="true"/>
    </div>
    <div class="form-group">
      <input ng-model="form.parentsEmail" name="parentsemail" class="input-field" placeholder="Parent's Email" type="email" ng-required="true"/>
    </div>
    <div class="form-group text-center">
      <input ng-show="newsletterForm.$valid && nlctrl.form.newsletters && nlctrl.form.newsletters.length" class="center-block cta-primary" name="signup" type="submit" value="sign up"/>
    </div>
  </form>
  <div class="nl-bottom-text">
    No thanks. I'll <a class="black-anchor" href="#" ng-click="nlctrl.closeModal()">browse the site</a><br/>or <a class="black-anchor" href="#" ng-click="nlctrl.pickAvatar();">choose my avatar.</a>
  </div>
</div>
<img src="/etc/designs/scholastic/kids/clientlibs/core/images/Charac-06.png" class="character-right hidden-xs" alt="A character"/>
  </div>
  <!-- step 2 -->
  <div ng-if="nlctrl.step == 2">
    <div class="col-md-12 top-bar table-container-full">
  <div class="table-row">
    <div class="table-cell text-left"><a class="text-link privacy-policy-link" ng-href="{{privacyPolicyLink}}" target="_blank">Privacy Policy</a></div>
    <div class="table-cell text-right"><a class="close-lnk" href="#" ng-click="nlctrl.closeModal()"><i class="icon-close"></i></a></div>
  </div>
</div>
<div class="col-md-12">
  <div class="form-title">
    <div class="upper-title hidden-xs">Congrats!</div>
    <p class="title strong1">You're Signed up for {{nlctrl.form.newsletters.join(',')}}</p>
    <h2 class="congrats-text">The next newsletter will arrive in your inbox within a few weeks.</h2>
  </div>
  <form class="signup-form text-center center-block form-inline" method="post">
    <div class="form-group">
      <button class="center-block cta-primary" name="pickavatar" ng-click="nlctrl.pickAvatar()">pick an avatar</button>
    </div>
    <div class="form-group">
      <button class="center-block cta-primary" name="browsesite" ng-click="nlctrl.closeModal()">browse site</button>
    </div>
  </form>
</div>
<img src="/etc/designs/scholastic/kids/clientlibs/core/images/Charac-06.png" class="character-right hidden-xs" alt="A character"/>
  </div>
</div>
<div ng-controller="MePageEditCtrl" custom-modal="me-edit-modal" class="bg0 row md-modal me_edit_module me-edit-modal">
  <div class="col-md-12 top-bar table-container-full">
    <div class="table-row">
      <div class="table-cell text-left"><a class="text-link privacy-policy-link" ng-href="{{privacyPolicyLink}}" target="_blank">Privacy Policy</a></div>
      <div class="table-cell text-right"><a class="close-lnk" href="#" ng-click="closeModal()"><i class="icon-close"></i></a></div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="form-title">
      <div class="upper-title">hey, {{userData.username}}!</div>
      <p class="title strong1">Edit Your Profile</p>
    </div>
    <form class="signup-form me-edit-form text-center" method="post">
      <div class="form-group">
        <h3 class="step-text">I'm interested in</h3>
          <select id="edit-subject" name="edit-subject" title="Choose a Subject" class="drop-down selectpicker" selectpicker="">
            <option value="ghosts-monsters-vampires-witches">Ghosts, Monsters, Vampires &amp; Witches</option>
            <option value="facts-trivia-world-records">Facts, Trivia &amp; World Records</option>
            <option value="dragons-mythical-creatures">Dragons &amp; Mythical Creatures</option>
            <option value="aliens-ufos">Aliens &amp; UFOs</option>
            <option value="action-adventure-heroes">Action &amp; Adventure Heroes</option>
            <option value="animals">Animals</option>
            <option value="popular-culture">Popular Culture</option>
            <option value="friends-friendship">Friends &amp; Friendship</option>
            <option value="magic-supernatural">Magic &amp; Supernatural</option>
            <option value="sports">Sports</option>
          </select>
        <h3 class="step-text hidden-xs">.</h3>
      </div>
      <div class="form-group">
        <h3 class="step-text">My favorite genre is</h3>
          <select id="edit-genre" name="edit-genre" title="Choose a Genre" class="drop-down selectpicker" selectpicker="">
            <option value="adventure-sci-fi">Adventure &amp; Sci-Fi</option>
            <option value="funny">Funny</option>
            <option value="graphic-novels">Graphic Novels</option>
            <option value="fantasy">Fantasy</option>
            <option value="historical">Historical</option>
            <option value="mystery-horror">Mystery and Horror</option>
            <option value="real-life">Real Life</option>
            <option value="nonfiction">Nonfiction</option>
          </select>
        <h3 class="step-text hidden-xs">.</h3>
      </div>
      <div class="form-group">
        <h3 class="step-text">I want to read</h3>
          <select id="edit-amount" name="edit-amount" title="Choose an Amount" class="drop-down selectpicker" selectpicker="">
            <option value="1-5">1-5</option>
            <option value="6-10">6-10</option>
            <option value="11-15">11-15</option>
            <option value="16-20">16-20</option>
            <option value="21-30">21-30</option>
            <option value="31-40">31-40</option>
            <option value="41-50">41-50</option>
            <option value="51-60">51-60</option>
            <option value="61-70">61-70</option>
            <option value="71-80">71-80</option>
            <option value="81-90">81-90</option>
            <option value="91-99">91-99</option>
            <option value="100+">100+</option>
          </select>
        <h3 class="step-text">books this year.</h3>
      </div>
      <div class="form-group text-center button-container">
        <button name="finish" class="cta-primary center-block" ng-click="saveData();" ng-disabled="savingProfile">
          <div class="loading-spinner" ng-show="savingProfile"></div>Save Changes
        </button>
        <input class="hide" type="submit" value="" rel="nofollow" ng-click="saveData();"/>
      </div>
    </form>
  </div>
</div>

<div ng-controller="ModalComponentCtrl" class="modal-component overlay row md-modal" custom-modal="modal-component" custom-modal-effect="fade" ng-class="(currentModal === 'image') ? 'image-modal-component' : ''">
  <div class="modal-container row" ng-class="(currentModal === 'image') ? 'image-modal-container' : ''">
    <div data-ng-hide="currentModal === 'email'" class="close-icon"><a class="close-lnk" href="#" ng-click="closeModal()"><i class="icon-close"></i></a></div>
    <div class="col-md-12 bumper-modal" ng-if="currentModal === 'bumper'">
      <div class="row" ng-controller="BumperModalCtrl">
  <img src="/etc/designs/scholastic/kids/clientlibs/core/images/bumper-icon.png" class="bumper-icon  hidden-xs" alt="An icon"/>
  <div class="col-md-12 bumper-title text-center">
    <h2>You are now leaving Scholastic.com</h2>
  </div>
  <div class="col-md-12 bumper-content text-center">
    <h5>Be sure to get permission from a parent or teacher before leaving Scholastic.com, and read the privacy policy and terms of use of any site you visit.</h5>
    <h5>Always check with your parents before giving out information about yourself, entering a contest or sweepstakes, or buying anything online.</h5>
    <p class="forward-link"><a ng-click="bumperRedirect()">Keep going to the Web site > </a></p>
    <p class="backward-link">Or, go back to <a ng-click="closeModal()">Scholastic.com</a></p>
    <p class="countdown-text">You will go to the website in <span ng-bind="counter" ng-cloak></span> seconds</p>
  </div>
</div>
    </div>
    <div class="col-md-12 age-gate-modal" ng-if="currentModal === 'age-gate'">
      <div class="row age-gate" ng-controller="AgeGateModalCtrl as AGCtrl">
  <div class="col-md-12 text-center" ng-if="AGCtrl.checkAge">
    <h2 class="title">How Old Are You?</h2>
    <h4 class="subtitle">Please Enter Your Birthdate Below</h4>
    <div class="age-form">
      <div class="input-col input-month">
        <input id="age-gate-month" class="input-field" type="text" placeholder="MM" ng-model="AGCtrl.month" maxlength="2" ng-focus="AGCtrl.selectOnFocus($event)" ng-blur="AGCtrl.dateChange()" required/>
        <label for="age-gate-month" class="input-label">Month</label>
      </div>
      <div class="input-col input-day">
        <input id="age-gate-year" class="input-field" type="text" placeholder="DD" ng-model="AGCtrl.day" maxlength="2" ng-focus="AGCtrl.selectOnFocus($event)" ng-blur="AGCtrl.dateChange()" required/>
        <label for="age-gate-day" class="input-label">Day</label>
      </div>
      <div class="input-col input-year">
        <input id="age-gate-year" class="input-field" type="text" placeholder="YYYY" ng-model="AGCtrl.year" maxlength="4" ng-focus="AGCtrl.selectOnFocus($event)" ng-blur="AGCtrl.dateChange()" required/>
        <label for="age-gate-year" class="input-label">Year</label>
      </div>
    </div>
    <div class="privacy-policy">
      Scholastic does not keep this information.<br/>
      <a class="cta privacy-link" href="http://www.scholastic.com/privacy.htm" target="_blank">PRIVACY POLICY</a>
    </div>
    <div class="modal-continue">
      <button class="cta-primary" ng-click="AGCtrl.clickContinue()">Continue</button>
    </div>
  </div>
  <div class="col-md-12 text-center" ng-if="!AGCtrl.checkAge">
    <p class="oops-title strong1">Oops,</p>
    <h4 class="oops-subtitle">Sorry, you can't buy the book directly from our site for kids.<br/>
    If you want to get the book online, ask your parent<br/>
    to help you purchase it.</h4>
    <div class="oops-modal-continue">
      <button class="cta-primary" ng-click="AGCtrl.clickOkay()">OKAY</button>
    </div>
  </div>
</div>
    </div>
    <div class="col-md-12 get-the-book-modal" ng-if="currentModal === 'get-the-book'">
      <div class="row" ng-controller="GetTheBookModalCtrl" data-available="false">
  <div class="row get-the-book-container">
    <div class="col-md-12 text-center">
      <h2 class="get-the-book-title">Get The Book</h2>
    </div>
    <div class="col-md-12 text-center">
      <h4 class="get-the-book-subtitle" ng-if="available">Available at the Scholastic Store</h4>
      <h4 class="get-the-book-subtitle" ng-if="!available">This book is unavailable from the Scholastic Store</h4>
    </div>
    <div class="row">
      <div class="col-sm-4 hidden-xs modal-icon">
        <img src="/etc/designs/scholastic/kids/clientlibs/core/images/ghost_200x200.png" alt="An icon"/>
      </div>
      <div class="col-sm-4 text-center">
       
           <img ng-src="/etc/designs/scholastic/kids/clientlibs/core/images/STO_logo{{ available ? '': '_gray' }}.png" class="sto-logo" alt="Scholastic Store logo">
       
        <div class="go-to-store-cta" ng-show="available && ISBN">
          <a ng-href="https://shop.scholastic.com/parent-ecommerce/product-detail-page.html?isbn={{ ISBN }}" target="_blank" class="cta-primary">Go to Store</a>
        </div>
      </div>
      <div class="col-sm-4 hidden-xs modal-icon">
        <img src="/etc/designs/scholastic/kids/clientlibs/core/images/reading_200x200.png" alt="An icon"/>
      </div>
    </div>
  </div>

  

  <div class="row local-library-container">
    <div class="col-md-12 text-center">
      <h6>Find a local library</h6>
    </div>
    <div class="col-md-12 text-center">
      <h5>Enter <input class="zip-code" id="zip-code" name="near" data-ng-blur="validateFormZipCode($event)" data-ng-focus="validateFormZipCode($event)" type="text" data-ng-model="zipCode" data-ng-change="zipCodeChange(zipCode)" placeholder="Your Zip Code" maxlength="10" ng-required="true">
        to find a library near you using Google Maps.</h5>
      <h6 class="get-book-not-worry">(Not to worry, we will not save your information)</h6>
      <a href="#" class="cta-primary" ng-click="findLocal($event)" data-ng-show="showCTA" target="_blank">Let's do it</a>
    </div>
  </div>
  
  <a href="http://www.scholastic.com/privacy.htm" class="policy-link" target="_blank">Privacy Policy</a>
</div>
    </div>
    <div class="col-md-12 email-modal" ng-if="currentModal === 'email'">
      <div class="row" ng-controller="EmailModalCtrl as sendEmail">
<div class="close-icon"><a class="close-lnk" href="#" data-ng-click="sendEmail.closeModal()"><i class="icon-close"></i></a></div>
  <div class="col-md-12 email-content">
    <form class="small-form center-block email-a-friend-form" method="post" ng-submit="sendEmail.sendEmail()" novalidate>
      <div class="email-title">
        <h2><i class="icon-email"></i>Email This</h2>
      </div>
      <div class="form-group">
        <label for="yourname">Your First Name Only</label>
        <input id="yourname" ng-model="sendEmail.form.yourname" class="input-field email-form-field" name="yourname" placeholder="Your Name" type="text" ng-required="true"/>
      </div>
      <div class="form-group">
        <label for="friendname">Friend's First Name Only</label>
        <input id="friendname" ng-model="sendEmail.form.friendname" class="input-field email-form-field" name="friendname" placeholder="Friend's Name" type="text" ng-required="true"/>
      </div>
      <div class="form-group">
        <label for="friendemail">Friend's Email Address</label>
        <input id="friendemail" ng-model="sendEmail.form.friendemail" class="input-field email-form-field" name="friendemail" placeholder="Friend's Email" type="text" ng-required="true"/>
      </div>
      <div class="email-message">
        <div class="avatar">
          <div ng-if="$parent.hasAvatar" class="myavatar noavatar" ng-cloak>
            <img class="avatar-ie" ng-if="$parent.avatarIE" ng-src="{{$parent.avatarIE}}">
            <img class="avatar-image-container" ng-class="{'ie-compatible': $parent.avatarIE}" alt="avatar" ng-src="{{$parent.avatarData}}"/>
          </div>
          <div ng-if="!$parent.hasAvatar" class="myavatar noavatar" ng-cloak>
            <img class="default-avatar" src="/etc/designs/scholastic/kids/clientlibs/core/images/avatar/default.svg">
          </div>
        </div>
        <div class="message">
          <h6>MESSAGE</h6>
          <p>Here's something interesting from Scholastic.com!</p>
          <p>I hope you like it.</p>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="email-disclaimer text-center">
        <p>Scholastic does not keep this information.</p>
        <p><a class="text-link privacy-policy-link" ng-href="{{privacyPolicyLink}}" target="_blank">Privacy Policy</a></p>
      </div>
      <div class="form-group text-center send-button">
        <input ng-show="sendEmail.showButton" class="center-block cta-primary" id="send-email" name="send-email" type="submit" value="send" rel="nofollow"/>
      </div>
    </form>
  </div>
</div>
    </div>
    <div class="col-md-12 image-modal" ng-if="currentModal === 'image'">
      <div class="row" ng-controller="imageCtrl as vm">
	<div class="close-icon"><a class="close-lnk" href="#" data-ng-click="vm.closeModal()"><i class="icon-close"></i></a></div>
	<img class="article-leading-img" data-ng-src="{{vm.imgPopPath}}" alt="" ng-cloak>
</div>
    </div>
  </div>
</div>
<div class="authentication-modals bg0 row md-modal " custom-modal="authenticated-sticker-error-modal">
    <div class="vertically-aligned">
    <div class="form-title">
        <p class="title text-center strong1"> SORRY! </p>
        <h4 class="sub-title text-center"> You can only put stickers<br />
where you see the dotted<br />
circles. </h4>
    </div>
    <div class="add-my-sticker no-upper-title text-center">
        <div class="add-sticker-cta add-sticker-cta-small">
            <span class="hidden-xs"> 
                <strong> ADD MY STICKER </strong>
            <!-- For 320 size mobile view --> 
            </span> 
            <span class="visible-xs glyphicon glyphicon-plus"> </span>
        </div>

        <div class="add-sticker-cta">
            <span>
                <strong> ADD MY STICKER </strong>
            </span>
        </div>
 
        <div class="add-sticker-cta add-sticker-cta-small">
            <span class="hidden-xs">
                <strong> ADD MY STICKER </strong>
            </span>
            <!-- For 320 size mobile view --> 
            <span class="visible-xs glyphicon glyphicon-plus"> </span>
        </div>
    </div>
    </div>
</div>
<div class="authentication-modals bg0 row md-modal " custom-modal="unauthenticated-sticker-error-modal">
    <div class="vertically-aligned unauth-content">
    <div class="form-title">
        <p class="hidden-xs title text-center unauth-header strong1"> WAIT! </p>
        <h3 class="visible-xs title text-center unauth-header">
            WAIT! </h3>
        <h4 class="sub-title text-center unauth-subheading"> You have to sign in,<br />
first!  </h4>
        <form class="signup-form small-form center-block">
            <div class="form-group text-center unauth-login-cta">
                <button class="center-block cta-primary" name="login" ng-click="logIn()"> SIGN IN </button>
            </div>
        </form>
        <h4 class="createaccount-title text-center unauth-no-account-header"> Don't have an account? </h4>
        <form class="signup-form small-form center-block">    
            <div class="form-group text-center">
                <button class="center-block cta-primary" name="signup" ng-click="signUp()"> REGISTER NOW </button>
            </div>
        </form>
    </div>
    </div>
</div>

        <!-- end modals -->
        <div class="content row">
          
    <!--
        Expand brand bar::true
        Total brands to be listed:: 40
    -->
    
      <div class="brand-list hide-brands" ng-cloak ng-class="brc.isBrandsShown ? 'show-brands' : 'hide-brands'" ng-controller="brandBarController as brc" ng-init="brc.isBrandsShown=true">
        <img ng-click="brc.showBrands()" src="/content/dam/scholastic/kids/image/brandbar/showbrands.png" alt="showbrands" class="show-brands-img hidden-xs hidden-sm brc-open" ng-class="{ 'show': brc.isBrandsShown == true }" ng-cloak>
        <img ng-click="brc.hideBrands()" src="/content/dam/scholastic/kids/image/brandbar/hidebrands.png" alt="showbrands" class="show-brands-img hidden-xs hidden-sm brc-close" ng-class="{ 'show': brc.isBrandsShown == true }" ng-cloak>
        <div class="brands-container hide-brands" ng-class="brc.isBrandsShown ? 'show-brands' : 'hide-brands'">
          <span class="gradient-bg"></span>
          <slick settings="brc.slickConfig" class="brands-circle-cntr">
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-horizon.png)">
                <a href="http://horizon.scholastic.com/" target="_blank"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-tombquest.png)">
                <a href="http://tombquest.scholastic.com/" target="_blank"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-the-39-clues.png)">
                <a href="http://the39clues.scholastic.com/" target="_blank"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-spirit-animals.png)">
                <a href="http://spiritanimals.scholastic.com/" target="_blank"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-shadow-house.png)">
                <a href="http://shadowhouse.scholastic.com/" target="_blank"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-american-girl.png)">
                <a href="https://www.scholastic.com/kids/books/americangirl/" target="_blank"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-amulet.png)">
                <a href="/kids/books/amulet.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-apprentice-witch.png)">
                <a href="/kids/books/the-apprentice-witch.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-the-baby-sitters-club.png)">
                <a href="/kids/books/baby-sitters-club.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-the-bad-guys.png)">
                <a href="/kids/books/the-bad-guys.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-bone.png)">
                <a href="/kids/books/bone.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-coder-dojo.png)">
                <a href="/kids/books/coder-dojo.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-dear-dumb-diary.png)">
                <a href="/kids/books/dear-dumb-diary.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-the-false-prince.png)">
                <a href="/kids/books/false-prince.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-geronimo-stilton2.png)">
                <a href="/kids/books/geronimo-stilton.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-ghosts.png)">
                <a href="/kids/books/ghosts.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-goosebumps.png)">
                <a href="http://goosebumps.scholastic.com/" target="_blank"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-graphix.png)">
                <a href="/kids/books/graphix.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-inkheart.png)">
                <a href="/kids/books/inkheart.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-the-invention-of-hugo-cabret.png)">
                <a href="/kids/books/invention-of-hugo-cabret.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-john-blake.png)">
                <a href="/kids/books/the-adventures-of-john-blake.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-key-hunters.png)">
                <a href="/kids/books/key-hunters.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-klutz.png)">
                <a href="/kids/books/klutz.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-the-last-dragon-chronicles.png)">
                <a href="/kids/books/last-dragon-chronicles.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-lego-nexo-knights.png)">
                <a href="/kids/books/lego-nexo-knights-knights-academy.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-lego-nonfiction.png)">
                <a href="/kids/books/lego-nonfiction.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-the-lotterys.png)">
                <a href="/kids/books/the-lotterys.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-planet-pilkey.png)">
                <a href="http://www.scholastic.com/planetpilkey/" target="_blank"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-rainbow-magic.png)">
                <a href="/kids/books/rainbow-magic.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-ricky-ricotta.png)">
                <a href="/kids/books/ricky-ricotta.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-space-dumplings.png)">
                <a href="http://spacedumplins.scholastic.com/" target="_blank"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-sports.png)">
                <a href="/kids/books/sports.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-star-wars-jedi-academy.png)">
                <a href="/kids/books/star-wars-jedi-academy.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-sunny-side-up.png)">
                <a href="http://sunnysideup.scholastic.com/" target="_blank"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-victor-shmud.png)">
                <a href="/kids/books/victor-shmud.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-whatever-after.png)">
                <a href="/kids/books/whatever-after.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-upside-down-magic.png)">
                <a href="http://upsidedownmagic.scholastic.com/" target="_blank"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-wings-of-fire.png)">
                <a href="http://wingsoffire.scholastic.com/" target="_blank"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-wonderstruck.png)">
                <a href="/kids/books/wonderstruck.html" target="_self"></a>
              </div>
            
              <div class="brand-circle" style="background-image: url(/content/dam/scholastic/kids/content-cards/Brand/brand-world-of-warcraft.png)">
                <a href="/kids/books/worldofwarcrafttraveler.html" target="_self"></a>
              </div>
            
          </slick>
        </div>
        <div class="mobile-brand-bar-btn visible-xs visible-sm" ng-class="brc.isBrandsShown ? 'show-brands' : 'hide-brands'">
          <div class="show-button" ng-click="brc.showBrands()" ng-show="!brc.isBrandsShown">
            <i class="fa fa-sort-desc" aria-hidden="true"></i>
            <span>ALL SERIES</span>
            <i class="fa fa-sort-desc" aria-hidden="true"></i>
          </div>
          <div class="hide-button" ng-click="brc.hideBrands()" ng-show="brc.isBrandsShown">
            <i class="fa fa-sort-asc" aria-hidden="true"></i>
            <span>HIDE</span>
            <i class="fa fa-sort-asc" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    

          
          

          
          <div class="subNavigation section"><div ng-controller="DetectMobileDeviceCtrl" class="contentModule section">

  <style>
    .custom-sub-nav .content-module-container {
      background: linear-gradient(to bottom,
                    #3c3d3d,
                    #3c3d3d
                  );
    }
  </style>
  
  
  
  
  
  
  
  <h1 class="headerImage">
      <img ng-show="device == 'DESKTOP'" class="header-image show-none" ng-class="{'show-image':true}" src="/content/dam/scholastic/kids/header/Category/DesktopNewsHeaderV3.gif"/>
      <img ng-show="device != 'DESKTOP'" class="header-image show-none" ng-class="{'show-image':true}" src="/content/dam/scholastic/kids/header/Category/header-news-mobile-03.jpg"/>
      
      
      
  </h1>
  
  
  
  
  <div class="content-module custom-sub-nav 
             shift-up">
    <svg class="visual-accent" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="60 241 1080 80" preserveAspectRatio="xMidYMin slice" style="visibility: hidden;">
      <path class="book-top" d="M1140,321v-51.5c0,0-442.1-64.1-540.1-0.1c-100-63.8-539.9,0.1-539.9,0.1V321H1140z" style="fill: #3c3d3d;"></path>
      <path class="book-top-border" d="M60,277.5c0,0,439.9-63.9,539.9-0.1c98-64,540.1,0.1,540.1,0.1v-8c0,0-442.1-64.1-540.1-0.1 c-100-63.8-539.9,0.1-539.9,0.1V277.5z"></path>
    </svg>
    <div class="content-module-container  
    white">
      <!--Trending Cards -->
      <div class="content-wrapper">
        
      </div>
      <!--End Trending Cards-->
      <sch-sub-nav background-color="#3c3d3d" sticky-bg-color="#3c3d3d" border-color="#3c3d3d" underline-color="#3c3d3d" text-color="#fff">
        <a href="#ScholasticNews">
          Scholastic News
        </a>
      
        <a href="#InkSplot">
          Ink Splot 26
        </a>
      
        <a href="#KidsPress">
          Kids Press Corps
        </a>
      </sch-sub-nav>
    </div>    
  </div>
  <div class="custom-sub-nav-end" style="background-color: #3c3d3d">
    &nbsp;
  </div>
</div></div>
<div class="parsys section"><div class="section raw-html">
<a name="ScholasticNews"></a>

    
    </div>
<div class="contentModule section">

  <div class="content-module primary-section-news " ng-controller="ContentModuleCtrl" data-category="news" data-subcategory="Arts" data-category-search-prefilter="news" data-subcategory-solr-search-param="kssdp=arts" data-ctashown="false" data-bookstatus="haveRead" data-title="News Around the World" data-numberCards="12,2" data-accent-icons="[]">
    <svg preserveAspectRatio="xMidYMin slice" class="visual-accent " ng-class="{visualAccentTwoUp : twoUpLayout()}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="60 241 1080 80">
      
      
      <path class="book-top" d="M1140,321v-51.5c0,0-442.1-64.1-540.1-0.1c-100-63.8-539.9,0.1-539.9,0.1V321H1140z"/><path class="book-top-border" d="M60,277.5c0,0,439.9-63.9,539.9-0.1c98-64,540.1,0.1,540.1,0.1v-8c0,0-442.1-64.1-540.1-0.1 c-100-63.8-539.9,0.1-539.9,0.1V277.5z"/>
    </svg>
    
    <div class="content-module-container     " ng-class="{contTwoUp : twoUpLayout()}">
      
      
      
      <div class="content-wrapper" ng-class="{'show-all-cards' : noCtaButton}">
  <div class="content-two-up">
    <div class="content-description col-xs-12 col-sm-4">
      <span class="icon-news"></span>
      
      
      
      <h2 class="cat-title">News Around the World</h2>
    </div>
    <div id="a58cedc9" class=" content-content col-xs-12 col-sm-8" bookcard-height data-images-loaded>
      
      
        <div class="section">
          

    
    
    
    <div class="blogCardComponent">

  
  
    
  <blog-card resource-path="/content/kids/en/news/classroom-magazines/spotting-new-species" resource-type="DEFAULT" ng-cloak>
  </blog-card>

  

  

  

  
  
   
  
  

  

  

  

  

  
  
  
  
  
  
  

  
  
  



</div>



        </div>
      
        <div class="section">
          

    
    
    
    <div class="blogCardComponent">

  
  
    
  <blog-card resource-path="/content/kids/en/news/classroom-magazines/hot-shot" resource-type="DEFAULT" ng-cloak>
  </blog-card>

  

  

  

  
  
   
  
  

  

  

  

  

  
  
  
  
  
  
  

  
  
  



</div>



        </div>
      
    </div>
    
    <div class="clearfix"></div>
  </div>
</div>
    </div>
  </div>


</div>
<div class="promoModule section">
  
  <div class="promotions layout-one light">
    <div class="promotions-top content-module primary-section-books">
      <svg class="visual-accent full-height-bg-image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1080 80" preserveAspectRatio="xMidYMin slice">
        <defs>
          <pattern id="promotions-img-8f1251e4" patternUnits="objectBoundingBox" x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMin slice">
            <image xlink:href="/content/dam/scholastic/kids/Content-Mod-BGs/Summer-Reading-Challenge/src-content-bg-happy-camper_msk10.jpg" preserveAspectRatio="xMidYMin slice" x="0" y="0" width="100%" height="100%" viewBox="0 0 100 100"></image>
            <desc></desc>
          </pattern>
        </defs>
        <path fill="url(#promotions-img-8f1251e4)" d="m1080,620l0,-590c0,0 -110,-16 -232,-24c-122,-8 -258,-8 -308,24c-50,-32 -186,-32 -308,-24c-122,8 -232,24 -232,24l0,590l1080,0l-2,0l2,0l0,0l-1,0l0,0l0,0l1,0z"/>
        
        <path class="book-top-border" d="m0,38c0,0 110,-16 232,-24c122,-8 258,-8 308,24c50,-32 186,-32 308,-24c122,8 232,24 232,24l0,-8c0,0 -110,-16 -232,-24c-122,-8 -258,-8 -308,24c-50,-32 -186,-32 -308,-24c-122,8 -232,24 -232,24l0,8z"/>
      </svg>
      
      <div class="content-module-container  content-image-bg" style="background-color: #75b94c; background-image: url()">
        <img src="/content/dam/scholastic/kids/Content-Mod-BGs/Summer-Reading-Challenge/src-content-bg-happy-camper_msk10.jpg" class="content-module-bg-image "/>
        <div class="content-wrapper">
          
          <div class="row ">
            <div class="col-sm-6 text-center column-title left">
              <div class="wrapper-header">
                
                <h2 class="title"></h2>
                
              </div>
            </div>
            <div class="col-sm-6 text-center column-card left ">
              <div class="wrapper-card">
  

  

  

  
  
   
  
  

  

  

  

  

  
  
  
  
  
  
  

  
  
  

</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- for x-small card position -->
    
  </div>


</div>
<div class="contentModule section">

  <div class="content-module primary-section-books content-1up-copy" ng-controller="ContentModuleCtrl" data-category="books" data-subcategory="title goes here" data-category-search-prefilter="books" data-ctashown="false" data-bookstatus="haveRead" data-title="SUMMER READING CHALLENGE" data-numberCards="12,2" data-accent-icons="[]">
    <svg preserveAspectRatio="xMidYMin slice" class="visual-accent full-height-bg-image " ng-class="{visualAccentTwoUp : twoUpLayout()}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="60 241 1080 80">
      <defs>
        <pattern id="promotions-img-7b9e8941" patternUnits="objectBoundingBox" x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMin slice">
          <image xlink:href="/content/dam/scholastic/kids/Content-Mod-BGs/Summer-Reading-Challenge/src-content-bg-grass-03.jpg" preserveAspectRatio="xMidYMin slice" x="0" y="0" width="100%" height="100%" viewBox="0 0 100 100"></image>
        </pattern>
      </defs>
      <path fill="url(#promotions-img-7b9e8941)" d="M1140,321v-51.5c0,0-442.1-64.1-540.1-0.1c-100-63.8-539.9,0.1-539.9,0.1V321H1140z"/>
      <path class="book-top-border" d="M60,277.5c0,0,439.9-63.9,539.9-0.1c98-64,540.1,0.1,540.1,0.1v-8c0,0-442.1-64.1-540.1-0.1 c-100-63.8-539.9,0.1-539.9,0.1V277.5z"/>
    </svg>
    <div class="top-character right hidden-xs">
      <img src="/content/dam/scholastic/kids/accent-image/Summer-Reading-Challenge/accent-src-dogman+campfire_v11.png" alt="Silhouette Image"/>
    </div>
    <div class="content-module-container content-image-bg  light  " ng-class="{contTwoUp : twoUpLayout()}" style="background-color: #a1c14a">
      <img src="/content/dam/scholastic/kids/Content-Mod-BGs/Summer-Reading-Challenge/src-content-bg-grass-03.jpg" class="content-module-bg-image "/>
      
      
      <div class="content-wrapper" ng-class="{'show-all-cards' : noCtaButton}">
  <div class="content-one-up-copy">
    <div class="content-description col-xs-12 col-sm-4 ">
      
      
      
      <div class="cat-name eyebrow">SUMMER READING CHALLENGE</div>
      <h2 class="cat-title">Read books, log reading minutes, earn rewards. Join the fun!</h2>
    </div>
    <div id="7b9e8941" class=" content-content col-xs-12 col-sm-8 " bookcard-height data-images-loaded>
      
      
        <div class="section">
          

    
    
    
    <div class="linkableCardComponent">

  
  

  

  

  
  
   
  
  

  

  
    
  <game-card card-likes="false" card-link="http://www.scholastic.com/ups/campaigns/src-2017" card-img-path="/content/dam/scholastic/kids/content-cards/Links/Summer-Reading-Challenge/src-linkable-card-A4.jpg" card-img-silo="/content/dam/scholastic/kids/content-cards/Links/Summer-Reading-Challenge/src-linkable-card-B.png" card-button="VISIT THE SITE" resource-path="/content/kids/en/news" resource-type="DEFAULT" card-hide-exit-bumper="true" card-type="externalUrl" card-show-button="true" ng-cloak>
  </game-card>

  

  

  

  
  
  
  
  
  
  

  
  
  



</div>



        </div>
      
    </div>
    
    <div class="clearfix"></div>
  </div>
</div>
    </div>
  </div>


</div>

</div>
<div class="parsys section"><div class="section raw-html">
<a name="InkSplot"></a>

    
    </div>
<div class="contentModule section">

  <div class="content-module primary-section-news " ng-controller="ContentModuleCtrl" data-category="news" data-subcategory="Arts" data-category-search-prefilter="news" data-subcategory-solr-search-param="kssdp=arts" data-ctashown="false" data-bookstatus="haveRead" data-title="SubCategory title goes here" data-numberCards="12,2" data-accent-icons="[]">
    <svg preserveAspectRatio="xMidYMin slice" style="display: none" class="visual-accent " ng-class="{visualAccentTwoUp : twoUpLayout()}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="60 241 1080 80">
      
      
      <path class="book-top" d="M1140,321v-51.5c0,0-442.1-64.1-540.1-0.1c-100-63.8-539.9,0.1-539.9,0.1V321H1140z"/><path class="book-top-border" d="M60,277.5c0,0,439.9-63.9,539.9-0.1c98-64,540.1,0.1,540.1,0.1v-8c0,0-442.1-64.1-540.1-0.1 c-100-63.8-539.9,0.1-539.9,0.1V277.5z"/>
    </svg>
    
    <div class="content-module-container  no-arch-padding dark  " ng-class="{contTwoUp : twoUpLayout()}">
      
      
      
      <div class="content-wrapper" ng-class="{'show-all-cards' : noCtaButton}">
  <div class="content-four-up">
    <div class="content-description col-xs-12 col-sm-12">
      <span class="icon-news" style="color: #000000"></span>
      
      
      
      
      
      
      
      <h2 class="cat-title" style="color: #000000">What’s New, Cool, and Fun? Find Out in the Ink Splot 26 Blog</h2>
          
    </div>
    <div id="fbd573a9" class=" content-content col-xs-12 col-sm-12" ng-class="{'content-header': setHeader}" bookcard-height data-images-loaded ng-hide="isHideCard">
      

      
      
        <div class="section">
          

    
    
    
    <div class="blogCardComponent">

  
  
    
  <blog-card resource-path="/content/kids/en/news/ink-splot-26/buddy-create-a-caption" resource-type="DEFAULT" ng-cloak>
  </blog-card>

  

  

  

  
  
   
  
  

  

  

  

  

  
  
  
  
  
  
  

  
  
  



</div>



        </div>
      
        <div class="section">
          

    
    
    
    <div class="blogCardComponent">

  
  
    
  <blog-card resource-path="/content/kids/en/news/ink-splot-26/chicken-create-a-caption" resource-type="DEFAULT" ng-cloak>
  </blog-card>

  

  

  

  
  
   
  
  

  

  

  

  

  
  
  
  
  
  
  

  
  
  



</div>



        </div>
      
        <div class="section">
          

    
    
    
    <div class="blogCardComponent">

  
  
    
  <blog-card resource-path="/content/kids/en/news/ink-splot-26/books-that-changed-you" resource-type="DEFAULT" ng-cloak>
  </blog-card>

  

  

  

  
  
   
  
  

  

  

  

  

  
  
  
  
  
  
  

  
  
  



</div>



        </div>
      
        <div class="section">
          

    
    
    
    <div class="blogCardComponent">

  
  
    
  <blog-card resource-path="/content/kids/en/news/ink-splot-26/roller-coaster-name-generator" resource-type="DEFAULT" ng-cloak>
  </blog-card>

  

  

  

  
  
   
  
  

  

  

  

  

  
  
  
  
  
  
  

  
  
  



</div>



        </div>
      
    </div>
    
    
    
    <div class="clearfix"></div>
  </div>
</div>
    </div>
  </div>


</div>
<div class="contentModule section">

  <div class="content-module primary-section-books content-1up-copy" ng-controller="ContentModuleCtrl" data-category="books" data-subcategory="title goes here" data-category-search-prefilter="books" data-ctashown="false" data-bookstatus="haveRead" data-title="THE 39 CLUES" data-numberCards="12,2" data-accent-icons="[]">
    <svg preserveAspectRatio="xMidYMin slice" style="display: none" class="visual-accent full-height-bg-image " ng-class="{visualAccentTwoUp : twoUpLayout()}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="60 241 1080 80">
      <defs>
        <pattern id="promotions-img-5785b342" patternUnits="objectBoundingBox" x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMin slice">
          <image xlink:href="/content/dam/scholastic/kids/promo/39-Clues/promo_39-clues-bg2.jpg" preserveAspectRatio="xMidYMin slice" x="0" y="0" width="100%" height="100%" viewBox="0 0 100 100"></image>
        </pattern>
      </defs>
      <path fill="url(#promotions-img-5785b342)" d="M1140,321v-51.5c0,0-442.1-64.1-540.1-0.1c-100-63.8-539.9,0.1-539.9,0.1V321H1140z"/>
      <path class="book-top-border" d="M60,277.5c0,0,439.9-63.9,539.9-0.1c98-64,540.1,0.1,540.1,0.1v-8c0,0-442.1-64.1-540.1-0.1 c-100-63.8-539.9,0.1-539.9,0.1V277.5z"/>
    </svg>
    
    <div class="content-module-container content-image-bg no-arch-padding light  " ng-class="{contTwoUp : twoUpLayout()}" style="background-color: #04a1c7">
      <img src="/content/dam/scholastic/kids/promo/39-Clues/promo_39-clues-bg2.jpg" class="content-module-bg-image no-arch-bg-image"/>
      
      
      <div class="content-wrapper" ng-class="{'show-all-cards' : noCtaButton}">
  <div class="content-one-up-copy">
    <div class="content-description col-xs-12 col-sm-4 ">
      
      
      
      <div class="cat-name eyebrow">THE 39 CLUES</div>
      <h2 class="cat-title">The hunt is on</h2>
    </div>
    <div id="5785b342" class=" content-content col-xs-12 col-sm-8 " bookcard-height data-images-loaded>
      
      
        <div class="section">
          

    
    
    
    <div class="linkableCardComponent">

  
  

  

  

  
  
   
  
  

  

  
    
  <game-card card-likes="false" card-link="http://the39clues.scholastic.com/" card-img-path="/content/dam/scholastic/kids/content-cards/Series/series-as-game-cards/39-clues/seires_39-clues-A.jpg" card-img-silo="/content/dam/scholastic/kids/content-cards/Series/series-as-game-cards/39-clues/series_39-clues-B.png" card-button="VISIT THE SITE" resource-path="/content/kids/en/news" resource-type="DEFAULT" card-hide-exit-bumper="true" card-type="externalUrl" card-show-button="true" ng-cloak>
  </game-card>

  

  

  

  
  
  
  
  
  
  

  
  
  



</div>



        </div>
      
    </div>
    
    <div class="clearfix"></div>
  </div>
</div>
    </div>
  </div>


</div>

</div>
<div class="parsys section"><div class="section raw-html">
<a name="KidsPress"></a>

    
    </div>
<div class="contentModule section">

  <div class="content-module primary-section-news " ng-controller="ContentModuleCtrl" data-category="news" data-subcategory="Arts" data-category-search-prefilter="news" data-subcategory-solr-search-param="kssdp=arts" data-ctashown="false" data-bookstatus="haveRead" data-title="Kids Press Corps" data-numberCards="12,2" data-accent-icons="[]">
    <svg preserveAspectRatio="xMidYMin slice" class="visual-accent " ng-class="{visualAccentTwoUp : twoUpLayout()}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="60 241 1080 80">
      
      
      <path class="book-top" d="M1140,321v-51.5c0,0-442.1-64.1-540.1-0.1c-100-63.8-539.9,0.1-539.9,0.1V321H1140z"/><path class="book-top-border" d="M60,277.5c0,0,439.9-63.9,539.9-0.1c98-64,540.1,0.1,540.1,0.1v-8c0,0-442.1-64.1-540.1-0.1 c-100-63.8-539.9,0.1-539.9,0.1V277.5z"/>
    </svg>
    
    <div class="content-module-container     " ng-class="{contTwoUp : twoUpLayout()}">
      
      
      
      <div class="content-wrapper" ng-class="{'show-all-cards' : noCtaButton}">
  <div class="content-three-up">
    <div class="content-description col-xs-12 col-sm-12">
      <span class="icon-news" style="color: #000000"></span>
      
      
      
      <h2 class="cat-title" style="color: #000000">Scholastic News Kids Press Corps News BY Kids and FOR Kids</h2>
    </div>
    <div id="b9b95491" class=" content-content col-xs-12 col-sm-12" bookcard-height data-images-loaded>
      
      
        <div class="section">
          

    
    
    
    <div class="blogCardComponent">

  
  
    
  <blog-card resource-path="/content/kids/en/news/kid-press-corps/seeds-of-hope" resource-type="DEFAULT" ng-cloak>
  </blog-card>

  

  

  

  
  
   
  
  

  

  

  

  

  
  
  
  
  
  
  

  
  
  



</div>



        </div>
      
        <div class="section">
          

    
    
    
    <div class="blogCardComponent">

  
  
    
  <blog-card resource-path="/content/kids/en/news/kid-press-corps/a-conversation-with-chris-colfer" resource-type="DEFAULT" ng-cloak>
  </blog-card>

  

  

  

  
  
   
  
  

  

  

  

  

  
  
  
  
  
  
  

  
  
  



</div>



        </div>
      
        <div class="section">
          

    
    
    
    <div class="blogCardComponent">

  
  
    
  <blog-card resource-path="/content/kids/en/news/kid-press-corps/teens-help-homeless-families" resource-type="DEFAULT" ng-cloak>
  </blog-card>

  

  

  

  
  
   
  
  

  

  

  

  

  
  
  
  
  
  
  

  
  
  



</div>



        </div>
      
    </div>
    
    <div class="clearfix"></div>
  </div>
</div>
    </div>
  </div>


</div>
<div class="contentModule section">

  <div class="content-module white content-1up-copy" ng-controller="ContentModuleCtrl" data-category="books" data-subcategory="title goes here" data-category-search-prefilter="books" data-ctashown="false" data-bookstatus="haveRead" data-title="SHADOW HOUSE" data-numberCards="12,2" data-accent-icons="[]">
    <svg preserveAspectRatio="xMidYMin slice" style="display: none" class="visual-accent full-height-bg-image " ng-class="{visualAccentTwoUp : twoUpLayout()}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="60 241 1080 80">
      <defs>
        <pattern id="promotions-img-5138d862" patternUnits="objectBoundingBox" x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMin slice">
          <image xlink:href="/content/dam/scholastic/kids/promo/Shadow-House/promo_shadow-house-bg.jpg" preserveAspectRatio="xMidYMin slice" x="0" y="0" width="100%" height="100%" viewBox="0 0 100 100"></image>
        </pattern>
      </defs>
      <path fill="url(#promotions-img-5138d862)" d="M1140,321v-51.5c0,0-442.1-64.1-540.1-0.1c-100-63.8-539.9,0.1-539.9,0.1V321H1140z"/>
      <path class="book-top-border" d="M60,277.5c0,0,439.9-63.9,539.9-0.1c98-64,540.1,0.1,540.1,0.1v-8c0,0-442.1-64.1-540.1-0.1 c-100-63.8-539.9,0.1-539.9,0.1V277.5z"/>
    </svg>
    
    <div class="content-module-container content-image-bg no-arch-padding light  " ng-class="{contTwoUp : twoUpLayout()}" style="background-color: #1d1e14">
      <img src="/content/dam/scholastic/kids/promo/Shadow-House/promo_shadow-house-bg.jpg" class="content-module-bg-image no-arch-bg-image"/>
      
      
      <div class="content-wrapper" ng-class="{'show-all-cards' : noCtaButton}">
  <div class="content-one-up-copy">
    <div class="content-description col-xs-12 col-sm-4 ">
      
      
      
      <div class="cat-name eyebrow">SHADOW HOUSE</div>
      <h2 class="cat-title">Some Houses Are More Than Just Haunted</h2>
    </div>
    <div id="5138d862" class=" content-content col-xs-12 col-sm-8 " bookcard-height data-images-loaded>
      
      
        <div class="section">
          

    
    
    
    <div class="linkableCardComponent">

  
  

  

  

  
  
   
  
  

  

  
    
  <game-card card-likes="false" card-link="http://shadowhouse.scholastic.com/" card-img-path="/content/dam/scholastic/kids/content-cards/Series/series-as-game-cards/shadow-house/series_shadow-house-A2.jpg" card-img-silo="/content/dam/scholastic/kids/content-cards/Series/series-as-game-cards/shadow-house/series_shadow-house-B2.png" card-button="FIND OUT MORE" resource-path="/content/kids/en/news" resource-type="DEFAULT" card-hide-exit-bumper="true" card-type="externalUrl" card-show-button="true" ng-cloak>
  </game-card>

  

  

  

  
  
  
  
  
  
  

  
  
  



</div>



        </div>
      
    </div>
    
    <div class="clearfix"></div>
  </div>
</div>
    </div>
  </div>


</div>

</div>
<div class="parsys section"><div class="characterSeriesNews section">

<div class="character-series content-module primary-section-news">
	<svg class="visual-accent" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="60 241 1080 80" preserveAspectRatio="xMidYMin slice">
    <path class="book-top" d="M1140,321v-51.5c0,0-442.1-64.1-540.1-0.1c-100-63.8-539.9,0.1-539.9,0.1V321H1140z"/><path class="book-top-border" d="M60,277.5c0,0,439.9-63.9,539.9-0.1c98-64,540.1,0.1,540.1,0.1v-8c0,0-442.1-64.1-540.1-0.1 c-100-63.8-539.9,0.1-539.9,0.1V277.5z"/>
  </svg>
  <div class="content-module-container news">
    <!--Character option-->
    
    <div>
<div class="nav-module">
  <div class="content-description col-xs-12 col-sm-12">
    <h3 class="cat-title">Explore News By Topic</h3>
  </div>
  <div class="news-nav">
    <div class=" content-content col-xs-12 col-sm-12">
      
        <!--if first col-md-offset-1 add-->
        <!--if 6th col-md-offset-2 add-->
        <div class="col-md-offset-1  col-xs-6 col-sm-3 col-md-2 nav-img-container">
          <a href="/kids/news/arts.html">
            <div class="img-place">
              <span class="news-icon fa fa-paint-brush"></span>
            </div>
            <h4>Arts</h4>
          </a>
      </div>
    
        <!--if first col-md-offset-1 add-->
        <!--if 6th col-md-offset-2 add-->
        <div class="  col-xs-6 col-sm-3 col-md-2 nav-img-container">
          <a href="/kids/news/sports-recreation.html">
            <div class="img-place">
              <span class="news-icon fa fa-futbol-o"></span>
            </div>
            <h4>Sports &amp; Recreation</h4>
          </a>
      </div>
    
        <!--if first col-md-offset-1 add-->
        <!--if 6th col-md-offset-2 add-->
        <div class="  col-xs-6 col-sm-3 col-md-2 nav-img-container">
          <a href="/kids/news/pop-culture.html">
            <div class="img-place">
              <span class="news-icon fa fa-comment"></span>
            </div>
            <h4>Pop Culture</h4>
          </a>
      </div>
    
        <!--if first col-md-offset-1 add-->
        <!--if 6th col-md-offset-2 add-->
        <div class="  col-xs-6 col-sm-3 col-md-2 nav-img-container">
          <a href="/kids/news/math-science.html">
            <div class="img-place">
              <span class="news-icon fa fa-cubes"></span>
            </div>
            <h4>Math &amp; Science</h4>
          </a>
      </div>
    
        <!--if first col-md-offset-1 add-->
        <!--if 6th col-md-offset-2 add-->
        <div class="  col-xs-6 col-sm-3 col-md-2 nav-img-container">
          <a href="/kids/news/animals.html">
            <div class="img-place">
              <span class="news-icon fa fa-paw"></span>
            </div>
            <h4>Animals</h4>
          </a>
      </div>
    
        <!--if first col-md-offset-1 add-->
        <!--if 6th col-md-offset-2 add-->
        <div class=" col-md-offset-2 col-xs-6 col-sm-3 col-md-2 nav-img-container">
          <a href="/kids/news/technology.html">
            <div class="img-place">
              <span class="news-icon fa fa-space-shuttle"></span>
            </div>
            <h4>Technology</h4>
          </a>
      </div>
    
        <!--if first col-md-offset-1 add-->
        <!--if 6th col-md-offset-2 add-->
        <div class="  col-xs-6 col-sm-3 col-md-2 nav-img-container">
          <a href="/kids/news/health-body.html">
            <div class="img-place">
              <span class="news-icon fa fa-heartbeat"></span>
            </div>
            <h4>Health &amp; Body</h4>
          </a>
      </div>
    
        <!--if first col-md-offset-1 add-->
        <!--if 6th col-md-offset-2 add-->
        <div class="  col-xs-6 col-sm-3 col-md-2 nav-img-container">
          <a href="/kids/news/history-world-events.html">
            <div class="img-place">
              <span class="news-icon fa fa-globe"></span>
            </div>
            <h4>History &amp; World Events</h4>
          </a>
      </div>
    
        <!--if first col-md-offset-1 add-->
        <!--if 6th col-md-offset-2 add-->
        <div class="  col-xs-6 col-sm-3 col-md-2 nav-img-container">
          <a href="/kids/news/holidays.html">
            <div class="img-place">
              <span class="news-icon fa fa-calendar-o"></span>
            </div>
            <h4>Holidays</h4>
          </a>
      </div>
    
  </div>
  <div class="clearfix"></div>
</div>
</div>
  </div>
</div></div>

</div>



          <div>
  <div class="content-module">
    <svg class="visual-accent" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="60 241 1080 80" preserveAspectRatio="xMidYMin slice">
      <path class="book-top" d="M1140,321v-51.5c0,0-442.1-64.1-540.1-0.1c-100-63.8-539.9,0.1-539.9,0.1V321H1140z" style="fill: #000;"></path>
      <path class="book-top-border" d="M60,277.5c0,0,439.9-63.9,539.9-0.1c98-64,540.1,0.1,540.1,0.1v-8c0,0-442.1-64.1-540.1-0.1 c-100-63.8-539.9,0.1-539.9,0.1V277.5z"></path>
    </svg>
    <div class="content-module-container footer-container" style="background-color: #000;">
      <div class="footer-body size-16" style="color: #fff;">
        <a href="http://www.scholastic.com/privacy.htm" class="upper" target="_blank">
          Privacy Policy
        </a>
        <a href="http://www.scholastic.com/terms.htm" class="terms-of-use" target="_blank">
          Terms of Use
        </a>
      </div>
      <div class="footer-copyright" style="color: #fff;">
        TM &reg; &amp; &copy; 2017 Scholastic Inc. All Rights Reserved.
      </div>
    </div>
  </div>
</div>
	      

          
        </div>

        
      </div>
      
    </div>
    
  </div>
  
</div>


<footer class="global_footer s_close hidden">
    <div class="privacy_policy">
        <div class="s_fluid_container">
            <a ng-href="{{privacyPolicyLink}}" target="_blank">Scholastic.com Privacy Policy</a>
            <a ng-href="{{termsLink}}" target="_blank">Scholastic.com Terms of Service</a>
        </div>
    </div>
    <div class="sticky_footer_btn">
        <div class="s_container"><h5>Kids</h5></div>
    </div>
</footer>
<!-- Video Modal -->
<div id="video-content-card-modal" class="modal fade video-content-card-modal" tabindex="-1" role="dialog" labelledby="...">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 id="video-content-card-modal-title" class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <video data-account="1543299976" data-player="9aff0d13-3492-425b-a9e3-5b987004cacc" data-embed="default" data-video-id="" id="video-card-player-modal" class="video-content-card-player" controls>
        </video>
      </div>
    </div>
  </div>
</div>
<!-- Game Container Modal -->
<div id="game-container-modal" class="modal fade video-content-card-modal" tabindex="-1" role="dialog" labelledby="...">
  <div class="modal-dialog game-container-modal" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 id="game-container-modal-title" class="modal-title"></h4>
      </div>
      <div class="modal-body" id="game-container-modal-body">
      </div>
    </div>
  </div>
</div>
<!--js libs-->


    
<script type="text/javascript" src="/etc/clientlibs/granite/jquery.min.js"></script>
<script type="text/javascript" src="/etc/clientlibs/granite/utils.min.js"></script>
<script type="text/javascript" src="/etc/clientlibs/granite/jquery/granite.min.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/jquery.min.js"></script>
<script type="text/javascript" src="/etc/designs/scholastic/kids/clientlibs/core.min.js"></script>




    




<!-- Game Container Modal -->
<!-- is necessary to update the script data for kids site, we already using upfront data. -->
<script src="//players.brightcove.net/1543299976/9aff0d13-3492-425b-a9e3-5b987004cacc_default/index.min.js"></script>
<script src="//cdn.livefyre.com/Livefyre.js"></script>

<!-- kids analytics footer script -->
<script type="text/javascript" src="//ltm.scholastic.com/ltm/resources/tag/footer.js">
</script>
</body>
</html>