Untitled

<!DOCTYPE html>
<html>
<head>


<title>of game of thrones</title>


<link rel="shortcut icon" href="https://66.media.tumblr.com/4b71b4b89175dd71c279874e399d6305/tumblr_inline_pspfrlmO951wdaizp_540.png" />

<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>

<!-- CUSTOM FONTS -->

<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Satisfy&display=swap" rel="stylesheet">

<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>

<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Lora&display=swap" rel="stylesheet">


</head>

<style type="text/css">

@font-face { font-family:"champagne"; src:url('https://static.tumblr.com/xekbux7/zVim6yitc /champagne___limousines.ttf');}

body {
     color:#323232;  /* body font color */
     background-color:#fff; /* background color */
     text-align:justify;
     font-family:'karla';
     font-size:10px;
}

b {
    font-size: 13px;
    font-weight: 800;
    letter-spacing:2px;
    padding: 2px;

}

i {
    font-weight:400px;

}

a {
    font-weight:400px;
    color: #000;
}

.container {
    width:595px;
    height:525px;
    position: absolute;
    background: #fff; /* container background color */
    text-align:justify;
    border-radius:4px;
    overflow:auto;
    margin-top: 190px;
    margin-left: 580px;
    border: 2px solid #323232;
    padding:5px;
    overflow-x:auto;
    overflow-y:hidden;
}

#navi {
    text-align:justify;
    margin-top: 750px;
    margin-left: 880px;
    font-weight: 900;
    font-size: 10px;
    text-transform: bold;
    position: absolute;
    color: #e3e3e3;
}

#sidebar {
    width:195px;
    height:521px;
    background: #fff; /* sidebar background color */
    position:absolute;
    overflow:auto;
    border: 2px solid #323232;
    border-radius: 4px;
    margin-top: 190px;
    margin-left: 290px;
}

/*-----------TAB LINKS----------*/
.tab {
    position:absolute;
    top:0px;
    left:0px;
}

.tab button {
    background:#fff;
    padding:none;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    width:170px;
    height:70px;
    color:#8d8d8d;
    border-radius:6px;
    margin-top:10px;
    margin-left:0px;
}

.tab li {
    color:#fff;
}

.tab img {
    width:50px;
    height:50px;
    position:absolute;
    margin-left: -70px;
    margin-top: -10px;
}


/* Create an active/current tablink class */
.tab button.active {
    background-color:#5d5d5d;
    color:#fff;
}


#linedec1 {
    width: 500px;
    height: 4px;
    background-color: #323232;
    color: #323232;
    margin-top: 240px;
    margin-left: 380px;
    position: absolute;

}

#linedec2 {
    width: 500px;
    height: 4px;
    background-color: #323232;
    color: #323232;
    margin-top: 665px;
    margin-left: 380px;
    position: absolute;

}

#musedetails {
     text-align:right;
     font-family: 'Parisienne', cursive;
     font-size:16px;
     font-weight:200;
}

#musedetails2 {
     text-align:right;
     font-family: 'Lora', serif;
     font-size:8px;
}

#stats {
    width:350px;
    height: 400px;
    border: 2px solid #000;
    margin-top: 10px;
    margin-left: 10px;
    font-size:11px;
    font-weight:400;
    font-family: 'Lora', serif;
    overflow:auto;
}

#statstitle {
    font-size:20px;
    text-align:center;
    margin-top: 10px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    padding:5px;
}

#statsinfo {
    padding: 5px;
    line-height:25px;
    padding-top: 5px;
}

#relations {
    width:350px;
    height: 400px;
    border: 2px solid #000;
    margin-top: -403px;
    margin-left: 375px;
    font-size:11px;
    font-weight:400;
    font-family: 'Lora', serif;
    overflow:auto;
}

#relationsname {
    font-size:20px;
    text-align:center;
    margin-top: 10px;
    padding:10px;
    padding-top: 5px;
    text-align: center;
    width:100px;
    border-bottom: 2px solid #000;
    position:center;
    margin-left:115px;
}

#relationsurl {
     text-align:center;
     font-family: 'Parisienne', cursive;
     font-size:19px;
     font-weight:200;
     color: #000;
}

#relationsabout {
     text-align:left;
     font-family: 'Lora', serif;
     font-size:11px;
     font-weight:200;
     color: #000;
     padding:5px;
     border-bottom: 1px solid #000;
}

#verses {
    width:350px;
    height: 400px;
    border: 2px solid #000;
    margin-top: -403px;
    margin-left: 740px;
    font-size:11px;
    font-weight:400;
    font-family: 'Lora', serif;
    overflow:auto;
}

#versestitle {
     text-align:center;
     font-family: 'Parisienne', cursive;
     font-size:35px;
     font-weight:200;
     color: #000;
     padding: 5px;
     border-bottom: 1px solid #000;
}

#versestext {
     text-align:left;
     font-family: 'Lora', serif;
     font-size:12px;
     font-weight:200;
     color: #000;
     padding: 5px;
}


::-webkit-scrollbar {
width: 1px; /** width of total scrollbar **/
background: #fff; /** background of scrollbar **/
}

::-webkit-scrollbar-thumb {
background: #000; /** color of the moving part of the scrollbar (thumb) **/
}


</style>

<body>

<div id="navi">
<a href="/muselist" style="color: #e3e3e3">list version ○ for canons ● </a>
<a href="/muselistog" style="color: #6d6d6d">list version ○ for originals</a>

</div>

<div id="linedec1"></div>
<div id="linedec2"></div>
<div id="sidebar" class="tab">


<!-- START CHARACTER 01 -->
<li><button class="tablinks active" onclick="openCity(event, 'tab1')">
<img src="https://via.placeholder.com/50">
<div id="musedetails">
<i>Robin Arryn</i></div>
<div id="musedetails2">
lord of the vale
</div>
</button></li>
<!-- END CHARACTER 01 -->

<!-- START CHARACTER 02 -->
<li><button class="tablinks" onclick="openCity(event, 'tab2')">
<img src="https://via.placeholder.com/50">
<div id="musedetails">
<i>Petyr Baelish</i></div>
<div id="musedetails2">
lord of baelish castle
</div>
</button></li>
<!-- END CHARACTER 02 -->

<!-- START CHARACTER 03 -->
<li><button class="tablinks" onclick="openCity(event, 'tab2')">
<img src="https://via.placeholder.com/50">
<div id="musedetails">
<i>Sandor Clegane</i></div>
<div id="musedetails2">
the hound
</div>
</button></li>
<!-- END CHARACTER 03 -->
</div>
</div>

<div class="container">

<div id="tab1" class="tabcontent">
<div id="stats">
<div id="statsinfo">
<div id="statstitle">GENERAL</div>
<b>NAME</b>  basic.<Br>
<b>TITLES</b>  basic.<Br>
<b>AGE</b>  basic.<Br>
<b>BIRTHPLACE</b>  basic.<br>
<b>LANGUAGES</b>  basic.<Br>
<b>SEXUALITY</b>  basic.<Br>
<div id="statstitle">PHYSICAL</div>
<b>FACECLAIM</b>  basic.<Br>
<b>HAIR COLOR</b>  basic.<Br>
<b>EYE COLOR</b>  basic.<Br>
<b>HEIGHT</b>  basic.<br>
<b>WEIGHT</b>  basic.
<div id="statstitle">PERSONAL</div>
<b>FACECLAIM</b>  basic.<Br>
<b>HAIR COLOR</b>  basic.<Br>
<b>EYE COLOR</b>  basic.<Br>
<b>HEIGHT</b>  basic.<br>
<b>WEIGHT</b>  basic.
</div>

</div>
<div id="relations">
<div id="relationsname">muse name</div>
<div id="relationsurl"><a href="/">user url</a></div>
<div id="relationsabout">this is for a relationship about.</div>
<div id="relationsname">muse name</div>
<div id="relationsurl"><a href="/">user url</a></div>
<div id="relationsabout">this is for a relationship about.</div>
<div id="relationsname">muse name</div>
<div id="relationsurl"><a href="/">user url</a></div>
<div id="relationsabout">this is for a relationship about.</div>
</div>

<div id="verses">
<div id="versestitle">Verse One</div>
<div id="versestext">this is the about section.</div>
</div>
</div>

<div id="tab2" class="tabcontent"> yes. </div>
<div id="tab3" class="tabcontent"> maybe. </div>

</div>
</div>

</body>
</html>