Xenophobia (fanfic page 1)

<head>
<title>{title}</title>
<!--- change the title of the page here --->

<!--
THIS THEME WAS CREATED BY: NATALIE (ROSYSTARLINGTHEMES)
You can edit this theme as much as you want.
Please DO NOT remove the credit.
Please like or reblog the post if you use this theme.
THANKS! Enjoy!
-->

<style type="text/css">

::-webkit-scrollbar {background-color:black; border:3px solid #fff;height:5px; width:7px;}
::-webkit-scrollbar-thumb:vertical {background-color:black; border:1px solid #fff; height:40px;}
::-webkit-scrollbar-thumb:horizontal {background-color:black;border:1px solid #fff; height:8px!important}


body {
        background: #fff;  /*here you can put in a background */
        margin:0;width:100%;height:100%;
        font:11px Corbel;
        padding: 0;
        position:absolute;
overflow: auto;
        }

a {
    text-decoration:none;
    outline:none;
    color:lightgray; /*change link colors here */
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

a:hover {
    color:gray; /*change link hover color */
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

#container {
width:660px;
max-height:1000px;
overflow: auto;
position:fixed;
left:450px;
top:35px;
padding:0px 0px 10px 0px;
background-color:white; /*background color of everything in the middle*/
}

.side {
    background-color:black; /*color of sidebar*/
position:fixed;
height:100%;
width:200px;
left:0;
top:0;
border:1px solid black;
}

#fic {
border:1px solid black;
width:200px;
height:200px;
margin-top:10px;
margin-left:10px;
font-size:13px;
transition-duration:1s;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
}

#sort ul{
list-style: none;
}

h2 { /*format on fic titles*/
margin-top:5px;
text-align:center;
}

.rating {
width:99.8%;
height:5px;
margin-top:-10px;
}

#nc17{background-color:red;} /*colors for each rating. change as you please.*/
#r{background-color: orange;}
#pg13{background-color: yellow;}
#pg{background-color: gray;}
#g{background-color: lightgray;}

p {
margin-top:3px;
margin-left:5px;
font-size:13px;
z-index:1;
}

.desc {
margin-top:40px;
height:150px;
overflow:auto;
background-color:white;
z-index:123213123123123123123123;
opacity:0;
text-align:center;
padding:3px;
}

#whole {
margin-top:-10px;
margin-left:5px;
font-size:15px;
}

#fic:hover .desc {
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;
    -ms-transition: all 0.4s ease-in-out;
    -transition: all 0.4s ease-in-out;
}
#fic:hover #whole{
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -transition: all 0.4s ease-in-out;
visibility:hidden;
}

#top {margin-top:-201px;}

#fic a {color:#5a5a5a;}

#filters {
    font-size:13px;
    margin-left:15px;
    margin-top:80px;
}

#filters h2{
    text-align:left;
}

#title {
    font-size:40px; /*title font size*/
    margin-left:115px;
    position:fixed;
    margin-top:300px;
    color:black; /*title font color*/
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    font-family:euphorigenic; /*title font*/
}

li {
    border:1px solid white;
    padding:5px;
    margin-top:3px;
    text-align:center;
    max-width:80px;
    color:black;
    background-color:rgba(255,255,255,0.7); /*background color of links*/
}

li a{color:black;} /*text color of links*/
li a:hover{color:white;} /* on hover color */
#filters:hover{color:white;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -transition: all 0.4s ease-in-out;} /* on hover color */

li:hover {
    background-color:rgba(255,255,255,0.3);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -transition: all 0.4s ease-in-out;
}

@font-face { font-family:euphorigenic; src: url('http://static.tumblr.com/nfvr42d/qvPn7806d/euphorigenic.otf'); }

</style></head><body>
<!--sidebar code begins-->
<!--change your title here\/--><!--you can remove this \/\/ if you want-->
<div id="title">Fanfic Reference<span style="color:#0080ff">*</span></div>
<div class="side">
<div id="sort">
<ul id="filters" class="option-set clearfix" data-option-key="filter">
    <a href="#filter" data-option-filter=".story"><li>refresh</li></a>
    <li><a href="/ask">ask</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/ask">link</a></li></br><!--the main links.-->
by ship: <!--ship name here!! if there isn't a name for it please use sherlock-x-molly OR sherlockxmolly. DON'T REMOVE THE DOT BEFORE IT.-->
    <a href="#filter" data-option-filter=".destiel"><li>destiel</li></a>
    <a href="#filter" data-option-filter=".cophine"><li>cophine</li></a>
    <a href="#filter" data-option-filter=".whoffle"><li>whoffle</li></a>
    <a href="#filter" data-option-filter=".cecilios"><li>cecilios</li></a>
    <a href="#filter" data-option-filter=".sherlolly"><li>sherlolly</li></a>

</br>by rating:
    <a href="#filter" data-option-filter=".g"><li>g</li></a>
    <a href="#filter" data-option-filter=".pg"><li>pg</li></a>
    <a href="#filter" data-option-filter=".pg13"><li>pg-13</li></a>
    <a href="#filter" data-option-filter=".r"><li>r</li></a>
    <a href="#filter" data-option-filter=".nc17"><li>nc-17</li></a>
</ul>
</div>
</div>

<div id="container" class="clearfix">
<!--alright, listen up.-->
<!--I'm only going to explain this once in here, so you better be ready-->

           <!--keep "story"
                but change destiel to your ship and                                                           nc17 to the rating -->
<div id="fic" class="story destiel nc17"><div class="desc">
<!--Description of fic goes here! It will show up on hover.-->
"What begins as a transforming love between Dean Winchester and Castiel Novak in the summer of 1965 quickly derails into something far more tumultuous when Dean is drafted in the Vietnam War. Though the two both voice their relationship is one where saying goodbye is never a real truth, their story becomes fraught with the tragedy of circumstance. In an era where homosexuality was especially vulnerable, Twist and Shout is the story of the love transcending time, returning over and over in its many forms, as faithful as the sea."
</div><div id="top"><!--fic link here!!-->
<h2><a href="http://archiveofourown.org/works/537876/chapters/955176?view_adult=true"><!--insert title here-->twist and shout</a></h2>
<div class="rating" id="nc17"></div></div><p><div id="whole">
<!--MAKE SURE YOU CHANGE ^^ THE RATING HERE TOO-->
<!--words, status, pairing, and warnings. feel free to add other things like chapters, minor characters, etc.-->
<b>words:</b> 97,602</br>
<b>status:</b> complete</br>
<b>main pairing:</b> destiel</br>
<b>warning:</b> graphic depictions of violence, major character death

</p></div></div>
<!--to add another fic, copy from <div id="fic".... all the way to </p></div></div> and paste it after that.-->

<!--THAT'S IT! I hope this lil tutorial was okay and helpful.-->
<!--If you have any questions, feel free to ask at rosystarling.co.vu/ask-->

<div id="fic" class="story spn destiel nc17"><div class="desc">
"Dean's life at twenty-four makes him feel like he's forty—he works two jobs to help pay bills for his house and put his genius little brother through private school, and has spent six years (on and off, let's be honest) working on his mechanical engineering degree at KU. With so much of his life devoted to his family, Dean has little time in his schedule for class and no time for social interaction. Then, while getting his classes together for the fall, he finds himself in a do-or-die situation: He must take his last literature class now, his spring already filled with those left for his major...except that none of the English classes will fit his schedule.</br>
This is how Dean grovels and begs Dr. Castiel Milton to make a special arrangement for him, and Dr. Milton does."
</div><div id="top">
<h2><a href="https://archiveofourown.org/works/285374?view_adult=true">300 things</a></h2>
<div class="rating" id="nc17"></div></div><p><div id="whole">

<b>words:</b> 76,863   </br>
<b>status:</b> complete</br>
<b>main pairing:</b> destiel</br>

</p></div></div>

<div id="fic" class="story ob cophine pg13"><div class="desc">
"The same people came into the library every week, more or less. Cosima knew all of the regulars, but not a single one of them knew about her."
</div><div id="top">
<h2><a href="http://archiveofourown.org/works/1076335/chapters/2161764">intangible</a></h2>
<div class="rating" id="pg13"></div></div><p><div id="whole">


<b>words:</b> 26,905   </br>
<b>status:</b> complete</br>
<b>main pairing:</b> cophine</br>
<b>other pairings:</b> delphine x leekie</br>

</p></div></div>

<div id="fic" class="story ob cophine pg"><div class="desc">
“Shit,” grunted Cosima, stirring awake at the sound of her ringtone. Glancing at her clock, which read 2 am, she rubbed a clumsy hand over her face and answered. “What, Sarah?” “Geez, Cos. Nice to talk to you, too.” Cosima leaned back and closed her eyes. “Sarah. It’s two in the goddamn morning.” “Yea? So? Don’t tell me you were sleepin’. The night’s still young!” “The night just died of old age, actually. What do you want?” Cosima had a tendency to lose all patience at any hour before 9 am. “Ok, ok, fine. How much money have you been makin’ at that lab?” “The paid internship?” “Yea. That.” “Enough. Why?” “As it would seem, Fee and I have gotten ourselves into a bit of… trouble.”
</div><div id="top">
<h2><a href="http://i-effed-it-all-up.tumblr.com/post/72821505858/smells-like-teen-spirit-an-orphan-black-au-chapter-1">smells like teen spirit</a></h2>
<div class="rating" id="pg"></div></div><p><div id="whole">

<b>words:</b> n/a</br>
<b>status:</b> complete</br>
<b>main pairing:</b> cophine</br>

</p></div></div>

<div id="fic" class="story dw whoffle g"><div class="desc">
“I’m tired, I’m confused.” stated the newly regenerated Doctor, who is still in shock of how fast his regeneration process took compared to his past ones. “Doctor, you left me…” Clara said, unwantedly."
</div><div id="top">
<h2><a href="ohmystars.co.vu/post/71569632638">confessions</a></h2>
<div class="rating" id="g"></div></div><p><div id="whole">

<b>words:</b>445</br>
<b>status:</b> complete</br>
<b>main pairing:</b> whoffle</br>

</p></div></div>

<div id="fic" class="story cecilios g"><div class="desc">
"Cecil is interupted during his broadcast by a most certainly welcome visitor. (Carlos/Cecil reunion fic, set after episode 48 "Renovations")"
</div><div id="top">
<h2><a href="http://archiveofourown.org/works/1762499">home</a></h2>
<div class="rating" id="g"></div></div><p><div id="whole">

<b>words:</b>1289</br>
<b>status:</b> complete</br>
<b>main pairing:</b> cecilios</br>
<b>warning:</b> minor spoilers</br>

</p></div></div>

<div id="fic" class="story destiel r"><div class="desc">
"Dean was nearly four when his mark appeared. His mother told him that one day he would find his match. Well, he never thought it would go like this."
</div><div id="top">
<h2><a href="http://archiveofourown.org/works/1961637/chapters/4243278">a comet's mark</a></h2>
<div class="rating" id="r"></div></div><p><div id="whole">

<b>words:</b>66940</br>
<b>status:</b> incomplete</br>
<b>main pairing:</b> destiel</br>

</p></div></div>

<div id="fic" class="story cecilios pg13"><div class="desc">
"Carlos landed a bit roughly in a town he had never seen before. It was blistering hot, the air was dry but somehow breathable, and the sky was orange. There were scarce plants around, and those that were there looked dried to a crisp. The buildings all looked to be out of a Wild West film with the dust to complete the look. The most noticeable thing, however, were the town inhabitants. None of them looked anything near human."
</div><div id="top">
<h2><a href="http://archiveofourown.org/works/2100738/chapters/4578588">you have to claim him</a></h2>
<div class="rating" id="pg13"></div></div><p><div id="whole">

<b>words:</b>41432</br>
<b>status:</b> incomplete</br>
<b>main pairing:</b> cecilios</br>

</p></div></div>

<div id="fic" class="story sherlolly r"><div class="desc">
"The world thinks Sherlock Holmes is dead, but Molly Hooper is one of the few who knows the truth."
</div><div id="top">
<h2><a href="http://archiveofourown.org/works/1112580">16 & 1/2 months</a></h2>
<div class="rating" id="r"></div></div><p><div id="whole">

<b>words:</b>13467</br>
<b>status:</b> complete</br>
<b>main pairing:</b> sherlock x molly</br>

</p></div></div>


</div></div>
</body>
 <!------- filter scripts, don't mess with these!!-------->
 <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
 <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
 <script>
 $(function(){

 var $container = $('#container');

 $container.isotope({
 itemSelector : '.story'
 });


 var $optionSets = $('#sort .option-set'),
 $optionLinks = $optionSets.find('a');

 $optionLinks.click(function(){
 var $this = $(this);
 // don't proceed if already selected
 if ( $this.hasClass('selected') ) {
 return false;
 }
 var $optionSet = $this.parents('.option-set');
 $optionSet.find('.selected').removeClass('selected');
 $this.addClass('selected');

 // make option object dynamically, i.e. { filter: '.my-filter-class' }
 var options = {},
 key = $optionSet.attr('data-option-key'),
 value = $this.attr('data-option-filter');
 // parse 'false' as false boolean
 value = value === 'false' ? false : value;
 options[ key ] = value;
 if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
 // changes in layout modes need extra logic
 changeLayoutMode( $this, options )
 } else {
 // otherwise, apply new options
 $container.isotope( options );
 }

 return false;
 });


 });
 </script>

 <!-----end filter scripts------>

 <!--credit, please don't remove! <3-->
 <div style="position:fixed;bottom:2px; right:3px;"><a title="rosystarlingthemes" href="http://rosystarling.co.vu/"><img width="80px;" src="http://fc03.deviantart.net/fs70/f/2012/318/3/2/stock_black_flying_birds_3___silhouette_by_jassy2012-d5l1xqo.png"></a></div>

</html>