/* storyteller CSS1 */

/*
1.default html styles
2.outer header and footer styles
3.storyteller header and footer
4.general text styles
5.link styles
6.background colors
7. navigation tabs
*/

/*----------------------------------------------------------------------*/
/* default html styles */

.cat-body {
	background-color: #f9F9F0;
        padding: 20px;
        border: dotted 1px #399;
}

.cat-body img {
        display: block;
}

.cat-body h1 {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 1.7em; 
	line-height: normal; 
	font-weight: bold; 
	color: #000000; 
	display: inline;
}

.cat-body h2 {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 1.2em; 
	line-height: normal; 
	font-weight: bold; 
	color: #000000;
	display: inline;
}

.cat-body h3 {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 1.1em; 
	line-height: normal; 
	font-weight: bold; 
	color: #000000; 
	display: inline;
}

.cat-body h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 1em; 
	line-height: normal; 
	font-weight: bold; 
	color: #000000; 
	display: inline;
}

.cat-body h5 {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 1em; 
	line-height: normal; 
	font-weight: normal;
	color: #000000; 
	display: inline;
}

.cat-body hr {
	padding-top: 0px; 
	padding-bottom: 0px; 
	margin-top: 0px; 
	margin-bottom: 0px; 
	height: 1px; 
	width: 100%; 
	background-color: #666666;
}

.cat-body input { 
	margin: 0px; 
	background-color: white;
}

.cat-body li {
	margin-left: 10px; 
	margin-bottom: 1em; 
	color: #ff00ff; 
	list-style-image : url(../images/bullet.png);
}

.cat-body p {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 90%; 
	font-style: normal; 
	line-height: 1.3em; 
	font-weight: normal; 
	color: #000000; 
	margin: 0px; 
	padding: 5px 0px 0px; 
}

.cat-body select { margin: 0px; }

.cat-body textarea { margin: 0px; }

.cat-body th { 
	text-align: left; 
	background-color: #efefef; 
	font-weight: bold;
}

.cat-body th p {font-weight: bold;}

.cat-body ul {margin-left: 10px;}


/*----------------------------------------------------------------------*/
/* storyteller header and footer */

.cat-body .foot { font-size: 80%; background-color: transparent;}
.cat-body td.foot a:link { color: #339999;}
.cat-body td.foot a:hover { color: #336666;}


/*----------------------------------------------------------------------*/
/* general styles */


.cat-body .caption { 
	color: #000000; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 0.8em; 
	line-height: 1.3em;
}


.cat-body table.chart td {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	/* font-size: 60%; */
	font-style: normal; 
	line-height: 1.3em; 
	font-weight: normal; 	
	font-variant: normal; 
	text-transform: none; 
	background-color: transparent; 
	color: #000000; 
	margin: 0px; 
	padding: 0px; 
	vertical-align: top;
}


.cat-body a img.ib { border: 1px solid; border-color: #666666;}
.cat-body img.ib { border: 1px solid; border-color: #666666;}
.cat-body div.ib { border: 1px solid; border-color: #666666;}



/* form errors */

.cat-body .error { color: #ff0000; }

/*----------------------------------------------------------------------*/
/* link styles */

.cat-body a:link {text-decoration:none; color:#006699;}
.cat-body a:visited {text-decoration:none; color:#006699;} 
.cat-body a:hover {text-decoration:none; color:#003366; background-color: #E3F2FE;} 
.cat-body a:active {text-decoration:none; color:#006699;} 

.cat-body div.nav a:link { 
	height: 100%; 
	display: block; 
	margin:0px; 
	width:100%; 
	font-size: 1em; 
	font-weight: bold; 
	border-top:0px solid #ffffff; 
	background-color: #ffffff; 
	color:#006699; 
	text-decoration:none; 
	border-right: 1px solid #006699;
} 

.cat-body div.nav a:hover {  
	display: block;
	background-color:#99CCFF; 
	color:#000000;
} 

.cat-body div.nav a:active {  
	display: block;
	background-color: #006699; 
	color: #ffffff; 
	font-weight: bold;
} 

.cat-body div.nav a:visited { 
	height: 100%; 
	display: block; 
	font-weight: bold;
	background-color: transparent; 
	color:#006699; 
}

.cat-body div.step a:link { 
	width: 100px; 
	height: 40px; 
	background-color: #ffffff; 
	color: #000000; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 1em; 
	font-weight: bold; 
	line-height: 1.3em; 
	display: block;
}

.cat-body div.step a:active { 
	width: 100px; 
	height: 40px; 
	background-color: #AFD5F2; 
	color: #000000; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 1em; 
	font-weight: bold; 
	line-height: 1.3em; 
	display: block;
}

/*----------------------------------------------------------------------*/
/* background colors */

.cat-body div.cbg1 { display: block; background-color: #efefef; padding-left: 10px;} /* light grey */

.cat-body div.cbg2 {display: block; background-color: #dddddd; padding-left: 10px;} /* grey */

.cat-body td.cbg3 {background-color: #339999; color: #ffffff;} /* green */

.cat-body td.cbg3 p {display: block; background-color: #339999; color: #ffffff;} /* green */

.cat-body td.cbg3 p a {background-color: #339999; color: #ffffff; text-decoration: underline;} /* green */
.cat-body td.cbg3 p a:hover {background-color: #339999; color: #ffffff; text-decoration: underline;} /* green */
.cat-body td.cbg3 p a:visited {background-color: #339999; color: #ffffff; text-decoration: underline;} /* green */

.cat-body td.cbg4 {background-color: #EEEEDF;} /* beige */

.cat-body td.cbg5 {background-color: #E3E6B8;} /* list bar */

.cat-body #general { 
	display: block; 
	width: 190px; 
	background-color: #006699; 
	color: #efefef; 
	padding-left: 5px; 
	padding-right: 5px; 
	padding-top: 5px;
	padding-bottom: 0px;
}

.cat-body #general h2 { 
	display: block; 
	width: 190px; 
	background-color: #006699; 
	color: #ffffff;
}

.cat-body #general p { 
	display: block; 
	width: 170px; 
	background-color: #006699; 
	color: #ffffff; 
	font-size: 90%; 
	padding-bottom: 10px;
}

.cat-body #general a { color: #ffffff;}

.cat-body #general a:hover { background-color: #99cc66;}


.cat-body #logtable1 {
	float: left; 
	display: block; 
	width: 260px; 
	background-color: transparent;
}


.cat-body #logtable2 {
	float: left; 
	display: block; 
	width: 260px; 
	background-color: transparent;
}




/*----------------------------------------------------------------------*/
/* help sidebar */

.cat-body div.help {
  	background-color: transparent; 
	padding-left: 6px;
	padding-right: 6px;
	min-height: 200px;
}

.cat-body div.help p {
	margin-bottom: 0.5em;
}


/*----------------------------------------------------------------------*/
/* navigation tabs */

.cat-body .navdiva {
	display: block; 
	height: 36px; 
	background-color: #006699;
}

.cat-body .navdivb {
	display: block; 
	height: 36px; 
	background-color: #006699;
}

.cat-body .navdivc {
	display: block; 
	height: 36px; 
	background-color: #006699;
}

.cat-body .navdivd {
	display: block; 
	height: 36px; 
	background-color: #006699;
}

.cat-body .navdive {
	display: block; 
	height: 36px; 
	background-color: #006699;
}

.cat-body .oatbg {
	display: block; 
	height: 3px; 
	background-color: #006699;
}



/*----------------------------------------------------------------------*/
/* right-aligned buttons */

.cat-body div.button {
  background-color: transparent; 
  margin-bottom: 8px;
  text-align: right;
}

/*----------------------------------------------------------------------*/
/* home page */


.cat-body div.intro, div.intro_buttons {
  background-color: transparent; 
  margin-top: 10px;
}

.cat-body div.intro {
  margin-left: 5px;
}


/*----------------------------------------------------------------------*/
/* text input page */

.cat-body div.bgstep1 {
	display: block; 
	background-color: #dddddd; 
	padding-left: 10px;
}

.cat-body #option1 {
	vertical-align: top; 
	background-color: #009999; 
	height: 100%; 
	width: 137px; 
	font-weight: bold; 
	color: #ffffff; 
	padding-left: 5px; 
	padding-bottom: 5px; 
	padding-top: 0px; 
	margin-right: 3px;
}

.cat-body #option1 a {color: #ffffff;}

.cat-body #link1 {
	display: block; 
	vertical-align: top; 
	background-color: #dddddd; 
	height: 100%; 
	width: 137px; 
	font-weight: bold; 
	color: #000000; 
	margin-right: 3px;
}


.cat-body #link1 a:link {
	display: block; 
	padding-left: 5px; 
	padding-bottom: 5px; 
	padding-top: 0px;
}


.cat-body #link1 a:hover {
	display: block; 
	background-color: #80CCCC;
}

.cat-body #step1 { 
	display: block; 
	width: 190px; 
	background-color: #009999; 
	color: #efefef; 
	padding-left: 5px; 
	padding-right: 5px; 
	padding-top: 5px;
}

.cat-body #step1 h2 { 
	display: block; 
	width: 190px; 
	background-color: #009999; 
	color: #ffffff;
}


.cat-body #step1 p { 
	display: block; 
	width: 170px; 
	background-color: #009999; 
	color: #ffffff; 
	font-size: 90%; 
	padding-bottom: 10px;
}


.cat-body #step1 a { color: #ffffff;}

.cat-body #step1 a:hover { background-color: #99cc66;}


/*----------------------------------------------------------------------*/
/* upload image page */

.cat-body div.bgstep2 {
	display: block; 
	background-color: #dddddd; 
	padding-left: 10px;
}

.cat-body #option2 {
	vertical-align: top; 
	background-color: #006699; 
	height: 100%; 
	width: 137px; 
	font-weight: bold; 
	color: #ffffff; 
	padding-left: 5px; 
	padding-bottom: 5px; 
	padding-top: 0px; 
	margin-right: 3px;
}


.cat-body #option2 a {color: #ffffff;}

.cat-body #link2 {
	display: block; 
	vertical-align: top; 
	background-color: #dddddd; 
	height: 100%; 
	width: 137px; 
	font-weight: bold; 
	color: #000000; 
	margin-right: 3px;
}


.cat-body #link2 a:link {
	display: block; 
	padding-left: 5px; 
	padding-bottom: 5px; 
	padding-top: 0px;
}

.cat-body #link2 a:hover {
	display: block; 
	background-color: #80B3CC;
}

.cat-body #step2 { 
	display: block; 
	width: 190px; 
	background-color: #006699; 
	color: #efefef; 
	padding-left: 5px; 
	padding-right: 5px; 
	padding-top: 5px;
} 


.cat-body #step2 h2 { 
	display: block; 
	width: 190px; 
	margin-top: 0px; 
	background-color: #006699; 
	color: #ffffff;
}


.cat-body #step2 p { 
	display: block; 
	width: 170px; 
	margin-top: 0px; 
	background-color: #006699; 
	color: #ffffff; 
	font-size: 90%; 
	padding-bottom: 10px;
}


.cat-body #step2 a { color: #ffffff;}


.cat-body #step2 a:hover { background-color: #99cc66;}


/*----------------------------------------------------------------------*/
/* preview page */

.cat-body div.bgstep3 {
	display: block; 
	background-color: #dddddd; 
	padding-left: 10px;
}

.cat-body #option3 {
	vertical-align: top; 
	background-color: #669900; 
	height: 100%; 
	width: 137px; 
	font-weight: bold; 
	color: #ffffff; 
	padding-left: 5px; 
	padding-bottom: 5px; 
	padding-top: 0px; 
	margin-right: 3px;
}

.cat-body #option3 a {color: #ffffff;}

.cat-body #link3 {
	display: block; 
	vertical-align: top; 
	background-color: #dddddd; 
	height: 100%; 
	width: 137px; 
	font-weight: bold; 
	color: #000000; 
	margin-right: 3px;
}

.cat-body #link3 a:link {
	display: block; 
	padding-left: 5px; 
	padding-bottom: 5px; 
	padding-top: 0px;
}

.cat-body #link3 a:hover {
	display: block; 
	background-color: #CCB380;
}

.cat-body #step3 { 
	display: block; 
	width: 190px; 
	background-color: #669900; 
	color: #efefef; 
	padding-left: 5px; 
	padding-right: 5px; 
	padding-top: 5px;
}

.cat-body #step3 h2 { 
	display: block; 
	width: 190px; 
	margin-top: 0px; 
	background-color: #669900; 
	color: #ffffff;
}

.cat-body #step3 p { 
	display: block; 
	width: 170px; 
	margin-top: 0px; 
	background-color: #669900; 
	color: #ffffff; 
	font-size: 90%; 
	padding-bottom: 10px;
}

.cat-body #step3 a { color: #ffffff;}
.cat-body #step3 a:hover { background-color: #99cc66;}



/*----------------------------------------------------------------------*/
/* finish page */

.cat-body div.bgstep4 {
	display: block; 
	background-color: #dddddd; 
	padding-left: 10px;
}

.cat-body #option4 {
	vertical-align: top; 
	background-color: #990066; 
	height: 100%; 
	width: 139px; 
	font-weight: bold; 
	color: #ffffff; 
	padding-left: 5px; 
	padding-bottom: 5px; 
	padding-top: 0px; 
	margin-right: 3px;
}

.cat-body #option4 a {color: #ffffff;}


.cat-body #link4 {
	display: block; 
	vertical-align: top; 
	background-color: #dddddd; 
	height: 100%; 
	width: 139px; 
	font-weight: bold; 
	color: #000000; 
	margin-right: 3px;
}

.cat-body #link4 a:link {
	display: block; 
	padding-left: 5px; 
	padding-bottom: 5px; 
	padding-top: 0px;
}

.cat-body #link4 a:hover {
	display: block; 
	background-color: #CC80B3;
}

.cat-body #step4 { 
	display: block; 
	width: 190px; 
	background-color: #990066; 
	color: #efefef; 
	padding-left: 5px; 
	padding-right: 5px; 
	padding-top: 5px;
}

.cat-body #step4 h2 { 
	display: block; 
	width: 190px; 
	margin-top: 0px; 
	background-color: #990066; 
	color: #ffffff;
}

.cat-body #step4 p { 
	display: block; 
	width: 170px; 
	margin-top: 0px; 
	background-color: #990066; 
	color: #ffffff; 
	font-size: 90%; 
	padding-bottom: 10px;
}

.cat-body #step4 a { color: #ffffff;}
.cat-body #step4 a:hover { background-color: #99cc66;}


/*----------------------------------------------------------------------*/
/* your stories */

.cat-body img.icon {
	padding-left: 5px;
	background-color: transparent;
}

/*----------------------------------------------------------------------*/
/* other */

.cat-body .listrule {
	padding-top: 10px; 
	padding-bottom: 10px; 
	margin-top: 0px; 
	margin-bottom: 0px; 
	height: 1px; 
	width: 100%; 
	background-color: transparent;
}



.cat-body .browse { background-color: #ffffff; }
.cat-body .preview { background-color: #ffffff; }




.cat-body .rulebg { 
	width: 774px; 
	height: 1px; 
	background-color: #006699; 
	padding:0px; 
	margin: 0px;
} 


.cat-body .storytellerbg { 
	background-color: #006699; 
	padding:0px; 
	margin: 0px;
} 


.cat-body .storytellerbg h2 {color: #ffffff; }


.cat-body #navbg { background-color: #efefef;}