/* ----- GENERAL PAGE LAYOUT ----- */
.OuterPositioner {
	padding-top: 20px; padding-left: 0px; padding-right: 0px; padding-bottom: 20px;
	width: 100%;
}
.CourseHolder {
	background-color: #FFFFFF;
	border: 2px solid #003366;
	margin: 0px;
	padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px;
	width: 740px;
}
.CourseHolderTopPane {
	background-color: #CCCCCC;
	width: 740px;
}
.CourseHolderLeftPane {
	background-color: #CCCCCC;
	width: 258px;
}
.CourseHolderDevide {
	background-color: #CCCCCC;
	margin: 0px;
	border: 0px;
	padding: 0px;
	width: 2px;
	height: 2px;
}
.CourseHolderRightPane {
	background-color: #CCCCCC;
	width: 480px;
}






/* ----- COURSE TITLE & EXIT BUTTON ----- */
.CourseTitle {
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold;
	background-color: #003366;
	background-image: url(/images/course_title_roundoff.gif);
	background-position: right;
	background-repeat: no-repeat;
	margin-top: 10px; margin-left: 10px; margin-right: 10px; margin-bottom: 0px;
	border: 1px solid #FFFFFF;
	padding-top: 10px; padding-left: 20px; padding-right: 20px; padding-bottom: 10px;
	width:666px;
}
.ExitBtn {
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold;
	text-align: center;
	text-decoration: none;
	background-color: #335C85;
	border: 1px solid #FFFFFF;
	padding-top: 2px; padding-left: 8px; padding-right: 8px; padding-bottom: 2px;
	position: absolute;
	height: 20px;
	top: 0px;
	left: 0px;
}
.ExitBtn:hover {
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold;
	text-decoration: none;
	background-color: FF9933;
}






/* ----- PAGE BLOCK & SCROLLER ----- */
.PageBlock {
	background-color: #FFFFFF;
	margin-top: 10px; margin-left: 0px; margin-right: 10px; margin-bottom: 10px;
	border: 1px solid #003366;
	padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px;
	width: 468px;
	height: 362px;
}
.PageLayout {
	position: relative;
	width: 430px;
	height: 340px;
	left: 0px;
	top: 0px;
	z-index: 101;
}
.PageScroller {
	background-color: #ffffff;
	position: absolute;
	width: 425px;
	height: 340px;
	left: 0px;
	top: 0px;
	overflow: hidden;
	clip: rect(0px 425px 340px 0px);
	z-index: 102;
	visibility: visible;
}
.PageContents {
	position: absolute;
	width: 425px;
	z-index: 103;
}
.PageScrollBG {
	border-left: 1px dotted #999999;
	position:absolute;
	width:1px;
	height:320px;
	left:438px;
	top:10px;
	z-index:104;
	visibility: hidden;
}
.PageScrollUp {
	position: absolute;
	width: 15px;
	left: 431px;
	top: 0px;
	z-index: 105;
	visibility: hidden;

}
.PageScrollDown {
	position: absolute;
	width: 15px;
	left: 431px;
	top: 320px;
	z-index: 104;
	visibility: hidden;
}






/* ----- NAVIGATION BLOCK & BUTTONS ----- */
.NavigationBlock {
	text-align: center;
	background-color: #EEEEEE;
	margin: 10px;
	border: 1px solid #003366;
	padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px;
	height: 52px;
}
.NavBtn {
	color: #003366;
	font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold;
	text-align: center;
	text-decoration: none;
	background-color: #FFFFFF;
	border: 1px solid #003366;
	padding-top: 4px; padding-left: 10px; padding-right: 10px; padding-bottom: 4px;
	position: relative;
	height: 26px;
	top: 10px;
}
.NavBtn:hover {
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold;
	text-decoration: none;
	background-color: FF9933;
}
.NavBtnContents {
	z-index: 600;
}
.NavBtnContents:hover {
	border-bottom: 1px solid #FF9933;
}
.NavBtnContentsOpen {
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold;
	text-decoration: none;
	background-color: FF9933;
	border-bottom: 1px solid #FF9933;
	position: absolute;
	z-index: 601;
	visibility: hidden;
}
.NavBtnSpacer1 {
	margin: 0px; border: 0px; padding: 0px;
	width: 24px;	
}
.NavBtnSpacer2 {
	margin: 0px; border: 0px; padding: 0px;
	width: 8px;	
}






/* CONTENTS MENU BLOCK, OPTIONS & SCROLLER */
.ContentsMenu {
	background-color: #FF9933;
	margin: 0px;
	border: 1px solid #003366;
	padding: 0px;
	position: absolute;
	width: 236px;
	height: 326px;
	z-index: 301;
	visibility: hidden;
}
.ContentsScroller {
	background-color: #FF9933;
	position: absolute;
	width: 216px;
	height: 306px;
	left: 8px;
	top: 8px;
	overflow: hidden;
	clip: rect(0px 216px 306px 0px);
	z-index: 302;
	visibility: hidden;
}
.ContentsContents {
	position: absolute;
	width: 218px;
	z-index: 303;
	visibility: hidden;
}
.ContentsScrollBG {
	border-left: 1px dotted #FFFFFF;
	position: absolute;
	width: 1px;
	height: 290px;
	left: 220px;
	top: 20px;
	z-index: 305;
	visibility: hidden;
}
.ContentsScrollUp {
	position: absolute;
	width: 11px;
	left: 215px;
	top: 10px; 
	z-index: 306;
	visibility: hidden;
}
.ContentsScrollDown {
	position: absolute;
	width: 15px;
	left: 215px;
	top: 300px;
	z-index: 307;
	visibility: hidden;
}
.ContentsCloserTop {
	position:absolute;
	width:736px;
	height:76px;
	left:0px;
	top:0px;
	z-index:300;
	visibility: hidden;
}
.ContentsCloserBottom {
	position:absolute;
	width:736px;
	height:336px;
	left:0px;
	top:0px;
	z-index:300;
	visibility: hidden;
}
.ContentsMenuItem {
	color: #003366;
	font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold;
	text-decoration: none;
	background-color: #FF9933;
	padding-top: 2px; padding-left: 5px; padding-right: 5px; padding-bottom: 2px;
	position:relative;
	width: 200;
	z-index: 308;
	visibility: inherit;
}
.ContentsMenuItem:hover {
	color: #003366;
	font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold;
	text-decoration: none;
	background-color: #FFFFFF;
	position:relative;
	width: 200;
	z-index: 308;
	visibility: inherit;
}






/* ----- NARRATION BLOCK & SCROLLER ----- */
.NarrationBlock {
	background-color: #FFFFFF;
	margin: 10px;
	border: 1px solid #003366;
	padding-top: 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px;
	height: 300px;
}
.NarrationLayout {
	position: relative;
	width: 200px;
	height: 270px;
	left: 0px;
	top: 0px;
	z-index: 201;
}
.NarrationScroller {
	background-color: #ffffff;
	position: absolute;
	width: 200px;
	height: 270px;
	left: 0px;
	top: 0px;
	overflow: hidden;
	clip: rect(0px 200px 270px 0px);
	z-index: 202;
	visibility: visible;
}
.NarrationContents {
	position: absolute;
	width: 200px;
	z-index: 203;
}
.NarrationScrollBG {
	width: 1px;
	height: 270px;
	border-left: 1px dotted #999999;
	position: absolute;
	left: 210px;
	top: 10px;
	z-index: 204;
	visibility: hidden;
}
.NarrationScrollUp {
	position: absolute;
	width: 11px;
	left: 205px;
	top: 0px;
	z-index: 205;
	visibility: hidden;
}
.NarrationScrollDown {
	position: absolute;
	width: 15px;
	left: 205px;
	top: 270px;
	z-index: 206;
	visibility: hidden;
}



.colorred { color: #CC0000; }
.colorblue { color: #003366; font-weight:bold; }
.colorgreen { color: #009966; font-weight:bold; }
.colorpurple { color: #6633CC; }


/* ----- GENERAL HTML TAG STYLES ----- */
body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: normal; color: #000000;}
table {font-family: Arial, Helvetica, sans-serif, "MS sans serif";font-size:10pt;}
tr {font-family: Arial, Helvetica, sans-serif, "MS sans serif";font-size:10pt;}
td {font-family: Arial, Helvetica, sans-serif, "MS sans serif";font-size:10pt;}
p { font-family: Arial, Helvetica, sans-serif; font-size:10pt; font-weight: normal; color: #000000 }
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold; color: #000000 }
h2 { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; color: #000000 }
h3 { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold; color: #000000 }
a { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #ffffff; text-decoration: underline}
a:hover { text-decoration: underline; color: #ffff00 }
hr { height: 1px; color: #cccccc; background-color: #cccccc}
li { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #000000; list-style-image: url(/images/bullet_orange.gif) }
