About Me Joshdevin

<!--THEME BY JOSHDEVIN, PLEASE DO NOT USE AS A BASE OR REDISTRIBUTE IN ANYWAY.-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<meta name="image:face" content=""/>
<meta name="color:icon" content="#eeeeee"/>
<meta name="color:text" content="#eeeeee"/>

<div style="font-size: 11px; letter-spacing: 2px; float: right; position: fixed; bottom: 10px; right: 10px;  color:{color:text};font-family:inconsolata;"><a href="http://joshdevin.tumblr.com">©<i>j</i>D</a></div>


<style type="text/css">

@font-face{font-family:Brain Flower;src:url(http://static.tumblr.com/9wzbixa/qvjmifp1n/brain_flower.ttf);}

::-webkit-scrollbar {width: 5px; height: 5px; background:{color:Scrollbar Background}; }
::-webkit-scrollbar-thumb { background-color: {color:Scrollbar};}

body{
font-family:calibri;
font-size:11px;
letter-spacing:1px;
line-height:13px;
background-image:url(http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo2_250.png);
background-position: fixed;
background-attachment:fixed;
background-repeat:repeat;
text-decoration:none;
}

a:link, a:active, a:visited{
color:#a8aeaf;
text-decoration:none;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

a:hover{
color:#797a7a;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

#container {
    width:250px;
    margin:0 auto;
}

#about {
    margin-top:200px;
    color:#919191;
    width:300px;
    position:fixed;
    border:1px solid #777777;
}

#title {
        font-family: Brain Flower;
        font-size:36px;
        position:fixed;
        margin-top:175px;
        margin-left:100px;
        color:#919191;
}


.linkage {
    font-size:30px;
    width:75px;
    position:fixed;
    padding:10px;
    color:#919191;
    padding-top:15px;
    text-align:center;
    font-family: Brain Flower;
        -webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

.linkage:hover {
    opacity:1;
    -webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
    }

.about {
    font-family:calibri;
    font-size:10px;
    opacity:0;
    color:#919191;
    margin-left:-21px;
    color:#000;
      -webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

.linkage:hover .about {
    opacity:1;
    width:100px;
    padding:10px;
    color:#919191;
      -webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}
/*face*/
.linkage2 {
    font-size:30px;
    width:75px;
    padding:10px;
    margin-top:0px;
    margin-left:100px;
    position:fixed;
    padding-top:15px;
    text-align:center;
    font-family: Brain Flower;
        -webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

.linkage2:hover {
    opacity:1;
    -webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
    }

.face {
    font-family:georgia;
    font-size:12px;
    opacity:0;
    margin-left:-28px;
    color:#000;
      -webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

.linkage2:hover .face {
    opacity:1;
    width:100px;
    padding:10px;
      -webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

/*askbox*/
.linkage3 {
    font-size:30px;
    padding:10px;
    margin-top:0px;
    margin-left:200px;
    position:fixed;
        width:75px;
    padding-top:15px;
    text-align:center;
    font-family: Brain Flower;
        -webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

#ask {
    opacity:0;
     -webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

.linkage3:hover {
    width:250px;
    margin-left:113px;
}
.linkage3:hover #ask {
    opacity:1;
     -webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
    }

</style>
</head>

<body>

<div id="container">
<div id="title">ABOUT ME </div>
<div id="about">
<div class="linkage"><a href="">ABOUT</a>
<div class="about">Hi, this is a description. Say a little bit about yourself here! (:
</div></div>

<div class="linkage2"><a href="">FACE</a>
<div class="face"><img src="IMGURLHERE" style="width:115px;">
</div>
</div>

<div class="linkage3"><a href="/ask">ASKBOX</a>
<div id="ask">
<p><iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/YOURURLHERE.tumblr.com/" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!—[if IE]><script type="text/javascript">document.getElementById(‘ask_form’).allowTransparency=true;</script><![endif]—></p>
</div></div>

</body>
</html>