/*
	
	Open Network Primary Stylesheet
	http://www.opennetwork.info
	---------------------------------------------------
	
	Copying without permission is forbidden. Copyright
	(C) 2007 Christopher Green; All Rights Reserved.
	
	*/	
	
	
	/* Layout */

	body
	{
		padding: 0;
		margin: 0;
		font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.7em;
		color: #333;
		background-color: #fff;
		background-image:url(images/bg.png);
		background-repeat: repeat-x;
		background-position: top
	}


	p
	{
		font-size: 1.1em
	}

	div.content
	{
		clear: left;
		margin: -40px auto 0 auto;
		padding: 1.8em;
		min-width: 720px;
		max-width: 1100px
	}
	
	div#products
	{
		width: 140px;
		margin: 0 auto
	}
	
	
	div#purchasebox
	{
		background-color: #efefef;
		border: 1px solid #ccc;
		padding: 0.75em
	}
	
	/* Three block layout */
	
	
	dl.threecol
	{
		width: 30%;
		padding: 0;
		padding-left: 1.2em;
		padding-right: 1.2em;
		float: left;
		display: block;
		border-left: 1px solid #666;
		list-style: none;
		margin: 2.0em 0 0.5em 0;
	}
	
	dl.twocol
	{
		width: 46%;
		padding: 0;
		padding-left: 1.2em;
		padding-right: 1.2em;
		float: left;
		display: block;
		border-left: 1px solid #666;
		list-style: none;
		margin: 2.8em 0 1.9em 0;
	}

	dl.threecol dt, dl.twocol dt
	{
		width: 222px;
		margin: 0 auto 20px auto;
		padding: 0;
	}

	dl.twocol dt
	{
		margin-top: 0
	}

	dl.threecol dd
	{
		padding: 0;
		margin: 2em 0 0 0;
	}

	dl.twocol dd
	{
		padding: 0;
		margin: 2em 0 0 0;
	}
	
	dl.left
	{
		border-left: 0;
		margin-left: 0;
		padding-left: 0;
		clear: both
	}

	dl.right
	{
		margin-right: 0;
		padding-right: 0
	}
	
	
	/* Alternating list */
	
	ul.alternating, ul.alternating li
	{
		list-style: none;
		margin: 0;
		padding: 0;
		text-indent: 0
	}
	
	ul.alternating
	{
		margin: 10px;
		border: 1px solid #999;
		padding: 2px;
		width: 50%
	}
	
	ul.alternating li
	{
		display: block;
		background-color: #e0e6bf;
		padding: 1em
	}
	
	ul.alternating li.alt
	{
		background-color: white
	}
	
	tr
	{
	
		background-color: #e0e6bf;
	}
	
	div.important
	{
		background-color: #f5ffb3;
		border: 1px solid #666;
		padding: 2px
	}
	
	input.txt
	{
		border: 2px inset;
		width: 100%
	}
	
	textarea.txt
	{
		border: 2px inset;
		width: 100%;
		height: 7em;
		min-height: 300px;
		font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
		font-size: 1.1em
	}
	
	label
	{
		font-weight: bold
	}
	
	.underline
	{
		text-decoration: underline
	}
	
	table
	{
		margin: 3em auto;
	}
	
	table td
	{
		padding: 1em;
	}
	
	tr.alt, thead tr
	{
		background-color: white
	}
	
	table
	{
		border: 1px solid #999;
		padding: 2px;
	}
	
	table, tbody, thead, tr
	{
		width: 100%
	}
	
	thead tr
	{
		font-weight: bold;
	}
	
	tbody tr td
	{
		width: 50%
	}
	
	
	/* Main Menu */
	
	
	ul#menu
	{
		list-style: none;
		margin: 0;
		padding: 0;
		color: #333;
		position: absolute;
		right: 60px;
		top: 135px
	}

	#menu a
	{
		color: #fff
	}

	#menu a:hover
	{
		color: #333
	}

	
	#menu a.parent, #menu a.single
	{
		color: #333
	}

	#menu, #menu ul {
		float: left;
		list-style: none;
		line-height: 1;
		border: solid transparent;
		border-width: 1px 0;
		margin: 0 0 1em 0;
		text-indent: 0
	}
	
	#menu ul
	{
		background-color: #333;
		padding: 1em 0 1em 0;
		color: white
	}
	
	#menu a {
		display: block;
		width: 14em;
		w\idth: 6em;
		text-decoration: none;
		padding: 0.25em 2em;
	}
	
	#menu li {
		float: left;
		padding: 2px 0;
		width: 10em;
		list-style: none;
		margin: 0;
	}
	
	#menu li ul {
		position: absolute;
		left: -999em;
		height: auto;
		width: 14.4em;
		w\idth: 13.9em;
		z-index: 999;
		font-weight: normal;
		border-width: 0.25em;
		margin: 0;
	}
	
	#menu li li {
		padding-right: 1em;
		position: relative;
		left: 0.5em;
		width: 12em
	}
	
	#menu li ul a {
		width: 13em;
		w\idth: 9em;
	}
	
	#menu li ul a
	{
		color: #fff
	}
	
	#menu li a.single, #menu li a.parent
	{
		text-align: center
	}
	
	#menu li ul ul {
		margin: -1.75em 0 0 14em;
	}
	
	#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
		left: -999em;
	}
	
	#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
		left: auto;
	}

	#menu li:hover, #menu li.sfhover {
		background-color: #333;
		color: #fff
	}
	
	ul#menu li:hover a, ul#menu li.sfhover a
	{
		color: #fff
	}
	
	ul#menu li:hover ul li:hover a, ul#menu li.sfhover ul li.sfhover a
	{
		color: #333
	}
	
	ul#menu li:hover a.parent, ul#menu li.sfhover a.parent
	{
		color: #666
	}
	
	ul#menu ul li:hover, ul#menu ul li.sfhover {
		background-color: #fff
	}

	#menu li a.single:hover
	{
		color: #fff
	}


	/* Bottom Menu */
	
	ul#bottom
	{
		list-style: none;
		margin: 0 auto 1.4em auto;
		padding-bottom: 3px;
		width: 20em;
		color: #999;
		text-align: center;
		font-size: 0.9em
	} 
	
	ul#bottom li
	{
		border-left: 1px solid #ccc;
		display: block;
		padding: 0 0 0 0.7em;
		margin: 0 0 0 0.7em;
		float: left
	}

	ul#bottom li.first
	{
		border-left: none;
		margin: 0;
		padding: 0
	}

	/* Display Elements */


	h1, h2, h3
	{
		font-weight: normal
	}
	
	h2
	{
		font-size: 1.6em;
		display: block;
	}
	
	h3
	{
		font-size: 14px;
		margin: 0 0 12px 0;
		padding:  0;
	}

	a
	{
		color: #333;
		text-decoration: underline
	}
	
	a img
	{ 
		padding: 3px;	
		border: 1px solid transparent
	}

	a:hover img
	{
		border: 1px solid #ccc
	}

	a:hover
	{
		text-decoration: none
	}
	
	div.yellow
	{
		color: #666;
		font-weight: normal;
		border: 1px solid #ccc;
		background-color: #fef9e1;
		margin: 0.5em 0 1em 0;
		padding: 0.5em
	}
	
	.center
	{
		text-align: center
	}

	.printout
	{
		display: none
	}

	form.centerFrm
	{
		display: block;
		padding: 1.8em 0 0 0;
		width: 100%;
		position: relative
	}

	.floatleft
	{
		float: right
	}

	.leftButton
	{
		
		float: left;
		margin-left: 12px
	}
	
	button.btn, input.btn  
	{
		border: 0;
		width: 136px; 
		height: 35px;
		padding: 2px 0;
		text-align: center;
		color: #333;
		font-size: 0.9em;
		display: block;
		background-color: transparent;
		background-image: url(images/button.png);
		background-repeat: no-repeat;
		cursor: pointer;
		background-position: top left;
		text-shadow: #fff 2px 2px 0  /* Ignored by browsers that dont support this */		
	}
	
	#productlogorepeat
	{
		background-image: url(images/pgxbg.jpg);
		height: 200px;
		position: absolute;
		left:0;
		right: 0;
	}
	
	#productintro
	{
		margin-top: 240px
	}
	
	abbr, acronym
	{
		border-bottom: 1px dotted #ccc
	}
	
	button.btn:hover, input.btn:hover
	{
		background-position: -150px 0.5px;
		color: #000;
		text-shadow: #ccc 2px 2px 0  /* Ignored by browsers that dont support this */
	}
	
	.moreinfo
	{
		margin: 0 auto
	}
		
	img.productlogo
	{
		float: left;
		clear: left;
		width: 140px;
		height: 174px
	}

	div.content .banner
	{
		clear: right;
		float: right;
		margin: auto 12px auto 12px
	}
	
	div.clearall
	{
		margin-bottom: 5px;
		clear: both;
		height: 1px;
		line-height: 1px;
		width: 100%
	}
	
	img#product1
	{
		margin-top: 6px;
	}
	
	p#copyright
	{
		margin-top: 5px;
		padding-top: 5px;
		text-align: center;
		display: block;
		clear: left;
		color: #999;
		font-size: 0.9em
	}
	
	
	/* Gilder / Levin Image Replacement */
	
	
	.replace 
	{ 
	 	position: relative;
  		/* hide overflow: hidden from mac ie5 \*/
	 	overflow: hidden;
 		/* end hide from mac ie5 */
  		margin: 0;
  		padding: 0
  	}

	.replace em
	{
		display: block;
	 	position: absolute;
	 	top: 0px; 
		left: 0px;
	 	z-index:1 /*for Opera 5 and 6*/
	 }

	.replace a 
	{ 
		display:block; 
	}

	/* --------------------------------------- */
	
	#logo, #logo em 
	{
  		width: 520px;
  		height: 109px;
  	}

	#logo em  {
   		background: url(images/logo.png) top left no-repeat;
  	}

	#logo
	{
	
		margin-top: 24px;
		margin-bottom: 84px; 
	 	font-size: 1.2em;
  	}
	
	/* --------------------------------------- */
	
	.subheader, .subheader em 
	{
		width: 222px;
  		height: 46px;
	}
	
	.large, .large em 
	{
  		height: 135px;
  		text-align: center
	}
	
	.subheader
	{
  		font-size: 1.2em;
		margin: 0 auto 
  	}
	
	/* --------------------------------------- */
	
	#webdesign em  
	{
   		background: url(images/webdesign.png) top center no-repeat;
  	}
	
	#services em  
	{
   		background: url(images/services.png) top center no-repeat;
  	}

	#searchengine em  
	{
   		background: url(images/search.jpg) top center no-repeat;
  	}
  	
  	#extras em  
	{
   		background: url(images/extras.jpg) top center no-repeat;
  	}
  	
  	#scripting em  
	{
   		background: url(images/scripting.jpg) top center no-repeat;
  	}
	 
	#programming em  
	{
   		background: url(images/programming.jpg) top center no-repeat;
  	}
	
	#applications em  
	{
   		background: url(images/applications.png) top center no-repeat;
  	}		
	
	/* --------------------------------------- */
	
	.star, .star em 
	{
		width: 119px;
  		height: 114px;
	}
	
	.star
	{
		text-align: center;
  		font-size: 1.2em;
		margin: 0.2em;
		float: right
  	}

	/* -------------------------------------- */

	.mainproductlogo, .mainproductlogo em 
	{
		width: 566px;
  		height: 150px;
	}
	
	.mainproductlogo
	{
		text-align: center;
  		font-size: 1.2em;
		margin: 0 auto;
  	}
	
	/* --------------------------------------- */
	
	#pgxmainlogo em  
	{
		background: url(images/pgxlogo.png) top center no-repeat;
		background-color: Transparent;
	}

	#star1 em  
	{
		background-image: url(images/offer.jpg)
	}

	#standard em  
	{
		background: url(images/pgxstandard.jpg) top center no-repeat;
	}
	
	#star2 em  
	{
		background-image: url(images/offer2.jpg)
	}
	
	#javascript em  
	{
		background-image: url(images/javascript.jpg);
		background-position: -13px
	}

	#codeconversion em  
	{
		background-image: url(images/codeconversion.jpg);
		background-position: -13px
	}
	
	#star3 em  
	{
		background-image: url(images/offer3.jpg);
		background-position: -13px;	}