@charset "utf-8";

/* colors used:

dark blue (text): #01327a
green background: #a2cb00
green light background: #acd700
orange background: #e87301
orange background light: #ffc000
blue background: #0ea5dd
blue background light: #30bcf1
pink background: #f87bb3
pink background light: #fbb3d3
red error messages: #8e1e04
*/

/* first import a reset stylesheet to assure stable rendering */
@import url("reset.css");

body {
  background-image: url('../layout_images/bg_body.png');
  background-color: #ffc000;
  text-align: center; /* needed to center the wrapper in IE6, reset in #wrapper */
  
  font-family: Arial,Helvetica,sans-serif;
  color: #01327a;
}


/*##############################################################################
  ############################### Layout #######################################*/

#wrapper {
  border: 1px solid #ffffff;
  background-color: #ffc000;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: left; /* reset the text-align: center; of body */
  position: relative;
}
  body.category1 #wrapper {
    background-color: #a2cb00;
  }
  body.category2 #wrapper {
    background-color: #e87301;
  }
  body.category3 #wrapper {
    background-color: #0ea5dd;
  }
  body.category4 #wrapper {
    background-color: #f87bb3;
  }
  body.metapages #wrapper {
    background-color: #e87301; /* orange as category 2 */
  }
  body.frontpage #wrapper {
    background-color: #e87301; /* orange as category 2 */
  }

#header {
  height: 120px;
  background-color: #ffffff;
  position: relative;
}

  #header_homelink {
    display: block;
    position: absolute;
    left: 19px;
    top: 0;
  }

  #header_outlink {
    display: block;
    position: absolute;
    right: 21px;
    top: 15px;
  }
  
  #header h1 {
    background-image: url('../layout_images/replace_pagetitle_429x76.png');
    width: 429px;
    height: 76px;
    position: absolute;
    left: 267px;
    top: 10px;
    text-indent: -3000px;
  }

#top_nav {
  height: 50px;
  position: relative;
}
  #top_nav ul {
    position: absolute;
    left: 322px;
    top: -20px;
  }
    #top_nav li {
      float: left;
      margin-right: 1px;
    }
      #top_nav li a {
        display: block;
        background-image: url('../layout_images/sprites_main_nav.png');
        width: 160px;
        height: 40px;
        text-indent: -3000px;
      }
      #top_nav_button1 {
        background-position: 0 0;
      }
      #top_nav_button2 {
        background-position: -160px 0;
      }
      #top_nav_button3 {
        background-position: -320px 0;
      }
      #top_nav_button4 {
        background-position: -480px 0;
      }
      body.category2 #top_nav_button1 {
        background-position: 0 -40px;
      }
      body.category2 #top_nav_button2 {
        background-position: -160px -40px;
      }
      body.category2 #top_nav_button3 {
        background-position: -320px -40px;
      }
      body.category2 #top_nav_button4 {
        background-position: -480px -40px;
      }
      body.category3 #top_nav_button1 {
        background-position: 0 -80px;
      }
      body.category3 #top_nav_button2 {
        background-position: -160px -80px;
      }
      body.category3 #top_nav_button3 {
        background-position: -320px -80px;
      }
      body.category3 #top_nav_button4 {
        background-position: -480px -80px;
      }
      body.category4 #top_nav_button1 {
        background-position: 0 -120px;
      }
      body.category4 #top_nav_button2 {
        background-position: -160px -120px;
      }
      body.category4 #top_nav_button3 {
        background-position: -320px -120px;
      }
      body.category4 #top_nav_button4 {
        background-position: -480px -120px;
      }
      /* #metapages is like category 2 */
      body.metapages #top_nav_button1 {
        background-position: 0 -40px;
      }
      body.metapages #top_nav_button2 {
        background-position: -160px -40px;
      }
      body.metapages #top_nav_button3 {
        background-position: -320px -40px;
      }
      body.metapages #top_nav_button4 {
        background-position: -480px -40px;
      }

#frontpage_nav {
  left: 32px;
  top: 152px;
  width: 240px;
  height: 480px;
  position: absolute;
  z-index: 10;
}
  #frontpage_nav ul {
    list-style-type: none;
  }
    #frontpage_nav a {
      text-indent: -3000px;
      display: block;
      width: 240px;
      height: 120px;
      background-image: url('../layout_images/sprites_frontpage_naviboxes.png');
    }
    #frontpage_nav a#frontpage_nav_button1 {
      background-position: 0 0;
    }
      #frontpage_nav a#frontpage_nav_button1:hover {
        background-position: -240px 0;
      }
    #frontpage_nav a#frontpage_nav_button2 {
      background-position: 0 -120px;
    }
      #frontpage_nav a#frontpage_nav_button2:hover {
        background-position: -240px -120px;
      }
    #frontpage_nav a#frontpage_nav_button3 {
      background-position: 0 -240px;
    }
      #frontpage_nav a#frontpage_nav_button3:hover {
        background-position: -240px -240px;
      }
    #frontpage_nav a#frontpage_nav_button4 {
      background-position: 0 -360px;
    }
      #frontpage_nav a#frontpage_nav_button4:hover {
        background-position: -240px -360px;
      }

#main_area {
  padding-bottom: 17px;
  height: 472px;
  position: relative;
}
  body.frontpage #main_area {
    height: 522px;
    background-color: #ffc000;
  }

  #sidebar {
    float: left;
    width: 344px;
    position: relative;
    height: 100%;
  }
  
    #side_nav {
      width: 200px;
      margin-left: 20px;
    }
      #side_nav li {
        padding-left: 20px;
        zoom: 1;
      }
        #side_nav li.active {
          background-image: url('../layout_images/bullet_arrow.gif');
          background-repeat: no-repeat;
          background-position: 9px 22px;
        }
      #side_nav a {
        display: block;
        border-bottom: 1px solid #ffffff;
        line-height: 28px;
        font-size: 14px;
        padding-top: 10px;
        padding-bottom: 2px;
        
      }
      #side_nav a:hover,
      #side_nav a:focus {
        color: #ffffff;
      }
    
    #login_logout_teaser {
      position: absolute;
      left: 30px;
      bottom: 0;
      border: 1px solid #ffffff;
      background-image: url('../layout_images/sprites_loginbox.png');
      
      font-size: 14px;
      line-height: 24px;
    }
      body.category1 #login_logout_teaser {
        background-position: 0 0;
      }
      body.category2 #login_logout_teaser {
        background-position: 0 -70px;
      }
      body.category3 #login_logout_teaser {
        background-position: 0 -140px;
      }
      body.category4 #login_logout_teaser {
        background-position: 0 -210px;
      }
      body.metapages #login_logout_teaser {
        background-position: 0 -70px; /* orange as category 2 */
      }
      #login_logout_teaser a {
        text-decoration: none;
        display: block;
        width: 110px;
        padding-left: 70px;
        height: 65px;
        padding-top: 5px;
      }
        #login_logout_teaser a:hover,
        #login_logout_teaser a:focus {
          text-decoration: underline;
        }
  
  #frontpage_paula {
    position: absolute;
    bottom: -2px;
    right: 70px;
    ze-index: 9;
  }
  #frontpage_textballoon {
    position: absolute;
    top: 0;
    right: 260px;
    width: 400px;
    height: 250px;
    background-image: url('../layout_images/sprites_frontpage_balloons.gif');
    z-index: 11;
  }
    .frontpage_textballoon_1 {
      background-position: 0 -250px;
    }
    .frontpage_textballoon_2 {
      background-position: 0 -500px;
    }
    .frontpage_textballoon_3 {
      background-position: 0 -750px;
    }
    .frontpage_textballoon_4 {
      background-position: 0 -1000px;
    }
  
  #main_content {
    width: 559px;
    height: 432px;
    padding: 20px 40px 20px 30px;
    overflow: auto;
  }
    body.category1 #main_content {
      background-color: #acd700;
    }
    body.category2 #main_content {
      background-color: #ffc000;
    }
    body.category3 #main_content {
      background-color: #30bcf1;
    }
    body.category4 #main_content {
      background-color: #fbb3d3;
    }
    body.metapages #main_content {
      background-color: #ffffff;
    }

#footer {
  clear: both;
  border-top: 1px solid #ffffff;
  font-size: 14px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 40px;
}
  #footer li {
    float: left;
    margin-right: 24px;
  }
    #footer li a:hover,
    #footer li a:focus {
      text-decoration: underline;
    }


/* new clearfix according to http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */    

/*##############################################################################
  ############################### Common styles ##############################*/
a {
  color: #01327a;
  text-decoration: underline;
  font-weight: bold;
}
  a:focus {
    outline: none;
  }
  .nav a {
    text-decoration: none;
  }

#main_content h2 {
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#main_content h3 {
  font-size: 14px;
  font-style: italic;
  font-weight: bold;
  line-height: 16px;
  padding-top: 30px;
  padding-bottom: 10px;
  clear: both;
}

#main_content p,
div.p {
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 16px;
}

#main_content label {
  font-size: 12px;
  line-height: 16px;
}

#main_content ul, ol {
  font-size: 12px;
  line-height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: 40px;
}

#main_content img {
  margin: 0 10px 10px 10px;
}

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.noFloatLeft {
  float: none;
  text-align: left;
}

.noFloatCenter {
  float: none;
  text-align: center;
}

.noFloatRight {
  float: none;
  text-align: right;
}

dl {
  font-size: 12px;
  line-height: 16px;
}

dt {
  font-weight: bold;
}

.tx-srfeuserregister-pi1-error,
.errormessage {
  color: #8e1e04;
}

#main_content ul.ecard_selectorlist {
  margin: 0;
  list-style-type: none;
}

#main_content ul.ecard_selectorlist li {
  text-align: center;
  margin-bottom: 40px;
}