/* Elliptic Games — ported from the WordPress "ellipticgames" theme (style.css + mlddmenu.css).
   Original pixel sizes kept; widths turned into max-widths so it also works on phones. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 8px;
  background: #000 url(/wp-content/uploads/2012/08/WebBG_big.png) repeat-x center top fixed;
  color: rgb(200, 200, 200);
  font-family: Verdana, sans-serif;
}

/* ---- windows ----------------------------------------------------------- */
.window {
  position: relative;            /* for the presskit button */
  margin: 0 auto;
  max-width: 1044px;
  padding: 8px;
  background-color: rgba(35, 25, 15, 0.9);
  border: 2px solid rgba(200, 150, 150, 0.5);
  font-size: .8em;
}
.mainWindow   { margin: 10px auto; }
.topWindow    { border-bottom-width: 0; font-size: 14px; font-family: Arial, sans-serif; }
.middleWindow { max-width: 1104px; background-color: rgba(0, 0, 0, 0.9); padding: 40px 8px; }
.bottomWindow { border-top-width: 0; }

.video { max-width: 960px; margin: 0 auto; }
.video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

.announce { text-align: center; font-size: 2em; margin: .67em 0; }

/* ---- masthead ---------------------------------------------------------- */
.presskit_link {
  position: absolute; top: 10px; right: 10px;
  padding: 4px 10px;
  font: bold 20px Arial, sans-serif;
  text-align: center;
  border: 2px solid rgba(200, 150, 150, 0.15);
  background-color: rgba(20, 15, 15, 0.9);
}
.presskit_link a { text-decoration: none; }

.title {
  margin: 0 8px;
  text-align: center;
  font: bold 72px 'Michroma', sans-serif;
  color: rgb(200, 200, 200);
}
a.title, a.title:link, a.title:visited, a.title:hover { color: rgb(200, 200, 200); text-decoration: none; }

/* ---- nav (replaces the mlddmenu.js dropdown with pure CSS) -------------- */
.rodinaNavbar { font: bold 18px Arial, sans-serif; text-align: center; margin: 8px 0; }
.mlddm { display: flex; margin: 0; padding: 0; list-style: none; }
.mlddm > li { position: relative; flex: 1 1 20%; margin: 0 2px 0 0; }
.mlddm a {
  display: block;
  padding: 4px 20px;
  color: rgb(150, 200, 150);
  text-decoration: none;
  white-space: nowrap;
  background-color: rgb(56, 45, 37);
}
.mlddm a:hover { background-color: rgb(80, 65, 50); color: rgb(150, 200, 150); }
/* Dropdown: the 5px gap above and 35px margins left and right are transparent padding, so the
   mouse never "falls off" the menu on its way down; closing is also delayed by 0.025s. */
.mlddm ul {
  position: absolute; z-index: 100;
  left: 0; top: 100%;
  margin: 0; padding: 5px 35px 0 35px;
  list-style: none;
  background: transparent;
  visibility: hidden;
  transition: visibility 0s linear .025s;
}
.mlddm li:hover > ul, .mlddm li:focus-within > ul { visibility: visible; transition-delay: 0s; }
.mlddm ul li { background-color: rgb(56, 45, 37); }
.mlddm ul a {
  min-width: 134px;
  margin-top: -2px;
  padding: 5px 17px 5px 13px;
  font-weight: normal;
  text-align: left;
  background: transparent;
  border: 2px solid rgb(70, 60, 50);
}

/* ---- layout ------------------------------------------------------------- */
.columns { display: flex; align-items: flex-start; gap: 16px; }
#container { flex: 1 1 675px; min-width: 0; padding: 2em 1em 1em 1em; margin-left: 8px; }
.sidebar { flex: 0 0 275px; padding: 1em 1em 1em 0; overflow: hidden; }
#pagecontainer { max-width: 900px; padding: 2em 1em 1em 100px; }

/* ---- content ------------------------------------------------------------ */
a { font-weight: bold; text-decoration: underline; }
a:link, a:visited { color: rgb(150, 200, 150); }
a:hover { color: rgb(200, 150, 150); }

.entry-container { margin: 0 0 32px 0; }
.entry-title { font-weight: bold; margin: 0; font-size: 24px; }
h2.single-entry-title { text-align: center; font-weight: bold; font-size: 28px; }
.entry-date { font-weight: bold; font-size: 12px; }
.entry-content h1 { margin-top: 33px; }
.entry-content h2 { margin-top: 33px; margin-bottom: 0; }
.entry-content ul { list-style: square outside; }
.entry-content li { margin: 16px; }
.entry-content li::first-line { font-size: 16px; font-weight: bold; }
.entry-content p { clear: both; }
.entry-content img { max-width: 100%; height: auto; border: 0; }
.entry-content iframe { max-width: 100%; }
.entry-content blockquote { border-left: 3px solid rgba(200, 150, 150, 0.4); margin-left: 1em; padding-left: 1em; }

.center { text-align: center; }
.middle { vertical-align: text-top; }
.left { margin-right: 16px; float: left; }
.right { float: right; }
.clear { clear: both; }

/* page-specific classes still used inside imported page HTML */
.patronName  { float: left; width: 266px; text-align: center; font-weight: bold; font-size: 18px; margin: 20px 0; }
.patronName img { margin: 0 0 30px 0; }
.patronName1 { float: left; width: 800px; max-width: 100%; text-align: center; font-weight: bold; font-size: 18px; }
.patronName1 img { margin: 0 0 10px 0; }
.patronName2 { float: left; width: 400px; text-align: center; font-weight: bold; font-size: 18px; margin: 20px 0; }
.patronName2 img { margin: 0 0 10px 0; }
.specialThanksName { float: left; width: 200px; text-align: center; font-weight: bold; font-size: 15px; margin: 15px 0; }

/* Patrons page grids ({{< patrons size="..." >}}) */
.patrons { display: grid; gap: 30px 16px; margin: 24px 0; text-align: center; font-weight: bold; }
.patrons-single { grid-template-columns: 1fr; font-size: 18px; }
.patrons-large  { grid-template-columns: repeat(2, 1fr); font-size: 18px; }
.patrons-medium { grid-template-columns: repeat(3, 1fr); font-size: 18px; }
.patrons-small  { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px 16px; font-size: 15px; }
.patron { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; }
.patron img { max-width: 100%; width: 300px; height: auto; }
@media (max-width: 820px) {
  .patrons-large, .patrons-medium { grid-template-columns: repeat(2, 1fr); }
}

/* boxed info table from the old store pages */
.dashboardInfo {
  font: bold 18px Arial, sans-serif;
  border: 2px solid rgba(200, 150, 150, 0.15);
  background-color: rgba(20, 15, 15, 0.9);
  padding: 16px;
  margin: 16px 0;
}
.dashboardInfo table { width: 100%; color: rgb(200, 200, 200); border-collapse: separate; border-spacing: 0 12px; }
.dashboardInfo td { vertical-align: top; padding-right: 16px; }
@media (max-width: 820px) {
  .dashboardInfo td { display: block; width: auto !important; padding: 2px 0; }
}

.gallery { display: grid; gap: 8px; margin: 16px 0; }
.gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 0; }

.steam-widget { display: block; max-width: 100%; border: 0; }

.navigation { margin: 24px 0; }
#nav-below { display: flex; justify-content: space-between; gap: 16px; }
#nav-below .nav-next { text-align: right; }

.post-list { list-style: none; padding: 0; }
.post-list li { margin: 6px 0; }

.draft { background: #630; color: #fc9; padding: 2px 6px; font-size: 11px; }

/* ---- sidebar ------------------------------------------------------------ */
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li.widget { margin: 16px 0; padding: 0; }
.sidebar input[type="search"] {
  width: 190px; max-width: 70%;
  border: 1px solid #ddd; background: #fff; color: #222;
  font-size: 1em; padding: 2px 4px;
}
.sidebar input[type="submit"] { border: 1px solid #ddd; background: #f5f5f5; color: #222; font-size: 1em; }

/* ---- search page --------------------------------------------------------- */
#search-page input[type="search"] { width: 100%; max-width: 480px; font-size: 1.2em; padding: 4px 8px; }
#search-results li { margin: 16px 0; }
#search-results .snippet { color: rgb(170, 170, 170); }
#search-results mark { background: rgb(80, 65, 50); color: inherit; }

#footer { clear: both; text-align: center; font-size: 11px; color: rgb(140, 130, 120); padding: 16px 0 4px; }

/* ---- small screens ------------------------------------------------------ */
@media (max-width: 820px) {
  .title { font-size: 44px; padding-top: 32px; }
  .presskit_link { font-size: 14px; }
  .announce { font-size: 1.3em; }
  .mlddm { flex-wrap: wrap; }
  .mlddm > li { flex: 1 1 30%; margin-bottom: 2px; }
  .mlddm a { padding: 4px 8px; font-size: 15px; }
  .columns { flex-direction: column; }
  .sidebar { flex: none; width: 100%; padding: 0 1em; }
  #container { margin-left: 0; padding: 1em .5em; }
  #pagecontainer { padding: 1em .5em; }
  .patronName, .patronName2, .specialThanksName { width: 50%; }
}