EM 3.1 CSS

/* Custom profile code for EM by Vii */

* { box-sizing: border-box; cursor: url(http://www.rw-designer.com/cursor-extern.php?id=20749), auto !important; }

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

::-webkit-scrollbar-track {
background: #000;
}

::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.5);
}

@font-face {
  font-family: Monda;
  font-style: normal;
  font-weight: 400;
  src: url(http://fonts.gstatic.com/s/monda/v6/9IGqbwlMn4Zg3as8alsdNA.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;
}

@font-face {
  font-family: Stalinist One;
  font-style: normal;
  font-weight: 400;
  src: url(http://fonts.gstatic.com/s/stalinistone/v9/MQpS-WezM9W4Dd7D3B7I-UT7SZiePg.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;
}

@-webkit-spinmebaby {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

@-moz-spinmebaby {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

@keyframes spinmebaby {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

#content:before, #content:after, #friendlist h2, li#likes, li#dislikes, li#hobbies, li#view-wishlist, #comment_list img { display: none; }

#header { overflow: visible !important; border: none!important; }

a:hover { text-shadow: 0 0 1px; }

a:hover, a img:hover, #comment-button:hover, #load-more:hover, #comments h2:hover, #bio h2:hover { cursor: url(http://www.rw-designer.com/cursor-extern.php?id=20751), pointer !important; text-decoration-color: maroon;  }

h1#logo  {
-webkit-filter: grayscale(100%) brightness(25%);
-moz-filter: grayscale(100%) brightness(25%);
filter: grayscale(100%) brightness(25%);
position: absolute;
left: 0;
}

ul.navigation {
background: none;
border: none;
width: 25px;
height: auto;
left: 711px;
right: 0;
top: 164px;
overflow: visible !important;
position: absolute;
margin: auto;
text-align: right !important;
}

ul.navigation li {
background: #111;
background-size: 50%;
background-position: 50% 0%;
width: 25px;
height: 25px;
margin: 0 auto 50px;
filter: grayscale(100%) brightness(25%);
transition: all 0.5s ease;

}

ul.navigation li a {
display: block;
margin: 0 auto 0 25px;
padding-right: 80px;
float: left;
transition: all 0.5s ease;
opacity: 0;
}

ul.navigation li:hover { filter: none; border-bottom: 1px solid grey; }

ul.navigation li:hover a { background: #000; opacity: 1; }

ul.navigation li a:hover { text-shadow: 0 0 1px; }

body { background: maroon; }

#wrap {
background: transparent;
width: 600px;
height: 400px;
padding: 5px;
border-radius: 0;
overflow: visible;
border-color: #000;
box-shadow: 0 0 0 5px #111;
}

#sidebar {
width: 190px;
height: 270px;
margin: 0;
text-align: center;
background: #111;
border: 1px solid #000;
}

#sidebar:hover #actions { opacity: 1; }

#sidebar img {
margin: auto;
-webkit-animation: spinmebaby 4s linear normal infinite;
-moz-animation: spinmebaby 4s linear normal infinite;
animation: spinmebaby 4s linear normal infinite;
}

#sidebar img:hover { animation-play-state: paused; }

#sidebar h2 {
position: absolute;
top: 34px;
font: 42px Stalinist One;
color: #111;
text-shadow: -2px 2px 0 #000;
}

#actions {
width: 180px;
margin: auto;
position: relative;
top: -190px;
transition: all 0.5s ease;
opacity: 0;
}

#actions li {
background: #111;
border: 1px solid #000;
margin: 5px 0;
border-left: 5px solid maroon;
border-right: 5px solid maroon;
text-transform: capitalize;
}

#actions li a {
color: #FFF;
font: 12px Monda;
}

#content {
width: 390px;
padding: 0;
border-radius: 0;
margin: 0 0 0 auto;
height: 100%;
border: 1px solid #000;
overflow: visible;
background: #111;
}

#bio, #comments { height: calc(100% - 23px); margin-top: 23px; border: none; }

#bio h2, #comments h2 { position: absolute; top: 0; text-align: center; font: 15px Stalinist One; border: none; color: maroon; text-shadow: -1px 1px 0 #000; }

#bio h2 {
left: 0;
width: 40%;
text-transform: capitalize;
}

#bio {
padding: 25px;
font: 13px Monda;
color: #FFF;
}

#comments {
position: relative;
top: -387px;
overflow: visible;
visibility: hidden;
z-index: 7;
background: #111;
}

#comments h2 {
width: 60%;
right: -1px;
top: -21px;
visibility: visible !important;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}

#comments:hover {
visibility: visible !important;
}

#comments:hover ul { opacity: 1; }

#comments:hover h2 { border-bottom: none; }

ul#comment_list {
overflow-y: scroll;
height: calc(100% - 25px);
transition: all 0.3s ease-in-out;
opacity: 0;
color: transparent;
}

ul#comment_list li {
background: rgba(0, 0, 0, 0.5);
margin: 0 5px 5px;
border-bottom: 1px solid maroon;
}

ul#comment_list li a {
width: 100%;
float: left;
background: #000;
color: #FFF !important;
font: 14px Monda;
text-align: center;
}

ul#comment_list li p {
color: maroon;
padding: 5px;
font: 13px Monda;
}

ul#comment_list li p small {
float: right;
width: 100%;
text-align: center;
color: grey;
visibility: hidden;
}

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

a.delete.small {
font-size: 10px !important;
text-transform: lowercase;
text-align: right !important;
text-decoration: none !important;
}

#load-more {
font: 14px Stalinist One;
background: #111;
border: 1px solid #000;
border-left: none;
border-right: none;
width: 100%;
margin: 5px auto !important;
color: grey;
}

#comments form {
position: absolute;
visibility: visible !important;
width: 190px;
height: 110px;
background: #111;
bottom: -4px;
right: 395px;
border: 1px solid #000;
}

textarea {
width: 100%;
font: 12px Monda;
background: #000;
border: none;
color: #FFF;
border-bottom: 1px solid maroon;
}

#comments form span { margin: 10px 0; font-style: italic; font: 9px Monda; }

span#charsLeft { color: #FFF !important; text-decoration: underline; text-decoration-color: maroon; }

#comment-button {
width: 75%;
font: 11px Monda;
margin: auto 18.5px;
color: maroon;
border: none;
border-bottom: 1px solid;
background: #000;
}

#friendlist {
position: fixed;
margin: auto;
bottom: 0;
left: 0;
width: 100%;
text-align: center !important;
}

div#friend_container {
width: calc(100%/16);
display: inline-block;
overflow: hidden;
}

#friendlist img {
border-radius: 50%;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
}

#generic_5 {
width: 100%;
height: 100%;
position: fixed;
top: 0; left: 0;
z-index: -1;
-webkit-clip-path: polygon(50% 0, 100% 0, 50% 100%, 0% 100%);
clip-path: polygon(50% 0, 100% 0, 50% 100%, 0% 100%);
}

/* end custom code */