.ruler-back {
    background-color: lightgray;    
}

#ruler-unit-label-wrapper {      
    position: absolute;
    text-align: center;
    z-index: 2;
    background-color: lightgray;    
}

.ruler-wrapper {
    height: 40px;
}

#ruler-unit-label {
    font-family: Arial;
    margin-top: 15px;
    font-size: 10px;
    color: black;
}

.ruler {    
    font: 12px Arial;
    margin: 0;
    padding: 0;   
    background-color: white;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    color: black;   
    height: 30px;
    position: relative;
    list-style: none;
    display: inline-block;
    white-space: nowrap;
    top: 5px;
}

.ruler li {
    display: inline-block; 
    width: 2em;

    /*right bottom left*/
    margin: .64em -1em -.64em;

    text-align: center;
    position: relative;     
}

.ruler li:before {
    content: '';
    position: absolute;
    border-left: 1px solid black;
    height: .64em;
    top: 15px;
    right: 1em;
}

.ruler-top {
    margin-left: 44px;
    overflow: hidden;
}

#ruler-left {
    position: absolute;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    top: 350px;
    left: 5px;
}

#ruler-top-indicator {
    width: 1px;
    height: 40px;
    border-left: solid 1px red;
    position: absolute;
    z-index: 3;
    margin-top: -41px;
}

#ruler-left-indicator {
    width: 40px;
    height: 1px;
    border-top: solid 1px red;
    position: absolute;
    z-index: 3;
    top: 10px;
}