s2 Flexible Squares: #003 "Classic" (light & dark versions): mintyapple

justcyanide in mintyapple

s2 Flexible Squares: #003 "Classic" (light & dark versions)

Feb 13, 2010 21:40

light image preview ~ dark image preview
light live preview (temporary)

S2 Flexible Squares
Tested in Firefox & Explorer (round corners won't show up in IE), see notes below.

&Light Version

light live preview (temporary)

&Code

/* Cleaned CSS: */

/*-------------------------------------------------------
LAYOUT: #003 "Classic"
by JUSTCYANIDE @ community.livejournal.com/hiddencolours/
***Credit is LOVE***
--------------------------------------------------------*/

/*-----------------BODY-----------------*/

body {
background-color: #f9f3d7;
background: url(http://i46.tinypic.com/5dorp3.jpg);
color: #f5f4ef;
font-family: "arial", sans-serif;
font-size: 20px;
margin: 10px 0 9px 0;
text-align: justify;
}

a, a:link, a:visited {
color: #8e6b42;
font-weight: bold;
text-decoration: none;
}

a:hover {
color: #5a311b;
}

p, blockquote {
border: 4px double #cdb28f;
font-size: 11px;
line-height: 14px;
padding: 8px;
text-align: justify;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}

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

/*-----------------VIEWS, TITLE & SUBTITLE-----------------*/

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #5a311b;
float: center;
font-family: "times new roman", serif;
font-size: 17px;
font-style: italic;
font-weight: bold;
padding: 4px;
text-transform: lowercase;
}

div#header a:hover, div#footer a:hover {
color: #8e6b42;
text-decoration: none;
}

ul.navheader
{
list-style-type: none;
text-align: center;
float: left;
padding: 0px;
margin: 0 0px 0px -180px;
width: 150px;
margin-bottom: -100px;
}

div#header li + li{
margin: 3px;
background-color: #f9f3d7;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
}

div#header li + li + li {
background-color: #f9f3d7;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
}

div#header li + li + li + li{
background-color: #f9f3d7;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
}

div#header li + li + li + li + li {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px; }

ul.navheader li {
font-style: italic;
background-color: #f9f3d7;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
color: #5a311b;
font-family: "times new roman", serif;
text-transform: lowercase;
font-size: 14px;
float: left important!;
padding: 0 3px 0 -200px;
}

.title, .subtitle{
color: #5a311b;
font-family: "times new roman", serif;
font-size: 37px;
font-style: italic;
font-weight: bold;
text-align: right;
padding-right: 30px;
}

.subtitle {
margin-bottom: -70px;
font-size: 20px;
margin-top: -4px;
padding-right: 34px;}

/*-----------------CONTENT-----------------*/

#content {
width: 670px;
margin-left: 210px; margin-right: auto;
background-color: #f9f3d7;
background: url();
padding: 35px;
}

#maincontent {
margin-top: 100px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: #f9f3d7;
background: url();
color: #70030b;
padding: 30px 30 30 10px;
margin-right: auto;
text-align: left;
}

.clear {
height: 15px;
}

.skiplinks {
text-align: center;
}

.separator{
height: 100%;
}

/*----------------HEADER IMAGE----------------*/

/*-----------------SIDEBAR-----------------*/

#sidebar {
float: left;
width: 160px;
background-color: #f9f3d7;
font-size: 11px;
font-family: "times new roman", serif;
color: #5a311b;
text-transform: lowercase;
text-align: center;
margin: 200px 0px 0px -210px;
padding: 17px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
position: absolute;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #5a311b;
font-weight: bold;
text-transform: uppercase;
}

div#sidebar a:hover {
color: #5a311b;
text-decoration: overline;
}

.defaultuserpic {
text-align: center;
margin-top: 25px;
border: 4px double #cdb28f;
margin: 24px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}

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

.sbarbody {

padding: 0px 5px 0px 5px;
}

.sbarbody2 {
padding: 0 15px 0 15px;
}

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

.sbarcalendar {
background-color: #5a311b;
font-size: 10px;
color: #faf1de;
text-align: center;
}}

.sbarcalendarposts{
display: none;
}

#sidebar_tags {
display: none;
}

#sidebar_summary {
display: none;
}

li.sbaritem {
list-style: none;
font-size: 12px;
color: #faf1de;
}

li.sbartitle {
display: none;
}

.lj-view-tags #sidebar{
display: none;
}

/*-----------------ENTRY-------------*/

.entry {
background: url();
margin: 0px 10px 10px 10px;
padding: 20px;
background-color: #f9f3d7;
color: #5a311b;
font-family: "times new roman", serif;
font-size: 13px;
text-align: left;
-moz-border-radius: 0 0px 30px 30px;
-webkit-border-radius: 0 0px 30px 30px;
-khtml-border-radius: 0 0px 30px 30px;
}

.entrytext {
padding: 20px;
}

.entry ul li, .entry ol li {
padding-left: 15px;
margin-left: 5px;
}

/*-----------------USERPICS & FriendsUSERPICS------------*/

.userpic {
position: relative;
float: right;
margin: 0px 45px 0px 10px;
margin-bottom: 5px;
padding: 2px;
margin-top: 160px;
border: 4px double #cdb28f;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
}

.userpicfriends {
position: relative;
float: right;
margin: 0px 45px 0px 10px;
margin-bottom: 5px;
padding: 2px;
margin-top: 160px;
border: 4px double #cdb28f;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
background-color: #f9f3d7!important;
}

.userpicfriends font {
color: #5a311b;
text-transform: uppercase;
text-align: center;
background-color: #f9f3d7!important;
}

/* delete this to make the userpic 100x100*/
.userpic img, .userpicfriends img {
background-color: transparent !important;
width: 90px;
height: 90px;
}

/*-----------------DATE & SUBJECT-----------------*/
.date {
line-height: 112px;
font-size: 1px;
color: #f1e9c4;
visibility: transparent;
background: url(http://i49.tinypic.com/6p582c.jpg);
}

.datesubject {
margin: 0px 10px 0px 10px; }

.subject {
text-align: right;
background-color: #f9f3d7;
color: #8e6b42;
font-style: italic;
font-size: 18pt;
text-transform: lowercase;
}

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

.subject a:hover {
color: #5a311b;
}

/*-----------------COMMENT & REPLY-----------------*/

.comments {
text-align: right;
font-family: "times new roman", serif;
margin: 9px 15 9px -10px;
padding-right: 15px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #8e6b42;
font-size: 13px;
padding: 15px -5px 15px 5px;
text-transform: lowercase;
}

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

.datesubjectcomment {
text-transform: uppercase;
font-size: 10px;
background-color: transparent;
padding: 5px;
margin-top: 20px;
}

.userpiccomment {
float: left;
margin-right: 10px;
margin-bottom: 5px;
padding: 2px;
background-color: #f9f3d7 !important;
border: 4px double #cdb28f;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
}

.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #999999;
padding: 10px;
clear: left;
}

input, textarea {
background-color: #f9f3d7;
color: #5a311b;
}

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

.reply {
background: url();
margin: 0px 10px 10px 10px;
padding: 20px;
background-color: #f9f3d7;
color: #5a311b;
font-family: "times new roman", serif;
font-size: 13px;
text-align: left;
-moz-border-radius: 0 0px 30px 30px;
-webkit-border-radius: 0 0px 30px 30px;
-khtml-border-radius: 0 0px 30px 30px;
}

.replytosubject {
font-weight: bold;
}

.commentreply {

position: relative;
margin: 10px;
font-size: 14px;
font-family: "times new roman", serif;
color: #5a311b;
}

.commentbox {
background: url();
margin: 0px 10px 10px 10px;
padding: 20px;
background-color: #f9f3d7;
color: #5a311b;
font-family: "times new roman", serif;
font-size: 13px;
text-align: left;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-khtml-border-radius: 30px;
}

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

.datesubjectcomment a:hover {
color: #8e6b42;
}

.commentboxpartial {
border-color: #5a311b;;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #;
}

.commentinfo {
color: #5a311b;
background-color: #;
margin-top: 10px;
width: 100%;
}

/*-----------------CALENDAR/ARCHIVE PAGE-----------------*/

ul.year {
text-align: center;
padding-bottom: 40px;
color: #5a311b;
font-family: "times new roman", serif;
font-size: 25px;
font-style: italic;
font-weight: bold;
}

ul.year li {
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yearday {
background: url();
margin: 0px 10px 10px 10px;
padding: 20px;
background-color: #f9f3d7;
color: #5a311b;
font-family: "times new roman", serif;
font-size: 13px;
text-align: left;
-moz-border-radius: 0 0px 30px 30px;
-webkit-border-radius: 0 0px 30px 30px;
-khtml-border-radius: 0 0px 30px 30px;
}

td.yearmonth {
font-size: 20px;
color: #5a311b;
font-family: "times new roman", serif;
font-style: italic;
font-style: italic;
font-weight: bold;
}

td.yearday {
font-size: 20px;
color: #5a311b;
font-family: "times new roman", serif;
font-style: italic;
font-style: italic;
font-weight: bold;
}

td.yeardate {
font-size: 13px;
color: #5a311b;
font-family: "times new roman", serif;
font-style: italic;
font-style: italic;
font-weight: bold;
}

.yeardate a {
font-size: 15px;
margin-left: 50px;
margin-top: 25px;
font-style: normal;
border: solid;
color: #5a311b;
border: 4px double #cdb28f;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
}

.yeardate a:hover {
color: #8e6b42;
}

/*-----------------FOOTER-----------------*/

#footer {
width: 100%;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
background-color: #;
color: transparent;
z-index: 100;
clear: both;
}

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

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

.clearfoot {
clear: both;
}

/*----------------LJ USER & COMM ICON ----------------*/

.ljuser img {
height: 0;
padding: 10px 00px 5px 0px;
margin-right: -3px;
background-image: url(http://i46.tinypic.com/w89xft.png);
background-repeat: no-repeat;
background-position: left center;
}

/*----------------LJ CONTROL STRIP---------------*/

#lj_controlstrip {
height: 0;
padding: 10px 00px 5px 0px;
margin-right: -3px;
color: #5a311b;
background-color: transparent;
background-image: url();
background-repeat: no-repeat;
background-position: left center;
}

#lj_controlstrip a {
color: #5a311b;
}

#lj_controlstrip a:hover {
color: #8e6b42;
}

#lj_controlstrip_statustext {
color: #5a311b;
}

.ljuser img[src*="userinfo.gif"] {
background: transparent url(http://i46.tinypic.com/w89xft.png) no-repeat center left !important;
padding: 18px 4px 0 0px !important;
margin-right: -8px !important;
}

.ljuser img[src*="community.gif"] {
background: transparent url(http://i46.tinypic.com/w89xft.png) no-repeat center left !important;
padding: 18px 4px 0 0px !important;
margin-right: -8px !important;
}

/*----------------CURRENTS - MOOD, MUSIC, TAGS----------------*/

.currents, .currentmood, .currentlocation, .currentmusic {
font-family: "Verdana", sans-serif;
font-size: 11px;
}

.currents {
background-color: transparent;
}

.currents strong{
display: none;
font-weight: normal;
font-size: 8pt;
color: #555;
text-transform: lowercase;
}

.currentlocation {
padding-left: 14px;
padding-top: 8px;
font-size: 8pt;
color: #333;
background: url('http://i46.tinypic.com/xqjfgy.png') 0px 11px no-repeat;
}

.currentmood {
padding-left: 14px;
padding-bottom: 2px;
font-size: 8pt;
color: #333;
background: url('http://i47.tinypic.com/33wkxeq.png') 0px 7px no-repeat;
}

.currentmusic {
padding-left: 14px;
padding-top: 2px;
font-size: 8pt;
color: #333;
background: url('http://i49.tinypic.com/2i8by20.png') 0px 5px no-repeat;
}

.ljtags {
margin-top: 18px;
padding-left: 19px;
padding-bottom: 5px;
padding-top: 2px;
text-transform: lowercase;
font-size: 8pt;
color: #5a311b;
background: url('http://i50.tinypic.com/ffbpro.png') 0px 6px no-repeat;
}

.ljtags a, .ljtags a:link, .ljtags a:visited {
color: #5a311b;
font-size: 11px;
text-transform: none;
}

H2 {
padding: 8px;
color: #5a311b;
font-size: 14pt;
text-transform: uppercase;
}

/*-----------------BACKGROUND, TINY & METADATA ICONS CREDIT-----------------*/
Metadataicons by community.livejournal.com/graphicsbyjulz
TinyIcons by pinvoke.com
Background image by community.livejournal.com/appletooth

&Dark Version

&Code

/* Cleaned CSS: */

/*-------------------------------------------------------
LAYOUT: #003 "Classic"
by JUSTCYANIDE @ community.livejournal.com/hiddencolours/
***Credit is LOVE***
--------------------------------------------------------*/

/*-----------------BODY-----------------*/

body {
background-color: #0e0e0e;
background: url(http://i50.tinypic.com/243q0iw.png);
color: #f5f4ef;
font-family: "arial", sans-serif;
font-size: 20px;
margin: 10px 0 9px 0;
text-align: justify;
}

a, a:link, a:visited {
color: #767676;
font-weight: bold;
text-decoration: none;
}

a:hover {
color: #898989;
}

p, blockquote {
border: 4px double #595959;
font-size: 11px;
line-height: 14px;
padding: 8px;
text-align: justify;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}

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

/*-----------------VIEWS, TITLE & SUBTITLE-----------------*/

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #898989;
float: center;
font-family: "times new roman", serif;
font-size: 17px;
font-style: italic;
font-weight: bold;
padding: 4px;
text-transform: lowercase;
}

div#header a:hover, div#footer a:hover {
color: #767676;
text-decoration: none;
}

ul.navheader
{
list-style-type: none;
text-align: center;
float: left;
padding: 0px;
margin: 0 0px 0px -180px;
width: 150px;
margin-bottom: -100px;
}

div#header li + li{
margin: 3px;
background-color: #0e0e0e;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
}

div#header li + li + li {
background-color: #0e0e0e;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
}

div#header li + li + li + li{
background-color: #0e0e0e;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
}

div#header li + li + li + li + li {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px; }

ul.navheader li {
font-style: italic;
background-color: #0e0e0e;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
color: #898989;
font-family: "times new roman", serif;
text-transform: lowercase;
font-size: 14px;
float: left important!;
padding: 0 3px 0 -200px;
}

.title, .subtitle{
color: #b1b1b1;
font-family: "times new roman", serif;
font-size: 37px;
font-style: italic;
font-weight: bold;
text-align: right;
padding-right: 30px;
}

.subtitle {
margin-bottom: -70px;
font-size: 20px;
margin-top: -4px;
padding-right: 34px;}

/*-----------------CONTENT-----------------*/

#content {
width: 670px;
margin-left: 210px; margin-right: auto;
background-color: #0e0e0e;
background: url();
padding: 35px;
}

#maincontent {
margin-top: 100px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: #0e0e0e;
background: url();
color: #70030b;
padding: 30px 30 30 10px;
margin-right: auto;
text-align: left;
}

.clear {
height: 15px;
}

.skiplinks {
text-align: center;
}

.separator{
height: 100%;
}

/*----------------HEADER IMAGE----------------*/

/*-----------------SIDEBAR-----------------*/

#sidebar {
float: left;
width: 160px;
background-color: #0e0e0e;
font-size: 11px;
font-family: "times new roman", serif;
color: #898989;
text-transform: lowercase;
text-align: center;
margin: 200px 0px 0px -210px;
padding: 17px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
position: absolute;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #898989;
font-weight: bold;
text-transform: uppercase;
}

div#sidebar a:hover {
color: #898989;
text-decoration: overline;
}

.defaultuserpic {
text-align: center;
margin-top: 25px;
border: 4px double #808080;
margin: 24px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}

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

.sbarbody {

padding: 0px 5px 0px 5px;
}

.sbarbody2 {
padding: 0 15px 0 15px;
}

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

.sbarcalendar {
background-color: #595959;
font-size: 10px;
color: #b1b1b1;
text-align: center;
}}

.sbarcalendarposts{
display: none;
}

#sidebar_tags {
display: none;
}

#sidebar_summary {
display: none;
}

li.sbaritem {
list-style: none;
font-size: 12px;
color: #faf1de;
}

li.sbartitle {
display: none;
}

.lj-view-tags #sidebar{
display: none;
}

/*-----------------ENTRY-------------*/

.entry {
background: url();
margin: 0px 10px 10px 10px;
padding: 20px;
background-color: #0e0e0e;
color: #898989;
font-family: "times new roman", serif;
font-size: 13px;
text-align: left;
-moz-border-radius: 0 0px 30px 30px;
-webkit-border-radius: 0 0px 30px 30px;
-khtml-border-radius: 0 0px 30px 30px;
}

.entrytext {
padding: 20px;
}

.entry ul li, .entry ol li {
padding-left: 15px;
margin-left: 5px;
}

/*-----------------USERPICS & FriendsUSERPICS------------*/

.userpic {
position: relative;
float: right;
margin: 0px 45px 0px 10px;
margin-bottom: 5px;
padding: 2px;
margin-top: 160px;
border: 4px double #595959;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
}

.userpicfriends {
position: relative;
float: right;
margin: 0px 45px 0px 10px;
margin-bottom: 5px;
padding: 2px;
margin-top: 160px;
border: 4px double #595959;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
background-color: #1e1e1e!important;
}

.userpicfriends font {
color: #898989;
text-transform: uppercase;
text-align: center;
background-color: #1e1e1e !important;
}

/* delete this to make the userpic 100x100*/
.userpic img, .userpicfriends img {
background-color: transparent !important;
width: 90px;
height: 90px;
}

/*-----------------DATE & SUBJECT-----------------*/
.date {
line-height: 112px;
font-size: 1px;
color: #1f1f1f;
visibility: transparent;
background: url(http://i45.tinypic.com/315diqg.png);
}

.datesubject {
margin: 0px 10px 0px 10px; }

.subject {
text-align: right;
background-color: #0e0e0e;
color: #767676;
font-style: italic;
font-size: 18pt;
text-transform: lowercase;
}

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

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

/*-----------------COMMENT & REPLY-----------------*/

.comments {
text-align: right;
font-family: "times new roman", serif;
margin: 9px 15 9px -10px;
padding-right: 15px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #767676;
font-size: 13px;
padding: 15px -5px 15px 5px;
text-transform: lowercase;
}

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

.datesubjectcomment {
text-transform: uppercase;
font-size: 10px;
background-color: transparent;
padding: 5px;
margin-top: 20px;
}

.userpiccomment {
float: left;
margin-right: 10px;
margin-bottom: 5px;
padding: 2px;
background-color: #1e1e1e !important;
border: 4px double #595959;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
}

.skiplinks {
color: #b1b1b1;
}

.box {
border-style: solid;
color: #b1b1b1;
border-width: 1px 0px 0px 0px;
border-color: #999999;
padding: 10px;
clear: left;
}

input, textarea {
background-color: #0e0e0e;
color: #898989;
}

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

.reply {
background: url();
margin: 0px 10px 10px 10px;
padding: 20px;
background-color: #0e0e0e;
color: #898989;
font-family: "times new roman", serif;
font-size: 13px;
text-align: left;
-moz-border-radius: 0 0px 30px 30px;
-webkit-border-radius: 0 0px 30px 30px;
-khtml-border-radius: 0 0px 30px 30px;
}

.replytosubject {
font-weight: bold;
}

.commentreply {

position: relative;
margin: 10px;
font-size: 14px;
font-family: "times new roman", serif;
color: #898989;
}

.commentbox {
background: url();
margin: 0px 10px 10px 10px;
padding: 20px;
background-color: #0e0e0e;
color: #898989;
font-family: "times new roman", serif;
font-size: 13px;
text-align: left;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-khtml-border-radius: 30px;
}

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

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

.commentboxpartial {
border-color: #898989;;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #;
}

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

/*-----------------CALENDAR/ARCHIVE PAGE-----------------*/

ul.year {
text-align: center;
padding-bottom: 40px;
color: #898989;
font-family: "times new roman", serif;
font-size: 25px;
font-style: italic;
font-weight: bold;
}

ul.year li {
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yearday {
background: url();
margin: 0px 10px 10px 10px;
padding: 20px;
background-color: #0e0e0e;
color: #898989;
font-family: "times new roman", serif;
font-size: 13px;
text-align: left;
-moz-border-radius: 0 0px 30px 30px;
-webkit-border-radius: 0 0px 30px 30px;
-khtml-border-radius: 0 0px 30px 30px;
}

td.yearmonth {
font-size: 20px;
color: #898989;
font-family: "times new roman", serif;
font-style: italic;
font-style: italic;
font-weight: bold;
}

td.yearday {
font-size: 20px;
color: #898989;
font-family: "times new roman", serif;
font-style: italic;
font-style: italic;
font-weight: bold;
}

td.yeardate {
font-size: 13px;
color: #d0d0d0;
font-family: "times new roman", serif;
font-style: italic;
font-style: italic;
font-weight: bold;
}

.yeardate a {
font-size: 15px;
margin-left: 50px;
margin-top: 25px;
font-style: normal;
border: solid;
color: #d0d0d0;
border: 4px double #b1b1b1;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
background-color: #1e1e1e;
}

.yeardate a:hover {
color: #d0d0d0;
}

/*-----------------FOOTER-----------------*/

#footer {
width: 100%;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
background-color: #;
color: transparent;
z-index: 100;
clear: both;
}

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

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

.clearfoot {
clear: both;
}

/*----------------LJ USER & COMM ICON ----------------*/

.ljuser img {
height: 0;
padding: 10px 00px 5px 0px;
margin-right: -3px;
background-image: url(http://i46.tinypic.com/34jaamp.png);
background-repeat: no-repeat;
background-position: left center;
}

/*----------------LJ CONTROL STRIP---------------*/

#lj_controlstrip {
height: 0;
padding: 10px 00px 5px 0px;
margin-right: -3px;
color: #898989;
background-color: transparent;
background-image: url();
background-repeat: no-repeat;
background-position: left center;
}

#lj_controlstrip a {
color: #898989;
}

#lj_controlstrip a:hover {
color: #767676;
}

#lj_controlstrip_statustext {
color: #898989;
}

.ljuser img[src*="userinfo.gif"] {
background: transparent url(http://i46.tinypic.com/34jaamp.png) no-repeat center left !important;
padding: 18px 4px 0 0px !important;
margin-right: -8px !important;
}

.ljuser img[src*="community.gif"] {
background: transparent url(http://i46.tinypic.com/34jaamp.png) no-repeat center left !important;
padding: 18px 4px 0 0px !important;
margin-right: -8px !important;
}

/*----------------CURRENTS - MOOD, MUSIC, TAGS----------------*/

.currents, .currentmood, .currentlocation, .currentmusic {
font-family: "Verdana", sans-serif;
font-size: 11px;
}

.currents {
background-color: transparent;
}

.currents strong{
display: none;
font-weight: normal;
font-size: 8pt;
color: #555;
text-transform: lowercase;
}

.currentlocation {
padding-left: 14px;
padding-top: 8px;
font-size: 8pt;
color: #333;
background: url('http://i46.tinypic.com/xqjfgy.png') 0px 11px no-repeat;
}

.currentmood {
padding-left: 14px;
padding-bottom: 2px;
font-size: 8pt;
color: #333;
background: url('http://i47.tinypic.com/33wkxeq.png') 0px 7px no-repeat;
}

.currentmusic {
padding-left: 14px;
padding-top: 2px;
font-size: 8pt;
color: #333;
background: url('http://i49.tinypic.com/2i8by20.png') 0px 5px no-repeat;
}

.ljtags {
margin-top: 18px;
padding-left: 19px;
padding-bottom: 5px;
padding-top: 2px;
text-transform: lowercase;
font-size: 8pt;
color: #898989;
background: url('http://i50.tinypic.com/ffbpro.png') 0px 6px no-repeat;
}

.ljtags a, .ljtags a:link, .ljtags a:visited {
color: #898989;
font-size: 11px;
text-transform: none;
}

H2 {
padding: 8px;
color: #898989;
font-size: 14pt;
text-transform: uppercase;
}

/*-----------------BACKGROUND, TINY & METADATA ICONS CREDIT-----------------*/
Metadataicons by community.livejournal.com/graphicsbyjulz
TinyIcons by pinvoke.com
Background image by community.livejournal.com/appletooth
(changes to match the dark theme, in tiny icons & backgrounds by me)

&Instructions (1,2,3!)
#01 Go to Select Journal Stlyle, choose any Flexible Squares Layout and Apply Theme.
#02 Go to Customize Your Theme and then go to the Custom CSS section. Select NO in all three options and then paste the code in the Custom Stylesheet Box. Save changes.
#03 Credit justcyanide or hiddencolours. ENJOY &hearts

&Notes
~The layout was tested in Firefox, but the round corners should also work with Opera and Safari (please, if you are using one of those browsers and everything shows fine let me know in a comment :)
They won't show up in Explorer.

~If you prefer the userpics being 100x100px rather than 90x90px, delete this:
/* delete this to make the userpic 100x100*/
.userpic img, .userpicfriends img {
background-color: transparent !important;
width: 90px;
height: 90px;
}

~I think this looks better without a header, but if you want to add one just paste this at the end of the code
.headerimage {
position: relative;
align: center;
width: YOUR HEADER WIDTHpx;
height: YOUR HEADER HEIGHTpx;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
background-image: url(YOUR HEADER URL);
background-position: center;
background-repeat: no-repeat;
}

~Background image by appletooth, metadata icons by graphicsbyjulz & tiny icons by Pinvoke. (changes to match the dark version, by me)

~Editing is fine as long as I'm credited for the original layout<3

Hope you like it <3
Watch hiddencolours for updates :)
Comments are &hearts ~

Kam~

edit: Thanks for the comments <333

style: flexible squares