/* =======================================
      NAVIGATION
======================================== */
#navigation > div {
  margin: 0.5rem;
}

/* =======================================
  LHS NAVIGATION (HOME + EMAIL + LINKEDIN)
======================================== */

#nav_main {
  min-width: 300px;
  color: var(--pri);
  background-color: var(--sec);
  opacity: 0.9;
}

.fixed-top-left {
  position: fixed;
  z-index: 1030;
}
/* If the width is too small, make the LHS the whole top nav bar */
@media (max-width: 490px) { .fixed-top-left { top: 0; left: 0; right: 0;}}
/* Otherwise, this will remain in the LHS */
@media (min-width: 491px) {.fixed-top-left { top: 0; left: 0;}}

/* Ensure equal spacing between home and linkedin */
#nav_main .navbar-brand {
  margin-right: 1rem;
  margin-left: 1rem;
}

/* =======================================
  RHS NAVIGATION (TOC + DATA + GITHUB)
======================================== */

#nav_page {
  min-width: 150px;
  color: var(--sec);
  background-color: var(--pri);
  opacity: 0.9;
  /* only show if there's content */
  visibility: hidden;
}

.fixed-top-right {
  position: fixed;
  z-index: 1028;
}
/* If the width too small, shift the RHS downwards */
@media (max-width: 490px) { .fixed-top-right { margin-left: 0px !important; margin-right: 0px !important; 
											   bottom: 0; left: 50%; transform: translate(-50%, 0); }}
@media (min-width: 491px) { .fixed-top-right { top: 0; right: 0; }}

/* =========================
    For RMD Mode
    ======================= */
/* For inversion of TOC */
.nav-item.invert {
  color: var(--pri);
  background-color: var(--sec-75);
}

/* Disable left right icons by default */
#nav_page_slides_p, #nav_page_slides_n {
  display: none;
}

/* =========================
    For PPT Mode
    ======================= */

#nav_page_slides_p, #nav_page_slides_n {
  padding-right: 0.8rem;
}

/* =======================================
  RHS2 NAVIGATION (TOC POPUP)
======================================== */

#nav_tocpopup {
  min-width: 150px;
  color: var(--sec);
  background-color: var(--pri);
  opacity: 0.9;
  display: none;
  overflow-y: auto
}

.fixed-midtop-right {
  position: fixed;
  z-index: 1029;
}
/* Determine maximum height of popup depending on the window */
@media (max-width: 490px) { #nav_tocpopup { max-height: calc(100% - 10rem); }
                            .fixed-midtop-right { text-align: center; 
                                                  margin-left: 0px !important; margin-right: 0px !important; 
                                                  bottom: 4.5rem; left: 50%; transform: translate(-50%, 0); }}
@media (min-width: 491px) { #nav_tocpopup { max-height: calc(100% - 5.5rem); }
                            .fixed-midtop-right { top: 4.5rem; right: 0; }}

/* For elements */
.toc-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1.0rem;
    background-color: transparent;
    line-height: 1.5;
}

.toc-item:hover, .toc-item:focus {
    color: var(--pri);
    text-decoration: none;
    background-color: var(--sec);
}

/* =======================================
     SHOWCASE
======================================== */
#showcase {
  min-width: 300px;
  margin-top: 6rem; /* Extra spacing to accomodate for navigation bar on top */
  margin-bottom: 2rem;
}

/* For iphone: To make sure that width of iphone = width of iframe */
#iframe {
  width: 1px;
  min-width: 100%;
  *width: 100%;
  height: 10000px;
  overflow:hidden;
}

/* =======================================
  OTHER WORKS
======================================== */

#others .container {
  min-width: 300px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs, .col-xs-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 400px) and (max-width: 575px) {
  #others .col-xs {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  #others .col-xs-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  #others .col-xs-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  #others .col-xs-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  #others .col-xs-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  #others .col-xs-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  #others .col-xs-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  #others .col-xs-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  #others .col-xs-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  #others .col-xs-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  #others .col-xs-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  #others .col-xs-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  #others .col-xs-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  #others .col-xs-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  #others .order-xs-first {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  #others .order-xs-last {
    -webkit-box-ordinal-group: 14;
    -ms-flex-order: 13;
    order: 13;
  }
  #others .order-xs-0 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }
  #others .order-xs-1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  #others .order-xs-2 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  #others .order-xs-3 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }
  #others .order-xs-4 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }
  #others .order-xs-5 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
  }
  #others .order-xs-6 {
    -webkit-box-ordinal-group: 7;
    -ms-flex-order: 6;
    order: 6;
  }
  #others .order-xs-7 {
    -webkit-box-ordinal-group: 8;
    -ms-flex-order: 7;
    order: 7;
  }
  #others .order-xs-8 {
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
  }
  #others .order-xs-9 {
    -webkit-box-ordinal-group: 10;
    -ms-flex-order: 9;
    order: 9;
  }
  #others .order-xs-10 {
    -webkit-box-ordinal-group: 11;
    -ms-flex-order: 10;
    order: 10;
  }
  #others .order-xs-11 {
    -webkit-box-ordinal-group: 12;
    -ms-flex-order: 11;
    order: 11;
  }
  #others .order-xs-12 {
    -webkit-box-ordinal-group: 13;
    -ms-flex-order: 12;
    order: 12;
  }
  #others .offset-xs-0 {
    margin-left: 0;
  }
  #others .offset-xs-1 {
    margin-left: 8.333333%;
  }
  #others .offset-xs-2 {
    margin-left: 16.666667%;
  }
  #others .offset-xs-3 {
    margin-left: 25%;
  }
  #others .offset-xs-4 {
    margin-left: 33.333333%;
  }
  #others .offset-xs-5 {
    margin-left: 41.666667%;
  }
  #others .offset-xs-6 {
    margin-left: 50%;
  }
  #others .offset-xs-7 {
    margin-left: 58.333333%;
  }
  #others .offset-xs-8 {
    margin-left: 66.666667%;
  }
  #others .offset-xs-9 {
    margin-left: 75%;
  }
  #others .offset-xs-10 {
    margin-left: 83.333333%;
  }
  #others .offset-xs-11 {
    margin-left: 91.666667%;
  }
}

/* =======================================
  OTHER WORKS + FOOTER
======================================== */

#footer .container {
  min-width: 300px;
}