Create media breakpoint that matches original wide screen setting

For larger screens constrain viewing width and growth of font-size, and margins to approximately corresponding sizes of the original layout. Prevent things from getting too large.

public_html/css/hpr.css

@@ -384,4 +384,89 @@ fieldset > input {
 	border-radius: 0.2rem;
 }
 
+@media only screen and (min-width: 58rem) {
+	#container {
+		margin: 0.5rem auto;
+	}
+
+	.shadow {
+	  -moz-box-shadow:    1px 2px 5px 2px #675958;
+	  -webkit-box-shadow: 1px 2px 5px 2px #675958;
+	  box-shadow:         1px 2px 5px 2px #675958;
+	}
+
+	img#hprlogo {
+		margin-bottom: 1.5rem;
+	}
+
+	#hpr_banner {
+		float: left;
+	}
+
+	#hpr_banner h1#sitename {
+		font-size: 2rem;
+	}
+
+	#hpr_banner h2 {
+		font-size: 1rem;
+	}
+
+	header > hr {
+		clear: right;
+	}
+
+	footer #more_info nav.column {
+		clear: none;
+		float: left;
+		width: 19.5%;
+		margin-left: 0;
+	}
+
+	footer #more_info nav.column:first-child {
+		margin-left: 0.5rem;
+	}
+
+	footer #more_info nav.column ul li {
+		float: none;
+		margin-bottom: 0.5rem;
+	}
+
+	fieldset > table, 
+	fieldset > table thead, 
+	fieldset > table tbody, 
+	fieldset > table tr, 
+	fieldset > table th, 
+	fieldset > table td,
+	fieldset > table td input,
+	fieldset > table td textarea { 
+		display: revert; 
+		width: revert;
+	}
+
+	fieldset > table tr { 
+		vertical-align: baseline;
+	}
+
+	fieldset > table tr:nth-child(3) {
+		vertical-align: top;
+	}
+
+	fieldset > table tr:nth-child(3) td:first-child {
+		padding-top: 0.5rem;
+	}
+
+	fieldset > table tr:nth-last-child(3) td:first-child {
+		padding-top: 1rem;
+	}
+
+	fieldset > table tr:nth-last-child(2) {
+		vertical-align: top;	
+	}
+	fieldset > table tr:nth-last-child(2) td:first-child {
+		padding-top: 0.75rem;
+	}
+
+	fieldset > table td input[type="radio"] {
+		margin-top: 1.5rem;
+	}
 }