/* Educational press screen is divided into six functional groups:
	Sample output - shadow box holding sample screenshot (dynamic)
	Intro - Blurb the site, quick intro, link to help.
	Pick worksheet - Pick one of basic worksheet styles.
	Get word list - Choose/edit/upload word/answer list
	Tailor worksheet - unique options to tailor worksheet (outlines, numbering, etc.)
	End matter - Educational press copyright, etc.
*/

/* Global styles. */
h1, h2, h3, h4, h5, h6 {font-family: "Franklin Gothic No.2", "AGaramond bold", "Franklin Gothic", verdana, arial, helvetica;}
/*
  h1 {font-size: 150%;}
  h2 {font-size: 130%;}
  h3 {font-size: 115%;}
  h4 {font-size: 100%;}
  h5 {font-size: 100%;}
  h6 {font-size: 100%;}
*/
div.small {font-family: verdana, arial, helvetica; font-size: 75%; padding-top: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; padding-left: 0.5em;}
div.smaller {font-family: verdana, arial, helvetica; font-size: 65%; padding-top: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; padding-left: 0.5em;}

/* Border info for ep. */
td.epborder-left { 
	width: 4px; background-color:#666699; }

td.epborder-right { 
	width: 4px; background-color:#666699; }

/* Shadow border from threeplusone.com/code/shadow.html */
td.shadow-top { 
    height: 16px;  background-image: url(../images/shadow/top.gif)  }


td.shadow-topRight { 
    width: 28px; height: 20px; background-image: url(../images/shadow/topRight.gif)  }

td.shadow-right { 
    width: 28px; background-image: url(../images/shadow/right.gif);  }

td.shadow-bottomRight { 
    width: 28px; height: 38px; background-image: url(../images/shadow/bottomRight.gif)  } 

td.shadow-bottom { 
    height: 38px; background-image: url(../images/shadow/bottom.gif)  }

td.shadow-bottomLeft { 
	width: 16px; height: 16px; background-image: url(../images/shadow/bottomLeft.gif)  } 

td.shadow-left { 
	width: 16px; background-image: url(../images/shadow/left.gif)  }

td.shadow-topLeft { 
    width: 16px; height: 16px; background-image: url(../images/shadow/topLeft.gif)  }      

td.shadow-center { 
    background-color: white;  }

/* Style for intro (front matter) */
div.intro {
	/*margin-left:1.5em; */
	padding-left:1.5em; padding-bottom:0.5em;padding-top:1em; padding-right:1.5em;
	font-family: verdana, arial, helvetica; font-size: 80%; 
	/* background-color:#EAEAE1; */ 
	}

div.intro h1 {
	margin-top:0; padding-top:0;
	font-size: 170%; }

div.intro ul li {
	margin-left:0;
	float:none;
	height:auto;
	list-style-type:none; list-style-position:outside; }


div.intro em {
	font-weight:bold; font-style:normal; }

/* Style for pick worksheet menus (left margin for now.) */

.pick-worksheet-menus {
	display: block;
	font-family: verdana, arial, helvetica, sans-serif; font-size: 100%;
	text-decoration: none; 
	padding-left:10px;padding-top:10px; padding-right:0px;
	/* background-color:#EAEAE1;  */
	}

.pick-worksheet-menus h1 {
	font-size: 170%; font-style: normal; font-weight: bold;
	margin-bottom:0px; padding-bottom:0px; }
.pick-worksheet-menus h2 {
	font-size: 105%; font-style: normal; font-weight: bold;
	padding-left:0px;padding-top:0px; padding-bottom:10px;padding-right:0px;
	margin-bottom:0px;  }
.pick-worksheet-menus h3 {
	font-size: 120%; font-style: normal; font-weight: bold;
	margin-bottom:0px; padding-bottom:0px; }

/* Styles for word list chooser */
div.word-chooser-menus {
	display: block;
	font-family: verdana, arial, helvetica; font-size: 80%; 
	/*background-color:#EAEAE1;*/
	background-color:#FFFFFF;
	/*padding-left:1.5em;*/ 
	padding-left:10px;padding-top:10px; padding-bottom:0px;padding-right:1.5em;
	/*padding-bottom:20px;*/
	 }

div.word-chooser-menus h1 {
	font-size: 170%; font-style: normal; font-weight: bold;
	margin-bottom:0px; padding-bottom:0px; }
div.word-chooser-menus h2 {
	font-size: 135%; font-style: normal; font-weight: bold;
	padding-left:0px;padding-top:0px; padding-bottom:10px;padding-right:0px;
	margin:0px;
	 }
div.word-chooser-menus h3 {
	font-size: 120%; font-style: normal; font-weight: bold;
	margin-bottom:0px; padding-bottom:0px; }

/* Tabbed menus for word list selection */
.top_nav {
	font-family: verdana, arial, helvetica; font-size: 80%; 
	position:relative; width:750px; height:60px; margin:0; padding:0; list-style:none; 
}

/* Use this as starting point to work out colored background for selected menu; can't figure it out right now. 4/20/07.
.top_nav li {
	width:auto;
	background-color:#E8D9D9;
}
 */
 
.top_nav li.select {
	float:left; padding-left:9px; background-color:#FFFFFF; background-image:url(../images/top_nav/left.gif); background-position:top left; background-repeat:no-repeat; cursor:pointer;
}
.top_nav li.select a {
	float:left; display:block; padding-right:9px; background-color:#FFFFFF; background-image:url(../images/top_nav/right.gif); background-position:top right; background-repeat:no-repeat;
	line-height:24px; text-decoration:none; font-weight:bold; color:#000; 
}
.top_nav li.hover {
	float:left; padding-left:9px; background-color:#FFFFFF; background-image:url(../images/top_nav/left_on.gif); background-position:top left; background-repeat:no-repeat; cursor:pointer;
}
.top_nav li.hover a {
	float:left; display:block; padding-right:9px; background-color:#FFFFFF; background-image:url(../images/top_nav/right_on.gif); background-position:top right; background-repeat:no-repeat;
	line-height:24px; text-decoration:none; font-weight:bold; color:#000; 
}
.top_nav li.active {
	float:left; padding-left:9px; background-color:#FFFFFF; background-image:url(../images/top_nav/left_active.gif); background-position:top left; background-repeat:no-repeat; cursor:pointer;
}
.top_nav li.active a {
/* Color for active bar is #D5BABA. Lighter version is #E8D9D9 */
	float:left; display:block; padding-right:9px; background-color:#FFFFFF; background-image:url(../images/top_nav/right_active.gif); background-position:top right; background-repeat:no-repeat;
	line-height:24px; text-decoration:none; font-weight:bold; color:#000; 
}

.sub {
	display:none; position:absolute; top:24px; left:0px; width:750px; margin:0; padding:0; list-style:none; background-color:#ffffff; 
}

.top_nav li.hover .sub {
	display:block;background-color:#ffffff; 
}
.top_nav li.active .sub {
	display:block; 
}
.sub li {
	float:left; padding:3px; cursor:pointer;
}
.sub li span {
	display:block; padding:0 9px; 
	line-height:24px; color:#000;
}
.sub li.shover {
	float:left; padding:3px; cursor:pointer;
}
.sub li.shover span {
	display:block; padding:0 9px; background-color:#000; 
	line-height:24px; color:#fff;
}
.sub li.sactive {
	float:left; padding:3px; cursor:pointer;
}
.sub li.sactive span {
	display:block; padding:0 9px; 
	line-height:24px; color:#000; font-weight:bold; text-decoration:underline;
}

.top_nav .sub li a {
	display:block; padding:0 9px; background-image:none;
	line-height:24px; color:#000; text-decoration:none; border:none; font-weight:normal; 
}
.top_nav .sub li a:hover {
	display:block; padding:0 9px; background-color:#000;
	line-height:24px; color:#fff;
}
.top_nav .sub li.sactive a {
	display:block; padding:0 9px; 
	line-height:24px; color:#000; font-weight:bold; text-decoration:underline;
}

/* styles for vertical menu. */
* html ul li { float: left; }
* html ul li a { height: 1%; }

.ver_nav {
	width:150px; margin:0; padding:0; list-style:none; border-bottom:1px solid #000;
}
.ver_nav li.select {
	position:relative; border:1px solid #000; border-bottom:0px; background-color:#C3AAAE; cursor:pointer; 
}
.ver_nav li.select a {
	display:block; width:128px; padding:5px 10px; 
	text-decoration:none; color:#000; 
}
.ver_nav li.hover {
	position:relative; border:1px solid #000; border-bottom:0px; background-color:#B9B9B9; cursor:pointer; 
}
.ver_nav li.hover a {
	display:block; width:128px; padding:5px 10px; 
	text-decoration:none; color:#fff; 
}
.ver_nav li.active {
	position:relative; border:1px solid #000; border-bottom:0px; background-color:#C3AAAE; cursor:pointer; 
}
.ver_nav li.active a {
	display:block; width:128px; padding:5px 10px; 
	text-decoration:none; color:#000; font-weight:bold;
}

.ver_sub {
	display:none; position:absolute; top:-1px; left:148px; width:150px; margin:0; padding:0; list-style:none; border-bottom:1px solid #000; background-color:#fff;
}
.ver_nav .ver_sub li {
	border:1px solid #000; border-bottom:0px; background-color:#C3AAAE; cursor:pointer; 
}
.ver_nav .ver_sub li a {
	display:block; padding:5px 10px; 
	text-decoration:none; color:#000; font-weight:normal;
}
.ver_nav .ver_sub li a:hover {
	display:block; padding:5px 10px; 
	text-decoration:none; color:#fff; background-color:#B9B9B9; 
}

.ver_nav .ver_sub li.sactive a {
	display:block; padding:5px 10px; 
	text-decoration:none; color:#000; font-weight:bold;
}
.ver_nav .ver_sub li.sactive a:hover {
	display:block; padding:5px 10px; 
	text-decoration:none; color:#fff; background-color:#B9B9B9; font-weight:bold;
}

.options-form {
	display: block;
	text-decoration: none; 
	padding-left:10px;padding-top:10px; padding-right:0px;
	/* background-color:#EAEAE1;  */
}
.options-form table {
	font-family: verdana, arial, helvetica, sans-serif; font-size: 80%;
}
.options-form table h1 {
	font-size: 170%; font-style: normal; font-weight: bold;
	margin-bottom:0px; padding-bottom:0px; }
.options-form table h2 {
	font-size: 135%; font-style: normal; font-weight: bold;
	padding-left:0px;padding-top:0px; padding-bottom:10px;padding-right:0px;
	margin:0px;
	 }
.options-form table h3 {
	font-size: 120%; font-style: normal; font-weight: bold;
	margin-bottom:0px; padding-bottom:0px; }

.list-wizard {
	display: block;float:none;height:auto;
	text-decoration: none; 
	font-family: verdana, arial, helvetica, sans-serif; font-size: 80%;
	padding-left:10px;padding-top:10px; padding-right:0px;
	background-color:#EAEAE1; 
}
.list-wizard table {
	font-family: verdana, arial, helvetica, sans-serif; font-size: 80%;
}
.list-wizard li {
	float:none;height:auto;
}
.list-wizard table h1 {
	font-size: 170%; font-style: normal; font-weight: bold;
	margin-bottom:0px; padding-bottom:0px; }
.list-wizard table h2 {
	font-size: 135%; font-style: normal; font-weight: bold;
	padding-left:0px;padding-top:0px; padding-bottom:10px;padding-right:0px;
	margin:0px;
	 }
.list-wizard table h3 {
	font-size: 120%; font-style: normal; font-weight: bold;
	margin-bottom:0px; padding-bottom:5px; }
.list-wizard table h4 {
	font-size: 100%; font-style: normal; font-weight: bold;
	margin-bottom:0px; padding-bottom:4px; }

.list-wizard h1 {
	font-size: 170%; font-style: normal; font-weight: bold;
	margin-bottom:0px; padding-bottom:0px; }
.list-wizard h2 {
	font-size: 135%; font-style: normal; font-weight: bold;
	padding-left:0px;padding-top:0px; padding-bottom:10px;padding-right:0px;
	margin:0px;
	 }
.list-wizard h3 {
	font-size: 120%; font-style: normal; font-weight: bold;
	margin-bottom:0px; padding-bottom:5px; }
.list-wizard h4 {
	font-size: 100%; font-style: normal; font-weight: bold;
	margin-bottom:0px; padding-bottom:4px; }