Altar

<!--

  THEME 4.0 BY BLOODYNOVAK@TUMBLR
. to view more themes, visit my theme
  blog: aresanglant@tumblr

. DON'T REMOVE CREDIT
. DON'T USE AS A BASE CODE
. DON'T CLAIM AS YOUR OWN
. RESPECT THE HOURS & HOURS THAT I SPENT ON THIS THEME

. thank you for considering my theme!

-->

<!DOCTYPE html>
<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}

<!--Default Variables-->

<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#252525"/>
<meta name="color:Link" content="#000000"/>
<meta name="color:Border" content="#000000"/>
<meta name="color:Scrollbar" content="#000000"/>

<meta name="image:Sidebar Image" content=""/>

<meta name="select:Font" content="arial" title="Arial">
<meta name="select:Font" content="times" title="Times New Roman">

<meta name="if:BW Images" content="0" />

<meta name="text:Link 1 URL" content="" />
<meta name="text:Link 1" content="" />
<meta name="text:Link 2 URL" content="" />
<meta name="text:Link 2" content="" />
<meta name="text:Link 3 URL" content="" />
<meta name="text:Link 3" content="" />
<meta name="text:Link 4 URL" content="" />
<meta name="text:Link 4" content="" />
<meta name="text:Link 5 URL" content="" />
<meta name="text:Link 5" content="" />
<meta name="text:Link 6 URL" content="" />
<meta name="text:Link 6" content="" />

<!-- jquery for tooltips-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>

(function($){

$(document).ready(function(){

$("a[title]").style_my_tooltips({

tip_follows_cursor:true,

tip_delay_time:30,

tip_fade_speed:300,

attribute:"title"

});

});

})(jQuery);

</script>

<script type="text/javascript">
 function unhide(divID) {
 var item = document.getElementById(divID);
 if (item) {
 item.className=(item.className=='hidden')?'unhidden':'hidden';
 }
 }
</script>

<!-- CSS -->

<style type="text/css">

/* tooltip */

#s-m-t-tooltip{
    position:absolute;
    margin: 15px;
    z-index:9999;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background:{color:border};
    color:{color:text};
    padding:3px;}

/* scrollbar */

::-webkit-scrollbar {background-color:{color:background}; border:solid 1.5px {color:border}; height:1px; width:10px}
::-webkit-scrollbar-thumb:vertical {background-color:{color:background}; height:30px;  border-left:1.5px solid {color:scrollbar}; }
::-webkit-scrollbar-thumb:horizontal {border-radius:20%;background-color:{color:background}; height:4px!important border-top:1px solid {color:scrollbar};}


/* general */

blockquote {padding:5px 0 5px 30px;
border-left:1px solid {color:border};
margin-left:30px; }

body {
background:{color:background};
color:{color:text};
font-family:arial;
font-size:10px;
text-align:justify;
margin:0;
line-height:2; }


a {
color:{color:text};
text-decoration:none;
 -webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

a:hover {
    color:{color:link};
 -webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;  }

img{opacity:1;
border:none;
text-decoration:none}

small {
font-size:8px;}

big {
font-size:12px;}

/* post title */

#title {font-size:12px;
line-height:18px;
font-family:italic;
font-style:italic;
margin-bottom:10px;
text-transform:uppercase;
text-align:left;}


/* sidebar im */

#sidebarim {
    text-align:center;
    margin-bottom:20px;
    margin-left:30px;}

#sidebarim img {
    width:50px;
    height:50px;
border-radius:100%; }

/* sidebar title */

#blogt {
border-top:1px solid {color:border};
padding-top:20px;
font-size:15px;
width:180px;
height:40px;
margin-right:;
font-weight:bold;
letter-spacing:-1.5px;
line-height:1.2;
text-transform:uppercase;
text-align:center;
overflow:hidden;
}

#blogt a {
    color:{color:text}; }

#blogt a:hover {
    opacity:1; }

/* sidebar */

#sidebar {
position:fixed;
margin-left:150px;
margin-top:0px;
width:180px;
padding:15px;
background-color:{color:background}; }

/* sidebar links */

#links {
    width:180px;
    letter-spacing:0.5px;
line-height:3;
font-size:10px;
font-weight:;
font-family:times;
font-style:italic;
margin-top:25px;
text-align:center;
text-transform:lowercase;
margin-left:4px; }

#links a {
margin-right:10px;
display:inline;
margin-bottom:15px;
color:{color:text};
 -webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;  }

#links a:hover {
    color:{color:link};
 -webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;  }

/* desc */

#description {
font-size:9px;
margin-top:15px;
padding-bottom:25px;
text-align:justify;
width:180px;
border-bottom:1px solid {color:border}; }


/* pagination */

#pagination {
color:{color:text};
margin-top:30px;
margin-left:66px;
font-size:14px;
font-family:arial;
text-transform:uppercase; }

#pagination a {
margin-top:30px;
padding:0 2px; }

/* container */

#con {
left:65%;
margin-left:-270px;
position:absolute;
padding:95px; }

/* posts */

#entries {
   margin-left:-370px;
margin-top:10px;
width:400px; }

#posts {
width:400px;
{block:IndexPage}
margin-bottom:75px;
{/block:IndexPage}
{block:PermalinkPage}
margin-bottom:50px;
{/block:PermalinkPage} }

#posts img {
max-width:400px; }

#posts img, #posts li, #posts blockquote {max-width: 100%;}
.caption {width:90%;
text-transform:lowercase;
margin-top:30px; }


/* quote */

#titlequote{text-align:left;
font-size:9px;
letter-spacing:0.3px;
font-family:times;
font-style:italic;
text-transform:lowercase;
line-height:1.7;}

#source {
    font-size:8px;
    text-transform:uppercase;
    font-style:;
    margin-top:15px;
    margin-left:5px;}

/* audio */

.playerbuttonbg {
                position: absolute;
                left: 20px;
                top: 20px;
                width: 19px;
                height: 19px;
                background-color: #ffffff;
                padding: 10px;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                opacity: .4;
	            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;
            }

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

.newplayerbutton {
                position: relative;
                width: 19px;
                height: 19px;
                overflow: hidden;
            }

.playerbuttonhug {
                position: absolute;
                top: -18px;
                left: -7px;
            }

.tumblr_audio_player {
                height: 90px;
                width: 270px;
                -moz-transform: scale(0.60, 0.60);
                -webkit-transform: scale(0.60, 0.60);
                -o-transform: scale(0.60, 0.60);
                -ms-transform: scale(0.60, 0.60);
                transform: scale(0.60, 0.60);
                -moz-transform-origin: top left;
                -webkit-transform-origin: top left;
                -o-transform-origin: top left;
                -ms-transform-origin: top left;
                transform-origin: top left;
            }

.audioimgwrapper {
                position: absolute;
                left: 0px;
                top: 0px;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                overflow: hidden;
                width: 79px;
                height: 79px;
            }

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

.trackdetails {
                width: auto;
                display:inline-block;
                margin-left: 90px;
                min-height: 85px;
            }

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

/* messages */

.q {
    background-color:{color:border};
    -moz-border-radius:11px;
    -webkit-border-radius:11px;
    color:{color:text};
    padding:15px;
    margin-bottom:20px;  }

.as {
    font-size:8px;
    color:{color:text};
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding-bottom:5px;
    font-weight:bold;
    font-style:italic; }

.a {
    text-align:center;
    margin-top:10px; }


/* chat */

.chat ol {
padding:0;
list-style:none;}

.line {padding:5px 0;}

.label {font-weight:bold;
text-transform:uppercase;}


/* permalink & notes */

#permalink {
    font-weight:;
margin-top:15px;
font-size:10px;
font-family:times;
font-style:italic;
text-transform:lowercase;
text-align:center;
padding-bottom:10px;
border-bottom:1px solid {color:border}; }

#permalink a {margin-right:10px; color:{color:text};
 -webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;  }

#permalink a:hover {
    color:{color:link};
 -webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;  }

/* tags */

.tags { color:{color:text};
    text-align:center;
word-break:break-all;
font-size:9px;
margin-top:5px;
font-family:times;
font-style:italic;
text-transform:lowercase; }

.tags a {
    margin-right:15px;
    color:{color:text};
 -webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;  }

.tags a:hover {
    color:{color:link};
 -webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;  }

/* pagenotes */

.pagenotes {
{block:IndexPage}
display: none!important;
{/block:IndexPage}
width:400px;
text-align:center; }

.pagenotes a{
    font-style:italic; }

.pagenotes img {
display:none!important;}
.pagenotes li {
list-style-type:none;
padding:5px 0px;
line-height:3.5;
text-align:center;
margin:0 0 0 -40px; }


/* CREDIT - DON'T TOUCH - if you dont like the full name, you can change 'bloody themes' to a symbol, just make sure it is noticeable and don't remove it completely */

#credit {
    color:{color:text};
    font-family:arial;
    position:static;
    margin-bottom:-150px;
    font-size:7px;
    letter-spacing:0.1em;
    padding:8px;
    opacity:0.8;
    text-align:center;
    text-transform:uppercase; }
#credit a:hover {
    color:{color:text}; }


/* title link effect (don't edit) */

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
	font-family: 'Raleway', sans-serif;
}

nav a {
	position: relative;
	display: inline-block;
	margin: 15px 25px;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1.35em;
}

nav a:hover,
nav a:focus {
	outline: none;
}

/* Effect 1: Brackets */

.cl-effect-1 a::before,
.cl-effect-1 a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
	margin-right: 10px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.cl-effect-1 a::after {
	margin-left: 10px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}

/* bw images effect (don't edit) */

{block:IfBWImages}
img,.photoset{
FILTER: URL("DATA:IMAGE/SVG+XML;UTF8,<SVG XMLNS=\'HTTP://WWW.W3.ORG/2000/SVG\'><FILTER ID=\'GRAYSCALE\'><FECOLORMATRIX TYPE=\'MATRIX\'
VALUES=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></FILTER></SVG>#GRAYSCALE"); /* FIREFOX 3.5+ */
FILTER: GRAY; /* IE6-9 */
-WEBKIT-FILTER: GRAYSCALE(100%);
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
}
{/block:IfBWImages}

/* assorted (don't edit) */

#tumblr_controls {
-webkit-filter: invert(100%);}

.arial {
    font-family:arial;}
.times {
    font-family:times;}

.hidden {display: none;}
.unhidden {display: block;}


{CustomCSS}

</style>
</head>
<body>

<div class="{select:Font}" id="con">
<div id="sidebar">
<div id="sidebarim"><img src="{image:Sidebar Image}"></div>

<div class="cl-effect-1" id="cl-effect-1">
<div id="blogt"><a href="/" title="refresh">{Title}</a>
</div></div>

<div id="description">{Description}</div>
<div id="links" >

{block:ifLink1}<a href="{text:Link 1 URL}"> {text:Link 1} </a>{/block:ifLink1}
/ &nbsp;
{block:ifLink2}<a href="{text:Link 2 URL}" >{text:Link 2}</a>{/block:ifLink2}
/ &nbsp;
{block:ifLink3}<a href="{text:Link 3 URL}" >{text:Link 3}</a> {/block:ifLink3}
/ &nbsp;
{block:ifLink4}<a href="{text:Link 4 URL}" >{text:Link 4}</a> {/block:ifLink4}
/ &nbsp;
{block:ifLink5}<a href="{text:Link 5 URL}" >{text:Link 5}</a> {/block:ifLink5}
/ &nbsp;
{block:ifLink6}<a href="{text:Link 6 URL}" >{text:Link 6}</a> {/block:ifLink6}
</div>

<div id="pagination">
{block:Pagination}
{block:PreviousPage}
&nbsp; <a href="{PreviousPage}" title="back"> - </a>
{/block:PreviousPage}
&nbsp;

{block:NextPage}
&nbsp; <a href="{NextPage}" title="forward"> + </a>
{/block:NextPage}
{/block:Pagination}

</div></div>

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

{block:Quote}

<div id="titlequote"><b>[</b> {Quote} <b>]</b></div>
{block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}
{/block:Quote}

{block:Text}
{block:Title}
<div id="title">[ {Title} ]</div>{/block:Title}
{Body}
{/block:Text}

{block:Link}
<div id="title"><a href="{URL}">[ {Name} ]</a></div>{block:Description}{Description}{/block:Description}
{/block:Link}

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

{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
{/block:Photo}

{block:Photoset}
{Photoset-400}
{/block:Photoset}

{block:Video}
{Video-400}
{/block:Video}

{block:AudioPlayer}
        <div class="audiowrapper">
        {block:AlbumArt}
            <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
        {/block:AlbumArt}

        <div class="playerbuttonbg">
            <div class="newplayerbutton">
                <div class="playerbuttonhug">

                    {AudioPlayerWhite}

                </div>
            </div>
        </div>

        <div class="trackdetails">

               <b> <a style="letter-spacing:0.2em; font-size:11px; text-transform:uppercase; font-weight:800;"> {block:TrackName}{TrackName}{/block:TrackName}</a></b><br/> <p>
               <b> {block:Artist}Artist:</b> {Artist}{/block:Artist}<br/><p>
               <b> {block:Album}Album:</b> {Album}{/block:Album}<br/>
        </div>
        </div>
        {/block:AudioPlayer}

{block:Answer}
<div class="q">
<div class="as">[ question from {Asker} ] </div>
{Question}</div>
<div class="a">{Answer}</div>
{/block:Answer}

{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}

{block:Date}
<div id="permalink">
<a href="{Permalink}" title="permalink" style="cursor:help;"> {TimeAgo} </a>
{/block:Date}

{block:permalinkpage}
{block:NoteCount} <a title="notes"> {NoteCount} </a>{/block:NoteCount}

{block:RebloggedFrom}<a href="{ReblogParentURL}" title="via">from</a>{block:ContentSource}<a href="{ReblogRootURL}" title="source">by</a>{/block:ContentSource}{/block:RebloggedFrom} {/block:permalinkpage}
</div>
{block:HasTags}<div class="tags">filed under: &nbsp; {block:Tags} <a href="{TagUrl}"> {Tag}</a>{/block:Tags}</div>{/block:HasTags} </div>

{block:PostNotes}
<a href="javascript:unhide('displaybx');" style="padding:5px; margin-left:170px; font-family:times; font-style:italic;" > [ pagenotes ] </a>
<div id="displaybx" class="hidden">
<div class="pagenotes">
{PostNotes}
</div></div>
{/block:PostNotes}

{/block:Posts}

<div class="cl-effect-1" id="cl-effect-1">
<div id="credit"> <a href="http://aresanglant.tumblr.com" target="_blank">
credit: bloody themes </a>
</div></div>

</div>

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

</body></html>