@-webkit-keyframes slide-in {
   from {width: 0%; display: block;}
   to {width: 60%; display: block;}
}

@keyframes slide-in {
   from {width: 0%; display: block;}
   to {width: 60%; display: block;}
}

@-webkit-keyframes slide-out {
   from {width: 60%; display: block;}
   to {width: 0%; display: none;}
}

@keyframes slide-out {
   from {width: 60%; display: block;}
   to {width: 0%; display: none;}
}

body {
   font-family: Helvetica,Arial,sans-serif;
   margin: 0px;
   background: #FFFFFF;
}

p, b, input, button, select, textarea, datalist {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 16px;
   font-weight: normal;
}

.bold {
   font-weight: bold;
}

.th-text {
   font-weight: bold;
}

b#title {
   font-size: 25px;
   font-weight: bold;
   text-shadow: 0 1px 0 #777777;
   color: #FFFFFF;
}

div, input, button, textarea, select {
   box-sizing: border-box;
}

table, th, td {
   border: 1px solid #000000;
   border-collapse: collapse;
   border-spacing: 0px;
}

div.table-border {
   width: 100%;
   border: 0px solid #000000;
   border-radius: 0px;
   overflow: auto; /*hidden*/
   margin: 0px 0px;
   box-shadow: 1px 1px 3px rgba(0,0,0,.15);
}

table.table-content {
   width: 100%;
   /*max-width: 100%;*/
   /*display: block;*/
   table-layout: fixed;
   border: 0px;
}

/*
table.table-content thead, tbody {
   display: block;
}
*/

/*
td:nth-child(1), th:nth-child(1) { min-width: 100px; }
td:nth-child(2), th:nth-child(2) { min-width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }
*/

table.table-content tbody {
   height: 200px;
   overflow-y: auto;
}

th {
   height: 30px;
   background-color: #EEEEEE;
}

th.table-header {
   border-color: #000000;
   border-style: solid;
   border-width: 0px 0px 0px 1px;
   white-space: nowrap;
   overflow: hidden;
}

th.table-header-first {
   border-color: #000000;
   border-style: solid;
   border-width: 0px 0px 0px 0px;
   white-space: nowrap;
   overflow: hidden;
}

tr.table-row {
   height: 40px;
}

tr.table-row-new {
   height: 40px;
   background-color: #FFFFD0;
}

td {
   text-align: center;
}

td.table-row {
   border-color: #000000;
   border-style: solid;
   border-width: 1px 0px 0px 1px;
   white-space: nowrap;
   overflow: hidden;
}

td.table-row-first {
   border-color: #000000;
   border-style: solid;
   border-width: 1px 0px 0px 0px;
   white-space: nowrap;
   overflow: hidden;
}

input, button, select, button {
   text-align: center;
   padding: 1px 6px;
   height: 40px;
   width: 100%;
   border-radius: 5px;
   margin: 3px 0px;
   border: 1px solid #000000;
   box-shadow: 1px 1px 3px rgba(0,0,0,.15);
}

input, select, textarea {
   background-color: #FEFEFE;
   box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,.15), inset -1px -1px 1px 0px rgba(0,0,0,.05);
   /*background: transparent;*/
}
input:disabled {
   background-color: #EEEEEE;
}
input:focus {
   background-color: #F5F5FF;
}

input[type=checkbox] {
   width: 20px;
   height: 20px;
   border: 0px;
}

input.table-checkbox {
   height: 30px;
   margin: 5px 0px 0px 0px;
}

input.table-radio {
   height: 30px;
   margin: 5px 0px 0px 0px;
}

legend {
   text-align: center;
   margin: auto;
}

button {
   background: #FBFBFB;
   cursor: pointer;
   box-shadow: inset -2px -2px 2px 0px rgba(0,0,0,.15), inset 1px 1px 1px 0px rgba(0,0,0,.05);
}
button:hover {
   background: #FFFFFF;
   /*border: 2px solid #000000 !important;*/
}

fieldset {
   border: 1px solid #000000;
   border-radius: 5px;
   padding: 10px;
   margin: 3px 0px;
}

textarea {
   border-radius: 5px;
   width: 100%;
   margin: 3px 0px;
   resize: vertical;
}

.menu-item {
   height: 45px;
   width: 100%;
   padding-top: 13px;
   padding-left: 10px;
   text-align: left;
   cursor: pointer;
   /*border-bottom: 1px solid #000000;*/
}

.menu-text {
   font-size: 20px;
   font-weight: bold;
   color: #FFFFFF;
}

.menu-separator {
   text-align: left;
   margin-left: 0px;
   width: 95%;
   border: 2px solid #FFFFFF;
   border-radius: 0px 5px 5px 0px;
}

.pressable {
   cursor: pointer;
}

#main {
   width: 100%;
   top: 0px;
   padding-left: 0%;
   padding-top: 50px;
   padding-bottom: 50px;
   position: static;
   -webkit-transition: top 2s; /* For Safari 3.1 to 6.0 */
   transition: top 2s;
}

#main.visible {
   top: 200px;
}

#main2 {
   width: 90%;
   padding-left: 10%;
   padding-top: 50px;
   padding-bottom: 50px;
   /*position: absolute;*/
}

#main3 {
   width: 100%;
   padding-left: 0%;
   padding-top: 100px;
   padding-bottom: 50px;
}

#pagemenu {
   width: 100%;
   height: 10%;
   min-height: 30px;
   max-width: 500px;
   max-height: 50px;
   text-align: right;
   position: fixed;
   top: 50px;
   right: 0px;
   /*margin: auto;*/
}

.pageitem-first {
   float: left;
   width: 50px;
   height: 100%;
   max-width: 100px;
   background-color: #5555BB;
   border-bottom-left-radius: 25px;
}

.pageitem {
   float: left;
   width: 20%;
   height: 100%;
   max-width: 100px;
   background-color: #5555BB;
}

.pageimage {
   width: 40px;
   padding: 10%;
   max-width: 100%;
}

/*
#server-info {
   border: 1px solid #000000;
   border-radius: 5px;
   padding: 10px;
}

#vm-info {
   border: 1px solid #000000;
   border-radius: 5px;
   padding: 10px;
}
*/

#dl-options {
   border: 1px solid #000000;
   border-radius: 5px;
   padding: 10px;
}

.no-border {
   border: 0px;
}

#anti-settings {
   position: fixed;
   z-index: 3;
   width: 100%;
   height: 100%;
   margin-top: 50px;
   display: none;
   background-color: #222222;
   filter: alpha(opacity=25); /* IE */
   -moz-opacity: 0.25; /* Gecko-Browser */
   opacity: 0.25; /* Opera 9+ */
}

#settings-slide {
   position: fixed;
   z-index: 4;
   width: 100%;
   height: 150px;
   margin-top: 50px;
   background-color: #5555BB;
   display: none;
}

#settings {
/*
   background: -webkit-linear-gradient(rgba(85,85,177,1),rgba(85,85,177,0)); /*Safari 5.1-6*//*
   background: -o-linear-gradient(rgba(85,85,177,1),rgba(85,85,177,0)); /*Opera 11.1-12*//*
   background: -moz-linear-gradient(rgba(85,85,177,1),rgba(85,85,177,0)); /*Fx 3.6-15*//*
   background: linear-gradient(rgba(85,85,177,1), rgba(85,85,177,0)); /*Standard*//*
*/
   background-color: #5555BB;
   position: fixed;
   z-index: 5;
   width: 100%;
   height: 0px;
   margin-top: 50px;
   /*display: none;*/
   overflow-y: auto;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
   -ms-transition: height 1s;
   -webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */
   transition: height 1s;
}

#settings.visible {
   height: 200px;
}

#settings-header {
   top: 5px;
   left: 5px;
   position: absolute;
}

#settings-footer {
   bottom: 5px;
   right: 5px;
   position: absolute;
}

#settings-icon-container {
   width: 50px;
   height: 40px;
   overflow: hidden;
   position: relative;
}

#settings-icon {
   width: 40px;
   height: 40px;
   top: 0px;
   right: -20px;
   position: absolute;
   /*padding-left: 30px;*/
   z-index: 6;
   /*clip: rect(0px, 20px, 40px, 0px);*/
   -ms-transition: right 1s, -ms-transform 1s;
   -webkit-transition: right 1s, -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
   transition: right 1s, transform 1s;
}

#settings-icon.visible {
   right: 10px;
   -ms-transform: rotate(-90deg); /* IE 9 */
   -webkit-transform: rotate(-90deg); /* Safari 3-8 */
   transform: rotate(-90deg);
}

#anti-menu {
   position: fixed;
   z-index: 4;
   /*width: 0px;*/
   width: 100%;
   /*height: 0px;*/
   height: 100%;
   margin-top: 50px;
   display: none;
   background-color: #222222;
   filter: alpha(opacity=0); /* IE */
   -moz-opacity: 0; /* Gecko-Browser */
   opacity: 0; /* Opera 9+ */
   /*-webkit-transition: -moz-opacity 1s, opacity 1s, width .3s; /* For Safari 3.1 to 6.0 */
   /*transition: -moz-opacity 1s, opacity 1s, width .3s;*/
   -ms-transition: -filter 1s;
   -webkit-transition: -moz-opacity 1s; /* For Safari 3.1 to 6.0 */
   transition: opacity 1s;
}

#anti-menu.visible {
   /*display: block;*/
   /*width: 100%;*/
   /*height: 100%;*/
   filter: alpha(opacity=25); /* IE */
   -moz-opacity: 0.25; /* Gecko-Browser */
   opacity: 0.25; /* Opera 9+ */
}

#menu {
   /*
   background: -webkit-linear-gradient(left, rgba(85,85,177,1),rgba(85,85,177,0)); /*Safari 5.1-6*//*
   background: -o-linear-gradient(right, rgba(85,85,177,1),rgba(85,85,177,0)); /*Opera 11.1-12*//*
   background: -moz-linear-gradient(right, rgba(85,85,177,1),rgba(85,85,177,0)); /*Fx 3.6-15*//*
   background: linear-gradient(to right, rgba(85,85,177,1), rgba(85,85,177,0)); /*Standard*//*
   */
   /*Previous settings*/
   /*background: -webkit-linear-gradient(left, rgba(238,238,238,1),rgba(238,238,238,0)); /*Safari 5.1-6*/
   /*background: -o-linear-gradient(right, rgba(238,238,238,1),rgba(238,238,238,0)); /*Opera 11.1-12*/
   /*background: -moz-linear-gradient(right, rgba(238,238,238,1),rgba(238,238,238,0)); /*Fx 3.6-15*/
   /*background: linear-gradient(to right, rgba(238,238,238,1), rgba(238,238,238,0)); /*Standard*/
   /*background-color: #FFFFFF;*/
   background-color: #5555BB;
   position: fixed;
   z-index: 5;
   width: 0px;
   max-width: 250px;
   /*height: 100%;*/
   top: 50px;
   /*display: none;*/
   overflow-y: auto;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
   height: -moz-calc(100% - 50px);
   height: -webkit-calc(100% - 50px);
   height: calc(100% - 50px);
   -ms-transition: width 1s;
   -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
   transition: width 1s;
}

#menu.visible {
   /*display: block;*/
   width: 60%;
}

#top-navbar {
   background-color: #5555BB;
   height: 50px;
   width: 100%;
   position: fixed;
   /*z-index: 2;*/
}

#table-overview {
   border: 0px;
}

#message {
   position: fixed;
   z-index: 2;
   bottom: 0px;
   display: none;/*table;*/
   width: 90%;
   height: 15%;
   max-height: 250px;
   background-color: #FFFFFF;
   text-align: center;
   border-top: 2px solid #000000;
   border-left: 2px solid #000000;
   border-right: 2px solid #000000;
   box-shadow: -3px -3px 10px rgba(0,0,0,.15), 3px -3px 10px rgba(0,0,0,.15);
   border-radius: 5px 5px 0px 0px;
   left: 5%;
   /*vertical-align: middle;*/
}

#message::after {
   box-shadow: 3px -3px 3px rgba(0,0,0,.15);
}

#message > span {
   display: table-cell;
   vertical-align: middle;
}

/*Custom-Scrollbar*/
::-webkit-scrollbar {
   /*background-color: #FFFFFF;*/
   /*border-radius: 5px;*/
   width: 2%;
   height: 2%;
   min-width: 6px;
   min-height: 6px;
   max-width: 10px;
   max-height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
   /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
   -webkit-border-radius: 10px;
   border-radius: 10px;
   background: rgba(70,70,70,0.3);
   /*border: 1px solid rgba(85,85,187,1);*/
}
::-webkit-scrollbar-track:active {
   background: rgba(70,70,70,0.4);
}
::-webkit-scrollbar-track:window-inactive {
   background: rgba(70,70,70,0.0);
}

/* Handle */
::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
   border-radius: 10px;
   /*background: rgba(85,85,187,1);*/
   background: rgba(70,70,70,0.6);
   /*border: 1px solid rgba(85,85,187,1);*/
   /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);*/
}
::-webkit-scrollbar-thumb:active {
   background: rgba(85,85,187,1);
}
::-webkit-scrollbar-thumb:window-inactive {
   background: rgba(70,70,70,0.1);
   /*background: rgba(85,85,187,0.4);*/
}

::-webkit-scrollbar-corner {
   background: transparent;
}

/*
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece  
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
*/
/*Custom-Scrollbar*/

/*strike*/
.strike {
   display: block;
   text-align: center;
   overflow: hidden;
   white-space: nowrap;
}

.strike > span {
   position: relative;
   display: inline-block;
}

.strike > span:before,
.strike > span:after {
   content: "";
   position: absolute;
   top: 50%;
   width: 9999px;
   height: 1px;
   background: #000000;
}

.strike > span:before {
   right: 100%;
   margin-right: 15px;
}

.strike > span:after {
   left: 100%;
   margin-left: 15px;
}
/*--*/
.divider {
   width: 100%;
   text-align: center;
}

.divider hr {
   margin-left: auto;
   margin-right: auto;
   width: 45%;
}

.left {
   float: left;
}

.right {
   float: right;
}

.clear {
   clear: both;
}

.tc {
   display: table-cell;
}

div.template {
   border-top: 1px solid #000000;
   padding: 5px;
}

div.template-hidden {
   display: none;
}

div.template-visible {
   display: block;
}
/*--*/