Changeset 96417 in spip-zone


Ignore:
Timestamp:
Apr 3, 2016, 3:34:07 PM (5 years ago)
Author:
spip.franck@…
Message:

Remplacement d'espace par des tab et indentation pour être un peu plus conforme avec http://www.spip.net/fr_article3497.html#regles_codage

Location:
_plugins_/foundation_6/trunk
Files:
19 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/foundation_6/trunk/content/foundation-test.html

    r93810 r96417  
    1 
    21<h1 class="docs-page-title">Kitchen Sink</h1>
    32
     
    98<div class="row">
    109
    11   <div class="large-9 columns" id="docs">
    12 
    13         <h2 id="accordion" class="docs-heading" data-magellan-target="accordion"><a class="docs-heading-icon" href="#accordion"></a>Accordion</h2><div class="docs-code" data-docs-code></div>
    14 
    15           <div class="docs-code-live"><ul class="accordion" data-accordion role="tablist">
    16                 <li class="accordion-item is-active">
    17                   <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
    18                   <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
    19                   <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
    20                   <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
    21                         Panel 1. Lorem ipsum dolor
    22                   </div>
    23                 </li>
    24                 <li class="accordion-item">
    25                   <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
    26                   <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
    27                   <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
    28                   <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
    29                         Panel 2. Lorem ipsum dolor
    30                   </div>
    31                 </li>
    32                 <li class="accordion-item">
    33                   <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
    34                   <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
    35                   <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
    36                   <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
    37                         Panel 3. Lorem ipsum dolor
    38                   </div>
    39                 </li>
    40           </ul></div><hr>
    41           <h2 id="accordion-menu" class="docs-heading" data-magellan-target="accordion-menu"><a class="docs-heading-icon" href="#accordion-menu"></a>Accordion Menu</h2><div class="docs-code" data-docs-code></div>
    42 
    43                 <div class="docs-code-live"><ul class="vertical menu" data-accordion-menu>
    44                   <li>
    45                         <a href="#">Item 1</a>
    46                         <ul class="menu vertical nested is-active">
    47                           <li>
    48                                 <a href="#">Item 1A</a>
    49                                 <ul class="menu vertical nested">
    50                                   <li><a href="#">Item 1Ai</a></li>
    51                                   <li><a href="#">Item 1Aii</a></li>
    52                                   <li><a href="#">Item 1Aiii</a></li>
    53                                 </ul>
    54                           </li>
    55                           <li><a href="#">Item 1B</a></li>
    56                           <li><a href="#">Item 1C</a></li>
    57                         </ul>
    58                   </li>
    59                   <li>
    60                         <a href="#">Item 2</a>
    61                         <ul class="menu vertical nested">
    62                           <li><a href="#">Item 2A</a></li>
    63                           <li><a href="#">Item 2B</a></li>
    64                         </ul>
    65                   </li>
    66                   <li><a href="#">Item 3</a></li>
    67                 </ul></div><hr>
    68                 <h2 id="badge" class="docs-heading" data-magellan-target="badge"><a class="docs-heading-icon" href="#badge"></a>Badge</h2><div class="docs-code" data-docs-code></div>
    69 
    70                   <div class="docs-code-live"><span class="secondary badge">2</span>
     10        <div class="large-9 columns" id="docs">
     11
     12                <h2 id="accordion" class="docs-heading" data-magellan-target="accordion"><a class="docs-heading-icon" href="#accordion"></a>Accordion</h2>
     13                <div class="docs-code" data-docs-code></div>
     14
     15                <div class="docs-code-live">
     16                        <ul class="accordion" data-accordion role="tablist">
     17                                <li class="accordion-item is-active">
     18                                        <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
     19                                        <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
     20                                        <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
     21                                        <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
     22                                                Panel 1. Lorem ipsum dolor
     23                                        </div>
     24                                </li>
     25                                <li class="accordion-item">
     26                                        <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
     27                                        <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
     28                                        <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
     29                                        <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
     30                                                Panel 2. Lorem ipsum dolor
     31                                        </div>
     32                                </li>
     33                                <li class="accordion-item">
     34                                        <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
     35                                        <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
     36                                        <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
     37                                        <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
     38                                                Panel 3. Lorem ipsum dolor
     39                                        </div>
     40                                </li>
     41                        </ul>
     42                </div><hr>
     43                <h2 id="accordion-menu" class="docs-heading" data-magellan-target="accordion-menu"><a class="docs-heading-icon" href="#accordion-menu"></a>Accordion Menu</h2>
     44                <div class="docs-code" data-docs-code></div>
     45
     46                <div class="docs-code-live">
     47                        <ul class="vertical menu" data-accordion-menu>
     48                                <li>
     49                                        <a href="#">Item 1</a>
     50                                        <ul class="menu vertical nested is-active">
     51                                                <li>
     52                                                        <a href="#">Item 1A</a>
     53                                                        <ul class="menu vertical nested">
     54                                                                <li><a href="#">Item 1Ai</a></li>
     55                                                                <li><a href="#">Item 1Aii</a></li>
     56                                                                <li><a href="#">Item 1Aiii</a></li>
     57                                                        </ul>
     58                                                </li>
     59                                                <li><a href="#">Item 1B</a></li>
     60                                                <li><a href="#">Item 1C</a></li>
     61                                        </ul>
     62                                </li>
     63                                <li>
     64                                        <a href="#">Item 2</a>
     65                                        <ul class="menu vertical nested">
     66                                                <li><a href="#">Item 2A</a></li>
     67                                                <li><a href="#">Item 2B</a></li>
     68                                        </ul>
     69                                </li>
     70                                <li><a href="#">Item 3</a></li>
     71                        </ul>
     72                </div><hr>
     73                <h2 id="badge" class="docs-heading" data-magellan-target="badge"><a class="docs-heading-icon" href="#badge"></a>Badge</h2>
     74                <div class="docs-code" data-docs-code></div>
     75
     76                <div class="docs-code-live">
     77                        <span class="secondary badge">2</span>
    7178                        <span class="success badge">3</span>
    7279                        <span class="alert badge">A</span>
    73                         <span class="warning badge">B</span></div><hr>
    74                         <h2 id="breadcrumbs" class="docs-heading" data-magellan-target="breadcrumbs"><a class="docs-heading-icon" href="#breadcrumbs"></a>Breadcrumbs</h2><div class="docs-code" data-docs-code></div>
    75 
    76                           <div class="docs-code-live"><nav aria-label="You are here:" role="navigation">
     80                        <span class="warning badge">B</span>
     81                </div><hr>
     82                <h2 id="breadcrumbs" class="docs-heading" data-magellan-target="breadcrumbs"><a class="docs-heading-icon" href="#breadcrumbs"></a>Breadcrumbs</h2>
     83                <div class="docs-code" data-docs-code></div>
     84
     85                <div class="docs-code-live">
     86                        <nav aria-label="You are here:" role="navigation">
    7787                                <ul class="breadcrumbs">
    78                                   <li><a href="#">Home</a></li>
    79                                   <li><a href="#">Features</a></li>
    80                                   <li class="disabled">Gene Splicing</li>
    81                                   <li>
    82                                         <span class="show-for-sr">Current: </span> Cloning
    83                                   </li>
     88                                        <li><a href="#">Home</a></li>
     89                                        <li><a href="#">Features</a></li>
     90                                        <li class="disabled">Gene Splicing</li>
     91                                        <li>
     92                                                <span class="show-for-sr">Current: </span> Cloning
     93                                        </li>
    8494                                </ul>
    85                           </nav></div><hr>
    86                           <h2 id="button" class="docs-heading" data-magellan-target="button"><a class="docs-heading-icon" href="#button"></a>Button</h2><div class="docs-code" data-docs-code></div>
    87 
    88                                 <div class="docs-code-live"><!-- Anchors (links) -->
    89 
    90                                   #BOUTON_ACTION{\#BOUTON_ACTION, #, expanded button ajax, prout}
    91 
    92                                   <a href="about.html" class="button">Learn More</a>
    93                                   <a href="#features" class="button">View All Features</a>
    94 
    95                                   <!-- Buttons (actions) -->
    96 
    97                                   <button type="button" class="success button">Save</button>
    98                                   <button type="button" class="alert button">Delete</button>
    99 
    100                                   <a class="tiny button" href="#">So Tiny</a>
    101                                   <a class="small button" href="#">So Small</a>
    102                                   <a class="large button" href="#">So Large</a>
    103                                   <a class="expanded button" href="#">Such Expand</a>
    104 
    105                                   <div class="button-group">
    106                                         <a class="button">One</a>
    107                                         <a class="button">Two</a>
    108                                         <a class="button">Three</a>
    109                                   </div></div><hr>
    110                                   <h2 id="callout" class="docs-heading" data-magellan-target="callout"><a class="docs-heading-icon" href="#callout"></a>Callout</h2><div class="docs-code" data-docs-code></div>
    111 
    112                                         <div class="docs-code-live"><div class="callout">
    113                                           <h5>This is a callout.</h5>
    114                                           <p>It has an easy to override visual style, and is appropriately subdued.</p>
    115                                           <a href="#">It's dangerous to go alone, take this.</a>
    116                                         </div>
    117 
    118                                         <div class="callout secondary">
    119                                           <h5>This is a secondary callout</h5>
    120                                           <p>It has an easy to override visual style, and is appropriately subdued.</p>
    121                                           <a href="#">It's dangerous to go alone, take this.</a>
    122                                         </div>
    123 
    124                                         <div class="callout success">
    125                                           <h5>This is a success callout</h5>
    126                                           <p>It has an easy to override visual style, and is appropriately subdued.</p>
    127                                           <a href="#">It's dangerous to go alone, take this.</a>
    128                                         </div>
    129 
    130                                         <div class="callout warning">
    131                                           <h5>This is a warning callout</h5>
    132                                           <p>It has an easy to override visual style, and is appropriately subdued.</p>
    133                                           <a href="#">It's dangerous to go alone, take this.</a>
    134                                         </div>
    135 
    136                                         <div class="callout alert">
    137                                           <h5>This is an alert callout</h5>
    138                                           <p>It has an easy to override visual style, and is appropriately subdued.</p>
    139                                           <a href="#">It's dangerous to go alone, take this.</a>
    140                                         </div></div><hr>
    141                                         <h2 id="close-button" class="docs-heading" data-magellan-target="close-button"><a class="docs-heading-icon" href="#close-button"></a>Close Button</h2><div class="docs-code" data-docs-code></div>
    142 
    143                                           <div class="docs-code-live"><div class="callout">
    144                                                 <button class="close-button" aria-label="Close alert" type="button">
    145                                                   <span aria-hidden="true">&times;</span>
    146                                                 </button>
    147                                                 <p>This is a static close button example.</p>
    148                                           </div></div><hr>
    149                                           <h2 id="drilldown-menu" class="docs-heading" data-magellan-target="drilldown-menu"><a class="docs-heading-icon" href="#drilldown-menu"></a>Drilldown Menu</h2><div class="docs-code" data-docs-code></div>
    150 
    151                                                 <div class="docs-code-live"><ul class="vertical menu" data-drilldown style="width: 200px" id="m1">
    152                                                   <li>
    153                                                         <a href="#">Item 1</a>
    154                                                         <ul class="vertical menu" id="m2">
    155                                                           <li>
    156                                                                 <a href="#">Item 1A</a>
    157                                                                 <ul class="vertical menu" id="m3">
    158                                                                   <li><a href="#">Item 1Aa</a></li>
    159                                                                   <li><a href="#">Item 1Ba</a></li>
    160                                                                   <li><a href="#">Item 1Ca</a></li>
    161                                                                   <li><a href="#">Item 1Da</a></li>
    162                                                                   <li><a href="#">Item 1Ea</a></li>
    163                                                                 </ul>
    164                                                           </li>
    165                                                           <li><a href="#">Item 1B</a></li>
    166                                                           <li><a href="#">Item 1C</a></li>
    167                                                           <li><a href="#">Item 1D</a></li>
    168                                                           <li><a href="#">Item 1E</a></li>
     95                        </nav>
     96                </div><hr>
     97                <h2 id="button" class="docs-heading" data-magellan-target="button"><a class="docs-heading-icon" href="#button"></a>Button</h2>
     98                <div class="docs-code" data-docs-code></div>
     99
     100                <div class="docs-code-live"><!-- Anchors (links) -->
     101
     102                        #BOUTON_ACTION{\#BOUTON_ACTION, #, expanded button ajax, prout}
     103
     104                        <a href="about.html" class="button">Learn More</a>
     105                        <a href="#features" class="button">View All Features</a>
     106
     107                        <!-- Buttons (actions) -->
     108
     109                        <button type="button" class="success button">Save</button>
     110                        <button type="button" class="alert button">Delete</button>
     111
     112                        <a class="tiny button" href="#">So Tiny</a>
     113                        <a class="small button" href="#">So Small</a>
     114                        <a class="large button" href="#">So Large</a>
     115                        <a class="expanded button" href="#">Such Expand</a>
     116
     117                        <div class="button-group">
     118                                <a class="button">One</a>
     119                                <a class="button">Two</a>
     120                                <a class="button">Three</a>
     121                        </div>
     122                </div><hr>
     123                <h2 id="callout" class="docs-heading" data-magellan-target="callout"><a class="docs-heading-icon" href="#callout"></a>Callout</h2>
     124                <div class="docs-code" data-docs-code></div>
     125
     126                <div class="docs-code-live">
     127                        <div class="callout">
     128                                <h5>This is a callout.</h5>
     129                                <p>It has an easy to override visual style, and is appropriately subdued.</p>
     130                                <a href="#">It's dangerous to go alone, take this.</a>
     131                        </div>
     132
     133                        <div class="callout secondary">
     134                                <h5>This is a secondary callout</h5>
     135                                <p>It has an easy to override visual style, and is appropriately subdued.</p>
     136                                <a href="#">It's dangerous to go alone, take this.</a>
     137                        </div>
     138
     139                        <div class="callout success">
     140                                <h5>This is a success callout</h5>
     141                                <p>It has an easy to override visual style, and is appropriately subdued.</p>
     142                                <a href="#">It's dangerous to go alone, take this.</a>
     143                        </div>
     144
     145                        <div class="callout warning">
     146                                <h5>This is a warning callout</h5>
     147                                <p>It has an easy to override visual style, and is appropriately subdued.</p>
     148                                <a href="#">It's dangerous to go alone, take this.</a>
     149                        </div>
     150
     151                        <div class="callout alert">
     152                                <h5>This is an alert callout</h5>
     153                                <p>It has an easy to override visual style, and is appropriately subdued.</p>
     154                                <a href="#">It's dangerous to go alone, take this.</a>
     155                        </div>
     156                </div><hr>
     157                <h2 id="close-button" class="docs-heading" data-magellan-target="close-button"><a class="docs-heading-icon" href="#close-button"></a>Close Button</h2>
     158                <div class="docs-code" data-docs-code></div>
     159
     160                <div class="docs-code-live">
     161                        <div class="callout">
     162                                <button class="close-button" aria-label="Close alert" type="button">
     163                                        <span aria-hidden="true">&times;</span>
     164                                </button>
     165                                <p>This is a static close button example.</p>
     166                        </div>
     167                </div><hr>
     168                <h2 id="drilldown-menu" class="docs-heading" data-magellan-target="drilldown-menu"><a class="docs-heading-icon" href="#drilldown-menu"></a>Drilldown Menu</h2>
     169                <div class="docs-code" data-docs-code></div>
     170
     171                <div class="docs-code-live">
     172                        <ul class="vertical menu" data-drilldown style="width: 200px" id="m1">
     173                                <li>
     174                                        <a href="#">Item 1</a>
     175                                        <ul class="vertical menu" id="m2">
     176                                                <li>
     177                                                        <a href="#">Item 1A</a>
     178                                                        <ul class="vertical menu" id="m3">
     179                                                                <li><a href="#">Item 1Aa</a></li>
     180                                                                <li><a href="#">Item 1Ba</a></li>
     181                                                                <li><a href="#">Item 1Ca</a></li>
     182                                                                <li><a href="#">Item 1Da</a></li>
     183                                                                <li><a href="#">Item 1Ea</a></li>
    169184                                                        </ul>
    170                                                   </li>
    171                                                   <li>
    172                                                         <a href="#">Item 2</a>
    173                                                         <ul class="vertical menu">
    174                                                           <li><a href="#">Item 2A</a></li>
    175                                                           <li><a href="#">Item 2B</a></li>
    176                                                           <li><a href="#">Item 2C</a></li>
    177                                                           <li><a href="#">Item 2D</a></li>
    178                                                           <li><a href="#">Item 2E</a></li>
    179                                                         </ul>
    180                                                   </li>
    181                                                   <li>
    182                                                         <a href="#">Item 3</a>
    183                                                         <ul class="vertical menu">
    184                                                           <li><a href="#">Item 3A</a></li>
    185                                                           <li><a href="#">Item 3B</a></li>
    186                                                           <li><a href="#">Item 3C</a></li>
    187                                                           <li><a href="#">Item 3D</a></li>
    188                                                           <li><a href="#">Item 3E</a></li>
    189                                                         </ul>
    190                                                   </li>
    191                                                   <li><a href='#'> Item 4</a></li>
    192                                                 </ul></div><hr>
    193                                                 <h2 id="dropdown-menu" class="docs-heading" data-magellan-target="dropdown-menu"><a class="docs-heading-icon" href="#dropdown-menu"></a>Dropdown Menu</h2><div class="docs-code" data-docs-code></div>
    194 
    195                                                   <div class="docs-code-live"><ul class="dropdown menu" data-dropdown-menu>
    196                                                         <li>
    197                                                           <a>Item 1</a>
    198                                                           <ul class="menu">
    199                                                                 <li><a href="#">Item 1A Loooong</a></li>
     185                                                </li>
     186                                                <li><a href="#">Item 1B</a></li>
     187                                                <li><a href="#">Item 1C</a></li>
     188                                                <li><a href="#">Item 1D</a></li>
     189                                                <li><a href="#">Item 1E</a></li>
     190                                        </ul>
     191                                </li>
     192                                <li>
     193                                        <a href="#">Item 2</a>
     194                                        <ul class="vertical menu">
     195                                                <li><a href="#">Item 2A</a></li>
     196                                                <li><a href="#">Item 2B</a></li>
     197                                                <li><a href="#">Item 2C</a></li>
     198                                                <li><a href="#">Item 2D</a></li>
     199                                                <li><a href="#">Item 2E</a></li>
     200                                        </ul>
     201                                </li>
     202                                <li>
     203                                        <a href="#">Item 3</a>
     204                                        <ul class="vertical menu">
     205                                                <li><a href="#">Item 3A</a></li>
     206                                                <li><a href="#">Item 3B</a></li>
     207                                                <li><a href="#">Item 3C</a></li>
     208                                                <li><a href="#">Item 3D</a></li>
     209                                                <li><a href="#">Item 3E</a></li>
     210                                        </ul>
     211                                </li>
     212                                <li><a href='#'> Item 4</a></li>
     213                        </ul>
     214                </div><hr>
     215                <h2 id="dropdown-menu" class="docs-heading" data-magellan-target="dropdown-menu"><a class="docs-heading-icon" href="#dropdown-menu"></a>Dropdown Menu</h2>
     216                <div class="docs-code" data-docs-code></div>
     217
     218                <div class="docs-code-live">
     219                        <ul class="dropdown menu" data-dropdown-menu>
     220                                <li>
     221                                        <a>Item 1</a>
     222                                        <ul class="menu">
     223                                                <li><a href="#">Item 1A Loooong</a></li>
     224                                                <li>
     225                                                        <a href='#'> Item 1 sub</a>
     226                                                        <ul class='menu'>
     227                                                                <li><a href='#'>Item 1 subA</a></li>
     228                                                                <li><a href='#'>Item 1 subB</a></li>
    200229                                                                <li>
    201                                                                   <a href='#'> Item 1 sub</a>
    202                                                                   <ul class='menu'>
    203                                                                         <li><a href='#'>Item 1 subA</a></li>
    204                                                                         <li><a href='#'>Item 1 subB</a></li>
    205                                                                         <li>
    206                                                                           <a href='#'> Item 1 sub</a>
    207                                                                           <ul class='menu'>
     230                                                                        <a href='#'> Item 1 sub</a>
     231                                                                        <ul class='menu'>
    208232                                                                                <li><a href='#'>Item 1 subA</a></li>
    209233                                                                                <li><a href='#'>Item 1 subB</a></li>
    210                                                                           </ul>
    211                                                                         </li>
    212                                                                         <li>
    213                                                                           <a href='#'> Item 1 sub</a>
    214                                                                           <ul class='menu'>
     234                                                                        </ul>
     235                                                                </li>
     236                                                                <li>
     237                                                                        <a href='#'> Item 1 sub</a>
     238                                                                        <ul class='menu'>
    215239                                                                                <li><a href='#'>Item 1 subA</a></li>
    216                                                                           </ul>
    217                                                                         </li>
    218                                                                   </ul>
     240                                                                        </ul>
    219241                                                                </li>
    220                                                                 <li><a href="#">Item 1B</a></li>
    221                                                           </ul>
    222                                                         </li>
    223                                                         <li>
    224                                                           <a href="#">Item 2</a>
    225                                                           <ul class="menu">
    226                                                                 <li><a href="#">Item 2A</a></li>
    227                                                                 <li><a href="#">Item 2B</a></li>
    228                                                           </ul>
    229                                                         </li>
    230                                                         <li><a href="#">Item 3</a></li>
    231                                                         <li><a href='#'>Item 4</a></li>
    232                                                   </ul></div><hr>
    233                                                   <h2 id="dropdown-pane" class="docs-heading" data-magellan-target="dropdown-pane"><a class="docs-heading-icon" href="#dropdown-pane"></a>Dropdown Pane</h2><div class="docs-code" data-docs-code></div>
    234 
    235                                                         <div class="docs-code-live"><button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
    236                                                           <div class="dropdown-pane" id="example-dropdown" data-dropdown>
    237                                                                 Just some junk that needs to be said. Or not. Your choice.
    238                                                           </div></div><hr>
    239                                                           <h2 id="flex-video" class="docs-heading" data-magellan-target="flex-video"><a class="docs-heading-icon" href="#flex-video"></a>Flex Video</h2><div class="docs-code" data-docs-code></div>
    240 
    241                                                                 <div class="docs-code-live"><div class="flex-video">
    242                                                                   <iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe>
    243                                                                 </div></div><hr>
    244                                                                 <h2 id="float-classes" class="docs-heading" data-magellan-target="float-classes"><a class="docs-heading-icon" href="#float-classes"></a>Float Classes</h2><div class="docs-code" data-docs-code></div>
    245 
    246                                                                   <div class="docs-code-live"><div class="callout clearfix">
    247                                                                         <a class="button float-left">Left</a>
    248                                                                         <a class="button float-right">Right</a>
    249                                                                   </div></div><hr>
    250                                                                   <h2 id="forms" class="docs-heading" data-magellan-target="forms"><a class="docs-heading-icon" href="#forms"></a>Forms</h2><div class="docs-code" data-docs-code></div>
    251 
    252                                                                         <div class="docs-code-live"><form>
    253                                                                           <label>Input Label
    254                                                                                 <input type="text" placeholder=".small-12.columns" aria-describedby="exampleHelpText">
    255                                                                           </label>
    256                                                                           <p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
    257                                                                           <label>
    258                                                                                 How many puppies?
    259                                                                                 <input type="number" value="100">
    260                                                                           </label>
    261                                                                           <label>
    262                                                                                 What books did you read over summer break?
    263                                                                                 <textarea placeholder="None"></textarea>
    264                                                                           </label>
    265                                                                           <label>Select Menu
    266                                                                                 <select>
    267                                                                                   <option value="husker">Husker</option>
    268                                                                                   <option value="starbuck">Starbuck</option>
    269                                                                                   <option value="hotdog">Hot Dog</option>
    270                                                                                   <option value="apollo">Apollo</option>
    271                                                                                 </select>
    272                                                                           </label>
    273                                                                           <div class="row">
    274                                                                                 <fieldset class="large-6 columns">
    275                                                                                   <legend>Choose Your Favorite</legend>
    276                                                                                   <input type="radio" name="pokemon" value="Red" id="pokemonRed" required><label for="pokemonRed">Red</label>
    277                                                                                   <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
    278                                                                                   <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
    279                                                                                 </fieldset>
    280                                                                                 <fieldset class="large-6 columns">
    281                                                                                   <legend>Check these out</legend>
    282                                                                                   <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
    283                                                                                   <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
    284                                                                                   <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
    285                                                                                 </fieldset>
    286                                                                           </div>
    287                                                                           <div class="row">
    288                                                                                 <div class="small-3 columns">
    289                                                                                   <label for="middle-label" class="right middle">Label</label>
    290                                                                                 </div>
    291                                                                                 <div class="small-9 columns">
    292                                                                                   <input type="text" id="middle-label" placeholder="Right- and middle-aligned text input">
    293                                                                                 </div>
    294                                                                           </div>
    295                                                                           <div class="input-group">
    296                                                                                 <span class="input-group-label">$</span>
    297                                                                                 <input class="input-group-field" type="url">
    298                                                                                 <a class="input-group-button button">Submit</a>
    299                                                                           </div>
    300                                                                         </form></div><hr>
    301                                                                         <h2 id="label" class="docs-heading" data-magellan-target="label"><a class="docs-heading-icon" href="#label"></a>Label</h2><div class="docs-code" data-docs-code></div>
    302 
    303                                                                           <div class="docs-code-live"><span class="secondary label">Secondary Label</span>
    304                                                                                 <span class="success label">Success Label</span>
    305                                                                                 <span class="alert label">Alert Label</span>
    306                                                                                 <span class="warning label">Warning Label</span></div><hr>
    307                                                                                 <h2 id="media-object" class="docs-heading" data-magellan-target="media-object"><a class="docs-heading-icon" href="#media-object"></a>Media Object</h2><div class="docs-code" data-docs-code></div>
    308 
    309                                                                                   <div class="docs-code-live"><div class="media-object">
    310                                                                                         <div class="media-object-section">
    311                                                                                           <img src= "http://placeimg.com/200/200/people">
    312                                                                                         </div>
    313                                                                                         <div class="media-object-section">
    314                                                                                           <h4>Dreams feel real while we're in them.</h4>
    315                                                                                           <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
    316                                                                                         </div>
    317                                                                                   </div></div><hr>
    318                                                                                   <h2 id="menu" class="docs-heading" data-magellan-target="menu"><a class="docs-heading-icon" href="#menu"></a>Menu</h2><div class="docs-code" data-docs-code></div>
    319 
    320                                                                                         <div class="docs-code-live"><ul class="menu">
    321                                                                                           <li><a href="#">One</a></li>
    322                                                                                           <li><a href="#">Two</a></li>
    323                                                                                           <li><a href="#">Three</a></li>
    324                                                                                           <li><a href="#">Four</a></li>
    325                                                                                         </ul>
    326 
    327                                                                                         <ul class="menu icon-top">
    328                                                                                           <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
    329                                                                                           <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
    330                                                                                           <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
    331                                                                                           <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
    332                                                                                         </ul></div><hr>
    333                                                                                         <h2 id="orbit" class="docs-heading" data-magellan-target="orbit"><a class="docs-heading-icon" href="#orbit"></a>Orbit</h2><div class="docs-code" data-docs-code></div>
    334 
    335                                                                                           <div class="docs-code-live"><div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
    336                                                                                                 <ul class="orbit-container">
    337 
    338                                                                                                   <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
    339                                                                                                   <li class="is-active orbit-slide">
    340                                                                                                         <div>
    341                                                                                                           <h3 class="text-center">You can also throw some text in here!</h3>
    342                                                                                                           <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
    343                                                                                                           <h3 class="text-center">This Orbit slide has chill</h3>
    344                                                                                                         </div>
    345                                                                                                   </li>
    346                                                                                                   <li class="orbit-slide">
    347                                                                                                         <div>
    348                                                                                                           <h3 class="text-center">You can also throw some text in here!</h3>
    349                                                                                                           <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
    350                                                                                                           <h3 class="text-center">This Orbit slide has chill</h3>
    351                                                                                                         </div>
    352                                                                                                   </li>
    353                                                                                                   <li class="orbit-slide">
    354                                                                                                         <div>
    355                                                                                                           <h3 class="text-center">You can also throw some text in here!</h3>
    356                                                                                                           <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
    357                                                                                                           <h3 class="text-center">This Orbit slide has chill</h3>
    358                                                                                                         </div>
    359                                                                                                   </li>
    360                                                                                                   <li class="orbit-slide">
    361                                                                                                         <div>
    362                                                                                                           <h3 class="text-center">You can also throw some text in here!</h3>
    363                                                                                                           <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
    364                                                                                                           <h3 class="text-center">This Orbit slide has chill</h3>
    365                                                                                                         </div>
    366                                                                                                   </li>
    367                                                                                                 </ul>
    368                                                                                                 <nav class="orbit-bullets">
    369                                                                                                   <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
    370                                                                                                   <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
    371                                                                                                   <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
    372                                                                                                   <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
    373                                                                                                 </nav>
    374                                                                                           </div></div><hr>
    375                                                                                           <h2 id="pagination" class="docs-heading" data-magellan-target="pagination"><a class="docs-heading-icon" href="#pagination"></a>Pagination</h2><div class="docs-code" data-docs-code></div>
    376 
    377                                                                                                 <div class="docs-code-live"><ul class="pagination" role="navigation" aria-label="Pagination">
    378 
    379                                                                                                   <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
    380                                                                                                   <li><a href="#" aria-label="Page 2">2</a></li>
    381                                                                                                   <li><a href="#" aria-label="Page 3">3</a></li>
    382                                                                                                   <li><a href="#" aria-label="Page 4">4</a></li>
    383                                                                                                   <li class="ellipsis" aria-hidden="true"></li>
    384                                                                                                   <li><a href="#" aria-label="Page 12">12</a></li>
    385                                                                                                   <li><a href="#" aria-label="Page 13">13</a></li>
    386                                                                                                   <li><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
    387                                                                                                 </ul></div><hr>
    388                                                                                                 <h2 id="slider" class="docs-heading" data-magellan-target="slider"><a class="docs-heading-icon" href="#slider"></a>Slider</h2><div class="docs-code" data-docs-code></div>
    389 
    390                                                                                                   <div class="docs-code-live"><div class="slider" data-slider data-initial-start='50' data-end='200'>
    391                                                                                                         <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
    392                                                                                                         <span class="slider-fill" data-slider-fill></span>
    393                                                                                                         <input type="hidden">
    394                                                                                                   </div>
    395 
    396                                                                                                   <div class="slider vertical" data-slider data-initial-start='25' data-end='200' data-vertical="true">
    397                                                                                                         <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
    398                                                                                                         <span class="slider-fill" data-slider-fill></span>
    399                                                                                                         <input type="hidden">
    400                                                                                                   </div>
    401 
    402                                                                                                   <div class="slider" data-slider data-initial-start='25' data-initial-end='75'>
    403                                                                                                         <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
    404                                                                                                         <span class="slider-fill" data-slider-fill></span>
    405                                                                                                         <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
    406                                                                                                         <input type="hidden">
    407                                                                                                         <input type="hidden">
    408                                                                                                   </div></div><hr>
    409                                                                                                   <h2 id="switch" class="docs-heading" data-magellan-target="switch"><a class="docs-heading-icon" href="#switch"></a>Switch</h2><div class="docs-code" data-docs-code></div>
    410 
    411                                                                                                         <div class="docs-code-live"><div class="switch tiny">
    412                                                                                                           <input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch">
    413                                                                                                           <label class="switch-paddle" for="tinySwitch">
    414                                                                                                                 <span class="show-for-sr">Tiny Sandwiches Enabled</span>
    415                                                                                                           </label>
    416                                                                                                         </div>
    417 
    418                                                                                                         <div class="switch small">
    419                                                                                                           <input class="switch-input" id="smallSwitch" type="checkbox" name="exampleSwitch">
    420                                                                                                           <label class="switch-paddle" for="smallSwitch">
    421                                                                                                                 <span class="show-for-sr">Small Portions Only</span>
    422                                                                                                           </label>
    423                                                                                                         </div>
    424 
    425                                                                                                         <div class="switch large">
    426                                                                                                           <input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch">
    427                                                                                                           <label class="switch-paddle" for="largeSwitch">
    428                                                                                                                 <span class="show-for-sr">Show Large Elephants</span>
    429                                                                                                           </label>
    430                                                                                                         </div></div><hr>
    431                                                                                                         <h2 id="table" class="docs-heading" data-magellan-target="table"><a class="docs-heading-icon" href="#table"></a>Table</h2><div class="docs-code" data-docs-code></div>
    432 
    433                                                                                                           <div class="docs-code-live"><table>
    434                                                                                                                 <thead>
    435                                                                                                                   <tr>
    436                                                                                                                         <th width="200">Table Header</th>
    437                                                                                                                         <th>Table Header</th>
    438                                                                                                                         <th width="150">Table Header</th>
    439                                                                                                                         <th width="150">Table Header</th>
    440                                                                                                                   </tr>
    441                                                                                                                 </thead>
    442                                                                                                                 <tbody>
    443                                                                                                                   <tr>
    444                                                                                                                         <td>Content Goes Here</td>
    445                                                                                                                         <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
    446                                                                                                                         <td>Content Goes Here</td>
    447                                                                                                                         <td>Content Goes Here</td>
    448                                                                                                                   </tr>
    449                                                                                                                   <tr>
    450                                                                                                                         <td>Content Goes Here</td>
    451                                                                                                                         <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
    452                                                                                                                         <td>Content Goes Here</td>
    453                                                                                                                         <td>Content Goes Here</td>
    454                                                                                                                   </tr>
    455                                                                                                                   <tr>
    456                                                                                                                         <td>Content Goes Here</td>
    457                                                                                                                         <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
    458                                                                                                                         <td>Content Goes Here</td>
    459                                                                                                                         <td>Content Goes Here</td>
    460                                                                                                                   </tr>
    461                                                                                                                 </tbody>
    462                                                                                                           </table></div><hr>
    463                                                                                                           <h2 id="tabs" class="docs-heading" data-magellan-target="tabs"><a class="docs-heading-icon" href="#tabs"></a>Tabs</h2><div class="docs-code" data-docs-code></div>
    464 
    465                                                                                                                 <div class="docs-code-live"><ul class="tabs" data-tabs id="example-tabs">
    466                                                                                                                   <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
    467                                                                                                                   <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
    468                                                                                                                   <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
    469                                                                                                                   <li class="tabs-title"><a href="#panel4">Tab 4</a></li>
    470                                                                                                                   <li class="tabs-title"><a href="#panel5">Tab 5</a></li>
    471                                                                                                                   <li class="tabs-title"><a href="#panel6">Tab 6</a></li>
    472                                                                                                                 </ul>
    473 
    474                                                                                                                 <div class="tabs-content" data-tabs-content="example-tabs">
    475                                                                                                                   <div class="tabs-panel is-active" id="panel1">
    476                                                                                                                         <p>one</p>
    477                                                                                                                         <p>Check me out! I'm a super cool Tab panel with text content!</p>
    478                                                                                                                   </div>
    479                                                                                                                   <div class="tabs-panel" id="panel2">
    480                                                                                                                         <p>two</p>
    481                                                                                                                         <img class="thumbnail" src="assets/img/rectangle-7.jpg">
    482                                                                                                                   </div>
    483                                                                                                                   <div class="tabs-panel" id="panel3">
    484                                                                                                                         <p>three</p>
    485                                                                                                                         <p>Check me out! I'm a super cool Tab panel with text content!</p>
    486                                                                                                                   </div>
    487                                                                                                                   <div class="tabs-panel" id="panel4">
    488                                                                                                                         <p>four</p>
    489                                                                                                                         <img class="thumbnail" src="assets/img/rectangle-2.jpg">
    490                                                                                                                   </div>
    491                                                                                                                   <div class="tabs-panel" id="panel5">
    492                                                                                                                         <p>five</p>
    493                                                                                                                         <p>Check me out! I'm a super cool Tab panel with text content!</p>
    494                                                                                                                   </div>
    495                                                                                                                   <div class="tabs-panel" id="panel6">
    496                                                                                                                         <p>six</p>
    497                                                                                                                         <img class="thumbnail" src="assets/img/rectangle-8.jpg">
    498                                                                                                                   </div>
    499                                                                                                                 </div></div><hr>
    500                                                                                                                 <h2 id="thumbnail" class="docs-heading" data-magellan-target="thumbnail"><a class="docs-heading-icon" href="#thumbnail"></a>Thumbnail</h2><div class="docs-code" data-docs-code></div>
    501 
    502                                                                                                                   <div class="docs-code-live"><div class="row">
    503                                                                                                                         <div class="small-4 columns">
    504                                                                                                                           <img class="thumbnail" src="assets/img/thumbnail/01.jpg" alt="Photo of Uranus.">
    505                                                                                                                         </div>
    506                                                                                                                         <div class="small-4 columns">
    507                                                                                                                           <img class="thumbnail" src="assets/img/thumbnail/02.jpg" alt="Photo of Neptune.">
    508                                                                                                                         </div>
    509                                                                                                                         <div class="small-4 columns">
    510                                                                                                                           <img class="thumbnail" src="assets/img/thumbnail/03.jpg" alt="Photo of Pluto.">
    511                                                                                                                         </div>
    512                                                                                                                   </div></div><hr>
    513                                                                                                                   <h2 id="title-bar" class="docs-heading" data-magellan-target="title-bar"><a class="docs-heading-icon" href="#title-bar"></a>Title Bar</h2><div class="docs-code" data-docs-code></div>
    514 
    515                                                                                                                         <div class="docs-code-live"><div class="title-bar">
    516                                                                                                                           <div class="title-bar-left">
    517                                                                                                                                 <button class="menu-icon" type="button"></button>
    518                                                                                                                                 <span class="title-bar-title">Foundation</span>
    519                                                                                                                           </div>
    520                                                                                                                           <div class="title-bar-right">
    521                                                                                                                                 <button class="menu-icon" type="button"></button>
    522                                                                                                                           </div>
    523                                                                                                                         </div></div><hr>
    524                                                                                                                         <h2 id="tooltip" class="docs-heading" data-magellan-target="tooltip"><a class="docs-heading-icon" href="#tooltip"></a>Tooltip</h2><div class="docs-code" data-docs-code></div>
    525 
    526                                                                                                                         <div class="docs-code-live"><p>The <span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover='false' tabindex=1 title="Fancy word for a beetle.">scarabaeus</span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.</p></div><hr>
    527                                                                                                                         <h2 id="top-bar" class="docs-heading" data-magellan-target="top-bar"><a class="docs-heading-icon" href="#top-bar"></a>Top Bar</h2><div class="docs-code" data-docs-code></div>
    528 
    529                                                                                                                           <div class="docs-code-live"><div class="top-bar">
    530                                                                                                                                 <div class="top-bar-left">
    531                                                                                                                                   <ul class="dropdown menu" data-dropdown-menu>
    532                                                                                                                                         <li class="menu-text">Site Title</li>
    533                                                                                                                                         <li class="has-submenu">
    534                                                                                                                                           <a href="#">One</a>
    535                                                                                                                                           <ul class="submenu menu vertical" data-submenu>
    536                                                                                                                                                 <li><a href="#">One</a></li>
    537                                                                                                                                                 <li><a href="#">Two</a></li>
    538                                                                                                                                                 <li><a href="#">Three</a></li>
    539                                                                                                                                           </ul>
    540                                                                                                                                         </li>
    541                                                                                                                                         <li><a href="#">Two</a></li>
    542                                                                                                                                         <li><a href="#">Three</a></li>
    543                                                                                                                                   </ul>
    544                                                                                                                                 </div>
    545                                                                                                                                 <div class="top-bar-right">
    546                                                                                                                                   <ul class="menu">
    547                                                                                                                                         <li><input type="search" placeholder="Search"></li>
    548                                                                                                                                         <li><button type="button" class="button">Search</button></li>
    549                                                                                                                                   </ul>
    550                                                                                                                                 </div>
    551                                                                                                                           </div></div>
     242                                                        </ul>
     243                                                </li>
     244                                                <li><a href="#">Item 1B</a></li>
     245                                        </ul>
     246                                </li>
     247                                <li>
     248                                        <a href="#">Item 2</a>
     249                                        <ul class="menu">
     250                                                <li><a href="#">Item 2A</a></li>
     251                                                <li><a href="#">Item 2B</a></li>
     252                                        </ul>
     253                                </li>
     254                                <li><a href="#">Item 3</a></li>
     255                                <li><a href='#'>Item 4</a></li>
     256                        </ul>
     257                </div><hr>
     258                <h2 id="dropdown-pane" class="docs-heading" data-magellan-target="dropdown-pane"><a class="docs-heading-icon" href="#dropdown-pane"></a>Dropdown Pane</h2>
     259                <div class="docs-code" data-docs-code></div>
     260
     261                <div class="docs-code-live"><button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
     262                        <div class="dropdown-pane" id="example-dropdown" data-dropdown>
     263                                Just some junk that needs to be said. Or not. Your choice.
     264                        </div>
     265                </div><hr>
     266                <h2 id="flex-video" class="docs-heading" data-magellan-target="flex-video"><a class="docs-heading-icon" href="#flex-video"></a>Flex Video</h2>
     267                <div class="docs-code" data-docs-code></div>
     268
     269                <div class="docs-code-live">
     270                        <div class="flex-video">
     271                                <iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe>
     272                        </div>
     273                </div><hr>
     274                <h2 id="float-classes" class="docs-heading" data-magellan-target="float-classes"><a class="docs-heading-icon" href="#float-classes"></a>Float Classes</h2>
     275                <div class="docs-code" data-docs-code></div>
     276
     277                <div class="docs-code-live">
     278                        <div class="callout clearfix">
     279                                <a class="button float-left">Left</a>
     280                                <a class="button float-right">Right</a>
     281                        </div>
     282                </div><hr>
     283                <h2 id="forms" class="docs-heading" data-magellan-target="forms"><a class="docs-heading-icon" href="#forms"></a>Forms</h2>
     284                <div class="docs-code" data-docs-code></div>
     285
     286                <div class="docs-code-live">
     287                        <form>
     288                                <label>Input Label
     289                                        <input type="text" placeholder=".small-12.columns" aria-describedby="exampleHelpText">
     290                                </label>
     291                                <p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
     292                                <label>
     293                                        How many puppies?
     294                                        <input type="number" value="100">
     295                                </label>
     296                                <label>
     297                                        What books did you read over summer break?
     298                                        <textarea placeholder="None"></textarea>
     299                                </label>
     300                                <label>Select Menu
     301                                        <select>
     302                                                <option value="husker">Husker</option>
     303                                                <option value="starbuck">Starbuck</option>
     304                                                <option value="hotdog">Hot Dog</option>
     305                                                <option value="apollo">Apollo</option>
     306                                        </select>
     307                                </label>
     308                                <div class="row">
     309                                        <fieldset class="large-6 columns">
     310                                                <legend>Choose Your Favorite</legend>
     311                                                <input type="radio" name="pokemon" value="Red" id="pokemonRed" required><label for="pokemonRed">Red</label>
     312                                                <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
     313                                                <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
     314                                        </fieldset>
     315                                        <fieldset class="large-6 columns">
     316                                                <legend>Check these out</legend>
     317                                                <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
     318                                                <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
     319                                                <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
     320                                        </fieldset>
     321                                </div>
     322                                <div class="row">
     323                                        <div class="small-3 columns">
     324                                                <label for="middle-label" class="right middle">Label</label>
     325                                        </div>
     326                                        <div class="small-9 columns">
     327                                                <input type="text" id="middle-label" placeholder="Right- and middle-aligned text input">
     328                                        </div>
     329                                </div>
     330                                <div class="input-group">
     331                                        <span class="input-group-label">$</span>
     332                                        <input class="input-group-field" type="url">
     333                                        <a class="input-group-button button">Submit</a>
     334                                </div>
     335                        </form>
     336                </div><hr>
     337                <h2 id="label" class="docs-heading" data-magellan-target="label"><a class="docs-heading-icon" href="#label"></a>Label</h2>
     338                <div class="docs-code" data-docs-code></div>
     339
     340                <div class="docs-code-live">
     341                        <span class="secondary label">Secondary Label</span>
     342                        <span class="success label">Success Label</span>
     343                        <span class="alert label">Alert Label</span>
     344                        <span class="warning label">Warning Label</span>
     345                </div><hr>
     346                <h2 id="media-object" class="docs-heading" data-magellan-target="media-object"><a class="docs-heading-icon" href="#media-object"></a>Media Object</h2>
     347                <div class="docs-code" data-docs-code></div>
     348
     349                <div class="docs-code-live">
     350                        <div class="media-object">
     351                                <div class="media-object-section">
     352                                        <img src= "http://placeimg.com/200/200/people">
     353                                </div>
     354                                <div class="media-object-section">
     355                                        <h4>Dreams feel real while we're in them.</h4>
     356                                        <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
     357                                </div>
     358                        </div>
     359                </div><hr>
     360                <h2 id="menu" class="docs-heading" data-magellan-target="menu"><a class="docs-heading-icon" href="#menu"></a>Menu</h2>
     361                <div class="docs-code" data-docs-code></div>
     362
     363                <div class="docs-code-live">
     364                        <ul class="menu">
     365                                <li><a href="#">One</a></li>
     366                                <li><a href="#">Two</a></li>
     367                                <li><a href="#">Three</a></li>
     368                                <li><a href="#">Four</a></li>
     369                        </ul>
     370
     371                        <ul class="menu icon-top">
     372                                <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
     373                                <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
     374                                <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
     375                                <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
     376                        </ul>
     377                </div><hr>
     378                <h2 id="orbit" class="docs-heading" data-magellan-target="orbit"><a class="docs-heading-icon" href="#orbit"></a>Orbit</h2>
     379                <div class="docs-code" data-docs-code></div>
     380
     381                <div class="docs-code-live">
     382                        <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
     383                                <ul class="orbit-container">
     384
     385                                        <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
     386                                        <li class="is-active orbit-slide">
     387                                                <div>
     388                                                        <h3 class="text-center">You can also throw some text in here!</h3>
     389                                                                <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
     390                                                        <h3 class="text-center">This Orbit slide has chill</h3>
     391                                                </div>
     392                                        </li>
     393                                        <li class="orbit-slide">
     394                                                <div>
     395                                                        <h3 class="text-center">You can also throw some text in here!</h3>
     396                                                        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
     397                                                        <h3 class="text-center">This Orbit slide has chill</h3>
     398                                                </div>
     399                                        </li>
     400                                        <li class="orbit-slide">
     401                                                <div>
     402                                                        <h3 class="text-center">You can also throw some text in here!</h3>
     403                                                        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
     404                                                        <h3 class="text-center">This Orbit slide has chill</h3>
     405                                                </div>
     406                                        </li>
     407                                        <li class="orbit-slide">
     408                                                <div>
     409                                                        <h3 class="text-center">You can also throw some text in here!</h3>
     410                                                        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
     411                                                        <h3 class="text-center">This Orbit slide has chill</h3>
     412                                                </div>
     413                                        </li>
     414                                </ul>
     415                                <nav class="orbit-bullets">
     416                                        <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
     417                                        <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
     418                                        <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
     419                                        <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
     420                                </nav>
     421                        </div>
     422                </div><hr>
     423                <h2 id="pagination" class="docs-heading" data-magellan-target="pagination"><a class="docs-heading-icon" href="#pagination"></a>Pagination</h2>
     424                <div class="docs-code" data-docs-code></div>
     425
     426                <div class="docs-code-live">
     427                        <ul class="pagination" role="navigation" aria-label="Pagination">
     428
     429                                <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
     430                                <li><a href="#" aria-label="Page 2">2</a></li>
     431                                <li><a href="#" aria-label="Page 3">3</a></li>
     432                                <li><a href="#" aria-label="Page 4">4</a></li>
     433                                <li class="ellipsis" aria-hidden="true"></li>
     434                                <li><a href="#" aria-label="Page 12">12</a></li>
     435                                <li><a href="#" aria-label="Page 13">13</a></li>
     436                                <li><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
     437                        </ul>
     438                </div><hr>
     439                <h2 id="slider" class="docs-heading" data-magellan-target="slider"><a class="docs-heading-icon" href="#slider"></a>Slider</h2>
     440                <div class="docs-code" data-docs-code></div>
     441
     442                <div class="docs-code-live">
     443                        <div class="slider" data-slider data-initial-start='50' data-end='200'>
     444                                <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
     445                                <span class="slider-fill" data-slider-fill></span>
     446                                <input type="hidden">
     447                        </div>
     448
     449                        <div class="slider vertical" data-slider data-initial-start='25' data-end='200' data-vertical="true">
     450                                <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
     451                                <span class="slider-fill" data-slider-fill></span>
     452                                <input type="hidden">
     453                        </div>
     454
     455                        <div class="slider" data-slider data-initial-start='25' data-initial-end='75'>
     456                                <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
     457                                <span class="slider-fill" data-slider-fill></span>
     458                                <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
     459                                <input type="hidden">
     460                                <input type="hidden">
     461                        </div>
     462                </div><hr>
     463                <h2 id="switch" class="docs-heading" data-magellan-target="switch"><a class="docs-heading-icon" href="#switch"></a>Switch</h2><div class="docs-code" data-docs-code></div>
     464
     465                <div class="docs-code-live">
     466                        <div class="switch tiny">
     467                                <input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch">
     468                                <label class="switch-paddle" for="tinySwitch">
     469                                        <span class="show-for-sr">Tiny Sandwiches Enabled</span>
     470                                </label>
     471                        </div>
     472
     473                        <div class="switch small">
     474                                <input class="switch-input" id="smallSwitch" type="checkbox" name="exampleSwitch">
     475                                <label class="switch-paddle" for="smallSwitch">
     476                                        <span class="show-for-sr">Small Portions Only</span>
     477                                </label>
     478                        </div>
     479
     480                        <div class="switch large">
     481                                <input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch">
     482                                <label class="switch-paddle" for="largeSwitch">
     483                                        <span class="show-for-sr">Show Large Elephants</span>
     484                                </label>
     485                        </div>
     486                </div><hr>
     487                <h2 id="table" class="docs-heading" data-magellan-target="table"><a class="docs-heading-icon" href="#table"></a>Table</h2>
     488                <div class="docs-code" data-docs-code></div>
     489
     490                <div class="docs-code-live">
     491                        <table>
     492                                <thead>
     493                                        <tr>
     494                                                <th width="200">Table Header</th>
     495                                                <th>Table Header</th>
     496                                                <th width="150">Table Header</th>
     497                                                <th width="150">Table Header</th>
     498                                        </tr>
     499                                </thead>
     500                                <tbody>
     501                                        <tr>
     502                                                <td>Content Goes Here</td>
     503                                                <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
     504                                                <td>Content Goes Here</td>
     505                                                <td>Content Goes Here</td>
     506                                        </tr>
     507                                        <tr>
     508                                                <td>Content Goes Here</td>
     509                                                <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
     510                                                <td>Content Goes Here</td>
     511                                                <td>Content Goes Here</td>
     512                                        </tr>
     513                                        <tr>
     514                                                <td>Content Goes Here</td>
     515                                                <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
     516                                                <td>Content Goes Here</td>
     517                                                <td>Content Goes Here</td>
     518                                        </tr>
     519                                </tbody>
     520                        </table>
     521                </div><hr>
     522                <h2 id="tabs" class="docs-heading" data-magellan-target="tabs"><a class="docs-heading-icon" href="#tabs"></a>Tabs</h2>
     523                <div class="docs-code" data-docs-code></div>
     524
     525                <div class="docs-code-live">
     526                        <ul class="tabs" data-tabs id="example-tabs">
     527                                <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
     528                                <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
     529                                <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
     530                                <li class="tabs-title"><a href="#panel4">Tab 4</a></li>
     531                                <li class="tabs-title"><a href="#panel5">Tab 5</a></li>
     532                                <li class="tabs-title"><a href="#panel6">Tab 6</a></li>
     533                        </ul>
     534
     535                        <div class="tabs-content" data-tabs-content="example-tabs">
     536                                <div class="tabs-panel is-active" id="panel1">
     537                                        <p>one</p>
     538                                        <p>Check me out! I'm a super cool Tab panel with text content!</p>
     539                                </div>
     540                                <div class="tabs-panel" id="panel2">
     541                                        <p>two</p>
     542                                        <img class="thumbnail" src="assets/img/rectangle-7.jpg">
     543                                </div>
     544                                <div class="tabs-panel" id="panel3">
     545                                        <p>three</p>
     546                                        <p>Check me out! I'm a super cool Tab panel with text content!</p>
     547                                </div>
     548                                <div class="tabs-panel" id="panel4">
     549                                        <p>four</p>
     550                                        <img class="thumbnail" src="assets/img/rectangle-2.jpg">
     551                                </div>
     552                                <div class="tabs-panel" id="panel5">
     553                                        <p>five</p>
     554                                        <p>Check me out! I'm a super cool Tab panel with text content!</p>
     555                                </div>
     556                                <div class="tabs-panel" id="panel6">
     557                                        <p>six</p>
     558                                        <img class="thumbnail" src="assets/img/rectangle-8.jpg">
     559                                </div>
     560                        </div>
     561                </div><hr>
     562                <h2 id="thumbnail" class="docs-heading" data-magellan-target="thumbnail"><a class="docs-heading-icon" href="#thumbnail"></a>Thumbnail</h2>
     563                <div class="docs-code" data-docs-code></div>
     564
     565                <div class="docs-code-live">
     566                        <div class="row">
     567                                <div class="small-4 columns">
     568                                        <img class="thumbnail" src="assets/img/thumbnail/01.jpg" alt="Photo of Uranus.">
     569                                </div>
     570                                <div class="small-4 columns">
     571                                        <img class="thumbnail" src="assets/img/thumbnail/02.jpg" alt="Photo of Neptune.">
     572                                </div>
     573                                <div class="small-4 columns">
     574                                        <img class="thumbnail" src="assets/img/thumbnail/03.jpg" alt="Photo of Pluto.">
     575                                </div>
     576                        </div>
     577                </div><hr>
     578                <h2 id="title-bar" class="docs-heading" data-magellan-target="title-bar"><a class="docs-heading-icon" href="#title-bar"></a>Title Bar</h2>
     579                <div class="docs-code" data-docs-code></div>
     580
     581                <div class="docs-code-live">
     582                        <div class="title-bar">
     583                                <div class="title-bar-left">
     584                                        <button class="menu-icon" type="button"></button>
     585                                        <span class="title-bar-title">Foundation</span>
     586                                </div>
     587                                <div class="title-bar-right">
     588                                        <button class="menu-icon" type="button"></button>
     589                                </div>
     590                        </div>
     591                </div><hr>
     592                <h2 id="tooltip" class="docs-heading" data-magellan-target="tooltip"><a class="docs-heading-icon" href="#tooltip"></a>Tooltip</h2>
     593                <div class="docs-code" data-docs-code></div>
     594
     595                <div class="docs-code-live"><p>The <span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover='false' tabindex=1 title="Fancy word for a beetle.">scarabaeus</span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.</p></div><hr>
     596                <h2 id="top-bar" class="docs-heading" data-magellan-target="top-bar"><a class="docs-heading-icon" href="#top-bar"></a>Top Bar</h2>
     597                <div class="docs-code" data-docs-code></div>
     598
     599                <div class="docs-code-live">
     600                        <div class="top-bar">
     601                                <div class="top-bar-left">
     602                                        <ul class="dropdown menu" data-dropdown-menu>
     603                                                <li class="menu-text">Site Title</li>
     604                                                <li class="has-submenu">
     605                                                        <a href="#">One</a>
     606                                                        <ul class="submenu menu vertical" data-submenu>
     607                                                                <li><a href="#">One</a></li>
     608                                                                <li><a href="#">Two</a></li>
     609                                                                <li><a href="#">Three</a></li>
     610                                                        </ul>
     611                                                </li>
     612                                                <li><a href="#">Two</a></li>
     613                                                <li><a href="#">Three</a></li>
     614                                        </ul>
     615                                </div>
     616                                <div class="top-bar-right">
     617                                        <ul class="menu">
     618                                                <li><input type="search" placeholder="Search"></li>
     619                                                <li><button type="button" class="button">Search</button></li>
     620                                        </ul>
     621                                </div>
     622                        </div>
     623                </div>
  • _plugins_/foundation_6/trunk/css/fix_spip.css

    r96077 r96417  
    11html, body {
    2   height: 100%;
    3   /* Fix un bug des reveal modale dans SPIP */ }
     2        height: 100%;
     3        /* Fix un bug des reveal modale dans SPIP */
     4}
    45
    56input.hasDatepicker {
    6   display: inline; }
     7        display: inline;
     8}
    79
    810.formulaire_spip ul {
    9   list-style-type: none;
    10   margin-left: 0; }
     11        list-style-type: none;
     12        margin-left: 0;
     13}
    1114
    1215/*# sourceMappingURL=fix_spip.css.map */
  • _plugins_/foundation_6/trunk/formulaires/configurer_foundation_6.html

    r93801 r96417  
    11<div class="formulaire_spip formulaire_configurer formulaire_#FORM">
    22
    3   <h3 class="titrem">
    4     [(#CHEMIN{prive/themes/spip/images/foundation-128.png}|image_reduire{24,24}|inserer_attribut{class, cadre-icone})]
    5     <:foundation_6:cfg_titre_parametrages:>
    6   </h3>
     3        <h3 class="titrem">
     4                [(#CHEMIN{prive/themes/spip/images/foundation-128.png}|image_reduire{24,24}|inserer_attribut{class, cadre-icone})]
     5                <:foundation_6:cfg_titre_parametrages:>
     6        </h3>
    77
    8   [<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
    9   [<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
     8        [<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
     9        [<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
    1010
    11   <form method="post" action="#ENV{action}">
    12     <div>
    13       #ACTION_FORMULAIRE{#ENV{action}}
     11        <form method="post" action="#ENV{action}">
     12                <div>
     13                        #ACTION_FORMULAIRE{#ENV{action}}
    1414
    15       #GENERER_SAISIES{#ENV{_saisies}}
     15                        #GENERER_SAISIES{#ENV{_saisies}}
    1616
    17       <input type="hidden" name="_meta_casier" value="foundation" />
    18       <p class="boutons"><span class="image_loading">&nbsp;</span><input type="submit" class="submit" value="<:bouton_enregistrer:>" /></p>
    19     </div>
    20   </form>
     17                        <input type="hidden" name="_meta_casier" value="foundation" />
     18                        <p class="boutons"><span class="image_loading">&nbsp;</span><input type="submit" class="submit" value="<:bouton_enregistrer:>" /></p>
     19                </div>
     20        </form>
    2121</div>
  • _plugins_/foundation_6/trunk/foundation_6_administrations.php

    r96271 r96417  
    1919function foundation_6_upgrade($nom_meta_base_version, $version_cible) {
    2020
    21     // Création du tableau des mises à jour.
    22     $maj = array();
     21        // Création du tableau des mises à jour.
     22        $maj = array();
    2323
    24     $config_default = array(
    25         'javascript' => '',
    26     );
     24        $config_default = array(
     25                'javascript' => '',
     26        );
    2727
    28     // Tableau de la configuration par défaut
    29     $maj['create'] = array(
    30         array('ecrire_meta', 'foundation_6', serialize($config_default))
    31     );
     28        // Tableau de la configuration par défaut
     29        $maj['create'] = array(
     30                array('ecrire_meta', 'foundation_6', serialize($config_default))
     31        );
    3232
    33     // Maj du plugin.
    34     include_spip('base/upgrade');
    35     maj_plugin($nom_meta_base_version, $version_cible, $maj);
     33        // Maj du plugin.
     34        include_spip('base/upgrade');
     35        maj_plugin($nom_meta_base_version, $version_cible, $maj);
    3636}
    3737
     
    4040 */
    4141function foundation_6_vider_tables($nom_meta_base_version) {
    42     // Supprimer les méta, ou oublie pas celle de la base.
    43     effacer_meta('foundation_6_base_version');
    44     effacer_meta('foundation_6');
     42        // Supprimer les méta, ou oublie pas celle de la base.
     43        effacer_meta('foundation_6_base_version');
     44        effacer_meta('foundation_6');
    4545}
  • _plugins_/foundation_6/trunk/foundation_6_fonctions.php

    r96271 r96417  
    6262 * Generer un bouton d'action qui accepte les class de foundation
    6363 */
    64 function balise_BOUTON_ACTION($p){
     64function balise_BOUTON_ACTION($p) {
    6565
    6666        $args = array();
     
    102102
    103103        if (test_espace_prive()) {
    104                         return "<form class='bouton_action_post $class' method='post' action='$url'><div>".form_hidden($url)
    105                         ."<button type='submit' class='submit'$title$onclick>$libelle</button></div></form>";
     104                return "<form class='bouton_action_post $class' method='post' action='$url'><div>".form_hidden($url)
     105                ."<button type='submit' class='submit'$title$onclick>$libelle</button></div></form>";
    106106        } else {
    107107
     
    122122
    123123                return "<form class='bouton_action_post $ajax' method='post' action='$url'><div>".form_hidden($url)
    124                              ."<button type='submit' class='submit $class'$title$onclick>$libelle</button></div></form>";
     124                ."<button type='submit' class='submit $class'$title$onclick>$libelle</button></div></form>";
    125125        }
    126126}
  • _plugins_/foundation_6/trunk/foundation_6_options.php

    r95557 r96417  
    77// Utiliser la version SASS
    88if (!defined('_FOUNDATION_SASS')) {
    9     define('_FOUNDATION_SASS', false);
     9        define('_FOUNDATION_SASS', false);
    1010}
    1111
  • _plugins_/foundation_6/trunk/foundation_6_pipelines.php

    r96271 r96417  
    1111
    1212if (!defined('_ECRIRE_INC_VERSION')) {
    13     return;
     13        return;
    1414}
    1515
     
    1919function foundation_6_insert_head($flux) {
    2020
    21     // Si on est en mode app, on revoie le bon squelette
    22     if (_FOUNDATION_SASS) {
    23         $flux .= recuperer_fond('inclure/head-foundation-app');
    24     } else {
    25         $flux .= recuperer_fond('inclure/head-foundation');
    26     }
    27 
    28     return $flux;
     21        // Si on est en mode app, on revoie le bon squelette
     22        if (_FOUNDATION_SASS) {
     23                $flux .= recuperer_fond('inclure/head-foundation-app');
     24                } else {
     25                        $flux .= recuperer_fond('inclure/head-foundation');
     26                }
     27        return $flux;
    2928}
    3029
     
    3433function foundation_6_insert_head_css($flux) {
    3534
    36     // Si on est en mode app, on revoie le bon squelette
    37     if (_FOUNDATION_SASS) {
    38         $flux .= recuperer_fond('inclure/css/head-foundation-app');
    39     } else {
    40         $flux .= recuperer_fond('inclure/css/head-foundation');
    41     }
    42 
    43     return $flux;
     35        // Si on est en mode app, on revoie le bon squelette
     36        if (_FOUNDATION_SASS) {
     37                $flux .= recuperer_fond('inclure/css/head-foundation-app');
     38        } else {
     39                $flux .= recuperer_fond('inclure/css/head-foundation');
     40        }
     41        return $flux;
    4442}
  • _plugins_/foundation_6/trunk/inc/foundation.php

    r96271 r96417  
    1414 */
    1515function responsive($matches) {
    16   // Dans le cas de vimeo, il faut ajouter une classe
    17   if (strpos($matches[0], 'vimeo')) {
    18           $vimeo = ' vimeo';
    19   } else {
    20           $vimeo = '';
    21   }
     16        // Dans le cas de vimeo, il faut ajouter une classe
     17        if (strpos($matches[0], 'vimeo')) {
     18                $vimeo = ' vimeo';
     19        } else {
     20                $vimeo = '';
     21        }
    2222
    23   // On inclu les filtres, au cas ou
    24   include_spip('inc/filtres');
     23        // On inclu les filtres, au cas ou
     24        include_spip('inc/filtres');
    2525
    26   // On revoie la bonne structure html d'iframe.
    27   return wrap($matches[0], '<div class="flex-video'.$vimeo.'">');
     26        // On revoie la bonne structure html d'iframe.
     27        return wrap($matches[0], '<div class="flex-video'.$vimeo.'">');
    2828}
    2929
     
    3737function class_grid_foundation($nombre_colonnes, $type) {
    3838
    39     // Si la première variable est un tableau, on va le convertir en class
    40     if (is_array($nombre_colonnes)) {
    41         $class= '';
    42         foreach ($nombre_colonnes as $key => $value) {
    43             // Utiliser un tableau large => 4
    44             if (is_numeric($value)) {
    45                 $class .= $key.'-'.$value.' ';
    46             }
    47         }
    48         return $class;
    49     } else {
    50         return $type.'-'.$nombre_colonnes.' ';
    51     }
     39        // Si la première variable est un tableau, on va le convertir en class
     40        if (is_array($nombre_colonnes)) {
     41                $class= '';
     42                foreach ($nombre_colonnes as $key => $value) {
     43                        // Utiliser un tableau large => 4
     44                        if (is_numeric($value)) {
     45                                $class .= $key.'-'.$value.' ';
     46                        }
     47                }
     48                return $class;
     49        } else {
     50                return $type.'-'.$nombre_colonnes.' ';
     51        }
    5252}
  • _plugins_/foundation_6/trunk/inclure/css/head-foundation-app.html

    r93903 r96417  
    11[(#REM) Ajouter les icone foundation si besoin ]
    22[(#CONFIG{foundation_6/foundation-icons}|oui)
    3 [<link href="(#CHEMIN{lib/foundation-icons/foundation-icons.css}|direction_css)" rel="stylesheet"/>]
     3        [<link href="(#CHEMIN{lib/foundation-icons/foundation-icons.css}|direction_css)" rel="stylesheet"/>]
    44]
    55
  • _plugins_/foundation_6/trunk/inclure/css/head-foundation.html

    r93903 r96417  
    11[(#REM) Ajouter les icone foundation si besoin ]
    22[(#CONFIG{foundation_6/foundation-icons}|oui)
    3 [<link href="(#CHEMIN{lib/foundation-icons/foundation-icons.css}|direction_css)" rel="stylesheet"/>]
     3        [<link href="(#CHEMIN{lib/foundation-icons/foundation-icons.css}|direction_css)" rel="stylesheet"/>]
    44]
    55
  • _plugins_/foundation_6/trunk/inclure/head-foundation-app.html

    r96272 r96417  
    11[(#REM) Inclusion des fichier Javascript si la config le permet ]
    22[(#CONFIG{foundation_6/javascript}|oui)
    3 [<script src="(#CHEMIN{bower_components/foundation-sites/dist/foundation.js})" type="text/javascript"></script>]
    4 <script type="text/javascript">
    5   // Charger les scripts foundations
    6   $(function () {
    7         $.getScript("[(#CHEMIN{bower_components/what-input/what-input.min.js}|timestamp)]");
    8         $.getScript("[(#CHEMIN{javascript/app.js}|timestamp)]");
    9   });
    10 </script>
     3        [<script src="(#CHEMIN{bower_components/foundation-sites/dist/foundation.js})" type="text/javascript"></script>]
     4        <script type="text/javascript">
     5                // Charger les scripts foundations
     6                $(function () {
     7                        $.getScript("[(#CHEMIN{bower_components/what-input/what-input.min.js}|timestamp)]");
     8                        $.getScript("[(#CHEMIN{javascript/app.js}|timestamp)]");
     9                });
     10        </script>
    1111]
  • _plugins_/foundation_6/trunk/inclure/head-foundation.html

    r96338 r96417  
    11[(#REM) Inclusion des fichier Javascript si la config le permet ]
    22[(#CONFIG{foundation_6/javascript}|oui)
    3 [<script src="(#CHEMIN{lib/foundation-6/js/vendor/foundation.js})" type="text/javascript"></script>]
    4 <script type="text/javascript">
    5   // Charger les scripts foundations
    6   $(function () {
    7         $.getScript("[(#CHEMIN{lib/foundation-6/js/vendorwhat-input.min.js}|timestamp)]");
    8         $.getScript("[(#CHEMIN{javascript/app.js}|timestamp)]");
    9   });
    10 </script>
     3        [<script src="(#CHEMIN{lib/foundation-6/js/vendor/foundation.js})" type="text/javascript"></script>]
     4        <script type="text/javascript">
     5                // Charger les scripts foundations
     6                $(function () {
     7                        $.getScript("[(#CHEMIN{lib/foundation-6/js/vendorwhat-input.min.js}|timestamp)]");
     8                        $.getScript("[(#CHEMIN{javascript/app.js}|timestamp)]");
     9                });
     10        </script>
    1111]
  • _plugins_/foundation_6/trunk/inclure/reveal-close.html

    r94385 r96417  
    11[(#REM)
    2 Fichier pour gérer la fermeture des reveal-modal de foundation
     2        Fichier pour gérer la fermeture des reveal-modal de foundation
    33]
    44
    55[(#LIRE_CONSTANTE{_AJAX}|oui|ou{#ENV{content}|oui})
    6 <button class="close-button" data-close aria-label="Close reveal" type="button">
    7     <span aria-hidden="true">&times;</span>
    8 </button>
     6        <button class="close-button" data-close aria-label="Close reveal" type="button">
     7                <span aria-hidden="true">&times;</span>
     8        </button>
    99]
  • _plugins_/foundation_6/trunk/lang/foundation_6_fr.php

    r93801 r96417  
    55
    66$GLOBALS[$GLOBALS['idx_lang']] = array(
    7     'cfg_exemple' => 'Exemple',
    8     'cfg_exemple_explication' => 'Explication de cet exemple',
    9     'cfg_titre_parametrages' => 'Paramétrages',
    10     'desactiver' => 'Désactiver Foundation',
    11     'foundation_6_titre' => 'Foundation',
    12     'titre_page_configurer_foundation' => 'Configuration de Fondation',
    13     'foundation_3' => 'Foundation 3',
    14     'foundation_4' => 'Foundation 4',
    15     'foundation_5' => 'Foundation 5',
    16     'activer_javascript' => 'Activer les javascripts de foundation ?',
    17     'activer_javascript_explication' => "Si vous n'utilisez pas les composants javascripts de foundation il est inutile de les charger dans SPIP.",
    18     'fichier_htc' => 'Activer le fichier boxsizing.htc ?',
    19     'fichier_htc_explication' => '<strong>Exprimental:</strong> Ce fichier peu améliorer la gestion de foundation sous IE7. Il faudra activer les fichier .htc dans le fichier .htaccess en ajoutant "AddType text/x-component .htc".',
    20     'version' => 'Version de foundation',
    21     'version_explication' => "Choisir la version de foundation à utiliser dans l'espace public.",
    22     'icons' => 'Utiliser les icones Foundation ?',
    23     'icons_explication' => 'Ajouter les CSS pour les <a href="http://zurb.com/playground/foundation-icon-fonts-3" title="foundation icon">icones foundation</a>.',
    24     'syntaxe_deprecie' => 'La syntaxe #ARRAY{nombre, type} est dépréciée au profit de #ARRAY{type, nombre} et sera supprimée dans les futurs versions de foundation',
    25     'erreur_js' => "L'utilisation du squelette @squelette@ requière l'activation du javascript de foundation"
     7        'cfg_exemple' => 'Exemple',
     8        'cfg_exemple_explication' => 'Explication de cet exemple',
     9        'cfg_titre_parametrages' => 'Paramétrages',
     10        'desactiver' => 'Désactiver Foundation',
     11        'foundation_6_titre' => 'Foundation',
     12        'titre_page_configurer_foundation' => 'Configuration de Fondation',
     13        'foundation_3' => 'Foundation 3',
     14        'foundation_4' => 'Foundation 4',
     15        'foundation_5' => 'Foundation 5',
     16        'activer_javascript' => 'Activer les javascripts de foundation ?',
     17        'activer_javascript_explication' => "Si vous n'utilisez pas les composants javascripts de foundation il est inutile de les charger dans SPIP.",
     18        'fichier_htc' => 'Activer le fichier boxsizing.htc ?',
     19        'fichier_htc_explication' => '<strong>Exprimental:</strong> Ce fichier peu améliorer la gestion de foundation sous IE7. Il faudra activer les fichier .htc dans le fichier .htaccess en ajoutant "AddType text/x-component .htc".',
     20        'version' => 'Version de foundation',
     21        'version_explication' => "Choisir la version de foundation à utiliser dans l'espace public.",
     22        'icons' => 'Utiliser les icones Foundation ?',
     23        'icons_explication' => 'Ajouter les CSS pour les <a href="http://zurb.com/playground/foundation-icon-fonts-3" title="foundation icon">icones foundation</a>.',
     24        'syntaxe_deprecie' => 'La syntaxe #ARRAY{nombre, type} est dépréciée au profit de #ARRAY{type, nombre} et sera supprimée dans les futurs versions de foundation',
     25        'erreur_js' => "L'utilisation du squelette @squelette@ requière l'activation du javascript de foundation"
    2626);
  • _plugins_/foundation_6/trunk/lib/foundation-6/css/foundation.css

    r96338 r96417  
    1313   */
    1414html {
    15   font-family: sans-serif;
    16   /* 1 */
    17   -ms-text-size-adjust: 100%;
    18   /* 2 */
    19   -webkit-text-size-adjust: 100%;
    20   /* 2 */ }
     15        font-family: sans-serif;
     16        /* 1 */
     17        -ms-text-size-adjust: 100%;
     18        /* 2 */
     19        -webkit-text-size-adjust: 100%;
     20        /* 2 */
     21}
    2122
    2223/**
     
    2425   */
    2526body {
    26   margin: 0; }
     27        margin: 0;
     28}
    2729
    2830/* HTML5 display definitions
     
    4749section,
    4850summary {
    49   display: block; }
     51        display: block;
     52}
    5053
    5154/**
     
    5760progress,
    5861video {
    59   display: inline-block;
    60   /* 1 */
    61   vertical-align: baseline;
    62   /* 2 */ }
     62        display: inline-block;
     63        /* 1 */
     64        vertical-align: baseline;
     65        /* 2 */
     66}
    6367
    6468/**
     
    6771   */
    6872audio:not([controls]) {
    69   display: none;
    70   height: 0; }
     73        display: none;
     74        height: 0;
     75}
    7176
    7277/**
     
    7681[hidden],
    7782template {
    78   display: none; }
     83        display: none;
     84}
    7985
    8086/* Links
     
    8490   */
    8591a {
    86   background-color: transparent; }
     92        background-color: transparent; }
    8793
    8894/**
     
    9298a:active,
    9399a:hover {
    94   outline: 0; }
     100        outline: 0;
     101}
    95102
    96103/* Text-level semantics
     
    100107   */
    101108abbr[title] {
    102   border-bottom: 1px dotted; }
     109        border-bottom: 1px dotted;
     110}
    103111
    104112/**
     
    107115b,
    108116strong {
    109   font-weight: bold; }
     117        font-weight: bold;
     118}
    110119
    111120/**
     
    113122   */
    114123dfn {
    115   font-style: italic; }
     124        font-style: italic;
     125}
    116126
    117127/**
     
    120130   */
    121131h1 {
    122   font-size: 2em;
    123   margin: 0.67em 0; }
     132        font-size: 2em;
     133        margin: 0.67em 0;
     134}
    124135
    125136/**
     
    127138   */
    128139mark {
    129   background: #ff0;
    130   color: #000; }
     140        background: #ff0;
     141        color: #000;
     142}
    131143
    132144/**
     
    134146   */
    135147small {
    136   font-size: 80%; }
     148        font-size: 80%;
     149}
    137150
    138151/**
     
    141154sub,
    142155sup {
    143   font-size: 75%;
    144   line-height: 0;
    145   position: relative;
    146   vertical-align: baseline; }
     156        font-size: 75%;
     157        line-height: 0;
     158        position: relative;
     159        vertical-align: baseline;
     160}
    147161
    148162sup {
    149   top: -0.5em; }
     163        top: -0.5em;
     164}
    150165
    151166sub {
    152   bottom: -0.25em; }
     167        bottom: -0.25em;
     168}
    153169
    154170/* Embedded content
     
    158174   */
    159175img {
    160   border: 0; }
     176        border: 0;
     177}
    161178
    162179/**
     
    164181   */
    165182svg:not(:root) {
    166   overflow: hidden; }
     183        overflow: hidden;
     184}
    167185
    168186/* Grouping content
     
    172190   */
    173191figure {
    174   margin: 1em 40px; }
     192        margin: 1em 40px;
     193}
    175194
    176195/**
     
    178197   */
    179198hr {
    180   box-sizing: content-box;
    181   height: 0; }
     199        box-sizing: content-box;
     200        height: 0;
     201}
    182202
    183203/**
     
    185205   */
    186206pre {
    187   overflow: auto; }
     207        overflow: auto;
     208}
    188209
    189210/**
     
    194215pre,
    195216samp {
    196   font-family: monospace, monospace;
    197   font-size: 1em; }
     217        font-family: monospace, monospace;
     218        font-size: 1em;
     219}
    198220
    199221/* Forms
     
    214236select,
    215237textarea {
    216   color: inherit;
    217   /* 1 */
    218   font: inherit;
    219   /* 2 */
    220   margin: 0;
    221   /* 3 */ }
     238        color: inherit;
     239        /* 1 */
     240        font: inherit;
     241        /* 2 */
     242        margin: 0;
     243        /* 3 */
     244}
    222245
    223246/**
     
    225248   */
    226249button {
    227   overflow: visible; }
     250        overflow: visible;
     251}
    228252
    229253/**
     
    235259button,
    236260select {
    237   text-transform: none; }
     261        text-transform: none;
     262}
    238263
    239264/**
     
    248273input[type="reset"],
    249274input[type="submit"] {
    250   -webkit-appearance: button;
    251   /* 2 */
    252   cursor: pointer;
    253   /* 3 */ }
     275        -webkit-appearance: button;
     276        /* 2 */
     277        cursor: pointer;
     278        /* 3 */
     279}
    254280
    255281/**
     
    258284button[disabled],
    259285html input[disabled] {
    260   cursor: default; }
     286        cursor: default;
     287}
    261288
    262289/**
     
    265292button::-moz-focus-inner,
    266293input::-moz-focus-inner {
    267   border: 0;
    268   padding: 0; }
     294        border: 0;
     295        padding: 0;
     296}
    269297
    270298/**
     
    273301   */
    274302input {
    275   line-height: normal; }
     303        line-height: normal;
     304}
    276305
    277306/**
     
    284313input[type="checkbox"],
    285314input[type="radio"] {
    286   box-sizing: border-box;
    287   /* 1 */
    288   padding: 0;
    289   /* 2 */ }
     315        box-sizing: border-box;
     316        /* 1 */
     317        padding: 0;
     318        /* 2 */
     319}
    290320
    291321/**
     
    296326input[type="number"]::-webkit-inner-spin-button,
    297327input[type="number"]::-webkit-outer-spin-button {
    298   height: auto; }
     328        height: auto;
     329}
    299330
    300331/**
     
    303334   */
    304335input[type="search"] {
    305   -webkit-appearance: textfield;
    306   /* 1 */
    307   box-sizing: content-box;
    308   /* 2 */ }
     336        -webkit-appearance: textfield;
     337        /* 1 */
     338        box-sizing: content-box;
     339        /* 2 */
     340}
    309341
    310342/**
     
    315347input[type="search"]::-webkit-search-cancel-button,
    316348input[type="search"]::-webkit-search-decoration {
    317   -webkit-appearance: none; }
     349        -webkit-appearance: none;
     350}
    318351
    319352/**
     
    325358    margin: 0 2px;
    326359    padding: 0.35em 0.625em 0.75em;
    327   } */
     360} */
    328361/**
    329362   * 1. Correct `color` not being inherited in IE 8/9/10/11.
     
    340373   */
    341374textarea {
    342   overflow: auto; }
     375        overflow: auto;
     376}
    343377
    344378/**
     
    347381   */
    348382optgroup {
    349   font-weight: bold; }
     383        font-weight: bold;
     384}
    350385
    351386/* Tables
     
    355390   */
    356391table {
    357   border-collapse: collapse;
    358   border-spacing: 0; }
     392        border-collapse: collapse;
     393        border-spacing: 0;
     394}
    359395
    360396td,
    361397th {
    362   padding: 0; }
     398        padding: 0;
     399}
    363400
    364401.foundation-mq {
    365   font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"; }
     402        font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em";
     403}
    366404
    367405html {
    368   font-size: 100%;
    369   box-sizing: border-box; }
     406        font-size: 100%;
     407        box-sizing: border-box;
     408}
    370409
    371410*,
    372411*::before,
    373412*::after {
    374   box-sizing: inherit; }
     413        box-sizing: inherit;
     414}
    375415
    376416body {
    377   padding: 0;
    378   margin: 0;
    379   font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    380   font-weight: normal;
    381   line-height: 1.5;
    382   color: #0a0a0a;
    383   background: #fefefe;
    384   -webkit-font-smoothing: antialiased;
    385   -moz-osx-font-smoothing: grayscale; }
     417        padding: 0;
     418        margin: 0;
     419        font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
     420        font-weight: normal;
     421        line-height: 1.5;
     422        color: #0a0a0a;
     423        background: #fefefe;
     424        -webkit-font-smoothing: antialiased;
     425        -moz-osx-font-smoothing: grayscale;
     426}
    386427
    387428img {
    388   max-width: 100%;
    389   height: auto;
    390   -ms-interpolation-mode: bicubic;
    391   display: inline-block;
    392   vertical-align: middle; }
     429        max-width: 100%;
     430        height: auto;
     431        -ms-interpolation-mode: bicubic;
     432        display: inline-block;
     433        vertical-align: middle;
     434}
    393435
    394436textarea {
    395   height: auto;
    396   min-height: 50px;
    397   border-radius: 0; }
     437        height: auto;
     438        min-height: 50px;
     439        border-radius: 0;
     440}
    398441
    399442select {
    400   width: 100%;
    401   border-radius: 0; }
     443        width: 100%;
     444        border-radius: 0;
     445}
    402446
    403447#map_canvas img,
     
    410454.mqa-display embed,
    411455.mqa-display object {
    412   max-width: none !important; }
     456        max-width: none !important;
     457}
    413458
    414459button {
    415   -webkit-appearance: none;
    416   -moz-appearance: none;
    417   background: transparent;
    418   padding: 0;
    419   border: 0;
    420   border-radius: 0;
    421   line-height: 1; }
    422   [data-whatinput='mouse'] button {
    423     outline: 0; }
     460        -webkit-appearance: none;
     461        -moz-appearance: none;
     462        background: transparent;
     463        padding: 0;
     464        border: 0;
     465        border-radius: 0;
     466        line-height: 1;
     467}
     468[data-whatinput='mouse'] button {
     469        outline: 0;
     470}
    424471
    425472.is-visible {
    426   display: block !important; }
     473        display: block !important;
     474}
    427475
    428476.is-hidden {
    429   display: none !important; }
     477        display: none !important;
     478}
    430479
    431480.row {
    432   max-width: 75rem;
    433   margin-left: auto;
    434   margin-right: auto; }
    435   .row::before, .row::after {
    436     content: ' ';
    437     display: table;
    438     flex-basis: 0;
    439     order: 1; }
    440   .row::after {
    441     clear: both; }
    442   .row.collapse > .column, .row.collapse > .columns {
    443     padding-left: 0;
    444     padding-right: 0; }
    445   .row .row {
    446     margin-left: -0.625rem;
    447     margin-right: -0.625rem; }
    448     @media screen and (min-width: 40em) {
    449       .row .row {
    450         margin-left: -0.9375rem;
    451         margin-right: -0.9375rem; } }
    452     .row .row.collapse {
    453       margin-left: 0;
    454       margin-right: 0; }
    455   .row.expanded {
    456     max-width: none; }
    457     .row.expanded .row {
    458       margin-left: auto;
    459       margin-right: auto; }
     481        max-width: 75rem;
     482        margin-left: auto;
     483        margin-right: auto;
     484}
     485.row::before, .row::after {
     486        content: ' ';
     487        display: table;
     488        flex-basis: 0;
     489        order: 1;
     490}
     491.row::after {
     492        clear: both;
     493}
     494.row.collapse > .column, .row.collapse > .columns {
     495        padding-left: 0;
     496        padding-right: 0;
     497}
     498.row .row {
     499        margin-left: -0.625rem;
     500        margin-right: -0.625rem;
     501}
     502@media screen and (min-width: 40em) {
     503        .row .row {
     504                margin-left: -0.9375rem;
     505                margin-right: -0.9375rem;
     506        }
     507}
     508.row .row.collapse {
     509        margin-left: 0;
     510        margin-right: 0;
     511}
     512.row.expanded {
     513        max-width: none;
     514}
     515.row.expanded .row {
     516        margin-left: auto;
     517        margin-right: auto;
     518}
    460519
    461520.column, .columns {
    462   width: 100%;
    463   float: left;
    464   padding-left: 0.625rem;
    465   padding-right: 0.625rem; }
    466   @media screen and (min-width: 40em) {
    467     .column, .columns {
    468       padding-left: 0.9375rem;
    469       padding-right: 0.9375rem; } }
    470   .column:last-child:not(:first-child), .columns:last-child:not(:first-child) {
    471     float: right; }
    472   .column.end:last-child:last-child, .end.columns:last-child:last-child {
    473     float: left; }
     521        width: 100%;
     522        float: left;
     523        padding-left: 0.625rem;
     524        padding-right: 0.625rem;
     525}
     526@media screen and (min-width: 40em) {
     527        .column, .columns {
     528                padding-left: 0.9375rem;
     529                padding-right: 0.9375rem;
     530        }
     531}
     532.column:last-child:not(:first-child), .columns:last-child:not(:first-child) {
     533        float: right;
     534}
     535.column.end:last-child:last-child, .end.columns:last-child:last-child {
     536        float: left;
     537}
    474538
    475539.column.row.row, .row.row.columns {
    476   float: none; }
    477   .row .column.row.row, .row .row.row.columns {
    478     padding-left: 0;
    479     padding-right: 0;
    480     margin-left: 0;
    481     margin-right: 0; }
     540        float: none;
     541}
     542.row .column.row.row, .row .row.row.columns {
     543        padding-left: 0;
     544        padding-right: 0;
     545        margin-left: 0;
     546        margin-right: 0;
     547}
    482548
    483549.small-1 {
    484   width: 8.33333%; }
     550        width: 8.33333%;
     551}
    485552
    486553.small-push-1 {
    487   position: relative;
    488   left: 8.33333%; }
     554        position: relative;
     555        left: 8.33333%;
     556}
    489557
    490558.small-pull-1 {
    491   position: relative;
    492   left: -8.33333%; }
     559        position: relative;
     560        left: -8.33333%;
     561}
    493562
    494563.small-offset-0 {
    495   margin-left: 0%; }
     564        margin-left: 0%;
     565}
    496566
    497567.small-2 {
    498   width: 16.66667%; }
     568        width: 16.66667%;
     569}
    499570
    500571.small-push-2 {
    501   position: relative;
    502   left: 16.66667%; }
     572        position: relative;
     573        left: 16.66667%;
     574}
    503575
    504576.small-pull-2 {
    505   position: relative;
    506   left: -16.66667%; }
     577        position: relative;
     578        left: -16.66667%;
     579}
    507580
    508581.small-offset-1 {
    509   margin-left: 8.33333%; }
     582        margin-left: 8.33333%;
     583}
    510584
    511585.small-3 {
    512   width: 25%; }
     586        width: 25%;
     587}
    513588
    514589.small-push-3 {
    515   position: relative;
    516   left: 25%; }
     590        position: relative;
     591        left: 25%;
     592}
    517593
    518594.small-pull-3 {
    519   position: relative;
    520   left: -25%; }
     595        position: relative;
     596        left: -25%;
     597}
    521598
    522599.small-offset-2 {
    523   margin-left: 16.66667%; }
     600        margin-left: 16.66667%;
     601}
    524602
    525603.small-4 {
    526   width: 33.33333%; }
     604        width: 33.33333%;
     605}
    527606
    528607.small-push-4 {
    529   position: relative;
    530   left: 33.33333%; }
     608        position: relative;
     609        left: 33.33333%;
     610}
    531611
    532612.small-pull-4 {
    533   position: relative;
    534   left: -33.33333%; }
     613        position: relative;
     614        left: -33.33333%;
     615}
    535616
    536617.small-offset-3 {
    537   margin-left: 25%; }
     618        margin-left: 25%;
     619}
    538620
    539621.small-5 {
    540   width: 41.66667%; }
     622        width: 41.66667%;
     623}
    541624
    542625.small-push-5 {
    543   position: relative;
    544   left: 41.66667%; }
     626        position: relative;
     627        left: 41.66667%;
     628}
    545629
    546630.small-pull-5 {
    547   position: relative;
    548   left: -41.66667%; }
     631        position: relative;
     632        left: -41.66667%;
     633}
    549634
    550635.small-offset-4 {
    551   margin-left: 33.33333%; }
     636        margin-left: 33.33333%;
     637}
    552638
    553639.small-6 {
    554   width: 50%; }
     640        width: 50%;
     641}
    555642
    556643.small-push-6 {
    557   position: relative;
    558   left: 50%; }
     644        position: relative;
     645        left: 50%;
     646}
    559647
    560648.small-pull-6 {
    561   position: relative;
    562   left: -50%; }
     649        position: relative;
     650        left: -50%;
     651}
    563652
    564653.small-offset-5 {
    565   margin-left: 41.66667%; }
     654        margin-left: 41.66667%;
     655}
    566656
    567657.small-7 {
    568   width: 58.33333%; }
     658        width: 58.33333%;
     659}
    569660
    570661.small-push-7 {
    571   position: relative;
    572   left: 58.33333%; }
     662        position: relative;
     663        left: 58.33333%;
     664}
    573665
    574666.small-pull-7 {
    575   position: relative;
    576   left: -58.33333%; }
     667        position: relative;
     668        left: -58.33333%;
     669}
    577670
    578671.small-offset-6 {
    579   margin-left: 50%; }
     672        margin-left: 50%;
     673}
    580674
    581675.small-8 {
    582   width: 66.66667%; }
     676        width: 66.66667%;
     677}
    583678
    584679.small-push-8 {
    585   position: relative;
    586   left: 66.66667%; }
     680        position: relative;
     681        left: 66.66667%;
     682}
    587683
    588684.small-pull-8 {
    589   position: relative;
    590   left: -66.66667%; }
     685        position: relative;
     686        left: -66.66667%;
     687}
    591688
    592689.small-offset-7 {
    593   margin-left: 58.33333%; }
     690        margin-left: 58.33333%;
     691}
    594692
    595693.small-9 {
    596   width: 75%; }
     694        width: 75%;
     695}
    597696
    598697.small-push-9 {
    599   position: relative;
    600   left: 75%; }
     698        position: relative;
     699        left: 75%;
     700}
    601701
    602702.small-pull-9 {
    603   position: relative;
    604   left: -75%; }
     703        position: relative;
     704        left: -75%;
     705}
    605706
    606707.small-offset-8 {
    607   margin-left: 66.66667%; }
     708        margin-left: 66.66667%;
     709}
    608710
    609711.small-10 {
    610   width: 83.33333%; }
     712        width: 83.33333%;
     713}
    611714
    612715.small-push-10 {
    613   position: relative;
    614   left: 83.33333%; }
     716        position: relative;
     717        left: 83.33333%;
     718}
    615719
    616720.small-pull-10 {
    617   position: relative;
    618   left: -83.33333%; }
     721        position: relative;
     722        left: -83.33333%;
     723}
    619724
    620725.small-offset-9 {
    621   margin-left: 75%; }
     726        margin-left: 75%;
     727}
    622728
    623729.small-11 {
    624   width: 91.66667%; }
     730        width: 91.66667%;
     731}
    625732
    626733.small-push-11 {
    627   position: relative;
    628   left: 91.66667%; }
     734        position: relative;
     735        left: 91.66667%;
     736}
    629737
    630738.small-pull-11 {
    631   position: relative;
    632   left: -91.66667%; }
     739        position: relative;
     740        left: -91.66667%;
     741}
    633742
    634743.small-offset-10 {
    635   margin-left: 83.33333%; }
     744        margin-left: 83.33333%;
     745}
    636746
    637747.small-12 {
    638   width: 100%; }
     748        width: 100%;
     749}
    639750
    640751.small-offset-11 {
    641   margin-left: 91.66667%; }
     752        margin-left: 91.66667%;
     753}
    642754
    643755.small-up-1 > .column, .small-up-1 > .columns {
    644   width: 100%;
    645   float: left; }
    646   .small-up-1 > .column:nth-of-type(1n), .small-up-1 > .columns:nth-of-type(1n) {
    647     clear: none; }
    648   .small-up-1 > .column:nth-of-type(1n+1), .small-up-1 > .columns:nth-of-type(1n+1) {
    649     clear: both; }
    650   .small-up-1 > .column:last-child, .small-up-1 > .columns:last-child {
    651     float: left; }
     756        width: 100%;
     757        float: left;
     758}
     759.small-up-1 > .column:nth-of-type(1n), .small-up-1 > .columns:nth-of-type(1n) {
     760        clear: none;
     761}
     762.small-up-1 > .column:nth-of-type(1n+1), .small-up-1 > .columns:nth-of-type(1n+1) {
     763        clear: both;
     764}
     765.small-up-1 > .column:last-child, .small-up-1 > .columns:last-child {
     766        float: left;
     767}
    652768
    653769.small-up-2 > .column, .small-up-2 > .columns {
    654   width: 50%;
    655   float: left; }
    656   .small-up-2 > .column:nth-of-type(1n), .small-up-2 > .columns:nth-of-type(1n) {
    657     clear: none; }
    658   .small-up-2 > .column:nth-of-type(2n+1), .small-up-2 > .columns:nth-of-type(2n+1) {
    659     clear: both; }
    660   .small-up-2 > .column:last-child, .small-up-2 > .columns:last-child {
    661     float: left; }
     770        width: 50%;
     771        float: left;
     772}
     773.small-up-2 > .column:nth-of-type(1n), .small-up-2 > .columns:nth-of-type(1n) {
     774        clear: none;
     775}
     776.small-up-2 > .column:nth-of-type(2n+1), .small-up-2 > .columns:nth-of-type(2n+1) {
     777        clear: both;
     778}
     779.small-up-2 > .column:last-child, .small-up-2 > .columns:last-child {
     780        float: left;
     781}
    662782
    663783.small-up-3 > .column, .small-up-3 > .columns {
    664   width: 33.33333%;
    665   float: left; }
    666   .small-up-3 > .column:nth-of-type(1n), .small-up-3 > .columns:nth-of-type(1n) {
    667     clear: none; }
    668   .small-up-3 > .column:nth-of-type(3n+1), .small-up-3 > .columns:nth-of-type(3n+1) {
    669     clear: both; }
    670   .small-up-3 > .column:last-child, .small-up-3 > .columns:last-child {
    671     float: left; }
     784        width: 33.33333%;
     785        float: left;
     786}
     787.small-up-3 > .column:nth-of-type(1n), .small-up-3 > .columns:nth-of-type(1n) {
     788        clear: none;
     789}
     790.small-up-3 > .column:nth-of-type(3n+1), .small-up-3 > .columns:nth-of-type(3n+1) {
     791        clear: both;
     792}
     793.small-up-3 > .column:last-child, .small-up-3 > .columns:last-child {
     794        float: left;
     795}
    672796
    673797.small-up-4 > .column, .small-up-4 > .columns {
    674   width: 25%;
    675   float: left; }
    676   .small-up-4 > .column:nth-of-type(1n), .small-up-4 > .columns:nth-of-type(1n) {
    677     clear: none; }
    678   .small-up-4 > .column:nth-of-type(4n+1), .small-up-4 > .columns:nth-of-type(4n+1) {
    679     clear: both; }
    680   .small-up-4 > .column:last-child, .small-up-4 > .columns:last-child {
    681     float: left; }
     798        width: 25%;
     799        float: left;
     800}
     801.small-up-4 > .column:nth-of-type(1n), .small-up-4 > .columns:nth-of-type(1n) {
     802        clear: none;
     803}
     804.small-up-4 > .column:nth-of-type(4n+1), .small-up-4 > .columns:nth-of-type(4n+1) {
     805        clear: both;
     806}
     807.small-up-4 > .column:last-child, .small-up-4 > .columns:last-child {
     808        float: left;
     809}
    682810
    683811.small-up-5 > .column, .small-up-5 > .columns {
    684   width: 20%;
    685   float: left; }
    686   .small-up-5 > .column:nth-of-type(1n), .small-up-5 > .columns:nth-of-type(1n) {
    687     clear: none; }
    688   .small-up-5 > .column:nth-of-type(5n+1), .small-up-5 > .columns:nth-of-type(5n+1) {
    689     clear: both; }
    690   .small-up-5 > .column:last-child, .small-up-5 > .columns:last-child {
    691     float: left; }
     812        width: 20%;
     813        float: left;
     814}
     815.small-up-5 > .column:nth-of-type(1n), .small-up-5 > .columns:nth-of-type(1n) {
     816        clear: none;
     817}
     818.small-up-5 > .column:nth-of-type(5n+1), .small-up-5 > .columns:nth-of-type(5n+1) {
     819        clear: both;
     820}
     821.small-up-5 > .column:last-child, .small-up-5 > .columns:last-child {
     822        float: left;
     823}
    692824
    693825.small-up-6 > .column, .small-up-6 > .columns {
    694   width: 16.66667%;
    695   float: left; }
    696   .small-up-6 > .column:nth-of-type(1n), .small-up-6 > .columns:nth-of-type(1n) {
    697     clear: none; }
    698   .small-up-6 > .column:nth-of-type(6n+1), .small-up-6 > .columns:nth-of-type(6n+1) {
    699     clear: both; }
    700   .small-up-6 > .column:last-child, .small-up-6 > .columns:last-child {
    701     float: left; }
     826        width: 16.66667%;
     827        float: left;
     828}
     829.small-up-6 > .column:nth-of-type(1n), .small-up-6 > .columns:nth-of-type(1n) {
     830        clear: none;
     831}
     832.small-up-6 > .column:nth-of-type(6n+1), .small-up-6 > .columns:nth-of-type(6n+1) {
     833        clear: both;
     834}
     835.small-up-6 > .column:last-child, .small-up-6 > .columns:last-child {
     836        float: left;
     837}
    702838
    703839.small-up-7 > .column, .small-up-7 > .columns {
    704   width: 14.28571%;
    705   float: left; }
    706   .small-up-7 > .column:nth-of-type(1n), .small-up-7 > .columns:nth-of-type(1n) {
    707     clear: none; }
    708   .small-up-7 > .column:nth-of-type(7n+1), .small-up-7 > .columns:nth-of-type(7n+1) {
    709     clear: both; }
    710   .small-up-7 > .column:last-child, .small-up-7 > .columns:last-child {
    711     float: left; }
     840        width: 14.28571%;
     841        float: left;
     842}
     843.small-up-7 > .column:nth-of-type(1n), .small-up-7 > .columns:nth-of-type(1n) {
     844        clear: none;
     845}
     846.small-up-7 > .column:nth-of-type(7n+1), .small-up-7 > .columns:nth-of-type(7n+1) {
     847        clear: both;
     848}
     849.small-up-7 > .column:last-child, .small-up-7 > .columns:last-child {
     850        float: left;
     851}
    712852
    713853.small-up-8 > .column, .small-up-8 > .columns {
    714   width: 12.5%;
    715   float: left; }
    716   .small-up-8 > .column:nth-of-type(1n), .small-up-8 > .columns:nth-of-type(1n) {
    717     clear: none; }
    718   .small-up-8 > .column:nth-of-type(8n+1), .small-up-8 > .columns:nth-of-type(8n+1) {
    719     clear: both; }
    720   .small-up-8 > .column:last-child, .small-up-8 > .columns:last-child {
    721     float: left; }
     854        width: 12.5%;
     855        float: left;
     856}
     857.small-up-8 > .column:nth-of-type(1n), .small-up-8 > .columns:nth-of-type(1n) {
     858        clear: none;
     859}
     860.small-up-8 > .column:nth-of-type(8n+1), .small-up-8 > .columns:nth-of-type(8n+1) {
     861        clear: both;
     862}
     863.small-up-8 > .column:last-child, .small-up-8 > .columns:last-child {
     864        float: left;
     865}
    722866
    723867.small-collapse > .column, .small-collapse > .columns {
    724   padding-left: 0;
    725   padding-right: 0; }
     868        padding-left: 0;
     869        padding-right: 0;
     870}
    726871
    727872.small-collapse .row {
    728   margin-left: 0;
    729   margin-right: 0; }
     873        margin-left: 0;
     874        margin-right: 0;
     875}
    730876
    731877.small-uncollapse > .column, .small-uncollapse > .columns {
    732   padding-left: 0.625rem;
    733   padding-right: 0.625rem; }
     878        padding-left: 0.625rem;
     879        padding-right: 0.625rem;
     880}
    734881
    735882.small-centered {
    736   float: none;
    737   margin-left: auto;
    738   margin-right: auto; }
     883        float: none;
     884        margin-left: auto;
     885        margin-right: auto;
     886}
    739887
    740888.small-uncentered,
    741889.small-push-0,
    742890.small-pull-0 {
    743   position: static;
    744   margin-left: 0;
    745   margin-right: 0;
    746   float: left; }
     891        position: static;
     892        margin-left: 0;
     893        margin-right: 0;
     894        float: left;
     895}
    747896
    748897@media screen and (min-width: 40em) {
    749   .medium-1 {
    750     width: 8.33333%; }
    751   .medium-push-1 {
    752     position: relative;
    753     left: 8.33333%; }
    754   .medium-pull-1 {
    755     position: relative;
    756     left: -8.33333%; }
    757   .medium-offset-0 {
    758     margin-left: 0%; }
    759   .medium-2 {
    760     width: 16.66667%; }
    761   .medium-push-2 {
    762     position: relative;
    763     left: 16.66667%; }
    764   .medium-pull-2 {
    765     position: relative;
    766     left: -16.66667%; }
    767   .medium-offset-1 {
    768     margin-left: 8.33333%; }
    769   .medium-3 {
    770     width: 25%; }
    771   .medium-push-3 {
    772     position: relative;
    773     left: 25%; }
    774   .medium-pull-3 {
    775     position: relative;
    776     left: -25%; }
    777   .medium-offset-2 {
    778     margin-left: 16.66667%; }
    779   .medium-4 {
    780     width: 33.33333%; }
    781   .medium-push-4 {
    782     position: relative;
    783     left: 33.33333%; }
    784   .medium-pull-4 {
    785     position: relative;
    786     left: -33.33333%; }
    787   .medium-offset-3 {
    788     margin-left: 25%; }
    789   .medium-5 {
    790     width: 41.66667%; }
    791   .medium-push-5 {
    792     position: relative;
    793     left: 41.66667%; }
    794   .medium-pull-5 {
    795     position: relative;
    796     left: -41.66667%; }
    797   .medium-offset-4 {
    798     margin-left: 33.33333%; }
    799   .medium-6 {
    800     width: 50%; }
    801   .medium-push-6 {
    802     position: relative;
    803     left: 50%; }
    804   .medium-pull-6 {
    805     position: relative;
    806     left: -50%; }
    807   .medium-offset-5 {
    808     margin-left: 41.66667%; }
    809   .medium-7 {
    810     width: 58.33333%; }
    811   .medium-push-7 {
    812     position: relative;
    813     left: 58.33333%; }
    814   .medium-pull-7 {
    815     position: relative;
    816     left: -58.33333%; }
    817   .medium-offset-6 {
    818     margin-left: 50%; }
    819   .medium-8 {
    820     width: 66.66667%; }
    821   .medium-push-8 {
    822     position: relative;
    823     left: 66.66667%; }
    824   .medium-pull-8 {
    825     position: relative;
    826     left: -66.66667%; }
    827   .medium-offset-7 {
    828     margin-left: 58.33333%; }
    829   .medium-9 {
    830     width: 75%; }
    831   .medium-push-9 {
    832     position: relative;
    833     left: 75%; }
    834   .medium-pull-9 {
    835     position: relative;
    836     left: -75%; }
    837   .medium-offset-8 {
    838     margin-left: 66.66667%; }
    839   .medium-10 {
    840     width: 83.33333%; }
    841   .medium-push-10 {
    842     position: relative;
    843     left: 83.33333%; }
    844   .medium-pull-10 {
    845     position: relative;
    846     left: -83.33333%; }
    847   .medium-offset-9 {
    848     margin-left: 75%; }
    849   .medium-11 {
    850     width: 91.66667%; }
    851   .medium-push-11 {
    852     position: relative;
    853     left: 91.66667%; }
    854   .medium-pull-11 {
    855     position: relative;
    856     left: -91.66667%; }
    857   .medium-offset-10 {
    858     margin-left: 83.33333%; }
    859   .medium-12 {
    860     width: 100%; }
    861   .medium-offset-11 {
    862     margin-left: 91.66667%; }
    863   .medium-up-1 > .column, .medium-up-1 > .columns {
    864     width: 100%;
    865     float: left; }
    866     .medium-up-1 > .column:nth-of-type(1n), .medium-up-1 > .columns:nth-of-type(1n) {
    867       clear: none; }
    868     .medium-up-1 > .column:nth-of-type(1n+1), .medium-up-1 > .columns:nth-of-type(1n+1) {
    869       clear: both; }
    870     .medium-up-1 > .column:last-child, .medium-up-1 > .columns:last-child {
    871       float: left; }
    872   .medium-up-2 > .column, .medium-up-2 > .columns {
    873     width: 50%;
    874     float: left; }
    875     .medium-up-2 > .column:nth-of-type(1n), .medium-up-2 > .columns:nth-of-type(1n) {
    876       clear: none; }
    877     .medium-up-2 > .column:nth-of-type(2n+1), .medium-up-2 > .columns:nth-of-type(2n+1) {
    878       clear: both; }
    879     .medium-up-2 > .column:last-child, .medium-up-2 > .columns:last-child {
    880       float: left; }
    881   .medium-up-3 > .column, .medium-up-3 > .columns {
    882     width: 33.33333%;
    883     float: left; }
    884     .medium-up-3 > .column:nth-of-type(1n), .medium-up-3 > .columns:nth-of-type(1n) {
    885       clear: none; }
    886     .medium-up-3 > .column:nth-of-type(3n+1), .medium-up-3 > .columns:nth-of-type(3n+1) {
    887       clear: both; }
    888     .medium-up-3 > .column:last-child, .medium-up-3 > .columns:last-child {
    889       float: left; }
    890   .medium-up-4 > .column, .medium-up-4 > .columns {
    891     width: 25%;
    892     float: left; }
    893     .medium-up-4 > .column:nth-of-type(1n), .medium-up-4 > .columns:nth-of-type(1n) {
    894       clear: none; }
    895     .medium-up-4 > .column:nth-of-type(4n+1), .medium-up-4 > .columns:nth-of-type(4n+1) {
    896       clear: both; }
    897     .medium-up-4 > .column:last-child, .medium-up-4 > .columns:last-child {
    898       float: left; }
    899   .medium-up-5 > .column, .medium-up-5 > .columns {
    900     width: 20%;
    901     float: left; }
    902     .medium-up-5 > .column:nth-of-type(1n), .medium-up-5 > .columns:nth-of-type(1n) {
    903       clear: none; }
    904     .medium-up-5 > .column:nth-of-type(5n+1), .medium-up-5 > .columns:nth-of-type(5n+1) {
    905       clear: both; }
    906     .medium-up-5 > .column:last-child, .medium-up-5 > .columns:last-child {
    907       float: left; }
    908   .medium-up-6 > .column, .medium-up-6 > .columns {
    909     width: 16.66667%;
    910     float: left; }
    911     .medium-up-6 > .column:nth-of-type(1n), .medium-up-6 > .columns:nth-of-type(1n) {
    912       clear: none; }
    913     .medium-up-6 > .column:nth-of-type(6n+1), .medium-up-6 > .columns:nth-of-type(6n+1) {
    914       clear: both; }
    915     .medium-up-6 > .column:last-child, .medium-up-6 > .columns:last-child {
    916       float: left; }
    917   .medium-up-7 > .column, .medium-up-7 > .columns {
    918     width: 14.28571%;
    919     float: left; }
    920     .medium-up-7 > .column:nth-of-type(1n), .medium-up-7 > .columns:nth-of-type(1n) {
    921       clear: none; }
    922     .medium-up-7 > .column:nth-of-type(7n+1), .medium-up-7 > .columns:nth-of-type(7n+1) {
    923       clear: both; }
    924     .medium-up-7 > .column:last-child, .medium-up-7 > .columns:last-child {
    925       float: left; }
    926   .medium-up-8 > .column, .medium-up-8 > .columns {
    927     width: 12.5%;
    928     float: left; }
    929     .medium-up-8 > .column:nth-of-type(1n), .medium-up-8 > .columns:nth-of-type(1n) {
    930       clear: none; }
    931     .medium-up-8 > .column:nth-of-type(8n+1), .medium-up-8 > .columns:nth-of-type(8n+1) {
    932       clear: both; }
    933     .medium-up-8 > .column:last-child, .medium-up-8 > .columns:last-child {
    934       float: left; }
    935   .medium-collapse > .column, .medium-collapse > .columns {
    936     padding-left: 0;
    937     padding-right: 0; }
    938   .medium-collapse .row {
    939     margin-left: 0;
    940     margin-right: 0; }
    941   .medium-uncollapse > .column, .medium-uncollapse > .columns {
    942     padding-left: 0.9375rem;
    943     padding-right: 0.9375rem; }
    944   .medium-centered {
    945     float: none;
    946     margin-left: auto;
    947     margin-right: auto; }
    948   .medium-uncentered,
    949   .medium-push-0,
    950   .medium-pull-0 {
    951     position: static;
    952     margin-left: 0;
    953     margin-right: 0;
    954     float: left; } }
     898        .medium-1 {
     899                width: 8.33333%;
     900        }
     901        .medium-push-1 {
     902                position: relative;
     903                left: 8.33333%;
     904        }
     905        .medium-pull-1 {
     906                position: relative;
     907                left: -8.33333%;
     908        }
     909        .medium-offset-0 {
     910                margin-left: 0%;
     911        }
     912        .medium-2 {
     913                width: 16.66667%;
     914        }
     915        .medium-push-2 {
     916                position: relative;
     917                left: 16.66667%;
     918        }
     919        .medium-pull-2 {
     920                position: relative;
     921                left: -16.66667%;
     922        }
     923        .medium-offset-1 {
     924                margin-left: 8.33333%;
     925        }
     926        .medium-3 {
     927                width: 25%;
     928        }
     929        .medium-push-3 {
     930                position: relative;
     931                left: 25%;
     932        }
     933        .medium-pull-3 {
     934                position: relative;
     935                left: -25%;
     936        }
     937        .medium-offset-2 {
     938                margin-left: 16.66667%;
     939        }
     940        .medium-4 {
     941                width: 33.33333%;
     942        }
     943        .medium-push-4 {
     944                position: relative;
     945                left: 33.33333%;
     946        }
     947        .medium-pull-4 {
     948                position: relative;
     949                left: -33.33333%;
     950        }
     951        .medium-offset-3 {
     952                margin-left: 25%;
     953        }
     954        .medium-5 {
     955                width: 41.66667%;
     956        }
     957        .medium-push-5 {
     958                position: relative;
     959                left: 41.66667%;
     960        }
     961        .medium-pull-5 {
     962                position: relative;
     963                left: -41.66667%;
     964        }
     965        .medium-offset-4 {
     966                margin-left: 33.33333%;
     967        }
     968        .medium-6 {
     969                width: 50%;
     970        }
     971        .medium-push-6 {
     972                position: relative;
     973                left: 50%;
     974        }
     975        .medium-pull-6 {
     976                position: relative;
     977                left: -50%;
     978        }
     979        .medium-offset-5 {
     980                margin-left: 41.66667%;
     981        }
     982        .medium-7 {
     983                width: 58.33333%;
     984        }
     985        .medium-push-7 {
     986                position: relative;
     987                left: 58.33333%;
     988        }
     989        .medium-pull-7 {
     990                position: relative;
     991                left: -58.33333%;
     992        }
     993        .medium-offset-6 {
     994                margin-left: 50%;
     995        }
     996        .medium-8 {
     997                width: 66.66667%;
     998        }
     999        .medium-push-8 {
     1000                position: relative;
     1001                left: 66.66667%;
     1002        }
     1003        .medium-pull-8 {
     1004                position: relative;
     1005                left: -66.66667%;
     1006        }
     1007        .medium-offset-7 {
     1008                margin-left: 58.33333%;
     1009        }
     1010        .medium-9 {
     1011                width: 75%;
     1012        }
     1013        .medium-push-9 {
     1014                position: relative;
     1015                left: 75%;
     1016        }
     1017        .medium-pull-9 {
     1018                position: relative;
     1019                left: -75%;
     1020        }
     1021        .medium-offset-8 {
     1022                margin-left: 66.66667%;
     1023        }
     1024        .medium-10 {
     1025                width: 83.33333%;
     1026        }
     1027        .medium-push-10 {
     1028                position: relative;
     1029                left: 83.33333%;
     1030        }
     1031        .medium-pull-10 {
     1032                position: relative;
     1033                left: -83.33333%;
     1034        }
     1035        .medium-offset-9 {
     1036                margin-left: 75%;
     1037        }
     1038        .medium-11 {
     1039                width: 91.66667%;
     1040        }
     1041        .medium-push-11 {
     1042                position: relative;
     1043                left: 91.66667%;
     1044        }
     1045        .medium-pull-11 {
     1046                position: relative;
     1047                left: -91.66667%;
     1048        }
     1049        .medium-offset-10 {
     1050                margin-left: 83.33333%;
     1051        }
     1052        .medium-12 {
     1053                width: 100%;
     1054        }
     1055        .medium-offset-11 {
     1056                margin-left: 91.66667%;
     1057        }
     1058        .medium-up-1 > .column, .medium-up-1 > .columns {
     1059                width: 100%;
     1060                float: left;
     1061        }
     1062        .medium-up-1 > .column:nth-of-type(1n), .medium-up-1 > .columns:nth-of-type(1n) {
     1063                clear: none;
     1064        }
     1065        .medium-up-1 > .column:nth-of-type(1n+1), .medium-up-1 > .columns:nth-of-type(1n+1) {
     1066                clear: both;
     1067        }
     1068        .medium-up-1 > .column:last-child, .medium-up-1 > .columns:last-child {
     1069                float: left;
     1070        }
     1071        .medium-up-2 > .column, .medium-up-2 > .columns {
     1072                width: 50%;
     1073                float: left;
     1074        }
     1075        .medium-up-2 > .column:nth-of-type(1n), .medium-up-2 > .columns:nth-of-type(1n) {
     1076                clear: none;
     1077        }
     1078        .medium-up-2 > .column:nth-of-type(2n+1), .medium-up-2 > .columns:nth-of-type(2n+1) {
     1079                clear: both;
     1080        }
     1081        .medium-up-2 > .column:last-child, .medium-up-2 > .columns:last-child {
     1082                float: left;
     1083        }
     1084        .medium-up-3 > .column, .medium-up-3 > .columns {
     1085                width: 33.33333%;
     1086                float: left;
     1087        }
     1088        .medium-up-3 > .column:nth-of-type(1n), .medium-up-3 > .columns:nth-of-type(1n) {
     1089                clear: none;
     1090        }
     1091        .medium-up-3 > .column:nth-of-type(3n+1), .medium-up-3 > .columns:nth-of-type(3n+1) {
     1092                clear: both;
     1093        }
     1094        .medium-up-3 > .column:last-child, .medium-up-3 > .columns:last-child {
     1095                float: left;
     1096        }
     1097        .medium-up-4 > .column, .medium-up-4 > .columns {
     1098                width: 25%;
     1099                float: left;
     1100        }
     1101        .medium-up-4 > .column:nth-of-type(1n), .medium-up-4 > .columns:nth-of-type(1n) {
     1102                clear: none;
     1103        }
     1104        .medium-up-4 > .column:nth-of-type(4n+1), .medium-up-4 > .columns:nth-of-type(4n+1) {
     1105                clear: both;
     1106        }
     1107        .medium-up-4 > .column:last-child, .medium-up-4 > .columns:last-child {
     1108                float: left;
     1109        }
     1110        .medium-up-5 > .column, .medium-up-5 > .columns {
     1111                width: 20%;
     1112                float: left;
     1113        }
     1114        .medium-up-5 > .column:nth-of-type(1n), .medium-up-5 > .columns:nth-of-type(1n) {
     1115                clear: none;
     1116        }
     1117        .medium-up-5 > .column:nth-of-type(5n+1), .medium-up-5 > .columns:nth-of-type(5n+1) {
     1118                clear: both;
     1119        }
     1120        .medium-up-5 > .column:last-child, .medium-up-5 > .columns:last-child {
     1121                float: left;
     1122        }
     1123        .medium-up-6 > .column, .medium-up-6 > .columns {
     1124                width: 16.66667%;
     1125                float: left;
     1126        }
     1127        .medium-up-6 > .column:nth-of-type(1n), .medium-up-6 > .columns:nth-of-type(1n) {
     1128                clear: none;
     1129        }
     1130        .medium-up-6 > .column:nth-of-type(6n+1), .medium-up-6 > .columns:nth-of-type(6n+1) {
     1131                clear: both;
     1132        }
     1133        .medium-up-6 > .column:last-child, .medium-up-6 > .columns:last-child {
     1134                float: left;
     1135        }
     1136        .medium-up-7 > .column, .medium-up-7 > .columns {
     1137                width: 14.28571%;
     1138                float: left;
     1139        }
     1140        .medium-up-7 > .column:nth-of-type(1n), .medium-up-7 > .columns:nth-of-type(1n) {
     1141                clear: none;
     1142        }
     1143        .medium-up-7 > .column:nth-of-type(7n+1), .medium-up-7 > .columns:nth-of-type(7n+1) {
     1144                clear: both;
     1145        }
     1146        .medium-up-7 > .column:last-child, .medium-up-7 > .columns:last-child {
     1147                float: left;
     1148        }
     1149        .medium-up-8 > .column, .medium-up-8 > .columns {
     1150                width: 12.5%;
     1151                float: left;
     1152        }
     1153        .medium-up-8 > .column:nth-of-type(1n), .medium-up-8 > .columns:nth-of-type(1n) {
     1154                clear: none;
     1155        }
     1156        .medium-up-8 > .column:nth-of-type(8n+1), .medium-up-8 > .columns:nth-of-type(8n+1) {
     1157                clear: both;
     1158        }
     1159        .medium-up-8 > .column:last-child, .medium-up-8 > .columns:last-child {
     1160                float: left;
     1161        }
     1162        .medium-collapse > .column, .medium-collapse > .columns {
     1163                padding-left: 0;
     1164                padding-right: 0;
     1165        }
     1166        .medium-collapse .row {
     1167                margin-left: 0;
     1168                margin-right: 0;
     1169        }
     1170        .medium-uncollapse > .column, .medium-uncollapse > .columns {
     1171                padding-left: 0.9375rem;
     1172                padding-right: 0.9375rem;
     1173        }
     1174        .medium-centered {
     1175                float: none;
     1176                margin-left: auto;
     1177                margin-right: auto;
     1178        }
     1179        .medium-uncentered,
     1180        .medium-push-0,
     1181        .medium-pull-0 {
     1182                position: static;
     1183                margin-left: 0;
     1184                margin-right: 0;
     1185                float: left;
     1186        }
     1187}
    9551188
    9561189@media screen and (min-width: 64em) {
    957   .large-1 {
    958     width: 8.33333%; }
    959   .large-push-1 {
    960     position: relative;
    961     left: 8.33333%; }
    962   .large-pull-1 {
    963     position: relative;
    964     left: -8.33333%; }
    965   .large-offset-0 {
    966     margin-left: 0%; }
    967   .large-2 {
    968     width: 16.66667%; }
    969   .large-push-2 {
    970     position: relative;
    971     left: 16.66667%; }
    972   .large-pull-2 {
    973     position: relative;
    974     left: -16.66667%; }
    975   .large-offset-1 {
    976     margin-left: 8.33333%; }
    977   .large-3 {
    978     width: 25%; }
    979   .large-push-3 {
    980     position: relative;
    981     left: 25%; }
    982   .large-pull-3 {
    983     position: relative;
    984     left: -25%; }
    985   .large-offset-2 {
    986     margin-left: 16.66667%; }
    987   .large-4 {
    988     width: 33.33333%; }
    989   .large-push-4 {
    990     position: relative;
    991     left: 33.33333%; }
    992   .large-pull-4 {
    993     position: relative;
    994     left: -33.33333%; }
    995   .large-offset-3 {
    996     margin-left: 25%; }
    997   .large-5 {
    998     width: 41.66667%; }
    999   .large-push-5 {
    1000     position: relative;
    1001     left: 41.66667%; }
    1002   .large-pull-5 {
    1003     position: relative;
    1004     left: -41.66667%; }
    1005   .large-offset-4 {
    1006     margin-left: 33.33333%; }
    1007   .large-6 {
    1008     width: 50%; }
    1009   .large-push-6 {
    1010     position: relative;
    1011     left: 50%; }
    1012   .large-pull-6 {
    1013     position: relative;
    1014     left: -50%; }
    1015   .large-offset-5 {
    1016     margin-left: 41.66667%; }
    1017   .large-7 {
    1018     width: 58.33333%; }
    1019   .large-push-7 {
    1020     position: relative;
    1021     left: 58.33333%; }
    1022   .large-pull-7 {
    1023     position: relative;
    1024     left: -58.33333%; }
    1025   .large-offset-6 {
    1026     margin-left: 50%; }
    1027   .large-8 {
    1028     width: 66.66667%; }
    1029   .large-push-8 {
    1030     position: relative;
    1031     left: 66.66667%; }
    1032   .large-pull-8 {
    1033     position: relative;
    1034     left: -66.66667%; }
    1035   .large-offset-7 {
    1036     margin-left: 58.33333%; }
    1037   .large-9 {
    1038     width: 75%; }
    1039   .large-push-9 {
    1040     position: relative;
    1041     left: 75%; }
    1042   .large-pull-9 {
    1043     position: relative;
    1044     left: -75%; }
    1045   .large-offset-8 {
    1046     margin-left: 66.66667%; }
    1047   .large-10 {
    1048     width: 83.33333%; }
    1049   .large-push-10 {
    1050     position: relative;
    1051     left: 83.33333%; }
    1052   .large-pull-10 {
    1053     position: relative;
    1054     left: -83.33333%; }
    1055   .large-offset-9 {
    1056     margin-left: 75%; }
    1057   .large-11 {
    1058     width: 91.66667%; }
    1059   .large-push-11 {
    1060     position: relative;
    1061     left: 91.66667%; }
    1062   .large-pull-11 {
    1063     position: relative;
    1064     left: -91.66667%; }
    1065   .large-offset-10 {
    1066     margin-left: 83.33333%; }
    1067   .large-12 {
    1068     width: 100%; }
    1069   .large-offset-11 {
    1070     margin-left: 91.66667%; }
    1071   .large-up-1 > .column, .large-up-1 > .columns {
    1072     width: 100%;
    1073     float: left; }
    1074     .large-up-1 > .column:nth-of-type(1n), .large-up-1 > .columns:nth-of-type(1n) {
    1075       clear: none; }
    1076     .large-up-1 > .column:nth-of-type(1n+1), .large-up-1 > .columns:nth-of-type(1n+1) {
    1077       clear: both; }
    1078     .large-up-1 > .column:last-child, .large-up-1 > .columns:last-child {
    1079       float: left; }
    1080   .large-up-2 > .column, .large-up-2 > .columns {
    1081     width: 50%;
    1082     float: left; }
    1083     .large-up-2 > .column:nth-of-type(1n), .large-up-2 > .columns:nth-of-type(1n) {
    1084       clear: none; }
    1085     .large-up-2 > .column:nth-of-type(2n+1), .large-up-2 > .columns:nth-of-type(2n+1) {
    1086       clear: both; }
    1087     .large-up-2 > .column:last-child, .large-up-2 > .columns:last-child {
    1088       float: left; }
    1089   .large-up-3 > .column, .large-up-3 > .columns {
    1090     width: 33.33333%;
    1091     float: left; }
    1092     .large-up-3 > .column:nth-of-type(1n), .large-up-3 > .columns:nth-of-type(1n) {
    1093       clear: none; }
    1094     .large-up-3 > .column:nth-of-type(3n+1), .large-up-3 > .columns:nth-of-type(3n+1) {
    1095       clear: both; }
    1096     .large-up-3 > .column:last-child, .large-up-3 > .columns:last-child {
    1097       float: left; }
    1098   .large-up-4 > .column, .large-up-4 > .columns {
    1099     width: 25%;
    1100     float: left; }
    1101     .large-up-4 > .column:nth-of-type(1n), .large-up-4 > .columns:nth-of-type(1n) {
    1102       clear: none; }
    1103     .large-up-4 > .column:nth-of-type(4n+1), .large-up-4 > .columns:nth-of-type(4n+1) {
    1104       clear: both; }
    1105     .large-up-4 > .column:last-child, .large-up-4 > .columns:last-child {
    1106       float: left; }
    1107   .large-up-5 > .column, .large-up-5 > .columns {
    1108     width: 20%;
    1109     float: left; }
    1110     .large-up-5 > .column:nth-of-type(1n), .large-up-5 > .columns:nth-of-type(1n) {
    1111       clear: none; }
    1112     .large-up-5 > .column:nth-of-type(5n+1), .large-up-5 > .columns:nth-of-type(5n+1) {
    1113       clear: both; }
    1114     .large-up-5 > .column:last-child, .large-up-5 > .columns:last-child {
    1115       float: left; }
    1116   .large-up-6 > .column, .large-up-6 > .columns {
    1117     width: 16.66667%;
    1118     float: left; }
    1119     .large-up-6 > .column:nth-of-type(1n), .large-up-6 > .columns:nth-of-type(1n) {
    1120       clear: none; }
    1121     .large-up-6 > .column:nth-of-type(6n+1), .large-up-6 > .columns:nth-of-type(6n+1) {
    1122       clear: both; }
    1123     .large-up-6 > .column:last-child, .large-up-6 > .columns:last-child {
    1124       float: left; }
    1125   .large-up-7 > .column, .large-up-7 > .columns {
    1126     width: 14.28571%;
    1127     float: left; }
    1128     .large-up-7 > .column:nth-of-type(1n), .large-up-7 > .columns:nth-of-type(1n) {
    1129       clear: none; }
    1130     .large-up-7 > .column:nth-of-type(7n+1), .large-up-7 > .columns:nth-of-type(7n+1) {
    1131       clear: both; }
    1132     .large-up-7 > .column:last-child, .large-up-7 > .columns:last-child {
    1133       float: left; }
    1134   .large-up-8 > .column, .large-up-8 > .columns {
    1135     width: 12.5%;
    1136     float: left; }
    1137     .large-up-8 > .column:nth-of-type(1n), .large-up-8 > .columns:nth-of-type(1n) {
    1138       clear: none; }
    1139     .large-up-8 > .column:nth-of-type(8n+1), .large-up-8 > .columns:nth-of-type(8n+1) {
    1140       clear: both; }
    1141     .large-up-8 > .column:last-child, .large-up-8 > .columns:last-child {
    1142       float: left; }
    1143   .large-collapse > .column, .large-collapse > .columns {
    1144     padding-left: 0;
    1145     padding-right: 0; }
    1146   .large-collapse .row {
    1147     margin-left: 0;
    1148     margin-right: 0; }
    1149   .large-uncollapse > .column, .large-uncollapse > .columns {
    1150     padding-left: 0.9375rem;
    1151     padding-right: 0.9375rem; }
    1152   .large-centered {
    1153     float: none;
    1154     margin-left: auto;
    1155     margin-right: auto; }
    1156   .large-uncentered,
    1157   .large-push-0,
    1158   .large-pull-0 {
    1159     position: static;
    1160     margin-left: 0;
    1161     margin-right: 0;
    1162     float: left; } }
     1190        .large-1 {
     1191                width: 8.33333%;
     1192        }
     1193        .large-push-1 {
     1194                position: relative;
     1195                left: 8.33333%;
     1196        }
     1197        .large-pull-1 {
     1198                position: relative;
     1199                left: -8.33333%;
     1200        }
     1201        .large-offset-0 {
     1202                margin-left: 0%;
     1203        }
     1204        .large-2 {
     1205                width: 16.66667%;
     1206        }
     1207        .large-push-2 {
     1208                position: relative;
     1209                left: 16.66667%;
     1210        }
     1211        .large-pull-2 {
     1212                position: relative;
     1213                left: -16.66667%;
     1214        }
     1215        .large-offset-1 {
     1216                margin-left: 8.33333%;
     1217        }
     1218        .large-3 {
     1219                width: 25%;
     1220        }
     1221        .large-push-3 {
     1222                position: relative;
     1223                left: 25%;
     1224        }
     1225        .large-pull-3 {
     1226                position: relative;
     1227                left: -25%;
     1228        }
     1229        .large-offset-2 {
     1230                margin-left: 16.66667%;
     1231        }
     1232        .large-4 {
     1233                width: 33.33333%;
     1234        }
     1235        .large-push-4 {
     1236                position: relative;
     1237                left: 33.33333%;
     1238        }
     1239        .large-pull-4 {
     1240                position: relative;
     1241                left: -33.33333%;
     1242        }
     1243        .large-offset-3 {
     1244                margin-left: 25%;
     1245        }
     1246        .large-5 {
     1247                width: 41.66667%;
     1248        }
     1249        .large-push-5 {
     1250                position: relative;
     1251                left: 41.66667%;
     1252        }
     1253        .large-pull-5 {
     1254                position: relative;
     1255                left: -41.66667%;
     1256        }
     1257        .large-offset-4 {
     1258                margin-left: 33.33333%;
     1259        }
     1260        .large-6 {
     1261                width: 50%;
     1262        }
     1263        .large-push-6 {
     1264                position: relative;
     1265                left: 50%;
     1266        }
     1267        .large-pull-6 {
     1268                position: relative;
     1269                left: -50%;
     1270        }
     1271        .large-offset-5 {
     1272                margin-left: 41.66667%;
     1273        }
     1274        .large-7 {
     1275                width: 58.33333%;
     1276        }
     1277        .large-push-7 {
     1278                position: relative;
     1279                left: 58.33333%;
     1280        }
     1281        .large-pull-7 {
     1282                position: relative;
     1283                left: -58.33333%;
     1284        }
     1285        .large-offset-6 {
     1286                margin-left: 50%;
     1287        }
     1288        .large-8 {
     1289                width: 66.66667%;
     1290        }
     1291        .large-push-8 {
     1292                position: relative;
     1293                left: 66.66667%;
     1294        }
     1295        .large-pull-8 {
     1296                position: relative;
     1297                left: -66.66667%;
     1298        }
     1299        .large-offset-7 {
     1300                margin-left: 58.33333%;
     1301        }
     1302        .large-9 {
     1303                width: 75%;
     1304        }
     1305        .large-push-9 {
     1306                position: relative;
     1307                left: 75%;
     1308        }
     1309        .large-pull-9 {
     1310                position: relative;
     1311                left: -75%;
     1312        }
     1313        .large-offset-8 {
     1314                margin-left: 66.66667%;
     1315        }
     1316        .large-10 {
     1317                width: 83.33333%;
     1318        }
     1319        .large-push-10 {
     1320                position: relative;
     1321                left: 83.33333%;
     1322        }
     1323        .large-pull-10 {
     1324                position: relative;
     1325                left: -83.33333%;
     1326        }
     1327        .large-offset-9 {
     1328                margin-left: 75%;
     1329        }
     1330        .large-11 {
     1331                width: 91.66667%;
     1332        }
     1333        .large-push-11 {
     1334                position: relative;
     1335                left: 91.66667%;
     1336        }
     1337        .large-pull-11 {
     1338                position: relative;
     1339                left: -91.66667%;
     1340        }
     1341        .large-offset-10 {
     1342                margin-left: 83.33333%;
     1343        }
     1344        .large-12 {
     1345                width: 100%;
     1346        }
     1347        .large-offset-11 {
     1348                margin-left: 91.66667%;
     1349        }
     1350        .large-up-1 > .column, .large-up-1 > .columns {
     1351                width: 100%;
     1352                float: left;
     1353        }
     1354        .large-up-1 > .column:nth-of-type(1n), .large-up-1 > .columns:nth-of-type(1n) {
     1355                clear: none;
     1356        }
     1357        .large-up-1 > .column:nth-of-type(1n+1), .large-up-1 > .columns:nth-of-type(1n+1) {
     1358                clear: both;
     1359        }
     1360        .large-up-1 > .column:last-child, .large-up-1 > .columns:last-child {
     1361                float: left;
     1362        }
     1363        .large-up-2 > .column, .large-up-2 > .columns {
     1364                width: 50%;
     1365                float: left;
     1366        }
     1367        .large-up-2 > .column:nth-of-type(1n), .large-up-2 > .columns:nth-of-type(1n) {
     1368                clear: none;
     1369        }
     1370        .large-up-2 > .column:nth-of-type(2n+1), .large-up-2 > .columns:nth-of-type(2n+1) {
     1371                clear: both;
     1372        }
     1373        .large-up-2 > .column:last-child, .large-up-2 > .columns:last-child {
     1374                float: left;
     1375        }
     1376        .large-up-3 > .column, .large-up-3 > .columns {
     1377                width: 33.33333%;
     1378                float: left;
     1379        }
     1380        .large-up-3 > .column:nth-of-type(1n), .large-up-3 > .columns:nth-of-type(1n) {
     1381                clear: none;
     1382        }
     1383        .large-up-3 > .column:nth-of-type(3n+1), .large-up-3 > .columns:nth-of-type(3n+1) {
     1384                clear: both;
     1385        }
     1386        .large-up-3 > .column:last-child, .large-up-3 > .columns:last-child {
     1387                float: left;
     1388        }
     1389        .large-up-4 > .column, .large-up-4 > .columns {
     1390                width: 25%;
     1391                float: left;
     1392        }
     1393        .large-up-4 > .column:nth-of-type(1n), .large-up-4 > .columns:nth-of-type(1n) {
     1394                clear: none;
     1395        }
     1396        .large-up-4 > .column:nth-of-type(4n+1), .large-up-4 > .columns:nth-of-type(4n+1) {
     1397                clear: both;
     1398        }
     1399        .large-up-4 > .column:last-child, .large-up-4 > .columns:last-child {
     1400                float: left;
     1401        }
     1402        .large-up-5 > .column, .large-up-5 > .columns {
     1403                width: 20%;
     1404                float: left;
     1405        }
     1406        .large-up-5 > .column:nth-of-type(1n), .large-up-5 > .columns:nth-of-type(1n) {
     1407                clear: none;
     1408        }
     1409        .large-up-5 > .column:nth-of-type(5n+1), .large-up-5 > .columns:nth-of-type(5n+1) {
     1410                clear: both;
     1411        }
     1412        .large-up-5 > .column:last-child, .large-up-5 > .columns:last-child {
     1413                float: left;
     1414        }
     1415        .large-up-6 > .column, .large-up-6 > .columns {
     1416                width: 16.66667%;
     1417                float: left;
     1418        }
     1419        .large-up-6 > .column:nth-of-type(1n), .large-up-6 > .columns:nth-of-type(1n) {
     1420                clear: none;
     1421        }
     1422        .large-up-6 > .column:nth-of-type(6n+1), .large-up-6 > .columns:nth-of-type(6n+1) {
     1423                clear: both;
     1424        }
     1425        .large-up-6 > .column:last-child, .large-up-6 > .columns:last-child {
     1426                float: left;
     1427        }
     1428        .large-up-7 > .column, .large-up-7 > .columns {
     1429                width: 14.28571%;
     1430                float: left;
     1431        }
     1432        .large-up-7 > .column:nth-of-type(1n), .large-up-7 > .columns:nth-of-type(1n) {
     1433                clear: none;
     1434        }
     1435        .large-up-7 > .column:nth-of-type(7n+1), .large-up-7 > .columns:nth-of-type(7n+1) {
     1436                clear: both;
     1437        }
     1438        .large-up-7 > .column:last-child, .large-up-7 > .columns:last-child {
     1439                float: left;
     1440        }
     1441        .large-up-8 > .column, .large-up-8 > .columns {
     1442                width: 12.5%;
     1443                float: left;
     1444        }
     1445        .large-up-8 > .column:nth-of-type(1n), .large-up-8 > .columns:nth-of-type(1n) {
     1446                clear: none;
     1447        }
     1448        .large-up-8 > .column:nth-of-type(8n+1), .large-up-8 > .columns:nth-of-type(8n+1) {
     1449                clear: both;
     1450        }
     1451        .large-up-8 > .column:last-child, .large-up-8 > .columns:last-child {
     1452                float: left;
     1453        }
     1454        .large-collapse > .column, .large-collapse > .columns {
     1455                padding-left: 0;
     1456                padding-right: 0;
     1457        }
     1458        .large-collapse .row {
     1459                margin-left: 0;
     1460                margin-right: 0;
     1461        }
     1462        .large-uncollapse > .column, .large-uncollapse > .columns {
     1463                padding-left: 0.9375rem;
     1464                padding-right: 0.9375rem;
     1465        }
     1466        .large-centered {
     1467                float: none;
     1468                margin-left: auto;
     1469                margin-right: auto;
     1470        }
     1471        .large-uncentered,
     1472        .large-push-0,
     1473        .large-pull-0 {
     1474                position: static;
     1475                margin-left: 0;
     1476                margin-right: 0;
     1477                float: left;
     1478        }
     1479}
    11631480
    11641481div,
     
    11811498th,
    11821499td {
    1183   margin: 0;
    1184   padding: 0; }
     1500        margin: 0;
     1501        padding: 0;
     1502}
    11851503
    11861504p {
    1187   font-size: inherit;
    1188   line-height: 1.6;
    1189   margin-bottom: 1rem;
    1190   text-rendering: optimizeLegibility; }
     1505        font-size: inherit;
     1506        line-height: 1.6;
     1507        margin-bottom: 1rem;
     1508        text-rendering: optimizeLegibility;
     1509}
    11911510
    11921511em,
    11931512i {
    1194   font-style: italic;
    1195   line-height: inherit; }
     1513        font-style: italic;
     1514        line-height: inherit;
     1515}
    11961516
    11971517strong,
    11981518b {
    1199   font-weight: bold;
    1200   line-height: inherit; }
     1519        font-weight: bold;
     1520        line-height: inherit;
     1521}
    12011522
    12021523small {
    1203   font-size: 80%;
    1204   line-height: inherit; }
     1524        font-size: 80%;
     1525        line-height: inherit;
     1526}
    12051527
    12061528h1,
     
    12101532h5,
    12111533h6 {
    1212   font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    1213   font-weight: normal;
    1214   font-style: normal;
    1215   color: inherit;
    1216   text-rendering: optimizeLegibility;
    1217   margin-top: 0;
    1218   margin-bottom: 0.5rem;
    1219   line-height: 1.4; }
    1220   h1 small,
    1221   h2 small,
    1222   h3 small,
    1223   h4 small,
    1224   h5 small,
    1225   h6 small {
    1226     color: #cacaca;
    1227     line-height: 0; }
     1534        font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
     1535        font-weight: normal;
     1536        font-style: normal;
     1537        color: inherit;
     1538        text-rendering: optimizeLegibility;
     1539        margin-top: 0;
     1540        margin-bottom: 0.5rem;
     1541        line-height: 1.4;
     1542}
     1543 h1 small,
     1544 h2 small,
     1545 h3 small,
     1546 h4 small,
     1547 h5 small,
     1548 h6 small {
     1549        color: #cacaca;
     1550        line-height: 0;
     1551}
    12281552
    12291553h1 {
    1230   font-size: 1.5rem; }
     1554        font-size: 1.5rem;
     1555}
    12311556
    12321557h2 {
    1233   font-size: 1.25rem; }
     1558        font-size: 1.25rem;
     1559}
    12341560
    12351561h3 {
    1236   font-size: 1.1875rem; }
     1562        font-size: 1.1875rem;
     1563}
    12371564
    12381565h4 {
    1239   font-size: 1.125rem; }
     1566        font-size: 1.125rem;
     1567}
    12401568
    12411569h5 {
    1242   font-size: 1.0625rem; }
     1570        font-size: 1.0625rem;
     1571}
    12431572
    12441573h6 {
    1245   font-size: 1rem; }
     1574        font-size: 1rem;
     1575}
    12461576
    12471577@media screen and (min-width: 40em) {
    1248   h1 {
    1249     font-size: 3rem; }
    1250   h2 {
    1251     font-size: 2.5rem; }
    1252   h3 {
    1253     font-size: 1.9375rem; }
    1254   h4 {
    1255     font-size: 1.5625rem; }
    1256   h5 {
    1257     font-size: 1.25rem; }
    1258   h6 {
    1259     font-size: 1rem; } }
     1578        h1 {
     1579                font-size: 3rem;
     1580        }
     1581        h2 {
     1582                font-size: 2.5rem;
     1583        }
     1584        h3 {
     1585                font-size: 1.9375rem;
     1586        }
     1587        h4 {
     1588                font-size: 1.5625rem;
     1589        }
     1590        h5 {
     1591        font-size: 1.25rem;
     1592        }
     1593        h6 {
     1594                font-size: 1rem;
     1595        }
     1596}
    12601597
    12611598a {
    1262   color: #2199e8;
    1263   text-decoration: none;
    1264   line-height: inherit;
    1265   cursor: pointer; }
    1266   a:hover, a:focus {
    1267     color: #1585cf; }
    1268   a img {
    1269     border: 0; }
     1599        color: #2199e8;
     1600        text-decoration: none;
     1601        line-height: inherit;
     1602        cursor: pointer; }
     1603       
     1604a:hover, a:focus {
     1605        color: #1585cf;
     1606}
     1607a img {
     1608        border: 0;
     1609}
    12701610
    12711611hr {
    1272   max-width: 75rem;
    1273   height: 0;
    1274   border-right: 0;
    1275   border-top: 0;
    1276   border-bottom: 1px solid #cacaca;
    1277   border-left: 0;
    1278   margin: 1.25rem auto;
    1279   clear: both; }
     1612        max-width: 75rem;
     1613        height: 0;
     1614        border-right: 0;
     1615        border-top: 0;
     1616        border-bottom: 1px solid #cacaca;
     1617        border-left: 0;
     1618        margin: 1.25rem auto;
     1619        clear: both;
     1620}
    12801621
    12811622ul,
    12821623ol,
    12831624dl {
    1284   line-height: 1.6;
    1285   margin-bottom: 1rem;
    1286   list-style-position: outside; }
     1625        line-height: 1.6;
     1626        margin-bottom: 1rem;
     1627        list-style-position: outside;
     1628}
    12871629
    12881630li {
    1289   font-size: inherit; }
     1631        font-size: inherit;
     1632}
    12901633
    12911634ul {
    1292   list-style-type: disc;
    1293   margin-left: 1.25rem; }
     1635        list-style-type: disc;
     1636        margin-left: 1.25rem;
     1637}
    12941638
    12951639ol {
    1296   margin-left: 1.25rem; }
     1640        margin-left: 1.25rem;
     1641}
    12971642
    12981643ul ul, ol ul, ul ol, ol ol {
    1299   margin-left: 1.25rem;
    1300   margin-bottom: 0; }
     1644        margin-left: 1.25rem;
     1645        margin-bottom: 0;
     1646}
    13011647
    13021648dl {
    1303   margin-bottom: 1rem; }
    1304   dl dt {
    1305     margin-bottom: 0.3rem;
    1306     font-weight: bold; }
     1649        margin-bottom: 1rem;
     1650}
     1651dl dt {
     1652        margin-bottom: 0.3rem;
     1653        font-weight: bold;
     1654}
    13071655
    13081656blockquote {
    1309   margin: 0 0 1rem;
    1310   padding: 0.5625rem 1.25rem 0 1.1875rem;
    1311   border-left: 1px solid #cacaca; }
    1312   blockquote, blockquote p {
    1313     line-height: 1.6;
    1314     color: #8a8a8a; }
     1657        margin: 0 0 1rem;
     1658        padding: 0.5625rem 1.25rem 0 1.1875rem;
     1659        border-left: 1px solid #cacaca;
     1660}
     1661
     1662blockquote, blockquote p {
     1663        line-height: 1.6;
     1664        color: #8a8a8a;
     1665}
    13151666
    13161667cite {
    1317   display: block;
    1318   font-size: 0.8125rem;
    1319   color: #8a8a8a; }
    1320   cite:before {
    1321     content: '\2014 \0020'; }
     1668        display: block;
     1669        font-size: 0.8125rem;
     1670        color: #8a8a8a;
     1671}
     1672
     1673cite:before {
     1674        content: '\2014 \0020';
     1675}
    13221676
    13231677abbr {
    1324   color: #0a0a0a;
    1325   cursor: help;
    1326   border-bottom: 1px dotted #0a0a0a; }
     1678        color: #0a0a0a;
     1679        cursor: help;
     1680        border-bottom: 1px dotted #0a0a0a;
     1681}
    13271682
    13281683code {
    1329   font-family: Consolas, "Liberation Mono", Courier, monospace;
    1330   font-weight: normal;
    1331   color: #0a0a0a;
    1332   background-color: #e6e6e6;
    1333   border: 1px solid #cacaca;
    1334   padding: 0.125rem 0.3125rem 0.0625rem; }
     1684        font-family: Consolas, "Liberation Mono", Courier, monospace;
     1685        font-weight: normal;
     1686        color: #0a0a0a;
     1687        background-color: #e6e6e6;
     1688        border: 1px solid #cacaca;
     1689        padding: 0.125rem 0.3125rem 0.0625rem;
     1690}
    13351691
    13361692kbd {
    1337   padding: 0.125rem 0.25rem 0;
    1338   margin: 0;
    1339   background-color: #e6e6e6;
    1340   color: #0a0a0a;
    1341   font-family: Consolas, "Liberation Mono", Courier, monospace; }
     1693        padding: 0.125rem 0.25rem 0;
     1694        margin: 0;
     1695        background-color: #e6e6e6;
     1696        color: #0a0a0a;
     1697        font-family: Consolas, "Liberation Mono", Courier, monospace;
     1698}
    13421699
    13431700.subheader {
    1344   margin-top: 0.2rem;
    1345   margin-bottom: 0.5rem;
    1346   font-weight: normal;
    1347   line-height: 1.4;
    1348   color: #8a8a8a; }
     1701        margin-top: 0.2rem;
     1702        margin-bottom: 0.5rem;
     1703        font-weight: normal;
     1704        line-height: 1.4;
     1705        color: #8a8a8a;
     1706}
    13491707
    13501708.lead {
    1351   font-size: 125%;
    1352   line-height: 1.6; }
     1709        font-size: 125%;
     1710        line-height: 1.6;
     1711}
    13531712
    13541713.stat {
    1355   font-size: 2.5rem;
    1356   line-height: 1; }
    1357   p + .stat {
    1358     margin-top: -1rem; }
     1714        font-size: 2.5rem;
     1715        line-height: 1;
     1716}
     1717
     1718p + .stat {
     1719        margin-top: -1rem;
     1720}
    13591721
    13601722.no-bullet {
    1361   margin-left: 0;
    1362   list-style: none; }
     1723        margin-left: 0;
     1724        list-style: none;
     1725}
    13631726
    13641727.text-left {
    1365   text-align: left; }
     1728        text-align: left;
     1729}
    13661730
    13671731.text-right {
    1368   text-align: right; }
     1732        text-align: right;
     1733}
    13691734
    13701735.text-center {
    1371   text-align: center; }
     1736        text-align: center;
     1737}
    13721738
    13731739.text-justify {
    1374   text-align: justify; }
     1740        text-align: justify;
     1741}
    13751742
    13761743@media screen and (min-width: 40em) {
    1377   .medium-text-left {
    1378     text-align: left; }
    1379   .medium-text-right {
    1380     text-align: right; }
    1381   .medium-text-center {
    1382     text-align: center; }
    1383   .medium-text-justify {
    1384     text-align: justify; } }
     1744        .medium-text-left {
     1745                text-align: left;
     1746        }
     1747        .medium-text-right {
     1748                text-align: right;
     1749        }
     1750        .medium-text-center {
     1751                text-align: center;
     1752        }
     1753        .medium-text-justify {
     1754                text-align: justify;
     1755        }
     1756}
    13851757
    13861758@media screen and (min-width: 64em) {
    1387   .large-text-left {
    1388     text-align: left; }
    1389   .large-text-right {
    1390     text-align: right; }
    1391   .large-text-center {
    1392     text-align: center; }
    1393   .large-text-justify {
    1394     text-align: justify; } }
     1759        .large-text-left {
     1760                text-align: left;
     1761        }
     1762        .large-text-right {
     1763                text-align: right;
     1764        }
     1765        .large-text-center {
     1766                text-align: center;
     1767        }
     1768        .large-text-justify {
     1769                text-align: justify;
     1770        }
     1771}
    13951772
    13961773.show-for-print {
    1397   display: none !important; }
     1774        display: none !important;
     1775}
    13981776
    13991777@media print {
    1400   * {
    1401     background: transparent !important;
    1402     color: black !important;
    1403     box-shadow: none !important;
    1404     text-shadow: none !important; }
    1405   .show-for-print {
    1406     display: block !important; }
    1407   .hide-for-print {
    1408     display: none !important; }
    1409   table.show-for-print {
    1410     display: table !important; }
    1411   thead.show-for-print {
    1412     display: table-header-group !important; }
    1413   tbody.show-for-print {
    1414     display: table-row-group !important; }
    1415   tr.show-for-print {
    1416     display: table-row !important; }
    1417   td.show-for-print {
    1418     display: table-cell !important; }
    1419   th.show-for-print {
    1420     display: table-cell !important; }
    1421   a,
    1422   a:visited {
    1423     text-decoration: underline; }
    1424   a[href]:after {
    1425     content: " (" attr(href) ")"; }
    1426   .ir a:after,
    1427   a[href^='javascript:']:after,
    1428   a[href^='#']:after {
    1429     content: ''; }
    1430   abbr[title]:after {
    1431     content: " (" attr(title) ")"; }
    1432   pre,
    1433   blockquote {
    1434     border: 1px solid #8a8a8a;
    1435     page-break-inside: avoid; }
    1436   thead {
    1437     display: table-header-group; }
    1438   tr,
    1439   img {
    1440     page-break-inside: avoid; }
    1441   img {
    1442     max-width: 100% !important; }
    1443   @page {
    1444     margin: 0.5cm; }
    1445   p,
    1446   h2,
    1447   h3 {
    1448     orphans: 3;
    1449     widows: 3; }
    1450   h2,
    1451   h3 {
    1452     page-break-after: avoid; } }
     1778        * {
     1779                background: transparent !important;
     1780                color: black !important;
     1781                box-shadow: none !important;
     1782                text-shadow: none !important;
     1783        }
     1784        .show-for-print {
     1785                display: block !important;
     1786        }
     1787        .hide-for-print {
     1788                display: none !important;
     1789        }
     1790        table.show-for-print {
     1791                display: table !important;
     1792        }
     1793        thead.show-for-print {
     1794                display: table-header-group !important;
     1795        }
     1796        tbody.show-for-print {
     1797                display: table-row-group !important;
     1798        }
     1799        tr.show-for-print {
     1800                display: table-row !important;
     1801        }
     1802        td.show-for-print {
     1803                display: table-cell !important;
     1804        }
     1805        th.show-for-print {
     1806                display: table-cell !important;
     1807        }
     1808        a,
     1809        a:visited {
     1810                text-decoration: underline;
     1811        }
     1812        a[href]:after {
     1813                content: " (" attr(href) ")";
     1814        }
     1815        .ir a:after,
     1816        a[href^='javascript:']:after,
     1817        a[href^='#']:after {
     1818                content: '';
     1819        }
     1820        abbr[title]:after {
     1821                content: " (" attr(title) ")";
     1822        }
     1823        pre,
     1824        blockquote {
     1825                border: 1px solid #8a8a8a;
     1826                page-break-inside: avoid;
     1827        }
     1828        thead {
     1829                display: table-header-group;
     1830        }
     1831        tr,
     1832        img {
     1833                page-break-inside: avoid;
     1834        }
     1835        img {
     1836                max-width: 100% !important;
     1837        }
     1838        @page {
     1839                margin: 0.5cm;
     1840        }
     1841        p,
     1842        h2,
     1843        h3 {
     1844                orphans: 3;
     1845                widows: 3;
     1846        }
     1847        h2,
     1848        h3 {
     1849                page-break-after: avoid;
     1850        }
     1851}
    14531852
    14541853.button {
    1455   display: inline-block;
    1456   text-align: center;
    1457   line-height: 1;
    1458   cursor: pointer;
    1459   -webkit-appearance: none;
    1460   transition: background-color 0.25s ease-out, color 0.25s ease-out;
    1461   vertical-align: middle;
    1462   border: 1px solid transparent;
    1463   border-radius: 0;
    1464   padding: 0.85em 1em;
    1465   margin: 0 0 1rem 0;
    1466   font-size: 0.9rem;
    1467   background-color: #2199e8;
    1468   color: #fefefe; }
    1469   [data-whatinput='mouse'] .button {
    1470     outline: 0; }
    1471   .button:hover, .button:focus {
    1472     background-color: #1583cc;
    1473     color: #fefefe; }
    1474   .button.tiny {
    1475     font-size: 0.6rem; }
    1476   .button.small {
    1477     font-size: 0.75rem; }
    1478   .button.large {
    1479     font-size: 1.25rem; }
    1480   .button.expanded {
    1481     display: block;
    1482     width: 100%;
    1483     margin-left: 0;
    1484     margin-right: 0; }
    1485   .button.primary {
    1486     background-color: #2199e8;
    1487     color: #fefefe; }
    1488     .button.primary:hover, .button.primary:focus {
    1489       background-color: #147cc0;
    1490       color: #fefefe; }
    1491   .button.secondary {
    1492     background-color: #777;
    1493     color: #fefefe; }
    1494     .button.secondary:hover, .button.secondary:focus {
    1495       background-color: #5f5f5f;
    1496       color: #fefefe; }
    1497   .button.success {
    1498     background-color: #3adb76;
    1499     color: #fefefe; }
    1500     .button.success:hover, .button.success:focus {
    1501       background-color: #22bb5b;
    1502       color: #fefefe; }
    1503   .button.warning {
    1504     background-color: #ffae00;
    1505     color: #fefefe; }
    1506     .button.warning:hover, .button.warning:focus {
    1507       background-color: #cc8b00;
    1508       color: #fefefe; }
    1509   .button.alert {
    1510     background-color: #ec5840;
    1511     color: #fefefe; }
    1512     .button.alert:hover, .button.alert:focus {
    1513       background-color: #da3116;
    1514       color: #fefefe; }
    1515   .button.hollow {
    1516     border: 1px solid #2199e8;
    1517     color: #2199e8; }
    1518     .button.hollow, .button.hollow:hover, .button.hollow:focus {
    1519       background-color: transparent; }
    1520     .button.hollow:hover, .button.hollow:focus {
    1521       border-color: #0c4d78;
    1522       color: #0c4d78; }
    1523     .button.hollow.primary {
    1524       border: 1px solid #2199e8;
    1525       color: #2199e8; }
    1526       .button.hollow.primary:hover, .button.hollow.primary:focus {
    1527         border-color: #0c4d78;
    1528         color: #0c4d78; }
    1529     .button.hollow.secondary {
    1530       border: 1px solid #777;
    1531       color: #777; }
    1532       .button.hollow.secondary:hover, .button.hollow.secondary:focus {
    1533         border-color: #3c3c3c;
    1534         color: #3c3c3c; }
    1535     .button.hollow.success {
    1536       border: 1px solid #3adb76;
    1537       color: #3adb76; }
    1538       .button.hollow.success:hover, .button.hollow.success:focus {
    1539         border-color: #157539;
    1540         color: #157539; }
    1541     .button.hollow.warning {
    1542       border: 1px solid #ffae00;
    1543       color: #ffae00; }
    1544       .button.hollow.warning:hover, .button.hollow.warning:focus {
    1545         border-color: #805700;
    1546         color: #805700; }
    1547     .button.hollow.alert {
    1548       border: 1px solid #ec5840;
    1549       color: #ec5840; }
    1550       .button.hollow.alert:hover, .button.hollow.alert:focus {
    1551         border-color: #881f0e;
    1552         color: #881f0e; }
    1553   .button.disabled, .button[disabled] {
    1554     opacity: 0.25;
    1555     cursor: not-allowed;
    1556     pointer-events: none; }
    1557   .button.dropdown::after {
    1558     content: '';
    1559     display: block;
    1560     width: 0;
    1561     height: 0;
    1562     border: inset 0.4em;
    1563     border-color: #fefefe transparent transparent;
    1564     border-top-style: solid;
    1565     border-bottom-width: 0;
    1566     position: relative;
    1567     top: 0.4em;
    1568     float: right;
    1569     margin-left: 1em;
    1570     display: inline-block; }
    1571   .button.arrow-only::after {
    1572     margin-left: 0;
    1573     float: none;
    1574     top: -0.1em; }
     1854        display: inline-block;
     1855        text-align: center;
     1856        line-height: 1;
     1857        cursor: pointer;
     1858        -webkit-appearance: none;
     1859        transition: background-color 0.25s ease-out, color 0.25s ease-out;
     1860        vertical-align: middle;
     1861        border: 1px solid transparent;
     1862        border-radius: 0;
     1863        padding: 0.85em 1em;
     1864        margin: 0 0 1rem 0;
     1865        font-size: 0.9rem;
     1866        background-color: #2199e8;
     1867        color: #fefefe;
     1868}
     1869[data-whatinput='mouse'] .button {
     1870        outline: 0;
     1871}
     1872.button:hover, .button:focus {
     1873        background-color: #1583cc;
     1874        color: #fefefe;
     1875}
     1876.button.tiny {
     1877        font-size: 0.6rem;
     1878}
     1879.button.small {
     1880        font-size: 0.75rem;
     1881}
     1882.button.large {
     1883        font-size: 1.25rem;
     1884}
     1885.button.expanded {
     1886        display: block;
     1887        width: 100%;
     1888        margin-left: 0;
     1889        margin-right: 0;
     1890}
     1891.button.primary {
     1892        background-color: #2199e8;
     1893        color: #fefefe;
     1894}
     1895.button.primary:hover, .button.primary:focus {
     1896        background-color: #147cc0;
     1897        color: #fefefe;
     1898}
     1899.button.secondary {
     1900        background-color: #777;
     1901        color: #fefefe;
     1902}
     1903.button.secondary:hover, .button.secondary:focus {
     1904        background-color: #5f5f5f;
     1905        color: #fefefe;
     1906}
     1907.button.success {
     1908        background-color: #3adb76;
     1909        color: #fefefe;
     1910}
     1911.button.success:hover, .button.success:focus {
     1912        background-color: #22bb5b;
     1913        color: #fefefe;
     1914}
     1915.button.warning {
     1916        background-color: #ffae00;
     1917        color: #fefefe;
     1918}
     1919.button.warning:hover, .button.warning:focus {
     1920        background-color: #cc8b00;
     1921        color: #fefefe;
     1922}
     1923.button.alert {
     1924        background-color: #ec5840;
     1925        color: #fefefe;
     1926}
     1927.button.alert:hover, .button.alert:focus {
     1928        background-color: #da3116;
     1929        color: #fefefe;
     1930}
     1931.button.hollow {
     1932        border: 1px solid #2199e8;
     1933        color: #2199e8;
     1934}
     1935.button.hollow, .button.hollow:hover, .button.hollow:focus {
     1936        background-color: transparent;
     1937}
     1938.button.hollow:hover, .button.hollow:focus {
     1939        border-color: #0c4d78;
     1940        color: #0c4d78;
     1941}
     1942.button.hollow.primary {
     1943        border: 1px solid #2199e8;
     1944        color: #2199e8;
     1945}
     1946.button.hollow.primary:hover, .button.hollow.primary:focus {
     1947        border-color: #0c4d78;
     1948        color: #0c4d78;
     1949}
     1950.button.hollow.secondary {
     1951        border: 1px solid #777;
     1952        color: #777;
     1953}
     1954.button.hollow.secondary:hover, .button.hollow.secondary:focus {
     1955        border-color: #3c3c3c;
     1956        color: #3c3c3c;
     1957}
     1958.button.hollow.success {
     1959        border: 1px solid #3adb76;
     1960        color: #3adb76;
     1961}
     1962.button.hollow.success:hover, .button.hollow.success:focus {
     1963        border-color: #157539;
     1964        color: #157539;
     1965}
     1966.button.hollow.warning {
     1967        border: 1px solid #ffae00;
     1968        color: #ffae00;
     1969}
     1970.button.hollow.warning:hover, .button.hollow.warning:focus {
     1971        border-color: #805700;
     1972        color: #805700;
     1973}
     1974.button.hollow.alert {
     1975        border: 1px solid #ec5840;
     1976        color: #ec5840;
     1977}
     1978.button.hollow.alert:hover, .button.hollow.alert:focus {
     1979        border-color: #881f0e;
     1980        color: #881f0e;
     1981}
     1982.button.disabled, .button[disabled] {
     1983        opacity: 0.25;
     1984        cursor: not-allowed;
     1985        pointer-events: none;
     1986}
     1987.button.dropdown::after {
     1988        content: '';
     1989        display: block;
     1990        width: 0;
     1991        height: 0;
     1992        border: inset 0.4em;
     1993        border-color: #fefefe transparent transparent;
     1994        border-top-style: solid;
     1995        border-bottom-width: 0;
     1996        position: relative;
     1997        top: 0.4em;
     1998        float: right;
     1999        margin-left: 1em;
     2000        display: inline-block;
     2001}
     2002.button.arrow-only::after {
     2003        margin-left: 0;
     2004        float: none;
     2005        top: -0.1em;
     2006}
    15752007
    15762008[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'],
    15772009textarea {
    1578   display: block;
    1579   box-sizing: border-box;
    1580   width: 100%;
    1581   height: 2.4375rem;
    1582   padding: 0.5rem;
    1583   border: 1px solid #cacaca;
    1584   margin: 0 0 1rem;
    1585   font-family: inherit;
    1586   font-size: 1rem;
    1587   color: #0a0a0a;
    1588   background-color: #fefefe;
    1589   box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
    1590   border-radius: 0;
    1591   transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
    1592   -webkit-appearance: none;
    1593   -moz-appearance: none; }
    1594   [type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus,
    1595   textarea:focus {
    1596     border: 1px solid #8a8a8a;
    1597     background-color: #fefefe;
    1598     outline: none;
    1599     box-shadow: 0 0 5px #cacaca;
    1600     transition: box-shadow 0.5s, border-color 0.25s ease-in-out; }
     2010        display: block;
     2011        box-sizing: border-box;
     2012        width: 100%;
     2013        height: 2.4375rem;
     2014        padding: 0.5rem;
     2015        border: 1px solid #cacaca;
     2016        margin: 0 0 1rem;
     2017        font-family: inherit;
     2018        font-size: 1rem;
     2019        color: #0a0a0a;
     2020        background-color: #fefefe;
     2021        box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
     2022        border-radius: 0;
     2023        transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
     2024        -webkit-appearance: none;
     2025        -moz-appearance: none;
     2026}
     2027[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus,
     2028textarea:focus {
     2029        border: 1px solid #8a8a8a;
     2030        background-color: #fefefe;
     2031        outline: none;
     2032        box-shadow: 0 0 5px #cacaca;
     2033        transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
     2034}
    16012035
    16022036textarea {
    1603   max-width: 100%; }
    1604   textarea[rows] {
    1605     height: auto; }
     2037        max-width: 100%;
     2038}
     2039textarea[rows] {
     2040        height: auto;
     2041}
    16062042
    16072043input::placeholder,
    16082044textarea::placeholder {
    1609   color: #cacaca; }
     2045        color: #cacaca;
     2046}
    16102047
    16112048input:disabled, input[readonly],
    16122049textarea:disabled,
    16132050textarea[readonly] {
    1614   background-color: #e6e6e6;
    1615   cursor: default; }
     2051        background-color: #e6e6e6;
     2052        cursor: default;
     2053}
    16162054
    16172055[type='submit'],
    16182056[type='button'] {
    1619   border-radius: 0;
    1620   -webkit-appearance: none;
    1621   -moz-appearance: none; }
     2057        border-radius: 0;
     2058        -webkit-appearance: none;
     2059        -moz-appearance: none;
     2060}
    16222061
    16232062input[type='search'] {
    1624   box-sizing: border-box; }
     2063        box-sizing: border-box;
     2064}
    16252065
    16262066[type='file'],
    16272067[type='checkbox'],
    16282068[type='radio'] {
    1629   margin: 0 0 1rem; }
     2069        margin: 0 0 1rem;
     2070}
    16302071
    16312072[type='checkbox'] + label,
    16322073[type='radio'] + label {
    1633   display: inline-block;
    1634   margin-left: 0.5rem;
    1635   margin-right: 1rem;
    1636   margin-bottom: 0;
    1637   vertical-align: baseline; }
    1638   [type='checkbox'] + label[for],
    1639   [type='radio'] + label[for] {
    1640     cursor: pointer; }
     2074        display: inline-block;
     2075        margin-left: 0.5rem;
     2076        margin-right: 1rem;
     2077        margin-bottom: 0;
     2078        vertical-align: baseline;
     2079}
     2080[type='checkbox'] + label[for],
     2081[type='radio'] + label[for] {
     2082        cursor: pointer;
     2083}
    16412084
    16422085label > [type='checkbox'],
    16432086label > [type='radio'] {
    1644   margin-right: 0.5rem; }
     2087        margin-right: 0.5rem;
     2088}
    16452089
    16462090[type='file'] {
    1647   width: 100%; }
     2091        width: 100%;
     2092}
    16482093
    16492094label {
    1650   display: block;
    1651   margin: 0;
    1652   font-size: 0.875rem;
    1653   font-weight: normal;
    1654   line-height: 1.8;
    1655   color: #0a0a0a; }
    1656   label.middle {
    1657     margin: 0 0 1rem;
    1658     padding: 0.5625rem 0; }
     2095        display: block;
     2096        margin: 0;
     2097        font-size: 0.875rem;
     2098        font-weight: normal;
     2099        line-height: 1.8;
     2100        color: #0a0a0a;
     2101}
     2102label.middle {
     2103        margin: 0 0 1rem;
     2104        padding: 0.5625rem 0;
     2105}
    16592106
    16602107.help-text {
    1661   margin-top: -0.5rem;
    1662   font-size: 0.8125rem;
    1663   font-style: italic;
    1664   color: #0a0a0a; }
     2108        margin-top: -0.5rem;
     2109        font-size: 0.8125rem;
     2110        font-style: italic;
     2111        color: #0a0a0a;
     2112}
    16652113
    16662114.input-group {
    1667   display: table;
    1668   width: 100%;
    1669   margin-bottom: 1rem; }
    1670   .input-group > :first-child {
    1671     border-radius: 0 0 0 0; }
    1672   .input-group > :last-child > * {
    1673     border-radius: 0 0 0 0; }
     2115        display: table;
     2116        width: 100%;
     2117        margin-bottom: 1rem;
     2118}
     2119.input-group > :first-child {
     2120        border-radius: 0 0 0 0;
     2121}
     2122.input-group > :last-child > * {
     2123        border-radius: 0 0 0 0;
     2124}
    16742125
    16752126.input-group-label, .input-group-field, .input-group-button {
    1676   margin: 0;
    1677   display: table-cell;
    1678   vertical-align: middle; }
     2127        margin: 0;
     2128        display: table-cell;
     2129        vertical-align: middle;
     2130}
    16792131
    16802132.input-group-label {
    1681   text-align: center;
    1682   padding: 0 1rem;
    1683   background: #e6e6e6;
    1684   color: #0a0a0a;
    1685   border: 1px solid #cacaca;
    1686   white-space: nowrap;
    1687   width: 1%;
    1688   height: 100%; }
    1689   .input-group-label:first-child {
    1690     border-right: 0; }
    1691   .input-group-label:last-child {
    1692     border-left: 0; }
     2133        text-align: center;
     2134        padding: 0 1rem;
     2135        background: #e6e6e6;
     2136        color: #0a0a0a;
     2137        border: 1px solid #cacaca;
     2138        white-space: nowrap;
     2139        width: 1%;
     2140        height: 100%;
     2141}
     2142.input-group-label:first-child {
     2143        border-right: 0;
     2144}
     2145.input-group-label:last-child {
     2146    border-left: 0;
     2147}
    16932148
    16942149.input-group-field {
    1695   border-radius: 0;
    1696   height: 2.5rem; }
     2150        border-radius: 0;
     2151        height: 2.5rem;
     2152}
    16972153
    16982154.input-group-button {
    1699   padding-top: 0;
    1700   padding-bottom: 0;
    1701   text-align: center;
    1702   height: 100%;
    1703   width: 1%; }
    1704   .input-group-button a,
    1705   .input-group-button input,
    1706   .input-group-button button {
    1707     margin: 0; }
     2155        padding-top: 0;
     2156        padding-bottom: 0;
     2157        text-align: center;
     2158        height: 100%;
     2159        width: 1%;
     2160}
     2161.input-group-button a,
     2162.input-group-button input,
     2163.input-group-button button {
     2164        margin: 0;
     2165}
    17082166
    17092167.input-group .input-group-button {
    1710   display: table-cell; }
     2168        display: table-cell;
     2169}
    17112170
    17122171fieldset {
    1713   border: 0;
    1714   padding: 0;
    1715   margin: 0; }
     2172        border: 0;
     2173        padding: 0;
     2174        margin: 0;
     2175}
    17162176
    17172177legend {
    1718   margin-bottom: 0.5rem;
    1719   max-width: 100%; }
     2178        margin-bottom: 0.5rem;
     2179        max-width: 100%;
     2180}
    17202181
    17212182.fieldset {
    1722   border: 1px solid #cacaca;
    1723   padding: 1.25rem;
    1724   margin: 1.125rem 0; }
    1725   .fieldset legend {
    1726     background: #fefefe;
    1727     padding: 0 0.1875rem;
    1728     margin: 0;
    1729     margin-left: -0.1875rem; }
     2183        border: 1px solid #cacaca;
     2184        padding: 1.25rem;
     2185        margin: 1.125rem 0;
     2186}
     2187.fieldset legend {
     2188        background: #fefefe;
     2189        padding: 0 0.1875rem;
     2190        margin: 0;
     2191        margin-left: -0.1875rem;
     2192}
    17302193
    17312194select {
    1732   height: 2.4375rem;
    1733   padding: 0.5rem;
    1734   border: 1px solid #cacaca;
    1735   margin: 0 0 1rem;
    1736   font-size: 1rem;
    1737   font-family: inherit;
    1738   line-height: normal;
    1739   color: #0a0a0a;
    1740   background-color: #fefefe;
    1741   border-radius: 0;
    1742   -webkit-appearance: none;
    1743   -moz-appearance: none;
    1744   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%28138, 138, 138%29"></polygon></svg>');
    1745   background-size: 9px 6px;
    1746   background-position: right center;
    1747   background-origin: content-box;
    1748   background-repeat: no-repeat; }
    1749   @media screen and (min-width: 0\0) {
    1750     select {
    1751       background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=="); } }
    1752   select:disabled {
    1753     background-color: #e6e6e6;
    1754     cursor: default; }
    1755   select::-ms-expand {
    1756     display: none; }
    1757   select[multiple] {
    1758     height: auto; }
     2195        height: 2.4375rem;
     2196        padding: 0.5rem;
     2197        border: 1px solid #cacaca;
     2198        margin: 0 0 1rem;
     2199        font-size: 1rem;
     2200        font-family: inherit;
     2201        line-height: normal;
     2202        color: #0a0a0a;
     2203        background-color: #fefefe;
     2204        border-radius: 0;
     2205        -webkit-appearance: none;
     2206        -moz-appearance: none;
     2207        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%28138, 138, 138%29"></polygon></svg>');
     2208        background-size: 9px 6px;
     2209        background-position: right center;
     2210        background-origin: content-box;
     2211        background-repeat: no-repeat;
     2212}
     2213@media screen and (min-width: 0\0) {
     2214        select {
     2215                background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==");
     2216        }
     2217}
     2218select:disabled {
     2219        background-color: #e6e6e6;
     2220        cursor: default;
     2221}
     2222select::-ms-expand {
     2223        display: none;
     2224}
     2225select[multiple] {
     2226        height: auto;
     2227}
    17592228
    17602229.is-invalid-input:not(:focus) {
    1761   background-color: rgba(236, 88, 64, 0.1);
    1762   border-color: #ec5840; }
     2230        background-color: rgba(236, 88, 64, 0.1);
     2231        border-color: #ec5840; }
    17632232
    17642233.is-invalid-label {
    1765   color: #ec5840; }
     2234        color: #ec5840;
     2235}
    17662236
    17672237.form-error {
    1768   display: none;
    1769   margin-top: -0.5rem;
    1770   margin-bottom: 1rem;
    1771   font-size: 0.75rem;
    1772   font-weight: bold;
    1773   color: #ec5840; }
    1774   .form-error.is-visible {
    1775     display: block; }
     2238        display: none;
     2239        margin-top: -0.5rem;
     2240        margin-bottom: 1rem;
     2241        font-size: 0.75rem;
     2242        font-weight: bold;
     2243        color: #ec5840;
     2244}
     2245.form-error.is-visible {
     2246        display: block;
     2247}
    17762248
    17772249.accordion {
    1778   list-style-type: none;
    1779   background: #fefefe;
    1780   border: 1px solid #e6e6e6;
    1781   border-bottom: 0;
    1782   border-radius: 0;
    1783   margin-left: 0; }
     2250        list-style-type: none;
     2251        background: #fefefe;
     2252        border: 1px solid #e6e6e6;
     2253        border-bottom: 0;
     2254        border-radius: 0;
     2255        margin-left: 0;
     2256}
    17842257
    17852258.accordion-title {
    1786   display: block;
    1787   padding: 1.25rem 1rem;
    1788   line-height: 1;
    1789   font-size: 0.75rem;
    1790   color: #2199e8;
    1791   position: relative;
    1792   border-bottom: 1px solid #e6e6e6; }
    1793   .accordion-title:hover, .accordion-title:focus {
    1794     background-color: #e6e6e6; }
    1795   .accordion-title::before {
    1796     content: '+';
    1797     position: absolute;
    1798     right: 1rem;
    1799     top: 50%;
    1800     margin-top: -0.5rem; }
    1801   .is-active > .accordion-title::before {
    1802     content: '–'; }
     2259        display: block;
     2260        padding: 1.25rem 1rem;
     2261        line-height: 1;
     2262        font-size: 0.75rem;
     2263        color: #2199e8;
     2264        position: relative;
     2265        border-bottom: 1px solid #e6e6e6;
     2266}
     2267.accordion-title:hover, .accordion-title:focus {
     2268        background-color: #e6e6e6;
     2269}
     2270.accordion-title::before {
     2271        content: '+';
     2272        position: absolute;
     2273        right: 1rem;
     2274        top: 50%;
     2275        margin-top: -0.5rem;
     2276}
     2277.is-active > .accordion-title::before {
     2278        content: '–';
     2279}
    18032280
    18042281.accordion-content {
    1805   padding: 1rem;
    1806   display: none;
    1807   border-bottom: 1px solid #e6e6e6;
    1808   background-color: #fefefe; }
     2282        padding: 1rem;
     2283        display: none;
     2284        border-bottom: 1px solid #e6e6e6;
     2285        background-color: #fefefe;
     2286}
    18092287
    18102288.is-accordion-submenu-parent > a {
    1811   position: relative; }
    1812   .is-accordion-submenu-parent > a::after {
    1813     content: '';
    1814     display: block;
    1815     width: 0;
    1816     height: 0;
    1817     border: inset 6px;
    1818     border-color: #2199e8 transparent transparent;
    1819     border-top-style: solid;
    1820     border-bottom-width: 0;
    1821     position: absolute;
    1822     top: 50%;
    1823     margin-top: -4px;
    1824     right: 1rem; }
     2289        position: relative;
     2290}
     2291.is-accordion-submenu-parent > a::after {
     2292        content: '';
     2293        display: block;
     2294        width: 0;
     2295        height: 0;
     2296        border: inset 6px;
     2297        border-color: #2199e8 transparent transparent;
     2298        border-top-style: solid;
     2299        border-bottom-width: 0;
     2300        position: absolute;
     2301        top: 50%;
     2302        margin-top: -4px;
     2303        right: 1rem;
     2304}
    18252305
    18262306.is-accordion-submenu-parent[aria-expanded='true'] > a::after {
    1827   transform-origin: 50% 50%;
    1828   transform: scaleY(-1); }
     2307        transform-origin: 50% 50%;
     2308        transform: scaleY(-1);
     2309}
    18292310
    18302311.badge {
    1831   display: inline-block;
    1832   padding: 0.3em;
    1833   min-width: 2.1em;
    1834   font-size: 0.6rem;
    1835   text-align: center;
    1836   border-radius: 50%;
    1837   background: #2199e8;
    1838   color: #fefefe; }
    1839   .badge.secondary {
    1840     background: #777;
    1841     color: #fefefe; }
    1842   .badge.success {
    1843     background: #3adb76;
    1844     color: #fefefe; }
    1845   .badge.warning {
    1846     background: #ffae00;
    1847     color: #fefefe; }
    1848   .badge.alert {
    1849     background: #ec5840;
    1850     color: #fefefe; }
     2312        display: inline-block;
     2313        padding: 0.3em;
     2314        min-width: 2.1em;
     2315        font-size: 0.6rem;
     2316        text-align: center;
     2317        border-radius: 50%;
     2318        background: #2199e8;
     2319        color: #fefefe;
     2320}
     2321.badge.secondary {
     2322        background: #777;
     2323        color: #fefefe;
     2324}
     2325.badge.success {
     2326        background: #3adb76;
     2327        color: #fefefe;
     2328}
     2329.badge.warning {
     2330        background: #ffae00;
     2331        color: #fefefe;
     2332}
     2333.badge.alert {
     2334        background: #ec5840;
     2335        color: #fefefe;
     2336}
    18512337
    18522338.breadcrumbs {
    1853   list-style: none;
    1854   margin: 0 0 1rem 0; }
    1855   .breadcrumbs::before, .breadcrumbs::after {
    1856     content: ' ';
    1857     display: table;
    1858     flex-basis: 0;
    1859     order: 1; }
    1860   .breadcrumbs::after {
    1861     clear: both; }
    1862   .breadcrumbs li {
    1863     float: left;
    1864     color: #0a0a0a;
    1865     font-size: 0.6875rem;
    1866     cursor: default;
    1867     text-transform: uppercase; }
    1868     .breadcrumbs li:not(:last-child)::