/*Stylesheet developed for Tharani Associates Ltd by Ndogoworks, March 2013*/
/*Updated June 2026 for Multi-Row Layout Fixes and Full Mobile Responsiveness*/
/*For more information about these stylesheet, contact info[at]ndogoworks.com*/

@font-face {
    font-family: 'AsapRegular';
    src: url('fonts/Asap-Regular-webfont.eot');
    src: url('fonts/Asap-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Asap-Regular-webfont.woff') format('woff'),
         url('fonts/Asap-Regular-webfont.ttf') format('truetype'),
         url('fonts/Asap-Regular-webfont.svg#AsapRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
 width: 1100px; /* Increased slightly from 1000px to give wide landscape thumbnails room to sit 4-across */
 margin-right: auto;
 margin-left: auto;
 text-align: right;
 margin-top: 20px;
 font-family: sans-serif;
}

#header {
 width: 250px;
 float: left;
 text-align: left;
 padding-top: 9px;
 color: #104E8B;
 font-size: 1.2em;
 height: 36px;
 font-weight: bold;
}

#navbar {
 width: 849px; /* Expanded by 100px to match new body footprint */
 float: right;
 height: 45px;
 font-size: 1.1em;
}

#navbar ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     }
     
#navbar li {
  width: 16.66%;
  text-align: center;
  padding-top: 9px;
  padding-bottom: 12px;
  float: left;
     }
     
#navbar a {
  display: block;
  color: #104E8B;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
     }
     
#navbar a:hover {
      color: #000;
}

#sidebar {
 width: 247px;
 margin-top: 1px;
 padding-top: 8px;
 padding-bottom: 8px;
 float: left;
 font-size: 0.9em;
 text-align: left;
 padding-left: 3px;
}

#sidebar ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

#sidebar li {
     display: block;
     width: 225px;
     margin-bottom: 12px;
}

#sidebar a {
 color: #104E8B;
 text-decoration: none;
}

#sidebar a:hover {
 color: #000;
}

#sidebar h1 {
 font-size: 1em;
 padding: 0px;
 margin: 0px;
 padding-bottom: 12px;
}

#sublinks a {
  color: #606060;
}

#main {
  width: 1100px; /* Expanded to match the total layout boundary to absorb wide landscape formats */
  margin-top: 1px;
  padding-top: 8px;
  padding-bottom: 8px;
  float: right;
  text-align: left;
}

#main-index {
 float: left;
 width: 100%;
 padding-top: 9px;
 padding-bottom: 12px;
 
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-start;
 gap: 24px; /* Flawless uniform padding setup across grid spaces */
}

#main-index p {
 font-size: 0.8em;
}

.nadimindex {
 flex: 0 0 auto; /* Grid items follow internal asset aspect scales smoothly */
 text-align: center;
 color: #000000;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.nadimindex p {
 font-size: 0.8em;
 text-align: center;
 padding: 5px 0 0 0;
 margin: 0;
 white-space: nowrap; /* Prevents text labels from wrapping awkwardly */
}

.nadimindex img {
 width: auto;          /* Adapts horizontally to prevent structural layout stretching */
 height: 175px;        /* Unyielding baseline height tracking for perfect row alignments */
 object-fit: contain;  /* Safeguards original architectural asset compositions without cropping */
 display: block;
}

#monocap {
      float: right;
      padding-right: 20px;
}

img {
    border: 1px black;
    object-fit: contain;
}

#footer {
 width: 1100px; /* Expanded to match layout footprint */
 /*bottom: 0;*/
 float: right;
 text-align: left;
 margin-top: 40px;
 margin-bottom: 20px;
 color: #808080;
 font-size: 0.8em;
}

#footer a {
  color: #808080;
  text-decoration: none;
}
     
#footer a:hover {
  color: #000;
}
     
/* gallery styles start ---------------------------------------------------- */

.pikachoose {
 width: 700px;
 /*margin: 0 auto;*/
}

/* The stage is the wrapper. The image fills 100% the height of the stage */

.pika-stage, .pika-textnav {
 width: 700px;
}

.pika-stage {
 position: relative;
 text-align:center;
 height:460px;
}

.pika-stage img{
 height:100%;
}

.pika-stage .caption {
 position: absolute;
 background: #000;
 background: rgba(0,0,0,0.75);
 border: 1px solid #141414;
 font-size: 11px;
 color: #fafafa;
 padding: 10px;
 text-align: right;
 bottom: 10px;
 right: 10px;
 display: none;
}

.pika-stage .caption p {
 padding: 0;
 margin: 0;
 line-height: 14px;
 display: none;
}

.pika-textnav, .pika-imgnav {
     display:none;
}

.pika-counter {
 display: none;
     }
       
#pikame{
     display:none;
}

/* ==========================================================================
   Mobile Optimization (Screens smaller than 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
  
  body {
    width: 100% !important; /* Forces fluid canvas bounding on narrow device layouts */
    padding: 15px;
    box-sizing: border-box;
    overflow-x: hidden;
    text-align: center !important;
  }

  /* ------------------------------------------------------------------------
     Header & Main Top Navigation Menus (Fixes Alignment Grid Drift)
     ------------------------------------------------------------------------ */
  #header {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100% !important;
    height: auto !important;
    float: none !important;
  }

  #navbar {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    margin-top: 15px;
  }

  #navbar ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 15px !important;
    width: 100% !important;
  }

  #navbar li {
    width: auto !important;
    float: none !important;
    display: inline-block !important;
    padding: 5px 10px !important;
    margin: 0 !important;
  }

  #navbar a {
    display: inline-block !important;
    width: auto !important;
  }

  /* ------------------------------------------------------------------------
     Sidebar Configuration (Collapses Inner Link List Menus Vertically)
     ------------------------------------------------------------------------ */
  #sidebar {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    margin-top: 25px !important;
    padding-left: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #sidebar h1 {
    text-align: center !important;
    font-size: 1.1em;
    width: 100%;
    margin-bottom: 10px;
  }

  #sidebar #sublinks, #sidebar ul {
    width: 100% !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin: 0 0 15px 0 !important;
  }

  #sidebar li {
    width: auto !important;
    display: inline-block !important;
    margin-bottom: 0 !important;
    padding: 4px 8px !important;
    background: rgba(0, 0, 0, 0.04); /* Optional: Soft visual distinction for tap targets */
    border-radius: 4px;
  }
  
  #sidebar br {
    display: none !important; /* Strips empty desktop breaks to avoid layout gaps */
  }

  /* ------------------------------------------------------------------------
     Main Subpages Content Containers & Master Index Wrappers
     ------------------------------------------------------------------------ */
  #main, #main-index {
    width: 100% !important;
    padding-left: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important; /* Snaps horizontal items into neat vertical columns */
    align-items: center !important;
    justify-content: center !important;
    margin-top: 25px;
    box-sizing: border-box;
    text-align: center !important;
  }

  #main p {
    text-align: center !important;
    width: 100% !important;
  }

  /* Suppress the inline divider used to structure desktop layouts */
  #main-index div[style*="flex-basis: 100%"] {
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     Dynamic Layout Structure Adjustments for Thumbnail Images
     ------------------------------------------------------------------------ */
  .nadimindex {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 35px !important; /* Perfect uniform padding room between vertical blocks */
    padding: 0 !important;
  }

  .nadimindex p {
    white-space: normal !important; /* Permits titles to safely drop to line two on narrow mobile screens */
    padding: 8px 10px 0 10px !important;
  }

  .nadimindex img {
    width: auto !important;
    max-width: 90% !important;   /* Protects image containers from bleeding past glass viewport edges */
    height: auto !important;       /* Unlocks desktop restricted height aspects smoothly */
    max-height: 250px !important;  /* Retains clear viewport containment scales across mobile models */
    margin: 0 auto;
  }

  /* ------------------------------------------------------------------------
     Pikachoose Legacy Portfolio Slideshow Responsive Adjustments
     ------------------------------------------------------------------------ */
  .pikachoose, .pika-stage, .pika-textnav {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }

  .pika-stage {
    height: auto !important;
    min-height: 200px;
  }

  .pika-stage img {
    width: 100% !important;
    height: auto !important;
    max-height: 380px;
    object-fit: contain;
  }

  #footer {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    margin-top: 35px;
    padding-bottom: 15px;
  }
}