Family/Recommendations page

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html><head><title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">


<style type="text/css">

::-webkit-scrollbar:double-button {transparent;}
::-webkit-scrollbar-track-piece {background-color:#fff;}
::-webkit-scrollbar-thumb:vertical {background-color:#000;}
::-webkit-scrollbar-thumb:horizontal {background-color:#000;}
::-webkit-scrollbar {width:5px;height:3px;}


body {
    background:#fff url(http://25.media.tumblr.com/tumblr_m3gub3EnTj1rtwx68o6_r1_400.png) fixed repeat;
    color:#555;
    font-family: arial;
    font-size:9px;
    letter-spacing:0px;
    text-align:justify;
    text-transform:normal;
    line-height:10px;
    margin-top:0px;
    width:440px;
    margin:auto;
}

a {
    text-decoration:none;
    color:#000;
    opacity:1;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

a:hover {
    color: #CCC;
}


b, strong {
    color:{color:Text};
    font-size:9px;
    font-weight:heavy;
}

i, em {
    color:{color:Text};
    font-weight:light;
}

#sbackground {
    position:fixed;
    top:150px;
    left:775px;
    padding:8px;
    width:150px;
    background:#000;
    opacity:.25;
    z-index:-999;
}

#side {
    position:fixed;
    top:0px;
    left:0px;
    padding:4px;
    height:30px;
    width:100%;
    background: #FFFFFF;
    font-family: consolas;
    font-size: 8px;
    text-transform: uppercase;
}


#desc {
    margin-top:2px;
    opacity:1;
    padding:5px;
    background-color:#fff;
    text-align:center;
    box-shadow:0px 0px 7px #fff;
    -mox-box-shadow:0px 0px 7px #fff;
    -webkit-box-shadow:0px 0px 7px #fff;
}

#bbackground {
    position:fixed;
    top:0px;
    padding:5px 10px 5px 10px;
    width:440px;
    height:150%;
    background-color:#000;
    opacity:.25;
    z-index:-999;
}

#blocks1 {
    float:left;
    top: 10px;
    margin-left:10px;
    margin-bottom:-8px;
    height:100%;
    width:210px;
    padding:5px 5px 15px 5px;
}

#blockss {
    top: 10px;
    margin-left:230px;
    margin-bottom:-8px;
    height:100%;
    width:210px;
    padding:5px 5px 15px 5px;
}

#block {
    float:left;
    width:200px;
    margin-top:5px;
    margin-bottom:8px;
    background-color:#fff;
    padding:5px;
    box-shadow:0px 0px 10px #fff;
    -mox-box-shadow:0px 0px 10px #fff;
    -webkit-box-shadow:0px 0px 10px #fff;
}

.title {
    padding:4px 50px 5px 10px;
    font-size:14px;
    letter-spacing:2px;
    text-align:center;
    font-family: consolas;
    font-size: 8px;
    text-transform: uppercase;
}

.desc {
    padding:5px;
    width:190px;
    height:90px;
}

.comment {
    float:left;
    width:85px;
    height: 90px;
    padding:5px 5px 5px 5px;
    text-align:center;
    text-align: justify;
    overflow: auto;
}

.img {
    float:right;
    max-width:90px;
    max-height:90px;
    background:#aaa;
    -webkit-border-radius:45px;
    -moz-border-radius:45px;
    border-radius:45px;
}


</style>
</head>
<body>


<div id="side">
        <center><br><a href="/">return</a> &#160 <a href="/ask">message</a> &#160 <a href="/archive">archive</a></center></div></div>
<div style="padding:20px"></div>

<!-- column one -->

<div id="bbackground"></div>
<div id="blocks1">


    <div id="block">
    <div class="title"><a href="/">boku no pico</a></div>
        <div class="desc">
    <div class="comment">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</div>

            <img class="img" src="http://29.media.tumblr.com/tumblr_m3gs76t05R1rtwx68o1_500.jpg">
        </div></div>


<div id="block">
<div class="title"><a href="/">boku no pico</a></div>
        <div class="desc">
<div class="comment">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</div>

            <img class="img" src="http://24.media.tumblr.com/tumblr_m3gs76t05R1rtwx68o11_r1_400.jpg">
        </div></div>

    <!--don't delete-->
    </div>
    <!--don't delete-->


<!-- column two -->
<div id="blockss">
<div id="block"><div class="title"><a href="/">boku no pico</a></div>
        <div class="desc">
<div class="comment">Lorem ipsum dolor sit amet,  adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula mauris. urna. dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</div>

            <img class="img" src="http://29.media.tumblr.com/tumblr_m3gs76t05R1rtwx68o6_r1_250.jpg">
    </div></div>

<div id="block"><div class="title"><a href="/">boku no pico</a></div>
        <div class="desc">
            <div class="comment">Lorem ipsum dolor sit amet,  adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula mauris. urna. dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</div>

            <img class="img" src="http://27.media.tumblr.com/tumblr_m3gtbaSJ0B1rtwx68o6_400.jpg">
        </div></div>
    </div>

<a style="position:fixed;left:5px;bottom:5px;" href="http://subplanets.tumblr.com">page</a>
</body></html>