holychild theme

<!DOCTYPE html>
<head>

<!-----
holychild theme by ophie kravitz
dont steal, dont delete credit
base code by animecharacter
----->

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="image:icon" content=""/>
<meta name="image:bg" content=""/>
<meta name="image:favicon" content=""/>

<meta name="if:title" content=""/>
<meta name="if:description" content=""/>
<meta name="if:caption" content=""/>
<meta name="if:custom scrollbar" content=""/>
<meta name="if:circle sidebar" content=""/>
<meta name="if:rounded sidebar" content=""/>
<meta name="if:rounded posts" content=""/>

<meta name="select:post size" content="250"/>
<meta name="select:post size" content="300"/>
<meta name="select:post size" content="350"/>
<meta name="select:post size" content="400"/>
<meta name="select:post size" content="450"/>

<meta name="select:font" content="arial"/>
<meta name="select:font" content="verdana"/>
<meta name="select:font" content="lucida sans"/>
<meta name="select:font" content="open sans condensed"/>
<meta name="select:font" content="karla"/>
<meta name="select:font" content="dosis"/>
<meta name="select:font" content="abel"/>

<meta name="select:font size" content="13"/>
<meta name="select:font size" content="14"/>
<meta name="select:font size" content="15"/>
<meta name="select:font size" content="16"/>

<meta name="select:sidebar align" content="left"/>
<meta name="select:sidebar align" content="center"/>
<meta name="select:sidebar align" content="right"/>

<meta name="select:footer align" content="left"/>
<meta name="select:footer align" content="center"/>
<meta name="select:footer align" content="right"/>

<meta name="color:text" content=""/>
<meta name="color:bg" content=""/>
<meta name="color:link" content=""/>
<meta name="color:link hov" content=""/>
<meta name="color:scrollbar" content=""/>
<meta name="color:blockquote" content=""/>
<meta name="color:sidebar text" content=""/>

<meta name="text:link" content="about"/>
<meta name="text:link url" content="/aboutme"/>

{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}

<title>{Title}</title>

<link rel="shortcut icon" href="{image:favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="http://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<script src="http://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>

<style type="text/css">


/*
general text styles, fonts and colours
*/

body {
margin:0px;
background:{color:bg};
font-family:{select:font};
font-size:{select:font size}px;
line-height:140%;
color:{color:text};
}

p{
margin:0 0 10px 0;
padding:0;
}

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

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

a:hover{
color:{color:link hov};
transition: .7s ease-in-out;
-moz-transition: .7s ease-in-out;
-webkit-transition: .7s ease-in-out;
}

li{
margin-left:-15px;
}

{block:ifcustomscrollbar}
::-webkit-scrollbar-thumb {
min-height: 60px;
border-left: 4px solid {color:bg};
border-right: 4px solid {color:bg};
border-top: 2px solid {color:bg};
border-bottom: 2px solid {color:bg};
background: {color:scrollbar};
}

::-webkit-scrollbar {
width: 11px;
height: 10px;
border-left: 5px solid {color:bg};
border-right: 5px solid {color:bg};
border-top: 2px solid {color:bg};
border-bottom: 2px solid {color:bg};
background: {color:scrollbar};
}
{/block:ifcustomscrollbar}

/*
containers etc
*/
#wrapper{
width:600px;
margin:50px auto;
}

#sidebar{
margin-left:-90px;
margin-top:125px;
width:130px;
position:fixed;
text-align:{select:sidebar align};
color:{color:sidebar text};
}

#sidebar img{
width:130px;
{block:ifcirclesidebar}
border-radius:100%;
{/block:ifcirclesidebar}
{block:ifroundedsidebar}
border-radius:7%;
{/block:ifroundedsidebar}
}

#sidebar img:hover{
-webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
-o-transform: rotate(360deg) ;
 -ms-transform: rotate(360deg);
 transform: rotate(360deg) ;
 -webkit-transition: 1s ease-in-out;
 -moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
z-index: 9999999999999999999;
}

#content{
width:400px;
margin-left:200px;
}

.post{
width:{select:post size}px;
margin:0 0 50px 0;
}

.post img{
max-width:100%;
{block:ifroundedposts}
border-radius:7px;
{/block:ifroundedposts}
{block:ifnotroundedposts}
border-radius:0px;
{/block:ifnotroundedposts}
}

.post img:hover{
border-radius: 0px;
-webkit-transition: .8s ease-in-out;
-moz-transition: .8s ease-in-out;
-o-transition: .8s ease-in-out;
}

#photoset{
}

#photoset iframe{
width:{select:post size}px;
max-width:100%;
{block:ifroundedposts}
border-radius:7px;
{/block:ifroundedposts}
}

#photoset iframe:hover{
border-radius: 0px;
-webkit-transition: .8s ease-in-out;
-moz-transition: .8s ease-in-out;
-o-transition: .8s ease-in-out;
}

.post img{
max-width:100%;
}

#nav{
margin:50px 0 0 0;
}

#credit{
padding:10px;
width:15px;
height:15px;
position:fixed;
border-radius:100%;
bottom:5px;
left:3px;
font-size:{text:font size}px;
}

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

.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: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
overflow: hidden;
width: 79px;
height: 79px;
}

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

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

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

#icons {
color:{color:link};
}

#icons:hover {
color:{color:link hov};
}

/*
content in the body of the posts - quotes, asks, etc
"media" contains photos, photosets, videos, audio posts
*/
.media{
margin:0 0 10px 0;
}

.video{
margin:0 0 10px 0;
{block:ifroundedposts}
border-radius:7px;
{/block:ifroundedposts}
{block:ifnotroundedposts}
border-radius:0px;
{/block:ifnotroundedposts}
}

.title{
font-weight:normal;
font-size:17px;
margin:0 0 10px 0;
}

.quote{
font-weight:normal;
font-size:16px;
font-style:italic;
margin:0 0 10px 0;
}

.question{
margin-bottom:10px;
}

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

/*
post footers - date, tags, via and source
*/
.post .footer{
margin:0;
text-align:{select:footer align};
}

/*
post notes
*/
ol.notes{
list-style-type:none;
padding:0;
margin:0;
}

ol.notes li.note img{
width:16px;
height:16px;
}

ol.notes li.note{
margin:0px;
}

{CustomCSS}
</style>
<style type="text/css">A:hover{letter-spacing: 2px;}</style>
</head>
<body>
<div id="wrapper">


<div id="sidebar">
{block:iftitle}
<div class="title">
- ̗̀ {Title} ̖́-
</div>
{/block:iftitle}
<img src="{image:icon}">
{block:ifdescription}
<p>{Description}</p>
{/block:ifdescription}
<div id="icons">
<a title="home" href="/"><i class="fa fa-home" aria-hidden="true"></i></a>
<a title="ask" href="/ask"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
<a title="archive" href="/archive"><i class="fa fa-history" aria-hidden="true"></i></a>
<a title="theme by ophie!" href="http://marysage.tumblr.com"><i class="fa fa-code" aria-hidden="true"></i></a>
<a title="{text:link}" href="{text:link url}"><i class="fa fa-user" aria-hidden="true"></i></i></a>
</div>


{block:HasPages}
{block:Pages}
<a href="{URL}">{Label}</a><br>
{/block:Pages}
{/block:HasPages}
</div>



<div id="content">
{block:Posts}

<div class="post">

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

{block:Photo}
<div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
{block:ifcaption}<div class="caption">{Caption}</div>{/block:ifcaption}
{/block:Photo}

<div id="photoset">{block:Photoset}<div class="media" style="max-width:100%">{LinkOpenTag}{Photoset}{LinkCloseTag}</div>{block:ifcaption}<div id="caption">{Caption}</div>{/block:ifcaption}{/block:Photoset}</div>

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

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

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

{block:Lines}
<div class="{Alt} user_{UserNumber}">
{block:Label}
<b>{Label}</b>{/block:Label}
&nbsp;{Line}
</div>
{/block:Lines}
{/block:Chat}

{block:Video}
<div class="video">{Video-500}</div>
{block:ifcaption}<div class="caption">{Caption}</div>{/block:ifcaption}
{/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">
{block:TrackName}{TrackName}{/block:TrackName}<br/>
{block:Artist}— {Artist}{/block:Artist}<br/>
</div>
</div>
{block:ifcaption}{Caption}{/block:ifcaption}
{/block:AudioPlayer}

{block:Answer}
<div id="questions">{Asker} wondered: {Question}</div>{Answer}{/block:Answer}


{block:Date}
<div class="footer">
<a href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{ShortYear}</a> <a href="{ReblogURL}"><i class="fa fa-refresh" aria-hidden="true"></i></a>
</div>

{block:PermalinkPage}
{block:NoteCount}
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:NoteCount}
{/block:PermalinkPage}
{/block:Date}

</div>
{/block:Posts}

{block:Pagination}
<div id="nav">
{block:PreviousPage}<a href="{PreviousPage}">↤</a>{/block:PreviousPage}

{block:NextPage}<a href="{NextPage}">↦</a>{/block:NextPage}
</div>
{/block:Pagination}
</div>
</div>

</div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="http://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>

    </body>
</html>