/* book colors
 *
 * red: d9382a, e07970, 67201A, 38120E
 * taupe: dba671, darker: 836444, 56422d, lighter: edccaa
 * gold: e1aa5c, darker: 5e441f, 443117
 * green: 4ea459, lighter: 9DD8A5, darker: 277031, 123C18
 * blue: 5186c2, lighter: 90B9E7, darker: 315C8D, 12355D
 * seafoam: 2ca697, 6da5a5, 1c5850, 10322D
 */

@font-face {
    font-family: 'inna_fontaregular';
    src: url('fonts/inna_fonta-webfont.eot');
    src: url('fonts/inna_fonta-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/inna_fonta-webfont.woff') format('woff'),
         url('fonts/inna_fonta-webfont.ttf') format('truetype'),
         url('fonts/inna_fonta-webfont.svg#inna_fontaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body { 
  background: #fff url('book-bg-withimg.jpg') no-repeat left 80px; 
  min-height: 680px;
}

h1 { color: #A19B88; }
header a { color: #ccc; display: inline-block; padding: 20px 10px; margin-top: 10px;}
div nav>a {
  font-size: 24px; 
}

#books a{ 
  position: absolute; 
  /*color: #300500;
  text-shadow: 1px 1px 2px #782400; */
  text-align: center;
  white-space: nowrap;
}

/*#books nav>a:hover { color: #782400;}
#books nav>a:hover { color: #d8956a;}*/
#book-1 { top: 260px; left: 15px; 
  color: #fff;
  text-shadow: 1px 1px 2px #67201A;
  transform: rotate(88deg) !important;
  -o-transform: rotate(88deg);
  -webkit-transform: rotate(88deg); 
  -moz-transform: rotate(88deg); 
  -ms-transform: rotate(88deg);
 }
#book-1:hover { color: #ddd; }
#book-2 { top: 210px; left: 143px; 
  color: #000;
  font-family: 'Julius Sans One'; 
  transform: rotate(97deg) !important;
  -o-transform: rotate(97deg);
  -webkit-transform: rotate(97deg); 
  -moz-transform: rotate(97deg); 
  -ms-transform: rotate(97deg);
}

#book-2:hover { color: #444; }
#book-3 { top: 230px; left: 201px; 
  color: #000;
  font-family: 'Anonymous Pro'; 
  transform: rotate(93deg) !important;
  -o-transform: rotate(93deg);
  -webkit-transform: rotate(93deg); 
  -moz-transform: rotate(93deg); 
  -ms-transform: rotate(93deg);
}
#book-3:hover { color: #555; }
#book-4 { top: 235px; left: 255px; 
  color: #ccc;
  font-family: 'Snippet'; 
  font-size: 30px;
  transform: rotate(93deg) !important;
  -o-transform: rotate(93deg);
  -webkit-transform: rotate(93deg); 
  -moz-transform: rotate(93deg); 
  -ms-transform: rotate(93deg);
}
#book-4:hover { color: #eee; }
#book-5 { top: 230px; left: 348px; 
  color: #443117;
  font-family: 'Port Lligat Slab'; 
  font-size: 34px;
  border-bottom: 5px double;
  transform: rotate(3deg) !important;
  -o-transform: rotate(3deg);
  -webkit-transform: rotate(3deg); 
  -moz-transform: rotate(3deg); 
  -ms-transform: rotate(3deg);
}

#book-5:hover { color: #5e441f; }
#book-6 { top: 500px; left: 505px; 
  font-family: 'Jacques Francois'; 
  color: #222;
  font-size: 54px;
  text-shadow: 1px 1px 2px #10322D; */
}

#book-6:hover { color: #10322D; }

#book-7 { 
  top: 300px; left: 1005px; 
  font-family: 'Tangerine';
  font-size: 48px;
  color: #2C2918;
  transform: rotate(75deg) !important;
  -o-transform: rotate(75deg);
  -webkit-transform: rotate(75deg); 
  -moz-transform: rotate(75deg); 
  -ms-transform: rotate(75deg);
}
#book-7:hover { color: #666; }

#book-8 { 
  color: #fff;
  top: 215px;
  left: 500px;
  font-family: 'Spirax';
  font-size: 38px;
  transform: rotate(-1deg) !important;
  -o-transform: rotate(-1deg);
  -webkit-transform: rotate(-1deg); 
  -moz-transform: rotate(-1deg); 
  -ms-transform: rotate(-1deg);
}

#book-8:hover { color: #ddd; }

#book-9 {
  padding: 10px;
  color: #000;
  top: 342px;
  left: 500px;
  font-size: 28px;
  /*font-family: 'Amatic SC';*/
  letter-spacing: 5px;
  font-family: reenie-beanie, sans-serif;
}

#book-9:hover { color: #333; }