Fred Astaire Theme - By Chloe

<!DOCTYPE html>
<html>
<head>

<!--
Fred Astaire Theme - bychloethemes.tumblr.com
don't be a douche and delete the credit
-->
<meta name="select:Columns" content="3col" title="3">
<meta name="select:Columns" content="4col" title="4">
<meta name="color:Background" content="#ffffff" />
<meta name="color:Primary Accent" content="#f2992e" />
<meta name="color:Secondary Accent" content="#dcecf5" />
<meta name="color:Text" content="#000" />
<meta name="font:Body" content="Pratt Pro"/>
<meta name="if:Show Description" content="1" />
<meta name="if:Archive link" content="1" />
<meta name="text:Link 1" content="" />
<meta name="text:URL 1" content="" />
<meta name="text:Link 2" content="" />
<meta name="text:URL 2" content="" />
<meta name="text:Link 3" content="" />
<meta name="text:URL 3" content="" />
<meta name="text:Link 4" content="" />
<meta name="text:URL 4" content="" />
<meta name="text:Link 5" content="" />
<meta name="text:URL 5" content="" />
<meta name="text:Link 6" content="" />
<meta name="text:URL 6" content="" />
<meta name="image:Background" content="" />
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>{block:TagPage}{Tag} posts - {/block:TagPage} {block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*Basic styles*/
::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    background: {color:Background};
}
::-webkit-scrollbar-thumb {
    background-color: {color:primary accent};
    border-top:0px solid {color:Background};
    border-bottom:0px solid {color:Background};
    border-right:0px solid {color:Background};
}
::-moz-selection {
    background: {color:primary accent};
    color: #fff;
}
::selection {
    background: {color:primary accent};
    color: #fff;
}
#content3col {
    {block:IndexPage}
    margin-top:110px;
    margin-left:50px;
    width: 945px;
    {/block:IndexPage}
    {block:PermalinkPage}
    width:500px;
    margin-top:110px;
    margin-left:277px;
    margin-bottom:50px;
    {/block:PermalinkPage}
}
#content4col {
    {block:IndexPage}
    margin-top:110px;
    margin-left:277px;
    width: 943px;
    {/block:IndexPage}
    {block:PermalinkPage}
    width:500px;
    margin-top:110px;
    margin-left:50px;
    margin-bottom:50px;
    {/block:PermalinkPage}
}
body {
    background: {color:Background} url('{image:Background}')
    no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: {color:text};
    font-family: {font:Body};
    font-size: 0.7em;
    margin: 0;
    padding: 0;
}
#blogtitle a:link, a:visited {
    text-decoration: none;
    color: {color:text};
}
#blogtitle a:hover {
    text-decoration: none;
    color: {color:primary accent};
    background-color:{color:secondary accent};
}
a:link, a:visited {
    text-decoration: none;
    color: {color:text};
}
a:hover {
    text-decoration: underline;
    color: {color:primary accent};
}
blockquote {
    border-left: 1px solid #ccc;
    margin: 0;
    padding: 2%;
}
blockquote2 {
    background: #fff;
    padding: 2% 4% 2% 2%;
}
iframe, img, embed, object, video {
    max-width: 100%;
}
img {
    height: auto;
    width: auto;
}
/*Masthead*/
.title {
    position:absolute;
    top:50px;
    left:50px;
    width:945px;
    border-bottom:2px solid {color:primary accent};
}
.title h1 {
    display: block;
    font-size: 25px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    font-weight: normal;
}

.title description {
    font-size:12px;
}
.sidebar {
    top:170px;
    right:100px;
    height:auto;
    width:70px;
    position:fixed;
    text-align:center;
    padding:20px 0px;
    z-index:9999;
    border-left:2px solid {color:primary accent};
    border-right:2px solid {color:primary accent};
}
.sidebar hr {
    height: 2px;
    border: 0;
    color: {color:primary accent};
    background-color: {color:primary accent};
    width: 134px;
    position:relative;
    left:-32px;
    margin:0;
}
.sidebar ul {
    list-style-type:none;
}
.sidebar li {
    font-size:12px;
    line-height:20px;
    display:block;
}
.sidebar li:hover {
    background-color:{color:secondary accent};
}
/*Article*/
#article3col {
    background: {color:secondary accent};
    {block:IndexPage}
    margin:25px;
    width: 250px;
    {/block:IndexPage}
    {block:PermalinkPage}
    margin:25px;
    width: 400px;
    {/block:PermalinkPage}
    padding: 5px 5px 3px 5px;
}
#article3col h1 {
    font-weight:normal;
    text-transform:uppercase;
    font-size:20px;
}
#article4col {
    background: {color:secondary accent};
    {block:IndexPage}
    margin:10px;
    width: 200px;
    {/block:IndexPage}
    {block:PermalinkPage}
    margin:25px;
    width: 400px;
    {/block:PermalinkPage}
    padding: 5px 5px 3px 5px;
}
#article4col h1 {
    font-weight:normal;
    text-transform:uppercase;
    font-size:20px;
}
.chat span {
    float: left;
    margin-right: 5px;
}
.tumblr_audio_player {
    height: 30px;
    width: 250px;
}
.albumart {
    position:absolute;
{block:IndexPage}
    width:60px;
    height:60px;
{/block:IndexPage}
}

.albumart img {
    float:left;
    margin-left:5px;
{block:IndexPage}
    width:60px;
    height:60px;
{/block:IndexPage}
    border:1px solid #fff;
}

.playbox {
    opacity:0.6;
    width:30px;
    height:30px;
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
    overflow:hidden;
    position:absolute;
    z-index:2;
{block:IndexPage}
    margin-left:21px;
    margin-top:16px;
{block:IndexPage}
}

.audioinfo {
    margin-top:2px;
    line-height:12px;
    font-size:0.8em;
    padding-bottom:10px;
    text-transform:uppercase;
{block:IndexPage}
    margin-left:75px;
{block:IndexPage}
}
/*Metadata*/
.metadata {
    display: inline-block;
    width: 100%;
}
.reblogged {
    float: right;
}
/*Tags and notes*/
#tags, nav ul, .chat ul {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
}
#tags li {
    float: left;
    margin-right: 10px;
}
.notes {
    clear: both;
    padding: 0;
}
.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {
    display:none;
}
#infscr-loading {
    display:none;
}
.navigation {
    display:none!important;
}
.copyright {
    position:fixed;
    bottom:10px;
    left:10px;
}

.permalink {
    margin-top:0px;
    padding:0px 2px 2px 2px;
    text-align:right;
    word-spacing:1px;
{block:permalinkpage}
    opacity:0;
{/block:permalinkpage}
}

#permatag3col {
    position:absolute;
    margin-top:-30px;
    margin-left:10px;
    opacity:0;
    padding:4px 0px;
    background:#fff;
    font-size:10px;
    width:230px;
    display:block;
    text-align:center;
    text-transform:capitalize;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;}

#permatag3col a{
    padding:2px 5px 3px 5px;
    font-size:10px;
}

.post:hover #permatag3col {
    opacity:1;
    display:block;
}
#permatag4col {
    position:absolute;
    margin-top:-30px;
    margin-left:10px;
    opacity:0;
    padding:4px 0px;
    background:#fff;
    font-size:10px;
    width:180px;
    display:block;
    text-align:center;
    text-transform:capitalize;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;}

#permatag4col a{
    padding:2px 5px 3px 5px;
    font-size:10px;
}

.post:hover #permatag4col {
    opacity:1;
    display:block;
}
ol.notes {
    padding: 0px;
    margin: 25px 0px;
    list-style-type: none;
}

ol.notes li.note {
    padding: 5px;
    text-align:right;
}

ol.notes li.note img.avatar {
    display:none;
}

ol.notes li.note span.action {
    font-weight: normal;
}

ol.notes li.note .answer_content {
    font-weight: normal;
}

ol.notes li.note blockquote {
    padding: 4px 5px;
    margin: 10px 0px 0px 25px;
}

ol.notes li.note blockquote a {
    text-decoration: none;
}
/*Custom CSS*/
{CustomCSS}
</style>
</head>
<body>
<!--Masthead-->
<header class="title">
    <span id="blogtitle">
        <h1><a href="/" title="{lang:Home}">{Title}</a></h1>
    </span>
    <description>
    {block:IfShowDescription}
        {block:Description}
        <p>{Description}</p>
        {block:Description}
    {/block:IfShowDescription}
    </description>
</header>
<header class="sidebar">
    <!--Navigation-->

    <hr>
    <nav id="blogtitle">
        <ul>
            {block:AskEnabled}
            <li> <a href="/ask">{AskLabel}</a></li>
            {/block:AskEnabled}
            {block:SubmissionsEnabled}
            <li> <a href="/submit">{SubmitLabel}</a></li>
            {/block:SubmissionsEnabled}
            {block:HasPages}
            {block:Pages}
            <li> <a href="{URL}">{Label}</a></li>
            {/block:Pages}
            {/block:HasPages}
            {block:IfLink1}
            <li> <a href="{text:URL 1}">{text:Link 1}</a> </li>
            {/block:IfLink1}
            {block:IfLink2}
            <li> <a href="{text:URL 2}">{text:Link 2}</a> </li>
            {/block:IfLink2}
            {block:IfLink3}
            <li> <a href="{text:URL 3}">{text:Link 3}</a> </li>
            {/block:IfLink3}
            {block:IfLink4}
            <li> <a href="{text:URL 4}">{text:Link 4}</a> </li>
            {/block:IfLink4}
            {block:IfLink5}
            <li> <a href="{text:URL 5}">{text:Link 5}</a> </li>
            {/block:IfLink5}
            {block:IfLink6}
            <li> <a href="{text:URL 6}">{text:Link 6}</a> </li>
            {/block:IfLink6}
            {block:IfArchiveLink}
            <li> <a href="/archive">past</a></li>
            {/block:IfArchiveLink}
            <li><a href="http://dontbrag.tumblr.com">theme</a></li>
        </ul>
    </nav>
            <hr>
</header>
<!--Content holder-->
<div id="content{select:Columns}">
{block:Posts}
<div id="article{select:Columns}">
<!--Unique code for each post type-->
{block:Text}
<div class="text">
    {block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
    {Body}
    {block:IndexPage}
    <div class="permalink">
    <a href="{Permalink}">{NoteCount}</a> <a href="{ReblogURL}" target="_blank">Reblog</a></div>
    {/block:IndexPage}
{/block:Text}

{block:Photo}<div class="photo">
<div class="post">
    {block:IndexPage}
    <a href="{Permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" />
    </a>
<div id="permatag{select:columns}">
    <a href="{Permalink}">{ShortDayofWeek}</a> &mdash;
    <a href="{Permalink}">{NoteCount}</a> &mdash;
    <a href="{ReblogURL}" target="_blank">reblog</a>
</div>
    {/block:IndexPage}
    {block:PermalinkPage}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />
    {block:Caption}{Caption}{/block:Caption}
    {/block:PermalinkPage}</div>
{/block:Photo}

{block:Photoset}
<div class="photoset">
<div class="post">
    {Photoset}
    {block:IndexPage}
<div id="permatag{select:columns}">
    <a href="{Permalink}">{ShortDayofWeek}</a> &mdash;
    <a href="{Permalink}">{NoteCount}</a> &mdash;
    <a href="{ReblogURL}" target="_blank">reblog</a>
</div>
    {/block:IndexPage}
    {block:PermalinkPage}
    {block:Caption}{Caption}{/block:Caption}
    {/block:PermalinkPage}</div>
{/block:Photoset}

{block:Quote}
<div class="quote">
    <p>&ldquo;{Quote}&rdquo;</p>
    {block:Source}<p><cite> &mdash;{Source}</cite></p>{/block:Source}
    {block:IndexPage}
    <div class="permalink">
    <a href="{Permalink}">{NoteCount}</a> <a href="{ReblogURL}" target="_blank">Reblog</a></div>
    {/block:IndexPage}
{/block:Quote}

{block:Link}
<div class="link">
    <h1 class="title"><a href="{URL}">{Name}</a></h1>
    {block:Description}{Description}{/block:Description}
    {block:IndexPage}
    <div class="permalink">
    <a href="{Permalink}">{NoteCount}</a> <a href="{ReblogURL}" target="_blank">Reblog</a></div>
    {/block:IndexPage}
{/block:Link}

{block:Chat}
<div class="chat inner">
    <ul>
        {block:Lines}<li class="{Alt}"><p>{block:Label}
        <strong>{Label}</strong>{/block:Label} {Line} </p>
        </li>{/block:Lines}
    </ul>
    {block:IndexPage}
    <div class="permalink">
    <a href="{Permalink}">{NoteCount}</a> <a href="{ReblogURL}" target="_blank">Reblog</a></div>
    {/block:IndexPage}
{/block:Chat}

{block:Audio}
<div class="audio">
    {block:IndexPage}
{block:AlbumArt}
        <div class="albumart">
            <a href="{Permalink}"><img src="{AlbumArtURL}"></a>
        </div>
    {/block:AlbumArt}
    {block:AudioPlayer}
        <div class="playbox">
            {AudioPlayerWhite}
        </div>
    {/block:AudioPlayer}
        <div class="audioinfo">
            Artist: <span{block:Artist} style="display:none;"
            {/block:Artist}>Unknown</span>
            {block:Artist}{Artist}{/block:Artist}</br>
            Title: <span{block:TrackName} style="display:none;"
            {/block:TrackName}>Unknown</span>
            {block:TrackName}{TrackName}{/block:TrackName}</br>
            Album: <span{block:Album} style="display:none;"
            {/block:Album}>Unknown</span>
            {block:Album}{Album}{/block:Album}{block:PlayCount}</br>
            Plays: {FormattedPlayCount}{/block:PlayCount}
        </div>
        <div class="permalink">
    <a href="{Permalink}">{NoteCount}</a> <a href="{ReblogURL}" target="_blank">Reblog</a></div>
    {/block:IndexPage}
    {block:PermalinkPage}
    {block:AlbumArt}<img src="{AlbumArtURL}" width="400"
    height="400"/>{/block:AlbumArt}<br>
            Artist: <span{block:Artist} style="display:none;"
            {/block:Artist}>Unknown</span>
            {block:Artist}{Artist}{/block:Artist} &mdash;
            Title: <span{block:TrackName} style="display:none;"
            {/block:TrackName}>Unknown</span>
            {block:TrackName}{TrackName}{/block:TrackName} &mdash;
            Album: <span{block:Album} style="display:none;"
            {/block:Album}>Unknown</span>
            {block:Album}{Album}{/block:Album}{block:PlayCount} &mdash;
            Plays: {FormattedPlayCount}{/block:PlayCount}
    {block:Caption}{Caption}{/block:Caption}
    {AudioPlayerWhite}
    {/block:PermalinkPage}
{/block:Audio}

{block:Video}
<div class="video">
    <div class="video-player">{Video-250}</div>

    {block:IndexPage}
    <div class="permalink">
    <a href="{Permalink}">{NoteCount}</a> <a href="{ReblogURL}" target="_blank">Reblog</a></div>
    {/block:IndexPage}
    {block:PermalinkPage}
    <div class="video-player">{Video-500}</div>
    {block:Caption}{Caption}{/block:Caption}
    {/block:permalinkPage}
{/block:Video}

{block:Answer}
<div class="answer">
    <div style="color: #000000; background-color:
    {color:primary accent};padding: 10px;">
    {lang:Asker asked 2}: {Question}</div>
    <div style="text-indent: 20px;">{Answer}</div>
    {block:IndexPage}
    <div class="permalink">
    <a href="{Permalink}">{NoteCount}</a> <a href="{ReblogURL}" target="_blank">Reblog</a></div>
    {/block:IndexPage}
{/block:Answer}
</div>
<!--Post footer (tags and notes) on displayed on permalink pages-->
{block:Permalink}
<footer class="details">
{block:HasTags}
    <ul id="tags">
        {block:Tags}<li> <a href="{TagURL}">{Tag}</a> </li>{/block:Tags}
    </ul>
{/block:HasTags}
{block:PostNotes}
<div id="notes">
    {PostNotes}
</div>
{/block:PostNotes}
</footer>
{/block:Permalink}
 </div>
{/block:Posts}
<!--Close of article-->
</div>
<!--Pagination: previous/next page links-->
{block:Pagination}
<div class="pagination">
    {block:PreviousPage}<a href="{PreviousPage}">Previous page</a>{/block:PreviousPage}
    {block:NextPage}<a href="{NextPage}">Next page</a>{/block:NextPage}
</div>
{/block:Pagination}
<!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
<script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
<!--Code for infinite scroll and grid layout-->
<script>
(function() {
    var $tumblelog = $('#content{select:Columns}');
    $tumblelog.infinitescroll({
        navSelector  : ".pagination",
        nextSelector : ".pagination a:first",
        itemSelector : "#article{select:Columns}",
        bufferPx     : 50,
        done : "",
        loading: {
            finishedMsg: "<p> </p>",
            img : "http://i58.tinypic.com/34huesh.gif",
            msg: null,
            msgText: "<p> </p>"
        },
    },
      function( newElements ) {
            var $newElems = $( newElements ).css({ opacity: 0 });
            $newElems.imagesLoaded(function(){
                $newElems.animate({ opacity: 1 });
                $tumblelog.masonry( 'appended', $newElems);
            });
          }
    );
    $tumblelog.imagesLoaded( function(){
      $tumblelog.masonry({
        columnWidth: function( containerWidth ) {
            return containerWidth / 100;
          }
      });
    });
})();
</script>
<!--For users adding Google Analytics ID-->
<script>
var _gaq=[['_setAccount','{text:Google Analytics ID}'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
    <div class="copyright"><a href="http://dontbrag.tumblr.com">&copy;
    </a></div>
</body>
</html>