@CHARSET "ISO-8859-1";

/* VERSION 3.0.1 */

/* ---- COLORS ------ */
/*
#99FF1A; green
#669900; dark green

#abcdff; light blue
#0066FF; blue
#004080; dark blue
#800080; purple

#333333; dark grey
#AAAAAA; medium grey
#B6B6B6: light grey used predominantly for border lines.
#CCCCCC; light grey
#F7F7F7; very light grey
#FFFFFF: White. E.g. used for background color of the actual side.
...and lots and lots more
=> please collect and consolidate

*/

/* Needed for displaying a white background on the page as the
actual page is displayed in an surrounding frame.*/
div#viewPort {
   background-color:#FFFFFF;
   width:800px;
   margin: 100px auto 0;
   border: 2px solid #B6B6B6;
}

/* ---- HEADER STYLES  --- */

div#headerContainer {
   width:800px;
   height:160px;
   overflow:hidden;
/* background-position: right top; */
/* background-repeat:no-repeat; */
/* background-image:url(gruenverlauf_640_80.gif); */
/* Background picture has to be included in a jsp
in order to get the proper file URL.*/
}

div#KuALogo {
   float:left;
   width:160px;
}

/* Needed as IE 6 does not calculate
height properly. Padding values are not
regarded for height/width calculation
as specified by the W3C */
div#upperSpacer {
   height:10px;
}

div#searchElements {
   float:right;
   padding-right:10px;
/* Without explicit height value IE6
places K&A icon differently.*/
   height:30px;
}
div#searchElements * {
/* Needed as Firefox, Opera and IE would
otherwise place search picture differently.*/
   vertical-align:bottom;
}
div#searchElements form {
   /* Workaround for IE 6 only.*/
   margin:0px;
   padding:0px;
}
div#searchElements a#searchButton {
   height:20px;
   background-image:url(Suchbutton_pfeil_normal.gif);
}
div#searchElements a#searchButton:hover {
   background-image:url(Suchbutton_pfeil_aktiv.gif);
}


div#breadcrump {
   height:40px;
   font-size:10px;
}
div#breadcrump span{
   font-weight:bold;
   color:#0066FF;
}

div#KuACircleIcon {
   clear:right;
   float:right;
   padding-right:10px;
}

/* ---- JS-MENU ---- */
div#menuLevel1 {
/* Without margin and height values set,
 the following floating menu items would not
 expand this div element. As a result the menu
 item connector vertical line would not be
 pushed down. Instead it would reside right
 in the menu items and not below as needed.*/
   margin-top:15px;
   height:15px;
}
div#menuLevel1 a {
/* Menu items are specified as floating in order to
prevent small spaces between each item (this is a workaround !)
As a result following elements would be placed right
beside the menu items if they would only be short enough.
Therefore div#menuLevel1 has to present values
for margin-top and height in order to push element
specified by id div#menuLevelConnector down!*/
   float:left;
   vertical-align:bottom;
   font-size:11px;
   padding-left:15px;
   padding-right:15px;
   border-bottom:1px solid #B6B6B6;
/* NOTE: Last menu item must not present a right border.
This is implemented within a jsp. The <a> element
contains a locl style definition regarding the right border
overriding this definition.*/
   border-right:1px solid #B6B6B6;
}
div#menuLevel1 a:hover {
   background-color: #99FF1A;
}

div#connectorContainer {
   height:30px;
}
/* Connector is invisible first. JavaScript is
used to make it opaque at the right position. */
span#menuConnector{
   display:none;
   float:left;
   height:30px;
   border-right:1px solid #B6B6B6;
}

/*Positions being relevant for the connector between
the  1st level menu and the 2nd level menu.*/
div#connectorContainer .Pos1{ width:110px;}
div#connectorContainer .Pos2{ width:225px;}
div#connectorContainer .Pos3{ width:340px;}
div#connectorContainer .Pos4{ width:420px;}
div#connectorContainer .Pos5{ width:460px;}

div#menuLevel2 {
	height:20px;
}
/* Divs containing 2nd level items for a certain 1st level item.
These divs should be invisible first. A JavaScript function makes
a certain div opaque if the respective 1st level item is hovered. */
div#menuLevel2 div {
   display:none;
}
/* Such a span is needed, in order to make the
firefox positioning equal to IE and Opera.
A simple div does not produce the same result
in Firefox, Opera, IE. */
div#menuLevel2 span {
   float:left;
   display:block;
   height:17px;
}
/* Positions being relevant for 2nd level menu items. */
div#menuLevel2 div#submenu1 span { width:40px;}
div#menuLevel2 div#submenu2 span { width:50px;}
div#menuLevel2 div#submenu3 span { width:127px;}
div#menuLevel2 div#submenu4 span { width:0px;}
div#menuLevel2 div#submenu5 span { width:106px;}
/* Menu items are specified as floating in order to
prevent small spaces between each item (this is a workaround !) As a result following elements would
be placed right beside the menu items if they would  only be short enough.
Therefore div#menuLevel2 has to present values for margin-top and height in order to push element
specified by id div#menuLevelConnector down!*/
div#menuLevel2 a {
   float:left;
   position:relative;
   vertical-align:bottom;
   font-size:10px;
   padding-left:5px;
   padding-right:5px;
   border-top:1px solid #B6B6B6;
   border-right:1px solid #B6B6B6;
}
div#menuLevel2 a:hover {
   background-color: #99FF1A;
}

/*Used to insure, that following elements are displayed below the header and not within.*/
div#headerContainer div#bottomSpacer{
   clear:left;
}

/* ---- END OF HEADER STYLES--- */


/* ---- BASICS ---- */

body {
    margin-top: 0px;
    background-color: #F7F7F7;
}

table {
  border:0px solid orange;
  border-collapse:collapse;
  border-spacing:0px;
  table-layout:auto;

}

td {
  padding:0px;
}

/* ---- TEXT TABLE ---- */

table.textTable {

}

table.textTable td {
  padding:4px;
  vertical-align:top;
}

/* ------ Paging-links table ------ */
table.pagingTable td {
  vertical-align:top;
}


/* ------ Display a single seminar ---------- */


.seminarHeadline {
  text-align:left;
}

table.seminarDescription {
  border:0px solid orange;
  border-spacing: 0px;
  width: 470px; /* width: 90%; */
}

table.seminarDescription td {
  padding: 3px;
  vertical-align:top;
  text-align: justify;
  /* width: 550px; */
}


table.seminarDetails {
  border:0px solid black;
  border-spacing: 0px;
  width: 470px; /* width: 90%; */
  padding:0px;
}

table.seminarDetails td {
  border:0px solid green;
  padding: 2px;
  padding-right: 12px;
  vertical-align:top;
}

ul.seminarContent {
  border:0px solid black;
  margin-left:0px;
  padding-left:0px;
}

ul.seminarContent li {
  border:0px solid red;
  margin-left: 15px;
}


/* ------ CALENDAR TABLE ----------- */

table.calendarTable {
  border:1px solid black;
  border-collapse:collapse;
}

table.calendarTable a:link {color:#004080;} /* dark blue */
table.calendarTable a:visited {color:#800080} /* purple */

tr.header1 td {
  background-color:#AAAAAA;
  padding: 4px;
  text-align:center;
  font-size: 14px;
  font-weight: bold;
  height: 20px;
}

tr.header2 td {
  background-color:#AAAAAA;
  padding: 2px;
  text-align:center;
  font-size: 12px;
  font-weight: bold;
  height: 20px;
}


td.blankDay {
  background-color:white;
  text-align:left;
  vertical-align:top;
  width:60px;
  height: 60px;
  padding: 2px;
  border:1px solid black;
  font-size:10px;
}

td.foreignDay {
  background-color:#CCCCCC;
  text-align:left;
  vertical-align:top;
  width:60px;
  height: 60px;
  padding: 2px;
  border:1px solid black;
  font-size:10px;
}

td.seminarDay {
  background-color:#abcdff; /* light blue */
  text-align:left;
  vertical-align:top;
  width:60px;
  height: 60px;
  padding: 2px;
  border:1px solid black;
  font-size:10px;
}

/* ------ List K&A management.    ----------- */
/*
   Following styles are used to create a
   listing of K&A management members.
   For each name a responsibility is mentioned.
   For some persons additional information, stateing
   a certain role that a person may bear, is included.
   This is a rare case where the usage of a table is
   optimal for such a listing.

   PROBLEM: Right border of left col element could not be
   faded out. Threrefor border colour had to be set to white.
*/
table#managementListing {
   border:0px none white;
}

table#managementListing col.left{
   border:0px none white;
   width:13em;
}

table#managementListing col.left + col{
   width:11em;
}

table#managementListing td{
   vertical-align:top;
   border-top-width: 0px;
   border-left-width: 0px;
   border-right-width: 0px;
   border-bottom: 0px solid #B6B6B6;
   padding-top: 1.0em;
}

table#managementListing tr.followingDetails td{
   padding-top: 0em;
}

/* ------ END OF List K&A management.    ----------- */


/* ------ Display a number of persons    ----------- */
/*
   Following elements support the listing of persons in a
   two colum layout, without using a html-table element.
   A displayed person dataset may contain a portrait photograph.
   NOT USED AT THE MOMENT!
*/

div.personsContainer {
    border: 0px solid purple;
    width: 480px;
}

div.person {
    border: 0px solid black;
    position: relative;
    top: 20px;
}

div.person div.left {
    border: 0px solid green;
    width: 220px;
    height: 210px;
}

div.person div.right {
    border: 0px solid yellow;
    width: 220px;
    height: 210px;
    position: absolute;
    left: 220px;
    top: -210px;
}

div.person div.prePictureText {
    border: 0px solid green;
    width: 210px;
    height: 30px;
    position: relative;
}

div.prePictureText span.prePictureText {
    border: 0px solid green;
    position: absolute;
    bottom: 0px;
}

div.person div.portraitPicture {
    border: 1px solid #AAAAAA;
    width: 100px;
    height: 140px;
}

div.person div.postPictureText {
    border: 0px solid green;
    width: 210px;
    height: 20px;
}


/* ------  Document Centre - Flyer items ----------- */


div.documentItemsEDITBase{
    border: 0px solid red;
    width: 50%; height: 180px;
}

div.documentItemsEDITBase div.documentItemsRow{
    border: 0px solid orange;
    position: relative; left: 320px;
    width: 100%; height: 100%;
}

div.documentItemsContainer{
    border: 0px solid purple;
    width: 640px;
}

div.documentItemsRowBase{
    border: 0px solid red;
    width: 640px; height: 180px;
}

div.documentItemsRow{
    border: 0px solid orange;
    position: relative;
    width: 640px; height: 100%;
}

div.documentItemsRow div.left{
    border: 0px solid green;
    width: 320px; height: 100%;
    position: absolute;
    /* When positioning is set to "absolute" the next element is treated as if its top-value is set to 0px! */
}
div.documentItemsRow div.right{
    border: 0px solid yellow;
    width: 320px; height: 100%;
    position: absolute;
    left: 50%;
}

div.documentItem {
    border: 0px solid black;
    width: 320px; height: 180px;
    position: absolute;
}

div.documentItem div.flyerPicture {
    border: 1px solid #AAAAAA;
    width: 120px; height: 170px;
    position: absolute; left: 0px; top: 5px;
    /* When positioning is set to "absolute" the next element is treated as if its top-value is set to 0px! */
}

div.documentItem div.flyerStrings {
    border: 0px solid green;
    width: 170px; height: 50%;
    position: absolute;  left: 130px; top: 30px;
}


/* ------  DOCUMENT TABLE ----------- */

table.documentTable {
 /* Table containing picture, that marks a download link and a
    download-text-link, specifying the same download file.
    There has to be a padding separating picture- and text-link.

    NO STYLE DIRECTIVES HERE
 */
}

table.documentTable td {
  padding: 4px;
}

table.publicationsTable {
 /* Table displaying publications should:
    a) provide entries with alternating background (grey background, white background)
    b) display all rows equal in height. At the moment 2 lines are minimum.
       Most entries need 2 rows at most, therefore entries with more than 2 rows are
       rare and do not deteriorate the layout.
 */
  border-bottom: 1px solid #DBDBDB;
}

table.publicationsTable th {
  padding:4px;
  text-align:left;
  background-color: #888888;
  /* #99FF1A; green
     #669900; dark green
     #0066FF; blue
     #333333; grey */
}

table.publicationsTable td {
  padding:4px;
  vertical-align:top;
  text-align:left;
  height: 40px;
}

.greyBackground {
  background-color: #DBDBDB;
}


table.MTable td {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:40px;
  border-top: 1px solid #B6B6B6;
  border-bottom: 1px solid #B6B6B6;

}


overallbox {
  border:1px solid green;
  width:800px;
  height:600px;
}

#mainpanel h2{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style:italic;

}


#mainpanel h3{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;

}

.intro{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-align: justify;
  color: black;
  margin: 10px 25px;
}

.introWithoutMargin{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-align: justify;
  color: black;
}

#picbox img{
  float: left;
  padding-top: 0px;
  padding-bottom: 5px;
  padding-left: 0px;
  padding-right: 0px;
  margin-right: 10px;
}

.sidebar{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin: 0px;
}

h1.sidebar{
  font-size: 14px;
  font-weight:bold;
  color: #0066FF;
  text-align:center;
  border-right:1px solid #B6B6B6;
}

div.sidebar{
    border-left:1px solid #B6B6B6;
    border-top:1px solid #B6B6B6;
    width: 220px;
    padding-top: 20px;
}

div.sidebar div{
    margin-left: 10px;
    margin-left: 5px;
    border: 0px solid green;
    margin-bottom: 5px;
}

div.sidebar p{
    margin: 0px;
}

div.sidebar a{
    color: #666666; 
}

.masstextHeader{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight:bold;
  color: #0066FF;
  text-align:center;

  border-right:1px solid #B6B6B6;
}

.masstext {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align:justify;
  color:#333333;
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 25px;
  border: 1px solid black;
}

.masstextWithoutMargin {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align:justify;
  color: #333333;
}

p {margin-top: 0px;
   margin-bottom: 8px;
   margin-left: 0px;
   margin-right: 0px;
}


.darkgreen {
    color: #669900;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}


.green {
    color: #99FF1A;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.blue {
    color: #0066FF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}


.Stil1 {
    color: #999999;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.Stil3 {color: #FFFFFF}
.Stil4 {color: #999999}
.Stil5 {
    color: #00FF00;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.Stil7 {
    color: #0066FF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.Stil8 {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}

.Stil11 {
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.Stil12 {
    color: #666666;
    font-weight: bold;
}
.Stil15 {
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.Stil17 {font-size: 24px}

/* ---- NEWS ---- */



.title {font-family: Arial, Helvetica, sans-serif; color: #666666; font-size: 11px; margin-top:20px;}
.teaser {font-size: 10px; font-style:italic; color:#333333}
.more {color: #669900; font-weight: bold; font-size: 10px; }

/* Maby needed for sidebar.  */

td.linkbutton{
}

td.linktitle{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 9px;
        font-weight:bold;
        color: blue;
}

ul {
  margin-bottom: 8px;
  margin-top: 0px;
  list-style-type:disc;
}

.rightstrong {
  font-weight: bold;
}

/* ---- FAQ ---- */

.question {
  font-weight:bold;
}
.answer {
  font-style:italic;
  margin-bottom:20px;
}

.footnote{
  font-size: 8px;
}

.searchresult{
  font-weight: bold;
  text-decoration: underline;
  color: #0066FF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.subnote{
  color: #669900;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  text-align:center;

}

/* ---- HYPERLINKS ---- */

/* links for menu */
a:link {color:black; text-decoration:none;}
a:visited {color:black; text-decoration:none;}
a:active {color:black; text-decoration:none;}
a:hover {color:black; text-decoration:underline;}

/* Prevent image links from displaying an underline in any state. */
a img {
  border:none;
  text-decoration:none;
}
/* Image links all contain the attribute "onMouseOut". This declaration prevents Opera from underlineing image-links. */
a[onMouseOut] {
  text-decoration:none;
}
a:hover[onMouseOut] {
  text-decoration:none;
}


a.subnote:link { color: #669900; }    /* noch nicht besuchte Ziele */
a.subnote:visited { color: #669900;  } /* besuchte Ziele */
a.subnote:hover { color: #669900; text-decoration:underline;}   /* Verweise bei "MouseOver" */
a.subnote:active { color: #669900; text-decoration:underline;}  /* Angeklickte Verweise */

a.blue:link { color: #0066FF; }    /* noch nicht besuchte Ziele */
a.blue:visited { color: #0066FF;  } /* besuchte Ziele */
a.blue:hover { color: #0066FF; text-decoration:underline;}   /* Verweise bei "MouseOver" */
a.blue:active { color: #0066FF; text-decoration:underline;}  /* Angeklickte Verweise */

a.newstitle:link { font-family: Arial, Helvetica, sans-serif; color: #666666; font-size: 11px; margin-top: 20px; }
a.newstitle:visited { font-family: Arial, Helvetica, sans-serif; color: #666666; font-size: 11px; margin-top: 20px; }
a.newstitle:hover { font-family: Arial, Helvetica, sans-serif; color: #666666; font-size: 11px; margin-top: 20px; }
a.newstitle:active { font-family: Arial, Helvetica, sans-serif; color: #666666; font-size: 11px; margin-top: 20px; }

/* used in newsarchive */
.masstext a:link {color:#669900;}
.masstext a:visited {color:#447700;}


/* used everywhere in the mainpanel (or so we hope) */
.mainpanel a:link {color:#669900;}
.mainpanel a:visited {color:#447700;}