Professional Documents
Culture Documents
Theme 40
Theme 40
--
> This theme was made by seedfawn aka kara-themes
> Problem? Contact me: kara-themes.tumblr.com/faq
> Credits:
PXU Photosets - shythemes
Video resize - shythemes
Links - planthed
> KEEP THE CREDITS!
-->
<html>
<head>
<title>{Title}</title>
<style type="text/css">
.tmblr-iframe{
top:5px;
right:5px;
-webkit-filter:invert(100%);
-moz-filter:invert(100%);
-o-filter:invert(100%);
-ms-filter:invert(100%);
filter: invert(100%);
opacity:.2;
z-index:999999999!important;
transition:.5s ease-in-out;
-webkit-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
-o-transition:.5s ease-in-out;
}
.tmblr-iframe:hover{
opacity:.5;
}
*{
cursor:
url(http://static.tumblr.com/p3mk1pa/DFKnysvin/tumblr_lqs4qduu8n1qfoi4t.png), auto;
}
body{
background:{color:background};
background-image:url({image:background});
font-family: 'Open Sans', sans-serif;
font-size:9px;
line-height:2em;
color:{color:text};
font-weight:400;
cursor:
url(http://static.tumblr.com/p3mk1pa/DFKnysvin/tumblr_lqs4qduu8n1qfoi4t.png), auto;
}
a{
color:{color:link};
text-transform:uppercase;
text-decoration:none;
font-weight:400;
letter-spacing:1px;
text-decoration:underline;
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
cursor:cursor:
url(http://static.tumblr.com/p3mk1pa/DFKnysvin/tumblr_lqs4qduu8n1qfoi4t.png), auto;
}
a:hover{
color:{color:hover};
font-weight:400;
cursor: url(http://static.tumblr.com/p3mk1pa/4eKnysvj3/help.png), help;
}
blockquote{
border-left: solid 1px #eee;
margin: 0;
padding-left:10px;
margin-left:10px;
}
#s-m-t-tooltip{
max-width:300px;
margin:10px;
padding:5px 5px;
letter-spacing:2px;
background:rgba(255, 255, 255, .85);
z-index:9999999999!important;
}
::selection{
color:#fff;
background:{color:selection};
}
::-moz-selection{
color:#fff;
background:{color:selection};
}
::-webkit-selection{
color:#fff;
background:{color:selection};
}
::-webkit-scrollbar-thumb{
background-color:{color:scrollbar};
border:4px solid {color:background};
height:auto;
}
::-webkit-scrollbar{
height:9px;
width:9px;
background-color:#dbdbdb;
border:4px solid {color:background};
}
.pagination{
{block:ifnotpagination}
display:none!important;
{/block:ifnotpagination}
width:{select:posts};
text-align:center;
vertical-align:middle;
padding:5px;
margin:0px auto;
margin-bottom:50px;
}
.jump_page {
padding:4px 8px;
color:{color:text};
margin-left:5px;
border:1px solid {color:pagination};
background-color:#fff;
text-decoration:none;
}
.current_page, .jump_page:hover {
padding:4px 8px;
color:{color:text};
border:1px solid {color:pagination hover};
background-color:{color:pagination hover};
}
#entry{
position:relative;
{block:ifnot2column}
width:{select:posts};
{/block:ifnot2column}
{block:if2column}
{block:ifnotpagination}
width:calc({select:posts} * 2 + 130px);
{/block:ifnotpagination}
{block:ifpagination}
width:calc({select:posts} * 2 + 160px);
left:15px;
{/block:ifpagination}
{/block:if2column}
top:20px;
margin:0px auto;
{block:permalinkpage}
width:{select:posts};
{/block:permalinkpage}
}
.posts{
width:{select:posts};
float:left;
margin-bottom:30px;
padding:25px;
{block:ifpagination}
margin-right:30px;
{/block:ifpagination}
}
.posts img{
display:block;
width:{select:posts};
max-width:{select:posts};
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.permalink{
width:calc(100% - 20px);
background:#fff;
padding:10px 10px 25px 10px;
text-align:left;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
.content{
background:#fff;
width:calc({select:posts} - 20px);
border-bottom:1px solid #eee;
padding:10px;
border-top-left-radius:3px;
border-top-right-radius:3px;
{block:permalinkpage}
width:357px;
{/block:permalinkpage}
}
.title{
color:{color:title};
margin-bottom:10px;
font-size:20px;
font-weight:300;
text-align:center;
padding:5px 5px 10px 5px;
letter-spacing:1px;
line-height:1.2em;
border-bottom:1px solid #eee;
}
.quotetitle{
margin-bottom:5px;
font-size:20px;
font-weight:300;
padding:5px 5px 5px 5px;
letter-spacing:1px;
line-height:1.2em;
}
.source{
text-align:center;
}
.linktitle{
margin-bottom:5px;
font-size:20px;
font-weight:300;
padding:5px 5px 5px 5px;
text-align:center;
letter-spacing:1px;
line-height:2em;
border-bottom:0px;
}
.linktitle a{
font-weight:300;
padding-bottom:3px;
border-bottom:1px solid {color:link};
text-decoration:none;
transition:all .3s ease;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
}
.linktitle a:hover{
border-bottom:1px solid {color:hover};
}
.playbox{
position:absolute;
margin-top:calc({select:posts} / 2 - 29px);
margin-left:calc({select:posts} / 2 - 30px);
background-color:#000;
opacity:0.7;
z-index:1000;
border-radius:100px;
}
.playbutton{
overflow:hidden;
position:relative;
width:20px;
height:30px;
background-color:#000;
margin:15px 24px 13px 16px;
z-index:1000;
}
.cover{
margin-left:0px;
margin-top:calc(-{select:posts} - 0px);
border-top-left-radius:3px;
border-top-right-radius:3px;
overflow:hidden;
width:{select:posts};
}
.cover img{
width:100%;
height:auto;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.artist, .track{
width:calc(100% - 10px);
margin-top:0px;
background:#fff;
border-bottom:1px solid #eee;
padding:5px;
display:inline-block;
}
.track{
margin-top:-1px;
border-top:1px solid #eee;
}
.audiowrapper{
position: relative;
display:inline-block;
}
.asker{
width:calc(100% - 10px);
position:relative;
margin-top:0px;
padding:5px 0px 0px 0px;
text-decoration:none;
z-index:9999;
}
.question{
width:calc(100% - 22px);
margin-bottom:10px;
background:#fbfbfb;
border:1px solid #eee;
padding:10px;
border-radius:3px;
}
#sidebar{
position:fixed;
margin-top:150px;
margin-left:80px;
opacity:1;
z-index:9999;
}
#sidebar{
position:fixed;
width:{select:sidebar};
margin-top:100px;
{block:ifnotrightsidebar}
left:100px;
{/block:ifnotrightsidebar}
{block:ifrightsidebar}
right:100px;
{/block:ifrightsidebar}
background:#fff;
border-top-left-radius:3px;
border-top-right-radius:3px;
z-index:9999;
}
.sidebarimg{
width:{select:sidebar};
height:auto;
margin-left:0px;
margin-top:0px;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.sidebarimg img{
width:100%;
height:auto;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.blogtitle{
position:absolute;
margin-top:-20px;
font-size:15px;
font-weight:300;
letter-spacing:1px;
line-height:1.2em;
color:{color:blogtitle};
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
/* CODING BY PLANTHED */
.links{
overflow:auto;
}
.links a{
display:block;
width:auto;
color:{color:text};
text-transform:none;
transition:all .3s ease;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
}
.links a:hover{
color:{color:navigation};
}
.links a:before{
content:'';
height:1px;
width:0px;
display:inline-block;
position:relative;
top:-2px;
background:transparent;
margin-right:5px;
margin-left:5px;
opacity:1;
transition:all .3s ease;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
}
.links a:hover:before{
width:30px;
background:{color:navigation};
opacity:1;
transition:all .3s ease;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
}
/* CODING BY PLANTHED */
.desc{
margin-top:5px;
text-align:left;
padding:10px;
border-top:1px solid #eee;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
.vignette, #vignette {
opacity:0;
}
.tmblr-lightbox, #tumblr_lightbox {
background-color:rgba(0,0,0,.5) !important;
}
.lightbox-image, #tumblr_lightbox img {
box-shadow:none !important;
border-radius:0 !important;
background:transparent !important;
padding:1px !important;
border-radius:0px !important;
border:1px solid #fff !important;
max-width:none;
}
.lightbox-caption, #tumblr_lightbox_caption {
visibility:hidden;
}
.caption{
position:relative;
margin-top:10px;
padding:3px 10px 3px 10px;
background:#fbfbfb;
border-left:1px solid #eee;
}
.credit{
position:fixed;
bottom:10px;
right:10px;
padding:5px;
}
.hvr-underline-from-left {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-left:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
background: {color:hover};
height: 1px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-
underline-from-left:active:before {
right: 0;
}
img.emoji {
width:15px;
padding:5px;
margin:0px !important;
display:inline !important;
vertical-align:middle;
}
ol.notes{
width:100%;
padding:0px;
margin:25px 0px;
list-style-type:none;
}
ol.notes li.note{
margin-bottom:25px;
border:solid 1px #eee;
background:#fff;
padding:10px;
}
.permapage{
margin-top:25px;
width:calc(100% - 20px);
padding:10px;
background:#fff;
border:1px solid #eee;
z-index:9999;
}
</style>
</head>
<body>
<div id="sidebar">
<div class="blogtitle">{text:Blogtitle}</div>
{block:ifsidebarimage}
<div class="sidebarimg"><img src="{image:Sidebar}"></div>
{/block:ifsidebarimage}
<div class="links">
<a href="/">Refresh</a>
<a href="/ask">Inbox</a>
<a href="{text:Link 1 URL}"><span>{text:Link 1 Title}</span></a>
<a href="{text:Link 2 URL}">{text:Link 2 Title}</a>
<a href="{text:Link 3 URL}">{text:Link 3 Title}</a>
</div>
<div class="desc">{Description}</div>
</div>
<div id="entry">
{block:Posts}
<div class="posts" id="{PostID}">
{block:Photo}
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="1000px;"/>
{/block:Photo}
{block:Photoset}
<div class="photo-slideshow" id="photoset_{PostID}" data-
layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-
photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-
500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-
height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}"
href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
{/block:Photoset}
{block:Text}
<div class="content">
{block:Title}
<div class="title">{Title}</div>
{/block:Title}
{Body}
</div>
{/block:Text}
{block:Quote}
<div class="content">
<div class="quotetitle">"{Quote}"</div>
{block:Source}
<div style="margin-bottom:10px; margin-left:calc(50% - 70px); width:50%;
height:1px; background:#eee"></div>
<div class="source">{Source}</div>
{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="content">
<div class="linktitle"><a href="{URL}" {Target}><i class="ion-ios-upload-
outline"></i> {Name}</a></div>
{block:Description}
<div style="margin-top:15px;">{Description}</div>
{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="content">
{block:Title}
<div class="title">{Title}</div>
{/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>
</div>
{/block:Chat}
{block:Audio}
<div class="audiowrapper">
<div class="playbox">
<div class="playbutton">
{block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}
</div></div>
{block:AlbumArt}
<img src="http://static.tumblr.com/p3mk1pa/MdCo5tbia/default-img.gif">
<div class="cover"><img src="{AlbumArtURL}"></div>
{/block:AlbumArt}
<div class="artist">
{block:Artist}<span class="label">Artist:</span> {Artist}{/block:Artist}
</div>
<div class="track">
{block:TrackName}<span class="label">Song:</span> {TrackName}{/block:TrackName}
</div>
</div>
{/block:Audio}
{block:Video}
<div class="video" style="display:block;">{Video-500}</div>
{/block:Video}
{block:Answer}
<div class="content">
<div class="asker">{Asker}</div>
<div class="question">{Question}</div>
{Answer}
</div>
{/block:Answer}
{block:IndexPage}
<div class="permalink">
{block:ifCaption}
{block:Caption}
{Caption}
<div style="margin-top:0px; margin-left:calc(50% - 60px); margin-bottom:5px;
width:50%; height:1px; background:#eee"></div>
{/block:Caption}
{/block:ifCaption}
<a href="{Permalink}" style="float:right;">{NoteCount}</a>
</div>
{/block:IndexPage}
{block:permalinkpage}
<div class="permapage">
{block:Date}<span class="label"><i class="fa fa-clock-o"></i> Posted:</span>
{DayOfWeek} {Month} {DayOfMonth}{DayOfMonthSuffix} {Year} at {12Hour}:{Minutes}
{AmPm} {/block:Date}<br>
{block:NoteCount}<span class="label"><i class="fa fa-share-alt"></i> Notes:</span>
{NoteCount}<br>{/block:NoteCount}
{block:RebloggedFrom}<span class="label"><i class="fa fa-retweet"></i> Reblogged
from:</span> <a href="{ReblogParentURL}">{ReblogParentName}</a><br><span
class="label"><i class="fa fa-location-arrow"></i> Source:</span> <a
href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
{block:HasTags}<div id="tags"><span class="label"><i class="fa fa-tags"></i>
Tags:</span>
{block:Tags}
<a href="{TagURL}">#{Tag} </a>
{/block:Tags}
</div>
{/block:HasTags}
</div>
{block:PostNotes}
{PostNotes-64}
{/block:PostNotes}
{/block:permalinkpage}
</div>
{/block:Posts}
</div>
{block:Pagination}
<div class="pagination">
{block:PreviousPage}<a href="{PreviousPage}" class="jump_page"><i class="ion-arrow-
left-b"></i></a>{/block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}<span
class="current_page">{PageNumber}</span>{/block:CurrentPage}
{block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}<a href="{NextPage}" class="jump_page"><i class="ion-arrow-right-
b"></i></a>{/block:NextPage}
</div>
{/block:Pagination}
<script>
$(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: true,
gutter: '1px',
borderRadius: '3px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
});
(function() {
var $container = $('#entry');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.posts, .posts_photo',
gutter: 30
});
});
$container.infinitescroll({
navSelector: ".pagination",
nextSelector : ".pagination a",
itemSelector : ".posts, .posts_photo",
loading: {
finishedMsg: 'No more pages to load.'
}
},
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
$( newElements ).find('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: true,
borderRadius: '3px',
gutter: '1px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
});
resizeVideos();
})();
</script>
{/block:ifnotpagination}
<!-- infinite scroll end -->
<script type="text/javascript">
$(window).load(function () {
$('#entry').masonry({
itemSelector : ".posts, .posts_photo",
},
function() { $('#entry').masonry({ appendedContent: $(this) }); }
);
});
</script>
{/block:if2column}
{/block:ifpagination}
<script>
$(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: true,
gutter: '1px',
borderRadius: '3px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
resizeVideos();
});
</script>
{block:ifpagination}
<!-- pxu photoset end -->
<!-- pagination end -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300'
rel='stylesheet' type='text/css'>
<script src="http://static.tumblr.com/lxn1yld/MHfnxce9x/emoji.js"></script>
<!-- emoji end -->
<!-- fonts end -->