/*
 * Daily Junction .mobi — CSS Mobile Profile 1.0 portal theme.
 *
 * dotMobi / mobileOK-compliant, but styled like a real 2007-era portal
 * (Yahoo Mobile / Google Mobile / BBC WAP) rather than a bare XHTML MP
 * page — chunky finger-friendly rows, brand-colour header bar, coloured
 * section pills, alternating row backgrounds, subtle borders. Every
 * declaration stays in CSS-MP 1.0: no floats, no positioning, no vendor
 * prefixes, no CSS3 selectors, no media queries.
 *
 * Delivered gzip-compressed by the box; target ~1.5 KB over the wire.
 */

/* -------- Reset -------- */
*                  { margin: 0; padding: 0; }
body               { font-family: sans-serif; font-size: small; color: #262626; background-color: #f4f6fa; line-height: 1.4; }
img                { border: 0; vertical-align: middle; }
a                  { color: #0052d9; }
a:visited          { color: #663399; }
a:active           { color: #e8401f; }
h1, h2, h3         { font-weight: bold; }

/* -------- Brand header -------- */
.hdr {
  background-color: #0052d9;
  color: #ffffff;
  padding: 0.3em 0.5em;
  border-bottom: 3px solid #e8401f;
}
.hdr a           { color: #ffffff; text-decoration: none; }
.hdr img         { margin-right: 0.3em; }
.hdr h1          { font-size: medium; display: inline; }
.hdr .tag        { color: #d5e4f5; font-size: small; margin-left: 0.4em; }

/* -------- Section rail (horizontal chips) -------- */
.rail {
  background-color: #ffffff;
  border-bottom: 1px solid #dde5ef;
  padding: 0.35em 0.4em;
  overflow: hidden;
  font-size: small;
}
.rail a {
  display: inline-block;
  padding: 0.25em 0.55em;
  margin: 0 0.15em 0.1em 0;
  background-color: #eef3fb;
  color: #0052d9;
  text-decoration: none;
  border: 1px solid #cddaee;
}

/* KaiOS / app install pointer */
.kai-pointer {
  background-color: #0F7A3C;
  color: #ffffff;
  padding: 0.35em 0.5em;
  font-size: small;
}
.kai-pointer a   { color: #ffffff; text-decoration: none; }
.kai-pointer strong { font-weight: bold; }

/* -------- Portal grid — clickable large rows for feature-phone D-pad -------- */
.portal {
  background-color: #ffffff;
  border-bottom: 1px solid #dde5ef;
  padding: 0;
}
.portal a.tile {
  display: block;
  padding: 0.55em 0.5em;
  color: #262626;
  text-decoration: none;
  border-bottom: 1px solid #eef1f5;
  font-size: medium;
}
.portal a.tile b { color: #0052d9; }
.portal a.tile em { font-style: normal; color: #666666; font-size: small; }

/* -------- Section headings inside the body -------- */
h2 {
  color: #ffffff;
  background-color: #0052d9;
  font-size: small;
  padding: 0.3em 0.5em;
  margin: 0.6em 0 0 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
h3 {
  color: #0052d9;
  font-size: small;
  padding: 0.4em 0.5em 0.1em;
  margin: 0;
}
p  { padding: 0.35em 0.5em; }

/* -------- Article headline rows -------- */
.hd {
  background-color: #ffffff;
  border-bottom: 1px solid #eef1f5;
  padding: 0.5em 0.5em;
}
.hd img {
  margin-right: 0.5em;
}
.hd p    { padding: 0.15em 0; }
.st a    { color: #0052d9; text-decoration: none; font-weight: bold; }
.st a:visited { color: #663399; }
.dt      { color: #7a8898; font-size: x-small; }
.ex      { color: #444444; font-size: small; }

/* Category pill inside a headline meta line */
.tag {
  background-color: #0052d9;
  color: #ffffff;
  padding: 0.05em 0.35em;
  font-size: x-small;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tag:visited { color: #ffffff; }

/* -------- List navigation -------- */
ul, ol   { list-style: none; padding: 0; margin: 0; background-color: #ffffff; }
ul li, ol li {
  border-bottom: 1px solid #eef1f5;
  padding: 0.45em 0.5em;
}
ul li a  { color: #0052d9; text-decoration: none; }
ol       { counter-reset: item; }
ol li    { position: static; }

/* -------- Pagination bar -------- */
.pag {
  background-color: #eef3fb;
  padding: 0.5em;
  font-size: small;
  text-align: center;
  border-top: 1px solid #dde5ef;
  border-bottom: 1px solid #dde5ef;
}
.pag a   { color: #0052d9; text-decoration: none; font-weight: bold; }

/* -------- Article body -------- */
.article    { background-color: #ffffff; padding: 0.5em 0.5em 0.75em; }
.article h2 { background-color: transparent; color: #0052d9; padding: 0.6em 0 0.25em; text-transform: none; letter-spacing: 0; font-size: medium; }
.article h3 { padding: 0.5em 0 0.2em; }
.article p  { padding: 0 0 0.5em; }
.article ul { background-color: transparent; padding: 0 0 0.5em 1.2em; }
.article ul li { border-bottom: 0; padding: 0.15em 0; list-style: disc inside; }
.article ol { background-color: transparent; padding: 0 0 0.5em 1.2em; }
.article ol li { border-bottom: 0; padding: 0.15em 0; list-style: decimal inside; }
.article blockquote { background-color: #f4f6fa; border-left: 3px solid #0052d9; padding: 0.4em 0.6em; margin: 0.5em 0; }
.article pre       { background-color: #f4f6fa; padding: 0.4em 0.6em; font-size: x-small; }

/* -------- Data tables -------- */
table          { background-color: #ffffff; border-top: 1px solid #dde5ef; margin: 0.4em 0; font-size: small; }
th, td         { padding: 0.3em 0.5em; border-bottom: 1px solid #eef1f5; text-align: left; }
th             { background-color: #eef3fb; color: #0052d9; font-weight: bold; }
tr.odd td      { background-color: #f9fbfd; }

/* -------- EPG / TV listings -------- */
.epg-row {
  border-bottom: 1px solid #eef1f5;
  padding: 0.5em 0.5em;
  background-color: #ffffff;
}
.epg-row .now  { color: #e8401f; font-weight: bold; font-size: x-small; text-transform: uppercase; }
.epg-row .next { color: #7a8898; font-size: x-small; }
.epg-row b     { color: #0052d9; }

/* -------- Weather / horoscope / calc cards -------- */
.card {
  background-color: #ffffff;
  padding: 0.5em 0.5em;
  margin: 0 0 0.4em 0;
  border-bottom: 1px solid #eef1f5;
}
.card b        { color: #0052d9; }
.card .k       { color: #7a8898; font-size: x-small; text-transform: uppercase; }
.card .v       { font-size: large; font-weight: bold; }

/* -------- Forms -------- */
form           { padding: 0.5em; background-color: #ffffff; border-bottom: 1px solid #eef1f5; }
label          { display: block; color: #444444; font-size: small; padding: 0 0 0.2em; }
input, select  { font-size: medium; border: 1px solid #cddaee; padding: 0.3em; background-color: #ffffff; color: #262626; }
input[type="submit"], .sub { background-color: #0052d9; color: #ffffff; border: 0; font-weight: bold; padding: 0.35em 0.9em; }

/* -------- In-page ad row (300x50 static WAP banner) -------- */
.inline-ad{text-align:center;padding:0.4em 0.5em 0.5em;background-color:#fff;border-top:1px solid #eef1f5}
.inline-ad .ad-lbl{display:block;color:#999;font-size:x-small;text-transform:uppercase;letter-spacing:0.1em;padding-bottom:0.2em}
.inline-ad img{max-width:100%;height:auto;border:1px solid #e4e9f1}

/* -------- Interstitial (full-page ad between clicks) -------- */
.inter-bar{background-color:#eee;color:#666;font-size:x-small;text-transform:uppercase;letter-spacing:0.1em;text-align:center;padding:0.3em 0.5em;border-bottom:1px solid #ddd}
.inter-continue{text-align:center;padding:0.6em 0.5em}
.inter-continue a{display:inline-block;background-color:#0052d9;color:#fff;font-weight:bold;text-decoration:none;padding:0.5em 1.4em}
.inter-continue .dt{padding:0.3em 0 0}
.inter-house{text-align:center;padding:0.5em;background-color:#fff}
.inter-house img{max-width:100%;height:auto}
.inter-slot{text-align:center;padding:0.4em 0.5em;background-color:#fff}

/* -------- Footer -------- */
.foot {
  background-color: #ffffff;
  border-top: 3px solid #e8401f;
  padding: 0.6em 0.5em;
  font-size: x-small;
  color: #7a8898;
  text-align: center;
}
.foot a  { color: #0052d9; text-decoration: none; }
.foot p  { padding: 0.3em 0 0 0; }