Edited CSS

/*
Theme Name:	Skittlish Dreams, a DW port of Skittlish
Description:	A candy coloured theme. Comes in 7 flavors (orange, blue, green, pink, cyan, red, violet).
Version:1.0 Dreamwidth
original designer: Damien Tanner
mephisto (original): Cristi Balan
wordpress port: A.M. Griffin
pmwiki port: Dave G
dw port: Kaigou H.
all versions released under CCL

changes for dreamwidth port: 
--- rewrote css to fit dw classes
--- reduced image load to three images
--- removed javascript functionality for color-switching
--- converted font-sizes to ems from px
--- changed layout to flexible-width only
*/

html {margin: 0px; padding: 0px; font-size: 100%; /* IE hack */}
* {box-sizing:border-box; -moz-box-sizing:border-box}

a, a:link, a:visited, a:active {color: #0870C9; text-decoration: none; }
a:hover {color: #16E; text-decoration: underline; }

body {background: #E3E3E3 url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/bg.gif) repeat-x; font-family: tahoma, verdana, arial, sans-serif; font-size: 1em; margin: 0; padding: 0; }
#container {background: #0870C9 url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/left_bg.gif) right repeat-y; color: #666666; margin: 0 4%; }
#header {background: #1C1C1C url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/header_bg.gif) repeat-x; height: 100px; color: #bababa; margin: 0 5px 0 0; padding: 0; }
#footer {margin: 0 4%; padding: 0; background:transparent; background: #1C1C1C url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/left_bg.gif) right repeat-y; }
#header a, #footer a {color: #bababa; text-decoration: none; }

h1, h2, h3, h4 {font-weight: 700; font-variant: normal; letter-spacing: 0.08em; }
#header h1 {margin: 0; padding: 20px  20px  0  2em; font-size: 2em; font-weight: lighter; font-variant: normal; text-transform: lowercase; letter-spacing: 0.2em; }
#header h2 {padding: 0 2em; color:#DDD; }

#wrap {color: #666666; padding-right: 300px; padding-top: 20px; padding-left: 20px; }
#content {margin: 0 -5px 0 0; position: relative; width: 100%; float: left; padding-bottom: 20px; background-color: #0870C9}

.tags-container {border: 1px solid #FFF; padding: 10px; margin-top: 10px; }
.page-tags #wrap {margin-left: 20px; }

.module-section-one .inner {border-bottom:2px solid #000; text-align:right; }
.module-section-one {margin-right:5px; }
.module-section-two {background-color:#0870C9; position: relative; width: 300px; float: left; margin-right: -300px; /* <--- IMPORTANT */}
.module-section-two .module {color: #EEE;  background-image: url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/blue_box.gif); background-repeat: no-repeat; margin: 20px; margin-left: 10px; padding: 10px; }
.module-section-one li {display: inline; list-style: none; }
.module-section-one ul {background-color: #1C1C1C; color: #DDD; margin: 0; padding: 0.5em 20px; }
.module-section-one li a {text-decoration: none; padding-top: 0.5em; padding-right: 20px; padding-bottom: 0.5em; padding-left: 20px; background-color: #1C1C1C; color: #DDD; }
.module-section-one ul li a:hover, .module-section-one ul li.active a {background-color: #1C1C1C; color: #FFF; }
.module-section-two a {color: #FFF; }
.module-section-two .module-header a {text-decoration: none; }
.module-section-two h2 {margin: 0; margin-bottom: 7px; font-size: 1.1em; padding: 0.2em; color: #FFF; }
.module-section-two ul {list-style-type: none; margin-left: 0.5em; padding: 0; color: #DDD; }
.module-section-two ul ul {list-style-type: none; margin-left: 0.5em; padding: 0.5em; }
.module-userprofile .userpic img {border: none; margin: 20px; }
.module-userprofile .userpic {text-align: center; }
.module-userprofile ul {margin: 0px; padding: 0px; text-align: center; margin-top: 5px; }
.module-userprofile p {margin-top: 0px; margin-bottom: 0px; }
.module-userprofile li {display: inline; padding: 5px; list-style: none; }
.module-calendar .module-content {text-align: center; }
.module-calendar table {margin-left: auto; margin-right: auto; }

#entries, .page-entry .entry-wrapper, .page-entry #comments, .page-archive .year, #archive-month {padding-right:22px; margin:-20px 5px -20px -20px; padding-left:5px; border-left: solid 1px #0870C9; background: #FFF url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/blue_edge.gif) right top repeat-y; }
.page-entry .entry-wrapper {margin-top:0;}
.entry, .comment, .text_noentries_day {padding: 10px; margin-top: 76px; margin-left:2em; position: relative; margin-bottom: 10px; border-top: solid 2px #0870C9; background-color: #FFF; color: #444;}
.page-entry .entry, .page-entry .comment, .page-entry .text_noentries_day {border:0px;}
.page-entry #comments {padding-top:20px;}

.entry-title, .comment-title {margin:0 120px .5em 0; padding: 0.2em;border: solid 1px #EEE; color: #0870C9; background-color: #FFF;}
.entry-wrapper-even .entry-title, .comment-wrapper-even .comment-title {border: solid 1px #DDD; color: #0870C9; background-color: #FFF; }
.partial .comment-title {display: inline; }

.userpic a {background-color: #0870C9; border: 0px; }
.entry .userpic a, .comment .userpic a {background-color: #FFF; border: solid 2px #0870C9; right: 10px; left: auto; display: block; position: absolute; top: -66px; padding: 5px; }
.entry .userpic img, .comment .userpic img {border: none; }
.no-userpic .comment {margin-top: 20px; }
.no-userpic .comment-title {margin: 0px; }

.entry .time, .entry .date {padding: 0.2em; display: inline-block; }
.entry-content, .comment-content {padding: 10px 0px; }

p {margin-top: .5em; margin-bottom: 0.5em; }
blockquote {margin: 1em; padding: 1em; background: #E4E4E4 ; }

.tag {font-weight: bold; text-align: left; }
.tag a {font-weight: normal; }
.tag ul {display: inline; margin: 0; padding: 0; }
.tag li {display: inline; list-style: none; padding: 0px; }
*+html .tag li {padding: 0 5px; }

.entry .metadata ul {margin: 0px; padding: 0px; }
.entry .metadata li {list-style: none; }
.entry .footer .inner, .comment .footer .inner {text-align: right; }
.entry .footer a {white-space: nowrap; }

.entry-management-links, .entry-interaction-links, .comment-management-links, .comment-interaction-links {text-align: right; margin: 0; padding: 0; display: inline; }
.entry-management-links li, .entry-interaction-links li,  .comment-management-links li, .comment-interaction-links li {display: inline; list-style: none; margin: 0; padding: 5px; }
.entry-management-links li a, .comment-management-links li a, .comment-interaction-links .thread a {background-image: url(http://s.dreamwidth.org/stc/transmogrified/permalink.gif); background-repeat: no-repeat; background-position: 0% 50%; padding-left: 14px; }
.entry-management-links .edit_entry a, .comment-management-links .delete_comment a, .comment-management-links .edit_comment a {background-image: url(http://s.dreamwidth.org/stc/transmogrified/edit.gif); }
.entry-management-links .edit_tags a, .comment-interaction-links .parent a {background-image: url(http://s.dreamwidth.org/stc/transmogrified/tag.gif); }
.entry-management-links .mem_add a, .entry-management-links .watch_comments a, .comment-management-links .watch_thread a {background-image: url(http://s.dreamwidth.org/stc/transmogrified/memories.gif); }
.entry-management-links .link_prev a {background-image: url(http://s.dreamwidth.org/stc/transmogrified/previous.gif); }
.entry-management-links .link_next a {background-image: url(http://s.dreamwidth.org/stc/transmogrified/next.gif); }
.entry-interaction-links li a, .entry-management-links .tell_friend a, .comment-interaction-links li a { background-image: url(http://s.dreamwidth.org/stc/transmogrified/comment.gif); background-repeat: no-repeat; background-position: 0% 50%; padding-left: 14px;   display: inline; }
.comment-management-links .delete_comment a {background-image: url(http://s.dreamwidth.org/stc/transmogrified/delete.gif); }

.entry .footer hr {display: none; }
.entry .metadata-label {font-weight: bold; }
.comment-poster {display: inline-block; min-width: 40%; }

#content > hr {display: none; }

.module-section-three {margin-right:5px; clear: both; background: #1C1C1C url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/footer_bg.gif) repeat-x; height: 100px; color: #bababa; padding: 0.5em 1em; }
.module-section-three a:hover {color: #FFF; }
.module-section-three .module {padding-left: 20px; }

.hfeed .navigation, #archive-year .navigation,  #archive-month .navigation  {height:61px; margin-right:-22px; margin-bottom:-20px; background: #fff url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/blue_circle.gif) right top no-repeat; }

.bottomcomment  { margin-top:20px;padding-right:30px;height:70px;text-align:center;border-top:4px solid #0870C9;}

.navigation {margin: 0; padding: 0; text-align: center; background-color: #FFF; color: #888888; }
.navigation ul {margin: 0; padding: 5px 0 0 0; text-align: center; }
.navigation li {display: inline; padding: 0 5px; }
.navigation .page-back a:before {content: "<--  "; font-size: 0.5em; line-height:2em; letter-spacing: 0.08em; /*vertical-align: 50%; */ padding-right: 1px; }
.navigation .page-forward a:after {content: " -->"; font-size: 0.5em; line-height:2em; letter-spacing: 0.08em; /*vertical-align: 50%; */ padding-left: 1px; }
#archive-year .navigation  {margin:-20px 5px -20px -20px; height:61px;text-align:center;border-left: solid 1px #0870C9;}
 #archive-month .navigation   {margin:0 -22px 0 0; height:61px;text-align:center;}

.page-tags #content h2 {padding: 0.2em; margin: 0; border: solid 1px #0870C9; color: #444444; background-color: #FFF; font-size: 1.2em; margin-bottom: 20px; }
.page-tags #content h2 {margin-right: 10px; }

#archive-month dt {font-weight: bold; }
#archive-month .entry-title {font-size: 10pt; display: inline-block; padding-left: 5px; }
.month-wrapper, #archive-month dl {padding: 10px; position: relative; margin: 20px 2em 20px 3em; background-color: #FFF; }
.month-wrapper h3 {padding: 0.2em; margin: 0; border: solid 1px #FFF; color: #0870C9; border-top: solid 2px #0870C9; background-color: #FFF; font-size: 1.2em; margin-bottom: 20px; }
.month caption {display: none; }
.month .day span, .month .day p {padding: 0; margin: 0; }
.month .day p {margin-top: 4px; margin-bottom: -4px; }
.month .day, .month th {line-height: 2em; vertical-align: text-top; padding: 5px; text-align: center; }
	/* IE only to line up the empty days neatly */ 
	*+html .month .day span, *+html .month th span{vertical-align: 100%; }
.month .day-has-entries {line-height: 1em; }
.month .footer {width: 250px; text-align: center; margin: 10px 0px; }

.text_noentries_day {margin-top: 20px; margin-bottom: 20px; }

#postform {margin-top: 20px; border: solid 1px #0870C9; }
#commenttext {width: 95%; }

.metadata-label, .metadata-item, .datetime, .tag, .entry-management-links, .entry-interaction-links {margin-top:.5em; font-weight: lighter; font-variant: normal; text-transform: uppercase; color: #888; letter-spacing: 0.08em; display: block; }
.metadata-label-groups, .tag-text {display:none; }
.metadata-item {color:#881111; }

.journal-name {text-align:center; font-size: 1.8em; color:#fff; line-height: 1.43em; margin-bottom:.3em; font-weight: lighter; font-variant: normal; letter-spacing: 0.16em; }

/* addition */
.bottomcomment{height:6em; margin-right:-22px; margin-bottom:-20px;background: #fff url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/blue_circle.gif) right top repeat-y;}

(58 comments)

Edited CSS

Post a comment in response: