/*********************************************************************
Base Styles
**********************************************************************/

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

/* Default style*/
body, body * {vertical-align: baseline; border: 0; outline: 0; padding: 0; margin: 0;}

/* Div layer for the entire banner */
#container {position: absolute; width: 298px; height: 248px; border:1px solid #666666; top: 0px; left: 0px; margin: auto;}
#content {position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #f0f0f0; z-index: 1; overflow: hidden; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color:#000000;
} /* Dev Note: background:none; to show guide, or #f0f0f0 */

/* Invisible button for background clickthrough */
#bg_exit {position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; cursor: pointer; opacity: 0; z-index: 10; background: none;}

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

/*********************************************************************
Guide Style for Production
**********************************************************************/

#Guide{position: absolute;}
#Guide .guide{background-repeat:no-repeat; width:298px; height:248px; position:absolute; left:0; top:0;}
#Guide .guide.one{background-image: url("../../../../Projects/Myrbetriq_Flash_DTC_Approved_03102015/Guide/frame1.png"); display:none;}
#Guide .guide.two{background-image: url("../../../../Projects/Myrbetriq_Flash_DTC_Approved_03102015/Guide/frame2.png"); display: none;}
#Guide .guide.three{background-image: url("../../../../Projects/Myrbetriq_Flash_DTC_Approved_03102015/Guide/frame6.png"); display:none;}
#Guide .guide.four{background-image: url("../../../../Projects/Myrbetriq_Flash_DTC_Approved_03102015/Guide/frame7.png"); display:none;}

/*********************************************************************
Content Style
**********************************************************************/
/*
Frequently used css background image properties intead of stying text elements in order to 
a)minimize the file size (no need to include font file) and
b)cross browser compatibility 
*/

/*Basic Style */
#content div, #content button{position:absolute; background-repeat: no-repeat;} /* Note: placed elements in absolute position. If Relative position are requied, it is overwritten in individual styling */

.fadeIn, .slideIn{visibility:hidden;}
.clickable{cursor: pointer; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none;}
button{border: none;}
sup {vertical-align: super; font-size: 8px;}
a, a:hover, a:active, a:visited{color:#000000;}

/*Preload*/
.bg_woman{background-image: url("_mainImage.jpg"); width:298px; height:248px; right:0; top:0;}

/*Scene 01 */
.text_01{background-image: url("_text_01.png"); width:206px; height:109px; left:18px; top:16px;}

/*Scene 02 */
.bg_beige{background-color:#f0f0f0; height:100%; width:100%; top:0; left:0; z-index: 3;}
.isi{ left:0; top:133px; z-index: 15;}
.gradient{background-image: url("_gradient.gif"); background-repeat: repeat-x !important; width:298px; height:4px; top:129px; left:0; z-index:4;}

.img_logo{background-image: url("_img_logo.png"); width:100px; height:45px; left:11px; top:13px; z-index: 6;}
.btn_info{background-image: url("_btn_info.gif"); width:178px; height:14px; left:9px; top:229px; z-index: 11;}
.text_approved{background-image: url("_text_approved.gif"); width:278px; height:50px; left:10px; top:69px; z-index: 6;}

/*Scene 03 */
.bladdy_01{background-image: url("_bladdy1_full.jpg"); width:116px; height:83px; left:171px; top:35px; z-index: 6;}
.bladdy_02{background-image: url("_bladdy2_full.jpg"); width:76px; height:100px; left:198px; top:19px; z-index: 6;}
.bladdy_03{background-image: url("_bladdy3_full.jpg"); width:85px; height:96px; left:187px; top:24px; z-index: 6;}
.box_01{background-image: url("_box_01.gif"); width:109px; height:50px; left:59px; top:71px; z-index: 6;}
.box_02{background-image: url("_box_02.gif"); width:109px; height:50px; left:51px; top:71px; z-index: 6;}
.box_03{background-image: url("_box_03.gif"); width:109px; height:50px; left:59px; top:71px; z-index: 6;}

/*Scene 04 */
.text_ask{background-image: url("_text_ask.gif"); width:251px; height:42px; left:22px; top:76px; z-index: 6;}
.bladdy_04{background-image: url("_bladdy4_full.jpg"); width:117px; height:62px; left:25px; top:143px; z-index: 9;}
.bladdy_04_hand{background-image: url("_bladdyHand.png"); width:34px; height:13px; left:7px; top:116px; z-index: 17;}

/*Scene 05 */
.text_end{background-image: url("_text_end.gif"); width:123px; height:55px; left:157px; top:14px; z-index: 6;}
.text_vary{background-image: url("_text_restrictions.gif"); width:84px; height:12px; left:159px; top:107px; z-index: 6;}
/*.text_vary{left:159px; top:110px; display:inline-block; position:absolute; font-size:10px; z-index: 6;}*/
.btn_start{background-image: url("_btn_start.gif"); width:93px; height:23px; left:158px; top:81px; z-index: 11; overflow: visible;}