body { background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAK0lEQVQYV2NkIBIwEqmOgXSF5x+/+I/NdENZCbBhcBMHUCEh35Pua0ImAgBUjBALQ39LPQAAAABJRU5ErkJggg==) repeat; height:100%; margin: 0; padding: 0; height: 600px; text-align: left; margin:50px 50px; padding: 0; font-size: 16px; font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif; } h2 { color: white; font-size:16px; font-weight: bold; font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif; margin-top: 10px; margin-bottom: 15px; letter-spacing: 1px; } #container { margin-left: 15%; padding: 0; width: 1090; text-align: center; } #left { min-width: 262px; height: 110px; /* background-color: #313c4c; */ background-color: rgba(49,60,76,.85); padding: 10px 15px 25px 15px; margin: 0px 13px 13px 0; display: inline; float: left; position: relative; text-align: center; } #bot { min-width: 267px; background: #768393; padding: 10px 15px 0 10px; margin-left: 13px; display: inline; float: left; position: relative; text-align: left; height: 35px; font-size: 22px; } #calc { min-width: 282px; background-color: rgba(49,60,76,.85); padding: 10px 0 0 10px; margin: 0px; display: inline; float: left; position: relative; text-align: left; height: 35px; font-size: 18px; } span { color: #e0e0e0; font: bold 20px/40px; font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif; letter-spacing: 1px; padding: 2px; } #wrapper { clear: both; min-width: 680px; width: 40%; margin: auto; text-align: center; } input[type="radio"] { display: none; } input[type="radio"] + label { background-color: #768393 !important; border-radius: 10px; -moz-border-radius:10px; -webkit-border-radius:10px; /*padding-top: 5px;*/ height: 31px; width: 31px; display: inline-block; padding: 0 0 0 0px; } input[type="radio"]:checked + label { background-color: #fff !important; border-radius: 30px; -moz-border-radius:30px; -webkit-border-radius:30px; height: 31px; width: 31px; display: inline-block; padding: 0 0 0 0px; } #range { text-align:center; color: #282828; width:240px; border:0; font-size: 18px; height:30px; letter-spacing: 1px; font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif; } #range2 { text-align:center; height:30px; color: #282828; width:50px; border:0; font-size: 18px; letter-spacing: 1px; font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif; } #range3 { text-align:center; height:30px; color: #282828; width:150px; border:0; font-size: 18px; letter-spacing: 1px; font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif; } #range4 { letter-spacing: 3px; height:30px; } #interest { height:30px; color: #282828; text-align:center; width:70px; border:0; font-size: 18px; letter-spacing: 1px; font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif; } /*slider*/ .slider { width: 150px; margin: 100px auto; } input[type="range"] { -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); width: 100%; height: 10px; margin: 15px 0 0 0; border: none; padding: 0px; border-radius: 0px; background: #768393; box-shadow: inset 0 0 0 0 #0d0e0f, inset 0 0 0 0 #3a3d42; -webkit-box-shadow: inset 0 0 0 0 #0d0e0f, inset 0 0 0 0 #3a3d42; outline: none; /* no focus outline */ } input[type="range"]::-moz-range-track { border: inherit; background: transparent; } input[type="range"]::-ms-track { border: inherit; color: transparent; /* don't drawn vertical reference line */ background: transparent; } input[type="range"]::-ms-fill-lower, input[type="range"]::-ms-fill-upper { background: transparent; } input[type="range"]::-ms-tooltip { display: none; } /* thumb */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border: none; border-radius: 12px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b6c7ca), color-stop(100%, #245e8f)); /* android <= 2.2 */ background-image: -webkit-linear-gradient(top , #ffffff 100%, #ffffff 100%); /* older mobile safari and android > 2.2 */; background-image: linear-gradient(to bottom, #ffffff 100%, #ffffff 100%); /* W3C */ } input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 12px; background-image: linear-gradient(to bottom, #ffffff 100%, #ffffff 100%); /* W3C */ } input[type="range"]::-ms-thumb { width: 18px; height: 18px; border-radius: 12px; border: 0; background-image: linear-gradient(to bottom, #ffffff 100%, #ffffff 100%); /* W3C */ } input[type='number'] { -moz-appearance:textfield; /*for firefox*/ } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ }