S2 Flexible Squares // Ocean Breeze

[resplandor]

New Stylesheet inspired by the upcoming warmt of the summer (Even though where I live we have summer all year long). I hope you guys like this one because I specially love it!

Style: S2 Flexible Squares
Website: It looks better if you disable it.
Default Icon: Optional
Best view: 1024x768 and up
Browser(s) Compatible: IE (Doesn't look exactly like the preview, but works correctly) // Firefox // Opera
Nav Bar?: Yes
Custom Comment Page?: No
Work best with: Free & Paid account



Live Preview



/*---------------------------------------------------
Stylesheet By: Resplandor@livejournal.com
Style: S2 Flexible Squares
Works best with: Free & Paid accounts
Browsers: Firefox // IE // Opera.
-----------------------------------------------------*/

body {
background-color: #ffffff;
text-align: left;
color: #666666;
font-family: "tahoma", "verdana", sans-serif;
font-size: 7pt;
margin: 20px 0 20px 0;
}

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

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

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://i76.photobucket.com/albums/j7/heaven_sent22/user.gif);
padding: 13px 7px 0 2px;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i76.photobucket.com/albums/j7/heaven_sent22/user.gif);
padding: 13px 7px 0 2px;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://img252.imageshack.us/img252/8001/arrow1tv1.gif);
padding: 10px 8px 0 2px;
}

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

blockquote {
background-color: #fafafa;
border: 1px solid #dddddd;
padding: 10px;
}

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

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

#content
{
border-top: 4px solid #fafafa;
border-left: 1px dotted #dddddd;
width: 740px;
margin-left: auto; margin-right: auto;
background-color: #ffffff;
padding-top: 5px;
}

#maincontent {
border-right: 2px solid #fafafa;
font-family: "tahoma", "verdana", sans-serif;
font-size: 11px;
background-color: #ffffff;
color: #666666;
padding-right: 30px;
margin-right: 197px;
text-align: justify;
}

#sidebar {
margin: -42px 0px 0px 25px;
padding: 15px 8px 8px 8px;
background-color: #fafafa;
font-size: 7pt;
font-family: "trebuchet ms", sans-serif;
color: #666666;
width: 182px;
float: right;
text-align: justify;
}

/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/

#header {
width: 530px;
padding: 6px -4px 10px 0px;
margin: 5px 15px 5px 10px;
text-align: left;
font-family: "courier new" sans-serif;
font-size: 15pt;
font-weight: bold;
background-color: #ffffff;
color: #dddddd;
}

.headerimage {
/* for formatting header image */
}

/*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: #0073D9;
}

div#header a:hover, div#footer a:hover {
color: #cccccc;
text-decoration: none;
}

/*title and subtitle*/
.title {
display: none;
}

.subtitle{
display: none;
}

/*-----------------------------------------------------------------------------
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;
}

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

.subcontent {
}

.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #ffffff;
color: #666666;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
text-align: justify;
}

.userpic {
position: relative;
float: right;
background-color: #ffffff;
padding: 5px;
margin: 4px 2px 0px 6px;
z-index: 15;
border-width: 1px;
border-color: #ededed;
border-style: solid;
}

.date {
border-bottom: 1px dotted #ededed;
line-height: 200%;
margin-left: 20px;
top: 5px;
color: #666666;
font-family: "tahoma", "verdana", sans-serif;
font-size: 10px;
}

.subject {
padding-top: 5px;
margin-left: 20px;
color: #dddddd;
font-family: "courier new" sans-serif;
font-weight: bold;
font-size: 13pt;
}

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

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

.datesubject {
background-color: transparent;
padding: 0px;
}

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

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

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

.currents, .currentmood, .currentmusic {
font-family: "tahoma", "verdana", sans-serif;
font-size: 10px;
color: #333333;
}

.ljtags{
font-family: "tahoma", "verdana", sans-serif;
font-size: 10px;
color: #333333;
margin-top: 12px;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/

.comments {
font-family: "tahoma", "verdana", sans-serif;
font-size: 7pt;
font-weight: normal;
text-align: right;
background-color: #ffffff;
padding: 0px 5px 5px 5px;
position: relative;
top: 15px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #0073D9;
}

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

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

.separator{
/* for formatting separators between entries */
height: 35px;
border-top: 1px dotted #dddddd;
}

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

.userpicfriends {
background-color:#ffffff!important;
position: relative;
float: right;
padding: 5px;
margin: 4px 2px 0px 6px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #efefef;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
z-index: 15;
}

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

.defaultuserpic {
text-align: center;
}

.defaultuserpic img{
padding: 5px 5px 5px 5px;
border: 1px solid #ededed;
}

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

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

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

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

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

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

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

.sbarcalendar {
padding: 5px;
border-color: #efefef;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "tahoma", "verdana", sans-serif;
font-size: 7pt;
}

.sbarcalendarposts {
padding: 5px;
margin: 1px;
border-color: #dddddd;
border-width: 1px;
border-style: solid;
background-color: #f5f5f5;
text-align: center;
font-family: "tahoma", "verdana", sans-serif;
font-size: 7pt;
}

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

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

li.sbaritem
{
font-family: "trebuchet ms", sans-serif;
border-bottom: 1px solid #efefef;
font-size: 7pt;
padding: 7px 7px 2px 7px;
margin: 0px!important;
}

li.sbaritem:hover
{
border-left: 2px solid #0073D9;
background-color: #f5f5f5;
}

li.sbartitle
{
font-family: "courier new", sans-serif;
font-size: 13pt;
font-weight: bold;
color: #0073D9;
padding-left: 15px;
list-style: none;
background-color: transparent;
margin-bottom: 10px;
margin-top: 10px;
}

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

#footer {
width: 73%;
padding-bottom: 15px;
border-bottom: 1px dotted #dddddd;
border-right: 2px solid #fafafa;
text-align: center;
font-family: "tahoma", "verdana", sans-serif;
font-size: 7pt;
font-weight: normal;
letter-spacing: 1px;
background-color: #ffffff;
color: #666666;
z-index: 100;
}

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

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

.clearfoot {
display: none;
}

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

ul.year {
text-align: center;
padding-bottom: 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: solid;
border-color: #efefef;
}

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

td.yearmonth {
border-style: none;
}

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

.clear {
height: 0px;
}

Instructions:
1. Manage > Customize
2. Select S2 under the Style System section. (For users who don't know HTML or CSS, or make only minor alterations). Click Save Changes.
3. Choose Flexible Sqares from the drop-down-menu. Save Changes.
4.Choose Custom Options and go to Sidebar:
-Show the sidebar? Yes
-Set sidebar position: Right
-Show the default user picture on the sidebar? Up to you.
-Show the blurb/free text in the sidebar? Yes
-Edit link list, Summary list and tag list as you want. Save Changes.

5. Go to Custom CSS:
- make sure all of the drop down menus are set to NO
- Paste in the stylesheet into the Custom stylesheet box
Save Changes.

LJ user icon by damnicons
User:
& Community:
. If you upload this to your own server and replace my url with yours, I would appreciate it because hotlinking is bad.

If you have any question concerning this layout make sure to check the FAQ section before asking anything.