/**
 *	Peterned V
 *	-------------------------
 *	Layout styles
 */

html,body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
	body { 
		text-align:center;
		min-width:780px;
		background:black url("../images/bg_body.gif") center top no-repeat;
		behavior:url("scripts/csshover.htc");
	}

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

p {	
	text-align:justify;	
}
	p.footer a { font-weight:bold; }
	p img {	
		float:right; 
		margin-left:5px;
	}
		
a {
	text-decoration:none;
	color:#cbc8a0;
}
	a:hover { text-decoration:underline; }
	a img { border:0; }

	a[rel="external"]:after {
		content:"\2197";
		font-weight:normal;
		color:white;
		margin-left:2px;
	}

	a[hreflang]:not([rel]):after {
		content:" " attr(hreflang);
		font-size:9px;
		color:white;
	}

h1, h2 {
	font-size:13px;
	color:#3e4856;
}

h3 {
	font-size:11px;
	color:#16475e;
}
	h3 span {
		font-size:10px;
		font-weight:normal;
		color:#9ccad5;
	}

h1, hr, .skip { 
	display:none; 
}

abbr {
	border-bottom:1px dotted white;
}

/**
 *	Generic content styles
 *	-------------------------
 */

code {
	font-family:'courier new';
	white-space:pre;
	display:block;
	margin:20px;
	padding:0px 10px 20px;
	width:428px;
	border-left:2px solid #cbc8a0;
	overflow:auto;
	overflow-y:hidden;
}
	code[class]:before {
		color:#cbc8a0;
		font-family:verdana,arial,tahoma,helvetica;
		font-weight:bold;
		display:block;
		content:attr(class) ":";
	}

blockquote {
	padding:0 5px;
	margin:0 25px 1em;
	border-left:2px solid #cbc8a0;
}
	blockquote p {
		margin:0 10px !important;
	}

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

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

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

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

div#peterned div#content {
	position:relative;
	width:539px;
	height:700px;
	padding:38px 0 50px;
	background:url("../images/bg_maincontent.jpg") no-repeat;
}
	div#peterned>div#content {
		height:auto;
		min-height:650px;
	}

div#peterned div#related {
	position:absolute;
	left:539px;
	top:37px;
	width:231px;
	min-height:476px;
	background:url("../images/bg_related.jpg") no-repeat;
}

div#peterned div#footer {
	position:absolute;
	left:5px;
	bottom:0px;
	width:760px;
	height:32px;
	background:url("../images/bg_footer.gif") no-repeat;
}
	div#related h2, div#footer p {
		display:none;	
	}

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

div#content div.section {
	position:relative;
	margin:0 7px 0 42px;
	padding:10px 0;
	background:url("../images/icon_text.gif") 4px 14px no-repeat;
}

div.section h2, div.section p, div.section dl {
	margin:0 20px 1em;
}
	div.section p.footer {
		clear:both;
		margin-left:0;
		margin:10px 0px 5px 0;
		padding-left:30px;
		height:17px;
		background:url("../images/icon_text.gif") 4px 0 no-repeat;
	}

	div.section dl dt {
		font-weight:bold;
	}

	div.section dl dd {
		margin-bottom:1em;
	}

div.section h2 {
	margin-bottom:5px;
	border-bottom:1px solid black;
}
	div.section h2 span {
		float:right;
		font-size:10px;
		font-weight:normal;
		color:white;
	}

div>hr {
	display:block;
	border:0;
	height:23px;
	width:515px;
	margin-left:24px;
	background:transparent url("../images/bg_ruler.gif") no-repeat;
}

/**
 *	Main Navigation
 *	-------------------------
 */

ul#menu {
	list-style:none; 
	display:block;
	padding-left:60px;
	margin:0 0 0 10px;
	height:37px;
	background:url("../images/bg_mainmenu.jpg") no-repeat;
}

ul#menu li {
	display:block;
	width:110px;
	height:31px;
	float:left;
	margin-right:1px;
	background:url("../images/menu_itembg.gif") no-repeat;
}
	ul#menu li:hover, ul#menu li.active {
		background:url("../images/menu_itembg_on.gif") no-repeat;
	}

ul#menu li a {
	display:block;
	height:31px;
}
	li#home a { background:url("../images/but_peterned.gif") 50% 10px no-repeat; }
	li#markup a { background:url("../images/but_markup.gif") 50% 10px no-repeat; }
	li#scripting a { background:url("../images/but_scripting.gif") 50% 10px no-repeat; }	
	li#various a { background:url("../images/but_various.gif") 50% 10px no-repeat; }
	
	ul#menu li em {
		display:none;
	}

/**
 *	Related Navigation
 *	-------------------------
 */

div.navigation {
	background-color:white;
}
	div.navigation ul { list-style:none; }
	div.navigation a {
		text-decoration:none;
		font-weight:bold;
		color:#333b4d;
	}
		div.navigation a:hover {
			text-decoration:underline;
		}

div#related div.internal {
	margin-top:119px;
	padding-top:2px;
	height:292px;
	background:transparent url("../images/bg_topinternal.gif") no-repeat;
}

div#related div.external {
	margin-top:61px;
	padding-top:27px;
	min-height:124px;
	background:transparent url("../images/bg_topexternal.gif") no-repeat;
}
	div#related div.external ul {
		height:100px;
	}

	div#related>div.external ul {
		height:auto;
		min-height:100px;
	}

	div#related>div.external:after {
		display:block;
		height:11px;
		background:url("../images/bg_relatedcap.gif") no-repeat;
		content:"";
	}

div#related div.navigation ul, 
div#related div.navigation h3 {
	display:block;
	margin:0 31px 0 0;
	background:white;
}

div#related div.navigation h3 {
	padding:10px 0 2px 0px;
	border-style:solid;
	border-color:black white;
	border-width:0 10px 1px;
}

div#related div.navigation li {
	display:block;
	margin-right:10px;
	padding:5px 15px;
	text-align:right;
	line-height:11px;
	background:url("../images/related.gif") right no-repeat;
}
	div#related div.external li {
		background-image:url("../images/relatedex.gif");
	}