Change Lightbox cursor position

Question

I’m using a plugin to make the lightbox effect (Follow the link below this text), and I need to make some changes in the look, as the cursors and their positions. I changed the close from it to the top and changed the colors of the arrows now I’m trying to let them out of the picture.

Lightbox: The original lightbox script

I managed to do this with the cursor next, but not with the prev. I took the float:left of the two cursors and next I put a margin-left and it worked, already for prev(cursor to return)the margin does not solve anything, it remains in the same place.

Picture of how I’m seeing

HTML

<div id='lightboxOverlay' class='lightboxOverlay'>
</div>

<div id='lightbox' class='lightbox'>
    <div class='lb-dataContainer'>
        <div class='lb-data'>
            <div class='lb-closeContainer'>
                <a class='lb-close'></a>
            </div>
    </div>
</div>
<div class='lb-outerContainer'>
    <div class='lb-container'>
        <img class='lb-image' src='' />
            <div class='lb-nav'>
                <a class='lb-prev' href='' ></a>
                <a class='lb-next' href='' ></a>
            </div>
            <div class='lb-loader'>
                <a class='lb-cancel'></a>
            </div>
        </div>
    </div>
    <div class='lb-dataContainer'>
        <div class='lb-data'>
            <div class='lb-details'>
                <span class='lb-caption'></span>
                <span class='lb-number'></span>
            </div>
        </div>
    </div>

CSS

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  /*float: left;*/
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0.5;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
  margin-right: 10px !important;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  /*float: right;*/
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0.5;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
  margin-left: 44% !important;
}

Answer 1

Resolution

Finally I got the answer !. I took the part of margin I had done and changed the part of right and left.

Code

I’ll just put here what I added.

.lb-prev, .lb-next {
    width: 50%;
    position:absolute;
    top: 0;
}

.lb-prev{
    left:-60px;
}

.lb-next {
    right:-60px;
}