/*
 * Copyright 2002-2009 inxire GmbH. All rights reserved.
 * ----------------------------------------------------------
 * Version: $Id: browse.css,v 1.28.8.18 2009/06/04 14:48:49 mgall Exp $
 *
 * Cascading Stylesheet (CSS 1.0)
 *
 * CSS stylesheet for portal view.
 *
 * This file contains all special layout rules for public
 * browse pages, but no WebArticle layout.
 *
 * This file is indented to be maintained by the LAYOUTER.
 *
 * Use CSS classes, ID's or context nodes to narrow definitions                     *
 * !! NO tag defaults should go here !!!                                            *
 * 
 * Author: Axel Morgner and Hans-Martin Keller
 */


/* ******************************************************************************** *
 * CSS rules for special page elements in portal region                             *
 *                                                                                  *
 * Use CSS classes, ID's or context nodes to narrow definitions                     *
 * !! NO tag defaults should go here !!!                                            *
 *                                                                                  *
 * ******************************************************************************** */

body, html {
  height: 100%;
}

/* Background for Scalable Left Menu */
body { background: url(../img/innsbruck/hintergrund_wg.gif) repeat-y 13.3em 0; /* Background-Image overlaps background-color at exact menu-width */ background-color: #e2e0d6; }
* html { _background: url(../img/innsbruck/hintergrund_menu_grau.gif) repeat-y 0em 0em; } /* for IE scaling below html box not supported */
body { #background-position: 9.3em 0; _background-position: 13.3em 0; } /* fix for IE7 */

#sideImage { position: fixed; top: 0; left: 0; height: 100%; /* for Firefox sideImage must be fixed */ }
* html #sideImage { display: none; /* IE doesnt support fixed, but handles mainPage at 100% contentHeight, so remove fixed element from display */ }

/* ********************************** *
 *       Main Boxes        *
 * ********************************** */

#mainPage {
  height: 100%;
  background: url(../img/innsbruck/hintergrund_pageleft_grau.gif) repeat-y 0em 0em; /* Side-Image vor page border */
}

#mainArea {
  margin: 0;
  padding: 0;
  width: 88.5em;
  position: relative;
  top: 0;
  left: 0;
}

#leftColumnBox {
  width: 12.3em;
  text-align: left;
  vertical-align: top;
  padding: 0 0 1em 1em;
  float: left;
  #background: url(../img/innsbruck/hintergrund_header_grau.gif) repeat-y 0em 0em;
  overflow: hidden;
}

#middleColumnBox {
  /*height: 400px;*/
  /* width: 100%;    HMK: brake layout for some browsers */
  width: 41.5em;
  vertical-align: top;
  padding: 0;
  height: 100%;
  margin-left: 1em;
  display: block;
  float: left;
}

#rightColumnBox, #right2ColumnBox {
  width: 15.6em;  /* max width because of IE6, otherwise right2ColumnBox breakes into new line */
  float: left; 
  text-align: left;
  vertical-align: top;
  background-color: #fff;
}

#right2ColumnBox {
  padding: 0 0 0 0.3em;
}

#footerBox {
  color: #999;
  text-align: right;
  font-size: 0.8em;
}

#waiLogo {
  margin: 1em 1em 1em 0.5em;
  text-align: center;
}

/* Inner tables are tables within the content box.
 * Used for label/value listings or form item formatting. */
.innerTable {
  border-collapse: collapse;
}

/* Add only right padding to support left alignment with text above/below */
.innerTable td {
  padding-right: 0.25em;
}

/* ********************************** *
 *       Login and Print Pages       *
 * ********************************** */

body.loginBody, body.printBody, html#loginPage, html#printPage {
  background: none;
}

#printMainPage {
  width: 41.5em;
  padding: 1em;
}

#printMainPage #printHeader {
  text-align: center;
}

#printMainPage #middleColumnBox {
  margin-left: 0;
  width: 100%;
}

#printMainPage .informaltable {
  padding-bottom: 2em;
}

#printMainPage .pathBar {
  font-weight: bold;
  color: #000;
}

#printMainPage .articleFooter {
  text-align: right;
}

#outerLogin {
  width: 100%;
  text-align: center;   /* needed for IE 5.5 to center loginBox */
}

#loginBox {
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
  text-align: left;
  width: 366px;
}

#loginBox h1 {
  border-bottom:3px solid #CCD6E0;
  font-size: 2em;
  font-weight:bold;
}

/* ********************************** *
 *       Right Navigation Menu        *
 * ********************************** */

.rightMenuTrigger, .rightMenuTrigger img {
  border: none;
  margin: 0 0 0 0.2em;
  padding: 0;
}

.rightMenuHeader {
  line-height: 1.3em;
  background-color: #9cc;
  margin: 0.3em 0.2em 0.6em 0;
  text-align: center;
  font-weight: bold;
}

.rightMenuArea {
  background-color: #e2e0d6;
/*  width: 100%;*/
  border: 1px solid #9cc;
  padding: 0.3em 0 0 0;
  margin: 0 0.2em 0 1.7em;
}

.rightMenuArea *, .rightMenuAreaLevel5 * {
  background-repeat: no-repeat;
}

.rightMenuAreaLevel5 {
  background-color: #e2e0d6;
/*  width: 100%;*/
  border: 1px solid #9cc;
  padding: 0.3em 0 0 0;
  margin: 0 0.2em 0 1.7em;
}

.rightMenuArea .mlvl0 {
  border-top: 1px solid #9cc;
  padding: 0.2em 0.2em 0.2em 1.8em;
  margin: 0.1em 0.4em 0.1em 0.4em;
  background-image: url('../img/innsbruck/nav_r.gif');
  white-space: normal;
}

.rightMenuArea .mlvl0Curr {
  border-top: 1px solid #9cc;
  padding: 0.2em 0.2em 0.2em 1.8em;
  margin: 0.1em 0.4em 0.1em 0.4em;
  background-image: url('../img/innsbruck/nav_b_i.gif');
  white-space: normal;
}

.rightMenuArea .mlvl1 {
  border-top: 1px solid #fff;
  padding: 0.2em 0.2em 0.2em 1.9em;
  margin: 0.1em 0.4em 0.1em 1.9em;
  background-image: url('../img/innsbruck/nav_sub.gif');
}

.rightMenuArea .mlvl1Curr {
  border-top: 1px solid #fff;
  padding: 0.2em 0.2em 0.2em 1.9em;
  margin: 0.1em 0.4em 0.1em 1.9em;
  background-image: url('../img/innsbruck/nav_sub_a_i.gif');
}

.rightMenuArea .mlvl2 {
  border-top: 1px solid #fff;
  padding: 0.2em 0.2em 0.2em 1.9em;
  margin: 0.1em 0.4em 0.1em 3.3em;
  background-image: url('../img/innsbruck/nav_sub.gif');
}

.rightMenuArea .mlvl2Curr {
  border-top: 1px solid #fff;
  padding: 0.2em 0.2em 0.2em 1.9em;
  margin: 0.1em 0.4em 0.1em 3.3em;
  background-image: url('../img/innsbruck/nav_sub_a_i.gif');
}

.rightMenuArea .mlvl3 {
/*  border-top: 1px solid #fff;*/
  padding: 0.2em 0.2em 0.2em 1.9em;
  margin: 0.1em 0.4em 0.1em 4.7em;
  background-image: url('../img/innsbruck/nav_sub.gif');
}

.rightMenuArea .mlvl3Curr {
/*  border-top: 1px solid #fff;*/
  padding: 0.2em 0.2em 0.2em 1.9em;
  margin: 0.1em 0.4em 0.1em 4.7em;
  background-image: url('../img/innsbruck/nav_sub_a_i.gif');
}

.rightMenuAreaLevel5 .mlvl0 {
  padding: 0.2em 0.2em 0.2em 1.4em;
  margin: 0.1em 0.4em 0.1em 0.4em;
  background-image: url('../img/innsbruck/nav_sub.gif');
  border: none;
  white-space: normal;
}

.rightMenuAreaLevel5 .mlvl0Curr {
  padding: 0.2em 0.2em 0.2em 1.4em;
  margin: 0.1em 0.4em 0.1em 0.4em;
  border: none;
  background-image: url('../img/innsbruck/nav_sub_a_i.gif');
  white-space: normal;
}



/* ********************************** *
 *       Left Navigation Menu         *
 * ********************************** */

#fontSizeBox {
  padding: 0.3em;
  margin: 0.5em 0.4em 0.5em 0.1em;
  background-color: #fff;
  border-top: 1px dotted #949494;
  border-bottom: 1px dotted #949494;
  vertical-align: bottom;
}

.browseNavigationTree {
  margin-right: 0.2em;
}

.browseNavigationTree  * {
  background-repeat:no-repeat;
}

.mlvl0 {
  background-image:url('../img/innsbruck/nav.gif');
  background-position:0 2px;
  border-top:1px solid #99CCCC;
  padding:0.2em 0.2em 0.2em 1.8em;
  white-space: nowrap;
}

.mlvl0Curr {
  border-top: 1px solid #9cc;
  padding: 0.2em 0.2em 0.2em 1.8em;
  background-image: url('../img/innsbruck/nav_b.gif');
  background-position:0 2px;
  white-space: nowrap;
}

.mlvl1 {
  background-image:url('../img/innsbruck/nav_sub.gif');
  background-position:0 2px;
  border-top:1px solid #FFFFFF;
  margin-left:1.4em;
  padding:0.2em 0.2em 0.2em 1.8em;
}

.mlvl1Curr {
  border-top: 1px solid #fff;
  padding: 0.2em 0.2em 0.2em 1.8em;
  margin-left: 1.4em;
  background-image: url('../img/innsbruck/nav_sub_a.gif');
  background-position:0 2px;
}

.mlvl2 {
  padding: 2px 0px 2px 32px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #d3d3d3;
  background-color: #f7f7f7;
}

.mlvl3 {
  padding: 2px 0px 2px 44px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #d3d3d3;
  background-color: #f7f7f7;
}

.mlvl4 {
  padding: 2px 0px 2px 56px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #d3d3d3;
  background-color: #f7f7f7;
}

.mlvl5 {
  padding: 2px 2px 2px 68px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #d3d3d3;
  background-color: #f7f7f7;
}

.mlvl6 {
  padding: 2px 0px 2px 80px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #d3d3d3;
  background-color: #f7f7f7;
}

/* Remove border on top item */
div.browseNavigationTree .topItem {
  /*border-top: none;*/
}

/* Link in browse navigation tree */
div.browseNavigationTree a:link, div.browseNavigationTree a:visited, 
div.browseNavigationTree a:hover, div.browseNavigationTree a:focus, div.browseNavigationTree a:active {
  text-decoration: none;
}

/* Ordinary tree element */
div.browseNavigationTree a {
  /*margin-left: 0.2em;*/
}

/* Emphasis current path */
div.browseNavigationTree em {
  /*padding-left: 0.2em;*/
  color: #005187;
  font-style: normal;
  background: url('../img/d_arrow.gif') no-repeat left center;
/*  font-weight:      bold;*/
/*  text-decoration: underline;*/
}

/* Emphasis current node */
div.browseNavigationTree em.currentNode {
  background: url('../img/r_arrow.gif') no-repeat left center;
}


/* ********************************** *
 *           Content Columns          *
 * ********************************** */

.contentWrapper {
  margin: 1em 0.5em 1em 0;
  background-color: #fff;
  display: block;
}

/* Box around content area (middle column), may include <h1> */
.contentArea {
  border: 1px solid #E0E1DB;
  margin: 0.2em 0 0.8em 0;
  padding: 0.4em 0.4em 0.4em 0.6em;
  height: 100%; 
}

* html .contentArea { width:100%; }

.contentAreaHeaderRight {
  float: right;
  white-space: nowrap;
  /*width: 5.5em;*/
  height: 100%;
  vertical-align: middle;
}

.contentAreaHeaderLeft {
  background-image: url(../img/innsbruck/content_background.gif);
  background-repeat: repeat-y;
  padding-left: 0.3em;
  line-height: 1.5em;
  height: 100%;
}

.contentAreaHeaderLeft span {
  vertical-align: middle;
}

.contentAreaHeaderLeft span {
  color: #000000;
}

.rightAreaHeader, .right2AreaHeader {
  background-color:#999999;
  color:#FFFFFF;
  font-weight:bold;
  margin:0.2em;
  padding:0 0 0 0.4em;
}

.rightContentArea, .right2ContentArea {
  border:1px solid #E0E1DB;
  margin: 0.2em;
  padding: 0.2em;
}

.rightArticle a, .right2Article a {
  background-repeat: no-repeat;
  line-height: 1.8em;
}

.rightArticle .mediaobject, .right2Article .mediaobject {
  text-align: left;
  margin: 0.2em;
}

#rightMenu  a {
  line-height: 1.2em;
}
#rightMenu  .rightAreaHeader, #right2Menu .right2AreaHeader {
  color: #000;
  background-color: #e2e0d6;
}

/* Area header for left or right column, use above itemArea */
.areaHeader {
  padding: 6px 0px 4px 6px;
  border-bottom: 1px solid #d3d3d3;
  background-color: #eceaeb;
}

/* Item area in left or right column.
 * HMK: brakes CSS concept, use contentArea and define some add-on class for layout */
.itemArea {
  border:1px solid #E0E1DB;
  margin: 0.2em;
  padding: 0.2em;
}

.item {
  background-image: url('../img/innsbruck/pfeil_re.gif');
  background-repeat: no-repeat;
  white-space: nowrap;
  margin: 0.2em 0.2em 0.8em 0.2em;
  padding: 0 0 0.3em 1.2em;
}

.item img, .areaHeader img, .moreLink img {
  vertical-align: middle;
}

.moreLink {
  margin-top: 0.5em;
  text-align: right;
}


/* ********************************** *
 *           Header box               *
 * ********************************** */
 
#headerBox {
  color: #fff;
  background-color: #ccc;
  background-image: url(../img/innsbruck/hintergrund_header_grau.gif);
  background-repeat: repeat-y;
  min-height: 55px;
  width: 100%;
  margin: 0;
  padding: 0;
}

#headerBoxContentWrapper {
  margin: 0;
  padding: 0;
  width: 79em;
}

#headerBox img {
  float: left;
}

#leftHeaderBox {
  width: 609px;
  float: left;
}

#leftHeaderBox img.banner {
  border-top: 1px solid #b5b3ac;
  margin-left: 148px;
}

#rightHeaderBox, #right2HeaderBox {
  /*margin-left: 618px;*/
  overflow: hidden;
}

#searchBox {
  float: left;
  margin: 0 0.5em 0 0.7em;
}

#searchBox input {
  size: 20;
  font-size: 1em;
  margin: 9px 2px 0 0;
  float: left;
}

#searchBox a:link {
  font-size: 1em;
  text-decoration: none;
}

#keywordBox {
  padding: 9px 0;
  float: left;
}

#keywordBox select {
  width: 10em;
}

#extendedSearchButton {
  margin: 0.2em 0.3em 0 0;
  text-align: right;
}

#upperRightHeaderBox, #upperRight2HeaderBox {
  float: left;
}

#lowerRightHeaderBox, #lowerRight2HeaderBox {
  clear: both;
}

#menuBox {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  vertical-align: top;
  line-height: 1.5em;
  clear: both;
}

#menuBoxContentWrapper {
  margin-left: 1em;
  background-color: #CCCC99;
  border-bottom: 1px solid #000000;
  border-top: 1px solid #000000;
}

#menuBox img {
  vertical-align: middle;
  margin: 1px 0;
}

#menuBox .firstLink {
  margin-right: 7.3em;
}

/* Updated header button style with Opera and background fix */
table.headerButton, table.headerButtonOver {
  margin: 10px 1px;
  float: left;
  border-collapse: collapse;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.83em;
}

td.headerButtonLeft {
  background: url('../img/button_begin2.gif') no-repeat right center;
  width: 3px;
  height: 18px;
  padding: 0;
}

td.headerButtonRight {
  background: url('../img/button_end2.gif') no-repeat left center;
  width: 3px;
  height: 18px;
  padding: 0;
}

td.headerButtonText {
  background: url('../img/button_bg2.gif') repeat-x left center;
  height: 18px;
  padding: 0px 2px;
}

.headerButtonOver td.headerButtonLeft {
  background-image: url('../img/button_begin2_over.gif');
}

.headerButtonOver td.headerButtonRight {
  background-image: url('../img/button_end2_over.gif');
}

.headerButtonOver td.headerButtonText {
  background-image: url('../img/button_bg2_over.gif');
}

.headerButtonText a,
.headerButtonText a:link,
.headerButtonText a:visited,
.headerButtonText a:hover,
.headerButtonText a:focus,
.headerButtonText a:active
{
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}


#searchButton {
  /*margin: 10px 1px;*/
}

.pathBar {
  background-image:url(../img/innsbruck/content_background.gif);
  background-repeat:repeat-y;
  color:#045489;
  padding:4px 0px 4px 4px;
  width: 41.5em;
  float: left;
}

.pathBar .path {
  /*float: left;*/
}

.pathBar .info {
  float: right;
}

.pathBar a:link, .pathBar a:visited {
  color: #045489;
/*  text-decoration: none;*/
}

.pathBar a:hover, .pathBar a:focus, .pathBar a:active {
  color: #003366;
  text-decoration: underline;
}

.pathBar img {
  vertical-align: middle;
}


/* ********************************** *
 *             Sitemap                *
 * ********************************** */

/*
 * The sitemap follows the new navigation tree style. This HTML
 * structure is in accordance with the accessibility guidelines:
 *
 * <div class="sitemapTree">
 *   <ul class="menuLevel1">
 *     <li class="itemLevel1">
 *       <div class="itemHeader1">
 *         <a href="...">LEBEN IM QUADRAT</a>
 *       </div>
 *     </li>
 *     ...
 *     <li class="currItemLevel1">
 *       <div class="currItemHeader1">
 *         <a href="..."><em>FREIZEIT</em></a>
 *       </div>
 *       <ul class="menuLevel2">
 *         <li class="itemLevel2">
 *           <div class="itemHeader2">
 *             <a href="...">FACHBEREICH SPORT UND FREIZEIT</a>
 *           </div>
 *         </li>
 *         ...
 *         <li class="currItemLevel2">
 *           <div class="currItemHeader2">
 *             <a href="..."><em>SCHWIMMEN</em></a>
 *           </div>
 *         </li>
 *         ...
 *       </ul>
 *     </li>
 *   </ul>
 * </div>
 */

/* reset defaults for all menu lists */
ul.menuLevel1, ul.menuLevel2, ul.menuLevel3, 
ul.menuLevel4, ul.menuLevel5, ul.menuLevel6 {
  margin: 0;    /* needed by IE */
  padding: 0;   /* needed by Mozilla */
  /* border: 1px solid green; */
}

ul.menuLevel1 li, ul.menuLevel2 li, ul.menuLevel3 li, 
ul.menuLevel4 li, ul.menuLevel5 li, ul.menuLevel6 li {
  display: block;
  list-style-type: none;
}

.sitemapTree {
  font-size: 1.0em;  /* 0.83em; */
  /* line-height: 140%;  /* reduce line height */
}

/* Link in sitemap */
.sitemapTree a:link, .sitemapTree a:visited, 
.sitemapTree a:hover, .sitemapTree a:focus, .sitemapTree a:active {
  text-decoration: none;
}

.sitemapTree h1, .sitemapTree h2, .sitemapTree h3, 
.sitemapTree h4, .sitemapTree h5, .sitemapTree h6 {
  font-weight: normal;
  font-size: 1em;
  margin: 0;
}

.sitemapTree em {
  font-style: italic;
}

.sitemapTree ul.menuLevel1 ul {
  padding-left: 2em;
}


/* ********************************** *
 *           Thread Tree              *
 * ********************************** */

.postTree {
  font-size: 1.0em;  /* 0.83em; */
  line-height: 140%;  /* reduce line height */
}

.postTree h1, .postTree h2, .postTree h3, 
.postTree h4, .postTree h5, .postTree h6 {
  font-weight: normal;
  font-size: 1em;
  margin: 0;
}

.postTree em {
  font-style: italic;
  /* font-weight: bold; */
}

.postTree ul.menuLevel1 ul {
  padding-left: 2em;
}


/* ********************************** *
 *           Browse Search            *
 * ********************************** */

.searchTable {
  border-collapse: separate;
}

.searchTable td {
  margin: 0.2em 0 0.2em 0;
  padding: 0.2em 0 0.2em 0;
}

.searchTable input.text {
  border: 1px solid #a5acb2;
  padding: 0.15em;
}

.searchTitle {
  font-weight: bold;
  font-size: 1.2em;
}

.searchResults {
  vertical-align: top;
}

.searchInfo {
  padding-right: 1em;  /* need by postList.jsp */
}

.searchInfo img {
  vertical-align: middle;
}

.scoreBarOuterBox {
  margin: 0.25em 0 0.5em 0;
  border: 1px solid #ccc;
  width: 104px;
}

.scoreBarInnerBox {
  background-color: #005188;
  margin: 2px;
  padding: 0;
  font-size: 0.5em;  /* dummy size, IE 5.5 will not make box smaller than font-size+2 */
  line-height: 80%;
  height: 1.5em;  /* 8px; */
  /* width is specified on-the-fly by "style" attribute */
}

label.hidden {
  display: none;
}


/* ************************************************************************** *
 *                    Main Menu Customization                                 *
 * ************************************************************************** */

/*
 * Box around main menu list. The following definitions may be used as a template
 * for menu bar customization.
 *
 * HMK:
 * 1) "width" must be given, or IE5.5 will brake header height and IE 6 may hang !!
 *    (TestCase: iocore/src/web/test/scripttest/nestedDivBug.html) 
 * 2) "padding must not be set here, but in "menuList" (brakes menu positioning)
 */ 
 
.mainMenu {
  color: #000000;
  font-weight: bold;
  padding: 0 0 0 0.1em;
  width: 79em;
}

/* Style of actuator element (may be an anchor or span) */
.mainMenu .actuator, .mainMenu a.actuator:link, .mainMenu a.actuator:visited, .mainMenu a.actuator:active {
  color: #000;
  font-weight: bold;
  text-decoration: none;
  /* margin: 0px 10px;    /* do not use vertical margin, or menus will be mis-alligned */
  margin: 0px 10px 0px 0px;
}

.mainMenu a.actuator:hover, .mainMenu a.actuator:focus {
  color: #fff;
  text-decoration: none;
}

.abstract p {
  color: #000000;
}

#moreImage{
  vertical-align: middle;
  margin: 0em 0em 0em 0.2em;
}

/* define width for some menus (needed by IE, NS7 and Mozilla) */
#naviMenu           { width: 13em; }
#helpMenu           { width: 11em; }