Mass Effect CSS

/* custom profile code */

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

@font-face {
  font-family: Play;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/play/v7/ZNo-5SxCwH1CXgZ-n3bt2g.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; }

div { font-family: Play; }

a { color: #97DBE7; }

a:hover {
text-decoration: none;
font-style: italic;
color: #999;
}

@keyframes strobe {
from { color: #EE6F55; }
to { color: #97DBE7; }
}

@-webkit-keyframes strobe {
from { color: #E7DBE7; }
to { color: #EE6F55; }
}

@-moz-keyframes strobe {
from { color: #E7DBE7; }
to { color: #EE6F55; }
}

#logo {
visibility: hidden;
}

::-webkit-scrollbar-track {
background: rgba(100, 100, 100, 0.2);
border-radius: 2px;
}

::-moz-scrollbar-track {
background: rgba(255, 0, 0, 0.1);
border-radius: 2px;
}

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

::-moz-scrollbar {
width: 7px;
}

::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.7);
border-radius: 2px;
}

::-moz-scrollbar-thumb {
background: rgba(0, 0, 0, 0.7);
border-radius: 2px;
}

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

body {
background: #000;
overflow-x: hidden;
}

h2 {
font-weight: normal;
font-size: 18px;
text-transform: uppercase;
padding: 2px 3px;
animation: strobe 3s alternate infinite;
-webkit-animation: strobe 3s alternate infinite;
font-family: Play !important;
}

#wrap {
margin: auto;
right: 0px;
left: 0px;
background: transparent;
border: none;
width: auto;
height: 700px;
}

#generic_2 {
visibility: visible;
position: absolute;
margin: auto;
left: 0px;
right: 0px;
top: 350px;
background: url(http://i.imgur.com/N8HlGzc.gif);
width: 650px;
height: 338px;
border: 2px solid #111;
box-shadow: 0 0 13px 5px #94DBE7;
z-index: 2;
}

#sidebar {
background: #111;
position: absolute;
margin: auto;
right: 541px;
top: 352px;
left: 0px;
height: 300px;
padding: 19px 0px 19px 0px;
z-index: 1;
transition: all .5s linear;
}

#sidebar img {
position: relative;
left: 50px;
transition: all .5s linear;
background: transparent;
}

#sidebar:hover img {
transform: translateX(-264px);
-webkit-transform: translateX(-264px);
-moz-transform: translateX(-264px);
}

#sidebar:hover h2 {
border: 1px solid #EE6F55;
box-shadow: 0 0 10px 2px #EE6F55;
}

#sidebar h2 {
position: absolute;
transform: rotate(90deg);
width: 336px;
border: 1px solid;
text-align: center;
top: 147px;
right: 4px;
letter-spacing: 11px;
color: #97DBE7;
background: #111;
height: 34px;
padding: 5px 1px;
transition: all .5s linear;
border: 1px solid #97DBE7;
}

ul#actions {
position: absolute;
margin:auto;
top: 110px;
right: 200px;
background: #111;
width: 70px;
text-align: center;
font-size: 10px;
border: 1px solid #97DBE7;
transition: all .5s linear;
}

ul#actions li {
margin: 10px auto;
color: #666;
}

ul#actions li a {
color: #97DBE7;
transition: all .5s linear;
}

ul#actions:hover {
border: 1px solid #EE6F55;
box-shadow: 0 0 10px 2px #EE6F55;
}

ul#actions:hover li a {
color: #EE6F55;
}

ul#actions li a:hover {
color: #97DBE7;
text-decoration: none;
}

#content {
background: transparent;
position: absolute;
margin: auto;
left: 0px;
right: 0px;
width: 750px;
height: 750px;
border: none;
}

#bio {
position: absolute;
margin: auto;
top: 252px;
left: 702px;
right: 0px;
background: #111;
height: 328px;
padding: 10px 0px 0px 45px;
width: 0px;
transition: all .5s linear;
border: 1px solid #94DBE7;
color: transparent;
font-size: 10px;
letter-spacing: 1px;
font-family: Arial;
}

#bio h2 {
position: relative;
background: transparent;
width: 338px;
text-align: center;
transform: rotate(270deg);
top: 141px;
right: 198px;
letter-spacing: 7px;
color: #97DBE7;
transition: all .5s linear;
}

#bio:hover {
width: 200px;
color: #EE6F55;
border: 1px solid #EE6F55;
box-shadow: 0 0 12px 2px #E66F55;
overflow-y: scroll;
}

#bio:hover h2 {
color: transparent;
}

#friendlist {
position: absolute;
width: 300px;
height: 200px;
padding: 10px;
z-index: 1;
border: 2px solid #97DBE7;
top: -49px;
left: 438px;
background: rgba(151, 219, 231, 0.5);
transition: all 1s ease;
opacity: 0;
}

#friendlist:hover {
opacity: 1;
transform: translateX(150px);
}

#friendlist h2 {
text-align: center;
}

#friendlist img {
width: 35px;
border-radius: 5px;
}

#comments {
position: absolute;
background: #111;
margin: auto;
left: 0px;
right: 0px;
top: 590px;
width: 630px;
height: 150px;
padding: 19px 10px;
border: 1px solid #97DBE7;
transition: all .5s linear;
overflow-y: scroll;
}

#comments:hover {
border: 1px solid #EE6F55;
box-shadow: 0 0 15px 2px #EE6F55;
}

#comments:hover a {
color: #EE6F55 !important;
}

#comments:hover a.delete.small {
color: #666 !important;
}

#comments:hover img {
opacity: 0.9;
border: 1px solid #EE6F55;
}

form {
position: absolute;
width: 325px;
margin: auto;
left: 0px;
right: 0px;
}

span#charsLeft {
color: #EE6F55 !important;
padding-left: 130px;
}

span {
color: #666;
font-size: 9px;
}

textarea {
width: 200px;
background: #666;
color: #111;
font-family: Mono;
font-size: 10px;
border: 1px solid #97DBE7;
}

#load-more {
position: relative;
margin: auto;
left: 438px;
top: 25px;
background: transparent;
border: 1px solid #EE6F55;
padding: 2px;
font-size: 10px;
color: #EE6F55;
transition: all .5s linear;
z-index: 1;
font-family: Play;
}

#comment-button {
position: relative;
right: 5px;
top: 5px;
background: transparent;
border: 1px solid #97DBE7;
color: #97DBE7;
padding: 2px;
font-size: 10px;
transition: all .5s linear;
font-family: Play;
}

#comment-button:hover {
background: #97DBE7;
color: #111;
}

#load-more:hover {
color: #111;
background: #EE6F55;
}

#comments h2 {
text-align: center;
position: relative;
top: -15px;
letter-spacing: 17px;
color: #97DBE7;
padding-left: 30px;
}

#comment_list img {
width: 30px;
height: 30px;
border-radius: 5px 50%;
border: 1px solid #94DBE7;
float: right !important;
opacity: 0.6;
transition: all .5s linear;
}

#comment_list img:hover {
transform: translateY(-5px);
}

#comment_list {
color: transparent;
}

#comment_list a {
font-family: Play;
float: right;
padding-right: 20px;
color: #97DBE7 !important;
transition: all .5s linear;
}

#comment_list a.delete.small {
color: #EE6F55 !important;
text-transform: lowercase;
font-size: 10px;
margin-bottom: 5px;
letter-spacing: 1px;
transition: all .5s linear;
}

#comment_list li {
padding: 5px;
margin: 5px;
transition: all .5s ease;
}

#comment_list li:hover {
background: rgba(0, 0, 0, 0.3);
border-radius: 5px;
}

#comment_list p {
color: #666;
text-align: right;
border-top: 1px solid #97DBE7;
font-size: 10px;
letter-spacing: 1px;
padding: 5px;
font-family: Sans;
}

ul.navigation {
position: absolute;
margin: auto;
left: 0px;
right: 0px;
top: 323px;
width: 650px;
border-radius: 0px;
border: 1px solid #97DBE7;
background: #111;
z-index: 1;
transition: all .5s linear;
}

ul.navigation:hover {
border: 1px solid #EE6F55;
box-shadow: 0 0 10px 2px #EE6F55;
}

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

ul.navigation li a {
text-transform: uppercase;
color: #97DBE7;
letter-spacing: 1px;
font-family: Play;
transition: all .5s linear;
}

ul.navigation li a:hover {
background: #EE6F55;
color: #666;
}

#generic_3 {
width: 245px;
height: 250px;
background: url(http://i.imgur.com/K17YGKM.gif);
position: absolute;
margin: auto;
top: 35px;
right: 498px;
left: 0px;
border: 2px solid #97DBE7;
}

#generic_4 {
position: absolute;
margin: auto;
top: 35px;
right: 0px;
left: 329px;
width: 417px;
height: 250px;
background: url(http://imgur.com/40gUJw4.gif);
border: 2px solid #97DBE7;
}

#generic_5 {
position: absolute;
top: 890px;
width: 500px;
height: 260px;
margin: auto;
left: 0px;
right: 0px;
background: url(http://i.imgur.com/sBYNDgQ.gif);
border: 2px solid #97DBE7;
margin-bottom: 20px;
}

.bbmedia {
width: 150px !important;
height: 117px !important;
margin: auto;
position: fixed;
left: 80px;
bottom: 80px;
z-index: 1;
border: 1px solid #97DBE7;
box-shadow: 0 0 12px 2px #97DBE7;
}

iframe {
width: 150px;
height: 117px;
}

/* end profile code*/