/* A common and effective approach for responsive design is to set a base size on the element and use rem for all other font sizes and scaling properties (like margins and padding where appropriate): CSS - as below - Sets the base font size for the entire document, which all rem units will be relative to */ /* html { font-size: 16px; * A good, accessible starting point * } */ body { font-size: 14px; /* new 30apr26 */ margin: 1vh 0 0 0; padding: 0; background: pink; /* was #4A4A4A; */ line-height: 1.6em; text-align: justify; font-family: Arial, Helvetica, sans-serif; /* font-size: clamp(1rem, 3vw, 1.5rem); font-size: clamp(1rem, 2.5vw, 1.2rem); */ p, li, td, tr { /* clamp(minimum, preferred, maximum) */ font-size: clamp(0.6rem, 0.9rem + 0.5vw, 1.0rem); } /* font-size: 1rem; * All body text will be 1rem (16px), but this can be adjusted in media queries */ color: #000000; border: 2px blue none; } /** CONTENT */ #content-wrap { width: 100%; /* Scales with the browser window width */ max-width: 1024px; /* WAS width: 960px; Prevents it from getting too wide on large screens */ margin: 0 auto; margin-top: 5vh; background: #B9FFB9; border: 1px; border-style: none solid solid solid; } #content { width: 96%; margin: 0 auto; /* Centers the content */ padding-top: 0px; border: 4px blue none; /** was 940px and width: 920px; margin: 0px auto; padding-top: 1px; border: 0px #000000 dotted; */ } /** HEADER */ #header { width: 960px; height: 179px; margin: -20px 0 0 -20px; /* background: url(savana-964-180.jpg) no-repeat left top; now done in hero-banner below WAS ban-sized2.jpg */ font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; border: 1px black solid; border-style: solid solid none solid; border-radius: 20px 20px 0px 0px; } #textSum {display:none;} #textSum--- {width: 900px; margin: 0px 0 0 0px; text-align: left; line-height: 1.0; border: none; } #imageSum--- {display:none;} #imageSum {width:700px; margin: 5px 10px 0 0px; } #site-name { width: 200px; margin: -10px 0 0 730px; text-align: center; line-height: 1.0; border: none; } #header p { font-family: 'Brush Script MT', cursive; background: none; font-size: 35px; color: #000000; } .sticky-bar { position: fixed; /** https://stackoverflow.com/questions/37646066/position-sticky-buttons-not-working-in-ie-11 */ position: -webkit-sticky; position: sticky; top: 0; height: 40px; width: auto; margin: -10px 0 0 -20px; padding: 0px 0 0 0; background: blue; text-align: left; color: pink; font-size: 16px; border: 0px #FFE5A6 solid; /* im id */ border-top: none; border-radius: 25px; } .sticky-bar p, a {display: inline;} .sticky-bar a::after {content: " > ";} .sticky-bar a {color: yellow;} .sticky-nav { Xposition: fixed; /** https://stackoverflow.com/questions/37646066/position-sticky-buttons-not-working-in-ie-11 */ position: -webkit-sticky; position: sticky; top: 0; height: 40px; width: auto; margin: -10px 0 0 -20px; padding: 0px 0 0 0; background: black; text-align: left; color: pink; font-size: 16px; border: 0px #FFE5A6 solid; border-top: none; Xborder-radius: 25px; } .sticky-nav p, a {display: inline;} .sticky-nav a::after {content: " | ";} .sticky-nav a {color: yellow;} #menu2 { padding: 0 0 0 1em; background: grey; } #menu2 a { color: #D3D3D3; background-color: grey; font-weight: bold; } #menu2 a:hover { color: blue; } /** Common Styles */ /** lists */ /** https://www.w3schools.com/css/css_list.asp*/ ol li { background: none; padding: 0px; margin: 1px 0 0 10px; } ulX { background: blue; display: block; list-style-type: lower-greek; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; } ul { margin:0px 0 0 -20px; list-style-type: square; border:none; } ulx lxi { background: none; margin: 10px 0 0 400px; list-style-type: circle; border:dotted; } # list-none { list-style-type:circle; } list-none li { margin-bottom: 5px } /** https://www.w3schools.com/cssref/css_entities.asp - 27A2 arrow 00A0 space, test with - https://www.w3schools.com/cssref/tryit.php?filename=trycss_entity see https://www.htmlsy */ a { color: #0193DE; } a:hover { text-decoration: none; } /** general word align */ .content { padding: 10px 10px 20px 10px; } /** tried ul and li also inline but apply to whole doc, for some reason not happen with p and a */ /** Character Entity Reference Chart https://dev.w3.org/html5/html-author/charref */ .key-word a::before {content: "\2666";} .key-word a {color: #0707E7;} .key-word a {font-style: normal;} .player { width: 100%; } .player2 { width: 260px; } /** Table for: idea type table font-sizes were caption15 th13 td12 padding8px boarder-blue */ .table-1 caption {margin: 0 0 8px 0; font-size: 15px;} .table-1 { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; background-color: #FFFF80; font-sizeX: 11px } .table-1 td, .table-1 th { border: 1px solid blue; padding: 0px 8px 0px 8px; } .table-1 th { text-align: center; background-color: #505050; color: white; font-size: 13px; } .table-1 td { font-size:12px; line-height: 130%; vertical-align: text-top; } /** Table for: Summary idea type table font-sizes were caption15 th13 td12 padding8px boarder-blue */ .table-2 caption {margin: 0 0 1vh 0; font-size: 1rem;} .table-2 { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; background-color: #FFFF80; font-size: 1rem; } .table-2 td, .table-2 th { border: 1px solid black; padding: 0 1vw 0 1vw; } .table-2 th { text-align: center; background-color: #505050; color: white; font-sizeX: 1rem; } .table-2 td { font-sizeX:1rem; line-height: 180%; vertical-align: centre; } /** Table for: References and early Comparison gene to idea in cult-eveo-review */ .table-b caption {margin: 0 0 8px 0;} .table-b { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; background-color: #FFFFAF; } .table-b td, .table-b th { border: 1px solid black; padding: 5px 3px 5px 3px; } .table-b th { padding-top: 5px; padding-bottom: 5px; text-align: center; background-color: #505050; color: white; font-size: 13px; } .table-b td { vertical-align: text-top; line-height: 110%; } /** Table for: Model Contents */ .table-matrix { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; background-color: #E6E0B0; } .table-matrix td { border: 1px solid black; border-collapse: collapse; vertical-align: text-top; padding: 2px 7px 2px 6px; } /** Table for: ???? part Model Content? */ .table-head td { vertical-align: text-top; padding: 3px 0 2.5px 0; } /** Table for: formating text only */ .table-text-format th, td { padding: 0.5rem; text-align: left; vertical-align: top; border: none; } .table-text-format th { text-align: center; } .table-text-format caption { margin: 0 0 1rem 0; } /** Table for: general use .table-text-format th, td { padding: 3.5px; text-align: left; vertical-align: top; border: none; } .table-text-format th { text-align: center; } .table-text-format caption { margin: 0 0 10px 0; } NOT DONE YET */ /** from https://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy */ #customers { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; } #customers td, #customers th { border: 1px solid #ddd; padding: 8px; } #customers tr:nth-child(even){background-color: #f2f2f2;} #customers tr:hover {background-color: #ddd;} #customers th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #04AA6D; color: white; } #customers { border: 2px solid; } /** Table for: my version of fancy example and latest Comparison gene to idea in cult-evo-review */ .table-d { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; border: 1px solid; width: 100%; } .table-d td, th { border: 1px solid black; padding-top: 6px; padding-bottom: 6px; padding-right: 10px; padding-left: 10px; vertical-align: text-top; } .table-d tr:nth-child(even){background-color: #f2f2f2;} .Xtable-d tr:hover {background-color: #ddd;} .table-d th { padding-top: 6px; padding-bottom: 6px; text-align: center; background-color: #04AA6D; color: white; } .table-d caption { padding-top: 6px; padding-bottom: 20px; } .table-wiki { /* Merge double cell borders into one */ border-collapse: collapse; border: none; width: 100%; background-color:#d3d3d3; } .table-wiki td { /* Apply only the bottom line */ border-bottom: 1px solid grey; padding: 8px; text-align: left; } .table-wiki th { text-align: center; border: none; border-bottom: 1px solid black; } /** https://stackoverflow.com/questions/23870696/vertical-navigation-with-rotated-text */ .main-nav { width:100vh; height:45px; position:fixed; background:#4c4c4c; -webkit-transform-origin: left top; -webkit-transform:rotate(-90deg) translateX(-100%); } ul.nav li { margin-right:20px; float:right; height:100%; line-height:45px; } /** deleted matrix rotate stuff now done in page style * /** my image block possibly with 2 COLS too USING THIS ONE */ .img-block { float: right; width: 60%; margin: 20px -10px 8px 15px; padding: 0 10px 0 5px; /** right critical for spacing */ background: #FFFFC1; border: none; } .img-block2 { float: right; width: 100%; margin: 0 0 8px 15px; padding: 0 10px 0 5px; background:#FFFFC1 } /** my version of fig */ figure { display: block; margin: 10px 5px 5px 5px } /** Create two equal columns that floats next to each other USING THIS ONE */ .columnRes { float: left; width: 50%; margin: 0px 0 0px 0; padding: 0px; border:none; } .img-block figcaption { margin-top:10px; line-height: 110%; text-align: center; } /** Clear floats after the columns USING THIS ONE */ .rowRes:after { /** content: ""; */ display: table; margin: 0px 0 0px 0; clear: both; } /** Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .columnRes { width: 100%; } } /** 2 COLS-RESPONS - END */ /** 2 COLS - https://www.w3schools.com/howto/howto_css_two_columns.asp */ .column2 { float: left; width: 50%; } /** Clear floats after the columns */ .row2:after { content: "test - WORDS IN css"; display: table; clear: both; } /** END 2 COLS */ /** columnB definitions - - note: h1 h2 and h3 reserved use - - - - - - - - - */ #columnB { float: right; width: 20%; /* was 210px; */ border: npone; background: #B9FFB9; margin: 0 0 0 1vw; /* was 3px; */ } #columnB h2 { padding: 3px 0 6px 0px; background: #101010; border: 1px #929291 solid; color: #FFFFFF; font-size: 14px; font-weight: bold; text-align:center; } /** columnB radius via hx definition not work affects ALL hx #columnB h3,h4, h5, h6 { border-style: solid; border-color: black; border-width: 2px; border-radius: 10px 10px 0px 0px; padding: 5px 0 5px 0px; font-size: 16px; font-weight: bold; text-align:center; } - - - - - - - - */ #columnB h3 { background: black; color: yellow; font-size: 15px; } #columnB h4 { background: #32DC14; color: #000000; } #columnB h5 { background: #DFE20E; color: #000000; } #columnB h6 { background: #67A34D; color: #000000; } /** #columnB h6 {border: 1px solid; border-radius: 10px 10px 0px 0px; margin: 0px; padding: 0px 5px 5px 5px; background: #998F57; color: #000000;font-size: 14px;} */ /** #columnB strong { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #575757; } */ .side-box { background-color: #CAE8E3; border-style: solid; border-width: 1px; padding: 0px 8px 2px 8px; margin: 0 0 15px 0; border-radius: 10px 10px 0px 0px; } .side-box-head { border-style: solid; border-color: black; border-width: 1px; border-radius: 10px 10px 0px 0px; padding: 2px 0 2px 0; font-size: 14px; font-weight: bold; text-align:center; Xheight:50px; margin: -1px -8px 10px -8px; } .side-box p { font-size: 13px; line-height: 1.20; text-align:center; } .side-img { border-style: solid; border-color: black; border-width: 1px; width: 95%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 6px; } .side-icon { background: #ffffff; color:blue; font-weight: normal; padding: 0px 2px 0px 2px; border-radius: 5px 5px 5px 5px; } .text-icon { color:blue; font-weight: normal; padding: 0px 2px 0px 2px; border-radius: 5px 5px 5px 5px; } .foot-icon { background: #black; color:blue; font-weightz: normal; paddingx: 0px 2px 0px 2px; border-radiusz: 5px 5px 5px 5px; } /** DOCUMENT WIDE my links to places AND hover expansion*/ .side_bar {text-decoration: none; color: black; background-color:#00FFFF; border-right: 4px double black; padding-right: 4px;} /** columnA and columnAB definitions - - - - - - - - - */ #columnA { float: left; width: 78%; /* was 700px; */ background: #B9FFB9; border: 0px black solid; } #bB { float: left; width: 100%; /* was 916px; /** was 940 */ background: #B9FFB9; } #columnA h1, #columnAB h1 { padding: 3px 0 2px 20px; background: #101010; border: 1px #929291 solid; text-transform: none; color: #FFFFFF; font-size: font-size: h1: clamp(2rem, 1.3rem + 3vw, 4rem); /* was 20px */ font-weight: bold; margin-left: 0px } #columnA h2, #columnAB h2 { padding: 0px 0 5px 0px; background: none; font-family: Arial, Helvetica, sans-serif; /** was "Times New Roman", Times, serif; */ font-size: font-size: clamp(1.625rem, 1.23rem + 1.69vw, 2.75rem); /* was 20px */ border-bottom: 1px solid ; border-top: none ; font-weight: normal; margin:0 0 -2px 0; } /** #columnA h2::before, #columnAB h2::before {content: " - - - ";} #columnA h2::after, #columnAB h2::after {content: " - h2 - ";} */ #columnA h3, #columnAB h3 { margin: 0px 0 -3px 0px; font-family: Arial, Helvetica, sans-serif; /** was "Times New Roman", Times, serif; */ font-size: font-size: clamp(1.375rem, 1.16rem + 0.94vw, 2rem); /* was 18px */ font-weight: bold; display:inline; } /** #columnA h3::before, #columnAB h2::before {content: " - - - ";} #columnA h3::after, #columnAB h3::after {content: " - h3 - ";} */ /** class version */ .pseudo_border:after { position:relative; display:inline-block; } .pseudo_border:after { content:''; position:absolute; left:0;right:0; top:100%; margin: 2px auto; width:100%; height:1px; background:#000000; } /** tag style version */ #columnA h4, #columnAB h4 { margin: 10px 0 -3px 0px; font-family: Arial, Helvetica, sans-serif; /** was "Times New Roman", Times, serif; */ font-size: font-size: clamp(1.125rem, 0.99rem + 0.56vw, 1.5rem); /* was 17px */ font-weight: normal; display:inline; text-decoration: underline; } #columnA h4X, #columnAB h4X { position:relative; display:inline-block; } #columnA h4X::before { content:''; position:absolute; left:0;right:0; top:100%; margin: 2px auto; width:101%; height:1px; background:black; } #columnAB h4X::after { content:''; position:absolute; left:0;right:0; top:100%; margin: 2px auto; width:101%; height:1px; background:black; } /** #columnA h4, #columnAB h4 { padding: 3px 0 2px 0px; font-family: Arial, Helvetica, sans-serif; font-size: 21px; text-decoration: underline; display: inline-block; border-bottom: 1px solid ; font-weight: normal; } #columnA h4, #columnAB h4 { display: inline-block; padding: 1px 5px 1px 5px; border: 1px #000000 solid; font-size: 16px; font-weight: bold; } */ #columnA h5, #columnAB h5 { margin: -3px 0 -12px; font-family: Arial, Helvetica, sans-serif; /** was "Times New Roman", Times, serif; */ font-size: font-size: clamp(2rem, 0.6rem + 2vw, 4rem); /* was 14px */ font-weight: bold; font-style:italic; display:inline; } #columnA h6---, #columnAB h6--- { padding: 23px 0 1px 0px; margin: 0 0 0 0; background: none; font-family: Arial, Helvetica, sans-serif; /** was "Times New Roman", Times, serif; */ font-size: 20px; border-bottom: none; border-top: 1px dashed; font-weight: bold; } #columnA h6, #columnAB h6 { marginx: -5px 0px -5px 0px; font-family: Arial, Helvetica, sans-serif; /** was "Times New Roman", Times, serif; */ font-size: 15px; font-weight: bold; display:inline; } #columnA h6---, #columnAB h6--- { padding: 3px 0 3px 20px; background: #D6ADFF; font-family: Arial, Helvetica, sans-serif; /** was "Times New Roman", Times, serif; */ font-size: 20px; border-bottom: 1px solid ; border-top: 1px solid ; font-weight: bold; margin:0 0 -2px 0; } /** h6 is MAX? #columnA h7, #columnAB h7 {font-size:55px; margin: 3px 0 3px 0; background: none; color: black; font-weight: bold;} */ /** Header specials - - - - - - - - - */ .h-inLine1 { font-size: 14px; font-weight: bold; color: black; } .h-inLine2 { font-size: 13px; font-weight: bold; color: black; } .font-reduce { font-size: 90%; font-style: oblique; } .para-font-reduce { line-height: 85%; font-size: 80%; } .hX-backGrnd {background: #70D337; width: 1px} .backGrnd2 {background: black; color: yellow;} .lst-head { font-size:medium; position: relative; left: -20px } /** Marks, cross through, ref etc - - - - - - - - - */ .verticalLine { border-left: thick solid #ff0000; padding-left: 4px; } .verticalLineOrange { border-left: thick solid orange; padding-left: 4px; } .verticalLineBlue { border-left: thick solid blue; padding-left: 4px; } .horizLineRed { width:100%; height:5px; background: #160DFF } .horizlineblue { border-top: medium solid blue; margin: 10px 5px 10px 5px; before::{content: " > ";} } .hide { /** color: #B7A2FF; */ /** text-decoration-line: line-through; this not work in Coffee */ /** text-decoration: line-through; */ line-height: 90%; font-size: 9px; } .col-block{ font-size: 11px; color: blue; } .incidentally {margin-left: 3%;} .incidentally p::before{ content: "Incidentally: "; font-size: 13px; font-weight: bold; font-style:italic; } /** references and Whats here */ .ref-book{ font-sizeX: 13px; font-style: italic; font-weight: normal; color: red; } .ref-book:before {content: "Book ref- "} /** add click to test */ .ref-event{ font-sizeX: 11px; font-style: italic; font-weight: normal; color: #804040; } .ref-book2 { text-decorationx: none; color: black; background-color: #ffe3e0; border-bottomX: 1px dashed black; border-radius:10px; padding: 1px 6px 1px 6px; } .ref-book2::before {content: "Book ref "} .ref-event:before {content: "Event ref-"} .ref-course{ Xfont-size: 13px; font-style: italic; font-weight: normal; color: red; } .ref-course:before {content: "Course ref-"} .ref-bar{ font-size: 11px; font-style: normal; text-decoration: none; font-weight: lighter; color: yellow; background: rgb(159, 155, 155); padding: 1px 5px 1px 5px; border-radius: 25px; } .ref-bar:before {content: "CM-Area"} .ref-bar:after {content: ' \2B9D';} /** was \25B2 - current https://www.w3schools.com/cssref/css_entities.asp BLACK UP-POINTING TRIANGLE - original content: "\2B9D" https://www.compart.com/en/unicode/U+2B9D ? ❖ https://www.compart.com/en/unicode/html */ .whatshere { list-style-type: none; line-height: 120%; margin-top: -5px; } .whatshere li::before {content: '\27A2 \00A0';} /** https://www.w3schools.com/cssref/css_entities.asp - 27A2 arrow 00A0 space, test with - https://www.w3schools.com/cssref/tryit.php?filename=trycss_entity see https://www.htmlsymbols.xyz/unicode/U+2B9D for chars */ .i1 { padding-left: 0px; font-weight: bold; color: black; background-color:white; } .i1a { padding-left: 22px; border-bottom: 1px solid red; background-color:none; } .i2 { padding-left: 0px; } .i3a { padding-left: 0px; } .i3 { padding-left: 15px; } .ih2 { background: #f9cfff; color: black; } .i4 { padding-left: 30px; } .i5 { padding-left: 45px; } .i6 { boarder:solid; padding: 10px 0 0 15px; margin: 10px 0 0 0; } .foot { text-decoration: none; color: black; background-color: #ffd1ff; border-bottomX: 1px dashed black; border-radius:10px; padding: 1px 6px 1px 6px; } .foot:after {content: " F"} .glossary {text-decoration:none; color:black; background-color:#00FFFF; border:1px; border-style:none solid none solid; border-radius:10px; padding:0px 5px 0 5px;} .glossary_newTab { font-weight: normal; color: black; background-color:white; /** border:0px dotted red; border-top-width: 2px; border-left-width: 2px; */ padding: 0 6px 0 4px; border-radius: 25px; } .glossary_newTab:after {content: "\2193"} /** was "\2193" */ .glossary3 { text-decoration: none; color: black; background-color: #e6ffab; border-bottomX: 1px dashed black; border-radius:10px; padding: 1px 6px 1px 6px; } /** are these used ? */ .foot_newTab {font-weight: normal; color: black; background-color:#FF8040; border:0px dotted red; border-top-width: 2px; border-left-width: 2px; padding-left: 4px;} .hover {font-weight: normal; color: black; background-color: #FF8040; border:none; padding-left: 5px; padding-right: 5px;} /** class="center"https://www.w3schools.com/css/css_tooltip.asp NOTE - https://stackoverflow.com/questions/12539006/tooltips-for-mobile-browsers */ .tooltip { position: relative; display: inline-block; background-color: white; /** the offer colour */ border-radius:10px; border:medium; font-style: italic; text-decorationX:underline; padding:0px 6px 0 6px; } .tooltip .tooltiptext { visibility: hidden; width:26vw; background-color: #CFF5A3; /** the text background colour */ color: #000000; text-align: left; padding: 5px; border: 1px solid; /** Position the tooltip */ position: absolute; z-index: 1; top: 100%; left: 0; margin-left: -4em; } .tooltip:hover .tooltiptext { visibility: visible; } /** tooltip 2 used specifically for model display */ .tooltip2 { position: relative; display: inline-block; background-color: #00FFFF; font-style: italic; padding:0px 4px 0 2px; } .tooltip2 .tooltiptext2 { visibility: hidden; width: 300; /** was 450 300 */ background-color: #FFFF80; color: #000000; text-align: left; padding: 5px 0 0 0px; /** 5px only */ border: 1px dotted; /** Position the tooltip */ position: absolute; z-index: 1; top: 100%; left: 5px; /** tried -150% - was 0 now 100*/ margin-left: 0px; } .tooltip2:hover .tooltiptext2 { visibility: visible; } .indent { margin: -8px 0 0 30px; } .center { display: block; margin-left: auto; margin-right: auto; width: 100%; height: 100%; /** padding: 5px 10px 0px 10px; */ } /** https://www.w3schools.com/css/css_align.asp */ .center2 { display: block; margin-left: auto; margin-right: auto; width: 90%; height:90%; padding-top: 15px } .right { display: block; padding: 5px 10px 0px 10px; float: right; } .map { display: inline; } .tab {margin-left: 8%} /** un used moved from above */ /** 2 COLS-RESPONS - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_two_columns_responsive */ *{ box-sizing: border-box; } /** https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_css */ .button { border: none; /** color: #203EFF padding: 0px 0px; text-align: center; text-decoration: none; display: inline-block; margin: 0px 0px; */ font-size: 12px; cursor: pointer; background-color: #FFDFFF; border-bottom: 1px solid blue; } /* copied from failed-fptp */ /** AI suggestion re sv in flex box */ .container-svg { display: flex; /* Makes the container a flex container */ justify-content: space-between; /* Pushes content and SVG to opposite ends */ align-items: flex-start; /* Aligns items to the start of the cross axis */ } .content-area { width:50%; } .right-aligned-svg { width: 50%; /* Control size with a percentage of the container */ height: auto; /* Maintain aspect ratio */ /* Remove 'float: right' from this class */ } /** AI suggestion */ .area-link { fill: rgba(255, 0, 0, 0.3); /* Example: a semi-transparent red fill */ stroke: black; stroke-width: 1; cursor: pointer; opacity: 1; /* Make areas invisible normally */ transition: opacity 0.3s; } .area-link:hover { opacity: 1; /* Show on hover */ } .area-rect { Xfill: rgba(255, 0, 0, 0.3); /* Example: a semi-transparent red fill */ Xstroke: red; Xstroke-width: 2; Xcursor: pointer; Xopacity: 1; /* Make areas invisible normally */ Xtransition: opacity 0.3s; fill: skyblue; stroke:black; stroke-width:1; opacity: 1; /* Make areas invisible normally */ transition: opacity 0.3s; } /* END copy */ .my-iframe { width: 60vw; /* Sets width to 80% of the viewport width */ height: 345px; /* Sets a fixed height in pixels */ border: 1px solid black; /* Adds a visible border (e.g., 1px solid black) */ overflow: auto; /* Ensures scrollbars appear automatically if content overflows */ } .iframe-container2 { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (9/16 = 0.5625) */ } .iframe-container2 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: dashed; /* Add border back via CSS */ } /** https://www.w3schools.com/howto/howto_css_responsive_iframes.asp */ .ifrm-container { position: relative; left: 0vh; overflow: hidden; width: 485px; /* padding-top: 56.25%; 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ padding-top: 37%; /* or padding: 32vh 0 2vw 0; padding-top: 37%; */ border:none; } /* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe { position: absolute; top: 0; left: 0vw; bottom: 0; right: 0; width: 100%; height: 100%; } /* new stuff from TEST for Responsive Banner and Sticky Nav */ .hero-banner { /* Layout */ display: flex; justify-content: center; /* Centers horizontally */ align-items: center; /* Centers vertically */ text-align: center; /* when shrunck */ /* Sizing */ min-height: 10vh; /* Full screen height */ width: 100%; padding: 1rem; /* was 10px Padding prevents text hitting screen edges on mobile - also forces wrap into 2 rows at low and high browser width at 3rem but only with max-width 800px */ box-sizing: border-box; /* Visuals (Optional) */ background: url('savana-964-180.jpg'); background-size: cover; background-position: center; Xcolor: white; row-gap: 20px; } .hero-banner-content { max-width: 1000px; /* Keeps text readable on desktop at 800 forced 2 rows at wider browser width */ margin: 20vh 0 0 0; } .hero-banner-content h1 { font-family: 'Brush Script MT', cursive; /* my addition */ font-size: clamp(1rem, 3.5vw, 4rem); /* Fluid typography: scales with screen size was: 3rem - 2rem, 8vw, 4rem - clamp(1rem, 4vw, 6rem) */ font-weight: normal; margin: 1vh 1vw 1vh 1vw; /* reducde image height but not border rond dotte */ Xmargin-top: 15vh; Xmargin-right: -30vw; color: black; /* was white */ background-color: none; /* was #787878; grey; */ border: 0.2rem white; border-radius:10px; border-style: none solid none solid; padding: 0 0.5vw 0 0; /* looks like can.t alter hights */ } .navbar { /* The Sticky Magic position: sticky; position: -webkit-sticky; top: 0; */ position: fixed; top: 0; left: 0; right: 0; /* Ensures it knows the horizontal bounds */ width: 96%; /* Matches the container width */ max-width: 1024px; /* Match your content container's max-width */ margin: 0 auto; /* Centers the fixed element */ z-index: 1000; /* Layout appears also done in nav-links so remove here */ Xdisplay: flex; Xjustify-content: space-between; Xalign-items: left; Xpadding: 1rem 5%; /* Visuals */ background: #b4b4b4; /* was black #ffffff */ Xbox-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 100%; padding-right: 5vw; Xborder-radius: 25px; border-style: solid solid none solid; border-width: 1px; } .nav-links { display: flex; flex-wrap: wrap; /* Allows links to stack if the screen is too narrow NEW BIT */ justify-content: flex-start; /* NEW BIT */ list-style: none; Xgap: 10px 20px; font-size: 120%; margin: 0.5vh 0 0.5vh 0; } .nav-links li { text-decoration: none; color: white; } X.nav-links p, a {display: inline;} /* these from orig method and p no longer relavant */ .nav-links a::after {content: " > ";} .nav-links a {color: yellow;} /* Responsive adjustment for Mobile */ @media (max-width: 600px) { .Xnav-links { display: none; /* Usually replaced with a 'hamburger' menu on mobile */ } position: fixed; top: 0; /*AI last resourt fix */ } /* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_display_element_hover */ .set-hover:hover + .hide-hover { display: block; color: black; font-size: 110%; background: #CFF5A3; } .hide-hover { display: none; } .boxed-word { border: 0px solid black; /* Width, Style, Color */ xpadding: 20px 50px; /* Adds space inside the box so it isn't cramped */ xmargin: 0 20rem 0 0 ; background:none; } /* .boxed-word::after {content: url(under-construction-phone.jpg);} AI version follows */ .boxed-word::after { content: ""; /* Keeps the pseudo-element active */ display: inline-block; width: 20vw; /* Set your exact width */ height: 20vh; /* Set your exact height */ background-image: url(under-construction-phone.jpg); background-size: contain; /* Scales image to fit the box */ background-repeat: no-repeat; } /** FOOTER */ #footer { width: 960px; height: 100px; margin: 0px auto; background: #D9E40C; border-top: 2px solid #4A4A4A; font-size: 11px; color: #000000; border: 1px #0000FF solid; } #footer p { margin: 0; padding: 5px 10px; } #footer .copyright { float: left; margin: 30px 0px 0px 50px; padding-left: 20px; text-align: center; } #footer .links { float: right; margin: 30px 50px 0px 0px; padding-right: 20px; text-align: center; } #footer .css { padding-left: 20px; } #footer .xhtml { padding-left: 20px; } #footer a { }