.logo, .navigasi, .konten, .sidebar, .footer {
margin-bottom:15px;
padding:15px;
}

.logo {
background: #99D9EA;
text-align: center;
color: #fff;
}

.navigasi{
background: #99D9EA;
text-align: center;
}

.konten{
background: #EFE4B0;
}

.sidebar{
background: #FD7E00;
}

.footer{
background: #C3C3C3;
text-align: center;
}

.navigasi ul{
padding: 0;
list-style: none;
display: inline-block;
margin: 0;
}

.navigasi li{
float: left;
margin: 0 10px;
}


form .form-radio{display:none;}
form .form-radio + label{padding-left:35px;}
form .form-radio + label::before{
    content:""; 
    position:absolute; 
    left:0px; 
    display:inline-block; 
    width:25px; 
    height:25px; 
    background:#fff; 
    margin-right:5px; 
    border:1px solid #ddd; 
    border-radius:50%; -moz-border-radius:50%; 
    box-shadow:2px 2px 2px #bbb; -moz-box-shadow:2px 2px 2px #bbb;
    transition:0.3s; -moz-transition:0.3s; -webkit-transition:0.3s; -khtml-transition:0.3s;}
	
form .form-radio:checked + label::before{
    background:#34A8BF; 
    border:5px solid #fff; 
    width:17px; 
    height:17px;}


html,
body {
  height: 100%;
}

body {
  background: radial-gradient(farthest-side at 50% 0%, #050E36, #000033);
  background: -webkit-radial-gradient(farthest-side at 50% 0%, #050E36, #000033);
  background: -moz-radial-gradient(farthest-side at 50% 0%, #050E36, #000033);
  font-family: 'Helvetica Rounded', 'Arial Rounded MT Bold', 'Montserrat', sans-serif;
  color: #fff;
}

.container {
  display: block;
  width: 100%;
  height: 100%;
}

.chk-none {
  display: none; /*remove checkbox*/
}

.toggle {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 100px;
  height: 50px;
  border-radius: 50px;
  border: 4px solid white;
  overflow: hidden;
  left: 50%; /* left, top, tranform for centering container*/
  top: 50%;
  transform: translate3D(-50%, -50%, 0);
  -webkit-transform: translate3D(-50%, -50%, 0);
  -moz-transform: translate3D(-50%, -50%, 0);
}

.toggle::before,
.toggle::after {
  position: absolute;
  width: 100px;
  height: 50px;
  border-radius: 50px;
  padding: 16px 10px;
  font-weight: bold;
  box-sizing: border-box;
  transition: left .5s ease-in-out;
  -webkit-transition: left .5s ease-in-out;
  -moz-transition: left .5s ease-in-out;
}

.toggle::before {
  content: "ON";
  color: lightsteelblue;
  background-color: royalblue;
  text-align: left;
  box-shadow: inset 0 0 5px 1px rgba(0, 0, 128, 0.3);
  left: -50px;
}

.toggle::after {
  content: "OFF";
  background-color: lightgrey;
  text-align: right;
  color: grey;
  box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.3);
  left: 0px;
}

.handle {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: dimgrey;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
  z-index: 5;
  left: 0px;
  transition: left .5s ease-in-out, background-color .5s ease-in-out;
  -webkit-transition: left .5s ease-in-out, background-color .5s ease-in-out;
  -moz-transition: left .5s ease-in-out, background-color .5s ease-in-out;
}

input[type="checkbox"]:checked + .toggle::before {
  left: 0px;
}

input[type="checkbox"]:checked + .toggle::after {
  left: 50px;
}

input[type="checkbox"]:checked + .toggle .handle {
  left: 50px;
  background-color: cornflowerblue;
}

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%3C%2Fspan%3E%0A%0A%3Cspan%20style%3D%22font-family%3A%20'verdana'%20%2C%20sans-serif%3B%22%3E%0Abody%7Bmargin%3A0%3Bbackground%3A%23000%7D%0Avideo%7Bposition%3Afixed%3Btop%3A50%25%3B%0Aleft%3A50%25%3Bmin-width%3A100%25%3B%0Amin-height%3A100%25%3B%0Awidth%3Aauto%3B%0Aheight%3Aauto%3B%0Az-index%3A-100%3B%0A-webkit-transform%3AtranslateX(-50%25)%20translateY(-50%25)%3B%0Atransform%3AtranslateX(-50%25)%20translateY(-50%25)%3B%0Abackground%3Aurl(%3Cb%3Ealamat%20gambar%20background%20alternatif%3C%2Fb%3E)%0A%20no-repeat%3Bbackground-size%3Acover%3B%0A-webkit-transition%3A1s%20opacity%3Btransition%3A1s%20opacity%7D%0A%7D%3C%2Fspan%3E%0A%0A%3Cspan%20style%3D%22font-family%3A%20'verdana'%20%2C%20sans-serif%3B%22%3E%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />