Faded; Flexible Squares

Feb 21, 2013 21:31



( STATIC ) ( LIVE ) VII. FADED→ S2 Flexible Squares
→ Basic, plus and paid; ad placement between entries or vertical.
→ Features custom comment pages, title and sidebar.
→ Navigation and everything in the sidebar except for the blurb, the link list and the default userpic is disabled.
→ Only the first five links will be visible.
PREVIEW AND CODE
Wide version: (Static) (Live)
/*- 007 Faded wide ver.
Layout by lu_hesperia at ourhappyhours.livejournal.com
Tiny icons by pinvoke.com -*/

body {background:#f6f6f6 url() repeat fixed; color:#dedede; font-family: Cambria, Georgia, serif; font-size: 12px;}

::selection {background-color:#888; color:#dbdbdb;}

::-moz-selection {background-color:#888; color:#dbdbdb;}

a, a:link, a:visited {color:#cbcbcb; text-decoration: none; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

a:hover {color:#dedede; text-decoration: none; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

p, td {}

blockquote {padding: 8px 12px; border-left: 2px solid #dedede; border-right: 2px solid #dedede; background:#f6f6f6;}

code, kbd, pre, tt {font-family: 'Monospace', monospace; font-size: 11px;}

code:hover {background:#dedede; color:#f6f6f6;}

strong, b {}

h2 {display:none;}

img {-webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s;}

img:hover {-webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; -webkit-filter: opacity(0.90) grayscale(0.75) contrast(0.95) ; -moz-filter: opacity(0.90) grayscale(0.75) contrast(0.95); -o-filter: opacity(0.90) grayscale(0.75) contrast(0.95); -ms-filter: opacity(0.90) grayscale(0.75) contrast(0.95); filter: opacity(0.90) grayscale(0.75) contrast(0.95);}

#content {width: 1055px; margin-left: auto; margin-right: auto; margin-top: 30px;}

#maincontent {width:600px; margin-left:290px;}

#sidebar {margin-left:15px; padding-top: 50px; position:fixed; width: 225px; float: left; text-align: justify; font-size:11px; font-style:italic;}

.sbarheader {padding: 0px 5px 0px 5px;}

#sidebar_linklist.sbarbody {height: 108px; overflow:hidden;}

#sidebar_summary.sbarbody {display:none;}

.sbarbody2 {margin-top: 50px; border-top: 1px solid; padding-top: 5px; padding-bottom: 10px;}

.sbarbody2 a {}

.sbarbody2 img {max-width:225px;}

#sidebar a, #sidebar a:link, #sidebar a:visited {}

#sidebar a:hover {}

table.calendar {display:none;}

.sbarcalendar {display:none;}

.sbarcalendarposts {display:none;}

li.tagcloud {line-height: 0.90; padding-bottom:10px;}

ul.sbarlist {list-style:none; padding:0px!important;}

li.sbaritem {font-size: 10px; background-color: #fff; text-align: right; text-transform:uppercase; margin-top:3px; padding:2px 3px; border-bottom:1px solid #dedede; letter-spacing: 2px; font-style: normal;}

li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited {color: #cbcbcb;}

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

li.sbaritem:hover {background-color: transparent;}

li.sbartitle {display:none;}

#header {position: fixed; margin-top:172px; margin-left:15px;}

.navheader {display:none;}

.title {font-family: georgia; color: #fff; font-size: 25px; text-shadow: 1px 1px #dedede; font-style: italic; text-transform: lowercase; width:180px; height:30px; overflow:hidden;}

.subtitle {display:none;}

.subcontent {border: 1px solid; background-color: #fff;}

.entry {padding: 15px; color: #999; text-align: justify;}

.entry_text {min-height: 28px;}

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

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

.userpic img, .userpicfriends img {background:#dedede; padding:10px;}

.userpicfriends font {color:#cbcbcb;}

div.userpic a, div.userpic a:link, div.userpic a:visited, div.userpicfriends a, div.userpicfriends a:link, div.userpicfriends a:visited {color:#cbcbcb;}

.date {text-transform: uppercase; font-size:9px; text-align: center;}

.subject {text-transform: lowercase; font-size:18px; text-align: center; line-height: 1; padding-bottom: 5px; border-bottom: 1px solid;}

.subject:hover {background-color: #f6f6f6;}

.subject a, .subject a:link, .subject a:visited, .subject a:hover {color: #cbcbcb;}

.datesubject {padding: 15px; padding-bottom: 0px;}

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

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

.ljtags {margin-top: 12px; text-align: left; font-size: 11px; line-height: 1.1;}

.currents a, currents a:link, .currents a:visited, .currents a:hover {color:#cbcbcb;}

.currents {text-transform:capitalize; color:#cbcbcb; font-size:11px; line-height: 1.1;}

.currents strong, .currentmood strong, .currentgroups strong, .currentlocation strong, .currentmusic strong {color:#999; font-weight:normal;}

.comments {margin-top: 15px; border-top: 1px solid #dedede; padding-top: 5px; font-size: 9px; text-transform: uppercase; text-align: center; color: transparent;}

.comments a, .comments a:link, .comments a:visited, .comments a:hover {color:#dedede;}

.separator {height: 40px;}

.defaultuserpic {float:left; margin:-110px 0 0 0; padding:10px; background-color:#fff; border:1px solid #dedede;}

#footer {margin-left: 201px; text-align: right; font-family: georgia; top: 250px; font-size: 36px; position: fixed; text-transform: lowercase; width: 42px; z-index: 999;}

ul.navfooter {padding: 0px; margin: 0px; display: inline-table;}

ul.navfooter li {display: inline;}

.clearfoot {clear: both;}

#footer .viewing {display:none;}

ul.year {text-align: center; font-size: 18px; color: #bbb; padding: 0px 0px 10px;}

ul.year li {display: inline;}

table.yeartable {background-color: #fff; width: 600px; padding: 15px; border: 1px solid #dedede; color: #bbb;}

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 {font-size: 11px; list-style-type:none; padding: 15px; text-transform: uppercase; background-color: #fff; border: 1px solid; letter-spacing: 1px;}

.ljtaglist a, ljtaglist a:link, ljtaglist a:visited {}

input#subject.textbox {background-color: #fff;}

textarea#body.textbox {background-color: #fff;}

textarea#commenttext.textbox {background-color: #fff;}

div#qrformdiv {padding-bottom:15px}

.userpiccomment {width: 80px; height: 80px; padding: 8px; border:1px solid; z-index: 15; float: left; margin: 0 15px 10px 0;}

.box {padding: 0px; clear: left;}

.datesubjectcomment {text-transform:uppercase; font-size:10px;}

input, textarea {background-color: #fff; color: #999; font-size: 11px; border: 1px solid #dedede;}

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

.commentreply {position: relative; margin: 15px 0px; text-align: justify; color: #999;}

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

.commentbox {padding: 15px; margin: 15px 0; background-color: #fff; border: 1px solid; min-height: 98px;}

.skiplinks {text-align:center; color:transparent; text-transform:uppercase; font-size:10px; margin: -10px 0 10px;}

.clear {height: 0px;}

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

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/1pkIxw8.png);}

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

img[src*="icon_groups.gif"]{background-image: url(http://i.imgur.com/i4V7S0x.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/0phq8.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.i-ljuser img[src*="http://l-files.livejournal.net/userhead/671?v=1330508626"], span.i-ljuser img[src*="http://l-files.livejournal.net/userhead/639?v=1328103978"], span.i-ljuser img[src*="http://l-files.livejournal.net/userhead/464?v=1320668402"] {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, span.ljuser a {text-transform:capitalize;}

.w-cs {font-family: Cambria, Georgia, serif!important; background:#f6f6f6; color:#444444; min-height:50px; text-transform: lowercase; font-size: 11px;}

.w-cs .w-cs-userinfo {font-family: Cambria, Georgia, serif!important; background:#f6f6f6; border color:#444444; color:#111; border:0px;}

.w-cs .w-cs-summary li.w-cs-i-tokens {font-family: Cambria, Georgia, serif!important; border:0px;}

.w-cs a:link, .w-cs a:visited, .w-cs a:active {color: #cbcbcb !important; font-family: Cambria, Georgia, serif!important;}

.w-cs a:hover {color:#dedede !important; font-family: Cambria, Georgia, serif!important;}

.w-cs .ljuser a:link, .w-cs .ljuser a:visited, .w-cs .ljuser a:active, .w-cs .ljuser a:link b, .w-cs .ljuser a:visited b, .w-cs .ljuser a:active b {font-size: 12px !important; text-transform: none; font-family: Cambria, Georgia, serif!important; color: #cbcbcb!important;}

.w-cs .ljuser a:hover, .w-cs .ljuser a:hover b {}

.w-cs-user-controls .w-cs-status p {color:#cbcbcb !important; letter-spacing: 0px; font-family: Cambria, Georgia, serif!important; font-size: 12px;}

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

.w-cs .w-cs-search .w-cs-text {width: 150px; background-color:#dedede!important; border-right: 25px solid #dedede;}

.w-cs .w-cs-text {background-color: #dedede!important;}

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

.w-cs FORM.w-cs-login .note {color: #cbcbcb;}

.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; font-family: Cambria, Georgia, serif!important;}

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

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

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

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

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

.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: 44px; margin-left: 0px; color: #cbcbcb; text-align: justify; font-size: 11px!important; font-family: Cambria, Georgia, 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: #cbcbcb; font-size:11px!important;}

.b-contextualhover img {border: none;}

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

.b-contextualhover a:hover, .b-contextualhover a:active, .b-contextualhover a:focus {border-bottom: 0 !important; text-decoration: none !important; color: #dedede !important;}

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

.s-lanzelot .b-contextualhover a:hover, .s-lanzelot .b-contextualhover a:active, .s-lanzelot .b-contextualhover a:focus {border-bottom: 0 !important; text-decoration: none !important; color: #dedede !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: #dedede !important;}

.b-contextualhover .alias-unavailable a:link, .b-contextualhover .alias-unavailable a:visited {color: #999 !important;}

.b-contextualhover .alias-unavailable a:hover, .b-contextualhover .alias-unavailable a:active, .b-contextualhover .alias-unavailable A:focus {color: #dedede !important; text-decoration:none!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: -8px -80px 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: 50px; max-height: 50px; border: 5px solid #dedede;}

.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: #cbcbcb; font-family: Cambria, Georgia, 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: #fff; border: 1px solid #dedede; -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: #999;}Mini version: (Static) (Live)/*- 007 Faded mini ver.
Layout by lu_hesperia at ourhappyhours.livejournal.com
Tiny icons by pinvoke.com -*/

body {background:#f6f6f6 url() repeat fixed; color:#dedede; font-family: Cambria, Georgia, serif; font-size: 11px;}

::selection {background-color:#888; color:#dbdbdb;}

::-moz-selection {background-color:#888; color:#dbdbdb;}

a, a:link, a:visited {color:#cbcbcb; text-decoration: none; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

a:hover {color:#dedede; text-decoration: none; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

p, td {}

blockquote {padding: 8px 12px; border-left: 2px solid #dedede; border-right: 2px solid #dedede; background:#f6f6f6;}

code, kbd, pre, tt {font-family: 'Monospace', monospace; font-size: 10px;}

code:hover {background:#dedede; color:#f6f6f6;}

strong, b {}

h2 {display:none;}

img {-webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s;}

img:hover {-webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; -webkit-filter: opacity(0.90) grayscale(0.75) contrast(0.95) ; -moz-filter: opacity(0.90) grayscale(0.75) contrast(0.95); -o-filter: opacity(0.90) grayscale(0.75) contrast(0.95); -ms-filter: opacity(0.90) grayscale(0.75) contrast(0.95); filter: opacity(0.90) grayscale(0.75) contrast(0.95);}

#content {width: 780px; margin-left: auto; margin-right: auto; margin-top: 30px;}

#maincontent {width:400px; margin-left:255px;}

#sidebar {margin-left:15px; padding-top: 50px; position:fixed; width: 200px; float: left; text-align: justify; font-size:11px; font-style:italic;}

.sbarheader {padding: 0px 5px 0px 5px;}

#sidebar_linklist.sbarbody {height: 98px; overflow: hidden;}

#sidebar_summary.sbarbody {display:none;}

#sidebar_tags.sbarbody {padding-bottom:20px;}

.sbarbody2 {margin-top: 45px; border-top: 1px solid; padding-top: 5px; padding-bottom: 10px;}

.sbarbody2 img {max-width:200px;}

#sidebar a, #sidebar a:link, #sidebar a:visited {}

#sidebar a:hover {}

table.calendar {display:none;}

.sbarcalendar {display:none;}

.sbarcalendarposts {display:none;}

li.tagcloud {line-height: 0.90;}

ul.sbarlist {list-style:none; padding:0px!important;}

li.sbaritem {font-size: 8px; font-weight: bold; background-color: #fff; text-align: right; text-transform:uppercase; margin-top:3px; padding:2px 3px; border-bottom:1px solid #dedede; letter-spacing: 2px; font-style: normal;}

li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited {color: #cbcbcb;}

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

li.sbaritem:hover {background-color: transparent;}

li.sbartitle {display:none;}

#header {position: fixed; margin-top:164px; margin-left:15px;}

.navheader {display:none;}

.title {font-family: georgia; color: #fff; font-size: 20px; text-shadow: 1px 1px #dedede; font-style: italic; text-transform: lowercase; width:180px; height:30px; overflow:hidden;}

.subtitle {display:none;}

.subcontent {border: 1px solid; background-color: #fff;}

.entry {padding: 12px; color: #999; text-align: justify;}

.entry_text {min-height: 17px;}

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

.userpic, .userpicfriends {position: relative; float: right; background-color: transparent!important; color:#f4f4f4; padding: 0px; margin: 8px -117px 0 0px; text-align: center; font-size: 10px; z-index: 15;}

.userpic img, .userpicfriends img {background:#dedede; padding:8px; width:80px; height:80px;}

.userpicfriends font {color:#cbcbcb;}

div.userpic a, div.userpic a:link, div.userpic a:visited, div.userpicfriends a, div.userpicfriends a:link, div.userpicfriends a:visited {color:#cbcbcb; line-height: 1;}

.date {text-transform: uppercase; font-size:9px; text-align: center;}

.subject {text-transform: lowercase; font-size:16px; text-align: center; line-height: 1; padding-bottom: 4px; border-bottom: 1px solid;}

.subject:hover {background-color: #f6f6f6;}

.subject a, .subject a:link, .subject a:visited, .subject a:hover {color: #cbcbcb;}

.datesubject {padding: 10px 12px 0 12px;}

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

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

.ljtags {margin-top: 12px; text-align: left; font-size: 11px; line-height: 1;}

.currents a, currents a:link, .currents a:visited, .currents a:hover {color:#aaa;}

.currents {margin-top: 10px;}

.currentmood, .currentmusic, .currentgroups, .currentlocation {color:#aaa; font-size: 10px; background-color: transparent; line-height: 0.6; text-transform:lowercase; padding: 2px 0 2px 15px; background: transparent none no-repeat scroll 0 50%;}

.currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong {display:none;}

.currentlocation {background-image: url(http://i.imgur.com/yhPJf.png)}
.currentmood{background-image: url(http://i.imgur.com/ZuZmw.png)}
.currentgroups {background-image: url(http://i.imgur.com/U4kcG.png)}
.currentmusic {background-image: url(http://i.imgur.com/NntpJ.png)}

.comments {margin-top: 12px; border-top: 1px solid #dedede; padding-top: 5px; font-size: 9px; text-transform: uppercase; text-align: center; color: transparent; margin-bottom: -2px;}

.comments a, .comments a:link, .comments a:visited, .comments a:hover {color:#dedede;}

.separator {height: 30px;}

.defaultuserpic {float:left; margin: -100px 0 0 0; padding: 0 0px 0px 0; padding:10px; background-color:#fff; border:1px solid #dedede;}

.defaultuserpic img {width: 90px; height: 90px;}

#footer {margin-left: 180px; text-align: right; font-family: georgia; top: 240px; font-size: 32px; position: fixed; text-transform: lowercase; z-index: 999; width: 38px;}

ul.navfooter {padding: 0px; margin: 0px; display: inline-table;}

ul.navfooter li {display: inline;}

.clearfoot {clear: both;}

#footer .viewing {display:none;}

ul.year {text-align: center; font-size: 18px; color: #bbb; padding: 0px 0px 10px;}

ul.year li {display: inline;}

table.yeartable {background-color: #fff; width: 400px; padding: 12px; border: 1px solid #dedede; color: #bbb;}

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 {list-style-type: none; padding: 12px; background-color: #fff; border: 1px solid #dedede; color: #bbb;}

.ljtaglist a, ljtaglist a:link, ljtaglist a:visited {}

input#subject.textbox {background-color: #fff;}

textarea#body.textbox {background-color: #fff;}

textarea#commenttext.textbox {background-color: #fff;}

div#qrformdiv {padding-bottom:15px}

.userpiccomment {padding: 5px; background-color:#fff; width: 80px; height: 80px; padding: 8px; border:1px solid; z-index: 15; float: left; margin: 0 10px 10px 0;}

.box {padding: 0px; clear: left; width: 516px;}

.datesubjectcomment {font-size:10px;}

input, textarea {background-color: #fff; color: #999; font-size: 10px; border: 1px solid #dedede;}

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

.commentreply {position: relative; margin: 10px 0px 10px 108px; text-align: justify; color: #999;}

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

.commentbox {margin-top: 10px; min-height: 103px;}

.skiplinks {text-align:center; color:transparent; text-transform:uppercase; font-size:10px; margin: -10px 0 10px;}

.clear {height: 0px;}

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

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/1pkIxw8.png);}

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

img[src*="icon_groups.gif"]{background-image: url(http://i.imgur.com/i4V7S0x.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/0phq8.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, span.ljuser a {text-transform:capitalize;}

.w-cs {font-family: Cambria, Georgia, serif!important; background:#f6f6f6; color:#444444; min-height:50px; text-transform: lowercase; font-size: 11px;}

.w-cs .w-cs-userinfo {font-family: Cambria, Georgia, serif!important; background:#f6f6f6; border color:#444444; color:#111; border:0px;}

.w-cs .w-cs-summary li.w-cs-i-tokens {font-family: Cambria, Georgia, serif!important; border:0px;}

.w-cs a:link, .w-cs a:visited, .w-cs a:active {color: #cbcbcb !important; font-family: Cambria, Georgia, serif!important;}

.w-cs a:hover {color:#dedede !important; font-family: Cambria, Georgia, serif!important;}

.w-cs .ljuser a:link, .w-cs .ljuser a:visited, .w-cs .ljuser a:active, .w-cs .ljuser a:link b, .w-cs .ljuser a:visited b, .w-cs .ljuser a:active b {font-size: 12px !important; text-transform: none; font-family: Cambria, Georgia, serif!important; color: #cbcbcb!important;}

.w-cs .ljuser a:hover, .w-cs .ljuser a:hover b {}

.w-cs-user-controls .w-cs-status p {color:#cbcbcb !important; letter-spacing: 0px; font-family: Cambria, Georgia, serif!important; font-size: 12px;}

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

.w-cs .w-cs-search .w-cs-text {width: 150px; background-color:#dedede!important; border-right: 25px solid #dedede;}

.w-cs .w-cs-text {background-color: #dedede!important;}

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

.w-cs FORM.w-cs-login .note {color: #cbcbcb;}

.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; font-family: Cambria, Georgia, serif!important;}

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

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

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

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

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

.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: 44px; margin-left: 0px; color: #cbcbcb; text-align: justify; font-size: 11px!important; font-family: Cambria, Georgia, 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: #cbcbcb; font-size:11px!important;}

.b-contextualhover img {border: none;}

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

.b-contextualhover a:hover, .b-contextualhover a:active, .b-contextualhover a:focus {border-bottom: 0 !important; text-decoration: none !important; color: #dedede !important;}

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

.s-lanzelot .b-contextualhover a:hover, .s-lanzelot .b-contextualhover a:active, .s-lanzelot .b-contextualhover a:focus {border-bottom: 0 !important; text-decoration: none !important; color: #dedede !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: #dedede !important;}

.b-contextualhover .alias-unavailable a:link, .b-contextualhover .alias-unavailable a:visited {color: #999 !important;}

.b-contextualhover .alias-unavailable a:hover, .b-contextualhover .alias-unavailable a:active, .b-contextualhover .alias-unavailable A:focus {color: #dedede !important; text-decoration:none!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: -8px -80px 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: 50px; max-height: 50px; border: 5px solid #dedede;}

.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: #cbcbcb; font-family: Cambria, Georgia, 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: #fff; border: 1px solid #dedede; -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: #999;}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 sidebar won't show. Set the ads to vertical or between entries.
(2) Display → Navigation Strip color: Light gray.
(3) Text → There you can edit your currents and comments text so that they look like in the preview.
(4) Sidebar → Ordering: Link List, Default Userpic and Blurb.
(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 astrokittie at chronophages
→ Original post here at ourhappyhours

style: flexible squares, maker: lu_hesperia

Previous post Next post
Up