/* ------ Section 1 - Global Body, Font and Link Settings ------ */

body {
background-color: #f6eec9;
margin: 0;
padding: 0;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial,
  sans-serif;
color: Maroon;
font-size: medium;
background-image: url(../image-files/background.jpg);
background-repeat: repeat;
}

h1, h2, h3, h4, h5, h6 {
background-color: transparent;
clear: both;
}

h2, h3, h4, h5, h6 {
margin-top: 1em;
}

h1 {

border-bottom: 1px solid #336600;
border-top: 1px solid #336600;
font-family: Verdana, Arial sans-serif;
color: #336600";
background-color:#ffffff; 
color:#336600;
width: auto;
z-axis: 1;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 12px;
font-size: 24pt;
text-align: center;
font-weight: 300;

}

h2 {
border-bottom: 1px solid #336600;
border-top: 1px solid #336600;
font-family: Verdana, Arial sans-serif;
color: #336600";
background-color:#ffffff; 
color:#336600;
width: auto;
z-axis: 1;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
font-size: 14pt;
text-align: center;
font-weight: 300;
}

h3 {
text-decoration: underline;
}

blockquote {
margin: 1em 60px;
line-height: 20px;
font-style: italic;
}

code {
color: #333;
}

img {
border: 1px solid #000;
}

a:link img {
border: 0;
}


/* -- General Link Styling -- */

a:link {
color: #009; 
text-decoration: underline;
}

a:visited {
color: purple;
text-decoration: underline;
}

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



/* ------ Section 2 - Global Page Structure ------- */

#PageWrapper {
width: 1000px;
border: 0px solid #000;
}

#Header {
position: relative;
height: 160px;
}

#ContentWrapper {
float: left;
width: 100%;
}

#ContentColumn {
margin: 0 200px 0 200px;    /* STEP 1: set to "0 ExtraColumnWidth 0 NavColumnWidth" */
}

#NavColumn {
float: left;
width: 190px;               /* STEP 2: to set left column at 180, set 1 less than 180 here */
margin-left: -1000px;        /* STEP 3: set to the same width specified in #PageWrapper above (but with minus sign)  */
border-right: 1px solid #999;
margin-bottom: 10px;
}

#ExtraColumn {
float: left;
width: 179px;               /* STEP 4: to set right columns at 180, set 1 less than 180 here */
margin-left: -180px;        /* STEP 5: set to -(ExtraColumnWidth) */
border-left: 1px solid #000;
margin-bottom: 10px;
}

#Footer {
clear: both;
width: 100%;
padding: 5px 0;
border-top: 5px solid #000;
}

.Liner {
padding: 0px 10px 10px 10px;
}

#Header .Liner {
padding: 0;
}

#Footer .Liner {
margin: 0;
padding: 0;
border-top: 1px solid #000;
}

#ExtraColumn .Liner {
padding: 0px 10px 0px 10px;
}



/* ------ Section 3 - Page Structure Details ------ */

#PageWrapper {
margin: 0px auto;
}

#Header {
background-image: url(../image-files/header-image.jpg);
background-repeat: no-repeat;
background-color: transparent;
background-position: top left;
}

#ContentWrapper {
}

#NavColumn {
}

#ContentColumn {
}

#ExtraColumn {
}

#Footer {
text-align: center;
font-size: 85%;
}

#NavColumn h4 {
margin-top: 0;
}

#ExtraColumn h4 {
margin-top: 0;
}
.solid {	
   border-top: 1px solid #660000;
   border-bottom: hidden;
   border-left: hidden; 
   border-right: hidden;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	
	
}

.dashed {
  border-bottom:1px dashed #660000;
   border-top:hidden;
   border-left:hidden;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	
	
}

.dotted {
	border-bottom:1px dotted #660000;
   border-top:hidden;
   border-left:hidden;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}


/* ------ Section 4 - Left Column Navigation ------ */



#Navigation {

}
/* housebutton from here */
.housebutton a {
font-size: 100%;
}

.housebutton a:hover {
font-size: 100%;
}


/* this part below is for the color on the background, surrounding the buttons. Change the color, and the 
border, if you like. For the border, you can use solid, dashed, or dotted, for different border styles*/

#navigator {

background-color: #999966;

border: 1px #660000 solid;

width: 130px;

margin-top: auto;

margin-left: auto;

margin-right: auto;

padding: 5px;

text-align: center;


}

/* want more space between your buttons? just increase the margins
from 1px. Font weight can be bold if you prefer.*/

.housebutton {

font-weight: normal;
text-align: center;
margin-bottom: 1px;
margin-top: 1px;
}


/* this part is for the colors of your buttons "at rest" so to speak. Notice the
top/left, and the bottom/right are colored in pairs? If you change the colors, you will need to do the same, to
maintain the illusion of 3D buttons. Make one set of sides a slightly darker shade than the other pair.
This will give the button a 3D look*/

.housebutton a {

padding: 4px;

text-decoration: none;

display: block;

color: #ffff00; /*this is where you change the button font color*/

background-color: #660000;

border-top: 1px #006 solid;

border-left: 1px #006 solid;

border-bottom: 1px #006 solid;

border-right: 1px #006 solid;

}

/*this part is how the buttons look, once the pointer passes over them. Same thing as above, but this time
the top/left colors should SWAP with the bottom/right, to give the correct effect.
Also the background color should go a shade darker, to make it seem as if it were now below the 
level of the page, and is not getting any light on it*/

.housebutton a:hover {

color: #ffff00; /*-----this is where you change the button font color, when the button is hovered over*/

background-color: #663333;

border-top: 1px #000 solid;

border-left: 1px #000 solid;

border-bottom: 1px #000 solid;

border-right: 1px #000 solid;

}
/* housebutton end here */

/* -- Nav Headers -- */

.Navigation h3 {
padding: 0;
margin: 1em 0px;
}

/* -- Nav List -- */

.Navigation ul {
padding: 0px 0px 8px 0px;
margin: -10px 0px 0px 0px;
list-style-type: none;
}

.Navigation li {
border: none;
padding: 0px 0px 0px 15px;
margin-bottom: 5px;
background-image: url(../image-files/bullet.gif);
background-position: left 9px;
background-repeat: no-repeat;
}

/* -- Navigation Link styles -- */

.Navigation a:link {
color: #009;
display: block;     /*  this makes the whole box highlight rather than just the text */
padding: 2px 0px;
text-decoration: none;
}

.Navigation a:visited {
color: #636;
display: block;     /*  this makes the whole box highlight rather than just the text */
padding: 2px 0px;
text-decoration: none;
}

.Navigation a:hover {
color: #900;
display: block;     /*  this makes the whole box highlight rather than just the text */
padding: 2px 0px;
text-decoration: underline;
}



/* ------ Section 5 - Additional Navigation ------ */

/* -- Thumbnail-with-Caption Navigation -- */

.ThumbnailLink {
text-align: center;
}

.ThumbnailLink a:link img, .ThumbnailLink img {
border: 1px solid #000;
}

.ThumbnailLink a:link,
.ThumbnailLink a:link .Caption,
.ThumbnailLink a:visited,
.ThumbnailLink a:visited .Caption {
text-decoration: none;
color: #009;
}

.ThumbnailLink a:hover,
.ThumbnailLink a:hover .Caption {
text-decoration: underline;
color: #900;
}


/* -- Horizontal Text NavBar -- */

.ExtraNav {
font-family: Georgia, "Times New Roman", Times, serif;
}

.ExtraNav ul {
list-style-type: none;
padding: 0;
}

.ExtraNav ul li {
display: inline;
text-align: center;
padding: 0 10px;
border-left: 1px solid #000;
}

.ExtraNav ul :first-child {
border-left: 0px solid #000;
}

.ExtraNav a:link {
color: #009;
text-decoration: none;
text-align: center;
padding: 0 4px;
}

.ExtraNav a:visited {
color: #636;
text-decoration: none;
padding: 0 4px;
}

.ExtraNav a:hover {
color: #900;
text-decoration: underline;
padding: 0 4px;
}

#Header .ExtraNav {
position: relative;
width: 100%;
padding: 118px 0px 0px 0px;
margin: 0;
text-align: center;
font-size: 11px;
text-transform: uppercase;
}

#Header .ExtraNav ul {
margin: 0;
}

#Footer .ExtraNav {
position: relative;
margin: 12px auto;
font-variant: small-caps;
font-size: 90%;
}



/* ------ Section 6 - Boxes ------ */

.CalloutBox {
border: 1px solid #000;
border-left: 5px solid #000;
border-right: 5px solid #000;
margin: 18px 0px 24px 0px;
padding: 4px;
color: black;
Background: #lavender;
}

div.CalloutBox p {
margin: 15px 10px;
}

p.CalloutBox {
padding: 15px 10px;
}

div.CalloutBox h1,
div.CalloutBox h2,
div.CalloutBox h3,
div.CalloutBox h4,
div.CalloutBox h5,
div.CalloutBox h6 {
margin: 13px 10px 0px 10px;
}

div.CalloutBox img {
margin: 5px;
}

.ReminderBox {          
width: 258px;
Background: #linen;
border: 1px solid #000;
margin: 0px 0px 10px 21px;
padding: 0px 10px;
float: right;				/* adding float enables text to flow around it */
}

.ReminderBox>* {			/* this creates the line to the left of the reminder box */
margin: -5px 0px -5px -21px;
padding: 0px 0px 1.1em 21px;
border-left: 1px solid #000;
}

.ReminderBox :first-child {
padding-top: 1em;
}

.ReminderBox h4 {
text-align: center;
font-size: 120%;
}

.ReminderBox p {
}

.AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter468, .AdSenseBoxExtraColumn {	/* use #f6eec9 as the background color of adsense for best blending */
padding: 5px;
border: 0px solid #000;
}

.AdSenseBoxLeft {
margin: 0 10px 10px 0px;
padding: 5px 10px 5px 0;
border-right: 1px solid #000;
float: left;
}

.AdSenseBoxRight {
margin: 0 0px 10px 10px;
padding: 5px 0 5px 10px;
border-left: 1px solid #000;
float: right;
}

.AdSenseBoxCenter468 {
width: 468px;
margin: 0 auto 10px auto;
padding: 20px 0;
background-image: url(../image-files/h2.gif);
background-position: center top;
background-repeat: no-repeat;
clear: both;
}

.AdSenseBoxExtraColumn {
margin: 1em 0;
padding: 1em 0;
clear: both;
border: none;
background-image: url(../image-files/nav-line.gif);
background-position: center top;
background-repeat: no-repeat;
}

.ReturnToNavBox {
background-color: #fff;
width: 100%;
border-top: 1px solid #8f8fb3;
border-bottom: 1px solid #8f8fb3;
margin: 0 auto 12px auto;
padding: 4px;
}

/* -- RSS Box -- */

#RSSbox {
width: 100%;
margin: 8px auto 10px auto;
padding: .3em 0px 1em 0px;
font-weight: bold;
background-image: url(../image-files/nav-line.gif);
background-position: center top;
background-repeat: no-repeat;
}

#RSSbox img {
border: 0px solid #000;
}



/* ------ Section 7 - Frequently Used Styles ------ */

.Clear {
clear: both;
}

.Caption {
font-size: 85%;
font-weight: bold;
color: #000;
display: block;
line-height: 150%;
margin-bottom: 10px;
}

/* -- floats -- */

.ItemRight {
float: right;
margin: 2px 0 12px 10px;
padding: 5px 0 5px 10px;
border-left: 1px solid #000;
text-align: center;
}

.itemright {
float: right;
margin: 2px 0 12px 10px;
padding: 5px 0 5px 10px;
border-left: 1px solid #000;
text-align: center;
}
.ItemCenter {
margin: 2px auto 12px auto;
padding: 10px 0;
width: 50%;
text-align: center;
clear: both;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}

.ItemCenter img {
margin-left: -50%;
margin-right: -50%;
}

.ItemLeft {
float: left;
margin: 2px 10px 12px 0px;
padding: 5px 10px 5px 0px;
border-right: 1px solid #000;
text-align: center;
}

#navigator {

}

.housebutton {

}

.housebutton a {

}

.housebutton a:hover {

}


/* this part below is for the color on the background, surrounding the buttons. Change the color, and the 
border, if you like. For the border, you can use solid, dashed, or dotted, for different border styles*/

#navigator {

background-color: #999966;

border: 1px #cc0000 dotted;

width: auto;

margin-top: auto;

margin-left: auto;

margin-right: auto;

padding: 5px;

text-align: center;

}

/* want more space between your buttons? just increase the margins
from 1px. Font weight can be bold if you prefer.*/

.housebutton {

font-weight: bold;

text-align: center;

margin-bottom: 1px;

margin-top: 1px;

}


/* this part is for the colors of your buttons "at rest" so to speak. Notice the
top/left, and the bottom/right are colored in pairs? If you change the colors, you will need to do the same, to
maintain the illusion of 3D buttons. Make one set of sides a slightly darker shade than the other pair.
This will give the button a 3D look*/

.housebutton a {

padding: 4px;

text-decoration: none;

display: block;

color: #000066; /*this is where you change the button font color*/

background-color: #BFBFBF;

border-top: 2px #cccccc solid;

border-left: 2px #cccccc solid;

border-bottom: 2px #666666 solid;

border-right: 2px #666666 solid;

}

/*this part is how the buttons look, once the pointer passes over them. Same thing as above, but this time
the top/left colors should SWAP with the bottom/right, to give the correct effect.
Also the background color should go a shade darker, to make it seem as if it were now below the 
level of the page, and is not getting any light on it*/

.housebutton a:hover {

color: #000033; /*-----this is where you change the button font color, when the button is hovered over*/

background-color: #999999;

border-top: 2px #666666 solid;

border-left: 2px #666666 solid;

border-bottom: 2px #cccccc solid;

border-right: 2px #cccccc solid;

}