Title on custom comments page?

[godofwine]

Account Level: Paid
Journal: godofwine

My layout is set up so that it requires a short journal title which I have. However, since on the custom comments page the journal title has the entry subject line added on, it's becoming too big for the space. I was wondering is there anyway to either remove the entry subject addendum from the title or just make the journal title one static word on every page?

Here are screencaps of the problem:

Main Page:


Comments Page:


Here's my CSS:

body {
margin: 0px;
background-color: #FFFFFF;
font-family: "Times New Roman", serif;
font-size: 9pt;
color: #999999;
}

b, i {
color: #000000;
}

a, a:link {
text-decoration: none;
color: #111111;
}

a:visited, a:hover {
text-decoration: none;
color: #CCCCCC;
}

::-moz-selection {
background-color: #50C8FA;
color: #FFFFFF;
}

blockquote {
padding: 10px 10px 10px 20px;
border-right: 3px solid #50C8FA;
}

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

#content {
width: 100%;
margin: 0px;
padding: 0;
border-width: 0;
background-color: #50C8FA;
}

#header {
width: 300px;
height: 325px;
margin: 0;
padding: 0;
position: fixed;
top: 50px;
left: 0px;
background-color: #50C8FA;
font-family: "TImes New Roman", sans-serif;
font-size: 8pt;
color: #FFFFFF;
text-align: right;
}

.title {
margin: -200px 30px 0 0;
font-family: "Verdana", sans-serif;
font-size: 20pt;
font-weight: bold;
color: #FF503C;
}

.subtitle {
margin: 0px 34px 0 0;
font-family: "Times New Roman", serif;
font-size: 10pt;
font-style: italic;
}

ul.navheader {
margin: 175px 32px 0 0;
padding: 0;
}

ul.navheader li {
list-style: none;
padding: 10px 0px;
}

li.view {
color: #FFFFFF;
}

div#header a, div#header a:link, div#header a:visited, div#header a:hover {
font-size: 8pt;
color: #FFFFFF;
}

#sidebar {
width: 300px;
height: 100%;
margin: 0;
padding: 0;
position: fixed;
top: 375px;
left: 0;
background-color: #50C8FA;
}

.defaultuserpic {
width: 44px;
height: 44px;
margin: 10px 0 0 224px;
background-color: #FFFFFF;
}

.defaultuserpic img {
width: 40px;
height: 40px;
border: 2px solid #FFFFFF;
}

.sbarbody, .sbarbody2 {
display: none;
}

#maincontent {
width: auto;
margin: 0 0 0 300px;
padding: 50px 0 0 40px;
border: none;
background-color: #FFFFFF;
}

.subcontent {
width: 500px;
background-color: #FFFFFF;
}

.userpic {
position: relative;
float: left;
width: 25px;
height: 25px;
margin: 5px 25px 5px 3px;
background-color: #FFFFFF;
}

.userpic img {
width: 21px;
height: 21px;
border: 2px solid #EEEEEE;
}

.userpicfriends {
position: relative;
float: right;
width: 100px;
height: 70px;
margin: 5px;
text-align: right;
background-color: #FFFFFF !important;
}

.userpicfriends img {
width: 40px;
height: 40px;
}

.userpicfriends a font {
font-size: 7pt;
}

.date {
font-size: 7pt;
color: #FF503C;
}

.subject {
font-size: 14pt;
color: #50C8FA;
}

.subject a, .subject a:link, .subject a:visited, .subject a:hover {
font-size: 14pt;
color: #50C8FA;
}

.entry {
text-align: justify;
margin: 30px 0 0 0;
}

.separator {
height: 100px;
}

.entry_text {
line-height: 15px;
}

.ljtags {
margin: 20px 0;
font-size: 8pt;
}

.currents {
padding: 35px 0 0 0;
}

.currentmood {
text-align: right;
}

.comments {
text-align: right;
font-size: 9pt;
}

div.comments a, div.comments a:link, div.comments a:visited {
font-size: 9pt;
}

.clear {
height: 0px;
}

#footer {
width: auto;
height: 30px;
margin-top: -10px;
padding: 0 0px 0 340px;
background-color: #FFFFFF;
text-align: center;
font-size: 8pt;
border: 0;
}

ul.navfooter li {
width: 500px;
list-style: none;
}

li.viewing {
color: #FF503C;
}

div#footer a, div#footer a:link, div#footer a:visited, div#footer a:hover {
font-size: 8pt;
color: #50C8FA;
}

.clearfoot {
background-color: #FFFFFF;
}

I'm pretty new to theme layers so I apologize if there's an easy definition that I'm missing. Thanks! :)

Edit: Found an old tutorial that I was able to modify to suit my needs.