@font-face {
    font-family: 'Nuckle-Regular';
    src: url('../fonts/Nuckle-Regular.eot');
    src: local('NuckleRegular'), local('Nuckle-Regular'),
        url('../fonts/Nuckle-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Nuckle-Regular.woff2') format('woff2'),
        url('../fonts/Nuckle-Regular.woff') format('woff'),
        url('../fonts/Nuckle-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Nuckle-Medium';
    src: url('../fonts/Nuckle-Medium.eot');
    src: local('NuckleMedium'), local('Nuckle-Medium'),
        url('../fonts/Nuckle-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Nuckle-Medium.woff2') format('woff2'),
        url('../fonts/Nuckle-Medium.woff') format('woff'),
        url('../fonts/Nuckle-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Nuckle-Semibold';
    src: url('../fonts/Nuckle-Semibold.eot');
    src: local('NuckleSemibold'), local('Nuckle-Semibold'),
        url('../fonts/Nuckle-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Nuckle-Semibold.woff2') format('woff2'),
        url('../fonts/Nuckle-Semibold.woff') format('woff'),
        url('../fonts/Nuckle-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Nuckle-Bold';
    src: url('../fonts/Nuckle-Bold.eot');
    src: local('NuckleBold'), local('Nuckle-Bold'),
        url('../fonts/Nuckle-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Nuckle-Bold.woff2') format('woff2'),
        url('../fonts/Nuckle-Bold.woff') format('woff'),
        url('../fonts/Nuckle-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
body {
/*	background-image: url("../base/nmra_background.jpg");
	background-attachment: fixed;*/
	background-color: #E1D8C8;
	color: #2b161a;
	margin: 0;
	font-family: Nuckle-Regular, Helvetica, sans-serif;
	font-size: 18px;
	letter-spacing: 0em;
}
/*body, div { background-color: transparent; }*/
div { background-color: transparent; }
div.container {
	margin: auto;	/* To horizontally center a block element (like div), use margin: auto; */
	padding: 5px;
	width: 98%;
}
.topic {
	margin: auto;
	overflow: hidden;
	background-color: transparent;
	padding: 0px;
	width: 100%;
}
div.border, div.border-nh {
	border: 1px solid #777;
	color: #000;
	text-decoration: none;
	margin-top: 5px;
}
div.border-nh:hover { 	background-color: transparent; }
h4, h3, h2 { margin: 7px; }
p {
	margin: 17px;
	line-height: 125%;
}
a {
	color:#00b;
}
a:visited {
	color:#609;
}
a.bdr {
	color: #000;
	text-decoration: none;
}
a.bdr:hover {
	background-color: transparent;
	color: #222;
}
.boldbutton {
	background:#ddd;
	padding: 0px 5px;
	border: 0.5px solid #888;
	border-radius: 5px;
	white-space: wrap;
	font-size: 22px;
	font-weight: bold;
}
.ltbutton {
	background:#ddd;
	padding: 0px 5px;
	border: 0.5px solid #888;
	border-radius: 5px;
	white-space: nowrap;
}
.medbtn {
	background-color: #ddd;
	color: #000;
	padding: 0px 25px;
	font-size: 18px;
	text-decoration: none;
	border-radius: 5px;
	border: 2px solid #000;
	display: inline-block;
	
}
.medbtn:visited { color: #000; }
.div_name {
	background:none;
	color: #003;
	font-family: Georgia, Garamond, sans-serif;
	font-size: 28px;
	font-weight: bold;
}
.boldred {
	font-weight: bold;
	font-size: 22px;
	color: #a00;
}
.center { text-align: center; }
/* items */
/* container padding=10, item padding & ? =10, (n+1)*10
/* responsive calc: screenWidth - ((n+1) * 10) / n / screenWidth = %   (round down)  */
.item { display: inline-block; padding: 4px; vertical-align: top; width: 96%; }
.item250 { display: inline-block; padding: 4px; vertical-align: top; width: 15.8%; }
@media only screen and (max-width: 1500px) { .item250  { width: 19.0%;   } }	/* ( 250 * 6) */
@media only screen and (max-width: 1250px) { .item250  { width: 23.7%;   } }	/* ( 250 * 5) */
@media only screen and (max-width: 1000px) { .item250  { width: 31.5%;   } }	/* ( 250 * 4) */
@media only screen and (max-width: 750px)  { .item250  { width: 47.0%;   } }	/* ( 250 * 3) */
@media only screen and (max-width: 500px)  { .item250  { width: 92.0%;   } }	/* ( 250 * 2) */
.item350 { display: inline-block; padding: 4px; vertical-align: top; width: 16.1%; }
@media only screen and (max-width: 2100px) { .item350  { width: 19.3%;   } }	/* ( 350 * 6) */
@media only screen and (max-width: 1750px) { .item350  { width: 24.1%;   } }	/* ( 350 * 5) */
@media only screen and (max-width: 1400px) { .item350  { width: 32.0%;   } }	/* ( 350 * 4) */
@media only screen and (max-width: 1050px) { .item350  { width: 47.8%;   } }	/* ( 350 * 3) */
@media only screen and (max-width: 700px)  { .item350  { width: 94.2%;   } }	/* ( 350 * 2) */
.item500 { display: inline-block; padding: 4px; vertical-align: top; width: 16.2%; }
@media only screen and (max-width: 3000px) { .item500  { width: 19.5%;   } }	/* ( 500 * 6) */
@media only screen and (max-width: 2500px) { .item500  { width: 24.3%;   } }	/* ( 500 * 5) */
@media only screen and (max-width: 2000px) { .item500  { width: 32.4%;   } }	/* ( 500 * 4) */
@media only screen and (max-width: 1500px) { .item500  { width: 48.5%;   } }	/* ( 500 * 3) */
@media only screen and (max-width: 1000px) { .item500  { width: 96.0%;   } }	/* ( 500 * 2) */

/* header */
.topnav {
	margin: auto;
	overflow: hidden;
	padding: 0px;
	width: 100%;
}
.topnav a, .topnav span {
	float: left;
	padding: 8px 2px;
	text-align: center;
	font-size: 18px;
	text-decoration: none;
	width: 16.2%;
	height: 22px;
}
.butnav {
	font-size: 18px;
}
@media only screen and (max-width: 1500px) { .topnav a, .topnav span { width: 19.5%;   } }	/* ( 250 * 6) */
@media only screen and (max-width: 1250px) { .topnav a, .topnav span { width: 24.3%;   } }	/* ( 250 * 5) */
@media only screen and (max-width: 1000px) { .topnav a, .topnav span { width: 32.5%; } }	/* ( 250 * 4) */
@media only screen and (max-width: 750px)  { .topnav a, .topnav span { width: 48.8%;   } }	/* ( 250 * 3) */
@media only screen and (max-width: 500px)  { .topnav a, .topnav span { width: 97.5%;  } }	/* ( 250 * 2) */
@media only screen and (max-width: 750px)  {.item-non-mobile {display: none;  }}
@media only screen and (min-width: 751px)  {.item-non-mobile {display: block; }}
@media only screen and (max-width: 750px)  {.item-mobile     {display: block; }}
@media only screen and (min-width: 751px)  {.item-mobile     {display: none;  }}

.topnav a:hover, .topnav span:hover { text-decoration: none; }
.topnav img {
	float: left;
	margin-top: -8px;
	margin-bottom: -8px;
	margin-left: -2px;
	margin-right: 5px;
}
/* footer */
footer {
	margin: auto;
	padding: 7px;
	padding-bottom: 28px;
	background-color: #004;
	color: #fff;
	font-size: 14px;
	text-align: center;
}
footer a {
	color: #c8F;
	text-decoration: underline;
}
footer a:visited {
	color: #f8b;
	text-decoration: underline;
}
footer a:hover {
	background-color: #ff7;
	color: #000;
	text-decoration: underline;
}
.hide { display: none; }
.show { display: block; }

/* NMRA orange theme 2026*/
a.bdr div.border:hover { background-color: #d8d8e8; }
a.bdr div.border:hover { background-color: #ff7; color: #000;}
a:hover                { background-color:#ff7; color:#000; }
.ltbutton:hover        { background:#ff7; color: #000 }
.boldbutton:hover      { background:#ff7; color: #000 }
.topnav, .topnav a, .topnav span, .butnav { background-color: #3F1E29; color: #ff3000; }
.topnav a.active, span.active             { background-color: #E1D8C8; color: #605A31; }
.topnav a:hover, .topnav span:hover       { background-color: #605A31; color: #FFB612; }
.title-red    { background-color: #3F1E29; color: #FF3000; padding: 10px; }
.title-blue   { background-color: #0E3331; color: #5EB5DB; padding: 10px; }
.title-purple { background-color: #605A31; color: #FFB612; padding: 10px; }
.red    { color: #900; }
.green  { color: #060; }
.blue   { color: #005; }
.purple { color: #505; }
.bold {font-weight: bold; }
footer { background-color: #2B161A; color: #fff; }
/* NMRA blue theme 2024
a.bdr div.border:hover { background-color: #d8d8e8; }
a.bdr div.border:hover { background-color: #ff7; color: #000;}
a:hover                { background-color:#ff7; color:#000; }
.ltbutton:hover        { background:#ff7; color: #000 }
.boldbutton:hover      { background:#ff7; color: #000 }
.topnav, .topnav a, .topnav span, .butnav { background-color: #004179; color: #fff; }
.topnav a.active, span.active             { background-color: #0079c2; color: #fff; }
.topnav a:hover, .topnav span:hover       { background-color: #f69719; color: #fff; }
.title-red    { background-color: #8d0909; color: #fff; padding: 10px; }
.title-blue   { background-color: #072036; color: #fff; padding: 10px; }
.title-purple { background-color: #440044; color: #fff; padding: 10px; }
.red    { color: #900; }
.green  { color: #060; }
.blue   { color: #005; }
.purple { color: #505; }
.bold {font-weight: bold; }
footer { background-color: #004179; color: #fff; }
*/