@charset "UTF-8";
/* CSS Document */


body{
    position:absolute;
    border:0 none;
    outline:0;
    padding:0;
    margin:0;
    background: #000000;
    background-color:transparent;
    
    /* below improves consistancey of font rendering across browsers */
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;

    /* below stops FireFox rendering copy too heavily */
    -moz-osx-font-smoothing: grayscale;
}

/* Practical level of Browser Support: Chrome:5+, Safari:5.1+, Firefox:3.6+, Opera:11.50+, IE:9+, Android:4.4+, iOS:5.1+ */
@font-face {
    font-family: 'EYInterstate-Regular';
    src: url('../fonts/EYInterstate-Regular_webfont.jpg') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'EYInterstate-Bold';
    src: url('../fonts/EYInterstate-Bold_webfont.jpg') format('woff');
    font-weight: normal;
    font-style: normal;
}

 #container{
    position:absolute;
    width:300px;
    height:250px;
    top:0px;
    left:0px;
    margin:auto;
    overflow: hidden;
}

#keyline{
    position:absolute;
    top:0px;
    left:0px;
    width:300px;
    height:250px;
    z-index:399;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border:1px solid #666666;
    background-color:transparent;
}


#background {
    position:absolute;
    width:100%;
    height:100%;
    top: 0px;
    left: 0px;
    background: #000000;
}

#handshake {
    position:absolute;
    left: 0px;
    top: 0px;
}

#bgImage {
    position:absolute;
    left: 0px;
    top: -10px;
}

#redLight {
    position:absolute;
    background-color:#ff0000;
    height:4px;
    width:4px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    left: 150px;
    top: 157px;
}

#greenLight {
    position:absolute;
    background-color:#4be31c;
    height:4px;
    width:4px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    left: 135px;
    top: 144px;
}

#blueLight {
    position:absolute;
    background-color:#00a8ff;
    height:4px;
    width:4px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    left: 146px;
    top: 161px;
}

/* EY square container - set positioning here */
#eySquare {
    position:absolute;
    left: 14px;
    bottom: 22px;
    background: #FFE600;
    width:30px;
    opacity:0;
    filter:alpha(opacity=0);
}

/* EY square borders - *IMPORTANT: ONLY EDIT BACKGROUND COLOUR HERE. Changes to sizing and positioning for these elements should be made at top of js file rather than here*/
#eySquareLeft {position:absolute; width:10px; height:140px; left:0px; bottom:20px; background:#FFE600;}
#eySquareRight {position:absolute; width:10px; height:192px; left:190px; bottom:0px; background:#FFE600;}
#eySquareBottom01 {position:absolute; width:10px; height:10px; left:0px; bottom:0px; background:#FFE600;}
#eySquareBottom02 {position:absolute; width:10px; height:10px; left:20px; bottom:0px; background:#FFE600;}
#eySquareBottom03 {position:absolute; width:10px; height:10px; left:40px; bottom:0px; background:#FFE600;}
#eySquareBottom04 {position:absolute; width:140px; height:10px; left:60px; bottom:0px; background:#FFE600;}
#eySquareTop {position:absolute; width:200px; height:10px; left:0px; bottom:200px; background:#FFE600;}


/* EY square alpha fill container - set positioning here */
#eySquareAlphaFill {
    position:absolute;
    left: 14px;
    bottom: 22px;
    opacity:0;
    filter:alpha(opacity=0);
}


/* EY square fill elements *IMPORTANT: ONLY EDIT BACKGROUND COLOUR HERE. Changes to sizing and positioning for the fill are handled automatically in the js file*/
#eySquareAlphaFill01 {
    position:absolute;
    width:200px;
    height:140px;
    left:0px;
    bottom:0px;
    background:#000000;
    opacity:1;
    filter:alpha(opacity=100);
}

#eySquareAlphaFill02 {
    position:absolute;
    width:200px;
    height:140px;
    left:0px;
    bottom:0px;
    /*background:#000000;*/

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&1+50,0+85 */
    background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 85%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 85%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 85%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

/* EY square fill container (only used for BRAND creatives) - set positioning here */
#eySquareSolidFill {
    position:absolute;
    left: 14px;
    bottom: 22px;
    opacity:0;
    filter:alpha(opacity=0);
}

/* EY square fill elements *IMPORTANT: ONLY EDIT BACKGROUND COLOUR HERE. Changes to sizing and positioning for the fill are handled automatically in the js file*/
#eySquareSolidFill01 {position:absolute; width:200px; height:140px; left:0px; bottom:0px; background:#FFE600;}
#eySquareSolidFill02 {position:absolute; width:200px; height:140px; left:0px; bottom:0px; background:#FFE600;}


#revealerSquare {position:absolute; width:11px; height:11px; left:-15px; top:64px; background:#FFE600;}


/**
 * EY SQUARE COPY (copy that is to appear inside the EY square)
 *
 * If using webfonts: Ignore the left and top properties specified in the below CSS as these will be calculated and set in the JS. 
 *
 * If using images for copy: This copy will be positioned via left and top properties specified in the below CSS.
 */
#copy_squareFrame01 {
    position:absolute;
    left: 0px;
    top: 0px;
    font-size: 18px;
    line-height: 22px;
    font-family: EYInterstate-Bold;    
    color: #FFFFFF;
    opacity:0;
    filter:alpha(opacity=0);
}

/**
 * END FRAME (aka 'approach line') COPY 
 * This copy is always positioned via left and top properties specified in the CSS whether using webfonts or images for copy.
 */
#copy_approachLine01, #copy_approachLine02, #copy_approachLine03 {
    overflow:hidden;
    white-space: nowrap;
    width:300px;
    /*width:0px;
    height:25px;*/
    position:absolute;
    font-size: 20px;
    line-height: 22px;
    font-family: EYInterstate-Regular;    
    color: #FFFFFF;
    opacity:0;
    filter:alpha(opacity=0);
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);;
    filter: Shadow(Color=black, Direction=130, Strength=1);
}
#copy_approachLine01 {left:15px; top:56px;}
#copy_approachLine02 {left:15px; top:56px;}
#copy_approachLine03 {left:15px; top:56px;}


/**
 * END FRAME (aka 'approach line') SQUARES
 */
#square_approachLine01 {position:absolute; width:12px; height:12px; left:57px; top:33px; background:#FFE600; opacity:0; filter:alpha(opacity=0);}
#square_approachLine02 {position:absolute; width:12px; height:12px; left:36px; top:33px; background:#FFE600; opacity:0; filter:alpha(opacity=0);}
#square_approachLine03 {position:absolute; width:12px; height:12px; left:15px; top:33px; background:#FFE600; opacity:0; filter:alpha(opacity=0);}


/**
 * Additional END FRAME COPY (eg. hashtag and copyright)
 * This copy is always positioned via left and top properties specified in the CSS whether using webfonts or images for copy.
 */
#copy_hashtag {
    position:absolute;
    left: 15px;
    bottom: 27px;
    font-size: 14px;
    line-height: 20px;
    font-family: EYInterstate-Regular;    
    color: #FFFFFF;
    opacity:0;
    filter:alpha(opacity=0);
}
#copy_copyright {
    position:absolute;
    left: 15px;
    bottom: 2px;
    font-size: 8px;
    line-height: 20px;
    font-family: EYInterstate-Regular;    
    color: #FFFFFF;
    opacity:0;
    filter:alpha(opacity=0);
}

/**
 * CTA Button
 */
#cta {
    position:absolute;
    left: 15px; 
    top: 170px;
    opacity:0;
    filter:alpha(opacity=0);
}
#ctaBg {
    position:absolute;
    left: 0px; 
    top: 0px;
    width:120px;
    height:27px;
    background:#FFFFFF;
}
#copy_cta {
    position:absolute;
    left: 10px;
    top: 6px;
    width:120px;
    font-size: 14px;
    line-height: 16px;
    font-family: EYInterstate-Bold;    
    color: #000000;
}
#ctaArrowBg {
    position:absolute;
    left: 120px; 
    top: 0px;
    width:30px;
    height:27px;
    background:#FFE600;
}
#ctaArrow {
    position:absolute;
    left: 130px;
    top: 3px;
    width:120px;
    font-size: 18px;
    line-height: 20px;
    font-family: EYInterstate-Bold;    
    color: #000000;
}


#ey_logo {
    position:absolute;
    left:202px;
    top:142px;
    opacity:0;
    filter:alpha(opacity=0);
}

/**
 * Replay Button
 */
#btnReplay {
    position:absolute;
    left: 3px; 
    top: 3px;
    display:none;
    z-index:401;
    cursor: pointer;
}


:focus {outline:none;}
::-moz-focus-inner {border:0;}