[s2] Flexible Square - Red Earth

[medli]

This is a layout that I am currently using on my own journal. I like the position of the navigation, plus it is a simple layout.



( Big Preview ) &

INSTRUCTIONS
1. Go to Customize, make sure you are using S2, and Select "Flexible Squares" as your theme.
2. Go to Custom Options and press Custom CSS.
3. Select "NO" in all the dropdown boxes.
4. Copy & paste the CSS into the box labeled Custom stylesheet.

OVERRIDES

/*
/*
Creater: shattere @ visualdesign
Theme Name: Red Earth
Style: S2 Flexible Squares
Account Type: Free & Paid accounts

Credit is required. This should never be removed!
*/

body {
font-family: arial, tahoma, sans-serif;
font-size: 7pt;
letter-spacing: 1px;
line-height: 16px;
margin: 10px 0 10px 0;
text-align: justify;
cursor: default;
background: #0D0201;
color: #4F4433 ;}

a, a:link, a:visited {
color: #501B03;
text-decoration: none;
cursor: default; }

a:hover {
color: #9F2611;
text-decoration: none;
cursor: default; }

strong {
font-weight: bold;
color: #000000;
font-family: verdana;
font-size: 7pt; }

b {
font-weight: bold;
color: #561310;
font-family: verdana;
font-size: 7pt; }

i, u {
color: #561310; }

small {
font-family: verdana;
font-size: 7pt }

blockquote {
padding: 10px;
color: #210603;
border: 1px dashed #561310;
background: #4F4433;
text-align: justify; }

::-moz-selection {
background: #4F4433;
color: #210603; }

p, td {
border: 0px !important; }

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

img{ opacity:.60; -moz-opacity: 0.60; filter: alpha(opacity=60); }
img:hover{ opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); }

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

#content {
width: 650px;
margin: auto; }

#maincontent {
margin: 0;
margin: 15px 0 0 0; }

#sidebar {
width: auto;
padding: 20px 10px 15px 10px;
color: #BAB9A2;
background-color: #5F0E00;
border-top: 15px solid #0D0201;
text-align: left; }

/*-----------------------------------------------------------------------------
Header and Footer
--------------------------------------------------------------------------------*/

#header {
padding: 15px 15px 15px 15px;
margin: 0px;
background-color: #41130E;
color: #F8F8EB;
font-family: trebuchet ms;
font-size: 10pt;
text-transform: lowercase;
line-height: 10px;
letter-spacing: 2px;
text-align: center; }

.headerimage {
position: relative;
width: 0px;
height: 35px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("");
background-repeat: no-repeat; }

#header a, #header a:link,
#header a:visited {
color: #ECECBC;
font-family: trebuchet ms;
font-size: 10pt;
text-transform: lowercase;
padding: 10px 10px 10px 10px; }

#header a:hover {
color: #7B654F; }

#footer {
padding: 25px;
width: auto;
margin: 0px;
text-align: center;
font-family: lucida sans unicode;
font-size: 9pt;
font-weight: normal;
text-transform: lowercase;
letter-spacing: 1px;
line-height: 14px;
background-color: #41130E;
color: #ECECBC;
clear: both; }

#footer a, #footer a:link, #footer a:visited {
color: #ECECBC; }

ul.navheader {
text-transform: lowercase;
text-align: center; }

ul.navheader li {
display: inline;
list-style: none;
padding: 0; }

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

ul.navfooter li {
list-style: none;
display: inline;
margin: 0;
padding: 0; }

h2, .title, .subtitle, .defaultuserpic {
display: none; }

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

div#sidebar a, div#sidebar a:link,
div#sidebar a:visited {
color: #8D7F67;
text-decoration: none;}

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

li.sbartitle {
display: none;
color: #F8F8EB;
font-family: lucida sans unicode;
font-size: 12px;
font-weight: normal;
text-transform: lowercase;
letter-spacing: 1px;
line-height: 14px; }

li.sbaritem {
padding: 0px 2px 0px 2px;
display: inline;
text-align: left; }

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

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

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

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

.sbarcalendar {
display: none;
padding: 3px;
border: 1px solid #574C42;
background: #574C42;
text-align: center;
color: #E4DDC4;
font-size: 10px; }

.sbarcalendarposts {
display: none;
padding: 3px;
border: 1px solid #D1A686;
background: #574C42;
text-align: center;
color: #D1A686;
font-size: 10px; }

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

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

.subcontent {
padding: 20px 20px 20px 20px;
background: #B5A488; }

.entry {
text-align: justify; }

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

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

.date {
text-align: right;
font-weight: normal;
padding-left: 5px;
color: #440902;
font-size: 8pt;
font-family: trebuchet ms; }

.subject {
text-align: right;
padding-bottom: 0px;
color: #280F0C;
font-size: 10pt;
font-family: arial;
font-weight: normal; }

.datesubject { }

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

.currents {
margin-top: 5px; }

.currents, .currentmood, .currentmusic, .currentlocation {
color: #280F0C;
text-align: left;
font-family: arial, tahoma, sans-serif;
font-size: 7pt;
letter-spacing: 1px;
line-height: 16px;
font-size: 10px; }

.currentmood strong, .currentmusic strong, .currentlocation strong, .currentgroups { display: none; }

/*---------------------------------------------------------------------
Tags
------------------------------------------------------------------------*/

.ljtags {
font-family: arial, tahoma, sans-serif;
font-size: 7pt;
letter-spacing: 1px;
line-height: 16px;
margin-top: 25px;
text-transform: lowercase; }

.ljtags a, .ljtags a:link, .ljtags a:visited {
font-family: arial, tahoma, sans-serif;
font-size: 7pt;
letter-spacing: 1px;
line-height: 16px;
color: #501B03;
font-family: arial; }

.ljtags a:hover {
color: #9F2611;
font-family: arial; }

ul.ljtaglist li {
padding-left: 5px;
margin-left: 10px; }

ul.ljtaglist {
text-align: left;
margin-right: auto;
margin-left: auto;
padding: 30px;
background: #FDFDFD; }

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

.comments {
font-family: arial, tahoma, sans-serif;
font-size: 7pt;
letter-spacing: 1px;
line-height: 16px;
text-align: right;
color: ##4F4433;
text-transform: lowercase;
padding-top: 35px; }

div.comments a, div.comments a:link, div.comments a:visited {
color: #501B03; }

div.comments a:hover {
color: #9F2611; }

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

.userpic {
display: visible;
position: relative;
float: left;
padding: 7px;
margin-right: 8px;
margin-bottom: 5px;
text-align: center;
border-width: 1px;
border-style: solid;
border-color: #4F1C14;
z-index: 15;
font-color: #000000;
background-color: #5F0E00 !important;}

#div.userpicfriends {
background-color: #5F0E00 !important;}

.userpicfriends {
position: relative;
float: left;
padding: 7px;
margin-right: 8px;
margin-bottom: 5px;
text-align: center;
border-width: 0px;
font-family: Tahoma, arial, verdana;
font-size: 10px;
z-index: 15;
font-color: #000000;
background-color: #5F0E00 !important;}

/*---------------------------------------------------------------------
Extra
------------------------------------------------------------------------*/

.clear {
display: none;
height: 0px; }

.clearfoot {
display: none;
clear: both; }

.skiplinks {
text-align: center;
padding: 25px;
background: transparent;
color: #574C42; }

.skiplinks a, .skiplinks a:link, .skiplinks a:visited {
color: #74624D;
text-transform: lowercase; }

.skiplinks a:hover {
color: #C2B191; }

.separator {
height: 25px; }

/*---------------------------------------------------------------------
Popup Box
------------------------------------------------------------------------*/

.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"], .subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"], .subject img[src="http://p-stat.livejournal.com/img/icon_groups.gif"]{ width: 0; height: 0; padding: 0 16px 16px 0; background: url(http://i32.tinypic.com/26113ch.png); margin-top: 3px; }

.box img[src="http://p-stat.livejournal.com/img/help.gif"]{ display: none; }

div.ContextualPopup div.Inner{ background: transparent!important; color: #B5A488!important; border: 0; padding: 10px; width: 250px; font-family: georgia; font-weight: normal; text-transform: none; }

div.ContextualPopup .Content{ padding: 7px 10px 7px 10px; margin-right: 80px; line-height: 1.4; background-color: #0D0201; border: 1px solid #5F0E00; }

div.ContextualPopup .Userpic{ padding: 10px; background-color: #0D0201; margin: 0px; border: 1px solid #5F0E00; }

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

div.ContextualPopup .Relation{ border-bottom: 1px solid #5F0E00; margin-bottom: 4px; padding-bottom: 4px; }

CREDIT
Credit visualdesign. Any questions, post here till FAQ is placed up!