WONDERMENT - 06. IR

<link href="https://fonts.googleapis.com/css2?family=Marck+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Notable&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">

<html>

<!--
THEME 06. - WONDERMENT
INTERSTELLAR RESOURCES
PLEASE MESSAGE IF YOU HAVE ANY ISSUES


SKELETON CODE BY
 https://fratdadbase.tumblr.com/
-->



    <head>

<!------------------------------ SCRIPTS ----------------------------->
<!----------------------------- TOOLTLIP ----------------------------->


<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:500
});
});
})(jQuery);
</script>



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


        <meta name="image:body" content=""/>
        <meta name="image:info" content=""/>
        <meta name="image:header1" content=""/>
        <neta name="image:container" content=""/>


        <meta name="color:background" content="#f7f7f7" />
        <meta name="color:post" content="#ffffff" />
        <meta name="color:container" content="#e9e9e9"/>
        <meta name="color:bold" content="#373737"/>
        <meta name="color:italic" content="#656565"/>
        <meta name="color:header1" content=""/>
        <meta name="color:header2" content="#000000"/>
        <meta name="color:header3" content="#000000"/>
        <meta name="color:header4" content="#ffffff"/>
        <meta name="color:header4background" content="#000000"/>
        <meta name="color:header4border" content="#222222"/>
        <meta name="color:title" content="#333333"/>
        <meta name="color:infobg" content="#eeeeee"/>
        <meta name="color:infolink" content="#222222"/>
        <meta name="color:infohover" content="#333333"/>
        <meta name="color:sidebox" content="#e4e0e0" />
        <meta name="color:question" content="#eeeeee"/>


        <meta name="text:LinkOneTitle" content="title here" />
        <meta name="text:LinkOneUrl" content="url here" />
        <meta name="text:LinkTwoTitle" content="title here" />
        <meta name="text:LinkTwoUrl" content="url here" />
        <meta name="text:sidebox" content="You can put whatever <i>text</i> you would like here.  I should <b>probably</b> do a meta tag for this so that it will be <u>easier</u> for the user to type in whatever they want.  I wonder how <b>far I can</b> make this go and if it will cut off at some point." />

    </head>

<style type="text/css">

/*                        SCROLL BAR                */

::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: transparent;
  border: 0px none transparent;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background:  transparent;
}
::-webkit-scrollbar-thumb:active {
  background:  transparent;
}
::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none transparent;
  border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
  background: transparent;
}
::-webkit-scrollbar-track:active {
  background: transparent;
}
::-webkit-scrollbar-corner {
  background: transparent;
}


/*                        BODY                */

body {
   background-color: {color:background};
   background-image: url('{image:body}');
   background-repeat: no-repeat;
   font-family:helvetica, sans-serif;
   font-size: 12px;
   color: #1e1e1e1;
   word-spacing: 3px;
   letter-spacing: 1px;
}


#container {
    position:absolute;
    background-color: {color:container};
    padding: 15px;
    width: 310px;
    margin-top:145px;
    margin-left: 950px;
    height:550px;
    overflow:auto;
    overflow-x:hidden;
    z-index: 9999;
    border: 0px solid #f3f3f3;
    border-radius: 30px;
}

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

#colorboard {
    position: absolute;
    background-image: url('{image:container}');
    background-color: #eeeeee;
    margin-top: 200px;
    margin-left: 600px;
    width: 800px;
    height: 400px;
    border-radius: 20px;
    z-index: 99;

}


.posts {
    width:300px;
    margin-bottom:40px;
    background-color: {color:post};
    padding: 5px;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px;
}

.sidebox {
    position: absolute;
    background-color: {color:sidebox};
    padding: 5px;
    width: 200px;
    height: 320px;
    margin-left: 650px;
    margin-top: 230px;
    overflow: auto;
    text-align: justify;
    z-index: 999999;
    border-radius: 20px;

}

/*                        IMAGE DECOR                */



#s-m-t-tooltip {
    max-width:400px;
    margin:15px;
    padding:2px 8px;
    background: {color:bold};
    background-image:url('');
    background-repeat:repeat;
    background-attachment:fixed;
    border-left: 3px solid {color:italic};
    border-right: 3px solid {color:italic};
    color:{color:text};
    text-shadow:1px 1px 0px #000,
    z-index:99999999999999999999999999999999999999999999999999999999999999;
    font-size:9px;
    letter-spacing:2px;
    font-style:bold;
    letter-spacing:2px;
    font-family: calibri;
    text-transform:uppercase;
}


/*                        FONT DECOR                */


h1 {
    font-family: 'Notable', sans-serif;
    font-size: 15px;
    text-align:center;
    text-transform:uppercase;
    color: {color:header1};
    background-image: url('{image:header1}');
    background-position:left;
    background-repeat:repeat;
    background-attachment:fixed;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

h2 {
    text-align:center;
    text-transform:uppercase;
    color: {color:header2};
    font-family: 'Righteous', cursive;
    letter-spacing: 1px;
    font-size: 25px;
}

h3 {
    text-align:center;
    text-transform:uppercase;
    color: {color:header3};
    font-family: 'VT323', monospace;
    font-size: 12px;
}

h4 {
    text-align: center;
    text-transform: uppercase;
    color: {color:header4};
    font-family: courier;
    font-weight: bold;
    font-size: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: {color:header4background};
    border-left: 4px solid {color:header4border};
    border-right: 4px solid {color:header4border};
}

t, title {
    text-align: right;
    font-size: 18px;
    font-family: georgia;
    color: {color:title};
    text-transform: uppercase;

}

b, bold, strong {
    text-align:center;
    text-transform:uppercase;
    color: {color:bold};
    font-family: 'Righteous', cursive;
    font-size: 13px;
}

i, italic, em {
    text-align:center;
    text-transform:uppercase;
    color: {color:italic};
    font-family: 'Marck Script', cursive;
    text-transform: lowercase;
    font-size: 20px;
}

code {
    size: 11px;
    font-family: courier;
    text-transform: uppercase;
}

small {
    size: 10px;
}

sub {
    size: 9px;
}


blockquote {
    border-left: 2px solid #000000;
    padding: 5px;
    margin:0px 0px 5px 5px;
}

blockquote blockquote {
    border-left: 1px groove #000000;
    padding: 5px;
    margin:0px 0px 5px 5px;
}

blockquote img {
    max-width:100%;
    height:100%;
}

.chat ul {
    list-style: none;
	margin: 0;
	padding: 10;
}

.chat li {
    border-radius: 0.2em;
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 1px 1px 1px rgb(255, 255, 255) inset;
	margin-bottom: 2%;
	padding: 2%;
	width: 50%;
}

.chat .odd {
    float: left;
	background: rgb(236, 236, 236);
	padding-bottom: 10px;
}
.chat .even {
	float: right;
	background: rgb(166, 230, 255);
	padding-bottom: 10px;
}


/*                        LINKS DECOR                */

a {
    text-decoration: none;
    color: #000000;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-size: 9px;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

a:hover {
    color: #222222;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}



.navigation a {
    font-family: 'VT323', monospace;
    color: #000000;
    font-size: 15px;
    font-weight: 400px;
    display: inline-block;
    text-align: justify;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.navigation a:hover {
    color: #777777;
     -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}



.credit {
    position: absolute;
    left: 95%;
    top: 95%;
    width: auto;
    height: auto;
}

.credit a {
    font-size: 15px;
    color: {color:navigation};
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.credit a:hover {
    color: {color:navigation hover};
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.tags {
    text-align:center;
    background-color:transparent;
    padding-bottom:6px;
    padding-top:4px;
    opacity: .5;
    word-spacing: 0px;
    letter-spacing: 0px;
}


.tags a {
    color: #66947e;
    font-family: courier new;
    text-decoration:none;
    text-transform:lowercase;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}


.tags a:hover {
    color: #aec4ba;
    text-shadow: 0 0 5px rgba(137, 132, 53, 0.5);
    letter-spacing: 0px;
}

.info {
    font-size:8px;
    text-align:center;
    background-color:{color:infobg};
    background-image: url('{image:info}');
    padding-top:2px;
    padding-bottom: 2px;
    border-bottom: 0px solid #000000;
    word-spacing: 0px;
    letter-spacing: 0px;
}

.info a {
    font-size:8px;
    color:{color:infolink};
    text-decoration:none;
    text-transform:normal;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.info a:hover {
    color:{color:infohover};
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
}


/*                        ASK DECOR                */

#asker {
   text-transform:uppercase;
   padding-bottom:5px;
   font-family: 'VT323', monospace;
   text-align:center;
   font-size: 15px;
   line-height: 16px;
   color: {color:bold};
}

#asker a {
   text-transform:uppercase;
   padding-bottom:5px;
   font-family: 'VT323', monospace;
   text-align:center;
   font-size: 15px;
   line-height: 16px;
   color: {color:bold};
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

#asker a:hover {
   text-transform:uppercase;
   padding-bottom:5px;
   font-family: 'VT323', monospace;
   text-align:center;
   font-size: 15px;
   line-height: 16px;
   color: {color:bold};
   opacity: .5;
   -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

#question {
    text-transform: None;
    font-family: calibri;
    font-size: 12px;
    padding: 2px;
    background-color: {color:question};
}

#header {
    text-align:center;
    font-size:10px;
    margin-top:40px;
}

#pagination {
    position:fixed;
    text-align:center;
    top: 570px;
    left: 825px;
    z-index: 9999999999999999999999999999999999999;
}


/*                        NOTE                */



.notecontainer {
    background-color: transparent;
    border: 0px solid transparent;
    width:380px;
    padding: 0px;
    text-transform:uppercase;
    font-style:normal;
    font-size: 10px;
    height: 150px;
    overflow: auto;
    margin-left: 50px;
    text-align:left;

}
.note {
    background-color: transparent;
    border: 1px solid transparent;
    width:280px;
    padding: 0px;
    text-transform:uppercase;
    font-style:normal;
    font-size: 10px;
    height: auto;
    overflow: auto;
    margin-left: -25px;
    text-align:left;

}

.note li {
    list-style-type:none;
    padding: 10px;
    text-align:left;
    margin:0px;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;}

.note img.avatar {
    margin-right: 10px;
    width: 25px;
    height: 25px;}



</style>





<body>

<div class="sidebox">
        <center>
    <a href="/" title="home" class="navigation">01.</a>
    <a href="/ask" title="ask" class="navigation">02.</a>
    <a href="/{text:LinkOneUrl}" title="{text:LinkOneTitle}" class="navigation">03.</a>
    <a href="/{text:LinkTwoUrl}" title="{text:LinkTwoTitle}" class="navigation">04.</a>
     </center>

<br><h1>Title Here</h1>


<br><br>

{text:sidebox}




</div>


<div id="colorboard"></div>



<div class="credit">
    <a href="https://interstellarresources.tumblr.com">☾</a>
</div>


<div id="pagination">{block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}" style="margin-left: -290px;">prev</a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}">next</a>
{/block:NextPage}
{/block:Pagination}</div>

<div id="container">

{block:Posts}

<div class="posts">

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

{block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}
{/block:Photo}

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

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

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

{block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}


{block:Quote}<t>"{Quote}"</t><br>{block:Source}<i><center>{Source}</center></i>{/block:Source}{/block:Quote}


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


{block:Chat}
          {block:Title}
            <h1>{Title}</h1>{/block:Title}<br>
<ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
{Line}</li>{/block:Lines}</ul>
            {/block:Chat}



{block:Video}{Video-250}{block:Caption}{Caption}{/block:Caption}{/block:Video}


{block:Audio}{AudioEmbed}{block:Caption}{Caption}{/block:Caption}{/block:Audio}


{block:Answer}<center>
<div id="asker" style="word-wrap: break-word; max-width: 100%; margin-bottom: -10px; font-family: 'VT323', monospace; color: {color:bold}; font-size: 15px; text-transform: uppercase;">{asker} asked</div></center><br>
<div id="question" style="word-wrap: break-word; max-width: 100%; text-align: justify;">{Question}</div>
<div id="answer" style="margin-top: 20px;">{Answer}</div>
{/block:Answer}


    <div class="info">

{block:Date}
<a href="{Permalink}"style="font-size: 12px; font-family: 'VT323', monospace;" title="{TimeAgo}, {ShortMonth} {DayOfMonthWithZero} with {NoteCount} notes ">{ShortMonth} {DayOfMonthWithZero} </a>
{/block:Date}


&nbsp;&nbsp;&nbsp;

<a href="{ReblogURL}" style="font-size:12px; font-family: 'VT323', monospace;" title="reblog"> Reblog </a>



{block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom}


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

    </div>



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

{/block:Posts}

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

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