/*
	CSS for ProjectStory
	by LR Communication Design
	March 2009
	css specific to index.html
*/

	*					{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;}

	div#pageWrapper	{
		position:		relative;
		height:			830px;
		height:			870px;
		width:			749px;
		margin: 		0px auto; 
		background:		url(train-test-certify-online.jpg) no-repeat;
		padding-right:	50px;
		padding-left:	50px;}

	img#PSCertifyLogo {
		float:			left;
		margin-top:		21px;
		margin-left:	66px;
		margin-left:	9px;}

		a#PSCertifyLogoLink			{text-decoration: none;}
		a#PSCertifyLogoLink:link	{}
		a#PSCertifyLogoLink:visited	{}
		a#PSCertifyLogoLink:focus	{}
		a#PSCertifyLogoLink:hover	{}
		a#PSCertifyLogoLink:active	{}

	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#firstParagraph {
		width: 			254px;
		margin-left:	502px;
		padding-top:	56px;
		font-size: 		13px;
		font-weight:	bold;
		line-height:	20px;
		color:			#154899;}

	p#secondParagraph {
		width: 			254px;
		margin-left:	502px;
		padding-top:	12px;
		font-size: 		13px;
		font-weight:	normal;
		line-height:	20px;
		color:			#333;}

	p#links {
		padding-top:	71px;
		margin-left:	10px;
		font-size: 		12px;
		font-weight:	bold;}

		p#links a			{text-decoration: none; color:#000;}
		p#links a:link		{color:#000;}
		p#links a:visited	{color:#000;}
		p#links a:focus		{color:#000;}
		p#links a:hover		{color:#000; border-bottom: 1px dotted #000;}
		p#links a:active	{color:#000; border-bottom: 1px solid  #000;}
	
		p#links a#selected:link,
		p#links a#selected:visited	{color: #fff; border-bottom: 0px;}
		p#links a#selected:focus	{color: #fff; border-bottom: 0px;}
		p#links a#selected:hover	{color: #fff; border-bottom: 0px;}
		p#links a#selected:active	{color: #fff; border-bottom: 0px;}


	div#columnOne {
		float:				left;
		width:				230px;
		margin-top:			33px;
		margin-right:		4px;
		margin-left:		10px;}

		div#columnOne h2 {
			margin-bottom:	7px;
			font-size:		10px;
			font-weight:	bold;
			color:			#154899;}

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

		p#linkToMoreIinfo	{padding-top:	2px;}

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


	div#columnTwo {
		float:				left;
		width:				230px;
		margin-top:			33px;
		margin-left:		6px;
		font-size:			10px;}

		div#columnTwo h2 {
			margin-bottom:	7px;
			font-size:		10px;
			font-weight:	bold;
			color:			#154899;}

		div#columnTwo p	{
			margin-bottom:	6px;
			line-height:	16px;
			color:			#333;}
			
		div#columnTwo ul {
			margin-left:	14px;
			color:			#154899;}
			
		div#columnTwo ul li, 
		div#columnTwo ul li span	{
			/*  span is styled for Opera. Opera does not use the line height unless there is free text in the li.
				In the HTMl there is a span and no free text. */
			margin-bottom:	5px;
			line-height:	16px;}

		div#columnTwo ul li span	{
			color:			#333;}


	div#columnThree { 
		float:				left;
		width:				246px;
		margin-top:			33px;
		margin-left:		23px;
		line-height:		12px;}

		div#columnThree h2 {
			padding-top:	17px;
			font-size:		10px;
			font-weight:	bold;
			text-align:		center;
			text-shadow:	1px 1px 1px #e6f0fe;}

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


			p#signUpNote {
				padding-top:	11px;
				font-size:		10px;
				font-weight:	bold;
				text-align:		center;
				line-height:	14px;}


			div#loginFormDiv {
				margin-top:		27px;
				font-size:		9px;}
	
				p#loginFormTitle {
					padding-left:		74px;
					margin-bottom:		5px;}

				div#loginFormDiv label {
					display:			block;
					float:				left;
					width:				61px;
					padding-top:		4px;
					padding-right:		9px;
					padding-left:		4px;
					text-align:			right;}

				div#loginFormDiv input {
					width:				150px;
					margin-bottom:		4px;
					padding:			3px;
					border:				1px solid #e0e0e0;
					font-size:			9px; /* repeated for ie */ }
	
				div#loginFormDiv a {
					/* the login button link */
					display:			block; 
					width:				44px; 
					margin-top:			14px;
					margin-bottom:		15px;
					margin-left:		132px;
					border-bottom: 		1px dotted transparent;
					font-size:			10px; 
					font-weight:		bold; 
					text-align:			center;
					text-decoration:	none; 
					text-shadow:		1px 1px 0px #ffffff;
					color:				#3e81ad;}

					div#loginFormDiv a:link		{}
					div#loginFormDiv a:visited	{}
					div#loginFormDiv a:focus	{}
					div#loginFormDiv a:hover	{border-bottom: 1px dotted #3e81ad;}
					div#loginFormDiv a:active	{border-bottom: 1px solid  #3e81ad;}


				p#forgotPassword {
						width:				161px;
						margin-left:		74px; 
						line-height:		16px;}

					p#forgotPassword a {
						font-size:			9px;
						text-decoration:	none; 
						color:				#333;}
	
						p#forgotPassword a:link		{border-bottom: 1px dotted #333;}
						p#forgotPassword a:visited	{border-bottom: 1px dotted #333;}
						p#forgotPassword a:focus	{}
						p#forgotPassword a:hover	{border-bottom: 1px solid  #333;}
						p#forgotPassword a:active	{border-bottom: 1px dotted #333;}


		div#copyrightBlock {
			position: 		absolute;
			top:			783px;
			left:			60px;
			font-size: 		11px;
			line-height:	16px;}

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

			div#copyrightBlock a {
				text-decoration:	none; 
				color:				#333;}

				div#copyrightBlock a:link		{border-bottom: 1px dotted #e7f4ff;}
				div#copyrightBlock a:visited	{border-bottom: 1px dotted #e7f4ff;}
				div#copyrightBlock a:focus		{}
				div#copyrightBlock a:hover		{border-bottom: 1px solid  #e7f4ff;}
				div#copyrightBlock a:active		{border-bottom: 1px dotted #e7f4ff;}


		div#extraBlock {
			display:			none;
			position: 			absolute;
			top:				762px;
			left:				563px;
			font-size: 			11px;
			color:				#e7f4ff;}

			div#extraBlock p {
				margin-bottom:	6px;
				font-weight:	bold;
				line-height:	16px;}
	
			div#extraBlock ul {margin-left:15px;}
			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;}