Many frustrating things, mostly to do with userpics and subjects.

[orchidacres]

Hello, everyone! I am currently using a trial Paid account (hoping to upgrade for real in the near future) and having the most unfortunate time editing this stylesheet by riverdale for my journal. Since I am the kind of person who wants my layouts just so, I am prone to making constant edits until it turns out in a way that pleases me -- but more often than not, messing up royally before I get there. This layout's coding was quite clean and pretty the way it already was, and I'm beginning to think I probably should have left it as such, but there are a few certain things I'd very much like to attain from it before I mess up the coding anymore. :p

I'm hoping to be able to:

1. Create the illusion that the navigation links are part of the sidebar and place a header image over the entire layout
2. Turn the upper (grayish) portions of my entries into a border that curves around the userpic on the right (with a moz-border-radius) and lines the area above the date and subject (see screenshots; the bottom one I edited in GIMP to illustrate what I want)
3. Prevent both my recent entries and friends views from creating extra padding under several of the userpics (see screenshot)
4. Make the subjects on my recent entries view clickable again (only a sliver of space under the first subject will link to that post, but none of the other subjects will link at all)
5. Keep the same alignment for all the subjects on my recent and friends views (see screenshot for #3)

Something else you should probably know is that I haven't even touched layers on this account. I understand that for Paid accounts many edits can only be made from within the layer, but seeing as I'm not positive I will buy an upgrade right away, I would prefer that any changes not requiring a layer be done in the regular CSS (besides, I am admittedly not that good at understanding them).

The screenshots, along with my code (which is probably an unholy mess by now), can be found under the cut. Thank you, everyone! ♥


Screenshots for #2:




Screenshot for #3 and #5:


My code:
/*---------------- Original stylesheet by Susanne @ http://community.livejournal.com/ruemadame/ ------------*/

body
{
background-image: url('');
background-repeat: repeat-x;
background-position: top-left;
text-align: left;
background-attachment: scroll;
background-color: #f6f6f6;
font-family: "century gothic", arial;
font-size: 11px;
color: #b5b5b5;
line-height: 20px;
margin: 0px auto 0px auto;
}

a, a:link, a:visited, .ljtags a:link, .ljtags a:visited, .ljtags a:active
{
color: #bebebe;
text-decoration: none!important;
}

.currents a:hover, .ljtags a:hover, a:hover, .datesubjectcomment a:hover, .subject a:hover,
{
text-decoration: none!important;
color: #babfae!important;
}

i, u
{
color: #b5b5b5;
font-family: "arial";
}

h1, h3
{
text-transform: uppercase;
font-size: 13px;
padding-bottom: 7px;
margin: 0px;
font-weight: lighter;
}

p, td, sup
{
text-align: left;
font-family: "century gothic", arial;
color: #b5b5b5;
font-size: 9pt;
line-height: 20px;
}

b , strike
{
color:#aebba1;
font-weight: lighter;
border-bottom: 1px dashed #d2b35f;
}

b:hover
{
color: #d2b35f;
font-weight: lighter;
}

blockquote
{
width: 80%;
font-style:italic;
color: #8f8f8f;
}

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

#content
{
width: 850px;
margin-left: auto;
margin-right: auto;
padding: 0px;
background-color: #f6f6f6;
}

#maincontent
{
margin-top: -30px;
padding: 15px;
font-family: century gothic;
font-size: 11px;
background-color: #transparent;
color: #b5b5b5;
margin-right: 200px;
text-align: justify;
}

#sidebar
{
margin-top: 0px;
margin-top: 10px;
padding: 15px;
font-family: century gothic;
font-size: 11px;
background-color: transparent;
-moz-border-radius-bottomleft: 45px;
-moz-border-radius-topleft: 45px;
-webkit-border-top-left-radius: 45px;
-webkit-border-bottom-left-radius: 45px;
color: #bebebe;
width: 170px;
float: right;
}

#header
{
display: yes;
float: center;
margin-bottom: 10px;
padding: 5px 0 5px 0px;
background-color: #f6f6f6;
background-image: url('');
background-repeat: repeat;
text-align: right;
font-family: "arial", sans-serif!important;
text-decoration: none;
color: #e5e5e5;
font-size: 15pt;
margin-top: 10px;
}

#footer
{
float: center;
margin: 0px auto 0px auto;
text-align: right;
z-index: 100;
clear: both;
font-family: "arial", sans-serif!important;
text-decoration: none;
color: #e5e5e5;
font-size: 15pt;
}

div#header a, div#header a:link, div#header a:visited ,div#footer a, div#footer a:link, div#footer a:visited
{
padding: 0px;
font-family: "arial", sans-serif!important;
text-decoration: none;
color: #cdcecd;
font-size: 15pt;
font-weight: normal;
}

div#header a:hover,
div#footer a:hover
{
color: #babfae;
}

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

ul.navheader li

{
display: inline;
padding: 0x;
margin-right: 25px;
}

.title
{
text-align: right;
margin-top: 0px;
text-decoration: none;
color: #dcdcdc;
display:none;
}

.subtitle
{
display: none;
}

/* sidebar */

.defaultuserpic
{
display: yes;
float:center;
text-align: left;
margin: 0px 0px 0px 0px;
padding-bottom: 20px;
-moz-border-radius-bottomright: 45px;
-webkit-border-bottom-right-radius: 45px;
}

.defaultuserpic img:hover
{
border: 3px solid #e8ece9;
background-color: #f8f8f8;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
padding: 10px;
width: 70px!important;
height: 70px!important;
}

.defaultuserpic img
{
border: 3px solid #eef0ee;
width: 70px!important;
height: 70px!important;
background-color: #f8f8f8;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
padding: 10px;
margin-left: 35px;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited
{
font-family: "arial", sans-serif!important;
text-decoration: none;
font-size: 8pt;
}

div#sidebar a:hover
{
color: #d8d8d8!important;
}

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

.sbarbody2
{
-moz-border-radius-bottomright: 45px;
-webkit-border-bottom-right-radius: 45px;
padding: 0px 5px 20px 5px;
text-align: justify;
}

#sidebar_tags
{
display:yes;
}

#sidebar_summary
{
display:none;
}

#sidebar_calendar
{
display:none;
}

ul.sbarlist
{
padding:0px;
margin: 0px;
list-style: none;
}
#sidebar_linklist
{
display: none;
margin: 0px;
list-style: none;
-moz-border-radius-bottomright: 45px;
-webkit-border-bottom-right-radius: 45px;
border-bottom: 1px dashed #dbdbdb;
padding: 10px 5px 20px 5px;
}

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

li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active
{
font-family: "arial", sans-serif!important;
text-decoration: none;
color: #bebebe;
}

li.sbaritem a:hover
{
list-style: none;
width: 100%;
text-align: right;
color: #d8d8d8!important;
}

li.sbartitle
{
display:yes;
color: #a6a6a6;
font-family: "century gothic", arial!important;
margin: 10px 0 10px 0;
}

/* maincontent */

.subcontent
{
background-color: #ecefe5;
padding:0px;
-moz-border-radius-bottomleft:25px;
-moz-border-radius-bottomright:25px;
-moz-border-radius-topleft:25px;
-moz-border-radius-topright:25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
}

.entry
{
margin: 0px 0px 0px 0px;
text-align: justify;
padding: 30px;
background-color: #ffffff;
-moz-border-radius-bottomright:25px;
-moz-border-radius-bottomleft:25px;
-webkit-border-bottom-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
}

.entry img {
max-width: 440px;
}

.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}

.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}

.userpic
{
position: relative;
float: none;
padding: 13px;
background: transparent;
}

.userpicfriends
{
padding: 13px;
position: relative;
float: none;
text-align: center;
background: transparent !important;
margin-right: 500px;
}

.userpic img, .userpicfriends img
{
border: 3px solid #e9ece2;
background-color: #f4f6f0;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
padding: 10px;
width: 70px!important;
height: 70px!important;
margin-left: 5px;
}

.userpic img:hover, .userpicfriends img:hover
{
border: 3px solid #dee8d8;
background-color: #f4f6f0;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
padding: 10px;
width: 70px!important;
height: 70px!important;
}

.userpic font, .userpicfriends font {
display: none;
position: relative;
left: 4px;
}

.userpicfriends {color:transparent;}

.date
{
font-family: "arial", sans-serif!important;
text-decoration: none;
color: #b5b5b5!important;
font-size: 7pt;
font-weight:normal;
letter-spacing: 0px;
text-align: right!important;
margin-right: 5px;
}

.subject
{
text-align: left;
margin-top: -32px;
font-family: "arial", sans-serif!important;
text-decoration: none;
color: #bebebe;
font-size: 15pt; width: 270px;
font-weight:normal;
letter-spacing: 1px;
padding: 10px 50px 0px 5px;
background-color: transparent;
margin-top: -15px;
}

.subject a, .subject a:link, .subject a:visited
{
color: #bebebe!important;
text-decoration: none;
font-size: 15pt;
}

.datesubject
{
margin-left: 130px;
margin-top: -60px;
padding: 10px;background-color:#ffffff;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius: 25px;
}

.currents
{
font-size: 8pt;
font-family: "arial", sans-serif!important;
text-decoration: none;
color: #bebebe;
text-align: left;
padding: 0px 0 40px 0;
}

/*current mood, current music and current location */

.currents {
text-transform: lowercase;
margin: 0px 0 -20px 0;
}

.currents strong {
font-weight: normal;
}

.currentmusic {
padding: 0 0 0 15px;
background: transparent url(http://pics.livejournal.com/riverdale/pic/0003gpzp) 2px 4px no-repeat;
}

.currentmood {
padding: 0 0 0 15px;
background: transparent url(http://pics.livejournal.com/riverdale/pic/0003hfbe) 2px 3px no-repeat;
}

.currentlocation {
padding: 0 0 0 15px;
background: transparent url(http://pics.livejournal.com/riverdale/pic/0003f5q5) 2px 2px no-repeat;
}

.ljtags
{
padding: 0 0 0 15px;
background: transparent url(http://pics.livejournal.com/riverdale/pic/000485a7) 2px 4px no-repeat;
font-size: 8pt;
font-family: "arial", sans-serif!important;
text-decoration: none;
color: #bebebe;
text-align: left;
position: relative;
display:yes;
margin-top: 20px;
font-weight: lighter;
}

.ljtags a:link, .ljtags a:visited, .ljtags a:active
{
color: #bebebe;
text-decoration: none!important;
font-family: "century gothic", arial, georgia, sans-serif;
}

.currents a:link, .currents a:visited
{
font-family: "century gothic", arial, georgia, sans-serif;
color: #bebebe;
text-decoration: none!important;
}

.comments
{
margin: 30px 0px 0px 0px;
text-decoration:none;
position: relative;
text-align: center;
font-family: "arial", sans-serif!important;
text-decoration: none;
color: #bebebe;
}

div.comments a
{
text-decoration: none;
font-size: 16pt;
font-family: "arial", sans-serif!important;
text-decoration: none;
color: #e5e5e5;
}

div.comments a:hover
{
text-decoration: none;
font-size: 16pt;
color:#d8d8d8;
}

/* maincontent -- entry, reply pages */

.datesubjectcomment
{
text-align: left!important;
margin: 20px -10px 0 -10px;
background-color: #ffffff;
padding: 10px;
}

.userpiccomment
{
position: relative;
border: 3px solid #e6e9df;
background-color: #f4f6f0;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
padding: 10px;
width: 70px!important;
height: 70px!important;
top: -30px;
left: 0px;
margin: 10px 30px -20px 5px;
z-index: 15;
float: left;
}

.box
{
padding: 7px;
}

input, textarea, select
{
background-color: #f6f6f6;
border: 1px solid #eaeaea;
padding: 5px;
margin-top: 5px;
text-align: left!important;
font-family: "century gothic", arial;
font-size: 11px;
color: #b5b5b5;
}

textarea.textbox
{
width: 95% !important;
}

.reply
{
position: relative;
margin: 10px 10px 10px 10px;
padding: 25px 10px 10px 10px;
text-align: left!important;
font-family: "century gothic", arial;
font-size: 11px;
color: #b5b5b5;
background-color: #ffffff;
-moz-border-radius-bottomleft:25px;
-moz-border-radius-bottomright:25px;
-moz-border-radius-topleft:25px;
-moz-border-radius-topright:25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
}

.replytosubject
{
font-weight: bold;
}

.commentreply
{
position: relative;
margin: 10px;
}

.commentbox
{
padding: 10px;
margin: 5px;
background-color: #ffffff;
-moz-border-radius-bottomleft:25px;
-moz-border-radius-bottomright:25px;
-moz-border-radius-topleft:25px;
-moz-border-radius-topright:25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
}

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

.commentinfo
{
background-color: #f6f6f6;
margin-top: 10px;
width: 95%;
}

/* maincontent -- year/achive pages */

ul.year
{
text-align: left;
padding-bottom: 10px;
padding-top: 10px;
}

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

table.yeartable
{
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday
{
background-color: #ecefe5;
padding: 10px;
}

table.yeartable td.yearday
{
background-color: #ecefe5;
text-align: left;
}

td.yearmonth
{
border-style: none;
}

/* footer */

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

ul.navfooter li
{
display: inline;
padding: 0px;
margin-right: 10px;
}

.clearfoot {
clear: both;
}

/* misc */

.clear
{
height: 0px;
}

.skiplinks
{
text-align: center;
font-family: "century gothic", arial, sans-serif!important;
padding: 10px;
}

.ljtaglist
{
list-style-type: none;
margin: -15px 0px 0px 10px;
padding: 5px 15px 10px 125px;
}

.ljtaglist li
{
padding: 5px 5px 5px 20px;
color: #8f8f8f;
background-color: #f6f6f6;
}

ul.ljtaglist
{
background-color: #ffffff;
padding:0px;
-moz-border-radius-bottomleft:25px;
-moz-border-radius-bottomright:25px;
-moz-border-radius-topleft:25px;
-moz-border-radius-topright:25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
color: #8f8f8f;
text-align: left;
margin-left: auto;
margin-right: auto;
padding: 20px;
}

ul.ljtaglist li
{
background-color: #ffffff;
list-style: circle;
list-style-position: inside;
}

h2
{
padding: 15px;
text-align: left;
margin-top: 10px;
text-decoration: none;
font-family: "century gothic", arial, sans-serif!important;
text-decoration: none;
color: #868686;
font-size: 12pt;
font-weight:lighter;
background-color: transparent;
}

.headerimage
{
position: relative;
width: 0px;
height: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("");
background-repeat: no-repeat;
}

.separator
{
background-color: transparent;
background-image: url('');
background-repeat: repeat;
background-position: top-left;
background-attachment: fixed;
height:30px;
}

.ljuser a
{
color: #8f8f8f;
border-bottom:none!important;
font-family: arial, sans-serif!important;
}

.ljuser a b {
color: #8f8f8f;
padding-left:0px;
font-weight:normal;
font-family: arial, sans-serif!important;
}

.ljuser a:hover b {
color: #949494;
}

.ljuser img {
width: 0; height: 0;
background: transparent url(http://pics.livejournal.com/riverdale/pic/00049r6p) no-repeat 0 0;
padding: 16px 14px 0 0px !important;
vertical-align: text-bottom !important
}

.ljuser img[src*="userinfo.gif"]
{
background: transparent url(http://pics.livejournal.com/riverdale/pic/00049r6p) no-repeat center left !important;
padding: 14px 14px 0 0px !important;
}

.ljuser img[src*="community.gif"]
{
background: transparent url(http://pics.livejournal.com/riverdale/pic/000485a7) no-repeat scroll 0 0 !important;
padding: 14px 14px 0 0px !important;
}

.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{width: 0;height: 0;padding: 15px 13px 0 4px !important;
background: url(http://pics.livejournal.com/riverdale/pic/0004bg1e);background-repeat: no-repeat;}

.subject img[src="http://l-stat.livejournal.com/img/icon_groups.gif"]{width: 0;height: 0;padding: 15px 13px 0 4px !important;
background: url(http://pics.livejournal.com/riverdale/pic/0004bg1e);background-repeat: no-repeat;}

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{width: 0;height: 0;padding: 15px 13px 0 4px !important;
background: url(http://pics.livejournal.com/riverdale/pic/0004bg1e);background-repeat: no-repeat;}

.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{width: 0;height: 0;padding: 15px 13px 0 4px !important;
background: url(http://pics.livejournal.com/riverdale/pic/0003s8qb);background-repeat: no-repeat;}

#lj_controlstrip
{
background:#f6f6f6;
}

#lj_controlstrip a
{
color: #bebebe;
}

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

#lj_controlstrip_userpic
{
display:none
}

table#lj_controlstrip td
{
border: solid 0px #eaeaea;
border-left: none;}