FIC REC #4

<!---------------------------------------------------------------------


                ғɪᴄ ʀᴇᴄ ᴘᴀɢᴇ ᴍᴀᴅᴇ ʙʏ .ᴄʜʟᴏᴇ.
                [ʏᴏɴɢ.ᴄᴏ.ᴠᴜ] & [sᴏᴏɴᴊᴜɴs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ]
                ᴛʜᴇᴍᴇs ᴄᴀɴ ʙᴇ ғᴏᴜɴᴅ ᴀᴛ
                [sᴏᴏɴᴊᴜɴᴛʜᴇᴍᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ]
                ᴘʟᴇᴀsᴇ ʟᴇᴀᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ ᴏɴ ᴛʜᴇ ᴛʜᴇᴍᴇ.
                ɪғ ʏᴏᴜ ʜᴀᴠᴇ ᴀɴʏ ǫᴜᴇsᴛɪᴏɴs ᴄᴏᴍᴇ ᴀsᴋ.


---------------------------------------------------------------------->

<html>
<head>

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

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips();
        });
    })(jQuery);
</script>

<style type="text/css">

#s-m-t-tooltip {display: block;background: #fff;font:oblique 8px arial;letter-spacing: 1px;line-height:90%;color: #222;text-align: center;margin-left: 25px;padding:6px 6px 5px 6px;min-width: 40px;max-width: 200px;z-index: 999999;border-radius:1px;}

::-webkit-scrollbar-track {background-color:#fff;}
::-webkit-scrollbar-thumb {background-color:#f5f5f5;}
::-webkit-scrollbar {width:10px;height:7px;}

::selection {color: #bbb; background: #f5f5f5; }
::-moz-selection {color: #bbb; background: #f5f5f5; }
::-webkit-selection {color: #bbb; background: #f5f5f5; }

body {background-color: #fff;margin: 0px;}

a
{color: #ddd;text-decoration: none;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease; transition: all 0.5s ease;}

a:hover
{color: #aaa;}

#fpage{
position: absolute;
margin:auto;
width: 100%;
height: 530px;
margin-top: 0px;
text-align: center;
background:#fcfcfc;}

#title{
margin: auto;
margin-top: 200px;
font: oblique bold 70px times;
color: #f75e8d;
text-transform: lowercase;
letter-spacing: 5px;
text-shadow: 1px 1px 1px #dadada;}

#description{
margin:auto;
margin-top:20px;
color: #555;
width: 500px;
height: 100px;
font: 9px arial;
letter-spacing: 0px;
text-align: justify;}

.strip{
margin-top: 530px;
position: absolute;
width: 100%;
height: 150px;
background: #000;
z-index:99;}

.head{position: fixed;top: -530px;}

#navigation{width:100%;padding-top:50px;text-align: center;}

#navigation a{
display: inline-block;
margin: 0px 10px 10px 0px;
text-align: center;
font: oblique bold 40px arial;
text-transform: lowercase;
letter-spacing: -1px;
color: #fff;}

#navigation a:hover{color: #f75e8d;}

#container{width: 550px;margin: auto;overflow:auto;}

#entries{
width: 550px;
margin:auto;
margin-top: 350px;
padding-bottom: 40px;
position: absolute;}

#fic {height:auto;width:500px; margin-bottom:50px;background:#fff;padding:20px;}

#square {width:20px;height:20px;border-radius:3px;border:5px solid #f5f5f5; padding:2px;}

#rating {font: oblique bold 9px arial;letter-spacing:1px;padding:11px;color:#444;background:#f5f5f5;width:50px;text-align:center;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;transition: all 0.8s ease;margin-left:-40px;position:absolute;border-radius:3px;opacity:0;}

#fic:hover #rating {opacity:1; margin-left:-80px;}

.titles {font: bold oblique 20px arial; color: #222; margin-left:45px;text-align:left;margin-top:-30px;text-shadow: 1px 1px 0px #ddd;}
.titles a {color:#222;}
.titles a:hover {color:#ccc;text-shadow: 0px 0px 0px #fff;}

p {font:10px arial;text-align:justify;color:#444;border-bottom:1px solid #dcdcdc;padding-bottom:8px;}

#cr {font-size:8px;font-family:arial;text-align:center;letter-spacing:1px;padding: 4px;z-index:99999;position:fixed;top:5px;left:5px;color:#888;}

</style>
</head>
<body>


<div class="strip">
<div id="navigation">
<!--LINKS-->
<a href="/">home</a>
<a href="/ask">message</a>
<a href="http://www.tumblr.com/dashboard">dashboard</a><br />
</div>
</div>

<div id="fpage">
<!--TITLE-->
<div id="title">TITLE</div>
<div id="description">
<!--UPDATE-->
<center><b>▴ last update: date ▴ total: 123 fics </b></center>
<!--DESCRIPTION-->
<br>
DESCRIPTION

</div>


<div id="container">
<div id="entries">

<!--FIC #1-->
<div id="fic">
<!--RATING-->
<div id="rating">rating</div>
<div id="square" style="background:#fec160;"></div>
<!--TITLE-->
<div class="titles"><a href="/">title fiction</a></div>
<!--SUMMARY-->
<p><b>summary:</b>
SUMMARY
</p>
</div>
<!--END OF FIC #1-->

<!--FIC #2-->
<div id="fic">
<!--RATING-->
<div id="rating">rating</div>
<div id="square" style="background:#fe6076;"></div>
<!--TITLE-->
<div class="titles"><a href="/">title fiction</a></div>
<!--SUMMARY-->
<p><b>summary:</b>
SUMMARY
</p>
</div>
<!--END OF FIC #2-->

<!--FIC #3-->
<div id="fic">
<!--RATING-->
<div id="rating">rating</div>
<div id="square" style="background:#fe6076;"></div>
<!--TITLE-->
<div class="titles"><a href="/">title fiction</a></div>
<!--SUMMARY-->
<p><b>summary:</b>
SUMMARY
</p>
</div>
<!--END OF FIC #3-->

<!--FIC #4-->
<div id="fic">
<!--RATING-->
<div id="rating">rating</div>
<div id="square" style="background:#8cea63;"></div>
<!--TITLE-->
<div class="titles"><a href="/">title fiction</a></div>
<!--SUMMARY-->
<p><b>summary:</b>
SUMMARY
</p>
</div>
<!--END OF FIC #4-->

</div>
</div>


<!--------------------------------------------------------->
<script>
var header = document.querySelector('.strip');
var origOffsetY = header.offsetTop;

function onScroll(e) {
  window.scrollY >= origOffsetY ? header.classList.add('head') :
                                  header.classList.remove('head');
}

document.addEventListener('scroll', onScroll);
</script>
<!---------------------------------------------------------->
<div id="cr" title="page by soonjun"><a href="http://soonjunthemes.tumblr.com/">©</a></div>
</body>
</html>