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
label {
    font-weight: bold;
}
fieldset {
    border: 1px solid #CCCCCC;
    margin: 0 0 1.5em;
    padding: 1.4em;
}
legend {
    font-size: 1.2em;
    font-weight: bold;
}
input[type="text"], input[type="password"], input.text, input.title, textarea, select, option {
    background-color: #FFFFFF;
}
input[type="text"]:focus, input[type="password"]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus, option:focus {
    border-color: #666666;
}
input[type="text"], input[type="password"], input.text, input.title, textarea, select, option {
    margin: 0;
}
input.text, input.title {
    padding: 5px;
    width: 300px;
}
input.title {
    font-size: 1.5em;
}
textarea {
    height: 250px;
    padding: 5px;
    width: 390px;
}
input[type="checkbox"], input[type="radio"], input.checkbox, input.radio {
    position: relative;
    top: -0.1em;
}
form.inline {
    line-height: 3;
}
form.inline p {
    margin-bottom: 0;
}
select {
    background-color: #fff;
    border: 1px solid #A5A5A5;
    color: #333333;
    font-size: 12px;
    outline: medium none;
    padding: 2px;
}
.error, .notice, .success {
    border: 2px solid #DDDDDD;
    margin-bottom: 1em;
    padding: 0.8em;
}
.error {
    background: none repeat scroll 0 0 #FBE3E4;
    border-color: #FBC2C4;
    color: #8A1F11;
}
.notice {
    background: none repeat scroll 0 0 #FFF6BF;
    border-color: #FFD324;
    color: #514721;
}
.success {
    background: none repeat scroll 0 0 #E6EFC2;
    border-color: #C6D880;
    color: #264409;
}
.error a {
    color: #8A1F11;
}
.notice a {
    color: #514721;
}
.success a {
    color: #264409;
}
.red_btn, .grey_btn, .blue_btn, .grn_btn {
    background: none repeat scroll 0 0 #C12727;
    border: 1px solid #C12727;
    clear: both;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'HelveticaBold',sans-serif;
    font-size: 16px;
    height: 38px;
    padding: 0 40px 5px;
    text-shadow: 0 -1px 0 #000000;
    width: auto;
}
input.red_btn[type="submit"] {
    background: url("../images/bg_btn_red.jpg") repeat-x scroll left bottom #C12727;
    border: 1px solid #C12727;
}
input.red_btn[type="submit"]:hover, input.red_btn[type="submit"]:focus {
    background-position: 0 -15px;
    cursor: pointer;
}
input.blue_btn[type="submit"] {
    background: url("../images/bg_btn_blue.jpg") repeat-x scroll left bottom #0066FF;
    border: 1px solid #0066FF;
}
input.blue_btn[type="submit"]:hover, input.blue_btn[type="submit"]:focus {
    background-position: 0 -15px;
    cursor: pointer;
}
input.grey_btn[type="submit"] {
    background: url("../images/bg_btn_grey.jpg") repeat-x scroll left bottom #666666;
    border: 1px solid #666666;
}
input.grey_btn[type="submit"]:hover, input.grey_btn[type="submit"]:focus {
    background-position: 0 -15px;
    cursor: pointer;
}
input.grn_btn[type="submit"] {
    background: url("../images/bg_btn_grn.jpg") repeat-x scroll left bottom #009933;
    border: 1px solid #009933;
}
input.grn_btn[type="submit"]:hover, input.grn_btn[type="submit"]:focus {
    background-position: 0 -15px;
    cursor: pointer;
}
input[type="text"], input[type="password"], input[type="username"] {
   -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #FFFFFF;
    border-color: #999999 -moz-use-text-color #999999 #999999;
    border-image: none;
    border-radius: 0 0 0 0;
    border-style: solid none solid solid;
    border-width: 1px 0 1px 1px;
    float: left;
    font-family: "Open Sans",sans-serif;
    font-size: 11px;
    font-weight: 400;
    margin-top: 4px;
    padding: 0 5px 0 5px;
    width:140px; 
}

input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, select:focus:required:invalid:focus {
    border-color: #E9322D;
    box-shadow: 0 0 6px #F8B9B7;
}
.form-wrapper input:focus {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #C30202 !important;
    color: #333333 !important;
    font-weight: normal;
    outline: 0 none;
}
input.username[type="username"], input.password[type="password"] {
    clear: both;
    color: #CCCCCC;
    display: block;
    float: left;
    font-size: 14px;
    margin: 7px 0;
    padding: 7px;
    width: 320px;
}
input.username[type="username"]:focus, input.password[type="password"]:focus {
    color: #666666;
}
input.global_username[type="username"], input.global_password[type="password"] {
    clear: both;
    color: #CCCCCC;
    display: block;
    float: left;
    font-size: 14px;
    margin: 7px 0;
    padding: 7px;
    width: 320px;
}
input.global_username[type="username"]:focus, input.global_password[type="password"]:focus {
    color: #666666;
}
#search_menu input[type="text"] {
    clear: right;
    color: #999999;
    display: block;
    float: left;
    font-size: 21px;
    margin: 0 0 5px;
    padding: 6px;
    width: 700px;
}
#search_menu input[type="text"]:focus {
    color: #666666;
}
#signin_submit {
    background: url("../images/bg_btn_red.jpg") repeat-x scroll left bottom #C12727;
    border: 1px solid #C12727;
    width: 180px;
}
#register_submit {
    background: url("../images/bg_btn_blue.jpg") repeat-x scroll left bottom #0959A3;
    border: 1px solid #0066FF;
}
#signin_submit:hover, #register_submit:hover, #signin_submit:focus, #register_submit:focus {
    background-position: 0 -15px;
    cursor: pointer;
}
#dealer_search_submit {
    background: url("../images/bg_btn_red.jpg") repeat scroll left bottom #C12727;
    border: 1px solid #C12727;
    color: #FFFFFF;
    float: right;
    font-family: 'HelveticaBold',sans-serif;
    font-size: 24px;
    margin: 30px 0 0 5px;
    padding: 9px 20px;
    text-shadow: 0 -1px 0 #000000;
    width: 260px;
}
#dealer_search_submit:hover, #dealer_search_submit:focus {
    background-position: 0 -15px;
    cursor: pointer;
}
#create_profile_submit {
    background: url("../images/bg_btn_grey.jpg") repeat-x scroll left bottom #666666;
    border-color: #666666 #F1F1F1 #F1F1F1 #666666;
    border-style: solid;
    border-width: 1px;
    color: #FFFFFF;
    font-family: 'HelveticaBold',sans-serif;
    font-size: 16px;
    height: 40px;
    line-height: 14px;
    margin: 0;
    text-shadow: 0 -1px 0 #000000;
    width: 160px;
}
#create_profile_submit:hover, #create_profile_submit:focus {
    background-position: 0 -15px;
    cursor: pointer;
}
#com_login_submit {
    background: url("../images/bg_btn_grey.jpg") repeat-x scroll left bottom #C12727;
    border-color: #666666 #F1F1F1 #F1F1F1 #666666;
    border-style: solid;
    border-width: 1px;
    height: 40px;
    line-height: 14px;
    width: 160px;
}
#com_login_submit:hover, #com_login_submit:focus {
    background-position: 0 -15px;
    cursor: pointer;
}
#save_profile_submit {
    background: url("../images/bg_btn_red.jpg") repeat-x scroll left bottom #C12727;
    border-color: #666666 #F1F1F1 #F1F1F1 #666666;
    border-style: solid;
    border-width: 1px;
    color: #FFFFFF;
    font-family: 'HelveticaBold',sans-serif;
    font-size: 16px;
    height: 40px;
    line-height: 14px;
    margin: 0;
    text-shadow: 0 -1px 0 #000000;
    width: 160px;
}
#save_profile_submit:hover, #create_profile_submit:focus {
    background-position: 0 -15px;
    cursor: pointer;
}
#change_password_submit, #validate_profile_submit {
    background: url("../images/bg_btn_blue.jpg") repeat-x scroll left bottom #C12727;
    border-color: #666666 #F1F1F1 #F1F1F1 #666666;
    border-style: solid;
    border-width: 1px;
    color: #FFFFFF;
    font-family: 'HelveticaBold',sans-serif;
    font-size: 16px;
    height: 40px;
    line-height: 14px;
    margin: 0;
    text-shadow: 0 -1px 0 #000000;
    width: 100px;
}
#change_password_submit:hover, #change_password_submit:focus, #validate_profile_submit:hover, #validate_profile_submit:focus {
    background-position: 0 -15px;
    cursor: pointer;
}
#signup_submit_yes {
    background: url("../images/bg_btn_blue.jpg") repeat-x scroll left bottom #C12727;
    border-color: #666666 #F1F1F1 #F1F1F1 #666666;
    border-style: solid;
    border-width: 1px;
    color: #FFFFFF;
    display: block;
    float: left;
    font-family: 'HelveticaBold',sans-serif;
    font-size: 16px;
    height: 40px;
    line-height: 14px;
    margin: 0 20px 0 0;
    text-shadow: 0 -1px 0 #000000;
    width: 100px;
}
#signup_submit_yes:hover, #signup_submit_yes:focus, #signup_submit_yes:hover, #signup_submit_yes:focus {
    background-position: 0 -15px;
    cursor: pointer;
}
#signup_submit_no {
    background: url("../images/bg_btn_grey.jpg") repeat-x scroll left bottom #C12727;
    border-color: #666666 #F1F1F1 #F1F1F1 #666666;
    border-style: solid;
    border-width: 1px;
    color: #FFFFFF;
    float: left;
    font-family: 'HelveticaBold',sans-serif;
    font-size: 16px;
    height: 40px;
    line-height: 14px;
    margin: 0;
    text-shadow: 0 -1px 0 #000000;
    width: 100px;
}
#signup_submit_no:hover, #signup_submit_no:focus, #signup_submit_no:hover, #signup_submit_no:focus {
    background-position: 0 -15px;
    cursor: pointer;
}
#com_login_submit {
    background: url("../images/bg_btn_grey.jpg") repeat-x scroll left bottom #C12727;
    border-color: #666666 #F1F1F1 #F1F1F1 #666666;
    border-style: solid;
    border-width: 1px;
    height: 40px;
    line-height: 14px;
    width: 160px;
}
#com_login_submit:hover, #com_login_submit:focus {
    background-position: 0 -15px;
    cursor: pointer;
}
#artist_submit {
    background: url("../images/bg_btn_grey.jpg") repeat scroll left bottom #666666;
    border: 1px solid #FFFFFF;
    font-family: 'HelveticaNormal',sans-serif;
    font-size: 18px;
    height: 45px;
    margin: 0 0 0 5px;
    width: 90px;
}
#artist_submit:hover, #artist_submit:focus {
    background-position: 0 -15px;
    cursor: pointer;
}
#artist_menu {
    float: right;
    width: 320px;
}
#artist_menu input[type="text"] {
    clear: right;
    color: #CCCCCC;
    display: block;
    float: left;
    font-size: 21px;
    margin: 0 0 5px;
    padding: 6px;
    width: 200px;
}
#artist_menu input[type="text"]:focus {
    color: #990000;
}
#home_dealer_submit {
    background: url("../images/bg_btn_red.jpg") repeat scroll left bottom #C12727;
    border: 1px solid #FFFFFF;
    font-family: 'HelveticaNormal',sans-serif;
    font-size: 18px;
    height: 33px;
    margin: 0 0 0 5px;
    width: 90px;
}
#home_dealer_submit:hover, #artist_submit:focus {
    background-position: 0 -15px;
    cursor: pointer;
}
#home_dealer_menu {
    float: left;
}
#home_dealer_menu input[type="text"] {
    clear: right;
    color: #CCCCCC;
    display: block;
    float: left;
    font-size: 14px;
    margin: 0 0 5px;
    padding: 7px;
    width: 150px;
}
#home_dealer_menu input[type="text"]:focus {
    color: #990000;
}
#blog_comment_submit {
    background: url("../images/bg_btn_red.jpg") repeat-x scroll left bottom #C12727;
    border: 1px solid #C12727;
    clear: both;
    color: #FFFFFF;
    font-family: 'HelveticaBold',sans-serif;
    font-size: 21px;
    margin: 7px 0 0;
    padding: 7px 15px;
    text-shadow: 0 -1px 0 #000000;
    width: 180px;
}