Profile Page

<!--

theme by septim


-->


<!DOCTYPE html>
<head>

<title>{Title}</title>

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


<!-- jquery -->


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>

(function($){

$(document).ready(function(){

$("a[title]").style_my_tooltips({

tip_follows_cursor:true,

tip_delay_time:30,

tip_fade_speed:300,

attribute:"title"

});

});

})(jQuery);

</script>


<!--CSS customization here. -->

<style type="text/css">

#s-m-t-tooltip{
    font-size:10px;
    font-family:times new roman, serif;
    position:absolute;
    margin:25px 15px;
    letter-spacing:1px;
    z-index:9999;
    background:white;
    text-transform:uppercase;
    padding:2px 3px 2px 3px;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
}


/*scrollbar*/
::-webkit-scrollbar{height: 5px;
width: 3px;
-webkit-border-radius: 0px;
background-color:{color:background}}
::-webkit-scrollbar-thumb{background-color:{color:scrollbar};}
::-webkit-scrollbar-track{background-color:{color:background};}


/*main structure*/
blockquote {padding:5px 0 5px 30px;
border-left:1px solid #f3f3f3;
margin-left:0;
}

body {
color:black;
font-family:helvetica, sans-serif;
font-size:10px;
text-align:center;
margin:0;
line-height:180%}


a {
color:black;
text-decoration:none;
}

a:hover {
text-decoration:none;}

img{
opacity:1;
border:none;
text-decoration:none}

#left {background:#f3f3f3;
width:50%;
left:0;
top:0;
position:fixed;
height:100%;
}
#right {background:#fff;
width:50%;
right:0;
top:0;
position:fixed;
height:100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

#left .img {width:250px;
position:Absolute;
top:50%;
left:50%;
margin-left:-125px;
-ms-transform: translateY(-50%); /* IE 9 */
-webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
.img img {width:250px;
display:block;
}

.after {box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
    position:absolute;
    content:"";
    bottom:5px;
    left:5px;
    z-index:2;
    color:white;
    height:27px;
    width:27px;
    background:transparent;
    border-bottom:3px solid white;
    border-left:3px solid white;
            -webkit-transition:all 0.6s;
    -moz-transition:all 0.6s;
    -ms-transition:all 0.6s;
    -o-transition:all 0.6s;
    transition:all 0.6s;

    }
.before{box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
    position:absolute;
    content:"";
    top:5px;
    right:5px;
    z-index:2;
    color:white;
    height:27px;
    width:27px;
    background:transparent;
    border-top:3px solid white;
    border-right:3px solid white;
        -webkit-transition:all 0.6s;
    -moz-transition:all 0.6s;
    -ms-transition:all 0.6s;
    -o-transition:all 0.6s;
    transition:all 0.6s;
    }
.img:hover .before, .img:hover .after {width:calc(100% - 13px);
height:calc(100% - 13px);
            -webkit-transition:all 0.6s;
    -moz-transition:all 0.6s;
    -ms-transition:all 0.6s;
    -o-transition:all 0.6s;
    transition:all 0.6s;
}

.inf {
width:250px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:bold;
top: 50%;
left:50%;
margin-left:-125px;
position:absolute;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
h1 {
letter-spacing:3px;
font-size:20px;
display:inline-block;
padding:0 5px 15px 5px;
font-family:times new roman, serif;
border-bottom:5px solid #f3f3f3;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
.mike {font-size:12px;
position:fixed;
text-align:Center;
bottom:10px;
right:10px;
opacity:.3;
}
p {padding:5px 0};
.mike a {margin: 0 5px;}
.go {font-size:14px;
    display:block;
    margin-top:15px;
}

</style>


</head>

<body>


<div id="left">
<div class="img">
<div class="before"></div><div class="after"></div>
<a href="/"><img src="http://37.media.tumblr.com/tumblr_m9nft6RDLJ1qizi55o1_500.jpg"></a>   </div>
</div>
<div id="right">
<div class="inf">
<!--about title-->
<h1>Jon Snow</h1>
<!--about text-->
<p>Uncanny resemblance to a king, unfortunate circumstance.</p>
<p>Cold bites at heart, wolves bites at bones.</p>
<p>Hard as ice, yet gentle as falling snow. King of the North, ruler of no one.</P>
<p>bastard.</p>
<a href="/" title="home" class="go">&#10164;</a>
</div>
</div>

<div class="mike">
<a href="http://farahmir.tumblr.com" target="_blank" title="Theme">&copy;</a>
</div>


</body></html>