[layout: flexible squares] #12 Urban Legend

[calixa]

I haven't had much inspiration lately for layout making, but I had a go at it tonight. Hopefully you'll like this one :3 Moreover my computer died on me (sigh) so I'm using my brother's laptop until further notice so please bear with the slow updates. I'm trying to get used to the flatscreen and wide resolution and the difference in the way colours render on this versus my old clunky monitor :P

Also, welcome to all the new members!

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



larger image preview


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

FLEXIBLE SQUARES S2
"Urban Legend" by calixa @ biconic.livejournal.com

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

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

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

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

blockquote {
font-size: 11px;
padding: 10px;
border: #9E9168 1px solid;
color: #C5BC91;
}

blockquote:hover {
border: #7F734F 1px solid;
}

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

#qrform table{ border: 0 !important;}

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

#content {
width: 80%;
margin-left: auto; margin-right: auto;
padding: 10px;
}

#maincontent {
margin: -24px 275px 0px 0px;

}

#sidebar {
padding: 0px 20px 0px 20px;
margin: 1px 0px 10px 0px;
background-color: #615748;
border-top: #9E9168 1px solid;
width: 223px;
float: right;
text-align: left;
}
/*-----------------------------------------------------------------------------
Header
--------------------------------------------------------------------------------*/

#header {
float: top;
width: auto;
padding: 30px 0px 5px 0px;
text-align: right;
}

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

div#header li.view {
color: #C5BC91;
font-style: italic;
background-color: #947D18;
padding: 5px 13px 5px 13px;
}

div#header a, div#header a:link, div#header a:visited {
color: #9E9168;
background-color: #615748;
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 -5px 0px;
padding: 20px;
background-color: #615748;
}

.entry {
margin: 10px 0px 0px 0px;
padding: 20px 20px 10px 20px;
background-color: #615748;
border: #9E9168 1px dashed;
color: #9E9168;
font-family: "arial narrow", sans-serif;
font-size: 9pt;
text-align: justify;
}

.datesubject {
margin: 0px 0px 0px 0px;
background-color: #947D18;
padding: 5px 15px 5px 15px;
}

.ljtags {
margin: 15px 0px -10px 0px;
padding: 3px;
width: 250px;
border: #9E9168 1px solid;
color: #C5BC91;
font-size: 7pt;
}

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

.ljtags a:hover {
color: #947D18;
}

.date {
margin-top: 0px;
color: #615748;
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;
margin: 10px;
text-align: center;
background-color: #615748 !important;

border: #9E9168 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: #615748 !important;
border: #9E9168 1px solid;
font-size: 7pt;
z-index: 15;
}

.userpic img, .userpicfriends img {
border: #9E9168 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: right;
color: #9E9168;
margin-top: 10px;
padding: 5px 0px 5px 0px;
position: relative;
}

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

div.comments a:hover {
color: #ED8AB5;
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 {
padding: 20px;
background-color: #615748;
border: #9E9168 1px dashed;
color: #9E9168;
font-family: "arial narrow", sans-serif;

text-align: justify;
font-size: 9pt;
}

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 {
margin:auto;
}

.sbarcalendar {
text-align: center;
padding: 8px;
color: #9E9168;
background-color: #615748;
border: #9E9168 1px solid;
}

.sbarcalendarposts {
background-color: #615748;
border: #9E9168 1px solid;
text-align: center;
padding: 8px;
}

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

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

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

li.sbaritem:hover {
border: #7F734F 1px solid;
list-style: none;
}

li.sbartitle
{
display:none;
}

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

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

div#footer a, div#footer a:link, div#footer a:visited {
color: #9E9168;
background-color: #615748;
padding: 5px 10px 5px 10px;
}

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

#footer {
width: auto;
padding: 10px;
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: center;
padding-bottom: 10px;
color: #615748;
}

ul.year li {
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
background-color: #615748;
padding: 25px;
}

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

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

td.yearmonth {
border-style: none;
}

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

.datesubjectcomment {
padding: 5px;
margin-top: 0px;
}

.userpiccomment {
position: relative;
padding: 5px;
background-color: #615748 !important;
border: #9E9168 1px solid;
margin: 0px 10px 5px 10px;
z-index: 15;
float: left;
}

.box {
margin-top: -10px;
background-color: #615748;
padding: 0px 20px 10px 20px;
clear: left;
font-family: "arial narrow", sans-serif;
font-size: 8pt;
}

input, textarea {
background-color: #615748;
color: #9E9168;
border: #9E9168 1px solid;

font-family: "arial narrow", 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;
background-color: #615748;
color: #9E9168;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
padding: 0px 0px 10px 10px;
color: #9E9168;
}

.commentbox {
margin: 10px 0px 0px 0px;
padding: 10px 15px 10px 0px;
background-color: #615748;
border: #9E9168 1px dashed;
}

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

.datesubjectcomment a:hover {
color: #947D18;
}

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

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

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

.skiplinks {
text-align: center;
margin: -15px 0px -15px 0px;
padding: 10px;
color: #9E9168;
background-color: #615748;
}

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

.clear {
height: 15px;
}
}

Notes
* If you wish to add a header, the best width for it varies depending on what your screen resolution is.
* Do NOT specify a website.
* To make sure your navigation links align with the sidebar, use the following text for your links: "recent entries", "archive", "friendslist", and "profile".
* Colour scheme credit to COLOURlovers.com

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!