tags / EASE

<!DOCTYPE html>
<head>

<!--


                            ease

                         @odeysseus


- you can choose new colors from colorpicker.com
- credits @ odeysseus.tumblr.com/credit

-->


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

<title>navigation</title>

<!--fonts-->

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

<style type="text/css">


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

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

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

 ::-webkit-scrollbar{
    height:3px;
    width:1px;
    background:#eee;
}

::-webkit-scrollbar-thumb {background:#eee;}

::-webkit-scrollbar-track {background:transparent;}

::-moz-selection{ background: #eee; color:#777;}
::selection { background:#eee; color:#777; }

body {
background:#fff; /*main background*/
color:#767676;
font-family:'Karla', sans-serif; /*main font*/
font-weight:400;
font-size:10px;
text-align:justify;
line-height:16px;
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
}


a {
color:#aaa; /*link color*/
text-decoration:none;
transition:all .4s ease;
}

a:hover {
    text-decoration:none;
    font-style:italic;
    color:#555; /*link hover*/
}

b,strong {
    font-weight:700;
    color:#555;
}

#cred {
    bottom:27px;
    font-size:11px;
    position:fixed;
    right:30px;
}

section {
    margin:100px auto;
    width:calc(212px * 3); /* change the 3 to however many columns you want*/
}

.box {
    border-radius:0px;
    width:170px;
    margin:0px 20px 20px 0px;
    padding:10px;
    border:1px solid #eee; /*tag box border*/
    background:#fafafa; /*tag box background*/
    animation:1s fade-in;
    -webkit-animation:1s fade-in;
    -moz-animation:1s fade-in;
}

.link a {
    width:49%;
    display:inline-block;
    box-sizing:border-box;
    padding:4px 2.5px;

}


.link {
    margin-top:5px;
}

.title {
    text-align:center;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#222;
    padding-bottom:5px;
    border-bottom:1px solid #eee; /*tag box border*/
    transition:all .4s ease;
}

header {
    margin:90px auto 0px auto;
    text-align:center;
}

.t {
    font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#444;
}

nav {
    margin:10px auto 0px;padding-top:10px;border-top:1px solid #eee;width:130px;color:#aaa;
}

.tmblr-iframe { display:none!important; }
</style>

</head>

<body>

<header>
    <div class="t">navigation</div><!--header title-->
    <nav> <!--header links: don't edit pls-->
    <a href="/">return</a> / <a href="http://tumblr.com/dashboard">dashboard</a> / <a href="http://odeysseus.tumblr.com">theme</a></nav>
</header>


<section>
<!--start tags: there are two example boxes below, add as many as you require-->

    <div class="box">
        <div class="title">tag group</div> <!--tag group heading-->
        <div class="link">
           <a href="/tagged/">tag name</a>
           <a href="/tagged/">tag name</a>
           <a href="/tagged/">tag name</a>
           <a href="/tagged/">tag name</a>
        </div>
    </div>

    <div class="box">
        <div class="title">tag group</div> <!--tag group heading-->
        <div class="link">
           <a href="/tagged/">tag name</a>
           <a href="/tagged/">tag name</a>
           <a href="/tagged/">tag name</a>
           <a href="/tagged/">tag name</a>
           <a href="/tagged/">tag name</a>
           <a href="/tagged/">tag name</a>
           <a href="/tagged/">tag name</a>
           <a href="/tagged/">tag name</a>
        </div>
    </div>

<!--end tags: do not edit beyond this point-->
</section>

<div id="cred"><a href="http://odeysseus.tumblr.com">O</a></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('section').masonry({
itemSelector : ".box",
},
function() { $('section').masonry({ appendedContent: $(this) }); }
);
});
</script>

</body>


</html>