body {background-image: url(images/bkd.jpg); }
a:link {font: 11px Arial, Helvetica, sans-serif; color: #677DB8; text-decoration: underline;}
a:visited { font: 11px Arial, Helvetica, sans-serif; color: #677DB8; text-decoration: underline;}
a:active { font: 11px Arial, Helvetica, sans-serif; color: #677DB8; text-decoration: underline;}
a:hover { font: 11px Arial, Helvetica, sans-serif; color: #333366; text-decoration: underline; }
a.nav2:link {font: 11px Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none;}
a.nav2:visited { font: 11px Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none;}
a.nav2:active { font: 11px Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none;}
a.nav2:hover { font: 11px Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline; }
a.foot:link {font: 10px Verdana, Arial, Helvetica, sans-serif; color: #cccccc; text-decoration: none;}
a.foot:visited { font: 10px Verdana, Arial, Helvetica, sans-serif; color: #cccccc; text-decoration: none;}
a.foot:active { font: 10px Verdana, Arial, Helvetica, sans-serif; color: #cccccc; text-decoration: none;}
a.foot:hover { font: 10px Verdana, Arial, Helvetica, sans-serif; color: #cccccc; text-decoration: underline; background-color: #666666;}
.breadcrumb {font: 10px Arial, Helvetica, sans-serif; color: #666666; text-decoration: none; padding-left: 25px; padding-top: 10px; padding-bottom: 5px; }
.subnav1 { font: 12px Arial, Helvetica, sans-serif; font-weight: bold; color: #ffffff; border-style: solid; border-color: black; border-bottom-width: 1; border-top-width: 0; border-left-width: 0; border-right-width: 0; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; padding-left: 10px; }
.subnav2 { height: 22px; border-style: solid; border-color: black; border-bottom-width: 1; border-top-width: 0; border-left-width: 0; border-right-width: 0; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; padding-left: 10px; }
.subnav3 { height: 22px; border-bottom: 1px solid black; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; padding-left: 10px; background-color: #949EB4; }
.subnav4 { border-bottom: 1px solid black; padding: 3px 0px 3px 35px; }
.subnav5 { border-style: solid; border-color: black; border-bottom-width: 1; border-top-width: 0; border-left-width: 0; border-right-width: 0; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; padding-left: 20px; background-color: #949EB4; }
.body { background-color: #FFFFFF;  }
.footer { font: 10px Verdana, Arial, Helvetica, sans-serif; color: #999999; padding-left: 25px; padding-right: 25px; padding-top: 15px; padding-bottom: 15px; line-height: 150%; }
li { list-style-image: url(images/arw1.gif); line-height: 100%; padding-left: -10px; padding-right: 15px; padding-top: 0px; padding-bottom: 0px; }
li.numbered { line-height: 150%; padding-left: -10px; padding-right: 15px; padding-top: 0px; padding-bottom: 0px; }
li.double { list-style-image: url(images/arw1.gif); line-height: 150%; padding-left: -10px; padding-right: 25px; padding-top: 0px; padding-bottom: 0px; }
li.plain { line-height: 150%; padding-left: -10px; padding-right: 25px; padding-top: 0px; padding-bottom: 0px; }
h1 { font: 20px Arial, Helvetica, sans-serif; color: #333366; font-weight: bold; padding-left: 25px; padding-right: 25px; padding-top: 0px; }
h2 { font: 14px Arial, Helvetica, sans-serif; color: #999999; font-weight: bold; padding-left: 25px; padding-right: 25px; padding-top: 10px; }
h3 { font: 14px Arial, Helvetica, sans-serif; color: #cc0000; font-weight: bold; padding-top: 10px; }
td { vertical-align: top; font: 11px Arial, Helvetica, sans-serif; color: #666666;}
td.middle { vertical-align: middle; font: 11px Arial, Helvetica, sans-serif; color: #666666;}
td.main { border-style: solid; border-color: #eeeeee; border-bottom-width: 0; border-top-width: 0; border-left-width: 1; border-right-width: 0; }
td.shade { vertical-align: top; font: 11px Arial, Helvetica, sans-serif; color: #ffffff; font-weight: bold; background-color: #999999; }
p { font: 11px Arial, Helvetica, sans-serif; color: #666666; padding-left: 25px; padding-right: 25px; }
.spot { font: 11px Arial, Helvetica, sans-serif; color: #ffffff; padding-left: 20px; padding-right: 20px; }
.casestudy { font: 14px Arial, Helvetica, sans-serif; color: #333366; font-weight: bold; text-transform: uppercase; padding-left: 15px; padding-right: 15px; padding-bottom: 10px; padding-top: 10px;}
.case { font: 11px Arial, Helvetica, sans-serif; color: #666666; padding-left: 15px; padding-right: 25px; padding-bottom: 15px; }
.input { font: 11px Arial, Helvetica, sans-serif; color: #666666; }
.home { font: 11px Arial, Helvetica, sans-serif; color: #999999; padding-left: 13px; padding-right: 10px; line-height: 150%;}
.home2 { font: 11px Arial, Helvetica, sans-serif; color: #999999; padding-left: 35px; padding-right: 10px; line-height: 150%;}
.padleft { padding-left: 25px; }
hr { margin-left: 25px; margin-right: 25px; }
.h2 { font: 11px Arial, Helvetica, sans-serif; color: #cc0000; font-weight: bold; }
.red { font: 11px Arial, Helvetica, sans-serif; color: #cc0000; font-weight: bold; }
img.middle { vertical-align: middle; }
a.bold:link {font: 11px Arial, Helvetica, sans-serif; color: #CC0000; text-decoration: none; font-weight: bold; }
a.bold:visited { font: 11px Arial, Helvetica, sans-serif; color: #CC0000; text-decoration: none; font-weight: bold; }
a.bold:active { font: 11px Arial, Helvetica, sans-serif; color: #CC0000; text-decoration: none; font-weight: bold; }
a.bold:hover { font: 11px Arial, Helvetica, sans-serif; color: #CC0000; text-decoration: underline; font-weight: bold; }
.hilite { font: 11px Arial, Helvetica, sans-serif; color: #666666; line-height: 150%; text-align: right; padding-right: 15px; padding-top: 20px; }


/* Class selectors */
.wrapper {
	text-align: left;
	width: 700px;
	margin: 30px auto;
}

.header, .toc, .main {
	border-bottom: 2px solid #da4f5a
}

.header h1 {
	margin-bottom: 2px;
}

.main h2 {
	padding: 2px 2px 2px 2px;
	text-align: center;
	margin-bottom: 6px;
	margin-top: 6px;
}

.main h2:hover {
	background-color: #f65077;
}

.xml, .javascript {
	margin: 5px 5px 5px 10px;
	padding-left: 15px;
	border-left: 1px dotted #da4f5a;
	font-family: "Courier New", Courier, monospace;
}

.author {
	font-size: 14px;
	margin-top: 0px;
	margin-bottom: 2px;
}

.update {
	font-size: 10px;
	font-style: italic;
	margin-top: 0px;
}

.challenge {
	font-size: 16px;
	font-weight: bold;
	color: #da4f5a;
}

.footer {
	font-size: 10px;
	font-style: italic;
	text-align: center;
}

/* ID Selectors */
#introduction, #bare, #smooth {
	/*border: 1px dashed #f65077;
	padding: 2px;
	margin: 2px auto;*/
}

#introduction, #bare, #smooth p {
	margin: 4px 8px 4px 8px;
}

/* Architechure Pages */

#sub1, #sub2 {
	position: relative;
	margin: 0px;
}

.selection { 
	position: absolute;
	cursor: hand;
	color: #ffffff;
	margin-right: 25px; 
	background-repeat: no-repeat;
}

.project_selection { 
	font-size: 12px;
	color: #cc0000;
	position: relative;
	clear: both;
	cursor: hand;
	margin: 5px 25px 3px 25px; 
	background-repeat: no-repeat;
	border-top: 1px solid #cccccc;
	padding: 5px 0px 3px 0px;
	height: 22px;
}

a.selection:link, a.selection:visited, a.selection:active {
	font: 11px Arial, Helvetica, sans-serif; 
	color: #ffffff; 
	text-decoration: none;
}

a.selection:hover {
	font: 11px Arial, Helvetica, sans-serif; 
	color: #ffffff; 
	text-decoration: underline; 
}				 

.photo {
	position: relative;
	float: left; 
	clear: both;
	width: 225px; 
	margin: 0px 0px 10px 25px;
	height: 150px;
}

.details {
	float: left; 
	width:220px; 
	margin-right: 25px; 
}

#banner_links {
width: 523px;
height: 60px;
text-align: right;
margin-top: 15px;
}

#banner_links ul, #banner_links a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #40405A;
text-decoration: none;
}

#banner_links a:hover {
text-decoration: underline;
}

#banner_links li {
padding-left: 10px;
background-image: url(images/arw1.gif);
background-position: center left;
background-repeat: no-repeat;
display: inline;
}