S2 Flexible Squares: Sail Away

[squid_stick]

style: S2 Flexible Squares
sidebar: topbar
browsers: FF
ads: horizontal

...apologies! I bring more cutesy-ness....



img



INSTALLING THE LAYOUT

>> Choose Journal Style.

>> Select new theme -- flexible squares.

>> Select ads- horizontal, two column (sidebar on left).

>> Go to Customize your Theme. Select display tags- cloud.

>> Upload tiny icons and header to your own server. Open CSS code and replace SPAM-URL with your new URL.

>> Custom CSS :

• Use layout's stylesheet(s): No
• Use layout's stylesheet(s) when including custom external stylesheet: No
• Use external stylesheet: No
• Custom external stylesheet URL: leave this box blank!

>> cut and paste CSS code into Custom Stylesheet box.

XD!!

/*---------------------
S2 FLEXIBLE SQUARES
made by http://squid-stick.livejournal.com/
---------------------*/

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

body {
background-color: #ffffff;
text-align: center;
color: #878787;
font-family: "Verdana", sans-serif;
font-size: 10px;
margin: 20px 0 20px 0;
}

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

a:hover {
color: #878787;
}

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

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

b, i, s, u {
color: #7faf11;
}

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

#content
{
width: 480px;
margin-left: auto; margin-right: 0px;
background-color: #ffffff;
padding: 15px;
margin-top: -300px;
}

#maincontent {
margin-top: 0px;
font-family: "Verdana", sans-serif;
font-size: 10px;
background-color: #ffffff;
color: #878787;
margin-left: auto;
text-align: left;
}

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

.headerimage {
position: relative;
margin-left: auto;
margin-right: 500px;
width: 432px;
height: 500px;
background-image: url('SPAM-URL/SailAwayHeader.jpg');
background-repeat: no-repeat;
}

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

#header {
padding: 10px 0px 20px 0px;
margin: 0px;
text-align: right;
font-family: "times", serif;
font-size: 18px;
letter-spacing: -1px;
background-color: #ffffff;
color: #878d87;
}

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

div#header a:hover, div#footer a:hover {
color: #7faf11;
text-decoration: none;
border-left: 4px solid #878787;
background-color: #transparent;
}

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

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

li.view {
color: #7faf11;
text-transform: uppercase;
}

li.viewing {
color: #7faf11;
text-transform: uppercase;
}

.title {
display: none;
}

.subtitle{
display: none;
}

/*---------------------
SIDEBAR
---------------------*/

#sidebar {

padding: 15px 15px 0px 15px;
background-color: #transparent;
font-size: 9px;
font-family: "Verdana", sans-serif;
color: #878d87;
width: auto;
float: centre;
text-align: left;
border: 1px #cccccc dashed;
-moz-border-radius: 2.5%;
margin-bottom: 50px;
}

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

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

.defaultuserpic {
display: none;
}

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

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

#sidebar_summary li.sbaritem {
display: none;
}

table.calendar {
display: none;
}

.sbarcalendar {
display: none;
}

.sbarcalendarposts {
display: none;
}

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

li.sbaritem, .tagcloud
{
padding-left: 20px;
list-style: none;
display: inline;
}

li.sbartitle
{
display: none;
}

.tagcloud span a {font-size: 7pt;}

/*---------------------
TRANSPARENT IMG
---------------------*/

img:hover {

filter: alpha(opacity=70);
moz-opacity: .70;
opacity: .70;
}

/*---------------------
MAIN, ENTRIES
---------------------*/

.subcontent {
}

.entry {
margin: 5px 5px 5px 30px;
padding: 10px;
background-color: #ffffff;
color: #878787;
font-family: "Verdana", sans-serif;
font-size: 10px;
text-align: left;
}

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

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

.userpic {
position: relative;
float: left;
background-color: #transparent;
padding: 10px;
margin-top: 60px;
margin-left: -150px;
margin-right: 10px;
z-index: 15;
border: 1px #cccccc dashed;
-moz-border-radius: 2.5%;
}

.userpicfriends {
position: relative;
float: left;
padding: 10px;
margin-top: 60px;
margin-left: -150px;
margin-right: 10px;
text-align: center;
border: 1px #cccccc dashed;
-moz-border-radius: 2.5%;
background-color: #ffffff !important;
font-family: "Verdana", sans-serif;
font-size: 9px;
z-index: 15;
}

.userpicfriends img {
border: 0px solid #F0F0F0;
}

.userpicfriends a font {
color: #487fbd;
}

.date {
color: #878787;
font-family: "Verdana", sans-serif;
font-size: 9px;
margin:0px 0px -30px 30px;
}

.subject {
margin:0px 0px -20px 10px;
padding: 0px;
color: #487fbd;
font-family: "times", serif;
font-size: 18px;
letter-spacing: -1px;
}

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

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

.datesubject {
margin-top: 15px;
background-color: #ffffff;
padding: 6px;
border-bottom: 1px #e2e2e2 solid;
-moz-border-radius: 2.5%;
}

.currents strong{
font-weight:normal;
}
.currents, .currentmood .currentmusic .current location {
font-family: "Verdana", sans-serif;
font-size: 9px;
background-color: #ffffff;
border: 1px #cccccc dashed;
-moz-border-radius: 2.5%;
padding: 5px;
margin-right: 180px;
}

.currentlocation {
padding-left: 15px;
background: url('SPAM-URL/icon-loca.gif') 0px 2px no-repeat;
}

.currentmood {
background: url('SPAM-URL/icon-mood.gif') 0px 2px no-repeat;
background-position: center left;
padding-left: 15px;
}

.currentmusic {
background: url('SPAM-URL/icon-music.gif') 0px 2px no-repeat;
padding-left: 15px;
}

.comments {
font-family: "Verdana", sans-serif;
font-size: 9px;
text-align: right;
background-color: #ffffff;
padding: 10px;
margin-left: 150px;
position: relative;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #878787;
text-transfom: lowercase;
}

div.comments a:hover {
color: #7faf11;
text-transform: lowercase;
border-left: 4px solid #878787;
}

.ljtags {
margin:10px 0px 0px 10px;
background-color:#transparent;
width:300px;
padding:0px 5px 5px 12px;
color:#878787;
font-size:9px;
background: url('SPAM-URL/icon-tag.gif') 0px 2px no-repeat;
}

/*---------------------
ENTRIES, REPLY PAGES
---------------------*/

.datesubjectcomment {
background-color: #ffffff;
padding: 5px;
margin-top: 20px;
}

.userpiccomment {
position: relative;
border: 1px #cccccc dashed;
-moz-border-radius: 2.5%;
background-color: #ffffff;
padding: 10px;
margin: 20px 0px 0px -130px;
z-index: 15;
float: left;
}

.box {
padding-left: 70px;
clear: left;
}

input, textarea, select {
font-family: "Verdana";
background-color: #ffffff;
font-size: 9px;
color: #487fbd;
border: 1px solid #cccccc;
padding: 5px;
}

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

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 9px;
background-color: #ffffff;
color: #487fbd;
}

.replytosubject {
font-weight: bold;
}

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

.commentbox {
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

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

.datesubjectcomment a:hover {
color: #7faf11;
}

.commentboxpartial {
border-color: #cccccc;
border-width: 1px;
border-style: dashed;
-moz-border-radius: 2.5%;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

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

.skiplinks {

color: #ffffff;
text-align: left;
text-transform: uppercase;
}

.skiplinks a:link, .skiplinks a:visited { color: #7faf11;}

.skiplinks a:hover {color: #878787; border-left: 4px solid #878787;}

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

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

ul.year li {
display: inline;
}

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

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: dashed;
border-color: #cccccc;
}

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

td.yearmonth {
border-style: none;
}

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

#footer {
text-align: center;
font-family: "times", serif;
font-size: 12px;
letter-spacing: -1px;
background-color: #ffffff;
color: #878787;
z-index: 100;
clear: both;
text-transform: lowercase;
}

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

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

.clearfoot {
clear: both;
}

/*---------------------
MISC
---------------------*/

.clear {
height: 15px;
}

.separator{
/* for formatting separators between entries */
height: 35px;
}

* html div.subcontent {
/* fixes an IE reply page bug */
height: 1%;
clear: none;
}

* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
border-width: 1px;
border-style: solid;
border-color: #ffffff;
background-color: #FFFFFF;
}

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

.ljtaglist {

color: #878787;
list-style-type: none;
text-align: left;
margin-left: 150px;

}

h2 {
margin-left: 180px;
text-transform: uppercase;

}

/*---------------------
TINY ICONS
---------------------*/

.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{

width: 0;
height: 0;
padding: 18px 13px 0px 0px;
background: url(SPAM-URL/prot.jpg);

}

.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{

width: 0;
height: 0;
padding: 18px 13px 0px 0px;
background: url(SPAM-URL/priv.jpg);

}

.ljuser img {

width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
background-image: url(SPAM-URL/user.jpg);
padding: 10px 10px 0 2px !important;

}

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {

background-color:transparent;
background-image: url(SPAM-URL/user.jpg);
padding: 10px 10px 0 0px !important;

}

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {

background-color:transparent;

background-image: url(SPAM-URL/comm.jpg);
padding: 10px 10px 0 0px !important;

}

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

div.ContextualPopup div.Inner {
background:FFFFFF!important;
color: #487fbd!important;
border: 1px #cccccc dashed;
-moz-border-radius: 2.5%;
padding:10px;
width: 250px;
}

div.ContextualPopup .Content {
padding:7px 10px 7px 10px;
margin-right:80px;
line-height: 1.4;
background:#ffffff;
font-family:"verdana", sans-serif;
font-size: 9px;
}

div.ContextualPopup .Userpic {
padding:10px;
background:#ffffff;
margin:0px;
}

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

div.ContextualPopup .Relation {
font-family:"times", serif;
text-transform: lowercase;
color: #878787;
font-size: 14px;
letter-spacing:-1px;
border-bottom: 1px dashed #cccccc;
margin-bottom:4px;
padding-bottom:2px;
}

Image Credit