/* *********************************************************** Gloabal *************************************************************************************************
*/

html,body {
	font-family: arial;
	font-size: .9em;
	background-color: black;
	margin: 0px;
	border: 0px;
	padding: 0px;
	height: 100%;
	overflow: hidden;
}

.breakerBar{
	clear: both;
	}
	
h1.contentHeading{ display: none;
	}
	
#vc_nav{
	position: absolute;
	bottom: 0;
	color: white;
	background-color: black;
	background-image: url(bg_fill.gif);
	background-repeat: repeat-x;
	padding: 0px;
	margin: 0px;
	height: 14%;
	width: 100%;
	}
	
#content
	{
	height: 85%;
	background-image: url(background.gif);
	background-position: center;
	margin: 0px;
	padding: 0px;
	}

#suspendData{
	display: none;
	position: absolute;
	bottom: 0;
	color: white;
	padding: 0px;
	margin: 0px;
	height: 14%;
	width: 100%;
	overflow: auto;
	}

	
#debug, #connection, #completion, #glossary, #help, #comments, #pageJump, #pauseOverlay
	{
	position: absolute;
	left: 10%;
	top: 5%;
	height: 80%;
	width: 80%;
	display: none;
	overflow: auto;
	border: solid black 2px;
	padding: 20px;
	z-index: 10;
}

#debug{ 
	background-color:white;
	height: 70%;
	}

#connectionShadow, #completionShadow, #glossaryShadow, #helpShadow, #commentsShadow, #pageJumpShadow, #pauseOverlayShadow{
	/*Use margin here to determine the amount of shadow as this will push the div further down and to the left. */
	margin: 7px;
	display: none;
	position: absolute;
	left: 10%;
	top: 5%;
	height: 80%;
	width: 80%;
	overflow: auto;
	padding: 20px;
	border: solid black 2px;
	background-color: black;
	opacity: 0.4;
	}
	
#connection .backgroundImage #completion .backgroundImage, #glossary  .backgroundImage, #help  .backgroundImage, #comments  .backgroundImage, #pageJump .backgroundImage{
	z-index: -1;
	position: absolute;
	top: 106px;
	left: 70%;
	height:332px;
	width: 29%;
	}
		
#connection, #completion, #glossary, #help, #pageJump, #pauseOverlay{
	background: #ACACAC url(page-background.gif) scroll repeat-x;
	color: white;
	}
	
#connection a, #completion a , #glossary a, #help a 
{	display: block;
	background-image: url(page-background.gif);
	color: white;
	margin: 3px;
	padding: 3px;
	text-decoration: none;
	}
	
#connection a:hover, #completion a:hover, #glossary a:hover, #help a:hover,#pageJump a:hover
{	background-image: none;
	background-color:  #8F9194;
	}

#connection h1, #completion h1, #glossary h1, #comments h1, #pageJump h1, #help h1
{	font-family: arial;
	font-size: 1em;
	border-bottom: solid #cfcfcf 1px;
}

#connection a.close, #completion a.close, #glossary a.close, #comments a.close, #pageJump a.close, #help a.close
{	padding-left: 5px;
	padding-right: 5px;
	color: red;
	text-decoration: none;
	float: right;
	font-family: arial;
	font-size: 0.8em;
	margin: 0px;
	padding: 0px;
}


#connection img, #completion img, #glossary img,#comments img, #pageJump img, #help img
{	vertical-align: middle;
	border: 0px;
	padding-left: 5px;
}

.printOnly
{	display: none;
}

/* ####################################### END Global  ##############################################################

/* *********************************************************** Comments ***********************************************************************************************
*/
#comments
{	background-color: white;
	background-image: url('comments_bg_fill.gif');
}	

#comments, #commentsShadow
{	padding-right: 5px;
	padding-bottom: 0px;
}

#comments h1{
	border: none;
	padding-left: 0px;
	color: blue;
	}

#edging{
	position: absolute;
	color: white;
	left: 0;
	top: 0;
	width: 40px;
	height: 100%;
	background: white url('comments_edge.gif') repeat-y;
	border-right: solid RED 1px;
	}
	
#notes{
	margin-left: 40px;
	}

#pageNotesArea{
	border: solid 1px #afafaf;
	background: none;
	padding-left: 5px;
	width: 90%;
	font-family: tahoma;
	}
	
#commentsFromUser
{	border: solid 1px #afafaf;
	background: none;
	padding-left: 5px;
	width: 90%;
	font-family: tahoma;
}

#fullNotesArea{ display: none;}
/* ####################################### END Comments ############################################################

/* *********************************************************** Jump To Page ********************************************************************************************
*/
#pageJump, #pageJumpShadow
{	padding-right: 10px;
	padding-bottom: 10px;
}

#pageJump .backgroundImage{
	background: #acacac url(pageJump_image.gif) scroll no-repeat;
	}

#completion .pageItems, #pageJump .pageItems
{	border-top: solid #cfcfcf 1px;
	border-bottom: solid #cfcfcf 1px;
}

#completion .pageStatus, #pageJump .pageStatus
{	display: block;
	width: 30%;
	float: right;
	display: none;
	}

#completion .pageTitle, #pageJump .pageTitle {
	PADDING-bottom: 5PX;
}

#completion .pageTitle img, #pageJump .pageTitle img{
	padding-right: 5px; 
	float: left;
}

#completion .pageTitle a, #pageJump .pageTitle a
{	display: block;
	width: 70%;
	color: white;
	padding: 5px;
}

#completion .pageTitle a:hover, #pageJump .pageTitle a:hover{
	background: #0063dc;
	color: white;
	}

#completion .pageItems .pageStatus, #pageJump .pageItems .pageStatus
{	padding: 3px;
	padding-left: 20px;
}

#completion .pageFailed .pageStatus, #pageJump .pageFailed .pageStatus
{	/*background-color: #FF9999;*/
	background-color: red;
	background-color: #CF2626;
}

#completion .pageNA .pageStatus, #pageJump .pageNA .pageStatus
{	color: #5F5F5F;
	/*background-color: #FCD884;*/
	background-color: orange;
}

#completion .pagePassed .pageStatus, #pageJump .pagePassed .pageStatus
{	color: #5F5F5F;
	/*background-color: #C2EE99;*/
	/*background-color: lime;*/
	background-color: #1ACF19;
}

#completion .pageReview .pageStatus, #pageJump .pageReview .pageStatus
{	color: #5F5F5F;
	/*background-color: #C2EE99;*/
	/*background-color: lime; */
	background-color: #1ACF19;
	border-left: solid red 10px;
}

#completion  .key, #pageJump .key{
	display:block;
	border: dotted #ACACAC 2px;
	width: 29%;
	margin-left: 70%;
	margin-top: 15px;
	margin-bottom: 15px;
	font-size: 0.8em;
	text-align: right;
}

#completion  .key p, #pageJump .key p{
	padding: 0px;
	margin: 0px;
	
}

/* ####################################### END Jump to Page ##########################################################/ * *********************************************************** Completion *********************************************************************************************
/*References many items for Jump to page*/
#completion .completionMessage
{	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
}

#completion .backgroundImage{
	background: #acacac url(completion_image.gif) scroll no-repeat;
	}

/* ####################################### END Commpletion ###########################################################

/ * *********************************************************** Help ***************************************************************************************************
*/
#help, #helpShadow{
	padding-right: 20px;
	padding-bottom: 20px;
	}
	
#help .backgroundImage{
	background: #acacac url(help_image.gif) scroll no-repeat;
	}
	
#help .main
{	text-align: center;
}

#help .column1, #help .column2
{	display: block;
	width: 45%;
	float: left;
	text-align: justify;
}

#help .column2
{	float: right;
	border: none;	
}

#help h1{
	display: inline;
	text-decoration: none;
	}


#help .helpText
{	padding: 3px;
}

#help .helpTitles a {}

/* ####################################### END Help################################################################

/ * *********************************************************** Gloassary ***********************************************************************************************
*/
#glossary, #glossaryShadow{
	padding-right: 30px;
	padding-bottom: 30px;
	}
	
#glossary .backgroundImage{
	background: #acacac url(glossary_image.gif) scroll no-repeat;
	}
	
	
#glossary #keyword{
	width: 70%;
	font-family: arial;
	font-weight: bolder;
	font-size: 1.2em;
	height: 1.3em;
}
			
#glossary #definitions{
	margin-top: 10px;
	padding: 10px;
	border-top: solid #cfcfcf 1px;
	border-bottom: solid #cfcfcf 1px;
}

#glossary #definitions a{
	width: 70%;
	}

#glossary .definition{
	display: none;
	margin-top: 10px;
	padding: 10px;
	border-top: solid #cfcfcf 1px;
	border-bottom: solid #cfcfcf 1px;
}	
	
/* ####################################### END Glossary ##############################################################

/ * *********************************************************** Pause ***************************************************************************************************	
*/
#pauseOverlay, #pauseOverlayShadow
{	padding-right: 10px;
	padding-bottom: 10px;
}

#pauseOverlay .backgroundImage{
	background: #acacac url(pageJump_image.gif) scroll no-repeat;
	}