T10 - JUKEBOX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!--

THEME #10 JUKEBOX
BY ZUVIA @ TUMBLR

-->

<html>

<title>{title}</title>
<link rel="shortcut icon" href="{Favicon}">

<meta name="color:background" content="#ffffff" />
<meta name="color:entry" content="#cccccc" />
<meta name="color:entry text" content="#616161" />
<meta name="color:entries bold" content="#000000" />
<meta name="color:entries italic" content="#aeaeae" />
<meta name="color:sidebar" content="#cccccc" />
<meta name="color:sidebar text" content="#999999" />
<meta name="color:link" content="#ffffff" />
<meta name="color:link hover" content="#ffffff" />
<meta name="color:toplink" content="#ffffff" />
<meta name="color:toplink hover" content="#000000" />
<meta name="color:toplink bg" content="#999999" />
<meta name="color:toplink bg hover" content="#cccccc" />
<meta name="color:side link" content="#000000" />
<meta name="color:side link hover" content="#cccccc" />
<meta name="color:side link bg" content="#ffffff" />
<meta name="color:top border" content="#cccccc" />
<meta name="color:bottom border" content="#cccccc" />
<meta name="color:blogtitle" content="#000000" />
<meta name="color:perma bg" content="#aeaeae" />
<meta name="color:perma link" content="#000000" />
<meta name="color:nextpage arrow" content="#000000" />
<meta name="color:nextpage arrow hover" content="#aeaeae" />
<meta name="color:nextpage arrow bg" content="#aeaeae" />
<meta name="color:ask bg" content="#ffffff" />
<meta name="color:asker border" content="#cccccc" />
<meta name="color:scrollbar face" content="#cccccc" />
<meta name="color:scrollbar bg" content="#ffffff" />

<meta name="image:background" content="" />
<meta name="image:left image" content="" />
<meta name="image:right image" content="" />

<meta name="text:Blogtitle" content="" />
<meta name="text:Music" content"" />

<meta name="text:Link1" content="" />
<meta name="text:Link1URL" content="" />
<meta name="text:Link2" content="" />
<meta name="text:Link2URL" content="" />
<meta name="text:Link3" content="" />
<meta name="text:Link3URL" content="" />
<meta name="text:Link4" content="" />
<meta name="text:Link4URL" content="" />
<meta name="text:Link5" content="" />
<meta name="text:Link5URL" content="" />

<meta name="if:LeftImage" content="1" />
<meta name="if:RightImage" content="1" />
<meta name="if:ShowCaptions" content="0" />
<meta name="if:FadingImages" content="1" />
<meta name="if:InfiniteScroll" content="0" />
<meta name="if:Bigger Posts" content="0" />
<meta name="if:ShowTags" content="1" />
<meta name="if:Links" content="1" />
<meta name="if:MusicPlayer" content="0" />

<head>
<link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>

<style type="text/css">

body {
background-color:{color:background};
background-image: url('{image:Background}');
background-attachment:fixed;
font-family:georgia;
font-size:10px;
line-height:14px;
text-align:justify;}

::-webkit-scrollbar-thumb:vertical {
background-color: {color:scrollbar face};
height: 30px;}

::-webkit-scrollbar {
height: 30px;
width: 4px;
background-color: {color:scrollbar bg};}

#posts {
width:415px;
margin-left:452px;
margin-top:125px;
padding-top:40px;
background-color:{color:background};
{block:IfBiggerPosts}width:515px;{/block:IfBiggerPosts}
padding-left:8px;
padding-right:8px;
z-index:9;
background-attachment:fixed;}

.post {
{block:IfNotBiggerPosts}width:410px;{/block:IfNotBiggerPosts}
{block:IfBiggerPosts}width:510px;{/block:IfBiggerPosts}
}


.entries {
color:{color:entry text};
overflow:hidden;
background-color:{color:entry};
{block:IfBiggerPosts}width:500px;{/block:IfBiggerPosts}
{block:IfNotBiggerPosts}width:400px;{/block:IfNotBiggerPosts}
margin-bottom:10px;
position:relative;
z-index:6;
text-align:justify;
line-height:13px;
font-size:10px;
font-family: georgia;
border: 8px solid {color:entry};
}


.entries blockquote {
border-left: 3px solid {color:link};
padding-left: 8px;
margin-left: 10px;
}

.entries b, strong{
color: {color:entries bold};}

.entries i, em{
color:{color:entries italic};}

.entries a{
color:{color:link};
text-decoration:none;
text-transform:uppercase;
font-family: 'Economica', sans-serif;
letter-spacing:1px;
}

.entries a:hover {
color:{color:link hover};
text-decoration:none;
}

.entries h1 {
font-family: 'Economica', sans-serif;
font-size:16px;
letter-spacing:2px;
border-bottom:1px solid {color:link};
text-align:center;
padding-bottom:8px;
}

.entries h2 {
font-family: arial;
font-size:15px;
font-weight:normal;
padding-left:10px;
padding-right:10px;
letter-spacing:3px;
text-align:left;
padding-bottom:4px;
margin-top:-5px;
margin-left:10px;
border-left: 0px solid {color:post underline};
}

.entries h3 {
font-family: georgia;
font-size:15px;
letter-spacing:3px;
line-height:12px;
text-align:left;
padding-bottom:4px;
margin-left:6px;
padding-top:3px;
padding-left:10px;}

.entries img {
{block:IfNotBiggerPosts}max-width:400px;{/block:IfNotBiggerPosts}
{block:IfBiggerPosts}max-width:500px;{/block:IfBiggerPosts}
{block:IfFadingImages}opacity:.7;{/block:IfFadingImages}
{block:IfNotFadingImages}opacity:1;{/block:IfNotFadingImages}
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

.entries img:hover{
{block:IfFadingImages}opacity:1;{/block:IfFadingImages}
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

.post:hover .perma{
opacity:1;
bottom:0px;}

.ask {
padding-left:6px;
padding-top:6px;
padding-bottom:8px;
padding-right:11px;
border-bottom: 1px solid {color:asker border};
background-color:{color:ask bg};
padding-bottom:4px;}

.ask a {
letter-spacing:1px;}


.chat{
padding-top:5px;
margin-left:5px;
padding-left:6px;
line-height:14px;}


.audio{
background: #000;
display:block;
margin-bottom:0px;}

{block:IfFadingImages}
.photo {
opacity:.7;
border-radius: 0px 0px 30px 30px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

.photo:hover{
opacity: 1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
{/block:IfFadingImages}

.quote {
font-size:32px;
margin-left:5px;
margin-bottom:-15px;
margin-top:13px;
letter-spacing:1px;
font-family:georgia;
}

.perma{
left:0px;
bottom:-10px;
{block:IfBiggerPosts}width:516px;{/block:IfBiggerPosts}
{block:IfNotBiggerPosts}width:416px;{/block:IfNotBiggerPosts}
font-family: consolas;
font-size: 9px;
position:absolute;
padding-bottom:5px;
padding-top:5px;
background-color: {color:perma bg};
line-height:8px;
color: {color:entry text};
text-transform: uppercase;
text-align: center;
opacity:0;
z-index:9;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

.perma a{
color: {color:perma link};
font-family:consolas;
font-size:9px;
letter-spacing:1px;
text-transform:uppercase;
text-decoration:none;
}

.perma a:hover{
color: {color:link hover};
}

{block:PermalinkPage}
.permalink {
{block:IfBiggerPosts}width:516px;{/block:IfBiggerPosts}
{block:IfNotBiggerPosts}width:416px;{/block:IfNotBiggerPosts}
text-align: left;
margin-left:-10px;
margin-top:-10px;
padding-left:10px;
padding-bottom:10px;
font-size:10px;
line-height:11px;
letter-spacing:1px;
font-family:georgia;
text-align:center;
color: {color:entry text};
text-transform: uppercase;
position: relative;
}
{/block:PermalinkPage}

.permalink a {
color: {color:perma link};
text-decoration: none;
font-family:consolas;
text-transform:uppercase;
letter-spacing:1px;
font-size:10px;
}

.permalink a:hover {
color: {color:link hover};
text-decoration: none;
}

ol.notes {
padding-left:10px;
font-family:consolas;
font-size:9px;
padding-top:10px;
margin-top:-10px;
text-transform:uppercase;
letter-spacing:1px;
background-color:{color:entry};
letter-spacing: 0px;
border: 0px;
list-style-type: none;
}

ol.notes li.note {
padding: 1px;
letter-spacing: 0px;
text-align: left;
}

ol.notes li.note a{
color:{color:link};}

#pages {
margin-top:20px;
width:200px;
position:fixed;
z-index:99;
text-align:right;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#pages a{
color:{color:nextpage arrow};
background-color: {color:nextpage arrow bg};
font-family:impact;
font-size:14px;
text-align:center;
text-decoration:none;
padding-left:5px;
padding-right:5px;
margin-left:-2px;
padding-top:2px;
padding-bottom:5px;
height:12px;
padding-left:5px;}

#pages a:hover{
color:{color:nextpage arrow hover};}

iframe#tumblr_controls {
position: fixed !important;
right:2px !important;
-moz-transition: all 0.8s ease-out;
-webkit-transition: opacity 0.8s linear;
-webkit-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
opacity: 0.5;}

iframe#tumblr_controls:hover {
-webkit-transition: opacity 0.4s linear;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
opacity: 1;}

#fill{
margin-top:80px;
position:fixed;
background-color{color:sidebar};
left:450px;
z-index:9;}

#top{
background-color:{color:background};
background-image: url('{image:Background}');
background-attachment:fixed;
height:75px;
width:440px;
{block:IfBiggerPosts}
width:540px;
{/block:IfBiggerPosts}
position:fixed;
top:-5px;
left:455px;
z-index:99;}

#sidebar {
margin-top:-135px;
text-align:center;
margin-left:-8px;
padding-left:5px;
padding-right:5px;
width:440px;
{block:IfBiggerPosts}
width:540px;
{/block:IfBiggerPosts}
border-bottom:10px solid {color:bottom border};
border-top:10px solid {color:top border};
border-right:10px solid {color:top border};
border-left:10px solid {color:bottom border};
background-color:{color:sidebar};}

{block:IfLeftImage}
#left{
position:fixed;
margin-left:-140px;
margin-top:-170px;}

#left img{
height:150px;
width:150px;
border-radius:200px;}
{/block:IfLeftImage}

{block:IfRightImage}
#right{
position:fixed;
margin-left:440px;
{block:IfBiggerPosts}
margin-left:540px;
{/block:IfBiggerPosts}
margin-top:-170px;}

#right img{
height:150px;
width:150px;
border-radius:200px;}
{/block:IfRightImage}


#tea{
width:450px;
{block:IfBiggerPosts}
width:550px;
{/block:IfBiggerPosts}
margin-left:-10px;
padding-top:10px;
padding-bottom:8px;}

#tea a{
display:inline-block;
color:{color:toplink};
background-color:{color:toplink bg};
padding-top:10px;
width:70px;
margin-left:10px;
text-decoration:none;
text-transform:uppercase;
padding-left:10px;
padding-bottom:10px;
padding-right:10px;
text-align:center;
letter-spacing:1px;
font-family:consolas;
font-size:9px;
transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;}

#tea a:hover{
color:{color:toplink hover};
background-color:{color:toplink bg hover};}

#desc{
width:200px;
position:fixed;
padding-left:6px;
padding-right:6px;
margin-left:-250px;
padding-top:10px;
padding-bottom:10px;
margin-top:5px;
text-align:center;
line-height:13px;
font-family:georgia;
border-right: 5px solid {color:top border};
background-color:{color:sidebar};
font-size:9px;
opacity:1;
color:{color:sidebar text};}

#desc a{
text-decoration:none;
color:{color:link};}

#desc h1{
color:{color:blogtitle};
font-family: 'Economica', sans-serif;
text-transform:uppercase;
margin-top:-28px;
margin-left:-8px;
text-align:left;
opacity:.9;
letter-spacing:-1px;
font-size:23px;}


#ell{
position:fixed;
margin-left:479px;
{block:IfBiggerPosts}
margin-left:570px;
{/block:IfBiggerPosts}
margin-top:5px;
opacity:1;}

#ell a{
display:block;
padding-left:7px;
padding-right:7px;
padding-top:5px;
width:100px;
padding-bottom:5px;
font-family:consolas;
text-transform:uppercase;
font-size:9px;
margin-bottom:5px;
letter-spacing:1px;
border-left: 5px solid {color:bottom border};
text-decoration:none;
color:{color:side link};
background-color:{color:side link bg};
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

#ell a:hover{
border-left:15px solid {color:top border};
color:{color:side link hover};}

{block:IfMusicPlayer}
#lemusic{
text-align:center;
padding-top:2px;
margin-top:-70px;
margin-left:590px;
{block:IfBiggerPosts}
margin-left:635px;
{/block:IfBiggerPosts}
width:150px;
border-radius: 30px 30px 0px 0px;
height:13px;
position:fixed;
z-index:999;
overflow:Hidden;
padding-left:4px;
padding-right:4px;
background-color:{color:top border};
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

#lemusic:hover{
padding-bottom:20px;
margin-top:-90px;}
{/block:IfMusicPlayer}

</style>

{block:IfInfiniteScroll}
<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
{/block:IfInfiniteScroll}

</head>

<body>

<div id="top"></div>

{block:IfMusicPlayer}
<div id="lemusic">
<img src="http://media.tumblr.com/tumblr_ll7wpyHlj71qi6qow.gif"><br>
{block:IndexPage}{text:Music}{/block:IndexPage}
</div>
{/block:IfMusicPlayer}


<div id="fill">
<div id="desc">
<h1>{text:blogtitle}</h1>
{Description}
{block:IfNotInfiniteScroll}
<div id="pages">
{block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}">←</a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}
{/block:Pagination}
</div>
{/block:IfNotInfiniteScroll}
</div>

{block:IfLinks}<div id="ell">
{block:IfLink1}<a href="{text:Link1URL}" class="ell">{text:Link1}</a>{/block:IfLink1}
{block:IfLink2}<a href="{text:Link2URL}" class="ell">{text:Link2}</a>{/block:IfLink2}
{block:IfLink3}<a href="{text:Link3URL}" class="ell">{text:Link3}</a>{/block:IfLink3}
{block:IfLink4}<a href="{text:Link4URL}" class="ell">{text:Link4}</a>{/block:IfLink4}
{block:IfLink5}<a href="{text:Link5URL}" class="ell">{text:Link5}</a>{/block:IfLink5}
</div>
{/block:IfLinks}

{block:IfLeftImage}
<div id="left">
<img src="{image:left image}">
</div>
{/block:IfLeftImage}

{block:IfRightImage}
<div id="right">
<img src="{image:right image}">
</div>
{/block:IfRightImage}

<div id="sidebar">

<div id="tea">
<a href="/" class="tea">home</a>
<a href="/ask" class="tea">message</a>
<a href="/archive" class="tea">archive</a>
<a href="http://zuvia.tumblr.com" class="tea">theme</a>
</div>

</div>
</div>


<div id="posts">

{block:Posts}

<div class="post">

<div class="entries">


{block:Text}
{block:Title}
<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
{Body}
{/block:Text}

{block:Photo}
<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="">{LinkCloseTag}</center>
{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
{block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
{Caption}
{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
{/block:Photo}

{block:Photoset}
{block:IfNotBiggerPosts}<div class="photo">{Photoset-400}</div>{/block:IfNotBiggerPosts}
{block:IfBiggerPosts}<div class="photo">{Photoset-500}</div>{/block:IfBiggerPosts}
{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
{block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
{Caption}{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
{/block:Photoset}

{block:Quote}
<div class="quote">"</div>
<h2>{Quote}</h2>
{block:Source}
<i><p align="right">→ <b>{Source}</b>{/block:Source}</i>
{/block:Quote}

{block:Link}
<h3><a href="{URL}" class="link" {Target}>{Name} </a> </h3>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}<h1>{Title}</h1>{/block:Title}
<div class="chat">{block:Lines}
{block:Label}
<b>{Label}</b>
{/block:Label}
{Line}<br />
{/block:Lines}</div>
{/block:Chat}

{block:Video}
<div class="photo">{block:IfNotBiggerPosts}{Video-400}{block:IfNotBiggerPosts}
{block:IfBiggerPosts}{Video-500}{/block:IfBiggerPosts}</div>
<center><i>{FormattedPlayCount}</i> plays</center><br />
{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
{block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
{Caption}
{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
{/block:Video}

{block:Audio}
<div class="audio">{AudioPlayerBlack}</div>
{block:IfShowCaptions}{block:Caption}<br />{Caption}{/block:Caption}{/block:IfShowCaptions}
{block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}<br />
{Caption}
{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
{/block:Audio}

{block:Answer}
<div class="ask"> {Asker} <b>sent:</b> {Question}</div><br>
<div class="answer">{Answer}</div>
{/block:Answer}

{block:IndexPage}
<div class="perma">
{block:Date} <a href="{Permalink}">{TimeAgo}</a>{/block:Date}{block:NoteCount} | <a href="{Permalink}">{NoteCount}</a>{/block:NoteCount} </br>
{block:IfShowTags}{block:HasTags}tags: {block:Tags}
<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}{/block:IfShowTags}
</div>
{/block:IndexPage}

</div>

</div>

{block:PermalinkPage}

<div class="permalink">
<div style="font-size: 9px;
padding-right:20px;
margin-top:-10px;
padding-bottom:10px;
margin-bottom:4px;
padding-top:5px;
line-height:10px;
color: {color:entry text};
text-transform: uppercase;
text-align: center;">
{block:RebloggedFrom}
<b>origin:</b> <a href="{ReblogRootURL}">{ReblogRootName}</a> // <b>via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}<br>
{block:HasTags}tags: {block:Tags}
<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}</div>
{block:PostNotes}
{PostNotes}
{/block:PostNotes}
</div>

{/block:PermalinkPage}

            {/block:Posts}

</div>
</div>

</body>
</html>