%%%%
%% Sample slides converted to markdown

%%%%%%%%%%%%%%%%%
% <article class='biglogo'>
% </article>


!SLIDE biglogo

%%%%%%%%%%%%%%%%%
% <article>
%        <h1>
%          Title Goes Here Up
%          <br>
%          To Two Lines
%        </h1>
%        <p>
%          Sergey Brin
%          <br>
%          May 10, 2011
%        </p>
%      </article>

TODO

TODO - how to create heading with break in markdown - possible? works like in paragraph???

%%%%%%%%%%%%%%%%%%      
%      <article>
%       <p>
%         This is a slide with just text. This is a slide with just text.
%          This is a slide with just text. This is a slide with just text.
%          This is a slide with just text. This is a slide with just text.
%        </p>
%        <p>
%          There is more text just underneath.
%        </p>
%      </article>

!SLIDE

This is a slide with just text. This is a slide with just text.
This is a slide with just text. This is a slide with just text.
This is a slide with just text. This is a slide with just text.

There is more text just underneath.

%%%%%%%%%%%%%%%%%%
%      <article>
%        <h3>
%          Simple slide with header and text
%        </h3>
%        <p>
%          This is a slide with just text. This is a slide with just text.
%          This is a slide with just text. This is a slide with just text.
%          This is a slide with just text. This is a slide with just text.
%        </p>
%        <p>
%          There is more text just underneath with a <code>code sample: 5px</code>.
%        </p>
%      </article>

!SLIDE

### Simple slide with header and text

This is a slide with just text. This is a slide with just text.
This is a slide with just text. This is a slide with just text.
This is a slide with just text. This is a slide with just text.

There is more text just underneath with a `code sample: 5px`.


%%%%%%%%%%%%%%%%%%%%%%%
%      <article class='smaller'>
%        <h3>
%          Simple slide with header and text (small font)
%        </h3>
%        <p>
%          This is a slide with just text. This is a slide with just text.
%          This is a slide with just text. This is a slide with just text.
%          This is a slide with just text. This is a slide with just text.
%        </p>
%        <p>
%          There is more text just underneath with a <code>code sample: 5px</code>.
%        </p>
%      </article>

!SLIDE smaller

### Simple slide with header and text (small font)

This is a slide with just text. This is a slide with just text.
This is a slide with just text. This is a slide with just text.
This is a slide with just text. This is a slide with just text.

There is more text just underneath with a `code sample: 5px`.


%%%%%%%%%%%%%%%%%%%%%%%%%
%      <article>
%        <h3>
%          Slide with bullet points and a longer title, just because we
%          can make it longer
%        </h3>
%        <ul>
%          <li>
%            Use this template to create your presentation
%          </li>
%          <li>
%            Use the provided color palette, box and arrow graphics, and
%            chart styles
%          </li>
%          <li>
%            Instructions are provided to assist you in using this
%            presentation template effectively
%          </li>
%          <li>
%            At all times strive to maintain Google's corporate look and feel
%          </li>
%        </ul>
%      </article>

!SLIDE

### Slide with bullet points and a longer title, just because we can make it longer

- Use this template to create your presentation
- Use the provided color palette, box and arrow graphics, and chart styles
- Instructions are provided to assist you in using this presentation template effectively
- At all times strive to maintain Google's corporate look and feel


%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%      <article>
%        <h3>
%          Slide with bullet points that builds
%        </h3>
%        <ul class="build">
%          <li>
%            This is an example of a list
%          </li>
%          <li>
%            The list items fade in
%          </li>
%          <li>
%            Last one!
%          </li>
%        </ul>
%
%        <div class="build">
%          <p>Any element with child nodes can build.</p>
%          <p>It doesn't have to be a list.</p>
%        </div>
%      </article>


TBD


%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%      <article class='smaller'>
%        <h3>
%          Slide with bullet points (small font)
%        </h3>
%        <ul>
%          <li>
%            Use this template to create your presentation
%          <li>
%            Use the provided color palette, box and arrow graphics, and
%            chart styles
%          <li>
%            Instructions are provided to assist you in using this
%            presentation template effectively
%          <li>
%            At all times strive to maintain Google's corporate look and feel
%        </ul>
%      </article>

      <article>
        <h3>
          Slide with a table
        </h3>
        
        <table>
          <tr>
            <th>
              Name
            <th>
              Occupation
          <tr>
            <td>
              Luke Mahé
            <td>
              V.P. of Keepin’ It Real
          <tr>
            <td>
              Marcin Wichary
            <td>
              The Michael Bay of Doodles
        </table>
      </article>
      
      <article class='smaller'>
        <h3>
          Slide with a table (smaller text)
        </h3>
        
        <table>
          <tr>
            <th>
              Name
            <th>
              Occupation
          <tr>
            <td>
              Luke Mahé
            <td>
              V.P. of Keepin’ It Real
          <tr>
            <td>
              Marcin Wichary
            <td>
              The Michael Bay of Doodles
        </table>
      </article>
      
      <article>
        <h3>
          Styles
        </h3>
        <ul>
          <li>
            <span class='red'>class="red"</span>
          <li>
            <span class='blue'>class="blue"</span>
          <li>
            <span class='green'>class="green"</span>
          <li>
            <span class='yellow'>class="yellow"</span>
          <li>
            <span class='black'>class="black"</span>
          <li>
            <span class='white'>class="white"</span>
          <li>
            <b>bold</b> and <i>italic</i>
        </ul>
      </article>
      
      <article>
        <h2>
          Segue slide
        </h2>
      </article>

      <article>
        <h3>
          Slide with an image
        </h3>
        <p>
          <img style='height: 500px' src='images/example-graph.png'>
        </p>
        <div class='source'>
          Source: Sergey Brin
        </div>
      </article>

      <article>
        <h3>
          Slide with an image (centered)
        </h3>
        <p>
          <img class='centered' style='height: 500px' src='images/example-graph.png'>
        </p>
        <div class='source'>
          Source: Larry Page
        </div>
      </article>

      <article class='fill'>
        <h3>
          Image filling the slide (with optional header)
        </h3>
        <p>
          <img src='images/example-cat.jpg'>
        </p>
        <div class='source white'>
          Source: Eric Schmidt
        </div>
      </article>

      <article>
        <h3>
          This slide has some code
        </h3>
        <section>
        <pre>
&lt;script type='text/javascript'&gt;
  // Say hello world until the user starts questioning
  // the meaningfulness of their existence.
  function helloWorld(world) {
    for (var i = 42; --i &gt;= 0;) {
      alert('Hello ' + String(world));
    }
  }
&lt;/script&gt;
&lt;style&gt;
  p { color: pink }
  b { color: blue }
  u { color: 'umber' }
&lt;/style&gt;
</pre>
        </section>
      </article>
      
      <article class='smaller'>
        <h3>
          This slide has some code (small font)
        </h3>
        <section>
        <pre>
&lt;script type='text/javascript'&gt;
  // Say hello world until the user starts questioning
  // the meaningfulness of their existence.
  function helloWorld(world) {
    for (var i = 42; --i &gt;= 0;) {
      alert('Hello ' + String(world));
    }
  }
&lt;/script&gt;
&lt;style&gt;
  p { color: pink }
  b { color: blue }
  u { color: 'umber' }
&lt;/style&gt;
</pre>
        </section>
      </article>
      
      <article>
        <q>
          The best way to predict the future is to invent it.
        </q>
        <div class='author'>
          Alan Kay
        </div>
      </article>
      
      <article class='smaller'>
        <q>
          A distributed system is one in which the failure of a computer 
          you didn’t even know existed can render your own computer unusable.
        </q>
        <div class='author'>
          Leslie Lamport
        </div>
      </article>
      
      <article class='nobackground'>
        <h3>
          A slide with an embed + title
        </h3>
        
        <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
      </article>

      <article class='nobackground'>
        <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
      </article>

      <article class='fill'>
        <h3>
          Full-slide embed with (optional) slide title on top
        </h3>
        <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
      </article>
      
      <article>
        <h3>
          Thank you!
        </h3>
        
        <ul>
          <li>
            <a href='http://www.google.com'>google.com</a>
        </ul>
      </article>
