/*********************************************************************
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: 598px; 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
*********************************************************************

#guides{position: absolute;}
#guides .guide{background-repeat:no-repeat; width:298px; height:598px; position:absolute; left:0; top:0;}
#guides .guide.one{background-image: url("../../../../Projects/Myrbetriq_Flash_Penelope_Approved_03102015/Guides/Guide_01.jpg"); display:none;}
#guides .guide.two{background-image: url("../../../../Projects/Myrbetriq_Flash_Penelope_Approved_03102015/Guides/Guide_02.jpg"); display: none;}
#guides .guide.three{background-image: url("../../../../Projects/Myrbetriq_Flash_Penelope_Approved_03102015/Guides/Guide_03.jpg"); display:none;}
#guides .guide.four{background-image: url("../../../../Projects/Myrbetriq_Flash_Penelope_Approved_03102015/Guides/Guide_04.jpg"); display:none;}
#guides .guide.five{background-image: url("../../../../Projects/Myrbetriq_Flash_Penelope_Approved_03102015/Guides/Guide_05.jpg"); display:none;}
#guides .guide.six{background-image: url("../../../../Projects/Myrbetriq_Flash_Penelope_Approved_03102015/Guides/Guide_06.jpg"); display:none;}
#guides .guide.seven{background-image: url("../../../../Projects/Myrbetriq_Flash_Penelope_Approved_03102015/Guides/Guide_07.jpg"); display:none;}
#guides .guide.eight{background-image: url("../../../../Projects/Myrbetriq_Flash_Penelope_Approved_03102015/Guides/Guide_08.jpg"); 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; background-color:transparent;}
sup {vertical-align: super; font-size: 8px;}
a, a:hover, a:active, a:visited{color:#000000;}

/*Preload*/
.bg_black{background-color:#000000; width:100%; height:100%; left:0; top:0;}
.bg_woman{background-image: url("_mainImage.jpg"); width:300px; height:600px; left:0; bottom:0;}
    .bg_woman.small{background-position: right -29px; width:298px; height:241px; top:160px; z-index:6;}

/*Scene 01 */
.text_01{background-image: url("_text_01.jpg"); width:300px; height:600px; left:0; top:0;}

/*Scene 02 */
.isi{z-index: 15; left:0; top:400px;}

.img_logo{background-image: url("_img_logo.png"); width:146px; height:74px; left:11px; top:10px; z-index: 6;}
.btn_info{background-image: url("_btn_info.gif"); width:153px; height:12px; left:75px; top:582px; z-index: 11;}
.text_approved{background-image: url("_text_approved.gif"); width:279px; height:172px; left:12px; top:135px; z-index: 6;}

/*Scene 03 */
.bladdy_01{background-image: url("_bladdy1_full.jpg"); width:116px; height:83px; left:95px; top:247px; z-index: 6;}
.bladdy_02{background-image: url("_bladdy2_full.jpg"); width:76px; height:100px; left:102px; top:249px; z-index: 6;}
.bladdy_03{background-image: url("_bladdy3_full.jpg"); width:85px; height:96px; left:108px; top:256px; z-index: 6;}
.box_01{background-image: url("_box_01.gif"); width:199px; height:90px; left:52px; top:115px; z-index: 6;}
.box_02{background-image: url("_box_02.gif"); width:199px; height:90px; left:53px; top:115px; z-index: 6;}
.box_03{background-image: url("_box_03.gif"); width:199px; height:90px; left:52px; top:115px; z-index: 6;}

/*Scene 04 */
.text_ask{background-image: url("_text_ask.gif"); width:1205px; height:90px; left:48px; top:179px; z-index: 6;}
.bladdy_04{background-image: url("_bladdy4_full.jpg"); width:104px; height:113px; left:300px; top:154px; z-index: 9;}

/*Scene 05 */
.text_end{background-image: url("_text_end.gif"); width:2161px; height:78px; left:18px; top:114px; z-index: 6;}
.text_vary{background-image: url("_text_vary.gif"); width:80px; height:9px; left:19px; top:249px; z-index: 6;}
.btn_start{background-image: url("_btn_start.gif"); width:110px; height:27px; left:19px; top:211px; z-index: 11; overflow: visible;}