/* 
	
----------------------------------------------------------------------
	
	css "table of contents":
	
	1. transparent .png support
	2. position and background styles
		a. universal clear
		b. body
		c. wrappers
		d. content
	3. typographic styles

----------------------------------------------------------------------	
*/
	
	/* 1. .png transparency support - see http://doublehelix.com */
	img, body, div {
		behavior: url(css/resources/iepngfix.htc);
	}
	/* end .png transparency support */
		
	
	
	
	/* 2. position and background styles */
	
	html, body, div, p, span, img, ul, li, ol, h1, h2, h3, h4 {
		margin: 0;
		padding: 0;
	
	}
	
	html { 
		height: 100%;
	}
	body {
		background: url(../images/headerBackground.jpg) repeat-x #f1f1f1;
		height: 100%;
	}
	a 
	{
		outline: none;
	}
	#pageWrapper {
		padding: 0 0 2em 0;
		background: url(../images/combinedGradient.png) no-repeat;
		width: 100%;	
		min-height: 590px;
	}
	#wrapper {
		max-width: 1200px;
		width: auto !important;  /* !important is for IE6.  width before !important is read by all but IE6.  the width after it is ready only by IE6 */ 
		width: 760px;
		position: relative;
	}	
	#hiddenTitle {
		position: absolute;
		z-index: -1;
	}
	#navDiv {
		height: 170px;		
	}
	#logoAnchor {
		position: absolute;
		top: 1px;
	}
	#logo {
		width: 298px;
		height: 173px;
		border: none;
	}
	ul {
		margin: 15px 0 0 0;
		list-style: none;
		width: 30em;
		float: right;
	}
	li {
		margin: 0 10px;
		padding: 0;
		display: inline;
	}
	#content, #contentContact {
		margin: 20px auto 0 auto;
		min-width: 730px;
		width: auto !important; /* !important is for IE6 - see #wrapper width above */
		width: 700px;
		max-width: 1000px;
		border: 5px solid #000;
		background: #fff url(../images/grid.png);
		position: relative;
	}	
	#contact {
		min-height: 250px;
	}
	#contentContact {
		height: 44em;
	}
	.contentScrnshot {
		min-height: 640px;
		margin: 20px auto 80px auto;
		min-width: 730px;
		width: auto !important; /* !important is for IE6 - see #wrapper width above */
		width: 700px;
		max-width: 1000px;
		border: 5px solid #000;
		background: #fff url(../images/grid.png);
	}	
	#content img, #contentContact img {
		position: relative;
		top: -10px !important; /* !important is for IE6 - see #wrapper width above */
		top: 8px;
		float: right;
		margin: 0 30px 0 0;
	}		
	.contentScrnshot img {
		position: relative;
		top: -10px !important; /* !important is for IE6 - see #wrapper width above */
		top: 8px;
		float: right;
		margin: 0 30px 0 0;
	}	
	#blueBlock {
		border: 3px solid #666;
		width: 328px !important; /* !important is for IE6 - see #wrapper width above */
		width: 280px;
		height: 266px !important; /* !important is for IE6 - see #wrapper width above */
		height: 227px;
	}
	#aboutPic {
		border: 3px solid #666;
		width: 270px;
		height: 293px;
	}
	#contactPic {
		border: 3px solid #666;
		width: 328px;
		height: 266px;
	}	
	#screenShotPawmatch {
		border: 3px solid #666;
		width: 436px !important; /* !important is for IE6 - see #wrapper width above */
		width: 280px;
		height: 655px !important; /* !important is for IE6 - see #wrapper width above */
		height: 425px;
	}
	#screenShotESC {
		border: 3px solid #666;
		width: 436px !important; /* !important is for IE6 - see #wrapper width above */
		width: 280px;
		height: 323px !important; /* !important is for IE6 - see #wrapper width above */
		height: 227px;
	}
	#screenShotMichalDurham {
		border: 3px solid #666;
		width: 436px !important; /* !important is for IE6 - see #wrapper width above */
		width: 280px;
		height: 302px !important; /* !important is for IE6 - see #wrapper width above */
		height: 227px;
	}
	#content p {
		padding: 0;
	}
	.firstLine {
		margin: 20px 20px 0 20px;
	}
	.middleLine {
		margin: 0 20px;
	}
	.lastLine {
		margin: 20px;
	}	
	#bottomLine {
		margin: 0 20px 20px 20px;
	}
	#centeredBottomLine {
		margin: 0 0 20px 30%;
	}	
	#noTopGap {
		margin: 0 20px;
	}
	#tableOfContents {
		margin: 0 20px 0 2.5em;
		font-size: 90%;
	}	
	#tableOfContents a:hover
	{
		border-bottom: 2px solid #e12fe9;
	}
	.vertMargins {
		margin: 20px;
	}
	form {
		float: left;
		border: 1px 
	}
	label {
		clear: left;
		width: 6em;
		float: left;
		text-align: right;
		margin-right: 0.5em;
		display: block
	}	
	input {
		float: left;
		width: 15em;
		color: #000;
		background: #eee;
		border: 1px solid #65a4cd;
	}
	#remLen {
		width: 3em;
		margin: 0 0 0 9em;
	}
	#wordCount {

	}
	input:focus {
		border: 1px dashed #65a4cd;
	}
	.submit input {
		color: #000;
		background: #65a4cd;
		border: 2px outset #d7b9c9;
		margin: .5em 0 0 15em;
		clear: left;
		width: 10em;
	} 	
	textarea {
		float: left;
		background: #eee;
		border: 1px solid #65a4cd;
	}
	textarea:focus {
		border: 1px dashed #65a4cd;
	}
	#footer {
		padding: 0 0 0 .25em;
		margin: 3em auto 0 auto;
		min-width: 730px;
		width: auto !important; /* !important is for IE6 - see #wrapper width above */
		width: 700px;
		max-width: 1000px;
		background: #65a4cd;
		border: 1px solid #666;
		text-align: right;
		height: 17px;
		position: relative;
		text-align: center;
	}		
	#footer img {
		margin: 1px 0 0 0;
		position: absolute;
		right: 5px;
		border: none;
	}
	#footer p {
		margin: 2px 15px 0 10px;
		padding: 0 0 0 0;
	}
	/* end position and background styles */
	
	
	
	
	
	
	/* 3. typography styles */
	body {
		font-family: Helvetica, Arial, sans-serif;
	}
	#hiddenTitle {
		font-size: 1px;
		color: #1260a0
	}
	#logoAnchor {
		border: none;
	}
	li {
		font-size: 175%;
		font-weight: 800;
	}
	#content p, #contentContact p {
		font-size: 150%;
		font-weight: 800;
	}
	.contentScrnshot p {
		font-size: 150%;
		font-weight: 800;
	}	
	#largeText {
		font-size: 200%;
		font-weight: 800;
	}
	p em {
		color: #e12fe9;
	}
	.pink {
		color: #e12fe9;
	}	
	#wordCount {
		color: #e12fe9;
		font-style: italic;
		font-size: 100%;
		font-weight: 800;
	}
	.title {
		font-size: 125%;
	}
	label {
		font-size: 75%;
		font-weight: 600;
	}
	input {
		font-family: Helvetica, Arial, sans-serif;
	}
	.pinkAsterik, .pinkDagger {
		font-size: 50%;
		color: #e12fe9;
		position: relative;
		bottom: 5px;
	}
	#dagger {
		font-size: 65%;
		font-style: normal;
	}
	.floatLeft {
		float: left;
	}
	.javascriptMessage {
		font-size: 75%;
	}
	#javascriptNameMessage, #javascriptEmailMessage, #javascriptPhoneMessage, #remLen, #wordCount {
		display: none;
	}
	#formLegend {
		font-style: italic;
		font-size: 60%;
		color: #e12fe9;
		width: 300px;
	}		
	.submit input {
		font-size: 75%;
		font-weight: 600;
	}
	textarea {
		font-family: Helvetica, Arial, sans-serif;
		font-size: 55%;
	}
	A:link {
		text-decoration: none;
		color: #000;
	}
	A:visited {
		color: #000;
		text-decoration: none;
	}
	A:hover {
		color: #000;
		border-bottom: 6px solid #e12fe9;
	}
	A:active {
		color: #000;
		text-decoration: none;
	}
	
	#content A:link, #contentContact A:link {
		text-decoration: none;
		color: #000;
		border-bottom: 2px solid #000
	}
	#content A:visited, #contentContact A:visited {
		color: #000;
		text-decoration: none;
	}
	#content A:hover, #contentContact A:hover {
		color: #000;
		border-bottom: 2px solid #e12fe9;
	}
	#content A:active, #contentContact A:active {
		color: #000;
		text-decoration: none;
	}
	#contentScrnshot h2 {
		text-decoration: underline;
		color: #000;
	}
	#contentScrnshot A:visited {
		color: #000;
		text-decoration: underline;;
	}
	#contentScrnshot A:hover {
		color: #000;
		text-decoration: underline;
	}
	#contentScrnshot A:active {
		color: #000;
		text-decoration: underline;
	}	
	.screenshotLink:hover {
		border: none;
		text-decoration: none;
	}
	
	.vertMargins A:link {
		text-decoration: none;
		color: #000;
		border-bottom: 2px solid #000
	}
	.vertMargins A:visited {
		color: #000;
		text-decoration: none;
		border-bottom: 2px solid #000;
	}
	.vertMargins A:hover {
		color: #000;
		border-bottom: 2px solid #e12fe9;
	}
	.vertMargins A:active {
		color: #000;
		text-decoration: none;
	}
	#footer {
		font-size: 65%;
		font-weight: 800;
	}
	/* end typography styles */