hpr_generator/public_html/css/hpr.css

@charset "utf-8";
/* Website design Copyright Ken Fallon - Released into the public domain/

https://creativecommons.org/publicdomain/ 
 
*/
/*
 *	See the following for the modern CSS responsive design techniques used in this file:
 *	- MDN web docs: Responsive design 
 *		-- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
 *	- Matthew James Tayler: Responsive Font Size (Optimal Text at Every Breakpoint) 
 *		-- https://matthewjamestaylor.com/responsive-font-size
 *	- CSS-Tricks: Linearly Scale font-size with CSS clamp() Based on the Viewport
 *		-- https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
*/ 

html { 
	margin: 0; 
	padding: 0; 
	display: block;
}

body { 
	display: block;
	background: #dfdfdf; 
	font-size: 1rem; /* fallback for browsers that don't support the clamp function) */
	font-size: clamp(1rem, 15px + 0.3vw, 1.07rem); 
	margin: 0;
	padding: 0;
}

div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
  font-family: Verdana, Arial, Helvetica, sans-serif;/* 1em/1.5 OpenDyslexic, */
  color: #4D4D4D; /* HPR Grey */
  background: white;
}

h1 {
	font-size: 1.5rem;
	margin: 1.25rem 0 0.75rem 0;
}

h2,
article * h1 {
	font-size: 1.45rem;
	margin: 1.25rem 0 0.75rem 0;
}

h3,
article * h2 {
	font-size: 1.25rem;
	margin: 1.25rem 0 0.75rem 0;
}

h4,
article * h3 {
	font-size: 1.15rem;
	margin: 1.25rem 0 0.75rem 0;
}

img {
	max-width: 100%;
	height: auto;
}

ul {
	padding-left: 1.15rem;
}

li {
	line-height: 1.25;
}

a {
	text-decoration: none;
}

a:hover {
	cursor: pointer;
}

hr {
	background: #4D4D4D;
	border: 0;
	height: 0.25em;
}

audio {
	padding: .7em 0em .5em 0em; 
	clear: both; 
	position: relative; 
	z-index:auto;
}

.audcredit { 
	font-size: 75%;
	margin-bottom: 1em;
}

p.meta {
	line-height: 1.25;
}

p.meta span label {
	font-weight: bold;
}

article > p,
#maincontent > p {
	line-height: 1.45;
}

article#previous_five_weeks > * {
	line-height: 1.35;
	margin: 0;
	padding: 0;
}

article#previous_five_weeks > h3 {
	margin: 1.5rem 0 0.5rem 0;
}

#container {
	max-width: 58rem;
	margin: 0.25rem;
	padding: 0.75rem; /* fallback for browsers that don't support the clamp function) */
	padding: clamp(0.75rem, -0.25rem + 3vw , 2.0rem);
	overflow: hidden;
	background: white;
	border: thin solid #4D4D4D;
}

.shadow {
  -moz-box-shadow:    2px 3px 6px 3px #675958;
  -webkit-box-shadow: 2px 3px 6px 3px #675958;
  box-shadow:         2px 3px 6px 3px #675958;
}
}

#hpr_banner { 
  display: block; 
  position: relative;
  border: 0; 
  margin: 0.75em;
  float: left;
}

#hpr_banner h1 {margin: -.25em 0em -.5em 0em;}
#hpr_banner h2 {font-size: 100%; font-weight: lighter; }
#hpr_banner h3 {font-size: 90%; font-weight: lighter; }

#accessible_menu {
  font-size: small;
}

/* The main navigation menu */
.menu {
  background: #4D4D4D; /* HPR Grey */
  text-align: Left;
  clear:both; /* Forces the menu to appear after the HPR Header block */
  padding: 0em 0em;
  margin: 0em 0em;
}

.menu ul ul { /* Causes the sub menus not to be displayed, until hover shows them */
  display: none;
}

#main_menu li a {display: block;}

.menu ul li { padding: .25em 0em;}

}

.menu ul { /* The menu bar background across screen */
  background: #4D4D4D; /* HPR Grey */
  color: white;
  padding: 0 10px; /* Keeps sub menus to the left */
  list-style: none;
  position: relative;
  margin: 0;
  display: inline-table;
}

.menu ul:after { /* Forces the dropdown to be a block with non float */
  content: ""; 
  clear: both; 
  display: block;
}

.menu ul li {
  background: #4D4D4D; /* HPR Grey */
  color: white;
  float: left;
  padding: .5em 1em;
}

.menu ul li a {
  background: #4D4D4D; /* HPR Grey */
  color: white;
  display: block; 
  text-decoration: none;
}
    
.menu ul ul {
  background: #4D4D4D; /* HPR Grey */
  color: white;
  padding: 0;
  position: absolute; 
  top: 100%;
}

.menu ul ul li {
  background: #4D4D4D; /* HPR Grey */
  color: white;
  float: none; 
  position: relative;
}
    
.menu ul ul ul {
  position: absolute; 
  left: 100%; 
  top:0;
}


hr {
  background: #4D4D4D;  /* HPR Grey */
  border: 0;
  height: 0.25em;
}

/* The multi colum footer layout */

#footer_page {
  width:100%;
}

.column {
  width:12%;
  background-color: white;
  color: #4D4D4D; /* HPR Grey */
  float:left;
  margin:0 10px;
  display: block;
}

.column li {
  list-style:none;
  padding: .25em 0em;
  font-size: 85%;
}

.thick_bar {
  width:100%;
  background-color: #4D4D4D; /* HPR Grey */
  color: white;
  float:left;   
  clear: both;
  height:1.5em;
  padding: .5em 0em .5em 0em;
  font-size: 1em;
  margin: 1em 0em 1em 0em;
}

#more_info {margin: auto;}
nav.column { display: block; padding: 0em 1em 0em 1em;}
#copyright {
  font-size: small;
  width:100%;
  float:left;   
}

article, #copyright p {
  padding: 0 10px;
}

audio {padding: .7em 0em .5em 0em; clear: both; position: relative; z-index:auto;}
.audcredit { font-size: 75%;margin-bottom: 1em;}
h1.showtitle { font-size: 125%;}

/* Full Index Page styling */
#index_full h2.title {
	font-weight: lighter;
	margin-bottom: -.5em;
	padding: .5em 0em 0em 0em; 
	font-size: 110%;}

#index_full p.meta {font-size: 85%;}

#small {
  font-size: small;
}

p.author { font-size: 85%;}
p.shownotes { padding: .5em;}
#maincontent footer p { /* font-size: 75%; */ margin-bottom: 1em;}
/* link styling */
a:link {text-decoration: none;}

table {
    width:100%;
}
table, th, td {
    border-collapse: collapse;
    padding: 2px;
    text-align: left;
}
table#t01, table#t01 th, table#t01 td {
    border: 1px solid black;
}
table#t01 th, table#t01 td {
    padding: 5px;
    text-align: left;
}
table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
   background-color:#fff;
}
table#t01 th	{
    background-color: #4D4D4D;
    color: white;
}

pre { /* Add background, border and scrollbar to <pre> */
    background: #eee;
    border: 1px solid #ddd;
    overflow: auto;
    clear: both;
}

table.hosts {
	background: white
}
table.hosts tr:nth-child(even) { background-color:#cccccc; }
table.hosts tr:nth-child(odd) { background-color:white; }
table.hosts tr td img { vertical-align:middle }

pre.comment {
	white-space: pre-wrap;
	padding: 2px;
	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 }

@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;}
}