*                               { margin: 0; padding: 0; }
h2                              { color: #fa9f00; font: 30px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
#page-wrap                      {  margin: 10px auto; position: relative; }

#chat-wrap                      { border: 1px solid #eee; margin: 0 0 15px 0; }
#chat-area                      { min-height: 1000px; overflow: auto; border: 1px solid #666; padding: 20px; background: white; }
#chat-area span                 { color: white; background: #333; padding: 4px 8px; -moz-border-radius: 5px; -webkit-border-radius: 8px; margin: 0 5px 0 0; }
#chat-area p                    { padding: 8px 0; border-bottom: 1px solid #ccc;line-height:30px; }
#chat-area tr                     { border-bottom: 1px solid #ccc; }
#chat-area .textheader          { line-height:20px; color: #666666; font: 20px Helvetica, Sans-Serif; }
#chat-area .textheader a        { line-height:20px; color: #666666; font: 20px Helvetica, Sans-Serif; }

#name-area                      { position: absolute; top: 12px; right: 0; color: white; font: bold 12px "Lucida Grande", Sans-Serif; text-align: right; }   
#name-area span                 { color: #fa9f00;line-height:30px }

div.profildiv {border: #336 dotted; padding: 0.6em; margin: 1em 0em}
div.profiltabs {
  min-height: 1100px;              /* No height: can grow if :target doesn't work */
  position: relative;           /* Establish a containing block */
  line-height: 1;               /* Easier to calculate with */
  z-index: 0}                   /* So that we can put other things behind */
div.profiltabs > div {
  display: inline}              /* We want the buttons all on one line */
div.profiltabs > div > a {
  color: dark-blue;                 /* Looks more like a button than a link */
  font-size: 16px;
  background: #CCC;             /* Active tabs are light gray */
  padding: 0.3em;               /* Some breathing space */
  border: 0.1em outset #BBB;    /* Make it look like a button */
  border-bottom: 0.1em solid #CCC} /* Visually connect tab and tab body */
div.profiltabs > div:not(:target) > a {
  border-bottom: none;          /* Make the bottom border disappear */
  background: #FFF}             /* Inactive tabs are dark gray */
div.profiltabs > div:target > a,      /* Apply to the targeted item or... */
:target #profiltab1 > a {         /* ... to the default item */
  border-bottom: 0.1em solid #CCC; /* Visually connect tab and tab body */
  background: #CCC}             /* Active tab is light gray */
div.profiltabs > div > div {
  background: #CCC;             /* Light gray */
  z-index: -2;                  /* Behind, because the borders overlap */
  left: 0; top: 1.6em;          /* The top needs some calculation... */
  bottom: 0; right: 0;          /* Other sides flush with containing block */
  overflow: auto;               /* Scroll bar if needed */
  padding: 0.3em;               /* Looks better */
  border: 0.1em outset #BBB}    /* 3D look */
div.profiltabs > div:not(:target) > div { /* Protect CSS1 & CSS2 browsers */
  position: absolute }          /* All these DIVs overlap */
div.profiltabs > div:target > div, :target #profiltab1 > div {
  position: absolute;           /* All these DIVs overlap */
  z-index: -1}                  /* Raise it above the others */
div.profiltabs :target {
  outline: none}

