<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>The Contemporary</title>

    <!-- Bootstrap -->
  <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- Custom styles for this template -->
    <link href="/css/legit.css" rel="stylesheet">
    <link href="/css/alt.css" rel="stylesheet">
    <link href="/css/homegrid.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!--
      NEW IDEAS & Directions:
      http://whitney.org/
      http://www.hirshhorn.si.edu/
      http://www.newmuseum.org/
      http://www.mcachicago.org/
      http://www.artinamericamagazine.com/
      http://www.walkerart.org/
      http://icaphila.org/
      http://creativetime.org/
      http://bombmagazine.org/
      http://bombsite.powweb.com/galleryguide/
    -->

    <!-------------------------------------------------------------------->
    <!-------------------------------------------------------------------->
    <!-- Header! -->
    <!-------------------------------------------------------------------->
    <!-------------------------------------------------------------------->

    <!-- header / Fixed navbar -->
    <div class="navbar navbar-fixed-top" role="banner">

      <div id="logo-placeholder">
        <img src="img/tc-logo.jpg"/>
      </div>

      <hr id="cool-stripe" />

      <div class="container">
        <div class="navbar-header">
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="alt.html">The Contemporary</a>
        </div>
        <nav class="collapse navbar-collapse" role="navigation">
          <ul class="nav navbar-nav">
            <li><a href="about.html">About</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="projects.html">Upcoming Projects</a></li>
                <li><a href="alt-archive.html">The Archive</a></li>
              </ul>
            </li>
            <li><a href="speakerseries.html">Speaker Series</a></li>
            <li><a href="donate.html">Support</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Resources <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="library.html">Library</a></li>
                <li><a href="equipment.html">Equipment</a></li>
              </ul>
            </li>
            <li><a href="scroll.html">Scroll</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right location hidden-sm">
            <li><p class="text">in Baltimore, MD</p></li>
          </ul>
        </nav>
      </div><!-- END CONTAINER -->
    </div><!-- END HEADER/FIXED NAV -->
    <!-- END header / fixed NAVBAR -->

    <!-------------------------------------------------------------------->
    <!-------------------------------------------------------------------->
    <!-- Main! -->
    <!-------------------------------------------------------------------->
    <!-------------------------------------------------------------------->

    <main>

      <section class="grided fluid">
        <div class="clearfix">

          <div class="item home block bg-green two-by columns half">
            <p>something</p>
          </div>

          <div class="item home block bg-red one-by columns onequarter">
            <p>something</p>
          </div>

          <div class="item home block bg-yellow one-by columns onequarter">
            <p>something</p>
          </div>

          <div class="item home block bg-blue one-by columns onequarter">
            <p>something</p>
          </div>

          <div class="item home block bg-gray one-by columns onequarter">
            <p>something</p>
          </div>

        </div>
      </section>


      <div class="container">
        <div class="row">

          <div id="big-gesture" class="col-xs-12">
            <img src="http://unsplash.it/1600/600/?random&?gravity=center" />
            <h2>Big Gestures</h2>
          </div>

        </div><!-- END ROW -->

        <div class="row">
          <section class="col-sm-4 col-md-5 col-lg-5 news">
            <div class="homepage-graphic">
              <h2>News</h2>
            </div>
            <div class="link-lists">
              <ul>
                <li><p><a href="http://creativemornings.com/talks/deana-haggag">TC to present talk for Creative Mornings on 6/20 - register here.</a></p><time>Jun 16, 2014</time></li>
                <li><p><a href="http://www.eastcityart.com/2014/06/12/5x5-brings-nationally-recognized-curators-to-dc-this-fall/">Shamim M. Momin, of our CAC, announced for <em>5x5</em>!</a></p><time>Jun 13, 2014</time></li>
                <li><p>Bianca Biberaj joins as summer intern.</p><time>Jun 4, 2014</time></li>
                <li><p><a href="http://artfcity.com/2014/05/21/open-engagement-sunday-recap-this-is-amazing/" class="no-styles"><em>Art F City</em> Mentions TC for OE Conference!</p><time>May 21, 2014</time></li>
                <li><p><a href="pdf/ContemporaryInternApp_2014-15.pdf" class="no-styles">TC announces 2014&ndash;15 Internship program.</p><time>May 1, 2014</time></li>
              </ul>
            </div>
          </section>

          <section class="col-sm-4 col-md-5 col-lg-5 speakers">
            <div class="homepage-graphic">
              <h2>Upcoming</h2>
            </div>
            <div class="link-lists">
              <ul id="speakerlist" class="jsonmade">
                <!-- printing this out with json magix -->
                <li><em>Cohosts</em> will resume in the fall with 6 new lectures.</li>
              </ul>
            </div>
          </section>

          <section class="col-sm-4 col-md-2 col-lg-2 connect">
            <div class="homepage-graphic">
              <h2>Connect</h2>
            </div>
            <div class="link-lists icons">
              <ul>
                <li><a href="http://www.facebook.com/thecontemporarymuseum">Facebook</a></li>
                <li><a href="http://instagram.com/thecontemporary">Instagram</a></li>
                <li><a href="http://thecontemporarymuseum.tumblr.com">Tumblr</a></li>
                <li><a href="https://twitter.com/ThContemporary">Twitter</a></li>
                <li><a href="https://vimeo.com/thecontemporarymuseum">Vimeo</a></li>
              </ul>
              <ul>
                <li><a href="donate.html">Donate</a></li>
              </ul>
            </div>
          </section>

        </div><!-- END ROW -->

        <div class="row">
          <section class="col-sm-4">
            <div>
              <h2>Speaker Series</h2>
            </div>
          </section>

          <section class="col-sm-4">
            <div>
              <h2>Next/Current Project</h2>
            </div>
          </section>

          <section class="col-sm-4">
            <div>
              <h2>From the Archive</h2>
            </div>
          </section>

        </div><!-- END ROW -->

        <div class="row">
          <section class="col-sm-3">
            <div>
              <h2>Scroll</h2>
            </div>
          </section>

          <section class="col-sm-3">
            <div>
              <h2>Blog feed?</h2>
            </div>
          </section>

          <section class="col-sm-3">
            <div>
              <h2>Library</h2>
            </div>
          </section>

          <section class="col-sm-3">
            <div>
              <h2>Equipment</h2>
            </div>
          </section>

        </div><!-- END ROW -->
      </div><!-- END CONTAINER -->
    </main><!-- END MAIN -->

    <footer>
    </footer>   <!-- END FOOTER -->

    <div id="permanantborder" class="hidden-xs"></div>

    <!-- Bootstrap core JavaScript -->
    <!-- ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- ================================================== -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="js/alt.js"></script>

    <script>
      var wh = $(window).height();
      $('div.navbar-fixed-top').css('padding-top', (wh*.66));
      $('body').css('padding-top', (wh*.66)+100);

      $(window).scroll(function() {
        var st = $(window).scrollTop();

        if (st > 0 && st <= .66*wh-5 ) {
          $('div.navbar-fixed-top').css('top', -st-5);
        } else if (st > .66*wh-5) {
          $('div.navbar-fixed-top').css('top', -.66*wh-5);
        } else {
          $('div.navbar-fixed-top').css('top', 0);
        }
      });

      $('main section').each(function() {
        $(this).css('min-height', ($(this).width())/2);
      });


    </script>

  </body>
</html>

