layout: caderyn's Finding my way throught the rain

Sep 21, 2008 12:21

layout: caderyn's Finding my way throught the rain
style: flexible squares
accounts: Basic, Paid, and Sponsored
features:custom comment pages
browsers: IE7, FF, Safari, and Opera


picture | live

picture | live

picture | livefrom layout requsts: an all "courier new" layout: the use of cute icons : sidebars not to be shown at all and I like 'wide' layouts that almost stretch to the whole page, but I'd like individual entry to have its own 'box/border'.

notes: I found Courier New quite challenging to work with, and I don't think I really ended up doing it justice (which is why there are 3 versions). Nonetheless, I hope you like it!

(try hovering over the tag/currents/comment bar- neat, right?)

[1] Black on yellow

/*---------------------------------------------------
caderyn's Finding my way throught the rain (1) // by milou_veronica
flexible squares layout (basic, plus and paid)
-----------------------------------------------------*/
.headerimage {position: relative; background: transparent url() no-repeat scroll 50% 50%; width: px; height: px; margin-left: auto; margin-right: auto; margin-bottom: 0px; }
body { background: url(); margin-top 20px;background-color: #EFEBE0; text-align: center; color: #fdfdfd; font-family: Courier New, Arial, Tahoma, "Verdana", sans-serif; font-size: 11px;}
a, a:link, a:visited { color: #67AACF; text-decoration: none;}
a:hover {color: #C3D5DF;text-decoration: none; font-style: italic;}
b, u { color: #333333;}
i, s { color: #777777;}
p, td {font-size: 11px;}
blockquote { background-color:#fcfcfc; padding:8px; border: 1px #cccccc solid; color:#555555; }
code { background-color: #fafafa; display:block; color: #555555; padding:5px; border:1px dashed #cccccc; font-size: 12px; font-family: Arial, Tahoma, "Verdana", sans-serif;}
kbd, pre, tt {font-family: monospace;}
textarea { background-color: #fafafa; }
#content{ width: 80%; margin-left: auto; margin-right: auto; border-width: 0px; padding: 0px;}
#maincontent { padding: 0px 0px 0px 10px; border-left: 200px solid #333333; margin-right: auto; text-align: justify; font-size: 11px; color: #666666; }
#sidebar {display: none;}

/*------------------------------- HEADER-----------------------------------------------------------*/
#header {width: auto; padding: 5px 0px 10px 0px; margin: 20px 0px 20px 0px; text-align: left; font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ; font-size: 14px; font-weight: normal; font-style: normal; border: 0px solid #dddddd; float: left; text-transform: lowercase; color: #555555; letter-spacing: -1px;}
ul.navheader{list-style:none; padding: 15px 0px 5px 0px;margin: 0px; }
ul.navheader li {list-style:none; padding: 15px 0px 5px 0px; display: block;}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited{ margin-left: 15px; color: #ffffff; margin-right: 15px; padding: 5px 0px 5px 22px; background: transparent url("") no-repeat scroll center left; }
div#header a:hover, div#footer a:hover {color: #74B7CF; text-decoration: none; margin-left: 15px; margin-right: 15px;padding: 5px 0px 5px 22px;background: transparent url("http://i34.tinypic.com/2zfkboo.png") no-repeat scroll center left; }
div#header li.view, div#footer li.viewing { margin-left: 15px; margin-right: 15px; padding: 5px 0px 5px 22px; background: transparent url("http://i34.tinypic.com/rk8n6u.png") no-repeat scroll center left;}
.title { text-transform: uppercase; font-size: 16px; color: #EFCE77; text-align: center; letter-spacing: 1px; padding: 10px 0 10px 10px; margin: 30px 0px 0px 10px; width: 170px; border-top: 1px solid #444444;}
.subtitle{ text-transform: uppercase; font-size: 9px; color: #999999; text-align: center; letter-spacing: 6px; padding: 10px 0 10px 10px; margin-left: 10px; width: 170px; border-top: 1px solid #444444;}

/*------------------------------------ENTRIES --------------------------------*/
.subcontent {padding-right: 15px; border: 1px solid #dddddd; background-color: #ffffff; }
.entry { margin: 0px 10px 50px 20px; padding: 0px; color: #777777; font-family: Courier New, Arial, Tahoma, "Verdana", sans-serif; font-size: 12px; text-align: justify; line-height: 150%; border-width: 0px;}
.entry_text { margin-left: 120px; padding-top:20px; border: 0px; bottom: 0px;}
.date { font-family: Courier New, Arial, Tahoma, "Verdana", sans-serif; text-align: left; text-transform: uppercase; color: #aaaaaa; font-size: 9px; padding-left: 0px; background-position: center left;}
.subject {text-transform: lowercase; text-align: left; padding: 5px 0px 0px 0px; background-color: transparent ; color: #333333; font-style: normal; font-family: Courier New, serif, Trebuchet MS; font-size: 17px; line-height: 100%; letter-spacing: -1px;}
.subject a, .subject a:link, .subject a:visited { color: #555555; text-decoration: bold;}
.subject a:hover { color: #BFBFBF; text-decoration: none;}
.datesubject {margin-top: 15px; padding: 5px 0px 5px 8px; border-left:10px solid #74C0CF; margin-left: 130px;}
.userpic {position: relative; float: left; margin: 10px; z-index: 15; }
.userpicfriends {position: relative; background-color: transparent !important; float: left; padding: 4px; margin: 12px; text-align: right; border: 1px #f5f5f5 solid; font-family: Courier New, Tahoma, "Verdana", sans-serif; font-size: 11px; z-index: 15;}
.userpicfriends a font {color: #aaaaaa;}
.entry ul li {padding-left: 5px;margin-left: 15px;}
.entry ol li{padding-left: 5px;margin-left: 15px;}

/*--------------------------------------TAGS, CURRENTS, COMMENT BAR--------------------------------------------*/
.comments { background: transparent url(http://i35.tinypic.com/1zqx744.png) no-repeat scroll 50% 0%; font-size: 15px; text-align: center; padding: 20px 5px 0px 0px; position: relative; top: 15px;font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana"; text-transform: lowercase;}
.comments:hover {background: transparent url(http://i36.tinypic.com/wjc5dd.png) no-repeat scroll 50% 0%; }
div.comments a, div.comments a:link, div.comments a:visited{ color: #555555; text-decoration: none;}
div.comments a:hover {color: #BFBFBF; text-decoration: none;}
.separator{height: 5px;}

.currents {width: 375px; margin-top:0px; padding:0px; text-transform: lowercase; background-color: #F7F3E8; font-family: Courier New, Tahoma, "Verdana", sans-serif;}
.currentlocation { padding: 3px 3px 3px 22px ; text-transform: uppercase; font-size: 7pt; color: #888888; background: transparent url(http://i37.tinypic.com/156z9ea.png) no-repeat scroll 1% 50%; }
.currentlocation:hover {background: transparent url(http://i34.tinypic.com/30b1yx1.png) no-repeat scroll 1% 50%; }
.currentmood { padding: 3px 3px 3px 22px ; text-transform: uppercase; font-size: 7pt; color: #888888; background: transparent url(http://i36.tinypic.com/syqwm1.png) no-repeat scroll 1% 50%; }
.currentmood:hover {background: transparent url(http://i38.tinypic.com/hsq0r9.png) no-repeat scroll 1% 50%; }
.currentmusic { padding: 3px 3px 3px 22px ; text-transform: uppercase; font-size: 7pt; color: #888888; background: transparent url(http://i34.tinypic.com/a451yr.png) no-repeat scroll 1% 50%; }
.currentmusic:hover {background: transparent url(http://i37.tinypic.com/330ahzm.png) no-repeat scroll 1% 50%; }
.ljtags { width: 350px; text-transform: uppercase; padding: 8px 3px 3px 22px ; font-family: Courier New, Tahoma, "Verdana", sans-serif; margin: 80px 0px 0px -120px; position: relative; font-size: 7pt; color: #888888; background: #F7F3E8 url(http://i33.tinypic.com/2nailhd.png) no-repeat scroll 1% 50%; }
.ljtags:hover {width: 344px; background: #F7F3E8 url(http://i37.tinypic.com/9ixoh3.png) no-repeat scroll 1% 50%; }
div.ljtags {font-weight: bold;}
div.ljtags a {font-weight: normal;}
h2 { text-transform: uppercase; color: #555555; background-color: #ffffff; font-family: Courier New, serif, Trebuchet MS; font-size: 16px; padding: 10px; border: 1px solid #eeeeee; border-bottom: 0px; font-weight: normal; font-style: normal; letter-spacing: 1px; margin: 0px;}
.ljtaglist { border: 1px solid #dddddd; border-top: 0px; margin-left: auto; margin-right: auto; background-color: #ffffff; padding: 0px 24px 25px 24px; border: 0px; color:#888888; font-size:10px; list-style:none; margin: 0px;}

/*----------------------------------COMMENT PAGES-----------------------------------------*/
.box { background-color: #ffffff; border: 1px solid #dddddd ; padding: 15px; margin-bottom: 2px;clear: right;}
.datesubjectcomment { background-color: #ffffff; padding: 5px; margin-top: 20px;}
.userpiccomment { position: relative; padding: 4px; border-width: 1px; border-style: dashed; border-color: #eeeeee; left: 0px; margin: 0px 10px 0px 0px; z-index: 15; float: left;}
input, textarea { font-size: 11px; background-color: #fafafa; 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; font-size: 11px; line-height: 125%; color: #555555; }
.replytosubject {font-weight: bold;}
.commentreply { position: relative; margin: 10px; font-size: 11px; color: #555555;}
.commentbox { border-bottom: 1px solid #eeeeee; padding: 10px 10px 30px 10px; margin: 0px 10px 0px 10px; background-color: #ffffff;}
.commentbox:hover, .commentboxpartial:hover {border-color: #dddddd;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #555555;}
.datesubjectcomment a:hover {color: #BFBFBF;}
.commentboxpartial { border-color: #555555; border-width: 0px; padding: 10px; margin: 10px; background-color: #ffffff;}
.commentinfo { margin-top: 10px; }
.skiplinks {text-align: center; padding: 10px; margin-bottom: 10px; border: 1px solid #dddddd; background-color: #ffffff;}

/*-------------------------------------FOOTER -----------------------------------------------*/
#footer { width: auto; padding: 0px; text-align: center; font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; color: #444444; border-width: 0px; z-index: 100; clear: both;}
ul.navfooter{ padding: 0px; margin: 0px;}
ul.navfooter li { display: inline; margin: 0 5px 0 5px;}
.clearfoot {clear: both; }

/*---------------------------------ARCHIVE PAGES --------------------------------------*/
ul.year { text-align: center; padding: 20px 0px 20px 0px; border-bottom: 0px; border-top: 1px solid #eeeeee; border-left: 1px solid #eeeeee; border-right: 1px solid #eeeeee; background-color: #ffffff; font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ; font-size: 20px; margin: 0px; }
ul.year li {display: inline;}
table.yeartable { border: 1px solid #eeeeee; border-top: 0px; width: 100%; background-color: #ffffff; margin: 0px; padding: 20px;}
table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #cccccc;}
table.yeartable td.yearday { background-color: #ffffff; text-align: center;}
td.yearmonth {border-style: none;}
.clear { height: 0px;}

/*-------------------------------------------- MINI ICONS by famfamfam -----------------------------------------*/
.subject img[src*="icon_protected.gif"]{ width: 0; height: 0; padding: 8px !important; background-repeat: no-repeat; background: url(http://i38.tinypic.com/qys5sh.png); background-position: center left; }
.subject img[src*="icon_private.gif"]{ width: 0; background-repeat: no-repeat; height: 0; padding: 8px !important; background: url(http://i33.tinypic.com/2nr3rfc.png); background-position: center left; }
.ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; background-image: url(http://i37.tinypic.com/10coz07.jpg); padding: 8px 10px 8px 8px !important; background-position: center left;}
.ljuser img[src*="userinfo.gif"] {background-color:transparent; background-image: url(http://i37.tinypic.com/10coz07.jpg); padding: 8px 10px 8px 8px !important; background-position: center left; }
.ljuser img[src*="community.gif"] {background-color:transparent; background-image: url(http://i33.tinypic.com/fxgd4h.png); padding: 8px 10px 8px 8px !important; background-position: center left; }
img[src*="icon_groups.gif"] { height: 0px; width: 0px; padding: 16px 16px 0px 0px !important; background: url(http://i37.tinypic.com/2rz7587.png); }
img[src*="btn_del.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i34.tinypic.com/1415tgo.png); }
img[src*="btn_scr.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i33.tinypic.com/vhfe6x.png);}
img[src*="btn_unscr.gif"] { height: 0px; width: 0px;padding: 0px 0px 16px 16px !important; background: url(http://i36.tinypic.com/ws8w92.png); }
img[src*="btn_freeze.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i35.tinypic.com/vd3dw8.png); }
img[src*="btn_unfreeze.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i35.tinypic.com/aexw7t.png); }
img[src*="btn_track.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i36.tinypic.com/1zvsebo.png); }
img[src*="btn_tracking.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i36.tinypic.com/i1y1s2.png); }
img[src*="btn_tracking_thread.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i36.tinypic.com/2a69ljq.png); }
img[src*="anonymous.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i38.tinypic.com/vn03mt.jpg); }
img[src*="openid-profile.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i33.tinypic.com/2hdmi6e.png); }
img[src*="talk/none.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i35.tinypic.com/2vht46r.png); }
img[src*="help.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i38.tinypic.com/2u44zkg.png); }
.Note .Inner { background: #ffffff none repeat scroll 0 0; border: 1px solid #bababa;}

/*--------------------------------------------contexual pop-up -----------------------------------------*/
div.ContextualPopup {position: relative; margin: 10px 0 0 30px; text-align: left; font: normal 9px "Tahoma" !important; }
div.ContextualPopup div.Inner { background:#fefefe !important; color: #888888 !important; border: 1px solid #dddddd; padding: 10px; width: 250px;}
div.ContextualPopup .Userpic { padding: 6px; margin-left: 12px; background:#fefefe; border: 1px solid #eeeeee;}
div.ContextualPopup .Content { padding: 5px; border: 0px margin: 4px 80px 4px 4px; background:#fefefe;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: bold; color: #888888 !important;}
div.ContextualPopup .Relation {font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ; text-transform: uppercase; font-size:11px; color:#AF9A62;}

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

[2] Blue on yellow

/*---------------------------------------------------
caderyn's Finding my way throught the rain (2)// by milou_veronica
flexible squares layout (basic, plus and paid)
-----------------------------------------------------*/
.headerimage {position: relative; background: transparent url() no-repeat scroll 50% 50%; width: px; height: px; margin-left: auto; margin-right: auto; margin-bottom: 0px; }
body { background: url(); margin-top 20px;background-color: #EFEBE0; text-align: center; color: #fdfdfd; font-family: Courier New, Arial, Tahoma, "Verdana", sans-serif; font-size: 11px;}
a, a:link, a:visited { color: #67AACF; text-decoration: none;}
a:hover {color: #DEDF45;text-decoration: none; font-style: italic;}
b, u { color: #333333;}
i, s { color: #777777;}
p, td {font-size: 11px;}
blockquote { background-color:#fcfcfc; padding:8px; border: 1px #cccccc solid; color:#555555; }
code { background-color: #fafafa; display:block; color: #555555; padding:5px; border:1px dashed #cccccc; font-size: 12px;}
kbd, pre, tt {font-family: monospace;}
textarea { background-color: #fafafa; }
#content{ width: 80%; margin-left: auto; margin-right: auto; border-width: 0px; padding: 0px;}
#maincontent { padding: 0px; margin-right: auto; text-align: justify; font-family: Courier New, Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; color: #666666; }
#sidebar {display: none;}

/*------------------------------- HEADER-----------------------------------------------------------*/
#header {width: auto; padding: 105px 10px 5px 0px; margin: 0px 0px 5px 0px; text-align: right; font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ; font-size: 13px; font-weight: normal; font-style: normal; background-color: #A8C1CF; border: 1px solid #dddddd; text-transform: lowercase; color: #555555; letter-spacing: -1px;}
ul.navheader{ padding: 15px 0px 5px 0px;margin: 0px; }
ul.navheader li {display: inline; padding: 15px 0px 5px 0px; }
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited{ margin-left: 8px; color: #ffffff; margin-right: 8px; padding: 15px 0px 0px 0px; background: transparent url("") no-repeat scroll 50% 0%; }
div#header a:hover, div#footer a:hover {color: #74B7CF; text-decoration: none; margin-left: 8px; margin-right: 8px;padding: 15px 0px 0px 0px;background: transparent url("http://i34.tinypic.com/2zfkboo.png") no-repeat scroll 50% 0%; }
div#header li.view, div#footer li.viewing { margin-left: 8px; margin-right: 8px; padding:15px 0px 0px 0px; background: transparent url("http://i34.tinypic.com/rk8n6u.png") no-repeat scroll 50% 0%;}
.title { font-style: normal; font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ; text-transform: uppercase; font-size: 16px; color: #444444; text-align: left; letter-spacing: 1px; padding-left: 10px;}
.subtitle{ font-style: normal; font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ; text-transform: uppercase; font-size: 9px; color: #EFEBE0; text-align: left; letter-spacing: 6px; padding-left: 10px;}

/*------------------------------------ENTRIES --------------------------------*/
.subcontent {padding-right: 15px; border: 1px solid #dddddd; background-color: #ffffff; }
.entry { margin: 0px 10px 50px 20px; padding: 0px; color: #777777; font-family: Courier New, Arial, Tahoma, "Verdana", sans-serif; font-size: 12px; text-align: justify; line-height: 150%; border-width: 0px;}
.entry_text { margin-left: 120px; padding-top:20px; border: 0px; bottom: 0px;}
.date { font-family: Courier New, Arial, Tahoma, "Verdana", sans-serif; text-align: left; text-transform: uppercase; color: #aaaaaa; font-size: 9px; padding-left: 0px; background-position: center left;}
.subject {text-transform: lowercase; text-align: left; padding: 5px 0px 0px 0px; background-color: transparent ; color: #333333; font-style: normal; font-family: Courier New, serif, Trebuchet MS; font-size: 17px; line-height: 100%; letter-spacing: -1px;}
.subject a, .subject a:link, .subject a:visited { color: #555555; text-decoration: bold;}
.subject a:hover { color: #BFBFBF; text-decoration: none;}
.datesubject {margin-top: 15px; padding: 5px 0px 5px 8px; border-left:10px solid #74C0CF; margin-left: 130px;}
.userpic {position: relative; float: left; margin: 10px; z-index: 15; }
.userpicfriends {position: relative; background-color: transparent !important; float: left; padding: 4px; margin: 12px; text-align: right; border: 1px #f5f5f5 solid; font-family: Courier New, Tahoma, "Verdana", sans-serif; font-size: 11px; z-index: 15;}
.userpicfriends a font {color: #aaaaaa;}
.entry ul li {padding-left: 5px;margin-left: 15px;}
.entry ol li{padding-left: 5px;margin-left: 15px;}

/*--------------------------------------TAGS, CURRENTS, COMMENT BAR--------------------------------------------*/
.comments { background: transparent url(http://i35.tinypic.com/1zqx744.png) no-repeat scroll 50% 0%; font-size: 15px; text-align: center; padding: 20px 5px 0px 0px; position: relative; top: 15px;font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana"; text-transform: lowercase;}
.comments:hover {background: transparent url(http://i36.tinypic.com/wjc5dd.png) no-repeat scroll 50% 0%; }
div.comments a, div.comments a:link, div.comments a:visited{ color: #555555; text-decoration: none;}
div.comments a:hover {color: #BFBFBF; text-decoration: none;}
.separator{height: 5px;}

.currents {width: 375px; margin-top:0px; padding:0px; text-transform: lowercase; font-family: Courier New, Tahoma, "Verdana", sans-serif;}
.currentlocation { padding: 3px 3px 3px 22px ; text-transform: uppercase; font-size: 7pt; color: #888888; background: transparent url(http://i37.tinypic.com/156z9ea.png) no-repeat scroll 1% 50%; }
.currentlocation:hover {background: transparent url(http://i34.tinypic.com/30b1yx1.png) no-repeat scroll 1% 50%; }
.currentmood { padding: 3px 3px 3px 22px ; text-transform: uppercase; font-size: 7pt; color: #888888; background: transparent url(http://i36.tinypic.com/syqwm1.png) no-repeat scroll 1% 50%; }
.currentmood:hover {background: transparent url(http://i38.tinypic.com/hsq0r9.png) no-repeat scroll 1% 50%;}
.currentmusic { padding: 3px 3px 3px 22px ; text-transform: uppercase; font-size: 7pt; color: #888888; background: transparent url(http://i34.tinypic.com/a451yr.png) no-repeat scroll 1% 50%; }
.currentmusic:hover {background: transparent url(http://i37.tinypic.com/330ahzm.png) no-repeat scroll 1% 50%; }
.ljtags { width: 350px; text-transform: uppercase; padding: 8px 3px 3px 22px ; font-family: Courier New, Tahoma, "Verdana", sans-serif; margin: 80px 0px 0px -120px; position: relative; font-size: 7pt; color: #888888; background: transparent url(http://i33.tinypic.com/2nailhd.png) no-repeat scroll 1% 50%; }
.ljtags:hover { background: transparent url(http://i37.tinypic.com/9ixoh3.png) no-repeat scroll 1% 50%; }
div.ljtags {font-weight: bold;}
div.ljtags a {font-weight: normal;}
h2 { text-transform: uppercase; color: #555555; background-color: #ffffff; font-family: Courier New, serif, Trebuchet MS; font-size: 16px; padding: 10px; border: 1px solid #dddddd; border-bottom: 0px; font-weight: normal; font-style: normal; letter-spacing: 1px; margin: 0px;}
.ljtaglist { border: 1px solid #dddddd; border-top: 0px; margin-left: auto; margin-right: auto; background-color: #ffffff; padding: 0px 24px 25px 24px; color:#888888; font-size:10px; list-style:none; margin: 0px;}

/*----------------------------------COMMENT PAGES-----------------------------------------*/
.box { background-color: #ffffff; border: 1px solid #dddddd ; padding: 15px; margin-bottom: 2px;clear: right;}
.datesubjectcomment { background-color: #ffffff; padding: 5px; margin-top: 20px;}
.userpiccomment { position: relative; padding: 4px; border: 0px; background-color: #ffffff; left: 0px; margin: 0px 10px 0px 0px; z-index: 15; float: left;}
input, textarea { font-size: 11px; background-color: #fafafa; 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; font-size: 11px; line-height: 125%; color: #555555; }
.replytosubject {font-weight: bold;}
.commentreply { position: relative; margin: 10px; font-size: 11px; color: #555555;}
.commentbox { border-bottom: 1px solid #eeeeee; padding: 10px 10px 30px 10px; margin: 0px 10px 0px 10px; background-color: #ffffff;}
.commentbox:hover, .commentboxpartial:hover {border-color: #dddddd;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #555555;}
.datesubjectcomment a:hover {color: #BFBFBF;}
.commentboxpartial { border-color: #555555; border-width: 0px; border-style: solid; padding: 10px; margin: 10px; background-color: #ffffff;}
.commentinfo { background-color: #ffffff; margin-top: 10px; }
.skiplinks {text-align: center; padding: 5px; margin-bottom: 5px; border: 1px solid #dddddd; background-color: #ffffff;}

/*-------------------------------------FOOTER -----------------------------------------------*/
#footer { width: auto; padding: 0px; text-align: center; font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; color: #444444; border-width: 0px; z-index: 100; clear: both;}
ul.navfooter{ padding: 0px; margin: 0px;}
ul.navfooter li { display: inline; margin: 0 5px 0 5px;}
.clearfoot {clear: both; }

/*---------------------------------ARCHIVE PAGES --------------------------------------*/
ul.year { text-align: center; padding: 20px 0px 20px 0px; border: 1px solid #dddddd; border-left: 1px solid #eeeeee; border-right: 1px solid #eeeeee; background-color: #ffffff; font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ; font-size: 20px; margin: 10px 0px 10px 0px; }
ul.year li {display: inline;}
table.yeartable { border: 1px solid #dddddd; width: 100%; background-color: #ffffff; margin: 0px; padding: 20px;}
table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #cccccc;}
table.yeartable td.yearday { background-color: #ffffff; text-align: center;}
td.yearmonth {border-style: none;}
.clear { height: 0px;}

/*-------------------------------------------- MINI ICONS by famfamfam-----------------------------------------*/
.subject img[src*="icon_protected.gif"]{ width: 0; height: 0; padding: 8px !important; background-repeat: no-repeat; background: url(http://i38.tinypic.com/qys5sh.png); background-position: center left; }
.subject img[src*="icon_private.gif"]{ width: 0; background-repeat: no-repeat; height: 0; padding: 8px !important; background: url(http://i33.tinypic.com/2nr3rfc.png); background-position: center left; }
.ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; background-image: url(http://i37.tinypic.com/10coz07.jpg); padding: 8px 10px 8px 8px !important; background-position: center left;}
.ljuser img[src*="userinfo.gif"] {background-color:transparent; background-image: url(http://i37.tinypic.com/10coz07.jpg); padding: 8px 10px 8px 8px !important; background-position: center left; }
.ljuser img[src*="community.gif"] {background-color:transparent; background-image: url(http://i33.tinypic.com/fxgd4h.png); padding: 8px 10px 8px 8px !important; background-position: center left; }
img[src*="icon_groups.gif"] { height: 0px; width: 0px; padding: 16px 16px 0px 0px !important; background: url(http://i37.tinypic.com/2rz7587.png); }
img[src*="btn_del.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i34.tinypic.com/1415tgo.png); }
img[src*="btn_scr.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i33.tinypic.com/vhfe6x.png);}
img[src*="btn_unscr.gif"] { height: 0px; width: 0px;padding: 0px 0px 16px 16px !important; background: url(http://i36.tinypic.com/ws8w92.png); }
img[src*="btn_freeze.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i35.tinypic.com/vd3dw8.png); }
img[src*="btn_unfreeze.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i35.tinypic.com/aexw7t.png); }
img[src*="btn_track.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i36.tinypic.com/1zvsebo.png); }
img[src*="btn_tracking.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i36.tinypic.com/i1y1s2.png); }
img[src*="btn_tracking_thread.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i36.tinypic.com/2a69ljq.png); }
img[src*="anonymous.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i38.tinypic.com/vn03mt.jpg); }
img[src*="openid-profile.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i33.tinypic.com/2hdmi6e.png); }
img[src*="talk/none.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i35.tinypic.com/2vht46r.png); }
img[src*="help.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i38.tinypic.com/2u44zkg.png); }
.Note .Inner { background: #ffffff none repeat scroll 0 0; border: 1px solid #bababa;}

/*--------------------------------------------contexual pop-up -----------------------------------------*/
div.ContextualPopup {position: relative; margin: 10px 0 0 30px; text-align: left; font: normal 9px "Tahoma" !important; }
div.ContextualPopup div.Inner { background:#fefefe !important; color: #888888 !important; border: 1px solid #dddddd; padding: 10px; width: 250px;}
div.ContextualPopup .Userpic { padding: 6px; margin-left: 12px; background:#fefefe; border: 1px solid #eeeeee;}
div.ContextualPopup .Content { padding: 5px; border: 0px margin: 4px 80px 4px 4px; background:#fefefe;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: bold; color: #888888 !important;}
div.ContextualPopup .Relation {font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ; text-transform: uppercase; font-size:11px; color:#AF9A62;}

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

[3] Blue on Grey

/*---------------------------------------------------
caderyn's Finding my way throught the rain (3) /// by milou_veronica
flexible squares layout (basic, plus and paid)
-----------------------------------------------------*/
.headerimage {position: relative; background: transparent url() no-repeat scroll 50% 50%; width: px; height: px; margin-left: auto; margin-right: auto; margin-bottom: 0px; }
body { background: url(); background-color: #A7D0DF; text-align: center; color: #A7D0DF; font-family: Courier New, Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; margin: 0px;}
a, a:link, a:visited { color: #67AACF; text-decoration: none;}
a:hover {color: #EFE259;text-decoration: none; font-style: italic;}
b, u { color: #333333;}
i, s { color: #777777;}
p, td {font-size: 11px;}
blockquote { background-color:#fcfcfc; padding:8px; border: 1px #cccccc solid; color:#555555; }
code { background-color: #fafafa; display:block; color: #555555; padding:5px; border:1px dashed #cccccc; font-size: 12px;}
kbd, pre, tt {font-family: monospace;}
textarea { background-color: #fafafa; }
#content{ width: 100%; margin-left: auto; margin-right: auto; border-width: 0px; padding: 0px; background-color: #fcfcfc;}
#maincontent { background-color: #fcfcfc; padding: 20px; margin-right: auto; margin-left: auto; text-align: justify; font-family: Courier New, Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; color: #666666; }
#sidebar {display: none;}

/*------------------------------- HEADER-----------------------------------------------------------*/
#header {width: auto; padding: 5px; margin: 0px 0px 5px 0px; text-align: left; font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ;font-weight: normal; font-style: normal; background-color: #A7D0DF; text-transform: lowercase; color: #555555; letter-spacing: -1px;}
ul.navheader{ padding: 15px 0px 5px 0px;margin: 0px; }
ul.navheader li {display: inline; padding: 15px 0px 5px 0px; }
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited{ margin-left: 8px; color: #ffffff; margin-right: 8px; padding: 15px 0px 0px 0px; background: transparent url("") no-repeat scroll 50% 0%; }
div#header a:hover, div#footer a:hover {color: #74B7CF; text-decoration: none; margin-left: 8px; margin-right: 8px;padding: 15px 0px 0px 0px;background: transparent url("http://i34.tinypic.com/2zfkboo.png") no-repeat scroll 50% 0%; }
div#header li.view, div#footer li.viewing { margin-left: 8px; margin-right: 8px; padding:15px 0px 0px 0px; background: transparent url("http://i34.tinypic.com/rk8n6u.png") no-repeat scroll 50% 0%;}
.title { display: none; font-style: normal; font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ; text-transform: uppercase; font-size: 16px; color: #444444; text-align: center; letter-spacing: 1px; padding-left: 10px;}
.subtitle{ display: none; font-style: normal; font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ; text-transform: uppercase; font-size: 9px; color: #EFEBE0; text-align: center; letter-spacing: 6px; padding-left: 10px;}

/*------------------------------------ENTRIES --------------------------------*/
.subcontent {width: 95%; margin-right: auto; margin-left: auto; background-color: #ffffff; padding: 10px; border: 1px solid #f5f5f5; }
.entry { margin: 0px 20px 20px 20px; padding: 0px; color: #777777; font-family: Courier New, Arial, Tahoma, "Verdana", sans-serif; font-size: 8pt; text-align: justify; line-height: 150%; border-width: 0px;}
.entry_text { margin-left: 120px; padding-top:20px; border: 0px; bottom: 0px;}
.date { font-family: Courier New, Arial, Tahoma, "Verdana", sans-serif; text-align: left; text-transform: uppercase; color: #aaaaaa; font-size: 9px; padding-left: 0px; background-position: center left;}
.subject {text-transform: lowercase; text-align: left; padding: 5px 0px 0px 0px; background-color: transparent ; color: #333333; font-style: normal; font-family: Courier New, serif, Trebuchet MS; font-size: 17px; line-height: 100%; letter-spacing: -1px;}
.subject a, .subject a:link, .subject a:visited { color: #555555; text-decoration: bold;}
.subject a:hover { color: #BFBFBF; text-decoration: none;}
.datesubject {padding: 5px 0px 5px 8px; margin-left: 130px;}
.userpic {position: relative; float: left; margin: 0px 10px 0px 0px; z-index: 15; border: 3px solid #eeeeee; }
.userpicfriends {position: relative; background-color: transparent !important; float: left; padding: 4px; margin: 12px; text-align: right; border: 1px #f5f5f5 solid; font-family: Courier New, Tahoma, "Verdana", sans-serif; font-size: 11px; z-index: 15;}
.userpicfriends a font {color: #aaaaaa;}
.entry ul li {padding-left: 5px;margin-left: 15px;}
.entry ol li{padding-left: 5px;margin-left: 15px;}

/*--------------------------------------TAGS, CURRENTS, COMMENT BAR--------------------------------------------*/
.comments { background: transparent url(http://i35.tinypic.com/1zqx744.png) no-repeat scroll 50% 0%; font-size: 15px; text-align: center; padding: 20px 5px 0px 0px; position: relative; top: 15px;font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana"; text-transform: lowercase;}
.comments:hover {background: transparent url(http://i36.tinypic.com/wjc5dd.png) no-repeat scroll 50% 0%; }
div.comments a, div.comments a:link, div.comments a:visited{ color: #555555; text-decoration: none;}
div.comments a:hover {color: #BFBFBF; text-decoration: none;}
.separator{height: 5px;}

.currents {width: 375px; margin-top:0px; padding:0px; text-transform: lowercase; font-family: Courier New, Tahoma, "Verdana", sans-serif;}
.currentlocation { padding: 3px 3px 3px 22px ; text-transform: uppercase; font-size: 7pt; color: #888888; background: transparent url(http://i37.tinypic.com/156z9ea.png) no-repeat scroll 1% 50%; }
.currentlocation:hover {background: transparent url(http://i34.tinypic.com/30b1yx1.png) no-repeat scroll 1% 50%; }
.currentmood { padding: 3px 3px 3px 22px ; text-transform: uppercase; font-size: 7pt; color: #888888; background: transparent url(http://i36.tinypic.com/syqwm1.png) no-repeat scroll 1% 50%; }
.currentmood:hover {background: transparent url(http://i38.tinypic.com/hsq0r9.png) no-repeat scroll 1% 50%;}
.currentmusic { padding: 3px 3px 3px 22px ; text-transform: uppercase; font-size: 7pt; color: #888888; background: transparent url(http://i34.tinypic.com/a451yr.png) no-repeat scroll 1% 50%; }
.currentmusic:hover {background: transparent url(http://i37.tinypic.com/330ahzm.png) no-repeat scroll 1% 50%; }
.ljtags { width: 350px; text-transform: uppercase; padding: 8px 3px 3px 22px ; font-family: Courier New, Tahoma, "Verdana", sans-serif; margin: 80px 0px 0px -120px; position: relative; font-size: 7pt; color: #888888; background: transparent url(http://i33.tinypic.com/2nailhd.png) no-repeat scroll 1% 50%; }
.ljtags:hover { background: transparent url(http://i37.tinypic.com/9ixoh3.png) no-repeat scroll 1% 50%; }
div.ljtags {font-weight: bold;}
div.ljtags a {font-weight: normal;}
h2 { text-transform: uppercase; color: #555555; font-size: 16px; padding: 10px; font-weight: normal; font-style: normal; letter-spacing: 1px; margin: 0px;}
.ljtaglist { margin-left: auto; margin-right: auto; background-color: #ffffff; padding: 0px 24px 25px 24px; color:#888888; font-size:10px; list-style:none; margin: 0px;}

/*----------------------------------COMMENT PAGES-----------------------------------------*/
.box { padding: 15px; margin-bottom: 2px;clear: right; border: 1px solid #f5f5f5; background-color: #ffffff;}
.datesubjectcomment { background-color: #ffffff; padding: 5px; margin-top: 20px;}
.userpiccomment { position: relative; padding: 4px; border: 0px; background-color: #ffffff; left: 0px; margin: 0px 10px 0px 0px; z-index: 15; float: left;}
input, textarea { font-size: 11px; background-color: #fafafa; 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; font-size: 11px; line-height: 125%; color: #555555; }
.replytosubject {font-weight: bold;}
.commentreply { position: relative; margin: 10px; font-size: 11px; color: #555555;}
.commentbox { border-bottom: 1px solid #eeeeee; padding: 10px 10px 30px 10px; margin: 0px 10px 0px 10px; background-color: #ffffff;}
.commentbox:hover, .commentboxpartial:hover {border-color: #dddddd;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #555555;}
.datesubjectcomment a:hover {color: #BFBFBF;}
.commentboxpartial { border-color: #555555; border-width: 0px; border-style: solid; padding: 10px; margin: 10px; background-color: #ffffff;}
.commentinfo { background-color: #ffffff; margin-top: 10px; }
.skiplinks {text-align: center; padding: 5px; margin-bottom: 5px; }

/*-------------------------------------FOOTER -----------------------------------------------*/
#footer { width: auto; padding: 0px; text-align: center; font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; color: #444444; border-width: 0px; z-index: 100; clear: both; background-color: #A7D0DF; }
ul.navfooter{ padding: 0px; margin: 0px;}
ul.navfooter li { display: inline; margin: 0 5px 0 5px;}
.clearfoot {clear: both; background-color: #A7D0DF; }

/*---------------------------------ARCHIVE PAGES --------------------------------------*/
ul.year { text-align: center; padding: 20px 0px 20px 0px; font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ; font-size: 20px; margin: 10px 0px 10px 0px; }
ul.year li {display: inline;}
table.yeartable { width: 600px; background-color: #ffffff; margin: 0px; padding: 20px;}
table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #cccccc;}
table.yeartable td.yearday { background-color: #ffffff; text-align: center;}
td.yearmonth {border-style: none;}
.clear { height: 0px;}

/*-------------------------------------------- MINI ICONS by famfamfam-----------------------------------------*/
.subject img[src*="icon_protected.gif"]{ width: 0; height: 0; padding: 8px !important; background-repeat: no-repeat; background: url(http://i38.tinypic.com/qys5sh.png); background-position: center left; }
.subject img[src*="icon_private.gif"]{ width: 0; background-repeat: no-repeat; height: 0; padding: 8px !important; background: url(http://i33.tinypic.com/2nr3rfc.png); background-position: center left; }
.ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; background-image: url(http://i37.tinypic.com/10coz07.jpg); padding: 8px 10px 8px 8px !important; background-position: center left;}
.ljuser img[src*="userinfo.gif"] {background-color:transparent; background-image: url(http://i37.tinypic.com/10coz07.jpg); padding: 8px 10px 8px 8px !important; background-position: center left; }
.ljuser img[src*="community.gif"] {background-color:transparent; background-image: url(http://i33.tinypic.com/fxgd4h.png); padding: 8px 10px 8px 8px !important; background-position: center left; }
img[src*="icon_groups.gif"] { height: 0px; width: 0px; padding: 16px 16px 0px 0px !important; background: url(http://i37.tinypic.com/2rz7587.png); }
img[src*="btn_del.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i34.tinypic.com/1415tgo.png); }
img[src*="btn_scr.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i33.tinypic.com/vhfe6x.png);}
img[src*="btn_unscr.gif"] { height: 0px; width: 0px;padding: 0px 0px 16px 16px !important; background: url(http://i36.tinypic.com/ws8w92.png); }
img[src*="btn_freeze.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i35.tinypic.com/vd3dw8.png); }
img[src*="btn_unfreeze.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i35.tinypic.com/aexw7t.png); }
img[src*="btn_track.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i36.tinypic.com/1zvsebo.png); }
img[src*="btn_tracking.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i36.tinypic.com/i1y1s2.png); }
img[src*="btn_tracking_thread.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i36.tinypic.com/2a69ljq.png); }
img[src*="anonymous.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i38.tinypic.com/vn03mt.jpg); }
img[src*="openid-profile.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i33.tinypic.com/2hdmi6e.png); }
img[src*="talk/none.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i35.tinypic.com/2vht46r.png); }
img[src*="help.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i38.tinypic.com/2u44zkg.png); }
.Note .Inner { background: #ffffff none repeat scroll 0 0; border: 1px solid #bababa;}

/*--------------------------------------------contexual pop-up -----------------------------------------*/
div.ContextualPopup {position: relative; margin: 10px 0 0 30px; text-align: left; font: normal 9px "Tahoma" !important; }
div.ContextualPopup div.Inner { background:#fefefe !important; color: #888888 !important; border: 1px solid #dddddd; padding: 10px; width: 250px;}
div.ContextualPopup .Userpic { padding: 6px; margin-left: 12px; background:#fefefe; border: 1px solid #eeeeee;}
div.ContextualPopup .Content { padding: 5px; border: 0px margin: 4px 80px 4px 4px; background:#fefefe;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: bold; color: #888888 !important;}
div.ContextualPopup .Relation {font-family: Courier New, "Trebuchet MS", Serif, Tahoma, "Verdana" ; text-transform: uppercase; font-size:11px; color:#AF9A62;}

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

installation
>> Choose Journal Style
>> Select a "Grays" Flexible Squares layout in "Select a New Theme"
>>Go to " Customise your Theme " and then "Style ". Change the "Background color of the outer table" to #FFFFFF.
>>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 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 famfamfam
>> Please direct all questions to the F.A.Q.

style: flexible squares, wot: layout

Previous post Next post
Up