Butterfly

<!DOCTYPE html>
<head><title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<!-----------theme "butterfly" by iristhms@tumblr---------------------->
<!-----------do not remove credit!!------------------->
<!-----------base code by mrsthemes@tumblr------------>
<!--------default variables-------->
<meta name="color:background" content="#ffffff"/>
<meta name="color:text" content="#333333"/>
<meta name="color:title" content="#333333"/>
<meta name="color:description" content="#333333"/>
<meta name="color:links" content="#5b5b5b"/>
<meta name="color:links hover" content="#c9c9c9"/>
<meta name="color:scrollbar bg" content="#ffffff"/>
<meta name="color:scrollbar" content="#E8E8E8">
<meta name="color:scroll" content="#CFCFCF">

<meta name="image:sidebar image" content=""/>
<meta name="image:background image" content=""/>

<meta name="text:link 1 title" content="link">
<meta name="text:link 1 url" content=" ">
<meta name="text:link 2 title" content="link">
<meta name="text:link 2 url" content=" ">
<meta name="text:link 3 title" content="link">
<meta name="text:link 3 url" content=" ">
<meta name="text:pop up link 4 title" content="link">
<meta name="text:pop up link 4 url" content="/">
<meta name="text:pop up link 5 title" content="link">
<meta name="text:pop up link 5 url" content="/">
<meta name="text:pop up link 6 title" content="link">
<meta name="text:pop up link 6 url" content="/">

<meta name="text:pop up text" content="Write here (updates, about, etc)">

<meta name="if:show link 1" content="1" />
<meta name="if:show link 2" content="1" />
<meta name="if:show link 3" content="1" />
<meta name="if:show pop up link 4" content="1" />
<meta name="if:show pop up link 5" content="1" />
<meta name="if:show pop up link 6" content="1" />
<meta name="if:rounded edges" content="1" />
<meta name="if:circle sidebar image" content="0" />
<meta name="if:200px" content="1" />
<meta name="if:300px" content="0" />
<meta name="if:400px" content="0" />
<meta name="if:Show Captions" content="0" />


<!------------------------TOOLTIPS SCRIPT--------------------->

<link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/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>

 <link href='https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!-------------------------------------------------------------------->

<style type="text/css">

/*----------tooltips---------*/

#s-m-t-tooltip {
max-width:210px;
margin-top:25px;
margin-left:15px;
padding:2px 5px;
z-index:999999;
background:#fff;;
color:#000000;
z-index:999999;
font-size:7px;
line-height:10px;
font-style:none;
font-weight:lighter;
letter-spacing:2px;
font-family:'karla', sans-serif;
text-transform:uppercase;
box-shadow:1px 1px 3px rgba(0,0,0,.0);
opacity:0.5;
}




/* Scroll */

::-webkit-scrollbar {
    width:17px;
    height:17px;
}
::-webkit-scrollbar {
    background-color:#ffffff;
}
::-webkit-scrollbar-track {
    border:8px solid #ffffff;
    background-color:#ffffff;
}
::-webkit-scrollbar-thumb {
    border:8px solid #ffffff;
    background-color:#CFCFCF;
}


/*----------basics---------*/

body {
background:#ffffff url(http://assets.tumblr.com/images/x.gif?v=1) repeat right top fixed;
color:#000000;
font-family:'karla', sans-serif;
line-height:15px;
font-size:10px;
margin:0;
text-align:left;
}

blockquote {
padding-left:10px;
border-left:1px solid;
border-color:#eeeeee;
margin:10px;
}

a {
color:#646464;
text-decoration:none;
}

a:hover {
text-decoration:none;
color: #9d9d9d;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s;
}

img {
opacity:1;
text-decoration:none;
}

h1 {
font-size:11px;
font-weight:bold;
}
/*----------popup---------*/

.popup{
   position:fixed;
   width:25%;
    text-transform:uppercase;
    font-size:8px;
    letter-spacing:1px;
   height:60%;
   top: -200px;
   left:20px;
   color:#000000;
   background-color:#ffffff;
   z-index:999;
   font-family:'karla', sans-serif;
   display:none;
}

.close {
    height:100vh;
    width:100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index:-1;
}

section {
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: 1.0s;
    width:250px;
    margin:250px auto;
    z-index:1;


}

/*----------posts---------*/

.container {
left:50%;

    width:200px;


    width:300px;


position:absolute;

}

.posts {

margin-bottom:40px;



    width:200px;


    width:300px;



padding-top:25px;
border-top:1px solid #eeeeee;

}

.entries {
margin-left:-60px;
width:200px;
margin-top:50px;

    width:200px;


    width:300px;


margin-bottom:50px;

}

.posts img, .posts li, .posts blockquote {
max-width: 100%;


}


.posts li {
list-style: square;

}

blockquote img {
max-width:320px!important;
}


/*----------post info---------*/

.info {
    position:absolute;
    right:-20px;
    text-transform:uppercase;
    font-size:8px;
    font-weight:400;
    text-align:center;
opacity:0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
{block:permalinkpage}
opacity:1
{/block:permalinkpage};

}

.posts:hover .info {
    opacity:1;
}
.tags {
margin-top:5px;
font-size:8px;
letter-spacing:1px;
font-style:italic;
opacity:0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

.posts:hover .tags{
    opacity:1;
}
.tags a {
margin-right:8px;
}


/*----------post notes---------*/


.perma2 {
    color:;
    font-family:'karla', sans-serif;
    font-size:8px;
    text-transform:uppercase;
    line-height:14px;
    letter-spacing:1px;
    padding-bottom:15px;
    border-bottom:1px solid ;
    }
ol.notes {
    height:204px;
    overflow:auto;
    padding:0px;
    margin:15px 0px;
    list-style-type:none;
    text-align:left;
    }
 li.note {



    padding:5px 8px;
    margin:0px 5px 4px 0px;
    background:;
    color:;
    font-family:'karla', sans-serif;
    font-size:8px;
    text-transform:uppercase;
    line-height:10px;
    letter-spacing:1px;
    }
ol.notes li.note {
padding:10px;
}

ol.notes li.note img.avatar {
vertical-align:-4px;
margin-right:10px;
width:16px;
height:16px;
}

ol.notes li.note span.action {
font-weight:none;
}

ol.notes li.note .answer_content {
font-weight:normal;
}

ol.notes li.note blockquote {
padding:4px 10px;
margin:10px 0px 0px 25px;
}

ol.notes li.note blockquote a {
text-decoration:none;
}

img.avatar { display:none; }

/*----------sidebar---------*/

.sidebar {
position:fixed;
width:150px;
margin-left:-350px;
top:250px;
}

.sidebarimage {
width:150px;

}

.sidebarimage img {
width:70px;
margin-left:-30px;
height:70px;
margin-bottom:0px;

border-radius: 50px;

-webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;

border: 1px solid #E8E8E8;
padding:3px;
}

.sidebarimage img:hover {
    cursor:help;
    opacity:0.7;
}

.sidetitle {
font-family:'trebuchet ms';
width:200px;
margin-top:-60px;
margin-left:60px;
font-size:18px;
text-transform:uppercase;
font-weight:bold;
text-align:left;
color:#000000;
letter-spacing:1px;
}

.description {
width:150px;
margin-left:60px;
text-align:left;
color:#000000;
font-family:calibri, arial, sans-serif;;
margin-top:10px;
letter-spacing:0.5px;
}

.links {
    border-bottom:1px solid #eeeeee;
width:160px;
text-align:center;
margin-top:30px;
letter-spacing:1px;
word-spacing:3px;
color:#646464;
text-transform:uppercase;
opacity:1;
font-size:8px;
}

.links a {
padding:5px;
}

.hidden {
    height:0px;
    overflow:hidden;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    }

.sidebar:hover .hidden { height:25px; }

.blockquote {
    border-left: 1px solid ;
    margin-left: 6px;
    padding-left: 10px;
    line-height:15px;
}

/*----------pagination---------*/
.pagination {
    text-transform:uppercase;
    font-size:8px;
    letter-spacing:1px;
border-top:1px solid #eeeeee;

    width:200px;


    width:300px;


margin-top:0px;
text-align:center;
padding-top:10px;

}
/*----------quotes---------*/

.quote {

font-size:12px;
font-weight:bold;
text-align:center;
}

.quotesource {
text-align:center;
margin-top:10px;
}


/*----------chat---------*/

.chat {
line-height:20px;
list-style:none;
}

.line.odd {
background:#fafafa;
margin-bottom:2px;
padding:5px;
list-style:none;
font-size:10px;
}

.line.even {
background:#ffffff;
margin-bottom:2px;
padding:5px;
list-style:none;
font-size:10px;
}

.label {
padding-right:1px;
text-transform:uppercase;
font-weight:bold;
color:#646464;
}


/*----------questions---------*/

.question {
background:#fafafa;
padding:10px;

}

.asker {
text-transform:uppercase;
}

.answer {
padding:10px;
margin-top:-15px;
}

/*----------audio---------*/

.playerbutton {
position:relative;
width:175px;
height:30px;
overflow:hidden;

}

.playerbuttonhug {
position: absolute;
top:-7px;
left:2px;
}

.tumblr_audio_player {
height:50px;
width:500px;
}

.playerbuttonbg {
position:absolute;

    width:180px;


    width:280px;


height:35px;
background-color:#e4e4e4;
padding:10px;

}

.trackdetails {
width:200px;
display:inline-block;
margin-left:0px;
margin-top:60px;
font-size:10px;
letter-spacing:1px;
text-transform:lowercase;
padding:5px;
line-height:15px;
}

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

/*----------credit---------*/

.credit {
font-size:10px;
position:fixed;
font-weight:bold;
bottom:5px;
font-family:'karla', sans-serif;
right:5px;
z-index:10;
text-align:right;
letter-spacing:1px;
padding:2px;
}

.credit a {
color:#646464;
text-decoration:none;
}

.credit a:hover {
color:#9d9d9d;
text-decoration:none;
}

/*----------photoset---------*/
.photoset{

}

/* tumblr lightbox */

.vignette{
    opacity:0;
}

.lightbox-image {
    -moz-box-shadow:none!important;
    -webkit-box-shadow:none!important;
    box-shadow:none!important;
    -moz-border-radius:0px!important;
    -webkit-border-radius:0px!important;
    border-radius:0px!important;
    padding:0px!important;
    margin:0px!important;
    border:0!important;
    opacity:1!important;
}

.tmblr-lightbox {
    background-color:rgba(250,250,250,.95) !important;
}

.tmblr-lightbox img {opacity:0;}
}

.lightbox-caption{
    visibility:hidden;
}


</style>
<!--photosets-->
<link href="http://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="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
<script>
/*----------photosets---------*/

$(function(){
   $("#modal").click(function(){
      id = $(this).attr("id");
      $(".popup."+id).fadeIn();
   });
   $("a.close").click(function(){
      $(".popup").fadeOut();
   });
});

</script>


<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 rel="alternate" href="android-app://com.tumblr/tumblr/x-callback-url/blog?blogName=sooskai" />
<link rel="alternate" href="ios-app://305343404/tumblr/x-callback-url/blog?blogName=sooskai" />
<script src="http://assets.tumblr.com/assets/scripts/tumblelog_post_message_queue.js?_v=cf140c0f1704d59bad98d3be7adddfde"></script>

<link rel="stylesheet" type="text/css" href="http://assets.tumblr.com/fonts/gibson/stylesheet.css?v=3">
<meta name="keywords" content="sr" />
<body>
<div class="popup modal">
    <a class="close"></a>

<section>

{text:pop up text}<p>
{block:IfShowPopupLink4} <a href="{text:pop up link 4 url}">{text:pop up link 4 title}</a>{/block:IfShowPopupLink4}
<p>
{block:IfShowPopupLink5} <a href="{text:pop up link 5 url}">{text:pop up link 5 title}</a>{/block:IfShowPopupLink5}
<p>
{block:IfShowPopupLink6} <a href="{text:pop up link 6 url}">{text:pop up link 6 title}</a>{/block:IfShowPopupLink6}
</div>

<div class="container">

 <div class="credit">
<a title="theme" href="http://iristhms.tumblr.com/" target="_blank">i</a></div>



<div class="sidebar">

<a id="modal" class="sidebarimage" title="click"><img src="{image:sidebar image}">
</a>
<div class="sidebarimage">

</div>



<div class="sidetitle">{Title}</div>


<div class="description">{Description}</div>


<div class="links">
<a href="/">home</a>
<a href="/ask">inbox</a>
<a href="/archive">past</a>

 <p>
  <div class="hidden">
<a href="{text:link 1 url}">{text:link 1 title}</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>


</div>


<div class="entries">
{block:Posts}
<div class="posts">
{block:Date}
<div class="info">
<a href="{Permalink}" target="_blank" ><span class="date"> <b>{DayOfMonthWithZero} {ShortMonth}</b></span></a><br>{block:NoteCount}<a href="{permalink}">{NoteCountwithlabel}</a>{/block:NoteCount}<br>{block:RebloggedFrom}
<a href="{ReblogParentURL}" title="{ReblogParenttitle}">Via</a>&nbsp
{block:ContentSource} <a href="{SourceURL}">SRC</a>
{/block:ContentSource}&nbsp
{/block:RebloggedFrom}<a href="{ReblogURL}" target="_blank">Reblog</a>
</div>
{/block:Date}



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


{block:Photo}
<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
    <img src="{PhotoURL-HighRes}"></a>
{block:indexpage}{block:ifShowCaptions}
{block:Caption}{Caption}{/block:Caption}
{/block:ifShowCaptions}{/block:indexpage}
{block:permalinkpage}{block:Caption}{Caption}{/block:Caption}{/block:permalinkpage}
{/block:Photo}

 <div class="photoset">
{block:Photoset}
{photoset}
{block:ifShowCaptions}
{block:Caption}{Caption}{/block:Caption}
{/block:ifShowCaptions}
{block:permalinkpage}{block:Caption}{Caption}{/block:Caption}{/block:permalinkpage}
{/block:Photoset}
 </div>

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


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


{block:Chat}
{block:Title}<h1>{Title}</h1>{/block:Title} <div class="chat"> {block:Lines} <li class="line {Alt}"> {block:Label} <span class="label"> {Label}</span> {/block:Label}{Line}</li> {/block:Lines}</div>
{/block:Chat}


{block:Audio}
{block:AudioPlayer}
<div class="audiowrapper">
<div class="playerbuttonbg">
<div class="playerbutton">
<div class="playerbuttonhug">
<div class="audio_player" id="{PostID}">{AudioPlayerGrey}</div>
</div></div></div>

<div class="trackdetails">
{block:TrackName}<b><div style="text-transform:uppercase">{TrackName}</b></div>{/block:TrackName}<br>

<b>artist:</b>{block:Artist}{Artist}{/block:Artist}<br>

<b>PLAYS:</b> {FormattedPlayCount}</div></div>
{/block:AudioPlayer}

{block:ifShowCaptions}
{block:Caption}
<div class="caption">{Caption}
</div>
{/block:Caption}
{/block:ifShowCaptions}
{block:permalinkpage}{block:Caption}{Caption}{/block:Caption}{/block:permalinkpage}
{/block:Audio}

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

{block:Answer}
<div class="question">
<div class="asker"><b>{Asker} said:</b></div>
{Question}</div><br>
<div class="answer">
{Answer}</div>
{/block:Answer}




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

</div>


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



{block:Pagination}
 <div class="pagination">
{block:PreviousPage}
<a href="{PreviousPage}">back</a>{/block:PreviousPage}&nbsp;
{block:NextPage}
<a href="{NextPage}">forth</a>
{/block:NextPage}
</div>
{/block:Pagination}


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





</body>

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