html, body { margin: 0px; padding: 0px; }

body { font-family: Roboto, arial, helvetica, sans-serif; font-size: 16px; text-align: center; }

* { box-sizing: border-box; }

.purgatory { clear: both; }

#logo {
   position: fixed;
   left: 0;
   top: 0;
   width: 300px;
   height: 80px;
   background-color: black;
   color: white;
   text-align: center;
   display: table;
   vertical-align: middle;
   border-bottom: solid 1px white;
}

#logo #title {
   display: table-cell;
   vertical-align: middle;
}

#logo #company {
   font-weight: bold;
   font-size: 34px;
   color: orangered;
}

#tabs {
   position: fixed;
   top: 0;
   left: 300px;
   right: 0;
   height: 80px;
   border-bottom: solid 1px black;
   background-color: white;
   color: black;
}

#menus {
   position: fixed;
   left: 0;
   top: 80px;
   bottom: 0;
   width: 300px;
   background-color: #15181F;
   color: white;
   text-align: left;
}

#main_menu {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow-y: auto;
   background-color: #28323C;
}

.main_menu_link, .back_to_main, .sub_menu a {
   display: block;
   padding: 10px;
   background-color: #28323C;
   border-top: solid 1px #3E4448;
   border-bottom: solid 1px #0B1014;
   text-decoration: none;
   color: white;
}

.main_menu_link i, .sub_menu_link i { float: right; }
.main_menu_link:hover, .sub_menu a:hover { color: orangered; }

.back_to_main {
   text-align: center;
}

.back_to_main i {
   float: left;
}

.sub_menu {
   display: none;
}

.sub_menu_title {
   display: block;
   padding: 10px;
   text-align: center;
}

#work {
   position: fixed;
   top: 80px;
   left: 300px;
   right: 0;
   bottom: 0;
}

.frame {
   padding: 20px;
   text-align: left;
}

.frame_title {
   display: block;
   background-color: #28323C;
   color: orangered;
   padding: 10px 20px;
   font-size: 18px;
   margin: -19px -19px 20px -19px;
}

.input_label_above {
   display: block;
   font-size: 12px;
}

.frame input[type=text],
.frame input[type=password] {
   display: block;
   width: 100%;
   border: none;
   margin-bottom: 10px;
   border-bottom: solid 3px gainsboro;
   padding: 5px;
   outline: none;
   color: orangered;
   font-size: 16px;
}

.frame input[type=text]:focus,
.frame input[type=password]:focus {
   border-bottom: solid 3px orangered;
}

.frame a {
   display: inline-block;
   padding: 5px 10px 5px 5px;
   background-color: #28323C;
   color: white;
   border-radius: 5px;
   text-decoration: none;

}

.frame a:hover {
   color: orangered;
}

.frame a i {
   margin-right: 10px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: gainsboro;
}
::-moz-placeholder { /* Firefox 19+ */
  color: gainsboro;
}
:-ms-input-placeholder { /* IE 10+ */
  color: gainsboro;
}
:-moz-placeholder { /* Firefox 18- */
  color: gainsboro;
}