/*** * Tripoli CSS library for reseting browser defaults (http://www.monc.se/tripoli/) * ***/
@import url("tripoli/reset.css");
@import url("tripoli/generic.css");

/*** * Systek created form styles * ***/
@import url("forms.css");

/*** * Lightbox styles * ***/
@import url("lightbox.css");


/* *** Universals *** */
body {
	background: #F9F9F9 url(/images/bgTile.png) repeat-x left top;
	font-family: tahoma;
}

/*** * Main Structure * ***/
#container {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}

#header {
	height: 142px;
}
	#header h1			{padding: 20px 0 17px 0; float: left;}
	#header h1 a			{display: block; width: 323px; height: 105px; background: url(/images/title.png) no-repeat left top;}
	#header h1 span	{display: none;}

#nav {
	float: right;
}	
	#nav span				{float: left;}
	#nav a					{position: relative; display: block; height: 122px; padding: 0 10px 20px 10px; font-size: 2.1em; color: #c3d13a; overflow: hidden;}
	#nav a span			{display: block; position: relative; bottom: -102px; float: none !important; width: auto;}
	#nav a span img	{padding: 0 0 0 3px;}
	#nav a:hover			{color: #37B9D0;}
	
	#nav a.current					{height: 163px;  color: #F9F9F9; padding-bottom: 0;}
	#home #nav a.current		{background: #37B9D0 url(/images/homeCurrentTile.png) repeat-x left top;}
	#work #nav a.current		{background: #ECA829 url(/images/workCurrentTile.png) repeat-x left top;}
	#services #nav a.current	{background: #c3d13a url(/images/servicesCurrentTile.png) repeat-x left top;}
	#people #nav a.current		{background: #A90D74 url(/images/peopleCurrentTile.png) repeat-x left top;}
	#contact #nav a.current,
	#products #nav a.current	{background: #EE5757 url(/images/contactCurrentTile.png) repeat-x left top;}

	#home #nav span.bordered		{border-bottom: 21px solid #37B9D0;}
	#work #nav span.bordered		{border-bottom: 21px solid #ECA829;}
	#services #nav span.bordered	{border-bottom: 21px solid #c3d13a;}
	#people #nav span.bordered	{border-bottom: 21px solid #A90D74;}
	#contact #nav span.bordered,
	#products #nav span.bordered	{border-bottom: 21px solid #EE5757;}
	
#colorBar {	
	clear: left;
	height: 21px;
	overflow: hidden;
}
	#home #colorBar		{background: none;}
	#work #colorBar			{background: #ECA829;}
	#services #colorBar	{background: #c3d13a;}
	#people #colorBar		{background: #A90D74;}
	#contact #colorBar,
	#products #colorBar	{background: #EE5757;}
	#other #colorBar		{background: #37B9D0;}

#sideNav {
	width: 178px;
	margin: -20px 0 0 0;
	padding: 0 20px 20px 20px;
	float: left;
}
	#home #sideNav	,
	#other #sideNav								{float: right; background: #37B9D0 url(/images/homeSideNavTile.png) repeat-x left bottom;}
	#other #sideNav								{float: left; margin: 0;}
	#work #sideNav								{background: #ECA829 url(/images/workSideNavTile.png) repeat-x left bottom;}
	#services #sideNav						{background: #C3D13A url(/images/servicesSideNavTile.png) repeat-x left bottom;}
	#people #sideNav							{background: #A90D74 url(/images/peopleSideNavTile.png) repeat-x left bottom;}
	#contact #sideNav,
	#products #sideNav						{background: #EE5757 url(/images/contactSideNavTile.png) repeat-x left bottom;}
	#sideNav h2									{padding: 20px 0 1px 0; color: #F9F9F9; font-size: 1.6em; border-bottom: 1px solid #F9F9F9;}
	#sideNav ul										{list-style: none;}
	#sideNav ul li									{margin: 10px 0 0 0;}
	#sideNav ul li a								{text-decoration: none; color: #F9F9F9; font-size: 1.5em;}
	#sideNav ul li a.current					{padding-left: 14px;}
	#work #sideNav ul li a.current			{background: url(/images/workCurrentArrow.gif) no-repeat left center;}
	#services #sideNav ul li a.current	{background: url(/images/servicesCurrentArrow.gif) no-repeat left center;}
	#products #sideNav ul li a.current	{background: url(/images/contactCurrentArrow.gif) no-repeat left center;}
	#sideNav ul li a:hover						{text-decoration: underline;}

#sideInfo {
	width: 178px;
	margin: 20px 0 0 0;
	padding: 20px;
	float: left;
	background: #E2E2E2;	
	clear: left;
}
	#home #sideInfo		{float: right; clear: right;}
	#sideInfo h2			{font-size: 1.4em; color: #474747;}
	#sideInfo p				{margin: 10px 0 0 0; text-align: left; font-size: 1.1em; line-height: 1.3em;} 
	#sideInfo .signature	{float: right; text-align: right;}
	#sideInfo a				{text-decoration: underline; color: #1F90B5;}
	#sideInfo a:hover	{color: #B1BF25;}

#main {
	width: 722px;
	margin: 0 0 0 20px;
	float: right;
}
	#home #main				{margin: 0; float: left;}
	#main h2						{position: relative; margin: 20px 0; padding: 10px 10px 13px 10px; font-size: 2.1em !important; color: #F9F9F9; font-weight: normal;}
	#home #main h2,
	#other #main h2			{background: #F3AF30 url(/images/homeHeadlineTile.png) repeat-x left bottom;}
	#other #main h2			{margin: 40px 0 0 0;}
	#work #main h2			{background: #BFC931 url(/images/workHeadlineTile.png) repeat-x left bottom;}
	#services #main h2		{background: #A90D74 url(/images/servicesHeadlineTile.png) repeat-x left bottom; display: block;}
	#people #main h2		{background: #EE5757 url(/images/peopleHeadlineTile.png) repeat-x left bottom;}
	#contact #main h2,
	#products #main h2	{background: #37B9D0 url(/images/contactHeadlineTile.png) repeat-x left bottom;}
	#main h2#errorHead	{margin-top: 40px;}
	#main h3						{width: 500px; /*clear: right;*/ border-bottom: 1px solid #000000;}
	#main h4						{font-size: 1.2em; letter-spacing: 0.06em;}
	#main p,
	#main ul,
	#main ol,
	#main dl						{margin: 10px 222px 0 0; text-align: justify; text-indent: 15px; color: #666; line-height: 1.8em; font-size: 1.1em; letter-spacing: 0.06em;}
	#main ul						{text-indent: 0; list-style: none !important; margin: 10px 0 0 15px; line-height: 1.6em; font-size: 1em;}
	#main ol						{margin: 10px 0 0 40px; text-indent: 0;}	
	#main dl						{text-indent: 0;}			
	#main li:before				{content: "";}
	#main p.info					{color: #888; text-indent: 0; font-style: italic; margin-top: -0.45em;}
	#main a						{color: #30acc8;}
	#main a:hover				{color: #C3D13A !important;}
	#main a:visited				{color: #aaa;}
	#main .flashList			{list-style: disc !important;}
	#main .flashList li			{padding: 0 0 0 10px;}
	#main .signature			{float: right; text-align: right;}						
	
#graphicsPortfolio	{margin: 9px 0 0 0;  width: 722px; display: block;}
	/*
	#main #portDescription		{margin: -10px 0 10px 0;  padding: 0 60px; display: none;}
	#main #portDescription h2	{color: #aaa; font-size: 2em; background: none; margin: 0;}
	#main #portDescription p	{text-indent: 1em; font-size: 1.2em; color: #000000; text-align: justify; margin: 0;}
	#main #portDescription a	{color: #30acc8; margin: 0; padding: 0; margin: 0; font-size: 1.2em; text-align: right; display:block;}
	*/
	
#footer {
	/*overflow: hidden;*/
	background: #C3D13A url(/images/servicesFooterTile.png) repeat-x left top;
	margin: 20px 0 0 0;
}
	#home #footer,
	#other #footer			{background: #37B9D0 url(/images/homeFooterTile.png) repeat-x left top;}
	#work #footer			{background: #f8b62f url(/images/workFooterTile.png) repeat-x left top;}
	#services #footer	{background: #C3D13A url(/images/servicesFooterTile.png) repeat-x left top;}
	#people #footer		{background: #A90D74 url(/images/peopleFooterTile.png) repeat-x left top;}
	#contact #footer,
	#products #footer	{background: #EE5757 url(/images/contactFooterTile.png) repeat-x left top;}

#footContent {
	width: 1000px;
	margin: 0 auto;
	padding: 20px 0;
	overflow: hidden;
	background: url(/images/servicesFootContentTile.png) repeat-y left top;
}
	#home #footContent,
	#other #footContent 		{background: url(/images/homeFootContentTile.png) repeat-y left top;}
	#work #footContent 		{background: url(/images/workFootContentTile.png) repeat-y left top;}
	#services #footContent 	{background: url(/images/servicesFootContentTile.png) repeat-y left top;}
	#people #footContent 	{background: url(/images/peopleFootContentTile.png) repeat-y left top;}
	#contact #footContent,
	#products #footContent	{background: url(/images/contactFootContentTile.png) repeat-y left top;}
	
	#footContent form		{float: left;}

#footSide {
	width: 218px;
	margin: -20px 0 0 0;
	padding: 20px 20px 0 20px;
	float: left;
	background: url(/images/servicesFootSideTile.png) repeat-x left top;
}
	#home #footSide,
	#other #footSide			{background: url(/images/homeFootSideTile.png) repeat-x left top;}
	#work #footSide			{background: url(/images/workFootSideTile.png) repeat-x left top;}
	#services #footSide	{background: url(/images/servicesFootSideTile.png) repeat-x left top;}
	#people #footSide		{background: url(/images/peopleFootSideTile.png) repeat-x left top;}
	#contact #footSide,
	#products #footSide	{background: url(/images/contactFootSideTile.png) repeat-x left top;}
	
	#footSide h2		{margin: 0 0 4px 0; padding: 0; text-align: right; color: #F9F9F9; line-height: 1.3em;}
	#footSide p			{text-align: right; color: #F9F9F9; line-height: 1.8em;}
	#footSide img		{margin: 13px 0 0 0;}
	#footSide a			{color: #F9F9F9; text-decoration: underline;}
	

/* *** Home *** */
#home #main h2#about	{margin: 10px 0 -5px 0; padding: 20px; background: none; color: #474747; background: url(/images/homeHeadlineTile2.png) repeat-x left top;}
#home #main p#bump	{font-size: 1.3em; line-height: 1.7em;}
#home p.blurb					{margin: 10px 20px; font-size: 1.2em;}
#home #main .moveOn	{display: block; text-align: right; font-size: 0.9em;}


/* *** Content *** */	
.textImageLarge {
	position: relative;
	width: 324px;
	padding: 0 0 8px 20px;
	float: right;
}
	.textImageLarge img		{border: 2px solid #37B9D0;}
	.textImageLarge span	{color: #999; font-style: italic; text-align: left;}

.textImageSmall {
	width: 215px;
	margin: 18px 108px 0 0;
	padding: 0 0 10px 20px;
	float: right;
}
	.textImageSmall img		{border: 2px solid #37B9D0;}
	.textImageSmall span	{width: 213px; color: #999; font-style: italic; text-align: left;}
	.peopleImage 				{margin-top: 7px;}

.inParagraph {
	margin-top: 0;
	margin-right: -114px;
	padding-top: 20px;
	font-size: 0.9em;
	line-height: 1.4em;
	letter-spacing: 0.03em;
}

.inTextNav {
	position: relative;
	width: 165px;
	margin: 0 0 0 0;
	padding: 0 20px 20px 20px;
	border-left: 20px solid #F9F9F9;
	float: right;
	background: #E2E2E2;
}
	.inTextNav h3					{width: 165px !important; font-size: 1.2em; color: #474747; border-bottom: 1px solid #474747;}
	.inTextNav ul li ol.subMenu		{list-style-position: outside !important; list-style: disc; margin: 0 0 0 10px !important;  padding: 0;}
	.inTextNav ul li ol.subMenu	li 	{margin: 0; padding: 0;}
.code {
	max-width: 715px;
	overflow: auto;
	margin: 10px 0 10px 0; 
	padding: 0 0 0 5px;
	background: #e7e7e7 url(/images/codeTileGrey.png) repeat-x left bottom; 
	border: 1px solid #474747; 
	color: inherit;
	font-family: "Courier New";
	font-size: 0.8em;
}
	.code ol			{margin: 0 0 0 30px !important; list-style-position: outside; background: #F9F9F9 url(/images/codeTile.png) repeat-x left bottom;}
	.code ol li			{padding: 0 7px;}
	.code h3			{margin: 5px 0; color: #474747; border-bottom: none !important; font-weight: normal !important; font-size: 1.1em !important; }

.variableTable {
	display: block;
	margin: 60px 0;
}


#toc{
	
}

	#toc ol{margin: 0 0 0 30px; font-size: 1.1em; list-style-type: upper-alpha; }
	#toc ol ol{ margin: 0 0 0 15px; font-size: 0.9em;  list-style-type: decimal; }
	
.variableTable tr { background: #f6f6f6; }

.variableTable tr.dataTopRow {
	background: #E2E2E2;
}

.variableList tr.dataTopRow td									{text-align: center;}
.variableList tr.dataBottomRow								{font-style: italic; font-size: 0.9em; color: #999999; padding: 0;}
.variableList tr.dataBottomRow td ul.tableFooterList 	{list-style-type: none; margin: 0; padding: 0;}
.variableList tr.dataBottomRow td ul.tableFooterList li	{margin: 0 0 8px 0;}
.variableList tr td {
	text-align: left;
}

.codeDescript {
	border-top: solid 1px #000000;
	margin: 10px 0 0 0;
}

.codeHeader {
	display: block;
	font-size: 1.2em;
	font-weight: normal;
	margin: 0 0 10px 0;
	
	height: 20px;
}

	.codeHeader a 	{ background: url(/images/famfamfam/script_gear.png) no-repeat left top; padding: 0 0 2px 20px; float: right; text-decoration: none !important; margin: 5px 5px 0 0;}
	
.downloads {
	width: 500px;
}
	.downloads dd			{margin-left: 20px;}
	.downloads a			{text-decoration: none !important;}
	.downloads a span	{text-decoration: underline;}
	.downloads em			{font-size: 0.9em; color: #979797; font-weight: normal;}
	
.params {
	width: 500px;
}
	.params dd	{margin-left: 20px;}

/* Based on Veerle's table <http://veerle.duoh.com/blog/comments/a_css_styled_table/> */
table {
	width: auto;
	margin: 5px 0 0 0 !important;
	padding: 0;
	border: 0;
	border-top: 1px solid #acacac !important;
}
	table caption			{margin: 20px 0 0 0; padding: 0; text-align: left; font-size: 1.3em; line-height: 1.3em; font-weight: bold;}
	table tr					{background: #F9F9F9; font-size: 1.1em;}
	table tr.altRow		{background: #f1f1f1;}
	table th					{padding: 6px 6px 6px 12px !important; background: #DDDDDD url(/images/tableHeadbg.png) no-repeat left top; border-right: 1px solid #acacac !important;  border-bottom: 1px solid #acacac !important; font-size: 0.8em;color: #474747; letter-spacing: 2px; text-align: left;}
	table td 				{border-right: 1px solid #acacac !important; border-bottom: 1px solid #acacac !important; padding: 6px 6px 6px 12px !important; color: #666; line-height: 1.6em; letter-spacing: 0.06em; text-align: center;}
	table .first				{border-left: 1px solid #acacac !important;}

	
/* *** Various Styling Classes *** */
.clear 			{clear: both;}
.centerText 	{text-align: center !important;}
.small			{font-size: 0.8em;}
.req-js			{display: none;}