#mynetwork { width: 94%; height: 100%; border: 1px solid #000; float: left; } #rectangle { text-align: center; font-weight: bold; } #loadingBar { position:absolute; top:1px; left:1px; width: 94%; height: 93%; background-color:rgba(200,200,200,0.8); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; opacity:1; } #wrapper { position:relative; width:900px; height:900px; } #text { position:absolute; top:8px; left:530px; width:30px; height:50px; margin:auto auto auto auto; font-size:22px; color: #000000; } div.outerBorder { position:relative; top:400px; width:600px; height:44px; margin:auto auto auto auto; border:8px solid rgba(0,0,0,0.1); background: rgb(252,252,252); /* Old browsers */ background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ border-radius:72px; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); } #border { position:absolute; top:10px; left:10px; width:500px; height:23px; margin:auto auto auto auto; box-shadow: 0px 0px 4px rgba(0,0,0,0.2); border-radius:10px; } #bar { position:absolute; top:0px; left:0px; width:20px; height:20px; margin:auto auto auto auto; border-radius:11px; border:2px solid rgba(30,30,30,0.05); background: rgb(0, 173, 246); /* Old browsers */ box-shadow: 2px 0px 4px rgba(0,0,0,0.4); } html { height: 100%; } body { height: 90%; } /* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } aside { float: right; width: 5%; } table { border-collapse: collapse; } td.switch_td { padding-bottom: 6px; } .switch_button { border-bottom: 2px solid black; }