html { height: 100%; }
body { 
  height: 90%;
  background: url('../img/brick_bg.jpg'); 
  background-size: 100% 100%;  
}

img { border: 0;} /* Seriously, IE? Sheesh */

#container { width: 100%; height: 100%; }

#whitebox {
  background: #fff;
  margin: 2% auto 2% auto;
  width: 80%;
  padding: 60px;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  -webkit-box-shadow: 2px 2px 18px rgba(50, 50, 50, 1);
  -moz-box-shadow:    2px 2px 18px rgba(50, 50, 50, 1);
  box-shadow:         2px 2px 18px rgba(50, 50, 50, 1);
  overflow: hidden;
  position: relative;
}

/* SET FOR GRIZELDA */
#whitebox { min-height: 500px; }

/*#whitebox.setheight { height: 86%; }*/

#whitebox.setheight { height: 100%; }

#logo { float: left; width: 335px; height: 52px; background: url(../img/aa_hd.png); cursor: pointer;}

nav { float: right; }
nav ul li { display: inline; margin-right: 40px;}
nav ul li span { 
  color: #111; 
  font-family: 'Annie Use Your Telescope', cursive;
  font-size: 1.5em;  
  cursor: pointer;
}
nav ul li span.events { font-size: 2em; background-color: yellow; padding: 0 20px 0 }

header { 
  clear: both; float: none;
  position: relative; 
  margin-top: 80px;
  border-top: 1px solid #6d9d9d; border-bottom: 1px solid #6d9d9d; 
  color: #032c32; 
  font-family: 'Oswald', sans-serif;
  font-size: 2em; 
  padding: 15px  0 15px 350px;
  overflow: hidden;
}
#page-title-wrapper { position: relative; left: 50px;}
#page-title { position: relative; }
.whoosh { font-style: italic; }



h1 { 
  clear: both; float: none;
  position: relative; 
  border-bottom: 1px solid #6d9d9d; 
  color: #032c32; 
  font-family: 'Oswald', sans-serif;
  font-size: 1.5em; 
  overflow: hidden;
}

/*
**    Motion blue for title
*/
header .motionblur {
    zoom: 1;
    *filter: alpha(opacity=10); /*IE6+7 Hack*/
    opacity: 0.1;
    line-height: 1em;
    margin-top: -38px;
    position: absolute;
    font-style: italic;
    display: block;
    -webkit-transition: margin-left 0.5s ease-in-out;
     -khtml-transition: margin-left 0.5s ease-in-out;
       -moz-transition: margin-left 0.5s ease-in-out;
         -o-transition: margin-left 0.5s ease-in-out;
            transition: margin-left 0.5s ease-in-out;
}
@media \0screen {header .motionblur {filter: alpha(opacity=10);}} /*IE8 Hack*/
.m1 {margin-left: -2px;}
.m2 {margin-left: -4px;}
.m3 {margin-left: -6px;}
.m4 {margin-left: -8px;}
.m5 {margin-left: -10px;}
.m6 {margin-left: 2px;}
.m7 {margin-left: 4px;}
.m8 {margin-left: 6px;}
.m9 {margin-left: 8px;}
.m10 {margin-left: 10px;}

.booklink { font-style: italic; color: #769b94; }
.cookie-cover { cursor: pointer; }
.other_books { cursor: pointer; }
.book-title { font-style: italic; font-weight: bold; font-size: 1.5em; }
.book-title a { color: #769b94; }

.about a { color: #769b94; }
 
 
#graphics {position: relative; margin-top: -70px; float: left;}

#graphics div { position: absolute; width: 354px; }

#graphics .comingsoon { position: absolute; top: 280px; left: 130px; font-family: 'Oswald', sans-serif; color: #032c32;  font-size: .9em; }
.cookie-cover { width: 295px; height: 291px; background: url(../img/cookie_cover.png) no-repeat; }
.school-cover { width: 295px; height: 291px; background: url(../img/school_cover.png) no-repeat; }
.warlock-cover { width: 300px; height: 320px; background: url(../img/worst_warlock_clean.jpg) no-repeat 20px 20px; }
.grizelda-cover { width: 300px; height: 320px; background: url(../img/grizelda_cover_300.jpg) no-repeat 20px 20px; }
.review-cover { position: absolute; margin-top: -50px; left: -350px; }


#graphics .about { 
  width: 300px; height: 320px; background: #fff url(../img/annie.png) no-repeat 0 -70px; *filter: alpha(opacity=0); /*IE6+7 Hack*/
  opacity: 0;  display: none;
}
/*#graphics .about.funny { 
  background: url(../img/annie_pirate.png) no-repeat 0 -20px;
}*/

#graphics .events {
  width: 295px; height: 291px; background: url(../img/grizelda_cover_300.jpg) no-repeat; *filter: alpha(opacity=0); /*IE6+7 Hack*/
  opacity: 0;  display: none;
}

#graphics .other_books { 

  width: 290px; height: 300px; background: url(../img/worst_warlock_clean.jpg); 
  overflow: hidden;

  *filter: alpha(opacity=0); /*IE6+7 Hack*/
  opacity: 0;  display: none;
}
    
#graphics .contact {
  width: 320px; height: 340px; background: #fff url(../img/contact_robot.png) no-repeat 0 20px; *filter: alpha(opacity=0); /*IE6+7 Hack*/
  opacity: 0;  display: none;
}
#graphics .questions {
  width: 230px; height: 358px; background: #fff url(../img/questions_robot.png) no-repeat 80px 20px; *filter: alpha(opacity=0); /*IE6+7 Hack*/
  opacity: 0;  display: none;
  }
  
#graphics .reviews {
 width: 295px; height: 291px; background: url(../img/grizelda_cover_300.jpg) no-repeat; *filter: alpha(opacity=0); /*IE6+7 Hack*/
  opacity: 0;  display: none;
  }

#graphics .order-wrapper    { width: 300px; text-align: center; position: relative; top: 350px; }
#graphics .order-wrapper .preorder  { 
  /*font-family: 'Annie Use Your Telescope', cursive; */
  font-family: 'Open Sans', sans-serif; 
  font-size: 1em; line-height: 1.5em; 
  width: auto;
  padding: 15px;
  background: #a0c3bc;
  border-radius: 6px;
}
/*#graphics .order-wrapper .buy  { 
  font-family: 'Open Sans', sans-serif; 
  font-size: 1em; line-height: 1.5em; 
  padding: 15px;
  border: 1px solid #005A8F;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 30px;
}*/

.cookie-cover,
.grizelda-cover
{ cursor: pointer; }

#graphics .order-wrapper .buy a {
  border: 1px solid #5E96B7;
  padding: 5px 10px;
  border-radius: 20px;
  font-family: 'Open Sans', sans-serif; 
  font-size: 1em; 
  line-height: 2.5em; 
  text-decoration: none;
  color: #005A8F;
  white-space: nowrap;
}
#graphics .order-wrapper .buy a:hover { background: #B4C9D6; }

/*#graphics .order-wrapper .buy:hover {background: #ccccff;}
#graphics .order-wrapper .buy a { color: #000; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#graphics .order-wrapper .preorder a {
  color: #fff; text-decoration: none;
   text-shadow: 2px 2px #a0beb8;
}*/
#graphics .order-wrapper .preorder:hover { 
  background-color: #769b94; cursor: pointer; 
}

#graphics .order-wrapper .preorder:hover a { text-shadow: 1px 1px #417067; }



#graphics .home .buy .title { font-style: italic; }

article { 
  font-family: 'Open Sans', sans-serif; font-size: 1.0em; color: #032c32; 
  line-height: 24pt;
  float: left;
  width: 50%;
  min-width: 500px;
  /*max-width: 700px; */
  margin-top: 10px;
  margin-bottom: 50px; /* gives footer some space */
  display: none;
  left: 410px;
  position: absolute;
  overflow-x: hidden; overflow-y: scroll; 
}
article.home { display: block; position: relative; left: 400px; /*width: 100%;*/ }
article.about,
article.contact { overflow: hidden; margin-left: 50px;} /* Need to bump these 50px for unkonwn reason */
article.questions,
article.other_books,
article.events,
article.reviews { position: relative; min-width: 0;}

article.events .event { padding: 20px; margin: 20px 0 20px 0;     border: 1px solid #5E96B7; border-radius: 20px; }
article.events .event.done { border-color: #999; background-color: #eee; color: #bbb; position: relative;}
article.events .event.done a { color: #bbb; }
article.events .date_time a { font-size: 1.5em; color: #5E96B7}


article form.contact-form input,
article form.contact-form textarea {
  font-size: 1.2em;
  width: 70%;
  padding: 8px 25px;
  color: #032c32;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 25px;
  border: 0;
  background: #f0f0f0;
}

article form.contact-form textarea {  height: 100px;}

article form.contact-form label { display: inline-block; position: relative; top: -5px;  width: 80px;}
article form.contact-form label.message { top: -100px;}
article form.contact-form .g-recaptcha { margin-left: 80px;}
article form.contact-form button { display: inline-block; position: relative; left: 80px;}

#reviews { margin-top: 20px; }
#reviews .book-title { margin-bottom: 20px; }
.review { margin-bottom: 20px; clear: both; float: none; }
.review-text { font-weight: bold; }
/* 
  .review-text::before,
  .review-text::after { content: "\""; } 
*/
.review-byline { font-style: italic; text-align: right; }
.review-byline::before { content: "-- "; }
  
.cliffhanger { font-style: italic; }


.qa {margin-top: 20px;  }
.qa:first-child { margin: 0; }
.qa .byline { color: #999; font-size: .8em; position: relative; left: 70px;}
.qa .number { font-family: 'Annie Use Your Telescope', cursive; font-size: 4em; position: relative; top: 40px;}
.qa .question { display: inline-block; left:70px; font-size: 1.1em; font-weight: bold; position: relative; }
.qa .answer { margin-left: 70px;}

/*#thumbnails { position: relative; left: 20%; }
#thumbnails-click { font-family: 'Oswald', sans-serif; color: #032c32; position: relative; left: 120px; font-size: .9em; }*/

/* below is fo rmultiple thumbnails*/
#thumbnails { position: relative; /*left: 20%; */ }
#thumbnails a img {border: 1px solid #aaa; margin-right: 20px; border-radius: 6px;}
#thumbnails a img:hover {border: 1px solid #666; margin-right: 20px; }
#thumbnails a:first-child { position: relative;  /*left: 40px;*/}
#thumbnails a:nth-child(1) { z-index: 10;}
#thumbnails-click { font-family: 'Oswald', sans-serif; color: #032c32; position: block; /*left: 120px; top: -20px;*/ font-size: .9em; }

/**
**    BUTTONS
*/

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  text-shadow: 0 -1px 1px #333;
}


.btn-lg {
  padding: 10px 16px;
  font-size: 1.1em;
  line-height: 1.33;
  border-radius: 6px;
}
.btn-primary {
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}
.btn-mellow {
  color: #032c32;
  background-color: #eee;
  border-color: #ddd;
  text-shadow: 0 -1px 1px #fff;
  border-radius: 15px;
}

.btn:hover          { background-color: #367FBF; }
.btn-mellow:hover  { background-color: #ddd; }

.nowrap { white-space: nowrap; }

footer { 
  position: absolute; bottom: 20px; clear: both; float: none; width: 80%; text-align: center; 
  font-family: 'Open Sans', sans-serif; font-size: 1em; 
  color: #aaa;
}

footer table { margin: auto; }

footer .social-icons {
  position: relative; 
  margin-top: 20px;
}
footer .social-icons a {
  opacity: 0.5; 
  padding-left: 20px;
}
footer .social-icons a:hover {  opacity: 1; }