/* Fonts */
@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;
}
.fontbold { font-family: Nuckle-Bold, Helvetica, sans-serif; }
.bold { font-family: Nuckle-Bold, Helvetica, sans-serif; }
body {
	font-family: Nuckle-Regular, Helvetica, sans-serif;
	font-size: 18px;
	letter-spacing: 0em;
}

/* body */
body {
	margin: 0;
}

/* div */
div { 
	background-color: transparent;
}
div.container {
	margin: auto;	/* To horizontally center a block element (like div), use margin: auto; */
	padding: 5px;
	width: 98%;
}
div.content {
	margin: auto;
	background-image: url('../home/Baltimore & Ohio M & K Division 2007-01_00831.jpg');
	background-repeat: no-repeat; 
	background-size: cover;
	background-position: center center;
}
div.home-msg {
	margin: auto;
	max-width: 1024px; 
	font-size: 18px; 
	text-align: justify;
	color: #fff;
}
div.topic {
	margin: auto;
	overflow: hidden;
	background-color: transparent;
	padding: 0px;
	width: 100%;
}
.item { display: inline-block; padding: 4px; vertical-align: top; width: 96%; }
/* container padding=10, item padding & ? =10, (n+1)*10
/* responsive calc: screenWidth - ((n+1) * 10) / n / screenWidth = %   (round down)  */
.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) */
div.border, div.border-nh {
	border: 1px solid #777;
	color: #000;
	text-decoration: none;
	margin-top: 5px;
}
div.border-nh:hover { 	background-color: transparent; }

/* headings */
h4, h3, h2 { 
	margin: 7px; 
}
.center { 
	text-align: center; 
}

/* paragraph */
p {
	margin: 7px;
	line-height: 125%;
}

/* links */
a {
	color:#00b;
}
a:visited {
	color:#609;
}
a.bdr {
	color: #000;
	text-decoration: none;
}
a.bdr:hover {
	background-color: transparent;
}
a.medbtn { 
	padding: 6px 25px; font-size: 18px; text-decoration: none; 
	border-radius: 5px; border: 2px solid #000; display: inline; 
}
a.medbtn:hover {
	font-weight: bold;
}
a.ltbutton, div.ltbutton {
	padding: 2px 5px 0px 5px; text-decoration: none;
	border-radius: 5px; border: 0.5px solid #888; white-space: nowrap;
}
a.boldbutton, a.boldbuttonactive {
	padding: 5px 7px 1px 7px; text-decoration: none;
	border: 0.5px solid #888; border-radius: 5px; white-space: wrap;
	font-size: 18px; font-family: Nuckle-Bold, Helvetica, sans-serif;
}

/* dropdown */
button.dropdown-button { 
	padding: 8px 25px; font-size: 18px; text-decoration: none; border-radius: 5px; 
}
div.dropdown { 
	position: relative; display: inline-block; width: 95%; 
}
div.dropdown-content { 
	display: none; position: absolute; z-index: 1; 
	bottom: 100%;
}
div.dropdown-content a { 
	font-size: 18px; padding: 8px 12px; border: 1px solid #777; text-decoration: none; display: block; 
}
div.dropdown-content a:hover { 
	font-weight: bold;
}
div.dropdown:hover div.dropdown-content {
	display: block; 
}

/* images */
.float-right { 
	float: right; 
	padding: 15px;
}
.float-left { 
	float: left;
	padding: 15px;
}
@media only screen and (max-width: 750px) {
	.float-right, .float-left { 
		float: none; 
		display: block;
	}
}

/* header */
/* 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;
}
.topnav a:hover, .topnav span:hover { 
	text-decoration: none;
	font-weight: bold;
}
.topnav img {
	float: left;
	margin-top: -8px;
	margin-bottom: -8px;
	margin-left: -2px;
	margin-right: 5px;
}
.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;  } }

/* footer */
footer {
	margin: auto;
	padding: 7px;
	padding-bottom: 28px;
	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;
}


/* NMRA Graphic Standards 2025
2b161a	very dark red

3F1E29	dark maroon
FF3000	red-orange

605A31	dark olive
FFB612	yellow-olive

0E3331	dark green-blue
5EB5DB	cyan-blue

E1D8C8	light cream
605A31	dark cream

F7F2ED	very lite orange
2b161a	very dark red
*/
body   { background-color: #E1D8C8; color: #2b161a; }
footer { background-color: #3F1E29; }
a.bdr div.border:hover   { background-color: #5EB5DB; color: #0E3331; }
a.bdr:hover              {                            color: #0E3331; }
a:hover                  { background-color: #5EB5DB; color: #0E3331; }
a.medbtn                 { background-color: #F7F2ED; color: #2b161a; }
a.ltbutton, div.ltbutton { background-color: #F7F2ED; color: #2b161a; }
a.boldbutton             { background-color: #F7F2ED; color: #2b161a; }
a.boldbuttonactive       { background-color: #3F1E29; color: #FF3000; }
a.medbtn:visited         {                            color: #2b161a; }
a.ltbutton:visited       {                            color: #2b161a; }
a.boldbutton:visited     {                            color: #2b161a; }
a.medbtn:hover           { background-color: #5EB5DB; color: #0E3331; }
a.ltbutton:hover         { background-color: #5EB5DB; color: #0E3331; }
div.ltbutton:hover       { background-color: #5EB5DB; color: #0E3331; }
a.boldbutton:hover       { background-color: #5EB5DB; color: #0E3331; }
button.dropdown-button                      { background-color: #F7F2ED; color: #3F1E29; }
div.dropdown-content                        { background-color: #F7F2ED;                 }
div.dropdown-content a                      {                            color: #3F1E29; }
div.dropdown-content a:hover                { background-color: #5EB5DB; color: #0E3331; }
div.dropdown:hover button.dropdown-button   { background-color: #3F1E29; color: #FF3000; }
.topnav, .topnav a, .topnav span, .butnav { background-color: #3F1E29; color: #FF3000; }
.topnav a:hover, .topnav span:hover       { background-color: #5EB5DB; color: #0E3331; }
.topnav a.active, span.active             { background-color: #0E3331; color: #5EB5DB; }
.title-red     { background-color: #3F1E29; color: #FF3000; padding: 10px; }
.title-olive   { background-color: #605A31; color: #FFB612; padding: 10px; }
.title-blue    { background-color: #0E3331; color: #5EB5DB; padding: 10px; }
.color-cyan-blue   { color: #5EB5DB; }

/* holiday open house */
.red    { color: #900; }
.green  { color: #060; }
.blue   { color: #005; }
.purple { color: #505; }



/* not used yet:
.hide { display: none; }
.show { display: block; }

*/