S2 Flexisquares: Fizz Pop

[papercolour]

Screenshot | Live Preview

S2 Flexible Squares
Tested Firefox and IE
Works for Basic, Plus, and Paid accounts
Please credit novaless if using


/*------------------------------------/*
Fizz Pop by novaless.lj.com
For S2 Flexible Squares
------------------------------*/

/*------------------------------------
General
------------------------------*/

a {
color: #b170c3;
text-decoration: none;
}

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

blockquote {
padding: 10px;
border: 1px solid #e4e4e4;
background-color: #ffffff;
}

blockquote:hover {
padding: 10px;
border: 1px solid #FF8282;
background-color: #ffffff;
}

/*------------------------------------
Body
------------------------------*/

body {
background-color: #FF5E5E;
text-align: justify;
color: #777;
font-family: arial;
font-size: 12px;
line-height: 16px;
margin: 0;
background-image: url();
background-position: ;
background-repeat: no-repeat;
}

.clear {
display: none;
}

#content {
width: auto;
margin: auto;
border-top: 25px solid #EEFF00;
border-bottom: 25px solid #EEFF00;
margin: 120px auto 120px auto;
background-color: #fff;
}

#maincontent {
margin: 20px 240px auto auto;
border-right: 1px solid #f0f0f0;
}

.skiplinks {
text-align: center;
background-color: #fff;
border-bottom: 1px solid #f0f0f0;
padding: 10px;
margin-bottom: 20px;
color: #dddddd;
}

/*------------------------------------
Header
------------------------------*/

#header {
display: none;
}

/*------------------------------------
Footer
------------------------------*/

.clearfoot {
display: none;
}

div#footer a, div#footer a:link, div#footer a:visited {
color: #b170c3;
font-size: 14px;
text-transform: uppercase;
padding: 6px;
}

div#footer a:hover {
color: #58b3c4;
}

#footer {
width: auto;
background-color: #fff;
border-right: 1px solid #f0f0f0;
padding: 20px 0 20px 0;
margin: auto 240px auto auto;
clear: both;
}

li.viewing {
font-size: 14px;
text-transform: uppercase;
color: #FF8282;
}

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

ul.navfooter li {
display: inline;
list-style-type: none;
}

/*------------------------------------
Entry
------------------------------*/

.comments {
color: #ffffff;
text-align: right;
margin-top: 20px;
border-top: 1px solid #e4e4e4;
padding-top: 10px;
}

.date {
color: #FF5E5E;
font-size: 14px;
float: right;
}

.datesubject {
background-color: #fff;
text-align: right;
text-transform: uppercase;
padding: 20px 0 10px 20px;
margin: auto 20px auto 20px;
border-bottom: 1px solid #e4e4e4;
}

div.comments a, div.comments a:link, div.comments a:visited {
text-align: right;
font-size: 12px;
color: #b170c3;
text-transform: uppercase;
text-decoration: none;
}

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

.entry {
color: #777;
font-family: arial;
font-size: 12px;
line-height: 16px;
background-color: #ffffff;
padding: 20px;
}

.entry_text {
margin: 0 0 0 160px;
}

.entry ol, .entry ul li {
margin-top: 0px;
margin-bottom: 0px;
}

.ljtags {
margin-top: 20px;
}

.ljtaglist {
list-style-type: none;
}

.subject {
font-size: 14px;
color: #FF5E5E;
font-weight: bold;
}

.subject a, .subject a:link, .subject a:visited and .subject a:hover {
font-size: 30px;
color: #b170c3;
}

/*------------------------------------
Sidebar
------------------------------*/

.defaultuserpic {
display: none;
text-align: center;
margin: 0 auto 20px auto;
}

.defaultuserpic img {
padding: 10px;
border: 1px solid #e4e4e4;
}

li.sbaritem {
list-style-type: none;
margin: 0px;
}

li.sbaritem a {
display: block;
list-style-type: none;
font-size: 16px;
text-transform: uppercase;
padding: 18px;
background-image: url(http://i26.tinypic.com/2zfrczk.gif);
background-repeat: no-repeat;
margin-bottom: 5px;
}

li.sbaritem a:hover {
background-color: #f0f0f0;
}

li.sbartitle {
display: none;
}

.sbarbody2 {
padding-bottom: 20px;
}

.sbarlist {
padding: 0px;
margin: 0px;
}

#sidebar {
float: right;
width: 200px;
padding: 20px;
border-left: 1px solid #f0f0f0;
}

.calendar {
display: none;
}

/*------------------------------------
Currents
------------------------------*/

.currents {
margin: 20px 0 0 160px;
color: #aaa;
}

.currentmood {
background: url(http://i26.tinypic.com/ny5u1u.gif) no-repeat left center;
padding-left: 16px;
}

.currentmusic {
background: url(http://i28.tinypic.com/2wqzrm1.gif) no-repeat left center;
padding-left: 16px;
}

.currentlocation {
display:none;
}

.currents strong {
font-weight: normal;
}

/*------------------------------------
Userpics
------------------------------*/

.userpic {
position: relative;
float: left;
margin: 0 0 0 20px;
text-align: right;
z-index: 15;
background-color: #ffffff !important;
color: #dddddd;
}

.userpic img {
padding: 20px;
border: 1px solid #e4e4e4;
}

.userpicfriends {
position: relative;
float: left;
margin: 0 0 0 20px;
text-align: center;
z-index: 15;
background-color: #ffffff !important;
color: #dddddd;
}

.userpicfriends img {
padding: 20px;
border: 1px solid #e4e4e4;
margin-bottom: 5px;
}

.userpicfriends a font {
color: #b170c3;
}

.userpicfriends a:hover font {
color: #58b3c4;
}

/*------------------------------------
Tinyicons
------------------------------*/

.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] {
width: 0;
height: 0;
padding: 13px 12px 0px 0px;
background: url(http://i28.tinypic.com/30de3pz.gif);
background-repeat: no-repeat;
}

.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"] {
width: 0;
height: 0;
padding: 13px 12px 0px 0px;
background: url(http://i32.tinypic.com/29zy1it.gif);
background-repeat: no-repeat;
}

.ljuser img {
display: none;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
display: none;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
display: none;
}

/*------------------------------------
Contextual Popup
------------------------------*/

div.ContextualPopup {
margin: 5px 0 0 20px;
font: normal 12px arial !important;
}

div.ContextualPopup img {
border: 0;
}

div.ContextualPopup div.Inner {
background-color: #ffffff !important;
color: #777 !important;
border: 1px solid #ddd;
padding: 10px;
width: 20em;
}

div.ContextualPopup .Content {
padding: 2px 4px 6px 4px;
margin-right: 50px;
line-height: 1.4;
}

div.ContextualPopup .Relation {
font-weight: bold !important;
}

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

div.ContextualPopup .Userpic {
padding: 4px 4px 0 0;
}

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

/*------------------------------------
Comment Page
------------------------------*/

.box {
clear: left;
padding: 20px;
width: auto;
}

.commentbox {
border: 1px solid #e4e4e4;
padding: 20px;
margin-bottom: 10px;
}

.commentboxpartial {
border: 1px solid #e4e4e4;
padding: 10px;
margin-bottom: 10px;
}

.commentreply {
margin-top: 10px;
}

.datesubjectcomment {
background-color: #f0f0f0;
}

input, textarea {
font-family: arial;
font-size: 12px;
color: #777;
border: 1px solid #e4e4e4;
background-color: #fff !important;
}

.reply {
position: relative;
}

.userpiccomment {
position: relative;
z-index: 15;
float: left;
margin: 0 10px 0 0;
border: 10px solid #f0f0f0;
}

#qrform table {
border: 1px solid #e4e4e4 !important;
padding: 20px;
margin: 10px auto 20px auto;
}

/*------------------------------------
Calendar Page
------------------------------*/

ul.year {
text-align: center;
margin-bottom: 20px;
border-bottom: 1px solid #f0f0f0;
padding-top: 10px;
padding-bottom: 10px;
}

ul.year li {
display: inline;
list-style-type: none;
}

table.yeartable td.yeardate {
border: 1px solid #e4e4e4;
}

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

table.yeartable {
border: 1px solid #f0f0f0;
padding: 20px;
}

Installation:

1. Choose "Flexible Squares" as your theme.
   
2. Click on "Customize Your Theme" and go to the "Custom CSS" section.
   
3. Select "no" in all three drop-down menus, and insert the code into the custom stylesheet box.

Additional Notes:

1. There is no header, so the header links are defined in your link list.
   
2. To add a header image, you can put it into the body section here:
   
   
   Be sure to increase the top margin in the #content section to fit the height of your header image. The background-position can be something like "top left" or "top center" or "top right."

Three of the colors used on this layout are from the Light and Airy palette by adkre8r at Colourlovers.
Enjoy? :D