/**************************************************************
   #content: Sets the width of the site. 
 **************************************************************/

#content {  
  height: auto;
  min-height: 100%;
  text-align: left;
}

#content,
#width {
  /* max-width hack for IE since it doesn't understand the valid css property */
  width: expression(document.body.clientWidth > 1000 ? "1000px" : "94%");  
  max-width: 1000px;
  margin: 0 auto;
}

#content[id],
#width[id] {
  width: 94%;
  height: auto;
}

/**************************************************************
   #header: Holds the site title and header images
 **************************************************************/

#header {
  position: relative;
  height: 142px;
}

/* Sets where the header images will go*/
#header img.left {
  /**/
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
} 

#header img.right {
  /**/
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
}

/**************************************************************
   #mainMenu: The new pulldown top level site menu
 ******************************************************/
 
#mainMenu { 
  position: absolute;
  z-index: 4;
  top: 109px;
  right: 0;
}
/* remove the bullets, padding and margins from the lists */
#mainMenu ul{
line-height: 100%;
list-style:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
#mainMenu li{
float:left;
position:relative;
z-index:100;
}

/* use the table to position the dropdown list */
#mainMenu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
/*wichtig für IE6*/
top:25px;
}

/* style the first levellinks */
#mainMenu a, 
#menu :visited {
display:block;
font-size:10px;
width:118px;
padding-top: 3px;
padding-bottom: 3px;
color:#fff;
background: url(../images/layout/blauEck_or.gif) no-repeat left top;
font: 600 1.1em/20px "trebuchet ms", sans-serif;
letter-spacing: 0.5px;
text-decoration:none;
margin-right:2px;
text-align:center;
}
/* style the links hover*/
#mainMenu a:hover{
color:#232C67; 
/* IE6 doesn't work with just one 
background and needs color fixed for IE6 in IE6layout.css*/
background-image: url(../images/layout/hellblauEck_or.gif);
background-repeat: no-repeat;
background-position: left top;

}

#mainMenu li:hover{
color:#fff;
background: url(../images/layout/spacer.gif) repeat;
/*fixed for IE6 in IE6layout.css*/
border-top: 5px solid transparent;
}
/* hide the sub level links */
#mainMenu .sub {
visibility:hidden;
position:absolute;
width:118px;
height:0;
}
/* make the sub level visible on hover list or link */
#mainMenu ul li:hover ul,
#mainMenu ul a:hover ul{
visibility:visible;

}

    /* Holly Hack Targets IE Win up to 6 only \*/
    * html #mainMenu ul li:hover ul,
	#mainMenu ul a:hover ul{
margin-top:5px;
}
    /* End Holly Hack */

/* style the sub level links*/

#mainMenu .sub li{
border-top: 1px solid #fff;
}
#mainMenu .sub a, 
#mainMenu .sub :visited {
font: 400 0.9em/20px "trebuchet ms", sans-serif;
letter-spacing: 0.5px;
background: #9094C0;
padding-top: 1px;
padding-bottom: 1px;
margin-right:0;
/*Kills Firefox. Fixed in IE6layout.css border-top: 0px solid #fff;*/
}
#mainMenu .sub :hover {
color:#232C67; 
/* IE6 doesn't work with just one background 
and needs background-color (background-color fixed in IE6layout.css)*/
background-color: transparent;
background-image: url(../images/layout/hellblauEck_or.gif);
background-repeat: no-repeat;
background-position: left top;
/*Kills Firefox. Fixed in IE6layout.css border-top: 0px solid #fff;*/
}

/* style the here link*/
#mainMenu a.here {
color:#232C67;
background-image: url(../images/layout/hellblauEck_or.gif);
background-repeat: no-repeat;
background-position: left top;
border-top: 0;
}

/* style the first and last links*/
#mainMenu #home {
background-image: url(../images/layout/blauEck_ol.gif);
background-repeat: no-repeat;
background-position: left top;
}
#mainMenu #home:hover{
 /*IE6 doesn't work with just one background*/
background-image: url(../images/layout/hellblauEck_ol.gif);
background-repeat: no-repeat;
background-position: left top;
} 
#mainMenu #home.here {
background-image: url(../images/layout/hellblauEck_ol.gif);
background-repeat: no-repeat;
background-position: left top;
}

#mainMenu #kon {
background-image: url(../images/layout/blauEck_or.gif);
background-repeat: no-repeat;
background-position: right top;
margin-right:0;
}
#mainMenu #kon:hover{
 /*IE6 doesn't work with just one background*/
background-image: url(../images/layout/hellblauEck_or.gif);
background-repeat: no-repeat;
background-position: right top;
} 
#mainMenu #kon.here {
background-image: url(../images/layout/hellblauEck_or.gif);
background-repeat: no-repeat;
background-position: right top;
}


/**************************************************************
   .sideMenu: The side bar menu
 **************************************************************/

ul.sideMenu {
  margin: 0;
  padding: 0;
}

.sideMenu li {
  display: inline;
  /* Needed since IE fails when you give it list-style: none; */  
  list-style-image: url(foo.gif);
  font: 600 1.3em/1.1em "trebuchet ms", sans-serif;
  letter-spacing: 0.4px;
}

.sideMenu li a {
  display: block;
  margin: 0.2em 0;
  padding: 3px 5px;
  text-decoration: none;
  color: #232C67;
} 

.sideMenu li a:hover {
  color: #000;
}


/* Active top menu item */
.sideMenu li.here {
  display: block;  
   /*IE6 needs padding-top: 0px; Fixed in IE6layout.css*/
   padding-top: 5px;
  color: #232C67;
  
}

/* Submenu of active menu item */
.sideMenu li.here ul {
  margin: 0;
  margin-top: 7px;
  padding: 0;
}

.sideMenu li.here ul li a {
  padding-left: 28px;
  font: 400 0.55em verdana, arial, sans-serif; 
  letter-spacing: 0.2px;
  color: #232C67;  
  background: url(../images/layout/blauPfeil.gif) no-repeat 0px 4px;
}

.sideMenu li.here ul li a:hover,
.sideMenu li.here ul li.here {
  font: 600 0.55em verdana, arial, sans-serif;
  background: url(../images/layout/blauPfeil.gif) no-repeat 8px 4px;
}

/* Active submenu item */
.sideMenu li.here ul li.here {
  padding-left: 28px;
  font: 600 0.70em verdana, arial, sans-serif; 
  letter-spacing: 0.2px; 
  background: url(../images/layout/blauPfeil.gif) no-repeat 8px 6px;
}

/**************************************************************
   #page: Holds the main page content.
 **************************************************************/

#page {
  float: left;
  width: 100%;
  clear: both;
  margin-top: 10px;
  padding-bottom: 4em;
}

#page li {;
  padding-bottom: 5px;
}
/**************************************************************
   #quote: Defines the quote
 **************************************************************/

.quote {
  width: 100%;
}

.quote h1 {
	margin: 0;
	font: italic 400 2.6em/105% "trebuchet ms", sans-serif;
	letter-spacing: 1px;
	color: #9094C0;
	padding-right: 15px;
	padding-left: 15px;
}

.quote h2 {
	margin-top: -5px;
	padding: 15px;
	font: italic 500 2.2em/105% "trebuchet ms", sans-serif;
	letter-spacing: 1px;
	color: #9094C0;
	text-align: right;
}


/**************************************************************
   #footer: The page footer - will stick to the bottom if not enough content.
 **************************************************************/

#footer {
  float: left;
  width: 100%;
  clear: both;
  margin-top: -3.8em;

}

/* Sets the width of the footer content */
#footer #width {
	position: relative;
	z-index: 3;
	color: #232C67;
	text-align: center;
	font-size: 0.85em;
	padding-top: 8px;
	line-height: 2em;
	
}



/**************************************************************
   Width classes used by the site columns
 **************************************************************/

.width100 {
  width: 100%;
}

.width75 {
  width: 74%;
}

.width50 {
  width: 49.7%;
}

.width33 {
  width: 32.7%;
}

.width25 {
  width: 24.7%;
}

/**************************************************************
   rounded corners divs
 **************************************************************/
div {
text-align:left;
}
.or {
	background: #E1E1E1 url(../images/layout/hellgrauEck_or.gif) no-repeat right top;
	margin:0;
}
.orNoEck {
	background: #E1E1E1 url(../images/layout/spacer.gif) no-repeat right top;;
	margin:0;
}
.ol {
	background: url(../images/layout/hellgrauEck_ol.gif) no-repeat left top;
	margin:0;
}
.ur {
	background: url(../images/layout/hellgrauEck_ur.gif) bottom right no-repeat;
	margin:0;
}
.ul {
	background: url(../images/layout/hellgrauEck_ul.gif) bottom left no-repeat;
	margin:0;
	padding-bottom: 10px;
}

/**************************************************************
   Force DIVs down round images
 **************************************************************/


.floatholder {
margin: 0;
}

.floatbox {
float: left;
}

.floatbox p {margin: 0;}

.floatholder p {margin: 0;}

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
  
 .clearfix {
display: inline-block;
}  

    /* Holly Hack Targets IE Win only \*/
    * html .clearfix {height: 1%;}
	.clearfix {display: block;}
    /* End Holly Hack */
	
.floatbox img.floatRight{
float: right;
padding-right: 15px;
}
.floatbox img.floatLeft{
float: left;
padding-left: 15px;
}
.floatbox p img.floatRight,
.floatbox h1 img.floatRight,
.floatbox h2 img.floatRight,
.floatbox h3 img.floatRight,
.floatbox li img.floatRight{
padding-right: 0px;
}
.floatbox p img.floatLeft,
.floatbox h1 img.floatLeft,
.floatbox h2 img.floatLeft,
.floatbox h3 img.floatLeft{
padding-left: 0px;
}
.floatbox li img.floatLeft{
	margin-left: -15px;
	padding-left: 0px;
	padding-right: 10px;
	border: 2px solid #00CC99;
}
.floatbox li img.floatRight{
	margin-right: -25px;
	padding-right: 0px;
}

/**************************************************************
   Alignment classes
 **************************************************************/

clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}
.alignCenter {
  text-align: center;
}

/**************************************************************
   Generic display classes
 **************************************************************/

.hellgrau {
  margin-bottom: 2em;
  background: #E1E1E1;
}

.clear {
  clear: both;
}
.block {
  display: block;
}
.small {
	font-size: 0.8em;
	line-height: 1.4em;
}