03 Rough Draft
image preview | live preview
/* Stylesheet by liiessbeth @ perfectrainbows */
/* Theme: S2 Flexible Squares
Title: Rough Draft */
body {
background-color: #F2FAFA;
text-align: justify;
color: #969696;
font-family: "Trebuchet MS", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #5B5B5B;
text-decoration: none;
}
a:hover {
color: #D4D4D4;
}
p, td {
font-size: 10px;
}
code, kbd, pre, tt {
font-family: monospace;
}
#content {
width: 75%;
margin-left: auto;
margin-right: auto;
background-color: transparent;
padding: 15px;
}
#maincontent {
margin-top: 15px;
font-family: "Trebuchet MS", sans-serif;
font-size: 11px;
background-color: transparent;
color: #969696;
text-align: left;
}
#sidebar {
display: none;
}
#header {
width: 100%;
padding: 10px 0px 20px 0px;
margin: 0px;
text-align: center;
font-family: "Arial", sans-serif;
font-weight: bold;
font-size: 15px;
letter-spacing: -1px;
background-color: transparent;
color: #969696;
}
#footer {
width: 100%;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 12px;
letter-spacing: -1px;
background-color: transparent;
color: #969696;
z-index: 100;
clear: both;
}
/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #969696;
}
div#header a:hover, div#footer a:hover {
color: #D4D4D4;
text-decoration: none;
}
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 7px;
margin-right: 5px;
background-color: #FFFFFF;
border: 1px solid #D4D4D4;
}
.title {
display: none;
}
.subtitle{
display: none;
}
/* maincontent */
.subcontent {
background-color: #FFFFFF;
border: 1px solid #D4D4D4;
padding: 5px;
}
.entry {
margin: 0px 10px 10px 10px;
padding: 10px;
background-color: transparent;
color: #969696;
font-family: "Trebuchet MS", sans-serif;
font-size: 11px;
text-align: left;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
.userpic {
position: relative;
float: right;
padding: 5px;
margin: 10px;
z-index: 15;
}
.userpic img {
background-color: #DCE6E5;
padding: 7px;
border: 1px solid #D4D4D4;
}
.userpicfriends {
position: relative;
float: right;
padding: 5px;
margin: 10px;
text-align: center;
font-family: "Trebuchet MS", sans-serif;
font-size: 10px;
z-index: 15;
background-color: transparent !important;
}
.userpicfriends img {
background-color: #DCE6E5 !important;
padding: 7px;
border: 1px solid #D4D4D4;
}
.date {
line-height: 200%;
top: 5px;
color: #DCE6E5;
font-family: "Trebuchet MS", sans-serif;
font-size: 10px;
}
.subject {
padding: 0 10px 10px 0;
color: #969696;
font-family: "Arial", sans-serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: -1px;
}
.subject a, .subject a:link, .subject a:visited {
color: #969696;
}
.subject a:hover {
color: #D4D4D4;
}
.datesubject {
background-color: transparent;
padding: 5px;
border-bottom: 1px solid #D4D4D4;
}
.currents, .currentmood, .currentmusic {
font-family: "Trebuchet MS", sans-serif;
font-size: 10px;
}
.currents {
margin-top: 0px;
}
.comments {
font-family: "Trebuchet MS", sans-serif;
font-size: 11px;
text-align: right;
background-color: transparent;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
color: #D4D4D4;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #969696;
}
div.comments a:hover {
color: #969696;
text-decoration: none;
}
/* maincontent -- entry, reply pages */
.datesubjectcomment {
background-color: transparent;
padding: 5px;
margin-top: 20px;
border-bottom: 1px solid #D4D4D4;
}
.userpiccomment {
position: relative;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}
.userpiccomment img {
background-color: #DCE6E5;
padding: 7px;
border: 1px solid #D4D4D4;
width: 60%;
height: 60%;
}
.box {
padding: 0px;
clear: left;
background-color: transparent;
}
input, textarea {
background-color: transparent;
color: #969696;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Trebuchet MS", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: transparent;
color: #969696;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Trebuchet MS", sans-serif;
color: #969696;
}
.commentbox {
border: 1px solid #D4D4D4;
padding: 10px;
margin: 10px;
background-color: #FFFFFF;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
}
.datesubjectcomment a:hover {
}
.commentboxpartial {
border: 1px solid #D4D4D4;
padding: 10px;
margin: 10px;
background-color: #FFFFFF;
}
.commentinfo {
background-color: transparent;
margin-top: 10px;
width: 100%;
}
/* maincontent -- year/achive pages */
ul.year {
text-align: center;
padding-bottom: 20px;
margin-left: 0;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #D4D4D4;
}
table.yeartable td.yearday {
background-color: #FFFFFF;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/* footer */
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin-right: 5px;
background-color: #FFFFFF;
padding: 7px;
border: 1px solid #D4D4D4;
}
.clearfoot {
clear: both;
}
/* misc */
.clear {
height: 0px;
}
.skiplinks {
text-align: center;
}
.headerimage {
position: relative;
width: 0px;
height: 0px;
margin-left: auto;
margin-right: auto;
background-image: url('');
repeat: no-repeat;
}
.separator{
height: 10px;
}
blockquote {
margin: 5px;
padding: 5px;
background-color: #DCE6E5;
border: 1px solid #D4D4D4;
}
.ljtags {
margin-top: 10px;
padding-left: 0px;
font-size: 10px;
}
.currents strong {
font-weight: normal;
}
.ljtaglist {
list-style-type: none;
padding: 7px;
background-color: #FFFFFF;
border: 1px solid #D4D4D4;
margin: 0px;
}
h2 {
display: none;
}
.ljuser img {
width: 0px;
height: 0px;
padding: 16px 0 0 16px;
}
.ljuser img[src$="userinfo.gif"] {
background: transparent url('http://img16.imageshack.us/img16/156/userlx.png') no-repeat;
}
.ljuser img[src$="community.gif"] {
background: transparent url('http://img24.imageshack.us/img24/1435/groupl.png') no-repeat;
}
.subject img[src$="icon_protected.gif"]{
padding: 0 16px 16px 0;
width: 0;
height: 0;
background: url('http://img41.imageshack.us/img41/1272/locklw.png') no-repeat;
}
To Internet Explorer users:
For some reason, the footer (the navigation at the bottom of the page) won't show up right in IE. In Internet Explorer, it looks like this, while it's supposed to look like this. I have no idea why it does that, and it works fine in Firefox and Safari.
So, if you use IE, you might want to look up this part of the code (towards the end):
ul.navfooter li {
display: inline;
margin-right: 5px;
background-color: #FFFFFF;
padding: 7px;
border: 1px solid #D4D4D4;
}
and replace it with:
ul.navfooter li {
display: inline;
margin-right: 5px;
background-color: transparent;
padding: 7px;
}
so that it looks like this.
+ credit liiessbeth or perfectrainbows.
+ see this post for instructions on how to install.
+ comments make me smile.
+ watch or join the community for updates.