Caedon: Layout 02

/* Basic Grid 02 by Aly */

* { box-sizing: border-box; }

body { background: none; }

#wrap, #header {
position: fixed;
right: 0;
margin: 0 auto;
width: 600px;
}

#wrap {
left: 250px;
bottom: 25px; top: 25px;
height: calc(100% - 50px ) !important;
overflow: visible;
border: 0; padding: 0;
border-radius: 0px;
border: 1px solid #000;
}

h1#logo { display: none; }

ul.navigation { float: left; width: 100%; text-align: center;}
ul.navigation li { height: 100%; display: inline-block; line-height: 25px; }
ul.navigation li a { margin-left: 10px; margin-right: 10px; color: #FFF; }

#sidebar h2 {
position: absolute;
left: 0;
top: -350px;
bottom: 0;
margin: auto 0;
background-color: black;
height: 25px;
width: 200px;
margin-left: -225px;
text-align: center;
line-height: 25px;
color: #FFF;
font-size: 15px;
}

#sidebar img{
position: absolute;
left: -225px; bottom: 0; top: -50px;
margin: auto 0;
border: 1px solid #000;
padding: 25px;
width: 200px;
}

#content {
position: absolute;
left: 0; top: 25px; right: 0; margin: 0 auto;
padding: 0;
height: calc(100% - 25px);
width: 100%;
border: 0;
background-color: transparent;
padding: 25px;
overflow: auto;
}

#bio, #friendlist, #comments {
float: left;
width: 100%;
border: 1px solid #000;
min-height: 125px;
margin-bottom: 25px;
padding: 10px;
}

.friend_container {
border: 1px solid #000;
width: 50px;
height: 50px;
padding: 10px;
}

.friend_container img {
float: left;
width: 100%;
}

ul#actions {
position: absolute;
left: -225px;
top: 475px;
width: 200px;
height: 75px;
border: 1px solid #000;
}

#likes, #dislikes, #hobbies { display: none; }

#comments ul li {
border: 1px solid #000;
display: block;
overflow: hidden;
margin-bottom: 10px;
padding: 10px;
}

#comments ul li img {
border: 1px solid #000;
margin-right: 10px !important;
}

#header {
top: 25px;
left: 250px;
height: 25px;
background: none;
background-color: #000;
color: #FFF !important;
z-index: 5;
.stop{}