[layout: flexible squares] #17 me me she
Theme: Flexible Squares S2
Works with: paid, basic and plus
Tested on: Firefox, 1024x768 resolution and above
Includes: Comment pages, Sidebar, Currents, Archive
Disabled: none
>> larger image preview
Copy & Paste:
/*---------------------------------------------------
FLEXIBLE SQUARES S2
"me me she" by calixa @ biconic.livejournal.com
-----------------------------------------------------*/
body {
background-color: #F6F8F5;
background-image: url();
background-repeat: repeat-all;
color: #9DBFAB;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 150%;
margin: 0px 0 0px 0;
}
a, a:link, a:visited {
color: #9DBFAB;
text-decoration: none;
}
a:hover {
color: #8F826B;
text-decoration: none;
}
blockquote {
padding: 10px;
color: #9DBFAB;
font-size: 7pt;
font-family: "arial", sans-serif;
border: #E7EBE4 1px dotted;
background-color: #F6F8F5;
}
code, kbd, pre, tt {
font-family: monospace;
}
#qrform table{ border: 0 !important;}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content {
width: 75%;
margin: auto auto auto auto;
padding: 5px;
}
#maincontent {
margin: 0px 230px 30px 0px;
background-color: #F0F4EC;
padding: 0px 0px 20px 0px;
}
#sidebar {
padding: 0px;
margin: 0px;
width: 220px;
float: right;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: left;
background-color: #EAEEE6;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header; remember to change the width and height to fit your header image.
--------------------------------------------------------------------------------*/
#header {
width: auto;
padding: 0px 0px 20px 0px;
margin: -2px 0px 10px 0px;
text-align: left;
font-size: 7pt;
}
.headerimage {
position: relative;
width: 800px;
height: 0px;
background-image:url();
margin: 0px auto 0px auto;
}
div#header a, div#header a:link, div#header a:visited {
color: #BAD9C6;
background-color: #EAEEE6;
padding: 15px;
text-decoration: none;
text-transform: lowercase;
}
div#header a:hover {
color: #F0F4EC;
background-color: #AECEBB;
text-decoration: none;
}
.title {
display: none;
}
.subtitle {
display:none
}
li.view {
color: #ffffff;
padding: 15px !important;
margin-right: 1px;
background-color: #EAEEE6;
text-transform: lowercase;
}
ul.navheader {
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 1px 0 0px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
margin: 0px 0px -10px 0px;
padding: 10px 0px 10px 0px;
background-color: #ffffff;
}
.entry {
margin: 0px 0px 0px 150px;
padding: 15px 20px 10px 10px;
background-color: #ffffff;
color: #7B9083;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 150%;
border-left: #EAEEE6 1px dotted;
}
.datesubject {
margin: 0px 0px 0px 150px;
background-color: #ffffff;
padding: 5px 0px 0px 10px;
text-align: left;
border-left: #EAEEE6 1px dotted;
}
.date {
margin-bottom: 5px;
color: #AECEBB;
padding: 0px 10px 0px 0px;
font-size: 6pt;
font-family: "arial", sans-serif;
}
.subject {
color: #9DBFAB;
text-transform: uppercase;
padding: 0px 0px 10px 0px;
font-family: "arial", sans-serif;
font-size: 8pt;
line-height: 100%;
font-style: italic;
background-color: #ffffff;
}
.subject a, .subject a:link, .subject a:visited {
color: #D4CFBE;
}
.subject a:hover {
color: #D4CFBE;
}
.ljtags {
margin: 45px 0px 0px 0px;
padding: 5px 0px 3px 8px;
color: #AECEBB;
font-size: 7pt;
line-height: 120%;
width: 300px;
text-align: left;
border-top: #AECEBB 1px dotted;
}
.ljtags a:link,.ljtags a:visited {
color: #AECEBB;
}
.ljtags a:hover {
color: #2EB094;
}
.entry ul li
{
padding-left: 5px;
margin-left: 10px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 10px;
}
/*------------------------------------------------------------
Userpics
-------------------------------------------------------------------------------*/
.userpic {
position: relative;
float: left;
padding: 5px 5px 5px 7px;
margin: 0px 10px 0px 25px;
text-align: right;
background-color: #ffffff !important;
border-left: #EAEEE6 1px dotted;
border-right: #EAEEE6 1px dotted;
border-bottom: #EAEEE6 1px dotted;
font-size: 7pt;
z-index: 15;
}
.userpicfriends {
position: relative;
float: left;
padding: 5px 5px 0px 7px;
margin: 0px 10px 0px 25px;
text-align: right;
background-color: #ffffff !important;
border-left: #EAEEE6 1px dotted;
border-right: #EAEEE6 1px dotted;
border-bottom: #EAEEE6 1px dotted;
font-size: 7pt;
z-index: 15;
}
.userpic img, .userpicfriends img {
border: #F0F4EC 0px solid;
}
.userpic font, .userpicfriends font {
color: #AECEBB;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents {
font-family: "arial", sans-serif;
font-size: 8pt;
line-height: 120%;
width: 300px;
text-align: left;
color: #AECEBB;
padding: 3px 0px 3px 8px;
margin: -25px 0px 0px 0px;
border-top: #AECEBB 1px dotted;
}
.currentmood, .currentmusic, .currentlocation {
font-family: "arial", sans-serif;
font-size: 7pt;
color: #AECEBB;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "arial", sans-serif;
font-size: 8pt;
color: #C5DECF;
width: 300px;
padding: 3px 0px 3px 8px;
margin: -10px 0px 0px 0px;
position: relative;
text-align: left;
background-color: #F0F4EC;
}
div.comments a, div.comments a:link, div.comments a:visited{
font-size: 8pt;
color: #C5DECF;
text-transform: lowercase;
font-style: italic;
}
div.comments a:hover {
color: #9DBFAB;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 0px;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
display:none;
}
.sbarheader {
padding: 0px 0px 0px 0px;
}
.sbarbody {
padding: 10px 10px 10px 10px;
margin-bottom: 5px;
background-color: #AECEBB;
}
.sbarbody2 {
margin: -30px 0px 5px 0px;
padding: 20px;
background-color: #AECEBB;
color: #F6F8F5;
text-align: justify;
font-size: 8pt;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #D4EBE2;
text-transform: lowercase;
}
div#sidebar a:hover {
color: #F6F8F5;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin: 0px auto auto auto;
}
.sbarcalendar {
text-align: center;
padding: 5px;
color: #F6F8F5;
font-size: 8pt;
background-color: #9DBFAB;
}
.sbarcalendarposts {
text-align: center;
padding: 5px;
font-size: 8pt;
background-color: #9DBFAB;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist {
padding: 0px 0px 10px 0px;
margin: 0px 5px 2px 5px;
list-style: none;
}
li.sbaritem {
padding: 2px 0px 2px 5px;
margin: 0px 0px 2px 0px;
list-style: none;
background-color: #9DBFAB;
border-bottom: #9DBFAB 1px dotted;
}
li.sbaritem:hover {
border-bottom: #F0F4EC 1px dotted;
list-style: none;
}
li.sbartitle
{
display:none;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
li.viewing {
color: #ffffff;
padding: 15px 15px 5px 15px !important;
background-color: #EAEEE6;
margin-right: 1px;
text-transform: lowercase;
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #BAD9C6;
background-color: #EAEEE6;
padding: 15px 15px 5px 15px;
text-decoration: none;
text-transform: lowercase;
}
div#footer a:hover {
color: #F0F4EC;
background-color: #AECEBB;
text-decoration: none;
}
#footer {
width: 100%;
padding: 0px 0px 0px 0px;
z-index: 100;
text-align: left;
clear: both;
margin: 0px 0px -50px 0px;
font-size: 7pt;
}
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: 0px;
color: #9DBFAB;
padding: 5px;
margin-top: -1px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin: auto;
padding: 20px;
background-color: #ffffff;
color: #F0F4EC;
width: 100%;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #ffffff;
border-left: #CBE0D3 1px dotted;
border-bottom: #CBE0D3 1px dotted;
color: #AECEBB;
text-align: center;
padding: 5px;
}
table.yeartable td.yearday {
background-color: #ffffff;
border-left: #CBE0D3 1px dotted;
border-bottom: #CBE0D3 1px dotted;
color: #AECEBB;
text-align: center;
padding: 5px;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.box {
background-color: #ffffff;
color: #7B9083;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 150%;
padding: 10px;
clear: left;
margin: 0px 0px 15px 0px;
}
.datesubjectcomment {
margin: 0px 0px 0px 130px;
color: #9DBFAB;
text-transform: uppercase;
padding: 5px 0px 5px 10px;
line-height: 120%;
border-left: #EAEEE6 1px dotted;
}
.userpiccomment {
position: relative;
background-color: #ffffff !important;
border-left: #EAEEE6 1px dotted;
border-right: #EAEEE6 1px dotted;
border-bottom: #EAEEE6 1px dotted;
padding: 5px;
margin: 0px 0px 0px 10px;
z-index: 15;
float: right;
}
input, textarea {
border: #E7EBE4 1px dotted;
background-color: #F6F8F5;
color: #7B9083;
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: 30px 0px 50px 10px;
font-size: 8pt;
font-family: "arial", sans-serif;
color: #7B9083;
border-left: #EAEEE6 1px dotted;
margin: 0px 0px 15px 130px;
}
.commentbox {
padding: 10px 10px 10px 10px;
background-color: #ffffff;
color: #7B9083;
margin: 0px 0px 15px 0px;
border-bottom: #AECEBB 1px dotted;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #9DBFAB;
}
.datesubjectcomment a:hover {
color: #9DBFAB;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.commentinfo {
margin-top: 0px;
width: 100%;
background-color: #ffffff;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.skiplinks {
text-align: center;
margin: -15px 0px -5px 0px;
padding: 8px 0px 8px 0px;
color: #ffffff;
background-color: #ffffff;
font-size: 7pt;
}
.skiplinks a, .skiplinks a:link, skiplinks a:visited {
color: #9DBFAB;
}
.skiplinks a:hover {
color: #AECEBB;
text-decoration: none;
}
.clear {
height: 15px;
}
If your sidebar shows up higher on the page than the entries, copy and paste this css instead:
/*---------------------------------------------------
FLEXIBLE SQUARES S2
"me me she" by calixa @ biconic.livejournal.com
-----------------------------------------------------*/
body {
background-color: #F6F8F5;
background-image: url();
background-repeat: repeat-all;
color: #9DBFAB;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 150%;
margin: 0px 0 0px 0;
}
a, a:link, a:visited {
color: #9DBFAB;
text-decoration: none;
}
a:hover {
color: #8F826B;
text-decoration: none;
}
blockquote {
padding: 10px;
color: #9DBFAB;
font-size: 7pt;
font-family: "arial", sans-serif;
border: #E7EBE4 1px dotted;
background-color: #F6F8F5;
}
code, kbd, pre, tt {
font-family: monospace;
}
#qrform table{ border: 0 !important;}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content {
width: 75%;
margin: auto auto auto auto;
padding: 5px;
}
#maincontent {
margin: 0px 230px 30px 0px;
background-color: #F0F4EC;
padding: 0px 0px 20px 0px;
}
#sidebar {
padding: 0px;
margin: 0px;
width: 220px;
float: right;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: left;
background-color: #EAEEE6;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header; remember to change the width and height to fit your header image.
--------------------------------------------------------------------------------*/
#header {
width: auto;
padding: 0px 0px 20px 0px;
margin: -2px 0px 10px 0px;
text-align: left;
font-size: 7pt;
}
.headerimage {
position: relative;
width: 800px;
height: 0px;
background-image:url();
margin: 0px auto 0px auto;
}
div#header a, div#header a:link, div#header a:visited {
color: #BAD9C6;
background-color: #EAEEE6;
padding: 15px;
text-decoration: none;
text-transform: lowercase;
}
div#header a:hover {
color: #F0F4EC;
background-color: #AECEBB;
text-decoration: none;
}
.title {
display: none;
}
.subtitle {
display:none
}
li.view {
color: #ffffff;
padding: 15px !important;
margin-right: 1px;
background-color: #EAEEE6;
text-transform: lowercase;
}
ul.navheader {
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 1px 0 0px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
margin: 0px 0px -10px 0px;
padding: 10px 0px 10px 0px;
background-color: #ffffff;
}
.entry {
margin: 0px 0px 0px 150px;
padding: 15px 20px 10px 10px;
background-color: #ffffff;
color: #7B9083;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 150%;
border-left: #EAEEE6 1px dotted;
}
.datesubject {
margin: 0px 0px 0px 150px;
background-color: #ffffff;
padding: 5px 0px 0px 10px;
text-align: left;
border-left: #EAEEE6 1px dotted;
}
.date {
margin-bottom: 5px;
color: #AECEBB;
padding: 0px 10px 0px 0px;
font-size: 6pt;
font-family: "arial", sans-serif;
}
.subject {
color: #9DBFAB;
text-transform: uppercase;
padding: 0px 0px 10px 0px;
font-family: "arial", sans-serif;
font-size: 8pt;
line-height: 100%;
font-style: italic;
background-color: #ffffff;
}
.subject a, .subject a:link, .subject a:visited {
color: #D4CFBE;
}
.subject a:hover {
color: #D4CFBE;
}
.ljtags {
margin: 45px 0px 0px 0px;
padding: 5px 0px 3px 8px;
color: #AECEBB;
font-size: 7pt;
line-height: 120%;
width: 300px;
text-align: left;
border-top: #AECEBB 1px dotted;
}
.ljtags a:link,.ljtags a:visited {
color: #AECEBB;
}
.ljtags a:hover {
color: #2EB094;
}
.entry ul li
{
padding-left: 5px;
margin-left: 10px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 10px;
}
/*------------------------------------------------------------
Userpics
-------------------------------------------------------------------------------*/
.userpic {
position: relative;
float: left;
padding: 5px 5px 5px 7px;
margin: 0px 10px 0px 25px;
text-align: right;
background-color: #ffffff !important;
border-left: #EAEEE6 1px dotted;
border-right: #EAEEE6 1px dotted;
border-bottom: #EAEEE6 1px dotted;
font-size: 7pt;
z-index: 15;
}
.userpicfriends {
position: relative;
float: left;
padding: 5px 5px 0px 7px;
margin: 0px 10px 0px 25px;
text-align: right;
background-color: #ffffff !important;
border-left: #EAEEE6 1px dotted;
border-right: #EAEEE6 1px dotted;
border-bottom: #EAEEE6 1px dotted;
font-size: 7pt;
z-index: 15;
}
.userpic img, .userpicfriends img {
border: #F0F4EC 0px solid;
}
.userpic font, .userpicfriends font {
color: #AECEBB;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents {
font-family: "arial", sans-serif;
font-size: 8pt;
line-height: 120%;
width: 300px;
text-align: left;
color: #AECEBB;
padding: 3px 0px 3px 8px;
margin: -25px 0px 0px 0px;
border-top: #AECEBB 1px dotted;
}
.currentmood, .currentmusic, .currentlocation {
font-family: "arial", sans-serif;
font-size: 7pt;
color: #AECEBB;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "arial", sans-serif;
font-size: 8pt;
color: #C5DECF;
width: 300px;
padding: 3px 0px 3px 8px;
margin: -10px 0px 0px 0px;
position: relative;
text-align: left;
background-color: #F0F4EC;
}
div.comments a, div.comments a:link, div.comments a:visited{
font-size: 8pt;
color: #C5DECF;
text-transform: lowercase;
font-style: italic;
}
div.comments a:hover {
color: #9DBFAB;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 0px;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
display:none;
}
.sbarheader {
padding: 0px 0px 0px 0px;
}
.sbarbody {
padding: 10px 10px 10px 10px;
margin-bottom: 5px;
background-color: #AECEBB;
}
.sbarbody2 {
margin: 0px 0px 5px 0px;
padding: 20px;
background-color: #AECEBB;
color: #F6F8F5;
text-align: justify;
font-size: 8pt;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #D4EBE2;
text-transform: lowercase;
}
div#sidebar a:hover {
color: #F6F8F5;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin: 0px auto auto auto;
}
.sbarcalendar {
text-align: center;
padding: 5px;
color: #F6F8F5;
font-size: 8pt;
background-color: #9DBFAB;
}
.sbarcalendarposts {
text-align: center;
padding: 5px;
font-size: 8pt;
background-color: #9DBFAB;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist {
padding: 0px 0px 10px 0px;
margin: 0px 5px 2px 5px;
list-style: none;
}
li.sbaritem {
padding: 2px 0px 2px 5px;
margin: 0px 0px 2px 0px;
list-style: none;
background-color: #9DBFAB;
border-bottom: #9DBFAB 1px dotted;
}
li.sbaritem:hover {
border-bottom: #F0F4EC 1px dotted;
list-style: none;
}
li.sbartitle
{
display:none;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
li.viewing {
color: #ffffff;
padding: 15px 15px 5px 15px !important;
background-color: #EAEEE6;
margin-right: 1px;
text-transform: lowercase;
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #BAD9C6;
background-color: #EAEEE6;
padding: 15px 15px 5px 15px;
text-decoration: none;
text-transform: lowercase;
}
div#footer a:hover {
color: #F0F4EC;
background-color: #AECEBB;
text-decoration: none;
}
#footer {
width: 100%;
padding: 0px 0px 0px 0px;
z-index: 100;
text-align: left;
clear: both;
margin: 0px 0px -50px 0px;
font-size: 7pt;
}
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: 0px;
color: #9DBFAB;
padding: 5px;
margin-top: -1px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin: auto;
padding: 20px;
background-color: #ffffff;
color: #F0F4EC;
width: 100%;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #ffffff;
border-left: #CBE0D3 1px dotted;
border-bottom: #CBE0D3 1px dotted;
color: #AECEBB;
text-align: center;
padding: 5px;
}
table.yeartable td.yearday {
background-color: #ffffff;
border-left: #CBE0D3 1px dotted;
border-bottom: #CBE0D3 1px dotted;
color: #AECEBB;
text-align: center;
padding: 5px;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.box {
background-color: #ffffff;
color: #7B9083;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 150%;
padding: 10px;
clear: left;
margin: 0px 0px 15px 0px;
}
.datesubjectcomment {
margin: 0px 0px 0px 130px;
color: #9DBFAB;
text-transform: uppercase;
padding: 5px 0px 5px 10px;
line-height: 120%;
border-left: #EAEEE6 1px dotted;
}
.userpiccomment {
position: relative;
background-color: #ffffff !important;
border-left: #EAEEE6 1px dotted;
border-right: #EAEEE6 1px dotted;
border-bottom: #EAEEE6 1px dotted;
padding: 5px;
margin: 0px 0px 0px 10px;
z-index: 15;
float: right;
}
input, textarea {
border: #E7EBE4 1px dotted;
background-color: #F6F8F5;
color: #7B9083;
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: 30px 0px 50px 10px;
font-size: 8pt;
font-family: "arial", sans-serif;
color: #7B9083;
border-left: #EAEEE6 1px dotted;
margin: 0px 0px 15px 130px;
}
.commentbox {
padding: 10px 10px 10px 10px;
background-color: #ffffff;
color: #7B9083;
margin: 0px 0px 15px 0px;
border-bottom: #AECEBB 1px dotted;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #9DBFAB;
}
.datesubjectcomment a:hover {
color: #9DBFAB;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.commentinfo {
margin-top: 0px;
width: 100%;
background-color: #ffffff;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.skiplinks {
text-align: center;
margin: -15px 0px -5px 0px;
padding: 8px 0px 8px 0px;
color: #ffffff;
background-color: #ffffff;
font-size: 7pt;
}
.skiplinks a, .skiplinks a:link, skiplinks a:visited {
color: #9DBFAB;
}
.skiplinks a:hover {
color: #AECEBB;
text-decoration: none;
}
.clear {
height: 15px;
}
NOTE
This layout is not meant to be used with a header, but you can add one if you really must.
Installation Instructions
1. Under customize css, set all the drop down boxes to no and paste the code into the custom css textarea.
2. To add a header, find background-image:url(); under #header 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.
4. Please credit biconic if you use/edit :)
As always, if there are any bugs or if you have any problems feel free to leave a comment.
Works with: paid, basic and plus
Tested on: Firefox, 1024x768 resolution and above
Includes: Comment pages, Sidebar, Currents, Archive
Disabled: none
>> larger image preview
Copy & Paste:
/*---------------------------------------------------
FLEXIBLE SQUARES S2
"me me she" by calixa @ biconic.livejournal.com
-----------------------------------------------------*/
body {
background-color: #F6F8F5;
background-image: url();
background-repeat: repeat-all;
color: #9DBFAB;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 150%;
margin: 0px 0 0px 0;
}
a, a:link, a:visited {
color: #9DBFAB;
text-decoration: none;
}
a:hover {
color: #8F826B;
text-decoration: none;
}
blockquote {
padding: 10px;
color: #9DBFAB;
font-size: 7pt;
font-family: "arial", sans-serif;
border: #E7EBE4 1px dotted;
background-color: #F6F8F5;
}
code, kbd, pre, tt {
font-family: monospace;
}
#qrform table{ border: 0 !important;}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content {
width: 75%;
margin: auto auto auto auto;
padding: 5px;
}
#maincontent {
margin: 0px 230px 30px 0px;
background-color: #F0F4EC;
padding: 0px 0px 20px 0px;
}
#sidebar {
padding: 0px;
margin: 0px;
width: 220px;
float: right;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: left;
background-color: #EAEEE6;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header; remember to change the width and height to fit your header image.
--------------------------------------------------------------------------------*/
#header {
width: auto;
padding: 0px 0px 20px 0px;
margin: -2px 0px 10px 0px;
text-align: left;
font-size: 7pt;
}
.headerimage {
position: relative;
width: 800px;
height: 0px;
background-image:url();
margin: 0px auto 0px auto;
}
div#header a, div#header a:link, div#header a:visited {
color: #BAD9C6;
background-color: #EAEEE6;
padding: 15px;
text-decoration: none;
text-transform: lowercase;
}
div#header a:hover {
color: #F0F4EC;
background-color: #AECEBB;
text-decoration: none;
}
.title {
display: none;
}
.subtitle {
display:none
}
li.view {
color: #ffffff;
padding: 15px !important;
margin-right: 1px;
background-color: #EAEEE6;
text-transform: lowercase;
}
ul.navheader {
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 1px 0 0px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
margin: 0px 0px -10px 0px;
padding: 10px 0px 10px 0px;
background-color: #ffffff;
}
.entry {
margin: 0px 0px 0px 150px;
padding: 15px 20px 10px 10px;
background-color: #ffffff;
color: #7B9083;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 150%;
border-left: #EAEEE6 1px dotted;
}
.datesubject {
margin: 0px 0px 0px 150px;
background-color: #ffffff;
padding: 5px 0px 0px 10px;
text-align: left;
border-left: #EAEEE6 1px dotted;
}
.date {
margin-bottom: 5px;
color: #AECEBB;
padding: 0px 10px 0px 0px;
font-size: 6pt;
font-family: "arial", sans-serif;
}
.subject {
color: #9DBFAB;
text-transform: uppercase;
padding: 0px 0px 10px 0px;
font-family: "arial", sans-serif;
font-size: 8pt;
line-height: 100%;
font-style: italic;
background-color: #ffffff;
}
.subject a, .subject a:link, .subject a:visited {
color: #D4CFBE;
}
.subject a:hover {
color: #D4CFBE;
}
.ljtags {
margin: 45px 0px 0px 0px;
padding: 5px 0px 3px 8px;
color: #AECEBB;
font-size: 7pt;
line-height: 120%;
width: 300px;
text-align: left;
border-top: #AECEBB 1px dotted;
}
.ljtags a:link,.ljtags a:visited {
color: #AECEBB;
}
.ljtags a:hover {
color: #2EB094;
}
.entry ul li
{
padding-left: 5px;
margin-left: 10px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 10px;
}
/*------------------------------------------------------------
Userpics
-------------------------------------------------------------------------------*/
.userpic {
position: relative;
float: left;
padding: 5px 5px 5px 7px;
margin: 0px 10px 0px 25px;
text-align: right;
background-color: #ffffff !important;
border-left: #EAEEE6 1px dotted;
border-right: #EAEEE6 1px dotted;
border-bottom: #EAEEE6 1px dotted;
font-size: 7pt;
z-index: 15;
}
.userpicfriends {
position: relative;
float: left;
padding: 5px 5px 0px 7px;
margin: 0px 10px 0px 25px;
text-align: right;
background-color: #ffffff !important;
border-left: #EAEEE6 1px dotted;
border-right: #EAEEE6 1px dotted;
border-bottom: #EAEEE6 1px dotted;
font-size: 7pt;
z-index: 15;
}
.userpic img, .userpicfriends img {
border: #F0F4EC 0px solid;
}
.userpic font, .userpicfriends font {
color: #AECEBB;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents {
font-family: "arial", sans-serif;
font-size: 8pt;
line-height: 120%;
width: 300px;
text-align: left;
color: #AECEBB;
padding: 3px 0px 3px 8px;
margin: -25px 0px 0px 0px;
border-top: #AECEBB 1px dotted;
}
.currentmood, .currentmusic, .currentlocation {
font-family: "arial", sans-serif;
font-size: 7pt;
color: #AECEBB;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "arial", sans-serif;
font-size: 8pt;
color: #C5DECF;
width: 300px;
padding: 3px 0px 3px 8px;
margin: -10px 0px 0px 0px;
position: relative;
text-align: left;
background-color: #F0F4EC;
}
div.comments a, div.comments a:link, div.comments a:visited{
font-size: 8pt;
color: #C5DECF;
text-transform: lowercase;
font-style: italic;
}
div.comments a:hover {
color: #9DBFAB;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 0px;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
display:none;
}
.sbarheader {
padding: 0px 0px 0px 0px;
}
.sbarbody {
padding: 10px 10px 10px 10px;
margin-bottom: 5px;
background-color: #AECEBB;
}
.sbarbody2 {
margin: -30px 0px 5px 0px;
padding: 20px;
background-color: #AECEBB;
color: #F6F8F5;
text-align: justify;
font-size: 8pt;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #D4EBE2;
text-transform: lowercase;
}
div#sidebar a:hover {
color: #F6F8F5;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin: 0px auto auto auto;
}
.sbarcalendar {
text-align: center;
padding: 5px;
color: #F6F8F5;
font-size: 8pt;
background-color: #9DBFAB;
}
.sbarcalendarposts {
text-align: center;
padding: 5px;
font-size: 8pt;
background-color: #9DBFAB;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist {
padding: 0px 0px 10px 0px;
margin: 0px 5px 2px 5px;
list-style: none;
}
li.sbaritem {
padding: 2px 0px 2px 5px;
margin: 0px 0px 2px 0px;
list-style: none;
background-color: #9DBFAB;
border-bottom: #9DBFAB 1px dotted;
}
li.sbaritem:hover {
border-bottom: #F0F4EC 1px dotted;
list-style: none;
}
li.sbartitle
{
display:none;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
li.viewing {
color: #ffffff;
padding: 15px 15px 5px 15px !important;
background-color: #EAEEE6;
margin-right: 1px;
text-transform: lowercase;
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #BAD9C6;
background-color: #EAEEE6;
padding: 15px 15px 5px 15px;
text-decoration: none;
text-transform: lowercase;
}
div#footer a:hover {
color: #F0F4EC;
background-color: #AECEBB;
text-decoration: none;
}
#footer {
width: 100%;
padding: 0px 0px 0px 0px;
z-index: 100;
text-align: left;
clear: both;
margin: 0px 0px -50px 0px;
font-size: 7pt;
}
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: 0px;
color: #9DBFAB;
padding: 5px;
margin-top: -1px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin: auto;
padding: 20px;
background-color: #ffffff;
color: #F0F4EC;
width: 100%;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #ffffff;
border-left: #CBE0D3 1px dotted;
border-bottom: #CBE0D3 1px dotted;
color: #AECEBB;
text-align: center;
padding: 5px;
}
table.yeartable td.yearday {
background-color: #ffffff;
border-left: #CBE0D3 1px dotted;
border-bottom: #CBE0D3 1px dotted;
color: #AECEBB;
text-align: center;
padding: 5px;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.box {
background-color: #ffffff;
color: #7B9083;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 150%;
padding: 10px;
clear: left;
margin: 0px 0px 15px 0px;
}
.datesubjectcomment {
margin: 0px 0px 0px 130px;
color: #9DBFAB;
text-transform: uppercase;
padding: 5px 0px 5px 10px;
line-height: 120%;
border-left: #EAEEE6 1px dotted;
}
.userpiccomment {
position: relative;
background-color: #ffffff !important;
border-left: #EAEEE6 1px dotted;
border-right: #EAEEE6 1px dotted;
border-bottom: #EAEEE6 1px dotted;
padding: 5px;
margin: 0px 0px 0px 10px;
z-index: 15;
float: right;
}
input, textarea {
border: #E7EBE4 1px dotted;
background-color: #F6F8F5;
color: #7B9083;
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: 30px 0px 50px 10px;
font-size: 8pt;
font-family: "arial", sans-serif;
color: #7B9083;
border-left: #EAEEE6 1px dotted;
margin: 0px 0px 15px 130px;
}
.commentbox {
padding: 10px 10px 10px 10px;
background-color: #ffffff;
color: #7B9083;
margin: 0px 0px 15px 0px;
border-bottom: #AECEBB 1px dotted;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #9DBFAB;
}
.datesubjectcomment a:hover {
color: #9DBFAB;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.commentinfo {
margin-top: 0px;
width: 100%;
background-color: #ffffff;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.skiplinks {
text-align: center;
margin: -15px 0px -5px 0px;
padding: 8px 0px 8px 0px;
color: #ffffff;
background-color: #ffffff;
font-size: 7pt;
}
.skiplinks a, .skiplinks a:link, skiplinks a:visited {
color: #9DBFAB;
}
.skiplinks a:hover {
color: #AECEBB;
text-decoration: none;
}
.clear {
height: 15px;
}
If your sidebar shows up higher on the page than the entries, copy and paste this css instead:
/*---------------------------------------------------
FLEXIBLE SQUARES S2
"me me she" by calixa @ biconic.livejournal.com
-----------------------------------------------------*/
body {
background-color: #F6F8F5;
background-image: url();
background-repeat: repeat-all;
color: #9DBFAB;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 150%;
margin: 0px 0 0px 0;
}
a, a:link, a:visited {
color: #9DBFAB;
text-decoration: none;
}
a:hover {
color: #8F826B;
text-decoration: none;
}
blockquote {
padding: 10px;
color: #9DBFAB;
font-size: 7pt;
font-family: "arial", sans-serif;
border: #E7EBE4 1px dotted;
background-color: #F6F8F5;
}
code, kbd, pre, tt {
font-family: monospace;
}
#qrform table{ border: 0 !important;}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content {
width: 75%;
margin: auto auto auto auto;
padding: 5px;
}
#maincontent {
margin: 0px 230px 30px 0px;
background-color: #F0F4EC;
padding: 0px 0px 20px 0px;
}
#sidebar {
padding: 0px;
margin: 0px;
width: 220px;
float: right;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: left;
background-color: #EAEEE6;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header; remember to change the width and height to fit your header image.
--------------------------------------------------------------------------------*/
#header {
width: auto;
padding: 0px 0px 20px 0px;
margin: -2px 0px 10px 0px;
text-align: left;
font-size: 7pt;
}
.headerimage {
position: relative;
width: 800px;
height: 0px;
background-image:url();
margin: 0px auto 0px auto;
}
div#header a, div#header a:link, div#header a:visited {
color: #BAD9C6;
background-color: #EAEEE6;
padding: 15px;
text-decoration: none;
text-transform: lowercase;
}
div#header a:hover {
color: #F0F4EC;
background-color: #AECEBB;
text-decoration: none;
}
.title {
display: none;
}
.subtitle {
display:none
}
li.view {
color: #ffffff;
padding: 15px !important;
margin-right: 1px;
background-color: #EAEEE6;
text-transform: lowercase;
}
ul.navheader {
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 1px 0 0px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
margin: 0px 0px -10px 0px;
padding: 10px 0px 10px 0px;
background-color: #ffffff;
}
.entry {
margin: 0px 0px 0px 150px;
padding: 15px 20px 10px 10px;
background-color: #ffffff;
color: #7B9083;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 150%;
border-left: #EAEEE6 1px dotted;
}
.datesubject {
margin: 0px 0px 0px 150px;
background-color: #ffffff;
padding: 5px 0px 0px 10px;
text-align: left;
border-left: #EAEEE6 1px dotted;
}
.date {
margin-bottom: 5px;
color: #AECEBB;
padding: 0px 10px 0px 0px;
font-size: 6pt;
font-family: "arial", sans-serif;
}
.subject {
color: #9DBFAB;
text-transform: uppercase;
padding: 0px 0px 10px 0px;
font-family: "arial", sans-serif;
font-size: 8pt;
line-height: 100%;
font-style: italic;
background-color: #ffffff;
}
.subject a, .subject a:link, .subject a:visited {
color: #D4CFBE;
}
.subject a:hover {
color: #D4CFBE;
}
.ljtags {
margin: 45px 0px 0px 0px;
padding: 5px 0px 3px 8px;
color: #AECEBB;
font-size: 7pt;
line-height: 120%;
width: 300px;
text-align: left;
border-top: #AECEBB 1px dotted;
}
.ljtags a:link,.ljtags a:visited {
color: #AECEBB;
}
.ljtags a:hover {
color: #2EB094;
}
.entry ul li
{
padding-left: 5px;
margin-left: 10px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 10px;
}
/*------------------------------------------------------------
Userpics
-------------------------------------------------------------------------------*/
.userpic {
position: relative;
float: left;
padding: 5px 5px 5px 7px;
margin: 0px 10px 0px 25px;
text-align: right;
background-color: #ffffff !important;
border-left: #EAEEE6 1px dotted;
border-right: #EAEEE6 1px dotted;
border-bottom: #EAEEE6 1px dotted;
font-size: 7pt;
z-index: 15;
}
.userpicfriends {
position: relative;
float: left;
padding: 5px 5px 0px 7px;
margin: 0px 10px 0px 25px;
text-align: right;
background-color: #ffffff !important;
border-left: #EAEEE6 1px dotted;
border-right: #EAEEE6 1px dotted;
border-bottom: #EAEEE6 1px dotted;
font-size: 7pt;
z-index: 15;
}
.userpic img, .userpicfriends img {
border: #F0F4EC 0px solid;
}
.userpic font, .userpicfriends font {
color: #AECEBB;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents {
font-family: "arial", sans-serif;
font-size: 8pt;
line-height: 120%;
width: 300px;
text-align: left;
color: #AECEBB;
padding: 3px 0px 3px 8px;
margin: -25px 0px 0px 0px;
border-top: #AECEBB 1px dotted;
}
.currentmood, .currentmusic, .currentlocation {
font-family: "arial", sans-serif;
font-size: 7pt;
color: #AECEBB;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "arial", sans-serif;
font-size: 8pt;
color: #C5DECF;
width: 300px;
padding: 3px 0px 3px 8px;
margin: -10px 0px 0px 0px;
position: relative;
text-align: left;
background-color: #F0F4EC;
}
div.comments a, div.comments a:link, div.comments a:visited{
font-size: 8pt;
color: #C5DECF;
text-transform: lowercase;
font-style: italic;
}
div.comments a:hover {
color: #9DBFAB;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 0px;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
display:none;
}
.sbarheader {
padding: 0px 0px 0px 0px;
}
.sbarbody {
padding: 10px 10px 10px 10px;
margin-bottom: 5px;
background-color: #AECEBB;
}
.sbarbody2 {
margin: 0px 0px 5px 0px;
padding: 20px;
background-color: #AECEBB;
color: #F6F8F5;
text-align: justify;
font-size: 8pt;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #D4EBE2;
text-transform: lowercase;
}
div#sidebar a:hover {
color: #F6F8F5;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin: 0px auto auto auto;
}
.sbarcalendar {
text-align: center;
padding: 5px;
color: #F6F8F5;
font-size: 8pt;
background-color: #9DBFAB;
}
.sbarcalendarposts {
text-align: center;
padding: 5px;
font-size: 8pt;
background-color: #9DBFAB;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist {
padding: 0px 0px 10px 0px;
margin: 0px 5px 2px 5px;
list-style: none;
}
li.sbaritem {
padding: 2px 0px 2px 5px;
margin: 0px 0px 2px 0px;
list-style: none;
background-color: #9DBFAB;
border-bottom: #9DBFAB 1px dotted;
}
li.sbaritem:hover {
border-bottom: #F0F4EC 1px dotted;
list-style: none;
}
li.sbartitle
{
display:none;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
li.viewing {
color: #ffffff;
padding: 15px 15px 5px 15px !important;
background-color: #EAEEE6;
margin-right: 1px;
text-transform: lowercase;
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #BAD9C6;
background-color: #EAEEE6;
padding: 15px 15px 5px 15px;
text-decoration: none;
text-transform: lowercase;
}
div#footer a:hover {
color: #F0F4EC;
background-color: #AECEBB;
text-decoration: none;
}
#footer {
width: 100%;
padding: 0px 0px 0px 0px;
z-index: 100;
text-align: left;
clear: both;
margin: 0px 0px -50px 0px;
font-size: 7pt;
}
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: 0px;
color: #9DBFAB;
padding: 5px;
margin-top: -1px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin: auto;
padding: 20px;
background-color: #ffffff;
color: #F0F4EC;
width: 100%;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #ffffff;
border-left: #CBE0D3 1px dotted;
border-bottom: #CBE0D3 1px dotted;
color: #AECEBB;
text-align: center;
padding: 5px;
}
table.yeartable td.yearday {
background-color: #ffffff;
border-left: #CBE0D3 1px dotted;
border-bottom: #CBE0D3 1px dotted;
color: #AECEBB;
text-align: center;
padding: 5px;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.box {
background-color: #ffffff;
color: #7B9083;
font-family: "arial", sans-serif;
font-size: 8pt;
text-align: justify;
line-height: 150%;
padding: 10px;
clear: left;
margin: 0px 0px 15px 0px;
}
.datesubjectcomment {
margin: 0px 0px 0px 130px;
color: #9DBFAB;
text-transform: uppercase;
padding: 5px 0px 5px 10px;
line-height: 120%;
border-left: #EAEEE6 1px dotted;
}
.userpiccomment {
position: relative;
background-color: #ffffff !important;
border-left: #EAEEE6 1px dotted;
border-right: #EAEEE6 1px dotted;
border-bottom: #EAEEE6 1px dotted;
padding: 5px;
margin: 0px 0px 0px 10px;
z-index: 15;
float: right;
}
input, textarea {
border: #E7EBE4 1px dotted;
background-color: #F6F8F5;
color: #7B9083;
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: 30px 0px 50px 10px;
font-size: 8pt;
font-family: "arial", sans-serif;
color: #7B9083;
border-left: #EAEEE6 1px dotted;
margin: 0px 0px 15px 130px;
}
.commentbox {
padding: 10px 10px 10px 10px;
background-color: #ffffff;
color: #7B9083;
margin: 0px 0px 15px 0px;
border-bottom: #AECEBB 1px dotted;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #9DBFAB;
}
.datesubjectcomment a:hover {
color: #9DBFAB;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.commentinfo {
margin-top: 0px;
width: 100%;
background-color: #ffffff;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.skiplinks {
text-align: center;
margin: -15px 0px -5px 0px;
padding: 8px 0px 8px 0px;
color: #ffffff;
background-color: #ffffff;
font-size: 7pt;
}
.skiplinks a, .skiplinks a:link, skiplinks a:visited {
color: #9DBFAB;
}
.skiplinks a:hover {
color: #AECEBB;
text-decoration: none;
}
.clear {
height: 15px;
}
NOTE
This layout is not meant to be used with a header, but you can add one if you really must.
Installation Instructions
1. Under customize css, set all the drop down boxes to no and paste the code into the custom css textarea.
2. To add a header, find background-image:url(); under #header 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.
4. Please credit biconic if you use/edit :)
As always, if there are any bugs or if you have any problems feel free to leave a comment.