html, body {
  /* The html and body elements cannot have any padding or margin. */
  height: 100%;
}

/*==================================================*/
/* style for the header */
/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by its height */
    margin: 0 auto -3.75em;
    /* Pad bottom by footer height */
    padding: 0 0 3.75em;
}

#wrap > .container {
    padding: 2em 0.9375em;
}

/*==================================================*/
/* style for images */
.image-center {
  padding: 0em 1.25em;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.40625em;
}

#overview {
  width: 60%;
}

/*==================================================*/
/* style for the main body */
.content {
  /* corresponds to 18px */
  font-size: 1.125em;
  /* 1.25 line space */
  line-height: 1.40625em;
}

.content p {
  /* space after paragraphs */
  margin-top: 1.40625em;
}

/*.content ul, .content ol {*/
  /* space after paragraphs */
  /*margin-bottom: 1.40625em;*/
/*}*/

.content .jumbotron {
  /* corresponds to 22px */
  font-size: 1.375em;
}

.content .jumbotron p {
  /* 1.25 line space */
  line-height: 1.375em;
  /* space after paragraphs */
  margin-top: 1.375em;
}

/*.content .jumbotron ul {*/
  /*margin-bottom: 1.375em;*/
/*}*/

.content .jumbotron li {
  /* single line space */
  line-height: 1.375em;
}

.content .descriptive {
  /* corresponds to 18px */
  font-size: 1.125em;
}

.content .descriptive .cite {
  font-size: 0.85em;
  line-height: 1.125em;
  padding-top: 0.875em;
}

.content .bullet {
  margin-bottom: 0.5em;
}

.content .panel {
  margin-top: 1.25em;
}

/* MW: this seems like a b.s. hack */
/* The bummer is the bullets are not aligned by the position of bullets but the
 * position of the text after the bullets. And the distance between the bullets
 * and the text after them cannot be easily controlled in a non-hacky way.*/
/*
 * the following number is a pretty accurate eyeballing... Srinath and I checked with ruler.
 */
.panel-body ul {
  padding-left: 1.25em;
  margin-bottom: 0em;
}

/*
 * MW: the sub-bullet style should apply everywhere, not only to things
 * marked 'panel body'. or else, everything should be marked 'panel
 * body'. But the way it is now is inconsistent and hacky.
 */
ul ul, ol ul {
  list-style-type: square;
}

.text-emphasis {
  font-style: italic;
}

/*==================================================*/
/* space after heading */
h2 {
  margin-bottom: 1em;
}

h3 {
  margin-bottom: 1em;
}

/*==================================================*/
/* side bar style */
#nav-tab {
  width: 15em;
  padding-top: 1.875em;
}

#nav-tab ul {
  padding-left: 1.875em;
}

#nav-tab ul li {
  padding: 0.25em;
  list-style-type: none;
}

#nav-tab li.active {
  font-weight: bold;
}

#nav-tab #about-collapse a.tab-toggle:hover {
  text-decoration: none;
}

#nav-tab #about-collapse li:hover {
  background-color: #eeeeee;
}

#nav-tab #about-collapse li a {
  position: relative;
  display: block;
}

/*==================================================*/
/* disable the animation of the collapse */
.collapsing {
  -webkit-transition: none;
  transition: none;
}

.up-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-bottom: 4px solid;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 0 dotted;
  content: "";
}

.down-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 0 dotted;
  content: "";
}