/***********************************************
  GLOBAL STYLES
  The colors will be labeled by hue or use,
  so install to install, we can change colors
  in one place, but update the website globally.
  This way all my new standard tokens will just
  update with each install based on the values
  set for the color names I reuse.
************************************************/
:root {
 --h-font: 'Montserrat', sans-serif;
 --p-font: 'PT Serif', serif; /*'Arial', 'Helvetica', sans-serif; */
/*You can break a good color palette down into three categories:
Neutrals/Greys (staging)
Text, backgrounds, panels, form controls — almost everything in an interface is grey.*/
  --white: #fff;
  --lightestFade: #ededed40;
  --lightestG: #F5F5F5;
  --fadedG: #E2E2E2d6;
  --lightG: #ededed;
  --grey: #bfbdbd; /*#878787;*/
  --darkG: #4E565A; /*#575757;*/
  --darkestG:#3D3D3D;
  --black: #000;
/*Primary colors (branding)
Most sites need one, maybe two colors that are used for primary actions, emphasizing navigation elements, etc.
These are the colors that determine the overall look of a site — the ones that make you think of Facebook as "blue", even though it's really mostly grey.*/
  --lightestP: #aacde3;
  --lightP: #7bb0d1;
  --primary: #487A99; /*chosen color is not ADA: #528aad;*/ /*Steel Blue - main color*/
  --darkP: #365B72; /*#34586F;*/
  --darkestP: #2C4A5E; /*#002845;*/ /*#1e3c4f;*/
/*Accent colors (sidekick/secondary+ colors)
On top of primary colors, every site needs a few accent colors for communicating different things to the user.
For example, you might want to use an eye-grabbing color like yellow, pink, or teal to highlight a new feature.
You might also need colors to emphasize different semantic states, like red for confirming a destructive action or green to highlight a positive trend.*/
  --lightestA: #fff3dd;/*#edd9b2;*/
  --lightA: #bf984e; /*light Gold*/
  --accent: #996A1E; /*chosen color not ADA: #A57321; | Ochre - secondary color*/
  --alertA: #B10202; /*red*/
  --darkA: #00816F; /*Emerald, not #805e21;*/
  --darkestA: #444444; /*Onyx Grey*, not #5c400e;*/
/*Video ratios*/
  --ratio: 360 / 640;
/*filter colors for svg icons from Font Awesome 5.15.4*/
  --filterP: invert(1) brightness(0.38) sepia(1) hue-rotate(166deg) saturate(2);
  --filterPdark: invert(1) brightness(0.3) sepia(1) hue-rotate(166deg) saturate(2);
  --filterA: invert(1) brightness(0.38) sepia(1) hue-rotate(346deg) saturate(2);
  --filterAdark: invert(1) brightness(0.3) sepia(1) hue-rotate(346deg) saturate(2);
}




body {
 color: var(--darkestA);
 font-family: var(--p-font);
 font-size: 16px;/*base size; all other font sizes are in rem*/
 background-color: var(--white);
}

/*clear default margins*/
h1, h2, h3, h4, h5, h6, p {
 margin: 0;
}
/*color main headings*/
h1, h2 {
    font-family: var(--h-font);
    font-weight: 700;
}
h1 {
    color: var(--primary);
    text-transform: uppercase;
  	font-size: 2.5rem;	}
 	@media (max-width: 999px) {	h1 {	font-size: 1.7rem;	} }
h2 {
    color: var(--accent);
    text-transform: capitalize;
}
h3 {
    color: var(--primary);
    font-family: var(--h-font);
    font-weight: 600;
}
/*color sub headings*/
h4, h5 {
  color: var(--darkP);
  font-family: var(--h-font);
  font-weight: 600;
}
/*underlined heading*/
h4 {
    border-bottom: 2px solid var(--darkestP);
}
/*a special style for highlighting*/
h6 {
  color: var(--darkestA);
  font-family: var(--p-font);
  font-weight: 400;
  line-height: 1.5;
  border-left: 3px solid var(--accent);
  padding: 0.5rem 1rem;
  background-color: var(--lightestA);	}
  h6 a { color: var(--darkestP); }

i {
  color: var(--accent);
}
p {
 color: var(--black);
 font-family: var(--p-font);
 font-size: 1rem;
 margin-bottom: 0.85em;
}
strong {
    font-weight: 600; /*default 700 for strong is too bold for this font family*/
}
a {
    color: var(--primary);
    font-weight: 600;
    font-style: normal;	}
    a:hover { color: var(--darkP); }

hr {
    border-top: 2px solid var(--lightG);
    opacity: 1;
    margin-bottom: 0.85em;
}
#EmergencyAlert p { margin: 0.5rem 0; }


a.q-cp-live-edit { top: 50px; z-index: 800000; } /*edit button*/
:focus { box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, .0001) !important;   }
::-moz-focus-inner { box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, .0001) !important;   }
p.remove-this { display: none !important; } /*remove notes in the editor left for staff*/
iframe[src*='//www.youtube.com'] {/*creates responsive Youtube videos embeds; new button in editor*/
    width: 100%;
    max-width: 800px;
    height: calc(100vw * var(--ratio));
    max-height: 500px;
    border: none;	}
iframe[src*='//www.vimeo.com'] { /*creates responsive Vimeo videos embeds; new button in editor*/
    width: 100%;
    max-width: 800px;
    height: calc(100vw * var(--ratio));
    max-height: 500px;
    border: none; 	}
iframe[src*='//www.google.com/recaptcha'] {/*prevents captcha iframe from covering the submit button below it*/
    width: 100%;
    max-width: 850px;
    height: 80px;
}
iframe[src*='//cse.google.com'] {/*removes ads that come first in the search results*/
	display: none !important;
}
iframe { width: 100%; border: 2px dotted var(--primary); }/*prevents general embeds from breaking containers*/
iframe[src*='/filestorage'] { width: 100%; max-width: 850px; height: 1200px; border: 2px dotted var(--primary); } /*prevents document embeds [pdfs] from breaking containers*/
table { overflow-x:auto; }
#content {	
  min-height: 80vh;/*pushes the footer down to the bottom on short pages*/	}
  @media (max-width: 999px) {	main#content {	min-height: auto;	} }
  /*#content { min-height: calc(100vh - 200px); }<!--calc total screen height, minus footer min-height-->*/

.shadow { box-shadow: 2px 2px 15px #6060604d; }




/*******************

	Homepage Only

*******************/
/*contain rows like wrappers*/
.homepage-content .contained {
    max-width: 1600px;
    margin: auto;
	padding: 2rem 4rem;
}
/*keeping text areas short*/
.homepage-content .content-wrap {
    max-width: 500px;
    margin: auto;
}
/*homepage buttons*/
.homepage-content a.make-button {
  display: inline-block;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--h-font);
  line-height: 1.2;
  vertical-align: middle;
  text-transform: uppercase;
  background-color: var(--accent);
  text-decoration: none;
  padding: 0.5rem 1rem;
  margin: 0.4rem 0;
  width: auto;/*prevents full-width buttons in tables*/
  border-radius: 50px;	}
  .homepage-content a.make-button:hover {
    background-color: var(--darkA) !important;	  }
/*
  @media (max-width: 699px) {
    .homepage-content a.make-button {	display: block;	 }
  }*/


/*QUICK LINKS*/
.home-quicklinks {
    font-family: var(--h-font);
    background: var(--primary);
}
.home-quicklinks h2 { color: #000; }
.home-quicklinks h2 span {
    font-family: var(--p-font);
    font-size: 1.3rem;
    text-transform: lowercase;
    vertical-align: top;
    font-style: italic;
    line-height: 1.7;
}
.home-quicklinks ul {
    display: flex;
    list-style: none;
    margin: auto;
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;	}
    @media (max-width: 699px) {
      .home-quicklinks ul {
          display: block;
      }
    }
/*arrange pill blocks*/
.home-quicklinks ul li {
    color: #fff;
    margin: 0.5rem;	}
    @media (max-width: 699px) { .home-quicklinks ul li { max-width: 600px; }	}

/*pill blocks/links*/
.home-quicklinks ul li a {
    display: inline-block;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    width: 100%;
    word-break: break-all;
    height: 100%;
    padding: 0.5rem 1rem;
    text-align: center;
    border-radius: 50px;
    background: var(--darkestP);	}
	.home-quicklinks ul li a:hover { color: var(--lightestA); background: var(--darkP);  }


/*SELECTMAN & NEWS*/
h2.block-label {
    display: inline-block;
    text-transform: uppercase;
	font-size: 1.5rem;
    font-weight: bold;
    width: 100%;
    background: var(--lightestG);
    padding: 1rem 4rem;
}
.homepage-content .home-gov .home-selectman img {
    width: 100%;
    max-width: 200px;
    box-shadow: 2px 2px 15px #6060604d;
}
.homepage-content IMG[style*="float: left"] {
    width: auto;
    max-width: 250px;
    display: inline-block;
    float: left;
    border-radius: 2px;
    margin: .5rem 2rem .5rem 0;
    padding: 0;	}
	@media (max-width: 767.98px) { 	.homepage-content IMG[style*="float: left"] {display: block; margin: 2rem auto; float: none !important; max-width: auto;} }
.homepage-content IMG[style*="float: right"] {
    width: auto;
    max-width: 250px;
    display: inline-block;
    float: right;
    border-radius: 2px;
    margin: .5rem 0 .5rem 2rem;
    padding: 0;	}
	@media (max-width: 767.98px) { 	.homepage-content IMG[style*="float: right"] {display: block; margin: 2rem auto; float: none !important; max-width: auto;} }

.home-selectman .contained h2 {
    font-size: 1.2rem;
}
.home-gov .home-selectman p {
    font-size: 1rem;
    margin-bottom: 0;
}
.home-gov .home-selectman h5 {
    color: #000;
    margin: 0 0 0.4rem 0;
}

/*news feed link to more*/
p.news-all-link a {
  	display: inline-block;
    color: var(--darkestA);
    font-family: var(--h-font);
    font-size: 0.9rem;	}
    p.news-all-link a:hover {
        color: var(--primary);
        text-decoration: none;	    }
    p.news-all-link a::before {
        content: url(/data/layout/images/fontawesome-5.15.4/solid/caret-right.svg);
        display: inline-block;
        filter: var(--filterP);
        float: right;
        width: 1.45rem;
        margin: auto 0;
        padding: 0 0.5rem;
    }/*
    p.news-all-link a::before {
        content: "\f0da";
        float: right;
        margin: auto 0;
        font-family: 'Font Awesome 5 Free';
        font-weight: 700;
        padding: 0 0.5rem;
    }*/


/*SUBSCRIPTIONS*/
a.subscribeBTN {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 1rem;	}
	a.subscribeBTN:hover { color: var(--accent); text-decoration: none; }

/*Red Alert Icon Container*/
.subscribeBTN .codered-icon {
    display: flex;
    background: var(--alertA);
    text-align: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 50px; /*for mobile style*/
}
/*Blue Alert Icon Container*/
.subscribeBTN .rss-icon {
    display: flex;
    background: var(--darkP);
    text-align: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 50px; /*for mobile style*/
}
/*Button description*/
a.subscribeBTN .alert-description {
    background: var(--lightG);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}
a.subscribeBTN p {
    color: var(--darkestA);
    font-weight: 400;
    line-height: 1.2;
}
/*Learn More Icon Container*/
.subscribeBTN .subscribe-arrow {
    display: flex;
    background: var(--lightG);
    text-align: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 50px; /*for mobile style*/	}
	.subscribeBTN .subscribe-arrow:hover { background: var(--lightestG); }
    /*Learn More Icon (Arrow)*/
    .subscribe-arrow::after {
        content: url(/data/layout/images/fontawesome-5.15.4/solid/arrow-alt-circle-right.svg);
      	display: inline-block;
        width: 2rem;
        filter: var(--filterPdark);
    }/*
    .subscribe-arrow::after {
        content: "\f35a";
        font-family: 'Font Awesome 5 Free';
        font-weight: 700;
        font-size: 2rem;
    }*/




/*WHAT'S NEW AT PARKS & REC?*/
.home-activities p { margin-bottom: 0; }
.home-activities img {
    display: inline-block;
    width: 100%;
    height: 255px;
    object-fit: cover;
    object-position: top;
}
p.activities-link {
    text-align: center;
    line-height: 1;
}
/*"View All" link*/
p.activities-link a {
    display: block;
    padding: 1.2rem 1rem;
    /*border-radius: 50px;*/	}
    p.activities-link a:hover {
        color: var(--accent);/*color: #fff;*/
        display: block;
      	text-decoration: none;	}
	/*add arrow*/
    p.activities-link a::after {
        content: url(/data/layout/images/fontawesome-5.15.4/solid/arrow-alt-circle-right.svg);
      	display: inline-block;
        width: 2rem;
        filter: var(--filterPdark);
    }/*
    p.activities-link a::after {
        content: "\f35a";
        font-family: 'Font Awesome 5 Free';
        font-weight: 700;
        font-size: 2rem;
    }*/


/*VIRTUAL BULLETIN BOARD*/
p.VBB-all-link a {
    display: inline-block;
    color: var(--darkestA);
    font-family: var(--h-font);
    font-size: 0.9rem;
    margin: 1rem auto;	}
    p.VBB-all-link a:hover {  color: var(--primary); text-decoration: none;    }
    /*add right caret*/
    p.VBB-all-link a::before {
      content: url(/data/layout/images/fontawesome-5.15.4/solid/caret-right.svg);
      display: inline-block;
      filter: var(--filterP);
      float: right;
      width: 1.45rem;
      margin: auto 0;
      padding: 0 0.5rem;	}/*
    p.VBB-all-link a::before {
        content: "\f0da";
        float: right;
        margin: auto 0;
        font-family: 'Font Awesome 5 Free';
        font-weight: 700;
        padding: 0 0.5rem;
    }*/





/****************

	BUTTONS

****************/
#LeftContentArea a.make-button {
  display: inline-block;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--h-font);
  line-height: 1.2;
  vertical-align: middle;
  text-transform: uppercase;
  background-color: var(--accent);
  text-decoration: none;
  padding: 0.5rem 1rem;
  margin: 0.4rem 0;
  width: auto;/*prevents full-width buttons in tables*/
  border-radius: 50px;	}
  #LeftContentArea a.make-button:hover {
    background-color: var(--darkA) !important;
  }
#RightContentArea a.make-button {
  display: inline-block;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--h-font);
  line-height: 1.2;
  vertical-align: middle;
  text-transform: uppercase;
  background-color: var(--accent);
  text-decoration: none;
  padding: 0.5rem 1rem;
  margin: 0.4rem 0;
  width: auto;
  border-radius: 50px;	}
  #RightContentArea a.make-button:hover {
    background-color: var(--darkA);
  }



/***********************

    GLOBAL IMAGES

***********************/
/*********************************
 template banner images & titles
**********************************/
#PageBanner {
    margin-top: 45px; /*pushes down the banner image below the floating MegaMenu*/
    border-bottom: 8px solid var(--darkestA);
}
.page-banner-image img {
    width: 100%;
    max-height: 350px;
    vertical-align: middle;
    border-style: none;
    object-fit: cover;
    object-position: 0 60%;
}

.page-banner-caption a {
    position: absolute;
    text-decoration: none;
    bottom: 20px;
    right: 20px;
    color: #fff;
    padding: 10px 15px 5px 10px;
    text-shadow: 0 2px 3px #000;	}
    .page-banner-caption a:hover {
      background-color: #343a40;
      border-radius: 5px;
      }

.page-banner-caption i {
    color: #fff;
    margin: 0 10px;
  }

p.page-slide-description {
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 10px;
    border-radius: 3px;
    background-color: #00000063;
}

.title-BG {  overflow: hidden;  }
#PageTitle {
    position: absolute;
    right: 0;
    left: 0;
    bottom: -7px;
    width: 100%;
}
#PageTitle h1 {
    color: #fff;
    text-align: right;
    font-size: calc(100vw/18);
    font-weight: 700;
    line-height: 0.8;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-end;
    align-items: flex-end;
    justify-content: flex-end;
  	text-shadow: 0px 2px 8px #000000d1;
    background: rgb(0 0 0 / 78%);
    background: linear-gradient( 0deg, rgb(0 0 0 / 78%) 0%, rgba(255,255,255,0) 100%);
    z-index: 2;
}


/*Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
  #PageTitle {	bottom: -2px;	}
  h2 {
    padding: 0;
    font-size: 1.5rem;	}

  h3 {
    font-size: 1.4rem;
	}

  .banner-image {
    max-height: none;
    overflow: unset;
	}
  .banner-caption {
    display: none;
	}
 }

/*Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
  #PageTitle h1 {
    font-size: calc(100vw/15);
  }
}

/*still in use???*/
.banner-style {
    margin: 180px 0 0 0;
    position: relative;
    padding: 0;
    max-height: 540px;
    width: 100%;
    overflow: hidden; }
    @media (max-width: 1000px) {
     .banner-style { margin: 0; }
      }
.banner-style img {
  max-height: 500px;
  width: 100%;
  vertical-align: middle;
  border-style: none;
  object-fit: cover; }


/*****************************
  images pasted via the editor
  into the MAIN LEFT COLUMN
******************************/
  #LeftContentArea img {
    border-radius: 2px;
    width: auto !important;
    max-width: 600px; }
	@media (max-width: 767.98px) {
            #LeftContentArea img {
                display: block;
                float: none !important;
                width: auto !important;
                max-width: 100% !important;
                margin: 2rem auto;
                border-radius: 2px;	  }			}
  #PhotoWall img { height: 200px !important; }


/*****************************
  images pasted via the editor
  into the MAIN RIGHT COLUMN
******************************/
#RightContentArea img {
    width: auto !important;
    height: auto;
    max-height: 350px;
    max-width: 100%;
    margin: 0 0 15px 0;
    border-radius: 2px;
    vertical-align: middle;
    border-style: none;
    object-fit: cover;
}

/***********************
  EDITOR ACCESS IMAGES
***********************/
#LeftContentArea IMG[style*="float: left"] {
    width: auto;
    max-width: 350px;
    display: inline-block;
    float: left;
    border-radius: 2px;
    margin: .5rem 2rem .5rem 0;
    padding: 0;	}
	@media (max-width: 767.98px) { 	#LeftContentArea IMG[style*="float: left"] {display: block; margin: 2rem auto; float: none; max-width: auto;} }

#LeftContentArea IMG[style*="float: right"] {
    width: auto;
    max-width: 350px;
    display: inline-block;
    float: right;
    border-radius: 2px;
    margin: .5rem 0 .5rem 2rem;
    padding: 0;	}
	@media (max-width: 767.98px) { 	#LeftContentArea IMG[style*="float: right"] {display: block; margin: 2rem auto; float: none; max-width: auto;} }

#LeftContentArea IMG[style*="vertical-align: middle"] {
	width: 100% !important;
    max-width: 100%;
    margin: 1.5rem auto;
    display: block;
    border-radius: 2px;	}
	@media (max-width: 767.98px) { 	#LeftContentArea IMG[style*="VERTICAL-ALIGN: middle"] {display: block; margin: 2rem auto;} }

#LeftContentArea IMG[style*="vertical-align: text-bottom"] {
    max-width: 350px;
    display: block;
    border-radius: 2px;
    margin: .5rem auto;
    padding: 0;	}
	@media (max-width: 767.98px) { 	#LeftContentArea IMG[style*="vertical-align: text-bottom"] {display: block; margin: 2rem auto; max-width: auto;} }



/*******************

	UL & OL LISTS

*******************/
ul {
    font-size: 1rem;
}
/*change bullets to custom icon
li::marker {
    color: var(--accent);
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;/*necessary for font awesome to work
    content: '\f0da';
}*/







/*******************

	CALENDARS

*******************/

/*Feeds*/
.wrapper-event a {
    display: block;
    width: 100%;
    padding: 0.4rem 1.5rem;
    margin-bottom: 0.5rem;
    background: #fff;
    border: 1px solid var(--lightG);
    border-radius: 50px;	}
    .wrapper-event a:hover {
        background: var(--lightG);
      	text-decoration: none;
    }
.wrapper-event span.event-date-time {
    display: inline;
    color: var(--accent);
    font-family: var(--h-font);
    padding-right: 0.6rem;
}
.wrapper-event span.event-details {
    display: inline;
    color: var(--darkG);
    font-family: var(--h-font);
    font-size: 1rem;
    line-height: 2;
    max-height: 50px;
    overflow: hidden;
    text-decoration: none;
    width: 100%;
}






/*******************

	DOCUMENTS

*******************/

.file-listing {
    display: block;
    width: 100%;
}
/*remove generated list title*/
.file-listing h2 {
    display: none;
}
/*make columns & remove list style*/
.file-listing ul {
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: 2;
    column-width: 400px;
}
/*size each row/li & position container div so file icons can appear inside the a-tag*/
.file-listing ul li {
    display: inline-block;
    position: relative;
    color: var(--darkG);
    width: 100%;
    font-size: 0.9rem;
    font-style: italic;
    margin-bottom: 0.5rem;
    background-color: var(--lightestFade);
    padding: 0.5rem 0.6rem 0.5rem 2rem;
    border: 2px solid var(--lightestG);
}
/*
.file-listing ul li {
  	color: var(--grey);/*document descriptions
    display: inline-block;
    width: 100%;
    font-size: 1rem;
    font-style: italic;
    margin-bottom: 0.5rem;
}*/
/*general style for all text*/
ul.FB_FileListUL li div {
    display: block;
    color: var(--darkG);
    padding: 0 0 0 0.2rem;
}
/*override content area image settings*/
#LeftContentArea .file-listing ul.FB_FileListUL li img {
    position: absolute;
    top: calc(42% - 9px);
    left: 0.3rem; /*0.7rem;*/
    margin: 0;
}
#LeftContentArea .file-listing img {
    display: inline-block;
    margin: 0;
    padding: 5px;
}
/*style each link*/
.file-listing ul li a {
    display: inline-block;
    color: var(--darkP);
    word-break: break-all;/*break long titles*/
    font-size: 0.9rem; /*1rem;*/
    font-weight: 600; /*400;*/
    text-decoration: none;
    width: calc(100% - 25px);
    vertical-align: middle;
    padding: 0; /*0.5rem 0.6rem 0.5rem 2rem;*/
    /*background-color: var(--lightestFade);*/
    /*border: 2px solid var(--lightestG);*/	}
    .file-listing ul li a:hover {
        color: var(--primary);
        /*background-color: var(--lightestG);
        border: 2px solid var(--lightG);*/
    }
	/*download icon on the actual download link/a*/
    .file-listing ul li a::after {
      	content: url(/data/layout/images/fontawesome-5.15.4/solid/download.svg);
        /*content: url(/data/layout/images/fontawesome-5.15.4/regular/file-download.svg);*/
      	filter: var(--filterPdark);
        display: inline-block;
        padding: 0 5px;
        width: 20px;	    }

/*put the date stamp on it's one line*/
.file-listing ul li span {
    display: none; 
}

/*style drop-down menus*/
.file-listing .RadAjaxPanel select {
    color: var(--white);
    font-family: var(--h-font);
    font-size: 1rem;
    font-weight: 400;
    background-color: var(--primary);
    border: 2px solid #fff;
    padding: 0.3rem;
}
/*style time zone declaration*/
.file-listing .FB_Footer {
  	display: none; /*removed since migration makes post dates confusing*/
    color: var(--darkA);
    font-family: var(--p-font);
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
}




/*******************

	TABLES

*******************/
/*GENERIC TABLES*/
#LeftContentArea table.table-borderless {
    width: 100%;
    border-collapse: collapse;
	overflow-x:auto;
}
/*remove margin created for p-tags*/
#LeftContentArea table p {
    margin-bottom: 0;
}
/*table headder categories*/
#LeftContentArea table.table-borderless thead th {
    color: #fff;
    font-family: var(--h-font);
    font-size: 0.8rem;
    font-weight: 600 !important;
    /* text-transform: uppercase; */
    background-color: var(--darkP);
    padding: 0.5rem 1rem;/*padding: 0.8rem 0.5rem;*/
}
/* Zebra striping */
#LeftContentArea table.table-borderless tbody tr:nth-of-type(odd) { 
  	background-color: #fff; 
}
#LeftContentArea table.table-borderless tbody tr {
    background-color: var(--lightestFade);
    border-bottom: 5px solid #fff;	}
    #LeftContentArea table.table-borderless tbody tr:hover {
        background-color: var(--lightestG);
    }
#LeftContentArea table.table-borderless tbody tr td {
    padding: 1rem;/*padding: 0.5rem;*/
}

/*BOOTSTRAP 4 SEARCH TABLE*/
table.table tbody tr:hover {
    background-color: var(--lightestG);
}
table a {
    /* display: inline-block; */
    text-decoration: none;
    color: var(--primary);
    width: 100%;	}
    table a:hover {
        color: var(--accent);
      	text-decoration: none;
		background-color: transparent !important; }

/*force generated search table to not break containers*/
.bootstrap-table.bootstrap4 {
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
    overflow-x: auto;
}
/*remove margin created for p-tags*/
.bootstrap-table.bootstrap4 p {
    margin-bottom: 0;
}

/*override js injected style "th-inner"*/
.bootstrap-table .fixed-table-container .table thead th .th-inner {
    padding: 0;
    vertical-align: middle;
}

/*pagination controls*/
#LeftContentArea ul.pagination li {/*over-rides ul settings for content area*/
    padding: 0;
}
#LeftContentArea ul.pagination a {
    color: var(--primary);	}
    #LeftContentArea ul.pagination a:hover {
        color: #fff; 
		background-color: var(--primary); 
		border: 1px solid var(--primary);	}

#LeftContentArea ul.pagination .active .page-link {
    color: #FFF;
    background-color: var(--primary);
    border: 1px solid var(--primary);
}
#LeftContentArea .page-list button {
	color: #fff;
    background-color: var(--primary);	}
    .page-list button:hover {
        color: var(--primary);
        background-color: var(--grey);	}

#LeftContentArea .page-list button.btn.btn-secondary.dropdown-toggle {
    color: var(--primary);
    background-color: var(--lightestG);
    border-color: var(--grey);
}
#LeftContentArea .page-list a.dropdown-item {
    color: var(--primary);	}
    .page-list a.dropdown-item:hover {
        color: var(--primary);
        background-color: var(--grey);
    }
#LeftContentArea .page-list a.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--primary);
}


/****************

	RSS FEEDS

****************/
/*WHEN DATE IS INCLUDED*/
.NEWS_FEED_DISPLAY_ROW_TITLE {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0.5rem;
}
span.NEWS_FEED_DISPLAY_TITLE {
    display: inline-block;
    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    line-height: 2;
    max-height: 50px;
    overflow: hidden;
    padding: 0.6rem 1rem;
    width: 100%;
    max-width: 115px;
    background-color: var(--darkG);
}
/*News feed link title icons*/
a.NEWS_FEED_DISPLAY_LINK_TITLE::before {
  	/*using "pro" icon without paying*/
    content: url(/data/layout/images/newspaper-regular.svg) / "news icon";
    display: inline-block;
  	width: 30px;
  	padding-right: 0.3rem;
    vertical-align: middle;
    line-height: 1;	}
    /*if using a free icon:
    a.NEWS_FEED_DISPLAY_LINK_TITLE::before {
        content: "\f1ea";
        display: inline-block;
        font-family: 'Font Awesome 5 Free';
        font-weight: 700;
        font-size: 1.3rem;
        width: 30px;
        padding-right: 0.3rem;
        vertical-align: middle;
        line-height: 1;
    }*/
/*News feed link titles*/
.NEWS_FEED_DISPLAY_ROW_TITLE a.NEWS_FEED_DISPLAY_LINK_TITLE {
    display: inline-block;
    font-family: var(--h-font);
    font-size: 1rem;
    line-height: 2;
    max-height: 50px;
    overflow: hidden;
    padding: 0.6rem 1rem 0.6rem 0;
    text-decoration: none;
    width: 100%;
    border-bottom: 2px dotted var(--lightG);
    background-color: transparent;	}
    #LeftContentArea .NEWS_FEED_DISPLAY_ROW_TITLE a.NEWS_FEED_DISPLAY_LINK_TITLE:hover {
      	color: var(--darkP);
        background-color: var(--lightestFade);
    }
/*archives button link*/
a.NEWS_FEED_DISPLAY_LINK_ARCHIVE {
    display: inline-block;
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--h-font);
    text-transform: uppercase;
    background-color: var(--darkP);
    text-decoration: none;
    padding: 0.5rem 1rem;
    margin: 0.4rem 0;
  	width: auto;
    border-radius: 50px;	}
    #LeftContentArea a.NEWS_FEED_DISPLAY_LINK_ARCHIVE:hover {
      color: #fff;
      background-color: var(--darkA);
    }

/*once clicked, individual article/feed item title*/
span.NEWS_FEED_DISPLAY_DETAILS_TITLE {
  	/*display: none; it will not display if the customer doesn't want it - they often only want it in the feed but not in the article itself*/
    display: block;
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom: 2px dotted;
    margin-bottom: 1rem;
}

/*when viewing archives: title*/
.NEWS_FEED_DISPLAY_ROW_HEADER .NEWS_FEED_DISPLAY_ROW_HEADER_TEXT {
    display: inline-block;
    font-family: var(--h-font);
    font-size: 1.3rem;
    font-weight: bold;
    margin: 1rem 0 0 0;
}


/*************

   QNotify

*************/
/*match default text to page text*/
.subscription-lists {
    font-family: var(--p-font);
    font-size: 1rem;
}

.qnotify-table {
  color: var(--black);
}
/*style email text*/
.qnotify-table span.FORM_LABEL_TEXT {
  color: var(--primary);
  font-weight: 600;
}
/*style the signup list options*/
table#email-list-checkbox-list span label {
    display: inline-block;
    padding: 0 0 0 0.5rem;
}

/*style the button*/
.qnotify-table td [type=submit] {
    color: #fff;
  	font-family: var(--h-font);
    font-weight: 600;
    text-transform: uppercase;
    background-color: var(--primary);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 3px;	}
    .qnotify-table td [type=submit]:hover {
        color: #fff;
        background-color: var(--darkP);
    }

/*submit buttons*/
#LeftContentArea [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--h-font);
    text-transform: uppercase;
    background-color: var(--primary);
    text-decoration: none;
    padding: 0.4rem 1rem;
    margin: 0;
    border-radius: 1px;
    border: none;	}
	#LeftContentArea [type=button], [type=reset], [type=submit]:hover {
    	background-color: var(--accent);
	}


/*****************

   Webforms

*****************/
/*move labels right for checkboxes and radio buttons*/
label.uc-label-inner {
    padding-left: 0.5rem;
}
/*style the submit button*/
.uc-form-container [type=submit] {
    color: #fff;
    font-size: 1rem;
    font-family: var(--h-font);
    font-weight: 600;
    text-transform: uppercase;
    background-color: var(--primary);
    padding: 0.5rem 1rem 0.4rem;
    margin: 0.9rem 0.9rem 0.9rem 0;
    border: none;
    border-radius: 1px;	}
    .uc-form-container [type=submit]:hover {
        color: #fff;
        background-color: var(--accent);
    }

/*OPTIONAL COLUMNS*/
.uc-form-container .uc-page {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: flex-start;
}
/*
.uc-form-container .uc-item {
    width: 100%;
    max-width: 500px;
    padding: 0;
}*/
.uc-form-container .uc-item input[type=checkbox], input[type=radio] {
    max-width: 10px;
    box-sizing: border-box;
    padding: 0;
}
.uc-form-container .uc-item {
    width: 100%;
    max-width: 500px;
    padding: 1rem;
    margin: 0 0 1.5rem 0;
    border: 2px solid var(--lightestG);	}
    .uc-form-container .uc-item:hover {
        background-color: var(--lightestFade);
    }
.uc-form-container .uc-item label.uc-label {
    width: 100%;
}
.uc-form-container .uc-item input {
    width: 100% !important;
}


/********************

    FOOTER

********************/
footer {
  background-color: var(--primary);
  padding: 2rem 0;
}
  
/*Footer Headings*/
footer h5 {
    display: block;
    color: var(--white);
    text-align: left;
    font-size: 1rem;
    padding: 0 1rem;	}
    @media (max-width: 999px) {  footer h5 {  text-align: center;  }  } 
  
/*Footer Text*/
footer p {
    display: block;
    color: #fff;
    font-family: var(--p-font);
    font-size: 0.8rem;
    text-align: left;
    padding: 0 1rem;	}
    @media (max-width: 999px) {  footer p {  text-align: center;  }  }
  
/*Footer Links*/
footer a {
    color: var(--white);
    text-decoration: none;
    font-weight: bold;	}
    footer a:hover {
        color: var(--lightestA);
    }
  
/*Footer Containers*/
footer .footer-container {
    width: 100%;
    max-width: 600px;
	min-height: 140px;	}
    @media (max-width: 999px) {  
      footer .footer-container {
          text-align: center;
          width: 100%;
          max-width: 100%;
      }  
    } 
footer .footer-details {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;	}
	@media (max-width: 991px) {  footer .footer-details { display: block; }  }


footer a.make-button {
    display: inline-block;
    padding: 0 10px;
    border: 1px solid #fff;
    border-radius: 50px;
    font-family: var(--h-font);
    font-weight: 400;
    text-decoration: none;	}
    footer a.make-button:hover {
        background: var(--darkA);
    }


/******************

	Scroll Bar

******************/
/*- WIDTH - the background of the bar itself. It is usually covered by the other elements*/
::-webkit-scrollbar {
  width: 10px;
}

/*addresses the directional buttons on the scrollbar
::-webkit-scrollbar-button {}
*/

/*- TRACK - the empty space “below” the progress bar*/
::-webkit-scrollbar-track  {
  background: var(--lightestFade);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

/*the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb)
body::-webkit-scrollbar-track-piece {}
*/

/* - HANDLE - the draggable scrolling element that resizes depending on the size of the scrollable element*/
::-webkit-scrollbar-thumb {
  background-color: var(--grey);
  outline: 0;
  border-radius: 2px;	}
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--darkestP);
  }

/*usually bottom corner of the scrollable element, where two scrollbars might meet
::-webkit-scrollbar-corner {}
*/

/*the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements
::-webkit-resizer {}
*/