html, body, #page, #body
{
  height: 100%;
  overflow: hidden;
}

.iemobile
{
  font-size: 120% !important;
}
.lightest #start p,
.lightest #people p
{
  height: auto !important;
}

body
{
  text-align: center;
  background-color: Black;
  color: #ccf;
  font: 300% Arial, Helvetiva, sans-serif;
  background: #000 url(discoflakes.jpg) center top no-repeat;  
}
.lightest { background-position: center center; }
.iemobile { background-position: center top; }

#bordertop, #borderbottom
{
  position: fixed;
  left: 0; right: 0;
  height: 100px;
  background-color: Black;
  z-index: 4242;
}

body.light #bordertop,
body.light #borderbottom,
body.lightest #bordertop,
body.lightest #borderbottom,
body.ie6 #bordertop,
body.ie6 #borderbottom
{
  display: none;
}

#bordertop { top: 0; }
#borderbottom { bottom: 0; }

h1, h2, h3 
{
  margin: 1em 0 0 0;
  text-shadow: #ccf 0 0 10px;
}

h1
{
  font-size: 2.5em;
  color: #ffd100;
  text-shadow: #ff9 0 0 25px;
}

h2
{
  font-size: 1.2em;
}

h3
{
  margin: 0;
  font-size: 1em;
  font-weight: normal;
  font-style: italic;
}

p
{
  font-size: 0.8em;
  margin: 0;
  text-shadow: #ccf 0 0 10px;
}

body.light p,
body.lightest p
{
  background-image: none !important;
}

#start p, #people p {
  background-repeat: no-repeat;
  background-position: left top;
  height: 60px;
}

p.even { background-position: right top !important; }

#stef { background-image: url(img/stef.png); }
#kars { background-image: url(img/lars.png); }
#chris { background-image: url(img/chris.png); }
#martin { background-image: url(img/martin.png); }
#lukas { background-image: url(img/lukas.png); }
#bob { background-image: url(img/bob.png); }
#timvd { background-image: url(img/timvd.png); }
#tims { background-image: url(img/tims.png); }
#kamil { background-image: url(img/kamil.png); }
#lucas { background-image: url(img/lucas.png); }
#sander { background-image: url(img/sander.png); }
#timl { background-image: url(img/timl.png); }
#jelle { background-image: url(img/jelle.png); }
#rahul { background-image: url(img/rahul.png); }
#cihan { background-image: url(img/cihan.png); }
#martijn { background-image: url(img/martijn.png); }
#coen { background-image: url(img/coen.png); }
#elaine { background-image: url(img/elaine.png); }
#frank { background-image: url(img/frank.png); }
#mark { background-image: url(img/mark.png); }
#jaap { background-image: url(img/jaap.png); }
#stephen { background-image: url(img/stephen.png); }
#bas { background-image: url(img/bas.png); }
#christiaan { background-image: url(img/christiaan.png); }
#remco { background-image: url(img/remco.png); }
#cynthia { background-image: url(img/cynthia.png); }
#jeroen { background-image: url(img/jeroen.png); }
#ben { background-image: url(img/ben.png); }
#lon { background-image: url(img/lon.png); }
#wilbert { background-image: url(img/wilbert.png); }
#pascal { background-image: url(img/pascal.png); }

p span
{
  display:inline-block;
  width: 47%;
  white-space: nowrap;
}
.role
{
  text-align: left;
}
.actor
{
  text-align: right;
}

.qredits
{
  display: none;
}

.group
{
  display: none;
  position: absolute;
  left: 50%;
  margin-left: -40%;
  width: 80%;
}

#start
{
  top: 50%;
  margin-top: -80px;
}

#q42 { margin-top: -90px; }
.iemobile #start
{
  margin-top: 0;
}
.iemobile #q42
{
  margin-top: -60px;
}
.iemobile #logo
{
  display: none;
}

#remaining,
#end 
{
  top: 100%;
}

#start h1, #start h2, #start h3, #end h2
{
  margin-top: 0;
}

#body
{
  position: fixed;
  z-index: 4241;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#background
{
  background: url(foreground.png) 5% 5%, url(midground.png) 60% 60%, url(background.png) 25% 25%;
  left: 0; top: 0; right: 0; bottom: 0;
  position: fixed;
  -webkit-transition: top 120s linear;
}
.ie #background,
.ff #background
{
  background: url(background.png) 25% 25%;
}

body.lightest #background
{
  -webkit-transition: all 0s linear !important;
}

#page:target #background
{
  top: -20000px;
}

#page:hover #background
{
  top: -40000px;
}

#loading
{
  background: url(load.gif) center center no-repeat;
  left: 0; top: 0; right: 0; bottom: 0;
  position: fixed;
  opacity: 1;
}
.ie #loading, .ie6 #loading { height: 100%; width: 100%; }

.lightmessage, .notwebkitmessage
{
  display:none;
}
.light .lightmessage,
.lightest .lightmessage,
.ie .notwebkitmessage,
.ff .notwebkitmessage
{
  display: block;
}

#soundmanager-debug-toggle { display: none !important; }



/*.noflash #sm2-container
{
  top: 0 !important;
  left: 50% !important;
  margin-left: -227px !important; 
  width: auto !important;
  height: 100px !important;
}*/