Yam (

yam) wrote in

mentahelada,
2008-07-28 03:13:00

Mood: sleepy

015 - Layout 002 [Flexisquares: Vintage 2.0]

As you may know, web-2.0-glossy-buttons are ~~out~~ already vintage, and I like vintage.
So here it is, a new (vintage, kind of shiny) layout:

Live preview | Image preview

Live preview | Image preview

/********************DO NOT REMOVE THIS********************
Layout 002 [Vintage 2.0] by Yam @ Frozen Mint (frozen_mint.livejournal.com)
Style: Flexible Squares
Account level: Basic / Paid / Plus
Tested on: IE (6 and higher), Firefox, Safari and Chrome
************************************************************/

/*****BASICS
************/
body {
	background:#f7cb72;
	font-family:"Trebuchet MS", Verdana, Helvetica, sans-serif;
	color:#808080;
	font-size:100%;
}

a, a:link, a:visited {
	color:#19d0e6;
	text-decoration:none;
	text-transform:none;
}

a:hover {
	color:#f7cb72;
	text-decoration:underline;
}

blockquote {
	background:#f9f9f9 url(http://www.mentahelada.net/lj-layouts/layout002/head-blue.png) top left repeat-x;
	border:1px solid #19d0e6;
	color:#808080;
	text-align:left;
	margin:auto; 
	padding:10px; 
	width:95%;
}

p, td {
	font-size:inherit;
}

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

::-moz-selection {
	background:#f7cb72;
	color: #666;
}

b, strong{
	font-weight:bold;
	color:#19d0e6;}

i, em{
	font-style:italic;}

.ippu {font-size:11px;}

a{outline:none;}

a img{border:0;}
	
/*****LAYOUT
************/
#header {
	font-family:"Lucida Sans", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	background-color:#f9f9f9;
	margin:0; 
	padding:15px 10px; 
	text-align:left; 
	width:auto;
}

#content {
	background:#f9f9f9;
	border:1px solid #cacaca;
	width:850px;
	margin-left:auto;
	margin-right:auto;
	margin-top:30px;
	padding: 0px;
	height:100%;
}

#sidebar {
	background:#f9f9f9;
	font-size:0.6875em/*11px*/;
	float:left;
	margin: 0 0 10px 0;
	padding: 0 15px 5px 15px;
	text-align: left;
	width: 200px;
}

#maincontent {
	background:#f9f9f9;
	margin: 0 0 0 240px;
	font-size:0.75em/*12px*/;
}

#footer {
	font-family:"Lucida Sans", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	background-color:#f9f9f9;
	margin:auto; 
	padding:15px 10px; 
	text-align:left;
}

/*****HEADER
************/
ul.navheader {
	padding:0; 
	margin:0; 
}

ul.navheader li { 
	display:inline; 
	list-style:none; 
	padding:0;
	margin:0; 
}

#header li.view { 
	background:#f9f9f9 url(http://www.mentahelada.net/lj-layouts/layout002/head-orange.png) top left repeat-x;
	border:1px solid #f7cb72;
	color:#808080; 
	font-size:0.75em/*12px*/;
	letter-spacing:0.1em;
	text-transform:uppercase;
	text-decoration:none;
	margin:0; 
	padding:5px 10px;
}

#header a, #header a:link, #header a:visited { 
	background:#f9f9f9 url(http://www.mentahelada.net/lj-layouts/layout002/head-blue.png) top left repeat-x;
	border:1px solid #19d0e6;
	color:#808080;
	font-size:0.75em/*12px*/;
	letter-spacing:0.1em;
	text-transform:uppercase;
	margin:0; 
	padding:5px 10px;
}

#header a:hover { 
	background:#f9f9f9 url(http://www.mentahelada.net/lj-layouts/layout002/head-orange.png) top left repeat-x;
	border:1px solid #f7cb72;
	color:#aaa7a7;
	font-size:0.75em/*12px*/;
	letter-spacing:0.1em;
	text-transform:uppercase;
	text-decoration:none;
	margin:0; 
	padding:5px 10px;
}

.title, .subtitle {
	display:none;
}

/*****SIDEBAR
*************/
div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
	color:#666;
	text-decoration:none;
	text-transform:uppercase;
}

div#sidebar a:hover {
	color:#19d0e6;
	text-decoration:none;
}

.sbarbody {
	padding:0;
	margin:0;
}

.sbarbody2 {
	background-color:#f9f9f9; 
	padding:0;
}

.defaultuserpic {
	display:none;
	margin:auto;
	text-align:center;
}

table.calendar {
	margin:auto;
	width:100%;
}

.sbarcalendar {
	background:#fff;
	border:1px solid #dbdbdb;
	color: #808080;
	font-size:1em/*12px*/;
	padding:1px;
	text-align:center;
}

.sbarcalendarposts {
	background:#cacaca;
	border:1px solid #cacaca;
	font-size:1em/*12px*/;
	padding:1px;
	text-align:center;
}

.sbarcalendarposts a, .sbarcalendarposts a:link, .sbarcalendarposts a:visited{
	color:#fff!important;
}

.sbarcalendarposts a:hover{
	color:#fff;
	text-decoration: underline!important;
}

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

li.sbaritem {
	background:#f9f9f9 url(http://www.mentahelada.net/lj-layouts/layout002/head-gray.png) top left repeat-x;
	border: 1px solid #dbdbdb;
	color:#666;
	text-decoration:none;
	text-transform:none;
	text-align:left;
	padding:5px;
	margin:2px;
}

#sidebar_linklist li.sbaritem a, #sidebar_tags li.sbaritem a{
	display:block;
}

#sidebar_linklist li.sbaritem:hover, #sidebar_tags li.sbaritem:hover{
	display:block;
	background:#f9f9f9;
	border:1px solid #cacaca;
	color:#666;
}

#sidebar_summary li.sbaritem {
	background:#f9f9f9 url(http://www.mentahelada.net/lj-layouts/layout002/head-gray.png) top left repeat-x;
	border: 1px solid #dbdbdb;
	display:block;
	color:#666;
	text-decoration:none;
	text-transform:none;
	text-align:left;
	padding:5px;
	margin:2px;
}

#sidebar_summary li.sbaritem:hover{
	display:block;
	background:#f9f9f9;
	border:1px solid #cacaca;
	color:#666;
}

li.sbartitle {
	list-style:none;
	color:#808080;
	font-size:1.1818em/*13px*/;
	margin:15px 0 0 0;
	padding:0;
	text-align:left;
	text-transform:uppercase;
}

/*ul.ljtaglist li {list-style: none;}
.sbarheader {}*/

/*****FOOTER
************/
ul.navfooter { 
	padding:0; 
	margin:auto; 
}

ul.navfooter li { 
	display:inline; 
	list-style:none; 
	padding:0;
	margin:auto; 
}

#footer li.viewing { 
	background-color:#f9f9f9;
	color:#808080; 
	font-size:0.75em/*12px*/;
	letter-spacing:0.1em;
	text-transform:uppercase;
	text-decoration: none;
	margin:5px; 
	padding:5px;
}

#footer a, #footer a:link, #footer a:visited {
	background-color:#f9f9f9;
	color:#19d0e6;
	font-size:0.75em/*12px*/;
	letter-spacing:0.1em;
	text-transform:uppercase;
	margin:5px; 
	padding:5px;
}

#footer a:hover { 
	background-color:#f9f9f9;
	color:#f7cb72; 
	font-size:0.75em/*12px*/;
	letter-spacing:0.1em;
	text-transform:uppercase;
	text-decoration:underline;
	margin:5px; 
	padding:5px;
}

/*****ENTRY
***********/
.subcontent {
	background:#f9f9f9;
	border-left:1px solid #f0f0f0;
	margin:5px;
	padding:5px;
}

.entry{
	color:#808080;
	margin:0;
	padding:5px;
	text-align:left;
}

.entry ul li {
	background:#f9f9f9 url(http://www.mentahelada.net/lj-layouts/layout002/entry-li-arrow.gif) left no-repeat;
	list-style:none;
	margin-left:10px;
	padding-left:11px;
	color:#808080;
}

.entry ol li {
	list-style:lower-roman;
	margin-left:30px;
	padding-left:0px;
	color:#808080;
}

/*****USERPICS
**************/
.userpic, .userpicfriends {
	background:#fff!important;
	border: 1px solid #dbdbdb;
	font-size:0.7692em/*10px*/;
	text-align:center;
	text-transform:lowercase;
	color:#19d0e6;
	float:right;
	margin:0 15px 15px 15px;
	padding:5px;
	position:relative;
	z-index:15;
}

.userpicfriends font{
	font-size:1em/*10px*/;
	text-align:center;
	text-transform:lowercase;
	color:#808080;
}

.userpic a, .userpic a:link, .userpic a:visited, .userpicfriends a, .userpicfriends a:link, .userpicfriends a:visited, userpicfriends font{
	color:#808080!important;
	text-decoration: none;
	text-transform:lowercase;
}

.userpic a, .userpicfriends a:hover, userpicfriends a:hover font {
	color:#808080!important;
	text-decoration:underline;
	text-transform:lowercase;
}

/*.userpicfriends br {}*/

/*****DATE, SUBJECT, CURRENTS GENERAL, COMMENTS, TAGS
***************************************/
.date{
	border:0px;
	color:#808080;
	font-size:0.9166em/*11px*/;
	text-align:left;
	text-transform:lowercase;
}

.subject {
	color:#f7cb72;
	font-family:"Lucida Sans", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	font-size:1.3333em/*16px*/;
	text-align:left;
	text-transform:uppercase;
	font-style:normal;
	font-weight:bold;
	border-bottom:1px solid #dbdbdb;
}

.subject a, .subject a:link, .subject a:visited {
	color:#f7cb72;
	text-transform:uppercase;
	font-style:normal;
	font-weight:bold;
}

.subject a:hover {
	color:#f7cb72;
	text-decoration:underline;
}

.datesubject {
	background-color:#f9f9f9;
	padding:10px;
}

.ljtags {
	border-left:2px solid #f7cb72;
	padding-left:5px;
	text-align:left;
	margin-top:10px;
	color:#808080;
	font-size:0.9166em/*11px*/;
	font-weight:normal;
}

.currents{
	border-left:2px solid #f7cb72;
	padding-left:5px;
	text-align:left;
	color:#808080;
	font-size:0.9166em/*11px*/;
}

.currents strong, .ljtags strong {
	color:#808080;
	font-weight:normal;
}

.ljtags a, .ljtags a:link, .ljtags a:visited, .currents a, .currents a:link, .currents a:visited {
	color:#19d0e6;
	font-weight:normal;
}

.ljtags a:hover, .currents a:hover {
	color:#f7cb72;
	text-decoration:underline;
}

.comments {
	border-left:2px solid #f7cb72;
	padding-left:5px;
	position: relative;
	background:#f9f9f9;
	color:#f7cb72;
	font-family:"Lucida Sans", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	font-size:1em/*12px*/;
	letter-spacing:0.05em;
	text-align:left;
	text-transform:uppercase;
	font-style:normal;
	font-weight:bold;
	margin-bottom:10px;
}

.comments a, .comments a:link, .comments a:visited {
	color:#19d0e6;
	text-transform:uppercase;
}

.comments a:hover {
	color:#f7cb72;
	text-decoration:underline;
}

/*****TAGS PAGE
**************/
.ljtaglist { 
	width:80%;
	list-style:none;
	color:#808080;
	border-left: 1px solid #f0f0f0; 
}

.ljtaglist li { 
	background:#f9f9f9 url(http://www.mentahelada.net/lj-layouts/layout002/entry-li-arrow.gif) left no-repeat;
	border-bottom: 1px solid #dbdbdb; 
	color: #808080; 
	padding:5px 11px; 
}

h2 { 
	width:80%;
	color:#f7cb72;
	font-family:"Lucida Sans", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	font-size:1.3333em/*16px*/;
	letter-spacing:0.05em;
	text-align:right;
	text-transform:uppercase;
	font-style:normal;
	font-weight:bold;
}

/*****CALENDAR PAGE
*******************/
ul.year{
list-style:none;
text-align:center;
margin-left:auto;
margin-right:auto;
padding: 10px 10px 10px 10px;
}

ul.year li {
color:#808080;
display: inline;
}

ul.year li.active {
color:#f7cb72;;
font-size:1.1538em/*15px*/;
font-weight:bold;
}

table.yeartable {
margin-left:auto;
margin-right:auto;
padding:3px;
border:1px solid #dbdbdb;
background:#f9f9f9;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
	color: #808080;
	border:1px solid #dbdbdb;
}

table.yeartable td.yearday {
	background:#ccc;
	text-align: center;
}

td.yearmonth {
	color:#999;
}

/*****CLEARS, SKIPLINKS
***********************/
.clear{
	height:0;
	background:transparent;}

.clearfoot {
	clear: both;
	height:0;
	background:transparent;
}

.separator {
	height:1px;
	background:#f9f9f9;
}

.skiplinks {
	text-transform:none;
	text-align:center;
	margin:auto;
	padding:10px;
	color:#19d0e6;
	border:1px solid #dbdbdb;
	width:80%;
	background:#f9f9f9;
}

/*****COMMENTS VIEW
*******************/
.datesubjectcomment {
	background:#f0f0f0;
	padding:5px;
}

.userpiccomment {
	background:#f9f9f9;
	border:1px solid #f0f0f0;
	padding:5px;
	position:relative;
	padding:5px;
	margin:-20 10px 10px 10px;
	z-index:15;
	float:left;
}

.box {
	font-size:1em/*13px*/;
	padding:10px;
	clear:right;
}

input, textarea {
	background-color:#fff;
	color:#808080;
}

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

.reply{
	position:relative;
	margin:5px;
	padding:5px;
	text-align:left;
	background-color:#fff;
	color:#808080;
}

.replytosubject {
	font-weight:normal;
}

.commentreply {
	position:relative;
	padding:5px;
	color:#808080;
}

.commentbox {
	border:1px solid #f0f0f0;
	padding:10px;
	margin:10px;
	background-color:#fff;
}

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

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

.commentboxpartial {
	border:1px solid #f0f0f0;
	padding:10px;
	margin:10px;
	background-color:#fff;
}

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

#qrform table {
	border:1px solid #fff !important;
	height:auto;
}

/*****LJ-USER / COMMUNITY / PROTECTED ICONS
icons by http://passing_girl.livejournal.com/ and  http://www.icojoy.com/
***************************************/
.ljuser img {
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-user-orange.gif) no-repeat;
	padding: 16px 12px 0 0!important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-user-orange.gif) no-repeat;
	padding: 16px 12px 0 0!important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-group-orange.gif) no-repeat;
	padding: 16px 16px 0 0!important;
}

.entry img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] {
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-lock.png) no-repeat;
	padding: 16px 16px 0 0!important;
}

#sidebar_summary img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] {
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-lock.png) no-repeat;
	padding: 16px 16px 0 0!important;
}

.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-lock.png) no-repeat;
	padding: 16px 16px 0 0!important;
}

.entry img[src="http://p-stat.livejournal.com/img/icon_private.gif"] {
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-lock.png) no-repeat;
	padding: 16px 16px 0 0!important;
}

.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-lock.png) no-repeat;
	padding: 16px 16px 0 0!important;
}

#lj_controlstrip .ljuser img {
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-user-orange.gif) no-repeat;
	padding: 16px 12px 0 0!important;
}

#lj_controlstrip .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-user-orange.gif) no-repeat;
	padding: 16px 12px 0 0!important;
}

#lj_controlstrip .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-group-orange.gif) no-repeat;
	padding: 16px 16px 0 0!important;
}

/*****CONTEXTUAL POPUP
***************************************/
div.ContextualPopup img {
	border:0 none;
}

div.ContextualPopup div.Inner {
	background:#fff!important;
	border:1px solid #999!important;
	color:#808080!important;
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif
	font-size:1em;
	font-weight:100!important;
	padding:5px;
}

div.ContextualPopup .Content {
	font-weight:100!important;
	margin-right:50px;
}

div.ContextualPopup .Relation {
	font-size:1.2727em/*14px*/;
	font-weight:100!important;
}
div.ContextualPopup .Content .OnlineStatus {font-weight:100!important;}

div.ContextualPopup .Userpic {font-weight:100!important;}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
	color:#999!important;
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif
	font-weight:100;
	text-decoration:none!important;
}

div.ContextualPopup div.Inner a:hover{
	color:#999!important;
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif
	font-weight:100;
	text-decoration:underline!important;
}

Live preview | Image preview

/*****BASICS
************/
body {
	background:#6edfed;
	font-family:"Trebuchet MS", Verdana, Helvetica, sans-serif;
	color:#808080;
	font-size:100%;
}

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

a:hover {
	color:#19d0e6;
	text-decoration:underline;
}

blockquote {
	background:#fefbf4 url(http://www.mentahelada.net/lj-layouts/layout002/head-orange.png) top left repeat-x;
	border:1px solid #f7cb72;
	color:#808080;
	text-align:left;
	margin:auto; 
	padding:10px; 
	width:95%;
}

p, td {
	font-size:inherit;
}

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

::-moz-selection {
	background:#19d0e6;
	color: #666;
}

b, strong{
	font-weight:bold;
	color:#f7cb72;}

i, em{
	font-style:italic;}
	
.ippu {font-size:11px;}

a{outline:none;}

a img{border:0;}

/*****LAYOUT
************/
#header {
	font-family:"Lucida Sans", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	background-color:#f9f9f9;
	margin:0; 
	padding:15px 10px; 
	text-align:left; 
	width:auto;
}

#content {
	background:#f9f9f9;
	border:1px solid #cacaca;
	width:850px;
	margin-left:auto;
	margin-right:auto;
	margin-top:30px;
	padding: 0px;
	height:100%;
}

#sidebar {
	background:#f9f9f9;
	font-size:0.6875em/*11px*/;
	float:left;
	margin: 0 0 10px 0;
	padding: 0 15px 5px 15px;
	text-align: left;
	width: 200px;
}

#maincontent {
	background:#f9f9f9;
	margin: 0 0 0 240px;
	font-size:0.75em/*12px*/;
}

#footer {
	font-family:"Lucida Sans", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	background-color:#f9f9f9;
	margin:auto; 
	padding:15px 10px; 
	text-align:left;
}

/*****HEADER
************/
ul.navheader {
	padding:0; 
	margin:0; 
}

ul.navheader li { 
	display:inline; 
	list-style:none; 
	padding:0;
	margin:0; 
}

#header li.view { 
	background:#f9f9f9 url(http://www.mentahelada.net/lj-layouts/layout002/head-blue.png) top left repeat-x;
	border:1px solid #19d0e6;
	color:#808080; 
	font-size:0.75em/*12px*/;
	letter-spacing:0.1em;
	text-transform:uppercase;
	text-decoration:none;
	margin:0; 
	padding:5px 10px;
}

#header a, #header a:link, #header a:visited { 
	background:#f9f9f9 url(http://www.mentahelada.net/lj-layouts/layout002/head-orange.png) top left repeat-x;
	border:1px solid #f7cb72;
	color:#808080;
	font-size:0.75em/*12px*/;
	letter-spacing:0.1em;
	text-transform:uppercase;
	margin:0; 
	padding:5px 10px;
}

#header a:hover { 
	background:#f9f9f9 url(http://www.mentahelada.net/lj-layouts/layout002/head-blue.png) top left repeat-x;
	border:1px solid #19d0e6;
	color:#aaa7a7;
	font-size:0.75em/*12px*/;
	letter-spacing:0.1em;
	text-transform:uppercase;
	text-decoration:none;
	margin:0; 
	padding:5px 10px;
}

.title, .subtitle {
	display:none;
}

/*****SIDEBAR
*************/
div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
	color:#666;
	text-decoration:none;
	text-transform:uppercase;
}

div#sidebar a:hover {
	color:#f7cb72;
	text-decoration:none;
}

.sbarbody {
	padding:0;
	margin:0;
}

.sbarbody2 {
	background-color:#f9f9f9; 
	padding:0;
}

.defaultuserpic {
	display:none;
	margin:auto;
	text-align:center;
}

table.calendar {
	margin:auto;
	width:100%;
}

.sbarcalendar {
	background:#fff;
	border:1px solid #dbdbdb;
	color: #808080;
	font-size:1em/*12px*/;
	padding:1px;
	text-align:center;
}

.sbarcalendarposts {
	background:#cacaca;
	border:1px solid #cacaca;
	font-size:1em/*12px*/;
	padding:1px;
	text-align:center;
}

.sbarcalendarposts a, .sbarcalendarposts a:link, .sbarcalendarposts a:visited{
	color:#fff!important;
}

.sbarcalendarposts a:hover{
	color:#fff;
	text-decoration: underline!important;
}

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

#sidebar_linklist li.sbaritem a, #sidebar_tags li.sbaritem a{
	display:block;
}

#sidebar_linklist li.sbaritem:hover, #sidebar_tags li.sbaritem:hover{
	display:block;
	background:#f9f9f9;
	border:1px solid #cacaca;
	color:#666;
}

#sidebar_summary li.sbaritem:hover{
	display:block;
	background:#f9f9f9;
	border:1px solid #cacaca;
	color:#666;
}

li.sbartitle {
	list-style:none;
	color:#808080;
	font-size:1.1818em/*13px*/;
	margin:15px 0 0 0;
	padding:0;
	text-align:left;
	text-transform:uppercase;
}

/*ul.ljtaglist li {list-style: none;}
.sbarheader {}*/

/*****FOOTER
************/
ul.navfooter { 
	padding:0; 
	margin:auto; 
}

ul.navfooter li { 
	display:inline; 
	list-style:none; 
	padding:0;
	margin:auto; 
}

#footer li.viewing { 
	background-color:#f9f9f9;
	color:#808080; 
	font-size:0.75em/*12px*/;
	letter-spacing:0.1em;
	text-transform:uppercase;
	text-decoration: none;
	margin:5px; 
	padding:5px;
}

#footer a, #footer a:link, #footer a:visited {
	background-color:#f9f9f9;
	color:#f7cb72;
	font-size:0.75em/*12px*/;
	letter-spacing:0.1em;
	text-transform:uppercase;
	margin:5px; 
	padding:5px;
}

#footer a:hover { 
	background-color:#f9f9f9;
	color:#19d0e6; 
	font-size:0.75em/*12px*/;
	letter-spacing:0.1em;
	text-transform:uppercase;
	text-decoration:underline;
	margin:5px; 
	padding:5px;
}

/*****ENTRY
***********/
.subcontent {
	background:#f9f9f9;
	border-left:1px solid #f0f0f0;
	margin:5px;
	padding:5px;
}

.entry{
	color:#808080;
	margin:0;
	padding:5px;
	text-align:left;
}

.entry ul li {
	background:#f9f9f9 url(http://www.mentahelada.net/lj-layouts/layout002/entry-li-arrow.gif) left no-repeat;
	list-style:none;
	margin-left:10px;
	padding-left:11px;
	color:#808080;
}

.entry ol li {
	list-style:lower-roman;
	margin-left:30px;
	padding-left:0px;
	color:#808080;
}

/*****USERPICS
**************/
.userpic, .userpicfriends {
	background:#fff!important;
	border: 1px solid #dbdbdb;
	font-size:0.7692em/*10px*/;
	text-align:center;
	text-transform:lowercase;
	color:#f7cb72;
	float:right;
	margin:0 15px 15px 15px;
	padding:5px;
	position:relative;
	z-index:15;
}

.userpicfriends font{
	font-size:1em/*10px*/;
	text-align:center;
	text-transform:lowercase;
	color:#808080;
}

.userpic a, .userpicfriends a:hover, userpicfriends a:hover font {
	color:#808080!important;
	text-decoration:underline;
	text-transform:lowercase;
}

/*.userpicfriends br {}*/

.subject {
	color:#19d0e6;
	font-family:"Lucida Sans", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	font-size:1.3333em/*16px*/;
	text-align:left;
	text-transform:uppercase;
	font-style:normal;
	font-weight:bold;
	border-bottom:1px solid #dbdbdb;
}

.subject a, .subject a:link, .subject a:visited {
	color:#19d0e6;
	text-transform:uppercase;
	font-style:normal;
	font-weight:bold;
}

.subject a:hover {
	color:#19d0e6;
	text-decoration:underline;
}

.datesubject {
	background-color:#f9f9f9;
	padding:10px;
}

.ljtags {
	border-left:2px solid #19d0e6;
	padding-left:5px;
	text-align:left;
	margin-top:10px;
	color:#808080;
	font-size:0.9166em/*11px*/;
	font-weight:normal;
}

.currents{
	border-left:2px solid #19d0e6;
	padding-left:5px;
	text-align:left;
	color:#808080;
	font-size:0.9166em/*11px*/;
}

.currents strong, .ljtags strong {
	color:#808080;
	font-weight:normal;
}

.ljtags a, .ljtags a:link, .ljtags a:visited, .currents a, .currents a:link, .currents a:visited {
	color:#f7cb72;
	font-weight:normal;
}

.ljtags a:hover, .currents a:hover {
	color:#19d0e6;
	text-decoration:underline;
}

.comments {
	border-left:2px solid #19d0e6;
	padding-left:5px;
	position: relative;
	background:#f9f9f9;
	color:#19d0e6;
	font-family:"Lucida Sans", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	font-size:1em/*12px*/;
	letter-spacing:0.05em;
	text-align:left;
	text-transform:uppercase;
	font-style:normal;
	font-weight:bold;
	margin-bottom:10px;
}

.comments a, .comments a:link, .comments a:visited {
	color:#f7cb72;
	text-transform:uppercase;
}

.comments a:hover {
	color:#19d0e6;
	text-decoration:underline;
}

/*****TAGS PAGE
**************/
.ljtaglist { 
	width:80%;
	list-style:none;
	color:#808080;
	border-left: 1px solid #f0f0f0; 
}

.ljtaglist li { 
	background:#f9f9f9 url(http://www.mentahelada.net/lj-layouts/layout002/'http://img385.imageshack.us/img385/1560/arrow1zx8.gif') left no-repeat;
	border-bottom: 1px solid #dbdbdb; 
	color: #808080; 
	padding:5px 11px; 
}

h2 { 
	width:80%;
	color:#19d0e6;
	font-family:"Lucida Sans", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	font-size:1.3333em/*16px*/;
	letter-spacing:0.05em;
	text-align:right;
	text-transform:uppercase;
	font-style:normal;
	font-weight:bold;
}

/*****CALENDAR PAGE
*******************/
ul.year{
list-style:none;
text-align:center;
margin-left:auto;
margin-right:auto;
padding: 10px 10px 10px 10px;
}

ul.year li {
color:#808080;
display: inline;
}

ul.year li.active {
color:#19d0e6;;
font-size:1.1538em/*15px*/;
font-weight:bold;
}

table.yeartable {
margin-left:auto;
margin-right:auto;
padding:3px;
border:1px solid #dbdbdb;
background:#f9f9f9;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
	color: #808080;
	border:1px solid #dbdbdb;
}

table.yeartable td.yearday {
	background:#ccc;
	text-align: center;
}

td.yearmonth {
	color:#999;
}

/*****CLEARS, SKIPLINKS
***********************/
.clear{
	height:0;
	background:transparent;}

.clearfoot {
	clear: both;
	height:0;
	background:transparent;
}

.separator {
	height:1px;
	background:#f9f9f9;
}

.skiplinks {
	text-transform:none;
	text-align:center;
	margin:auto;
	padding:10px;
	color:#f7cb72;
	border:1px solid #dbdbdb;
	width:80%;
	background:#f9f9f9;
}

/*****COMMENTS VIEW
*******************/
.datesubjectcomment {
	background:#f0f0f0;
	padding:5px;
}

.userpiccomment {
	background:#f9f9f9;
	border:1px solid #f0f0f0;
	padding:5px;
	position:relative;
	padding:5px;
	margin:-20 10px 10px 10px;
	z-index:15;
	float:left;
}

.box {
	font-size:1em/*13px*/;
	padding:10px;
	clear:right;
}

input, textarea {
	background-color:#fff;
	color:#808080;
}

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

.reply{
	position:relative;
	margin:5px;
	padding:5px;
	text-align:left;
	background-color:#fff;
	color:#808080;
}

.replytosubject {
	font-weight:normal;
}

.commentreply {
	position:relative;
	padding:5px;
	color:#808080;
}

.commentbox {
	border:1px solid #f0f0f0;
	padding:10px;
	margin:10px;
	background-color:#fff;
}

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

.datesubjectcomment a:hover {
	color:#19d0e6;
}

.commentboxpartial {
	border:1px solid #f0f0f0;
	padding:10px;
	margin:10px;
	background-color:#fff;
}

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

}

#qrform table {
	border:1px solid #fff !important;
	height:auto;
}

/*****LJ-USER / COMMUNITY / PROTECTED ICONS
icons by http://passing_girl.livejournal.com/ and  http://www.icojoy.com/
***************************************/
.ljuser img {
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-user-blue.gif) no-repeat;
	padding: 16px 12px 0 0!important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-user-blue.gif) no-repeat;
	padding: 16px 12px 0 0!important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-group-blue.gif) no-repeat;
	padding: 16px 16px 0 0!important;
}

#sidebar_summary img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] {
	wwidth: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-lock.png) no-repeat;
	padding: 16px 16px 0 0!important;
}

.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
	width: 0; height: 0; 
	background: url(http://www.mentahelada.net/lj-layouts/layout002/'http://img80.imageshack.us/img80/8819/loginzi6.gif');
	padding: 16px 16px 0 0!important;
}

#lj_controlstrip .ljuser img {
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-user-blue.gif) no-repeat;
	padding: 16px 12px 0 0!important;
}

#lj_controlstrip .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-user-blue.gif) no-repeat;
	padding: 16px 12px 0 0!important;
}

#lj_controlstrip .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
	width: 0; height: 0; 
	background:transparent url(http://www.mentahelada.net/lj-layouts/layout002/icon-group-blue.gif) no-repeat;
	padding: 16px 16px 0 0!important;
}

/*****CONTEXTUAL POPUP
***************************************/
div.ContextualPopup img {
	border:0 none;
}

div.ContextualPopup .Content {
	font-weight:100!important;
	margin-right:50px;
}

div.ContextualPopup .Relation {
	font-size:1.2727em/*14px*/;
	font-weight:100!important;
}
div.ContextualPopup .Content .OnlineStatus {font-weight:100!important;}

div.ContextualPopup .Userpic {font-weight:100!important;}

div.ContextualPopup div.Inner a:hover{
	color:#999!important;
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif
	font-weight:100;
	text-decoration:underline!important;
}

LAYOUT INFO:

Style: Flexible Squares
Account level: Basic, Paid, Plus
Tested on: IE (6 and higher), Firefox Safari and Chrome.

IMAGES:

Please upload the images to your own server. Thanks.
Background of header and sidebar items:

User, community, locked/protected icons:

(by Passing Girl),

(by Icojoy)
List item:

Pride & Prejudice icon in the live preview made by me. Find it here.

BASIC INSTRUCTIONS:

Choose a Flexible Squares layout
Go to Customize Journal Theme
Select NO in the dropdowns
Leave "Custom External Stylesheet" empty
Paste the CSS that I give you in the "Custom Stylesheet" box
Save.

Make changes if you know how (but still credit me!)
Ask if you have doubts, I'll try to answer asap

ADDING A HEADER:

If you want a header in yout layout, add this at the end of the code:

.headerimage {

	position:relative;

	margin:0 auto;

	background-repeat:no-repeat;

	background-image:url('ADD HERE YOUR URL');

	width:0px;

	height:0px;

}

And change the url to your own. Also, change the width and height lines so they fit your image size.

EASY RULES:

Credit mentahelada if you use. Please don't credit mintyapple, please change the credit you have in your userinfo. Thanks!
Comment if you like / if you take

I've just realized that I like shiny things, lol.

The post @ mintyapple

Tags: layouts, layouts:flexible squares

Post a new comment
Error
We will log you in after post

We will log you in after post

We will log you in after post

We will log you in after post

We will log you in after post

Anonymously

switch

LiveJournal

Facebook

Twitter

OpenId

Google

MailRu

VKontakte

Anonymously

Insert Bold

Insert Italic

Insert Underline

Insert Strikethrough

Insert Link

Insert LJ User

Insert Photo

Insert Video

Your IP address will be recorded
Help
15 comments

lelymarques

July 28 2008, 14:40:36 UTC 3 years ago

loved it!

yam

July 29 2008, 22:53:39 UTC 3 years ago

I'm glad you like it! :)

extraobsession

July 29 2008, 21:49:28 UTC 3 years ago

I really like the colors once again. The nice and simple layouts are always a favorite of mine. Good job!

yam

July 29 2008, 22:56:32 UTC 3 years ago

I'm really glad you like it!
And thank you so much, as always.
:D

sylvanelfqueen

August 7 2008, 20:24:29 UTC 3 years ago

I love this layout. I'm using the inverted.

yam

August 11 2008, 00:39:03 UTC 3 years ago

I'm really glad you like it! :)

flippant

August 28 2008, 05:34:39 UTC 3 years ago

I am in love with this layout & have been using it for a bit in my community

wtfpwnbbq. I decided to add a header today, but I cannot for the life of me figure out how to make the header & the body of the layout touch, like to appear as one big box rather than 2 separate. Could you tell me where to find the code to adjust the positioning?

yam

August 28 2008, 06:56:47 UTC 3 years ago

Ok, you need to find these lines of the code:

#content {
	background:#f9f9f9;
	border:1px solid #cacaca;
	width:850px;
        top: 285px;
	margin-left:auto;
	margin-right:auto;
	margin-top:30px;
	padding: 0px;
	height:100%;
}

and change the margin-top to 0

margin-top:0;

You should also get rid of the border because it becomes more visible with your header. In the same place as above change the border to 0:

border:0;

And that's it. I'm really glad you like this layout. :)

flippant

August 28 2008, 08:00:28 UTC 3 years ago

thank you x 10000000!! =D

magickly

October 26 2008, 00:01:01 UTC 3 years ago

Wow, I really like this layout! It's pretty, and it keeps the journal easy to read! I'm using it now. Thank you!

drunk_machine

October 30 2008, 03:43:41 UTC 3 years ago

Hola (: Sólo queria decirte que me encanto esta comunidad y tus diseños y me enamoré de este en particular (que estoy usando en mi LJ <3) y que me encanta que hagas diseños tan cooles y hables español además y ADEMÁS seas diseñadora gráfica :D (a mi me faltan 2 años -si dios quiere- para recibirme, así que somos casi colegas XD) ahaha, bueno ya te declare mi amor XD

Sigue con la comunidad, me encanto!! <3

yam

October 30 2008, 04:54:29 UTC 3 years ago

Estudias diseñooooo!!!

No hay mejor cosa en la vida que encontrarme en el lj a personas con las que comparta idioma, profesión y FANDOMS YAY!!!

¿Te agrego, vale?

:*****

drunk_machine

October 30 2008, 05:23:03 UTC 3 years ago

Exactamente, tú lo has dicho :D

Agregada también, muchas gracias <3!

quasiarti

February 24 2010, 15:27:28 UTC 2 years ago

hermoso disenio , solo pa avisarte que lo usare 8>

mutimutimut

October 16 2010, 00:15:55 UTC 1 year ago

I like this. simple but nice!
Taking this, okay?

Post a new comment
15 comments

Username:		Create an Account Forgot your login or password? OpenID Google Mail.Ru VKontakte
Password:
	Remember Me
	English • Español • Deutsch • Русский…

015 - Layout 002 [Flexisquares: Vintage 2.0]

Error

About

Help

Get Involved

Legal

LJ Labs

Store