<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "UTF-8";
/* CSS Document */

@media print {
    .noprint {
        display: none;
    }
}
@font-face {
    font-family : OpenSansBold;
    src: url(/fonts/OpenSans-Bold.ttf);
}
/***** General *****/
* {
 margin:0;
 padding:0;
 vertical-align: baseline; 
}

body {
 min-width: 800px;
 font-family: "Montserrat", arial, sans-serif ! important;
 color: #474747;
 font-size: 16px;
/* background-color: #aac9e0; 
    background-image: url("/images/nice-snow.png");
    background-repeat: repeat;
    background-attachment: fixed; /* single background extends beyond 1 screen 
*/
}
/*
@font-face {
        font-family: 'Montserrat';
        font-style: bold;
        font-weight: 700;
        src: local('Montserrat-Bold'), url(http://fonts.gstatic.com/s/montserrat/v6/IQHow_FEYlDC4Gzy_m8fcvEr6Hm6RMS0v1dtXsGir4g.ttf) format('truetype');
}
*/

select:hover, option:hover {
    cursor: pointer;
}
#fullscreen {
 width: 100% ! important; 
 padding: 0px ! important;
 overflow: auto;
}
.invisible {
    display: none;
}
html{
 height: 100%;
}
ol, ul { 
  list-style: none; 
}
a img {
    border : 0;
}
input {
    color: #555;
}
input[type="checkbox"]:hover {
    cursor: pointer;
}
input[type="radio"]:hover {
    cursor: pointer;
}
.spacer {
	clear: both;
	display: block;
}
.nonblockspacer {
	display: inline;
	clear: none;
}
.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
a {
    text-decoration: none;
    color: #0071bc;
}
a:hover {
    text-decoration: underline;
    cursor: pointer;
}
::placeholder {
    color: #667;
}
.error {
    background-color: yellow;
    border-radius: 10px;
    padding: 10px;
    color: crimson;
    font-weight: bold;
    line-height: 1.5em;
    margin: 10px 0px;
    font-size: 1.2em;
}

.message {
    margin: 10px;
    padding: 10px;
    color: #333;
    font-style: italic;
}
.confirmation {
   background-color:  #daebcf;  /* pivotal tracker light green */
   padding: 10px;
   color: black;
   padding-left: 50px;
   margin: 10px 0;
}
.copiedConfirmation {
    color: green;
    margin-top: 10px;
    margin-bottom: 10px;
}
.left {
  text-align: left;
}
.center {
	text-align: center;
}
.right {
  text-align: right;
}
.box {
  padding: 20px;
}
.src {
  -moz-border-radius: 5px;                                                      
  -webkit-border-radius: 5px;
}
.rc {
  -moz-border-radius: 10px;                                                      
  -webkit-border-radius: 10px;
}
.brc {
  -moz-border-radius: 20px;                                                      
  -webkit-border-radius: 20px;
}

.lb {
  color: #a1c8ef; 
}
.blue {
  color: #3fa9f5;
}
.grey {
  color: #777;
}
.purple {
  color: purple;
}
.gold {
  color: #eb6724 ! important; /* #f7931e*/
}
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}  
.yellow {
  color: yellow ! important;
}
.url {
  text-decoration: underline;
  color: blue;
}
.super {
    vertical-align: super;
    font-size: 0.6em;
    font-weight: normal;
}
.normal {
  font-weight: normal;
}
.small {
  font-size: 0.9em;
}
.smaller {
  font-size: 0.8em;
}
.smallest {
  font-size: 0.7em;
}
.big, h2{
  font-size: 1.5em;
}
.bigger {
  font-size: 1.7em;
}
.biggest {
  font-size: 2em;
}
h1 {
  font-size: 28px;
  color: #676767;
  line-height: 1.3em;  
}
.opaque {
  opacity:0.2;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}
#topnav .hiddenInitially {
    display: none;
}
.hiddenInitially {
    display: none;
}
.strong {
    font-weight: bold;
}


/* Fade In animation */
.fade-in {
  animation: fadeIn ease 0.5s;
  -webkit-animation: fadeIn ease 0.5s;
  -moz-animation: fadeIn ease 0.5s;
  -o-animation: fadeIn ease 0.5s;
  -ms-animation: fadeIn ease 0.5s;
}
@keyframes fadeIn {
  0% { opacity:0;}
  100% { opacity:1;}
}
@-moz-keyframes fadeIn {
    0% { opacity:0;}
  100% { opacity:1;}
}
@-webkit-keyframes fadeIn {
  0% { opacity:0;}
  100% { opacity:1;}
}
@-o-keyframes fadeIn {
  0% { opacity:0;}
  100% { opacity:1;}
}

/***** Tiles *****/

/* start with white tile */
.tile {
    background-color: white;
    border: none;
    padding: 20px 30px;
}
/*.tile:nth-of-type(even) {
    background-color: #f0f0f0; 
}
// start with gray tile 
.tileFlip {
    background-color: #f0f0f0;
    border: none;
    padding: 30px;
    //background-image: url('/images/brushed-alum.png');
}
.tileFlip:nth-of-type(even) {
    background-color: white;
    background-image: none;
}
*/
.grayTile {
    background-color: #eee;
    /* background-image: url('/images/brushed-alum.png'); */
    border: 1px solid #eee;
}
.whiteTile {
    background-color: white !important;
    background-image: none;
    border: none;
}
.tile .header {
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}
.tile .header a {
    color: #474747;
}
.tile .fa, .tile .fas, .tile .fab, .tile .far {
    margin-right: 6px;
    font-size: 1.3em;
}
.tile .fa-stack-1x {
    font-size: 1em;
}
.tile .fa-stack-2x {
    font-size: 2em;
}
.tile .fa-1x {
    font-size: 1em;
}
.tile .fa-2x {
    font-size: 2em;
}
.tile .fa-3x {
    font-size: 3em;
}
.tile .fa-4x {
    font-size: 4em;
}
.tile .fa-5x {
    font-size: 5em;
}
.tile .content {
    padding: 20px;
}
.tile h2.header a {
  margin-left: 50px;
  font-size: 0.8em;
  font-weight: bold;
  color: #0071bc;
  text-transform: none;
}

/***** Buttons *****/
.standardButton {
  background-color: #005c99; /* need to meet color contrast ratio requirement: https://dequeuniversity.com/rules/axe/4.8/color-contrast */
  /* background: #4687ce;
  background: -moz-linear-gradient( top, rgba(70,135,206,1), rgba(48,104,162,1) );
  background: -webkit-gradient( linear, left top, left bottom, color-stop( 0, rgba(70,135,206,1) ), color-stop( 1, rgba(48,104,162,1) ) );
  -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#4687ce',EndColorStr='#3068a2')"; */
  border: 1px solid #486582;
  font-size: 16px;
  font-weight: bold;
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 15px;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  text-decoration: none;
}
@media only screen and (max-width: 1000px) {
    .standardButton {
        white-space: normal;
    }
    a.standardButton {
        display: inline-block;
    }
}
.standardButton:hover {
  cursor: pointer;
  background: #4687ce;
  text-decoration: none;
}
.standardButton.disabled {
  background: #ccc;
  border: 1px solid #ccc;
  cursor: default;
}
.outlinedButton {
    border: 1px solid #0071bc;
    color: #0071bc;
    background-color: white;
    font-weight: bold;
    font-size: 16px;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
}
.outlinedButton i {
    color: #0071bc;
}
.outlinedButton:hover {
    background-color: #0071bc; /* #D0E5F2;  lightblue; */
    color: white !important; 
    text-decoration: none;
}
.outlinedButton:hover &gt; i {
    color: white !important;
}
.slimmer {
    padding: 5px 10px;
}
.bigger {
    padding: 10px 20px;
}
.huge {
    padding: 20px 70px;
    border-radius: 40px;
    font-size: 1.2em;
}
.textButton {
    padding: 10px;
    cursor: pointer;    
}
.textButton:hover {
    border-radius: 8px;
    background-color: #D0E5F2; /* lightblue; */
    text-decoration: none;
}
.commerceButton {
  background: #FFD814; /* Amazon yellow */    /* Amazon orange: #FFA41C  */
  border: 1px solid #FCD200;  /* Amazon dark yellow */
  transition: all .25s ease;
  font-size: 16px;
  font-weight: bold;
  color: #444 !important;
  padding: 10px 25px !important; 
  border-radius: 15px;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
}
.commerceButton:hover {
  background-color: #FFE200 !important; /* #FCD200 !important;  Amazon dark yellow */    /* Amazon dark orange #FF8F00 */
  cursor: pointer;
  text-decoration: none;
}
.commerceButton.disabled {
  background: #ccc;
  border: 1px solid #ccc;
  cursor: default;
}
.plainButton {
    background-color: #668;
    padding: 10px 20px;
    border: 1px solid #668;
    border-radius: 15px;
    font-size: 1em;
    color: white;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.plainButton:hover {
    background-color: #0071bc;
    text-decoration: none;
}
.transparentButton {
    color: white !important;
    padding: 10px 30px;
    border-radius: 20px;
    border: 1px solid white;
    background-color: rgba(255,255,255,0);
}
.transparentButton:hover, .skyBlueButton:hover {
    cursor: pointer;
    background-color: #0071bc;
    border: 1px solid #0071bc;
    text-decoration: none !important;
}
.skyBlueButton {
    color: white !important;
    font-weight: bold;
    background-color: lightskyblue;
    border-radius: 40px;
    padding: 20px 70px;
    border-style: none;
    cursor: pointer;
}
.bigBlueButton {
    color: white !important;
    font-size: 18px;
    font-weight: bold;
    background-color: #0071bc;
    border-radius: 40px;
    padding: 20px 70px;
    border-style: none;
    cursor: pointer;
    text-transform: uppercase;
}
.deleteButton {
    background-color: crimson;
    font-size: 16px;
    color: #fff ! important;
    font-weight: bold;
    padding: 10px;
    border-radius: 15px;
    border: 1px solid #aaa;
    text-align: center;
    cursor: pointer;
}
.deleteButton:hover {
    cursor: pointer;
    border: 2px solid black;  
}
.smallButton {
    background-color: #0071bc;
    font-size: 16px;
    color: #fff ! important;
    padding: 5px 10px;
    border-radius: 15px;
    border: 1px solid #aaa;
    text-align: center;    
    cursor: pointer;
}
.smallButton_disabled {
  background-color: lightblue;
  font-size: 16px;
  color: #fff ! important;
  padding: 5px 10px;
  border-radius: 15px;
  text-align: center;
}
.smallButton:hover {
  cursor: pointer;
  border: 1px solid #555;
}
.sbutton {
  border: 1px solid #f6c266;
  background-color: #f7931e;
  font-size: 16px;
  color: #fff ! important;
  height: 28px;
  font-weight: bold;
  padding: 2px 15px 2px 15px;
  -moz-border-radius: 15px;                                                      
  -webkit-border-radius: 15px;
} * html .sbutton {
  height: 20px;
}
.sbutton_disabled {
  border: 1px solid #fce7c2;
  background-color: #fee0b1;
  font-size: 16px;
  color: #fff ! important;
  height: 28px;
  padding: 2px 15px 2px 15px;
  -moz-border-radius: 15px;                                                      
  -webkit-border-radius: 15px;
}
.shadowbutton {
  font-size: 20px ! important;
  background: url(/images/sprite.gif) -16px -458px;
  width: 120px;
  height: 36px;
  border: none;
  margin: 0px;
  padding: 5px;
  color: #fff ! important;
  font-weight: bold;
}
.signin-button {
   margin-left: 35px;
   cursor: pointer;
}

.artIcon {
  margin: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  -moz-border-radius: 15px;                                                      
  -webkit-border-radius: 15px;
}
.premiumIcon {
  margin: 5px;
  padding: 5px;
  -moz-border-radius: 10px;                                                      
  -webkit-border-radius: 10px;
  border: 1px solid #ccc;
  background-color: #ffffff;  
  float: left;
}
.premiumIcon img {
  border: none;
}


.promotion {
    background-color: seagreen;
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
}
.promotion ul {
    margin: 20px 50px 20px 100px;
    line-height: 1.3em;
}
.promotion li {
    margin: 10px;
}
.promotion .action {
    margin-left: 80px;
}
.success {
    background-color: seagreen; 
    color: white;
    padding: 10px 20px;
    text-align: center;
    border-radius: 10px;
    font-weight: bold;
}
.warning {
    background-color: crimson; 
    color: white;
    padding: 10px 20px; 
    text-align: center;
    border-radius: 10px;
    font-weight: bold;
}
.warning-yellow {
    background-color: yellow;
    color: black;
    padding: 10px 20px;
    text-align: center;
    border-radius: 10px;
    font-weight: bold;    
}
.promotion-blue {
    background-color: blue;
    color: white;
}
.promotion-blue a {
    color: white;
}

.rotate {
    /* Safari */
    -webkit-transform: rotate(-90deg);

    /* Firefox */
    -moz-transform: rotate(-90deg);

    /* IE */
    -ms-transform: rotate(-90deg);

    /* Opera */
    -o-transform: rotate(-90deg);

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.fa-user-circle {
    color: gray;
}

/* end general */

/***** Page Header *****/

.sjnotification {
  margin-bottom: 15px;
  background-color: seagreen; 
  padding: 10px 20px;
  font-weight: bold;
  color: whitesmoke;
  font-size: 1.1em;
  text-align: center;
}
.sjnotification .sjnotificationClose {
    float: right;
}
.sjnotification .sjnotificationAction {
    cursor: pointer; 
}


.sjmessage {
  margin-bottom: 15px;
  background-color: #454545;
  padding: 10px 20px;
  font-weight: bold;
  color: whitesmoke;
  font-size: 1.1em;
  text-align: center;
}
#cookieMessage.sjmessage {
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    margin-bottom: 0;
    color: #444;
    background-color: #eee;
    font-size: 1em;
}
.sjmessage .sjmessageClose {
    float: right;
    cursor: pointer;
}
#pagetop {
  margin: -15px 20px 25px 0px;  
  height: 65px;
}
#pagetop #logo {
  width: 230px;
  height: 40px;
  margin: 30px 30px 0px;
  float: left;
  cursor: pointer;
  background: url(/images/logo-website-563x99.png) no-repeat;
  background-size: contain;
}
#topnav {
    height: 35px;
    margin: 40px 0 0 20px;
    float: left;
}    
#topnav.loggedOut {
    margin-top: 45px;
}
#topnav li {
    display: inline;
    list-style-type: none;
    margin-right: 30px;
    font-weight: bold;
}
#topnav li:hover {
    border-bottom: 2px solid #0071bc;
}
#topnav li a {
    color: #505050;
    text-decoration: none;
}
#topnav #cart_nav {
    color: #444;
    font-size: 18px;
    text-decoration: none;
}
#topnav #cart_nav:hover {
    text-decoration: none;
}
#topnav .selected {
    color: #0071bc;
}
#topnav .helpBox {
    position: absolute;
    right: -80px;
    top: 30px;
    background-color: #eee; 
    padding: 15px; 
    width: 150px;
    border-radius: 5px;
    z-index: 10;
}
#topnav .helpBox .helpOption {
    display: block;
    line-height: 2em;
    cursor: pointer;
}
#topnav .helpBox .helpOption:hover {
    color: #0071bc;
}
#pagetop #login {
    float: right; 
    font-weight: bold;
    margin-top: 25px;
    text-align: right;
}
#pagetop #login.loggedOut {
    margin-top: 45px;
}
#pagetop #login a {
    color: #505050;
    text-decoration: none;
}
#pagetop #login li {
    display: inline;
    list-style-type: none;
    margin-left: 30px;
}
#pagetop #login li:hover {
    border-bottom: 2px solid gray;
}
#pagetop #login .userBox {
    position: absolute;
    background-color: #eee; 
    padding: 15px; 
    width: 100px;
    border-radius: 5px;
    text-align: left;
    z-index: 10;
}
#pagetop #login .userBox .userOption {
    display: block;
    line-height: 2em;
    cursor: pointer;
}
#pagetop #login .userBox .userOption:hover {
    color: #0071bc;
}



#cartIcon {
    width:23px; 
    height:21px; 
    border: none;
    vertical-align: -2px;
}
/***** end of Page Header *****/

#pagebody {
  padding-bottom: 50px;
}

/***** Page Footer *****/
#pagefooter {
    text-align: center;	
    padding: 10px 10px 30px 10px;
    font-size: 1em;
    color: white;
    background-color: #474747;
    margin-top: 20px;
}
#pagefooter li {
    display: inline;
    margin: 0px 15px 0 15px;
}
#pagefooter li a {
    color: white;
}
#pagefooter_copyright {
    margin-top: 15px;
    white-space: nowrap;
    font-size: 0.8em;
    text-align: center;
}
#pageFooter .navPrices {
    display: none;
}
#follow-us {
    display: inline-block;
    margin-bottom: 20px;
}
#follow-us .container {
    display: table;
    width: 380px;
}
#follow-us-text {
    display: table-cell;
    vertical-align: middle;
    text-align: right
}
#follow-us-icons {
    display: table-cell;
}
#follow-us a {
    margin-right: 20px;
}
/***** end of Page Footer *****/


/***** Book List *****/
.bookList {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  flex-flow: row wrap;
}
.bookItem {
  float: left;  
  padding: 15px;
  list-style: none;
}
/***** End of Book List *****/

/***** Library *****/
#lib {
  margin-top: 10px;
}
#lib h3 {
  margin-bottom: 10px;
  font-size: 1.3em;
  border-bottom: 1px solid #ccc;
}
#lib h2 a {
  margin-left: 30px;
  font-size: 0.8em;
  font-weight: bold;
  color: #0071bc;
  text-transform: none;
}
#lib .pic {
  float: left;
  width: 180px;
  height: 137px;
  /*border: 1px solid #aaa;*/
}
#lib .bookTitle {
  padding-top: 5px;
  width: 170px;
  text-align: center;
  clear: left;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.bookTitle .author {
  font-weight: bold;
  margin-top: 7px;
}
.morePrompt {
    margin: 70px 30px 0px 10px;
    float: left;
}
#lib .box {
  float: left;
  padding: 15px;
  list-style: none;
}
#lib .box a {
  font-size: 20px;
  margin-right: 30px;
}
.bucket {
  float: left;
  border: 0.5px solid #ccc;
  border-radius: 10px;
  width: 290px;
  height: 220px;
  margin-right: 20px;
  margin-bottom: 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.bucket:hover {
  box-shadow: 5px 8px 8px #aaa;
}

.bucket .bucketHeaderContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 291px;
    height: 100px;
    background-color: #0071bc;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
}
.bucketHeaderContainer.oldClass {
    background-color: gray;
}
.bucketHeaderContainer.subTeacher {
    background-color: #0071bc;
}
.bucketHeaderContainer.writeathon {
    background-color: #0071bc; 
}    
.bucket .bucketHeader {
    padding: 15px 20px 10px;
    text-align: left;
}
.bucketHeaderName {
    font-size: 20px;
    display: block; 
    text-align: left;
    color: white;    
}
.bucketHeaderName .fa, .bucketHeaderName .fas, .bucketHeaderName .fab, .bucketHeaderName .far {
    font-size: 1em;
} 
.bucketHeaderDetails { 
    color: white; 
    font-size: 0.9em; 
    position: absolute; 
    bottom: 10px; 
    left: 22px;
}    
.bucket .bucketBody .archiveButton, .unarchiveButton {
    position: absolute;
    bottom: 5px;
    right: 10px;
    width: 100px;
    font-size: 1em; 
    display: block; 
    padding: 5px;
    margin-top: 3px;        
}
.bucket .bucketBody {
    font-size: 0.9em;
    color: #888;
}
.bucket .bucketBody .bucketStats {
    position: absolute; 
    bottom: 50px; 
    left: 22px;
}
.bucket .bucketBody .numBooks { 

}
.bucket .bucketBody .numPeople {
    margin-left: 50px;
}
.bucket .bucketBody .created {
    position: absolute;
    bottom: 10px;
    left: 22px;
}
#lib .bookOfTheWeekLabel {
    padding: 20px 0px;
    color: #333;
    font-size: 16px;
    font-family: georgia;
    font-weight: bold;
    text-align: center;
    background-color: #ffffa5;
}
#lib ul {
    padding: 0 0 0 10px;
}
#lib .delete {
  border: none;
}
.createPromptBox {
  height: 47px;
  width: 155px;
  margin-right: 28px;
  border: 2px solid #0071bc;
  color: #0071bc;
  background-color: lightgoldenrodyellow;
  padding: 40px 10px;
  font-weight: bold;
  text-align: center;
}
.makeBookPrompt:hover {
  cursor: pointer;
}
.bkPic {
  position:relative;
  float: left;
  width: 180px;
  height: 137px;
/*  background: url(/images/index_book_bg.gif) no-repeat;
  background-size: 180px 137px;
  background-position: left 1px top 1px;*/
}
/* PW - 2017-04-24 - removed the bookspine in the new coverimg. Now embedded in the image
/*.bkPic .bookspinepic {
    position: absolute;
    margin-top: 0;
    top: 1px;
    left: 0;
    width: 8px;
    height: 127px;
    background: url(/images/spine3.png) no-repeat;
    background-size: 8px 127px;
}*/
#lib #recommendedBooksList li:first-child {
    margin-left: 15px;
}


#signup {
  width: 500px;
  margin: 0px auto;
  line-height: 1.8em;
}
#setting {
  margin: 10px auto;
  line-height: 1em;
}
.setting {
  width: 900px;
  margin: 10px auto;
}

#personalize {
  width: 800px;
  margin: 0px auto;
  margin-top: 30px;
  line-height: 1em;
}
.sjform {
  margin-top: 20px;
/*  font-size: 1.1em; */
}
.sjform div {
    margin: 20px;
}
.sjform .error {
    margin: 10px;
    text-align: center;
    line-height: 1.5em;
 }
.sjform label {
    float: left;
    width: 260px;
    text-align: right;
    line-height: 1.5em;
    padding-top: 5px;
}


.sjform .tbox {
    padding: 8px;
    border-radius: 5px;
}
.sjform li label {
    float: none;
    display: inline;
    width: 100%;
    text-align: left;
}
.sjform .msg {
  font-size: 0.8em;
  font-style: italic;
  margin-left: 40px; 
}
.sjform .tbox, .sjform select, .sjform embed, .sjform textarea{
    margin-left: 20px;
    width: 270px;
    font-size: 1em;
    border: 2px solid #ccc;
}
.sjform textarea{
    height: 160px;
    padding: 5px;
}
.sjform .radio {
  margin: 0 10px 0 20px;
}
.sjform ul {
  margin-left: 240px;
  font-size: 14px;
}
.sjform li {
  list-style-type: none;
  margin-bottom: 5px;
}

.dotlist {
  list-style-type: none;
}
.dotlist li {
  background-image: url(/images/sprite.gif);
  background-repeat: no-repeat;
  padding-left: 35px;
}
.dotlist li A {
  font-weight: bold;
}
.dotlist .bluedot {
  background-position: -215px -5px;
}
.dotlist .orangedot {
  background-position: -215px -54px;
}
.dotlist .yellowdot {
  background-position: -215px -103px;
}
.dotlist .greendot {
  background-position: -215px -152px;
}
.dotlist .pinkdot {
  background-position: -215px -201px;
}

#templates {
  margin: 20px 30px;
  padding: 0px;
}
#templates .opt {
  padding: 30px 40px;
  width: 300px;
  margin: -30px auto 0px;
}
#templates .opt img{
  padding: 2px;
  border: 2px solid #ccc;
  float: left;
  margin-right: 30px;
}
#templates h3 {
  padding-top: 20px;
}
#templates p {
  margin-top: 10px;
  padding: 20px 0px;
  line-height: 1.4em;
  font-size: 0.9em;
}



#policy {
  margin: 10px auto;
  width: 600px;
 }
 
#policy h3{
  margin-bottom: 20px;
} 


#swfContainer {
   display: block;
   width: 100%;
}
#editorHeader img{ 
  border: none;
  margin: -20px 0 -10px 20px;
}

#editorDiv {
  display: none;
  padding: 0;
  margin: 0;
}
.highlightTutorial {
    padding: 6px 25px 4px 25px;
    font-size: 18px;
    font-weight: bold;
}
.tip {
  width: 280px; 
  background-color: #333;
  -moz-border-radius: 10px;                                                      
  -webkit-border-radius: 10px;
  color: #fff;
  padding: 15px;
  opacity:0.8;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  font-size: 14px;
  line-height: 18px;
}
.tip-wrap {display: none}
.tip-text   { display: none}


.twindow {
  margin: 0 auto; 
  background: #fff url(/images/w_b_r.gif) no-repeat bottom right;
  padding: 0px;
}
.twindow img {
  border: none;
}
.twinhead {
  background: #fff url(/images/w_h_r.gif) no-repeat top right;
  margin: 0px;
  padding: 0px;
}
.twinhead h2{
  color: white;
  text-align: center;
  font-size: 1.3em;
  font-weight: normal;
  text-shadow: rgba(0,0,0,.2) 0px 2px 5px;   
}
.twinhead h2 a{
  color: white;
}

.twinhead #title {
  background: url(/images/w_h_l.gif) no-repeat top left;
  margin-top: 0px;
  padding: 15px 0px 10px 0px;
}
.twinbody {
  background: url(/images/w_b_l.gif) no-repeat bottom left;
  margin: 0;
  padding: 0px 30px 0px 30px;
}
.twinbody h3{
  font-size: 0.9em;
} 
.twinbody p{
  margin: 10px 0 10px 0;
  font-size: 0.8em;
  color: #777;
  line-height: 1.2em;
}
.twinbody li {
  margin: 2px 0 2px 15px;
  font-size: 0.8em;
  color: #777;
  list-style: disc;
}  
.my_navbar {
  text-align: left;
  width: 500px;
  margin: 20px 60px;
  padding: 5px 0 5px 20px;
  background-color: #efefef;
  color: #0071bc;
  font-weight: bold;
  border-radius: 10px;
}
.my_navbar li {
  display: inline;
}
.my_navbar .divider {
  padding: 0 10px;
  text-align: center;
  color: #777; 
}

.otable td, .otable th{ 
  padding: 10px 30px 10px 30px;
  border-bottom: 1px dotted #ccc;
  text-align: center;
}

#nbk {
position: relative; margin: -15px 0 20px 0;  overflow: hidden;
}
#nbkplayer {
position: absolute; top: 0px; left: -9000px; background-color: #fff;
}
#nbkplayer object {
outline:none;
}
#nbkinfo {
position: relative; margin-top: 63px;
}
#nbkcover {
position:absolute; left:485px; top:0px;
}
#nbkcover #img1 {
border: none; 
}
#nbkcover #img2 {
border: none; margin: -35px 0 0 190px;
}
#nbkspine {
position:absolute; left:485px; top:0px;
}
#nbkspine img {
border: none; width: 15px; height: 380px;
}
#nbkbackcover {
position:absolute; left:0px; top:0px; display: none;
}
#nbkbackcover img {
border: none; 
}
#nbkbackspine {
position:absolute; left: 495px; top:0px; display:none;
}
#nbkbackspine img {
    border: none; width: 15px; height: 380px;
}

#help_left {
    float: left;
    width: 200px;
    line-height: 1.2em;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    margin-left: 30px;
    margin-right: 30px;
}
#help_left h3 {
  color: #333;
  margin: 20px 0 10px 0;
}
#help_left ol {
  margin: 10px 0 30px 0;
}
#help_left ol li {
  margin: 5px 10px 5px 40px;
  font-size: 0.9em;
  color: #888;
  list-style-type: decimal;
}
#help_left p {
  font-size: 0.8em;
  color: #777;
  padding: 5px;
}
#help_right {
  margin: 20px auto;
  width: 650px;
  padding: 20px;
  line-height: 2em;
  font-size: 16px;
  font-size: 3.8vw; /* text scales with viewport width (vw)), if browser supports "vw"" */        
}
#help_right h2 {
  margin: 50px 0 10px 0;
}
#help_right h2, #help_right h3 {
  color: #474747; /* purple; */
}
#help_right h2 a, #help_right h3 a {
  color: #474747; /* purple; */
}
#help_right strong {
    font-size: 1.1em; 
    font-weight: bold; 
    color: #676767;
}
#help_right .img-container {
    border: 3px solid #eee; 
    border-radius: 5px;
}
#help_right ol {
  margin: 10px;
}
#help_right p {
  margin: 10px 0 20px 0;
}
#help_right ul li {
  margin: 10px 0px 10px 40px;
  list-style-type: disc;
  display: list-item;
}
#help_right ol li {
  margin: 10px 0px 10px 40px;
  list-style-type: decimal;
  display: list-item;
}
#help_right a {
    text-decoration: underline;
}
.followus {
  width: 280px; 
  margin: 20px auto;
  font-size: 0.8em;
}
.followus img {
  float: right; 
  border: none;
  margin-left: 5px;
  padding: 1px;
  border: 1px solid #ddd;
}
.followus a {
  font-weight: bold;
   color: #f7931e;
}

.y_box {
  width: 271px;
}  
.y_header {
  height: 25px; 
  background: url(/images/y_header.gif) no-repeat;
}
.y_footer {
  height: 24px; 
  background: url(/images/y_footer.gif) no-repeat;
}
.y_body {
  background: url(/images/y_body.gif) repeat-y;
  padding: 0 20px 0 20px;
  color: #333;
}

.g_box {
  width: 426px;
}  
.g_header {
  height: 32px; 
  background: url(/images/g_header.gif) no-repeat;
}
.g_footer {
  height: 27px; 
  background: url(/images/g_footer.gif) no-repeat;
}
.g_body {
  background: url(/images/g_body.gif) repeat-y;
  padding: 0 80px 0 30px;
  color: #333;
}

.d_box {
  width: 606px;
  position: relative;
}
.d_box img {
  border:none; 
}
.d_header {
  height: 36px; 
  background: url(/images/d_header.gif) no-repeat;
}
.d_footer {
  height: 38px; 
  background: url(/images/d_footer.gif) no-repeat;
}
.d_body {
  background: url(/images/d_body.gif) repeat-y;
  padding: 0 30px 0 10px;
  height: 150px;
  color: #333;
}
.d_box .d1 {
  float: left;
  width: 100px;
  height: 120px;
  font-size: 2em;
  color: white;
  text-align: center;
}
.d_box .d2 {
  float: left;
  width: 250px; 
  font-size: 0.9em;  
}
.d_box .d2 p {
  padding-left: 20px;
}
.d_box .d3 {
  margin-left: 350px;
  text-align: center;
}
#arrow_box {
 width: 606px;
 height: 153px;
 background: url(/images/arrow_box.gif) left top no-repeat;
}
#arrow_box ul {
 padding: 20px 40px 30px 80px;
} * html #arrow_box ul {
  padding-top: 10px;
}
#arrow_box li {
  list-style: none;
  text-align: right;
  padding: 2px 0 2px 0;
}
#cart_table {
width:100%; border: 1px solid #ccc
}
#cart_table img{
  border: none;
}
#cart_table td, #cart_table th {
  text-align: right;
}


.demo-info
{
  position:     absolute;
  top:        0;
  right:        4px;
  padding:      1px 2px;
  font-size:      0.9em;
  color:        #888;
}
.stable {
  width: 100%;
}
.stable img {
  border: none;
  vertical-align: -5px;
}

.stable td, .stable th { 
  padding: 15px 7px;
  text-align: left;
  font-weight: normal;
  font-size: 0.8em;
}
.stable th {
 padding: 10px 10px 5px 10px;
 text-decoration: underline;
}


/* header on privacy and share pages */
.settingheader h1 {
    display: inline-block;
    font-size: 1.5em;
    font-weight: bold;
    color: #676767 !important;
    text-shadow: none;
}
.setting .block {
   margin: 40px 0 20px 170px;
   padding: 20px;
   background-color: #ddd;
   width: 580px;
   border-radius: 10px;
}
.setting .block .action {
   margin-left: 150px;
}
.setting form ul {
   font-size: 16px;
   line-height: 2.5em;
   margin: 0;
}


/* login/sign up form */
.fb-signin-button {
    background-image: url("/images/facebook-sign-in-button.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 300px;
    height: 72px;
    margin: 10px 0 0 40px;
    cursor: pointer;
}
/* login/signup buttons */
.signin-button .icon svg, .signin-button .icon img {
    width: 100%;
    height: 100%;
    max-width: 36px;
    object-fit: scale-down;
}
.signin-button .icon {
    padding: 0 7% 0 5.25%;
    height: 60%;
    display: inline-block;
}
.signin-button {
    display: flex;
    align-items: center;
    font-size: 20px;
    height: 60px;
    width: 285px;
    font-weight: 500;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    border: 2px #ccc solid;
    border-radius: 5px;
    /* box-shadow: 0 -2px 0 rgba(0, 0, 0, .04), 0 2px 2px rgba(0, 0, 0, .25); */
    margin: 10px 0 0 40px;
}
.signin-button:hover {
    background-color: #eeeeee;
}

#signup .intro {
    margin-bottom: 20px;
}
#signup form {
    padding: 15px;
}
#signup #alreadyMember {
    padding: 30px 10px 10px 20px;
}
#school .tbox {
    margin-bottom: 20px;
}
#signup #why {
    color: #777;
    margin-left: -20px;
    font-size: 0.9em;
}
#signup .msg {
    font-size: 1em;
}
#signup .orSeparator {
    margin: 25px 0 0 170px;
}
.signin-button img {
    width: 300px;
}
#bdaypicker select {
    margin: 3px 10px 0 0;
    padding: 5px;
    width: auto;
    min-width: 70px;
    font-size: 1em;
    border: 2px solid #ccc;
}
#bdaypicker fieldset { 
    border: none; 
    line-height: 1.1em; 
}

/* forgot? prompt on login and sign up pages */
.forgot {
    margin-left: 5px; 
    cursor: pointer;
    color: #0071bc;
    text-decoration: underline;
}
#tos {
    margin-left: 40px;
    margin-top: 20px;
    font-size: 0.8em;
    width: 320px;
}
#tos a {
    color: #555;
    font-weight: bold;
}
#readers {
    height: 450px;
}

/***** Home Access *****/
#homeAccess {
    margin-top: 30px;
}
#homeAccess .intro {
    margin: 20px 35px 0 70px;
    line-height: 1.3em;
}
#homeAccess .sjform label {
    width: 200px;
    font-weight: bold;
}
#homeAccess .sjform .tbox {
    width: 200px;
}
#homeAccess .sjform div {
    margin: 15px;
}
#homeAccess input[type="submit"] {
    margin-left: 20px;
}

/** home access summary **/
#homeAccess .container {
    width: 650px;
    margin: 20px auto;
    padding: 30px;
    line-height: 1.5em;
}
#homeAccess .subheader {
    margin-top: 20px;
}
#homeAccess .summary .homeAccount {
    padding: 20px;
    background-color: #ddd;
    margin: 30px 0 20px 40px;
    border-radius: 10px;
}
#homeAccess .summary .homeAccount label {
    margin-right: 10px;
}
/* placeholder support for older browsers */
.my-placeholder {
    font-family : "Montserrat", arial, sans-serif ! important;
}

/* COPPA */
#options {
    display: none;
}
#coppa {
    font-size: 0.9em;
}
#coppa p {
    margin-top: 10px;
}
#coppa #logo {
    width: 250px;
    height: 75px;
}
#coppa #directions {
    font-size: 1.3em;
    width: 350px;
    margin: 30px auto 10px;
}
#coppa ul.coppa {
    width: 800px;
    margin: 0 auto;
}
.coppa li {
  float: left;
  vertical-align:top;
  margin-right: 5px;
}
.coppa li img {
    width: 149px;
    height: 149px;
}
#coppa-signature {
    padding: 10px;
    display: inline-block;
    border: 1px solid #aaa;
    width: 400px;
    height: 149px;
}
#coppa-signature p {
    margin: 10px 0px 20px 0px;
}
#coppa .consentform table {
    margin-left: 240px;
}
#coppa .img-with-text {
    width: 149px;
}
#coppa .img-with-text p {
    margin: 0;
    text-align: center;
    font-size: 1.3em;
}
#coppa .img-with-text img {
    margin: 0 auto;
}

#coppa #coppa-steps {
    margin: 20px 0 20px 50px;
    font-size: 18px;
}
#coppa #coppa-steps input[type="checkbox"] {
   margin-right: 15px;
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  padding: 10px;
}
#coppa #coppa-steps p {
    margin-top: 15px;
}
#coppa #coppa-steps .ha-key {
    letter-spacing: 2px;
    text-decoration: underline;
    color: blue;
    font-weight: bold;
}

/* Teacher dashboards */
#studentsWrapper, #teachersWrapper {
    margin: 80px 0 0 0;
/*    border: 2px solid #ccc; 
    border-radius: 10px;
*/
}
#students input {
    padding: 3px;
    border: 2px solid #ccc;
    border-radius: 5px;
}
.dashboard .metric {
    font-size: 24px;
    font-weight: bold;
    color: #555;
    letter-spacing: 1px;
}
#lib #emailParent {
    position: absolute;
    left: 0;
    box-shadow: 2px 2px 6px 4px #777;
    background-color: #eee;
    z-index: 1000;
    border: 1px solid #777;
    border-radius: 10px;
    margin: 0px;
    width: 710px;
    padding: 15px;
    display: none;
}
#emailParent .invalid {
    color: crimson;
}
#emailParent #message {
    float: left;
    margin-top: 9px;
}
#emailParent #splitCode {
    font-size: 1.5em;
    font-weight: bold;
}
#emailParent .sjform label {
    width: 80px;
}
#emailParent .sjform .tbox {
    width: 500px;
}
#emailParent .sjform .highlight {
    border: 2px solid red;
}
#emailParent .cancel {
    cursor: pointer;
}
#emailParent .disabled {
    background-color: #aaa;
}
#classTime-container {
    padding: 0 0 20px 0;
    border-radius: 10px;
    width: 500px;
    margin: 10px auto;
}
#classTime-elements {
    width: 430px;
    margin: 0px auto;
    position: relative;
}
#remainingTime-container {
    display: inline-block;
}
#remainingTime-watchface {
    width: 180px;
    height: 85px;
    border-radius: 10px;
    background-color: white;
    border: 2px solid #f5f5f5;
    margin-bottom: 10px;
    display: flex;
}
#remainingTime {
    margin: 15px auto;
    font-size: 48px;
    font-weight: bold;
}
#classTime-elements .standardButton {
    display: inline-block;
    padding: 20px 25px;
    position: absolute;
    top: 15px;
    font-size: 20px;
}
#classTime-elements .startButton {
    left: 210px;
}
#stopButton {
    left: 340px;
}
#classTime-elements .disabled {
    background: lightblue;
    cursor: default;
}
.inputBox {
    width: 150px;
    font-size: 1em;
    padding: 10px 5px;
    border: 2px solid #ccc;
    border-radius: 5px;
    margin-left: 10px;
}
.lastModifiedDate {
    width: 170px;
    text-align: center;
    margin-top: 3px;
    font-size: 0.8em;
}

/* Art Manager */
#artManager {
    padding:50px;
}
#artManager .item {
    padding: 20px;
    border-bottom: 1px solid #aaa;
}
#artManager .item h1 {
    margin-left: 30px;
}

/***** Book Stats (likes, reads,...) in Library *****/
.stats {
    width: 220px;
    text-align: right;
    line-height: 28px;
}
.stats .stat {
    width: 110px;
    text-align: left;
    display: inline;
}
.stats #numLikes {
    margin-left: 30px;
}


/***** Full book cards (book cover + meta info) for library and profile *****/
.cardSection {
    width: 221px;
    border-right: 2px solid #f0f0f0;
    border-bottom: 2px solid #f0f0f0;
    border-left: 2px solid #f0f0f0;
    border-radius: 3px;
    background-color: white;
}
.cardCover {
    position: relative;
    width: 221px;
    height: 173px;
}
.cardCover img {
    width: 222px;
    height: 173px;
    margin-left: -1px;
}
/* PW - 2017-04-24 - removed the bookspine in the new coverimg. Now embedded in the image
/*.cardCover .bookspine {
    margin-top: 0;
    position: absolute;
    top: 1px;
    left: 0px;
    width: 8px;
    height: 162px;
    background: url(/images/spine3.png) no-repeat;
    background-size: 8px 162px;
}*/
.cardMeta {
    position: relative;
/*    margin-top: -11px;*/
    padding-top: 15px;
    width: 221px;
    height: 275px;
}
.cardMeta .title {
    font-size: 1.1em;
    padding: 0 10px;
}
.cardMeta .description {
    padding: 0 10px;
    font-size: 0.95em;
    margin-top: 5px;    
    line-height: 1.3em;
    color: #555;
    max-height: 180px;
    text-overflow: ellipsis; 
    overflow: hidden;
}
.cardMeta .bottomContainer{
    width: 201px;
    position: absolute;
    bottom: 0px;
    padding: 10px 10px 0px;
    background-color: #f0f0f0;
}
.cardMeta .by {
    font-size: 0.9em;
    text-overflow: ellipsis; 
}
.cardMeta .stats {
    font-size: 0.9em;
    margin-top: 5px;
    width: 100%;
    text-align: left;
    line-height: 28px;
}
.cardMeta .stats .badge {
    display: inline;
    margin-left: -8px;
    margin-right: 5px;
}
.cardMeta .stats .numViews {
    display: inline;
    text-wrap: nowrap;
}
.cardMeta .stats .numViews img {
    width: 24px;
    height: 18px; 
    margin-bottom: -4px;    
}
.cardMeta .stats .numLikes {
    display: inline;
    text-wrap: nowrap;    
    margin-left: 5px;
}
.cardMeta .stats .numLikes img {
    width: 24px;
    height: 24px;
    margin-bottom: -5px;
}

/***** Search *****/
#searchBox {
    width: 155px; 
    margin-top: 28px; 
    padding: 10px; 
    border: 2px solid #aaa; 
    position: relative;  
    float: left;
    border-radius: 5px;
}
#searchBox.loggedOut {
    margin-top: 32px; 
}
#searchBox #keywords {
    width: 130px;
    font-size: 16px; 
    border: none; 
    outline: none;
}
#searchBox #searchButton {
    position: absolute; 
    right: 10px; 
    top: 9px;
    width: 24px; 
    height: 24px; 
    background: url('/images/search-icon24.png') no-repeat; 
    border: none; 
}
#searchButton:hover {
    cursor: pointer;
}
.searchFilter {
    text-decoration: underline;
    margin-right: 30px;
}
.searchFilter:hover {
    font-weight: bold;
}
.code {
    font-family: Pragmata, Menlo, 'DejaVu LGC Sans Mono', 'DejaVu Sans Mono', Consolas, 'Everson Mono', 'Lucida Console', 'Andale Mono', 'Nimbus Mono L', 'Liberation Mono', FreeMono, 'Osaka Monospaced', Courier, 'New Courier', monospace;
}
#couponbox {
    margin-left: 10px;
}
#couponbox div { padding-top: 10px; }
#couponbox .couponlabel {
    display: inline-block;
    min-width: 140px;
    vertical-align: top;
}
#couponbox #creditbalance {
    display: inline-block;
}
#couponbox #appliedcoupons {
    display: inline-block;
}
#couponbox #appliedcoupons &gt; :first-child {
    padding-top: 0px;
}

/***** On/off switch:  https://proto.io/freebies/onoff/   *****/
.onoffswitch {
    position: relative; width: 85px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #CCCCCC; border-radius: 36px;
}
.onoffswitch-inner {
    display: block; 
    width: 200%; 
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 36px; padding: 0; line-height: 36px;
    font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "YES";
    padding-left: 9px;
    background-color: seagreen; 
    color: #fff;
}
.onoffswitch-inner:after {
    content: "NO";
    padding-right: 9px;
    background-color: white; 
    color: #555;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 36px; margin: 0px;
    background: #333;
    position: absolute; top: 0; bottom: 0;
    right: 45px;
    border: 2px solid #CCCCCC; border-radius: 36px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

/***** Book Templates *****/
.template input, .template select {
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
}
.template input[type=submit] {
    border-radius: 5px;
}
.template td {
    font-size: 16px;
}    
.template .onoffswitch label.onoffswitch-label {
    float: none;
    width: initial;
    text-align: left;
    line-height: initial;
    padding: 0px;
}
.template .onoffswitch-inner:before {
    content: "girl";
    background-color: #FF1493; /* hot pink */
    color: white;
}    
.template .onoffswitch-inner:after {
    content: "boy";
    background-color: blue;
    color: white;
}

/***** General modal box styling *****/
.modalbox {
    padding: 20px;
}
.modalbox:hover {
    cursor: default;
}
.modalbox .cancel {
    float: right;
    cursor: pointer;
    font-size: 20px;
}
.modalCloseX {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    color: #777;
    font-size: 1.2em;
    font-weight: bold;
}
.monospace {
    font-family: monospace;
    white-space: pre;
}

/***** Narration *****/
.tile .fa.narration-icon {
    color: #676767;
    font-size: 1.3em;
    margin: 0;
    margin-left: 2px;
    vertical-align: middle;
    padding-bottom: 5px;
}

/*** Google Classroom Import ***/
.importGC {
    background-image: url("/images/googleclassroom-circle96.png");
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: bottom;
    width: 48px; 
    height: 48px;
}
.gcLabel {       
    display: inline-block;
    font-weight: bold; 
    font-family:'Roboto', Montserrat, arial, sans-serif;
    vertical-align: middle;
    padding-left: 5px;
    padding-bottom: 15px;
    font-size: 24px;
}

/*** Clever Classroom Import ***/
.importCleverClasses {
    background-image: url(/images/clever-180x180.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: text-bottom;
    width: 32px;
    height: 32px;
}

/**** other ****/
#divider {
  height: 40px;  
}

/*
#classNav {
    font-size: 1.4em;
    margin-top: 20px;
    padding: 10px 10px 10px 40px;
    background-color: #eee;
}
#classNav .activeStep {
    color: seagreen; 
    font-weight: bold;
    border-bottom: 2px solid seagreen;
}
#classNav .nonActiveStep {
    color: #777;
}
#classNav a.activeStep:hover {
    text-decoration: none;
}
*/

/* Styling for removing items */
.storyX {
    visibility: hidden;
}
.storyX:hover {
    cursor: pointer;
}
.desk .bookItem .storyX {
    visibility: hidden;
}
.desk .bookItem:hover .storyX {
    visibility: visible;
}
.showdelete .storyX {
    visibility: visible;
}
.deleteLabel {
    margin-left: 10px;
}

/* General styling that should take precedence */
.none {
  display: none;
}
.hidden {
  visibility: hidden;
}
.fa-times {
    font-weight: normal;
    color: #888;
}

@supports (--custom:property) {
    [style*="--aspect-ratio"] {
        height: 0;
        padding-top: calc(100% / (var(--aspect-ratio)));
        position: relative;
    }
    [style*="--aspect-ratio"] &gt; div:first-child {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* iPads in portrait orientation */
    @media screen and (min-width: 480px) and (max-width: 1000px) and (max-aspect-ratio: 1/1) {
        #topnav .navPrices {
            display: none;
        }
        #pageFooter .navPrices {
            display: inline;
        }
        #pagetop #logo {
            width: 150px;
            margin-top: 36px;
            margin-right: 20px;
        }
        #pagetop #login.loggedOut {
            margin-top: 35px;
        }
    }
</pre></body></html>