body
         {
              text-align         : center;
              font-family        : tahoma, arial, sans-serif;
              margin             : 0;
         }

         #page_container
         {
              clear              : both;
              background-color   : #eee;
              padding            : 30px 0;
         }

         h2
         {
              clear              : both;
              width              : 100%;
              font-size          : 4vw;
              color              : #3184de;
         }

         hr.partial
         {
              display            : inline-block;
              width              : 100px;
              color              : #3184de;
         }

         #header
         {
               display            : block;
               overflow           : auto;
               background-color   : #fff;
         }



         #header #logo
         {
              float              : left;
              min-width          : 200px;
              max-width          : 400px;
         }

         #header ul
         {
              text-align         : right;
              margin-top         : 25px;
         }

         #header ul li
         {
              display            : inline-block;
              padding            : 2px 20px;
              font-weight        : bold;
              text-decoration    : none;
         }

         #header ul li a
         {
              color              : black;
              text-decoration    : none;
              font-size          : 13pt;
         }

         #header ul li a:hover
         {
              text-decoration    : underline;
         }


         #header div.menu .current
         {
              display             : none;
         }



         #hero
         {
               clear             : both;
               color             : white;
               background-color  : #ad700566;
               height            : 500px;
               background-image  : url("/v2/themes/pub2/images/woman-bringing-meal-for-elderly-neighbour_1200x800.jpg");
               background-position : center center;
               background-repeat : no-repeat;
               background-size   : cover;
         }

         #hero_image img
         {
               max-height         : 500px;
         }

         #hero_text
         {
               font-size          : 40pt;
               color              : navy;  /*#3184de;*/
               font-weight        : bold;
               max-width          : 40%;
               text-shadow        : #fff 1px 1px 0,#fff -1px 1px 0, #fff 1px -1px 0, #fff -1px -1px 0, #fff 0px 0px 10px;
               text-align         : left;
               margin-left        : 20px;
               padding-top        : 15vw;
         }

         div.cta_button, 
         div.cta_button a,
         input.cta_button

         {
                margin            : 20px auto;
                color             : white;
                font-size         : 15pt;
                font-weight       : bold;
                background-color  : navy;
                padding           : 10px;
                border-radius     : 20px;
                max-width         : 200px;
                border            : none;
                width             : 50%;
                text-decoration   : none;
         }


         .cta_button:hover
         {
                cursor             : pointer;
         }

         div.cta-block-container
         {
                width              : 100%;
                clear              : both;
                background-color   : yellow;
                display            : table;
         }

         div.cta-block-wrapper
         {
                background-color   : tan;
                display            : table-row;
         }

         div.cta-block
         {
                width              : 20%;
                min-width          : 300px;
                margin             : auto;
                display            : table-cell;
                vertical-align     : bottom;
                padding-bottom     : 10px;
         }

         div.cta-block h3
         {
                padding            : 20px 0;
         }

         .logontext
         {
              font-weight          : bold;
         }

         div.logon_help
         {
              margin-top           : -19px;
              font-size            : 10pt;
         }

         #whatis
         {
                max-width         : 50%;
                margin            : 50px auto;
         }


         #benefits
         {
               clear             : both;
               display           : flex;
               flex-wrap         : wrap;
               width             : 95%;
               margin            : auto;
         }

         #benefits div
         {
               color             : black;
               background-color  : aliceblue;
               float             : left;
               width             : 30%;
               min-width         : 200px;
               text-align        : center; 
               margin            : 10px auto;
               padding           : 10px;
               border            : 1px solid #aaaaaa;
               border-radius     : 10px;
               box-shadow        : 3px 3px 9px #777777;
         }

         #benefits div ul
         {
               text-align        : left; 
         }

         #benefits h3
         {
               color             : #3184de;
         }

         #usebyfor
         {
               color             : black;
               background-color  : white;
               clear             : both;
               display           : flex;
               flex-wrap         : wrap;
               width             : 100%;
         }

         #usebyfor div
         {
               float             : left;
               width             : 30%;
               min-width         : 200px;
               text-align        : center; 
               margin            : 0 auto;
               padding           : 10px;
         }

         #usebyfor div ul
         {
             list-style-position  : inside;
             padding-left         : 0;
             list-style         : none;
         }

         #usebyfor2_wrapper 
         {
            display                 : flex;
            width                   : 95%;
            margin                  : auto;
            padding-bottom          : 20px;
         }

         #usebyfor2_wrapper div.block
         {
             float                   : left;
             width                   : 400px;
             max-width               : 32%;
             margin                  : auto;
             background-color        : aliceblue;
             box-shadow              : 3px 3px 9px #777777;
             border-radius           : 10px;
         }

         #usebyfor2_wrapper div.block .block_title
         {
             clear                    : both;
             font-size                : xx-large;
             font-weight              : bold;
             font-family              : tahoma, arial, sans-serif;
             text-align               : center;
             background-color         : #3184de;
             color                    : aliceblue;
             border-radius            : 10px 10px 0 0;
         }

         #usebyfor2_wrapper div.block ul
         {
             list-style-position  : inside;
             padding-left         : 0;
             list-style           : none;
         }


         #use_stats
         {
               color             : white;
               background-color  : #3184de;
               background-image  : linear-gradient(0deg, #3184de, #eee);
               clear             : both;
               display           : flex;
               flex-wrap         : wrap;
               width             : 100%;
               padding           : 30px 0;
               margin            : 30px 0;
               overflow          : auto;
         }

         #use_stats div
         {
               width             : 18%;
               min-width         : 200px;
               text-align        : center; 
               margin            : 0 auto;
               padding           : 10px;
         }

         #testimonials
         {
               clear             : both;
               display           : flex;
               flex-wrap         : wrap;
               width             : 100%;
               background-color  : #3184de;
               color             : white;
               overflow          : auto;
         }

         #testimonials div
         {
               color             : black;
               background-color  : aliceblue;
               float             : left;
               width             : 30%;
               min-width         : 200px;
               text-align        : center; 
               margin            : 10px auto;
               padding           : 10px;
               border            : 1px solid #aaaaaa;
         }

         #testimonials h2
         {
              color              : white;
         }


         #testimonials .byline
         {
               font-size          : 8pt;
         }


         #media_mentions
         {
               color             : black;
               background-color  : white;
               clear             : both;
               padding           : 50px 0;
         }


          #media_mentions_logos
         {
               clear             : both;
               display           : flex;
               flex-wrap         : wrap;
               width             : 100%;
         }

         #media_mentions_logos img
         {
                max-height       : 35px;
                width            : auto;
                height           : auto;
                margin           : 0 auto;
                padding          : 20px;
         }

         #footer
         {
                clear             : both;
                background-color  : #777;
                color             : #ccc; 
                padding           : 40px 0 0 0;
         }

         #footer_links
         {
                padding           : 10px;
         }

         #footer_links a
         {
                color              : #ccc;
                padding            : 5px 20px;
                text-decoration    : none;
                white-space        : nowrap;
         }

         #footer_links a:hover
         {
                color              : white;
                text-decoration    : underline;
         }

         #copyright
         {
                margin-top          : 20px;
                font-size           : 8pt;
                color               : #aaa;
         }

         div.colorblock1
         {
                background-color   : gold;
         }

         div.colorblock2
         {
                background-color   : #8cafce;
         }

         div.colorblock3
         {
                background-color   : steelblue;
         }

         /* center-separator code from https://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-hr-like-line  */

         .center-separator 
         {
              display       : flex;
              line-height   : 1em;
         }

         .center-separator::before, 
         .center-separator::after 
         {
             content        : '';
             display        : inline-block;
             flex-grow      : 1;
             margin-top     : 0.5em;
             background     : #3184de;
             height         : 1px;
             margin-right   : 10px;
             margin-left    : 10px;
         }


         div.headline
         {
             width              : 100%;
             background-color   : #0f3e71; /*#3184de;*/
             text-align         : center;
         }

         div.headline h1
         {
             color              : white;
             font-size          : 30pt;
             margin             : 0 auto;
             padding            : 20px 0;
         }

         div.headline .headline_2
         {
             color              : navy;
             font-size          : 8pt;
         }


         .button_single
         {
             color             : white;
             background-color  : #0f3e71;

             margin            : 20px auto;
             font-size         : 15pt;
             font-weight       : bold;
             padding           : 10px;
             border-radius     : 20px;
             max-width         : 200px;
             border            : none;
/*           width             : 50%;*/
             text-decoration   : none;

         }

         table.datasection th.infoview
         {
              vertical-align   : top;
              text-align       : right;
         }


table
{
     background-color     : white;
     border-collapse      : collapse;
}


tr.row00,
tr.row00 th,
tr.row00 td
{
    font-family       : arial,verdana,sans-serif;
    background-color  : #E5E5FF;  
    vertical-align    : top;
    text-align        : left;
    font-size         : 12px;
    font-weight       : bold;
    border-color      : #AAAAAA;
    border-style      : solid;
    border-width      : 1px 0;
}


tr.row1
{
    font-family       : arial,verdana,sans-serif;
    background-color  : white; 
    text-align        : left;
    font-size         : 12px;
}

tr.row0
{
    font-family       : arial,verdana,sans-serif;
    background-color  : #EEEEEE;
    text-align        : left;
    font-size         : 12px;
}

tr.row0 td, tr.row1 td
{
    padding           : 12px 3px;
    border-color      : #aaaaaa;
    border-style      : solid;
    border-width      : 1px 0;
    white-space       : nowrap;
  /*width             : 25%;*/
    vertical-align    : top;
}




/* ================================= */

.tiny
{
       font-weight       : normal;
       font-size         : 10px;
}

.gray, .grey
{
       color             : #aaaaaa;
}



.moreinfo
{
       font-weight       : normal;
       font-size         : 10px;
       color             : #555555;
}





#box    
{ 
       background-color  : #FFFFFF; 
       padding           : 10px; 
       text-align        : left;
       overflow          : auto;
       font-size         : 12pt;
       max-width         : 600px;
       margin            : 0 auto;
       box-shadow        : 0px 0px 10px #ccc;
}

#box_homepage
{ 
        margin-top        : -30px;  
}


.msgerror            
{
       color             : red;
       font-weight       : normal;
       background-color  : white;
}

.msgwarning,
.msgwarn, 
.msg_warn
{  
       color             : black;
       font-weight       : normal;
       background-color  : yellow;
       vertical-align    : top;
}

.msgsuccess, 
.msggood
{
       color             : green;
       font-weight       : normal;
       background-color  : white;
}

.msg_info
{ 
       color             : #000000   !important;
       background-color  : #ffffFF   !important;
}

.msg_info, 
.msg_warn, 
.msg_error, 
.msg_good 
{ 

       font-weight       : normal    !important;
       font-size         : 12px;     !important;
       text-align        : left      !important;
       overflow          : auto      !important;
}

.msg_info img, 
.msg_warn img, 
.msg_error img, 
.msg_good img
{ 
    float:left;
}


p,li,ul 
{ 
       font-family       : arial,verdana,sans-serif;
       font-size         : 10pt;
}


dt 
{
       font-weight       : bold;
       margin-top        : 5px;
}
dd 
{
       padding           : 5px;
}


h2
{  
       font-family       : arial,verdana,sans-serif;
       font-weight       : bold;
       color             : navy;
}


textarea
{
    overflow          : hidden;
}


    span.staticon_sprite
    {
         width      : 100px;
         height     : 100px;
         display    : block;
         margin     : auto;
         background : url('/v2/themes/pub2/images/icons/staticon_sprite_140x35.png');
    }
    #icon_coordinator   { background-position  : -500px 0;  }
    #icon_helper        { background-position  : -600px 0;  }
    #icon_recipient     { background-position  : -700px 0;  }
    #icon_calendar      { background-position  : 0px 0;     }
    #icon_meal          { background-position  : -100px 0;  }
    #icon_visit         { background-position  : -200px 0;  }
    #icon_ride          { background-position  : -300px 0;  }
    #icon_other         { background-position  : -400px 0;  }

    span.media_sprite
    {
         width      : 140px;
         height     : 35px;
         display    : block;
         margin     : 20px auto;
         background : url('/v2/themes/pub2/images/media_sprite_140x35.png') no-repeat;
         padding    : 0 10px;
    }
    #logo_tlc           { background-position  : 0 0;      }
    #logo_people        { background-position  : 0 -35px;  }
    #logo_aarp          { background-position  : 0 -70px;  }
    #logo_lamaze        { background-position  : 0 -105px; }
    #logo_prevention    { background-position  : 0 -140px; }
    #logo_tasteofhome   { background-position  : 0 -175px; }
    #logo_world         { background-position  : 0 -210px; }
    #logo_webmd         { background-position  : 0 -245px; }
    #logo_cure          { background-position  : 0 -280px; }
    #logo_huffpost      { background-position  : 0 -315px; }
    #logo_military      { background-position  : 0 -350px; }
    #logo_cancertoday   { background-position  : 0 -385px; }
    #logo_lvsun         { background-position  : 0 -420px; }
    #logo_seattletimes  { background-position  : 0 -455px; }
    #logo_healthline    { background-position  : 0 -490px; }
    #logo_houstonchron  { background-position  : 0 -525px; }
    #logo_stlouispost   { background-position  : 0 -560px; }
    #logo_ocregister    { background-position  : 0 -595px; }
    #logo_sandiegounion { background-position  : 0 -630px; }
    #logo_cnn           { background-position  : 0 -665px; }


     .offline
     {
        display          : none;
        background-color : red;
        color            : white;
        position         : fixed;
        left             : 0;
        right            : 0;
        bottom           : 0;
        width            : 100%;
     }


/* A2HS code from https://gist.github.com/jsanta/9745813617f78bc6a21ce5a24fb0039e */

      .ad2hs-prompt 
      { 
        background-color: rgb(74, 196, 59);
        border          : none;
        display         : none;
        color           : white;
        padding         : 15px 32px;
        text-align      : center;
        text-decoration : none;
        font-size       : 16px;
        position        : fixed;
        /*margin        : 0 1rem 1rem;*/
        left            : 0;
        right           : 0;
        bottom          : 0;
        /*width         : calc(100% - 32px);*/ 
        width           : 100%;


      }
      
      .ios-prompt {
        background-color : #fcfcfc;
        border           : 1px solid #666;
        display          : none;
        padding          : 0.8rem 1rem 0 0.5rem;
        text-decoration  : none;
        font-size        : 16px;
        color            : #555;
        position         : fixed;   
      /*position         : absolute;*/
      /*margin           : 0 auto 1rem;*/
        left             : 1rem;
        right            : 1rem;
        bottom           : 0;
      }