Flexible Squares: All Grey

[causefire]

Style: S2 Flexible Squares
Account: Basic, Plus & Paid
Browser: tested in IE, Firefox & Safari (round edges only for Firefox)



Image Preview | Live Preview

Image Preview | Live Preview

Image Preview | Live Preview

Image Preview | Live Preview

css codesLayout #1: Light

/* Cleaned CSS: */
/*------------------------------------------------------------------
S2 Flexible Squares
Layout by muddi88 @ http://community.livejournal.com/xaddictionsx/
PLEASE DO NOT REMOVE THIS SECTION
--------------------------------------------------------------------*/

body {
background-color: #ececec;
color: #888;
font-family: arial;
font-size: 11px;
text-align: justify;
line-height: 150%;
}

a, a:link, a:visited, a:active {
color: #888;
text-decoration: none;
}

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

blockquote {
background-color: #ececec;
padding: 10px;
margin: 7px;
color: #8d8d8d;
text-align: justify;
}

strong, b {
color: #B8B4A1;
}

em, i {
color: #B8B4A1;
}

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

/*-------------------------------
general
-------------------------------*/

#content {
width: 800px;
margin-left: auto; margin-right: auto;
margin-top: 50px;
background-color: transparent;
}

#maincontent {

width: 590px;
background-color: #ffffff;
text-align: justify;
float: left;
-moz-border-radius-topleft: 2%;
-moz-border-radius-bottomleft: 2%;
-moz-border-radius-bottomright: 2%;
}

.subcontent {
margin-top: 20px;
padding: 5px 0 5px 0;
background-color: transparent;

}

/*-------------------------------
header
-------------------------------*/

#header{ background: #ececec;
text-align:center;
font-family: georgia;
font-size: 20px;
text-transform:uppercase;
letter-spacing:2px;
padding: 5px;
}

div#header a, div#header a:link, div#header a:visited {
color: #888;
}

div#header a:hover {
color: #B8B4A1;
}

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

ul.navheader li {
display:inline;
}

/*-------------------------------
title, subtitle
-------------------------------*/

.title, .subtitle {
display: none;
}

/*-------------------------------
footer
-------------------------------*/

#footer {
margin-top: -20px;
margin-right: 200px;
background-color: #ececec;
font-size: 20px;
letter-spacing:2px;
font-family: georgia;
text-transform:uppercase;
padding: 5px;
text-align: center;
}

div#footer a, div#footer a:link, div#footer a:visited {
color:#888;
}

div#footer a:hover {
text-decoration: none;
color: #B8B4A1;
}

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

ul.navfooter li {
display: inline;
margin: 0px 0px 0px 0px;
}

.clearfoot {
clear: both;
}

#footer .viewing {
display:none;
}

/*-------------------------------
sidebar
-------------------------------*/

#sidebar {
width: 210px;
margin: 0px 0 0px 0;
padding: 5px 0 10px 0px;
background-color: #B8B4A1;
color: #ffffff;
font: 8pt arial;
line-height: 140%;
float: right;
text-align: justify;
-moz-border-radius-topright: 5%;
-moz-border-radius-bottomright: 5%;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #ffffff;
}

div#sidebar a:hover {
color: #888;
text-decoration: none;
}

.defaultuserpic {
display: none;
}

.sbarheader, .sbarbody {
padding: 0px 10px 0px 10px;
margin-top: 20px;
margin-bottom: 20px;
}

.sbarbody2 {
margin: 0 10px 0 10px;
}

table.calendar {
width: 80%;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
font-family: georgia;
font-size: 9px;
text-align: center;
border-color: #e1e1e1;
border-width: 1px;
border-style: solid;
}

.sbarcalendarposts {
background-color: #888;
font-family: georgia;
font-size: 11px;
text-align: center;
border-width: 1px;
border-color: #e1e1e1;
border-style: solid;
}

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

li.sbaritem {
padding: 5px 10px 0 10px;
list-style: none;
line-height: 15px;
border-bottom: 1px solid #ececec;
}

li.sbartitle {
padding: 0px 0px 5px 0px;
margin: 0px 0px 0px 0px;
list-style: none;
background-color: transparent;
text-align: center;
color: #CF3A3A;
font-weight: normal;
font-family:"georgia" Helvetica;
text-transform:lowercase;
font-size: 10pt;
letter-spacing: 0px;
}

/*-------------------------------
entries
-------------------------------*/

.entry {
padding: 10px 20px 5px 20px;
margin: 0px 0 0px 0;
background-color: transparent;
text-align: justify;
letter-spacing: 0px;
}

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

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

.userpic {
margin: 0px 0px 0px 0px;
position: relative;
float: right;
background-color: transparent !important;
padding:15px;
z-index: 15;
}

.userpicfriends {
margin: 0px 0px 0px 0px;
position: relative;
float: right;
background-color: transparent !important;
padding:15px;
z-index: 15;
}

.userpicfriends a font {
color: #8d8d8d;
}

.userpicfriends a:hover font {
color: #666666;
}

.date {
padding: 0px 0px 0 0;
margin-left: 30px;
top: 5px;
color: #B8B4A1;
font-family: "verdana" Helvetica, sans-serif;
font-size: 6pt;
text-align: left;
}

.subject {
padding: 0px 0px 2px 0;
margin-left: 30px;
color: #CF3A3A;
font-family:georgia;
text-transform:lowercase;
font-size: 10pt;
letter-spacing: 0px;
text-align: left;
font-weight: normal;
}

.subject a, .subject a:link, .subject a:visited {
color: #888;
}

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

.datesubject {
margin: 0px 0 0px 0;
padding: 5px 0 5px 0;
background-color: transparent;
border-bottom: 1px solid #ececec;
}

/*-------------------------------
currents, tags, comment links
-------------------------------*/

.currents {
background-color: #ececec;
padding-left: 5px;
width: 400px;
text-transform: lowercase;
}

.currentmood, .currentmusic, .currentlocation {
font-family: arial;
font-size: 9px;

color: #8d8d8d;
}

.currents strong {

font-weight: normal;
font-family: arial;
font-size: 9px;
color: #B8B4A1;
}

.comments {
padding: 10px 0 10px 0;
position: relative;
background-color: transparent;
font-family: arial;
font-size: 10px;
color: #888;
text-transform: lowercase;
font-weight: bold;
text-align: right;

}

div.comments a, div.comments a:link, div.comments a:visited {
font-family: arial;
font-size: 9px;
color: #888;
}

div.comments a:hover {
color: #B8B4A1;
text-decoration: none;
}

.ljtags {
background-color: #ececec;
width: 400px;
margin:30px 0px 0px 0px;
padding-left: 5px;
color: #B8B4A1;
font-family: georgia;
font-size: 9px;
text-transform: lowercase;
}

div.ljtags a, div.ljtags a:link, div.ljtags a:visited {
color: #888;
}

div.ljtags a:hover {
color: #B8B4A1;
text-decoration: none;
}

/*-------------------------------
comment pages
-------------------------------*/

.box {
padding: 10px;
clear: left;
background-color: #ffffff;
}

.skiplinks {

text-align: center;
margin-top: 10px;
}

div.skiplinks a, div.skiplinks a:link, div.skiplinks a:visited {
color: #888;
}

div.skiplinks a:hover {
color: #B8B4A1;
text-decoration: none;
}

.datesubjectcomment {
padding: 5px;

margin-top: 20px;
color: #B8B4A1;
border-bottom: 1px solid #ececec;

}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #888;}

.datesubjectcomment a:hover {
color: #B8B4A1;

}

.userpiccomment {
padding: 0px;
margin-right: 10px;
position: relative;

float: left;
background-color: transparent !important;
z-index: 15;
}

input, textarea {
font-family: arial;
font-size: 10px;
background-color: #e0ddcd;

color: #888;
border: 1px solid #B8B4A1;
}

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

.reply {
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
position: relative;
background-color: transparent;
font-family: georgia;
font-size: 10px;
line-height: 125%;
color: #8f8f8f;
text-align: left;
}

.replytosubject {
background-color: #ececec;
color: #8d8d8d;
font-weight: bold;
}

.commentreply {
margin: 10px;
position: relative;
font-size: 10px;
color: #8d8d8d;
}

.commentbox {
padding: 10px;
margin: 10px;
background-color: #ffffff;
border: 1px solid #e0ddcd;
}

.commentboxpartial {
color: #888;
padding: 10px;
margin: 10px;
background-color: #e0ddcd;
}

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

/*-------------------------------
year/archive page
-------------------------------*/

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

ul.year li {
display: inline;
}

table.yeartable {
background-color: #ececec;
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #ececec;
border-color: #e1e1e1;
border-width: 1px;
border-style: solid;
text-align: center;
color: #8d8d8d;
}

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

td.yearmonth {
border-style: none;
}

/*-------------------------------
tags page
-------------------------------*/

.ljtaglist {
margin: 20px 20px 20px 20px;
padding: 10px 40px 10px 40px;
background-color: #f6f6f6;
list-style-type:circle;
color: #8d8d8d;
}

h2 {
color: #B8B4A1;
font-size:11px;
margin-left:40px;
font-weight: normal;
font-style: italic;
letter-spacing: -1px;
}

/*-------------------------------
misc
-------------------------------*/

.separator {
height: 40px;
background-color: transparent;
}

.clear {
display: none;
}

#lj_controlstrip td {
background-color: #ececec !important;
}

#lj_controlstrip a {
font-family: arial !important;
font-size: 10px;
color: #8d8d8d!important;
text-transform: lowercase;
}

/*--------------------------------
tiny icons - made by damnicons
-------------------------------*/

.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 12px 9px 0px 0px !important;

background: url(http://i30.tinypic.com/34j6o3t.gif);
}

.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 9px 9px 0px 0px !important;
background: url(http://i32.tinypic.com/2nrdcsi.gif);
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
background-image: url(http://i31.tinypic.com/2l95dop.gif);
padding: 12px 7px 0 2px !important;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i31.tinypic.com/2l95dop.gif);
padding: 12px 7px 0 2px !important;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i26.tinypic.com/a0guhe.gif);
padding: 11px 11px 0 2px !important;
}
Layout #2: Dark/Light

/* Cleaned CSS: */
/*------------------------------------------------------------------
S2 Flexible Squares
Layout by muddi88 @ http://community.livejournal.com/xaddictionsx/
PLEASE DO NOT REMOVE THIS SECTION
--------------------------------------------------------------------*/

body {
background-color: #181818;
color: #888;
font-family: arial;
font-size: 11px;
text-align: justify;
line-height: 150%;
}

a, a:link, a:visited, a:active {
color: #888;
text-decoration: none;
}

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

blockquote {
background-color: #ececec;
padding: 10px;
margin: 7px;
color: #8d8d8d;
text-align: justify;
}

strong, b {
color: #B8B4A1;
}

em, i {
color: #B8B4A1;
}

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

/*-------------------------------
general
-------------------------------*/

#content {
width: 800px;
margin-left: auto; margin-right: auto;
margin-top: 50px;
background-color: transparent;
}

#maincontent {

width: 590px;
background-color: #ffffff;
text-align: justify;
float: left;
-moz-border-radius-topleft: 2%;
-moz-border-radius-bottomleft: 2%;
-moz-border-radius-bottomright: 2%;
}

.subcontent {
margin-top: 20px;
padding: 5px 0 5px 0;
background-color: transparent;
}

/*-------------------------------
header
-------------------------------*/

#header{ background: #181818;
text-align:center;
font-family: georgia;
font-size: 20px;
text-transform:uppercase;
letter-spacing:2px;
padding: 5px;
}

div#header a, div#header a:link, div#header a:visited {
color: #888;
}

div#header a:hover {
color: #B8B4A1;
}

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

ul.navheader li {
display:inline;
}

/*-------------------------------
title, subtitle
-------------------------------*/

.title, .subtitle {
display: none;
}

/*-------------------------------
footer
-------------------------------*/

#footer {
margin-top: -20px;
margin-right: 200px;
background-color: #181818;
font-size: 20px;
letter-spacing:2px;
font-family: georgia;
text-transform:uppercase;
padding: 5px;
text-align: center;
}

div#footer a, div#footer a:link, div#footer a:visited {
color:#888;
}

div#footer a:hover {
text-decoration: none;
color: #B8B4A1;
}

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

ul.navfooter li {
display: inline;
}

.clearfoot {
clear: both;
}

#footer .viewing {
display:none;
}

/*-------------------------------
sidebar
-------------------------------*/

#sidebar {
width: 210px;
margin: 0px 0 0px 0;
padding: 5px 0 10px 0px;
background-color: #282828;
color: #777777;
font: normal 8pt arial;
line-height: 140%;
float: right;
text-align: justify;
-moz-border-radius-topright: 5%;
-moz-border-radius-bottomright: 5%;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #777777;
}

div#sidebar a:hover {
color: #B8B4A1;
text-decoration: none;
}

.defaultuserpic {
display: none;
}

.sbarheader, .sbarbody {
padding: 0px 10px 0px 10px;
margin-top: 20px;
margin-bottom: 20px;
}

.sbarbody2 {
margin: 0 10px 0 10px;
}

table.calendar {
width: 80%;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
font-family: georgia;
font-size: 9px;
text-align: center;
border-color: #e1e1e1;
border-width: 1px;
border-style: solid;
}

.sbarcalendarposts {
background-color: #888;
font-family: georgia;
font-size: 11px;
text-align: center;
border-width: 1px;
border-color: #e1e1e1;
border-style: solid;
}

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

li.sbaritem {
padding: 5px 10px 0 10px;
list-style: none;
line-height: 15px;
border-bottom: 1px solid #333333;
}

li.sbartitle {
padding: 0px 0px 5px 0px;
margin: 0px 0px 0px 0px;
list-style: none;
background-color: transparent;
text-align: center;
color: #CF3A3A;
font-weight: normal;
font-family:"georgia" Helvetica;
text-transform:lowercase;
font-size: 10pt;
letter-spacing: 0px;
}

/*-------------------------------
entries
-------------------------------*/

.entry {
padding: 10px 20px 5px 20px;
margin: 0px 0 0px 0;
background-color: transparent;
text-align: justify;
letter-spacing: 0px;
}

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

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

.userpic {
margin: 0px 0px 0px 0px;
position: relative;
float: right;
background-color: transparent !important;
padding:15px;
z-index: 15;
}

.userpicfriends {
margin: 0px 0px 0px 0px;
position: relative;
float: right;
background-color: transparent !important;
padding:15px;
z-index: 15;
}

.userpicfriends a font {
color: #8d8d8d;
}

.userpicfriends a:hover font {
color: #666666;
}

.date {
padding: 0px 0px 0 0;
margin-left: 30px;
top: 5px;
color: #B8B4A1;
font-family: "verdana" Helvetica, sans-serif;
font-size: 6pt;
text-align: left;
}

.subject {
padding: 0px 0px 2px 0;
margin-left: 30px;
color: #CF3A3A;
font-family:georgia;
text-transform:lowercase;
font-size: 10pt;
letter-spacing: 0px;
text-align: left;
font-weight: normal;
}

.subject a, .subject a:link, .subject a:visited {
color: #888;
}

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

.datesubject {
margin: 0px 0 0px 0;
padding: 5px 0 5px 0;
background-color: transparent;
border-bottom: 1px solid #ececec;
}

/*-------------------------------
currents, tags, comment links
-------------------------------*/

.currents {
background-color: #ececec;
padding-left: 5px;
width: 400px;
text-transform: lowercase;
}

.currentmood, .currentmusic, .currentlocation {
font-family: arial;
font-size: 9px;
color: #8d8d8d;
}

.currents strong {

font-weight: normal;
font-family: arial;
font-size: 9px;
color: #B8B4A1;
}

.comments {
padding: 10px 0 10px 0;
position: relative;
background-color: transparent;
font-family: arial;
font-size: 10px;
color: #888;
text-transform: lowercase;
font-weight: bold;
text-align: right;

}

div.comments a, div.comments a:link, div.comments a:visited {
font-family: arial;
font-size: 9px;
color: #888;
}

div.comments a:hover {
color: #B8B4A1;
text-decoration: none;
}

.ljtags {
background-color: #ececec;
width: 400px;
margin:30px 0px 0px 0px;
padding-left: 5px;
color: #B8B4A1;
font-family: georgia;
font-size: 9px;
text-transform: lowercase;
}

div.ljtags a, div.ljtags a:link, div.ljtags a:visited {
color: #888;
}

div.ljtags a:hover {
color: #B8B4A1;
text-decoration: none;
}

/*-------------------------------
comment pages
-------------------------------*/

.box {
padding: 10px;
clear: left;
background-color: #ffffff;
}

.skiplinks {

text-align: center;
margin-top: 10px;
}

div.skiplinks a, div.skiplinks a:link, div.skiplinks a:visited {
color: #888;
}

div.skiplinks a:hover {
color: #B8B4A1;
text-decoration: none;
}

.datesubjectcomment {
padding: 5px;

margin-top: 20px;
color: #B8B4A1;
border-bottom: 1px solid #ececec;

}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #888;}

.datesubjectcomment a:hover {
color: #B8B4A1;

}

.userpiccomment {
padding: 0px;
margin-right: 10px;
position: relative;
float: left;
background-color: transparent !important;
z-index: 15;
}

input, textarea {
font-family: arial;
font-size: 10px;
background-color: #e0ddcd;
color: #888;
border: 1px solid #B8B4A1;
}

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

.reply {
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
position: relative;
background-color: transparent;
font-family: georgia;
font-size: 10px;
line-height: 125%;
color: #8f8f8f;
text-align: left;
}

.replytosubject {
background-color: #ececec;
color: #8d8d8d;
font-weight: bold;
}

.commentreply {
margin: 10px;
position: relative;
font-size: 10px;
color: #8d8d8d;
}

.commentbox {
padding: 10px;
margin: 10px;
background-color: #ffffff;
border: 1px solid #e0ddcd;
}

.commentboxpartial {
color: #888;
padding: 10px;
margin: 10px;
background-color: #e0ddcd;
}

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

/*-------------------------------
year/archive page
-------------------------------*/

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

ul.year li {
display: inline;
}

table.yeartable {
background-color: #ececec;
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #ececec;
border-color: #e1e1e1;
border-width: 1px;
border-style: solid;
text-align: center;
color: #8d8d8d;
}

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

td.yearmonth {
border-style: none;
}

/*-------------------------------
tags page
-------------------------------*/

.ljtaglist {
margin: 20px 20px 20px 20px;
padding: 10px 40px 10px 40px;
background-color: #f6f6f6;
list-style-type:circle;
color: #8d8d8d;
}

h2 {
color: #B8B4A1;
font-size:11px;
margin-left:40px;
font-weight: normal;
font-style: italic;
letter-spacing: -1px;
}

/*-------------------------------
misc
-------------------------------*/

.separator {
height: 40px;
background-color: transparent;
}

.clear {
display: none;
}

#lj_controlstrip td {
background-color: #181818 !important;
}

#lj_controlstrip a {
font-family: arial !important;
font-size: 10px;
color: #8d8d8d!important;
text-transform: lowercase;
}

/*--------------------------------
tiny icons - made by damnicons
-------------------------------*/

.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 12px 9px 0px 0px !important;

background: url(http://i30.tinypic.com/34j6o3t.gif);
}

.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 9px 9px 0px 0px !important;
background: url(http://i32.tinypic.com/2nrdcsi.gif);
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
background-image: url(http://i31.tinypic.com/2l95dop.gif);
padding: 12px 7px 0 2px !important;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i31.tinypic.com/2l95dop.gif);
padding: 12px 7px 0 2px !important;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i26.tinypic.com/a0guhe.gif);
padding: 11px 11px 0 2px !important;
}
Layout #3: Grey

/* Cleaned CSS: */
/*------------------------------------------------------------------
S2 Flexible Squares
Layout by muddi88 @ http://community.livejournal.com/xaddictionsx/
PLEASE DO NOT REMOVE THIS SECTION
--------------------------------------------------------------------*/

body {
background-color: #333333;
color: #888;
font-family: arial;
font-size: 11px;
text-align: justify;
line-height: 150%;
}

a, a:link, a:visited, a:active {
color: #888;
text-decoration: none;
}

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

blockquote {
background-color: #ececec;
padding: 10px;
margin: 7px;
color: #8d8d8d;
text-align: justify;
}

strong, b {
color: #B8B4A1;
}

em, i {
color: #B8B4A1;
}

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

/*-------------------------------
general
-------------------------------*/

#content {
width: 800px;
margin-left: auto; margin-right: auto;
margin-top: 50px;
background-color: transparent;
}

#maincontent {

width: 590px;
background-color: #ffffff;
text-align: justify;
float: left;
-moz-border-radius-topleft: 2%;
-moz-border-radius-bottomleft: 2%;
-moz-border-radius-bottomright: 2%;
}

.subcontent {
margin-top: 20px;
padding: 5px 0 5px 0;
background-color: transparent;
}

/*-------------------------------
header
-------------------------------*/

#header{ background: #333333;
text-align:center;
font-family: georgia;
font-size: 20px;
text-transform:uppercase;
letter-spacing:2px;
padding: 5px;
}

div#header a, div#header a:link, div#header a:visited {
color: #888;
}

div#header a:hover {
color: #B8B4A1;
}

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

ul.navheader li {
display:inline;
}

/*-------------------------------
title, subtitle
-------------------------------*/

.title, .subtitle {
display: none;
}

/*-------------------------------
footer
-------------------------------*/

#footer {
margin-top: -20px;
margin-right: 200px;
background-color: #333333;
font-size: 20px;
letter-spacing:2px;
font-family: georgia;
text-transform:uppercase;
padding: 5px;
text-align: center;
}

div#footer a, div#footer a:link, div#footer a:visited {
color:#888;
}

div#footer a:hover {
text-decoration: none;
color: #B8B4A1;
}

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

ul.navfooter li {
display: inline;
}

.clearfoot {
clear: both;
}

#footer .viewing {
display:none;
}

/*-------------------------------
sidebar
-------------------------------*/

#sidebar {
width: 210px;
margin: 0px 0 0px 0;
padding: 5px 0 10px 0px;
background-color: #3b3a38;
color: #777777;
font: normal 8pt arial;
line-height: 140%;
float: right;
text-align: justify;
-moz-border-radius-topright: 5%;
-moz-border-radius-bottomright: 5%;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #777777;
}

div#sidebar a:hover {
color: #B8B4A1;
text-decoration: none;
}

.defaultuserpic {
display: none;
}

.sbarheader, .sbarbody {
padding: 0px 10px 0px 10px;
margin-top: 20px;
margin-bottom: 20px;
}

.sbarbody2 {
margin: 0 10px 0 10px;
}

table.calendar {
width: 80%;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
font-family: georgia;
font-size: 9px;
text-align: center;
border-color: #e1e1e1;
border-width: 1px;
border-style: solid;
}

.sbarcalendarposts {
background-color: #888;
font-family: georgia;
font-size: 11px;
text-align: center;
border-width: 1px;
border-color: #e1e1e1;
border-style: solid;
}

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

li.sbaritem {
padding: 5px 10px 0 10px;
list-style: none;
line-height: 15px;
border-bottom: 1px solid #333333;
}

li.sbartitle {
padding: 0px 0px 5px 0px;
margin: 0px 0px 0px 0px;
list-style: none;
background-color: transparent;
text-align: center;
color: #CF3A3A;
font-weight: normal;
font-family:"georgia" Helvetica;
text-transform:lowercase;
font-size: 10pt;
letter-spacing: 0px;
}

/*-------------------------------
entries
-------------------------------*/

.entry {
padding: 10px 20px 5px 20px;
margin: 0px 0 0px 0;
background-color: transparent;
text-align: justify;
letter-spacing: 0px;
}

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

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

.userpic {
margin: 0px 0px 0px 0px;
position: relative;
float: right;
background-color: transparent !important;
padding:15px;
z-index: 15;
}

.userpicfriends {
margin: 0px 0px 0px 0px;
position: relative;
float: right;
background-color: transparent !important;
padding:15px;
z-index: 15;
}

.userpicfriends a font {
color: #8d8d8d;
}

.userpicfriends a:hover font {
color: #666666;
}

.date {
padding: 0px 0px 0 0;
margin-left: 30px;
top: 5px;
color: #B8B4A1;
font-family: "verdana" Helvetica, sans-serif;
font-size: 6pt;
text-align: left;
}

.subject {
padding: 0px 0px 2px 0;
margin-left: 30px;
color: #CF3A3A;
font-family:georgia;
text-transform:lowercase;
font-size: 10pt;
letter-spacing: 0px;
text-align: left;
font-weight: normal;
}

.subject a, .subject a:link, .subject a:visited {
color: #888;
}

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

.datesubject {
margin: 0px 0 0px 0;
padding: 5px 0 5px 0;
background-color: transparent;
border-bottom: 1px solid #ececec;
}

/*-------------------------------
currents, tags, comment links
-------------------------------*/

.currents {
background-color: #ececec;
padding-left: 5px;
width: 400px;
text-transform: lowercase;
}

.currentmood, .currentmusic, .currentlocation {
font-family: arial;
font-size: 9px;
color: #8d8d8d;
}

.currents strong {

font-weight: normal;
font-family: arial;
font-size: 9px;
color: #B8B4A1;
}

.comments {
padding: 10px 0 10px 0;
position: relative;
background-color: transparent;
font-family: arial;
font-size: 10px;
color: #888;
text-transform: lowercase;
font-weight: bold;
text-align: right;

}

div.comments a, div.comments a:link, div.comments a:visited {
font-family: arial;
font-size: 9px;
color: #888;
}

div.comments a:hover {
color: #B8B4A1;
text-decoration: none;
}

.ljtags {
background-color: #ececec;
width: 400px;
margin:30px 0px 0px 0px;
padding-left: 5px;
color: #B8B4A1;
font-family: georgia;
font-size: 9px;
text-transform: lowercase;
}

div.ljtags a, div.ljtags a:link, div.ljtags a:visited {
color: #888;
}

div.ljtags a:hover {
color: #B8B4A1;
text-decoration: none;
}

/*-------------------------------
comment pages
-------------------------------*/

.box {
padding: 10px;
clear: left;
background-color: #ffffff;
}

.skiplinks {

text-align: center;
margin-top: 10px;
}

div.skiplinks a, div.skiplinks a:link, div.skiplinks a:visited {
color: #888;
}

div.skiplinks a:hover {
color: #B8B4A1;
text-decoration: none;
}

.datesubjectcomment {
padding: 5px;

margin-top: 20px;
color: #B8B4A1;
border-bottom: 1px solid #ececec;

}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #888;}

.datesubjectcomment a:hover {
color: #B8B4A1;

}

.userpiccomment {
padding: 0px;
margin-right: 10px;
position: relative;
float: left;
background-color: transparent !important;
z-index: 15;
}

input, textarea {
font-family: arial;
font-size: 10px;
background-color: #e0ddcd;
color: #888;
border: 1px solid #B8B4A1;
}

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

.reply {
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
position: relative;
background-color: transparent;
font-family: georgia;
font-size: 10px;
line-height: 125%;
color: #8f8f8f;
text-align: left;
}

.replytosubject {
background-color: #ececec;
color: #8d8d8d;
font-weight: bold;
}

.commentreply {
margin: 10px;
position: relative;
font-size: 10px;
color: #8d8d8d;
}

.commentbox {
padding: 10px;
margin: 10px;
background-color: #ffffff;
border: 1px solid #e0ddcd;
}

.commentboxpartial {
color: #888;
padding: 10px;
margin: 10px;
background-color: #e0ddcd;
}

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

/*-------------------------------
year/archive page
-------------------------------*/

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

ul.year li {
display: inline;
}

table.yeartable {
background-color: #ececec;
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #ececec;
border-color: #e1e1e1;
border-width: 1px;
border-style: solid;
text-align: center;
color: #8d8d8d;
}

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

td.yearmonth {
border-style: none;
}

/*-------------------------------
tags page
-------------------------------*/

.ljtaglist {
margin: 20px 20px 20px 20px;
padding: 10px 40px 10px 40px;
background-color: #f6f6f6;
list-style-type:circle;
color: #8d8d8d;
}

h2 {
color: #B8B4A1;
font-size:11px;
margin-left:40px;
font-weight: normal;
font-style: italic;
letter-spacing: -1px;
}

/*-------------------------------
misc
-------------------------------*/

.separator {
height: 40px;
background-color: transparent;
}

.clear {
display: none;
}

#lj_controlstrip td {
background-color: #181818 !important;
}

#lj_controlstrip a {
font-family: arial !important;
font-size: 10px;
color: #8d8d8d!important;
text-transform: lowercase;
}

/*--------------------------------
tiny icons - made by damnicons
-------------------------------*/

.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 12px 9px 0px 0px !important;

background: url(http://i30.tinypic.com/34j6o3t.gif);
}

.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 9px 9px 0px 0px !important;
background: url(http://i32.tinypic.com/2nrdcsi.gif);
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
background-image: url(http://i31.tinypic.com/2l95dop.gif);
padding: 12px 7px 0 2px !important;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i31.tinypic.com/2l95dop.gif);
padding: 12px 7px 0 2px !important;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i26.tinypic.com/a0guhe.gif);
padding: 11px 11px 0 2px !important;
}
Layout #4: Dark

/* Cleaned CSS: */
/*------------------------------------------------------------------
S2 Flexible Squares
Layout by muddi88 @ http://community.livejournal.com/xaddictionsx/
PLEASE DO NOT REMOVE THIS SECTION
--------------------------------------------------------------------*/

body {
background-color: #181818;
color: #888;
font-family: arial;
font-size: 11px;
text-align: justify;
line-height: 150%;
}

a, a:link, a:visited, a:active {
color: #888;
text-decoration: none;
}

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

blockquote {
background-color: #282828;
padding: 10px;
margin: 7px;
color: #8d8d8d;
text-align: justify;
}

strong, b {
color: #B8B4A1;
}

em, i {
color: #B8B4A1;
}

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

/*-------------------------------
general
-------------------------------*/

#content {
width: 800px;
margin-left: auto; margin-right: auto;
margin-top: 50px;
background-color: transparent;
}

#maincontent {

width: 590px;
background-color: #333333;
text-align: justify;
float: left;
-moz-border-radius-topleft: 2%;
-moz-border-radius-bottomleft: 2%;
-moz-border-radius-bottomright: 2%;
}

.subcontent {
margin-top: 20px;
padding: 5px 0 5px 0;
background-color: transparent;
}

/*-------------------------------
header
-------------------------------*/

#header{ background: #181818;
text-align:center;
font-family: georgia;
font-size: 20px;
text-transform:uppercase;
letter-spacing:2px;
padding: 5px;
}

div#header a, div#header a:link, div#header a:visited {
color: #888;
}

div#header a:hover {
color: #B8B4A1;
}

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

ul.navheader li {
display:inline;
}

/*-------------------------------
title, subtitle
-------------------------------*/

.title, .subtitle {
display: none;
}

/*-------------------------------
footer
-------------------------------*/

#footer {
margin-top: -20px;
margin-right: 200px;
background-color: #181818;
font-size: 20px;
letter-spacing:2px;
font-family: georgia;
text-transform:uppercase;
padding: 5px;
text-align: center;
}

div#footer a, div#footer a:link, div#footer a:visited {
color:#888;
}

div#footer a:hover {
text-decoration: none;
color: #B8B4A1;
}

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

ul.navfooter li {
display: inline;
}

.clearfoot {
clear: both;
}

#footer .viewing {
display:none;
}

/*-------------------------------
sidebar
-------------------------------*/

#sidebar {
width: 210px;
margin: 0px 0 0px 0;
padding: 5px 0 10px 0px;
background-color: #282828;
color: #777777;
font: normal 8pt arial;
line-height: 140%;
float: right;
text-align: justify;
-moz-border-radius-topright: 5%;
-moz-border-radius-bottomright: 5%;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #777777;
}

div#sidebar a:hover {
color: #B8B4A1;
text-decoration: none;
}

.defaultuserpic {
display: none;
}

.sbarheader, .sbarbody {
padding: 0px 10px 0px 10px;
margin-top: 20px;
margin-bottom: 20px;
}

.sbarbody2 {
margin: 0 10px 0 10px;
}

table.calendar {
width: 80%;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
font-family: georgia;
font-size: 9px;
text-align: center;
border-color: #e1e1e1;
border-width: 1px;
border-style: solid;
}

.sbarcalendarposts {
background-color: #888;
font-family: georgia;
font-size: 11px;
text-align: center;
border-width: 1px;
border-color: #e1e1e1;
border-style: solid;
}

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

li.sbaritem {
padding: 5px 10px 0 10px;
list-style: none;
line-height: 15px;
border-bottom: 1px solid #333333;
}

li.sbartitle {
padding: 0px 0px 5px 0px;
margin: 0px 0px 0px 0px;
list-style: none;
background-color: transparent;
text-align: center;
color: #CF3A3A;
font-weight: normal;
font-family:"georgia" Helvetica;
text-transform:lowercase;
font-size: 10pt;
letter-spacing: 0px;
}

/*-------------------------------
entries
-------------------------------*/

.entry {
padding: 10px 20px 5px 20px;
margin: 0px 0 0px 0;
background-color: transparent;
text-align: justify;
letter-spacing: 0px;
}

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

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

.userpic {
margin: 0px 0px 0px 0px;
position: relative;
float: right;
background-color: transparent !important;
padding:15px;
z-index: 15;
}

.userpicfriends {
margin: 0px 0px 0px 0px;
position: relative;
float: right;
background-color: transparent !important;
padding:15px;
z-index: 15;
}

.userpicfriends a font {
color: #8d8d8d;
}

.userpicfriends a:hover font {
color: #666666;
}

.date {
padding: 0px 0px 0 0;
margin-left: 30px;
top: 5px;
color: #B8B4A1;
font-family: "verdana" Helvetica, sans-serif;
font-size: 6pt;
text-align: left;
}

.subject {
padding: 0px 0px 2px 0;
margin-left: 30px;
color: #CF3A3A;
font-family:georgia;
text-transform:lowercase;
font-size: 10pt;
letter-spacing: 0px;
text-align: left;
font-weight: normal;
}

.subject a, .subject a:link, .subject a:visited {
color: #888;
}

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

.datesubject {
margin: 0px 0 0px 0;
padding: 5px 0 5px 0;
background-color: transparent;
border-bottom: 1px solid #282828;
}

/*-------------------------------
currents, tags, comment links
-------------------------------*/

.currents {
background-color: #282828;
padding-left: 5px;
width: 400px;
text-transform: lowercase;
}

.currentmood, .currentmusic, .currentlocation {
font-family: arial;
font-size: 9px;
color: #8d8d8d;
}

.currents strong {

font-weight: normal;
font-family: arial;
font-size: 9px;
color: #B8B4A1;
}

.comments {
padding: 10px 0 10px 0;
position: relative;
background-color: transparent;
font-family: arial;
font-size: 10px;
color: #888;
text-transform: lowercase;
font-weight: bold;
text-align: right;

}

div.comments a, div.comments a:link, div.comments a:visited {
font-family: arial;
font-size: 9px;
color: #888;
}

div.comments a:hover {
color: #B8B4A1;
text-decoration: none;
}

.ljtags {
background-color: #282828;
width: 400px;
margin:30px 0px 0px 0px;
padding-left: 5px;
color: #B8B4A1;
font-family: georgia;
font-size: 9px;
text-transform: lowercase;
}

div.ljtags a, div.ljtags a:link, div.ljtags a:visited {
color: #888;
}

div.ljtags a:hover {
color: #B8B4A1;
text-decoration: none;
}

/*-------------------------------
comment pages
-------------------------------*/

.box {
padding: 10px;
clear: left;
background-color: #333333;
}

.skiplinks {

text-align: center;
margin-top: 10px;
}

div.skiplinks a, div.skiplinks a:link, div.skiplinks a:visited {
color: #888;
}

div.skiplinks a:hover {
color: #B8B4A1;
text-decoration: none;
}

.datesubjectcomment {
padding: 5px;

margin-top: 20px;
color: #B8B4A1;
border-bottom: 1px solid #282828;

}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #888;}

.datesubjectcomment a:hover {
color: #B8B4A1;

}

.userpiccomment {
padding: 0px;
margin-right: 10px;
position: relative;
float: left;
background-color: transparent !important;
z-index: 15;
}

input, textarea {
font-family: arial;
font-size: 10px;
background-color: #282828;
color: #888;
border: 1px solid #181818;
}

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

.reply {
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
position: relative;
background-color: transparent;
font-family: georgia;
font-size: 10px;
line-height: 125%;
color: #8f8f8f;
text-align: left;
}

.replytosubject {
background-color: #333333;
color: #8d8d8d;
font-weight: bold;
}

.commentreply {
margin: 10px;
position: relative;
font-size: 10px;
color: #8d8d8d;
}

.commentbox {
padding: 10px;
margin: 10px;
background-color: #333333;
border: 1px solid #e0ddcd;
}

.commentboxpartial {
color: #888;
padding: 10px;
margin: 10px;
background-color: #282828;
}

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

/*-------------------------------
year/archive page
-------------------------------*/

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

ul.year li {
display: inline;
}

table.yeartable {
background-color: #ececec;
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #ececec;
border-color: #e1e1e1;
border-width: 1px;
border-style: solid;
text-align: center;
color: #8d8d8d;
}

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

td.yearmonth {
border-style: none;
}

/*-------------------------------
tags page
-------------------------------*/

.ljtaglist {
margin: 20px 20px 20px 20px;
padding: 10px 40px 10px 40px;
background-color: #333333;
list-style-type:circle;
color: #8d8d8d;
}

h2 {
color: #B8B4A1;
font-size:11px;
margin-left:40px;
font-weight: normal;
font-style: italic;
letter-spacing: -1px;
}

/*-------------------------------
misc
-------------------------------*/

.separator {
height: 40px;
background-color: transparent;
}

.clear {
display: none;
}

#lj_controlstrip td {
background-color: #181818 !important;
}

#lj_controlstrip a {
font-family: arial !important;
font-size: 10px;
color: #8d8d8d!important;
text-transform: lowercase;
}

/*--------------------------------
tiny icons - made by damnicons
-------------------------------*/

.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 12px 9px 0px 0px !important;

background: url(http://i30.tinypic.com/34j6o3t.gif);
}

.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 9px 9px 0px 0px !important;
background: url(http://i32.tinypic.com/2nrdcsi.gif);
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
background-image: url(http://i31.tinypic.com/2l95dop.gif);
padding: 12px 7px 0 2px !important;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i31.tinypic.com/2l95dop.gif);
padding: 12px 7px 0 2px !important;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i26.tinypic.com/a0guhe.gif);
padding: 11px 11px 0 2px !important;
}

Uploading Instructions:

- Go to your Customize page and switch to S2 (if you're using S1).
- Press "Select a New Theme" and type "Flexible Squares" in the search box and select a theme.
- Scroll down to "Choose a Page Setup", and set to sidebar on right.
- Press the "Customize Selected Theme" button.
- Now click "Custom CSS" and change "Use layout's stylesheet(s)" to "no".
- Copy&paste the the css into the "Custom stylesheet" box.
(Don't forget to press the "Save changes" button!)

If you wanna add a header, just copy&paste this:
(Don't forget to change height and width!)

.headerimage {
position: relative;
width: 0px;
height: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("URL HERE");

background-repeat: no-repeat;
}

Rules:
- Credit muddi88 or xaddictionsx when using!
- Feel free to change colors and anything else
- Comments are love! ♥ :D
- FRIEND xaddictionsx for updates!