body {
background-color:#568EA9; 
font-family: Helvetica,Verdana, Eyechart, Geneva, Arial, sans-serif;
font-size: 90%;
color: #000;
margin:auto;
padding:0;
text-align:center;
}





/* you have 3 more classes of horizontal rule, as well as the default version Change the attributes to 
get the look you want. The 3 classes are solid, dotted, and dashed. Add class="dashed" to your hr
tag on an HTML page, to get the dashed version of the hr. Change the colors to suit. */

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

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

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

/* this is a custom class for your bold tag. You can alter anything here, or remove
it completely to get the default bold*/
b{

color: #568EA9;
font-family: Helvetica,Verdana, Eyechart, Geneva, Arial, sans-serif;
font-size: 90%;
font-weight:800;
}


/* this is a custom class for using graphics as bullets.  Upload a custom graphic to your 
graphics library in the usual way. Then replace my URL
with your own. Note there are no speech marks around the URL*/
 
ul {
list-style-type: none;
padding-left: 0;
margin-left: 10px;
}
 
li.custom {
background: url('http://www.love-of-roses.com/images/bullet2.gif') no-repeat left center; 

padding-left: 20px;
margin-bottom: 10px

 }
 
 
 li.goldstar {
background: url('http://www.rn-guide-to-skin-care.com/image-files/pill_go.png') left center no-repeat; 
padding-left: 20px;
margin-bottom: 7px;
}

/* this area below is for your  Link-text and headings. You can change the font type and size, the color of each of them
as well as the a:hover, which is the text for a link, once the pointer passes over it*/

a { font-family: Verdana, Arial, sans-serif; 
font-size: 100%; color: #1F4DCC; text-decoration: underline;
}

a:hover { font-family: Verdana, Arial, sans-serif;
 font-size: 100%; 
 background-color: #568EA9;
 color: #fff;
 }


h1 { font-family: Verdana, Arial, sans-serif; font-size: 150%;  color: #568EA9}
h2 { font-family: Verdana, Arial, sans-serif; font-size: 116%;  color: #568EA9}
h3 { font-family: Arial, Verdana, sans-serif; font-size: 105%;  color: #568EA9}



/* 
Notice the width:expression part? That's for internet explorer, which doesnt understand max-width commands.
So this works WITH the max-width at the top of this page. If you change that to say 1050px, change both occurences here
to 1050px as well. Otherwise Those using IE wont get the width constraint....their page would expand indefinitely!
Firefox will ignore this part, and IE will ignore the max-width part....you need both of them.

BUT DONT TOUCH THIS PART BELOW UNLESS YOU HAVE READ THE PDF THAT EXPLAINS HOW, AND YOU ARE SURE YOU UNDERSTAND IT!!*/

.main-table {
width:expression(document.body.clientWidth > 1052? "1050px": "auto" );
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}


/*as we are using a table based layout, all your text is within a table. So this is the area to change the
size, color and font family .*/
table {
font-family: Veranda, Arial, sans-serif;
font-size: 100%;
color: #000;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
}

/* if you change the fonts and sizes, etc above, make this the same, but leave the weight as bold
Its just here to give you the option of a bold type font, without the extra size.*/

.note {
font-family: Verdana, Arial, sans-serif;
background-color:#fff; 
font-size: 77%;
color: #666666;
font-weight: bold;
font-style: italic;
} 


/* Below, is the background colors for your table cells. originally, they were on the actual page, so why
move them to the stylesheet? Well, if you decide to do a site-wide color scheme change, you now change here, 
rather than on every page. A big improvement. Also, the less styling on the page, the better.

Suppose you prefer to have a tiled image rather than a solid color?
Replace the background-color:#fff;  with this, and upload your image to the graphics library....
background-image: 
url('http://www.your-site.com/images/your-image.gif');
background-repeat: repeat;
*/


td.headerbg {
background-color:#fff;
}

td.spacerbg {
background-color:#fff; 
}

td.contentbg {
background-color:#fff; 
}

td.rightbg {
font-family: Verdana, Arial,sans-serif;
font-size: 100%;
color: #000;
background-color:#fff; 
}

td.leftbg {
font-size: 100%;
margin-left: 10px;
background-color:#fff; 
}

td.footerbg {
font-size: 100%;
background-color:#fff; 
}

/* This is for the heading background color....your H1, H2, and H3 tags*/
.hbg{
background-color:#8EA7EE; 
color:#ffffff;
text-align: center;
width: auto;
z-axis: 1;
}


/* information below is to remove the link styling for anchor links.
Just leave this as it is....it works fine, and shouldn't be modified */
a.jumplink{
text-decoration: none;
font-size: 100%; 
background-color: transparent;
color: #1F4DCC;
}

a:hover.jumplink  {
text-decoration: none;
font-size: 100%; 
background-color: #8EA7EE;
 color: #fff;
} 


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

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

.ThumbnailLink {
text-align: center;
}

.ThumbnailLink a:link {
text-decoration: none;
}

.ThumbnailLink a:hover .Caption {
text-decoration: underline;
color: red;
}


/* -- Horizontal Text NavBar -- */

.ExtraNav {
font-family: Verdana, Arial, sans-serif;
}

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

.ExtraNav ul li {
display: inline;
background-color: #66cc66;
text-align: center;
}

.ExtraNav a:link {
color: #000660;
text-decoration: none;
text-align: center;
padding: 3px 3px;
}

.ExtraNav a:visited {
color: purple;
text-decoration: none;
}

.ExtraNav a:hover {
color: #ffffff;
background-color: #1F4DCC;
text-decoration: underline;
}


/*This section is for the horizontal navigation buttons under the header. */
#Header2 .ExtraNav ul { 
float: center; 
list-style: none; 
background: #8EA7EE; 
width: 99%; padding: 0; margin: 0 0 0 0px; height: 30px; 
display: inline; 
} 
#Header2 .ExtraNav ul li { 
display: inline; 
margin: 0; padding: 0; 
} 
#Header2 .ExtraNav ul li a { 
display: block; 
float: left; 
width: auto; 
margin: 0; 
padding: 0 10px;/*this is the gap between the text, and the border*/ 
border-top: 1px solid #fff; 
border-right: 1px solid #fff;/*this gives a white border, change as required*/ 
border-left: none;
border-bottom: 1px solid #fff;
color: #ffffff; /* text color*/ 
font: bold 12px/30px Veranda, Geneva, sans-serif; /* sets the font type and size*/ 
text-decoration: none; 
letter-spacing: 1px; 
} 
#Header2 .ExtraNav ul li a:hover, 
#Header2 .ExtraNav ul li a:active { 
color: #ffffff; 
background-color: #1F4DCC; 
font: bold; } 
/*End of horizontal nav bar*/

#Footer .ExtraNav {
margin: 12px auto;
background-color: #66cc66;
}

/*This section is for the Feedburner / Buzzboost. */

< type="text/css">

div.feedburnerFeedBlock {

margin-top: -10px;

font-family: Verdana, arial, sans;

font-size: 12px;

width: 160;

background-color: #fff;

overflow:hidden; }

.storyInput {
height: 150px;
}

.dhbg {
background-color: #568EA9;
color: #fff;
font-weight: bold;
font-family: 'Trebuchet MS', 'Comic Sans MS', Arial, sans-serif;
width: 96%;
z-axis: 1;
text-align: center;
font-size: 100%;
BORDER-TOP: thin solid #568EA9;
	BORDER-LEFT: medium solid #568EA9;
	BORDER-BOTTOM: thin solid #568EA9;
	BORDER-RIGHT: medium solid #568EA9;
}




#suckerfishnav {
    background:#568EA9 repeat-x;
    font-size:16px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:40px;
    padding:0;
    border:1px solid #aaa;
    margin:0;
    width:100%;
    }
#suckerfishnav a {
    display:block;
    color:#dddddd;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:101px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    }
#suckerfishnav li li {
    width:99px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:80px;
    font-size:12px;
    color:#dddddd;
    }
#suckerfishnav li ul ul {
    margin:-21px 0 0 100px;
    }
#suckerfishnav li li:hover {
    background:#9F1F76;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#dddddd;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#dddddd;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#dddddd;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#444444;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#E84AB6;
    }