Layout - Flexi Squares - "006 Boxed Remix": complications

complications_g

Layout - Flexi Squares - "006 Boxed Remix"

Sep 26, 2008 15:03

I promise to post a real entry later, an actual update! :)

This is a remix of my current layout, adjusted to work with free accounts and comes in two colours; pink and blue.

-S2 Flexible Squares
-Works for paid, basic and plus accounts
-Tested in Firefox, Opera, IE 7, Google Chrome and Safari, high res best
-Includes customised comment pages, navbar, contextual pop-up and tiny icons

image preview | live preview

Uploading Instructions
-Upload the images below to an image host, then copy and paste the code below into a text editor and replace the YOURURLs with your urls. ;)
-On the Change Journal Theme page, type flexible squares in the search box and select any theme except Circular or Circular Brown.
-Choose either sidebar on right or sidebar on left.
-In the Customise CSS section of the Customise Journal Style page, copy and paste your edited CSS into the custom stylesheet box. Select 'No' from all the dropdown boxes and hit save changes.

Plus Accounts
-If you have a plus account, go to the style section and expand all the colours. Find the 'background colour for outer tables' and 'border colour of the content and header/footer boxes' and change the hex codes to #dddddd. This matches the box surrounding the lj ads to the layout.
-On the Change Journal Theme page, set the lj ads to display horizontally.

/*---------------------------------------------------------------------
006 boxed remix pink
made by complications_g.livejournal.com
please don't steal
tiny icons by: passing_girl.livejournal.com, hello-love.net, community.livejournal.com/graphicsbyjulz
------------------------------------------------------------------------*/

/*---------------------------------------- MAIN ----------------------------------------*/

body {
background-color: #dddddd;
text-align: center;
color: #6f6f6f;
font: 10pt corbel, verdana, tahoma, sans-serif;
margin: 20px 0 20px 0;
}

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

a:hover {
color: #ff8d31;
border-bottom: 1px dashed #dc2f3a;
}

.ljuser a, .ljuser a:link {
color: #ff8d31;
text-decoration: none;
font-weight: bold;
}

.ljuser a:hover {
color: #ff5252;
border: 0px;
}

blockquote {
padding: 10px;
border: 1px dashed #dc2f3a;
background: #ffffff;
text-align: justify;
}

p, td {
font-size: 10pt;
}

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

textarea, select {
font: 9pt corbel, verdana, arial, tahoma, sans-serif;
background-color: #ffffff;
color: #6f6f6f;
text-transform: none;
border: 1px solid #bababa;
padding: 2px 0px 2px 0px;
margin: 2px 0px 2px 0px;
}

input {
font-family: corbel, verdana, arial, tahoma, sans-serif;
background-color: #ffffff;
color: #6f6f6f !important;
text-transform: lowercase;
border: 2px solid #bababa;
padding: 2px 0px 2px 0px;
margin: 2px 0px 2px 0px;
}

::-moz-selection {
background: #ff8d31;
color: #dddddd;
}

::selection {
background: #ff8d31;
color: #dddddd;
}

/*---------------------------------------- GENERAL PAGE ----------------------------------------*/

#content {
width: 900px;
margin: 0 auto 0 auto;
background-color: #dddddd;
padding: 15px;
}

#maincontent {
margin-top: 30px;
font: 10pt corbel, verdana, tahoma, sans-serif;
background-color: #dddddd;
color: #6f6f6f;
text-align: left;
}

#sidebar {
display: none;
}

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

#header {
padding: 20px 0px 20px 0px;
margin: 0px;
text-align: center;
font: bold 10pt corbel, verdana, tahoma, sans-serif;
background-color: #ffffff;
text-transform: uppercase;
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #ff5252;
}

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

.title, .subtitle {
display: none;
}

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

ul.navheader li {
display: inline;
padding: 0 10px 0 10px;
}

div#header li.view {
padding-left: 8px;
color: #ff8d31;
background: url(YOURURL/arw.gif) center left no-repeat;
}

/*---------------------------------------- ENTRIES ----------------------------------------*/

.subcontent {
background-color: #ffffff;
padding: 20px 40px 5px 30px;
margin-top: 30px;
}

.entry {
margin: 5px 5px 5px 146px;
padding: 5px 5px 0px 0px;
color: #6f6f6f;
font: 10pt corbel, verdana, tahoma, sans-serif;
text-align: justify;
}

.entry_text {
min-height: 100px;
}

.date {
color: #dc2f3a;
font: 7pt corbel, verdana, tahoma, sans-serif;
padding: 10px 0px 0px 0px;
margin-left: 131px;
text-transform: lowercase;
}

.subject {
padding: 0px 4px 6px 0px;
margin-left: 131px;
color: #6f6f6f;
font: bold 12pt corbel, verdana, tahoma, sans-serif;
}

.datesubject {
background-color: #ffffff;
padding: 0px 2px 0px 15px;
margin: 0px 8px 0px 0px;
border-bottom: 1px dashed #dc2f3a;
}

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

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

.entry ul li {
list-style: none;
list-style-image: url(YOURURL/arw.gif);
}

.entry ol li {
list-style-type: decimal-leading-zero;
}

.separator {
height: 35px;
background-color: #dc2f3a;
}

/*---------------------------------------- USERPICS ----------------------------------------*/

.userpic {
position: relative;
float: left;
background-color: #ffffff;
padding: 10px;
margin: 15px 25px 15px 0px;
border: 1px dashed #dc2f3a;
z-index: 15;
}

.userpicfriends {
position: relative;
float: left;
padding: 10px 10px 0px 10px;
border: 1px dashed #dc2f3a;
background-color: #ffffff !important;
margin: 15px 25px 15px 0px;
text-align: center;
font-size: 8pt;
z-index: 15;
}

.userpicfriends a font {
color: #ff5252;
}

/*---------------------------------------- CURRENTS & TAGS ----------------------------------------*/

.currents {
font: 10pt corbel, verdana, tahoma, sans-serif;
padding: 0px;
margin: 0px;
text-align: left;
background-color: transparent;
}

.currents strong {
text-transform: uppercase;
font-size: 9pt;
color: #ff8d31;
padding-left: 8px;
background: url(YOURURL/arw.gif) center left no-repeat;
}

.ljtags {
margin: 20px 0px 0px 0px;
padding: 0px 0px 0px 8px;
text-align: left;
text-transform: uppercase;
font: bold 9pt corbel, verdana, tahoma, sans-serif;
color: #ff8d31;
background: url(YOURURL/arw.gif) center left no-repeat;
}

.ljtags a {
font-size: 10pt;
text-transform: none;
}

/*---------------------------------------- COMMENTS ----------------------------------------*/

.comments {
color: #ffffff;
font: 10pt corbel, verdana, tahoma, sans-serif;
text-align: right;
text-transform: lowercase;
padding: 0px;
position: relative;
margin: 15px 0px 10px 0px;
}

.comments a {
padding-left: 8px;
background: url(YOURURL/arw.gif) center left no-repeat;
}

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

div.comments a:hover {
color: #ff8d31;
}

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

#footer {
width: 100%;
text-align: center;
font: 10pt corbel, verdana, tahoma, sans-serif;
background-color: #ffffff;
color: #6f6f6f;
z-index: 100;
clear: both;
margin-top: 15px;
}

li.viewing {
font-weight: bold;
}

ul.navfooter {
background-color: #ffffff;
padding: 10px;
margin: 0px;
}

ul.navfooter li {
list-style: none;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

/*---------------------------------------- ARCHIVE ----------------------------------------*/

ul.year {
text-align: center;
padding: 20px 0px 20px 0px;
font-size: 20px;
font-weight: bold;
list-style-type: none;
}

ul.year li {
font-size: 20px;
font-weight: bold;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
width: 900px;
padding: 50px 300px 50px 300px;
}

td.calinactitem, td.calactitem {
padding-top: 4px;
}

table.yeartable td.yearday {
text-align: center;
padding: 5px;
font-weight: bold;
background-color: #dddddd;
}

td.yearmonth {
border-style: none;
padding-bottom: 15px;
font-size: 13px;
}

/*---------------------------------------- COMMENT PAGES----------------------------------------*/

.datesubjectcomment {
background-color: #ffffff;
padding: 0px 0px 10px 0px;
margin-top: 10px;
border-bottom: 1px dashed #dc2f3a;
text-align: left;
color: #6f6f6f;
}

.userpiccomment {
position: relative;
background-color: #ffffff;
top: -30px;
left: 0px;
padding: 10px;
margin: 20px 20px 20px 0px;
z-index: 15;
float: left;
border: 1px dashed #dc2f3a;
}

.box {
width: 900px;
border: 0px;
padding: 0px;
margin: 20px 0px 0px 0px;
clear: left;
}

.box center {
background-color: #ffffff;
padding: 20px 0px 20px 0px;
margin: 20px 0px 20px 0px;
text-transform: uppercase;
}

.box label, .ljcomsel#ljcomsel {
padding-right: 3px;
}

.box table {
margin: 10px 100px 0px 0px;
padding: 5px 5px 10px 5px;
background-color: #ffffff;
border: 0px !important;
}

.box tr, .box td {
text-align: left;
color: #6f6f6f;
font-weight: bold;
}

.box td {
margin-right: 0px;
}

#prop_picture_keyword {
margin-left: 2px;
}

input.textbox {
font: 10pt corbel, verdana, tahoma, sans-serif;
border: 1px solid #bababa;
padding: 2px;
}

textarea.textbox {
font-size: 9pt;
}

#qrform {
margin: 10px 0px 10px 0px;
background-color: #ffffff;
}

#postform {
background-color: #ffffff;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font: 10pt corbel, verdana, tahoma, sans-serif;
line-height: 125%;
background-color: #ffffff;
color: #6f6f6f;
}

.replytosubject {
font-weight: bold;
}

.replytoposter {
margin-top: 20px;
padding-bottom: 5px;
}

.commentreply {
position: relative;
margin: 15px 0px 20px 145px;
font: 10pt corbel, verdana, tahoma, sans-serif;
color: #6f6f6f;
text-align: left;
}

.commentbox {
padding: 25px 25px 15px 25px;
margin: 20px 0px 20px 0px;
background-color: #ffffff;
}

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

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

.commentboxpartial {
border: 1px dashed #dc2f3a;
padding: 15px;
margin: 10px 0px 10px 0px;
background-color: #ffffff;
}

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

.skiplinks {
color: #ffffff;
text-align: center;
text-transform: lowercase;
background-color: #ffffff !important;
padding: 20px 0px 20px 0px;
}

.skiplinks a {
padding-left: 9px;
background: url(YOURURL/arw.gif) center left no-repeat;
}

/*---------------------------------------- TAGS PAGE ----------------------------------------*/

.ljtaglist {
list-style-type: none;
text-align: left;
background-color: #ffffff;
margin: 0px 0px 0px 0px;
padding: 20px 0px 20px 60px;
}

.ljtaglist li {
padding: 2px 0px 2px 0px;
}

H2 {
background-color: #ffffff;
text-align: left;
font-weight: bold;
margin: 30px 0px 0px 0px;
padding: 20px 0px 20px 60px;
}

/*---------------------------------------- MISC ----------------------------------------*/

.clear {
display: none;
}

#talkpostfromoidlo, #talkpostfromanon, #talkpostfromremote, #talkpostfromlj, #spellcheck, #prop_opt_preformatted, #logincheck, #oidlogincheck, #do_spellcheck, .ljcomsel#ljcomsel, input#xc_remember, #postform_input, input#xc_user, input#xc_password {
background-color: #ffffff;
border: 0;
}

div.ContextualPopup {
text-align: left;
color: 6f6f6f;
font-family: corbel, verdana, tahoma, sans-serif;
}

div.ContextualPopup .Content {
font-family: corbel, verdana, tahoma, sans-serif;
padding-right: 4px;
margin-right: 0px;
}

div.ContextualPopup div.Inner {
color: #6f6f6f !important;
border: 1px dashed #ff8d31;
padding: 7px;
}

div.ContextualPopup a img {
border: 5px solid #ff8d31;
}

div.ContextualPopup a img:hover {
border: 5px solid #ff8d31;
}

div.ContextualPopup .Relation {
text-transform: uppercase;
border-bottom: 1px dashed #ff8d31;
color: 6f6f6f;
padding: 0px 0px 5px 0px;
margin: 0px 0px 5px 0px;
}

div.ContextualPopup .OnlineStatus {
padding-top: 5px;
font-weight: bold;
color: #dc2f3a;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
color: #ff5252 !important;
}

div.ContextualPopup div.Inner a:hover {
text-decoration: none !important;
color: #ff8d31 !important;
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(YOURURL/user.gif) !important;
padding: 12px 8px 3px 2px !important;
}

.ljuser:hover a { color: #ff5252; }

.ljuser { background: url(YOURURL/user.gif) -100px -100px no-repeat; }

.ljuser img[src='http://p-stat.livejournal.com/img/userinfo.gif'] {
background: transparent no-repeat
url(YOURURL/user.gif) !important;
}

.ljuser:hover img[src='http://p-stat.livejournal.com/img/userinfo.gif'] {
background-repeat: no-repeat;
background-image: url(YOURURL/userp.gif) !important;
}

.ljuser img[src='http://p-stat.livejournal.com/img/community.gif'] {
background: transparent no-repeat url(YOURURL/comm.gif) !important;
padding: 14px 14px 3px 2px !important;
}

.ljuser:hover img[src='http://p-stat.livejournal.com/img/community.gif'] {
background-repeat: no-repeat;
background-image: url(YOURURL/commp.gif) !important;
}

.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 9px 10px 0;
background: url(YOURURL/stop.gif) no-repeat;
float: right;
margin: 7px 0px 0px 0px;
}

.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 10px 10px 0;
background: url(YOURURL/priv.png) no-repeat;
float: right;
margin: 7px 0px 0px 0px;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_edit.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/edit.png);
padding: 12px 12px 0 0 !important;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_del.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/del.png);
padding: 12px 12px 0 0 !important;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_scr.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/scr.png);
padding: 12px 12px 0 0 !important;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_unscr.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/unsf.png);
padding: 12px 12px 0 0 !important;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_freeze.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/fre.png);
padding: 12px 12px 0 0 !important;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_unfreeze.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/unsf.png);
padding: 12px 12px 0 0 !important;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_track.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/tra.png);
padding: 12px 12px 0 0 !important;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_tracking.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/untr.png);
padding: 12px 12px 0 0 !important;
}

#lj_controlstrip_statustext {
font-family: corbel, verdana, tahoma, sans-serif;
color: #6f6f6f;
}

#lj_controlstrip a {
font-family: corbel, verdana, tahoma, sans-serif;
color: #ff5252;
text-decoration: none;
}

#lj_controlstrip a:hover {
font-family: corbel, verdana, tahoma, sans-serif;
color: #ff8d31;
text-decoration: none;
border-bottom: 1px dashed #dc2f3a;
}

#lj_controlstrip .ljuser a, #lj_controlstrip .ljuser a:link {
color: #ff8d31 !important;
text-decoration: none;
}

#lj_controlstrip .ljuser a:hover {
color: #ff5252 !important;
border: 0px;
}

#lj_controlstrip textarea, #lj_controlstrip select, #lj_controlstrip input, #lj_controlstrip input#xc_user,
#lj_controlstrip input#xc_password {
background-color: #ffffff;
font-family: corbel, verdana, arial, tahoma, sans-serif;
}

#lj_controlstrip select {
border: 2px solid #bababa;
background-color: #ffffff;
font-family: corbel, verdana, arial, tahoma, sans-serif;
}

#lj_controlstrip td, #lj_controlstrip a, #lj_controlstrip input, #lj_controlstrip select, #lj_controlstrip input#xc_user,
#lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, {
font-family: corbel, verdana, arial, tahoma, sans-serif;
}
pink
/*---------------------------------------------------------------------
006 boxed remix blue
made by complications_g.livejournal.com
please don't steal
tiny icons by: passing_girl.livejournal.com, hello-love.net, community.livejournal.com/graphicsbyjulz
------------------------------------------------------------------------*/

/*---------------------------------------- MAIN ----------------------------------------*/

body {
background-color: #dddddd;
text-align: center;
color: #6f6f6f;
font: 10pt corbel, verdana, tahoma, sans-serif;
margin: 20px 0 20px 0;
}

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

a:hover {
color: #4ecbd7;
border-bottom: 1px dashed #567D7C;
}

.ljuser a, .ljuser a:link {
color: #4ecbd7;
text-decoration: none;
font-weight: bold;
}

.ljuser a:hover {
color: #3b96a3;
border: 0px;
}

blockquote {
padding: 10px;
border: 1px dashed #567D7C;
background-color: #ffffff;
text-align: justify;
}

p, td {
font-size: 10pt;
}

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

textarea, select {
font: 9pt corbel, verdana, arial, tahoma, sans-serif;
background-color: #ffffff;
color: #6f6f6f;
text-transform: none;
border: 1px solid #bababa;
padding: 2px 0px 2px 0px;
margin: 2px 0px 2px 0px;
}

input {
font-family: corbel, verdana, arial, tahoma, sans-serif;
background-color: #ffffff;
color: #6f6f6f !important;
text-transform: lowercase;
border: 2px solid #bababa;
padding: 2px 0px 2px 0px;
margin: 2px 0px 2px 0px;
}

::-moz-selection {
background: #4ecbd7;
color: #dddddd;
}

::selection {
background: #4ecbd7;
color: #dddddd;
}

/*---------------------------------------- GENERAL PAGE ----------------------------------------*/

#content {
width: 900px;
margin: 0 auto 0 auto;
background-color: #dddddd;
padding: 15px;
}

#maincontent {
margin-top: 30px;
font: 10pt corbel, verdana, tahoma, sans-serif;
background-color: #dddddd;
color: #6f6f6f;
text-align: left;
}

#sidebar {
display: none;
}

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

#header {
padding: 20px 0px 20px 0px;
margin: 0px 0px 0px 0px;
text-align: center;
font: bold 10pt corbel, verdana, tahoma, sans-serif;
background-color: #ffffff;
text-transform: uppercase;
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #3b96a3;
}

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

.title, .subtitle {
display: none;
}

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

ul.navheader li {
display: inline;
padding: 0 10px 0 10px;
}

div#header li.view {
padding-left: 8px;
color: #4ecbd7;
background: url(YOURURL/arw.gif) center left no-repeat;
}

/*---------------------------------------- ENTRIES ----------------------------------------*/

.subcontent {
background-color: #ffffff;
padding: 20px 40px 5px 30px;
margin-top: 30px;
}

.entry {
margin: 5px 5px 5px 146px;
padding: 5px 5px 0px 0px;
color: #6f6f6f;
font: 10pt corbel, verdana, tahoma, sans-serif;
text-align: justify;
}

.entry_text {
min-height: 100px;
}

.date {
color: #4ecbd7;
font: 7pt corbel, verdana, tahoma, sans-serif;
padding: 10px 0px 0px 0px;
margin-left: 131px;
text-transform: lowercase;
}

.subject {
padding: 0px 4px 6px 0px;
margin-left: 131px;
color: #6f6f6f;
font: bold 12pt corbel, verdana, tahoma, sans-serif;
}

.datesubject {
background-color: #ffffff;
padding: 0px 2px 0px 15px;
margin: 0px 8px 0px 0px;
border-bottom: 1px dashed #567D7C;
}

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

.subject a:hover {
color: #3b96a3;
}

.entry ul li {
list-style: none;
list-style-image: url(YOURURL/arw.gif);
}

.entry ol li {
list-style-type: decimal-leading-zero;
}

.separator {
height: 35px;
background-color: #567D7C;
}

/*---------------------------------------- USERPICS ----------------------------------------*/

.userpic {
position: relative;
float: left;
background-color: #ffffff;
padding: 10px;
margin: 15px 25px 15px 0px;
border: 1px dashed #567D7C;
z-index: 15;
}

.userpicfriends {
position: relative;
float: left;
padding: 10px 10px 0px 10px;
border: 1px dashed #567D7C;
background-color: #ffffff !important;
margin: 15px 25px 15px 0px;
text-align: center;
font-size: 8pt;
z-index: 15;
}

.userpicfriends a font {
color: #3b96a3;
}

/*---------------------------------------- CURRENTS & TAGS ----------------------------------------*/

.currents {
font: 10pt corbel, verdana, tahoma, sans-serif;
padding: 0px;
margin: 0px;
text-align: left;
background-color: transparent;
}

.currents strong {
text-transform: uppercase;
font-size: 9pt;
color: #4ecbd7;
padding-left: 8px;
background: url(YOURURL/arw.gif) center left no-repeat;
}

.ljtags {
margin: 20px 0px 0px 0px;
padding: 0px 0px 0px 8px;
text-align: left;
text-transform: uppercase;
font: bold 9pt corbel, verdana, tahoma, sans-serif;
color: #4ecbd7;
background: url(YOURURL/arw.gif) center left no-repeat;
}

.ljtags a {
font-size: 10pt;
text-transform: none;
}

/*---------------------------------------- COMMENTS ----------------------------------------*/

.comments {
color: #ffffff;
font: 10pt corbel, verdana, tahoma, sans-serif;
text-align: right;
text-transform: lowercase;
padding: 0px;
position: relative;
margin: 15px 0px 10px 0px;
}

.comments a {
padding-left: 8px;
background: url(YOURURL/arw.gif) center left no-repeat;
}

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

div.comments a:hover {
color: #4ecbd7;
}

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

#footer {
width: 100%;
text-align: center;
font: 10pt corbel, verdana, tahoma, sans-serif;
background-color: #ffffff;
color: #6f6f6f;
z-index: 100;
clear: both;
margin-top: 15px;
}

li.viewing {
font-weight: bold;
}

ul.navfooter {
background-color: #ffffff;
padding: 10px;
margin: 0px;
}

ul.navfooter li {
list-style: none;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

/*---------------------------------------- ARCHIVE ----------------------------------------*/

ul.year {
text-align: center;
padding: 20px 0px 20px 0px;
font-size: 20px;
font-weight: bold;
list-style-type: none;
}

ul.year li {
font-size: 20px;
font-weight: bold;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
width: 900px;
padding: 50px 300px 50px 300px;
}

td.calinactitem, td.calactitem {
padding-top: 4px;
}

table.yeartable td.yearday {
text-align: center;
padding: 5px;
font-weight: bold;
background-color: #dddddd;
}

td.yearmonth {
border-style: none;
padding-bottom: 15px;
font-size: 13px;
}

/*---------------------------------------- COMMENT PAGES----------------------------------------*/

.datesubjectcomment {
background-color: #ffffff;
padding: 0px 0px 10px 0px;
margin-top: 10px;
border-bottom: 1px dashed #567D7C;
text-align: left;
color: #6f6f6f;
}

.userpiccomment {
position: relative;
background-color: #ffffff;
top: -30px;
left: 0px;
padding: 10px;
margin: 20px 20px 20px 0px;
z-index: 15;
float: left;
border: 1px dashed #567D7C;
}

.box {
width: 900px;
border: 0px;
padding: 0px;
margin: 20px 0px 0px 0px;
clear: left;
}

.box center {
background-color: #ffffff;
padding: 20px 0px 20px 0px;
margin: 20px 0px 20px 0px;
text-transform: uppercase;
}

.box label, .ljcomsel#ljcomsel {
padding-right: 3px;
}

.box table {
margin: 10px 100px 0px 0px;
padding: 5px 5px 10px 5px;
background-color: #ffffff;
border: 0px !important;
}

.box tr, .box td {
text-align: left;
color: #6f6f6f;
font-weight: bold;
}

.box td {
margin-right: 0px;
}

#prop_picture_keyword {
margin-left: 2px;
}

input.textbox {
font: 10pt corbel, verdana, tahoma, sans-serif;
border: 1px solid #bababa;
padding: 2px;
}

textarea.textbox {
font-size: 9pt;
}

#qrform {
margin: 10px 0px 10px 0px;
background-color: #ffffff;
}

#postform {
background-color: #ffffff;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font: 10pt corbel, verdana, tahoma, sans-serif;
line-height: 125%;
background-color: #ffffff;
color: #6f6f6f;
}

.replytosubject {
font-weight: bold;
}

.replytoposter {
margin-top: 20px;
padding-bottom: 5px;
}

.commentreply {
position: relative;
margin: 15px 0px 20px 145px;
font: 10pt corbel, verdana, tahoma, sans-serif;
color: #6f6f6f;
text-align: left;
}

.commentbox {
padding: 25px 25px 15px 25px;
margin: 20px 0px 20px 0px;
background-color: #ffffff;
}

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

.datesubjectcomment a:hover {
color: #3b96a3;
}

.commentboxpartial {
border: 1px dashed #567D7C;
padding: 15px;
margin: 10px 0px 10px 0px;
background-color: #ffffff;
}

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

.skiplinks {
color: #ffffff;
text-align: center;
text-transform: lowercase;
background-color: #ffffff !important;
padding: 20px 0px 20px 0px;
}

.skiplinks a {
padding-left: 8px;
background: url(YOURURL/arw.gif) center left no-repeat;
}

/*---------------------------------------- TAGS PAGE ----------------------------------------*/

.ljtaglist {
list-style-type: none;
text-align: left;
background-color: #ffffff;
margin: 0px 0px 0px 0px;
padding: 20px 0px 20px 60px;
}

.ljtaglist li {
padding: 2px 0px 2px 0px;
}

H2 {
background-color: #ffffff;
text-align: left;
font-weight: bold;
margin: 30px 0px 0px 0px;
padding: 20px 0px 20px 60px;
}

/*---------------------------------------- MISC ----------------------------------------*/

.clear {
display: none;
}

#talkpostfromoidlo, #talkpostfromanon, #talkpostfromremote, #talkpostfromlj, #spellcheck, #prop_opt_preformatted, #logincheck, #oidlogincheck, #do_spellcheck, .ljcomsel#ljcomsel, input#xc_remember, #postform_input, input#xc_user, input#xc_password {
background-color: #ffffff;
border: 0;
}

div.ContextualPopup {
text-align: left;
color: 6f6f6f;
font-family: corbel, verdana, tahoma, sans-serif;
}

div.ContextualPopup .Content {
font-family: corbel, verdana, tahoma, sans-serif;
padding-right: 4px;
margin-right: 0px;
}

div.ContextualPopup div.Inner {
color: #6f6f6f !important;
border: 1px dashed #4ecbd7;
padding: 7px;
}

div.ContextualPopup a img {
border: 5px solid #4ecbd7;
}

div.ContextualPopup a img:hover {
border: 5px solid #4ecbd7;
}

div.ContextualPopup .Relation {
text-transform: uppercase;
border-bottom: 1px dashed #4ecbd7;
color: 6f6f6f;
padding: 0px 0px 5px 0px;
margin: 0px 0px 5px 0px;
}

div.ContextualPopup .OnlineStatus {
padding-top: 5px;
font-weight: bold;
color: #567D7C;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
color: #3b96a3 !important;
}

div.ContextualPopup div.Inner a:hover {
text-decoration: none !important;
color: #4ecbd7 !important;
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(YOURURL/user.gif) !important;
padding: 12px 8px 3px 2px !important;
}

.ljuser:hover a { color: #3b96a3; }

.ljuser { background: url(YOURURL/user.gif) -100px -100px no-repeat; }

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
background: transparent no-repeat
url(YOURURL/user.gif) !important;
}

.ljuser:hover img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
background-repeat: no-repeat;
background-image: url(YOURURL/usert.gif) !important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
background: transparent no-repeat url(YOURURL/comm.gif) !important;
padding: 14px 14px 3px 2px !important;
}

.ljuser:hover img[src="http://p-stat.livejournal.com/img/community.gif"] {
background-repeat: no-repeat;
background-image: url(YOURURL/commt.gif) !important;
}

.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 9px 10px 0;
background: url(YOURURL/stop.gif) no-repeat;
float: right;
margin: 7px 0px 0px 0px;
}

.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 10px 10px 0;
background: url(YOURURL/priv.png) no-repeat;
float: right;
margin: 7px 0px 0px 0px;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_edit.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/edit.png);
padding: 12px 12px 0 0 !important;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_del.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/del.png);
padding: 12px 12px 0 0 !important;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_scr.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/scr.png);
padding: 12px 12px 0 0 !important;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_unscr.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/unsf.png);
padding: 12px 12px 0 0 !important;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_freeze.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/fre.png);
padding: 12px 12px 0 0 !important;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_unfreeze.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/unsf.png);
padding: 12px 12px 0 0 !important;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_track.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/tra.png);
padding: 12px 12px 0 0 !important;
}

.commentbox img[src="http://p-stat.livejournal.com/img/btn_tracking.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOURURL/untr.png);
padding: 12px 12px 0 0 !important;
}

#lj_controlstrip_statustext {
font-family: corbel, verdana, tahoma, sans-serif;
color: #6f6f6f;
}

#lj_controlstrip a {
font-family: corbel, verdana, tahoma, sans-serif;
color: #3b96a3;
text-decoration: none;
}

#lj_controlstrip a:hover {
font-family: corbel, verdana, tahoma, sans-serif;
color: #4ecbd7;
text-decoration: none;
border-bottom: 1px dashed #567d7c;
}

#lj_controlstrip .ljuser a:link {
color: #4ecbd7 !important;
text-decoration: none;
}

#lj_controlstrip .ljuser a:hover {
color: #3b96a3 !important;
border: 0px;
}

#lj_controlstrip textarea, #lj_controlstrip select, #lj_controlstrip input, #lj_controlstrip input#xc_user,
#lj_controlstrip input#xc_password {
background-color: #ffffff;
font-family: corbel, verdana, arial, tahoma, sans-serif;
}

#lj_controlstrip select {
border: 2px solid #bababa;
background-color: #ffffff;
font-family: corbel, verdana, arial, tahoma, sans-serif;
}

#lj_controlstrip td, #lj_controlstrip a, #lj_controlstrip input, #lj_controlstrip select, #lj_controlstrip input#xc_user,
#lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, {
font-family: corbel, verdana, arial, tahoma, sans-serif;
}
blue | live preview

Images
-Please save these images and upload to your own host.

Credit
-Please credit complications_g somewhere in your journal.
-Images by passing_girl, graphicsbyjulz and hello-love.net.

Or you can download a zip with everything you need to install the layout: pink | blue.

I've tested as much as I can, but if you do see/have any problems, please let me know so I can fix them, if possible.

Feel free to edit whatever you like, as long as you give me credit for the base codes.

:D

layout: flexible squares, layout