Live Preview |
IMG | S2 Flexible Squares
InstructionsNote: this layouts looks best when you change your journal ads to "
in between entries"
Best view: best viewed in chrome, firefox, IE
Browser Compatible: tested in chrome, firefox, and IE
Rules:
- place the following credit code, or credit
abellalayouts, in your Profile or Sidebar
- please comment if you're taking my layout
- feel free to change around the background and colors --> as long as you credit me!
- feel free to ask any questions
- i love feedback! let me know what you think!
- please
add me for updates
Credit:
Stylesheet by
Code:
/****************************************
Layout by
http://community.livejournal.com/abellalayouts/Style: Flexible Squares, S2
Layout: Still Waiting
****************************************/
/* Colors
dark blue: #3A8B96
light blue: #b2e0e7
text grey: #4e5252
*/
*{margin: 0; padding: 0;}
body{ background: url(
http://i30.tinypic.com/24gu2d0.jpg) 94% 99% no-repeat #b2e0e7; font-family: Lucida Sans, sans-serif; font-size:12px; color: #4e5252; }
a, a:link, a:visited , a:active { color: #3A8B96; font-size: 10px; text-decoration: none;}
a:hover{color: #b2e0e7;}
h2 {display: none;}
.title, .subtitle {color: #3A8B96; font-size: 18px; line-height: 0.7; text-align: right; margin: 0 auto;}
.subtitle {font-size: 12px; font-style: italic; letter-spacing: 2px}
#content{ margin: 0 auto; background: url(
http://i29.tinypic.com/2j5yy5i.jpg) 35px 5px no-repeat}
#maincontent{ width: 750px; margin: 0 auto; padding: 90px 0 40px 90px; background: url(
http://i29.tinypic.com/jjmm2c.jpg) top left no-repeat}
.subcontent{ padding: 20px; background: #fff; margin: 10px 0}
.entry { margin: 20px 0 auto 0; }
.entry_text{ font-size: 11px; line-height: 1.3; padding: 0 15px}
#header{ color:#fff; font-size: 13px; text-transform: lowercase; width: 750px; padding-left: 90px; margin: 0 auto}
.headerimage {background: url() no-repeat; margin: 0 auto; width: 0px; height: 0px }
div#header li { }
div#header li.view {text-transform: uppercase}
div#header a, div#header a:link, div#header a:visited { color: #fff; font-size: 13px; }
div#header a:hover, div#footer a:hover{ color: #3A8B96; text-transform: uppercase}
ul.navheader{ color: #fff; background: #4e5252; margin: 0 auto 10px auto; padding: 5px 10px}
ul.navheader li{ list-style: none; display: inline; padding: 0 20px; border-right: 1px solid #3A8B96}
ul.navheader li:hover {}
#sidebar{ font-size: 10px; text-transform: lowercase; float: left; position: absolute; top: 45px; left: 0px; width: 10px; min-width: 10px; text-align: left; padding: 5px; background: #4e5252; overflow: hidden; z-index: auto; height: 10px; min-height: 10px}
#sidebar:hover {width: auto; height: auto; *width: 200px}
.lj-view-archive #sidebar {top: 90px}
.lj-view-entry #sidebar {top: 90px}
.defaultuserpic {text-align: center; padding: 10px 20px}
.defaultuserpic img {}
.sbarbody2 {width: 150px; color: #fff; padding: 10px 15px; text-align: justify}
li.sbartitle {display: none;}
table.calendar {text-align: center; color: #4e5252; margin: 0 auto; padding: 0 15px}
.sbarcalendar, .sbarcalendarposts { padding: 3px 3px; background: #f2f2f2;}
.sbarcalendar:hover, .sbarcalendarposts:hover {}
.sbarcalendarposts a, .sbarcalendarposts {color: #3A8B96; border-bottom: 1px solid #3A8B96; border-top: 1px solid #3A8B96 }
ul.sbarlist{ list-style: none; padding: 2px 15px}
li.sbaritem{ list-style: none; padding: 4px 5px; text-align: center; border-bottom: 1px solid #3A8B96 }
li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {font-size: 12px; padding: 2px 0; color: #fff; }
li.sbaritem a:hover {color: #3A8B96; text-transform: uppercase}
.userpic, .userpicfriends{ float: right; text-align:center; background: transparent !important; margin-top: -20px; margin-right: -20px; padding-bottom: 10px; padding-left: 10px}
.userpicfriends font {color: #3A8B96}
.userpic img, .userpicfriends img { padding: 15px; background: #4e5252 }
.subject{ }
.subject a, .subject {color: #3A8B96; font-size: 15px; line-height: 0.8}
.subject a:hover {color: #4e5252;}
.date{ line-height: 1; font-size:10px; color:#4e5252; }
.datesubject{ text-align: left; margin-left: 15px; margin-right: 140px; border-bottom: 1px solid #b2e0e7; padding-bottom: 7px}
.entry ol {padding: 5px 0}
.entry ul { list-style: circle; padding: 5px 0 }
.entry ol li{ padding-left: 5px; margin-left: 45px;}
.entry ul li {padding-left: 7px; margin-left: 43px; }
.comments{ text-align: right; color:transparent; margin: 0px auto;}
div.comments a, div.comments a:visited, div.comments a:active{font-size: 12px; }
div.comments a:hover{ color: #4e5252}
#footer { text-transform:lowercase;z-index:10; text-align: center; margin-left: 100px}
ul.navfooter{ margin:0 auto; padding:0; }
div#footer a, div#footer a:link, div#footer a:visited {color:#b2e0e7; font-size:0; padding:40px 40px 0 30px; *padding: 20px 40px 0 30px; *margin-top: -10px}
div#footer a:hover {font-size:0; }
ul.navfooter li { background:url("
http://i27.tinypic.com/33ab88o.jpg") no-repeat 0 0 transparent; display: inline; list-style:none outside none; margin:0 5px; padding:10px 40px 0px 40px; width: 121px}
ul.navfooter li + li {background:url("
http://i30.tinypic.com/s4umft.jpg") no-repeat 0 0 transparent; padding:20px 35px; width: 121px}
#footer .viewing { display:none; }
.clearfoot{ clear: both; }
div.ljtags {margin-top: 15px; padding: 3px 5px 3px 15px; font-size: 12px; color: #3A8B96; font-weight: bold; background:url(
http://i46.tinypic.com/347d361.jpg) no-repeat left center}
div.ljtags a {color: #4e5252; font-size: 11px; font-weight: normal;}
.currents{ color: #4e5252; font-size: 11px; margin-top: -33px; margin-left: 15px}
.currentlocation, .currentmood, .currentmusic{ padding-left: 9px; color: #4e5252;}
.currentlocation a {color: #4e5252;}
.currents strong {display: none}
.currentlocation{ background:url(
http://i47.tinypic.com/6f3334.jpg) no-repeat left center; padding:0 0 0 15px; }
.currentmood{ background:url(
http://i48.tinypic.com/2i1l4ie.jpg) no-repeat left center; padding:0 0 0 15px; }
.currentmusic{ background:url(
http://i46.tinypic.com/jfu91i.jpg) no-repeat left center; padding:0 0 0 15px; }
blockquote { font-size: 10px; padding: 5px; margin: 10px auto; color: #3A8B96; text-indent: 25px; text-align: justify; line-height: 1; width: 440px; border-top: 1px solid #b2e0e7; border-bottom: 1px solid #b2e0e7}
code, kbd, pre, tt { font-family: sans-serif; }
#lj_controlstrip {background: #b2e0e7; }
#lj_controlstrip a:link, #lj_controlstrip a:visited, #lj_controlstrip a:active, #lj_controlstrip, #lj_controlstrip_statustext {color: #3A8B96; font-family: Lucida Sans;}
.separator {}
.box {padding: 30px}
.commentbox {background: #fff; margin: 15px 0; min-height: 150px; }
.datesubjectcomment {margin: 10px; padding-top: 10px; color: #3A8B96}
.userpiccomment {float: right; border: 15px solid #4e5252; margin-left: 10px}
.commentreply {margin: 10px}
.skiplinks, .skiplinks a {text-align: center}
table.yeartable {margin: 0 auto}
ul.year {padding: 10px 30px }
table.yeartable td.yearday {padding-left: 0px;}