Punk Theme

<!--Punk Theme by confers
http://fluorescent-themes.tumblr.com/
Please do not remove the credit---->

<html lang="en">

<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
<meta name="color:sidebar background" content="#ffffff" />
<meta name="color:post background" content="#ffffff" />
<meta name="color:background" content="#ffffff" />
<meta name="color:text" content="#000000" />
<meta name="color:title" content="#000000" />
<meta name="color:title hover" content="#000000" />
<meta name="color:link" content="#000000" />
<meta name="color:link hover" content="#000000" />
<meta name="color:questions" content="#eeeeee" />
<meta name="color:scrollbar" content="#000000" />
<meta name="color:highlight text" content="#ffffff" />
<meta name="color:highlight background" content="#cccccc" />
<meta name="select:Title Font" content="font-family:Consolas;font-size:16px;" title="Consolas">
<meta name="select:Title Font" content="font-family: 'Zeyada', cursive;
font-size:24px;letter-spacing:1px;line-height:21px;" title="Zeyada">
<meta name="select:Title Font" content="font-family: 'Dawning of a New Day', cursive;font-size:26px;line-height:25px;" title="Dawning of a New Day">
<meta name="select:Title Font" content="font-family: 'Cedarville Cursive', cursive;font-size:26px;line-height:25px;" title="Cedarville Cursive">
<meta name="select:Title Font" content="font-family: 'Sacramento', cursive;font-size:26px;line-height:25px;" title="Sacramento">
<meta name="select:Title Font" content="font-family: 'Covered By Your Grace', cursive;font-size:20px;line-height:23px;" title="Covered By Your Grace">
<meta name="select:Title Font" content="font-family: 'Coming Soon', cursive;font-size:18px;line-height:23px;" title="Coming Soon">
<meta name="select:Title Font" content="font-family: 'Indie Flower', cursive;font-size:20px;line-height:23px;" title="Indie Flower">
<meta name="select:Title Font" content="font-family: 'Just Me Again Down Here', cursive;font-size:24px;line-height:20px;" title="Just Me Again Down Here">
<meta name="select:Title Font" content="font-family: 'Gloria Hallelujah', cursive;font-size:17px;line-height:22px;" title="Gloria Hallelujah">
<meta name="select:Title Font" content="font-family: 'Shadows Into Light', cursive;font-size:20px;line-height:22px;" title="Shadows Into Light">
<meta name="select:Title Font" content="font-family: 'Reenie Beanie', cursive;font-size:26px;line-height:21px;" title="Reenie Beanie">
<meta name="select:Title Font" content="font-family: 'Give You Glory', cursive;font-size:20px;line-height:25px;" title="Give You Glory">
<meta name="text:home title" content="home" />
<meta name="text:ask title" content="ask" />
<meta name="text:link 1 title" content="" />
<meta name="text:link 1" content="" />
<meta name="text:link 2 title" content="" />
<meta name="text:link 2" content="" />
<meta name="text:link 3 title" content="" />
<meta name="text:link 3" content="" />
<meta name="text:link 4 title" content="" />
<meta name="text:link 4" content="" />
<meta name="text:link 5 title" content="" />
<meta name="text:link 5" content="" />
<meta name="text:link 6 title" content="" />
<meta name="text:link 6" content="" />

<meta name="image:Left Background" content""/>
<meta name="image:Right Background" content""/>
<meta name="image:Cover Background" content""/>
<meta name="image:Sidebar" content""/>

<meta name="if:Link One" content""/>
<meta name="if:Link Two" content""/>
<meta name="if:Link Three" content""/>
<meta name="if:Link Four" content""/>
<meta name="if:Link Five" content""/>
<meta name="if:Link Six" content""/>

 <meta name="if:Two Columns" content""/>
 <meta name="if:Three Columns" content""/>

 <link href='http://fonts.googleapis.com/css?family=Give+You+Glory|Reenie+Beanie|Shadows+Into+Light|Gloria+Hallelujah|Just+Me+Again+Down+Here|Indie+Flower|Coming+Soon|Covered+By+Your+Grace|Sacramento|Cedarville+Cursive|Dawning+of+a+New+Day|Zeyada' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script>
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:200,
               tip_fade_speed:300
           }
               );
       });
   })(jQuery);
</script>

{block:IndexPage}

<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">
$(window).load(function(){
var $wall = $('#entries');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '#post, #post_photo',
isAnimated : false
});
});

$wall.infinitescroll({
navSelector : '#pagination',
nextSelector : '#pagination a',
itemSelector : '#post, #post_photo',
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#scroll').fadeOut('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
});
}); $('#entries').show(500);
});
</script>
{/block:IndexPage}<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<style type="text/css">

#s-m-t-tooltip{
max-width:300px;
margin:15px;
padding:2px 8px;
border:1px solid #ccc;
border-radius:4px;
background:#FFF;
z-index:999999;
letter-spacing:1px;
font-size:9px;
text-transform:uppercase;
box-shadow:1px 1px 3px rgba(0,0,0,.1);}

body{
background-color:{color:background};
background-image: url({image:Left Background}), url({image:Right Background}), url({image:Cover Background});
background-attachment: fixed;
background-position: bottom 0px left 0px, bottom 0px right 0px;
background-repeat: no-repeat, no-repeat, no-repeat;
-webkit-background-size: auto, auto, auto;
-moz-background-size: auto, auto, auto;
-o-background-size: auto, auto, auto;
background-size: auto, auto, cover;
color:{color:text};
font-family:consolas;
font-size:10px;
}

::selection {
background:{color:highlight background};
color:{color:highlight text};
}
::-moz-selection {
background:{color:highlight background};
color:{color:highlight text};
}


::-webkit-scrollbar{
width:8px;
height:8px;
background:{color:background};}

::-webkit-scrollbar-thumb{
background:{color:scrollbar};
height:5px;
border:{color:background} solid 3px;}

a:link, a:active, a:visited{
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-o-transition: 0.3s ease;
-moz-transition: 0.3s ease;
color:{color:link};
text-decoration:none;
}

a:hover{
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-o-transition: 0.3s ease;
-moz-transition: 0.3s ease;
color:{color:link hover};
}

#n{

}

#entries{{block:IndexPage}
width:250px;
{block:IfTwoColumns}
width:890px;
{block:IfTwoColumns}
{block:IfThreeColumns}
width:1090px;
{block:IfThreeColumns}
margin-top:-50px;
margin-left:500px;
position:absolute;
{/block:IndexPage}{block:PermalinkPage}
width:500px;
margin-top:-10px;
margin-left:500px;
position:absolute;
{/block:PermalinkPage}
}

#post{
{block:IndexPage}
padding:15px 15px 15px 15px;
margin-top:70px;
margin-left:70px;
width:250px;
background:{color:post background};
border:1px solid #ccc;
{/block:IndexPage}{block:PermalinkPage}
padding:15px 15px 15px 15px;
border:1px solid #ccc;
margin-top:20px;
background:{color:post background};
width:500px;{/block:PermalinkPage}
}

#post .perma{
{block:IndexPage}
background:transparent;
-webkit-transition: 0.8s ease;
transition: 0.8s ease;
-o-transition: 0.8s ease;
-moz-transition: 0.8s ease;
margin-top:-12px;
margin-left:auto;
position:absolute;
width:250px;
opacity:0;
text-transform:uppercase;
{/block:IndexPage}{block:PermalinkPage}
display:none;
{/block:PermalinkPage}
}


#post:hover .perma{
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-o-transition: 0.3s ease;
-moz-transition: 0.3s ease;
opacity:1;
}

#side{
margin-top:350px;
text-align:left;
color:#585858;
top:10px;
padding:5px;
left:20px;
position:fixed;
-webkit-transition: 0.8s ease;
transition: 0.8s ease;
-o-transition: 0.8s ease;
-moz-transition: 0.8s ease;
text-transform:uppercase;
letter-spacing:2px;
font-family:consolas;
}

#side #sidebar{
opacity:0;
letter-spacing:1px;
text-transform:lowercase;
width:90px;
text-align:center;
padding:5px;
border:1px solid transparent;
background:{color:sidebar background};
color:transparent;
-webkit-transition: 0.8s ease;
transition: 0.8s ease;
-o-transition: 0.8s ease;
-moz-transition: 0.8s ease;
margin-left:-70px;
}

#side:hover #sidebar{
opacity:1;
border:1px solid #ccc;
color:#585858;
position:fixed;
-webkit-transition: 0.8s ease;
transition: 0.8s ease;
-o-transition: 0.8s ease;
-moz-transition: 0.8s ease;
margin-left:-30px;}
.audioplayer{
margin-top:5px;
margin-bottom:25px;
margin-left:10px;
opacity: 0.7;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
width:28px;
height:28px;
overflow:hidden;
}

#sidebar img{
max-width:150px;
}

#desc{
}

.title{
    width:250px;
padding:2px;
text-transform:lowercase;
{select:Title Font}}

.title a{
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-o-transition: 0.3s ease;
-moz-transition: 0.3s ease;
color:{color:title};
}

.title a:hover{
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-o-transition: 0.3s ease;
-moz-transition: 0.3s ease;
color:{color:title hover};
}

.links{
 text-transform:uppercase;
font-family:consolas;
font-size:9px;
letter-spacing:1px;}

.links a{
}

i, em{
color:{color:link};}
b, strong{
font-weight:normal;
text-transform:uppercase;
color:{color:link};}
ul,ol{
margin:0px;
margin-left:-5px;}
p{
padding:0px;
margin:2px;}



#credit {
position:fixed;
font-family:consolas;
font-size:10px;
bottom:10px;
z-index:999999999999;
right:10px;
text-transform:uppercase;
}


blockquote{
padding:3px;
border-left:1px solid #e1e1e1;
margin-left:10px;
line-height:10px;
}

{block:IndexPage}
blockquote img{
width:100px;
overflow:hidden;
}
{/block:IndexPage}
{block:PermalinkPage}
blockquote img{
width:200px;
overflow:hidden;
}
{/block:PermalinkPage}

.text{
text-decoration:bold;
font-size:12px;
text-transform:uppercase;
}

#questions img{
float:left;
padding:2px;
}

#questions a{
font-size:9px;
letter-spacing:1px;
text-transform:uppercase;
}

#questions {
padding:4px;
border-radius:6px;
min-height:28px;
font-weight: bold;
border-bottom:1px solid #ccc;
background:{color:questions};
}

#questions img{
border-radius:6px;
}

 .player{
margin-left:110px;
margin-top:25px;
position:absolute;
padding:2px;
max-width:135px;
padding:2px;
font-size:9px;
text-transform:uppercase;
z-index:999999;
{block:PermalinkPage}
margin-top:0px;
{/block:PermalinkPage}
}

.audioplayer{
margin-top:20px;
margin-left:20px;
opacity:.7;
width:27px;
height:27px;
border-radius:30px;
overflow:hidden;
z-index:99999999;
background:#fff;
padding:15px;
}

#cover{
width:100px;
background:#eee;
position:absolute;
height:100px;
display:inline-block;
float:left;
{block:PermalinkPage}
margin-top:-20px;
{/block:PermalinkPage}
}

#cover img{
width:100px;
height:100px;
{block:PermalinkPage}
margin-top:0px;
{/block:PermalinkPage}
}

.playbutton {
width:30px;
height:20px;
overflow:hidden;
position:relative;
z-index:1000;
margin:0px;}

</style>

</head>
<body>

<div id="side"><div class="title"><a href="/">{Title}</a></div>
<div id="sidebar">
<img src="{image:Sidebar}">
<div class="links">
<a href="/">{text:home title}</a>
<a href="/ask">{text:ask title}</a>
{block:IfLinkOne}
<option value="{text:link 1}">{text:link 1 title}</a>
{/block:IfLinkOne}
{block:IfLinkTwo}
<option value="{text:link 2}">{text:link 2 title}</a>
{/block:IfLinkTwo}
{block:IfLinkThree}
<option value="{text:link 3}">{text:link 3 title}</a>
{/block:IfLinkThree}
{block:IfLinkFour}
<option value="{text:link 4}">{text:link 4 title}</a>
{/block:IfLinkFour}
{block:IfLinkFive}
<option value="{text:link 5}">{text:link 5 title}</a>
{/block:IfLinkFive}
{block:IfLinkSix}
<option value="{text:link 6}">{text:link 6 title}</a>
{/block:IfLinkSix}
<!---PLEASE DO NOT REMOVE/CHANGE THIS AT ALL--->
<a href="http://fluorescent-themes.tumblr.com/">theme</a>
<!---PLEASE DO NOT REMOVE/CHANGE THIS AT ALL--->
</div><div id="desc">{Description}</div></div>
</div>

<div id="entries">


{block:Posts}


{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}

<div id="post">


{block:Photo}
{block:IndexPage}
<div class="perma">
<a href="{ReblogURL}">reblog</a> with
<a href="{Permalink}">{NoteCountWithLabel}</a>
</div>
<a href="{permalink}"><img src="{PhotoURL-250}"/></a>
{/block:IndexPage}
{block:PermalinkPage}
<a href="{permalink}"><img src="{PhotoURL-500}"/></a>
{/block:PermalinkPage}
{/block:Photo}



{block:Photoset}
{block:IndexPage}
<div class="perma">
<a href="{ReblogURL}">reblog</a> with
<a href="{Permalink}">{NoteCountWithLabel}</a>
</div>
{Photoset-250}

{/block:IndexPage}
{block:PermalinkPage}
{Photoset-500}
{/block:PermalinkPage}
{/block:Photoset}

{block:Video}
{block:IndexPage}<div class="perma">
<a href="{ReblogURL}">reblog</a> with
<a href="{Permalink}">{NoteCountWithLabel}</a>
</div>
{Video-250}

{/block:IndexPage}
{block:PermalinkPage}
{Video-500}
{/block:PermalinkPage}
{/block:Video}


{block:Text}
<div class="perma">
<a href="{ReblogURL}">reblog</a> with
<a href="{Permalink}">{NoteCountWithLabel}</a>
</div>
<div class="text">{Title}</div>{Body}

{/block:Text}


{block:Link}
<div class="perma">
<a href="{ReblogURL}">reblog</a> with
<a href="{Permalink}">{NoteCountWithLabel}</a>
</div>
<div class="text" style="background:#eee; padding:2px; letter-spacing:1px; text-decoration:underline;"><a href="{URL}">{Name} →</a></div>
{block:Description}{Description}{/block:Description}

{/block:Link}


{block:Quote}
<div class="perma">
<a href="{ReblogURL}">reblog</a> with
<a href="{Permalink}">{NoteCountWithLabel}</a>
</div>
<div class="text">"{Quote}"</div>
{block:Source}-{Source}{/block:Source}

{/block:Quote}


{block:Chat}
<div class="perma">
<a href="{ReblogURL}">reblog</a> with
<a href="{Permalink}">{NoteCountWithLabel}</a>
</div>
{block:Lines}
{block:Label}<br>
<div class="text" div style="font-size:9px; padding:2px; background:#eee;">{Label}
{/block:Label}
&nbsp;{Line}</div>
{/block:Lines}

{/block:Chat}


{block:Audio}
<div class="perma">
<a href="{ReblogURL}">reblog</a> with
<a href="{Permalink}">{NoteCountWithLabel}</a>
</div>
<div class="player">{block:TrackName}{TrackName}{/block:TrackName}<br>
{block:Artist}by {Artist}{/block:Artist}<br>
{block:PlayCount}{PlayCount} plays{/block:PlayCount}
</div>
<div id="cover">
{block:AlbumArt}
<img src="{AlbumArtURL}">
{/block:AlbumArt}</div>
<div class="audioplayer"><div class="playbutton">
{AudioPlayerWhite}</div></div><br><br>

{/block:Audio}



{block:Answer}
<div class="perma">
<a href="{ReblogURL}">reblog</a> with
<a href="{Permalink}">{NoteCountWithLabel}</a>
</div>
<div id="questions">
<img src="{AskerPortraitURL-24}">{Asker}: {Question}</div>
{Answer}

{/block:Answer}

{block:PermalinkPage}<div id="n">
<br>
{block:Tags}<a href="/tagged/{Tag}"> #{Tag} </a>{/block:Tags}
<br>
{block:Date}{TimeAgo}{/block:Date}
{block:NoteCount}
{NoteCountWithLabel}
{/block:NoteCount}
<br>
{block:Caption}
{Caption}
{/block:Caption}
<br>
{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
{/block:PermalinkPage}
</div>
{/block:Posts}
</div>




{block:IndexPage}
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}"></a>
{/block:NextPage}
{block:PreviousPage}
<a href="{PreviousPage}"></a>
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}

</div>
<!---PLEASE DO NOT REMOVE/CHANGE THIS AT ALL--->
<div id="credit"><a href="http://fluorescent-themes.tumblr.com">credit</a></div>
<!---PLEASE DO NOT REMOVE/CHANGE THIS AT ALL--->
</div>
</body>
</html>