s2 flexible squares: #004 "Formal"

S2 Flexible Squares
Tested in Chrome, Firefox, Opera & Safari (see notes regarding Explorer)

&Code

/* Cleaned CSS: */

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

/*-----------------BODY-----------------*/		
	
	body	{
		background-color: #0e0e0e;
		background: url(http://i42.tinypic.com/imqt75.png)repeat;
		font-family: "arial", sans-serif;
		font-size: 20px;
		margin: 10px 0 9px 0;
		text-align: justify;
		}
	
	a, a:link, a:visited {
		color: #2b2b2b;	
		font-weight: bold;
		text-decoration: none;
		}
	
	a:hover {
		color: #898989;
		}
	
	blockquote {
		background-color: #0c0c0c; 
		border-left-width: 10px;
		border-left-style: solid;
		border-left-color: #2b2b2b;
		color: #585858;
		font-size: 11px;
		line-height: 14px; 
                padding: 8px; 
		text-align: justify;
				}
		
	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: #585858;
		text-transform: lowercase;
		font-style: italic;
		font-size: 15px;
		float: left;
		background-color: #040404;
		}

div#header li {
		float: left;
		color: #585858;
		font-style: italic;
		font-family: garamon;
		text-transform: lowercase;
		font-weight: bold;
		margin: 10px;
		font-size: 15px;
		background-color: #040404;
		}
	
	div#header a:hover, div#footer a:hover {
		color: #898989;
		text-decoration: none;
		}	
	
	ul.navheader 
		{	
		text-align: rigth;
			padding: 0px;	
		margin-top: 0px;

}
	
	ul.navheader li  {
	float: center important!;
		display: inline;
		font-size: 15px;		
		color: #0c0c0c;
		visibility: transparent;
		padding: 0 0px 0 0px;
		}

.title {
		color: #b1b1b1;
		font-family: garamon;
		font-size: 37px;
		font-style: italic;
		font-weight: bold;
		text-align: right;
		float: right;
		margin-top: -20px;
		}

.subtitle {
		display: none;		
	        }

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

#content {  	
		width: 650px;
		margin: auto;
		background-color: #00000;
		background: url();
		padding: 35px;
		}

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

.clear {		
		height: 35px;
		}
		
	.skiplinks {
		text-align: center;
		background-color: #040404;
		padding: 10px;
margin: 0px 10px 0px 10px; 
		}
		
	.separator{
		height: 100%;
	}

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

/*-----------------SIDEBAR-----------------*/
	
	#sidebar { 
                margin: 0px 10px 0px 10px;
		padding: 10px; 
		margin-top: 68px;
		background-color: #040404; 
		color: #585858;
		text-align: justify; 
		font-style: italic;
		font-size: 12px;
		border-top-width: 10px;
		border-top-style: solid;
		border-top-color: #0c0c0c;
		}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
		color: #5858;
		font-weight: bold;
 		}
	
	div#sidebar a:hover {
		color: #898989;
		text-decoration: underline;
		}
	
	
	.sbarheader {
		padding: 0px 5px 0px 5px;
		}
	
	.sbarbody {
		padding: 0px 5px 0px 5px;		
		}
	
	.sbarbody2 {
		padding: 0 15px 0 15px;
		}

ul.sbarlist {
		display: inline; 
		text-transform: uppercase; 
		padding-left: 0px;
		margin-left: 20px;
		list-style: none;
		}

.defaultuserpic {
		display: none;
		}

.sbarcalendar {
                display: none;
                }

.sbarcalendarposts{ 
		display: none;
		}

#sidebar_tags 	{
		display: none;
		 }

#sidebar_summary {
		display: none;
		}

li.sbaritem {
		display: inline; 
		padding-left: 15px;
		list-style: none;		
		}

li.sbartitle {
		display: none;
		}

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

.entry	{
		background: url();
		margin: 0px 10px 10px 10px;
		padding: 20px;
		background-color: #040404;
		color: #585858;
		border-bottom-width: 10px;
		border-bottom-style: solid;
		border-bottom-color: #0c0c0c;
		font-family: "times new roman", serif;
		font-size: 13px;
		text-align: left;
				}

.entrytext {
		padding: 20px;
		}

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

}

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

.userpic {
		float: right;
                margin: 17px 18px 5px -5px; 
                border: solid 10px #0c0c0c;
		border-right: solid 1px #0c0c0c;		
			}

.userpicfriends {
		float: right;
                margin: 17px 8px 5px -5px; 
                border: solid 10px #0c0c0c;
		background-color: #040404 !important;
		}

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

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

/*-----------------DATE & SUBJECT-----------------*/
	.date {	
		line-height: 12px;
		font-style: italic;	
		margin-top: 5px;
		margin-bottom: -10px;
		text-align: right;
		border-top-width: 20px;
		border-top-style: solid;
		border-top-color: #040404;
		font-size: 12px;
		color: #2b2b2b;
		background-color: #0c0c0c;
		}
	
	.subject {
		text-align: right; 
		background-color: #0c0c0c;
		color: #676767;
		font-style: italic;
		font-size:  28pt; 
		text-transform: lowercase; 
		font-family: garamond; 
		}

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

.subject a, .subject a:link, .subject a:visited {
		color: #383838;
		}
	
	.subject a:hover {
		color: #767676;
		}

.lj-view-entry .title{
		display:none;
		}

.lj-view-friends .title{
		display:none;
		}

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

.comments {
		text-align: right;
		font-family: "garamon"
		margin: 9px 15 9px -10px;
		padding-right: -5px;
		}

div.comments a, div.comments a:link, div.comments a:visited{
		color: #2b2b2b;
		font-size: 13px;
		font-style: italic;
		padding: 1px -5px 1px 15px;
		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: 0px 13px 5px -5px; 
                 border: solid 8px #0c0c0c;	
		}

.skiplinks {
                color: #b1b1b1;
                }
 
	.box {
		color: #898989;	
		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: #040404;
		color: #585858;
		border-bottom-width: 10px;
		border-bottom-style: solid;
		border-bottom-color: #0c0c0c;
		font-family: "times new roman", serif;
		font-size: 13px;
		text-align: left; 
		}
		
	.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: #040404;
		color: #585858;
		border-bottom-width: 10px;
		border-bottom-style: solid;
		border-bottom-color: #0c0c0c;
		font-family: "times new roman", serif;
		font-size: 13px;
		text-align: left;
		}
			
	.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 {

margin: 0px 0px 0px px;
		padding: 15px;
		color: #898989;
		font-family: garamon;
		font-size: 13px;
		text-align: left;
		
		}
	
	td.yearmonth {
		font-size: 10px;
		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;
		background: url();
		color: #b1b1b1;
		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;
		color: #585858;
					}

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

/*-----------------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: 15px; 
		padding-left: 19px;
		padding-bottom: -25px;
		margin-bottom: -70px;
		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

&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
~I have no idea why, but in Explorer the images doesn't show up and the tittle looks completely different. However, I think the problem could be mine. So if you're using Explorer and everything looks fine please tell me :)

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

~If you want to add a header just paste this where it says "header" :)

~If you prefer the userpics being 100x100px rather than 75x75px, delete this:

~Metadata icons by graphicsbyjulz & tiny icons by Pinvoke.

Hope you like it <3
Watch

hiddencolours for updates :)
Comments are &hearts ~

Kam~

layouts

Follow us:

Applications

COMPANY

PRODUCTS

COMMUNITY

CHOOSE LANGUAGE