div#main div#introduction
{
background: url(img/main_pic1.jpg) no-repeat;
width:898px;
height:224px;
margin:0 1px;
position:relative;
color:#F1F9E6;
}

div#introMessage h1
{
height:43px;
color:#F1F9E6;
font-size:26px;
padding-left:60px;
letter-spacing:-1px;
background: url(img/gears.png) no-repeat top left;
margin-bottom:5px;
}

div#introMessage
{
position:absolute;
top:15px;
left:25px;
font-size:14px;
}

div#introMessage p
{
margin-bottom:.5em;
width:420px;
}

div#introMessage a
{
position:absolute;
top:145px;
left:330px;
color:#F1F9E6;
font-weight:bold;
text-decoration:none;
font-size:13px;
}

div#introMessage a:hover
{
background-color:#BBE482;
color:#2E4B1F;
}

div.highlight1, div.highlight2, div.highlight3
{
width:293px;
height:62px;
position:absolute;
}

div.highlight1 a, div.highlight2 a, div.highlight3 a
{
text-decoration:none;
display:block;
height:62px;
width:293px;
color:#2E4B1F;
overflow:hidden;
outline:none;
}

div.highlight1 a:hover, div.highlight2 a:hover, div.highlight3 a:hover, div.highlight1 a:active, div.highlight2 a:active, div.highlight3 a:active
{
/*background-color:#BBE482;
color:#000;*/
cursor:default;
}

div.highlight1 span.h1Title, div.highlight2 span.h2Title, div.highlight3 span.h3Title
{
margin-left:65px;
position:static;
width:185px;
font-size:12px;
/*letter-spacing:-1px;*/
padding-top:0px;
float:left;
clear:right;
font-weight:bold;
}

div#introduction div.highlight1 span.h1Text, div#introduction div.highlight2 span.h2Text, div#introduction div.highlight3 span.h3Text
{
position:static;
margin-left:65px;
width:220px;
font-size:11px;
float:left;
line-height:14px;
}

div#introduction div.highlight1 span.h1Text, div#introduction div.highlight2 span.h2Text, div.highlight1 span.h1Title, div.highlight2 span.h2Title
{
position:relative;
top:4px;
}


div.highlight1
{
top:1px;
right:1px;
}

div.highlight1 a
{
background: url(img/bag.png) no-repeat 13px 50%;
}

div.highlight2
{
top:66px;
right:1px;
}

div.highlight2 a
{
background: url(img/chart.png) no-repeat 10px 50%;
}

div.highlight3
{
top:130px;
right:1px;
}

div.highlight3 a
{
background: url(img/window.png) no-repeat 10px 50%;
}

div#snippets
{
min-height:161px;
width:900px; /* Needed to trigger the hasLayout in IE6 and make the overflow work and wrapp all floated elements inside this DIV#snippets */
background: url(img/bg_snippets.gif) no-repeat top left;
overflow:auto;
color:#275577;
}

div#snippets a
{
color:#2E4B1F;
text-decoration:none;
float:right;
margin-bottom:2px; /* Needed so the floated elements won't miss layout in FF when this link is active (by tabs) */
}

div#snippets a:hover, div#snippets a:active
{
background-color:#D9F0B9;
}

div#snippets h2
{
font-size:16px;
padding-left:35px;
letter-spacing:-1px;
margin-bottom: 10px;
height:30px;
}

div#snippets p
{
margin-bottom: 10px;
}

	div#snippet1
	{
	float:left;
	width:260px;
	padding:0 10px;
	margin-left:15px;
	}
	
	div#snippet2, div#snippet3
	{
	float:left;
	width:260px;
	padding:0 10px;
	margin-left:15px;
	}
	
	div#snippet1 h2
	{
	background: url(img/geek_30.gif) no-repeat top left;
	}
	
	div#snippet2 h2
	{
	background: url(img/mkt_30.gif) no-repeat top left;
	}
	
	div#snippet3 h2
	{
	background: url(img/business_30.gif) no-repeat top left;
	}
	
	div#snippets ul, div#snippets ol
	{
	/*margin-left:26px;*/
	margin-bottom:5px;
	margin-top:5px;
	padding-left:26px;
	}
	
	div#snippets li
	{
	margin-bottom:5px;
	line-height:18px;
	padding-left:5px;
	}
	
	div#snippets ol > li
	{
	list-style-image:url(img/bullet1.gif);
	}
	
	div#snippets ul > li
	{
	list-style-image:none;
	}