/**
 * General CSS declarations for Sinister
 * 
 */

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust:100%;
    -webkit-font-smoothing:antialiased;
    text-rendering: optimizeLegibility;
}

html, body {
    height:100%;
}

body {
    margin:0px;
    padding:0px;
}

iframe {
    -webkit-overflow-scrolling: touch;
}

.Button {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
	display:inline-block;
	cursor:pointer;
	text-align:center;
}

.List {
	margin:0px;
	padding:0px;
	list-style-type:none;
}

.View {
    position:absolute;
    width:100%;
    min-height:320px;
    -webkit-transform:translate3d(0px,0px,0px);
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}


/**
 * View Transitions
 * 
 */

.View.flip {
    -webkit-transition:-webkit-transform 540ms ease-in-out 60ms;
    -webkit-transform:rotate3d(0,1,0,90deg);
}

.View.flipOut {
    -webkit-transform:rotate3d(0,1,0,0deg);
}

.View.zoom {
    -webkit-transition:-webkit-transform 500ms ease-out;
    -webkit-transform:scale(0.5,0.5);
}

.View.zoomOut {
	-webkit-transform:scale(1.0,1.0);
}

.View.fade {
    -webkit-transition:opacity 320ms linear 80ms;
    opacity:0.0;
}

.View.fadeOut {
    opacity:1.0;
}


/**
 *  Loading Screen
 *
 */

#splash {
    background-position:left top;
    background-repeat:no-repeat;
    width:100%;
    height:100%;
     
}

#loading {
    width:240px;
    height:80px;
    position:absolute;
    left:0px;
    top:0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
}

#loading h2 {
    text-align:center;
    margin:10px 0px;
    white-space:nowrap;
}

#loading #indicator {
    overflow: hidden;
    border:2px solid #333333;
    border-radius:10px;
}

#loading #progress {
    -webkit-transition: width 150ms linear;
    width:0px;
    height:20px;
    background-color:#94EC34;
    border-radius:8px;
}


/************************
 *                        *
 *    GENERAL COMPONENTS    *
 *                        *
 ***********************/

.homescreen-white {
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAYAAACXtf2DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAlVJREFUeNpi+P//PwMlOCG7/j8+eQZKLQDh0Jg8nJYwgm3BAf79+slABPh/5spDhhmz5jCoqWszlGVHMMIkmNjYqWMBiHjw/CNDd99EBlEJWYaG4kRGFAv8I9L/P3v2jIGVlRWMv3//zsDIyMigra3NMKe/nhHZtLSy9v8vnz9m+Pn9GwMLEzPDllVzUWxr6pvF8OLNR4ZpbaWMYAuWr9/0P8zLDavTrj58yqAtL81Y0jnn/5PHDxnEhIQYLEwMGQz0dBm0FIRxemnGiu0Mh46eYlgxs40R7ANgUGCE082nnxkOHr3AcOn8MQYRIWEGb6AjTLXlGIgFR0+dZ9i0ZTsDigUL1+9kiA90Z5y7dtf/vz9/MNx5+JxBRpyTIS8pjoEccPbmUwYmZIHff1nANCsbF8OLl88ZBAXJN/zy408MprpKjOC0CnTtfyhmgOGq5q7/D16//48kRzQ+cPYe2CyQ2Sy4XCAoKMggy8cJ5z9785Ph1r0HDG8+fWH4+uM3Q7yPBSNyMoWBHWfuMniYKCNSHi4fHDl7DSz2+NXf/2u2HEeRQ8Nwl6/YegxFHTwnI6UiuM3PP/77/+7dOwZtRRFGQhnt3rMPDAdPnmNIDHRCUQvKB0y4dL18+Zphz859hFPKlTsMew4cYjh/6TpDSF77f7ChUIwRRE29k/EFBV6ck18BNgNrYYctiMgA/6HBgmIGSiryTkz7f+/OcwYuTn4GJmDgcXAyM3wHphh84M+v/wyKYrwM65fPwiqPs6ggF6D7gImB1gAWGfltU/5To3ZDxwABBgAc+ZGDdWGHKQAAAABJRU5ErkJggg==) center center no-repeat;
    width:24px;
    font-size:20px;
    line-height:20px;
    height:20px;
}

.homescreen-black {
    width:18px;
    font-size:18px;
    line-height:18px;
    height:18px;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAOCAYAAAAi2ky3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAbpJREFUeNqUUkvLQVEUXVc371cmTBgZmsuIkpSSZGKgTEyMpZRkokzMGPgJkvgHSv6BuYEy8Iooeduffb6uPvkmd9XpdvfeZ+199logIqg53W6X/ourIhkOhxQOh6nVan2RSYJNBZhIo9HA7/ejVqtJSlxKpVK03W4xn88hSRL0ej2KxSIymYwo6vf7NB6PMZvNwHUGgwGXywVM5vV60W63RZ0Ui8WIE+l0GsvlEuVy+d0lm83SdDqF2WyGVqvFfr8XzYxGI+73O87nsyB91UHmBCOXy70JRqMRFQoFWCwWWK1WrNdrQWAymcRXITgcDnA6nfD5fJA5wCP/RaVSEaNvNhsxhcvlEk9+PB7Q6XS4Xq9YrVaIRqN4Lf53gGQyScFg8K1Cs9kkj8dDkUiE6vX6lzp2u53cbjf1er2PnMyduZuCwWCAUqmEfD4v/aeaw+HAa2/fuXg8TqFQiNQas9PpfNzR8Jt5eWpQrVap0Wh8xDS8QN68GhyPR9hsto+YvFgssNvtkEgkiL1xu92EtCy7MqmiFoP9NJlMvprLgUBA+IElZSiLfz6f4vD/6XR6x9hLTMIm/YsfAQYArtdzTKHdK08AAAAASUVORK5CYII=) center center no-repeat;
}

.Dialog {
    overflow:hidden;
    width:400px;
    background-color:#FFFFFF;
    position:absolute;
    left:50%;
    top:50%;
    margin:-80px 0px 0px -200px;
    z-index:100;
}

.Dialog_header h2 {
    display:inline-block;
    margin:0px;
}

.Dialog_header .closeBubble {
    float:right;
    /* Disabled becouse of big buttons VM margin:-10px -20px 0px 0px;*/
}

/* added because of Dialog's btnClose class change to closeBubble */
.closeBubble {
    margin: -6px -6px 0px 0px;
    z-index: 6;
}

.Dialog_wrapper {
    position:relative;
    height:100%;
    margin-right: 5px;
    margin-top: 5px;
}

.Dialog_actions {
    text-align:center;
    position:absolute;
    width:100%;
    bottom:20px;
}

#shroud {
    position:absolute;
    left:0px;
    top:0px;
    z-index:10;
    width:100%;
    height:100%;
    background-color:rgba(32,32,32,0.5);
}


/**
 *  Keyboard
 * 
 */
#keyboard {
    background:url(images/bg_keyboard.png) left top repeat-x #43444B;
    overflow:hidden;
    position:absolute;
    width:100%;
    z-index:20;
    -webkit-transition:-webkit-transform 400ms;
    -webkit-transform:translate3d(0px,225px,0px);
}

#keyboard.expanded {
    -webkit-transform:translate3d(0px,0px,0px);
}

#keyboard .keyrow {
    overflow:hidden;
    margin:10px 0px 10px 5px;
}

#keyboard .keyrow.row_2 {
    position:relative;
    left:30px;
}
#keyboard .keyrow.row_3 {
    position:relative;
    left:61px;
}

#keyboard .keyrow .key {
    float:left;
    width:61px;
    height:61px;
    text-align:center;
    margin-right:1px;
    color:#000000;
    font-size:22px;
    line-height:61px;
    background:url(images/bg_key.png) 0px 0px no-repeat;
    cursor:pointer;
}

#keyboard .keyrow .key.prev {
    background-image:url(images/bg_prev.png);
}

#keyboard .keyrow .key.next {
    background-image:url(images/bg_next.png);
}


#keyboard .keyrow .key.close {
    background-image:url(images/bg_key_close.png);
}

#keyboard .keyrow .key.del {
    background-image:url(images/bg_key_del.png);
}

#keyboard .keyrow .key.pressed {
    background-position:0px -61px;
}