html, body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; 
font-size: 100.01%;
line-height: normal; 
}

body{
	margin: 0; 
	padding: 0;
	min-width: 960px; 
	min-height: 560px;
	background-image: url(../images/BG.jpg);
	font-family: 'chaletlondon';
	color: #777;
	text-shadow: -1px -1px 2px #FFF, 1px 1px 2px #888;
	text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'chaletlondon';
    src: url('../font/chalet_london_nineteen_seventy-webfont.eot');
    src: url('../font/chalet_london_nineteen_seventy-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/chalet_london_nineteen_seventy-webfont.woff') format('woff'),
url('../font/chalet_london_nineteen_seventy-webfont.ttf') format('truetype'),
url('../font/chalet_london_nineteen_seventy-webfont.svg#chaletlondonnineteenseventy') format('svg');
    font-weight: normal;
	font-style: normal;
}


content{
	background: url(../images/Logo.png) left top no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -476px;
	margin-top: -295px;
	width: 952px; 
	height: 590px; 
}

#tablet {
	position: relative;
	opacity: 0;
	margin: 95px auto;
	width: 790px;
	height: 400px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	box-shadow: 8px 8px 30px #212;
	-moz-box-shadow: 8px 8px 30px #212;
	-webkit-box-shadow: 8px 8px 30px #212;
	z-index: 2;
}


.ref, .mus, .sto, .pro, .ter, .fot, .aud, .vid, .for, .kon, .fac, .imp {
	display: none;
	min-width: 100px;
}

.visible{
	display: inline-block;
}

a:active, a:focus, a:visited, a:link {
	outline: none; background: transparent;
}

#box a {
background-image: url(../images/fb.png);
position: relative;
display: block;
width: 91px; height: 30px;
top: 0; left: 0; 
opacity: 0.5; filter: alpha(opacity=50);
z-index: 3;
}

#box a:hover {
	border: none;
	outline: none;
	opacity: 1; filter: alpha(opacity=100);
}

#box span img {
border: none;	
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

#box a span {
	display:none;	
}

#box a:hover span {
display:block;
padding: 2px 0 0 2px;
width: 122px;
height: auto;
}


h1{
	font-weight: normal;
	letter-spacing: 1px;
}

span {
	letter-spacing: 1px;
}

span a {
	color: #777;
	text-decoration: none;
}

span a:hover{
	color: #909;
	outline: none;
}




.container { height: 400px; width: 790px; overflow: hidden; position: absolute; bottom: 0; left: 0;}



.container .links { position: relative; float: left; width: 214px; height: 310px; padding-left: 50px; margin: 50px auto; text-align: left;}
.container .mitte { position: relative; float: left; width: 264px; height: 310px; margin: 50px auto;}
.container .mitte .oben { width: 264px; height: 30px; text-align: center;}
.container .mitte .bg { margin-top: -8px; width: 264px; height: 264px; 
background: transparent;}
.container .mitte .unten { margin-top: -8px; width: 264px; height: 30px; text-align: center;}
.container .rechts { position: relative; float: left; width: 214px; height: 310px; padding-right: 50px; margin: 50px auto; text-align: right;}

.container div li { padding-bottom: 40px; list-style-type: none; font-size:18px; letter-spacing: 1px; line-height: 30px;}
.container div li a { transition: ease-in 200ms; -o-transition: ease-in 200ms; -moz-transition: ease-in 200ms; -webkit-transition: ease-in 200ms; text-decoration: none; color: #FFF; text-shadow: 1px 1px 1px #000;}
.container div li a:hover { transition: ease-out 200ms; -o-transition: ease-out 200ms; -moz-transition: ease-in-out 200ms; -webkit-transition: ease-in-out 200ms; text-decoration: none; color: #909; text-shadow: 0 -1px 6px #FFF, 0 1px 6px #FFF; border: none;padding: 10px;}


.card { 
	position: relative; visibility: hidden;
	bottom: 0;
	opacity: 0; filter: alpha(opacity=0);
	width: 792px; height: 402px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	background-color: rgba(0,0,0,0.6);
	z-index: 1;
}


.pu_default_bar{
height: 30px; line-height: 30px; background-color: rgba(178,81,188,0.5); color: #FFF; position: fixed; 
-webkit-animation-delay: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s;
-o-animation-duration: 1s; animation-duration: 1s;
background: -moz-linear-gradient(top, rgba(153,0,153,.7) 0%, #909 50%, rgba(153,0,153,.7) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,0,153,.7)), color-stop(50%,#909), color-stop(100%,rgba(153,0,153,.7))); 
background: -webkit-linear-gradient(top, rgba(153,0,153,.7) 0%,#909 50%,rgba(153,0,153,.7) 100%); 
background: -o-linear-gradient(top, rgba(153,0,153,.7) 0%,#909 50%,rgba(153,0,153,.7) 100%); 
background: -ms-linear-gradient(top, rgba(153,0,153,.7) 0%,#909 510%,rgba(153,0,153,.7) 100%);
background: linear-gradient(to bottom, rgba(153,0,153,.7) 0%,#909 50%,rgba(153,0,153,.7) 100%);
}
.pu_default_bar .pu_notification_button a{
color: #909; background-color: #rgba(153,0,153,0.5);}

.pu_notification_bar{
	display:block;
	width:100%;
	vertical-align:middle;
	text-align:center;
	z-index:99999;
	font-family: Tahoma, Geneva, sans-serif;
	font-weight:normal;
	font-size:14px;
	top:0;
	-webkit-animation-duration: 2s;
	   -moz-animation-duration: 2s;
	    -ms-animation-duration: 2s;
	     -o-animation-duration: 2s;
	        animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	    -ms-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
	        box-shadow:0px 0px 6px #111;
}
.pu_notification_bar a {display:inline; margin:0 10px;}
.pu_inner_bar { vertical-align: middle; }
.pu_specific_text{text-shadow: 0 0 5px #909;}
.pu_close{ float:right; padding-right: 20px; cursor:pointer; text-shadow: 0 0 5px #909;}
.pu_close:hover{color: #909; text-shadow: 0 0 4px #FFF;}

/**************************************************
 * 	Notification button
 *************************************************/
.pu_notification_button{ display:inline; }
.pu_notification_button a{ padding: 5px 14px; background: #FFF; text-shadow: 0 -1px 1px #777, 0 1px 1px #FFF;
border-radius: 2px; -ms-border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px;  
border-left: 1px solid #FFF; border-top: 1px solid #FFF; border-right: 1px solid #777; 
border-bottom: 1px solid #777;
text-decoration: none;

background: -moz-linear-gradient(top, #FFF 0%, #777 50%, #FFF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(50%,#777), color-stop(100%,#FFF)); 
background: -webkit-linear-gradient(top, #FFF 0%,#777 50%,#FFF 100%); 
background: -o-linear-gradient(top, #FFF 0%,#777 50%,#FFF 100%); 
background: -ms-linear-gradient(top, #FFF 0%,#777 510%,#FFF 100%);
background: linear-gradient(to bottom, #FFF 0%,#777 50%,#FFF 100%); 
}

.pu_notification_button a:hover{
background-color: #CCC;
border-left: 1px solid #777; border-top: 1px solid #777; border-right: 1px solid #FFF; 
border-bottom: 1px solid #FFF;
box-shadow: inset 0 0 5px #333;
-webkit-box-shadow: inset 0 0 5px #333;
-moz-box-shadow: inset 0 0 52px #333;
 
	
}


@keyframes M {0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;}}

@-webkit-keyframes M {0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;}}

@-moz-keyframes M {0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;}}

@-o-keyframes M {0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;}}


@keyframes W {0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;}}

@-webkit-keyframes W {0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;}}

@-moz-keyframes W {0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;}}

@-o-keyframes W {0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;}}

#M {
	position: relative;
	display: block;
	background-image:url(../images/Menue1.png);
	width: 105px;
	height: 41px;
	margin: -60px auto;
	 -webkit-animation: M 3s infinite;
	 -moz-animation:  M 3s infinite;
	 -o-animation:  M 3s infinite;
	 animation:  M 3s infinite;
}

@keyframes K {0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;}}

@-webkit-keyframes K {0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;}}

@-moz-keyframes K {0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;}}

@-o-keyframes K {0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;}}



#K {
	position: relative;
	display: block;
	background-image:url(../images/Kugel_Lila.png);
	width: 264px;
	height: 264px;
	margin: auto auto;
	 -webkit-animation: M 3s infinite;
	 -moz-animation:  M 3s infinite;
	 -o-animation:  M 3s infinite;
	 animation:  M 3s infinite;
}