Theme #4 Rapunzel

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--



CODE BY SLYYTHERINSAM



Don't remove the credit, use as a base, steal parts of code, or redistribute as your own!!!!

If you have any questions about the code, please ask me!!

Best used with Chrome
-->



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" 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:Background" content="#ffffff"/>
<meta name="color:Text" content="#292929"/>
<meta name="color:Link" content="#8c2372"/>
<meta name="color:Hover" content="#ebc8d7"/>
<meta name="color:questions" content="#eeeeee" />
<meta name="color:info border" content="#eeeee" />
<meta name="color:sidebar links bg" content="#b5509c" />
<meta name="image:sidebar" content=""/>
<meta name="text:Link 1" content="/" />
<meta name="text:Link 1 Text" content="Title" />
<meta name="text:Link 2" content="/" />
<meta name="text:Link 2 Text" content="Title" />
<meta name="text:Link 3" content="/" />
<meta name="text:Link 3 Text" content="Title" />
<meta name="text:Link 4" content="/" />
<meta name="text:Link 4 Text" content="Title" />
<meta name="text:Link 5" content="/" />
<meta name="text:Link 5 Text" content="Title" />
<meta name="text:Link 6" content="/" />
<meta name="text:Link 6 Text" content="Title" />
<meta name="text:Link 7" content="/" />
<meta name="text:Link 7 Text" content="Title" />
<meta name="text:Link 8" content="/" />
<meta name="text:Link 8 Text" content="Title" />
<meta name="color:scrollbarbg" content="ffffff"/>
<meta name="color:scrollbar" content="#2b1222" />
<meta name="if:Extra Links" content="0" />

 <!--Link for the special fonts -->
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Dancing+Script' rel='stylesheet' type='text/css'>

<!-- tooltip script -->
<link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/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>



<style type="text/css">

/*Changes color of tumblr controls*/
iframe#tumblr_controls {
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
    filter: invert(100%);
}

/* Fancy cursor */
*, body, a {cursor: url('http://38.media.tumblr.com/tumblr_lqs4qoKE1V1qfoi4t.png'), auto;}


/*Tooltip style*/
#s-m-t-tooltip {
    max-width:200px;
    position:absolute;
    z-index:9999999999999999;
    margin-top:20px;
    padding:1px 2px 1px 2px;
    background-color:{color:Background};
    font-family:'Josefin Sans', calibri;
    font-size:11px;
    letter-spacing:1px;
    text-transform:lowercase;
    color:{color:scrollbar};
    border:1px solid {color:scrollbar};
    border-radius:0px;
    box-shadow: 0px 0px 0px 0px;
}


/*Fancy Scrollbar*/
::-webkit-scrollbar {width: 3px;height: 3px;background:{color:scrollbarbg};}
::-webkit-scrollbar-thumb {background-color:{color:scrollbar};}

::selection {color: #5959ab; background: #eed; }::-moz-selection {color: #fff; background: #000; }::-webkit-selection {color: #fff; background: #000; }



/* --- BODY ---*/

body {
    background:{color:background} url({image:bg}) repeat right top fixed;
    margin:0px;
    color:{color:text};
    font-family:'Josefin Sans', calibri;
    font-size:12px;
    line-height:100%;
}

a {
    text-decoration:none;
    outline:none;
    -moz-outline-style:none;
    color:{color:link};
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

img {
    border:none;
}

blockquote {
    padding-left:10px;
    border-left:1px solid;
    border-color:{color:info border};
    margin:10px;
}

blockquote blockquote {
    padding-left:3px;
    border-left:1px solid;
    border-color:{color:info border};
}

h1 {
    font-size:14px;
}

a:hover {
    opacity:10;
    color:{color:hover};
     -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

/* --- POST ENTRIES ---*/


#entries {
    padding:10px;
    width:500px;
    margin-left:530px;
    margin-top:40px;
    margin-bottom:25px;

}

/* --- BODY: POSTS ---*/


#post {
    width:500px;
    padding-bottom:20px;
    padding:10px;
    margin-top:15px;
    background-color:{color:bg};
}

/* --- SIDEBAR IMAGE ---*/


#sidebar {
    width:200px;
    position:fixed;
    margin-left:210px;
    margin-top:100px;
    background-color:{color:bg};
}

#sidebarimage {
    width 200px;
    margin-bottom:-15px;
}

#sidebarimage img {
    width:200px;
    padding:6px;
    background-color:{color:bg};
}

#title {
    width:195px;
    height:auto;
    font-family: 'Dancing Script', cambria;
    padding:9px;
    font-size:23px;
    text-align:center;
    color:{color:sidebar links bg};
    line-height:100%;
}

/* --- SIDEBAR LINKS ---*/

.links {
    width:200px;
    padding: 6px;
    text-align:center;
    margin-top:14px;
    margin-left:auto;
    margin-right:auto;
    opacity:1;
    text-transform:uppercase;
    word-spacing:2px;
    position:fixed;
    line-height:150%;
}

.linkity {
    background-color:{color:sidebar links bg};
    border:1px solid {color:sidebar links bg};
    border-radius:50%;
    width:10px;
    height:10px;
    display:inline-block;
    margin-right:2px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.linkity:hover {
    background-color:{color:Background};
    border-color:#ccc;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

/* --- SECOND ROW SIDEBAR LINKS ---*/

{block:IfExtraLinks}
#sublinks {
    opacity:0;
    width:200px;
    padding:6px;
    text-align:center;
    margin-top:35px;
    margin-left:auto;
    margin-right:auto;
    position:fixed;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

#sidebar:hover #sublinks {
    opacity:1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.sublinkity {
    background-color:{color:sidebar links bg};
    border:1px solid {color:sidebar links bg};
    width:8px;
    height:8px;
    display:inline-block;
    margin-right:2px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.sublinkity:hover {
    background-color:{color:Background};
    border-color:#ccc;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
{/block:IfExtraLinks}

/* --- DESCRIPTION ---*/

#description {
    position:fixed;
    line-height:120%;
    font-size:9px;
    letter-spacing:1px;
    width:200px;
    margin-top:35px;
    padding:5px;
    margin-left:0px;
    text-align:center;
    color:{color:text};
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

{block:IfExtraLinks}
#sidebar:hover #description {
    margin-top:60px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
{/block:IfExtraLinks}

/* --- PAGINATION---*/


#pagination {
    width:200px;
    font-size:12px;
    text-align:center;
    position:fixed;
    font-family:consolas;
    letter-spacing:0px;
    padding:5px;
    margin-top:85px;
    height:18px;
    z-index:9999999;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

{block:IfExtraLinks}
#sidebar:hover #pagination {
    margin-top:110px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
{/block:IfExtraLinks}

#pagination a {
    padding:3px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

#pagination a:hover {
    background-color:{color:sidebar links bg};
    color:{color:Background};
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

/* --- POST INFO ---*/

#info {
    text-transform:uppercase;
    display:block;
    padding:10px;
    text-align:center;
    font-size:9px;
    margin-top:0px;
    margin-bottom:40px;
    margin-left:0px;
    width:500px;
    border-bottom:1px solid {color:info border};
    border-right:1px solid {color:info border};
    box-shadow:2px 2px 2px {color:info border};
}



/* --- POST TAGS---*/

#tags {
    text-transform:lowercase;
    font-size:11px;
    margin-top:4px;
}

#tags a {
    display:inline-block;
    color:{color:Link};
    padding:-3px;
    margin-right:5px;
    -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;
}

#tags a:hover {
    color:{color:Hover};
    -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;
}


/* --- QUESTIONS ---*/

.question {
    display:block;
    padding-bottom:20px;
    border-bottom:1px solid {color:questions};
}

#asker {
    padding:5px;
    font-size:9px;
    letter-spacing:1px;
    text-align:left;
    margin-left:10px;
}

.askerportrait {
    width:40px;
    float:left;
    border:3px double {color:questions};
    margin-left:5px;
    margin-top:3px;
    margin-right:5px;
}

/*Quotes*/

.quote {
    font-size:14px;
    padding-bottom:5px;
    text-align:center;
    text-transform:uppercase;
    line-height:120%;
    letter-spacing:1px;
}

.source {
    font-size:10px;
    text-align:center;
    padding-bottom:5px;
}

/*audio*/

.buttontwo {
position: relative;
width: 40px;
height: 50px;
overflow: hidden;
}

.playerbuttonmargins {
margin-top: 10px;
margin-left: 20px;
}

.tumblr_audio_player {
border: none;
padding: 0px;
margin: 0px;
height: 50px;
width: 500px;
}

.buttonbackground {
position: absolute;
left: 15px;
top: 5px;
width: 68px;
height: 68px;
background-color: #e4e4e4;
padding: 10px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
opacity: 0;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
transition: opacity .7s ease-in-out;
-moz-transition: opacity .7s ease-in-out;
-webkit-transition: opacity .7s ease-in-out;
}

.buttonbackground:hover {
opacity: 1;
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
}

.audioalbumart {
position: absolute;
left: 5px;
top: -5px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 0px;
overflow: hidden;
width: 88px;
height: 88px;
border:10px solid {color:questions};
}

.audioalbumart img {
width: 100%;
height: auto;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 0px;
}

.trackinfo {
width: 345px;
letter-spacing:1px;
font-size:9px;
display:inline-block;
margin-left: 110px;
height: 68px;
padding: 20px 20px 20px 30px;
margin-top:-5px;
line-height:220%;
text-transform:uppercase;
background-color:{color:questions};
}

.audiobox {
position: relative;
display:inline-block;
}

/*Chat*/
.chat {
line-height:160%;
list-style:none;
}

.line.odd {
margin-bottom:2px;
padding:5px;
list-style:none;
color:{color:link};
}

.line.even {
margin-bottom:2px;
padding:5px;
list-style:none;
}

.label {
padding-right:1px;
text-transform:uppercase;
font-weight:bold;
}


/* --- THIS IS THE CREDIT. BE A DECENT PERSON AND LEAVE IT ALONE PLEASE AND THANK YOU ---*/
#gaston {
    position:fixed;
    bottom:3px;
    right:3px;
    font-size:9px;
    letter-spacing:1px;
    color:#000;
    z-index:9999999;
}



{CustomCSS}</style></head><body>


<div id="sidebar">
<div id="title">{Title}</div>
<div id="sidebarimage"><img src="{image:sidebar}"></div>
<div id="description">
{Description}
</div>


<div class="links">
<a href="{text:Link 1}" title="{text:Link 1 Text}"><div class="linkity"></div></a>
<a href="{text:Link 2}" title="{text:Link 2 Text}"><div class="linkity"></div></a>
<a href="{text:Link 3}" title="{text:Link 3 Text}"><div class="linkity"></div></a>
</div>
{block:IfExtraLinks}
<div id="sublinks">
<a href="{text:Link 4}" title="{text:Link 4 Text}"><div class="sublinkity"></div></a>
<a href="{text:Link 5}" title="{text:Link 5 Text}"><div class="sublinkity"></div></a>
<a href="{text:Link 6}" title="{text:Link 6 Text}"><div class="sublinkity"></div></a>
<a href="{text:Link 7}" title="{text:Link 7 Text}"><div class="sublinkity"></div></a>
<a href="{text:Link 8}" title="{text:Link 8 Text}"><div class="sublinkity"></div></a>
</div>
{/block:IfExtraLinks}


{block:Pagination}<div id="pagination">
{block:PreviousPage}<a href="{PreviousPage}">&larr;</a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}">&rarr;</a>{/block:NextPage}
</div>{/block:Pagination}

</div>

<div id="entries">{block:Posts}<div id="post">

{block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}

{block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}

{block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}

{block:Quote}<div class="quote">"{Quote}"</div>
<div class="source">-{Source}</div>{/block:Quote}

{block:Link}<h1><a href="{URL}" {Target}>{Name} &rarr;</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}

{block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title} <div class="chat"> {block:Lines} <li class="line {Alt}"> {block:Label} <span class="label"> {Label}</span> {/block:Label}{Line}</li> {/block:Lines}</div>{/block:Chat}

{block:Audio}{block:AudioPlayer}
<div class="audiobox">
{block:AlbumArt}
<div class="audioalbumart"><img src="{AlbumArtURL}"></div>
{/block:AlbumArt}
<div class="buttonbackground"><div class="buttontwo"><div class="playerbuttonmargins">{AudioPlayerGrey}
</div></div></div>
<div class="trackinfo">
{block:TrackName}<span style="border-bottom:1px solid #eeeeee; padding-bottom:5px;"><b>{TrackName}</b></span>{/block:TrackName}</br>
{block:Artist}<p>{Artist}{/block:Artist}<br/>
{FormattedPlayCount} PLAYS</div></div></p>
{/block:AudioPlayer}</span>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Audio}

{block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}

{block:Answer}
<div class="question">
<img class="askerportrait" src="{AskerPortraitURL-40}">
<div id="asker"><span style="font-size:14px;display:block;padding-bottom:5px;font-weight:bold;"> {Asker} asked: </span>{Question}</div>
</div>
{Answer}{/block:Answer}


{block:IndexPage}
<div id="info">
{block:Date}<a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} {ShortYear}</a>{/block:Date} &nbsp; <a href="{Permalink}">
{NoteCountWithLabel}</a>
{block:RebloggedFrom}<br><a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>&nbsp;&nbsp;<a href="{ReblogRootURL}" title="{ReblogRootName}">src</a>{/block:RebloggedFrom}<br>{block:HasTags}<div id="tags">{block:Tags} +<a href="{TagURL}" title="Posts tagged: {Tag}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
</div>
{/block:IndexPage}

{block:PermalinkPage}
<div id="info">
{block:Date}<a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} {ShortYear}</a>{/block:Date} &nbsp; <a href="{Permalink}">
{NoteCountWithLabel}</a>{block:RebloggedFrom}<br>via: <a href="{ReblogParentURL}"
title="{ReblogParentTitle}">{ReblogParentName}</a> source: <a href="{ReblogRootURL}"title="{ReblogRoottitle}">{ReblogRootName}</a>{/block:RebloggedFrom}<br> {block:HasTags}<div id="tags">{block:Tags} +<a href="{TagURL}" title="Posts tagged: {Tag}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
</div>
{/block:PermalinkPage}


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




<!--AGAIN WITH THE LEAVING THE CREDIT ALONE, THANKS -->
<a id="gaston" href="http://slyytherinsam.tumblr.com/" title="code by slyytherinsam">cheyenne</a>

</body></html>