/* =========================
   Base / Reset (modern)
   ========================= */

:root {
  --bg: #ffffff;
  --fg: #000000;

  --red: #c00000;
  --darkred: #800000;
  --black: #000000;

  --link: #000000;
  --link-hover: #800000;

  --text: Arial, Helvetica, sans-serif;
  --serif: "Times New Roman", Times, serif;

  /* 20pt ~ 26.7px -> käytetään järkevämpi base */
  --base-size: 18px;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--text);
  font-size: var(--base-size);
  line-height: 1.35;
}

* {
  box-sizing: border-box;
}

td, div, h3 {
  font-family: var(--text);
  font-size: 1rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================
   Headings
   ========================= */

h1, h4 {
  margin: 0;
  font-family: var(--text);
  font-size: 1.5rem;
  font-weight: 700;
}

h2 {
  font-family: var(--text);
  margin: 0;
  padding: 1px 5px 0 5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #404040;
  font-size: 1.5rem;
}

h3 {
  font-family: var(--text);
  margin: 1px 5px 0 5px;
  padding: 0;
  font-weight: 400;
  font-size: 1rem;
}

/* menu.css */


.menu-item a {
  width: 200px;
  display: flex;
  text-decoration: none;
  color: #ffffff;
  padding: 10px 16px;
  transition: all 0.25s ease;
  border-radius: 6px;
}

/* Hover-efekti */
.menu-item a:hover {
  display: flex;
  background: linear-gradient(90deg, #b30000, #ff3333);
  color: #ffffff;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.menu-item h2 {
  display: flex;
  margin: 0;
  padding: 6px 10px;
  box-sizing: border-box;
  color: #800000;
  transition: all 0.25s ease;
  position: relative;
}

/* Hover */
.menu-item h2:hover {
  display: flex;
  background: #ffffff;
  color: #b30000;
  cursor: pointer;
}

/* Animoitu alaviiva */
.menu-item h2::after {
  display: flex;
  content: "";
  position: absolute;
  left: 10px;
  bottom: 2px;
  width: 0;
  height: 2px;
  background: #b30000;
  transition: width 0.25s ease;
}

.menu-item h2:hover::after {
  width: calc(100% - 20px);
}

/* =========================
   ALKUPERÄINEN VÄRITEEMA
   ========================= */

/* Major section header */
.menu-item-major {
  background: #800000;
}

/* Selected item */
.menu-item-selected {
  background: #000000;
}

/* Normal item */
.menu-item-normal {
  background: #000000;
}

/* tekstivärit kuten vanhassa */
.menu-item-major h2 {
  color: #ffffff;
}

.menu-item-selected h2 {
  color: #ffff00;
}

.menu-item-normal h2 {
  color: #ffffff;
}

/* separator (vastaa vanhaa table height=8 bgcolor=#800000) */
.menu-separator {
  width: 100%;
  height: 8px;
  background: #800000;
}

/* ingressi ja newsmainarticle */
.ingressi {
  font-family: var(--text);
  margin: 0;
  padding: 1px 5px 0 5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000040;
  font-size: 1.5rem;
}

.newsmainarticle {
  margin: 0;
  font-family: var(--text);
  font-size: 1.5rem;
  font-weight: 700;
}

/* =========================
   Links (modern)
   ========================= */

a {
  color: var(--link);
  text-decoration: underline;
  font-weight: 400;
}

a:visited {
  color: var(--link);
}

a:hover {
  color: var(--link-hover);
  text-decoration: none;
}

a:active {
  color: var(--link);
}

/* RSS linkit */
a.rss_item_link:link { color: #000; text-decoration: underline; }
a.rss_item_link:visited { color: #808080; text-decoration: underline; }
a.rss_item_link:hover { color: #ff0000; text-decoration: none; }
a.rss_item_link:active { color: #ff0000; text-decoration: underline; }

/* =========================
   Images / Icons
   ========================= */

.bulletin,
.bulletin1 {
  vertical-align: middle;
}

/* ennen: filter alpha / moz-opacity -> modern */
.bulletin1 {
  opacity: 0.75;
}

.goldmedalimg {
  vertical-align: middle;
  width: 32px;
  height: 32px;
  margin: 4px;
}

/* rikkinäinen extra-} korjattu */
.thickimage_link {
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
}

/* =========================
   QBAR links
   ========================= */

a.qbar,
a.qbar_major,
a.mainos,
a.hannu_qbar {
  text-decoration: none;
  font-weight: 400;
}

/* qbar */
a.qbar:link,
a.qbar:visited,
a.qbar:active {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  color: #808080;
  font-size: 0.75rem; /* 8pt ~ 10.7px */
}

a.qbar:hover {
  background: #ff0000;
  color: #000;
  text-decoration: underline;
}

/* qbar_major */
a.qbar_major:link,
a.qbar_major:visited,
a.qbar_major:active {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  text-transform: capitalize;
  color: #ff0000;
  font-size: 1rem; /* 12pt ~ 16px */
}

a.qbar_major:hover {
  background: #ff0000;
  color: #000;
  text-decoration: underline;
}

/* mainos */
a.mainos:link,
a.mainos:visited,
a.mainos:active {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  color: #ff0000;
  font-size: 1rem;
  text-decoration: underline;
}

a.mainos:hover {
  color: orange;
}

/* hannu_qbar (pyöristetyt kulmat: modern) */
a.hannu_qbar:link,
a.hannu_qbar:visited,
a.hannu_qbar:active {
  background: #c0c0ff;
  font-family: var(--text);
  margin: 1px;
  padding: 0;
  border: 4px solid #a0a0c0;
  color: yellow;
  font-size: 1.1rem; /* ~14pt */
  border-radius: 16px;
}

a.hannu_qbar:hover {
  background: #ff0000;
  color: #000;
}

/* =========================
   Text blocks / Headlines
   ========================= */

.blackbg { background: #000; color: #fff; }

.ICAP {
  font-family: var(--text);
  font-size: 0.75rem;
  text-decoration: none;
}

.OTSIKKO {
  font-family: var(--text);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.section_headline {
  font-family: var(--text);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--red);
}

.major_headline {
  margin: 4px;
  padding: 8px;
  text-transform: capitalize;
  font-family: var(--text);
  font-size: 1rem;
  font-weight: 700;
  color: #400000;
}

.imgdes {
  font-family: var(--serif);
  font-size: 1rem;
  color: #400000;
}

.uutissahkeet {
  font-family: var(--text);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

/* =========================
   Windows / Panels (cleaner)
   ========================= */

.portal_logo_area {
  background-color: #000;
  background-repeat: no-repeat;
  color: #ff0000;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
}

/* Hidden window classes: poistetaan turhat backgroundColor rivit */
.hidden_window,
.plain_hidden_window,
.hidden {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
}

/* “visible menu” */
.menu1 {
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
}

/* =========================
   Legacy opacity helpers (modern)
   ========================= */

.opac100 { opacity: 0.99; }
.opac75  { opacity: 0.75; }
.opac50  { opacity: 0.50; }
.opac25  { opacity: 0.25; }
.opac0   { opacity: 0.00; }

/* =========================
   Form controls
   ========================= */

.formx,
.formx2,
.formx3 {
  font-family: var(--text);
  margin: 0;
  padding: 1px 5px 0 5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #404040;
  font-size: 1rem;
}

.formx3 { width: 540px; }

.edit4,
.edit5 {
  background-color: #606060;
  border: 0;
  color: #ffffff;
  font-size: 0.75rem;
  font-family: var(--serif);
}

.buttonx  { background-color: #0000ff; color: #fff; }
.fooruminappi { background-color: var(--red); color: #fff; }
.buttonx2 { background-color: #202020; color: #ffff00; }
.buttonx3 { background-color: #ff0000; color: #ffff00; }
.buttonx4 { background-color: var(--darkred); border: 0; color: #fff; font-size: 0.75rem; font-family: var(--serif); }

/* =========================
   head2 classes (fix duplicates)
   ========================= */

.head2_selected,
.head2_selected_major,
.head2 {
  font-family: var(--text);
  padding: 1px 5px 0 5px;
  font-weight: 700;

  font-size: 14px;
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 12px 0;
}

.head2_selected { color: #404040; }
.head2_selected_major { color: #f0f0f0; }
.head2 { color: #f0f0f0; }

/* =========================
   ItemBox classes (keep look)
   ========================= */

.SelectedItemBox {
  background-color: #ffff80;
}

.ItemBox {
  background-color: #000;
}

.MajorItemBox {
  background-color: #a00000;
}

/* (jos käytät näitä div-menussa, voit jättää tai poistaa) */

/* --- VUNET AD CARD (RED / WHITE THEME) --- */

.ad-card {
    width: 100%;
    cursor: pointer;
    background: #ffffff;
    border: 2px solid #b30000;
    border-radius: 8px;
    padding: 16px;
    box-sizing: border-box;

    transition: 
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background 0.12s ease;
}

/* Hover effect */
.ad-card:hover {
    background: #fff5f5;
    box-shadow: 0 6px 18px rgba(179,0,0,0.25);
    transform: translateY(-2px);
}

/* Title */
.ad-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #b30000;
    margin-bottom: 8px;
}

/* Content */
.ad-card-content {
    font-size: 15px;
    line-height: 1.5;
    color: #400000;
}

/* Optional subtle separator */
.ad-card-content::before {
    content: "";
    display: block;
    height: 2px;
    width: 40px;
    background: #b30000;
    margin-bottom: 10px;
    opacity: 0.3;
}

/* css/vunet-hl.css
   ----------------------------------------------------------------------------
   Värikäs, moderni “headline row” -tyyli + menu-item hover.
   Sopii sekä listauksiin että etusivun nostoihin.
   ---------------------------------------------------------------------------- */

.hl-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 8px;
  margin: 8px 0;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(245,247,255,0.85));
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

.hl-media {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 44px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.7);
}

.hl-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  display: block;
}

.hl-body {
  flex: 1;
  min-width: 0;
}

.hl-title {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.25;
  text-decoration: none;
  color: #111;
  word-break: break-word;
}

/* Menu-item -henkinen hover (pyysit “kuten CSS/menu-item”) */
a.menu-item {
  padding: 2px 6px;
  border-radius: 8px;
  transition: background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

a.menu-item:hover {
  background-color: rgba(255, 210, 77, 0.25); /* lämmin “kulta” */
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

a.menu-item:active {
  transform: translateY(0px);
}

.hl-meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: rgba(0,0,0,0.62);
}

.hl-sep {
  opacity: 0.55;
}

.hl-source {
  color: rgba(0,0,0,0.60);
}

.hl-date {
  color: rgba(0,0,0,0.58);
}

.hl-comments {
  color: rgba(0,0,0,0.58);
}

.hl-badge {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(70, 180, 120, 0.18);
  color: rgba(0, 120, 70, 0.95);
  border: 1px solid rgba(70, 180, 120, 0.25);
}

.hl-heat {
  margin-left: 2px;
  font-size: 13px;
}

/* logview.css (merge-safe: all selectors are .lv-*) */

.lv-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px;
}

.lv-head{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 16px;
  margin-bottom: 10px;
}

.lv-title{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
}

.lv-sub{
  margin: 6px 0 0 0;
  font-size: 13px;
  opacity: .75;
}

.lv-form{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 12px;
  margin: 10px 0 12px 0;
}

.lv-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}

.lv-field{
  display:flex;
  flex-direction: column;
  gap: 6px;
  grid-column: span 3;
}

.lv-field span{
  font-size: 12px;
  opacity: .8;
}

.lv-field input,
.lv-field select{
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  border-radius: 12px;
  padding: 10px 10px;
  font-size: 14px;
}

.lv-checks{
  grid-column: span 3;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 18px;
}

.lv-check{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 13px;
}

.lv-actions{
  grid-column: span 3;
  display:flex;
  gap: 10px;
  align-items:flex-end;
  justify-content:flex-end;
}

.lv-btn{
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
}

.lv-btn:hover{
  background: rgba(0,0,0,.04);
}

.lv-btn-ghost{
  background: transparent;
}

.lv-toolbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0;
}

.lv-status{
  font-size: 12px;
  opacity: .8;
}

.lv-tools{
  display:flex;
  gap: 10px;
  align-items:center;
}

.lv-quick{
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  border-radius: 12px;
  padding: 10px 10px;
  font-size: 13px;
  width: min(420px, 52vw);
}

.lv-table{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  overflow: hidden;
}

.lv-row{
  display:grid;
  grid-template-columns: 170px 320px 1fr 360px;
  gap: 0;
  border-top: 1px solid rgba(0,0,0,.08);
}

.lv-row:first-child{
  border-top: none;
}

.lv-row-head{
  background: rgba(0,0,0,.06);
  font-weight: 800;
}

.lv-cell{
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
}

.lv-time{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lv-host{
  font-weight: 800;
}

.lv-host-dim{
  font-weight: 400;
  opacity: .75;
}

.lv-ua{
  margin-top: 4px;
  font-size: 12px;
  opacity: .75;
  word-break: break-word;
}

.lv-link{
  text-decoration: none;
  font-weight: 800;
}

.lv-link:hover{
  text-decoration: underline;
}

.lv-link-dim{
  font-weight: 600;
  opacity: .85;
}

.lv-q{
  font-size: 12px;
  opacity: .85;
  margin-bottom: 6px;
}

.lv-old{
  background: rgba(0,0,0,.02);
}

@media (max-width: 1020px){
  .lv-row{
    grid-template-columns: 160px 280px 1fr 300px;
  }
}

@media (max-width: 860px){
  .lv-grid{ grid-template-columns: repeat(6, 1fr); }
  .lv-field{ grid-column: span 3; }
  .lv-actions{ grid-column: span 6; justify-content:flex-start; }

  .lv-row{
    grid-template-columns: 1fr;
  }
  .lv-row-head{
    display:none;
  }
  .lv-cell{
    border-top: 1px dashed rgba(0,0,0,.08);
  }
  .lv-cell:first-child{
    border-top: none;
  }
  .lv-time{ font-weight: 800; }
}

/* Vunet.net – Simple News Tags */

.tag {
  display: inline-block;
  margin: 4px 6px 4px 0;
  padding: 4px 10px;
  font-size: 0.9rem;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #c00000, #ffd700);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.2);
  transition: all 0.15s ease-in-out;
}

.tag:hover {
  background: linear-gradient(135deg, #ffd700, #00cc66);
  color: #000;
  transform: translateY(-1px);
}

.tag.active {
  background: #000;
  color: #ffd700;
  border-color: #ffd700;
}

.tag.visited {
  background: #000;
  color: #ffd700;
  border-color: #ffd700;
}

/* ==========================================================================
   KULTAKAIVOS.INFO 2012 THEME (Vunet layout reuse)
   - Keeps the old-school black header, grey outer background, and tight tables.
   - Drop-in: used by goldindex.html (Kultakaivos frontpage template)
   ========================================================================== */

/* Outer page background (match body bgcolor=#C0C0C0 in the HTML) */
html, body {
  background: #C0C0C0 !important;
  color: #000;
}

/* Centered “page” like in the 2012 screenshot */
.kk-wrap{
  max-width: 1050px;
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}

/* Tighten base typography a little (2012 feel) */
:root{
  --base-size: 16px;
  --link: #000000;
  --link-hover: #c00000;
}

/* -------------------------
   Quickbar (top black bar)
   ------------------------- */
.gold_qbar_major,
a.gold_qbar_major:link,
a.gold_qbar_major:visited,
a.gold_qbar_major:active{
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  color: #ffd700;
  font-size: 1.1rem;
  text-decoration: none;
  letter-spacing: 0.5px;
}

a.gold_qbar_major:hover{
  color: #ffffff;
  text-decoration: underline;
}

a.qbar:link,
a.qbar:visited,
a.qbar:active{
  font-family: Arial, Helvetica, sans-serif;
  color: #d0d0d0;
  font-size: 0.8rem;
  text-decoration: none;
}

a.qbar:hover{
  background: transparent;
  color: #ffff00;
  text-decoration: underline;
}

/* Search form bits in the black bar */
.edit5{
  background: #303030;
  color: #fff;
  border: 1px solid #000;
  padding: 2px 4px;
}

.formx{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: none;
  font-weight: 400;
  color: #fff;
}

/* -------------------------
   Logo area (gold header)
   ------------------------- */
.gold_portal_logo_area{
  background-color: #000;
  background-repeat: repeat-x;
  color: #ff0000;
}

/* Make the “gold borders” feel crisp if images are missing */
table[background*="gold_borders"] td{
  background: #800000;
}

/* -------------------------
   Left menu column (2012-ish)
   ------------------------- */
td[background*="fade2b"],
td[background*="fade2b.gif"]{
  background: linear-gradient(#ffffc0, #ffffff) !important;
}

td[background*="fade2b"] img,
td[background*="fade2b.gif"] img{
  display:block;
}

/* Optional: links inside the menu column */
.kk-menu a{
  display:block;
  padding: 6px 10px;
  color:#000;
  text-decoration:none;
  font-weight:700;
}

.kk-menu a:hover{
  background: linear-gradient(90deg, #000000, #404040);
  color:#ffff00;
}

/* -------------------------
   Content area
   ------------------------- */
.kk-content{
  padding: 10px 12px;
}