layoutlounge | 42. Earth Tones of Autumn

Layout Style: S2 Flexible Squares
Features: Sidebar, Scrolling Tags, Custom Page Summary
Layout Width: 800px
Requested By:

auroradream

Click to see larger image

/*------------------------------------------------------------------
S2 Flexible Squares
Layout by sireesanwar @ http://community.livejournal.com/layout_lounge/
PLEASE DO NOT REMOVE THIS SECTION 
inspired by a layout by milou veronica
--------------------------------------------------------------------*/

body{
	background-color: #798254;
        background-image: url(BACKGROUND IMAGE LINK HERE);
        background-repeat: no-repeat;
        background-attachment: fixed;
	color: #513a3a;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 12px;
        margin: 10px 0 20px 0;
	}

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

a:hover {
	color: #4a275f;
	text-decoration: none;
	}

blockquote {
		padding: 18px; 
		border: 1px solid #e6d6b7; 
		color: #513a3a;
		font-size: 12px;
		line-height: 14px;
		font-family: "verdana", arial, verdana, sans-serif;
		background: #fcf8ec;
		text-align: left;
                     -moz-border-radius: 2%;

}
b, strong {
color: #57257d;
}

i, em {
color: #d66b25;
}

s, u {
color: #14524d;
}

p, td{
	}
	
code, kbd, pre, tt {
		font-family: "monospace";
	}
	
ul.ljtaglist {
	text-align: left;
	padding-left: 5px;
}

/*-----------------------
SECTION: In General
-------------------------*/
	
#content {  	
	width: 800px;	
	margin-left: auto; 
        margin-right: auto;  
	text-align: left;
        padding: 0px;
        background-color: transparent !important;
	border-color: #888888;
	border-style: solid;
	border-width: 0px;
}

#maincontent {
	width: 565px;
	float: left;
	margin: 0px 0px 0px 0px;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 12px;
	color: #888888;
	text-align: center;
	}

.subcontent {
        background-color: #fcf8ec;
        width: 563px;
	border: 1px solid #cccccc;
	min-height: 200px;
	margin-right: 0px;
            -moz-border-radius: 1%;

}

/*-----------------------
SECTION: Header
-----------------------*/

#header {		
	position: relative;
	line-height: 125%;
	text-align: center;
        color: #fcf8ec;
	font-family: "verdana";
	font-size: 9px !important;
	width: 100%;
	padding: 0px 0px 10px 0px;
	margin-bottom: 0px;
	text-align: center;
	letter-spacing: 1px;
        text-transform: normal;
	border-bottom: 0px solid #b4c08e;
	background-color: #000000;

}

div#header a, div#header a:link, div#header a:visited, div#footer a,

div#footer

div#header a, div#header a:link, div#header a:visited, div#header a:active {
	padding: 5px;
	font-family: "verdana";
	font-weight: normal;
	text-transform: normal;
	letter-spacing: -1px;
	color: #e0a036;
	text-align: center;
	background-color: #000000;
}

div#header a:hover {
	padding: 5px;
	color: #c54715;
	background-color: #000000;
	border-bottom: 0px solid;
            -moz-border-radius: 2%;
}

ul.navheader 
	{	
	padding: 10px 0px 0px 0px;
        background-color: transparent !important;	
	margin: 0px;
	}

ul.navheader li  {
	display: inline;
	padding: 10px 0px 0px 0px;
        background-color: transparent !important;
	margin: 0 2px;
	}
	
.title, .subtitle {
		display: none;
		}

/*-----------------------
SECTION: Footer
-----------------------*/

#footer {			
	width: 100%;
	margin: 0px;
	text-align: center;
	font-family: "georgia";
	font-size: 12px;
	color: #ffffff;
	z-index: 100;
	}

div#footer a {
	padding: 5px;
	font-family: "trebuchet ms";
	font-size: 15px;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: -1px;
	color: #e0a036;
	text-align: center;
	background-color: transparent !important;
}

div#footer a:hover {
	padding: 5px;
	color: #D7D3CD;
	background-color: transparent !important;
	border-bottom: 0px solid;
}

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

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

.clearfoot {		
	clear: both;
	}

/*-----------------------
SECTION: Sidebar
-------------------------*/

#sidebar {
	padding: 0px 0 10px 0; 
        background-color: #fcf8ec;
	margin-left: 0px;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 11px;
	color: #513a3a;
	width: 215px;
	float: right;
	text-align: left;
        text-transform: normal;
	border: 1px solid #cccccc;
            -moz-border-radius-bottomleft: 2%;
            -moz-border-radius-bottomright: 2%;

}

#sidebar .sbarcalendarposts a, #sidebar .sbarcalendarposts a:link,

.sbarcalendarposts

a:visited{
	padding: 0px;
	text-align: center;
	}

#sidebar .sbarcalendarposts a:hover {
	padding: 0px;
	text-align: center;
	}
		
#sidebar_tags .sbarcontent {
         height: 250px;
         overflow:auto;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
	color: #943d22;
	display: block;
	padding: 1px 1px 1px 0px;
	text-decoration: none;
		}

div#sidebar a:hover {
	padding: 1px 1px 1px 0px;
	color: #4a275f;
}

.defaultuserpic {
	text-align: center;
	}

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

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

.sbarbody2 {
	padding: 0 5px 0 5px;
	}
		
table.calendar {
	margin-right: auto;
	margin-left: auto;
	}
	
.sbarcalendar {
	padding: 1px;
	border: 1px solid #513a3a;
	text-align: center;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 9px;
	}

.sbarcalendarposts {
	padding: 1px;
        border: 1px solid #513a3a;
	background-color: #fcf8ec;
	text-align: center;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 9px;
	}
	
ul.sbarlist {
	padding-left: 0px;
	margin-left: 0px;		
        list-style: none;
	}

li.sbaritem {
	padding-left: 0px;
        border-bottom: 0px solid #cccccc;
	list-style: none;
        }

li.sbartitle {
	padding: 3px 5px 3px 5px;
	margin: 10px 0 10px 0;
	list-style: none;
	text-align: center;
	color: #596E1C;
        border-bottom: 1px solid #b4c08e;
        text-transform: normal;
	font-weight: none;
	font-family: "Automobile", Arial;
	font-size: 18px;
		}

ul.tagList {width: 100%;}
    .tagBox {
      height: 250px;
      overflow-x: hidden;
      overflow-y: scroll; 
      scrollbar-arrow-color: #943d22;
      scrollbar-base-color: #ffffff;
      scrollbar-face-color: #ffffff;
      scrollbar-highlight-color: #943d22;
      scrollbar-darkshadow-color: #b4c08e;
      scrollbar-shadow-color: #b4c08e;
}

#sidebar_summary li.sbaritem {
	color: #cccccc;
	border: 1px solid #b4c08e;
	background-color: #fcf8ec;
	padding: 3px;
	text-transform: normal;
	margin: 3px 0px;
	}

#sidebar_summary li.sbaritem a {
	text-decoration: none;
	display: inline !important;
	color: #55396a;
	border: 0px solid #943d22 !important;
	background-color: transparent !important;
	}

#sidebar_summary li.sbaritem a: hover{
	text-decoration: none;
	color: #943d22;
	border: 0px solid #cccccc;
	background-color: transparent !important;
	}

/*-----------------------
SECTION: Entries
-------------------------*/

.entry	{
        padding: 10px;
	margin: 0px;
	color: #513a3a;
	font-family: "arial";
	font-size: 12px;
	text-align: left;
	}
	
hr {
	color: transparent;
	height: 1px;
	border-style : none; 
	border-bottom: 1px solid #b4c08e;
	}

.entry ul li, ol li, li {
	padding-left: 5px;
	margin-left: 5px;
	list-style: normal;
	list-style-position: outside;
	}

.userpic {
	background-color: #fcf8ec !important;
	position: relative;
	float: right;
	padding: 5px;
	margin: 10px;
	z-index: 15;
        color: #b4c08e !important;
	border: 1px #e6d6b7 solid;
            -moz-border-radius: 2%;

}

.userpicfriends {
	background-color: #fcf8ec !important;
	position: relative;
	float: right;
	padding: 5px;
	margin: 10px;
	text-align: right;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 11px;
	z-index: 15;
	border: 1px #b4c08e solid;
            -moz-border-radius: 2%;

}

.userpicfriends a font {
	color: #dc9d30;
}

.date {
	margin: 5px 0 0 5px;
	text-align: left;
        color: #513a3a;
	top: 5px;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	}

.subject {
        background-color: #fcf8ec;
	font-weight: none;
	padding-bottom: 5px;
	padding-top: 5px;
        padding-left: 10px;
	color: #4a275f;
	font-family: "Automobile", Verdana;
	font-size: 18px;
	text-transform: normal;
        text-decoration: underline;
	border-bottom: 1px solid #b4c08e;
	}
	
.subject a, .subject a:link, .subject a:visited {
	color: #4a275f;
	}

.subject a:hover {
	color: #596E1C;
	}

.datesubject {
	background-color: transparent;
	padding: 0px;
	text-align: left;
	border-left: 0px solid #cccccc;
	border-right: 0px solid #cccccc;
	border-top: 0px solid #cccccc;
        }

span.ljuser a b {
	padding: 2px 0 2px 0;
	color: #d66b25;
	font-weight: bold;
	}

span.ljuser a:hover b {
	padding-top: 2px;
	padding-bottom: 2px;
	color: #755ea6;
	font-weight: lighter;
	}

/*-----------------------
SECTION: Currents, tags, comment links
-------------------------*/

.ljtags {
	margin-top: 5px;
	color: #b7a68b;
	font-weight: lighter;
	font-size: 10px;
	text-transform: lowercase;
        margin: 15px 0px 0px 0px;
        padding: 5px 0px 5px 17px;
        background: url() no-repeat center left;
	}
	
.currents strong, .currentmood strong, .currentmusic .currentlocation,

.ljtags strong

{
	font-family: "verdana", arial;
	font-size: 10px;
	color: #b7a68b;
	font-weight: lighter;
	text-transform: lowercase;
	}

.currents, .currentmood, .currentmusic, .currentlocation {
	font-family: "verdana", arial;
	font-size: 10px;
	color: #513a3a;
	font-weight: lighter;
	text-transform: lowercase;
	}

.ljtags a, .ljtags a:link, .ljtags a:visited {
	font-family: "verdana", arial;
	font-size: 10px;
	color: #943d22;
	text-transform: lowercase;
	font-weight: lighter;
	}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
	font-family: "verdana", arial;
	font-size: 10px;
	color: #943d22;
	text-transform: lowercase;
	font-weight: lighter;
	}
	
.currentlocation a:hover, .ljtags a:hover {
	font-family: "verdana", arial;
	font-size: 10px;
	color: #4a275f;
	font-weight: lighter;
	text-transform: lowercase;
	}

.comments {
	font-family: "Verdana", arial;
	font-size: 10px;
	font-weight: normal;
	text-align: right;
	padding: 5px 5px 5px 5px;
	position: relative;
	clear: center;
	margin-top: 5px;
	text-transform: lowercase;
	border-bottom: 1px #b4c08e solid;
	}
	
div.comments a, div.comments a:link, div.comments a:visited{
	color: #4a275f;
}

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

/*-----------------------
SECTION: Comments Page
-------------------------*/

.box {
	padding: 5px;
	margin-top: 0px;
	text-align: left;
        clear:right;
	background-color: #fcf8ec;
	width: 557px;
	}

form div.box {
	text-align:center;
	background-color: #fcf8ec;
	width: 557px;
}

.skiplinks {
	text-align: right;
	margin-bottom: 3px;
	font-family: "Verdana", arial;
	padding: 10px;
	font-size: 9px;
	letter-spacing: 1px;
	color: #dddddd;
	background-color: #fcf8ec;
	border: 1px solid #b4c08e;
          -moz-border-radius-bottomleft:2%;
          -moz-border-radius-bottomright:2%;
	}

.datesubjectcomment {
	margin-top: 20px;
	text-align: right;
	padding: 5px;
        background-color: #fcf8ec;
        color: #513a3a;
	}	
	
.userpiccomment {
	background-color: #fcf8ec !important;
	position: relative;
	top: -30px;
	left: 0px;
	padding: 5px;
	margin: 20px 10px -20px 10px;
	z-index: 15;
	float: right;
	border: 1px #e6d6b7 solid;
	color: #513a3a;
            -moz-border-radius: 2%;

}

div#content input,
div#content textarea,
div#content select {
	color: #943d22;
	border: 1px solid #b4c08e;
	background-color:#ffffff;
	}
	
textarea.textbox  {
	width: 100% !important;
	}

.reply	{
	position: relative;
	margin: 20px 30px 10px 30px;
	padding: 25px 10px 10px 10px;
	text-align: left;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 10px;
	line-height: 125%;
	color: #513a3a;
	}
	
.replytosubject {
	color: #513a3a;
	font-weight: bold;
	text-transform: normal;
        padding: 5px;
        background-color: #fcf8ec;
	}

.replytoposter {
        background-color: #fcf8ec;
	color: #943d22;
	text-transform: normal;
        padding: 5px;
}

.commentreply {
        text-align: left;
	position: relative;
	margin: 10px;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 10px;
	color: #513a3a;
	}
	
.commentbox {
	padding: 5px;
	margin: 10px;
	text-align: left;
        background-color: #fcf8ec;
	border: 1px solid #b4c08e;
            -moz-border-radius: 2%;

}
	
.datesubjectcomment a:link, .datesubjectcomment a:visited {
	color: #943d22;
	}
	
.datesubjectcomment a:hover {
	color: #4a275f;
	}

.commentboxpartial {
	padding: 10px; 
	margin: 10px; 
        background-color: #fcf8ec;
	}

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

/*-----------------------
SECTION: Year/Archive Page
-------------------------*/

ul.year {
	text-align: center;
	padding: 5px;
        background-color: #fcf8ec;
	}

ul.year li {
	display: inline;		
	}

table.yeartable {
	margin-left: auto;
	margin-right: auto;
        padding: 10px 100px 10px 100px;
        background-color: #fcf8ec;
	}

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

table.yeartable td.yearday {
	text-align: center;
	color: #513a3a;
	}

td.yearmonth {
	color: #513a3a;
	border-style: none;
	}

/*-----------------------

SECTION: Tags Page
-------------------------*/

ul.ljtaglist {
	color: #cccccc;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 12px;
	padding-left: 12px;
	padding: 8px;
	}

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

/*-----------------------
SECTION: Tiny Icons
-------------------------*/

.currentlocation
       {
       background: url() no-repeat left center;
       padding: 2px 0px 5px 18px;
       }

.currentmood 
       {
       background: url() no-repeat left center;
       padding: 2px 0px 5px 18px;
       }

.currentmusic 
       {
       background: url() no-repeat left center;
       padding: 2px 0px 5px 18px;
       }

/*-----------------------
SECTION: Mics
-------------------------*/

.clear {
	height: 0px;
	font-size: 0.01px;
	}
	
#lj_controlstrip_statustext {
        color: #fcf8ec;
        font-size: 12px;
        font-weight: bold;
}

#lj_controlstrip td {
	font-family: "georgia" !important;
	font-size: 11px;
	background-color: #2a2a2a !important;
	border: 0px solid #eeeeee;
	}

#lj_controlstrip a, .lj_controlstrip a:link, .lj_controlstrip a:visited, {
	font-family: "georgia" !important;
	font-size: 11px;
	color: #fcf8ec !important;
	text-transform: lowercase;
	}

.headerimage {
          position: relative;
	 width: 800px;
	 height: 300px;
         padding-left: 0px;
         padding-right: 0x;
         padding-bottom: 0px;
         padding-top: 0px;
         margin-left: auto;
         margin-right: auto;
         margin-top: 1px;
         background-color: transparent !important;
	 background-image: url(HEADER IMAGE LINK HERE);
	 background-position: center;         
         background-repeat: no-repeat;
            }

.separator {
          height: 20px;
         }

Headers can be found at

graffitigraphic

Fonts Used:
Automobile

See the Font Tutorial if you need help adding these fonts to your computer system.

Check out Using Layouts on the sidebar for any extra assistance.
Please direct people to

layout_lounge or

graffitigraphic.

Flat | Top-Level Comments Only

~~It looks beautiful! The only problem is that the page summary and tags sidebar aren't there....~~

nm! Figured it out and it is working!

Edited 2009-10-26 22:47 (UTC)

(deleted comment)

I have no problem with the header changing.

Also, I don't mind color changes though you might look through some of the other layouts here as they are often similar styles with color changes.

Using this~

42. Earth Tones of Autumn

no subject

no subject

no subject