theme 01 - lightning

<!DOCTYPE html>

<!--

LIGHTNING theme (01) by PEACHTHMS | peachthms.tumblr.com
V1.1 - new tumblr controls
V1.2 - fixed ReblogURL link

- do not claim this page or any of the code as your own
- do not redistribute this page or any of the code as your own
- do not mix my code with another theme maker's code
- do not remove or edit the credit in anyway; it must remain visible

shythemes - minimalistic soundcloud player
shythemes - video resize script

-->

<head>

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">

<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">

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

<script src="https://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>


<!-- SHYTHEMES SOUNDCLOUD PLAYER -->

<script>
// minimal soundcloud player © shythemes.tumblr
$(document).ready(function(){
   var color = '#acd7bb'; // color of play button (hex)
   $('.soundcloud_audio_player').each(function(){
       $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 20, width: '100%' });
   });
});
</script>


<script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
<script src="https://use.fontawesome.com/3ef4dfb6e0.js"></script>

<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">

<script type="text/javascript">
 function unhide(divID) {
 var item = document.getElementById(divID);
 if (item) {
 item.className=(item.className=='hidden')?'unhidden':'hidden';
 }
 }
</script>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<meta name="color:background" content="#ffffff"/>
<meta name="color:post background" content="#ffffff"/>
<meta name="color:text" content="#686868"/>
<meta name="color:links" content="#686868"/>
<meta name="color:accent" content="#d1ad64"/>
<meta name="color:accent2" content="#898989"/>
<meta name="text:links title" content=""/>
<meta name="text:link one title" content=""/>
<meta name="text:link one" content=""/>
<meta name="text:link two title" content=""/>
<meta name="text:link two" content=""/>
<meta name="text:link three title" content=""/>
<meta name="text:link three" content=""/>
<meta name="text:link four title" content=""/>
<meta name="text:link four" content=""/>
<meta name="image:sidebar" content=""/>
<meta name="if:link one" content=""/>
<meta name="if:link two" content=""/>
<meta name="if:link three" content=""/>
<meta name="if:link four" content=""/>
<meta name="if:borders" content=""/>
<meta name="if:circle icon" content=""/>
<meta name="if:rounded corners" content=""/>
<meta name="select:font size" content="10px" title="10px"/>
<meta name="select:font size" content="11px" title="11px"/>
<meta name="select:font size" content="12px" title="12px"/>

<style>

.tmblr-iframe-compact .tmblr-iframe--unified-controls {
    transform: scale(0.5,0.5);
}

#s-m-t-tooltip {
    max-width: 100px;
    font-size: 8px;
    background-color: {color:accent};
    color: {color:text};
    z-index: 999;
    margin: 10px;
    text-transform: uppercase;
    padding: 2px 7px 3px;
}

::-moz-selection {
    background-color: transparent;
    color: {color:accent};
}

::selection {
    background-color: transparent;
    color: {color:accent};
}

::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

::-webkit-scrollbar-thumb {
    background: {color:accent};
}

::-webkit-scrollbar-track {
    background: {color:post background};
}

* {
    padding: 0;
    margin: 0;
}

iframe {
    margin: 20px 20px 0 0;
}

body {
    background-color: {color:background};
    font-family: 'Karla', sans-serif;
    color: {color:text};
}

img, #youtube_iframe {
   max-width: 100%;
   height: auto;
}

#container {
    width: 100%;
    height: 100%;
}

#content {
    width: 840px;
    height: auto;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    display: inline-block;
}

#topborder {
    top: 0;
}

#rightborder {
    right: 0;
}

#botborder {
    bottom: 0;
}

#leftborder {
    left: 0;
}

#topborder, #botborder {
    width: 100%;
    height: 10px;
}

#leftborder, #rightborder {
    width: 10px;
    height: 100%;
}

#topborder, #rightborder, #botborder, #leftborder {
    position: fixed;
    background-color: {color:accent};
    z-index: 99999;
}

#sidebar {
    margin-top: 100px;
    width: 200px;
    background-color: {color:post background};
    color: {color:text};
    font-size: 10px;
    line-height: 140%;
    padding: 15px;
    position: fixed;
    float: left;
}

#sidebar img {
    max-width: 40px;
    float: left;
    {block:ifcircleicon}
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    {/block:ifcircleicon}
}

#sidebar h1 {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-style: italic;
    text-align: right;
    padding-bottom: 5px;
    border-bottom: 1px solid {color:accent2};
}

#sidebar h2 {
    font-size: 10px;
    letter-spacing: 2px;
    background-color: {color:accent};
    color: #ffffff;
    text-transform: uppercase;
    padding: 10px;
    margin-top: 15px;
    {block:ifroundedcorners}
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    {/block:ifroundedcorners}
}

#sidebar p {
    margin-top: 15px;
}

#links {
    margin: 10px 0;
}

#links ul {
    list-style: none;
    padding: 0;
}

#links li {
    margin: 2px 0;
    background-color: {color:accent};
    padding: 10px;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    {block:ifroundedcorners}
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    {/block:ifroundedcorners}
}

#links li a {
    color: #ffffff;
}

#postcol {
    margin: 0 auto;
    margin-top: 80px;
    margin-bottom: 20px;
    width: 540px;
    float: right;
}

#posts {
    width: 500px;
    background-color: {color:post background};
    color: {color:text};
    font-size: 12px;
    line-height: 140%;
    padding: 15px;
    margin-bottom: 100px;
}

#posts h1 {
    font-size: 15px;
    text-transform: uppercase;
}

#posts p, #posts blockquote, #posts li {
    font-size: {select:font size};
}

#posts p, #posts img {
    max-width: 100%;
}

#postinfo {
    margin-top: 10px;
    font-size: 10px;
}

#posttop {
    margin-bottom: 10px;
    font-size: 10px;
    text-transform: uppercase;
}

#posttop span {
    float: right;
}

#tags {
    font-style: italic;
}

#tags a {
    margin-right: 15px;
}

#postleft {
    float: left;
    width: 450px;
}

#postright {
    float: right;
}

#pag {
    margin-top: 15px;
    text-transform: uppercase;
    font-size: 9px;
    display: inline-block;
}

#pag #next {
    float: left;
}

#pag #previous {
    float: right;
    position: absolute;
    right: 0;
    margin-right: 14px;
}

#pag a {
    border-bottom: 1px solid transparent;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#pag a:hover {
    padding-bottom: 5px;
    border-bottom: 1px solid {color:accent};
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#notes {
    margin-top: 30px;
    font-size: 10px;
    font-weight: bold;
    text-transform: lowercase;
    height: 200px;
    overflow-y: scroll;
}

#notes a {
    color: {color:text};
}

#notes ol {
    list-style: none;
}

#notes img {
    margin-top: 3px;
    margin-right: 15px;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
}

#quote {
    font-family: 'Times New Roman', serif;
    font-size: 15px;
    font-style: italic;
}

#ask {
    margin: 10px 0;
}

#label {
    text-transform: uppercase;
    font-weight: bold;
}

#line {
    max-width: 75%;
    padding: 5px;
    margin: 10px 0;
    font-style: none;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

#line:nth-of-type(even) {
    position: relative;
    float: right;
    clear: both;
    background-color: {color:accent2};
    color: #ffffff;
}

#line:nth-of-type(even):after {
    left: 100%;
    top: 90%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-left-color: {color:accent2};
    border-width: 4px;
    margin-top: -10px;
}

#line:nth-of-type(odd) {
    position: relative;
    float: left;
    clear: both;
    background-color: {color:accent};
    color: #ffffff;
}

#line:nth-of-type(odd):after {
    right: 100%;
    top: 90%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: {color:accent};
    border-width: 4px;
    margin-top: -10px;
}

a {
    font-weight: bold;
    text-decoration: none;
    color: {color:links};
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

a:hover {
    color: {color:accent};
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

small {
    font-size: {select:font size};
}

blockquote {
    border-left: 1px solid {color:accent2};
    padding-left: 7px;
    margin: 3px 0;
}

ul, ol {
    padding-left: 15px;
}

pre {
    margin: 10px 0;
    padding: 20px;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    background-color: #393939;
    color: #ffffff;
    max-width: 540px;
    overflow: auto;
}

#tags i, #postleft i, #postright i, #posttop i {
    color: {color:accent};
}

#posttop i {
    padding: 0 7px;
}

.hidden {
    display: none;
}

.unhidden {
    display: block;
}

.clear {
    clear: both;
}

.credit {
    position: fixed;
    bottom: 20px;
    left: 23px;
    font-size: 14px;
}

.credit a {
    font-weight: normal;
}

.credit span {
    font-size: 10px;
    background: {color:accent};
    color: {color:background};
    padding: 6px 9px;
    border-radius: 6px;
    opacity: 0;
    transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
}

.credit:hover span {
    margin-left: 15px;
    opacity: 1;
}

.credit:before {
    content: '\e2b0';
    font-family: 'saturnicons';
}

.credit:hover:before {
    color: {color:accent};
}

</style>

</head>

<body>

<div id="container">

{block:ifborders}
<div id="topborder"></div>
<div id="rightborder"></div>
<div id="botborder"></div>
<div id="leftborder"></div>
{/block:ifborders}

    <div id="content">

        <div id="sidebar">

        <h1><img src="{PortraitURL-40}"> {Title}</h1>

            <!-- to use a different image, simply replace {PortraitURL-40} with the link to your image -->

<div class="clear"></div>
        <p>{Description}</p>

        <a href="javascript:unhide('links');"><h2><i class="fa fa-chevron-down" aria-hidden="true"></i> {text:links title}</h2></a>
        <div id="links" class="hidden">
            <ul>
                <li><a href="/"><i class="fa fa-home" aria-hidden="true"></i> home</a></li>
                <li><a href="/ask"><i class="fa fa-envelope" aria-hidden="true"></i> message</a></li>
                <li><a href="/archive"><i class="fa fa-history" aria-hidden="true"></i> archive</a></li>
                {block:iflinkone}<li><a href="/{text:link one}"><i class="fa fa-user" aria-hidden="true"></i> {text:link one title}</a></li>{/block:iflinkone}
                {block:iflinktwo}<li><a href="/{text:link two}"><i class="fa fa-bars" aria-hidden="true"></i> {text:link two title}</a></li>{/block:iflinktwo}
                {block:iflinkthree}<li><a href="/{text:link three}"><i class="fa fa-folder" aria-hidden="true"></i> {text:link three title}</a></li>{/block:iflinkthree}
                {block:iflinkfour}<li><a href="/{text:link four}"><i class="fa fa-heart" aria-hidden="true"></i> {text:link four title}</a></li>{/block:iflinkfour}
            </ul>
        </div>

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

<div class="clear"></div>

        </div>

        <div id="postcol">

        {block:Posts}

        {block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}

        <div id="posts">
        {block:PermalinkPage}
        {block:Date}
        <div id="posttop">
        <a href="{BlogURL}">{Name}</a> {block:RebloggedFrom}<i class="fa fa-mail-forward" aria-hidden="true"></i> <a href="{ReblogParentURL}" title="via">{ReblogParentName}</a>{/block:RebloggedFrom}
        <span><a href="{ReblogURL}">reblog</a></span>
        </div>
        {/block:Date}
        {/block:PermalinkPage}

<div class="clear"></div>

        {block:Text}
        {block:Title}<h1>{Title}</h1>{/block:Title}
        {Body}
        {/block:Text}

        {block:Photo}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/></a> {/block:Photo}

        {block:Photoset}
        {Photoset}
        {/block:Photoset}

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

        {block:Quote}
        <div id="quote">"{Quote}"</div>
        {block:Source}<br>- {Source}{/block:Source}
        {/block:Quote}

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

        {block:Chat}
        {block:Title}<h1>{Title}</h1>{/block:Title}
        {block:Lines}<div id="line">
        {block:Label}<div id="label">{Label}</div>{/block:Label}
        <span>{Line}<br></span></div>{/block:Lines}
        <div class="clear"></div>
        {/block:Chat}

        {block:Audio}
        {AudioPlayerWhite}
        {block:TrackName}Track: {TrackName}<br>{/block:TrackName}
        {block:Artist}Artist: {Artist}<br>{/block:Artist}
        {block:Album}Album: {Album}<br>{/block:Album}
        {/block:Audio}

        {block:Answer}
        <div id="ask">{Asker} asked: {Question}</div>
        <blockquote>{Answer}</blockquote>
        {/block:Answer}

        {block:Caption}
        {Caption}
        {/block:Caption}


        <div id="postinfo">

        <div id="postleft">
         {block:NoteCount}<i class="fa fa-bookmark" aria-hidden="true"></i> <a href="{Permalink}"> {NoteCountWithLabel}</a></a>{/block:NoteCount}

        <div id="tags">
        {block:HasTags}<i class="fa fa-tags" aria-hidden="true"></i>{block:Tags} <a href="{TagURL}">{Tag}</a>{/block:Tags}{/block:HasTags}
        </div>
        </div>

        <div id="postright">
        {block:Date}<i class="fa fa-calendar-o" aria-hidden="true"></i> <a href="{Permalink}" title="{TimeAgo}">{DayOfMonthWithZero}.{MonthNumberWithZero}</a>{/block:Date}
        </div>

        </div>


<div class="clear"></div>

        {block:PostNotes}
        <div id="notes">{PostNotes}</div>
        {/block:PostNotes}

        </div>


        {/block:Posts}

        </div>

<div class="clear"></div>

    </div>


</div>


<div class="credit"><a href="http://peachthms.tumblr.com"><span>page by peachthms</span></a></div>

</body>

</html>