@charset "UTF-8";
/* CSS Document */

/* Reset Styles*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	color: #666;
	font: .85em/1.5 Tahoma, Verdana, Arial,sans-serif;
}

/* ~~ Element/tag selectors ~~ */
ul { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding:0;
	margin: 0;
}

p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 15px;
}

a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */

a:link {
	color: #008ac0;
	margin-top:20px;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #004b85;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #004b85;
	text-decoration: underline;
}

#goHere a:link{
}
	

/*------------Site Structure-------------------*/

.outerWrap   {background: #FFFFFF; margin: 0 }

.container 	{ width: 1024px; background: #FFFFFF; margin: 0 auto; position: relative }
#header 	{ width: 1024px; background: #fff; margin: 0 auto; }
#logo 		{
	height:90px;
	position:relative;
	left: 0px;
	width: 316px;
}

/*- Navigation--------------------------- */

.containerNav 	{width: 1024px; margin: 0 auto; position:relative; height:100px;}

#barNav { height: 100px; position: relative;}    
#barNav2 { height: 45px; position: relative; background-color:#004b85}    
	
#nav {
	width:720px;
	font-size:1.2em;
	line-height:normal;
	font-weight: lighter;
	font-size: 1.2em;
	padding: 0;
	margin:0 auto;
	position: absolute;
	left: 320px;
	height: 30px;
	top: 58px;
}

#contact 	{
	position: relative;
	top: 0px;
	width: 320px;
	font: 1.1em/1.429 Tahoma, Verdana, Arial,sans-serif;
	right: 0px;
}
#contact a	{ color: #ffffff; text-decoration: none ; background-color:#cccccc ; padding:4px 12px; color:#FFF ; margin-left:15px}
#contact a:hover	{ color: #444; text-decoration: none ; background-color:#cccccc ; padding:4px 12px; margin-left:15px}

#nav ul 	{ margin:0;list-style:none; }
#nav li 	{ display:inline; margin:0; padding:0; font-weight:normal;}
#nav a 		{ float:left; margin:0; text-decoration:none; border-left: #ccc dotted 1px; }

#nav a span 	{float:left;display:block;padding:7px 15px;color:#444;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
    #nav a span { float:none;}
/* End IE5-Mac hack */
    
#nav a:hover span { color: #09F;}

/*- End Navigation--------------------------- */


/*- Main Bar--------------------------- */
#outerBar  		{ background: #004b85; height: 224px; }
#outerBar #Bar  {width: 1024px;  margin: 0 auto; position:relative; height:224px; background-image: url(img/Screen_shot.jpg);background-repeat:no-repeat;}
#outerBar #Bar #mainHeadline    { position: absolute; width: 560px; top: 20px; }
#outerBar #Bar #mainHeadline h1 { color: #fff; font-weight: normal; font-size: 1.47em; line-height: 1.43; }
#product   { position: absolute; width: 420px; color: #FFF; top: 160px; }

/*- Main Bar (secondary pages)--------------------------- */
#outerBar2		{ background: #004b85; height: 60px; }
#outerBar2 #Bar  {width: 1024px; margin: 0 auto; position:relative; height:60px; background-image: url(img/2nd_tier_banner.jpg);background-repeat:no-repeat;}
#outerBar2 #Bar h1 {
	position: absolute;
	color: #fff;
	font-size: 24px;
	height:60px;
	font-weight:normal;
	line-height:60px;
	width: 388px;
}
#product2   { position: absolute; width: 320px; color: #FFF; top: 20px; left:260px }

/* ~~ Columns for the layout. ~~ */

.sidebar1 { float: left; width: 220px; background: #fff; padding-bottom: 10px; color: #004b85; line-height: 1.8em; margin:20px 0}
.sidebar1 p { padding-bottom: 15px;}

#screenshots 	{
	top: 20px;
	width: 120px;
	font: 1.1em/1.429 Tahoma, Verdana, Arial,sans-serif;
	
}
#screenshots a	{ color: #ffffff; text-decoration: none ; background-color:#cccccc ; padding:4px 12px; color:#FFF ;}
#screenshots a:hover	{ color: #444; text-decoration: none ; background-color:#cccccc ; padding:4px 12px;}

.content     { float: left; width: 480px; font: .9em/1.45 Tahoma, Verdana, Arial,sans-serif; border-left:1px solid #ccc; margin:20px 0 20px 10px}
.content h1  { padding: 0 0 20px 20px; font-weight: normal; font-size: 1.5em; line-height: 1.33; color: #000;}
.content ul  { padding: 0 15px 15px 35px;  }
.content li  { margin-bottom: 7px; border-bottom:1px dotted #CCC ; padding-bottom:5px  }

.sidebar2     { float: right; width: 250px; background: #fff; font: .9em/1.45 Tahoma, Verdana, Arial,sans-serif; border-left:1px solid #ccc ; margin:20px 0; overflow:hidden }
.sidebar2 p { padding: 0 0 10px 20px;}
.sidebar2 h1 { padding: 0 0 20px 20px; font-weight: normal; font-size: 1.5em; line-height: 1.33; color: #000; }
.sidebar2 ul  { padding: 0 0 15px 35px;}
.sidebar2 li  { margin-bottom: 7px;  }

#containerCustomers {  background: #ffffff; clear: both; overflow:hidden ; height: 100px   }
#wrapCustomers  {width: 1024px; margin: 0 auto; position: relative; margin-top:15px}
#customers { padding: 10px 0;font-size:1em;  position: absolute; width: 1024px ; line-height:50px ; height:50px; border-bottom:1px solid #CCC; border-top:#CCC 1px solid }
#customersButton { color: #ffffff; text-decoration: none ; background-color:#cccccc ; padding:6px 15px; font: 1.2em/1.429 Tahoma, Verdana, Arial,sans-serif; margin-right:15px}

/* ~~ Columns for the layout. Secondary pages ~~ */

.column1     { float: left; width: 680px; font: .9em/1.45 Tahoma, Verdana, Arial,sans-serif; margin:20px 0 20px 0;  }
.column1 h1  { padding: 0 0 20px 0; font-weight: normal; font-size: 1.5em; line-height: 1.33; color: #000;}
.column1 h2  { padding: 20px 0; font-weight: normal; font-size: 1.2em; line-height: 1.33; color: #F96; font-weight:bold}
.column1 ul  { padding: 0 15px 15px 35px;border-bottom:1px dotted #CCC ; margin-bottom: 10px; margin-top:7px   }
.column1 li  { margin-bottom: 7px  }

.column2     { float: right; width: 230px; background: #fff; font: .9em/1.45 Tahoma, Verdana, Arial,sans-serif; border-left:1px solid #ccc ; margin:40px 0; overflow:hidden }
.column2 p { padding: 0 0 10px 20px;}
.column2 h1 { padding: 0 0 20px 20px; font-weight: normal; font-size: 1.5em; line-height: 1.33; color: #000;}
.column2 ul  { padding: 0 15px 15px 35px; }
.column2 li  { margin-bottom: 7px;  }

.screenTable { width:400px}
.screenTable td { padding:20px ; border:solid #CCC 1px}

/* ~~ The footer styles ~~ */

.footer { padding: 20px 0; background: #eeeeee; clear: both; overflow:hidden ; height: 300px   }

#containerFooter  {width: 1024px; margin: 0 auto; position: relative;}
#copyright {
	padding: 10px 0;
	font-size: 0.8em;
	position: absolute;
	width: 453px;
}

/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a br or empty div as the final element following the last floated div (within the .container) if the .footer is removed or taken out of the .container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

td.title 
	{
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-weight: bold;
	font-size: 10pt;
	}
