html
{ height: 100%;}

*
{ margin: 0;
  padding: 0;}

body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
  background: #FFF;
  color: #555;}

p
{ padding: 0 0 20px 0;
  line-height: 1.7em;}

img
{ border: 0;}

h1, h2, h3, h4, h5, h6 
{ color: #362C20;
  letter-spacing: 0em;
  padding: 0 0 5px 0;}

h1, h2, h3
{ font: normal 170% 'century gothic', arial;
  margin: 0 0 15px 0;
  padding: 15px 0 5px 0;
  color: #000;}

h2
{ font-size: 160%;
  padding: 9px 0 5px 0;
  color: #009FBC;}

h3
{ font-size: 140%;
  padding: 5px 0 0 0;}

h4, h6
{ color: #009FBC;
  padding: 0 0 5px 0;
  font: normal 110% arial;
  text-transform: uppercase;}

h5, h6
{ color: #888;
  font: normal 95% arial;
  letter-spacing: normal;
  padding: 0 0 15px 0;}

a, a:hover
{ outline: none;
  text-decoration: underline;
  color: #AEB002;}

a:hover
{ text-decoration: none;}

blockquote
{ margin: 20px 0; 
  padding: 10px 20px 0 20px;
  border: 1px solid #E5E5DB;
  background: #FFF;}

ul
{ margin: 2px 0 22px 17px;}

ul li
{ list-style-type: circle;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 5px;
  line-height: 1.5em;}

ol
{ margin: 8px 0 22px 20px;}

ol li
{ margin: 0 0 11px 0;}

.left
{ float: left;
  width: auto;
  margin-right: 10px;}

.right
{ float: right; 
  width: auto;
  margin-left: 10px;}

.center
{ display: block;
  text-align: center;
  margin: 20px auto;}

#main, #logo, #menubar, #site_content
{ margin-left: auto; 
  margin-right: auto;
}

#footer {
    width: 880px;
    margin: 0 auto;
    text-align: center;
    clear: both;
    box-sizing: border-box;
}

#footer p {
    text-align: center;
    margin: 10px 0;
}

#header
{ background: #323534 url(back.png) repeat-x;
  height: 177px;}
  
#banner
{  background: transparent url(banner.jpg) no-repeat;
  width: 860px;
  height: 180px;
  margin-bottom: 20px;
  border: 10px solid #DDD;}

#logo
{ width: 880px;
  position: relative;
  height: 140px;
  background: transparent;}

#logo #logo_text 
{ position: absolute; 
  top: 10px;
  left: 0;}

#logo h1, #logo h2
{ font: normal 300% 'century gothic', arial, sans-serif;
  border-bottom: 0;
  text-transform: none;
  margin: 0 0 0 9px;}

#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover 
{ padding: 22px 0 0 0;
  color: #FFF;
  letter-spacing: 0.1em;
  text-decoration: none;}

#logo_text h1 a .logo_colour
{ color: #E4EC04;}

#logo_text a:hover .logo_colour
{ color: #FFF;}

#logo_text h2
{ font-size: 120%;
  padding: 4px 0 0 0;
  color: #999;}

#menubar
{ width: 880px;
  height: 46px;} 

ul#menu
{ float: right;
  margin: 0;}

ul#menu li
{ float: left;
  padding: 0 0 0 9px;
  list-style: none;
  margin: 1px 2px 0 0;
  background: #5A5A5A url(tab.png) no-repeat 0 0;}

ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
  display: block; 
  float: left; 
  height: 20px;
  padding: 6px 35px 5px 28px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  background: #5A5A5A url(tab.png) no-repeat 100% 0;} 

ul#menu li.selected a
{ height: 20px;
  padding: 6px 35px 5px 28px;}

ul#menu li.selected
{ margin: 1px 2px 0 0;
  background: #00C6F0 url(tab_selected.png) no-repeat 0 0;}

ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
  color: #FFF;}

ul#menu li a:hover
{ color: #E4EC04;}

/* =========================================================
   MAIN SITE LAYOUT
   ========================================================= */

#site_content {
  width: 880px;
  margin: 20px auto 0 auto;
  padding: 0 0 10px 0;
  display: flex;
  align-items: flex-start;
  gap: 30px;
  box-sizing: border-box;
  overflow: visible;
}

#sidebar_container {
  order: 2;
  flex: 0 0 224px;
  width: 224px;
  float: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.sidebar_top {
  width: 222px;
  height: 14px;
  background: transparent url(side_top.png) no-repeat;
}

.sidebar_base {
  width: 222px;
  height: 14px;
  background: url(side_base.png) no-repeat;
}

.sidebar {
  float: none;
  width: 222px;
  padding: 15px;
  margin: 0 0 16px 0;
  box-sizing: border-box;
  background: #f7f7f7;
  border-radius: 4px;
}

.sidebar_item {
  background: url(side_back.png) repeat-y;
  padding: 0 15px;
  width: 192px;
}

.sidebar li a.selected {
  color: #444;
}

.sidebar ul {
  margin: 0;
}

#content {
  order: 1;
  text-align: left;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 0;
  float: none;
  box-sizing: border-box;
}

#content ul {
  margin: 2px 0 22px 0;
}

#content ul li,
.sidebar ul li {
  list-style-type: none;
  background: url(bullet.png) no-repeat;
  margin: 0 0 0 0;
  padding: 0 0 4px 25px;
  line-height: 1.5em;
}

#footer p
{ line-height: 1.7em;
  padding: 0 0 10px 0;}

#footer a
{ color: #A8AA94;
  text-decoration: none;}

#footer a:hover
{ color: #FFF;
  text-decoration: none;}






  #footer_teaching
{ width: 100%;
  font-family: 'trebuchet ms', sans-serif;
  font-size: 100%;
  height: 80px;
  padding: 28px 0 5px 0;
  text-align: center; 
  background: #3B3939 url(footer.png) repeat-x;
  color: #A8AA94;}

#footer_teaching p
{ line-height: 1.7em;
  padding: 0 0 10px 0;}

#footer_teaching a
{ color: #A8AA94;
  text-decoration: none;}

#footer_teaching a:hover
{ color: #FFF;
  text-decoration: none;}




.search
{ color: #5D5D5D; 
  border: 1px solid #BBB; 
  width: 134px; 
  padding: 4px; 
  font: 100% arial, sans-serif;}

.form_settings
{ margin: 15px 0 0 0;}

.form_settings p
{ padding: 0 0 4px 0;}

.form_settings span
{ float: left; 
  width: 200px; 
  text-align: left;}
  
.form_settings input, .form_settings textarea
{ padding: 5px; 
  width: 299px; 
  font: 100% arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F;}
  
.form_settings .submit
{ font: 100% arial; 
  border: 0; 
  width: 99px; 
  margin: 0 0 0 212px; 
  height: 33px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  background: #3B3B3B; 
  color: #FFF;}

.form_settings textarea, .form_settings select
{ font: 100% arial; 
  width: 299px;}

.form_settings select
{ width: 310px;}

.form_settings .checkbox
{ margin: 4px 0; 
  padding: 0; 
  width: 14px;
  border: 0;
  background: none;}

.separator
{ width: 100%;
  height: 0;
  border-top: 1px solid #D9D5CF;
  border-bottom: 1px solid #FFF;
  margin: 0 0 20px 0;}
  
table
{ margin: 10px 0 30px 0;}

table tr th, table tr td
{ background: #3B3B3B;
  color: #FFF;
  padding: 7px 4px;
  text-align: left;}
  
table tr td
{ background: #E5E5DB;
  color: #47433F;
  border-top: 1px solid #FFF;}




  /* research page */

  .research {
    background-color: #1e1e2f; /* Dark background */
    padding: 40px;
    border-radius: 10px;
    color: #f5f5f5; /* Light text */
    font-family: 'Arial', sans-serif;
    margin: 20px auto;
    max-width: 800px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}

/* Title styling */
.research-title h1 {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #e8e8e8;
    border-bottom: 2px solid #3a3a4f; /* Bottom border for emphasis */
    display: inline-block;
    padding-bottom: 10px;
}

/* Research container */
.research-container {
    margin-top: 20px;
}

/* Research format */
.research-format {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #28293d; /* Slightly lighter than background */
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover effect */
}

/* Hover effect for each research */
.research-format:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

/* Research header */
.research-header h3 {
    font-size: 20px;
    color: #ffc107; /* Highlighted header */
    margin-bottom: 5px;
}

.research-header h2 {
    font-size: 17px;
    color: #ffffff;
    margin-bottom: 15px;
}

/* Research description */
.research-desc, .research-full-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #d3d3d3;
}

/* Full description hidden by default */
.research-full-desc {
    display: none;
}

/* Read more button */
.research-readmore span {
    /*color: #00bcd4; 
    cursor: pointer;
    text-decoration: underline;
    font-size: 16px;
    transition: color 0.3s ease;*/

    background: transparent;
    color: #ff00ff;
    font-size: 14px;
    text-align: left;
    margin-top: auto;
    cursor: pointer;
    border: none;
    outline: none;
    font-weight: bold;
    padding: 0;
    transition: color 0.3s;
}

.research-readmore span:hover {
    color: #0097a7; /* Darker teal */
}

/* Research link */
.research-link a {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 15px;
    background-color: #00bcd4;
    color: #ffffff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.research-link a:hover {
    background-color: #0097a7;
    color: #e0f7fa; /* Lighter hover text */
}



/* teaching section */

/* ================================
   Teaching Section
   ================================ */
/* ==========================================
   BEAUTIFUL TEACHING SECTION
   ========================================== */

.teaching-section {
  width: 620px;
  margin: 0;
  padding: 5px 0 30px 0;
  color: #444;
  line-height: 1.7;
  box-sizing: border-box;
  font-family: 'Trebuchet MS', Arial, sans-serif;
}


/* ==========================================
   Main Heading
   ========================================== */

.teaching-section h1 {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 28px 0;
  padding: 0 0 12px 0;
  color: #222;
  border-bottom: 3px solid #009FBC;
  position: relative;
}

.teaching-section h1::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: #E4EC04;
  position: absolute;
  bottom: -3px;
  left: 0;
}


/* ==========================================
   Intro Paragraph
   ========================================== */

.teaching-section > p:first-of-type {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  background: #f7fafb;
  padding: 18px 22px;
  margin-bottom: 30px;
  border-left: 4px solid #009FBC;
  border-radius: 0 6px 6px 0;
}


/* ==========================================
   Section Headings
   ========================================== */

.teaching-section h2 {
  font-size: 23px;
  font-weight: 600;
  margin: 35px 0 18px 0;
  padding: 0 0 8px 12px;
  color: #333;
  border-left: 4px solid #009FBC;
  border-bottom: 1px solid #ddd;
}


/* ==========================================
   Position / Semester Headings
   ========================================== */

.teaching-section h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 25px 0 12px 0;
  padding: 9px 14px;
  color: #fff;
  background: linear-gradient(90deg, #009FBC, #18b8d0);
  border-radius: 5px;
}


/* ==========================================
   Institution Card
   ========================================== */

.teaching-section .institution {
  position: relative;
  padding: 18px 22px;
  margin: 15px 0 28px 0;
  background: #fff;
  border-left: 5px solid #009FBC;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.teaching-section .institution:hover {
  transform: translateX(4px);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12);
}


/* University Name */
.teaching-section .institution strong {
  font-size: 18px;
  color: #009FBC;
}


/* ==========================================
   Course Lists
   ========================================== */

   
#content .teaching-section ul {
    margin: 15px 0 20px 0;
    padding: 0;
}

#content .teaching-section li {
    position: relative;
    list-style: none;

    margin: 10px 0;
    padding: 13px 16px 13px 42px;

    font-size: 15px;
    line-height: 1.6;
    color: #444;

    background-image: none;
    background-color: #f8f9fa;

    border: 1px solid #e5e5e5;
    border-radius: 6px;

    transition: all 0.25s ease;
}

#content .teaching-section li::before {
    content: "✓";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);

    font-size: 15px;
    font-weight: bold;
    color: #009FBC;
}

#content .teaching-section li:hover {
    background-color: #ffffff;
    border-color: #009FBC;
    transform: translateX(4px);
}


/* Course Name */
.teaching-section li strong {
  color: #333;
  font-weight: 600;
}


/* ==========================================
   Teaching Philosophy
   ========================================== */

.teaching-section .philosophy {
  position: relative;
  background: linear-gradient(135deg, #f7fafb, #eef8fa);
  padding: 22px 25px 22px 30px;
  margin-top: 18px;
  border-radius: 8px;
  border: 1px solid #d8edf1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}


/* Quote decoration */
.teaching-section .philosophy::before {
  content: "“";
  position: absolute;
  top: -5px;
  left: 8px;
  font-size: 55px;
  color: #009FBC;
  opacity: 0.25;
  font-family: Georgia, serif;
}


/* Philosophy text */
.teaching-section .philosophy p {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #555;
}


/* ==========================================
   Responsive Design
   ========================================== */

@media screen and (max-width: 700px) {

  .teaching-section {
    width: 100%;
    padding: 10px 15px 30px 15px;
  }

  .teaching-section h1 {
    font-size: 28px;
  }

  .teaching-section h2 {
    font-size: 21px;
  }

  .teaching-section h3 {
    font-size: 17px;
  }

}


/* =========================================================
   SERVICE PAGE
   ========================================================= */

.service-page {
    width: 100%;
    font-family: Arial, sans-serif;
    color: #444;
}


/* -------------------------
   Introduction
   ------------------------- */

.service-intro {
    margin-bottom: 30px;
}

.service-intro h1 {
    font-size: 30px;
    color: #222;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #009FBC;
}

.service-intro p {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}


/* -------------------------
   Service Container
   ------------------------- */

.service-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* -------------------------
   Service Card
   ------------------------- */

.service-card {
    display: flex;
    align-items: flex-start;

    padding: 20px;

    background: #f8f9fa;

    border: 1px solid #e4e4e4;
    border-left: 4px solid #009FBC;

    border-radius: 6px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* Hover effect */

.service-card:hover {
    transform: translateX(5px);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);

    border-left-color: #00C6F0;

    background: #ffffff;
}


/* -------------------------
   Service Icon
   ------------------------- */

.service-icon {
    width: 48px;
    height: 48px;

    min-width: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 18px;

    background: #009FBC;

    border-radius: 50%;

    font-size: 21px;
}


/* -------------------------
   Service Content
   ------------------------- */

.service-content {
    flex: 1;
}

.service-content h2 {
    margin: 0 0 8px 0;

    padding: 0;

    font-size: 20px;

    color: #333;
}

.service-content p {
    margin: 0 0 10px 0;

    padding: 0;

    font-size: 14px;

    line-height: 1.7;

    color: #555;
}


/* -------------------------
   Service Lists
   ------------------------- */

.service-content ul {
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
}

.service-content li {
    list-style: none !important;

    margin: 4px 0 !important;

    padding: 0 0 0 18px !important;

    background-image: none !important;

    font-size: 13px;

    color: #666;

    line-height: 1.5;
}


/* Custom bullet */

.service-content li::before {
    content: "•";

    position: absolute;

    margin-left: -15px;

    color: #009FBC;

    font-size: 18px;

    font-weight: bold;
}


/* -------------------------
   Collaboration Section
   ------------------------- */

.service-contact {
    margin-top: 30px;

    padding: 25px;

    text-align: center;

    background: linear-gradient(
        135deg,
        #f4f9fa,
        #ffffff
    );

    border: 1px solid #e1e1e1;

    border-radius: 7px;
}

.service-contact h2 {
    margin: 0 0 10px 0;

    padding: 0;

    font-size: 23px;

    color: #333;
}

.service-contact p {
    margin: 0 auto 18px auto;

    max-width: 550px;

    font-size: 14px;

    line-height: 1.7;

    color: #666;
}


/* -------------------------
   Get In Touch Button
   ------------------------- */

.service-button {
    display: inline-block;

    padding: 9px 20px;

    background: #009FBC;

    color: #ffffff !important;

    border-radius: 4px;

    text-decoration: none !important;

    font-size: 14px;

    font-weight: bold;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.service-button:hover {
    background: #007f96;

    color: #ffffff !important;

    transform: translateY(-2px);
}


/* -------------------------
   Responsive Design
   ------------------------- */

@media screen and (max-width: 700px) {

    .service-card {
        padding: 15px;
    }

    .service-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;

        margin-right: 12px;

        font-size: 17px;
    }

    .service-content h2 {
        font-size: 18px;
    }

    .service-content p {
        font-size: 13px;
    }

}

/* =========================================================
   BIOGRAPHY / HEADSHOT
   ========================================================= */

.bio-section {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
  margin: 0 0 40px 0;
  box-sizing: border-box;
}

.bio-photo {
  flex: 0 0 180px;
  width: 180px;
}

.bio-photo img {
  display: block;
  width: 180px;
  height: 220px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.bio-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0;
}

.bio-text p {
  margin: 0 0 15px 0;
  padding: 0;
  line-height: 1.7em;
}

#content > h1 {
  margin-top: 0;
  padding-top: 0;
}

#content > h2 {
  margin-top: 25px;
}

/* =========================================================
   RESPONSIVE MAIN LAYOUT + BIOGRAPHY
   ========================================================= */

@media screen and (max-width: 900px) {
  #site_content {
    width: 94%;
  }

  #sidebar_container {
    flex-basis: 210px;
    width: 210px;
  }

  .sidebar {
    width: 210px;
  }
}

@media screen and (max-width: 700px) {
  #site_content {
    width: 94%;
    flex-direction: column;
    gap: 25px;
  }

  #content {
    width: 100%;
  }

  #sidebar_container {
    width: 100%;
    flex: none;
    order: 2;
  }

  .sidebar {
    width: 100%;
  }

  .bio-section {
    flex-direction: column;
    gap: 18px;
  }

  .bio-photo {
    flex: none;
  }
}

/* Predictable sizing for the redesigned layout */
#site_content,
#site_content *,
.bio-section,
.bio-section * {
  box-sizing: border-box;
}