/* CSS Custom Properties layout setup */
:root {
  --width-main: 900px;
  --width-nav: 200px;
  --width-content: 440px;
  --width-subcontent: 185px;
  
  /* Colors */
  --color-white: rgb(255, 255, 255);
  --color-gray-light: rgb(240, 240, 240);
  --color-gray-medium: rgb(230, 230, 230);
  --color-gray-dark: rgb(225, 225, 225);
  --color-gray-border: rgb(150, 150, 150);
  --color-text: rgb(125, 125, 125);
  --color-text-hover: rgb(50, 50, 50);
  --color-link: rgb(70, 122, 167);
  --color-link-hover: rgb(42, 90, 138);
  --color-site-message: rgb(234, 239, 247);
  
  /* Box Colors */
  --box-border: rgb(190, 190, 190);
  --box-bg: rgb(235, 235, 235);
  --box-green-border: rgb(160, 214, 81);
  --box-green-bg: rgb(217, 239, 185);
  --box-blue-border: rgb(137, 170, 214);
  --box-blue-bg: rgb(213, 225, 240);
  --box-orange-border: rgb(232, 177, 13);
  --box-orange-bg: rgb(248, 224, 150);
  
  /* Fonts */
  --font-primary: "trebuchet ms", arial, sans-serif;
  --font-secondary: verdana, arial, sans-serif;
}

/* Reset */
* {
  padding: 0;
  margin: 0;
}

/* Base Styles */
body {
  font-size: 62.5%;
  background-color: var(--color-white);
  font-family: var(--font-secondary);
}

/* Layout Container */
.page-container {
  width: var(--width-main);
  margin: 10px auto;
  border: 1px solid var(--color-gray-border);
  font-size: 1em;
}

/* Main Layout */
.main {
  clear: both;
  width: var(--width-main);
  padding-bottom: 30px;
  background: transparent url(../img/bg_main_withnav.jpg) top left repeat-y;
}

/* Three Column Layout */
.main-navigation {
  display: inline;
  float: left;
  width: var(--width-nav);
  overflow: visible;
}

.main-content {
  display: inline;
  float: left;
  width: var(--width-content);
  margin: 0 0 0 30px;
  overflow: visible;
}

.main-subcontent {
  display: inline;
  float: right;
  width: var(--width-subcontent);
  margin: 0 15px 0 0;
  overflow: visible;
}

/* Header Section */
.header {
  width: var(--width-main);
  font-family: var(--font-primary);
}

.header-top {
  width: var(--width-main);
  height: 80px;
  background: var(--color-gray-light) url(../img/bg_head_top.jpg);
  overflow: visible;
}

.header-middle {
  width: var(--width-main);
  height: 150px;
  background: var(--color-gray-medium) url(../img/bg_head_middle.jpg);
  overflow: visible;
}

.header-bottom {
  width: var(--width-main);
}

.header-breadcrumbs {
  clear: both;
  width: var(--width-main);
  padding: 1em 0 1.5em 0;
  background: var(--color-white) url(../img/bg_head_breadcrumbs.jpg) repeat-y;
}

/* Site Logo and Name */
.sitelogo {
  width: 60px;
  height: 47px;
  position: absolute;
  z-index: 1;
  background: url(../img/bg_head_top_logo.jpg);
  background-image: url(../img/bg_head_top_logo.gif);
  margin: 22px 0 0 20px;
  top: 14px;
}

.sitename {
  width: 350px;
  height: 45px;
  position: absolute;
  z-index: 1;
  overflow: visible;
  margin: 20px 0 0 90px;
  top: 15px;
}

.sitename h1 {
  font-size: 240%;
}

.sitename h2 {
  margin: -4px 0 0 0;
  color: var(--color-text);
  font-size: 120%;
}

.sitename a {
  text-decoration: none;
  color: #000000;
}

.sitename a:hover {
  text-decoration: none;
  color: var(--color-text-hover);
}

/* Navigation Level 0 */
.nav0 {
  width: 350px;
  position: absolute;
  z-index: 2;
  margin: 25px 0 0 0;
  margin-left: 550px;
}

.nav0 ul {
  float: right;
  padding: 0 20px 0 0;
}

.nav0 li {
  display: inline;
  list-style: none;
}

.nav0 li a {
  padding: 0 0 0 3px;
}

.nav0 a:hover {
  text-decoration: none;
}

.nav0 a img {
  height: 14px;
  border: none;
}

/* Navigation Level 1 */
.nav1 {
  width: 350px;
  position: absolute;
  z-index: 3;
  margin: 45px 0 0 550px;
}

.nav1 ul {
  float: right;
  padding: 0 15px 0 0;
  font-weight: bold;
}

.nav1 li {
  display: inline;
  list-style: none;
}

.nav1 li a {
  display: block;
  float: left;
  padding: 2px 5px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 120%;
}

.nav1 a:hover {
  text-decoration: none;
  color: var(--color-text-hover);
}

/* Site Message */
.sitemessage {
  width: 400px;
  height: 120px;
  position: absolute;
  z-index: 1;
  margin: 20px 0 0 480px;
  color: var(--color-site-message);
  overflow: hidden;
  top: 87px;
}

.sitemessage h1 {
  width: 400px;
  text-align: right;
  font-size: 230%;
}

.sitemessage h2 {
  float: right;
  width: 320px;
  margin: 8px 0 0 0;
  text-align: right;
  line-height: 100%;
  font-size: 160%;
}

.sitemessage h3 {
  float: right;
  width: 320px;
  margin: 10px 0 0 0;
  text-align: right;
  font-size: 140%;
}

/* Drop-down Navigation */
.nav2 {
  white-space: nowrap;
  float: left;
  width: var(--width-main);
  border: none;
  background: var(--color-gray-dark) url(../img/bg_head_bottom_nav.jpg) no-repeat;
  color: rgb(75, 75, 75);
  font-size: 130%;
}

.nav2 ul {
  list-style-type: none;
}

.nav2 ul li {
  float: left;
  z-index: 1000;
  border-right: solid 1px rgb(175, 175, 175);
}

.nav2 ul li a {
  display: block;
  height: 3.1em;
  line-height: 3.1em;
  padding: 0 16px;
  text-decoration: none;
  font-weight: bold;
  color: rgb(100, 100, 100);
}

.nav2 ul li ul {
  display: none;
  border: none;
}

/* Non-IE6 hovering */
.nav2 ul li:hover {
  position: relative;
}

.nav2 ul li:hover a {
  background-color: rgb(210, 210, 210);
  text-decoration: none;
}

.nav2 ul li:hover ul {
  display: block;
  width: 10em;
  position: absolute;
  z-index: 999;
  top: 3em;
  margin-top: 0.1em;
  left: 0;
}

.nav2 ul li:hover ul li a {
  white-space: normal;
  display: block;
  width: 10em;
  height: auto;
  line-height: 1.3em;
  margin-left: -1px;
  padding: 4px 16px;
  border-left: solid 1px rgb(175, 175, 175);
  border-bottom: solid 1px rgb(175, 175, 175);
  background-color: rgb(237, 237, 237);
  font-weight: normal;
  color: var(--color-text-hover);
}

.nav2 ul li:hover ul li a:hover {
  background-color: rgb(210, 210, 210);
  text-decoration: none;
}

/* Header Breadcrumbs */
.header-breadcrumbs ul {
  float: left;
  width: 560px;
  list-style: none;
  padding: 0 0 0 15px;
  font-family: var(--font-secondary);
}

.header-breadcrumbs ul li {
  display: inline;
  padding: 0 0 0 10px;
  background: transparent url(../img/bg_bullet_arrow.gif) no-repeat 0 50%;
  font-weight: bold;
  color: var(--color-text);
  font-size: 100%;
}

.header-breadcrumbs ul a {
  color: var(--color-link);
  text-decoration: none;
}

.header-breadcrumbs ul a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* Breadcrumbs Search Form */
.header-breadcrumbs .searchform {
  float: right;
  width: 285px;
  padding: 0 17px 0 0;
}

.header-breadcrumbs .searchform form fieldset {
  float: right;
  border: none;
}

.header-breadcrumbs .searchform input.field {
  width: 10em;
  padding: 0.2em 0;
  border: 1px solid rgb(200, 200, 200);
  font-family: var(--font-secondary);
  font-size: 120%;
}

.header-breadcrumbs .searchform input.button {
  width: 3em;
  padding: 1px;
  background: rgb(230, 230, 230);
  border: solid 1px var(--color-gray-border);
  text-align: center;
  font-family: var(--font-secondary);
  color: var(--color-gray-border);
  font-size: 120%;
}

.header-breadcrumbs .searchform input.button:hover {
  cursor: pointer;
  border: solid 1px rgb(80, 80, 80);
  background: rgb(220, 220, 220);
  color: rgb(80, 80, 80);
}

/* Main Navigation Corner */
.main-navigation .round-border-topright {
  width: 10px;
  height: 10px;
  position: absolute;
  z-index: 100;
  margin: 0 0 0 190px;
  background: url(../img/bg_corner_topright.gif) no-repeat;
}

/* Column Units with Updated Font Sizes */
.column1-unit {
  width: 440px;
  margin-bottom: 20px;
}

/* Updated consistent heading sizes */
.column1-unit h1,
.column1-unit h2,
.column1-unit h3 {
  font-size: 1.8rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1.2rem;
}

.column1-unit p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 1.2rem;
}

/* Special styling for the green link */
.column1-unit p[style*="color: darkgreen"] {
  font-size: 15px;
  color: darkgreen;
}

.column1-unit p[style*="color: darkgreen"] a {
  color: darkgreen;
  text-decoration: none;
}

.column1-unit p[style*="color: darkgreen"] a:hover {
  text-decoration: underline;
}

/* Links within paragraphs */
.column1-unit p a {
  font-size: inherit;
  color: var(--color-link);
  text-decoration: none;
}

.column1-unit p a:hover {
  text-decoration: underline;
}

/* Form elements */
.column1-unit input,
.column1-unit button {
  font-size: 1rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
}

/* Clear content unit */
.clear-contentunit {
  clear: both;
  width: 440px;
  height: 0.1em;
  border: none;
  background: rgb(210, 210, 210);
  color: rgb(210, 210, 210);
  margin: 1.5rem 0;
}

/* Other Column Units */
.column2-unit-left {
  float: left;
  width: 200px;
  margin-bottom: 10px;
}

.column2-unit-right {
  float: right;
  width: 200px;
  margin-bottom: 10px;
}

.column3-unit-left {
  float: left;
  width: 120px;
  margin-bottom: 10px;
}

.column3-unit-middle {
  float: left;
  width: 120px;
  margin-bottom: 10px;
  margin-left: 40px;
}

.column3-unit-right {
  float: right;
  width: 120px;
  margin-bottom: 10px;
}

/* Subcontent Units with Border */
.subcontent-unit-border {
  width: 183px;
  margin: 0 0 2em 0;
  padding: 0 0 5px 0;
  border: solid 1px var(--box-border);
  background: var(--box-bg);
}

.subcontent-unit-border-green {
  width: 183px;
  margin: 0 0 2.5em 0;
  padding: 0 0 10px 0;
  border: solid 1px var(--box-green-border);
  background-color: var(--box-green-bg);
}

.subcontent-unit-border-blue {
  width: 183px;
  margin: 0 0 2.5em 0;
  padding: 0 0 10px 0;
  border: solid 1px var(--box-blue-border);
  background-color: var(--box-blue-bg);
}

.subcontent-unit-border-orange {
  width: 183px;
  margin: 0 0 2.5em 0;
  padding: 0 0 10px 0;
  border: solid 1px var(--box-orange-border);
  background-color: var(--box-orange-bg);
}

/* Footer */
.footer {
  clear: both;
  width: 900px;
  padding: 1em 0;
  background: var(--color-gray-dark) url(../img/bg_foot.jpg) no-repeat;
  font-size: 1em;
  overflow: visible;
}

.footer p {
  line-height: 1.3em;
  text-align: center;
  color: var(--color-text);
  font-weight: bold;
  font-size: 110%;
}

.footer p.credits {
  font-weight: normal;
}

.footer a {
  text-decoration: underline;
  color: var(--color-text);
}

.footer a:hover {
  text-decoration: none;
  color: rgb(0, 0, 0);
}

.footer a:visited {
  color: rgb(0, 0, 0);
}

/* Clearfix */
.column1-unit:after,
.column2-unit-left:after,
.column2-unit-right:after,
.column3-unit-left:after,
.column3-unit-middle:after,
.column3-unit-right:after,
.footer:after {
  content: "."; 
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Responsive Design */
@media (max-width: 768px) {
  .column1-unit h1,
  .column1-unit h2,
  .column1-unit h3 { 
    font-size: 1.6rem; 
  }
  
  .column1-unit p { 
    font-size: 0.95rem; 
  }
  
  .column1-unit p[style*="color: darkgreen"] { 
    font-size: 14px; 
  }
}

@media (max-width: 480px) {
  .column1-unit h1,
  .column1-unit h2,
  .column1-unit h3 { 
    font-size: 1.4rem; 
  }
  
  .column1-unit p { 
    font-size: 0.9rem; 
  }
  
  .column1-unit p[style*="color: darkgreen"] { 
    font-size: 13px; 
  }
}