/* ********************************************************************** */
/* CSS classes rules for Panels
/*
/* NOTE: prefix for all class names must match panel.hhl_panels.py setting
/* ********************************************************************** */


.panel-form input[type='text'],
.panel-form input[type='password'],
.panel-form select,
.panel-form p
{
    width: 98%;
    max-width: 320px;
    margin-top: 3px;
    margin-bottom: 3px;
    font-size: 14px;
}


.panel-form input[type="checkbox"]
{

}

/* .hertado-panel form textarea /* alternative to setting class panel-form */
.panel-form textarea
{
    height: 4em;
    width: 98%;
    margin-top: 3px;
    margin-bottom: 3px;
    font-size: 14px;
}

/* this one is for dataconversion...see note in hhl/static/css */

th {
    font-weight: bold;
}

td.cf_record_field {
    width: 500px;
}

button {
    font-size: 16px;
}
.hertado-hidden {
    display: none;
}

/* Disabling of html elements that cause problems when user clicks twice */
a[disabled], button[disabled], img[disabled], input[disabled] {
    pointer-events: none;
}

/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
.centered-anchor-button .hp-anchor-button,
.centered-anchor-button .anchor-button {
    display: block;
    margin-right: auto;
    margin-left: auto;
    max-width: 100px;
}

/* Common features of many different buttons */
/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
/*?? hans:todo: Hans, I think you probably intended to delete the
  ?? buy-event-tickets line below like you deleted it everywhere else.
  ?? If so, be sure to delete the trailing comma on the previous line
  ?? also, or we have a CSS syntax error and the entire rule gets ignored.
*/
.hp-anchor-button,
.anchor-button,
.save_confirmation,
.hp-homepage-donate-button,
.homepage-donate-button,
.hp-simple-donate-button,
.simple-donate-button,
.buy-event-tickets div
{
    border:0px;   /* removes default bevel edge for buttons */
    /* from Shawn */
    /*font-family:Arial;*/
    /*font-size:13px;*/
    /*font-weight:900;*/
    /*padding:6px 14px 6px 14px;*/
    /*text-transform:uppercase;*/
    text-align:center;
    -webkit-box-shadow:  3px 3px 6px 2px rgba(142, 143, 21, .3), inset  -3px 3px 14px 4px rgba(142, 143, 21, .3);
     box-shadow:         3px 3px 6px 2px rgba(142, 143, 21, .3), inset  -3px 3px 14px 4px rgba(142, 143, 21, .3);
    -webkit-border-radius: 10px;
    border-radius: 10px;

    /* final tweak by Kim */
    font-family:"Arial Black", Arial, sans-serif;
    cursor: pointer;
}

/* Common features of anchor-buttons and donate buttons, but not
   simple-donate-buttons
*/
/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
.hp-anchor-button,
.anchor-button,
.save_confirmation,
.hp-homepage-donate-button,
.homepage-donate-button
{
    font-size:12px;

    margin-top:3px;
    margin-bottom:10px;

    padding-top:3px;
    padding-bottom:3px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Differences from donate buttons */
/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
.hp-anchor-button,
.anchor-button,
.save_confirmation
{
    background:#d9e399;
    color:#8e8f15;
    min-width: 50px;
    display: inline-block;
    margin-right:10px;
}

/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
a.hp-anchor-button:link,
a.hp-anchor-button:visited,
a.anchor-button:link,
a.anchor-button:visited,
.bread-crumb{
    text-decoration: none;
    /*color: #006600; 8/19/13: HH change to 838f15 */
    color: #8e8f15; /* this one matches anchor-button color */
}

.save_confirmation  {
    display:none;
    background-color: mediumaquamarine;  /* overrides anchor-button common def */
}

/* .hyperlink-header-text is based on "Hyperlink/Header Text" in
   Kim's "Global Elements UI Spec 2.0"
   Also cut/pasted directly from Kim's Axure mockup HRBPRT.
   Added fallback font family.
   Added cursor:pointer to see finger

   .hyperlink-text is similar, except for login panel font was too big
*/
/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
.hyperlink-header-text,
.hp-pseudo-link,
.pseudo-link,
.hyperlink-text,
.dbrd-item-list-text a,
.dbrd-campaign-registration-panel a
{
    font-family:Arial, sans-serif;
    font-style:normal;
    text-decoration:none;
    color:#8E8E24;
    cursor: pointer;
}

/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
.hyperlink-header-text,
.hp-pseudo-link,
.pseudo-link,
.dbrd-item-list-text a,
.dbrd-campaign-registration-panel a
{
    font-size:13px;
    font-weight:bold;
}

a.hyperlink-text
{
    font-size:12px;
    font-weight:normal;
}

/* Temporary */
a.fake_link:hover
{
    cursor: default;
}

/* Based on "Pop Up Header Text" and "Pop Up Description Text" in Kim's
   "Global Elements UI Spec 2.0"
*/
.pop-up-header-text,
.pop-up-description-text
{
    font-family:Arial, sans-serif;
    color:#666666;
}
.pop-up-header-text
{
    font-size:14px;
    font-weight:bold;
}
.pop-up-description-text
{
    font-size:13px;
}

.content-panel-image-top-right, .content-panel-image-top-left {
    border: none;
}
/* ********************************************************************** */
/* Dashboard
/* ********************************************************************** */

.panel-dashboard {
    background-color: black;
    width: 100%;
    margin-right: auto;
    margin-left: auto;  /* dashboard is centered */
    /* other style settings set in template: width */
}

/* Campaign toggle */
.header-campaign-toggle {
    /* Based on "Section Header Text" in Kim's "Global Elements UI Spec 2.0"
       Also cut/pasted directly from Kim's Axure mockup HRBPRT.
       Added fallback font families as in hertado-panel-titlebar below.
    */
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    float: right;
    padding-bottom:5px;
}

.header-campaign-toggle-current {
    /* Cut/pasted directly from Kim's Axure mockup HRBPRT. */
    color:#8E8E24;
}

.header-campaign-toggle-change {
    /* Cut/pasted directly from Kim's Axure mockup HRBPRT. */
    color:#AEC12D;
}

.dashboard_menu_option {
    padding-bottom: 5px;
}

/* Menu (homepage) */

/* Terminology:
  - menu            = Top level menu
  - menuitem        = Item in a top level menu or a submenu
  - submenu         = Submenu that cascades from a menuitem
  - menuitem anchor = Clickable HTML "anchor" in a menuitem
*/

/* hertado-panels that contain menus need to allow overflow (hertado-panels
   by default do not)
   Note: Do not remove the .hertado-panel prefix on any of these.  Otherwise,
   they do not override the main .hertado-panel rule below.

*/
.hertado-panel.allow-overflow-from-hertado-panel,
.hertado-panel.inline-header-menu-panel,
.hertado-panel.menu_panel {
    /* Show dropdown submenus.  Do not clip them at the edge of any of these
       nested panels, and do not cause a scrollbar to appear.
    */
    overflow:visible;
}

/*?? todo: Delete this if not needed.  Alternative way to fix HHL-920, but
           we added code to JS growMenu() instead because that approach
           doesn't require us to keep height here the same as line-height
           of the menu class.
*/
/*.menu_panel {*/
    /* Set height so its background color shows.  See HHL-920.
       Notes:
       - Only really needed when the menu_panel is in its own row and can
         have the wrong color showing to its left.
       - If zero height, would see the wrong color to the left for the full
         height of the nested menu_div.
       - If too short, would see the wrong color for part of the height of
         the nested menu_div.
       - If too tall, would cause the menu_panel to be taller than necessary,
         showing extra colored space below the menu.
       - It's OK to set it to the line-height of the menu because the only
         time the menu_div gets taller is when the menu wraps to multiple
         lines, in which case, there is no space to the left of the menu, so
         the color to the left is not wrong.
    */
    /*height:1.5em;  *//* Must be the same as .menu's line-height below.  */
/*}*/

/* Div that holds the entire home menu */
.menu_div {
    float:right;
    background-color: #F3FAF8;

    /* Allow the submenu to drop down over top of other content, rather than
       pushing the other content further down the page.
    */
    min-height: 1.5em;     /* Do get as tall as the menu */
    /*max-height:1.5em;*/
                        /* Don't get taller and push other stuff down.
                           Note: Never needs to be more than 1 char (1 pixel
                                 really) tall, because of overflow:visible.
                           HH: 1em is less than 1 character high and chops off
                               the text when menu is in header2 panel of the
                               new header --> 1.8 works
                           Note: max-height is dynamically overridden by the
                                 growMenu() JS function, to fix HHL-805.
                                 No need to specify it here anymore.
                        */
    overflow:visible;   /* Show stuff that overflows the max-height */
    z-index:1000;       /* Overlay, not underlay, when overlapped */
    position:relative;  /* Otherwise, z-index is ignored */
}

/* Menu or submenu */
.menu,
.submenu {
    line-height: 1.5em;

    /* Normalize the display from indented tree to flat */
    margin:0;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
}

/* Menuitem (in a menu or submenu, overridden below for submenus) */
.menu .menuitem {
    /* Stack the menuitems in a single row, pushed to the left in the
       available space */
    float:left;
}

/* Menuitem (in a submenu) */
.menu .submenu .menuitem {
    /* Put each submenu item on its own line */
    float:none;
}

/* Submenu, displayed or not */
.submenu {
    /* Left-align submenu w/menuitem */
    float:left;

    /* Start hidden */
    display:none;

    /* Allow the submenu to visibly overflow its parent menuitem.  Otherwise,
       when the submenu is dropped down (visible), it makes the parent
       menuitem wider to contain it or gets clipped against that parent.
       There is JS code elsewhere to enforce a max-width for each menuitem
       so they don't grow wider, and this line prevents the clipping.
       Note: This is the default anyhow, but insist on it here.
     */
    overflow:visible;

    /* Let the content that the submenu overflows onto show through a little */
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */
}

/* Submenu for rightmost menuitems of main menu (those with 2 siblings
   to the left)
   Note: Really long menu items in the submenus of the 3 rightmost menu items
         can be clipped by the left edge of the window, and really long menu
         items in the other submenus can be clipped by the right edge.  To
         avoid this, we'd probably have to position them via JS, not CSS.
*/
.menuitem~.menuitem~.menuitem .submenu {
    /* Right-align submenu w/menuitem */
    float:right;
}

/* Submenu when hovering over menuitem to display it, except when a submenu
   is already shown for the same menu
   ?? May be able to replace this with simply:  .non-forced-shown-submenu
   ?? Now that we're using JS instead of CSS for so much menu functionality,
   ?? this would be one step closer to all JS, no CSS for hiding/showing menus.
*/
/* Comment out this line and others flagged NOHOVER to simulate a device
   w/no hover events.
*/
.menu:not(.a-submenu-is-shown) .menuitem:hover .submenu,
/* Submenu when menuitem clicked on to display it */
.forced-shown-submenu
{
    /* Display sub-menus vertically, overriding display:none above */
    display:block;
}

/* Anchor in a menuitem (in a menu or submenu, overridden below for submenus) */
.menu a:link,
.menu a:active,
.menu a:visited {
    font-family: Arial, sans-serif;  /* Per Kim */
    font-size: 14px;        /* Per Kim */
    font-weight:bold;       /* Per Kim */
    font-style: normal;
    text-decoration: none;
    border: 0px;            /* Per Kim */
    display: block;
    padding: 0 5px;
    color: #00AEB3;          /* Normal menubar display color, per Kim spec 1-2-2 */
    background-color: transparent; /* Normal menubar display color, per Kim spec 1-2-2 */
}

/* Anchor in a menuitem (in a submenu) */
.menu .submenu .menuitem a:link,
.menu .submenu .menuitem a:active,
.menu .submenu .menuitem a:visited,
/* Also, anchor in a menuitem that is showing its submenu due to a click */
.menu .menuitem.my-submenu-is-shown a:link,
.menu .menuitem.my-submenu-is-shown a:active,
.menu .menuitem.my-submenu-is-shown a:visited
{
    color:            #FFFFFF; /* Normal submenu display color, per Kim */
    background-color: #ABABAB; /* Normal submenu display color, per Kim */
}

/* Anchor in a menuitem (in a menu or submenu) that is currently selected
   (hovered over)
*/
.menu a:hover,
/* Note: Necessary, to override the similarly specific rules above for
         a:link.
*/
.menu .submenu .menuitem a:hover,
.menu .menuitem.my-submenu-is-shown a:hover
{
    color:            #ABABAB;  /* Per Kim spec */
    background-color: #E4E4E4;  /* Per Kim spec 1-2-2 */
}

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

.homepage-menu {
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color:#8E8E24;
    float:right;
}

.homepage-menu-option {
    display: inline;
    cursor: pointer;
}

.homepage-menu-sub-option {
    /*display: normal;*/
    /*cursor: pointer;*/
}

.homepage-menu-option:hover {
    background-color: #666666;
}

.homepage-menu-sub-option:hover
{
    background-color: #666666;
}

/* homepage */

.homepage-donate-button-container {
    min-width: 8em;
    padding-right: 1em;
}

/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
.hp-homepage-donate-button,
.homepage-donate-button
/* Differences from anchor-button */
{
    column-rule: #CD7902;
    /* Donate buttons on home page are narrow */
    max-width: 140px;
    display: block;
    margin-right:auto;
    margin-left: auto;
    color: #E64F02; /* Per HHL-1405 */
    background-color:#FEC653; /* Per HHL-1405 */
}

/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
a.hp-homepage-donate-button:link,
a.hp-homepage-donate-button:visited,
a.homepage-donate-button:link,
a.homepage-donate-button:visited {
    text-decoration: none;
}

/*
        4 Square Panels

        help-hope-live-type
        get-involved-type
        news-type
        testimony-type
*/

.fixed-height-4square {
    /* Note: Do not set height here.  Set min-height instead.  Setting height
             prevents it from growing taller when forceMatchingHeights() grows
             its contents.  So scrollbars appear.
    */
    min-height: 137px;  /* 177px less top and bottom padding of 20 */
    padding: 20px;
    position: relative;
}

/* HHL-732: get involved and Help Hope Live panels should have no bottom margin
   when in phone or tablet layouts; this removes all bottom margins from all
   panels on all cms pages
*/
div[id^=pyramid_phone_col] .hertado-panel {
    margin-bottom: 0;
}

.fixed-height-team-member {
    /* Note: Do not set height here.  Set min-height instead.  Setting height
             prevents it from growing taller when forceMatchingHeights() grows
             its contents.  So scrollbars appear.
    */
    min-height: 287px;  /* 322px less top and bottom padding of 10 */
                        /* plus a bit to make up for margins in the 4square...*/
    padding: 20px;
}

.content-panel-title,
.content-panel-title-not-bold,
.team-member-orange-title {
    font-size: 18px;
    /* ??todo: There is no such thing as font-spacing.  What was intended?
               line-height perhaps?
    */
    font-spacing: 24px;
    margin-bottom: 10px;
}

.team-member-orange-title {
    font-family: "Fjord One", serif;
    color: #F47D29;
}

.team-member-orange-title a {
    text-decoration: none;
    color: inherit;
}

.content-panel-title {
    font-weight: bold;
}

.content-panel-text,
.content-panel-text-13,
.content-panel-text-16 {
    font-size: 14px;
    /* ??todo: There is no such thing as font-spacing.  What was intended?
               line-height perhaps?
    */
    font-spacing: 18px;
    font-weight: normal;
    position:relative;  /* Otherwise, z-index is ignored */
    z-index: 10;        /* sit above the image */
}

.content-panel-text,
.content-panel-text-13 {
    /* Not for content-panel-text-16 because it causes whitespace below
       the testimonial panel which misaligns it with the footer when
       columns are grown via forceMatchingHeights().
    */
    margin-bottom: 10px;
}

.content-panel-text-13 {
    font-size: 13px;
    /* ??todo: There is no such thing as font-spacing.  What was intended?
               line-height perhaps?
    */
    font-spacing: 20px;
}

.content-panel-text-16 {
    font-size: 16px;  /* 14/18 */
    line-height: 1.6em;
}

.text-bold {
    font-weight: bold;
}
.content-panel-blog-text-bold {
    font-size: 14px;  /* 16/18 */
    font-weight: bold;
    margin-bottom: 10px;
    position:relative;  /* Otherwise, z-index is ignored */
    z-index: 10;        /* sit above the image */
}
.in-the-news-type-color a.content-panel-blog-text-bold:link,
.in-the-news-type-color a.content-panel-blog-text-bold:visited {
    text-decoration:none;
    color: #58595B
}
.prof-patient-summary-not-selected,
.pointer {
    cursor: pointer;
}

.testimony-type-text-color {color: #FFFFFF }

.float-right,
.fixed-image-right {
    float:right;
}

.fixed-height-4square-bottom-right-image {
    position: absolute;
    right: 10px;
    bottom: 6px;
    z-index: 0; /* keep it under the text */
}
.help-hope-live-type-color {background-color: #ADDFE7; }
.get-involved-type-color{background-color: #FEC653; }
.in-the-news-type-color{
    background-color: #FEA251;
    color: #58595B
}
.testimony-type-color{background-color: #00AEB3; }

/* See http://stackoverflow.com/questions/7926540/css-center-content-inside-div */
.testimony-quote-author-block {
    margin-top:   15px;
    text-align:   center;
}

.team-member-type-color {background-color: #F6E8C1;}

.fixed-height-team-member img{
    float: left;
    height: 100px;
    padding-right: 20px;
    padding-bottom: 10px;
}

.team_member_detail_type {
    border-bottom: 3px solid #b5b5b5;
}

.team_member_detail_type_details {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}
.team_member_detail_type_member_name{
    font-weight: bold;
    color: #00AEB3;
}

.team_member_detail_type_member_title {
    font-weight: bold;
    margin-bottom: 10px;
}

.team_member_detail_type_image{
    vertical-align: top;
    width: 80px;
}
.team_member_detail_type_image img{
    width: 65px;
    padding-right: 12px;
}
.unhandled_content_panel_style {
    color:red;
    font-weight: bold;
}

/* Helpful Forms dashboard panel */
.dbrd-helpful-forms-item {
    /* Produces the same effect as the absolute positioning in Kim's
       Axure mockup HRBPRT.
    */
    line-height: 1.2em;
    padding-bottom : 0.8em;
}

.dbrd-campaign-registration-panel {
    line-height: 1.2em;
}

.dbrd-campaign-registration-panel .dbrd-campaign-registration-item {
    margin-top: 10px;
    margin-bottom: 10px;
}

.medical-professional-dashboard {
    padding-top: 20px;
}

.medical-professional-dashboard-instructions {
    width: 95%;
    max-width: 640px;
}

.medical-professional-dashboard #inputs {
    width: 100%;
    margin-top: 20px;
}

/*
  Colorizing an <ol> and removing the period after the numbers can be tricky.
  See http://stackoverflow.com/questions/488830/
  and http://stackoverflow.com/questions/4996904/

  It's not working properly cross-browser, so it's disabled for now. We'll
  live with the periods after the numbers. The colors are fine, courtesy of
  colorizing the contained text.
*/

/*
.medical-professional-dashboard #inputs .input-block {
    width: 95%;
    margin-left: 0;
    padding-left: 30px;
    counter-reset: item;
    list-style-type: none;
}

.medical-professional-dashboard #inputs .input-block li:before {
    color: #666;
    content: counter(item) " ";
    counter-increment: item;
    display: inline-block;
}
*/

.medical-professional-dashboard #inputs .input-block {
    display: inline-block;
    overflow: hidden;
}

.medical-professional-dashboard .input-block .number {
    display: table-cell;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    padding-right: 10px;
    /* Need padding for the smart-select drop-down to show up. */
    padding-bottom: 100px;
    width: 20px;
}

.medical-professional-dashboard #inputs .manual-input-wrapper {
    display: inline-block;
    width: 99%;
    margin-top: 10px;
}

.medical-professional-dashboard #inputs input {
    width: 98%;
    max-width: 340px;
    border: 1px solid #aaa;
    border-radius: 5px 5px 5px 5px;
    padding: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.select-wrapper {
    width: 96%;
    max-width: 350px;
    border: 1px solid #aaa;
    border-radius: 5px 5px 5px 5px;
    padding: 4px;
    margin-top: 10px;
}

.medical-professional-dashboard #buttons {
    padding-top: 10px;
}

.medical-professional-dashboard .heading {
    font-size: larger;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
.medical-professional-dashboard .hp-anchor-button,
.medical-professional-dashboard .anchor-button {
    min-width: 77px;
}

.medical-professional-dashboard .medical-professional-input {
    margin-top: 0;
    vertical-align: top;
}

#medical-professional-form-container .selects {
    list-style-type: none;
}

.medical-professional-arrow-control {
    float: right;
}

/**** contributors, flyers, and handouts *****************/
/* 3 kinds of text: Column Headers, Fields, Address text */
/* rows alternate color; header row is a little darker */

/* setup the table */
table.dbrd-contrib-list,
.dbrd-contrib-list,
.dbrd-friends-list,
.dbrd-item-list,
.hhl-table
{
    background-color: 	#B8E6E6;
    border-spacing: 0;
}
.hhl-table { background-color: white; }

.dbrd-friends-list
{
    background-color: 	white;
    border-spacing: 0;
}

/* Friends Network on patient profile */
/*.dbrd-friends*/
/* normal text */
/*{*/
 /*    Based on "Body Text" in Kim's "Global Elements UI Spec 2.0" */
    /*font-family:Arial, sans-serif;*/
    /*font-size:13px;*/
    /*font-weight:normal;*/
    /*font-style:normal;*/
    /*text-decoration:none;*/
    /*color:#666666;*/
/*}*/


/* header */
.dbrd-friends-list-header th,
.dbrd-contrib-list-header,
.dbrd-contrib-list-header th,
.hhl-table th
{
    /* Based on "Section Header Text" in Kim's "Global Elements UI Spec 2.0"
       but color changed and font-family removed */
    font-size:14px;
    font-weight:normal;
    font-style:normal;
    text-decoration:none;
    color:#666666;
}

.dbrd-friends-list-header th,
.hhl-table th
{
    font-size:12px;
    text-align: left;
    padding-left: 15px;
    border-bottom: 1px solid #00AEb3;
}

/* normal text */
.dbrd-contrib-list-text,
.dbrd-contrib-list-address-text,
.dbrd-item-list-text
{
 /*    Based on "Body Text" in Kim's "Global Elements UI Spec 2.0"
        but made bold*/
    font-family:Arial, sans-serif;
    font-size:13px;
    font-weight:bold;
    font-style:normal;
    text-decoration:none;
    /*color:#666666;*/
}

/* small address text */
.dbrd-contrib-list-address-text {
    /* Based on "Update Date Text" in Kim's "Global Elements UI Spec 2.0"
       but made non-bold
    */
    font-size:11px;
    font-weight:normal;
}

/* give row text and images some space */
.dbrd-friends-list td,
.dbrd-contrib-list td,
.dbrd-item-list td,
.hhl-table tbody tr td
{
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* give row text and images some space */
td.dbrd-item-list-td-up
{
    padding-left: 3px;
    padding-right: 3px;
}

/* give row text and images some space */
td.dbrd-item-list-td-down
{
    padding-right: 3px;
}

/* row colors alternate light blue and white */
.dbrd-table-odd-row,
.dbrd-contrib-list-odd,
.dbrd-item-list-odd,
.hhl-table-odd-row
{
    background-color: #E7F6F8;
}

.dbrd-contrib-list-even,
.dbrd-item-list-even,
.hhl-table-even-row
{
    background-color: 	white;
}

/* row colors alternate light blue and white */
.dbrd-item-list-odd img,
.dbrd-item-list-even img
{
    width: 22px;
    height:22px;
}

.hhl-table-totals-row
{
    background-color: lightcyan;
}
.hertado-panel-content .hhl-table-totals-row td
{
    font-weight: bold;
    border-top: 1px solid black;
}

.hhl-table-right-justify
{
    float: right;
}

/* Team Dashboard panel */
.team table
{ border-collapse: collapse; }

.team th { border-bottom: 1px solid #333333; }

.team td { padding-right:20px; }

.team th,
.team td {
 /*    Based on "Body Text" in Kim's "Global Elements UI Spec 2.0" */
    font-family:Arial, sans-serif;
    font-size:13px;
    font-weight:normal;
    font-style:normal;
    text-decoration:none;
    text-align:left;
    color:#666666;
}


/*#fubar { font-weight: normal;}*/

/*th .thead {font-weight:normal;}*/

/* For the holiday call to action panel on campaign page:
    - scale down image to fill the panel
*/
.holiday_cta {
    max-width: 100%;
}

/* ********************************************************************** */
/* Panel
/* ********************************************************************** */

.hertado-panel {
    width: 100%;
    /*border-radius:	0.4em 0.4em 0.4em 0.4em;*/
    margin-bottom: 5px;
    /*margin-top: 5px;*/
    /* Do not delete this.  That causes several problems:
       - Footer appears only under right column, not under entire page
       - Header and breadcrumbs combine in a funky way
       - Light blue background-color:#E7F6F8 vanishes from header panel
    */
    overflow: auto;
    /* other style settings set in template:
       background-color, width, [height]    */
}
.hertado-panel.no_bottom_margin {
    margin-bottom: 0;
}

/* ********************************************************************** */
/* Rules for drag/drop features
/* ********************************************************************** */

/* Drop targets (visual indicators of where a dragged item will be dropped)
   are hidden, but still consume space, so hiding and showing them does not
   shift things around on the screen while the user is dragging.
   To accomplish this, use visibility:hidden or visibility:visible, not
   display:none or display:inline or display:block.
*/
.hidden_but_not_collapsed {
    visibility:hidden;
}

/* ********************************************************************** */
/* Titlebar
/* ********************************************************************** */

.hertado-panel-titlebar {
    /* from Kim */
    color: #00AEB3;
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
    font-size: 14px;  /* Cut/pasted from Kim's Axure mockup HRBPRT */
    /* from Shawn */

/*
    background: url("../images/tbarBg.6a798d7fe29e.jpg") repeat-x scroll 0 0 transparent;
*/
    /*
      Gradient, simulating the above image, generated via
      http://www.colorzilla.com/gradient-editor/

      Use of a gradient ensures that the container isn't locked to the image
      size.
    */
    background: #d7e7e7; /* Old browsers */
    background: -moz-linear-gradient(top,  #d7e7e7 0%, #fafcfb 23%, #fafcfb 76%, #d7e7e7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7e7e7), color-stop(23%,#fafcfb), color-stop(76%,#fafcfb), color-stop(100%,#d7e7e7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d7e7e7 0%,#fafcfb 23%,#fafcfb 76%,#d7e7e7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d7e7e7 0%,#fafcfb 23%,#fafcfb 76%,#d7e7e7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d7e7e7 0%,#fafcfb 23%,#fafcfb 76%,#d7e7e7 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #d7e7e7 0%,#fafcfb 23%,#fafcfb 76%,#d7e7e7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7e7e7', endColorstr='#d7e7e7',GradientType=0 ); /* IE6-9 */

    background-size: 100% 100%;
    padding-left: .4em;
    margin-bottom: .4em;

    /*
      Ensure that the title bar expands to accomodate its content. Do NOT
      set a min-height value here.
    */
    height: auto;

    /* We don't want a scrollbar on overflow. */
    /*?? To prevent scrollbar, should be "hidden" or "visible", not "auto".
         This may explain some issues we're currently having with undesired
         scrollbars appearing.
    */
    overflow: auto;
}

.hertado-clickable-titlebar div {
    border-bottom: 0px solid;
}

.hertado-panel-titlebar a:link {
    text-decoration: none;
}

a.hertado-clickable-titlebar:link,
a.hertado-clickable-titlebar:visited {
    text-decoration: none;
    color: black;
}

/* ********************************************************************** */
/* Titlebar Title
/* ********************************************************************** */
.hertado-titlebar-title {
    float:left;
    width:80%;              /* to leave room for titlebar-buttons */
    height: auto;
    /*?? Why auto? To prevent scrollbar, should be "hidden" or "visible".
         This may explain some issues we're currently having with undesired
         scrollbars appearing.
    */
    overflow: auto;
    margin: 0;
    padding: 10px;
    /*padding-top: .5em;*/
}

/* ********************************************************************** */
/* Titlebar Buttons
/* ********************************************************************** */
.hertado-titlebar-buttons {
    float:right;
}

/* ********************************************************************** */
/* Titlebar Button
/* ********************************************************************** */

/* most of AllAroundCreative's icons are 22px x 22px */
.hertado-titlebar-button {
    cursor: pointer;
    padding-top: .2em;
    padding-right: .4em;
    max-height: 1.5em;   /* to limit Leslie icons */
}
/* the navigate (>>>) button is too low */
/* but as of HHL-379 it needs to display as edit or navigate (pencil or >>>) */
/*      so take away the height/width */
.clickable-titlebar .hertado-titlebar-button.hertado-navigate {
    /*height: 25px;*/
    /*width: 25px;*/
    padding-top: .04em; }

.hertado-titlebar-button a {    /* to cancel out panel css ? */
    height: 100%;
    width: 100%;
    margin: 0;
    padding:0;
}


/* ********************************************************************** */
/* Content
/* ********************************************************************** */

/* Before Fred's changes on 6/26/2013 */
/*.hertado-panel-content {*/
    /*color: #666666;*/
    /*font-size:1em;*/
    /*font-family: arial, sans-serif;*/
    /*line-height: 1.4em;"*/
/*}*/
/*.guestbook-entry-content {*/
    /*color: #999999;*/
    /*font-size:.9em;*/
/*}*/


.hertado-panel-content,
.hertado-panel-content td,
.guestbook-entry-content {
    /* Based on "Body Text" in Kim's "Global Elements UI Spec 2.0".
       Also cut/pasted directly from Kim's Axure mockup HRBPRT.
       Added fallback font family.
    */
    color: #666666;
    font-size:13px;
    font-family: Arial, sans-serif;
    line-height: 1.4em;
    font-weight:normal;
    font-style:normal;
    text-decoration:none;
}

.guestbook-entry-content {
    /* Based on "Guestbook patient Campaign Page display text" in Kim's
       "Global Elements UI Spec 2.0"
       Also cut/pasted directly from Kim's Axure mockup HRBPRT.
    */
    color: #999999;
}

.gallery_item_title {
    height: auto;
    /*?? Why auto? To prevent scrollbar, should be "hidden" or "visible".
         This may explain some issues we're currently having with undesired
         scrollbars appearing.
    */
    overflow: auto;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

/* ********************************************************************** */
/* Columns
/* ********************************************************************** */
.hertado-layout-column {
    float:left;
    /*display:inline-block;*/
    /* other style settings set in template: width */
}

/* ********************************************************************** */
/* Header Panels - Login & Search Panels
/* ********************************************************************** */

.login_n_search input,
.login_n_search button,
.login_n_search a {
    padding-top: 2px;
    padding-bottom:2px;
    margin: 2px 2px 2px 5px;    /* top-right-bot-left */
                                /* need 5px left to clear search div w/ rounded
                                   corners and border */
    /*font-size: 16px;*/
}

.login-anchor {
    /*
    *  the LOGIN & LOGOUT links - based on anchor-button, but not buttons that
    *  call so much attention to itself
    */
    /*border:0px;   *//* removes default bevel edge for buttons */
    text-align:center;
    /*-webkit-box-shadow:  3px 3px 6px 2px rgba(142, 143, 21, .3), inset  -3px 3px 14px 4px rgba(142, 143, 21, .3);*/
     /*box-shadow: 3px 3px 6px 2px rgba(142, 143, 21, .3),inset  -3px 3px 14px 4px rgba(142, 143, 21, .3);*/
    /*-webkit-border-radius: 10px;*/
    /*border-radius: 10px;*/

    /*background:#d9e399;*/
    color:#8e8f15;

    /* final tweak by Kim */
    font-family:"Arial Black", Arial, sans-serif;
    font-size:14px;
    cursor: pointer;
    display: inline-block;
    /*min-width: 50px;*/

    margin-top:2px;
    /*margin-bottom:10px;*/
    margin-right:10px;

    /*padding-top:3px;*/
    /*padding-bottom:3px;*/
    /*padding-left: 10px;*/
    /*padding-right: 10px;*/
}


/*.hertado-login-panel {*/
    /*float: right;*/
    /*font-size: 12;*/
    /*margin-bottom:0px; *//* override panel bottom margin */
/*}*/

/*.hertado-login-panel form {*/
    /*margin-top: 2px;*/
    /*margin-bottom:2px;*/
    /*margin-bottom: 20px;*/
/*}*/

/*.hertado-login-panel button,*/
/*.hertado-login-panel a,*/
/*.hertado-login-panel span {*/
    /*padding-top: 2px;*/
    /*padding-bottom:2px;*/
    /*margin: 2px 2px 2px 0px;    *//* top-right-bot-left */
    /*font-size: 16px;*/
/*}*/


/* ********************************************************************** */
/* Campaign Picture Panel
/* ********************************************************************** */

#id_campaign_picture_image {
    margin-right:auto;
    margin-left:auto;
    display:block;

    /* Resize the campaign picture to fit the width of its panel, but never
       larger than its natural width.  Scaling up can make it pixelated and
       ugly.  Therefore, use max-height and max-width, not height and width.
       Also, never mix width and max-height, or height and max-width.  Does
       not preserve aspect ratio, so it distorts faces.  For a while, we
       tried to do this via JS function resize_campaign_picture(), but that
       led to a race condition between loading the images and running the
       JS code, so sometimes the images were too big or too small.  Clearly,
       the CSS approach is the better solution.  See HHL-531 and HHL-761.
    */
    max-height:100%;
    max-width: 100%;
}

/* ********************************************************************** */
/* Goal Bar Panel
/* ********************************************************************** */

.goal-bar {
    height:2em;
    position:relative;
    color: #575757;
    font-family:Arial;
    font-size:18px;
    font-weight:bold;
    border: solid .2em #dee3e3;
    -webkit-border-radius: .8em;
    border-radius: .8em;
    overflow: hidden;
    /*tmp stuff*/
    /*background-color: limegreen;*/
    /*z-index:2;*/
}

.goal-bar-raised {
    background:#f4cf74;
    -webkit-border-top-left-radius: .6em;
    -webkit-border-bottom-left-radius: .6em;
    border-top-left-radius: .6em;
    border-bottom-left-radius: .6em;
    float:left;
    padding-left:10px;
    line-height: 2em;
    height:2em;
    /*z-index:1;*/
}

.goal-bar-goal {
    -webkit-border-top-right-radius: .6em;
    -webkit-border-bottom-right-radius: .6em;
    border-top-right-radius: .6em;
    border-bottom-right-radius: .6em;
    position: absolute;
    top:0;
    right:0;
    text-align:right;
    line-height: 2em;
    padding-right:10px;
    /*z-index:0;*/
}
/* ********************************************************************** */
/* Picture Panel
/* ********************************************************************** */

.picture-panel {
}
/* ********************************************************************** */
/* Gallery Album Panel
/* ********************************************************************** */

.gallery-album-panel .hertado-titlebar-title {
    display: none;
}

/* ********************************************************************** */
/* Gallery Picture Panel
/* ********************************************************************** */

.gallery-picture-panel .hertado-titlebar-title {
    display: none;
}

/* ********************************************************************** */
/* Social Links Panel
/* ********************************************************************** */
.social-selection {
    float: left;
    /* Fixed width so they snap to nicely aligned columns when they wrap */
    width: 12em;
}

.social-icon {
    height: 30px;
}

.socal-check-box {
    padding-bottom: 500px;
}

/* ********************************************************************** */
/* Mailing a Check Panel
/* ********************************************************************** */

.mailCheckContainer {
   background:#d4eded;
   border-radius: 10px;
}

.mailCheckEnv {
     background: url("../images/mailIcon.facd2678202d.png") top left no-repeat;
     display:inline-block;
     float:left;
     margin-top:-.6em;
     margin-left:2px;
     width:73px;
     height:74px;
}

.mailCheckHd {
    background:#22a39f;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    color:#fff;
    font-family:Arial;
    font-weight: bold;
    /*font-size:.75em;*/
    font-size:1em;
    padding:2px 2px 2px 2px;
    text-align:center;

}
.mailCheckBody {
    background: url("../images/mailCheckBg.4a61e39f6ea8.png") top right no-repeat;

}
.mailCheckBody td{
    font-family:Arial;
    /*font-size:.75em;*/
    font-size:.9em;

}
.mailCheckFooter {
    background: #d4eded;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    width:100%;
}


/* ********************************************************************** */
/* Select Picture Panel
/* ********************************************************************** */

.section-title
/* used on both .select-picture-panel and on picture upload panel
   so an alternative selector is: .section-title .select-picture-panel
*/
{
    line-height: 30px;
    font-weight: bold;
}

/* ********************************************************************** */
/* Simple Button Panel
/* ********************************************************************** */

/*deprecated....changed to anchor-button*/
.simple-button {}

a.simple-button:link,
a.simple-button:visited {
    text-decoration:none;
}

/* ********************************************************************** */
/* Simple Donate Button Panel
/* ********************************************************************** */

/*.simple-donate-panel {*/
.hertado-panel.simple-donate-panel
{
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
.hp-simple-donate-button,
.simple-donate-button
{
    height: 2.5em;
    line-height: 2.5em;  /* to center vertically */
    font-weight: bold;
    /* Donate buttons not on home page are full-width */
    width:100%;
    color: #E64F02; /* Per HHL-1405 */
    background-color:#FEC653; /* Per HHL-1405 */
    cursor: pointer;
    font-size:20px;
    margin-top:0.5em;
    margin-bottom:0.5em;
}

/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
a.hp-simple-donate-button:link,
a.hp-simple-donate-button:visited,
a.simple-donate-button:link,
a.simple-donate-button:visited
{
    text-decoration:none;
}

/* ********************************************************************** */
/* Bar Panels: Campaign and Simple
/* ********************************************************************** */

.campaign-bar, .console-bar {
    /* Removed to fix HHL-742 */
    /*min-height: 100px;*/
    height: 100%;
}

.simple-bar .hertado-panel-content,
.campaign-bar .hertado-panel-content,
.console-bar .hertado-panel-content
{
    /* from Shawn */
/*
    background: url("../images/barBg.f5a3f40d2653.jpg") repeat-x scroll 0 0 transparent;
*/
    /*
      Gradient, simulating the above image, generated via
      http://www.colorzilla.com/gradient-editor/

      Use of a gradient ensures that the container isn't locked to the image
      size.
    */
    background: rgb(25,149,150); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(25,149,150,1) 0%, rgba(32,173,178,1) 21%, rgba(32,173,178,1) 77%, rgba(25,149,150,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,149,150,1)), color-stop(21%,rgba(32,173,178,1)), color-stop(77%,rgba(32,173,178,1)), color-stop(100%,rgba(25,149,150,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(25,149,150,1) 0%,rgba(32,173,178,1) 21%,rgba(32,173,178,1) 77%,rgba(25,149,150,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(25,149,150,1) 0%,rgba(32,173,178,1) 21%,rgba(32,173,178,1) 77%,rgba(25,149,150,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(25,149,150,1) 0%,rgba(32,173,178,1) 21%,rgba(32,173,178,1) 77%,rgba(25,149,150,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(25,149,150,1) 0%,rgba(32,173,178,1) 21%,rgba(32,173,178,1) 77%,rgba(25,149,150,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#199596', endColorstr='#199596',GradientType=0 ); /* IE6-9 */
    background-repeat: no-repeat;

    padding: 0;
}

.campaign-bar .campaign-bar-panel, .console-bar .console-bar-panel {
    /*
      Ensure that the title bar expands to accomodate its content. Do NOT
      set a min-height value here.
    */
    height: auto;

    /* We don't want a scrollbar on overflow. */
    /*?? To prevent scrollbar, should be "hidden" or "visible", not "auto".
         This may explain some issues we're currently having with undesired
         scrollbars appearing.
    */
    overflow: auto;
}

.campaign-bar .campaign-bar-panel {
    padding-left: 10px;
}

.console-bar .console-bar-panel {
    padding-left: 15px;
    padding-top: 8px;
    padding-bottom: 7px;
}

/* ********************************************************************** */
/* Campaign Bar Panel
/* ********************************************************************** */

.campaign-bar-campaign-name, .console-bar-campaign-name
{
    font-size: 20px;
    font-weight: bold;
    color: white;
}

.campaign-bar-fund-name, .console-bar-fund-name
{
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    color: #BAEFFA;
    padding-right:10px;
    float: right;
    display: inline-block;
    word-wrap: break-word;
}

.campaign-bar-fund-name
{
    margin-top:20px;
}

.console-bar-fund-name
{
    margin-top:15px;
}

.campaign-bar-patient-city-state
{
    font-weight: bold;
    font-size: 14px;
    color: white;
    /*font-style: normal;*/
    /*padding-right:10px;*/
    /*margin-top:20px;*/

}

/**************************
* Reserved NTAF_IDs
**************************/
.reserved_ntaf_id_list {
    display: inline-block;
    width:  5em;
}

/* ********************************************************************** */
/* Extras
/* ********************************************************************** */

.menu-button {
    text-align: center;
    margin-bottom: 5px;
    border: 2px 0 2px 0; /* above and below text */
    border-radius:	0.4em 0.4em 0.4em 0.4em;
    background-color: #CCCC52;  /* gold */
    padding: 3px;
}

/* ********************************************************************** */
/* Popup dialogs
/* ********************************************************************** */

/* If the dialog has a dialogClass of no-close, hide the "X" button in
   the titlebar.
*/
.no-close .ui-dialog-titlebar-close {
display: none;
}


/**************
* Event Panels
***************/
/* HH: Having an issue with input field in the event buy tickets panel;
    see event_registration_details.html file in events app; my quick fix
    is to override width of the input field when inside a table. This also
    affects the donation amount, I've commented out setting the width style
    using the widget's attribute (see PreRegistrationForm in event.forms.py,
    field 'donation_amount')
*/

.event-items-table
{
    width: 100%;
}

.panel-form .event-pre-registration input[type='text'],
.panel-form .event-pre-registration input[type='text'],
.panel-form .event-items-table input[type='text']
{
    width: 95%;
}

/* to override margin-top = 3px */
.event-items-table input[type='text']
{
    margin-top: 0;
}

.event-items-table td
{
    vertical-align: top;
}

.event-items-table th
{
    text-align: left;
}

/* HH: same as panel-form input[type='text'] except no max width */
.event-detail-form input[type='text']
{
    max-width: 98%;
}

.panel-form .event-detail-column-header {font-size:13px;}
.panel-form .event-detail-price {max-width: 70px;}
.panel-form .event-detail-quantity {width: 95px;}
.panel-form .event-detail-is-active {max-width: 70px;}
.panel-form .event-detail-delete, .panel-form .event-detail-delete a {max-width: 70px;}

.panel-form td.event-detail-price input[type='text'] {width: 75%;}

.hertado-panel-content td.event-detail-total{
    font-weight: bold;
}

/*********************
* Page Footer Panel
**********************/
.hertado-panel.page-footer
{
    background-color: #E7F6F8;
    padding-top:20px;
    padding-bottom:20px;
    /* no right or left padding */
    /*width: 98%;  cut off 2% to prevent scrolling */
}

.page-footer .hertado-panel-content
{
    font-size: 10px;
}

.page-footer a
{
    text-decoration: none;
    color: #333333;
}

.footer_campaign_verbiage
{
    float:right; font-style: italic; max-width: 33%; font-size:12px;
}

.page-footer .footer-icons
{
    display: inline-block;
    float: right;
    margin-right: 20px;
}

.page-footer .footer-icons img
{
    vertical-align: top;
}

.page-footer .footer-icons .icon-group
{
    margin-left: 20px;
}

/******************************
 * Home page main image panel.
 ******************************/

/*
   The main wrapper must have "position: relative", and the
   overlay (inside the wrapper) can then use "position: absolute".
   Note that the z-index of the wrapper must be lower than that of
   the overlay.

   See http://stackoverflow.com/questions/9724035
*/
.homepage-main-image
{
    position: relative;
    z-index: 10;
    overflow: hidden;
    border: none;
}

.homepage-main-image img
{
    width: 100%;
}

.homepage-main-image a
{
    /*
      Inspection of the DOM on I.E. shows a blue border, but simply setting the
      border color doesn't make the problem go away. Also setting the color (to
      "transparent") seems to do the trick. HHL-960.
    */
    border: none !important;
    border-color: transparent;
    text-decoration: none;
    color: transparent;
}

.homepage-main-image .overlay
{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.75);
    z-index: 2000;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;

    color: #00aeb3; /* per the specification */
    text-align: center;
    /* Initial sizes.  The JS moveOverlay() function overrides them.
       These values do not include padding, border, or margins.
    */
    height: 55%;
    width: 50%;
}

.homepage-main-image .overlay .overlay-title
{
    font-weight: bold;
    font-size: 24px;
    /* ??todo: There is no such thing as font-spacing.  What was intended?
               line-height perhaps?
    */
    font-spacing: 24px;
    margin-bottom: 10px;
    font-family: "Fjord One", serif;
}

.homepage-main-image .overlay .overlay-text
{
    font-weight: normal;
    font-family: Arial, sans-serif;
    font-size: 14px;
    /* ??todo: There is no such thing as font-spacing.  What was intended?
               line-height perhaps?
    */
    font-spacing: 18px;
}

.homepage-main-image .overlay.right-top
{
    right: 0;
    top: 0;
    margin-top: 5px;
}

.homepage-main-image .overlay.right-bottom
{
    right: 0;
    bottom: 0;
    margin-bottom: 10px;
}

.homepage-main-image .overlay.left-top
{
    left: 0;
    top: 0;
    margin-top: 5px;
}

.homepage-main-image .overlay.left-bottom
{
    left: 0;
    bottom: 0;
    margin-bottom: 10px;
}

.homepage-main-image .overlay.span-bottom
{
}

.homepage-main-image .overlay.span-bottom
{
    position: absolute;
    bottom: 0;
    left: 0;

    /* !important used here to override what's in .overlay, above */
    width: 100% !important;

    /*
      In single-column mode, per the specification (see HHL-741),
      the height of the overlay should be 33%. The calculation, above,
      doesn't exactly mean we're in single-column mode, but it's what
      controls when we're in span-bottom mode, which will have to do.
      The !important is necessary to override the height set above.
    */
    height: 33% !important;

    /* No padding, especially at top and bottom.  We are tight for space in
       span-bottom mode.  Also, something causes the overlay to drop below
       the bottom of the image by the padding amount.  Setting bottom padding
       to 0 here did not fix that though.
    */
    padding: 0px;
}

.homepage-main-image .overlay .overlay-content
{
    /* Adjust the width slightly, to prevent clipping. */
    /* No.  Better to leave this at 100%, since we manage padding explicitly
       in the JS moveOverlay() function.
    width: 90% !important;
    */

    /* Ensure that the content is centered. */
    margin-left: auto;
    margin-right: auto;
}

.homepage-main-image .overlay.span-bottom .overlay-title
{
    /* !important used here to override what's above. */
    margin-bottom: 0 !important;
    display: inline;
    font-size: 14px;
    /* When at the bottom, where the overlay-title and overlay-text are on
       the same line, make the line-height of the overlay-title as small as
       possible to avoid overlay-text lines that are too widely spaced
       vertically.  Since overlay-title never wraps, 0 is fine here.
       If this value is small enough, maybe the multiple lines of overlay-text
       will be governed by the line-height of overlay-text.
       No.  Still have widely spaced lines of overlay-text.  Why??
    line-height: 0em;
    */
}
.homepage-main-image .overlay.span-bottom .overlay-text
{
    /* !important used here to override what's above. */
    margin-bottom: 0 !important;
    display: inline;
    /* Can't find a way to avoid overlay-text lines that are too widely spaced
       vertically.  This value is ignored.  Why??  Shows in Firebug, but seems
       to have no effect, even with 0 above for overlay-title line-height.
    line-height: 0.5em;
    */
}

/* ********************************************************************** */
/* Home Page Start a Campaign Panel
/* ********************************************************************** */

.start-a-campaign {
    min-height: 224px;
    margin: 10px 20px;
    color: #ffffff;
    font-size: 16px;
    line-height: 20px;
}

#id_start_a_campaign_start {
    min-height: 196px;
}
.start-a-campaign-start-banner {
    /* displays over $96 million raised */
    font-size: 14px;
    color: #58595B;
    text-align: center;
    background-color: #ADDFE7;

    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.start-a-campaign .content-panel-title {
    padding-left: 3px;
}

/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
.start-a-campaign .hp-anchor-button,
.start-a-campaign .anchor-button {
    min-width: 77px;
}

.start-a-campaign-position {
    clear: both;
}

.start-a-campaign-select-form {
    margin-top: 30px;
}

.start-a-campaign-question {
    height: 50px;
    margin-top: -5px;
}

.start-a-campaign-question td {
    color: #ffffff;
    font-size: 16px;
}

.start-a-campaign-fields {
    height: 95px;
    width: 95%;
}

.start-a-campaign-fields tr {
    vertical-align: top;
}

.start-a-campaign select {
    max-width: 311px;
    width: 100%;
}

.start-a-campaign-nav td {
    width: 107px;
}

.start-a-campaign-nav a {
    margin-bottom: 0px;
}

.start-a-campaign-bad-hanging-indent {
    /* the hanging-indent fix only works on block elements, so we have to
       make the anchor element think it's a block element
     */
    display: block;
    margin-left: 3em;
    text-indent: -3em;
}

#id_start_a_campaign_start_title {
    padding-top: 18px;
}

#id_start_a_campaign_start_text {
    font-size: 16px;
    line-height: 20px;
}

#id_start_a_campaign_start_how_it_works_link {
    text-decoration: none;
}

#id_start_a_campaign_start_how_it_works_link_text {
    padding-bottom: 9px;
    color: white;
}

#start-a-campaign-button a {
    max-width: 187px;
}

#id_start_a_campaign_community_form .start-a-campaign-question {
    height: 40px;
    margin-top: 0px;
}

#id_start_a_campaign_community_form .start-a-campaign-fields {
    height: 120px;
}

#id_start_a_campaign_community_form .start-a-campaign-fields td {
    color: #ffffff;
    font-size: 14px;
    line-height: 18px;
}

#id_start_a_campaign_community_form ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

#id_start_a_campaign_heard_of_us_title {
    padding-top: 32px;
}

#id_start_a_campaign_heard_of_us_form .start-a-campaign-fields {
    margin-top: 0px;
    margin-bottom: 0px;
    height: 82px;
}

#id_start_a_campaign_great_match_form .start-a-campaign-question {
    height: 99px;
    margin-top: -6px;
}

#id_start_a_campaign_great_match_form .start-a-campaign-question td {
    font-size: 14px;
    line-height: 18px;
}

#id_start_a_campaign_great_match_form .start-a-campaign-fields {
    max-height: 43px; 
}

#id_start_a_campaign_great_match_form .start-a-campaign-fields td {
    width: 167px; 
    padding-right: 10px;
}

#id_start_a_campaign_good_match_form .start-a-campaign-question {
    height: 100px;
    margin-top: -6px;
}

#id_start_a_campaign_good_match_form .start-a-campaign-question td {
    font-size: 14px;
    line-height: 18px;
}

#id_start_a_campaign_good_match_form .start-a-campaign-fields {
    max-height: 43px; 
}

#id_start_a_campaign_good_match_form .start-a-campaign-fields td {
    width: 167px; 
    padding-right: 10px;
}

#id_start_a_campaign_bad_first_row {
    padding-bottom: 10px;
}

#id_start_a_campaign_bad_match_form .start-a-campaign-question {
    margin-top: 7px;
    min-height: 153px;
    padding-top: 16px;
    padding-bottom: 15px;
}

#id_start_a_campaign_bad_match_form .start-a-campaign-question tr {
    vertical-align: top;
}

#id_start_a_campaign_who_are_you_title {
    padding-top: 10px;
}

#id_start_a_campaign_who_are_you_form .start-a-campaign-question {
    height: 30px;
    padding-top: 15px;
}

#id_start_a_campaign_who_are_you_form .start-a-campaign-fields {
    height: 92px;
    padding-bottom: 8px;
}

#id_start_a_campaign_who_are_you_form .start-a-campaign-fields tr {
    max-height: 43px;
}

#id_start_a_campaign_who_bottom {
    margin-top: -32px;
    padding-bottom: 8px;
}

#id_start_a_campaign_who_are_you_form .start-a-campaign-nav a {
    min-width: 130px;
}

#id_start_a_campaign_who_related_error {
    height: 18px;
}

#id_start_a_campaign_who_related {
    height: 28px;
}

#id_start_a_campaign_who_related select {
    width: 320px;
}

#id_start_a_campaign_who_state_error {
    height: 18px;
}

#id_start_a_campaign_who_state_label {
    min-width: 220px;
    color: #ffffff;
    font-size: 16px;
}

#id_start_a_campaign_who_state select {
    width: 95px;
}

#id_start_a_campaign_password_form .start-a-campaign-question {
    height: 100px;
    margin-top: -6px;
}

#id_start_a_campaign_password_form .start-a-campaign-question td {
    font-size: 14px;
    line-height: 18px;
}

#id_start_a_campaign_password_form .start-a-campaign-fields {
    max-height: 43px; 
}

#id_start_a_campaign_password_form .start-a-campaign-fields input {
    width: 322px;
}

#id_start_a_campaign_great_thanks_title {
    padding-top: 37px;
}

#id_start_a_campaign_great_thanks .start-a-campaign-question {
    margin-top: 10px;
    padding-bottom: 27px;
}

#id_start_a_campaign_good_thanks_title {
    padding-top: 37px;
}

#id_start_a_campaign_good_thanks .start-a-campaign-question {
    margin-top: 10px;
    padding-bottom: 30px;
}

#id_start_a_campaign_reminder_title {
    padding-top: 10px;
    margin-bottom: 0px;
}

#id_start_a_campaign_reminder_form .start-a-campaign-question {
    margin-top: 3px;
    min-height: 105px;
    padding-bottom: 0px;
    margin-bottom: -6px;
}

#id_start_a_campaign_reminder_form .start-a-campaign-nav {
    margin-top: -7px;
}

#id_start_a_campaign_reminder_form .start-a-campaign-nav a {
    width: 160px;
}

#id_start_a_campaign_tell_us_more_form .start-a-campaign-question {
    height: 100px;
    margin-top: -6px;
}

#id_start_a_campaign_tell_us_more_form .start-a-campaign-question td {
    font-size: 14px;
    line-height: 18px;
}

#id_start_a_campaign_tell_us_more_form .start-a-campaign-fields {
    max-height: 43px;
}

#id_start_a_campaign_tell_us_more_form .start-a-campaign-fields td {
    width: 167px;
    padding-right: 10px;
}

/***** Professional Dashboard  */

.prof-summary-container {
    background-color:#d3d3d3
}

.prof_detail_container {
    margin-left: 10px;
}

.prof-orientation-text {
    margin-top: 15px;
    border-left: 10px solid #d3d3d3;

}
.prof-orientation-link {
    display:block;
    text-align:right; ;
    margin-right:10px;
    margin-bottom: 15px;
}

.prof-patient-summary-selected,
.prof-patient-summary-not-selected {
    padding-top: 2px;
    padding-bottom: 2px;
    border-left: 10px solid #d3d3d3;
}

.prof-patient-summary-selected {
    background-color: #ffffff;
    border-left: 10px solid #00AEB3;
}


div .prof-patient-summary-selected,
div .prof-patient-summary-not-selected {
    padding-left: 10px;
}

.prof-selected-patient-name {
    color: orange;
    font-weight: bold;
}

.prof-not-selected-patient-name {
    color: green;
    font-weight: bold;
}

.prof-fund-raising-goal-rec,
.prof-text,
.prof-orientation-text,
.prof-verifier-name {
    width:90%;
    margin-right: 10px;
    float: left;
}

.prof-text {
    clear: both;
}

.prof-options {
    float: left;
    min-width: 50%;
}

.prof-checkboxes{
    width: 5px;
    vertical-align: top;
}

.prof-buttons {
    float: right;
    padding-right: 20px;
}

.prof-medical-exp-other {
    margin-top: 5px;
    height: 75px;
}

.prof-verifier-name {
    margin-bottom: 10px;
}

.prof-fund-raising-goal-rec {
    margin-bottom: 15px;
}

.prof-spacer {
    /*?? HHL-812 Should be specified in em, not px? */
    height: 15px;
    clear: both;
}

.prof-clear {
    clear: both;
}

.prof-label {
    font-weight: bold;
    float: left;
}

.prof-width-30 {
    width: 30%;
}

.prof-campaign-button {
    margin-right: 20px;
    float: right;
}

#id_prof_application_complete {
    font-size: 24px;
    font-weight: bold;
    color: #FAC096;
}

.prof_gray_bar {
    height: 6px;
    background-color: #d3d3d3;
    margin-left: 10px;
    margin-right: 10px;
}

/* ********************************************************************** */
/* Content Panel Stuff
/* ********************************************************************** */

/****   For positioning images    ****/

.content-panel-image-top-right {
    float: right;
    margin: 0px 0px 5px 10px;
}
.content-panel-image-bottom-right {
    position: absolute;
    right: 10px;
    bottom: 6px;
    z-index: 0; /* keep it under the text */
}
.content-panel-image-top-left {
    float: left;
    margin: 0px 10px 5px 0px;
}
.content-panel-image-bottom-left {
    position: absolute;
    left: 10px;
    bottom: 6px;
    z-index: 0; /* keep it under the text */
}

/* ********************************************************************** */
/* Generic      panel type
/* E Newsletter panel type
/* News         panel type
/* FAQ          panel type
/* ********************************************************************** */

.content-panel-generic,
.content-panel-generic-title-under-image {
    /* Otherwise float:left images can overflow.  See HHL-914.  The overflow
       can also causes forceMatchingHeights() to report failure to grow
       enough after after XX iterations.  --Fred
    */
    overflow:auto;
}

.content-panel-generic,
.homepage-e_newsletter,
.content-panel-faq,
.content-panel-news {
    padding: 20px;
    position: relative;
}

.content-panel-generic-title-under-image {
    padding-bottom: 20px;
    position: relative;
}
.content-panel-generic-title-under-image .content-panel-text {
    padding-right: 20px;
}
.content-panel-generic-title-under-image .content-panel-summary-under-image {
    padding-left: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    color: #00AEB3;
    font-size: 18px;
    font-family: Handlee;
    line-height: 20px;
}


.homepage-e_newsletter,
.content-panel-faq,
.content-panel-news {
    background-color: white;
}

.content-panel-blog-list,
.content-panel-faq-list,
.content-panel-news-list,
.content-panel-enews-list {
    padding-top: 20px ;
    padding-left: 20px;
    padding-right:20px;
    padding-bottom: 5px;
}

/* this rule sets up a margin so the 'gray' background surrounds the children */
.content-panel-news-article,
.content-panel-e_newsletter,
.content-panel-faq,
.content-panel-annual-report {
    margin-left: 20px;
    margin-right: 20px;
    /*margin-top: 20px;*/
    margin-bottom: 20px;
}

a.no-link:link,
a.no-link:visited,
a.content-panel-generic:link,
a.content-panel-generic:visited,
a.content-panel-generic-title-under-image:link,
a.content-panel-generic-title-under-image:visited,
a.content-panel-news:link,
a.content-panel-news:visited,
a.content-panel-title:visited,
a.content-panel-title:link {
    text-decoration: none;
    color: #666666
}

.faq-prefix {
    color:darkturquoise;
    font-weight: bold;
    font-size: 18px;
}
/* ********************************************************************** */
/* PSC Dashboard
/* ********************************************************************** */

.psc-dashboard-table th {
    font-family:Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    color: #666666;
}

.psc-dashboard-contact-col {
    width: 62%;
    padding-left: 5px;
}

.psc-dashboard-status-col {
    width: 30%;
}

/* ********************************************************************** */
/* Campaign Request List
/* ********************************************************************** */

#id_campaign_request_list_psc_label {
    float: left;
    padding-top: 3px;
    padding-right: 10px;
    font-size: 14px;
}

.campaign-request-list-section {
    margin-top: 10px;
}

#id_campaign_request_list table {
    width: 100%;
}

#id_campaign_request_list select {
    font-size: 14px;
}

#id_campaign_request_list hr {
    height:.3em;
    background-color:#ABABAB;
    margin-bottom: 3px;
}

.campaign-request-list-bold {
    font-weight: bold;
}

.campaign-request-list-col1 {
    width: 9%;
}

.campaign-request-list-col2 {
    width: 16%;
}

.campaign-request-list-col3 {
    width: 10%;
}

.campaign-request-list-col4 {
    width: 11%;
}

.campaign-request-list-col5 {
    width: 11%;
}

/* ********************************************************************** */
/* Campaign Request view
/* ********************************************************************** */

.campaign-request-panel {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 5px;
}

.campaign-request-simple-bar {
    padding-top:15px;
    padding-bottom:15px;
    padding-left:15px;
    color:white;
}

.campaign-request-created-by {
    float: right;
    width: 32%;
    font-size: 14px;
}

.campaign-request-panel select,
.campaign-request-panel input[type='text'],
.campaign-request-panel input[type='password']
{
    font-size: 14px;
}

.campaign-request-left {
    float: left;
}

.campaign-request-right {
    float: right;
}

.campaign-request-vertical-middle {
    vertical-align: middle;
}

.campaign-request-clear {
    clear: both;
}

.campaign-request-right select {
    width: 150px;
}

.campaign-request-toggle-right-third {
    min-width: 66%;
}

.campaign-request-prescreen {
    padding-top: 5px;
    padding-left: 10px;
    font-size: 14px;
    font-style: italic;
    color: #00AEb3;
}

.campaign-request-toggle-wide-buttons a {
    /*?? HHL-812 Should be specified in em, not px? */
    width: 200px;
}

.campaign-request-panel p {
    clear: both;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
}

.campaign-request-panel ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.campaign-request-panel pre {
    color: #666666;
    font-size:13px;
    font-family: Arial, sans-serif;
    line-height: 1.4em;
    font-weight:normal;
    font-style:normal;
}

.campaign-request-width-100 select,
.campaign-request-width-100 textarea,
.campaign-request-width-100 input[type='text']
{
    width: 100%;
}

.campaign-request-width-50 select,
.campaign-request-width-50 input
{
    width: 48%;
}

.campaign-request-width-30 {
    width: 30%;
}

.campaign-request-spacer {
    /*?? HHL-812 Should be specified in em, not px? */
    height: 15px;
}

.campaign-request-big-spacer {
    /*?? HHL-812 Should be specified in em, not px? */
    height: 25px;
}

.campaign-request-small-spacer {
    /*?? HHL-812 Should be specified in em, not px? */
    height: 5px;
}

.campaign-request-panel hr {
    clear: both;
    height: 4px;
    border-width: 0px;
    background-color: #ababab;
    color: #ababab;
    margin-bottom: 0px;
}

.campaign-request-label {
    font-weight: bold;
    float: left;
}

.campaign-request-italic {
    font-style: italic;
}

.campaign-request-value {
    float: right;
}

.campaign-request-email-not_unique {
    width: 50%;
}

.campaign-request-lightbulb img {
    width: auto;
    height: 50px;
    padding-right: 10px;
}

.campaign-request-lightbulb .campaign-request-left {
    width: 10%;
}

.campaign-request-lightbulb .campaign-request-right {
    width: 88%;
}

#id_campaign_request_approved {
    padding-left: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #FAC096;
}

/* ********************************************************************** */
/* Bread Crumb                                                            */
/* ********************************************************************** */

.bread-crumbs {
    width: 100%;
    background-color: #ababab;
    min-height: 24px;
    font-family: "Fjord One", serif;
    color: white;
}

.bread-crumbs .bread-crumb {
    padding-left: 1em;
    vertical-align: middle;
}

.bread-crumbs a.bread-crumb {
    color: white;
}

.bread-crumbs span.final-crumb {
    color: white;
    font-weight: bold;
}

.bread-crumbs .separator {
    vertical-align: middle;
}

/* ********************************************************************** */
/* Summary/Detail panels                                                  */
/* ********************************************************************** */

.content-panel-summary-detail .summary-list {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

.content-panel-summary-detail-fixed-height {
    /* Took this out because it prevented forceMatchingHeights() from
       growing the detail panel to match the list of panels to its left
       We should either leave it out or add it for both columns, not only
       the right column.  See discussion in HHL-831.
       --Fred
       ?? Put it back for now.  Would be good to be able to delete it
       ?? again.  See HHL-831.
       --Fred
    */
    max-height: 500px;
}

/* No fixed maximum height when rendering a detail page in phone mode, since
   all detail panels are being rendered unconditionally, one after another.

   NOTE: The selector is a pattern match intended to match any <div>
   element with a generated ID based on the "cms_phone" layout name. For
   more information on CSS pattern match selectors, see:

   http://stackoverflow.com/questions/5231105/is-there-a-way-to-use-wildcards-in-css-id-tag
   http://www.levihackwith.com/code-snippet-css-wildcard-selectors/
*/
div[id^=cms_phone_col] .content-panel-summary-detail-fixed-height {
    max-height: none;
}

.content-panel-summary-detail .summary-list .summary-link-container {
    border: 1px solid #ddd;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;
    width: 30%;
}

.content-panel-summary-option {
    display: block;
    min-height: 50px;
    padding: 10px;
    margin-left: 0;
    margin-right: 20px;
    margin-top: 0;
    margin-bottom: 0;
    background-color: #f2f2f2;
}

.content-panel-summary-option.selected {

    border-left: 10px solid #00aeb3;
    background-color: #fff;

    /*
      !important is necessary to override the default styling of <a> records.
    */
    color: #f47d29 !important;
}

.content-panel-summary-option.not-selected {
    border-left: 10px solid white;

    border-left: 10px solid #f2f2f2;
    border-top: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;

    background-color: #f2f2f2;
}

.content-panel-summary-option {
    text-decoration: none;
    color: #999999;
    vertical-align: baseline;
}

.content-panel-summary-option img {
    vertical-align: middle;
}

.content-panel-summary-option-detail {
    /* margin-left: 20px; */
}

.content-panel-summary-option-detail .title {
    font-weight: bold;
    color: #f47d29;
    font-size: 175%;
    margin-bottom: 0.5em;
    margin-top: 10px;
}


/***** OLA Admin Pages ********/

#id_ola_lookups_admin_form ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

/***** Hyperlink classes for Shannon to use ********/

/* Expected usage:

    Within content panels where links will be used within the text, use
    the following:
     - <a href="_url_" class="hp-link-dots">_insert link text here_</a>
    where _url_ is destination for link text.

    Within the short cards where the entire panel is clickable, use one
    of the following:
    - <div class="hp-short-card-link">_insert link text here_</div>
    - <div class="hp-short-card-link-white">_insert link text here_</div>
    - <div class="hp-short-card-link-dark">_insert link text here_</div>
    - <div class="hp-short-card-link-green">_insert link text here_</div>

    Within the short cards where only certain text will be a link, use one
    of the following:
    - <a href="_url_" class="hp-short-card-link">_insert link text here_</a>
    - <a href="_url_" class="hp-short-card-link-white">_insert link text here_</a>
    - <a href="_url_" class="hp-short-card-link-dark">_insert link text here_</a>
    - <a href="_url_" class="hp-short-card-link-green">_insert link text here_</a>
*/

.urlized {
    /* Don't allow the inserted <div class='urlized'> to cause a line break
       or other block mode behavior.
    */
    display: inline;
}

/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
a.hp-link-dots,
.urlized a,
.hp-short-card-link,
.hp-short-card-link-white,
.hp-short-card-link-dark,
.hp-short-card-link-green {
    font-weight: bold;
    /* Any of these can be <a> tags, but we never want the default underline. */
    text-decoration:none;
    /* Support inline divs.  Don't require explicit use of span. */
    display: inline;
}

/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
a.hp-link-dots,
.urlized a:not(.hp-short-card-link):not(.hp-short-card-link-white):not(.hp-short-card-link-dark):not(.hp-short-card-link-green):not(.hp-anchor-button):not(.hp-homepage-donate-button):not(.hp-simple-donate-button)
{
    border-bottom: 2px dotted #ABABAB;
}

/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
.hp-short-card-link:after,
.hp-short-card-link-white:after,
.hp-short-card-link-dark:after,
.hp-short-card-link-green:after {
    content: "\0025B8";
    font-size: larger;
}

/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
a.hp-link-dots,
.urlized a:not(.hp-short-card-link):not(.hp-short-card-link-white):not(.hp-short-card-link-dark):not(.hp-short-card-link-green):not(.hp-anchor-button):not(.hp-homepage-donate-button):not(.hp-simple-donate-button),
.hp-short-card-link-green
{
    color: #8E8E24;  /* Per Kim */
}

/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
.hp-short-card-link {
    color: inherit;
}

/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
.hp-short-card-link-white {
    color: white;
}

/* Note: Always check with Shannon before changing the name or any values of
         any CSS class that stars with "hp-".  They are reserved for her use.
*/
.hp-short-card-link-dark {
    color: #3D3C3C;  /* Per Kim */
}

/* NOTE: Shannon also uses these, which are defined earlier in the file
         as clones of similarly named classes that Shannon should NOT
         use.  She should not use the original names since they are
         internal non-advertised names that we may someday have a
         reason to change, and we don't want her HTML (stored in the DB)
         to break as a result of such a name change.  These "hp-"
         names are special.  We promise Shannon that we'll never change
         them.
  - .hp-anchor-button           -- Clone of anchor-button
  - .hp-homepage-donate-button  -- Clone of homepage-donate-button
  - .hp-simple-donate-button    -- Clone of simple-donate-button
  - .hp-pseudo-link             -- Clone of pseudo-link
*/

/* ********************************************************************** */
/* Agreement panels                                                  */
/* ********************************************************************** */

#campaign-agreement-form td {
    vertical-align: top;
}

#campaign-agreement-form #id_signature_name {
    width: 300px;
}

/* ********************************************************************** */
/* Godaddy Seal panels                                                    */
/* ********************************************************************** */

#siteseal {
    float: right;
}

/* ********************************************************************** */
/* Report request views                                                   */
/* ********************************************************************** */

#id_request_report_type .fields-container .hertado-panel-content {
    margin-top: 3px;
}

.request-report-no-border {
    border: none;
}

.display-results-heading {
    font-weight: bold;
}

.display-results-checkboxes-1col {
    min-width: 100%;
}

.display-results-checkboxes-2col {
    min-width: 100%;
}

#id_request_report_type  {
    margin-top: 15px;
}

#id_request_report #buttons {
    margin-top: 8px;
}

#id_request_report_type_form #buttons {
    margin-top: 15px;
}

#id_save_report_type_form {
    width: 96%;
    max-width: 380px;
}

.save-report-width-100 select,
.save-report-width-100 textarea,
.save-report-width-100 input
{
    width: 100%;
}

#id_save_report_type_form #buttons {
    margin-top: 8px;
}

.request-report-columns {
    float: left;
    min-width: 33%;
}

.request-report-columns-checkboxes {
    width: 5px;
    vertical-align: top;
}

.request-report-spacer {
    height: 15px;
    clear: both;
}

.request-report-3col td {
    width: 33%;
    padding-right: 5px;
}

.request-report-3col {
    width: 100%;
}

.request-report-2colspan {
    width: 66%;
}

.report-results-name {
    /* min-width: 300px; */
}

.report-results-filter-container {
    width: 250px;
    margin-right: 10px;
    padding-left: 5px;
    border: 1px solid #aaa;
    border-radius: 10px;
    display: inline-block;
    background-color: #E7F6F8;
}

.report-results-filter-text {
    width: 230px;
    text-align: center;
}

.report-results-filter-label {
    font-weight: bold;
}

.report-results-filter-value {
    padding-left: 5px;
}

.report-results-filter-close {
    padding-right: 2px;
    cursor: pointer;
}

#id_report_results_page_counter {
    padding-right: 10px;
}

.report-results-num-records {
    padding-top: 10px;
}

.report-results-num-records-label {
    font-weight: bold;
}

.report-results-num-records-value {
    font-weight: 700;
}

.report-results-hr {
    height: .3em;
    background-color: #ABABAB;
    margin-bottom: 3px;
}

.ui-multiselect-menu {
    font-size: 14px;
}

#id_saved_report_list #top_buttons {
    margin-top: 8px;
}

.delete-saved-report{
    cursor: pointer;
}

#results_controls_container {
    padding-top: 5px;
}

table.hhl-sortable {
    margin: 10px 0pt 15px;
}

.hhl-sortable thead tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
}

.hhl-sortable thead tr .header {
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
    padding-right: 20px;
}

.hhl-sortable thead tr .bg {
    background-image: url("bg.c01ad2e7c59d.gif");
}

.hhl-sortable thead tr .asc {
    background-image: url("asc.f8a1940c9cf4.gif");
}

.hhl-sortable thead tr .desc {
    background-image: url("desc.a54846803de3.gif");
}

/* ********************************************************************** */
/* Global Collapsible Section Classes                                     */
/*                                                                        */
/* todo: change campaign_request_list to use this                         */
/* ********************************************************************** */

.collapsible-section {
    margin-bottom: 3px;
}

.collapsible-section hr {
    height:.3em;
    background-color:#ABABAB;
    margin-bottom: 3px;
}

.collapsible-control {
    color: #8E8E24;
    cursor: pointer;
    font-weight: bold;
    display: inline;
    margin-bottom: 5px;
}

.collapsible-arrow {
    display: inline;
}

/* ********************************************************************** */
/* Medical Professional Profile View                                      */
/* ********************************************************************** */

.med-prof-simple-bar {
    padding-top: 14px;
    padding-bottom: 38px;
    padding-left: 15px;
    color: white;
}

.med-prof-title {
    padding-top: 3px;
    float: left;
}

.med-prof-created-updated {
    float: right;
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
    padding-right: 16px;
}

.med-prof-created {
    clear: both;
    float: right;
    margin-top: -6px;
}

.med-prof-updated {
    clear: both;
    float: right;
}

#id_med_prof_name_panel_content {
    padding-top: 5px;
}

#id_med_prof_name {
    font-size: 20px;
    font-weight: 400;
    color: #666666;
}

#id_med_prof_active {
    font-size: 20px;
    font-style: italic;
    font-weight: 700;
    color: #FAC096;
    padding-left: 10px;
}

#id_add_med_prof_button {
    float: right;
}

.med-prof-3col {
    width: 100%;
}

.med-prof-3col td {
    width: 33%;
    padding-right: 5px;
}

td.med-prof-label {
    font-weight: bold;
}

.med-prof-2colspan {
    width: 66%;
}

#id_med_prof_password {
    padding-top: 10px;
    padding-bottom: 10px;
}

.med-prof-patients {
    width: 100%;
}

.med-prof-patients-email-sent {
    min-width: 48px;
}

.med-prof-left {
    float: left;
}

.med-prof-patients th {
    text-align: left;
}

#id_med_prof_profile_form #id_username, #id_med_prof_profile_form #id_notes {
    width: 98%;
}

td.med-prof-phone {
    width: 45%;
}

/* ********************************************************************** */
/* Patient Profile View                                                   */
/* ********************************************************************** */

.patient-simple-bar {
    /*?? alan:todo: Per HHL-812, these should be specified in em, not px
      ?? especially for values larger than just a couple pixels.
    */
    padding-top: 14px;
    padding-bottom: 38px;
    padding-left: 15px;
    color: white;
}

.patient-title {
    padding-top: 3px;
    float: left;
}

.patient-width-100 select,
.patient-width-100 textarea,
.patient-width-100 input
{
    width: 99%;
}

.patient-width-50 select,
.patient-width-50 input
{
    width: 48%;
}

.patient-width-45 input {
    width: 46%;
}

.patient-width-30 {
    width: 30%;
}

span.patient-width-20 select {
    width: 19%;
}

.patient-width-80 input {
    width: 78%;
}

.patient-spacer {
    /*?? HHL-812 Should be specified in em, not px? */
    height: 5px;
}

.patient-3col {
    width: 100%;
}

.patient-3col td {
    width: 33%;
    padding-right: 5px;
}

.patient-2colspan {
    width: 66%;
}

.patient-panel {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 5px;
}

.patient-panel p {
    clear: both;
    padding-top: 1px;
    padding-bottom: 6px;
    padding-left: 1px;
    padding-right: 1px;
}

.patient-label {
    font-weight: bold;
    float: left;
}

/* ********************************************************************** */
/* Team Member Profile View                                               */
/* ********************************************************************** */

.team-panel-30 {
    width: 30%;
}

.team-panel-35 {
    width: 35%;
}

.team-panel-100 {
    width: 100%;
}

.team-member-simple-bar {
    /*?? alan:todo: HHL-812 Should be specified in em, not px? */
    padding-top: 14px;
    /*?? alan:todo: HHL-812 Should be specified in em, not px? */
    padding-bottom: 38px;
    /*?? alan:todo: HHL-812 Should be specified in em, not px? */
    padding-left: 15px;
    color: white;
}

.team-member-title {
    padding-top: 3px;
    float: left;
}

.team-member-created-updated {
    float: right;
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
    /*?? alan:todo: HHL-812 Should be specified in em, not px? */
    padding-right: 16px;
}

.team-member-created {
    clear: both;
    float: right;
    /*?? alan:todo: HHL-812 Should be specified in em, not px? */
    margin-top: -6px;
}

.team-member-updated {
    clear: both;
    float: right;
}

.team-member-3col {
    width: 100%;
}

.team-member-3col td {
    width: 33%;
    /*?? alan:todo: HHL-812 Should be specified in em, not px? */
    padding-right: 5px;
    /*?? alan:todo: HHL-812 Should be specified in em, not px? */
    margin-bottom: 8px;
}

td.team-member-label {
    font-weight: bold;
    width: 99%;
}

.med-prof-2colspan {
    width: 66%;
}

#id_team_member_profile_form p {
    clear: both;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 1px;
    padding-right: 1px;
}

.team-member-spacer {
    height: 5px;
    clear: both;
}

#id_team_member_profile_form #id_notes {
    width: 98%;
}

.team-member-label {
    float: left;
    font-weight: bold;
}

.team-member-italic {
    float: left;
    font-style: italic;
}

.team-member-50 select,
.team-member-50 .team-member-label
{
    width: 49%;
    padding-left: 3px;
}

.team-member-100 select,
.team-member-100 textarea,
.team-member-100 input
{
    width: 99%;
}

#id_team_member_role_p {
    margin-top: 5px;
}

td.team-member-phone {
    width: 45%;
}

/* ********************************************************************** */
/* Staff Profile View                                                     */
/* ********************************************************************** */
/*?? alan:todo: Lots of duplication between these staff settings and
  ?? those of team_member that you cut/pasted them from.  Is there a
  ?? way to share more code to avoid all the duplication?  We now have
  ?? 4 similar sets:  med_prod, patient, staff, and team_member.
  ?? The multiple sets will lead to more maintenance effort over time,
  ?? as we have to fix each bug or add each new feature in 4 places.
  ?? Will also lead to more bugs as we accidentally allow them to drift
  ?? further apart.  If these sets are fundamentally linked and should
  ?? always have certain things in common ("essential reuse") we should
  ?? refactor to avoid the duplication.  On the other hand, if they just
  ?? happen to be similar at the moment, but are intended to diverge in
  ?? the future ("accidental reuse"), we should leave them as they are.
  ?? Which case do you think applies here?
*/
.staff-simple-bar {
    /*?? alan:todo: HHL-812 Should be specified in em, not px? */
    padding-top: 14px;
    /*?? alan:todo: HHL-812 Should be specified in em, not px? */
    padding-bottom: 38px;
    /*?? alan:todo: HHL-812 Should be specified in em, not px? */
    padding-left: 15px;
    color: white;
}

.staff-title {
    padding-top: 3px;
    float: left;
}

#id_staff_name_panel_content {
    padding-top: 5px;
}

#id_staff_name {
    font-size: 20px;
    font-weight: 400;
    color: #666666;
}

#id_staff_active {
    font-size: 20px;
    font-style: italic;
    font-weight: 700;
    color: #FAC096;
    padding-left: 10px;
}

.staff-created-updated {
    float: right;
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
    /*?? alan:todo: HHL-812 Should be specified in em, not px? */
    padding-right: 16px;
}

.staff-created {
    clear: both;
    float: right;
    /*?? alan:todo: HHL-812 Should be specified in em, not px? */
    margin-top: -6px;
}

.staff-updated {
    clear: both;
    float: right;
}

#id_add_staff_button {
    float: right;
}

.staff-3col {
    width: 100%;
}

.staff-3col td {
    width: 33%;
    /*?? alan:todo: HHL-812 Should be specified in em, not px? */
    padding-right: 5px;
}

td.staff-label {
    font-weight: bold;
}

.staff-2colspan {
    width: 66%;
}

#id_staff_password {
    padding-top: 10px;
    padding-bottom: 10px;
}

.staff-left {
    float: left;
}

#id_staff_profile_form #id_username, #id_staff_profile_form #id_notes {
    width: 98%;
}

td.staff-phone {
    width: 45%;
}
.staff-other-roles {
    width: 100%;
}

.staff-bullet-list {
    list-style-type: none;
    margin-left: -3em;
    margin-top: 0em;
    margin-bottom: 0em;
}

/* ********************************************************************** */
/* New Campaign Console                                                   */
/* ********************************************************************** */

#id_patient_information td,
#id_medical_overview_panel td,
#id_demographic_survey_panel td,
#id_campaign_overview td,
#id_access_utility_panel td
{
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

td.campaign-console-label, span.campaign-console-label {
    font-weight: bold;
}

#id_psc_label, #id_uninsured_expenses_label, #id_med_pro_label {
    padding-right: 5px;
    width: 50%;
}

#id_campaign_edit_psc_form select, #id_campaign_edit_status_form select {
    margin-left: 1px;
}

.campaign-overview-label {
    width: 48%;
}

.campaign-console-small-spacer {
    height: 5px;
}

#id_console_medical_overview_form p,
#id_console_demographic_survey_form p
{
    padding: 2px;
}

#id_console_medical_overview_form select,
#id_console_medical_overview_form input[type='text'],
#id_console_demographic_survey_form select
{
    width: 98%;
    margin-left: 2px;
}

#id_console_medical_overview_form #id_notes {
    width: 98%;
}

#id_medical_overview_panel hr {
    clear: both;
    height: 4px;
    border-width: 0px;
    background-color: #ababab;
    color: #ababab;
    margin-bottom: 0px;
}


/* ********************************************************************** */
/* Letters page                                                           */
/* ********************************************************************** */

.letters-instructions-title,
.letters-instructions-text
{
}

.letters-instructions-title
{
    margin-left: 1em;
    font-weight: bold;
}


/* ********************************************************************** */
/* Message detail                                                         */
/* ********************************************************************** */

#id_other_user_viewing {
    width: 100%;
    color: red;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 2px;
}

.message-detail-simple-bar {
    padding-top: 14px;
    padding-bottom: 38px;
    padding-left: 15px;
    color: white;
}

.message-detail-created-updated {
    float: right;
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
    padding-right: 16px;
}

.message-detail-33-table {
    min-width: 413px;
    display: inline-block;
}

.message-detail-created {
    clear: both;
    float: right;
    margin-top: -6px;
}

.message-detail-updated {
    clear: both;
    float: right;
}

.message-detail-label {
    padding-right: 5px;
}

.message-detail-33-table span {
    padding-right: 5px;
}

#id_message_detail_title {
    padding-top: 3px;
    float: left;
}

#id_message_form #id_note {
    width: 98%;
}

#id_message_form #buttons {
    padding-right: 10px;
}

#id_message_form #id_delete_button {
    float: right;
}


/* ********************************************************************** */
/* Message list panel                                                     */
/* ********************************************************************** */

.message-list-table {
    width: 100%;
    cursor: pointer;
    border-spacing: 0px;
}

.message-list-col1 {
    width: 38px;
    vertical-align: top;
}

.message-list-col3 {
    width: 14px;
    vertical-align: top;
}

.message-list-col3 img {
    width: 22px;
    margin-right: -6px;
}

.message-list-date {
    font-style: italic;
    text-align: right;
}

.message-list-small-spacer {
    height: 5px;
}


/* ********************************************************************** */
/* Message Center                                                         */
/* ********************************************************************** */

.message-center-table {
    width: 100%;
    cursor: pointer;
}

.message-center-table td, .message-center-table th {
    text-align: left;
    padding-right: 10px;
}

.message-center-table tbody tr td {
    padding-left: 3px;
}

.message-center-date-col {
    min-width: 130px;
}

.message-center-note-col {
    width: 57%;
}

#id_message_center_form_right {
    float: right;
}


/* ********************************************************************** */
/* Message Archive                                                         */
/* ********************************************************************** */

.message-archive-label {
    font-weight: bold;
}

.message-archive-table {
    width: 100%;
    cursor: pointer;
}

.message-archive-table td, .message-archive-table th {
    text-align: left;
    padding-right: 10px;
}

.message-archive-table tbody tr td {
    padding-left: 3px;
}

.message-archive-date-col {
    min-width: 130px;
}

.message-archive-note-col {
    width: 57%;
}

#id_message_archive_form_right {
    float: right;
}

#id_message_archive_form #buttons {
    float: left;
    padding-top: 10px;
}

#id_message_archive_page_counter {
    padding-right: 10px;
}

#id_message_archive_total_records {
    padding-left: 5px;
}


/* ********************************************************************** */
/* Department List/Detail                                                 */
/* ********************************************************************** */

#id_department_list_table {
    width: 100%;
}

#id_department_back_button {
    float: right;
}

.department_list-3col {
    width: 100%;
}

.department_list-3col td {
    width: 33%;
    /*?? alan:todo: HHL-812 Should be specified in em, not px? */
    padding-right: 5px;
    /*?? alan:todo: HHL-812 Should be specified in em, not px? */
    margin-bottom: 8px;
}

td.department_list-label {
    font-weight: bold;
}

.department_list-2colspan {
    width: 66%;
}

/* ********************************************************************** */
/* Olc list panel                                                         */

/*
.olc-center-table tbody tr td th {
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
}
*/

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

.olc-center-table {
    width: 100%;
    cursor: pointer;
}

.olc-center-table tbody tr td {
    text-align: left;
    vertical-align: top;
    padding-left: 5px;
    padding-right: 5px;
}

.olc-center-contributor-col {
    width: 90px;
}

.olc-center-date-col {
    width: 65px;
}

.olc-center-date-sm-col {
    width: 15px;
}

.olc-center-campaign-col {
    width: 130px;
}

.olc-center-status-col {
    width: 80px;
}

.olc-center-amount-col {
    width: 15px;
}

.olc-center-flag-col {
    width: 20px;
}

.olc-center-detail-col {
    width: 130px;
}

#id_olc_center_form_right {
    float: right;
}

.donation_payment_status_success,
.donation_payment_status_failure,
.donation_payment_status_warning
{
    font-size:          14px;
    font-weight:        bold;
    color:              black;
    text-align:         left;
    padding:            5px;
    border-radius:      10px;
}
.donation_payment_status_success {
    background-color:   lime;
}
.donation_payment_status_failure {
    background-color:   red;
}

.donation_payment_status_warning {
    background-color:   yellow;
    font-weight:        normal;
}