/**
 * Does a simple conversion of pixels to rem units
 * Round the value to 2 decimal points
 * @param  {[type]} $pixels Font size in the format 11px
 * @return {[type]}         Fonr size in teh format 1.2rem
 */
/**
 * Retrieves the breakpoint form the breakpoints map
 * @param  {string} $name [description]
 * @return {string}       [description]
 */
/* Login screen specific styles, shared styles */
span.field-required, #login-div-content span.RequiredField {
  color: #a00;
}

#login-div-content {
  padding-bottom: 1.19rem;
}

#login-div-content .actions {
  padding-top: 0.3rem;
}

#login-div-content input[type=email],
#login-div-content input[type=password],
#login-div-content input[type=text] {
  width: 100%;
}
@media ((min-width: 600px)) {
  #login-div-content input[type=email],
  #login-div-content input[type=password],
  #login-div-content input[type=text] {
    width: 19rem;
  }
}

@media ((max-width: 599px)) {
  #login-div-content input[type=submit] {
    width: 100%;
  }
}

/* End of login styles */
#login-div-content .footer-block {
  padding-top: 0.59rem;
}

#lmainForgotPasswordForm label, #login-div-content #process label {
  white-space: nowrap;
}

.input-border td p {
  margin: 0;
}

#login-div-content .right-block {
  margin-top: 1.19rem;
}
@media ((min-width: 600px)) {
  #login-div-content .right-block {
    margin-top: 0;
    padding-left: 0.59rem;
  }
}

@media ((min-width: 600px)) {
  table.ProcessAppTable {
    min-width: 25rem;
  }
}
#login-div-content table {
  border-collapse: collapse;
  border-spacing: 0;
}
@media ((max-width: 599px)) {
  #login-div-content table {
    display: block;
  }
}
@media ((max-width: 599px)) {
  table.ProcessAppTable, .input-border table {
    width: 100%;
  }
}
#contentScrollLayer > table, .outer-border > table {
  width: 100%;
}
@media ((min-width: 600px)) {
  .outer-border table {
    margin-left: -1%;
  }
}
.outer-border table table {
  margin-left: 0;
}

@media ((max-width: 599px)) {
  #login-div-content tbody {
    display: block;
  }
}

@media ((max-width: 599px)) {
  .input-border tr {
    display: block;
    margin-bottom: 1.19rem;
    width: 100%;
  }
}
@media ((max-width: 599px)) {
  .outer-border tr {
    display: block;
    width: 100%;
  }
}

@media ((min-width: 600px)) {
  .input-border td:nth-child(2) {
    width: 20%;
  }
}
@media ((min-width: 600px)) {
  #contentScrollLayer td:last-child {
    min-width: 17rem;
  }
}
@media ((max-width: 599px)) {
  .input-border td:last-child {
    width: 100%;
  }
}
@media ((max-width: 599px)) {
  .outer-border td:last-child {
    width: 100%;
  }
}
.outer-border td {
  padding: 0;
}
@media ((max-width: 599px)) {
  .outer-border td {
    display: block;
    width: 100%;
  }
}
.outer-border td td {
  padding-bottom: 1.19rem;
  vertical-align: middle;
}
@media ((max-width: 599px)) {
  .outer-border td td {
    display: inline-block;
    padding-bottom: 0;
    width: auto;
  }
}
@media ((max-width: 599px)) {
  [name=ChangePassword] input[type=password],
  [name=ChangePassword] input[type=submit],
  [name=ChangePassword] input[type=text] {
    width: 100%;
  }
}

[name=ChangePassword] p {
  margin: 0;
}

@media ((max-width: 599px)) {
  [name=ChangePassword] table,
  [name=ChangePassword] tbody,
  [name=ChangePassword] tr,
  [name=ChangePassword] td {
    display: block;
    width: 100%;
  }
}

@media ((max-width: 599px)) {
  [name=ChangePassword] td:last-child {
    padding-bottom: 1.19rem;
  }
}
@media ((min-width: 600px)) {
  [name=ChangePassword] td:nth-child(2) {
    padding-bottom: 1.19rem;
  }
}

.lc_FilterCell div:first-child {
  margin-bottom: 0.59rem;
}
@media ((min-width: 600px)) {
  .lc_FilterCell div:first-child {
    margin-bottom: 0;
    margin-right: 0.59rem;
  }
}

.lc_PaginatorTable p {
  margin: 0;
}

#process > table {
  width: 100%;
}

#filter_text {
  width: 100%;
}
@media ((min-width: 480px)) {
  #filter_text {
    width: 150px;
  }
}

.lc_FilterCell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media ((min-width: 600px)) {
  .lc_FilterCell {
    flex-direction: row;
  }
}

.lc_FilterTable {
  margin: 1.19rem 0;
}

.lc_Cell {
  border: 1px solid #ccc;
  padding: 0.59rem;
}

.lc_PaginatorCell {
  display: block;
  width: 100%;
}
@media ((min-width: 600px)) {
  .lc_PaginatorCell {
    display: table-cell;
    width: auto;
  }
}

#lc_paginationLinks {
  display: flex;
  justify-content: space-between;
  margin-left: 0;
  text-align: left;
}
@media ((min-width: 600px)) {
  #lc_paginationLinks {
    display: block;
    margin-left: 0.59rem;
    text-align: right;
  }
}

.lc_PaginatorRow {
  display: block;
  width: 100%;
}

.lc_PaginatorTable {
  margin: 1.19rem 0;
  width: 100%;
}

.lc_Row0 {
  background-color: #efefef;
}

.lc_Row1 {
  background-color: transparent;
}

.lc_Table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  width: 100%;
}

/* column headers th elements */
.lc_Heading,
.lc_HeadingSort {
  border: 1px solid #ccc;
  text-align: left;
  padding: 0.59rem;
}

/* sort buttons */
.lc_HeadingSort {
  text-align: right;
}

/* For the address book, appears on eCommerce, eCard & TAF pages */
.AddressBookStep label,
.AddressBookStep {
  font-weight: bold;
  margin-bottom: 0;
}

.AddressBookTitle {
  font-weight: bold;
}

.AddressBookStep label {
  display: inline;
}

span.field-required, #login-div-content span.RequiredField {
  color: #a00;
}

/**
 * Email Preferences/ Unsubscribe page, table-based.
 */
#IUnsubscribeEmail .Button, #IChangeEmailFormat .Button, [name=IUnsubscribeCategory] .Button {
  margin-bottom: 0.59rem;
}
@media ((max-width: 599px)) {
  #IUnsubscribeEmail .Button, #IChangeEmailFormat .Button, [name=IUnsubscribeCategory] .Button {
    width: 100%;
  }
}

#IUnsubscribeEmail,
#IChangeEmailFormat,
[name=IUnsubscribeCategory] {
  margin-bottom: 1.19rem;
}

#IChangeEmailFormat p, #IUnsubscribeEmail p, [name=IUnsubscribeCategory] p {
  margin: 0;
  padding: 0;
}
#IChangeEmailFormat p.PaddedListHeadings, #IUnsubscribeEmail p.PaddedListHeadings, [name=IUnsubscribeCategory] p.PaddedListHeadings {
  margin: 0;
  padding: 0;
}

@media ((max-width: 599px)) {
  #IUnsubscribeEmail table, #IChangeEmailFormat table,
  #IUnsubscribeEmail tbody,
  #IChangeEmailFormat tbody {
    display: block;
    max-width: 100%;
  }
}

@media ((max-width: 599px)) {
  #IUnsubscribeEmail td[colspan="2"], #IChangeEmailFormat td[colspan="2"], [name=IUnsubscribeCategory] td[colspan="2"] {
    display: block;
    width: 100%;
  }
}
#IChangeEmailFormat td, #IUnsubscribeEmail td, [name=IUnsubscribeCategory] td {
  padding: 0.31rem;
}
#IChangeEmailFormat td td, #IUnsubscribeEmail td td, [name=IUnsubscribeCategory] td td {
  padding: 0;
}

@media ((max-width: 599px)) {
  #IUnsubscribeEmail tr, #IChangeEmailFormat tr {
    display: block;
  }
}

@media ((max-width: 599px)) {
  #IUnsubscribeEmail .wrapable, #IChangeEmailFormat .wrapable, [name=IUnsubscribeCategory] .wrapable {
    word-wrap: anywhere;
  }
}

/*
  Style blocks are grouped by function
  - Global
  - Dividers
  - Black Bordered Lists
  - Problem Solvers
  - Calendar
  - News
  - Advocacy
  - Donations and TeamRaiser
  - Vertical Scroller
  - Rollover Popups
  - Slide Show
  - Deprecated
  and then sorted by identifier. Styles applied to specific HTML elements are sorted to the top.
*/
/*
   % for font sizing
   em for element sizing
*/
/*
  -- Global --
*/
/* The application area margin and width. */
/* indent a block that isn't a block quote */
.subIndent {
  margin: 0 0 0 15px;
  padding: 0;
}

/* provide a small amount of margin within some container */
/* The 99% width fixes some oddities in some browsers when */
/* the DIV contains a table and is itself within a DIV which */
/* has a colored background and contains other tables. */
.smallMargin {
  margin: 4px;
  width: 99%;
}

/* Sets the font style for all error messages */
.ErrorMessage {
  color: #98002e;
}

.ErrorWarningMessage {
  color: #98002e;
}

/* when the user needs a little immediate help */
.Hint {
  font-size: 80%;
  font-style: italic;
}

/*
  These are for the older style of lists without
  borders. These are used for simple selection
  lists and where the list does not contain
  editable objects.
*/
.ListHeadings {
  font-weight: bold;
}

.ListItem {
  font-size: 80%;
}

/* smaller font for notes and such */
.NoteText {
  font-size: 80%;
}

/*
  This is a general page title. It is also used
  wherever multiple pages edit the same object.
  Mind you, that doesn't happen a lot on the
  user side.
*/
.ObjTitle {
  font-size: larger;
  font-weight: bolder;
  margin: 0px 0px 6px;
  padding: 0px;
}

/* Related Links, on events */
/* Read-only/view values */
/* Replace FontMinus2 with a more descriptive name. */
.SmallerC {
  text-align: center;
}

/* Sets the font style for all success messages*/
.SuccessMessage {
  color: green;
}

/* Sets the font style for all warning messages*/
.WarningMessage {
  font-weight: bold;
}

.WarningMessageBigger {
  padding: 4px;
  font-size: 110%;
  font-weight: bold;
}

.AutoOptInWarningMessage {
  font-size: 90%;
}

/*
  These are for section dividers. dividerHeading is meant
  for use inside a <div class="appArea"></div>. The
  transparent image forces NS4 to render the background
  where it would otherwise not.
*/
/* NOTE: if you change this, also change the corresponding HACK in AdminStyle.css */
/* HACK: to make all user side pages have section headers behaving in the same way. */
td.FormSectionHeader h5 {
  background-color: inherit;
  color: inherit;
}

p.dividerHeading {
  font-weight: bold;
  margin: 0px;
}

.Divider {
  font-weight: bold;
}

.SectionHead {
  color: black;
  font-weight: bold;
  padding-top: 8px;
  padding-bottom: 2px;
  padding-left: 0px;
}

/*
 * VeriSign seal/link
 */
div#vs_seal {
  width: 115px;
  text-align: center;
}

a#about_ssl,
a#about_ssl:link,
a#about_ssl:active,
a#about_ssl:hover {
  text-decoration: none;
  font-size: 0.44rem;
  text-align: center;
  margin: 0;
  padding: 0;
}

/*
  In order to get the vertical black lines it is
  necessary to spcify tables with no padding or
  spacing. Whitespace must be added in the styles
  so the text may be read.
*/
p.PaddedEntry {
  margin: 0.59rem;
}

/* bold */
p.PaddedEntryB {
  margin: 0.59rem;
  font-weight: bold;
}

/* centered */
p.PaddedEntryC {
  margin: 0.59rem;
  text-align: center;
}

/* right aligned */
p.PaddedEntryR {
  margin: 0.59rem;
  text-align: right;
}

/* heading styles used with TableHeadings below */
p.PaddedListHeadings {
  font-weight: bold;
  margin: 0.59rem;
}

/* centerd heading */
p.PaddedListHeadingsC {
  margin: 0.59rem;
  font-weight: bold;
  text-align: center;
}

p.PaddedListHeadingsC label {
  font-weight: inherit;
}

/* right justified heading */
p.PaddedListHeadingsR {
  margin: 0.59rem;
  font-weight: bold;
  text-align: right;
}

/* The "Small" ones are for Contact DB Configuration. */
p.PaddedListHeadingsSmall {
  margin: 0.59rem;
  font-weight: bold;
  font-size: 90%;
}

p.PaddedEntrySmall {
  margin: 0.59rem;
  font-size: 90%;
}

p.PaddedEntrySmallC {
  margin: 0.59rem;
  font-size: 90%;
  text-align: center;
}

/*
  Zero margin to put in the table
  cells that generate the vertical black lines.
*/
p.spacer {
  margin: 0;
}

/*
  Sets a transparent background that
  allows WrapperBack below to show
  through. This overrides the background
  color setting at the top of this file.
*/
table.Backed {
  background-color: transparent;
}

/* background for the headings */
td.TableHeadings {
  background-color: #f3f3f3;
  border-bottom: 1px solid #ccc;
}

th.TableHeadings {
  background-color: #f3f3f3;
  border-bottom: 1px solid #ccc;
}

/*
  Right alignment style orignally created
  for the sort buttons.
*/
td.TableHeadingsR {
  background-color: #f3f3f3;
  border-bottom: 1px solid #ccc;
  text-align: right;
}

/*
  These set the border and line color
  by setting the background of a parent
  table or table cell.
*/
/* these alternate the row background color */
/*
  Sets the font style for all Buttons. This is used
  to overrride the setting for <input> above.
*/
/* Hack for an invisible default button before the others. */
input.default-submit-hack {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

/*
  This fixes NS4's tendency to force inline styles
  on following elements in the document.
*/
p.centered {
  text-align: center;
}

p.righted {
  text-align: right;
}

/* accessability tags */
/* remove the border from <fieldset> */
fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

fieldset.withBox {
  border: 1px solid;
  display: block;
  padding: 0 4px 4px;
}

fieldset.noBox {
  border: none;
  display: block;
  padding: 0 4px 4px;
}

legend.surveyLegend {
  float: none;
}

label.bold {
  font-weight: bold;
}

TABLE.DefaultWrapper .FormBox,
TABLE.DefaultWrapper {
  border-width: 0;
}

/*
  -- Calendar --
*/
/* these are for the mini-calendar on Calendar_userdetail.tpt */
td.minicalcell {
  background-color: #ccf;
}

td.minicaltitle {
  background-color: #ffc;
}

p.minicaltitle {
  font-weight: bold;
}

/*Sets the font style for all Calendar list headers ( example: days of the week)*/
input.CalTicketQuantity {
  text-align: right;
}

.CalHeaderText {
  font-weight: bold;
}

/* margin for the calendar list view */
.callist {
  margin-left: 10px;
}

.datelink {
  font-weight: bold;
  text-decoration: none;
}

.eventtitle {
  font-size: 12pt;
  font-weight: bold;
}

.locationtitle {
  font-weight: bold;
}

/*
  -- News --
*/
hr.storySeparator {
  width: 100%;
}

.byline {
  font-style: italic;
}

.headline {
  font-weight: bold;
  font-size: 14pt;
  text-decoration: none;
}

.headlinelist {
  font-weight: bold;
  font-size: 10pt;
  text-decoration: none;
}

.subheading {
  font-weight: bold;
}

.teaser {
  font-size: 10pt;
}

table.searchBox {
  background-color: #fefeed;
}

div.searchBox {
  background-color: #fefeed;
  border: 1px solid Black;
  padding: 2px;
  margin: 3px;
}

/* the preview area for user news */
.previewBox {
  border: 1px solid black;
  margin: 4px;
  padding: 4px;
  width: 600px;
}

/*
  -- Advocacy --
*/
/* Sets the background color of the component. */
table.advocacytable {
  background-color: #fff;
}

/* Controls the look of the demo message. */
.messageArea {
  border: medium outset #ccc;
  padding: 4px 4px 1px 4px;
  margin: 4px 4px 1px 4px;
  background-color: #ccc;
}

/* 8631: Controls the look of instructional text on the message page */
.AdvocacyInstructions {
  background-image: url("../images/sp.gif");
  font-weight: bold;
  padding: 4px;
}

.AdvocacyNSFix {
  font-size: 8pt;
}

/*
  -- Donations and Friendraiser --
    new for Molokini
  Bug #10837: removed 0px left & right margin because it made
          NS4.7 stretch the content insanely wide to the
          point of excluding the right half of it completely.
*/
.Instructions {
  background-image: url("../images/sp.gif");
  font-weight: bold;
  padding: 4px 4px 1px 4px;
  margin-bottom: 0px;
  margin-top: 0px;
}

td.Instructions {
  border: #000 1px solid;
}

.ProgressBox {
  font-size: 8pt;
  font-weight: bold;
  background-color: #efefef;
  color: #999;
}

.ProgressBoxCurrent {
  font-size: 8pt;
  font-weight: bold;
  background-color: #efefef;
  color: #333;
}

table.ProgressBox {
  padding-right: 4px;
  padding-left: 4px;
  border: #000 1px solid;
}

a.ProgressBox:link {
  font-size: 8pt;
  color: #333;
  text-decoration: none;
}

a.ProgressBox:visited {
  font-size: 8pt;
  color: #333;
  text-decoration: none;
}

a.ProgressBox:hover {
  font-size: 8pt;
  color: #000;
  font-weight: bold;
  text-decoration: none;
}

/*
  During the making of a donation
  Donation_UD_Progress_Bar.tpt
*/
table.ProgressBack {
  background-color: #ccc;
  padding: 4px;
  border: outset 4px;
}

/* centered */
p.progressItem {
  margin: 2px 3px;
  font-size: 10pt;
  text-align: center;
}

td.currentItem {
  background-color: #ffc;
}

td.finishedItem {
  background-color: #999;
  background-image: url(../images/progress.gif);
}

td.nextItem {
  background-color: #fff;
  background-image: url(../images/nextprogress.gif);
}

.Premiums {
  font-size: 10pt;
}

table.Premiums {
  background-color: #fff;
  padding-right: 6px;
  padding-left: 6px;
  border: #000 1px solid;
}

a.Premiums {
  font-size: 8pt;
}

.Upgrades {
  font-size: 10pt;
}

table.Upgrades {
  padding-right: 6px;
  padding-left: 6px;
  border: 1px solid #ccc;
}

a.Upgrades {
  font-size: 8pt;
}

.UpgradeAmount {
  color: #90c;
  font-size: 1rem;
  font-weight: bold;
  font-style: italic;
}

/*
  Global styles. Also used on the unsubscribe page
  The background-image entry forces NS4
  to render the background color when
  it doesn't want to.
*/
.FormBoxHeader {
  /* */
  border: 1px solid #ccc;
  font-size: 8pt;
  font-weight: bold;
  background-color: #efefef;
}

.FormBox,
.tree-view {
  width: 100%;
}

table.FormBox,
table.FormBoxNoWidth,
table.tree-view {
  border: 1px solid #ccc;
  border-collapse: collapse;
  padding: 0px;
}

/* End of new stuff for donations and friendraiser */
/*
  -- Vertical Scroller --
*/
.controlArea {
  background-color: #ccc;
  margin-top: 0px;
  padding: 3px 2px 4px 3px;
  text-align: center;
}

.addBorder {
  background-color: #ccc;
  border: 2px outset;
}

.scrollingBack {
  background-color: #fff;
  margin: 0px;
  text-align: left;
  overflow: hidden;
  width: 146px;
}

table.NSscrollArea {
  background-color: #ccc;
}

td.NSscrollingBack {
  background-color: #fff;
}

.scrollingAreaBox {
  width: 146px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  overflow: hidden;
  visibility: visible;
}

.scrollingArea {
  background-color: #fff;
  margin: 0px;
  padding: 0px;
  position: absolute;
  left: 0px;
  height: 60px;
  width: 140px;
  visibility: hidden;
}

/*
 For customized pages
*/
p.cstmText {
  font-size: small;
}

p.cstmTitle {
  color: #000;
  font-size: large;
  font-weight: bold;
}

p.cstmHeading, span.cstmHeading {
  color: #000;
  font-size: medium;
  font-weight: bold;
}

.cstmBack {
  background-color: #ccf;
}

.cstmFrame {
  background-color: #ccc;
  color: #000;
  text-align: center;
  font-style: italic;
  margin: 2px;
}

.cstmImgFrame {
  /* bug 43942 -- Constrain the width of the continer that holds images and captions.  */
  width: 310px;
}

td.cstmBtnBack {
  padding-right: 2px;
  padding-left: 2px;
  background-color: #ccc;
  border: 2px outset;
}

p.cstmBtnText {
  font-family: Arial, sans-serif;
  font-size: small;
  font-weight: bold;
  text-decoration: none;
}

a.cstmBtnText:link {
  font-family: Arial, sans-serif;
  font-size: small;
  font-weight: bold;
  color: #000;
  text-decoration: none;
}

a.cstmBtnText:visited {
  font-family: Arial, sans-serif;
  font-size: small;
  font-weight: bold;
  color: #000;
  text-decoration: none;
}

a.cstmBtnText:hover {
  font-family: Arial, sans-serif;
  font-size: small;
  font-weight: bold;
  color: #f90;
  text-decoration: none;
}

div.cstmStatusRight {
  float: right;
  margin-left: 3em;
}

div.cstmPageListLink {
  margin-bottom: 1ex;
}

div.cstmPageListLinkSmall {
  font-size: 80%;
  margin-bottom: 1ex;
}

/*
  -- Slide Show --
*/
.slideShow {
  height: 200px;
  overflow: hidden;
  padding: 0px;
  text-align: center;
  width: 250px;
}

.slideControl {
  margin-bottom: 4px;
  margin-top: 4px;
  text-align: center;
}

.slideBack {
  background-color: #ccc;
  border: 2px outset #ccc;
}

.surveyInstruction {
  font-weight: normal;
}

legend.surveyLegend {
  margin: 0;
  padding: 0;
  color: black;
  /* Positioning lines that follow handle IE 6 quirk of moving legend text to the right. */
  *position: relative;
  *left: -7px;
}

.ProgressBarOther,
.ProgressBarCurrent {
  font-size: 75%;
}

.ProgressBarCurrent,
TD.TestCurrentStepColor {
  font-weight: bold;
  color: #000;
}

.ProgressBarCurrentBack {
  background-color: #000;
}

.ProgressBarCurrentLeader {
  border-top: 1px solid #000;
  height: 17px;
  overflow: hidden;
}

.ProgressBarOther,
TD.TestOtherStepColor {
  font-weight: normal;
  color: #bbb;
}

.ProgressBarOtherBack {
  background-color: #bbb;
}

.ProgressBarOtherLeader {
  border-top: 1px solid #bbb;
  height: 17px;
  overflow: hidden;
}

TD.TestHighlightColor {
  background-color: #999;
}

a.textNav:link {
  font-size: 10pt;
  color: blue;
  text-decoration: none;
}

a.textNav:visited {
  font-size: 10pt;
  color: red;
  text-decoration: none;
}

a.textNav:hover {
  font-size: 10pt;
  color: #f90;
  text-decoration: none;
}

/*
  The background-image entry forces NS4
  to render the background color when
  it doesn't want to.
*/
.WhatNext {
  font-size: 8pt;
  background-color: #ff9;
}

div.WhatNext {
  border: #333 1px solid;
  background-color: #ff9;
  padding: 0px 4px;
}

table.WhatNext {
  border: #333 1px solid;
}

a.NewsHeadlineList {
  font-weight: bold;
}

.AnchorBar {
  background-color: #eef;
  border: solid 1px #669;
  vertical-align: bottom;
  text-align: left;
}

.FormBox .AnchorBar {
  border-width: 0px 0px 1px 0px;
}

/* For making anchor links look like tabs.
  The colors are coordinated with FormBox. */
.AnchorTab {
  text-align: left;
  margin: 2px 2px 0px 2px;
}

td.AnchorTab {
  border: solid 1px #ddf;
}

a.AnchorTab:link {
  font-weight: bold;
  color: #33f;
}

a.AnchorTab:visited {
  font-weight: bold;
  color: #33f;
}

a.AnchorTab:hover {
  color: #f90;
}

.FormInsetBox {
  background-color: #eef;
  border: 1px solid #ccf;
  padding: 0px 5px 0px 10px;
  margin-top: 10px;
}

div.FormInsetBox p {
  margin: 2px 3px;
  padding: 2px 0px;
}

/* Gift Aid */
p.GiftAidBox {
  background-color: white;
  border: solid thin black;
  padding: 10px 20px;
}

table.GiftAidBox td {
  padding-bottom: 10px;
}

p.giftAidMatchAmount {
  color: #555555;
  font-family: Arial;
}

table.GiftAidBox p {
  font-family: Arial;
}

/* Styles for alert lists */
LI.AlertList, DIV.AlertList {
  margin-bottom: 1em;
}

TD.AlertListName, SPAN.AlertListName {
  font-weight: bold;
}

TD.AlertListDescription, DIV.AlertListDescription {
  color: black;
  font-size: 8pt;
}

TD.AlertListActionDate, DIV.AlertListActionDate {
  font-size: smaller;
}

TD.AlertListResponseCount, DIV.AlertListResponseCount {
  font-size: smaller;
}

/* stretchable table used to wrap divs, can then set static or % div width as needed */
#stretch_container_tbl {
  width: 180px;
  border-width: 0;
  padding: 0;
  margin: 0;
}

/* Logout_Component_Login.tpt and Logout_Component.tpt */
#lo_component_div {
  border: 2px solid #000000;
  background-color: #666699;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}

#lo_component_div input {
  margin: 15px 0;
  font-weight: normal;
}

/* Logout_Component_User.tpt */
#lo_comp_usr_div {
  width: 100%;
  text-align: center;
  padding: 0;
}

#lo_comp_usr_div input {
  margin: 15px 0;
}

#lo_comp_usr_div p {
  margin: 0;
}

/* Login_LoginForm.tpt */
/*
.loginform {
  width: 100%;
}
.loginform_c1 {
  width: 1%;
}
.loginform_c2 {
  width: 70%;
}
.loginform_c3 {
  width: 29%;
}
form#lmainLogonForm table.FormBox {
  width: 100%;
}
td.FormBox_c1 {
  width: 3%;
}
td.FormBox_c2 {
  width: 20%;
}
td.FormBox_c3 {
  width: 73%;
}
*/
/* login_interaction_details.tpt */
/*
td.login_int {
  padding-left: 15px;
}
td.login_det {
  padding-left: 15px;
}
*/
/* Login_ConvioLoginForm.tpt */
/*
table#login_ConvioLoginForm_tbl {
  padding-right: 10px;
}
table#login_ConvioLoginForm_tbl td {
  padding: 3px;
}
table#login_ConvioLoginForm_tbl input {
  margin-right: 10px;
}
*/
/* Login_Component_User.tpt and Login_Component.tpt */
#li_comp_usr {
  border: 2px solid #000000;
  width: 175px;
}

#li_comp_usr td {
  padding: 2px;
}

td#li_comp_usr_ttlTd {
  padding-bottom: 10px;
}

/* Login Component */
div.loginComponent {
  background-color: #DEF;
  border: solid 1px #39F;
  padding: 0px;
  margin: 10px;
  width: 170px;
  height: 250px;
  position: relative;
}

.loginComponent .title {
  margin: 10px 15px 0px 15px;
  font-weight: bold;
  text-align: left;
}

#userNameLabel {
  margin-top: 10px;
  margin-left: 10px;
  text-align: left;
}

#userPasswordLabel {
  margin-top: 10px;
  margin-left: 10px;
  text-align: left;
}

#submit {
  margin-top: 10px;
  margin-left: 10px;
  text-align: left;
  float: left;
}

#troubleSigningInLink {
  margin-top: 10px;
  vertical-align: middle;
  font-size: 80%;
}

#rememberMe {
  margin-left: 10px;
  text-align: left;
  font-size: 80%;
}

#newUserLink {
  margin-left: 10px;
  text-align: left;
  font-size: 80%;
}

#OAuthLink {
  margin-bottom: 5px;
  text-align: left;
  font-size: 80%;
}

/* Keep me logged in. What's this? */
#whats_this_tooltip_text {
  font-size: 1rem;
  line-height: 1.1rem;
}

#whats_this_tooltip_link {
  font-size: 1rem;
  line-height: 1.1rem;
}

#whats_this_tooltip p {
  margin-bottom: 0;
}

/* Login_AdminLoginForm.tpt */
/*
table.li_adminLogFrm td {
  padding: 3px;
}
*/
/*
 These styles are in here rather than PremiumStyle.css
 because they are used when the cart is rendered in Donations.
*/
.CartItemName {
  font-weight: bold;
}

.CartItemConfig {
  width: 100%;
}

.ShoppingStandardPrice {
  text-decoration: line-through;
  color: #999999;
}

.ShoppingDiscountedPrice {
  font-weight: bold;
}

.ShoppingCartContents {
  clear: left;
}

.DonLevelDeleteThisRow {
  display: none;
}

.FulfillmentEditCard {
  padding-left: 10px;
}

.FulfillmentExistingCard {
  padding-left: 10px;
  padding-bottom: 10px;
}

.FulfillmentECardChoice {
  text-align: center;
  padding-top: 4px;
}

TABLE.FulfillmentECardTable TD {
  padding: 10px 10px 10px 10px;
}

TABLE.FulfillmentPrintableCardTable TD {
  padding: 10px 10px 10px 10px;
}

/*
  These are styles copied from FormComponentsBehavior.css so that the
  Transaction Summary renders correctly in autoresponders.
 */
.FormSectionHeader {
  font-weight: bold;
  background-color: #ccc;
  color: #333;
}

TD.FormSectionHeader {
  width: 100%;
  border-bottom: 1px solid #ccc;
}

/*
 Progress Bar styles
*/
.progressBorder {
  background: #fff;
  border: 1px solid silver;
  height: 15px;
  margin: 0;
  padding: 0;
  width: 205px;
}

.progressBar {
  height: 11px;
  margin: 2px;
  padding: 0;
}

/* *********************************************** */
/* ********* REPLACED FONT TAGS 11/28/06 ********* */
/* ************ 80% REPLACES -1, 1 *************** */
/* *************** 60% REPLACES -2 *************** */
/* *********************************************** */
.greenBold {
  font-weight: bold;
  color: #00FF00;
}

.paraBlueSansSmall {
  color: #0000FF;
  font-size: 80%;
}

.paraRed {
  color: #FF0000;
}

.paraBigRed {
  color: #FF0000;
  font-size: 110%;
}

.smallBlack {
  font-size: 80%;
  color: #000000;
}

.smallBold {
  font-weight: bold;
  font-size: 80%;
}

.smallItalic {
  font-style: italic;
  font-size: 80%;
}

.smallSans {
  font-size: 80%;
}

.smallSansBold {
  font-size: 80%;
}

.smallestSans {
  font-size: 60%;
}

.smallestBlackSans {
  font-size: 60%;
  color: #000000;
}

.smallWhiteSans {
  font-size: 80%;
  color: #FFFFFF;
}

.smallWhiteBoldSans {
  font-size: 80%;
  color: #FFFFFF;
  font-weight: bold;
}

.hiddenObj {
  display: none;
}

div.PaddedBottom {
  padding-bottom: 10px;
}

div.ManageBox {
  border-style: dashed;
  border-width: 1px;
  border-color: #B0B0B0;
}

div.ManageBox:Hover {
  background-color: #f3f8fc;
}

div.EMgmtBox {
  border-style: solid;
  border-width: 1px;
  width: 250px;
}

div.EmgmtTitle {
  background-color: #eef;
  padding: 4px;
  font-weight: bold;
}

div.EmgmtMain {
  padding: 4px;
}

div.EmgmtLink {
  float: right;
  padding-top: 4px;
  padding-right: 4px;
}

div.ManageTitle {
  color: #ffffff;
  background-color: #B0B0B0;
}

div.ManageLink {
  float: right;
  padding-left: 4px;
}

div.ShadeBackground {
  background-color: #e0e0e0;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 1;
  -moz-opacity: 0.8;
  filter: alpha(opacity=80);
}

div.EditForeground {
  background-color: white;
  padding: 10px;
  position: absolute;
  top: 100px;
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  z-index: 3;
}

div.EditContainer2 {
  position: absolute;
  top: 0px;
  left: 0px;
  padding-left: 5px;
  height: 100%;
  width: 100%;
  width: 100%;
}

a.btn,
a.editBtn,
input.btn,
input.btnMini,
input.btnSm,
input.btnMed,
input.btnLg {
  background-color: #008cba;
  border: 1px solid #008cba;
  color: #fff;
  display: inline-block;
  padding: 10px 15px;
  text-decoration: none;
}

a.btn:hover,
a.editBtn:hover,
input.btn:hover,
input.secbtn:hover,
input.btnMini:hover,
input.btnSm:hover,
input.btnMed:hover,
input.btnLg:hover {
  background-color: #007095;
  color: #fff;
  cursor: pointer;
}

/* TeamRaiser navbar */
div.FrNavbar {
  color: #666666;
  width: 100%;
  line-height: 1.5em;
}

div.FrNavbarSection {
  color: #FFFFFF;
  background-color: #000000;
  text-align: center;
  font-size: larger;
  font-weight: bold;
  width: 100%;
}

div.FrNavbarLinks ul {
  list-style-type: none;
  list-style-position: outside;
  margin: 0;
  padding-top: 0;
  padding-right: 5px;
  padding-bottom: 10px;
  padding-left: 5px;
}

div.FrNavbarLinks ul li a {
  color: #000000;
}

div.DynamicDollar {
  font-size: 1.2em;
  font-weight: bold;
}

th.paddedLeft, td.paddedLeft {
  text-align: left;
  padding: 5px 5px;
}

/* Personal Event Styles */
/* These styles are needed for the search component */
#GTLocSearchLabel {
  vertical-align: bottom;
  padding-bottom: 0.5em;
}

#GTLocSearch td {
  padding-top: 3px;
  padding-right: 5px;
}

#GTDateSearch td {
  padding-top: 3px;
  padding-right: 5px;
}

#GTDateSearch img {
  margin-left: 3px;
  vertical-align: middle;
}

/* Personal Fundraising default styles */
.pf_champ_center_dashboard_link {
  float: right;
  padding: 5px 10px 5px 10px;
}

.pf_champ_center_title {
  padding: 5px 10px 5px 10px;
}

.pf_title_clear_fix {
  clear: both;
}

.champion_dashboard_body {
  padding: 5px 10px 5px 10px;
}

.ExplicitContact {
  position: relative;
  padding: 0.2em;
  font-weight: bold;
}

.ExplicitContact .taf-delete {
  position: absolute;
  top: 0;
  border: 0px;
  background-color: transparent;
}

/* Volunteer Profile */
.volProfInputs {
  margin-top: 10px;
}

.volProfInputs td {
  padding: 3px 3px 3px 0px;
}

.volProfInputs .submit-button {
  margin-top: 10px;
}

.volProfInputs span.sectionHeader {
  font-weight: bold;
  padding: 10px 3px 3px 0px;
}

.aural-only {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

/* Powered by Convio logo */
#cv-poweredBy {
  text-align: center;
}

#cv-poweredBy a {
  color: #ccc;
  font-family: arial, sans-serif;
  font-size: 9px;
  text-decoration: none;
}

#cv-poweredBy img {
  border: none;
}

/* Vertical Scrolling Component */
.vScroll {
  border: solid 1px #ccc;
  padding: 0px;
  margin-bottom: 10px;
  width: 100%;
}

.vScroll .title {
  margin: 10px 15px 0px 15px;
  font-weight: bold;
  text-align: center;
}

.vScroll .scrollContent {
  margin: 10px 15px 15px 15px;
  padding: 10px;
  height: 180px;
}

/* Donor Wall */
.donorWall {
  border: solid 1px #ccc;
  padding: 0px;
  margin: 10px;
  width: 100%;
  overflow: hidden;
}

.donorWall .title {
  margin: 10px 15px 0px 15px;
  font-weight: bold;
  text-align: center;
}

.donorWall .list {
  padding: 0px;
  margin: 5px 15px;
  width: 140px; /*ie problem*/
  overflow: hidden;
}

.donorWall .list p {
  margin: 5px 15px;
}

.donorWall .link {
  margin: 0px 15px 10px 15px;
  padding: 0px 10px;
}

/* Thermometer */
.thermometer {
  margin-bottom: 10px;
  border: 1px solid #ccc;
}

.thermometer .title {
  font-weight: bold;
  text-align: center;
}

.thermometer .goal {
  text-align: left;
}

.thermometer dl dt {
  margin-left: 10px;
}

.thermometer dd {
  margin-left: 30px;
}

.thermometerTall {
  width: 170px;
  text-align: center;
}

.thermometerTall .title {
  margin: 10px 15px;
}

.thermometerTall .goal {
  margin: 10px 15px 15px 15px;
}

.thermometerWide {
  width: 100%;
}

.thermometerWide .title {
  margin: 0px 0px 10px 0px;
}

.thermometerWide .text {
  float: left;
  width: 150px;
  margin: 10px 0px 15px 15px;
}

.thermometerWide .image {
  margin: 10px 15px 10px 175px;
}

/*---- CLEARFIX ----*/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* For IE7 */
.clearfix {
  display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/* End hide from IE-mac */
/* New TR Pages */
.trPage {
  width: 100%;
}

.trPage a img {
  border: 0px;
}

.trPage .header {
  margin-bottom: 10px;
}

.trPage .sideBar {
  float: right;
  width: 40%;
}

.trPage .main {
  float: right;
  width: 60%;
}

.trPage .footer {
  clear: both;
  width: 100%;
  margin-top: 10px;
}

.trPage .imageFrame {
  width: 300px;
}

.trPage .imageFrame .caption {
  margin: 0px 10px;
}

.trPage .blog {
  clear: both;
}

/*
 * Temporarily hide nodes pending progressive enhancement.
 * Because this class can only be removed by Javascript,
 * it must also only be added by Javascript (otherwise
 * we're not really doing progressive enhancement).
 * See preEnhance and postEnhance in utils.js
 */
.pending-progressive-enhancement {
  display: none;
}

a img {
  border: 0px none;
}

iframe.seamless {
  border: none;
  overflow: hidden;
}

/*
  Top Affiliated Teams STag
*/
table.top_affiliated_teams_table {
  width: 100%;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #999;
  border-top: 1px solid #999;
}

/* column headers */
th.top_affiliated_teams_hdr {
  background-color: #666;
  color: #fff;
  border-bottom: 1px solid #ccc;
  text-align: left;
  padding: 2px 3px;
  border-left: 1px solid #ccc;
}

a.top_affiliated_teams_lighterLink:link {
  color: #e4f0fa;
}

a.top_affiliated_teams_lighterLink:hover {
  color: #b1d6f8;
}

/* line items */
tr.top_affiliated_teams_row0 {
  background-color: #eee;
}

tr.top_affiliated_teams_row1 {
  background-color: #f6f6f6;
}

/* each cell */
td.top_affiliated_teams_cell {
  border-left: 1px solid #ccc;
  padding: 2px;
}

/* Events Ticket/RSVP Cons Reg Info Fields */
.consRegFieldContainer .fieldContainer {
  min-width: 65%;
}

.consRegFieldContainer span.starColumn {
  width: 0.63rem;
}

.consRegFieldContainer .fieldErrors {
  color: #98002e;
  margin: -10px 0 10px 0;
}

.consRegFieldContainer .heading-row {
  clear: both;
  margin-bottom: 1.19rem;
}

.field-row {
  clear: both;
  margin-bottom: 1.19rem;
}

.field-row .error {
  clear: both;
  margin-bottom: 0.3rem;
}

.field-row .label {
  padding-right: 0.59rem;
}

.field-row.required label {
  margin-left: 0.59rem;
}

.field-row.heading {
  margin-top: 1.19rem;
}

.field-row.error {
  border: 1px solid;
  padding: 0.59rem;
}

.consRegFieldContainer .heading {
  font-weight: bold;
}

.consRegFieldContainer .fieldContainer.values span {
  margin-left: 0.19rem;
}

div.hidden-field-label {
  margin-bottom: 1.19rem;
}

label#cons-reg-accepts_email-hidden {
  margin-left: 0px;
}

.field-row-accepts_email-default_checked,
.clearfix.field-row-accepts_email-default_checked {
  align-items: center;
  display: flex;
}

.cons-reg-value-checkbox {
  display: inline;
  padding-right: 0.3rem;
}

.cons-reg-label-checkbox {
  display: inline;
}

/* Init Data Page */
#user_home_wrapper_top,
#user_home_wrapper_top input {
  font-size: 11px;
  color: #b3b3b3;
  -webkit-appearance: none;
}

#user_home_wrapper_top select,
#user_home_wrapper_top option {
  text-decoration: underline;
}

#user_home_wrapper_top div.jumpBar {
  background: #eee;
  border-top: 3px solid #ccc;
  border-bottom: 3px solid #ccc;
  width: 100%;
  position: absolute;
  height: 15px;
  z-index: -1;
}

#user_home_wrapper_top div.jumpBar.left {
  left: 0;
}

#user_home_wrapper_top div.jumpBar.right {
  right: 0;
}

#user_home_wrapper_top div.jumpLink {
  width: 100%;
  padding: 2px 0;
}

#user_home_wrapper_top div.jumpLink a {
  float: right;
  text-decoration: none;
  margin-top: 1px;
}

#user_home_wrapper_top div.jumpLink span.linkDivider {
  color: #888888;
  float: right;
  padding: 0 10px;
  margin-top: 1px;
}

#user_home_wrapper_top div.jumpLink a.helpIcon {
  margin-right: 5px;
}

#user_home_wrapper_top div.jumpLink a.adminLink:after {
  margin: 3px;
  content: url("../images/small_arrow_blue.png");
}

#user_home_wrapper_top a.textNav {
  color: #0079cc;
}

#user_home_wrapper_top .userHeader {
  width: 100%;
}

#user_home_wrapper_top .userHeader .logo {
  float: left;
  margin: 5px 25px 0 0;
}

#user_home_wrapper_top .userHeader .siteInfo {
  float: left;
  font-size: 10px;
  margin-top: 35px;
}

#user_home_wrapper_top .userHeader .title {
  font-weight: bold;
  font-size: 12px;
}

#user_home_wrapper_top .userHeader .userLogin {
  float: right;
  margin: 32px 40px 0 0;
  *margin-left: 140px;
}

#user_home_wrapper_top div#li_user_header span {
  font-size: 12px;
  margin-right: 10px;
}

#user_home_wrapper_top div#li_user_userpass {
  background: #e1e1e2;
  padding: 3px;
  margin-top: 2px;
}

#user_home_wrapper_top div.userLogin input[type=submit] {
  background: #fdfeff; /* Old browsers */
  border: 1px solid #b5cbd9;
  border-radius: 5px 5px 5px 5px;
  color: #0079cc;
  padding: 3px;
}

#user_home_wrapper_top div.userLogin input[type=checkbox] {
  margin-left: 0;
}

#user_home_wrapper_top div.userLogin div#li_user_footer {
  margin-top: 5px;
}

#user_home_wrapper_top .userNavBar {
  width: 100%;
  background-color: #d1d1d1; /* default */
  background: linear-gradient(to bottom, #d1d1d1 0%, #d1d1d1 50%, #cccccc 51%, #cccccc 100%); /* W3C */
}

#user_home_wrapper_top .navLinks {
  float: left;
}

#user_home_wrapper_top .navLinks td:hover {
  background-color: #e0ebf4; /* default */
  background: linear-gradient(to bottom, #e0ebf4 0%, #e0ebf4 50%, #c0dcf1 51%, #c0dcf1 100%); /* W3C */
}

#user_home_wrapper_top .navLinks td.selected {
  background-color: #fff7cb; /* default */
  background: linear-gradient(to bottom, #fff7cb 0%, #fff7cb 50%, #ffee99 51%, #ffee99 100%); /* W3C */
}

#user_home_wrapper_top .navLinks td {
  border-left: 1px solid #CCCCCC;
  border-right: 1px solid #BBBBBB;
  padding: 0px 10px;
  color: #0079cc;
  height: 35px;
}

#user_home_wrapper_top .localeChooser {
  float: right;
  line-height: 35px;
  margin-right: 20px;
}

#user_home_locale_form {
  margin-bottom: 0;
}

.userHomeBackground {
  padding: 10px;
  background: #eeeeee;
  border: 2px solid #d9d9d9;
}

#user_home_wrapper_left span.hidden,
#user_home_wrapper_right span.hidden {
  display: none;
}

div.userHomeForeground {
  background: #fff;
  border: 2px solid #d9d9d9;
}

#user_home_wrapper_top .userHomeBackground {
  padding-bottom: 0;
  border-bottom: none;
}

#user_home_wrapper_top .userHomeForeground {
  height: 20px;
  border-bottom: none;
}

td.userHomeBackground {
  border-top: none;
  border-bottom: none;
  height: 100%;
  min-height: 100%;
  width: 0;
  padding-left: 0;
}

#user_home_wrapper_bottom .userHomeBackground {
  padding-top: 0;
  border-top: none;
}

#user_home_wrapper_bottom .userHomeForeground {
  height: 20px;
  border-top: none;
}

#user_home_wrapper_bottom {
  background: #eee;
  color: #b3b3b3;
}

#user_home_wrapper_bottom div.techInfo {
  text-align: center;
  padding: 20px;
}

#user_home_wrapper_bottom div.techInfo .title {
  font-weight: bold;
}

/* donation thank you page transaction summary container */
div.transaction-summary-info {
  width: 90%;
}

/* Required field */
span.field-required {
  display: inline-block;
  vertical-align: top;
}
span.field-required::after {
  content: "*";
}

div.requiredLegend {
  float: right;
  margin-bottom: 0.59rem;
}

div.BorderContainer {
  padding: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #eaeaea;
  margin-bottom: 15px;
}

div.appArea div.clear-all {
  clear: both;
}

/*************************/
/* Sponsorship Logo STag */
/*************************/
.tr_sponsorship_logo {
  margin: 10px;
  position: relative;
}

.tr_sponsorship_logo_horizontal {
  float: left;
}

img.tr_sponsorship_logo_image {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
}

div.returning-users-login-box a#lightbox-login-show {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}