[layout: flexible squares] #13 Qi Li Xiang (Seven Mile Fragrance)

[calixa]

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
"Qi Li Xiang" by calixa @ biconic.livejournal.com

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

body {
background-color: #C5C532;
background-image: url();
background-repeat: repeat-all;
color: #9E9168;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 170%;
margin: 0px 0 0px 0;
}

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

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

blockquote {
font-size: 7pt;
padding: 10px;
border: #F0ECDD 1px solid;
background-color: #F8FBFD;
color: #C5BC91;
line-height: 120%;
}

blockquote:hover {
border: #F0ECDD 1px solid;
background-color: #F8FBFD;
}

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

#qrform table{ border: 0 !important;}

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

#content {
width: 75%;
margin-left: auto; margin-right: auto;
padding: 0px;
}

#maincontent {
margin: 0px 210px -10px 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-top: #EDDDCD 10px solid;
border-bottom: #EDDDCD 10px solid;
}
/*-----------------------------------------------------------------------------
Header
--------------------------------------------------------------------------------*/

#header {
float: top;
width: auto;
padding: 30px 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: #C5BC91;
font-style: italic;
background-color: #EDDDCD;
padding: 5px 13px 5px 13px;
}

div#header a, div#header a:link, div#header a:visited {
color: #F8FBFD;
background-color: #EDDDCD;
padding: 5px 13px 5px 13px;
}

div#header a:hover {
color: #ED8AB5;
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;
background-color: #F7F3EA;
border-top: #EDDDCD 10px solid;
border-bottom: #EDDDCD 10px solid;
}

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

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

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

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

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

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

.subject {
color: #C5BC91;
padding: 0px 0px 5px 0px;
font-family: "arial narrow", sans-serif;
font-size: 15px;
line-height: 100%;
text-align: left;
text-transform: lowercase;
}

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

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

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

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

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

.userpic {
position: relative;
float: right;
padding: 5px 5px 5px 5px;
margin: 10px;
text-align: center;
background-color: #F7F3EA !important;
border: #F0ECDD 1px solid;
font-size: 7pt;
z-index: 15;
}

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

.userpic img, .userpicfriends img {
border: #F0ECDD 0px solid;
}

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

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

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

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

div.comments a, div.comments a:link, div.comments a:visited{
color: #C5BC91;
border: #F0ECDD 1px solid;
background-color: #F8FBFD;
padding: 3px;
}

div.comments a:hover {
color: #C5C532;
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: #AFAA83;
text-align: justify;
font-size: 8pt;
line-height: 150%;
border-top: #F0ECDD 1px solid;
border-bottom: #F0ECDD 1px solid;
}

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

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

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

table.calendar {
display:none;
}

/*------------------------------------------------------------
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: #F0ECDD 1px solid;
background-color: #F8FBFD;
color: #C5BC91;
}

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

li.sbartitle {
display:none;
}

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

li.viewing {
color: #C5BC91;
font-style: italic;
background-color: #EDDDCD;
padding: 5px 10px 5px 10px;
}

div#footer a, div#footer a:link, div#footer a:visited {
color: #F8FBFD;
font-style: italic;
background-color: #EDDDCD;
padding: 5px 10px 5px 10px;
}

div#footer a:hover {
color: #ED8AB5;
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: 100px;
background-color: #F7F3EA;
border-top: #EDDDCD 10px solid;
border-bottom: #EDDDCD 10px solid;
}

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

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

td.yearmonth {
border-style: none;
}

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

.datesubjectcomment {
border-bottom: #F0ECDD 1px solid;
padding: 5px;
margin-top: 0px;
}

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

.box {
margin: -15px 0px 0px 0px;
background-color: #F7F3EA;
color: #AFAA83;
padding: 10px 10px 10px 10px;
clear: left;
}

input, textarea {
border: #F0ECDD 1px solid;
background-color: #F8FBFD;
color: #AFAA83;
font-family: "arial", sans-serif;
font-size: 8pt;
}

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: 10px 0px 10px 0px;
color: #C5BC91;
}

.commentbox {
margin: 10px 0px 5px 0px;
padding: 10px 15px 10px 15px;
border: #F0ECDD 1px solid;
background-color: #F8FBFD;
}

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

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

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

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

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

.skiplinks {
text-align: center;
margin: -15px 0px -16px 0px;
padding: 10px;
color: #F7F3EA;
background-color: #F7F3EA;
}

.skiplinks a, .skiplinks a:link, skiplinks a:visited {
color: #C5BC91;
padding: 3px 13px 3px 13px;
border: #F0ECDD 1px solid;
background-color: #F8FBFD;
}

.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!