/* Skin: "windows-xp" — Luna + Bliss. Sky/grass desktop, blue title bar with a
   red close button, the blue task pane, a green Start taskbar. Tahoma throughout. */
.skin-windows-xp { background: linear-gradient(#1f5fb0 0%, #3f86d0 40%, #8cc0ea 50%, #7cc24d 56%, #5a9e38 100%); }
.skin-windows-xp .viewport { background: transparent; }
.skin-windows-xp .site { max-width: 880px; margin: 22px auto; background: #ece9d8; border: 1px solid #003c74; border-radius: 8px 8px 0 0; box-shadow: 0 10px 34px rgba(0,0,0,.45); overflow: hidden; font-family: Tahoma, "Segoe UI", Geneva, sans-serif; }

/* Luna title bar */
.skin-windows-xp .masthead { position: relative; background: linear-gradient(#0058e6, #3f8cf3 9%, #0054e3 18%, #2a6cd6 92%, #0d3e9e); padding: 6px 12px 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.skin-windows-xp .brand { margin: 0; font: bold 22px Tahoma, sans-serif; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,.5); }
.skin-windows-xp .tag { margin: 2px 0 0; color: #dCE9ff; font-size: 15px; text-shadow: 1px 1px 1px rgba(0,0,0,.4); }
.skin-windows-xp .beta { display: none; }
.skin-windows-xp .masthead::after { content: "\2715"; position: absolute; top: 7px; right: 9px; width: 24px; height: 21px; background: linear-gradient(#e8743b, #cf3a1c); color: #fff; font: bold 13px Tahoma; text-align: center; line-height: 21px; border: 1px solid rgba(255,255,255,.7); border-radius: 3px; }

/* Layout with the XP blue task pane on the left */
.skin-windows-xp .layout { display: flex; gap: 0; background: #ece9d8; align-items: stretch; }
.skin-windows-xp .framenav { flex: 0 0 184px; background: linear-gradient(#7ba2e7, #4d77c9); padding: 12px 10px; }
.skin-windows-xp .framenav .navtitle { background: linear-gradient(#f8b84b, #f0901d); color: #fff; font: bold 12px Tahoma; padding: 5px 9px; border-radius: 5px 5px 0 0; margin: 0; }
.skin-windows-xp .framenav ul { list-style: none; margin: 0; padding: 8px 10px; background: #d6e3f8; border-radius: 0 0 5px 5px; }
.skin-windows-xp .framenav li { font-size: 12px; color: #16387a; padding: 4px 2px; border-bottom: 1px solid #c1d3f1; cursor: pointer; }
.skin-windows-xp .framenav li:hover { color: #d24700; text-decoration: underline; }

.skin-windows-xp .content { flex: 1; min-width: 0; background: #fff; margin: 10px; padding: 16px 20px; border: 1px solid #c5c2b8; }
.skin-windows-xp .content p { font-size: 16px; line-height: 1.6; color: #1a1a1a; margin: 0 0 1em; }
.skin-windows-xp .content h2 { font: bold 18px Tahoma; color: #1457c4; margin: 1.3em 0 .3em; }
.skin-windows-xp .content a, .skin-windows-xp .period-links a { color: #0a5ad6; }
.skin-windows-xp .period-links { font-size: 16px; margin: 0 0 12px; }
.skin-windows-xp .inline img, .skin-windows-xp .tile img { max-width: 100%; height: auto; display: block; border: 1px solid #7f9db9; }
.skin-windows-xp .inline figcaption, .skin-windows-xp .tile figcaption { font-size: 13px; color: #555; margin-top: 4px; }
.skin-windows-xp .period-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 16px; }
.skin-windows-xp .tile { margin: 0; }

/* Start taskbar */
.skin-windows-xp .period-foot { position: relative; background: linear-gradient(#3f8cf3, #1456c4 10%, #1457c4 90%, #0d3e9e); color: #fff; font-size: 12px; padding: 7px 14px 7px 96px; text-align: right; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.skin-windows-xp .period-foot::before { content: "\25B6 start"; position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 5px; background: linear-gradient(#83c659, #4e9a2f); color: #fff; font: italic bold 15px Tahoma; padding: 0 18px 3px 12px; border-radius: 0 12px 12px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); text-shadow: 1px 1px 1px rgba(0,0,0,.4); }