/*SLOBC CSS SCREEN TEMPLATE 06-08-10*/
/*WILLIAM BENEDICT*/

/*Red #9c130b*/
/*Light Gray #d9d9d1*/
/*Dark Gray #b2b2aa*/
/*Yellow #ffe680*/
/*Light Yellow #fff3c0*/
/*Purple #43108d*/

	
/*BODY
This defines the body of the page.
---------------------------------------------------------------------------*/
header,
footer,
nav,
section {
    display: block;
}

.ui-autocomplete {
    max-height: 238px;
    overflow-y: auto;
    overflow-x: hidden;
}

body {
	margin: 0;
	padding: 0;
	color:  #000;
/*	background: wheat; */
	background: beige;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 75%;
	font-family: sans-serif; /*--Produces Helvetica on Macs and Arial on PCs--*/
	/* font-family: Arial, Helvetica, sans-serif; */
	text-align: center;
}

* {
	margin: 0;
	padding: 0;
}	

.on-right
{
	text-align:left;
	margin-left:5px;
	margin-top:2px;
}

input {
	float: left;
	margin: 0;
	padding: 0;
	}

input.radio-type[type=radio] {
	width: 20px;
	position: relative;
	margin-top: 3px;
	margin-right:5px;
}

input.checkbox-type[type=checkbox],
input.check-box[type=checkbox] {
	width: 20px;
	position: relative;
	margin-top: 2px;
	margin-right:5px;
}


input.text-type 
{
	width: 355px;
}
input.select-type 
{
	width: 200px;
	float:left;
}
input.btn-right{
	float:right;
}
input.inherit-width
{
	width:100px; 
	/* width:inherit; */
}

/*FRAME ELEMENTS
These elements create the basic structure of the page
---------------------------------------------------------------------------*/

#frame {
	width: 810px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	padding: 0px 0px 0px 0px;
/*	padding: 0px 25px 0px 25px; */
	background-color: #fff;
	border-top: 10px solid beige;/*CHANGE*/
}

#contentwrapper {
	clear: both;
	float: left;
	background-image: none;
	margin: 15px 0 5px 0;
	text-align: left;
	padding: 0px 25px 0px 25px; 
}

#title-block, #header-block
{
	float: left;
	width: 760px;
	margin: 0 0 15px 0;
	padding: 0;
	text-align: left;
	overflow: hidden;/*--Required to include floated children--*/
}

#section {
	float: left;
	width: 760px;
	margin: 0 0 15px 0;
	padding: 0;
	text-align: left;
	overflow: hidden;/*--Required to include floated children--*/
}

#section-narrow 
{
	float: left;
	width: 590px;
	margin: 0 0 15px 0;
	padding: 0;
	text-align: left;
/*	overflow: hidden;/*--Required to include floated children--*/
}

#section-aside {
	float: left;
	width: 150px;
	margin: 5px 0 0 10px;
	padding: 0;
	text-align: left;
	border-top:1px solid black;
/*	overflow: hidden;/*--Required to include floated children--*/
}

#newsletter {
	clear: both;
	float: left;
	background-image: none;
	margin: 0;
	padding: 0;
	text-align: left;
	width:750px;
}

div.scrollingtable {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  align-content:center;
  overflow: auto;
  width: 750px; /*if you want a fixed width, set it here, else set to auto*/
  height:auto; /*800px*/   /*set table height here; can be fixed value or %*/
}

div.article {
	width: 590px;
	clear: both;
	margin: 5px 0 0 0;
	border-top: 1px solid black;
	overflow: hidden;/*--Required to include floated children--*/
}

div.article-wide 
{
	width:750px;
	clear: both;
	margin: 5px 0 0 0;
	border-top: 1px solid black;
	overflow: hidden;/*--Required to include floated children--*/
}

div.section-wide 
{
	width:760px;
	clear: both;
	margin: 0;
	overflow: hidden;/*--Required to include floated children--*/
}

#footer {
	clear: both;
	margin: 0;
	padding: 5px 0 0 0;
	text-align: left;
	overflow: auto;/*--Required to include floated children--*/
}

/*HEADER ELEMENTS 
These are the headers used for the home page and subpages
---------------------------------------------------------------------------*/


#header {
	width: 760px;
	height: 60px;
	border-bottom: 15px solid peru; /*CHANGE #ffe682;/*15% gray*/
	padding: 0px 25px 0px 25px; 
	overflow: hidden;
}

#header h1 {
	float: left;
	padding: 5px 0 0 0;
	width: 170px;
	font-size: 56px;
	line-height: 56px;
}

#header h1 a{
	color:#9c130b;
	text-decoration:none;
	font-weight: bold;
}

#header h2 {
	float: left;
	width: 440px;
	padding: 20px 0 46px 0;
	margin-bottom:20px;
/*	background-color: #d9d9d1;/*15% gray*/
	color: sienna;
	text-align: center;
	font-weight: bold;
	font-size: 22px;
	line-height: 24px;
}

#header h3 
{
	float: left;
	width: 130px;
	padding: 25px 0 25px 10px;
	font-size: 16px;
	line-height: 16px;
	text-align:center;
}

#header h3 a 
{
	color: #a0140a;/*Red*/
	font-weight: bold;
}

input {
	float: left;
	margin: 0;
	padding: 0;
	}
/*
input.radio-type {
	width: 20px;
	position: relative;
	margin-top: 3px;
	margin-right:5px;
}

input.checkbox-type {
	width: 20px;
	position: relative;
	margin-top: 2px;
	margin-right:5px;
}
*/

input.text-type 
{
	width: 355px;
}

label.onleft
{
	text-align:right;
}
label.left
{
	text-align:left;
}


/*HORIZONTAL NAVIGATION
Controls navigation roll-over effect for secondary horizontal navigation
---------------------------------------------------------------------------*/

#horizontalnav
{
	display:block;
	float: left;
	width: 810px;
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: peru;/*15% gray*/
/*	background-color: burlywood; */
}

#horizontalnav ul {
	margin: 0;
	padding: 0px 25px 0 28px;
	width: 760px;
	height: 25px;
	font-size: 1em;
	line-height: 22px;
	list-style: none;
}
	
#horizontalnav ul li {
	float: left;
	padding: 0;
	margin: 0 1.5px 0 1.5px;
	width: 12%;
}

#horizontalnav ul li a:link, #horizontalnav ul li a:visited {
	font-weight: normal;
	background:moccasin;/*Yellow*/
	color: black;
	text-decoration: none;
	display: block;
	margin:4px 0 0 0;
	/* BORDER RADIUS */
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

#horizontalnav ul li a:hover, #horizontalnav ul li a:active {
	color: white;
	background: #a0140a;/*-RED-for browsers that cannot display gradients-*/
	display: block;
	margin:4px 0 0px 0;
}

#horizontalnav ul li.open a {
	background: white;
	color: black;
	display: block;
	margin:0;
	padding:1px 0 3px 0;
	border-top:1px solid white;
}


/*FOOTER ELEMENTS
These elements create the basic structure of the page
---------------------------------------------------------------------------*/

div#footerleft {
	float: left;
	width: 150px;
	margin: 0 20px 0 0;
	padding: 10px 0 10px 0;
}

div#footerright {
	float: left;
	text-align:right;
	width: 580px;
	padding: 10px 10px 10px 0;
}

div#footer p { 
	margin: 0;
	font-size: .9em;
	line-height: 1.2em;
	padding: 0px 25px 0px 25px; 
}


/*PARAGRAPH TAGS
Standard Paragraph sturcture tags for controlling text content
---------------------------------------------------------------------------*/

p { 
	margin: .4em 0 0 15px;
	font-size: 1em;
	line-height: 1.3em;
}

p.tight { 
	margin: 0 0 0 15px;
}

#contentright p {
	margin: .5em 0 0 15px;
	font-size: 1em;
	line-height: 1.2em;
}

p.indent {
	margin-left: 40px;
}

p.indenttwo {
	margin-left: 80px;
}

p.news-post-date {
	margin: 2em 0 0 15px;
	padding: 0 4px 0 0;
	font-size: .9em;
	line-height: 1.3em;
	text-align: right;
	clear: both;
}

p.caption {
	margin: 0 0 0 15px;
	font-style: italic;
	font-size: .9em;
	line-height: 1.1em;
}

div.small-print p {
	font-size: .9em;
	line-height: 1.2em;
}
	

/*HEADER TAGS
Depricated header tags for main content sections
---------------------------------------------------------------------------*/

#contentwrapper h1 {
	clear: both;
	margin: -2px 0 0 0;
	color: #9c130b;/*Red*/
	font-weight: bold;
	font-size: 1.8em;
	line-height: 1.5em;
}

#contentwrapper h2 {
	margin: .6em 0 .3em 0;
	font-weight: normal;
	font-size: 1.5em;
	line-height: 1.1em;
}


#contentwrapper h2.background {
	margin: .8em 0 .3em 15px;
	padding: 4px 0 3px 5px;
	background: #d9d9d1;/*Light Gray*/
}

#contentwrapper h3 { 
	margin: .7em 0 0 0;
	font-size: 1.2em;
	line-height: 1.2em;
}

#contentwrapper h4 { 
	margin: .6em 0 0 15px;
	font-size: 1.1em;
	line-height: 1.2em;
}


#contentwrapper h5 { 
	margin: .4em 0 0 15px;
	font-size: 1em;
	line-height: 1.2em;
}


/*UNIVERSAL-SPECIAL TAGS
---------------------------------------------------------------------------*/

.floatleft {
	float: left;
}

.clearfloats {
	clear: both;
}

.emphasize {
	font-weight: bold;
	color: #0033ff;/*Blue*/
    
}

.highlight 
{
	background-color:Maroon;
	color:White;
	font-weight:bold;
	padding:1px 3px 1px 3px;
}

.bylaw-addition {
	font-weight:700;
	text-decoration:underline;
}

td.emphasize-cell, td.open-position {
	font-weight: bold;
	text-align: center;
	background: #fff3c0;/*Light Yellow*/
}

td.highlight-row {
	font-weight: bold;
	background: #fff3c0;/*Light Yellow*/
}

.strikethrough {
	text-decoration: line-through;
}

iframe.google-maps {
	width:570px;
/*	height:500px; */
	border:0;
	margin:0 0 0 15px;
}

.page-break-before {
	page-break-before: always;
}




/*IMAGE GRIDS USING UNORDERED LIST
---------------------------------------------------------------------------*/

/*NESTED LISTS & TABLES
---------------------------------------------------------------------------*/

li li, li p, td p, blockquote p, li dl {
	font-size: 1em;
}


/*UNORDERED LISTS
---------------------------------------------------------------------------*/

ul {
	list-style-type: square;
	margin: 0 0 0 35px;
	font-size: 1em;
	line-height: 1.3em;
}

ul li {
	padding: .4em 0 0 0;
}

ol li ul {
	margin: 0 0 0 10px;
}


/*ORDERED LISTS
---------------------------------------------------------------------------*/

ol {
	margin: 0 0 0 35px;
	padding: 0;
	font-size: 1em;
	line-height: 1.3em;
}

ol.letters {
	list-style-type: upper-alpha;
}

ol li {
	margin: 0;
	padding: .4em 0 0 0;
}

ol li ul, ol.letters li ol  {
	margin: 0 0 0 10px;
}

/*BLOCKQUOTE ELEMENTS
---------------------------------------------------------------------------*/

blockquote {
	margin: .4em 0 0 0;
	padding: 0 60px 0 55px;
	font-style: italic;
	font-size: 1em;
	line-height: 1.3em;
	}



/*LINK ELEMENTS
----------------------------------------------------------------------------*/

a:link {
	color: #9c130b;/*Red*/
	font-weight: bold;
	text-decoration: none;
}

a:visited {
	color: #9c130b;/*Red*/
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	color: #43108d;/*Purple*/
	text-decoration: underline;
}

a:active {
	background: none;
	color: #43108d;/*Purple*/
	text-decoration: underline;
}

div#footer a:link {
	color: #9c130b;/*Red*/
	font-weight: normal;
	text-decoration: none;
}

div#footer a:visited {
	color: #9c130b;/*Red*/
	font-weight: normal;
	text-decoration: none;
}

div#footer a:hover {
	color: #43108d;/*Purple*/
	text-decoration: underline;
}

div#footer a:active {
	background: none;
	color: #43108d;/*Purple*/
	text-decoration: underline;
}


/*DATA TABLE
---------------------------------------------------------------------------*/

table {
	margin: 10px 0 8px 15px;
	padding: 0;
	border-collapse: collapse;
	border: 0;
	text-align: left;
	white-space: nowrap;
}

table.directory
{
	margin: 0px 0 0px 25px;
	width:250px;
	white-space:normal;
}

table.clipboard
{
	margin: 0px;
	padding: 0px;
	width:240px;
}

table.directory-wide, table.vote
{
	margin: 0px 0px 0px 25px;
	width:90%;
	white-space:normal;
}

table.vote td.item
{
	width:160px;
}

table.signature
{
	margin: 0px 0 0px 25px;
	width:530px;
}

table.cart
{
	margin: 0px 0 0px 25px;
	width:400px;
	white-space:normal;
}

table.volunteer
{
	margin: 0px 0 0px 25px;
	width:400px;
	white-space:normal;
}


table.wrap {
	white-space: normal;
}

label.inactive
{
	text-align:left;
	width:200px;
	padding-left:20px;
}


caption {
	margin: 0;
	padding: .8em 0 .5em 4px;
	font-weight: bold;
	font-size: 1.2em;
	line-height: .9em;
	text-align: left;	
}
table.directory th, table.directory td,
table.directory-wide th, table.directory-wide td,
table.volunteer th, table.volunteer td, 
table.clipboard th, table.clipboard td
{
	padding: 2px;
	font-size: 1em;
	line-height: 1.1em;
	vertical-align:top;
	border:1px solid #cccccc;
}
table.directory th,
table.directory-wide th 
{
	font-weight:normal;
	white-space:nowrap;
	text-align:left;
	background-color: #d9d9d1; /* #d9d9d1;/*Light Gray*/
}
table.directory td,
table.directory-wide td
{
	font-weight:bold;
}

th, td {
	padding: .3em 4px .1em 4px;
	font-size: 1em;
	line-height: 1.2em;
	vertical-align: top;
	border: 1px solid #b2b2aa;/*Dark Gray*/
}

th {
	background-color: #d9d9d1;/*Light Gray*/
	font-weight: bold;
}

th.center60 {
	width: 60px;
	text-align:center;
}/*Find where used and replace with center plus width class combination then eliminate*/

th.nowrap, td.nowrap {
	white-space: nowrap;
}

th.center, td.center {
	text-align: center;
}

th.right, td.right {
	text-align: right;
}

th.left, td.left {
	text-align: left;
}

th.floatleft, td.floatleft {
	float: left;
}

table p {
	margin: .4em 0 0 0;
	line-height: 1.2em;
}


/*======================  FORM - UNORDERED LIST  ============================================*/

fieldset {
	float: left;
	clear: left;
	margin: 5px 0 0 0;
	width: 590px;
	border: 0;
}
fieldset.left {
	width: 440px;
}
.article-wide fieldset.left 
{
	width:590px;
}
fieldset.left div
{
	margin-bottom:5px;
}

fieldset.right {
	clear: none;
	width: 132px;
	padding: 4px 0 0 18px;/*-sets distance from left-*/
}
fieldset.special
{
	clear: none;
	width: 132px;
	padding: 15px 0 0 18px;/*-sets distance from left-*/
}
fieldset.error 
{
	clear:none;
	width: 250px;
	padding: 4px 0 0 18px;/*-sets distance from left-*/
}
fieldset legend {
	padding: 0 0 0 0;
	font-size: 1.3em;
	line-height: 1.3em;
}

fieldset p {
	margin: 0 0 0 0;/*-moves p away from form entry elements-*/
}
fieldset ul.instructions {
	list-style-type: square;
	margin: 0 0 5px 20px;
	font-size: 1em;
	line-height: 1.3em;
}
fieldset ul.instructions li {
	padding: 0;
}

fieldset ul.hilite-instructions li {
	padding: 0;
    color:red;
    font-weight:bold;
}

fieldset.submit {
	float: none;
	width: auto;
	margin: 0;
	padding: 10px 0 0 170px;/*-locates submit area-*/
}
fieldset.submit .button {
	float: left;
	margin: 0 10px 0 0;
	padding: 0;
}
fieldset.right .button
{
	float: left;
	margin:0 10px 0px 0;
	padding:0;
}
fieldset.special .button
{
	float: left;
	margin:0 10px 0px 0;
	padding:0;
}
fieldset.right .button2, 
fieldset.special .button2 
{
	margin-top:5px;
}


fieldset.right .save-button, 
	fieldset.special .save-button
{
	width:102px;
	height:22px;
	border: 1px solid  #777777;
   background-color:  #f6f6fe;
   box-shadow: inset 0 1px 3px #cccccc, inset 0 -3px 9px #888888, 0 2px 1px black;
   -o-box-shadow: inset 0 1px 3px #cccccc, inset 0 -3px 9px #888888, 0 2px 1px black;
   -webkit-box-shadow: inset 0 1px 3px #cccccc, inset 0 -3px 9px #888888, 0 2px 1px black;
   -moz-box-shadow: inset 0 1px 3px #cccccc, inset 0 -3px 9px #888888, 0 2px 1px black;
   color: black;
   text-shadow: 0 1px 1px black;

	/* BORDER RADIUS */
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
     border-radius: 10px 10px 10px 10px;
	display: block;
}

fieldset.right .save-button:hover,  
 fieldset.special .save-button:hover
{
	/* BORDER RADIUS */
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
     border-radius: 10px 10px 10px 10px;
	background: #a0140a;/*-RED-for browsers that cannot display gradients-*/
	box-shadow: inset 0 1px 3px #800705, inset 0 -5px 15px #400302, 0 2px 1px black;
   -o-box-shadow: inset 0 1px 3px #800705, inset 0 -5px 15px  #400302, 0 2px 1px black;
   -webkit-box-shadow: inset 0 1px 3px #800705, inset 0 -5px 15px  #400302, 0 2px 1px black;
   -moz-box-shadow: inset 0 1px 3px #800705, inset 0 -5px 15px  #400302, 0 2px 1px black;
	color: white;
}

fieldset div {
	float: left;
	/* background-color: #e6e6de;/*10% gray*/
	width: 100%;
}
fieldset div.first {
	padding: 5px 0 0 0;
}
fieldset div.only {
	padding: 5px 0 0px 0;
}
fieldset div.last, div.tight {
	padding: 0 0 0px 0;
}

fieldset div.candidate
{
	border-top:1px solid #aaaaaa;
}
fieldset div label {
	float: left;
	width: 157px;/*-Good width to hold most labels-*/
	padding: .2em 8px .2em 5px;/*-top and bottom should match entry-*/
	font-size: 1em;
	line-height: 1.1em;
	text-align: right;
}
fieldset div label.right {
	padding: .2em 10px .2em 2px;/*-top and bottom should match entry-*/
	text-align: left;
}
fieldset div input, 
fieldset div select {
    vertical-align: middle;/*-Change From Reset-*/
}
fieldset div input,
fieldset div textarea,
fieldset div select {
	float: left;
	margin: 0 0 0 0;/*-Space below entry box-*/
	padding: .2em 5px .2em 5px;/*-top and bottom should match label-*/
	font-size: 1em;
	line-height: 1.1em;
	font-family: sans-serif;
}
fieldset div input[type=text],
fieldset div input[type=password],
fieldset div textarea,
fieldset div select {
	border: 1px solid #bbbbbb;/*30% gray*/
	background-color: lightyellow;
}

fieldset div input[type=text]:focus,
fieldset div input[type=password]:focus,
fieldset div textarea:focus,
fieldset div select:focus {
	border: 1px solid black;/*30% gray*/
	background-color: ghostwhite;
}
fieldset div input.right,
fieldset div textarea.right,
fieldset div select.right {
	margin: 0 0 5px 5px;/*-Space below entry box-*/
}
fieldset div input.edit-type,
 fieldset textarea.edit-type,
 fieldset label.edit-type {
	width:250px;
}

fieldset select.edit-type{
	width:262px;
}
fieldset div input.edit-full,
 fieldset textarea.edit-full,
 fieldset label.edit-full{
	width:365px;
}

 fieldset select.edit-full{
	width:377px;
}
label.widthzip
{
	width:85px;
}

fieldset div input.no-border {
	background:white;
}
fieldset div input.edit-wide,
 fieldset textarea.edit-wide,
 fieldset label.edit-wide,
 fieldset select.edit-wide{
	width:400px;
}
fieldset div input.right {
	margin: 0 0 5px 5px;/*-Space below entry box-*/
}
fieldset div textarea {
	/*height: 80px;*/
}
fieldset div select.indent {
	margin: 0 0 5px 170px;
}
fieldset div input[type=radio],
fieldset div input[type=checkbox] {
	width: auto;
}
fieldset div input[type=radio] {
	margin: .2em 0 0 0;/*-Space locates radio vertically-*/
}
fieldset div input[type=radio].indent {
	margin: .2em 0 0 170px;/*-Space locates radio vertically-*/
}
fieldset div input[type=checkbox] {
	margin: .1em 0 0 0;/*-Space locates check vertically-*/
}
fieldset div input[type=checkbox].filter
{
	width: 20px;
	position: relative;
	margin: .1em 10px 0 0;
}
fieldset div input[type=checkbox].filter2
{
	width: 10px;
	position: relative;
	margin: .1em 10px 0 0;
}

fieldset div input[type=checkbox].indent {
	margin: .1em 0 0 170px;/*-Space locates check vertically-*/
}

.width-label-and-check
{
	width:133px;
}

.width-check-and-label
{
	width:30px;
	text-align:left;
}
.width-check-and-text
{
	width:175px;
	margin-left:9px;
}
input.address-radio {
	position: relative;
	padding-left:19px;
	padding-bottom:2px;
}

input.size-check
{
	width: 10px;
	position: relative;
	margin-top: 2px;
	margin-right:2px;
	padding:0 0 0 5px;
	padding: .2em 0 .2em 5px;/*-top and bottom should match entry-*/
}

label.size-value
{
	width: 65px;
	padding:0;
	padding: .2em 0 .2em 0;/*-top and bottom should match entry-*/
}

label.edit-year
{
	width:40px;
	margin-right:5px;
	padding: .2em 0 .2em 0;/*-top and bottom should match entry-*/
}

label.edit-month
{
	width:67px;
	margin-right:5px;
	padding: .2em 0 .2em 0;/*-top and bottom should match entry-*/
}


/**-- Unordered List Forms
--------------------------------------------------------------------------------*/


/*==============  FORM AND TABLE WIDTHS  =================================*/

.width01x {
	width: 10px;
	}
.width05x {
	width: 62px;
	padding:0;
	margin:0;
	text-align:right;
	}
.width020 {
	width: 20px;
	}
.width030 {
	width: 30px;
	}
.width040 {
	width: 40px;
	}
.width050 {
	width: 50px;
	}
.width060 {
	width: 60px;
	}
.width070 {
	width: 70px;
	}
.width080 {
	width: 80px;
	}
.width090 {
	width: 90px;
	}
.width100 {
	width: 100px;
	}
.width110 {
	width: 110px;
	}
.width120 {
	width: 120px;
	}
.width130 {
	width: 130px;
	}
.width140 {
	width: 140px;
	}
.width150 {
	width: 150px;
	}
.width160 {
	width: 160px;
	}
.width180 {
	width: 180px;
	}
.width200 {
	width: 200px;
	}
.width200e {
	width: 200px;
	margin-left:20px;
	}
.width220 {
	width: 220px;
	}
.width230 {
	width: 230px;
	}
.width240 {
	width: 240px;
	}
.width300 {
	width: 300px;
	}
.width380 {
	width: 380px;
	}
.width275 {
	width: 275px;
	}