/* ------ 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: #333333;
font-size: medium;
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: 'Comic Sans MS', Verdana, Arial, sans-serif;
color: #336600;
background-color:#ffffff; 
color:#336600;
width: auto;
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: 'Comic Sans MS', Verdana, Arial, sans-serif;
color: #336600;
background-color: #ffffff; 
width: auto;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
font-size: 14pt;
text-align: center;
font-weight: 300;
}
 
h3 {
font-family: 'Comic Sans MS', Verdana, Arial sans-serif;
}
 
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: #006; 
text-decoration: underline;
}
 
a:visited {
color: #CC0099;
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;
}
 
#ContentWrapper {
float: left;
width: 100%;
}
 
#ContentColumn {
margin: 0 200px 0 200px;    /* STEP 1: set to "0 ExtraColumnWidth 0 NavColumnWidth" */
}
 
#WideContentColumn {
margin: 0 200px 0 100px;    /* 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 {
position:relative; /* copy these 4 green lines and paste into your CSS file */
padding:1px 0;
min-height:158px; /* change this number to the header height you wrote down, minus 2px */
_height:158px; /* IE6 min-height fix */ /* change this number to the header height you wrote down, minus 2px */}
 
#Footer .Liner {
margin: 0;
padding: 0;
border-top: 1px solid #000;
}
 
#ExtraColumn .Liner {
padding: 0px 10px 0px 10px;
}
 
.blogItItem .blogItReadMore {
clear: both;
}
 
.blogItItem {
margin:18px 0;
padding:0 12px;
border:1px solid #ccc;
background:#ddd;
box-shadow:4px 4px 4px #ccc;
border-radius:4px;
}
 
 
/* ------ Section 3 - Page Structure Details ------ */
 
#PageWrapper {
margin: 0px auto;
}
 
#Header .Liner {
background-image: url(../image-files/header-image.jpg);
background-repeat: no-repeat;
background-color: transparent;
background-position: top left;
}
 
#ContentWrapper {
}
 
#WideContentWrapper {
}
 
 
#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: #FAFAD2;
 
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 {<font style="color:#ffffcc">dddd</font>
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: 'Comic Sans MS', Verdana, Arial sans-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: 1px solid #000;
border-right: 1px solid #000;
margin: 18px 0px 24px 0px;
padding: 4px;
color: black;
background-color:#ccff00;
}
  
.WhiteBox {
border: 1px solid #000;
border-left: 1px solid #000;
font-family: 'Comic Sans MS', Verdana, Arial sans-serif;
border-right: 1px solid #000;
font-size: 85%;
margin: 18px 0px 24px 0px;
padding: 4px;
color: black;
background-color:#fff;
}
 
.PaleBox {
border: 1px solid #000;
border-left: 1px solid #000;
font-family: 'Comic Sans MS', Verdana, Arial, sans-serif;
border-right: 1px solid #000;
font-size: 85%;
margin: 18px 0px 24px 0px;
padding: 4px;
color: black;
background-color:#f0fff0;
}
 
.label {
border: 1px solid #000;
border-left: 1px solid #000;
font-family: 'Comic Sans MS', Verdana, Arial sans-serif;
border-right: 1px solid #000;
width: 180px;
font-size: 85%;
font-style: italic;
margin: 18px 0px 24px 0px;
padding: 4px;
color: black;
background-color:#F0F8FF;
}
 
.note {
font-family: Arial, Verdana, sans-serif;
background-color:#fff; 
font-size: 77%;
color: #000000;
font-style: italic;
} 
 
 
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: #fff;
border: 1px solid #000;
margin: 0px 0px 10px 21px;
padding: 0px 10px;
font-size: 90%;
color:#006666;
font-family: 'Times New Roman', Georgia, serif;
float: right;               /* adding float enables text to flow around it */
}
 
 
.ReminderBox :first-child {
padding-top: 1em;
}
 
.ReminderBox h4 {
text-align: center;
font-size: 120%;
background-color:#ccffcc;
}
.list {
font-family: Arial, Verdana, sans-serif;
background-color:#fff; 
font-size: 77%;
color: #000;
} 
 
 
 
.ReminderBox p {
}
 
.snoothbox {          
width: 220px;
background-color:#F0F8FF;
border: 1px solid #000;
margin: 0px 0px 10px 21px;
padding: 0px 10px;
font-size: 90%;
color: #006666;
font-family: 'Comic Sans MS', Verdana, Arial sans-serif;
float: right;               /* adding float enables text to flow around it */
}
.snoothbox h4 {
text-align: center;
font-size: 120%;
background-color: #ff99ff;
}
 
 
 
.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;
}
 
/*** right column Half of width box left ***/
div.half-width-box-left {
   background-color: #ffffff;
    margin: 5px 5px 5px 5px;
    border: 1px solid #660000;
    padding: 10px;
    width: 50%;
    float: left;
     
}
/*** right column Half of width box right ***/
div.half-width-box-right {
   background-color: #ffffff;
    margin: 5px 5px 5px 5px;
    border: 1px solid #660000;
    padding: 10px;
    width: 50%;
    float: right;
     
    }
 
/* ------ 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;
 
}