<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">

</script>

​

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js">

</script>

​

<script>

​

  $(function() {

​

    $("#nav").accordion ({

      header: 'h3',

      autoHeight: false,

      active: false,

      collapsible: true,

      navigation: true,

    });

​

    $("h3, h4, ul.sub_nav li").hover(function() {

      $(this).animate({ backgroundColor: "#F0F0F0" }, 100);

    },function() {

      $(this).animate({ backgroundColor: "#FFFFFF" }, 500);

    });

​

  });

​

</script>

​

<style type="text/css">

​

  /* Resets*/

  * {

    margin: 0;

    padding: 0;

    outline: 0;

  }

​

  /* Page Setup*/

  html {

    overflow-y: scroll;

  }

​

  body {

    background: #FFFFFF;

    color: #B5B5B5;

    font-size: 12px;

    font-weight: normal;

    font-family: Helvetica, Arial, sans-serif;

    min-width: 1000px;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0;

  }

​

  /* Header */

  #header {

    float: left;

    margin: 10px 0 10px 0;

    padding: 0 0 0 10px;

  }

​

  /* Jquery UI Accordion Menu */

  #nav {

    display: block;

    width: 170px;

    clear: left;

    float: left;

    margin-top: 25px;

    padding: 0 0 0 15px;

  }

​

  h3, h4 {

    display: block;

    font-size: 12px;

    outline: 0;

    border-bottom: 3px solid #FFFFFF;

    padding: 4px 0 4px 4px;

  }

​

  a.nav:link, a.nav:visited {

    display: block;

    color: #B5B5B5;

    font-weight: normal;

    text-decoration: none;

    outline: 0;

    border: 0;

  }

​

  ul.sub_nav {

    list-style: none;

    display: block;

    font-size: 12px;

    outline: 0;

  }

​

  a.sub_nav:link, a.sub_nav:visited {

    display: block;

    color: #B5B5B5;

    font-weight: normal;

    text-decoration: none;

    outline: 0;

    border-bottom: 3px solid #ffffff;

    padding: 4px 0px 4px 14px;

  }

​

  /* Page Elements */

  #section {

    float: right;

    width: 805px;

    margin-left: 10px;

    padding: 0;

  }

​

  .slideshow {

    float: left;

    width: 805px;

    margin: 0;

    padding: 0;

  }

​

  .video, .contact_form {

    float: left;

    width: 805px;

    margin-top: 25px;

    padding: 0;

  }

  .gallery, .img, .search_box {

    float: left;

    width: 600px;

    margin-top: 25px;

    padding: 0;

  }

​

  .gallery_description, .img_description, .bio, .search_tips {

    float: right;

    width: 185px;

    margin: 25px 0 0 10px;

    padding: 0 10px 0 0;

  }

​

  /* Headers*/

  h1, h2 {

    font-size: 12px ;

  }

​

  /* Anchors*/

  a img, a img:visited, a img:hover, a img:active {

    outline: 0;

    border: 0;

    text-decoration: none;

  }

​

  a:link, a:visited {

    color: #B5B5B5;

    outline: 0;

    border: 0;

    text-decoration: none;

    font-weight: bold;

  }

​

  a:hover, a:active {

    color: #000000;

    outline: 0;

    border: 0;

    text-decoration: none;

    font-weight: bold;

  }

​

  /* PhotoShelter Styles */

​

  /* Contact Sheet */

  ul.thumbs {

    width: 600px;

    border: 0;

    margin: 0;

    padding: 0;

  }

​

  ul.thumbs li {

    border: 0;

    margin: 0;

    padding 0;

  }

​

  ul.thumbs li:hover {

    border: 0;

    margin: 0;

    padding 0;

  }

​

  ul.thumbs.gallery_thumbs {

    border: 0;

    margin-top: -15px;

    padding: 0;

  }

​

  ul.thumbs.gallery_thumbs li {

    width: 118px;

    height: 69px;

    border: 0;

    margin-right: 2px;

    margin-bottom: 38px;

    padding 0;

  }

​

  ul.thumbs.search_thumbs {

    border: 0;

    margin-top: -15px;

    padding: 0;

  }

​

  ul.thumbs.search_thumbs li {

    width: 118px;

    height: 69px;

    border: 0;

    margin-right: 2px;

    margin-bottom: 38px;

    padding 0;

  }

​

  DIV.refineBox {

    padding: 0;

    margin-top: 35px;

  }

​

  tbody {

    font-size: 12px;

  }

​

  table.input {

    border:0 none;

    padding:0;

  }

​

  table.input th {

    text-align:left;

  }

​

  /* Filmstrip */

  .psfs_thumbox.psfs_sel {

    border: 2px solid rgba(0, 0, 0, 1) !important

  }

​

  DIV.psfs_thumbs DIV.psfs_empty DIV.psfs_first_note {

    display: none;

  }

​

  a.psfs_prev:hover, A.psfs_next:hover {

    background-color: rgba(0, 0, 0, .9) !important

  }

​

  /* Contact Page */

  TABLE.contact_form {

    clear: both;

    width: 600px;

  }

​

</style>

​

<div id="header">

  <h1><a href="http://davidroot.photoshelter.com"><img src="http://dl.dropbox.com/u/4936432/blog_style_outline_font_psycho_poetry_size_30_color_B5B5B5.png" width="323" height="52" alt="DAVID ROOT photography"></a></h1>

</div>

​

<div id="nav">

​

  <h3><a class="nav" href="#">Personal Projects</a></h3>

    <div>

      <ul class="sub_nav">

        <li><a class="sub_nav" href="http://davidroot.photoshelter.com/gallery/Follow-the-High-Seat-Pillars/G0000bPmeWiUSo3A">Follow the High-Seat Pillars</a></li>

        <li><a class="sub_nav" href="http://davidroot.photoshelter.com/gallery/Black-Stars/G000071lt_vTfnVI">Black Stars</a></li>

        <li><a class="sub_nav" href="http://davidroot.photoshelter.com/gallery/Streets/G00005hhsVGAjyaA">Street</a></li>

        <li><a class="sub_nav" href="http://davidroot.photoshelter.com/gallery/North-Country/G0000bfoSMMUqWYw">North Country</a></li>

        <li><a class="sub_nav" href="http://davidroot.photoshelter.com/gallery/Growth/G0000KTUDMNZXavc">Growth</a></li>

        <li><a class="sub_nav" href="http://davidroot.photoshelter.com/gallery/Upstream/G0000Iku1hHJedFI">Upstream</a></li>

        <li><a class="sub_nav" href="http://davidroot.photoshelter.com/gallery/Head-for-the-Hills/G00005.dbp4iOLLc">Head for the Hills</a></li>

      </ul>

    </div>

​

  <h4><a class="nav" href="http://davidroot.photoshelter.com/package-show/Commerical-Work/P0000BvJBYdYpZps">Commercial Work</a></h4>

​

  <h4><a class="nav" href="[[custom_page1_url]]">Motion</a></h4>

​

  <h4><a class="nav" href="http://alhazenismyhomeboy.tumblr.com" target=_blank>Blog</a></h4>

​

  <h3><a class="nav" href="#">About</a></h3>

    <div>

      <ul class="sub_nav">

        <li><a class="sub_nav" href="[[about_page_url]]">Bio</a></li>

        <li><a class="sub_nav" href="[[contact_link]]">Contact</a></li>

      </ul>

    </div>

​

  <h4><a class="nav" href="[[search_page_url]]">Search</a></h4>

​

  <h4><a class="nav" href="[[my_account_url]]">Client Access</a></h4>

​

</div>

​