diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 02154a8..3c6e1ad 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -253,31 +253,50 @@ pre.comment {
line-height: 1.2rem;
}
-h3.title { margin: 1.25rem 0 0.75rem 0 }
-p.meta { margin: 0.25rem 0 }
-p.summary { margin: 0.25rem 0 }
-p.listen-in { margin-top: 0 }
+table.hosts {
+ font-size: clamp(0.82rem, -0.25rem + 3vw , 1.0rem);
+ width: 100%;
+ background: white;
+ margin: 0 auto;
+ border-collapse: collapse;
+ display: inline-table;
-@media only screen and (max-width: 680px) {
- #container {width: 95%;}
- img#hprlogo {float: left; max-width: 85px; padding: .35em;}
- .column {width: 15%;}
- h1 {font-size: 140%;}
- h2 {font-size: 120%;}
- h3 {font-size: 100%;}
- nav.column { display: block; padding: 0em .25em 0em .25em;}
- #footer_page li {font-size: 85%; padding: .5em .25em .5em .25em;}
- footer p {font-size: 75%;}
- audio {float: none; }
}
-@media only screen and (max-width: 479px) {
- body {background: #ffffff; color: #4D4D4D; font-family: Verdana, Arial, Helvetica, sans-serif;/* 1em/1.5 OpenDyslexic, */}
- li {font-size: 100%; padding: .75em 0em .75em 0em; margin-left: -.25em;}
- img#hprlogo {float: left; max-width: 65px; padding: .35em;}
- .column {width: auto;}
- h1#sitename { clear: both;}
- a:link {text-decoration: none;}
- audio {padding: .7em 0em .5em 0em; width: 95%; max-width: 300px;}
- .audcredit { font-size: 65%; margin-bottom: 1em;}
+table.hosts tr:nth-child(even) {
+ background-color:#cccccc;
+ border-bottom: thick solid white;
+}
+
+table.hosts tr:nth-child(odd) {
+ background-color:white;
+ border-bottom: thick solid white;
+}
+
+table.hosts tr td img {
+ vertical-align:middle;
+ max-height: 80px;
+}
+
+table.hosts th:first-child,
+table.hosts td:first-child {
+ min-width: 60px;
+ max-width: 80px;
+ text-align: left;
+}
+
+table.hosts th:nth-child(2),
+table.hosts td:nth-child(2) {
+ text-align: left;
+ padding-left: clamp(0.15rem, -0.25rem + 3vw, 0.5rem);
+}
+
+table.hosts th:nth-child(3),
+table.hosts td:nth-child(3),
+table.hosts th:nth-child(4),
+table.hosts td:nth-child(4) {
+ width: 10%;
+ padding-right: clamp(0.10rem, -0.25rem + 3vw, 1rem);
+}
+
}