<?php
// cdibc8.css - 3 October 2025 R J Barnett
?>

/* ------------ GENERAL -----------------------------*/

body {margin:4px; margin-top:0px; width:100%; height:2000px; position:relative;}

#bodystyle {background:lemonchiffon;}

div {font-family:Arial,Helvetica,sans-serif; font-size:8pt; margin:0px; padding:0px; color:black;}

td, th {font-size:8pt; vertical-align:top;}

select {height:22px;padding-left:3px;}

.current {color:<?php echo $hfc; ?>}                        /* used to highlight the current item */
.error   {color:<?php echo $hfc; ?>; font-weight:bold}     /* for error messages */
.warning {color:<?php echo $hfc; ?>}                        /* for warning messages */
.note    {font-style:italic;}

a:link    {color:<?php echo $alc; ?>;}
a:visited {color:<?php echo $avc; ?>;}
a:hover   {color:<?php echo $ahc; ?>; text-decoration:underline; font-weight:bold}

h1 {font-size:14pt; clear:both;}
h2 {font-size:12pt; clear:both;}

div.good {color:green}
div.bad {color:red}

button {border:1px solid black; border-radius:5px; color:black; background:azure; font-size:8pt;}

#fn1 {}

table#masthead {width:100%; background-color:red; border-collapse:collapse;}
tr.mastrow1 {height:30px;}
td.mastleft1 {width:30%; vertical-align:middle; text-align:left; color:white; font-size:12pt;}
td.mastcentre1 {width:40%; vertical-align:middle; text-align:center; color:white; font-size:12pt;}
td.mastright1 {width:30%; vertical-align:middle; text-align:right; color:white; font-size:12pt;}
tr.mastrow2 {height:30px;}
td.mastleft2 {width:30%; vertical-align:middle; text-align:left; color:white; font-size:12pt;}
td.mastcentre2 {width:40%; vertical-align:top; text-align:center; color:white; font-size:8pt;}
td.mastright2 {width:30%; vertical-align:middle; text-align:right; color:white; font-size:12pt;}
tr.mastrow3 {height:30px; }
td.mastleft3 {width:40%; vertical-align:bottom; text-align:left; color:white; font-size:12pt;}
td.mastcentre3 {width:20%; vertical-align:middle; text-align:center; color:white; font-size:12pt;}
td.mastright3 {width:40% vertical-align:middle; text-align:right; color:white; font-size:12pt;}
tr.mastrow4 {height:40px; }
td.mastleft4 {width:15%; vertical-align:middle; text-align:right; color:white; font-size:12pt;}
td.mastcentre4 {width:60%; vertical-align:middle; text-align:center; color:white; font-size:16pt;}
td.mastright4 {width:15%; vertical-align:middle; text-align:right; color:white; font-size:12pt;}
.mastlink1 {color:white; text-decoration:none; padding-bottom:5px;}

.span1 {color:red; font-size:12pt; text-decoration:none;}
.span2 {color:blue; font-size:10.5pt; text-decoration:underline;}

table#t1 {border:0px; border-collapse:collapse;}
th#t1 {font-size:10.5pt; font-weight:normal; border:1px solid black; vertical-align:middle;}
td#t1 {font-size:10.5pt; font-weight:bold; border:1px solid black; vertical-align:middle;}

table#t2 {border:0px; border-collapse:collapse;}
th#t2 {font-size:10.5pt; font-weight:normal; border:1px solid black; vertical-align:middle;}
td#t2 {font-size:10.5pt; font-weight:bold; border:1px solid black; vertical-align:middle;}

.hide1 {display:none;}

.top-link {transition:all 0.25s ease-in-out;  position:fixed; bottom:0; left:25; display:inline-flex; cursor:pointer;
           align-items:center; justify-content:center; background:lemonchiffon; margin:0 0px 25px 7px;}

.top-link.show {visibility:visible; opacity:1;}

.top-link.hide {visibility:hidden; opacity:0;}

.top-link:hover {background:lemonchiffon;}

ul, li {margin:0; padding:0;}

.dropdownmenu ul, .dropdownmenu li {margin:0px;}

.dropdownmenu ul {text-align:left; background:lemonchiffon; list-style:none; width:90%;}

.dropdownmenu li {display:inline-block; position:relative; width:auto;}

.dropdownmenu a {color:blue; display:block; background:lemonchiffon; 
                 padding-top:0px; padding-bottom:8px; padding-left:5px; padding-right:15px; 
				 text-align:left; text-decoration:none; font-size:9pt; font-weight:bold;
				 webkit-transition:all .25s ease; -moz-transition:all .25s ease; ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;} 

.dropdownmenu li:hover a {color:red; background:lemonchiffon;}

#submenu {left:0; opacity:1; position:absolute; top:22px; visibility:hidden; z-index:1;}
li:hover ul#submenu {opacity:1;	top:22px; visibility:visible;}

#submenu li {float:none; width:250px;}

#submenu a {color:blue; background:lemonchiffon;}

#submenu a:hover {color:red; background-color:lemonchiffon; text-decoration: underline;} 

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button 

{-webkit-appearance:none; margin:0; }

#pagetop1 {position:-webkit-sticky; position:sticky; top:0px; margin-top:0px; background:rgba(255, 250, 205, 1); z-index:1000;}

#parent {
  display: flex;
  justify-content: space-around;}

#left {
  border: 1px solid black;
  width: 40%;}

#right {
  border: 1px solid black;
  width: 40%;}

.tooltip {position:relative; display:inline-block;}

/* below the field */

.tooltip .tooltiptext {visibility:hidden; min-width:max-content; max-width:250px; background-color:yellow; color:black; font-size:8pt; font-weight:normal; text-align:center; border-radius:6px; border-style:solid; border-width:1px; border-color:black; 
  padding:5px 5px 5px 5px; position:absolute; top:110%; left:5%; margin-left:-5px; opacity:0; transition:opacity 0.3s;}

/* above the field */

.tooltip .tooltiptexta {visibility:hidden; min-width:max-content; max-width:250px; background-color:yellow; color:black; font-size:8pt; font-weight:normal; text-align:center; border-radius:6px; border-style:solid; border-width:1px; border-color:black;
  padding:5px 5px 5px 5px; position:absolute; bottom:120%; left:50%; margin-left:-30px; opacity:0; transition:opacity 0.3s;}

/* below the field */

.tooltip .tooltiptextb {visibility:hidden; min-width:max-content; max-width:250px; background-color:yellow; color:black; font-size:8pt; font-weight:normal; text-align:center; border-radius:6px; border-style:solid; border-width:1px; border-color:black; 
  padding:5px 5px 5px 5px; position:absolute; top:120%; left:5%; margin-left:-5px; opacity:0; transition:opacity 0.3s;}

 /* left of the field */
  
.tooltip .tooltiptextl {visibility:hidden; min-width:max-content; max-width:250px; background-color:yellow; color:black; font-size:8pt; font-weight:normal; text-align:right; border-radius:6px; border-style:solid; border-width:1px; border-color:black;
  padding:5px 5px 5px 5px; position:absolute; top:-5px; right:105%; margin-left:5px; opacity:0; transition:opacity 0.3s;} 

 /* right of the field */

.tooltip .tooltiptextr { visibility:hidden; min-width:max-content; max-width:250px; background-color:yellow; color:black; font-size:8pt; font-weight:normal; text-align:left; border-radius:6px; border-style:solid; border-width:1px; border-color:black;
  padding:5px 5px 5px 5px; position:absolute; top:-5px; left:105%; margin-left:5px; opacity:0; transition:opacity 0.3s;}

 /* below left of the field */
  
.tooltip .tooltiptextbl {visibility:hidden; min-width:max-content; max-width:250px; background-color:yellow; color:black; font-size:8pt; font-weight:normal; text-align:right; border-radius:6px; border-style:solid; border-width:1px; border-color:black;
  padding:5px 5px 5px 5px; position:absolute; top:120%; right:0%; margin-left:40px; opacity:0; transition:opacity 0.3s;} 

 /* below right of the field */

.tooltip .tooltiptextbr { visibility:hidden; min-width:max-content; max-width:250px; background-color:yellow; color:black; font-size:8pt; font-weight:normal; text-align:left; border-radius:6px; border-style:solid; border-width:1px; border-color:black;
  padding:5px 5px 5px 5px; position:absolute; top:120%; left:100%; margin-left:-60px; opacity:0; transition:opacity 0.3s;}

.tooltip:hover .tooltiptext   {visibility:visible; opacity:1; z-index:999;}
.tooltip:hover .tooltiptexta  {visibility:visible; opacity:1; z-index:999;}
.tooltip:hover .tooltiptextb  {visibility:visible; opacity:1; z-index:999;}
.tooltip:hover .tooltiptextl  {visibility:visible; opacity:1; z-index:999;}
.tooltip:hover .tooltiptextr  {visibility:visible; opacity:1; z-index:999;}
.tooltip:hover .tooltiptextbl {visibility:visible; opacity:1; z-index:999;}
.tooltip:hover .tooltiptextbr {visibility:visible; opacity:1; z-index:999;}

div.gallery {
  margin:5px;
  border:1px solid #ccc;
  float:left;
  width:180px;
  height:240px; }

div.gallery:hover {
  border:1px solid #777; }

div.gallery img {
  width:100%;
  height:120px; }

div.galleryp {
  margin:5px;
  border:1px solid #ccc;
  float:left;
  width:180px;
  height:240px; }

div.galleryp:hover {
  border:1px solid #777; }

div.galleryp img {
  width:60%;
  height:120px; }

div.desc {
  padding:15px;
  text-align:center;
  height:auto; }

#balloon-container {
  height:100vh;
  padding:1em;
  box-sizing:border-box;
  display:flex;
  flex-wrap:wrap;
  overflow:hidden;
  transition:opacity 500ms;
}

.balloon {
  height:125px;
  width:105px;
  border-radius:75% 75% 70% 70%;
  position:relative;
}

.balloon:before {
  content:"";
  height:75px;
  width:1px;
  padding:1px;
  background-color:#FDFD96;
  display:block;
  position:absolute;
  top:125px;
  left:0;
  right:0;
  margin:auto;
}

.balloon:after {
    content:"?";
    text-align:center;
    display:block;
    position:absolute;
    color:inherit;
    top:120px;
    left:0;
    right:0;
    margin:auto;
}

@keyframes float {
  from {transform:translateY(100vh);
  opacity:1;}
  to {transform:translateY(-300vh);
  opacity:0;}
}