layoutlounge | 45. Colorful Chuck Layout (Reply)

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

[ Preview ] [ Live ]

Font(s) Used: Automobile
Layout:

layout_lounge
Header:

graffitigraphic

Sidebar:
.Using Layouts or Layout Changes for Beginners on the sidebar for any extra assistance.
.Font Tutorial if you need help adding these fonts to your computer system.
.Tiny Icons for some suggested images.

/*-----------------------------------------------------------
S2 Flexible Squares
by http://community.livejournal.com/layout_lounge/
PLEASE DO NOT REMOVE THIS SECTION 
-------------------------------------------------------------*/

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

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

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

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

b, strong {color: #b62657;}
i, em {color: #596E1C;}
s, u {color: #553a90;}

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: #f7f6f0;
        width: 563px;
	border: 1px solid #cccccc;
	min-height: 200px;
	margin-right: 0px;
            -moz-border-radius: 1%;
}

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

#header {		
	position: relative;
        line-height: 125%;
        color: #f7f6f0;
	font-family: "verdana";
	font-size: 10px !important;
	width: 100%;
	padding: 0px 0px 10px 0px;
	margin-bottom: 0px;
	text-align: center;
	letter-spacing: 1px;
        text-transform: normal;
	border-top: 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;
 letter-spacing: 1px;
 color: #a95344;
 background-color: #000000;
}

div#header a:hover {
 padding: 5px;
 color: #b19f73;
 background-color: #222222;
 -moz-border-radius: 2%;
}

div#header li.view {
 background-color: #F7F6F0;
 color: #000000; 
 padding: 3px;
 -moz-border-radius: 2%;
}

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

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

.title, .subtitle { display: none; }

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

#footer {			
	width: 100%;
	margin: 0px;
	text-align: left;
	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: #a95344;
	text-align: left;
	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 {
	width: 215px;
	float: right;
        text-transform: normal;
	margin: 0px;
	padding: 0px; 
	font-family: "verdana", arial;
	font-size: 11px;
	color: #444444;
	}

#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: #25909b;
	display: block;
	padding: 1px 1px 1px 0px;
	text-decoration: none;
		}

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

.defaultuserpic {
 text-align: center;
 background-color: #f7f6f0; 
 border: 1px solid #cccccc;
 -moz-border-radius-topleft: 4%; 
 -moz-border-radius-topright: 4%;
 -moz-border-radius-bottomleft: 4%; 
 -moz-border-radius-bottomright: 4%; 
 padding: 10px; 
 margin: 0 0 15px 0; 
 list-style: none; 
 }

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

.sbarbody {
 background-color: #f7f6f0; 
 border: 1px solid #cccccc;
 -moz-border-radius-topleft: 4%; 
 -moz-border-radius-topright: 4%;
 -moz-border-radius-bottomleft: 4%; 
 -moz-border-radius-bottomright: 4%; 
 padding: 10px; 
 margin: 0 0 15px 0; 
 list-style: none; 
}

.sbarbody2 { 
 text-align: justify; 
 background-color: #F7f6f0; 
 -moz-border-radius-topleft: 4%;
 -moz-border-radius-topright: 4%; 
 -moz-border-radius-bottomleft: 4%; 
 -moz-border-radius-bottomright: 4%; 
 padding: 20px; 
 margin: 0 0 15px 0; 
 list-style: none; 
}

.sbarcontent { margin: 0px; padding: 0px; list-style: none; }

table.calendar { margin-right: auto; margin-left: auto;	}
	
.sbarcalendar, .sbarcalendarposts { color: #606060; border-right: 2px solid #CCCCCC; border-bottom: 2px solid #CCCCCC; -moz-border-radius-bottomleft: .5%; -moz-border-radius-bottomright: .5%; padding: 2px; margin: 10px; }

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

li.sbaritem { margin: 0px; padding: 0px 10px; list-style: none; }

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

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

#sidebar_summary li.sbaritem {
	color: #cccccc;
 border-right: 2px solid #CCCCCC;
 border-bottom: 2px solid #CCCCCC; 
 -moz-border-radius-bottomleft: .5%; 
 -moz-border-radius-bottomright: .5%;
	background-color: #f7f6f0;
	padding: 3px;
	text-transform: normal;
	margin: 3px 0px;
	}

#sidebar_summary li.sbaritem a {
	text-decoration: none;
	display: inline !important;
	color: #898f5b;
	border: 0px solid #25909b !important;
	background-color: transparent !important;
	}

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

/*-----------ECTION: Entries-----------*/

.entry	{
        padding: 10px;
	margin: 0px;
	color: #444444;
	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: #f7f6f0 !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: #f7f6f0 !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: #25909b;
}

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

.subject {
        background-color: #f7f6f0;
	font-weight: none;
	padding-bottom: 5px;
	padding-top: 5px;
        padding-left: 10px;
	color: #b62657;
	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: #b62657;
	}

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

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

span.ljuser a b {
	padding: 2px 0 2px 0;
	color: #9f3e31;
	font-weight: normal;
	}

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

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

.ljtags {
	margin-top: 5px;
	color: #b7a68b;
	font-weight: lighter;
	font-size: 10px;
	font-family: "Verdana", arial;
	text-transform: lowercase;
        margin: 15px 0px 0px 0px;
        padding: 5px 0px 5px 17px;
        background: url(TAGS TINY ICON) 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: #444444;
	font-weight: lighter;
	text-transform: lowercase;
	}

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

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
	font-family: "verdana", arial;
	font-size: 10px;
	color: #25909b;
	text-transform: lowercase;
	font-weight: lighter;
	}
	
.currentlocation a:hover, .ljtags a:hover {
	font-family: "verdana", arial;
	font-size: 10px;
	color: #b62657;
	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: #b62657;
}

div.comments a:hover {
	color: #25909b;
	text-decoration: none;
}

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

.box {
	padding: 5px;
	margin-top: 0px;
	text-align: left;
        clear:right;
	background-color: #f7f6f0;
	width: 557px;
            -moz-border-radius: 2%;
	}

form div.box {
	text-align:center;
	background-color: #f7f6f0;
	width: 557px;
            -moz-border-radius: 2%;
}

.skiplinks {
	text-align: right;
	margin-bottom: 3px;
	font-family: "Verdana", arial;
	padding: 10px;
	font-size: 9px;
	letter-spacing: 1px;
	color: #dddddd;
	background-color: #f7f6f0;
	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: #f7f6f0;
        color: #444444;
	}	
	
.userpiccomment {
	background-color: #988258 !important;
	position: relative;
	top: -30px;
	left: 0px;
	padding: 5px;
	margin: 20px 10px -20px 10px;
	z-index: 15;
	float: right;
	border: 2px #988258 solid;
	color: #444444;
            -moz-border-radius: 4%;
	}

div#content input,
div#content textarea,
div#content select {
	color: #25909b;
	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: #444444;
	}
	
.replytosubject {
	color: #444444;
	font-weight: bold;
	text-transform: normal;
        padding: 5px;
        background-color: #f7f6f0;
	}

.replytoposter {
        background-color: #f7f6f0;
	color: #25909b;
	text-transform: normal;
        padding: 5px;
}

.commentreply {
        text-align: left;
	position: relative;
	margin: 10px;
	font-family: "verdana", arial, verdana, sans-serif;
	font-size: 10px;
	color: #444444;
	}
	
.commentbox {
	padding: 5px;
	margin: 10px;
	text-align: left;
        background-color: #f7f6f0;
	border: 1px solid #b4c08e;
            -moz-border-radius: 2%;
	}
	
.datesubjectcomment a:link, .datesubjectcomment a:visited {
	color: #25909b;
	}
	
.datesubjectcomment a:hover {
	color: #b62657;
	}

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

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

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

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

ul.year li {
	display: inline;		
	}

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

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

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

td.yearmonth {
	color: #444444;
	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;
 background-color: #f7f6f0; 
 -moz-border-radius: 4%;
	}

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

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

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

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

.currentmusic 
       {
       background: url(MUSIC TINY ICON) no-repeat left center;
        padding: 2px 0px 5px 18px;
       }
.currentgroups
       {
       background: url(CUSTOM GROUP CURRENT TINY ICON) no-repeat left center;
        padding: 2px 0px 5px 18px;
       }

/* PROTECTED ENTRY */
	.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
		width: 0;
		height: 0;
		padding: 16px 0px 0 16px;
		background: URL(FRIENDS ONLY ENTRY TINY ICON); 
		}

/* PRIVATE ENTRY */
	.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
		width: 0;
		height: 0;
		padding: 16px 0px 0 16px;
		background: URL(PRIVATE ENTRY TINY ICON); 
		}

.subject img {
     		width: 0;
     		height: 0;
     		background-repeat: no-repeat;
		background: URL(CUSTOM FRIENDS GROUP ENTRY TINY ICON); 
     		padding: 16px 0px 0 16px;
  		}

/* USER */
	.ljuser img { 
  		width: 0;
  		height: 0;
  		background-repeat: no-repeat;
  		background-color:transparent;
		background: URL(USER TINY ICON); 
  		padding: 16px 0px 0 16px;
		}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
		background-color:transparent;
		background: URL(USER TINY ICON); 
  		padding: 16px 0px 0 16px;
		}

/* COMMUNITY */

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
		background-color:transparent;
		background: URL(COMMUNITY TINY ICON);  
 		padding: 16px 0px 0 16px;
		}

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

.clear {
	height: 0px;
	font-size: 0.01px;
	}
	
#lj_controlstrip_statustext {
        color: #f7f6f0;
        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: #f7f6f0 !important;
	text-transform: lowercase;
	}
	
.headerimage {
          position: relative;
	 width: 800px;
	 height: 300px;
         padding: 0px;
         margin-left: auto;
         margin-right: auto;
         margin-top: 0px;
         background-color: transparent !important;
	 background-image: url(HEADER IMAGE);
	 background-position: center;         
         background-repeat: no-repeat;
            }

.separator { height: 20px; }

Header can be found
5 Headers & Chuck Mania Post

Background Image:

PLEASE NO HOTLINKING IMAGES

45. Colorful Chuck Layout

Post a comment in response: