style_system | Styling comments and notifications

(OK, I fumbled this one and posted it to the wrong comm, so this time I'm double checking to make sure it goes to the right location)

My question is this: I would like to style replies and IP address notifications for

mag7wallpapers.

Using Firebug I discovered that span.de is what I needed to style. I followed the instructions used on this web page but the result wasn't exactly what I was hoping for. The notice now covers the Post comment, Preview and More options buttons, and I can't figure out how to separate the two.

I would also like to lower the Quote button next to Subject, or move it up - make that whole area neater, because the elements are all over the place - if it can be done. And also, have the notice expand to the width of the textarea.

(click to enlarge)

Help?

Original css:

/*
Layout: TOP OF THE CLASS 
Theme: STUDIOUS

CREDITS
CSS: Sarken - http://sarken.dreamwidth.org/1751138.html
Icons: Yusuke Kamiyamane - http://p.yusukekamiyamane.com/
Colors: Mgine - http://www.colourlovers.com/palette/1305411
*/

body {
background-color: #3D3E40;
color: #222;
font-family: 'Lucida Grande', Helvetica, sans-serif;
margin: 0;
padding: 0;
border: 0;
}

a {
color: #3D3E40;
}

a:hover {
color: #3D3E40;
}

a:visited {
color: #3D3E40;
}

#canvas {
margin: 11em auto 0;
padding: 0;
}

#primary {
background-color: #9EBFB8;
width: 100%;
padding: .5em 0 .25em 0;
margin: 0 auto;
clear: both;
}

#primary > .inner:first-child {
padding: 0;
margin: 0;
}

.one-column #secondary {
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 75%;
padding-bottom: .5em;
color: #DBD5CC;
z-index: 50;
}

.has-navstrip #secondary {
position: absolute;
top: 50px;
left: 0;
width: 100%;
font-size: 75%;
padding-bottom: .5em;
color: #DBD5CC;
z-index: 50;
}

#secondary .inner {
margin: 0 2em 0 0;
padding: 0;
}

#secondary > .inner:first-child {
padding: 0;
margin: 0 0 0 -2em;
}

.one-column #tertiary {
clear: both;
margin: .5em auto 1em auto;
width: 100%;
font-size: 75%;
color: #DBD5CC;
}

#tertiary .inner {
margin: 0 2em 0 0;
padding: 0;
}

#tertiary > .inner:first-child {
padding: 0;
margin: 0 0 0 -2em;
}

/*HEADER*/

#header {
position: absolute;
top: 0;
left: 2em;
padding: 0;
margin: .5em;
background-color: transparent;
color: #ECE4DC;
width: 20%;
height: 11em;
z-index: 20;
}

.has-navstrip #header {
position: absolute;
top: 45px;
left: 2em;
}

#header > .inner {
padding: 0;
margin: 0;
text-align: center;
}

h1#title {
padding: 0;
margin: .5em 0 0 0;
font-style: italic;
font-family: Georgia, serif;
font-weight: normal;
font-size: 140%;
}

h2#subtitle {
padding: 0;
margin: 0;
font-family: 'Lucida Grande', Helvetica, sans-serif;
font-weight: normal;
font-size: 90%;
}

h2#pagetitle {
display: none;
}

/*ALL MODULE SECTIONS*/

.module {
margin: 0;
padding: 0;
border: 0;
}

.module a {
color: #D94848;
text-decoration: none;
}

.module a:visited {
color: #82BCB0;
}

.module a:hover {
color: #E0D9D1;
text-decoration: underline;
}

.module .module-header {
color: #93BFB7;
padding-bottom: 0px;
border-bottom: 1px #6C6E72 dotted;
width: 95%;
}

.module .module-header a {
color: #93BFB7;
width: 95%;
}

.module .module-content {
width: 94%;
}

div.module-calendar .module-content a {
text-decoration: underline;
}

div.module-calendar .module-content td.entry-day, div.module-calendar .module-content td.empty-day {
border: 1px #4E4F52 solid;
}

.module-userprofile .module-content {
text-align: center;
min-height: 100px;
}

.module-userprofile .userpic {
float: left;
margin-right: .75em;
padding: 2px;
}

.module-userprofile .userpic img {
width: 65px;
height: 65px;
padding: 4px;
border: 1px #4E4F52 solid;
}

.module-userprofile .journal-name {
padding-top: 20px;
}

.module-userprofile ul.userlite-interaction-links {
margin-top: .25em;
}

/*TOP MODULES*/

#secondary .module {
float: right;
width: 24%;
background-color: #3D3E40;
}

#secondary div.module-navlinks ul.module-list {
padding: .75em 0 0 0;
margin: 0;
}

#secondary div.module-navlinks ul.module-list li {
list-style: none;
}

#secondary div.module-navlinks ul.module-list li a {
display: block;
background-color: #BA3E3E;
text-align: center;
color: #F8F3EC;
}

#secondary div.module-calendar .module-content {
font-size: 75%;
padding-bottom: 0;
}

#secondary .module-typelist .module-header {
text-align: center;
}

#secondary .module-typelist .module-content {
text-align: center;
}

#secondary .module-typelist .module-content ul {
margin: 0;
padding: 0;
}

#secondary .module-typelist .module-content ul li {
list-style: none;
margin: .15em 0;
}

/*NAVIGATION TOP*/

.topnav {
margin: 0 10%;
text-align: left;
}

/*ENTRIES*/

div.entry {
background-color: #BA3E3E;
padding: 0;
width: 70%;
margin: 0 auto 2em auto;
border: 0;
}

div.entry > div.inner {
background-color: #F8F3EC;
padding: 0;
margin: 0 140px 0 0;
border: 0;
}

div.entry div.header {
letter-spacing: 1px;
padding: .5em .5em .5em .65em;
margin: 0 0;
background-color: #F8F3EC;
}

div.entry div.header a {
text-decoration: none;
}

div.entry h3.entry-title {
font-size: 150%;
padding: .15em 0;
margin: 0 0 0 0;
color: #4E4F52;
}

div.entry h3.entry-title a {
color: #4E4F52;
}

div.entry h3.entry-title a:hover {
color: #93BFB7;
}

div.entry span.datetime {
text-transform: uppercase;
padding: 0;
font-size: 75%;
color: #AAA;
}

div.entry span.datetime a {
color: #AAA;
}

div.entry span.access-filter img {
display: none;
}

div.entry span.restrictions img {
display: none;
}

div.entry-content {
margin: 0 0;
padding: .75em 1.5em 2em 1.5em;
text-align: justify;
min-height: 80px;
background-color: #F8F3EC;
font-size: 95%;
color: #222;
}

div.entry-content a {
color: #67A89B;
}

div.entry-content a:hover {
color: #67A89B;
}

div.entry div.userpic {
float: right;
clear: left;
margin: 0 -140px 0 0;
width: 140px;
text-align: center;
}

div.entry div.userpic img {
padding: 4px;
margin-top: -30px;
margin-bottom: 2px;
border: 1px solid #D94848;
}

div.entry span.poster {
float: right;
clear: both;
text-align: center;
margin: 0 -139px 0 0;
font-size: 60%;
width: 138px;
color: #222;
}

div.entry span.poster a {
color: #F8F3EC;
font-weight: normal;
text-decoration: none;
}

div.entry span.poster img {
display: none;
}

div.entry div.metadata {
font-size: 80%;
margin: 0 0;
padding: 0 0 0 1.5em;
color: #BFBFBF;
background-color: #F8F3EC;
}

div.entry div.metadata span.metadata-item {
color: #BA3E3E;
}

div.entry div.metadata ul, div.entry div.metadata ul li {
margin-bottom: 0;
}

div.entry div.footer {
margin: 0 0;
padding: 0 1em .75em 1.5em;
background-color: #F8F3EC;
}

div.entry div.footer div.tag {
color: #BFBFBF;
font-size: 80%;
margin: 0 0 0 0;
}

div.entry div.footer div.tag ul li a {
color: #4E4F52;
}

ul.entry-management-links {
margin: 0;
padding-top: .85em;
text-align: center;
}

ul.entry-interaction-links {
margin: 0;
text-align: center;
}

ul.entry-management-links a, ul.entry-management-links a:hover, ul.entry-management-links a:visited, ul.entry-interaction-links a, 
ul.entry-interaction-links a:hover, ul.entry-interaction-links a:visited {
color: #BA3E3E;
}

/*COMMENTS*/

#comments {
width: 70%;
margin: 0 auto;
padding: 0;
}

div.comment {
background-color: #F8F3EC;
border-bottom: .25em #BA3E3E solid;
margin: 0;
padding: 0;
}

.comment-wrapper-even div.comment {
border-bottom: .25em #3D3E40 solid;
}

div.comment div.header {
margin: 0;
font-size: 80%;
background-color: #BA3E3E;
}

.comment-wrapper-even div.comment div.header {
background-color: #3D3E40;
color: #F8F3EC;
}

div.comment div.comment-title {
background-color: #9EBFB8;
}

div.comment div.comment-title h4 a {
padding: .25em .25em 0 .25em;
text-transform: uppercase;
text-decoration: none;
font-weight: normal;
font-size: 110%;
color: #222;
}

div.comment span.datetime {
padding: .25em .25em 0 .25em;
margin: 0;
}

div.comment span.poster {
font-size: 80%;
}

div.comment span.poster-ip {
font-size: 80%;
color: #3D3E40;
}

div.comment div.contents {
padding: 0 0 0 .25em;
margin: 0;
}

div.comment div.userpic {
float: right;
width: 76px;
text-align: center;
margin: .5em;
}

div.comment div.userpic img {
width: 70px;
height: 70px;
border: 3px #DBD5CC solid;
}

div.comment div.comment-content {
margin: 0;
padding: 1em 0 .5em .75em;
font-size: 95%;
}

div.comment div.footer {
margin: 0;
clear: both;
padding: .5em .25em;
text-align: right;
font-size: 80%;
text-transform: uppercase;
}

ul.comment-management-links {
margin: 0;
text-align: center;
}

ul.comment-interaction-links {
margin: 0;
text-align: center;
}

ul.comment-management-links a, ul.comment-management-links a:hover, ul.comment-management-links a:visited, ul.comment-interaction-links a, 
ul.comment-interaction-links a:hover, ul.comment-interaction-links a:visited {
color: #BA3E3E;
}

/*REPLY PAGE*/

.page-reply .comment {
width: 70%;
margin: 0 auto 1em auto;
border: 0;
background-color: #F8F3EC;
}

#qrform table { 
border: 0 !important;
}

table.talkform {
width: 70%;
padding: 0 2em;
border-top: .75em solid #BA3E3E;
border-bottom: .35em solid #BA3E3E;  
background-color: #F8F3EC; 
margin: 0 auto;
}

input, select, textarea {
border: 1px solid #BA3E3E;
background-color: #F8F3EC;
}

/*NAVIGATION BOTTOM*/

.bottomcomment {
padding-bottom: 1em;
text-align: center;
}

.bottomcomment ul {
padding-bottom: .75em;
}

.bottomcomment ul a, .bottomcomment ul a:visited {
color: #3D3E40;
}

.bottomnav {
margin: 0 10% 0 0;
padding-bottom: .4em;
text-align: right;
}

/*BOTTOM MODULES*/

#tertiary .module {
float: right;
width: 24%;
margin: 0 0 1em 0;
}

#tertiary .module .module-content ul {
list-style-position: inside;
}

#tertiary .module-tags_cloud {
width: 48%;
}

#tertiary .module-tags_cloud .module-content {
text-align: justify;
margin: 0;
padding: 0 1.5em;
}

#tertiary .module-tags_cloud .module-content ul {
margin: 0;
padding: 0 1.5em 0 0;
}

#tertiary .module-tags_cloud .manage-tags-link {
text-align: right;
text-transform: uppercase;
margin-bottom: .75em;
}

#tertiary .module-active .module-content ul.module-list {
list-style-type: none;
list-style-position: outside;
}

#tertiary .module-time, #tertiary .module-powered, #tertiary .module-syndicate {
clear: both;
margin: 0 0 1em 0;
width: 95%;
}

#tertiary .module-syndicate .module-header {
display: none;
}

#tertiary .module-time .module-content, #tertiary .module-powered .module-content, #tertiary .module-syndicate .module-content {
text-align: right;
text-transform: uppercase;
font-size: 90%;
}

/*FOOTER*/

#footer {
text-align: center;
font-size: 80%;
text-transform: uppercase;
background-color: #3D3E40;
}

#footer a {
color: #ECE4DC;
}

/*ARCHIVE*/

.page-archive div.month {
margin: .25em auto 1.75em auto;
padding: 0;
width: 70%;
float: none;
margin: .25em auto 1.75em auto;
background-color: #F8F3EC;
}

.page-archive div.month h3 {
background-color: #3D3E40;
color: #F8F3EC;
padding: 0 .5em;
}

.page-archive div.month table { 
width: 70%; 
margin: 1em auto;
}

.page-archive div.month td {
border: 1px #D94848 solid;
}

.page-archive div.month th {
text-align: center; 
margin: 0 2px; 
font-weight: normal;
border: 1px #D94848 solid; 
}

.page-archive div.month td.day-has-entries p { 
padding: 0 0 0 5px; 
margin: 0; 
display: inline; 
}

.page-archive div.month div.footer {
text-align: right;
padding: .5em;
}

.page-month #archive-month { 
background-color: #F8F3EC;
width: 70%;
margin: 0 auto;
clear: both;
}

.page-month #archive-month > .inner {
margin: .5em 2em;
padding-top: .5em;
}

.page-month dt a {
font-size: 110%;
color: #4E4F52;
}

.page-month dd {
border-bottom: 1px dotted #DBD5CC;
margin-bottom: .75em;
}

.page-month .month div.tag {
margin-left: .75em;
font-size: 85%;
}

.page-day h3.day-date {
text-align: center;
}

/*TAGS PAGE*/

.page-tags .tags-container {
margin: 1em auto;
width: 70%;
padding: 0;
background-color: #F8F3EC;
}

.page-tags .tags-container h2 { 
padding: 0 .5em; 
margin: 0;
background-color: #BA3E3E;
color: #F8F3EC;
}

.page-tags .ljtaglist ul {
list-position: inside;
}

.page-tags .manage-tags-link {
text-align: right;
padding: 0 .5em .5em .5em;
}

/*LOCKED AND RESTRICTED ENTRIES*/

img[src*='locked.png'], img[src*='filtered.png'], img[src*='private.png'], img[src*='icon_18.png'], img[src*='icon_nsfw.png'] {
width: 0;
height: 0;
padding: 0 5px 18px 0;
}

.security-protected .entry .entry-title, img[src*='locked.png']{
padding-left: 20px;
background: transparent url('http://yoursite/images/securityprotected.png') no-repeat center left;
}

.security-filtered .entry .entry-title, img[src*='filtered.png'] {
padding-left: 20px;
background: transparent url('http://yoursite/images/securityfiltered.png') no-repeat center left;
}

.security-private .entry .entry-title, img[src*='private.png'] {
padding-left: 20px;
background: transparent url('http://yoursite/images/securityprivate.png') no-repeat center left;
}

.restrictions-18 .entry .entry-title a, img[src*='icon_18.png'] {
padding-left: 20px;
background: transparent url('http://yoursite/images/restricted18.png') no-repeat center left;
}

.restrictions-NSFW .entry .entry-title a, img[src*='icon_nsfw.png'] {
padding-left: 20px;
background: transparent url('http://yoursite/images/restrictednsfw.png') no-repeat center left;
}

/*ICONS*/

img[src*='edit.png'] {
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/edit.png') no-repeat;
}

img[src*='tag_edit.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/tagsedit.png') no-repeat;
}

img[src*='memories_add.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/addmemories.png') no-repeat;
}

img[src*='track.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/track.png') no-repeat;
}

img[src*='tellafriend.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/tellafriend.png') no-repeat;
}

img[src*='next.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/entrynext.png') no-repeat;
}

img[src*='previous.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/entryprevious.png') no-repeat;
}

img[src*='anonymous.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/anonymous.png') no-repeat;
}

img[src*='delete.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/delete.png') no-repeat;
}

img[src*='screen.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/screen.png') no-repeat;
}

img[src*='unscreen.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/unscreen.png') no-repeat; 
}

img[src*='freeze.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/freeze.png') no-repeat;
}

img[src*='unfreeze.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/unfreeze.png') no-repeat;
}

img[src*='subscription_add.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/subscribeadd.png') no-repeat; 
}

img[src*='subscription_remove.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/subscriberemove.png') no-repeat;
}

img[src*='access_grant.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/accessgrant.png') no-repeat;
}

img[src*='access_remove.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/accessremove.png') no-repeat; 
}

img[src*='community_join.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/communityjoin.png') no-repeat;
}

img[src*='community_leave.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/communityleave.png') no-repeat; 
}

img[src*='post.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/post.png') no-repeat; 
}

img[src*='message.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/message.png') no-repeat;
}

img[src*='sticky_entry.png'] {
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/sticky.png') no-repeat; 
}

.ljuser img {
width: 0;
height: 0;
background-image: none;
padding: 0 0 16px 18px;
}

img[src*='user.png'] { 
width: 0; height: 0; 
padding: 0 0 16px 18px; 
background: url('http://yoursite/images/user.png') no-repeat; 
vertical-align: middle !important;
}

img[src*='user.png'], img[src*='lj-userinfo.gif'], img[src*='userinfo.gif'], img[src*='user_other.png'], img[src*='user_staff.png'], img[src*='.ico'] { 
background: url('http://yoursite/images/user.png') no-repeat bottom left;
padding: 0 0 16px 18px;
}

img[src*='community.png'], img[src*='community.gif'], img[src*='comm_staff.png'] { 
background: url('http://yoursite/images/community.png') no-repeat bottom left;
padding: 0 0 16px 18px;
width: 0; height: 0;  
}

img[src*='openid.png'] {
background: url('http://yoursite/images/openid.png') no-repeat bottom left;
padding: 0 0 16px 18px;
width: 0; height: 0;
}

/*CONTEXTUAL POP-UP*/

div.ContextualPopup div.Inner { 
font-family: 'Lucida Grande', Helvetica, sans-serif;
background: #F8F3EC; 
border: 3px double #BA3E3E; 
color: #3D3E40; 
padding: 3px; 
text-transform: lowercase;
}

div.ContextualPopup .Content { 
padding: 1em;
}

div.ContextualPopup .Relation { 
margin-bottom: .8em;
}

div.ContextualPopup .Userpic { 
float: right; 
width: 50px; height: 50px; 
padding: 4px; 
border: 1px solid #D94848; 
margin-right: .5em;
}

div.ContextualPopup img { 
border: 0;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { 
color: #4E4F52; 
font-weight: normal;
}

/*CONTROL STRIP*/

#lj_controlstrip {
background-color: #4E4F52;
background-image: none;
border-bottom: 1px dotted #BA3E3E;
}

#lj_controlstrip a {
font-family: 'Lucida Grande', Helvetica, sans-serif;
color: #9EBFB8;
}

#lj_controlstrip_statustext, #lj_controlstrip_actionlinks, #lj_controlstrip_search {
font-family: 'Lucida Grande', Helvetica, sans-serif !important;
color: #DBD5CC !important;
}

#lj_controlstrip_login input, #lj_controlstrip_login input#xc_user, #lj_controlstrip_login input#xc_password,
#lj_controlstrip_user input, #lj_controlstrip_search select, #lj_controlstrip_search input, 
#lj_controlstrip_search input#search, #lj_controlstrip_actionlinks select, #lj_controlstrip_actionlinks input {
padding: 0px 2px;
text-transform: uppercase;
font-family: 'Lucida Grande', Helvetica, sans-serif;
color: #3D3E40;
border: 1px solid #3D3E40;
background-color: #DBD5CC;
}

#lj_controlstrip_login input:hover, #lj_controlstrip_user input:hover, #lj_controlstrip_search input:hover, 
#lj_controlstrip_actionlinks input:hover {
color: #DBD5CC;
border: 1px solid #DBD5CC;
background-color: #3D3E40;
}

#lj_controlstrip_search input#search {
text-transform: none;
}

Edited css:

/*
Layout: TOP OF THE CLASS 
Theme: STUDIOUS

CREDITS
CSS: Sarken - http://sarken.dreamwidth.org/1751138.html
Icons: Yusuke Kamiyamane - http://p.yusukekamiyamane.com/
Colors: Mgine - http://www.colourlovers.com/palette/1305411
*/

body {
background-color: #2B1B05;
color: #222;
font-family: 'Lucida Grande', Helvetica, sans-serif;
margin: 0;
padding: 0;
border: 0;
}

a {
color: #3D3E40;
}

a:hover {
color: #3D3E40;
}

a:visited {
color: #3D3E40;
}

ul li {
margin: 0px 0px 0px 15px;
padding: 0px;
list-style: disc;
list-style-position: inside;
}

ol li {
margin: 0px 0px 0px 15px;
padding: 0px;
list-style-position: inside;
list-style: decimal;
}

#canvas {
margin: 11em auto 0;
padding: 0;
}

#primary {
background-color: #cfcac2;
width: 100%;
padding: .5em 0 .25em 0;
margin: 0 auto;
clear: both;
}

#primary > .inner:first-child {
padding: 0;
margin: 0;
}

.one-column #secondary {
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 75%;
padding-bottom: .5em;
color: #DBD5CC;
z-index: 50;
}

.has-navstrip #secondary {
position: absolute;
top: 50px;
left: 0;
width: 100%;
font-size: 75%;
padding-bottom: .5em;
color: #DBD5CC;
z-index: 50;
}

#secondary .inner {
margin: 0 2em 0 0;
padding: 0;
}

#secondary > .inner:first-child {
padding: 0;
margin: 0 0 0 -2em;
}

.one-column #tertiary {
clear: both;
margin: .5em auto 1em auto;
width: 100%;
font-size: 75%;
color: #DBD5CC;
}

#tertiary .inner {
margin: 0 2em 0 0;
padding: 0;
}

#tertiary > .inner:first-child {
padding: 0;
margin: 0 0 0 -2em;
}

/*HEADER*/

#header {
position: absolute;
top: 0;
left: 2em;
padding: 0;
margin: .5em;
background-color: transparent;
color: #ECE4DC;
width: 20%;
height: 11em;
z-index: 20;
}

.has-navstrip #header {
position: absolute;
top: 45px;
left: 2em;
}

#header > .inner {
padding: 0;
margin: 0;
text-align: center;
}

h1#title {
padding: 0;
margin: .5em 0 0 0;
font-style: italic;
font-family: Georgia, serif;
font-weight: normal;
font-size: 140%;
}

h2#subtitle {
padding: 0;
margin: 0;
font-family: 'Lucida Grande', Helvetica, sans-serif;
font-weight: normal;
font-size: 90%;
}

h2#pagetitle {
display: none;
}

/*ALL MODULE SECTIONS*/

.module {
margin: 0;
padding: 0;
border: 0;
}

.module a {
color: #D94848;
text-decoration: none;
}

.module a:visited {
color: #82BCB0;
}

.module a:hover {
color: #E0D9D1;
text-decoration: none;
}

.module .module-header {
font-family: Georgia;
font-style: italic;
color: #92B0AA;
padding-bottom: 0px;
border-bottom: 1px #6C6E72 dotted;
width: 95%;
}

.module .module-header a {
color: #92B0AA;
width: 95%;
}

.module .module-content {
width: 94%;
}

div.module-calendar .module-content a {
text-decoration: none;
border-bottom: 1px #4e4f52;
}

div.module-calendar .module-content td.entry-day, div.module-calendar .module-content td.empty-day {
border: 1px #4E4F52 dotted;
}

.module-userprofile .module-content {
text-align: center;
min-height: 100px;
}

.module-userprofile .userpic {
float: left;
margin-right: .75em;
padding: 2px;
}

.module-userprofile .userpic img {
width: 77px;
height: 77px;
padding: 4px;
border: 1px #4E4F52 solid;
}

.module-userprofile .journal-name {
padding: 5px 0 5px 0;
font-family: Georgia;
font-style: italic;
font-size: 170%;
}

.module-userprofile ul.userlite-interaction-links {
margin-top: .25em;
}

/*TOP MODULES*/

#secondary .module {
float: right;
width: 24%;
background-color: #2B1B05;
}

#secondary div.module-navlinks ul.module-list {
padding: .75em 0 0 0;
margin: 0;
}

#secondary div.module-navlinks ul.module-list li {
list-style: none;
}

#secondary div.module-navlinks ul.module-list li a {
display: block;
padding: 2px 0;
font-weight: bold;
color: #F8F3EC;
background-color: #BA3E3E;
text-align: center;
}

#secondary div.module-calendar .module-content {
font-size: 75%;
padding-bottom: 0;
}

#secondary .module-typelist .module-header {
text-align: center;
}

#secondary .module-typelist .module-content {
text-align: center;
}

#secondary .module-typelist .module-content ul {
margin: 0;
padding: 0;
}

#secondary .module-typelist .module-content ul li {
list-style: none;
margin: .15em 0;
}

/*NAVIGATION TOP*/

.topnav {
margin: 0 10%;
text-align: left;
}

/*ENTRIES*/

div.entry {
background-color: #BA3E3E;
padding: 0;
width: 75%;
margin: 0 auto 2em auto;
border: 0;
}

div.entry > div.inner {
background-color: #F8F3EC;
padding: 0;
margin: 0 140px 0 0;
border: 0;
}

div.entry div.header {
letter-spacing: 1px;
padding: .5em .5em .5em .65em;
margin: 0 0;
background-color: #F8F3EC;
}

div.entry div.header a {
text-decoration: none;
}

div.entry h3.entry-title {
font-size: 150%;
padding: .15em 0;
margin: 0 0 0 0;
color: #4E4F52;
}

div.entry h3.entry-title a {
color: #4E4F52;
}

div.entry h3.entry-title a:hover {
color: #93BFB7;
}

div.entry span.datetime {
text-transform: uppercase;
padding: 0;
font-size: 75%;
color: #AAA;
}

div.entry span.datetime a {
color: #AAA;
}

div.entry span.access-filter img {
display: none;
}

div.entry span.restrictions img {
display: none;
}

div.entry-content {
margin: 0 0;
padding: .75em 1.5em 2em 1.5em;
text-align: justify;
min-height: 80px;
background-color: #F8F3EC;
font-size: 95%;
color: #222;
	border-bottom: 1px solid #D3DFA7;
}

div.entry-content img {
max-width:700px;
}

div.entry-content a {
color: #BA3E3E;
font-weight: bold;
text-decoration: none;
border-bottom: 1px dotted;
}

div.entry-content a:hover {
color: #67A89B;
font-weight: bold;
text-decoration: none;
border-bottom: 1px dotted;
}

div.entry div.userpic {
float: right;
clear: left;
margin: 0 -140px 0 0;
width: 140px;
text-align: center;
}

div.entry div.userpic img {
padding: 4px;
margin-top: -30px;
margin-bottom: 2px;
border: 1px solid #D94848;
}

div.entry span.poster {
float: right;
clear: both;
text-align: center;
margin: 0 -139px 0 0;
font-size: 60%;
width: 138px;
color: #222;
}

div.entry span.poster a {
color: #F8F3EC;
font-weight: normal;
text-decoration: none;
}

div.entry span.poster img {
display: none;
}

div.entry div.metadata {
font-size: 80%;
margin: 0 0;
padding: 5px 7px 2px 5px; color: #4f4f4f; background-color:#fafafa;
}
div.entry div.metadata img {
	display: block;
	padding-right: 5px;
    }
div.entry div.metadata span.metadata-item {
color: #AF0000;
}
.entry .metadata-label {
        font-weight: bold; 
    }

div.entry div.metadata ul, div.entry div.metadata ul li {
margin-bottom: 0;
list-style: none; display: block; padding: 2px 0;
}

div.entry div.footer {
margin: 0 0;
padding: 0 0 10px 0;
background-color: #F8F3EC;
}

div.entry div.footer div.tag {
color: #4f4f4f; background-color:#fafafa;
font-size: 80%;
       font-weight: bold; 
margin: 0 0 0 0;
       padding: 2px 7px 7px 25px; 
}

.tag a {
        font-weight: normal;
        text-decoration: none;
        border-bottom: 1px dotted;
    }
    .tag ul { display: inline; margin: 0; padding: 0; }

.tag li { display: inline; list-style: none;  padding: 0px;
    }

ul.entry-management-links {
	margin: 0px 0px 10px 0px;
	padding: 10px 0px 0px 0px;
	list-style: none;
	text-align: center;
	border-top: 1px solid #D3DFA7;
	}

ul.entry-management-links li {
	margin: 0px auto;
	display: inline;
	list-style: none;
	text-align: center;
	}

ul.entry-interaction-links {
	padding: 0px;
	margin: 5px 0px 10px 0px;
	text-align: center;
	}

ul.entry-interaction-links li {
      display: inline;
      list-style: none;
      font-weight: bold;
      font-size: .9em;
      color:#333333;
      margin-left: 2px;
      padding: 2px 10px;
      text-transform: uppercase;
      background: #EEEEEE url(http://i.imgur.com/atVUl.png);
      border: 1px solid #DDDDDD;
      -moz-border-radius: 2px;
}

ul.entry-interaction-links li:hover {
      background: #EEEEEE
      url(http://i.imgur.com/atVUl.png);
      border: 1px solid #DDDDDD;
      border-top: 4px solid #C1272D;}

ul.entry-interaction-links a {
    color: #888888;
    text-shadow: 1px 1px 0 #FFF;
    }
ul.entry-interaction-links a:hover {
    color: #888888;
    text-shadow: 1px 1px 0 #FFF;
    }

li.entry-readlink,
ul.entry-interaction-links li.entry-readlink,
ul.entry-interaction-links li.readlink {
    display: inline;
    list-style: none;
    font-weight: bold;
    font-size: .9em;
    color: #FFFFFF;
    margin-left: 2px;
    text-transform: uppercase;
    padding: 2px 10px;
    background: #C1272D url(http://i.imgur.com/atVUl.png);
    text-shadow:-1px -1px 0 #111111;
    -moz-border-radius: 2px;
    border: 1px solid #9D090E;
    }

li.entry-readlink:hover,
ul.entry-interaction-links li.entry-readlink:hover,
ul.entry-interaction-links li.readlink:hover {
    color: #FFFFFF;
    background: #A30207 url(http://i.imgur.com/atVUl.png);
    border: 1px solid #760105;
    text-shadow:-1px -1px 0 #111111;
    }

ul.entry-interaction-links li.entry-readlink a {
    color: #FFFFFF;
    text-shadow:-1px -1px 0 #111111;
    }

li.active {
	list-style: none;
	display: inline;
	margin: 10px;
	}

/*COMMENTS*/

#comments {
width: 75%;
margin: 0 auto;
padding: 0;
}

div.comment {
background-color: #F8F3EC;
border-bottom: .25em #BA3E3E solid;
margin: 0;
padding: 0;
}

.comment-wrapper-even div.comment {
border-bottom: .25em #3D3E40 solid;
}

div.comment div.header {
margin: 0;
font-size: 80%;
background-color: #BA3E3E;
}

.comment-wrapper-even div.comment div.header {
background-color: #3D3E40;
color: #F8F3EC;
}

div.comment div.comment-title {
background-color: #9EBFB8;
}

div.comment div.comment-title h4 a {
padding: .25em .25em 0 .25em;
text-decoration: none;
font-weight: normal;
font-size: 110%;
color: #222;
}

div.comment span.datetime {
padding: .25em .25em 0 .25em;
margin: 0;
}

div.comment span.poster {
font-size: 80%;
}

div.comment span.poster-ip {
font-size: 80%;
color: #3D3E40;
}

div.comment div.contents {
padding: 0 0 0 .25em;
margin: 0;
}

div.comment div.contents a {
color: #BA3E3E;
font-weight: bold;
text-decoration: none;
border-bottom: 1px dotted;
}

div.comment div.contents a:hover {
color: #67A89B;
font-weight: bold;
text-decoration: none;
border-bottom: 1px dotted;
}

div.comment div.userpic {
float: right;
width: 76px;
text-align: center;
margin: .5em;
}

div.comment div.userpic img {
width: 70px;
height: 70px;
border: 3px #DBD5CC solid;
}

div.comment div.comment-content {
margin: 0;
padding: 1em 0 .5em .75em;
font-size: 95%;
}

div.comment div.footer {
margin: .5em 0;
clear: both;
padding: .5em .25em;
text-align: right;
font-size: 80%;
font-variant: small-caps;
}

ul.comment-management-links {
margin: 0;
text-align: center;
}

ul.comment-interaction-links {
margin: 0;
text-align: center;
}

/*NAVIGATION BOTTOM*/

.bottomcomment {
padding-bottom: 1em;
text-align: center;
}

.bottomcomment ul {
padding-bottom: .75em;
}

.bottomcomment ul a, .bottomcomment ul a:visited {
color: #3D3E40;
}

.bottomnav {
margin: 0 10% 0 0;
padding-bottom: .4em;
text-align: right;
}

/*REPLY PAGE*/

.page-reply .comment {
width: 75%;
margin: 0 2em;
border: 0;
background-color: #F8F3EC;
}

#qrform table { 
border: 0 !important;
}

table.talkform {
width: 75%;
border-top: .75em solid #BA3E3E;
border-bottom: .35em solid #BA3E3E;  
background-color: #F8F3EC; 
margin: 0 auto ; 
padding: 0 2em;
}

input, select, textarea {
border: 1px solid #BA3E3E;
background-color: #F8F3EC;
margin: 0px; 
padding: 0 0.15em;
}

/*BOTTOM MODULES*/

#tertiary .module {
float: right;
width: 24%;
margin: 0 0 1em 0;
}

#tertiary .module .module-content ul {
list-style-position: inside;
}

#tertiary .module-tags_cloud {
width: 48%;
}

#tertiary .module-tags_cloud .module-content {
text-align: justify;
margin: 0;
padding: 0 1.5em;
}

#tertiary .module-tags_cloud .module-content ul {
margin: 0;
padding: 0 1.5em 0 0;
}

#tertiary .module-tags_cloud .manage-tags-link {
text-align: right;
text-transform: uppercase;
margin-bottom: .75em;
}

#tertiary .module-active .module-content ul.module-list {
list-style-type: none;
list-style-position: outside;
}

#tertiary .module-time, #tertiary .module-powered, #tertiary .module-syndicate {
clear: both;
margin: 0 0 1em 0;
width: 95%;
}

#tertiary .module-syndicate .module-header {
display: none;
}

#tertiary .module-time .module-content, #tertiary .module-powered .module-content, #tertiary .module-syndicate .module-content {
text-align: right;
text-transform: uppercase;
font-size: 90%;
}

/*FOOTER*/

#footer {
text-align: center;
font-size: 80%;
text-transform: uppercase;
background-color: #2B1B05;
}

#footer a {
color: #ECE4DC;
}

/*ARCHIVE*/

.page-archive div.month {
margin: .25em auto 1.75em auto;
padding: 0;
width: 75%;
float: none;
margin: .25em auto 1.75em auto;
background-color: #F8F3EC;
}

.page-archive div.month h3 {
background-color: #3D3E40;
color: #F8F3EC;
padding: 0 .5em;
}

.page-archive div.month table { 
width: 75%; 
margin: 1em auto;
}

.page-archive div.month td {
border: 1px #D94848 solid;
}

.page-archive div.month th {
text-align: center; 
margin: 0 2px; 
font-weight: normal;
border: 1px #D94848 solid; 
}

.page-archive div.month td.day-has-entries p { 
padding: 0 0 0 5px; 
margin: 0; 
display: inline; 
}

.page-archive div.month div.footer {
text-align: right;
padding: .5em;
}

.page-month #archive-month { 
background-color: #F8F3EC;
width: 75%;
margin: 0 auto;
clear: both;
}

.page-month #archive-month > .inner {
margin: .5em 2em;
padding-top: .5em;
}

.page-month dt a {
font-size: 110%;
color: #4E4F52;
}

.page-month dd {
border-bottom: 1px dotted #DBD5CC;
margin-bottom: .75em;
}

.page-month .month div.tag {
margin-left: .75em;
font-size: 85%;
}

.page-day h3.day-date {
text-align: center;
}

/*TAGS PAGE*/

.page-tags .tags-container {
margin: 1em auto;
width: 75%;
padding: 0;
background-color: #F8F3EC;
}

.page-tags .tags-container h2 { 
padding: 0 .5em; 
margin: 0;
background-color: #BA3E3E;
color: #F8F3EC;
}

.page-tags .ljtaglist ul {
list-position: inside;
}

.page-tags .manage-tags-link {
text-align: right;
padding: 0 .5em .5em .5em;
}

/*LOCKED AND RESTRICTED ENTRIES*/

img[src*='locked.png'], img[src*='filtered.png'], img[src*='private.png'], img[src*='icon_18.png'], img[src*='icon_nsfw.png'] {
width: 0;
height: 0;
padding: 0 5px 18px 0;
}

.security-protected .entry .entry-title, img[src*='locked.png']{
padding-left: 20px;
background: transparent url('http://img217.imageshack.us/img217/5811/securityprotected.png') no-repeat center left;
}

.security-filtered .entry .entry-title, img[src*='filtered.png'] {
padding-left: 20px;
background: transparent url('http://img515.imageshack.us/img515/7246/securityfiltered.png') no-repeat center left;
}

.security-private .entry .entry-title, img[src*='private.png'] {
padding-left: 20px;
background: transparent url('http://img210.imageshack.us/img210/9441/securityprivate.png') no-repeat center left;
}

.restrictions-18 .entry .entry-title a, img[src*='icon_18.png'] {
padding-left: 20px;
background: transparent url('http://img221.imageshack.us/img221/5976/restricted18.png') no-repeat center left;
}

.restrictions-NSFW .entry .entry-title a, img[src*='icon_nsfw.png'] {
padding-left: 20px;
background: transparent url('http://img84.imageshack.us/img84/2337/restrictednsfw.png') no-repeat center left;
}

/*ICONS*/

img[src*='edit.png'] {
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img809.imageshack.us/img809/2171/editi.png') no-repeat;
}

img[src*='tag_edit.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img513.imageshack.us/img513/1378/tagsedit.png') no-repeat;
}

img[src*='memories_add.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img98.imageshack.us/img98/7530/addmemories.png') no-repeat;
}

img[src*='track.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img156.imageshack.us/img156/799/tracko.png') no-repeat;
}

img[src*='tellafriend.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img839.imageshack.us/img839/8812/tellafriend.png') no-repeat;
}

img[src*='next.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img137.imageshack.us/img137/6137/entrynext.png') no-repeat;
}

img[src*='previous.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img684.imageshack.us/img684/3527/entryprevious.png') no-repeat;
}

img[src*='anonymous.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img585.imageshack.us/img585/3443/anonymous.png') no-repeat;
}

img[src*='delete.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img263.imageshack.us/img263/5628/deleteqv.png') no-repeat;
}

img[src*='screen.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img3.imageshack.us/img3/9714/screenfk.png') no-repeat;
}

img[src*='unscreen.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img510.imageshack.us/img510/1627/unscreen.png') no-repeat; 
}

img[src*='freeze.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img641.imageshack.us/img641/1418/freeze.png') no-repeat;
}

img[src*='unfreeze.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img526.imageshack.us/img526/1844/unfreeze.png') no-repeat;
}

img[src*='subscription_add.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img121.imageshack.us/img121/3002/subscribeadd.png') no-repeat; 
}

img[src*='subscription_remove.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img704.imageshack.us/img704/8314/subscriberemove.png') no-repeat;
}

img[src*='access_grant.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img9.imageshack.us/img9/306/accessgrantn.png') no-repeat;
}

img[src*='access_remove.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img526.imageshack.us/img526/9239/accessremove.png') no-repeat; 
}

img[src*='community_join.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img405.imageshack.us/img405/5208/communityjoin.png') no-repeat;
}

img[src*='community_leave.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img121.imageshack.us/img121/6097/communityleave.png') no-repeat; 
}

img[src*='post.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img543.imageshack.us/img543/455/postoo.png') no-repeat; 
}

img[src*='message.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img190.imageshack.us/img190/7870/messageir.png') no-repeat;
}

img[src*='sticky_entry.png'] {
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img137.imageshack.us/img137/4947/stickya.png') no-repeat; 
}

.ljuser img {
width: 0;
height: 0;
background-image: none;
padding: 0 0 16px 18px;
}

img[src*='user.png'] { 
width: 0; height: 0; 
padding: 0 0 16px 18px; 
background: url('http://img211.imageshack.us/img211/8576/userw.png') no-repeat; 
vertical-align: middle !important;
}

img[src*='user.png'], img[src*='lj-userinfo.gif'], img[src*='userinfo.gif'], img[src*='user_other.png'], img[src*='user_staff.png'], img[src*='.ico'] { 
background: url('http://img211.imageshack.us/img211/8576/userw.png') no-repeat bottom left;
padding: 0 0 16px 18px;
}

img[src*='community.png'], img[src*='community.gif'], img[src*='comm_staff.png'] { 
background: url('http://img571.imageshack.us/img571/5605/communitys.png') no-repeat bottom left;
padding: 0 0 16px 18px;
width: 0; height: 0;  
}

img[src*='openid.png'] {
background: url('http://img264.imageshack.us/img264/953/openid.png') no-repeat bottom left;
padding: 0 0 16px 18px;
width: 0; height: 0;
}

/*CONTEXTUAL POP-UP*/

div.ContextualPopup div.Inner { 
font-family: 'Lucida Grande', Helvetica, sans-serif;
background: #F8F3EC; 
border: 3px double #BA3E3E; 
color: #3D3E40; 
padding: 3px; 
text-transform: lowercase;
}

div.ContextualPopup .Content { 
padding: 1em;
}

div.ContextualPopup .Relation { 
margin-bottom: .8em;
}

div.ContextualPopup .Userpic { 
float: right; 
width: 50px; height: 50px; 
padding: 4px; 
border: 1px solid #D94848; 
margin-right: .5em;
}

div.ContextualPopup img { 
border: 0;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { 
color: #4E4F52; 
font-weight: normal;
}

/*CONTROL STRIP*/

#lj_controlstrip {
background-color: #2B1B05;
background-image: none;
border-bottom: 0px dotted #BA3E3E;
}

#lj_controlstrip a {
font-family: 'Lucida Grande', Helvetica, sans-serif;
color: #9EBFB8;
}

#lj_controlstrip_statustext, #lj_controlstrip_actionlinks, #lj_controlstrip_search {
font-family: 'Lucida Grande', Helvetica, sans-serif !important;
color: #DBD5CC !important;
}

#lj_controlstrip_search input#search {
text-transform: none;
}

#lj_controlstrip_user,
#lj_controlstrip_login,
#lj_controlstrip_loggedout_userpic,
#lj_controlstrip_actionlinks
{
    border-right: 1px solid #3D3E40;
}

span.de, .info, .success, .warning, .error, .validation {
  border: 1px solid;
  margin: 25px 0px 5px 0px;
  padding:5px 10px 15px 50px;
  background-repeat: no-repeat;
  background-position: 10px center;
}
.info {
  color: #00529B;
  background-color: #BDE5F8;
  background-image: url('info.png');
}
.success {
  color: #4F8A10;
  background-color: #DFF2BF;
  background-image:url('success.png');
}
span.de, .warning {
  color: #9F6000;
  background-color: #FEEFB3;
  background-image: url('http://img141.imageshack.us/img141/351/warninga.png');
}
.error {
  color: #D8000C;
  background-color: #FFBABA;
  background-image: url('error.png');
}

(Fingers crossed!)

Flat | Top-Level Comments Only

From:

valiha

At least we tried!

Yes, we did! And it's no big deal that I can't make it perfect, or fit each and every display. What's important is that it's functional. I kept the code, just changed the pixel values a bit, and I'm satisfied.

Thank you, though I can't take any credit for it; I found it at Lone Wolf Designs while I was googling for notice styling. I will have to come up with some way to use the other notices in the comm. :ponders: Perhaps to emphasize some of the rules? :off to fiddle some more:

[edited for html fail]

Edited Date: 2011-01-01 03:46 pm (UTC)

Dreamwidth style system discussion

Styling comments and notifications

Styling comments and notifications

Re: Hi, I'm back... :)

Profile

April 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags