/**
 *	Peterned V4 emulation
 *	-------------------------
 */

html,body {
	height:100%;
	margin:0;
	padding:0;
	background:#173254;
}
	body {
		behavior:url("scripts/csshover.htc");
	}

	* {
		font-family:tahoma,verdana,arial,helvetica;
		font-size:11px;
		text-align:left;
		color:white;
	}

h2 {
	margin:0;
	font-family:verdana,tahoma,arial,helvetica;
	font-size:10px;
	color:#204878;
}
	h2 span {
		font:inherit;
		font-weight:normal;
		color:#204878;
	}

	h3 span {
		font-size:9px;
		font-weight:normal;
		font-style:normal;
		color:#316d95;
	}

div.section a { 
	color:#0e2035;
	text-decoration:none;
}
	div.section a:hover {
		text-decoration:underline;
	}

	a img {
		border:0;
	}

p {
	margin:0;
	text-align:justify;
}
	p.footer {
		color:#4599ff;
	}

	p img {
		float:right;
		margin-left:5px;
	}

code {
	font-family:'courier new';
	white-space:pre;
	background:#3576c4;
}
	code[class]:before {
		font-family:verdana,arial,tahoma,helvetica;
		font-weight:bold;
	}

/**
 *	Hidden stuff
 *	-------------------------
 */

h1 span, div#footer p, p.skip, hr, div#related h2 {
	display:none;
}

/**
 *	Main Layout
 *	-------------------------
 */

div#peterned {
	position:relative;
	margin:0 auto;
	width:736px;
	height:100%;
	min-height:100%;
	background:#234d6a url("../images/v4/bg_content.gif") repeat-y;
}
	
	body>div#peterned {
		height:auto;		
	}

	div#peterned h1 {
		margin:0;
		height:163px;
		background:url("../images/v4/bg_header.jpg") no-repeat;
	}

	div#peterned:before {
		position:absolute;
		left:-113px;
		top:0;
		width:114px;
		height:140px;
		background:url("../images/v4/deco_topleft.gif") no-repeat;
		content:"";
	}

div#peterned div#content {
	margin-left:296px;
	height:575px;
	min-height:575px;
	padding:0 31px 50px 0;
	background:url("../images/v4/bg_maincontent.gif") no-repeat;
}
	div#peterned>div#content {
		height:auto;
	}

div#peterned div#footer {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:40px;
	background:url("../images/v4/bg_footer.jpg") no-repeat;
}

/**
 *	Content Area
 *	-------------------------
 */

div#content div.section {
	padding-left:27px;
	background:url("../images/v4/icon_text.gif") 8px 9px no-repeat;
}
	div.section h2 {
		padding:9px;
		background:url("../images/v4/separator.gif") bottom no-repeat;
	}
		div.section h2 span {	float:right; }
	
	div.section p {
		padding:5px 10px;
	}

ol.imageGallery {
	list-style:none;
	height:160px;
}
	ol.imageGallery li {
		list-style:none;
		float:left;
		margin:0 2px 2px;
	}

/**
 *	Code/quote blocks
 *	-------------------------
 */

code {
	display:block;
	margin:20px;
	padding:0px 10px 20px;
	width:320px;
	border-left:2px solid white;
	overflow:auto;
	overflow-y:hidden;
}
	code[class]:before {
		display:block;
		content:attr(class) ":";
	}

blockquote {
	margin:5px 20px;
	border-left:1px solid white;
	padding-left:5px;
}

	blockquote:after {
		display:block;
		margin:5px 0;
		text-align:right;
		content:"cite: " attr(cite);
	}

/**
 *	Main menu
 *	-------------------------
 */

ul#menu {
	list-style:none;
	position:absolute;
	display:block;
	margin:0;
	left:0px;
	top:163px;
	width:296px;
	height:304px;
	background:url("../images/v4/bg_menu.jpg") no-repeat;
}
	ul#menu * {
		font-family:'courier new';
		font-style:normal;
		text-decoration:none;
		color:#4599ff;
	}

	ul#menu li {
		position:absolute;
		display:block;
		width:296px;
		left:0;
		top:0;
	}

	ul#menu li a { position:absolute; }
		
	li#home { height:139px; z-index:10; }
	li#home a { left:71px; top:124px; }
	li#home:hover {
		background:url("../images/v4/menu_home.jpg") 117px 40px no-repeat; 
	}
	
	li#markup { height:163px; z-index:9; }
	li#markup a { left:113px; top:150px; }
	li#markup:hover {
		background:url("../images/v4/menu_markup.jpg") 177px 67px no-repeat; 
	}
	
	li#scripting { height:190px; z-index:8; }
	li#scripting a { left:106px; top:177px;	}	
	li#scripting:hover {
		background:url("../images/v4/menu_scripting.jpg") 214px 111px no-repeat; 
	}
	
	li#various { height:245px; z-index:7; }
	li#various a { left:91px; top:202px; }
	li#various:hover {
		background:url("../images/v4/menu_various.jpg") 215px 181px no-repeat; 
	}
	
/**
 *	Related menu
 *	-------------------------
 */

div#related {
	position:absolute;
	left:0px;
	top:480px;
	width:296px;
	padding-top:98px;
	background:url("../images/v4/bg_related.jpg") no-repeat;
}

div#related div.navigation {
	padding:10px;
}
	div.navigation ul { 
		margin:5px;
		padding:0;
		list-style:none; 
	}

	div.navigation a { text-decoration:none; }
	div.navigation li {
		float:left;
		padding:0;
		margin:0 5px;
	}

	div.navigation h3 {
		margin:0;
		padding:10px 0 0;
		clear:both;
		color:#4599D3;
		border-bottom:1px solid #316d95;
	}