body {
  padding: 0;
  font-family: Arial;
  margin: 0;
  overflow: hidden;

}
.help{
	float: right; padding-right: 30px; padding-top: 10px;
}
.help a{
	color: #fff; font-weight: bold; border:1px dotted #fff; padding: 5px;
}
.help a:hover{
	background-color: #ffff;
	text-decoration: none;
	color: #1D1F21;
  opacity: 0.4;
}
.aside p{
  font-size: 15px;
  font-weight: normal;
}


@media screen and (min-width: 768px){
.text-box{
  width:350px; height: 100%; margin-top: -60%;
  overflow:scroll;
}
}
@media screen and (min-width: 1024px){
.text-box{
  width:350px; height: 100%; margin-top: -155%;
  overflow:scroll;
}
}
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.menus div:first-child {
    width: 50%;
    text-align: left;
    display: inline-block;

}
.menus div:last-child {
    width: calc(50% - 10px);
    display: inline-block;
    text-align: right;
}

.menus div:last-child a {
    font-size: 12px
}

@media all and (max-width: 600px) {
body {
    overflow-y: scroll;
}
.menus div:last-child {
    width: calc(50% - 10px);
}
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
  /** font-weight: bold; **/
  text-align: center;
  background: #9d9fa0;
}

ul {
  font-size:15px;
}

@media all and (min-width: 600px) {
  .main    {flex: 5 0;padding: 2px 0 2px 0;}
  .aside { flex: 1 auto; }
  .aside-1   {order:2;  margin-bottom: 2px;  flex-grow: 0;  padding: 20px;  min-width: 400px;}
  .main    { order: 1; }
  .footer  { order: 4; }
}

.header {
    width: 100%;
    height: 40px;
    background: #4d4d4d url(dark-fabric.png);
    box-shadow: 0 0 4px 2px rgba(0,0,0,.4);
    color: #fff;
}

#logo {
    height: 32px;
    margin: 4px 10px;
    border: none;
}

.footer {
  padding: 5px 0;
  background: white;
}
.footer h6{
  font-size: 11px;
  font-weight: bold;
}

.main #editor.ace_editor .ace_gutter {
  margin-top: 5px;
}

.main #editor.ace_editor .ace_gutter .ace_layer {
  height: calc( 100vh - 104px) !important;
}

.main #editor.ace_editor .ace_scroller .ace_content {
  height: calc( 100vh - 104px) !important;
}

.main #editor.ace_editor .ace_content {
  margin-top: 5px !important;
  width: 100% !important;
}

.main .menus {
  padding-right: 8px;
  padding-left: 8px;
  text-align: right;
  height: 30px;
  background-color: #ccf3ff;
}
.main #editor.ace_editor {
  padding: 0 !important;
  height: calc( 100vh - 122px);
}

.main .statusbar {
  text-align: left;
  padding: 2px 5px;
  font-size: 12px;
  background: #ccf3ff;
}

div.hlink {
    text-align: right;font-size: 10px;
}

p.bottom-left {
  text-align: left;
  vertical-align: bottom;
}

div.ridge {
  border-style: ridge;
}