body {
background: url(../img/bg.gif) #FFF08E;
color: #000;
margin:0; padding:0;
min-width: 640px;
font-size: 100%;
font-family: verdana, arial, sans-serif;
-webkit-text-size-adjust: none;
}
a {
color: #0B4D8C;
text-decoration: underline;
}
a:visited {
color: #000;
}
h1 {
font-family: 'Swanky and Moo Moo', arial, serif; 
font-size: 2.7em;
font-weight: normal;
line-height: 0.8em;
color: #696969;
padding: 0.6em 0 0.2em 1%;
margin: 0 10px 0 0;
border-bottom: 1px dashed #D3D3D3;
}
h2, h3, h4 {
font-weight: normal;
}
h3 {
padding-top: 0.8em;
}
h2, h3, h4, h5, h6 {
font-family: Georgia, "Times New Roman", Times, serif;
}
h2, h3, h4, h5, h6 {
color: #484848;
}
img {
border: solid 1px #aaa;
padding: 1px;
max-width: 95%;
}
.fleft {
float: left;
margin: 0 1em 0.2em 0;
}
.fright {
float: right;
margin: 0 0 0.2em 1em;
padding: 1px;
}
#container {
font-size: 0.8em;
margin: auto;
border: 1px solid #999;
background: #fff;
width:900px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}

@media screen and (max-width: 799px) {
#container {
width:640px;
}
#menu {
font-size:0.8em;
}
h1 {
font-size:2.2em;
}
}
@media screen and (min-width: 800px) and (max-width: 899px) {
#container {
width:740px;
}
#menu {
font-size:0.9em;
}
}
@media screen and (min-width: 900px) and (max-width: 1023px) {
#container {
width:840px;
}
#menu {
font-size:1em;
}
}
@media screen and (min-width: 1024px) {
#container {
width:950px;
}
}

#footer {
clear: both;
padding: 0 20px;
}
#logo {
background: url(../img/vibe-oben.jpg) 0 0 no-repeat #000;z
height: 54px;
padding: 0 20px;
text-align: right;
line-height: 52px;
font-size: 50px;
overflow: hidden;
letter-spacing: -3px;
margin: 0;
}
#logo a {
color: #FFF;
background:#000;
text-decoration: none;
text-shadow: 2px 1px 3px #D3D3D3;
opacity:0.8;
-moz-transition: text-shadow 0.5s, opacity 1s ease;
-webkit-transition: text-shadow 0.5s, opacity 1s ease;
-o-transition: text-shadow 0.5s;
}
#logo a span {
color: #000;
background: #FFF;
padding-right: 0.1em;
font-weight: bold;
text-shadow: 2px 1px 5px #000;
-moz-transition: text-shadow 0.5s;
-webkit-transition: text-shadow 0.5s;
-o-transition: text-shadow 0.5s;
}
#logo:hover a span{
text-shadow: 2px 1px 7px #000;
}
#logo:hover a{
text-shadow: 2px 1px 7px #D3D3D3;
opacity:0.9;
}
#menu {
background: url(data:image/gif;base64,R0lGODlhAQAJAOMIAB8fHyQkJCoqKjAwMDU1NTs7O0FBQUZGRkxMTExMTExMTExMTExMTExMTExMTExMTCH5BAEKAA8ALAAAAAABAAkAAAQHEAQxSDEHRQA7) repeat-x #4C4C4C;
padding: 5px 2%;
margin: 0;
text-align: center;
color: #FFC453;
}
#menu li {
font-size: 15px;
display: inline;
list-style-type: none;
border-left: 1px solid #888;
padding: 0 6px 0 11px;
font-weight: bold;
text-shadow: 0 0 5px #FFC453;
}
#menu li.noborder {
border:hidden;
}
#menu li a {
color: #FFF;
text-decoration: none;
text-shadow:none;
-webkit-transition:text-shadow 0.5s;
-moz-transition:text-shadow 0.5s;
-o-transition:text-shadow 0.5s;
}
#menu li a:hover {
text-shadow:0 0 10px #FFF;
}
#back-btn {
background: #4C4C4C;
padding: 4px 6px 3px 6px;
font-size: 1.2em;
font-weight: bold;
width:55px;
}
#back-btn a {
color: #fff;
text-decoration: none;
text-shadow:none;
-webkit-transition:text-shadow 0.5s;
-moz-transition:text-shadow 0.5s;
-o-transition:text-shadow 0.5s;
}
#back-btn a:hover {
text-shadow:0 0 5px #FFF;
}
#subnav {
z-index:1;
width: 28%;
min-width: 10em;
float: right;
padding: 0 1% 1em 1%;
margin: 0.5em 1% 0 1%;
border-left: 1px dotted #aaa;
font-size: 0.9em;
}
#subnav dt {
font-size: 1.2em;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0.4em;
margin-top: 1em;
border-top: 1px dotted #aaa;
}
#subnav dd {
padding: 0;
margin: 0.2em 0;
}
#main {
background: url(data:image/gif;base64,R0lGODlhAQAJAOMAAExMTGFiYXh4eI6PjqWlpbu8vNLS0ejo6P///0xMTExMTExMTExMTExMTExMTExMTCH5BAEKAA8ALAAAAAABAAkAAAQHEAQxSDEHRQA7) repeat-x #fff;
padding: 0 31% 0 20px;
line-height: 1.5em;
}
.shadow {
-moz-box-shadow: 3px 3px 7px #000;
-webkit-box-shadow: 3px 3px 7px #000;
box-shadow: 3px 3px 7px #000;
-moz-transition:-moz-box-shadow 0.5s;
-webkit-transition:-webkit-box-shadow 0.5s;
-o-transition:box-shadow 0.5s;
}
.shadow:hover {
-moz-box-shadow: 3px 3px 9px blue;
-webkit-box-shadow: 3px 3px 9px blue;
box-shadow: 3px 3px 9px blue;
}
.shadow-without-hover {
-moz-box-shadow: 3px 3px 7px #000;
-webkit-box-shadow: 3px 3px 7px #000;
box-shadow: 3px 3px 7px #000;
}
.shadow2 {
-moz-box-shadow: 0 0 7px #000;
-webkit-box-shadow: 0 0 7px #000;
box-shadow: 0 0 7px #000;
-moz-transition:-moz-box-shadow 0.5s;
-webkit-transition:-webkit-box-shadow 0.5s;
-o-transition:box-shadow 0.5s;
}
.shadow2:hover {
-moz-box-shadow: 0 0 9px blue;
-webkit-box-shadow: 0 0 9px blue;
box-shadow: 0 0 9px blue;
}
.shadow2-without-hover {
-moz-box-shadow: 0 0 7px #000;
-webkit-box-shadow: 0 0 7px #000;
box-shadow: 0 0 7px #000;
}
.noborder {
border: hidden;
padding: 0px;
}
.mitte{
text-align: center;
}
.rechts{
display: inline;
text-align: right;
}
.links{
text-align: left;
}
.shadowcontainer {
-moz-box-shadow:0 0 15px #333;
-webkit-box-shadow:0 0 15px #333;
box-shadow:0 0 15px #333;
}
.noborder {
border: none !important;
}
#gradient1, #gradient2 {
z-index:-2;
display:block;
position: absolute;
width: 100%;
left:0;
}
#gradient1 {
background:url(../img/gradient-top.png) repeat-x transparent;
top:0;
height: 500px;
position:fixed;
z-index:-1;
}
#gradient2 {
height: 30px;
}