celeste - theme

<!------------------------------------------------------------------------

                        celeste
                        by @atlasthemes
                        pls dont remove credit
                        pls dont use as a base code
                        thanks!<3

------------------------------------------------------------------------->
<html>
<head>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">

<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

<meta name="description" content="" />
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<meta name="image:sidebar background" content="" />
<meta name="color:background" content="#FFFFFF">
<meta name="color:sidebar color" content="#fbf4f3">
<meta name="color:text" content="#444444">
<meta name="color:link" content="#aaaaaa">
<meta name="color:link underline" content="#eadbd9">
<meta name="color:accent" content="#c09992">
<meta name="color:shadow" content="#cccccc">
<meta name="color:borders" content="#eeeeee">
<meta name="text:title" content="your title here">
<meta name="text:font size" content="11px"/>
<meta name="text:letter spacing" content="0.25px"/>
<meta name="select:font" content="Open Sans"/>
<meta name="select:font" content="Fira Sans"/>
<meta name="select:font" content="Lora"/>
<meta name="select:font" content="Muli"/>
<meta name="select:font" content="Times New Roman"/>
<meta name="select:font" content="Georgia"/>
<meta name="select:text align" content="left"/>
<meta name="select:text align" content="justify"/>
<meta name="if:sidebar background" content="1">
<meta name="select:post size" content="400px"/>
<meta name="select:post size" content="450px"/>
<meta name="select:post size" content="480px"/>
<meta name="select:post size" content="500px"/>
<meta name="text:link 1" content="one">
<meta name="text:link 1 url" content="/">
<meta name="text:link 2" content="two">
<meta name="text:link 2 url" content="/">
<meta name="text:link 3" content="three">
<meta name="text:link 3 url" content="/">
<meta name="text:link 4" content="four">
<meta name="text:link 4 url" content="/">

<!--- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,700,700i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i" rel="stylesheet">

<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>
<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<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><script src="https://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
<script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>

<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:600,
attribute:"title"
});
});
})(jQuery);
</script>

<script>
$(document).ready(function(){  $('.posts').unnest({
    yourCaption: ".caption",
    wrapName: ".cap",
    newCaptionUsername: true,
    originalPostCaptionUsername: false,
    tumblrAvatars: false,
    tumblrAvatarClass: ".icon",
    usernameColon: false
});

}); </script>

<script>
$(document).ready(function(){
   $('.search').submit(function(event){
       var value = $('input:first').val();
       location.replace('http://{Name}.tumblr.com/tagged/' + value);
   });
});
</script>

<script>
$(document).ready(function(){
   $('.photo-slideshow').pxuPhotoset({
       lightbox: true,
       highRes: true,
       gutter: '1px',
       borderRadius: '0px',
       photoset: '.photo-slideshow',
       photoWrap: '.photo-data',
       photo: '.pxu-photo'
   });

}); </script>


<style type="text/css">

@-webkit-keyframes fadein {
        0%   {opacity: 0;}
        100% { opacity: 1; }}

@-moz-keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }}

@keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }}

::-webkit-scrollbar {width:9px;height:9px;}
::-webkit-scrollbar {background-color:transparent;}
::-webkit-scrollbar-track {border:4px solid {color:background};background-color:#ddd;}
::-webkit-scrollbar-thumb {border:4px solid {color:background};background-color:#c09992;min-height:24px;min-width:24px;}

#s-m-t-tooltip {max-width:300px;margin-top:25px;margin-left:0px;font-size:10px;font-family:{select:font};text-align:center;text-transform:lowercase;padding:2px 6px;border:1px solid {color:borders};color:{color:text};background-color:{color:background};z-index:999999;}

.tumblr_blog {color:{color:text};font-weight:700;border:0px!important;display:inline-block;margin-bottom:-10px;margin-top:-5px;} .tumblr_blog a:hover {text-decoration:none;color:{color:text};} .cap {margin-left:0px;width:{select:post size};position:relative;} .cap a {border-bottom:1px solid {color:link underline};color:{color:text};} .cap blockquote {width: calc({select:post size} - 20px);margin-left:0px;padding-left:20px;border-left:1px solid {color:borders};} .cap img {max-width:100%;height:auto;}

h1, h2, h3, h4, h5, h6 {font-size:calc({text:font size} + 3px);margin:0px;padding:0px;font-weight:400;} hr {width:50px;margin:auto;border-width: 1px 0px 0px 0px;border-style: solid;border-color: {color:borders};} pre {font-size: {select:font size};font-family: {select:font};width:{select:post size};text-align:left;word-break: break-all;color:{color:Text};} shortborder2 {width:15px;height:1px;background-color:{color:borders};display:inline-block;vertical-align:middle;}

body {font-family:{select:font};color:{color:Text};font-size:{text:font size};background-color:{color:Background};letter-spacing:{text:letter spacing};text-align:{select:text align};line-height:18px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;-webkit-animation: fadein 1s;-moz-animation:fadein 1s;animation:fadein 1s;} small, sup, sub {font-size:{select:font size};}

u {text-decoration:none;border-bottom:1px solid {color:accent};} a {color: {color:text};text-decoration:none;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;} a:hover {color:{color:accent};text-decoration: none;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;}

aside {
    width: 350px;
    {block:ifsidebarbackground}
    background: url({image:sidebar background});
    background-size:cover;background-position:center;
    {/block:ifsidebarbackground}
    background-color:{color:sidebar color};
    position: fixed;left:0px;
    top:0px;
    height:100%;
    font-size:{select:font size};
    line-height:18px;
}

.title {font-family:{select:font};color:#444;font-size:14px;text-align:center;text-transform:lowercase;margin-bottom:10px;} .box {display:block; position:relative; margin:auto; background-color: #fff; background-color: rgba(255,255,255,0.8); padding:20px; width:50%; top:35%;box-shadow:3px 5px 10px 0px {color:shadow};} nav {color:{color:text};text-align:center;display:grid;grid-template-columns:49.5% 49.5%;grid-gap:5px;} nav a {display:block;color: {color:text};} nav a:hover {color:{color:accent};} #desc {font-size:{select:font size};line-height:18px;margin-top:10px;text-align: center;color: {color:text};margin-bottom:15px;} #desc a {text-transform:lowercase;color:{color:text};} #desc a:hover {color:{color:accent};}

.pagination {width:100%;margin-top:-25px;margin-bottom:100px;text-align:center;text-transform:lowercase;} .pagination a {color:{color:text};padding:6px;}.pagination a:hover {color:{color:accent};text-decoration:none;} .current-page {color: {color:link};font-size: {select:font size};padding:6px;}

.container {width:{select:post size};margin:auto;padding-left:250px;}
.postscontainer {width:{select:post size};}

.photo-slideshow {visibility: hidden;} .photo-slideshow.processed {visibility: visible;} .photo-slideshow .row {clear: both;width: 100%;} .photo-slideshow .pxu-photo {display: block;float: clear;width: 100%;overflow: hidden;} .photo-slideshow .pxu-photo img {display: block;} .photo-slideshow.processed .pxu-photo img {width:100%;height: auto;} .photo-slideshow .pxu-photo:first-child img {margin:auto;} .photo-slideshow .count-1 {max-width:100%;height: auto;} .set {margin-left:10px;} .photo-slideshow .count-2 {width:50%;height: auto;} .photo-slideshow .count-3 {width:33.33%;height: auto;}

.posts {width:{select:post size};font-size: {select:font size};font-family: {select:font};margin-top:60px;margin-bottom:100px;line-height:17px;text-align:left;background-color:#fff;} .posts img {max-width:100%;height:auto;}

.info {display:block;margin-top:10px;text-align:left;text-transform:lowercase;} .info .lnr {font-size:calc({text:font size} - 2px);margin-right:10px;color:{color:accent};font-weight:700;} .info a {color:{color:text};margin-right:10px;} .info a:hover {text-decoration:none;color:{color:accent};} .tags {width:100%;margin-top:5px;font-family:{select:font};text-align:left;font-size:{select:font size};word-break:break-word;} .tags a {margin-right:6px;color:{color:link};} .tags a:hover {color:{color:text};}

ul li {color:{color:text};margin-left:-33px;list-style:none;} ul li:before {color:{color:text};content:"—"; font-size:1em; padding-right:.5em; position:relative;} ol {color:{color:text};margin-left:-25px;}

.postsnote {width:100%;margin-top: 30px;margin-bottom:50px;background-color:#fff;} .postsnote ol, .notes-bottom ul {margin: 0px;padding: 10px 0;list-style: none;} .postsnote li {width:90%;margin:2px;font-size: {select:font size};float:left;text-align:left;} .postsnote li img.avatar {display:none;} .more_notes_link {position:relative;list-style:none;text-transform:lowercase;margin-top:10px;float:left;margin-bottom:75px;}

.playerbuttonbg {position: absolute;left: 18px;top: 18px;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;} .playerbuttonbg:hover {opacity: 1;filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1; } .newplayerbutton {position: relative;width: 19px;height: 19px;overflow: hidden;} .playerbuttonhug {position: absolute;top: 0px;left: 0px;}
.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: 5px;top: 3px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;overflow: hidden;width:66px;height:66px;} .audioimgwrapper img {width: 100%;height: auto;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;} .trackdetails {width: auto;font-size: 11px;line-height:18px;display:inline-block;margin-left: 70px;margin-top:0px;margin-bottom:-15px;padding:5px;min-height:70px;} .audiowrapper {position: relative;display:inline-block;border:1px solid #eee;padding:5px;}

iframe#youtube_iframe {width: {select:post size}!important;height: auto;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;}

.quote {display:block;font-size:calc({text:font size} + 2px);} .source {margin-top:10px;font-style:italic;} .chat {margin-top:5px;font-size: {select:font size};} .chatlabel {font-weight:bold;display:inline-block;margin-right:1px;} .chat .lines {margin-left:0; } .chat .lines span {font-weight: bold;} .ask {width:{select:post size};text-align:left;} .question {border:1px solid {color:borders};padding:10px;line-height:18px;} .asker {font-size:{select:font size};text-transform:lowercase;display:inline-block;font-weight:600;} .answer {width:{select:post size};text-align:left;margin-bottom:1px;line-height:18px;}
.links blockquote {margin:0px;padding:0px;}

/*--pls don't edit!--*/
.credit {position:fixed;right:15px;bottom:20px;}.credit a {color:#a1a1a1;background:transparent;font-family:times new roman;font-size:14px;}

iframe.tmblr-iframe {
    z-index:99999999999999!important;
    top:0!important;
    right:0!important;
    opacity:0.4;
    /* delete invert(1) from here */
        filter:invert(1) contrast(150%);
        -webkit-filter:invert(1) contrast(150%);
        -o-filter:invert(1) contrast(150%);
        -moz-filter:invert(1) contrast(150%);
        -ms-filter:invert(1) contrast(150%);
    /* to here if your blog has a dark background */
    transform:scale(0.65);
    transform-origin:100% 0;
    -webkit-transform:scale(0.65);
    -webkit-transform-origin:100% 0;
    -o-transform:scale(0.65);
    -o-transform-origin:100% 0;
    -moz-transform:scale(0.65);
    -moz-transform-origin:100% 0;
    -ms-transform:scale(0.65);
    -ms-transform-origin:100% 0;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

iframe.tmblr-iframe:hover {
    opacity:0.6!important;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
</style>
</head>

<body>

<aside>
<div class="box">
<div class="title"><a href="/">{text:title}</a></div><hr>
<div id="desc">{Description}</div>

<nav>
<a href="/">home</a>
<a href="/ask">contact</a>
<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="{text:link 4 url}">{text:link 4}</a>
</nav>

</div>
</aside>

<div class="container">

<div class="postscontainer" id="{PostID}">{block:Posts}<div class="posts" id="{PostID}">{block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}<div class="caption">{Body}</div>{/block:Text}

{block:Quote}<div class="quote">&#8220;{Quote}&#8221;</div><div class="source"> {block:Source}{Source}{/block:Source}</div>{/block:Quote}

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

{block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:lines}<div class="chat"><div class="lines">{block:label}<div class="chatlabel">{label}</div>{/block:label} {line}</br></div></div>{/block:lines}{/block:Chat}

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

{block:Photo}{linkopentag}<img src="{photoURL-HighRes}" alt="{PhotoAlt}"/>{linkclosetag}{/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:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}

{block:Audio}{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}<span style="font-weight:bold;font-style:italic;">Track:</span> {TrackName} <br/>{/block:TrackName}{block:Artist}<span style="font-weight:bold;font-style:italic;">Artist:</span> {Artist} <br/>{/block:Artist}{block:Album}<span style="font-weight:bold;font-style:italic;">Album:</span> {Album} <br/>{/block:Album}{block:PlayCount}<span style="font-weight:bold;font-style:italic;">Plays:</span> {PlayCount}{/block:PlayCount}</div></div>{/block:AudioPlayer}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Audio}

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

{block:Date}<div class="info"><span class="lnr lnr-clock"></span><a href="{Permalink}" title="{timeago}">{ShortMonth} {DayOfMonth}</a>{block:NoteCount}<span class="lnr lnr-bookmark"></span><a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}<span class="lnr lnr-redo"></span><a href="{ReblogURL}" target="_blank" class="details">reblog</a>

{block:PermalinkPage}{block:RebloggedFrom}<br/>via: <a href="{ReblogParentURL}">{ReblogParentName}</a>{block:ContentSource}src: <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}{/block:RebloggedFrom}{/block:PermalinkPage}</div>{/block:Date}

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

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

</div>
{/block:Posts}

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

<div class="credit"><a href="http://www.atlasthemes.tumblr.com" target="_blank">a</a></div>

</div></div></div>
</body></html>