:root{
    --gold:#f7c24b;
    --gold-hot:#ffd979;
    --cream:#fff3d0;
    --link:#ff8e8e;
    --panel-w:500px;
    --side-w:410px;
  }

  *{ box-sizing:border-box; }

  body{
    margin:0;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
    background:
        url('/pages/wbs3/background-left.png') repeat-y top left,
        url('/pages/wbs3/background-right.png') repeat;
    min-height:100vh;
  }

  a{ color:var(--link); text-decoration:underline; }
  a:hover{ color:var(--gold-hot); }

  .page{
    display:flex;
    align-items:flex-start;
    width:calc(var(--panel-w) + var(--side-w));
    min-height:100vh;
  }

  .main-panel{
    width:var(--panel-w);
    min-height:100vh;
    padding:18px 32px 26px 48px;
    border-right:2px solid #4c2a13;
	background:transparent;
    box-shadow:none;
  }

  .brand{
    position:relative;
    min-height:210px;
    margin-bottom:8px;
  }

  .welcome{
    font-family:Georgia, serif;
    font-style:italic;
    color:var(--cream);
    font-size:15px;
    margin-left:3px;
    text-shadow:1px 1px 2px #000;
  }

  .main-logo{
    display:block;
    width:403px;
    height:176px;
    margin-top:4px;
  }

  .browse{
    font-weight:bold;
    font-size:14px;
    margin:12px 0 10px;
    text-shadow:1px 1px 2px #000;
  }

  .hubs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 34px;
    margin:0 18px 20px 4px;
  }

  .hub{
    display:grid;
    grid-template-columns:34px 1fr;
    gap:8px;
    align-items:center;
    color:var(--gold);
    font-size:19px;
    font-weight:bold;
    text-shadow:1px 1px 2px #000;
  }

  .hub small{
    display:block;
    color:#f2e6c7;
    font-size:12px;
    font-weight:normal;
    margin-top:2px;
  }

  .hub-icon{
    width:36px;
    height:37px;
    display:block;
  }

  .links{
    text-align:center;
    font-size:12px;
    margin:12px 0 6px;
  }

  .divider{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--gold);
    margin:6px 32px 14px;
  }
  .divider:before,.divider:after{
    content:"";
    height:1px;
    background:linear-gradient(90deg, transparent, #9e6b22, transparent);
    flex:1;
  }

  .intro{
    max-width:410px;
    margin:0 auto;
    text-align:center;
    color:#eee;
    font-size:13px;
    line-height:1.45;
  }
  .intro b{ color:var(--gold-hot); }

  .footer{
    margin-top:48px;
    text-align:center;
    font-size:11px;
    line-height:1.7;
    color:#fff;
    text-shadow:1px 1px 2px #000;
  }

  .sidebar{
    width:var(--side-w);
    min-height:100vh;
    padding:14px 10px 14px 24px;
    background:transparent;
    box-shadow:none;
  }

  .new-users-banner{
    display:block;
    width:274px;
    height:113px;
    margin:0 0 12px 0;
  }

  .sidebar-controls{
    display:flex;
    align-items:flex-start;
    gap:18px;
  }

  .sidebar-nav-column{
    flex:0 0 185px;
  }

  .nav-map{
    display:block;
    width:185px;
    height:301px;
    margin:8px 0 12px;
  }

  .counter{
    margin:22px auto 0;
    width:120px;
    text-align:center;
  }
  .counter-dot{
    display:inline-block;
    width:32px;
    height:32px;
    margin-right:6px;
    vertical-align:middle;
  }

  .counter .num{
    display:inline-block;
    color:var(--gold-hot);
    font:italic 34px Georgia,serif;
    text-shadow:1px 2px 3px #000;
    vertical-align:middle;
  }
  .counter .label{
    font-size:14px;
    margin-top:-2px;
  }
  .user-greeting {
    text-align: center;
    color: #ffd45a;
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0 12px 15px;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
    white-space: nowrap;
  }


  .sidebar-panel {
    box-sizing:border-box;
    flex:0 0 185px;
    width:185px;
    padding:12px 10px;
    text-align:center;
    color:#f8e7b0;
    background:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
    url('/pages/wbs3/background-black2.png');

	background-repeat:
    no-repeat,
    repeat;

	background-size:
    100% 100%,
    auto;
    border:1px solid #b67b22;
    border-radius:7px;
    box-shadow:
      inset 0 0 0 1px rgba(255,221,128,.22),
      0 3px 8px rgba(0,0,0,.55);
  }

  .sidebar-login-panel {
    margin-top:110px;
  }

  .sidebar-welcome-panel {
    margin-top:120px;
  }

  .sidebar-panel h2 {
    margin:0 0 8px;
    color:#f2c65c;
    font-family:Georgia,"Times New Roman",serif;
    font-size:17px;
    line-height:1.05;
    letter-spacing:.4px;
  }

  .sidebar-member-name {
    margin:4px 0 8px;
    color:#fff3c5;
    font-size:18px;
    font-weight:700;
    overflow-wrap:anywhere;
  }

  .sidebar-member-since {
    margin:0 0 10px;
    font-size:11px;
    line-height:1.35;
    color:#d9c48f;
  }

  .sidebar-member-since strong {
    color:#f4ddb0;
    font-weight:700;
  }

  .sidebar-login-form {
    display:grid;
    gap:5px;
    text-align:left;
  }

  .sidebar-login-form label {
    color:#e6cf96;
    font-size:11px;
    font-weight:700;
  }

  .sidebar-login-form input {
    width:100%;
    min-width:0;
    padding:6px 7px;
    color:#fff1c7;
    background:#0b0705;
    border:1px solid #8d5a18;
    border-radius:4px;
    outline:none;
    box-shadow:inset 0 1px 4px rgba(0,0,0,.8);
  }

  .sidebar-login-form input:focus {
    border-color:#e2b448;
    box-shadow:
      inset 0 1px 4px rgba(0,0,0,.8),
      0 0 0 2px rgba(226,180,72,.18);
  }

  .sidebar-panel-button {
    display:block;
    width:100%;
    margin-top:5px;
    padding:7px 8px;
    color:#241000;
    font-family:Georgia,"Times New Roman",serif;
    font-size:12px;
    font-weight:700;
    line-height:1;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    background:linear-gradient(#f6d66f,#b97816);
    border:1px solid #4d2703;
    border-radius:4px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.45),
      0 2px 4px rgba(0,0,0,.5);
  }

  .sidebar-panel-button:hover,
  .sidebar-panel-button:focus-visible {
    color:#241000;
    filter:brightness(1.08);
  }


  .sidebar-logout-form {
    margin:4px 0 0;
  }

  .sidebar-logout-button {
    margin-top:0;
    color:#f0d9a2;
    background:linear-gradient(#6a4a24,#35200e);
    border-color:#8d5a18;
    text-shadow:0 1px 1px rgba(0,0,0,.8);
  }

  .sidebar-logout-button:hover,
  .sidebar-logout-button:focus-visible {
    color:#fff0c0;
    background:linear-gradient(#7a572c,#422813);
    filter:none;
  }

  .sidebar-login-error {
    margin:0 0 8px;
    padding:6px;
    color:#ffd4ca;
    background:rgba(104,0,0,.48);
    border:1px solid rgba(217,79,58,.72);
    border-radius:4px;
    font-size:10px;
    line-height:1.25;
    text-align:left;
  }

  @media (max-width:720px){
    .page{ transform-origin:top left; transform:scale(.82); }
  }