[layout: flexible squares] #14 Powder Room

[calixa]

When it rains, it pours :)

Theme: Flexible Squares S2
Works with: paid, basic and plus
Tested on: Firefox & IE, 1024x768 resolution and up
Includes: Comment pages, sidebar, header navigation.
Disabled: none



larger image preview


Copy & Paste:
/*---------------------------------------------------

FLEXIBLE SQUARES S2
"Powder Room" by calixa @ biconic.livejournal.com

-----------------------------------------------------*/

body {
background-color: #A6C1B3;
background-image: url(http://img151.imageshack.us/img151/5009/contentbglf0.gif);
background-repeat: repeat-all;
color: #A7A293;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 170%;
margin: 10px 0 10px 0;
}

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

a:hover {
color: #A6C1B3;
text-decoration: none;
}

blockquote {
font-family: "arial narrow", sans-serif;
padding: 10px;
border: #D4CFBE 1px dashed;
color: #A7A293;
}

blockquote:hover {
}

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

#qrform table{ border: 0 !important;}

/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/

#content {
width: 70%;
margin: auto;
padding: 20px;
}

#maincontent {
margin: 0px 215px -15px 0px;
}

#sidebar {
padding: 0px 0px 0px 0px;
margin: 0px auto auto auto;
background-color: #F7F3EA;
width: 200px;
float: right;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: left;
border: #EDDDCD 1px solid;

}
/*-----------------------------------------------------------------------------
Header
--------------------------------------------------------------------------------*/

#header {
float: top;
width: auto;
padding: 10px 0px 15px 0px;
text-align: left;
}

.headerimage {
position: relative;
width: 800px;
height: 0px;
background-image:url();
margin: auto auto 0px auto;
}

div#header li.view {
color: #A7A293;
font-style: italic;
background-color: #F7F3EA;
border: #EDDDCD 1px solid;
padding: 5px 13px 5px 13px;
}

div#header a, div#header a:link, div#header a:visited {
color: #A6C1B3;
background-color: #F7F3EA;
border: #EDDDCD 1px solid;
padding: 5px 13px 5px 13px;
}

div#header a:hover {
color: #A6C1B3;
text-decoration: none;
}

.title {
display:none;
}

.subtitle{
display:none;
}

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

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

/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/

.subcontent {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: #EDDDCD 1px solid;

}

.entry {
margin: 0px 0px 0px 0px;
padding: 20px 20px 10px 20px;
background-color: #F7F3EA;
color: #A7A293;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
}

.datesubject {
margin: 0px 0px 0px 0px;
background-color: #F7F3EA;
padding: 15px 0px 5px 20px;
border-bottom: #F0ECDD 0px solid;
}

.ljtags {
margin: 15px 0px -10px 0px;
padding: 3px;
color: #D4CFBE;
font-size: 7pt;
}

.ljtags a:link,.ljtags a:visited {
color: #A6C1B3;
}

.ljtags a:hover {
color: #A6C1B3;
}

.date {
margin-top: 0px;
color: #D4CFBE;
font-family: "arial narrow", sans-serif;
font-size: 7pt;
}

.subject {
color: #D4CFBE;
padding: 0px 0px 5px 0px;
font-family: "times new roman", sans-serif;
font-size: 20px;
line-height: 100%;
text-align: left;
text-transform: lowercase;
font-style: italic;
}

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

.subject a:hover {
color: #D4CFBE;
}

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

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

/*------------------------------------------------------------
Userpics
-------------------------------------------------------------------------------*/

.userpic, .userpicfriends {
position: relative;
float: right;
padding: 0px 0px 0px 0px;
margin: 20px;
text-align: center;
background-color: #F7F3EA !important;
font-size: 7pt;
z-index: 15;
}

.userpic img, .userpicfriends img {
border: #EDDDCD 3px solid;
}

.userpic font, .userpicfriends font {
color: #A6C1B3;
}

/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/

/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/

.comments {
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: center;
color: #F8F6E5;
margin: 0px;
padding: 15px 0px 5px 0px;
position: relative;
border-top: #D4CFBE 1px dashed;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #D4CFBE;
border: #EDDDCD 1px solid;
padding: 3px 10px 3px 10px;
}

div.comments a:hover {
color: #A6C1B3;
text-decoration: none;
}

/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/

.separator{
/* for formatting separators between entries */
height: 0px;
}

/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/

.defaultuserpic {
display:none;
}

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

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

.sbarbody2 {
margin: 0px 20px 0px 20px;
padding: 20px 0px 20px 0px;
background-color: #F7F3EA;
color: #A7A293;
text-align: justify;
font-size: 8pt;
border-bottom: #D4CFBE 1px dashed;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #D4CFBE;
}

div#sidebar a:hover {
color: #A6C1B3;
text-decoration: none;
}

/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/

table.calendar {
margin:auto;
}

.sbarcalendar {
text-align: center;
padding: 5px;
border: #EDDDCD 1px solid;
color: #A6C1B3;
font-size: 7pt;
}

.sbarcalendarposts {
border: #EDDDCD 1px solid;
text-align: center;
padding: 5px;
font-size: 7pt;
}

/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/

ul.sbarlist {
padding: 0px 10px 0px 10px;
margin: 20px 0px 3px 0px;
list-style: none;
}

li.sbaritem {
padding: 3px 0px 3px 10px;
margin: 0px 0px 3px 0px;
list-style: none;
border: #EDDDCD 1px solid;
}

li.sbaritem:hover {
list-style: none;
}

li.sbartitle
{
display:none;
}

/*----------------------------------------------------
footer
----------------------------------------------------------------*/

li.viewing {
color: #A7A293;
font-style: italic;
background-color: #F7F3EA;
border: #EDDDCD 1px solid;
padding: 5px 10px 5px 10px;
}

div#footer a, div#footer a:link, div#footer a:visited {
color: #A6C1B3;
font-style: italic;
background-color: #F7F3EA;
border: #EDDDCD 1px solid;
padding: 5px 10px 5px 10px;
}

div#footer a:hover {
color: #A6C1B3;
text-decoration: none;
}

#footer {
width: auto;
padding: 0px;
z-index: 100;
text-align: left;
clear: both;
}

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

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

.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/

ul.year {
text-align: left;
padding-bottom: 0px;
color: #615748;
}

ul.year li {
display: inline;
}

table.yeartable {
margin: 0px;
padding: 10px;
}

table.yeartable td.yeardate, table.yeartable td.yearday { background-color: #F7F3EA;
border: #EDDDCD 1px solid;
text-align: center;
padding: 5px;
}

table.yeartable td.yearday {
text-align: center;
padding: 5px;
background-color: #F7F3EA;
border: #EDDDCD 1px solid;
}

td.yearmonth {
border-style: none;
}

/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/

.datesubjectcomment {
border-top: #D4CFBE 1px dashed;
padding: 15px 5px 5px 5px;
margin-top: 0px;
}

.userpiccomment {
position: relative;
background-color: #EDDDCD;
padding: 5px;
margin: 0px 10px 5px 0px;
z-index: 15;
float: left;
height: 70px;
width: 70px;
}

.box {
border: #EDDDCD 1px solid;
background-color: #F7F3EA;
padding: 20px 20px 10px 20px;
clear: left;
}

input, textarea {
background-color: #F7F3EA;
color: #A7A293;
border: #EDDDCD 1px solid;
}

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

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
padding: 0px 0px 10px 0px;
font-size: 8pt;
font-family: "arial", sans-serif;
color: #A7A293;
}

.commentbox {
padding: 10px 0px 10px 0px;
background-color: #F7F3EA;
}

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

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

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

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

/*--------------------------------------------
Misc
-----------------------------------------*/

.skiplinks {
text-align: center;
margin: -10px 0px 0px 0px;
padding: 5px;
color: #F7F3EA;
border: #EDDDCD 1px solid;
background-color: #F7F3EA;
}

.skiplinks a, .skiplinks a:link, skiplinks a:visited {
color: #D4CFBE;
}

.clear {
height: 15px;
}

Notes
* If you wish to add a header, the best width for it varies depending on what your screen resolution is.

Installation Instructions
1. Under customize css, set all the drop down boxes to no.
2. To add a header, find background-image:url(); under .headerimage in the css and add your image url between the brackets. Also make sure to change the dimensions of the width and height (width: 800px; height: 0px;) to whatever size your image is.
3. Feel free to edit the css as much as you want, but if you mess up don't ask me to fix it.
4. Please credit biconic if you use :)

If there are any bugs or if you have any problems let me know!