S2 Flexible Squares: Burn My Dread (+3 variations)

[mashimero]

Click for large size. Temporary live preview at rue-vermillion.

Layout and 4 colour schemes inspired by Persona 3. More info and previews under the cut.




green preview | blue preview | white preview

Info:

• Compatible with basic, plus (vertical ads), I haven't tested it in paid, but I don't see why it wouldn't work.
• Tested in Safari and Firefox.
• Custom user, community, and security icons.
• Styled contextual popup, custom comment pages, and navstrip (although I think it still looks kind of ugly)

CSS:
Burn My DreadTouch the Sky/* ------------------------------

STYLESHEET: Burn My Dread
S2 STYLE: Flexible Squares
CREATED BY: mashimero.livejournal.com
please credit, do not redistribute

------------------------------ */

body {
margin: 0;
padding: 0;
background: #f2eaea;
text-align: center;
color: #0e0e0e;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#content {
width: 100%;
margin-top: 0px;
padding: 0;
}

#sidebar {
display: none;
}

/* ---------- LINKS, FONTS, ETC ---------- */

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

a:hover {
color: #fe4949;
}

a img {
border: none;
}

b, s, u, i, strong, em {
color: #9d071b;
}

blockquote {
width: 90%;
padding: 20px;
background: #fe4949;
color: #f2eaea;
}

input, textarea, select {
margin: 8px 4px;
padding: 4px;
background: #ffffff;
border: 1px solid #f11432;
}

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

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

.entry h1, .entry h2, .entry h3 {
color: #9d071b;
text-align: left;
text-transform: uppercase;
font-style: normal;
font-weight: normal;
border-bottom: none;
}

.entry ol {
list-style: decimal-leading-zero;
}

/* ---------- HEADER ---------- */

#header {
padding: 0;
margin: 0;
width: 100%;
height: 140px;
background: #f11432;
color: #fe4949;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-style: italic;
text-align: right;
}

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

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

ul.navheader {
padding: 80px 50px 0 0;
margin: 0;
font-size: 12px;
text-transform: lowercase;
}

ul.navheader li {
display: inline;
padding: 0 8px;
}

.title {
padding-right: 60px;
color: #f2eaea;
font-size: 50px;
font-weight: bold;
letter-spacing: -3px;
text-transform: uppercase;
}

.subtitle {
display: none;
}

/* ---------- ENTRIES ---------- */

#maincontent {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 70%;
text-align: justify;
}

.entry {
margin: 10px 0px 40px 0px;
padding: 0;
}

.entry_text {
margin: 0 30px 0 30px;
line-height: 1.4em;
}

.userpic, .userpicfriends {
position: relative;
float: right;
padding: 5px;
margin: 10px;
z-index: 15;
text-align: center;
background-color: #f2eaea !important;
border: 3px double #f11432;
}

.userpic img, .userpicfriends img {
width: 80px;
height: 80px;
padding: 2px;
}

.userpicfriends a font {
font-size: 10px;
}

.subject {
padding-left: 3px;
color: #f11432;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
letter-spacing: -.02em;
line-height: 1.4em;
text-transform: uppercase;
}

.date {
float: right;
padding-top: 1em;
color: #f11432;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-style: italic;
line-height: 1.4em;
text-transform: lowercase;
}

.datesubject {
border-bottom: 3px double #f11432;
}

.ljtags {
margin-top: 20px;
font-style: italic;
text-transform: lowercase;
}

.ljtags a {
font-style: normal;
text-transform: none;
}

.currents strong {
color: #f11432;
font-style: italic;
font-weight: normal;
text-transform: lowercase;
}

.currentlocation a {
color: #0e0e0e;
}

.comments {
color: #f2eaea;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.5em;
font-style: italic;
text-align: right;
text-transform: uppercase;
}

.skiplinks {
padding: 0 .1em;
color: #f2eaea;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.5em;
font-style: italic;
text-align: center;
text-transform: uppercase;
}

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

.commentbox {
margin: 10px 0;
}

.userpiccomment {
position: relative;
float: right;
padding: 5px;
margin: 10px;
text-align: center;
background-color: #f2eaea !important;
border: 3px double #f11432;
width: 80px;
height: 80px;
}

.datesubjectcomment {
padding: 4px;
color: #9d071b;
font-weight: normal;
text-transform: uppercase;
border-bottom: 3px double #f11432;
}

.commentreply {
margin: 10px 5px 15px 5px;
line-height: 1.4em;
}

.commentboxpartial {
border: 3px double #f11432;
}

/* ---------- ARCHIVE + TAGS PAGES ---------- */

ul.year {
margin-bottom: 20px;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
text-align: left;
text-transform: uppercase;
border-bottom: 3px double #f11432;
}

ul.year li {
padding: 0 .5em;
display: inline;
}

td.yearmonth {
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
text-transform: lowercase;
}

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

table.yeartable td.yearday {
padding: 4px;
background: #f11432;
color: #f2eaea;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.2em;
text-align: center;
text-transform: uppercase;
}

table.yeartable td.yeardate {
padding: 4px;
background: #fe4949;
}

table.yeartable td.yeardate a {
color: #f2eaea;
}

table.yeartable td.yeardate a:hover {
color: #f11432;
}

dt {
color: #f11432;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.4em;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
}

dd {
margin: 0.5em 1em;
padding: 4px 0;
}

h2 {
color: #f11432;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
font-weight: normal;
text-transform: uppercase;
border-bottom: 3px double #f11432;
}

ul.ljtaglist {
list-style-image: url('http://toasty.fanizzle.org/Layouts/bullet.png');
list-style-type: square;
}

ul.ljtaglist li {
padding-top: 0.5em;
}

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

#footer {
width: 100%;
background: #f11432;
color: #f2eaea;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
text-align: center;
text-transform: uppercase;
clear: both;
}

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

div#footer a:hover {
color: #fe4949;
}

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

ul.navfooter li {
display: inline;
padding: 0 1.5em;
margin: 0;
}

.clearfoot {
background: #f11432;
clear: both;
}

.clear {
height: 15px;
}

/* ---------- POPUP + NAVSTRIP ---------- */

#lj_controlstrip {
background: #f11432;
color: #f2eaea;
}

#lj_controlstrip b {
text-transform: uppercase;
}

#lj_controlstrip a {
color: #f2eaea;
text-decoration: underline;
}

#lj_controlstrip a:hover {
color: #fe4949;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks {
border-right: 1px solid #f11432;
}

div.ContextualPopup div.Inner {
width: 25em;
margin: -10px 15em 0 0;
padding: 6px;
border: none;
background-color: #f11432 !important;
color: #f2eaea !important;
font-size: 11px;
}

div.ContextualPopup .Userpic {
border: 5px solid #f1eaea;
}

div.ContextualPopup .Relation {
font-weight: normal;
text-transform: uppercase;
border-bottom: 3px double #f2eaea;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color: #f2eaea!important;
font-weight: normal !important;
text-decoration: underline !important;
}

div.ContextualPopup .OnlineStatus {
font-weight: normal;
}

/* ---------- CUSTOM ICONS ---------- */

.entry ul {
list-style-image: url('YOUR_URL/bullet.png');
list-style-type: square;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-color: transparent;
background-repeat: no-repeat;
background: url('YOUR_URL/user.png');
padding: 13px 0px 0 12px;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
width: 0;
height: 0;
background-color:transparent;
background-repeat: no-repeat;
background: url('YOUR_URL/comm.png');
padding: 13px 0px 0 12px;
}

.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: url('YOUR_URL/private.png');
}

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: url('YOUR_URL/locked.png');
}

.subject img[src="http://l-stat.livejournal.com/img/icon_groups.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: url('YOUR_URL/customlock.png');
}/* ------------------------------

STYLESHEET: Touch the Sky
S2 STYLE: Flexible Squares
CREATED BY: mashimero.livejournal.com
please credit, do not redistribute

------------------------------ */

body {
margin: 0;
padding: 0;
background: #e9f0f5;
text-align: center;
color: #0e0e0e;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#content {
width: 100%;
margin-top: 0px;
padding: 0;
}

#sidebar {
display: none;
}

/* ---------- LINKS, FONTS, ETC ---------- */

a, a:link, a:visited {
color: #29b3f6;
text-decoration: none;
}

a:hover {
color: #599bbb;
}

a img {
border: none;
}

b, s, u, i, strong, em {
color: #124c7c;
}

blockquote {
width: 90%;
padding: 20px;
background: #599bbb;
color: #e9f0f5;
}

input, textarea, select {
margin: 8px 4px;
padding: 4px;
background: #ffffff;
border: 1px solid #29b3f6;
}

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

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

.entry h1, .entry h2, .entry h3 {
color: #124c7c;
text-align: left;
text-transform: uppercase;
font-style: normal;
font-weight: normal;
border-bottom: none;
}

.entry ol {
list-style: decimal-leading-zero;
}

/* ---------- HEADER ---------- */

#header {
padding: 0;
margin: 0;
width: 100%;
height: 140px;
background: #29b3f6;
color: #599bbb;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-style: italic;
text-align: right;
}

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

div#header a:hover {
color: #599bbb;
}

ul.navheader {
padding: 80px 50px 0 0;
margin: 0;
font-size: 12px;
text-transform: lowercase;
}

ul.navheader li {
display: inline;
padding: 0 8px;
}

.title {
padding-right: 60px;
color: #e9f0f5;
font-size: 50px;
font-weight: bold;
letter-spacing: -3px;
text-transform: uppercase;
}

.subtitle {
display: none;
}

/* ---------- ENTRIES ---------- */

#maincontent {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 70%;
text-align: justify;
}

.entry {
margin: 10px 0px 40px 0px;
padding: 0;
}

.entry_text {
margin: 0 30px 0 30px;
line-height: 1.4em;
}

.userpic, .userpicfriends {
position: relative;
float: right;
padding: 5px;
margin: 10px;
z-index: 15;
text-align: center;
background-color: #e9f0f5 !important;
border: 3px double #29b3f6;
}

.userpic img, .userpicfriends img {
width: 80px;
height: 80px;
padding: 2px;
}

.userpicfriends a font {
font-size: 10px;
}

.subject {
padding-left: 3px;
color: #29b3f6;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
letter-spacing: -.02em;
line-height: 1.4em;
text-transform: uppercase;
}

.date {
float: right;
padding-top: 1em;
color: #29b3f6;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-style: italic;
line-height: 1.4em;
text-transform: lowercase;
}

.datesubject {
border-bottom: 3px double #29b3f6;
}

.ljtags {
margin-top: 20px;
font-style: italic;
text-transform: lowercase;
}

.ljtags a {
font-style: normal;
text-transform: none;
}

.currents strong {
color: #29b3f6;
font-style: italic;
font-weight: normal;
text-transform: lowercase;
}

.currentlocation a {
color: #0e0e0e;
}

.comments {
color: #e9f0f5;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.5em;
font-style: italic;
text-align: right;
text-transform: uppercase;
}

.skiplinks {
padding: 0 .1em;
color: #e9f0f5;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.5em;
font-style: italic;
text-align: center;
text-transform: uppercase;
}

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

.commentbox {
margin: 10px 0;
}

.userpiccomment {
position: relative;
float: right;
padding: 5px;
margin: 10px;
text-align: center;
background-color: #e9f0f5 !important;
border: 3px double #29b3f6;
width: 80px;
height: 80px;
}

.datesubjectcomment {
padding: 4px;
color: #124c7c;
font-weight: normal;
text-transform: uppercase;
border-bottom: 3px double #29b3f6;
}

.commentreply {
margin: 10px 5px 15px 5px;
line-height: 1.4em;
}

.commentboxpartial {
border: 3px double #29b3f6;
}

/* ---------- ARCHIVE + TAGS PAGES ---------- */

ul.year {
margin-bottom: 20px;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
text-align: left;
text-transform: uppercase;
border-bottom: 3px double #29b3f6;
}

ul.year li {
padding: 0 .5em;
display: inline;
}

td.yearmonth {
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
text-transform: lowercase;
}

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

table.yeartable td.yearday {
padding: 4px;
background: #29b3f6;
color: #e9f0f5;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.2em;
text-align: center;
text-transform: uppercase;
}

table.yeartable td.yeardate {
padding: 4px;
background: #599bbb;
}

table.yeartable td.yeardate a {
color: #e9f0f5;
}

table.yeartable td.yeardate a:hover {
color: #29b3f6;
}

dt {
color: #29b3f6;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.4em;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
}

dd {
margin: 0.5em 1em;
padding: 4px 0;
}

h2 {
color: #29b3f6;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
font-weight: normal;
text-transform: uppercase;
border-bottom: 3px double #29b3f6;
}

ul.ljtaglist {
list-style-image: url('http://toasty.fanizzle.org/Layouts/bullet.png');
list-style-type: square;
}

ul.ljtaglist li {
padding-top: 0.5em;
}

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

#footer {
width: 100%;
background: #29b3f6;
color: #e9f0f5;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
text-align: center;
text-transform: uppercase;
clear: both;
}

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

div#footer a:hover {
color: #599bbb;
}

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

ul.navfooter li {
display: inline;
padding: 0 1.5em;
margin: 0;
}

.clearfoot {
background: #29b3f6;
clear: both;
}

.clear {
height: 15px;
}

/* ---------- POPUP + NAVSTRIP ---------- */

#lj_controlstrip {
background: #29b3f6;
color: #e9f0f5;
}

#lj_controlstrip b {
text-transform: uppercase;
}

#lj_controlstrip a {
color: #e9f0f5;
text-decoration: underline;
}

#lj_controlstrip a:hover {
color: #599bbb;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks {
border-right: 1px solid #29b3f6;
}

div.ContextualPopup div.Inner {
width: 25em;
margin: -10px 15em 0 0;
padding: 6px;
border: none;
background-color: #29b3f6 !important;
color: #e9f0f5 !important;
font-size: 11px;
}

div.ContextualPopup .Userpic {
border: 5px solid #f1eaea;
}

div.ContextualPopup .Relation {
font-weight: normal;
text-transform: uppercase;
border-bottom: 3px double #e9f0f5;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color: #e9f0f5!important;
font-weight: normal !important;
text-decoration: underline !important;
}

div.ContextualPopup .OnlineStatus {
font-weight: normal;
}

/* ---------- CUSTOM ICONS ---------- */

.entry ul {
list-style-image: url('YOUR_URL/bullet.png');
list-style-type: square;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-color: transparent;
background-repeat: no-repeat;
background: url('YOUR_URL/user.png');
padding: 13px 0px 0 12px;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
width: 0;
height: 0;
background-color:transparent;
background-repeat: no-repeat;
background: url('YOUR_URL/comm.png');
padding: 13px 0px 0 12px;
}

.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: url('YOUR_URL/private.png');
}

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: url('YOUR_URL/locked.png');
}

.subject img[src="http://l-stat.livejournal.com/img/icon_groups.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: url('YOUR_URL/customlock.png');
}On a Sunday MorningDeep Breath/* ------------------------------

STYLESHEET: On a Sunday Morning
S2 STYLE: Flexible Squares
CREATED BY: mashimero.livejournal.com
please credit, do not redistribute

------------------------------ */

body {
margin: 0;
padding: 0;
background: #f6f9f2;
text-align: center;
color: #0e0e0e;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#content {
width: 100%;
margin-top: 0px;
padding: 0;
}

#sidebar {
display: none;
}

/* ---------- LINKS, FONTS, ETC ---------- */

a, a:link, a:visited {
color: #7ace1f;
text-decoration: none;
}

a:hover {
color: #88c149;
}

a img {
border: none;
}

b, s, u, i, strong, em {
color: #3a6b0d;
}

blockquote {
width: 90%;
padding: 20px;
background: #88c149;
color: #f6f9f2;
}

input, textarea, select {
margin: 8px 4px;
padding: 4px;
background: #ffffff;
border: 1px solid #7ace1f;
}

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

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

.entry h1, .entry h2, .entry h3 {
color: #3a6b0d;
text-align: left;
text-transform: uppercase;
font-style: normal;
font-weight: normal;
border-bottom: none;
}

.entry ol {
list-style: decimal-leading-zero;
}

/* ---------- HEADER ---------- */

#header {
padding: 0;
margin: 0;
width: 100%;
height: 140px;
background: #8def22;
color: #88c149;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-style: italic;
text-align: right;
}

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

div#header a:hover {
color: #88c149;
}

ul.navheader {
padding: 80px 50px 0 0;
margin: 0;
font-size: 12px;
text-transform: lowercase;
}

ul.navheader li {
display: inline;
padding: 0 8px;
}

.title {
padding-right: 60px;
color: #f6f9f2;
font-size: 50px;
font-weight: bold;
letter-spacing: -3px;
text-transform: uppercase;
}

.subtitle {
display: none;
}

/* ---------- ENTRIES ---------- */

#maincontent {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 70%;
text-align: justify;
}

.entry {
margin: 10px 0px 40px 0px;
padding: 0;
}

.entry_text {
margin: 0 30px 0 30px;
line-height: 1.4em;
}

.userpic, .userpicfriends {
position: relative;
float: right;
padding: 5px;
margin: 10px;
z-index: 15;
text-align: center;
background-color: #f6f9f2 !important;
border: 3px double #7ace1f;
}

.userpic img, .userpicfriends img {
width: 80px;
height: 80px;
padding: 2px;
}

.userpicfriends a font {
font-size: 10px;
}

.subject {
padding-left: 3px;
color: #7ace1f;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
letter-spacing: -.02em;
line-height: 1.4em;
text-transform: uppercase;
}

.date {
float: right;
padding-top: 1em;
color: #7ace1f;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-style: italic;
line-height: 1.4em;
text-transform: lowercase;
}

.datesubject {
border-bottom: 3px double #7ace1f;
}

.ljtags {
margin-top: 20px;
font-style: italic;
text-transform: lowercase;
}

.ljtags a {
font-style: normal;
text-transform: none;
}

.currents strong {
color: #7ace1f;
font-style: italic;
font-weight: normal;
text-transform: lowercase;
}

.currentlocation a {
color: #0e0e0e;
}

.comments {
color: #f6f9f2;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.5em;
font-style: italic;
text-align: right;
text-transform: uppercase;
}

.skiplinks {
padding: 0 .1em;
color: #f6f9f2;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.5em;
font-style: italic;
text-align: center;
text-transform: uppercase;
}

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

.commentbox {
margin: 10px 0;
}

.userpiccomment {
position: relative;
float: right;
padding: 5px;
margin: 10px;
text-align: center;
background-color: #f6f9f2 !important;
border: 3px double #7ace1f;
width: 80px;
height: 80px;
}

.datesubjectcomment {
padding: 4px;
color: #3a6b0d;
font-weight: normal;
text-transform: uppercase;
border-bottom: 3px double #7ace1f;
}

.commentreply {
margin: 10px 5px 15px 5px;
line-height: 1.4em;
}

.commentboxpartial {
border: 3px double #7ace1f;
}

/* ---------- ARCHIVE + TAGS PAGES ---------- */

ul.year {
margin-bottom: 20px;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
text-align: left;
text-transform: uppercase;
border-bottom: 3px double #7ace1f;
}

ul.year li {
padding: 0 .5em;
display: inline;
}

td.yearmonth {
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
text-transform: lowercase;
}

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

table.yeartable td.yearday {
padding: 4px;
background: #7ace1f;
color: #f6f9f2;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.2em;
text-align: center;
text-transform: uppercase;
}

table.yeartable td.yeardate {
padding: 4px;
background: #88c149;
}

table.yeartable td.yeardate a {
color: #f6f9f2;
}

table.yeartable td.yeardate a:hover {
color: #7ace1f;
}

dt {
color: #7ace1f;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.4em;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
}

dd {
margin: 0.5em 1em;
padding: 4px 0;
}

h2 {
color: #7ace1f;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
font-weight: normal;
text-transform: uppercase;
border-bottom: 3px double #7ace1f;
}

ul.ljtaglist {
list-style-image: url('http://toasty.fanizzle.org/Layouts/bullet.png');
list-style-type: square;
}

ul.ljtaglist li {
padding-top: 0.5em;
}

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

#footer {
width: 100%;
background: #7ace1f;
color: #f6f9f2;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
text-align: center;
text-transform: uppercase;
clear: both;
}

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

div#footer a:hover {
color: #88c149;
}

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

ul.navfooter li {
display: inline;
padding: 0 1.5em;
margin: 0;
}

.clearfoot {
background: #7ace1f;
clear: both;
}

.clear {
height: 15px;
}

/* ---------- POPUP + NAVSTRIP ---------- */

#lj_controlstrip {
background: #8def22;
color: #f6f9f2;
}

#lj_controlstrip b {
text-transform: uppercase;
}

#lj_controlstrip a {
color: #f6f9f2;
text-decoration: underline;
}

#lj_controlstrip a:hover {
color: #88c149;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks {
border-right: 1px solid #7ace1f;
}

div.ContextualPopup div.Inner {
width: 25em;
margin: -10px 15em 0 0;
padding: 6px;
border: none;
background-color: #7ace1f !important;
color: #f6f9f2 !important;
font-size: 11px;
}

div.ContextualPopup .Userpic {
border: 5px solid #f1eaea;
}

div.ContextualPopup .Relation {
font-weight: normal;
text-transform: uppercase;
border-bottom: 3px double #f6f9f2;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color: #f6f9f2!important;
font-weight: normal !important;
text-decoration: underline !important;
}

div.ContextualPopup .OnlineStatus {
font-weight: normal;
}

/* ---------- CUSTOM ICONS ---------- */

.entry ul {
list-style-image: url('YOUR_URL/bullet.png');
list-style-type: square;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-color: transparent;
background-repeat: no-repeat;
background: url('YOUR_URL/user.png');
padding: 13px 0px 0 12px;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
width: 0;
height: 0;
background-color:transparent;
background-repeat: no-repeat;
background: url('YOUR_URL/comm.png');
padding: 13px 0px 0 12px;
}

.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: url('YOUR_URL/private.png');
}

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: url('YOUR_URL/locked.png');
}

.subject img[src="http://l-stat.livejournal.com/img/icon_groups.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: url('YOUR_URL/customlock.png');
}/* ------------------------------

STYLESHEET: Deep Breath
S2 STYLE: Flexible Squares
CREATED BY: mashimero.livejournal.com
please credit, do not redistribute

------------------------------ */

body {
margin: 0;
padding: 0;
background: #ffffff;
text-align: center;
color: #0e0e0e;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#content {
width: 100%;
margin-top: 0px;
padding: 0;
}

#sidebar {
display: none;
}

/* ---------- LINKS, FONTS, ETC ---------- */

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

a:hover {
color: #a8a8a8;
}

a img {
border: none;
}

b, s, u, i, strong, em {
color: #4d4d4d;
}

blockquote {
width: 90%;
padding: 20px;
background: #a8a8a8;
color: #ffffff;
}

input, textarea, select {
margin: 8px 4px;
padding: 4px;
background: #ffffff;
border: 1px solid #a0a0a0;
}

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

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

.entry h1, .entry h2, .entry h3 {
color: #4d4d4d;
text-align: left;
text-transform: uppercase;
font-style: normal;
font-weight: normal;
border-bottom: none;
}

.entry ol {
list-style: decimal-leading-zero;
}

/* ---------- HEADER ---------- */

#header {
padding: 0;
margin: 0;
width: 100%;
height: 140px;
background: #dadada;
color: #a8a8a8;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-style: italic;
text-align: right;
}

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

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

ul.navheader {
padding: 80px 50px 0 0;
margin: 0;
font-size: 12px;
text-transform: lowercase;
}

ul.navheader li {
display: inline;
padding: 0 8px;
}

.title {
padding-right: 60px;
color: #ffffff;
font-size: 50px;
font-weight: bold;
letter-spacing: -3px;
text-transform: uppercase;
}

.subtitle {
display: none;
}

/* ---------- ENTRIES ---------- */

#maincontent {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 70%;
text-align: justify;
}

.entry {
margin: 10px 0px 40px 0px;
padding: 0;
}

.entry_text {
margin: 0 30px 0 30px;
line-height: 1.4em;
}

.userpic, .userpicfriends {
position: relative;
float: right;
padding: 5px;
margin: 10px;
z-index: 15;
text-align: center;
background-color: #ffffff !important;
border: 3px double #a0a0a0;
}

.userpic img, .userpicfriends img {
width: 80px;
height: 80px;
padding: 2px;
}

.userpicfriends a font {
font-size: 10px;
}

.subject {
padding-left: 3px;
color: #a0a0a0;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
letter-spacing: -.02em;
line-height: 1.4em;
text-transform: uppercase;
}

.date {
float: right;
padding-top: 1em;
color: #a0a0a0;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-style: italic;
line-height: 1.4em;
text-transform: lowercase;
}

.datesubject {
border-bottom: 3px double #a0a0a0;
}

.ljtags {
margin-top: 20px;
font-style: italic;
text-transform: lowercase;
}

.ljtags a {
font-style: normal;
text-transform: none;
}

.currents strong {
color: #a0a0a0;
font-style: italic;
font-weight: normal;
text-transform: lowercase;
}

.currentlocation a {
color: #0e0e0e;
}

.comments {
color: #ffffff;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.5em;
font-style: italic;
text-align: right;
text-transform: uppercase;
}

.skiplinks {
padding: 0 .1em;
color: #ffffff;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.5em;
font-style: italic;
text-align: center;
text-transform: uppercase;
}

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

.commentbox {
margin: 10px 0;
}

.userpiccomment {
position: relative;
float: right;
padding: 5px;
margin: 10px;
text-align: center;
background-color: #ffffff !important;
border: 3px double #a0a0a0;
width: 80px;
height: 80px;
}

.datesubjectcomment {
padding: 4px;
color: #4d4d4d;
font-weight: normal;
text-transform: uppercase;
border-bottom: 3px double #a0a0a0;
}

.commentreply {
margin: 10px 5px 15px 5px;
line-height: 1.4em;
}

.commentboxpartial {
border: 3px double #a0a0a0;
}

/* ---------- ARCHIVE + TAGS PAGES ---------- */

ul.year {
margin-bottom: 20px;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
text-align: left;
text-transform: uppercase;
border-bottom: 3px double #a0a0a0;
}

ul.year li {
padding: 0 .5em;
display: inline;
}

td.yearmonth {
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
text-transform: lowercase;
}

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

table.yeartable td.yearday {
padding: 4px;
background: #a0a0a0;
color: #ffffff;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.2em;
text-align: center;
text-transform: uppercase;
}

table.yeartable td.yeardate {
padding: 4px;
background: #a8a8a8;
}

table.yeartable td.yeardate a {
color: #ffffff;
}

table.yeartable td.yeardate a:hover {
color: #a0a0a0;
}

dt {
color: #a0a0a0;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 1.4em;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
}

dd {
margin: 0.5em 1em;
padding: 4px 0;
}

h2 {
color: #a0a0a0;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
font-weight: normal;
text-transform: uppercase;
border-bottom: 3px double #a0a0a0;
}

ul.ljtaglist {
list-style-image: url('http://toasty.fanizzle.org/Layouts/bullet.png');
list-style-type: square;
}

ul.ljtaglist li {
padding-top: 0.5em;
}

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

#footer {
width: 100%;
background: #a0a0a0;
color: #ffffff;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 2em;
font-style: italic;
text-align: center;
text-transform: uppercase;
clear: both;
}

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

div#footer a:hover {
color: #a8a8a8;
}

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

ul.navfooter li {
display: inline;
padding: 0 1.5em;
margin: 0;
}

.clearfoot {
background: #a0a0a0;
clear: both;
}

.clear {
height: 15px;
}

/* ---------- POPUP + NAVSTRIP ---------- */

#lj_controlstrip {
background: #dadada;
color: #ffffff;
}

#lj_controlstrip b {
text-transform: uppercase;
}

#lj_controlstrip a {
color: #ffffff;
text-decoration: underline;
}

#lj_controlstrip a:hover {
color: #a8a8a8;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks {
border-right: 1px solid #a0a0a0;
}

div.ContextualPopup div.Inner {
width: 25em;
margin: -10px 15em 0 0;
padding: 6px;
border: none;
background-color: #a0a0a0 !important;
color: #ffffff !important;
font-size: 11px;
}

div.ContextualPopup .Userpic {
border: 5px solid #f1eaea;
}

div.ContextualPopup .Relation {
font-weight: normal;
text-transform: uppercase;
border-bottom: 3px double #ffffff;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color: #ffffff!important;
font-weight: normal !important;
text-decoration: underline !important;
}

div.ContextualPopup .OnlineStatus {
font-weight: normal;
}

/* ---------- CUSTOM ICONS ---------- */

.entry ul {
list-style-image: url('YOUR_URL/bullet.png');
list-style-type: square;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-color: transparent;
background-repeat: no-repeat;
background: url('YOUR_URL/user.png');
padding: 13px 0px 0 12px;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
width: 0;
height: 0;
background-color:transparent;
background-repeat: no-repeat;
background: url('YOUR_URL/comm.png');
padding: 13px 0px 0 12px;
}

.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: url('YOUR_URL/private.png');
}

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: url('YOUR_URL/locked.png');
}

.subject img[src="http://l-stat.livejournal.com/img/icon_groups.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: url('YOUR_URL/customlock.png');
}

Image zip files (right-click save):
Burn My Dread | Touch the Sky | On a Sunday Morning | Deep Breath

Please save and upload the images to your own server, then replace YOUR_URL with, well, your own url. All the custom images are at the very bottom.

Installing:

1. Go to Journal Style and make sure you're using the S2 style.
2. Apply the Flexible Squares layout. If you're using a plus account, choose Vertical Ad Placement.
3. Click on Customize Options, then Custom CSS. Check No for both drop-down boxes and paste the CSS into the box. Save, and you're done!

I'm not that great with CSS so if anything's broken, please tell me and I'll try and fix it. Feel free to change the colours or swap icons, stuff like that, but please remember to leave the credit in.

layout-making resources and credits | graphic-making resources