centering hands/video csss

by Nick Hulea

HTML

<div id="type" style="display:none;">
    <div id="asLogo"><a href="http://www.adultswim.com/" target="_blank"><img alt="adult swim" title="adult swim" src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/asLogo.png"/></a> 
    </div>
    <div id="bjLogo">BLACK JESUS</div>
    <div id="showTime"> <a href="http://www.adultswim.com/" target="_blank">
        <img alt="show time" title="show time" src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/080714.png"/></a>
    </div>
</div>
<div id="out">
<div id="left">
    <div id="leftHand">
        <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/left-hand.png" />
    </div>
</div>
<div id="center">
    <iframe src="//www.youtube.com/embed/aKi-cj39-xg" frameborder="0" allowfullscreen></iframe>
</div>
<div id="right">
    <div id="rightHand">
        <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/right-hand3.png" />
    </div>
</div>
</div>
<canvas id="canvas"></canvas>
<div style="font-family:'helveticaCndBld';"></div>
<div style="font-family:'TrajanPro3Bold';"></div>
<div id="bg1"></div>
<div id="bg2"></div>
<!-- ctx.globalCompositeOperation=' source-atop'; ctx.globalCompositeOperation=' source-in'; ctx.globalCompositeOperation=' source-out'; ctx.globalCompositeOperation=' source-over'; ctx.globalCompositeOperation=' destination-atop'; ctx.globalCompositeOperation=' destination-in'; ctx.globalCompositeOperation=' destination-out'; ctx.globalCompositeOperation=' destination-atop'; ctx.globalCompositeOperation=' lighter'; ctx.globalCompositeOperation=' darker'; ctx.globalCompositeOperation=' xor'; ctx.globalCompositeOperation=' copy'; -->

CSS

html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                border: 0;
                overflow: hidden;
                /*  Disable scrollbars */
                display: block;
                /* No floating content on sides */
            }
            iframe, video {
                position: relative;
                width: 689px;
                height: 405px;
            }
            canvas {
                z-index: 3;
                position: absolute;
                top: 0;
                left: 0;
            }
            #left {
                z-index: 6;
                height: 50%;
                width: 50%;
                max-width: 405px;
                min-width: 405px;
                min-height: 405px;
                max-height: 405px;
                margin: auto;
                position: absolute;
                top: 0;
                left: -1053px;
                bottom: 0;
                right: 0;
            }
            #center {
                z-index: 5;
                height: 50%;
                width: 50%;
                max-width: 689px;
                min-width: 689px;
                min-height: 405px;
                max-height: 405px;
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
            }
            #right {
                z-index: 5;
                height: 50%;
                width: 50%;
                max-width: 312px;
                min-width: 312px;
                min-height: 405px;
                max-height: 405px;
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: -954px;
            }
            #in {
                position:relative;
            }
            #asLogo {
                position:...