@font-face { font-family: Roboto-Light; src: url(../fonts/Roboto-Light.ttf); } /** * Start by hiding the checkboxes */ .admin-main input[type=checkbox] { visibility: hidden; } /** * Checkbox Three */ .checkboxThree { width: 68px; height: 26px; background: #333; margin: 20px 60px; border-radius: 50px; position: relative; } /** * Create the text for the On position */ .checkboxThree:before { content: 'On'; position: absolute; top: 4px; left: 8px; height: 2px; color: #26ca28; font-size: 14px; } /** * Create the text for the On position */ .checkboxThree:after { content: 'off'; position: absolute; top: 4px; right: 13px; height: 2px; color: #999; font-size: 14px; } /** * Create the pill to click */ .checkboxThree label { display: block; width: 28px; height: 14px; border-radius: 50px; transition: all .5s ease; cursor: pointer; position: absolute; top: 5.5px; z-index: 1; left: 4px; background: #ddd; } /** * Create the checkbox event for the label */ .checkboxThree input[type=checkbox]:checked + label { left: 34px; background: #26ca28; } .contact { width: 100%; float: left; font-family: Roboto-Light; color: #666; margin:20px 0 0 0; padding-bottom:20px; } .admin-main { width: 100%; float: left; margin-top: 20px; font-family: Roboto-Light; color: #666; background:#fff; } .admin-main h4 { margin-top: 20px; } #text_field { border: 1px solid #ccc; width: 300px; padding:7px; border-radius: 4px; } #search-submit-me { padding: 6px 22px 6px 22px; color: #fff; border: 0; background: #56A1D1; margin: 10px; border-radius: 3px; transition: all 0.1s ease-out; } #search-submit-me:hover { background: #e94e38; cursor: pointer; } #search-me-header { background:#56A1D1; color:#fff; float:left; width:100%; margin-bottom: 12px; } #search-me-header p{ padding-left:5px; }