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: 320px; color: #fff; font-size: 25px; line-height: 60px; -webkit-box-shadow: 0px 4px 4px 0px #999; -moz-box-shadow: 0px 4px 4px 0px #999; -ms-box-shadow: 0px 4px 4px 0px #999; box-shadow: 0px 4px 4px 0px #999; } .menuicon { height: 30px; position: fixed; top: 0px; left: 0px; padding: 15px; cursor: pointer; } .drawer { width: 300px; top: 0px; left: 0px; position: absolute; height: 100%; background: #fff; border-right-width: 1px; border-right-color: #cecece; border-right-style: solid; z-index: 50; font-weight: 500; } .drawerimg { width: 100%; } .draweritem, .draweritembottom { height: 58px; line-height: 58px; font-size: 18px; padding-left: 16px; cursor: pointer; } .draweritembottom { bottom: 0px; position: absolute; width: calc(100% - 16px); } .drawerdivider, .drawerdividerbottom, .carddivider { border-top-color: #cecece; border-top-width: 1px; border-top-style: solid; } .drawerdividerbottom { bottom: 60px; position: absolute; width: 100%; } .main { width: calc(100% - 300px); height: calc(100%-60px); margin-left: 300px; 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; color: #03a9f4; cursor: pointer; } .overlay { background: #000; opacity: 0; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 30; } #output { -moz-hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; word-wrap: break-word; } #outputcard { display: none; } #writtenmorse { color: #03a9f4; } @media screen and (max-width: 1400px) { .drawer { display: none; border-right-width: 0px; } .actionbar { padding-left: 60px; } .main { width: 100%; margin-left: 0px; } } @media screen and (max-width: 750px) { .card { width: calc(100% - 36px); } } /*# sourceMappingURL=main.css.map */