<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

/* next rule used with 2nd batch of Fall2007 and batch win2008 */
#zWrap {
  overflow: inherit;
}

/* bug #1548132 */
#zWrap dl.module_bd_container dd {
  margin: 0.2em 0 2em 5%;
  width: 95%;
}

#zWrap dl.module_bd_container dl dd {
  margin: 0 0 1.33em 1.33em; /* Assuming 16px base font size */
  width: auto;
}

/* bug #1532833 */
#hd:after,
#ft:after {
  content: "";
  display: table;
  clear: both;
}

#body,
#hd,
#pageName,
#zA,
#zB,
#zC,
#ft {
  /* Remove zoom property */
}

/* bug #1550640 */
/* On a template basis, make sure to check that this element has a width but no height (min-height is OK) */
#pageName {
  overflow: hidden;
  _overflow: visible;
  _overflow-x: hidden;
}

/************************************
Theme: Coda - Derived From: Arbor
************************************/
/* START -> DO NOT EDIT THIS SECTION */
/* MIN-HEIGHT FOR THEME ELEMENTS (555px before #ft) */
#bd {
  min-height: 27.19em; /* Assuming 16px base font size */
}

#hd {
  min-height: 2.81em; /* Assuming 16px base font size */
}

#ft {
  min-height: 4.38em; /* Assuming 16px base font size */
}

/* STRUCTURE -------- */
#doc {
  position: relative;
  max-width: 800px; /* Set a maximum width for larger screens */
  margin: 0 auto;
}

#hd {
  float: left;
  width: 100%; /* Changed to 100% for full width header */
  height: 220px;
  overflow: hidden;
}

#hContent {
  width: 100%; /* Changed to 100% for full width content */
  height: 220px;
  overflow: hidden;
  margin: 2.5em 0 8.13em 0; /* Adjusted margins for responsiveness */
}

#hMisc {
  display: none !important;
}

#navigation {
  float: right; /* Keep the navigation floated to the right */
  width:auto; /* Allow the navigation to adjust its width based on content */
  margin: 0 0.94em 0 em; /* Adjust margins as needed */
  display:inline-flex;/* Use inline-block for better layout control */
}

ul#mainNav a {
  /* ... other styles ... */
}

#bd {
  float: left;
  width: calc(100% - 300px); /* Content width based on remaining space */
  margin-left: 1.25em;
  margin-right: 0.1em;
  display: block; /* Change to block to ensure it takes up the full width */
  position: relative;
  z-index: 2;
}

#pageName {
  width: 179px;
  margin: -0.06em 0 1.88em 0;
  position: relative;
  z-index: 2;
}

#pageNameContent {
  padding: 1.25em 0.63em 0.44em 0.63em;
}

#ft {
  padding: 8.5em 1.56em 0em 3.75em;
}

#fContent {
  width: 100%; /* Changed to 100% for full width footer content */
  overflow: hidden;
}

/* styling fMisc horizontally */
#fMisc {
  overflow: hidden;
  *overflow: visible;
  overflow-x: hidden;
  width: 710px;
  margin-top: 0.94em;
}

/* "display:none" would not let the containers wrap in FF, but "float" does not work in IE */
#fMisc br {
  float: left;
  *display: none;
}

/* to hide the first bullet */
p.vcard {
  text-indent: -0.63em;
}

/* elements with bullets */
p.vcard .org,
p.vcard .adr,
p.vcard .tel,
p.vcard .mailtoWrapper {
  position: relative;
  padding-left: 0.63em;
  background: url(http://us.i1.yimg.com/us.yimg.com/lib/smb/assets/hosting/yss/themes/coda/mozart/images/en-us/bullet_1.2.gif) 0 50% no-repeat;
}

p.vcard .org,
p.vcard .street-address,
p.vcard .extended-address,
p.vcard .locality,
p.vcard .postal-code,
p.vcard .country-name,
p.vcard .tel {
  padding-right: 5px;
}

p.vcard .separator {
  margin-left: -0.38em;
}

/* padding is to compensate text-indent */
p.vcard .mailtoWrapper {
  display: block;
  background: none;
}

/* elements that should not wrap */
p.vcard .adr,
p.vcard .country-name,
p.vcard .tel,
p.vcard .mailtoWrapper {
  white-space: nowrap;
}

/* FIXES -------------- */
#hd {
  *float: none;
}

#mainNav li {
  background: none;
}


/* START -> CUSTOMIZATION SECTION */
/* TYPOGRAPHY --------- */

/* User-Editable Body */

#body {
  font-family: 'Roboto'; /* Change to Roboto */
  font-size: 1em;
  color: #000000;
}

/* Header Content */

#hd {
  color: #d2ccbb;
}

/* H1 Site Title */

#body h1 {
  font-family: "Roboto"; /* Change to Montserrat */
  font-size: 1.88em;
  font-weight: normal;
}
/* H2 Page Title */

#body h2 {
  font-family: "Roboto"; /* Change to Montserrat */
  font-size: 1.06em;
  text-transform: uppercase;
  font-weight: bold;
}

/* H3 Paragraph Title */

#body h3 {
  font-size: 1.13em;
  font-weight: normal;
  color: #813925;
}

/* H4 Paragraph Subtitle */

#body h4 {
  font-weight: bold;
  font-size: 1em;
}

/* Page Name */

#pageName {
  color: #ffffff;
  text-align: center;
}

/* Footer Content */

#ft {
  color: #dac3bd;
  font-size: 0.69em;
  font-family: 'Roboto';
}

#fContent {
  color: #441524;
}

/* ... rest of your code ... */
/* LINKS --------- */

#body a:link,
#body a:visited {
  color: #004a80;
}

#body a:hover,
#body a:focus,
#body a:active {
  text-decoration: none;
}

#hd a:link,
#hd a:visited {
  color: #d2ccbb;
  text-decoration: none;
}

#ft a:link,
#ft a:visited {
  color: #dac3bd;
}

#pageName a:link,
#pageName a:visited {
  color: #ffffff;
}

/* mainNav */

ul#mainNav li a:link,
ul#mainNav li a:visited {
  font-size: 19px;
  color: #813925;
}

/* BACKGROUNDS --------- */

html {
  /* Remove _background: none !important; */
}

		body {
			background-attachment: fixed;
			background-image: url(http://www.thelordofthestrings.com/yahoo_site_admin/body_1.2.jpg);
		}

		#doc {
			background-image: url(http://www.thelordofthestrings.com/yahoo_site_admin/doc_1_2.jpg);
			background-repeat: repeat-y;
		}

		#hd {
			background-color: #000000;
			background-image: url(http://www.thelordofthestrings.com/images/newwebhead.jpg);
			background-repeat: no-repeat;
			background-position: 0 0;
			background-size: 100% 100%;
		}

		#pageName {
			background-color: #934f3d;
			background-image: url(http://www.thelordofthestrings.com/yahoo_site_admin/pagename_1_2.jpg);
			background-repeat: no-repeat;
			background-position: 0 100%;
		}

		ul#mainNav li.active a:link,
		ul#mainNav li.active a:visited,
		ul#mainNav li a:hover,
		ul#mainNav li a:active,
		ul#mainNav li a:focus {
            background-image: url(http://www.thelordofthestrings.com/yahoo_site_admin/mainnava_1_2.jpg);
			background-repeat: no-repeat;
			background-position: 0 2.5px; 
			padding-left: 15px;
				
        }

		#ft {
			background-color: #934e3e;
			background-image: url(http://www.thelordofthestrings.com/yahoo_site_admin/ft_1_2.jpg);
			background-repeat: no-repeat;
		}

/* BORDERS --------- */

        #zWrap h3 {
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: #c4b695;
		}

		#zB	#mapZone {
			border-width: 1px;
			border-style: solid;
			border-color: #c4b695;
			_border-width: 0;
		}

		#zB #mapContainer {
			_border-width: 1px;
			_border-style: solid;
			_border-color: #c4b695;
		}

/* END -> EDITABLE */
/* ... existing code ... */

/* Media Queries for Responsive Design */

/* Target screens wider than 768px (desktops) */
@media (min-width: 768px) {

  /* Adjust #hd width for full-width header on larger screens */
  #hd {
    width: 100%;
  }

  /* Adjust #content width based on remaining space */
  #bd {
    width: calc(100% - 220px); /* Maintain content area size */
  }

  /* Remove margins from #hContent for a cleaner layout */
  #hContent {
    margin: 0;
  }

  /* Other styles specific to larger screens */
  /* ... */
}

}