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

body,
h1,
h2,
h3,
h4
{
    font-family: Georgia, Times, "Times New Roman", serif;
    color: black;
    background-color: white;
}

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

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

hgroup h2
{
    text-style: italic;
    text-align: center;
}

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

h4,
section h3, 
section section h2,
section section section h1
{
    text-align: left;
    font-style: italic;
    font-weight: normal;
    font-size: 1em;
}


table,
th,
td
{
    font-family: inherit;
    color: inherit;
    background-color: inherit;
}

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 }

body { max-width: 960px; }

#header,
header
{
    padding-bottom: 1em;
    font-style: normal;
}

#header img, header img { float: left; }

.if_narrow { display: none; }
.if_wide { display: narrow; }

@media only screen and (max-width: 629px) {
    body { font-size: 95%; }
    header img { display: none; }
    .if_narrow { display: initial; }
    .if_wide { display: none; }
}

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

header h1 {
    text-align: center;
    font-style: normal;
    font-weight: bold;
    font-size: 2em;
    margin: 0;
}

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

footer address
{
    font: inherit;
}

footer p {
    margin-top: .5em;
    margin-bottom: .5em;
}

main > h1:first-child { margin-top: 0; }

.minutes #navigation,
.minutes nav,
.decisions #navigation,
.decisions nav,
.ordinance #navigation,
.ordinance nav,
.caseIndex #navigation,
.caseIndex nav
{
    display: none;
}

.minutes #content,
.minutes main
.decisions #content,
.decisions main,
.ordinance #content,
.ordinance main,
.caseIndex #content,
.caseIndex main
{
    padding-left: 0;
}



#navigation ul,
nav ul,
.navMenu ul,
ul.navMenu
{
    list-style: none;
	font: bold 10px/25px Verdana, Arial, Helvetica, Geneva, sans-serif;
	text-align: center;
	padding: 0;
	margin: 0;
	border: 2px solid;
	border-color: #eef #99a #99a #eef;
	background-color: #bbc;
}

ul.navMenu,
.navMenu ul,
nav.navMenu
{
	width: 20em;
	margin: 1em auto;
}

#navigation ul,
nav.site
{
	width: 100px;
	float: left;
}

#content, main, article, aside.disclaimer { padding-left: 120px; }

#site_menu li:first-child { display: none; }

@media only screen and (max-width: 629px) {
    #site_menu.collapsed li { display: none; }
    #site_menu li:first-child { 
        display: initial;
        font-size: 135%;
    }
    #site_menu li:first-child * { 
        background-color: black;
        color: white;
        border-color: black;
        text-transform: capitalize;
    }
    nav.site
    { 
        float: none;
        margin: 0 auto 1em;
    }
    nav ul li {
        font-size: 12px;
    }
    main, article, aside.disclaimer { padding-left: 0; }
}

#navigation a,
nav :any-link,
.navMenu a
{
	text-decoration: none;
	display: block;
	margin: 0;
	padding: 0;
  	border: 1px solid;
	border-color: #eef #99a #99a #eef;
}

#navigation :link,
nav :link,
#navigation :visited,
nav :visited,
.navMenu :link,
.navMenu :visited { color: #223; }

#navigation a:hover,
nav a:hover,
.navMenu a:hover
{
	background: #dde;
	color: black;
}

#navigation a#currentPage:link,
#navigation a#currentPage:visited,
#navigation a#currentPage:hover,
nav #currentPage
{
	background: #778;
	color: white;
}

#navigation a:active,
nav a:active,
.navMenu a:active
{
    background:#778;
    color: white;
    border-color: #99a #eef #eef #99a;
}



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

aside.disclaimer p,
p.disclaimer
{
    margin: 0 10% 1em;
    padding: 0.5em;
    background-color: #eee;
    font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
    font-size: 85%;
}

.disclaimer em
{
    font-style: italic;
    font-weight: bolder;
}

.disclaimer a { color: #224; }

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;
}

.minutes table { width: 100%; }

.minutes table#mtgInfo,
.minutes table.mtgInfo,
.minutes table.motions
{
    table-layout: fixed;
    margin: 1em 0;
    padding: 0;
    border: 0;
    border-collapse: collapse;
}
.minutes #mtgInfo th,
.minutes .mtgInfo th,
.minutes .motions th
{
    width: 15%;
    font-weight: bold;
    font-size: 90%;
    text-align: right;
    border: 0;
    vertical-align: baseline;
}
.minutes #mtgInfo td,
.minutes .mtgInfo td,
.minutes .motions td
{
    width: 80%;
    padding-left: 1em;
    margin: 0;
    border: 0;
    vertical-align: baseline;
}
/* 
.minutes table.motions
{
    background-color: #ff6;
}
 */
.minutes .motions tr { 
    border-top: 3px solid white;
}

.minutes #mtgInfo ul,
.minutes .mtgInfo ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
** 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,
.ordinance main
{
    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,
.ordinance main 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; 
    font-style: italic;
}

.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,
.ordinance footer
{
    margin-top: 1em;
    padding-top: 1em;
    border-top: 2px solid;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

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

.ordinance #footer a,
.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;
    font-size: 200%;
}

.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,
.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; }