/* =========================================================
   Version - January 2019
   ========================================================= */
/* =========================================================
   This rule resets a core set of elements so that they will appear consistent across browsers.
   ========================================================= */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	padding: 0px;
	border: 0px;
	outline: 0px;
	font-size: 100%;
}

a {
   outline: 0;
}
/* =========================================================
   The body is the outermost layout component and contains the visible page content.
   It also sets the background color of the page and creates a centered container for the page content to display. 
    #ffffcc = GWR Cream - overall background
    #333333 = Dark grey - text default 
   ========================================================= */
body {
	text-align: center; /* Centers the page content container in IE 5 browsers. */;
	padding: 0px 0px 0px 0px;
	background-color: #ffffcc;
	font-size: 1em;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px 0px 0px 0px;
}
/* =========================================================
   Make image scale with the browser window size
   ======================================================== */
img {
	border: 0px;
	text-decoration: none;
	max-width: 100%;
	height: auto;
	width: auto;
}
/* =========================================================
   Set heading styles. 
    #333333 = Dark grey - heading text 
   ========================================================= */
h1, h2, h3, h4 {
	color: #333333;
	margin: 5px 10px 5px 10px;
	font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif;
}
h1 {
	font-size: 1.7em;
	line-height: 1em;
}
h2 {
	font-size: 1.3em;
}
h3 {
	font-size: 1.1em;
}
h4 {
	font-size: 1em;
	font-weight: bold;
}
/* =========================================================
   This is a container for the page content.
   For liquid layouts simply set the left and right margins to center the container on the page.
    #321900 = Grey/Brown shadow
   ========================================================= */
#outerWrapper {
	background-color: #ffffff;
	width: 85%;
	max-width: 1500px;
	text-align: left; /* Redefines the text alignment defined by the body element. */;
	margin: 20px auto;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-moz-box-shadow: 0 0 20px #321900;
	-webkit-box-shadow: 0 0 20px #321900;
	box-shadow: 0 0 20px #321900;
}
/* =========================================================
   Masthead Styles
    #663300 = GWR Brown - background
    #ffcc66 = Goldish - text
   ========================================================= */
#outerWrapper #header {
	background-color: #663300;
	padding: 10px 10px 10px 10px;
	border-radius: 10px 10px 0px 0px;
	-webkit-border-radius: 10px 10px 0px 0px;
	-moz-border-radius: 10px 10px 0px 0px;
}
.site-logo {
	width:20%;
	float:left;
	text-align: center;
}
.site-title {
	width:80%;
	float:left;
}
.site-name {
	color: #ffcc66;
	font-size: 3em;
	text-align: center;
	font-family: Optima, Helvetica, Arial, sans-serif;
}
.site-tagline {
	color: #ffcc66;
	font-size: small;
	text-align: center;
}
/* =========================================================
   Contains the main page content. 
   NOTE: the margin sets space on left and right of page content
   any other margin (e.g. for h1 etc) will be in addition to this
   ========================================================= */
#outerWrapper #contentWrapper #content {
	padding: 10px 20px 10px 20px;
	margin: 0px 10px 0px 10px;
	line-height: 1.2em;
}
#outerWrapper #contentWrapper #content li{
	line-height: 1.5em;
}
/* =========================================================
   If floated elements are used without being cleared the 
   elements following will wrap around the floated element.
   ========================================================= */
.clearFloat {
	display: block;
	clear: left;
}
/* =========================================================
   Footer Styles
    #663300 = GWR Brown
    #ffffff = White - text 
   ========================================================= */
#outerWrapper #footer {
	background-color: #663300;
	padding: 10px 10px 10px 10px;
	border-radius: 0px 0px 10px 10px;
	-webkit-border-radius: 0px 0px 10px 10px;
	-moz-border-radius: 0px 0px 10px 10px;
	color: #ffffff;
}
#outerWrapper #footer p {
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
}
#outerWrapper #footer a {
	color: #ffffff;
	font-weight: bold;
	text-decoration: underline;
}
#outerWrapper #footer a:hover {
	color: #ffffff;
	font-weight: bold;
	text-decoration: underline;
}


/* =========================================================
   Split page into 1/3 and 2/3
   ========================================================= */
.leftcol {
	width:33%;
	float:left;
}

.rightcol {
	width:66%;
	float:left;
}


.left {
	float: left;
	width: auto;
	padding: 10px 10px 10px 10px;
}

.right {
	float: right;
	width: auto;
	padding: 10px 10px 10px 10px;
}
/* =========================================================
   Containers for images of various types
   The image boxes will scale to accomodate their content
   - so don't make any description longer than the image
   ========================================================= */
.imgbox {
	display: block;
	width: auto;
	color: #663300;
	font-size: small;
	text-align:center;
	padding: 10px 40px 10px 0px;
	margin: 0 auto
}
.imgboxtxt {
    font-style: italic;
  	font-size: x-small;
	text-align:center;
}
.tagbox {
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-moz-box-shadow: 0 0 20px #321900;
	-webkit-box-shadow: 0 0 20px #321900;
	box-shadow: 0 0 20px #321900;
	display: block;
	text-align:center;
	padding: 5px;
	margin: 0 2px 0 auto
}/* =========================================================
   Misc Typographic styles
   ========================================================= */
.ctr {
	text-align: center;
}
.smltxt {
	font-size: small;
}
.xsmltxt {
	font-size: x-small;
}
.xxsmltxt {
	font-size: xx-small;
}