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; -webkit-box-shadow: 4px 4px 4px 0px #999; -moz-box-shadow: 4px 4px 4px 0px #999; -ms-box-shadow: 4px 4px 4px 0px #999; 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, .carddivider { 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; -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0px 0px 2px 2px #cecece; -moz-box-shadow: 0px 0px 2px 2px #cecece; -ms-box-shadow: 0px 0px 2px 2px #cecece; 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%; } .cardtext { padding: 20px; } .cardbuttons { float: right; padding: 20px; } .cardbutton { min-width: 64px; margin-left: 8px; padding: 5px; } .cardbutton:hover { background: #e0e0e0; } #outputcard { display: none; } /*# sourceMappingURL=main.css.map */