JavaScript

Behavior of interface components that require script.

3-1 Collapse

Scripts for collapsible items, such as archived publications and abstracts.

3-1.1 Collapsible header

Collapsible header for pages such as ER Publications to hide and show information. Change icon image to plus or minus, as appropriate.

Header (Opened)
Hide this section

Header (Closed)
Hide this section
<section class="show-section cf">
  <header class="category">
    <div class="m-9of12 t-10of12 d-10of12 m-o-1of12 t-o-1of12 d-o-1of12 aligncenter">
      <h6 class="section-title-assets">Header (Opened)</h6>
    </div>
    <div class="d-1of12 alignright">
      <img src="../assets/images/icon-minus.png" class="icon hideshow" width="30" height="30" alt="Hide this section">
    </div>
  </header>
  <article style="display: block">
    <div>
      <h5><a class="ti" href="/economic-research/publications/working-papers/2015/wp2015-15.pdf">Title of publication</a></h5>
        <p>Some text here</p>
    </div>
  </article>
</section>
<hr>
<section class="hide-section cf">
  <header class="category">
    <div class="m-9of12 t-10of12 d-10of12 m-o-1of12 t-o-1of12 d-o-1of12 aligncenter">
      <h6 class="section-title-assets">Header (Closed)</h6>
    </div>
    <div class="d-1of12 alignright">
      <img src="../assets/images/icon-plus.png" class="icon hideshow" width="30" height="30" alt="Hide this section">
    </div>
  </header>
  <article style="display:none;">
    <div>
      <h5><a class="ti" href="/economic-research/publications/working-papers/2015/wp2015-15.pdf">Title of publication</a></h5>
        <p>Some text here</p>
    </div>
  </article>
</section>

3-1.2 Abstract

Abstracts for papers can be shown and hidden.

+ abstract
<div class="info"><a class="tog" href="#"><span>+</span> abstract</a>
<div class="collapsible" style="display: none;">Working paper abstract.</div></div>

3-1.3 Trancript or Request

Collapsible style for transcript and in-person tour requests.

Transcript

Show this section

Quoted Person:

The quick brown fox jumps over the lazy dog.

Request a City Tour

Show this section

Explore the Fed Center with a tour.

<div id="inner-content">
  <main id="main" class="m-all t-all d-all cf">
  <article class="m-all t-10of12 d-10of12 t-o-1of12 d-o-1of12">
    <section class="hide-section cf" id="transcript">
    <header class="category">
      <div class="m-8of12 t-10of12 d-10of12 m-o-2of12 t-o-1of12 d-o-1of12 aligncenter">
          <h3 class="section-title-assets">Transcript</h3>
      </div>
      <div class="m-2of12 t-1of12 d-1of12 alignright">
          <img src="../assets/images/icon-plus.png" class="icon hideshow" width="30" height="30" alt="Show this section" style="cursor: pointer;">
      </div>
    </header>
    <article class="cf">
      <div class="m-all t-3of12 d-2of12">
        <p>Quoted Person:</p>
      </div>
      <div class="m-all t-9of12 d-10of12">
        <p>The quick brown fox jumps over the lazy dog.</p>
      </div>
    </article>
    </section>
    <section class="hide-section cf" id="transcript">
    <header class="category">
        <div class="m-8of12 t-10of12 d-10of12 m-o-2of12 t-o-1of12 d-o-1of12 aligncenter">
            <h3 class="section-title-assets">Request a City Tour</h3>
        </div>
        <div class="m-2of12 t-1of12 d-1of12 alignright">
            <img src="../assets/images/icon-plus.png" class="icon hideshow" width="30" height="30" alt="Show this section" style="cursor: pointer;">
        </div>
    </header>
    <article class="cf">
      <div class="m-all t-all d-all">
        <p>Explore the Fed Center with a tour.</p>
      </div>
    </article>
    </section>
  </article>
  </main>
</div>
<p class="cf"></p>

3-1.4 Economist abstract or supplement

Collapsible style for economist biography page.

abstract (+)

supplement (+)

abstract (-)
Abstract

supplement (-)
Supplement
<div class="economic-research page-template-page-er-economist-php">
<div id="bio-container-bottom">
<a class="tog abs" href="#">abstract <span>(+)</span></a>
<div class="collapsible abs" style="display: none;">Abstract</div>
<p></p>
<a class="tog abs" href="#">supplement <span>(+)</span></a>
<div class="collapsible abs" style="display: none;">Supplement</div>
<p></p>
<a class="tog abs" href="#">abstract <span>(-)</span></a>
<div class="collapsible abs" style="display: block;">Abstract</div>
<p></p>
<a class="tog abs" href="#">supplement <span>(-)</span></a>
<div class="collapsible abs" style="display: block;">Supplement</div>
</div>
</div>

3-2 Gallery

Gallery or slideshow function to cycle through elements.

3-2.1 Gallery 1 - Dark with Captions

Swipeable photo gallery. Dark gray background with centered elements and caption overlay at the bottom.

San Francisco Fed lobby in the 1940s

<div class="d-10of12 d-o-1of12" style="margin-top: 10px;">
    <div class="galleria" style="max-width:850px">
        <img src="../assets/images/sftemp.gif"
            data-big="../assets/images/sftemp.gif"
            data-title="Temporary quarters for the San Francisco Fed, 1920"
            data-description="San Francisco Fed employees worked in temporary quarters at Battery and Commercial streets in 1920 while the Bank's new building was under construction. &lt;span class=&lquotcaptionbar_credit&rquo style=&lquotfont-weight:400&rquo&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
        <img src="../assets/images/sf_bondredemption.jpg"
            data-big="../assets/images/sf_bondredemption.jpg"
            data-title="IBM keypunch operator, 1949"
            data-description="Bond redemption department, Federal Reserve Bank of San Francisco. Every bond required 37 punchings.&lt;span class=&lquotcaptionbar_credit&rquo&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
        <img src="../assets/images/sf_cafeteria.jpg"
            data-big="../assets/images/sf_cafeteria.jpg"
            data-title="San Francisco Fed cafeteria, circa 1950"
            data-description="This cafeteria in the 400 Sansome St. building was in use through 1982, when the San Francisco Fed moved to its new building at 101 Market Street. You could get a hot meal for 85 cents in 1975.&lt;span class=&lquot;captionbar_credit&rquo;&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
        <img src="../assets/images/sf_mainlobby.jpg"
            alt="San Francisco Fed lobby in the 1940s"
            data-big="../assets/images/sf_mainlobby.jpg"
            data-title="San Francisco Fed lobby in the 1940s"
            data-description="Entrance lobby and view into Securities Services department, 400 Sansome Street. The building's architect was George Kelham, and the mural above the doorway is called &ldquo;Traders of the Adriatic.&rdquo;&lt;span class=&lquot;captionbar_credit&rquo;&gt;
            Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
        <img
            src="../assets/images/sf_rolledcoin.jpg"
            data-big="../assets/images/sf_rolledcoin.jpg"
            data-title="Rolling coin, circa 1950 "
            data-description="The San Francisco Fed began rolling coins as a service in 1949. The service was later transferred to armored carrier companies.&lt;span class=&lquotcaptionbar_credit&rquo&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
        <img
            src="../assets/images/sf_jobapplicant.jpg"
            data-big="../assets/images/sf_jobapplicant.jpg"
            data-title="Applying for a job, circa 1950"
            data-description="Personnel department at the San Francisco Fed.&lt;span class=&lquotcaptionbar_credit&rquo&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt; ">
        <img
            src="../assets/images/sf_sbprocessing.jpg"
            data-big="../assets/images/sf_sbprocessing.jpg"
            data-title="Savings bond processing area, San Francisco Fed, circa 1950"
            data-description="This photo was taken in the savings bond processing area of the San Francisco Fed.&lt;span class=&lquotcaptionbar_credit&rquo&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
        <img
            src="../assets/images/sf_transfer.jpg"
            data-big="../assets/images/sf_transfer.jpg"
            data-title="Face-to-face transfer, circa 1950"
            data-description="Customers were allowed to receive currency at the San Francisco Fed's window through face-to-face transfers in the 1950s. For security reasons, this method was discontinued.&lt;span class=&lquotcaptionbar_credit&rquo&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
        <img
            src="../assets/images/sf_ibm_proofmachines.jpg"
            data-big="../assets/images/sf_ibm_proofmachines.jpg"
            data-title="IBM proof machines, 1951"
            data-description="These check processing machines were first installed at the San Francisco head office in 1944. By 1951, San Francisco had 37 machines in operation.&lt;span class=&lquotcaptionbar_credit&rquo&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
    </div>
</div>
<p class="clearfix"></p>

3-2.2 Gallery 2 - Light with Captions

Light gray background with descriptive text or captions.

$1 Note

Ad vivendo

Has ne cetero persius vocibus. Nam minim civibus moderatius te. Nullam accusamus sadipscing ad duo, vim ad choro homero, ius ut aperiam adolescens. Eum cu delectus consulatu.

$2 Note

Usu ut augue

Quo velit cetero menandri no, agam disputando eos ex. Ea quidam labitur habemus mei, ius ea quis duis legendos, in vim nominavi disputando efficiantur. Et justo everti comprehensam has, tale tota pertinacia pro an.

$5 Note

Ad vivendo

Has ne cetero persius vocibus. Nam minim civibus moderatius te. Nullam accusamus sadipscing ad duo, vim ad choro homero, ius ut aperiam adolescens. Eum cu delectus consulatu.

$10 Note

Ad vivendo

Has ne cetero persius vocibus. Nam minim civibus moderatius te. Nullam accusamus sadipscing ad duo, vim ad choro homero, ius ut aperiam adolescens. Eum cu delectus consulatu.

$20 Note

Ad vivendo

Has ne cetero persius vocibus. Nam minim civibus moderatius te. Nullam accusamus sadipscing ad duo, vim ad choro homero, ius ut aperiam adolescens. Eum cu delectus consulatu.

$50 Note

Ad vivendo

Has ne cetero persius vocibus. Nam minim civibus moderatius te. Nullam accusamus sadipscing ad duo, vim ad choro homero, ius ut aperiam adolescens. Eum cu delectus consulatu.

$100 Note

Ad vivendo

Has ne cetero persius vocibus. Nam minim civibus moderatius te. Nullam accusamus sadipscing ad duo, vim ad choro homero, ius ut aperiam adolescens. Eum cu delectus consulatu.

$1 Note $2 Note $5 Note $10 Note $20 Note $50 Note $100 Note (redesigned)
<div class="page-currency">
  <div class="slideshow_large">
    <div class="slide_large" id="slide_large1">
      <img src="../assets/images/1_1963-Present_face_Web.jpg" alt="$1 Note" class="m-all">
      <p><strong>Ad vivendo</strong></p>
      <p>Has ne cetero persius vocibus. Nam minim civibus moderatius te. Nullam accusamus sadipscing ad duo, vim ad choro homero, ius ut aperiam adolescens. Eum cu delectus consulatu.</p>
    </div>
    <div class="slide_large" id="slide_large2">
      <img src="../assets/images/2_1976-Present_face_Web.jpg" alt="$2 Note" class="m-all">
      <p><strong>Usu ut augue</strong></p>
      <p>Quo velit cetero menandri no, agam disputando eos ex. Ea quidam labitur habemus mei, ius ea quis duis legendos, in vim nominavi disputando efficiantur. Et justo everti comprehensam has, tale tota pertinacia pro an.</p>
    </div>
    <div class="slide_large" id="slide_large3">
      <img src="../assets/images/5_2008-Present_face_Web.jpg" alt="$5 Note" class="m-all">
      <p><strong>Ad vivendo</strong></p>
      <p>Has ne cetero persius vocibus. Nam minim civibus moderatius te. Nullam accusamus sadipscing ad duo, vim ad choro homero, ius ut aperiam adolescens. Eum cu delectus consulatu.</p>
    </div>
    <div class="slide_large" id="slide_large4">
      <img src="../assets/images/10_2006-Present_face_Web.jpg" alt="$10 Note" class="m-all">
      <p><strong>Ad vivendo</strong></p>
      <p>Has ne cetero persius vocibus. Nam minim civibus moderatius te. Nullam accusamus sadipscing ad duo, vim ad choro homero, ius ut aperiam adolescens. Eum cu delectus consulatu.</p>
    </div>
    <div class="slide_large" id="slide_large5">
      <img src="../assets/images/20_2003-Present_face_Web.jpg" alt="$20 Note" class="m-all">
      <p><strong>Ad vivendo</strong></p>
      <p>Has ne cetero persius vocibus. Nam minim civibus moderatius te. Nullam accusamus sadipscing ad duo, vim ad choro homero, ius ut aperiam adolescens. Eum cu delectus consulatu.</p>
    </div>
    <div class="slide_large" id="slide_large6">
      <img src="../assets/images/50_2004-Present_face_Web.jpg" alt="$50 Note" class="m-all">
      <p><strong>Ad vivendo</strong></p>
      <p>Has ne cetero persius vocibus. Nam minim civibus moderatius te. Nullam accusamus sadipscing ad duo, vim ad choro homero, ius ut aperiam adolescens. Eum cu delectus consulatu.</p>
    </div>
    <div class="slide_large" id="slide_large8">
      <img src="../assets/images/100_NYI_face_Web.jpg" alt="$100 Note" class="m-all">
      <p><strong>Ad vivendo</strong></p>
      <p>Has ne cetero persius vocibus. Nam minim civibus moderatius te. Nullam accusamus sadipscing ad duo, vim ad choro homero, ius ut aperiam adolescens. Eum cu delectus consulatu.</p>
    </div>
  </div>
  <div class="slideshow_thumb desktop">
    <span class="slide_thumb" id="slide1_thumb">
      <a href="#"><img src="../assets/images/1_1963-Present_face_Web-200x200.jpg" alt="$1 Note"></a>
    </span>
    <span class="slide_thumb" id="slide2_thumb">
      <a href="#"><img src="../assets/images/2_1976-Present_face_Web-200x200.jpg" alt="$2 Note"></a>
    </span>
    <span class="slide_thumb" id="slide3_thumb">
      <a href="#"><img src="../assets/images/5_2008-Present_face_Web-200x200.jpg" alt="$5 Note"></a>
    </span>
    <span class="slide_thumb" id="slide4_thumb">
      <a href="#"><img src="../assets/images/10_2006-Present_face_Web-200x200.jpg" alt="$10 Note"></a>
    </span>
    <span class="slide_thumb" id="slide5_thumb">
      <a href="#"><img src="../assets/images/20_2003-Present_face_Web-200x200.jpg" alt="$20 Note"></a>
    </span>
    <span class="slide_thumb" id="slide6_thumb">
      <a href="#"><img src="../assets/images/50_2004-Present_face_Web-200x200.jpg" alt="$50 Note"></a>
    </span>
    <span class="slide_thumb" id="slide8_thumb">
      <a href="#"><img src="../assets/images/100_NYI_face_Web-200x200.jpg" alt="$100 Note (redesigned)"></a>
    </span>
  </div>
</div>

3-2.3 Gallery 3 - Light no Captions

Light gray background with centered elements without text.

The Decline in R* in the U.S.
<div class="single-frbsf_speeches">
  <div class="slideshow_plain_large">
      <div class="slide_large active" id="slide_large1">
        <img src="../assets/images/Figure1.jpg" alt="The Decline in R* in the U.S." class="m-all">
      </div>
      <div class="slide_large" id="slide_large2" style="display: block;">
        <img src="../assets/images/Figure2.jpg" alt="" class="m-all">
      </div>
      <div class="slide_large" id="slide_large3" style="display: block;">
        <img src="../assets/images/Figure3.jpg" alt="" class="m-all">
      </div>
      <div class="slide_large" id="slide_large4" style="display: block;">
        <img src="../assets/images/Figure4.jpg" alt="" class="m-all">
      </div>
      <div class="slide_large" id="slide_large5" style="display: block;">
        <img src="../assets/images/Figure5.jpg" alt="" class="m-all">
      </div>
      <div class="slide_large" id="slide_large6" style="display: block;">
        <img src="../assets/images/Figure6.jpg" alt="" class="m-all">
      </div>
      <div class="slide_large" id="slide_large7" style="display: block;">
        <img src="../assets/images/Figure7.jpg" alt="" class="m-all">
      </div>
      <div class="slide_large" id="slide_large8" style="display: block;">
        <img src="../assets/images/Figure8.jpg" alt="" class="m-all">
      </div>
      <div class="slide_large" id="slide_large9" style="display: block;">
        <img src="../assets/images/Figure9.jpg" alt="" class="m-all">
      </div>
      <div class="slide_large" id="slide_large10" style="display: block;">
        <img src="../assets/images/Figure10.jpg" alt="" class="m-all">
      </div>
  </div>
  <div class="slideshow_plain_thumb desktop">
      <span class="slide_thumb" id="slide1_thumb">
        <a href="#"><img src="../assets/images/Figure1-200x150.jpg" alt=""></a>
      </span>
      <span class="slide_thumb" id="slide2_thumb">
        <a href="#"><img src="../assets/images/Figure2-200x150.jpg" alt=""></a>
      </span>
      <span class="slide_thumb" id="slide3_thumb">
        <a href="#"><img src="../assets/images/Figure3-200x150.jpg" alt=""></a>
      </span>
      <span class="slide_thumb" id="slide4_thumb">
        <a href="#"><img src="../assets/images/Figure4-200x150.jpg" alt=""></a>
      </span>
      <span class="slide_thumb" id="slide5_thumb">
        <a href="#"><img src="../assets/images/Figure5-200x150.jpg" alt=""></a>
      </span>
      <span class="slide_thumb" id="slide6_thumb">
        <a href="#"><img src="../assets/images/Figure6-200x150.jpg" alt=""></a>
      </span>
      <span class="slide_thumb" id="slide7_thumb">
        <a href="#"><img src="../assets/images/Figure7-200x150.jpg" alt=""></a>
      </span>
      <span class="slide_thumb" id="slide8_thumb">
        <a href="#"><img src="../assets/images/Figure8-200x150.jpg" alt=""></a>
      </span>
      <span class="slide_thumb" id="slide9_thumb">
        <a href="#"><img src="../assets/images/Figure9-200x150.jpg" alt=""></a>
      </span>
      <span class="slide_thumb" id="slide10_thumb">
        <a href="#"><img src="../assets/images/Figure10-200x150.jpg" alt=""></a>
      </span>
  </div>
</div>

3-3 Dropdowns

Main menu navigation.

<header class="header" role="banner" itemscope="" itemtype="http://schema.org/WPHeader">
    <div class="header-img">
        <div class="inner-header-wrap wrap">
            <div id="inner-header" class="wrap cf">
                <div class="desktop">
                    <div id="nav-btn" class="m-all t-3of12 d-3of12">
                        <span id="nav-btn-show" tabindex="0"><img src="http://www.frbsf.org/wp-content/themes/sf_fed_rebrand_2015/library/images/icons/icon-menu.png" width="27" height="23" alt="Show Menu"> Menu</span>
                        <nav id="nav-menu">
                            <span id="nav-btn-hide"><img src="http://www.frbsf.org/wp-content/themes/sf_fed_rebrand_2015/library/images/icons/icon-menu.png" width="27" height="23" alt="Hide Menu"> Menu</span>
                            <p><strong><a id="nav-menu-home-desktop" href="/?utm_source=frbsf-nav-menu&amp;utm_medium=frbsf&amp;utm_campaign=rebrand">Home</a></strong></p>
                            <p><strong><a id="nav-menu-er-home-desktop" href="/economic-research/">Research</a></strong> <a href="#" class="hideshow_link"><span>+</span></a></p>
                            <div class="hideshow_subnav hide" style="padding-left:1em">
                                <p><a id="nav-menu-er-economists-desktop" href="/economic-research/economists/">Our Economists</a></p>
                                <p><a id="nav-menu-er-publications-desktop" href="/economic-research/publications/">Publications</a></p>
                                <p><a id="nav-menu-er-indicators-desktop" href="/economic-research/indicators-data/">Indicators and Data</a></p>
                                <p><a id="nav-menu-er-cpbs-desktop" href="/economic-research/center-pacific-basin-studies/">Center for Pacific Basin Studies</a></p>
                                <p><a id="nav-menu-er-events-desktop" href="/economic-research/events/">Past Conferences</a></p>
                                <p><a id="nav-menu-er-about-desktop" href="/economic-research/management/">About Us</a></p>
                            </div>
                            <p><strong><a id="nav-menu-bsr-home-desktop" href="/banking/">Banking</a></strong> <a href="#" class="hideshow_link"><span>+</span></a></p>
                            <div class="hideshow_subnav hide" style="padding-left:1em">
                                <p><a id="nav-menu-bsr-supervision-desktop" href="/banking/regulation/">Supervision and Regulation</a></p>
                                <p><a id="nav-menu-bsr-discount-desktop" href="/banking/discount-window/">Discount Window</a></p>
                                <p><a id="nav-menu-bsr-data-desktop" href="/banking/data/">Data</a></p>
                                <p><a id="nav-menu-bsr-publications-desktop" href="/banking/publications/">Publications</a></p>
                                <p><a id="nav-menu-bsr-programs-desktop" href="/banking/programs/">Banking Programs</a></p>
                                <p><a id="nav-menu-bsr-programs-desktop" href="/banking/asia-program/">Asia Program</a></p>
                                <p><a id="nav-menu-bsr-fintech-desktop" href="/banking/fintech/">Fintech</a></p>
                                <p><a id="nav-menu-bsr-about-desktop" href="/banking/about/">About</a></p>
                            </div>
                            <p><strong><a id="nav-menu-ed-home-desktop" href="/education/">Education</a></strong> <a href="#" class="hideshow_link"><span>+</span></a></p>
                            <div class="hideshow_subnav hide" style="padding-left:1em">
                                <p><a id="nav-menu-ed-teacher-desktop" href="/education/teacher-resources/">Teacher Resources</a></p>
                                <p><a id="nav-menu-ed-activities-desktop" href="/education/activities/">Activities</a></p>
                                <p><a id="nav-menu-ed-events-desktop" href="/education/events/">Events</a></p>
                                <p><a id="nav-menu-ed-about-desktop" href="/education/about/">About</a></p>
                            </div>
                            <p><strong><a id="nav-menu-cd-home-desktop" href="/community-development/">Community Development</a></strong> <a href="#" class="hideshow_link"><span>+</span></a></p>
                            <div class="hideshow_subnav hide" style="padding-left:1em">
                                <p><a id="nav-menu-cd-publications-desktop" href="/community-development/publications/">Publications</a></p>
                                <p><a id="nav-menu-cd-data-desktop" href="/community-development/data/">Data</a></p>
                                <p><a id="nav-menu-cd-events-desktop" href="/community-development/events/">Events</a></p>
                                <p><a id="nav-menu-cd-initiatives-desktop" href="/community-development/initiatives/">Initiatives</a></p>
                                <p><a id="nav-menu-cd-blog-desktop" href="/community-development/blog/">Blog</a></p>
                                <p><a id="nav-menu-cd-about-desktop" href="/community-development/about/">About</a></p>
                            </div>
                            <p><strong><a id="nav-menu-cash-home-desktop" href="/cash/">Cash</a></strong> <a href="#" class="hideshow_link"><span>+</span></a></p>
                            <div class="hideshow_subnav hide" style="padding-left:1em">
                                <p><a id="nav-menu-cash-use-desktop" href="/cash/cash-how-we-use-it/">Cash and How We Use It</a></p>
                                <p><a id="nav-menu-cash-lifecycle-desktop" href="/cash/cash-lifecycle/">The Cash Lifecycle</a></p>
                                <p><a id="nav-menu-cash-publications-desktop" href="/cash/publications/">Publications</a></p>
                                <p><a id="nav-menu-cash-about-desktop" href="/cash/federal-reserve-role-cash-distribution/">About</a></p>
                            </div>
                            <p><strong><a id="nav-menu-ourdistrict-home-desktop" href="/our-district/">Our District</a></strong> <a href="#" class="hideshow_link"><span>+</span></a></p>
                            <div class="hideshow_subnav hide" style="padding-left:1em">
                                <p><a id="nav-menu-ourdistrict-about-desktop" href="/our-district/about/">About</a></p>
                                <p><a id="nav-menu-ourdistrict-leadership-desktop" href="/our-district/leadership/">Leadership</a></p>
                                <p><a id="nav-menu-ourdistrict-careers-desktop" href="/our-district/careers/">Careers</a></p>
                                <p><a id="nav-menu-ourdistrict-press-desktop" href="/our-district/press/">Press</a></p>
                                <p><a id="nav-menu-ourdistrict-unreserved-desktop" href="/our-district/about/unreserved/">#unreserved</a></p>
                                <p><a id="nav-menu-ourdistrict-subscriptions-desktop" href="/our-district/subscriptions/">Subscriptions</a></p>
                            </div>
                            <p><strong>The Fed System</strong> <a href="#" class="hideshow_link"><span>+</span></a></p>
                            <div class="hideshow_subnav hide" style="padding-left:1em">
                                <p><a id="nav-menu-fedsystem-board-desktop" href="http://www.federalreserve.gov/" class="offsite-icon-img-nav" target="_blank" rel="noopener">Board of Governors</a></p>
                                <p><a id="nav-menu-fedsystem-atlanta-desktop" href="http://www.frbatlanta.org/" class="offsite-icon-img-nav" target="_blank" rel="noopener">Atlanta</a></p>
                                <p><a id="nav-menu-fedsystem-boston-desktop" href="http://www.bos.frb.org/" class="offsite-icon-img-nav" target="_blank" rel="noopener">Boston</a></p>
                                <p><a id="nav-menu-fedsystem-chicago-desktop" href="http://www.chicagofed.org/" class="offsite-icon-img-nav" target="_blank" rel="noopener">Chicago</a></p>
                                <p><a id="nav-menu-fedsystem-cleveland-desktop" href="http://www.clevelandfed.org/" class="offsite-icon-img-nav" target="_blank" rel="noopener">Cleveland</a></p>
                                <p><a id="nav-menu-fedsystem-dallas-desktop" href="http://www.dallasfed.org/" class="offsite-icon-img-nav" target="_blank" rel="noopener">Dallas</a></p>
                                <p><a id="nav-menu-fedsystem-kansascity-desktop" href="http://www.kansascityfed.org/" class="offsite-icon-img-nav" target="_blank" rel="noopener">Kansas City</a></p>
                                <p><a id="nav-menu-fedsystem-minneapolis-desktop" href="http://www.minneapolisfed.org/" class="offsite-icon-img-nav" target="_blank" rel="noopener">Minneapolis</a></p>
                                <p><a id="nav-menu-fedsystem-newyork-desktop" href="http://www.newyorkfed.org/" class="offsite-icon-img-nav" target="_blank" rel="noopener">New York</a></p>
                                <p><a id="nav-menu-fedsystem-philadelphia-desktop" href="http://www.philadelphiafed.org/" class="offsite-icon-img-nav" target="_blank" rel="noopener">Philadelphia</a></p>
                                <p><a id="nav-menu-fedsystem-richmond-desktop" href="http://www.richmondfed.org/" class="offsite-icon-img-nav" target="_blank" rel="noopener">Richmond</a></p>
                                <p><a id="nav-menu-fedsystem-stlouis-desktop" href="http://www.stlouisfed.org/" class="offsite-icon-img-nav" target="_blank" rel="noopener">St. Louis</a></p>
                            </div>
                        </nav>
                    </div>
                    <div id="logo-org" class="m-all t-6of12 d-6of12">
                        <a id="logo-home-desktop" href="/?utm_source=frbsf-logo&amp;utm_medium=frbsf&amp;utm_campaign=rebrand">
                            <img src="http://www.frbsf.org/wp-content/themes/sf_fed_rebrand_2015/library/images/logo-org.png" width="83" height="57" alt="SF Fed"><br>
                            <span>Federal Reserve Bank of San Francisco</span>
                        </a>
                    </div>
                    <div id="search-site" class="m-all t-3of12 d-3of12">
                        <img src="http://www.frbsf.org/wp-content/themes/sf_fed_rebrand_2015/library/images/search-icon.png" alt="Search SF Fed">
                        <form class="search-form" action="/search/" id="search" method="get">
                            <input type="text" placeholder="Search SF Fed" id="s" name="q" class="field" value="">
                        </form>
                    </div>
                </div>
                <div class="mobile">
                    <div id="logo-org" class="m-all t-8of12 d-8of12 t-o-2of12 d-o-2of12">
                        <a id="logo-home-mobile" href="/">
                            <img src="http://www.frbsf.org/wp-content/themes/sf_fed_rebrand_2015/library/images/logo-org.png" width="83" height="57" alt="SF Fed"><br>
                            <span>Federal Reserve Bank of San Francisco</span>
                        </a>
                    </div>
                    <div id="nav-btn" class="m-all t-2of12 d-2of12">
                        <span id="nav-btn-show" tabindex="0"><img src="http://www.frbsf.org/wp-content/themes/sf_fed_rebrand_2015/library/images/icons/icon-menu.png" width="27" height="23" alt="Show Menu"> Menu</span>
                        <nav id="nav-menu">
                            <span id="nav-btn-hide"><img src="http://www.frbsf.org/wp-content/themes/sf_fed_rebrand_2015/library/images/icons/icon-menu.png" width="27" height="23" alt="Hide Menu"> Menu</span>
                            <p><strong><a id="nav-menu-home-mobile" href="/?utm_source=frbsf-nav-menu&amp;utm_medium=frbsf&amp;utm_campaign=rebrand">Home</a></strong></p>
                            <p><strong><a id="nav-menu-er-home-mobile" href="/economic-research/">Research</a></strong> <a href="#" class="hideshow_link"><span>+</span></a></p>
                            <div class="hideshow_subnav hide" style="padding-left:1em">
                                <p><a id="nav-menu-er-economists-mobile" href="/economic-research/economists/">Our Economists</a></p>
                                <p><a id="nav-menu-er-publications-mobile" href="/economic-research/publications/">Publications</a></p>
                                <p><a id="nav-menu-er-indicators-mobile" href="/economic-research/indicators-data/">Indicators and Data</a></p>
                                <p><a id="nav-menu-er-cpbs-mobile" href="/economic-research/center-pacific-basin-studies/">Center for Pacific Basin Studies</a></p>
                                <p><a id="nav-menu-er-events-mobile" href="/economic-research/events/">Past Conferences</a></p>
                                <p><a id="nav-menu-er-about-mobile" href="/economic-research/management/">About Us</a></p>
                            </div>
                            <p><strong><a id="nav-menu-bsr-home-mobile" href="/banking/">Banking</a></strong> <a href="#" class="hideshow_link"><span>+</span></a></p>
                            <div class="hideshow_subnav hide" style="padding-left:1em">
                                <p><a id="nav-menu-bsr-supervision-mobile" href="/banking/regulation/">Supervision and Regulation</a></p>
                                <p><a id="nav-menu-bsr-discount-mobile" href="/banking/discount-window/">Discount Window</a></p>
                                <p><a id="nav-menu-bsr-data-mobile" href="/banking/data/">Data</a></p>
                                <p><a id="nav-menu-bsr-publications-mobile" href="/banking/publications/">Publications</a></p>
                                <p><a id="nav-menu-bsr-programs-mobile" href="/banking/programs/">Banking Programs</a></p>
                                <p><a id="nav-menu-bsr-programs-mobile" href="/banking/asia-program/">Asia Program</a></p>
                                <p><a id="nav-menu-bsr-fintech-mobile" href="/banking/fintech/">Fintech</a></p>
                                <p><a id="nav-menu-bsr-about-mobile" href="/banking/about/">About</a></p>
                            </div>
                            <p><strong><a id="nav-menu-ed-home-mobile" href="/education/">Education</a></strong> <a href="#" class="hideshow_link"><span>+</span></a></p>
                            <div class="hideshow_subnav hide" style="padding-left:1em">
                                <p><a id="nav-menu-ed-teacher-mobile" href="/education/teacher-resources/">Teacher Resources</a></p>
                                <p><a id="nav-menu-ed-activities-mobile" href="/education/activities/">Activities</a></p>
                                <p><a id="nav-menu-ed-events-mobile" href="/education/events/">Events</a></p>
                                <p><a id="nav-menu-ed-about-mobile" href="/education/about/">About</a></p>
                            </div>
                            <p><strong><a id="nav-menu-cd-home-mobile" href="/community-development/">Community Development</a></strong> <a href="#" class="hideshow_link"><span>+</span></a></p>
                            <div class="hideshow_subnav hide" style="padding-left:1em">
                                <p><a id="nav-menu-cd-publications-mobile" href="/community-development/publications/">Publications</a></p>
                                <p><a id="nav-menu-cd-data-mobile" href="/community-development/data/">Data</a></p>
                                <p><a id="nav-menu-cd-events-mobile" href="/community-development/events/">Events</a></p>
                                <p><a id="nav-menu-cd-initiatives-mobile" href="/community-development/initiatives/">Initiatives</a></p>
                                <p><a id="nav-menu-cd-blog-mobile" href="/community-development/blog/">Blog</a></p>
                                <p><a id="nav-menu-cd-about-mobile" href="/community-development/about/">About</a></p>
                            </div>
                            <p><strong><a id="nav-menu-cash-home-mobile" href="/cash/">Cash</a></strong> <a href="#" class="hideshow_link"><span>+</span></a></p>
                            <div class="hideshow_subnav hide" style="padding-left:1em">
                                <p><a id="nav-menu-cash-use-mobile" href="/cash/cash-how-we-use-it/">Cash and How We Use It</a></p>
                                <p><a id="nav-menu-cash-lifecycle-mobile" href="/cash/cash-lifecycle/">The Cash Lifecycle</a></p>
                                <p><a id="nav-menu-cash-publications-mobile" href="/cash/publications/">Publications</a></p>
                                <p><a id="nav-menu-cash-about-mobile" href="/cash/federal-reserve-role-cash-distribution/">About</a></p>
                            </div>
                            <p><strong><a id="nav-menu-ourdistrict-home-mobile" href="/our-district/">Our District</a></strong> <a href="#" class="hideshow_link"><span>+</span></a></p>
                            <div class="hideshow_subnav hide" style="padding-left:1em">
                                <p><a id="nav-menu-ourdistrict-about-mobile" href="/our-district/about/">About</a></p>
                                <p><a id="nav-menu-ourdistrict-leadership-mobile" href="/our-district/leadership/">Leadership</a></p>
                                <p><a id="nav-menu-ourdistrict-careers-mobile" href="/our-district/careers/">Careers</a></p>
                                <p><a id="nav-menu-ourdistrict-press-mobile" href="/our-district/press/">Press</a></p>
                                <p><a id="nav-menu-ourdistrict-unreserved-mobile" href="/our-district/about/unreserved/">#unreserved</a></p>
                                <p><a id="nav-menu-ourdistrict-subscriptions-mobile" href="/our-district/subscriptions/">Subscriptions</a></p>
                            </div>
                            <p><strong>The Fed System</strong> <a href="#" class="hideshow_link"><span>+</span></a></p>
                            <div class="hideshow_subnav hide" style="padding-left:1em">
                                <p><a id="nav-menu-fedsystem-board-mobile" href="http://www.federalreserve.gov/" class="offsite-icon-img-nav" target="_blank">Board of Governors</a></p>
                                <p><a id="nav-menu-fedsystem-atlanta-mobile" href="http://www.frbatlanta.org/" class="offsite-icon-img-nav" target="_blank">Atlanta</a></p>
                                <p><a id="nav-menu-fedsystem-boston-mobile" href="http://www.bos.frb.org/" class="offsite-icon-img-nav" target="_blank">Boston</a></p>
                                <p><a id="nav-menu-fedsystem-chicago-mobile" href="http://www.chicagofed.org/" class="offsite-icon-img-nav" target="_blank">Chicago</a></p>
                                <p><a id="nav-menu-fedsystem-cleveland-mobile" href="http://www.clevelandfed.org/" class="offsite-icon-img-nav" target="_blank">Cleveland</a></p>
                                <p><a id="nav-menu-fedsystem-dallas-mobile" href="http://www.dallasfed.org/" class="offsite-icon-img-nav" target="_blank">Dallas</a></p>
                                <p><a id="nav-menu-fedsystem-kansascity-mobile" href="http://www.kansascityfed.org/" class="offsite-icon-img-nav" target="_blank">Kansas City</a></p>
                                <p><a id="nav-menu-fedsystem-minneapolis-mobile" href="http://www.minneapolisfed.org/" class="offsite-icon-img-nav" target="_blank">Minneapolis</a></p>
                                <p><a id="nav-menu-fedsystem-newyork-mobile" href="http://www.newyorkfed.org/" class="offsite-icon-img-nav" target="_blank">New York</a></p>
                                <p><a id="nav-menu-fedsystem-philadelphia-mobile" href="http://www.philadelphiafed.org/" class="offsite-icon-img-nav" target="_blank">Philadelphia</a></p>
                                <p><a id="nav-menu-fedsystem-richmond-mobile" href="http://www.richmondfed.org/" class="offsite-icon-img-nav" target="_blank">Richmond</a></p>
                                <p><a id="nav-menu-fedsystem-stlouis-mobile" href="http://www.stlouisfed.org/" class="offsite-icon-img-nav" target="_blank">St. Louis</a></p>
                            </div>
                        </nav>
                    </div>
                    <div id="search-site-mobile" class="">
                        <img src="http://www.frbsf.org/wp-content/themes/sf_fed_rebrand_2015/library/images/search-icon.png" alt="Search SF Fed">
                        <form class="search-form" action="/search/" id="search" method="get">
                            <input type="text" placeholder="Search SF Fed" id="s" name="q" class="field" value="">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>