.as_heading{ display: inline-block; padding: 15px; } .my_status_main{ position: absolute; width: 300px; height: auto; background-color: #fff; top: 0; right: -300px; z-index: 999; } ..my_status_main .my_status_main_inner{ width: 100%; height: 100%; position: relative; overflow: hidden; } .my_status_main .my_status_main_inner .as_click_hide img, .my_status_main .my_status_main_inner .as_click_show img{ width: 80px } .my_status_main .my_status_main_inner .as_click_hide, .my_status_main .my_status_main_inner .as_click_show{ cursor: pointer; position: absolute; top: 0; left: -80px; display: inline-block; } .my_status_main .my_status_main_inner .as_click_hide{ z-index: 100; display: none; } .my_status_main .my_status_main_inner .as_click_show{ z-index: 999; } .as_url{ margin: 0; padding: 15px 0; overflow: hidden; } .as_url li{ overflow: hidden; float: left; width: 100%; text-align: center; } .as_url li span{ width: 100%; padding: 10px 0; float: left; font-size: 15px; text-align: center; } .as_url li a{ border: none; outline: none; visibility: hidden; } .as_url li a img{ visibility: visible; } .fiverr{ height: 60px; } .github{ height: 40px; } .onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox, .onoffswitch input[type=checkbox] { display: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 20px; } .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; } .onoffswitch-inner:before { content: "Show"; padding-left: 10px; background-color: #5C8994; color: #FFFFFF; } .onoffswitch-inner:after { content: "Hide"; padding-right: 10px; background-color: #DEDEDE; color: #BD9D9D; text-align: right; } .onoffswitch-switch { display: block; width: 18px; margin: 6px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 56px; border: 2px solid #999999; border-radius: 20px; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; } .slider-container { width: 300px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .slider-container .back-bar { height: 10px; position: relative; } .slider-container .back-bar .selected-bar { position: absolute; height: 100%; } .slider-container .back-bar .pointer { position: absolute; width: 10px; height: 10px; background-color: red; cursor: col-resize; opacity: 1; z-index: 2; } .slider-container .back-bar .pointer.last-active { z-index: 3; } .slider-container .back-bar .pointer-label { position: absolute; top: -23px; font-size: 12px; white-space: nowrap; line-height: 1; margin-left: -2px; } .slider-container .back-bar .focused { z-index: 10; } .slider-container .clickable-dummy { cursor: pointer; position: absolute; width: 100%; height: 100%; z-index: 1; } .slider-container .scale { top: 2px; position: relative; } .slider-container .scale span { position: absolute; height: 5px; border-left: 1px solid #999; font-size: 0; } .slider-container .scale ins { font-size: 9px; text-decoration: none; position: absolute; left: 0; top: 5px; color: #999; line-height: 1; } .slider-container.slider-readonly .clickable-dummy, .slider-container.slider-readonly .pointer { cursor: auto; } .theme-green .back-bar { height: 15px; border-radius: 2px; background-color: #eeeeee; background-color: #e7e7e7; background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd)); background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); background-image: -o-linear-gradient(top, #eeeeee, #dddddd); background-image: linear-gradient(to bottom, #eeeeee, #dddddd); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0); } .theme-green .back-bar .selected-bar { border-radius: 2px; background-color: #a1fad0; background-image: -moz-linear-gradient(top, #bdfade, #76fabc); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc)); background-image: -webkit-linear-gradient(top, #bdfade, #76fabc); background-image: -o-linear-gradient(top, #bdfade, #76fabc); background-image: linear-gradient(to bottom, #bdfade, #76fabc); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0); } .theme-green .back-bar .pointer { width: 30px; height: 30px; top: -7.5px; cursor: all-scroll; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 50px; border: 1px solid #AAA; background-color: #e7e7e7; background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd)); background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); background-image: -o-linear-gradient(top, #eeeeee, #dddddd); background-image: linear-gradient(to bottom, #eeeeee, #dddddd); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0); } .theme-green .back-bar .pointer-label { color: #999; } .theme-green .back-bar .focused { color: #333; } .theme-green .scale span { border-left: 1px solid #e5e5e5; } .theme-green .scale ins { color: #999; } .theme-blue .back-bar { height: 5px; border-radius: 2px; background-color: #eeeeee; background-color: #e7e7e7; background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd)); background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); background-image: -o-linear-gradient(top, #eeeeee, #dddddd); background-image: linear-gradient(to bottom, #eeeeee, #dddddd); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0); } .theme-blue .back-bar .selected-bar { border-radius: 2px; background-color: #92c1f9; background-image: -moz-linear-gradient(top, #b1d1f9, #64a8f9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b1d1f9), to(#64a8f9)); background-image: -webkit-linear-gradient(top, #b1d1f9, #64a8f9); background-image: -o-linear-gradient(top, #b1d1f9, #64a8f9); background-image: linear-gradient(to bottom, #b1d1f9, #64a8f9); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb1d1f9', endColorstr='#ff64a8f9', GradientType=0); } .theme-blue .back-bar .pointer { width: 14px; height: 14px; top: -5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 10px; border: 1px solid #AAA; background-color: #e7e7e7; background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd)); background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); background-image: -o-linear-gradient(top, #eeeeee, #dddddd); background-image: linear-gradient(to bottom, #eeeeee, #dddddd); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0); } .theme-blue .back-bar .pointer-label { color: #999; } .theme-blue .back-bar .focused { color: #333; } .theme-blue .scale span { border-left: 1px solid #e5e5e5; } .theme-blue .scale ins { color: #999; }