/************************************************************************************************************
 * G E N E R A L   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

* {	margin: 0px; padding: 0px;}

/* the text-align rule is for browsers that do not understand the margin-left/right: auto */
body { background: #F2F2F2 url(../images/background/body.gif) repeat-x; text-align: center;}	
body.simple { background-color: #FFFFFF; background-image: none; text-align: left;}	


/************************************************************************************************************
 * F O N T   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

html { font-size: 125%;}
body { font-family: Verdana, Arial, Sans-Serif; font-size: 50%;} 

p, ul, ol, a { font-size: 1.2em; color: #575757;}
h1 { font-family: Arial, Sans-Serif; font-size: 1.6em;}
h2, h3 { font-size: 1.2em;}

input[type='text'] { padding-left: 3px;}
* input.textbox { padding-left: 3px;}

textarea, select { font-family: Arial, Sans-Serif; font-size: 1.3em;}
textarea {padding-left: 2px;}
table { font-size: 100%;}


/* make sure the sized controls inside other sized controls are of size 1.2em and do */
/* not end up as 1.2em * 1.2em - also note that IE does not understand inherit       */
ul a, ul ul, ul p, p a { font-size: inherit;}
ol ul, ol p, ol a, ol ol { font-size: inherit;}
	
* html ul a, * html ul ul, * html ul p, * html p a { font-size: 100%;}
* html ol a, * html ol ul, * html ol p, * html ol ol { font-size: 100%;}
	

/************************************************************************************************************
 * L A Y O U T   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

h1 { margin-bottom: 10px; padding: 2px 0 3px 1px; border-bottom: solid 1px #2C79B4; color: #2C79B4;}
h2 { margin-bottom: 5px; padding-bottom: 5px;}
p { margin: 0 5px 15px 5px; line-height: 1.6em;}
li { margin-bottom: 5px; line-height: 1.5em;}
	

/************************************************************************************************************
 * A N C H O R   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

a { text-decoration: none; color: #990000;}
a:hover { text-decoration: underline; color: #990000;}
a img { border: none;}
img.link { margin-left: 5px;}	

	
/************************************************************************************************************
 * B U T T O N   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

input[type="submit"] { background:  #F3F8FC url(../images/background/button.gif) repeat-x left top; }
input[type="submit"] { color: #575757; font-family: Arial, Sans-Serif; padding: 1px 0 1px 0; cursor: pointer;}

* html input.button { background: #F3F8FC url(../images/background/button.gif) repeat-x left top;}	
* html input.button { color: #575757; font-family: Arial, Sans-Serif; padding: 1px 0 0 0; cursor: pointer;}	


/************************************************************************************************************
 * L I S T   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

ul { list-style-image: url(../images/bullet.gif); list-style-type: square; margin-left: 15px;}
ol { list-style-type: decimal; margin-left: 15px;}


/************************************************************************************************************
 * G E N E R A L   P A G E   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

div#outer { margin: 10px auto 5px auto; border: solid 1px #E2E1E1; background-color: #FFFFFF; text-align: left; width: 902px;}
div#content { padding: 10px 5px 10px 10px;}

/* the .content_large and .content_small classes are used to set the default two */
/* column layout containing one large and one small section - the <div> tags can */
/* be switched to move the large section to the left or right                    */	
div.content_large {	float: left; width: 575px;}	
div.content_small {	float: left; width: 285px;}



/************************************************************************************************************
 * S P O T L I G H T   P A G E   S T Y L E S H E E T   R U L E S
 *
 * The rules to format the tech spotlight page with contains the full article that is displayed on the
 * home page in summarized form. Note that some of the rules are actually defined as part of the rules
 * under the home page section
 ************************************************************************************************************/

/* the headers for the page title and the sections within a page */
div#techArticle h1 {
	border-bottom: solid 1px #006666; 
	margin-top: 15px; color: #006666;}
div#techArticle h2 {
	margin-top: 20px; color: #066;
	font-size: 1.4em;}
div#techArticle h3 {
	font-style: italic;	font-size: 1.3em; 
	margin: 15px 0 7px 0; color: #066;}
div#techArticle h4 {
	font-size: 1.3em; font-weight: normal;
	margin: 15px 0 5px 0; color: #066;}
div#techArticle h5 {
	font-size: 1.3em; font-weight: normal;
	margin: 10px 0 5px 0; color: #000;}

/* the following is needed to format the titles that serve as named */
/* anchors to set the font-size and font color information          */
div#techArticle h2 a, div#techArticle h3 a, div#techArticle h4 a {
	color: #006666; font-size: 100%;}

/* the small subtitle above the tech spotlight main title */
div#techArticle span {
	font-size: 1.1em; color: #666633;}

/* format the first letter of the spotlight summary */
div#techArticle span.first {
	font-size: 150%; margin-left: 0px;
	font-weight: bold; color: #006666;}

/* the article <div> is a wrapper for all sections of the spotlight article */
div#techArticle div#article { float: left; width: 670px;}
	

div#techArticle div.download {	border: solid 1px #EAEAEA; background-color: #FFF6CC; padding: 5px; text-align: center; margin-bottom: 10px;}
div#techArticle div.download a { font-size: 95%;}


	
/* ------------------ unordered list items ---------------------*/

div#techArticle ul {
	list-style-image: url(../images/greydisc.gif);
	list-style-type: square;
	margin: 0 0 0 25px;}
div#techArticle ul ul {
	list-style-image: url(../images/greybox.gif);
	list-style-type: circle;}

div#techArticle ul span.title {
	font-family: "Courier New", Courier, mono; 
	color: #000;}
div#techArticle ul p, div#techArticle ol p {
	margin-top: 5px; margin-bottom: 10px;}


/* ------------------ unordered list items ---------------------*/

div#techArticle ol {
	margin: 0 0 0 25px;}
* html div#techArticle ol {
	margin: 0 0 0 35px;}

div#techArticle ol li {
	margin-bottom: 15px;}
div#techArticle ol ul li {
	margin-bottom: 10px;}

div#techArticle ol ul {
	list-style-image: none;
	list-style-type: square;
	margin: 10px 0 10px 20px;}	

	
/* -------------------- print output -----------------------*/

div#techArticle div#print {
	margin: 0 0 -10px 0; padding-right: 5px;
	text-align: right; }

div#techArticle div#print a {
	background-image: url(../images/printer.gif);
	background-repeat: no-repeat; background-position: left top;
	padding: 2px 0 7px 20px;}


/* -------------------- code listing -----------------------*/

/* the rules to format the code listing display */
div#techArticle div.code  {
	border: solid 1px #EFEFEF; 
	padding: 5px 5px 5px 5px;
	margin: -5px 0 10px 0;}
	
/* move each nested div progressively to the right */
div#techArticle div.code div  {
	margin: 0 0 0 15px;}

div#techArticle div.code p {
	font-family: "Courier New", Courier, mono; 
	line-height: 1.1em; text-indent: -1.5em;
	margin: 0 0 0 1.5em; color: #000; }

/* display ellipses to indicate code was omitted */
div#techArticle div.code p.ellipses  {
	margin-top: 3px; margin-bottom: 7px;}

/* add an "empty row" after the paragraph */
div#techArticle div.code p.break  {
	margin-bottom: 9px;}
	
/* -------------------- special keyword rules -----------------------*/

/* rules to change the color of the text according to the type of text */
div#techArticle span.keyword { color: #0000FF;}
div#techArticle span.code { font-family: Courier Courier New; font-weight: bold; }
div#techArticle span.reserved { color: #FF3399;}
div#techArticle span.comment { color: #008000;}
div#techArticle span.caption { color: #000; font-style: italic;}
div#techArticle span.author { color: #000; font-style: italic;}
div#techArticle span.spotlight { color: #666633;}
	
/* -------------------- image table -----------------------*/

/* we wrap the images to be displayed inside a table so that we can */
/* associate a caption underneath or above the image                */
div#techArticle table {
	border: none; text-align: center;
	margin-bottom: 20px; }
div#techArticle table.left {
	margin: 0 15px 5px 0; float: left;}
div#techArticle table.right {
	margin: 0 2px 5px 15px; float: right;}


/* -------------------- table of content -----------------------*/

/* the rules to format the table of content displayed on the right */
div#techArticle div#toc {
	border-bottom: solid 1px #6B6B6B; 
	border-top: solid 1px #6B6B6B; 
	background-color: #F9F9F9;
	margin: 45px 0 10px 10px;
	padding: 0 0 0 2px;
	font-size: 0.8em;
	float: right; width: 180px;}	

/* rules to format the ordered list and the nested ordered list */	
div#techArticle div#toc ol {
	list-style-type: upper-roman;
	list-style-image: none;
	margin: 10px 0 10px 30px;}
	
div#techArticle div#toc ol ol {
	list-style-type: upper-alpha;
	margin: 0 0 10px 20px;}


/* rules to format the content of the ordered lists */	
div#techArticle div#toc ol li {
	margin-top: 5px; margin-bottom: 5px;}
div#techArticle div#toc ol li a  {
	margin-left: -5px; color: #575757;}	
div#techArticle div#toc ol li a.active  {
	font-weight: bold; color: #CC0000;}	
	
	
/* -------------------- bottom navigation -----------------------*/

div#techArticle div#navigationLinks {
	font-size: 90%; margin-top: 15px;}
* html div#techArticle div#navigationLinks {
	margin-top: 15px;}
	
/* rules to place the forward and backward links correctly */
div#techArticle div.backwardLink {
	float: left;}
div#techArticle div.forwardLink {
	text-align: right;}

/* -------------------- print navigation -----------------------*/

div#techArticle div#print {
	font-size: 90%;}



/************************************************************************************************************
 * H O M E   P A G E   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

/* the motto <div> contains the large motto image - the <div> displays the */
/* gradient background and holds another <div> to display the acutal motto */
div#motto {
	background-image: url(../images/background/motto.gif);
	background-repeat: repeat-x; background-position: left top;
	height: 200px; margin-top: 2px; clear: both;}

/* the <div> inside the motto <div> is used to display the actual motto */
/* image via the background image settings                              */  
div#motto div {
	background-image: url(../images/motto.gif);
	background-repeat: no-repeat; background-position: left top;
	height: 200px; width: 800px; }

div#shadow {
	background-image: url(../images/lines.gif);
	background-repeat: repeat-x; background-position: top left;
	height: 1px; margin-bottom: -10px;}


/* ---------------------- the tech spotlight section ---------------------*/

div#spotlight {
	margin-right: 20px; 
	padding-bottom: 10px;}

div#spotlight h1 {
	border-bottom: solid 1px #006666; 
	margin-top: 15px;
	color: #006666;}

/* the small subtitle above the tech spotlight main title */
div#spotlight span {
	font-size: 1.1em; 
	color: #666633;}
	
/* format the first letter of the spotlight summary */
div#spotlight span.first {
	font-size: 150%; margin-left: 0px;
	font-weight: bold; 
	color: #006666;}

/* the link at the bottom of the article. All other links that are part */
/* the tech article are not affected because they have either no class  */
/* attribute of "learn" or they have more specific rules (i.e. p > a)   */
div#spotlight a {
	font-size: 1.1em;}
div#spotlight a.learn {
	padding-left: 5px;}	

/* The top part of the paper image that is displayed as the background */
/* of the monthly tech spotlight article                               */	
div#spotlight div.top {
	background-image: url(../images/paper/top.gif);
	background-repeat: no-repeat; 
	background-position: top right; 
	height: 65px;}
	
/* The main part of the paper image that is displayed as the background of */
/* the monthly tech spotlight article. This image is repeated horizontally */	
div#spotlight div.outer {
	background-image: url(../images/paper/middle.gif);
	background-repeat: repeat-y; 
	background-position: top right;}

/* The bottom part of the paper image that is displayed as the background of */
/* of the monthly tech spotlight article                               */	
div#spotlight div.bottom {
	background-image: url(../images/paper/bottom.gif);
	background-repeat: no-repeat; 
	background-position: top right; 
	height: 15px;}	
	
/* Move the tech spotlight content away from the left and right side */
div#spotlight div.middle {
	padding: 0 20px;}


/* Images displayed as part of the tech article summary */
div#spotlight table {
	margin-left: auto; margin-right: auto;
	border: none; text-align: center;
	margin-bottom: 20px;}
	

/* --------------------------- the about section ------------------------*/
div#about {
	margin-top: 55px;}
	
div#about h1 {
	border-bottom: solid 1px #CC0000; 
	color: #CC0000;}

div#about ul {
	margin-left: 18px;}


/************************************************************************************************************
 * A B O U T   U S   P A G E   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

/* -------------------- the about section -----------------------*/
div#aboutUs {
	margin: 0 20px 10px 0;}


/* -------------------- the history inset -----------------------*/

/* the history <div> is an 'insert' into the main paragraph of the "About Us" */
/* section - the item is floated so that all text flows around it             */
div#history {
	background-image: url(../images/history/right.gif);
	background-repeat: no-repeat; 
	background-position: right top; 
	width: 300px; float: left; 
	margin: 0 5px 0 0;}

div#history div.inner {
	background-image: url(../images/history/top.gif);
	background-repeat: no-repeat; 
	background-position: left top; 
	background-color: #E5E5E5;
	border-right: solid 1px #DDDDDD; 
	border-bottom: solid 1px #DDDDDD; 
	padding: 10px 5px 0 15px; 
	margin-right: 10px;
	font-size: 95%;}

div#history div.bottom {
	background-image: url(../images/history/bottom.gif);
	background-repeat:  no-repeat; 
	background-position: left top;
	height: 10px;}

/* we need to set the font-size of the <div> that holds the bottom drop-shadow */
/* image for IE because in Explorer an empty <div> has a certain height        */
* div#history div.bottom {
	font-size: 0pt;}

div#history h2 {
	color: #666666; padding-bottom: 0px;}
div#history p {
	color: #666666; margin-left: 0;}


/* -------------------- the team section -----------------------*/

/* any images displayed as part of the team <div> are floated on the left side */
div#team img {
	float: left; margin: 0 5px 0 5px;}



/************************************************************************************************************
 * S K I L L S   P A G E   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

/* the 'Skills & Experience' section follows a float element and we need to make */
/* sure the section starts underneath the largest of the floated <div> controls  */
div#skills {
	clear: both; padding-right: 5px;}

/* this rule only applies to the wrapper <div> that wraps the three floated */
/* controls that are used to displayed the technologies in use (see below)  */
div#skills div {
	background-color: #EAEAEA;}
	

/* the "skill-class" <div> controls are used to display the list of technologies */
/* in use - we display all <div> controls side-by-side so we need to float them  */
div.skills {
	background-color: Transparent;
	float: left; width: 31%; 
	padding-left: 10px;
	margin-top: 5px; }

div.skills h2 {
	color: #CC0000;}
div.skills ul {
	margin-left: 20px;}



/************************************************************************************************************
 * C L I E N T S   P A G E   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

div#clients {
	padding-right: 5px;}

/* this rule only applies to the wrapper <div> that wraps the three floated */
/* controls that are used to displayed the technologies in use (see below)  */
div#clients div {
	background-color: #EAEAEA;}

/* the "skill-class" <div> controls are used to display the list of technologies */
/* in use - we display all <div> controls side-by-side so we need to float them  */
div.clients {
	background-color: Transparent;
	float: left; width: 32%; 
	padding-left: 10px;
	margin-top: 5px; }

div.clients h2 {
	color: #CC0000;}
div.clients ul {
	margin-left: 20px;}



/************************************************************************************************************
 * P R O J E C T   L I S T / D E T A I L   P A G E   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

/* -------------------- project list page -----------------------*/

/* The <div> controls that hold the repeater controls that are used to display */
/* the project summary user controls                                           */
div.projects {
	float: left; width: 31%; 
	margin: 0 10px 0 2px;}


/* ------------------- project detail page ----------------------*/

div#projectDetail div.background {
	background-image: url(../images/background/paper.gif);
	background-position: bottom left; background-repeat: repeat-y;
	margin: 0 25px 0 10px; padding: 5px 0 15px 0; }
	
div#projectDetail {
	margin-bottom: 10px;}
	
div#projectDetail div.alsett {
	margin: 0 0 0 65px;}

div#projectDetail fieldset {
	float: left; border: none;
	margin-right: 30px;}
* html div#projectDetail fieldset {
	margin-right: 15px;}
	
div#projectDetail p {
	font-family: Verdana, Sans-Serif; 
	font-weight: bold;
	margin: 10px 0 3px 0;}

div#projectDetail h2 {
	margin: 10px 0 0 60px;
	color: #CC0000; }

div#projectDetail div.alsett div {
	float: left; width: 240px; 
	margin: 5px 10px 0 0;}

div#projectDetail div.alsett div h3 {
	color: #555555; border-bottom: solid 1px #555555;
	font-family: Verdana, Sans-Serif; 
	padding: 0 0 3px 1px;
	margin: 5px 0 5px 0; }


/************************************************************************************************************
 * S P O T L I G H T   A R T I C L E S   P A G E   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

/* ------------------- blackboard section ----------------------*/

/* all DIV controls inside the blackboard div are centered with a width of 800px */
div#articles div#blackboard div {
	margin-right: auto;
	margin-left: auto; 
	width: 800px;}

/* center the DIV controls for IE because IE does not understand margin: auto */
* html div#articles div#blackboard {
	text-align: center;}

/* The following three rules display the black board image */
div#articles div#blackboard div#board_top {
	background-image: url(../images/board/board_top.gif);
	background-repeat: no-repeat; 
	height: 21px;} 
div#articles div#blackboard div#board_bottom {
	background-image: url(../images/board/board_bottom.gif);
	background-repeat: no-repeat; 
	height: 25px;} 
div#articles div#blackboard div#board_main {
	background-image: url(../images/board/board_main.gif);
	background-repeat: repeat-y; 
	padding: 20px 0 15px 0; 
	text-align: left;} 

/* The current title inside the blackboard */
div#board_main h1 {
	font-family: Gill Sans MT, Arial, Sans-Serif;
	margin: 15px 80px 5px 50px;
	border-bottom: solid 1px #FFC; 
	color: #FFC;} 

/* All text is rendered in white and moved away from the left and right edges */
div#board_main span {
	font-family: Kristen ITC, Arial, Sans-Serif;
	margin: 0 80px 0 50px; color: #FFF; } 
div#board_main span#author {
	font-family: Verdana, Arial, Sans-Serif;} 
div#board_main p {
	margin: 10px 80px 10px 50px; color: #FFF; } 

/* Make the first letter of the summary text larger than the rest */
div#board_main p span.first {
	font-size: 150%; font-weight: bold; 
	margin: 0; color: #FFC;}

/* Make the first letter of the summary text larger than the rest */
div#board_main a {
	font-size: 1.1em; color: #FC6;
	margin: 20px 80px 0 50px; 
	display:  block;} 


/* ------------------- archive section ----------------------*/

div#articles div#archive {
	padding-top: 20px;}

div#articles div#archive h1 {
	border-bottom: solid 1px #CC0000; 
	color: #CC0000;}

div#articles div#archive h2 {
	background-color: #CCC;
	padding: 5px 0 5px 5px;
	margin-top: 30px;}
	
div#articles div#archive h2 a {
	color: inherit; font-size: inherit;}
* html div#articles div#archive h2 a {
	color: #000; font-size: 100%;}
	

div#articles div#archive div {
	padding: 0 20px 0 5px;}
	
div#articles div#archive span.month {
	float: right;}
div#articles div#archive span.summary {
	margin: 10px 0 0 0; display: block;}
div#articles div#archive a.link {
	margin: -10px 0 10px 5px; display: block;
	font-size: 1.1em;}


/************************************************************************************************************
 * C O N T A C T   P A G E   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

/* -------------------- contact info section -----------------------*/

div#contactInfo {
	background-image: url(../images/contact.gif);
	background-repeat: no-repeat; background-position: top center;
	position: relative; float: left; width: 275px; 
	padding: 15px 0 0 0; margin: 0 5px 0 0;}

div#contactInfo img {
	position: absolute; top: 0; right: 0;
	margin: 7px 10px 0 0;}

div#contactInfo h2 {
	color: #CC0000; font-size: 1.3em;
	margin: 10px 10px 20px 15px;}
	
* html div#contactInfo h2 {
	margin-top: 25px;}

div#contactInfo p {
	margin: 10px 10px 10px 25px;}


/* -------------------- contact submit section -----------------------*/

div#contactSubmit {
	padding: 15px 0 0 0; float: left;}


/* The title of the contact form section - we need to override the margin-top rule */
/* for Explorer to make sure the contact info and the contact form titles line up  */
div#contactSubmit h2 {
	color: #CC0000; font-size: 1.3em;
	margin: 10px 0 10px 0;}
* html div#contactSubmit h2 {
	margin-top: 25px;}


/* This <div> control is the wrapper around the two <div> controls that hold the */
/* actual input textbox, drop-down list, and text area controls                 */
div#contactSubmit div.alsett {
	background-image: url(../images/background/form.gif);
	background-repeat: no-repeat; background-position: left top;
	padding: 10px 0 10px 15px;}

div#contactSubmit div.alsett div {
	float: left; margin-right: 10px;}

div#contactSubmit div.alsett p {
	font-family: "Century Gothic", Verdana, Sans-Serif;
	margin: 10px 0 3px 0;}

div#contactSubmit div.alsett textarea {
	width: 260px; height: 15em;}

* html div#contactSubmit div.alsett textarea {
	width: 21em; height: 15em;}


/* Redefine the padding rules to make the button a little wider and while we are */
/* at it we move the button around a little by setting the margin properties     */
div#contactSubmit input[type="submit"] {
	padding-left: 30px; padding-right: 30px; 
	margin: 0 0 5px 15px;}

* html input.button {
	padding-left: 20px; padding-right: 20px; 
	margin: 0 0 0 15px;}	



/************************************************************************************************************
 * E R R O R   P A G E   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

div#errorInfo {
	margin: 0 20px 10px 0;}

div#sitemap h2 {
	margin: 15px 0 0 10px; color: #CC0000;}

div#sitemap div {
	padding-bottom: 15px; 
	margin-left: -5px; }
	
div#sitemap div div {
	background-image: url(../images/sitemap/vertical.gif);
	background-repeat: repeat-y; background-position: left top;
	margin-left: 20px; padding: 15px 0 0 7px;}
	
div#sitemap div div.first {
	padding-top: 5px;}
	
div#sitemap a {
	background-image: url(../images/sitemap/horizontal.gif);
	background-repeat: no-repeat; background-position: center left;
	padding-left: 18px; color: #575757;}



/************************************************************************************************************
 * S U B M E N U   S T Y L E S H E E T   R U L E S
 ************************************************************************************************************/

div#submenu {
	background-image: url(../images/shadow.gif);
	background-repeat: repeat-x; background-position: top left;
	padding: 15px 0 2px 20px; 
	margin: 2px 0 10px 0;}

div#submenu a {
	font-size: 1.1em; letter-spacing: 0.1em; 
	color: #000000;} 

div#submenu span {
	font-size: 1.1em; padding: 0 10px;} 



/**************************************************************************************************
 * C O M P A N Y   N A M E   S T Y L E S H E E T   R U L E
 **************************************************************************************************/

span#company span.red {color: #CD3132;}
span#company span.blue {color: #2C78B4;}



/**************************************************************************************************
 *A L S E T T   C L E A R   F I X
 **************************************************************************************************/

.alsett:after {
	content: '.';
	display: block;
	height: 0;
	clear: both; 
	visibility: hidden;}

/**************************************************************************************************
 * Star hacks to bring IE in line with the other browsers 
 **************************************************************************************************/

/* Hides from IE-mac \*/
* html .alsett {height: 1%;}
.alsett {display: block;}
/* End hide from IE-mac */