paris, mon amour ( flexible squares )
img
/* ------------------------- paris, mon amour defaitisme @ couvercles ------------------------- */ ::-moz-selection { background: #759194; color: #eeeeee;} body { background: url('http://img232.imageshack.us/img232/2763/tumblrln7ps2lxwk1qgfzbw.jpg') repeat; text-align: justify; color: #808080; font-family: georgia; font-size: 10px; line-height: 10px; margin: 10px; } a, a:link, a:visited { color: #606060; text-decoration: none; } a:hover { color: #f0bfae; text-decoration: none; cursor: default; } blockquote { font-family: georgia; font-style: italic; color: #759194; font-size: 10px; background-color: #eeeeee; border: 1px dotted #f9f9f9; padding: 8px; } code, kbd, pre, tt { font-family: monospace; } b, i, s, u, emphasise, abbr, strong, strike { color: #f0bfae; size: 10px; } #content { width: 1000px; margin-left: auto; margin-right: auto; background-color: transparent; } #maincontent { margin-top: 15px; width: 500px; margin-left: 200px; } #sidebar { float:left; position: fixed; width: 200px; font-family: georgia; font-size: 10px; color: #808080; margin-left:-40px; background-color:#ffffff; margin-top:40px; border:#eee 1px solid; padding:0px; float:left; min-height:30px; } .sbarheader { padding: 0 5px 0 5px; } .sbarbody { padding: 0 5px 0 5px; } .sbarbody2 { padding:5px; } div#sidebar a, div#sidebar a:link, div#sidebar a:visited { color: #808080; font-family: georgia; font-size: 12px; line-height: 14px; text-transform: lowercase; font-style: italic; text-decoration: none; font-style:normal; } div#sidebar a:hover { color: #f0bfae; } li.sbartitle { display: none; } li.sbaritem { color: #ffffff; font-family: georgia; font-size: 10px; text-transform: uppercase; text-decoration: none; font-style:normal; } #header { width: 500px; padding: 10px; margin-left: 200px; text-align: center; font-family: georgia; font-size: 10px; text-transform: uppercase; border: 0px background-color: transparent; color: #ffffff; } .headerimage { /* for formatting header image */ } div#header a, div#header a:link, div#header a:visited { color: #ffffff; font-family: georgia; font-size: 10px; text-transform: uppercase; text-decoration: none; font-style:normal; } div#footer a, div#footer a:link, div#footer a:visited { color: #606060; font-family: georgia; font-size: 10px; text-transform: uppercase; text-decoration: none; } div#header a:hover { color: #f0bfae; text-decoration: none; } div#footer a:hover{ color: #f0bfae; text-decoration: none; } .title { display: none; } .subtitle{ display:none; } ul.navheader { padding: 0px; margin: 0px; } ul.navheader li { display: inline; padding: 0 3px 0 3px; } .defaultuserpic { display: none; } .defaultuserpic img { display: none; } .userpic { position: relative; float: right; padding: 5px; top: 5px; right: -120px; background: #ffffff !important; z-index: 15; text-align: center; color: transparent !important; } .userpicfriends { position: relative; float: right; padding: 5px; top: 5px; right: -120px; background: #ffffff !important; z-index: 15; text-align: center; } .userpicfriends a font, .userpic a font { color: transparent !important; } .subcontent { position: relative; padding: 0px; border:1px solid #eee; background: #ffffff; } .entry { padding: 20px; background-color: #ffffff; text-align: left; border:0px; } .entry_text { padding-bottom: 15px; } .entry ul li, ol li, li { padding-left: 5px; margin-left: 0; } .date { color: #eeeeee; font-family: georgia; font-size: 8px; text-transform: uppercase; background-color:#ffffff; line-height: 12px; margin-left: 10px; margin-right: 10px; } .subject { color: #759194; font-family: georgia; font-size: 18px; letter-spacing:-1px; font-style: italic; background-color:#ffffff; line-height: 25px; margin-left: 10px; margin-right: 10px; } .subject a, .subject a:link, .subject a:visited { color: #759194; } .subject a:hover { color: #f0bfae; } .datesubject { text-align: left; background: #fff; padding-top: 10px; padding-right:10px; padding-bottom: 0px; } .currents, .currentmood, .currentmusic { font-family: georgia; font-size: 10px; line-height: 10px; padding-bottom: 10px; } .ljtags { margin-top: 35px; margin-bottom: -20px; } .comments { font-family: georgia; font-size: 10px; text-align: center; color: #ffffff; text-transform: uppercase; } div.comments a, div.comments a:link, div.comments a:visited{ color: #759194; padding:10px; } div.comments a:hover { color: #f0bfae; padding:10px; } .clear, .clearfoot, .seperator { height: 10px; } #footer { width: 500px; margin-left: 200px; line-height: 20px; text-align: center; font-family: georgia; font-size: 10px; background-color: #ffffff; color: #606060; text-transform: uppercase; z-index: 100; clear: both; } ul.navfooter{ padding: 0px; margin: 0px; } ul.navfooter li { display: inline; margin: 0 5px 0 5px; } .datesubjectcomment { background-color: #ffffff; padding: 5px; margin-top: 20px; } .userpiccomment { position: relative; border-width: 3px; border-style: dotted; border-color: #eeeeee; background-color: #ffffff; top: -30px; left: 0px; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left; } .box { border-style: solid; border-width: 1px 0px 0px 0px; border-color: #eeeeee; padding: 10px; clear: right; } input, textarea { background-color: #ffffff; color: #808080; } textarea.textbox { width: 100% !important; } .reply { position: relative; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; text-align: left; font-family: georgia; font-size: 11px; line-height: 125%; background-color: #ffffff; color: #808080; } .replytosubject { font-weight: bold; } .commentreply { position: relative; margin: 10px; padding: 10px 10px 20px 130px; font-size: 11px; font-family: georgia; color: #808080; } .commentbox { border-color: #eeeeee; border-width: 1px; border-style: solid; padding: 10px; margin: 10px; background-color: #ffffff; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #606060; } .datesubjectcomment a:hover { color: #f0bfae; } .commentboxpartial { border-color: #eeeeee; border-width: 1px; border-style: solid; padding: 10px; margin: 10px; background-color: #ffffff; } .commentinfo { background-color: #ffffff; margin-top: 10px; width: 100%; } .skiplinks { text-align: center; } ul.year { text-align: center; padding: 20px 0 20px 0; border: 0px solid #ffffff; background: #FFF; } ul.year li { display: inline; background: #FFF; } table.yeartable { margin-left: auto; margin-right: auto; padding: 8px; border: 0px solid #ffffff; background: #FFF; } table.yeartable td.yeardate, table.yeartable td.yearday { } table.yeartable td.yearday { background-color: #ffffff; text-align: center; } td.yearmonth { border-style: none; } img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important; background: transparent url(http://img89.imageshack.us/img89/9251/cupy.png) no-repeat !important; padding: 16px 0 0 16px !important; } img[src*="img/community.gif"] {width: 0 !important; height: 0 !important; background: transparent url(http://img232.imageshack.us/img232/6329/rubyo.png) no-repeat !important; padding: 16px 0 0 16px !important; } img[src*="img/syndicated.gif"] {width: 0 !important; height: 0 !important; background: transparent url(http://img580.imageshack.us/img580/940/rssv.png) no-repeat !important; padding: 16px 0 0 16px !important; } img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important; background: transparent url(http://img845.imageshack.us/img845/228/lockz.png) no-repeat !important; padding: 16px 0 0 16px !important; } img[src*="img/icon_private.gif"] {width: 0 !important; height: 0 !important; background: transparent url(http://img269.imageshack.us/img269/6052/eyev.png) no-repeat !important; padding: 16px 0 0 16px !important; } img[src*="img/icon_groups.gif"] {width: 0 !important; height: 0 !important; background: transparent url(http://img808.imageshack.us/img808/8307/groupr.png) no-repeat !important; padding: 16px 0 0 16px !important; }
→ if you like what you see, you can find 2 more versions of this layout at couvercles ( join to view the entries )
→ not ie friendly ( sorry )/ ads between entries/ in sidebar only show blurb and eventually links
→ feel free to customize the layout, but please leave the credit
→ credit defaitisme at couvercles