salute

<!DOCTYPE html>

<!---

***

salute by mrsthemes@tumblr
edit if you want but don't steal
or remove credit

--->


<head>
    <title>{Title}</title>
    <meta charset="utf-8" />

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

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

<style type="text/css">

/*---general---*/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

iframe#tumblr_controls {
    top:5px;
    right:5px!important;
    position:fixed !important;
    -webkit-filter: invert(1);
    opacity:.8;
    filter:alpha(opacity=90);
    -moz-opacity:.8;
    -webkit-transform:scale(.9);
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

::-webkit-scrollbar {
    width:3px;
    height:5px;
    background:transparent;
}

::-webkit-scrollbar-thumb {
    background-color:#eee;
    border:none;
}

body {
    background:#fafafa;
    font-family:'Lato', sans-serif;
    font-size:10px;
    line-height:16px;
    margin:0;
    color:#8f8f8f;
    font-smoothing:antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    animation: fadein 1.5s;
    -moz-animation: fadein 1.5s;
    -webkit-animation: fadein 1.5s;
    -o-animation: fadein 1.5s;
}

a {
    cursor:crosshair;
    color:#5b5b5b;
    text-decoration:none;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

a:hover {
    color:#c9c9c9;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

/*---content---*/

#content {
    margin:160px auto;
    position:relative;
    width:600px;
    background:#fff;
    height:400px;
    border:1px solid #eee;
}

.left {
    float:left;
    width:350px;
    height:400px;
    padding:40px;
    overflow:auto;
}

.b {
    border-right:1px solid #eee;
    height:400px;
    margin-left:348px;
    position:absolute;
}

.right {
    width:250px;
    margin-left:350px;
    padding:40px;
    bottom:0px;
    position:absolute;
}


.right li {
    list-style:none;
    border-bottom:1px solid #eee;
    padding:10px;
}


/*---links---*/

nav {
    width:280px;
    margin-left:-10px;
}

nav li {
    list-style:none;
    font-size:9px;
    text-transform:lowercase;
    display:inline-block;
    margin:20px 0px 0px 10px;
}

nav li a {
    background:#fafafa;
    padding:5px 10px 5px 10px;
    border:0px solid #eee;
}

nav h2 {
    font-size:10px;
    text-transform:uppercase;
    margin-left:10px;
}


/*---icon---*/

.icon {
    width:60px;
    float:right;
    margin:20px 20px 0px 0px;
    -moz-transition-duration:.6s;
    -webkit-transition-duration:.6s;
    -o-transition-duration:.6s;
}

.icon img {
    width:60px;
    border-radius:3px;
}

.icon:hover {
    opacity:0.5;
    -moz-transition-duration:.6s;
    -webkit-transition-duration:.6s;
    -o-transition-duration:.6s;
}


/*---blogroll---*/

.blogroll {
    width:300px;
    margin-left:0px;
}

.blogroll img {
    padding:10px;
    border-radius:12px;
    margin-right:5px;
    width:50px;
    -moz-transition-duration:.6s;
    -webkit-transition-duration:.6s;
    -o-transition-duration:.6s;
}

.blogroll img:hover {
    opacity:0.5;
    -moz-transition-duration:.6s;
    -webkit-transition-duration:.6s;
    -o-transition-duration:.6s;
}

/*---credit---*/

.credit {
    font-size:8px;
    position:fixed;
    bottom:10px;
    right:10px;
    z-index:10;
    text-align:right;
    letter-spacing:1px;
    text-transform:uppercase;
}

</style>
</head>

<body>
<div id="content">

<div class="left">

<!---WRITE YOUR ABOUT TEXT HERE--->

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


<!---YOUR LINKS HERE
you can add and remove as many links as you want-->

<nav>
    <h2 style="margin-top:30px;">navigation</h2>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>

        <h2 style="margin-top:30px;">tags</h2>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>


<!---BLOGROLL, DON'T NEED TO TOUCH!
Unless you don't want a blogroll, remove the following section:--->

    <h2 style="margin-top:30px;">blogroll</h2>
        <div class="blogroll">
        {block:Following}{block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-24}">{/block:Followed}{/block:Following}</a>
    </div>
</nav>

<!---END OF BLOGROLL--->

</div>
<div class="b"></div>

<!---YOUR TOP RIGHT ICON
Upload an image to a hosting site (ex. Imgur) and copy the image link down below.

Or you can use Tumblr's static upload by going to Edit HTML (In the MAIN theme options), click the cog icon up in the left corner and click "theme asset". Add a file and copy the link you get.--->

<div class="icon">
    <a href="/" title="home">
        <img src="http://i58.tinypic.com/2dgl6rr.jpg"></a>
</div>

<!---GENERAL INFO
Copy and remove as many lines as you want--->

<div class="right">
    <li><strong>name:</strong> jane doe</li>
    <li><strong>birth:</strong> october 6, 1992</li>
    <li><strong>location:</strong> sweden</li>
    <li><strong>hobbies:</strong> graphic design, cats, films</li>
</div>


</div>
<div class="credit">
<a title="credit" href="http://mrsthemes.tumblr.com/" target="_blank">m</a></div>

</body>
</html>