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


body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #663300;
	font-size: 80%;
	line-height: 17px;
	background-color: #EA721C;
	margin-top: 5px;
	padding-top: 0px;
	background-position: top;
}
/* -- C2 format --*/

body .c2Form { border: 0px }
body .dividerRule { border-top: 0px }
body .InvSquestions { 
	font-size: 14px
	color:#996633;
	background-color:#fff;
	font-style:italic;
	border:0px;
 }
body .titleInput { width: 50% }
body .storyInput { height: 150px }
body .vIsText_3000 { height: 85px }
.otherText {
	font-size: 13px;
}

/* -- General Link Styling -- */

a:link {
	color:#EA721C;
	text-decoration: none;
}

a:visited {
	color: #EA721C;
	text-decoration: none;
}

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



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

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

#Header {
	height: 225px;
	background-color: #FFFFFF;
}

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

#CenterColumn {
	margin-top: 0;
	margin-right: 250px;
	margin-bottom: 0;
	margin-left: 180px;
}

#LeftColumn {
	float: left;
	width: 179px;               /* 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)  */
}

#RightColumn {
	float: left;
	width: 249px;               /* STEP 4: to set right columns at 180, set 1 less than 180 here */
	margin-left: -250px;
}

#Footer {
clear: both;
width: 100%;
text-align: center;
padding: 8px 0;
}

.Liner {
padding: 10px 10px;
}

#Header .Liner {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}

#Footer .Liner {
margin: 0;
padding: 0;
}



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

#PageWrapper {
	background-image: url(../image-files/fspbackground.gif);
	background-repeat: repeat-y;
	position:relative;
	margin: 0 auto;
}

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


/* -- optional for text in Header -- */

#Header h1 {
	font-family: 'Monotype Corsiva', 'Apple Chancery', cursive;
	font-size: 350%;
	color: #FF5024;
	font-weight: normal;
	font-style: italic;
	letter-spacing: 10px;
	text-align: left;
	margin: 75px 0 0 75px;
}

#ContentWrapper {
	background-color: transparent;
	background-image: url(../image-files/fspbackground.gif);
	background-repeat: repeat-y;
}

#LeftColumn {
	background-color: transparent;
}

#CenterColumn {
	background-image: url();
	background-color: transparent;
}

#RightColumn {
	background-image: url();
	background-color: transparent;
}

#Footer {
	background-color: #EE9948;
	border-top: 1px solid #f0f5fb;
	font-weight: bold;
	color: #FFFFFF;
}



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

/* 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: #FFFFFF;
	width: auto;
	margin-top: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	text-align: left;
}

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

.housebutton {
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight: bold;
	text-align: left;
	margin-bottom: 1px;
	margin-top: 1px;
}

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

.housebutton ul li { }

/* 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: #EA721C;
	background-color: #FFFFFF;
	border: 1px solid #EA721C;
}

/*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: #C6581D; /*-----this is where you change the button font color, when the button is hovered over*/
	background-color: #F9D6C3;
	text-decoration: none;
	border: 1px dotted #EA721C;
}

.title {
	padding: 0;
	font-size: 120%;
	color: #663300;
	margin: 12px 0;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-variant: small-caps;
	text-transform: none;
}





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


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


.ThumbnailLink {
text-align: center;
}

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

.ThumbnailLink a:hover .Caption {
	text-decoration: none;
	color: #C6581D;
}

/* -- Horizontal Header Nav --- */

.HeaderNav {
	position: absolute;
	top: 0px;
	width:1000px;
	text-align:left;
	background-color: #EA721C;
	padding-top: 5px;
	padding-bottom: 5px;
	left: 0px;
	font-weight: bold;
}
.HeaderNav ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.HeaderNav ul li {
	display: inline;
	text-align: center;
	padding-right: 10px;
	padding-left: 10px;
}

.HeaderNav a {
	text-align: center;
	color: #FFFFFF;
	margin-right: 10px;
	margin-left: 10px;
}

.HeaderNav a:visited {
	color: #FFFFFF;
	text-decoration: none;
}

.HeaderNav a:hover {
	color: #C6581D;
	text-decoration: underline;
}


/* -- Horizontal Footer Text NavBar -- */

.text-NavBar {
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
	margin: 12px auto 12px auto;
	background-color: #EE9948;
	width: 100%;
	font-weight: bold;

}

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

.text-NavBar ul li {
	display: inline;
	background-color: transparent;
	text-align: center;
}

.text-NavBar a {
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	padding: 0 4px;
	font-weight: bold;
}

.text-NavBar a:visited {
	color: #FFFFFF;
	text-decoration: none;
}

.text-NavBar a:hover {
	color: #C6581D;
	text-decoration: underline;
}



/* ------ Section 6 - Specific Font Styles ------ */

#LeftColumn {
	font-size: 90%;
	color: #663333;
}

#Footer {
font-size: 80%;
}
.Title {
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
	background-color: #FF6600;
	width: 100%;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
}

h1 {
	background-color: transparent;
	color: #663300;
	margin-top: 15px;
	font-family: "Kozuka Gothic Pro R", Kalinga, Arial;
	text-align: center;
	clear: both;
	margin-bottom: 15px;
	line-height: 25px;
	font-variant: normal;
	text-transform: none;
}


h2 {
	color: #996633;
	font-weight: normal;
	background-color: transparent;
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
	clear: both;
	margin-top: 30px;
	margin-bottom: 30px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #996633;
	font-variant: small-caps;
}

h3 {
	color: #996633;
	font-weight: bold;
	background-color: transparent;
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
	clear: both;
	font-variant: normal;
}

h4	{
	color: #996600;
	font-weight: bold;
	background-color: transparent;
	font-variant: small-caps;
	font-size: 16px;
}
h5 {
	font-weight: bold;
	color: #FF6600;
	background-color: transparent;
	font-size: 12px;
}

h6 {
	font-weight: bold;
	color: #FFFFFF;
	background-color: #FF6600;
	font-size: 12px;
}


h2, h3, h4, h5, h6 {
	line-height: 25px;
}

.Large {
	font-size: 16px;
	color:#0000FF;
	background-color:#FFCC99;
	font-weight: bold;
	text-transform: uppercase;
}
.Small {
	font-size: 85%;
	font-style: italic;
	font-weight: bold;
	color: #FF6600;
}
.blackSmall	{
	font-size: 85%;
	color: #000000;
	font-weight: normal;
}

.blackMedium	{
	font-size: 100%;
	color: black;
}

.blackLarge	{
	font-size: 115%;
	color: black;
	font-style: italic;
	font-weight: bold;
	line-height: 20px;
}
.red {
	font-weight: bold;
	color: #FF0000;
}

.shoutCaps {
	font-weight: bold;
	font-size:36px;
	color: #FF0000;
}


#LeftColumn h4 {
	font-size: 90%;
	color: #996633;
	margin-top: 0;
}

#RightColumn h4 {
	font-size: 95%;
	color: #996633;
	margin-top: 0px;
}

.Caption {
	font-size: 90%;
	color: #996633;
	clear: both;
	line-height: 14px;
	font-weight: bold;
}

.blockquote {
	color: #000000;
	font-size: 100%;
	line-height: 18px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-top: 5px;
	margin-right: 56px;
	margin-bottom: 5px;
	margin-left: 50px;
	font-style: italic;
	background-color: #F2EBE1;
	padding-right: 10px;
	padding-left: 10px;
	border-top: 1px solid #CCCCCC; 
	border-bottom: 1px solid #CCCCCC;

}


/* ------ Section 7 - Boxes & Lines ------ */


.CalloutBox {
	background-color: #FFF8EC;
	width: 85%;
	border: 1px dotted #8f8fb3;
	margin: 18px auto 24px auto;
	padding: 4px;
	color: #663300;
}

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


.ReminderBox {           /* the container box */
	background-color: #ffffcc;
	width: 24%;
	border: 1px solid #8f8fb3;
	margin: 0 0 12px 18px;
	float: right;
}

.ReminderBox h6 {
	margin: 0;
	padding: 2px;
	text-align: center;
	font-weight: bold;
	font-size: 12px;
	color: #FFFFFF;

}

.ReminderBox p {
	font-size: 85%;
	padding: 0 4px;
	line-height: 13px;
}

.RightColumnBox {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 90%;
	padding: 5px;
	margin: 0 auto 12px auto;
	clear: both;
	border: 1px solid #FF6600;
}

.AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter468, .AdSenseBoxRightColumn {
	padding: 5px;
	background-color: #FFF;
	border: 0px;
}

.AdSenseBoxLeft {
	position: relative; /* IE6 */
	float: left;
	margin-top: 0;
	margin-right: 18px;
	margin-bottom: 12px;
	margin-left: 0px;
	padding-left: 15px;
}

.AdSenseBoxLeft a	{
	color:#996633;
	text-decoration: underline;
}

.AdSenseBoxLeft a:hover	{
	color:#0000FF;
}


.AdSenseBoxRight {
margin: 0 18px 12px 18px;
position: relative;
float: right;
}

.AdSenseBoxRight a	{
	color:#996633;
	text-decoration: underline;
}

.AdSenseBoxRight a:hover	{
	color:#0000FF;
}
.AdSenseBoxCenter468 {
	width: 468px;
	margin: 0 auto 12px auto;
	clear: both;
}
.AdSenseBoxCenter468 a	{
	color:#996633;
	text-decoration: underline;
}

.AdSenseBoxCenter468 a:hover	{
	color:#0000FF;
}

.AdSenseBoxRightColumn {
	padding: 0;
	clear: both;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 12px;
	margin-left: 5px;
}
.AdSenseBoxRightColumn a	{
	color:#EA721C;
	text-decoration: none;
}

.AdSenseBoxRightColumn a:hover	{
	color:#C6581D;
	text-decoration: underline;
}


.ReturnToNavBox {
	background-color: #fff;
	width: 100%;
	margin: 0 auto 12px auto;
	padding: 4px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #996633;
	border-bottom-color: #996633;
}
	
.box 	{
	border-bottom-color:#FC6808;
	border-top-color:#FC6808;
	padding: 4px;
	width: auto;
	border-top-width: medium;
	border-bottom-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	margin-left: 5px;
	margin-right: 5px;
	background-color: #FFF8EC;
}
.box-light 	{
	width: auto;
	border: 1px solid #FF9900;
	padding-right: 2px;
	padding-left: 2px;
	background-color: #FFF8EC;
	margin-top: 0px;
	margin-right: 2px;
	margin-bottom: 0px;
	margin-left: 2px;
}
.box-light h6 {
	margin: 0;
	padding: 2px;
	text-align: center;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #FF6600;
	font-size: 12px;
}

.box-light p	{ font-size: 85% 
}

.boxLightLeft	{
	float: left;
	width: 45%;
	border: 1px solid #999999;
	padding: 4px;
	margin-left: 5px;
	margin-right: 0px;
	clear: both;
}

.boxLightRight	{
	float: right;
	width: 45%;
	border: 1px solid #999999;
	padding: 4px;
	margin-left: 0px;
	margin-right: 5px;
	clear: both;
}

.boxLines	{
	border-bottom: 1px solid #996600;
	border-top: 1px solid #996600;
}

.boxLines h1	{
	line-height: 10px;
	padding: 0px;
}

.box-half-left 	{
	float: left;
	border-bottom-color:#FC6808;
	border-top-color:#FC6808;
	padding: 4px;
	width: auto;
	border-top-width: medium;
	border-bottom-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	margin-left: 5px;
	margin-right: 5px;
	background-color: #FFF8EC;
}

.box-half-right 	{
	float: right;
	border-bottom-color:#FC6808;
	border-top-color:#FC6808;
	padding: 4px;
	width: auto;
	border-top-width: medium;
	border-bottom-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	margin-left: 5px;
	margin-right: 5px;
	background-color: #FFF8EC;
}

.tips-box-left 	{
	width: 45%;
	float: left;
	margin-right: 5px;
	margin-left: 0px;
	border-bottom-color:#FC6808;
	border-top-color:#FC6808;
	padding-right: 3px;
	padding-left: 5px;
	border-top-width: medium;
	border-bottom-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	background-color: #FFF8EC;
	
}
.tips-box-right 	{
	width: 49%;
	float: left;
	margin-right: 0px;
	margin-left: 5px;
	border-bottom-color:#FC6808;
	border-top-color:#FC6808;
	padding-right: 0px;
	padding-left: 5px;
	border-top-width: medium;
	border-bottom-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	background-color: #FFF8EC;
	
}

.PlainDivLeft	{

	float: left;
	width: 45%;
	padding: 4px;
	margin-left: 5px;
	margin-right: 0px;
	clear: both;
}

.PlainDivRight	{
	float: right;
	width: 45%;
	padding: 4px;
	margin-left: 0px;
	margin-right: 5px;
	clear: both;
}
.ImageBlock		{
	padding:5px;
	text-align:center;
	width: 140px;
	margin: 0px auto 7px auto;
}

.ImageBlockFloat-Left {
	padding:5px;
	text-align:center;
	width:auto;
	float:left;
	margin: 0 5px 7px 0;
	border: 1px solid #999999;
}

.ImageBlockFloat-Right {
	padding:5px;
	text-align:center;
	width: 170px;
	float: right;
	width: 45%;
	margin: 0 5px 7px 0;
	border: 1px solid #663300;
} 

.GreyBorderBox	{
	width: auto;
	background-color: #fff;
	font-size: 100%;
	font-weight: bold;
	margin: 8px auto 5px auto;
	padding: 2px 2px 5px 2px;
	text-align: center;
	border: 1px solid #CCCCCC;
}

.ecourseBox	{
	width: auto;
	background-color:#FFF8EC;
	font-size: 100%;
	font-weight: bold;
	margin: 8px auto 5px auto;
	padding: 2px 2px 5px 2px;
	text-align: center;
	border: 2px dashed #FF9900;
}

/* -- RSS Box -- */

#RSSbox {
	width: auto;
	background-color: #fff;
	font-size: 100%;
	font-weight: bold;
	margin: 8px auto 5px auto;
	padding: 2px 2px 5px 2px;
	text-align: center;
}

.hr-orange	{
	width: 75%;
	border-bottom: 1px solid #FC6808;
	
}
.hr-brown	{
	border-bottom: 1px solid #996633;
	width: 75%;
	
}	


/* ------ Section 8 - Frequently Used Styles ------ */


.clear {
clear: both;
}


img {
	border: 0px solid #663300;
}

img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a chance of moving out of image while image is expanding*/
}

/* -- lists -- */

#CenterColumn ul {
	list-style-type: none;
	list-style-image: url(../image-files/bullet-arrow.gif);
	list-style-position: outside;
	margin-top: 3px;
	margin-right: 3px;
	margin-bottom: 8px;
	margin-left: 0px;
}

#CenterColumn li {
	font-size: 12px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 8px;
	margin-left: 5px;
}


#CenterColumn ol {
list-style-type: decimal;
margin: 0 0 8px 10px;
}

#CenterColumn li {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 8px;
	margin-left: 5px;
}
#RightColumn ul {
	list-style-type: none;
	list-style-position: outside;
	margin-top: 3px;
	margin-right: 0px;
	margin-bottom: 8px;
	margin-left: 0px;
	list-style-image: url(../image-files/bullet-arrow.gif);
}

#RightColumn li {
	font-size: 12px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 8px;
	margin-left: 0px;
}


#RightColumn ol {
list-style-type: decimal;
margin: 0 0 8px 10px;
}

#RightColumn li {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 8px;
	margin-left: 5px;
}

/* -- floats -- */

.ItemRight {
	float: right;
	margin: 2px 0 12px 18px;
	text-align: center;
}

.ItemCenter {
margin: 2px auto 12px auto;
text-align: center;
clear: both;
}

.ItemLeft {
	float: left;
	text-align: center;
	margin: 2px 25px 12px 0px;
}

.center { 
text-align: center;
}

/* Extra Boxes etc. */

.OuterPanel {/* The background for the Image Panel */
	margin: 0.5em;
	padding: 0.5em;
	background: #ffffff;
	height: auto;
	/*	width: 640px;   To fix the width of the panel so it will not squish set width */
	font-family: Arial, Helvetica, sans-serif;
	width: auto;
}

.boxit {
	padding: 2px;
	font-size: 11px;
	width: 150px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 5px;
}

.BlockBorder {
	border-style:outset;
	border-color: #DEDEBE;
	border-width: thin;
	width: 125px;
	height: 111px;
}

.ImageBlock{
	padding:5px;
	text-align:center;
	width: 159px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 7px;
	margin-left: auto;
	border: 1px solid #c0c0c0;
}

.ImageBlockFloat-Left {
	padding:5px;
	text-align:center;
	width:159px;
	float:left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 7px;
	margin-left: auto;
	border: 1px solid #c0c0c0;
}

.ImageBlockFloat-Right {
	padding:5px;
	text-align:center;
	width: 170px;
	float: right;
	width: 159px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 7px;
	margin-left: auto;
	border: 1px solid #c0c0c0;
} 
/*
.table {
	
	padding: 0px;
	margin-left: 10px;
}
.tr, td {
	border: 1px solid;
	border-color: #DEDEBE;
	background-color: #FFFFFF;
	padding-left: 5px;
	font-size: 85%;
}
*/