/*-----------------------------------------------------------------------------*/
/* BASIC LAYOUT */
/*-----------------------------------------------------------------------------*/
body {
    margin: 0 auto;
    font-family: 'pt sans', sans-serif;
}

.content-buku {
	width:960px;
    position: relative; top: 0px; left: 0px;
    z-index: 1;
}

/*-----------------------------------------------------------------------------*/
/* LIBRARY LIST */
/*-----------------------------------------------------------------------------*/
ul.library {
    margin: 0;
    padding: 0 0 10px 0;
    list-style-type: none;
    overflow: hidden;
}

li.book {
    position: relative; top: 0; left: 0;
    margin: 0;
    padding: 10px;
    float: left;
    width: 140px; height: 224px;
    cursor: pointer;
}
li.book.selected{ z-index: 4;} /* moves selection over page overlay */

/* hover & active */
.book:hover { background-color: #E5E5E5; }
.book:active { background-color: #D9D9D9; }
.book.selected:hover, li.book.selected:active { background-color: transparent;} /* disables user feedback when selected */

/*-----------------------------------------------------------------------------*/
/* BOOK COVERS */
/*-----------------------------------------------------------------------------*/
.book .cover {
    cursor: pointer;
    width: 140px; height:224px;
    box-shadow: 3px 3px 5px rgba(0,0,0,.3);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    zoom: 1;
}

.book .cover img {
    background-color: #e5e5e5;
    width: 140px; height: 224px;
    border-width: 0px; /* border to be later leveraged by animation */
    border-style: solid;
    border-color: #FFFFFF;
}

/* animation start points determined by book position */
.book.selected .cover { position: absolute; top: 10px; }

.book.selected.left-side.first .cover, .book.selected.right-side .cover { left: 10px; right: auto;}
.book.selected.right-side.last .cover , .book.selected.left-side .cover { left: auto; right: 10px;}



/* -------------------------*/
.wrapper {
  display: flex;
  min-height: 100%;
}

.main {
  flex: 1;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

.nav {
  width: 200px;
  background: #40454a;
}

.nav .logo {
  width: 80px;
  height: 30px;
  margin: 20px auto;
  font-size: 14px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
  color: white;
  border: 1px solid white;
}