/*
Copyright 2012 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License

See /humans.txt for details on authors and contributors

*/

/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; background: black; }

body, button, input, select, textarea { font-family: serif; color: #222; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #95231a; color: #fff; text-shadow: none; }
::selection { background: #95231a; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* FONTS */

@font-face {
  font-family: 'LeagueGoth';
  src: url('League_Gothic-webfont.eot');
  src: url('League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
       url('League_Gothic-webfont.woff') format('woff'),
       url('Leauge_Gothic-webfont.ttf') format('truetype');
}

/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }

/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
 * 1. Correct color not inheriting in IE6/7/8/9
 * 2. Correct alignment displayed oddly in IE6/7
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/*
 * Remove inner padding and border in FF3/4: h5bp.com/l
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* Clear fix For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}


/* ==|== primary styles =====================================================
   Author: Cory Shaw
   ========================================================================== */
a.internal { background: rgba(255,241,120,0.3); padding: 0 2px 0 2px; text-decoration: none; }

a.internal:hover { background: rgba(255,241,120,0.6); padding: 0 2px 0 2px; text-decoration: none; }


strong a:hover {
  text-decoration: none;
}

#main {
  padding: 40px 10px 10px 10px;
}

#binding-container {
  margin-top: -800px;
  position: relative;
}

.bindingRadialDropShadow {
  position: absolute;
  width: 200px;
  height: 740px;
  background: ;
  z-index: 0;
  left: 50%;
  margin-left: -100px;
  top: 00px;
  -moz-box-shadow: 0 0 100px #000000;
  -webkit-box-shadow: 0 0 100px #000000;
  box-shadow: 0 0 100px #000000;
}

.loading {
  width: 16px;
  height: 16px;
  position: absolute;
  z-index: 9999;
  bottom: 34px;
  right: 90px;
  background: url(../img/ajax-loader.gif);
  display: none;
}

#loading {
  position: absolute;
  left: 43%;
  top: 340px;
  font-family: LeagueGoth;
  font-size: 25px;
  letter-spacing: .1em;
  background: url(../img/Appward_Loading_silver.png) no-repeat;
  width: 242px;
  height: 155px;
  text-align: center;
  padding-top: 165px;
  color: #b4b4b4;

}

.page ol, .page ul {
  margin: 0 0 20px 0;
  padding-left: 20px;
}

.page ul li, .page ol li {
  margin-bottom: 10px;
}


#container {
  margin: auto;
}

#background {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(../img/background.jpg) top center;
  position: fixed;
  opacity: 0.4;
}

#binding {
  max-width: 1280px;
  min-height: 700px;
  background:
    url(../img/binding_top_left.png) top left no-repeat,
    url(../img/binding_bottom_left.png) bottom left no-repeat,
    url(../img/binding_bottom_right.png) bottom right no-repeat,
    url(../img/binding_top_middle.png) top center no-repeat,
    url(../img/binding_top_right.png) top right no-repeat,
    url(../img/binding_top.png) top center repeat-x,
    url(../img/binding_bottom_left.png) bottom left no-repeat,
    url(../img/binding_bottom_middle.png) bottom center no-repeat,
    url(../img/binding_left.png) left repeat-y,
    url(../img/binding_right.png) right repeat-y,
    url(../img/binding_bottom.png) bottom center repeat-x,
    url(../img/binding_bg.jpg) repeat;
    repeat-x;
  position: relative;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 23px;
  -moz-box-shadow: 0 0 24px rgb(0, 0, 0);
  -webkit-box-shadow: 0 0 24px rgb(0, 0, 0);
  box-shadow: 0 0 24px rgb(0, 0, 0);
  opacity: 1;

}

#book {
  width: 100%;
  position: relative;
}

#pages {
  position: relative;
  z-index:30;
}

.pageTurnTargetLeft {
  width: 50px;
  bottom: 22px;
  height: 700px;
  position: absolute;
  z-index: 3000;
  left: 3%;
  cursor: pointer;

}

.PageTurnPreviewRight{
  width: 0px;
  background: url(../img/pageTurnPreview-right.png);
  background-size: 100%;
  bottom: 22px;
  height: 700px;
  position: absolute;
  z-index: 2999;
  right: 42px;
}

.PageTurnPreviewLeft{
  width: 0;
  background: url(../img/pageTurnPreview-left.png);
  background-size: 100%;
  bottom: 22px;
  height: 700px;
  position: absolute;
  z-index: 2999;
  left: 38px;
}

.pageTurnTargetRight {
  width: 50px;
  bottom: 22px;
  height: 700px;
  position: absolute;
  z-index: 3000;
  right: 3%;
  cursor: pointer;
}

.pagesLeft {
  height: 700px;
  width: 19px;
  background: url(../img/pages_left.jpg);
  position: absolute;
  left: 25px;
  top: 21px;
  z-index: 1;
}

.pagesRight {
  height: 700px;
  width: 19px;
  background: url(../img/pages_right.jpg);
  position: absolute;
  right: 25px;
  top: 21px;
  z-index: 1;
}

#pages section {
  display: block;
  width: 1200px;
  min-height:699px;
  position: absolute;
  overflow: hidden;
  left: 3%;
  top: 2px;
  -webkit-box-shadow: 0 0 4px rgba(75, 70, 63, 0.18);
  -moz-box-shadow: 0 0 4px rgba(75, 70, 63, 0.18);
  box-shadow: 0 0 4px rgba(75, 70, 63, 0.18);
}

#pages section.turning {
  -moz-box-shadow: inset 0 1px 15px black;
  -webkit-box-shadow: inset 0 1px 15px black;
  box-shadow: inset 0 1px 15px black;
}

#pages section.turning.right {
  right: auto;
  right: 3%;
}

#pages section.turning.left {
  -moz-box-shadow: 7px 0 44px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 7px 0 44px rgba(0, 0, 0, 0.6);
  box-shadow: 7px 0 44px rgba(0, 0, 0, 0.6);
}

section .turnshadow {
  height: 800px;
  width: 5%;
  position: absolute;
  z-index: 20;
}

section .turnshadow.right {
  right: 0;
  background-image: -webkit-gradient(linear, left bottom, right bottom, from(rgba(255, 255, 255, 0)), to(rgba(70, 48, 31, 0.55)));
  background-image: -moz-linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(70, 48, 31, 0.55) 100%);
}

section .turnshadow.left {
  right: 0;
  background-image: -webkit-gradient(linear, right bottom, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(70, 48, 31, 0.55)));
  background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(70, 48, 31, 0.55) 100%);
}

#pages section .page {
  display: block;
  width: 540px;
  float: left;
  font-family: Crimson Text;
  position: absolute;
  min-height: 700px;
  padding: 5px 30px 0 30px;
  font-size: 1.2em;
  font-family: 'Crimson Text', serif;
  line-height: 1.3em;
  -webkit-box-shadow: 0px 3px 25px #444;
  -moz-box-shadow: 0px 3px 25px #444;
  box-shadow: 0px 3px 25px #444;
}

#pages section .page.one {
  background: url(../img/page_left_binding.jpg) repeat-y right,
  url(../img/page_bg.jpg) right top;
  left: 0;
  z-index: 2;
}

#pages section .page.two {
  background: url(../img/page_right_binding.jpg) repeat-y left,
  url(../img/page_bg.jpg) right top;
  left: 600px;
}

#pages section .page-innerwrap {
  width: 520px;
  margin: 0 auto;
}

#pages section.turning.left .page.two {
  left: auto;
  right: 0;
  float: right;
  overflow: hidden;
}

#pages section.turning.left .page.two .page-innerwrap {
  float: right;
}

#pages section h2 {
  margin-top: 10px;
  }

#pages section p {
  margin-top:5px;
}

#pages section h1 {
  text-align: center;
  font-family: LeagueGoth;
  font-size: 35px;
  margin: 0 0 0 0;
  padding: 0 0 0x 0;
  line-height: 1.2em;
  text-transform: uppercase;
}

#pages section h2.main-caption {
    margin: 0 0 20px 0;
    padding: 0;
    text-align: center;
    font-family: Crimson Text;
    font-style: italic;
    font-weight: normal;
    letter-spacing: .05em;
    font-size: 21px;
}

#pages section h2{
  font-size: 17px;
  font-family: Crimson Text;
  margin: 0;
  padding: 0;
}

#pages section h3{
    font-family: Crimson Text;
    margin: 0 0 .8em 0;
    padding: 0;
    margin-bottom: 0px;
    font-size: 1em;
}

#pageflip-canvas {
  position: absolute;
  z-index: 100;
  padding-top: ;
  display: none;
}

#pages section .twocol {
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 20px;
  min-height: 550px
}

#pages section .hasHeader .twocol {
  min-height: 450px
}

#pages section .page.one {
  margin-right: 1px;
}

p.page-title {
  text-align: center;
  width: 100%;
  font-size: 13px;
  font-style: italic;
  margin-bottom: 20px;
}





/* BOOK NAVIGATION TABS */


a.booknav {
  text-indent: -4000px;
  position: absolute;
  display: block;
  margin-top: 42px;
  z-index: 0;
  text-decoration: none;
  color: white;
  background: #95231a;
  font-family: LeagueGoth;
  font-size: 1.3em;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.4);
  text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
  width: 50px;
  margin: 0;
  height: 32px;
  top: 70px;
  padding: 10px 5px 10px 5px;
}

a.booknav.search {
  background: url(../img/icon_search.png) no-repeat 24px 13px, #ad2923;
  background: url(../img/icon_search.png) no-repeat 24px 13px, linear-gradient(270deg, #9e312c 0%, #741f1d 100%) #ad2923;
  right: -15px;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}

a.booknav.home {
  background: url(../img/icon_home.png) no-repeat 8px, #ad2923;
  background: url(../img/icon_home.png) no-repeat 8px, linear-gradient(270deg, #b71919 0%, #850d0d 100%) #ad2923;
  left: -15px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

a.booknav.home.current {
  box-shadow: -2px 1px 4px rgba(0, 0, 0, 0.29);
  height: 30px;
  z-index: 9999;
}

a.booknav.search.current {
  box-shadow: 2px 1px 4px rgba(0, 0, 0, 0.29);
  height: 30px;
  z-index: 9999;
}

a.booknav.current em {
  background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(192, 165, 144, 0.35) 100%), rgba(105,95,83,0.1);
  width: 80px;
  height: 50px;
  position: absolute;
  top: -1px;
  left: 60px;
  display: block;
  border: 1px solid #dbd2bf;
  background: -webkit-gradient(linear, right bottom, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(192, 165, 144, 0.35))), rgba(105,95,83,0.1);
}

a.booknav.search.current em {
  left: -81px;
  top: 0;
  height: 48px;
  background: -moz-linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(192, 165, 144, 0.35) 100%), rgba(105,95,83,0.1);
  background: -webkit-gradient(linear, left bottom, right bottom, from(rgba(255, 255, 255, 0)), to(rgba(192, 165, 144, 0.35))), rgba(105,95,83,0.1);
  border-right: none;
}

/* Test links for manual page turn */

p.pageNum {
  position: absolute;
  width: 520px;
  bottom: 0px;
  text-align: center;
  font-size: 12px;
}





/* TOC */

nav {
  position: absolute;
  z-index: 9999;
  top: 0;
  right: 20px;
  display: none;
}

nav #pencil {
  width: 174px;
  height: 60px;
  background: url(../img/pencil.png);
  position: absolute;
  top: 0;
  z-index: 999;
  left: -129px;
  top: -9px;
}

nav #toc {
  position: relative;
  background: url(../img/toc_bg.gif);
  padding: 0px 15px 0px 15px;
  -moz-box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
  opacity: 1;
  margin-top: -250px;
  float: left;
}

nav #toc hr, #shareChapter hr {
  border: 0;
  height: 4px;
  width: 252px;
  background: url(../img/toc_hr.gif);
  margin: 15px 0 13px 0;
}

nav #toc a {
  text-decoration: none;
  color: #717171;
}

nav #toc a:hover {
  color: #7b9a1d;
}






/* Share styles */

.shareOptions {
  position: absolute;
  z-index: 99999;
  margin-top: -5px;
  margin-left: -5px;
  font-family: 'crimson Text', serif;
  padding: 7px 10px 10px 53px;
  background: url(../img/share_bg.png) top right no-repeat;
  width: 120px;
  height: 189px;
  display: none;
}

.shareOptions h3 {
  border-bottom: 1px solid #461f00;
  font-size: 12px;
  margin-top: 0;
  padding-bottom: 6px;
  text-align: center;
  letter-spacing: -0.1em;
  width: 110px;
}

.shareOptions a {
  display: block;
  color: #461f00;
  font-style: italic;
  font-size: 15px;
  text-decoration: none;
}

.shareOptions .social-btn {
  margin-bottom: 7px;
  margin-top: 7px;
}

.shareOptions .fb-like-btn {
  margin-top: 3px;
  margin-bottom: 5px;
}

.shareOptions a.print {
  background: url(../img/icon_share.png) no-repeat 0 -30px;
  padding: 4px 0 4px 30px;
  margin-bottom: 5px;
  margin-top: 7px;
  margin-left: 4px;
}

.shareOptions a.bookmark-page {
  background: url(../img/icon_share.png) no-repeat 0 -57px;
  padding: 4px 0 4px 30px;
  margin-left: 4px;
}


div.share {
  width: 22px;
  height: 18px;
  background: url(../img/icon_share.png);
  display: inline-block;
  margin: 0 0 0 10px;
  position: absolute;
  left: 63px;
  top: 35px;
  z-index: 9999;
  cursor: pointer;
}

div:hover.share {
  background-position: -28px 0px;
}

.shareChapter {
  position: absolute;
  color: #555;
  top: -500px;
  left: 45px;
  z-index: 9999;
  background: url(../img/share_bg.png) no-repeat;
  padding: 39px 0 0px 15px;
  font: 21px/1.5em 'Reenie Beanie', cursive;
  width: 150px;
  height: 199px;
  display: none;
  -webkit-transform: rotate(-15deg);
}

.shareChapter p {
  padding: 0;
  margin: 0;
  font: 21px/1.5em 'Reenie Beanie', cursive;
}

.shareChapter a {

}

.shareChapter p.sharetxt {
  font-family: Crimson Text;
  margin-bottom: 12px;
}

.shareChapter a.close {
  width: 24px;
  height: 24px;
  background: url(../img/icon_close.png) no-repeat;
  display: block;
  margin: 6px 0 0 0;
  position: absolute;
  top:  -2px;
  right: 8px;
}

.shareChapter hr {
  margin: 0 auto;
}

p.sharethischapter {
  text-align: center;
}

.shareChapter #shareOptions {
  margin: 10px 0 22px 0;
}

.shareChapter a.twitter {
  width: 64px;
  height: 82px;
  display: block;
  background: url(../img/icon_twitter.png) no-repeat;
  float: left;
  margin-right: 15px;
  margin-left: 80px;

}

.shareChapter a.facebook {
  width: 64px;
  height: 82px;
  display: block;
  background: url(../img/icon_facebook.png) no-repeat;
  float: left;
  margin-right: 15px;
}






/* chapter nav */

.chapterNav {
  position: absolute;
  left: 25%;
  height: 10px;
  margin-left: -12px;
  top: 661px;
  z-index: 9999;
  font-family: Crimson Text;
}

.chapterNav a {
  width: 10px;
  height: 10px;
  background: url(../img/icon_chapter_nav.png);
  display: block;
  float: left;
  margin-right: 3px;
  position: relative;
  text-decoration: none;
}

.chapterNav a.current, .chapterNav a:hover {
  background-position: -10px 0;
}

.chapterNav .chapterPreview {
  position: absolute;
  z-index: 9999;
  bottom: 25px;
  width: 341px;
  background: url(../img/paper_bg.jpg) no-repeat;
  left: -161px;
  display: none;
  -moz-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.44);
  -webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.44);
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.44);
}

.chapterNav .chapterPreview p.chapterNum {
  float: left;
  width: 65px;
  display: block;
  text-align: center;
  padding-top: 0px;
  line-height: 0;
  font-size: 31px;
  font-weight: bold;
  color: #3c2408;
  border-right: 1px solid red;
}

.chapterNav .chapterPreview p.chapterName {
  float: left;
  display: block;
  text-transform: uppercase;
  font-size: 14px;
  height: 30px;
  font-weight: bold;
  color: #3c2408;
  width: 230px;
  padding-left: 20px;
  text-align: middle;
  padding-top: 5px;
  border-left: 1px solid #3c2408;
  line-height: 1.8em;
}

.chapterNav .chapterPreview .arrow {
  position: absolute;
  bottom: -19px;
  height: 20px;
  width: 30px;
  width: 30px;
  height: 19px;
  background: url(../img/icon_tech.png) 0 -173px;
  left: 44%;
  z-index: ;
}






/* TOC */

.toc-block{
  padding-top: 20px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.toc-chapter {
  margin: 0 auto;
  margin-top: 2.5em;
  width:31em;
  cursor: pointer;
}

.toc-chapter .whichchapter {
  float: left;
  font-weight: bold;
  font-size: .6em;
  font-family: Crimson Text;
  line-height: 1em;
  padding-right: 20px;
  height: 4em;
  color: #C6AE92;
  border-right: 1px solid #C6AE92;
}

.toc-chapter .whichchapter em {
  font-family: LeagueGoth;
  display: block;
  text-align: center;
  font-size: 3.4em;
  font-style: normal;
  padding-top: 11px;
}

.toc-chapter .chapterDescription {
  float: left;
  padding-left: 20px;
  width: 81%;
}

.toc-chapter .chapterDescription p.chapterTitle{
  font-size: 1.7em;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 1.1em;
  padding: 0 !important;
  margin: 0 !important;
  font-family: LeagueGoth;
}

.toc-chapter .chapterDescription p.chapterContents {
  font-size: 1.1em;
  color: #C6AE92;
  padding: 0 !important;
  margin: 0 !important;
  font-style: italic;
  line-height: 1em;
}

.mobileNav, .mobileNext {
  display: none;
}






/* ABOUT APPWARD */

#slideshow-container { width:476px; height:541px; margin:20px auto; background:#fbfbfa; -moz-box-shadow: 0px 0px 5px #666;  -webkit-box-shadow: 0 0 10px #666; box-shadow: 0 0 10px #666; position:relative; }
#slideshow-container #slideshow-border { width:450px; height:450px; padding:13px; background:#fbfbfa;  }
#slideshow-container .pics { height: 450px; width: 450px; margin:0; overflow: hidden;   }
#slideshow-container .pics img { height: 450px; width: 450px;  }
#slideshow-container #slide-shadow { -moz-box-shadow:inset 0 0 30px #666; -webkit-box-shadow:inset 0 0 30px #666; box-shadow:inset 0 0 30px #666; position:absolute; top: 13px; left:13px; height:450px; width:450px; z-index:999; }
#slideshow-container #caption { height:65px; background:#fbfbfa; margin:0 auto; padding:0; width:376px; text-align:center; float:left;  }
#prev2 { float:left; width:50px; height:65px; background:#fbfbfa; text-align:center; cursor:pointer;}
#next2 { float:right; width:50px;height:65px; background:#fbfbfa;text-align:center; cursor:pointer; }







/* CASE STUDIES */

.caseStudy {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
}


.caseStudyImg:hover {
  cursor: -moz-zoom-in;
  cursor: -webkit-zoom-in;
}

#container.zoomed .caseStudyImg {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
}

#container.zoomed {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
}

section {
  -moz-transition: transform 0.5s ease-in-out 0s;
  -webkit-transition: -webkit-transform 0.8s ease-in-out 0s;
  -webkit-transform: scale(1);
}

section.leftside {
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
}

section.rightside {
  -webkit-transform-origin: 100% 0%;
  -moz-transform-origin: 100% 0%;
}

section.zoom {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  position: absolute;
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;

}

.lightbox {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0,0,0,0.7);
  z-index: 2;
  display: none;
}

.caseStudy .caseStudyImg {
  position: relative;
}

section.turning .caseStudy .caseStudyImg {
  z-index: 1;
}

.caseStudyDescription .description p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: Helvetica, Arial, sans-serif;
  color: #988a6f;
  font-size: .8em;

}

.caseStudyDescription .description h3 {
  margin: 0 0 5px 0 !important;
  color: #461f00;
}

.caseStudyDescription .description {
  padding-right: .5em;
}

.caseStudyDescription .icon {
  float: left;
  width: 65px;
  height: 45px;
  margin-right: 10px;
  border-right: 1px solid #461f00;
  display: block;
  background-image: url(../img/icon_tech.png);
  margin-bottom: 50px;
}

.caseStudy .techArrow {
  width: 30px;
  height: 19px;
  background: url(../img/icon_tech.png) 0 -173px;
  position: absolute;
  display: none;
}

.caseStudyDescription {
  display: none;
  background: url(../img/paper_bg.jpg);
  position: absolute;
  bottom: 0px;
  -moz-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.44);
  -webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.44);
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.44);
  padding: 10px 0 0 0;
  width: 100%;
}

.caseStudy .techIcons {
  text-align: center;
  margin: 0 auto;
  min-height: 50px;
}


.caseStudy .techIcons a {
  display: inline-block;
  background-image: url(../img/icon_tech.png);
  background-repeat: no-repeat;
  width: 36px;
  height: 36px;
  margin-top: 10px;
}

.techIcons a.semantics {
  background-position: 8px 4px;
}

.techIcons a.storage {
  background-position: -29px 4px;
}

.techIcons a.deviceAccess {
  background-position: -66px 4px;
}

.techIcons a.connectivity {
  background-position: -104px 4px;
}

.techIcons a.multimedia {
  background-position: -141px  4px;
}

.techIcons a.graphics {
  background-position: -178px 4px;
}

.techIcons a.performance {
  background-position: -215px 4px;
}

.techIcons a.css3 {
  background-position: -252px 4px;
}

.techIcons a:hover {
  background-position-y: -27px;
}

.caseStudyDescription.semantics .icon {
  background-position: 3px -70px;
}

.caseStudyDescription.storage .icon {
  background-position: -73px -70px;
}

.caseStudyDescription.deviceAccess .icon {
  background-position: -143px -70px;
}
.caseStudyDescription.connectivity .icon {
  background-position: -212px -70px;
}
.caseStudyDescription.multimedia .icon {
  background-position: 3px -117px;
}
.caseStudyDescription.graphics .icon {
  background-position: -73px -117px;
}
.caseStudyDescription.performance .icon {
  background-position: -143px -117px;
}
.caseStudyDescription.css3 .icon {
  background-position: -212px -117px;
}






/* BOOK CONTENT STYLES */

img.center, .page .image_block img.center {
  margin: 0 auto;
  display: block;
}

#pages .page.one.tocColumn p.slim {
  width: 333px;
  margin: 0 auto;
}

#slideshow-container { width:476px; height:541px; margin:20px auto; background:#fbfbfa; -moz-box-shadow: 0px 0px 5px #666;  -webkit-box-shadow: 0 0 10px #666; box-shadow: 0 0 10px #666; position:relative; }
#slideshow-container #slideshow-border { width:450px; height:450px; padding:13px; background:#fbfbfa;  }
#slideshow-container .pics { height: 450px; width: 450px; margin:0; overflow: hidden;   }
#slideshow-container .pics img { height: 450px; width: 450px;  }
#slideshow-container #slide-shadow { -moz-box-shadow:inset 0 0 30px #666; -webkit-box-shadow:inset 0 0 30px #666; box-shadow:inset 0 0 30px #666; position:absolute; top: 13px; left:13px; height:450px; width:450px; z-index:999; }
#slideshow-container #caption { height:65px; background:#fbfbfa; margin:0 auto; padding:0; width:376px; text-align:center; float:left;  }
#prev2 { float:left; width:50px; height:65px; background:#fbfbfa; text-align:center; cursor:pointer;}
#next2 { float:right; width:50px;height:65px; background:#fbfbfa;text-align:center; cursor:pointer; }
body { background:black }

.page img {
  max-width:100%;
}

.page blockquote {
  margin:0;
  padding:0;
  font-style:italic;
}

.page .image_block img {
  margin: 0;
  padding: 0;
}
.page .image_block p.caption {
  margin-bottom: .5em;
}

#pages section .page p.caption {
    font-size: .9em;
}

.page .image_block p.mb175 {
  margin-bottom: 1.75em;
}

.page .w30, .page img.w30 {
  max-width:30%;
  padding-top:10px;
}

.page .w33, .page img.w33 {
  max-width:33%;
  padding-top:10px;
}

.page .w50, .page img.w50 {
  max-width:50%;
  padding-top:10px;
}

.page .w57, .page img.w57 {
  max-width:57%;
  padding-top:10px;
}

.page .w67, .page img.w67 {
  max-width:67%;
  padding-top:10px;
}

.page .w80, .page img.w80 {
  max-width:88%;
  padding-top:10px;
}

.page .w90, .page img.w90 {
  max-width:90%;
  padding-top:10px;
}

.page .w100, .page img.w100 {
  max-width:100%;
  padding-top:10px;
}

.page .lefty {
  float:left;
  margin:6px 22px 6px 0;
}

.page .righty {
  float:right;
  margin:6px 0 6px 22px;
}
.page .case_mobile, .page img.case_mobile {
  padding-top: 0px;
  margin-top: 0px;
}

.page .centery {
  display:block;
  margin:0px auto;
}

.page .callout {
  text-transform:uppercase;
  font-family: LeagueGoth;
  font-size: 1.3em;
  color:#c6ae92;
  text-align:center;
  border-top:1px solid #c6ae92;
  border-bottom:1px solid #c6ae92;
  line-height:1.5em;
  padding:1.1em 0 2.1em 0;
  background:url('../img/callout-icon.png');
  background-repeat:no-repeat;
  background-position:bottom center;
  min-width: 33%;
}

.page .callout a {
  color:#c6ae92;
  text-decoration: none;
}

.page .callout a:hover {
  color:#b49c80;
  text-decoration: none;
}

.page .caption {
  font-size: .85em;
  font-style:italic;
  text-align:center;
  line-height: .85em;
}

.page .book-ul, .page .book-ol, .page .best-ol, .page .help_ul {
  margin:0;
  padding:0;
}

.page .book-ul li, .page .book-ol li {
  list-style-type:none;
  vertical-align:text-top;
  font-size: 1.0em;
    margin-bottom:.9em;
    min-height: 2.2em;
  overflow: visible;
}

.page .book-ul li a, .page .book-ol li a {
  color: #000;
}

.page .book-ul li a:hover, .page .book-ol li a:hover {
  color: #000;
}

.page .best-ol li {
  list-style-type:none;
  vertical-align:text-top;
  margin-bottom:15px;
  font-size: 1.0em;
  line-height:1.2em;
    margin-bottom:.9em;
  min-height: 2.2em;
  overflow: visible;
}

.page .help_h3 {
  width: 100%;
  margin: .25em 0 0 0;
  padding: .25em 0 .5em 0;
  color: #000;
  width: 100%;
  font-size: .9em;
  font-style: italic;
}

#pages section .page .help_h3 {
    width: 100%;
    margin: .25em 0 0 0;
    padding: .25em 0 .25em 0;
    color: #000;
    width: 100%;
    font-size: .9em;
    font-style: normal;
    font-weight: bold;
    letter-spacing: -.05em;
    text-transform: uppercase;
}

.page .top_line {
  border-top: 1px solid #e1d2c0;
  padding-top: .25em;
  margin-top: .25em;
}

.page .help_h4 {
  width: 100%;
  margin: .25em 0 0 0;
  padding: .25em 0 .5em 0;
  border-top: 1px solid #e1d2c0;
  color: #000;
  width: 100%;
  font-size: .9em;
  font-style: italic;
}

.page .help_ul {
  margin: 0;
  padding: .25em 0 .25em 0;
}

.page .ext_ul {
  margin: .25em 0 0 0;
  padding: .5em 0 .5em 0;
  border-top: 1px solid #e1d2c0;
}

.page .help_ul li,
.page .ext_ul li {
  list-style-type:none;
  vertical-align:text-top;
  font-size: 1.0em;
    margin-bottom:.5em;
  overflow: visible;
  list-style-type: none;
  text-align: left;
  font-weight: normal;
  font-style: italic;
  text-transform: none;
  color: #000;
  border-bottom: 0px;
}

.page .help_ul li a {
  font-family: LeagueGoth;
  font-size: 1.4em;
  text-transform: uppercase;
  color: #c6ae92;
  font-style: normal;
  text-decoration: none;
  background:url('../img/li_external_sprite.png') no-repeat;
  background-position: 0px -76px; /* NEW */
  padding: 0 0 3px 26px;
}

.page .help_ul li a:hover {
  background:url('../img/li_external_sprite.png') no-repeat;
  background-position: 0px -176px; /* NEW */
  color:#b49c80;
  text-decoration: none;
}

.page .ext_ul li a {
  font-family: LeagueGoth;
  font-size: 1.4em;
  text-transform: uppercase;
  color: #c6ae92;
  font-style: normal;
  text-decoration: none;
  background:url('../img/li_external_sprite.png') no-repeat;
  background-position: 0px -276px; /* NEW */
  padding: 0 0 3px 26px;
}

.page .ext_ul li a:hover {
  background:url('../img/li_external_sprite.png') no-repeat;
  background-position: 0px -376px; /* NEW */
  color:#b49c80;
  text-decoration: none;
}

.page .help_ul li a sup,
.page .ext_ul li a sup {
  color: #c6ae92;
}

.page .help_ul li a:hover sup,
.page .ext_ul li a:hover sup {
  color:#b49c80;
}

.page p.best-i {
  font-style: italic;
}

.page .big-bullets {
  font-family: LeagueGoth;
  font-size: 2.2em;
  color:#c6ae92;
  float:left;
  padding:10px 11px 5px 3px;
  vertical-align:text-top;
}

.page .search_form {
  margin-top: -4.75em;
  height: 4em;
  font-size: 1.1em;
  background: none;
  width: 100%;
  position: relative;
}

.page .typing {
  margin-top: -31.5em;
  font-size: 1.1em;
  height: 4em;
  background: none;
  width: 100%;
}

.page .search_form input.the_bar {
  font-family: LeagueGoth;
  font-size: 3.8em;
  color: #f2efea;
  width: 100%;
  background: none;
  text-align: left;
  padding-left: 40px;
  text-transform: uppercase;
  outline: none;
  border: 0;
  width: 90%;
}

.page .typing p.search_p {
  font-family: LeagueGoth;
  font-size: 3.8em;
  color: #f2efea;
  margin: 0;
  padding: .25em;
  background: none;
  text-align: center;
  text-transform: uppercase;
  border: 0;
}

.page .typing p.search_p span.search_cursor {
  font-size: .9em;
  padding-left: .1em;
  top: -.15em;
  position: relative;
}

#s_b::-webkit-input-placeholder { color: #f2efea; }
#s_b::-moz-placeholder { color: #f2efea; }

.page .search_form .the_button, .page .search_form .the_button {
  font-family: LeagueGoth;
  font-size: 4em;
  color: #f2efea;
  text-align: center;
  margin: 21% 0 0 56%;
  background: none;
  width: 20%;
  padding: .25em;
  border: 0;
  display: block;
  text-decoration: none;
}

iframe#sr_iframe {
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-width: initial;
  border-color: initial;
  width: 100%;
  height: 650px;
}





/* Quiz list styles */

div:not(#bert) > fieldset > ul > li > input[type='checkbox'] {
  opacity: 0;
  float: left;
  width: 30px;
  margin-right: -30px;
}

div:not(#bert) > fieldset > ul > li > input[type='checkbox'] + label {
  margin: 0px;
  left: 0;
  display: block;
  clear: none;
  padding: 4px 0 6px 34px;
  cursor: pointer;
  background: url(../img/check_off.png) no-repeat;
}

div:not(#bert) > fieldset > ul > li > input[type='checkbox']:checked + label {
  background: url(../img/check_on.png) no-repeat;
}

li.quiz {
  padding-left: 10px;
}







/* Search Results Main */

sup {
  color: #b49c80;
}

.footnote {
  width: 100%;
  font-size: .9em;
  border-top: 1px solid #e1d2c0;
  padding-top: .5em;
  font-style: italic;
}

.mt1 {
  margin-top: 1em;
}

.mt2 {
  margin-top: 2em;
}

.mt3 {
  margin-top: 3em;
}

.mt4 {
  margin-top: 4em;
}






/* Link Preview Styles */

.previewWindow,
.previewWindowLow {
  display: block;
  position: absolute;
  background: url(../img/paper_bg.jpg);
  width: 300px;
  z-index: 99999;
  padding: 12px;
  -moz-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.44);
  -webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.44);
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.44);
  display: none;
  text-decoration: none;
  color: #461f00;
}

.previewWindow:hover,
.previewWindowLow:hover {
  color: #461f00;
}

.previewWindow img,
.previewWindowLow img {
  max-width: 300px;
}

.previewWindow .caption,
.previewWindowLow .caption {
  text-align: center;
  text-transform: uppercase;
  padding-top: 10px;
  font-size: 1.1em;
  font-style: normal;
  font-weight: bold;
}

.previewWindow .arrow {
  width: 33px;
  height: 14px;
  background: url(../img/icon_arrow_thumb.png) no-repeat;
  position: absolute;
  left: 11px;
}

.t_fix {
  position: absolute;
  bottom: 0;
  height: 0px;
  width: 1px;
}

.image_block.checklist {
  position: relative;
}

.checklist img {
  position: absolute;
  top: 0;
}

.checklist ul {
  position: relative;
  z-index: 1;
  padding-top: 20px;
}

.checklist ul li {
  list-style: none;
  font-family: LeagueGoth;
  font-size: 1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  line-height: .80em;
  opacity: .3;
}

.checklist ul li.Q1 {
  letter-spacing: .05em;
  font-size: 2.5em;
}

.checklist ul li.Q2 {
  letter-spacing: .02em;
  font-size: 3.31em;
}

.checklist ul li.Q3 {
  letter-spacing: -.02em;
  font-size: 4.06em;
}

.checklist ul li.Q4 {
  letter-spacing: 0em;
  font-size: 3.40em;
}

.checklist ul li.Q5 {
  letter-spacing: 0em;
  font-size: 3em;
}

.checklist ul li.Q6 {
  letter-spacing: 0em;
  font-size: 2.99em;
}

.checklist ul li.Q7 {
  letter-spacing: .03em;
  font-size: 2.5em;
}

.checklist ul li.Q8 {
  letter-spacing: .03em;
  font-size: 3.10em;
}

.checklist ul li.excellent {
  letter-spacing: -.01em;
  font-size: 3.9em;
}

.checklist .checkmark {
  background: url(../img/checklist_checkmark.png);
  width: 93px;
  height: 68px;
  position: absolute;
  z-index: 1;
  top: 356px;
  right: 60px;
  opacity: .3;
}

.mobileNextSpacer {
  display: none;
}





/* Bookmark Styles */


.bookmark {
  position: absolute;
  z-index: 9999;
  width: 140px;
  left: 40%;
  margin-left: -70px;
  top: -600px;
}

.bookmark .bg {
  background: url(../img/bookmark_bg.png);
}

.bookmark a {
  color: #d7a015;
  text-transform: uppercase;
  text-decoration: none;
  font-family: LeagueGoth;
  text-align: center;
  font-size: 1.5em;
  display: block;
  border-top: 1px solid #d7a015;
  padding: 10px 0 10px 0;
  width: 105px;
  margin: 0 auto;
}

.bookmark a:hover {
  color: #e1bc22;
}

.bookmark a:last-child{
  border-bottom: 1px solid #d7a015;
}





/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */





/* Media Query Adjustments */

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

  #pages section .twocol {
    -moz-column-count: 1;
    -moz-column-gap: 0px;
    -webkit-column-count: 1;
    -webkit-column-gap: 0px;
    column-count: 1;
    column-gap: 0px;
  }

  #pages section .page {
    width: 420px;
    font-size: 1.19em; /* TMC was 1.19em; */
  }

  #binding {
    width: 1020px;
  }

  #pages section {
    width: 960px;
    left: 3%;
    top: 2px;
  }

  #pages section .page .page-innerwrap {
     width: 420px;
  }


  #pages section .page.two {
    left: 480px;
  }

  p.pageNum {
    width: 400px;
  }

  .toc-block {
    font-size: 1.1em;
  }

  .chapterNav {
    margin-left: -26px;
  }

  div.share {
    left: 53px;
  }

  .caseStudy .caseStudyImg img {
    width: 450px;
  }

  #cover {
    width: 500px;
  }

  .PageTurnPreviewLeft {
    left: 30px;
  }

  .PageTurnPreviewRight {
    right: 30px;
  }

  .bindingRadialDropShadow {
    display: none;
  }

  .page .callout {
    text-transform:uppercase;
    font-family: LeagueGoth;
    font-size: 1.2em;
    color:#c6ae92;
    text-align:center;
    border-top:1px solid #c6ae92;
    border-bottom:1px solid #c6ae92;
    line-height:1.4em;
    padding:.6em 0 1.6em 0;
    background:url('../img/callout-icon-narrow.png');
    background-repeat:no-repeat;
    background-position:bottom center;
    min-width: 33%;
  }

  .chapterContents {
      max-width: 330px;
  }




  /* Search Page */

  .page .search_form {
    font-size: 1.1em;
  }

  .page .typing {
    margin-top: -28.5em;
    font-size: 1em;
  }

  .page .search_form input.the_bar {
    font-size: 3.4em;
  }

  .page .typing p.search_p {
    font-size: 3.4em;
  }

  .page .typing p.search_p span.search_cursor {
    font-size: .8em;
    padding-left: 0em;
    top: -.15em;
    position: relative;
  }

  .checklist ul {
    font-size: .8em;
  }

  .checklist .checkmark {
    top: auto;
    bottom: 23%;
    right: 30px;
    background-size: 80%;
    background-repeat: no-repeat;
  }

  .checklist {
    height: 450px;
    width: 500px;
  }

  .toc-chapter .chapterDescription p.chapterTitle{
    font-size: 1.3em;
  }

  .toc-chapter .chapterDescription p.chapterContents {
    font-size: .9em;
  }




}


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

  .toc-chapter .chapterDescription p.chapterTitle{
    font-size: 1.2em;
  }

  .toc-chapter .chapterDescription p.chapterContents {
    font-size: .8em;
  }

  #binding {
    min-width: 10px;
    width: 100%;
  }

  .bookmark {
    left: 50%;;
  }

  .caseStudy .caseStudyImg img {
    width: 100%;
  }

  #pages section {
    width: 96%;
    top: 2px;
    left: 3%;
    padding: 0;
    margin: 0 auto;
    position: relative;
    min-width: 0;
    min-height: 0;
  }


  #pages section .twocol {
    -moz-column-count: 1;
    -moz-column-gap: 0px;
    -webkit-column-count: 1;
    -webkit-column-gap: 0px;
    column-count: 1;
    column-gap: 0px;
  }

  #pages section .page {
    width: 88%;
    padding: 4% 3% 0 3%;
    position: relative;
    min-height: 0;
    -webkit-box-shadow: 0px 0px 4px #444;
    -moz-box-shadow: 0px 0px 4px #444;
    box-shadow: 0px 0px 4px #444;
    padding-bottom: 20px;
    font-size: 1.4em;
    margin-bottom: 4px;
  }

  #pages section .page.two {
    left: 0;
  }

  #pages section .page.one {
    background:
    url(../img/page_bg.jpg) right top;
  }

  #pages section .page.two {
    background:
    url(../img/page_bg.jpg) right top;
  }


  #pages section .page .page-innerwrap {
    width: 100%;
  }

  p.page-title{
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #pages section p.page-title {
    margin-top: 3px;
  }

  #pages section p.page-title.leftside {
    margin-top: 12px;
  }

  #binding {
    max-width: 1280px;
    min-height: 940px;
    background:
      url(../img/binding_top_left.png) top left no-repeat,
      url(../img/binding_bottom_left.png) bottom left no-repeat,
      url(../img/binding_bottom_right.png) bottom right no-repeat,
      url(../img/binding_top_right.png) top right no-repeat,
      url(../img/binding_top.png) top center repeat-x,
      url(../img/binding_bottom_left.png) bottom left no-repeat,
      url(../img/binding_left.png) left repeat-y,
      url(../img/binding_right.png) right repeat-y,
      url(../img/binding_bottom.png) bottom center repeat-x,
      url(../img/binding_bg.jpg) repeat;
      repeat-x;
    position: relative;
    margin: auto;
    padding-top: 20px;
  }

  #background {
    background: none;
    display:none;
  }

  #pages section .twocol {
    min-height: 0;
  }

  #pages section .hasHeader .twocol {
    min-height: 0;
  }

  #main {
    padding: 0;
  }

  a.booknav {
    display: none;
  }

  .nextprev {
    display: none;
  }

  #shareChapter {
    left: 50%;
  }

  .page .pageNum {
    display: none;
  }

  .chapterNav {
    display: none;
  }

  div.share {
    left: 5%;
  }

  .mobileNav {
    width: 30px;
    display: block;
    position: absolute;
    height: 16px;
    z-index: 999;
    right: 6%;
    top: 30px;
    background: url(../img/icon_mobileNav.png) no-repeat 6px 5px, -moz-linear-gradient(270deg, #b71919 0%, #850d0d 100%) #ad2923; /* Old browsers */
    background:url(../img/icon_mobileNav.png) no-repeat 6px 5px, -webkit-gradient(linear, left top, left bottom, from(#9e312c), to(#741f1d)) #ad2923;
    color: white;
    padding: 11px;
    font-family: 'Crimson Text', serif;
    font-weight: bold;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 2px 2px 7px rgba(20, 9, 9, 0.38);
    -webkit-box-shadow: 2px 2px 7px rgba(20, 9, 9, 0.38);
    box-shadow: 2px 2px 7px rgba(20, 9, 9, 0.38);
    opacity: 1;
    cursor: pointer;
  }

  .mobileNav.down {
    background: url(../img/icon_mobileNav.png) no-repeat -51px 5px, -moz-linear-gradient(270deg, #b71919 0%, #850d0d 100%) #ad2923; /* Old browsers */
    background:url(../img/icon_mobileNav.png) no-repeat -51px 5px, -webkit-gradient(linear, left top, left bottom, from(#9e312c), to(#741f1d)) #ad2923;
  }


  .mobileNav .mobileMenu {
    display: none;
    position: absolute;
    width: 220px;
    right: 0;
    top: 34px;
    background: -moz-linear-gradient(270deg, #b71919 0%, #850d0d 100%) #ad2923; /* Old browsers */
    background: #741f1d;
    padding: 10px;
    -moz-box-shadow: 2px 4px 7px rgba(0, 0, 0, 0.37);
    -webkit-box-shadow: 2px 4px 7px rgba(0, 0, 0, 0.37);
    box-shadow: 2px 4px 7px rgba(0, 0, 0, 0.37);
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
  }

  .mobileNav .mobileMenu a {
    display: block;
    color: white;
    padding: 7px;

    font-weight: bold;
    text-decoration: none;
  }

  .pagesLeft, .pagesRight {
    display: none;
  }

  p.page-title {
    display: none;
  }

  #pages .page.one.tocColumn p.slim  {
    width: 97%;
  }

  .pageTurnTargetLeft, .pageTurnTargetRight{
    display: none;
  }

  .mobileNextSpacer {
    height: 70px;
    display: block;
  }

  .mobileNext {
    display: block;
    background: url(../img/next_chapter.jpg) no-repeat right;
    padding: 0px;
    height: 46px;
    padding-top: 20px;
    text-align: center;
    text-decoration: none;
    margin-top: 30px;
    font-weight: bold;
    font-family: LeagueGoth;
    font-size: 40px;
    text-transform: uppercase;
    color: #c6ae92;
    text-align: right;
    padding-right: 80px;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .mobileNext:hover {
    color: #a5927b;
  }

  .page .search_img {
    display: none;
  }
  .page .search_form {
    font-size: 1.1em;
    width: 100%;
  }
  .page .search_frame {
    margin-bottom: 1em;
    padding-bottom: 1em;
  }
  .page .typing {
    margin-top: 1em;
    font-size: 1em;
    color: #000;
    width: 75%;
  }
  .page .search_form input.the_bar {
    font-size: 2.4em;
    color: #000;
    width: 75%;
    border: 1px solid #ded0c0;
    padding: .25em;
    text-align: center;
  }
  .page .typing p.search_p {
    font-size: 2.4em;
    color: #000;
    padding: .25em;
  }
  .page .typing p.search_p span.search_cursor {
    font-size: .8em;
    padding-left: 0em;
    top: -.15em;
    position: relative;
    color: #000;
  }
  .page .search_form .the_button {
    color: #c6ae92;
    font-size: 2.4em;
    float: right;
    text-align: right;
    border: 0;
    text-decoration: none;
    margin: -1em 0 0 0;
    padding: 0 5% 0 0;
  }
  .page .search_form a:hover.the_button {
    color:#b49c80;
    text-decoration: none;
  }

  #binding-container {
    margin-top: 0px;
  }

  .checklist {
    height: 590px;
  }

  .checklist .checkmark {
    right: 70px;
    bottom: 25%;
  }

  .toc-chapter .whichchapter em {
    font-size: 2.8em;
  }


}



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

  img {
    width: 100%;
  }

  img.noscale {
    width: auto;
  }

  div.whichchapter {
    display: none;
  }

  .toc-chapter {
    margin: 0 auto;
    margin-top: 2.5em;
    width:98%;
    cursor: pointer;
  }

  .caseStudyDescription .icon {
    display: none;
  }

  .page .typing {
    margin-top: 1em;
    font-size: 1em;
    color: #000;
    width: 75%;
  }

  .page .search_form input.the_bar {
    font-size: 1.6em;
    color: #000;
    width: 75%;
    border: 1px solid #ded0c0;
    padding: .125em;
    text-align: center;
  }

  .page .typing p.search_p {
    font-size: 1.6em;
    color: #000;
    padding: .125em;
  }

  .page .search_form .the_button {
    color: #c6ae92;
    font-size: 1.5em;
    float: right;
    text-align: right;
    border: 0;
    text-decoration: none;
    margin: -.75em 0 0 0;
    padding: 0 10% 0 0;
  }

  .page .search_form a:hover.the_button {
    color:#b49c80;
    text-decoration: none;
  }

  .checklist ul {
    font-size: .6em;
  }

  .checklist .checkmark {
    bottom: 24%;
    right: 10px;
    background-size: 70%;
    background-repeat: no-repeat;
  }

  .caseStudyDescription {
    padding: 10px;
  }

  .checklist {
    height: 22em;
  }

}



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }

  #binding {
    min-width: 10px;
    width: 100%;
  }

  .caseStudy .caseStudyImg img {
    width: 100%;
  }

  #pages section {
    width: 96%;
    top: 2px;
    left: 3%;
    padding: 0;
    margin: 0 auto;
    position: relative;
    min-width: 0;
    min-height: 0;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
   }


  #pages section .twocol {
    -moz-column-count: 1;
    -moz-column-gap: 0px;
    -webkit-column-count: 1;
    -webkit-column-gap: 0px;
    column-count: 1;
    column-gap: 0px;
  }

  #pages section .page {
    width: 88%;
    padding: 4% 3% 0 3%;
    position: relative;
    min-height: 0;
    padding-bottom: 20px;
    font-size: 1.4em;
    margin-bottom: 4px;
    background: none !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
  }

  .shareOptions {
    display: none !important;
  }

  #pages section .page.two {
    left: 0;
  }

  #pages section .page.one {
    background: url(../img/page_bg.jpg) right top;
  }

  #pages section .page.two {
    background:url(../img/page_bg.jpg) right top;
  }

  #pages section .page .page-innerwrap {
    width: 100%;
  }

  p.page-title{
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #pages section p.page-title {
    margin-top: 3px;
  }

  #pages section p.page-title.leftside {
    margin-top: 12px;
  }

  #binding {
    max-width: 1280px;
    min-height: 940px;
    background: none;
    position: relative;
    margin: auto;
    padding-top: 20px;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
  }


  #background {
    background: none;
    display:none;
  }

  #pages section .twocol {
    min-height: 0;
  }

  #pages section .hasHeader .twocol {
    min-height: 0;
  }

  #main {
    padding: 0;
  }

  a.booknav {
    display: none;
  }

  .nextprev {
    display: none;
  }

  #shareChapter {
    left: 50%;
  }

  .page .pageNum {
    display: none;
  }

  .chapterNav {
    display: none;
  }

  div.share {
    left: 5%;
  }

  .pagesLeft, .pagesRight {
    display: none;
  }

  p.page-title {
    display: none;
  }

  #pages .page.one.tocColumn p.slim  {
    width: 97%;
  }

  .pageTurnTargetLeft, .pageTurnTargetRight{
    display: none;
  }

  .bindingRadialDropShadow {
    display: none;
  }

  blockquote {
    border: none;
  }

  .mobileNav {
    display: none;
  }

  .page .callout {
    color: black;
    font-family: Arial;
  }

  #pages section h1, #pages section h2.main-caption {
    font-family: Arial;
  }

  #pages section {
    page-break-after: always;
    page-break-inside: avoid;
  }

}