s2 layout: love sickened and infirmed [flexible squares]

[milou_veronica]

You're all crazy.

Here's the old MV layout (which I hate, so it's been cleaned a little here), so naturally I made a new one for milou_veronica. Which I'll have to release at some point. And then presumably replace. I'm stuck in a vicious layout-making cycle.



image | live layout:love sickened and infirmed
style: flexible squares
accounts: Basic, Paid, and Sponsored
features:custom comment pages, mini icons, sidebar
browsers: IE7, FF, Safari, Chrome

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

/*

love sickened and infirmed (flexible squares; milou veronica)

-*/

#header {height:250px}
#sidebar {margin:250px 0 0}

body {background: #eeeeee none repeat fixed 0 0;text-align: center; color: #ffffff; font-family: Arial,Helvetica, sans-serif;font-size: .78em; margin:0px;}

.headerimage {display:none;position: relative; background: transparent url() repeat scroll 0 0; width:; height:;margin: 0 auto 0 0}

#content{ color: #444444; width: 840px; background: #f6f6f6 url() repeat scroll 0 0; margin-left: 0; margin-right: auto; margin-top: 0px; border-width: 0px; padding: 0px;}

#maincontent {padding: 20px 0px 10px 0; width:650px;background-color: #FFFFFF; text-align: justify}

#sidebar {padding:10px;text-align: left; color: #444444;font-size: .85em; line-height: 1.75;margin-left: auto; border-top:1px solid #eee;min-height:120px; width:170px; float:right}

/* HEADER */
#header {float:right;position:absolute;left:655px; margin: 0 auto;width:180px;text-align: center; font-size: .8em; text-transform: uppercase; color: #444; padding: 0; overflow:hidden}

div#header a, div#header a:link, div#header a:visited{postion:relative; color: #444444}
ul.navheader li:hover a {color:#000000}
div#header li.view {color: #000} .title:first-letter {color:#5FBFAB}
ul.navheader{ padding: 16px 0; margin:0}
ul.navheader li {margin: 1px auto; list-style-type: none;padding: 1px 6px;background-color:#ececec;display:block;width:95%;text-transform:lowercase}
ul.navheader li:hover {background-color:#dddddd} div#header ul.navheader li:hover a{color:#FFFFFF}

.title {padding: 0;letter-spacing: -3px;line-height:.8;margin: 0; text-align: center;font-size:3.3em;color:#000000}
.subtitle{padding: 0;text-transform: lowercase;line-height:1; text-align: center; font-family:Tahoma,Geneva,sans-serif}

/* ENTRIES */
.subcontent { min-height: 125px;margin-left: 0; margin-right: auto}

.date {text-transform: uppercase; color: #dddddd; font-size:.75em; letter-spacing:.em;}

.subject {font-size: 1.5em; letter-spacing:-0.07em;font-style:; line-height: 1; color: #000000; text-transform: lowercase}

.datesubject {padding: 10px 5px 10px 10px;text-align:right}

.entry{margin: 0px; padding: 10px 10px 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: 0px; background-color: #ffffff; margin:0 0 10px 10px; z-index: 15; border: 10px solid #f5f5f5}
.userpicfriends { position: relative; background-color: transparent !important; float: right; padding: 0px; margin: 0 0 10px 10px; text-align: right;z-index: 15;}
.userpicfriends img {width:70px;height:70px;border: 10px solid #f5f5f5}
.userpicfriends a font {color: #111111;} .userpic img{width:70px;height:70px}

/* COMMENT BAR */
.comments {color: #dddddd;font-size: 8pt; text-align: right; padding: 6px 0;margin:0; text-transform: uppercase; font-family:arial black,arial,sans-serif }

div.comments a, div.comments a:visited, div.comments a:link { padding: 1px}
.separator{height: 55px}

/* CURRENTS AND TAGS */
.ljtags {padding: 4px 0; margin-top: 50px; position: relative; text-transform: lowercase; font-size: 7pt; color: #888888; font-weight: bold}
.ljtags:hover {} div.ljtags a {font-weight: normal; }

.currents {text-align: left; margin:0; width:300px;background-color:#f8f8f8;border:1px solid #f1f1f1;padding:5px;text-transform: lowercase; font-size: 7pt; color: #646464}
.currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong {text-decoration: none; color: #555555}

/* TAG PAGE */
h2 { padding: 10px 10px 10px 30px;font-weight: normal;margin: 0px auto}

.ljtaglist {text-align: left; margin: 0px auto; padding:20px; font-size:10px; list-style:inside none square}
.ljtaglist li {padding:5px 30px;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: #999999; margin-top: 0}

.userpiccomment {position: relative; padding: 3px; border: 1px solid #eeeeee; background-color: #ffffff; left: 0px; margin: 0px 10px 0px 0px; z-index: 15; float: left;width:70px;height:70px}

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 90px}
.commentbox {padding: 30px 10px 10px 20px;margin: 7px 0px 7px 0px}
.commentbox:hover, .commentboxpartial:hover {border-color: #dddddd}
.commentboxpartial { background-color: #ffffff; border: 1px solid #eeeeee;padding: 10px; margin: 10px}

.commentinfo { background-color: #ffffff; margin-top: 10px; width: 100%}
form#postform{background-color: #ffffff;border:1px solid #eeeeee}
form#qrform table {border-width: 0px !important}
form#qrform {background-color: #ffffff}

.skiplinks {text-align: center;margin: 0 auto 10px;padding: 10px 0px; font-size: 7pt; color: #eeeeee}

/* SIDEBAR */
.defaultuserpic {display:none;text-align: center; margin: 5px}
.defaultuserpic img {border: 1px solid #333;padding:3px}

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

.sbarbody2 { padding: 0;line-height:1.5}

ul.sbarlist{ margin: 0px; padding: 0px; margin-left: 0px; list-style: none;}li.sbaritem{line-height:1;padding: 1px 3px; margin:0 2px 1px;border-width: 0px 1px 1px 0px;border-style:solid; border-color:#dddddd;background: #ececec url() repeat scroll 0 0}
li.sbaritem a{} li.sbaritem:hover {border-color:#cccccc;border-width: 1px 0px 0px 1px;padding:1px 0 1px 11px}
li.sbartitle{padding: 6px 0; color: #000;text-transform:uppercase}

#sidebar_linklist,#sidebar_summary,#sidebar_tags, #sidebar_calendar {text-transform: lowercase;margin:0; padding:4px 3px 8px 0;}
.sbarcalendar, .sbarcalendarposts{border:1px solid #ececec;padding:1px 4px;text-align:center} .sbarcalendarposts {background-color:#ffffff;font-size:9pt;padding:0px 3px;} div#sidebar .sbarcalendarposts a{color:#5FBFAB}

/* FOOTER */
#footer { background-color: #FFFFFF;border-right:190px solid #f5f5f5;padding: 5px; text-align: left; margin:auto;text-transform: uppercase; font-size: 1em; z-index: 100; clear: both; }

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

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

.clearfoot {background-color: #FFFFFF;border-right:190px solid #f5f5f5;clear: both;}

/* ARCHIVE PAGE */
ul.year { margin: 0px; margin: 0 auto 10px; text-align: center;padding: 20px}
ul.year li {display: inline;}

table.yeartable {margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; width:100%;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: #f4f4f4; text-align: center;}
td.yearmonth {border-style: none;}

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

/* MINI ICONS */

HTML BODY img.i-ljuser-userhead {height:5px !important;width:0 !important}

.ljuser img { width: 0; height: 0; background: transparent url(http://i43.tinypic.com/2yudedt.png) no-repeat 0 0; padding: 0 2px 10px 10px !important; vertical-align: baseline !important;}
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i43.tinypic.com/2yudedt.png) no-repeat 0 0 !important; padding: 0 2px 10px 10px !important; }
.ljuser img[src*="community.gif"] { background: transparent url(http://i43.tinypic.com/2n9w7pk.png) no-repeat scroll 0 0 !important; padding: 0 2px 10px 10px !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;}
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:link, 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: #ececec;color: #666666;border: solid 1px #dddddd; border-left: none; }
#lj_controlstrip input {border: 1px solid #dddddd;background-color: #eeeeee; color:#555555}
#lj_controlstrip a { color: #666666; } #lj_controlstrip_statustext { color: #dddddd; } #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-color: #f7f7f7}
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}

/*-------------------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: #779C9F;
text-decoration: none;}
.ljuser a b {font-family: Georgia, Times New Roman, Times,serif;font-weight:normal;font-style:italic}
a:hover, .subject a:hover, div.comments a, .datesubjectcomment a:hover, div#sidebar a:hover, div#sidebar li.sbaritem:hover a, .ljuser a b:hover {color:#5FBFAB; text-decoration: none;}
.subject a, .subject a:link, .subject a:visited, .subject,h2 {text-decoration: none;color: #000000}
div#sidebar a {color: #555555} div#sidebar a:hover, div#sidebar li.sbaritem:hover a{ color: #6B8F88}

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.

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:
The header can only take so much title, so if yours is super long you'll need to increase the header height and the margin on top the sidebar. This bit's at the top of the code so just fiddle with the values there until you get something that suits you. Any overflow is hidden.