/* Skin: "facebook" — classic c.2009 Facebook. Blue top bar, grey chrome,
   two-column layout, blue box headers, blue buttons, Lucida Grande. */
.skin-facebook { background: #d8dfea; }
.skin-facebook .viewport { background: #fff; }
.skin-facebook .site { max-width: 900px; margin: 0 auto; font-family: "Lucida Grande", Tahoma, Verdana, sans-serif; color: #1c2a4d; }

/* Blue top bar: facebook wordmark + a search box */
.skin-facebook .masthead { background: #3b5998; padding: 0; overflow: hidden; }
.skin-facebook .masthead::before { content: "facebook"; display: inline-block; color: #fff; font: bold 25px "Lucida Grande", "Klavika", Tahoma, sans-serif; letter-spacing: -1.5px; padding: 7px 14px; }
.skin-facebook .masthead::after { content: "\1F50D Search"; display: inline-block; float: right; background: #fff; color: #aaa; font-size: 13px; padding: 4px 12px; margin: 8px 14px; border-radius: 2px; }
.skin-facebook .brand { display: block; margin: 0; background: #fff; color: #3b5998; font: bold 24px "Lucida Grande", Tahoma; padding: 12px 16px 2px; }
.skin-facebook .tag { margin: 0; background: #fff; color: #666; font-size: 15px; padding: 2px 16px 12px; border-bottom: 1px solid #d8dfea; }
.skin-facebook .beta { display: none; }

/* Two columns */
.skin-facebook .layout { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: #fff; }
.skin-facebook .framenav { flex: 0 0 200px; }
.skin-facebook .framenav .navtitle { color: #99a; font: bold 11px Tahoma; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 4px; padding: 0 6px; }
.skin-facebook .framenav ul { list-style: none; margin: 0; padding: 0; }
.skin-facebook .framenav li { font-size: 13px; padding: 6px 8px; color: #3b5998; border-radius: 3px; cursor: pointer; }
.skin-facebook .framenav li:hover { background: #eceff5; }

.skin-facebook .content { flex: 1; min-width: 0; }
.skin-facebook .content h2 { background: #6d84b4; color: #fff; font: bold 13px "Lucida Grande", Tahoma; padding: 5px 9px; margin: 0 0 10px; border-radius: 3px 3px 0 0; }
.skin-facebook .content h2 ~ h2 { margin-top: 1.4em; }
.skin-facebook .content p { font-size: 16px; line-height: 1.55; color: #333; margin: 0 0 1em; }
.skin-facebook .content a, .skin-facebook .period-links a { color: #3b5998; text-decoration: none; font-weight: bold; }
.skin-facebook .content a:hover { text-decoration: underline; }
.skin-facebook .period-links { font-size: 14px; margin: 0 0 14px; }
.skin-facebook .period-links a { display: inline-block; background: linear-gradient(#5c75ab, #3b5998); color: #fff; border: 1px solid #29447e; border-radius: 3px; padding: 4px 12px; margin-right: 8px; }
.skin-facebook .inline img, .skin-facebook .tile img { max-width: 100%; height: auto; display: block; border: 1px solid #b3b8c8; }
.skin-facebook .inline figcaption, .skin-facebook .tile figcaption { font-size: 13px; color: #889; margin-top: 4px; }
.skin-facebook .period-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin-top: 10px; }
.skin-facebook .tile { margin: 0; }
.skin-facebook .period-foot { background: #fff; border-top: 1px solid #d8dfea; color: #999; font-size: 12px; text-align: center; padding: 12px; }
.skin-facebook .period-foot::before { content: "Facebook \00A9 2009  \00B7  English (US)  \00B7  About  \00B7  Advertising  \00B7  Terms  "; }
