[Layout] Pnish - Flexible Squares S2 - For pnish's layout contest

[nabichansaotome]

I'm so sorry for my recent and unnerving long absence. Currently I'm out of internet, without a sign of when I'll get it back, so testing the codes I've made in the last months is out of the question. But I'm selfish and I really wanted to participate in pnish's layout contest, so I couldn't help it. I hope you get to like it too. Criticism and feedback are more than welcome, encouraged.

For the One Piece fans, hope to see you soon with that set of layouts I promised you long ago.



[ Full preview ]

Style: Flexible Squares S2
Userpics and sidebar enabled, works with all accounts.


Images
Please, do save and upload the following pictures to your own account. Then replace the code image links with your own.

Background | Header | Date | Tags | Separator

/* Cleaned CSS: */

body {
background-color: #567A8B;
background-image: url("http://img205.imageshack.us/img205/9729/backgroundn.png");
text-align: center;
color: #585858;
font-family: "Verdana" Helvetica, sans-serif;
font-size: 10px;
margin: 20px 0 20px 0;
}

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

a:hover {
color: #FFA23F;
text-decoration: underline;
}

p, td, blockquote {
font-size: 10px;
}

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

/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/

#content
{
width: 980px;
margin-top: 0px;
margin-left: auto; margin-right: auto;
background-color: #FFFFFF;
background-image: url("http://img205.imageshack.us/img205/8892/indexf.png");
background-repeat: no-repeat;
background-position: top-left;
border-style: solid;
border-width: 0px 14px 0px 0px;
border-color: #2579A1;
padding: 0px;
}

#maincontent {
margin-top: 5px;
font-family: "Verdana" Helvetica, sans-serif;
font-size: 10px;
background-color: #FFFFFF;
color: #585858;
border-width: 0px;
margin-right: 15px;
margin-left: 375px;
text-align: justify;
}

#sidebar {
margin-top: 290px;
background-color: #FFFFFF;
border-width: 0px;
font-family: "Verdana" Helvetica, sans-serif;
color: #585858;
width: 230px;
margin-left: 70px;
margin-right: auto;
float: left;
text-align: center;
position: center;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/

#header {
margin-left: 365px;
margin-right: auto;
padding: 20px;
text-align: right;
font-family: "Century Gothic" Helvetica, sans-serif;
font-size: 15px;
letter-spacing: 2px;
border-width: 0px;
background-color: transparent;
color: #585858;
text-transform: lowercase;
position: right;
font-weight: bold;
}

/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #FFAD1D;
font-family: "Century Gothic" Helvetica, sans-serif;
font-size: 15px;
letter-spacing: 2px;
font-weight: bold;

}

div#header a:hover, div#footer a:hover {
color: #FFAD1D;
text-decoration: none;
font-family: "Century Gothic" Helvetica, sans-serif;
font-size: 15px;
letter-spacing: 2px;
font-weight: bold;

}

/*title and subtitle*/
.title {
font-family: "Book Antiqua", sans-serif;
font-size: 22px;
font-weight: normal;
line-height: 200%;
top: 10px;
font-weight: bold;
font-style: italic;
text-align: right;
background-color: transparent;
position: right;

}

.subtitle{
display: none;
font-family: "Book Antiqua", sans-serif;
font-size: 14px;
font-weight: normal;
top: 10px;
font-style: italic;
background-color: transparent;
position: right;
text-align: right;

}

/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/

/* header -- links to views; title of journal; subtitle of journal */

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

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

li.view {
border-bottom: 2px dotted #FFAD1D;
}

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

.entry {
padding: 5px;
background-color: #FFFFFF;
color: #585858;
font-family: "Verdana" Helvetica, sans-serif;
text-align: justify;
border-width: 0px;
}

.userpic {
position: relative;
float: right;
background-color: #FFFFFF !important;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 0px;
color: #3F779B;
}

.date {
height: 24px;
width: 240px;
color: #969696;
padding: 5px;
font-family: "Verdana" Helvetica, sans-serif;
font-size: 9px;
text-transform: lowercase;
text-align: center;
Background-color: #FFFFFF;
Background-image: url(http://img152.imageshack.us/img152/5559/date.png);
Background-repeat: no-repeat;
Background-position: top-right;
Position: top-right;
}

.subject {
color: #88AF8D;
background-color: #FFFFFF;
font-family: "Century Gothic" Helvetica, sans-serif;
font-size: 16px;
text-align: left;
padding: 10px;
font-weight: bold;
border-width: 0px 0px 1px 0px;
border-color: #5F7E9E;
border-style: solid;
}

.subject a, .subject a:link, .subject a:visited {
color: #3F779B;
font-family: "Century Gothic" Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;

}

.subject a:hover {
color: #739D5E;
font-family: "Century Gothic" Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;

}

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

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

.entry a, a:link, entry a:visited {
color: #3F779B;
text-decoration: none;
}

.entry a:hover {
color: #739D5E;
text-decoration: none;
}

.ljtags {
Height: 25px;
Margin-left: 40px;
Margin-right: auto;
Margin-top: 20px;
Padding-left: 30px;
Top: 5px;
background-color: #FFFFFF;
Background-image: url(http://img152.imageshack.us/img152/5314/tagsr.png);
Background-repeat: no-repeat;
width: 500px;
color: #949494;
border: 0px;
font-family: "Century Gothic" Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}

.ljtags a {
Color: #949494;
font-family: "Verdana" Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
}

.ljtags a:visited {
Color: #739D5E;
font-family: "Verdana" Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
}

.ljtags a:hover {
font-weight: bold;
color: #3F779B;
font-family: "Verdana" Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
font-size: 10px;
}

.tagcategory0 {
Font-size: 9px;
}

/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/

.currents, .currentmood, .currentmusic {
font-family: "Verdana" Helvetica, sans-serif;
font-size: 10px;
Color: #949494;
}

/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/

.comments {
font-family: "Century Gothic" Helvetica, sans-serif;
font-size: 14px;
text-align: right;
background-color: #FFFFFF;
color: #88AF8D;
padding: 7px 0px 0px 0px;
position: relative;
top: 0px;
text-transform: uppercase;
border-width: 1px 0px 0px 0px;
border-color: #5F7E9E;
border-style: solid;
}

div.comments a, div.comments a:link, div.comments a:visited {
color: #88AF8D;
font-family: "Century Gothic" Helvetica, sans-serif;
font-size: 14px;

}

div.comments a:hover {
color: #3F779B;
text-decoration: none;
font-family: "Century Gothic" Helvetica, sans-serif;
font-size: 14px;
}

/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/

.separator{
background-image: url(http://img152.imageshack.us/img152/6766/separator.png);
background-repeat: no-repeat;
background-position: center;
height: 60px;
padding: 20px;
}

/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/

.userpicfriends {
position: relative;
float: right;
background-color: #FFFFFF !important;
padding: 5px;
margin: 10px;
text-align: center;
border-width: 0px;
font-family: "Verdana" Helvetica, sans-serif;
color: #3F779B !important;
font-size: 9px;
z-index: 15;
}

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

.defaultuserpic {
text-align: center;
}

.sbarheader {
padding: 0px 3px 0px 3px;
}

.sbarbody {
padding: 0px 3px 0px 3px;
}

.sbarbody2 {
padding: 0 3px 0 3px;
}

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

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

li.sbaritem, .tagcloud
{
padding-left: 5px;
padding-right: 5px;
text-align: justify;
list-style: none;
font-size: 10px;
}

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

table.calendar {
Padding: 5px;
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
Padding: 5px;
border-color: #5F7E9E;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Book Antiqua", sans-serif;
font-size: 15px;
font-style: italic;
}

.sbarcalendarposts {
border-color: #5F7E9E;
border-width: 1px;
border-style: solid;
background-color: #FFFFFF;
color: #585858;
text-align: center;
font-family: "Book Antiqua", sans-serif;
font-size: 15px;
font-weight: bold;
font-style: italic;
padding: 5px;
}

/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/

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

li.sbaritem
{
padding-left: 10px;
list-style: none;
border-style: dashed;
border-width: 0px 0px 1px 0px;
border-color: #5B5B5B;
font-size: 10px;
font-family: "Verdana" Helvetica, sans-serif;
color: #585858;
text-transform: lowercase;
margin-bottom: 5px;
margin-top: 5px;

}

li.sbartitle
{
padding-left: 10px;
list-style: none;
background-color: #ACC5D0;
font-size: 12px;
font-family: "Verdana" Helvetica, sans-serif;
color: #585858;
margin-bottom: 5px;
margin-top: 5px;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 2px;
}

li.sbaritem hover
{
border-style: dashed;
border-width: 0px 0px 1px 0px;
border-color: #5B5B5B;
background-color: #FFDC63;
}

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

#footer {
width: 585px;
margin-left: 375px;
margin-right: auto;
text-align: center;
font-family: "Century Gothic" Helvetica, sans-serif;
font-size: 15px;
letter-spacing: 2px;
background-color: #FFFFFF;
color: #FFAD1D;
border-width: 0px;
z-index: 100;
clear: both;
font-weight: bold;
text-transform: lowercase;
}

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

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

ul.navfooter li a {
font-family: "Century Gothic" Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 2px;
display: inline;
color: #FFAD1D;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/

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

ul.year li {
display: inline;
}

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

table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #ACC5D0;
border-width: 1px;
border-style: solid;
border-color: #5F7E9E;
}

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

td.yearmonth {
border-style: none;
}

/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/

.datesubjectcomment {
background-color: #FFFFFF;
color: #585858 !important;
padding: 5px;
margin-top: 20px;
}

.userpiccomment {
position: relative;
border-width: 0px;
background-color: #FFFFFF !important;
padding: 5px;
margin: 10px;
z-index: 15;
float: right;
border-width: 0px;
}

.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #5F7E9E;
padding: 10px;
margin-left: 5px;
margin-right: auto;
color: #585858;
}

input, textarea {
background-color: #567A8B;
color: #FFFFFF;
}

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

.reply {
position: relative;
margin: 20px;
padding: 10px;
text-align: left;
font-family: "Verdana" Helvetica, sans-serif;
font-size: 10px;
line-height: 125%;
background-color: #FFFFFF;
color: #585858;
}

.replytosubject {
Color: #88AF8D;
font-size: 14px;
padding: 5px;
font-family: "Century Gothic" Helvetica, sans-serif;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 10px;
font-family: "Verdana" Helvetica, sans-serif;
color: #585858;
}

.commentbox {
border-color: #1D1159;
border-width: 1px solid;
padding: 10px;
margin: 10px;
background-color: #FFFFFF;
color: #585858;
}

.commentsubject {
font-family: "Century Gothic" Helvetica, sans-serif;
Font-size: 12px;
Color: #88AF8D;
}

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

.datesubjectcomment a:hover {
color: #739D5E;
}

.commentboxpartial {
border-color: #5F7E9E;
border-width: 0px;
border-style: dotted;
padding: 10px;
margin: 10px;
background-color: #FFFFFF;
}

.commentinfo {
background-color: #FFFFFF;
margin-top: 10px;
width: 100%;
}

.replytoposter {
color: #585858;
text-decoration: none;
}

.replytoposter a:hover {
color: #739D5E;
text-decoration: none;
}

.replytoposter a:link, a:visited {
Color: #3F779B;
text-decoration: none;
}

.skiplinks {
font-family: "Century Gothic" Helvetica, sans-serif;
font-size: 10px;
text-align: center;
color: #FFAD1D;
}

.skiplinks a:link, a:visited {
font-family: "Century Gothic" Helvetica, sans-serif;
font-size: 10px;
Color: #FFAD1D;
}

.skiplinks a:hover {
font-family: "Century Gothic" Helvetica, sans-serif;
font-size: 12px;
Color: #739D5E;
}

/*--------------------------------------------
Misc
-----------------------------------------*/

.clear {
height: 15px;
}

Instructions

· Feel free to either friend or join this community for future updates ♥
· Credit toledan_night if using, please.
· Resources

EDIT: I've corrected the code. So sorry for the inconveniences. *thud*