FV User Profile CSS - Theme #3

/**
______________________________________________

User Profile Template #3 - SPACE CASE
Made by Furvilla user Whipptail - ID #60170
http://seasquams.tumblr.com/

I'll do my best to help with questions but I'm still new to coding
so I apologize beforehand if I can't help with something.

______________________________________________

**/



<!--Backgrounds, Links, and Column Positions--!>

.content:after {
background: url("http://i1259.photobucket.com/albums/ii544/Whipptail/Furvilla/Profile%20Patterns/tumblr_inline_n258q4r8c01qhwjx8_zpswnxp4d1l.png") repeat;
position: fixed;
width:100%;
height:100%;
bottom:0;
top:0;
z-index:-1
}

.content {
background-image: url(http://i1259.photobucket.com/albums/ii544/Whipptail/Furvilla/Solid%20BGs/blacktrans50_zpsqrsr1sc9.png);
background-repeat: repeat;
background-position: top center;
background-color: transparent;
width: 1200px;
color: #c8b7cf;
font-family: Courier New;
}

.content .left-column {
float: left;
width: 950px;
}

.right-column {
margin-top: 20px;
margin-right: -20px;
}

a {
color: #9d61ff;
font-weight: bold;
text-decoration: none;
}

a:hover {
color: #618dff;
text-decoration: none;
text-shadow: 1px 1px 8px rgba(157,97,255,1);
}


<!--Logo, Nav Bar, and Search--!>

#logo {
left: -100px;
opacity: 0.5;
}

#logo:hover {
opacity: 1;
animation: bounce 0.6s 1 ease-out;
}

#logo + :nth-child(2) {
background: url("http://i1259.photobucket.com/albums/ii544/Whipptail/Furvilla/Solid%20BGs/blacktrans40_zps6svazmzl.png");
width: 1200px;
left: -105px;
}

.input.small {
position: relative;
left: 100px;
top: 47px;
}

#logo + :nth-child(2) a {
color: #9d61ff !important;
font-family: Courier New;
text-transform: uppercase;
letter-spacing: 1px;
}

#logo + :nth-child(2) a:hover {
position: relative;
top: -2px;
color: #618dff !important;
text-shadow: 1px 1px 8px rgba(157,97,255,1);
}

.search-form .input {
color: #fff;
background: none;
animation: inset 2.5s linear infinite;
}

.search-form .input:hover {
color: #fff;
background: none;
box-shadow: 0 0 10px #9bafb2 inset;
animation: none;
}

header .user-panel .links a {
color: #9d61ff;
text-transform: uppercase;
font-family: Courier New;
letter-spacing: 1px;
}

header .user-panel .links a:hover {
position: relative;
top: -2px;
color: #618dff;
text-shadow: 1px 1px 8px rgba(157,97,255,1);
}

.float-left {
color: #9bafb2;
}

.float-left a {
color: #9bafb2 !important;
}

.user-panel.clearfix {
background: url("http://i1259.photobucket.com/albums/ii544/Whipptail/Furvilla/Solid%20BGs/blacktrans40_zps6svazmzl.png");
width: 1200px;
left: -105px;
}


<!--Notification Widget--!>

.left-column .widget-header {
width: 166px
margin-top: 0;
margin-left: 265px;
margin-bottom: 10px;
border-radius: 7px;
border-right: 4px double #61ffb6;
border-left: 4px double #61ffb6;
border-bottom: none;
}

.left-column .widget-header h3 {
font-size: 18px;
letter-spacing: none;
padding: 0 5px;
animation: flash linear 3.5s infinite;
}

.widget.notifications-widget {
position: relative;
left: 130px;
margin-bottom: 45px;
width: 700px;
}

.widget.notifications-widget small {
color: #9bafb2;
}

.widget-content.no-padding {
padding: 0;
}

tr.notifications-row {
background: none;
border-bottom: none;
}

.table.notifications {
transition:ease 0.3s;
}

.table tr:hover td {
background: none !important;
}

.table tr:nth-child(odd) td {
background: none;
border-top: none;
border-bottom: none;
}

.table tr:nth-child(even) td {
background: none;
border-top: none;
border-bottom: none;
}


<!--Profile, Villager, and Comment Headers + Counter--!>

.content h1 {
width: 605px;
color: #ff616c;
font-size: 36px;
text-align: center;
text-transform: uppercase;
margin: 0 0 25px 0;
padding: 5px 0 0 5px;
border-bottom: 4px double #61ffb6;
text-shadow: 0 1px 10px rgba(255,97,108,1);
}

.content h2 {
width: 290px;
color: #ff616c;
font-size: 36px;
text-align: center;
text-transform: uppercase;
padding: 5px 0 0 5px;
border-bottom: 4px double #61ffb6;
text-shadow: 0 1px 10px rgba(255,97,108,1);
}

.counter {
border: 1px solid #ff616c;
border-radius: 2px;
}


<!--Shield and User Info--!>

.user-data {
margin-bottom: 0;
}

.village-shield {animation: bob 1.8s linear infinite;}

.user-data .village-shield {
position: relative;
left: 380px;
margin-top: 36px;
z-index: 1;
}

.col-xs-9 {
width: 736px;
height: 190px;
background: url("http://i1259.photobucket.com/albums/ii544/Whipptail/Furvilla/Solid%20BGs/blacktrans60_zps31lgsjld.png");
margin-top: 15px;
margin-left: -60px;
margin-bottom: 10px;
border-style: none double;
border-width: 4px;
border-color: #61ffb6;
border-radius: 10px;
box-shadow: 0 0 15px 1px rgba(157,97,255,0.5);
}

.col-xs-9 strong, .col-xs-9 h4 {
text-transform: uppercase;
}

.user-links {
margin: -7px 0;
padding: 0;
list-style: none;
}

.user-links a {
font-size: 20px;
color: #9d61ff;
animation: opacity 2.5s linear infinite;
}

.user-links a:hover {
font-size: 20px;
color: #ff616c;
text-shadow: 0 1px 10px rgba(255,97,108,1);
opacity: 1;
animation: none;
}

.col-xs-7 {
position: relative;
left: -15px;
top: -8px;
height: 165px;
width: 210px;
}

.col-xs-6 {
width: 45%;
margin-left: -23px;
}

.col-xs-5 {
position: relative;
left: 303px;
top: 0;
height: 170px;
width: 200px;
text-align: right;
}


<!--Right Column Widgets--!>

h4.align-center {
color: #c8b7cf;
font-size: 22px;
}

.right-column .widget-header {
position: relative;
top: -3px;
width: 160px;
margin-left: 30px;
border-bottom: 1px solid #61ffb6;
}

.widget-header h3 {
border-radius: 8px 8px 0 0;
background: none;
color: #ff616c;
padding: 0 10px;
height: 32px;
text-align: center;
text-transform: uppercase;
line-height: 32px;
font-size: 14px;
font-weight: 800;
text-shadow: 0px 1px 10px rgba(255, 97, 108, 1);
}

.right-column .widget-header h3 {
padding-top: 4px;
letter-spacing: 0.6px;
}

.widget-content .villager-avatar img {
border-radius: 100%;
opacity: 0.5;
}

.widget-content .villager-avatar img:hover {
border-radius: 100%;
opacity: 1;
animation: rotate 0.2s 2 linear;
}

.widget-content img{
opacity: 0.5;
}

.widget-content img:hover {
opacity: 1;
}

.widget-content {
padding: 20px 0;
position: relative;
z-index: 2;
background: url(http://i1259.photobucket.com/albums/ii544/Whipptail/Furvilla/Solid%20BGs/blacktrans60_zps31lgsjld.png);
transition:ease 0.3s;
}

.right-column .widget-content {
border-top: 1px solid #61ffb6;
border-radius: 20px 20px 0 0;
}

.widget-content:hover {
box-shadow: 0 0 15px 1px rgba(157,97,255,0.5);
}

.widget .forum-posts li {
border-bottom: 1px solid #9bafb2;
}

.widget .forum-posts p, .widget .forum-posts p a {
color: #c8b7cf;
}


<!--User Description--!>

.user-desc h3 {
display: none;
}

.user-data .user-desc {
width: 936px;
margin: 20px 0;
padding: 0 0 0 10px;
}

.quote-user {
background-color: #37317e;
color: #ff616c;
font-weight: 700;
width: 666px;
letter-spacing: 1px;
text-transform: uppercase;
text-shadow: 1px 1px 0 #000;
}

.quote {
border: 1px solid #37317e;
margin: .5em 0 0 133px;
height: auto;
width: 667px;
position: relative;
white-space: normal;
}

.quote-body {
padding: 0.5em 1em;
height: auto;
overflow: auto;
color: #9bafb2;
}


<!--Villagers--!>

.villagers-list {
margin: 20px 0 40px 0;
}

.villagers-list li {
border-width: 1px 1px 0 1px;
border-style: solid solid none solid;
border-color: #37317e;
border-radius: 80px 80px 3px 3px;
margin: 8px 17px;
padding: 5px 0 0;
width: 155px;
height: 148px;
transition: 0.3s ease;
}

.villagers-list li:hover {animation: shake 1s infinite linear}

.villagers-list li:hover {
border-color: #37317e;
box-shadow: 0px 0px 15px 1px rgba(157,97,255,0.50);
}

.left-column .villager-avatar {
width: 70px;
height: 70px;
position: relative;
overflow: hidden;
margin: 10px 0 5px 0;
border-radius: 100%;
display: inline-block;
}

.villager-name a {
margin: 0 0 8px 0;
color: #ff616c;
font-size: 16px !important;
letter-spacing: 2px;
text-transform: uppercase;
}

.villager-name a:hover {
color: #ff616c;
text-shadow: 0 1px 10px rgba(255,97,108,1) !important;
animation: flash linear 1s infinite;
}

p.villager-info {
height: 25px;
margin: 7px 0 0 0;
padding-top: 2px;
border-radius: 0 0 3px 3px;
background-color: #37317e;
font-size: 12px;
text-shadow: -1px -1px 0 #fff, 1px 1px 0 #000;
}


<!--Comments--!>

.textarea {
width: 900px;
height: 115px;
color: #c8b7cf;
margin-left: 22px;
padding: 0 95px 0 10px;
border-style: none none none double;
border-width: 4px;
border-color: #61ffb6;
border-radius: 10px;
background: url("http://i1259.photobucket.com/albums/ii544/Whipptail/Furvilla/Solid%20BGs/blacktrans60_zps31lgsjld.png");
box-shadow: 0 0 15px 1px rgba(157,97,255,0.5);
}

.user-comments {
width: 730px;
list-style: none;
margin: -75px 0 20px 140px;
padding: 0;
}

.user-comments .user-avatar-wrapper {
position: absolute;
width: 10px;
float: left;
text-align: center;
z-index: 4;
}

.user-comments .user-avatar-wrapper img {
width: 70px;
height: 70px;
border-radius: 100%;
border: 4px double #61ffb6;
}

.user-comments .user-avatar-wrapper img:hover {animation: rotate 0.2s 2 linear;}

.user-comments .user-comment:after, .user-comments .user-comment:before {
display: none;
}

.user-comments .user-comment {
width: 601px;
float: left;
padding: 25px 25px 40px;
border: 1px solid #37317e;
border-radius: 0 30px 8px 35px;
background: url("http://i1259.photobucket.com/albums/ii544/Whipptail/Furvilla/Solid%20BGs/blacktrans60_zps31lgsjld.png");
position: relative;
font-size: 14px;
margin: 40px 0 10px 50px;
transition: ease 0.3s;
}

.user-comments .user-comment:hover {
box-shadow: 0 0 15px 1px rgba(157,97,255,0.5);
}

.user-comments .user-comment .footer {
position: absolute;
left: 0;
bottom: -1px;
width: 600px;
height: 30px;
border: 1px solid #37317e;
border-radius: 0 0 5px 35px;
padding: 5px 24px;
color: #9bafb2;
background-color: #37317e;
font-size: 12px;
text-shadow: 1px 1px 0 #000;
}

.report-comment {
color: #ff616c !important;
}

.report-comment:hover {
text-shadow: 0 1px 10px rgba(255,97,108,1) !important;
}


<!--Buttons--!>

.btn.small.pull-right.close {
background-color: #61c9ff;
background-image: none;
}

.btn.small.pull-right.close:active {
background-color: #618dff;
}

.btn-link, .btn-link:hover {
margin-top: 15px;
color: #fff !important;
background-image: none;
background-color: #618dff;
border-radius: 5px;
font-weight: 800;
font-family: Courier New;
text-shadow: -1px -1px 0 #fff, 1px 1px 0 #000;
letter-spacing: 1px;
}

.btn-link:active {
color: #fff !important;
background-image: none;
background-color: #61c9ff;
font-weight: 800;
font-family: Courier New;
text-shadow: none;
text-decoration: none !important;
letter-spacing: 1px;
}

.text-right {
text-align: center;
}

.btn.medium {
position: relative;
top: -125px;
left: -28px;
background-color: #618dff;
background-image: none;
border: 2px outset #618dff;
border-radius: 0 10px 10px 0;
padding: 0;
height: 115px;
width: 75px;
line-height: 40px;
font-family: 'Courier New';
font-size: 18px;
text-shadow: -1px -1px 0 #fff, 1px 1px 0 #000;
}

.btn.medium:active {
background-color: #61c9ff;
background-image: none;
}

.social img:hover {
animation: rotate 0.2s 2 linear;
}


<!--Pagination and Report--!>

.pagination {
margin: 20px 0 20px 0;
padding: 0;
list-style: none;
text-align: center;
}

.pagination > li > a, .pagination > li > span {
position: relative;
float: left;
padding: 10px 15px;
border-radius: 20px;
line-height: 1.42857;
text-decoration: none;
color: #fff;
background-color: transparent;
background-image: url(http://i1259.photobucket.com/albums/ii544/Whipptail/Furvilla/Solid%20BGs/blacktrans50_zpsqrsr1sc9.png);
border: 1px solid #37317e;
}

.pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus {
z-index: 2;
color: #fff;
background-color: #1fc679;
border-color: #61ffb6;
}

.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active >

span:focus {
z-index: 3;
color: #fff;
background-color: #ff616c;
border-color: #ff616c;
border-radius: 2px;
box-shadow: 0 0 10px 0 rgba(255,97,108,1);
cursor: default;
}

.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination >

.disabled > a:focus {
color: #fff;
background-color: #fff;
border-color: #ddd;
}

.pagination > li:first-child > a, .pagination > li:first-child > span {
margin-left: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
border-radius: 20px 2px 2px 20px;
}

.pagination > li:last-child > a, .pagination > li:last-child > span {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
border-radius: 2px 20px 20px 2px;
}

.report a {
color: #ff616c !important;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
animation: flash linear 3.5s infinite;
}

.report a:hover {
text-shadow: 0 1px 10px rgba(255,97,108,1) !important;
animation: none;
}

.red:hover {
color: #ed1c24;
text-shadow: 0 1px 10px rgba(255,97,108,1) !important;
}


@keyframes bob {
0% {position: relative; top: -4px;}
50% {position: relative; top: 4px;}
100% {position: relative; top: -4px;}
}

@keyframes shake {
0% {transform: translate(2px, 1px) rotate(0deg);}
10% {transform: translate(-1px, -2px) rotate(-1deg);}
20% {transform: translate(-3px, 0px) rotate(1deg);}
30% {transform: translate(0px, 2px) rotate(0deg);}
40% {transform: translate(1px, -1px) rotate(1deg);}
50% {transform: translate(-1px, 2px) rotate(-1deg);}
60% {transform: translate(-3px, 1px) rotate(0deg);}
70% {transform: translate(2px, 1px) rotate(-1deg);}
80% {transform: translate(-1px, -1px) rotate(1deg);}
90% {transform: translate(2px, 2px) rotate(0deg);}
100% {transform: translate(1px, -2px) rotate(-1deg);}
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-15px);}
60% {transform: translateY(-10px);}
}

@keyframes rotate {
0% {transform: rotate(0deg);}
25% {transform: rotate(12deg);}
50% {transform: rotate(0deg);}
75% {transform: rotate(-12deg);}
100% {transform: rotate(0deg);}
}

@keyframes opacity {
0% {opacity: 0.4;}
50% {opacity: 1;}
100% {opacity: 0.4;}
}

@keyframes inset {
0% {box-shadow: none}
50% {box-shadow: 0 0 10px #9bafb2 inset;}
100% {box-shadow: none}
}

@keyframes flash {
0% {opacity: 1;}
50% {opacity: 0.1;}
100% {opacity: 1;}
}