.mblDomButtonBlueMinus, .mblDomButtonBluePlus, .mblDomButtonDarkBlueMinus, .mblDomButtonDarkBluePlus, .mblDomButtonRedMinus, .mblDomButtonRedPlus { position: relative; width: 29px; height: 29px; } .mblDomButtonBlueMinus > div, .mblDomButtonBluePlus > div, .mblDomButtonDarkBlueMinus > div, .mblDomButtonDarkBluePlus > div, .mblDomButtonRedMinus > div, .mblDomButtonRedPlus > div { position: relative; top: 4px; left: 3px; width: 22px; height: 18px; border-width: 1px 1px 1px 0px; border-style: outset; color: white; border-radius: 3px; } .mblDomButtonBlueMinus > div, .mblDomButtonBluePlus > div { border-color: #6d89c7; background-color: #366edf; background: -webkit-gradient(linear, left top, left bottom, from(#7a9de9), to(#2362dd), color-stop(0.5, #366edf), color-stop(0.5, #215fdc)); } .mblDomButtonDarkBlueMinus > div, .mblDomButtonDarkBluePlus > div { border-color: #6d89c7; background-color: #5877a2; background: -webkit-gradient(linear, left top, left bottom, from(#8ea4c1), to(#4a6c9b), color-stop(0.5, #5877a2), color-stop(0.5, #476999)); } .mblDomButtonRedMinus > div, .mblDomButtonRedPlus > div { border-color: #cc1122; background-color: #c9404b; background: -webkit-gradient(linear, left top, left bottom, from(#d3656d), to(#bc1320), color-stop(0.5, #c9404b), color-stop(0.5, #bc1421)); } .mblDomButtonBlueMinus > div > div, .mblDomButtonBluePlus > div > div, .mblDomButtonDarkBlueMinus > div > div, .mblDomButtonDarkBluePlus > div > div, .mblDomButtonRedMinus > div > div, .mblDomButtonRedPlus > div > div { position: absolute; top: 7px; left: 7px; width: 8px; height: 2px; margin: 0px; font-size: 1px; border-style: none; background: white; border-top: 1px solid #4a5a71; } .mblDomButtonBluePlus > div > div > div, .mblDomButtonDarkBluePlus > div > div > div, .mblDomButtonRedPlus > div > div > div { position: absolute; top: -3px; left: 3px; width: 2px; height: 8px; margin: 0px; font-size: 1px; background-color: white; } .mblDomButtonBlackCircleCross { position: relative; width: 29px; height: 29px; } .mblDomButtonBlackCircleCross > div { position: relative; top: 3px; left: 3px; width: 23px; height: 23px; background-color: white; border-radius: 12px; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); } .mblDomButtonBlackCircleCross > div > div { position: relative; top: 2px; left: 2px; width: 19px; height: 19px; background-color: black; border-radius: 10px; } .mblDomButtonBlackCircleCross > div > div > div { position: absolute; top: 8px; left: 3px; width: 13px; height: 3px; margin: 0px; font-size: 1px; border-style: none; background-color: white; -webkit-transform: rotate(45deg); border-radius: 1px; } .mblDomButtonBlackCircleCross > div > div > div > div { position: absolute; top: -5px; left: 5px; width: 3px; height: 13px; margin: 0px; font-size: 1px; background-color: white; border-radius: 1px; } @-webkit-keyframes mblVibrate{ 0%{ -webkit-transform: rotate(-2deg); bottom: -1px; left: -1px; } 25% { -webkit-transform: rotate(1deg); bottom: 2px; left: 1px; } 50% { -webkit-transform: rotate(-1deg); bottom: -2px; left: -1px; } 75% { -webkit-transform: rotate(2deg); bottom: 2px; left: 1px; } 100% { -webkit-transform: rotate(-2deg); bottom: -1px; left: -1px; } } @-webkit-keyframes mblShrink{ from { -webkit-transform: scale(1); } to { -webkit-transform: scale(0.01); } } @-webkit-keyframes mblShrink0{ from { -webkit-transform: scale(1); } to { -webkit-transform: translate(-40%,-70%) scale(0.01); } } @-webkit-keyframes mblShrink1{ from { -webkit-transform: scale(1); } to { -webkit-transform: translate(-14%,-70%) scale(0.01); } } @-webkit-keyframes mblShrink2{ from { -webkit-transform: scale(1); } to { -webkit-transform: translate(14%,-70%) scale(0.01); } } @-webkit-keyframes mblShrink3{ from { -webkit-transform: scale(1); } to { -webkit-transform: translate(40%,-70%) scale(0.01); } } .mblIconContainer { margin: 20px 10px; padding: 0; } .mblIconItem { position: relative; overflow: hidden; list-style-type: none; float: left; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .mblIconItemTerminator { list-style-type: none; clear: both; } .mblIconItemPane { list-style-type: none; background-color: white; color: black; } .mblIconArea { position: relative; height: 78px; font-family: Helvetica; font-size: 12px; text-align: center; margin-top: 5px; margin-bottom: 5px; width: 74px; color: black; } .mblIconArea img { vertical-align: middle; } .mblIconAreaInner { position: relative; height: 65px; line-height: 65px; text-align: center; } .mblIconItemDeleteIcon { position: absolute; top: -4px; left: -2px; } .mblIconItemSpriteIcon { position: absolute; } .mblContent { clear: both; padding-bottom: 20px; } table.mblClose { clear: both; cursor: pointer; } .mblVibrate { position: relative; -webkit-animation-duration: .5s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-name: mblVibrate; -webkit-transform: rotate(0deg); } .mblCloseContent { -webkit-animation-duration: .3s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-name: mblShrink; -webkit-transform: scale(0.01); } .mblCloseContent.mblShrink0 { -webkit-animation-name: mblShrink0; } .mblCloseContent.mblShrink1 { -webkit-animation-name: mblShrink1; } .mblCloseContent.mblShrink2 { -webkit-animation-name: mblShrink2; } .mblCloseContent.mblShrink3 { -webkit-animation-name: mblShrink3; } .mblIconItemPaneHeading { position: relative; clear: both; overflow: hidden; margin-top: 0px; padding-left: 40px; height: 25px; border-top: 1px solid #f1f3f4; border-bottom: 1px solid #717d85; background-image: -webkit-gradient(linear, left top, left bottom, from(#e0e4e7), to(#b4bec6), color-stop(0.5, #c4ccd2), color-stop(0.5, #bfc8ce)); font-family: Helvetica; font-size: 14px; color: white; line-height: 26px; text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0px; text-overflow: ellipsis; white-space: nowrap; } .mblIconItemPaneIcon { position: absolute; top: -2px; left: 1px; }