Theme #24

<html>
<head>

<!--
    Theme #24 by ownmylight.tumblr.com
-->

<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:Border" content="#f2f2f2"/>
    <meta name="color:Border Image" content="#ffffff"/>
    <meta name="color:Font" content="#7c7b7b"/>
    <meta name="color:Font On Dark" content="#f1f1f1"/>
    <meta name="color:Link" content="#8a1621"/>
    <meta name="color:Link Bg" content="#f9f9f9"/>
    <meta name="color:Link Hover" content="#141414"/>
    <meta name="color:Navi Bg" content="#151515"/>
    <meta name="color:Navi Font" content="#525151"/>
    <meta name="color:Navi Font Hover" content="#f1f1f1"/>
    <meta name="color:Navi Hover Bg" content="#202020"/>
    <meta name="color:Sidebar Bg" content="#0a0a0a"/>
    <meta name="color:Tag Link Bg" content="#f7f7f7"/>
    <meta name="color:Title" content="#8a1621"/>
    <meta name="image:Sidebar" content=""/>
    <meta name="text:Link 1" content=""/>
    <meta name="text:Link 1 Text" content=""/>
    <meta name="text:Link 2" content=""/>
    <meta name="text:Link 2 Text" content=""/>
    <meta name="text:Link 3" content=""/>
    <meta name="text:Link 3 Text" content=""/>
    <meta name="text:Link 4" content=""/>
    <meta name="text:Link 4 Text" content=""/>
    <meta name="text:Link 5" content=""/>
    <meta name="text:Link 5 Text" content=""/>
    <meta name="if:Show Link 1" content="0"/>
    <meta name="if:Show Link 2" content="0"/>
    <meta name="if:Show Link 3" content="0"/>
    <meta name="if:Show Link 4" content="0"/>
    <meta name="if:Show Link 5" content="0"/>
    <meta name="if:Show Title" content="0"/>

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

    <style type="text/css">

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

iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: 0.9;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}

body {
    font-color: {color:Font};
    font-family: cambria;
    font-size: 10px;
    line-height: 14px;
    background-color: {color:Background};
}

.container {
    width: 775px;
    height: auto;
    margin: -8px auto -8px auto;
    padding: 0 0 0 0;
    padding-left: 50px;

}

strong, b, strong a, strong a:visited, b a, b a:visited {
    font-weight: bold;
    color: {color:Font};
}

i, em {
    font-style: italic;
}

u {
    text-decoration: underline;
}

small, small a, small a:visited {
    font-size: 9px;
    line-height: 0px;
}

a:link, a:visited, a:active {
    color: {color:Link};
    font-weight: normal;
    text-decoration: none;
}

a:hover {
    color: {color:Link Hover};
    background: {color:Link Bg};
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.4s ease-out;
}

ul {
    block: inline;
    list-style-type: square;
}

h1 {
    font-size: 13px;
    font-style: italic;
    font-weight: normal;
    text-transform: lowercase;
}

.title {
    color: {color:Title};
    font-size: 10px;
    font-style: italic;
    text-transform: lowercase;
    text-align: left;
    letter-spacing: 1px;
    border-top: 1px solid {color:Border};
    padding-top: 3px;
    margin-top: 5px;
    width: 155px;
}

.posts {
    color: {color:Font};
    font-size: 10px;
    line-height: 14px;
    margin-top: 37px;
    margin-left: 250px;
    margin-bottom: 35px;
    width: 500px;
}

.caption {
    margin-bottom: -6px;
}

.details {
    color: {color:Font};
    font-size: 10px;
    font-weight: normal;
    text-transform: lowercase;
    text-align: center;
    border-top: 1px solid {color:Border};
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2px;
    margin-top: 5px;
}

.details a {
    color: {color:Link};
    font-weight: normal;
    text-decoration: none;
    -webkit-transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
}

.details a:hover {
    color: {color:Link Hover};
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.details_left {
    float: left;
    color: {color:Font};
    background: {color:Sidebar Bg};
    padding: 4px 5px 4px 5px;
    margin-left: -42px;
}

.details_left a {
    color: {color:Font On Dark};
}

.details_left a:hover {
    color: {color: Title};
    background: transparent;
}

.details_lefttwo {
    float: left;
    color: {color:Font};
    background: {color:Border};
    font-size: 8px;
    padding: 1px;
    margin-top: 23px;
    margin-left: -42px;
}

.reblogs {
    text-align: left;
    margin-top: -14px;
    margin-bottom: -15px;
}

.tags {
    font-size: 9px;
    text-transform: lowercase;
    letter-spacing: 0px;
    margin-top: -2px;
}

.tags a {
    color: {color:Link};
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: -10px;
}

.tags a:hover {
    background: {color:Tag Link Bg};
    -webkit-transition: opacity 0.1s linear;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    transition: all 0.3s ease-out;
    opacity: 1.0;
}

.sidebar_left {
    position: fixed;
    overflow: hidden;
    border-left: 2000px solid {color:Sidebar Bg};
    background: {color:Sidebar Bg};
    margin-left: -2185px;
    margin-top: -30px;
    padding: 5px;
    width: 200px;
    height: 100%;
}

.sidebarcontainer {
    margin-left: 180px;
}

.sidebar {
    position: fixed;
    margin-top: 112px;
    margin-left: -156px;
    width: 150px;
}
.sidebar_left:hover .navigation  {
    -webkit-transition: opacity 0.7s linear;
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
    opacity: 1.0;
}

.sidebartwo {
    position: fixed;
    margin-top: 91px;
    margin-left: 40px;
    width: 150px;
}

.sidebarimage img {
    background: {color:Border Image};
    padding: 17px;
    margin-top: 26px;
    margin-left: -21px;
    margin-bottom: -28px;
    max-width: 150px;
    max-height: 150px;
    min-width: 150px;
}

.description {
    color: {color:Font};
    font-size: 10px;
    line-height: 11px;
    text-align: justify;
    padding-top: 5px;
    margin-top: 58px;
    width: 155px;
}

.mini {
    color: {color:Border};
    font-size: 70px;
    font-weight: normal;
    text-align: left;
    padding-top: 22px;
    margin-bottom: -34px;
}

.navigation {
    position: fixed;
    text-align: center;
    padding-top: 6px;
    margin-top: 30px;
    margin-left: 8px;
    height: 15px;
    width: 127px;
    -webkit-transition: opacity 0.1s linear;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    transition: all 0.3s ease-out;
    opacity: 0;
}

.navigation:hover  {
    -webkit-transition: opacity 0.1s linear;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    transition: all 0.3s ease-out;
    opacity: 1.0;
}

.navigation a {
    display: block;
    color: {color:Navi Font};
    font-size: 10px;
    text-align: center;
    font-style: italic;
    font-weight: normal;
    text-transform: lowercase;
    background: {color:Navi Bg};
    padding: 4px 5px 4px 5px;
    margin-bottom: 1px;
}

.navigation a:hover {
    color: {color:Navi Font Hover};
    background: {color:Navi Hover Bg};
}

.pagination {
    position: fixed;
    background-color: {color:Background};
    font-size: 10px;
    text-align: center;
    padding-top: 6px;
    margin-left: 210px;
    top: 0px;
    width: 500px;
    height: 21px;
    opacity: 0.8;
}

.pagination a {
    color: {color:Font};
    padding: 3px 10px 3px 10px;
}

.pagination a:hover {
    color: {color:Font On Dark};
    background: {color:Navi Bg};
}

.pagination_current {
    color: {color:Navi Font};
    font-weight: bold;
    padding: 3px 10px 3px 10px;
}

.questions {
    color: {color:Font On Dark};
    background: {color:Sidebar Bg};
    padding: 5px;
    margin-bottom: 0px;
}

.ask {
    text-align: left;
}

.ask img {
    border: 3px solid {color:Sidebar Bg};
    margin-right: 8px;
}

blockquote {
    display: block;
    color: {color:Font};
    font-size: 11px;
    font-family: cambria;
    font-style: none;
    border-left: 3px solid {color:Border};
    padding-left: 5px;
    padding-right: 5px;
    margin: 10px;
    width: 450px;
}

.quote {
    color: {color:Font};
    font-size: 12px;
    font-family: cambria;
    font-style: italic;
    letter-spacing: 1px;
    margin-bottom: -4px;
}

.source {
    color: {color:Font};
    font-size: 9px;
    letter-spacing: 0px;
    text-align: right;
    text-transform: lowercase;
    margin-bottom: 5px;
}

.audio {
    display: block;
}

.audio_details {
    color: {color:Font On Dark};
    background: {color:Sidebar Bg};
    font-weight: normal;
    font-size: 10px;
    text-align: center;
    padding: 6px 0 6px 0;
    width: 500px;
}

.audio_player_container {
    display: block;
    background-color: white;
    padding-left: 11px;
    padding-top: 11px;
    padding-right: 8px;
    padding-bottom: 8px;
    margin-top: -51px;
    margin-left: 3px;
    width: 29px;
    height: 29px;
    z-index: 3;
    -webkit-transition: all 0.9s ease-out;
    -moz-transition: all 0.9s ease-out;
    transition: all 0.9s ease-out;
    opacity: 0.4;
}

.audio_player_container:hover {
    opacity: 0.1;
}

.audio_player {
    overflow: hidden;
    width: 25px;
}

.albumart {
    position: absolute;
    width: 48px;
    height: 48px;
    opacity: 1.0;
}

.albumart img {
    background: {color:Sidebar Bg};
    padding: 3px;
    width: 48px;
    height: 48px;
}

.chat ul {
    display: block;
    list-style-type: none;
    padding: 0px;
    width: 500px;
}

.notes {
    font-size: 10px;
    font-style: none;
    text-transform: lowercase;
    margin-top: 30px;
}
ol.notes, .notes li {
    list-style: none;
}
ol.notes li.note img.avatar {
    display: none;
}
ol.notes li.note blockquote {
    font-color: {color:Font};
    font-size: 10px;
    margin: 2px 0px 3px 15px;
}
ol.notes li.note blockquote a {
    font-color: {color:Font};
    text-decoration: none;
}
ol.notes li.note .answer_content {
    font-color: {color:Font};
}

.x {
    position: fixed;
    color: {color:Font};
    letter-spacing: 1px;
    text-align: center;
    bottom: -18px;
    right: 5px;
    -webkit-transition: opacity 0.8s linear;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
    opacity: 1.0;
}

.x:hover {
    bottom: 18px;
    -webkit-transition: opacity 0.8s linear;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
    opacity: 1.0;
}

{CustomCSS}

</style>

<script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
<script type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict();
$j(function() {
if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
$j("img").lazyload({
placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
effect: "fadeIn",
});
});
</script>

</head>

<body>

<div class="container">

    <div class="sidebar_left">

    <div class="sidebarcontainer">

<div class="sidebar">
    <div class="sidebarimage"><img src="{image:Sidebar}" alt=""/></div>

    <div class="navigation">
        <a href="/">Home</a>
        <a href="/ask">Message</a>
        {block:IfShowLink1}<a href="{text:Link 1}">{text:Link 1 Text}</a>{/block:IfShowLink1}
        {block:IfShowLink2}<a href="{text:Link 2}">{text:Link 2 Text}</a>{/block:IfShowLink2}
        {block:IfShowLink3}<a href="{text:Link 3}">{text:Link 3 Text}</a>{/block:IfShowLink3}
        {block:IfShowLink4}<a href="{text:Link 4}">{text:Link 4 Text}</a>{/block:IfShowLink4}
        {block:IfShowLink5}<a href="{text:Link 5}">{text:Link 5 Text}</a>{/block:IfShowLink5}
    </div>
</div>

<div class="sidebartwo">
        {block:Description}
    <div class="description"><div class="mini">❝</div>{Description}</div>
        {/block:Description}

    {block:IfShowTitle}<div class="title">{Title}</div>{/block:IfShowTitle}

    {block:Pagination}
     <div class="pagination">
       {block:PreviousPage}<a href="{PreviousPage}">←</a>{/block:PreviousPage}
       {block:JumpPagination length="5"}{block:CurrentPage}
       <span class="pagination_current">{PageNumber}</span>
       {/block:CurrentPage}
    {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
       {/block:JumpPagination}
       {block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}
       </div>
       {/block:Pagination}
       </div>

       </div>
</div>

{block:Posts}

<div class="posts">

{block:Date}
<div class="details_left"><a href="{Permalink}">{ShortMonth} {DayOfMonth}</a></div>

<div class="details_lefttwo">{12HourWithZero}:{Minutes} {AmPm}</div>
{/block:Date}

{block:Text}
<div class="entry text">
{block:Title}
<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
<div class="caption">{Body}</div>
</div>
{/block:Text}


{block:Photo}
<div class="entry photo">
<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>
{block:Caption}
{Caption}
{/block:Caption}
</div>
{/block:Photo}


{block:Photoset}
<div class="entry photoset">
<center>{Photoset-500}</center>
{block:Caption}
{Caption}
{/block:Caption}
</div>
{/block:Photoset}


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


{block:Link}
<div class="entry link">
<h1><a href="{URL}" {Target}>{Name} →</a></h1>
{block:Description}
<div class="caption">{Description}</div>
{/block:Description}
</div>
{/block:Link}


{block:Chat}
<div class="entry chat">
{block:Title}
<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
<div class="caption"></div>
</div>
{/block:Chat}


{block:Video}
<div class="entry video">
<center>{Video-500}</center>
{block:Caption}
{Caption}
{/block:Caption}
</div>
{/block:Video}


{block:Audio}
<div class="entry audio">
{block:AlbumArt}
<div class="albumart"><img src="{AlbumArtURL}" alt=""/></div>
{/block:AlbumArt}
{block:Artist}
<div class="audio_details">
Artist: {Artist}
{/block:Artist}<br />
{block:TrackName}
Track: {TrackName}<br />
{block:PlayCount}
{PlayCountWithLabel}
{/block:PlayCount}
</div>
{/block:TrackName}
<div class="audio_player_container"><div class="audio_player">{AudioPlayerWhite}</div></div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}

{block:Answer}
<div class="entry ask">
<div class="questions">
<div class="ask"><img align="left" src="{AskerPortraitURL-24}" alt=""/>{Asker}: {Question}<br></div>
</div>
{Answer}
</div>
{/block:Answer}

{block:Date}
    <div class="details">
    Posted <a href="{Permalink}">{TimeAgo}</a> {block:NoteCount}with <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
    {block:ContentSource}· <a href="{SourceURL}" target="_blank">Source</a>{/block:ContentSource}{block:RebloggedFrom}<a href="{ReblogParentURL}"></a>{/block:RebloggedFrom}

    <div class="reblogs">
    <a href="{ReblogURL}" target="_blank">Reblog</a>
    </div>
    <br />

    {block:HasTags}
    <div class="tags">tagged as{block:Tags}<a href="/tagged/{Tag}">{Tag}</a>{/block:Tags}</div>
    {/block:HasTags}
    </div>
{/block:Date}

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

</div>

{/block:Posts}

<div class="x"><font style="font-size:18px;">♡</font><br><br><a href="http://ownmylight.tumblr.com">Theme</a></div>

</div>

</body>
</html>