/* ******************************************************************
GLOBAL RESET - ALL MEDIA TYPES
Removes default styling on all elements in all browsers, thus making
initial layout and styling consistent across all browsers
****************************************************************** */
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; background: transparent; }
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; }
a { text-decoration: none; }



@media screen, projection, tv {
/* ******************************************************************
MAIN STRUCTURE & STYLING - screen, projection, tv
CSS below creates structure & styling of entire website  
****************************************************************** */

/* ~~~~~~~~~~~~ BODY ~~~~~~~~~~~~ */
body { margin: 0 auto; text-align: center; color: #000; background: #fff; font: 62.5%/1.6 Verdana, Arial, Helvetica, sans-serif; }

/* ~~~~~~~~~~~~ WRAPPER ~~~~~~~~~~~~ */
#wrapper { margin: 20px auto 0; padding: 20px; text-align: left; width: 900px; border: solid 10px #f9f9f9; border-bottom: none; 
position: relative; }

	/* ~~~~~~~~~~~~ SKIP LINKS & HIDDEN ELEMENTS ~~~~~~~~~~~~ */
	#skip-links { list-style-type: none; position: absolute; top: -9000px; }
	
	/* ~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~ */
	#header { margin: 0 0 50px; }
	#header h1 { font: 3em Georgia, "Times New Roman", Times, serif; }
	#header h1 a { color: #000; }
	#header p { font: 1.5em Georgia, "Times New Roman", Times, serif; margin: -0.4em 0 0; }
	#header p a { color: #bbb; }
	#header:hover p a { color: #7cc143; }
	
	/* ~~~~~~~~~~~~ CONTENT WRAPPER ~~~~~~~~~~~~ */
	#content-wrapper { margin: 0 20px; }
	
		/* ~~~~~~~~~~~~ CONTENT ~~~~~~~~~~~~ */
		#content { width: 540px; float: left; margin: 0 40px 0 0; }
		#content h2 { font: 2em Georgia, "Times New Roman", Times, serif; color: #888; margin: 0 0 0.2em; }
		#content h3 { font: 1.6em Georgia, "Times New Roman", Times, serif; color: #7cc143; margin: 2em 0 0.2em; }
		#content p { font-size: 1.1em; margin: 0 0 1.5em; }
		#content a { color: #7cc143; }
		#content a:hover { border-bottom: solid 1px #7cc143; }		
		.muted { font-weight: normal; }
		.uppercase { font-weight: normal; text-transform: uppercase; }
		
		/* ~~~~~~~~~~~~ SIDEBAR ~~~~~~~~~~~~ */
		#sidebar {  }
		
		/* ~~~~~~~~~~~~ BACK TO TOP LINK ~~~~~~~~~~~~ */
		#top { clear: left; visibility: hidden; }
	
	/* ~~~~~~~~~~~~ MAIN NAVIGATION ~~~~~~~~~~~~ */
	#nav-main { position: absolute; top: 45px; right: 30px; }
	#nav-main ol { overflow: auto; font: 1.5em Georgia, "Times New Roman", Times, serif; }
	#nav-main li { float: left; border-left: solid 3px #f9f9f9; }
	#nav-main li:first-child { border: none; }
	#nav-main a { color: #bbb; display: block; float: left; padding: 4px 11px; }
	#nav-main a:hover { color: #7cc143; }
	#nav-main li.selected a { color: #888; }
	
	/* ~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~ */
	#footer { margin: 0 auto 20px; padding: 20px 40px; text-align: left; width: 860px; border: solid 10px #f9f9f9; border-top: none; }
	#footer p { font-size: 1em; color: #bbb; }