SATISFACTION - theme 5

<!DOCTYPE html>
<html>
<head>

<!-- Malfooyy Themes -->

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />

<title>{Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary} — {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>

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

<link rel="shortcut icon" href="{Favicon}">
<link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<meta name="color:Text" content="#aaaaaa"/>
<meta name="color:Links" content="#777777"/>
<meta name="color:Links Hover" content="#000000" />
<meta name="color:background" content="#ffffff" />
<meta name="color:Accent" content="#f8f8f8" />
<meta name="color:Borders" content="#eeeeee" />
<meta name="color:Titles" content="#000000" />



<meta name="text:Link1" content="/" />
<meta name="text:Link1 Title" content="Link 1" />
<meta name="text:Link2" content="/" />
<meta name="text:Link2 Title" content="Link 2" />
<meta name="text:Link3" content="/" />
<meta name="text:Link3 Title" content="Link 3" />
<meta name="text:Link4" content="/" />
<meta name="text:Link4 Title" content="Link 4" />
<meta name="text:Link5" content="/" />
<meta name="text:Link5 Title" content="Link 5" />


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

<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/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>


/* basics */

body {
font-family: helvetica, arial, sans-serif;
font-size: 11px;
margin:0;
background:{color:background};
color:{color:Text};
text-align:justify;
line-height:150%;
}

#s-m-t-tooltip{
max-width:300px;
margin:15px;
padding:2px 8px;
border:1px solid {color:Borders};
background:{color:Background};
color:{color:Text};
z-index:999999;}


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

a:hover {
color:{color:Links hover};
}

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

/* posts */

.posttitle {
color:{color:Titles};
font-size:12px;
font-weight:bold;
letter-spacing:0px;
border-bottom:1px solid {color:Borders};
margin-bottom:10px;
padding-bottom:10px;
}

.posttitle a {
color:{color:Titles};
}

.post {
width: 400px;
margin:100px 0;
}

.container {
position:absolute;
left: 50%;
margin-left: -200px;
z-index:1;
}

.caption {
margin:5px 0;
}

.header {
width: 250px;
text-align:center;
margin:100px auto 10px auto;
}


.header img {
border-radius:100%;
width:70px;
height:70px;
margin-bottom:10px;
border:5px solid {color:Accent};
-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;
}

.header img:hover {
border:5px solid {color:Borders};
-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;
}

.blogtitle {
font-size: 16px;
font-weight: bold;
letter-spacing: 0px;
text-align:center;
text-transform:lowercase;
color:{color:Titles};
}

.blogtitle a {
color:{color:Titles};
}

.links {
font-size:9px;
margin:0;
text-align:center;
font-weight: bold;

}

.links a {
background:{color:Accent};
border-bottom:1px solid {color:Borders};
color:{color:Titles};
margin:0 5px;
padding:5px ;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.links a:hover {
background:{color:Borders};
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}


.description {
margin:15px 0;
}


.content {
margin: 50px 0;
width: 400px;
}

.post img {
max-width:400px;
}

a.tumblr_blog {
border-bottom:1px solid {color:Borders};
}

/* post styles */

.quote-post blockquote {
padding:0;
margin:0;
font-size: 12px;
font-weight:bold;
color:{color:titles};
border:none;
text-align:center;
}

#source {
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
font-size:7px;
margin-top:10px;
}


.label {
font-weight:bold;
margin: 0 5px;
color:{color:Titles};
}

.label a {
color:{color:Titles};
}

.line {
margin-bottom:2px;
list-style:none;
padding:10px 2px;
border-bottom:1px solid {color:Borders};
}


.line:last-child {
border:none;
}

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

.asker {
font-weight:bold;
font-style:normal;
line-height: 20px;
color:{color:Titles};
}

.asker a {
color:{color:Titles};
text-decoration:none;
}
.answer {
margin: 15px 0;
}

.question {
background:{color:Accent};
padding:10px;
overflow:hidden;
}



.tumblr_audio_player {
width:300px;
height:40px;
border-left:8px solid {color:Background};
}

.musicplayer {
width:30px;
height:30px;
overflow:hidden;
margin-top:20px;
margin-left:20px;
}

.cover {
width:80px;
height:80px;
position:absolute;
background:{color:Background};
opacity:0;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s;
}
.coveroverlay:hover .cover {
opacity:1;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s;
}

.coveroverlay {
background:{color:posts};
width:80px;
height:80px;
float:left;
margin-right:15px;
z-index:2;
}

.coveroverlay img {
width:80px;
height;80px;
position:absolute;
}
.audio_info {
min-height:80px;
font-size:10px;
margin-left:95px;
}

.textline {
height:18px;
margin:2px 0;
line-height:18px;
display:block;
padding-left:5px;
border-bottom:1px solid {color:Borders};
padding:4px;
overflow:hidden;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s;
}

.textline:last-child {
border:none;
}



.textline b {
padding:2px 4px;
margin-right:5px;
color:{color:Titles};
font-weight:bold;
}

/* postinfo */

.postinfo {
margin-top:10px;
font-size:8px;
letter-spacing:1px;
text-transform:uppercase;
padding:5px;
border-top:1px solid {color:Borders};
}

.postinfo a {
text-decoration:none;
}



/*pagination*/
.pagination {
text-align:right;
padding-top:7px;
width:400px;
margin:100px 0;
font-size:9px;
letter-spacing:1px;
text-transform:uppercase;
border-top:1px solid {color:Borders};
}

.pagination a {
padding:9px 10px;
}

.pagination a.cpage {
border-top:2px solid {color:Titles};
padding:9px 10px;
}

/* pagenotes */
.pagenotes {
width:400px;
text-align:left;
margin-top:30px;
}

.pagenotes img {
margin-right: 15px;
width: 15px;
height: 15px;
border-radius: 50%;
vertical-align: middle;
}

ol.notes {
padding:0px;
}

.pagenotes li {
list-style-type:none;
padding:10px 0px;
border-bottom:1px solid {color:Borders};
}

/* credit */
#credit {
position:fixed;
right:10px;
bottom:10px;
text-align:center;
text-transform:uppercase;
font-size:8px;
letter-spacing:1px;
font-family:helvetica, arial, sans-serif;
}

#credit a {
background:{color:Accent};
border:1px solid {color:Borders};
padding:2px 4px;
text-decoration:none;
}

#credit a:hover {
color:{color:links hover};
}

</style>
</head>
<body>
<div id="credit"><a href="http://malfooyythemes.tumblr.com/" title="malfooyy">©</a></div>

<div class="container">
<div class="header">

<img src="{PortraitURL-128}" />

<div class="blogtitle" ><a href="/" >{Title}</a></div>
<div class="description">{Description}</div>
</div>

<div class="links">
{block:ifLink1}<a href="{text:link1}">{text:link1 title}</a>{/block:ifLink1}
{block:ifLink2}<a href="{text:link2}">{text:link2 title}</a>{/block:ifLink2}
{block:ifLink3}<a href="{text:link3}">{text:link3 title}</a>{/block:ifLink3}
{block:ifLink4}<a href="{text:link4}">{text:link4 title}</a>{/block:ifLink4}
{block:ifLink5}<a href="{text:link5}">{text:link5 title}</a>{/block:ifLink5}
</div>

<div class="content">

{block:Posts}
<article class="post {PostType}-post">
{block:Text}
{block:Title}<h1 class="posttitle">{Title}</h1>{/block:Title}
{Body}
{/block:Text}

{block:Photo}
{block:Permalinkpage}{LinkOpenTag}{/block:Permalinkpage}{block:Indexpage}<a href="{Permalink}">{/block:Indexpage}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{block:Indexpage}</a>{/block:Indexpage}{block:Permalinkpage}{LinkCloseTag}{/block:Permalinkpage}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photo}

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

{block:Quote}
<blockquote class="{Length}"><b>“</b>{Quote}<b>”</b></blockquote>
{block:Source}<div id="source">{Source}</div>{/block:Source}
{/block:Quote}

{block:Link}
<h1 class="posttitle"><a href="{URL}">{Name} →</a></h1>
{block:Description}{Description}{/block:Description}
{/block:Link}

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

{block:Audio}
{block:AudioPlayer}
<div class="coveroverlay">
{block:albumart}
<img src="{albumarturl}">
{/block:albumart}
<div class="cover">
<div class="musicplayer">{AudioPlayerWhite}</div>
</div>
</div>
{/block:AudioPlayer}
<div class="audio_info">
{block:TrackName}<div class="textline"><b>Track</b>{TrackName}</div>{/block:TrackName}{block:Artist}<div class="textline"><b>Artist</b>{Artist}</div>{/block:Artist}{block:album}<div class="textline"><b>Album</b>{Album}</div>{/block:album}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Audio}

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

{block:Answer}
<div class="question">
<div class="asker">{Asker} said: </div>{Question}
</div>
<div class="answer">{Answer}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Answer}

{block:Date}<div class="postinfo">
<div class="perm"><a href="{Permalink}">
{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</a>{block:NoteCount} / <a href="{Permalink}">{NoteCountwithLabel} </a> {/block:NoteCount}{block:permalinkpage}{block:RebloggedFrom} / <a href="{ReblogParentURL}" title="{ReblogParentName}">VIA</a>{block:ContentSource} / <a href="{ReblogRootURL}" title="{ReblogRootName}">SOURCE</a>{/block:ContentSource}{/block:RebloggedFrom}{/block:permalinkpage}{block:HasTags} / {block:Tags}<a href="{TagURL}">#{Tag} / </a>{/block:Tags}{/block:HasTags}</div>


</div>{/block:Date}

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



</article>
{/block:Posts}

{block:IndexPage}
{block:Pagination}
<div class="pagination">
{block:PreviousPage}
<a href="{PreviousPage}">Back</a>
{/block:PreviousPage}
{block:JumpPagination length="6"}

{block:CurrentPage}
<a href="#" class="cpage"><b>{PageNumber}</b></a>
{/block:CurrentPage}
{block:JumpPage}
<a href="{URL}" class="jpage">{PageNumber}</a>
{/block:JumpPage}

{/block:JumpPagination}
{block:NextPage}
<a href="{NextPage}">Forth</a>
{/block:NextPage}
</div>
{/block:Pagination}
{block:IndexPage}




</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>