/*
	CSS for ProjectStory
	by LR Communication Design
	March 2009
	main css file
*/

	*							{margin:0px; padding: 0px; line-height: 10px;}	
								/* every element will inherit a 10px line-height and will need its own line-height set 
						   		   I.e. line-height will NOT inherit normally. Why do this? It helps cross browser vertical alignment. */		

	body {
		background: 			url(background-gradient.jpg) repeat-x #81a8d0;
		font-family: 			Verdana, sans-serif;
		color: 					#333;}

	a img {border: none;}
	
	span.regMark {font-size:.75em; line-height: .5em; vertical-align:super;}

	/* general use links */
	a 			{text-decoration: none; color: #333;}
	a:link		{border-bottom: 1px dotted #333;}
	a:visited	{}
	a:focus		{}
	a:hover		{border-bottom: 1px solid  #333;}
	a:active	{border-bottom: 1px dotted #333;}



	div#upperContent	{
		position:				relative;
		overflow:				auto;	/* contain the floated sidebar */
		width:					849px;
		width:					749px;
		margin: 				0px auto; 
		background: 			url(ballon-background-upper.jpg) no-repeat #90b8da;
		padding-right:			50px;
		padding-left:			50px;}

		img#PSCertifyLogo {
			float:				left;
			margin-top:			21px;
			margin-left:		9px;}
	
		h1 {
			/* Train, test, and certify online. */
			margin-right:		10px;
			margin-bottom:		14px;
			padding-top:		58px;
			font-size: 			16px;
			line-height:		24px;
			font-weight:		bold;
			text-align:			right;
			color:				#154899;}
	
		p#linksMain {
			background:			url(main-menu-shadow-PSCertify.gif) repeat-x left bottom #5991ce;
			padding-top:		13px;
			padding-bottom:		12px;
			padding-bottom:		19px;
			padding-left:		10px;
			font-size: 			12px;
			font-weight:		bold;
			line-height:		16px;}

		p#linksMain.noShadow {
			background: 		url() #5991ce;
			padding-bottom:		12px;}

		
				p#linksMain a			{text-decoration: none; color:#000; border-bottom: 0px dotted #000;}	/* border cancels inheritance from the general use link rules */
				p#linksMain a:link		{color:#000;}
				p#linksMain a:visited	{color:#000;}
				p#linksMain a:focus		{color:#000;}
				p#linksMain a:hover		{color:#000; border-bottom: 1px dotted #000;}
				p#linksMain a:active	{color:#000; border-bottom: 1px solid  #000;}
			
				p#linksMain a#selectedMainMenu:link,
				p#linksMain a#selectedMainMenu:visited	{color: #fff; border-bottom: 0px;}
				p#linksMain a#selectedMainMenu:focus	{color: #fff; border-bottom: 0px;}
				p#linksMain a#selectedMainMenu:hover	{color: #fff; border-bottom: 0px;}
				p#linksMain a#selectedMainMenu:active	{color: #fff; border-bottom: 0px;}
		
		p#linksSecondary {
			background:			url(main-submenu-divider.gif) repeat-x #adb9cc;
			padding-top:		7px;
			padding-bottom:		7px;
			padding-left:		10px;
			font-size: 			11px;
			font-weight:		bold;
			line-height:		16px;
			color:				#888;}
		
				p#linksSecondary a			{text-decoration: none; color:#000;}
				p#linksSecondary a:link		{color:#000;}
				p#linksSecondary a:visited	{color:#000;}
				p#linksSecondary a:focus	{color:#000;}
				p#linksSecondary a:hover	{color:#000; border-bottom: 1px dotted #000;}
				p#linksSecondary a:active	{color:#000; border-bottom: 1px solid  #000;}
			
				p#linksSecondary a#selectedSecondaryMenu:link,
				p#linksSecondary a#selectedSecondaryMenu:visited	{color: #fff; border-bottom: 0px;}
				p#linksSecondary a#selectedSecondaryMenu:focus		{color: #fff; border-bottom: 0px;}
				p#linksSecondary a#selectedSecondaryMenu:hover		{color: #fff; border-bottom: 0px;}
				p#linksSecondary a#selectedSecondaryMenu:active		{color: #fff; border-bottom: 0px;}



	div#mainContentColumn {
			position:			relative;	/* needed by the annotations on the screenshots */
			float:				left;
			width:				503px;
			width:				483px;
			margin-top:			18px;
			padding-right:		10px;
			padding-left:		10px;}

		div#mainContentColumn.fullWidth {
			float:				none;
			width:				739px;
			width:				748px;
			padding-right:		0px;
			padding-left:		0px;}

		div#mainContentColumn.screenshots {
			float:				none;
			width:				739px;
			padding-right:		0px;}

		div#mainContentColumn h2 {
			margin-bottom:		7px;
			font-size:			10px;
			font-weight:		bold;
			line-height:		normal;
			text-transform:		uppercase;
			color:				#154899;}

		div#mainContentColumn p {
			margin-bottom:		5px;
			font-size:			10px;
			line-height:		16px;;
			color:				#333;}

		div#mainContentColumn .lastPInSection {margin-bottom:27px;}
		/* any element can be the last in a section in the main column */

		div#mainContentColumn ul,
		div#mainContentColumn ol {
			margin-top:			10px;
			margin-bottom:		10px;
			margin-left:		15px;}

		div#mainContentColumn ul li,
		div#mainContentColumn ol li {
			font-size:			10px;
			line-height:		16px;}

		div#mainContentColumn ul li a,
		div#mainContentColumn ol li a {
			line-height:		16px;}	/* for Opera */

		div#mainContentColumn ul.tightSpacing,
		div#mainContentColumn ol.tightSpacing {
			margin-top:			2px;
			margin-bottom:		3px;}
	
		div#mainContentColumn .looseSpacing	{margin-top: 20px;}
	
		/* version for the support.html page */ 
		#support div#mainContentColumn p							{padding-right:30px;}
		div#mainContentColumn span.initialCap						{margin-right:3px; font-weight:bold; color:#154899;}
		div#mainContentColumn p.questionInMainContentColumn			{color:#154899;}
		div#mainContentColumn p.answerInMainContentColumn			{margin-bottom:20px;}




		/* how-PSCertify-works.html  */
		
		div#mainContentColumn p#HowItWorksNote {margin-bottom:2em; font-weight: bold;}
		
		#mainContentColumn.howItWorksPage a 		{font-weight: bold; text-decoration: none; color:#154899;}
		#mainContentColumn.howItWorksPage a:link	{border-bottom: 1px dotted #154899;}
		#mainContentColumn.howItWorksPage a:visited	{border-bottom: 1px dotted #154899;}
		#mainContentColumn.howItWorksPage a:focus	{}
		#mainContentColumn.howItWorksPage a:hover	{border-bottom: 1px solid  #154899;}
		#mainContentColumn.howItWorksPage a:active	{border-bottom: 1px dotted #154899;}
		
		span.howItWorksListNote	{line-height: 16px;}	
		/* if you are maintaing this site, never forget the comment at line #9. 
		   Opera is the only browser that requires this re-line-height 
		   but I've put it here because it does no harm to the others. RL. */
		
		
		/* the screenshot/annotations pages */

		div#mainContentColumn p#listOfAnchors	{margin-bottom: 30px;}
		
		p#listOfAnchors a 			{font-weight: bold; text-decoration: none; color:#154899;}
		p#listOfAnchors a:link		{border-bottom: 1px dotted #154899;}
		p#listOfAnchors a:visited	{border-bottom: 1px dotted #154899;}
		p#listOfAnchors a:focus		{}
		p#listOfAnchors a:hover		{border-bottom: 1px solid  #154899;}
		p#listOfAnchors a:active	{border-bottom: 1px dotted #154899;}

		img.screenshot {
			float:				right;
			margin-right:		-6px;
			margin-left:		10px;}	/* note: the top margin will be adjusted on some pages that show mulitple screen shots */

			#screenshotHomePage		{margin-bottom: 100px;}
			#screenshotEditTest		{}	/* requires that we size upperContent. See the twoColumns section below */
			#screenshotEditQuestion	{margin-bottom:  10px;}
			#screenshotTestResults	{margin-bottom:  10px;}
			#screenshotEditGroups	{margin-bottom:  10px;}
			#screenshotManageGroups	{margin-bottom:  10px;}

			h2.screenshotSectionTitle	{margin-top: 20px;}

			/* general settings for the annotations */
			
			div.annotationDiv {
				position: 			absolute;}

			h3.annotationTitle 	{ 
				/* this creates the line. Can be a border-top or a border-bottom, overrides will be necessary */ 
				border-bottom: 1px solid #b73f04;
				font-size:		10px; 
				line-height:	16px; 
				color:			#154899;}
			div.annotationDot	{
				position:		absolute; 
				font-size:		18px; 
				color:			#b73f04;}
			p.annotationText	{
				width:			216px; 
				font-size:		10px; 
				line-height:	16px; 
				color:			#000;}

		
			/* 
				Settings for screenshot annotations 
				=================================================================================================
				the top setting of the containing div provides the main vertical positioning (#annotationDivX)
				the top setting of the containing div provides the width of the line (#annotationDivX)
				the line is created by a bottom or top border on the h3 title (annotationTitleX)
				the height of the h3 title sets the vertical dimension of an upright line when needed
				the dot is manually positioned
				if the line needs to point down then the paragraph (p#annotationTextX) needs positioned too
				There is a spreadsheet available that simplifies making vertical adjustments...
				Once you get used to the approach is is easy to maintain.
				
				note that the first screenshot, its h2 and its introductory p (if it has one) are NOT positioned.
				Any subsequent are positioned.
				=================================================================================================
			*/

			/* common rules for the screenshot annotations */
			
			h3.backToTopDivider						{width: 747px; border-bottom: 0px solid #154899; padding-bottom: 6px; text-align:right;}
				a.screenshotbackToTop				{font-size: 9px; text-decoration: none; font-weight:normal; color: #333;}
				a.screenshotbackToTop:link			{border-bottom: 1px dotted #333;}
				a.screenshotbackToTop:visited		{border-bottom: 1px dotted #333;}
				a.screenshotbackToTop:focus			{}
				a.screenshotbackToTop:hover			{border-bottom: 1px solid  #333;}
				a.screenshotbackToTop:active		{border-bottom: 1px dotted #333;}




			/* 
				The home page screenshot 
			*/

			#homePageScreenshot #annotationDiv1		{top:     104px;   width:  244px;	}
			#homePageScreenshot #annotationDot1 	{top:      32px;    left:  239px;	}
			#homePageScreenshot #annotationTitle1	{height:   39px;   border-top: 1px solid #b73f04; border-right: 1px solid #b73f04; border-bottom: 0px solid; }
			#homePageScreenshot p#annotationText1	{position: absolute; top:1px;}
			
			#homePageScreenshot #annotationDiv2		{top:      88px;   width:  627px;	}
			#homePageScreenshot #annotationDot2 	{top:      -5px;    left:  622px;	}
			#homePageScreenshot #annotationTitle2	{height:   70px;   border-right: 1px solid #b73f04;}

			#homePageScreenshot #annotationDiv3		{top:      91px;   width:  660px;	}
			#homePageScreenshot #annotationDot3 	{top:      -8px;    left:  655px;	}
			#homePageScreenshot #annotationTitle3	{height:   93px;   border-right: 1px solid #b73f04;}

			#homePageScreenshot #annotationDiv4		{top:      90px;   width:  695px;	}
			#homePageScreenshot #annotationDot4 	{top:      -8px;    left:  690px;	}
			#homePageScreenshot #annotationTitle4	{height:  133px;   border-right: 1px solid #b73f04;}

			h3#backToTopLink1HomePage				{position: absolute; top: 275px;}



			/* 
				Working with tests - 3 screenshots on this page 
			*/
			
			#workingWithTests #upperContent			{height: 1720px;}
			
			img#screenshot1WorkingWithTests			{margin-top:	-22px;}
			
			#workingWithTests #annotationDiv1		{top:     176px;   width:  244px;	}
			#workingWithTests #annotationDot1 		{top:      10px;    left:  239px;	}
			#workingWithTests #annotationTitle1		{}

			#workingWithTests #annotationDiv2		{top:     204px;   width:  244px;	}
			#workingWithTests #annotationDot2 		{top:      10px;    left:  239px;	}
			#workingWithTests #annotationTitle2		{}

			#workingWithTests #annotationDiv3		{top:     238px;   width:  244px;	}
			#workingWithTests #annotationDot3a 		{top:     -10px;    left:  239px;	}
			#workingWithTests #annotationDot3b 		{top:       3px;    left:  239px;	}
			#workingWithTests #annotationDot3c 		{top:      16px;    left:  239px;	}
			#workingWithTests #annotationDot3d 		{top:      29px;    left:  239px;	}
			#workingWithTests #annotationTitle3		{height:   53px;   border-right: 1px solid #b73f04; }
			#workingWithTests #annotationText3		{padding-top: 2px;}

			h3#backToTopLink1WorkingWithTests		{position: absolute; top: 491px;}
			
			img#screenshot2WorkingWithTests			{margin-top: 105px;}
			h2#editExisting							{position:absolute;  top: 572px;}
			p#editExistingParagraph					{position:absolute;  top: 612px; width:216px;}

			#workingWithTests #annotationDiv4		{top:     790px;   width: 685px;	}
			#workingWithTests #annotationDot4 		{top:      34px;    left: 680px;	}
			#workingWithTests #annotationTitle4		{height:   41px;   border-top: 1px solid #b73f04; border-right: 1px solid #b73f04; border-bottom: 0px solid; }
			#workingWithTests p#annotationText4		{position: absolute; top:   1px;}

			#workingWithTests #annotationDiv5		{top:     818px;   width:  665px;	}
			#workingWithTests #annotationDot5 		{top:       6px;    left:  659px;	}
			#workingWithTests #annotationTitle5		{height:   11px;   border-top: 1px solid #b73f04; border-right: 1px solid #b73f04; border-bottom: 0px solid; }
			#workingWithTests p#annotationText5		{position: absolute; top: 1px;}

			#workingWithTests #annotationDiv6		{top:     892px;   width:  244px;	}
			#workingWithTests #annotationDot6 		{top:      10px;    left:  239px;	}
			#workingWithTests #annotationTitle6		{}

			h3#backToTopLink2WorkingWithTests		{position: absolute; top:  995px;}
			
			img#screenshot3WorkingWithTests			{margin-top: 42px;}
			h2#addingQuestions						{position:absolute;  top: 1013px;}
			p#addingQuestionsParagraph				{position:absolute;  top: 1053px; width:216px;}

			#workingWithTests #annotationDiv7		{top:    1150px;   width:  244px;	}
			#workingWithTests #annotationDot7 		{top:      10px;    left:  239px;	}
			#workingWithTests #annotationTitle7		{}

			#workingWithTests #annotationDiv8		{top:    1215px;   width:  244px;	}
			#workingWithTests #annotationDot8 		{top:      10px;    left:  237px;	}
			#workingWithTests #annotationTitle8		{}

			#workingWithTests #annotationDiv9		{top:    1369px;   width:  608px;	}
			#workingWithTests #annotationDot9 		{top:      -8px;    left:  603px;	}
			#workingWithTests #annotationTitle9		{height:   27px;   border-right: 1px solid #b73f04; }

			#workingWithTests #annotationDiv10		{top:    1406px;   width:  655px;	}
			#workingWithTests #annotationDot10 		{top:      10px;    left:  648px;	}
			#workingWithTests #annotationTitle10	{}

			h3#backToTopLink3WorkingWithTests		{position: absolute; top:1493px;}



			/* 
				Working with users - 2 screenshots on this page 
			*/
			
			#workingWithUsers #upperContent			{height:  890px;}
			
			img#screenshot1WorkingWithUsers			{margin-top:	-22px;}
			
			#workingWithUsers #annotationDiv1		{top:     158px;   width: 580px;	}
			#workingWithUsers #annotationDot1 		{top:      18px;    left: 575px;	}
			#workingWithUsers #annotationTitle1		{height:   21px;   border-top: 1px solid #b73f04; border-right: 1px solid #b73f04; border-bottom: 0px solid; }
			#workingWithUsers p#annotationText1		{position: absolute; top:   1px;}

			#workingWithUsers #annotationDiv2		{top:     177px;   width: 543px;	}
			#workingWithUsers #annotationDot2 		{top:       0px;    left: 538px;	}
			#workingWithUsers #annotationTitle2		{height:    6px;   border-top: 1px solid #b73f04; border-right: 1px solid #b73f04; border-bottom: 0px solid; }
			#workingWithUsers p#annotationText2		{position: absolute; top:   1px;}

			#workingWithUsers #annotationDiv3		{top:     195px;   width: 244px;	}
			#workingWithUsers #annotationDot3 		{top:      -8px;    left: 239px;	}
			#workingWithUsers #annotationTitle3		{height:   17px;   border-right: 1px solid #b73f04; }

			#workingWithUsers #annotationDiv4		{top:     252px;   width: 244px;	}
			#workingWithUsers #annotationDot4 		{top:      10px;    left: 239px;	}
			#workingWithUsers #annotationTitle4		{}

			#workingWithUsers #annotationDiv5		{top:     262px;   width: 682px;	}
			#workingWithUsers #annotationDot5 		{top:      -8px;    left: 677px;	}
			#workingWithUsers #annotationTitle5		{height:   27px;   border-right: 1px solid #b73f04; }

			h3#backToTopLink1WorkingWithUsers		{position: absolute; top: 357px;}
			
			img#screenshot2WorkingWithUsers			{margin-top:  40px;}
			h2#creatingAUser						{position:absolute;  top: 370px;}
			p#creatingAUserParagraph				{position:absolute;  top: 410px; width:216px}

			#workingWithUsers #annotationDiv6		{top:     493px;   width: 244px;	}
			#workingWithUsers #annotationDot6 		{top:      10px;    left: 239px;	}
			#workingWithUsers #annotationTitle6		{}

			#workingWithUsers #annotationDiv7		{top:     532px;   width: 244px;	}
			#workingWithUsers #annotationDot7 		{top:      10px;    left: 239px;	}
			#workingWithUsers #annotationTitle7		{}

			#workingWithUsers #annotationDiv8		{top:     583px;   width: 244px;	}
			#workingWithUsers #annotationDot8 		{top:      -8px;    left: 239px;	}
			#workingWithUsers #annotationTitle8		{height:   25px;   border-right: 1px solid #b73f04; }

			h3#backToTopLink2WorkingWithUsers		{position: absolute; top: 669px;}



			/* 
				Working with groups - 3 screenshots on this page 
			*/

			#workingWithGroups #upperContent		{height: 1370px;}

			img#screenshot1WorkingWithGroups		{margin-top:	-22px;}
			
			#workingWithGroups #annotationDiv1		{top:     175px;   width:  244px;	}
			#workingWithGroups #annotationDot1 		{top:      10px;    left:  239px;	}
			#workingWithGroups #annotationTitle1	{}
			
			#workingWithGroups #annotationDiv2		{top:     253px;   width:  244px;	}
			#workingWithGroups #annotationDot2 		{top:      10px;    left:  239px;	}
			#workingWithGroups #annotationTitle2	{}
			
			#workingWithGroups #annotationDiv3		{top:     262px;   width:  644px;	}
			#workingWithGroups #annotationDot3 		{top:      -8px;    left:  639px;	}
			#workingWithGroups #annotationTitle3	{height:   27px;   border-right: 1px solid #b73f04; }

			#workingWithGroups #annotationDiv4		{top:     262px;   width:  664px;	}
			#workingWithGroups #annotationDot4 		{top:      -8px;    left:  659px;	}
			#workingWithGroups #annotationTitle4	{height:   95px;   border-right: 1px solid #b73f04; }
			
			#workingWithGroups #annotationDiv5		{top:     262px;   width:  684px;	}
			#workingWithGroups #annotationDot5 		{top:      -8px;    left:  679px;	}
			#workingWithGroups #annotationTitle5	{height:  131px;   border-right: 1px solid #b73f04; }

			h3#backToTopLink1WorkingWithGroups		{position: absolute; top: 356px;}
			
			img#screenshot2WorkingWithGroups		{margin-top: 80px;}
			h2#AddUsersToGroup						{position:absolute; top:410px;}
			p#AddUsersToGroupParagraph				{position:absolute; top:450px; width:216px}
			
			#workingWithGroups #annotationDiv6		{top:     497px;   width:  244px;	}
			#workingWithGroups #annotationDot6 		{top:      32px;     left:  239px;	}
			#workingWithGroups #annotationTitle6	{height:   39px;   border-top: 1px solid #b73f04; border-right: 1px solid #b73f04; border-bottom: 0px solid; }
			#workingWithGroups p#annotationText6	{position: absolute; top:1px;}

			#workingWithGroups #annotationDiv7		{top:     564px;   width:  305px;	}
			#workingWithGroups #annotationDot7 		{top:       5px;     left: 300px;	}
			#workingWithGroups #annotationTitle7	{height:   10px;   border-top: 1px solid #b73f04; border-right: 1px solid #b73f04; border-bottom: 0px solid; }
			#workingWithGroups p#annotationText7	{position: absolute; top:1px;}

			#workingWithGroups #annotationDiv8		{top:     571px;    left: 372px;   width:  180px;	}
			#workingWithGroups #annotationDot8 		{top:      10px;    left:    -4px;	}
			#workingWithGroups #annotationTitle8	{}
			#workingWithGroups p#annotationText8	{width: 160px; padding-left:20px; text-align: right;}

			h3#backToTopLink2WorkingWithGroups		{position: absolute; top: 761px;}
			
			img#screenshot3WorkingWithGroups		{margin-top:	40px}
			h2#AddTestsToGroup						{position:absolute; top:   775px;}

			#workingWithGroups #annotationDiv9		{top:     938px;   width:  244px;	}
			#workingWithGroups #annotationDot9 		{top:      10px;    left:  239px;	}
			#workingWithGroups #annotationTitle9	{}
			
			#workingWithGroups #annotationDiv10		{top:     998px;   width:  398px;	}
			#workingWithGroups #annotationDot10 	{top:      -8px;    left:  393px;	}
			#workingWithGroups #annotationTitle10	{height:   20px;   border-right: 1px solid #b73f04; }

			#workingWithGroups #annotationDiv11		{top:     929px;    left: 462px;   width:  274px;	}
			#workingWithGroups #annotationDot11 	{top:      10px;    left:    -4px;	}
			#workingWithGroups #annotationTitle11	{}
			#workingWithGroups p#annotationText11	{width: 254px; padding-left:20px; text-align: right;}

			h3#backToTopLink3WorkingWithGroups		{position: absolute; top:1164px;}



			/* 
				Test results 
			*/
			
			#testResults #upperContent			{height: 1390px;}

			img#screenshot1TestResults			{margin-top:	-22px;}
			
			#testResults #annotationDiv1		{top:     168px;   width:  244px;	}
			#testResults #annotationDot1 		{top:      10px;    left:  239px;	}
			#testResults #annotationTitle1		{}

			#testResults #annotationDiv2		{top:     234px;   width:  244px;	}
			#testResults #annotationDot2 		{top:      10px;    left:  239px;	}
			#testResults #annotationTitle2		{}

			#testResults #annotationDiv3		{top:     286px;   width:  398px;	}
			#testResults #annotationDot3 		{top:      -6px;    left:  393px;	}
			#testResults #annotationTitle3		{height:    9px;   border-right: 1px solid #b73f04; }

			#testResults #annotationDiv4		{top:     332px;   width:  281px;	}
			#testResults #annotationDot4 		{top:      10px;    left:  276px;	}
			#testResults #annotationTitle4		{}

			#testResults #annotationDiv5		{top:     424px;   width:  615px;	}
			#testResults #annotationDot5 		{top:      -8px;    left:  610px;	}
			#testResults #annotationTitle5		{height:   45px;   border-right: 1px solid #b73f04; }

			h3#backToTopLink1TestResults		{position: absolute; top:  549px;}
			
			img#screenshot2TestResults			{margin-top: 40px}
			h2#testResultsScreenshot2			{position:absolute;  top:  563px;}
			p#testResultsScreenshot2Paragraph	{position:absolute;  top:  603px; width:216px}

			#testResults #annotationDiv6		{top:     650px;   width:  244px;	}
			#testResults #annotationDot6 		{top:      10px;    left:  239px;	}
			#testResults #annotationTitle6		{}

			#testResults #annotationDiv7		{top:     734px;   width:  671px;	}
			#testResults #annotationDot7 		{top:      -8px;    left:  666px;	}
			#testResults #annotationTitle7		{height:   15px;   border-right: 1px solid #b73f04; }

			h3#backToTopLink2TestResults		{position: absolute; top:  828px;}
			
			img#screenshot3TestResults			{margin-top: 40px}
			h2#testResultsScreenshot3			{position:absolute;  top:  842px;}
			p#testResultsScreenshot3Paragraph	{position:absolute;  top:  882px; width:216px}
			
			h3#backToTopLink3TestResults		{position: absolute; top: 1186px;}


		/* 2 columns under the screenshots (not currently used but it could return) */
		
		div#twoColumns				{ clear:right; }
		div#twoColumns h3			{ margin-top: 18px; font-size: 10px; line-height: 13px;}
		div#twoColumns #columnOne	{ float:right; width:230px;}
		div#twoColumns #columnTwo	{ float:right; width:230px;margin-right:35px;}
		div#twoColumns p			{ }
		div#twoColumns img		{ 
			float:			right; 
			margin-left:	10px; 
			margin-top:		18px;}



		/* tour-how-to-use-PSCertify.html */
		div#container { 
			height: 			445px;
			background-color:	transparent;
			line-height:		22px;
			/* used by the flv player. If the user does not have the plug in installed the container 
			   will be very much too short and there are no other elements to work with. */ }



		/* sign-up-pricing.html */

		body#signupAndPricing #mainContentColumn {
			width: 			473px; 
			margin-right:	10px;
			padding-right:	10px}
		
		div#mainContentColumn  p#pricingBanner {
			margin-bottom:			18px;
			background:				url(online-certification-testing-pricing-banner.gif) repeat-x ;
			border:					1px solid #f4d894;
			-webkit-border-radius:	8px;
			-moz-border-radius: 	8px;
			padding:				10px 0px; 
			font-size:				16px;
			line-height:			26px;
			text-align:				center;
			color:					#a22e0e;}
			
			div#mainContentColumn  p#pricingBanner strong	{line-height:26px}	/* keep in mind that inheritance of line-height will not happen. See the * rule. */
			div#mainContentColumn  h2.pricingSignUp			{margin-bottom:12px; color: #272727;}

		div#mainContentColumn  p#howItWorks {margin-bottom: 20px; font-size: 12px;}

		table#signUpTable {
			table-layout:			fixed;
			border-collapse:		collapse;
			border-spacing:			0px;
			background:				url(online-testing-signup-form-background.gif) repeat-x ;
			width:					100%;}

		table#signUpTable th#col1	{width:  90px; padding-left: 10px;}
		table#signUpTable th#col2	{width: 310px;}
		table#signUpTable th#col3	{width:  auto;}
		
		table#signUpTable td						{padding-left: 10px; padding-bottom: 6px; font-size: 11px;}
		table#signUpTable td.rowWithSpaceAbove		{padding-top:  13px; padding-bottom: 9px;}

		img.validationGraphic			{display:none;}

		#firstName, #lastName, 
		#title, #company, #email, 
		#phone, #creditCard				{width: 292px; border:1px solid #c4dbf0; padding: 4px;font-size: 11px;}
		#description, #comments			{width: 292px; height: 66px; border:1px solid #c4dbf0; padding: 3px;font-size: 11px;}
		td#submitButtonTD				{text-align: center;}
		#online-testing-submit-button	{
			width:						114px;
			height:						 45px;
			margin-top: 				 13px; 
			margin-bottom: 				 16px;
			background:					url(online-testing-signup-button.jpg) no-repeat;}


		/* sign-up-pricing-thank-you.html */

		div#mainContentColumn  p#thankYouParagraph {
			padding-top: 				23px; 
			background:					url(online-testing-signup-form-background.gif) repeat-x ;
			height:						404px;
			font-size:					16px; 
			line-height: 				26px; 
			text-align: 				center; 
			color: 						#a22e0e;}

		div#mainContentColumn  p#thankYouParagraph span 	{font-weight:bold; line-height: 22px;}



	/* Sidebar */

	div#sidebarColumn {
		float:					left;
		width:					246px;
		margin-top:				18px;
		font-size:				10px;}

		div.sidebarWidget		{background: url(widget-background-top.gif) no-repeat;}

			div.sidebarWidget h3 {
				padding-top:	9px;
				margin-bottom:	5px;
				margin-left:	10px;
				font-size:		10px;
				text-transform:	uppercase;
				color:			#154899;
				line-height:	16px;}
	
			div.sidebarWidget p {
				margin-right:	10px;
				margin-bottom:	5px;
				margin-left:	10px;
				font-size:		10px;
				line-height:	16px;}
	
			div.sidebarWidget ul,
			div.sidebarWidget ol {
				margin-left:	24px;
				margin-right:	10px;
				color:			#154899;}
	
				div.sidebarWidget ul li,
				div.sidebarWidget ul li span, 
				div.sidebarWidget ol li,
				div.sidebarWidget ol li span {
					/* 	span is styled for Opera which does not apply the line-height if the li does not contain a text node.
						In the HTML the li contains only a span with text inside and no text directly in the li. */
					margin-bottom:		5px;
					line-height:		16px;}
	
				div.sidebarWidget ul li span, 
				div.sidebarWidget ol li span {
					color:				#333;}

			div.sidebarWidget .lastItemInWidget {margin-bottom:0px;}
			div.sidebarWidget .onlyALink {margin-bottom:0px; padding-bottom:4px;}
			
			div.sidebarWidget span.initialCap {margin-right:3px; font-weight:bold; color:#154899;}

			div.sidebarWidget p.answerInWidget {margin-bottom:10px;}

			div.widgetBottom {
				height:					10px;
				margin-bottom:			20px;
				background:				url(widget-background-bottom.gif) no-repeat;}

			div.lastWidgetBottom {
				height:					10px;
				margin-bottom:			0px;
				background:				url(widget-background-bottom.gif) no-repeat;}

			div.sidebarWidget a			{text-decoration: none; color: #b73f04; }
			div.sidebarWidget a:link	{border-bottom: 1px dotted #b73f04;}
			div.sidebarWidget a:visited	{border-bottom: 1px dotted #b73f04;}
			div.sidebarWidget a:focus	{}
			div.sidebarWidget a:hover	{border-bottom: 1px solid;}
			div.sidebarWidget a:active	{border-bottom: 1px dotted; }


		div#signUpWidgetTop.sidebarWidget {
			background: 			url(widget-signup-background-top.gif) no-repeat;}

			div#signUpWidgetTop.sidebarWidget h3 {
				/* the link inside this h3 carries most of the formatting */
				text-align:				center;
				text-shadow:			1px 1px 1px #e6f0fe;}
	
				div#signUpWidgetTop.sidebarWidget h3 a			{
					line-height:		22px;		/* testing line-height as a way to manage cross browser vertical alignment */
					text-decoration: 	none; 
					border-bottom: 		1px dotted transparent;
					color:				#333;}
				div#signUpWidgetTop.sidebarWidget h3 a:link		{}
				div#signUpWidgetTop.sidebarWidget h3 a:visited	{}
				div#signUpWidgetTop.sidebarWidget h3 a:focus	{}
				div#signUpWidgetTop.sidebarWidget h3 a:hover	{border-bottom: 1px dotted #333;}
				div#signUpWidgetTop.sidebarWidget h3 a:active	{border-bottom: 1px solid  #333;}
			
			div#signUpWidgetTop.sidebarWidget p {
				margin-bottom:			0px;	/* override inheritance */
				text-align:				center;
				font-weight:			bold;
				line-height:			14px;}
			
			div#signUpWidgetBottom.widgetBottom {
				background: 			url(widget-signup-background-bottom.gif) no-repeat;}

		p.FAQWidgetQuestion {color:#154899;}


		/* 3 ways to improve your testing widget */
		
		div.sidebarWidget p.sidebarManualList {
			text-indent:				-15px;
			margin-left:				 25px; }

		div.sidebarWidget p.sidebarManualList strong {color:#154899;}


		/* widget with scroll and seal */
		
		div#sealWidget.sidebarWidget {
			background: 				url(widget-online-certification-seal.jpg) no-repeat; 
			padding-top:				 9px;
			padding-bottom:				99px;
			color:						#a22e0e;}
			
		div#sealWidget.sidebarWidget p {
			font-size: 					11px;
			line-height: 				15px;
			font-weight: 				bold; }




	div#footer	{
		position:				relative;
		height:					180px;
		width:					849px;
		width:					749px;
		margin: 				0px auto; 
		background: 			url(ballon-background-lower.jpg) no-repeat;
		padding-right:			50px;
		padding-left:			50px;
		font-size: 				11px; 
		color:					#333;}

		div#footer a			{text-decoration:none; color:#333;}
		div#footer a:link		{border-bottom: 1px dotted #e7f4ff;}
		div#footer a:visited	{border-bottom: 1px dotted #e7f4ff;}
		div#footer a:focus		{}
		div#footer a:hover		{border-bottom: 1px solid #e7f4ff;}
		div#footer a:active		{border-bottom: 1px dotted  #e7f4ff;}

		div#copyrightBlock {
			float:				left;
			width:				300px;
			padding-top:		92px;
			padding-left:		9px;}

			div#copyrightBlock p {line-height:	16px;}

		div#extraBlock {
			float:				left;
			width:				250px;
			margin-left:		181px;
			color:				#e7f4ff;}

			div#extraBlock p {
				margin-left:	22px;
				padding-top:	72px;
				font-weight:	bold;
				line-height:	16px;}

			div#extraBlock ul {
				margin-top:		4px;
				margin-left:	37px;}

			div#extraBlock ul li {}

				div#extraBlock a {
					line-height:		16px;	/* put here rather than earlier in the hierarchy, for Opera's sake */
					text-decoration:	none; 
					color:				#333;}
	
					div#extraBlock a:link		{border-bottom: 1px dotted #e7f4ff;}
					div#extraBlock a:visited	{border-bottom: 1px dotted #e7f4ff;}
					div#extraBlock a:focus		{}
					div#extraBlock a:hover		{border-bottom: 1px solid  #e7f4ff;}
					div#extraBlock a:active		{border-bottom: 1px dotted #e7f4ff;}