
Source
.foo { color: #ff0000; }
.bar { color: rgba(255, 0, 0, 1); }
Result
Source map
Restructure
Beautify
*,dd,ol,ul {
    padding: 0;
    margin: 0
}

body {
    background: #141 url(images/bg.gif) fixed;
    padding: 35px 0;
    font-family: Verdana,Tahoma,Arial,Serif;
    color: #333;
    font-size: .8em
}

p {
    line-height: 1.6em;
    margin: 0 0 .5em
}

a {
    color: #b96d00;
    border-bottom: #b96d00 1px dashed
}

.post h4 a,a,a:hover {
    text-decoration: none
}

a:hover {
    border-bottom: #b96d00 1px solid
}

h1,h2,h3,h4,h6 {
    font-family: Georgia,Verdana,Arial,Serif
}

h3,h4 {
    display: inline;
    font-weight: 700;
    background-repeat: no-repeat;
    background-position: left;
    line-height: 1.6em
}

h3 {
    font-size: 1.7em;
    padding-left: 24px;
    background-image: url(images/db1.gif)
}

h4 {
    font-size: 1.4em;
    padding-left: 18px;
    background-image: url(images/db2.gif)
}

h3 span {
    font-weight: 400;
    font-size: 60%;
    color: #999
}

#headercontent h2,h5 {
    font-size: 1em;
    font-weight: 400
}

h5 {
    font-family: Verdana,Arial,Serif
}

.contentarea {
    padding-top: 1.3em
}

#sidebar li,dl {
    margin: 1em 0
}

dt {
    font-weight: 700
}

dd,ol,ul {
    margin: .5em 1em
}

img {
    border: solid 1px #dcdcdc;
    padding: 3px
}

img.left,img.right {
    position: relative;
    float: left;
    margin: 0 1.8em 1.4em 0
}

img.right {
    float: right;
    margin: 0 0 1.8em 1.8em
}

img.profile {
    float: left;
    margin: .5em;
    padding: 3px
}

ol,ul {
    margin: 1em
}

li {
    margin: 0 1em;
    padding: .15em
}

#contentarea ul li {
    list-style-image: url(images/db3.gif)
}

blockquote {
    margin: 1em;
    padding: 0 0 0 40px;
    color: #666;
    background: url(images/blockquote.gif) no-repeat left top
}

fieldset {
    border: 0
}

.divider1 {
    position: relative;
    background: #fff url(images/border2.gif) repeat-x;
    height: 14px;
    margin: 2em 0 1.5em;
    clear: both
}

.post {
    border-bottom: solid 1px #eaeaea;
    margin: 2em 0
}

.post h4 a {
    color: #141;
    border: 0
}

#menu ul li,.post .details {
    position: relative;
    padding: 0;
    margin: 0
}

.post .details {
    top: -1.5em;
    font-size: .86em;
    color: #787878
}

.post .details .user {
    background: url(images/user.png) no-repeat left center;
    padding-left: 15px
}

.post .details .date {
    background: url(images/date.gif) no-repeat left center;
    padding-left: 15px;
    margin: 0 0 0 1em
}

#outer .post ul.controls {
    clear: both;
    margin: 0;
    padding: 1em 0;
    background: #fcfcfc;
    color: #787878
}

.post ul.controls li {
    display: inline;
    font-size: .86em;
    margin: 0;
    padding: 0 1em 0 15px
}

.post ul.controls li.comments {
    background: url(images/icon-comments.gif) no-repeat left center
}

.post ul.controls li.more {
    background: url(images/icon-more.gif) no-repeat left center
}

.box {
    background: #fdfcf6 url(images/boxbg.gif) repeat-x;
    padding: 1.5em;
    border-top: solid 1px #e1d2bd;
    border-bottom: solid 1px #e1d2bd;
    margin-bottom: 1em;
    text-align: left
}

ul.linklist {
    list-style: none
}

ul.linklist li {
    line-height: 2em
}

#header,#outer,img.profile {
    position: relative
}

#outer {
    z-index: 2;
    border: solid 7px #fff;
    background-color: #fff;
    margin: 0 auto;
    width: 82%
}

#header {
    width: 100%;
    height: 9em;
    background: #2b2b2b url(images/topbg.gif) repeat-x;
    margin-bottom: 2px
}

#headercontent {
    position: absolute;
    bottom: 0;
    padding: 0 2em 1.3em
}

#headercontent h1 {
    font-weight: 400;
    font-size: 2.5em
}

#headercontent h1 a:link,#headercontent h1 a:visited {
    color: #9f9030;
    text-decoration: none;
    border: 0
}

#headercontent h1 a:active,#headercontent h1 a:hover {
    text-decoration: none;
    color: #fff;
    border: 0
}

#headercontent h2 {
    color: #aaa
}

#search {
    position: absolute;
    top: 5.5em;
    right: 2em;
    padding-right: 0;
    color: #aaa
}

#search input.text {
    margin-right: .5em;
    vertical-align: middle;
    border: solid 1px #f0f0f0;
    padding: .1em;
    width: 10em;
    background: #fff url(images/button_bg.gif) repeat-x top
}

#search input.submit {
    background: #8f4008;
    border: solid 1px #9f9030;
    font-weight: 700;
    padding: .25em;
    font-size: .8em;
    color: #f2f3de;
    vertical-align: middle
}

#headerpic {
    position: relative;
    height: 149px;
    background: #fff url(images/vraja-graffiti.jpg) repeat-x bottom left;
    margin-bottom: 2px
}

#menu {
    position: relative;
    background: #7f8400 url(images/menubg.gif) repeat-x top left;
    height: 3.5em;
    padding: 0 1em;
    margin: 0 0 2px
}

#menu ul {
    padding: 1em 0 0;
    margin: 0
}

#menu ul li {
    display: inline
}

#menu ul li a:link,#menu ul li a:visited {
    color: #fff;
    padding: .5em 1em .9em;
    text-decoration: none;
    border: 0
}

#menu ul li a:active,#menu ul li a:hover,#menu ul li.current_page_item a {
    background: #7f8400 url(images/menuactive.gif) repeat-x top left;
    border: 0
}

#menubottom {
    background: #fff url(images/border1.gif) repeat-x;
    height: 14px;
    margin-bottom: 1.5em
}

#content {
    padding: 0 2em
}

#primarycontainer {
    float: left;
    margin-right: -18em;
    width: 100%
}

#primarycontent {
    margin: 1.5em 22em 0 0
}

#sidebar {
    margin: 0;
    float: right;
    width: 18em
}

#sidebar ul {
    list-style: none;
    margin: .5em 0 0
}

#sidebar li {
    padding: .5em
}

#sidebar li li {
    margin: 0;
    padding: .5em;
    background: 0 0
}

#sidebar li li li {
    margin: 0;
    padding: .5em 0 0 1em
}

#sidebar ul.feeds li {
    background: url(images/feed.png) no-repeat left center;
    margin: 1em 0;
    padding: 0 1.5em
}

#footer {
    position: relative;
    height: 2em;
    clear: both;
    padding-top: 5em;
    background: #fff url(images/border2.gif) repeat-x 0 2.5em;
    font-size: .86em
}

#footer .left,#footer .right {
    position: absolute;
    bottom: 1.2em
}

#footer .left {
    left: 2em
}

#footer .right {
    right: 2em
}

#comments,#respond {
    margin: 2em 0 0 5px
}

#commentform {
    margin: 10px;
    padding: 10px
}

#outer .commentlist {
    margin: 0;
    padding: 0
}

.commentlist li {
    list-style: none;
    margin: 2em 0;
    padding: .5em;
    border-bottom: #ddd 1px dashed;
    background: #fcfcfc url(images/border2.gif) repeat-x top
}

.commentlist li .cmtinfo {
    font-family: Trebuchet MS,Verdana,Tahoma,Serif;
    font-size: .9em;
    padding: 5px;
    margin-bottom: 10px;
    position: relative
}

.commentlist li .cmtinfo em {
    margin: 0;
    padding: 0 1em;
    text-align: right;
    font-style: normal;
    color: #999
}

.commentlist li cite,.post h5 em {
    font-style: normal;
    font-weight: 700
}

.commentlist li.alt {
    background: #fcfcf9 url(images/border2.gif) repeat-x top
}

#outer input.text,textarea {
    background: #f9f9f9 url(images/button_bg.gif) repeat-x top;
    font: 1em Verdana,Arial,Serif
}

textarea {
    width: 90%;
    height: 20em;
    padding: 5px;
    border: 1px solid #ccc
}

#outer input.text {
    border: #ccc 1px solid;
    padding: 2px
}

.post h5 em {
    float: right;
    font-weight: 400
}

#content,#footer,#header,#sidebar,.widget {
    overflow: hidden
}
Show transformations
result
Original:   8072 bytes
Compressed: 5647 bytes (69.96%)
Saving:     2425 bytes (30.04%)
Time:       44 ms
Powered by CSSO 3.5.0
