/* Shared style-main.css for:
   - turner250.com
   - lumby.fr
   - lumby-photos.com
   - lumby.ch (future-ready)

   Consolidated baseline:
   - predictable, mobile-safe defaults
   - retains legacy Turner header bar (#outer/#col*)
   - retains navigation arrows (#navigation .navArrow)
   - retains image grid helpers (.image-container/.image-wrapper)
   - retains placement-site blocks (.card/.meta/.downloads)
*/

/* ---------- Colour system (used by .textRed etc.) ---------- */
:root{
  --red:#ff0000;
  --dark-red:#8b0000;
  --crimson:#dc143c;
  --orange:#ffa500;
  --dark-orange:#ff8c00;
  --yellow:#ffea00;
  --green:#00ff00;
  --dark-green:#006400;
  --lawn-green:#7cfc00;
  --light-sea-green:#20b2aa;
  --chartreuse:#7fff00;
  --blue:#0000ff;
  --medium-blue:#0000cd;
  --skyblue:#87ceeb;
  --deepskyblue:#00bfff;
  --slateblue:#6a5acd;
  --lightblue:#add8e6;
  --cadetblue:#5f9ea0;
  --med-blue:#4169e1;
  --indigo:#4b0082;
  --olive:#808000;
  --rebeccapurple:#663399;
  --violet:#ee82ee;
  --blueviolet:#8a2be2;
  --darkviolet:#9400d3;
}

html, body{
  margin:0;
  padding:0;
}

body{
  background:#000;
  color:#fff;
  overflow-x:hidden;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  line-height:1.35;
}

/* Links */
a{ color: hotpink; }
a:hover{ text-decoration: underline; }
a img{ border: none; } /* legacy safety */

/* ---------- Core layout wrapper (common to all sites) ---------- */
#overallContent{
  max-width:750px;          /* your current “standard” working width */
  margin:0 auto;
  padding:10px 14px 30px 14px;
}

/* Headings */
h1,h2,h3{
  color:#fff;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-align:center;
  margin:12px 0;
}
h1{ font-size:1.5em; }
h2{ font-size:1.2em; }
h3{ font-size:1em; }

/* Paragraphs */
p{
  text-align:center;
  font-size:0.875em;
  margin:10px 0;
}

/* Historic “p.b” used on some pages */
p.b{
  text-align:justify;
  font-style:italic;
  font-size:0.78em;
}

/* Text helpers */
.textJustify{ text-align:justify; }
.textRight{ text-align:right; }
.textCenter{ text-align:center; }
.italicText{ font-style:italic; }
.textLarger{ font-size:18px; }
.textSmaller{ font-size:0.7em; }

/* ---------- Images (predictable by default; opt-in floats) ---------- */
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Use this class when you truly want a floated image */
.floatLeft{
  float:left;
  margin:0 12px 12px 0;
}

/* Common “centre image” behaviour */
.center{
  float:none;
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/* Legacy class name used widely */
.rubber{
  height:auto;
  max-width:100%;
}

/* Full-screen image modifier (legacy utility) */
.full-screen-width{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

/* ---------- Reusable blocks (placement / simple “card” layout) ---------- */
.card{
  background:#111;
  border:1px solid #333;
  border-radius:8px;
  padding:14px;
  margin:14px 0;
}
.meta{
  color:#cfcfcf;
  font-size:0.9em;
}
.downloads{
  list-style:none;
  padding:0;
  margin:10px 0;
  text-align:center;
}
.downloads li{ margin:6px 0; }

/* ---------- Footer (standardised: no grey box) ---------- */
#footerContent{
  margin-top:18px;
  padding-top:10px;
  border-top:1px solid #333;
  color:#cfcfcf;
  text-align:center;
  font-size:0.85em;
  background:transparent;
  clear:both;
}

/* ---------- Navigation arrows (Turner & others) ---------- */
#navigation{
  text-align:center;
  margin:10px auto 0 auto;
}
#navigation .navArrow{
  display:inline-block;
  vertical-align:middle;
  margin:0 10px;
}
#navigation .navArrow img{
  display:inline-block;
}

/* Optional alternative nav block (some pages may use .pageNav) */
.pageNav{
  text-align:center;
  margin:20px auto;
}
.pageNav .navArrow{
  display:inline-block;
  margin:0 10px;
  vertical-align:middle;
}

/* ---------- Turner coloured header bar (keep as-is, but tidy) ---------- */
#outer{
  width:100%;
  height:50px;
  background:black;
}
#col1, #col2, #col3, #col4, #col5, #col6{
  float:left;
  width:16.66%;
  height:50px;
}

/* Turner palette defaults */
#col1{ background:#000000; }
#col2{ background:#7e5109; }
#col3{ background:#0000ff; }
#col4{ background:#6e2c00; }
#col5{ background:#8e44ad; }
#col6{ background:#16a085; }

.clearer{
  height:1px;
  overflow:hidden;
  clear:both;
  margin-top:-1px;
}

/* Title bars used by Turner pages */
.title2, .title3, .title4, .title5, .title6{
  color:#fff;
  padding-top:13px;
  padding-bottom:13px;
  text-align:center;
}
.title2{ background:#7e5109; }
.title3{ background:#0000ff; }
.title4{ background:#6e2c00; }
.title5{ background:#8e44ad; }
.title6{ background:#16a085; }

/* ---------- Turner image grid helpers ---------- */
.image-container{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.image-wrapper{
  margin:10px;
  flex: 1 1 calc(50% - 20px);
  text-align:center;
}
.image-wrapper img{
  max-width:100%;
  height:auto;
}

/* ---------- Colour modifier classes (shared across all sites) ---------- */
.textRed { color: var(--red); }
.textRedDark { color: var(--dark-red); }
.textRedCrimson { color: var(--crimson); }
.textOrange { color: var(--orange); }
.textOrangeDark { color: var(--dark-orange); }
.textYellow { color: var(--yellow); }
.textGreen { color: var(--green); }
.textGreenDark { color: var(--dark-green); }
.textGreenLawn { color: var(--lawn-green); }
.textGreenLight { color: var(--light-sea-green); }
.textGreenChartreuse { color: var(--chartreuse); }
.textBlue { color: var(--blue); }
.textBlueMedium { color: var(--medium-blue); }
.textBlueSky { color: var(--skyblue); }
.textBlueSkyDeep { color: var(--deepskyblue); }
.textBlueSlate { color: var(--slateblue); }
.textBlueLight { color: var(--lightblue); }
.textBlueCadet { color: var(--cadetblue); }
.textBlueMed { color: var(--med-blue); }
.textIndigo { color: var(--indigo); }
.textOlive { color: var(--olive); }
.textPurpleR { color: var(--rebeccapurple); }
.textViolet { color: var(--violet); }
.textVioletBlue { color: var(--blueviolet); }
.textVioletDark { color: var(--darkviolet); }
.textShadow { text-shadow:1px 1px 3px white; }
.textBackBlueViolet { background-color: var(--blueviolet); }