Untitled

<!DOCTYPE HTML>

<head>

<title>{Title}</title>
<link href="{Favicon}" rel="shortcut icon">


<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>


<link href='http://fonts.googleapis.com/css?family=Exo+2:400,400italic,700,700italic|Tulpen+One|Economica|Ruthie|Homemade+Apple' rel='stylesheet' type='text/css'>


<style type="text/css">

#s-m-t-tooltip {
    max-width:300px;
    position:absolute;
    z-index:99999;
    margin-top:20px;
    padding:2px 4px 2px 4px;
    background-color:#fff;
    font-family:arial;
    font-size:11px;
    color:#000;
}

::-webkit-scrollbar {width:6px;height:6px;}
::-webkit-scrollbar-track {background-color:transparent;}
::-webkit-scrollbar-thumb {background-color:#BD7AFF;}
::selection {background-color:#BD7AFF;}
::-moz-selection {background-color:#BD7AFF;}

body {
font-family:'gibson';
font-size:12px;
background-color:#200028;
}

#book {
    height:405px;
    width:550px;
    margin-left:auto;
    margin-right:auto;
    margin-top:80px;
    background-image: url('http://redwood.colorado.edu/mepl3109/DM2/images/notebook_background.png');
    -webkit-background-size: 550px;
    -moz-background-size: 550px;
    -o-background-size: 550px;
    background-size: 550px;
    background-position: center;
    background-repeat:no-repeat;
}

#NightmareBaby {
    width:235px;
    height:300px;
    margin-left:260px;
    font-family:'Homemade Apple';
}

#NightmareBaby a {
    font-size:12pt;
    font-style:italic;
    font-weight:bold;
}

.tabs {
  position: relative;
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: bottom;
  margin-bottom:15px;
  width:20px;
}
.tab label {
  display:block;
  background: #eee;
  width:15px;
  padding: 3px;
  border: 1px solid #ccc;
  margin-left: 531px;
  position: relative;
  top: 60px;
  z-index:2;
  font-family:'Homemade Apple';
  font-size:11pt;
  text-align:center;
  -webkit-transition: all .6s ease-in-out .6s;
  -moz-transition: all .6s ease-in-out .6s;
  -o-transition: all .6s ease-in-out .6s;
  transition: all .6s ease-in-out .6s;
}
.tab [type=radio] {
  display: none;
}
.content {
  position: absolute;
  width:480px;
  height:335px;
  padding:35px;
  padding-top:70px;
  top:80px;
  margin-top:0px;
  opacity:0;
  z-index:0;
  -webkit-transition: all .6s ease-in-out;
  -moz-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
  padding-left:10px;
  margin-left:525px;
  border-left:0;
  -webkit-transition: all .6s ease-in .8s;
  -moz-transition: all .6s ease-in .8s;
  -o-transition: all .6s ease-in .8s;
  transition: all .6s ease-in .8s;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
  opacity:1;
  -webkit-transition: all .6s ease-in .8s;
  -moz-transition: all .6s ease-in .8s;
  -o-transition: all .6s ease-in .8s;
  transition: all .6s ease-in .8s;
}

</style>

</head>

<body>

<div id="book">

<div class="tab"><input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1">1</label>
<div id="Father" class="content">
<div id="NightmareBaby">
    <a>Father</a>
    <br>
    I wish he knew how great he is. He's my hero.
</div>
</div>
</div>


<div class="tab"><input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2">2</label>
<div id="Test" class="content">
<div id="NightmareBaby">
    <a>Test</a>
    <br>
    boop
</div>
</div>
</div>


<div class="tab"><input type="radio" id="tab-3" name="tab-group-1"><label for="tab-3">3</label>
<div id="Test2" class="content">
<div id="NightmareBaby">
    <a>Test 2</a>
    <br>
    bloop
</div>
</div>
</div>


<div class="tab"><input type="radio" id="tab-4" name="tab-group-1"><label for="tab-4">4</label>
<div id="Test3" class="content">
<div id="NightmareBaby">
    <a>Test 3</a>
    <br>
    blechl</div>
</div>
</div>
</div>

</body>

</html>