Aseptic; Flexible Squares

[lu_hesperia]

( STATIC ) ( LIVE )

III. ASEPTIC→ S2 Flexible Squares
→ Basic, plus and paid; ad placement between entries or vertical.
→ Features custom comment pages and sidebar.
→ Title, subtitle, navigation, currents and everything in the sidebar except for the blurb, the link list and the default userpic is disabled.
→ If you want the currents to show up delete the last line of the code.
PREVIEW AND CODE
(Static) (Live)
/*- 003 Aseptic
Layout by lu_hesperia at ourhappyhours.livejournal.com
Tiny icons by pinvoke.com -*/

body {background-color: #ebebeb; color: #919191; font-family: "trebuchet ms", "Arial", sans-serif; font-size: 11px; margin: 0 0;}

::selection {background-color:#d3758b; color:#fff;}

::-moz-selection {background-color:#d3758b; color:#fff;}

a, a:link, a:visited {color: #ababab; text-decoration: none;}

a:hover {color: #eda4b5;}

blockquote {background: #f6f6f6; padding: 10px; letter-spacing: 1px;}

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

small {font-size: 10px;}

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

img:hover {-webkit-filter: grayscale(1); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

h2 {font-family: "Arial Narrow", serif; font-size: 18px; font-weight: normal; color: #555; letter-spacing: 1px; margin: 0; text-transform: uppercase;}

.ljtaglist {font-size: 11px; list-style-type:none; padding: 20px 10px 0px; text-transform: uppercase; margin-top:-22px; background-color:#f6f6f6; color: #d2d2d2; text-align: justify; font-size: 10px; font-weight: normal; letter-spacing: 2px; text-transform: uppercase;}

.ljtaglist a, ljtaglist a:link, ljtaglist a:visited {color: #d2d2d2;}

.ljtaglist li {border-top: 1px solid #f0f0f0; padding-top:5px; padding-bottom:3px;}

#maincontent {margin-left:287px; width:50%; border-left:6px solid #efefef; border-right:6px solid #efefef; background-color:#f1f1f1; background: url() fixed repeat;}

#sidebar {border-left:6px solid #efefef; border-right:6px solid #efefef; background-color:#f6f6f6; color:#d2d2d2; float:left; text-align: justify; font-size:10px; font-weight:normal; height:100%; letter-spacing:2px; padding-top:75px; position:fixed; text-transform:uppercase; bottom:0; width:250px; overflow: hidden;}

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

.sbarbody {padding:23px;}

ul.sbarlist{margin: 0px; padding: 0px; list-style-type: none;}

li.sbaritem {background-color: transparent; display:block; list-style-type:none; padding:2px; text-align:center;}

li.sbaritem a {border-left:6px solid #efefef; border-right:6px solid #efefef; background-color: #f9f9f9; display:block; font-size: 11px; color: #b3b3b3; letter-spacing: 0px; font-weight:normal;}

li.sbaritem a:hover {border-left:6px solid #efefef; border-right:6px solid #efefef; background-color: #efefef; letter-spacing: 3px; font-weight:bold;}

#sidebar_summary {display:none;}

#sidebar_tags {display:none;}

#sidebar_calendar li.sbartitle {display:none;}

div#sidebar_calendar.sbarbody {display:none;}

li.sbartitle {display:none;}

.defaultuserpic {float:left; margin:15px 0 0; padding:50px 10px 0 15px;}

.defaultuserpic img {border:8px solid #fafafa; height:60px; width:60px;}

#sidebar_summary, #sidebar_tags, h2 {display:none!important;}

#header {display: none;}

.title, .subtitle {display: none;}

ul.navheader {padding: 0; margin: 0;}

.view {color: #666; display: block; margin: 0; filter: alpha(opacity=80); opacity: .8;}

ul.navheader li {display: block; list-style-type: none;}

.subcontent {background-color: #f6f6f6; padding-top:10px;}

.entry {background-color: #fff; margin: 0; min-height: 67px; padding: 10px; text-align: justify;}

.comments {font-family:Arial narrow; font-size: 18px; text-align: left; position: relative; color:#cfcfcf; padding:12px 0px 8px;}

.userpic, .userpicfriends {float: right; text-align:center!important; background-color: #f9f9f9!important; padding: 8px; z-index: 15; color: transparent; line-height: 1; font-family: "Lucida Sans Unicode", Lucida Grande, sans-serif; font-size: 9px; margin: 0px -122px 0 0px; text-align: center;}

.userpicfriends font {color: #999;}

.date {margin: 8px 10px 0; float: right; line-height: 120%; top: 10px; color: #D2D2D2; font-size: 10px; background-color: transparent;}

span.time {display:none;}

.subject {font-family: Arial narrow; margin: 5px 5px 0px; text-align: left; color: #cfcfcf; font-weight: none; font-size: 18px; background-color: transparent;}

.subject a, .subject a:link, .subject a:visited{ text-transform: uppercase; color: #cfcfcf;}

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

.datesubject {padding: 10px; font-family: calibri; font-size: 12px; text-transform: uppercase; border-bottom: 1px solid #f9f9f9;}

.ljtags {background: transparent url(http://i.imgur.com/lheWV.png) scroll 100% 50% no-repeat; font-size: 10px; color: #fff; margin: 25px 0 0 0; padding: 0 18px 0 0; text-align: right; text-transform: uppercase;}

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

.currents {font-size: 10px; color: #989898; margin-top: 10px; text-align: right; line-height: 1;}

.currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong {font-weight:normal; font-style:italic;}

.datesubjectcomment {background:#fff; text-transform:uppercase; font-family: calibri; font-size: 10px; text-align:right;}

.datesubjectcomment a {font-size: 11px;}

.userpiccomment {z-index: 15; margin-right: 10px; float: left; background-color:#fff; border:solid 8px #f6f6f6;}

.box {padding: 20px; background-color: #fff;}

input, textarea {background-color: #f6f6f6; color: #aaa; font-size: 11px; border: 0px;}

.commentreply {padding: 12px 0px 12px 116px;}

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

.commentbox {margin-top: 5px; min-height: 130px; text-align: justify;}

.commentbox a:hover {background:none; padding:0;}

.skiplinks {text-align:center; color:#f6f6f6; text-transform:uppercase; font-size:9px; margin-top:5px; margin-bottom:-20px; background-color:#F6F6F6;}

.clear {height:0px;}

.separator {height: 10px; background-color: #f6f6f6; margin-top: -10px;}

#footer {font-family: Arial narrow; font-size: 18px; margin-left:287px; width:50%; border-left:6px solid #efefef;border-right:6px solid #efefef;background-color:#f6f6f6; padding:2px 0; text-align:center; text-transform:uppercase; margin-top:-25px; margin-bottom:-16px;}

ul.navfooter li {list-style:none;display: inline-block; padding:0 5px;}

#footer .viewing {display:none;}

.clearfoot {clear: both;}

ul.year {background: #f6f6f6; color: #b5b5b5; text-align: right; padding: 5px; margin-top: 0px;
margin-bottom: 0px;}

ul.year li {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 10px; display: inline; margin: 0 0 0 5px;}

table.yeartable {color: #b5b5b5; margin-left: auto; margin-right: auto; width: 100%;}

table.yeartable td.yeardate, table.yeartable td.yearday {background-color: #ffffff; padding: 3px;}

td.yearmonth {text-transform: uppercase; border-style: none; background: #ffffff;}

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);}

.ljuser a, .ljuser a:hover {font-weight:normal; letter-spacing:1px; text-transform:uppercase; text-decoration:none;}

.ljuser a:hover {color: #d3758b;}

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;}

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

.w-cs {background-color:#efefef; color:#444; min-height:50px; text-transform: lowercase; font-size: 11px; }

.w-cs .w-cs-userinfo {background-color:#efefef; color:#111; border:0px;}

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

.w-cs a:hover {color:#d3758b !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 .w-cs .ljuser a:active b {font-size: 12px !important; font-weight: bold !important; text-transform: uppercase; font-family: "trebuchet ms", "Arial", sans-serif!important; color: #cdcdcd!important;}

.w-cs .ljuser a:hover, .ljuser a:hover b {color: #d3758b!important;}

.w-cs .w-cs-summary { background-color:#efefef; border:0px;}

.w-cs .w-cs-summary LI.w-cs-i-tokens {background-color:#efefef; border:0px;}

.w-cs-user-controls .w-cs-status p{background-color:#efefef; color:#cdcdcd !important; letter-spacing: 0px; text-transform: lowercase; font-family: "trebuchet ms", "Arial", sans-serif; font-size: 11px;}

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

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

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

.w-cs FORM.w-cs-login .note {color: #cdcdcd; font-size:10px;}

.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:#f9f9f9;}

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

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

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

.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: #808080; text-align: justify; font-size: 11px!important; font-family: "trebuchet ms", "Arial", 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: #808080; 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: #ababab !important; background: none;}

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

.s-lanzelot .b-contextualhover a:link, .s-lanzelot .b-contextualhover a:visited {border-bottom: 0 !important; text-decoration: none !important; color: #ababab !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: #d3758b !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: #d3758b !important;}

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

.b-contextualhover .alias-unavailable a:hover, .b-contextualhover .alias-unavailable a:active, .b-contextualhover .alias-unavailable A:focus {color: #d3758b !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: -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: 50px; max-height: 50px; border: 5px solid #f6f6f6;}

.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: #808080; font-family: "trebuchet ms", "Arial", 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: #fff; 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: #808080;}

.currents {display:none;}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). Set the ads to vertical or between entries.
(2) Display → Navigation Strip color: Light gray.
(3) Text → There you can edit your comments text so that they look like in the preview.
(4) Sidebar → Ordering: Default Userpic, Blurb and 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 lazuli_reikou at rainaccel
→ Original post here at ourhappyhours