(LAYOUT 02 →) negative reciprocal.

[silentevocation]

My first Flexible Squares layout. This is a momentous occasion. On my next layout, I'll probably attempt to tackle a different style sheet. Any who, do enjoy!

Watchers: It has taken two years, but I've finally given you all a good amount of content to take in. Now the question is, what do you all want to see more of? Layouts, profile layouts, icons, textures, a combination of all, or something else? Please let me know if you have the time. (:



Live Preview | Static Preview

layout 02 - (conquering flexible squares). basics:
Stylesheet: Flexible Squares
Compatible Browsers: Firefox, Chrome, Safari, Internet Explorer
Account Types: Basic, Plus, Paid
Comment Pages: More or less
Appearance: No Sidebar, No Topbar
Alternate Versions: NONE

installation:
Go to customize your journal style.
Choose a 'Flexible Squares' style-sheet and have the '2 column (sidebar on right)' is selected under Page Setup. Then click on customize your theme. Go to 'Custom CSS', set the first two drop-downs to NO, and insert the CSS provided below.

/* entitled: negative reciprocal */
/* maker: silentevocation @ fleeting_days */
/* for use at livejournal.com */

/* BODY ---------------- */

body {
background-attachment:fixed;
background-image: url("http://i53.tinypic.com/8vng2w.png"); }

body, td, th {
font: normal 10px "Lucida Sans", sans-serif;
color: #888888;
line-height:15px;
text-align:justify; }

/* PARENT LINKS, BLOCK QUOTE ---------------- */

a, a:link, a:visited, a:active {
color: #303030;
font: "Trebuchet MS", sans-serif;
padding: 1px;
text-decoration: none; }

a:hover {
color: #000000;
text-decoration: none; }

blockquote {
border: 1px dashed #000000;
padding: 20px; }

input, textarea, select {
background-color: #ffffff;
font: normal 9px "Courier New", monospace;
color: #888888;
border:none; }

/* CONTENT FORMATTING ---------------- */

#content {
width: 800px;
margin: auto; }

#maincontent {
margin-top: 15px;
background-color: #transparent;
text-align: auto; }

#sidebar {
display: none; }

.subcontent, .yeartable {
background:white;
padding:10px;
border:1px solid #E3E3E3;
padding-top: 30px; }

/* HEADER AND FOOTER ---------------- */

#header {
width: 100%;
margin: 0px;
margin-top: 40px;
text-align: right;
background-color: #000000;
color: #555555;
text-transform:lowercase;
font: bold italic 16px "Times", serif;
letter-spacing: -1px; }

.title {
font: bold italic 40px "Times", serif;
color: #ffffff;
line-height: 40px;
text-align: right;
letter-spacing: -5px;
padding-right: 10px;
margin: auto; }

.subtitle {
font: normal 10px "Trebuchet MS", sans-serif;
color: #C0C0C0;
line-height: 20px;
padding-right: 10px;
text-align: right;
letter-spacing: 7px;
padding-bottom: 10px; }

#footer {
width: 100%;
text-align: left;
z-index: 100;
clear: both;
font-size:15px;
letter-spacing: -1px; }

#footer a {
color:#ffffff;
background-color: #000000;
padding: 2px;
font-size:15px;
letter-spacing:-1px; }

div#header a, div#header a:link, div#header a:visited {
color: #ffffff;
background: #000000;
padding: 20px;
text-decoration: none;
border:1px solid #000000;
margin:0px; }

div#header a:hover {
color: #ffffff;
background: #000000;
text-decoration: none;
border:1px dashed #888888;
margin:0px; }

ul.navheader {
padding: 20px;
margin: 0 0 0 0px;
border-top: 10px solid #000000;
background-color: #transparent; }

ul.navheader li {
display: inline;
margin:0 0 0 0px;
background: #303030;
padding:0; }

ul.navheader li.view {
border: 1px dashed #888888;
padding: 20px;
background-color: ffffff;
color: #ffffff; }

/* ENTRY, ENTRY-LISTS ---------------- */

.entry {
margin: 0;
background: #transparent;
padding: 30px; }

.lj-view-recent .entry_text {
min-height:220px; }

.entry_text {
padding: 0 0 0 37px; }

.entry_text a:hover {
border-bottom: 1px dashed #888888; }

.entry_text img {
border:1px solid #E3E3E3;
padding:5px; }

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

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

/* USER PIC CRAP ---------------- */

.userpic, .userpicfriends {
float: left;
background-color: transparent!important;
z-index: 15;
margin: 0px 20px 0px -95px;
text-align:right; }

.userpic img, .userpicfriends img {
width:100px;
height:100px;
padding:20px;
background: url(http://i53.tinypic.com/333g8w1.png) top left repeat scroll;
border:1px dashed #111;
margin: 0 0 5px 0; }

.userpic a, .userpicfriends a, .userpic font, .userpicfriends font{
color: #888888; }

/* DATE AND SUBJECT ---------------- */

.date {
text-transform:uppercase;
font-size: 8px;
color: #CCCCCC;
letter-spacing: 3px;
text-align: right;
padding: 0 15px 0 0; }

.datesubject {
padding: 10px 17px 0px 0;
background-color: #F4F4F4;
border-bottom: 4px solid #EFEFEF;
text-align:right; }

.subject, subject a, subject a:link {
font-size:28px;
padding-top: 3px;
margin-bottom: 12px;
letter-spacing:-4px;
text-transform:lowercase; }

.subject a:hover {
color: #000000; }

/* TAGS ------------------ */

.ljtags {
font-size:8px;
color: #888888;
text-transform:uppercase;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
margin: 0;
height: 10px;
position:relative;
text-align:left; }

.ljtags a {
color: #888888; }

ul.ljtaglist {
width: 780px;
border:1px solid #E3E3E3;
background-color:white;
padding: 10px;
padding-top:30px;
list-style:none;
margin:0; }

/* CURRENTS INFO ---------------- */

.currents {
color: #CCCCCC;
font: italic 12px "Times", serif;
text-transform:lowercase;
padding: 10px;
margin: -20px 0 0 37px;
width:300px;
height: 20px; }

.currents div {
display: block; }

/* COMMENT LINKS ---------------- */

.comments {
border-top: 9px solid #000000;
background: url(http://i53.tinypic.com/333g8w1.png) top left repeat scroll;
text-align: right;
padding: 7px;
position: relative;
font-size:0;
margin: 0 0 0 37px; }

.comments a {
font: italic 12px "Times New Roman", serif;
text-transform:lowercase;
letter-spacing:0px;
padding: 4px;
color:#ffffff;
background-color: #000000;
margin: 0 0 0 10px; }

.comments a:hover {
font: italic 12px "Times New Roman", serif;
text-transform:lowercase;
letter-spacing:0px;
color:#EFEFEF;
padding: 4px;
background-color: #000000;
margin: 0 0 0 10px; }

/* COMMENT-PAGE ---------------- */

.datesubjectcomment {
padding: 5px;
background-color: #f4f4f4;
border-bottom:5px solid #efefef;
margin-top: 20px; }

.userpiccomment {
position: relative;
top: -30px;
left: 0px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
width:100px;
height:100px;
padding:20px;
background: url(http://i53.tinypic.com/333g8w1.png) top left repeat scroll;
border:1px dashed #111; }

.box {
width:800px;
background-color:white;
border:1px solid #E3E3E3;
margin: 0 auto;
clear: left; }

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

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px; }

.replytosubject {
font-weight: bold; }

.commentreply {
position: relative;
margin: 10px; }

.commentbox {
padding: 10px;
margin: 10px 10px 10px 150px;
border:1px solid #F5F5F3; }

.datesubjectcomment a:link, .datesubjectcomment a:visited {}

.datesubjectcomment a:hover {}

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

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

/* ARCHIVE PAGE ---------------- */

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

ul.year li {
display: inline; }

table.yeartable {
width: 800px;
margin-left: auto;
margin-right: auto; }

table.yeartable td.yeardate, table.yeartable td.yearday {
padding:10px; }

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

td.yearmonth {
border-style: none; }

/* FOOTER ---------------- */

ul.navfooter {
text-align: center;
padding: 5px;
margin: 0px; }

ul.navfooter li {
text-align: center;
display: inline;
margin: 0 5px 0 5px; }

.clearfoot {
clear: both;
height:0; }

/* MISC, SPACE SEPARATOR ----------------*/

.clear {
height: 5px; }

.skiplinks {
text-align: center;
text-transform:uppercase; }

.separator{
height: 10px; }

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

/* LJ USER IMG ICONS ---------------- */

.ljuser img[src*="userinfo.gif"], .ljuser img[src*="/userhead/"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-

profile.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat !important;
background-image: url(http://i47.tinypic.com/wi7k3m.png) !important;
padding: 14px 9px 0 0 !important;
text-decoration: none; }

.ljuser img[src*="community.gif"], img[src*="partnercomm.gif"] {
background-repeat: no-repeat !important;
background-image: url(http://i50.tinypic.com/25tun2a.jpg) !important;
padding: 17px 15px 0 0 !important;
width:0;
height: 0;
text-decoration: none; }

img[src*="icon_protected.gif"] {
background-repeat: no-repeat;
background-image: url(http://i48.tinypic.com/2a9nwwl.gif);
padding: 17px 18px 0 0 !important;
width:0;
height: 0;
text-decoration: none; }

img[src*="icon_private.gif"] {
background-repeat: no-repeat;
background-image: url(http://i47.tinypic.com/2i6gvac.gif);
padding: 17px 21px 0 0 !important;
text-decoration: none;
width:0;
height: 0; }

img[src*="newsinfo.gif"] {
background-image:url("http://i47.tinypic.com/2rh8cwm.gif");
background-repeat:no-repeat !important;
height:0;
padding:18px 18px 0 0 !important;
width:0; }

img[src*="syndicated.gif"] {
background-image:url("http://i45.tinypic.com/2zpic05.jpg");
background-repeat:no-repeat !important;
height:0;
padding:18px 18px 0 0 !important;
width:0; }

/* CONTEXTUAL POP-UP ---------------- */

div.ContextualPopup div.Inner {
padding: 10px 10px 8px 10px !important;
background-color: #ffffff;
font-family: "Lucida Sans", serif;
color: #888888 !important;
font-size: 8px;
text-transform:uppercase;
width:210px;
border:1px dashed #f4f4f4; }

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner a:active {
color: #59506B !important;
font-weight: normal;
text-decoration: none !important; }

div.ContextualPopup div.Inner a:hover {
color: #507272 !important;
font-weight: normal;
text-decoration: none !important; }

div.ContextualPopup .Relation {
color: #333333;
font-weight: normal !important; }

settings:
Disabled: The ENTIRE Sidebar.
Enabled: Title and subtitle. Whatever you have set for these will be displayed on your page underneath the header.
Additional: On the 'Display' menu, under the Additional Options tab, select YES to show the user picture on all entries and then select LEFT as the position for the user picture in each entry.
Ad Placement: Ad placement should be set to 'Horizontal'.

notes:
Saving/Hosting: All tiny icons should be saved to your own hardrive and reuploaded onto an image hosting site, just to be on the safe side.
Editing: Feel free to change/edit the backgrounds, color scheme, etc.
Just don't change the framework CSS and be sure to have a link back to fleeting_days as credit somewhere, anywhere on your livejournal.
Questions(?): If you have any problems, please comment. A small help tutorial will be coming soon.

WATCH, IF YOU PLEASE. // AFFILIATION, YES?