/* NOTE: This is a stripped down version of "quillStyleLite.css" */

/* @group Base Styles */

/* Format all links and their various states */

a {
	color: #2460d4;
}

a:hover {
	color: #4f7fd2;
}

a:active {
	color: #153da8;
}

/* Most of the lists that I currently use are in formatting, where I don't want bullets */
/* It is more efficient to override this rule when I need actual bulleted lists */

ul li {
	list-style-type: none;
}

/* @end Base Styles */

/* Format the entire page */

body {
	font: 12px "Lucida Grande", Lucida, Verdana, sans-serif;
	background-color: #fff;
	margin: 0;
}

#quillHeader, #content {
	width: 800px;	
	margin: auto;
}

#content {
	position: relative;
}

/* @group Header */

/* Formatting for the header */

#header {
	font-size: 11px;
	
	height: 106px;
	margin-bottom: 42px;

	color: #7f7f7f;
	border-bottom: 1px solid #bfbfbf;
}

#quillHeader {
	position: absolute;
	top: 24px;
	
	/* Make "margin: auto" take effect */
	left: 0;
	right: 0;
}

/* Formatting for links in the header */

#header a {
	color: #7f7f7f;
	text-decoration: none;	
}

#header a:hover {
	color: #206bfb;
}

#header a:active {
	color: #132a9d;
}	

/* Formatting for links in the header which are hovered */

/* @group Navigation Bar */

#header #navigationBar {
	position: absolute;
	right: 0;
	bottom: 0;
}

/* Formatting for the <ul> element of the navigation bar */

#header #navigationBar ul {
	padding-left: 0;
	padding-bottom: 5px;
	padding-top: 5px;
	margin: 0;
}

/* Formatting for each element in the navigation bar */

.nav
{
	/* We want all the <li> elements in a row */
	display: inline;
	
	/* This gives the appearence of a separator between elements without having to use the "|" character in the HTML */
	border-right: 1px solid #ddd;

	/* We want spacing between the separators and elements */
	padding-left: 6px;
	padding-right: 8px;
}

/* Formatting for the last element in the navigation bar */
/* This element is the last in the navigation bar, so it doesn't want a right border */

#header .lastElement {
	border-right-style: none;
}

/* FUTURE IMPLEMENTATION:
	This will be implemented when Safari supports the "last-child" pseudo class.
	This makes sure the last element in the navigation bar doesn't have a right border.

	#header #navigationBar li:last-child {
		border-right-style: none;
		color: #2063fc;
	}

*/


/* Format the link which corresponds to the current page */
/* This works because I assign a unique class (the page title in lowercase) to the body element in every page */

body.home		#header		#homeNav a,
body.about		#header		#aboutNav a,
body.console	#header		#consoleNav a,
body.articles	#header		#articlesNav a,
body.code		#header		#codeNav a,
body.software	#header		#softwareNav a,
body.extras		#header		#extrasNav a,
body.sitemap	#header		#sitemapNav a
{
	color: #000;
	font-weight: bold;
}

/* @end group Navigation Bar */

/* @end group Header */

/* @group Footer */

#footer {
	color: #888;
	font-size: 10px;
	line-height: 20px;
	
	width: 650px;
	
	/* Give some space between the footer and the bottom of the page */
	padding-bottom: 25px;
	margin-top: 30px;
	
	/* We don't want the footer to jump up if we haven't got much content on the page */
	clear: both;
}

#topFooter {
	border-bottom: 1px solid #bfbfbf;
	padding-bottom: 5px;
}

#bottomFooter {
	padding-top: 5px;
}

/* @end group Footer */