* {padding:0; margin:0; border:0;}

html {height:100%}

body {
font-family:Arial, sans;
font-size:24px;
font-weight:bold;
color:#000;
background:#000;
text-align:left;
}

#frame {width:880px; height:732px; margin:0 auto; margin-top:30px; background:#000; overflow:hidden;}

#frame ul {position:relative; width:100%; height:100%; list-style:none;}
#frame ul li {position:absolute; width:140px; height:140px; overflow:hidden; z-index:1;}
#frame ul li.w-two {width:288px; z-index:50;}
#frame ul li.w-three {width:436px;}
#frame ul li.h-two {height:288px; z-index:50}
#frame ul li.h-three {height:436px; z-index:50}

#frame .x-one {left:0px;}
#frame .x-two {left:148px;}
#frame .x-three {left:296px;}
#frame .x-four {left:444px;}
#frame .x-five {left:592px;}
#frame .x-six {left:740px;}

#frame .y-one {top:0px;}
#frame .y-two {top:148px;}
#frame .y-three {top:296px;}
#frame .y-four {top:444px;}
#frame .y-five {top:592px;}

#frame ul li a {position:absolute; display:block; width:100%; height:100%; color:#000; text-decoration:none; text-align:center; line-height:30px; overflow:hidden;}
#frame ul li a:hover {cursor:default;}
#frame ul li a.verweis:hover {cursor:pointer; text-decoration:underline;}

#frame ul img {position:absolute; left:0px; top:0px;}
#frame ul img.sprite-one {left:-140px;}
#frame ul img.sprite-two {left:-280px;}
#frame ul img.sprite-three {left:-420px;}
#frame ul img.sprite-four {left:-560px;}

#frame ul .lift-one:hover img {top:-140px;}
#frame ul .shift-one:hover img {left:-140px}

#frame ul li.grow-right, #frame ul li.grow-left {height:140px;}

#frame ul li.from-one {width:140px;} 
#frame ul li.from-one:hover {width:288px;}

#frame ul li.skew-b {overflow:hidden; width:444px; height:140px; left:68px; border:8px solid #000; border-left-width:0px; margin-top:-8px; transform: skewX(-45deg);}
#frame ul li.skew-b img {position:relative; transform: skewX(45deg); left:80px;}

#frame ul li.skew-b:hover {transform: skewX(0deg); width:584px; left:148px; z-index:200;}
#frame ul li.skew-b:hover img {transform: skewX(0deg); left:0px}

#frame ul li.skew-l {overflow:hidden; width:288px; height:140px; left:514px; border:8px solid #000; margin-top:-8px; transform: skewX(-45deg);}
#frame ul li.skew-l img {transform: skewX(45deg); left:-78px;}
#frame ul li.skew-l:hover {transform: skewX(0deg); left:436px; z-index:205;}
#frame ul li.skew-l:hover img {transform: skewX(0deg); left:0px;}

#frame ul li.skew-t {overflow:hidden; margin-left:-8px; z-index:10; top:224px; height:290px; transform: skewY(45deg); border:8px solid #000; border-width:10px 8px 0 8px; margin-left:-8px;  margin-top:-10px; z-index:1;}
#frame ul li.skew-t img {top:-76px; transform: skewY(-45deg);}
#frame ul li.skew-t:hover {transform: skewY(0deg); height:288px; top:148px; z-index:210; border-top-width:8px; margin-top:-8px;}
#frame ul li.skew-t:hover img {transform: skewY(0deg); top:0px;}

#frame .round {border-radius:70px;}
#frame .round:hover {border-radius:0;}

#frame .tr-top img {transition:top 1s ease-in-out;}

#frame ul li#dus {color:#BB4422; background:#888; line-height:140px; font-size:500%;}
#frame ul li#dus b {position:relative; top:-10px; color:#888; font-size:110%; font-family: Georgia, serif;}
#frame ul li#dus a {display:none; width:100px; height:0px; font-size:18px; color:#440000; border:20px solid #DD2200; border-left-color:#bb0000; border-right-color:#bb0000; overflow:visible; margin-top:-4px; line-height:1px;}
#frame ul li#dus:hover, #frame ul li#dus:focus {color:#000; background:#FF4500; height:180px; border:8px solid #000; border-width:0 0 8px 8px; margin-left:-8px; z-index:400}
#frame ul li#dus:hover a, #frame ul li#dus:focus a {display:block;}
#frame ul li#dus a:hover {border-left-color:#990000; border-right-color:#990000; color:#000;}
#frame ul li#dus:hover b, #frame ul li#dus:focus b {color:#000;}

#frame ul li#mail {background:#ff9966; z-index:20;}

#frame ul #caleo a {position:absolute; display:none; font-size:18px; font-weight:normal; margin:0; overflow:visible; width:248px; height:0; color:#BBB; border:20px solid #222; border-left-color:#444; border-right-color:#333; margin-top:-6px; line-height:1px;}
#frame ul #caleo:hover {height:180px; z-index:400; outline:8px solid yellow;}
#frame ul #caleo:hover a {display:block;}
#frame ul #caleo a:hover {border-left-color:#555; border-right-color:#555;}
#frame ul #caleo:hover img {position:relative; left:-280px;}

#frame ul li#tpilb {text-align:center;}
#frame ul li#tpilb:hover {outline:8px solid #6688AA; z-index:250;}
#frame ul li#tpilb a {display:none; position:relative; top:245px; color:#6688AA;}
#frame ul li#tpilb:hover a {display:inline;}

#frame ul li#standards {background:url(images/sprite_1x1.png) no-repeat right; text-align:center; border:8px solid #000; margin:-8px 0 0 -8px; line-height:70px;}

#frame ul li#standards div {width:100%; height:66px; border-bottom:8px solid #000; font-size:120%; font-weight:normal;}

#frame ul li#standards .sub-two {display:none; overflow:visible;}
#frame ul li#standards:hover div, #frame ul li#standards:hover .sub-two {display:block;}
#frame ul li#standards:hover {z-index:400;}

#frame ul li#standards .sub-two {width:288px; height:66px; font-size:20px;}
#frame ul li#standards .sub-two li {position:relative; display:inline; padding-right:20px;}
#frame ul li#standards .sub-two li a {position:relative; display:inline-block; width:auto; height:0; padding-left:5px; border:18px solid transparent; border-left-color:#005400; border-left-width:12px; border-right-width:0; line-height:1px; color:#005400; overflow:visible;}

#frame ul li#standards .sub-two li a:hover {border-left-color:#000; color:#000;}

#frame ul li#goe {font-size:16px;}
#frame ul li#goe a {display:none; width:auto; height:0; position:relative; float:left; padding: 0 3px; overflow:visible; color:#442200; line-height:1px; margin-top:4px; border:10px solid #FF9900; border-left-color:#CC7700;}
#frame ul li#goe:hover a {display:inline-block;}
#frame ul li#goe a:hover {color:#000; border-left-color:#000;}

#frame ul li #copy {display:none; color:#000;}
#frame ul li:hover #copy {display:inline; position:absolute; bottom:0px; left:0px;}

#frame ul #who span {display:block; position:absolute; top:0px; width:100%; text-align:center; line-height:140px; font-size:400%; color:#295F48; background:#5DC4FF; background:#999999}
#frame ul #who:hover span {display:none;}
#frame ul #who:hover {background:#204C39;}
#frame ul #who b {
	display:inline-block;
	width:50%;
	height:50%;
	float:left;
	color:#738276;
	font-size:180%;
	font-weight:bold;
	line-height:70px;
	text-align:center;
	
}

 #frame ul #who b.who-special {
	 background:#738276;
	 color:#204C39;
	 font-size:380%;
 }

#frame ul li#mastermind {position:relative; height:140px; overflow:hidden; z-index:500; background:#000; border:8px solid #000; border-width:0 8px; margin-left:-8px; transition: height 1s;}
#mastermind dt {float:left; clear:both; width:50px; margin-bottom:20px; border:2px solid #AAA;}
#mastermind dt b {display:inline-block; float:left; height:25px; width:25px; background:#444;}

#mastermind dt#mm-play {display:block; height:100px; width:288px; position:absolute; left:0; top:30px; border:0; z-index:800; text-align:center;}
#mastermind dt#mm-play img {position:relative; border:5px solid #666; border-radius:5px;}
#mastermind dt#mm-play img:hover {border-color:#aaa;}

#mastermind dd {float:right; border:1px solid #666; height:52px; margin-right:10px;}
#mastermind dd b {position:relative; display:inline-block; height:52px; width:50px; background-color:#000; font-weight:normal; font-size:18px; line-height:39px; color:white;}
#mastermind dd#riddle {margin-bottom:40px; margin-right:0; border:0;}
#mastermind dd#riddle b {height:60px; width:60px; border:1px solid #AAA; margin-right:10px; float:left; text-align:center; line-height:60px; font-size:200%}

#mastermind dd#buttons {width:288px; height:28px; border:0; text-align:center;}

#mastermind dd#buttons b {display:inline-block; width:22px; height:22px; overflow:hidden; border:3px solid #666; border-radius:22px; background:url(images/mm-buttons.png) no-repeat left top;}
#mastermind dd#buttons b.mm-off {}
#mastermind dd#buttons b.mm-abort {background-position: left -22px;}
#mastermind dd#buttons b.mm-clear {background-position: left -44px;}
#mastermind dd#buttons b.mm-submit {background-position: left -66px;}

#mastermind dd#buttons b.mm-sprt-zero:hover {border-color:#FF0000;}
#mastermind dd#buttons b:hover {border-color:#AAA;}
#mastermind dd#buttons b img {width:22px; height:88px; border:0;}

#mastermind ul.mm-sub {display:block; position:absolute; top:-10px; left:-20px; height:40px; width:60px; border:5px solid #666; outline:5px solid #222; z-index:100;}

#mastermind ul.mm-sub li {
	display:block;
	float:left;
	position:relative;
	width:20px;
	height:20px;
	border:1px solid #AAA;
	border:0;
	background:#333;
	z-index:150;
}