body {
  position: absolute;
  width: 100%; min-height: 100%;
  color: #000;
  background: #EEE url("../img/plussy_tile_03.png") repeat fixed left top;
  margin: 0; padding: 0 0 6em 0;
}

#header { width: 100%; padding: 0; margin: 0 auto;}

#username {
  font-weight: 400;
  display: block;
  text-align: right;
  margin: 0 0 .5em 0; padding: .5em .5ex 0 .5ex;
}
#username * {
  display: inline;
  color: #39c;
}
#username > * { margin: 1ex;}

#message {
  position: absolute;
  display: block;
  top: 2em; right: 50%;
  margin-left: auto; margin-right: auto;
  min-width: 300px;
  width: 30%;
  margin: 0 -150px; padding: 1ex 3ex 1ex 1ex;
  background-color: #FFC;
  box-shadow: 0 .5em 2em #000;
  z-index: 2;
}
#message * {display: inline; max-width: 100%;}
#message > a:last-of-type{
  position: absolute;
  top: 0; right: 0;
  width: 1.25em; height: 1.25em;
  padding: 0 0 0 2em;
  font-weight: bold;
  overflow: hidden;
}
#message > a:last-of-type::after {
  position: absolute;
  top: 0; right: 0;
  width: auto; height: auto;
  content: "x";
  color: #000;
  background-color: #AA0;
  padding: 0 .5ex 0 .5ex;
  z-index: -1;
}

#logo, #navibar, #searchform {
  display: inline-block;
  vertical-align: bottom;
  margin: 0; padding: 0;
}
#logo { width: 20%; margin-right: -1ex; text-align: center; vertical-align: top; }
#logo * { margin: 0 auto;}
#logo img { width: 90%; max-width: 150px;}

#navibar {width: 80%; text-align: right; margin-bottom: 1em; margin-right: -1ex;}
#navibar * { display: inline-block; margin: 0; padding: 0;}
#navibar span { display: inline;}
#navibar a {
  color: #39c;
  text-decoration: none;
  font-weight: 400;
  font-size: 1.125em;
  margin-right: 1em;
  line-height: 1.5em;
  padding: .5ex 1ex;
}
#navibar a:hover {
  color: #FFF;
  background-color: #17A;
  border-radius: .5ex;
}

#searchform { display: block; text-align: right; }
#searchform * { display: inline; padding: 0; margin: 0; max-width: 100%; }
#searchform label { display: none;}

#pagetrail {
  display: block;
  width: 100%;
  margin: .5em 0; padding: 0;
  background-color: #def;
  box-shadow: 0 .125em .25em #888;
}
#pagetrail * { display: inline; }
#pagetrail a {
  display: inline-block;
  color: #39c;
  margin: .25em 1ex; padding: 0;
}

#page {
  background-color: #FFF;
  position: relative;
  box-shadow: 0 .5em 1em #888;
  width: 100%;
  margin: 2.5em auto;
  padding: 3em .5ex 1em .5ex;
  z-index: 1;
}

#content .pagetitle,
#locationline {
  display: inline-block;
  position: absolute;
  top: -2em;
  right: .25ex;
  left: .25ex;
  font-size: 1em;
  margin: 0; padding: .5em;
  background-color: #39c;
  z-index: -1;
}
#content .pagetitle *,
#locationline * {
  font-weight: normal;
  color: #FFF;
  margin: 0; padding: 0;
}
.editbar {
  display: block;
  position: absolute;
  left: 0; right: 0;
  background-color: #def;
  text-align: right;
  margin: 0; padding: .5ex 1em .125ex 8em;
  box-shadow: 0 .125em .25em #888 inset;
}
.editbar:first-of-type {
  top: 0;
  box-shadow: 0 .125em .25em #888;
}
.editbar * { display: inline; }
.editbar > * { display: inline-block; margin: 0 .5ex;}
.editbar option {display: block;}
.editbar script, .editbar .disabled, .editbar label {display: none;}
.editbar option[value=show] {display: block;}
#toggle_comments + label,
.editbar a {
  text-decoration: none;
  color: #000;
  background-color: #FFF;
  padding: .125ex 1ex 0ex 1ex;
  border: 1px solid black;
}

#toggle_comments { display: none; }
#toggle_comments + label {
  position: absolute;
  left: 1em; top: .5ex;
  margin: 0;
}
#toggle_comments + label:before {
  display: inline-block;
  color: #000; background-color: #FFF;
  height: 1.5ex; width: 1.375ex;
  margin: 0 .5em .25em -.5ex;
  padding-left: .125ex;
  border: 1px solid #000;
  overflow: hidden;
  line-height: 1.5ex;
  vertical-align: bottom;
  content: ' ';
}
#toggle_comments:checked + label:before { content: "\2713"; }

#toggle_comments:checked + label + #content div.comment[style="display:none"] { display: block !important; }
#toggle_comments:checked + label + #content span.comment[style="display:none"] { display: inline !important; }
#toggle_comments:checked + label + #content div.comment[style="display:''"] { display: none !important; }
#toggle_comments:checked + label + #content span.comment[style="display:''"] { display: none !important; }

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #FFF;
  margin: 0; padding: 2em 0 .5em 0;
}
#footer ul { display: table; width: 100%; margin: 0; padding: 0;}
#footer ul li { display: table-cell; text-align: center;}

#editor * { max-width: 100%;}
#editor fieldset {
  width: 100%;
  display: table-cell;  /* firefox fuckup  */
  min-width: inherit;   /* chromium fuckup */
}
#editor textarea { display: block; width: 100%; font-family: Monospace;}

#editor #textcha { margin: .5em 0; border-left: 6px double #DEF;}
#editor #textcha #textcha-question { margin: 0 1em; font-weight: bold;}
#editor #textcha:after {
    content: "Get rid of this text captcha! Log in with your FSFE account and look at the page Group/Registered";
    display: inline-block;
    margin-left: 1em;
    color: #D33;
}

@media(min-width: 620px) {
  #page { width: 90%; padding: 3em 1.5em 1em 1.5em; min-width: 620px; }
  #header { width: 90%; min-width: 620px; }
  #navibar {width: 80%;}
  #content .pagetitle,
  #locationline { right: 50%; left: .75em; }
}
@media(min-width: 900px) {
  #page { padding: 3em 3em 1em 3em;}
  #navibar {width: 60%;}
  #searchform { display: inline-block; width: 20%;}
  #searchform #searchinput { width: 100%; margin: 0 0 auto 0; padding: 0;}
  #searchform input[type=submit] { min-width: 30%; margin: 0; padding: 0 1ex;}
  #content .pagetitle,
  #locationline { left: 1.5em; }
}