INFINITE - theme 4

<!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="#ababab"/>
<meta name="color:Links Hover" content="#797979" />
<meta name="color:Accent" content="#f8f8f8" />
<meta name="color:background" content="#ffffff" />
<meta name="color:Tags" content="#f8f8f8" />
<meta name="color:Tags hover" content="#eeeeee" />
<meta name="color:Sidebar background" content="#f8f8f8" />
<meta name="color:Border" content="#eeeeee" />
<meta name="color:Blockquote" content="#eeeeee" />
<meta name="color:SidebarLink" content="#f8f8f8" />
<meta name="color:SidebarLink hover" content="#eeeeee" />
<meta name="color:titles" content="#000000" />
<meta name="color:dark accent" 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" />

<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:20px;
}

#s-m-t-tooltip{
max-width:300px;
margin:15px;
padding:2px 4px;
background:{color:Accent};
color:{color:Text};
z-index:9999;
font-family:calibri,"Trebuchet MS", sans-serif;
font-size:8px;
letter-spacing:1px;
text-transform:uppercase;
}


a {
color:{color:Text};
text-decoration:underline;
}

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

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

/* posts */

.posttitle {
font-size:8px;
line-height:18px;
font-weight:bold;
margin-bottom:10px;
letter-spacing:1px;
text-transform:uppercase;
text-align:left;
font-family:calibri,"Trebuchet MS", sans-serif;
padding:10px 10px;
background:{color:Accent};
color:{color:titles};
border-left:2px solid {color:dark accent};
}

.posttitle a {
    color:{color:titles};
text-decoration:none;
}

.post {
width: 400px;
padding: 50px 0;
}

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

.header {
position: fixed;
width: 150px;
margin: 190px -190px;
background:{color:sidebar background};
padding:20px;
}

.blogtitle {
font-size: 14px;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 0px;
}

.blogtitle a {
color:{color:titles};
text-decoration:none;
}


.links {
font-size:8px;
text-transform:uppercase;
letter-spacing:1px;
margin:0;
text-align:left;
font-family:calibri,"Trebuchet MS", sans-serif;
font-weight:bold;
}

.links a {
background:{color:SidebarLink};
color:#222;
text-decoration:none;
margin:0 4px 4px 0;
padding:3px 3px 3px 10px;
display:block;
-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:SidebarLink Hover};
-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:10px 0;
}


.content {
margin: 50px 0 50px 80px;
width: 500px;
}

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

/* post styles */

.quote-post blockquote {
padding:0;
margin:0;
font-size: 12px;
color:{color:titles};
border:none;
margin-bottom:5px;
}

#source {
font-size:8px;
letter-spacing:1px;
text-transform:uppercase;
font-family:calibri,"Trebuchet MS", sans-serif;
}

#source a {
text-decoration:none;
}

/* chat */

.chat ol {
margin:0;
padding:0;
line-height:180%;
list-style:none;
}


.line.odd {
padding:10px;
border-bottom:1px solid {color:border};
}

.line.even {
padding:10px;
border-bottom:1px solid {color:border};
}

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

.label {
font-weight:bold;
display:inline-block;
font-size:8px;
text-transform:uppercase;
letter-spacing:1px;
font-family:calibri,"Trebuchet MS", sans-serif;
color:{color:titles};
}

/* audio */

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

.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;
border:1px solid {color:border};
}

.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:border};
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-bottom:none;
}

.textline:hover {
background:{color:posts hover};
color:{color:posts};
-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 b {
font-weight:bold;
padding:2px 4px;
margin-right:5px;
text-transform:uppercase;
font-size:8px;
letter-spacing:1px;
color:{color:titles};
font-family:calibri,"Trebuchet MS", sans-serif;
}


/* question */

.q img {
border-radius: 100%;
width:40px;
height:40px;
float:left;
margin: 5px 15px 0 0;
}

.asker {
font-weight:bold;
font-style:normal;
text-transform:uppercase;
font-size:8px;
letter-spacing:1px;
line-height: 20px;
font-family:calibri,"Trebuchet MS", sans-serif;
}

.asker a {
color:{color:Text};
text-decoration:none;
}
.answer {
margin-top:10px;}


.question {
background:{color:Accent};
border-left:2px solid {color:dark accent};
padding:10px;
overflow:hidden;
}



/* postinfo */

.postinfo {
margin-top:10px;
font-size:10px;
text-align:center;
}

.postinfo a {
text-decoration:none;
}

.perm {
text-transform:uppercase;
font-size:7px;
letter-spacing:1px;
}

.perm a {
margin:5px;
}

.tags a {
margin:5px;
background:{color:Tags};
padding:3px;
color:{color:Text};
-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;
}

.tags a:hover {
background:{color:Tags hover};
-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;
}


.tags {
text-transform:uppercase;
letter-spacing:1px;
font-size:7px;
word-wrap: break-word;
}

/*pagination*/
.pagination {
text-align:right;
padding-top:7px;
width:400px;
margin:100px 0;
font-size:8px;
font-family:calibri,"Trebuchet MS", sans-serif;
letter-spacing:1px;
text-transform:uppercase;
border-top:1px solid {color:Border};
}

.pagination a {
padding:9px 10px;
text-decoration:none;
}

.pagination a.cpage {
border-top:2px solid {color:links};
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: 15px 30px 15px 0;
border-bottom: 1px solid {color:border};
}

.pagenotes li a {
text-decoration:none;
color:#989898;
}

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

#credit a {
color:{color:Text};
background:{color:Accent};
border:1px solid {color:Border};
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">

<div class="blogtitle" ><a href="/" >{Title}</a></div>
<div class="description">{Description}</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}
</div>




</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-400}" 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}
{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}
<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: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:Audio}

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

{block:Answer}
<div class="question">
<div class="q"><img src="{AskerPortraitURL-64}"></div>
<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}">{DayOfMonth} {ShortMonth}</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}</div>
<div class="tags">
{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>

<!-- be a good person to others and follow your dreams --->