body {
	font:62.5% "trebuchet MS";
	margin:0; padding:0;
	background: #555;
}

#DIV-wrapper { 
	position: relative; 
	border: 16px solid #555;
	background:#fff url(../_img/background.gif) repeat-x; 
}

a { outline:none; }

body.page1 a { color: #f00; }
body.page2 a { color: #ff0; }
body.page3 a { color: #0f0; }
body.page4 a { color: #00f; }


/* --------------------- MAIN NAV -------------------------- */

#UL-mainLinks li#link1,#UL-pageNav li#link1 { background:#f00; }
#UL-mainLinks li#link2,#UL-pageNav li#link2 { background:#ff0; }
#UL-mainLinks li#link3,#UL-pageNav li#link3 { background:#0f0; }
#UL-mainLinks li#link4,#UL-pageNav li#link4 {	background:#00f; }

h1#H1-mainHeading {
	font:8em "Georgia";
	text-align:center;
	height:100px;
	overflow:hidden;
	color:#333;
	margin:0p 0 80px; padding:100px 0 0 0;
}

h1#H1-pageHeading {
	position: absolute; z-index: 100;
	top: 90px; right: 5px;
	font:2em "Georgia";
	text-align:right;
	height:30px;
	overflow:hidden;
	color:#ccc;
	padding: 0; margin:0;
}

* html h1#H1-pageHeading { top: 105px; right: 15px; }  /* stupid IE 6 */

h1#H1-pageHeading a {
	text-decoration:none;
	color:#999;
	background:transparent url(../_img/home.gif) top left no-repeat;
	padding:0 6px 0 30px;
}

h1#H1-pageHeading a:hover { color:#666; background-position:0 -29px; }

#DIV-mainLinkWrapper {
	background:url(../_img/gradient.gif) 0 0 repeat-x;
	margin:0; padding:42px 0 0;
}

#UL-mainLinks {
	list-style:none;
	background:url(../_img/gradient.gif) bottom repeat-x;
	margin:0; padding:0 0 42px;
}

#UL-mainLinks li h3 {
	font-size:5em;
	line-height:0.73em;
	height:46px; 
	position: relative; /* fix iE 6 */
	margin:0; padding:0 0 0 1em;
}

#UL-mainLinks li h3 a {
	display:block;
	position:relative;
	color:#fff;
	text-decoration:none;
	text-transform:uppercase;
	padding:0.1em 0.2em 0.1em 0;
}

#UL-mainLinks li h3 a:hover { padding:0.1em 0 0.1em 0.2em; }

#UL-pageNav {
	list-style:none;
	border-bottom:1px solid #888;
	margin:0; padding:0;
	height: 80px;
}

#UL-pageNav li {
	margin: 0; padding: 0;
	height: 20px;
	overflow: hidden;
	float: left; width: 100%;	
}

#UL-pageNav li h3 {
	display: block;
	font-size:2em;
	line-height:0.73em;
	height:20px;
	margin:0; padding:0 8px 0;
	overflow: hidden;
}

#UL-pageNav li h3 a {
	display: block;
	height: 20px;
	margin: 0; padding: 0;
	overflow: hidden;
	color:#fff;
	text-decoration:none;
	text-transform:uppercase;
	line-height: 16px;
	padding:2px 8px 0 18px;
}

#UL-pageNav li h3 a:hover { padding:2px 0 0 26px; }

#UL-pageNav li.thisPage a {
	background:url(../_img/small-square.gif) right 4px no-repeat;
}





/* --------------------- CONTENT -------------------------- */

#DIV-content {
	background:#fff url(../_img/gradient.gif) 0 -43px repeat-x;
	padding:40px 0 0;
}

#DIV-content .page1Color { color: #f00; }
#DIV-content .page2Color { color: #ff0; }
#DIV-content .page3Color { color: #0f0; }
#DIV-content .page4Color { color: #00f; }
#DIV-content h2#page1 a { color:#f00; }
#DIV-content h2#page2 a { color:#ff0; }
#DIV-content h2#page3 a { color:#0f0; }
#DIV-content h2#page4 a { color:#00f; }

#DIV-content p {
	width:700px;
	font:1.5em "Georgia";
	color:#444;
	line-height:1.2em;
	margin:0 auto 20px;
}

#DIV-content p.br { margin-bottom:0; }
#DIV-content p.halfWidth { width: 500px; padding-right: 200px; }


#DIV-content h2 {
	font:10em "Georgia";
	text-align:center;
	margin:0 0 40px;
}

#DIV-content h2 a {
	text-decoration:none;
}


#DIV-content h4 { 
	width:700px;
	font:2.8em "Georgia";
	margin:0 auto 20px;
}

#DIV-content h5 { 
	width:700px;
	font:2em "Georgia";
	margin:0 auto 20px;
}

#DIV-content hr.HR-spacer {
	color: #fff;
	height: 1px;
	margin: 20px 0 0 0;
	border: none;
}

#DIV-content ul {
	width:700px;
	font:1.4em "Georgia";
	margin:0 auto 20px;
	color: #888;
	padding-top: 5px;
}

#DIV-content .hidden { display: none; }
#DIV-content .clear { display: block; height: 1px; clear: both; }
#DIV-content .light { color: #999; }
#DIV-content .condition { vertical-align:top; color: #999;}
#DIV-content .fineprint { color: #ccc; font-size: 0.7em; line-height: 1.2em; padding: 0 0 0 18px; }
#DIV-content .fineprint a { color: #aaa; text-decoration: none; }
#DIV-content .SPAN-zoom { font-size: 0.8em; padding: 5px 0; }
#DIV-content .SPAN-zoom:hover { font-weight: bold; color: #666; cursor: default; }

#IMG-myPhoto {
	display: block; position: relative;
	float:right;
	border:8px solid #eee;
	margin:4px;
	padding:10px;
}


#DIV-content .DL-horizList {
	width: 650px;
	margin: 0 auto;
	padding: 10px 0;
}

#DIV-content .DL-horizList dt {
	width: 100px; height: 95px;
	padding: 0 0 0 20px; margin: 0;
	float: left;	
}
#DIV-content .DL-horizList dd {
	font:1.5em "Georgia";
	padding: 0 20px 0 120px; margin: 0;
	color:#444;
	line-height:1.2em;

}
#DIV-content .DL-horizList dd p {
	font-size: 0.9em;
	width: 400px;
	padding: 0 0 0 80px;
}

#DIV-content .UL-thumbnails {
	position: relative;
	list-style: none;
	width: 650px;
	height: 140px;
	padding: 0;
}

#DIV-content .UL-thumbnailsFloatRight {
	list-style: none;
	width:650px;
	height: 1px;
	padding: 0;
	margin: 0 auto;
}

#DIV-content .UL-thumbnails li {
	float: left;
	padding: 0 0 0 20px;
}

#DIV-content li.LI-rightFloat {
	float: right;
	padding: 0 20px 0 0;
}

#DIV-content li.clearLi { clear: both; padding-top: 30px; }

#DIV-content .LI-thumbTitle-L {
	position: absolute;
	top: 122px;
	left: 64px;
	color: #333;
}

#DIV-content .LI-thumbTitle-R {
	position: absolute;
	top: 122px;
	right: 100px;
	color: #333;
}


#DIV-content a.portfolioButton {
	display: block;
	position: relative;
	width: 60px; height: 60px;
	padding: 8px;
	border: 8px solid #ddd;
	text-decoration: none;
}

#DIV-content a.portfolioButton:hover { border-color: #555; }

#DIV-content a.portfolioButton span.SPAN-viewThumb {
	display: block;
	position: absolute;
	width: 72px;
	padding: 0 16px 1px 0;
	left: 0px; top: 84px;
	text-align: right;
	background: url(../_img/magnify.gif) bottom right no-repeat;
	color: #0f0;
	font: 12px "Georgia"; line-height: 14px;
}
#DIV-content a.portfolioButton:hover span.SPAN-viewThumb {  }

#DIV-content a.portfolioButton img {
	display: block;
	position: absolute;
	left: 0px; top: 0px;
	width: 0px; height: 0px;
	padding: 72px 0 0 72px;
	overflow: hidden;
	border: 2px solid #ccc;
}

#DIV-content a.portfolioButton:hover img { border-color: #555; }


#DIV-content a#A-thumb-AMO1 { background: url(../_img/portfolio/usability-thumb1-BW.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-AMO1:hover { background: url(../_img/portfolio/usability-thumb1.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-COL1 { background: url(../_img/portfolio/web-thumb1-BW.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-COL1:hover { background: url(../_img/portfolio/web-thumb1.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-WLP1 { background: url(../_img/portfolio/web-thumb2-BW.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-WLP1:hover { background: url(../_img/portfolio/web-thumb2.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-CAT1 { background: url(../_img/portfolio/interaction-thumb1-BW.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-CAT1:hover { background: url(../_img/portfolio/interaction-thumb1.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-TWT1 { background: url(../_img/portfolio/interaction-thumb2-BW.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-TWT1:hover { background: url(../_img/portfolio/interaction-thumb2.gif) 8px 8px no-repeat; }

#DIV-content a#A-thumb-HSP1 { background: url(../_img/portfolio/branding-thumb1-BW.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-HSP1:hover { background: url(../_img/portfolio/branding-thumb1.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-HSP2 { background: url(../_img/portfolio/branding-thumb2-BW.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-HSP2:hover { background: url(../_img/portfolio/branding-thumb2.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-REZ1 { background: url(../_img/portfolio/branding-thumb3-BW.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-REZ1:hover { background: url(../_img/portfolio/branding-thumb3.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-REZ2 { background: url(../_img/portfolio/branding-thumb4-BW.gif) 8px 8px no-repeat; }
#DIV-content a#A-thumb-REZ2:hover { background: url(../_img/portfolio/branding-thumb4.gif) 8px 8px no-repeat; }

/* --------------------- FOOTER -------------------------- */

#DIV-footer {
	position: relative;
	color:#bbb;
	padding:15px 0 0;
}

#DIV-footer p:hover { color:#666; }

#DIV-footer p {
	width:190px;
	position: relative;
	clear:left;
	text-align:center;
	line-height: 20px;
	margin:0 auto; padding:0px;
}

#validHTML {
	display:block; position:relative;
	float:left;
	width:90px;
	height:0;
	padding-top:25px;
	background:url(../_img/valid-buttons.gif) -90px 0;
}

#validCSS {
	display:block; position:relative;
	float:right;
	width:90px;
	height:0;
	padding-top:25px;
	background:url(../_img/valid-buttons.gif) -180px 0;
}

#validHTML:hover { background-position:-90px -25px; }
#validCSS:hover { background-position:-180px -25px; }
#validHTML img,#validCSS img { display:none; }

#DIV-footerNav {
	position: relative;
	margin: 0; padding: 0 0 33px 0;
	background: url(../_img/gradient.gif) 0 20px repeat-x;
}

#UL-footerNav {
	position: relative;
	width:120px;
	height:22px;
	list-style:none;
	border-top:1px solid #ddd;
	margin:0 auto; padding:6px 0 0 20px;
}

* html #UL-footerNav { display: none; } /* don't use footerNav in IE6 */

#UL-footerNav li {
	float:left;
	width:20px;
	margin:0; padding:0;
}

#UL-footerNav li a {
	display:block;
	position:relative;
	width:19px;
	height:0;
	overflow:hidden;
	background:#f6f6f6 url(../_img/footer-links.gif) 0 0 no-repeat;
	padding:19px 0 0;
	text-decoration: none;	
}

#UL-footerNav li a small { 
	display: block; position: relative;
	width: 100px;
	color: #aaa;
	margin: 6px 0 0 -4px;
}
#UL-footerNav li a:hover { background-position:0 -19px; overflow: visible; }

#UL-footerNav li#footerLinkHome a { background-position:0 -38px; }
#UL-footerNav li#footerLinkHome a:hover {	background-position:0 -57px; }
#UL-footerNav li#footerLink1 a:hover { background-color:#f00; }
#UL-footerNav li#footerLink2 a:hover { background-color:#ff0; }
#UL-footerNav li#footerLink3 a:hover { background-color:#0f0; }
#UL-footerNav li#footerLink4 a:hover { background-color:#00f; }