/* This is a comment */
/* This is a comment */

/* Default font size for larger screens */
body 
{ 
font-size: 16px; 
font-family: Arial, Helvetica, sans-serif; 
color: #000000; 
background: #ffffff;
max-width: 800px; /* Set a maximum width for the main content */
margin: 2% auto; /* Center the content on the page with 2% margin on the sides */
}

/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media screen and (max-width: 768px) 
{
body 
{
font-size: 14px; /* Adjust the font size for mobile screens */
margin: 2%; /* Adjust the margin for mobile screens */
}
}

p
{ 
font-size : 16px; 
margin-left : 1%; 
margin-right : 1%;  
} 

/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media screen and (max-width: 768px) 
{
p
{
font-size: 14px; /* Adjust the font size for mobile screens */
}
}

h1
{ 
padding-top : 10px;
text-align : center; 
margin-left : 1%; 
margin-right : 1%; 
font-weight : bold; 
font-size : 21px; 
font-family : "Times New Roman", Times, serif; 
color : #000000; 
}

/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media screen and (max-width: 768px) 
{
 h1 
{
font-size: 18px; /* Adjust the font size for mobile screens */
}
}

h2
{ 
padding-top : 10px;
text-align : left; 
margin-left : 1%; 
margin-right : 1%; 
font-weight : bold; 
font-size : 17px; 
font-family : Arial, Helvetica, sans-serif;
color : #000000; 
}

/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media screen and (max-width: 768px) 
{
h2 
{
font-size: 16px; /* Adjust the font size for mobile screens */
}
}

/* For bold to be right, put b tags outside link tags. { color : #000000; }  */
b 
{ 
color : #000000;
} 

a.main-link:link 
{ 
font-size : 16px;  
font-family : Arial, Helvetica, sans-serif; 
color : #2358C2; 
text-decoration : none;
} 

a.main-link:hover 
{ 
font-size : 16px;  
font-family : Arial, Helvetica, sans-serif; 
color : #2358C2; 
text-decoration : underline; 
} 

a.main-link:active 
{ 
font-size : 16px;  
font-family : Arial, Helvetica, sans-serif; 
color : #08e8de; 
text-decoration : underline; 
} 

a.main-link:visited
{ 
font-size : 16px;  
font-family : Arial, Helvetica, sans-serif; 
color : #CC0033; 
text-decoration : none;
} 

/* Styles for smaller screens */
/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media screen and (max-width: 768px)
{
a.main-link:link,
a.main-link:visited,
a.main-link:hover,
a.main-link:active 
{
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
}

.logo-table 
{ 
background : #ffffff; 
width : 100%; 
} 

/* By setting the max-width of the image to 100%, you ensure that it resizes to fit the width of its container while maintaining its aspect ratio. This should make the logo image smaller on mobile devices, allowing the Home, About, and Contact links to fit within the table without being cut off. */
/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media screen and (max-width: 768px) 
{
.logo-table 
{
  width: 100%; /* Adjust for mobile screens */
}
}

/* Clear any floats to ensure that elements below behave correctly */
.logo-table:after 
{
content: "";
display: table;
clear: both;
}

.image00 img 
{
max-width: 100%; /* Set the maximum width to 100% */
height: auto; /* Maintain the aspect ratio */
}
} /* Don't remove this extra closing bracket, or the image will disappear. */

/* Add this CSS rule to make the td take the full width of the table */
.logo-table .button
{
width: 100%;
}

.image00
{ 
text-align : left;
vertical-align : top;
} 

/* border : none removes borders around image link. Must be separate from other class values for the images. */
.image00 img
{ 
border : none;
}

/* Move the button-links-container to the right within the logo-table */
.button-links-container 
{
text-align: right;
}

a.button-link:link 
{ 
font-weight : bold; 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
color : #2358C2; 
text-decoration : none;
} 

a.button-link:hover 
{ 
font-weight : bold; 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
color : #0000FF; 
text-decoration : underline;  
} 

a.button-link:active 
{ 
font-weight : bold; 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
color : #08e8de; 
text-decoration : underline; 
} 

a.button-link:visited 
{ 
font-weight : bold; 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
color : #CC0033; 
text-decoration : none;
} 

/* Colored top line. Border-width must be greater than 0. If 1 px doesn't appear on smaller screens, use 2px. */
.top-color-bar 
{ 
text-align: center; 
background: #99cccc; 
border-style: solid; 
border-color: #33cccc; 
border-width: 2px; /* Adjust the border width for mobile screens */
width: 100%; 
height: 5px;
box-sizing: border-box; /* Add this line to include border in the width calculation so that top-color-bar is the same width as breadcrumbs-container  */
}

/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media screen and (max-width: 768px) 
{
.top-color-bar 
{
border-width: 2px; /* Adjust for mobile screens */
}
}

.breadcrumbs-container 
{
width: 100%; /* Set the width to match top-color-bar */
background-color: #f5f5f5;
padding: 5px;
margin: 0; /* Add this line to reset margin */
box-sizing: border-box; /* Add this line to include border in the width calculation so that top-color-bar is the same width as breadcrumbs-container  */
}

.breadcrumbs 
{
display: block;
}

/* Breadcrumb Link Styles */

a.breadcrumb-link:link
{ 
font-weight : normal; 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
color : #2358C2; 
text-decoration : none;
} 

a.breadcrumb-link:hover 
{ 
font-weight : normal; 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
color : #0000FF; 
text-decoration : underline;  
} 

a.breadcrumb-link:active 
{ 
font-weight : normal; 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
color : #08e8de; 
text-decoration : underline; 
} 

a.breadcrumb-link:visited
{ 
font-weight : normal; 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
color : #CC0033; 
text-decoration : none;
} 

.breadcrumbs-divider 
{
color : #000000;
margin: 0 5px;
}

.breadcrumb-current-page 
{
font-weight: normal;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none; /* Remove underline */
}

/* empty-Breadcrumb styles so that light-gray background even without breadcrumb links it it  */

.empty-breadcrumbs-container 
{
width: 100%; /* Set the width to match top-color-bar */
background-color: #f5f5f5;
padding: 5px;
margin: 0; /* Add this line to reset margin */
box-sizing: border-box; /* Add this line to include border in the width calculation so that top-color-bar is the same width as breadcrumbs-container  */
}

.empty-breadcrumbs 
{
display: block;
}

/* empty-Breadcrumb Link Styles */

a.empty-breadcrumb-link:link
{ 
font-weight : normal; 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
color : #f5f5f5; 
text-decoration : none;
} 

a.empty-breadcrumb-link:hover 
{ 
font-weight : normal; 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
color : #f5f5f5; 
text-decoration : underline;  
} 

a.empty-breadcrumb-link:active 
{ 
font-weight : normal; 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
color : #f5f5f5; 
text-decoration : underline; 
} 

a.empty-breadcrumb-link:visited
{ 
font-weight : normal; 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
color : #f5f5f5; 
text-decoration : none;
} 

.empty-breadcrumbs-divider 
{
color : #f5f5f5;
margin: 0 5px;
}

a.email-link:link 
{ 
font-size : 16px;  
font-family : Arial, Helvetica, sans-serif; 
color : #2358C2; 
text-decoration : none;
} 

a.email-link:hover 
{ 
font-size : 16px;  
font-family : Arial, Helvetica, sans-serif; 
color : #2358C2; 
text-decoration : underline; 
} 

a.email-link:active 
{ 
font-size : 16px;  
font-family : Arial, Helvetica, sans-serif; 
color : #08e8de; 
text-decoration : underline; 
} 

a.email-link:visited
{ 
font-size : 16px;  
font-family : Arial, Helvetica, sans-serif; 
color : #CC0033; 
text-decoration : none;
} 

/* Colored bottom line. Border-width must be greater than 0. If 1 px doesn't appear on smaller screens, use 2px. */
.bottom-color-bar 
{ 
text-align : center; 
background : #33cccc;
border-style : solid; 
border-color : #33cccc; 
border-width : 1px; /* Adjust the border width for mobile screens */
width : 100%; 
height : 3px; 
}

/* Colored bottom line. Border-width must be greater than 0. If 1 px doesn't appear on smaller screens, use 2px. */
/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media screen and (max-width: 768px) 
{
.bottom-color-bar 
{
border-width: 1px; /* Adjust for mobile screens */
}
}

/* bottom-nav-menu Link Styles */

/* Default font size for larger screens */
.bottom-nav-menu 
{
text-align: center;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}

a.bottom-nav-menu-link
{
font-weight: normal;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #2358C2;
text-decoration: none;
}

a.bottom-nav-menu-link:hover 
{
font-weight: normal;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #2358C2;
text-decoration: underline;
}

a.bottom-nav-menu-link:active 
{
font-weight: normal;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #08e8de;
text-decoration: underline;
}

a.bottom-nav-menu-link:visited 
{
font-weight: normal;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #CC0033;
text-decoration: none;
}

/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media screen and (max-width: 768px) 
{
.bottom-nav-menu {
font-size: 14px; /* Adjust the font size for mobile screens */
}
}

.footer-domain 
{
text-align: center;
width: 99%;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
padding-top: 12px;
}

/* Add this style to your existing stylesheet */
.indented-text 
{
display: block;
margin-left: 2%; /* Adjust the left margin as needed */
margin-right: 2%; /* Adjust the right margin as needed */
}

/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media screen and (max-width: 768px) 
{
.indented-text 
{
margin-left: 2%; /* Adjust the left margin for mobile screens */
margin-right: 2%; /* Adjust the right margin for mobile screens */
}
}