flexible squares ▸ jiayi

hahaha a collab from long ago with hierarchy. this layout was originally called penelope but after some redoing and bluh bluh i decided that it should be called jiayi after lavender88 cos she's cosmic cool and i hope this layout is too.


full-size img | temp. live


/* jiayi by fois & hierarchy @ fluos.livejournal.com */ body { background-color: #fff; background-image:url(); color: #666666 ; font-family: tahoma; font-size: 11px; margin: 0; line-height:11px;} a, a:link, a:visited { color: #000; text-decoration: none; font-style: normal; font-family: tahoma;} a:hover { color: #000000; text-decoration: none; cursor: crosshair; } blockquote{ padding: 10px; font-size: 12px; background-image: url(http://i1230.photobucket.com/albums/ee496/mocchino/patterns/2cglcedjpg.png); font-family:tahoma;color:#2d2d2d ; } code, kbd, pre, tt { font-family: monospace; } #content { width: 900px; background-color: transparent; padding: 15px; } #maincontent { margin: 0px 0px 0px 200px; margin-top: 15px; font-size: 11px; background-color: transparent; color: #000; text-align: left; } .title { display: none; } .subtitle{ display:none; } .subcontent { } .entry { width:450px; padding: 15px; background-color: #ffffff; color: #666666; font-family: tahoma; font-size: 11px; text-align: justify;} .entry_text { min-height: 70px; } .entry_text img {max-width:445px; padding:2px; border:1px solid #CCCCCC; } .userpic, .userpicfriends { position: relative; float: right; padding: 0px; margin: 40px 120px 2px 2px; text-align: center; font-size: 9px; background: transparent!important; font-family: courier new; color: transparent; } .ljcut-link a {font-family:helvetica neue; font-weight:normal!important;} .userpic a, .userpicfriends a { text-transform: uppercase !important;} .userpic img, .userpicfriends img { width: 70px; height: 70px; border:2px solid #dbdbdb;} .date { width:450px; line-height: 100%; top: 5px; float:right; color: #DBDBDB; font-family: monospace; font-size: 7pt; background: transparent; text-transform: uppercase!important; letter-spacing: 2px;} .subject { width:450px; padding: 3px; color: #000; float:right; font-size: 11px; text-transform: lowercase; font-family:helvetica neue, arial, sans-serif; font-weight:100;} .subject a, .subject a:link, .subject a:visited { color: #000; font-size: 14pt; text-transform: lowercase; font-family:helvetica neue, arial, sans-serif; font-weight:100;} .subject a:hover { color: #dbdbdb; } .datesubject { width:450px; background-color: transparent; padding: 5px; margin-bottom:-10px; margin-right:10px; font-family: courier new; text-transform: lowercase; font-size:14px; } .entry ul li { padding-left: 5px; margin-left: 15px; } .entry ol li { padding-left: 5px; margin-left: 15px; } .separator{ height: 35px; } .currents, .currentmood, .currentmusic {font-size: 7pt; text-transform: lowercase; } .ljtags {font-size:7pt; text-transform: lowercase; margin: 8px 0 -30px 1px; } .comments { font-family: monospace; font-size: 11px; text-align: right; background-color: transparent; padding: 0px 5px 0px 5px; position: relative; } div.comments a, div.comments a:link, div.comments a:visited{ color: #666666 ; } div.comments a:hover { color: #dbdbdb ; text-decoration: none; } .datesubjectcomment { background-color: #ffffff; padding: 5px; margin-top: 20px; } .userpiccomment { width:75px; height: 75px; position: relative; background-color: #dbdbdb; top: -30px; left: 0px; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left; } .box { width:460px; padding: 10px; clear: left; font-size: 7pt; } .box b { font-weight: normal;} .box form: table; margin-left: -8px !important;} input, textarea, select { font: normal 8pt arial; background-color: #fff; border: 1px solid #f8f8f8;} textarea.textbox { width: 400px !important; background: #fff !important;} .reply { position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; font-family: lucida console; font-size: 11px; line-height: 125%; background-color: #dbdbdb; color: #666666; } .replytosubject { font-weight: bold; } .commentreply { position: relative; margin: 5px; font-size: 11px; font-family: lucida console; color: #666666; } .commentbox { padding: 5px; margin: 5px; background-color: #ffffff; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #2d2d2d; } .datesubjectcomment a:hover { color: #6666660; } .commentboxpartial { border-color: #999999; border-width: 1px; border-style: solid; padding: 10px; margin: 10px; background-color: #dbdbdb; } .commenting { background-color: #; margin-top: 10px; width: 100%; } .skiplinks { text-align: center; } #header { display: none; } #sidebar {color:#fff; position: fixed; background-image:url(http://i1230.photobucket.com/albums/ee496/mocchino/patterns/07.jpg); height: 100%; padding-top: 30px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; margin-top: -20px; margin-left: 0; background-color: #FFF; font-size: 11px; width: 160px; float: left; text-align:justify; text-transform:lowercase; border-top: 10px solid #fff; -moz-border-radius-topleft : 50px;-moz-border-radius-topright : 50px;-moz-border-radius-bottomleft : 0; -moz-border-radius-bottomright : 0; -khtml-border-top-left-radius: 50px; -khtml-border-top-right-radius: 50px; -webkit-border-top-left-radius: 50px; -webkit-border-top-right-radius: 50px;} .defaultuserpic { text-align: center; } .sbarheader { padding: 0px 5px 0px 5px; } .sbarbody { padding: 5px;} .sbarbody2 { padding: 5 15px 5 15px; } div#sidebar a, div#sidebar a:link, div#sidebar a:visited{ color: #fff; font-family:helvetica neue, arial, sans-serif; font-weight:100; font-size:13px; letter-spacing:2;} div#sidebar a:hover { color: #fff; text-decoration: none; font-family:helvetica neue, arial, sans-serif; } #sidebar li { text-transform:uppercase; background: url('http://i1230.photobucket.com/albums/ee496/mocchino/tiny%20icons/damnicon%20lj/heart.gif') no-repeat left center; padding-left: 12px;} .defaultuserpic {display:none;} #sidebar_tags, li.sbartitle {display:none;} #sidebar_calendar, #sidebar_tags {display:none;} #sidebar_summary, #sidebar_calendar, #sidebar_tags, h2 { display:none! important; } ul.sbarlist { padding-left: 0px; margin-left: 5px; list-style: none; } li.sbaritem {border-bottom:#fff dashed 1px; padding: 5px; list-style: none; text-align: left; font-size: 10px; margin-left:-10px; background:transparent; text-transform: uppercase; } #footer { width: 70px; text-align: right; font-family:helvetica neue, arial, sans-serif; font-weight:100; font-size: 14px; background-color: #000; color: #fff; float:right; margin: 0px -230px 0px 0px;} ul.navfooter{ padding: 0px; margin: 0px; } ul.navfooter li { display: block; list-style:none; margin: 0 5px 0 5px; } div#footer a, div#footer a:link, div#footer a:visited {font-family:helvetica neue, arial, sans-serif; font-weight:100; color:#fff; font-size: 14px;} #footer .viewing { display:none; } .clearfoot { clear: both; } ul.year {text-align: center; padding-bottom: 40px; } ul.year li { display: inline; } table.yeartable { margin-left: auto; margin-right: auto; } table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: dashed; border-color: #dbdbdb; } table.yeartable td.yearday { background-color: #fff; text-align: center; } td.yearmonth { border-style: none; } .clear { height: 15px; } .w-cs {display:none;} div.ContextualPopup .Content { padding: 10px; margin: 4px 50px 4px 4px; background: #fff; font-size: 11px; color:#bdbdbd; font-family: tahoma; text-transform: uppercase; } div.ContextualPopup div.Inner { position: relative; top: -2px; left: -2px; background-color: transparent !important; color: #bdbdbd!important; padding: 0px; border: none; } div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: none; color:#4a4a4a!important; font-size: 10px; } div.ContextualPopup div.Inner a:hover {color:#a4bac6!important; background-color:transparent;} span.ljuser a b { font-weight: lighter; } .ljuser img { width: 0; height: 0; background: transparent no-repeat; padding: 0 !important; } img[src*='userinfo.gif'], img src[src*='community.gif'], img[src*='icon_groups.gif'], img[src*='syndicated.gif'], img[src*='newsinfo.gif'], img[src*='partnercomm.gif'], img[src*='sponcomm.gif'], img[src*='userinfo-support.gif'], img[src*='user_ontd.gif'], img[src*='openid-profile.gif'], img[src*='anonymous.gif'] { background-image: url('')!important; } img[src*='icon_protected.gif'] { width: 0; height: 0; padding: 9px 16px 0 0; background: url('http://i31.tinypic.com/2hzp0m.png') no-repeat; } img[src*='icon_private.gif'] { width: 0; height: 0; padding: 7px 16px 0 0; background: url('http://i31.tinypic.com/2w2litg.png') no-repeat; } img[src*='icon_groups.gif'] { width: 0; height: 0; padding: 9px 16px 0 0; background: url('http://i29.tinypic.com/2u939dc.png') no-repeat; }

❥ please keep the credit on stylesheet & credit in journal 4 ♥. ❥ link to 'recent' 'profile' 'friends' etc on the links page. ❥ custom comments page is coded, thanks to jessica♥ ❥ tested in safari and firefox ❥ sorry guys, i never think of ad placements ; n ; ❥ faq • affiliates • tags ❥ enjoy™