/*
	Using Eric Meyer's 'Reset' Styles found at:
		http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
		{
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		}

body		{line-height: 1; 
		}

ol, ul 		{
		list-style: none; 
		}

blockquote, q 	{quotes: none; 
		}

/* remember to define focus styles! */
:focus 		{outline: 0; 
		}

/* remember to highlight inserts somehow! */
ins		{text-decoration: none; 
		}

del		{text-decoration: line-through; 
		}

/* tables still need 'cellspacing="0"' in the markup */
table 		{border-collapse: collapse; 
		border-spacing: 0; 
		}

/*
	Defining own styles for elements
*/

body		{font-family: Calibri, Arial, Helvetica, sans-serif; 
		font-size: small; 
		color: #666; 
		background-image: url(../img/mortarboard.png); 
		background-position: -5% -5%; 
		background-repeat: no-repeat; 
		background-attachment: fixed; 
		}

h1		{font-size: 250%; 
		font-family: Calibri, Arial, Helvetica, sans-serif; 
		font-weight: bold; 
		color: #393; 
		}

h2		{font-size: 200%; 
		font-family: Calibri, Arial, Helvetica, sans-serif; 
		font-weight: bold; 
		text-indent: 0.5em; 
		margin: 0 0 0.2em 0; 
		padding: 0.2em 0 0 0; 
		border-bottom: 2px solid #999; 
		color: #363; 
		}

h3		{font-size: 150%; 
		font-family: Calibri, Arial, Helvetica, sans-serif; 
		font-weight: bold; 
		text-indent: 1em; 
		margin: 0.6em 0 0.2em 0; 
		border-bottom: 1px dotted #999; 
		}

p		{text-indent: 0.4em; 
		color: #666; 
		background-color: transparent; 
		margin: 0.2em 0; 
		padding: 0.1em 0.3em; 
		}

abbr, acronym	{border-bottom: 1px dotted #ccc; 
		}

a:link, a:visited
		{text-decoration: none; 
		color: #363; 
		}

a:hover, a:active, a:focus
		{text-decoration: underline; 
		color: #363; 
		}

#navigation-col * a[href^="http://"]:hover:after	/* Matches the 'http' at the beginning of a url and, on :hover, */
		{content: "\00A0\2197"; 	/* appends a non-breaking space and a north-east arrow to indicate off-site link */
		}			/* Only for use in navigation column; otherwise the content jiggles the layout */

#navigation a[href*="davidrhysthomas"]:hover:after	/* Matches the 'davidrhysthomas' string in a url and, on :hover, */
		{content: "\00A0\21AC"; 	/* appends a non-breaking space and a squiggly arrow to indicate in-site link */
		font-weight: normal; 
		}

#main-content dl a[href^="/"]:hover:after,		/* Matches the '/' string at the beginning of a url (indicating relative address) and, on :hover, */
#main-content * dl a[href^="/"]:hover:after		/* appends a non-breaking space and a squiggly arrow to indicate in-site link */
		{content: "\00A0\21AC"; 
		}

ul		{margin: 0.5em 0 0 10%; 
		}

ul li		{margin: 0.2em 0; 
		}

/*
	Defining div/layer styles
*/

/*
		accessibility-nav
	------------------------------------------------------------
*/

#accessibility-nav	{position: relative; 
		width: 100%; 
		margin-left: 0; 
		margin-right: 0; 
		padding: 0; 
		text-align: center; 
		}

#accessibility-nav:hover
		{background-image: url(../img/access-nav-bg.png); 
		background-position: 0 0; 
		background-repeat: repeat; 
		}

#accessibility-nav ul	{display: inline; 
		visibility: hidden; 
		margin: 0; 
		line-height: 3em; 
		}

#accessibility-nav:hover ul
		{visibility: visible; 
		}

#accessibility-nav ul li
		{display: inline; 
		}

#accessibility-nav ul li:before
		{content: "[ "; 
		color: #000; 
		}

#accessibility-nav ul li:hover:before
		{background-color: #ff0; 
		}

#accessibility-nav ul li:after
		{content: " ]"; 
		color: #000; 
		}

#accessibility-nav ul li:hover:after
		{background-color: #ff0; 
		}

#accessibility-nav a:link, 
#accessibility-nav a:visited
		{color: #000; 
		font-weight: bold; 
		letter-spacing: 0.2em; 
		font-variant: small-caps; 
		}

#accessibility-nav a:hover, 
#accessibility-nav a:active,
#accessibility-nav a:focus
		{background-color: #ff0; 
		}



/*
		header
	------------------------------------------------------------
*/

#header		{position: relative; 
		width: 90%; 
		margin-left: auto; 
		margin-right: auto; 
		}

#header h1	{text-align: center; 
		}

#header p		{text-align: center; 
		}

/*
		content
	------------------------------------------------------------
*/

#content		{position: relative; 
		width: 90%; 
		margin-left: auto; 
		margin-right: auto; 
		}

/*
		main-content
	------------------------------------------------------------
*/

#main-content	{width: 76%; 
		float: right; 
		border: 2px solid #ccc; 
		border-top: none; 
		}

#main-content p	{position: relative; 
		}

#main-content p span.date_duration
		{position: absolute; 
		top: 0; 
		right: 1em; 
		}


/*
			skills
		------------------------------------------------------------
*/

	.skills		{
			}

	.skills ul.skills	{
			}

	.skills ul.skills li strong
			{font-size: 110%; 
			font-weight: bold; 
			letter-spacing: 0.05em; 
			}

	.skills ul.skills li ul	{margin: 0 0 0.5em 2em; 
			}

	.skills ul.skills li ul li	{display: inline; 
			}

	.skills ul.skills li ul li:after
			{content: ", "; 
			}

/*
			vcalendar
		------------------------------------------------------------
*/

	.vcalendar		{padding-bottom: 1em; 
			border-bottom: 1px solid #999; 
			}

	.vcalendar ul	{width: 80%; 
			margin: 0 0 0 10%; 
			}

	.calendar ul li	{margin: 2em 0 0 0; 
			}

	.title		{font-weight: bold; 
			letter-spacing: 0.1em; 
			}

	.date_duration	{
			}

	.date_duration:before	{content: " ( "; 
			}

	.date_duration:after	{content: " ) "; 
			}

/*
			Contact
		------------------------------------------------------------
*/

	#contact		{min-height: 80px; 
			}

	#contact .vcard	{position: relative; 
			}

	.vcard a		{margin-left: 5em; 
			}

	.vcard a:after	{content: ", \A"; 
			white-space: pre; 
			}

	.vcard a img	{position: absolute; 
			top: 0; 
			left: 0; 
			display: block; 
			margin: 0 1em; 
			border: 0; 
			}

	.vcard a.icon:after	{content: ""; 
			}

/*
		navigation-col
	------------------------------------------------------------
*/

#navigation-col	{width: 20%; 
		min-width: 11em; 
		float: left; 
		background-image: url(../img/access-nav-bg.png); 
		background-position: 0 0; 
		background-repeat: repeat; 
		overflow: hidden; 
		}

#navigation-col * ul	{margin: 0; 
		}

#navigation-col * ul li	{padding: 0; 
		margin: 0; 
		}

#navigation-col * a:link,
#navigation-col * a:visited
		{display: block; 
		font-size: 120%; 
		font-weight: bold; 
		text-indent: 1em; 
		line-height: 2em; 
		background-image: url(../img/access-nav-bg.png); 
		background-position: 0 0; 
		background-repeat: repeat; 
		border-right: 4px solid #696; 
		}

#navigation-col * a:hover,
#navigation-col * a:active,
#navigation-col * a:focus
		{color: #090; 
		background-color: #dfd; 
		border-right: 4px solid #6f6; 
		}

#navigation-col * img
		{margin: 0.5em 0; 
		}

/*
		footer
	------------------------------------------------------------
*/

#footer		{position: relative; 
		clear: both; 
		width: 80%; 
		padding: 2em 0 2em 0; 
		margin-left: auto; 
		margin-right: auto; 
		}

#footer p		{text-align: center; 
		}

.valid-css		{float: left; 
		}

.valid-xhtml	{float: right; 
		}