tag, use id="floatingtopbutton". Copied from hillside-new.css and changed. */
#floatingtopbutton-old-version
{
font-size: 14px;
font-family: verdana, arial, sans-serif;
font-style: normal;
font-weight: bold;
width: auto;
height: auto;
padding: 3px;
float: none;
background-color: #dcdcdc; /* medium gray; f0fff0=light gray */
/* "border: 3px solid" must precede border colors */
border: 4px solid;
border-top-color: #F5F5F5;
border-bottom-color: #A9A9A9;
border-left-color: #F5F5F5;
border-right-color: #A9A9A9;
/* position: fixed; */
/* bottom: 60px; these are set within each html file */
/* left: 753px; */
text-decoration: none;
border-radius: 6px 6px 6px 6px;
}
/* 1-12-26 - revised colors - red border, padding */
/* 3-5-2021 - added transition property to slow return to normal */
#floatingtopbutton
{
font-size: 14px;
font-family: verdana, arial, sans-serif;
font-style: normal;
font-weight: bold;
width: auto;
height: auto;
padding: 5px;
float: none;
background-color: #eeeeee; /* ffffe0=light yellow */
/* "border: 3px solid" must precede any border colors */
border: 1px solid #cc0000;
position: fixed;
/* bottom: 60px; these are set within each html file */
/* left: 753px; */
text-decoration: none;
border-radius: 6px 6px 6px 6px;
transition-duration: 300ms;
/* transition-duration works better; transition: transform 500ms; */
}
/* 1-21-2026 - changed padding, colors, green border color
3-5-2021 - added transform property to enlarge button and transition property to enlarge button. */
#floatingtopbutton:hover
{
padding: 5px;
color: #00aa00;
background-color: #ffffff; /* ffffe0=light yellow */
border: 1px solid #00aa00; /* #00cc00 = green */
transform: scale(1.1);
transition-duration: 100ms;
/* transition-duration works better; transition: transform 500ms; */
/* using solid border and separate colors -DISCONTINUED */
/* border-top-color: #ffee00; */
/* border-right-color: #fff0e0; */
/* border-bottom-color: #fff0e0; */
/* border-left-color: #a9a9a9; */
*/
}
/* 12-7-2022 - class name can be used mutiple times in a web page.
3-18-2021 - copied from floatingtopbutton style and made more generic; transition property slows the return to normal size from hover size. */
.grow-shrink-image
{
font-size: 14px;
font-family: verdana, arial, sans-serif;
font-style: normal;
font-weight: bold;
width: auto;
height: auto;
padding: 3px;
/* align: left; */
float: none;
background-color: #ffffe0; /* ffffe0=light yellow */
/* "border: 3px solid" must precede border colors */
border: 3px solid #aabb00;
/* position: fixed; */
/* bottom: 60px; these are set within each html file */
/* left: 753px; */
text-decoration: none;
border-radius: 6px 6px 6px 6px;
transition-duration: 300ms;
/* transition-duration works better, shrinks button in 300ms;
was transition: transform 500ms; */
}
/* 12-7-2022 - added font-size, color, background-color, border and changed to transition-duration 300ms for visual effect.
3-18-2021 - transform property enlarges the image and transition property enlarges button in 100ms. */
.grow-shrink-image:hover
{
left: 300px;
width: auto;
height: auto;
font-size: 16px;
color: #00b000; /* medium green */
background-color: #ffffee; /* ffffee=lighter yellow */
border: 5px solid #00bbcc; /* #00bbcc=blue-green */
transform: scale (2.0);
transition-duration: 300ms;
}
/* SINGLEBUTTON
When used around an "a href" link, this style creates a clickable button; float is needed for height and width to work (float:none used here); "width: auto" and "height: auto" allow element to adjust to the amount of text; they can also be numeric (e.g., height: 10px).
Border and background colors are shades of gray. box-shadow and border-radius are kept to a minimum.
The button text will nest tightly in a table cell if the span tag for singlebutton is placed to the left of the text in the cell. */
/* 4-27-2024 - made border colors all #f5f5f5 */
.singlebutton
{
font-size: 14px;
font-family: verdana, arial, sans-serif;
font-style: normal;
font-weight: bold;
width: auto;
height: auto;
padding: 3px;
float: none;
background-color: #DCDCDC;
border: 3px solid;
border-top-color: #f5f5f5;
border-bottom-color: #f5f5f5;
border-left-color: #f5f5f5;
border-right-color: #f5f5f5;
/* position: fixed; 9-25-2020 - removed a9a9a9 f5f5f5 */
/* box-shadow is a CSS3 property
Syntax: box-shadow: horiz-shadow vertical-shadow blur-distance spread-of-shadow color */
box-shadow: 1px 1px 1px 1px #a0a0a0;
/* border-radius is a CSS3 property that can take four values */
/* top left, top right, bottom right, bottom left */
border-radius: 6px 6px 6px 6px;
}
.leftpointedbutton
/* 2-1-2019 - increased fonts-size.
10-26-2017 - adapted from singlebutton style; the border-radius created a rounded left end. */
{
font-size: 14px;
font-family: verdana, arial, sans-serif;
font-style: normal;
font-weight: bold;
width: auto;
height: auto;
padding: 3px;
float: none;
border: solid 3px;
border-top-color: #F5F5F5;
border-bottom-color: #A9A9A9;
border-left-color: #F5F5F5;
border-right-color: #A9A9A9;
background-color: #DCDCDC;
/* box-shadow is a CSS3 property
Syntax: box-shadow: horiz-shadow vertical-shadow blur-distance spread-of-shadow color */
box-shadow: 1px 1px 1px 1px #a0a0a0;
/* border-radius is a CSS3 property that can take four values */
/* top left, top right, bottom right, bottom left */
border-radius: 20px 1px 1px 20px;
}
.rightpointedbutton
/* 10-24-2019 - adapted from leftpointed button style; border-radius and border-width give knife edge look; must use not
to allow "width" to be valid */
{
font-size: 14px;
font-family: verdana, arial, sans-serif;
font-style: normal;
font-weight: bold;
width: 140px;
height: 16px;
padding: 3px;
margin-top: 20px;
float: none;
border: solid 2px;
border-top-color: #F5F5F5;
border-bottom-color: #A9A9A9;
border-left-color: #F5F5F5;
border-right-color: #F5F5F5;
/* border width: order is top, right, bottom, left; "width" can be thin, medium, thick, or a value like 10px. Here, left side is thickest, right side is 0. */
border-width: 2px 5px 2px 2px;
background-color: #FFDEAD;
/* box-shadow is a CSS3 property
Syntax: box-shadow: horiz-shadow vertical-shadow blur-distance spread-of-shadow color */
/* box-shadow: 1px 1px 1px 1px #a0a0a0; */
/* border-radius (CSS3 property) takes four values: top left, top right,
bottom right, bottom left; next, 2nd value creates knife edge look */
/* border-radius: 1px 40px 1px 1px; */
border-radius: 1px 40px 40px 1px;
}
/*-----------------------------------------------------------------*/
/* Highlight Button - light yellow with pale and dark blue borders */
/* 8-24-2023 - replaced with newspageheading */
/* 5-27-2018 - added rounded corners */
/*-----------------------------------------------------------------*/
.highlightbutton
{
font-size: 10px;
font-weight: bold;
width: 110px;
padding: 2px 0px 4px 0px;
border: solid 5px;
border-left-color: #CCFFFF;
border-top-color: #CCFFFF;
border-right-color: #333399;
border-bottom-color: #333399;
background-color: #FFFFCC;
text-align: center;
border-radius: 8px 8px 8px 8px;
}
/* FIGURECAPTION */
/* 7-23-2025 - added margin-left instead of text-align */
/* 5-26-2021 - added text-align: center */
.figurecaption {
font-size: 15px; font-family: tahoma, verdana, arial, sans-serif;
font-weight: bold;
color: #000000;
/* text-align: center; */
margin-left: 40px;
margin-top: 0px;
margin-bottom: 0px;
}
/* 10-27-2020 - discontinued modified figure and created my own */
/* figurecaption style instead of HTML figcaption tag */
/* figure
{font-size: 11pt; font-family: tahoma, verdana, arial, sans-serif; font-weight: bold; color: #000000; margin-left: 0px; margin-top: 10px; margin-bottom: 25px} */
/*-----------------------------------------------------------------*/
/* Headings in page banner */
/*-----------------------------------------------------------------*/
/* 5-27-2016 - BANNER - added bg color and box-shadow code to create a green blur around the white text shadow */
.banner {
font-size: 32px;
font-family: tahoma, verdana, arial, sans-serif;
font-weight: bold;
color: #000080;
line-height: normal;
background-color: #99CC00;
/* text shadow: [lower shadow color] [x-offset] [y-offset] [blur-radius], [upper shadow with negative offset] */
text-shadow: white 4px 4px 2px, white -4px -4px 2px;
/* box-shadow is a CSS3 property */
/* Syntax: box-shadow: horiz-shadow vertical-shadow blur-distance spread-of-shadow color*/
box-shadow: 3px 4px 5px 6px #99CC00;
-webkit-box-shadow: 5px 5px 5px 5px #99CC00;
/* border-radius is a CSS3 property */
border-radius: 10px;
-webkit-border-radius: 10px;
}
/* SUBBANNER - changed font color to FFFF99 light yellow */
.subbanner {
font-size: 20px;
font-family: tahoma, verdana, arial, sans-serif;
font-weight: bold;
font-style: italic;
color: #FFFF99;
line-height: normal;
margin-top: 0px;
/* text shadow: [lower shadow color] [x-offset] [y-offset] [blur-radius], [upper shadow with negative offset] */
text-shadow: #00CC00 4px 4px 3px, #00CC00 -4px -4px 3px;
}
/* 5-10-19 - based on subbanner style */
.pagename
{font-size: 14.0pt; font-family: tahoma, verdana, arial, sans-serif; font-weight: bold; color: #ffffcc;
/* text shadow: [lower shadow color] [x-offset] [y-offset] [blur-radius], [upper shadow with negative offset] */
text-shadow: #00CC00 4px 4px 3px, #00CC00 -4px -4px 3px;
}
/* Headings for right div column */
/* 8-7-2019 - heading for right column on sub-pages - 220px */
.heading-right-col
{
display:inline-block;
font-size: 16px;
font-weight: bold;
text-align: center;
margin: auto;
padding:5px 5px;
color: #333366;
background-color: #c9c9c9;
width: 220px;
border-radius: 5px;
box-shadow: 0px 4px 10px #c0c0c0;
text-shadow: 3px 3px 3px #999999;
}
/* 8-7-2019 - heading for right column on Home page - 335px */
.heading-right-col-home
{
display:inline-block;
font-size: 16px;
font-weight: bold;
text-align: center;
margin: auto;
padding:5px 5px;
color: #333366;
background-color: #c9c9c9;
width: 335px;
border-radius: 5px;
box-shadow: 0px 4px 10px #c0c0c0;
text-shadow: 3px 3px 3px #999999;
}
/*----------------------------------------------------------------------*/
/* DIV classes for page columns */
/* Use float:left for all div blocks and widths that add up to the page width. */
/* div.main-column replaces div.left and div.center */
/* This following div blocks (div.left, div.center, and div.right) replace the need for a 3-column table. */
/* div.bottom creates a full width block that sits below the three narrower div blocks. */
/*----------------------------------------------------------------------*/
/* 3-31-2025 - This style replaces div.left and div.center */
/* increased width, padding-left; town hall info moved to right column */
div.main-column {
background-color: transparent;
padding-left: 10px;
padding-right: 0px;
width: 610px;
float: left;
/* position: absolute; */
/*top: 80px; */
/*left: 170px; */
/* height: 300px; */
/* border: thin solid black; */
}
/* Left Column - 3-31-25 - was squished; increased width to 150px */
div.left {
background-color: transparent;
padding-left: 4px; /* was 5px */
padding-right: 5px;
width: 110px;
float: left;
/* position: absolute; use position, top, left, and height properties for absolute positioning only */
/* top: 110px; */
/* left: 0px; */
/* height: 800px; */
/* border: thin solid black; */
}
/* Center Column */
div.center {
background-color: transparent;
padding-left: 0px;
padding-right: 5px;
width: 490px;
float: left;
/* position: absolute; */
/*top: 80px; */
/*left: 170px; */
/* height: 300px; */
/* border: thin solid black; */
}
/* Right Column */
/* Let div.right control the height of the other two div columns */
/* 3-30-2025 - reduced width to 230px */
div.right {
background-color: #EEEEEE;
margin-top: 5px;
margin-left: 4px;
padding-right: 0px;
width: 230px;
float: left;
/* position: absolute; */
/* top: 100px; */
/* left: 630px; */
height: 100%;
/* border: thin solid black */
}
/* Left Column - 3-26-25 - was squished; increased width to 150px */
div.left-home {
background-color: transparent;
padding-left: 4px; /* was 5px */
padding-right: 5px;
width: 140px;
float: left;
/* position: absolute; use position, top, left, and height properties for absolute positioning only */
/* top: 120px; */
/* left: 0px; */
/* height: 800px; */
/* border: thin solid black; */
}
/* Center Column for home page */
/* 3-31-2025 - increased width to 360px */
div.center-homepage {
background-color: transparent;
padding-left: 0px;
padding-right: 0px;
width: 360px;
float: left;
/* position: absolute; */
/* top: 80px; */
/* left: 170px; */
/* height: 300px; */
/* border: thin solid black */
}
/* Right Column for home page */
/* Let div.right control the height of the other two div columns */
div.right-homepage {
background-color: #EEEEEE;
padding-left: 0px;
padding-right: 5px;
width: 340px;
float: left;
/* position: absolute; */
/* top: 100px; */
/* left: 630px; */
height: 100%;
/* border: thin solid black */
}
/* Wide Center Column */
/* used on Event/Milestone table for new school web page */
div.widecenter {
background-color: transparent;
margin-left: 150px;
padding-left: 5px;
padding-right: 5px;
width: 660px;
float: left;
}
/* 10-21-2021 - used to create a wide column for news articles where text is on the left and a photo is right aligned. */
div.centerwide {
background-color: transparent;
margin-left: 0px;
width: 660px;
float: left;
}
div.budget {
background-color: transparent;
padding-left: 5px;
padding-right: 5px;
width: 665px;
float: left;
}
/* Clear all floating div containers */
.clearfloat {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
/* This style clears all floating containers so the next block can start below them. */
div.bottom {
float: left;
padding-left: 4px;
width: 850px;
/* left: 0px; */
/* position: absolute; */
/* top: 900px; */
/* background-color: #00FFFF; for visual testing only */
/* border: thin solid black; */
}
/*----------------------------------------------------------------------*/
/* Graphics styles for photos */
/*----------------------------------------------------------------------*/
/* 9-17-2019 - white border gives photos an old fashioned white border */
.whiteborder {
border: 15px solid white
}
/* 7-15-2019 - imageshadow puts a drop shadow at right and bottom and a margin at top and bottom; color is #556655, slightly more green */
.imageshadow {
box-shadow: 10px 10px 5px 5px #556655;
margin-top: 5px;
margin-bottom: 5px;
}
/* 8-7-2019 - style gives the bottom of the navbar a blurred bottom border */
.bottom-shadow {
box-shadow: 0px 5px 5px #AABB77;
}
/* 8-7-2019 - style gives the top of the navbar a blurred bottom border */
.top-shadow {
box-shadow: 0px -5px 5px #AABB77;
}
/* 8-7-2019 - copied style from Hillside CSS file */
/* tableglow style gives the bottom table a blurred rounded effect */
.tableglow {
border-radius: 10px;
box-shadow: 0px 5px 5px 10px #AABB77;
/* -webkit-box-shadow: 10px 10px 20px 20px #ffffaa; */
}
/* 8-9-2019 - Next two styles come from summer concert header. They position and tilt the images left and right (5 degrees) relative to one another; the image with the higher z-index is placed above the other image; adjust the top and left values to get the best positioning */
.tiltleft {
position: relative; top: 10px; left: 0px; z-index: 1; transform: rotate(-5deg);
}
.tiltright {
position: relative; top: 25px; left:-10px; z-index: 2; transform: rotate(5deg);
}
/*------------------------------------------------------------- */
/* 3-15-2024 - GREEN HEADING and content styles for Allenstown Alt */
/* EDC web pages Styles create dark green headings and white text blocks */
/* without using tables. These styles are wider than the typical div */
/* class="center" style. Alternatives to the rounded-border styles below. */
/* 3-15-2024 - GREENHEAD1 style creates a rounded head 1 with white text */
/* on a dark green background 640px wide. */
.greenhead1
{
/* tahoma is wider & bolder than arial */
font-family: tahoma,arial,sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
color: #ffffff;
background-color: #008b8b;
width: 580px;
height: 35px;
padding-top: 6px;
padding-left: 5px;
border: 2px solid #DDFFBB;
/* border-radius: top left, top right, bottom right, bottom left */
border-radius: 15px 15px 0px 0px;
margin-bottom: -3px; /* allows green-pale-block to touch heading */
}
/* 3-15-2024 - GREENHEAD2 style creates a rounded head 2 with white */
/* text on a dark green background 640px wide. */
.greenhead2
{
/* tahoma is wider & bolder than arial */
font-family: tahoma,arial,sans-serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
color: #ffffff;
background-color: #008b8b;
width: 580px;
height: 35px;
padding-top: 5px;
padding-left: 5px;
border: 2px solid #DDFFBB;
border-radius: 15px 15px 0px 0px;
margin-bottom: -3px; /* allows green-pale-block to touch heading */
}
/* 3-15-2024 - GREENHEAD-TEXT-BLOCK style creates black text on a white */
/* background with a thin green border, 640px wide, used below greenhead1 */
/* and greenhead2 styles */
.greenhead-text-block
{
/* use arial for text block */
font-family: arial,sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #000000;
background-color: #ffffff;
border: 2px solid #aaddaa;
/* give bottom corners a border radius */
border-radius: 0px 0px 0px 0px;
width: 576px;
/* add some space around the text */
padding-top: 5px;
padding-left: 5px;
/* padding-right: 5px; */
padding-bottom: 5px;
/* move paragraph up to blend into heading */
marg in-top: -22px;
margin-left: 2px;
}
/* ROUNDED BORDERS */
/* 3-14-2024 - changed bgcolor to #f4e4ab like Town Business Directory, */
/* changed border to 1px solid #c4bdac */
/* 2-10-2018 - Use rounded-border for highlighting paragraphs (more subtle than shadowbox, works well for a table). */
/* 6-13-2018 - Changed bgcolor to #EEFFCC (pale green); */
/* 9-15-2018 - adjusted border radii. */
.rounded-border {
/* border-radius is a CSS3 property that can take four values */
/* top left, top right, bottom right, bottom left */
border-radius: 10px;
border: 2px dashed #c4bdac;
/* color: #007070; dark teal (teal is 009090) was #aaeeff */
background-color: #f4e4ab;
/* background was #eeffcc ; now wheat; add some space around the text */
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
/* 12-31-2022 - copied rounded-border, used ridge style */
.rounded-border-ridge {
border-radius: 20px;
border: 15px solid #aaddee;
border-style: ridge;
background-color: #eeeecc;
/* add some space around the text */
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
.roundedborder10 {
/* 3-30-2021 - for border-radius to display, it needs the border property */
border-radius: 10px;
border: 2px solid #eeffcc;
}
/* 9-17-2018 - next few styles used on Allenstown EDC page in a */
/* table to create dark green headings and pale green text areas */
.rounded-border-heading1 {
/* border-radius is a CSS3 property that can take four values */
/* top left, top right, bottom right, bottom left = 20,20,0,0 */
border-radius: 15px 15px 0px 0px;
border: 2px solid #DDFFBB;
font-family: tahoma, arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: white;
/* background color: #008B8B; dark cyan */
background-color: #008B8B;
/* add some space around the text */
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}
/* 4-19-2019 - made background color lighter, from 008B8B to 009F9F */
.rounded-border-heading2 {
/* border-radius is a CSS3 property that can take four values */
/* top left, top right, bottom right, bottom left = 20,20,0,0 */
border: 2px solid #DDFFBB;
border-radius: 15px 15px 15px 15px;
font-family: tahoma, arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: white;
/* background color: was #008B8B; dark cyan */
background-color: #009F9F;
/* add some space around the text */
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
/* 11-19-2019 - using square corners for heading2 so it butts against the heading1 text */
.square-border-heading2 {
/* border-radius is a CSS3 property that can take four values */
/* top left, top right, bottom right, bottom left = 20,20,0,0 */
/* border-radius: 15px 15px 0px 0px; */
border: 2px solid #DDFFBB;
font-family: tahoma, arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: white;
/* background color: was #008B8B; dark cyan */
background-color: #009F9F;
/* add some space around the text */
padding-top: 8px;
padding-bottom: 8px;
padding-left: 10px;
padding-right: 10px;
}
.rounded-borderless-text {
/* border-radius is a CSS3 property that can take four values */
/* top left, top right, bottom right, bottom left = 0,0,30,30 */
border-radius: 0px 0px 15px 15px;
border: 3px solid #DDFFBB;
color: #000000;
background-color: #EEFFCC;
/* add some space around the text */
padding-top: 0px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}
/* 11-19-2019 - Use this for text rows under heading 1 and heading2; use rounded-borderless-text for last text row */
.square-borderless-text
{
/* border-radius is a CSS3 property that can take four values */
/* top left, top right, bottom right, bottom left = 0,0,30,30 */
/* border-radius: 0px 0px 15px 15px; */
border: 3px solid #DDFFBB;
color: #000000;
background-color: #EEFFCC;
/* add some space around the text */
padding-top: 0px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}
/* 6-7-2023 - created grayish green background with thin border to set off sections of home page center column. was e7ebef */
.graygreenbackground
{background-color: #e0ffe0;
border: solid 1px #c0c0c0;
border-radius: 8px;
padding: 0px 5px 0px 5px;
}
/* Draws a box with 1px line-width around selected text */
.box
{border: solid 1px;}
/* Draws a light yellow box with 1px line-width around selected text */
/* 10-16-2023 - changed border to 2px, added border-radius */
.yellowbox
{
border: solid 2px black;
border-radius: 8px;
padding: 10px;
background-color: #FFFFCC;
}
/* Draws a white box with 1px line-width around selected text */
.whitebox
{border: solid 1px; padding: 5px; background-color: #FFFFFF;
}
/* Margin Styles - Use these styles with IMG tag to put space between text and image. */
.margins /* this sets all margins */
{margin: 5px;}
.margin-left
{margin-left: 5px;}
.margin-right
{margin-right: 5px;}
.margin-right20
{margin-right: 20px;}
.margin-top
{margin-top: 5px;}
.margin-top15
{margin-top: 15px;}
.margin-bottom
{margin-bottom: 5px;}
.margin-bottom15
{margin-bottom: 15px;}
.margin-bottom-minus15
{margin-bottom: -15px;}
/* signature text at bottom of page */
.signature
{
font-family: georgia, 'times new roman', serif;
font-size: 10pt;
font-weight: bold;
font-style: italic;
color: #800080
}
/* boilerplate text at bottom of page */
.footer
{
font-family: verdana, tahoma, arial, sans-serif;
font-size: 8pt;
font-weight: normal;
font-style: normal;
color: #003366;
}
.footer-right
{
text-align: right;
font-family: verdana, tahoma, arial, sans-serif;
font-size: 8pt;
font-weight: normal;
font-style: normal;
color: #333333;
}
/* For general purpose horizontal rule */
/* 5-25-2018 - changed from double, 3 px width to solid, 1 px width */
hr
{
display: block;
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 1px;
}
.hr-plain
/* 11-28-2017 - HTML 5 no longer supports any HR attributes so this style*/
/* creates a thin gray rule for occasional use. */
{
border-style: solid;
border-width: 1px;
color: #AAAAAA;
}
/* For making a horizontal rule in a table row; border styles can be dotted, dashed, solid, groove (tapers down), ridge (tapers up), inset, outset, double.
4-4-2017 - changed from ridge-groove to inset-outset */
.top-border
{border-top: 3px inset #C0C0C0;}
.bottom-border
{border-bottom: 4px outset #C0C0C0;}
.underline
{text-decoration: underline;
}
.strikethrough
{text-decoration: line-through;
}
/* --------------------------------------*/
/* Arrow Styles */
/* These arrowhead styles uses a CSS trick to insert */
/* left, right, up, or down facing, arrowheads */
/* in red or green colors */
/* NEVER INSERT TEXT INSIDE THE SPAN TAG BLOCK. */
/* 3-19-2017 - adapted from CSS Triangle Generator (http://triangle.designyourcode.io/) */
/*--------------------------------------*/
.four-color-box
/* 5-11-2018 - changed border widths */
/* this style is just an experiment - a rounded, mulitcolored box */
{
display: inline-block;
width: 150px;
height: 120px;
border-style: solid;
padding:3px;
/* border width: order is top, right, bottom, left; "width" can be thin, medium, thick, or a value like 10px. */
border-width: 5px 10px 15px 20px;
/* border color: order is top, right, bottom, left (only left gets the color)*/
border-color: red orange green blue;
/* border-radius is a CSS3 property */
border-radius: 20px;
-webkit-border-radius: 20px;
}
.blue-down-arrowhead
{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
/* border width: order is top, right, bottom, left; "width" can be thin, medium, thick, */
/* or a value like 10px. Top is thickest, bottom is 0. */
border-width: 12px 5px 0px 5px;
/* border color: order is top, right, bottom, left (top gets the color)*/
border-color: #0000ff transparent transparent transparent;
}
.red-right-arrowhead
{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
/* border width: order is top, right, bottom, left; "width" can be thin, */
/* medium, thick, or a value like 10px. Left is thickest, right is 0. */
border-width: 5px 0px 5px 12px;
/* border color: order is top, right, bottom, left (only left gets the color)*/
border-color: transparent transparent transparent #ff0000;
}
.red-left-arrowhead
{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
/* border width: order is top, right, bottom, left; "width" can be thin, medium, thick, */
/* or a value like 10px. Right is thickest, left is 0. */
border-width: 5px 12px 5px 0px;
/* border color: order is top, right, bottom, left (only right gets the color)*/
border-color: transparent #ff0000 transparent transparent;
}
.red-up-arrowhead
{
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 12px solid red;
/* border-style: solid; */
/* border width: order is top, right, bottom, left; "width" can be thin, medium, thick, or a value like 10px. Here the bottom is thickest, top is 0. */
/* border-width: 0px 5px 12px 5px; */
/* border color: order is top, right, bottom, left (bottom gets the color)*/
/* border-color: transparent transparent #ff0000 transparent; */
}
.red-down-arrowhead
{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
/* border width: order is top, right, bottom, left; "width" can be thin, medium, thick, */
/* or a value like 10px. Top is thickest, bottom is 0. */
border-width: 12px 5px 0px 5px;
/* border color: order is top, right, bottom, left (top gets the color)*/
border-color: #ff0000 transparent transparent transparent;
}
.green-up-arrowhead
{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
/* border width: order is top, right, bottom, left; "width" can be thin, medium, thick, or a value like 10px. Here the bottom is thickest, top is 0. */
border-width: 0px 5px 12px 5px;
/* border color: order is top, right, bottom, left (bottom gets the color)*/
border-color: transparent transparent #339966 transparent;
}
.green-down-arrowhead
/* 12-16-2019 - created from red-down-arrow; used in tax rate history */
{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
/* border width: order is top, right, bottom, left; "width" can be thin, medium, thick, */
/* or a value like 10px. Top is thickest, bottom is 0. */
border-width: 12px 5px 0px 5px;
/* border color: order is top, right, bottom, left (top gets the color)*/
border-color: #339966 transparent transparent transparent;
}
.green-left-arrowhead
/* 12-16-2019 - created from red-left-arrow for Budget List button on town budget pages */
{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
/* border width: order is top, right, bottom, left; "width" can be thin, medium, thick, or a value like 10px. Here, right is thickest, left is 0. */
border-width: 5px 12px 5px 0px;
/* border color: order is top, right, bottom, left (only right gets the color)*/
border-color: transparent #339966 transparent transparent;
}
.green-right-arrowhead
/* 12-16-2019 - created from green-left-arrowhead */
{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
/* border width: order is top, right, bottom, left; "width" can be thin, medium, thick, or a value like 10px. Here, left side is thickest, right side is 0. */
border-width: 5px 0px 5px 12px;
/* border color: order is top, right, bottom, left (only left gets the color)*/
border-color: transparent transparent transparent #339966;
}
/*----------------------------------------------------------------------*/
/* Styles for Bar Horizontal Graph */
/*----------------------------------------------------------------------*/
/* This style defines parameters for the whole list. */
/* 6-13-2022 - had to change margin-left from 0px to 20px to force bars back into the right table cell */
.bargraph {
/* border: 2px solid red; this shows bounding box */
list-style: none;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 8px; /* list items line up with paragraphs */
padding-right: 0px;
margin-left: 20px;
margin-right: 0px;
margin-top: 0px; /* margin-top and margin-bottom control row height */
margin-bottom: 0px;
}
/* This style defines the common parameters of list items and their text labels. */
/* The width of each bar is specified in the html file. */
ul.bargraph li
{
height: 15px;
color: white;
left: 0px;
text-align: left;
font-style: italic;
font-weight:bold;
font-size: 14px;
line-height: 15px;
padding-left: 0px; /* keep zero otherwise it widens the bars */
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
background: #008080;
}
/* Defines the style for the list of text labels for budget bar charts */
.budget-label
{
list-style: none;
text-align: right;
padding-top: 0px;
padding-bottom: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-left: 0px;
}
/* For text labels for budget bar charts.
11-10-2018 - changed font-size 10px to 12px */
ul.budget-label li
{
font-family: verdana, tahoma, arial, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
color: #003366;
padding-bottom: 0px;
}
/* 9-11-2017 - Defines a style like budget-label for table row with budget total. 11-10-2018 - Changed font-size 12px to 14px.*/
.budget-total
{
font-family: verdana, tahoma, arial, sans-serif;
font-size: 14px;
font-weight: bold;
font-style: normal;
color: #003366;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
/*----------------------------------------------------------------------*/
/* Table Styles */
/* 3-12-2020 - added line-height:normal */
/* 6-5-2018 - changed TH, TD from 10pt verdana to 15px arial */
/*----------------------------------------------------------------------*/
th
{
text-align:left;
font-size: 16px;
font-family: arial, sans-serif;
font-weight: bold;
color: #000000;
line-height: normal;
}
td
{
font-size: 16px;
font-family: arial, sans-serif;
font-weight: normal;
color: #000000;
line-height: normal;
}
/* ------------------------------------------- */
/* Automatic Alternating Colors for Table Rows */
/* ------------------------------------------- */
/* 4-1-2021 - changed row colors */
/* 6-6-2017 - copied from hillside CSS file but found CSS3 code at www.textfixer.com */
/* In the tag in your HTML file, insert class="alt-row-colors" */
/* Provide some minimal visual accomodation for IE8 and below */
.alt-row-colors tr {
background: #FFFFE0;
}
/* Define a pale green background color (EEFFEE) for all the ODD background rows */
.alt-row-colors tr:nth-child(odd) {
background: #EEFFEE;
}
/* Define a medium green background color (DDFFDD) for all the EVEN background rows */
.alt-row-colors tr:nth-child(even){
background: #DDFFDD;
}
/*---------------------------------------------------------------------- */
/* Special Note */
/*---------------------------------------------------------------------- */
/* Teal text, yellow background, borders with special effects; padding is spacing between the content and the border (top-right-bottom-left), margin is spacing outside the border (top-right-bottom-left)
Changed font size from 9pt bold to 15px normal */
.specialnote {
font-family: verdana, arial, sans-serif;
font-size: 14px;
font-weight: normal;
color: teal;
background-color: #FFFFCC;
padding: 5px 5px 5px 5px;
border-top: thick ridge teal;
border-bottom: thick groove teal;
margin: 5px 25px 0px 25px;
}
/*---------------------------------------------------------------------- */
/* Shadowbox */
/*---------------------------------------------------------------------- */
/* This style takes the specialnote style and adds rounded corners;
changed font size from 9pt to 16px */
.shadowbox {
font-family: verdana, arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #007070; /* dark teal (teal is 008080) */
background-color: #FFFFCC;
container-color: D4D4D4;
/* margins are top, right, bottom, left */
margin: 10px 10px 0px 0px;
padding: 5px 5px 5px 5px;
border-top: thick groove teal;
border-left: thick groove teal;
border-bottom: thick ridge teal;
border-right: thick ridge teal;
/* box-shadow is a CSS3 property */
/* Syntax: box-shadow horiz-shadow vertical-shadow blur-distance spread-of-shadow color */
box-shadow: 3px 3px 5px 5px #a0a0a0;
-webkit-box-shadow: 5px 5px 5px 5px #333333;
/* border-radius is a CSS3 property */
border-radius: 10px;
-webkit-border-radius: 10px;
}
/* 8-25-16 - This style modifies the shadowbox to 200px and floats the text */
/* to the right */
.sidebar-right {
font-family: verdana, arial, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #007070; /* dark teal (teal is 008080) */
background-color: #FFFFCC;
container-color: D4D4D4;
/* margins are top, right, bottom, left */
margin: 10px 10px 0px 0px;
padding: 5px 5px 5px 5px;
float: right; /* this property right-aligns the text */
width: 200px;
border-top: thick groove teal;
border-left: thick groove teal;
border-bottom: thick ridge teal;
border-right: thick ridge teal;
/* box-shadow is a CSS3 property */
/* Syntax: box-shadow horiz-shadow vertical-shadow blur-distance spread-of-shadow color */
box-shadow: 3px 3px 5px 5px #a0a0a0;
-webkit-box-shadow: 5px 5px 5px 5px #333333;
/* border-radius is a CSS3 property */
border-radius: 10px;
-webkit-border-radius: 10px;
}
/*---------------------------------------------------------------------- */
/* Rounded Button */
/*---------------------------------------------------------------------- */
/* This style takes the shadowbox style and uses it for nav buttons */
.roundedbutton {
font-family: verdana, arial, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #007070; /* dark teal (teal is 008080) */
background-color: #FFFFCC;
container-color: D4D4D4;
/* margins are top, right, bottom, left */
margin: 0px 10px 0px 10px;
padding: 0px -5px 0px -5px;
border-top: thick groove teal;
border-left: thick groove teal;
border-bottom: thick ridge teal;
border-right: thick ridge teal;
-moz-box-shadow: 5px 5px 5px #333333;
-webkit-box-shadow: 5px 5px 5px #333333;
/* box-shadow: 5px 5px 5px #333333; */
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
/* border-radius: 20px; */
padding: 5px 5px 5px 5px;
}
/*---------------------------------------------------------------------- */
/* Voting Button */
/*---------------------------------------------------------------------- */
/* 1-15-2017 - revised several attributes */
/* 2-28-2016 - This style takes the shadowbox style and uses it for YES/NO buttons */
.votingbutton {
font-family: verdana, arial, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #990000; /* dark red */
background-color: #FFFF99;
container-color: D4D4D4;
/* margins are top, right, bottom, left */
margin: 5px 0px 5px 0px;
padding: 2px 2px 2px 2px;
width: 100px;
border-top: thin solid teal;
border-left: medium solid teal;
border-bottom: thin solid teal;
border-right: medium solid teal;
-moz-box-shadow: 1px 1px 1px #333333;
-webkit-box-shadow: 1px 1px 1px #333333;
/* box-shadow: 1px 1px 1px #333333; */
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
/* border-radius: 15px; */
}
/*----------------------------------------------------------------------*/
/* COLORS */
/*----------------------------------------------------------------------*/
.white {
color:#FFFFFF
}
/* 4-4-2017 - new color */
.boldwhite {
font-weight:bold;
color:#FFFFFF
}
.silver {
color:#C0C0C0
}
/* 7-21-2019 - new color */
.boldbluegray {
color: #333366;
font-weight: bold;
}
/* For font-family, the first font in the list is the first one used.
font-family: verdana, arial, sans-serif;
font-family: "times new roman", times, serif; */
/* Makes text bold and blue */
.BoldBlueSans10 {
font-family: verdana, arial, sans-serif;
font-size:10px;
font-weight:bold;
color:#0000FF;
}
.BoldBlueSans12 {
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #0000FF;
}
.BoldBlueSans14 {
font-family: verdana, arial, sans-serif;
font-size:14px;
font-weight:bold;
color:#0000FF;
}
/* 8-21-2019 - made style name lowercase, size:16px, color: teal blue */
.boldbluesans16 {
font-family: verdana, arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #005080 /* was #006677; */
}
.blue {
color:#0000FF}
.tealblue {
color:#005080}
.paratealblue {
font-size: 14px;
font-family: verdana, arial, sans-serif;
font-weight: normal;
color: #005080
}
.navy {
color:#000080
}
.greenbold
{color:#008000;
font-weight:bold;
}
.green
{color:#008000
}
/* 6-30-2020 - Makes text bold, green, 12px, sans serif font */
.BoldGreenSans12
{
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #008000
}
/* 6-30-2020 - Makes text bold, green, 14px, sans serif font */
.BoldGreenSans14 {
font-family: verdana, arial, sans-serif;
font-size: 14px;
font-weight: bold;
color: #008000;
}
/* 7-22-2020 - Makes text bold, green, 16px, sans serif font */
.BoldGreenSans16 {
font-family: verdana, arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #008000;
}
.maroon
{color:#800000
}
.olive
{color:#808000
}
.purple {
color:#800080
}
.red {
color:#FF0000}
.boldred {
font-weight:bold;
color:#FF0000
}
.teal {
color:#008080
}