/* =============================================
   EVOLERA OTS - FIXED COLOR PALETTE
   Matching the dark green/brown RPG theme
   from screenshot
   ============================================= */

/* ---- COLOR VARIABLES (easy to tweak) ----
   --bg-main:        خلفية الموقع الأساسية (أسود خضر داكن جداً)
   --bg-panel:       خلفية الـ boxes والـ panels
   --bg-panel-alt:   خلفية بديلة للـ rows الـ even/odd
   --bg-header:      خلفية headers الـ boxes (زيتوني داكن)
   --bg-table-row:   خلفية rows الجداول
   --color-gold:     اللون الذهبي للعناوين والـ labels
   --color-text:     لون النصوص العادية
   --color-text-dim: نصوص خافتة
   --border-gold:    حدود ذهبية
   --border-dark:    حدود داكنة
*/

:root {
  --bg-main:        #0c1209;
  --bg-panel:       #141d0f;
  --bg-panel-alt:   #1a2613;
  --bg-header:      #1e2d16;
  --bg-header-grad: linear-gradient(#253620, #111a0b);
  --bg-table-row:   #182012;
  --bg-label:       #0e1c0a;
  --color-gold:     #c9a349;
  --color-gold-bright: #d4b55a;
  --color-text:     #c2b89a;
  --color-text-dim: #7a7060;
  --border-gold:    #6b5a20;
  --border-dark:    #2a3820;
  --border-panel:   #3a4f28;
}

/* =============================================
   GENERAL LAYOUT
   ============================================= */

/* ------ Global table base --------------------------------- */
table {
  border-collapse: collapse;
  font-size: 13px;
}

td, th {
  padding: 7px 8px;
  vertical-align: middle;
  border: 0px solid rgba(74,58,16,0.25);
  color: var(--text-main);
}

th {
  background: linear-gradient(180deg, #1a1c10 0%, #141608 100%);
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-color: rgba(74,58,16,0.4);
}


table {
  border-collapse: collapse;
  font-size: 13px;
}

td, th {
  padding: 5px 8px;
  vertical-align: middle;
  border: px solid rgba(74,58,16,0.25);
  color: var(--text-main);
}

th {
  background: linear-gradient(180deg, #1a1c10 0%, #141608 100%);
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-color: rgba(74,58,16,0.4);
}

#ArtworkHelper {
  text-align: center;
  background-position: top center;
  background-attachment: scroll;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  min-height: 800px;
  background-color: var(--bg-main);
}

body {
  background-color: var(--bg-main);
}

#Bodycontainer {
  text-align: left;
  min-width: 1000px;
  max-width: 1200px;
  width: 100%;
  height: 100%;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  display: table;
}

#ContentRow {
  position: relative;
  top: 155px;
}

* html #ContentRow {
  display: inline-block;
}

#MenuColumn {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 180px;
  margin-right: 15px;
  margin-left: 15px;
  padding: 0px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 10pt;
  font-weight: bold;
  line-height: 12pt;
  color: var(--color-text);
}

#ContentColumn {
  position: relative;
  margin: 0px;
  margin-left: 205px;
  margin-right: 205px;
}

#ThemeboxesColumn {
  text-align: center;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 180px;
  margin: 0px;
  margin-right: 15px;
  margin-left: 25px;
}

#Footer {
  font-family: Verdana, Arial, sans-serif;
  font-size: 7pt;
  font-weight: normal;
  text-align: center;
  position: relative;
  width: 100%;
  padding-bottom: 20px;
  color: var(--color-text-dim);
}

#Footer a:link,
#Footer a:visited,
#Footer a:focus  { color: var(--color-text-dim); text-decoration: none; }
#Footer a:active,
#Footer a:hover  { color: var(--color-gold); text-decoration: underline; }

/* =============================================
   HEADER AREA
   ============================================= */

#LeftArtwork {
  position: absolute;
  height: 140px;
  width: 166px;
  top: -140px;
  left: 4px;
  background-repeat: no-repeat;
  z-index: 5;
}

#RightArtwork {
  text-align: left;
  position: absolute;
  top: -1px;
  right: 24px;
  width: 132px;
  background-repeat: no-repeat;
  z-index: 90;
}

#RightArtwork #PlayersOnline {
  font-family: Verdana, Arial, sans-serif;
  font-size: 7pt;
  line-height: 8pt;
  text-align: center;
  position: absolute;
  width: 92px;
  bottom: 11px;
  left: 21px;
  color: var(--color-gold);
  border-bottom: 1px solid #010101;
  cursor: pointer;
}

/* =============================================
   LOGINBOX (Right sidebar login)
   ============================================= */

#Loginbox {
  position: relative;
  left: 5px;
  top: 8px;
  width: 100%;
  margin-bottom: 42px;
  background-repeat: no-repeat;
  background-color: var(--bg-panel);
  border: 1px solid var(--border-dark);
}

/* =============================================
   MENU (Left sidebar)
   ============================================= */

#Menu {
  position: relative;
  left: 5px;
  background-repeat: no-repeat;
  background-color: var(--bg-panel);
}

/* Menu category headers */
.MenuButton {
  position: relative;
  height: 32px;
  width: 170px;
  display: block;
  cursor: pointer;
  background: var(--bg-header-grad);
  border: 1px solid var(--border-gold);
  color: var(--color-gold);
  font-family: Georgia, serif;
  font-size: 9pt;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.Button {
  position: relative;
  height: 32px;
  width: 170px;
  visibility: hidden;
  display: block;
}

.Icon {
  position: absolute;
  height: 32px;
  width: 32px;
  top: 0px;
  left: 8px;
}

.Label {
  position: absolute;
  height: 22px;
  width: 116px;
  top: 6px;
  left: 42px;
  color: var(--color-gold);
}

/* Submenus */

.Submenu {
  position: relative;
  margin-left: 5px;
  margin-right: 5px;
  background-color: var(--bg-panel);
  width: 160px;
  border: 1px solid var(--border-dark);
}

.Submenuitem {
  position: relative;
  margin: 0px;
  padding: 0px;
}

.SubmenuitemLabel {
  margin: 0px;
  border-top: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 15px;
  border-bottom: 1px solid var(--border-dark);
  overflow: hidden;
  color: var(--color-text);
}

/* Submenu links */
.Submenu a:link,
.Submenu a:visited,
.Submenu a:focus  { color: var(--color-text); text-decoration: none; }
.Submenu a:active { color: var(--color-gold-bright); text-decoration: none; }
.Submenu a:hover  { color: var(--color-gold-bright); text-decoration: none; }

/* =============================================
   CONTENT AREA
   ============================================= */

.Content .BoxContent {
  padding: 10px;
  background-color: var(--bg-panel);
  color: var(--color-text);
}

* html .Content {
  top: -5px;
}

.Content {
  position: relative;
  top: 0px;
  width: 100%;
}

* html .Content {
  position: relative;
  top: 796px;
  margin: 20px;
  border: 0px dashed #061222;
  border-right-width: 550px;
}

#ContentHelper {
  position: relative;
}

* html #ContentHelper {
  display: inline-block;
  position: relative;
  top: -800px;
  margin: -20px;
  margin-right: -570px;
}

/* Box container */
.Content .Box {
  font-size: 0pt;
  position: relative;
  margin: 5px;
  margin-bottom: 18px;
  color: var(--color-gold);
  border-left: 2px solid var(--border-panel);
  border-right: 2px solid var(--border-panel);
  background-color: var(--bg-panel);
  background-repeat: no-repeat;
  overflow: visible;
}

/* Box content area */
.Content .BoxContent {
  font-family: Verdana, Arial, sans-serif;
  font-size: 9pt;
  background-color: var(--bg-panel);
  color: var(--color-text);
  min-height: 395px;
  height: auto !important;
  height: 415px;
}

* html .Content .Box      { width: 100%; }
* html .Content .BoxContent { width: 100%; }

/* Box header/title row */
.Content th {
  font-family: Georgia, serif;
  font-size: 10pt;
  font-weight: bold;
  text-align: left;
  color: var(--color-gold);
  background: var(--bg-header-grad);
  border-bottom: 1px solid var(--border-gold);
}

/* Box content cells */
.Content .BoxContent td {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10pt;
  color: var(--color-text);
}

/* Content Links */
.Content a {
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
  color: var(--color-gold);
  text-decoration: none;
}
.Content a:hover {
  color: var(--color-gold-bright);
  text-decoration: underline;
}

/* Box title borders */
.Content .Border_1 {
  position: relative;
  height: 6px;
  width: 100%;
  background-repeat: repeat-x;
  background-color: var(--border-gold);
}

.Content .BorderTitleText {
  position: relative;
  height: 24px;
  background: var(--bg-header-grad);
  background-repeat: repeat-x;
}

.Content .Title {
  position: absolute;
  top: 6px;
  left: 5px;
  color: var(--color-gold);
  font-family: Georgia, serif;
  font-size: 10pt;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.Content .Border_2 {
  margin: 4px;
  padding: 0px;
  background-color: var(--border-gold);
}

.Content .Border_3 {
  margin: 1px;
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
}

/* =============================================
   TABLE STYLING
   ============================================= */

tr.trtst td, td.trtst {
  padding: 9px 6px;
  color: var(--color-gold);
}

tr.trst td {
  color: var(--color-text-dim);
  padding: 4px 6px;
}

.TableContainer {
  border: 2px solid var(--border-panel);
  border-radius: 3px;
  position: relative;
  width: 100%;
  font-size: 14px;
  background-color: var(--bg-panel);
}

.TableContainer .Odd {
  color: var(--color-text);
  background-color: var(--bg-panel-alt);
}

.TableContainer .Even {
  background-color: var(--bg-panel);
  color: var(--color-text);
}

/* TABLE HEADER */
.TableContainer .CaptionContainer {
  position: relative;
  font-size: 1pt;
  background-color: var(--bg-header) !important;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid var(--border-gold);
}

.TableContainer .CaptionContainer .CaptionInnerContainer {
  position: relative;
  background: var(--bg-header-grad);
  width: 100%;
  padding-top: 6px;
  padding-bottom: 7px;
}

.TableContainer .CaptionContainer .Text {
  font-size: 10pt;
  font-weight: bold;
  text-align: left;
  color: var(--color-gold);
  padding-left: 10px;
  font-family: Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* TABLE CONTENT */
.TableContentContainer {
  position: relative;
  margin-right: 4px;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  padding: 0px;
}

.TableContent {
  width: 100%;
  border-collapse: collapse;
}

.TableContent td {
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
  color: var(--color-text);
}

/* TABLE INNER LAYOUTS */
.TableContainer .Table1 {
  width: 100%;
  color: var(--color-text-dim);
  background-color: var(--bg-panel);
}

.TableContainer .Table2,
.TableContainer .Table3,
.TableContainer .Table4,
.TableContainer .Table5 {
  width: 100%;
  background-color: var(--bg-panel);
}

/* LABELS */
.LabelV {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
  color: var(--color-gold);
}

.LabelH {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  background-color: var(--bg-label);
}

.LabelH td {
  background-color: var(--bg-label);
  color: var(--color-text-dim);
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border-dark);
}

/* =============================================
   SMALLBOX (Error/Message boxes)
   ============================================= */

.SmallBox .ErrorMessage {
  font-size: 12pt;
  position: relative;
  color: #ff4444;
  text-shadow: 0 0 1px #FF0000, 0 0 3px #FF0000, 0 0 9px #FF0000;
  height: 100%;
  background-color: #1a0f0a;
  padding: 5px;
  padding-left: 43px;
  border: 2px solid #8b0000;
  border-image: linear-gradient(45deg, rgba(255,0,0,0.8), rgba(200,150,0,0.8));
  border-image-slice: 1;
}

.SmallBox .Message {
  font-size: 10pt;
  position: relative;
  background-color: var(--bg-panel);
  color: var(--color-text);
  padding: 10px;
  border: 1px solid var(--border-dark);
}

/* =============================================
   THEMEBOXES (Right sidebar widgets)
   ============================================= */

.Themebox {
  position: relative;
  margin-bottom: 10px;
  top: -4px;
  width: 180px;
  height: 154px;
  background-color: var(--bg-panel);
  border: 1px solid var(--border-panel);
}

#Themeboxes div {
  font-size: 10pt;
  background-repeat: no-repeat;
}

/* =============================================
   ODD/EVEN ROWS - CONTENT
   ============================================= */

.Content .BoxContent .Odd {
  background-color: var(--bg-panel-alt);
  padding: 2px;
  color: var(--color-text);
}

.Content .BoxContent .Even {
  background-color: var(--bg-panel);
  padding: 2px;
  color: var(--color-text);
}

/* =============================================
   NEWS TICKER
   ============================================= */

.Content #NewsTicker .BoxContent {
  padding: 5px;
  min-height: 90px;
  height: auto !important;
  height: 100px;
  background-color: var(--bg-panel);
}

.Content #NewsTicker .NewsTickerText {
  font-size: 9pt;
  position: relative;
  margin-left: 20px;
  color: var(--color-text);
}

.Content #NewsTicker .NewsTickerDate {
  font-size: 7pt;
  position: absolute;
  top: 0px;
  float: left;
  color: var(--color-text-dim);
}

/* =============================================
   NEWS & FEATURED ARTICLE
   ============================================= */

.Content #News .NewsHeadlineBackground,
.Content #FeaturedArticle .NewsHeadlineBackground,
.Content #NewsArchive .NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background: var(--bg-header-grad);
  background-repeat: repeat-x;
  border-left: 1px solid var(--border-gold);
  border-right: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
}

.Content #News .NewsHeadlineDate,
.Content #FeaturedArticle .NewsHeadlineDate,
.Content #NewsArchive .NewsHeadlineDate {
  font-size: 7pt;
  position: absolute;
  top: 9px;
  left: 50px;
  width: 85px;
  color: var(--color-text-dim);
}

.Content #News .NewsHeadlineText,
.Content #FeaturedArticle .NewsHeadlineText,
.Content #NewsArchive .NewsHeadlineText {
  position: relative;
  top: 7px;
  left: 135px;
  font-size: 10pt;
  font-weight: bold;
  color: var(--color-gold);
  font-family: Georgia, serif;
}

/* =============================================
   TEXT UTILITY CLASSES
   ============================================= */

.Content .BoxContent td .white,
.Content .BoxContent .white    { color: #e8d9b8; visibility: visible; }

.Content .BoxContent td .whites,
.Content .BoxContent td .white { color: #e8d9b8; visibility: visible; font-size: 9pt; }

.Content .BoxContent td .green  { color: #6abf5e; }
.Content .BoxContent td .yellow { color: var(--color-gold); }
.Content .BoxContent td .red    { color: #cc3333; }
.Content .BoxContent td .grey   { color: var(--color-text-dim); }

/* =============================================
   FORUM TYPOGRAPHY CLASSES
   ============================================= */

.Content .BoxContent .ff_info,
.Content .BoxContent .ff_infotext {
  font-family: Verdana, Arial, sans-serif;
  font-size: 8pt;
  color: var(--color-text);
  visibility: visible;
  line-height: 12pt;
}

.Content .BoxContent .ff_white,
.Content .ff_white a {
  font-family: Verdana, Arial, sans-serif;
  color: #e8d9b8;
  visibility: visible;
  font-size: 7pt;
  font-weight: bold;
}

.Content .BoxContent .ff_red {
  color: #cc3333;
  font-size: 8pt;
  font-weight: bold;
}

.Content .BoxContent .ff_whitelarge {
  color: #e8d9b8;
  font-size: 9pt;
  font-weight: bold;
}

.Content .BoxContent .ff_smallinfo {
  font-size: 7pt;
  color: var(--color-text-dim);
}

.Content .BoxContent .ff_large {
  font-size: 12pt;
  color: var(--color-gold);
}

.Content .BoxContent .ff_pagetext {
  font-size: 9pt;
  color: var(--color-text);
  line-height: 13pt;
}

.Content .BoxContent .ff_pagetextgrey {
  font-size: 9pt;
  color: var(--color-text-dim);
  line-height: 13pt;
}

.Content .BoxContent .ff_pagetextred {
  font-size: 9pt;
  color: #cc3333;
  line-height: 13pt;
}

.Content .BoxContent .ff_correct {
  font-size: 11pt;
  color: #ff4444;
  font-weight: bold;
}

/* =============================================
   BUTTONS
   ============================================= */

.BigButton {
  position: relative;
  width: 135px;
  height: 25px;
  z-index: 10;
  background: var(--bg-header-grad);
  border: 0px solid var(--border-gold);
  color: var(--color-gold);
  cursor: pointer;
}

.TopButtonContainer {
  position: relative;
  right: 4px;
  top: 4px;
  z-index: 60;
}

.TopButtonContainer .TopButton {
  position: absolute;
  right: 0px;
  z-index: 55;
  transition: all 0.3s ease;
  animation: float 2s infinite ease-in-out;
}

.TopButtonContainer .TopButton:hover {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0px); }
}

/* =============================================
   FORM FIELDS
   ============================================= */

.FormFieldError {
  font-size: 8pt;
  color: #cc3333;
}

input[name="info_rlname"],
input[name="info_location"],
input[name="new_email"],
input[name="name"],
input[name="reg_name"],
input[name="reg_email"],
input[name="reg_code"],

input[type="text"],
input[type="password"] {
  background-color: #0e180b;
  border: 1px solid var(--border-panel);
  color: var(--color-text);
  padding: 3px 5px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 9pt;
}

input[type="text"]:focus,
input[type="password"]:focus {
  border-color: var(--border-gold);
  outline: none;
  background-color: #121e0e;
}