1#iphelperinput { 2 text-align: center; 3 max-width: 95%; 4 width: 400px; 5 color: #000000; 6 background-color: #ffffff; 7} 8 9.iphelper { 10 cursor: pointer; 11} 12 13/* The iphelper (background) */ 14.myiphelper { 15 display: none; /* Hidden by default */ 16 position: fixed; /* Stay in place */ 17 z-index: 1; /* Sit on top */ 18 left: 0; 19 top: 0; 20 width: 100%; /* Full width */ 21 height: 100%; /* Full height */ 22 overflow: auto; /* Enable scroll if needed */ 23 background-color: rgb(0,0,0); /* Fallback color */ 24 background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 25 -webkit-animation-name: fadeIn; /* Fade in the background */ 26 -webkit-animation-duration: 0.4s; 27 animation-name: fadeIn; 28 animation-duration: 0.4s 29} 30 31/* iphelper Content */ 32.iphelper-content { 33 position: fixed; 34 bottom: 0; 35 background-color: #fefefe; 36 width: 100%; 37 -webkit-animation-name: slideIn; 38 -webkit-animation-duration: 0.4s; 39 animation-name: slideIn; 40 animation-duration: 0.4s 41} 42 43/* The Close Button */ 44.iphelperclose { 45 color: white; 46 float: right; 47 font-size: 28px; 48 font-weight: bold; 49 cursor: pointer; 50 51} 52 53.iphelperclose:hover, 54.iphelperclose:focus { 55 color: #000; 56 text-decoration: none; 57 cursor: pointer; 58} 59 60.iphelper-header { 61 padding: 2px 16px; 62 background-color: #5cb85c; 63 color: white; 64} 65 66.iphelper-body {padding: 2px 16px;} 67 68.iphelper-footer { 69 padding: 2px 16px; 70 background-color: #5cb85c; 71 color: white; 72} 73 74/* Add Animation */ 75@-webkit-keyframes slideIn { 76 from {bottom: -300px; opacity: 0} 77 to {bottom: 0; opacity: 1} 78} 79 80@keyframes slideIn { 81 from {bottom: -300px; opacity: 0} 82 to {bottom: 0; opacity: 1} 83} 84 85@-webkit-keyframes fadeIn { 86 from {opacity: 0} 87 to {opacity: 1} 88} 89 90@keyframes fadeIn { 91 from {opacity: 0} 92 to {opacity: 1} 93}