Greyson Theme by Pillow Themes

<!DOCTYPE html>
<head>

<!---
  ___ ___ _    _    _____      __  _____ _  _ ___ __  __ ___ ___
 | _ \_ _| |  | |  / _ \ \    / / |_   _| || | __|  \/  | __/ __|
 |  _/| || |__| |_| (_) \ \/\/ /    | | | __ | _|| |\/| | _|\__ \
 |_| |___|____|____\___/ \_/\_/     |_| |_||_|___|_|  |_|___|___/

                            BY CARA

Rules:
    1. Do not steal snippets or all of my codes.
    2. Do not claim theme as yours.
    3. Do not remove the credit.

Credits:
	1. Ask Portrait Tutorial by EXCOLO

-->


<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 Tags --->
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Link" content="#000000"/>
<meta name="color:Accent" content="#feedc4"/>
<meta name="color:Container" content="#eeeeee"/>

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

<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="viewport" content="width=device-width, initial-scale=1.0">

<meta name="text:Stats" content="Your stats here"/>

<!-- Body Font from Google Fonts-->
<link href="https://fonts.googleapis.com/css?family=Tajawal|Ubuntu+Condensed" rel="stylesheet">

<!-- jQuery for Tooltips-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://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>

<style type="text/css">

/* Tooltip */
#s-m-t-tooltip{
    position:absolute;
    margin-top: 15px;
    z-index:9999;
    background:{color:Background};
}

/* Scrollbar */
::-webkit-scrollbar {
width:4px;
background: white;
}

::-webkit-scrollbar-thumb {
background-color:{color:Accent};
border:1px solid #fff;
}

::-webkit-scrollbar-track {
width:3px;
background:{color:Container};
border:0.5px solid #fff;
}

/* Custom Font */
@font-face {
font-family: 'Seaside Groove';
src: url('https://static.tumblr.com/vowb075/iEbp7fase/seaside_groove.ttf');
}

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

body {
background:{color:Background};
color:{color:Text};
font-family: 'Tajawal', sans-serif;
font-size:12px;
text-align:justify;
margin:0;
line-height:16px;
}

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

a:hover {
text-decoration:none;
}

p {
background-color:#eee;
padding:10px;
}

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

small {
font-size:9px;
}

big {
font-size:12px;
}

/* Header */
#header {
top:0;
padding-top:10px;
width:100%;
height:40px;
background-color:{color:Background};
position:fixed;
display:inline;
}

#headera {
text-align:center;
font-family: 'Tajawal', sans-serif;
font-size:12px;
padding-top:25px;
text-transform:uppercase;
}

#headera a {
margin-right:25px;
text-decoration:none;
}

/* Title of a Post */
#title {
font-size:35px;
line-height:18px;
margin-bottom:15px;
font-family: 'Seaside Groove';
text-transform:lowercase;
text-align:center;
}

/* Sidebar */
#sidebar {
left:0;
top:0;
margin-top:100px;
margin-left:185px;
text-align:right;
position:fixed;
width:200px;
background-color:{color:Background};
}

/* Sidebar Image */
#sidebarim {
right:0;
margin-right:20px;
margin-bottom:5px;
margin-top:0px;
}

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

#sidebar:hover #description {
opacity:1;
-webkit-transition:opacity 0.3s linear;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
transition:all 0.3s linear;
}

#description {
opacity:0;
width:160px;
margin:auto;
margin-top:10px;
margin-bottom:10px;
line-height:16px;
-webkit-transition:opacity 0.3s linear;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
transition:all 0.3s linear;
}

/* Where you will put your stats */
#box {
width:200px;
margin-top:500px;
margin-left:185px;
line-height:16px;
background-color:{color:background};
z-index:9;
position:fixed;
text-align:right;
}

#stats {
margin-right:20px;
}

#pagination {
bottom:0;
width:180px;
margin-top:20px;
margin-bottom:50px;
margin-left:250px;
text-transform:lowercase;
font-family: 'Seaside Groove';
font-size:35px;
}

#pagination a {
padding:5px;
}

/* DO NOT TOUCH MY CREDIT */
#pillowthemes {
bottom:20px;
right:20px;
font-family: 'Tajawal', sans-serif;
font-size:12px;
width:14px;
height:14px;
text-align:center;
background-color:#dcecf5;
text-transform:uppercase;
color:black;
padding:5px;
position:fixed;
z-index:99999999999999999999;
}
/* DO NOT TOUCH MY CREDIT */

/* Container */
#con {
width:565px;
margin-top:100px;
margin-left:auto;
margin-right:auto;
height: 540px;
overflow-x: hidden;
background-color:{color:Container};
}

#entries {
margin-top:0px;
width:500px;
}

/* Individual Posts */
#posts {
width:500px;
padding:30px;
{block:IndexPage}
margin-bottom:0px;
{/block:IndexPage}
{block:PermalinkPage}
margin-bottom:0px;
{/block:PermalinkPage}
}

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

#posts img, #posts li, #posts blockquote {max-width: 100%;}
.caption {width:100%;
margin-top:10px;
}

#titlequote {
text-align:left;
text-transform:lowercase;
font-family: 'Seaside Groove';
font-size:35px
line-height:18px;
}

#source {
margin-top:15px;
margin-left:15px;
}

.player {
width:25px;
height:25px;
overflow:hidden;
position:absolute;
background:white;
}

.audioinfo {
margin-left:50px;
}

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

.line {
padding:5px 0;
}

.label {
font-weight:bold;
}

#permalink {
margin-top:15px;
font-size:10px;
text-transform:uppercase;
opacity:0;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
}

#permalink a {
margin-right:10px;
text-decoration:none;
}

#posts:hover #permalink {
opacity:1;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
}

.tags {
word-break:break-all;
font-size:9px;
}

.pagenotes {
{block:IndexPage}
display: none!important;
{/block:IndexPage}
width:485px;
text-align:left;
margin-left:30px;
margin-top:20px;
background-color:#eee;
padding-top:0px;
padding-left:10px;
padding-right:10px;
padding-bottom:0px;
}

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

/* AUDIO POSTS */
.albumart {
width:250px;
height:250px;
}

.aplayer {
width:250px;
}

.acaption {
padding:5px 10px 10px 10px;
}

.tumblr_audio_player {
height: 30px;
width: 500px;
}

{CustomCSS}

</style>
</head>

<body>

<div id="header">
    <div id="headera">
    <a href="{text:link 1 url}">{text:link 1}</a>
    <a href="{text:link 2 url}">{text:link 2}</a>
     <a href="{text:link 3 url}">{text:link 3}</a>
    <a href="/" style="font-family: 'Seaside Groove';color:{color:Accent};text-transform:lowercase;font-size:40px">{Title}</a>
    <a href="{text:link 4 url}">{text:link 4}</a>
    <a href="/archive">archive</a>
    <!--- DO NOT TOUCH --->
    <a href="https://pillowthemes.tumblr.com/">credit</a>
    <!--- DO NOT TOUCH --->
    </div>
</div>

<div id="box">
    <div id="stats">{text:Stats}</div>
</div>


<div id="con">

<div id="sidebar">
    <div id="sidebarim"><img src="{image:Sidebar}"></div>
    <div id="description">{Description}</div>
</div>



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


{block:Quote}


<div id="titlequote">“{Quote}”</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-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}
{/block:Photo}

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

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

{block:Audio}
{block:AlbumArt}<img class="albumart" src="{AlbumArtURL}">{/block:AlbumArt}
{block:AudioPlayer}<div class="aplayer">{AudioPlayer}</div>{/block:AudioPlayer}
<!-- CHANGE AUDIO-250 TO AUDIO-500 IF YOUR POST SIZE IS 500 -->
{block:AudioEmbed}{AudioEmbed-500}{/block:AudioEmbed}
{block:IndexPage}<div class="acaption">{block:TrackName}Track: {TrackName}<br>{/block:TrackName}
{block:Artist}Artist: {Artist}<br>{/block:Artist}
{block:PlayCount}Played: {PlayCount}{/block:PlayCount}</div>
{/block:IndexPage}
{block:PermalinkPage}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:PermalinkPage}
{/block:Audio}

{block:Answer}
<table style="margin-bottom:5px;">
<tr>
<td style="vertical-align:top;padding-right:10px;"><img src="{AskerPortraitURL-128}" style="border-radius:50%;"></td>
<td style="vertical-align:top;"><strong>{Asker} asked:</strong> {Question}</td>
</tr>
</table>
{Answer}
{/block:Answer}

{block:Date}
<div id="permalink">
{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-24}" style="border-radius:50%;margin-right:5px;"></a>
<a href="{ReblogURL}" style="float:right; margin-right:0px;">Reblog</a>
<a href="{Permalink}" title="Posted with {NoteCountWithLabel}" style="float:right;">{Month} {DayOfMonthWithZero}, {Year}</a>
{/block:RebloggedFrom}

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



</div>


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


{/block:Posts}

<div id="pagination">
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}">previous </a>
{/block:PreviousPage}


{block:NextPage}
<a href="{NextPage}">next</a>
{/block:NextPage}
{/block:Pagination}
</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}

<!--- DO NOT TOUCH THIS PART --->
<div id="pillowthemes"><a href="https://pillowthemes.tumblr.com/" title="theme credit" style="color:black;">P.</a></div>
<!--- DO NOT TOUCH THIS PART --->

</body>

</html>