/* Font Properties */
html {
	font-family: Helvetica,Arial,sans-serif;
	color:#444444;
    height:100%;

    /*
    This size defines what 1rem will be.  On most browsers the default
    size is 16px.  12px is reducing 25% and 20px is enlarging by 25%.
    By specifying all other sizes as rem's, changing this number scales
    the whole layout in unison.
    */
    font-size: var(--base-font-size);
}

body, td, div {
	font-family: Helvetica,Arial,sans-serif;
	color:#444444;
    font-size: 1rem;
}

/* Layout Adjustments */
body {
    margin:0px;
    padding:0px;
    border:0px;
    height:100%;
}

/*
Make text links the highlight background color.  For links that are presented as buttons, the button
color is the highlight background color, so they're styled to ensure the text color is the highlight
foreground color.
*/
a, a:visited {
    color: var(--splash-bg-color);
    text-decoration: none;
}
a:hover {
    color: var(--splash-bg-80pct);
    text-decoration: underline;
}

#tdbBackground, #background {
	background: #f0eeea;
	min-height: 100%;
	margin: 0px;
	padding: 0px;
}
#tdbWrapper, #tdbContainer, #container {
	width: 700px;
    min-width: 340px;
	max-width: 100%;
	margin: 0px auto;
	padding: 0px;
	background: #fff;
}
#tdbHeader, #header {
	padding: 1.25rem;
    padding-bottom: 0rem;
	text-align: center;
}
#tdbHeader img, #header img {
	max-height: 20rem;
}
#tdbContent, #content {
    padding: 1.25rem;
}
#tdbFooter, #footer {
    clear:both;  /* Make Sure Footer is at the bottom */
    padding: 1.25rem;
    text-align: center;
}

.tdbCartWrapper {
    display: none;
}
.tdbCartWrapperShort {
    max-height: 13.0rem;
    overflow: hidden;
}
#tdbCartToggleTop, #tdbCartToggleBottom {
    margin: 0;
    text-align: center;
    color: var(--splash-bg-color);
    cursor: pointer;
    font-size: .75rem;
    font-weight: bold;
    display: none;
}
#tdbCartToggleBottom {
    margin-bottom: 1rem;
}
.tdbCartOverlay {
    z-index: 2;
    position: absolute;
    overflow: hidden;
}

div.tdbSectionHeader {
    padding: .5rem;
    font-weight: bold;
    text-align: center;
    background-color: var(--splash-bg-color);
    color: var(--splash-fg-color);
}

div.tdbSimulatedLineBreak {
    height: .5rem;
}

/* Label and input styles. */

/* Wrapper for tdb labels and inputs. */
div.tdbFormPromptRow {
    margin-bottom: .75rem;
}

div.tdbFormPromptRow .tdbFormPrompt {
    /*
    The prompt encloses the label (tdbFormPromptLabel) and the input for most
    single line inputs (text, number, password, email, url).  The label is
    positioned inside the input, acting as a placeholder, and moves to the
    upper left corner of the input on focus, or when the input contains data.
    For other prompts (textarea, select, radio, check box) the prompt and
    prompt label are separate divs.
    */
	position: relative;
	vertical-align: middle;
	margin: 0px;
}

div.tdbFormPromptRow .tdbFullNameLabel {
    margin-bottom: -1.0rem;
}

.tdbFormDisplayLabel {
    font-weight: bold;
}

/*
If a label has class tdbFormPromptLabel, it means it's overlayed on the input.
This sets its initial position to act as a placeholder.
*/
div.tdbFormPromptRow label.tdbFormPromptLabel {
    z-index: 2;
    display: inline-block;
    position: relative;
    cursor: text;
    top: 2.5rem;
    left: .35rem;
    max-width: 380px;
    padding: 0 .25rem;
    overflow: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
	color: #999;
    background: #fcfcfc;
}

/*
If a label has classes tdbFormPromptLabel and tdbMinLabel, the label is overlayed
on the input, but the input has focus or contains data, so its size is reduced
and it's moved to the upper left corner of the input box.
*/
div.tdbFormPromptRow label.tdbFormPromptLabel.tdbMiniLabel {
    top: 1.4rem;
    height: 1rem;
    font-size: .75rem;
    line-height: 1rem;
    transition: .25s;
}

/* If a prompt takes dictation, a mic is displayed. Let users know they can click on it. */
.tdbSpeech {
	cursor: pointer;
    color: #999;
}


/*
tdb Input styles.  Styling is segregated from that of other template inputs, if any,
by being placed in divs with the .tdbFormPromptRow.
*/

div.tdbFormPromptRow input[type="text"],
div.tdbFormPromptRow input[type="number"],
div.tdbFormPromptRow input[type="password"],
div.tdbFormPromptRow input[type="email"],
div.tdbFormPromptRow input[type="tel"],
div.tdbFormPromptRow input[type="url"],
div.tdbFormPromptRow textarea,
div.tdbFormPromptRow select,
div#divSubscriptionForm input {
	border: 1px solid #CCC;
	outline: none;
	-moz-border-radius: .1rem;
	-webkit-border-radius: .1rem;
	border-radius: .1rem;
	font-family: Helvetica, Arial, sans-serif;
	color: #333;
	margin: 0;
	padding: 1.4rem .2rem .6rem .6rem;
    font-size: 1rem;
    width: 20rem;
    max-width: 100%;
    display: block;
    background-color: #fcfcfc;
}

div.tdbFormPromptRow input[type="number"].tdbChoiceOtherAmount {
    /*
    Radio button followed by label followed by input box for other amount.  Less space is available for the input,
    and since it's a donation amount, we only need space for 4-6 digits.
    */
    width: 5rem;
    display: inline;
    padding: .2rem;
}

/* Special sizing for textarea and select. */
div.tdbFormPromptRow textarea {
    width: 19.8rem; /*calc(20rem - 4px);*/
	padding: .4rem .4rem .4rem .6rem;
    /* The following styles are needed for the microphone to display to the right of the textarea, aligned to the top. */
    display: inline-block;
    vertical-align: top;
}
div.tdbFormPromptRow select {
    padding: .5rem .5rem;
    width: calc(21rem - 2px);
    height: calc(2.4rem + 1rem + .1rem);
}

/* Change the border on focus. */
div.tdbFormPromptRow input[type="text"]:focus,
div.tdbFormPromptRow input[type="number"]:focus,
div.tdbFormPromptRow input[type="password"]:focus,
div.tdbFormPromptRow input[type="email"]:focus,
div.tdbFormPromptRow input[type="tel"]:focus,
div.tdbFormPromptRow input[type="url"]:focus,
div.tdbFormPromptRow textarea:focus,
div.tdbFormPromptRow select:focus {
	border: 1px solid #80bdff;
	color: #444;
}

/* Enlarged radio buttons.*/
div.tdbFormPromptRow input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}

/* Styled checkboxes.  Way more effort than it ought to take. */
.tdbCheckbox {
  position: absolute;
  opacity: 0;
}
.tdbCheckbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  display: inline-flex;

  /*
  With wrap, a long label creates a "paragraph" below the check box.  Not to our liking.
  With nowrap, a long label creates a "paragraph" next to the check box, much more to
  our liking, but it squishes the check box - UNLESS min-width is specified in the next
  selector (.tdbCheckbox + label:before).
  */
  flex-wrap: nowrap;
}
.tdbCheckbox + label:before {
  /* This draws the check box. */
  content: '';
  margin-right: .5rem;
  margin-bottom: .25rem;
  display: inline-block;
  vertical-align: text-top;
  width: 1rem;

  /* This prevents a long, multi-line label from squishing the check box. */
  min-width: 1rem;

  height: 1rem;
  background: #fff;
  border: 1px solid #ccc;
}
.tdbCheckbox:hover + label:before {
  background: #efefef;
  border-color: #bbb;
}
.tdbCheckbox:focus + label:before {
  box-shadow: 0 0 0 .15rem rgba(0, 0, 0, 0.12);
}
.tdbCheckbox:checked + label:before {
  background: #fff;
}
.tdbCheckbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.tdbCheckbox:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}
.tdbCheckbox:checked + label:after {
    /* This draws the "check mark" - a corner (┘) rotated 45 degrees clockwise. */
  content: '';
  position: absolute;
  left: .25rem;
  top: .45rem;
  background: white;
  width: .1rem;
  height: .1rem;
  box-shadow: .1rem 0 0 #333, .2rem 0 0 #333, .2rem -0.1rem 0 #333, .2rem -0.2rem 0 #333, .2rem -0.3rem 0 #333, .2rem -0.4rem 0 #333;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* End styled checkbox. */

/* Button styles */
.button, .tdbbutton, button, input[type="submit"], input[type="reset"], input[type="button"] {
	position: relative;
	margin: 1rem 0rem;
    box-shadow: 0 1px 2px rgba(144,144,144,1.0);
    background-color: var(--splash-bg-color);
    color: var(--splash-fg-color);
    border: 1px solid #ccc;
	border-color: #CCC #AAA #AAA #CCC;
	border-radius: .15rem;
	cursor: pointer;
	display: inline-block;
    line-height: normal;
    padding: .5rem 1rem;
    font-size: 1rem;
	font-weight: bold;
	text-decoration: none;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .tdbbutton:hover, .tdbbutton:active, .tdbbutton.selected {
    background-color: var(--splash-bg-80pct);
    border: 1px solid #000;
}
#aTDBSamePerson:hover, #aTDBNewPerson:hover, #aTDBItsMe:hover, #aTDBItsNotMe:hover, #aTDBYes:hover, #aTDBNo:hover, #aTDBOpt2ListAddBtn:hover, #aTDBOpt2ListShowHideBtn:hover,
#aTDBSamePerson:visited, #aTDBNewPerson:visited, #aTDBItsMe:visited, #aTDBItsNotMe:visited, #aTDBYes:visited, #aTDBNo:visited, #aTDBOpt2ListAddBtn:visited, #aTDBOpt2ListShowHideBtn:visited
{
    color: var(--splash-fg-color);
    text-decoration: none;
}
.tdbbutton {
    margin: 0rem .35rem 1rem .35rem;
}
#aTDBSamePerson, #aTDBNewPerson, #aTDBItsMe, #aTDBItsNotMe, #aTDBYes, #aTDBNo {
    width: 5rem;
}
#tdbYesNoSpacer {
    display: inline-block;
    width: 1.25rem;
}

input[type="submit"] {
    line-height: 1.5;
    padding: .5rem 1rem;
    font-size: 1.25rem;
}



@media (max-width: 480px) {
    #tdbContent {
        padding: .25rem;
    }

    #tdbDisplayMeetingCalendar {
        display: none;
    }

    div.tdbFormPromptRow input[type="text"],
    div.tdbFormPromptRow input[type="number"],
    div.tdbFormPromptRow input[type="password"],
    div.tdbFormPromptRow input[type="email"],
    div.tdbFormPromptRow input[type="tel"],
    div.tdbFormPromptRow input[type="url"],
    div.tdbFormPromptRow textarea,
    div#divSubscriptionForm input {
        width: calc(100% - 1rem - .1rem - .5rem); /* Subtract padding, border, and tdbContent padding. */
    }

    div.tdbFormPromptRow textarea {
        width: calc(100% - .5rem - 1.5rem);  /* 1.5rem for the microphone, when dictation is supported. */
    }

    div.tdbFormPromptRow select {
        width: calc(100% - .5rem); /* For selects it's like the padding and border are already accounted for?? Don't subtract them. */
        padding: 0px;
    }
}
@media (min-width:481px) {
	#tblMeetingList {
        min-height: 20rem;
	}
	#tdbDisplayMeetingCalendar {
        max-width: 20rem;
	}
}
@media print {
	.tdbPrintHidden	{
		display: none;
	}
	a, a:link, a:visited {
		text-decoration: none;
		color: #444;
	}
}

/*
First, middle, last name presented horizontally.  If these styles are moved before the @media queries,
then the @media styles would supercede, so leave them here!
*/
div.tdbFormPromptRow input.tdbFullNameFirst, div.tdbFormPromptRow input.tdbFullNameLast {
    width: 7.25rem;
}
div.tdbFormPromptRow input.tdbFullNameMiddle {
    width: 3rem;
}
@media (max-width: 480px) {
    div.tdbFormPromptRow input.tdbFullNameFirst, div.tdbFormPromptRow input.tdbFullNameLast {
        width: 8.0rem;
    }
}

/*
Calendar icons are placed inside input boxes on date prompts.
Info icons inside input boxes for ACH info and cvv info.  Set
these up similar to setting up display labels inside the input,
but position them near the end (tdbFormScripts.js sets the left
position).
*/
.tdbPromptIconContainer {
    /* Calendar icon or information icon inside the prompt, at the right. */
    display: inline-block;
    position: relative;
    top: -2.15rem;
    width: 1.25rem;
}
.tdbPromptIcon, .tdbPromptIcon:hover {
    color: var(--splash-bg-color);
}

/* Date picker.  Colors are defined in programming, based on Form Builder choices. */

.dpDiv {
  background-color: rgba(255, 255, 255, 1.0);
}
.dpTable {
    font-size: 1.0rem;
    color: var(--alt-font-color);
    background-color: var(--splash-bg-10pct);
}
/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
    text-align: center;
    font-size: 1.0rem;
    color: var(--alt-font-color);
}
.dpTDHover {
    text-align: center;
    font-size: 1.0rem;
    cursor: default;
    background-color: var(--splash-bg-80pct);
    border-color: var(--splash-bg-color);
    color: var(--splash-fg-color);
}
/* the table cell that holds the name of the month and the year */
td.dpTitleTD {
    font-size: 1.0rem;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    color: var(--alt-font-color);
}
.dpTitleText {
    font-size: 1.0rem;
    color: var(--alt-font-color);
}
.dpDayTD {
    text-align: center;
    font-size: 1.0rem;
    padding: .25rem .625rem;
    background-color: var(--splash-bg-color);
    border-color: var(--splash-bg-color);
    color: var(--splash-fg-color);
}
.dpDayHighlightTD {
    background-color: var(--splash-bg-90pct);
    border-color: var(--splash-bg-color);
}
.dpDayHighlight {
    text-align: center;
    font-size: 1.0rem;
    color: var(--splash-fg-color);
}
.dpTodayButtonTD {
    text-align: center;
}
.dpButton, .dpTodayButton {
    font-size: 1.0rem;
	background-color: var(--splash-bg-color);
}
.dpButton:hover, .dpTodayButton:hover {
	background-color: var(--splash-bg-85pct);
	color: var(--splash-fg-color);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.9);
}
.dpButton:disabled, .dpTodayButton:disabled {
	background-color: var(--splash-bg-50pct);
    color: var(--splash-fg-color);
    background-image: none;
}

img {
	max-width: 100%;
	height: auto;
}

p, td {
    line-height: 1.25rem;
}

/*
Fieldsets are used in some places around radio button or checkbox groups,
so jQuery Mobile can make them more usable on mobile devices.  By default
they have borders, but we don't want them.
*/
fieldset
{
    border: none;
    margin: 0px;
    padding: 0px;
}

legend {
	border: 0;
    padding-right: 0.75rem;
    padding-bottom: 1rem;
    font-size: 1.0rem;
    font-weight: bold;
}

td,th {
    vertical-align: top;
}
th {
    background-color: var(--splash-bg-color);
    color: var(--splash-fg-color);
}

.tblTDBDonationTable td {
    padding-bottom: .75rem;
}

.tdTDBSubInputs {
    width: 1rem;
}
.tdbBlockCenter {
	margin: 0 auto;
}
.tdbTextCenter {
	text-align: center;
}
.danger,.error {
    color: #a00;
}
.helpertext {
    font-size: 0.8rem;
}

/* Donation choices presented as big buttons. */
ul.tdbRadioChoiceList {
    padding: 0px;
    margin: 0px;
    list-style-image: url(../../_clear.gif);
}

div.tdbBigButtonChoices {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
    user-select: none;
}

ul.tdbRadioChoiceList li {
    float: left;
    display: list-item;
    width: 7rem;
    height: 3.25rem;
    margin: 0rem .35rem 1rem .35rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.9);
    text-align: center;
    background-color: #ababab;
    color: #fff;
}
ul.tdbRadioChoiceList li:hover {
    cursor: pointer;
    border-top-color: #999;
    border-left-color: #999;
    border-right-color: #000;
    border-bottom-color: #000;
}

ul.tdbRadioChoiceList li label:hover {
    cursor: pointer;
}

ul.tdbRadioChoiceList li.tdbRecursBtn {
    padding: 0rem .25rem;
    width: 13rem;
}

div.tdbBigButtonChoices ul.tdbRadioChoiceList li.tdbDonBtn input {
    border-radius: .25rem;
    background-color: rgba(255, 255, 255, .85);
    border-color: transparent;
    color: #777;
    font-size: 1rem;
    font-weight: normal;
    width: 4rem;
}

ul.tdbRadioChoiceList li label {
    font-size: 1.25rem;
    line-height: 3.25rem;
}

ul.tdbRadioChoiceList li label .tdbBtnChoice {
    display: none;
}

ul.tdbRadioChoiceList li.tdbRecursBtn {
    clear: both;
}

#btnRecursChecked {
    margin-right: .25rem;
    display: none;
    vertical-align: middle;
}

/* Table for when subscription options are on the right or left. */
#tdTDBContactPlusSubsRight, #tdTDBContactPlusSubsLeft {
    vertical-align: top;
}

/* Payment page styles */
#tdbChoosePaymentType {
    font-size: .75rem;
}
div.tdbFormPromptRow select[name="CardType"], select[name="CardType"] {
    display: none;
}
.paypal-button-hidden {
    visibility: hidden;
}
div.card img {
    opacity:0.2;
    margin:-4px 3px 0 3px;
}
.imgnotoffer {
    border: 1px solid #D70000;
    opacity: 1 !important;
}      
.cardshow {
    opacity:1 !important;
}
#divCardCodeInfo, #divACHInfo {
    margin: .3125rem 0rem;
}
#ifrCardCodeInfo, #ifrACHInfo {
    border: none;
    background-color: #f4f4f4;
    width: 475px;
    height: 300px;
    max-width: 475px;
    max-height: 300px;
    overflow: auto;
}
#imgPayByPayPal {
    cursor: pointer;
}
#tdbSSLSeal {
    width: 150px;
    text-align: center;
    margin: 0px auto;
}

/* grid */
.grid {
    width: 100%;
    max-width: 100%;
	padding-top: .25rem;
}	
.col[class*=span-] {
    position: relative;
    min-height: 1px;
    float: left;
}
.span-8 {
    width: 66.66667%;
}
.span-4 {
    width: 33.33334%;
}
.push-4 {
    left: 33.33333%;
}
.fields {
    list-style: none;
    margin: 0;
    padding: 0;
}
.field-label {
    display: block;
    vertical-align: middle;
    margin-bottom: .5rem;
}
.field-help {
    color: #BDC3C7;
}

#tblTDBBillingAddress div {
    padding-top: .25rem;
}

.button-group > li:hover, .button-group > li.is-active, .button-group > .button:hover, .button-group > .button.is-active {
    z-index: 1;
}
.pmtbutton {
    border-radius: 0rem;
    width: 7rem;
    margin: 0rem .1rem .5rem 0rem;
}
.achacctbutton {
    width: 10rem;
    margin: .5rem .5rem .5rem 0rem;
}
.pmtbutton.selected, .achacctbutton.selected {
    background-color: var(--splash-bg-80pct);
    text-decoration: underline;
}
.tdbbutton input {
    display:none;
}
.button-group ul {
    margin: 0rem;
	padding: 0rem;
}

#imgPayByPayPal {
    margin: .5rem .5rem .5rem 0rem;
}

/* Opt2 Page Styles */

#tblTDBOpt2Info table td {
    padding: .1rem .1rem .1rem 0rem;
}
#tblTDBContactInfo, #tblTDBOpt2Info, #tblTDBOpt2Info table {
    border-spacing: 0rem;
}

button.Opt2Link {
    font-weight: bold;
}

/* Header for above the list of existing records and header for above the data entry form. */
#tblTDBOpt2Display, #tblTDBOpt2Header {
	border-spacing: 0rem;
	margin: 1.5rem auto .75rem auto;
	padding: 0rem;
    width: auto;
    font-size: 1.5rem;
    font-weight: bold;
}
#tblTDBOpt2Display {
    margin-top: .5rem;
}

/*
Container for the sub-table that holds the grid of existing records.
Inline-block display, padding-top, and relative position are for fixing
the headers at the top of the table, as the row scroll.
*/
div#tdbOpt2CurrentData {
    min-height: 3rem;
    max-height: 20rem;
    width: calc(100% - 1.5rem);
    min-width: calc(100% - 1.5rem);
    max-width: calc(100% - 1.5rem);  /* subtract content padding */
    display: inline-block;
    overflow: auto;
}

#tdbOpt2NoData {
    font-style: italic;
}

/* Table that lists existing opt2 records.  The data rows scroll but the headers to not. */
#tblTDBOpt2Listr {
	border-spacing: 0rem;
	margin: 0rem;
}

#tblTDBOpt2Listr td, #tblTDBOpt2Listr th {
    font-size: 1.0rem;
    line-height: 2.5rem;
    padding: .25rem;
}

/*
Sticky positioning keeps the headers in place relative to div#tdbOpt2CurrentData while the
data rows scroll up the div.  At this writing (05/2020) sticky doesn't work on IE11 (never
will) and Opera Mini (.25% market share as of 04/2020).  In these browsers the column
headers will scroll out of view.
*/
#tblTDBOpt2Listr th {
    color: var(--splash-fg-color);
    background-color: var(--splash-bg-color);
    top: 0;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position: sticky;
    line-height: 1.25rem;
}
.tdbOpt2ControlIcon {
    width: 3.75rem;  /* Wide enough for the Delete header, and spaced enough to make tapping easier. */
    text-align: center;
}
.AltDataRow {
    background-color: var(--splash-bg-10pct);
}
.SelectedDataRow {
    background-color: var(--splash-bg-30pct);
}
#divTDBOpt2ListAddControl {
    width: 33%;
    float: left;
}
#divOpt2RecCt {
    width: 33%;
    float: right;
    margin-right: 1.5rem;
    text-align: right;
}
#tdbOpt2RecCt {
    font-size: .75rem;
    font-style: italic;
}
#tdbAfterRecCt {
    clear: both;
}

/* Table that displays the opt2 data entry form to add/edit a record. */
#tblTDBOpt2Info {
	border-spacing: 0rem;
	margin: 0rem auto;
}
tblTDBOpt2Info td {
	padding: .2rem;
}

/* When a file attachment is an image (.jpg, .jpeg, .png, .gif), the maximum size of the image display. */
.tdbImageAttachment {
    max-width: 12.5rem;
    margin: 0rem;
    vertical-align: middle;
}

/* File Picker "Attach File" buttons. */
button.fp__btn {
	margin: 0rem 0rem .5rem 0rem !important;

    /* Repeat the styles of a tdbbutton. */
	display: inline-block;
    margin: 0px .35rem 1rem .35rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    box-shadow: 0 1px 2px rgba(144,144,144,1.0);
    text-align: center;
	position: relative;
    vertical-align: middle;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    line-height: normal;
    white-space: nowrap;
    text-decoration: none;
    font-size: 1rem;
	text-shadow: none;
    background-color: var(--splash-bg-color);
    color: var(--splash-fg-color);
}
button.fp__btn:hover {
    background-color: var(--splash-bg-80pct);
    color: var(--splash-fg-color);
}

/*
File Picker maximum dialog box height.  Default is 100%.  If the form is hosted at thedatabank, this does a good
job, but if it's hosted in a tall iframe, the UI elements are widely spaced across the height and you can barely
tell you're supposed to do something.
*/
div#filepicker_dialog_container {
    max-height: 550px;
}

/*
File picker instructions are only displayed when the form is in an iframe, to let the user
know they may need to scroll up to see the file picker dialog box.
*/
span.tdbFilePickerInstruct {
    color: var(--alt-font-color);
    font-size: .75rem;
}

/* Petition list styles */
#tdbPetHeader {
    font-size: 1.5rem;
    border-bottom: 1px solid #444444;
}
.tdbPetListContentItem {
    padding: .25rem;
}
.tdbPetListCol1, .tdbPetListCol2, .tdbPetListCol3 {
    padding-right: 1rem;
}
.tdbPetListCol3, .tdbPetListCol4 {
    font-size: .75rem;
}

/* Calendar Forms */

/*
The following styles are taken from Bootstrap v 3.0.3 and are used for responsive
content display.  Anything that wants to use these classes for responsive should do
it within a .tdbUserBorderBoxSize container.  box-sizing: border-box is important for
correct Bootstrap layout but interferes with the rest of our forms (particularly
input box widths), which use the default content-box sizing.
*/
.tdbUseBorderBoxSize *,.tdbUseBorderBoxSize *:before,.tdbUseBorderBoxSizet *:after{box-sizing:border-box; line-height: 1.25rem;}
.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}
.row{margin-right:0px;margin-left:0px}.row:before,.row:after{display:table;content:" "}.row:before,.row:after{display:table;content:" "}
.row:after {
    clear: both;
}
.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12{
    position:relative;
    min-height:1px;
    padding-right:1rem; /* Changed from Bootstrap 15px */
    padding-left:0rem;  /* Changed from Bootstrap 15px */
}
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12{float:left}
.col-xs-12{width:100%}.col-xs-11{width:91.66666666666666%}.col-xs-10{width:83.33333333333334%}.col-xs-9{width:75%}.col-xs-8{width:66.66666666666666%}.col-xs-7{width:58.333333333333336%}.col-xs-6{width:50%}.col-xs-5{width:41.66666666666667%}.col-xs-4{width:33.33333333333333%}.col-xs-3{width:25%}.col-xs-2{width:16.666666666666664%}.col-xs-1{width:8.333333333333332%}
.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666666666666%}.col-xs-pull-10{right:83.33333333333334%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666666666666%}.col-xs-pull-7{right:58.333333333333336%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666666666667%}.col-xs-pull-4{right:33.33333333333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.666666666666664%}.col-xs-pull-1{right:8.333333333333332%}.col-xs-pull-0{right:0}
.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666666666666%}.col-xs-push-10{left:83.33333333333334%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666666666666%}.col-xs-push-7{left:58.333333333333336%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666666666667%}.col-xs-push-4{left:33.33333333333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.666666666666664%}.col-xs-push-1{left:8.333333333333332%}.col-xs-push-0{left:0}
.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666666666666%}.col-xs-offset-10{margin-left:83.33333333333334%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666666666666%}.col-xs-offset-7{margin-left:58.333333333333336%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666666666667%}.col-xs-offset-4{margin-left:33.33333333333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.666666666666664%}.col-xs-offset-1{margin-left:8.333333333333332%}.col-xs-offset-0{margin-left:0}
@media(min-width:768px){
    .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{float:left}
    .col-sm-12{width:100%}.col-sm-11{width:91.66666666666666%}.col-sm-10{width:83.33333333333334%}.col-sm-9{width:75%}.col-sm-8{width:66.66666666666666%}.col-sm-7{width:58.333333333333336%}.col-sm-6{width:50%}.col-sm-5{width:41.66666666666667%}.col-sm-4{width:33.33333333333333%}.col-sm-3{width:25%}.col-sm-2{width:16.666666666666664%}.col-sm-1{width:8.333333333333332%}
    .col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666666666666%}.col-sm-pull-10{right:83.33333333333334%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666666666666%}.col-sm-pull-7{right:58.333333333333336%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666666666667%}.col-sm-pull-4{right:33.33333333333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.666666666666664%}.col-sm-pull-1{right:8.333333333333332%}.col-sm-pull-0{right:0}
    .col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666666666666%}.col-sm-push-10{left:83.33333333333334%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666666666666%}.col-sm-push-7{left:58.333333333333336%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666666666667%}.col-sm-push-4{left:33.33333333333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.666666666666664%}.col-sm-push-1{left:8.333333333333332%}.col-sm-push-0{left:0}
    .col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666666666666%}.col-sm-offset-10{margin-left:83.33333333333334%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666666666666%}.col-sm-offset-7{margin-left:58.333333333333336%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666666666667%}.col-sm-offset-4{margin-left:33.33333333333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.666666666666664%}.col-sm-offset-1{margin-left:8.333333333333332%}.col-sm-offset-0{margin-left:0}
}
@media(min-width:992px){
    .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12{float:left}
    .col-md-12{width:100%}.col-md-11{width:91.66666666666666%}.col-md-10{width:83.33333333333334%}.col-md-9{width:75%}.col-md-8{width:66.66666666666666%}.col-md-7{width:58.333333333333336%}.col-md-6{width:50%}.col-md-5{width:41.66666666666667%}.col-md-4{width:33.33333333333333%}.col-md-3{width:25%}.col-md-2{width:16.666666666666664%}.col-md-1{width:8.333333333333332%}
    .col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666666666666%}.col-md-pull-10{right:83.33333333333334%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666666666666%}.col-md-pull-7{right:58.333333333333336%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666666666667%}.col-md-pull-4{right:33.33333333333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.666666666666664%}.col-md-pull-1{right:8.333333333333332%}.col-md-pull-0{right:0}
    .col-md-push-12{left:100%}.col-md-push-11{left:91.66666666666666%}.col-md-push-10{left:83.33333333333334%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666666666666%}.col-md-push-7{left:58.333333333333336%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666666666667%}.col-md-push-4{left:33.33333333333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.666666666666664%}.col-md-push-1{left:8.333333333333332%}.col-md-push-0{left:0}
    .col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666666666666%}.col-md-offset-10{margin-left:83.33333333333334%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666666666666%}.col-md-offset-7{margin-left:58.333333333333336%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666666666667%}.col-md-offset-4{margin-left:33.33333333333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.666666666666664%}.col-md-offset-1{margin-left:8.333333333333332%}.col-md-offset-0{margin-left:0}
}
@media(min-width:1200px){
    .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{float:left}
    .col-lg-12{width:100%}.col-lg-11{width:91.66666666666666%}.col-lg-10{width:83.33333333333334%}.col-lg-9{width:75%}.col-lg-8{width:66.66666666666666%}.col-lg-7{width:58.333333333333336%}.col-lg-6{width:50%}.col-lg-5{width:41.66666666666667%}.col-lg-4{width:33.33333333333333%}.col-lg-3{width:25%}.col-lg-2{width:16.666666666666664%}.col-lg-1{width:8.333333333333332%}
    .col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666666666666%}.col-lg-pull-10{right:83.33333333333334%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666666666666%}.col-lg-pull-7{right:58.333333333333336%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666666666667%}.col-lg-pull-4{right:33.33333333333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.666666666666664%}.col-lg-pull-1{right:8.333333333333332%}.col-lg-pull-0{right:0}
    .col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666666666666%}.col-lg-push-10{left:83.33333333333334%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666666666666%}.col-lg-push-7{left:58.333333333333336%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666666666667%}.col-lg-push-4{left:33.33333333333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.666666666666664%}.col-lg-push-1{left:8.333333333333332%}.col-lg-push-0{left:0}
    .col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666666666666%}.col-lg-offset-10{margin-left:83.33333333333334%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666666666666%}.col-lg-offset-7{margin-left:58.333333333333336%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666666666667%}.col-lg-offset-4{margin-left:33.33333333333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.666666666666664%}.col-lg-offset-1{margin-left:8.333333333333332%}.col-lg-offset-0{margin-left:0}
}
/* End of Bootstrap styles. */

/* Meeting List */
.tdbListMtgRow {
    border-top: #AAA solid 1px;
    padding-bottom: .5rem;
    clear:both;
}
.tdbListMtgCheck {
    margin-top: .4rem;
}
#tdbDisplayMeetingCalendar {
    margin:auto;
}
a span {
cursor: pointer;
}
.DayNbr{
    margin:auto;
}

/* Holds the paging controls, titles, and a sub-table for the actual calendar. */
table.calendar
{
    background-color: #fff;
    table-layout: fixed;
    padding: 0px;
    margin-bottom: 15px;
    width: 100%;
}
/* Contains the innermost table for the actual calendar. */
td#CalendarCell table {
    table-layout:fixed;
}
td#tdbMtgCalPrevMonth {
    text-align: left;
}
td#tdbMtgCalNextMonth {
    text-align: right;
}
.DayNbr, td.CurrentMonthYear {
    color: var(--alt-font-color);
    font-size: .75rem;
}
.DayNbr
{
	font-weight: bold;
}
a[href="#EventList"] {
    color: var(--splash-fg-color);
}
a[href="#EventList"]#lnkCalShowAll {
    color: var(--splash-bg-color);
}
td.titleDays, .SelectedDay {
    background-color: var(--splash-bg-color);
    color: var(--splash-fg-color);
    font-size: .75rem;
}
.SelectedDay, .CurDay, .CalDay
{
    text-decoration: none;
	vertical-align: top;
    text-align: center;
    padding: 4px 2px;
    letter-spacing: normal;
}
.CurDay {
    color: var(--splash-fg-color);
    background-color: var(--splash-bg-50pct);
    font-size: .75rem;
}
.CalDay {
    background-color: var(--splash-bg-10pct);
    font-size: .75rem;
}
.CalDay.tdbWithEvents {
    background-color: var(--splash-bg-70pct);
}
/* Days with no number, at the beginning and/or end of the month. */
.fillday
{
    background-color: var(--splash-bg-20pct);
}
td.Titles, a.CalDay, a.CalDay:hover, a.CalDay:visited, a.CalDay:active, a.CurDay, a.CurDay:hover, a.CurDay:visited, a.CurDay:active, a.NextPrev, a.NextPrev:hover, a.NextPrev:visited, a.NextPrev:active, td.EventListTitle {
    color: var(--splash-bg-color);
    font-size: .75rem;
}
a.CalDay
{
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
a.CalDay:hover
{
    text-decoration: underline;
}
a.CalDay:visited
{
    text-decoration: none;
}
a.CalDay:active
{
    text-decoration: underline;
}
a.CurDay
{
    cursor: pointer;
    text-decoration: none;
}
a.CurDay:hover
{
    text-decoration: underline;
}
a.CurDay:visited
{
    text-decoration: none;
}
a.CurDay:active
{
    text-decoration: underline;
}
a.NextPrev
{
    cursor: pointer;
    text-decoration: none;
}
a.NextPrev:hover
{
    text-decoration: underline;
}
a.NextPrev:visited
{
    text-decoration: none;
}
a.NextPrev:active
{
    text-decoration: underline;
}
td.Titles
{
    font-weight: bold;
}
td.CurrentMonthYear
{
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}
td.titleDays
{
    font-weight: bold;
    text-align: center;
    padding: 4px 2px;
}

td.EventListTitle
{
    padding: 10px 0px;
    text-align: center;
    font-weight: bold;
}

.tdbMtgLabel {
    margin-top: .4rem;
}
.tdbMeetingCount {
    font-size: .75rem;
    font-style: italic;
}

#tblAlreadyAttending th, #tblAlreadyAttending td {
    padding: .25rem;
}

/* Tell-a-Friend */

#tdbTAFInstruct {
    font-size: .75rem;
}

#tdbTAFFooter {
    font-size: .75rem;
}

#spnNoteCharCt, #tdbTAFNotSent {
    color: red;
}