/* Ash Latif.com  - global styles  - albase.css   le: 01-09-2018  
--------------------------------------------------- */
/* dev only */

/* Default style for larger screens (optional) */
img.al-logo.img-fluid.al-img-max-ex {
    margin-top: 0;
}

/* Mobile and tablet styles */
@media (max-width: 768px) {
    img.al-logo.img-fluid.al-img-max-ex {
        margin-top: -25px;
    }
}

.al-curve {
  border: 2px solid #9A9B9C !important; /* Lighter grey border */
  border-radius: 10px; /* 5px rounded corners */
  width: 100px; /* Restrict image size to 100px wide */
  height: auto; /* Maintain aspect ratio of the image */
}



/* General styles for html and body */
html, body {
  height: 100%;
  margin: 0;
}

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

/* Body styles */
body {
background: url('https://www.ashlatif.com/panes/bgmain.gif') repeat-x left 15px;
    background-position: left 15px;
    background-size: auto;
    color: #555;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    font-size: 1rem;
    min-height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
}

/* Background logo watermark, centered and pale */
body::after {
	content: "";
	position: fixed;
	top: -1em;
	left: 50%;
	transform: translateX(-50%);
	width: 800px;
	height: 600px;
	background-image: url('https://www.ashlatif.com/assets/bkgnd/logo-large.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	opacity: 0.5;
	pointer-events: none;
	z-index: -1;
}

body#inspire::after {
	content: none !important;
}

/* Main content styling */
main {
  flex: 1 0 auto; /* Takes up remaining space */
}

div#wrap, div.wrap {
	text-align:justify;
}

div.wrap {
	text-align:justify;
	height:10em !important;
	float:left !important;
	width: 470px;
}

div.wrap-thin, div.wrap-thin {
	float:left;
	height: 8em;
}

@media (max-width: 767.98px) {
  .navbar-toggler {
    margin-top: 2px; /* adjust this value to your liking */
  }
}

@media (max-width: 767.98px) {
  .nav-link {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* header adjustment */
a.navbar-brand {
    max-width: 260px;
    height: auto;
    display: block;
    margin-top: -6px;
}

/* Base nav adjustment */
nav.navbar {
  position: relative;
  top: -4px !important; /* default */
}

/* Default style for larger screens (optional) */
.navbar-toggler {
    margin-left: auto;
    margin-top: 0; /* Adjust this as needed */
}

/* Mobile and tablet styles */
@media (max-width: 768px) {
    .navbar-toggler {
        margin-left: auto;
        margin-top: -15px;
    }
}


/* Base positioning for all browsers */
.nav-wrapper {
  position: relative;
  margin-top: 6px; /* fallback */
}

/* Chrome-specific nudge */
body.chrome-browser .nav-wrapper {
  margin-top: 5px;
}

/* Edge-specific nudge */
body.edge-browser .nav-wrapper {
  margin-top: 2px !important;
}

/* Optional: Safari/Fx or mobile overrides if needed */


/* hamburger */
.navbar-toggler {
  padding: 0.25rem 0.5rem; /* Smaller padding */
  font-size: 0.85rem;       /* Smaller overall size */
  line-height: 1;
  
  background-color: #ffffff; /* Solid white background */
  
  border: 1.5px solid rgba(51, 102, 153, 0.5) !important; /* Thin blue border at 50% opacity */
  border-radius: 0.25rem; /* Optional: keep rounded edges */
  outline: none;
  box-shadow: none;
}

.navbar-toggler-icon {
  background-size: 80% 80%;
  width: 1.2em;
  height: 1.2em;
}

/* Footer styles */
footer.footer {
  background-color: #f0f0f0; /* Light grey */
  flex-shrink: 0;
  padding: 1rem 0;
}

.footer_inside {
  font-size: 0.9rem;
}

/* Highlighter styles */
#highlighter {
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
  padding: 1rem;
  word-break: break-word;
  word-wrap: break-word;
}

/* Everest div positioning */
#everest {
  background-color: #f9f9f9;
  border: 2px solid #ccc;
  border-radius: 8px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  cursor: move;
  font-family: Arial, sans-serif;
  opacity: 0.75; 
  position: fixed;
  top: 20%; /* 20% down from the top of the screen */
  left: 80%; /* Center horizontally */
  transform: translateX(-50%); /* Adjust for exact center alignment */
  padding: 4px;
  width: 360px;
  z-index: 9999;
  transition: none;
}

@media (max-width: 768px) {
  #everest {
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
  }
}

#everest p, 
#everest span {
  line-height: 0.5; /* Adjust the value as needed */
}

/* Centering content and adding border with two lines */
h4.head {
  color: #99CD00;
  text-align: center; /* Centers content inside the div */
  border-top: 3px double #99CD00; /* Creates a double top border */
  border-bottom: 3px double #99CD00; /* Creates a double bottom border */
  padding: 20px; /* Adds padding around the content */
  margin: 20px 0; /* Adds space above and below the div */
}

/* To keep images unaffected by line-height */
#everest img {
  vertical-align: middle; /* Ensures images align properly with text */
}

h4:after {
  content: "✥"; /* Insert the ✥ symbol after the text */
  font-size: 18px; /* Adjust the size of the symbol */
  margin-left: 12px; /* Adds space between the title and the symbol */
  vertical-align: middle; /* Align the symbol vertically with the text */
}

/* Mobile styles for highlighter */
@media (max-width: 576px) {
  #highlighter {
    font-size: 0.9rem;
    max-width: 95vw;
    padding: 0.5rem;
  }

  .img-max {
    max-width: 240px;
  }
}

/* Mobile-specific logo size */

/* Medium mobile devices (up to 768px) */
@media (max-width: 768px) {
  .al-logo {
    max-width: 280px !important; /* Slightly smaller for tablets/small laptops */
  }
}

/* Small mobile devices (up to 576px) */
@media (max-width: 576px) {
  .al-logo {
    max-width: 240px !important; /* Smaller logo for phones */
    margin-top: -6px;
  }
}

.al-logo {
  margin-top: 4px;
  max-width: 280px; /* base size */
  height: auto;
  transition: transform 0.3s ease; /* smooth scaling */
}

.al-logo:hover {
  transform: scale(1.1); /* increase size by 10% */
}


/* General mobile layout (≤ 768px) */
@media (max-width: 768px) {
  .nav-wrapper {
    padding-top: 0.65rem;
    text-align: center;
  }
}

/* Small mobile devices (≤ 576px) */
@media (max-width: 576px) {
  .nav-wrapper {
    padding-top: 0.55rem;
    flex-direction: column; /* Stack logo and nav vertically if using flex */
    align-items: center;
  }
}



/* Change the inactive nav links' text color to white */
.nav-link {
    color: white !important; /* Make all inactive links white */
}

/* Mobile and tablet screens */
@media (max-width: 991px) {  /* Adjust breakpoint as needed */
  .nav-link {
    color: #006699 !important; /* Your site blue */
  }
}

/* Active nav link */
.nav-link.active {
    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth color transition with easing */
    color: #0d6efd !important; /* Blue for active link */
}

/* Hover effect on inactive links */
.nav-link:hover {
    color: #0d6efd !important; /* Change to blue on hover */
    background-color: rgba(13, 110, 253, 0.1); /* Optional light background highlight */
    border-radius: 0.25rem; /* Optional rounded corners on hover */
}


/* Subtle active background + text color for nav link */
.nav-link.active {
  background-color: #e3f2fd; /* Light complementary blue */
  border-radius: 0.25rem;
  color: #006699 !important; /* Al blue */
}

/* Hover effect for nav links */
.nav-link:hover {
  background-color: #f8f9fa; /* Very light grey */
  border-radius: 0.25rem;
  color: #006699;
}

/* Navbar wrapper positioning */
.navbar-wrapper {
  position: relative;
  z-index: 1050; /* Ensure navbar is on top */
}

.navbar-wrapper {
  padding-top: 15px; /* Padding for desktop and tablet */
}

.navbar-wrapper .navbar.fixed-top {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1050;
}

/* Mobile-specific navbar adjustments */
@media (max-width: 767px) {
  .navbar-wrapper {
    margin-top: -10px; /* Adjust the margin-top for smaller devices */
  }

  .navbar-wrapper .navbar {
    padding-top: 15px; /* Padding for mobile */
  }

  /* Adjust logo space for mobile screens */
  .navbar-wrapper .navbar-brand {
    margin-top: 5px;
  }
}

/* For very small mobile devices (like phones in portrait mode) */
@media (max-width: 480px) {
  .navbar-wrapper {
    margin-top: -5px; /* Minimal margin for very small devices */
  }

  .navbar-wrapper .navbar {
    padding-top: 20px; /* More padding for very small screens */
  }
}

.notused {
  background: url(../panes/bgmain.gif) repeat-x;
  background-position: left 15px;
  background-size: auto;
  background-attachment: fixed;
  min-height: 100vh;
}


/* Basic link and list reset */
a:link, a:visited { 
	text-decoration: none;
	color: inherit; /* keep color consistent */
}

ul, ol {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

/* Reset margin and padding for common elements */
h1, h2, h3, h4, h5, h6, pre, code, form, body, html, p, blockquote, fieldset, input {
	margin: 0;
	padding: 0;
	font-size: 1em; /* normalize headings */
}

/* Remove blue border on linked images */
a img, a:link img, a:visited img { 
	border: none; 
}

/* De-italicize addresses */
address { 
	font-style: normal; 
}


/* Wrapper for flex layout */
.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin-top: 14.5px !important;
	margin-bottom: 1em !important;
}

/* Container grows to fill available space */
#container {
	flex: 1 0 auto;
	padding: 20px;
	margin: 0 auto;
	width: 800px;
	min-width: 50%;
	position: relative;
	text-align: left;
}

/* Content styling */
div#content {
	letter-spacing: -1px;
	line-height: 1.75;
	height: 100%;
	margin: 0 220px 0 20px;
	width: 556px;
}

#content h1 {
	font-size: 150%;
	font-weight: 600;
	padding: 1em 0 0 0;
}

#content h2 {
	color: #9999ff;
	font-size: 115%;
	text-align: right;
}

p {
	margin-bottom: 0;
}

p + p {
	text-indent: 0.5em;
	margin-top: 0;
}

#content p {
	padding-bottom: 8px;
}

/* Push utility */
.push {
	height: 1em !important;
}


/* General Link Styling */
a {
    color: #9C0; /* Inactive link color */
    text-decoration: none;
    transition: color 0.3s ease; /* Smooth color transition */
}

a:hover {
    color: #555; /* Hover color */
    text-decoration: none;
}

/* Header Styling */
h1, h2, h3, h4, h5, h6 {
    color: #336699; /* Header color */
    font-weight: 400;
    margin: 0;
    padding: 0;
}

h1 {
    color: #336699 !important;
    font-size: 2.5em !important;
    line-height: 1.8em;
}

h2 {
    font-size: 2.1em;
    line-height: 1.8em;
}

/* Paragraph Styling */
p {
    color: #333; /* Text color */
    font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
    font-size: 1.6em;
    line-height: 1.6em;
    margin: 10px 0 20px 0;
}

p.body {
    color: #336699; /* Body text color */
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0.5em 0 1.2em;
    margin-top: 0.3em;
}

p.body-quote {
    font-size: 1rem;
    color: #333;
    padding: 0.5em 0 0.7em;
    margin-top: 0.3em;
    font-style: italic;
}

p.inline-cite {
    display: inline;
    font-size: 0.95rem;
    color: #006699;
}

p.large {
    font-size: 1.15rem;
    color: #777;
    padding: 0.2em 0 0.2em;
    margin-top: 0.3em;
}

p.head {
    border-bottom: 3px double #CCC;
    border-top: 3px double #CCC;
    color: #006699;
    font-size: 1.3rem !important;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    letter-spacing: 10px;
    text-align: center;
}

p.small {
    color: #356;
    font-size: 0.85rem;
    line-height: 2.5em;
}

p.just {
    text-align: justify;
}

p.smalljust {
    font-size: 0.6rem;
    color: #CCC;
    text-align: justify;
}

p.medjust {
    font-size: 1.2rem !important;
    text-align: justify;
}

/* Image Styling */
.img-fixed {
    max-width: 100%;
    min-width: 120px;
    height: auto;
    display: block;
}

img.float {
    display: block;
    left: 5em;
    position: absolute;
    top: 0.24em;
}


/* Link Styles */
a {
    color: #006699; /* Link color */
    text-decoration: none;
    transition: color 0.3s ease; /* Smooth color transition */
}

a:hover {
    color: #555; /* Hover color */
    text-decoration: none;
}

/* Body Quote Styling */
li.body-quote {
    font-size: 1.2em;
    color: #555; /* Body quote color */
    padding: 0.2em 0;
    margin-top: 0.3em;
}

/* Inline Cite Styling */
li.inline-cite, li.inline-cite-short, li.inline-cite-med {
    color: #006699; /* Inline citation color */
    font-weight: 600;
    font-size: 1.4em;
}

li.inline-cite {
    border-right: 2px dotted #066; /* Border for inline cite */
    padding-left: 3px;
    padding-right: 7px;
}

li.inline-cite-short,
li.inline-cite-med {
    border-right: 1px dotted #066;
    padding-left: 3px;
    padding-right: 7px;
    font-size: 1.0em;
}

li.last {
    padding-left: 3px;
    padding-right: 3px;
    border-right: 0;
}

/* Blockquote Styles */

/* Wrapper and Layout Styles */
div.wrap, div.wrap-thin {
    text-align: justify;
    float: left;
}

div.wrap {
    width: 470px;
}

div.wrap-thin {
    width: 385px;
}

/* Image Styling */
.img-consistent {
    min-width: 160px;
    max-width: 100%;
    height: auto;
    float: right;
    margin-top: 1.5rem;
    margin-left: 1rem;
}

/* About Image Wrapper */
.about-img-wrapper .decor-flourish {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 40px;
    height: 40px;
    background: url('/assets/svg/flourish.svg') no-repeat center center;
    background-size: contain;
    opacity: 0.5;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.1));
}

/* Quote Styles */
body q {
    quotes: "“" "”" "‘" "’";
    font-style: italic;
    color: #666;
}

/* Lead Text */
.lead {
    font-size: 1.25rem;
    line-height: 1.6;
    font-weight: 700;
}

/* Responsive Image */
@media (max-width: 576px) {
    #navlist li img,
    #footer_inside img,
    .gallery img,
    .thumbs img {
        max-width: 90%;
        height: auto;
    }
}

/* quotes on the Insp page */
#highlighter {
  position: relative; /* or absolute if needed for layout */
  background-color: #f9f9f9;
  width: 100%;
  max-width: 680px;
  padding: 1.5rem;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 auto;
}

#highlighter .quote {
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

#highlighter .author {
  text-align: right;
  font-size: 0.95rem;
  color: #336699;
}

/* Mobile adjustments */
@media (max-width: 576px) {
  #highlighter {
    padding: 2rem 1rem;
    font-size: 1.05rem;
    line-height: 1.6;
  }

  #highlighter .quote {
    font-size: 1.1rem;
  }

  #highlighter .author {
    font-size: 1rem;
  }
}

.dropcap-quote::first-letter {
  float: left;
  font-size: 3.2rem;
  font-weight: bold;
  font-family: Georgia, serif;
  line-height: 1;
  margin-right: 0;            /* remove default spacing */
  padding-right: 0.05em!important;      /* add minimal space to avoid overlap */
  padding-top: 0.05em;
  display: block;
}

.dropcap-quote {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.4;
  overflow: hidden;
  text-indent: 0;             /* prevent indent from shifting line */
}


/* inspiration page ticker */

  .quote-box {
    border-left: 4px solid #007bff;
    padding-left: 1rem;
    text-align: left;
    margin-bottom: 0.5rem;
    width: 100%;
  }

  .quote, .author {
    display: block;
    width: 100%;
    white-space: normal;
    word-wrap: break-word;
  }

  .quote {
    font-size: 1.1rem;
    font-style: italic;
    color: #333;
    width: 100%;
    background:#FFF;
  }
  
  /* Default quote box styles */
.quote-box {
  height: 150px; /* example default height */
  font-size: 18px; /* example default font size */
  padding: 10px;
  /* other styles */
}

/* Mobile fix */
@media (max-width: 600px) {
  .quote-box {
    height: 300px; /* taller box */
    font-size: 14px; /* smaller font */
  }
}

#highlighterbg, #highlighter {
  width: 100%;
  box-sizing: border-box;
  white-space: normal; /* so text wraps properly */
}

#scroller, #scroller > div, #highlighter, #highlighterbg {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100%;
}

#scroller {
    border-left:5px solid #555;
}

#highlighterbg .quote, #highlighter .quote,
#highlighterbg .author, #highlighter .author {
  width: 100%;
  margin: 0;
  padding: 0;
  white-space: normal;
}

/* 
#highlighter {
  border: 1px solid red;
}
#highlighterbg {
  border: 1px solid blue;
}
*/

  .author {
    font-size: 0.9rem;
    color: #555;
  }

  .author a {
    text-decoration: none;
    color: #555;
    color: inherit;
    background: transparent !important;
  }
  
 li.inline-cite {
	border-right: 2px dotted #066;
	color:#006699;	
	font-size: 1.4em;
	font-weight:600;
	display: block;
	padding-left: 3px;
	padding-right: 7px;
	position:relative;
	text-align:right;
	width:35em;
}
  
li.inline-cite-short {
	position:relative;
	display: block;
	padding-left: 3px;
	padding-right: 7px;
	width:25em;
	text-align:right;
	border-right: 1px dotted #066;
	font-size: 1.0em; color:#006699;
	font-weight:600;
}

li.inline-cite-med {
	position:relative;
	display: block;
	padding-left: 3px;
	padding-right: 7px;
	width:35em;
	text-align:right;
	border-right: 1px dotted #066;
	font-size: 1.0em; color:#006699;
	font-weight:600;
}
  
li.last {
	display: inline;
	padding-left: 3px;
	padding-right: 3px;
	border-right: 0px;
} 

li.body-quote {
	border:0;
	font-size: 1.2em; color:#555; 
	padding:0.2em 0 0.2em;
	margin-top:0.3em;
}

/* blockquotes
---------------------------------------------------	*/
/* Blockquote */
blockquote {
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-size: 1em !important;
  line-height: 1.6em;
  margin-bottom: 1em !important;
  text-indent: -8px;
  display: block;
}

/* First letter baseline alignment */
blockquote:first-letter {
  background: url(/assets/png/quotetop.png) no-repeat left top;
  padding-left: 1.1em;

  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 2.4em;

  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
  margin-right: 0.2em;
  position: relative;
  top: 0.1em; /* fine-tune */
}

/* Blockquote author footer - cite */
.blockquote-footer {
  margin-top: 40px;      /* Ensure spacing below quote */
  text-align: right;     /* Align right */
  font-style: italic;
  color: #99CC00;
}

/* eqiv for the JS scroller */

.quote-container,
#highlighter,
#highlighterbg {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

div#scroller {
    border-left: 5px solid #6C757D !important;
}

#scroller,
#scroller > div,
#scroller > span,
#scroller .author {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

.author {
  text-align: right !important;
}

.author a {
  display: inline-block;
  width: 100%;
  text-align: right;
}

.author {
  margin-top: 40px;
  font-size: 1.05em;
  max-width: 40%;
  padding-right: 0;
  margin-left: auto;  /* push container to right */
  text-align: right;
  display: block;
  /* Also add word-break if you want: */
  word-break: break-word;
}


/* Make the anchor inline-block to help with the pseudo-element */
.author a {
  color: #99CC00;             /* Green */
  text-decoration: none;
  font-style: italic;
  font-weight: 600;
  display: inline-block;      /* needed for ::before */
  position: relative;         /* positioning context */
}

/* Prepend " - " before the author's name */
.author a::before {
  content: " - ";
  position: relative;
  left: 0;
}

/* Hover/focus underline */
.author a:hover,
.author a:focus {
  text-decoration: underline;
}

/* Responsive font sizes & spacing as before (right aligned remains) */

/* Mobile portrait */
@media (max-width: 480px) and (orientation: portrait) {
  .author {
    margin-top: 24px;
    font-size: 0.9em;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: right;        /* keep right aligned */
  }
  .author a {
    font-size: 0.9em;
  }
}

/* Mobile landscape */
@media (max-width: 767px) and (orientation: landscape) {
  .author {
    margin-top: 28px;
    font-size: 0.95em;
    padding-right: 1.5rem;
    text-align: right;
  }
  .author a {
    font-size: 0.95em;
  }
}

/* Tablet portrait */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
  .author {
    margin-top: 36px;
    font-size: 1em;
    padding-right: 2rem;
    text-align: right;
  }
  .author a {
    font-size: 1em;
  }
}

/* Tablet/desktop landscape */
@media (min-width: 992px) {
  .author {
    margin-top: 40px;
    font-size: 1.05em;
    max-width: 40%;
    margin-left: auto;
    padding-right: 0;
    text-align: right;
  }
  .author a {
    font-size: 1.05em;
  }
}

/* /end */


div.wrap div#id4 {
    padding: 0 0 0 1.8em;
    background: transparent url(/png/quotebot.png) 44.5em bottom no-repeat;
    max-width: 50em;
    margin-bottom: 1.5em;
}

div.wrap div#id4 blockquote cite {
    left: auto;
    float: right;
}

div.wrap div#id5 {
    padding: 0 1em 1em 1.8em;
    background: transparent url(/png/quotebot.png) 4.5em bottom no-repeat;
    margin-bottom: 1.5em;
}

div.wrap div#id5 blockquote cite {
    left: auto;
    float: right;
}

div.wrap div#id6 {
    padding: 1em 1em 0.5em 1.8em;
    background: transparent url(/png/quotebot.png) 46.5em 1.0em no-repeat;
    max-width: 50em;
    margin-bottom: 1.5em;
}

div.wrap div#id6 blockquote cite {
    left: auto;
    float: right;
    line-height: 1.2;
}

div.wrap-thin div#id7 {
    padding: 1em 0 0 1.8em;
    background: transparent url(/png/quotebot.png) no-repeat;
    border: 1px solid #FFF !important;
    width: 385px;
    margin-left: 3em;
    margin-bottom: 1.5em;
}

div.wrap-thin div#id7 blockquote {
    display: block;
    width: 245px;
    margin-left: 1em;
}

div.wrap-thin div#id7 blockquote cite {
    left: auto !important;
    float: right;
    margin-top: -2em;
}

.img-consistent {
  min-width: 160px;
  max-width: 100%;
  height: auto;
  float: right;
  margin-top: 1.5rem;
  margin-left: 1rem;
}

/* custom flourish */

.about-img-wrapper {
  position: relative;
  display: inline-block;
}

.about-img-wrapper .decor-flourish {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 40px;
  height: 40px;
  background: url('/assets/svg/flourish.svg') no-repeat center center;
  background-size: contain;
  pointer-events: none;
  opacity: 0.5;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.1));
}

.lead {
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 700;
}

body q {
  quotes: "“" "”" "‘" "’";
  font-style: italic;
  color: #666;
}

@media (max-width: 576px) {
  #navlist li img,
  #footer_inside img,
  .gallery img,
  .thumbs img {
    max-width: 90% !important;
    height: auto !important;
  }
}

/* post comments
---------------------------------------------------	*/
p.date {
	color: #999;
	background: #FFF;
	text-align: right;
	font-size: 1.1em;
	text-decoration: none;
	text-transform: lowercase;
	margin: 0.3em 0.1em;
	padding: 0.1em 0 0;
}
	
div#content p.date a {
	color: #999;
}
	
div#content p.date a:hover {
	border: none;
	color:#CC0000;
	text-decoration: underline;
}
	
.time {
	color: #192D50;
	float: left;
	text-align: left;
	padding: 5px 0 0 15px;
}

/* Contact Navigation 
---------------------------------------------------	*/
#header_contact {
	display: block;
	float:right;
	height:100px;
	left:590px;
	list-style:none;
	position:relative;
	top:120px;
	width:10px;
}

#header_contact ul#navlist2 {
	float:right;
	height:100px;
	list-style:none;
	width:350px;
}

ul#navlist li, ul#navlist li * {
	font-size: 16px !important;
}

ul#navlist2 li {
	width:150px;
}

ul#navlist2 li a {
	color:#777 !important;
	display:block;
	font-size: 130%;
	height:25px;
	width:250px;
}

ul#navlist2 li a span {
	color:#777 !important;
	display:inline;
	height:25px;
	width:150px;
	cursor:pointer;
}

  /* new */
  
  /* Shared footer font and layout styles */
#footer {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
}

.small-footer-text {
  font-size: 0.95rem;
  color: #333;
}

#footer a {
  color: #333;
  font-weight: 500;
}

#footer a:hover {
  text-decoration: underline;
}

/* Clock styling */
.footer-clock {
  font-size: 1.0rem;
  font-weight: 500;
  font-family: 'Segoe UI Mono', monospace;
  line-height: 1.3;
}

/* Mobile adjustments */
@media (max-width: 576px) {
  .footer-clock {
    font-size: 0.7rem;
  }

  .small-footer-text {
    font-size: 0.9rem;
  }
}