/ELECTRIC

<!DOCTYPE html>
<head>

<!-----

THEME BY @KIRK,
PLEASE DO NOT (RE)MOVE THE CREDIT!

CREDITS: VIDEO WIDTH FIX BY @SHYTHEMES!

----->

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

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

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="http://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>


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

<meta name="image:Avatar" content="">

<meta name="color:Text" content="#000">
<meta name="color:BG" content="#fff">
<meta name="color:Links" content="#ddd">
<meta name="color:Hover" content="#fff">
<meta name="color:Borders" content="#000">
<meta name="color:Accent One" content="#fff">
<meta name="color:Accent Two" content="#eee">
<meta name="color:Accent Three" content="#ddd">
<meta name="color:Shadows" content="#000">

<meta name="if:Side Shadows" content="0">
<meta name="if:Post Shadows" content="0">
<meta name="if:Descr" content="0">

<meta name="select:Post" content="250px">
<meta name="select:Post" content="300px">
<meta name="select:Post" content="400px">
<meta name="select:Post" content="500px">

<meta name="select:Font Size" content="12px">
<meta name="select:Font Size" content="13px">
<meta name="select:Font Size" content="14px">

<meta name="select:Font" content="calibri">
<meta name="select:Font" content="arial">
<meta name="select:Font" content="consolas">
<meta name="select:Font" content="ms gothic">
<meta name="select:Font" content="'Karla'" title="karla">
<meta name="select:Font" content="times">

<meta name="text:Desc" content="description">

<meta name="text:Link One" content="link">
<meta name="text:Link One URL" content="/">
<meta name="text:Link Two" content="link">
<meta name="text:Link Two URL" content="/">
<meta name="text:Link Three" content="link">
<meta name="text:Link Three URL" content="/">
<meta name="text:Link Four" content="link">
<meta name="text:Link Four URL" content="/">

<style type="text/css">


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

body {
margin:0px;
background:{color:BG};
font-family:{select:Font};
font-size:{select:Font Size};
line-height:140%;
color: {color:Text};
}

p{
margin:0 0 10px 0;
padding:0;
}

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

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

a:hover{
color:{color:Hover};
}

li{
margin-left:-15px;
}

#wrapper{
width:600px;
margin:50px auto;
}

#sidebar{
width:150px;
margin-left:-50px;
position:fixed;
}

#sidebarimg{
    {block:ifSideShadows}
  box-shadow:3px 3px 0px {color:Shadows}; {/block:ifSideShadows}
    background:{color:Accent One};
    padding:7px;
    width:100px;
border:1px solid {color:Borders};
}

#sidebarimg img{
    background:{color:Accent Two};
max-width:83px;
 display:block;
 padding:7px;
border:1px solid {color:Borders};
}

#sidebarlinks {
     {block:ifSideShadows}
      box-shadow:3px 3px 0px {color:Shadows}; {/block:ifSideShadows}
    margin-top:10px;
    border:1px solid {color:Borders};
 background:{color:Accent One};
 width:150px;
 padding:7px;
}

#sidebarlinks a{
    margin-right:7px;
}

#sidebarlinks a:hover{
     color:{color:Accent Two};
    background:{color:Accent Three};
}

#sidebarlinks a:last-child{
    margin-right:0px;
}

.sidebarlinks{
    border:1px solid {color:Borders};
    padding-top:3px;
    padding-bottom:3px;
    padding-left:7px;
    padding-right:7px;
    width:134px;
    background:{color:Accent Two};
}

#descr{
    margin-top:10px;
  width:150px;
}

#content{
width:calc({select:Post} + 100px);
margin-left:200px;
overflow:hidden;
}

#post {  {block:ifPostShadows}
         box-shadow:3px 3px 0px {color:Shadows}; {/block:ifPostShadows}
    overflow:hidden;
width:calc({select:Post} + 16px);
margin-bottom:90px;
padding:7px;
border:1px solid {color:Borders};
background-color:{color:Accent One};
}

#post img {
    padding-bottom:2px;
            overflow:auto;
    max-width:100%;
}

 .post{
    width:{select:Post};
    padding:7px;
    margin-bottom:0px;
    border:1px solid  {color:Borders};
    background-color:{color:Accent Two};
    }

#nav{
width:{select:Post};
padding-left:14px;
margin:20px 0 0 182px;
}

.footer{
   background:{color:Accent Two};
    border:1px solid {color:Borders};
padding:3px 6px 3px 6px;
margin-top:7px;
}

.footer a{
    margin-right:7px;
}

.footer a:hover{
    color:{color:Accent Two};
    background:{color:Accent Three};
}

.footer a:first-child{
    margin-left:52px;
}

.footer a:last-child{
    margin-right:0px;
}

#line{
    margin-top:7px;
}

#line a{
    padding:3px 6px 3px 6px;
    position:absolute;
border:1px solid {color:Borders};
    background:{color:Accent Two};
}

.captionfooter{
    margin-top:7px;
  background:{color:Accent Two};
    border:1px solid {color:Borders};
padding:7px;
}


.media{
margin:0 0 0px 0;
}

.title{
font-weight:normal;
font-size:18px;
margin:0 0 10px 0;
}

.quote{
font-weight:normal;
font-size:16px;
font-style:italic;
margin:0 0 10px 0;
}

.question{
margin-bottom:10px;
}

blockquote{
margin:0 0 10px 10px;
padding:0 0 0 10px;
border-left:solid 1px #000;
}

ol.notes{
list-style-type:none;
padding:10px;
margin:0;
}

ol.notes li.note img{
display:none;
}

ol.notes li.note{
margin:0px;
}


  ::-webkit-scrollbar {
width: 17px;
background: {color:Accent One};
border: 7px solid {color:BG};
}

::-webkit-scrollbar-thumb {
background: {color:Accent One};
border: 5px solid {color:BG};
}

.buttonback {
position: absolute;
left: 20px;
top: 20px;
width: 19px;
height: 19px;
background-color: {color:Accent};
padding: 10px;
opacity: .4;
transition: opacity .7s ease-in-out;
}

.buttonback:hover {
opacity: 1;
}

.actualbutton {
position: relative;
width: 20px;
height: 20px;
overflow: hidden;
}

.buttonwrapping {
position: absolute;
top: -4px;
left: -7px;
}

.tumblr_audio_player {
height: 100px;
width: 30px;
transform: scale(1, 1);
transform-origin: top left;
}

.audioimgwrapping {
position: absolute;
left: 0px;
top: 0px;
overflow: hidden;
width: 75px;
height: 75px;
}

.audioimgwrapping img {
width: 100%;
height: auto;
}

.trackdetails {
width: auto;
display:inline-block;
margin-left: 90px;
min-height: 90px;
}

.audiowrapper {
position: relative;
display:inline-block; }

.tumblr_video_container {
width:auto!important;
height:auto!important;
}

.tumblr_video_container {
width:auto!important;
height:auto!important;
}

#credit{
   position: fixed;
bottom: 4px;
right: 12px;
color:{color:Links};
z-index: 99;
font-size: 16px;
}

{CustomCSS}
</style>

<script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>

</head>

<body>
<div id="wrapper">


<div id="sidebar">
<a href="/" title="home">
<div id="sidebarimg">
<img src="{image:Avatar}"></div></a>
<div id="sidebarlinks">
<div class="sidebarlinks">
<a href="{text:Link One URL}">{text:Link One}</a>
<a href="{text:Link Two URL}">{text:Link Two}</a>
<a href="{text:Link Three URL}">{text:Link Three}</a>
<a href="{text:Link Four URL}">{text:Link Four}</a>
</div>
</div>
{block:ifDescr}
<div id="descr">{text:Desc}</div>{/block:ifDescr}
</div>



<div id="content">
{block:Posts}

<div id="post">
<div class="post" style="padding-bottom:0px">

{block:Text}
{block:Title}
<div class="title">{Title}</div>
{/block:Title}
{Body}
{/block:Text}

{block:Photo}
<div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" style="width:{select:Post}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
{/block:Photo}

{block:Photoset}
<div class="media" style="width:{select:Post}">{Photoset}</div>
{/block:Photoset}


{block:Quote}
<div class="quote">"{Quote}"</div>
{block:Source}
<div class="quotesource">{Source}</div>
{/block:Source}
{/block:Quote}

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

{block:Chat}
{block:Title}
<div class="title">{Title}</div>
{/block:Title}

{block:Lines}
<div class="{Alt} user_{UserNumber}">
{block:Label}
<b>{Label}</b>{/block:Label}
&nbsp;{Line}
</div>
{/block:Lines}
{/block:Chat}

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

{block:AudioPlayer}
<div class="audiowrapper">
{block:AlbumArt}
<div class="audioimgwrapping"><img src="{AlbumArtURL}"></div>
{/block:AlbumArt}
<div class="buttonback">
<div class="actualbutton">
<div class="buttonwrapping">{AudioPlayerWhite}
</div>
</div>
</div>
<div class="trackdetails">
{block:TrackName}<b>{TrackName}</b>{/block:TrackName}<br/>
{block:Artist}Artist: {Artist}{/block:Artist}<br/>
{block:Album}Album: {Album}{/block:Album}<br/>
{PlayCountWithLabel}
</div>
</div>
{/block:AudioPlayer}

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

</div>

{block:Date}
<div id="line">
<a href="{Permalink}">perma</a></div>
<div class="footer">
{block:RebloggedFrom}<a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}
{block:ContentSource}<a href="{SourceURL}">source</a>{/block:ContentSource}
<a href="{ReblogURL}" target="_blank" class="details">reblog</a>
</div>

{block:PermalinkPage}
<div class="captionfooter">
{block:Caption}<div class="caption" style="text-align:left">{Caption}</div>{/block:Caption}

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

{block:NoteCount}
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:NoteCount}
</div>
{/block:PermalinkPage}

{/block:Date}
</div>
{/block:Posts}
</div>

{block:Pagination}
<div id="nav">
{block:PreviousPage}<a href="{PreviousPage}">back</a>{/block:PreviousPage}

{block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
</div>
{/block:Pagination}
</div>
</div>
</div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="http://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>

<div id="credit"><a href="https://kirk.tumblr.com/">credit</a></div>

    </body>
</html>