Serenity CSS

/* Serenity custom profile code by Vii <3
   + please do not steal, rip, or copy without my permission! if you need help, just ask ~
   + generic_5 is for your Gaia avatar!
   + special b tag styling - anything in your About Me with a b tag will display at top centre!
   + special likes / dislikes / hobbies styling - these will display at top centre! */

/* Animations */

@keyframes drift {
from { top: 0px; }
to { top: -15px; }
}

@-webkit-keyframes drift {
from { top: 0px; }
to { top: -15px; }
}

@-moz-keyframes drift {
from { top: 0px; }
to { top: -15px; }
}

/* Hidden Items */

#wishlist, #content:before, #content:after, #bio h2, #comments h2, #friendlist h2, #actions strong { display: none; }

h2 { font-family: Cinzel Decorative; letter-spacing: 1px; }

ul.navigation {
position: absolute;
margin: auto;
left: 0px;
right: 0px;
width: 400px;
background: transparent;
border: none;
top: 300px;
z-index: 1;
}

ul.navigation li {
width: 25%;
display: block;
}

ul.navigation li:hover { }

ul.navigation li a {
color: #E7DFEC;
text-shadow: 0 0 1px;
transition: all .5s ease-in-out;
padding: 4px;
font-size: 11px;
}

ul.navigation li a:hover {
background: transparent;
}

#top-nav-home, #top-nav-forum {
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
}

#top-nav-search, #top-nav-home {
position: relative;
top: 10px;
}

#top-nav-shops, #top-nav-search {
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}

#top-nav-forum, #top-nav-shops {
position: relative;
top: -46px;
}

body {
background: url(http://i.imgur.com/WnLuJLr.jpg) top no-repeat;
background-attachment: fixed;
overflow-y: hidden;
}

#wrap, #content {
border: none;
width: 100%;
background: transparent;
}

#wrap { height: 100%; }

#content { height: 800px; }

#bio, #friendlist, #comments {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.7);
position: absolute;
margin: auto;
left: 0px;
right: 0px;
top: 20px;
font-family: Verdana;
font-size: 11px;
}

#sidebar {
position: fixed;
margin: auto;
left: 0px;
right: 0px;
width: 180px;
padding: 10px;
height: 300px;
top: 290px;
z-index: 1;
}

#sidebar h2 {
position: absolute;
top: 280px;
text-align: center;
color: #E8DFEC;
text-shadow: 0 0 2px;
padding: 0;
margin: auto;
left: 0px;
right: 0px;Web Developer Dashboard
Edit CSS
z-index: 0;
}

#sidebar img {
position: relative;
margin: auto;
animation: drift 3s alternate infinite;
animation-timing-function: ease-in-out;
transform: rotateY(180deg);
left: 10px;
}

#bio {
width: 205px;
padding: 10px;
height: 181px;
top: 244px;
left: 608px;
text-align: center;
overflow-y: scroll;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 0 1px;
}

#bio small {
color: rgba(0, 0, 0, 0.5) !important;
}

#bio img { transform: scale(0.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); }

#bio strong {
position: fixed;
margin: auto;
width: auto;
top: 200px;
left: 0px;
right: 0px;
font: 24px Cinzel Decorative;
color: #E7DFEC;
text-shadow: 0 0 3px;
font-weight: normal;
transition: all .7s ease-in-out;
}

#bio strong:hover {
color: rgba(133, 96, 168, 0.6);
text-shadow: 0 0 1px #E7DFEC;
}

.bbmedia {
position: fixed;
margin: 0;
top: 80px;
left: 80px;
width: 90px !important;
height: 90px !important;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 0 5px 2px;
border-radius: 50%;
overflow: hidden;
}

.bbmedia iframe {
width: 90px;
height: 90px;
border-radius: 50%;
}

#comments {
width: 330px;
height: 181px;
top: 349px;
padding: 10px;
right: 0px;
left: 0px;
background: rgba(255, 255, 255, 0.2);
position: fixed;
overflow-y: scroll;
opacity: 0;
transition: all .7s ease-in-out;
color: transparent;
z-index: 2;
}

#comments:hover { opacity: 1; }

#comment_list {
padding: 5px;
}

#comment_list li {
background: rgba(255, 255, 255, 0.7);
margin: 5px 0;
padding: 5px;
border: 1px solid rgba(255, 255, 255, 0.9);
}

#comments img {
display: none;
}

a.delete.small {
font-size: 9px;
font-family: Verdana !important;
text-transform: lowercase;
background: rgba(133, 96, 168, 0.4) !important;
}

a.delete.small:hover {
background: transparent !important;
}

#comment_list a {
float: right;
width: 100%;
text-align: center;
background: rgba(133, 96, 168, 0.7);
color: rgba(255, 255, 255, 0.6) !important;
transition: all .7s ease-in-out;
letter-spacing: 2px;
font-family: Cinzel Decorative;
}

#comment_list a:hover {
background: transparent;
color: rgba(133, 96, 168, 0.5) !important;
text-decoration: none;
}

#comment_list p {
color: rgba(133, 96, 168, 0.8);
font-family: Arial;
text-align: center;
padding: 5px;
margin-bottom: 2px;
}

#comment_list p small {
display: none;
}

#comments form {
position: relative;
padding: 5px;
width: 140px;
}

textarea {
width: 185px;
margin: auto;
position: relative;
left: 57px;
background: rgba(133, 96, 168, 0.6);
color: rgba(255, 255, 255, 0.7);
padding: 5px;
font-size: 10px;
border: 1px solid rgba(255, 255, 255, 0.7);
}

span#charsLeft {
color: rgba(255, 255, 255, 0.5) !important;
font-style: italic;
font-size: 9px;
}

#load-more {
position: relative;
font-size: 10px;
left: 135px;
top: 87px;
margin: auto;
margin-bottom: 5px;
}

#comment-button {
position: relative;
margin: auto;
font-size: 10px;
left: 122px;
}

#comment-button, #load-more {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.5);
padding: 2px;
color: rgba(255, 255, 255, 0.8);
transition: all .7s ease-in-out;
}

#comment-button:hover, #load-more:hover {
background: rgba(133, 96, 168, 0.4);
box-shadow: 0 0 5px 2px;
}

#comments span {

}

#friendlist {
width: 205px;
height: 181px;
text-align: center;
overflow-y: scroll;
top: 244px;
padding: 10px;
right: 620px;
}

#friendlist img {
width: 30px;
border-radius: 50%;
margin: 12px;
display: block;
box-shadow: 0 1px 3px 1px #E7DFEC;
transition: all .7s ease-in-out;
}

#friendlist img:hover {
transform: translateY(5px);
box-shadow: 0 1px 1px #E7DFEC;
filter: hue-rotate(90deg);
-webkit-filter: hue-rotate(90deg);
}

ul#actions {
position: absolute;
margin: auto;
left: 0px;
right: 0px;
text-align: center;
z-index: 2 !important;
font-size: 11px;
}

ul#actions a {
transition: all .7s ease-in-out;
color: #E7DFEC;
}

ul#actions a:hover {
text-decoration: none;
text-shadow: 0 0 2px;
}

li#send-message {
position: relative;
color: #E7DFEC;
top: 14px;
font-size: 11px;
}

li#view-posts {
position: relative;
color: rgba(133, 96, 168, 0.9);
}

li#view-topics {
position: relative;
color: rgba(133, 96, 168, 0.9);
color: white;
transform: rotate(30deg);
right: 100px;
top: -40px;
}

li#view-posts {
color: white;
transform: rotate(-30deg);
left: 100px;
top: -21px;
}

li#likes, li#dislikes, li#hobbies {
font: 18px Cinzel Decorative;
white-space: nowrap;
}

li#likes {
position: absolute;
margin: auto;
width: 200%;
top: -500px;
left: -310px;
color: rgba(255, 255, 255, 0.75);
}

li#dislikes {
position: absolute;
margin: auto;
top: -470px;
width: 200%;
left: -100px;
color: rgba(255, 255, 255, 0.5);
}

li#hobbies {
position: absolute;
margin: auto;
top: -440px;
width: 200%;
left: 95px;
color: rgba(255, 255, 255, 0.25);
}

a { text-shadow: 0 0 3px rgb(133, 96, 168); color: rgba(255, 255, 255, 0.4); font-size: 10px; transition: all .7s ease-in-out; }

a:hover {
color: #FFF;
text-decoration: none;
}

@font-face {
  font-family: Cinzel Decorative;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/cinzeldecorative/v4/fmgK7oaJJIXAkhd9798yQl4jZHmtnl4mfN0ClpLnj0E.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;
}

@import url(https://fonts.googleapis.com/css?family=Cinzel+Decorative);

div { font-family: Cinzel Decorative; }

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

::-webkit-scrollbar-track {
background: rgba(133, 96, 168, 0.6);
}

::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.6);
}

#logo {
filter: hue-rotate(55deg);
-webkit-filter: hue-rotate(55deg);
-moz-filter: hue-rotate(55deg);
position: relative;
left: 415px;
transform: scale(0.8);
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
}

#generic_5 {
position: absolute;
margin: auto;
left: 730px;
right: 0px;
top: 210px;
background: url(your image here) center no-repeat;
width: 120px;
height: 150px;
padding: 5px;
transition: all .7s ease-in-out;

}

#generic_5:hover {
filter: brightness(120%);
opacity: 0.6;
transform: translateY(10px);
}

/* end profile code */