@import url(/css/slabo.css);

h1 span { position: absolute; top: -1000px; }

*
{
  font-family: 'Slabo 27px', Verdana, Tahoma, Arial, sans-serif;
  font-size: 17px;
}

div#header
{
  background-repeat: repeat-x;
  height: 338px;
}

div#footer
{
  clear: both;
  background-repeat: repeat-x;
  height: 338px;
}

div#sidebar
{
  float: right;
  width: 250px;
  min-height: 500px;
  padding-left: 10px;
  border-left:  #635e5a 1px solid;
}

img.tanzeige
{
  float: left;
  margin-right: 10px
}

h2
{
  font-size: 36px;
  margin: 0;
  padding-top: 20px;
}

div#content p
{
  margin: 3px 0 15px 0;
}

img#logo
{
  display: block;
  height: 128px;
  width: 638px;
  position: absolute;
  z-index: 5;
  left: calc((100% - 960px) / 2 + 20px);
  top: 5px;
}

img#stein
{
  display: block;
  height: 250px;
  width: 637px;
  position: absolute;
  right: calc((100% - 960px) / 2 - 20px);
  top: 88px;
}

div#content
{
  margin-top: 20px;
  margin-right: 280px;
}

div#contentainer
{
  width: 960px;
  margin: 0 auto;
}

div#menu
{
  position: absolute;
  top: 300px;
  left: calc((100% - 960px) / 2 + 20px);

}

div#menu a
{
  display: inline-block;
  padding: 5px 30px 5px 0px;
  font-size: 18px;
}

h3
{
  font-size: 24px;
  margin: 25px 0 5px 0;
}

div#sidebar h3
{
  font-size: 24px;
}

div#sidebar h3:first-of-type
{
  margin-top: 0;
}

input#suchbutton
{
  width: 405px;
}

input.button
{
  display: inline-block;
  color: #ffffff;
  cursor: pointer;
}

img.trenner
{
  display: block;
  clear: left;
  width: 100%;
}

body
{
  margin: 0;
}

ul
{
  list-style: none;
}

input#suchbegriff
{
  width: 400px;
}

ul.familienseite img
{
  max-width: 100%;
}

label
{
  display: inline-block;
  width: 80px;
  margin-right: 10px;
  text-align: right;
  margin-bottom: 10px;
}

label#labeltyp
{
  width: 60px;
}

div#labeltypbr
{
  display: none;
}

select#suchzeitraum
{
  width: 160px;
  display: inline-block
}


select#suchtyp
{
  width: 175px;
  display: inline-block
}

div.details
{
  margin-left: 410px;
}


/* ############################ globalMessages ############################### */

div#globalMessages
{
  display: block;
  overflow: hidden;
  margin: 0;
}

div#globalMessages ul
{
  margin: 0 auto;
  display: block;
  min-height: 40px;
  padding: 7px 16px 5px 50px;
  color: #000000;
  font-size: 14px;
}


div#globalMessages ul#Hinweis
{
  background: #dbecff url(/images/common/icons/hinweis.png) calc((100% - 960px) / 2 - 10px) 5px no-repeat;
}

div#globalMessages ul#Erfolg
{
  background: #d4ffcd url(/images/common/icons/erfolg.png) calc((100% - 960px) / 2 - 10px) 5px no-repeat;
}

div#globalMessages ul#Warnung
{
  background: #fefccb url(/images/common/icons/warnung.png) calc((100% - 960px) / 2 - 10px) 5px no-repeat;
}

div#globalMessages ul#Fehler
{
  background: #ffd2d3 url(/images/common/icons/fehler.png) calc((100% - 960px) / 2 - 10px) 5px no-repeat;
}

div#globalMessages ul li
{
  width: 960px;
  padding: 0;
  margin: 0 auto 5px auto;
  list-style: none;
  padding-left: 3px;
}

div#globalMessages ul li.boxtitle
{
  font-size: 16px;
  font-family: Georgia, Verdana, Tahoma, Arial;
  padding: 0;
}


div#globalMessages ul#Hinweis li.boxtitle
{
  color: #2850c1;
}


div#globalMessages ul#Erfolg li.boxtitle
{
  color: #258815;
}


div#globalMessages ul#Warnung li.boxtitle
{
  color: #878314;
}


div#globalMessages ul#Fehler li.boxtitle
{
  color: #871414;
}

small
{
  font-size: 13px;
}

.mobileonly
{
  display: none;
}


@media
(max-width: 1000px),
(max-device-width: 1000px),
screen and (max-width: 1000px)
{
  div#sidebar { display: none; }

  .mobileonly
  {
    display: block;
  }

  div#content
  {
    padding: 5px;
  }

  img.tanzeige
  {
    width: 50%;
  }

  div.details
  {
    margin-left: calc(50% + 10px);
  }

  ul.familienseite3 li a
  {
    display: block;
  }

  ul.familienseite li div.details
  {
    margin: 5px 0;
  }


  div#globalMessages ul#Hinweis
  {
    background-position: 5px 5px;
  }

  div#globalMessages ul#Erfolg
  {
    background-position: 5px 5px;
  }

  div#globalMessages ul#Warnung
  {
    background-position: 5px 5px;
  }

  div#globalMessages ul#Fehler
  {
    background-position: 5px 5px;
  }

  div#globalMessages ul li
  {
    width: auto;
    margin: 0;
  }


  label#labeltyp
  {
    width: 80px;
  }

  div#labeltypbr
  {
    display:block;
    height: 0px;
  }

  select#suchzeitraum,
  input#suchbegriff,
  select#suchtyp
  {
    width: 200px;
  }

  input#suchbutton
  {
    width: 205px;
  }


  div#header
  {
    background-position: 0 -34px;
    height: 155px;
  }

  div#footer
  {
    height: 125px;
  }

  img#logo
  {
    display: block;
    height: 59px;
    width: 268px;
    position: absolute;
    z-index: 5;
    left: 10px;
    top: 10px;
  }

  img#stein
  {
    display: block;
    height: 100px;
    width: 255px;
    position: absolute;
    right: 5px;
    top: 55px;
  }

  div#content
  {
    margin-top: 10px;
    margin-right: 0;
  }

  div#contentainer
  {
    width: auto;
    margin: 0;
  }

  div#menu { display: none; }
}