Creating one (only one) TAB

If you are interested, I have now coded your page further…

Desktop

…and this is how it renders on…

iPhone6

I can suppy the code for you if required. sunshine

1 Like

EDIT: We just crossed paths lol. I wrote the following earlier: My issue is that I’m having trouble integrating it into my document. And it isn’t helping that you are using your own naming conventions because then I have to go in and change them so I can relate to the document. I’m not good at this as Paul could tell you. SVG is just . . . alien. Read the below and if you’re inclined could you put the code directly into the document I uploaded last night sticking to my own naming conventions (where possible). That container can blow me lol. Thank you.

snadyleiby . . . I’ve already mentioned I changed your word ‘container’ to svgtab in both the css and the html. So that shouldn’t be a problem.

By now I’m confused as to which of your submissions I should be using. I’m using the html and css from your newest post; should I be using another? I added your code (below) to the respective sections of my page and still it does not work. Just a refresher, “Class3” was my original ‘hilitea’ (now your div id ‘text’).

It’s all well and good for you to produce a quality replica of Paul’s tab but at some point I need to pull it into my document snadyleiby and it has to work. Last night I posted a full codepen. Do you think you can plug in your code to that document? I’ll keep studying your code and let you know if I can get it to work. The more you can integrate it into that page (as an example) that I uploaded to Codepen last night the more grateful I will be because by now I am well and truly confused and getting a crushimg headache!

h1 {
   margin: 1.25rem 0;
   font: normal 2rem/2.2rem 'Special Elite', serif;
   text-align: center;
 }
#svgtab {
   position: relative;
   width: 11.5em; /* adjust value to suit the tab width */
   margin: auto;
 }
svg {
   display: block;
 }
#text {
   position: absolute;
   width: 100%;
   top: 50%;
   transform: translate( 0, -50% );
   background-color: transparent;
   font-family: 'Courier Prime';
   font-size: 1.4em; /* adjust value to suit the text width */
   font-weight: bold;
   text-align: center;
   color: #fff;
 }

And for the opening HTML . . .

 <h1>To-morrow, and to-morrow, and to-morrow,</h1>

 <div id="container">

  <svg viewBox="0 0 412 62" width="100%">
   <path d="M800 597 c-137 -47 -183 -84 -336 -270 -148 -182 -226 -240 -397
   -296 -37 -13 -67 -25 -67 -27 0 -2 928 -4 2063 -3 l2062 1 -80 27 c-180 63
   -249 114 -398 296 -63 77 -125 150 -138 162 -42 38 -142 93 -208 113 -61 19
   -98 20 -1250 20 l-1186 -1 -65 -22z" 
   transform="translate(0,62) scale(0.1,-0.1)"
   fill="#000"/>
  </svg>

  <div id="text">
   &mdash;Class 3&mdash;
  </div>

 . . . and my Table1 begins here

Check out the attachment, which contains all
the files that wiil be needed for your page,

semicodin-page.zip (24.4 KB)

You will then be able to change everything to
suit your personal preferences.

1 Like

I’m sorry, you once again abandoned me to the 4½” screen of my smartphone and split up the code instead of posting it whole— and altering my original code. I can’t read it; I can’t place it properly; it doesn’t make sense to me; it doesn’t look like anything I can even begin to grasp the concept of; it doesn’t render correctly; and at this point I give up.

I have a beautiful css model that works from Paul and I count myself lucky to have it. I’ll stick with that. I’m sorry to have troubled you snadyleiby but we’re on two incompatible wavelengths. Peace.

semicodin

No need to apologise. we all have different methods
for coding web pages.

For example, I was taught, many years ago, to remove
all internal and inline CSS from the HTML document
and place it in a CSS file. A similar procedure was also
recommended for internal JavaScript. It was also
suggested to me that I should place these items into
appropriate folders…

folder

This may seem stupidly unnecessary for your little project
but I have no idea how large it may become so I naturally
tend to code for all eventualities

You are happy to use this code for you special fonts…

<link href="https://fonts.googleapis.com/css?family=Courier+Prime" rel="stylesheet" media="screen">
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet" media="screen">

I just added…

<link rel="stylesheet" href="css/screen.css" media="screen">

…to it.

Far be it from me to insist that you change your methology,
you must obviously follow your heart.

You have not troubled me at all. At heart I am just a puzzle
solver and I select members’ problems and attempt to solve
them. In reality this is just for my personal satisfaction but
occasionally it may also satisfy the member who posed the
problem.

2 Likes

After all my ramblings, I almost forgot to give you what
you originally asked for - the page with nothing removed…

some-page-name.html

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Democratic Senate Seats</title>
<link href="https://fonts.googleapis.com/css?family=Courier+Prime" rel="stylesheet" media="screen">
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet" media="screen">
<style media="screen">
body {
   background-color: #f9f9f9;
   font: normal 1em / 1.5  arial, helvetica, sans-serif;
 }
h1 {
   margin: 1.25rem 0;
   font: normal 2rem/2.2rem 'Special Elite', serif;
   text-align: center;
 }
#svgtab {
   position: relative;
   width: 11.5em; /* adjust value to suit the tab width */
   margin: auto;
 }
svg {
   display: block;
 }
#text {
   position: absolute;
   width: 100%;
   top: 50%;
   transform: translate( 0, -50% );
   background-color: transparent;
   font-family: 'Courier Prime';
   font-size: 1.4em; /* adjust value to suit the text width */
   font-weight: bold;
   text-align: center;
   color: #fff;
 }
main{
   max-width: 44em;
   margin: auto;
   font-family: 'Courier Prime';
 }
a {
   display: block;
   padding: 0.5em 0;
   background-color: #000;
   color: #fff;
   text-align: center;
 }
main table {
   font-size: 1.5em;
   font-weight: bold;
   background-color: #ddd;
   border-collapse: collapse;
 } 
main table td {
   border: 1px solid #000;
 }
main table td:nth-of-type(odd) {
   width: 6.25rem;
 } 
main table td:nth-of-type(even) {
   padding: 0.5rem;
 }
main table td img {
   display: block;
   width: 100%;
   height: auto;
 }
main table span {
   color:#f00;
   background-color: #fff;
 }
</style>
</head>
<body>
 <h1>Democratic Senate Seats in 2024</h1>
 <div id="svgtab">
  <svg viewBox="0 0 412 62" width="100%">
   <path d="M800 597 c-137 -47 -183 -84 -336 -270 -148 -182 -226 -240 -397
   -296 -37 -13 -67 -25 -67 -27 0 -2 928 -4 2063 -3 l2062 1 -80 27 c-180 63
   -249 114 -398 296 -63 77 -125 150 -138 162 -42 38 -142 93 -208 113 -61 19
   -98 20 -1250 20 l-1186 -1 -65 -22z" 
   transform="translate(0,62) scale(0.1,-0.1)"
   fill="#000"/>
  </svg>
  <div id="text">
   &mdash;Class 3&mdash;
  </div>
 </div>
 <main>
  <a href="https://fvap.gov/guide/appendix/state-elections">Click here for current Primary Dates</a>
  <table>
   <tr>
    <td><img src="https://i.postimg.cc/VNZchm0R/icon.png" alt="#$!@"></td>
    <td>West Virginia Flips the Senate
     <span>50/50 All dates are for the primaries</span>; the General Election is November 5, 2024.
    </td>
   </tr>
  </table>
 </main>
</body>
</html>

Better late than never. sunshine

1 Like

Okay I got it to work snadyleiby. May I ask two questions? What would I adjust to lower the text on the tab — Class 3 — just a bit, say 10px? Does your

   top: 50%;
   transform: translate( 0, -50% );

have anything to do with it?

And what if I wanted the tab itself to be just a wee bit shorter — while still preserving your original top curves — say, 10px? or is this a simple percentage modification?

Thank you.

s

You could try these changes…
1.

  <svg viewBox="0 0 412 62" width="100%">

…to…

  <svg viewBox="0 0 440 66.2135" width="100%">

2.

svg {
   display: block;
 }

…to…

svg {
   display: block;
   margin-bottom: -2px;
 }

3.

   top: 50%;
   transform: translate( 0, -50% );

…to…

   top: 50%;
   transform: translate( -4%, -40% ); 

…perhaps !

1 Like

Okay I’ll run them up the flagpole. Snadyleiby to get your code to work in my page I had to ignore all of this:

main{
   max-width: 44em;
   margin: auto;
   font-family: 'Courier Prime';
 }
a {
   display: block;
   padding: 0.5em 0;
   background-color: #000;
   color: #fff;
   text-align: center;
 }
main table {
   font-size: 1.5em;
   font-weight: bold;
   background-color: #ddd;
   border-collapse: collapse;
 } 
main table td {
   border: 1px solid #000;
 }
main table td:nth-of-type(odd) {
   width: 6.25rem;
 } 
main table td:nth-of-type(even) {
   padding: 0.5rem;
 }
main table td img {
   display: block;
   width: 100%;
   height: auto;
 }
main table span {
   color:#f00;
   background-color: #fff;
 }

But I’m curious: What is the a { about?

Well SNADY1 places a gap beneath the tab and shifts the tab left. Nope.
SNADY2 doesn’t appear to do anything. Nope.
SNADY3 throws the centering on SVGlabel (was your style ‘.text’) off. Nope.

And if I put all of them together I get about a 15px gap between the tab and the table below it. Nnnnnnnope! :roll_eyes:

Remove the left and right transparent borders (SNIP)

Paul I wanted to ask you how I might control the verticals on your tab — the text that’s on the tab.

For example, how might I lower the text, say about 10px on my “—Class 3—” label.

AND how might I accommodate a 2- or 3-line label? I’m asking because you’re using a position: relative; on the style hilitea.

Thanks Paul.

Well, I don’t mind you slagging off my code.

I would humbly suggest, though, that you
post the code that you are using, starting at…

<!DOCTYPE HTML>

…and ending at…

</html>

… just for curiosity’s sake. banana

1 Like

I did not ask you for a codepen. groan2

I asked you for the code of the HTML file
that is not working with the code that I gave
you

1 Like

Do you mean the 4 snadlys? All they are is my css code with your 3 revisions (3 separate files, plus a 4th that has all 3 of the revisions in the one document) appended to my HTML. Do you really want 4 CSS files? With your modest edits? Okeedokee . . . :sunglasses:

Snadly1

<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bokor&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Patua+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@300..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Vidaloka&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Salsa&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">

<title>SNADY1 SVG 2022 TAB CLASS-3 SENATE &#7172; ELECTION</title>

<style>

body {
    width: 950px;
    margin: 2rem auto;
    margin-bottom: 3.75rem;
    margin-bottom: 3.75rem;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}
.title {
    text-align: center;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    font-family: 'special elite', serif;
    font-weight: 400;
    font-size: 3.13rem;
    line-height: 2.5rem;
}

            /* START PAUL’S MAGIC */

.hilitea {
    position: relative;
    text-align: center;
    border-radius: 20px 20px 0px 0px;
    color: white;
    padding: 1rem 1rem 0;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: bold;
}
.tab {
/*    border-bottom: 5px solid black;    .63rem groove #00ffff;    #00ffff cyan */
    display: flex;
    max-width: 950px;
    margin: auto;
    overflow:hidden;
}
.tab:after,
.tab:before {
    content: "";
    flex: 1;
    box-shadow: 0 34px #000;
/* this is necessary or a gap will show */
}
.tab:after {
    border-radius: 0 0 0 80px;
    margin-left:-8px;
}
.tab:before {
    border-radius: 0 0 80px 0;
    margin-right:-8px
}
.hilitea:before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0 0 0 0;
    z-index: -1;
    background: black;
    transform: perspective(100px) rotateX(36deg) translateY(5px);
    border-radius: 20px 20px 0 0;
}

            /* END PAUL’S MAGIC */

.table1 {
	padding-bottom: 6px;
	text-align: center;
	background: black;
	width: 100%;
}

.table2 {
    width: 100%;
    vertical-align: middle;
    border-top: .63rem groove #00ffff;   /* cyan */
    border-right: .63rem groove #00ffff;
    border-bottom: none;
    border-left: .63rem groove #00ffff;
    border-collapse: collapse;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}
td {
    padding-top: .6rem;
    padding-right: .6rem;
    padding-bottom: .2rem;
    padding-left: .7rem;
}
.td1 {
    width: 50%;
    color: black;
    text-align: center;
}
.td2 {
    width: 280px;
    color: black;
    text-align: center;
}
.th3 {
    width: 270px;
    color: white;
    text-align: center;
}

.table2 tbody tr:nth-child( odd ) {
    background-color: #ffffcc;      /* pastel yellow */
    border-bottom: .19rem solid black;
}
.table2 tbody tr:nth-child( even ) {
    background-color: white;
    border-bottom: .19rem solid black;
}

/* FILLING OUT THE CELL BORDERS */

.table2 tbody tr td:nth-of-type(1) {
    border-right: .19rem solid black;
    text-align: center;
}

.table2 tbody tr td:nth-of-type(2) {
    border-right: .19rem solid black;
    text-align: left;
}

.table3 {
    width: 100%;
    border: .63rem groove #00ffff;    /* cyan */
    border-collapse: collapse;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}
.th2 {
    width: 257px;
    color: white;
    text-align: center;
}

/* DEFINING THE HEADER */

.table3 th {
	border: .38rem solid #00ffff;    /* cyan */
    background-color: black;
    font-family: 'roboto slab', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    color: white;
    font-weight: bold;
    padding: .94rem;
}

/* APPLYING THE STRIPES */

.table3 tbody tr:nth-child( odd ) {
    background-color: #ffffcc;        /* pastel yellow */
    border-bottom: .19rem solid black;
}
.table3 tbody tr:nth-child( even ) {
    background-color: white;
    border-bottom: .19rem solid black;
}

/* FILLING OUT THE CELL BORDERS */

.table3 tbody tr td:nth-of-type(1) {
    border-right: .19rem solid black;
    text-align: center;
}
.table3 tbody tr td:nth-of-type(2) {
    border-right: .19rem solid black;
    text-align: left;
}

.table4 {
	text-align: center;
    width: 100%;
    border-top: none;
    border: .63rem groove #00ffff;    /* cyan */
    border-collapse: collapse;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}

.ctr {text-align: center}
.under {text-decoration: underline}

.tally {
    font-family: 'calistoga', serif;
    font-weight: 700;
	font-size: 2.25rem;
    line-height: 2.38rem;
    color: crimson;
}

.blu {color: blue}
.fusch {color: #ca009b}
.fuschi {color: #ca009b; font-style: italic}
.crim {color: crimson}
.crimi {color: crimson; font-style: italic}
.grey {color: grey}
.green {color: #2ca700}  /* green */

/*
a:active - a link the moment it is clicked
a:hover - a link when the user mouses over it
a:link - a normal, unvisited link
a:visited - a link the user has visited
*/
a:active {color: #ff70ff}
a:hover {color: #ff70ff}
a:link {color: blue}
a:visited {color: blue}

.redlink a:link {color: crimson}
.redlink a:visited {color: crimson}

.whlink a:link {
    color: white;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 400;
}
.whlink a:visited {
    color: #00ffff;      /*  cyan  */
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 400;
}

.refdm {
    color: crimson;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 2.38rem;
}
.cheney {
    color: black;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-weight: 400;
    font-size: 2.25rem;
    line-height: 2.38rem;
}

.notes {
	text-align: justify;
	color: black;
    margin: 2rem 2.5rem 1.25rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 400;
}
.insum {
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 700;
}
.condc {
	text-align: center;
    margin: 0rem 2.5rem 0rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 400;
}
.condl {
	text-align: left;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 400;
}

.intro {
	text-align: justify;
	color: #777777;    /* medium grey */
    margin: 2.5rem 2.5rem 1.25rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 400;
}
.abtn {
    margin: 1.25rem 1.25rem 0rem 2.5rem;
    font-family: "roboto slab", sans-serif;
    font-weight: 700;
    font-size: 2.13rem;
    line-height: 2.25rem;
}
.az {
	color: blue;
    margin: 0rem 1.25rem 1.25rem 2.5rem;
    font-family: "roboto condensed", sans-serif;
    font-weight: 700;
    font-size: 1.88rem;
    line-height: 2rem;
}
.footer {
	text-align: center;
    margin: 2.5rem 2.5rem 1.25rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 400;
}
.hiliteb {
    text-align: center;
    font-style: italic;
    color: #00ffff;    /* cyan, magenta is #ff00ff */
    background-color: black;
    border-top: .19rem solid black;
    border-left: .19rem solid black;
    border-right: .19rem solid black;
    border-bottom: .19rem solid black;
    padding-top: .4rem;
    padding-right: .6rem;
    padding-bottom: .2rem;
    padding-left: .7rem;
    font-family: 'courier prime', monospace;
    font-size: 2.13rem;
    line-height: 2.25rem;
    font-weight: bold;
}
.hilitec {
    text-align: center;
    color: black;
    background-color: #ffffcc;   /* pastel yellow */
    border-top: .19rem solid black;
    border-left: .19rem solid black;
    border-right: .19rem solid black;
    padding-top: .5rem;
    padding-right: .6rem;
    padding-bottom: .2rem;
    padding-left: .7rem;
    border-bottom: .19rem solid black;    font-family: 'courier prime', monospace;
    font-size: 2.13rem;
    line-height: 2.25rem;
    font-weight: bold;
}

.cell1 {
    display: block;
    color: black;
    background-color: #cccccc;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell2 {
    display: block;
    color: white;
    background-color: black;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell3 {
    display: block;
    color: black;
    background-color: #c8e3ff;  /* light blue */
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell4 {
    display: block;
    color: white;
    background-color: blue;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell5 {
   /* display: block;  */
    text-align: center;
    color: black;
    background-color: yellow;
    font-family: 'solway', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 700;
}
.solwaya {
    text-align: center;
    color: black
    font-family: 'solway', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 700;
}

ol.abtn {
    margin: 1.25rem 1.25rem 1.25rem 2.5rem;
    font-family: "roboto slab", sans-serif;
    font-weight: 700;
    font-size: 2.13rem;
    line-height: 2.25rem;
}
ol.abtn > li:nth-of-type(odd) {
    background-color: #eeeeee;      /* VERY light grey */
}
ol.abtn > li:nth-of-type(even) {
    background-color: white;
}

/* Columns is 273px — on line 382  */

#svgtab {
   position: relative;
   width: 11.5em; /* adjust value to suit the tab width */
   margin: auto;
 }
svg {
   display: block;
 }
#svglabel {
   position: absolute;
   width: 100%;
   top: 50%;
   transform: translate( 0, -50% );
   background-color: transparent;
   font-family: 'Courier Prime';
   font-size: 1.4em; /* adjust value to suit the text width */
   font-weight: bold;
   text-align: center;
   color: #fff;
 }
 
</style>
</head>

Snadly2

<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bokor&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Patua+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@300..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Vidaloka&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Salsa&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">

<title>SNADY2 SVG 2022 TAB CLASS-3 SENATE &#7172; ELECTION</title>

<style>

body {
    width: 950px;
    margin: 2rem auto;
    margin-bottom: 3.75rem;
    margin-bottom: 3.75rem;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}
.title {
    text-align: center;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    font-family: 'special elite', serif;
    font-weight: 400;
    font-size: 3.13rem;
    line-height: 2.5rem;
}

            /* START PAUL’S MAGIC */

.hilitea {
    position: relative;
    text-align: center;
    border-radius: 20px 20px 0px 0px;
    color: white;
    padding: 1rem 1rem 0;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: bold;
}
.tab {
/*    border-bottom: 5px solid black;    .63rem groove #00ffff;    #00ffff cyan */
    display: flex;
    max-width: 950px;
    margin: auto;
    overflow:hidden;
}
.tab:after,
.tab:before {
    content: "";
    flex: 1;
    box-shadow: 0 34px #000;
/* this is necessary or a gap will show */
}
.tab:after {
    border-radius: 0 0 0 80px;
    margin-left:-8px;
}
.tab:before {
    border-radius: 0 0 80px 0;
    margin-right:-8px
}
.hilitea:before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0 0 0 0;
    z-index: -1;
    background: black;
    transform: perspective(100px) rotateX(36deg) translateY(5px);
    border-radius: 20px 20px 0 0;
}

            /* END PAUL’S MAGIC */

.table1 {
	padding-bottom: 6px;
	text-align: center;
	background: black;
	width: 100%;
}

.table2 {
    width: 100%;
    vertical-align: middle;
    border-top: .63rem groove #00ffff;   /* cyan */
    border-right: .63rem groove #00ffff;
    border-bottom: none;
    border-left: .63rem groove #00ffff;
    border-collapse: collapse;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}
td {
    padding-top: .6rem;
    padding-right: .6rem;
    padding-bottom: .2rem;
    padding-left: .7rem;
}
.td1 {
    width: 50%;
    color: black;
    text-align: center;
}
.td2 {
    width: 280px;
    color: black;
    text-align: center;
}
.th3 {
    width: 270px;
    color: white;
    text-align: center;
}

.table2 tbody tr:nth-child( odd ) {
    background-color: #ffffcc;      /* pastel yellow */
    border-bottom: .19rem solid black;
}
.table2 tbody tr:nth-child( even ) {
    background-color: white;
    border-bottom: .19rem solid black;
}

/* FILLING OUT THE CELL BORDERS */

.table2 tbody tr td:nth-of-type(1) {
    border-right: .19rem solid black;
    text-align: center;
}

.table2 tbody tr td:nth-of-type(2) {
    border-right: .19rem solid black;
    text-align: left;
}

.table3 {
    width: 100%;
    border: .63rem groove #00ffff;    /* cyan */
    border-collapse: collapse;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}
.th2 {
    width: 257px;
    color: white;
    text-align: center;
}

/* DEFINING THE HEADER */

.table3 th {
	border: .38rem solid #00ffff;    /* cyan */
    background-color: black;
    font-family: 'roboto slab', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    color: white;
    font-weight: bold;
    padding: .94rem;
}

/* APPLYING THE STRIPES */

.table3 tbody tr:nth-child( odd ) {
    background-color: #ffffcc;        /* pastel yellow */
    border-bottom: .19rem solid black;
}
.table3 tbody tr:nth-child( even ) {
    background-color: white;
    border-bottom: .19rem solid black;
}

/* FILLING OUT THE CELL BORDERS */

.table3 tbody tr td:nth-of-type(1) {
    border-right: .19rem solid black;
    text-align: center;
}
.table3 tbody tr td:nth-of-type(2) {
    border-right: .19rem solid black;
    text-align: left;
}

.table4 {
	text-align: center;
    width: 100%;
    border-top: none;
    border: .63rem groove #00ffff;    /* cyan */
    border-collapse: collapse;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}

.ctr {text-align: center}
.under {text-decoration: underline}

.tally {
    font-family: 'calistoga', serif;
    font-weight: 700;
	font-size: 2.25rem;
    line-height: 2.38rem;
    color: crimson;
}

.blu {color: blue}
.fusch {color: #ca009b}
.fuschi {color: #ca009b; font-style: italic}
.crim {color: crimson}
.crimi {color: crimson; font-style: italic}
.grey {color: grey}
.green {color: #2ca700}  /* green */

/*
a:active - a link the moment it is clicked
a:hover - a link when the user mouses over it
a:link - a normal, unvisited link
a:visited - a link the user has visited
*/
a:active {color: #ff70ff}
a:hover {color: #ff70ff}
a:link {color: blue}
a:visited {color: blue}

.redlink a:link {color: crimson}
.redlink a:visited {color: crimson}

.whlink a:link {
    color: white;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 400;
}
.whlink a:visited {
    color: #00ffff;      /*  cyan  */
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 400;
}

.refdm {
    color: crimson;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 2.38rem;
}
.cheney {
    color: black;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-weight: 400;
    font-size: 2.25rem;
    line-height: 2.38rem;
}

.notes {
	text-align: justify;
	color: black;
    margin: 2rem 2.5rem 1.25rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 400;
}
.insum {
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 700;
}
.condc {
	text-align: center;
    margin: 0rem 2.5rem 0rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 400;
}
.condl {
	text-align: left;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 400;
}

.intro {
	text-align: justify;
	color: #777777;    /* medium grey */
    margin: 2.5rem 2.5rem 1.25rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 400;
}
.abtn {
    margin: 1.25rem 1.25rem 0rem 2.5rem;
    font-family: "roboto slab", sans-serif;
    font-weight: 700;
    font-size: 2.13rem;
    line-height: 2.25rem;
}
.az {
	color: blue;
    margin: 0rem 1.25rem 1.25rem 2.5rem;
    font-family: "roboto condensed", sans-serif;
    font-weight: 700;
    font-size: 1.88rem;
    line-height: 2rem;
}
.footer {
	text-align: center;
    margin: 2.5rem 2.5rem 1.25rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 400;
}
.hiliteb {
    text-align: center;
    font-style: italic;
    color: #00ffff;    /* cyan, magenta is #ff00ff */
    background-color: black;
    border-top: .19rem solid black;
    border-left: .19rem solid black;
    border-right: .19rem solid black;
    border-bottom: .19rem solid black;
    padding-top: .4rem;
    padding-right: .6rem;
    padding-bottom: .2rem;
    padding-left: .7rem;
    font-family: 'courier prime', monospace;
    font-size: 2.13rem;
    line-height: 2.25rem;
    font-weight: bold;
}
.hilitec {
    text-align: center;
    color: black;
    background-color: #ffffcc;   /* pastel yellow */
    border-top: .19rem solid black;
    border-left: .19rem solid black;
    border-right: .19rem solid black;
    padding-top: .5rem;
    padding-right: .6rem;
    padding-bottom: .2rem;
    padding-left: .7rem;
    border-bottom: .19rem solid black;    font-family: 'courier prime', monospace;
    font-size: 2.13rem;
    line-height: 2.25rem;
    font-weight: bold;
}

.cell1 {
    display: block;
    color: black;
    background-color: #cccccc;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell2 {
    display: block;
    color: white;
    background-color: black;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell3 {
    display: block;
    color: black;
    background-color: #c8e3ff;  /* light blue */
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell4 {
    display: block;
    color: white;
    background-color: blue;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell5 {
   /* display: block;  */
    text-align: center;
    color: black;
    background-color: yellow;
    font-family: 'solway', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 700;
}
.solwaya {
    text-align: center;
    color: black
    font-family: 'solway', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 700;
}

ol.abtn {
    margin: 1.25rem 1.25rem 1.25rem 2.5rem;
    font-family: "roboto slab", sans-serif;
    font-weight: 700;
    font-size: 2.13rem;
    line-height: 2.25rem;
}
ol.abtn > li:nth-of-type(odd) {
    background-color: #eeeeee;      /* VERY light grey */
}
ol.abtn > li:nth-of-type(even) {
    background-color: white;
}

/* Columns is 273px — on line 382  */

#svgtab {
   position: relative;
   width: 11.5em; /* adjust value to suit the tab width */
   margin: auto;
 }
svg {
   display: block;
   margin-bottom: -2px;
 }
#svglabel {
   position: absolute;
   width: 100%;
   top: 50%;
   transform: translate( 0, -50% );
   background-color: transparent;
   font-family: 'Courier Prime';
   font-size: 1.4em; /* adjust value to suit the text width */
   font-weight: bold;
   text-align: center;
   color: #fff;
 }
 
</style>
</head>

Snadly3

<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bokor&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Patua+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@300..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Vidaloka&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Salsa&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">

<title>SNADY3 SVG 2022 TAB CLASS-3 SENATE &#7172; ELECTION</title>

<style>

body {
    width: 950px;
    margin: 2rem auto;
    margin-bottom: 3.75rem;
    margin-bottom: 3.75rem;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}
.title {
    text-align: center;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    font-family: 'special elite', serif;
    font-weight: 400;
    font-size: 3.13rem;
    line-height: 2.5rem;
}

            /* START PAUL’S MAGIC */

.hilitea {
    position: relative;
    text-align: center;
    border-radius: 20px 20px 0px 0px;
    color: white;
    padding: 1rem 1rem 0;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: bold;
}
.tab {
/*    border-bottom: 5px solid black;    .63rem groove #00ffff;    #00ffff cyan */
    display: flex;
    max-width: 950px;
    margin: auto;
    overflow:hidden;
}
.tab:after,
.tab:before {
    content: "";
    flex: 1;
    box-shadow: 0 34px #000;
/* this is necessary or a gap will show */
}
.tab:after {
    border-radius: 0 0 0 80px;
    margin-left:-8px;
}
.tab:before {
    border-radius: 0 0 80px 0;
    margin-right:-8px
}
.hilitea:before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0 0 0 0;
    z-index: -1;
    background: black;
    transform: perspective(100px) rotateX(36deg) translateY(5px);
    border-radius: 20px 20px 0 0;
}

            /* END PAUL’S MAGIC */

.table1 {
	padding-bottom: 6px;
	text-align: center;
	background: black;
	width: 100%;
}

.table2 {
    width: 100%;
    vertical-align: middle;
    border-top: .63rem groove #00ffff;   /* cyan */
    border-right: .63rem groove #00ffff;
    border-bottom: none;
    border-left: .63rem groove #00ffff;
    border-collapse: collapse;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}
td {
    padding-top: .6rem;
    padding-right: .6rem;
    padding-bottom: .2rem;
    padding-left: .7rem;
}
.td1 {
    width: 50%;
    color: black;
    text-align: center;
}
.td2 {
    width: 280px;
    color: black;
    text-align: center;
}
.th3 {
    width: 270px;
    color: white;
    text-align: center;
}

.table2 tbody tr:nth-child( odd ) {
    background-color: #ffffcc;      /* pastel yellow */
    border-bottom: .19rem solid black;
}
.table2 tbody tr:nth-child( even ) {
    background-color: white;
    border-bottom: .19rem solid black;
}

/* FILLING OUT THE CELL BORDERS */

.table2 tbody tr td:nth-of-type(1) {
    border-right: .19rem solid black;
    text-align: center;
}

.table2 tbody tr td:nth-of-type(2) {
    border-right: .19rem solid black;
    text-align: left;
}

.table3 {
    width: 100%;
    border: .63rem groove #00ffff;    /* cyan */
    border-collapse: collapse;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}
.th2 {
    width: 257px;
    color: white;
    text-align: center;
}

/* DEFINING THE HEADER */

.table3 th {
	border: .38rem solid #00ffff;    /* cyan */
    background-color: black;
    font-family: 'roboto slab', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    color: white;
    font-weight: bold;
    padding: .94rem;
}

/* APPLYING THE STRIPES */

.table3 tbody tr:nth-child( odd ) {
    background-color: #ffffcc;        /* pastel yellow */
    border-bottom: .19rem solid black;
}
.table3 tbody tr:nth-child( even ) {
    background-color: white;
    border-bottom: .19rem solid black;
}

/* FILLING OUT THE CELL BORDERS */

.table3 tbody tr td:nth-of-type(1) {
    border-right: .19rem solid black;
    text-align: center;
}
.table3 tbody tr td:nth-of-type(2) {
    border-right: .19rem solid black;
    text-align: left;
}

.table4 {
	text-align: center;
    width: 100%;
    border-top: none;
    border: .63rem groove #00ffff;    /* cyan */
    border-collapse: collapse;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}

.ctr {text-align: center}
.under {text-decoration: underline}

.tally {
    font-family: 'calistoga', serif;
    font-weight: 700;
	font-size: 2.25rem;
    line-height: 2.38rem;
    color: crimson;
}

.blu {color: blue}
.fusch {color: #ca009b}
.fuschi {color: #ca009b; font-style: italic}
.crim {color: crimson}
.crimi {color: crimson; font-style: italic}
.grey {color: grey}
.green {color: #2ca700}  /* green */

/*
a:active - a link the moment it is clicked
a:hover - a link when the user mouses over it
a:link - a normal, unvisited link
a:visited - a link the user has visited
*/
a:active {color: #ff70ff}
a:hover {color: #ff70ff}
a:link {color: blue}
a:visited {color: blue}

.redlink a:link {color: crimson}
.redlink a:visited {color: crimson}

.whlink a:link {
    color: white;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 400;
}
.whlink a:visited {
    color: #00ffff;      /*  cyan  */
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 400;
}

.refdm {
    color: crimson;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 2.38rem;
}
.cheney {
    color: black;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-weight: 400;
    font-size: 2.25rem;
    line-height: 2.38rem;
}

.notes {
	text-align: justify;
	color: black;
    margin: 2rem 2.5rem 1.25rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 400;
}
.insum {
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 700;
}
.condc {
	text-align: center;
    margin: 0rem 2.5rem 0rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 400;
}
.condl {
	text-align: left;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 400;
}

.intro {
	text-align: justify;
	color: #777777;    /* medium grey */
    margin: 2.5rem 2.5rem 1.25rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 400;
}
.abtn {
    margin: 1.25rem 1.25rem 0rem 2.5rem;
    font-family: "roboto slab", sans-serif;
    font-weight: 700;
    font-size: 2.13rem;
    line-height: 2.25rem;
}
.az {
	color: blue;
    margin: 0rem 1.25rem 1.25rem 2.5rem;
    font-family: "roboto condensed", sans-serif;
    font-weight: 700;
    font-size: 1.88rem;
    line-height: 2rem;
}
.footer {
	text-align: center;
    margin: 2.5rem 2.5rem 1.25rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 400;
}
.hiliteb {
    text-align: center;
    font-style: italic;
    color: #00ffff;    /* cyan, magenta is #ff00ff */
    background-color: black;
    border-top: .19rem solid black;
    border-left: .19rem solid black;
    border-right: .19rem solid black;
    border-bottom: .19rem solid black;
    padding-top: .4rem;
    padding-right: .6rem;
    padding-bottom: .2rem;
    padding-left: .7rem;
    font-family: 'courier prime', monospace;
    font-size: 2.13rem;
    line-height: 2.25rem;
    font-weight: bold;
}
.hilitec {
    text-align: center;
    color: black;
    background-color: #ffffcc;   /* pastel yellow */
    border-top: .19rem solid black;
    border-left: .19rem solid black;
    border-right: .19rem solid black;
    padding-top: .5rem;
    padding-right: .6rem;
    padding-bottom: .2rem;
    padding-left: .7rem;
    border-bottom: .19rem solid black;    font-family: 'courier prime', monospace;
    font-size: 2.13rem;
    line-height: 2.25rem;
    font-weight: bold;
}

.cell1 {
    display: block;
    color: black;
    background-color: #cccccc;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell2 {
    display: block;
    color: white;
    background-color: black;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell3 {
    display: block;
    color: black;
    background-color: #c8e3ff;  /* light blue */
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell4 {
    display: block;
    color: white;
    background-color: blue;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell5 {
   /* display: block;  */
    text-align: center;
    color: black;
    background-color: yellow;
    font-family: 'solway', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 700;
}
.solwaya {
    text-align: center;
    color: black
    font-family: 'solway', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 700;
}

ol.abtn {
    margin: 1.25rem 1.25rem 1.25rem 2.5rem;
    font-family: "roboto slab", sans-serif;
    font-weight: 700;
    font-size: 2.13rem;
    line-height: 2.25rem;
}
ol.abtn > li:nth-of-type(odd) {
    background-color: #eeeeee;      /* VERY light grey */
}
ol.abtn > li:nth-of-type(even) {
    background-color: white;
}

/* Columns is 273px — on line 382  */

#svgtab {
   position: relative;
   width: 11.5em; /* adjust value to suit the tab width */
   margin: auto;
 }
svg {
   display: block;
 }
#svglabel {
   position: absolute;
   width: 100%;
   top: 50%;
   transform: translate( -4%, -40% );
   background-color: transparent;
   font-family: 'Courier Prime';
   font-size: 1.4em; /* adjust value to suit the text width */
   font-weight: bold;
   text-align: center;
   color: #fff;
 }
 
</style>
</head>

Snadly4

<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bokor&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Patua+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@300..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Vidaloka&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Salsa&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">

<title>SNADY4 Assembled SVG 2022 TAB CLASS-3 SENATE &#7172; ELECTION</title>

<style>

body {
    width: 950px;
    margin: 2rem auto;
    margin-bottom: 3.75rem;
    margin-bottom: 3.75rem;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}
.title {
    text-align: center;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    font-family: 'special elite', serif;
    font-weight: 400;
    font-size: 3.13rem;
    line-height: 2.5rem;
}

            /* START PAUL’S MAGIC */

.hilitea {
    position: relative;
    text-align: center;
    border-radius: 20px 20px 0px 0px;
    color: white;
    padding: 1rem 1rem 0;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: bold;
}
.tab {
/*    border-bottom: 5px solid black;    .63rem groove #00ffff;    #00ffff cyan */
    display: flex;
    max-width: 950px;
    margin: auto;
    overflow:hidden;
}
.tab:after,
.tab:before {
    content: "";
    flex: 1;
    box-shadow: 0 34px #000;
/* this is necessary or a gap will show */
}
.tab:after {
    border-radius: 0 0 0 80px;
    margin-left:-8px;
}
.tab:before {
    border-radius: 0 0 80px 0;
    margin-right:-8px
}
.hilitea:before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0 0 0 0;
    z-index: -1;
    background: black;
    transform: perspective(100px) rotateX(36deg) translateY(5px);
    border-radius: 20px 20px 0 0;
}

            /* END PAUL’S MAGIC */

.table1 {
	padding-bottom: 6px;
	text-align: center;
	background: black;
	width: 100%;
}

.table2 {
    width: 100%;
    vertical-align: middle;
    border-top: .63rem groove #00ffff;   /* cyan */
    border-right: .63rem groove #00ffff;
    border-bottom: none;
    border-left: .63rem groove #00ffff;
    border-collapse: collapse;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}
td {
    padding-top: .6rem;
    padding-right: .6rem;
    padding-bottom: .2rem;
    padding-left: .7rem;
}
.td1 {
    width: 50%;
    color: black;
    text-align: center;
}
.td2 {
    width: 280px;
    color: black;
    text-align: center;
}
.th3 {
    width: 270px;
    color: white;
    text-align: center;
}

.table2 tbody tr:nth-child( odd ) {
    background-color: #ffffcc;      /* pastel yellow */
    border-bottom: .19rem solid black;
}
.table2 tbody tr:nth-child( even ) {
    background-color: white;
    border-bottom: .19rem solid black;
}

/* FILLING OUT THE CELL BORDERS */

.table2 tbody tr td:nth-of-type(1) {
    border-right: .19rem solid black;
    text-align: center;
}

.table2 tbody tr td:nth-of-type(2) {
    border-right: .19rem solid black;
    text-align: left;
}

.table3 {
    width: 100%;
    border: .63rem groove #00ffff;    /* cyan */
    border-collapse: collapse;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}
.th2 {
    width: 257px;
    color: white;
    text-align: center;
}

/* DEFINING THE HEADER */

.table3 th {
	border: .38rem solid #00ffff;    /* cyan */
    background-color: black;
    font-family: 'roboto slab', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    color: white;
    font-weight: bold;
    padding: .94rem;
}

/* APPLYING THE STRIPES */

.table3 tbody tr:nth-child( odd ) {
    background-color: #ffffcc;        /* pastel yellow */
    border-bottom: .19rem solid black;
}
.table3 tbody tr:nth-child( even ) {
    background-color: white;
    border-bottom: .19rem solid black;
}

/* FILLING OUT THE CELL BORDERS */

.table3 tbody tr td:nth-of-type(1) {
    border-right: .19rem solid black;
    text-align: center;
}
.table3 tbody tr td:nth-of-type(2) {
    border-right: .19rem solid black;
    text-align: left;
}

.table4 {
	text-align: center;
    width: 100%;
    border-top: none;
    border: .63rem groove #00ffff;    /* cyan */
    border-collapse: collapse;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    color: black;
}

.ctr {text-align: center}
.under {text-decoration: underline}

.tally {
    font-family: 'calistoga', serif;
    font-weight: 700;
	font-size: 2.25rem;
    line-height: 2.38rem;
    color: crimson;
}

.blu {color: blue}
.fusch {color: #ca009b}
.fuschi {color: #ca009b; font-style: italic}
.crim {color: crimson}
.crimi {color: crimson; font-style: italic}
.grey {color: grey}
.green {color: #2ca700}  /* green */

/*
a:active - a link the moment it is clicked
a:hover - a link when the user mouses over it
a:link - a normal, unvisited link
a:visited - a link the user has visited
*/
a:active {color: #ff70ff}
a:hover {color: #ff70ff}
a:link {color: blue}
a:visited {color: blue}

.redlink a:link {color: crimson}
.redlink a:visited {color: crimson}

.whlink a:link {
    color: white;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 400;
}
.whlink a:visited {
    color: #00ffff;      /*  cyan  */
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 400;
}

.refdm {
    color: crimson;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 2.38rem;
}
.cheney {
    color: black;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-weight: 400;
    font-size: 2.25rem;
    line-height: 2.38rem;
}

.notes {
	text-align: justify;
	color: black;
    margin: 2rem 2.5rem 1.25rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 400;
}
.insum {
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 700;
}
.condc {
	text-align: center;
    margin: 0rem 2.5rem 0rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 400;
}
.condl {
	text-align: left;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 400;
}

.intro {
	text-align: justify;
	color: #777777;    /* medium grey */
    margin: 2.5rem 2.5rem 1.25rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 400;
}
.abtn {
    margin: 1.25rem 1.25rem 0rem 2.5rem;
    font-family: "roboto slab", sans-serif;
    font-weight: 700;
    font-size: 2.13rem;
    line-height: 2.25rem;
}
.az {
	color: blue;
    margin: 0rem 1.25rem 1.25rem 2.5rem;
    font-family: "roboto condensed", sans-serif;
    font-weight: 700;
    font-size: 1.88rem;
    line-height: 2rem;
}
.footer {
	text-align: center;
    margin: 2.5rem 2.5rem 1.25rem 2.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 400;
}
.hiliteb {
    text-align: center;
    font-style: italic;
    color: #00ffff;    /* cyan, magenta is #ff00ff */
    background-color: black;
    border-top: .19rem solid black;
    border-left: .19rem solid black;
    border-right: .19rem solid black;
    border-bottom: .19rem solid black;
    padding-top: .4rem;
    padding-right: .6rem;
    padding-bottom: .2rem;
    padding-left: .7rem;
    font-family: 'courier prime', monospace;
    font-size: 2.13rem;
    line-height: 2.25rem;
    font-weight: bold;
}
.hilitec {
    text-align: center;
    color: black;
    background-color: #ffffcc;   /* pastel yellow */
    border-top: .19rem solid black;
    border-left: .19rem solid black;
    border-right: .19rem solid black;
    padding-top: .5rem;
    padding-right: .6rem;
    padding-bottom: .2rem;
    padding-left: .7rem;
    border-bottom: .19rem solid black;    font-family: 'courier prime', monospace;
    font-size: 2.13rem;
    line-height: 2.25rem;
    font-weight: bold;
}

.cell1 {
    display: block;
    color: black;
    background-color: #cccccc;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell2 {
    display: block;
    color: white;
    background-color: black;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell3 {
    display: block;
    color: black;
    background-color: #c8e3ff;  /* light blue */
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell4 {
    display: block;
    color: white;
    background-color: blue;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.cell5 {
   /* display: block;  */
    text-align: center;
    color: black;
    background-color: yellow;
    font-family: 'solway', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 700;
}
.solwaya {
    text-align: center;
    color: black
    font-family: 'solway', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: 700;
}

ol.abtn {
    margin: 1.25rem 1.25rem 1.25rem 2.5rem;
    font-family: "roboto slab", sans-serif;
    font-weight: 700;
    font-size: 2.13rem;
    line-height: 2.25rem;
}
ol.abtn > li:nth-of-type(odd) {
    background-color: #eeeeee;      /* VERY light grey */
}
ol.abtn > li:nth-of-type(even) {
    background-color: white;
}

/* Columns is 273px — on line 382  */

#svgtab {
   position: relative;
   width: 11.5em; /* adjust value to suit the tab width */
   margin: auto;
 }
svg {
   display: block
   margin-bottom: -2px;
 }
#svglabel {
   position: absolute;
   width: 100%;
   top: 50%;
   transform: translate( 0, -50% );
   transform: translate( -4%, -40% );
   background-color: transparent;
   font-family: 'Courier Prime';
   font-size: 1.4em; /* adjust value to suit the text width */
   font-weight: bold;
   text-align: center;
   color: #fff;
 }
 
</style>
</head>

No I do not want anything further.

We are, it seems, no longer singing from the same hymn sheet.

I think that it would be better if I just quitely retire.

1 Like