html {
	overflow-y: scroll;
	font-size: 62.5%;
}

* {
	box-sizing: border-box;
}

body {
	background: #FFF;
	font-family: Ubuntu, sans-serif, helvetica, Arial, '-apple-system', BlinkMacSystemFont, 'avenir next', avenir, segoe ui, 'helvetica neue', roboto, noto;
	/* font-family: Ubuntu, sans-serif, helvetica, Arial, "-apple-system", BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, roboto, noto; */
	/* font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif; */
	font-weight: 400;
	font-size: 1.65rem;
}

#wrapper {
	margin: 0 auto;
	max-width: 100%;
	width: 98%;
	background-color: #FFF;
	border: 1px solid #878E63;
	border-radius: 2px;
	box-shadow: 0 0 10px rgba(12, 3, 25, 0.8);
}

br {
	content: "A" !important;
	display: block !important;
	margin-bottom: 1em !important;
}

/* main menu */

.topnav {
	overflow: hidden;
        background: #222;
}

.topnav a {
	float: left;
	display: block;
	color: #F1F0D1;
/*	text-align: center; */
	padding: 10px 16px;
	text-decoration: none;
/*	font-size: 1.45rem; */
/*	border-bottom: 5px solid transparent; */
}

.topnav a:hover {
	border-bottom: 5px solid red;
}

.topnav a.active {
	border-bottom: 5px solid red;
}

.topnav .icon {
	display: none;
}

.main_menu {
	border-bottom: 5px solid green;
}

/* end main menu */

a.home_page_link:link {
	color: blue;
	text-decoration: none;
	display: inline;
}

a.home_page_link:visited {
	color: blue;
}

a.home_page_link:hover {
	background-color: yellow;
}

a.home_page_link:active {
	color: blue;
}

.fixed-size {
	display: block;
	padding-top: 1em;
	padding-bottom: 1em;
}

.fixed-size-padding {
	padding: 0.4em;
}

.fixed-size img {
	border: 0.5em outset #d7c0c0;
	/*border: 0.5em solid gray;*/
}

table {
/*	width: 86%; */
	width: inherit;
	font-size: 0.95em; 
	font-family: 'Monospace', 'Sans-serif', 'Helvetica';
	table-layout: fixed;
	border-spacing: 0;
	border: 1px solid #E1E1E1;
	word-break: break-word;
}

table.center {
	margin-left: auto;
	margin-right: auto;
}

/*
td[rowspan] {
	border-bottom: 1px solid #fff;
}
*/


/* nth-child(1) = the first td in each tr */
td:nth-child(1) {
	width: 18%;
}

/* the second */
td:nth-child(2) {
	width: 20%;
}

/* the third */
td:nth-child(3) {
	width: 20%;
}

/* the third */
td:nth-child(4) {
	width: 30%;
}

th, td {
	border: 1px solid #E1E1E1;
	padding: 8px;
        text-align: left;
	overflow: hidden;
}

th {
	font-weight: bold;
        color: #000;
        background: #cccccc;
}

td {
        color: #000;
        background: transparent;
}

tr:hover td:not([rowspan]) {
	background-color: #CC6666;
	color: #FFFF00; 
}

table tr:nth-child(even) {
	background-color: #f2f2f2;
}

tr:first-child:hover {
	background-color: white;
}

/*
textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
}
*/

.scripts-bg {
	background-color: gainsboro;
	font-family: monospace;
	padding: 10px;
	content: "\a";
	white-space: pre;
}

.scripts-bg br {
	display: none;
}

.emph {
/*	font-family: MyFont-Bold; */
	font-weight: bold;
/*	font-size:*/
}

/*
.heading {
	font-weight: bold;
	font-size: 1.1em;
	color: #fd3204;
}
*/

.download-heading {
	font-weight: bold;
	font-size: 1.1em;
	color: #fd3204;
}

.comment {
	font-weight: bold;
	font-size: 1.5rem;
	color: #0064ff;
}

.clear_space {
	Padding: 20px;
}

.sub_heading {
	font-weight: bold;
	color: #0064ff;
}

.main {
/*	margin: 2% 10% 2% 10%; */
	width: 76%;
	margin: 0 auto;
/*	line-height: 150%; */
}

.main img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.page {
/*	margin-left: auto;
	margin-right: auto; */
/*	margin: 0 auto;
	width: 84%; */
	padding-bottom: 1em;
}

.page_text {
/* 03/05/2023 */
/*	line-height: 130%; */
/*	line-height: 101%; */
/* above changed for nl2p function */
}

.page img {
	width: auto;
}

.page_title_center {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-size: 1.1em;
	font-weight: bold;
	color: darkslategray;
}

.page_title {
	color: blue;
}

/* page menus */

.page_menu_container {
	width: 99%;
	background-color: #eee;
	padding: 10px;
	line-height: 160%;
}

a.page_menu:link {
	display: block;
	text-decoration: none;
	color: blue;
}
/*
a.page_menu:link {
	color: blue;
}
*/

a.page_menu:visited {
	color: blue;
}

a.page_menu:hover {
	color: white;
	background-color: #4CAF50;
}

a.page_menu:active {
	background-color: #4CAF50;
	color: white;
}

/* end page menu */

/* inline page menus */

a.page_menu_inline:link {
	display: inline;
	text-decoration: none;
	color: blue;
}

a.page_menu_inline:link {
	color: blue;
}

a.page_menu_inline:visited {
	color: blue;
}

a.page_menu_inline:hover {
	color: white;
	background-color: #4CAF50;
}

a.page_menu_inline:active {
	background-color: #4CAF50;
	color: white;
}

/* end page menu */

/* related menus */

.related-menu {
	padding-bottom: 1em;
	margin: 0 auto;

}

a.related_menu:link {
	color: blue;
	padding: 0 1px;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

a.related_menu:visited {
	color: blue;
	border-bottom: 1px solid transparent;
}

a.related_menu:hover {
/*	background-color: #ccc; */
	color: black;
	border-bottom: 1px solid blue;
	/* border-bottom: 1px solid red; */
}

a.related_menu:active {
	color: green;
/*	background-color: #ccc; */
	border-bottom: 1px solid red;
}

/* end related menus */

div#permalink_section {
	width: auto;
	word-wrap: break-word;
}

.heading {
	color: #396658;
	font-size: 1.12em;
	font-weight: bold;
	white-space: pre-line;
	-webkit-margin-before: 0.5em;
	-webkit-margin-after: 0.2em;
}

.download_title {
	color: #396658;
	font-size: 1.12em;
	font-weight: bold;
	white-space: pre-line;
/*	display: inline-block; */
	-webkit-margin-before: 0.5em;
	-webkit-margin-after: 0.2em;
}

.dac_filter {
	color: #396658;
	font-size: 1.12em;
	font-weight: bold;
	white-space: pre-line;
/*	display: inline-block; */
	-webkit-margin-before: 0.5em;
	-webkit-margin-after: 0.2em;
}

/*
.download_title:after {
	content: "\a";
	white-space: pre;
}
*/

/* h1, h2, h3, h4, h5, h6 { */

.h1_emph {
	color: #0064ff;
}

h1, h2, h3, h4, h5, h6 {
	-webkit-margin-before: 0.8em;
	-webkit-margin-after: 0.8em;
}

h1, h2, h3 {
	text-align: center;
	color: #6c7154;
}

h1 {
	font-size: 1.4em;
/*	color: #1E90FF; */
}

h2 {
	font-size: 1.3em;
}

h3 {
	font-size: 1.25em;
}

h4 {
	color: #396658;
	/* color: #686A8A;*/
	font-size: 1.12em;
	/*font-size: 0.95em;*/
	display: inline-block;
}

h5 {
	font-size: 0.85em;
	color: #31AD31;
	display: inline-block;
}

figcaption {
	clear: left;
	font-style: italic;
	font-weight: bold;
	line-height: 1.65em;
}

.linethrough {
	text-decoration: line-through;
}

div.spacer {
        clear: both;
}

.err {
	font-weight: bold;
	color: red;
}

.green {
	font-weight: bold;
	color: green;
}

.error {
	font-weight: bold;
	color: red;
}

.no-data {
	color: #A9A9A9;
}

/**************/

.row > .column {
	padding: 10px 8px;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

.center-cropped {
	object-fit: none; /* Do not scale the image */
	object-position: center; /* Center the image within the element */
	height: 138px;
	width: 185px;
}

.column {
	float: left;
	width: 28%;
	padding: 2px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #d8ff00;
	background-color: #4a4949;
}

/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}

pre {
	background: #eee;
	font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
	/* font-family: Consolas,Courier,monospace !important; */
	max-width: 100%;
	overflow: auto;
	padding: 1em !important;
}

.code-wrapper {
/*	margin: 0 auto;
	max-width: 100%;
	width: 98%;
	background-color: #FFF;
	border: 1px solid #878E63; */
	line-height: 2px;
	border-radius: 2px;
	box-shadow: 0 0 10px rgba(12, 3, 25, 0.8);
}

.code-background {
	margin: 10px;
	padding-top: 10px;
}
/*
.mycode {
    color: #000;
    background: 0 0;
    text-shadow: none;
    font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
    font-size: 1em;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
*/
code {
	font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
	background-color: #eee;
}

p {
	color: #2A2B24;
	line-height: 130%;
}

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

/* THD calc */

label[for="thdcalc"] {
	color: #B4886B;
	width: 8.5em;
	float: left;
	margin-top: 6px;
}

.thdResult {
	color: #1400ff;
	font-weight: bold;
}

/*
label[for="thdInput"] {
	width: 8.5em;
	float: left;
	display: block;
}

label[for="dBinput"] {
	width: 8.5em;
	float: left;
	display: block;
}

label[for="thdNinput"] {
	width: 8.5em;
	float: left;
	display: block;
}
*/

/* end THD calc */

/* ip calc */

label[for="ip_address"] {
	width: 10em;
	float: left;
	display: inline-block;
}

label[for="subnet_mask"] {
	width: 10em;
	float: left;
	display: inline-block;
}

label[for="result_start"] {
	width: 10em;
	float: left;
	display: inline-block;
}

label[for="result_end"] {
	width: 10em;
	float: left;
	display: inline-block;
}

label[for="result_network"] {
	width: 10em;
	float: left;
	display: inline-block;
}

label[for="result_broadcast"] {
	width: 10em;
	float: left;
	display: inline-block;
}

label[for="result_max"] {
	width: 10em;
	float: left;
	display: inline-block;
}

label[for="class"] {
	width: 10em;
	float: left;
	display: inline-block;
}

label[for="cidr"] {
	width: 10em;
	float: left;
	display: inline-block;
}

label[for="bits"] {
	width: 10em;
	float: left;
	display: inline-block;
}

label[for="result_size"] {
	width: 10em;
	float: left;
	display: inline-block;
}

.ipcalc_column {
	float: left;
	width: 50%;
}

textarea {
	width: 95%;
}

.tools_buttons {
	font-size: 1.5rem;
	background-color: #4CAF50;
	border: none;
	color: white;
	padding: 3px 14px;
	text-align: center;
	text-decoration: none;
	display: inline;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 4px;
}

/* end ipcalc */

/*

header {
	width: 96%;
	min-height: 125px;
	padding: 5px;
	text-align: center;
}
*/

/*

#nav_center {
	margin: 0 auto;
	display: table;
}

label {
	width: 3.6em;
	float: left;
}

label[for="message"] {
	width: 10em;
	float: left;
}

.button {
	background-color: #4CAF50;
	border: none;
	color: white;
	padding: 0.2em 1em;
	text-align: center;
	text-decoration: none;
	display: inline;
	font-size: 15px;
	margin: 4px 2px;
	cursor: pointer;
	vertical-align: middle;
}

.button {
	-webkit-transition-duration: 0.4s;  Safari
	transition-duration: 0.4s;
}

.button:hover {
	background-color: #63b4fb;
	color: yellow;
}

.banner img {
	width: 100%;
	border-top: 1px solid #878E63;
	border-bottom: 1px solid #878E63;
}

*/
.clearfix {
	clear: both;	
}

.home_main {
	margin: 2% 10% 2% 10%;
/* 03/05/2023 */
/*	line-height: 101%; */
/*	line-height: 175%; */
}

/*
.download_main {
	line-height: 125%;
}

.left-col {
	width: 55%;
	float: left;
	margin: -2% 1% 1% 1%;
}

.sidebar {
	width: 40%;
	float: right;
	margin: 1%;
	text-align: center;
}

.section {
	width: 29%;
	float: left;
	margin: 2% 2%;
	text-align: center;
}
*/

footer {
	background: #222;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
}

footer p, footer h3 {
	color: #F1F0D1;
	text-align: center;
}

footer p a {
	/* text-decoration: none; */
}

/*  responsiveness */

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* @media screen and (max-width: 478px) { */
@media screen and (max-width: 480px) {
	html {
		font-size: 100%;
	}
/*	body {
		font-size: 100%;
	} */
}

@media screen and (min-width: 960px) and (max-width: 1024px) {
	html {
		font-size: 100%;
	}
	body {
		font-size: 0.9rem;
	}
	.main {
		width: 96%;
	}
	.page {
		width: 98%;	
	}
	.ipcalc_column {
		width: 98%;
	}
}

@media screen and (min-width: 750px) and (max-width: 950px) {
	html {
		font-size: 100%;
	}
	body {
		font-size: 0.9rem;
	}
	.main {
		width: 96%;
	}
	.page {
		width: 98%;	
	}
	.ipcalc_column {
		width: 98%;
	}
}

@media screen and (max-width: 740px) {
	html {
		font-size: 92.5%;
	}
	h1 {
		font-size: 100%;
	}
	textarea {
		width: 99%;
	}
	.page {
        	width: 98%;
	}
	.page_text {
		
	}
	.section {
		float: left;
		width: 100%;
		margin: 0;
	}
	.main {
		margin: 0 auto;
		width: 98%;
	}
	.main img {
		display: inline;
	}
	.home_main {
		margin: 2% 2% 2% 2%;
	}
	.comment {
		font-size: 0.9rem;
	}
	.tools_buttons {
		font-size: 1rem;
	}
	.ipcalc_column {
		width: 98%;
	}
	a.page_menu:link {
		line-height: 300%;
	}
	.page_menu_container {
		width: 94%;
	}
	table {
		width: 100%;
	}
	.page_title_center {
		font-size: 0.8em;
	}
	.page_menu_container {
		width: 100%;
		line-height: 200%;
	}
	.column {
		float: left;
		width: 27%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}	
}