Overlays

Options
Opacity
0.5
Position (try dragging)
0
0
Lock?
Z-Index
Getting Started

Pixel Perfect is a firefox firebug extension that allows web developers to easily overlay a web composition over top of the developed html. Switching the composition on and off allows the developer to see how many pixels they are off while in development.

To get started, click on the "Add overlay" button to add your design composition.

For more information, please refer to the "Help" menu, or visit http://www.pixelperfectplugin.com
@import "fonts.css";
h1, h2, h3, h4, h5, h6 {
    color: #666666;
    font-family: 'HelveticaNormal','Arial',sans-serif;
    font-weight: bold;
    letter-spacing: -0.06em;
}
h1 {
    line-height: 1;
    margin-bottom: 0.5em;
}
h2 {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 0.75em;
}
h3 {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 1em;
}
h4 {
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 1.25em;
}
h5 {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 1.5em;
}
h6 {
    font-size: 1em;
    font-weight: bold;
    line-height: 0.75;
    margin-bottom: 0.5em;
}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
    margin: 0;
}
p {
    /*margin: 0 0 1.5em;*/
	/*font-family:'Conv_OpenSans-Regular',Sans-Serif;*/
	font-size:14px;
	font-weight: normal;
	line-height: 20px;
	color:#F1F1F1;
}
p img.left {
    float: left;
    margin: 1.5em 1.5em 1.5em 0;
    padding: 0;
}
p img.right {
    float: right;
    margin: 1.5em 0 1.5em 1.5em;
}
/*a:focus, a:hover {
    text-decoration: underline;
}*/
a {
    color:#FFBE00;
    text-decoration: none;
}


#footer {
    color: #333333;
}
#footer a:hover {
    color: #660000;
    text-decoration: none;
}
#footer a {
    color: #333333;
    text-decoration: none;
}
#sm_header a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}
#sm_header a {
    color: #FFFFFF;
    font: 11px/19px normal Verdana,Arial,Helvetica,sans-serif;
    text-decoration: none;
}
blockquote {
    color: #666666;
    font-style: italic;
    margin: 1.5em;
}
/*strong {
    font-weight: bold;
}*/
em, dfn {
    font-style: italic;
}
dfn {
    font-weight: bold;
}
sup, sub {
    line-height: 0;
}
abbr, acronym {
    border-bottom: 1px dotted #666666;
}
address {
    font-style: italic;
    margin: 0 0 1.5em;
}
del {
    color: #666666;
}
pre {
    margin: 1.5em 0;
    white-space: pre;
}
pre, code, tt {
    font: 1em/1.5 'andale mono','lucida console',monospace;
}
tt {
    display: block;
    line-height: 1.5;
    margin: 1.5em 0;
}
li ul, li ol {
    margin: 0;
}
ul, ol {
    margin: 0 0 1.5em 1.5em;
}
ul {
    list-style-type: none;
}
ol {
    list-style-type: none;
}
dl {
    margin: 0 0 1.5em;
}
dl dt {
    font-weight: bold;
}
dd {
    margin-left: 1.5em;
}
table {
    margin-bottom: 1.4em;
}
th {
    font-weight: bold;
}
thead th {
    background: none repeat scroll 0 0 #C3D9FF;
}
th, td, caption {
    padding: 4px 10px 4px 5px;
}
tr.even td {
    background: none repeat scroll 0 0 #ECECEC;
}
.zebra_hdr {
    border-bottom: 1px solid #999999;
    color: #660000;
    font: 14px/16px normal Trebuchet MS,Verdana,Helvetica,sans-serif;
}
tfoot {
    font-style: italic;
}
caption {
    background: none repeat scroll 0 0 #EEEEEE;
}
.small_temp {
    font-size: 0.8em;
    line-height: 1.5em;
    margin-bottom: 1.875em;
}
.large {
    font-size: 1.2em;
    line-height: 2.5em;
    margin-bottom: 1.25em;
}
.hide {
    display: none;
}
.quiet {
    color: #666666;
}
.loud {
    color: #000000;
}
.highlight {
    background: none repeat scroll 0 0 #FFFF00;
}
.added {
    background: none repeat scroll 0 0 #006600;
    color: #FFFFFF;
}
.removed {
    background: none repeat scroll 0 0 #990000;
    color: #FFFFFF;
}
.first {
    margin-left: 0;
    padding-left: 0;
}
.last {
    margin-right: 0;
    padding-right: 0;
}
.top {
    margin-top: 0;
    padding-top: 0;
}
.bottom {
    margin-bottom: 0;
    padding-bottom: 0;
}
.required {
    color: #FF0000;
    font-weight: bold;
}