@charset "UTF-8";
sup,

/* CSS Document */

body {
    margin: 0;
}

#container {
    /*Outter most container that could be considered the "Stage"*/
    position: absolute;
    overflow: hidden;
    height: 600px;
    width: 300px;
    cursor: pointer;
    border: 1px solid black;
    box-sizing: border-box;
}


/*Utilities*/

.Absolute-Center {
    /*Centers this element within a div*/
    position: absolute;
    top: 50%;
    left: 50%;
    /* IE 9 */
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%);
}

sub {
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
    font-size: 60%;
}

sub {
    top: 0.5em;
}


/*Non-Copy Elements*/

#Frame1_BG {
    position: absolute;
    background-image: url(../images/Frame1_BG.jpg);
    background-repeat: no-repeat;
    width: 300px;
    height: 600px;
    top: 0px;
    left: 0px;
}

#Frame2_BG {
    position: absolute;
    background-image: url(../images/Frame2_BG.jpg);
    background-repeat: no-repeat;
    width: 300px;
    height: 600px;
    top: 0px;
    left: 0px;
}

#CTA {
    position: absolute;
    visibility: hidden;
    left: 35px;
    top: 200px;
}

#CTA_OFF {
    position: absolute;
    background-image: url(../images/CTA_OFF.jpg);
    background-repeat: no-repeat;
    width: 224px;
    height: 34px;
}

#CTA_ON {
    position: absolute;
    background-image: url(../images/CTA_ON.jpg);
    background-repeat: no-repeat;
    width: 224px;
    height: 34px;
}


/* Copy Elements */

#Copy1 {
    position: absolute;
    visibility: hidden;
    top: 100px;
    left: 50px;
    height: 36px;
    width: 206px;
    background-image: url(../images/Copy1.png);
    background-repeat: no-repeat;
}

#Copy2 {
    position: absolute;
    visibility: hidden;
    top: 90px;
    left: 40px;
    height: 56px;
    width: 222px;
    background-image: url(../images/Copy2.png);
    background-repeat: no-repeat;
}