@font-face {
    font-family: 'CaudexRegular';
    src: url('caudex/Caudex-Regular-webfont.eot');
    src: url('caudex/Caudex-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('caudex/Caudex-Regular-webfont.woff') format('woff'),
         url('caudex/Caudex-Regular-webfont.ttf') format('truetype'),
         url('caudex/Caudex-Regular-webfont.svg#CaudexRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaudexItalic';
    src: url('caudex/Caudex-Italic-webfont.eot');
    src: url('caudex/Caudex-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('caudex/Caudex-Italic-webfont.woff') format('woff'),
         url('caudex/Caudex-Italic-webfont.ttf') format('truetype'),
         url('caudex/Caudex-Italic-webfont.svg#CaudexItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaudexBold';
    src: url('caudex/Caudex-Bold-webfont.eot');
    src: url('caudex/Caudex-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('caudex/Caudex-Bold-webfont.woff') format('woff'),
         url('caudex/Caudex-Bold-webfont.ttf') format('truetype'),
         url('caudex/Caudex-Bold-webfont.svg#CaudexBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaudexBoldItalic';
    src: url('caudex/Caudex-BoldItalic-webfont.eot');
    src: url('caudex/Caudex-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('caudex/Caudex-BoldItalic-webfont.woff') format('woff'),
         url('caudex/Caudex-BoldItalic-webfont.ttf') format('truetype'),
         url('caudex/Caudex-BoldItalic-webfont.svg#CaudexBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   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: 1em; line-height: 1.4; }

body, button, input, select, textarea { font-family: sans-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: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; 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, serif; _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; }


/* =============================================================================
   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)
 */

button, input { line-height: normal; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
 */

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

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
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; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* ==|== primary styles =====================================================
   Author: Jonathan Kratzke @ Creative Culture
   ========================================================================== */

html {width:100%; height:100%; background:#f9f9f9; }
body { min-height:100%; width:100%; font-family: CaudexRegular, Helvetica, sans-serif; font-size:20px;}
h1 {text-align:center; margin-bottom:40px; margin-top:0px;}
.lt-ie8 h1 {margin-top:0;}
header {position: relative; background:url(../img/bg_page_light.png) left repeat-y;}
  nav {position: absolute; top:0; left: -228px; text-align:center; padding-top:50px;background:url(../img/bg_contents.png) center 10px no-repeat; }
  nav a {display:block; text-decoration:none; width:220px; height: 25px; color:#fff; background:url(../img/bg_nav.png); padding-top:3px; margin-bottom:5px; font-size:16px;}
  nav a:hover {background-position:0 -33px; color:#444; text-shadow: 1px 1px 3px #fff;}
  nav a:active {background-position:0 -66px; color:#444;}
  nav a:visited {color:#FFF;}

#container{position:relative; width:973px; margin: 0 auto;}
.page {position: relative; width: 943px; background:url(../img/bg_page_light.png) left repeat-y; padding:15px; margin-top:50px; padding-bottom:45px;}
blockquote {font-size:.8em; font-style:italic;}
.book-contents {list-style:none; font-style:italic; text-align:center; padding: 0;}

/* Home */
#home {margin-top:0;}
  .left-arrow {width: 46px; height:46px; position:absolute; bottom:-46px; left:-15px; background: url(../img/bg_down-arrow_light.png);}
#cover {width:468px; margin: 30px auto; }
  #cover a:hover {cursor: text('x')}
  .buy, #watch {display: inline-block; width:184px; height:41px; text-indent:-9999px; margin:30px 0 0 32px;}
  .buy {background:url(../img/btn_cart-video.png) 0 -1px no-repeat;}
  .buy:hover {background-position:0 -43px;}
  #watch {background:url(../img/btn_cart-video.png) -186px -1px no-repeat;}
  #watch:hover {background-position:-186px -43px;}
  .available-text {font-size:1em; text-align:center; width:500px; margin-left:-16px;}



/* About the Book */
#aboutbook {background-position:right top;}
  .bird1 {position: absolute; width:129px; height:144px; top:-144px; right:-82px; background: url(../img/bg_bird-1_light.png);}
  .right-arrow {width: 46px; height:46px; position:absolute; bottom:-46px; right:-16px; background: url(../img/bg_down-arrow_light.png);}
  #aboutbook .text {float:left; width:480px; padding:0 20px; }
  #gallery {width: 390px; float:right; }
  #gallery a {float:left; border:1px solid #ccc; margin: 0 0 30px 30px; width:136px; 
  -webkit-box-shadow: 1px 1px 5px #000; 
     -moz-box-shadow: 1px 1px 5px #000; 
          box-shadow: 1px 1px 5px #000; 
}

/* About the Author */
#aboutauthor {}
  .bird2 {width:155px; height:207px; position:absolute; top:-207px; left:-104px; background:url(../img/bg_bird-2_light.png);}
  #aboutauthor img {float:left; margin:0 20px; border:1px solid #ccc;}
  #aboutauthor p {padding:0 30px;}
  .aboutlinks {list-style:none; margin-left:50px;}
  .aboutlinks li { font-size:22px; color:#999;}
  .aboutlinks li a {color:#666; font-weight:bold; text-decoration:none;}
  .aboutlinks li a:hover {color:orange;}


/* Watch the Video */
#watchvideo {background-position:right top; padding-bottom:15px;}
  #watchvideo h1 {margin-bottom:35px;}
  .bird3 {position: absolute; width:136px; height:155px; top:-155px; right:-86px; background: url(../img/bg_bird-3_light.png);}
  #video {width:530px; margin:30px auto; border:7px double #222222; padding:5px 5px 1px;}

#contact{}
  .bird4 {width:155px; height:207px; position:absolute; top:-207px; left:-95px; background:url(../img/bg_bird-4_light.png);}
  .bird5 {width:161px; height:168px; position:absolute; bottom: -250px; left:-55px; background:url(../img/bg_bird-5_light.png);}
  #contact p {margin:0 30px 30px 30px; text-align:center;}
  /*Form Formatting */
  #form1 table {width:435px; margin:0 auto;}
  #form1 label {text-align:right;}
  input, textarea { margin: 5px 20px; padding: 9px; border: solid 1px #999; outline: 0; font: normal 13px/100% Verdana, Tahoma, sans-serif; width: 300px; /*background: #FFFFFF url('bg_form.png') left top repeat-x;  ; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); */ box-shadow: rgba(0,0,0, 0.1) 0px 0px 2px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 2px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 2px; }
  textarea { width: 300px; max-width: 400px; height: 120px; line-height: 150%; }
  input:hover, textarea:hover, input:focus, textarea:focus { border-color: #222; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; }
  .form label { margin-left: 10px; color: #999999; }
  .submit input { width: auto; padding: 9px 15px; background: #617798; border: 0; font-size: 14px; color: #FFFFFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; }



/* Cart */
#cart{width:350px; margin:40px auto; color:#555; font-size:15px; padding:10px; border-top:5px double #222; border-bottom:5px double #222; display:none;}
  #cart a {color:#0588B5}
  #cart .shipping, #cart .finalcost {margin:7px 0;}
  #cart .international {float:right; font-size:small; font-style:italic; padding-top:16px;}
  .cartHeaders, .itemContainer {clear:left;}
  .cartHeaders div, .itemContainer div { float:left; }
  .cartHeaders { border-bottom: 3px double #222; float:left;}
  .cartHeaders .itemName{width: 100px;}
  .cartHeaders .itemPrice{width:70px;}
  .cartHeaders .itemQuantity{width:100px}
  .cartHeaders .itemTotal{width:50px}
  .itemContainer .itemName{width: 100px;}
  .itemContainer .itemPrice{width:70px;}
  .itemContainer .itemdecrement{width:10px; text-align:right;}
  .itemContainer .itemdecrement a{text-decoration:none;  font-size:18px; line-height:15px;}
  .itemContainer .itemQuantity{width:20px; text-align:center;}
  .itemContainer .itemincrement{width:70px;}
  .itemContainer .itemincrement a{text-decoration:none; font-size:18px; line-height:15px;}
  .itemContainer .itemTotal{width:50px}

  .button, #btnsubmit { -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; box-shadow: inset 0px 1px 0px 0px #ffffff; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d9ecf7), color-stop(1, #b8c5e0) ); background: -moz-linear-gradient( center top, #d9ecf7 5%, #b8c5e0 100% ); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9ecf7', endColorstr='#b8c5e0'); background-color: #d9ecf7; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #abccd6; display: inline-block; color: #777777; font-family: Trebuchet MS; font-size: 14px; font-weight: bold; padding: 7px 15px; text-decoration: none; text-shadow: 1px 1px 0px #ffffff; }
  .button:hover, #btnsubmit:hover { background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b8c5e0), color-stop(1, #d9ecf7) ); background: -moz-linear-gradient( center top, #b8c5e0 5%, #d9ecf7 100% ); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8c5e0', endColorstr='#d9ecf7'); background-color: #b8c5e0; }
  .button:active, #btnsubmit:active { position: relative; top: 1px; }
  .itemincrement, .itemdecrement { font-weight: bold }


/*View.JS*/
.viewer li { -webkit-transition: width 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); -moz-transition: width 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); transition: width 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); }
.viewer .caption { visibility: hidden; opacity: 0; -webkit-transition: opacity 1.5s ease-in-out; -moz-transition: opacity 1.5s ease-in-out; transition: opacity 1.5s ease-in-out; }
.viewer .current .caption { opacity: 100; visibility: visible; }
.viewer img { -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0; -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0; }
.viewer .current img { -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0; -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0; }


footer {padding-top:300px; width: 840px; margin: 0 auto; text-align:center; font-size:15px; color:#999;}
footer a, footer a:visited {color:#999;}
footer a:hover {color:#CD0A0A;}
.heart {color:#CD0A0A;}

.Zebra_Form_error_message { position: absolute; z-index: 2; overflow: hidden; background: transparent; }
.Zebra_Form_error_message .message { background: #000; padding: 10px 18px 10px 10px; color: #FFF; line-height: 1em; font-size: 11px; font-weight: 400; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); -moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); box-shadow: 2px 2px 6px rgba(0,0,0,0.6); margin-right: 0; max-width: 250px; _width: expression(document.body.clientWidth > 250 ? '250px': 'auto'); }
.Zebra_Form_error_message .close { position: absolute; color: #FFF; display: block; width: 10px; height: 10px; background: url('zebra/close.png'); text-indent: -9000px; overflow: hidden; right: 3px; top: 3px; }
.Zebra_Form_error_message .close-ie6 { position: absolute; color: #FFF; right: 4px; top: 2px; text-decoration: none; font-family: arial, sans; font-weight: 700; font-size: 11px; }
.Zebra_Form_error_message .arrow { position: relative; border-color: #000 transparent transparent; border-style: solid; border-width: 10px; height: 0; width: 0; left: 0; bottom: 0; z-index: 3; float: left; _border-left-color: #FFC0CB; _border-bottom-color: #FFC0CB; _border-right-color: #FFC0CB; _filter: chroma(color=pink); _margin-bottom: -6px; }
.Zebra_Form div.error { background: #444 url('zebra/ico-warning.png') no-repeat 8px 15px; position: relative; overflow: hidden; _background-image: url('zebra/ico-warning.gif'); }
.Zebra_Form div.error div.container { padding: 15px 65px 15px 35px; border: 2px solid #000; position: relative; overflow: hidden; }
.Zebra_Form div.error div.container span { color: #FFF; font-weight: 700; font-size: 90%; display: block; }
.Zebra_Form div.error div.container div.close { position: absolute; right: 0; top: 0; background: #333; height: 100%; width: 50px; padding: 15px 0; _top: 2px; _right: 2px; _background: #444; }
.Zebra_Form div.error div.container div.close a { display: block; width: 16px; height: 16px; background: url('zebra/ico-close.png') no-repeat; text-indent: -9000px; margin-left: 17px; _background-image: url('zebra/ico-close.gif'); }

#toTop{display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:43px;height:43px;border:none;text-indent:-999px;background:url(../img/bg_ui-to-top.png) no-repeat left top;}
#toTopHover{background:url(../img/bg_ui-to-top.png) no-repeat 0 -43px; width:43px;height:43px;display:block;overflow:hidden;float:left;cursor:pointer; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0);}
#toTop:active,#toTop:focus{outline:none;}

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

@media only screen and (max-width: 1440px) {
 nav {position: relative; width:440px; margin:0 auto; top:auto; left:auto; }
 nav a {float:left;}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
    #container { width:803px;} 
    footer {padding-top:300px; width: 768px; margin: 0 auto; text-align:center; font-size:15px; color:#999;}
    .page {width:100%;}
    #aboutbook .text {width:45%; padding:0 20px; }
    #gallery {width: 45%; }
}

/* ==|== 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; *line-height: 0; }
.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; }



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

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !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; }
}