s2 layout: nightswimming [flexible squares]

[milou_veronica]

not crossposted
I'm still working on all the layout requests, but I also have a backlog of random layouts collecting that I'd like to post.

layout: nightswimming
style: flexible squares
accounts: Basic, Paid, and Sponsored
features:custom comment pages, topbar, lotsa mini icons
browsers: IE7, FF, Safari, and Opera


picture | live


/*-------------------------------------------------
NIGHTSWIMMING // by milou veronica
flexible squares // basic, plus and paid
----------------------------------------------------*/

body { background: url(http://i37.tinypic.com/vhqdtx.jpg) #dddddd repeat fixed 0 0; text-align: center; color: #ffffff; font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 8pt; margin: 10px 0px 0px 0px;}

.headerimage {position: relative; background: url(); width: 0px; height: 0px; background-repeat: no-repeat;margin-left: auto;margin-right: auto;margin-bottom: 0px; }

#content{ color: #666666; width: 750px; margin-left: auto; margin-right: auto; margin-top: 0px; border-width: 0px; padding: 0px;}

#maincontent { padding: 0px; margin-top: 0px; text-align: justify; margin-right: 120px; }

#sidebar { padding: 15px; background-color: #333333;min-height: 140px; margin-right: 120px; width: auto; text-align: left; color: #999999; font-size: 7pt;}

/*-------------------HEADER-----------------------*/
#header { font-family: Trebuchet MS, Georgia, Times New Roman, Book Antiqua, serif; background-color: #000000; margin: 0px 120px 0px 0px; text-align: center; font-size: 6pt; letter-spacing: 2px; text-transform: uppercase; color: #ffffff; height: 50px;}

div#header a, div#header a:link, div#header a:visited{ color: #aaaaaa; text-transform: uppercase; }
div#header a:hover { }
div#header li.view { }

ul.navheader{ padding: 0px; margin: 0px; }
ul.navheader li {display: block; float: left; margin: 0px; list-style-type: none; }

ul.navheader li a {display: block; float: left; width: 100px; color: #ffffff; margin: 0px; padding: 20px 0px 20px 0px; border-right: 1px solid #333333;}
.view { background-color: #333333; display: block; float: left; width: 100px; color: #77B3BF; margin: 0px; padding: 20px 0px 20px 0px; border-right: 1px solid #333333; }
ul.navheader li a:hover { background-color: #2d2d2d; }

.title { display:none; padding: 10px; margin: 0px; text-align: center; text-transform: lowercase; }
.subtitle{ display:none;}

/*-------------------ENTRIES-----------------------*/
.subcontent { min-height: 120px; margin-right:0px; background-color: #FFFFFF; border: 0px solid #DFD2C3;}

.date { text-transform: uppercase; font-family: Trebuchet MS, Georgia, Times New Roman, Book Antiqua, serif; color: #888888; float: right; font-size: 8px; margin-left: 10px;}

.subject { font-family: Trebuchet MS, Georgia, Times New Roman, Book Antiqua, serif; background-color: transparent ; letter-spacing: 0px; font-size: 13px; text-transform: lowercase; line-height: 100%;}

.subject a, .subject a:link, .subject a:visited {text-decoration: bold;}

.datesubject { background-color: #eeeeee; padding: 20px; border-bottom: 0px solid #eeeeee;}

.entry { margin: 0px; padding: 15px; text-align: justify; line-height: 150%; border-width: 0px;}

.entry_text { min-height: 50px; margin-bottom: 20px;}

.entry ul li {padding-left: 5px;margin-left: 15px;}

.entry ol li{padding-left: 5px;margin-left: 15px;}

/*---------------------------USERPICS----------------------------*/
.userpic { position: relative; float: right; padding: 3px; background-color: #ffffff; margin: 10px -120px 10px 10px; z-index: 15; border: 1px solid #cccccc;}
.userpicfriends { border: 0px solid #eeeeee; position: relative; background-color: transparent !important; float: right; padding: 3px; margin: 10px -120px 10px 10px; text-align: right; font-size: 7pt; z-index: 15;}
.userpicfriends img {border: 0px; padding: 3px; border: 1px solid #cccccc; background-color: #ffffff; }
.userpicfriends a font {color: #aaaaaa;}

/*--------------------------COMMENT BAR-------------------------*/
.comments {border: 0px solid #f1f1f1; color: #ffffff; font-family: Trebuchet MS, Georgia, Times New Roman, Book Antiqua, serif; font-size: 14px; text-align: center; padding: 6px 5px 6px 5px; position: relative; top: 0px; text-transform: uppercase;}

div.comments a, div.comments a:visited, div.comments a:link { padding: 3px; }
.separator{height: 25px;}

/*-------------------------CURRENTS AND TAGS-------------------------------------*/
.ljtags {text-align: right; border-right: 3px solid #eeeeee; padding: 2px 6px 2px 2px ; margin-top: 50px; position: relative; text-transform: lowercase; font-size: 7pt; color: #888888;}
.ljtags:hover {border-color: #dddddd;}

.currents {text-align: right; margin-top:0px; padding: 0px; text-transform: lowercase; font-size: 7pt; color: #646464;}
.currents:hover { border-color: #dddddd;}
.currents strong {font-weight: normal; text-decoration: none; color: #888888; }
.currentlocation {padding: 2px 6px 2px 2px; border-right: 3px solid #eeeeee;} .currentmood {padding:2px 6px 2px 2px; border-right: 3px solid #eeeeee;} .currentgroups {padding: 2px 6px 2px 2px; border-right: 3px solid #eeeeee;} .currentmusic {padding: 2px 6px 2px 2px; border-right: 3px solid #eeeeee;}
.currentlocation:hover { border-color: #dddddd;} .currentmood:hover { border-color: #dddddd;} .currentgroups:hover { border-color: #dddddd;} .currentmusic:hover { border-color: #dddddd;}
/*----------------------TAG PAGE------------------------------*/
h2 { background-color: #eeeeee; border:0px solid #eeeeee; padding: 10px 10px 10px 30px; font-size: 7pt; font-family: Trebuchet MS, Georgia, Times New Roman, Book Antiqua, serif; font-weight: normal; text-transform: uppercase; letter-spacing: 4px; margin: 0px; }

.ljtaglist {border: 0px solid #dddddd; text-align: center; margin: 0px; padding: 30px; background-color: #ffffff; padding: 25px; font-size:10px; list-style:none;}

/*---------------------COMMENT PAGE-----------------------------*/
.box { text-align: left; margin-bottom:1px; padding: 0px; clear: left;}

.datesubjectcomment {text-align: left; color: #999999; margin-top: 0px; }

.userpiccomment { position: relative; padding: 3px; border: 1px solid #eeeeee; background-color: #ffffff; left: 0px; margin: 0px 10px 0px 0px; z-index: 15; float: left;}

input, textarea { font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; background-color: #f1f1f1; border: 1px solid #cccccc; color: #999999;}
textarea.textbox {width: 100% !important;}

.reply { border: 0px ; position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; line-height: 1.25;}

.replytosubject {letter-spacing:2px; font-weight: bold;}

.commentreply { min-height: 65px; text-align: left; position: relative; margin: 10px 10px 10px 20px;}

.commentbox { border: 0px solid #eeeeee; background-color: #ffffff; padding: 30px 10px 10px 20px;margin: 7px 0px 7px 0px;}

.commentbox:hover, .commentboxpartial:hover {border-color: #dddddd;}

.commentboxpartial { border-color: #ececec; border-width: 1px; border-style: solid; padding: 10px; margin: 10px;}

.commentinfo { background-color: #ffffff; margin-top: 10px; width: 100%;}

.skiplinks {text-align: right; margin: 0px; font-family: Trebuchet MS, Georgia, Times New Roman, Book Antiqua, serif; padding: 10px; font-size: 7pt; letter-spacing: 1px; color: #777777; background-color: #3a3a3a;}

/*------------------------TOPBAR-----------------------------------------*/
.defaultuserpic {text-align: center; margin:0px; padding:0px;}
.defaultuserpic img {float:right; padding: 0px; border: 4px solid #2d2d2d; margin-top: 10px; width: 60px; height: 60px;}

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

.sbarbody2 {float:right; width: 220px; padding: 0px; }

ul.sbarlist{ margin: 0px; padding: 0px; margin-left: 0px; list-style: none;}
li.sbaritem{ padding: 0px 7px 0px 12px; border-left: 1px solid #2d2d2d; display: inline;}
li.sbartitle{text-transform: lowercase; margin-top: 8px; font-family: Trebuchet MS, Georgia, Times New Roman, Book Antiqua, serif; color: #777777;}

#sidebar_linklist { text-transform: lowercase; }
#sidebar_summary {display:none; }
#sidebar_tags li.sbaritem {text-transform: lowercase;}
#sidebar_calendar {display:none; }

table.calendar { margin-right: auto; margin-left: auto;}
.sbarcalendar { padding: 2px; background-color: #f7f7f7; border: 1px solid #dddddd; text-align: center; font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px;}
.sbarcalendarposts:hover { background-color: #fffffff; }
.sbarcalendarposts { border:1px solid #aaaaaa; background-color: #fafafa; text-align: center; font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px;}

/*---------------------FOOTER----------------------------------*/
#footer { background-color: #000000; margin-right: 120px; font-family: Trebuchet MS, Georgia, Times New Roman, Book Antiqua, serif; width: auto; padding: 5px; text-align: right; text-transform: uppercase; font-size: 7pt; letter-spacing: 3px; z-index: 100; clear: both; margin-top: -40px;}

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

div#footer li.viewing {color: #555555;}
div#footer a, div#footer a:link, div#footer a:visited {padding-top: 15px; display:block; color: #aaaaaa; }
div#footer a:hover { color:#bbbbbb; }

.clearfoot { margin-right: 120px; background-color: #000000; clear: both;}

/*-----------------------ARCHIVE PAGE--------------------------------*/
ul.year { margin: 0px; font-family: Trebuchet MS, Georgia, Times New Roman, Book Antiqua, serif; border: 0px solid #eeeeee; background-color: #eeeeee; width: auto; text-align: center; padding: 20px;}
ul.year li {display: inline;}
table.yeartable { border:0px solid #eeeeee; background-color: #ffffff; margin-left: auto; margin-right: auto; padding: 30px; width: 100%;}
table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #888888;}
table.yeartable td.yearday { background-color: #fafafa; text-align: center;}
td.yearmonth {border-style: none;}
.clear {display:none; height: 8px;}

/*------------MINI ICONS BY BRANDSPANKING NEW-------------*/
.subject img[src*="icon_protected.gif"]{ width: 0; height: 0; padding: 10px 10px 0px 0px !important; background-repeat: no-repeat; background: url(http://i34.tinypic.com/71gsbs.gif); background-position: center left; }
.subject img[src*="icon_private.gif"]{ width: 0; background-repeat: no-repeat; height: 0; padding: 10px 10px 0px 0px !important; background: url(http://i38.tinypic.com/14kb51d.gif); background-position: center left; }
img[src*="icon_groups.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i36.tinypic.com/33yt16a.gif); }

.ljuser img { width: 0; height: 0; background: transparent url(http://i35.tinypic.com/2mouich.gif) no-repeat center left; padding: 17px 10px 0 2px !important; }
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i35.tinypic.com/2mouich.gif) no-repeat center left; padding: 17px 10px 0 2px !important; }

.ljuser img[src*="community.gif"] {background-color:transparent; background-image: url(http://i36.tinypic.com/v5v12f.gif); padding: 17px 10px 0 2px !important; background-position: center left; }
.ljuser img[src*="syndicated.gif"] {background-color:transparent; background-image: url(http://i38.tinypic.com/25tkh90.jpg); padding: 17px 10px 0 2px !important; background-position: center left; }

.Note .Inner { background: #ffffff none repeat scroll 0 0; border: 1px solid #dddddd; color: #666666;} .ippu .track_title {letter-spacing: 3px; color: #444444; font-weight: normal;} div.ljcmtmanage { background: #ffffff none repeat scroll 0 0; border: 1px solid #dddddd; padding:10px; }
img[src*="btn_del.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i37.tinypic.com/546tdg.gif); }
img[src*="btn_scr.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i37.tinypic.com/i2irdh.gif);}
img[src*="btn_unscr.gif"] { height: 0px; width: 0px;padding: 0px 0px 10px 10px !important; background: url(http://i34.tinypic.com/167q9vt.gif); }
img[src*="btn_freeze.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i37.tinypic.com/2wmqkxk.gif); }
img[src*="btn_unfreeze.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i36.tinypic.com/2iu92b.gif); }
img[src*="btn_track.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i35.tinypic.com/2u7sjgm.gif); }
img[src*="btn_tracking.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i37.tinypic.com/k2ob5v.gif); }
img[src*="btn_tracking_thread.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i37.tinypic.com/k2ob5v.gif); }
img[src*="anonymous.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i33.tinypic.com/v3zomw.gif); }
img[src*="openid-profile.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i38.tinypic.com/6fzaki.gif); }
img[src*="userinfo.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i35.tinypic.com/2mouich.gif); }
img[src*="talk/none.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i34.tinypic.com/159d9f.gif); }
img[src*="help.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i34.tinypic.com/25a427t.gif); }
img[src*="pencil.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i36.tinypic.com/2d0fdk1.gif); }

/*-----------------CONTEXTUAL POP-UP-----------------*/
div.ContextualPopup {position: relative; margin: 10px 0 0 30px; text-align: left; font: normal 9px "Tahoma" !important; }
div.ContextualPopup div.Inner { color: #777777 !important;border: 1px solid #f1f1f1; background-color: #ffffff !important; padding: 4px; width: 300px;}
div.ContextualPopup .Userpic { padding: 2px; margin-left: 12px; border: 1px solid #ececec; background-color: #ffffff;}
div.ContextualPopup .Content { padding: 5px; margin: 4px 80px 4px 4px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: bold; color: #777777 !important;}
div.ContextualPopup .Relation { text-transform: lowercase; font-family: Trebuchet MS, Georgia, Times New Roman, Book Antiqua, serif; font-size:11pt;}

/*--------------- MISC-------------- */
table#lj_controlstrip td {background-color: #fafafa; background-image: url(); color: #666666;border: solid 1px #eeeeee; border-left: none; }
#lj_controlstrip a { color: #999999; } #lj_controlstrip_statustext { color: #666666; }

img:hover { filter: alpha(opacity=90); moz-opacity: .90; opacity: .90; }
img { filter: alpha(opacity=100); moz-opacity: 1; opacity: 1; }
b, u { color: #444444;}
i, s { color: #999999; font-family: Trebuchet MS, Georgia, Times New Roman, Book Antiqua, serif;}
p, td {font-size: 11px;}

blockquote { padding:15px; border: 1px solid #eeeeee; border-top: 5px solid #eeeeee; color:#8c8c8c; font-family: Arial, Tahoma, "Verdana", sans-serif;}
code { display:block; padding:5px; border:1px dashed #DDDDDD; font-size: 12px;}

kbd, pre, tt {font-family: monospace;}
textarea { background-color: #fafafa; }

/*-------------------COLORS-----------------------*/
a, a:link, a:visited, .subject a, .subject a:link, .subject a:visited, h2, code, .datesubjectcomment a:link, .datesubjectcomment a:visited, div#header li.view, div.ContextualPopup .Relation {
color: #67A0CF;
font-family: Trebuchet MS, Georgia, Times New Roman, Book Antiqua, serif;
text-decoration: none;}

a:hover, .subject a:hover, div.comments a:hover, div#sidebar a:hover, .datesubjectcomment a:hover, div#header a:hover, .subject {color: #EF870E; top: 1px; left: 1px; text-decoration: none;}
.subject a, .subject a:link, .subject a:visited, .subject a:hover {color: #EF870E;}

/*-------------------TAG VISIBILITY: remove the display:none;-----------------------*/
#sidebar_tags {display: inline; margin:0px; display:none;}

installation
>> Choose Journal Style
>> Select a "Grays" Flexible Squares layout in "Select a New Theme"
>> In Choose a Page Setup select 2 Column (sidebar on right) . If you have a plus or basic account, make sure the ads are set to horizontal or between entries.
>>Go to " Customise your Theme " and then "Style ". Change the "Background color of the outer table" to #ffffff.
>> Then go to the "Sidebar " section. Make sure that the default user picture, Blurb, Links List, and Tags are set to "Yes". This is also where you add the free text. Also delete the Title of the blurb sidebar box.
>>Still in "Customise your Theme", go to "Custom CSS ". Ensure Use layout's stylesheet(s) is set to no
>> Paste code into the Custom Stylesheet box.

notes:
>> To make your tagslist visible like in the preview I've put a bit right at the end of the code so it's easy to find. Just remove the display: none;.
>> To add a header. The code for this is right at the top: put your url in between the brackets and the width and height in their repective sections.
>> mini icons by Brand Spanking New
>> Need help, or have questions? First check out the F.A.Q.

troubleshooting:
>> If you notice that you're userpic for the first entry has benen displaced, to fix this simply go to #sidebar { right at the beginning of the code and increase the min-height.