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

  *{ 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 auto 12px;
  }
  .nav-map{
    display:block;
    width:185px;
    height:301px;
    margin:8px auto 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;
  }

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