033 - Higher & Higher [Flexible Squares]

[kill_zombie]

Higher & Higher ►LIVE | STATIC | FAQ


Layout Information
TESTED BROWSERS Mozilla Firefox, Safari, Internet Explorer
PROBLEMS? None at all :)
FEATURES Tiny icons, contextual pop ups, custom nav-strip, pretty rounded corners for FF users
DISABLED Journal title/subtitle
AD-PLACEMENT Between Entries
FINAL NOTES And after I swore to never do Flexi-Squares again as well xD
Made as a Christmas gift for rhetoricians in a fandom-community gift meme.


Layout Installation
SELECT JOURNAL STYLE 01. Select any Flexible Squares theme (by Yati Mansor).

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

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

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

LJ STYLE: Flexible Squares
LAYOUT: Higher and Higher
MAKER: jessilestrange // kill_zombie
FOR: rhetoricians

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

*/

body { background-color: #F5F5F5; font-family: Arial, sans-serif; font-size: 11px; font-color: #666666; text-align: left; margin: 0px; padding: 0px; }
a, a:visited { color: #FF0073; text-decoration: none; }
a:hover { color: #777777; }

#content { width: 950px; margin: 0px auto 0px auto; padding: 0px; }
#header { background-color: #212121; font-family: Helvetica; font-size: 40px; color: #FF0073; letter-spacing: -2px; text-transform: lowercase; text-align: center; -moz-border-radius-bottomleft: 18px; -moz-border-radius-bottomright: 18px; margin: 0px; padding: 40px 20px 25px 20px; }
.headerimage { /* WANT A HEADER? EDIT THIS AND TRY AND MAKE HEADS AND TAILS OF THIS STUFF~ */ }
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited { color: #FFFFFF; }
div#header a:hover, div#footer a:hover { border-bottom: 5px solid #FF0073; }
ul.navheader { list-style-type: none; margin: 0px; padding: 0px; }
ul.navheader li { list-style-type: none; margin: 0px 14px 0px 0px; padding: 0px; display: inline; }
.title, .subtitle, .currents strong, #lj_controlstrip img { display: none; }

#maincontent { background-color: #FFFFFF; font-family: Verdana; color: #222222; text-align: left; margin: 15px 0px 0px 270px; padding: 10px 10px 0px 10px; }
#sidebar { float: left; width: 230px; background-color: #FFFFFF; font-family: Verdana; font-size: 11px; color: #444444; text-align: left; margin: 15px 0px 0px 0px; padding: 10px;}
#sidebar, #maincontent { border-top: 25px solid #212121; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; }
div#sidebar a { text-transform: uppercase; color: #555555; }
div#sidebar a:hover { color: #555555; }
.defaultuserpic { text-align: center; margin: 10px 0px 0px 0px; }
.defaultuserpic img { background-color: #FFFFFF; border: 10px solid #212121; padding: 2px; }
.sbarheader { padding: 0px 5px 0px 5px; }
.sbarbody { padding: 0px 5px 0px 5px; }
.sbarbody2 { font-size: 11px; color: #555555; padding: 5px 0px 10px 0px; }
li.sbaritem img[src="http://l-stat.livejournal.com/img/icon_protected.gif"], li.sbaritem img[src="http://l-stat.livejournal.com/img/icon_private.gif"], li.sbaritem img[src="http://l-stat.livejournal.com/img/icon_groups.gif"] { display: none; }
li.sbartitle { font-style: Tahoma; font-style: italic; font-size: 13px; text-transform: lowercase; list-style-type: none; margin: 15px 0px 0px 20px; }
li.sbaritem { list-style-type: none; border-bottom: 1px solid #EBEBEB; margin: 0px 0px 1px 0px; padding: 6px 5px 2px 5px; }
li.sbaritem:hover { border-bottom: 1px solid #AAAAAA; }
li.sbaritem a { font-size: 10px; }
ul.sbarlist { list-style-type: none; margin-left: 0px; padding-left: 0px; }
table.calendar { margin-right: auto; margin-left: auto; }
.sbarcalendar, .sbarcalendarposts { font-size: 11px; color: #666666; text-align: center; border: 1px solid #EBEBEB; padding: 5px; }
.sbarcalendar:hover, .sbarcalendarposts { background-color: #F7F7F7; }

.subcontent { font-family: Verdana; }
.datesubject { padding: 10px 0px 0px 0px; }
.subject, .subject a { font-family: Tahoma; font-size: 24px; letter-spacing: -2px; text-align: left; text-transform: lowercase; line-height: 18px; padding: 0px 0px 0px 5px; }
.date { top: 5px; font-family: Monospace; font-size: 10px; color: #999999; letter-spacing: 1px; text-transform: uppercase; margin: 0px 0px 0px 15px; }
.userpic, .userpicfriends { position: relative; float: right; background: none !important; z-index: 15; margin: 10px -135px 10px 0px !important; }
.userpicfriends { font-family: Tahoma; font-size: 12px; font-weight: bold; color: #888888; text-align: right; text-transform: uppercase; margin: 15px 10px 15px 15px; }
.userpicfriends a font { color: #888888; }
.userpic img, .userpicfriends img { background-color: #FFFFFF; height: 85px; width: 85px; border: 10px solid #212121; margin: 0px 0px 5px 0px; padding: 2px; }
.userpic img:hover, .userpicfriends img:hover, .defaultuserpic img:hover { border: 10px solid #FF0073; }
.entry { min-height: 100px; margin: 20px 10px 10px 10px; }
.entry ul li, .entry ol li { padding-left: 5px; margin-left: 15px; }
.entry_text { font-size: 12px; color: #555555; padding: 0px 5px 0px 0px; }
.entry_text a { font-weight: bold; text-transform: uppercase; }
.entry_text img { max-width: 620px; }

.ljtags { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/right_arrow.png) no-repeat; font-family: Tahoma; font-size: 0px; }
.ljtags { margin: 25px 0px 0px 0px; padding: 0px 0px 0px 25px; }
.ljtags a { margin: 0px 7px 0px 0px; }
.ljtags a, .currents, .currents a { font-weight: normal; font-size: 11px; color: #555555; text-transform: uppercase; }
.ljtags a:hover, .currents a:hover { color: #FF0073; border-bottom: 1px dotted #888888; }
.currents { font-family: Tahoma; font-size: 11px; color: #555555; padding: 0px 0px 0px 10px; }
.currentmood { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/favorite.png) no-repeat; }
.currentmusic { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/headphones.png) no-repeat; }
.currentlocation { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/home.png) no-repeat; }
.currentgroups { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/comment_bubble.png) no-repeat; }
.currentmood, .currentmusic, .currentlocation, .currentgroups { margin: 0px 0px 1px 0px; padding: 2px 0px 5px 23px; }

.comments { position: relative; width: 40px; font-family: Tahoma; font-size: 0px; text-align: center; margin: 10px 10px 0px 0px; }
div.comments a, div#footer a { font-size: 35px; color: #777777; line-height: 25px; letter-spacing: -2px; }
div.comments a { display: block; }
div.comments a:hover { color: #FF0073; }

.skiplinks { font-size: 0px; color: #FFFFFF; text-align: center; margin: 0px 0px 15px 0px; }
.skiplinks a { font-family: Verdana; font-size: 12px; color: #888888; text-transform: uppercase; margin: 0px 6px 0px 6px; }
.skiplinks a:hover { border-bottom: 1px dotted #888888; }

#footer { background-color: #212121; font-family: Tahoma; text-align: center; text-transform: lowercase; -moz-border-radius: 18px; margin: 30px 0px 0px 0px; padding: 25px 20px 23px 20px; clear: both; }
div#footer a, div#footer a:visited { font-size: 25px; letter-spacing: -1px; }
ul.navfooter { padding: 0px; margin: 0px; }
ul.navfooter li { display: inline; margin: 0px 13px 0px 0px; }
li.viewing { font-size: 13px; color: #555555; text-transform: uppercase; letter-spacing: 1px; }

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

.box { padding: 5px; clear: left; }
.reply { position: relative; font-family: Tahoma; font-size: 11px; color: #000000; text-align: left; line-height: 250%; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; }
.replytoposter, .replytosubject { background: transparent; font-family: Tahoma; font-size: 11px; font-weight: bold; color: #000000; text-align: left; }
.userpiccomment { float: left; max-width: 75px; max-height: 75px; border-left: 10px solid #212121; margin: 0px 20px 10px 0px; }
.userpiccomment:hover { border-left: 10px solid #FF0073; }
.datesubjectcomment { background-color: #F7F7F7; color: #777777; -moz-border-radius: 10px; padding: 10px; margin: 10px 0px 0px 0px; }
.datesubjectcomment a:link { color: #888888; }
.commentreply { font-size: 12px; color: #555555; padding: 10px 10px 15px 10px; }
.commentbox { margin: 10px; padding: 5px; }
.commentboxpartial { font-family: Tahoma; font-size: 11px; color: #777777; text-transform: lowercase; border-left: 10px solid #B3E8E6; margin: 13px 0px 13px 0px; padding: 13px 30px 13px 10px; }
.commentinfo { width: 100%; margin: 10px 0px 0px 0px; }

ul.year { font-family: Tahoma; font-size: 28px; color: #888888; letter-spacing: -2px; text-align: center; line-height: 23px; padding: 0px 0px 30px 0px; }
ul.year a { color: #777777; }
ul.year li { display: block; }
td.yearmonth { font-family: Tahoma; font-size: 12px; color: #777777; text-transform: uppercase; border-style: none; }
table.yeartable { width: 90%; font-family: Verdana; color: #8888888; margin: 0px auto 0px auto; }
table.yeartable td.yearday { font-size: 13px; text-align: center; text-transform: uppercase; }
table.yeartable td.yeardate, table.yeartable td.yearday { border: 1px solid #EBEBEB; padding: 1px; }
table.yeartable td.yeardate, table.yeartable td.yearday { background-color: #F7F7F7; color: #888888; }
table.yeartable td.yeardate:hover { background-color: #F9F9F9; }
table.yeartable td.yeardate a:hover { #555555; }
dl, dt { font-family: Tahoma; text-align: left; }
dl { font-size: 11px; line-height: 1.5em; }
dl a { font-weight: bold; text-transform: uppercase; }
dl a:hover { color: #666666; }
dt { font-size: 17px; font-weight: lighter; }

.ljtaglist { font-family: Tahoma; color: #888888; list-style-position: outside; list-style-type: decimal-leading-zero; }
.ljtaglist li { font-size: 11px; }
.ljtaglist a { font-size: 14px; text-transform: lowercase; letter-spacing: -1px; }

b, strong { color: #212121; }
i, em { color: #444444; }
u, strike { color: #666666; }
small { font-size: 9px; }
h1, h2, h3, h4, h5 { font-family: Tahoma; font-weight: normal; color: #FF0073; text-transform: lowercase; letter-spacing: -1px; }
h1 { font-size: 30px; }
h2 { font-size: 27px; }
h3 { font-size: 22px; }
h4 { font-size: 17px; }
h5 { font-size: 15px; }
p, td, blockquote { font-size: 11px; }
code, kbd, pre, tt { font-family: Monospace; }
textarea, input, select { background-color: #F7F7F7; font-family: Arial font-size: 10px; color: #555555; border: 1px solid #EBEBEB; margin: 1px; padding: 1px; }
blockquote { background-color: #F7F7F7; font-size: 13px; font-style: italic; line-height: 15px; -moz-border-radius: 10px; padding: 9px; }

.ljuser a b { font-weight: bold; color: #FF0073; text-transform: lowercase; }
.ljuser a b:hover { border-bottom: 1px dotted #888888; }
.ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/userinfo-gray.png); padding: 9px 9px 1px 1px !important; background-position: center left;}
.ljuser img[src*="userinfo.gif"] { background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/userinfo-gray.png); padding: 9px 9px 1px 1px !important; background-position: center left; }
.ljuser img[src*="community.gif"] { background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/community-gray.png); padding: 8px 9px 1px 1px !important; background-position: center left; }
.subject img[src*="icon_protected.gif"]{ width: 0; height: 0; background-repeat: no-repeat; padding: 16px 16px 0px 0px; margin: 0px 2px 0px 0px; !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/56-1.png); background-position: center left; }
.subject img[src*="icon_private.gif"]{ width: 0; height: 0; background-repeat: no-repeat; padding: 16px 16px 0px 0px; margin: 0px 2px 0px 0px; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/72-1.png); background-position: center left; }
img[src*="icon_groups.gif"] { height: 0px; width: 0px; padding: 16px 16px 0px 0px !important; margin: 0px 2px 0px 0px; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/42-1.png); }
img[src*="btn_del.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/delete.png); }
img[src*="btn_scr.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/screen.png);}
img[src*="btn_unscr.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/unfreezeorunscreen.png); }
img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/link-1.png); }
img[src*="btn_track.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/track-2.gif); }
img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/reply.png); }

img[src*="anonymous.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/private-gray.gif); }
img[src*="openid-profile.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/private-blue.gif); }
img[src*="talk/none.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/readcomments.gif); }
img[src*="help.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/flag.gif); }
.Note .Inner { background: #FFFFFF none repeat scroll 0 0; border: none; }

div.ContextualPopup div.Inner { width: 260px; background: #F7F7F7 !important; font: 10px Arial; color: #555555 !important; border: 1px solid #F0F0F0 }
div.ContextualPopup div.Userpic img { background-color: #F7F7F7 border-right: 10px solid #007E84; padding: 0px 2px 0px 0px; margin: 10px; }
div.ContextualPopup div.Userpic img:hover { filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; !important }
div.ContextualPopup .Relation { font-family: Georgia; font-style: italic !important; font-weight: bold !important; font-size: 14px !important; color: #FF0073 !important; text-transform: lowercase; border-bottom: 1px solid #F0F0F0; margin-bottom: 3px; padding-bottom: 5px; }
div.ContextualPopup div.Inner div.Content a { font-weight: normal; color: #444444 !important; text-decoration: none !important; text-transform: uppercase; }
div.ContextualPopup div.Inner div.Content a:hover { color: #FF0073 !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: 0px; }
#lj_controlstrip td { background: #212121; color: #FFFFFF; text-transform: uppercase; border-right: 0px; }
#lj_controlstrip select, #lj_controlstrip input { background-color: #111111 !important; font: 9px Arial !important; color: #FFFFFF !important; text-transform: uppercase; border: 1px solid #3D3D3D; margin: 1px; padding: 1px; }
#lj_controlstrip select:hover, #lj_controlstrip input:hover, textarea:hover, input:hover, select:hover { border: 1px solid #FF0073; }
#lj_controlstrip td a { color: #FFFFFF; }
#lj_controlstrip td a:hover {color: #FF0073; text-decoration: none; }
#lj_controlstrip .ljuser img { display: none; }
#lj_controlstrip .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"], #lj_controlstrip .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { display: none; }
#lj_controlstrip .ljuser a b { font-size: 16px; font-weight: bold; color: #FF0073; text-transform: lowercase; letter-spacing: -1px; }
#lj_controlstrip .ljuser a b:hover { border-bottom: 1px dotted #999999; }

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
Entry Header - Protected - Private - Groups
Metadata + Tags - Tags - Mood - Music - Location - Groups
Comments → Delete - Screen - Unscreen - Freeze - Track - Tracking - Anonymous - Open ID - Talk/None - Help