html
{
  margin: 0;
  padding: 0;
}

body
{
  margin: 0;
  font: 16px/1.3 "Myriad Pro", Helvetica, Arial, sans-serif;
}

#frame
{
  position: relative;
  width: 680px;
  margin: 0 auto;
  padding: 0 160px 30px 15px;
  background: #fff url("/imgs/408.jpg") no-repeat 10px 10px;
}

body.wide
{
  overflow-x: hidden;
  min-width: 1125px;
}

body.narrow #frame
{
  margin: 0 0 0 135px;
}

header
{
  display: block;
  margin-left: -133px;
}

header h1
{
  margin: 0;
  line-height: 1;
}

a
{
  color: #d000dd;
  text-decoration: none;
}

a:focus,
a:hover
{
  text-decoration: underline;
}

#msg
{
  padding: 270px 0 10px 0;
  font: 36px/1.3 "Myriad Pro", Helvetica, Arial, sans-serif;
  outline: none;
}

#msg p
{
  margin: .5em 0;
}

#msg a /* This is a hack for Firefox. */
{
  cursor: pointer !important;
  color: #d000dd !important;
  text-decoration: none !important;
}

#msg a:hover
{
  text-decoration: underline !important; /* This is a hack for Firefox. */
}

p.wtf
{
  font-size: 36px;
  margin: .5em 0;
}

#instruction
{
  position: relative;
  padding: 3px 4px;
  margin-bottom: 10px;
  background: #eee;
  color: #333;
  font-size: 20px;
  -webkit-transition: opacity 0.3s ease-in;
}

#instruction button
{
  
  cursor: pointer;

  text-transform: uppercase;
  font-size: 20px;
  color: #fff;
  background: #d000dd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#9d00b7), to(#d000dd));
  border: none;
  line-height: 24px;
  vertical-align: top;

  position: relative;
  margin: -7px 0 0 -7px;
  padding: 5px 0px 0 5px;
}

#instruction button:hover
{
  background: #9d00b7;
}

#editor
{
  position: absolute;
  top: 403px;
  right: 150px;
  font-size: 14px;
  font-style: italic;
  text-align: right;
  color: #aaa;
  -webkit-transition: opacity 4s ease-in;
}

span.lab
{
  font-variant: small-caps;
  text-transform: lowercase;
  font-size: 105%;
  font-weight: 600;
}

footer
{
  display: block;
  
  position: fixed;
  width: 100%;
  bottom: 0;
  margin-left: -5px;
  padding-left: 5px;
  padding-bottom: 5px;
  color: #999;
  font-size: 14px;
  background: #fff;
}

address
{
  font-style: normal;
}

footer address > span:after
{
  content: "\00B7";
  margin: 0 10px;
}

footer address > span:last-child:after
{
  content: "";
  margin: 0 10px;
}

footer a
{
  color: #999;
}

footer a:hover
{
  color: #d000dd;
}

.secret
{
  visibility: hidden;
  opacity: 0;
}

.secretVisible
{
  visibility: visible;
  opacity: 1;
}

*[contenteditable=true]
{
  outline:none;
}

*[contenteditable=true] a /* This is a hack for Firefox. */
{
  cursor: pointer !important;
  color: #d000dd !important;
  text-decoration: none !important;
}

*[contenteditable=true] a:hover /* This is a hack for Firefox. */
{
  text-decoration: underline !important;
}

#frame.bg1 { background-image: url("/imgs/408.jpg"); }
#frame.bg2 { background-image: url("/imgs/bikes.jpg"); }
#frame.bg3 { background-image: url("/imgs/boats.jpg"); }
#frame.bg4 { background-image: url("/imgs/carre2.jpg"); }
#frame.bg5 { background-image: url("/imgs/kerkstraat.jpg"); }
#frame.bg6 { background-image: url("/imgs/street.jpg"); }
#frame.bg7 { background-image: url("/imgs/magere.jpg"); }
#frame.bg8 { background-image: url("/imgs/magere2.jpg"); }
#frame.bg9 { background-image: url("/imgs/roof.jpg"); }