1/* 2 * Copyright (C) Research In Motion Limited, 2012. All rights reserved. 3 */ 4 5html { 6 overflow: hidden; 7} 8 9body { 10 padding: 30px; 11 margin: 0; 12 font-family: "Slate Pro", "Myriad Pro", "Arial", "Helvetica", sans-serif; 13 font-size: 40px; 14 background: rgba(0, 0, 0, 0.4); 15 -webkit-user-select: none; 16 display: -webkit-box; 17 -webkit-box-orient: vertical; 18 -webkit-box-align: center; 19 -webkit-box-pack: center; 20} 21 22.popup-area { 23 box-sizing: border-box; 24 width: 100%; 25 display: -webkit-box; 26 -webkit-box-orient: vertical; 27} 28 29 .popup-header { 30 line-height: 93px; 31 background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(left, #0073bc, #00a8df); 32 border-top-left-radius: 12px; 33 border-top-right-radius: 12px; 34 padding: 0 32px; 35 font-size: 1.2em; 36 color: #fafafa; 37 text-shadow: rgba(0, 0, 0, 0.5) 0 2px; 38 } 39 40 .popup-content { 41 -webkit-box-flex: 1; 42 white-space: nowrap; 43 -webkit-overflow-scrolling: touch; 44 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsoAAAAOCAMAAAABrsr5AAAAhFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC9KDLhAAAALHRSTlMAAgAIBAoGEhAjFxtBMTAUPyEOGUUdJQwfQxY+KC5GN0g8OkoqLE04NTNLJoKxqUMAAAMqSURBVHhenNaLbqJQEIBh6+GiWKFqEaWw2gp1pe//fjuXA8MZw6X7JWhQAvH4M2GhvDAvCIyf7cEqDMMkySNw2KCUnE6nHVkfxQ8oUIVqUqJ463q0/iJ+vSB4I3frS/kUH8/eHK9jzsr7TH+GtN9ff4HPOO59lnPP65g318eAT+ur7y7gn0L8l4lHa2vFpLRqVLHihxytNdqRtHMAUZQneZ4nSbja77MsM35ggsB7IYsxHLLnGd/nlEMA56KSCVTMHR9RwahgVXFJ4lile+njdaFlsksnneo450Y5nd712a3TkFtP07m5mu9O0/qerxHy2Q1MXVt/cAXa9E1xVibrd1KXyWIzx+3i6IctSdeEcxbSNQUNhaUbBjFH0HK4WlHL0KUJPEx5uVwuxiwBHhgYQDXzZE4S7JkckIxntBNrxDOaSeKsZqXA3uOhqS14Aly0uzI0xucPdG1wpk2Pe226nTnX1gbmqgbl6SHrTFpNj91H31ZwpbCRulNZEivSU5hRRynZABzHIEeQXggjGWS+QQGHPJkyoicMYAxuxs+g6QyLxlsjJEkrRxGT0EVqncTuyVrpfrLcDER2RKXUjnJAPNMW9PZc6rj/NPMSsjOhHFJjZ4IWqxKFppfeeZD8R22d7EgIAgEYHptmEQ5GiEJ4/wedKWgoFwSXvsyXaDyRWP6pOPdo3HMLU6KQATLCaAMORBL+KrSFvUrJm4ELKUPLb8ACEoum1MZjE7HGhyK/grXLxaNRG+uXx4mUuJqxov+m+Zn+e8YKd2w65AL8Kvss8xYLd6zUbwxleUGKQAObUNjEcEHCUS65nTLo/qSaAUloZpEuEQX8vKHOyw9fJg2Slxh1g3lGXSevMVl5YhINLfwksacPWEQR+WC54w6cT3mTc7jlw7BqbDxiG4Q+Yut0azjiNv4/iJua47Itv+zSMQ7AMAhD0RoI9z9yt1ZKGeIUpAy8E1jyHz/41xRPENPbsDzWUn4hYIt8g5YYbWgJZ9kihETolGPg2AYvoU29hLFAkUl2ykKjtyOXNUMy8ighZaR8BJyuyQnuduCYAAAAAGGQ/VObYh8sBQBwui9++9bVWtwAAAAASUVORK5CYII="), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsoAAAAOCAMAAAABrsr5AAAAhFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC9KDLhAAAALHRSTlMAAgAIBAoGEhAjFxtBMTAUPw4hGUUdJQwfQxY+KEYuN0g8OkoqLE04NTNLJh4DkbUAAALjSURBVHhe7MAxAQAAAMIg+6c2xT5YDQDg7NM7DoBADANRvL/7HxkJ0lDQbHYkF5kbWHpuFsm9qjm0TVlvpEyG8qgGQxmTryeOMg9oIfWqLyTsUecpZ4j6oJvVNDlIjvw25XArhcsA+p3xPysp6Ka2XnYYBIEAivY1LcLCILEQ//9Dm6EoiAMUcNOT6JYE70zUeZI5MoE1e/0H1qh4XboEOjyPoniImHzbDSmv6/ewLsnWJKWzkjFv4c5C48rjVZRooPqIeryO2tA3xr2xpGPYZAI9KOGW3G/rn1N2fxFbxfgC0PbEVKqJ9ogLC/JS6BjPvBLIfM00kzNlDGd69xnOM2WYtDnJWPhVQsJT27T4mSG3zEjD5IP092nbnvHBmp2KlHEjfyO2IYMGwISZPSzamfFIx0uGKK5c1acTM1FOGATCcNtU7WFvtYfRaOqd93+/wi6wVyy038TMAI7M4Le/GzsHCNB56gQNiI1iK1ie4bGQBwcbSfj7/k/hFjTIsDzH1l0MOKwNUWv00c8inYNXX6Zo+vRH3wmmugx0jM93aAeqEK7gcpHKXnuvMAbxCzgM0kpZmaLaStQQ0cb1OaZdOEYOjKZp4K7YK1rBuo+55fkXxgmzYPksZ9xHfm/LvIe1pXUXAw5rTzQCOu1D5MhR5ebDIRRMQtZIF5gBugSm5HwwnQvu1Iaoxo6jUOX4H0U1CB6PHGhxyNokL/haI1S+pGu0VKlpPWzgXPG0WymbESfvzkSw6GNl+U6cABzQDM3yhV3iFNmVcyJoDjbI7K0nVj0sDBNFprJsDYlCoaAIdeFfjYBrT78XTPOaIMtBcO91zG9UehQS2ofzEHqMEpWxv6hQZd9Q4EMWukxhHFJ4RnQO5jMJzTPXpi7eQxDIqG0VuWi16pcWQCGLc8T11R+wn2iZFJFRksjkuc70liETPH1nB4bJbNny8KyuKaNVSk8T2IR8PUE0j7DXqAbDyrcYgFD3BzZgfvsjGxcLAAAAAElFTkSuQmCC"); 45 background-position: top, bottom; 46 background-repeat: no-repeat; 47 background-size: 100% auto; 48 background-color: rgba(250, 250, 250, 0.9); 49 } 50 51 .popup-buttons { 52 border-bottom-right-radius:12px; 53 border-bottom-left-radius:12px; 54 background-color: rgba(250, 250, 250, 0.9); 55 display: -webkit-box; 56 -webkit-box-orient: horizontal; 57 padding-left: 20px; 58 padding-right: 20px; 59 } 60 61 .popup-button { 62 color: inherit; 63 font: inherit; 64 text-shadow: rgba(255, 255, 255, 0.5) 0 -2px; 65 margin: 20px 10px 20px 10px; 66 height: 92px; 67 width: 50%; 68 display: block; 69 -webkit-box-flex: 1; 70 } 71 72@media only screen and (width: 720px) and (height: 720px) { 73 .popup-button { 74 margin: 10px 10px 10px 10px; 75 height: 77px; 76 } 77} 78