hpr_generator/public_html/css/hpr.css

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

http://creativecommons.org/publicdomain/ 
 
*/

p.meta span label { font-weight: bold; }
@media only screen and (min-width: 479px) { 

body {background: #dfdfdf;}
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;
}


#container {
	width: 100%;
	max-width: 58em;
	margin: auto;
	overflow: hidden;
	padding: .5em;
	border: thin solid;
	background: white;
}

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

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

#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 }

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