body {
	height: 100%;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: 0px;
	background-color: #CCC;
}
.border_right {
	border-right: 2px solid orange;
}
#left_half {
	float: left;
	text-align: justify;
	margin-right: 10px;
	font: 13px Verdana;
}
#right_half {
	float: left;
	text-align: justify;
	margin-right: 10px;
	font: 13px Verdana;
}
#set_3 {
	clear: both;
	font: 13px Verdana
}
#set_1 .thumbnail, #set_2 .thumbnail {  /* This applies to the container div. If you put position relative here it will break stacking order in IE6. The position relative is needed to make position absolute work while on hover state. But there is already position relative on hover state. The stylings for this div are irrelevant to the effect. These are simply to position the thumbs on page.*/
	float: left;
	clear: both;
	padding-bottom: 5px;
	padding-left: 5px;
}
#set_3 .thumbnail {  /* This applies to the container div. If you put position relative here it will break stacking order in IE6. The position relative is needed to make position absolute work while on hover state. But there is already position relative on hover state. The stylings for this div are irrelevant to the effect. These are simply to position the thumbs on page.*/
	float: left;
	padding-bottom: 5px;
	padding-left: 5px;
}
.thumbnail a { /* a inside div. a contains both large and thumb but large is hidden */
	display:block;
	text-decoration: none;
}
.thumbnail a:hover{ /*  On hover state The position absolute will be looking for something to position itself to. */
 	position:relative;
}
.thumbnail a span {  /* this targets the large image and the caption which are inside the span, inside the a, inside the thumbnail div */
	position: absolute;
	padding:5px;
	border: 1px dotted #999999;
	display:none;
	color: #333333;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #EFEFEF;
}
.thumbnail span img { /* this styles the large image only */
padding:2px;
}
.thumbnail img { /* this applies to both images. IE puts a border around links if this isn't there */
border-width: 0;
}
#set_1 .thumbnail a:hover span { /* if you hover on a, the span will display. The has position absolute already set on its hidden state */
	display:block;
	top: 50px;
	left: 110px;
	z-index: 100;
}
#set_2 .thumbnail a:hover span { /* if you hover on a, the span will display. The has position absolute already set on its hidden state */
	display:block;
	top: 50px;
	z-index: 100;
	right: 100px;
}
#set_3 .thumbnail a:hover span { /* if you hover on a, the span will display. The has position absolute already set on its hidden state */
	display:block;
	z-index: 110;
	left: 60px;
	bottom: 60px;
}
#set_1 .resize_thumb, #set_2 .resize_thumb { /* this scales down the thumb in proportion. There is no other way to target the 
first image (the thumb) without giving it a class name. The a covers both images. */
	width: 198px;
	height : auto;
}
#set_3 .resize_thumb { /* this scales down the thumb in proportion. There is no other way to target the 
first image (the thumb) without giving it a class name. The a covers both images. */
	width: 198px;
	height : auto;
}

#coolmenu{
border-left: 1px solid orange;
border-top: 1px solid orange;
border-right: 1px solid orange;
width: 134px;
background-color: #E6E6E6;
}
#coolmenu a{
font: bold 12px Verdana;
padding: 2px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid orange;
}
html>body #coolmenu a{
width: auto;
}
#coolmenu a:hover{
background-color: grey;
color: white;
}
.titel {
font: bold 18px Verdana;
}
.subtitel {
font: bold 14px Verdana;
}
.text {
font: 13px Verdana;
}
.text_rosenwasser {
font: 15px Times New Roman;
line-height: 19px
}
.rand_rosenwasser {
border-left: 1px solid orange;
border-top: 1px solid orange;
border-bottom: 1px solid orange;
}
.rand_rosenwasser2 {
border-left: 1px solid orange;
border-top: 1px solid orange;
}
.rand_rosenwasser3 {
border-left: 1px solid orange;
}
#unten{
padding: 6px;
border-top: 2px solid orange;
border-bottom: 2px solid orange;
background-color: #FFFFCC;
}
.copyright{
font: 11px Arial;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}