@font-face {
	font-family: 'TangerineRegular';
	src: url('Tangerine_Regular-webfont.eot');
	src: local('?'), url('Tangerine_Regular-webfont.woff') format('woff'), url('Tangerine_Regular-webfont.ttf') format('truetype'), url('Tangerine_Regular-webfont.svg#webfontGpn5Zlw8') format('svg');
	font-weight: normal;
	font-style: normal;
}


body {
margin:0;
padding:0;
left:0;
top:0;
background:#ffe5c0 url(img/bg.jpg) repeat-x;
}

#outer-wrapper {
position:relative;
width:800px;
height:800px;
margin:auto;
background:url(img/yin-yang.gif) no-repeat;
}

#abstand {
width:600px;
height:170px;
margin:auto;
}

#bonsai {
position:absolute;
z-index:2;
width:390px;
height:170px;
background:url(img/bonsai.gif);
left: -50px;
top: 21px;
}

#title {
position:absolute;
z-index:3;
width:390px;
height:170px;
background:url(img/title.gif);
left: 275px;
top:3px;
}

#pendel {
position:absolute;
z-index:1;
width:80px;
height:600px;
background:url(img/pendel.gif) no-repeat;
left: 130px;
top:360px;
}


#inner-wrapper {
width:600px;
height:auto;
margin:auto;
background:url(img/white.png)!important;
background:url(img/white.gif);
_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
border:3px double;
border-color:#333333;
}

#grafik {
float:right;
background:url(img/zen-garden.jpg);
width:199px;
height:300px;
margin:10px;
border:#fff double 3px;
}

a.text {
color:#333333;
text-decoration:none;
font-style:italic;
}

a.text:hover {
font-weight:bold;
}

p {
margin:15px 15px 15px 140px;
color:#333333;
}

p:first-line {
font-variant: small-caps;
}

p:first-letter {
color:#ff0000;
font-size:150%;
}

/*-------menu-----------*/

ul, li { /* use of list for the menu */
list-style-type: none;  /* cleaning up the list */
margin:0;
padding:0;
}
ul {
position: absolute; /* positionning for IE5 et IE5.5 */
z-index:1;
left: -70px;
top: 140px;
background: transparent url(img/menu.gif) top left no-repeat; /* general menu background */
height: 300px;
width: 300px;
text-align: center;
}
li {
display: inline; /* correction for IE5 et IE5.5 */
}
li a { /* buttons dimensions and definition */
display: block;  /* <a> block to give it its dimensions */
height: 40px;
width: 300px;
line-height: 40px;  /* line height to avoid paddings */
color:#feca80;
font-size: 18px;
font-family: georgia, serif;
text-decoration: none;
}

li.small a {
height: 30px;
width: 300px;
}

li a:hover {
color: #ff0000;
background: transparent url(img/menu.gif) top left no-repeat;
}

a#menu0:hover {
background-position:  0px -300px;
}
a#menu1:hover {
background-position:  0px -330px;
}
a#menu2:hover {
background-position:  0px -370px;
}
a#menu3:hover {
background-position:  0px -410px;
}
a#menu4:hover {
background-position: 0px -450px;
}
a#menu5:hover {
background-position: 0px -490px;
}
a#menu6:hover {
background-position: 0px -530px;
}
a#menu7:hover {
background-position: 0px -570px;
}

/*-------end menu-----------*/