/* color scheme is #646f35, whitesmoke */

html {
	margin: 0;
}

.sitesearch {
	background-color: snow;
	font-family: 'Roboto', sans-serif;
}
.attn {
	font-weight: bold;
    text-align: center;
    padding-bottom: .5em;
    color: white;
	text-shadow: 2px 2px black;
    letter-spacing: 0.3em;
}
.err-attn {
	font-weight: bold;
	background-color: yellow;
}

body {
	/*var-mainColor: #646f35;
	var-secColor: whitesmoke;*/
	font-family: 'Roboto', sans-serif;
	margin: 0;
	min-height:100vw;
}

#mainbody {
	width: 840px; /* width of .hdrback class */
	height: 100vh; /* entire height of viewport, so JS expansions will work */
}

#pagebody {
	width: 840px;
	height: 100%;
}

.white { color:white}
.center {text-align:center}
.kaushan {
	font-family: 'Kaushan Script', cursive;
}

.pageheader {
	margin-top: 10px;
	font-size:x-large;
	color:whitesmoke;
}

table.contactus {
	table-layout:fixed;
	margin-top:2em;
	border-collapse: collapse;
	border-width: 1px;
	overflow: auto;
	width: 840px;
}
table.contactus td {
	padding: 0.25em 0.5em;
	border-bottom: 1px dotted black;
}
/* fixed layout */
table.contactus td.conoffice {font-size:smaller; width:24%; vertical-align: top;}
table.contactus td.conname {width:18% }
table.contactus td.conterm {font-size:smaller; width:10%;}
table.contactus td.conphone {width:20%;}
table.contactus td.conemail {width:28%; font-size: smaller; text-decoration: none;}

.centerhoriz {
	margin: auto;
}

#mainbody {
	width: 840px; /* width of .hdrback class */
	height: 100vh; /* entire height of viewport, so JS expansions will work */
}

.hdrback {
	margin: auto;
	background-image: url(/content/town-back-swath2.png);
	width: 840px; /* proportional w and h of image chosen */
	height: 235px;
	background-size: 100% 100%;
	position: relative;    /* so I can position absolutely with a child */
}

.hdrback_mini {
	margin: auto;
	background-image: linear-gradient(to bottom, whitesmoke, #646f35);
	width: 840px; /* proportional w and h of image chosen */
	height: 5em;
	background-size: 100% 100%;
	border: 1px solid black;
}

.leftcolumn {
	clear:both;
	float:left;
	width:0;
}

.centercolumn {
	float:left;
	width:70%;
}

.rightcolumn {
	float:left;
	width:30%;
}

#menu-search {
	padding-left: 3%;
    min-width: 97%;
	margin-bottom:1em;
}

td.column_title {
	font-weight: bold;
    text-align: center;
    font-variant: small-caps;
	border: 1px solid black;
}

td.column_subtitle {
	font-style: italic;
    text-align: center;
    border: 1px dotted black;
}

.sidebox {
	margin-left: 3%;
	padding-left: 2%;
	min-width: 95%;
	margin-bottom: 1em;
	border: 1px solid black;
	border-radius: 10px;
}
.offset {
	background-image: linear-gradient(to bottom, whitesmoke, #646f35);
}

.diversion {
    background-image: linear-gradient(to bottom, whitesmoke, #9B90CA); /* complementary to #646f35 */
}

.sidebox_title {
	font-weight: bold;
}


.gradient {
  background-image: linear-gradient(to right, red, white 80%);
}

.newstable {
	border: 0;
	margin-left: 0;
	width: 100%;
}

.newstable td.byline {
	color: #000000;
	font-size: smaller;
	vertical-align: top;
	width: 8%;
}

.newstable td.newsdetail {
	width: 72%;
	vertical-align: top;
}
.newstable div.headline {
	color: #000000;
	font-weight: bold;
}

.newstable div.story {
	background-color: whitesmoke;
	padding: 0.25em 0.75em;
}

.newstable div.teaser {
	background-image: linear-gradient(to bottom, darkgrey, lightgrey);
	color: #222222;  /* not quite so stark a black */
	padding: 0.25em 0.25em;
}

.expiry {
	color: black;
	font-size: smaller;
	vertical-align: top;
	width: 20%;
}

#footer {
	color: #646f35;
	text-align: center;
}