<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN">

<html>
<head>
<title>Three Column CSS Layout</title>

<style type="text/css">

a {
  font-family: ARIAL, HELVETICA, SANS-SERIF;
}

/*
#frame {
  position:absolute;
  left: 10px;
  top:  10px;
  width:1000px;
  background-color:#03052E;
}*/

#wrapper{
   background-color:#DEDEF0;
   margin:10px auto;
   text-align:left;
   width: 1000px;
}

#footer {
   border-top:1px dashed #000000;
   background-color:#DEDEF0;
   width: 100%;
   float: left;
   font-family: ARIAL, HELVETICA, SANS-SERIF;
   font-size: 10px;
   font-weight:bold;
   padding:0px;
}

#footer > #functions {
   text-align: center;
   padding:10px 20px;;
}

#header {
 /* position:absolute;
  left: 10px;
  top:  10px;*/
  background-color:#03052E;
  position: relative;
  width: 100%;
  z-index: 20;
  border-bottom:2px solid #03052E;
  height:100px;
  background-image:url(../bilder/header_fische3.jpg);
  background-repeat: no-repeat;
  font-family: ARIAL, HELVETICA, SANS-SERIF;
  color:#FFFFFF;
  font-weight:bold;
}

#logo{
  text-decoration:none;
  padding:0px;
  margin:0px; 
}

img {
   border:0px;
}

#header .mainbar {
  /* background-image:url(../bilder/Testrahmen3_2.jpg); */
/*  background-image:url(../bilder/testrahmen3_cityberlin.jpg);
  background-repeat: no-repeat;
  background-color:#03052E; */
  width: auto; /*1000px*/
  height:100px;
  vertical-align:bottom;
  text-align:left;
}

#header td{
  vertical-align:bottom;
}


#header a {
  font-family: ARIAL, HELVETICA, SANS-SERIF;
  color:#FFFFFF;
  font-weight:bold;
  text-decoration:none;
  padding:5px;
  margin-bottom:5px; 
}

#header a:hover{
  /*font-family: ARIAL, HELVETICA, SANS-SERIF;*/
  color:#FD5329;
  text-decoration:underline;
}

#main, #main2 {
   background-color:#DEDEF0;
   /*padding-left:160px;*/
   /*padding-right: 160px;*/
   width:auto;
   float: left;
}

#main {
   /*padding-right: 160px;*/
}

#inner{
   margin:0px;
   padding: 0px;
   float: left;
   width:100%;
   /*border-left: 2px solid #FD5329;
   border-right: 2px solid #FD5329;*/
}


#center, #center2  {
  position: relative;
  float:left;
  vertical-align:top; 
  margin: 0px;
  width: 654px;
  height:auto;
  z-index: 12;
  font-family: ARIAL, HELVETICA, SANS-SERIF;
  /*font-weight: bold;*/
  font-size: 14px;
  border-left: 2px solid #FD5329;
  background-color:#EEEEF5; /*#EEEEEE;*/
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
  /*margin-top: 10px;*/
}

#center {
  /*width: 656px;*/
  border-right: 2px solid #FD5329;
}


#center ul li{
    font-size: 16px;
	list-style-image:url(../bilder/arrow_small.gif);
	padding-bottom: 20px; 
}

#center .column1{
  border: 1px solid #000000;
  width: 50%;
  background: #FFFFFF;
  padding: 10px;
}

#center2 .column1{
  border: 1px solid #000000;
  width: 33%;
  text-align: left;
  background: #FFFFFF;
  padding: 10px;
}

#center2 .headline{
  font-family: ARIAL, HELVETICA, SANS-SERIF;
  font-size:20px;  
  font-weight:bold;
  text-align: center;
  background-color: #0187D7;
  color: #FFFFFF;
}

#center .column2{
  border: 1px solid #000000;
  width: 50%;
  background: #FFFFFF;
}

#center2 .column2{
  border: 1px solid #000000;
  width: 33%;
  background: #FFFFFF;
}

#center2 .column3{
  border: 1px solid #000000;
  width: 33%;
  background: #FFFFFF;
}

#center table{
  text-align: left;
}

#leftcontent {
  float:left;
  width: 140px;
  z-index: 11;
  vertical-align:top; 
  background-color:#DEDEF0;/*#EEEEEE;*/
  /* background-color:#000000;
  background-image: url(../bilder/button_background.jpg); 
  border-left: 1px solid #080880;  */
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
  /*margin-top: 10px;*/
}

#leftcontent table.buttons{
  width: 100%;
  background-image: url(../bilder/button_background.jpg);
  background-repeat: no-repeat;
  background-color: #03052E;
  padding: 0px;
  margin: 0px;
  border: 0px;
}

#leftcontent table.buttons td{
  border-top: 2px solid #EEEEEE;
  border-left: 2px solid #EEEEEE;
  border-bottom: 2px solid #0A335C;
  border-right: 2px solid #0A335C;  
  font-family: ARIAL, HELVETICA, SANS-SERIF;
  color:#FFFFFF;
  font-weight:bold;
  text-decoration:none;
  text-align: left;
  padding: 5px;
  /*margin-left: 5px;
  margin-right: 5px;*/
}

#leftcontent table.buttons td.second{
  border-top: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  border-left: 15px solid #FFFFFF;
  border-right: 0px solid #000000;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2 px;
  padding-bottom: 2px;
  font-family: ARIAL, HELVETICA, SANS-SERIF;
  font-stretch:condensed;
  color:#FFFFFF;
  font-weight:bold;
  text-decoration:none;
  text-align: left;
}


#leftcontent table.buttons td.active{
  border: 2px solid #FD5329;
}


#leftcontent a{
  width:140px;
  /*border: 2px solid #EEEEEE;*/
  font-family: ARIAL, HELVETICA, SANS-SERIF;
  color:#FFFFFF;
  font-weight:bold;
  text-decoration:none;
  padding:5px;
  /*margin:5px;*/ 
}

#leftcontent a:hover{
  color: #FE5329;
  border-bottom: 1px solid #FE5329;
  padding-bottom: 0px;
  /*border: 2px solid #FD5329;*/
}


#address {
  /*border: 1px solid #909090;*/
  font-family: ARIAL, HELVETICA, SANS-SERIF;
  font-size: 12px;
  text-decoration:none;
  text-align: center;
  margin-top: 20px;
}

#address a{
  font-family: ARIAL, HELVETICA, SANS-SERIF;
  color:#000000;
  font-weight:bold;
  text-decoration:underline; 
}

#address a:hover{
  color:#FF0000;
  border: 0px solid #FFFFFF;
}


#rightcontent {
  float:left;
  vertical-align:top;
  width: 140px;
  z-index: 10;
  background-color:#DEDEF0;
  border: 0px solid #080880;
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
  /*margin-top: 10px;*/
}

#rightcontent p {
  font-size:10px;
}

#box {
  font-family: ARIAL, HELVETICA, SANS-SERIF;
  font-size:10px;  
  font-weight:bold;
  text-align: left;
  border: 1px solid #000000; 
  background-color: #FFFFFF;
  color: #000000;
  padding: 0px;
}

#box th {
  font-family: ARIAL, HELVETICA, SANS-SERIF;
  font-size:12px;  
  font-weight:bold;
  text-align: center;
  color: #FFFFFF;
  background-color: #003366;
}

#box h1 {
 /* font-size: 20px;*/
 /* width: 100%;*/
  font-weight:bold;
  text-align:center;
  background-color: #003366;
  color: #FFFFFF;
  padding: 5px;  
}

#box .boxcontent{
  font-weight:bold;
  text-align:center;
  background-color: #FFFFFF;
  color: #000000;
  padding: 5px;  
}
h1 {
  font-size:large;
}

</style>

</head>

<body>

<div id="frame">

<div id="top">
	 Top-Frame für Buttons
</div>

<div id="leftcontent">
<h1>Left Content</h1>
<a href="#" class="dark">Link Example</a><br>
<a href="#">Link Example</a><br>
<a href="#">Link Example</a><br>
<a href="#">Link Example</a><br>
<a href="#">Link Example</a><br>
<a href="#">Link Example</a><br>
<a href="#">Link Example</a><br>
<a href="#">Link Example</a><br>
<a href="#">And more</a>
</div>

<div id="main">
<h1>Center Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>

<div id="rightcontent">
<h1>Right Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>

</div>

</body>
</html>
