Premade Profile | 01 | Caedon

/*

premade profile advanced
by aly of caedon

please follow the rules of this code
cheers and have a lovely day

*/

/* - - feel free to edit this bit - noted for convenience - - */

body {
    color: #444; /* main text color */
    background: none; /* revert to nothing do not move or delete */
    background-color: #fff; /* main background color */
    background-image: url(https://www.toptal.com/designers/subtlepatterns/patterns/circles-light.png); /* main background image replaces main background color */
}

#wrap, #sidebar {
    background-color: #f4f5f6 !important; /* your main box background */
    box-shadow: 0 0 25px 5px #DDD; /* main box shadow */
}

#comment-text, #comments li p, #comments ul li, #comments li>img,
#load-more, #comment-button, #comment-form>span:nth-child(3),
#comments li img+a:before {
background-color: #e7e7e8 !important; /* - - Accent Background - - */
}

ul#comment_list p { color: #888; } /* comment text color */

#comments li > img + a, ul.navigation li a, #comment-button, #load-more {
color: #222 !important; /* link color */
}

/* custom cursor that will be revised in the future bc some people have bugs */
html {
    cursor: url(http://media.tumblr.com/tumblr_m2umdzzqaC1qfamg6.gif), auto;
}

/* - - - - - please do not edit below ty xx - - - - - */

h1#logo a {
    font-family: Cedarville cursive;
    text-transform: lowercase;
    position: fixed;
    left: 0;
    bottom: 50px;
    right: 0;
    margin: 0 auto;
    opacity: 0.25;
    font-size: 0;
    width: 260px;
    height: 81px;
    background-image: url(http://i.imgur.com/7wQnLyO.png);
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.25s ease-in-out;
}
h1:hover#logo a {
    opacity: 0.8;
}
a {
    color: inherit;
}
li {
    list-style-type: none;
}

@import url(https://fonts.googleapis.com/css?family=Cedarville+Cursive|Karla);
@font-face {
    font-family: Cedarville Cursive;
    src: url(https://fonts.gstatic.com/s/cedarvillecursive/v7/cuCe6HrkcqrWTWTUE7dw-9c3lOkTc1IrfN1zKaob-SQ.woff2);
}

#sidebar {
    content: close-quote;
    position: absolute;
    left: 0px;
    top: -250px;
    width: 100%;
    height: 200px;
    overflow: hidden;
}
@font-face {
    font-family: Karla Bold;
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/karla/v5/suoMYBGv5sGCUIrF9mVTffesZW2xOQ-xsNqO47m55DA.woff2);
}
@font-face {
    font-family: Karla;
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/karla/v5/Zi_e6rBgGqv33BWF8WTq8g.woff2);
}
h2, #content:after {
    display: none;
}
#content:before {
    display: none;
}
body {
    font-family: Karla;
    font-weight: 400;
    font-size: 10px;
    background-attachment: fixed;
}
#wrap, #wrap * {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0px;
    background: none;
}
#wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 300px;
    margin: 0 auto;
    margin-bottom: 200px;
    padding: 25px;
    width: 750px;
    height: auto;
    min-width: 225px;

    overflow: visible;
    z-index: 100;
}
#content {
    position: relative;
    float: left;
    width: 100%;
}
#bio {
    position: relative;
    float: right;
    width: 225px;
    text-align: justify;
    margin-top: 175px;
    margin-bottom: 50px;
}
#comments {
    float: left;
    width: 500px;
    max-width: 100%;
}
/* pre code */

#comments ul li {
    position: relative;
    margin-bottom: 25px;
    font-size: 0px;
    border-radius: .5em;
    padding: 10px;
    padding-bottom: 50px;
    overflow: visible !important;
    width: 400px;
    max-width: calc(100% - 20px);
    float: right;
    display: block;
}
#comments li>img+a {
    text-transform: uppercase;
    margin: 10px;
    margin-bottom: 15px;
    height: 15px;
    display: block;
    width: 100%;
    font-size: 11px;
    font-weight: 600;
    font-family: Montserrat;
    letter-spacing: 1px;
    line-height: 15px;
}
#comment_list img.avatar_thumb {
    float: left;
    margin-left: -5px;
    z-index: 25;
}
#comments li>img {
    position: absolute;
    left: -75px;
    top: 0;
    padding: 5px;
    border-radius: .5em;
    width: 50px;
    height: 50px;
}
#comments li p {
    min-height: 15px;
    font-size: 10px;
    padding: 10px;
}
#comments p {
    overflow: hidden;
}
#comments small small {
    text-transform: uppercase;
    font-size: 8px;
    position: absolute;
    top: 2px;
    right: 5px;
    margin: 5px;
    font-family: Montserrat;
    font-weight: 600;
    letter-spacing: 1px;
    height: 15px;
    line-height: 15px;
    z-index: 1;
}
#comments small {
    font-size: 0px;
}
ul#comment_list {
    overflow: visible;
}
#comments li img+a:before {
    content: close-quote;
    position: absolute;
    left: -58px;
    top: 51px;
    width: 15px;
    height: 15px;
    z-index: 1;
    transform: rotate(-45deg);
}
#comments small {
    font-size: 0px;
}
#friendlist {
    display: none;
    position: absolute;
    left: -50px;
    top: 0;
    width: 25px;
    height: 100%;
}
.friend_container {
    width: 60px;
    height: 60px;
    margin-bottom: 10px !important;
    background-color: white !important;
    overflow: hidden;
    border-radius: .5em 0 0 .5em !important;
}
#sidebar h2+img {
    position: absolute;
    top: 0;
    right: 0;
    left: calc(100% - 225px);
}
ul#actions {
    margin: 25px;
}
li#likes {
    margin-top: 15px;
}
/* Comment Buttons */

#load-more, #comment-button, #comment-form>span:nth-child(3) {
    position: absolute;
    top: 105px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    width: 110px;
    font-size: 8px !important;
}
#comment-form>span:nth-child(3) {
    display: none;
}
#load-more {
    right: 0;
}
#comment-button {
    right: 115px;
}
#comment-text {
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 0;
    width: 225px !important;
    height: 100px !important;
    padding: 10px;
    font-family: karla;
    font-size: 11px;
    font-weight: normal;
}
#sidebar strong {
    float: left;
    margin-right: 5px;
}
ul.navigation {
    position: absolute;
    left: -500px;
    top: 200px;
    right: 0;
    margin: 0 auto;
    width: 225px;
    height: 50px;
    line-height: 50px;
    z-index: 101;
}
ul.navigation li:last-child {
    margin-right: 0;
}
ul.navigation li {
    float: left;
    display: inline-block;
    margin-right: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}
li#send-message {
    margin-bottom: 15px;
}
.delete {
    color: #ff7c7c;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 15px;
    font-size: 10px;
    float: left;
}

#header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    overflow: visible;
    z-index: initial;