s2 flexible squares: fall through your fingers in flakes

[milou_veronica]

image | live layout:fall through your fingers in flakes
style: flexible squares
accounts: Basic, Paid, and Sponsored
features:custom comment pages, mini icons, topbar
browsers: IE8, FF, Safari, Chrome

installation
01. Choose Journal Style
Select "Autumn" Flexible Squares layout in "Select a New Theme"
02. Choose a Page Setup
i. Set Advertisement display to Horizontal or Between Entries
ii. Select 2 Column (sidebar on right) or 2 Column (sidebar on left).
03. Style
Change the "Background color of the outer table" to #222222.
04. Custom CSS
Ensure Use layout's stylesheet(s) is set to no
05.
Paste code into the Custom Stylesheet box.

/*-------------------------------------------------

fall through your fingers in flakes (flexible squares; milou veronica)

----------------------------------------------------*/

body { background: #000000 none repeat fixed 0 0; text-align: center; color: #ffffff; font-family:"Georgia", Times New Roman,serif; font-size: .82em; margin:0px;}

.headerimage {position: relative; background: transparent url() no-repeat scroll 50% 50%; max-width:900px; height:0;margin: 0 auto 0 0}

#content{ color: #222; background: #FFFFFF url() repeat scroll 0 0;width: ;margin: 0 auto; border-width: 0px; padding: 0px;}

#maincontent {padding:10px 0 0;margin:0 auto 0 0;background: #FFF url() repeat scroll 0 0; text-align: justify;max-width:900px;border-left:20px solid #000000}

#sidebar {padding:10px 0;margin:0 auto 0 0;max-width:900px; text-align: left; color: #000000; font-size: .85em; line-height: 1.75;height:120px;overflow-x:hidden;overflow-y:scroll;border-left:20px solid #000000}
/*-------------------HEADER-----------------------*/
#header { background-color: #000;margin: 0 auto;text-align: left; font-size: .85em;text-transform: uppercase; color: #ffffff; padding: 30px;min-height:80px}

div#header a, div#header a:link, div#header a:visited{background-color: #EFDD1D}
div#header a:hover {}
div#header li.view {color: #} .title:first-letter {color:#}
ul.navheader{margin:0 7px 0 0;padding:5px 0 17px; text-align:right;float:left}
ul.navheader li {margin: 0px; list-style-type: none; display:block;padding:1px}

.title {padding: 35px 0 0;letter-spacing: -1px;line-height:.8;margin: 0;font-size:3em;margin-left:100px}
.subtitle{padding: 0;text-transform: lowercase;line-height:2;color:#666666;font-size:1em;font-style:italic;margin-left:100px}

/*-------------------ENTRIES-----------------------*/
.subcontent { min-height: 120px; background: #FFFFFF url() repeat scroll;margin-left: auto; margin-right: auto}

.date {text-transform: uppercase; color: #dddddd; font-size:.95em;background-color: #000;float:left;width:70px;padding:5px;margin:0 10px 10px 0}
.subject {font-size: 2em;padding:2px 0; letter-spacing:-0.09em;line-height: 1; color: #000000; text-transform: lowercase; font-family:"Georgia", Times New Roman,serif}
.subject a, .subject a:link, .subject a:visited {position:relative;margin-left:-10px;text-decoration: none;background-color: #EFDD1D}

.datesubject {text-align: left;padding: 10px 0;background-color: #ffffff}

.entry{margin: 0px; padding: 10px 20px 0 20px;text-align: justify;line-height: 1.75; background-color: #ffffff}
.entry_text {}

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

/*---------------------------USERPICS----------------------------*/
.userpic { position: relative; float: right; padding: 7px; background-color: #ffffff; margin:0px 0px 10px 10px; z-index: 15}
.userpicfriends { position: relative; background-color: transparent !important; float: right; padding: 0px; margin:0px 0px 10px 10px; text-align: center;z-index: 15}
.userpicfriends img {border: 0px; padding: 7px;background-color: #ffffff}
.userpicfriends a font {color: #333;font-size:10pt}

/*--------------------------COMMENT BAR-------------------------*/
.comments {color: #fff; font-size: 1.2em; text-align: left; padding:6px 0; line-height:.2;position: relative;margin:0 -20px 0 0;text-transform: lowercase}

div.comments a, div.comments a:visited, div.comments a:link {display:block;background-color: #EFDD1D;line-height:1;width:100px;margin:0 0 0 -20px;position:relative;padding-left:3px}
div.comments a:hover{}
.separator{height: 55px}

/*-------------------------CURRENTS AND TAGS-------------------------------------*/
.ljtags {text-align: right; padding: 4px 18px 4px 0; background: transparent url(http://i40.tinypic.com/2dwdzjl.png) no-repeat scroll 100% 50%; margin-top: 50px; position: relative; text-transform: lowercase; font-size: 7pt; color: #000; font-weight: bold; }
.ljtags:hover {} div.ljtags a {font-weight: normal; }

.currents {text-align: right; margin:0; padding-top:15px; padding: 8px 0px 8px 0; text-transform: lowercase; font-size: 7pt; color: #646464; }
.currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong {text-decoration: none; color: #000; display:none;}
.currentlocation, .currentmood, .currentgroups , .currentmusic {padding: 4px 18px 4px 0; background: transparent none no-repeat scroll 100% 50%; }
.currentlocation {background-image: url(http://i44.tinypic.com/vrrgoj.png);}
.currentmood{background-image: url(http://i41.tinypic.com/2ai1zbd.png);}
.currentgroups {background-image: url(http://i39.tinypic.com/2vnjtpx.png);}
.currentmusic {background-image: url(http://i41.tinypic.com/2cpss5d.png);}
/*----------------------TAG PAGE------------------------------*/
h2 { padding:5px;font-weight: normal;margin: 0px auto;background-color: #EFDD1D;float:left}

.ljtaglist {text-align: left; margin: 0 0 0 100px; padding:20px; font-size:10px; list-style:inside none square;}
.ljtaglist li {padding:5px 10px;border-bottom: 1px dotted #eeeeee;} .ljtaglist li:hover{background-color:#f8f8f8;}

/*---------------------COMMENT PAGE-----------------------------*/
.box { text-align: left; margin-bottom:1px; padding: 0px; clear: left;margin-left: auto; margin-right: auto;}

.datesubjectcomment {text-align: left; color: #000; margin-top: 0px; }
.datesubjectcomment span{background-color: #EFDD1D}
.userpiccomment {position: relative; padding: 0px; border: 21px solid #000; left: 0px; margin: 0px 10px 0px 0px; z-index: 15; float: left;}

input { font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; background-color: #fafafa; border: 1px solid #cccccc; color: #999999;}
textarea.textbox {width: 100% !important;}

.reply{ border: 0px ; position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; line-height: 1.25;}

.replytosubject {letter-spacing:2px; font-weight: bold;}

.commentreply { min-height: 65px; text-align: left; position: relative; margin: 10px 10px 10px 120px;}

.commentbox { background-color: #ffffff; padding: 30px 10px 10px 20px;margin: 7px 0px 7px 0px;}

.commentbox:hover, .commentboxpartial:hover {}

.commentboxpartial { padding: 10px; margin: 10px;}

.commentinfo {margin-top: 10px; width: 100%;}
form#postform{} form#qrform table {border-width: 0px !important;} form#qrform {}
.skiplinks {text-align: center;margin: 0 auto 10px;padding: 10px 0px; font-size: 8pt; color: #ccc}
.skiplinks a {background-color: #EFDD1D}.skiplinks a:hover{background-color: #000000;color:#FFF}
/*------------------------SIDEBAR-----------------------------------------*/
.defaultuserpic {float:left;text-align: center; margin: 5px}
.defaultuserpic img {border: 1px solid #eeeeee;padding:3px;width:50px;height:50px}

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

.sbarbody2 { padding: 0;line-height:1.5;float:right;width:330px}

ul.sbarlist{ margin: 0px; padding: 0px; list-style: none;}li.sbaritem{}
li.sbaritem{width:140px;padding: 1px 8px; margin:0;border-bottom: 1px solid #dddddd} li.sbaritem:hover {}
li.sbartitle,#sidebar_summary{display:none}

#sidebar_linklist li.sbartitle,#sidebar_tags li.sbartitle, #sidebar_calendar li.sbartitle { display:inline}
#sidebar_linklist,#sidebar_tags , #sidebar_calendar{float:left;line-height:1.2;text-transform: lowercase;margin:0 6px 0 0; padding:0;font-variant:small-caps}

#sidebar table.calendar {font-size:7pt;line-height:1}td.sbarcalendar, td.sbarcalendarposts {border:1px solid #eeeeee;padding:2px 2px} td.sbarcalendarposts {background-color:#f4f4f4;text-align:center;font-size:10pt;padding:1px}
/*---------------------FOOTER----------------------------------*/
#footer { background-color: #FFFFFF;padding: 5px; text-align:left; margin:auto;text-transform: uppercase; font-size: .9em; letter-spacing: 0px; z-index: 100; clear: both;border-left:20px solid #000 }

ul.navfooter{ padding: 0px; margin: 0px;}
ul.navfooter li {list-style: none; margin: 0 10px;display:inline;}

div#footer li.viewing {color: #555555;display:none;}
div#footer a, div#footer a:link, div#footer a:visited {padding: 3px; display:inline; color: #111;}
div#footer a:hover {color:#FFFFFF}

.clearfoot {background-color: #ffffff;clear: both;border-left:20px solid #000}

/*-----------------------ARCHIVE PAGE--------------------------------*/
ul.year { margin: 0px; margin: 0 auto 10px}

ul.year li {display: inline;background-color: #EFDD1D}

table.yeartable {margin-left: auto; margin-right: auto;margin-left: auto; margin-right: auto; width:60%;padding: 30px;}

table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #dddddd;}

table.yeartable td.yearday { background-color: #eee; text-align: center;}

td.yearmonth {border-style: none;}

.clear {display:none; height: 8px;}

/*------------MINI ICONS-------------*/
.ljuser img { width: 0; height: 0; background: transparent url(http://i43.tinypic.com/2yudedt.png) no-repeat 50% 50%; padding: 10px 10px 0 2px !important; vertical-align: baseline !important;}
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i43.tinypic.com/2yudedt.png) no-repeat 50% 50% !important; padding: 10px 10px 0 2px !important; }
.ljuser img[src*="community.gif"] { background: transparent url(http://i43.tinypic.com/2n9w7pk.png) no-repeat scroll 50% 50% !important; padding: 10px 10px 0 2px !important; }

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"] , img[src*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], form#postform img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"] {height: 0px; width: 0px; padding: 0 2px 10px 10px !important; background: transparent none no-repeat scroll 0 0}

.subject img {vertical-align: middle !important;float:right;background:#EFDD1D url()no-repeat scroll 50% 50%;padding:10px !important}
img[src*="icon_protected.gif"]{background-image: url(http://i43.tinypic.com/1z1da8y.png)}
img[src*="icon_private.gif"]{background-image: url(http://i43.tinypic.com/j79ukw.png)}
img[src*="icon_groups.gif"] {background-image: url(http://i40.tinypic.com/4udx5e.png)}

.ljuser img[src*="syndicated.gif"]{background-image: url(http://i44.tinypic.com/1iiutv.jpg) !important; }
.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i42.tinypic.com/33c96pw.jpg) !important; }
.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i40.tinypic.com/15gxvro.png) !important; }
.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i39.tinypic.com/2hyxw7r.png) !important; }
img[src*="btn_del.gif"] {background-image: url(http://i41.tinypic.com/m7ztok.jpg); }
img[src*="btn_scr.gif"] {background-image: url(http://i40.tinypic.com/30auv5y.jpg); }
img[src*="btn_unscr.gif"] {background-image: url(http://i41.tinypic.com/vfxurp.jpg); }
img[src*="btn_freeze.gif"] {background-image: url(http://i39.tinypic.com/xm3l7r.jpg); }
img[src*="btn_unfreeze.gif"] {background-image: url(http://i41.tinypic.com/28reatl.jpg); }
img[src*="btn_track.gif"] {background-image: url(http://i41.tinypic.com/viecqo.jpg); }
img[src*="btn_tracking.gif"],img[src*="btn_tracking_thread.gif"] {background-image: url(http://i42.tinypic.com/f9m79s.jpg); }
img[src*="anonymous.gif"] {background-image: url(http://i42.tinypic.com/r8fdsg.png); }
img[src*="openid-profile.gif"] {background-image: url(http://i40.tinypic.com/2hd0a5v.jpg); }
form#postform img[src*="userinfo.gif"] {background-image: url(http://i43.tinypic.com/2yudedt.png);}
img[src*="talk/none.gif"] {background-image: url(http://i40.tinypic.com/20ppj6o.jpg); }
img[src*="help.gif"] {background-image: url(http://i41.tinypic.com/ztyn80.jpg); }
img[src*="pencil.gif"] {background-image: url(http://i41.tinypic.com/xo03zt.jpg); }
img[src*="btn_edit.gif"] {background-image: url(http://i39.tinypic.com/15cnkg5.jpg); }
.Note .Inner { background: #ffffff none repeat scroll 0 0; border: 1px solid #eeeeee; color: #666666;} .ippu .track_title {letter-spacing: 3px; color: #444444; font-weight: normal;} div.ljcmtmanage { background: #ffffff none repeat scroll 0 0; border: 1px solid #eeeeee; padding:10px; }

/*-----------------CONTEXTUAL POP-UP-----------------*/
div.ContextualPopup {position: relative; margin: 0px; text-align: left; font: normal 9px "Arial" !important; }
div.ContextualPopup div.Inner { color: #aaaaaa !important;border:1px solid #eeeeee;background: transparent url(http://i42.tinypic.com/2vtqdz6.png) !important; padding: 0; width: 280px;}
div.ContextualPopup .Userpic { padding: 3px; margin: 5px 5px 0; border: 1px solid #eeeeee; background: #ffffff url();}
div.ContextualPopup .Content { padding: 5px;border-right: 1px solid #ececec; margin-right:68px;background: #ffffff url();}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: bold; color: #999999 !important;}
div.ContextualPopup .Relation {font-size: 9pt;text-transform:uppercase}
/*--------------- MISC-------------- */
table#lj_controlstrip td {background-color: #1d1d1d;color: #666666;border: solid 1px #181818; border-left: none; }
#lj_controlstrip input {border: 1px solid #222222;background-color: #1a1a1a; color:#555555}
#lj_controlstrip a {color: #999999} #lj_controlstrip_statustext {color: #666666} #lj_controlstrip .ljuser a b {color:#ffffff;}#lj_controlstrip_userpic {display:none;}
a img {border:none}
b, u { color: #333333}
i, s { color: #aaaaaa}
p, td {}

blockquote { padding:15px; border: 1px solid #eeeeee; background: #f7f7f7 url() repeat; color:#8c8c8c; }
code {display:block; padding:5px; border:1px dashed #DDDDDD; font-size: 12px;}
.appwidget-qotd table td div{border:1px solid #eeeeee !Important;padding:5px 30px 5px 5px !important}

kbd, pre, tt {font-family: monospace;}
textarea { font-family: Georgia, Times New Roman, Times,serif;font-size: 12px; background: #f7f7f7 url() repeat; border: 1px solid #dddddd; color: #666666;}

body.lj-view-entry .subject {background-color: #EFDD1D;float:left;margin:0} body.lj-view-entry .entry_text {clear:left} body.lj-view-entry .date {margin:0 0 10px 0}
body.lj-view-entry .subject img {float:left}
/*-------------------COLORS-----------------------*/
a, a:link, a:visited, .subject a, div.comments a:hover,.subject a:link, .subject a:visited, h2, code, div#sidebar a, .datesubjectcomment a:link, .datesubjectcomment a:visited, div.ContextualPopup .Relation, .ljuser a b {
color: #000;
text-decoration: none}
.ljuser a b {font-weight:normal}
a:hover, .subject a:hover, .datesubjectcomment a:hover, .ljuser a b:hover {background-color: #EFDD1D; text-decoration: none;}
.subject a, .subject a:link, .subject a:visited, .subject,h2 {text-decoration: none;color: #000000}
div#sidebar li.sbaritem:hover a,div#sidebar a:hover{color: #000000}

notes

credit mini icons by Pinvoke

safe keeping
Upload images to your own server to be safe. Tinypic does delete its images after a while.

editing
♚ As per usual, feel free to add your own header/ edit bloody anything you want to.
♚ ^ Including the widths/display of anything in the topbar, as per your usage.
♚ The colour yellow used is #EFDD1D. Replace if yellow is not your thing.

F.A.Q.
If you have problems with a layout, please post them at the FAQ. I unfortunately I cannot help with stylistic edits, but as I said before, go nuts doing so.
oh, and yeah:
Scrolling sidebars are a bit tricky as you can imagine. There may be unforeseen problems if you put weird stuff in your blurb box for instance.

If you are experiencing problems with the display of the elements in the topbar, please go to -->Sidebar and check firstly that they're all enabled, and secondly that the ordering goes Default Userpic - Blurb - Links List - Calendar - Tags - Page Summary.