layoutlounge | 50. Dark Float with top sidebar

Layout Style: S2 Flexible Squares
Features: Sidebar at top, Scrolling Tags, Custom Page Summary (scrolling), scrolling links
Layout Width: 800px

[ Preview ] [ Live ]

Font(s) Used: Automobile & Tabitha

Layout:

layout_lounge
Header:

graffitigraphic

Sidebar: Using Layouts, Layout Changes for Beginners, Font Tutorial, or Tiny Icon Help see How To Guides.

[ Preview ] [ Live ]

Font(s) Used: Automobile & Tabitha

Layout:

layout_lounge
Header:

graffitigraphic

Sidebar: Using Layouts, Layout Changes for Beginners, Font Tutorial, or Tiny Icon Help see How To Guides.

Dark Layout:

/*--------------------------------
S2 Flexible Squares
Layout by http://community.livejournal.com/layout_lounge/
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
 background-color: #d7f9fd;
 background-image: url(BACKGROUND IMAGE URL);
 background-repeat: repeat;
 background-attachment: fixed;
 color: #eeeeee;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 12px;
 margin: 0px 0 20px 0;
 }

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

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

blockquote {
 width: 550px;
 padding: 0 18px 18px 18px; 
 color: #eeeeee;
 font-size: 12px;
 line-height: 14px;
 font-family: "verdana", arial, verdana, sans-serif;
 text-align: left;
-moz-border-radius:2%;
border:10px solid #333333;
 }

img.special { border: 10px solid #333333;   -moz-border-radius: 2%; }

b, strong {color: #8e8ade;}
i, em {color: #e1276b;}
s, u {color: #4a9923;}div

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

/*--------------General------------*/

#content {  	
 width: 800px;	
 margin-left: auto; 
 margin-right: auto;  
 text-align: left;
 padding: 0px;
 }

#maincontent {
 width: 790px;
 float: left;
 margin: -5px 0px 0px 0px;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 13px;
 color: #eeeeee;
 text-align: center;
 }

.subcontent {
 width: 790px;
 background-color: #000000;
 min-height: 200px;
 margin: 15px 0px 0 0;
 padding-top: 15px;
 -moz-border-radius: 3%;
 }

.title { display: none; }

.subtitle { 
 color: #333333;
 font-family: century gothic,georgia;
 font-size: 42px;
 font-style: normal;
 text-align: right;
 letter-spacing: -1px;
 margin: -150px 5px 0 0;
 text-transform: uppercase;
 }

/*---------------Header--------------*/
#header {		
 width: 800px; 
 position: relative;
 height: 40px;
 color: #eeeeee;
 padding: 1px 0px 0px 0px;
 margin-top: 0px;
 margin-bottom: 10px;
 font-family: "Verdana", Arial;
 font-size: 12px !important;
 text-align: center;
 letter-spacing: 1px;
 text-transform: normal;
 clear: both;
 background-color: transparent;
 }

div#header a, div#header a:link, div#header a:visited {
 color: #eeeeee;
 padding: 0px 0px 0px 0px;
 text-decoration: none;
 }

div#header a:hover {
 padding: 0px 0px 0px 0px;
 text-decoration: none;
 }

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

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

ul.navheader li  {
 display: inline;
 padding: 5px 0px 0px 0px;
 background-color: transparent !important;
 margin: 0 2px;
 }
	
/*----------Header Colors----------*/

body.lj-view-recent div#header li.view { color: #eeeeee !Important; padding: 0px 0px 10px 0px;
 text-decoration: none;
 }
div#header a[href*=".livejournal.com/"] { color: #9363C6; border-bottom: 2px solid #9363C6 !Important; padding: 5px 10px 2px 10px; text-decoration: none;
 }
div#header a:hover[href*=".livejournal.com/"]  { color: #9363C6; border-bottom: 2px solid #444444 !Important; text-decoration: none;
 }

div#header a[href*="/calendar"] { color: #89c1e2; border-bottom: 2px solid #89c1e2 !Important; padding: 5px 10px 2px 10px; text-decoration: none; }
div#header a:hover[href*="/calendar"], body.lj-view-archive div#header li.view { color: #89c1e2;
 border-bottom: 2px solid #444444 !Important; text-decoration: none;
 }

div#header a[href*="/friends"] { color: #9ada5b;
 border-bottom: 2px solid #9ada5b !Important; padding: 5px 10px 2px 10px; text-decoration: none; }
div#header a:hover[href*="/friends"], body.lj-view-friends div#header li.view { color: #9ada5b;
 border-bottom: 2px solid #444444 !Important; text-decoration: none;
 }

div#header a[href*="/profile" ] { color: #e2b13c;
 border-bottom: 2px solid #e2b13c !Important; padding: 5px 10px 2px 10px; text-decoration: none; }
div#header a:hover[href*="/profile"] { color: #e2b13c; border-bottom: 2px solid #444444 !Important; text-decoration: none;
 }

div#header a[href*="PUT YOUR JOURNAL URL HERE EXACTLY"] { color: #ed577c; border-bottom: 2px solid #ed577c !Important; padding: 5px 10px 2px 10px; text-decoration: none;
 }
div#header a:hover[href*="PUT YOUR JOURNAL URL HERE EXACTLY"] { color: #ed577c; border-bottom: 2px solid #444444 !Important; text-decoration: none;
 }

/*-----------Footer------------*/

#footer {			
 width: 800px;
 height: 40px;
 margin: 0px;
 padding: 6px 0 0 0px;
 text-align: center;
 font-family: "Arial", verdana;
 font-size: 15px;
 color: #eeeeee;
 z-index: 100;
 background-color: #000000;
 -moz-border-radius: 4%;
 }

div#footer a {
 padding: 5px;
 letter-spacing: -1px;
 text-align: left;
 color: #89c1e2;
 border-bottom: 2px solid #89c1e2 !Important;
 }

div#footer a:hover {
 padding: 5px;
 color: #89c1e2;
 border-bottom: 2px solid #444444 !Important; 
 background-color: transparent !important;
 }

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

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

/*-------------Sidebar--------------*/

#sidebar {
		padding-top: 2px;
		margin-top: 0px;;
		background-color: transparent;
	  	font-size: 11px;
		font-family: "arial", verdana, sans-serif;
		text-transform: normal;
		color: #eeeeee; 
	  	width: 800px;
	  	height: 155px;
	  	overflow: none;
		float: center;
		text-align: left;
		}

/*-----------  Sidebar -----------*/

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

.sbarbody { 
 padding: 0px 5px 0px 5px;
 float: left;
 margin: 4px;
 background-color: #000000;
 -moz-border-radius: 4%;
 width: 31%;
 }

.sbarbody2 {
 color: #F8F8F8;
 position: absolute; right: 20px; top: 310px;
 width: 200px;
 padding: 15px 15px 15px 15px;
 background-color: #A0A5A9;
 text-align: justify;
 }

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
 color: #3c9cc6;
 display: block;
 text-decoration: none;
 padding: 1px 10px 1px 5px;
 }

div#sidebar a:hover {
 color: #84a0a4;
 padding: 1px 10px 1px 5px;
 }

/*----------Sidebar Components ------------*/
#sidebar_tags .sbarcontent {
 height: 150px;
 overflow-x: hidden; 
 overflow-y: auto;
 }

l.tagList {width: 100%;}
     .tagBox {
     height: 150px;
     overflow-x: hidden;
     overflow-y: scroll;
     scrollbar-arrow-color: #d60014;
     scrollbar-base-color: #eeeeee;
     scrollbar-face-color: #eeeeee;
     scrollbar-highlight-color: #d60014;
     scrollbar-darkshadow-color: #eeeeee;
     scrollbar-shadow-color: #eeeeee;
}

#sidebar_summary .sbarcontent {
 height: 150px;
 overflow-x: hidden; 
 overflow-y: auto;
}

#sidebar_summary li.sbaritem {
 color: #eeeeee;
 border-right: 2px solid #333333;
 border-bottom: 2px solid #333333;
 -moz-border-radius-bottomleft: .5%; 
 -moz-border-radius-bottomright: .5%;
 padding: 3px;
 text-transform: normal;
 margin: 3px;
 text-align: left;
 }

#sidebar_summary li.sbaritem a {
 text-decoration: none;
 display: inline !important;
 color: #eeeeee;
 border: 0px solid #6DA9C1 !important;
 }

#sidebar_summary li.sbaritem a: hover{
 text-decoration: none;
 color: #eeeeee;
 border: 0px solid #eeeeee;
 }

#sidebar_linklist .sbarcontent {
 height: 150px;
 overflow-x: hidden; 
 overflow-y: auto;
}

/*------------  Sidebar - link box contents----------*/

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

li.sbaritem {padding-left: 0px; list-style: block; }

li.sbaritem a {
 padding: 2px;
 margin: 0px 0px 5px 0px;
 list-style: none;
 text-transform: normal;
 border-left: 5px solid #333333;
 }

li.sbaritem a:hover {
 border-left: 5px solid #eeeeee;
 background-color: #333333;
 }

li.sbartitle	{
 list-style: none;
 background-color: transparent;
 color: #84A0A4;
 font-family: "Automobile", verdana, arial;
 font-size: 18px;
 margin-bottom: 10px;
 text-align: center;
 }

/*-----------Entries-----------*/
.entry	{
 padding: 15px;
 margin: 0px;
 color: #eeeeee;
 font-family: "arial";
 font-size: 13px;
 text-align: left;
 }
	
hr {
 color: transparent;
 height: 1px;
 border-bottom: 1px solid #333333;
 }

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

.userpic {
 background-color: #333333 !important;
 position: relative;
 float: right;
 padding: 5px;
 margin: 23px 10px 10px 10px;
 z-index: 15;
 color: #333333 !important;
 border: 2px #eeeeee solid;
 -moz-border-radius: 2%;
 }

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

.userpicfriends a font {color: #14C0CF;}

.date {
 width: 200px;
 margin: -5px -110px 0 0;
 float: right;
 text-align: right;
 color: #eeeeee;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 11px;
 text-transform: uppercase;
 background-color: #000000;
 }

.subject {
 font-weight: none;
 padding-bottom: 5px;
 padding-top: 5px;
 padding-left: 15px;
 margin-top: -15px;
 color: #ed577c;
 font-family: "Tabitha", Verdana, Arial;
 font-size: 20px;
 text-transform: normal;
 text-decoration: none;
 border-bottom: 0px solid #333333;
 background-color: #000000;
 -moz-border-radius-topright: 2%;
 -moz-border-radius-topleft: 2%;
 }
	
.subject a, .subject a:link, .subject a:visited {color: #ed577c;}

.subject a:hover {color: #84A0A4;}

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

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

span.ljuser a:hover b {
 padding-top: 2px;
 padding-bottom: 2px;
 color: #84A0A4;
 font-weight: normal;
 }

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

.ljtags {
 margin-top: 5px;
 color: #eeeeee;
 font-weight: lighter;
 font-size: 10px;
 font-family: "Verdana", arial;
 text-transform: lowercase;
 margin: 15px 0px 0px 0px;
 padding: 2px 0px 5px 18px;
 background: URL(http://i31.tinypic.com/15p046e.jpg) no-repeat center left;
 }
	
.currents strong, .currentmood strong, .currentmusic .currentlocation,

.ljtags strong {
 font-family: "Verdana", arial;
 font-size: 10px;
 color: #eeeeee;
 font-weight: lighter;
 text-transform: lowercase;
 }

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

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

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
 color: #5c89a4;
 font-family: "verdana", arial;
 font-size: 10px;
 text-transform: lowercase;
 font-weight: lighter;
 }
	
.currentlocation a:hover, .ljtags a:hover {
 color: #84a0a4;
 font-family: "verdana", arial;
 font-size: 10px;
 font-weight: lighter;
 text-transform: lowercase;
 }

.comments {
 font-family: "verdana", arial;
 font-size: 10px;
 font-weight: normal;
 text-align: center;
 padding: 10px 5px 5px 5px;
 position: relative;
 clear: center;
 vertical-align: bottom;
 margin: 5px;
 text-transform: lowercase;
 }
	
div.comments a, div.comments a:link, div.comments a:visited{
 color: #84A0A4;
 background-color: #222222;
 border: 1px dotted #333333;
  -moz-border-radius: 4%;
 padding: 5px;
 margin: 5px;
 }

div.comments a:hover {
 color: #1da4e6;
 text-decoration: none;
 background-color: #222222;
 border: 1px dotted #333333;
  -moz-border-radius: 4%;
 padding: 5px;
 margin: 5px;
 }

/*------------Comments Page--------*/
.box {
 padding: 5px;
 margin-top: 0px;
 text-align: left;
 clear: left;
 width: 790px;
 }

form div.box { text-align:center; width: 790px; }

.skiplinks {
 text-align: center;
 margin-bottom: 0px;
 margin-top: 10px;
 font-family: "Verdana", arial;
 padding: 10px;
 font-size: 9px;
 letter-spacing: 1px;
 color: #eeeeee;
 background-color: #000000;
 -moz-border-radius:2%;
 }

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

div#content input,
div#content textarea,
div#content select { color: #777777; border: 1px solid #e6e6e6e6; }
	
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: 12px;
 line-height: 125%;
 color: #eeeeee;
 }
	
.replytosubject {
 color: #eeeeee;
 font-weight: bold;
 text-transform: normal;
 padding: 5px;
 }

.replytoposter {
 color: #1da4e6;
 text-transform: normal;
 padding: 5px;
 }

.commentreply {
 text-align: left;
 position: relative;
 margin: 10px;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 12px;
 color: #eeeeee;
 }
	
.commentbox {
 background-color: #000000;
 padding: 5px;
 margin: 10px;
 text-align: left;
 clear: left;
 -moz-border-radius: 2%;
 }
	
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #1da4e6;}
	
.datesubjectcomment a:hover {color: #84A0A4;}

.commentboxpartial { padding: 10px; margin: 10px; }

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

/*-----------Year/Archive Page----------*/

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

ul.year li {display: inline;}

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

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

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

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

/*-----------Tags Page---------*/

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

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

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

.currentlocation {
 background: url(http://i26.tinypic.com/33v1ds4.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentmood  {
 background: url(http://i32.tinypic.com/2vhsnxy.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentmusic {
 background: url(http://i38.tinypic.com/14w3igm.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentgroups {
 background: url(http://i28.tinypic.com/ta3abn.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

/* PROTECTED ENTRY */
.subject img[src*="icon_protected.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://i26.tinypic.com/2r2nkht.jpg); 
 }

/* PRIVATE ENTRY */
.subject img[src*="icon_private.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://i30.tinypic.com/b8nwj7.jpg); 
 }

/* USER */
.ljuser img {
 width: 0;
 height: 0;
 background-repeat: no-repeat;
 background: transparent url(http://i38.tinypic.com/npngpd.jpg) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

.ljuser img[src*="userinfo.gif"] {
 background: transparent url(http://i38.tinypic.com/npngpd.jpg) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/* COMMUNITY */
.ljuser img[src*="community.gif"] {
 background: transparent url(http://i33.tinypic.com/vie5bq.jpg) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/*-----------Mics-----------*/
.clear { height: 0px; font-size: 0.01px; }
	
#lj_controlstrip_statustext {
 color: #eeeeee;
 font-size: 12px;
 font-weight: bold;
 }

#lj_controlstrip td {
 font-family: "georgia" !important;
 font-size: 12px;
 background-color: #000000 !important;
 border: 0px solid #333333;
 }

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

#lj_controlstrip a:hover { color: #6DA9C1 !important; }
	
.headerimage {
 position: relative;
 width: 800px;
 height: 300px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 5px;
 padding: 0px;
 background-color: transparent;
 background-image: url(HEADER IMAGE URL);
 background-position: center;         
 background-repeat: repeat;
 -moz-border-radius: 4%;
 }

.separator { height: 10px; }

Inverse Layout:

/*--------------------------------
S2 Flexible Squares
Layout by http://community.livejournal.com/layout_lounge/
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
 background-color: #d7f9fd;
 background-image: url(BACKGROUND IMAGE URL);
 background-repeat: repeat;
 background-attachment: fixed;
 color: #222222;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 12px;
 margin: 0px 0 20px 0;
 }

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

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

blockquote {
 width: 550px;
 padding: 0 18px 18px 18px; 
 color: #777777;
 font-size: 12px;
 line-height: 14px;
 font-family: "verdana", arial, verdana, sans-serif;
 text-align: left;
-moz-border-radius:2%;
border:10px solid #EEEEEE;
 }

img.special { border: 10px solid #eeeeee;   -moz-border-radius: 2%; }

b, strong {color: #8e8ade;}
i, em {color: #e1276b;}
s, u {color: #4a9923;}div

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

/*--------------General------------*/

#content {  	
 width: 800px;	
 margin-left: auto; 
 margin-right: auto;  
 text-align: left;
 padding: 0px;
 }

#maincontent {
 width: 790px;
 float: left;
 margin: -5px 0px 0px 0px;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 13px;
 color: #777777;
 text-align: center;
 }

.subcontent {
 width: 790px;
 background-color: #f9f9ff;
 min-height: 200px;
 margin: 15px 0px 0 0;
 padding-top: 15px;
 -moz-border-radius: 3%;
 }

.title { display: none; }

.subtitle { 
 color: #eeeeee;
 font-family: century gothic,georgia;
 font-size: 42px;
 font-style: normal;
 text-align: right;
 letter-spacing: -1px;
 margin: -150px 5px 0 0;
 text-transform: uppercase;
 }

div#header a, div#header a:link, div#header a:visited {
 color: #eeeeee;
 padding: 0px 0px 0px 0px;
 text-decoration: none;
 }

div#header a:hover {
 padding: 0px 0px 0px 0px;
 text-decoration: none;
 }

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

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

ul.navheader li  {
 display: inline;
 padding: 5px 0px 0px 0px;
 background-color: transparent !important;
 margin: 0 2px;
 }
	
/*----------Header Colors----------*/

body.lj-view-recent div#header li.view { color: #555555 !Important; padding: 0px 0px 10px 0px;
 text-decoration: none;
 }
div#header a[href*=".livejournal.com/"] { color: #9363C6; border-bottom: 2px solid #9363C6 !Important; padding: 5px 10px 2px 10px; text-decoration: none;
 }
div#header a:hover[href*=".livejournal.com/"]  { color: #9363C6; border-bottom: 2px solid #444444 !Important; text-decoration: none;
 }

/*-----------Footer------------*/

#footer {			
 width: 800px;
 height: 40px;
 margin: 0px;
 padding: 6px 0 0 0px;
 text-align: center;
 font-family: "Arial", verdana;
 font-size: 15px;
 color: #777777;
 z-index: 100;
 background-color: #f9f9ff;
 -moz-border-radius: 4%;
 }

div#footer a {
 padding: 5px;
 letter-spacing: -1px;
 text-align: left;
 color: #89c1e2;
 border-bottom: 2px solid #89c1e2 !Important;
 }

div#footer a:hover {
 padding: 5px;
 color: #89c1e2;
 border-bottom: 2px solid #444444 !Important; 
 background-color: transparent !important;
 }

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

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

/*-------------Sidebar--------------*/

#sidebar {
		padding-top: 2px;
		margin-top: 0px;;
		background-color: transparent;
	  	font-size: 11px;
		font-family: "arial", verdana, sans-serif;
		text-transform: normal;
		color: #777777; 
	  	width: 800px;
	  	height: 155px;
	  	overflow: none;
		float: center;
		text-align: left;
		}

/*-----------  Sidebar -----------*/

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

.sbarbody {
		padding: 0px 5px 0px 5px;
		float: left;
 margin: 4px;
 background-color: #f9f9ff;
 -moz-border-radius: 4%;
 width: 31%;
		}

.sbarbody2 {
		color: #F8F8F8;
		position: absolute; right: 20px; top: 310px;
		width: 200px;
		padding: 15px 15px 15px 15px;
		background-color: #A0A5A9;
		text-align: justify;
	}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
 color: #3c9cc6;
 display: block;
 text-decoration: none;
 padding: 1px 10px 1px 5px;
 }

div#sidebar a:hover {
 color: #84a0a4;
 padding: 1px 10px 1px 5px;
 }

/*----------Sidebar Components ------------*/
#sidebar_tags .sbarcontent {
     height: 150px;
 overflow-x: hidden; 
     overflow-y: auto;
}

l.tagList {width: 100%;}
     .tagBox {
     height: 150px;
     overflow-x: hidden;
     overflow-y: scroll;
     scrollbar-arrow-color: #d60014;
     scrollbar-base-color: #222222;
     scrollbar-face-color: #222222;
     scrollbar-highlight-color: #d60014;
     scrollbar-darkshadow-color: #222222;
     scrollbar-shadow-color: #222222;
}

#sidebar_summary .sbarcontent {
     height: 150px;
 overflow-x: hidden; 
     overflow-y: auto;
}

#sidebar_summary li.sbaritem {
 color: #777777;
 border-right: 2px solid #eeeeee;
 border-bottom: 2px solid #eeeeee;
 -moz-border-radius-bottomleft: .5%; 
 -moz-border-radius-bottomright: .5%;
 padding: 3px;
 text-transform: normal;
 margin: 3px;
 text-align: left;
 }

#sidebar_summary li.sbaritem a {
 text-decoration: none;
 display: inline !important;
 color: #777777;
 border: 0px solid #6DA9C1 !important;
 }

#sidebar_summary li.sbaritem a: hover{
 text-decoration: none;
 color: #777777;
 border: 0px solid #777777;
 }

#sidebar_linklist .sbarcontent {
     height: 150px;
 overflow-x: hidden; 
     overflow-y: auto;
}

/*------------  Sidebar - link box contents----------*/

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

li.sbaritem {padding-left: 0px; list-style: block; }

li.sbaritem a {
 padding: 2px;
 margin: 0px 0px 5px 0px;
 list-style: none;
 text-transform: normal;
 border-left: 5px solid #777777;
 }

li.sbaritem a:hover {
 border-left: 5px solid #999999;
 background-color: #eeeeee;
 }

li.sbartitle	{
 list-style: none;
 background-color: #000000;
 color: #84A0A4;
 font-family: "Automobile", verdana, arial;
 font-size: 18px;
 padding: 3px 0px 3px 0px;
 margin: -11px -6px 10px -6px;
 text-align: center;
 -moz-border-radius-topleft: 4%;
 -moz-border-radius-topright: 4%;
 }

/*-----------Entries-----------*/
.entry	{
 padding: 15px;
 margin: 0px;
 color: #222222;
 font-family: "arial";
 font-size: 13px;
 text-align: left;
 }
	
hr {
 color: transparent;
 height: 1px;
 border-bottom: 1px solid #eeeeee;
 }

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

.userpic {
 background-color: #eeeeee !important;
 position: relative;
 float: right;
 padding: 5px;
 margin: 23px 10px 10px 10px;
 z-index: 15;
 color: #eeeeee !important;
 border: 2px #222222 solid;
 -moz-border-radius: 2%;
 }

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

.userpicfriends a font {color: #14C0CF;}

.date {
 width: 200px;
 margin: -5px -110px 0 0;
 float: right;
 text-align: right;
 color: #999999;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 11px;
 text-transform: uppercase;
 background-color: #000000;
 }

.subject {
 font-weight: none;
 padding-bottom: 5px;
 padding-top: 5px;
 padding-left: 15px;
 margin-top: -15px;
 color: #ed577c;
 font-family: "Tabitha", Verdana, Arial;
 font-size: 20px;
 text-transform: normal;
 text-decoration: none;
 border-bottom: 0px solid #eeeeee;
 background-color: #000000;
 -moz-border-radius-topright: 2%;
 -moz-border-radius-topleft: 2%;
 }
	
.subject a, .subject a:link, .subject a:visited {color: #ed577c;}

.subject a:hover {color: #84A0A4;}

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

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

span.ljuser a:hover b {
 padding-top: 2px;
 padding-bottom: 2px;
 color: #84A0A4;
 font-weight: normal;
 }

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

.ljtags {
 margin-top: 5px;
 color: #777777;
 font-weight: lighter;
 font-size: 10px;
 font-family: "Verdana", arial;
 text-transform: lowercase;
 margin: 15px 0px 0px 0px;
 padding: 2px 0px 5px 18px;
 background: URL(http://i31.tinypic.com/15p046e.jpg) no-repeat center left;
 }
	
.currents strong, .currentmood strong, .currentmusic .currentlocation,

.ljtags strong {
 font-family: "Verdana", arial;
 font-size: 10px;
 color: #777777;
 font-weight: lighter;
 text-transform: lowercase;
 }

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

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

.comments {
 font-family: "verdana", arial;
 font-size: 10px;
 font-weight: normal;
 text-align: center;
 padding: 10px 5px 5px 5px;
 position: relative;
 clear: center;
 vertical-align: bottom;
 margin: 5px;
 text-transform: lowercase;
 }
	
div.comments a, div.comments a:link, div.comments a:visited{
 color: #84A0A4;
 background-color: #eeeeee;
 background-image: url(http://i34.tinypic.com/16bfzmf.jpg);
 background-repeat: repeat;
  -moz-border-radius: 4%;
 padding: 5px;
 margin: 5px;
 }

div.comments a:hover {
 color: #1da4e6;
 text-decoration: none;
 background-color: #eeeeee;
 background-image: url(http://i34.tinypic.com/16bfzmf.jpg);
 background-repeat: repeat;
  -moz-border-radius: 4%;
 padding: 5px;
 margin: 5px;
 }

/*------------Comments Page--------*/
.box {
 padding: 5px;
 margin-top: 0px;
 text-align: left;
 clear: left;
 width: 790px;
 }

form div.box { text-align:center; width: 790px; }

.skiplinks {
 text-align: center;
 margin-bottom: 0px;
 margin-top: 10px;
 font-family: "Verdana", arial;
 padding: 10px;
 font-size: 9px;
 letter-spacing: 1px;
 color: #777777;
 background-color: #f9f9ff;
 -moz-border-radius:2%;
 }

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

div#content input,
div#content textarea,
div#content select { color: #777777; border: 1px solid #e6e6e6e6; }
	
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: 12px;
 line-height: 125%;
 color: #777777;
 }
	
.replytosubject {
 color: #777777;
 font-weight: bold;
 text-transform: normal;
 padding: 5px;
 }

.replytoposter {
 color: #1da4e6;
 text-transform: normal;
 padding: 5px;
 }

.commentreply {
 text-align: left;
 position: relative;
 margin: 10px;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 12px;
 color: #777777;
 }
	
.commentbox {
 background-color: #f9f9ff;
 padding: 5px;
 margin: 10px;
 text-align: left;
 clear: left;
 -moz-border-radius: 2%;
 }
	
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #1da4e6;}
	
.datesubjectcomment a:hover {color: #84A0A4;}

.commentboxpartial { padding: 10px; margin: 10px; }

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

/*-----------Year/Archive Page----------*/

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

ul.year li {display: inline;}

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

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

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

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

/*-----------Tags Page---------*/

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

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

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

.currentlocation {
 background: url(http://i26.tinypic.com/33v1ds4.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentmood  {
 background: url(http://i32.tinypic.com/2vhsnxy.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentmusic {
 background: url(http://i26.tinypic.com/2nv6qtf.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentgroups {
 background: url(http://i28.tinypic.com/ta3abn.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

/* PROTECTED ENTRY */
.subject img[src*="icon_protected.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://i26.tinypic.com/2r2nkht.jpg); 
 }

/* PRIVATE ENTRY */
.subject img[src*="icon_private.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://i30.tinypic.com/b8nwj7.jpg); 
 }

.ljuser img[src*="userinfo.gif"] {
 background: transparent url(http://i38.tinypic.com/npngpd.jpg) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/* COMMUNITY */
.ljuser img[src*="community.gif"] {
 background: transparent url(http://i33.tinypic.com/vie5bq.jpg) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/*-----------Mics-----------*/
.clear { height: 0px; font-size: 0.01px; }
	
#lj_controlstrip_statustext {
 color: #eeeeee;
 font-size: 12px;
 font-weight: bold;
 }

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

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

.separator { height: 10px; }

HEADER COLORS: in this section there is a PUT YOUR JOURNAL URL HERE EXACTLY you will need to replace with the exact url of your journal. I suggest copy and paste.

Headers:

graffitigraphic
Background Images: Layout Lounge Site

RULES:
No Hotlinking Images
Header can be changed
Background image can be changed or removed.

Threaded | Top-Level Comments Only

From:

saya-asakura.livejournal.com

It's gorgeous =)

sireesanwar.livejournal.com

I'm so glad you like it.

tracyj23.livejournal.com

So pretty! Fabulous work, as always. :)

Thank you.

babyrishin.livejournal.com

I like this layout :D It's so simple, yet it was exactly what I was lookimg for :)) A friend recommended me this page here at LJ. I hope you can make more beautiful layouts like this :))

I make layouts as the mood strikes so you can always come back and see what else I've made. I'm glad you like the layout.

aishitsuzukeru.livejournal.com

a friend pointed me over to your page, and I love this layout!

tried to put it on my journal but I cant figure out how to add links and page summary to the top... I'm totally not keen on this html stuff (^ ^;;

either way, thank you!

I'm glad you love it.

The change your sidebar you're going to want to go this post (http://community.livejournal.com/layout_lounge/15965.html) and pick what you want at the top. Only 3 components.

there we go!

thanks! I thought I was going crazy! trying to mess around with all the codes and what not.

No worries. I know the coding and how to make the journals do what I want and sometimes I get so frustrated trying to get the journal to do something with the coding and THEN I realize it is an option in the journal customizations that LJ provides (where I sent you). Happens to us all.

sumwh-rewayuphi.livejournal.com

First off, I'm totally using this. But now I have a problem.

I love love love this layout, but I can't get it to work right. The spacing doesn't line up and there's double sidebar aspects (two tag lists, page summaries, etc). And secondly, when viewing the journal from public view, the journal won't mod to the html. :(

Help!

I would check your sidebar options at http://www.livejournal.com/customize/options.bml?group=sidebar

If you have your sidebar laid out with multiple tags and such it will duplicate them. Make sure every field is different even if those other features are shut off.

What do you mean about the journal not mod-ing to the html?

Layout Lounge

Layouts, Tutorials, Help, and more

50. Dark Float with top sidebar

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025