/* ==========================================================================
 *  Übersicht:
 *    - Imports
 *    - Body
 *    - Typo
 *    - Text Formating
 *    - Forms
 *    - Helpers
 *    - Page
 *    - Header
 *    - Logo
 *    - Content
 *    - etc
 * ========================================================================== */

/* --------------------------------------------------------------------------
*  imports
* -------------------------------------------------------------------------- */

@import "columns.css"; /* wrapper */

/* --------------------------------------------------------------------------
 *  body
 * -------------------------------------------------------------------------- */

   body {
     background: #fff;
     color: #000000;
     font-family: verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
     line-height: 140%;
     margin: 0;
     padding: 0;
   }
   
   html,
   body {
     padding: 0px;
     margin: 0px;
     height: 100%;
   }
   
   fieldset {
     margin: 0;
     padding: 0;
   }
   
   
/* --------------------------------------------------------------------------
 *  Buttons
 * -------------------------------------------------------------------------- */
   .fieldAdd .button_y_x100 {
     background: url(../graphics/bg_button_y_x100.gif) no-repeat transparent;
     width: 100px;
     line-height: 30px;
     height: 30px;
     border: 0;
     font-weight: bold;
     cursor: pointer;
   }
   .fieldAdd .button_y_x100:hover {
     text-decoration: underline;
   }
   
/* --------------------------------------------------------------------------
 *  qThumbs
 * -------------------------------------------------------------------------- */
   .qThumbBorder {
     width: 50px;
     height: 50px;
     border: 1px solid #ccc;
     padding: 1px;
     background: #fff;
   }

   
/* --------------------------------------------------------------------------
 *  tooltip
 * -------------------------------------------------------------------------- */
   .tooltipButton {
     margin: 2px 0 0 7px;
     width: 18px;
     height: 18px;
     border: 0;
     cursor: pointer;
   }

   .tooltipBox {
     position: relative;
     width: 308px;
     background: #efefef;
     border: 1px solid #bdbfbf;
     margin-top: 3px;
     padding: 7px  10px 10px 10px;
     color: #333;
   }

   .tooltipBox .pointer {
     position: absolute; /* parent is tooltipBox! */
     top: -10px;
     left: 20px;
     width: 20px;
     height: 10px;
     overflow: hidden;
     background: url(./../graphics/tooltip_pointer.gif) no-repeat;
   }
   
   .tooltipBox .headline {
     font-weight: bold;
     line-height: 20px;
   }
   
/* --------------------------------------------------------------------------
 *  typo
 * -------------------------------------------------------------------------- */

   p, td, th {
     /*
     font-family: Arial, Helvetica, sans-serif;
     font-size: 0.8em;
     line-height: 1.3em;
     padding: 0;
     margin: 0;
     color: #333; */
   }
   
   h1 {
     font-size: 17px;
     line-height: 140%;
   }
   
   h3 {
     font-size: 1.1em;
     line-height: 1.4em;
     padding: 0;
     margin: 0;
     color: #333;
   }
   
   h4 {
     font-size: 1.4em;
     line-height: 1.6em;
     padding: 0;
     margin: 0;
   }
   
   a {
     color: #cc9900;
     cursor: pointer;
   }
   
   ul.apply {
     list-style-image:url(../graphics/icon_apply.gif);
   }
   
   ul.apply li {
     margin: 9px 0;
     padding: 0 0 0 3px;
   }
   
   
/* --------------------------------------------------------------------------
 *  messageBox und errorBox
 * -------------------------------------------------------------------------- */

   div.messageBox {
     margin-bottom: 10px;
     border: 1px solid #fecd08;
     background: #ffffcc;
     padding: 15px;
     font-weight: bold;
     position: relative;
   }
   div.messageBox .messageBoxClose {
     position: absolute;
     right: 5px;
     top: 5px;
     width: 16px;
     height: 16px;
     background: url(../graphics/cancel.png) no-repeat transparent;
     cursor: pointer;
   }
   
/* --------------------------------------------------------------------------
 *  text formating
 * -------------------------------------------------------------------------- */

   .important {
     color: #146eb4 !important;
   }
   
   form .important {
     font-weight: bold;
   }
   
   .lessImportant {
     color: #999;
   }
   .lessImportant2 {
     color: #777;
   }

   .normal {
     font-weight: normal;
   }
   
   .small {
     font-size: 85%;
   }
   
   .justify {
     text-align: justify;
   }
   
   a {
     text-decoration: none;
   }

   a:hover {
     text-decoration: underline;
   }
   

   a.link0 {
     padding:3px 3px 3px 15px;
     background: url(../graphics/linkIcon1.gif) no-repeat transparent;
     background-position: 4px center;
   }

   a.link1 {
     display: block;
     padding:3px 3px 3px 15px;
     background: url(../graphics/linkIcon1.gif) no-repeat transparent;
     background-position: 4px center;
   }
   
   a.linkSub {
     display: block;
     padding: 3px 3px 3px 20px;
     background-position: 4px center;
   }
   
   a.backLink {
     padding: 0 0 0 10px;
     background: url(../graphics/linkIconArrowL.gif) no-repeat transparent;
     background-position: left 70%;
   }
   

   a.ext {
     background: url(../graphics/linkIconExt.gif) no-repeat transparent;
     background-position: right center;
     padding: 0 15px 0 0;
   }
   
   a.route {
     background: url(../graphics/linkIconRoute.gif) no-repeat transparent;
     background-position: right 60%;
     padding: 0 11px 0 0;
   }
   
   a.arrowL {
     background: url(../graphics/linkIconArrowL.gif) no-repeat transparent;
     background-position: left 60%;
     padding: 0 0 0 11px;
   }
   
   a.arrowR {
     background: url(../graphics/linkIconArrowR.gif) no-repeat transparent;
     background-position: right 60%;
     padding: 0 11px 0 0;
   }



/* --------------------------------------------------------------------------
 *  helpers
 * -------------------------------------------------------------------------- */

   .float1 {
     float: left;
   }
   .float2 {
     float: right;
   }
   
   
   tbody td.bgr_spacer,
   thead th.bgr_spacer {
     width: 10px;
     border-width: 0px;
   }
   
   .borderBottom {
     border: 1px solid #ccc;
     border-width: 0 0 1px 0;
   }
   
   .borderTop {
     border: 1px solid #ccc;
     border-width: 1px 0 0 0;
   }
   
   .border {
     border: 1px solid #ccc;
   }
   
   .valign_m {
     vertical-align: middle;
   }
   
   
   
/* --------------------------------------------------------------------------
 *  Formulare LinkButtons
 * -------------------------------------------------------------------------- */

   
   a.linkButton_g_x200 {
     display: block;
     background: url(../graphics/bg_button_g_x200.gif) no-repeat transparent;
     width: 200px;
     line-height: 30px;
     text-align: center;
     height: 30px;
     cursor: pointer;
     color: #000;
   }

   a.linkButton_y_x200 {
     display: block;
     background: url(../graphics/bg_button_y_x200.gif) no-repeat transparent;
     width: 200px;
     line-height: 30px;
     text-align: center;
     height: 30px;
     cursor: pointer;
     color: #000;
   }

   a.linkButton_y_x100 {
     display: block;
     background: url(../graphics/bg_button_y_x100.gif) no-repeat transparent;
     width: 100px;
     line-height: 30px;
     text-align: center;
     height: 30px;
     cursor: pointer;
     color: #000;
   }

   a.linkButton_g_x100 {
     display: block;
     background: url(../graphics/bg_button_g_x100.gif) no-repeat transparent;
     width: 100px;
     line-height: 30px;
     text-align: center;
     height: 30px;
     cursor: pointer;
     color: #000;
   }


   input.invisible {
     visibility: hidden;
     height: 0px;
     width: 0px;
   }
   
/* --------------------------------------------------------------------------
 *  PageNumbers
 * -------------------------------------------------------------------------- */
   .pageNumber,
   .pageNumberInfo {
     height: 20px;
     margin: 0 3px;
     text-align: center;
     line-height: 20px;
     cursor: pointer;
   }
   .pageNumber {
     background: url(../graphics/bg_pageNumber.gif) no-repeat transparent;
     width: 20px;
   }
   .pageNumber.activ,
   .pageNumber:hover {
     background: url(../graphics/bg_pageNumberHover.gif) no-repeat transparent;
     font-weight: bold;
   }
   
   .pageNumber2 {
     padding: 2px 3px;
     margin: 0 3px;
     cursor: pointer;
   }
   .pageNumber2.activ  {
     border: 2px solid #fecd08;
     border-width: 0 0 2px 0;
     font-weight: bold;
   }
   .pageNumber2:hover  {
     background: #fecd08;
     color: #000;
   }
   
/* --------------------------------------------------------------------------
 *  Page
 * -------------------------------------------------------------------------- */
   .page {
     width: 980px;
     background: #fff;
     margin: 10px 0 0 10px;
     position: relative;
   }
   

   
/* --------------------------------------------------------------------------
 *  pageHeader
 * -------------------------------------------------------------------------- */
   .pageHeader {
     position: relative;
     width: 100%;
     height: 123px;
     margin-top: 10px;
     background: url(../graphics/bg_pageHeader.gif) repeat-x transparent;
   }
   
   .pageHeader a {
     color: #000;
   }
   
   .pageHeader .leftEnd {
     position: absolute;
     left: 0px;
     top: 0px;
     width: 6px;
     height: 123px;
     overflow: hidden;
     background: url(../graphics/bg_pageHeaderEnd.gif) no-repeat transparent;
     background-position: left top;
     z-index: 1;
   }
   
   .pageHeader .rightEnd {
     position: absolute;
     right: 0px;
     top: 0px;
     width: 6px;
     height: 123px;
     overflow: hidden;
     background: url(../graphics/bg_pageHeaderEnd.gif) no-repeat transparent;
     background-position: -6px top;
     z-index: 2;
   }
   
   .pageHeader .sportGroup {
     position: absolute;
     left: -10px;
     top: -20px;
     width: 456px;
     height: 112px;
     overflow: hidden;
     z-index: 3;
   }
   
   .pageHeader .logoWrapper {
     position: absolute;
     left: 35px;
     top: 20px;
     width: 234px;
     height: 48px;
     z-index: 4;
   }
   
   .pageHeader .logo {
     width: 234px;
     height: 48px;
     border: 0px;
   }
   
   .pageHeader .navigation {
     position: absolute;
     left: 25px;
     top: 82px;
     height: 30px;
   }
   
   .pageHeader .navigation a {
     line-height: 30px;
     color: #f1efef;
     font-size: 17px;
     padding: 0 5px;
     margin: 0 10px;
   }

   .pageHeader .navigation a:hover {
     text-decoration: none;
     color: #fecd08;
   }
   
   .pageHeader .headerLogin {
     position: absolute;
     right: 10px;
     top: 20px;
     height: 60px;
     width: 290px;
     font-size: 11px;
     color: #333;
   }
   

   .pageHeader .headerLogin a {
     color: #333;
   }
   
   .pageHeader .headerLogin .inputText {
     height: 17px;
   }
   
   .pageHeader .headerLogin input {
     width: 95px;
     height: 13px;
     border: 1px solid #767676;
     background: #fcf1c6;
     font-size: 11px;
     padding: 2px;
   }
   
   .pageHeader .headerLogin .btLogin {
     cursor: pointer;
   }
   
   
   .pageHeader .userBar {
     position: absolute;
     right: 10px;
     top: 10px;
     height: 60px;
     width: 240px;
     font-size: 11px;
     color: #333;
   }
   
   .pageHeader .userBar .qThumb {
     width: 30px;
     height: 30px;
   }
   

/* === Navigation =========================================================== */


/* --------------------------------------------------------------------------
 *  footer
 * -------------------------------------------------------------------------- */
   .footer {
     margin-top: 15px;
     color: #666;
   }

   .footer a {
     color: #666;
     text-transform: uppercase;
   }
   
   .footer a.small {
     text-transform: none;
   }
   
   .footer .colR {
     text-align: right;
   }
   
   
   
   
   .bookmarks ul{
     margin: 0;
     padding: 0;
     height:10px;
     list-style:none;
   }

   .bookmarks  li{
     float:left;
     padding-left:10px;
   }


/* --------------------------------------------------------------------------
 *  content
 * -------------------------------------------------------------------------- */
   .content {
     min-height: 500px;
   }

   .borderBox-content {
     padding:10px;
   }


/* === borderBox ============================================================ */
   .content .borderBox {
     background: #fff;
     border: 1px solid #ccc;
     border-width: 0 1px;
   }

   .content .borderBoxHeader {
     height: 7px;
     background: url(../graphics/greyRoundedCorner_tr.gif) top right no-repeat transparent;
   }

   .content .borderBoxHeader .cornerHelper {
     background: url(../graphics/greyRoundedCorner_tl.gif) top left no-repeat transparent;
     height: 7px;
     width:7px;
     overflow: hidden;
   }

   .content .borderBoxFooter {
     height: 7px;
     background: url(../graphics/greyRoundedCorner_br.gif) bottom right no-repeat transparent;
   }

   .content .borderBoxFooter .cornerHelper {
     background: url(../graphics/greyRoundedCorner_bl.gif) no-repeat transparent;
     height: 7px;
     width:7px;
     overflow: hidden;
   }

   .content .borderBox h2 {
     padding: 2px 14px 9px 14px;
     margin: 0px;
     font: 1em Verdana, Helvetica, Sans-Serif;
     color: #333;
     font-weight: bold;
     background: url(../graphics/bgr_borderBoxH2_yellow.jpg) repeat-x #fff;
     background-position: left bottom;
   }
   
   .content .borderBox h2.grey {
     background: url(../graphics/bgr_borderBoxH2.jpg) repeat-x #fff;
   }
   
   .content .borderBox h2.borderBottom {
     height: 14px;
     border: 1px solid #ccc;
     border-width: 0 0 1px 0;
     color: #333;
   }
   
/* === borderBox 2 ========================================================== */
   .content .borderBox2 {
     background: #fff;
     border: 2px solid #bfbfbf;
     border-width: 0 2px;
   }

   .content .borderBox2Header {
     height: 10px;
     background: url(../graphics/greyRoundedCorner2_tr.gif) top right no-repeat transparent;
   }
   
   .content .borderBox2Header .cornerHelper,
   .content .borderBox2Header .cornerHelper2 {
     height: 10px;
     width:10px;
     background: url(../graphics/cornerHelper2.png) no-repeat transparent;
     overflow: hidden;
   }
   
   .content .borderBox2Header .cornerHelper {
     background-position:-10px -10px;
   }
   
   .content .borderBox2Header .cornerHelper2 {
     background-position:-20px 0;
   }

   .content .borderBox2Footer {
     height: 10px;
     background: url(../graphics/greyRoundedCorner2_br.gif) bottom right no-repeat transparent;
   }

   .content .borderBox2Footer .cornerHelper {
     height: 10px;
     width:10px;
     background: url(../graphics/cornerHelper2.png) no-repeat transparent;
     overflow: hidden;
     background-position: -10px 0;
   }

   .content .borderBox2 h2 {
     padding: 7px 14px;
     margin: 0px;
     font: 11px Verdana, Helvetica, Sans-Serif;
     color: #333;
     font-weight: bold;
   }

   .content .borderBox2 h2.borderBottom {
     padding: 7px 14px;
     height: 14px;
     border: 1px solid #ccc;
     border-width: 0 0 1px 0;
     color: #333;
   }
   
   .content .borderBox2 .Line {
     height: 20px;
     width: 100%;
     background: url(../graphics/bgr_borderBox2Line.jpg) repeat-x #fff;
     background-position: top left;
   }
   
   
   
   .content fieldset {
     padding: 0 7px;
     border: 0px;
   }
   
   hr {
     border: 1px solid #ccc;
     border-width: 0 0 1px 0;
     height: 1px;
     background-color: transparent;
   }


   .border {
     background: url(bgr_border.gif) top right repeat-y;
   }


/* === bgBoxRounded ========================================================= */

   .bgBoxRounded {
     position: relative;
   }

   .bgBoxRounded .borderBox {
     border: 1px solid #fbd642;
   }

   .bgBoxRounded .borderBox .rc {
     position: absolute; /* parent is not header but site wrapper! */
     width: 4px;
     height: 4px;
     overflow: hidden;
     background: url(./../graphics/bgr_header_corners.png) no-repeat;
   }

   @media aural {
     /* hide for screenreaders */
     .bgBoxRounded .borderBox .rc {
       display: none !important;
       visibility: hidden !important;
     }
   }

   .bgBoxRounded .borderBox .tl {
     top: 0px;
     left: 0px;
     background-position: 0 0;
   }

   .bgBoxRounded .borderBox .tr {
     top: 0px;
     right: 0px;
     background-position: -6px 0;
   }

   .bgBoxRounded .borderBox .bl {
     bottom: 0px;
     left: 0px;
     background-position: 0 -6px;
   }

   .bgBoxRounded .borderBox .br {
     bottom: 0px;
     right: 0px;
     background-position: -6px -6px;
   }

   
/* === Hintergründe BorderBoxen ============================================= */
   .bgBoxRounded .borderBox {
     background: url(../graphics/bgr_bgBoxRounded_1.jpg) repeat-x #fff;
   }

   .content .bgrLightTop {
     background: url(../graphics/bgr_lightBorderBoxTop.jpg) repeat-x #fff;
     background-position:left bottom;
   }
   
/* === Header BorderBoxen =================================================== */
   .content .borderBox1_header_y1 {
     position: relative;
     background: url(../graphics/bg_borderBox1Header_y1.gif) no-repeat transparent;
     background-position: right bottom;
     height: 50px;
     padding: 0 6px;
   }
   
   .content .borderBox1_header_y1 .cr {
     position: absolute;
     left: 0;
     bottom: 0;
     background: url(../graphics/cr_borderBox1Header_y1.gif) no-repeat transparent;
     background-position: left bottom;
     height: 50px;
     width: 6px;
   }
   
   .content .borderBox1_header_y1 .headline1 {
     line-height: 50px;
     font-size: 18px;
     font-weight: bold;
     text-align: center;
   }


   
   
/* --------------------------------------------------------------------------
 *  content tabs
 * -------------------------------------------------------------------------- */

   .content .tabs {
     margin: 10px -30px -2px 0;
     height: 36px;
     overflow: hidden;
     position: relative; /* place on top */
     z-index: 400;
     width: 100%;
   }

   .content .tabs ul {
     margin: 0;
     padding: 0;
   }

   .content .tabs ul li {
     display: block;
     float: left;
     margin: 0 -1px 0 0;
     padding: 0;
     height: 36px;
   }

   .content .tabs ul li a {
     display: block;
     float: left;
     height: 30px;
     background-image: url(../graphics/bgr_tabs.png);
     background-position: right top;
     background-repeat: no-repeat;
     margin: 6px 0 0 0;
     text-decoration: none;
     color: #000;
     cursor: pointer;
   }

   .content .tabs ul li a:hover,
   div.content .tabs ul li a:focus {
     color: #c09d11;
   }

   .content .tabs ul li a h2 {
     display: block;
     height: 22px; /* 30 - padding */
     background-image: url(../graphics/bgr_tabs.png);
     background-position: left top;
     background-repeat: no-repeat;
     margin: 0 7px 0 0;
     padding: 8px 13px 0 20px;
     font-size: 100%;
     font-weight: normal;
   }

   /* active tab */
   .content .tabs ul li.act {
     margin-right: -8px;
     position: relative; /* place on top */
   }

   .content .tabs ul li.act a {
     height: 36px;
     margin: 0;
     font-weight: bold;
     background-position: right -102px;
   }

   .content .tabs ul li.act a h2 {
     color: #ee6002 !important;
     height: 23px; /* 36 - padding */
     margin-right: 14px;
     padding-top: 13px; /* place 1px above other tabs */
     background-position: left -102px;
   }

   .content .tabs ul li.last.act a {
     background-position: right -138px;
   }

   .content .tabs ul li.last.act a h2 {
     margin-right: 8px;
     background-position: left -138px;
   }



/* --------------------------------------------------------------------------
 *  etc
 * -------------------------------------------------------------------------- */
   .clear {
     clear: both;
     width: 1px; /* force content */
     line-height: 0;
   }

   .clearAll {
     clear: all;
     width: 1px; /* force content */
     line-height: 0;
   }

   .messagebox {
     border: 1px solid #24830d;
     background-color:#9be68a;
     margin-bottom: 10px;
     padding:20px;
     font-weight: bold;
     color: #24830d;
   }

   .errorbox {
     border: 1px solid #f60;
     background-color:#FDF6E9;
     margin-bottom: 10px;
     padding:20px;
     font-weight: bold;
   }

/* === dropDown ============================================================= */
   #dropmenudiv{
     /* allgemeines */
     position:absolute;
     z-index:100;
   }
   
   .dropDown {
     background: url(../graphics/arrow_down.gif) no-repeat #fff;
     background-position: right center;
     width: 100%;
   }
   
   .dropDown,
   .dropDownSub {
     border: 1px solid #ccc;
   }

   .dropDown a,
   .dropDownSub a {
     text-decoration: none;
     color: #4f4e4e;
     font-size: 11px;
     display: block;
     text-indent: 7px;
   }

   .dropDownSub a:hover {
     background-color:#FDF6E9;
   }
   
   
   
/* --------------------------------------------------------------------------
 *  images
 * -------------------------------------------------------------------------- */

   .qThumb,
   .qThumbWrapper {
     width: 50px;
     height: 50px;
   }

   .qmThumb,
   .qmThumbWrapper {
     width: 70px;
     height: 70px;
   }

   .qbThumb,
   .qbThumbWrapper {
     width: 120px;
     height: 120px;
   }

   .qThumbWrapper,
   .qmThumbWrapper,
   .qbThumbWrapper {
     padding: 1px;
     border: 1px solid #ccc;
   }





/* --------------------------------------------------------------------------
 *  Form Felder
 * -------------------------------------------------------------------------- */

   input[type=text],
   input[type=password],
   textarea {
     padding: 1px 2px;
   }
   


/* --------------------------------------------------------------------------
 *  actionBox
 * -------------------------------------------------------------------------- */
   .actionBox { display: none; }

   .actionBox .tl { background: url(../graphics/tl.png); }
   .actionBox .tr { background: url(../graphics/tr.png); }
   .actionBox .bl { background: url(../graphics/bl.png); }
   .actionBox .br { background: url(../graphics/br.png); }
   .actionBox .b { background: url(../graphics/b.png); }

   .actionBox .tl,
   .actionBox .tr,
   .actionBox .bl,
   .actionBox .br {
     height: 10px;
     width: 10px;
   }

   .actionBox table {
     border-collapse: collapse;
   }

   .actionBox table td {
     border-bottom: 0;
     padding: 0;
   }

   .actionBox table td.body {
     padding: 10px;
     background: #fff;
     min-width: 400px;
     border: 2px solid #fecd08;
   }

   .overlay {
     position: absolute;
     z-index: 100000;
     background: #666;
     width: 100%;
     display: none;
   }
   
/* --------------------------------------------------------------------------
 *  Comments
 * -------------------------------------------------------------------------- */
   .page .comments .commentBoard .image {
     width: 80px;
   }
   .page .comments .commentBoard td {
     vertical-align: top;
   }
   .page .comments .commentBoard .time {
     color: #777;
   }
   .page .comments form[name=addComment] textarea {
     width: 440px;
     height: 50px;
   }
   .page .comments .loader {
     display: none;
     text-align: center;
     margin-top: 20px;
   }
   .page .comments #addCommentDoneMSG {
     display: none;
     padding: 40px;
     text-align: center;
   }
   .page .comments .commentBoard a {
     cursor: pointer;
   }