html {
   min-height:100%;
}

body {
  display: -webkit-flex;
  display:flex;
  -webkit-flex-direction:column;
  flex-direction:column;
  min-height:100vh;
}

#main {
   /* min-height: 800px;*/
   /* min-height:100vh;*/
   -webkit-flex: 1 0 auto;
   flex: 1 0 auto;
   -webkit-flex-flow: row;
   flex-flow: row;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display: flex;
}
#main > #view-right {
   order: 2;
   -webkit-order: 2;
   -webkit-flex: 1 1 auto;
   flex: 1 1 auto;
}

footer {
   padding: 4px 0;
   color: white;
   z-index:2;
   flex: 0 0 auto;
}

.footer-container {
   display: -webkit-flex;
   display: flex;
   justify-content: space-between;
   flex-flow: row wrap;
}

.footer-left {
   -webkit-flex: 0 1 auto;
   flex: 0 1 auto;
   padding: 0 25px 0 5px;
}

.footer-center {
   -webkit-flex: 0 1 auto;
   flex: 0 1 auto;
   text-align:center;
   padding: 0 25px;
}

.footer-right {
   -webkit-flex: 0 1 auto;
   flex: 0 1 auto;
   padding: 0 5px 0 25px;
}



/* Too narrow to support three columns */
@media all and (max-width: 700px) {
   #page {
      -webkit-flex-flow: column;
      flex-direction: column;
   }

   footer {
    font-size: 14px;
   }
   .footer-left {
   padding: 0 5px;
  }
  .footer-center {
     padding: 0 5px;
  }
  .footer-right {
     padding: 0 5px;
  }
}