050 - Smoke (and Mirrors) [Smooth Sailing]

[kill_zombie]

Been distracted by Monster Hunter: Tri for the past few weeks, forgive me watchers :P



Smoke (and Mirrors) ► LIVE | STATIC | FAQ


Layout Information
TESTED BROWSERS Mozilla Firefox, Internet Explorer
PROBLEMS? None so far
FEATURES Floating userpic, tiny icons, contextual pop ups, custom nav-strip
DISABLED Header-title/subtitle
AD-PLACEMENT Between Entries
FINAL NOTES For the remix challenge over at stylesheet, I remixed minolta's layout. I love her designs, she has this chic and clean minamilist style, so I suggest you check capitol out.

Heads up, the sidebar for this layout can be switched from left to right without any problem due to ever-so conveniently placed padding values. Sidebar is completely customized too, so you can fill up it right up with all the usual modules.


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).
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: Smoke (and Mirrors)
MAKER: jessilestrange // kill_zombie
FOR: stylesheet's remix challenge

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

*/

body { background: #EEEEEE; font-family: Trebuchet MS, Verdana, Sans-Serif, Arial; font-size: 9px; color: #999999; text-align: left; margin: 0px; }
a, a:visited, .entryText .ljuser a b { color: #353535; text-decoration: none; }
a:hover, .entryText .ljuser a b:hover { color: #D1382A; cursor: help; }

.pageblock { width: 100%; margin: 0px; padding: 0px; }
.pagefooterblock, .header-title, .header-subtitle, .header-icon, .header-menu, .bodyheaderblock, .sidebar .ljuser img, .sideboxTitle, .profile-label, .entryHeader .ljuser img, .entryHeaderDate, .entryUserinfo .ljuser img, .entryLinkbar a[st_page="home"], .entryLinkbar a[href*="subscriptions"], .entryLinkbar a[href*="tellafriend"], .commentUserinfo .ljuser img, #lj_controlstrip .ljuser img { display: none; }

.bodyblock { width: 800px; margin: 50px auto 0px auto; padding: 0px; }
.entryHolder { background: #FFFFFF; font-size: 11px; margin: 0px 5px 25px 5px; padding: 0px; }
.entryHeader { background: #F4F4F4; text-align: right; padding: 8px 15px 8px 15px; }
.entryHeaderSubject { font-size: 0px; }
.entryHeader a, .entryHeader .ljuser a b { font-family: Garamound, Times New Roman; font-weight: normal; font-style: italic; font-size: 16px; color: #888888; text-transform: lowercase; line-height: 15px; }
.entryUserinfo { position: relative; background: #F7F7F7; text-align: center; margin: 15px -15px 5px 15px; padding: 10px 10px 5px 10px; z-index: 100; }
.entryUserinfo-usericon img { height: 80px; width: 80px; border: 0px; margin: 0px 0px 5px 0px; padding: 0px; }
.entryUserinfo .ljuser a b, .entryUserinfo .ljuser a b:hover { font-size: 10px; text-transform: uppercase; }
.entryText { min-height: 90px; font-size: 11px; padding: 15px 18px 18px 18px; }
.entryText, .entryMetadata, .commentText { background: #FFFFFF; text-align: left; }
.entryText img { max-width: 380px; background: #F7F7F7; padding: 5px; margin: 1px; }
.entryMetadata { font-size: 10px; padding: 0px 18px 20px 18px; }
.entryMetadata-label { font-size: 11px; font-weight: bold; text-transform: lowercase; padding: 0px 5px 0px 0px; }
.entryMetadata img { margin: 0px 2px 0px 2px; }
.entryMetadata ul, .entryLinkbar ul, #footer-menu ul { margin: 0px; padding: 0px; }
.entryMetadata li { list-style-type: none; margin: 0px 0px 2px 0px; padding: 0px; display: block; }
.entryLinkbar { font-size: 10px; text-transform: uppercase; text-align: right; margin: 0px; padding: 0px 0px 5px 0px; }
.entryLinkbar a { color: #222222; padding: 8px 9px 5px 9px; }
.entryLinkbar a:hover { background: #EEEEEE; }
.entryLinkbar li { list-style-type: none; margin: 0px; padding: 0px; display: inline; }

.sidebar { width: 240px; background: #F9F9F9; font-size: 10px; border-top: 30px solid #F4F4F4; margin: 0px 20px 0px 20px; padding: 10px 0px 10px 0px; }
.sidebox { margin: 0px 0px 10px 0px; padding: 0px; }
.sideboxContent { font-size: 11px; color: #9E9E9E; padding: 10px 17px 10px 17px; }
.sideboxContent, .sidebox #profile, .sidebox #systemlinks, .sidebox #tags_sidebox, .sidebox #summary { text-align: left; }
.sidebox #latestmonth, .sidebox #search { text-align: center; }
.sidebox #profile .ljuser a b { text-transform: lowercase; }
.profile-content { font-size: 12px; margin: 3px 55px 0px 0px; display: block; }
img.profile-userpic { float: right; height: 55px; width: 55px; border: 1px solid #F1F1F1; margin: 0px 0px 2px 10px; padding: 4px; }
.sidebox #systemlinks, .sidebox #tags_sidebox { font-size: 0px; }
.listtitle { font-size: 12px; text-transform: uppercase; padding: 7px 4px 0px 4px; }
.listitem a, .sidebox #tags_sidebox a, .sidebox #summary a { font-size: 12px; color: #999999; text-transform: lowercase; }
.listitem, .sidebox #tags_sidebox a { border-bottom: 1px dashed #EEEEEE; margin: 0px; padding: 4px 4px 0px 4px; display: block; }
.listitem:hover, .sidebox #tags_sidebox a:hover { border-bottom: 1px dashed #E1E1E1; }
.sidebox #latestmonth, .sidebox #search { font-family: Helvetica; font-weight: bold; text-transform: uppercase; }
.sidebox #latestmonth table { width: 100%; margin: 0px auto 0px auto; }
.latestmonth-inactive, .latestmonth-active { font-size: 10px !important; text-align: center; margin: 1px; padding: 6px; }
.latestmonth-inactive, .day-date { background: #F4F4F4; }
.latestmonth-active, .day-date:hover { background: #EEEEEE; }
.latestmonth-active a { font-size: 10px !important; color: #777777; }
.sidebox #search { padding: 0px; }
.sidebox #search input, .sidebox #search select { font-family: Verdana; font-size: 9px; color: #919191; border: 0px; margin: 1px; padding: 3px; }

#footer-menu { text-align: right; margin: 0px 0px 10px 0px; padding: 0px 5px 0px 5px; }
#footer-menu li { list-style-type: none; margin: 0px 0px 0px 18px; padding: 0px; display: inline; }
.bodynavblock { font-family: Helvetica; font-weight: bold; font-size: 11px; color: #444444; text-transform: uppercase; text-align: center; margin: 10px 0px 10px 0px; }

.commentHolder { margin: 0px 0px 10px 0px; }
.commentHeader, .commentHeaderScreened { font-weight: bold; font-size: 14px; color: #FFFFFF; text-transform: uppercase; text-align: left; padding: 0px 15px 0px 15px; }
.commentHeaderScreened, .commentHeaderSubject { font-style: italic; }
.commentUserinfo { font-size: 10px; color: #666666; text-align: center; margin: 10px 10px 5px 10px; }
.commentUserinfo-usericon img { height: 55px; width: 55px; border: 1px solid #F1F1F1; margin: 0px 0px 3px 0px; padding: 4px; }
.commentText { min-height: 90px; font-size: 11px; margin: -4px 0px 0px 0px; padding: 15px 18px 18px 18px; }
.commentLinkbar { font-weight: bold; color: #606060; text-align: right; text-transform: uppercase; margin: 0px; padding: 0px 10px 0px 10px }
.commentLinkbar li { margin: 0px 0px 0px 7px; padding: 0px; display: inline; }
.replyform { background: transparent; border: 0px; padding: 10px 20px 10px 20px; }
#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 { width: 100%; margin: 0px; padding: 0px; }
.daytitles { font-family: Helvetica; font-weight: bold; font-size: 10px; text-transform: uppercase; text-align: center; padding: 16px 0px 10px 0px; }
.daytitles, .day-blank, .day, .tagstable, .tagstable td { background: #FFFFFF; border: 3px solid #FFFFFF; }
.day-blank, .day, .tagstable td { padding: 5px; }
.daysubjects { background: #FFFFFF; font-size: 11px; text-align: left; padding: 10px 0px 10px 30px; }
.daysubjects a { font-weight: bold; font-size: 12px; text-transform: uppercase; }
.day-date { font-weight: bold; font-size: 10px; color: #919191; text-align: left; border: 0px; margin: 0px 0px 4px 0px; padding: 4px 6px 2px 6px; }
.day-count { width: 100%; line-height: 32px; text-align: center; }
.day-count a { font-family: Helvetica; font-size: 33px; }

.tagstable { width: 550px; margin: 20px auto; }
.tagstable td { font-size: 11px; text-transform: uppercase; }
.tagstable a, ul.taglist a { font-family: Helvetica; font-weight: bold; font-size: 10px; text-transform: uppercase; }
ul.taglist { padding: 0px 15px 0px 0px; }
ul.taglist li { font-size: 9px; padding: 0px 3px 3px 9px; }

blockquote { background: #F7F7F7; padding: 8px; }
textarea, input, select { background: #F4F4F4; font-family: Arial; font-size: 11px; color: #777777; border: 1px solid #EBEBEB; padding: 2px; }
textarea:hover, input:hover, select:hover { background: #EEEEEE; }
code { font-family: Monospace; color: #777777; }
li { list-style-position: inside; list-style-type: bullet; margin: 2px 0px 0px 20px; padding: 0px 0px 2px 9px; }
h1, h2, h3, h4, h5 { font-family: Garamound, Times New Roman; font-style: italic; text-transform: lowercase; }

.ljuser a b { color: #D1382A; text-transform: lowercase; }
.ljuser img { width: 0px; height: 0px; background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/041.png) no-repeat bottom left; padding: 10px 10px 0px 0px !important; }
img[src*="userinfo.gif"], img[src*="user_ontd.gif"], img[src="http://www.livejournal.com/stc/img/userinfo-support.gif"], img[src*="community.gif"], img[src*="partnercomm.gif"], img[src*="sponcomm.gif"], img[src*="icon_protected.gif"], img[src*="icon_groups.gif"], img[src*="icon_private.gif"], img[src*="syndicated.gif"], img[src*="newsinfo.gif"], div.ContextualPopup img[src="http://l-stat.livejournal.com/horizon/upgrade-paid-icon.gif"] { width: 0px; height: 0px; margin: 0px 1px 2px 0px !important; padding: 10px 10px 0px 0px !important; }
img[src*="userinfo.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/031-1.png) no-repeat center left !important; }
img[src*="user_ontd.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/092.png) no-repeat center left !important; }
img[src="http://www.livejournal.com/stc/img/userinfo-support.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/041.png) no-repeat center left !important; }
img[src*="community.gif"], img[src*="partnercomm.gif"], img[src*="sponcomm.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/045-1.png) no-repeat center left !important; }
img[src*="syndicated.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/001.png) no-repeat center left !important; }
img[src*="newsinfo.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/078.png) no-repeat center left !important; }
img[src*="icon_protected.gif"], img[src*="icon_groups.gif"], img[src*="icon_private.gif"] { background: no-repeat center left !important; margin: 0px 2px 0px 0px; padding: 10px 10px 0px 0px !important; }
img[src*="icon_protected.gif"], img[src*="icon_groups.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/181.png) !important; }
img[src*="icon_private.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/183.png) !important; }
img[src*="anonymous.gif"], img[src*="openid-profile.gif"], .replyform img[src*="userinfo.gif"], img[src*="none.gif"], img[src*="help.gif"], img[src*="pencil.gif"], img[src*="btn_edit.gif"] { height: 0px; width: 0px; background: no-repeat scroll 50% 50%; padding: 0px 0px 14px 15px !important; }
img[src*="anonymous.gif"] { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/earth.png); }
img[src*="openid-profile.gif"] { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/talking.png); }
.replyform img[src*="userinfo.gif"] { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/user-9.png) !important; }
img[src*="none.gif"] { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/happyface.png); }
img[src*="help.gif"] { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/exclamation.png); }
img[src*="pencil.gif"] { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/pencil-1.png); }
img[src*="btn_edit.gif"] { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/clipboard_full.png); }
img[src*="phonepost2.gif"] { height: 0px; width: 0px; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/phone.png) no-repeat center left !important; margin: 0px; padding: 16px 16px 0px 0px !important; }
div.ContextualPopup img[src="http://l-stat.livejournal.com/horizon/upgrade-paid-icon.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/arrow_up-3.gif) no-repeat center left; vertical-align: baseline !important; }

div.ContextualPopup div.Inner { width: 270px; background: none !important; font: 10px Arial; color: #555555 !important; border: 0px; }
div.ContextualPopup div.Userpic img { background-color: #FFFFFF; text-transform: uppercase; margin: 5px 0px 0px 20px; }
div.ContextualPopup div.Userpic img, div.ContextualPopup div.Inner div.Content { border: 1px solid #EEEEEE; padding: 5px; }
div.ContextualPopup .Relation { font-family: Arial; font-weight: bold !important; font-size: 14px !important; color: #D1382A !important; text-transform: lowercase; line-height: 12px; border-bottom: 1px dashed #E1E1E1; margin-bottom: 3px; padding-bottom: 7px; }
div.ContextualPopup div.Inner div.Content { background-color: #FFFFFF; }
div.ContextualPopup div.Inner div.Content a, div.ContextualPopup a { color: #222222 !important; text-decoration: none !important; text-transform: lowercase !important; }
div.ContextualPopup div.Inner div.Content a:hover { color: #D1382A !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 #99C930; padding: 2px 2px 5px 2px; margin: 0px 0px 8px 0px; }

#lj_controlstrip { background: #252525; font-size: 9px; border-bottom: 0px; }
#lj_controlstrip_statustext { color: #FFFFFF; text-transform: uppercase; }
#lj_controlstrip td { border-right: 0px; }
#lj_controlstrip td a, #lj_controlstrip td a:hover { color: #FFFFFF; text-transform: lowercase; text-decoration: none; }
#lj_controlstrip td a:hover { color: #D1382A; }
#lj_controlstrip select, #lj_controlstrip input { background: #353535 !important; font: 10px Arial !important; color: #FFFFFF !important; text-transform: uppercase; border: none; margin: 1px; padding: 1px 2px 1px 2px; }
#lj_controlstrip .ljuser a b, #lj_controlstrip .ljuser a b:hover { font-size: 14px; color: #FFFFFF; letter-spacing: -1px; }

DISPLAY > PRESENTATION Expand BASIC OPTIONS and ADDITIONAL OPTIONS

Userinfo Position in Entries → Right side of the Entry Text
Wrap Entry text under userinfo → Yes
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 - Support User - User ONTD - Commmunity - News - Syndicated
Entry Header → Protected/Groups - Private
Comment Pages → Anonymous - Open ID - User - None - Help - Pencil - Edit
Misc → Header

An easy way to replace all of the old URLs listed below with the new is to use CTRL + H when editing in a program like Notepad.