S2 Flexible Squares : Stylin' BF

[malionette]

Click for a Live Preview.

( Get layout code & instructions )

( Layout Code ) #014 : Stylin' BF /* S2 FLEXIBLE SQUARES --- Stylin' BF ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */

.entry_text img { border: 3px solid #ffbb64; }

body {
background-color: #f3f9f9; color: #aaaaaa;
font-family: arial, sans-serif; font-size: 10px;
margin: 0; padding: 0;
background-image: url();
background-attachment: fixed;
}

b { font-family: tahoma;}

a, a:link, a:visited {
color: #ffbb64;
text-decoration: none;
}

a:hover {
color: #888888;
cursor: help;
}

blockquote{
background-color: #fafafa; color: #bbbbbb;
font-size: 9px;
margin: 0; padding: 5px;
}

blockquote:hover { background-color: #ffffff; cursor: text; }

input, select {
background-color: #fafafa; color: #bbbbbb;
font-family: tahoma; font-size: 9px;
border: 1px solid #dddddd;
margin-top: 5px;
}

input:hover, select:hover {
background-color: #ffffff; color: #bbbbbb;
border: 1px solid #dddddd;
cursor: help;
}

textarea {
width: 200px; padding: 5px;
border: 1px solid #dddddd;
background-color: #fafafa; color: #bbbbbb;
font-size: 9px; font-family: tahoma;
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: L A Y O U T */

#content {
padding: 0px; margin: auto; margin-top: 50px;
width: 900px;
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: H E A D E R */

#header {display: none;}

ul.navheader li a{
padding: 0px;
}

li.view{
background-color: #ffbb64; color: #ffffff;
padding: 0px;
}

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

ul.navheader li {
display: inline;
}

.title, .subtitle, .defaultuserpic{ display: none;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: S I D E B A R */

#sidebar {
text-align: left; text-transform: lowercase;
padding: 0; margin: 0;
width: 170px;
float: right;
}

#sidebar a {color: #aab8b8;}
#sidebar a:hover {color: #888888;}

.sbartitle, .sbarheader {
letter-spacing: 1px;
font-size: 16px;
padding: 5px 0 5px 0;
}

.sbarbody { margin: 0; padding: 0; }

.sbarbody2 { margin: 0; padding: 0; }

#sidebar_summary li.sbaritem { margin: 0; padding: 0;}

table.calendar { margin-left: 0;}

.sbarcalendar { text-align: center; }

.sbarcalendarposts { text-align: center; }

ul.sbarlist {
padding: 0; margin: 0;
list-style: none;
}

li.sbaritem { list-style: decimal-leading-zero; margin-left: 25px;}

.tagcloud {display: none;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: E N T R Y */

#maincontent {
margin: 0; padding: 30px 30px 24px 30px;
width: 650px;
border: 6px solid #ffffff;
background-color: #e9f4f4;
}

.subcontent {
background-color: #ffbb64;
border-bottom: 6px solid #e9f4f4;
}

.date {
font-size: 9px; font-family: tahoma, sans-serif;
text-transform: lowercase;
padding: 0 0 0 10px; margin: 0;
color: #dddddd;
}

.subject {
font-size: 16px;
padding: 0 0 0 10px; margin: 0;
letter-spacing: 1px;
background-color: #fafafa;
}

.datesubject {
text-align: left; background-color: #ffffff;
padding: 5px 0 0 0; margin-left: auto;
width: 520px;
border-left: 6px solid #e9f4f4;
}

.entry {
background-color: #ffffff;
width: 510px;
margin-left: auto; padding: 5px;
min-height: 100px; overflow: visible;
border-left: 6px solid #e9f4f4;

}

.entry_text {min-height: 100px;}

.entry ul li {padding:0; margin: 0;}

.entry ol li {padding:0; margin: 0;}

.userpic {
float: left; overflow: hidden;
background-color: #ffbb64;
padding: 0px; margin: 0px;
width: 124px;
text-align: center;
}

.userpic img {
border: 1px solid #ffffff;
margin: auto; margin-top: 11px; }

.userpicfriends {
float: left; overflow: hidden;
background-color: #ffbb64 !important;
padding: 0px; margin: 0px;
text-align: center;
color: #ffbb64;
width: 124px;
}

.userpicfriends a font{
color: #ffffff !important;
}

.userpicfriends img{
margin: auto; margin-top: 11px; border: 1px solid #ffffff;
}

.clear, .separator {display: none;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: M E T A & C O M M E N T */

.currents, .ljtags {font-size: 9px;}

.currentmood, .currentmusic, .currentlocation, .ljtags {
background-color: #fafafa;
margin: 5px 0 0 0; padding: 1px 0 1px 5px;
width: 215px;
}

.currentmood strong, .currentmusic strong, .currentlocation strong{
font-weight: normal;
}

.comments {
font-size: 9px; font-family: tahoma, sans-serif;
text-align: center; text-transform: lowercase;
margin: 5px 0 0 0; padding: 0;
color: #dddddd;
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: F O O T E R */

#footer {
padding: 5px 0 5px 0; margin-right: 0;
width: 710px;
text-align: center; text-transform: lowercase;
font-size: 16px;
color: #bbbbbb;
}

#footer a {color: #aab8b8;}
#footer a:hover {color: #888888;}

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

ul.navfooter li{
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {display: none;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: R E P L Y & C O M M E N T */

.skiplinks { text-align: right; color: #dddddd;}

.skiplinks a {color: #aab8b8;}
.skiplinks a:hover {color: #888888;}

.box {
margin: 0; padding: 0px;
color: #888888;
}

.box a {color: #aab8b8;}
.box a:hover {color: #888888;}

.datesubjectcomment {
margin: 0; padding: 0;
text-align: left;
}

.userpiccomment {
float: left;
background-color: #ffffff;
padding: 0px; margin: 0 6px 0 0;
border: 11px solid #ffbb64;
}

.commentreply {
margin: 0; padding: 0px;
min-height: 100px;
}

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

label{ font-size: 9px;}

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

.reply {
margin: 0; padding: 0;
}

.replytosubject {
margin: 0; padding: 0;
}

.commentboxpartial {
margin: 10px 0 10px 0; padding: 0;
}

.commentinfo {
margin: 0; padding: 0;
width: 100%;
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: A R C H I V E & T A G*/

ul.year {
text-align: center; text-transform: lowercase;
padding: 0; margin: 0;
background-color: #ffffff;
}

ul.year li { display: inline; }

table.yeartable {
margin: auto; padding: 0;
}

table.yeartable a{ color: #aab8b8;}
table.yeartable a:hover{ color: #888888;}

table.yeartable td.yearday {
background-color: #ffbb64; color: #ffffff;
text-align: center;
border: 0; margin: 0; padding: 0;
}

table.yeartable td.yeardate {background-color: #ffffff;}

table.yeartable td.yeardate a{ color: #ffbb64;}
table.yeartable td.yeardate a:hover{ color: #888888;}

#maincontent h2 {
font-size: 16px; font-weight: normal;
text-transform: lowercase; text-align: center;
padding: 3px;
}

.ljtaglist {
list-style: decimal-leading-zero;
margin: 10px; padding: 0;
}

.ljtaglist a{ color: #aab8b8;}
.ljtaglist a:hover{ color: #888888;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: O T H E R */

* html div.subcontent {
/* fixes an IE reply page bug */
height: 1%;
clear: none;
}

* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
border-width: 1px;
border-style: solid;
border-color: #999999;
background-color: #c2cde0;
}

::-moz-selection { background: #bbbbbb; color: #ffffff; }
::selection { background: #bbbbbb; color: #ffffff; }
code::-moz-selection { background: #bbbbbb; color: #ffffff; }
code::selection { background: #bbbbbb; color: #ffffff; }

/*------ Look of contextual Popup ------*/

div.ContextualPopup {
margin: 10px 0 0 0px;
font: normal 10px "tahoma" !important;
}

div.ContextualPopup img {
margin: 0px !important;
}

div.ContextualPopup div.Inner {
background-color: #f3f9f9 !important; color: #aaaaaa !important;
border: 0;
padding: 0px; margin: 0;
width: 220px;
text-align: left;
}

div.ContextualPopup .Content {
padding: 5px 0 0 5px; margin-right: 0px;
}

div.ContextualPopup .Relation, div.ContextualPopup .Content .OnlineStatus {
font-weight: normal !important;
}

div.ContextualPopup .Userpic {
padding: 0; margin: 0 0 0 20px;
border: 5px solid #ffbb64;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #ffbb64 !important;
}

#lj_controlstrip table { margin: 0; padding: 0; background-color: #e9f4f4 !important;}

#lj_controlstrip td {
background-color: #e9f4f4 !important;
font-family: tahoma;
color: #aaaaaa;
border-bottom: 5px solid #ffffff !important;
}

#lj_controlstrip a {
color: #aab8b8 !important;
font-family: tahoma; font-size: 9px;
text-transform: lowercase;
}

#lj_controlstrip a:hover {
color: #888888 !important;
cursor: help;
border: 0;
text-decoration: none;
}

#lj_controlstrip a img, #lj_controlstrip form {
padding: 0; margin: 0; border: 0;
}

#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input {
font-family: tahoma; font-size: 9px;
background-color: #ffffff; color: #aaaaaa;
padding: 0; margin: 0;
border: 1px solid #eeeeee;
}

#lj_controlstrip_userpic, #lj_controlstrip_userpic img{ width: 50px; height: 50px; }

#lj_controlstrip_statustext {
font-size: 9px;
color: #bbbbbb !important;
font-weight: normal;
letter-spacing: 2px;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border: 0; }

More LJ layout stylesheets and profile codes at fruitstyle.