interstellar

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Karla|Montserrat|Oswald|PT+Sans|Pacifico|Poppins|Ubuntu');
@font-face { font-family: "coco"; src: url('https://dl.dropboxusercontent.com/s/an7gqt732m1u90r/Cocogoose%20Pro-trial.ttf') ;}
@font-face { font-family: "claudia"; src: url('https://dl.dropboxusercontent.com/s/qcilv1z2bfuvute/Claudia.otf'); ;}

body
{overflow-x:hidden;
background-image:
url('');
background-position: bottom right;
background-repeat: repeat;
background-attachment: fixed;
background-color:#fff;
overflow:hidden;}

::-webkit-scrollbar-thumb:vertical {background-color:#77b2b8; height:3px; }
::-webkit-scrollbar { height:3px; width:5px; background-color:transparent; }

::selection {
color: #fff;
background: #121212;}

a {
color: #67a2a6;
text-decoration:underline;
padding:2;
text-transform:uppercase;
font-family: tahoma, cursive;
font-size:10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

a:hover {color: #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

#box a {
color: #000;
background-image: linear-gradient(to right, #a3e1e6 , #e6a3b6);
border:1px solid #e6a3b6;
text-decoration:none;
padding:2;
text-transform:uppercase;
font-family: tahoma, cursive;
font-size:10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

#box a:hover {color: #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

b {
color: #b87688;
text-decoration: none;
font-family: georgia, cursive;
text-transform:lowercase;
font-style:italic;
font-size:10px;
letter-spacing:0;}

.title {
  line-height:0;
  font-size:25px;
  color:#94d1d6;
  text-shadow: 1px 1px 0px #888;
  margin-top:10px;
  margin-bottom:15px;
  text-transform: lowercase;
  font-family: 'claudia', sans-serif;
  text-align: center;
  letter-spacing:1;}

.title span {
  display: inline-block;
  position: relative;}

.title span:before,
.title span:after {
  content: "";
  position: absolute;
  height:3px;
  border-bottom: 1px solid #77b2b8;
  border-top: 1px solid #a68391;
  top:0;
  width: 300px;}

.title span:before {
  right: 100%;
  margin-right: 15px;}

.title span:after {
  left: 100%;
  margin-left: 15px;}

*{cursor: url('http://media.tumblr.com/7c3edb626c8cf9435c5c0b2d6acceffd/tumblr_inline_mh67v6xNXM1rdqsqf.png'), default;}

#bitch{position:absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}

 #credit {
    overflow:hidden;
    position:fixed;
    text-align:justify;
    bottom:0px;
    right:0px;
    height:60px;
    width:60px;
    padding:0px;
    opacity: .8;
    background-image: url('https://i.imgur.com/MH0XSqe.png');
    background-position:top center;
    background-attachment: absolute;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}

.icon {
   overflow:hidden;
   position:absolute;
   top:40px;
   left:50px;
   height:100px;
   width:100px;
   z-index:10;
   border:20px solid #fff;
   background-color:#d1b6c4;
   background-image: url('http://i.picpar.com/9PVc.png');
   background-position:center center;
   background-attachment: absolute;
   background-repeat: no-repeat;}

#container {
   position:absolute;
   top:45%;
   margin-top:-100px;
   left:50%;
   margin-left:-250px;
   height:300px;
   width:520px;
   border-radius:10px;
   background-image: linear-gradient(to right, #a3e1e6 , #e6a3b6);
   box-shadow: 5px 5px 5px #cccccc;}

/*CONTENT BEGINS HERE*/

#box {
   background-color: #fff;
   text-transform: lowercase;
   text-align: left;
   color: #7d756b;
   font-size:12px;
   font-family: 'Montserrat', sans-serif;
   position: absolute;
   width:250px;
   height:40px;
   right:50px;
   top:40px;
   line-height:20px;
   padding: 10px;
   margin: 1px;
   opacity:1;
   z-index:10;}

#box2 {
   background-color: #fff;
   text-transform: lowercase;
   text-align: left;
   color: #888;
   font-size:10px;
   font-family: calibri, sans-serif;
   position: absolute;
   width:250px;
   height:120px;
   right:50px;
   bottom:50px;
   line-height:12px;
   padding: 10px;
   margin: 1px;
   overflow:auto;
   overflow-x:hidden;
   opacity:1;
   z-index:1;}

/*TABS INFO*/

.navbar {position: absolute; left: 55px; bottom:100px; z-index: 3000; opacity: 1; }

.link1 {position: absolute; background-color:#fff; border-radius:5px;}
.link1:hover {filter: drop-shadow( 0px 5px 0px #e6a3b6);}

.link2 {position: absolute; background-color:#fff; border-radius:5px; left:45px;}
.link2:hover {filter: drop-shadow( 0px 5px 0px #e6a3b6);}

.link3 {position: absolute; background-color:#fff; border-radius:5px; left:100px;}
.link3:hover {filter: drop-shadow( 0px 5px 0px #e6a3b6);}

.abox, .abox2 {
   background-color: #fff;
   text-transform: lowercase;
   text-align: left;
   color: #888;
   font-size:10px;
   font-family: calibri, sans-serif;
   position: absolute;
   width:250px;
   height:120px;
   right:50px;
   bottom:50px;
   line-height:12px;
   padding: 10px;
   margin: 1px;
   overflow:auto;
   overflow-x:hidden;
   opacity:1;
   z-index:1;}

.slide {z-index: -1; opacity: 0;}
.slide:target {left: 0; opacity: 1; z-index: 1000;}

/*POP UP INFO*/

[data-tooltip] {
 position: relative;
 z-index: 2;
 cursor: pointer;}

[data-tooltip]:before,
[data-tooltip]:after {
 visibility: hidden;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
 opacity: 0;
 pointer-events: none;}

[data-tooltip]:before {
 position: absolute;
 bottom: 150%;
 left: 50%;
 margin-bottom: 5px;
 margin-left: -80px;
 padding: 7px;
 width: 160px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 border-top:1px solid #a3e1e6;
 background-color: rgb(250, 250, 250, 0.9);
 color: #888;
 font-family: 'Poppins', sans-serif;
 content: attr(data-tooltip);
 text-align: center;
 font-size: 10px;
 line-height: 1.2;}

[data-tooltip]:after {
 position: absolute;
 bottom: 150%;
 left: 50%;
 margin-left: -5px;
 width: 0;
 border-top: 5px solid #000;
 border-top: 5px solid hsla(0, 0%, 20%, 0.9);
 border-right: 5px solid transparent;
 border-left: 5px solid transparent;
 content: " ";
 font-size: 0;
 line-height: 0;}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
 visibility: visible;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
 opacity: 1;}

/*COLORED LINES BEGIN HERE*/

#line1 {
 position:fixed;
 z-index:99999999;
 width:140%;
 height:140px;
 top:-40px;
 background-color:#e6a5b7;
 -webkit-transform: rotate(4deg);
 -moz-transform: rotate(4deg);
 -o-transform: rotate(4deg);}

/*CHARACTER NAME*/

#tt { z-index: 10000; position: absolute; text-transform:uppercase; left:5px; top: -70px; font-family: 'coco', cursive; font-size: 65px; color: #30262e;
-webkit-text-fill-color: transparent; background: -webkit-linear-gradient(transparent, transparent), url('https://static.tumblr.com/dff31c6950e28ec6599e64b4cbdb1af1/fskmhqw/jkhp1t9kj/tumblr_static_tumblr_static__640.gif') repeat; background: -o-linear-gradient(transparent, transparent); -webkit-background-clip: text; background-position: center left; background-size: cover;}

#ttsh { z-index: 100; position: absolute; text-transform:uppercase; left:5px; top: -70px; font-family: 'coco', cursive; font-size: 65px; color: #fff; text-shadow: -1px 1px .5px #888;}
</style>

<div id="bitch" oncontextmenu="return false;">
<a href= "https://roleplay.chat/profile.php?user=UFO" target="_blank"><div id= "credit"></div></a>

<div id= "line1"></div>

<div id= "container">
<div class="icon"></div>

<div id= "tt">interstellar</div>
<div id= "ttsh">interstellar</div>

<div class="navbar">
<a class="link1" href="#1"><img src= "http://i.picpar.com/BPVc.png" height=30></a>
<a class="link2" href="#2"><img src= "http://i.picpar.com/CPVc.png" height=30></a>
<a class="link3" href="#3"><img src= "http://i.picpar.com/DPVc.png" height=30></a>
</div>

<div id= "box">
<a href="https://roleplay.chat/profile.php?user=URLHERE" data-tooltip="WRITE SOME CUTENESS HERE.">NAME</a>
<a href="https://roleplay.chat/profile.php?user=URLHERE" data-tooltip="WRITE SOME CUTENESS HERE.">NAME</a>
<a href="https://roleplay.chat/profile.php?user=URLHERE" data-tooltip="WRITE SOME CUTENESS HERE.">NAME</a>
<a href="https://roleplay.chat/profile.php?user=URLHERE" data-tooltip="WRITE SOME CUTENESS HERE.">NAME</a>
<a href="https://roleplay.chat/profile.php?user=URLHERE" data-tooltip="WRITE SOME CUTENESS HERE.">NAME</a>
<a href="https://roleplay.chat/profile.php?user=URLHERE" data-tooltip="WRITE SOME CUTENESS HERE.">NAME</a>
<a href="https://roleplay.chat/profile.php?user=URLHERE" data-tooltip="WRITE SOME CUTENESS HERE.">NAME</a>
<a href="https://roleplay.chat/profile.php?user=URLHERE" data-tooltip="WRITE SOME CUTENESS HERE.">NAME</a>
<a href="https://roleplay.chat/profile.php?user=URLHERE" data-tooltip="WRITE SOME CUTENESS HERE.">NAME</a>
<a href="https://roleplay.chat/profile.php?user=URLHERE" data-tooltip="WRITE SOME CUTENESS HERE.">NAME</a>
<a href="https://roleplay.chat/profile.php?user=URLHERE" data-tooltip="WRITE SOME CUTENESS HERE.">NAME</a>
<a href="https://roleplay.chat/profile.php?user=URLHERE" data-tooltip="WRITE SOME CUTENESS HERE.">NAME</a>
<a href="https://roleplay.chat/profile.php?user=URLHERE" data-tooltip="WRITE SOME CUTENESS HERE.">NAME</a>
<a href="https://roleplay.chat/profile.php?user=URLHERE" data-tooltip="WRITE SOME CUTENESS HERE.">NAME</a>
</div>

<div id= "box2">
<p class="title"><span>out of character.</span></p>
<b>.00</b> | profile design by <a href= "https://roleplay.chat/profile.php?user=UFO" target="_blank">ufo @ rpc</a> for anyone to use. contact ufo for commissions or visit their pastebin!<br>
<hr>
<b>.01</b> ooc here.<br>
<b>.02</b> ooc here.
</div>

<div id="1" class="slide">
<div class="abox">
<p class="title"><span>abilities.</span></p>
<li><b>ability name</b> words words</li>
</div></div>

<div id="2" class="slide">
<div class="abox2">
<p class="title"><span>statistics.</span></p>
<font style=float:left><b>stat</b> </font> <font style=float:right>info</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info</font><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></div>

</div>