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