p, table, tr, th, td, a, select, input, textarea, a, li, ul, h1, div, span {
	font-family: Arial, Helvetica, sans-serif; font-size: 9pt;}


INPUT, SELECT {}

input.mainbutton {margin: 2px 1px;}

.smalldropdown {color: #000000; font-weight: normal; font-size: 90%;}

.smallinput {background: #D7D7D7; color: #000000; font-weight: normal; font-size: 90%;
BORDER-top: #FFFFFF 1px solid; BORDER-left: #FFFFFF 1px solid; BORDER-bottom: #7A7A7A 1px solid; BORDER-RIGHT: #7A7A7A 1px solid;  background-image: url(../images/buttonback.gif); font-family: Arial, Helvetica, sans-serif;}

TEXTAREA,  {width: 100%;}

H1 {
   font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 125%;
	margin: 6px 0px 10px 0px;
	}

H2 {
	font-weight: bold;
	font-size: 110%;
	margin: 10px 0px 12px 0px;
	}

H3 {
	font-weight: bold;
	margin: 6px 0px 6px 0px; font-size: 100%;
	}

H4 {
	font-weight: bold; 	margin: 6px 0px 6px 0px; font-size: 100%;
	}

.smalltext {font-size: 90%;
	}

a img {border: none; margin-top: 0;}

.TableBG, table.TableBG {background-color: #dddddd;  empty-cells: show;}

div.TableRowOdd {border-top: 1px solid #dddddd;}
div.TableRowEven {border-top: 1px solid #dddddd;}

/*Standard Text Styles*/
.whitetext {
	color:#FFFFFF;
	}

.whitetextbold {
	color:#FFFFFF; font-weight:bold;
	}

.redtextbold {
	color:#A50000; font-weight:bold;
	}
	
.bluetextbold {
	color:#0000A5; font-weight:bold;
	}
	
.SystemAlertText{
	text-decoration: blink;
	font-weight: bold;
	font-size: 115%;
	padding: 12px;
	line-height: 36px;
	background-color: #A50000;
	color: #FFFFFF;
	}

.textbold {
	font-weight:bold;
	font-size: 105%;
	}

.textbigbold {
	text-decoration: none;
	font-weight:bold;
		font-size: 110%;
	}

.welcome {
	font-weight:bold;
	color:#446FC9;
	}

.Pending {	color: #000000;
font-weight:bold;
	}

.InProgress {
	color: #000000;
	font-style: italic;
	}
.Complete {	color: #000000;
}

.message {
   color: #000000;
   }
   
.message_replied {
   color: #000000;
   font-style: italic;
   }

.wronganswer {
	color: #A50000;
	font-weight: bold;
	}

.rightanswer {
	color: green;
	font-style:italic;
	}

.locked {
	color: #606060;
	}
	
.disabledtext, a.disabledtext {
	color: #606060;
		font-style:italic;

	text-decoration: none;
	}


.FormLabel{
	font-weight: normal;
	vertical-align: top;
	height: 44px;
	}

.FormEntry{
	font-weight: normal;
	vertical-align: top;
	height: 44px;
	}

/*@@ Trees @@*/

    .selectedoutcome {font-weight: bold; color: purple}
	.linkedoutcome {font-style: oblique; color: purple}
	
	td.tktreeroot, 
	.tktreeroot, 
	div.tktreeroot {font-weight: bold; color:black; text-decoration: none;}

	
	td.topleveltree, 
	.topleveltree, 
	div.topleveltree {font-weight: bold; color:blue; text-decoration: none; border-top: solid 1px #999;}
	
	span.topleveltree {font-weight: bold; color:blue;text-decoration: none; border-top: none;}
	
   a.topleveltree, 
	a.topleveltree:hover {font-weight: bold; color:blue;text-decoration: none; border-top: none;}

	td.topleveltree:hover, 
	.topleveltree:hover, 
	a.topleveltree:hover,
	div.topleveltree:hover {text-decoration: none;  background-color: #FFFCB6}

	td.secondleveltree, 
	.secondleveltree, 
	div.secondleveltree {font-weight: bold; color:darkgreen;text-decoration: none; border-top: solid 1px #bbb;}

	a.secondleveltree, 
	a.secondleveltree:hover {font-weight: bold; color:darkgreen;text-decoration: none; border-top: none;}
	
	td.secondleveltree:hover, 
	.secondleveltree:hover, 
	div.secondleveltree:hover {background-color: #FFFCB6}

	td.thirdleveltree, 
	.thirdleveltree, 
	div.thirdleveltree {font-weight: bold; color:indigo;text-decoration: none; border-top: solid 1px #bbb;}

	a.thirdleveltree, 
	a.thirdleveltree:hover {font-weight: bold; color:indigo;text-decoration: none; border-top: none;}
	
	td.thirdleveltree:hover, 
	.thirdleveltree:hover, 
	div.thirdleveltree:hover {background-color: #FFFCB6}

	tr.tktreehilite, .tktreehilite, div.tktreehilite	  {background-color:  #BFFBC7; border-top: solid 1px #999;}
	tr.tktreehilite:hover, .tktreehilite:hover, div.tktreehilite:hover  {background-color: #FFFCB6}
	tr.tktree, .tktree, div.tktree	  {background-color: white;}

	tr.tktree:hover, div.tktree:hover {background-color: #FFFCB6;}
	td.tktreedivider, .tktreedivider {border-top: solid 1px #ddd;}

	a.tktreelink {text-decoration: none;}
	a.tktreegrouplink, .tktreegrouplink {text-decoration: none; color:#990000}


/*---------- Outcomes Styles ----------*/

.outcomelist {margin-left:14px;}

/*---------- Tree Window Styles ----------*/




.lastLine {PADDING-LEFT: 6em}

.window {
	BORDER-top: #CCCCCC 1px solid; BORDER-left: #CCCCCC 1px solid;BORDER-bottom: #CCCCCC 1px solid; BORDER-RIGHT: #CCCCCC 1px solid; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; VISIBILITY: block; PADDING-BOTTOM: 1px; MARGIN: 0px; PADDING-TOP: 0px;  TEXT-ALIGN: left}

.titleBar {
	PADDING-LEFT: 0.5em;  MARGIN: 0px; CURSOR: default; BACKGROUND-COLOR: #FFFFFF; TEXT-ALIGN: right}

.titleBarText {FLOAT: left;}

.clientArea {
	 PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; PADDING-BOTTOM: 0.5em; MARGIN: 0px 0px 0px; OVERFLOW: auto; COLOR: #000000; BACKGROUND-COLOR: #ffffff}

/*---------- Button Styles ----------*/

.actionbutton {
background: url(../images/button_back.gif) -2px -2px;
	background-repeat: no-repeat; 
		text-decoration: none;
		font-family: verdana, sans-serif; font-size: 80%;
	 line-height: 11px;
	 height: 16px;
	 COLOR: #FFF; 
	 border-width: 1px 2px 2px 1px;
	 border-color: black;
	 }


/*----------DomCollapse Styles ----------*/		

		.trigger {
			cursor:pointer;
		}

		.triggeropen {
			cursor:pointer;
		}

		.trigger:hover{
			cursor:pointer;
		}	
		
		.expanded{
			cursor:pointer;
		}
		.expanded:hover{
			background:#eef;
			cursor:pointer;
		}
		.show{
           position:static;
           display: table;
		   margin: 4px 10px 10px 40px;
		   -height: 14px;		   
		}
		div> .show {
		width:92%;
		}
		
		.show .TableBorder {
			width:92%;
		}
		
		.hide{
			position:absolute;
			left:-999em;
			height:1px;
			width:100px;
			overflow:hidden;
		}

		.inside{
           position:static;
           display: table;
		   margin: 4px 10px 4px 10px;
		}

/* The main calendar widget.  DIV containing a table. */

div.calendar { BORDER-top: #CCCCCC 1px solid; BORDER-left: #CCCCCC 1px solid; BORDER-bottom: #7B7B7B 2px solid; BORDER-RIGHT: #7B7B7B 2px solid; BACKGROUND-COLOR: #FFFFFF;  }

	position: relative;
}

.calendar, .calendar table {
  font-size: 11px;
  color: #000;
  cursor: default;
  background: #eef;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* Header part -- contains navigation buttons and day names. */

.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  text-align: center;    /* They are the navigation buttons */
  padding: 2px;          /* Make the buttons seem like they're pressing */
}

.calendar .nav {
  background: #778 url(menuarrow.gif) no-repeat 100% 100%;
}

.calendar thead .title { /* This holds the current "month, year" */
  font-weight: bold;      /* Pressing it will take you to the current date */
  text-align: center;
  background: #fff;
  color: #000;
  padding: 2px;
}

.calendar thead .headrow { /* Row <TR> containing navigation buttons */
  background: #778;
  color: #fff;
}

.calendar thead .daynames { /* Row <TR> containing the day names */
  background: #bdf;
}

.calendar thead .name { /* Cells <TD> containing the day names */
  border-bottom: 1px solid #556;
  padding: 2px;
  text-align: center;
  color: #000;
}

.calendar thead .weekend { /* How a weekend day name shows in header */
  color: #a66;
}

.calendar thead .hilite { /* How do the buttons in header appear when hover */
  background-color: #aaf;
  color: #000;
  border: 1px solid #04f;
  padding: 1px;
}

.calendar thead .active { /* Active (pressed) buttons in header */
  background-color: #77c;
  padding: 2px 0px 0px 2px;
}

/* The body part -- contains all the days in month. */

.calendar tbody .day { /* Cells <TD> containing month days dates */
  width: 2em;
  color: #456;
  text-align: right;
  padding: 2px 4px 2px 2px;
}
.calendar tbody .day.othermonth {
  font-size: 80%;
  color: #bbb;
}
.calendar tbody .day.othermonth.oweekend {
  color: #fbb;
}

.calendar table .wn {
  padding: 2px 3px 2px 2px;
  border-right: 1px solid #000;
  background: #bdf;
}

.calendar tbody .rowhilite td {
  background: #def;
}

.calendar tbody .rowhilite td.wn {
  background: #eef;
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
  background: #D7E0F9;
  padding: 1px 3px 1px 1px;
  border: 1px solid #bbb;
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
  background: #cde;
  padding: 2px 2px 0px 2px;
}

.calendar tbody td.selected { /* Cell showing today date */
  font-weight: bold;
  border: 1px solid #000;
  padding: 1px 3px 1px 1px;
  background: #fff;
  color: #000;
}

.calendar tbody td.weekend { /* Cells showing weekend days */
  color: #a66;
}

.calendar tbody td.today { /* Cell showing selected date */
  font-weight: bold;
  color: #00f;
  text-align: right;
}

.calendar tbody .disabled { color: #999; }

.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
  visibility: hidden;
}

.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
  display: none;
}

/* The footer part -- status bar and "Close" button */

.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
  text-align: center;
  background: #556;
  color: #fff;
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  background: #fff;
  color: #445;
  border-top: 1px solid #556;
  padding: 1px;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
  background: #aaf;
  border: 1px solid #04f;
  color: #000;
  padding: 1px;
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  background: #77c;
  padding: 2px 0px 0px 2px;
}

/* Combo boxes (menus that display months/years for direct selection) */

.calendar .combo {
  position: absolute;
  display: none;
  top: 0px;
  left: 0px;
  width: 4em;
  cursor: default;
  border: 1px solid #655;
  background: #def;
  color: #000;
  font-size: 90%;
  z-index: 100;
}

.calendar .combo .label,
.calendar .combo .label-IEfix {
  text-align: center;
  padding: 1px;
}

.calendar .combo .label-IEfix {
  width: 4em;
}

.calendar .combo .hilite {
  background: #acf;
}

.calendar .combo .active {
  border-top: 1px solid #46a;
  border-bottom: 1px solid #46a;
  background: #eef;
  font-weight: bold;
}

.calendar td.time {
  border-top: 1px solid #000;
  padding: 1px 0px;
  text-align: center;
  background-color: #f4f0e8;
}

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
  padding: 0px 3px 0px 4px;
  border: 1px solid #889;
  font-weight: bold;
  background-color: #fff;
}

.calendar td.time .ampm {
  text-align: center;
}

.calendar td.time .colon {
  padding: 0px 2px 0px 3px;
  font-weight: bold;
}

.calendar td.time span.hilite {
  border-color: #000;
  background-color: #667;
  color: #fff;
}

.calendar td.time span.active {
  border-color: #f00;
  background-color: #000;
  color: #0f0;
}

.helplayer {
	background-color:#ffff99;
	layer-background-color:#ffff99;
	position:absolute;
	z-index:99;
	padding: 12px;
	width: 300px;
	BORDER-top: #333 1px solid;
	BORDER-left: #333 1px solid;
	BORDER-bottom: #000 2px solid;
	BORDER-RIGHT: #000 2px solid;
	visibility: hidden;
	margin: 10px 0px 10px 20px;


}

.hilitebox {
	background-color:#ffff99;
	layer-background-color:#ffff99;
	padding: 12px;
	BORDER-top: #333 1px solid;
	BORDER-left: #333 1px solid;
	BORDER-bottom: #000 2px solid;
	BORDER-RIGHT: #000 2px solid;
	margin: 10px 20px 10px 20px;


}

.forminstructions {margin: 12px 0px 0px 0px;}


/*fade_back popup styles*/

/* fade styles below */
html#fade-on,
#fade-on body{
	height:100%;
	overflow:hidden;
/* 	margin:0;  */
/* 	padding:0;*/
}
#fade-off body{
	overflow:auto;/* don't add this to the html element or IE crashes when javascript executes*/
/* 	margin:0;  */
/* 	padding:0;*/ taken out to match other tabs
}
#fade-on .fade{
	height:100%;
	width:100%;
  background:#000;
  overflow:auto;
	filter: alpha(opacity=20);
	-moz-opacity:0.2;
	opacity :0.2;
	position:relative;
}
#fade-on body{background-color:#000!important}

#fade-off .fade{
	height:auto;/* use 100% if layout is a 100% high version*/
	background:transparent;
	width:auto;
  overflow:visible;
}
#fade-on #popup {	
	display:block;
	position:absolute;
	top:0;
	right:20px;/* stop firefox hiding scrollbar*/
	height:100%;
	left:0;
  z-index:99;
	overflow:hidden;
}
#fade-off #popup{display:none;}

/* centering routine for message */
#xouter{
	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
}
#xcontainer {
	text-align: center;
	position:relative;
	vertical-align:middle;
	display:table-cell;
	width: 100%;
}	
#xinner {
	width: 552px;
	background:#fff;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	border:1px solid #000;
}
#xouter p1{margin-bottom:1em}


#popper1,
#popper2,
#popper3,
#popper4,
#popper5,
#popper6 {display:none;}

[if IE ]>
#fade-on #popup{left:0;width:100%;right:auto}
#xcontainer{top:50%}
#xinner{
	top:-50%;
	position:relative;
}
<![endif]


/*yahoo drag and drop*/
div.workarea { padding:10px; float:left }

ul.draglist { 
    position: relative;
    background: #f7f7f7;
    border: ;
    list-style: none;
    margin:0;
    padding:0;
}

ul.draglist li {
    margin: 1px;
    cursor: move; 
}

ul.draglist_alt { 
    position: relative;
    list-style: none;
    margin:0;
    padding:0;
    /*
       The bottom padding provides the cushion that makes the empty 
       list targetable.  Alternatively, we could leave the padding 
       off by default, adding it when we detect that the list is empty.
    */
    padding-bottom:20px;
}

ul.draglist_alt li {
    margin: 1px;
    cursor: move; 
}


li.list1 {
    border:1px solid #7EA6B2;
}

li.list2 {
    border:1px solid #6B4C86;
}


/*Right Pane Styles*/

.rightpane {
margin: 60px 12px 0px 0px;
background-image: url(../images/graybackgroundfade_light.gif); 
background-repeat: repeat-x; 
background-color: #e2e2e2;
BORDER-top: #333 1px solid; BORDER-left: #333 1px solid; BORDER-bottom: #222 3px solid; BORDER-RIGHT: #222 3px solid;
}

.rightpanebody
{
margin: 12px 12px 12px 12px;
background-image: url(../images/graybackgroundfade_light.gif); 
background-repeat: repeat-x; 
background-color: #e2e2e2;
}

.rightpanewindow
{

}

#rightpanewindow.h1 {font-size: ;}


.rightpanetitle
{
margin: 8px 8px 0px 0px;
font-weight: bold;
color: #000;
}

ul.rightpanetext{}

ul.rightpanetext li
{
   padding: 0px 8px 0px 0px; 
	margin-left: -52px;
	color: #000;
} 

div> ul.rightpanetext li
{
 padding:0px 25px 0px 0px;
}

 a.rightpanetext
{
 color: #365bc6;   
 text-decoration: none;
} 

 a.rightpanetext:hover
{   
  border-bottom: 1px dotted #365bc6;
} 


/*wiz lists*/

.wizinstructions, ul.wizinstructions {
margin: 6px 6px;
}

li.wizready{
list-style-image: url(../images/icon_check.gif);
margin: 6px 6px;
}

li.wiznotready{
list-style-image: url(../images/icon_x.gif);
margin: 6px 6px;
}


/*/datatable*/

.datatable {
border: 1px solid #333;
background-color: #999;
}

.datatable th {
}

.indent0, a.indent0 {margin: 0px 2px 0px 0px; text-decoration: none; color: Black;}
.indent0:hover {border-bottom: 1px dotted;}
.indent1, a.indent1 {margin: 0px 2px 0px 8px; text-decoration: none; color: blue;}
.indent1:hover {border-bottom: 1px dotted;}
.indent2, a.indent2 {margin: 0px 2px 0px 20px; text-decoration: none; color: DarkGreen;}
.indent2:hover {border-bottom: 1px dotted;}
.indent3, a.indent3 {margin: 0px 2px 0px 32px; text-decoration: none; color: Indigo;}
.indent3:hover {border-bottom: 1px dotted;}
.indent4, a.indent4 {margin: 0px 2px 0px 44px; text-decoration: none; color: Brown;}
.indent4:hover {border-bottom: 1px dotted;}
.indent5, a.indent5 {margin: 0px 2px 0px 56px; text-decoration: none; color: DarkSlateGray;}
.indent5:hover {border-bottom: 1px dotted;}
.indent6, a.indent6 {margin: 0px 2px 0px 68px; text-decoration: none; color: FireBrick;}
.indent6:hover {border-bottom: 1px dotted;}
.indent7, a.indent7 {margin: 0px 2px 0px 80px; text-decoration: none; color: DarkOliveGreen;}
.indent7:hover {border-bottom: 1px dotted;}
.indent8, a.indent8 {margin: 0px 2px 0px 92px; text-decoration: none; color: DimGray;}
.indent8:hover {border-bottom: 1px dotted;}

/*Common Styles:*/

.whitetext {
	color:#FFFFFF;
	}

.whitetextbold {
	color:#FFFFFF; font-weight:bold;
	}

.redtextbold {
	color:#A50000; font-weight:bold;
	}

.textbold {
	font-weight:bold;
	font-size: 105%;
	}

.welcome {
	font-weight:bold; color:#446FC9;
	}

.Pending {	color: #000000; font-weight:bold;
	}

.InProgress {
	color: #000000; font-style: italic;
	}
.Complete {	
	color: #000000;
	}

.message {
	color: #000000;
	}

.message_replied {
	color: #000000;
	font-style: italic;
	}

.wronganswer {
	color: #A50000;
	font-weight: bold;
	}

.rightanswer {
	color: green;
	font-style:italic;
	}

.locked {
	color: #606060;
	}

.disabledtext, a.disabledtext {
	color: #606060;
		font-style:italic;

	text-decoration: none;
	}


.SystemAlertText {
	text-decoration: blink;
	font-weight: bold;
	font-size: 115%;
	padding: 12px;
	line-height: 36px;
	background-color: #A50000;
	color: #FFFFFF;
	}


	/*@@ Iframes @@*/	
.noBorderFrame{
	   	width: 100%;
	   	height: 0;
	   	border: none;
	   }
	   
.tkformbase {
        background-color : #FFFFFF;
        color:#000000;
        }

.break {
	page-break-after: always
}