nav / about


<!--


                theme: nav page
                - sorrism -


-->

<!DOCTYPE html>
<head>

<!--this is the title that shows up in the tab-->
<title>{Title} : About</title>

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

<link rel="alternate" type="application/rss+xml" href="{RSS}">

<!--CSS customization here. -->


<style type="text/css">

/*tumblr controls*/

iframe#tumblr_controls {
    white-space:nowrap!important;
    -webkit-filter:invert(60%)!important;
    -moz-filter:invert(60%)!important;
    -ms-filter:invert(60%)!important;
    -o-filter:invert(60%)!important;
    filter:invert(60%)!important;
    top:10px!important;
    right:10px!important;
    opacity:.3!important;
    position:fixed!important;
}

/*tooltip*/

.ui-tooltip {
    position:Absolute;
    z-index:9999;
    padding-top:15px;
}

.ui-tooltip-content {
    background:#fff;
    padding:2px 3px;
    border:1px solid #eee;
    font-style:italic;
    font-size:10px;
    text-transform:lowercase;
}

/*scrollbar*/

::-webkit-scrollbar {
    height:2px;
    width:4px;
    background:inherit;
}

::-webkit-scrollbar-thumb {
    background:#ddd;
    border-radius:2px;
    -webkit-border-radius:2px;
}

/*basics*/

body {
    background:#fff;
    color:#605f5f;
    font-family:consolas, arial;
    font-size:10px;
	-webkit-font-smoothing: antialiased;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.005);
    font-weight:normal;
    position:relative;
    word-wrap:break-word;
    text-align:left;
    margin:0;
    line-height:1.5em;
}

a {
    color:#605f5f;
    text-decoration:none;
}

a:hover {
    color:#97c5e0;
    text-decoration:none;
}

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

blockquote {
    border-left:1px solid #ccc;
    padding:5px 0 5px 15px;
    margin:15px 0;
}

pre {
    padding:0;
    margin:0;
    line-height:1.5em;
    background:transparent;
    font-family:inherit!Important;
    font-size:1em!important;
    white-space:pre-wrap;
    white-space:-moz-pre-wrap;
    white-space:-pre-wrap;
    white-space:-o-pre-wrap;
    word-wrap:break-word;
}

p {margin:.75em 0;}

p:first-of-type {margin-top:0;}

p:last-of-type {margin-bottom:0;}

b, strong {color:#000;}

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

li {
    padding-left:15px;
    position:relative;
}

li:before {
    content:'\00BB';
    position:Absolute;
    left:0px;
}

small, big, sub, pre {
    font-size:1em!important;
    line-height:1.5em!important;
    vertical-align:top!important;
}

h1, h2, h3, h4 {
    font-size:1em;
    margin:0;
    padding:0;
    color:#000;
    font-weight:bold;
}

.nice {
    position:fixed;
    bottom:15px;
    right:15px;
}

/*fade in*/

@-webkit-keyframes fade-in {
	0%   { opacity: 0; }
	50%   { opacity: 0; }
	100% { opacity: 1; }
}


@-moz-keyframes fade-in {
	0%   { opacity: 0; }
	50%   { opacity: 0; }
	100% { opacity: 1; }
}


@keyframes fade-in {
	0%   { opacity: 0; }
	50%   { opacity: 0; }
	100% { opacity: 1; }
}

/*content*/

section {
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: 1.5s;
    width:350px;
    margin:200px auto;
}

.yo img {
    width:50px;
    height:50px;
    cursor:help;
    float:left;
    border:15px solid transparent;
    margin:-15px 35px 0 -115px;
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
    border-radius:100%;
    display:block;
}

.le {
    text-transform:lowercase;
    padding-top:10px;
    margin-top:25px;
    position:relative;
    text-align:left;
    width:350px;
    border-top:1px solid #eee;
}

.rest {
    margin-left:75px;
    display:block;
}

.lee {
    clear:both;
    display:block;
    border-top:15px solid transparent;
}

.le a, .lo {
    display:inline-block;
    margin:2px 0;
}

.le a {
    width:calc((350px - 75px) / 3)!important;
    border:0;
    float:left;
}

.lo {
    color:#000;
    width:75px;
    font-weight:bold;
    float:left;
    position:relative;
}

.lo span {
    display:inline-block;
    padding-right:10px;
    background:#fff;
}

.lo:before {
    content:'';
    height:1px;
    background:#eee;
    width:65px;
    z-index:-1;
    left:0px;
    top:6px;
    position:absolute;
}

{CustomCSS}

</style>
</head>

<body>

<section>

<a href="/" class="yo">
<!--image url goes in the quotes ; if you dont want it, delete <img ... />-->
<img src=""/></a>

<!--text goes here-->

<p><b>Heartfire</b>; they told of courage so bold it burned.</p>

<p>Separate paragraphs to make everything look more organized. People don't like reading a huge block of text. You can divide the categories differently. Be cool... idk.</p>

<div class="le">

<!--first category-->
<div class="lee">
<span class="lo"><span>
<!--first category title-->
Links
</span></span>
<span class="rest">
<!--links! put yer links here!-->
<a href="">meatballs</a>
<a href="">pinewood</a>
<a href="">polar bear</a>
<a href="">space kids</a>
<a href="">parmigiano</a>
<a href="">culottes</a>
</span></div>
<!--end first category-->

<!--second category-->
<div class="lee">
<span class="lo"><span>
<!--title-->
Tags
</span></span>
<span class="rest">
<!--more links wow-->
<a href="">bad breath</a>
<a href="">knees weak</a>
<a href="">arms spaghetti</a>
<a href="">nickelback</a>
<a href="">modern dance</a>
<a href="">loyalty</a>
<a href="">nordic braids</a>
<a href="">horseshoes</a>
<a href="">lunar landing</a>
<a href="">sand</a>
<a href="">tape</a>
<a href="">memory</a>
</span></div>
<!--end category-->


</div>


</section>

<!-- jquery -->

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

<script>
$(document).ready(function() {
    $(document).tooltip({
        track:true
    });
});
</script>

<a class="nice" href="http://sorrism.tumblr.com" target="_blank">s.</a>
</body></html>