T13 - BUBBLEGUM

<!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 #13 BUBBLEGUM
BY ZUVIA @ TUMBLR

-->

<html>

<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:Background" content="#ffffff" />
<meta name="color:Post Wrap" 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:Navig" content="#999999" />
<meta name="color:Navig bg" content="#ffffff" />
<meta name="color:Circle1" content="#cccccc"/>
<meta name="color:Circle2" content="#aeaeae"/>
<meta name="color:Circle3" content="#999999"/>
<meta name="color:Circle4" content="#4D4D4D"/>
<meta name="color:Blogtitle" content="#000000" />
<meta name="color:Blogtitle bg" content="#aeaeae" />
<meta name="color:Link" content="#ffffff" />
<meta name="color:Link hover" content="#ffffff" />
<meta name="color:perma border" content="#000000" />
<meta name="color:scrollbar face" content="#cccccc" />
<meta name="color:scrollbar bg" content="#ffffff" />

<meta name="image:background" content="" />
<meta name="image:sidebar" content="" />

<meta name="text:Blogtitle" 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="font:Body" content="georgia" />

<meta name="if:ShowCaptions" content="0" />
<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" />

<head>

<style type="text/css">

@font-face {
font-family: "economica-regular";
src: url('http://static.tumblr.com/jtqlgf2/EFzm1d5lh/economica-regular.ttf');
}

@font-face {
font-family: "happymonkey-regular";
src: url('http://static.tumblr.com/jtqlgf2/fTPm1d5o2/happymonkey-regular.ttf');
}

body {
background-color:{color:background};
background-image: url('{image:Background}');
background-attachment:fixed;
font-family:{font:body};
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: 8px;
background-color: {color:scrollbar bg};}

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.7s linear;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
opacity: 1;}

#posts {
width:415px;
margin-left:500px;
margin-top:-22px;
{block:IfBiggerPosts}width:515px;{/block:IfBiggerPosts}
padding-left:8px;
padding-right:8px;
padding-top:8px;
background-color: {color:Post Wrap};
background-attachment:fixed;}

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


.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;
font-size:12px;
font-family:{font:body};
padding:8px;
}

.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;
}

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

.entries h1 {
font:normal normal normal 15px "happymonkey-regular", cursive;
letter-spacing:3px;
text-align:center;
line-height:10px;
padding-bottom:4px;
padding-top:4px;
}

.entries h2 {
font:normal normal normal 15px "happymonkey-regular", cursive;
font-size:15px;
font-weight:normal;
padding-left:10px;
padding-right:10px;
letter-spacing:3px;
text-align:left;
padding-bottom:1px;
padding-top:6px;
margin-left:10px;
border-left: 0px solid {color:post underline};
}

.entries h3 {
font:normal normal normal 15px "happymonkey-regular", cursive;
font-size:15px;
letter-spacing:3px;
line-height:12px;
text-align:center;
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}}

.post:hover .letags{
opacity:1;
z-index:999;}

.ask {
padding:8px;
font-style:none;
font-size:14px;
font-family: "economica-regular";
text-transform:uppercase;}

.ask a{
font-family: "economica-regular";
text-transform:uppercase;}

.ask img{
border-radius:100px;}

.answer{
padding-bottom:4px;
padding-left:3px;}

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


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

.cover{
margin-left:0px;}

.cover img{
max-width:50px;
border:8px solid {color:perma border};
float:left;}

.what{
position:relative;
margin-top:5px;
margin-left:70px;
font-style:italic;
border-left: 22px solid {color:perma border};
padding-left:10px;}

#misc{
margin-top:-3px;
line-height:8px;
margin-left:-13px;
font-size:23px;
position:relative;
color:{color:perma border};}

.actualtagsoops{
z-index:1;
margin-top:-15px;
text-align:right;
margin-left:125px;
{block:Ifbiggerposts}width:380px;{/block:ifbiggerposts}
{block:ifnotbiggerposts}width:280px;{/block:ifnotbiggerposts}}

.letags {
z-index:2;
position:relative;
margin-top:-10px;
margin-bottom:10px;
{block:IfBiggerPosts}width:501px;{/block:IFBiggerPosts}
{block:IfNotBiggerPosts}width:401px;{/block:ifnotbiggerposts}
border-top:5px solid {color:perma border};
padding-left:10px;
padding-right:5px;
opacity:1;
font-family:georgia;
text-transform:lowercase;
font-size:10px;
color:{color:entry text};
text-decoration:none;
-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;}

.letags a{
font-family:georgia;
text-transform:lowercase;
font-size:10px;
text-decoration:none;
color:{color:link};}

.letags 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: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;
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};}

ol.notes li.note img.avatar {
    vertical-align: -4px;
    margin-right: 10px;
    width: 0px;
    height: 0px;
}
#cont{
position:fixed;
margin-left:200px;
top:80px;}

#cont2{
position:fixed;}

#sidebar{
padding:8px;
background-color:{color:sidebar};
border-radius: 200px;}

#sidebar img{
width:250px;
height:250px;
border-radius: 200px;}

#info{
position:relative;
font:10px georgia;
color:{color:sidebar text};
margin-left:-250px;
background-color:{color:sidebar};
width:220px;
padding:6px;}

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

#info h1{
margin-left:-6px;
margin-top:-16px;
margin-bottom:0px;
text-align:right;
width:233px;
font-size:24px;
font-family: "economica-regular";
font-weight:normal;
color:{color:blogtitle};
background-color:{color:blogtitle bg};
letter-spacing:2px;}

#sidebar:hover #main{
opacity:.8;
background-color:{color:sidebar};}

#main{
position:fixed;
margin-left:-1px;
margin-top:-1px;
width:240px;
height:250px;
padding:6px;
color:{color:entry};
font-size:44px;
opacity:0;
text-align:center;
border-radius:200px;
z-index:999;
-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;}

#main a{
display:block;
margin-left:35px;
width:150px;
margin-top:80px;
margin-bottom:-70px;
padding:3px 15px 3px 5px;
color:{color:navig};
font: 9px consolas;
text-transform:uppercase;
text-decoration:none;
border-radius:50px;
background-color:{color:navig 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;}

#main a:hover{
background-color:{color:sidebar};
opacity:1;}


#test{
position:fixed;
font-size:44px;
margin-top:18px;
margin-left:12px;
display:block;
color:{color:sidebar};
-webkit-transform: rotate(-43deg);
-moz-transform: rotate(-43deg);	}

#test2{
position:fixed;
font-size:44px;
margin-top:85px;
margin-left:-31px;
display:block;
color:{color:sidebar};
-webkit-transform: rotate(-74deg);
-moz-transform: rotate(-74deg);	}

#test3{
position:fixed;
font-size:44px;
margin-top:157px;
margin-left:-33px;
display:block;
color:{color:sidebar};
-webkit-transform: rotate(-104deg);
-moz-transform: rotate(-104deg);}

#test4{
position:fixed;
font-size:44px;
margin-top:218px;
margin-left:-6px;
display:block;
color:{color:sidebar};
-webkit-transform: rotate(-129deg);
-moz-transform: rotate(-129deg);}

#toplink1{
width:40px;
height:40px;
border-radius:200px;
position:fixed;
background-color:{color:Circle1};
margin-top:-30px;
margin-left:-15px;-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;}

#toplink1:hover{
width:50px;
height:50px;
background-color:{color:circle2};}

#toplink2{
width:40px;
height:40px;
border-radius:200px;
position:fixed;
background-color:{color:Circle2};
margin-top:61px;
margin-left:-75px;
-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;}

#toplink2:hover{
width:50px;
height:50px;
margin-top:58px;
background-color:{color:Circle3};}

#toplink3{
width:40px;
height:40px;
border-radius:200px;
position:fixed;
background-color:{color:Circle3};
margin-top:161px;
margin-left:-75px;-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;}

#toplink3:hover{
width:50px;
height:50px;
margin-top:155px;
background-color:{color:Circle4};}

#toplink4{
width:40px;
height:40px;
border-radius:200px;
position:fixed;
background-color:{color:Circle4};
margin-top:237px;
margin-left:-35px;-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;}

#toplink4:hover{
width:50px;
height:50px;
margin-top:228px;
background-color:{color:Circle1};}

#titles{
position:fixed;
margin-left:270px;
margin-top:20px;
color:{color:blogtitle};
font-size:34px;z-index:99;}

#pages{
position:fixed;
text-align:center;
width:220px;
margin-top:10px;
font-size:16px;}

#pages a{
text-decoration:none;
text-transform:none;
color:{color:link};
font-family:consolas;}


table{
margin-left:-10px;
{block:IfNotBiggerPosts}
width:405px;
{/block:IfNotBiggerPosts}
{block:IfBiggerPosts}
width:505px;
{/block:IfBiggerPosts}}

th{
border:0px solid;
border-collapse:collapse;
padding:2px;
width:50px;}

td{
text-align:right;
border:0px solid;}
{CustomCSS}

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

<div id="cont">
<a title="Home" href="/"><div id="toplink1">
</div></a>
<a title="Ask" href="/ask"><div id="toplink2">
</div></a>
<a title="Archive" href="/archive"><div id="toplink3">
</div></a>
<a title="Theme" href="http://zuvia.tumblr.com"><div id="toplink4">
</div></a>

<div id="test">
▲
</div>
<div id="test2">
▲
</div>
<div id="test3">
▲
</div>
<div id="test4">
▲
</div>
<div id="cont2">
<div id="sidebar">
{block:IfLinks}<div id="main">
{block:ifLink1}<a href="{text:Link1URL}" class="main">{text:Link1}</a>{/block:ifLink1}
{block:ifLink2}<a href="{text:Link2URL}" class="main">{text:Link2}</a>{/block:ifLink2}
{block:ifLink3}<a href="{text:Link3URL}" class="main">{text:Link3}</a>{/block:ifLink3}
{block:ifLink4}<a href="{text:Link4URL}" class="main">{text:Link4}</a>{/block:ifLink4}
</div>{/block:IfLinks}
<img src="{image:sidebar}">
</div>
<div id="titles">
<div id="info">
<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>
</div>
</div>
</div>



<div id="posts">

{block:Posts}

<div id="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="{PhotoAlt}">{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}{Photoset-400}{/block:IfNotBiggerPosts}
{block:IfBiggerPosts}{Photoset-500}{/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}
<h2>{Quote}</h2>
{block:Source}
<i><p align="center">{Source}{/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}
{block:IfNotBiggerPosts}{Video-400}{block:IfNotBiggerPosts}
{block:IfBiggerPosts}{Video-500}{/block:IfBiggerPosts}
<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="cover">{block:AlbumArt}
<img src="{AlbumArtURL}">
{/block:AlbumArt}</div><div class="audio">{AudioPlayerGrey}</div>
<div class="what">
{block:Artist}
{Artist}
{/block:Artist} | {block:TrackName}
"{TrackName}"
{/block:TrackName} </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">
<table>
<tr><td colspan="2" style="padding:8px;border-bottom:1px dotted {color:perma border}; text-align:center;">{Question}</td></tr>
<tr>
<td><img src="{AskerPortraitURL-24}"></td>
<td width="100" style="text-align:left">{Asker}</td>
</tr>
</table></div>
<div class="answer"> {Answer}</div>
{/block:Answer}

</div>

{block:IndexPage}
<div class="letags">
<div id="misc">▼</div>posted: <a href="{permalink}">{TimeAgo}</a> <br>
{block:IfShowTags}{block:HasTags}<div class="actualtagsoops">{block:Tags}
<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IfShowTags}
</div>
{/block:IndexPage}


</div>

{block:PermalinkPage}

<div class="permalink">
<div style="font-size: 9px;
font-family:consolas;
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:Date}Posted {TimeAgo}{/block:Date} {block:NoteCount} | {NoteCount} note(s){/block:NoteCount}<br>
{block:RebloggedFrom}
<b>origin:</b> <a href="{ReblogRootURL}">{ReblogRootName}</a> | <b>via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} <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>