Mystique Profile CSS

/* Custom profile for Tink / Mystique by Vii */

@font-face {
  font-family: Parisienne;
  font-style: normal;
  font-weight: 400;
  src: url(http://fonts.gstatic.com/s/parisienne/v4/1wiHF6pWOa568Cj3p-anxPk_vArhqVIZ0nv9q090hN8.woff2);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

h2 {
font-family: Parisienne;
}

ul.navigation {
position: absolute;
margin: auto;
left: 340px;
top: 195px;
width: 180px;
z-index: 1;
padding: 0;
box-sizing: border-box;
border: none;
background: transparent;
}

ul.navigation li {
width: 50%;
}

ul.navigation li a {
width: 60px;
height: 57px;
margin: auto;
box-sizing: border-box;
text-align: center;
padding-top: 21px;
font-size: 10px;
background: url(http://i.imgur.com/3i8zTWN.png);
}

ul.navigation li a:hover {
background: url(http://i.imgur.com/3i8zTWN.png);
color: #D07CC8;
}

#top-nav-forum a {
padding-left: 15px;
}

#top-nav-shops a {
padding-left: 15px;
}

#top-nav-search a {
padding-left: 13px;
}

#content:before, #content:after, #likes, #dislikes, #hobbies, #logo, #bio, #friendlist { display: none; }

body {
background: url(http://i.imgur.com/pCA2due.png) right;
background-size: cover;
background-attachment: fixed;
}

#wrap {
margin: auto;
width: 100%;
height: 100%;
padding: 0;
background: transparent;
border: none;
}

#content {
width: 400px;
float: left;
height: 100%;
position: absolute;
top: 0px;
margin: auto;
background: transparent;
border: none;
}

#sidebar {
width: 200px;
height: 300px;
padding: 0;
position: absolute;
z-index: 1;
left: 340px;
top: 335px;
}

#sidebar h2 {
z-index: 2;
position: absolute;
font-size: 72px;
color: rgba(255, 255, 255, 0.8);
bottom: -10px;
}

#sidebar img {
background: rgba(107, 111, 207, 0.5);
background: radial-gradient(rgba(208, 124, 200, 0.3), rgba(107, 111, 207, 0.5));
transform: rotateY(180deg);
transition: all .3s ease;
border: 1px solid rgb(107, 111, 207);
box-shadow: 0 0 5px 2px rgba(107, 111, 207, 1);
}

ul#actions {
position: absolute;
top: 50px;
color: rgb(43, 46, 65);
text-transform: lowercase;
right: 15px;
text-align: right;
transition: all .3s ease;
border: 1px solid transparent;
opacity: 0;
}

#sidebar:hover ul#actions {
transform: translateX(70px);
opacity: 1;
background: rgba(208, 124, 200, 0.5);
background: radial-gradient(rgba(107, 111, 207, 0.5), rgba(208, 124, 200, 0.5));
border: 1px solid rgb(208, 124, 200);
box-shadow: 0 0 5px 2px rgb(208, 124, 200);
}

ul#actions a {
color: rgba(255, 255, 255, 0.8);
transition: all .3s ease;
}

ul#actions a:hover {
color: rgb(107, 111, 207);
}

#comments {
width: 90%;
padding: 0;
border: none;
overflow: visible;
color: transparent;
}

#comments img {
display: none;
}

#comments h2 {
position: absolute;
width: 70%;
top: 30px;
text-align: right;
transition: all .3s ease;
color: rgba(255, 255, 255, 0.8);
}

#comments span {
display: none;
}

#comment_list {
float: left;
width: 300px;
background: rgba(107, 111, 207, 0.5);
background: radial-gradient(rgba(208, 124, 200, 0.3), rgba(107, 111, 207, 0.5));
margin: 5px;
margin-top: 50px;
border: 1px solid rgb(107, 111, 207);
box-shadow: 0 0 5px 2px rgb(107, 111, 207);
height: 420px;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
padding: 5px;
}

#comment_list li {
margin: auto;
text-align: center;
transition: all .3s ease;
border-radius: 5px;
}

#comment_list li:hover {
background: rgba(255, 255, 255, 0.8);
}

#comment_list li a {
width: 100%;
font-family: Parisienne;
float: right;
border-bottom: 1px solid;
text-align: left;
transition: all .3s ease;
color: #AB8EF7 !important;
}

#comment_list li a:hover {
text-decoration: none;
color: #D07CC8 !important;
}

#comment_list li p {
color: #D07CC8;
font-family: Garamond;
}

#comment_list li p small {
width: 100%;
float: right;
visibility: hidden;
}

#comment_list li p small > small {
visibility: visible;
}

a.delete.small {
text-align: right !important;
text-transform: lowercase;
border-bottom: none !important;
border-top: 1px solid rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.5) !important;
}

#comments form {
margin: 7px;
background: rgba(107, 111, 207, 0.5);
background: radial-gradient(rgba(208, 124, 200, 0.3), rgba(107, 111, 207, 0.5));
border: 1px solid rgb(107, 111, 207);
box-shadow: 0 0 5px 2px rgb(107, 111, 207);
box-sizing: border-box;
height: 100px;
position: absolute;
width: 70%;
float: left;
text-align: center;
top: 500px;
}

textarea {
width: 70%;
margin: 5px auto;
height: 40px;
box-sizing: border-box;
background: rgba(46, 43, 65, 0.5);
border: 1px solid rgb(107, 111, 207);
transition: all .3s ease;
color: rgba(255, 255, 255, 0.5);
font-family: Arial;
}

textarea:focus {
background: rgba(43, 46, 65, 0.7);
color: #D07CC8;
border: 1px solid #D07CC8;
}

#comment-button, #load-more {
display: block !important;
font-size: 10px;
}

#comment-button {
width: 100%;
background: #D07CC8;
border: none;
color: rgba(255, 255, 255, 0.5);
transition: all .3s ease;
}

#comment-button:hover {
background: transparent;
color: #D07CC8;
}

#load-more {
position: relative;
width: 82.5%;
top: 95px;
left: 7px;
z-index: 1;
background: rgba(255, 255, 255, 0.5);
border: none;
color: rgb(43, 46, 65);
transition: all .3s ease;
}

#load-more:hover {
background: transparent;
color: rgba(255, 255, 255, 0.5);
}

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

::-webkit-scrollbar-track {
background: transparent;
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.2);
}

::-webkit-scrollbar-thumb {
background: rgba(107, 111, 207, 0.5);
background: radial-gradient(rgba(208, 124, 200, 0.3), rgba(107, 111, 207, 0.5));
}

/* End Custom profile */