/*
 * Look of the 2016 anchor of janeyclewer.com: a FrontPage/Dreamweaver site laid out with tables and
 * <font> tags (no stylesheet of its own). The same metrics are written here as CSS: blue page
 * #3366CC, grey text and links #CCCCCC, Arial, a hand-written name 300 x 111 at the top, a left menu
 * column of 164 px, the content column with 12 px padding, headings 18 px bold white in capitals.
 * Fixes that the anchor did not have (contrast, phones) live in polish.css, loaded after this file.
 */
html { background: #3366cc; }
body {
  margin: 8px;
  background: #3366cc;
  color: #cccccc;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: normal;
}
a { color: #cccccc; }
a:visited { color: #ffffff; }
a:active { color: #cccccc; }
img { border: 0; }
table { border-collapse: separate; border-spacing: 0; }
td { padding: 0; vertical-align: top; }
.arial, .main, .side, .foot { font-family: Arial, Helvetica, sans-serif; }

/* header: table 837 wide, the name centered in it */
table.head { width: 837px; }
.head td { text-align: center; }
.head p { margin: 0 0 16px; }
.logo { display: inline-block; line-height: 0; }
.logo img { width: 300px; height: 111px; }
.menu-btn { display: none; }

/* two columns: menu 164 px, content with padding 12 */
table.frame { width: 640px; }
td.side { width: 164px; }
#menu { width: 164px; }
td.side p { margin: 16px 0; font-size: 13px; font-weight: bold; }
td.side p:first-child { margin-top: 0; }
td.main { padding: 12px; }
.center { text-align: center; }
.crumbs { margin: 0 0 6px; font-size: 11px; text-align: center; }
.crumbs a, .crumbs span { color: inherit; }
.crumbs i { font-style: normal; padding: 0 4px; }
h1 { margin: 16px 0; font-size: 18px; font-weight: bold; color: #ffffff; text-transform: uppercase; }
h2 { margin: 16px 0; font-size: 18px; font-weight: bold; color: #ffffff; }
p { margin: 16px 0; }
.left { text-align: left; }
.small { font-size: 13px; }
.tiny { font-size: 10px; }
.white { color: #ffffff; }

/* album pages */
.cover-big { display: block; margin: 0 auto; border: 1px solid #cccccc; }
.intro { font-style: italic; text-align: center; }
.tagline { font-style: italic; text-align: center; }
.listen { margin: 20px 0 8px; font-size: 13px; font-weight: bold; }
table.info { width: 100%; border-spacing: 2px; text-align: left; }
.info td { padding: 2px; }
.info .k { width: 12%; white-space: nowrap; font-weight: bold; padding-right: 8px; }
.info .t { font-size: 18px; font-weight: bold; font-style: italic; }
.info .gap td { height: 8px; }
.next { text-align: right; }
.notes { text-align: left; }

/* music page: sleeves 200 x 200 three in a row */
table.cds { margin: 0 auto; border-spacing: 2px; }
.cds td { width: 200px; padding: 2px; text-align: center; }
.cds p { margin: 16px 0; }
.cds img { width: 200px; height: 200px; display: block; margin: 0 auto; }
.cds b { font-size: 16px; }
.cds .sp td { height: 0; }
.cds .ttl { font-size: 16px; font-weight: bold; }

/* player bar: 200 x 16 like the plug-in of the anchor */
.snd { display: inline-flex; align-items: center; gap: 6px; width: 200px; height: 16px; padding: 3px 6px; background: #1d1d1f; border: 1px solid #555; border-radius: 3px; vertical-align: middle; color: #eeeeee; font: 11px Arial, Helvetica, sans-serif; text-align: left; }
.snd-btn { flex: none; width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.snd-btn::before { content: ""; position: absolute; left: 4px; top: 2px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #f2f2f2; }
.snd-btn.is-playing::before { left: 3px; top: 2px; width: 3px; height: 12px; border: 0; border-left: 3px solid #f2f2f2; border-right: 3px solid #f2f2f2; background: none; }
.snd-btn:disabled { opacity: .4; cursor: default; }
.snd-bar { flex: 1; height: 5px; background: #4a4a50; border-radius: 3px; overflow: hidden; }
.snd-fill { display: block; width: 0; height: 100%; background: #9fb8ec; }
.snd-time { flex: none; font-variant-numeric: tabular-nums; }

/* home: black page, player, "enter", slideshow 800 x 544 */
body.home { margin: 0; background: #000; }
html.home-bg { background: #000; }
.home-top { text-align: center; }
.home-logo { margin: 6px 0 0; line-height: 0; }
.home-logo img { width: 240px; height: 89px; }
.home-top h1 { margin: 0 0 4px; font: italic 20px "Times New Roman", Times, serif; color: #ffffff; text-transform: none; }
.home-top .as { color: #ffffff; font-family: "Times New Roman", Times, serif; }
.home-top .enter { font: bold 16px Arial, Helvetica, sans-serif; }
.slides-wrap { width: 800px; margin: 0 auto; padding: 2px; }
.slides { position: relative; width: 800px; height: 544px; overflow: hidden; background: #000; }
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.5s ease; }
.slide.on { opacity: 1; }
.slide img { display: block; width: 800px; height: 544px; }
.slides-prev, .slides-next { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font: bold 20px Arial, sans-serif; cursor: pointer; opacity: 0; transition: opacity .3s; }
.slides-prev { left: 12px; }
.slides-next { right: 12px; }
.slides:hover .slides-prev, .slides:hover .slides-next, .slides-prev:focus, .slides-next:focus { opacity: 1; }
.slides-dots { margin: 10px 0 0; text-align: right; }
.slides-dots button { width: 16px; height: 16px; margin: 0 5px; padding: 0; border: 0; border-radius: 50%; background: #b6b6b6; cursor: pointer; vertical-align: middle; }
.slides-dots button.on { background: #ffffff; box-shadow: 0 0 0 2px #777 inset; }

/* photos: thumbnails 119 x 90, five in a row, 1 px frame #333 */
table.thumbs { width: 500px; margin: 0 auto; }
.thumbs td { text-align: center; padding: 1px; }
.thumbs img { width: 119px; height: 90px; margin: 0 0 6px 3px; border: 1px solid #333; display: block; }
.lb { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .82); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lb[hidden] { display: none; }
.lb-frame { position: relative; background: #fff; padding: 10px; max-width: calc(100vw - 40px); }
.lb-img { display: block; max-width: calc(100vw - 60px); max-height: calc(100vh - 140px); width: 800px; height: auto; }
.lb-prev, .lb-next { position: absolute; top: 10px; bottom: 10px; width: 45%; border: 0; background: transparent; cursor: pointer; }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
.lb-prev::after, .lb-next::after { position: absolute; top: 50%; margin-top: -18px; padding: 6px 10px; background: rgba(0, 0, 0, .55); color: #fff; font: bold 20px Arial, sans-serif; opacity: 0; transition: opacity .2s; }
.lb-prev::after { content: "<"; left: 0; }
.lb-next::after { content: ">"; right: 0; }
.lb-prev:hover::after, .lb-next:hover::after, .lb-prev:focus::after, .lb-next:focus::after { opacity: 1; }
.lb-data { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; justify-content: space-between; width: min(820px, calc(100vw - 40px)); padding: 8px 10px 10px; background: #fff; color: #333; font: 13px Arial, Helvetica, sans-serif; box-sizing: border-box; }
.lb-cap { font-weight: bold; }
.lb-num { color: #555; }
.lb-close { margin-left: auto; padding: 6px 4px; border: 0; background: none; color: #333; font: 12px Arial, sans-serif; cursor: pointer; }
html.lb-on { overflow: hidden; }

/* links page: three columns, white header cells with navy text, navy side columns */
table.lk { width: 700px; text-align: center; }
.lk th { background: #ffffff; color: #003366; font-size: 18px; padding: 0 6px; }
.lk td { padding: 0 8px 16px; }
.lk td.navy { background: #003366; }
.lk td p { margin: 16px 0; }
.lk b { font-size: 16px; }
.lk .sk { display: flex; margin: 6px auto 0; }

/* christmas lyrics */
.lyrics { text-align: left; }
.lyrics h2 { margin: 28px 0 4px; font-size: 16px; text-align: left; }
.lyrics .by { margin: 0 0 12px; font-size: 11px; }
.lyrics p { margin: 0 0 14px; }
.top-link { font-size: 11px; }
.review { text-align: left; }
.review .who { display: block; font-size: 12px; font-weight: bold; }

/* quotes */
.q-about { font-weight: bold; }
.q-sep { text-align: center; }

/* contact form */
form.contact { max-width: 420px; margin: 0 auto; text-align: left; }
form.contact label { display: block; margin: 12px 0 4px; font-size: 13px; font-weight: bold; color: #ffffff; }
form.contact input[type=text], form.contact input[type=email], form.contact textarea { box-sizing: border-box; width: 100%; padding: 6px; border: 1px solid #1d3f86; font: 15px Arial, Helvetica, sans-serif; color: #111; background: #fff; }
form.contact textarea { height: 140px; resize: vertical; }
form.contact .send { margin: 14px 0 0; padding: 7px 18px; border: 1px solid #fff; background: #003366; color: #fff; font: bold 14px Arial, Helvetica, sans-serif; cursor: pointer; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.sent { max-width: 420px; margin: 0 auto; padding: 12px 16px; border: 1px solid #ffffff; text-align: left; }
.sent h2 { margin: 0 0 8px; }

/* footer: one line of disclaimer under the content column */
.foot { width: 640px; margin: 24px 0 8px; font-size: 12px; text-align: center; }
.foot p { margin: 4px 0 4px 164px; }
body.home .foot { width: auto; margin: 24px auto 12px; }
body.home .foot p { margin: 4px 0; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 60; padding: 6px 10px; background: #fff; color: #003366; }