s2 layout: a prisoner of history [flexible squares]

[milou_veronica]

image | live layout:a prisoner of history
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 "Greys" 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 #FFFFFF.
04. Custom CSS
Ensure Use layout's stylesheet(s) is set to no
05.
Paste code into the Custom Stylesheet box.

/*

a prisoner of history
(flexible squares; milou veronica)

*/

body { background: #f7f7f7 url() repeat fixed 0 0; text-align: center; color: #ffffff; font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: .8em; margin: 0;padding: 0}

.headerimage { position: relative;background: transparent url() no-repeat fixed 0 0;height: 0; width:750px;margin: 0 auto}

#content { color: #444444; margin:0 auto; border-width: 0; padding: 0; width: 650px}

#maincontent { padding: 10px 0px; text-align: left; margin:0 auto}

#sidebar {line-height:1.5;min-height:5px;text-align: center; color: #444444; font-size: .84em;background: #FFF url() repeat 0 0 scroll;margin: 0; padding:0;border:1px solid #ececec}

/* HEADER */

#header {font-family: Georgia, Times New Roman, Book Antiqua, serif;text-align: center; font-size: .95em; text-transform: lowercase; color: #111111;
background: transarent url() repeat 0 0 scroll;margin: 0; padding:0;font-style:italic}

div#header a, div#header a:link, div#header a:visited{}

div#header li.view {border-bottom:none;padding-bottom: 7px}

div#header li.view:hover{;padding-bottom: 13px}

ul.navheader{letter-spacing: 1px;padding: 50px 5px 6px 10px; margin:0}

ul.navheader li { list-style-type: none; display: inline;margin:0 -3px 0 0;padding: 6px;border:1px solid #ececec;background-color: #ffffff;position:relative}

ul.navheader li:hover {padding: 6px 6px 12px;bottom:6px}

.title {font-size:1em;padding:5px 10px 0 0;color:#;background-color: #ffffff;border:1px solid #ececec;border-bottom:none;display:none}

.subtitle{font-size:.8em;padding:0 15px 0 0;color:#999;background-color: #ffffff;border:1px solid #ececec;border-bottom:none;border-top:none;display:none}

/* ENTRIES */

.subcontent { min-height: 140px; background: #f1f1f1 url() repeat 0 0 scroll;margin-left: auto; margin-right: auto;border:1px solid #ececec}

.datesubject {background-color: #FFFFFF;font-family:Arial, Times New Roman, Book Antiqua, serif; padding: 10px 5px 5px 15px;border-right:1px solid #ececec; text-align: left;margin-right:85px}

.date { text-transform: uppercase; color: #ccc; font-size: 7pt; letter-spacing: 1px;padding-top: 6px}

.subject {letter-spacing: -1px; font-size: 12pt; text-transform: lowercase; line-height: 1;padding: 0px 0 0 10px; margin-top: -4px; font-style:italic}

.subject a, .subject a:link, .subject a:visited {text-decoration: bold}

.entry {background-color: #FFFFFF;margin: 0; padding: 10px 0 0; text-align: left; line-height: 1.75; border-right:1px solid #ececec;margin-right:85px}

.entry_text { padding: 10px 20px 0}

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

/* USERPICS */

.userpic,.userpicfriends { position: relative; float: right; margin: 5px 5px 10px 10px; z-index: 15; border: 1px solid #eeeeee}

.userpicfriends { background-color: transparent !important;text-align: center; z-index: 15; font-size: 7pt}

.userpic img, .userpicfriends img { border: 1px solid #eeeeee; padding: 1px; background-color: #ffffff;width:70px;height:70px}

.userpicfriends a font {color: #111}

/* COMMENT BAR */

.comments {text-transform: uppercase;color: #f2f2f2;font-size:.85em; margin: 0 -84px 0;text-align: right; letter-spacing: -.04em;position: relative;padding:0 0 3px;line-height:.1}

div.comments a, div.comments a:visited, div.comments a:link {background-color:#FFF; border:1px solid #eaeaea;padding:2px 1px;font-style:normal;display:block;width:75px;margin: 0 0 0 auto;line-height:.95}

div.comments a:hover {border-color:#ddd;border-width: 1px 0 0 1px;padding:2px 1px 3px 2px}

.separator{height: 10px}

/* CURRENTS AND TAGS */

.ljtags {font-weight: bold;text-align: left; margin-top: 50px; position: relative; text-transform: lowercase; font-size:.9em; color:#555555}

.ljtags:hover {}

.ljtags a {font-weight: normal; text-decoration: none}

.currents {padding:0 20px;text-align: left;margin:0;text-transform: lowercase; font-size:.9em;color: #555555}

.currentlocation, .currentmood, .currentgroups,.currentmusic {}

.currentlocation:hover, .currentmood:hover, .currentgroups:hover,.currentmusic:hover {border-color: #B3BFBE}

/* TAG PAGE */

h2 { background-color: #FFFFFF;padding: 10px 10px 10px 30px; font-family:Georgia, Times New Roman, Book Antiqua, serif;letter-spacing: -1px; font-size: 13pt; text-transform: lowercase; line-height: 100%; color: #444444; font-weight: normal; margin: 0px; border: 1px solid #ededed; border-bottom: none}

.ljtaglist {text-align: left; margin: 0px; padding: 3px 15px 15px; background-color: #FFFFFF; color: #aaaaaa; font-size:10px; list-style: inside square; border: 1px solid #ededed; border-top: none}

.ljtaglist li { margin: 3px; padding: 3px; border-bottom: 1px dotted #e6e6e6}

/* 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: 0px}

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

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.75}

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

.commentreply { line-height:1.75; min-height: 65px; text-align: left; position: relative; margin: 10px 10px 10px 120px}
.lj-view-reply .entry{padding:10px;min-height:90px}
.commentbox { border: 1px solid #eeeeee; background-color: #FFFFFF; padding: 30px 10px 10px 20px;margin: 7px 0px 7px 0px}

.commentbox:hover, .commentboxpartial:hover {border-color: #dddddd}

.commentboxpartial { border: 0px solid #eeeeee; background-color: #FFFFFF; padding: 10px; margin: 10px; -moz-border-radius: 7px}

.commentinfo {margin-top: 10px; width: 100%}

.skiplinks {text-align: center;margin: 0 auto 10px;padding: 10px 0px; font-size: 8pt; color: #ccc;background-color:#FFFFFF;border:1px solid #eee}

/* SIDEBAR */

.defaultuserpic {float:right; margin: 10px; padding:0;display:none}

.defaultuserpic img {padding:2px; width:70px;height:70px;border:1px solid #ececec}

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

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

.sbarbody2 {margin: auto;padding:15px;}

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

li.sbaritem{ display:inline; margin: 0px; padding:8px 6px}

li.sbaritem:hover {}

#sidebar_linklist {text-transform: lowercase; margin: 0 auto; padding:8px 6px}

li.sbartitle, #sidebar_summary, #sidebar_tags, #sidebar_calendar {display: none}

/* FOOTER */

#footer { margin:auto; font-family: Georgia, Times New Roman, Book Antiqua, serif; text-align: center; z-index: 100; clear: both; width: 620px; }

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

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

div#footer li.viewing { display:none; padding: 7px; margin: 2px; border: 1px solid #ececec; background-color: #ffffff}

div#footer a, div#footer a:link, div#footer a:visited { color: #aaaaaa; padding: 7px; margin: 2px; border: 1px solid #ececec; background-color: #ffffff}

div#footer a:hover {background-color: #f2f2f2}

.clearfoot {clear: both;}

/* ARCHIVE PAGE */

ul.year {margin: 0 0 40px; background-color: #FFFFFF; font-family: Georgia, Times New Roman, Book Antiqua, serif; text-align: center; padding: 10px;border: 1px solid #ededed}

ul.year li {display: inline}

table.yeartable { border: 1px solid #ededed; background-color: #FFFFFF; width:100%;margin-left: auto; margin-right: auto; padding: 30px;margin-top:-30px}

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

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

td.yearmonth {border-style: none}

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

/* MINI ICONS by Pinvoke */

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"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"], img[src*="upgrade-paid-icon.gif"] {height: 0px; width: 0px; padding: 0 0 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://i49.tinypic.com/2dlylc.png)}
img[src*="icon_private.gif"]{background-image: url(http://i49.tinypic.com/11100hf.png)}
img[src*="icon_groups.gif"]{background-image: url(http://i45.tinypic.com/2hmf04h.png)}

.ljuser img[src*="syndicated.gif"]{background-image: url(http://i48.tinypic.com/2hp0qpl.png) !important}
.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i50.tinypic.com/2pzlcb9.png) !important}
.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i46.tinypic.com/vphqc7.png) !important}
.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i48.tinypic.com/2po4ch2.png) !important}

img[src*="btn_del.gif"]{background-image: url(http://i50.tinypic.com/2jaezdl.png)}
img[src*="btn_scr.gif"] {background-image: url(http://i50.tinypic.com/dpa1iw.png)}
img[src*="btn_unscr.gif"] {background-image: url(http://i48.tinypic.com/33aq8ug.png)}
img[src*="btn_freeze.gif"] {background-image: url(http://i45.tinypic.com/23j0sva.png)}
img[src*="btn_unfreeze.gif"] {background-image: url(http://i45.tinypic.com/1077yva.png)}
img[src*="btn_track.gif"] {background-image: url(http://i50.tinypic.com/5u1kiu.png)}
img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] {background-image: url(http://i47.tinypic.com/2lo4oya.png)}
img[src*="anonymous.gif"] {background-image: url(http://i45.tinypic.com/2emj3p1.png)}
img[src*="openid-profile.gif"] {background-image: url(http://i47.tinypic.com/2efs5ue.png)}
img[src*="userinfo.gif"] {background-image: url(http://i45.tinypic.com/i5b1g2.jpg)}
img[src*="talk/none.gif"] {background-image: url(http://i49.tinypic.com/sesw8o.png)}
img[src*="help.gif"] {background-image: url(http://i46.tinypic.com/2zh37lv.png)}
img[src*="pencil.gif"], img[src*="btn_edit.gif"] {background-image: url(http://i49.tinypic.com/qy5qo6.png)}
img[src*="upgrade-paid-icon.gif"] {background-image: url(http://i47.tinypic.com/2imbar5.png)}

.ljuser img {width: 0; height: 0; background: transparent url(http://i45.tinypic.com/i5b1g2.jpg) no-repeat 0 0; padding: 10px 10px 0 2px !important; vertical-align: baseline !important}
.ljuser img[src*="userinfo.gif"] {background: transparent url(http://i45.tinypic.com/i5b1g2.jpg) no-repeat 0 0 !important; padding: 10px 10px 0 2px !important}
.ljuser img[src*="community.gif"] { background: transparent url(http://i47.tinypic.com/b6x4wk.png) no-repeat scroll 0 0 !important; padding: 10px 10px 0 2px !important}

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

.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 { margin: 10px 0 0 30px; text-align: left; font: normal 9px "Tahoma" !important}

div.ContextualPopup div.Inner { color: #555555 !important; border: 0px solid #ffffff; background-color: transparent !important; width: 300px}

div.ContextualPopup .Userpic { padding: 8px; border: 1px solid #eeeeee; background-color: #ffffff}

div.ContextualPopup .Content { padding: 5px; background-color: #FFFFFF; border: 1px solid #eeeeee; margin: 4px 80px 4px 4px}

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: #555555 !important}

div.ContextualPopup .Relation { text-transform: uppercase; font-family: Georgia, Times New Roman, Book Antiqua, serif; font-size: 7pt}

/* MISC */

table#lj_controlstrip td {background-color: #f2f2f2; background-image: url(); color: #212121;border: solid 1px #e7e7e7; border-left: none; border-bottom: none}

#lj_controlstrip_userpic {display:none}

#lj_controlstrip a { color: #777777}

#lj_controlstrip_statustext { color: #555555}

b, u { color: #111111}

a img {border:none}

i, s { color: #999999; font-family: Georgia, Times New Roman, Book Antiqua, serif}

p, td {font-size: 11px;}

blockquote { padding: 19px;border: 1px solid #ececec; background: #f2f2f2 url(http://i49.tinypic.com/i2okdt.png) repeat scroll 0 0; color: #555; margin:7px 8px}

code {display:block; padding:5px;border:1px dashed #DDDDDD; font-size: 12px}

form#qrform table {border-width: 0px !important}

div.box form#postform, form#qrform {background-color: #FFFFFF; border:none; padding:10px}

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

input, textarea { font-family:Georgia, Times New Roman, Book Antiqua, serif; font-size: 13px; background: #f2f2f2 url(http://i49.tinypic.com/i2okdt.png) repeat scroll 0 0; border: 1px solid #eeeeee; color: #555555}

/* COLORS */

a, a:link, a:visited, .subject a, div.comments a:hover,.subject a:link, .subject a:visited, code, .datesubjectcomment a:link, .datesubjectcomment a:visited, div.ContextualPopup .Relation {
color: #8EA9AF; font-family: Georgia, Times New Roman, Book Antiqua, serif; font-style:italic;
text-decoration: none}

a:hover, .subject a:hover, div.comments a, div#sidebar a:hover, .datesubjectcomment a:hover, .ljuser a b:hover{color: #DF847D;text-decoration: none}

.ljuser a b{color: #779F8F;font-weight:normal} div.comments a:hover{font-style:normal}

.subject a, .subject a:link, .subject a:visited, .subject a:hover, .subject, h2, ul.year {color: #000}

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:
Nothing I can think of at the moment.