earn your stripes

[tsuyogari]

Image preview | Live preview

+ S2 Flexible Squares
+ Works in FF & Safari



Instructions
Go to Journal > Customize Journal Style
Under Sidebar, show default picture: yes; add text to the blurb; show link list.
Under Links List add your navigation links.
Under Custom CSS, all option should be no. Copy code to Custom stylesheet box.

Codes
You can copy the CSS from the source code of the live preview.
Or, download from MF here.

/* Cleaned CSS: */

/*---------------------------------------------------
earn your stripes
s2flexi squares by tsuyogari
find @ http://performation.livejournal.com
-----------------------------------------------------*/

body {
background-color: #99aece;
background-image: url(http://i43.tinypic.com/ojkqj6.jpg);
text-align: center;
margin: 20px 0 20px 0;
color: #C9C9C9;
font-family: Calibri, Arial, sans-serif;
font-size: 8pt;
}

a, a:link, a:visited {
color: #9B9B9B;
text-decoration: none;
}

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

blockquote {
background-color: #6A717E;
padding: 10px;
}

td {
color: #C9C9C9;
font-family: Calibri, Arial, sans-serif;
font-size: 8pt;
}

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

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

#content
{
width: 650px;
margin-left: auto;
margin-right: auto;
padding: 15px;
padding-right: 0px;
}

#maincontent {
margin-top: 15px;
font-family: Calibri, Arial, sans-serif;
font-size: 11px;
margin-right: 0px;
text-align: left;
width: 100%;
}

#sidebar {
width: auto;
padding: 10px;
text-align: left;
background-color: #4E525E;
min-height: 120px;
border: #555964 dashed 1px;
color: #798290;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 7pt;
letter-spacing: 1px;
}

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

#header {
width: 100%;
padding: 10px 0px 20px 0px;
margin: 0px;
text-align: center;
letter-spacing: 2px;
border-style: solid;
border-color: #999999;
border-width: 1px;
background-color: #d4dce8;
color: #000000;
display: none;
}

.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: #5674b9;
}

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

/*title and subtitle*/
.title {
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 200%;
top: 10px;
}

.subtitle{
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: normal;
top: 10px;
}

/*-----------------------------------------------------------------------------
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 {
background-color: #5F6571;
border: #555964 dashed 1px;
color: #AAA;
}

.entry {
margin: 0px 110px 10px 0px;
padding: 10px;
color: #C9C9C9;
font-family: Calibri, Arial, sans-serif;
font-size: 8pt;
text-align: left;
}

.userpic {
position: relative;
float: right;
margin: 10px;
z-index: 15;
border: #707784 5px solid;
color: #707784;
}

.date {
line-height: 200%;
top: 5px;
color: #939BB2;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 6pt;
text-transform: uppercase;
}

.subject {
padding: 5px;
color: #bbb;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 8pt;
text-transform: uppercase;
}

.subject a, .subject a:link, .subject a:visited {
color: #bbb;
text-decoration: none;
}

.subject a:hover {
color: #bbb;
text-decoration: none;
}

.datesubject {
padding: 5px;
}

.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 strong, .currentmood strong, .currentmusic strong {
font-weight: normal;
}

.currents, .currentmood, .currentmusic {
text-transform: lowercase;
color: #bbb;
}

.currents {
padding-top: 10px;
}

.ljtags {
margin-top: 20px;
text-transform: lowercase;
color: #bbb;
}

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

.comments {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 7pt;
text-align: right;
padding: 0px 5px 20px 5px;
position: relative;
top: 15px;
text-transform: uppercase;
font-weight: normal;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #98928D;
}

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

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

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

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

.userpicfriends {
position: relative;
float: right;
padding: 5px;
margin: 10px;
text-align: center;
font-family: Calibri, Arial, sans-serif;
font-size: 11px;
z-index: 15;
background: #5f6571 !important;
}

.userpicfriends img {
border: #707784 5px solid;
}

.userpicfriends font {
color: #bbb;
}

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

.defaultuserpic {
text-align: center;
float: left;
}

.defaultuserpic img {
border: #798290 5px solid;
margin: 0 10px;
}

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

.sbarbody {
padding: 0px 5px 0px 5px;
text-align: center;
}

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

#sidebar_linklist {
padding: 0;
margin: 0;
height: 20px;
}

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

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

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

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

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

li.sbartitle
{
list-style: none;
display: none;
}

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

#footer {
width: 100%;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
color: #798290;
background-color: #4E525E;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 7pt;
padding: 10px 0;
border: #555964 dashed 1px;
z-index: 100;
clear: both;
}

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

ul.navfooter li {
display: inline;
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 {
margin-left: auto;
margin-right: auto;
width: 100%;
background-color: #5F6571;
border: #555964 dashed 1px;
}

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

table.yeartable td.yearday {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: uppercase;
}

td.yearmonth {
border-style: none;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: uppercase;
}

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

.datesubjectcomment {
background-color: #707784;
padding: 5px;
margin-top: 20px;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: uppercase;
color: #939bb2;
}

.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #d4dce8;
background-color: #d4dce8;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 1px;
border-color: #919bad;
border-style: solid;
}

.box {
background-color: #5F6571;
border: #555964 dashed 1px;
margin-top: 20px;
padding: 10px;
clear: left;
font-family: Calibri, Arial, sans-serif;
font-size: 7pt;
color: #C9C9C9;
}

input, textarea, select {
background-color: #545863;
color: #C9C9C9;
border: #555964 solid 1px;
font-family: Calibri, Arial, sans-serif;
font-size: 7pt;
}

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

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

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: Calibri, Arial, sans-serif;
color: #c9c9c9;
}

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

.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #808996;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: uppercase;
color: #939bb2;
}

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

.skiplinks {
text-align: center;
color: #798290;
background-color: #5F6571;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 7pt;
padding: 10px 0;
border: #555964 dashed 1px;
margin: 15px 0;
}

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

.clear {
height: 0px;
}

span.ljuser, span.ljuser a b {
padding: 0px;
width: 0px;
height: 0px;
margin: 0px;
font-weight: normal;
color: #4A4E57;
}

span.ljuser img {
visibility: hidden;
padding: 0px;
width: 0px;
height: 0px;
}

* html div.ContextualPopup {
background: none !important;
}

div.ContextualPopup img {
border: 0;
}

div.ContextualPopup div.Inner {
position: relative;
top: -2px;
left: -2px;
padding: 0px;
width: 20em;
background-color: #4E525E !important;
border: #555964 dashed 1px;
color: #798290 !important;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 7pt;
}

* html div.ContextualPopup div.Inner {
top: 0px;
left: 0px;
}

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: bold;
}

div.ContextualPopup .Content .GizmoBlurb {
font-size: smaller;
}

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

* html div.ContextualPopup .Userpic {
top: 2px;
}

div.ContextualPopup .Userpic img {
margin: 0 auto;
max-width: 50px;
width:expression(this.width > 50 ? "50px" : this.width); /*IE Max-width */
height: auto;
vertical-align: middle;
}

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

Please credit performation, and join for more updates!