html
{
  margin: 0;
  overflow: hidden;
  padding: 0;
}

body
{
  background: #ffffff;
  color: #000000;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

table
{
  border-collapse: collapse;
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
table td,
div
{
  margin: 0;
  padding: 0;
  vertical-align: top;
}

a
{
  text-decoration: none;
}

div.smaaktest
{
  padding: 10px;
  width: 780px;
}

td.progress
{
  background: #cccccc;
  vertical-align: middle;
}
td.progress div
{
  float: left;
}
td.progress div.progress
{
  background-color: #ff0000;
  color: #ffffff;
  font-weight: bold;
  height: 34px;
  line-height: 34px;
  margin: 0;
  padding: 0 12px;
  text-align: right;
}
td.progress div.progress-1
{
  /* (780 (total width) - 22 (arrow width)) / 6 (number of questions) = 126.33 per question*/
  width: 102px;
}
td.progress div.progress-2
{
  width: 229px;
}
td.progress div.progress-3
{
  width: 355px;
}
td.progress div.progress-4
{
  width: 481px;
}
td.progress div.progress-5
{
  width: 608px;
}
td.progress div.progress-6
{
  width: 734px;
}
td.progress div.progress-results
{
  text-align: left;
  float: none;
}
td.progress div.progress-arrow
{
  background: url(../images/smaaktest/progress.png) top left no-repeat;
  display: block;
  float: left;
  font-size: 0;
  height: 34px;
  line-height: 0;
  margin: 0;
  padding: 0;
  width: 22px;
}

td.question
{
  color: #ff0000;
  font-weight: bold;
  padding: 20px 0;
}

tr.question-text a
{
  color: #000000;
  display: block;
  font-size: .9em;
  margin: 2px;
  padding: 4px;
}
tr.question-text a:hover
{
  background-color: #cccccc;
}
tr.question-text a span.block
{
  background: #ffffff;
  border: 2px solid #000000;
  position: relative;
  top: -1px;
  vertical-align: middle;
}
tr.question-text a:hover span.block
{
  background: #ff0000;
  border-color: #ff0000;
}

tr.question-photobig td.photos
{
  font-size: 0;
  line-height: 0;
  width: 680px;
}
tr.question-photobig td.text
{
  color: #777777;
  font-size: .9em;
  padding: 5px;
}
tr.question-photobig img
{
  margin: 4px;
}
tr.question-photobig a:hover img
{
  border: 4px solid #000000;
  margin: 0;
}

tr.question-photosmall td.photos
{
  font-size: 0;
  line-height: 0;
  width: 680px;
}
tr.question-photosmall td.text
{
  color: #777777;
  font-size: .9em;
  padding: 5px;
}
tr.question-photosmall img
{
  margin: 5px;
}
tr.question-photosmall a:hover img
{
  border: 5px solid #000000;
  margin: 0;
}

tr.result td.photo
{
  position: relative;
  width: 170px;
}
tr.result td.photo div.title
{
  background: url(../images/smaaktest/tastetitle.png) top right no-repeat;
  color: #ffffff;
  font-size: .8em;
  font-weight: bold;
  height: 34px;
  line-height: 34px;
  position: absolute;
  width: 160px;
}
tr.result td.text
{
  background-color: #bad14f;
  font-size: .9em;
  font-weight: bold;
  padding: 5px;
}
tr.result td.action
{
  padding: 0 0 0 10px;
  width: 270px;
}
tr.result td.action a
{
  background: #cccccc;
  color: black;
  display: block;
}
tr.result td.action div.action
{
  background: url(../images/smaaktest/tasteaction.png) top right no-repeat;
  color: #ffffff;
  font-size: .8em;
  font-weight: bold;
  height: 34px;
  line-height: 34px;
  padding: 0 8px;
}
tr.result td.action div.text
{
  font-size: .9em;
  font-weight: bold;
  padding: 5px;
}