layoutlounge | 95. Clean Slate (2 variations)

Layout Style: S2 Flexible Squares
Features: Embedded Fonts, Sidebar on Top
Layout Width: 1000px

Sidebar on Top { Preview } { Live }
Sidebar on side { Preview } { Live }
Credit:

layout_lounge

Theme and Layout Change Tutorial

All embedded in coding from Google Fonts

Sidebar on the Side - no header

/*--------------------------------
S2 Flexible Squares - 95. Clean Slate - side
Layout by http://community.livejournal.com/layout_lounge/
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
 background-color: #f0f0f0;
 background-image: url();
 background-repeat: repeat;
 background-attachment: fixed;
 background-position: top center;
 color: #888888;
 font-family: "Abel", arial, sans-serif;
 font-size: 14px;
 margin: 0px 0 20px 0;
 }

a, a:link, a:visited { color: #004359; }
a:hover { color: #444444; }

blockquote {
 width: 80%;
 margin-left: 10px;
 padding-left: 10px;
 margin-left: auto;
 margin-right: auto;
 color: #444444;
 font-size: 14px; 
font-style: italic;
 text-align: left;
 border-left: 10px solid #E5E5E5; 
 }
img.special, i img { border: 10px solid #e5e5e5; }

b, strong { color: #298779; }
i, em { color: #D6002E; }
u { color: #2F6E8A; }
s, strike { color: #F6A000; }
q { font-style: italic; color: #D6002E; }

.b-repost-item { display:none }

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

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

#content {   
 width: 1000px;
 margin-left: auto; 
 margin-right: auto;  
 text-align: left;
 padding: 0px;
 z-index: 50;
 }

#maincontent {
 width: 720px;
 padding: 45px 0px 0 0px;
 font-family: "Abel", arial, sans-serif;
 font-size: 14px;
 }

.subcontent {
 width: 660px;
 background-color: #f5f4f4;
 padding: 20px 30px 0px 30px;
 font-family: "Abel", arial, sans-serif;
 font-size: 15px;
 color: #333333;
 }

/*---------------Header--------------*/
#header {  
 position: absolute;
 left: 0;
 width: 100%;
 min-height: 20px;
 max-height: 40px;
 text-align: center;
 color: #f9f9f9;
 padding: 6px 0px 10px 0;
 font-family: Lato, arial !important;
 font-size: 14px !important;
 letter-spacing: 0px;
 text-transform: uppercase;
 font-weight: none;
 background-color: #000000;
 z-index: 199;
}

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

div#header a, div#header a:link, div#header a:visited, div#header a:active {
padding: 11px 3px 10px 3px;
margin: 0px;
 letter-spacing: 0px;
 color: #cccccc;
 text-align: center;
}

div#header li.view { 
 color: #f9f9f9;
padding: 11px 0px 10px 6px;
margin: 0px;
 }

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

ul.navheader {
 list-style: none;
 line-height: 24px;
 margin: 0;
 padding: 0;
 }

ul.navheader li  {
 display: inline;
 list-style: none;
 }
 
.title, .subtitle { display: none; }

/*--------------- footer ---------------*/

.lj-view-recent #footer, .lj-view-friends #footer {
top: 90%;
padding:5px 0;
position:fixed;
right:0;
text-align:left;
text-transform:lowercase;
width:100%;
z-index: 0;
}

ul.navfooter{
margin:0 auto;
padding:0;
z-index: 0; }

ul.navfooter a {
}

ul.navfooter li + li a {
float: right;
background-color: rgba(0, 0, 0, 0.8);
padding: 20xp 10px 20px 10px;
 }

ul.navfooter li + li a:hover {  }

.lj-view-recent #footer a, .lj-view-friends #footer a, .lj-view-recent #footer a:link, .lj-view-friends #footer a:link {
background-color: rgba(0, 0, 0, 0.8);
color: #f9f9f9;
font-family: open sans condensed, georgia,arial,sans-serif;
font-size: 13px;
padding: 20px 20px 20px 20px;
margin: 0px 5px -10px 5px;
}

.lj-view-recent #footer a:hover, .lj-view-friends #footer a:hover {
color:#dddddd;
padding: 20xp 10px 20px 10px;
}

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

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

#footer .viewing { display:none; }

/*-------------Sidebar--------------*/
#sidebar {
 width: 260px;
 background-color: #f9f9f9;
 float: right;
 padding: 10px 15px 10px 5px; 
 margin-top: 45px;
 font-family: "Abel", arial, georgia;
 font-size: 14px;
 color: #000000;
 text-align: center;
 text-transform: normal;
 }

.sbarbody2, li.sbaritem2 { 
padding: 5px; 
margin: 0px auto 0px auto; 
 font-family: "Abel", arial, sans-serif;
font-size: 14px !important; 
text-transform: lowercase; 
text-align: center;
list-style-type: none;
 }

.sbarbody3, li.sbaritem3 { 
padding: 10px; 
margin: 0px auto 0px auto; 
 font-family: "Abel", arial, sans-serif;
font-size: 12px !important; 
line-height: 120%;
text-align: left;
list-style-type: none;
 }

.sbarbody {
margin: 0px auto 0px auto;
padding: 5px;
padding-bottom: 5px; 
}

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

li.sbaritem {
position: inline;
list-style-type: none;
margin-top: 2px;
text-align: left;
}

li.sbaritem a {
color: #8A1751;
display: inline;
 font-family: "Abel", arial, sans-serif;
font-size: 14px;
font-weight: lighter;
margin-right: 0px;
padding: 0px;
text-align: left; }

li.sbaritem a:hover {
color:#f9f9f9;  }

li.sbartitle {
background-color: rgba(255, 255, 255, 0.5); 
 list-style: none;
 background-image: none;
 color: #aaaaaa; 
text-align: left;
letter-spacing: 2px;
 font-family: "Abel", trebuchet ms, arial, sans-serif;
 font-size: 14px;
 text-transform: uppercase;
 margin: 5px -12px 0px 8px;
 }

#sidebar_linklist  {
list-style-type:none;
padding: 2px auto 2px auto;
text-align: left !important;
text-transform: uppercase; }

#sidebar_linklist li.sbaritem a {
background-color: #f0f0f0; 
border-bottom: 1px solid #ffffff;
color: #888888;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 8px;
margin: 0px 0px -3px 0px;
text-align: left;
}

#sidebar_linklist li.sbaritem a:hover {
color:#333333; 
background-color: #f0f0f0;
text-align: left;
}

td.sbarcalendar {background-color: transparent !important;
padding: 5px;}

td.sbarcalendarposts {background-color: #f9f9f9; border-bottom: 0px solid #dedede; padding: 3px; box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); }

table.calendar {padding-top: 5px;}

#sidebar_summary .sbarcontent { 
 background-color: #f0f0f0;
 color: #888888;
 padding: 0px;
 margin: 0px 1px 0px 9px;
 text-align: left;
}

#sidebar_summary li.sbaritem {
padding: 5px; 
border-bottom: 1px solid #ffffff;
}

#sidebar_summary .sbarcontent a, #sidebar_summary li.sbaritem a { color: #888888; 
font-size: 12px; }

#sidebar_summary .sbarcontent a:hover, #sidebar_summary li.sbaritem a: hover { color:#333333; 
background-color: #f0f0f0; }

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

li.tagItem {margin-left: 15px; list-style: none;}
.tagList li ul li {list-style: disc;}

#sidebar_tags .sbarcontent { height: 250px;         overflow-x: hidden; overflow-y: auto; margin-right: -12px; padding: 5px 5px 5px 0px; }

li.tagBox a, #sidebar_tags li.sbaritem a { 
background-color: #f0f0f0; 
border-bottom: 1px solid #ffffff;
color: #888888;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 5px 1px 5px 12px;
margin: 0px 0px -3px 0px;
text-align: left;
text-transform: uppercase; 
}

li.tagBox a:hover, #sidebar_tags li.sbaritem a:hover { 
color:#333333; 
background-color: #f0f0f0;
text-align: left;
 }

.defaultuserpic {
width: 100px;
height: 100px;
margin: 8px auto 10px auto;
padding: 10px;
background-color: #f9f9f9 !important;
border: 0px solid #cccccc;
 -webkit-box-shadow: #ccc 0 0 5px;
 -moz-box-shadow: #ccc 0 0 5px;
 -ms-box-shadow: #ccc 0 0 5px;
 -o-box-shadow: #ccc 0 0 5px;
 box-shadow: #ccc 0 0 5px;
}

.defaultuserpic img {
}

.social-roll {
 border-radius: 50%;
 -webkit-transition: all ease 0.3s;
 -moz-transition: all ease 0.3s;
 -o-transition: all ease 0.3s;
 -ms-transition: all ease 0.3s;
 transition: all ease 0.3s;
}
.social-roll:hover {
 box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
 -webkit-transform:rotate(540deg);
 -moz-transform:rotate(540deg);
 -o-transform:rotate(540deg);
 -ms-transform:rotate(540deg);
 transform:rotate(540deg);
}

.facebooklink {
 display: inline-block;
 width: 48px;
 height: 48px;
 background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/facebookhovercircles.png) top;
 text-indent: -99999px;
 margin: 1px;
}
.facebooklink:hover {
 background-position: 48px 48px;
}

.twitterlink{
 display: inline-block;
 width: 48px;
 height: 48px;
 background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/twitterhovercircles.png) top;
 text-indent: -99999px;
 margin: 1px;
}
.twitterlink:hover {
 background-position: 48px 48px;
}

.youtubelink{
 display: inline-block;
 width: 48px;
 height: 48px;
 background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/youtubehovercircles.png) top;
 text-indent: -99999px;
 margin: 1px;
}
.youtubelink:hover {
 background-position: 48px 48px;
}

.rsslink{
 display: inline-block;
 width: 48px;
 height: 48px;
 background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/rsshovercircles.png) top;
 text-indent: -99999px;
 margin: 1px;
}
.rsslink:hover {
 background-position: 48px 48px;
}

*-----------Entries-----------*/
.entry { width: 550px; }

.entry_text {
 background-color: #f9f9f9;
 width: 550px;
 padding: 30px;
 margin: 0px 0px 0px -30px;
 color: #444444;
 font-family: "Abel", arial;
 font-size: 14px;
 line-height: 110%;
 font-weight: 500;
 text-align: left;
 z-index: 50;
 }

p, td{ font-family: "arial"; font-size; 14px; margin:0; padding:0; }

.entry img { max-width: 700px;  }
 
hr { color: transparent; height: 1px; border-bottom: 1px solid #cccccc; }

.entry ul li, ol li, li {
 margin-left: 5px;
 padding: 1px 0px 0px 5px;
 line-height: 100%;
 list-style: normal;
 list-style-position: inside;
 }

.userpic, .userpicfriends {
 float: right;
margin: 5px -20px 10px 5px;
 padding: 10px;
 width: 100px;
 height: 100px;
 text-align: center;
 color: #FFF!important; 
 background: #FFF!important;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: #CCC 0 0 5px;
 -moz-box-shadow: #CCC 0 0 5px;
 -ms-box-shadow: #CCC 0 0 5px;
 -o-box-shadow: #CCC 0 0 5px;
 box-shadow: #CCC 0 0 5px;
 }

.userpic img, .userpicfriends img {
 width: 100px;
 height: 100px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
 border-radius: 10px;
 }
 
.userpicfriends a, .userpicfriends font {
 margin: 0px 0px 0px 0px;
 position: relative;
 background-color: transparent!important;
 float: center;
 font-family: 'TuffyRegular', sans-serif;
 font-size: 11px;
 text-align: center;
 color: #FF5DDD;
text-shadow: 2px 2px 4px #777777;
 -webkit-transition: background-color 0.3s ease;
 -moz-transition: background-color 0.3s ease;
 -ms-transition: background-color 0.3s ease;
 -o-transition: background-color 0.3s ease;
 transition: background-color 0.3s ease;
 }
 
.userpicfriends a:hover, .userpicfriends a font:hover {color: #bbbbbb;  text-shadow: 2px 2px 6px #bbbbbb; }

.date  {
 margin: 5px 10px -10px 0px;
 text-align: right; 
 padding-right: auto;
 padding-left: auto;
 color: #bbbbbb;
 font-family: "Paprika", arial, sans-serif;
 font-size: 12px;
 text-transform: normal;
-moz-border-radius: 6px 6x 0 0;
 -webkit-border-radius: 6px 6x 0 0;
 border-radius: 6px 6x 0 0;
 -khtml-border-radius: 6px 6x 0 0; }

.subject {
 padding: 0px 0px 5px 5px;
 margin: 15px 10px 0px 10px;
 color: #1A5D7A;
font-family: "Special Elite", open sans condensed, georgia, arial;
 font-size: 23px;
 font-weight: normal; 
 text-align: left;
 text-transform: normal;
 }
 
.subject a, .subject a:link, .subject a:visited {color: #1A5D7A;}

.subject a:hover {color: #565656;}

.datesubject {
 background-color: #f9f9f9;
 width: 610px;
 margin: -25px 0px 0px -30px;
 padding: 0px;
 text-align: left;
 }

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

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

.skiplinks {
 text-align: center;
 margin-top: 10px;
 margin-bottom: 0px;
 font-family: "Special Elite", Abel, arial, sans-serif;
 font-size: 14px;
 padding: 10px 10px 5px 10px;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: #999999;
 }

.lj-like {
 width: 100%; 
 clear: left; 
 float: left; 
 text-align: center; 
   line-height: 1 !important;
    margin: 0 !important;
}

.lj-like:after {
    border-collapse: collapse;
    clear: left;
    content: "";
    display: table;
}

/*-----Recent Posts ---*/
.entry--threeposts {
    margin-left: 0px !important;
 background-color: #f9f9f9;
 padding: 10px;
}

/*-----------  Currents--------------*/
.currents, .currentlocation, .currentmood, .currentgroup, .currentmusic {
 width: 610px;
 background-color: #F9F9F9;
padding: 5px;
border: 0px solid #e5e5e5;
margin: 0px 0 0px -30px;
padding: 0px 0px 20px 0px;;
font-size: 9px;
font-family: Verdana;
color: #7F7F7F;
text-align: left; 
}

.currentlocation, .currentmood, .currentgroup, .currentmusic { margin-left: 30px; }

.currentlocation, .currentmusic {  }

.currents strong, .currentmood strong, .currentmusic .currentlocation { font-weight: normal; }

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

.ljtags {
margin-top: 20px;
margin-bottom: -10px;
text-align: left;
color: #808080;
font-family: verdana; 
font-weight: bold; 
font-size: 10px; 
text-transform: uppercase;
}

.comments {
color: #888888;
 font-size: 12px; line-height: 130%; 
letter-spacing:-0.1em;
padding: 10px 5px 10px 5px;
margin-right: -31px;
position: relative;
text-align: right;
width:auto;
-moz-border-radius: 0 10px 10px 0px;
-webkit-border-radius: 0 10px 10px 0px; 
border-radius: 0 10px 10px 0px; 
-khtml-border-radius: 0 10px 10px 0px; 
}

div.comments a, div.comments a:link, div.comments a:visited {
color:#88888888;
font-family: open sans condensed, arial !important;
 font-size: 14px !important; line-height: 130%; 
line-height:1;
padding: 8px;
margin:0;
letter-spacing: 1px; 
text-align: center; }

div.comments a:hover {
color:#000000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
border-left: 0px solid #374C60;
letter-spacing: 3px;
}

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

form div.box { text-align: left; }

center.comment-links {  }

div#footer.box { text-align: center; }

.commentbox {
 background-color: #f9f9f9;
 align: left; 
 padding: 5px; 
 margin: 2px 2px 10px 2px; 
 color: #000000;
padding-bottom: 5px; 
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; 
-khtml-border-radius: 5px;
 }

.datesubjectcomment {
 margin-top: 10px;
 text-align: left;
 padding: 5px;
 font-size: 12px;
 color: #bbbbbb;
 }

.datesubjectcomment a:link, .datesubjectcomment a:visited {
 color: #58A5BC; cursor: crosshair; text-decoration:none; font-weight:none;}
  
.datesubjectcomment a:hover {
 color: #bbbbbb; cursor: crosshair; text-decoration:none; font-weight:none;}

.userpiccomment {
 background-color: #f9f9f9;
 margin: -2px 5px 5px 5px;
 padding: 10px;
 width: 100px;
 height: 100px;
 float: left;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: #CCC 0 0 5px;
 -moz-box-shadow: #CCC 0 0 5px;
 -ms-box-shadow: #CCC 0 0 5px;
 -o-box-shadow: #CCC 0 0 5px;
 box-shadow: #CCC 0 0 5px;
}

.commentreply {
 font-family: "trebuchet ms", arial, sans-serif;
 position: relative;
 margin: 10px;
 font-size: 13px;
 font-family: "arial;
 color: #bbbbbb;
 }

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

.replytosubject {
 font-weight: 300;
 color: #000000;
 font-size: 16px;
 }

div#content textarea  { width: 80%; }

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

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

ul.year li {display: inline;}

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

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

table.yeartable td.yearday { text-align: center; color: #888888; border: 1px solid #cccccc; }

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

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

ul.ljtaglist {
 color: #888888;
 font-family: "Abel", arial, trebuchet ms, sans-serif;
 font-size: 15px;
 text-transform: uppercase;
 padding: 8px 8px 8px 50px;
 border: 0px solid #dedede;
 }

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

/*----------SECTION: Tiny Icons----------*/
.currentlocation {
 background: url(http://i54.tinypic.com/msm1c0.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://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/foaf.png) 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://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/lock-unlock.png) no-repeat !important; 
 }

/* FRIENDS GROUP */
.subject img[src*="icon_groups.gif"]{
width: 0; height: 0; padding: 0 16px 16px 0; background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/foaf.png) no-repeat !important; }

/* PRIVATE ENTRY */
.subject img[src*="icon_private.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/lock.png) no-repeat !important; 
 }

/* USER */
html body .ljuser img {
 width: 0 !important;
 height: 0 !important;
 background-repeat: no-repeat;
 background: transparent url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/1_031.png) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

html body .ljuser img[src*="userinfo.gif"] {
 width: 0 !important;
 height: 0 !important;
 background: transparent url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/1_031.png) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/* COMMUNITY */
html body .ljuser img[src*="community.gif"] {
 width: 0 !important;
 height: 0 !important;
 background: transparent url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/Easter-Island-Head-icon.png) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/*---------Fonts----------*/
@font-face {
  font-family: 'Bilbo Swash Caps';
  font-style: normal;
  font-weight: 400;
  src: local('Bilbo Swash Caps'), local('BilboSwashCaps-Regular'), url(http://themes.googleusercontent.com/static/fonts/bilboswashcaps/v4/UB_-crLvhx-PwGKW1oosDpbko4ywDBcg2f1uYutDOWY.woff) format('woff');
}

@font-face {
  font-family: 'Paprika';
  font-style: normal;
  font-weight: 400;
  src: local('Paprika'), local('Paprika-Regular'), url(http://themes.googleusercontent.com/static/fonts/paprika/v1/5wID_eLdfLKUwzhIdMBadA.woff) format('woff');
}

@font-face {
  font-family: 'Seaweed Script';
  font-style: normal;
  font-weight: 400;
  src: local('Seaweed Script'), local('SeaweedScript-Regular'), url(http://themes.googleusercontent.com/static/fonts/seaweedscript/v1/eorWAPpOvvWrPw5IHwE60FhlQWQpSCpzb2Peu3I-Q34.woff) format('woff');
}

@font-face {
  font-family: 'Cardo';
  font-style: normal;
  font-weight: 400;
  src: local('Cardo'), local('Cardo-Regular'), url(http://themes.googleusercontent.com/static/fonts/cardo/v6/zpisC4kGu76S5N9VhpMnEg.woff) format('woff');
}

@font-face {
  font-family: 'Emilys Candy';
  font-style: normal;
  font-weight: 400;
  src: local('Emilys Candy'), local('EmilysCandy-Regular'), url(http://themes.googleusercontent.com/static/fonts/emilyscandy/v2/PofLVm6v1SwZGOzC8s-I3XhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@font-face {
  font-family: 'IM Fell DW Pica';
  font-style: normal;
  font-weight: 400;
  src: local('IM FELL DW Pica Roman'), local('IM_FELL_DW_Pica_Roman'), url(http://themes.googleusercontent.com/static/fonts/imfelldwpica/v4/W81bfaWiUicLSPbJhW-ATno1aYbFHkK-jWDrR3dOoIA.woff) format('woff');
}

@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  src: local('Abel-Regular'), url(http://themes.googleusercontent.com/static/fonts/Abel/v4/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v7/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}

@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  src: local('Special Elite'), local('SpecialElite-Regular'), url(http://themes.googleusercontent.com/static/fonts/specialelite/v4/9-wW4zu3WNoD5Fjka35Jm_n8qdNnd5eCmWXua5W-n7c.woff) format('woff');
}

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(http://themes.googleusercontent.com/static/fonts/robotoslab/v3/y7lebkjgREBJK96VQi37ZobN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: local('Lora'), local('Lora-Regular'), url(http://fonts.gstatic.com/s/lora/v9/4vqKRIwnQQGUQQh-PnvdMA.woff2) format('woff2'), url(http://fonts.gstatic.com/s/lora/v9/5-AYViExptypIdFoLKAxTA.woff) format('woff');
}

@font-face {
  font-family: 'Rancho';
  font-style: normal;
  font-weight: 400;
  src: local('Rancho'), url(http://fonts.gstatic.com/s/rancho/v6/S-YcqhLwgYWxIA-a7eDp2g.woff2) format('woff2'), url(http://fonts.gstatic.com/s/rancho/v6/puZHhCfWV5yqA8Qtz4KZUg.woff) format('woff');
}

/*-----------LJ Control Strip----*/

#lj_controlstrip_new {
position: fixed;
}

/*-----------Mics-----------*/
.clear { height: 0px; font-size: 0.01px; }

#table  {
 font-family: Arial;
 color: #f9f9f9;
 font-size: 12px;
 line-height: 14px;
 padding: 5px 5px 5px 5px;
 align: center;
}

td.custom {          /*code index*/
font-size: 12px; 
font-family: arial; 
font-weight: normal; 
color: #666666; 
text-align: center; 
vertical-align: top; 
padding: 5px 5px 5px 5px; 
border-color: #1DAB9D; 
border-style: dotted; 
border-width: 1px 1px 1px 1px; 
} 
 
.headerimage {
 position: absolute;
 width: 100%;
 height: 0px;
 margin-top: 36px;
 margin-left: auto;
 margin-right: auto;
 padding: 0px;
 background-image: url();
background-repeat: no-repeat;
 background-position: top center;
 }

.separator { height: 30px; }

Sidebar on Top no header image

/*--------------------------------
S2 Flexible Squares - 95. Clean Slate - sidebar on top
Layout by http://community.livejournal.com/layout_lounge/
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
 background-color: #f0f0f0;
 background-image: url();
 background-repeat: repeat;
 background-attachment: fixed;
 background-position: top center;
 color: #888888;
 font-family: "Abel", arial, sans-serif;
 font-size: 14px;
 margin: 0px 0 20px 0;
 }

a, a:link, a:visited { color: #004359; }
a:hover { color: #444444; }

b, strong { color: #298779; }
i, em { color: #D6002E; }
u { color: #2F6E8A; }
s, strike { color: #F6A000; }
q { font-style: italic; color: #D6002E; }

.b-repost-item { display:none }

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

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

#content {   
 width: 1000px;
 margin-left: auto; 
 margin-right: auto;  
 text-align: left;
 padding: 0px;
 z-index: 50;
 }

#maincontent {
 padding: 250px 0px 0 0px;
 font-family: "Abel", arial, sans-serif;
 font-size: 14px;
 }

.subcontent {
 width: 940px;
 background-color: #f5f4f4;
 padding: 20px 30px 0px 30px;
 font-family: "Abel", arial, sans-serif;
 font-size: 15px;
 color: #333333;
 }

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

div#header a, div#header a:link, div#header a:visited, div#header a:active {
padding: 11px 3px 10px 3px;
margin: 0px;
 letter-spacing: 0px;
 color: #cccccc;
 text-align: center;
}

div#header li.view { 
 color: #f9f9f9;
padding: 11px 0px 10px 6px;
margin: 0px;
 }

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

ul.navheader {
 list-style: none;
 line-height: 24px;
 margin: 0;
 padding: 0;
 }

ul.navheader li  {
 display: inline;
 list-style: none;
 }
 
.title, .subtitle { display: none; }

/*--------------- footer ---------------*/

.lj-view-recent #footer, .lj-view-friends #footer {
top: 90%;
padding:5px 0;
position:fixed;
right:0;
text-align:left;
text-transform:lowercase;
width:100%;
z-index: 0;
}

ul.navfooter{
margin:0 auto;
padding:0;
z-index: 0; }

ul.navfooter a {
}

ul.navfooter li + li a {
float: right;
background-color: rgba(0, 0, 0, 0.8);
padding: 20xp 10px 20px 10px;
 }

ul.navfooter li + li a:hover {  }

.lj-view-recent #footer a:hover, .lj-view-friends #footer a:hover {
color:#dddddd;
padding: 20xp 10px 20px 10px;
}

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

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

#footer .viewing { display:none; }

/*-------------Sidebar--------------*/
#sidebar {
 width: 980px;
 float: left;
 background-color: #f9f9f9;
 padding: 10px 15px 10px 5px; 
 margin-top: 45px;
 font-family: "Abel", arial, georgia;
 font-size: 14px;
 color: #000000;
 text-align: center;
 text-transform: normal;
 }

.sbarbody2, li.sbaritem2 { 
float: left;
width: 280px;
height: 160px;
overflow-x: hidden;
overflow-y: auto;
padding: 5px; 
margin: 0px auto 0px auto; 
 font-family: "Abel", arial, sans-serif;
font-size: 14px !important; 
text-transform: lowercase; 
text-align: center;
list-style-type: none;
 }

.sbarbody {
float: left;
margin: 0px auto 0px auto;
padding: 5px;
padding-bottom: 5px; 
}

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

li.sbaritem {
position: inline;
list-style-type: none;
margin-top: 2px;
text-align: left;
}

li.sbaritem a {
color: #8A1751;
display: inline;
 font-family: "Abel", arial, sans-serif;
font-size: 14px;
font-weight: lighter;
margin-right: 0px;
padding: 0px;
text-align: left; }

li.sbaritem a:hover {
color:#f9f9f9;  }

#sidebar_linklist  {
width: 220px;
height: 160px;
overflow-x: hidden;
overflow-y: auto;
list-style-type:none;
padding: 2px auto 2px auto;
text-align: left !important;
text-transform: uppercase; }

#sidebar_linklist li.sbaritem a:hover {
color:#333333; 
background-color: #f0f0f0;
text-align: left;
}

td.sbarcalendar {background-color: transparent !important;
padding: 5px;}

td.sbarcalendarposts {background-color: #f9f9f9; border-bottom: 0px solid #dedede; padding: 3px; box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); }

table.calendar {padding-top: 5px;}

#sidebar_summary .sbarcontent { 
width: 400px;
height: 160px;
overflow-x: hidden;
overflow-y: auto;
 background-color: #f0f0f0;
 color: #888888;
 padding: 0px;
 margin: 0px 1px 0px 9px;
 text-align: left;
}

#sidebar_summary li.sbaritem {
padding: 5px; 
border-bottom: 1px solid #ffffff;
}

#sidebar_summary .sbarcontent a, #sidebar_summary li.sbaritem a { color: #888888; 
font-size: 12px; }

#sidebar_summary .sbarcontent a:hover, #sidebar_summary li.sbaritem a: hover { color:#333333; 
background-color: #f0f0f0; }

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

li.tagItem {margin-left: 15px; list-style: none;}
.tagList li ul li {list-style: disc;}

#sidebar_tags .sbarcontent { width: 260px; height: 160px;         overflow-x: hidden; overflow-y: auto; margin-right: -12px; padding: 0px 5px 5px 0px; }

li.tagBox a:hover, #sidebar_tags li.sbaritem a:hover { 
color:#333333; 
background-color: #f0f0f0;
text-align: left;
 }

.defaultuserpic {
float: left; 
width: 100px;
height: 100px;
padding: 30px 20px 10px 20px;
}

.defaultuserpic img {
}

*-----------Entries-----------*/
.entry { width: 840px; }

.entry_text {
 background-color: #f9f9f9;
 width: 840px;
 padding: 30px;
 margin: 0px 0px 0px -30px;
 color: #444444;
 font-family: "Abel", arial;
 font-size: 14px;
 line-height: 110%;
 font-weight: 500;
 text-align: left;
 z-index: 50;
 }

p, td{ font-family: "arial"; font-size; 14px; margin:0; padding:0; }

.entry img { max-width: 700px;  }
 
hr { color: transparent; height: 1px; border-bottom: 1px solid #cccccc; }

.entry ul li, ol li, li {
 margin-left: 5px;
 padding: 1px 0px 0px 5px;
 line-height: 100%;
 list-style: normal;
 list-style-position: inside;
 }

.subject {
 padding: 10px 0px 5px 20px;
 margin: 15px 10px 0px 0px;
 color: #1A5D7A;
font-family: "Special Elite", open sans condensed, georgia, arial;
 font-size: 23px;
 font-weight: normal; 
 text-align: left;
 text-transform: normal;
 }
 
.subject a, .subject a:link, .subject a:visited {color: #1A5D7A;}

.subject a:hover {color: #565656;}

.datesubject {
 width: 900px;
 background-color: #f9f9f9;
 margin: -25px 0px 0px -30px;
 padding: 0px;
 text-align: left;
 }

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

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

.lj-like {
 width: 100%; 
 clear: left; 
 float: left; 
 text-align: center; 
   line-height: 1 !important;
    margin: 0 !important;
}

.lj-like:after {
    border-collapse: collapse;
    clear: left;
    content: "";
    display: table;
}

/*-----Recent Posts ---*/
.entry--threeposts {
    margin-left: 0px !important;
 background-color: #f9f9f9;
 padding: 10px;
}

/*-----------  Currents--------------*/
.currents, .currentlocation, .currentmood, .currentgroup, .currentmusic {
 width: 900px;
 background-color: #F9F9F9;
padding: 5px;
border: 0px solid #e5e5e5;
margin: 0px 0 0px -30px;
padding: 0px 0px 20px 0px;;
font-size: 9px;
font-family: Verdana;
color: #7F7F7F;
text-align: left; 
}

.currentlocation, .currentmood, .currentgroup, .currentmusic { margin-left: 30px; }

.currentlocation, .currentmusic {  }

.currents strong, .currentmood strong, .currentmusic .currentlocation { font-weight: normal; }

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

.ljtags {
margin-top: 20px;
margin-bottom: -10px;
text-align: left;
color: #808080;
font-family: verdana; 
font-weight: bold; 
font-size: 10px; 
text-transform: uppercase;
}

div.comments a:hover {
color:#000000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
border-left: 0px solid #374C60;
letter-spacing: 3px;
}

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

form div.box { text-align: left; }

center.comment-links {  }

div#footer.box { text-align: center; }

.datesubjectcomment {
 margin-top: 10px;
 text-align: left;
 padding: 5px;
 font-size: 12px;
 color: #bbbbbb;
 }

.commentreply {
 font-family: "trebuchet ms", arial, sans-serif;
 position: relative;
 margin: 10px;
 font-size: 13px;
 font-family: "arial;
 color: #bbbbbb;
 }

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

.replytosubject {
 font-weight: 300;
 color: #000000;
 font-size: 16px;
 }

div#content textarea  { width: 80%; }

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

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

ul.year li {display: inline;}

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

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

table.yeartable td.yearday { text-align: center; color: #888888; border: 1px solid #cccccc; }

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

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

ul.ljtaglist {
 color: #888888;
 font-family: "Abel", arial, trebuchet ms, sans-serif;
 font-size: 15px;
 text-transform: uppercase;
 padding: 8px 8px 8px 50px;
 border: 0px solid #dedede;
 }

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

/*----------SECTION: Tiny Icons----------*/
.currentlocation {
 background: url(http://i54.tinypic.com/msm1c0.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://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/foaf.png) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

/*-----------LJ Control Strip----*/

#lj_controlstrip_new {
position: fixed;
}

/*-----------Mics-----------*/
.clear { height: 0px; font-size: 0.01px; }

#table  {
 font-family: Arial;
 color: #f9f9f9;
 font-size: 12px;
 line-height: 14px;
 padding: 5px 5px 5px 5px;
 align: center;
}

.separator { height: 30px; }

Additional Layout Directions: Adding A Header image

Currently this layout is not set up for a Header Image. However you can add on by putting the link in the .headerimage section. You should change the height in that section to the same height as your image. This will make your header overly your journal. Follow the directions below to change that...

First find the .maincontent coding. Currently it has a padding of 45px on top. If you image is 300px in height then you will want to add 300px to this 45px padding for a total of 345px. If you image is a height of 250px then your total top padding would be 295px and so on.

Then find your .sidebar coding. In this you will see the margin-top is set to the same 45px. The same idea applies. If you image is 300px in height add 300px to 45px for 345px.

Helpful Tutorials:

Common Issues

Theme and Layout Change Tutorial

Image Tutorial: Adding Background & Header Images in Coding

Sidebar: What I Do and Do NOT Want On It

LJ Advertisements: What is that weird box on my LJ?

More Images:
More Headers: Layout Lounge: Headers
More Background Images: Layout Lounge Site
More Tiny Icons: Layout Lounge Site

RULES:
No Hotlinking Images #4 under general
Header can be changed
Background image can be changed or removed.
Credit Necessary.

Having Trouble? Try:
Theme and Layout Change Tutorial or Helpful Hints
If that didn't work. Comment Below with example if possible.

Flat | Top-Level Comments Only

From:

kyoselflove.livejournal.com

~~Hi! I was wondering if it was possible to add a rotating header? Or is that something you can't do on LJ?~~

Never mind! I figured it out with these tutorials:
http://s2flexisquares.livejournal.com/527644.html
http://s2flexisquares.livejournal.com/186834.html?thread=1869778#t1869778

Thanks for this layout once again <3

Edited Date: 2015-09-26 05:56 am (UTC)

sireesanwar.livejournal.com

I've also found just making a gif image of rotating banners works as well. Thanks.

Oh! Haha I didn't think of that... xD

Neither had I originally and I agonized over how to get it to work and then it hit me and I felt silly. But sometimes we just don't think it will be easy.

yoru-no-hikaru.livejournal.com

I totally love this, especially the sidebar on the top! <3 However, I am having some trouble with the "blurb/free text" part of the sidebar. Somehow it's "array". The "title" will appear left next to the actual box (instead of at the top) and the text box is also not the same as the ones for e.g. "tags" box and such. It doesn't have a background colour either, but that's something I can live with. But it looks a bit weird altogether. Do you have any idea why that is? You can look at it here: http://author-paradise.livejournal.com/46718.html
I know, it's a different theme that I used, but I checked and the phenomenon is the same with the original theme. I would appreciate your help very much, because I really, really like this solution and I want to use it, but I'm just not happy with it as is. D:

I will look in on this soon. My mom has been in the hospital and Real Life is crazy right now.

No rush here. I hope your mom is recovering well. And RL can be so busy, I know. I've made some further adaptions to make it look a bit smoother, but maybe you'll find a way to make it work even better.

The Blurb's title is the only one that does this and I've never figured out why. It is really frustrating. For all the other issues... I've figured it all out. What I would recommend is putting the title in your Free Text section and coding for it.

So in the Blurb section I added.
Title

Then in the coding I did this:

h15 {
display: block;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
list-style: none;
background-image: none;
color: #aaaaaa;
text-align: left;
letter-spacing: 2px;
font-family: "Abel", trebuchet ms, arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
margin: 5px -12px 0px 8px;
}

Now it matches the others.

Go to

workshop_rees to see the outcome and get the new coding for your layout which fixes things.(with the above coding added).

Layout Lounge

Layouts, Tutorials, Help, and more

95. Clean Slate (2 variations)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025