h1.pageTitle
{
  background: url(../../../images/pages/work/page-title.gif) no-repeat 35px top;
}

/* work */

div.workWrapper
{
  margin: 0 0 35px 0;
  padding: 30px;
  position: relative;
  min-height: 100px;
  height: auto !important;
  height: 100px;
  background: #171714;
}

div.workWrapper div.work
{
  margin: 0;
  padding: 0;
}

div.workWrapper div.work ul.work
{
  margin: 0;
  padding: 0;
}

div.workWrapper div.work ul.work li
{
  margin: 0 30px 30px 0;
  padding: 220px 10px 0 10px;
  position: relative;
  float: left;
  width: 232px;
  height: 59px;
  display: block;
  overflow: hidden;
  background: #282828;
  border: 3px solid #171714;
  color: #fff;
}

div.workWrapper div.work ul.work li:hover
{
  border: 3px solid #3c87a7;
  background: #3c87a7;
}

div.workWrapper div.work ul.work li p span
{
  color: #3c87a7;
}

div.workWrapper div.work ul.work li:hover p span
{
  color: #171714;
}

div.workWrapper div.work ul.work li.last
{
  margin-right: 0;
}

div.workWrapper div.work ul.work li div.img
{
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 254px;
  height: 210px;
  display: block;
  overflow: hidden;
  background: #DFDCD7;
  z-index: 2;
}

div.workWrapper div.work ul.work li div.img div.scroller
{
  margin: 0;
  padding: 0;
  position: absolute;
}

div.workWrapper div.work ul.work li div.img img
{
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}

div.workWrapper div.work ul.work li h2
{
  margin: 0 0 5px 0;
  padding: 0;
  font-size: 1.8em;
  line-height: 1.1em;
  color: #fff;
  border: none;
  height: auto;
}

div.workWrapper div.work ul.work li a.view
{
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 252px;
  height: 279px;
  overflow: hidden;
  display: block;
  text-indent: -9000px;
  z-index: 3;
  background: url(../../../images/misc/spacer.gif) repeat left top;
}

/* facts */

div.factsWrapper
{
  margin: 0 0 10px 0;
  padding: 0 0 0 25px;
  background: url(../../../images/layout/facts-divider.gif) no-repeat left center;
}

div.factsWrapper div.facts
{
  margin: 0;
  padding: 0;
}

div.factsWrapper div.marginTop
{
  margin-top: 64px;
}

div.factsWrapper div.facts dl.facts
{
  margin: 0;
  padding: 0;
}

div.factsWrapper div.facts dl.facts dt
{
  margin: 0 0 5px 0;
  padding: 0;
}

div.factsWrapper div.facts dl.facts dt strong
{
  font-weight: normal;
}

div.factsWrapper div.facts dl.facts dd
{
  margin: 0 0 20px 0;
  padding: 0 0 0 10px;
  color: #3C87A7;
  line-height: 1.45em;
}

div.factsWrapper div.facts dl.facts dd a
{
  color: #3C87A7;
  text-decoration: none;
}

div.factsWrapper div.facts dl.facts dd a:hover
{
  color: #3C87A7;
  text-decoration: underline;
}

div.factsWrapper div.facts dl.facts dd ul.features
{
  margin: 0;
  padding: 0;
}

div.factsWrapper div.facts dl.facts dd ul.features li
{
  margin: 0 0 10px 0;
  padding: 0;
}

/* workViewer */

div.workViewerWrapper
{
  margin: 0 0 30px 0;
  padding: 0;
  position: relative;
  width: 900px;
  height: 388px;
  overflow: hidden;
  border-top: 1px solid #F6F7F2;
  border-bottom: 1px solid #F6F7F2;
  background: url(../../../images/pages/work/loading-anim.gif) no-repeat 315px center #171714; 
}

div.workViewerWrapper div.img
{
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 900px;
  height: 388px;
  height: auto !important;
  height: 256px;
  background: #171714;
  z-index: 2;
}

div.workViewerWrapper div.imgMax
{
  margin: 0;
  padding: 30px 0 30px 30px;
  width: 620px;
  overflow: hidden;
}

div.workViewerWrapper div.thumbnails
{
  margin: 0;
  padding: 20px 10px;
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  height: 388px;
  background: #000;
  background: rgba(0,0,0,0.7);
  z-index: 3;
}

div.workViewerWrapper div.thumbnails ul.thumbnails
{
  margin: 0;
  padding: 9px 0 0 0;
}

div.workViewerWrapper div.thumbnails ul.thumbnails li
{
  margin: 0 10px 20px 10px;
  padding: 0;
  float: left;
  width: 82px;
  height: 82px;
}

div.workViewerWrapper div.thumbnails ul.thumbnails li.last
{
  margin-right: 0;
}

div.workViewerWrapper div.thumbnails ul.thumbnails li a
{
  width: 76px;
  height: 76px;
  display: block;
  border: 3px solid #fff;
}

div.workViewerWrapper div.thumbnails ul.thumbnails li.active a,
div.workViewerWrapper div.thumbnails ul.thumbnails li a:hover
{
  border: 3px solid #3c87a7;
  display: block;
}

div.workViewerWrapper div.thumbnails ul.thumbnails li a img
{
  display: block;
}

div.workViewerWrapper a.back
{
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 25px;
  text-indent: -9000px;
  overflow: hidden;
  display: block;
  background: url(../../../images/pages/work/back-link.gif) left top #000;
  z-index: 4;
}

div.workViewerWrapper a.back:hover
{
  background-position: 0 25px;
}

div.workViewerWrapper a.gallery
{
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 25px;
  color: #fff;
  text-indent: -9000px;
  overflow: hidden;
  display: block;
  background: url(../../../images/pages/work/view-gallery-link.gif) left top #000;
  z-index: 4;
}

div.workViewerWrapper a.gallery:hover
{
  background-position: 0 25px;
}

div.workViewerWrapper a.galleryHide
{
  margin: 0;
  padding: 0;
  width: 200px;
  height: 25px;
  text-indent: -9000px;
  overflow: hidden;
  display: block;
  background: url(../../../images/pages/work/hide-gallery-link.gif) no-repeat left top;
  z-index: 4;
}

div.workViewerWrapper a.galleryHide:hover
{
  background-position: 0 -25px;
}

/* sub nav */

a.subNavBack 
{
  margin: 0 0 20px 0;
  padding: 10px 0 0 25px;
  border-bottom: 1px dotted #A9AEB4;
  color: #555d68;
  height: 30px;
  display: block;
  text-decoration: none;
  background: url(../../../images/pages/work/back-arrow.gif) no-repeat 5px 12px;
}

div.subNavWrapper p.title
{
  margin: 0;
  padding: 0 0 10px 0;
  height: auto;
  display: block;
  border-bottom: 1px solid #d4d3d0;
  font-size: 1.1em;
  line-height: 1.2em;
}