/* CSS Document */

body {
max-width: 1050px;
background-color:#ffffff; 
font-family: Arial, Verdana,  sans-serif;
font-size: 93%; /*leave this*/
color: #000099;
margin:auto;
padding:0;
text-align:left;
}


.max-width {
width:auto;
}

table {
font-size:100%; 
color:inherit;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}


hr{
border: 0;
color:#ccc;
background-color: #ccc;
height: 2px;
width: 95%;
text-align: left;
}

 
ul {
list-style-type: none;
padding-left: 0;
margin-left: 10px;
}
 
li.custom {
background: url(http://www.familyfuncartoons.com/images/button3.jpg) left center no-repeat;
padding-left: 20px;
margin-bottom: 10px;
}
 

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

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


h1 { font-family: Arial, Verdana, sans-serif; font-size: 150%;  color: #333333; text-align:center;}
h2 { font-family: Arial, Verdana, sans-serif; font-size: 116%;  color: #000066; text-align:center;}
h3 { font-family: Arial, Verdana, sans-serif; font-size: 108%;  color: #000066; text-align:center;}



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

td.headerbg {
background-color:#fff;
 font-size: 93%; 
}

td.spacerbg {
background-color:#fff;
 font-size: 93%;  
}

td.contentbg {
background-color:#fff;
border-left: 1px solid #cccccc;
border-right: 1px solid  #cccccc;
border-top: 1px solid  #cccccc;
border-bottom: 1px solid  #cccccc;
font-size: 93%; 
color:inherit;
padding:10px;
}

td.rightbg {
font-family: Arial, Verdana, sans-serif;
font-size: 86%;
color:inherit;
background-color:#fff; 
padding:5px;
}

td.leftbg {
font-size: 86%;
color:inherit;
margin-left: 5px;
background-color:#fff;
padding:5px; 
}

td.footerbg {
font-size: 86%;
color:inherit;
background-color:#c97fc9;
padding:5px; 
}

.hbg{
background-color:#b74ec3; 
color:#fff;
width: auto;
text-align:center;
}

.hbg2{
background-color:#b74ec3; 
color:#fff;
width: 30px;
text-align:left;
}

.hbg2grey{
background-color:#ccccff; 
color:#fff;
width: 40px;
text-align:left;
}

.right-column-image { text-align: center; position:relative } 

.storyInput {
height: 150px;
}


#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th 
{
font-size:1em;
border:1px solid #d38ed2;
padding:3px 7px 2px 7px;
}
#customers th 
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#c460c3;
color:#ffffff;
}
#customers tr.alt td 
{
color:#000000;
background-color:#e8e7e8;
}
/* information below is to remove the link styling for anchor links.
Just leave this as it is.... and shouldn't be modified */
a.jumplink{
text-decoration: none;
font-size: 100%; 
background-color: transparent;
color: #000;
}

a:hover.jumplink  {
text-decoration: none;
font-size: 100%; 
background-color: transparent;
color: #000;
} 



#navigator {}

.housebutton {
line-height: 90%;
}

.housebutton a {
font-size: 93%;
font-family:  Verdana, sans-serif;
}
.housebutton a:hover {
font-size: 93%;
font-family:  Verdana, sans-serif;
}

#navigator {
background-color: transparent;
border:  #000066;
width: auto;
margin-top: auto;
margin-left: 10px;
margin-right: auto;
padding: 2px;
text-align: left;
}

.housebutton {
font-weight: bold;
text-align: left;
margin-bottom: 1px;
margin-top: 1px;

}

.housebutton a {
padding: 4px;
text-decoration: none;
display: block;
color: #6666ff; 
background-color: #dfe0ec;
border-top: none;
border-left: none;
border-bottom: none;
border-right: none;

}

.housebutton a:hover {
color: #000066; /*-----this is where you change the button font color, when the button is hovered over*/
background-color: #ccc;
border-top:  none;
border-left: none;
border-bottom:  none;
border-right: none;
}

div.full-width-box {
   background-color: #ccccff;
	margin: 15px 10px 10px 0px;
	padding: 15px;
   border: 1px solid #551A8B;

}

div.full-width-box-green {
   background-color: #eaf0ea;
	margin: 1px 1px 1px 1px;
	padding: 5px;
   border: 1px solid #e0e7e0;
float: left;
}

div.full-width-box-pink {
   background-color: #fcd4d4;
	margin: 5px 5px 5px 5px;
	padding: 7px;
   border: 1px solid #551A8B;
}

div.full-width-box-white {
   background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	padding: 7px;
   border: 1px solid #ffffff;
}
div.full-width-box-purple {
   background-color: #fbd3d3;
	margin: 15px 10px 10px 0px;
	padding: 10px;
   border: 1px solid #551A8B;
/*float: center;*/
}

div.full-width-box7 {
   background-color: #ccccff;
	margin: 15px 10px 10px 0px;
	padding: 15px;
   border: 1px solid #551A8B;
/*float: center;
*/}

div.full-width-box5 {
   background-color: #ccccff;
	margin: 15px 10px 10px 0px;
	padding: 15px;
   border: 1px solid #551A8B;
/*float: center;*/
}

div.full-width-box6 {
   background-color: #ccffcc;
	margin: 15px 10px 10px 0px;
	padding: 15px;
   border: 1px solid #551A8B;
/*float: center;*/
}

div.center-box {
   width: 50%;
   background-color: #9f9cfe;
	margin-left:auto;
	margin-right:auto;
	padding: 15px;
   border: 1px solid #551A8B;

}

div.full-width-box2 {
   background-color: #dfe3e4;
	margin: 1px 1px 1px 1px;
	padding: 4px;
   border: 1px solid #fff;
	float: left; 
}

div.full-width-boxpg {
   background-color: #e3fae3;
   margin: 1px 1px 1px 1px;
   padding: 4px;
   border: 1px solid #cfe2cf;
   float: left;

}

div.full-width-box3 {
background-color: #ccccff;
margin: 5px 5px 5px 5px;
padding: 15px;
float: left;
}

div.full-width-box4 {
background-color: #dae3e3;
margin: 2px 2px 2px 2px;
padding: 10px;
border: 1px solid #6633ff;
float: left;
}

div.full-width-text-box {
background-color: #fff;
margin: 2px 2px 2px 2px;
padding: 5px;
border: 1px solid #6633ff;
}	

div.full-width-text-box2 {
background-color: #ffcccc;
margin: 2px 2px 2px 2px;
padding: 5px;
border: 1px solid #6633ff;
}	

div.full-width-text-box2 {
background-color: #ffcccc;
margin: 2px 2px 2px 2px;
padding: 5px;
border: 1px solid #6633ff;
float: left;
}	
/*** right column Half of width box left ***/
div.half-width-box-left {
   background-color: #ffcdcd;
	margin: 2px 2px 2px 2px;
	border: 1px solid #551A8B;
	padding: 10px;
	width: 50%;
	float: left;
}

div.half-width-box-left2 {
   background-color: #d4e1eb;
	margin: 2px 2px 2px 2px;
	border: 1px solid #cccccc;
	padding: 10px;
	width: 50%;
	float: left;
	
}
/*** right column Half of width box right ***/
div.half-width-box-right {
   background-color: #c0e7c0;
	margin: 5px 5px 5px 5px;
	border: 1px solid #551A8B;
	padding: 10px;
	width: 50%;
	float: right;
		
}
div.half-width-box-center {
   background-color: #fff;
	margin: 1px 1px 1px 1px;
	border: 1px solid #fff;
	padding: 10px;
	width: 50%;
	/*float: center;*/
}
div.half-width-box-right2 {
   background-color: #beebbe;
	margin: 2px 2px 2px 2px;
	border: 2px solid #660066;
	padding: 10px;
	width: 40%;
	float: right;
	}
	
	div.textbox {
border:1px solid #000;
background-color: #ccc;
color: #fff;
font-weight: bold;
padding: 10px;
/*-moz-border-radius: 5px;
-webkit-border-radius: 5px;
*/ }

/*** Picture inside the text ***/
.img-float-left {
	float: left;
	padding: 3px;
	margin-right: 5px;
	border: 1px solid #6666ff;
}
.img-float-right {
	float: right;
	padding: 2px;
	margin-left: 5px;
	border: 0px solid #7f628e;
}
/*** Clearing of a float ***/
div.clear {
	clear: both;
	width: 100%;
	height: 1px;
}