Facebook Layout

[nerak_rose]

I made a layout for Livejournal that looks like Facebook. Because I was bored.

Style: S2 flexible squares
Account type: Paid, Plus and Basic.
Resolution: 1280x800
Browsers tested: Mozilla Firefox and Internet Explorer.
Notes: Does not work in Internet Explorer. Clearly, IE fails.
It's live at sama_farid  which isn't a paid account so you can't see the comment pages and I don't know a way to show them... but it's also currently on my journal, nerak_rose  and I suppose you can go look in my FO post to see XD
If you find any bugs, please let me know. (I refuse to take responsibility for bugs showing up in other browsers than FF)

/*---------------------------------------------------
made by http://nerak-rose.livejournal.com for the fun of it.
this stylesheet base was downloaded from http://community.livejournal.com/cartonage/2419.html so credits to there for that.
All other work is mine.
-----------------------------------------------------*/

body {
background-color: #FFFFFF;
text-align: center;
color: #111111;
font-family: "Calibri", sans-serif;
font-size: 12px;
margin: 20px 0 20px 0;
}

a, a:link, a:visited {
color: #3B5998;
text-decoration: none;
}

a:hover {
color: #3B5998;
text-decoration: underline;
}

p, td, blockquote {
font-size: 12px;
}

code, kbd, pre, tt {
font-family: monospace;
}

/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/

#content
{
width: 80%;
margin-left: auto; margin-right: auto;
background-color: #FFFFFF;
border: none
padding: 15px;
}

#maincontent {
margin-top: 15px;
font-family: "Calibri", sans-serif;
font-size: 12px;
background-color: #FFFFFF;
color: #111111;
border: none;
margin-right: 220px;
text-align: left;
}

#sidebar {

padding-top: 15px;
margin-top: 15px;
background-color: #F7F7F7;
border-color: #CCCCCC;
border-width: 1px;
border-style: solid;
font-size: 12px;
font-family: "Calibri", sans-serif;
color: #000000;
width: 200px;
float: right;
text-align: left;
-moz-border-radius-topleft: 3%;
-moz-border-radius-topright: 3%;
-moz-border-radius-bottomleft: 3%;
-moz-border-radius-bottomright: 3%;
-webkit-border-top-rightright-radius: 3%;
-webkit-border-top-left-radius: 3%;
-webkit-border-bottom-left-radius: 3%;
-webkit-border-bottom-rightright-radius: 3%;
}

/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/

#header {
width: 80%;
padding: 10px 0px 20px 0px;
margin-right: 180px;
text-align: left;
font-family: "Calibri", sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 2px;
border: none;
background-color: #FFFFFF;
color: #000000;
}

.headerimage {
/* for formatting header image */
}

/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
padding: 5px 1px 2px 5px;
color: #3B5999;
}

div#header a:hover, div#footer a:hover {
color: #FFFFFF;
background-color: #3B5999;
padding: 5px 1px 2px 5px;
text-decoration: none;
}

/*title and subtitle*/
.title {
font-family: "Calibri", sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 200%;
top: 10px;
}

.subtitle{
font-family: "Calibri", sans-serif;
font-size: 10px;
color: #555555;
font-weight: normal;
top: 10px;
}

/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/

/* header -- links to views; title of journal; subtitle of journal */

ul.navheader
{
padding: 5px 1px 1px 5px;
margin: 0px;
border-bottom: 1px solid #D8DEEA;
}

ul.navheader li {
display: inline;
padding: 5px 1px 2px 0px;
font-family: Calibri;
font-size: 12px;
font-color: #3B5999;
background-color: #D8DEEA;
}

ul.navheader li.view {
padding: 5px 1px 2px 5px;
font-family: Calibri;
font-size: 12px;
font-color: #000000;
background-color: #FFFFFF;
border-top: 1px solid #D8DEEA;
border-left: 1px solid #D8DEEA;
border-right: 1px solid #D8DEEA;
border-bottom: none;
}

/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/

.subcontent {
background-color: #ECEFF5;
color: #000000;
font-family: "Calibri", sans-serif;
font-size: 12px;
text-align: left;
}

.entry {

}

.entry_text {
margin-left: 130px;
}

.userpic {
position: relative;
float: left;
background-color: #FFFFFF;
padding: 5px;
margin: 10px;
z-index: 15;
border: 1px solid #FFFFFF;
}

.date {
line-height: 200%;
top: 5px;
color: #555555;
font-family: "Calibri", sans-serif;
font-size: 10px;
}

.subject {
font-weight: bold;
padding: 10px;
color: #000000;
font-family: "Calibri", sans-serif;
font-size: 12px;
}

.subject a, .subject a:link, .subject a:visited {
color: #3B5998;
}

.subject a:hover {
color: #3B5998;
text-decoration: underline;
}

.datesubject {
background-color: #ECEFF6;
border-bottom: 2px solid #FFFFFF;
padding: 5px;
}

.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}

.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}

/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/

.currents, .currentmood, .currentmusic {
font-family: "Calibri", sans-serif;
font-size: 12px;
}
.currents strong {
font-weight: normal;
}

/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/

.comments {
font-family: "Calibri", sans-serif;
font-size: 12px;
text-align: left;
background-color: #ECEFF5;
padding: 12px 5px 12px 5px;
position: relative;
top: 15px;
border-top: 2px solid #FFFFFF;
}

div.comments a, div.comments a:link, div.comments a:visited{
padding: 3px 154px 3px 5px;
color: #555555;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;

}

div.comments a:hover {
padding: 3px 154px 3px 5px;
color: #555555;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
text-decoration: none;
}

/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/

.separator{
/* for formatting separators between entries */
height: 2px;
}

/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/

.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
background-color: #FFFFFF !important;
font-family: "Calibri", sans-serif;
font-size: 12px;
z-index: 15;
}

/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/

.defaultuserpic {
text-align: center;
}

.sbarheader {
padding: 0px 5px 0px 5px;
}

.sbarbody {
padding: 0px 5px 0px 5px;
border-bottom: 1px solid #CCCCCC;
}

.sbarbody2 {
padding: 5px 15px 5px 15px;
border-bottom: 1px solid #CCCCCC;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #3B5998;
}

div#sidebar a:hover {
color: #3B5998;
text-decoration: underline;
}

/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/

table.calendar {
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
border-color: #CCCCCC;
border-width: 1px;
border-style: solid;
background-color: #FFFFFF;
text-align: center;
font-family: "Calibri", sans-serif;
font-size: 12px;
}

.sbarcalendarposts {
border-color: #CCCCCC;
border-width: 1px;
border-style: solid;
background-color: #FFFFFF;
text-align: center;
font-family: "Calibri", sans-serif;
font-size: 12px;
}

/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/

ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}

li.sbaritem
{
padding-left: 15px;
list-style: none;
}

li.sbartitle
{
padding-left: 5px;
list-style: none;
font-weight: bold;
font-align: left;
border: none;
background-color: #F7F7F7;
margin-bottom: 10px;
margin-top: 5px;
}

/*----------------------------------------------------
footer
----------------------------------------------------------------*/

#footer {
display: none;
}

ul.navfooter{
padding: 0px;
margin: 0px;
}

ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/

ul.year {
text-align: center;
padding-bottom: 40px;
}

ul.year li {
display: inline;
}

table.yeartable {
padding: 5px 5px 5px 5px;
margin-left: auto;
margin-right: auto;
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
-moz-border-radius-topleft: 3%;
-moz-border-radius-topright: 3%;
-moz-border-radius-bottomleft: 3%;
-moz-border-radius-bottomright: 3%;
-webkit-border-top-rightright-radius: 3%;
-webkit-border-top-left-radius: 3%;
-webkit-border-bottom-left-radius: 3%;
-webkit-border-bottom-rightright-radius: 3%;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
-moz-border-radius-topleft: 3%;
-moz-border-radius-topright: 3%;
-moz-border-radius-bottomleft: 3%;
-moz-border-radius-bottomright: 3%;
-webkit-border-top-rightright-radius: 3%;
-webkit-border-top-left-radius: 3%;
-webkit-border-bottom-left-radius: 3%;
-webkit-border-bottom-rightright-radius: 3%;

}

table.yeartable td.yearday {
background-color: #F7F7F7;
text-align: center;
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
-moz-border-radius-topleft: 3%;
-moz-border-radius-topright: 3%;
-moz-border-radius-bottomleft: 3%;
-moz-border-radius-bottomright: 3%;
-webkit-border-top-rightright-radius: 3%;
-webkit-border-top-left-radius: 3%;
-webkit-border-bottom-left-radius: 3%;
-webkit-border-bottom-rightright-radius: 3%;

}

td.yearmonth {
border: none;

}

/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/

.datesubjectcomment {
background-color: #ECEFF6;
margin-top: 20px;
border-bottom: 2px solid #FFFFFF;
}

.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #FFFFFF;
background-color: #FFFFFF;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 1px;
border-color: #FFFFFF;
border-style: solid;
}

.box {
border: none;
padding: 10px;
clear: left;
}

input, textarea {
background-color: #FFFFFF;
color: #555555;
border: 1px solid #BEC7D8;
}

textarea.textbox {
width: 100% !important;
}

.reply {
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 12px;
font-family: "Calibri", sans-serif;
color: #555555;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
}

.commentbox {

border: none;
padding: 10px;
margin: 10px;
background-color: #ECEFF6;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #3B5998;
}

.datesubjectcomment a:hover {
color: #3B5998;
text-decoration: underline;
}

.commentboxpartial {
border-color: #CCCCCC;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #F7F7F7;
}

.commentinfo {
background-color: #FFFFFF;
margin-top: 10px;
width: 100%;
}

.skiplinks {
text-align: center;
}

/*--------------------------------------------
Misc
-----------------------------------------*/

.clear {
height: 15px;
}

/*------------------------------------
Look of contextual Popup
------------------------------*/

/*general positioning*/

div.ContextualPopup {
margin: 5px 0 0 20px;
font: normal 11px "Calibri", sans-serif !important;
}

/* attaches border to user icon*/

div.ContextualPopup img {
border: none;
padding: 5px 5px 5px 5px;
}

/*defines general look, font color/size/background color*/

div.ContextualPopup div.Inner {
background-color: #F7F7F7 !important;
color: #000000 !important;
border: 1px solid #CCCCCC;
padding: 0px;
width: 250px;
}

/*defines left side of popup without the user icon*/

div.ContextualPopup .Content {
padding: 2px 4px 6px 4px;
margin-right: 50px;
line-height: 1.4;
}

/*defines the text that shows the relation to the user (XYZ is your mutual friend) */

div.ContextualPopup .Relation {
font-weight: bold !important;
font-family: "Candara", sans-serif !important;
}

/* look of words LJ Talk */

div.ContextualPopup .Content .OnlineStatus {
font-weight: normal;
color: #000000 !important;

}

/*element that contains the user icon*/

div.ContextualPopup .Userpic {
padding: 4px 4px 0 0;
}

/* defines the look of the links*/

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: underline !important;
font-weight: normal;
color: #3B5998 !important;
}

Enjoy, if you want to. :P