<![CDATA[/* =========================================================
guide.css
General training/test page styling
========================================================= */
/* =========================================================
guide.css
General training/test page styling
========================================================= */
body{
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #222;
margin: 30px;
background: #ffffff;
}
h1, h2, h3{
color: #005A9C;
margin-top: 0;
}
p{
margin: 0 0 1em 0;
}
table{
border-collapse: collapse;
margin-top: 20px;
}
td, th {
vertical-align: top;
padding: 10px 14px 10px 0;
}
img{
max-width: 100%;
height: auto;
}
.q{
font-style: normal;
color: #005A9C;
}
h1{
font-size: 2em;
margin: 0 0 0.7em 0;
}
h2{
font-size: 1.5em;
margin: 1.3em 0 0.6em 0;
}
h3{
font-size: 1.2em;
margin: 1.1em 0 0.5em 0;
}
p{
margin: 0 0 1em 0;
}
ul{
margin: 0.4em 0 1em 1.5em;
}
li{
margin-bottom: 0.45em;
}
.container{
width:90%;
max-width:1600px;
margin:0 auto;
}
.centre {text-align:center;}
.left{
text-align: left;
}
.right{float: right;}
.italic {font-style:italic;}
.ix{margin-left: 2em;}
.normal {
text-decoration:none;
font-size:1rem;
font-weight:normal;
}
.colorred {color: red;}
.bold {font-weight:bold;}
.large {font-size:1.2rem;}
.xlarge {font-size:1.5rem;}
.xxlarge {font-size:1.8rem}
.small {font-size:0.8rem}
.xsmall {font-size:0.6rem}
.xxsmall {font-size:0.5rem}
.u {text-decoration:underline;}
/* ============================================================
TITLE: Inline Highlight Box (Pink + Red Border)
PURPOSE:
Draws a neat box around inline text that fits the text width
HOW TO USE:
Wrap text in <span class="highlight-box">...</span>
============================================================ */
.highlight-box {
display: inline-block;
background-color: #FFF6F8; /* very pale pink */
border: 1px solid #E6A8B0; /* soft muted red */
padding: 3px 8px;
border-radius: 6px;
}
.colorgreen{
color: green;
}
.borderred{
border: 1px solid red;
padding: 10px;
margin: 1em 0;
}
.bkggreen{
background: #E3F4E8;
padding-left: 0.15em;
padding-right: 0.15em;
}
.newspaper {
column-count: 3;
column-gap: 35px;
column-rule: 1px solid #ccc;
max-width: 1100px;
margin: 0 auto;
padding: 20px;
font-family: Verdana, Arial, sans-serif;
font-size: 18px;
line-height: 1.6;
}
.newspaper h1,
.newspaper h2,
.newspaper h3 {
column-span: all;
text-align: center;
margin-bottom: 20px;
}
.newspaper p {
margin-top: 0;
margin-bottom: 1em;
text-align: justify;
}
/* very gentle pastel tooltip */
#tooltipBox{
position:absolute;
display:none;
z-index:99999;
background:#f4ebd4; /* very pale blue */
color:#000;
border:1px solid #AFC7DF;
border-radius:10px;
padding:12px 14px;
max-width:320px;
box-shadow:0 5px 14px rgba(0,0,0,.12);
font-size:16px;
line-height:1.45;
white-space:normal;
}
#tooltipBox img {
max-width: 100%;
height: auto;
}
.gs-tt {
display: inline;
color: #003A6B;
cursor: pointer;
text-decoration: none;
border-bottom: 3px dotted #003A6B;
padding-bottom: 1px;
}
.borderred{
display: inline-block;
border: 1px solid red;
padding: 10px;
margin: 1em 0;
}
.bkgcream{
display:inline-block;
background:#f4ebd4;
padding:0.15em 0.35em;
border:2px solid rgba(0,0,0,0.18);
border-radius:10px;
box-shadow:0 5px 14px rgba(0,0,0,.12);
}
summary {
display: inline-block;
border-bottom: 2px dotted #003A6B;
padding-bottom: 2px;
cursor: pointer;
}
/* =========================================================
balloon-click.css
FINAL CLICK VERSION
WHAT THIS DOES:
- Click thumbnail to show larger image centred on screen
- Dark overlay behind it
- Close by clicking ×, background, or Esc
HTML expected:
<span class="balloonwrap">
<span class="balloon">
<img decoding="async" src="..." class="thumb" alt="">
</span>
<span class="hide">
<img decoding="async" src="..." class="big" alt="">
</span>
</span>
========================================================= */
.balloonwrap{
display: inline-block;
position: relative;
}
.balloon{
display: inline-block;
cursor: pointer;
}
.thumb{
display: block;
max-width: 180px;
height: auto;
border: 1px solid #999;
background: #fff;
}
.hide{
display: none;
}
.big{
display: block;
max-width: min(92vw, 1200px);
max-height: 88vh;
width: auto;
height: auto;
border: 4px solid #ffffff;
box-shadow: 0 8px 28px rgba(0,0,0,0.35);
background: #fff;
}
.balloon-overlay{
position: fixed;
inset: 0;
background: rgba(0,0,0,0.72);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
}
.balloon-overlay-inner{
position: relative;
}
.balloon-close{
position: absolute;
top: -14px;
right: -14px;
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: #ffffff;
color: #000000;
font: 700 22px/1 Arial, sans-serif;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
/* =========================================================
SCROLL TO TOP - CSS FILE - v1.0
WHAT THIS DOES
- Styles a fixed scroll-to-top button.
- Button appears at bottom right.
- Hidden until the page is scrolled down.
- Blue background, gold text, white border.
- Mobile-friendly.
- Reduced-motion friendly.
HOW TO USE
- Save this file as: Training/CSS Files/scroll-to-top.css
- Load it in each HTML page with:
<link rel="stylesheet" href="../CSS Files/scroll-to-top.css">
NOTES
- This file only handles appearance.
- The button itself is created by the JS file.
========================================================= */
#scrollToTopButton{
position: fixed;
right: 20px;
bottom: 20px;
z-index: 99999;
width: 44px;
height: 54px;
border-radius: 999px;
display: grid;
place-items: center;
background-color: #005A9C;
color: #fedb7f;
border: 2px solid #ffffff;
outline: none !important;
font-size: 26px;
line-height: 1;
cursor: pointer;
box-shadow: 0 6px 18px rgba(0,0,0,.18);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity .25s, transform .25s, visibility .25s;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
}
#scrollToTopButton.visible{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#scrollToTopButton:hover{
box-shadow: 0 8px 22px rgba(0,0,0,.24);
}
#scrollToTopButton:focus,
#scrollToTopButton:focus-visible,
#scrollToTopButton:active{
outline: none !important;
box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
}
@media (max-width: 480px){
#scrollToTopButton{
right: 14px;
bottom: 14px;
width: 40px;
height: 50px;
font-size: 24px;
}
}
@media (prefers-reduced-motion: reduce){
html:focus-within{
scroll-behavior: auto;
}
#scrollToTopButton{
transition: none;
}
}
]]>
