S2 Flexible Squares: I'll sleep through the rest of my days

Jan 13, 2010 21:34

Layout: I'll sleep through the rest of my days {S2 Flexible Squares}
Features: custom contextual pop-up, mini icons, custom comments pages, header image
Account types: basic // plus // paid
Notes: The header dimensions are 500×200px. If you are a plus user, choose the vertical ad setting and your ads won't show up.


image // live
Codes:
/*-----------------------------------------------------------
I'LL SLEEP THROUGH THE REST OF MY DAYS;
S2 Flexible Squares layout by ghost_factory@lj
CREDITS:
- background: cole&son (patternized by ghost_factory)
- minicons: pinvoke
- header: http://flickr.com/photos/zsoofimerrily/
------------------------------------------------------------*/

body {
background: #84A7B0 url(http://i40.tinypic.com/2qs11dw.jpg) repeat fixed 0 0;
text-align: center;
color:#353535;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
margin: 20px 0 20px 0;
}

a, a:link, a:visited { color: #669999; text-decoration: none; }
a:hover { color: #99CCCC; text-decoration: none; font-style: italic; }
p, td { font-size: 11px; } kbd, pre, tt { font-family: monospace; }
blockquote { background-color: #eeeeee; border: 1px dashed #e6e6e6; padding: 10px; }
code { border-left: 5px solid #669999; display: block; padding: 10px; }
b, strong, u, underline { color: #666666; } i, s, em, strike { color: #669999; }

/* ----- general ----- */

#content { width: 500px; margin-left: auto; margin-right: auto; background-color:transparent; padding: 15px; }
#maincontent { margin-top: 15px; font-family: "Georgia", serif; font-size: 11px; background-color:transparent; color: #444444;
text-align: left; } #sidebar { display: none; }

/* ----- header & footer ----- */

#header { width: 100%; padding: 0px; margin: 0px; text-align: right; font-family: "Georgia", serif; font-size: 11px;
color: #444444; background:#fafafa url(http://i46.tinypic.com/iy1t9g.jpg) no-repeat; border: 10px solid #fafafa; min-height: 230px;}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited { color: #669999; }
div#header a:hover, div#footer a:hover { color:#aaaaaa; text-decoration: none; font-style: italic; }
.title { text-align: left; font-family: "Book Antiqua", Georgia, serif; font-size: 25px; font-weight: normal; line-height: 50%;
top: -10px; color: #FFFFFF; padding: 10px; margin-top: -70px; }
.subtitle{ text-align: left; font-family: "Book Antiqua", Georgia, serif; font-size: 16px; font-weight: normal;
color:#FFFFFF; font-style: italic; padding: 10px; margin-top: -60px; }
#footer { width: 104%; text-align: center; font-family: "Georgia", serif; font-size: 11px; background-color: #fafafa;
color: #444444; z-index: 100; clear: both; filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; min-height: 70px;
margin-bottom: -50px; padding-top: 25px;}
.clearfoot { clear: both; }

/* ----- header & footer navigation ----- */

ul.navheader{ padding: 0px; margin: 0px; margin-top: 213px;}
ul.navheader li { display: inline; margin-top: 210px; padding: 5px; background-color: #f1f1f1; border: 1px solid #eeeeee;}
ul.navheader li:hover { display: inline; margin-top: 210px; padding: 5px; background-color: #eeeeee; border: 1px solid #dddddd}
ul.navfooter { padding: 0px; margin: 0px; } ul.navfooter li { display: inline; padding: 0 3px 0 3px; }
li.view, li.viewing { font-style: italic;}

/* ----- entry stuff ----- */

.subcontent { padding: 0px; background-color: #fafafa; width: 104%;}
.entry { margin: 0px 10px 10px 30px; padding: 10px; background-color: #fafafa; color: #444444; font-family: "Georgia", serif;
font-size: 11px; text-align: justify; }
.userpic, .userpicfriends { position: relative; float: left; padding: 5px; margin: -5px 0px 0px -110px; background: transparent !important;
text-align: right !important; font-family: "Georgia", serif; font-size: 10px !important; z-index: 15; }
.userpic img, .userpicfriends img { width: 70px; height: 70px; border: 10px solid #fafafa; }
.userpicfriends font { color: #CCCCCC } .userpicfriends a font { color: #eeeeee; } .userpicfriends a:hover font { color: #99CCCC;}
.date { line-height: 50%; top: 5px; color: #888888; font-family: "Georgia", serif; font-size: 11px; text-align: right;
font-style:italic; padding: 10px; margin-right: 15px; }
.subject { color: #669999; font-family: "Book Antiqua", Georgia, serif; font-size: 20px; text-align: right; padding: 10px;
margin-right: 15px;}
.subject a, .subject a:link, .subject a:visited { color: #669999; } .subject a:hover { color: #99CCCC; }
.datesubject { background-color: #eeeeee; border-bottom: 1px solid #e6e6e6; padding: 5px; }
.entry ul li, .entry ol li { padding-left: 5px; margin-left: 15px; }

/* ----- currents & tags ----- */

.currents { clear: right; font-family: "Georgia", serif; font-size: 11px; text-align: right; padding-top: 5px; }
.currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong { display: none; }
div.ljtags a {font-weight: normal; }
.currentlocation { margin-top: 2px; padding: 1px 20px 1px 0; text-align: right; clear: right; position: relative;
font-family: "Georgia", serif; text-transform: lowercase; background:url(http://i39.tinypic.com/9iekxy.png) no-repeat center right; }
.currentmood {margin-top: 2px; padding: 1px 20px 1px 0; text-align: right; clear: right; position: relative;
font-family: "Georgia", serif; text-transform: lowercase;background:url(http://i43.tinypic.com/16216qw.png) no-repeat center right;}
.currentmusic {margin-top: 2px; padding: 1px 20px 1px 0; text-align: right; clear: right; position: relative;
font-family: "Georgia", serif; text-transform: lowercase;background:url(http://i39.tinypic.com/ubvxh.png) no-repeat center right;}
.ljtags { margin-top: 50px; padding: 1px 20px 10px 0; text-align: right; clear: right; position: relative; border-bottom: 1px dashed #dddddd;
background:url(http://i44.tinypic.com/rk4roj.jpg) no-repeat center right; font-family: "Georgia", serif;
text-transform: lowercase; margin-bottom: -10px; }
h2 { font-family: "Book Antiqua", Georgia, serif; font-size: 20px;line-height: 100%; color: #669999; padding-left: 10px;
font-weight: normal; margin: 0px auto; background-color:#fafafa; text-align: left; padding-top: 15px;}
.ljtaglist { list-style-type: none; text-align: left; margin: 0px auto 10px; padding: 3px 15px 15px 15px; background-color: #fafafa;
font-size:11px; color: #444444; border-top: none;}
.ljtaglist li { margin: 3px; padding: 3px; border-bottom: 1px solid #eeeeee;}
.ljtaglist li:hover { margin: 3px; padding: 3px; border-bottom: 1px solid #dddddd; background-color: #f9f9f9;}

/* ----- archives ----- */

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: 1px solid #dddddd }
table.yeartable td.yearday { background-color: #eeeeee; text-align: center; }
td.yearmonth { border-style: none;}

/* ----- comments ----- */

.comments { font-family: "Georgia", serif; font-size: 11px; text-align: left; background-color: transparent; padding: 0px 5px 0px 5px; position: relative; top: 0px; }
div.comments a, div.comments a:link, div.comments a:visited{ color: #669999; }
div.comments a:hover { color: #99CCCC; text-decoration: none; }
.datesubjectcomment { background-color: #fafafa; padding: 5px; margin-top: 20px; }
.userpiccomment { position: relative; background-color: #fafafa; top: -30px; left: 0px; padding: 5px; margin: 10px 10px -20px 10px;
z-index: 15; float: right; border: 1px solid #dedede; width: 70px; height: 70px; }
.box { border-top: 1px dashed #eeeeee; padding: 10px; clear: left; }
input, textarea { background-color: #eeeeee; color: #555555; border: 1px solid #dddddd; padding: 2px; }
textarea.textbox { width: 100% !important; } .replytosubject { font-weight: bold; }
.reply {position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; font-family: "Georgia", serif; font-size: 11px; line-height: 125%; background-color: #fafafa; color: #444444; }
.commentreply { position: relative; margin: 10px; font-size: 11px; font-family: "Georgia", serif; color: #444444; }
.commentbox, .commentboxpartial{ border: 1px solid #dddddd; padding: 10px; margin: 10px; background-color: #fafafa; }
.datesubjectcomment a:link, .datesubjectcomment a:visited { color: #669999; }
.datesubjectcomment a:hover { color: #b0b9c8; }
.commentinfo { background-color: #fafafa; margin-top: 10px; width: 100%; }
form#qrform table {border-width: 0px !important; }

/* ----- misc ----- */

.clear { height: 15px; } .separator{ height: 35px; }
.skiplinks { text-align: left; padding: 5px; background-color: #fafafa; border: 1px solid #eeeeee }
select { border: 1px solid #dddddd; background-color: #eeeeee !important; padding: 2px;}
::-moz-selection { background-color: #99CCCC; color: #444444; }
.ljuser a b {font-family: "Georgia" ,Times New Roman, serif; font-weight:normal; color: #669999}
.ljuser a b:hover {font-family: "Georgia" ,Times New Roman, serif; font-weight:normal; color: #99CCCC}

/* ----- mini icons ----- */

.subject img {vertical-align: middle !important; }
img[src*="http://l-stat.livejournal.com/img/icon_protected.gif"], img[src*="http://l-stat.livejournal.com/img/icon_private.gif"],
img[src*="http://l-stat.livejournal.com/img/icon_groups.gif"], .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_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;background: transparent none no-repeat scroll 0 0; }
img[src*="icon_protected.gif"]{ width: 0; height: 0; padding: 16px 16px 0px 0px !important; background: transparent url(http://i41.tinypic.com/2j61i82.png) no-repeat scroll 0 0; }
img[src*="icon_private.gif"]{ width: 0;height: 0; padding: 16px 16px 0px 0px !important; background: transparent url(http://i44.tinypic.com/1t1pbk.png) no-repeat scroll 0 0; }
img[src*="icon_groups.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i41.tinypic.com/2j61i82.png) no-repeat scroll 0 0; }
.ljuser img {width: 0; height: 0; background: transparent url(http://i41.tinypic.com/5eh8r5.png) no-repeat 0 0;
padding: 10px 10px 0 2px !important; vertical-align: text-bottom !important}
.ljuser img[src*="http://l-stat.livejournal.com/img/userinfo.gif"] {background: transparent url(http://i41.tinypic.com/5eh8r5.png) no-repeat center left !important;
padding: 10px 10px 0 2px !important; }
.ljuser img[src*="http://l-stat.livejournal.com/img/community.gif"] { background: transparent url(http://i41.tinypic.com/141qn46.png) no-repeat scroll 0 0 !important;
padding: 10px 10px 0 2px !important; }
.ljuser img[src*="syndicated.gif"]{background-image: url(http://i46.tinypic.com/19bhb7.png) !important}
.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i40.tinypic.com/4i1kye.png) !important}
.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i43.tinypic.com/a243uf.png) !important}
.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i39.tinypic.com/2yo21wm.png) !important}
img[src*="btn_del.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/cross.png);}
img[src*="btn_scr.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/151.png);}
img[src*="btn_unscr.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/159.png);}
img[src*="btn_freeze.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/layers.png);}
img[src*="btn_unfreeze.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/layers__minus.png);}
img[src*="btn_track.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/sticky_note_pin.png);}
img[src*="btn_tracking.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/sticky_note_text.png);}
img[src*="btn_tracking_thread.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/sticky_notes_text.png);}
img[src*="anonymous.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/user_silhouette.png);}
img[src*="openid-profile.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/map.png);}
img[src*="userinfo.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/user_orange_female.png);}
img[src*="talk/none.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/037.png);}
img[src*="help.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/043.png);}
img[src*="pencil.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/018.png);}
img[src*="btn_edit.gif"] { padding: 0 0 16px 16px !important; background-image: url(http://i5.photobucket.com/albums/y193/vespergenic/random/019.png);}

/*----- Contextual Pop-up settings ----- */

div.ContextualPopup div.Inner {filter:alpha(opacity=75); -moz-opacity:0.75; opacity: 0.75; background:#eeeeee !important; color:#444444 !important; border:none; padding:10px; width: 250px; font-family:Georgia, "Times New Roman", Times, serif; }
div.ContextualPopup .Content { padding:7px 10px 7px 10px; margin-right:80px; line-height: 1.4; background: #eeeeee; }
div.ContextualPopup .Userpic { filter:alpha(opacity=70); -moz-opacity:0.7; opacity: 0.7; padding:10px; background:#eeeeee; margin:0px; border:1px solid #dddddd; }
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: normal; color:#444444 !important; }
div.ContextualPopup .Relation { letter-spacing:1px; border-bottom: 1px dashed #dddddd; margin-bottom:4px; padding-bottom:4px; }

/* ----- navstrip ----- */

table#lj_controlstrip td { background-color:#fafafa; background-image: url(); color: #444444; border-left: none; border: 1px solid #fafafa; }
#lj_controlstrip a { color: #669999; } #lj_controlstrip a:hover { color: #99CCCC; text-decoration: none; }
#lj_controlstrip_statustext { color: #444444; } #lj_controlstrip_userpic { display: none; }

maker: ghost_factory, style: flexible squares

Previous post Next post
Up