body {
	background: #fff url(../images/gradient.gif) top left repeat-x;
	font-family: Verdana, Helvetica, Arial, Sans-serif;
	font-size: 70%;
	margin: 0px 0 0 0; padding: 0; 
	width: 100%;
	color: #666;
	line-height: 1.5em;
	}
	
* {
	padding: 0;
	margin: 0;
}
img, fieldset, button {
	border: 0;
}

#wrapper {
	width: 700px;
	margin: auto;
	padding: 0px;
	}


#content {
	}
#header {
	padding: 0px 0 60px 0; border-bottom: solid 1px #000;}

#header .wordmark-big {
	padding: 31px 0px 51px 20px;
	}
	
#header-small {
	padding: 0px 0 20px 0; border-bottom: solid 1px #000;}

#header-small .wordmark-small {
	padding: 11px 0px 21px 10px;
	}
#footer {
	font-size: .9em;
	margin: 0;
	padding: 20px 0; clear: both; border-top: solid 1px #000; margin: 40px 0 0 0;}

.spacer {clear: both;}
	
/* ((((((((((((((((((( HOME CONTENT )))))))))))))))))))) */

#home #leftcol {width: 200px; padding: 0 50px 0  0; float: left;}
#home #midcol {width: 200px; padding: 0 50px 0 0; float: left; }
#home #rightcol {width: 200px; padding: 0 0 0px 0; float: left;}

#leftcol {width: 200px; padding: 0 50px 0  0; float: left;}
#widerightcol {width: 400px; padding: 0 50px 0 0; float: left; }


/* ((((((((((((((((((( LINKS )))))))))))))))))))) */
a:link {text-decoration: underline; color: #000;}
a:visited {text-decoration: underline; color: #000;}
a:hover {text-decoration: none; color: #000;}
a:active {text-decoration: underline; color: #666;}

#mainmenu a:link {text-decoration: none; color: #000;}
#mainmenu a:visited {text-decoration: none; color: #000;}
#mainmenu a:hover {text-decoration: underline; color: #000;}
#mainmenu a:active {text-decoration: none; color: #000;}

#mainmenu a.on:link {text-decoration: none; border-top: solid 5px #000; color: #000;}
#mainmenu a.on:visited {text-decoration: none; color: #000;}
#mainmenu a.on:hover {text-decoration: underline; color: #000;}
#mainmenu a.on:active {text-decoration: none; color: #000;}


/* ((((((((((((((((((( MENU )))))))))))))))))))) */

#menu {
	padding: 29px 10px; 
	margin: 0;
	text-align: right;	
	}
	
ul#mainmenu li {display: inline; padding: 0px 1em 0 1em;}
ul#mainmenu li.on {background: url(../images/gradient-on.gif) no-repeat center left;}

/* ((((((((((((((((((( TEXT STYLES )))))))))))))))))))) */


#content li {padding: .25em; margin: 0 1.5em;}
#content ul {padding: 1em 0;}
#content p {margin: 1em 0; max-width: 55em;}

ul.nostyle {list-style: none;}

.portfolio dt {margin: 1em 0 0 0; border-top: solid 1px #ddd; padding: 1em 0 0 0;}
.cv dt {margin: 1em 0 0 0; font-weight: bold; padding: 1em 0 0 0;}
.intro {font-size: 1.2em; color:#000; line-height: 1.8em; font-weight: normal; padding: 10px 0 0 0}

/* ((((( hcard )))))) */
.postal-code, .locality, .country, .region, .email, .url {display: block}
.tel, .fn {font-weight: bold; color: #000;}
.org {padding-bottom: 1em;}
.adr {padding: 1em 0;}
#contact {padding: 2em 2em 1em 2em; }
.credit {font-size:smaller; padding-top: 2em; color: #999;}

/* ((((( headings )))))) */

h1 {clear: both; font-size: 1.5em; margin: 2em 0 .5em 0; font-family: Georgia, Times, Serif; font-weight: bold; color: #333;}

h2 {clear: both; font-size: 1em; margin: 2em 0 .5em 0; text-transform: uppercase; font-family: Myriad Pro, Arial, Helvetica, Sans-serif; font-weight: bold; color: #333;}
h3 {clear: both; font-size: 1.2em; margin: 2em 0 .5em 0; font-family: Georgia, Times, Serif;  font-weight: regular; color: #000;}

.cv h2, .presentations h2, .writing h2  {clear: both; font-size: 1.2em; margin: 1em 0 .5em 0; text-transform: uppercase; font-family: Myriad Pro, Arial, Helvetica, Sans-serif; font-weight: bold; color: #333;}
.cv h3, .presentations h3, .writing h3 {clear: both; font-size: 1.2em; margin: 1em 0 .5em 0; font-family: Georgia, Times, Serif;  font-weight: regular; color: #333;}
.presentations h4, .writing h4 {clear: both; font-size: 1em; margin: 1em 0 .5em 0;  font-family: Myriad Pro, Arial, Helvetica, Sans-serif; font-weight: regular; color: #333;}

.subtitle {
	width: 100%;
	height: 15px;
	position: relative;
	}
.title {
	width: 100%;
	height: 40px;
	position: relative;
	}
.subtitle span, .title span {
	position: absolute;
	width: 100%;
	height: 100%;
	}
.subtitle span.examples {background: url(../images/subtitle-examples.gif) no-repeat;}
.subtitle span.clientlist{background: url(../images/subtitle-clientlist.gif) no-repeat;}

.subtitle span.professional {background: url(../images/subtitle-professional.gif) no-repeat;}
.subtitle span.employment {background: url(../images/subtitle-employment.gif) no-repeat;}
.subtitle span.skills {background: url(../images/subtitle-skills.gif) no-repeat;}
.subtitle span.volunteer {background: url(../images/subtitle-volunteer.gif) no-repeat;}
.subtitle span.urls {background: url(../images/subtitle-urls.gif) no-repeat;}
.subtitle span.references {background: url(../images/subtitle-references.gif) no-repeat;}
.subtitle span.education {background: url(../images/subtitle-education.gif) no-repeat;}
.subtitle span.writing {background: url(../images/subtitle-writing.gif) no-repeat;}
.subtitle span.presentations {background: url(../images/subtitle-presentations.gif) no-repeat;}

.subtitle span.wantwebdesigner {background: url(../images/subtitle-webdesigner.gif) no-repeat;}
.subtitle span.wantwebsite {background: url(../images/subtitle-website.gif) no-repeat;}
.subtitle span.wantwebdeveloper {background: url(../images/subtitle-webdeveloper.gif) no-repeat;}

.title span.privacy {background: url(../images/title-privacy.gif) no-repeat;}
.title span.oops {background: url(../images/title-oops.gif) no-repeat;}
.title span.contact {background: url(../images/title-contact.gif) no-repeat;}
.title span.cv {background: url(../images/title-cv.gif) no-repeat;}
.title span.presentations {background: url(../images/title-presentations.gif) no-repeat;}
.title span.writing {background: url(../images/title-writing.gif) no-repeat; }
.title span.portfolio {background: url(../images/title-portfolio.gif) no-repeat;}


.viewsite {float: right; padding: 0 0 20px 0;}


 /* ((((((((((((((((((( WRITING STYLES )))))))))))))))))))) */
#wayforward	#xmltech li { padding-bottom: 0.3em; }
#wayforward	.glossary {border-bottom: 1px dotted #666; cursor: help; text-decoration:none; }
#wayforward	.highlight { width: 200px; float: right; padding: 5px; border: 1px dotted #666; background: #eee; }
#wayforward	.note {color: #000; background-color: #333;}
#wayforward	.guidelines td, .guidelines th, .layouts td, .layouts th {border-right: solid 1px #ddd; border-bottom: solid 1px #ddd;}


#primer p { padding-left: 2em; padding-right: 2em; }
#primer dt { font-style: italic; }
#primer .glossary {border-bottom: 1px dotted #666; cursor: help; text-decoration:none; }
#primer .code {font-family: courier, sans-serif;}
#primer .example {font-family: Times, serif; padding: 1.5em; border: solid 1px #000;}
#primer p.example {font-family: Times; font-size: 1.2em; background-color: white; color: black; margin-left: 2em;} 
#primer p.example strong {color: blue;} 

#primer div.benefitcolumn {width: 30%; float: right; }
#primer div.benefit {clear: both; background-repeat: no-repeat; background-image: url(hand.gif); padding: 1em; padding: 1.5em; line-height: 1.5em; font-size: .9 em; background-color: white; color: black; border: solid 1px #ccc; margin: .5em;} 
#primer div#starterben.benefit {width: auto; margin: 0; float: none; clear: both;} 

#primer div.benefit h2 {font-weight: bold; font-size: 1em; background-color: white; color: #333; display: inline;} 

#primer div.definition {width: 30%; line-height: 1.2em; 
						float: left; font-size: .9 em; padding: 2em; background-color: #fff; 
						color: black; 
						border: dotted 1px #000; margin: 2em 2em 2em 0;
						} 
						
#primer div#starterdef {width: auto; float: none; clear: none; margin: 2em 0;} 
#primer div.definition h2 {font-weight: bold; font-size: 1em; background-color: white; color: #000; display: inline; padding:0; margin: 0;} 
#primer div p {display: inline; padding:0; margin: 0;} 


#primer .textcolumn {float: left; width: 65%;}