body{ font-family: 'Roboto', sans-serif; background: #f4f4f4; margin: 0px; } .actionbar{ width: 100%; height: 60px; position: fixed; background: #03A9F4; top: 0px; left: 0px; padding-left: 340px; color: #fff; font-size: 25px; line-height: 60px; box-shadow: 4px 4px 4px 0px #999; } .drawer{ width: 320px; top: 0px; left: 0px; position: absolute; height: 100%; background: #FFF; border-right-width: 1px; border-right-color: #cecece; border-right-style: solid; } .drawerimg{ width: 100%; } .draweritem{ height: 72px; line-height: 72px; font-size: 18px; padding-left: 16px; } .draweritem:hover{ background: #e0e0e0; } .drawerdivider{ border-top-color: #cecece; border-top-width: 1px; border-top-style: solid; } .main{ width: calc(100% - 320px); height: 100%; margin-left: 320px; margin-top: 60px; } .card{ width: calc(50% - 36px); background: #fff; border-radius: 1px; box-shadow: 0px 0px 2px 2px #cecece; display: inline-block; margin: 16px; float: left; } .input{ width: 100%; resize: none; border: 0px; height: 100px; font-family: 'Roboto', sans-serif; font-size: 16px; padding: 20px; } .carddivider{ width: 100%; border-top-color: #cecece; border-top-width: 1px; border-top-style: solid; } .cardtext{ margin: 20px; } .cardbuttons{ float: right; padding: 20px; } .cardbutton{ min-width: 64px; margin-left: 8px; color: #000000; padding: 5px; } .cardbutton:hover{ background: #e0e0e0; }