036 - Unchained [Smooth Sailing]

[kill_zombie]

Unchained ► LIVE | STATIC | FAQ


Layout Information
TESTED BROWSERS Mozilla Firefox, Safari, Internet Explorer
PROBLEMS? Nope, none at all
FEATURES Floating header-menu, tiny icons, contextual pop ups, custom nav-strip
DISABLED Journal subtitle, footer-menu
AD-PLACEMENT Between Entries
FINAL NOTES Right, finally, this one's not a request. More of a procrastination attempt to distract me from my English Lit coursework. Just a simple and clean layout, so enjoy!

Oh, and because I can remember the icon maker I snagged from for this layout, check out volkner's icons over at electronism!


Layout Installation
SELECT JOURNAL STYLE 01. Select any Smooth Sailing.

02. Pick an ad placement you prefer (Between Entries tends to look best in general).

03. Make sure that you set the sidebar to the left.
CUSTOM CSS Use layout's stylesheet(s) → NO
Use layout's stylesheet(s) when including custom external stylesheet → NO

Use CTRL + A inside the textbox to select everything, and then copy and paste into the CUSTOM CSS box.

/*

LJ STYLE: Smooth Sailing
LAYOUT: Unchained
MAKER: kill_zombie

PLEASE CREDIT:
http://community.livejournal.com/kill_brainz/
OR
http://jessilestrange.livejournal.com/

*/

body { background-color: #FAFAFA; font-family: Verdana, Arial; font-size: 10px; color: #555555 !important; text-align: center; }
a, a:visited { color: #B8B8B8; text-decoration: none; }
a:hover { color: #8D7594; cursor: help; }

.pageblock { width: 850px; margin: 50px auto 0px auto; }
.pagefooterblock, .header-subtitle, .header-icon, .bodyheaderblock, .entryHeader .ljuser img, .entryMetadata img, .profile-label, #footer-menu { display: none; }
.pageheaderblock { text-align: right; }
.header-title { font-family: Helvetica; font-size: 37px; color: #8A8A8A; text-transform: uppercase; letter-spacing: -3px; margin: 0px 10px 0px 0px; }
.header-title:first-letter { font-size: 50px; color: #B8B8B8; text-transform: uppercase; }

.bodyblock { margin: 0px 0px 30px 0px; padding: 0px; }
.sidebar { width: 250px; font-family: Lucida Sans Unicode; font-size: 11px; margin: 0px 10px 0px 0px; }
.sidebox { text-align: left; }
.sideboxTitle { background-color: #F5F5F5; font-family: Helvetica; font-size: 10px; color: #A1A1A1; text-transform: uppercase; text-align: left; border-bottom: 1px solid #EBEBEB; padding: 5px 10px 2px 10px; }
.sideboxContent { font-size: 11px; color: #444444; text-align: justify; padding: 5px 3px 3px 3px; }
.sidebox #profile { min-height: 90px; font-size: 11px; }
.sidebox #profile .ljuser a b { font-size: 13px; font-weight: bold; text-transform: lowercase; letter-spacing: -1px; border-bottom: 1px solid #EBEBEB; }
.profile-content { font-size: 10px; text-transform: uppercase; margin: 5px 0px 0px 75px; display: block; }
img.profile-userpic, img.profile-userpic:hover { float: left; width: 70px; height: 70px; border: 1px solid #EBEBEB; margin: 0px 10px 5px 0px; padding: 3px; }
.sidebox #tags_sidebox, .sidebox #systemlinks { font-family: Helvetica; font-size: 0px; text-align: right; }
.sidebox #tags_sidebox a, .listitem a { font-size: 11px; text-transform: uppercase; display: block; }
.sidebox #tags_sidebox a, .listitem { border-bottom: 1px solid #EBEBEB; margin: 0px 0px 1px 0px; padding: 2px 5px 2px 5px; }
.sidebox #tags_sidebox a:hover, .listitem:hover { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/arrow1.gif) no-repeat 5% 55% #F9F9F9; }
.listtitle { font-size: 13px; font-variant: small-caps; color: #888888; border-bottom: 1px solid #EBEBEB; margin: 0px 0px 1px 0px; padding: 2px 10px 2px 5px; }
.sidebox #summary a { font-size: 11.5px; }
.sidebox #summary .ljuser a b, .daysubjects .ljuser a b { font-size: 10px; text-transform: uppercase; border-bottom: 1px solid #EBEBEB; }
.sidebox #summary img[src="http://l-stat.livejournal.com/img/icon_protected.gif"], .sidebox #summary img[src="http://l-stat.livejournal.com/img/icon_groups.gif"] { width: 0; height: 0; padding: 0 10px 10px 0; margin: 0px 3px 0px 0px; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/063.png); }
.sidebox #summary img[src="http://l-stat.livejournal.com/img/icon_private.gif"] { width: 0; height: 0; padding: 0 10px 10px 0; margin: 0px 3px 0px 0px; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/065.png); }
.sidebox #summary img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/036-1.png); margin: 0px 1px 2px 0px; padding: 10px 10px 0 1px !important; }
.sidebox #summary img[src="http://l-stat.livejournal.com/img/community.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"] { background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/045-1.png); margin: 0px 1px 2px 0px; padding: 10px 10px 0 1px !important; }
.sidebox #summary img[src*="newsinfo.gif"] { background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/094.png); margin: 0px 1px 2px 0px; padding: 10px 10px 0 1px !important; }
.sidebox #summary img[src*="syndicated.gif"] { background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/001.png); margin: 0px 1px 2px 0px; padding: 10px 10px 0 1px !important; }
.sidebox #latestmonth table { width: 90%; color: #999999; text-transform: uppercase; margin: 4px auto 0px auto; }
.sidebox #latestmonth table a { color: #666666; }
.latestmonth-inactive, .latestmonth-active { margin: 1px; padding: 1px 1px 5px 5px; }
.latestmonth-inactive, .latestmonth-active, .header-menu li { background-color: #F7F7F7; border-top: 0px; border-right: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; border-left: 0px; }
.latestmonth-inactive:hover, .latestmonth-active:hover, .header-menu li:hover { background: url(http://i46.tinypic.com/2zyg6qp.png) repeat #F9F9F9; border-top: 1px solid #EBEBEB; border-right: 0px; border-bottom: 0px; border-left: 1px solid #EBEBEB; }
.latestmonth-active a, .latestmonth-active a:hover { color: #593A5E; }
.sidebox #search { font-size: 12px; text-align: center; }
.sidebox #search select, .sidebox #search input { background-color: #FAFAFA; font-size: 10px; color: #555555; }
.sidebox #search select:hover, .sidebox #search input:hover, textarea:hover, select:hover, input:hover, blockquote:hover { border: 1px solid #DDDDDD; }

.entryHolder, .sidebox { background-color: #FFFFFF; border: 1px solid #EBEBEB; margin: 0px 0px 10px 0px; padding: 5px; }
.entryHeader { background-color: #F5F5F5; font-family: Helvetica; font-size: 0px; color: #A1A1A1; text-transform: uppercase; text-align: right; border-bottom: 1px solid #EBEBEB; margin: 0px; padding: 5px 10px 2px 10px; }
.entryHeaderDate, .entryHeader a { font-size: 10px; }
.entryHeaderDate { margin: 0px 0px 0px 0px; padding: 4px; display: inline; }
.entryHeader a { font-weight: bold; color: #777777; }
.entryHeaderSubject { padding: 0px 0px 0px 5px; z-index: 30; }
.entryUserinfo { text-align: center; margin: 10px 10px 5px 9px; }
.entryUserinfo .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"], .entryUserinfo .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { background-color:transparent; display: none; }
.entryUserinfo .ljuser a b { font-family: Helvetica; font-size: 10px; text-transform: uppercase; border-bottom: 1px solid #EBEBEB; margin: 0px }
.entryUserinfo .ljuser a b:hover, .sidebox #profile .ljuser a b:hover, .sidebox #summary .ljuser a b:hover, .daysubjects .ljuser a b:hover { border-bottom: 1px solid #888888; }
.entryUserinfo-usericon img, .entryUserinfo-usericon img:hover, .commentUserinfo-usericon img, .commentUserinfo-usericon img:hover { border: 1px solid #EBEBEB; margin: 0px 0px 2px 0px; padding: 1px; }
.entryText { min-height: 90px; font-size: 11px; text-align: justify; padding: 10px; }
.entryText, .entryMetadata { border-left: 1px solid #EBEBEB; }
.entryText img { max-width: 430px; border: 0px; }
.entryText a { font-weight: bold; }
.entryText li { color: #444444; }
.entryMetadata { font-size: 10px; color: #666666; text-align: left; border-top: 1px solid #EBEBEB; margin: 0px; padding: 10px; }
.entryMetadata-label { font-weight: bold; text-transform: lowercase; margin: 0px 5px 0px 0px; }
.entryMetadata a, .entryMetadata a:hover { color: #666666; }
.entryMetadata a:hover { text-decoration: underline; }
.entryMetadata ul { margin: 0px; padding: 0px; }
.entryMetadata li { list-style-type: none; margin: 0px; padding: 0px 10px 0px 0px; display: block; }
.entryLinkbar, .commentLinkbar { background-color: #F5F5F5; font-family: Helvetica; font-size: 10px; text-transform: uppercase; text-align: right; border-top: 1px solid #EBEBEB; margin: 0px; padding: 2px 10px 5px 10px; }
.entryLinkbar a, .commentLinkbar a { color: #A1A1A1; }
.entryLinkbar a:hover, .commentLinkbar a:hover { color: #8A8A8A; text-decoration: underline; }
.entryLinkbar ul, .commentLinkbar ul { margin: 0px; padding: 0px; }
.entryLinkbar li, .commentLinkbar li { list-style-type: none; padding: 0px; display: inline; }
.entryLinkbar li { margin: 0px 0px 0px 10px; }

.header-menu { position: fixed; right: 0px; bottom: 0px; width: 130px; font-family: Helvetica; font-size: 9px; text-transform: uppercase; text-align: center; padding: 10px; }
.header-menu ul { margin: 0px; padding: 0px; }
.header-menu li { list-style-type: none; margin: 0px 0px 2px 0px; padding: 5px 4px 3px 4px; display: block; }

.commentHolder { background-color: #FFFFFF; font-family: Helvetica; border: 1px solid #EBEBEB; margin: 5px 0px 5px 0px; padding: 5px; }
.commentHeader, .commentHeaderScreened { background-color: #F5F5F5; font-family: Helvetica; font-size: 10px; color: #A1A1A1; text-transform: uppercase; text-align: left; border-bottom: 1px solid #EBEBEB; padding: 5px 10px 3px 10px; }
.commentHeaderScreened { font-style: italic; }
.commentUserinfo { font-size: 10px; color: #CCCCCC; text-align: center; margin: 0px; padding: 10px; }
.commentUserinfo .ljuser a b { font-family: Georgia; font-weight: bold; font-style: italic; font-size: 11px; }
.commentUserinfo .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"], .commentUserinfo .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { display: none; }
.commentUserinfo-usericon img { height: 70px; width: 70px; }
.commentText { font-family: Verdana; font-size: 11px; color: #888888; text-align: left; padding: 10px; }
.commentLinkbar { color: #A1A1A1; }
.commentLinkbar li { margin: 0px 0px 0px 6px; }
.replyform { background-color: #FFFFFF; border: 1px solid #EBEBEB; padding: 10px; }
#qrform { color: #FFFFFF; border: medium none !important; padding: 16px; }
#qrform table { width: 98%; color: #AAAAAA; border:0 none !important; }

.yearlinks { text-align: right; }
.yearlink { padding: 0px 5px 0px 5px; }
.month, .tagstable { width: 96%; margin: 10px; }
.daytitles { background-color: #F3F3F3; font-size: 13px; color: #555555; text-align: center; text-transform: uppercase; border: 1px solid #F3F3F3; padding: 12px 10px 2px 10px; }
.daysubjects { font-size: 10px; color: #444444; text-align: left; padding: 10px; }
.daysubjects a { font-size: 12px; }
.daysubjects img[src="http://l-stat.livejournal.com/img/icon_protected.gif"], .daysubjects img[src="http://l-stat.livejournal.com/img/icon_groups.gif"], .daysubjects img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{ width: 0; height: 0; margin: 0px 2px 0px 0px; padding: 0px 10px 10px 0px; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/065.png); filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; !important }
.daysubjects img { width: 0; height: 0; background-repeat: no-repeat; /* BECAUSE INTERNET EXPLORER IS SHIT */ margin: 0px 2px 0px 0px; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/065.png); padding: 10px 10px 0px 0px; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; !important }
.day-blank, .day { margin-bottom: 0px; padding: 3px; }
.day-blank, .day, .tagstable, .tagstable td { border: 1px solid #FFFFFF; }
.day-blank, .day, .tagstable td { background-color: #FAFAFA; text-transform: uppercase; }
.day-blank:hover, .day:hover, .tagstable td:hover { background-color: #F5F5F5; }
.day-date { width: 50%; background-color: #FFFFFF; color: #888888; text-align: center; border-right: 1px solid #EBEBEB; border-bottom: 1px solid #EBEBEB; }
.day-count { float: right; width: 50%; font-size: 20px; text-align: center; }
.day-count a { font-family: Helvetica; font-weight: normal; font-size: 16px; padding: 3px; }

ul.taglist { padding: 0px 15px 0px 0px; }
ul.taglist li { color: #999999; padding: 0px 3px 3px 9px; }
.tagstable td { color: #777777; }
.tagstable a, ul.taglist a { font-size: 10px; font-weight: normal; text-transform: uppercase; }

blockquote { color: #666666; border: 1px solid #EBEBEB; padding: 5px; }
blockquote, textarea, input, select { background: url(http://i46.tinypic.com/2zyg6qp.png) repeat #F9F9F9; }
blockquote .ljuser a b { color: #777777; }
input, textarea, select { font-size: 11px; border: 1px solid #EBEBEB; margin: 1px; padding: 2px; }
textarea { height: 100px; width: 210px; font-family: Verdana; color: #444444; text-align: left; }
li { list-style-position: inside; list-style-type: decimal-leading-zero; margin: 2px 0px 0px 20px; padding: 0px 0px 2px 9px; }
h1, h2, h3, h4, h5 { font-variant: small-caps; color: #666666; }

.entryHeader img[src="http://l-stat.livejournal.com/img/icon_protected.gif"], .entryHeader img[src="http://l-stat.livejournal.com/img/icon_groups.gif"], .entryHeader img[src="http://l-stat.livejournal.com/img/icon_private.gif"] { width: 0; height: 0; padding: 0 10px 10px 0; margin: 0px 3px 0px 0px; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/065.png); }
.entryHeader img { width: 0; height: 0; background-repeat: no-repeat; /* BECAUSE INTERNET EXPLORER IS FUCKED UP - PLEASE DON'T TOUCH BBS */ margin: 0px 3px 0px 0px; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/065.png); padding: 10px 10px 0 0; }
.ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; /* AGAIN, BECAUSE INTERNET EXPLORER IS STUPID - PLEASE DON'T DELETE THIS UNLESS YOU WANT TO CAUSE IE PAIN */ background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/041.png); margin: 0px 1px 2px 0px; padding: 10px 10px 0 1px !important; }
.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"], .ljuser img[src="http://livejournal.com/img/newyearpic_1.gif"] { background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/041.png); margin: 0px 1px 2px 0px; padding: 10px 10px 0 1px !important; }
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"] { background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/045-1.png); margin: 0px 1px 2px 0px; padding: 10px 10px 0 1px !important; }
.ljuser img[src*="newsinfo.gif"] { background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/094.png); margin: 0px 1px 2px 0px; padding: 10px 10px 0 1px !important; }
.ljuser img[src*="syndicated.gif"] { background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/001.png); margin: 0px 1px 2px 0px; padding: 10px 10px 0 1px !important; }
.ljuser a b { font-weight: bold; color: #B8B8B8; text-transform: lowercase; }
.ljuser a b:hover { border-bottom: 1px dotted #999999; }

div.ContextualPopup div.Inner { width: 260px; background: #FFFFFF !important; font: 10px Arial; color: #555555 !important; border: 1px solid #F0F0F0 }
div.ContextualPopup div.Userpic img { padding: 0px; margin: 10px; }
div.ContextualPopup .Relation { font-family: Georgia; font-style: italic !important; font-weight: bold !important; font-size: 14px !important; color: ##B8B8B8 !important; text-transform: lowercase; border-bottom: 0px; margin-bottom: 3px; padding-bottom: 5px; }
div.ContextualPopup div.Inner div.Content a { font-weight: normal; color: #B8B8B8 !important; text-decoration: none !important; text-transform: uppercase; }
div.ContextualPopup div.Inner div.Content a:hover { color: #8D7594 !important; }
div.ContextualPopup div.Inner div.Content img a:hover { background: none !important; }
div.Relation, div.FriendStatus { font-size: 11px; text-transform: uppercase; letter-spacing: -1px; border-bottom: 1px solid #907878; padding: 2px 2px 5px 2px; margin: 0px 0px 8px 0px; }

#lj_controlstrip { border-bottom: 1px solid #EBEBEB; }
#lj_controlstrip_statustext { color: #B8B8B8; }
#lj_controlstrip td { background: #F5F5F5; text-transform: uppercase; border-right: 0px; }
#lj_controlstrip select, #lj_controlstrip input { background: url(http://i46.tinypic.com/2zyg6qp.png) repeat #F9F9F9 !important; font: 10px Arial !important; color: #8A8A8A !important; text-transform: uppercase; border: 1px solid #EBEBEB; }
#lj_controlstrip select:hover, #lj_controlstrip input:hover { border: 1px solid #999999; }
#lj_controlstrip td a { color: #B8B8B8; }
#lj_controlstrip td a:hover {color: #888888; text-decoration: none; }
#lj_controlstrip img, #lj_controlstrip .ljuser img { display: none; }
#lj_controlstrip .ljuser a b, #lj_controlstrip .ljuser a b:hover { font-size: 14px; font-weight: bold; color: #B8B8B8; text-transform: lowercase; letter-spacing: -1px; border-bottom: 0px; }
DISPLAY > PRESENTATION Expand BASIC OPTIONS and ADDITIONAL OPTIONS

Userinfo Position in Entries → Left side of the Entry Text
Wrap Entry text under userinfo → No
IMAGES Save these to your own servers to ensure that the images don't die on you when my Photobucket explodes :D

Tiny Icons → User - Community - News - Syndicated
Entry Header → Protected/Private/Groups
Background → for hover effects