<!-- -------------------------- SCRIPTS BOX-------------------------- -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>

<script>
$(document).ready(function() {
    $('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = $(this).attr('href');

        // Show/Hide Tabs
        $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();

        // Change/remove current tab to active
        $(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});
</script>

<script>
$(document).ready(function() {
  $('#filterOptions li a').click(function() {
    // fetch the class of the clicked item
    var ourClass = $(this).attr('class');

    // reset the active class on all the buttons
    $('#filterOptions li').removeClass('active');
    // update the active state on our clicked button
    $(this).parent().addClass('active');

    if(ourClass == 'all') {
      // show all our items
      $('#ourHolder').children('div.item').show();
    }
    else {
      // hide all elements that don't share ourClass
      $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
      // show all elements that do share ourClass
      $('#ourHolder').children('div.' + ourClass).show();
    }
    return false;
  });
});
</script>

<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">


<!-- -------------------------- STYLE BOX -------------------------- -->

<style>
/*----------------------------- FONTS ------------------------------- */

@font-face { font-family: "frontage outline"; src: url('https://dl.dropboxusercontent.com/s/452n0o323kateo7/Frontage-Outline.otf?dl=0'); format("opentype");}
@font-face { font-family: "jenna sue"; src: url('https://dl.dropboxusercontent.com/s/bsju94guldr45k8/JennaSue.ttf?dl=0'); format("truetype");}


/* ---------------------------- GENERAL ----------------------------- */

/* -------- SELECTION TOOL ------- */

::-moz-selection {
    background: #000000;
    color: #ffffff;
}

::selection {
    background: #000000;
    color: #ffffff;
}

/* -------- SCROLLBAR ------- */

::-webkit-scrollbar {
    width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
    background:#ffffff;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background:#000000;
}
::-webkit-scrollbar-thumb:window-inactive {
	background: transparent;
}


/* -------- BASICS ------- */

body {
    background:#121212 url();
    color: #eee;
    font-family:'work sans';
    font-size: 11px;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    line-height:150%;
}

a {
    color:#317247;
    text-decoration: none;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

a:hover{
    color:#a0a0a0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

b, strong {
color:#317247;
}



p{
    margin-bottom:10px;
}

small, sub, sup {
font-size:10px;
}

ul{
    list-style-type:square;
}

ol{
    list-style-type:;
}

h1, h1 a {
font-family:'frontage outline';
  text-align:center;
  font-size:32px;
  letter-spacing:5px;
  text-transform:uppercase;
  color:#a6a6a6;
  line-height:120%;
}

h2 {
font-family:'frontage outline';
color:#317247;
  text-align:center;
  font-size:22px;
  letter-spacing:5px;
  text-transform:uppercase;
  line-height:120%;
}

h5 {
font-family:'frontage outline';
text-transform:uppercase;
font-weight:bold;
padding:5px;
font-size:40px;
color:#317247;
text-align:center;
width:200px;
line-height:35px;
margin-top:10px;
letter-spacing:2px;
border-bottom:solid 2px #317247;
max-height:50px;
overflow:hidden;
}

h6 {
float:right;
margin-top:-350px;
margin-right:10px;
text-transform:uppercase;
font-size:20px;
font-family:'frontage outline';
line-height:150%;
background: -webkit-linear-gradient(20deg, , );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
width:190px;
}

#bigcon{
    width:420px;
    margin-left:auto;
    margin-right:auto;
}

.tabcontent {
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    width: 460px;
    text-align:center;
    margin-bottom:0px;
    height:430px;
    overflow-y:hidden;
    left:50%;
    margin-left:-180px;
    top:50%;
    margin-top:-210px;
    padding:10px;
    }

/* ----------------------------- HEADER STUFF ---------------------------*/

#sidebar {
    background-color:#222;
    position:fixed;
    width:200px;
    height:420px;
    margin-bottom:50px;
    text-align:center;
    margin-left:0px;
    top:50%;
    margin-top:-210px;
    left:50%;
    margin-left:-400px;
    padding:10px;
    border-radius:5px;
z-index: -1px}


/* ----------------------------- SIDEBAR IMAGE ---------------------------*/

#sidebarimg {
width:190px;
height:80px;
border-radius:5px;
border:solid 2px #317247;
padding:5px;

background-image: url('https://4.bp.blogspot.com/-cM1KOcO3rLo/UjeYvEm4xNI/AAAAAAAAan0/iPjJelfYYZw/s1600/01.jpg');/* ----------------------------- change image here ---------------------------*/

background-size:cover;
opacity: 0.5;}


.blogtitle {
   margin-bottom:0px;
    margin-top:-30px;
    margin-left: -160px;
    width: 500px;
    position: relative;
	height:35px;
  font-family:'jenna sue';
 padding:5px;
font-size:70px;
line-height: 25px;
letter-spacing: 2px;
color:#317247;
text-transform:uppercase;
}

 .subtitle {
   position: absolute;
   margin-top:210px;
   background-color:#317247;
   border-radius:5px;
   padding: 15px;
   width:150px;
   left:50%;
   top:50%;
   margin-left:-380px;
   z-index: ;}



.description{
    margin-bottom:5px;
    height:230px;
    width: 190px;
    overflow-y:scroll;
    font-size:11px;
    background-color:#121212;
    padding:5px;
    border-radius:5px;
    color:#a6a6a6;
    line-height:1.6;
    text-align: justify;
    letter-spacing:1px;
    margin-left: 0px;}


/* ------------------------------ TABS ------------------------------ */

.tabs {
    width:100%;
    margin-left:0px;
    display:inline-block;
}

    /*----- Tab Links -----*/

    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }

 .tab-links {
        z-index:9999999999;
        margin-top:5px;
 }
    .tab-links li {
        margin-right:3px;
        display:inline-block;
        list-style:none;
        text-transform:uppercase;
        margin-bottom:0px;
    }

        .tab-links a {
            padding:5px;
            display:inline-block;
            color:#317247;
            border:1px solid #317247;
            font-weight:bold;
            font-size:20px;
            font-family:'frontage outline';
            border-radius:5px;
        margin-top:5px;}

        .tab-links a:hover {
        color: #fff;
            text-decoration:uppercase;
               -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -o-transition: all 1s;
        -ms-transition: all 1s;
        transition: all 1s;
        }

    li.active a, li.active a:hover {
        color:#fff;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -o-transition: all 1s;
        -ms-transition: all 1s;
        transition: all 1s;
    }

    /*----- Content of Tabs -----*/
    .tab-content {
   }

        .tab {
            display:none;
        }

        .tab.active {
            display:block;
        }


.aboutme {
width:200px;
height:230px;
overflow-y:scroll;
    background-color:#222;
    padding:10px;
    border-radius:5px;
    font-size:11px;
    z-index:999;
    top:50%;
    margin-top:0px;
    font-size:10px;
    line-height:1.5;
    letter-spacing:1px;
    margin-left: 0px;
    text-align: justify;}

.aboutpic {
width:220px;
float:right;
}

/* ----------------------------- RIGHT SIDE IMAGE ---------------------------*/
.aboutpicimg {
width:215px;
height:425px;
border-radius:5px;
float:right;
top:50%;
margin-top:-5px;
border:solid 2px #317247;
padding:5px;
/* ----------------------------- CHANGEURL BELOW ---------------------------*/
background-image: url('https://66.media.tumblr.com/fed5238e119e228279ab4d009b17087c/tumblr_mz2hybaRhI1re41uao1_540.jpg');

background-size:cover;
background-attachment:absolute;
opacity: 0.5;}

/* ----------------------------- WOLF IMAGE---------------------------*/
.aboutme2 {
width:200px;
height:100px;
border-radius:5px;
border:solid 2px #317247;
padding:5px;
    background-color:#222;
    z-index:999;
    top:50%;
    margin-top:100px;
    position: absolute;
    /* ----------------------------- CHANGE IMAGE BELOW ---------------------------*/
   background-image: url('https://pacificlegal.org/wp-content/uploads/2017/01/Gray-Wolf-780x500.jpg');
   background-size:cover;
   opacity: 0.5;}

/* ---------------------------- MUSES  ------------------------- */

.muse {
width:90px;
height:90px;
display:inline-block;
padding:5px;
margin:5px;
background:#ffffff;
border-radius:5px;
}

.muse img {
width:80px;
height:80px;
border-radius:100px;
border:solid 2px #317247;
padding:5px;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    -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;
}

.muse img:hover {
-ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);
        -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    -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;
}

h4 {
font-family:'frontage outline';
padding:5px;
font-size:18px;
margin-top:-10px;
margin-bottom: -5px;
z-index:99999999999999999;
color:#317247;
text-transform:uppercase;

}




/* QUOTES */

.quote{
font-family:'work sans';
  text-align:center;
  font-size:20px;
  line-height:110%;
}

.quotesource{
    text-align:center;
    margin-bottom:15px;
    margin-top:15px;
}


#glenplayer02 {
 position:absolute;
 top:0;margin-top:5px;
 left:20px;margin-right:10px;
 display:flex;
 z-index:99; }


#glenplayer02 a {text-decoration:none;}

#glenplayer02 > div {
 align-self:center;
 -webkit-align-self:center;
}

.music-controls {
 user-select:none;
 -webkit-user-select:none;
 cursor:pointer;
}

.playy, .pausee {color:#222;} /* color of play & pause buttons */

.playy {font-size:13px;}

.pausee {
 display:none;
 margin-right:1.5px;
}

.sonata {
 margin-left:10px;
 color:#fff; /* color of music note symbol */
}

.labeltext {
 margin-left:8px;
 padding: 2px;
 border: 0px solid #222;
 font-family:'Work Sans';
 font-size:16px;
 color:#111; /* color of song title */
}

.labeltext:hover {
 margin-left:8px;
 background:#888;
 padding: 2px;
 border: 1px solid #888;
 font-family:'Work Sans';
 font-size:16px;
 color:#fff; /* color of song title */}






</style>

<div id="bigcon">

<div id="sidebar">


 <div class="blogtitle">
 <!-- -------------------------- TITLE CAN BE CHANGED may need editing if you do tho!-------------------------- -->

 <span class="th th-quote-up"></span>Alpha </div>


 <div id=sidebarimg></div>

 <div class="tabs">
 <ul class="tab-links">
 <li class="active" style="margin-left:-30px">
 <a title="main" href="#tab1">0</a></li>
 <li><a title="history" href="#tab2">0</a></li>
 <li><a title="traits" href="#tab3">0</a></li>
 <li><a title="ooc" href="#tab4">0</a></li>
  </ul>
 </div>

 <div class="description">
 <p>
 <b>Name:</b><font style=float:right>Colton Raines</font><br>
<b>Age:</b><font style=float:right>25</font><br>
<b>Gender:</b><font style=float:right>Male</font><br>
<b>Species:</b><font style=float:right>Lupine</font><br>
<b>Height:</b><font style=float:right>6'0</font><br>
<b>Weight:</b><font style=float:right>185 pounds</font><br>
<b>Hair:</b><font style=float:right>Brown</font><br>
<b>Eyes:</b><font style=float:right>Green</font><br>
<b>Orientation:</b><font style=float:right>Heterosexual</font><br>
<b>Marital Status:</b><font style=float:right>Single</font><br>
<b>Occupation:</b><font style=float:right>Jack of all Trades</font><br>
<b>Residence:</b><font style=float:right>Nowhere</font></div>


 <!-------MUSIC PLAYER BY GLENTHEMES------->



</div>
 <div class="subtitle">

 <div id="glenplayer02">
 <div class="music-controls" onclick="songstart();">
 <div class="playy">►</div>
 <div class="pausee">❚❚</div>
 </div>
 <div class="sonata">♫</div>

 <!-- -------------------------- SONG TITLE-------------------------- -->

 <div class="labeltext">Song Title</div>
</div><!--end music player-->
<!-- -------------------------- SIBG URL IN SCR-------------------------- -->

<audio id="tune" src="" type="audio"></audio>

</div>





<!-- --------------------------- TABS -------------------------- -->


<div class="tabs">


<!-- --------------------------- TAB 1 -------------------------- -->

<div class="tab-content">

<div id="tab1" class="tab active">

<div class="tabcontent">

 <div class="aboutpic"><div class="aboutpicimg"></div></div>

 <div class="aboutme">
 <h4>W h o</h4>
 <!-- -------------------------- WHO BOX-------------------------- -->

<p>Lorem ipsum dolor sit amet...</p>

</div>

 <h5>Colt</h5>

 <div class="aboutme2">

 </div>



 </div>

</div>



<!-- -------------------------- TAB 2 -------------------------- -->

<div id="tab2" class="tab">
 <div class="tabcontent">

 <div class="aboutpic"><div class="aboutpicimg"></div></div>

 <div class="aboutme">
 <h4>H i s t o r y</h4>
 <!-- -------------------------- HISTORY BOX-------------------------- -->

<p>Lorem ipsum dolor sit amet...</p>
</div>

 <h5>Colt</h5>

 <div class="aboutme2">
 </div>


 </div>
</div>


<!-- -------------------------- TAB 3 -------------------------- -->

<div id="tab3" class="tab">
 <div class="tabcontent">

 <div class="aboutpic"><div class="aboutpicimg"></div></div>

 <div class="aboutme">
 <!-- -------------------------- TRAITS BOX-------------------------- -->

 <h4>Traits</h4>
 <b>Superhuman Speed:</b> Extremely fast and can ran faster than the human eye can follow..<br>
<b>Superhuman Strength:</b> Akin to the strength of a vampire, lycans are much stronger in their animal form but still stronger than a human when in human form.<br>
<b>Accelerated Healing:</b> Able to heal fast from any mortal wound not caused by silver. More powerful lycans are able to regrow limbs, although it may not be able to be done in one sitting..<br>
<b>Heightened Senses:</b> Extremely acute senses. Lies can be detected through scent and the more powerful lycans can even hear blood moving around a person's body.<br>
<b>Species Command:</b> Powerful, alpha lycans can command species of their own to do certain things. Force shift etc.<br>
<b>Partial Shapeshifting:</b> Able to partially shift, as in claws or even bone structure to alter their appearance.<br>
<b>Skill Name:</b> Skill description....<br>
<b>Skill Name:</b> Skill description....<br>
<b>Skill Name:</b> Skill description....<br>
<b>Skill Name:</b> Skill description....<br>
<b>Skill Name:</b> Skill description....<br>
 </div>

 <h5>Colt</h5>

 <div class="aboutme2"></div>


 </div>
</div>


<!-- -------------------------- TAB 4 -------------------------- -->

<div id="tab4" class="tab">
 <div class="tabcontent">
 <!-- -------------------------- OOC BOX-------------------------- -->


<h4>OOC</h4>

<b>01.</b> DM Friendly.<br>
<b>02.</b> Room RP Preferred.<br>
<b>03.</b> IC is not OOC. Know the difference.<br>
<b>04.</b> RP ideas welcome.<br>
<b>05.</b> Story/Smut.<br>
<b>06.</b> Do not DM with a starter.<br>
<b>07.</b> Don't be a cunt, I won't be a dick.<br>
<b>08.</b> FC=Rodrigo Guirao Diaz.<p><br>

  <h4>MUSES</h4>
 <!-- -------------------------- MUSES BOX-------------------------- -->

 <div class="muse">
 <a title="Dacia - Former Alpha, Engima. AMAZING WRITER AND the one who did this code for me. SHE's THE BESTEST!" href="/">
 <img src="https://media.giphy.com/media/s52d4ve4fMyiI/giphy.gif">
 <h4>Daci</h4>
 </a>
 </div>

 <div class="muse">
 <a title="muse name, age, label." href="/">
 <img src="https://i.imgur.com/3PrC6Y3.png">
 <h4>muse</h4>
 </a>
 </div>

 <div class="muse">
 <a title="muse name, age, label." href="/">
 <img src="https://i.imgur.com/K0dUdqe.png">
 <h4>muse</h4>
 </a>
 </div>

 <div class="muse">
 <a title="muse name, age, label." href="/">
 <img src="https://i.imgur.com/OGHVKzX.png">
 <h4>muse</h4>
 </a>

 </div>




 </div>
</div>


<!-- END OF TABS -->

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