/* reset generic css styles */
*{ outline: none; border: 0; margin: 0; padding: 0; list-style: none; }

html,body{
	font-smooth: auto;
	-webkit-font-smoothing: antialiased;
	}

/* begin base styles */
body{
	background: #373737;
	color: #595959;
	font-family: "Avant Garde", "Century Gothic", Arial, sans-serif;
	font-size: 11pt;
	}

#pageDocumentation{
	width: 95%;
	border: 0px #9393B7 solid;
	margin-top: 5px;
	margin-bottom: 10px;
	/*padding: 10px 10px 30px 10px;*/
}

#pageDocumentation h2{
	border: 1px #9393B7 solid;
	padding: 6px;
	font: normal normal bold 14px Tahoma, Verdana, Sans-serif;
	background-color: #EEEEEE;
	text-indent: 15px;
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:15px;
	float: none;
}

#pageDocumentation p{}

#pageDocumentation .title{
	font: italic normal bold 14px Tahoma, Verdana, Sans-serif;
	text-align: center;
}
	
#pageDocumentation center{
	font: italic normal normal 14px Tahoma, Verdana, Sans-serif;
	text-align: center;
}
#pageDocumentation ul{
	margin: 10px;
	line-height: 1.4em;
	width: 90%;
}
	
h2{
	font-family: "Palatino", Times, serif;
	font-size: 24pt;
	line-height: 28pt;
	font-weight: normal;
	color: #548dba;
	text-shadow: 1px 1px 2px #2a2a2a;
	}
	
	h2.secondary{
		font-size: 23pt;
		line-height: 26pt;
		padding-left: 30px;
		padding-bottom: 35px;
		margin-left: -30px;
		margin-bottom: 0;
		background: url('../images/h2_secondary.png') 0 35px no-repeat;
		}
		
h3{
	font-family: "Palatino", Times, serif;
	font-size: 18pt;
	line-height: 22pt;
	font-style: italic;
	font-weight: normal;
	color: #5d94bd;
	text-shadow: 1px 1px 1px #ffffff;
	}

h4{
	font-family: "Palatino", Times, serif;
	font-size: 18pt;
	line-height: 22pt;
	font-style: italic;
	font-weight: normal;
	color: #c76c00;
	text-shadow: 1px 1px 1px #ffffff;
	}
	
h5{text-transform: uppercase;}
	
h2, h3, h4, p, ul, ol{margin: 0 0 12pt 0;}
	
.blue{color: #548dba !important;}
.orange{color: #c76c00 !important;}
.light{color: #e6e6e6 !important;text-shadow: 1px 1px 2px #2a2a2a !important;}
	
.clear{clear: both;}
.alignright{text-align: right;}
.alignleft{text-align: left;}
.aligncenter{text-align: center;}

.left{float: left;clear: left;}
.right{float: right; clear: right;}

img.left{margin: 0 10px 10px 0;padding: 10px; background: #fff;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	}

img.right{margin: 0 0 10px 10px;padding: 10px; background: #fff;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	}

a{color: #595959;text-decoration: underline;}
a:hover{color: #70a0c5;}

a.arrow, a.arrow:hover{text-decoration: none !important;}

hr{
	clear: both;
	margin: 10px 0;
	border-bottom: 1px dotted #ccc;
	}
 
#wrapper{}
	
#header{
	background: url('../images/bg.header.jpg') 0 0 repeat-x;
	height: 100px;
	width: 100%;
	color: #fff;
	text-shadow: 1px 1px 0px #9f6b00;
	}
	
#header-detail{
	background: url('../images/bg.header.detail.jpg') top center no-repeat;
	height: 100px;
	width: 100%;
	}
	
	#header a{color: #fff;text-decoration: none;}
	#header a:hover, #header a.active{color: #fcfdb7;}
		
	#header h1{
		padding-top: 5px;
		float: left;
		}
			
		#header h1 a{
			display: block;
			background: url(../images/img.logo.png) 0 0 no-repeat;
			height: 0;
			padding-top: 82px;
			line-height: 164px;
			width: 128px;
			overflow: hidden;
			}
			
	#header ul{
		float: right;
		clear: right;
		margin: 0;
		width: auto;
		}
		
		#header ul li{
			float: left;
			}
			
			#header ul li.phone{
				width: 210px;
				text-align: right;
				}
		
	#header ul#contact{
		font-size: 7pt;
		line-height: 20pt;
		height: 42px;
		text-transform: uppercase;
		}
		
	#header ul#nav{
		margin-right: -20px;
		text-transform: uppercase;
		font-weight: bold;
		font-family: "Arial Narrow"; 
		}
		
		#header ul#nav li a{
			background: 0 0 no-repeat;
			display: block;
			height: 0;
			padding-top: 57px;
			overflow: hidden;
			}
			
			#header ul#nav li a:hover, #header ul#nav li.active a{background-position: 0 -57px;}
				#header ul#nav li.home a{background-image: url('../images/nav/home.png');width: 61px;}
				#header ul#nav li.about a{background-image: url('../images/nav/about.png');width: 84px;}
				#header ul#nav li.support a{background-image: url('../images/nav/support.png');width: 172px;}
				#header ul#nav li.services a{background-image: url('../images/nav/services.png');width: 79px;}
				#header ul#nav li.contact a{background-image: url('../images/nav/contact.png');width: 76px;}
				#header ul#nav li.portal a{background-image: url('../images/nav/client.portal.png');width: 141px;}
				#header ul#nav li.remote a{background-image: url('../images/nav/remote.support.png');width: 141px;}
	
#middle{
	background: url('../images/bg.middle.jpg') 0 0 repeat-x;
	height: 275px;
	width: 100%;
	color: #e6e6e6;
	text-shadow: 1px 1px 1px #2a2a2a;
	border-bottom: 3px solid #af5314;
	}
	
#middle-image{
	background: top center no-repeat;
	width: 100%;
	height: 275px;
	}
	
	#middle h2{
		padding: 30px 0px 35px 20px;
		margin: 0 0 0 -20px;
		background: url('../images/bg.text.shelf.png') 0 45px no-repeat;
		}
		
	#middle ul.links{height: 25px;}
	
	#middle ul.links li{
		background: url('../images/bg.rounded.link.png') 0 0 no-repeat;
		float: left;
		margin-right: 24px;
		}
		
		#middle ul.links li a{
			margin: 0 -14px 0 0;
			padding: 1px 20px;
			background: url('../images/bg.rounded.link.cap.png') top right no-repeat;
			font-family: "Palatino", Times, serif;
			font-style: italic;
			display: block;
			height: 25px;
			line-height: 25px;
			color: #e6e6e6;
			text-decoration:none;
			}
			
			#middle ul.links li a:hover{color: #78a5c8;}
	
#middle-content{
	background: url('../images/bg.middle.content.jpg') 0 0 repeat-x #f7f7f7;
	min-height: 175px;
	width: 100%;
	padding: 20px 0;
	line-height: 16pt;
	min-height: 415px;
	}
	
.secondary #middle-content{
	border-top: 1px solid #78460a;
	}
	
	.secondary #middle-content p{margin-left:0;}
	#middle-content .width2{padding-top: 15px;}
	#middle-content .width2 h3, #middle-content .width2 p{padding-right: 40px;}
		
#middle-content #slider-services-wrapper{
	background: #cfcfcf;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfcfcf', endColorstr='#c6c6c6');
	background: -webkit-gradient(linear, left top, left bottom, from(#cfcfcf), to(#c6c6c6));
	background: -moz-linear-gradient(top,  #cfcfcf,  #c6c6c6);
	padding: 10px;
	margin: 0px 15px 15px 15px;
	height: 115px;
	width: 535px;
	}
	
	#middle-content #slider-services-wrapper a.arrow{
		display: block;
		height: 0px;
		width: 30px;
		padding-top:30px;
		overflow: hidden;
		position: absolute;
		z-index: 2;
		}
		
	#middle-content #slider-services-wrapper #slider-services{
		background: #fff;
		float: left;
		height: 115px;
		width: 100%;
		border: 1px solid #b6b6b6;
		position: relative;
		z-index: 1;
		}
		
	a.services-left{background: url('../images/btn.arrow.service.left.png') 0 0 no-repeat;float: left; margin: 43px 0 0 -20px;}
	a.services-left:hover{background-position: 0 -30px;}
	a.services-right{background: url('../images/btn.arrow.service.right.png') 0 0 no-repeat;float: left; margin: 43px 0 0 525px;}
	a.services-right:hover{background-position: 0 -30px;}

.home #middle-content h3{
		height: 66px;
		line-height: 66px;
		padding: 0px 0px 0 20px;
		background: url('../images/h3_background.png') 0 0 no-repeat;
		}
		
.secondary #middle-content h3{
		height: 66px;
		line-height: 66px;
		padding: 0px 0px 0 20px;
		margin-left: -20px;
		background: url('../images/h3_background.png') 0 0 no-repeat;
		color: #c76c00 !important;
		}
		
#middle-content{
	padding: 0 0 40px 0;
	}
		
	#middle-content p{
		margin-left: 20px;
		}
		
	#middle-content p strong{
		font-size: 12pt;
		font-family: "Palatino", Times, serif;
		font-style: italic;
		font-weight: bold;
		color: #c76c00;
		}
		
.secondary #middle-content #body-text ul{
	margin-left: 25px;
	}
.secondary #middle-content #body-text ul li{
	background: url('../images/bg.arrow.list.blue.gif') 0 5px no-repeat;
	padding-left: 18px;
	}
	
.secondary #middle-content #body-text ul.orange li{
	background: url('../images/bg.arrow.list.orange.gif') 0 5px no-repeat;
	}
	
.secondary #middle-content #body-text ol{margin-left: 45px;}
.secondary #middle-content #body-text ol li{
	padding-left: 0px;
	list-style: decimal;
	}
	
	
	.secondary #middle-content #body-text ol ol, .secondary #middle-content #body-text ul ul, .secondary #middle-content #body-text ol ul, .secondary #middle-content #body-text ul ol{
		margin-left: 20px;
		} 
	.secondary #middle-content #body-text ol li li, .secondary #middle-content #body-text ul li li{
		list-style: disc;
		background: none;
		padding: 0;
		}
	
	
#middle-content .partnerlogo{
	display: block;
	float: left;
	height: 60px;
	padding: 20px 0;
	width: 180px;
	background: #fff;
	border: 1px solid #cccccc;
	margin: 0 20px 20px 0;
	text-align: center;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	}
	
 #middle-content .loginitem a{
 	display: block;
	float: left;
	width: 245px;
	padding: 10px;
	background: #fff;
	border: 1px solid #cccccc;
	margin: 0 20px 20px 0;
	text-align: center;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
 	}
 	
 	#middle-content .loginitem a:hover{
 		border: 1px solid #9f9f9f;
 		}
	
#middle-content .partnerlogo img{
	filter: alpha(opacity=65);
	-khtml-opacity: 0.65;
	-moz-opacity: 0.65;
	opacity: 0.65;
	}
	
#middle-content .partnerlogo:hover img{
	filter: alpha(opacity=100);
	-khtml-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
	}
	
a.topLink{
	background: url('../images/bg.arrow.anim.gif') 0 0 no-repeat;
	float: right;
	display: block;
	height: 15px;
	line-height: 15px;
	padding-left: 10px;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 9pt;
	
	}
	
#sidebar{
	margin-left: -5px;
	padding-left: 5px;
	background: url('../images/bg.sidebar.png') 0 0 no-repeat;
	}

#sidebar h4{
	background: url('../images/h4_sidebar.png') bottom left no-repeat;
	padding: 12px;
	margin-left: 1px;
	}
	
#sidebar h4.downloads{
	margin-bottom: 0;
	}
	
#sidebar h4 a{
	color: #eef0aa;
	text-shadow: 1px 1px 2px #75350a;
	display: block;
	margin: -12px;
	padding: 12px;
	background: url('../images/h4_sidebar_link.png') bottom left no-repeat;
	}
	
	#sidebar h4 a:hover{
		text-decoration: none;
		color: #fff;
		}
	
#sidebar h5{
	padding: 0 12px;
	margin: 0 -12px 10px -12px;
	height: 40px;
	line-height: 40px;
	background: url('../images/h5_sidebar.png') bottom left no-repeat;
	}
	
#sidebar a{
	color: #595959;
	text-decoration: none;
	}
	
	#sidebar a:hover{text-decoration: underline;}
	
#sidebar ul, .module{margin-left: 12px;}
	
	#sidebar li{	
		font-size: 9pt;
		line-height: 15pt;
		padding: 0 0 0 9px;
		background: url('../images/bg.plus.gif') 0 8px no-repeat;
		}
		
#sidebar .social{
	padding: 0 12px 12px 12px;
	margin: 0 0 15px 1px;
	background: url('../images/bg.module.gradient.png') bottom left repeat-y;
	}
		
	#sidebar .social a{padding: 0px 5px;}
	

#sidebar .logos{
	background: #fff;
	border: 1px solid #e6e6e6;
	padding: 0;
	margin: 0 0 12px 0;
	}
	
#sidebar p.partnerships{
	padding: 0;
	margin: 0;
	text-align: right;
	font-style: italic;
	font-size: 10pt;
	}

#footer{
	background: url('../images/bg.footer.png') 0 0 repeat-x;
	min-height: 100px;
	width: 100%;
	font-size: 8.5pt;
	padding: 10px 0;
	text-shadow: 1px 1px 0px #000;
	overflow: visible;
	}
	
	#footer a{color: #999999; text-decoration: none;}
		#footer a:hover, #footer .active a{color: #eef0aa;}
		
	#footer ul{float: left;clear: left;margin: 0;}
	#footer li{display: inline;margin-right: 10px;}
		
	#footer a.remote{
		display: block;
		background: url(../images/btn.footer.remote.gif) 0 -26px no-repeat;
		float: right;
		width: 110px;
		height: 0px;
		margin-top: -10px;
		padding-top: 26px;
		overflow: hidden;
		}
		
		#footer a.remote:hover{background-position: 0 0px;}		

	#footer a.portal{
		display: block;
		background: url(../images/btn.footer.portal.gif) 0 -26px no-repeat;
		float: right;
		width: 84px;
		height: 0px;
		margin-top: -10px;
		padding-top: 26px;
		overflow: hidden;
		}
		
		#footer a.portal:hover{background-position: 0 0px;}
		
/* set global widths */

.width1{width:900px;margin: 0 auto;}
.width2{width:625px;float: left;}
.width3{width: 275px;float: right;}
.width4{width:525px;float: left;}
	
/* CONTACT FORM */	

#contactform{}

#contactform label, #contactform input{display:block;float: left;padding: 5px; margin-bottom: 5px;}
#contactform label, #contactform input, #contactform textarea{
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	behavior:url(border-radius.htc);
	}
	
#contactform label.error{
	color: red;
	float: right;
	clear: none;
	margin-top: -3px;
	}
#contactform input, #contactform textarea{
	font-family: "Palatino", Times, serif;
	font-size: 10pt !important;
	color: #2b2b2b;
	}

	#contactform label{clear:both;width: 150px;}
	#contactform input, #contactform textarea{background: #fff; border: 1px solid #ccc;width: 250px; padding: 5px;}
		#contactform textarea{display:block;float: left;height: 200px;margin-bottom: 15px;width: 350px}
	#contactform input#submit{width:120px;margin-left: 160px;color: #fff;text-shadow: 1px 1px 0px #1e4463; border: 1px solid #1e4463;padding: 5px 5px 2px 5px;
		background: #548dba;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#548dba', endColorstr='#42749c'); /* IE fix */
		background: -webkit-gradient(linear, left top, left bottom, from(#548dba), to(#42749c));
		background: -moz-linear-gradient(top,  #548dba,  #42749c);
		}
		
	#recaptcha_widget_div{margin-left: 160px; padding: 10px 0;}
		
	#contactform .forminfo{display:block; margin-left: 160px !important; color: red; font-size: 9pt; font-style:italic;}
		
		#contactform input#submit:hover{
			color: #b9daf4;
			cursor: pointer;
			}
	
/* LOGO SCROLL */


/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	width: 63px;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(../images/cursors/cursor_arrow_left.cur), url(images/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(../images/btn.arrow.logos.left.png);				
	background-color: transparent;
	background-repeat: no-repeat;
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	width: 63px;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/cursors/cursor_arrow_right.cur), url(images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(../images/btn.arrow.logos.right.png);
	background-color: transparent;
	background-repeat: no-repeat;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}


#smallScroller{
		width: 273px;
		height: 60px;
		position: relative;
	}
	
	#smallScroller img{
		height: 60px;
		}
	
	#smallScroller div.scrollableArea *
	{
		white-space: nowrap;
		display: block;
		position: relative;
		float: left;
		padding: 0;
		margin: 0px 10px 0px 10px;
	}
		
	div.scrollingHotSpotLeft, div.scrollingHotSpotRight{min-width: 35px;}


#submitForm2{display: none !important;}