aardrian/gen-con-2016-food-truck-shifts.markdown

## gen-con-2016-food-truck-shifts.markdown

      
    Raw
  

              gen-con-2016-food-truck-shifts.markdown
            
          
    Gen Con 2016 Food Truck Shifts

A quick method to select see what food trucks will be on site using just CSS for the mobile accordion, desktop tabs. Uses script to detect current time and start you in the appropriate grid, with some additional JavaScript to manage states.
A Pen by Adrian Roselli on CodePen.
License.

  
## index.html
<main class="showall" id="ShowAll">
  <h1><span>Gen Con 2016 (unauthorized / unofficial)<br></span>Food Truck Shifts</h1>

  <p>
    The auto-expanded slots are based on your device’s timezone (prior to Gen Con nothing will be expanded). Make sure to set your device to the same timezone as Indianapolis (which is EDT / GMT&minus;0400). Truck links point only to Twitter accounts.
  </p>
  <p>
    Report errors to <a href="https://twitter.com/aardrian">@aardrian</a>. Bookmark <a href="http://rosel.li/GenConTrucks">rosel.li/GenConTrucks</a> as it redirects to wherever this page lives (in case I get booted off CodePen).
  </p>

  <ul id="DayChooser">
    <li>
      <a href="#Day1Shift1" id="Day1Shift1_tab">
        <span class="day">Day 1</span>
        <span class="weekday">Wednesday</span>
        <span class="date">August 3<sup>rd</sup></span>
        <span class="part">Night</span>
        <span class="time">5<span class="sup">:00</span><span class="sub">pm</span> &ndash; 11<span class="sup">:00</span><span class="sub">pm</span></span>
      </a>
    </li>
    <li>
      <a href="#Day2Shift1" id="Day2Shift1_tab">
        <span class="day">Day 2</span>
        <span class="weekday">Thursday</span>
        <span class="date">August 4<sup>th</sup></span>
        <span class="part">Day</span>
        <span class="time">11<span class="sup">:00</span><span class="sub">am</span> &ndash; 4<span class="sup">:00</span><span class="sub">pm</span></span>
      </a>
    </li>
    <li>
      <a href="#Day2Shift2" id="Day2Shift2_tab">
        <span class="day">Day 2</span>
        <span class="weekday">Thursday</span>
        <span class="date">August 4<sup>th</sup></span>
        <span class="part">Night</span>
        <span class="time">5<span class="sup">:00</span><span class="sub">pm</span> &ndash; 11<span class="sup">:00</span><span class="sub">pm</span></span>
      </a>
    </li>
    <li>
      <a href="#Day3Shift1" id="Day3Shift1_tab">
        <span class="day">Day 3</span>
        <span class="weekday">Friday</span>
        <span class="date">August 5<sup>th</sup></span>
        <span class="part">Day</span>
        <span class="time">11<span class="sup">:00</span><span class="sub">am</span> &ndash; 4<span class="sup">:00</span><span class="sub">pm</span></span>
      </a>
    </li>
    <li>
      <a href="#Day3Shift2" id="Day3Shift2_tab">
        <span class="day">Day 3</span>
        <span class="weekday">Friday</span>
        <span class="date">August 5<sup>th</sup></span>
        <span class="part">Night</span>
        <span class="time">5<span class="sup">:00</span><span class="sub">pm</span> &ndash; 11<span class="sup">:00</span><span class="sub">pm</span></span>
      </a>
    </li>
    <li>
      <a href="#Day4Shift1" id="Day4Shift1_tab">
        <span class="day">Day 4</span>
        <span class="weekday">Saturday</span>
        <span class="date">August 6<sup>th</sup></span>
        <span class="part">Day</span>
        <span class="time">11<span class="sup">:00</span><span class="sub">am</span> &ndash; 4<span class="sup">:00</span><span class="sub">pm</span></span>
      </a>
    </li>
    <li>
      <a href="#Day4Shift2" id="Day4Shift2_tab">
        <span class="day">Day 4</span>
        <span class="weekday">Saturday</span>
        <span class="date">August 6<sup>th</sup></span>
        <span class="part">Night</span>
        <span class="time">5<span class="sup">:00</span><span class="sub">pm</span> &ndash; 11<span class="sup">:00</span><span class="sub">pm</span></span>
      </a>
    </li>
    <li>
      <a href="#Day5Shift1" id="Day5Shift1_tab">
        <span class="day">Day 5</span>
        <span class="weekday">Sunday</span>
        <span class="date">August 7<sup>th</sup></span></span>
        <span class="part">Day</span>
        <span class="time">11<span class="sup">:00</span><span class="sub">am</span> &ndash; 5<span class="sup">:00</span><span class="sub">pm</span></span>
      </a>
    </li>
  </ul>


  <div id="Day1Shift1" class="shift">
    <h2>
      <span>Day 1: Wednesday, August 3<sup>rd</sup> (5:00pm &ndash; 11:00pm)</span>
      <a href="#Day1Shift1">
        <div>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      <span class="weekday">Wed</span>
      <span class="date">August 3<sup>rd</sup></span>
      <span class="part">Night</span>
      <span class="time">5<span class="sup">:00</span><span class="sub">pm</span> &ndash; 11<span class="sup">:00</span><span class="sub">pm</span></span></a>
    </h2>
    <table>
      <tr>
        <th>Georgia</th>
        <th>Capitol</th>
      </tr>
      <tr>
        <!-- <td>1</td> -->
        <td>The Grub House</td>
        <!-- <td>1</td> -->
        <td><a href="https://twitter.com/brozinni">Brozinni</a></td>
      </tr>
      <tr>
        <!-- <td>2</td> -->
        <td><a href="https://twitter.com/SerendipityMC">Serendipity</a> 2</td>
        <!-- <td>2</td> -->
        <td><a href="https://twitter.com/thesostruck">S.O.S. Truck</a> (Simeri’s Italian)</td>
      </tr>
      <tr>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/poccadio">Poccadio</a></td>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/luckylouiedogs">Lucky Louie’s</a></td>
      </tr>
      <tr>
        <!-- <td>4</td> -->
        <td><a href="https://twitter.com/huge_Impact_LLC">The Huge Impact</a></td>
        <!-- <td>4</td> -->
        <td>Which Wich</td>
      </tr>
      <tr>
        <!-- <td>5</td> -->
        <td><a href="https://twitter.com/Pierogiloveindy">Pierogi Love</a></td>
        <!-- <td>5</td> -->
        <td><a href="https://twitter.com/seoulrito">Seoulrito</a></td>
      </tr>
      <tr>
        <!-- <td>6</td> -->
        <td>Oooweee Chicken</td>
        <!-- <td>6</td> -->
        <td><a href="https://twitter.com/wildboarbbq">Wild Boar BBQ</a></td>
      </tr>
      <tr>
        <!-- <td>7</td> -->
        <td><a href="https://twitter.com/wyliepalooza?lang=en">Wyliepalooza</a></td>
        <!-- <td>7</td> -->
        <td>Ali Baba</td>
      </tr>
      <tr>
        <!-- <td>8</td> -->
        <td><a href="https://twitter.com/chiveturkeyindy">Chive Turkey</a></td>
        <!-- <td>8</td> -->
        <td><a href="https://twitter.com/pi_indy?lang=en">Pi IndyQ</a></td>
      </tr>
      <tr>
        <!-- <td>9</td> -->
        <td><a href="https://twitter.com/derpretzelwagen">Der Pretzel Wagen</a></td>
        <!-- <td>9</td> -->
        <td><a href="https://twitter.com/thepinkwalrus1">The Pink Walrus</a></td>
      </tr>
      <tr>
        <!-- <td>10</td> -->
        <td>Soladine Concessions</td>
        <!-- <td>10</td> -->
        <td><a href="https://twitter.com/SerendipityMC">Serendipity</a></td>
      </tr>
    </table>
  </div>

  <div id="Day2Shift1" class="shift">
    <h2><span>Day 2: Thursday, August 4<sup>th</sup> (11:00am &ndash; 4:00pm)</span>
    <a href="#Day2Shift1">
        <div>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      <span class="weekday">Thu</span>
      <span class="date">August 4<sup>th</sup></span>
      <span class="part">Day</span>
      <span class="time">11<span class="sup">:00</span><span class="sub">am</span> &ndash; 4<span class="sup">:00</span><span class="sub">pm</span></span></a>
    </h2>
    <table>
      <tr>
        <th>Georgia</th>
        <th>Capitol</th>
      </tr>
      <tr>
        <!-- <td>1</td> -->
        <td><a href="https://twitter.com/gobblefoodtruck">Gobble Gobble</a></td>
        <!-- <td>1</td> -->
        <td><a href="https://twitter.com/wildboarbbq">Wild Boar BBQ</a></td>
      </tr>
      <tr>
        <!-- <td>2</td> -->
        <td><a href="https://twitter.com/karmakitchen1">Karma Kitchen</a></td>
        <!-- <td>2</td> -->
        <td>Oooweee Chicken</td>
      </tr>
      <tr>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/jbbqshack">Johnson’s BBQ</a> (Trailer)</td>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/soulsistaOTM">Soul Sista OTM</a></td>
      </tr>
      <tr>
        <!-- <td>4</td> -->
        <td><a href="https://twitter.com/scratchtruck">Scratchtruck</a></td>
        <!-- <td>4</td> -->
        <td><a href="https://twitter.com/jbbqshack">Johnson’s BBQ</a> (Lil’ Smokey)</td>
      </tr>
      <tr>
        <!-- <td>5</td> -->
        <td>Which Wich</td>
        <!-- <td>5</td> -->
        <td><a href="https://twitter.com/thepinkwalrus1">The Pink Walrus</a></td>
      </tr>
      <tr>
        <!-- <td>6</td> -->
        <td>High 5 Lunch</td>
        <!-- <td>6</td> -->
        <td><a href="https://twitter.com/tbabysindy">Tbaby’s Caribbean Cuisine</a></td>
      </tr>
      <tr>
        <!-- <td>7</td> -->
        <td><a href="https://twitter.com/RollingAsianDel">Sunny Chinese Kitchen</a></td>
        <!-- <td>7</td> -->
        <td>Sassy’s Fiesta</td>
      </tr>
      <tr>
        <!-- <td>8</td> -->
        <td><a href="https://twitter.com/seoulrito">Seoulrito</a></td>
        <!-- <td>8</td> -->
        <td><a href="https://twitter.com/Gigisindypinky">Gigi’s Cupcakes</a></td>
      </tr>
      <tr>
        <!-- <td>9</td> -->
        <td>Soladine Concessions</td>
        <!-- <td>9</td> -->
        <td><a href="https://twitter.com/wyliepalooza?lang=en">Wyliepalooza</a></td>
      </tr>
      <tr>
        <!-- <td>10</td> -->
        <td><a href="https://twitter.com/RickerStores">R. Burritos</a></td>
        <!-- <td>10</td> -->
        <td>Sweet Talk Me</td>
      </tr>
    </table>
  </div>

  <div id="Day2Shift2" class="shift">
    <h2>
      <span>Day 2: Thursday, August 4<sup>th</sup> (5:00pm &ndash; 11:00pm)</span>
    <a href="#Day2Shift2">
        <div>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      <span class="weekday">Thu</span>
      <span class="date">August 4<sup>th</sup></span>
      <span class="part">Night</span>
      <span class="time">5<span class="sup">:00</span><span class="sub">pm</span> &ndash; 11<span class="sup">:00</span><span class="sub">pm</span></span></a>
    </h2>
    <table>
      <tr>
        <th>Georgia</th>
        <th>Capitol</th>
      </tr>
      <tr>
        <!-- <td>1</td> -->
        <td><a href="https://twitter.com/samsupperkrust">Sam’s Upper Krust</a></td>
        <!-- <td>1</td> -->
        <td><a href="https://twitter.com/SerendipityMC">Serendipity</a> Truck</td>
      </tr>
      <tr>
        <!-- <td>2</td> -->
        <td>Ali Baba</td>
        <!-- <td>2</td> -->
        <td><a href="https://twitter.com/huge_Impact_LLC">The Huge Impact</a></td>
      </tr>
      <tr>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/Dhabaindy">Dhaba Indy</a></td>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/HeavenlySweets_">Heavenly Sweets</a></td>
      </tr>
      <tr>
        <!-- <td>4</td> -->
        <td><a href="https://twitter.com/faroutfreds">Far Out Fred’s</a></td>
        <!-- <td>4</td> -->
        <td><a href="https://twitter.com/groovyguysfries">Groovy Guys Fries</a></td>
      </tr>
      <tr>
        <!-- <td>5</td> -->
        <td><a href="https://twitter.com/brozinni">Brozinni</a></td>
        <!-- <td>5</td> -->
        <td><a href="https://twitter.com/thesostruck">S.O.S. Truck</a> (Simeri’s Italian)</td>
      </tr>
      <tr>
        <!-- <td>6</td> -->
        <td><a href="https://twitter.com/derpretzelwagen">Der Pretzel Wagen</a></td>
        <!-- <td>6</td> -->
        <td><a href="https://twitter.com/pi_indy?lang=en">Pi IndyQ</a></td>
      </tr>
      <tr>
        <!-- <td>7</td> -->
        <td>Midway Munchies</td>
        <!-- <td>7</td> -->
        <td>The Grub House</td>
      </tr>
      <tr>
        <!-- <td>8</td> -->
        <td><a href="https://twitter.com/Pierogiloveindy">Pierogi Love</a></td>
        <!-- <td>8</td> -->
        <td><a href="https://twitter.com/talkinturkey317">Talkin’ Turkey</a></td>
      </tr>
      <tr>
        <!-- <td>9</td> -->
        <td><a href="https://twitter.com/dabluelagoon">Da Blue Lagoon</a></td>
        <!-- <td>9</td> -->
        <td><a href="https://twitter.com/SerendipityMC">Serendipity</a></td>
      </tr>
      <tr>
        <!-- <td>10</td> -->
        <td>General American Donut</td>
        <!-- <td>10</td> -->
        <td><a href="https://twitter.com/tacoswoborders">Tacos Without Borders</a></td>
      </tr>
      <tr>
        <td></td>
        <!-- <td>11</td> -->
        <td><a href="https://twitter.com/chefdansindy">Chef Dan’s</a></td>
      </tr>
    </table>
  </div>

  <div id="Day3Shift1" class="shift">
    <h2>
      <span>Day 3: Friday, August 5<sup>th</sup> (11:00am &ndash; 4:00pm)</span>
    <a href="#Day3Shift1">
        <div>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      <span class="weekday">Fri</span>
      <span class="date">August 5<sup>th</sup></span>
      <span class="part">Day</span>
      <span class="time">11<span class="sup">:00</span><span class="sub">am</span> &ndash; 4<span class="sup">:00</span><span class="sub">pm</span></span></a>
    </h2>
    <table>
      <tr>
        <th>Georgia</th>
        <th>Capitol</th>
      </tr>
      <tr>
        <!-- <td>1</td> -->
        <td>Ali Baba</td>
        <!-- <td>1</td> -->
        <td>Ooowee Chicken</td>
      </tr>
      <tr>
        <!-- <td>2</td> -->
        <td><a href="https://twitter.com/markauberry">Firehouse Cook</a></td>
        <!-- <td>2</td> -->
        <td><a href="https://twitter.com/soulsistaOTM">Soul Sista OTM</a></td>
      </tr>
      <tr>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/scratchtruck">Scratchtruck</a></td>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/poccadio">Poccadio</a></td>
      </tr>
      <tr>
        <!-- <td>4</td> -->
        <td><a href="https://twitter.com/wildboarbbq">Wild Boar BBQ</a></td>
        <!-- <td>4</td> -->
        <td><a href="https://twitter.com/tacoswoborders">Tacos Without Borders</a></td>
      </tr>
      <tr>
        <!-- <td>5</td> -->
        <td><a href="https://twitter.com/Caribbean_Taste">Taste of the Caribbean</a></td>
        <!-- <td>5</td> -->
        <td><a href="https://twitter.com/flyncupcake">The Flying Cupcake</a></td>
      </tr>
      <tr>
        <!-- <td>6</td> -->
        <td><a href="https://twitter.com/talkinturkey317">Talkin’ Turkey</a></td>
        <!-- <td>6</td> -->
        <td><a href="https://twitter.com/Pierogiloveindy">Pierogi Love</a></td>
      </tr>
      <tr>
        <!-- <td>7</td> -->
        <td><a href="https://twitter.com/derpretzelwagen">Der Pretzel Wagen</a></td>
        <!-- <td>7</td> -->
        <td><a href="https://twitter.com/gauchosfire">Gaucho’s Fire</a></td>
      </tr>
      <tr>
        <!-- <td>8</td> -->
        <td><a href="https://twitter.com/chiveturkeyindy">Chive Turkey</a></td>
        <!-- <td>8</td> -->
        <td><a href="https://twitter.com/NachoMamasFT/">Nacho Momma’s</a></td>
      </tr>
      <tr>
        <!-- <td>9</td> -->
        <td><a href="https://twitter.com/DuosIndy">Duos</a></td>
        <!-- <td>9</td> -->
        <td><a href="https://twitter.com/dabluelagoon">Da Blue Lagoon</a></td>
      </tr>
      <tr>
        <!-- <td>10</td> -->
        <td><a href="https://twitter.com/SerendipityMC">Serendipity</a> #2</td>
        <!-- <td>10</td> -->
        <td><a href="https://twitter.com/baconstation1">Bacon Station</a></td>
      </tr>
    </table>
  </div>

  <div id="Day3Shift2" class="shift">
    <h2>
      <span>Day 3: Friday, August 5<sup>th</sup> (5:00pm &ndash; 11:00pm)</span>
    <a href="#Day3Shift2">
        <div>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      <span class="weekday">Fri</span>
      <span class="date">August 5<sup>th</sup></span>
      <span class="part">Night</span>
      <span class="time">5<span class="sup">:00</span><span class="sub">pm</span> &ndash; 11<span class="sup">:00</span><span class="sub">pm</span></span></a>
    </h2>
    <table>
      <tr>
        <th>Georgia</th>
        <th>Capitol</th>
      </tr>
      <tr>
        <!-- <td>1</td> -->
        <td><a href="https://twitter.com/biscuits_cafe">Biscuits Café</a></td>
        <!-- <td>1</td> -->
        <td>The Checkered Chef</td>
      </tr>
      <tr>
        <!-- <td>2</td> -->
        <td><a href="https://twitter.com/TwistedSicilian">The Twisted Sicilian</a></td>
        <!-- <td>2</td> -->
        <td><a href="https://twitter.com/faroutfreds">Far Out Fred’s</a></td>
      </tr>
      <tr>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/karmakitchen1">Karma Kitchen</a></td>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/SerendipityMC">Serendipity</a></td>
      </tr>
      <tr>
        <!-- <td>4</td> -->
        <td><a href="https://twitter.com/ByrnesPizza">Byrne’s Grilled Pizza</a></td>
        <!-- <td>4</td> -->
        <td>Sweet Talk Me</td>
      </tr>
      <tr>
        <!-- <td>5</td> -->
        <td><a href="https://twitter.com/samsupperkrust">Sam’s Upper Krust</a></td>
        <!-- <td>5</td> -->
        <td>High 5 Lunch</td>
      </tr>
      <tr>
        <!-- <td>6</td> -->
        <td><a href="https://twitter.com/thesostruck">S.O.S. Truck</a> (Simeri’s Italian)</td>
        <!-- <td>6</td> -->
        <td><a href="https://twitter.com/HeavenlySweets_">Heavenly Sweets</a></td>
      </tr>
      <tr>
        <!-- <td>7</td> -->
        <td><a href="https://twitter.com/bigcheezein">The Big Cheeze</a></td>
        <!-- <td>7</td> -->
        <td><a href="https://twitter.com/boxburgertruck">Box Burger</a></td>
      </tr>
      <tr>
        <!-- <td>8</td> -->
        <td><a href="https://twitter.com/seoulrito">Seoulrito</a></td>
        <!-- <td>8</td> -->
        <td>The Grub House</td>
      </tr>
      <tr>
        <!-- <td>9</td> -->
        <td><a href="https://twitter.com/HashTruckIndy">Citizen Hash</a></td>
        <!-- <td>9</td> -->
        <td><a href="https://twitter.com/pi_indy?lang=en">Pi IndyQ</a></td>
      </tr>
      <tr>
        <!-- <td>10</td> -->
        <td>Dog’s Most Wanted</td>
        <!-- <td>10</td> -->
        <td><a href="https://twitter.com/jbbqshack">Johnson’s BBQ</a> (Lil’ Smokey)</td>
      </tr>
      <tr>
        <td></td>
        <!-- <td>11</td> -->
        <td>Simple & Good Catering</td>
      </tr>
    </table>
  </div>

  <div id="Day4Shift1" class="shift">
    <h2>
      <span>Day 4: Saturday, August 6<sup>th</sup> (11:00am &ndash; 4:00pm)</span>
    <a href="#Day4Shift1">
        <div>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      <span class="weekday">Sat</span>
      <span class="date">August 6<sup>th</sup></span>
      <span class="part">Day</span>
      <span class="time">11<span class="sup">:00</span><span class="sub">am</span> &ndash; 4<span class="sup">:00</span><span class="sub">pm</span></span></a>
    </h2>
    <table>
      <tr>
        <th>Georgia</th>
        <th>Capitol</th>
      </tr>
      <tr>
        <!-- <td>1</td> -->
        <td><a href="https://twitter.com/markauberry">Firehouse Cook</a></td>
        <!-- <td>1</td> -->
        <td><a href="https://twitter.com/thepinkwalrus1">The Pink Walrus</a></td>
      </tr>
      <tr>
        <!-- <td>2</td> -->
        <td><a href="https://twitter.com/tbabysindy">Tbaby’s Caribbean Cuisine</a></td>
        <!-- <td>2</td> -->
        <td><a href="https://twitter.com/Gigisindypinky">Gigi’s Cupcakes</a></td>
      </tr>
      <tr>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/muaythaikitchen">Muay Thai</a></td>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/huge_Impact_LLC">The Huge Impact</a></td>
      </tr>
      <tr>
        <!-- <td>4</td> -->
        <td>General American Donut</td>
        <!-- <td>4</td> -->
        <td><a href="https://twitter.com/dabluelagoon">Da Blue Lagoon</a></td>
      </tr>
      <tr>
        <!-- <td>5</td> -->
        <td><a href="https://twitter.com/Caribbean_Taste">Taste of the Caribbean</a></td>
        <!-- <td>5</td> -->
        <td><a href="https://twitter.com/HashTruckIndy">Citizen Hash</a></td>
      </tr>
      <tr>
        <!-- <td>6</td> -->
        <td><a href="https://twitter.com/samsupperkrust">Sam’s Upper Krust</a></td>
        <!-- <td>6</td> -->
        <td><a href="https://twitter.com/seoulrito">Seoulrito</a></td>
      </tr>
      <tr>
        <!-- <td>7</td> -->
        <td>Ali Baba</td>
        <!-- <td>7</td> -->
        <td><a href="https://twitter.com/flyncupcake">The Flying Cupcake</a></td>
      </tr>
      <tr>
        <!-- <td>8</td> -->
        <td><a href="https://twitter.com/GroovyGuysFries">Groovy Guys Fries</a></td>
        <!-- <td>8</td> -->
        <td><a href="https://twitter.com/derpretzelwagen">Der Pretzel Wagen</a></td>
      </tr>
      <tr>
        <!-- <td>9</td> -->
        <td><a href="https://twitter.com/Dhabaindy">Dhaba Indy</a></td>
        <!-- <td>9</td> -->
        <td><a href="https://twitter.com/wyliepalooza?lang=en">Wyliepalooza</a></td>
      </tr>
      <tr>
        <!-- <td>10</td> -->
        <td><a href="https://twitter.com/soulsistaOTM">Soul Sista OTM</a></td>
        <!-- <td>10</td> -->
        <td><a href="https://twitter.com/pi_indy?lang=en">Pi IndyQ</a></td>
      </tr>
      <tr>
        <td></td>
        <!-- <td>11</td> -->
        <td><a href="https://twitter.com/bigronsbistro">Big Ron’s</a></td>
      </tr>
    </table>
  </div>

  <div id="Day4Shift2" class="shift">
    <h2>
      <span>Day 4: Saturday, August 6<sup>th</sup> (5:00pm &ndash; 11:00pm)</span>
    <a href="#Day4Shift2">
        <div>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      <span class="weekday">Sat</span>
      <span class="date">August 6<sup>th</sup></span>
      <span class="part">Night</span>
      <span class="time">5<span class="sup">:00</span><span class="sub">pm</span> &ndash; 11<span class="sup">:00</span><span class="sub">pm</span></span></a>
    </h2>
    <table>
      <tr>
        <th>Georgia</th>
        <th>Capitol</th>
      </tr>
      <tr>
        <!-- <td>1</td> -->
        <td>Sweet Talk Me</td>
        <!-- <td>1</td> -->
        <td><a href="https://twitter.com/baconstation1">Bacon Station</a></td>
      </tr>
      <tr>
        <!-- <td>2</td> -->
        <td>Ooowee Chicken</td>
        <!-- <td>2</td> -->
        <td><a href="https://twitter.com/gobblefoodtruck">Gobble Gobble</a></td>
      </tr>
      <tr>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/bobsbackyardbbq">Backyard BBQ</a></td>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/ByrnesPizza">Byrne’s Grilled Pizza</a></td>
      </tr>
      <tr>
        <!-- <td>4</td> -->
        <td>The Checkered Chef</td>
        <!-- <td>4</td> -->
        <td><a href="https://twitter.com/HeavenlySweets_">Heavenly Sweets</a></td>
      </tr>
      <tr>
        <!-- <td>5</td> -->
        <td><a href="https://twitter.com/jbbqshack">Johnson’s BBQ</a> (Lil’ Smokey)</td>
        <!-- <td>5</td> -->
        <td><a href="https://twitter.com/Pierogiloveindy">Pierogi Love</a></td>
      </tr>
      <tr>
        <!-- <td>6</td> -->
        <td><a href="https://twitter.com/DuosIndy">Duos</a></td>
        <!-- <td>6</td> -->
        <td>High 5 Lunch</td>
      </tr>
      <tr>
        <!-- <td>7</td> -->
        <td><a href="https://twitter.com/tacoswoborders">Tacos Without Borders</a></td>
        <!-- <td>7</td> -->
        <td><a href="https://twitter.com/chiveturkeyindy">Chive Turkey</a></td>
      </tr>
      <tr>
        <!-- <td>8</td> -->
        <td><a href="https://twitter.com/SerendipityMC">Serendipity</a> 2</td>
        <!-- <td>8</td> -->
        <td><a href="https://twitter.com/gauchosfire">Gaucho’s Fire</a></td>
      </tr>
      <tr>
        <!-- <td>9</td> -->
        <td><a href="https://twitter.com/talkinturkey317">Talkin’ Turkey</a></td>
        <!-- <td>9</td> -->
        <td><a href="https://twitter.com/dashboarddiner">Edward’s Dashboard Diner</a></td>
      </tr>
      <tr>
        <!-- <td>10</td> -->
        <td><a href="https://twitter.com/cavemantruck">Caveman</a></td>
        <!-- <td>10</td> -->
        <td><a href="https://twitter.com/scratchtruck">Scratchtruck</a></td>
      </tr>
    </table>
    <p>
      STJ: <a href="https://twitter.com/dancindonut">The Dancing Donut</a>
    </p>
  </div>

  <div id="Day5Shift1" class="shift">
    <h2>
      <span>Day 5: Sunday, August 7<sup>th</sup> (11:00am &ndash; 5:00pm)</span>
        <a href="#Day5Shift1">
        <div>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      <span class="weekday">Sun</span>
      <span class="date">August 7<sup>th</sup></span></span>
      <span class="part">Day</span>
      <span class="time">11<span class="sup">:00</span><span class="sub">am</span> &ndash; 5<span class="sup">:00</span><span class="sub">pm</span></span></a>
    </h2>
    <table>
      <tr>
        <th>Georgia</th>
        <th>Capitol</th>
      </tr>
      <tr>
        <!-- <td>1</td> -->
        <td><a href="https://twitter.com/soulsistaOTM">Soul Sista OTM</a></td>
        <!-- <td>1</td> -->
        <td><a href="https://twitter.com/muaythaikitchen">Muay Thai</a></td>
      </tr>
      <tr>
        <!-- <td>2</td> -->
        <td><a href="https://twitter.com/karmakitchen1">Karma Kitchen</a></td>
        <!-- <td>2</td> -->
        <td><a href="https://twitter.com/thesostruck">S.O.S. Truck</a> (Simeri’s Italian)</td>
      </tr>
      <tr>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/biscuits_cafe">Biscuits Café</a></td>
        <!-- <td>3</td> -->
        <td><a href="https://twitter.com/SerendipityMC">Serendipity</a> Truck</td>
      </tr>
      <tr>
        <!-- <td>4</td> -->
        <td><a href="https://twitter.com/derpretzelwagen">Der Pretzel Wagen</a></td>
        <!-- <td>4</td> -->
        <td>The Checkered Chef</td>
      </tr>
      <tr>
        <!-- <td>5</td> -->
        <td><a href="https://twitter.com/luckylouiedogs">Lucky Louie’s</a></td>
        <!-- <td>5</td> -->
        <td><a href="https://twitter.com/Caribbean_Taste">Taste of the Caribbean</a></td>
      </tr>
      <tr>
        <!-- <td>6</td> -->
        <td>The Grub House</td>
        <!-- <td>6</td> -->
        <td><a href="https://twitter.com/jbbqshack">Johnson’s BBQ</a> (Lil’ Smokey)</td>
      </tr>
      <tr>
        <!-- <td>7</td> -->
        <td><a href="https://twitter.com/tacoswoborders">Tacos Without Borders</a></td>
        <!-- <td>7</td> -->
        <td>Midway Munchies</td>
      </tr>
      <tr>
        <!-- <td>8</td> -->
        <td><a href="https://twitter.com/SerendipityMC">Serendipity</a> 2</td>
        <!-- <td>8</td> -->
        <td><a href="https://twitter.com/Gigisindypinky">Gigi’s Cupcakes</a></td>
      </tr>
      <tr>
        <!-- <td>9</td> -->
        <td>Two Chicks Whisky Business</td>
        <!-- <td>9</td> -->
        <td><a href="https://twitter.com/RollingAsianDel">Sunny Chinese Kitchen</a></td>
      </tr>
      <tr>
        <!-- <td>10</td> -->
        <td><a href="https://twitter.com/talkinturkey317">Talkin’ Turkey</a></td>
        <!-- <td>10</td> -->
        <td><a href="https://twitter.com/faroutfreds">Far Out Fred’s</a></td>
      </tr>
    </table>
    <p>
      STJ: <a href="https://twitter.com/flyncupcake">The Flying Cupcake</a>
    </p>
  </div>

</main>

<p>
  <a href="" id="Reset">Reset page</a>
  <a href="#ShowAll" id="Show">Show all</a>
</p>

## script.js
CurrentTime = Date.now(); // Get the current time

// food truck time slots

// Day 1 Shift 1
D1S1_Start = Date.parse('Wed, 03 Aug 2016 10:30:00 GMT-0400');
D1S1_End = Date.parse('Wed, 03 Aug 2016 23:30:00 GMT-0400');
// Day 2 Shift 1
D2S1_Start = Date.parse('Wed, 03 Aug 2016 23:30:01 GMT-0400');
D2S1_End = Date.parse('Thu, 04 Aug 2016 16:29:59 GMT-0400');
// Day 2 Shift 2
D2S2_Start = Date.parse('Thu, 04 Aug 2016 16:30:00 GMT-0400');
D2S2_End = Date.parse('Thu, 04 Aug 2016 23:30:00 GMT-0400');
// Day 3 Shift 1
D3S1_Start = Date.parse('Thu, 04 Aug 2016 23:30:01 GMT-0400');
D3S1_End = Date.parse('Fri, 05 Aug 2016 16:29:59 GMT-0400');
// Day 3 Shift 2
D3S2_Start = Date.parse('Fri, 05 Aug 2016 16:30:00 GMT-0400');
D3S2_End = Date.parse('Fri, 05 Aug 2016 23:30:00 GMT-0400');
// Day 4 Shift 1
D4S1_Start = Date.parse('Fri, 05 Aug 2016 23:30:01 GMT-0400');
D4S1_End = Date.parse('Sat, 06 Aug 2016 16:29:59 GMT-0400');
// Day 4 Shift 2
D4S2_Start = Date.parse('Sat, 06 Aug 2016 16:30:00 GMT-0400');
D4S2_End = Date.parse('Sat, 06 Aug 2016 23:30:00 GMT-0400');
// Day 5 Shift 1
D5S1_Start = Date.parse('Sat, 06 Aug 2016 23:30:01 GMT-0400');
D5S1_End = Date.parse('Sun, 07 Aug 2016 17:30:00 GMT-0400');

// for comparing date format conversions: http://www.epochconverter.com/

var WhichSlot; // declare it outside the looping

// logic to compare current time with defined slots
if (CurrentTime > D1S1_Start && CurrentTime < D1S1_End) { // leading up to day 1 shift 1
  WhichSlot = "Day1Shift1";
} else if (CurrentTime > D2S1_Start && CurrentTime < D2S1_End) {
  WhichSlot = "Day2Shift1";
} else if (CurrentTime > D2S2_Start && CurrentTime < D2S2_End) {
  WhichSlot = "Day2Shift2";
} else if (CurrentTime > D3S1_Start && CurrentTime < D3S1_End) {
  WhichSlot = "Day3Shift1";
} else if (CurrentTime > D3S2_Start && CurrentTime < D3S2_End) {
  WhichSlot = "Day3Shift2";
} else if (CurrentTime > D4S1_Start && CurrentTime < D4S1_End) {
  WhichSlot = "Day4Shift1";
} else if (CurrentTime > D4S2_Start && CurrentTime < D4S2_End) {
  WhichSlot = "Day4Shift2";
} else if (CurrentTime > D5S1_Start && CurrentTime < D5S1_End) {
  WhichSlot = "Day5Shift1";
} else { // all remaining items, such as day 5 shift 1 and after
  WhichSlot = "";
}

ShowSlot(WhichSlot); // run the function on page load

// Create the variable, also used to see if page is a fresh load
var oldHash;

// function to pre-expand one based on current date/time
function ShowSlot(ident) {
  try {
    var initialPage = window.location; // get current page address
    var hash = initialPage.hash.substring(1); // check the URL for a hash
    var initialPageSansHash = initialPage.href.replace(location.hash, ""); // strip the hash if there is one
    if (hash.length > 0) { // if there is a hash
      if (oldHash !== undefined) { // if the variable has a value, implying this is not first run
      } else { // otherwise no value, which happens on fresh page load
        location.replace(initialPageSansHash + '#' + ident); // reload the page with the hash
      }
    } else { // there is no hash at all
      location.replace(initialPageSansHash + '#' + ident); // reload the page with the hash
    }
  } catch (e) {
    console.log('ShowSlot(): ' + e);
  }
}

// Script to identify the tab to highlight
function ChooseTab() {
  try {
    var hash = location.hash.substring(1); // check the URL for a hash
    if (hash.length > 0) { // if there is a hash
      if (oldHash !== undefined) { // if there was an active tab
        var InactiveTab = document.getElementById(oldHash + '_tab'); // Get the tab with the old ID
        InactiveTab.removeAttribute('class'); // unstyle it as the selected tab
        InactiveTab.removeAttribute('aria-selected'); // make it the selected tab
      }
      var ActiveTab = document.getElementById(hash + '_tab'); // Get the tab with that ID
      ActiveTab.className = 'sel'; // style it as the selected tab
      ActiveTab.setAttribute('aria-selected', true); // make it the selected tab
      oldHash = hash;
    }
  } catch (e) {
    console.log('ChooseTab(): ' + e);
  }
}

ChooseTab(); // run this on page load
window.onhashchange = ChooseTab; // run it again each time the URL changes

## style.css
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
body {
  background-color: #ddd;
  font-size: 100%;
  color: #333;
  font-family: Lato, Arial, sans-serif;
  padding: 0;
  margin: 0;
}

main {
  display: block;
  box-sizing: border-box;
  margin: auto;
  padding: 1em;
}

h1 {
  margin-top: 0;
  line-height: 1;
}

h1 span {
  font-size: 50%;
}

a:link,
a:visited,
a:active {
  color: #00f;
}

a:focus,
a:hover {
  color: #f00;
}

sup,
sub {
  font-size: 60%;
  line-height: 0;
}

table {
  margin: 0 0 1em 0;
  border-collapse: collapse;
}

th,
td {
  padding: .25em .5em;
  vertical-align: text-top;
  text-align: left;
}

tr:nth-child(even) {
  background-color: rgba(255, 255, 255, .25);
}

th {
  vertical-align: bottom;
  background-color: rgba(0, 0, 0, .6);
  color: #fff;
  font-weight: bold;
}

span.sup {
  vertical-align: super;
  font-size: 50%;
  line-height: 0;
}

span.sub {
  vertical-align: sub;
  font-size: 50%;
  margin-left: -1.1em;
  top: -.25em;
  position: relative;
}


/* Hidey Bits -- this drives the core function, so dump the JS and it will still work */

.shift {
  display: none;
}

.shift:target {
  display: block;
}


/* Tab bits */

@media all and (min-width: 58em) {
  #DayChooser {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #666;
  }
  #DayChooser li {
    display: block;
    box-sizing: border-box;
    list-style-type: none;
    margin: 0 0 -1px 0;
    padding: 0;
    width: 12.5%;
  }
  #DayChooser a {
    display: block;
    box-sizing: border-box;
    margin: 0 .25em;
    padding: .5em;
    border: 1px solid #666;
    border-radius: .5em .5em 0 0;
    text-align: center;
    text-decoration: none;
    background-color: rgba(0, 0, 0, .5);
    overflow: hidden;
    position: relative;
  }
  #DayChooser a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: .25em;
    border-bottom: 1px solid #555;
  }
  #DayChooser li:nth-child(odd) a::before {
    background-color: #00c;
  }
  #DayChooser li:nth-child(even) a::before {
    background-color: #cc0;
  }
  #DayChooser a:link,
  #DayChooser a:visited {
    color: #ddd;
  }
  #DayChooser a.sel {
    border-bottom: 1px solid #ddd;
    color: #333;
    background-color: transparent;
  }
  /* tabby styles */
  #DayChooser .day,
  #DayChooser .weekday,
  #DayChooser .date,
  #DayChooser .part,
  #DayChooser .time {
    display: block;
    box-sizing: border-box;
  }
  .day {
    font-size: 160%;
    font-weight: 700;
  }
  .weekday {
    font-size: 80%;
  }
  .date {
    font-size: 90%;
  }
  .part {
    font-size: 160%;
  }
  h2 a {
    display: none;
  }
  #Reset {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #000;
    padding: .5em;
    text-align: center;
    color: #fff;
    text-decoration: none;
    border-radius: 0 0 0 .5em;
  }
  #Show {
    display: none;
  }
}


/* Accordion bits */

@media all and (max-width: 58em) {
  main {
    margin-bottom: 2em;
  }
  .weekday,
  .part {
    font-size: 180%;
  }
  .part::before {
    content: "\a";
    white-space: pre;
  }
  .weekday::after {
    content: ",";
    padding-right: 2em;
  }
  .time::before {
    content: "(";
    padding-left: 2em;
  }
  .time::after {
    content: ")";
  }
  .date,
  .time {
    float: right;
    margin-right: 2em;
    margin-top: 1em;
  }
  .time {
    margin-top: 0;
    clear: right;
  }
  #DayChooser {
    display: none;
  }
  .showall .shift {
    display: block;
  }
  .shift table,
  .shift table + p {
    display: none;
  }
  h2 {
    margin-bottom: 0;
  }
  table {
    width: 100%;
  }
  h2 a {
    position: relative;
    display: block;
    font-size: 60%;
    border: 1px solid #666;
    border-radius: .5em;
    text-decoration: none;
    padding: .5em 1em .75em 1em;
    background-color: rgba(0, 0, 0, .5);
    overflow: hidden;
  }
  h2 a:link,
  h2 a:visited {
    color: #ddd;
  }
  h2 a::after {
    content: "\25b6";
    display: block;
    position: absolute;
    top: 2em;
    right: 1em;
    color: #333;
  }
  h2 > span {
    display: none;
  }
  h2 a > div {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: .5em;
    display: inline-flex;
    justify-content: between;
  }
  h2 a > div span {
    width: 20%;
    border-right: 1px solid #555;
    border-top: 1px solid #555;
  }
  h2 a > div span:last-child {
    border-right: none;
  }
  .shift:nth-of-type(1) a > div span:nth-child(1),
  .shift:nth-of-type(3) a > div span:nth-child(2),
  .shift:nth-of-type(5) a > div span:nth-child(3),
  .shift:nth-of-type(7) a > div span:nth-child(4) {
    background-color: #00c;
  }
  .shift:nth-of-type(2) a > div span:nth-child(2),
  .shift:nth-of-type(4) a > div span:nth-child(3),
  .shift:nth-of-type(6) a > div span:nth-child(4),
  .shift:nth-of-type(8) a > div span:nth-child(5) {
    background-color: #cc0;
  }
  .shift:target table,
  #ShowAll:target table {
    display: table;
  }
  #ShowAll:target table + p,
  .shift:target table + p {
    display: block;
  }
  .shift:target h2 a::after,
  #ShowAll:target h2 a::after {
    content: "\25bc";
  }
  .shift:target h2 a,
  #ShowAll:target h2 a {
    border-radius: 1em 1em 0 0;
    border-bottom: none;
    padding-bottom: .75em;
    color: #fff;
  }
  #Reset,
  #Show {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 50%;
    background-color: #000;
    padding: .5em;
    text-align: center;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #666;
  }
  #Show {
    left: 50%;
    right: 0;
    border-left: 1px solid #666;
  }
}
	CurrentTime = Date.now(); // Get the current time

	// food truck time slots

	// Day 1 Shift 1
	D1S1_Start = Date.parse('Wed, 03 Aug 2016 10:30:00 GMT-0400');
	D1S1_End = Date.parse('Wed, 03 Aug 2016 23:30:00 GMT-0400');
	// Day 2 Shift 1
	D2S1_Start = Date.parse('Wed, 03 Aug 2016 23:30:01 GMT-0400');
	D2S1_End = Date.parse('Thu, 04 Aug 2016 16:29:59 GMT-0400');
	// Day 2 Shift 2
	D2S2_Start = Date.parse('Thu, 04 Aug 2016 16:30:00 GMT-0400');
	D2S2_End = Date.parse('Thu, 04 Aug 2016 23:30:00 GMT-0400');
	// Day 3 Shift 1
	D3S1_Start = Date.parse('Thu, 04 Aug 2016 23:30:01 GMT-0400');
	D3S1_End = Date.parse('Fri, 05 Aug 2016 16:29:59 GMT-0400');
	// Day 3 Shift 2
	D3S2_Start = Date.parse('Fri, 05 Aug 2016 16:30:00 GMT-0400');
	D3S2_End = Date.parse('Fri, 05 Aug 2016 23:30:00 GMT-0400');
	// Day 4 Shift 1
	D4S1_Start = Date.parse('Fri, 05 Aug 2016 23:30:01 GMT-0400');
	D4S1_End = Date.parse('Sat, 06 Aug 2016 16:29:59 GMT-0400');
	// Day 4 Shift 2
	D4S2_Start = Date.parse('Sat, 06 Aug 2016 16:30:00 GMT-0400');
	D4S2_End = Date.parse('Sat, 06 Aug 2016 23:30:00 GMT-0400');
	// Day 5 Shift 1
	D5S1_Start = Date.parse('Sat, 06 Aug 2016 23:30:01 GMT-0400');
	D5S1_End = Date.parse('Sun, 07 Aug 2016 17:30:00 GMT-0400');

	// for comparing date format conversions: http://www.epochconverter.com/

	var WhichSlot; // declare it outside the looping

	// logic to compare current time with defined slots
	if (CurrentTime > D1S1_Start && CurrentTime < D1S1_End) { // leading up to day 1 shift 1
	WhichSlot = "Day1Shift1";
	} else if (CurrentTime > D2S1_Start && CurrentTime < D2S1_End) {
	WhichSlot = "Day2Shift1";
	} else if (CurrentTime > D2S2_Start && CurrentTime < D2S2_End) {
	WhichSlot = "Day2Shift2";
	} else if (CurrentTime > D3S1_Start && CurrentTime < D3S1_End) {
	WhichSlot = "Day3Shift1";
	} else if (CurrentTime > D3S2_Start && CurrentTime < D3S2_End) {
	WhichSlot = "Day3Shift2";
	} else if (CurrentTime > D4S1_Start && CurrentTime < D4S1_End) {
	WhichSlot = "Day4Shift1";
	} else if (CurrentTime > D4S2_Start && CurrentTime < D4S2_End) {
	WhichSlot = "Day4Shift2";
	} else if (CurrentTime > D5S1_Start && CurrentTime < D5S1_End) {
	WhichSlot = "Day5Shift1";
	} else { // all remaining items, such as day 5 shift 1 and after
	WhichSlot = "";
	}

	ShowSlot(WhichSlot); // run the function on page load

	// Create the variable, also used to see if page is a fresh load
	var oldHash;

	// function to pre-expand one based on current date/time
	function ShowSlot(ident) {
	try {
	var initialPage = window.location; // get current page address
	var hash = initialPage.hash.substring(1); // check the URL for a hash
	var initialPageSansHash = initialPage.href.replace(location.hash, ""); // strip the hash if there is one
	if (hash.length > 0) { // if there is a hash
	if (oldHash !== undefined) { // if the variable has a value, implying this is not first run
	} else { // otherwise no value, which happens on fresh page load
	location.replace(initialPageSansHash + '#' + ident); // reload the page with the hash
	}
	} else { // there is no hash at all
	location.replace(initialPageSansHash + '#' + ident); // reload the page with the hash
	}
	} catch (e) {
	console.log('ShowSlot(): ' + e);
	}
	}

	// Script to identify the tab to highlight
	function ChooseTab() {
	try {
	var hash = location.hash.substring(1); // check the URL for a hash
	if (hash.length > 0) { // if there is a hash
	if (oldHash !== undefined) { // if there was an active tab
	var InactiveTab = document.getElementById(oldHash + '_tab'); // Get the tab with the old ID
	InactiveTab.removeAttribute('class'); // unstyle it as the selected tab
	InactiveTab.removeAttribute('aria-selected'); // make it the selected tab
	}
	var ActiveTab = document.getElementById(hash + '_tab'); // Get the tab with that ID
	ActiveTab.className = 'sel'; // style it as the selected tab
	ActiveTab.setAttribute('aria-selected', true); // make it the selected tab
	oldHash = hash;
	}
	} catch (e) {
	console.log('ChooseTab(): ' + e);
	}
	}

	ChooseTab(); // run this on page load
	window.onhashchange = ChooseTab; // run it again each time the URL changes
	@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
	body {
	background-color: #ddd;
	font-size: 100%;
	color: #333;
	font-family: Lato, Arial, sans-serif;
	padding: 0;
	margin: 0;
	}

	main {
	display: block;
	box-sizing: border-box;
	margin: auto;
	padding: 1em;
	}

	h1 {
	margin-top: 0;
	line-height: 1;
	}

	h1 span {
	font-size: 50%;
	}

	a:link,
	a:visited,
	a:active {
	color: #00f;
	}

	a:focus,
	a:hover {
	color: #f00;
	}

	sup,
	sub {
	font-size: 60%;
	line-height: 0;
	}

	table {
	margin: 0 0 1em 0;
	border-collapse: collapse;
	}

	th,
	td {
	padding: .25em .5em;
	vertical-align: text-top;
	text-align: left;
	}

	tr:nth-child(even) {
	background-color: rgba(255, 255, 255, .25);
	}

	th {
	vertical-align: bottom;
	background-color: rgba(0, 0, 0, .6);
	color: #fff;
	font-weight: bold;
	}

	span.sup {
	vertical-align: super;
	font-size: 50%;
	line-height: 0;
	}

	span.sub {
	vertical-align: sub;
	font-size: 50%;
	margin-left: -1.1em;
	top: -.25em;
	position: relative;
	}


	/* Hidey Bits -- this drives the core function, so dump the JS and it will still work */

	.shift {
	display: none;
	}

	.shift:target {
	display: block;
	}


	/* Tab bits */

	@media all and (min-width: 58em) {
	#DayChooser {
	display: inline-flex;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #666;
	}
	#DayChooser li {
	display: block;
	box-sizing: border-box;
	list-style-type: none;
	margin: 0 0 -1px 0;
	padding: 0;
	width: 12.5%;
	}
	#DayChooser a {
	display: block;
	box-sizing: border-box;
	margin: 0 .25em;
	padding: .5em;
	border: 1px solid #666;
	border-radius: .5em .5em 0 0;
	text-align: center;
	text-decoration: none;
	background-color: rgba(0, 0, 0, .5);
	overflow: hidden;
	position: relative;
	}
	#DayChooser a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: .25em;
	border-bottom: 1px solid #555;
	}
	#DayChooser li:nth-child(odd) a::before {
	background-color: #00c;
	}
	#DayChooser li:nth-child(even) a::before {
	background-color: #cc0;
	}
	#DayChooser a:link,
	#DayChooser a:visited {
	color: #ddd;
	}
	#DayChooser a.sel {
	border-bottom: 1px solid #ddd;
	color: #333;
	background-color: transparent;
	}
	/* tabby styles */
	#DayChooser .day,
	#DayChooser .weekday,
	#DayChooser .date,
	#DayChooser .part,
	#DayChooser .time {
	display: block;
	box-sizing: border-box;
	}
	.day {
	font-size: 160%;
	font-weight: 700;
	}
	.weekday {
	font-size: 80%;
	}
	.date {
	font-size: 90%;
	}
	.part {
	font-size: 160%;
	}
	h2 a {
	display: none;
	}
	#Reset {
	position: fixed;
	top: 0;
	right: 0;
	background-color: #000;
	padding: .5em;
	text-align: center;
	color: #fff;
	text-decoration: none;
	border-radius: 0 0 0 .5em;
	}
	#Show {
	display: none;
	}
	}


	/* Accordion bits */

	@media all and (max-width: 58em) {
	main {
	margin-bottom: 2em;
	}
	.weekday,
	.part {
	font-size: 180%;
	}
	.part::before {
	content: "\a";
	white-space: pre;
	}
	.weekday::after {
	content: ",";
	padding-right: 2em;
	}
	.time::before {
	content: "(";
	padding-left: 2em;
	}
	.time::after {
	content: ")";
	}
	.date,
	.time {
	float: right;
	margin-right: 2em;
	margin-top: 1em;
	}
	.time {
	margin-top: 0;
	clear: right;
	}
	#DayChooser {
	display: none;
	}
	.showall .shift {
	display: block;
	}
	.shift table,
	.shift table + p {
	display: none;
	}
	h2 {
	margin-bottom: 0;
	}
	table {
	width: 100%;
	}
	h2 a {
	position: relative;
	display: block;
	font-size: 60%;
	border: 1px solid #666;
	border-radius: .5em;
	text-decoration: none;
	padding: .5em 1em .75em 1em;
	background-color: rgba(0, 0, 0, .5);
	overflow: hidden;
	}
	h2 a:link,
	h2 a:visited {
	color: #ddd;
	}
	h2 a::after {
	content: "\25b6";
	display: block;
	position: absolute;
	top: 2em;
	right: 1em;
	color: #333;
	}
	h2 > span {
	display: none;
	}
	h2 a > div {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: .5em;
	display: inline-flex;
	justify-content: between;
	}
	h2 a > div span {
	width: 20%;
	border-right: 1px solid #555;
	border-top: 1px solid #555;
	}
	h2 a > div span:last-child {
	border-right: none;
	}
	.shift:nth-of-type(1) a > div span:nth-child(1),
	.shift:nth-of-type(3) a > div span:nth-child(2),
	.shift:nth-of-type(5) a > div span:nth-child(3),
	.shift:nth-of-type(7) a > div span:nth-child(4) {
	background-color: #00c;
	}
	.shift:nth-of-type(2) a > div span:nth-child(2),
	.shift:nth-of-type(4) a > div span:nth-child(3),
	.shift:nth-of-type(6) a > div span:nth-child(4),
	.shift:nth-of-type(8) a > div span:nth-child(5) {
	background-color: #cc0;
	}
	.shift:target table,
	#ShowAll:target table {
	display: table;
	}
	#ShowAll:target table + p,
	.shift:target table + p {
	display: block;
	}
	.shift:target h2 a::after,
	#ShowAll:target h2 a::after {
	content: "\25bc";
	}
	.shift:target h2 a,
	#ShowAll:target h2 a {
	border-radius: 1em 1em 0 0;
	border-bottom: none;
	padding-bottom: .75em;
	color: #fff;
	}
	#Reset,
	#Show {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 50%;
	background-color: #000;
	padding: .5em;
	text-align: center;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #666;
	}
	#Show {
	left: 50%;
	right: 0;
	border-left: 1px solid #666;
	}
	}