setup parsing book, new styles

css/main.css

@@ -1,65 +1,171 @@
-#area {
-  width: 40%;
-  margin: 100px auto;
-  font-family: Cambria;
-}
-
-#prev {
-  position: fixed;
-  left: 0;
-  top: 50%;
-  height: 50px;
-  width: 25px;
-  background: #777;
-  display: none;
-}
-
-#next {
-  position: fixed;
-  right: 0;
-  top: 50%;
-  height: 50px;
-  width: 25px;
-  background: #777;
-  display: none;
-  opacity: .6;
-}
-
-#prev:active, 
-#next:active {
-  background: #888;
-  opacity: .8;
-}
-
-h3 {
-  margin-top: 0;
-}
-
-#modal{
-  width: 300px;
-  height: 50px;
-  padding: 50px;
-  background: #ccc;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  margin-left: -200px;
-  margin-top: -75px;
-  text-align: center;
-
-    -moz-box-shadow:    1px 1px 1px 2px rgba(0,0,0,.4);
-    -webkit-box-shadow: 1px 1px 1px 2px rgba(0,0,0,.4);
-    box-shadow:         1px 1px 1px 2px rgba(0,0,0,.4);
-  
-}
-
-#header {
-  background: #EAE2CF;
+body {
+  background: #4e4e4e;
 }
 
 #main {
-  background: #C1BCB6;
-  -moz-box-shadow:    inset 0 0 100px rgba(0,0,0,.6);
-  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.6);
-  box-shadow:         inset 0 0 100px rgba(0,0,0,.6);
+  /* height: 500px; */
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 40px; 
+  border-radius: 5px 0px 0px 5px;
+  background: #fff;
+  overflow: hidden;
+  -webkit-transition: left .5s;
+  -moz-transition: left .5s;
+  
+  -moz-box-shadow:    inset 0 0 50px rgba(0,0,0,.1);
+  -webkit-box-shadow: inset 0 0 50px rgba(0,0,0,.1);
+  box-shadow:         inset 0 0 50px rgba(0,0,0,.1);
+}
+
+#titlebar {
+  width: 100%;
+  height: 8%;
+  min-height: 20px;
+  padding: 10px;
+  text-align: center;
+  color: #4f4f4f;
+  font-weight: 100;
+  font-family: Georgia, "Times New Roman", Times, serif;
+  opacity: .5;
+  -webkit-transition: opacity .5s;
+  -moz-transition: opacity .5s;
+}
+
+#titlebar:hover {
+  opacity: 1;
+}
+
+#book-title {
+  font-weight: 600;
+}
+
+#area {
+  width: 80%;
+  height: 80%;
+  margin: 0 auto;
+}
+
+#area iframe {
+  border: none;
+}
+
+#prev {
+  left: 40px;
+}
+
+#next {  
+  right: 80px;
+}
+
+.arrow {
+  position: absolute;
+  top: 50%;
+  
+  font-size: 64px;
+  color: #E2E2E2;
+  font-family: arial, sans-serif;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.arrow:hover {
+  color: #777;
+}
+ 
+.arrow:active {
+  color: #000;
+}
+
+#sidebar {
+  background: #6b6b6b;
+  position: fixed;
+  left: -260px;
+  top: 0;
+  width: 300px;
+  height: 100%;
+  -webkit-transition: left .5s;
+  -moz-transition: left .5s;
+}
+
+#sidebar.open {
+  left: 0;
+}
+
+#main.closed {
+  left: 300px;
+}
+
+#controls {
+  background: #4e4e4e;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 15px;
+  padding: 10px 0;
+}
+
+#controls img {
+  float: right;
+  margin-right: 14px;
+  opacity: .5;
+}
+
+#controls img:hover {
+  opacity: .8;
+}
+
+#controls img:active {
+  opacity: 1;
+}
+
+#search {
+  width: 155px;
+  border-radius: 5px;
+  background: #9b9b9b;
+  float: left;
+  margin-left: 5px;
+  margin-top: -5px;
+  padding: 3px 10px;
+  color: #000;
+  border: none;
+  outline: none;
+}
+
+input::-webkit-input-placeholder {
+    color: #454545;
+}
+input:-moz-placeholder {
+    color: #454545;
+}
+
+#divider {
+  position: absolute;
+  width: 1px;
+  border-right: 1px #000 solid;
+  height: 80%;
+  z-index: 10;
+  left: 50%;
+  top: 10%;
+  opacity: .15;
+  box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
+}
+
+#toc {
+  margin-top: 50px;
+}
+
+#toc li {
+  margin-bottom: 10px;
+}
+
+#toc a {
+  color: #AAA;
+  text-decoration: none;
+}
+
+#toc a:hover {
+  text-decoration: underline;
 }