/* #####  GRUNDGERÜST ##### */

html * {
margin:0px;
padding:0px;
}
body {
background:white;
}
#top {
background:#E0FF00;
background-image:url('greenbg.png');
background-repeat:repeat-x;
}
#puzzlebox {
position:relative;
width:100%;
height:470px;
}
#bar {
height:14px;
overflow:hidden;
background:#eee;
text-align:center;
font-family:Georgia,Helvetica,Arial,sans-serif;
color:#7F7F7F;
font-size:14pt;
font-weight:bold;
text-transform:uppercase;
letter-spacing:0.5em;
}
#middle {
position:relative;
background:url('bg_white.png') repeat-x;
height:3000px;
min-height:400px;
padding:15px 0px 0px 30px;
}

#footer {
height:14px;
overflow:hidden;
background:black;
text-align:center;
font-family:Helvetica,Arial,sans-serif;
color:#4F4F4F;
font-size:7pt;
font-weight:bold;
text-transform:uppercase;
letter-spacing:0.2em;
padding:3px 0px 0px 0px;
}
#footer a {
color:#4F4F4F;
text-decoration:none;
}
#stern {
position:absolute;
top:20px;
right:30px;
}
/* #####  PUZZLE ##### */

#puzzle {
position:absolute;
z-index:8;
top:50px;
left:50%;
margin-left:-134px;
width:240px;
height:240px;
padding:20px;
background:white;
border-color:#bcd800;
border-style:solid;
border-width:0px 2px 2px 0px;
}
#puzzle div {
height:60px;
width:60px;
cursor:pointer;
float:left;
position:relative;
}
#puzzle div:hover {
background:#e0ff00;
}
#puzzle div:hover img {
clip:rect(5px, 55px, 55px, 5px);
position:absolute;
overflow:hidden;
}

#modebox {
position:absolute;
z-index:3;
top:65px;
left:50%;
margin-left:136px;
padding:10px;
font-size:9pt;
font-family:Helvetica,Arial,sans-serif;
}
#modebox a {
text-transform:uppercase;
letter-spacing:0.03em;
margin:2px 0px;
font-weight:bold;
display:inline-block;
background:url('labelbg.png');
background-position:top right;
color:white;
padding:1px 60px 1px 4px;
text-decoration:none;
outline:0;
}
#modebox a:hover {
padding:1px 60px 1px 20px;
}
#helpbox {
width:240px;
height:auto;
padding:16px 20px;
background:white;
border-color:#bcd800;
border-style:solid;
border-width:0px 2px 2px 0px;
font-size:9pt;
font-family:Helvetica,Arial,sans-serif;
color:black;
position:absolute;
left:50%;
margin-left:-134px;
top:344px;
z-index:12;
text-align:center;
}

#formbox {
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:url('grfx/matsupictu/trans.png');
z-index:35;
visibility:hidden;
}
#form {
display:block;
width:270px;
height:auto;
padding:14px;
background:url('shadowbg.png');
background-position:bottom right;
font-size:9pt;
font-family:Helvetica,Arial,sans-serif;
color:black;
position:absolute;
left:50%;
margin-left:-149px;
top:280px;
z-index:40;
}

/* #####  HALL OF FAME ##### */

#pbox {
position:absolute;
z-index:2;
top:auto;
margin:15px;
width:65%;
}
#hallhead {
position:absolute;
top:12px;
right:15px;
z-index:0;
color:#eee;
font-family:georgia,Times,serif;
font-size:56pt;
font-style:italic;
}
.previewbox {
float:left;
margin-right:20px;
margin-bottom:20px;
position:relative;
}
.preview {
width:100px;
height:100px;
border:10px solid #E0FF00;
cursor:url("grfx/zoom.png"), nw-resize;
}
.preview img {
width:25px;
cursor:inherit;
}
.preview a, .preview a img {
border:none;
margin:0;
padding:0;
text-decoration:none;
outline:0;
cursor:inherit;
}
.author {
background-image:url('greenarrow.gif');
background-repeat:no-repeat;
padding:7px 0px 0px 28px;
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
color:#777;
font-size:9.5pt;
width:70px;
height: 18px;
white-space:nowrap;
overflow:hidden;
float:left
}
.c_anzahl {
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
color:#777;
font-size:7pt;
width:5px;
position:absolute;
right:0px;
top:130px;
padding:0px 0px 0px 10px;
background:url('comment_icon_small.gif');
background-repeat:no-repeat;
background-position:0px 2px;
}

/* #####  COMMENTS ##### */

#commentbox {
width:240px;
height:400px;
font-family:Helvetica,Arial,sans-serif;
color:#333;
font-size:9pt;
line-height:133%;
position:absolute;
top:50%;
margin-top:-200px;
left:50%;
margin-left:180px;
z-index:120;
text-align:center;
padding:0px 40px 0px 0px;
overflow:auto;
}
.c_text {
background:white;
padding:12px 12px;
font-style:italic;
margin:0px 0px 0px 0px;
width:176px;
text-align:left;
}
.c_author {
width:176px;
overflow:hidden;
color:white;
font-weight:bold;
margin:0px 0px 10px 0px;
padding:9px 0px 3px 28px;
background:url('whitearrow.gif') no-repeat top left;
text-align:left;
}

#c_form {
width:200px;
}
#c_form_box1 {
width:180px;
padding:10px;
border-color:white;
border-style:solid;
border-width:1px 1px 0px 1px;
}
#c_form_box2 {
width:174px;
padding:3px 14px;
background:url('c_form_box2.gif') no-repeat;
text-align:right;
}
#c_text_field, #c_author_field {
background:transparent;
border:none!important;
color:#fff;
font-size:9pt;
margin:2px 0px;
font-family:Helvetica,Arial,sans-serif;
}
#c_text_field {
width:170px;
}
#c_author_field {
width:120px;
margin-left:0px;
margin-top:8px;
}
.c_form_button {
background:transparent;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #aaa;
border-top:1px solid #aaa;
color:black;
font-size:9pt;
width:26px;
margin:2px 0px 0px 2px;
padding:1px;
font-family:Helvetica,Arial,sans-serif;
}
.c_form_button:hover {
border:2px solid #E0FF00;
padding:0px;
color:white;
}
/* #####  INPUTS ##### */
.hidden {
visibility:hidden;
display:none;
}

.button {
padding:2px 3px;
margin:1px 0px 0px 3px;
background:white;
border-left:1px solid #eee;
border-top:1px solid #eee;
border-bottom:1px solid #999;
border-right:1px solid #999;
height:46px;
width:46px;
}
.button:focus, .button:hover {
border:2px solid #E0FF00;
padding:0px 1px;
}
.input {
width:150px;
padding:1px 2px;
margin:2px 3px;
background:white;
border-right:1px solid #eee;
border-bottom:1px solid #eee;
border-top:1px solid #999;
border-left:1px solid #999;
}
.input:focus, .input:hover {
border:2px solid #E0FF00;
padding:0px 1px;
}
#speichern {
background:black;
color:white;
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
font-size:9pt;
padding:1px 1px 1px 1px;
margin-top:4px;
background-position:bottom center;
}
#speichern[disabled] {
background:#ddd;
}

/* #####  SPECIAL BOXES ##### */

#noscriptbox {
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:url('grfx/matsupictu/trans.png');
z-index:22;
}
#noscriptcontent {
width:400px;
position:absolute;
top:300px;
left:50%;
margin-left:-200px;
font-family:Helvetica,Arial,sans-serif;
font-size:12pt;
font-weight:bold;
color:white;
text-align:center;
}
#IEbox {
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:url('grfx/matsupictu/trans.png');
z-index:30;
visibility:hidden;
}
#IEcontent {
width:400px;
position:absolute;
top:300px;
left:50%;
margin-left:-200px;
font-family:Helvetica,Arial,sans-serif;
font-size:12pt;
font-weight:bold;
color:white;
text-align:center;
visibility:hidden;
}
* html #IEcontent, * html #IEbox {
visibility:visible;
position:absolute!important;
background:black;
}
*:first-child+html #IEbox, *:first-child+html #IEcontent {
visibility:visible;
}
#help2box {
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:url('grfx/matsupictu/trans.png');
z-index:70;
visibility:hidden;
}
#help2boxinner {
background:white;
display:block;
width:350px;
height:auto;
padding:24px 24px 10px 24px;
font-size:9pt;
font-family:Helvetica,Arial,sans-serif;
color:black;
position:absolute;
left:50%;
margin-left:-175px;
top:280px;
text-align:left;
line-height:1.4em;
cursor:pointer;
}
#help2boxinner p {
margin:0em 0em 0em 0em;
padding:0em 0em 0.8em 0em;
border-bottom:1px solid #ddd;
}
#help2box img {
float:left;
margin:0px 5px 0px 0px;
}
#help2box h4 {
text-transform:uppercase;
letter-spacing:3px;
text-align:center;
margin:0.8em 0px 0.3em 0px;
}