fs02: clouds with pink lining

[harbourlight]

My second layout in as many days. It is entirely possible that I am somewhat obsessed.



live preview

o1. flexible squares
o2. basic, plus or paid
o3. custom comment pages
o4. tags page
o5. no sidebar


Paste the following codes into the custom css box:

/*-------------------------------------------
id: 02 Clouds With Pink Lining
style: S2, FLEXIBLE SQUARES

Layout coding by mybluesky
http://harbourlights.org
--------------------------------------------*/

body {
margin: 0px 0px 0px 0px;
background-color: #C4C4C4;
color: #636363;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 10px; }

a, a:link, a:visited {
color: #6D7EB3;
text-transform: lowercase;
text-decoration: none; }

a:hover {
color: #575757; }

blockquote {
margin: 5px;
padding: 7px;
width: 90%;
border: 1px dashed #575757;
color: #777777;
font-size: 10px;
text-align: justify; }

blockquote:hover {
border: 1px dashed #F54991; }

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

b, s, u {
color: #F54991; }

i {
color: #FF92BB; }

.clear {
display: none; }

/*------------------------------------------------------------------------
HEADER IMAGE
------------------------------------------------------------------------*/

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

/*------------------------------------------------------------------------
PAGE ALIGNMENT
------------------------------------------------------------------------*/

#content {
margin-left: auto;
margin-right: auto;
width: 100%; }

#maincontent {
margin-left: auto;
margin-right: auto;
margin-top: auto;
width: 700px;
background-color: #FFFFFF; }

/*------------------------------------------------------------------------
HEADER, FOOTER, LINKS
------------------------------------------------------------------------*/

#header {
width: auto;
padding: 10px;
background-color: #000000;
color: #9C9C9C;
text-align: center;
font-size: 11pt;
text-transform: lowercase;
border-top: 50px solid #000000;
border-bottom: 1px dashed #9C9C9C; }

#footer {
width: auto;
padding: 10px;
background-color: #C4C4C4;
color: #9C9C9C;
text-align: center;
font-size: 10pt;
font-style: italic;
text-transform: lowercase; }

div#header a, div#header a:link, div#header a:visited {
color: #F54991; }

div#footer a, div#footer a:link, div#footer a:visited {
color: #9C9C9C; }

div#header a:hover, div#footer a:hover {
color: #6D7EB3; }

div#header li.view {
color: #9C9C9C; }

div#footer li.viewing {
color: #F54991; }

ul.navheader, ul.navfooter {
padding: 0px;
margin: 0px; }

ul.navheader li, ul.navfooter li {
display: inline;
list-style: none;
padding: 1px;
margin: 1px; }

.clearfoot {
clear: both;
display: none; }

/*------------------------------------------------------------------------
TITLE, SUBTITLE
------------------------------------------------------------------------*/

.title {
display: none; }

.subtitle {
display: none; }

#sidebar {
display: none; }

/*------------------------------------------------------------------------
MAIN PAGE ENTRIES
------------------------------------------------------------------------*/

.subcontent {
padding: 20px; }

.separator {
background-color: #FFFFFF;
height: 0px; }

.date {
float: right;
padding-top: 5px;
color: #9C9C9C;
text-align: left;
font-weight: normal;
font-size: 7pt;
text-transform: uppercase; }

.date:hover {
color: #FF92BB; }

.subject {
color: #4D4D4D;
text-align: left;
padding-bottom: 3px;
font-size: 15px;
text-transform: lowercase;
font-style: italic; }

.subject a {
color: #4D4D4D;
text-align: left;
padding-bottom: 3px;
font-size: 15px;
text-transform: lowercase;
font-style: italic; }

.datesubject {
padding: 0px;
margin-bottom: 3px;
border-bottom: 1px dashed #C4C4C4; }

.entry{
margin: 0px 0px 0px 0px;
line-height: 14px;
padding: 5px;
color: #636363;
font-size: 10px;
text-align: justify; }

.entry ul li {
list-style: decimal-leading-zero;
margin-left: 5px; }

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

/*------------------------------------------------------------------------
USERPICS, FRIENDS USERPICS
------------------------------------------------------------------------*/

.userpic {
position: relative;
float: right;
margin: 0px 0px 10px 10px;
z-index: 15;
padding: 5px;
background-color: #FFFFFF;
border: 1px dashed #C4C4C4; }

.userpicfriends {
position: relative;
float: right;
margin: 0px 0px 10px 10px;
z-index: 15;
background-color: #FFFFFF !important;
color: #9C9C9C;
text-align: center;
font-size: 7pt;
padding: 5px;
border: 1px dashed #C4C4C4; }

.userpicfriends font {
color: #C4C4C4 !important;
text-transform: lowercase; }

.userpicfriends br {
display: block;
height: 0; }

/*------------------------------------------------------------------------
CURRENTS, COMMENT LINKS
------------------------------------------------------------------------*/

.currents {
margin-top: 15px; }

.currents strong{
color: #9C9C9C;
font-weight: normal;
font-size: 9px; }

.currentmusic, .currentmood, .currentlocation, .currentgroup {
padding-right: 15px;
color: #9C9C9C;
text-align: left;
font-size: 9px; }

.ljtags {
margin-top: 15px;
padding-right: 15px;
color: #9C9C9C;
text-align: left;
text-transform: lowercase;
font-size: 9px; }

.comments {
position: relative;
top: 0px;
padding: 8px;
color: #9C9C9C;
text-align: center;
font-size: 14px;
font-weight: none; }

/*------------------------------------------------------------------------
COMMENT PAGES
------------------------------------------------------------------------*/

.skiplinks {
padding: 10px;
background-color: #FFFFFF;
color: #9C9C9C;
text-align: center;
text-transform: lowercase; }

.datesubjectcomment {
margin-bottom: 5px;
padding: 5px;
background-color: #FFFFFF;
color: #9C9C9C; }

.userpiccomment {
position: relative;
top: -10px;
left: 0px;
float: left;
margin: 0px 10px -20px -10px;
padding: 10px;
z-index: 15; }

.box {
clear: right;
width: auto;
padding: 25px;
background-color: #FFFFFF; }

input, textarea {
padding: 2px;
background-color: #DBDBDB;
border: 1px solid #FFFFFF;
color: #555555;
font-family: "Verdana", sans-serif;
font-size: 10px; }

textarea.textbox{
width: 100% !important; }

.reply{
position: relative;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
line-height: 120%;
color: #36C7AC;
text-align: left;
font-size: 10px; }

.replytosubject {
font-weight: bold; }

.commentreply {
position: relative;
padding: 10px 10px 20px 120px;
color: #777777;
font-size: 10px; }

.commentbox {
margin: 5px;
padding: 15px 0px 15px 0px; }

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #555555; }

.datesubjectcomment a:hover {
color: #555555; }

.commentboxpartial {
margin: 10px;
padding: 5px;
background-color: #FFFFFF; }

.commentinfo {
margin-top: 10px;
width: 100%; }

#qrform table {
border: 1px solid #FFFFFF !important;
padding: 20px; }

/*------------------------------------------------------------------------
ARCHIVE PAGE
------------------------------------------------------------------------*/

ul.year {
margin-top: 0px;
padding: 10px 2px 2px 2px;
text-align: center; }

ul.year li {
display: inline; }

table.yeartable {
margin-left: auto;
margin-right: auto;
padding: 4px; }

table.yeartable td.yeardate, table.yeartable td.yearday {
padding: 4px;
border: 0px;
color: #9C9C9C;
text-align: center;}

table.yeartable td.yeardate a {
font-size: 15px;
font-family: "Verdana", sans-serif; }

table.yeartable td.yearday {
padding: 4px;
background-color: #FF92BB;
color: #FFFFFF;
text-align: center;
text-transform: uppercase; }

td.yearmonth {
border-style: none; }

/*------------------------------------------------------------------------
TAGS PAGE
------------------------------------------------------------------------*/

.ljtaglist {
margin-top: -20px;
list-style-type: none;
width: 75%;
text-transform: lowercase;
text-align: left; }

.ljtaglist li {
padding: 6px 3px 6px 20px;
font-size: 14px; }

h2 {
margin: 0px;
padding: 20px;
line-height: 12px;
background-color: #FFFFFF;
color: #9C9C9C;
text-align: left;
font-weight: normal;
font-size: 20px;
text-transform: lowercase; }

ul.ljtaglist {
margin-right: auto;
margin-left: auto;
padding: 25px;
color: #9C9C9C;
text-align: left;
font-size: 8pt; }

/*------------------------------------------------------------------------
EXTRA CODES
------------------------------------------------------------------------*/

.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] {
width: 0;
height: 0;
padding: 16px 16px 0px 0px !important;
background: url(http://luna-nueva.org/livejournal/ticons/lock.png) !important; }

.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"] {
width: 0;
height: 0;
padding: 16px 16px 0px 0px !important;
background: url(http://luna-nueva.org/livejournal/ticons/eye.png) !important; }

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
background-image: url(http://luna-nueva.org/livejournal/ticons/user_gray.png) !important;
padding: 16px 16px 0 2px !important; }

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://luna-nueva.org/livejournal/ticons/user_gray.png) !important;
padding: 16px 16px 0 2px !important; }

.ljuser img[src*="community.gif"] {
background-color:transparent;
background-image: url(http://luna-nueva.org/livejournal/ticons/color_swatch.png) !important;
padding: 16px 16px 0 0px !important; }

or link externally to http://luna-nueva.org/livejournal/css/fs02/FS02cloudswithpinklining.css

If you have any questions just comment here.
Watch mybluesky for more updates.