/***
****    Basic Styling Rules
***/

body,
h1,
h2,
h3,
h4,
table,  /* NN4 only */
th,     /* NN4 only */
td      /* NN4 only */
{
    font-family: Georgia, Times, "Times New Roman", "New York", serif;
    color: black;
    background-color: white;
}

h1
{
    text-align: center;
    font-style: italic;
    font-weight: bold;
    font-size: 2em;
}

h2
{
    text-align: left;
    font-style: normal;
    font-weight: bold;
    font-size: 1.5em;
}

h3
{
    text-align: left;
    font-style: italic;
    font-weight: normal;
    font-size: 1.2em;
}

h4
{
    text-align: left;
    font-style: italic;
    font-weight: normal;
    font-size: 1em;
}


img { border: 0; }


/*
** Suppress special link processing for target <A> tags.
*/

a { text-decoration: none; }

a:link,
a:visited
{
    text-decoration: underline;
    color: #336;
}

a:hover
{
    background-color: #ddf;
    color: #00f;
}

a:active
{
    text-decoration: underline;
    color: #336;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover
{
    color: inherit;
    background-color: inherit;
}

/*** The primary page elements are:
****
****        the header, which is a horizontal bar at the top of the page that
****            contains the town logo and site title
****
****        the navigation, which contains the key site navigation links, and which
****            might be displayed as a traditional sidebar menu, as a small 
****            horizontal menu, or not at all, on different pages of the site
****
****        the content, which is the actual content of the page
****
****        the footer, which, like the header, fills the entire page width, 
****            and contains miscellaneous material not directly related to the 
****            main page content
***/

#skipNavigation { display: none }

#header
{
    padding-bottom: 10px;
    font-style: normal;
}

#header img { float: left; }

/* For NN4 only: */
#navigation h1
{
    font-size: 1.2em;
    text-align: left;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    clear: left;
}
#navigation #currentPage
{ 
    color: white;
    background: black;
}
/* End NN4 only */

#footer
{
    clear: both;
    margin-top: 0.25em;
    border-top: 1px solid;
}


/*
** The "disclaimer" class is applied to the disclaimer paragraph at the top of most pages
** in the web site.
*/

p.disclaimer
{
    margin: 0 10% 1em;
    padding: 0.5em;
    border: 3px solid #C00;
    font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
    font-size: 75%;
    background-color: #A33;
    color: #fff;
}

p.disclaimer em
{
    font-style: italic;
    font-weight: bolder;
    text-transform: uppercase;
}

p.disclaimer a:link,
p.disclaimer a:active,
p.disclaimer a:visited { color: #fee; }

p.disclaimer a:hover
{
    background-color: #c33;
    color: white;
}

p#lastModified
{
    margin-top: 0.5em;
    font-size: 80%;
}

/*
** To create a page with a "bread crumbs" strip at the top, use a paragraph with the 
** "breadcrumbs" class.  Note that the navigation and breadcrumbs classes use the same
** fonts and colors.
*/

p.breadcrumbs
{
    padding: 4px 0 .4em .5em;
    margin-bottom: 1em;
    font-size: 65%;
    line-height: 100%;
}

.breadcrumbs
{
    background-color: #006;
    color: yellow;
    font: bold 10px Verdana, Arial, Helvetica, Geneva, sans-serif;
}

.breadcrumbs A:link,
.breadcrumbs A:active,
.breadcrumbs A:visited { color: white; }
.breadcrumbs A:hover { background-color: #66C; }

.townMap img
{
    margin-right: 0.5em;
    vertical-align: middle;
}

/*
** Apply the "productBadge" class to a div containing one or more images of
** product logos, wrapped in anchor elements to link to external product information.
*/

div.productBadge { text-align: center; }
.productBadge a:hover { background-color: inherit; }
.productBadge img { padding: 10px 20px; }

/*
** The "documentList" class is applied to lists of linked documents in
** the Master Plan and Regulations pages.
*/

ul.documentList
{
    list-style-type: none;
    padding: 0.5em 1em;
    margin: 1em 2em 1em 0;
    border: solid black;
    border-width: 1px 0;
}
.documentList li
{
    padding: 0.2em 1em;
    margin: 0;
}

h2#decisionsSection { text-align: center; }


/*
** The "minutes" class is applied to the body of pages that contain the minutes of meeting.
** (It isn't used for the minutes index.)
*/

.minutes h2
{
    font: oblique large Verdana, Arial, Helvetica, Geneva, sans-serif;
    text-align: left;
    margin-right: auto;
    border-bottom: thin solid;
}

.minutes h3
{
    font: normal larger Verdana, Arial, Helvetica, Geneva, sans-serif;
    text-align: left;
}


/*
** The "ordinance" class is applied to body of pages containing sections of
** the Zoning Ordinance. (The Zoning Ordinance contents page gets both the
** "ordinance" class and the "ordinanceMain" class.)
*/

.ordinance #content
{
    margin-left: 80px;
    margin-right: 80px;
}

.ordinance .breadcrumbs { margin-left: -80px; }

.ordinance .updated
{
    margin: 0 10% 1em;
    font-weight: bold;
}

.ordinance #contents
{
    margin: 1em 20% 0.5em 0;
    border: solid 1px black;
    padding: 0.5em 0.5em 0.5em 1em;
    line-height: 120%;
}

.ordinance #contents td { padding-top: 0.1em; }
.ordinance #contents a { text-decoration: none; }

.ordinance #contents .number
{
    text-align: right;
    padding-right: 1em;
}

.ordinance #content h1
{
    text-align: left;
    font-size: 150%;
    font-weight: bold;
    font-style: normal;
    text-indent: -80px;
    padding-top: 0.75em;
    border-top: ridge 3px;
}

.ordinance h2
{
    text-align: left;
    font-size: 125%;
    font-weight: bold;
    font-style: italic;
}

.ordinance h3
{
    text-align: left;
    font-size: 100%;
    font-weight: bold;
    font-style: normal;
}

.ordinance p.h3 .number,
.ordinance p.h3 .label,
.ordinance p.h4 .number,
.ordinance p.h4 .label { font-weight: bold; }
.ordinance p.h5 .label { text-decoration: underline; }
.ordinance .comment { font-weight: normal; }

.ordinance h2 .number,
.ordinance h3 .number,
.ordinance h4 .number,
.ordinance p.h3 .number,
.ordinance p.h4 .number,
.ordinance p.h5 .number
{
    float: left;
    margin-left: -80px;
}

.ordinance a.number:link,
.ordinance a.number:visited,
.ordinance a.number:active,
.ordinance a.number:hover
{
    color: inherit;
    background-color: inherit;
    text-decoration: none;
}

.ordinance span.sublabel { text-decoration: underline; }
.ordinance li { margin-top: 1em; }

.ordinance a.rsaref:link,
.ordinance a.rsaref:active,
.ordinance a.rsaref:visited
{
    text-decoration: underline;
    color: #633;
}

.ordinance a.rsaref:hover
{
    background-color: #fdd;
    color: #f00;
}

.ordinance a.glossref:link,
.ordinance a.glossref:active,
.ordinance a.glossref:visited
{
    text-decoration: underline;
    color: #363;
}

.ordinance a.glossref:hover
{
    background-color: #dfd;
    color: #0a0;
}

.ordinance #footer
{
    margin-top: 1em;
    padding-top: 1em;
    border-top: 2px solid;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

.ordinance #footer img
{
    border: 0;
    vertical-align: middle;
    padding: 0 .25em;
}

.ordinance #footer a
{ 
    padding: 0 0.5em; 
    text-decoration: none;
}

/*
** Rules applying to the "cases" section of the web site.
** Index pages for the section have the "caseIndex" class, and
** individual case pages have the "case" class.
*/

body.caseIndex { font: 14px Verdana, Arial, Helvetica, Geneva, sans-serif; }

.caseIndex a { 
    text-decoration: none; 
    color: inherit;
}

.caseIndex p { 
    font-size: 125%; 
    margin: 0 2%;
}

.caseIndex div.skip { margin: 0 2%; }

.caseIndex .skip p,
.caseIndex .skip ul { 
    display: inline;
    padding: 0;
    margin: 0;
}

.caseIndex .skip li {
    display: inline;
    list-style-type: none;
    padding: 0;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    margin: 0;
}

.caseIndex .skip li.first { border-left-width: 1px; }

.caseIndex div.skip a { 
    padding: 1px 2px;
    font-weight: bold;
}

.caseIndex div.skip a:hover,
.caseIndex div.skip a:active {
    background: #ccd;
}

.caseIndex table.index
{
    padding: 0;
    margin: 1em 2%;
    border-collapse: collapse;
    font-size: 10px;
}

.caseIndex .index col
{
    border-left : 1px solid #bbb;
    border-right: 1px solid #bbb;
}
.caseIndex .index col.columnFirst { border-left: none; }
.caseIndex .index col.columnLast { border-right: none; }
.caseIndex .index col#columnId { width: 7em; }

.caseIndex .index th,
.caseIndex .index td
{
    padding: 0;
    margin: 0;
    vertical-align: text-top;
    text-align: left;
}

.caseIndex .index th {
    padding: 3px 0.35em;
    vertical-align: middle;
    font-size: 110%;
}

.caseIndex .index thead tr,
.caseIndex .index thead th
{
    font-weight: bold;
    background: black;
    color: white;
}

.caseIndex .index tr.even td { background: #d8d8d8; }

.caseIndex .index tr.skip td {
    padding: 3px 0;
    text-align: center;
    font-size: 110%;
    font-weight: bold;
    background: #444;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    color: white;
}


.caseIndex .index a
{
    display: block;
    padding: 3px 0.35em;
}

.caseIndex .index th a:link,
.caseIndex .index th a:visited
{
    color: white;
    background: inherit;
}
    
.caseIndex .index th a:hover,
.caseIndex .index th a:active
{
    color: red;
    background: inherit;
}
    
.caseIndex .index td a:hover,
.caseIndex .index td a:active
{
    color: inherit;
    background: #e4e4ff;
}

.caseIndex .index tr.skip a:hover,
.caseIndex .index tr.skip a:active
{
    color: inherit;
    background: inherit;
}


.decisions h2
{
    margin-top: 1em;
    padding-top: 1em;
    border-top: 2px solid black;
}

.decisions #footer
{
    margin-top: 1em;
    padding-top: 1em;
    border-top: 2px solid black;
}

.case p.more
{
    padding-top: 1em;
    margin-top: 1em;
    border-top: 1px solid black;
}

/*
** To center text or images, just apply the "centered" class to the containing element.
** To center a table, enclose the table in a DIV element with the centered class.  (This
** is a workaround for some browsers that don't respect the auto margin-left and margin-
** right settings on table elements.)
*/

.centered { text-align: center; }

.centered table
{
    margin-left: auto;
    margin-right: auto;
}

.centered td { text-align: left; }
.quotation { margin: 0 3em; }
.numList { list-style-type: decimal; }
.romanList { list-style-type: upper-roman; }
.alphaList { list-style-type: lower-alpha; }