div#popupframe {
  width: 864px ;
  height: 648px ;

  position: absolute ;
  left: 0 ;
  top: 0 ;
  background-color: #383838 ;
  opacity: .93 ;
  z-index: 10 ;
  display: none ;
}

div#navigation {
  position: absolute ;
  left: 0 ;
  top: 592px ;
  width: 792px ;
  z-index: 12 ;
}

div#navigation p {
  font-family: Trebuchet, Arial, Helvetica, sans-serif ;
  font-weight: bold ;
  color: #eaeaea ;
  text-align: right ;
  width: 100% ;
}

span#previous {
  cursor: pointer ;
}

span#next {
  cursor: pointer ;
}

span#return {
  cursor: pointer ;
}

div#popupframe div#closer {
  position: absolute ;
  top: 12px ;
  left: 816px ;
  cursor: pointer ;
  z-index: 18 ;
}

div#content * {
  z-index: 12 ;
  font-family: Arial, Helvetic, sans-serif ;
  color: #eaeaea ;
}

div#content h1 {
  font-family: Trebuchet, Arial, Helvetica, sans-serif ;
  font-size: 1.25em ;
  font-weight: bold ;
  margin-top: 36px ;
  margin-left: 36px ;
  margin-bottom: 24px ;
}

div#content p {
  font-size: .75em ;
  margin-top: 0px ;
  margin-left: 72px ;
  margin-right: 72px ;
  margin-bottom: 24px ;
}

div#content p.figCaption {
  margin-bottom: 6px ;
}

div#content p.centeredImage {
  text-align: center ;
  overflow: auto ;
}

div#content p.centeredImage img {
  max-height: 500px ;
}

div#content p.paraAfterFig {
  margin-top: 12px ;
}

div#content span.inlineHead {
  font-weight: bold ;
}

div#content a {
  font-weight: bold ;
}

div#content img {
  margin-left: auto ;
  margin-right: auto ;
}

.greyout {
  opacity: .4 ;
}

.whiteout {
  opacity: .1 ;
}

.popuplink {
  text-decoration: underline ;
  cursor: pointer ;
}

div#balloon {
  position: absolute ;
  width: 12em ;
  padding: 6px ;
/*  background-color: #625e5e ;  */
  background-color: #383838 ;
  color: #eaeaea ;
  font-family: Arial, Helvetica, sans-serif ;
}

div#balloon div.balloonhead {
  margin-top: 0 ;
  margin-bottom: 0 ;
  margin-left: auto ;
  margin-right: auto ;
}

div#balloon div.balloonhead h1 {
  font-family: Trebuchet, Arial, Helvetica, sans-serif ;
  font-weight: bold ;
  font-size: 1em ;
  margin: 0 ;
  padding-top: 6px ;
  padding-left: 6px ;
  padding-right: 6px ;
}

div#balloon div.balloonhead p.popupLink {
  font-size: .75em ;
  margin: 0 ;
  padding-left: 6px ;
  padding-right: 6px ;
  text-decoration: none ;
  cursor: pointer ;
}

div#balloon div.balloonhead a.externalLink {
  font-size: .75em ;
  margin: 0 ;
  padding-left: 6px ;
  padding-right: 6px ;
  color: #eaeaea ;
  text-decoration: none ;
  cursor: pointer ;
}

div#balloon div.balloonbody p {
  font-size: .75em ;
  margin: 0 ;
  padding: 6px ;
}

div#balloon div.balloonbody span.inlineHead {
  font-weight: bold ;
}

div#balloon div.balloonbody a.externalLink {
  margin: 0 ;
  padding-left: 6px ;
  padding-right: 6px ;
  color: #eaeaea ;
  text-decoration: underline ;
  cursor: pointer ;
}

div#balloon div#closer {
  position: absolute ;
  top: 4px ;
  left: 88% ;
  cursor: pointer ;
  z-index: 18 ;
  color: white ;
  font-weight: bold ;
}

b.highlight {
  color: purple ;
  font-weight: bolder ;
}

b.role {
  cursor: pointer ;
}

p.caseStudyHead {
  margin-top: 0 ;
  margin-bottom: 6px ;
}

p.caseStudyBlurb {
  margin-top: 0 ;
}

p.samplesHead {
  margin-bottom: 15px ;
}

p.rolesHead {
  margin-bottom: 6px ;
}

div#caseStudyBlock {
  padding-top: 6px ;
}

p#creditLink {
  text-decoration: underline ;
  cursor: pointer ;
  color: #616161 ;
  font-family: Trebuchet, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif ;
  font-weight: bold ;
  font-size: .75em ;
}