/*---------------------------------------
Title:		ZS Style Sheet
Version:	0.2
Author:		Zeal Vurte
Contact:	zeal@zealous-studios.co.uk
Website:	http://www.zealous-studios.co.uk
---------------------------------------*/
/*	{ outline: 1px solid red; } */
/*	Layout
---------------------------------------*/
/* Basics */
html
{
	font-size: xx-small; /* #Note: Reduce all browsers to a base of 9px at default text size. */
	background-color: #000; /* #Fix: Psuedo-fix for Chrome not expanding body to full height of html. */
}

body
{
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	
	color: #FFF;
	background-color: #000;
	
	direction: ltr;
	font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Sans-Serif;
	font-size: 1.45em; /* #Note: 9px * 1.45em = 13.05px */
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1.23em; /* #Note: 13.05px * 1.23em = 16.0515px */
	text-decoration: none;
}
.-no-css
{
	display: none !important;
}
.uc
{
	text-decoration: line-through !important;
}
.warning
{
	clear: left;
	float: left;
	width: 100%;
	min-width: 44em;
	
	color: #000;
	background-color: #FFF;
}
.warning p
{
	margin: 0.23em auto;
	width: 43em;
	
	font-size: 0.845em;
}
.warning p span.note
{
	font-style: italic;
}
.warning p strong
{
	color: red;
	font-weight: bold;
}
.clr
{
	clear: both;
	visibility: hidden;
}

/* Layout */
#site
{
	min-width: 100%;
	min-height: 100%;
	height: 1px;
}
#upper
{
	clear: left;
	float: left;
	min-height: 110px;
	min-width: 100%;
	
	background-image: url(../images/zs_bg_upper.jpg);
	background-attachment: scroll;
	background-position: bottom left;
	background-repeat: repeat-x;
}
#upper-outer
{
	margin: auto;
	min-height: 100%;
	max-width: 67em; /* #Note: 13.05px * 67em = 874.35px */
	min-width: 512px;
	
	background-image: url(../images/zs_glow.jpg);
	background-attachment: scroll;
	background-position: bottom right;
	background-repeat: no-repeat;
}
#upper-inner
{
	min-height: 100%;
	min-width: 100%;
	
}
#lower
{
	clear: left;
	float: left;
	min-width: 100%;
	
	background-image: url(../images/zs_bg_lower.jpg);
	background-attachment: scroll;
	background-position: top left;
	background-repeat: repeat-x;
}
#lower-outer
{
	margin: auto;
	max-width: 67em; /* #Note: 13.05px * 67em = 874.35px */
	min-width: 512px;
	
	background-image: url(../images/zs_reflection.jpg);
	background-attachment: scroll;
	background-position: top right;
	background-repeat: no-repeat;
}
#lower-inner
{
	min-width: 100%;
}
#pagefooter
{
	text-align: center;
	font-size: 0.845em; /* #Note: 13.05px * 0.845em = 11.02725px */
	font-weight: normal;
}

/* Logo */
#logo
{
	display: none;
	float: right;
	height: 80px;
	width: 22em; /* #Note: 13.05px * 22em = 287.1px */
	min-width: 250px;
	
	background-image: url(../images/zs_logo.png);
	background-attachment: scroll;
	background-position: top right;
	background-repeat: no-repeat;
}

/* Main Nav */
#nav
{
	float: left;
	height: 110px;
	width: 44em; /* #Note: 13.05px * 44em = 574.2px */
	min-width: 408px;
}
#nav-outer
{
	position: relative;
	height: 100%;
	width: 100%;
}
#nav-inner
{
	position: absolute;
	bottom: 0;
	left: 0;
	height: 21px;
	width: 100%;
}
#mainnav
{
	display: block;
	padding: 0px;
	margin: auto;
	width: 408px;
	height: 21px;
}
#mainnav > li
{
	display: block;
	margin-left: 0px;
	margin-right: 0px;
	padding-right: 10px;
	padding-left: 11px;
	float: left;
	height: 21px;
	
	background-image: url(../images/zs_split.png);
	background-attachment: scroll;
	background-position: top left;
	background-repeat: repeat-y;
}
#mainnav > li:first-child
{
	padding-left: 10px;
	background-image: none;
}
#mainnav > li > a
{
	display: block;
	height: 21px;
	padding: 0;
	margin: 0;
	
	cursor: pointer;
	
	outline-width : 0;
	
	background-image: url(../images/zs_menu.png);
	background-attachment: scroll;
	background-repeat: no-repeat;
}
#mainnav > li > a[rel~="section"][rel~="home"]
{
	width: 51px;
	
	background-position: 0px 0px;
}
#mainnav > li > a[rel~="section"][rel~="home"]:hover,
#mainnav > li > a[rel~="section"][rel~="home"]:active
{
	background-position: 0px -21px;
}
#mainnav > li > a[rel~="section"][rel~="biography"]
{
	width: 80px;
	
	background-position: -51px 0px;
}
#mainnav > li > a[rel~="section"][rel~="biography"]:hover,
#mainnav > li > a[rel~="section"][rel~="biography"]:active
{
	background-position: -51px -21px;
}
#mainnav > li > a[rel~="section"][rel~="current"]
{
	width: 61px;
	
	background-position: -131px 0px;
}
#mainnav > li > a[rel~="section"][rel~="current"]:hover,
#mainnav > li > a[rel~="section"][rel~="current"]:active
{
	background-position: -131px -21px;
}
#mainnav > li > a[rel~="section"][rel~="portfolio"]
{
	width: 69px;
	
	background-position: -192px 0px;
}
#mainnav > li > a[rel~="section"][rel~="portfolio"]:hover,
#mainnav > li > a[rel~="section"][rel~="portfolio"]:active
{
	background-position: -192px -21px;
}
#mainnav > li > a[rel~="section"][rel~="links"]
{
	width: 43px;
	
	background-position: -261px 0px;
}
#mainnav > li > a[rel~="section"][rel~="links"]:hover,
#mainnav > li > a[rel~="section"][rel~="links"]:active
{
	background-position: -261px -21px;
}

/* Subnav */
#subnav
{
	float: left;
	width: 22em; /* #Note: 13.05px * 22em = 287.1px */
}
#subnav-outer
{
	width: 100%;
}
#subnav-inner
{
	padding: 1.46em; /* #Note: 13.05px * 1.46em = 19.053px */
}

/* Previews */
#preview
{
	position: relative;
	height: 138px;
	width: 44em;
	min-width: 512px;
	margin-top: 1.46em; /* #Note: 13.05px * 1.46em = 19.053px */
	margin-bottom: -1.46em; /* #Note: 13.05px * -1.46em = -19.053px */
}
#preview-content
{
	height: 138px;
	width: 512px;
	margin: 0 auto;
	
	background-image: url(../images/zs_preview_bg.jpg);
	background-attachment: scroll;
	background-position: top left;
	background-repeat: no-repeat;
}
#preview-content > .outer
{
	display: none;
	position: absolute;
	top: 0;
	bottom: 20px;
	left: 0;
	right: 0;
	z-index: 1;
	margin: -4.7158em 0 -2.99em 0; /* #Note: 13.05px * -4.7158em = 61.54119px | 13.05px * 2.99em = 39.0195px */
}
#preview-content > .inner
{
	position: relative;
	height: 100%;
	width: 100%;
	z-index: 2;
	margin: 0 auto;
}
#preview-content span.mid
{
	position: absolute;
	top: 50%;
	left: 0px;
	right: 0px;
	margin-top: -0.615em;
	text-align: center;
}
#preview-nav
{
	height: 0px;
	width: 512px;
	margin: 0 auto;
}
#preview-nav #preview-nav-links
{
	position: absolute;
	bottom: 0;
	z-index: 3;
	height: 20px;
	width: 512px;
	margin: 0;
	padding: 0;
}
#preview-nav #preview-nav-links > li
{
	display: block;
	margin: 0;
	padding: 0;
	width: 256px;
	height: 20px;
}
#preview-nav-links > li.prev
{
	float: left;
}
#preview-nav-links > li.next
{
	float: right;
}
#preview-nav-links > li > a.button[rel~="item"]
{
	display: block;
	margin: 0;
	padding: 0;
	width: 256px;
	height: 20px;
	
	color: #999;
	text-align: center;
	
	cursor: pointer;
	
	outline-width: 0;
	
	background-image: url(../images/zs_preview_buttons.png);
	background-attachment: scroll;
	background-repeat: repeat-x;
}
#preview-nav-links > li.prev > a[rel~="previous"]
{
	background-position: 0px 0px;
}
#preview-nav-links > li.prev > a[rel~="previous"]:hover,
#preview-nav-links > li.prev > a[rel~="previous"]:active
{
	color: #FFF;
	
	background-position: 0px -21px;
}
#preview-nav-links > li.next > a[rel~="next"]
{
	background-position: -257px 0px;
}
#preview-nav-links > li.next > a[rel~="next"]:hover,
#preview-nav-links > li.next > a[rel~="next"]:active
{
	color: #FFF;
	
	background-position: -257px -21px;
}

/* Content Layout */
#body
{
	float: left;
	width: 44em; /* #Note: 13.05px * 44em = 574.2px */
	min-width: 512px;
	
	background-image: url(../images/zs_split.png);
	background-attachment: scroll;
	background-position: top left;
	background-repeat: repeat-y;
}
#content
{
	float: left;
	width: 100%;
	
	border-bottom: 1px #1C1C1C solid;
	
	background-image: url(../images/zs_split.png);
	background-attachment: scroll;
	background-position: top right;
	background-repeat: repeat-y;
}
#msg
{
	margin: 1.46em 1px; /* #Note: 13.05px * 1.46em = 19.053px */
	
	background-color: #000;
}
#news
{
	margin: 0 1px;
	
	background-color: #000;
}
#news > .post
{
	margin: 1.46em 0; /* #Note: 13.05px * 1.46em = 19.053px */
}
#msg,
#news > .post
{
	background-image: url(../images/zs_section_bg-btm.jpg);
	background-attachment: scroll;
	background-position: top left;
	background-repeat: repeat-x;
}
#msg > .header,
#news > .post > .header
{
	min-height: 20px;
	padding: 0.23em; /* #Note: 13.05px * 0.23em = 3.0015px */
	
	background-image: url(../images/zs_header_bg.jpg);
	background-attachment: scroll;
	background-position: bottom left;
	background-repeat: repeat-x;
}
#msg > .content,
#news > .post > .content
{
	position: relative;
	padding: 0.23em; /* #Note: 13.05px * 0.23em = 3.0015px */
	
	background-image: url(../images/zs_section_bg-top.jpg);
	background-attachment: scroll;
	background-position: top left;
	background-repeat: repeat-x;
}
#news > .post > .header > a.button
{
	float: right;
	width: 16px;
	height: 16px;
	margin: 0.46em; /* #Note: 13.05 * 0.46em = 6.003 */
	
	cursor: pointer;
	
	background-image: url(../images/zs_buttons.png);
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: -17px 0px;
}
#news > .post > .header > a.button:hover,
#news > .post > .header > a.button:active
{
	background-position: -17px -17px;
}
#news > .rolled > .content
{
	display: none;
}
#news > .rolled > .header > a.button
{
	background-position: 0px 0px;
}
#news > .rolled > .header > a.button:hover,
#news > .rolled > .header > a.button:active
{
	background-position: 0px -17px;
}


/* Headers */
#pageheader
{
	margin: 1.46em auto; /* #Note: 13.05px * 1.46em = 19.053px */
}

h1,
h2,
h3,
h4,
h5,
h6
{
	margin: 0;
	padding: 0.23em; /* #Note: 13.05px * 0.23em = 3.0015px */
	font-weight: normal;
	
	color: #FFF;
}
h1
{
	text-align: center;
	font-size: 1.46em; /* #Note: 13.05px * 1.46em = 19.053px */
	text-decoration: underline;
}
h2
{
	font-size: 1.303em; /* #Note: 13.05px * 1.303em = 17.00415px */
	
	color: #93F;
}
h3
{
	font-size: 1em; /* #Note: 13.05px * 1em = 13.05px */
	padding-left: 1.23em; /* #Note: 13.05px * 1.23em = 16.0515px */
	
	color: #999;
}
h4
{
	padding: 0;
	font-size: 1.15em; /* #Note: 13.05px * 1.15em = 15.0075px */
	font-weight: bold;
}
h5
{
	padding: 0;
	font-size: 1em; /* #Note: 13.05px * 1em = 13.05px */
	font-weight: bold;
}
h6
{
	padding: 0;
	font-size: 0.845em; /* #Note: 13.05px * 0.845em = 11.02725px */
	font-weight: bold;
}

/* Text */
p
{
	margin: 0.23em; /* #Note: 13.05px * 0.23em = 3.0015px */
	padding: 0;
}
acronym,
abbr
{
	color: #CCC;
	cursor: help;
	border-bottom: none;
	font-style: italic;
}
span.err
{
	color: red;
}

/* Links */
a
{
	text-decoration: none;
	
	color: #FFF;
}
a:link
{
	text-decoration: none;
	
	color: #93F;
}
a:visited
{
	text-decoration: none;
	
	color: #62B;
}
a:hover
{
	text-decoration: none;
	
	color: #C8F;
}
a:active
{
	text-decoration: none;
	
	color: #FFF;
}
#lower a[href][rel]
{
	padding-right: 18px;
	
	background-image: url(../images/zs_icons_links_external.png);
	background-attachment: scroll;
	background-position: center right;
	background-repeat: no-repeat;
	
	/* #Note: Link Icon Colour Scheme:
			Monochrome = Meta (User, User Agent realted)
			Yellow = File
			Orange = Data
			Green = Program
			Red = Legal
			Aqua = Service
			Blue =  External (Misc)
			Purple = Internal (Misc)
	*/
}
#lower a[href][rel~="self"]
{
	/* #Note: Turn off for jump links */
	padding-right: 0;
	background-image: none !important;
}
#lower a[href^="/"][rel],
#lower a[href^="http://www.zealous-studios.co.uk"][rel],
#lower a[href^="http://www.zealous-studios.com"][rel]
{
	background-image: url(../images/zs_icons_links_internal.png);
}
#lower a[href][rel~="meta"]
{
	background-image: url(../images/zs_icons_links_meta.png);
}
#lower a[href][rel~="file"]
{
	background-image: url(../images/zs_icons_links_file.png);
}
#lower a[href][rel~="file"][rel~="program"]
{
	background-image: url(../images/zs_icons_links_program.png);
}
#lower a[href][rel~="data"]
{
	background-image: url(../images/zs_icons_links_data.png);
}
#lower a[href][rel~="data"][rel~="source"]
{
	background-image: url(../images/zs_icons_links_feed.png);
}
#lower a[href][rel~="service"]
{
	background-image: url(../images/zs_icons_links_service.png);
}
#lower a[href][rel~="service"][rel~="help"]
{
	background-image: url(../images/zs_icons_links_help.png);
}
#lower a[href][rel~="service"][rel~="translation"]
{
	background-image: url(../images/zs_icons_links_trans.png);
}
#lower a[href][rel~="service"][rel~="validator"]
{
	background-image: url(../images/zs_icons_links_validator.png);
}
#lower a[href][rel~="legal"]
{
	background-image: url(../images/zs_icons_links_legal.png);
}
#lower a[href][rel~="legal"][rel~="license"]
{
	background-image: url(../images/zs_icons_links_licence.png);
}

/* Lists */
ul,
li
{
	margin: 0;
	padding: 0;
	list-style: none;
}
#body ul
{
	margin: 0.23em;
	padding-left: 0.23em;
}
#body li
{
	margin: 0.23em 0;
}
#subnav-inner > li
{
	margin: 0.23em 0;
}
#subnav-inner > li > ul
{
	
}
li.h,
ul.h > li
{
	float: left;
	padding-left: 0.23em;
}
li.h:first-child,
ul.h > li:first-child
{
	padding-left: 0;
}
ul.h > li.v,
ul.h > li.clr
{
	float: none;
	clear: left;
	margin: 0;
	padding: 0;
}
ul.csv > li,
ul.psv > li
{
	margin: 0;
	padding: 0;
}
ul.psv > li:after
{
	float: right; /* #Fix: Should be float:left, but IE and Opera let float direction determine what side of the parent the content will appear on */
	content: '\00A0';
	margin: 0;
	padding: 0;
}
ul.csv > li:before
{
	float: left;
	content: ',\00A0';
	margin: 0;
	padding: 0;
}
ul.psv > li:before
{
	float: left;
	content: '|\00A0';
	margin: 0;
	padding: 0;
}
ul.csv > li:first-child:before,
ul.psv > li:first-child:before,
ul.csv > li.clr:before,
ul.psv > li.clr:before,
ul.psv > li.clr:after
{
	content: ''; /* #Fix: Forced to use blank content as webkit (on Safari and Chrome) does not support normal or none keywords. */
}
li > span.type
{
	float: right;
	font-size: 0.845em;
	font-weight: bold;
	color: #444;
}

/* Misc */
hr
{
	border: 0;
	height: 1px;
	width: 95%;
	margin: 0.46em auto; /* #Note: 13.05 * 0.46em = 6.003 */
	
	background-image: url(../images/zs_split.png);
	background-attachment: scroll;
	background-position: top left;
	background-repeat: repeat-x;
}