/* Book 1 layout */

/******************************************
 * A cleaner pallate.... + housekeeping
 ******************************************/
 
img{
  margin:0 !important;
  padding:0 !important;
}

article,
section{
 display:block;
}


/*******************************************
 * Main styles
********************************************/

/*** Featured Book ***/

#featured-book{
  padding: 20px;
}

#fb-image{
  float:left;
  width:151px;
  margin-right:-166px; /* to handle unknown widths of fb-info. sneaky sneaky */
}

#fb-image a{
  display:block;
  width:151px;
}

#fb-image a img{
}

#fb-info{
  float:left;
  margin-left:166px; /* to clear fb-image*/
  width:435px;
}

#fb-info.no-highlight{ /* with no highlight add this class */
  width:auto;
}


#fb-info .book-title-line{
  margin-bottom:10px;
}


#fb-info .book-title{
  float:left;
}

#fb-info .book-author{
  float:left;
  margin-left:7px;
}

#fb-info .buttons{
  float:right;
  margin-top:10px;
  width: auto;
}

#content .button{
  display:block;
  float:left;
  margin-left:5px;
  padding:5px 10px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;  
  font-weight:bold;
  text-decoration:none;
}

#fb-highlight{
  width:280px;
  padding:10px;
  overflow:hidden;
  float:right;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}

#fb-highlight p{
  margin:0;
}


/*** Control Bar ***/

#control-bar{
  padding: 10px;
  box-sizing: border-box;
}


#filter-label{
  line-height:28px;
  float:left;
  margin-right:10px;
}

.filter-group{
  float:left;
  margin-right:10px;
}


.filter-group .filter-select-span{
  display:block;
  padding: 0 1.75em 0 1em;
  width: 133px;
  height: 2.4em;
  line-height: 2.4em;
  z-index:4;
  cursor:pointer;
  text-align: left;
  position: relative;
}

.filter-select-list{
  display:none;
}

.dropdown{
  list-style:none;
  display:none;
  margin:-1px 0 0 !important;
  position:absolute;
  width: 177px;
  text-align: left;
}

.dropdown li{
  cursor:pointer;
  padding:5px 10px;
  display:block;
  margin:0;
}

#book-sidebar-search{
  position:relative;
}
#book-search{
  float:right;
  position:relative;
}

#book-input{
  width:152px;
  border:0;
  height:22px;
  padding: 6px 25px 6px 6px;
  line-height:22px;
  background-color: transparent;
  font-size: 1em;
}

/*** book list ***/
#book-list{
  padding-top:15px;
}

.book{

}

.book.end{

}

.book .book-top{
  padding:20px 10px 10px 10px;
  width: 90%;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  margin:0 auto 10px;
}

.book .book-image{
	display: table;
  margin: 0 auto;
  width: 70%;
  height: 280px;
  text-align: center;
  overflow: hidden;
}

.book .book-image a{
  display: table-cell;
  width: 100%;
  vertical-align: bottom;
  background: linear-gradient(transparent,#eeeeee);
}
.book .book-image a.empty {
  display: flex;
  height: 100%;
  padding: 0 2%;
  width: 96%;
}
.book .book-image a.empty span.noCover {
  align-self: center;
  font-family: "ITCBlair-Bold";
  font-size: 1.25em;
  line-height: 1.25em;
  opacity: .5;
  transition: all .25s;
}
.book .book-image a.empty:hover span.noCover {
  opacity: 1;
}

.book .book-image a img{
	display: inline-block;
	vertical-align: bottom;
	margin: 0 auto;
  overflow:hidden;
}

.book .buttons {
  float:none;
  margin: 10px 0 0 0;
  text-align: center;
}

.book .buttons a {
  display: inline-block;
}

#content .book .buttons .button.first{
  margin-left:0;
}

.book .book-title{
  text-align:center;
}

.book .meta{
  text-align:center;
}

.book-row{
  border-bottom:1px solid;
  margin-bottom:15px;
}


/*** Pagination (I left the colors in here in case you want to copy and paste this elsewhere. I reproduced the colors ino the colors section ***/
#pagination {
  padding:10px;
  background-color:#f1f1f1;
}

#pagination a {
  padding:5px 8px;
  text-decoration:none;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
  color:#555555;
  margin-right:3px;
}

#pagination a:hover {
  color:#ffffff;
  background-color:#833C2B;
}

#pagination a#current {
  color:#fffeff;
  background-color:#833C2B;
}

#pagination a#off {
  color:#cccccc;
}

#pagination a#off:hover {
  background-color:transparent;
  color:#cccccc;
}


/*** Book Detail ***/
#book-detail .book-top-info,
#book-detail .book-title-line{
  overflow:hidden; /* clear the floats without cleraing the image */
}

#book-detail .book{
  width:auto;
}

#book-detail .book-image{
  float:left;
  width: 150px;
  height:auto;
  margin-right: 20px;
}

#book-detail .book-image img{
  margin:0 15px 15px 0;
}

#book-detail .book-top-info{margin-bottom: 30px;}

#book-detail .book-title{
  float:left;
  margin-right:7px;
}

#book-detail .book-author{
  float:left;
  margin-left:0px;
}

#book-detail .buttons{
  float:left;
}

#book-detail .meta{
  text-align:left;
  margin-bottom:10px;
}


/*** Sidebar ****/

.books-sidebar .sidebar-featured-label{
  margin-top:20px;
  margin-bottom:5px;
}

.books-sidebar .book-title{
  margin: 4px 0;
}

.books-sidebar .sidebar-featured-book{
  padding-bottom:10px;
  margin-bottom:10px;
}

.books-sidebar #book-input{
  border:1px solid;
}

.books-sidebar #book-search{
  float:none;
}

.books-sidebar #backbutton{
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  padding-left:20px;
  background-image: url('/_assets/img/layouts/books/book-back.png');
  background-repeat: no-repeat;
  background-position: 19px 10px;
  margin:10px 0;
  float:none;
}
.books-sidebar #backbutton:hover{
  background-position: 19px 10px;
}

/********************************************
 * Font Sizes
 ********************************************/
#content .button{
  font-size:14px;
}
 
#fb-highlight,
#fb-highlight p,
#fb-highlight li{
  font-size:18px;
}

#filter-label{
    float: left;
    margin-right: .5em;
    margin-bottom: 0;
    color: #3a8799;
    font-size: 2em;
    font-weight: 400;
    padding-top: 3px;
}

.filter-group .filter-select-span{
  font-size: 16px;
}
.dropdown li{
  font-size:12px;
}

.book .meta{
  font-size: .85em;
}


#book-detail .meta,
#book-detail .book-author{
}

.books-sidebar .sidebar-featured-label{
}
.books-sidebar .book-title{
}
.books-sidebar .book-author{
  font-size: .85em;
}



/********************************************
 * Colors
 ********************************************/ 
#featured-book{
}  
#content .button{
} 
#fb-image a img{
}
#fb-highlight{
  background-color:#f1f1f1;
}
#control-bar{
  width: 100%;
  margin-top: 20px;
}
.book .book-top.hover{
}
.book .book-image a img{
}
#book-detail .book-image img{
}


#content .book .button{
  background-color:#dedede;
}

.filter-group .filter-select-span{
  background-color:#dedede;
}

.filter-group .filter-select-span:hover,
.filter-group .filter-select-span.open{
}



.filter-group .filter-select-span{
}
#content .button{
}
#filter-label{
}
.dropdown{
  z-index: 1;
}
.dropdown li{
}
.dropdown li:hover{background-color: rgba(250,250,250,.15);}

.book .book-image a:hover img{
  /* border-color:#5d7b9d; */
}
#content .button:hover{
  color:#5d7b9d;
  background-color:transparent;
}
#fb-highlight,
#fb-highlight p,
#fb-highlight li{
  color:#5d7b9d;
}



#content .book .button:hover{
  background-color:#ffffff;
}

.book-row{
  border-color:#f1f1f1;
}

.books-sidebar #book-input{
  border-color:#dedede;
}



/* Pagination Colors */
#pagination {
  background-color:#f1f1f1;
}

#pagination a {
  color:#555555;
}
#pagination a:hover {
  color:#ffffff;
  background-color:#5d7b9d;
}
#pagination a#current {
  color:#fffeff;
  background-color:#5d7b9d;
}
#pagination a#off {
  color:#cccccc;
}
#pagination a#off:hover {
  color:#cccccc;
}

/*******************************************
 * Widths  (the ones you may want to override)
 *******************************************/
.book{

}

.book .buttons{
  /* width:121px; */ /* a little play here for larger fonts,
                  anything more you'll need to adjust
                  the widths up higher in the css..ie9
                  is a little greedy */
}

#fb-info{
  width:435px;
}
#fb-info.no-highlight{
  width:auto;
}

.books-sidebar #book-sidebar-search {
  width:180px;
}
.books-sidebar #backbutton{
  width:152px;
}

.books-sidebar #book-sidebar-search #book-search-submit {
  position: absolute;
  right: 5px;
  top: 7px;
}

#control-bar #book-search #book-search-submit {
  position: absolute;
  right: 7px;
  top: 9px;
}

/********************************************
 * Useful Tweaks
 ********************************************/  
#fb-info .book-author{
  margin-top:6px; /* to line up with the bottom of the featured title */
}

#book-detail .book-author{
  margin-top: 8px;
  clear: both;
}

#pagination{
  margin-top:20px;
}


/****************************************************
 * Theme Overrides (consider deleting these before you start)
 ***************************************************/ 
#control-bar .filters {
  margin: 0;
}

.content.with-sidebar{
  width: 70%;
  float:left;
} 

.books-sidebar{
  width: 25%;
  padding:10px 9px 10px 10px;
  margin-right:30px;
  float:left;
  border-right: 1px solid;
}
 
#featured-book .book-title{
  margin-bottom:0;
  font-size:22px;
}

.books-sidebar .book-title a,
.books-sidebar .book-author a,
#featured-book .book-title a{
  text-decoration:none;
}
 
.book .book-title a{
  text-decoration:none;
  color: #343542; 
}

.book .book-title{
  margin-bottom:10px;
  text-align:center;
  font-size: 1.125rem;
  text-transform: none;
}

#book-detail .book-author a,
#fb-info .book-author a,
.book .meta a{
  text-decoration:none;
}

#book-detail .book-title{
  margin-bottom:5px;
}

/* ==|== 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; }
.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; }

/*New Styles*/

.filter-group .filter-select-span:after {
  top: 1px;
}

@media(max-width: 768px) {
  .books-sidebar {
    width: 28%;
    margin-right: 10px;
  }
  .content.with-sidebar {
    width: 67%;
  }
  #control-bar {
    padding: 0;
  }
  #control-bar form {
    clear: both;
  }
  #control-bar form .filter-group {
    width: 70%;
    margin: auto;
    float: none;
  }
  #control-bar form .filter-select-span {
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
  }
  #filter-label {
    margin-bottom: 25px;
  }
  #control-bar form .filter-style-pair {
    position: relative;
  }
  #control-bar form .filter-style-pair ul.dropdown {
    width: 100%;
    z-index: 5;
  }
  #book-search {
    float: none;
    width: 200px;
    margin: 15px auto 0;
  }
  .book {
    text-align: center;
  }
  .book .buttons a {
    margin: 0 10px;
  }
}

@media(max-width: 480px) {
  .content.with-sidebar,
  #fb-image,
  #fb-image a,
  #fb-image a img,
  #fb-info {
    width: 100%;
  }
  #fb-image a {
    margin-bottom: 20px;
  }
  #fb-info {
    margin: 0;
  }
  #fb-info .buttons {
    float: left;
    margin-top: 0;
  }
  .books-sidebar {
    width: 100%;
    padding: 0;
    border: none;
    margin: auto;
    text-align: center;
  }
  #book-sidebar-search {
    margin: auto;
  }
  .books-sidebar #backbutton {
    margin: 20px auto 0;
  }
}

.books-list {
	display: flex;
	flex-wrap: wrap;
}
.books-list .book {
 	position: relative; width: 100%;
	flex: 0 0 100%; max-width: 100%;
}
@media (min-width: 992px) {
.books-list .book {
 	position: relative; width: 100%;
	flex: 0 0 20%; max-width: 20%;
}
}