#credits {
   position: absolute;
   left: 0px;
   top: 0px;
   background-image: url(../images/credits/bg_credits.jpg);
}


#credits .credits_content {
    width: 613px;
    height: 628px;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: 1;
	/*white-space: nowrap;*/ /* used in horizontal scrolling page */
}

/* Begin scrolling */

#credits .credits_content::-webkit-scrollbar {
    background: url(../images/credits/scroll_bar.png) no-repeat center center;
    border-style:none;
    width: 17px;
    height: 628px;
}

#credits .credits_content::-webkit-scrollbar-thumb,
#credits .credits_content::-webkit-scrollbar-thumb:active {
    background: url(../images/credits/scroll_thumb.png) no-repeat top center;
    cursor: pointer;
    display: block;
    border-color: transparent;
    background-color: transparent;
    width: 17px;
    height: 26px;
}

/* TODO: set margins to negative value to pull the start/stop position of the scollbar thumb to the beginning/end */
#credits .credits_content::-webkit-scrollbar-track-piece:vertical:start {
    margin-top: 0px;
}
#credits .credits_content::-webkit-scrollbar-track-piece:vertical:end {
    margin-bottom: -23.5%;
}

#credits .credits_content::-webkit-scrollbar-track-piece:horizontal:start {
    margin-left: 0px;
}
#credits .credits_content::-webkit-scrollbar-track-piece:horizontal:end {
    margin-right: 0px;
}

/* End scrolling */

#credits .home {
   position: absolute;
   left: 0px;
   top: 635px;
}

#credits .credits_content {
   position: absolute;
   left: 592px;
   top: 50px;
}