html
{ height: 100%;}

{ margin: 0;
  padding: 0;
  }

body
{ font: normal 85% arial, tahoma, sans-serif;
  color: #1D1D1D;
  background: #998b7d;
  position: relative;
top: 0px;
padding-left: 5%;
padding-right: 5%;
border: 3px solid red;

  }

/* ========= blocks of text ===================*/

p
{ padding: 0 0 10px 0;
  line-height: 1.7em;
  
  }
  
img
{ border: 0;
}

/* ========= headings  ===================*/

h1, h2, h3, h4, h5, h6 
{ font: bold 175% arial, sans-serif;
  color: #000000;
  letter-spacing: 3px;
  text-shadow: 2px 2px #c0c0c0;
  padding: 5px 0 10px 0;

  }

h2
{ font: bold 165% arial, sans-serif;}

h2.article {
  text-transform:uppercase;
  font: bold 125% helvetica, tahoma, arial, sans-serif;
  color: #998b7d;
  text-shadow: 1px 1px black;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#ff7f50,direction=135, strength=1);
  letter-spacing: 5px;

}


h3
{ font: bold 125% arial, sans-serif;
  padding: 0 0 5px 0;
  color: #008CC6;}
  
  h3.subtitle {
  color: #000000;
  font: bold 110% ;
  text-transform:capitalize;
  
  }

h4, h5, h6
{ margin: 0;
  padding: 0 0 5px 0;
  font: bold 110% arial, sans-serif;
  color: #1D1D1D;
  line-height: 1.5em;}

h5, h6
{ font: italic 95% arial, sans-serif;
  color: #1D1D1D;
  padding-bottom: 15px;}

h6
{ color: #362C20;}

.author {
font: normal 100% arial, sans-serif;

}


a, a:hover
{ background: transparent;
  outline: none;
  text-decoration: underline;
  color: #5D5D5D;

  }

a:hover
{ text-decoration: underline;
  color: #1D1D1D;}

/* ========= used on top nav and main photo  ===================*/
  
ul
{ margin: 0px 0 22px 0px;

}

ul li
{ margin: 2px 0 15px 17px;}


/* =========  left empty column, right empty column, logo box, top nav box, main photo  ===================*/

#main, #banner, #menubar, #site_content, #footer, #contact, #footer_content, #banner_image
{ margin-left: 5%; 
  margin-right: 5%;
	width: 90%;
  overflow: hidden;
  padding-top: 20px;
    background: #ffffff;
border: 12px dotted green;


  }
  
#header
{ height: 50px;
border: 5px solid greenyellow;

}

/* ========= tight box around site title  ===================*/
  
#site_heading
{ height: 75px;
  width: 95%;
  margin-top: -10px;
  margin-bottom: 30px;
  padding-left: 10px;
border: 3px solid orange;

  }  

/* ========= tr box around site title  ===================*/
  
#site_heading H1
{ width: 100%;
  font: bold italic 250% helvetica, verdana, arial, sans-serif;
  text-shadow: 4px 4px #c0c0c0;
  letter-spacing: 3px;
  border: 10px solid yellow;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0,direction=135, strength=10);


  }
/* ========= tr box around company slogan  ===================*/
  
#site_heading H2
{ width: 100%;
  font: normal 150% helvetica, tahoma, arial, sans-serif;
  color: #998b7d;
  text-shadow: 2px 2px black;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#ff7f50,direction=135, strength=3);
  letter-spacing: 5px;
  margin-left: 20px;
  
  }  

/* ========= top nav bar  ===================*/
  
#menubar
{ width: 98%;
  height: 35px;
  padding-top: 15px;
  text-align: center; 
  margin: 0 auto;
  background: #997d99;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d997d', endColorstr='#7d8b99');
  background: -moz-linear-gradient(#7d997d, #7d8b99);
  background: -o-linear-gradient(#7d997d, #7d8b99);
  background: -webkit-linear-gradient(#7d997d, #7d8b99);
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  border: 10px solid #000000;
  
  } 

ul#menu
{ 
  margin: 0;}

/* ========= sm box around each link in top nav  ===================*/

ul#menu li
{ padding: 0 0 0 0px;
  list-style: none;
  margin: 2px 0 0 0;
  display: inline;
  background: transparent;

  }
/* ========= med box around each link in top nav  ===================*/

ul#menu li a
{ font-size: 95%;
  letter-spacing: 0px;
  height: 35px;
  padding: 5px 1px 0 1px;
  text-align: center;
  color: #FFF;
  text-shadow: 1px 1px #1d1d1d;
  text-decoration: none;
  background: transparent;


  } 
/* ========= around current link in top nav  ===================*/

ul#menu li.current
{ margin: 2px 0 0 0;

}
/* ========= same container as med box around current link in top nav  ===================*/

ul#menu li.current a
{ text-decoration: underline;

}
/* ========= same container as med box around current link on hover in top nav  ===================*/

ul#menu li a:hover
{ text-decoration: underline;

}
/* ========= container around visible center of site, not around bottom nav  ===================*/

#site_content
{ width: 100%;
  overflow: hidden;
  padding-top: 20px;
border: 10px solid red;

  }   
/* ========= container around main images and main text blurb and page blurb =======================*/

#content
{ text-align: left;
  width: 70%;
  margin: 5px 0 20px 0;
  padding: 20px 20px 0 0;
  float: left;
  border: 10px solid pink;

}
/* ========= container around main images and main text blurb =======================*/
  
.content_item
{ width: 100%;        
  border: 3px solid cyan;
}
/* ========= container not visible =======================*/

.content_image
{ width: 134px;
  height: 134px;
  margin: 20px 0 20px 5px;
  float: left;
  border: 20px solid #DDD; /* should be 1px*/
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px

}
/* ========= container around main text blurb =======================*/
  
.content_text
{ width: 60%;
  float: right;
  margin-top: 20px;
  padding-left: 20px;
    border: 3px solid darkgoldenrod;

}
/* ========= container around main image =======================*/

#banner_image 
{ width: 100%;
  height: 250px;
  margin: 0 0 15px 5px;
  float: left;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
    border: 3px solid darkblue;


  }
/* ========= container around main image =======================*/

/* styling for the slideshow on the homepage */
ul.slideshow {
  list-style: none;
  width: 690px;
  height: 250px;
  overflow: hidden;
  position: relative;
  padding: 0;
      border: 5px solid darkorchid;

}
/* ========= container around main image and imposed text on top of image=======================*/
  
ul.slideshow li {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
}
/* ========= container around main image top and left sides only=======================*/
 
ul.slideshow li.show {
  z-index: 500;
}
/* ========= container around main image top and left sides only=======================*/
 
ul img {
  border: none;
}
/* ========= container around imposed text on top of image=======================*/
 
#slideshow-caption {
  width: 710px;
  text-align: right;
  height: 40px;
  position: absolute;
  bottom: 0;
  left: 0; 
  z-index: 500;
}
/* ========= container around imposed text on top of image=======================*/
 
#slideshow-caption .slideshow-caption-container {
  background: transparent url(../images/transparent.png) repeat;  
  padding: 10px 45px 12px 25px;   
  z-index: 1000;

}
 
#slideshow-caption p {
  padding: 0;
  font: normal 130% arial, sans-serif;
  color: #FFF;} 

.sidebar_container
{ float: left;
  width: 22%;
  margin: 20px 0 20px 0;
/*
  background: #B0B0B0;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  */
  /* ==============================*/
  background: #7d8b99;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d8b99', endColorstr='#997d99');
  background: -moz-linear-gradient(#7d8b99, #997d99);
  background: -o-linear-gradient(#7d8b99, #997d99);
  background: -webkit-linear-gradient(#7d8b99, #997d99);
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  border: 10px solid fuchsia; /* should be 1px bladk */
}

.sidebar
{ float: right;
  width: 95%;
  padding-left: 10px;
  margin-bottom: 10px;
  border: 5px solid white;

  }

.sidebar_item
{ font: normal 100% arial, sans-serif;
  padding: 0 15px 0 0;
  width: 100%;
  border: 5px solid dodgerblue;

}

.sidebar h2
{ color: #fff;
text-shadow: 1px 1px #0056AE;}  
  
.sidebar h4
{ font-size: 125%;
  color: #FFF;
  text-shadow: 1px 1px #0056AE;}

.sidebar p
{ color: #FFF;}

.sidebar a
{ color: #008CC6;}

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

.sidebar ul li, .sidebar ul li.selected
{ list-style: none; 
  margin: 15px 0;
  padding: 0;}

.sidebar li.selected, .sidebar li:hover
{ color: #5D5D5D;
  text-decoration: none;} 
  
#footer
{ font-size: 100%;
  letter-spacing: 0px;
  margin: 0 auto;
  width: 95%;
  text-align: center; 
  color: #FFF;
  text-shadow: 1px 1px #1d1d1d;
 /*
  padding: 25px 20px 0 20px;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  border: 1px solid #0096D4;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  */
  /* =====================*/
    height: 35px;
  padding-top: 15px;

  /* ==============================*/
  
  background: #997d99;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#997d99', endColorstr='#7d997d');

  background: -moz-linear-gradient(#997d99, #7d997d);
  background: -o-linear-gradient(#997d99, #7d997d);
  background: -webkit-linear-gradient(#997d99, #7d997d);
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  border: 5px solid gold; /* s/b 1px 000000 */
}

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

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