Oh! Yogurt Theme

<!doctype html>
<head>
    <!-- theme by oddhour.tumblr.com
         don't steal, do learn
    -->

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{Title}{block:TagPage} | #{Tag} {/block:TagPage} {block:SearchPage} | {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title>
    <meta name="description" content="{block:IndexPage}{block:Description}{MetaDescription}{/block:Description}{/block:IndexPage}{block:PermalinkPage}{PostSummary}{/block:PermalinkPage}" />
    <link rel="shortcut icon" href="{Favicon}" />
    <link rel="alternate" type="application/rss+xml" href="{RSS}" />

    <!-- ### Custom Stuff ### -->
    <meta name="color:Text" content="#555555"/>
    <meta name="color:Links" content="#22a3b4"/>
    <meta name="image:Header Image" content="http://static.tumblr.com/ca3686ab9eac8d26e6693b89a55bdb9d/isskdo7/bybn3e14z/tumblr_static_icon.png"/>
    <meta name="if:Show Description" content="true"/>
    <meta name="if:Show Archive" content="true"/>
    <meta name="if:Centered Header" content="false"/>
    <meta name="if:Show Currently" content="true"/>

    <meta name="text:Current1 Header" content="listening" />
    <meta name="text:Current1 Content" content="R U Mine? - Arctic Monkeys" />
    <meta name="text:Current2 Header" content="watching" />
    <meta name="text:Current2 Content" content="Brooklyn 99" />
    <meta name="text:Current3 Header" content="reading" />
    <meta name="text:Current3 Content" content="Uprooted by Naomi Novik" />
    <meta name="text:Current4 Header" content="" />
    <meta name="text:Current4 Content" content="" />
    <meta name="text:Current5 Header" content="" />
    <meta name="text:Current5 Content" content="" />

    <meta name="font:Body" content="Helvetica Neue"/>

    <link rel="stylesheet" href="http://static.tumblr.com/thpaaos/DIcklyl4z/reset.css" type="text/css" />


<style>


.cf:before,
.cf:after { content: " "; /* 1 */ display: table; /* 2 */ }
.cf:after { clear: both; }
.cf { *zoom: 1; }

html, body {
    height: 100%;
}

body {
    color: {color:Text};
    font-size: 14px;
    font-family: {font:Body};
    line-height: 1.5em;
    background: #fff;
}

a img { border-width: 0px; }
*:active, *:focus { outline: 0px; }
a { color: {color:Links}; text-decoration: none;
}

a:hover { text-decoration:underline; }

ol, ul {
    padding-left: 30px;
    margin: 1em 0;

}

h2 + a.timestamp {
    line-height: 30px;
}

p {
    margin: 0;
    padding: 8px 0;
}

a.title {
    text-decoration: none;
    font-size: 1.3em;
    color: {color:Text};
}

a.title + p { padding: 8px 0 8px 0; }
p + blockquote { margin: 0 0 8px 0; }
p + ul, p + ol, ul > ul, ul > ol, ol > ul, ol > ol { margin-top: .5em; }
ul ul, ul ol, ol ul, ol ol { margin: 0; }

blockquote {
    border-left: 5px solid #eee;
    margin: 8px 0;
    padding: 0 0 0 15px;
}

blockquote > p:first-child {
        padding: 0;
}

pre {
    width: 100%;
    overflow: auto;
    background: #efefef;
    font-family: 'Courier New', Courier, monospace;
    padding: .5em;
    font-size: .85em;
    line-height: 1.1em;
}

strong { font-weight: bold; }
em { font-style: italic; }
sub { vertical-align: sub; }
sup { vertical-align: super; }
sub, sup { font-size: .8em; }
small { font-size: .9em; }


.caption {
    padding: 8px 0;
}

    .quote-caption {
        text-align: right;
        margin-left: 20px;
    }

#container {
    width: 880px;
    margin: 0 auto;
    position: relative;
}

#header {
    margin: 0 0 0 20px;
    font-size: .95em;
    clear: both;
    position: relative;
    {block:IfCenteredHeader}text-align: center;{/block:IfCenteredHeader}
}


#posts {
    width: 900px;
    clear: both;
}

.post {

    padding: 50px 0px 20px;
{block:IndexPage} width: 400px;
    margin: 0 25px;
{/block:IndexPage}
{block:PermalinkPage} width: 540px;
    margin: 0 auto 100px;
    {/block:PermalinkPage}
}
    .tags {
        margin: 10px 0;
    }

    .tag {
        font-size: .85em;
        color: #999;
        text-decoration: none;
    }

    .pound { opacity: .4; }


    a.tag:hover {
        color: {color:Links};
        text-decoration: none;
    }

    a.timestamp {
        {block:IndexPage}font-size: .85em;{/block:IndexPage}
        line-height: 1em;
        color: #444;
        display: inline-block;
        padding: 3px;
        margin-top: 10px;
        text-decoration: none;
    }

    .timestamp-wrap {
        text-align: center;
    }

    .sourcelink {
        font-size: .85em;
    }

    .timestamp:hover * {
        color: #fff;
    }

    .red { color: red; }

    .timestamp:hover,
    .timestamp:hover .timestamp {
        color: #FFFFFF;
        background: {color:Links};
    }

    .post img {
        max-width: 100%;
    }

    a.readMore {
        display: block;
        padding: 3px;
        border-top: 1px dashed #ccc;
        border-bottom: 1px dashed #ccc;
        text-align: center;
        text-decoration: none;
        text-transform: lowercase;
        font-size: .9em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }

    a.readMore:hover {
        color: #fff;
        background: {color:Links};
        border-color: transparent;

    }

.ask_question {
    font-size: .9em;
    padding: 15px;
    border: 1px solid #eee;
    background: #f7f7f7;
}

    .ask_answer {
        margin-top: 15px;
    }

    .ask_asker {
        font-weight: bold;
        text-align: right;
        font-size: .85em;
        text-transform: uppercase;
    }

.audio {
    margin-bottom: 20px;
}

    .audio-player {
        width: 100%;
    }

    .audio-art {
        width: 100px;
        height: 100px;
        float: left;
        margin-right: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        overflow: hidden;
    }

    .audio-info {
        float: left;
    {block:IndexPage}width: 260px;{/block:IndexPage}
    {block:PermalinkPage}width: 360px;{/block:PermalinkPage}
    }
    .audio-artist {
        text-transform: uppercase;
        font-size: .8em;
        color: #888;
    }
    .audio-track {
        font-weight: 300;
        font-size: 1.3em;
    }


.chat {
    font-size: .9em;
    width: 100%;
    margin: 0 0 10px 0;
    border-collapse: collapse;
    font-family: "Courier New", "Courier", monospace;
}

    h2 + .chat {
        margin: 10px 0 3px 0;
    }

    .chat .line {
        padding: 4px 12px;
        line-height: 1.1em;
    }

    .chat .name {
        font-weight: bold;
    }


.quote {
    font-size: 1.2em;
    line-height: 1.5em;
    padding: 10px 30px;
    font-weight: 300;
}

    .quote.long { font-size: 1em; padding: 10px 0; }
    .quote.short { font-size: 1.4em; }

.link_url {
    font-size: .7em;
    color: {color:Links};
}

.answer_form_container { width: 512px; }

.notes { list-style-type: none; margin: 31px 0 10px 0; padding: 0; padding-top: 10px; font-size:.9em;  }
    .notes li.note { margin: 0 0 1px 0; padding: 0 4px; }
    .notes a { color: #aaa; }
    .notes img.avatar { display: none; }
    .notes blockquote { margin: 0; }
    .notes blockquote a { text-decoration: none; }

.caption-reblog {
    {block:IndexPage}
    font-size: .9em;
    line-height: 1.5;
    {/block:IndexPage}
}
.caption-reblog sup, .caption-reblog sub {
    {block:IndexPage}
    font-size: 1em;
    {/block:IndexPage}
}

a.tumblr_blog {
    {block:IndexPage}
    color: #777;
    text-decoration: underline;
    {/block:IndexPage}
}

.button-bar-wrap {
    position: relative;
    text-align:center;
    }
    .button-bar {
        display: inline-block;
        padding: 5px;
        clear:both;
        margin: 0 auto;
        background: #ffffff;
        position: relative;
        z-index: 10;
    }
    .button-bar-line {
        width: 100%;
        background: #ccc;
        height: 1px;
        position: absolute;
        margin-top: 15px;
        z-index: 1;
    }

    .like_button, .reblog_button, .post-button {
        display: inline-block;
        margin: 0 2px 2px;
    }



#bottom-pagination {
    text-align: center;
    padding: 20px;
    margin-bottom: 100px;
    font-size: 1.5em;
    font-weight: 300;
    letter-spacing: 1px;
}

#header-main-links { margin-left: -10px; }
#header-main-links a { display: inline-block; padding: 0px 15px; margin: 0; border-left: 1px solid #ccc; line-height: 1em;}
#header-main-links a:first-child {
    border-left: 0px;
}

#header-img {
    text-align: center;
    margin: 20px;
}
#header-img img {
    max-width: 100%;
}

#credit {
    position: fixed;
    right: 20px;
    bottom: 5px;
    opacity: .7;
}
#credit:hover {
    opacity: 1;
}

#currently {
    position: absolute;
    right: 0;
    z-index: 10;
    display:inline-block;
    padding: 5px 10px;
    border-bottom: 3px solid #ddd;
    font-size: .75em;
    text-align: right;
    background: #fff;
}
    #currently h4 {
        cursor: pointer;
    }

    #currently:hover {
        margin-top: -1px;
        margin-right: -1px;
        border: 1px solid #ddd;
    }
    #currently:hover table {
        display: block;
    }
    #currently table {
        display:none;
        max-width: 200px;
        margin: 5px 0 10px;
    }
    #currently table td {
        padding: 0px 5px;
    }

    #currently table td:first-child {
        font-weight: bold;
        text-align: right;
        border-right: 1px solid #aaa;
    }

    #currently table .second-col {
        width: 130px;
    }

    {CustomCSS}


    </style>
    <script src="http://static.tumblr.com/thpaaos/Oznkoyc5z/jquery.scale.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>

    <script>

    {block:IndexPage}
    function masonryReload() {
        $('#posts').masonry('layout');
    }

    $(document).ready(function () {
        $('#posts').masonry({"columnWidth": 400, "itemSelector": ".post"}
    );
        var masonryTimer = setInterval(masonryReload, 2000);
        setTimeout( function() {
            clearInterval(masonryTimer);
        }, 10000)

    });
    {/block:IndexPage}



    $(window).load(function () {
    {block:IndexPage}
        $('#posts').masonry('layout');
    {/block:IndexPage}
    });

    </script>

</head>
<body>

    <div id="container">
        <div id="header">
            {block:IfHeaderImage}<div id="header-img" ><a href="/"><img src="{image:Header Image}"/></a></div>{/block:IfHeaderImage}
            {block:IfShowDescription}<p>{Description}</p>{/block:IfShowDescription}
            <div id="header-main-links">
            <a href="/">home</a>
            {block:AskEnabled}<a href="/ask">{AskLabel}</a>{/block:AskEnabled}

            {block:HasPages}
                {block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}
            {/block:HasPages}
            {block:IfShowArchive}<a href="/archive">archive</a>{/block:IfShowArchive}

            {block:IfShowCurrently}
            <div id="currently">
                <h4>CURRENTLY &#9662;</h4>
                <table>
                    {block:IfCurrent1Content}<tr><td>{text:Current1 Header}</td><td class="second-col">{text:Current1 Content}</td></tr>{/block:IfCurrent1Content}
                    {block:IfCurrent2Content}<tr><td>{text:Current2 Header}</td><td>{text:Current2 Content}</td></tr>{/block:IfCurrent2Content}
                    {block:IfCurrent3Content}<tr><td>{text:Current3 Header}</td><td>{text:Current3 Content}</td></tr>{/block:IfCurrent3Content}
                    {block:IfCurrent4Content}<tr><td>{text:Current4 Header}</td><td>{text:Current4 Content}</td></tr>{/block:IfCurrent4Content}
                    {block:IfCurrent5Content}<tr><td>{text:Current5 Header}</td><td>{text:Current5 Content}</td></tr>{/block:IfCurrent5Content}
                </table>
            </div>
            {/block:IfShowCurrently}

            </div>
<br/>
        </div>

        <div id="posts">
            {block:Posts}
            <div class="post">
                {block:Photoset}
                    {Photoset}
                    {block:Caption}<div class="caption">{Caption}
                    {block:More}
                        <a href="{Permalink}" class="readMore">{lang:Read more}</a>
                    {/block:More}

                </div>{/block:Caption}
                {/block:Photoset}


                {block:Photo}
                {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
                {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
                    <img src="{block:IndexPage}{PhotoURL-500}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}">
                {block:IndexPage}</a>{/block:IndexPage}
                {block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}

                {block:Caption}<div class="caption">{Caption}
                    {block:More}
                        <a href="{Permalink}" class="readMore">{lang:Read more}</a>
                    {/block:More}

                </div>{/block:Caption}
                {/block:Photo}

                {block:Audio}
                    <div class="cf audio">
                    {block:AlbumArt}
                        <div class="audio-art"><img src="{AlbumArtURL}"/></div>
                    {/block:AlbumArt}

                        <div class="audio-info">

                            <div class="audio-track">{block:TrackName}{TrackName}{/block:TrackName}</div>
                            <div class="audio-artist">{block:Artist}{Artist}{/block:Artist}</div>


                            <br/>
                        {block:AudioEmbed}
                            <div class="audio-play">{AudioEmbed-400}</div>
                        {/block:AudioEmbed}

                        {block:AudioPlayer}
                            <div class="audio-player">{AudioPlayerWhite}</div>
                        {/block:AudioPlayer}
                        </div>
                    </div>

                {block:Caption}<div class="caption">{Caption}
                    {block:More}
                        <a href="{Permalink}" class="readMore">{lang:Read more}</a>
                    {/block:More}

                </div>{/block:Caption}
                {/block:Audio}

                {block:Video}
                {block:IndexPage}{Video-400}{/block:IndexPage}
                {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
                {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
                {/block:Video}

                {block:Text}
                {block:Title}<h1><a href="{Permalink}" class="title">{Title}</a></h1>{/block:Title}
                <div class="caption">
                    {Body}
                    {block:More}
                        <a href="{Permalink}" class="readMore">{lang:Read more}</a>
                    {/block:More}
                </div>
                {/block:Text}

                {block:Answer}
                <div class="ask_question">
                <b>Q: </b>{Question}
                <div class="ask_asker">&mdash; {Asker}</div>
                </div>

                <div class="ask_answer">{Answer}
                    {block:More}
                        <a href="{Permalink}" class="readMore">{lang:Read more}</a>
                    {/block:More}
                </div>
                {/block:Answer}

                {block:Link}
                <h1><a href="{URL}" class="title" {Target}>{Name}<br/><span class="link_url">from {block:Host}{Host}{/block:Host} &rarr;</span></a></h1>

                {block:Description}<div class="caption">{Description}</div>{/block:Description}
                {/block:Link}

                {block:Quote}
                <div class="quote {Length}">{Quote}</div>
                {block:Source}<div class="caption quote-caption">&mdash; {Source}</div>{/block:Source}
                {/block:Quote}



                {block:Chat}
                {block:Title}<h2><a href="{Permalink}" class="title">{Title}</a></h2>{block:Title}
                <div class="chat">
                    {block:Lines}
                    <div class="line">
                        {block:Label}<span class="name line{UserNumber}">{Label}</span>{block:Label} <span class="words line{UserNumber}">{Line}</span>
                    </div>
                    {/block:Lines}
                </div>
                {/block:Chat}

                {block:RebloggedFrom}<div class="caption-reblog">{/block:RebloggedFrom}




                {block:RebloggedFrom}</div>{/block:RebloggedFrom}

                <div>
                {block:Date}
                <div class="tags">
                {block:Tags}
                <a href="{TagURL}" class="tag"><span class="pound">#</span>{Tag}</a>&nbsp;
                {/block:Tags}
                </div>
                <div class="timestamp-wrap">
                {block:NotReblog}
                <a href="{Permalink}" class="timestamp">Posted on {ShortMonth} {DayOfMonthWithZero} with {NoteCount} <span class="red">&hearts;</span></a>
                {/block:NotReblog}

                {block:RebloggedFrom}
                <a href="{Permalink}" class="timestamp">{lang:Reblogged} on {ShortMonth} {DayOfMonthWithZero} with {NoteCount} <span class="red">&hearts;</span></a> {block:PermalinkPage}<span style="font-size:.9em;">(via <a href="{ReblogParentURL}" target="_blank">{ReblogParentName}</a>)</span>{/block:PermalinkPage}
                {/block:RebloggedFrom}
                </div>
                {/block:Date}
                </div>

                <div class="button-bar-wrap">
                    <div class="button-bar-line"></div>
                    {block:Date}
                    <div class="button-bar">
                        {LikeButton size="20" color="grey"}<div class="post-button">{ReblogButton size="20" color="grey"}</div>
                    </div>
                    {/block:Date}
                </div>

                {block:PostNotes}
                <div class="notes">
                    {PostNotes}
                </div>
                {/block:PostNotes}


            </div> <!-- .post -->
            {/block:Posts}
        </div> <!-- .posts -->

                <!-- please don't remove ;_; -->
        <div id="credit"><a href="http://oddhour.tumblr.com/" target="_blank" title="theme by oddhour.tumblr.com"><img src="http://static.tumblr.com/isskdo7/t8Vn3e1hg/oddhour-logo-alt.png" /></a></div>

        <div style="cf"></div>

        {block:Pagination}<br/><br/><div id="bottom-pagination">
        {block:PreviousPage}<a href="{PreviousPage}">&larr; {/block:PreviousPage}{lang:Previous}{block:PreviousPage}</a>{/block:PreviousPage} &nbsp;&nbsp;/&nbsp;&nbsp;
        {block:NextPage}<a href="{NextPage}">{/block:NextPage}{lang:Next}{block:NextPage} &rarr;</a>{/block:NextPage}</div>
        {/block:Pagination}


        {block:PermalinkPagination}<br/><br/><div id="bottom-pagination">
        {block:NextPost}<a href="{NextPost}">&larr; {/block:NextPost}{lang:Previous}{block:NextPost}</a>{/block:NextPost} &nbsp;&nbsp;/&nbsp;&nbsp;
        {block:PreviousPost}<a href="{PreviousPost}">{/block:PreviousPost}{lang:Next}{block:PreviousPost} &rarr;</a>{/block:PreviousPost}</div>
        {/block:PermalinkPagination}


    </div> <!-- #container -->

</body>
</html>