/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/
.book-form-container{
  display: table;
  width: 100%;
}
.title-content{
  height: 150px;
  display: table-cell;
  width: 100vw;
  vertical-align:middle;
  position: relative;
}
.title-pane{
  //box-shadow: 10px 10px 5px #888888;
  a{
    color: #333333;
  }
}
.title-pane:hover{
  //box-shadow: 8px 10px 5px #888888;
}
.read-book-link-container{
  background-color: rgba(0,0,0,.1);
  padding:5px;
}
.info-icon{
  a,a:active{
    color: #000;
    position: absolute;
    top: 0em;
    left: 0em;
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0;
  }

  a:hover{
    color: #EFEFEF;
    text-decoration: none;
  }
}
.info-modal{
  $font-size: 16px;
  $line-height: 1.4;
  @media(min-width: 320px){
    $lines-to-show: 3;
  }
  @media(min-width: 720px){
    $lines-to-show: 10;
  }
  h1{
    font-size:larger;
    font-weight:bold;
  }
  p{
    text-align: left;
    display: block; /* Fallback for non-webkit */
    display: -webkit-box;
    width:100%;
    @media(min-width: 320px){
      -webkit-line-clamp: 3;
      height: $font-size*$line-height*3; /* Fallback for non-webkit */
    }
    @media(min-width: 667px){
      -webkit-line-clamp: 10;
      height: $font-size*$line-height*10; /* Fallback for non-webkit */
    }
    margin: 0 auto;
    font-size: $font-size;
    line-height: $line-height;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
#book-detail{
  .book-synopsis{
    text-align: justify;
  }
  img{
    padding-bottom:20px;
  }

}