/* =========================================================
   Modern Base Reset & Theme Variables
   ==========================================================*/
:root {
	--primary-color: #CC6600;
	--primary-hover: #2170bd;
	--bg-dark: #1C140E;
	--bg-light: #CCCCCC;
	--text-dark: #2d2e2e;
	--text-inverse: #ffffff;
	--font-sans: Arial, Helvetica, sans-serif;
	--font-heading: Federo, "Segoe UI", Optima, Helvetica, Arial, sans-serif;
}

/* Global Reset */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	font-size: 100%;
}

a {
	outline: 0;
}

/* ======================================================
   Body Layout & Typography
   =======================================================*/
body {
	background-color: var(--bg-light);
	background-image: url("images/eoswintershade6a.png");
	color: var(--text-dark);
	font-family: var(--font-sans);
	line-height: 1.4; /* Slightly increased for modern readability */
}

/* Modern Universally Responsive Images */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Assigned helper class for explicit 100%-width fluid images */
img.scalable {
	width: 100%;
}

/* =====================================
   Typography Styles
   ========================================*/
h1, h2, h3 {
	color: var(--bg-dark);
	margin: 0.5rem 0 0.5rem 10px;
	font-family: var(--font-sans);
}

h1 {
	font-size: 1.7rem;
	line-height: 1.1;
}

h2 {
	font-size: 1.3rem;
}

h3 {
	font-size: 1.1rem;
}

/* ================================
   Link Styles
   =================================*/
a, a:link {
	color: var(--primary-color);
	font-weight: bold;
	text-decoration: none;
}

a:visited {
	color: #666633;
}

a:hover, a:focus {
	color: var(--primary-hover);
	text-decoration: underline;
}

a:active {
	color: var(--primary-hover);
}

/* ======================================
   Main Layout Container
   ========================================== */
#outerWrapper {
	background-color: #ffffff;
	width: 80%;
	max-width: 1500px;
	margin: 20px auto;
	border: 1px solid #000000;
	border-radius: 10px;
	box-shadow: 0 0 20px #453823;
	display: flow-root; /* Naturally self-clears any internal column floats */
}

/* Header/Masthead Styles */
#header {
	background: url("images/eoswintershade6d.png") bottom repeat #000000;
	padding: 10px;
	font-weight: bold;
	border-radius: 8px 8px 0 0;
}

.site-name {
	font-size: 2rem;
	text-align: center;
	font-family: var(--font-heading);
}

.tagline {
	font-size: 0.875rem;
}

/* Main Content Area */
#content {
	padding: 10px 20px;
}

/* Footer Styles */
#footer {
	background-color: #cfca4c;
	padding: 10px;
	border-radius: 0 0 8px 8px;
	color: #000000;
}

#footer p {
	margin: 0;
	text-align: left;
	font-size: 0.85rem;
}

#footer a:link { color: #a31c0d; }
#footer a:visited { color: #450461; }
#footer a:hover, #footer a:focus { color: #512663; }
#footer a:active { color: #999999; }

/* ============================================
   Utility Classes & Image Floats
   =============================================*/
.imglft {
	padding: 5px 10px 5px 0;
	float: left;
}

.imgrgt {
	padding: 5px 0 5px 10px;
	float: right;
}

.imgctr {
	margin: 0 auto;
}

.ctr {
	text-align: center;
}

.smltxt {
	font-size: 0.875rem;
}

/* ============================================
   Form Elements Styling
   ==============================================*/
form fieldset {
	padding: 1em;
	font: 80%/1.4 sans-serif;
	border: 2px solid #000000;
	width: auto;
	border-radius: 8px;
	box-shadow: 3px 3px 6px #dddddd;
}

form fieldset label {
	display: inline-block;
	width: 15%;
	margin-right: 0.5em;
	text-align: right;
	font-weight: bold;
}

form fieldset legend {
	padding: 0.2em 0.5em;
	color: #000000;
	font-size: 90%;
	text-align: right;
	font-variant: small-caps;
}

.cf {
	border: 1px solid #353c48;
	background-image: url("images/form-bg.jpg");
	background-repeat: repeat;
}

.button {
	font: normal 90% Verdana, serif;
	padding: 2px 12px;
	border: 1px solid #CDBB99;
	background-color: #000000;
	color: var(--text-inverse);
	border-radius: 6px;
	cursor: pointer;
}

input:focus, 
select:focus,
textarea:focus,
button:focus {
	border: 2px solid #993300;
	outline: none;
}