V. Looking Back: ourhappyhours

lu_hesperia in ourhappyhours

V. Looking Back

Nov 02, 2012 07:41

( STATIC ) ( LIVE ) V. LOOKING BACK→ S2 Flexible Squares
→ Basic, plus and paid; ad placement between entries or vertical.
→ Features custom comment pages, navigation and topbar.
→ Title, subtitle, and everything in the sidebar except for the link list is disabled.
→ IMPORTANT: The blue strip that appears on the friends page breaks the layout so I suggest using this fix.
PREVIEW AND CODE
Dark version: (Static) (Live)
/*- 005 Looking Back dark ver.
Layout by lu_hesperia at ourhappyhours.livejournal.com
Tiny icons by pinvoke.com -*/

@font-face {font-family: 'Carme'; font-style: normal; font-weight: 400; src: local('Carme Regular'), local('Carme'), url(http://themes.googleusercontent.com/static/fonts/carme/v4/Upg28fsDDYxCiFrWVodtfA.woff) format('woff');}

::selection {background-color:#808080; color:#f0f0f0;}

::-moz-selection {background-color:#808080; color:#f0f0f0;}

body {background-color: #111; text-align: justify; color:#eee; font-family: 'Carme', sans-serif; font-size: 11px; margin: 20px 0;}

strong, b {font-family: 'Carme';}

a, a:link, a:visited {color:#eee; text-decoration: underline;}

a:hover {color:#111; background-color:#fff; text-decoration: none; cursor:crosshair;}

ul {padding: 0px!important;}

blockquote {padding: 8px; border-top: 1px solid #333; border-bottom: 1px solid #333;}

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

h2 {font-weight: normal; color: #777!important; background-color: #191919; font-family: consolas; text-align: center; color: transparent; padding: 2px 0px; margin-top:-5px; text-transform: uppercase; font-size: 11px;}

b.ljcut-link a, b.ljcut-link a:link, b.ljcut-link a:visited {text-decoration:none!important;}

#content {margin-left: auto; margin-right: auto; background-color: transparent; padding: 0px;}

#maincontent {width: 430px; margin:auto; margin-top: 32px; padding-top:50px; font-size: 11px; background-color: transparent;}

#sidebar {text-align: justify; width:100%; margin-top: -27px; background-color: transparent; background-image: url('http://i.imgur.com/XBfMx.png'); position:fixed; z-index: 1; height: 50px; overflow: hidden;}

#sidebar div {display:none;}

#header {background-color: transparent; background-image: url('http://i.imgur.com/cFNQx.png'); width: 100%; color: #f1f1f1; text-align: center; font-size: 21px; text-transform: lowercase; position:fixed; margin-top: -52px; z-index:1;}

div#header a, div#header a:link, div#header a:visited {color: #f1f1f1; text-decoration: none;}

div#header a:hover {color: #111;}

.title {display:none}

.subtitle {display:none}

ul.navheader {margin: 0px;}

ul.navheader li {display: inline; text-align:center; padding: 0 3px;}

.subcontent {}

.entry {padding: 8px 15px; text-align: justify;}

.entry_text {min-height: 50px;}

.entry_text img {max-width: 400px;}

.userpic, .userpicfriends {position: relative; float: right; background-color: transparent!important; color: transparent!important; padding: 0px; margin: 0px -126px 0 0px; text-align: center; font-size: 10px;}

.userpic img, .userpicfriends img {background:transparent; border: 8px solid #191919; background-image: url(); width:80px; height:80px;}

.userpicfriends font {color:#eee;}

div.userpic a, div.userpic a:link, div.userpic a:visited, div.userpicfriends a, div.userpicfriends a:link, div.userpicfriends a:visited {color:#eee; text-decoration: none;}

div.userpic a:hover, div.userpicfriends a:hover {color:#eee; background-color:transparent;}

.date {color:#444; font-family: consolas; width: 160px; text-align: center; background-color: #111; margin:auto; margin-top: -8px; text-transform: uppercase;}

.subject {padding: 10px; width: 200px; margin: -20px 0 0 -239px; color: #f1f1f1; text-align: right; font-size: 21px; text-transform: lowercase;}

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

.subject a:hover {color: #111;}

.datesubject {border-top: 1px solid #333; height: 10px;}

.entry ul li {margin-left: 20px;}

.entry ol li {margin-left: -12px;}

.ljtags {color:#333; font-weight: bold; margin-top: 12px;}

div.ljtags a {font-weight: normal; text-decoration:none;}

.currents a, currents a:link, .currents a:visited, .currents a:hover {color:#eee; text-decoration:none; background-color:transparent;}

.currents {margin-bottom: 5px; text-transform: capitalize;}

.currentmood, .currentmusic, .currentgroups, .currentlocation {background-color: transparent;}

.currents strong, .currentmood strong, .currentgroups strong, .currentlocation strong, .currentmusic strong {color:#333;}

.comments {background-color:#191919; font-family: consolas; text-align: center; color: transparent; position: relative; padding: 2px 0px; margin-top:10px; margin-left: -15px; text-transform: uppercase; width: 430px;}

div.comments a, div.comments a:link, div.comments a:visited {color: #777; text-decoration: none;}

div.comments a:hover {color: #111;}

.separator {height: 35px;}

.sbarbody {text-align:center; padding-bottom:50px;}

div#sidebar_linklist.sbarbody {display:inline!important;}

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

li.sbaritem {display: inline; padding-left: 3px; padding-right: 3px; text-transform: uppercase; font-family:consolas;}

li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited {color:#f1f1f1; text-decoration: none;}

li.sbaritem a:hover {color:#111;}

li.sbartitle {display:none;}

li.sbarblank {margin-top: -12px;}

#footer {width:430px; text-align: right; font-size: 21px; text-transform: lowercase; z-index: 100; clear: both; margin:auto; margin-top: -25px;}

div#footer a, div#footer a:link, div#footer a:visited {text-decoration: none; color: #f1f1f1;}

div#footer a:hover {color: #111;}

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

ul.navfooter li {display: inline; margin: 0 0px 0 5px;}

.clearfoot {clear: both;}

#footer .viewing {display:none;}

ul.year {text-align: center; font-size: 20px; background-color: transparent; color: #f1f1f1; z-index: 100; clear: both; margin-top: -12px;}

ul.year a, ul.year a:link, ul.year a:visited {text-decoration:none; color:#f1f1f1;}

ul.year a:hover {text-decoration:none; color:#111;}

ul.year li {display: inline; padding-left:5px; padding-right:5px;}

table.yeartable {margin-left: auto; margin-right: auto;}

table.yeartable a, table.yeartable a:link, table.yeartable a:visited {text-decoration:none;}

table.yeartable td.yeardate, table.yeartable td.yearday {text-align: center; background-color: transparent;}

table.yeartable td.yearday {background-color: transparent;text-align: center;}

td.yearmonth {border-style: none;}

.ljtaglist {color: #666; background-color: transparent; list-style-type:none; padding: 5px 15px 15px 15px!important; border-bottom:1px solid #333;}

.ljtaglist a, ljtaglist a:link, ljtaglist a:visited {text-transform: uppercase; text-decoration: none;}

input#subject.textbox {font-size:11px;}

textarea#body.textbox {font-size:11px;}

textarea#commenttext.textbox {font-size:11px;}

div#qrformdiv {padding-bottom:15px}

.datesubjectcomment {background-color: transparent;}

.userpiccomment {width: 80px; height: 80px; float:right; position: relative; margin: -16px -141px 0 0; padding: 8px; background-color:#191919!important;}

.box {padding: 0px; clear: left; margin-top:-15px; margin-bottom: 20px;}

input, textarea {font-family:consolas; background-color: #191919; color: #fff; font-size: 9px; border: 0px;}

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

.commentreply {text-align: justify; margin: 5px 0px;}

.commentreply img {max-width:100%;}

.commentbox {border-top:1px solid #333; padding: 15px; background-color: transparent; margin-top: 10px; min-height: 70px;}

.commentboxpartial {padding: 10px;}

.commentinfo {margin-top: 10px; width: 100%;}

.skiplinks {text-align:center; color:transparent; text-transform:lowercase; font-size:10px; margin-top: -30px; margin-bottom: 17px;}

.skiplinks a, .skiplinks a:link, .skiplinks a:visited {color: #444; text-decoration: none;}

.skiplinks a:hover {color: #111;}

.clear {height: 0px;}

form#qrform table {border-width: 0px !important;}

div#qrformdiv {padding: 0px 15px 25px 15px;}

select {font-family:consolas; font-size: 11px; color: #333; background-color: #fff; cursor: crosshair;}

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], img[src*="icon_sticky.png"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"] , img[src*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_spam.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"] {height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent none no-repeat scroll 0 0; }

.subject img {vertical-align: middle !important;}

img[src*="icon_protected.gif"]{background-image: url(http://i.imgur.com/rkWgU.png);}

img[src*="icon_private.gif"]{background-image: url(http://i.imgur.com/mNHdJ.png);}

img[src*="icon_groups.gif"]{background-image: url(http://i.imgur.com/KgjGQ.png);}

img[src*="icon_sticky.png"]{background-image: url(http://i.imgur.com/FLp83.png);}

.ljuser img[src*="syndicated.gif"]{background-image: url(http://i.imgur.com/VW920.png) !important;}

.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i.imgur.com/r6EzA.png) !important;}

.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i.imgur.com/cJzp8.png) !important;}

.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i.imgur.com/zupNZ.png) !important;}

img[src*="btn_unspam.gif"]{background-image: url(http://i.imgur.com/wuJqY.png);}

img[src*="btn_spam.gif"]{background-image: url(http://i.imgur.com/o63uw.png);}

img[src*="btn_del.gif"]{background-image: url(http://i.imgur.com/Eci4Q.png);}

img[src*="btn_scr.gif"] {background-image: url(http://i.imgur.com/IW1FR.png);}

img[src*="btn_unscr.gif"] {background-image: url(http://i.imgur.com/aVYvC.png);}

img[src*="btn_freeze.gif"] {background-image: url(http://i.imgur.com/7KTc8.png);}

img[src*="btn_unfreeze.gif"] {background-image: url(http://i.imgur.com/80cia.png);}

img[src*="btn_track.gif"] {background-image: url(http://i.imgur.com/LrbKY.png);}

img[src*="btn_tracking.gif"] {background-image: url(http://i.imgur.com/LrbKY.png);}

img[src*="btn_tracking_thread.gif"] {background-image: url(http://i.imgur.com/LrbKY.png);}

img[src*="anonymous.gif"] {background-image: url(http://i.imgur.com/pOnEG.png);}

img[src*="openid-profile.gif"] {background-image: url(http://i.imgur.com/J4DG0.png);}

img[src*="userinfo.gif"] {background-image: url(http://i.imgur.com/NpNX0.png);}

img[src*="talk/none.gif"] {background-image: url(http://i.imgur.com/zKR7h.png);}

img[src*="help.gif"] {background-image: url(http://i.imgur.com/W4MKd.png);}

img[src*="pencil.gif"],img[src*="btn_edit.gif"] {background-image: url(http://i.imgur.com/AQfq6.png);}

span.i-ljuser img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://l-stat.livejournal.com/img/userinfo.gif?v=94.3) no-repeat !important; padding: 0 0 0 0 !important;}

span.i-ljuser img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://l-stat.livejournal.com/img/userinfo.gif?v=94.3) no-repeat !important; padding: 0 0 0 0 !important;}

span.ljuser a {text-decoration: none;}

span.ljuser a:hover {color;#fff!important;}

.w-cs {background-color: transparent!important; background-image: url('http://i.imgur.com/SKQmA.png')!important; color:#eee; min-height:50px; text-transform: lowercase; font-family: 'Carme', sans-serif; position:fixed;}

.w-cs a:link, .w-cs a:visited, .w-cs a:hover, .w-cs a:active {color:#eee; font: 10px 'Carme' !important;}

.w-cs .ljuser a:link, .w-cs .ljuser a:visited, .w-cs .ljuser a:hover, .w-cs .ljuser a:active, .w-cs .ljuser a:link b, .w-cs .ljuser a:visited b, .w-cs .ljuser a:hover b, .w-cs .ljuser a:active b {font-size: 12px !important; font-weight: bold !important; text-transform: none; font-family: 'Carme'!important; color: #eee!important;}

.w-cs .w-cs-userinfo {background-color: transparent!important; color:#eee; border:0px;}

.w-cs .w-cs-summary li.w-cs-i-tokens {border:0px;}

.w-cs a:link, .w-cs a:visited, .w-cs a:active {color: #eee !important;}

.w-cs a:hover {color:#eee !important}

.w-cs .w-cs-summary {background-color: transparent!important; background-image: url('')!important;}

.w-cs-user-controls .w-cs-status p {background-color: transparent!important; color:#eee !important; font-family: 'Carme', sans-serif; font-size:11px;}

.w-cs .w-cs-summary {background:transparent!important; color:transparent!important}

.w-cs .w-cs-search .w-cs-text {width: 150px; border-right: 25px solid #222;}

.w-cs .w-cs-search-inner {display:none;}

.w-cs .w-cs-text {background-color:#222}

.w-cs .w-cs-menu li {padding-left:0px!important; background: none!important;}

.w-cs .w-cs-menu li.w-cs-i-home a, .w-cs .w-cs-menu li.w-cs-i-post a, .w-cs .w-cs-menu li.w-cs-i-friends a, .w-cs .w-cs-menu li.w-cs-i-account a, .w-cs .w-cs-menu li.w-cs-i-faq a, .w-cs .w-cs-menu li.w-cs-i-recent a, .w-cs .w-cs-menu li.w-cs-i-entries a, .w-cs .w-cs-menu li.w-cs-i-invite a, .w-cs .w-cs-menu li.w-cs-i-add a, .w-cs .w-cs-menu li.w-cs-i-leave a, .w-cs .w-cs-menu li.w-cs-i-watch a, .w-cs .w-cs-menu li.w-cs-i-unwatch a, .w-cs .w-cs-menu li.w-cs-i-directory a, .w-cs .w-cs-menu li.w-cs-i-invites a, .w-cs .w-cs-menu li.w-cs-i-members a, .w-cs .w-cs-menu li.w-cs-i-members a.i-invites, .w-cs .w-cs-menu li.w-cs-i-catalogue a, .w-cs .w-cs-menu li.w-cs-i-edit a, .w-cs .w-cs-menu li.w-cs-i-manage a, .w-cs .w-cs-menu li.w-cs-i-gift a, .w-cs .w-cs-menu li.w-cs-i-tags a, .w-cs .w-cs-menu li.w-cs-i-message a, .w-cs .w-cs-menu li.w-cs-i-groups a, .w-cs .w-cs-menu li.w-cs-i-calendar a, .w-cs .w-cs-menu li.w-cs-i-friendsfriends a, .w-cs .w-cs-menu li.w-cs-i-like a, .w-cs .w-cs-menu li.w-cs-i-share a {padding-left:0px;}

::-webkit-scrollbar {width:6px; height:6px;}

::-webkit-scrollbar-track-piece {background-color:#111;}

::-webkit-scrollbar-thumb {background-color:#191919;}

::-webkit-scrollbar-thumb:hover {background-color:#191919;}

::-webkit-scrollbar-corner {background-color:#111;}

.b-popup-contextual .i-popup-arrtl, .b-popup-contextual .i-popup-arrbl {display:none;}

.b-popup-contextual .i-popup-arrtr, .b-popup-contextual .i-popup-arrbr {display:none;}

.b-contextualhover {min-width:150px; width: auto; min-height: 38px; margin-left: 0px; color: #eee; text-align: justify; font-size: 11px!important; font-family: 'Carme', sans-serif; line-height: 1.25;}

.b-contextualhover, .b-contextualhover div, .b-contextualhover p, .b-contextualhover ul, .b-contextualhover ol, .b-contextualhover li, .b-contextualhover label, .b-contextualhover img, .b-contextualhover span, .b-contextualhover h3, .b-contextualhover input {padding: 0; margin: 0; color: #eee; font-size:11px!important;}

.b-contextualhover img {border: none;}

.b-contextualhover a:link, .b-contextualhover a:visited {border-bottom: 0 !important; color:#eee!important; text-decoration: underline!important; background: none;}

.b-contextualhover a:hover, .b-contextualhover a:active, .b-contextualhover a:focus {border-bottom: 0 !important; color:#111!important; background-color:#fff!important; text-decoration: none!important; cursor:crosshair!important;}

.s-lanzelot .b-contextualhover a:link, .s-lanzelot .b-contextualhover a:visited {border-bottom: 0 !important; color:#eee!important; text-decoration: underline!important;}

.s-lanzelot .b-contextualhover a:hover, .s-lanzelot .b-contextualhover a:active, .s-lanzelot .b-contextualhover a:focus {border-bottom: 0 !important; color:#111!important; background-color:#fff!important; text-decoration: none!important; cursor:crosshair!important;}

.index-page .b-contextualhover a:link, .index-page .b-contextualhover a:visited, .index-page .b-contextualhover a:hover, .index-page .b-contextualhover a:active, .index-page .b-contextualhover a:focus {color:#111!important; background-color:#fff!important; text-decoration: none!important; cursor:crosshair!important;}

.b-contextualhover .alias-unavailable a:link, .b-contextualhover .alias-unavailable a:visited {color:#eee!important; text-decoration: underline!important;}

.b-contextualhover .alias-unavailable a:hover, .b-contextualhover .alias-unavailable a:active, .b-contextualhover .alias-unavailable A:focus {color:#111!important; background-color:#fff!important; text-decoration: none!important; cursor:crosshair!important;}

.b-contextualhover p {margin-bottom: 3px; font-size: 11px; line-height: 1.25;}

.b-contextualhover .input-checkbox {margin-right: 2px; vertical-align: middle;}

.b-contextualhover .b-contextualhover-section {overflow: hidden; padding: 0px;}

.b-contextualhover .b-contextualhover-side {margin: -11px -66px 0 0; height: 0px; float: right; width: 60px;}

.b-contextualhover .b-contextualhover-userpic {float: right; width: 55px; height: 55px; text-align: right;}

.b-contextualhover .b-contextualhover-userpic a, .b-contextualhover .b-contextualhover-userpic a:hover {border: none !important;}

.b-contextualhover .b-contextualhover-userpic img {max-width: 45px; max-height: 45px; border: 5px solid #191919;}

.b-contextualhover .b-contextualhover-title {padding-bottom: 0px;}

.b-contextualhover .b-contextualhover-title a:hover {text-decoration: none !important;}

.b-contextualhover .b-contextualhover-title h3 {color: #eee; font-family: 'Carme', sans-serif; margin-bottom: 2px; font-weight: normal; font-style: normal; font-size: 11px; line-height: 1.25;}

.b-contextualhover .b-contextualhover-options {margin: 0; padding: 1px 0; border-top: 0px; list-style: none;}

.b-contextualhover .b-contextualhover-options li {margin-bottom: 0px; line-height: 1.25; font-size: 11px!important;}

.b-contextualhover .b-contextualhover-options li a:hover {text-decoration: none !important;}

.b-contextualhover .b-contextualhover-param {line-height: 18px; margin:0 0 6px;}

.b-contextualhover .b-contextualhover-param-item {list-style: none;}

.b-contextualhover-param-item .b-icon-scapital {margin:0 2px 0 0;}

.b-icon-scapital {float: left; width: 16px; height: 16px; margin:0 2px 0 0; background-image: url(/img/icon-social-capital.png?v=19876); background-repeat: no-repeat; background-position: 0 50%;}

.b-icon-scapital-first {background-position: -17px 50%;}

.b-popup-outer {position: relative; padding: 1px; background: #111; border: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; z-index: 100;}

.b-popup-inner {padding: 10px; border: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;}

.b-popup div, .b-popup strong, .b-popup label {color: #eee;}Light version: (Static) (Live)/*- 005 Looking Back light ver.
Layout by lu_hesperia at ourhappyhours.livejournal.com
Tiny icons by pinvoke.com -*/

@font-face {font-family: 'Carme'; font-style: normal; font-weight: 400; src: local('Carme Regular'), local('Carme'), url(http://themes.googleusercontent.com/static/fonts/carme/v4/Upg28fsDDYxCiFrWVodtfA.woff) format('woff');}

::selection {background-color:#f5f5f5; color:#333;}

::-moz-selection {background-color:#f5f5f5; color:#333;}

body {text-align: justify; color:#333; font-family: 'Carme', sans-serif; font-size: 11px; margin: 20px 0;}

strong, b {font-family: 'Carme';}

a, a:link, a:visited {color:#333; text-decoration: underline;}

a:hover {color:#fff; background-color:#111; text-decoration: none; cursor:crosshair;}

ul {padding: 0px!important;}

blockquote {padding: 8px; border-top: 1px solid #333; border-bottom: 1px solid #333;}

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

h2 {font-weight: normal; color: #fff!important; background-color: #111; font-family: consolas; text-align: center; color: transparent; padding: 2px 0px; margin-top:-5px; text-transform: uppercase; font-size: 11px;}

b.ljcut-link a, b.ljcut-link a:link, b.ljcut-link a:visited {text-decoration:none!important;}

#content {margin-left: auto; margin-right: auto; background-color: transparent; padding: 0px;}

#maincontent {width: 430px; margin:auto; margin-top: 32px; padding-top:50px; font-size: 11px; background-color: transparent;}

#sidebar {text-align: justify; width:100%; margin-top: -27px; background-color: transparent; background-image: url('http://i.imgur.com/RLZeS.png'); position:fixed; z-index: 1; height: 50px; overflow: hidden;}

#sidebar div {display:none;}

#header {background-color: transparent; background-image: url('http://i.imgur.com/4V6Oi.png'); width: 100%; color: #000; text-align: center; font-size: 21px; text-transform: lowercase; position:fixed; margin-top: -52px; z-index:1;}

div#header a, div#header a:link, div#header a:visited {color: #000; text-decoration: none;}

div#header a:hover {color: #fff;}

.title {display:none}

.subtitle {display:none}

ul.navheader {margin: 0px;}

ul.navheader li {display: inline; text-align:center; padding: 0 3px;}

.subcontent {}

.entry {padding: 8px 15px; text-align: justify;}

.entry_text {min-height: 50px;}

.entry_text img {max-width: 400px;}

.userpic, .userpicfriends {position: relative; float: right; background-color: transparent!important; color: transparent!important; padding: 0px; margin: 0px -126px 0 0px; text-align: center; font-size: 10px;}

.userpic img, .userpicfriends img {background:transparent; border: 8px solid #111; background-image: url(); width:80px; height:80px;}

.userpicfriends font {color:#333;}

div.userpic a, div.userpic a:link, div.userpic a:visited, div.userpicfriends a, div.userpicfriends a:link, div.userpicfriends a:visited {color:#333; text-decoration: none;}

div.userpic a:hover, div.userpicfriends a:hover {color:#333; background-color:transparent;}

.date {font-family: consolas; width: 160px; text-align: center; background-color: white; margin:auto; margin-top: -8px; text-transform: uppercase;}

.subject {padding: 10px; width: 200px; margin: -20px 0 0 -239px; color: #000; text-align: right; font-size: 21px; text-transform: lowercase;}

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

.subject a:hover {color: #fff;}

.datesubject {border-top: 1px solid #333; height: 10px;}

.entry ul li {margin-left: 20px;}

.entry ol li {margin-left: -12px;}

.ljtags {color:#222; font-weight: bold; margin-top: 12px;}

div.ljtags a {font-weight: normal; text-decoration:none;}

.currents a, currents a:link, .currents a:visited, .currents a:hover {color:#333; text-decoration:none; background-color:transparent;}

.currents {margin-bottom: 5px; text-transform: capitalize;}

.currentmood, .currentmusic, .currentgroups, .currentlocation {background-color: transparent;}

.currents strong, .currentmood strong, .currentgroups strong, .currentlocation strong, .currentmusic strong {color:#222;}

.comments {background-color:#111; font-family: consolas; text-align: center; color: transparent; position: relative; padding: 2px 0px; margin-top:10px; margin-left: -15px; text-transform: uppercase; width: 430px;}

div.comments a, div.comments a:link, div.comments a:visited {color: #fff; text-decoration: none;}

div.comments a:hover {color: #111; background-color: #fff;}

.separator {height: 35px;}

.sbarbody {text-align:center; padding-bottom:50px;}

div#sidebar_linklist.sbarbody {display:inline!important;}

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

li.sbaritem {display: inline; padding-left: 3px; padding-right: 3px; text-transform: uppercase; font-family:consolas;}

li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited {color:#222; text-decoration: none;}

li.sbaritem a:hover {color:#fff;}

li.sbartitle {display:none;}

li.sbarblank {margin-top: -12px;}

#footer {width:430px; text-align: right; font-size: 21px; text-transform: lowercase; z-index: 100; clear: both; margin:auto; margin-top: -25px;}

div#footer a, div#footer a:link, div#footer a:visited {text-decoration: none;}

div#footer a:hover {}

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

ul.navfooter li {display: inline; margin: 0 0px 0 5px;}

.clearfoot {clear: both;}

#footer .viewing {display:none;}

ul.year {text-align: center; font-size: 20px; background-color: transparent; color: #000; z-index: 100; clear: both; margin-top: -12px;}

ul.year a, ul.year a:link, ul.year a:visited {text-decoration:none; color:#000;}

ul.year a:hover {text-decoration:none; color:#fff;}

ul.year li {display: inline; padding-left:5px; padding-right:5px;}

table.yeartable {margin-left: auto; margin-right: auto;}

table.yeartable a, table.yeartable a:link, table.yeartable a:visited {text-decoration:none;}

table.yeartable td.yeardate, table.yeartable td.yearday {text-align: center; background-color: #fff;}

table.yeartable td.yearday {background-color: #fff;text-align: center;}

td.yearmonth {border-style: none;}

.ljtaglist {color: #666; background-color: transparent; list-style-type:none; padding: 5px 15px 15px 15px!important; border-bottom:1px solid #333;}

.ljtaglist a, ljtaglist a:link, ljtaglist a:visited {text-transform: uppercase; text-decoration: none;}

input#subject.textbox {font-size:11px;}

textarea#body.textbox {font-size:11px;}

textarea#commenttext.textbox {font-size:11px;}

div#qrformdiv {padding-bottom:15px}

.datesubjectcomment {background-color: transparent;}

.userpiccomment {width: 80px; height: 80px; float:right; position: relative; margin: -16px -141px 0 0; padding: 8px; background-color:#111!important;}

.box {padding: 0px; clear: left; margin-top:-15px; margin-bottom: 20px;}

input, textarea {font-family:consolas; background-color: #111; color: #fff; font-size: 9px; border: 0px;}

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

.commentreply {text-align: justify; margin: 5px 0px;}

.commentreply img {max-width:100%;}

.commentbox {border-top:1px solid #333; padding: 15px; background-color: transparent; margin-top: 10px; min-height: 70px;}

.commentboxpartial {padding: 10px;}

.commentinfo {margin-top: 10px; width: 100%;}

.skiplinks {text-align:center; color:transparent; text-transform:lowercase; font-size:10px; margin-top: -30px; margin-bottom: 17px;}

.skiplinks a, .skiplinks a:link, .skiplinks a:visited {text-decoration: none;}

.skiplinks a:hover {}

.clear {height: 0px;}

form#qrform table {border-width: 0px !important;}

div#qrformdiv {padding: 0px 15px 25px 15px;}

select {font-family:consolas; font-size: 11px; color: #333; background-color: #fff; cursor: crosshair;}

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], img[src*="icon_sticky.png"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"] , img[src*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_spam.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"] {height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent none no-repeat scroll 0 0; }

.subject img {vertical-align: middle !important;}

img[src*="icon_protected.gif"]{background-image: url(http://i.imgur.com/rkWgU.png);}

img[src*="icon_private.gif"]{background-image: url(http://i.imgur.com/mNHdJ.png);}

img[src*="icon_groups.gif"]{background-image: url(http://i.imgur.com/KgjGQ.png);}

img[src*="icon_sticky.png"]{background-image: url(http://i.imgur.com/FLp83.png);}

.ljuser img[src*="syndicated.gif"]{background-image: url(http://i.imgur.com/VW920.png) !important;}

.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i.imgur.com/r6EzA.png) !important;}

.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i.imgur.com/cJzp8.png) !important;}

.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i.imgur.com/zupNZ.png) !important;}

img[src*="btn_unspam.gif"]{background-image: url(http://i.imgur.com/wuJqY.png);}

img[src*="btn_spam.gif"]{background-image: url(http://i.imgur.com/o63uw.png);}

img[src*="btn_del.gif"]{background-image: url(http://i.imgur.com/Eci4Q.png);}

img[src*="btn_scr.gif"] {background-image: url(http://i.imgur.com/IW1FR.png);}

img[src*="btn_unscr.gif"] {background-image: url(http://i.imgur.com/aVYvC.png);}

img[src*="btn_freeze.gif"] {background-image: url(http://i.imgur.com/7KTc8.png);}

img[src*="btn_unfreeze.gif"] {background-image: url(http://i.imgur.com/80cia.png);}

img[src*="btn_track.gif"] {background-image: url(http://i.imgur.com/LrbKY.png);}

img[src*="btn_tracking.gif"] {background-image: url(http://i.imgur.com/LrbKY.png);}

img[src*="btn_tracking_thread.gif"] {background-image: url(http://i.imgur.com/LrbKY.png);}

img[src*="anonymous.gif"] {background-image: url(http://i.imgur.com/pOnEG.png);}

img[src*="openid-profile.gif"] {background-image: url(http://i.imgur.com/J4DG0.png);}

img[src*="userinfo.gif"] {background-image: url(http://i.imgur.com/NpNX0.png);}

img[src*="talk/none.gif"] {background-image: url(http://i.imgur.com/zKR7h.png);}

img[src*="help.gif"] {background-image: url(http://i.imgur.com/W4MKd.png);}

img[src*="pencil.gif"],img[src*="btn_edit.gif"] {background-image: url(http://i.imgur.com/AQfq6.png);}

span.i-ljuser img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important; background: transparent url(http://l-stat.livejournal.com/img/userinfo.gif?v=94.3) no-repeat !important; padding: 0 0 0 0 !important;}

span.i-ljuser img[src*="img/community.gif"] {width: 0 !important; height: 0 !important; background: transparent url(http://l-stat.livejournal.com/img/userinfo.gif?v=94.3) no-repeat !important; padding: 0 0 0 0 !important;}

span.ljuser a {text-decoration: none;}

span.ljuser a:hover {color;#fff!important;}

.w-cs {background-color: transparent!important; background-image: url('http://i.imgur.com/wPNDu.png')!important; color:#222; min-height:50px; text-transform: lowercase; font-family: 'Carme', sans-serif; position:fixed;}

.w-cs a:link, .w-cs a:visited, .w-cs a:hover, .w-cs a:active {font: 10px 'Carme' !important;}

.w-cs .ljuser a:link, .w-cs .ljuser a:visited, .w-cs .ljuser a:hover, .w-cs .ljuser a:active, .w-cs .ljuser a:link b, .w-cs .ljuser a:visited b, .w-cs .ljuser a:hover b, .w-cs .ljuser a:active b {font-size: 12px !important; font-weight: bold !important; text-transform: none; font-family: 'Carme'!important; color: #222 !important;}

.w-cs .w-cs-userinfo {background-color: transparent!important; color:#222; border:0px;}

.w-cs .w-cs-summary li.w-cs-i-tokens {border:0px;}

.w-cs a:link, .w-cs a:visited, .w-cs a:active {color: #222 !important;}

.w-cs a:hover {color:#222 !important}

.w-cs .w-cs-summary {background-color: transparent!important; background-image: url('')!important;}

.w-cs-user-controls .w-cs-status p {background-color: transparent!important; color:#222 !important; font-family: 'Carme', sans-serif; font-size:11px;}

.w-cs .w-cs-summary {background:transparent!important; color:transparent!important}

.w-cs .w-cs-search .w-cs-text {width: 150px; border-right: 25px solid #111;}

.w-cs .w-cs-search-inner {display:none;}

.w-cs .w-cs-text {background-color:#111}

.w-cs .w-cs-menu li {padding-left:0px!important; background: none!important;}

.w-cs .w-cs-menu li.w-cs-i-home a, .w-cs .w-cs-menu li.w-cs-i-post a, .w-cs .w-cs-menu li.w-cs-i-friends a, .w-cs .w-cs-menu li.w-cs-i-account a, .w-cs .w-cs-menu li.w-cs-i-faq a, .w-cs .w-cs-menu li.w-cs-i-recent a, .w-cs .w-cs-menu li.w-cs-i-entries a, .w-cs .w-cs-menu li.w-cs-i-invite a, .w-cs .w-cs-menu li.w-cs-i-add a, .w-cs .w-cs-menu li.w-cs-i-leave a, .w-cs .w-cs-menu li.w-cs-i-watch a, .w-cs .w-cs-menu li.w-cs-i-unwatch a, .w-cs .w-cs-menu li.w-cs-i-directory a, .w-cs .w-cs-menu li.w-cs-i-invites a, .w-cs .w-cs-menu li.w-cs-i-members a, .w-cs .w-cs-menu li.w-cs-i-members a.i-invites, .w-cs .w-cs-menu li.w-cs-i-catalogue a, .w-cs .w-cs-menu li.w-cs-i-edit a, .w-cs .w-cs-menu li.w-cs-i-manage a, .w-cs .w-cs-menu li.w-cs-i-gift a, .w-cs .w-cs-menu li.w-cs-i-tags a, .w-cs .w-cs-menu li.w-cs-i-message a, .w-cs .w-cs-menu li.w-cs-i-groups a, .w-cs .w-cs-menu li.w-cs-i-calendar a, .w-cs .w-cs-menu li.w-cs-i-friendsfriends a, .w-cs .w-cs-menu li.w-cs-i-like a, .w-cs .w-cs-menu li.w-cs-i-share a {padding-left:0px;}

::-webkit-scrollbar {width:6px; height:6px;}

::-webkit-scrollbar-track-piece {background-color:#fff;}

::-webkit-scrollbar-thumb {background-color:#111;}

::-webkit-scrollbar-thumb:hover {background-color:#111;}

::-webkit-scrollbar-corner {background-color:#fff;}

.b-popup-contextual .i-popup-arrtl, .b-popup-contextual .i-popup-arrbl {display:none;}

.b-popup-contextual .i-popup-arrtr, .b-popup-contextual .i-popup-arrbr {display:none;}

.b-contextualhover {min-width:150px; width: auto; min-height: 38px; margin-left: 0px; color: #fff; text-align: justify; font-size: 11px!important; font-family: 'Carme', sans-serif; line-height: 1.25;}

.b-contextualhover, .b-contextualhover div, .b-contextualhover p, .b-contextualhover ul, .b-contextualhover ol, .b-contextualhover li, .b-contextualhover label, .b-contextualhover img, .b-contextualhover span, .b-contextualhover h3, .b-contextualhover input {padding: 0; margin: 0; color: #fff; font-size:11px!important;}

.b-contextualhover img {border: none;}

.b-contextualhover a:link, .b-contextualhover a:visited {border-bottom: 0 !important; color:#fff!important; text-decoration: underline!important; background: none;}

.b-contextualhover a:hover, .b-contextualhover a:active, .b-contextualhover a:focus {border-bottom: 0 !important; color:#111!important; background-color:#fff!important; text-decoration: none!important; cursor:crosshair!important;}

.s-lanzelot .b-contextualhover a:link, .s-lanzelot .b-contextualhover a:visited {border-bottom: 0 !important; color:#fff!important; text-decoration: underline!important;}

.s-lanzelot .b-contextualhover a:hover, .s-lanzelot .b-contextualhover a:active, .s-lanzelot .b-contextualhover a:focus {border-bottom: 0 !important; color:#111!important; background-color:#fff!important; text-decoration: none!important; cursor:crosshair!important;}

.index-page .b-contextualhover a:link, .index-page .b-contextualhover a:visited, .index-page .b-contextualhover a:hover, .index-page .b-contextualhover a:active, .index-page .b-contextualhover a:focus {color:#111!important; background-color:#fff!important; text-decoration: none!important; cursor:crosshair!important;}

.b-contextualhover .alias-unavailable a:link, .b-contextualhover .alias-unavailable a:visited {color:#fff!important; text-decoration: underline!important;}

.b-contextualhover .alias-unavailable a:hover, .b-contextualhover .alias-unavailable a:active, .b-contextualhover .alias-unavailable A:focus {color:#111!important; background-color:#fff!important; text-decoration: none!important; cursor:crosshair!important;}

.b-contextualhover p {margin-bottom: 3px; font-size: 11px; line-height: 1.25;}

.b-contextualhover .input-checkbox {margin-right: 2px; vertical-align: middle;}

.b-contextualhover .b-contextualhover-section {overflow: hidden; padding: 0px;}

.b-contextualhover .b-contextualhover-side {margin: -11px -75px 0 0; height: 0px; float: right; width: 60px;}

.b-contextualhover .b-contextualhover-userpic {float: right; width: 55px; height: 55px; text-align: right;}

.b-contextualhover .b-contextualhover-userpic a, .b-contextualhover .b-contextualhover-userpic a:hover {border: none !important;}

.b-contextualhover .b-contextualhover-userpic img {max-width: 45px; max-height: 45px; border: 5px solid #111;}

.b-contextualhover .b-contextualhover-title {padding-bottom: 0px;}

.b-contextualhover .b-contextualhover-title a:hover {text-decoration: none !important;}

.b-contextualhover .b-contextualhover-title h3 {color: #fff; font-family: 'Carme', sans-serif; margin-bottom: 2px; font-weight: normal; font-style: normal; font-size: 11px; line-height: 1.25;}

.b-contextualhover .b-contextualhover-options {margin: 0; padding: 1px 0; border-top: 0px; list-style: none;}

.b-contextualhover .b-contextualhover-options li {margin-bottom: 0px; line-height: 1.25; font-size: 11px!important;}

.b-contextualhover .b-contextualhover-options li a:hover {text-decoration: none !important;}

.b-contextualhover .b-contextualhover-param {line-height: 18px; margin:0 0 6px;}

.b-contextualhover .b-contextualhover-param-item {list-style: none;}

.b-contextualhover-param-item .b-icon-scapital {margin:0 2px 0 0;}

.b-icon-scapital {float: left; width: 16px; height: 16px; margin:0 2px 0 0; background-image: url(/img/icon-social-capital.png?v=19876); background-repeat: no-repeat; background-position: 0 50%;}

.b-icon-scapital-first {background-position: -17px 50%;}

.b-popup-outer {position: relative; padding: 1px; background: #111; border: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; z-index: 100;}

.b-popup-inner {padding: 10px; border: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;}

.b-popup div, .b-popup strong, .b-popup label {color: #fff;}INSTALLATION
(1) Apply any Flexible Squares theme. Make sure the page set up is either 2 Column (sidebar on left) or 2 Column (sidebar on right) or else the topbar won't show. Set the ads to vertical or between entries.
(2) Display → Navigation Strip color: Dark gray for the dark version and Light gray for the light version.
(3) Text → There you can edit your navigation, currents and comments text so that they look like in the preview.
(4) Sidebar → Ordering: Link List.
(5) Custom CSS → Set all drop-down boxes to No and paste the code.NOTES AND CREDITS
→ Don't redistribute or claim as your own.
→ Credit is nice.
→ Tiny icons by pinvoke.com
→ Preview icon by snm_queen at iconstrain

♦ black and white, ♠ topbar, ♦ grayscale, ♪ multiple versions, ≈ fixed width, ∞ flexible squares, • layout