.webdesigntuts-workshop { height: 100%; width: 100%; } .webdesigntuts-workshop:before, .webdesigntuts-workshop:after { content: ''; display: block; height: 0px; left: 50%; margin: 0 0 0 -400px; width: 800px; } .webdesigntuts-workshop:before { top: 192px; } .webdesigntuts-workshop:after { top: 191px; } .webdesigntuts-workshop span { border-radius: 5px; display: inline-block; font-size: 0px; margin: 10% auto 0; z-index: 1; } .webdesigntuts-workshop input { border-radius: 5px 0 0 5px; color: #888; display: block; float: left; font-family: 'Cabin', helvetica, arial, sans-serif; font-size: 13px; font-weight: 400; height: 40px; margin: 0; padding: 0 10px; width: 200px; } .ie .webdesigntuts-workshop input { line-height: 40px; } .webdesigntuts-workshop input::-webkit-input-placeholder { color: white; } .webdesigntuts-workshop input:-moz-placeholder { color: white; } .webdesigntuts-workshop input:focus { -webkit-animation: glow 800ms ease-out infinite alternate; -moz-animation: glow 800ms ease-out infinite alternate; -o-animation: glow 800ms ease-out infinite alternate; -ms-animation: glow 800ms ease-out infinite alternate; animation: glow 800ms ease-out infinite alternate; color: #efe; outline: none; } .webdesigntuts-workshop input:focus::-webkit-input-placeholder { color: #efe; } .webdesigntuts-workshop input:focus:-moz-placeholder { color: #efe; } .webdesigntuts-workshop button { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; border-radius: 0 5px 5px 0; color: #fff; display: block; float: left; font-family: 'Cabin', helvetica, arial, sans-serif; font-size: 13px; font-weight: 400; height: 38px; line-height: 38px; margin-top: 1px; padding: 0; position: relative; width: 80px; } .webdesigntuts-workshop button:hover, .webdesigntuts-workshop button:focus { color: black; outline: none; } .webdesigntuts-workshop button:active { top: 1px; } @-webkit-keyframes glow { 0% { box-shadow: 0 0 5px rgba(32, 163, 245,.2), inset 0 0 5px rgba(0,255,0,.1), 0 1px 0 #20A3F5; } 100% { box-shadow: 0 0 20px rgba(32, 163, 245,.6), inset 0 0 10px rgba(0,255,0,.4), 0 1px 0 #20A3F5; } } @-moz-keyframes glow { 0% { box-shadow: 0 0 5px rgba(32, 163, 245,.2), inset 0 0 5px rgba(0,255,0,.1), 0 1px 0 #20A3F5; } 100% { box-shadow: 0 0 20px rgba(32, 163, 245,.6), inset 0 0 10px rgba(0,255,0,.4), 0 1px 0 #20A3F5; } } @-o-keyframes glow { 0% { box-shadow: 0 0 5px rgba(32, 163, 245,.2), inset 0 0 5px rgba(0,255,0,.1), 0 1px 0 #20A3F5; } 100% { box-shadow: 0 0 20px rgba(32, 163, 245,.6), inset 0 0 10px rgba(0,255,0,.4), 0 1px 0 #20A3F5; } } @-ms-keyframes glow { 0% { box-shadow: 0 0 5px rgba(32, 163, 245,.2), inset 0 0 5px rgba(0,255,0,.1), 0 1px 0 #20A3F5; } 100% { box-shadow: 0 0 20px rgba(32, 163, 245,.6), inset 0 0 10px rgba(0,255,0,.4), 0 1px 0 #20A3F5; } } @keyframes glow { 0% { box-shadow: 0 0 5px rgba(32, 163, 245,.2), inset 0 0 5px rgba(0,255,0,.1), 0 1px 0 #20A3F5; } 100% { box-shadow: 0 0 20px rgba(32, 163, 245,.6), inset 0 0 10px rgba(0,255,0,.4), 0 1px 0 #20A3F5; } }