* { margin:0px; } #logo { background-color: yellow; } #sidenav { position:fixed; left:0px; width:200px; background-color:darkgrey; height:100%; } #body { margin-left:200px; } #body > #production { display:block; } #contents { width:300px; } #contents table { border: 1px solid black; } #contents td img { height:32px; width:32px; } #contentGraph { float:left; } /* Slave stuff */ .slaveBox { float:left; width:100%; /*height:110px;*/ background-color:#EEE; /*border-radius: 10px; margin-left:5px; margin-right:5px;*/ } .slaveBox > p { margin:5px; } .slaveBox > h2 { margin:5px; } .productionGraph { float:right; height:300px; } .button-black { width:100%; height:40px; background-color:black; color:white; transition: all 300ms; } .button-black:hover { background-color:#444; color:yellow; cursor:pointer; } .button-black * { text-align:center; position: relative; top: 50%; transform: translateY(-50%); } .canvasjs-chart-credit { display:none; } /* Styling for settings page */ .settingsText { margin-left: 10px; margin-right:10px; margin-top: -10px; font-size: 18px; } .settingsBox .switch { position:relative; top:10px; } /* Fancy togglle switch for toggly things stolen from https://www.w3schools.com/howto/howto_css_switch.asp */ /* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */ .switch input {display:none;} /* 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); }