/*  The Sun Moon (tsm) Style Sheet
    --------------------------------------------------------------
    Style name:     The Sun Moon (tsm)
    Based on style: prosilver (phpBB 3.3.x)
    Origin:         Extracted and migrated from the 2007-2015 era
                    phpBB website theme of The Sun Moon Guild
                    (EQ2 community site), originally built on top
                    of the phpbb.com website CSS framework.
    Migrated on:    2026-04-10
    Source files:   eq2/theme/{website,navigation,headers,titles,silver}.css
    --------------------------------------------------------------
    Notes:
    - tsm is a child style of prosilver. The parent stylesheet is
      loaded first; everything in this file overrides or augments
      the prosilver defaults.
    - The original site used a 910px fixed-width layout on the
      phpbb.com website framework (id="wrap"/"page-header"/"navbar"),
      which does not exist in prosilver 3.3 (.wrap class).
      We provide selectors for both, so that the same override
      works whether the overall_header.html template still emits
      the legacy id="wrap" container or the vanilla .wrap class.
    - AdSense, AddThis, GTM, Facebook SDK and WordPress (wp_*)
      related styles from the 2015 theme are intentionally dropped.
    --------------------------------------------------------------
*/

/* Pull in all prosilver parent styles first so our overrides land last */
@import url("../../prosilver/theme/normalize.css");
@import url("../../prosilver/theme/base.css");
@import url("../../prosilver/theme/utilities.css");
@import url("../../prosilver/theme/common.css");
@import url("../../prosilver/theme/links.css");
@import url("../../prosilver/theme/content.css");
@import url("../../prosilver/theme/buttons.css");
@import url("../../prosilver/theme/cp.css");
@import url("../../prosilver/theme/forms.css");
@import url("../../prosilver/theme/icons.css");
@import url("../../prosilver/theme/colours.css");
@import url("../../prosilver/theme/responsive.css");

/* ============================================================
   Global: typography and page background
   ============================================================ */

html {
  color: #536482;
  background-color: #aca8a1;
  font-size: 100%;
}

body {
  font-family: "Droid Sans", sans-serif, "微軟正黑體", "Microsoft JhengHei";
  color: #536482;
  background-color: #aca8a1;
  margin: 0;
  text-align: center;
}

/* Re-assert the custom font on content that prosilver styles with its own stacks */
body,
input,
textarea,
button,
select {
  font-family: "Droid Sans", sans-serif, "微軟正黑體", "Microsoft JhengHei";
}

/* Kill the generic prosilver underline-on-hover for legacy look */
a:hover {
  text-decoration: none;
}

/* ============================================================
   Layout: 910px fixed-width wrap
   ============================================================
   Override prosilver's fluid .wrap (max-width: 1152px) and
   reintroduce the legacy #wrap container if the template still
   emits the phpbb.com website shell.
*/

.wrap,
#wrap {
  width: 910px;
  max-width: 910px;
  min-width: 910px;
  margin: 10px auto;
  padding: 0;
  background: #ffffff url("./images/bg_body.gif") repeat-y 0 0;
  border: none;
  border-radius: 0;
  text-align: left;
}

/* Neutralise prosilver's responsive breakpoints so the layout
   stays locked at 910px at every viewport size. */
@media only screen and (max-width: 1220px),
  only screen and (max-device-width: 1220px) {
  .wrap,
  #wrap {
    margin: 10px auto;
    width: 910px;
    max-width: 910px;
    min-width: 910px;
  }
}

#page-header {
  background: url("./images/bg_header.gif") repeat-x 0 0;
  height: 150px;
  clear: both;
}

#page-body {
  margin: 0 30px;
  clear: both;
}

#page-body .navbar {
  margin: 4px 0;
}

/* ============================================================
   Header block with section images (from headers.css)
   ============================================================ */

body div.header {
  background-repeat: no-repeat;
  width: 850px;
  height: 129px;
  float: left;
  margin-top: 21px;
}
body div.header h1 {
  margin: 0;
}
body div.header h1 a {
  display: block;
  width: 850px;
  height: 129px;
  text-indent: -5000px;
  text-decoration: none;
  margin: 0;
}
html > body div.header h1 a {
  background: url("./images/logo_phpbb.png") 25px 30px no-repeat;
}

/* Section header images — keyed on body class */
body div.header {
  background-image: url("./images/headers/header_misc.jpg");
}
body.features div.header {
  background-image: url("./images/headers/header_features.jpg");
}
body.downloads div.header {
  background-image: url("./images/headers/header_downloads.jpg");
}
body.changelog div.header {
  background-image: url("./images/headers/header_changelog.jpg");
}
body.history div.header {
  background-image: url("./images/headers/header_history.jpg");
}
body.support div.header {
  background-image: url("./images/headers/header_support.jpg");
}
body.documentation div.header {
  background-image: url("./images/headers/header_documentation.jpg");
}
body.irc div.header {
  background-image: url("./images/headers/header_irc.jpg");
}
body.intl div.header {
  background-image: url("./images/headers/header_intl.jpg");
}
body.incidents div.header {
  background-image: url("./images/headers/header_incidents.jpg");
}
body.security div.header {
  background-image: url("./images/headers/header_security.jpg");
}
body.customise div.header {
  background-image: url("./images/headers/header_customise.jpg");
}
body.home div.header,
body.about div.header,
body.community div.header {
  background-image: url("./images/headers/header_skyshrine.png");
}
body.mods div.header {
  background-image: url("./images/headers/header_mods.jpg");
}
body.modx div.header {
  background-image: url("./images/headers/header_modx.jpg");
}
body.styles div.header {
  background-image: url("./images/headers/header_styles.jpg");
}
body.languages div.header {
  background-image: url("./images/headers/header_languages.jpg");
}
body.bugs div.header {
  background-image: url("./images/headers/header_bugs.jpg");
}
body.development div.header {
  background-image: url("./images/headers/header_eiffel.jpg");
}
body.search div.header {
  background-image: url("./images/headers/header_search.jpg");
}
body.kb div.header {
  background-image: url("./images/headers/header_kb.jpg");
}
body.errordocs div.header {
  background-image: url("./images/headers/header_error.jpg");
}
body.mailinglist div.header {
  background-image: url("./images/headers/header_lighttower.jpg");
}
body.prosilver div.header {
  background-image: url("./images/headers/header_prosilver.jpg");
}

body.home #tsm-navbar {
  margin-bottom: 20px;
}

/* Corners and sides */
span.side-left,
span.side-right {
  display: block;
  width: 20px;
  height: 150px;
  background: url("./images/sides_top.gif") no-repeat;
}
span.side-left {
  background-position: 0 0;
  float: left;
  margin-right: 10px;
}
span.side-right {
  background-position: 100% 0;
  float: right;
}
span.fcorners-bottom,
span.fcorners-bottom span {
  font-size: 1px;
  line-height: 1px;
  display: block;
  height: 20px;
  background-repeat: no-repeat;
  background-image: url("./images/corners_bottom.gif");
  margin: 0;
}
span.fcorners-bottom {
  background-position: 0 0;
}
span.fcorners-bottom span {
  background-position: 100% -20px;
}

/* ============================================================
   Navigation bar with GIF rollover buttons (from navigation.css)
   ============================================================ */

#tsm-navbar {
  height: 30px;
  clear: both;
  margin: 1px 30px 0 30px;
  background: url("./images/bg_navbar.gif") repeat-x 0 0;
}
#tsm-navbar ul {
  list-style: none;
  display: block;
}
#tsm-navbar li {
  float: left;
}

/* Rollover state */
#tsm-navbar li span {
  height: 30px;
  margin: 0;
  background-position: 0 -33px;
  display: block;
}

/* Rolloff state */
#tsm-navbar li span a,
#tsm-navbar li span a:link {
  display: block;
  width: 100%;
  height: 30px;
  background-position: 0 -1px;
}

/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
#tsm-navbar li span a strong {
  display: none;
}
#tsm-navbar li span a:hover {
  background-image: none;
}

/* Button sprite images */
li.but-about span,
li.but-about span a {
  background: url("./images/but_about.gif") 0 0 no-repeat;
}
li.but-community span,
li.but-community span a {
  background: url("./images/but_community.gif") 0 0 no-repeat;
}
li.but-downloads span,
li.but-downloads span a {
  background: url("./images/but_downloads.gif") 0 0 no-repeat;
}
li.but-dkp span,
li.but-dkp span a {
  background: url("./images/but_dkp.gif") 0 0 no-repeat;
}
li.but-support span,
li.but-support span a {
  background: url("./images/but_support.gif") 0 0 no-repeat;
}

li.but-about span {
  width: 76px;
}
li.but-community span {
  width: 109px;
}
li.but-downloads span {
  width: 106px;
}
li.but-dkp span {
  width: 65px;
}
li.but-support span {
  width: 87px;
}

/* Always-active states for current section */
body.about #tsm-navbar li.but-about span a,
body.community #tsm-navbar li.but-community span a,
body.downloads #tsm-navbar li.but-downloads span a,
body.languages #tsm-navbar li.but-downloads span a,
body.support #tsm-navbar li.but-support span a,
body.dkp #tsm-navbar li.but-dkp span a {
  background-position: 0 -64px;
}

/* Search box inside the navbar */
#tsm-navbar #search-box {
  display: block;
  float: right;
  width: 165px;
  height: 30px;
  margin: 0;
  background: url("./images/bg_search.gif") 0 0 no-repeat;
  position: static;
}
#tsm-navbar #search-box fieldset {
  border: none;
  padding-top: 6px;
}
#tsm-navbar #search-box input {
  width: 125px;
  height: 19px !important;
  margin-left: 28px;
  border: none !important;
  background-color: transparent;
  font-size: 1.1em !important;
  padding-top: 2px;
}

/* ============================================================
   Image replacement titles (from titles.css)
   ============================================================ */

h2.imgrep {
  height: 32px;
  background-repeat: no-repeat;
  background-position: 0 0;
  margin: 3px 0 10px 0;
  font-size: 0em;
  border-bottom: none;
  color: #ffffff;
  text-indent: -9999px;
}

h2.welcome {
  background-image: url("./images/titles/welcome.gif");
  height: 43px;
}
h2.aboutus {
  background-image: url("./images/titles/about_tsm.gif");
}
h2.about {
  background-image: url("./images/titles/about.gif");
}
h2.advertise {
  background-image: url("./images/titles/advertise.gif");
}
h2.history {
  background-image: url("./images/titles/history.gif");
}
h2.map {
  background-image: url("./images/titles/map.gif");
}
h2.team {
  background-image: url("./images/titles/team.gif");
}
h2.features {
  background-image: url("./images/titles/features.gif");
}
h2.downloads {
  background-image: url("./images/titles/downloads.gif");
}
h2.support {
  background-image: url("./images/titles/support.gif");
}
h2.customise {
  background-image: url("./images/titles/customise.gif");
}
h2.community {
  background-image: url("./images/titles/community.gif");
}
h2.mods {
  background-image: url("./images/titles/modifications.gif");
}
h2.styles {
  background-image: url("./images/titles/styles.gif");
}
h2.intl {
  background-image: url("./images/titles/intl.gif");
}
h2.bugs {
  background-image: url("./images/titles/bugs.gif");
}
h2.security {
  background-image: url("./images/titles/security.gif");
}
h2.incidents {
  background-image: url("./images/titles/incidents.gif");
}
h2.irc {
  background-image: url("./images/titles/irc.gif");
}
h2.documentation {
  background-image: url("./images/titles/documentation.gif");
}
h2.development {
  background-image: url("./images/titles/development.gif");
}
h2.languages {
  background-image: url("./images/titles/languages.gif");
}
h2.faq {
  background-image: url("./images/titles/faq.gif");
}
h2.tutorials {
  background-image: url("./images/titles/tutorials.gif");
}
h2.search {
  background-image: url("./images/titles/search.gif");
}
h2.modx {
  background-image: url("./images/titles/modx.gif");
}
h2.modsfaq {
  background-image: url("./images/titles/modsfaq.gif");
}
h2.modxcomparison {
  background-image: url("./images/titles/modxcomparison.gif");
}
h2.modsdb {
  background-image: url("./images/titles/moddb.gif");
}
h2.modsqueue {
  background-image: url("./images/titles/modqueue.gif");
}
h2.modsmy {
  background-image: url("./images/titles/modsmy.gif");
}
h2.stylesdb {
  background-image: url("./images/titles/styledb.gif");
}
h2.stylesqueue {
  background-image: url("./images/titles/stylequeue.gif");
}
h2.stylesmy {
  background-image: url("./images/titles/stylesmy.gif");
}
h2.kb {
  background-image: url("./images/titles/kb.gif");
}
h2.changelog {
  background-image: url("./images/titles/changelog.gif");
}
h2.designing_prosilver {
  background-image: url("./images/titles/designing_prosilver.gif");
  height: 48px;
}
h2.phpbbjobsboard {
  background-image: url("./images/titles/phpbbjobsboard.gif");
  height: 42px;
}
h2.error401 {
  background-image: url("./images/titles/error401.gif");
}
h2.error403 {
  background-image: url("./images/titles/error403.gif");
}
h2.error404 {
  background-image: url("./images/titles/error404.gif");
}
h2.error412 {
  background-image: url("./images/titles/error412.gif");
}
h2.error500 {
  background-image: url("./images/titles/error500.gif");
}

/* ============================================================
   Silver palette (from silver.css) — re-tints the forum blocks
   ============================================================
   Overrides prosilver's blue #12A3EB forum header gradients
   with the grey/silver tones used by the 2015 site.
*/

.forabg {
  background: #505c65 url("./images/silver/forabg.gif") repeat-x;
  background-image:
    url("./images/silver/forabg.gif"),
    linear-gradient(to bottom, #6c7780 0%, #505c65 100%);
}

.forumbg {
  background: #505c65 url("./images/silver/forabg.gif") repeat-x;
  background-image:
    url("./images/silver/forabg.gif"),
    linear-gradient(to bottom, #6c7780 0%, #505c65 100%);
}

.navbar {
  background-image: url("./images/silver/innerbox_bg.gif");
  background-repeat: repeat-x;
  background-color: #e8ecee;
}

li.row {
  background-image: url("./images/silver/row_bg.gif");
  background-color: #e8ecee;
}

/* ============================================================
   Main content column (from website.css)
   ============================================================
   Retains the 560 / 260 two-column layout used on the legacy
   aboutus / downloads / support pages. Prosilver forum pages
   (.forumbg) are not affected since they do not use #main.
*/

#main {
  font-family: "Droid Sans", sans-serif, "微軟正黑體", "Microsoft JhengHei";
  width: 560px;
  float: left;
  clear: both;
}
#main-extra {
  font-family: "Droid Sans", sans-serif, "微軟正黑體", "Microsoft JhengHei";
  width: 560px;
  float: none;
  clear: both;
}
#main .tsm {
  color: #888888;
  font-weight: bold;
  font-size: 1.7em;
}
.wide {
  font-family: "Droid Sans", sans-serif, "微軟正黑體", "Microsoft JhengHei";
  width: 100% !important;
  float: none;
  clear: both;
}

#main a,
#main-extra a {
  text-decoration: underline;
}
#main a.no-underline,
#main-extra a.no-underline {
  text-decoration: none;
}
#main .pagination a {
  text-decoration: none;
}
#main h3 a,
#main-extra h3 a {
  color: #d21a4e;
}
#main h3,
#main-extra h3 {
  font-family: "Droid Sans", sans-serif, "微軟正黑體", "Microsoft JhengHei";
  font-size: 1.2em;
  text-transform: none;
  color: #d21a4e;
  border-bottom: none;
}
#main h3 span,
#main-extra h3 span {
  color: #222222;
}
#main .panel h3,
#main-extra .panel h3 {
  border-bottom: 1px solid #cccccc;
  color: #115098;
  font-family: "Droid Sans", sans-serif, "微軟正黑體", "Microsoft JhengHei";
  font-size: 1.05em;
  font-weight: bold;
  padding-bottom: 2px;
  text-transform: uppercase;
  margin: 0.5em 0;
}
#main h4,
#main-extra h4,
#main h5,
#main-extra h5 {
  font-family: "Droid Sans", sans-serif, "微軟正黑體", "Microsoft JhengHei";
  font-size: 1.2em;
  text-transform: none;
  color: #333333;
  margin-top: 1.5em;
}
#main p,
#main-extra p {
  margin-bottom: 1em;
  font-size: 1.2em;
}
#main strong,
#main-extra strong {
  color: #222222;
}
#main .pagination strong {
  color: #fff;
}
#main b,
#main-extra b {
  color: #222222;
  font-weight: normal;
}

#main ul,
#main ol {
  font-size: 1.2em;
  margin-left: 2em;
  line-height: 1.3em;
}
#main ul ul,
#main ol ol {
  font-size: 1em;
}
#main ul h3,
#main ol h3 {
  font-size: 1em;
}

#main ul.list,
#main-extra ul.list {
  margin-bottom: 1em;
}
#main ul.list ul,
#main-extra ul.list ul {
  margin-bottom: 0;
}
#main ul.list li,
#main-extra ul.list li {
  margin-bottom: 0.2em;
  font-size: 1.2em;
  margin-left: 1.5em;
}
#main ul.list li li,
#main-extra ul.list li li {
  font-size: 1em;
}

#main div.column1 {
  width: 260px;
  float: left;
  clear: left;
}
#main div.column2 {
  width: 260px;
  float: right;
}

dl.text {
  font-size: 1.2em;
}
dl.text dt {
  font-weight: bold;
  margin-top: 1.2em;
}

/* News listing */
#main ul.news {
  list-style: none;
  margin-left: 0;
  border-top: none;
}
#main ul.news li {
  padding: 0 0 4px 0;
  margin-bottom: 5px;
  margin-left: 0;
  border-bottom: 1px solid #e0e0e0;
}
#main ul.news li.last {
  border-bottom: none;
}

/* Menu listing */
ul.menu {
  border-top: 1px solid #ffffff;
  list-style: none;
}
ul.menu li {
  padding: 5px 0 4px 0;
  border-bottom: 1px solid #cccccc;
  margin: 0;
}
ul.menu li.last {
  border-bottom: none;
}

/* Extras column */
#extras {
  width: 260px;
  float: right;
}
dl.extra-box {
  display: block;
  width: 260px;
  height: 77px;
  background-repeat: no-repeat;
  background-position: 0 0;
  margin-bottom: 5px;
}
dl.extra-box dt a {
  font-weight: bold;
  display: block;
  padding: 10px 0 5px 10px;
  color: #333333 !important;
  text-decoration: none !important;
}
dl.extra-box dd a {
  font-weight: bold;
  display: block;
  color: #ffffff !important;
  padding-left: 10px;
  padding-right: 50px;
  text-decoration: none !important;
}
dl.extra-box dt a:hover {
  text-decoration: none;
  color: #000000 !important;
}
dl.download {
  background-image: url("./images/bg_download.png");
}
dl.download2 {
  background-image: url("./images/bg_download2.png");
}
dl.download-contrib {
  background-image: url("./images/bg_download_contrib.png");
}
dl.shop {
  background-image: url("./images/bg_shop.png");
}

div.mini-panel {
  padding: 0 10px;
  background-color: #ebebeb;
  margin-bottom: 5px;
}
div.mini-panel h3 {
  font-family: "Droid Sans", sans-serif, "微軟正黑體", "Microsoft JhengHei";
  margin: 5px 0 0 0;
  font-weight: bold;
  color: #333333;
}
div.mini-panel p {
  font-size: 1em;
  margin: 3px 0;
}

/* ============================================================
   Page footer (from website.css)
   ============================================================ */

#page-footer {
  background: url("./images/bg_footer.gif") repeat-x 0 100%;
  clear: both;
}
#page-footer p {
  border-top: 1px solid #cccccc;
  margin: 15px 30px 0 30px;
  padding-top: 10px;
  text-align: center;
}
#page-footer .navbar {
  margin: 4px 30px 15px;
  height: auto;
}
#copyright {
  padding: 0 5px 5px 5px;
  text-align: center;
  color: #555555;
}
#copyright a {
  color: #222222;
}

.new {
  color: #d21a4e !important;
  font-weight: bold;
}

/* ============================================================
   Misc tweaks carried over from the 2015 site
   ============================================================ */

.fragment {
  background-color: #ecd5d8;
  padding: 5px;
  color: #bc2a4d;
  font-weight: bold;
}

div.banner-ad {
  border: solid 1px #dddddd;
  border-width: 1px 0;
  padding: 1em 0;
  text-align: center;
  background: url("./images/bg_ads.gif") no-repeat 100% 100%;
}

blockquote.website {
  font-size: 1em;
  margin-left: 0;
}

/* ========================================================================
 * Prosilver 3.3 overrides — reassert the 2015 TSM header identity
 * These rules must come AFTER all @imports so they override prosilver.
 * ========================================================================
 */

/* Kill prosilver's blue gradient on .headerbar */
.headerbar {
  background: none !important;
  min-height: 150px;
}

.headerbar > .inner {
  background-image: url("./images/headers/header_skyshrine.png");
  background-repeat: no-repeat;
  background-position: center top;
  min-height: 150px;
}

/* Hide the phpBB default SVG site logo (prosilver uses .site_logo span) */
.site_logo,
#site-description .logo .imageset {
  display: none !important;
}

/* Keep the site title visible and styled */
#site-description {
  padding: 20px 10px 10px 10px;
}
#site-description h1 {
  color: #fff;
  font-family: 'Droid Sans', sans-serif, '微軟正黑體';
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
}
#site-description p {
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

/* Ensure #page-header shows the bg_header.gif pattern as base */
#page-header {
  background: url("./images/bg_header.gif") repeat-x 0 0;
  min-height: 150px;
  clear: both;
}