csss editing

css option edit

by Nick Hulea

HTML

<script src="http://use.typekit.net/aba1wjf.js"></script>
<div id="type">
    <div id="typeA">
        <div id="bjLogo" style="display:none;">BLACK JESUS</div>
    </div>
    <div id="typeB">
        <div id="showTime" style="display:none;">THURSDAY AT 11:00P</div>
    </div>
    <div id="typeC">
        <div id="asLogo" style="display:none;"><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>
    <div id="out" style="display:none;">
        <div id="left">
            <div id="leftHand">
                <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/left-hand-120.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-hand-120-trim.png" />
            </div>
        </div>
    </div>
    <canvas id="canvas"></canvas>
    <canvas id="canvas2"></canvas>
    <div style="font-family:'helveticaCndBld';"></div>
    <div style="font-family:'TrajanPro3Bold';"></div>
    <div id="loading">
        <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/loader.gif" />
    </div>

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: 688px;
                height: 405px;
            }
            canvas {
                position: absolute;
                top: 0;
                left: 0;
            }
            #canvas {
                z-index:4;
            }
            #canvas2 {
                z-index:3;
            }
            #left {
                z-index: 6;
                height: 50%;
                width: 50%;
                max-width: 486px;
                min-width: 486px;
                min-height: 405px;
                max-height: 405px;
                margin: auto;
                position: absolute;
                top: 0;
                left: -1125px;
                bottom: 230px;
                right: 0;
            }
            #center {
                z-index: 5;
                height: 50%;
                width: 50%;
                max-width: 688px;
                min-width: 688px;
                min-height: 405px;
                max-height: 405px;
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 154px;
                right: 0;
            }
            #right {
                z-index: 5;
                height: 50%;
                width: 50%;
                max-width: 367px;
                min-width: 367px;
                min-height: 405px;
                max-height: 405px;
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 244px;
                right: -1026px;
            }
        ...

JavaScript

//Typekit
      try {
          Typekit.load();
      } catch (e) {}

      //Image Cloud Array 
      var clouds = [
          'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_2.png',
          'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_4.png',
          'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_3.png'];

      //Initializing the canvas
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      var canvas2 = document.getElementById("canvas2");
      var ctx2 = canvas2.getContext("2d");

      //VIDEO ELEMENT
      var vid = document.getElementById("out");

      //LOGO ELEMENTS
      var type = document.getElementById("type");
      var logo = document.getElementById("bjLogo");
      var show = document.getElementById("showTime");

      //Canvas Images 
      var img = new Image();
      img.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_2.png';
      var skyImg = new Image();
      skyImg.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/black_jesus_concept_rough-copy_background.png';
      var skyImg2 = new Image();
      skyImg2.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/sky.jpg';
      var eSky = new Image();
      eSky.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/enlighten_sky3.png';
      var rHand = new Image();
      rHand.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/right-hand-120-trim.png';
      var lHand = new Image();
      lHand.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/left-hand-120.png';
      var rVid = new Image();
      rVid.src =...