.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; -webkit-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; } @-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: 0px; padding: 0px; } .mblIconItem { list-style-type: none; float: left; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .mblIconItemTerminator { list-style-type: none; clear: both; height: 0px; } .mblIconItemSub { list-style-type: none; background-color: white; color: black; } .mblIconArea { margin-bottom: 5px; height: 78px; width: 88px; text-align: center; font-family: Helvetica; font-size: 12px; } .mblIconArea div { position: relative; height: 65px; line-height: 65px; text-align: center; } .mblIconArea img { vertical-align: middle; } .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: 20; -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; } .mblIconContentHeading { position: relative; clear: both; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 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: 16px; color: white; line-height: 26px; text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0px; }