@font-face { font-family: Roboto-Light; src: url(../fonts/Roboto-Light.ttf); } /** * Start by hiding the checkboxes */ .p_admin-main input[type=checkbox] { visibility: hidden; } /** * Checkbox */ .p_checkboxThree { width: 68px; height: 26px; background: #ccc; margin: 20px 60px; border-radius: 50px; position: relative; } /** * Create the text for the On position */ .p_checkboxThree:before { content: 'On'; position: absolute; top: 4px; left: 8px; height: 2px; color: #26ca28; font-size: 14px; } /** * Create the text for the On position */ .p_checkboxThree:after { content: 'off'; position: absolute; top: 4px; right: 13px; height: 2px; color: #999; font-size: 14px; } /** * Create the pill to click */ .p_checkboxThree label { display: block; width: 28px; height: 18px; border-radius: 50px; transition: all .5s ease; cursor: pointer; position: absolute; top:4px; z-index: 1; left: 4px; background: #ddd; } /** * Create the checkbox event for the label */ .p_checkboxThree input[type=checkbox]:checked + label { left: 34px; background: #32cb00; } .p_contact { width: 100%; float: left; font-family: Roboto-Light; color: #666; margin:20px 0 0 0; padding-bottom:20px; } .p_admin-main { width: 100%; float: left; margin-top: 20px; font-family: Roboto-Light; color: #666; background:#fff; } .p_admin-main h4 { margin-top: 20px; } #p_text_field { border: 1px solid #ccc; width: 300px; padding:7px; border-radius: 4px; } #p_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; } #p_search-submit-me:hover { background: #e94e38; cursor: pointer; } #p_search-me-header { background:#aed581; color:#fff; float:left; width:100%; margin-bottom: 12px; } #p_search-me-header p{ padding-left:5px; }