/* The Western Sydney Sentinel — circa 2009 and proud of it. */ body { background: #4a5a6a url("data:image/png;base64,") repeat; background-color: #51606e; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000; margin: 0; padding: 12px 0; } #page { width: 980px; margin: 0 auto; background: #ffffff; border: 1px solid #000; } /* ===== Masthead ===== */ #masthead { background: #ffffff; border-bottom: 3px solid #8b0000; padding: 10px 12px 6px 12px; } #logo { /* * Masthead typeface. To audition another face live in DevTools (F12), * select the #logo element and change `--masthead-font` in the Styles * panel — the candidates below are all preloaded via the Google Fonts * in the page , so no network change is needed. * * Candidates, roughly most-gothic/least-legible first: * "UnifrakturMaguntia" — authentic Fraktur, dense and archaic (default) * "UnifrakturCook" — bolder Fraktur, a touch more legible * "Germania One" — heavy blackletter display * "Pirata One" — condensed blackletter, ornate * "Grenze Gotisch" — modern gothic, the most readable of the set * "MedievalSharp" — medieval flavour, more casual * * To make a pick permanent, just set --masthead-font here. */ --masthead-font: "UnifrakturMaguntia"; /* --masthead-font: "UnifrakturCook"; */ /* --masthead-font: "Germania One"; */ /* --masthead-font: "Pirata One"; */ /* --masthead-font: "Grenze Gotisch"; */ /* --masthead-font: "MedievalSharp"; */ font-family: var(--masthead-font), Georgia, "Times New Roman", serif; font-size: 40px; font-weight: bold; color: #8b0000; letter-spacing: 0; line-height: 1.05; } #logo span { color: #1a1a1a; } #masthead-right { text-align: right; vertical-align: bottom; font-size: 10px; color: #444; } #masthead-right a { color: #00339a; } /* ===== Nav ===== */ #nav { background: #8b0000 url("data:image/gif;base64,"); background-color: #8b0000; background: linear-gradient(#a00000, #6e0000); } #nav a { display: inline-block; color: #fff; text-decoration: none; font-weight: bold; font-size: 11px; padding: 6px 12px; border-right: 1px solid #5a0000; } #nav a:hover { background: #ffd700; color: #8b0000; } /* ===== Ticker ===== */ #ticker { background: #ffffcc; border-bottom: 1px solid #ccc; padding: 4px 8px; font-size: 10px; color: #333; } #ticker strong { color: #8b0000; } #ticker marquee { width: 78%; } /* ===== Layout ===== */ #body-layout { width: 100%; } #sidebar { width: 180px; vertical-align: top; background: #f0f0f0; border-right: 1px solid #ccc; padding: 8px; } #content { vertical-align: top; padding: 12px 16px; } /* ===== Sidebar boxes ===== */ .box { border: 1px solid #aaa; background: #fff; margin-bottom: 12px; } .box-title { background: #1a3c6e; background: linear-gradient(#2a5390, #1a3c6e); color: #fff; font-weight: bold; font-size: 10px; padding: 3px 6px; letter-spacing: 1px; } .box ul { list-style: none; margin: 0; padding: 6px; } .box li { padding: 2px 0; border-bottom: 1px dotted #ddd; } .box a { color: #00339a; text-decoration: none; } .box a:hover { text-decoration: underline; } .poll-q { padding: 6px; margin: 0; font-weight: bold; } .box label { display: inline-block; padding: 1px 6px; } .box input[type=button] { margin: 6px; } .ad { text-align: center; } .ad p { color: #cc0000; font-weight: bold; padding: 4px; } .ad a { color: #00339a; } /* ===== Article ===== */ .breadcrumb { font-size: 10px; color: #666; margin-bottom: 8px; } .breadcrumb a { color: #00339a; text-decoration: none; } h1 { font-family: Georgia, "Times New Roman", serif; font-size: 24px; color: #1a1a1a; line-height: 1.2; margin: 0 0 8px 0; } .byline { font-size: 11px; color: #333; border-bottom: 1px solid #ccc; padding-bottom: 6px; margin-bottom: 12px; } .byline a { color: #00339a; text-decoration: none; } .dateline { color: #888; font-size: 10px; } img.hero { border: 1px solid #888; padding: 3px; background: #fff; display: block; } .caption { font-size: 10px; color: #777; font-style: italic; margin: 3px 0 14px 0; } img.inline-right { float: right; margin: 4px 0 8px 14px; border: 1px solid #888; padding: 3px; background: #fff; } img.inline-left { float: left; margin: 4px 14px 8px 0; border: 1px solid #888; padding: 3px; background: #fff; } #content p { font-size: 12px; line-height: 1.6; color: #222; margin: 0 0 12px 0; } #content p.lede { font-size: 13px; font-weight: bold; } .endmark { clear: both; } /* ===== Story list (homepage) ===== */ .story-summary { border-bottom: 1px solid #ccc; padding: 10px 0; overflow: hidden; } .story-summary h2 { font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.2; margin: 0 0 4px 0; } .story-summary h2 a { color: #1a1a1a; text-decoration: none; } .story-summary h2 a:hover { color: #8b0000; text-decoration: underline; } .story-summary img.thumb { float: right; margin: 2px 0 6px 12px; border: 1px solid #888; padding: 3px; background: #fff; } #content p.summary { font-size: 11px; } .more { font-size: 11px; } .more a { color: #00339a; text-decoration: none; font-weight: bold; } /* ===== Related / comments ===== */ .related { border: 1px solid #aaa; margin: 18px 0; clear: both; } .related ul { list-style: none; margin: 0; padding: 8px; } .related li { padding: 3px 0; border-bottom: 1px dotted #ddd; } .related a { color: #00339a; text-decoration: none; } .comments { border: 1px solid #aaa; margin-top: 18px; } .comment { padding: 8px; border-bottom: 1px solid #eee; font-size: 11px; line-height: 1.5; } .comment strong { color: #8b0000; } /* ===== Footer ===== */ #footer { clear: both; background: #1a3c6e; color: #ccc; text-align: center; padding: 12px; font-size: 10px; border-top: 3px solid #8b0000; } #footer a { color: #ffd700; text-decoration: none; } #footer p { margin: 4px 0; } #footer .tiny { color: #88a; font-size: 9px; }