S2: Smooth Sailing- Wasted Daylight

[noodlebird]

click on image for larger preview
live

Looks best in resolutions 1024x768 and higher
Should work in IE, Firefox and Chrome



/*---------------------------------------------------
STYLESHEET CREATOR: noodlebird.livejournal.com
STYLESHEET NAME: Wasted Daylight
S2 STYLE: Smooth Sailing

This base stylesheet was created by scythe at thrashmetal.livejournal.com. Feel free to use it, abuse it, and twist it into your own creation. Credit is not required, but certainly appreciated! (And that's only so interested people can find this tutorial. :3)
-----------------------------------------------------*/

body {
background:#FFFFFF url() repeat scroll 0 0;
color:#000000;
font-family:arial;
font-size:11px;
margin:0;
}
a, a:visited {
color:#6D6D6D;
letter-spacing:0;
text-decoration:none;
}
a:hover {
color:#000000;
cursor: default;
}
a img {
border:medium none;
}
ul {
}
li {
}
blockquote {
}
textarea, input, select {
}
img {
max-width: 500px;
}

/* -------------------------------------------- JOURNAL STRUCTURE -----------------------
-------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------*/

.pageblock {
margin-bottom: 50px;
}
.header-title {
display: none;
}
.header-subtitle {
display: none;
}
.header-icon {
}
.pageheaderblock {
margin:0 auto;
text-align:center;
}
.pagefooterblock {
display: none;
}
.pagefooterblock a, .pagefooterblock a:visited {
}
.bodyblock {
width: 80%;
margin: auto;
}
.bodynavblock {
}
.bodynavblock a, .bodynavblock a:visited {
}
.bodyheaderblock {
}
.body-title {
display: none;
}
.entryHolder {
background:#f1f1f1;
color:#878787;
font-size:11px;
margin-top: 50px;
border: 1px solid #ccc;
padding: 0px;

}

/* -------------------------------------------- ENTRY ----------------------------------------
-------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------*/

.entryUserinfo { /* Controls the box containing the userpic and user/comm links. NOT the actual image itself. */
}
.entryUserinfo-username { /* The box containing the user/comm links; EXCLUDES userpic */
}
.entryUserinfo-username .ljuser a b { /* Styles the actual user/comm links; if you want it to have the same look as all the others, leave blank. */
font-family: arial;
font-size: 10px;
text-transform: uppercase;
padding-left: -5px;
}
.entryUserinfo-usericon img { /* Styles the userpic image */
border: 0px;
width: 75px;
height: 75px;
padding: 10px;
}
.entryText {
color:#000000;
font-family:arial;
font-size:11px;
line-height:20px;
text-align:justify;
padding:10px;
border: 10px solid #f1f1f1;
min-height: 130px;
background: #fff;
}

/* ---- SUBJECT/DATE BAR ---- */

.entryHeader {
font-size:0px;
font-weight:bold;
background: #333;
height: 50px;
width: 100%;
padding-top: 25px;
}
.entryHeader a { /* Only affects the subject permalink */
color:#fff;
font-family: arial;
font-size: 16px;
text-transform: uppercase;
}
.entryHeader a:hover { /* Only affects the subject permalink */
color:#AAAAAA;
text-decoration:none;
}
.entryHeaderSubject { /* Styles JUST the subject, EXCLUDES date */
font-style:normal;
font-weight:normal;
}
.entryHeaderDate { /* Styles JUST the date, EXCLUDES subject */
float: left;
background: #333;
width: 125px;
font-family: arial;
font-size: 10px;
text-transform: uppercase;
padding: 5px 10px 10px 10px;
color: #fff;
text-align: center;
}
.entryHeaderTags { /* Only applicable if you set Display >> Entry Tags Position to "After subject text in subjectbar". */
display:block;
}
.entryHeaderTags a {
}

/* ---- METADATA ---- */

.entryMetadata {
color:#6d6d6d;
font-family: arial;
font-size: 10px;
text-transform: uppercase;
padding: 10px 10px 10px 0px;

}
.entryMetadata a, .entryMetadata a:visited {
color:#000000;
}
.entryMetadata a:hover {
color:#909090;
text-decoration:none;
}
.entryMetadata ul {
margin:0;
padding:0;
}
.entryMetadata li {
list-style-type:none;
padding: 2px 0 2px 18px;
}
.entryMetadata-label {
font-weight:bold;
padding-right:4px;
}

.entryMetadata img {
float: left;
padding-right: 5px;
}

/* ---- COMMENT LINKBAR --- */

.entryLinkbar {
color:#ccc;
font-size:10px;
text-align:right;
font-family: arial;
text-transform: uppercase;
padding: 10px 0px 10px 20px;
}
.entryLinkbar a {
}
.entryLinkbar a:hover {
}
.entryLinkbar ul {
margin:0;
}
.entryLinkbar li {
display:inline;
margin:0;
padding:0 5px;
}
.entryLinkbar a[href*="subscriptions"] {
display:none;
}
.entryLinkbar a[href*="tellafriend"] {
display:none;
}
.entryLinkbar a[href*="memadd"] {
display:none;
}
.entryLinkbar a[href*="edittags"] {
display:none;
}

a[st_page*="home"] {
display:none;
}

/* -------------------------------------------- WELCOME NOTE -----------------------------
-------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------*/
#welcomenoteHolder {
background:#f1f1f1 none repeat scroll 0 0;
}
#welcomenoteSubject {
color: #000000;
}
#welcomenoteText {
font-size:10px;
font-family: arial;
text-transform: uppercase;
}

/* -------------------------------------PAID/PLUS USERS - CUSTOM COMMENT PAGES -
-------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------*/

.body-midtitle { /* Title separating the comments from the entry */
background:#333 none repeat scroll 0 0;
color: #fff;
padding: 15px;
font-family: arial;
font-size: 16px;
text-transform: uppercase;
margin-top: 20px;
}

.commentHolder {
margin:18px 0;
padding:10px 0 0;
background: #f1f1f1;
border: 1px solid #ccc;
}
.commentUserinfo {
width: 90px;
}
.commentUserinfo .ljuser a b {
font-family: arial;
font-size: 10px;
text-transform: uppercase;
}
.commentUserinfo-usericon img {
background: #f1f1f1;
padding: 10px;
width: 75px;
height: 75px;
}
.commentText {
padding:10px;
background: #;
width: 100%;
}
.commentHeader {
font-weight:bold;
font-family: arial;
font-size: 10px;
text-transform: uppercase;
}
.commentHeader a {
}
.commentHeaderSubject {
}
.commentHeaderScreened {
}
.commentLinkbar {
font-family: arial;
font-size: 10px;
text-transform: uppercase;
}
.commentLinkbar ul {
margin:0 0 14px;
padding:0;
}
.commentLinkbar li {
display:inline;
margin-right:3px;
}
.commentLinkbar a {
}
.commentLinkbar a:hover {
color:#474747;
text-decoration:none;
}
.replyform { /* The comment posting form that appears when you click the "Speak" link on the main journal page */
}
#qrform { /* The quick reply form */
background:#FBFBFB none repeat scroll 0 0;
color:#030505;
}
#qrform table { /* Removes the 1px solid black border around the quick reply form. */
border: none !important;
}

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

.month {
width:500px;
padding: 20px;
}
.daysubjects {
}
.daytitles {
background:#D2D2D2 none repeat scroll 0 0;
border:1px solid white;
font-family: arial;
font-size: 10px;
text-transform: uppercase;
}
.day-blank {
}
.day {
background:#F2F2F2 none repeat scroll 0 0;
border:1px solid white;
float: center;
}
.day-date {
color:#878787;
}
.day-count {
float:right;
font-size:20px;
text-align:center;
width:50%;
}
.day-count a {
color:#959595;
}

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

.sidebar {
background:#fff none repeat scroll 0 0;
width: 250px;
margin-left: 25px;
margin-top: 50px;
}
.sidebar a, .sidebar a:visited {
font-family: arial;
font-size: 10px;
text-transform: uppercase;
margin-bottom: 10px;
line-height: 20px;
border-bottom: 1px dotted #ccc;
}
.sidebar a:hover {
color:#555;
text-decoration:none;
border-bottom: 3px solid #e4e4e4;
}
.sidebox {
color:#000000;
background: transparent;
margin:0 auto 20px auto;
padding:0px;
border: 1px solid #ccc;
}
.sideboxTitle {
color:#fff;
background: #333;
padding: 10px;
font-size: 16px;
font-family: arial;
text-transform: uppercase;
}
.sideboxContent {
background:#fff none repeat scroll 0 0;
border: 5px solid #f1f1f1;
margin-left:0px;
padding: 10px;
text-align:justify;
}

/* PROFILE BOX */
.sidebox #profile {
text-align:center;
}
.profile-label {
font-weight:bold;
}
.profile-content {
}
.profile-userpic {
border:0px;
}

/* SEARCH BOX */
.sidebox #search {
}

/* TAGS BOX */
.sidebox #tags_sidebox {
text-align:center;
}

/* PAGE SUMMARY */
.sidebox #summary{
}
.summaryList {
}

/* LATEST MONTH */
.sidebox #latestmonth {
}
.latestmonth-inactive {
}
.latestmonth-active {
}
.sidebox #latestmonth table {
margin-left:auto;
margin-right:auto;
margin-top:4px;
width:90%;
}

/* LINKS LIST */
.sidebox #systemlinks {
}
.sidebox #systemlinks a:link, .sidebox #systemlinks a:visited {
}
.sidebox #systemlinks a:hover, .sidebox #systemlinks a:active {
}
.listitem {
}
.listspacer {
}
.listtitle {
}

/* FREETEXT: Just add .sidebox#freetext3, .sidebox#freetext4 and so on if you want to customize each of the boxes.
Just ignore or delete these selectors if you don't want to individually style each one.*/
.sidebox #freetext {
}
.sidebox#freetext2 {
}
.sidebox#freetext_private {
}

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

.header-menu {
background:#333 none repeat scroll 0 0;
padding: 50px 0 15px 0;
text-transform: uppercase;
width: 100%;
text-align: right;
margin-top: 0px;

}
.header-menu a, .header-menu a:visited {
margin-right:8px;
color: #fff;
font-size: 16px;
font-family: arial;
font-style: ;
font-weight: normal;
padding: 5px;
}
.header-menu a:hover {
font-style: ;
color: #fff;
padding-bottom: 15px;
margin-bottom: 0px;
background: url(http://i28.tinypic.com/66xaiu.jpg) no-repeat 50% 50%;
}
.header-menu ul {
margin:0 auto;
padding:0;
}
.header-menu li {
display:inline;
}

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

#footer-menu {
background: transparent;
height: 30px;
bottom: 0px;
font-family: arial;
font-size: 16px;
text-transform: uppercase;
text-align: left;
margin-top: 25px;
margin-left: -10px;
}
#footer-menu a, .footer-menu a:visited {
color: #fff;
background: #333;
border: 1px solid #ccc;
padding: 10px;
}
#footer-menu a:hover {
color: #f1f1f1;
}
#footer-menu ul {
margin:0 auto;
padding:0px;
}
#footer-menu li {
display:inline;
padding: 10px;
}

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

.tagstable, .tagstable td { /* Styles the tags table */
border:0 none;
}
.taglist { /* Styles the tags list */
}

/* -------------------------------------------- LJ USER LINKS --------------------------------------
-------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------*/

.ljuser a b {
}
.ljuser a:hover b {
}

/* CUSTOMIZED USER ICONS
To add in your own , replace the URL and adjust the numbers under the padding property.*/

img[src*="userinfo.gif"] {
background-image:url(http://i29.tinypic.com/mrv3hz.jpg) !important;
background-repeat:no-repeat !important;
height:0;
padding:16px 16px 0 0 !important;
width:0;
}
img[src*="openid-profile.gif"] {
background-image:url(http://i29.tinypic.com/169eslw.jpg) !important;
background-repeat:no-repeat !important;
height:0;
padding:16px 16px 0 0 !important;
width:0;
}
img[src*="anonymous.gif"] {
background-image:url(http://i27.tinypic.com/2vi04nl.jpg) !important;
background-repeat:no-repeat !important;
height:0;
padding:16px 16px 0 0 !important;
width:0;
}
img[src*="community.gif"] {
background-image:url(http://i28.tinypic.com/igxlc0.jpg) !important;
background-repeat:no-repeat !important;
height:0;
padding:16px 16px 0 0 !important;
width:0;
}
img[src*="partnercomm.gif"] {
background-image:url(http://i28.tinypic.com/igxlc0.jpg) !important;
background-repeat:no-repeat !important;
height:0;
padding:16px 16px 0 0 !important;
width:0;
}
img[src*="newsinfo.gif"] {
background-image:url(http://s3.tinypic.com/izm97m_th.jpg) !important;
background-repeat:no-repeat !important;
height:0;
padding:16px 16px 0 0 !important;
width:0;
}
img[src*="syndicated.gif"] {
background-image:url(http://s3.tinypic.com/wmfmza_th.jpg) !important;
background-repeat:no-repeat !important;
height:0;
padding:16px 16px 0 0 !important;
width:0;
}
img[src*="icon_protected.gif"] {
background-image:url(http://i31.tinypic.com/339nfk2.jpg) !important;
background-repeat:no-repeat !important;
height:0;
padding:16px 16px 0 0 !important;
width:0;
}
img[src*="icon_groups.gif"] {
background-image:url(http://i30.tinypic.com/2n806xf.jpg) !important;
background-repeat:no-repeat;
height:0;
padding:16px 16px 0 0 !important;
width:0;
}
img[src*="icon_private.gif"] {
background-image:url(http://i30.tinypic.com/2n806xf.jpg) !important;
background-repeat:no-repeat;
height:0;
padding:16px 16px 0 0 !important;
width:0;
}

/* -------------------------------------------- USER POPUP --------------------------------------
-------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------*/

div.ContextualPopup img {
border:0 none;
}
div.ContextualPopup .Content {
}
div.ContextualPopup .Relation {
font-weight:bold !important;
}
div.ContextualPopup .Content .OnlineStatus {
font-weight:bold;
}
div.ContextualPopup .Userpic {
padding:8px 8px 0 0;
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
color:black !important;
font-family:arial;
font-weight:normal;
font-size: 10px
text-decoration:none !important;
text-transform: uppercase;
}

/* -------------------------------------------- NAVSTRIP --------------------------------------
-------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------*/

#lj_controlstrip {
background:#f1f1f1 none repeat scroll 0 0;
color:#515151;
}
#lj_controlstrip_statustext { /* Text reading "You are viewing ______ */
color:#333;
}
#lj_controlstrip a {
color:#333;
}
#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic {
border-right:0 none;
}
#lj_controlstrip_userpic {
background-image:url(http://stat.livejournal.com/palimg/controlstrip/ljlogo.gif/ptd4dce8000000);
}
#lj_controlstrip_loggedout_userpic {
background-image:url(http://stat.livejournal.com/palimg/controlstrip/ljlogo-loggedout.gif/ptd4dce8000000);
}
#lj_controlstrip_search_input_text, #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input {
background:#fff none repeat scroll 0 0 !important;
color:#333;
border:1px solid #ccc;
}
#lj_controlstrip .ljuser a b {
}

1. Under Page Setup select 2 Column > Sidebar on right
2. Looks best if metadata is positioned each on a separate line and above entry text
3. Under Custom CSS make sure the dropdown boxes have selected "No"
4. Please comment and credit!

mini icons from dryicons