#largeCanvas {
    left: 4%;
    top: 14%;
    height: 125px;
    width: 125px;
    z-index: -1;
    position: absolute;
    opacity: 0.8;
}

#smallCanvas {
    left: 61%;
    top: 63%;
    height: 50px;
    width: 50px;
    z-index: -1;
    position: absolute;
    opacity: 0.25;
}

#badgeCanvas {
    left: 8%;
    top: 49%;
    height: 125px;
    width: 125px;
    z-index: -1;
    position: absolute;
}

#lNumber {
    left: 39%;
    top: 15%;
    font-weight: 900 !important;
    font-size: larger;
}

#expire {
    color: red;
    left: 40%;
    top: 26%;
}

#lName {
    font-weight: 900 !important;
    left: 39%;
    top: 36%;
    font-size: larger;
}

#fName {
    font-weight: 900 !important;
    left: 39%;
    top: 48%;
    font-size: larger;
}

#address {
    left: 3%;
    top: 67%;
    font-size: smaller;
    max-width: 30%;
}

#dob {
    font-weight: bolder !important;
    left: 40%;
    top: 65%;
    color: red;
}

#restrictions {
    left: 42%;
    top: 75%;
}

#sex {
    left: 52%;
    top: 84%;
}

#dd {
    left: 50%;
    top: 92.5%;
    font-size: 10px;
}

#iss {
    left: 81%;
    top: 76%;
    font-size: 12px;
}

#class {
    left: 80%;
    top: 17%;
}

#endorsements {
    left: 78%;
    top: 28%;
}

.longName {
    font-size: small !important;
}

body {
    display: none;
    position: absolute;
    bottom: 0px;
    right: 450px;
    width: 445px;
    max-height: 330px;
    font-family: Arial, Helvetica, sans-serif;
    float: right;
}

.license {
    font-weight: bold;
    position: absolute;
}

.badge {
    width: 100%;
    text-align: left;
    position: absolute;
    color: white;
}

#name {
    top: 48%;
    left: 56%;
}

#uNumber {
    top: 58%;
    left: 63%;
}

#rank {
    top: 69%;
    left: 56%;
}

#webId {
    top: 79%;
    left: 63%;
}

#pNumber {
    top: 90%;
    left: 61%;
}