Alyssum

<!---

Theme Alyssum
by siothemes.tumblr.com / j-murphy.tumblr.com

base code by mrsthemes@tumblr <3 (one day i will finally do one from scratch but today is not that day)

hope you enjoy :)

-->

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



<!--------default variables-------->
<meta name="color:background" content="#ffffff"/>
<meta name="color:text" content="#333333"/>
<meta name="color:links" content="#c27a25"/>
<meta name="color:links hover" content="#c6ae93"/>
<meta name="color:scrollbar bg" content="#ffffff"/>
<meta name="color:scrollbar" content="#eeeeee">
<meta name="color:asker bg" content="#ffffff"/>

<meta name="if:captions" content="1" />
<meta name="if:show tags" content="1" />
<meta name="if:hover tags" content="1" />
<meta name="if:show home link" content="1" />
<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 link 4" content="1" />

<meta name="select:Main Font Size" content="10px" title="10px">
<meta name="select:Main Font Size" content="11px" title="11px">
<meta name="select:Main Font Size" content="12px" title="12px">

<meta name="select:Link Font Size" content="10px" title="10px">
<meta name="select:Link Font Size" content="11px" title="11px">
<meta name="select:Link Font Size" content="12px" title="12px">

<meta name="select:Tags Position" content="center" title="center">
<meta name="select:Tags Position" content="left" title="left">

<meta name="text:home title" content="home">
<meta name="text:ask title" content="ask">
<meta name="text:link 1 url" content="/">
<meta name="text:link 1 title" content="one">
<meta name="text:link 2 url" content="/">
<meta name="text:link 2 title" content="two">
<meta name="text:link 3 url" content="/">
<meta name="text:link 3 title" content="three">
<meta name="text:link 4 url" content="/archive">
<meta name="text:link 4 title" content="archive">
<meta name="text:to change button icon" content="got to https://honeybee.suiomi.com/ and write chosen one below">
<meta name="text:button icon" content="kiwi">




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

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


<!-------------------------------------------------------------------->

<style type="text/css">

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

#s-m-t-tooltip {
max-width:300px;
margin:15px;
padding:5px;
border:1px solid #eeeeee;
border-radius:0px;
background:#ffffff;
color:{color:text};
z-index:999999;
font-size:7px;
font-style:none;
font-weight:lighter;
letter-spacing:2px;
font-family:helvetica;
text-transform:uppercase;
box-shadow:1px 1px 3px rgba(0,0,0,.0);
}


/*----------lightbox---------*/

.vignette, #vignette {
opacity:0;
}
.lightbox-image, #tumblr_lightbox img {
box-shadow:none !important;
border-radius:0 !important;
max-width:none;
}

.tmblr-lightbox, #tumblr_lightbox {
background-color:rgba(245,245,245,.75) !important;
}

.lightbox-image, #tumblr_lightbox img {
border:5px solid #fff !important;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

/*----------scrollbar---------*/

::-webkit-scrollbar {
background-color: {color:scrollbar bg};
height:8px;
width:5px
}

::-webkit-scrollbar-thumb:vertical {
background-color:{color:scrollbar};
height:50px
}

::-webkit-scrollbar-thumb:horizontal {
background-color:{color:scrollbar bg};
height:8px!important
}


/*-------tumblr controls thanks to odeysseus.tumblr.com ------*/

.tmblr-iframe{ white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:.2;transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out;-moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;position:fixed!important;right:-20px!important;transform:scale(0.7,0.7); } .tmblr-iframe:hover {  opacity:0.5; }

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

body {
background-color:{color:background};
color:{color:text};
font-family: 'Open Sans', sans-serif;
line-height:16px;
font-size:{select:Main Font Size};
margin:0;
text-align:left;
}

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

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

a:hover {
text-decoration:none;
color: {color:links hover};
-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:10px;
font-weight:bold;
}


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

.container {
margin:50px auto;
width:650px;
}


.posts {
{block:IndexPage}
margin-bottom:80px;
{/block:IndexPage}
{block:PermalinkPage}
margin-bottom:30px;
{/block:PermalinkPage}
display:flex;
align-items:center;
}


.entries {
width:400px;
top:100px;
margin-top:10px;
margin-bottom:50px;
display:inline-block;
position:relative;
}

.posts img, .posts li, .posts blockquote {
max-width:400px;
}

.posts li {
list-style:square;
}

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


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



.info {
text-transform:none;
position:absolute;
font-size:10px;
letter-spacing:5px;
margin-left:410px;
order:1;
text-align:left;
margin-top:0px;
width:200px;
}

.tags {
font-size:8px;
padding-top:10px;
position:relative;
letter-spacing:1px;
font-style:italic;
max-width:400px;
text-align:{select:Tags Position};
margin-top:5px;
{block:ifHoverTags}
opacity:0;
{/block:ifHoverTags}
order:2;
}

{block:ifHoverTags}
.posts:hover .tags {
opacity:1;
-moz-transition:all 0.8s;
-ms-transition:all 0.8s;
-o-transition:all 0.8s;
transition:all 0.8s;
}
{/block:ifHoverTags}


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

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

ol.notes li.note {
padding:10px;
}

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

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

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

.sidebar {
width:400px;
top:100px;
padding-top:75px;
text-align:left;
}

.sidetitle {
width:350px;
line-height:80px;
font-family: 'Abril Fatface', cursive;
font-size:75px;
position:absolute;
}


.links {
margin-top:15px;
color:{color:links};
padding:0px;
padding-bottom:0px;
font-size:{select:Link Font Size};
}

.links a {
padding-left:5px;
padding-right:5px;
}

.sidelink {
text-align:left;
position:inline-block;
}

/*-------pop up box------*/

.box {
width: 400px;
text-align: center;
margin-left:-230px;
margin-top:20px;
position:inline-block;
}

.button {
font-size:50px;
cursor: pointer;
transition: all 0.3s ease-out;
}

.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}

.overlay:target {
visibility: visible;
opacity: 1;
z-index:100;
}

.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}

.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}

.popup .close:hover {
color: #06D85F;
}

.popup .content {
max-height: 40%;
overflow: auto;
}

.desc {
max-width:85%;
}

@media screen and (max-width: 300px){
 .box{
 width: 50%;
 }
 .popup{
 width: 50%;
 }
}

.pagination {
margin-top:20px;
margin-left:0px;
text-align:center;
font-size:11px;
width:400px;
}

.pagnos {
font-size:9px;
}

.back {
padding:5px 8px 5px 8px;
}

.forward {
padding:5px 9px 5px 10px;
}



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

.quote {
text-transform:uppercase;
font-size:12px;
font-weight:bold;
text-align:center;
font-style:italic;
}

.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:#f5f5f5;
margin-bottom:2px;
padding:5px;
list-style:none;
font-size:10px;
}

.label {
padding-right:1px;
text-transform:lowercase;
font-weight:bold;
color:{color:links};
}


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

.question {
background:{color:asker bg};
padding:10px;
}

.asker {
text-transform:lowercase;
}

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

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

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

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

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

.playerbuttonbg {
position:absolute;
width:35px;
height:35px;
background-color:#e4e4e4;
padding:10px;
}

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

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

/*------permalink page--------*/

.permainfo {
text-align:left;
padding:10px 10px 10px 10px;
width:400px;
margin-top:10px;
}

.postnotes {
line-height:40%;
font-size:9px;
text-align:left;
padding:10px 10px 10px 10px;
width:400px;
margin-top:10px;
}



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

.credit {
font-size:8px;
position:fixed;
font-weight:bold;
bottom:5px;
right:15px;
z-index:10;
text-align:right;
letter-spacing:1px;
padding:2px;
}

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

.credit a:hover {
color:{color:links hover};
text-decoration:none;
}



</style>


<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://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chicle" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">



</head>

<body>
<div class="container">

<div class="credit">
<a title="theme" href="https://siothemes.tumblr.com/" target="_blank">SIO</a></div>





<div class="sidebar">




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



</div>



<div class="box">
	<a class="button" href="#popup1">
	<span class="th th-{text:button icon}"></span></a>
</div>

<div id="popup1" class="overlay">
	<div class="popup">
		<a class="close" href="#">&times;</a>
		<div class="content">

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

<div class="links">

<a href="/">{text:home title}</a>
<a href="/ask">{text:ask title}</a>
{block:ifshowlink1}
<a href="{text:link 1 url}">{text:link 1 title}</a>
{/block:ifshowlink1}
{block:ifshowlink2}
<a href="{text:link 2 url}">{text:link 2 title}</a>
{/block:ifshowlink2}
{block:ifshowlink3}
<a href="{text:link 3 url}">{text:link 3 title}</a>
{/block:ifshowlink3}
{block:ifshowlink4}
<a href="{text:link 4 url}">{text:link 4 title}</a>
{/block:ifshowlink4}
</div>
</div>
	</div>
</div>



<div class="entries">
{block:Posts}
<div class="posts">





{block:IndexPage}
{block:Date}
<div class="info">

<a href="{Permalink}">{DayOfWeek}</a><p>

{block:NoteCount}
<a href="{Permalink}">{NoteCountWithLabel}</a>
{/block:NoteCount}<p>

<a href="{ReblogURL}" target="_blank" class="details">Reblog</a>


</div>

{/block:Date}
{/block:IndexPage}







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



{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}
{block:ifCaptions}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifCaptions}
{/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:ifCaptions}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifCaptions}

{/block:Photoset}




{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">
{AudioPlayerGrey}
</div></div></div>

<div class="trackdetails">
{block:TrackName}<b>TRACK:</b> {TrackName}{/block:TrackName}<br>

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

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

{block:ifCaptions}{block:Caption}
<div class="caption">
<div class="audiocaption">{Caption}</div></div>
{/block:Caption}{/block:ifCaptions}
{/block:Audio}



{block:Video}
{Video-400}
{block:ifCaptions}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifCaptions}
{/block:Video}


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






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






</div>


</article>


{block:PermalinkPage}
{block:Date}

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

<div class="permainfo">

posted {DayofMonth}{DayOfMonthSuffix} of {Month}  {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}

{block:RebloggedFrom}<br>
via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
source: <a href="{ReblogRootURL}">{ReblogRootName}</a>
{/block:RebloggedFrom}

{block:HasTags}<br>
tagged: {block:Tags}<a href="{TagURL}">{Tag};</a> {/block:Tags}
{/block:HasTags}

</div>



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

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



{/block:Posts}




<div class="pagination">
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}"><span class="th th-backward-arrow"></span></a>{/block:PreviousPage}&nbsp;

{CurrentPage} / {TotalPages}

&nbsp;{block:NextPage}
<a href="{NextPage}"><span class="th th-skip-track"></span></a>
{/block:NextPage}
{/block:Pagination}
</div>















</div>


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




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




</body>

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