/*
  $Id: index.php 30 2010-03-25 10:43:13Z jw $
  $Revision: 30 $
  $LastChangedBy: jw $
  $LastChangedDate: 2010-03-25 11:43:13 +0100 (do, 25 mrt 2010) $
*/
body {
  font-family: arial, sans-serif;
  font-size: 14px;
}

table {
  border-collapse: collapse;
}

a:link,
a:visited {
  color: black;
}

#header {
  position: fixed;
  top: 0px;
  left: 95px;
  z-index: 1;
  width: 489px;
  height: 40px;
  padding-top: 19px;
  background-color: white;
}

/*
  Main navigation.
*/
#main-navigation {
  position: fixed;
  top: 35px;
  left: 252px;
  background-color: white;
}
#main-navigation li {
  float: left;
  height: 16px;
  padding-top: 1px;
  padding-left: 15px;
  background: transparent url('../media/divider.gif') no-repeat 7px 0px;
  text-transform: lowercase;
}
#main-navigation li.first {
  padding-left: 0px;
  background: none;
}
#main-navigation li a {
  color: #a1a1a1;
}
#main-navigation li a.active {
  color: #000000;
}
#main-navigation li a:hover {
  color: #000000;
}

/*
  Intro page.
*/
#intro-photos {
  position: absolute;
  float: left;         /* Needed to make this div just as wide as the photos in it. This way, the skip-intro link will align exactly at the right side of the last photo (we don't know the widths of the photos up front). */
  top: 185px;
  left: 95px;
  height: 370px;
  text-align: right;   /* For the skip-intro link. */
  white-space: nowrap; /* To make sure that the photo's will not jump to the next line, if the browser window is too narrow. */
}
#intro-photos img {
  margin-right: 4px;
}
#skip-intro {
  margin-right: 4px;
  font-size: .8em;
  color: #222222;
}

/*
  Content chain page.
*/
#content-chain {
  position: absolute;
  top: 68px;                      /* Content top: 80px; */
  left: 95px;
  border: 12px solid white;
  border-width: 12px 0px 6px 0px; /* Top and bottom borders to mask off the timeline dashes in the background, just above and below the content (so they won't 'touch' the content). */
  height: 480px;
  background: white;
}
#content-chain .content-item {
  height: 480px;
  overflow: hidden;
}
#content-chain .text {
  padding-right: 15px;
  width: 385px;
  line-height: 14px;
  font-family: verdana;
  font-size: 11px;
  letter-spacing: 0px
}
#content-chain .text h1 {
  margin-bottom: 20px;
  font-size: 18px;
}
#content-chain .text p {
  margin-bottom: 20px;
}
#content-chain .image {
  height: 480px;
  padding-right: 15px;
}
.work #buttons {
  position: fixed;
  top: 60px;
  right: 15px;
}
.work .close-button {
  position: absolute;
  top: 0px;
  right: 23px;
}
.work .more-button {
  position: absolute;
  display: none;
  top: 0px;
  right: 0px;
}

/*
  Work overview page.
*/
.work {
  background: transparent url('../media/timeline-dash.gif') repeat-y 584px 0px;
}
.work #timeline {
  position: absolute;
  top: 136px; /* Just below the text 'tijdslijn'. */
  left: 0px;
}
.work #timeline li {
  position: relative;
  height: 46px;
  width: 584px;
  overflow: visible;
}
.work #timeline li .title {
  display: none;
  position: relative;
  float: right;
  padding-right: 25px;
  height: 17px;
  top: 7px;
  background: transparent url('../media/timeline-item-line.gif') repeat-x bottom left;
  text-align: right;
}
.work #timeline li .title span {
  background-color: #ffffff;
}
.work #timeline li.sticky .title,
.work #timeline li.visited .title {
  display: block;
}
.work #timeline li.visited .title span {
  visibility: hidden;
}
.work #timeline li.sticky .title span {
  visibility: visible;
}
.work #timeline li .hotspot {
  position: absolute;
  width: 18px;
  height: 46px;
  top: 0px;
  right: -9px;
  z-index: 20;
}
.work #timeline li .photos {
  display: none;
  position: absolute;
  padding-left: 49px;
  width: 200px;        /* Making sure that the horizontal line (in the background) will be visible. */
  height: 99px;
  top: -26px;
  left: 586px;
  white-space: nowrap; /* This ensures that the photos will stay on one line. */
  background: transparent url('../media/timeline-item-line.gif') no-repeat 0px 49px;
}
.work #timeline li.sticky .photos,
.work #timeline li.visited .photos {
  display: block;
}
.work #timeline li .photos img {
  height: 99px;
  border-right: solid white 6px;
}
.work #timeline li .photos img.last {
  border-right: none;
}
.work #timeline li.sticky .photos img,
.work #timeline li.visited .photos img {
  display: none; /* The sticky/visited items do show the .photos block (with the line in the background), but not yet their images. They will be shown on mouseover. */
}
.work #timeline-text {
  position: absolute;
  top: 0px;
  left: 576px;
  z-index: 1;
}
.work .diagonal {
  position: absolute;
  z-index: -1;
}


.contentchain {
  background-attachment:fixed;
}
.contentchain #timeline-text {
  position: fixed;
  z-index: 0;         /* So that it will be behind the content. */
}