html{
	background: url(img/background.jpg) no-repeat center center fixed; width: 100%; height: 100%;
  	webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body { font-family: arial, sans-serif; color: rgba(0,0,0,0.8); margin:0; padding: 0;   }

a { color: rgb(255,255,255); text-decoration: none; outline:none; }
a:hover { color: rgba(255,255,255,0.8);}
#inline_content a { color: rgba(0,0,0,0.8); }
#inline_content a:hover{ color: rgba(0,0,0,0.5);}

p { margin: 0; font-size: 1em; line-height: normal;}
h1 { margin: 0; font-size: 1.1em; line-height: normal;}

#menu { margin-left: calc(10% + 20px); margin-left: -webkit-calc(10% + 20px); margin-top: 15px;}
#menu h1 { text-shadow: 0px 2px 3px rgba(0,0,0,0.8);}

#player { position: absolute; bottom: 20px; right: 20px;}
audio {
    background: none repeat scroll 0 0 white;
    max-width: 250px;
    max-height: 30px;
   opacity: 0.7;
 /*    width: 160px;*/
}

#biene { background: url(img/biene.gif) no-repeat; position: fixed; width: 150px; height: 172px; top:60%; left: 100%; z-index: 10;
	
	/* Chrome, Safari, Opera */
	-webkit-animation-name: honeybee;
    -webkit-animation-duration: 30s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    
    /* Standard syntax */
    animation-name: honeybee;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-delay: 10s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
/* Standard syntax */
@keyframes honeybee {
    0%   {left: 100%; top:60%;}
    12%  {left: 75%; top:48%;}
    25%  {left: 50%; top:50%;}
    37%  {left: 25%; top:48%;}
    50%  {left: -150px; top:40%;}
    100% {left: -150px; top:40%;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes honeybee {
    0%   {left: 100%; top:60%;}
    12%  {left: 75%; top:48%;}
    25%  {left: 50%; top:50%;}
    37%  {left: 25%; top:48%;}
    50%  {left: -150px; top:40%;}
    100% {left: -150px; top:40%;}
}

/*colorbox*/
#colorbox { outline:none; }
#cboxClose { position: absolute; border: 0; background: url('img/close.png') 0 0 no-repeat; width: 16px; height: 15px; top: 20px; right: calc(10% + 15px); right: -webkit-calc(10% + 15px); color: transparent; cursor: pointer;} 
#cboxClose:hover {background: url('img/close.png') -16px 0 no-repeat;}
#inline_content { 
    background: rgba(255,255,255,0.8); 
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.2); 
    padding: 20px; 
    margin: 5px 10%; }

@media screen and (min-width: 1000px) { 
    #cboxClose { top: 20px; right: calc(30% + 15px); right: -webkit-calc(30% + 15px);} 
    #inline_content {margin: 5px 30%;}
    #menu { margin-left: calc(30% + 20px); margin-left: -webkit-calc(30% + 20px); }
}