/* -----------------------------------------------------
 * Layout settings
 * ----------------------------------------------------- */
/* -----------------------------------------------------
 * App-wide specs: colors, dimensions, etc.
 * Controller- and page-specific variables should be declared in
 * the controller-specific SASS stylesheet.
 * ----------------------------------------------------- */
/*
 * Utopia-specific SASS variables and mixins.
 */
/* Page layouts
 */
/* -----------------------------------------------------
 * Grids
 *
 * Programmatically generate the widths of elements that
 * belong in the grid.
 *
 * Usage:
 *
 * .container
 *   @include row
 *   .primary
 *     @include col(8)
 *     @include internal-margin
 *   .secondary
 *     @include col(4)
 *     @include last
 * .container
 *   @include row
 *   .tertiary
 *     @prepend(4)
 *     @include(4)
 *     @append(4)
 *
 * Inspired by:
 *   http://bjorkoy.com/2010/05/css-grids-with-sass/
 * ----------------------------------------------------- */
/* math magic */
/* create row div */
/* create a column div */
/* make an element span n columns */
/* the first and last columns in a row needs these */
/* prepend n blank columns */
/* append n blank columns */
/*
 * Book display styles.
 */
#select-tool {
  overflow: hidden;
  *zoom: 1;
  margin-bottom: 20px;
}
#select-tool > div.sel_box {
  border: 1px solid #999999;
  border-radius: 10px;
  background: white;
  background-image: -moz-linear-gradient(top, white 60%, #dddddd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.6, white), color-stop(1, #dddddd));
  position: relative;
  width: 105px;
  height: 105px;
  padding: 10px;
  margin-right: 35px;
  text-align: center;
  float: left;
  color: #00abf1;
}
#select-tool > div.sel_box .pad {
  position: absolute;
  top: 50%;
  left: 50%;
}
#select-tool > div.sel_box .pad .middle {
  position: relative;
  width: 105px;
  margin-top: -40px;
  left: -50%;
}
#select-tool > div.sel_box:hover, #select-tool > div.sel_box.selected {
  text-decoration: none;
  -moz-box-shadow: 0 0 7px #00adef;
  -webkit-box-shadow: 0 0 7px #00adef;
  box-shadow: 0 0 7px #00adef;
}
#select-tool > div.warning_box {
  position: relative;
  width: 260px;
  margin-top: 20px;
  padding: 20px;
  background-color: #fff0b0;
  font-weight: bold;
  float: left;
}
#select-tool > div.warning_box p {
  padding: 0;
}
#select-tool > div.warning_box_wide {
  position: relative;
  width: 400px;
  margin-top: 20px;
  padding: 20px 20px 5px 20px;
  background-color: #fff0b0;
  font-weight: bold;
  float: left;
}
#select-tool > a.others .pad .middle {
  margin-top: -15px;
  color: #fd7820;
}

.tabs {
  overflow: hidden;
  *zoom: 1;
  border-left: 1px solid #a29c83;
}
.tabs > a {
  display: block;
  float: left;
  padding: 5px 15px;
  background: #f9f4e4;
  border: 1px solid #a29c83;
  border-left: 0;
  border-bottom: 0;
}
.tabs > a.active {
  background: white;
  color: #00abf1;
  font-weight: bold;
}
.tabs > a.active:hover {
  text-decoration: none;
}

.panes {
  border: 1px solid #a29c83;
}
.panes span.no_wrap {
  white-space: nowrap;
}
.panes > div {
  padding: 10px 15px;
}

#booksize-calculator-top-wrap #book-attributes {
  display: none;
}