/* Content blocks for generated pages (loaded after main.css) */
body { background-color: #eee; }
#banner.tt-banner { padding: 2em 1em 1em; }
#banner .tt-h1 { color: #036; font: bold 28px/1.25 "Arial Black", Gadget, sans-serif; margin: .4em 0 .2em; text-transform: none; }
.tt-clock #clock-display { font: bold 46px/1.2 "Arial Black", Gadget, sans-serif; color: #036; letter-spacing: 2px; }
.tt-date { color: #036; font-size: 1.05em; margin: .1em 0 .3em; }
#banner p.tt-lead { text-transform: none; color: #333; max-width: 760px; margin: .6em auto; padding: .6em 1em;
  background: #fff; border-radius: 6px; font-size: 1em; line-height: 1.5; }
#banner p.tt-sync { text-transform: none; color: #555; font-size: .85em; margin: .2em auto; min-height: 1.3em; }
#banner p.tt-lead strong { font-family: Verdana, Geneva, sans-serif; }
.tt-ad { margin: 1em auto; max-width: 970px; min-height: 100px; }

.tt-main { max-width: 900px; margin: 0 auto; padding: .5em 1em 2em; color: #333; }
.tt-sec { background: #fff; border-radius: 6px; padding: 1.2em 1.4em; margin: 1em 0; }
.tt-sec h2 { color: #036; font-size: 1.3em; line-height: 1.3; margin: 0 0 .7em; padding-bottom: .4em; border-bottom: 1px solid #e2e8f0; text-transform: none; }
.tt-sec h3 { color: #036; font-size: 1.05em; line-height: 1.35; margin: 1.1em 0 .4em; text-transform: none; }
.tt-sec p { margin: 0 0 .8em; line-height: 1.6; }
.tt-sec a { color: #0a5aa8; }
.tt-note { font-size: .85em; color: #666; }
.tt-big { font-size: 1.3em; font-weight: bold; color: #036; }
.tt-countdown { font-weight: bold; }

.tt-table { width: 100%; border-collapse: collapse; font-size: .92em; margin: 0 0 1em; }
.tt-table th, .tt-table td { border: 1px solid #d6dde6; padding: .45em .6em; text-align: left; vertical-align: top; line-height: 1.45; }
.tt-table thead th, .tt-kv th { background: #f0f4f8; color: #036; }
.tt-kv th { width: 34%; font-weight: bold; }
.tt-table small { color: #666; }
.tt-conv tr.tt-now td { background: #fff3c4; font-weight: bold; }
.tt-live { font-weight: bold; color: #036; white-space: nowrap; }

.tt-faq h3 { margin-top: 1em; }
.tt-related p { line-height: 1.9; }

.tt-dir { background: #fff; border-radius: 6px; padding: 1.2em 1.4em; margin: 1em 0; }
.tt-dir h2 { color: #036; font-size: 1.3em; margin: 0 0 .6em; text-transform: none; }
.tt-dir details { border: 1px solid #d6dde6; border-radius: 6px; margin: .5em 0; padding: .3em .8em; }
.tt-dir summary { cursor: pointer; font-weight: bold; color: #036; padding: .3em 0; }
.tt-dir p { line-height: 1.9; margin: .4em 0; }
.tt-useful { line-height: 1.9; }

.tt-list { list-style: none; columns: 2; margin: 0; padding: 0; }
.tt-list li { padding: .15em 0; }
/* footer bullets used the .fa rule from font-awesome.min.css, which is no longer loaded */
#footer li.fa { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight: 700; line-height: 1; }
#footer a { color: #0a5aa8; }

@media screen and (max-width: 736px) {
  #banner .tt-h1 { font-size: 21px; }
  .tt-clock #clock-display { font-size: 40px; }
  .tt-main { padding: .3em .5em 1.5em; }
  .tt-sec, .tt-dir { padding: 1em .9em; }
  .tt-kv th { width: 40%; }
  .tt-list { columns: 1; }
}

/* Tool pages: online clock, timer, countdowns */
.tt-analog { max-width: 260px; margin: .6em auto .2em; }
.tt-analog svg { width: 100%; height: auto; display: block; }
.tt-analog .face { fill: #fff; stroke: #036; stroke-width: 4; }
.tt-analog .tk { stroke: #036; stroke-width: 1.5; }
.tt-analog .tk.big { stroke-width: 3.5; }
.tt-analog .hh { stroke: #036; stroke-width: 7; stroke-linecap: round; }
.tt-analog .hm { stroke: #036; stroke-width: 4.5; stroke-linecap: round; }
.tt-analog .hs { stroke: #d33; stroke-width: 2; stroke-linecap: round; }
.tt-analog .pin { fill: #d33; }
#banner:fullscreen { background: #eee; padding-top: 3vh; }
#banner:fullscreen .tt-analog { max-width: 55vh; }
#banner:fullscreen .tt-ad { display: none; }
.tt-btn { display: inline-block; background: #036; color: #fff; border: 0; border-radius: 5px; padding: .5em 1.1em;
  font: bold .95em Verdana, Geneva, sans-serif; cursor: pointer; margin: .2em .1em; height: auto; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.tt-btn:hover { background: #0a5aa8; }
.tt-tool label { margin-right: 1em; white-space: nowrap; }
.tt-tool input { display: inline-block; width: auto; min-width: 6em; padding: .3em .4em; border: 1px solid #b8c4d2; border-radius: 4px; font-size: 1em; height: auto; }
.tt-display { font: bold 40px/1.2 "Arial Black", Gadget, sans-serif; color: #036; margin: .3em 0; }
.tt-laps { margin: .5em 0 0 1.5em; font-family: monospace; }