/* 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 */

/* body, div, h1, h2, h3, h4, h5, input, label, li, p, span, td, th { */
body, div, h1, h2, h3, h4, h5, input, label, li, p, span, th {
  	background-color: transparent; 
  	color: #000000; 
/*  	font-family: Verdana, Arial, Helvetica, sans-serif; */
  	font-size: 10pt; 
  	font-style: normal; 
  	font-variant: normal;
  	line-height: normal;  
  	text-transform: none; 
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-left: 10px; 
	margin-right: 0px; 
	margin-top: 5px; 
	margin-bottom: 0px; 
	padding: 0px;
	background-color: #f9F9F0;
}

form { margin: 0px; }

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

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

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

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

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

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

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

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

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; 
}

select { margin: 0px; }

textarea { margin: 0px; }

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

th p {font-weight: bold;}

ul {margin-left: 10px;}


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

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


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


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


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;
}


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



/* form errors */

.error { color: #ff0000; }

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

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

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;
} 

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

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

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

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;
}

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 */

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

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

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

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

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

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

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

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

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

#general a { color: #ffffff;}

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


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


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




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

div.help {
  	background-color: transparent; 
	padding-left: 6px;
	padding-right: 6px;
	min-height: 200px;
	font-size: 90%; 
}

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


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

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

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

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

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

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

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



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

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

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


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

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


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

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

#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;
}

#option1 a {color: #ffffff;}

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


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


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

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

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


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


#step1 a { color: #ffffff;}

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


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

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

#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;
}


#option2 a {color: #ffffff;}

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


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

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

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


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


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


#step2 a { color: #ffffff;}


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


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

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

#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;
}

#option3 a {color: #ffffff;}

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

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

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

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

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

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

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



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

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

#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;
}

#option4 a {color: #ffffff;}


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

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

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

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

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

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

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


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

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

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

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



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




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


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


.storytellerbg h2 {color: #ffffff; }


#navbg { background-color: #efefef;}


/* For Sopse */

body, div, td {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-left: 0px; 
	margin-right: 0px; 
	margin-top: 0px; 
	margin-bottom: 0px; 
	padding: 0px;
}

table.cat_navbar {
	background-color: #f9F9F0;
}

table.cat_main {
	background-color: #f9F9F0;
}