javierarce/template.html

## template.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle} - {Description}</title>
    {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
    <meta name="viewport" content="width=775, maximum-scale=1.0" />
    <link rel="icon" href="{Favicon}"/>
    <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
    <style>
    @import url(http://fonts.googleapis.com/css?family=Asap:200,400,700,400italic,700italic);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,lisfont,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}
:focus{outline:0}
html { -webkit-font-smoothing: antialiased; }
body{line-height:1.3;color:#222;background:white}
p{padding-bottom:10px;line-height:25px}
p p{padding-bottom:0}
ol,ul li{list-style:disc;padding:0 0 18px 5px;margin-left:18px}
caption,th,td{text-align:left;font-weight:normal}
article.quote .source{margin: 15px 20px 0 0; text-align: right; }
article.link blockquote{margin:0 0 10px 0;padding:4px 0px;font-size:18px;line-height:28px;}
article.quote blockquote,q{quotes:""""}
article.quote blockquote:hover{background:#F2F66A;color:#333;}
article.quote blockquote a:hover{color:#333;}
article.quote blockquote{margin:0 0 10px 0;padding:4px 0px;font-size:18px;line-height:22px;display:inline;background:#F4F6B2;}
article.quote blockquote,article.quote blockquote a{font-weight:normal;line-height:35px;}
article .icon{display:block;position:absolute;top:5px;left:-75px;width:42px;height:42px;}
body{right:10px;font-size:16px;color:#333;font-family:"Droid Sans","helvetica-neue","Helvetica", Arial, sans-serif;line-height:23px; }
pre{font-size:10px}
a{font-weight:bold;text-decoration:none;-webkit-transition:.2s color linear;-moz-transition:.2s color linear;transition:.2s color linear; color:#6DB866; }
a:hover{color:#666}
#credits{color:#666;font-size:11px;margin:10px 0}
header{margin:80px 0 70px 0;clear:both;overflow:hidden;}
header nav{text-align:center;}
header h1 { margin-bottom: 3px; }
header h1 a {font: 50px "Asap","helvetica-neue","helvetica",arial,sans-serif; font-weight: 200; text-transform: uppercase; color:#6DB866}
.wrapper header h1 a:hover { color:#666; }
header h2 {margin: 0 0 5px 0; font: 16px "Asap", "helvetica-neue", "helvetica", arial, sans-serif; color: #666; }
header h2 span { font-family: "Helvetica", sans-serif; color: #ccc; font-weight: 200; }

div.about{display:none;margin:-25px 0 0 0;padding:15px 20px;color:#333;background:#F1F1F1;font-size:14px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:4px;}

header ul{list-style:none;margin:25px 0 0 0;padding:0;}
header ul li{display:inline;padding:0;margin:0 7px 0 0}
header ul li.about{display:inline;}
header ul li {font-weight:normal;font-size:14px;color:#ccc}
header ul li a{font-weight:normal;font-size:14px;text-decoration:underline; color:#ccc}
header #listening{font-size:11px;position:absolute;top:40px;right:10px;}
header #listening.active .track{color:#999;padding:4px 7px;line-height:15px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #f1f1f1;display:none;}
header #listening a{display:block;font-weight:normal;color:#999;text-decoration:none;}
header #listening img{float:left;margin:1px 5px 0 0;}
header #listening strong{font-weight:bold;color:#999;}
header #listening strong.newline{display:block;}
h1,h2,h2 a,h3,h4,h5,h6{font-family:"Droid Sans","helvetica-neue","helvetica",arial,sans-serif;}
h3{color:#333;font-weight:normal !important;margin-bottom:0px}
h4{color:#333;font-weight:normal;margin-bottom:0px}
img{background:#fff !important;margin:0px}
img a{text-decoration:none !important;background:#fff !important;margin:0px}
input{border:1px solid #999}
.wrapper{width:950px;margin:0 auto 20px auto;clear:both;}
.main{margin:0px 0px 50px 0;}
article{margin-bottom:200px;}
.main article:last-child{border:none!important;}
article p a{text-decoration:underline;}
article strong{font-weight:bold;}
article h2{font-size:16px;margin:0 0 7px 0;color:333;}
article h2 a:hover{color:#333;}
article h2 a{text-decoration:none;border-bottom:3px solid #333;padding-bottom:1px;line-height:28px;text-transform:uppercase; display:inline;}
article > .more {font-size:13px;margin:10px 0 20px 0;}
article > .more ul{margin-left:10px;}
article > .more ul li a{text-decoration:underline;font-size:13px;display:block;}
article > .more ul li{margin-bottom:10px;padding:0px;font-size:13px;}
article > .more ul li:last-child{margin-bottom:0;}
article .comment{position:absolute;width:100px;left:-115px;bottom:0px;margin-bottom:60px;font-size:10px;line-height:15px;text-align:right;color:#666;}
.video iframe { margin: 0 0 15px 0; }
footer{font-size:12px;color:#333;line-height:1.8;}
footer ul{list-style:none;margin:0;padding:0;}
footer ul li{display:inline;margin:0 7px 0 0;padding:3px 0;opacity:.4;color:#333;-webkit-transition:.2s opacity linear;-moz-transition:.2s opacity linear;transition:.2s opacity linear;}
footer ul li.more{margin:0 0 0 7px!important;}
footer ul li.tag a{font-family:'Lucida Grande',Helvetica,Arial,sans-serif;font-weight:bold;font-size:11px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;color:#444;background-color:#F8F8F8;border:1px solid #AAA;padding:0px 7px 1px 7px;min-width:70px;text-align:center;text-decoration:none;}
footer ul li:hover{opacity:1;color:#333;}
footer ul li:hover a{color:#333;}
footer ul li:last-child,footer ul li.via{margin:0;}
footer ul li a{font-weight:normal;color:#333;}
footer ul li.readlater{float:right;margin:0;}
footer ul li.readlater a{font-size:11px;color:#fff;background:#666;padding:5px 5px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.navleft{font-size:14px;position:relative;float:left}
.navright{font-size:14px;position:relative;float:right}
.pagination{clear:both;overflow:hidden;margin:10px 0 10px 0;}
a .notes{text-decoration:none !important;background:none}
.notes a{text-decoration:none !important;background:none}
img .notes{margin:0px;padding:3px}
.notes img{display:none;margin:0px;padding:3px}
ol.notes{list-style:none;margin:0;padding:0}
ol.notes li{font-size:12px}
.regular_post_body img{max-width:100%}
/* .gist .gist-file .gist-data{background:#f1f1f1!Important;}
*/
.gist .gist-file{border:1px solid #f1f1f1!Important;}
.gist .gist-file .gist-data.gist-syntax .s2{color:#F75757;}
.gist .gist-meta{font-size:10px;color:#fff!important;background:#F75757!Important;font-family:"Droid Sans","helvetica-neue","helvetica",arial,sans-serif;}
.gist .gist-meta a{color:#fff!Important;text-decoration:underline;}
.gist .gist-file .gist-highlight pre{font-size:12px; font-family: "Droid Sans Mono", sans-serif!important;}
.listening_example{display:inline-block;margin:0 0 20px 0;font-size:11px;}
.listening_example .track{color:#999;padding:4px 7px;line-height:15px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #f1f1f1;display:none;}
.listening_example a{display:block;font-weight:normal;color:#999;text-decoration:none;}
.listening_example img{float:left;margin:1px 5px 0 0;}
.listening_example strong{font-weight:bold;color:#999;}
.listening_example strong.newline{display:block;}
article { position:relative; }
article .note { position:absolute; display:none; width:480px; top:0; left:0; padding:10px; background:#f1f1f1; z-index:1000; }

@media only screen and (max-width: 1400px) {

  ::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment{
  display:block;
  height:0px;
  width:0px;
}

::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:horizontal:increment{
  background-color:transparent;
}

::-webkit-scrollbar-track-piece{
  background-color:#fff;
  }

  ::-webkit-scrollbar-thumb:vertical{
    height:50px;
    background-color:#6DB866;
      }
      ::-webkit-scrollbar-thumb:horizontal{
        width:50px;
        background-color:#6DB866;
        }
        ::-webkit-scrollbar-thumb:hover{
          background-color:#6DB866;
          }
          ::-webkit-scrollbar-corner{
            background-color:#fbfbfb;
            }

}
</style>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

    <script>
    $(function() {
    var videos = [];

    var color = "55AAAA";
    var opts = "title=0&byline=0&portrait=0";

    $("iframe").each(function() {
      var $obj = $(this);
      var data = $obj.attr("data");
      var vsrc = $obj.attr("src");
      var oldW = $obj.attr("width");
      var newW = 950;
      var oldH = $obj.attr("height");
      var p = oldW/newW;
      var newH = (oldH / p);
      if (vsrc.search("youtube") > 0) {
      $obj.replaceWith('<iframe src="'+vsrc+'?'+opts+'&amp;color='+color+'" width="'+newW+'" height="'+newH+'" frameborder="0"></iframe>');
      }
      });

    var
    i = 0,
      iframes = document.body.getElementsByTagName('iframe'),
      newVimeoWidth = 950,
      newVimeoHeight = 'auto';
    window.players = [];
    var players = [];
    for (x in iframes){


      if(iframes[x].src && iframes[x].src.indexOf('player.vimeo.com') > -1){

        if (newVimeoHeight == 'auto'){
          newVimeoHeight = ( newVimeoWidth * 9 ) / 16;
        }

        iframes[x].setAttribute("id", "player" + x);
        iframes[x].width = newVimeoWidth;
        iframes[x].height = newVimeoHeight;
        iframes[x].setAttribute("src", iframes[x].src + "?api=1&player_id=player" + x);


      }
    }


    $("article footer .edit").live("click", function(e) {
        e.preventDefault();

        var
        $article = $(this).parents("article");

        var text = $(this).text() == 'More' ? 'Less' : 'More';
        $article.find('.note').fadeToggle(250);
        $(this).text(text);

    });

    $("article .note").each(function(i, el) {
        var
        $el = $(el),
        $parent = $(this).parents("article"),
        $footer = $parent.find("footer");
        articlePaddingBottom = parseInt($parent.css("paddingBottom").replace("px", "")),
        paddingTop = parseInt($el.css("paddingTop").replace("px", "")),
        paddingBottom = parseInt($el.css("paddingBottom").replace("px", ""));

        var height = $parent.height() - $footer.height() - paddingTop - paddingBottom;

        console.log($(this).find("img").height(),$parent.height(),  height);

        if ($el.height() < height) {
        $el.css({height: height});
        }

        var $button = $('<li class="more"><a href="#" class="edit">More</a></li>');

        $footer.find("ul").append($button);


    });

    $("a.about").on("click", function() {

        if ($(this).hasClass("open")) {
        $(".main").animate({
marginTop: 0
},
250, function() {
$("div.about").slideToggle(50);
$(this).toggleClass("open");

});
        } else {
        $(".main").animate({ marginTop: "20px" }, 250, function() { $("div.about").slideToggle(50); $(this).toggleClass("open"); });
        }

});

});

</script>


  </head>
  <body>
    <div class="wrapper">
      <header>
      <nav>
      <h1><a href="/">{Title}</a></h1>
      <h2><span>&mdash;</span> {Description} <span>&mdash;</span></h2>

      </nav>


      </header>


      <div class="main">
        {block:SearchPage}
        <div class="content">
          <div class="datetime">
            {lang:SearchResultCount results}
          </div>
          <h2>{lang:Search results for SearchQuery 2}</h2>
        </div>
        {/block:SearchPage}
        {block:Posts}


        {block:Regular}<article>{Body}{/block:Regular}

        {block:Photo}
        <article  class="photo">
        <a href="{Permalink}" class="icon" title="{Name}"></a>
        {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" title="{PhotoAlt}">{LinkCloseTag}{Caption}
        {/block:Photo}
        {block:Video}
        <article class="video"><div class="video">{Video-500}</div>{Caption}
        {/block:Video}

        {block:Audio}
        <article class="audio">{AudioPlayerGrey}{Caption}

        {/block:Audio}

        {block:Quote}
        <article class="quote"><blockquote class="highlight large">
          <a href="{Permalink}" class="icon" title="{Name}"></a>
          {Quote}
        </blockquote>
        {block:Source}<div class="source">&mdash; {Source}</div>{/block:Source}


        {/block:Quote}

        {block:Link}
        <article class="link">
        <a href="{Permalink}" class="icon" title="{Name}"></a>
        <h2><a href="{URL}" title="{Name}" {Target}>{Name}</a> →</h2>
        {block:Description}{Description}{/block:Description}
        {/block:Link}

        {block:Conversation}<article>
        {block:Title}<h2>{Title}</h2>{/block:Title}
        <p>
        {block:Lines}
        {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />{/block:Lines}
        </p>

        {/block:Conversation}

        <footer>
        <ul>
          {block:Date}<li class="date"><a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
          {block:NoteCount}<li class="count"><a href="{Permalink}"> {NoteCountWithLabel}</a></li>{/block:NoteCount}
          {block:ContentSource}<li class="via">via <a href="{SourceURL}">{SourceTitle}</a></li>{/block:ContentSource}

          {block:HasTags}

          {block:Tags}
          <li class="tag">
          <a href="{TagURL}">{Tag}</a>
          </li>
          {/block:Tags}

          {/block:HasTags}


        </ul>
        </footer>
        </article>
        {/block:Posts}


        {block:PermalinkPage}
        {block:PostNotes}

        <h3>{lang:Notes}</h3>
        <p>{PostNotes}</p>

        {/block:PostNotes}
        {/block:PermalinkPage}


        {block:Pagination}
        <div class="pagination">

          {block:NextPage}
          <div class="navleft">
            &larr;&nbsp;<a href="{NextPage}">past</a>
          </div>
          {/block:NextPage}


          {block:PreviousPage}
          <div class="navright">
            <a href="{PreviousPage}">future</a>&nbsp;&rarr;
          </div>
          {/block:PreviousPage}


        </div>
        {/block:Pagination}


        {block:PermalinkPagination}
        <div class="pagination">

          {block:PreviousPost}
          <div class="navleft">
            &larr;&nbsp;<a href="{PreviousPost}">{lang:Previous post}</a>
          </div>
          {/block:PreviousPost}
          {block:NextPost}
          <div class="navright">
            <a href="{NextPost}">{lang:Next post}</a>&nbsp;&rarr;
          </div>
          {/block:NextPost}


        </div>
        {/block:PermalinkPagination}

      </div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle} - {Description}</title>
	{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
	<meta name="viewport" content="width=775, maximum-scale=1.0" />
	<link rel="icon" href="{Favicon}"/>
	<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
	<style>
	@import url(http://fonts.googleapis.com/css?family=Asap:200,400,700,400italic,700italic);
	@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
	@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);

	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,lisfont,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}
	:focus{outline:0}
	html { -webkit-font-smoothing: antialiased; }
	body{line-height:1.3;color:#222;background:white}
	p{padding-bottom:10px;line-height:25px}
	p p{padding-bottom:0}
	ol,ul li{list-style:disc;padding:0 0 18px 5px;margin-left:18px}
	caption,th,td{text-align:left;font-weight:normal}
	article.quote .source{margin: 15px 20px 0 0; text-align: right; }
	article.link blockquote{margin:0 0 10px 0;padding:4px 0px;font-size:18px;line-height:28px;}
	article.quote blockquote,q{quotes:""""}
	article.quote blockquote:hover{background:#F2F66A;color:#333;}
	article.quote blockquote a:hover{color:#333;}
	article.quote blockquote{margin:0 0 10px 0;padding:4px 0px;font-size:18px;line-height:22px;display:inline;background:#F4F6B2;}
	article.quote blockquote,article.quote blockquote a{font-weight:normal;line-height:35px;}
	article .icon{display:block;position:absolute;top:5px;left:-75px;width:42px;height:42px;}
	body{right:10px;font-size:16px;color:#333;font-family:"Droid Sans","helvetica-neue","Helvetica", Arial, sans-serif;line-height:23px; }
	pre{font-size:10px}
	a{font-weight:bold;text-decoration:none;-webkit-transition:.2s color linear;-moz-transition:.2s color linear;transition:.2s color linear; color:#6DB866; }
	a:hover{color:#666}
	#credits{color:#666;font-size:11px;margin:10px 0}
	header{margin:80px 0 70px 0;clear:both;overflow:hidden;}
	header nav{text-align:center;}
	header h1 { margin-bottom: 3px; }
	header h1 a {font: 50px "Asap","helvetica-neue","helvetica",arial,sans-serif; font-weight: 200; text-transform: uppercase; color:#6DB866}
	.wrapper header h1 a:hover { color:#666; }
	header h2 {margin: 0 0 5px 0; font: 16px "Asap", "helvetica-neue", "helvetica", arial, sans-serif; color: #666; }
	header h2 span { font-family: "Helvetica", sans-serif; color: #ccc; font-weight: 200; }

	div.about{display:none;margin:-25px 0 0 0;padding:15px 20px;color:#333;background:#F1F1F1;font-size:14px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:4px;}

	header ul{list-style:none;margin:25px 0 0 0;padding:0;}
	header ul li{display:inline;padding:0;margin:0 7px 0 0}
	header ul li.about{display:inline;}
	header ul li {font-weight:normal;font-size:14px;color:#ccc}
	header ul li a{font-weight:normal;font-size:14px;text-decoration:underline; color:#ccc}
	header #listening{font-size:11px;position:absolute;top:40px;right:10px;}
	header #listening.active .track{color:#999;padding:4px 7px;line-height:15px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #f1f1f1;display:none;}
	header #listening a{display:block;font-weight:normal;color:#999;text-decoration:none;}
	header #listening img{float:left;margin:1px 5px 0 0;}
	header #listening strong{font-weight:bold;color:#999;}
	header #listening strong.newline{display:block;}
	h1,h2,h2 a,h3,h4,h5,h6{font-family:"Droid Sans","helvetica-neue","helvetica",arial,sans-serif;}
	h3{color:#333;font-weight:normal !important;margin-bottom:0px}
	h4{color:#333;font-weight:normal;margin-bottom:0px}
	img{background:#fff !important;margin:0px}
	img a{text-decoration:none !important;background:#fff !important;margin:0px}
	input{border:1px solid #999}
	.wrapper{width:950px;margin:0 auto 20px auto;clear:both;}
	.main{margin:0px 0px 50px 0;}
	article{margin-bottom:200px;}
	.main article:last-child{border:none!important;}
	article p a{text-decoration:underline;}
	article strong{font-weight:bold;}
	article h2{font-size:16px;margin:0 0 7px 0;color:333;}
	article h2 a:hover{color:#333;}
	article h2 a{text-decoration:none;border-bottom:3px solid #333;padding-bottom:1px;line-height:28px;text-transform:uppercase; display:inline;}
	article > .more {font-size:13px;margin:10px 0 20px 0;}
	article > .more ul{margin-left:10px;}
	article > .more ul li a{text-decoration:underline;font-size:13px;display:block;}
	article > .more ul li{margin-bottom:10px;padding:0px;font-size:13px;}
	article > .more ul li:last-child{margin-bottom:0;}
	article .comment{position:absolute;width:100px;left:-115px;bottom:0px;margin-bottom:60px;font-size:10px;line-height:15px;text-align:right;color:#666;}
	.video iframe { margin: 0 0 15px 0; }
	footer{font-size:12px;color:#333;line-height:1.8;}
	footer ul{list-style:none;margin:0;padding:0;}
	footer ul li{display:inline;margin:0 7px 0 0;padding:3px 0;opacity:.4;color:#333;-webkit-transition:.2s opacity linear;-moz-transition:.2s opacity linear;transition:.2s opacity linear;}
	footer ul li.more{margin:0 0 0 7px!important;}
	footer ul li.tag a{font-family:'Lucida Grande',Helvetica,Arial,sans-serif;font-weight:bold;font-size:11px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;color:#444;background-color:#F8F8F8;border:1px solid #AAA;padding:0px 7px 1px 7px;min-width:70px;text-align:center;text-decoration:none;}
	footer ul li:hover{opacity:1;color:#333;}
	footer ul li:hover a{color:#333;}
	footer ul li:last-child,footer ul li.via{margin:0;}
	footer ul li a{font-weight:normal;color:#333;}
	footer ul li.readlater{float:right;margin:0;}
	footer ul li.readlater a{font-size:11px;color:#fff;background:#666;padding:5px 5px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
	.navleft{font-size:14px;position:relative;float:left}
	.navright{font-size:14px;position:relative;float:right}
	.pagination{clear:both;overflow:hidden;margin:10px 0 10px 0;}
	a .notes{text-decoration:none !important;background:none}
	.notes a{text-decoration:none !important;background:none}
	img .notes{margin:0px;padding:3px}
	.notes img{display:none;margin:0px;padding:3px}
	ol.notes{list-style:none;margin:0;padding:0}
	ol.notes li{font-size:12px}
	.regular_post_body img{max-width:100%}
	/* .gist .gist-file .gist-data{background:#f1f1f1!Important;}
	*/
	.gist .gist-file{border:1px solid #f1f1f1!Important;}
	.gist .gist-file .gist-data.gist-syntax .s2{color:#F75757;}
	.gist .gist-meta{font-size:10px;color:#fff!important;background:#F75757!Important;font-family:"Droid Sans","helvetica-neue","helvetica",arial,sans-serif;}
	.gist .gist-meta a{color:#fff!Important;text-decoration:underline;}
	.gist .gist-file .gist-highlight pre{font-size:12px; font-family: "Droid Sans Mono", sans-serif!important;}
	.listening_example{display:inline-block;margin:0 0 20px 0;font-size:11px;}
	.listening_example .track{color:#999;padding:4px 7px;line-height:15px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #f1f1f1;display:none;}
	.listening_example a{display:block;font-weight:normal;color:#999;text-decoration:none;}
	.listening_example img{float:left;margin:1px 5px 0 0;}
	.listening_example strong{font-weight:bold;color:#999;}
	.listening_example strong.newline{display:block;}
	article { position:relative; }
	article .note { position:absolute; display:none; width:480px; top:0; left:0; padding:10px; background:#f1f1f1; z-index:1000; }

	@media only screen and (max-width: 1400px) {

	::-webkit-scrollbar{
	width:10px;
	height:10px;
	}

	::-webkit-scrollbar-button:start:decrement,
	::-webkit-scrollbar-button:end:increment{
	display:block;
	height:0px;
	width:0px;
	}

	::-webkit-scrollbar-button:vertical:increment,
	::-webkit-scrollbar-button:horizontal:increment{
	background-color:transparent;
	}

	::-webkit-scrollbar-track-piece{
	background-color:#fff;
	}

	::-webkit-scrollbar-thumb:vertical{
	height:50px;
	background-color:#6DB866;
	}
	::-webkit-scrollbar-thumb:horizontal{
	width:50px;
	background-color:#6DB866;
	}
	::-webkit-scrollbar-thumb:hover{
	background-color:#6DB866;
	}
	::-webkit-scrollbar-corner{
	background-color:#fbfbfb;
	}

	}
	</style>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

	<script>
	$(function() {
	var videos = [];

	var color = "55AAAA";
	var opts = "title=0&byline=0&portrait=0";

	$("iframe").each(function() {
	var $obj = $(this);
	var data = $obj.attr("data");
	var vsrc = $obj.attr("src");
	var oldW = $obj.attr("width");
	var newW = 950;
	var oldH = $obj.attr("height");
	var p = oldW/newW;
	var newH = (oldH / p);
	if (vsrc.search("youtube") > 0) {
	$obj.replaceWith('<iframe src="'+vsrc+'?'+opts+'&color='+color+'" width="'+newW+'" height="'+newH+'" frameborder="0"></iframe>');
	}
	});

	var
	i = 0,
	iframes = document.body.getElementsByTagName('iframe'),
	newVimeoWidth = 950,
	newVimeoHeight = 'auto';
	window.players = [];
	var players = [];
	for (x in iframes){


	if(iframes[x].src && iframes[x].src.indexOf('player.vimeo.com') > -1){

	if (newVimeoHeight == 'auto'){
	newVimeoHeight = ( newVimeoWidth * 9 ) / 16;
	}

	iframes[x].setAttribute("id", "player" + x);
	iframes[x].width = newVimeoWidth;
	iframes[x].height = newVimeoHeight;
	iframes[x].setAttribute("src", iframes[x].src + "?api=1&player_id=player" + x);



	}
	}







	$("article footer .edit").live("click", function(e) {
	e.preventDefault();

	var
	$article = $(this).parents("article");

	var text = $(this).text() == 'More' ? 'Less' : 'More';
	$article.find('.note').fadeToggle(250);
	$(this).text(text);

	});

	$("article .note").each(function(i, el) {
	var
	$el = $(el),
	$parent = $(this).parents("article"),
	$footer = $parent.find("footer");
	articlePaddingBottom = parseInt($parent.css("paddingBottom").replace("px", "")),
	paddingTop = parseInt($el.css("paddingTop").replace("px", "")),
	paddingBottom = parseInt($el.css("paddingBottom").replace("px", ""));

	var height = $parent.height() - $footer.height() - paddingTop - paddingBottom;

	console.log($(this).find("img").height(),$parent.height(), height);

	if ($el.height() < height) {
	$el.css({height: height});
	}

	var $button = $('<li class="more"><a href="#" class="edit">More</a></li>');

	$footer.find("ul").append($button);



	});

	$("a.about").on("click", function() {

	if ($(this).hasClass("open")) {
	$(".main").animate({
	marginTop: 0
	},
	250, function() {
	$("div.about").slideToggle(50);
	$(this).toggleClass("open");

	});
	} else {
	$(".main").animate({ marginTop: "20px" }, 250, function() { $("div.about").slideToggle(50); $(this).toggleClass("open"); });
	}

	});

	});

	</script>


	</head>
	<body>
	<div class="wrapper">
	<header>
	<nav>
	<h1><a href="/">{Title}</a></h1>
	<h2><span>—</span> {Description} <span>—</span></h2>

	</nav>


	</header>



	<div class="main">
	{block:SearchPage}
	<div class="content">
	<div class="datetime">
	{lang:SearchResultCount results}
	</div>
	<h2>{lang:Search results for SearchQuery 2}</h2>
	</div>
	{/block:SearchPage}
	{block:Posts}


	{block:Regular}<article>{Body}{/block:Regular}

	{block:Photo}
	<article class="photo">
	<a href="{Permalink}" class="icon" title="{Name}"></a>
	{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" title="{PhotoAlt}">{LinkCloseTag}{Caption}
	{/block:Photo}
	{block:Video}
	<article class="video"><div class="video">{Video-500}</div>{Caption}
	{/block:Video}

	{block:Audio}
	<article class="audio">{AudioPlayerGrey}{Caption}

	{/block:Audio}

	{block:Quote}
	<article class="quote"><blockquote class="highlight large">
	<a href="{Permalink}" class="icon" title="{Name}"></a>
	{Quote}
	</blockquote>
	{block:Source}<div class="source">— {Source}</div>{/block:Source}


	{/block:Quote}

	{block:Link}
	<article class="link">
	<a href="{Permalink}" class="icon" title="{Name}"></a>
	<h2><a href="{URL}" title="{Name}" {Target}>{Name}</a> →</h2>
	{block:Description}{Description}{/block:Description}
	{/block:Link}

	{block:Conversation}<article>
	{block:Title}<h2>{Title}</h2>{/block:Title}
	<p>
	{block:Lines}
	{block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />{/block:Lines}
	</p>

	{/block:Conversation}

	<footer>
	<ul>
	{block:Date}<li class="date"><a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
	{block:NoteCount}<li class="count"><a href="{Permalink}"> {NoteCountWithLabel}</a></li>{/block:NoteCount}
	{block:ContentSource}<li class="via">via <a href="{SourceURL}">{SourceTitle}</a></li>{/block:ContentSource}

	{block:HasTags}

	{block:Tags}
	<li class="tag">
	<a href="{TagURL}">{Tag}</a>
	</li>
	{/block:Tags}

	{/block:HasTags}


	</ul>
	</footer>
	</article>
	{/block:Posts}


	{block:PermalinkPage}
	{block:PostNotes}

	<h3>{lang:Notes}</h3>
	<p>{PostNotes}</p>

	{/block:PostNotes}
	{/block:PermalinkPage}



	{block:Pagination}
	<div class="pagination">

	{block:NextPage}
	<div class="navleft">
	← <a href="{NextPage}">past</a>
	</div>
	{/block:NextPage}


	{block:PreviousPage}
	<div class="navright">
	<a href="{PreviousPage}">future</a> →
	</div>
	{/block:PreviousPage}


	</div>
	{/block:Pagination}


	{block:PermalinkPagination}
	<div class="pagination">

	{block:PreviousPost}
	<div class="navleft">
	← <a href="{PreviousPost}">{lang:Previous post}</a>
	</div>
	{/block:PreviousPost}
	{block:NextPost}
	<div class="navright">
	<a href="{NextPost}">{lang:Next post}</a> →
	</div>
	{/block:NextPost}


	</div>
	{/block:PermalinkPagination}

	</div>
	</div>
	</body>
	</html>