/** layout.css
 *
 * \file
 * The gunk necessary to render the <div />s in page.tpl.php
 */

body {
  /* light gray side-panels */
  background: white;
}

#fatness {
  padding: 0px 45px; /* this should be the width of side margins */
  min-width: 960px;
  overflow-x: hidden;
}

/*
 * Any direct descendent of #fatness, such as #main, and #banner-nav, 
 * must be ~875px for stuff to look right.
 *
 * To counterbalance this, we must force #fatness to be at least this fat too.
 */
/* For advertisements in the right sidebar, we're not allowed to have a global
 * minimum width. Instead min-width only for the navbar itself. */
/*
#fatness > *,
#fatness
{
	min-width: 863px;
}
*/

#nav-top {
  /* 144px - 109px */
  height: 35px;
  width: 100%;
  color: white;
  z-index: 6;
}

#nav-top a.active {
  text-decoration: none;
  font-style: normal;
}
#nav-top a {
  display: block;

  background: #a8a09a;
  color: white;
  /* the following is only for subitems */
  border-top: 2px solid #83786f;

  font-family: Arial, sans-serif;
  /* expand to the vertical size of the <li /> */
  height: 32px;
  /* nice text */
  /* padding: <top> <right> <bottom> <left> */
  padding: 0pt 2.5pt 0pt 2.5pt;
  margin: 0pt 0pt 0pt 2pt; /* balance out the distance from the spacers */

  vertical-align: top;

  text-align: center;

  min-width: 96px; /* Must update #nav-top li.depth-1.menu > div > ul */
}
#nav-top a:hover,
#nav-top a.sfHover {
  /* disable default underlining of links on hover */
  text-decoration: none;
}
/* subitems should be highlighted and whatnot when hovored over */
#nav-top li:hover > div > a,
#nav-top li.sfHover > div > a {
  background: #d9c756;
}
#nav-top li.depth-0 > div > a {
  /* let the header image's image show through for depth-0 of the navmenu */
  background: transparent;
  /* disable the borders intended for subitems */
  border: none;
}
#nav-top li.depth-0:hover > div > a,
#nav-top li.depth-0.sfHover > div > a {
  background: #83786f;
}
/* smaller fonts for submenus */
#nav-top a > span {
  height: 14px;
  font-size: 12px;
  display: inline-block;
  text-align: center;
  padding: 9px 0pt 9px 0pt;
}
#nav-top li.depth-0 > div > a > span {
  height: 16px;
  font-size: 16px;
  display: inline-block;
  text-align: center;
  padding: 6px 0px 10px 0px;
}
#nav-top ul {
  display: inline-block;
  /* margin: <top> <right> <bottom> <left> */
  margin: 1px 0pt 2px 0pt;
  height: 32px; /* Must update `#nav-top li.depth-2' */
  vertical-align: top;
}

/* the submenus need to be stacked vertically */
#nav-top li {
  display: block;
  vertical-align: top;
  /*    background: blue;*/
  list-style: none;
}
/* the main nav items need to be nonvertical */
#nav-top li.depth-0 {
  display: inline-block;
  vertical-align: top;
  padding: 0pt;
  margin: 0pt;
  /* total height is 35px, specified above somewhere */
  height: 100%;
}

/* buttons directly in the nav bar */
#nav-top li.depth-0 > div {
  /*
	 * this must be inline-block or inline to push the
	 * automatically-inserted separator to where it belongs.
	 */
  display: inline-block;
  margin: 0pt;
  padding: 0pt;
  vertical-align: top;
}

#nav-top > ul {
  width: 100%;
  padding: 0pt;
  padding-left: 35px;
  /* total height is 35px, specified above somewhere */
}
#nav-top li.depth-0.nav-separator:before {
  display: inline;

  width: 2px;
  height: 32px;
  vertical-align: top;
}

/*
  expandy stuff...
  */

/* hide <li /> by defaul, showing only the ones we want */
#nav-top li.depth-0.menu > div > ul,
/* submenu: */ #nav-top li.depth-1.menu > div > ul {
  /*    background: red;*/
  display: none;
}
/* display the ones in the navbar itself */
#nav-top > ul li.depth-0 {
  display: inline-block;
}
/* display the children when necessary. Disabled :hover rules when superfish is up and running. */
.no-superfish #nav-top > ul li.depth-0:hover > div > ul,
#nav-top > ul li.depth-0.sfHover > div > ul,
/* submenu: */ .no-superfish #nav-top > ul li.depth-1:hover > div > ul,
/* submenu: */ #nav-top > ul li.depth-1.sfHover > div > ul {
  /*    background: purple;*/
  display: inline-block;

  height: auto;
  position: relative;
  top: 0pt;
  z-index: 10;

  /*
	 * disable the padding given to <ul /> elements in the
	 * ``#nav-top ul'' rule
	 */
  margin: 0pt;
  padding: 0pt;
}

/* Display submenu off to the sides: */
/* submenu: */
#nav-top li.depth-1.menu > div > ul {
  position: relative;
  /* 92 + 2*2 from `#nav-top a' + arbitrary 2px. Adjusted by JS */
  left: 100px;
}
/* submenu: */
#nav-top li.depth-2 {
  position: relative;
  /* 32 + 2, from `#nav-top ul' margin and height */
  top: -34px;
}
/* submenu: */
#nav-top li.depth-2 a {
  margin-left: 0pt; /* cancel out `#nav-top a' */
}

#nav-top form {
  display: inline-block;
  height: 32px;
  vertical-align: top;
}

#nav-top form,
#nav-top form * {
  display: inline-block;
  margin: 0pt;
  padding: 0pt;
  padding-left: 3px;
  vertical-align: top;
}
/* don't affect hidden elements with the above rules */
#nav-top input {
  display: none;
}

/* Nearly all searchboxes */
.searchbox,
/* The searchbox on book info pages */
.search > #searchBox {

  /* Get rid of rounded edges in mobile browsers */
  -webkit-appearance: none;
  border-radius: 0;
}

/*
 * Cause searchicon and textbox to be vertically agreeable for the
 * sake of our negative margin hack to get the searchicon into the
 * searchbox.
 */
#nav-top form.searchbox-wrapper > div > *,
.searchbox-wrapper > * {
  vertical-align: middle;
}
#nav-top input.searchbox {
  /* This needs no IE-7 fallback */
  /* background: #efefef url('../img/top-nav-searchbox-icon.png') no-repeat right; */
  /* Nowadays the search icon is its own <input type="image" /> so that clicking on it can result in form submission.
	   
	  background: #efefef url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oIGhIZKMGyHy8AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAC5ElEQVQ4y02T32vVdRyHn9fn+z3HQa6TU2G0JoumuYmha+lFUMEstfXTcF20oBvppiDBi4jgnHMT1G0ESVAXEcZONGJREMlmJ7xpoWYEEdaS4fRmuu2w03bO9/Pq4kuzf+Dh/X54XgLwBAljjliS8PdHeF8wUEjozTJutMSVJ3ofPOHTsy2qCirbBktCAK4QKMPkMbZsb/K5AocwloEEOWKZ2QXx6gvfcAkcqyhURBQAtl4fV+fYDc6GAsMGZ1BvReZCYFsaOBTapDFyabXNy0em+c0VpAoxBTBSfYmPSRgyNBabvPFSJ1+tTNEC9NEw+3Z2c7qQsX9zgc9wZQjKkYoIAO8O01kwu0gJC21OPTPDlytTtNlRCn3cRfU6v8yuMB5hVZEHvjtaeREUgBxwsIen3WJPG65P/M3X0GdAfVfl9j23wvx8Xzx1jj/WzA/RKN3Ew8LeALBOf0wJZCzU/imt7u6ZS/bugDluMb88CASPcCCRuUmAQpOCc3s5oFHgvNdppwn9J1nacq2EL1/FjHQmdF2Lu3v+TM+WmrFYZKeBmLAM/wP83MFMKPKrIptH7+OV5UbJAIO/r5jFx0ND+MzByyPKGEojF5sNalVLG4DyhNebYioadXTw9vTA0jvl/dzdjoRnt9fu+HAXJ3pTPsVoPeWvw3X/NFjLG9rowGMK9QZfCJ6TwLDshAVHSgG6ZQgRzjXoerPOkrCRHP7roHYcHvmWY4ay4GKAOxW5PzHdzvLiInCgyL3gaFVvX2ATwBEhGT45qVLnFXq61klby6xt6mZvcZW3spR9MXDh0SkeMo5CZgPgSnjMpPkELGzZBNsYa3qUMz8+ic8fxjNHqTrPIJcobKvMtJxRkbBkcsuqErCSm0Veiy0uZCkkGU99MKCtt0OiKkyEqlS2wFHYEnYFU8PPT3oxFqjRhpAwtKefcYB8TCobK2BHIAEFK/8BlCBnMkzo+HvbRmv9yRpbGy0mAf4FOIFhAmUVeyYAAAAASUVORK5CYII=') no-repeat right; */

  /* don't allow the text to approach the icon */
  padding: 0px 18px 0px 2px;
  /* top/bottom margins 5px and let the searchicon be marginned into this searchbox */
  margin-top: 5px;
  margin-left: 0pt;
  /* margin-right in the more generic area... */

  display: inline-block;
  width: 150px;

  /* this is what I call micromanagement... */
  height: 20px;
  border: 2px;
}
.searchbox,
#nav-top .searchbox {
  margin-right: -18px;
}

/* WWSB also likes using .searchbox and .searchicon classes */
#nav-top .searchicon,
.searchicon {
  /* must match dimensions of ../img/top-nav-searchbox-icon.png */
  border: none;
  background: transparent;
  vertical-align: middle;

  margin: 0pt 0pt 0pt -16px;
  padding: 0px;
  display: inline-block;

  cursor: pointer;
}
/* navbar-specific: */
#nav-top .searchicon {
  margin-top: 4px;
}
#nav-top .searchicon > img,
.searchicon > img {
  /* must match dimensions of ../img/top-nav-searchbox-icon.png */
  height: 17px;

  margin: 0pt;
  padding: 0pt;

  display: block;
}

#nav-top form.searchbox-wrapper div.form-item-label {
  display: inline-block;
  height: 32px;
}

#nav-top form.searchbox-wrapper div.form-item-label > div {
  display: block;
  color: white;
  height: 12px;
  font: italic 12px sans, sans-serif;
  cursor: pointer;
}

#nav-top #user-greeting {
  margin-left: 7px;
}

#nav-top #user-greeting,
#nav-top #user-greeting div {
  display: inline-block;
  height: 32px;
  vertical-align: top;
}

#nav-top #user-greeting .picture {
  display: inline-block;
  height: 32px;
  width: 32px;
  margin-right: 4px;
}
#nav-top #user-greeting .picture a {
  background: transparent;
  border: none;
  display: block;
  height: 32px;
  width: 32px;
  min-width: 0px;
  padding: 0;
  margin: 0;
}
#nav-top #user-greeting .picture img {
  width: 32px;
  height: 32px;
  display: block;
}

#nav-top #user-account-buttons {
  display: inline-block;
  border: none;
  height: 32px;
  margin-top: -3px;
}
#nav-top #user-account-buttons .accountbutton {
  display: block;
  height: 14px;
  color: white;
  font-family: Arial;
  font-size: 0.85rem;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 6px 0;
  text-align: left;
}

#main {
  background: white;
  padding: 0pt;
  /* force sidebars to be against the side of the parent element. */
  width: 100%;
  z-index: 5;
}

#content {
  background: white;

  /* Prevent horizontal scrolling on mobile */
  //	overflow: hidden;
  /* complements #main */
  padding: 1em;
}

/* Support multicolumn block regions. */
#content-blocks > div {
  display: inline-block;
  vertical-align: top;

  min-width: 120pt;
  width: 100%;
  border: none;
}
#content-blocks-left {
  margin-left: 0pt;
  margin-right: auto;
}
#content-blocks-right {
  margin-left: auto;
  margin-right: 0pt;
}

.block {
  display: block;
}

.sidebar {
  /*
	  because the height cannot be demanded here, we set the sidebar's
	  background-color in #main. This is just is fallback for when the
	  sidebar is longer than the page...
	  */
  background: white;

  min-width: 180px;
  /* because the containing block's height is not explicitly stated but implicitly calculated, we may not ask for ``height: <percentage>;'' here. */
  /* height: 100%; */

  padding: 0pt;

  display: block;
}
#sidebar-right {
  float: right;
  max-width: 320px; /* Wide enough for 300px ads, plus padding */
  box-sizing: border-box;
}
#sidebar-right .block {
  padding: 2% 4%;
}
#sidebar-right .block-advertising {
  padding: 10px;
  margin: 0;
}

#sidebar-left {
  float: left;
}

@media print {
  #nav-top {
    display: none;
  }
}

/*
 * While the old theme is still used, we are stuck with having the Search entry in the primary links.
 * Thus, we simply hide it here.
 */
#menu-link-Search.depth-0,
#menu-link-Search-1.depth-0,
#menu-link-Support.depth-0,
#menu-link-Support-1.depth-0 {
  display: none !important;
}

/* Only exists so this may be overridden by layout-ie7.css */
.display-inline-block {
  display: inline-block;
}

.bookinfo_description p {
  margin-top: 0;
}

.ccel-alert {
  margin-bottom: 5px;
  background: #ffe12d;
}

.profile .picture {
  float: right;
  margin: 0 1em 1em 0;
}