html, body {
    padding-top: 50px;
    padding-bottom: 20px;
    background-color: #141414;
    color: #ffffff;
    height: 100%;
    font-family: Trebuchet MS,Verdana, Arial, Helvetica, sans-serif;
}

A  { color: #adadad; text-decoration: none; font-size: 15pt;}

A:Visited  { color: #adadad}

A:Active  { color: #ffcc00}

A:hover { color: #ffcc00 }

.row {
    margin:auto;
}

.col-md-6 {
    background-color: #000000;
    margin:auto;
}

.btn-default2 {
    color: #333;
    background-color: #ffcc00;
    border-color: #ccc;
  }
  .btn-default2:focus,
  .btn-default2.focus {
    color: #333;
    background-color: #ffd940;
    border-color: #8c8c8c;
  }
  .btn-default2:hover {
    color: #333;
    background-color: #ffd940;
    border-color: #adadad;
  }
  .btn-default2:active,
  .btn-default2.active,
  .open > .dropdown-toggle.btn-default2 {
    color: #333;
    background-color: #ffcc00;
    background-image: none;
    border-color: #adadad;
  }
  .btn-default2:active:hover,
  .btn-default2.active:hover,
  .open > .dropdown-toggle.btn-default2:hover,
  .btn-default2:active:focus,
  .btn-default2.active:focus,
  .open > .dropdown-toggle.btn-default2:focus,
  .btn-default2:active.focus,
  .btn-default2.active.focus,
  .open > .dropdown-toggle.btn-default2.focus {
    color: #333;
    background-color: #ffd940;
    border-color: #8c8c8c;
  }
  .btn-default2.disabled:hover,
  .btn-default2[disabled]:hover,
  fieldset[disabled] .btn-default2:hover,
  .btn-default2.disabled:focus,
  .btn-default2[disabled]:focus,
  fieldset[disabled] .btn-default2:focus,
  .btn-default2.disabled.focus,
  .btn-default2[disabled].focus,
  fieldset[disabled] .btn-default2.focus {
    background-color: #fff;
    border-color: #ccc;
  }
  .btn-default2 .badge {
    color: #fff;
    background-color: #333;
  }

footer {
    position:absolute;
    bottom: 0;
    width: auto;
    text-align: center;
    height: 20px;    
}

.footer2 {
    position: relative;
    left: 0;
    /*bottom: 0;*/
    width: 100%;
    text-align: center;
    padding-top: 60px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    
    
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* (i) style */
abbr:focus::after {
    cursor: auto;
    content: attr(title);
    display: inline-block; /* Get rid of parent's text decoration */
    width: 100%;
    padding: 1em;
    box-sizing: border-box;
    background-color: #ffcc00;
    /*opacity: 0.8;*/
    text-decoration: none;
    color: #000;
    border-radius: 6px;
    /*opacity: 0.5;*/
}

abbr:not(:focus) {
    cursor: help;
    text-decoration: none;
}

dfn {
    text-decoration: none;
    font-style: normal;
}
/* (i) style end */

@media all and (orientation:portrait) {
    #info {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 10000;
        /*display: block;*/
        visibility: visible;
        width: 100%;
        height: 150%;
        background-color: black;
        opacity: 0.9;
        /*transition: all .5s ease-in-out;*/
    }

        #info p {
            position: absolute;
            width: 100%;
            top: 20%;
            left: 0px;
        }

    #rotate {
        position: absolute;
        width: 100%;
        top: 20%;
        left: 0px;
        /*      left: 45%;
        top:45%;*/
        opacity: 1;
    }
    /* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
    #info {
        display: none;
        
    }

/*    .body-content {
        zoom: 75%;
    }*/
    /* Style adjustments for landscape mode goes here */
}

@media all and (orientation:portrait) {
    .new {
        height: 40%;
        max-height: 150px;
        top: 45%;
        float: left;
        vertical-align: middle;
    }
}

@media all and (orientation:landscape) {
    .new {
        max-height: 48px;
        float: left;
        vertical-align: middle;
    }
}


/*loading spinner*/
.loader {
    width: 100px;
    height: 100px;
    border: 5px solid;
    border-color: #ffcc00 transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    top: 50vh;
    margin-top: -50px;
    margin-left: -50px;
    left: 50vw;
    position: fixed;
/*    margin-top: calc(50%-100px);
    margin-left: calc(50%-100px);*/
    transform: translate(-50%, -50%)
    /*transform: translate(-50%, -50%);*/
}

.loader2 {
/*    position: absolute;
    transform: translate(0%, 0%);*/
    width: 100%;
    height: 200%;
    background-color: #000;
    opacity: 0.8;
    position: absolute;
    top: 0px;
    z-index: 10000000;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

A:Visited {
    color: #fff;
}