/* Stylesheet: FM Direct Modified On 2012-09-07 10:08:04 */
/* reset */
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, 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, input, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, nav ul {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	font-style: normal;
	vertical-align: baseline;
	text-decoration: none;
	word-wrap: break-word;
	/* box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;*/
}
input, textarea, select {font-family: Arial, Helvetica, sans-serif;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
strong {font-weight: bold;}
a {cursor: pointer;}
.clear {clear: both;}
/* stick the footer to the floor */
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow: auto;}

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}
/* main */
body {font: 1em Arial, Helvetica, sans-serif; font-weight: 300; min-height: 100%; color: #333;}

	.button {cursor: pointer;}
	.button.blue {background: #9ab4bc url(/images/gradient-black-10.png) repeat-x bottom; color: #fff;}
	.button.orange {background: #ff760b url(/images/gradient-black-10.png) repeat-x bottom; color: #fff;}
		.button span {float: right; display: block; width: 9px; height: 14px; margin: 0px 0px 0px 10px;}
			.arrowWhite span {background: url(/images/icon-arrow-white-50.png) no-repeat;}
			.arrowBlack span {background: url(/images/icon-arrow-black-50.png) no-repeat;}
		.button:hover {background-image: none;}
		
	.leftImg {float: left; margin: 0 15px 15px 0;}
	.rightImg {float: right; margin: 0 0 15px 15px;}
	
	.buy {padding: 8px; display: block; float: left; text-transform: uppercase; font-size: 1.2em;}
		.buy:hover {background: #333;}
		
	.pdfLink {display: block; margin: 30px 0 0 0 ;}
	.pdfLink a {display: block; background: url(/images/icon-pdf.png) no-repeat; min-height: 50px; padding: 0 0 0 60px; color: #9ab4bc; margin: 0 0 15px 0; font-size: 0.7em;}
		.pdfLink a strong {font-size: 2em;}
	.moreInfo a {display: block; background: #9ab4bc; padding: 20px; color: #fff; margin: 0 0 15px 0;}
		.moreInfo a:hover {background: #333;}

	.container {width: 960px; margin: auto; position: relative;}
	
#dimensions {display: block; position: fixed; top: 0px; left: 0px; background: #c00; color: #fff; padding: 10px;}

/* top bar */
#topBar {background: #ff760b url(/images/gradient-black-20.png) repeat-x bottom; padding: 8px 0px 8px 0px; position: relative; z-index: 300;}
	#topBar a {}
		#topBar a.button {line-height: 24px; height: 24px; padding: 3px 5px 3px 5px; width: 200px; color: #fff; background: url(/images/black-40.png); display: block; float: left;}
			#topBar a.button span {margin: 5px 0px 5px 10px;}
		#topBar a.button:hover {background: #333;}
		#topBar a.button.active span {background: url(/images/icon-arrow-black-50-down.png) no-repeat right; width: 24px;}
	#search {float: right; display: block; background: url(/images/white-40.png); padding: 5px; width: 200px;}
		#search input[type="text"] {border: none; background: none; outline: none; color: #666; font-size: 0.8em; float: left;}
			#search input[type="text"]:focus {color: #333;}
		#search input[type="submit"] {border: none; text-indent: -9999px; width: 20px; height: 20px; background: url(/images/icon-search.png); cursor: pointer; float: right;}
	
/* header */
#header {position: relative; z-index: 100;}
	#header ul, #header ol {list-style: none;}
	#logo {float: left; margin: 20px 0px 20px 0px;}
	#topNav {float: right; position: absolute; bottom: 16px; right: 0px; margin: 20px 0px 20px 0px; font-size: 0.95em; z-index: 100;}
		#topNav li {float: left; display: block; margin-left: -1px; position: relative; line-height: 250%; z-index: 120;}
			#topNav li a {display: block; padding: 0px 20px 0px 20px; color: #333; border-left: 1px solid #ccc; border-right: 1px solid #ccc; z-index: 140; position: static; border-top: 1px solid #fff; background: #fff;}
				#topNav li a:hover, #topNav li:hover a {background: #eeeeee; border-top: 1px solid #eee;}
				#topNav li.parent:hover a {border-top: 1px solid #ccc;}
		#topNav li ul {position: absolute; top: 98%; right: 0px; width: 180%; background: #eeeeee; padding: 15px; border: 1px solid #ccc; z-index: -1; display: none; font-size: 0.8em;}
			#topNav li ul li {width: 100%; clear: both;}
			#topNav li ul li a, #topNav li.parent:hover ul li a {border: none; border-bottom: 1px dotted #ccc;}
				#topNav li ul li a {padding: 0px;}
					#topNav li ul li a:hover {color: #000;}
			
	/* contact info */
	#contactInfo {padding: 3%; background: #fff url(/images/gradient-black-10-inverse.png) repeat-x 0px 1px; border: 1px solid #ccc; border-top: none; -moz-box-shadow: 0px 3px 3px 1px #ccc;  -webkit-box-shadow: 0px 3px 3px 1px #ccc; box-shadow: 0px 3px 3px 1px #ccc; position: absolute; top: 0px; left: 0px; width: 94%; z-index: 150; display: none;}
			#contactInfo #social {border-top: 1px solid #ccc; padding: 20px 0px 20px 0px; margin: 20px 0px 0px 0px;}
				#contactInfo #social a {float: left; display: block; width: 40px; height: 40px; margin: 10px 10px 0px 0px;}
					#contactInfo #social a.linkedIn {background: #3399cc;}
					#contactInfo #social a.twitter {background: #019ad2;}
					#contactInfo #social a.facebook {background: #3b5998;}
					#contactInfo #social a:hover {background: #333;}
		#contactInfo #address {float: right; width: 31%; padding: 0px 0px 0px 4%; border-left: 1px solid #ccc; margin-left: -1px; font-size: 0.95em;}
			#contactInfo #address p {line-height: 170%; text-align: right; clear: both;}
				#contactInfo #address p strong {float: left;}
				#contactInfo #address p a {color: #ff760b;}
				#contactInfo #address p:nth-child(1) {margin-bottom: 20px; text-align: left;}
					#contactInfo #address p.map a {display: block; margin: 20px 0px 0px 0px;}
					#contactInfo #address p.map a img {width: 100%;}


                                        .contactInfo .captcha {margin: 0px;}
					.contactInfo .captcha .captcha {margin: 0px;}
			
		/* download form */
		#downloadForm {padding: 3%; background: #fff url(/images/gradient-black-10-inverse.png) repeat-x 0px 1px; border: 1px solid #ccc; border-top: none; -moz-box-shadow: 0px 3px 3px 1px #ccc;  -webkit-box-shadow: 0px 3px 3px 1px #ccc; box-shadow: 0px 3px 3px 1px #ccc; position: absolute; top: 0px; left: 0px; width: 94%; z-index: 150; display: none;}
						
		/* generic form */
		.form h2 {margin: 0px 0px 5px 0px;}
		.form h2, .form h3 {font-weight: bold; color: #000;}
		.form p {line-height: 150%;}
			p.bbottom {border-bottom: 1px solid #ccc; padding: 0px 0px 20px 0px; margin: 0px 0px 20px 0px; font-size: 0.9em;}
			p.bbottom span.requiredNote {display: block; color: #ff760b;}
			form.form {margin: 0px; float: left; border-right: 1px solid #ccc;}
				#contactInfo .form {padding: 0 4% 0 1%; width: 60%; border-right:none; }
				#downloadForm .form {padding: 0 4% 0 1%; width: 95%;}
				form.form .col {float: left; display: block; width: 47%; margin-right: 3%;}
					form.form .col p {clear: both; padding: 8px 0px 0px 0px;}
						form.form .col label {float: left; display: block; width: 30%; font-size: 0.8em; color: #666; line-height: 30px;}
							form.form .col label.wide {width: 100%;}
						form.form .col p input[type="text"], form.form .col p input[type="password"] {background: #efefef; float: right; height: 30px; width: 54%; padding: 0 3% 0 3%; color: #666; font-size: 0.9em;}
						form.form .col p select {clear: both; width: 100%; margin: 8px 0px 8px 0px; border: none; height: 30px; color: #666; font-size: 0.9em; background: #efefef;}
							/*#notie form.form .col p select {-webkit-appearance: button;  -webkit-border-radius: 2px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background: #efefef url(/images/icon-arrow-black-50-down.png) no-repeat right;}*/
						form.form .col p textarea {background: #efefef; border: none; clear: both; width: 100%; margin: 8px 0px 8px 0px; height: 80px; color: #666; font-size: 0.9em;}
				form.form input[type="submit"] {padding: 5px 10px 5px 10px; cursor: pointer; font-size: 0.9em;}
		.close {background: #666; color: #fff; position: absolute; top: 0px; right: 0px; padding: 5px; text-transform: uppercase; font-size: 0.8em; cursor: pointer;}
			.close:hover {background: #333;}
			
		/* support form */
		#supportForm {width: 50%; border: none; padding: 2%; border: 1px solid #ccc; float: left; margin: 0px 5% 0px 0px;}
			#content #supportForm .col {width: 100%; margin: 0;}
				#content #supportForm .col input[type="submit"] {float: right;}
					#content #supportForm ul {list-style: none; margin: 0; padding: 0;}
		
		/* validation error messages */
		.errorMessage {color: #900; padding: 10px 0px 10px 0px; border: 1px solid #900; font-size: 0.8em; margin: 0px 0px 10px 0px;}
			.errorMessage p, .errorMessage ul {margin: 10px 20px 10px 20px; line-height: 180%;}
		label.error {color: #900 !important;}
		input.error, select.error, textarea.error {background: #cc6666 !important; color: #fff !important;}

/* banner */
#banner {text-align: center; width: 100%; overflow: hidden; position: relative; height: 330px; z-index: 10; clear: both;}
	#banner #theImage {position: relative; display: block; margin: auto; z-index: 15; width: 100%; background-repeat: no-repeat; background-position: center; height: 330px; background-color: #efefef;}
	#banner .container {z-index: 20; top: -330px; text-align: left;}
	#banner .container.controls {top: 0px; height: 330px; background: none;}
	.flexslider .slides { position:relative; z-index:1000; }
	#banner .flex-viewport {top: -330px;}
	#banner .flex-active {background: #FF760B; border-color: #FF760B;}
		#banner .container #leftBlock {width: 100%; height: 330px; position: absolute; left: -100%; top: 0px; background: #efefef;}
		#banner .container #rightBlock {width: 100%; height: 330px; position: absolute; left: 100%; top: 0px; background: #efefef;}
		#banner .container #text {padding-top: 40px; z-index: 20; color: #fff; width: 50%; text-align: left; height: 330px; float: left;}
			#banner .container #text h1 {background: url(/images/black-80.png); padding: 20px; font-size: 1.8em; font-weight: bold; line-height: 150%; letter-spacing: -1px; margin: 20px 0px 0px 0px;}
			#banner .container #text a {float: left; display: block; color: #fff; padding: 10px 20px 10px 20px; width: 150px; text-transform: uppercase;}
	/* sitewide banner */
	#banner.sw {background: #c2c2c2; height: auto;}
		#banner.sw .container {background: #333; color: #fff; top: 0px;}
			#banner.sw .container img {float: left; width: 30%}
			#banner.sw .container #text {width: 96%; margin: 0px; padding: 2%; float: right; height: auto;}
				#banner.sw .container #text h1 {background: none; margin: 0; padding: 0;}
				#banner.sw .container #text p {line-height: 150%; font-size: 0.8em; margin: 15px 0px 0px 0px;}
				#banner.sw .container #text ul {list-style: none; margin: 15px 0px 0px 0px;}
					#banner.sw .container #text ul li {padding: 10px 0 10px 40px; clear: both; font-size: 0.9em;}
					#banner.sw .container #text ul li img {float: left; margin: 0 0 0 -40px; width: auto;}
				#banner.sw .container #text a {margin: 0px 0px 20px 0px;}
				
/* content */
#content {padding: 0px 0px 20px 0px;}
	#content h2 {letter-spacing: -1px; font-weight: bold; font-size: 1.5em;}
	#content p, #content ul, #content ol {margin: 1em 0px 1em 0px; line-height: 150%; font-size: 0.9em;}
	
#content .col {float: left; width: 20%; padding: 0px 5% 0px 0px;}
	#content .col ul, #content .col ol {list-style: none;}
	#content .col h2 {border-bottom: 1px solid #ccc; padding: 0px 0px 20px 0px;}
	#content .col h3 {color: #ff760b; margin: 10px 0px 0px 0px;}
		#content .col ul li {background: url(/images/icon-arrow-black-50.png) no-repeat left; padding: 1px 0px 1px 20px; font-size: 0.8em;}
		#content .col ul {margin: 0px;}
		#content .col nav ul li {display: block; background: url(/images/icon-arrow-black-50.png) no-repeat right; border-bottom: 1px solid #ccc; line-height: 150%; padding: 10px 0px 10px 0px;}
			#content .col nav ul li a {display: block; color: #555; min-height: 30px; padding-right: 40px;}
				#content .col nav ul li.managed-helpdesk-services a {background: url(/images/icon-managed-helpdesk-services.png) no-repeat left; padding-left: 40px;}
				#content .col nav ul li.self-service-portal a {background: url(/images/icon-self-service-portal.png) no-repeat left; padding-left: 40px;}
				#content .col nav ul li.support-services a {background: url(/images/icon-support-services.png) no-repeat left; padding-left: 40px;}
				#content .col nav ul li.business-support-portal a {background: url(/images/icon-business-support-services.png) no-repeat left; padding-left: 40px;}
				#content .col nav ul li.outsourcing a {background: url(/images/icon-outsourcing.png) no-repeat left; padding-left: 40px;}
				#content .col nav ul li a:hover {color: #000;}
	/* testimonials */
	#content .col .item .content_Testimonials {background: url(/images/icon-quote.gif) no-repeat right top; padding: 0px 40px 0px 0px;}
		#content .col .item .content_Testimonials p {font-style: italic !important;}
		#content .col .item h2 {display: none;}
		#content .extra {font-weight: bold;}
			#content .col .item p.extra {font-size: 0.8em;}
	
	/* side navigation */
	#sideNav {float: left; width: 25%; padding: 0;}
		#sideNav h2 {border-bottom: 1px solid #ccc; padding: 0px 0px 20px 0px;}
			#sideNav ul {margin: 0; padding: 0; list-style: none;}
				#sideNav li {display: block; background: url(/images/icon-arrow-black-50.png) no-repeat right; }
					#sideNav li a {color: #333; display: block; border-bottom: 1px solid #ccc; line-height: 150%; padding: 10px 24px 10px 0px;}
						#sideNav li a.menuactive {background: url(/images/icon-arrow-black-50.png) no-repeat right; color: #000; padding: 10px 24px 10px 0; font-weight: bold;}
					#sideNav li a:hover {color: #000;}
	
	/* main content */
	#mainContent {float: right; width: 72%}
		#mainContent h2.pageTitle {border-bottom: 1px solid #ccc; padding: 0px 0px 20px 0px; margin: 0 0 20px 0;}
		#mainContent ul {list-style: square;}
			#mainContent ul li {margin: 0 0 0.5em 1.2em;}
			#mainContent ul.pageMenu li {margin: 0 0 0.2em 1.2em; color: #9ab4bc;}
			#mainContent ul.iconlist {list-style: none;}
				#mainContent ul.iconlist li {padding: 10px 0 10px 40px; min-height: 30px; border-bottom: 1px dotted #ccc; margin: 0 0 10px 0;}
					#mainContent ul.iconlist li img {float: left; display: block; margin-left: -40px;}
		#mainContent em {font-style: italic;}
		#mainContent a {color: #9ab4bc;}
			#mainContent a:hover {color: #000;}
		#mainContent .clientLogo {display: block; float: left; width: 20%; margin: 0 5% 5% 0;}
		
	/* case study menu */
	.caseStudyMenu {list-style: none; margin: 0; padding: 0px;}
		#mainContent ul.caseStudyMenu li {float: left; display: block; width: 20%; margin: 0 5% 5% 0; font-weight: bold;}
			.caseStudyMenu li a {display: block; width: 100%;}
			.caseStudyMenu li img {display: block; width: 100%; border: 1px solid #efefef;}
			
	/* news */
	.item_News {border-bottom: 1px dotted #ccc; padding: 0 0 15px 0; margin: 0 0 15px 0;}
		.item_News p.postDate {display: block; float: left; padding: 3px; background: #eeeeee; color: #666; font-size: 0.8em; margin: 0 0 10px 0;}
		.item_News .content {clear: both;}
	
/* lines */
.line {height: 4px; width: 25%; display: block; float: left; margin-bottom: 20px;}
	.line.blue {background: #9ab4bc;}
	.line.brown {background: #74390e;}
	.line.orange {background: #e96e12;}
	.line.black {background: #000;}

/* footer */
#footer {position: relative; clear: both; background: url(/images/footer-bg.gif); padding: 20px 0px 20px 0px; overflow: hidden;} 
	#footer ul, #footer ol {list-style: none;}
	#footer .col {width: 20%; float: left; padding: 0px 5% 0px 0px;}
		#footer .col h2 {color: #fff; font-weight: bold; font-size: 1.2em; margin: 0px 0px 12px 0px;}
		#footer .col p {font-size: 0.8em; line-height: 150%;}
			#footer .col .tel {font-weight: bold; font-size: 1.4em; margin: 20px 0px 0px 0px;}
		#footer .col nav a {display: block; margin: 0px 0px 5px 0px; color: #000; font-size: 0.8em; background: url(/images/white-20.png); padding: 5px;}
			#footer .col nav a:hover {background: url(/images/white-40.png);}
	#footer #mailingList {background: url(/images/black-20.png); height: 30px; line-height: 30px; margin-bottom: 20px; position: relative;}
		#footer #mailingList input {background: none; border: none; height: 30px; line-height: 30px;}
		#footer #mailingList input[type="text"] {width: 65%; font-size: 0.8em; padding: 0px 10px 0px 10px; outline: none; float: left;}
		#footer #mailingList input[type="submit"] {width: 18%; min-width: 30px; color: #fff; float: right; background: url(/images/black-20.png); height: 30px; line-height: 20px; font-size: 0.8em; cursor: pointer; margin: 0px; padding: 5px 3% 5px 3%;}
	#footer .col .partner {float: left; display: block; margin: 5px 5px 10px 0px;}
	#footer .col .isoImage {border: 1px solid #666;}

#footer-ext a {color: #fff; text-decoration: none; font-size:15px;}

	
@media screen and (max-width: 960px) 
{
	.container {width: 98%;}
}
@media screen and (max-width: 900px) 
{
	form.form .col p {margin: 0px;}
	form.form .col p input[type="text"], form.form .col p label, form.form .col p select, form.form .col p textarea {width: 94%; padding: 3%; clear: both;}
	form.form input[type="submit"] {margin: 20px 0px 0px 0px;}
}
@media screen and (max-width: 840px) 
{
	#topNav {clear: both; position: relative; width: 100%;}
}
@media screen and (max-width: 800px) 
{
	#content .col, #footer .col {width: 45%;}
		#content .col:nth-child(odd), #footer .col:nth-child(odd){clear: both;}
}
@media screen and (max-width: 600px) 
{
	#banner .container #text h1 {font-size: 1.2em;}
	#topNav li {display: block; width: 100%; border: none;}
		#topNav li a {padding: 10px; border: none; border-bottom: 1px dotted #ccc;}
			#topNav li.parent:hover a {border-top: none;}
			#topNav li a:hover, #topNav li:hover a {background: #eeeeee; border-top: none;}
		#topNav li ul {display: block; position: relative; width: 100%; padding: 0; margin: 0; border: 0;}
			#topNav li ul li a, #topNav li:hover ul li a {padding: 10px 10px 10px 30px; background: url(/images/icon-arrow-black-50.png) no-repeat 10px;}
				#topNav li ul li a:hover {background-color: #eeeeee;}
	#sideNav {font-size: 0.8em;}
}
@media screen and (max-width: 500px) 
{
	#contactInfo form.form, #contactInfo #address {width: 100%; padding: 0; margin: 0; border: 0;}
		#contactInfo #address {border-top: 1px solid #ccc; margin: 20px 0px 0px 0px;}
		#contactInfo #address p {text-align: left;}
			#contactInfo #address p strong {display: block; float: none;}
	#downloadForm .col {width: 100%; clear: both; margin: 0 0 15px 0;}
	#topBar a.button {width: 96%; padding: 3px 2% 3px 2%; clear: both; margin: 0px 0px 10px 0px;}
	#search {width: 96%; padding: 3px 2% 3px 2%; clear: both;}
	#sideNav {font-size: 0.7em;}
}
@media screen and (max-width: 400px) 
{
	#banner .container #text a {font-size: 0.7em;}
	#content .col, #footer .col {width: 100%; margin: 15px 0px 0px 0px;}
}

/* TINY MCE */
#tinymce p, #tinymce ul, #tinymce ol, #tinymce h1, #tinymce h2, #tinymce h3, #tinymce h4, #tinymce h5 {margin: 0.5em 0 0.5em 0; line-height: 150%;}
	#tinymce h1 {font-size: 2.2em;}
	#tinymce h2 {font-size: 1.8em;}
	#tinymce h3 {font-size: 1.4em;}
	#tinymce h4 {font-size: 1em;}
	#tinymce h5 {font-size: 0.8em;}
	#tinymce p, #tinymce ul, #tinymce ol {font-size: 12px;}
	#tinymce ul {list-style: bullet !important; padding: 0 0 0 1em; margin: 0.5 0 0.5em 1em;}
		#tinymce ul li {margin: 0 0 0.5em 0;}
	#tinymce em {font-style: italic;}
	#tinymce .leftImg {float: left; margin: 0 0 15px 15px;}
	#tinymce .rightImg {float: right; margin: 0 15px 15px 0px;}
	
	.page-thanks #sideNav {display: none;}
	.page-thanks #mainContent {width: 100%;}


/* Video */ 

	#webvideo {display: none !important;}
	.page-home #webvideo,
	.page-managed-helpdesk-services 
        #webvideo {display: block !important;}