#haaroskop-wrapper
{
  overflow:                       hidden;
  padding:                        0px 30px 0px 30px;
  width:                          854px;
}

#survey,
#hourglass
{
  border-bottom:                  #D9EDBB solid 1px;
  overflow:                       hidden;
  padding:                        21px 0px 0px;
  width:                          100%;
}

.survey#survey
{
  padding-bottom:                 4px;
}

#survey .teaser
{
  float:                          left;
  padding:                        0px 20px 21px 0px;
}

.haaroskopContent
{
  float:                          left;
  font-size:                      1.1em;
  width:                          271px;
}

.haaroskopContent h1
{
  margin:                         0px;
}

.haaroskopContent h1 .subheading
{
  color:                          #666666;
  font-size:                      .9em;
}

.haaroskopContent .category
{
  color:                          #666666;
  font-size:                      1em;
  margin:                         0em;
  padding:                        0px 5px 6px;
}

.haaroskopContent .query
{
  background:                     #7EC41C;
  color:                          white;
  font-size:                      1em;
  margin-top:                     0em;
  padding:                        3px 5px;
}

.haaroskopContent p.intro
{
  font-weight:                    normal;
  margin:                         0px;
  padding:                        3px 5px;
}

.haaroskopContent p.error
{
  color:                          #CC0033;
  font-weight:                    bold;
}

.haaroskopContent p.buttonBar
{
  margin-bottom:                  0px;
  text-align:                     right;
}

.haaroskopContent p.answer
{
  margin:                         2em 0px;
  padding:                        3px 5px;
}

.haaroskopContent p.error + .answer
{
  margin-top:                     1em;
}

.haaroskopContent div.hr
{
  border-top:                     #7EC41C solid 1px;
  margin:                         0em 0em 1em;
}

.haaroskopContent table.answer
{
  margin-top:                     .5em;
  margin-bottom:                  .5em;
  width:                          100%;
}

.haaroskopContent p.error + table.answer
{
  margin-top:                     .5em;
}

.haaroskopContent td
{
  padding:                        3px 0px;
}

.haaroskopContent td.radio
{
  width:                          25px;
}

.haaroskopContent tr.even td
{
  background-color:               #F3F2F0;
}

#statusBar
{
  color:                          #999999;
  font-weight:                    bold;
  padding:                        7px 0px;
  position:                       relative;
  text-align:                     center;
  width:                          100%;
}

#progressBar
{
  position:                       absolute;
  right:                          25px;
  top:                            11px;
}

#analysis
{
  position:                       relative;
  width:                          100%;
}

#analysis h3
{
  background-color:               #7FC41C;
  color:                          white;
  margin:                         4em 0em 0em;
  padding:                        5px 10px;
}

#analysis h4
{
  background-color:               #F3F2F0;
  color:                          #333333;
  font-size:                      1em;
  margin:                         2em 5px .5em;
  padding:                        3px 5px;
  text-transform:                 uppercase;
}

#analysis p
{
  margin:                         5px;
  padding:                        3px 5px;
}

#analysis table.phase1,
#analysis table.phase2,
#analysis table.phase3,
#analysis table.phase4,
#analysis table.phase5
{
  background-position:            0px;
  background-repeat:              no-repeat;
  height:                         179px;
  margin:                         3em 130px 0px;
  padding:                        0px;
  text-align:                     center;
  width:                          379px;
}

#analysis table.phase1 td,
#analysis table.phase2 td,
#analysis table.phase3 td,
#analysis table.phase4 td,
#analysis table.phase5 td
{
  color:                          #7EC41C;
  font-size:                      19px !important;
  padding:                        0em 130px 0em 30px;
}

#analysis table.phase1 td
{
  background-image:               url(img/haaroskop/phase-1.gif);
}

#analysis table.phase2 td
{
  background-image:               url(img/haaroskop/phase-2.gif);
}

#analysis table.phase3 td
{
  background-image:               url(img/haaroskop/phase-3.gif);
}

#analysis table.phase4 td
{
  background-image:               url(img/haaroskop/phase-4.gif);
}

#analysis table.phase5 td
{
  background-image:               url(img/haaroskop/phase-5.gif);
}

#analysis .result
{
  border:                         #FE0000 solid 1px;
  margin:                         2em 5px 0em;
  overflow:                       hidden;
  padding:                        18px;
}

#analysis .result h5,
#analysis .result p
{
  font-size:                      1.2em;
  padding:                        0px;
  margin:                         0em;
}

#analysis table.tips
{
  font-size:                      inherit;
  margin:                         0px 5px;
}

#analysis table.tips tr
{
  font-size:                      inherit;
  vertical-align:                 top;
}

#analysis table.tips td
{
  font-size:                      inherit;
  padding:                        3px 0px;
}

#analysis table.tips td p
{
  padding-left:                   0px;
}

#analysis table.tips .img
{
  padding:                        3px 5px 3px 10px;
  white-space:                    nowrap;
}

#analysis .tips a
{
  font-weight:                    bold;
}