PAGE 05 | KINDRED

<html>
<!------


   ---
 --
    ---- K I N D R E D   Type 01
---
    ---- iliyon
 --
   ---


-------->
<head><link rel="shortcut icon" href="{Favicon}"><link href='http://static.tumblr.com/wb7siqo/Omqnia97g/cssnormalize.css' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Karla:400italic,400,700,700italic' rel='stylesheet' type='text/css'>
<title>Kindred</title> <!-- CHANGE TITLE HERE -->
<style type="text/css">
body{
font-family:Karla;
color:#333; /* - Global text color - */
background:#fff; /* - Background color - */
font-size:1em;
}
b, strong{font-weight:700;}
i, em{font-style:italic;}
small{font-size:80%;}big{font-size:120%;}
a{
text-decoration:none;
color:#aaa;
/*- Remove this comment marker if you want a transition -
-webkit-transition:0.4s;
-moz-transition:0.4s;
-ms-transition:0.4s;
-o-transition:0.4s;
transition:0.4s;
*/
}
a:hover{
color:#333;
/*- Remove this comment marker if you want a transition -
-webkit-transition:0.4s;
-moz-transition:0.4s;
-ms-transition:0.4s;
-o-transition:0.4s;
transition:0.4s;
color:#aaa;
*/
}
.desc a{
padding-bottom:2px;
color:#aaa; /* - Links next to the title - */
border-bottom:1px solid transparent;
margin-right:11px;
}
.desc a:hover{
color:#333;
border-bottom:1px #aaa solid;
}
.holder{
width:500px; /* - Container width - */
position:absolute;
left:0px;
right:0px;
margin:auto;
top:120px;
margin-bottom:100px;
}
.bloghead{
font-size:2em; /* - Title font size - */
font-weight:700;
border-bottom:3px #333 solid; /* - Adjust border properties - */
padding-bottom:2px;
max-width:150px; /* - Adjust width if necessary. Mind the .desc too - */
display:inline-block;
vertical-align:middle;
}
.desc{
display:inline-block;
vertical-align:middle;
max-width:350px; /* - Adjust width if necessary. Mind the .bloghead too - */
font-size:.7em;
line-height:1.2em;
box-sizing:border-box;
padding-left:30px; /* - Adjust if necessary - */
}
.quote{ /* - Quote styling - */
margin:1.5rem 0rem;
font-size:.75em;
color:#aaa;
font-style:italic;
}
/* - FILL-IN-THE-BLANKS - */
.spacer{
margin-top:40px;
}
.list li{ /* - Your following list - */
list-style-type:none;
background:;
padding:15px;
margin:1em 0em;
position:relative;
-webkit-transition:0.2s;
-moz-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
transition:0.2s;
}
.list li:hover{
background:#222;
color:#fff;
-webkit-transition:0.2s;
-moz-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
transition:0.2s;
}
    .list li h1{ /* - Blog name - */
    font-size:1.1em;
    letter-spacing:2px;
    font-weight:700;
    font-style:italic;
    }
    .list li h2{ /* - Blog URL - */
    font-size:.7em;
    letter-spacing:1px;
    margin:.5em 0em;
    color:#aaa;
    }
    .list li .name{
    display:inline-block;
    vertical-align:middle;
    width:420px;
    position:relative;
    }
    .list li img{
    width:30px;
    border-radius:30px;
    display:inline-block;
    margin-right:10px;
    vertical-align:middle;
    }
    .list li .title{ /* - Blog title - */
    color:#aaa;
    float:right;
    font-size:.75em;
    text-transform:uppercase;
    position:absolute;
    top:15px;
    right:0px;
    opacity:0;
    -webkit-transition:0.2s;
    -moz-transition:0.2s;
    -ms-transition:0.2s;
    -o-transition:0.2s;
    transition:0.2s;
    -webkit-transition-delay:0.1s;
    -moz-transition-delay:0.1s;
    -ms-transition-delay:0.1s;
    -o-transition-delay:0.1s;
    transition-delay:0.1s;
    }
    .list li:hover .title{
    opacity:1;
    -webkit-transition:0.2s;
    -moz-transition:0.2s;
    -ms-transition:0.2s;
    -o-transition:0.2s;
    transition:0.2s;
    }
    .list a{color:#333;}
</style>
</head>
<body>
<section class="holder">
    <section class="bloghead">Kindred</section> <!-- YOUR TITLE HERE -->
    <section class="desc">
        <!-- LINKS HERE --><a href="/">Return</a>
        <a href="/ask">Message</a>
        <a href="http://tumblr.com/">Dashboard</a>
        <a href="/">Some</a>
        <a href="/">More</a>
        <a href="http://iliyon.tumblr.com" target="_blank">&copy;</a>
    </section>
    <!-- QUOTE, REMOVE IF UNNECESSARY -->
    <section class="quote">Quote here. Obliterate if unused.</section>

    <section class="spacer"></section> <!-- NO YOU CAN'T TOUCH THIS -->

    <!-- BEGIN CONTENT -->
    {block:Following}
    <section class="list">
    {block:Followed}
        <a href="{FollowedURL}" target="_blank">
        <li>
        <img src="{FollowedPortraitURL-40}">
        <section class="name">
        <h1>{FollowedName}</h1>
        <h2>{FollowedURL}</h2>
        <section class="title">{FollowedTitle}</section>
        </section>
        </li>
        </a>
    {/block:Followed}
    </section>
    {/block:Following}

</section>
</body>
</html>