layout 062: VelvetSteelMine (flexible squares)

I'm in love with this one.
Hope you like it!

/*-- 062: VelvetSteelMine - (flexible squares) --*/
/*-- stylesheet by ravenclawbest @ visualwit for LJ --*/
/*-- feel free to edit but please don't remove this header --*/

/*-- main --*/

BODY { 
		background-color: #949494;
		color: #555555; 
		text-align: left;
		font-size: 11px; 
		margin: auto; 
		font-family: helvetica, arial, sans-serif;
		}

#content {
		width: 100%;
		margin: auto;
		background-image: url('http://i45.tinypic.com/2yytkk8.png'); 
		}

#maincontent {
		width: 65%;
		margin: auto;
		}

.subcontent {
		background-color: #A8A8A8;
		min-height: 120px;
		padding: 5px;
		}

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

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

a:hover {
		color: #303030;
		}

b, strong {
		color: #303030;
		}

.ljuser a b { 
		color: #783060;
		text-decoration: none;
		}

code, kbd, pre, tt{
		font-family: courier new, sans-serif;
		}

input, textarea {
		background-image: url('');  
		background-color: #D9D9D9;
		color: #303030;
		border: 1px solid #303030;
		}

::-moz-selection { 
		background: #303030; 
		color: #D9D9D9; 
		}

/*-- navigation --*/

#header, #footer {
		background-color: #603048;
		background-image: url('http://i46.tinypic.com/2zhgpk4.png'); 
		font-size: 20px;
		font-family: trebuchet ms, sans-serif;
		float: center; 
		margin: 0px 0px 20px 0px;
		padding: 5px;
		padding-bottom: 0px;
		color: #D9D9D9; 
		text-align: center; 
		text-transform: lowercase;
		border-bottom: 15px solid #303030;
		}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited, div#header li.view {
		color: #303030;
		}

div#header a:hover {
		color: #783060;
		}

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

ul.navheader li, ul.navfooter li{
		margin: 0px; 
		list-style-type: none; 
		padding: 5px;
		display: inline;
		}

ul.navfooter li{
		font-size: 17px;
		}
 
		div#footer li.viewing { 
		display: none;
		}

/*-- title --*/

.title {
		display:  ;
		color: #D9D9D9;
		text-transform: uppercase;
		font-size: 70px; 
		padding: 5px;
		padding-right: 0px;
		padding-left: 0px;
		}

/*-- subtitle --*/

.subtitle {
		display: none;
		}

/*-- entries --*/

.entry {
		color: #555555;
		text-align: justify;
		min-height: 100px;
		}

.entry_text { 
		padding: 5px;
		}

.entry a {
		font-weight: normal;
		}

.entry img {
		max-width: 650px;
		}

.entry ul li {
		margin: 0px;
		padding: 0px;
		list-style: square;
		list-style-position: inside;
		}

.entry ol li {
		margin: 0px;
		padding: 0px;
		list-style-position: inside;
		list-style: lower-roman;
		}

.datesubject {
		min-height: 30px;
		border: 0px solid #eaeaea;
		font-family: trebuchet ms, sans-serif;
		}

.date {
		display: none;
		}

.subject {
		padding: 0px 10px 0px 10px;
		width: 80%;
		font-size: 30px;
		color: #603048;
		text-transform: lowercase;
		border-left: 10px solid #603048;
		}

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

div.subject a:hover {
		color: #603048;
		}

blockquote {
		border: 1px solid #603048;
		border-left: 10px solid #603048;
		border-right: 10px solid #603048;
		padding: 8px; 
		margin-left: 10%; 
		width: 70%; 
		text-align: justify;
		}

blockquote:hover {
		background-color: #A8A8A8;
		}

.separator {
		height: 20px;
		background-color: transparent;
		}

/*-- currents --*/

.currents {
		text-transform: lowercase;
		padding: 0px 20px 0px 20px; 
		}

.currents strong {
		display: ;
		color: #303030;
		font-weight: normal;
		}

.currents a {
		color: #783060;
		text-decoration: none;
		font-weight: normal;
		}

.currentlocation, .currentmood, .currentmusic, .currentgroup {
		text-align: left;
		color: #783060;
		}
				
		.ljtags { 
		color: #303030;
		text-align: left;
		margin-top: 10px; 
		text-transform: lowercase;
		text-decoration: none;
		}

.ljtags a {
 		color: #783060;
		text-decoration: none;
		font-weight: normal;
		}

/*-- comments --*/

.comments {
		border-right: 10px solid #603048;
		color: #303030;
		text-align: right;
		padding: 5px; 
		text-transform: lowercase;
		text-decoration: none;
		font-family: trebuchet ms, sans-serif;
		}

div.comments a, div.comments a:link, div.comments a:visited {
		color: #303030;
		font-size: 18px;
		text-transform: lowercase;
		text-decoration: none;
		}

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

#qrform table { 
		border: 0px !important;
		}

/*-- sidebar --*/

#sidebar {
		display: none;
		background-color: #603048;
		float: center;
		min-height: 90px;
		font-size: 11px; 
		color: #D9D9D9;
		list-style: none; 
		letter-spacing: .01em; 
		text-align: justify;
		padding: 10px;
		}

#sidebar a, #sidebar a:link, #sidebar a:visited {  
		color: #D9D9D9; 
		text-decoration: none;
		border: 0px;
		}

#sidebar a:hover {
		color: #303030;
		}

.defaultuserpic {
		display: none;
		}

.sbarheader {
		font-size: 15px; 
 		color: #783060;
		padding: 0px 0px 0px 0px;
 		margin: 0px 0px 0px 0px;
		}

.sbarbody { 
		padding: 5px;
		text-align: center;
		}

.sbarbody2 { 
 		color: #303030;
		}

table.calendar {
		display: none;
		margin-left: auto;
		margin-right: auto;
		}

.sbarcalendar, .sbarcalendarposts {
		display: none;
		color: #783060;
		padding: 3px;
		text-align: center;
		background-color: #f7f7f7;
		border: 1px solid #f7f7f7;
		}

.sbarcalendar:hover, .sbarcalendarposts:hover {
		color: #ededed;
		}

.sbarlist .sbaritem { 
		margin-right: 5px; 
		padding: 3px; 
		}

ul.sbarlist {
		margin: 2px; 
		margin-bottom: 5px; 
		padding: 0px;
		list-style: none;  
		}

li.sbaritem {
		background-color: #783060;
		margin: 3px;  
		padding: 2px; 
		list-style: none;
		text-align: left;
		font-weight: normal;
		display: inline;
		}

li.sbartitle {
		display: none;
		}

ul.ljtaglist li {
 		color: #783060;
		margin: 0px;
		padding: 5px;
		list-style: none;
		}

/*-- userpics --*/

.userpic, .userpicfriends {
		background-color: transparent !important; 
		margin: 0px 0px 0px 10px;
		text-align: center;
		position: relative;
		float: right;
		z-index: 15;
		}

.userpic img, .userpicfriends img {
		background-color: #603048;
		padding: 10px;
		border: 0px #303030 solid;
		width: 80px;
		height: 80px;
		}

.userpic a, .userpicfriends a{
		color: #303030;
		}

.userpic font, .userpicfriends font {
		color: #303030;
		text-transform: lowercase;
		text-align: center;
		}

.userpicfriends br {
		display: block;
		height: 0;
		}

/*-- tag page --*/

.ljtaglist { 
		background-color: #A8A8A8;
		list-style: square;
		list-style-position: inside;
		color: #303030; 
		width: auto; 
		text-transform: lowercase;
		text-align: left;
		border-top: 15px solid #303030;
		}

.ljtaglist li {
		padding: 6px 3px 6px 20px; 
		color: #303030; 
		}

H2 { 
		text-align: center;
		font-weight: bold;
		font-family: trebuchet ms, sans-serif;
		font-size: 24px; 
		text-transform: uppercase;
		color: #783060; 
		}

ul.ljtaglist {
		padding: 8px 8px 8px 12px;
		text-align: left;
		padding: 25px;
		}

ul.ljtaglist li {
		color: #303030;
		padding: 3px;
		list-style: square;
		list-style-position: inside;
		}

/*-- archive --*/

ul.year {
		text-align: center;
		}

ul.year li {
		color: #303030;
		font-size: 15px;
		display: inline;
		border: 0px solid #783060;
		}

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

td.yeardate {
		color: #783060;
		background-color: #A8A8A8;
		border: 0px solid #eaeaea;
		text-align: center;
		padding: 7px;
		}
		
		td.yeardate a {
		color: #303030;
		border: 0px solid #eaeaea;
		text-align: center;
		font-size: 16px; 
		}

table.yeartable td.yearday {
		background-color: #303030;
		text-align: center;
		text-transform: uppercase;
		border: 0px solid #eaeaea;
		color: #D9D9D9;
		}

td.yearmonth, td.yearmonth a, td.yearmonth a:hover {
		color: #303030;
		}

/*-- comments --*/

.clear {
		display: none;
		}

.skiplinks {
		text-transform: lowercase;
		text-align: center;
		padding: 10px;
		padding-top: 20px;
		color: #303030;
		margin-bottom: 3px;
		border: 0px solid #dfdfdf;
		}

.skiplinks a {
		text-transform: lowercase;
		text-align: center;
		padding: 10px;
		color: #783060;
		margin: 3px;
		}

.datesubjectcomment {
		text-align: right;
		color: #783060;
		padding: 5px;
		margin-bottom: 5px;
		}

.userpiccomment {
		background-color: #783060 !important;
		padding: 10px;
		border: 0px #783060 solid;
		position: relative;
		top: -10px;
		left: 0px;
		margin: 10px 10px 0px -10px;
		z-index: 15;
		float: left;
		width: 70px;
		height: 70px;
		}

.box {
		padding: 0px;
		width: auto;
		clear: center;
		}

textarea.textbox {
		background-color: #D9D9D9;
		color: #303030;
		border: 1px solid #303030;
		font-size: 14px;
		width: 95% !important;
		}

.reply{
		position: relative;
		margin: 5px;
		padding: 5px;
		text-align: left;
		line-height: 125%;
		}

.replytosubject {
		font-weight: bold;
		text-transform: lowercase;
		}

.commentreply {
		position: relative;
		padding: 10px 10px 20px 90px;
		}

.commentbox {
		background-color: #A8A8A8 ;
		padding: 15px;
		margin: 15px 0px 15px 0px;
		border-top: 10px solid #303030;
		}

.commentboxpartial {
		padding: 5px;
		margin: 12px;
		}

.commentinfo {
		margin-top: 10px;
		width: 100%;
		}

/*-- mini icons --*/

.ljuser img {  
		width: 0; 
		height: 0; 
		background: transparent url(http://i50.tinypic.com/de8dpd.png) no-repeat 0 0;  
		padding: 14px 14px 0px 2px !important; 
		vertical-align: baseline !important;
		}

.ljuser img[src*="userinfo.gif"] { 
		background: transparent url(http://i50.tinypic.com/de8dpd.png) no-repeat 0 0 !important;  
		padding: 14px 14px 0px 2px !important; 
		}

.ljuser img[src*="community.gif"] { 
		width: 0;  
		height: 0; 
		background: transparent url(http://i45.tinypic.com/2m67bqw.png) no-repeat scroll 0 0 !important; 
		padding: 14px 15px 0px 2px !important; 
		}

.subject img {
		vertical-align: middle !important;
		}

img[src*="icon_protected.gif"]{
		width: 0;
		height: 0; 
		padding: 22px 22px 0px 0px !important; 
		background: transparent url(http://i46.tinypic.com/1yqsjp.png) no-repeat scroll 0 0; 
		}

img[src*="icon_private.gif"]{ 
		width: 0;  
		height: 0; 
		padding: 22px 22px 0px 0px !important; 
		background: transparent url(http://i46.tinypic.com/1yqsjp.png) no-repeat scroll 0 0; 
		}

img[src*="icon_groups.gif"]{ 
		width: 0;  
		height: 0; 
		padding: 22px 22px 0px 0px !important; 
		background: transparent url(http://i46.tinypic.com/1yqsjp.png) no-repeat scroll 0 0; 
		}

img[src*="btn_del.gif"] {
		height: 0px;
		width: 0px;
		padding: 0px 0px 14px 14px !important;
		background: url(http://i47.tinypic.com/1zo82l4.png) no-repeat scroll 0 0; 
		}

img[src*="btn_scr.gif"] {
		height: 0px;
		width: 0px;
		padding: 0px 0px 15px 15px !important;
		background: url(http://i46.tinypic.com/2mfm6g6.png) no-repeat scroll 0 0;
		}

img[src*="btn_unscr.gif"] { 
		height: 0px;
		width: 0px;
		padding: 0px 0px 15px 15px !important;
		background: url(http://i48.tinypic.com/11kxekw.png) no-repeat scroll 0 0; 
		}

img[src*="btn_freeze.gif"] {
		height: 0px;
		width: 0px;
		padding: 0px 0px 15px 15px !important;
		background: url(http://i48.tinypic.com/judbhu.png) no-repeat scroll 0 0;
		}

img[src*="btn_unfreeze.gif"] {
		height: 0px; 
		width: 0px; 
		padding: 0px 0px 15px 15px !important;
		background: url(http://i50.tinypic.com/35bv7nt.png) no-repeat scroll 0 0;
		}

img[src*="btn_track.gif"] { 
		height: 0px;
		width: 0px; 
		padding: 0px 0px 15px 14px !important; 
		background: url(http://i47.tinypic.com/oksjcw.png) no-repeat scroll 0 0;
		}

img[src*="btn_tracking.gif"] { 
		height: 0px; 
		width: 0px; 
		padding: 0px 0px 15px 14px !important; 
		background: url(http://i45.tinypic.com/igvi52.png) no-repeat scroll 0 0; 
		}

img[src*="btn_tracking_thread.gif"] {
		height: 0px;
		width: 0px;
		padding: 0px 0px 16px 16px !important; 
		background: url(http://i39.tinypic.com/71pcmf.png) no-repeat scroll 0 0; 
		}

img[src*="anonymous.gif"] { 
		height: 0px; 
		width: 0px; padding: 0px 0px 16px 16px !important; 
		background: url(http://i40.tinypic.com/2ngfymo.png) no-repeat scroll 0 0; 
		}

img[src*="openid-profile.gif"] { 
		height: 0px;
		width: 0px; 
		padding: 0px 0px 16px 16px !important; 
		background: url(http://i44.tinypic.com/35b5evp.png) no-repeat scroll 0 0; 
		}

.box img[src*="userinfo.gif"] { 
		height: 0px;
		width: 0px;
		padding: 0px 0px 16px 16px !important; 
		background: url(http://i40.tinypic.com/33c56o1.png) no-repeat scroll 0 0; 
		}

img[src*="talk/none.gif"] { 
		height: 0px; 
		width: 0px; 
		padding: 0px 0px 10px 10px !important; 
		background: url(http://i39.tinypic.com/2ry4o4k.png) no-repeat scroll 0 0; 
		}

img[src*="help.gif"] { 
		height: 0px;
		width: 0px;
		padding: 0px 0px 16px 16px !important; 
		background: url(http://i44.tinypic.com/zwkxvc.png) no-repeat scroll 0 0;
		}

img[src*="pencil.gif"] { 
		height: 0px; 
		width: 0px; 
		padding: 0px 0px 16px 16px !important; 
		background: url(http://i40.tinypic.com/2zibpg8.png) no-repeat scroll 0 0; 
		}

/*------- contextual pop-up -------*/

div.ContextualPopup {
		position: relative; 
		margin: 10px 0 0 10px;
 		text-align: left; 
		}

div.ContextualPopup div.Inner {
		background: transparent !important;		
		color: #783060 !important;
		border: 0px;
		padding: 10px;
		font-weight: lighter; 
		width: 280px;
		}

div.ContextualPopup .Userpic {
		margin: 5px 55px 0 0px;
		padding: 5px;
		background-color: #783060;
		border: 0px solid #783060;
		}

div.ContextualPopup .Content {
		padding: 5px;
		border: 1px solid #783060;
		font-weight: lighter; 
		background-color: #A8A8A8;

}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner a:link {
		text-decoration: none !important;
		color: #303030 !important;
		font-weight: lighter; 
		}

div.ContextualPopup .Relation {
		color: #783060;
		}

/*-- navigation bar --*/

table#lj_controlstrip td {
		background-color: #A8A8A8;
		background-image: url(''); 
		border: solid 0px #D9D9D9;
		color: #D9D9D9;
		}

#lj_controlstrip input {
		background-color: transparent;
		color: #303030;
		font-weight: lighter;
		border: 1px solid #603048;
		}

#lj_controlstrip a  {
		color: #303030;
		font-weight: lighter;
		}

#lj_controlstrip_statustext {
		color: #303030; 
		font-weight: lighter;
		}

#lj_controlstrip_userpic {
		display:none;
		}

/*-- paste additional codes below this point --*/

CREDIT:
★- Comments are ♥
★- Credit & watch

visualwit for updates

NOTES:
★- Be sure to keep the header text (recent, archive, etc) short (about one word).
★- My FAQ post. Refer to this for directions on adding headers/banners and such.

DIRECTIONS:
★- Select Journal Style
★- Select any Flexible Squares layout except 'Circles'
★- Go to Custom CSS and set all drop down boxes to No
★- Paste code in 'Custom Stylesheet' text box

ADDITIONAL DIRECTIONS:
★- Ads should be VERTICAL as there is no sidebar.

FAQ:
★- Can I tweak the code (color, font, etc)? Certainly, just don't remove the header at the beginning of the css code. Please note that I'll be unavailable to help with any unnecessary modifications (turning a sidebar into a topbar, changing fonts, etc).
★- I have a question about the layout, where should I post my questions should I have any problems with it? At the layout post is fine, though you may also post general layout questions at the FAQ post.

OTHER RESOURCES:
★- s2flexisquares is the main tutorial/how to site for flexible squares

Follow us:

Applications

COMPANY

PRODUCTS

COMMUNITY

CHOOSE LANGUAGE