/*
==========================================================================================================
Filename:	xi.style.css
Purpose:	template stylesheet
Dependencies: load_css.cfm
Date:	2010-04-01
Author:	Stephen M. Carlson, XI Interactive, Inc. - http://www.xiinteractiv.com
Revision history: 	
==========================================================================================================
*/
/* colors
06BCE3 med blue logo
BEE3EC  light blue

*/
@charset "utf-8";
body { 
	margin:0; 
	padding:0; 
	width:100%; 
	background:#fff;
	color:#7d7d7d;
	}
html { 
	padding:0; 
	margin:0;
	}

/* main - main container for all of the page */
#main {
	width:100%; 
	padding:0; 
	margin:0 auto; 
	background: #ebebeb; 
	border:0px dotted red;
	}

/********** template headers **********/
#header1 { /*top bar with logo and nav*/
	background:url(../_images/header_bg.gif) top repeat-x; 
	padding:0; 
	margin: auto; 
	border:0px dotted red;
	}
#header1 #logo-nav-bar {
	margin:0 auto; 
	width:960px; 
	padding:0; 
	border:none;
	border:0px dotted yellow;
	}
#header1 #logo-nav-bar #logo { 
	float:left; 
	padding:0; 
	margin:0; 
	width:181px;
	}
#header2 {  /*second bar with pageTitle */
	background: url(../_images/sub_text_bg.jpg) top center repeat-x; 
	padding:0; 
	margin:0; 
	height:140px;
	border:0px dotted red;
	}
#header2 #pageTitle { 
	width:960px; 
	margin:0 auto; 
	padding:0;
	border:0px dotted yellow;
	}
#header2 #pageTitle img { 
	float:right; 
	padding:50px 0 0 0; 
	margin:0;
	}
#header2 #pageTitle h1 { 
	font: normal 40px Arial, Helvetica, sans-serif; 
	color:#7d7d7d; 
	padding:50px 0 0 15px; 
	margin:0;
	}

/* search_blog */
#header3 { background:#f6f6f6; margin:0; padding:0;border:0px dotted blue;}
#header3 #header3-block { width:960px; margin:0 auto; padding:0;}
#header3 h2 { font: bold 14px Arial, Helvetica, sans-serif; color:#9d9d9d; padding:10px 0 15px 15px; margin:0;}
#header3 h2 span { font: normal 11px Arial, Helvetica, sans-serif; color:#afafaf;}
#header3 h4.pageQuote { font:normal 14px Arial, Helvetica, sans-serif; color:#9d9d9d; padding:10px 0 15px 15px; margin:0;}
#header3 h4 span.pageQuoteAuthor { font: normal 11px Arial, Helvetica, sans-serif; color:#afafaf;}
/* search */
#header3 .search { padding:10px 20px 0 0; margin:0; width:250px; float:right;}
#header3 .search form { display:block; float:right; padding:0;}
#header3 .search span { display:block; float:left; background: url(../_images/search_bg.gif) left top no-repeat; width:200px; padding:0 5px; height:33px;}
#header3 .search form .keywords { width:149px; line-height:17px; height:17px; float:left; background:none; border:0; padding:8px 2px; margin:0; font:normal 12px Arial, Helvetica, sans-serif; color:#000;}
#header3 .search form .button { float:left; margin:0; padding:0;}

/* header box */
.header_box { background:#f8f8f8 url(../_images/slide_bg_line.gif) top repeat-x;}
.header_box_resize { background:url(../_images/slide_bg.jpg) center top no-repeat; height:472px; width:960px; margin:0 auto;}
.slider_cu3er { width:576px; float:left; padding:74px 0 0 24px;}
#cu3er-container { width:537px; outline:0; height:361px;}
.header_text { width:345px; float:right; padding:120px 0 0 15px;}
.header_text h2 { padding:10px 0; margin:0; font:normal 32px/1.2em Arial, Helvetica, sans-serif; color:#1a1919;}
.header_text p { padding:10px 0; margin:0; font:normal 12px/1.6em Arial, Helvetica, sans-serif; color:#272727;}


/****Recent **/
.Recent  { width:300px; float:left; padding:10px; margin:10px 0;}
.Recent p{ font:normal 11px Arial, Helvetica, sans-serif; color:#5f5f5f; line-height:1.8em; padding:5px 5px; margin:0;}
.Recent p span { color:#2a2a2a; font: bold 14px Arial, Helvetica, sans-serif;}
.Recent img { float: left; margin:10px 15px; padding:0;}
/********** block index **********/
.body { margin:0; padding:0; background: #fff; border-top:1px solid #eaeaea;}
.body_resize { width:960px; margin:0 auto; padding:0;}
/*.body_resize sub_text_resize*/ 
h1.pageTitle1 {
	/*width:630px; font:bold 28px Arial, Helvetica, sans-serif; color:#06BCE3;text-shadow: white 0.1em 0.1em 0.2em; padding:50px 0px 5px 0px; margin:0 0 0 0; /*text-transform:lowercase; */border:0px solid red;	*/
	font: normal 40px Arial, Helvetica, sans-serif; color:#7d7d7d/*1a1919*/; padding:50px 0 0 15px; margin:0;
	}


.body_resize h2 {font:normal 24px Arial, Helvetica, sans-serif; color:#7d7d7d; padding:5px 5px; margin:0;
	/* font:normal 24px Arial, Helvetica, sans-serif; color:#06BCE3; padding:5px 5px 5px 0; margin:0;
	 * 
	 */}
.body_resize h2 a { font:normal 24px Arial, Helvetica, sans-serif; color:#06BCE3; padding:5px 5px 5px 0; margin:0;}
.body_resize p td { font:normal 12px Arial, Helvetica, sans-serif; color:#7d7d7d; padding:10px 5px; margin:0; line-height:1.8em;}
.body_resize li { font:normal 12px Arial, Helvetica, sans-serif; color:#7d7d7d;  line-height:1.8em;}
.body_resize p span { color:#45b8c3; font: normal 11px Arial, Helvetica, sans-serif;}
.body_resize a { color:#06BCE3; text-decoration:none; font: normal 12px Arial, Helvetica, sans-serif;}
.body_resize img { margin:10px auto; padding:0;}
.body_resize img.floated { float:left; margin:0px 10px 10px 0px; padding:0;}

/* right column ***************************/
#right  { width:300px; float:right; margin:0; padding:10px 10px;border-left:0px solid #272727; 
	background-color:#fff/*f6f6f6*/;}
 #right  ul {
 	list-style-type:none;
	}
#right  ul li {
 	border-bottom:1px solid #eaeaea;;
	background-color:#fff;
	list-style-type:none;
	}
#right  ul li ul li {
 	border-bottom:0px solid blue;
	background-color:#f6f6f6;
	}
/* left column ***************************/
#left  { 
	width:619px; 
	float:left; 
	margin:0; 
	padding:10px 10px; 
	border-right:1px solid #eaeaea; 
	color:#7d7d7d;
	} 
#left h3 {
	font:normal 20px Arial, Helvetica, sans-serif ; 
	color:#7d7d7d/*06BCE3*/; 
	padding:5px 5px; 
	margin:0; 
	text-transform:lowercase;
	}
#left h4 {
	font:normal 14px Arial, Helvetica, sans-serif; 
	color:#7d7d7d; 
	padding:5px 5px 5px 0; 
	margin:0;
	}
#left p {
	font:normal 12px Arial, Helvetica, sans-serif; 
	color:#7d7d7d; 
	padding:10px 5px; 
	margin:0; 
	line-height:1.8em;
	}
#left .breadcrumb-right {
	float:right;
	width:250px;
	height:200px;
	margin:0 0 10px 10px;
	}
#left ul li {
	list-style-image: url('../_images/bullet-arrow-2.png');
	color:inherit;
	}
#left ul li a {
	color:inherit;
	text-decoration:none:
	}
#left ul li a b {
	color:#06BCE3;
	text-decoration:none:
	}
/********* case studies  ************/
#left .caseStudyRow {
	width:620px;
	height:auto; 
	margin:0px 0px 20px 0px; 
	padding:0px;
	border:0px dotted blue;
	}
#left .caseStudyItem { 
	width:290px; 
	float:left; 
	margin:0; 
	padding:0px 15px 10px 0px; 
	border:0px dotted red;
	}
#left .caseStudyItem .caseStudyPhoto {
	float:left;
	border:0px dotted green;
	}
#left .caseStudyItem .caseStudyPhoto img {
	width:100px;
	border:none; 
	margin:0 20px 5px 0;
	float:right;
	}
#left .caseStudyItem p.grey { 
	color:#5f5f5f;
	}
#left .caseStudyItem p {
	color:#5f5f5f; 
	margin:0px 0px 0px 0px;
	padding:0px;}
#left .caseStudyItem h4.title {
	font:normal 16px Arial, Helvetica, sans-serif; 
	color:#06BCE3; 
	padding:0px 5px 5px 0; 
	margin:0;
	}
#left .caseStudyItem h4.subTitle {
	font:normal 14px Arial, Helvetica, sans-serif; 
	color:#06BCE3; 
	padding:0px 5px 5px 0; 
	margin:0;
	}

.blog p.caseStudyText {color:#5f5f5f; margin:0px 0px 0px 0px;padding:0px;}
.blog { width:280px; float:left; margin:0; padding:0px 10px 10px 0px;}
.blog p.grey { color:#5f5f5f;}



/********** contact form **********/
.form { float:left; width:550px; margin:5px auto; padding:0; background:#f7f7f7; border:1px solid #ececec;}
#contactForm { margin:0; padding:5px 10px;}
#contactForm * { color:#7a7a7a;}
#contactForm form table td.label {
	font-weight:bold;
	width:200px;
	height:30px;
	text-align:left;
	vertical-align:text-top;
	}
#contactForm form table td.field {
	font-weight:normal;
	width:300px;
	vertical-align:text-top;
	font-size:12px;
	}
#contactForm form table td input.contactForm {
	width:300px;
	border:1px solid #06BCE3;
	}
#contactForm form table td textarea.contactForm {
	width:300px;
	border:1px solid #06BCE3;
	}
#contactForm form table td input.btn { 
	width:100px;
	border:0px solid #06BCE3;
	background-color:#06BCE3;
	color:yellow;
	font-size:12px;	
	}
#contactForm ol { margin:0; padding:0; list-style:none;}
#contactForm li { margin:0; padding:0; background:none; border:none; display:block; list-style-type:none;}
#contactForm li.buttons { margin:5px 0 5px 0;}
#contactForm label { float:left; margin:0; width:100px; padding:5px 0; font:bold 12px Arial, Helvetica, sans-serif; color:#747474; text-transform:capitalize;}
#contactForm label span { font:normal 10px Arial, Helvetica, sans-serif;}
#contactForm input.text {float:right; width:420px; border:1px solid #ececec; margin:5px 0; padding:5px 2px; height:15px; background:#fff;}
#contactForm textarea { width:420px; border:1px solid #ececec; margin:10px 0; padding:2px; background:#fff; height:150px;}
#contactForm li.buttons input { padding:3px 0; margin:0 0 0 400px; border:0; color:#FFF;}
p.response { text-align:center; color:#2c2c2c; font:bold 11px Arial, Helvetica, sans-serif; line-height:1.8em; width:auto;}

/*************footer**********/
/*FBG*/
.FBG { margin:0 auto; width:960px; padding:10px 0 0 0;}
.FBG_resize { border-top:1px solid #e9e9e9; background:#f2f2f2; margin:0; padding:0;}
.footer_resize { width:960px; margin:0 auto; padding:10px 0;}
.footer {padding:0;  margin:0; background:#f7f7f7; border-top:1px solid #eaeaea;}
.footer p { font:normal 12px  Arial, Helvetica, sans-serif; color:#747474;}
.footer a { font:normal 12px Arial, Helvetica, sans-serif; color:#747474; text-decoration:none; padding:5px; margin:0;}
.footer p.leftt { text-align:left; width:50%; margin:0; padding:10px 0 0 20px; float:left;} 
.footer p.rightt { text-align:right; width:30%; margin:0; padding:15px 20px 0 0; float:right;} 
p.clr, .clr, .clear { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { clear:both; border-top:1px solid #dfdfdf; padding:0; margin:10px 0; background:none; line-height:0;}

/********** slider **********/
#left .slider { margin:0 auto; padding:0;}
#left .slider div.bord { margin:0 0 0 0; padding:0 0 0 0; width:620px; height:200px;  background:inherit;border:0px solid blue;}
#left .slider div div.block_caption { 
	float:left; 
	width:350px; 
	height:auto; 
	margin:0 0 0 40px; 
	padding:0;
	border:0px solid green;
	}
#left .slider div p.img { float:right; width:200px; padding:0 0 0 0; margin:0 5px 0 0;border:1px solid #666;}
#left .slider div h4 { font:normal 15px Arial, Helvetica, sans-serif; color:#06BCE3; margin:5px 0; padding:0 0 0 0; line-height:1.2em;}
#left .slider div h4 span { font:normal 13px Arial, Helvetica, sans-serif; color:#06BCE3;}
#left .slider div p.list { border-bottom:1px solid #9d9d9d; display:block; 
	font-size:inherit;
	font-family: Tahoma, Geneva, sans-serif;
	color:inherit; /*background:url(../_images/ul_li_java.gif) left no-repeat;*/ 
	padding:0 0 2px 10px; 
	margin:2px 20px 2px 20px; 
	line-height:1.8em;
	}

/********* slider2 ************/
.slider2 {background:#000; margin:0 auto; padding:0; height:120px;}
.slider2_resize { width:955px; margin:0 auto; padding:0; border:1px solid green;}
.slider2_resize h2 { font:bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:40px 0 0 20px; margin:0;}

#slider { margin:0; padding:0; list-style:none; }
#slider ul,
#slider li { margin:0; padding:0; list-style:none; }
/* 
    define width and height of list item (slide)
    entire slider area will adjust according to the parameters provided here
*/
#slider li { width:600px; height:200px; overflow:hidden; padding:0; margin:0 auto; }
p#controls { margin:0; position:relative; }
#prevBtn,
#nextBtn { display:block; margin:0; overflow:hidden; width:58px; height:51px; position:absolute; left:0px; top:-120px; }
#nextBtn { left:600px; }
#prevBtn a { display:block; width:35px; height:34px; background:url(../_images/slider-arrow-prev.png) no-repeat 0 0; }
#nextBtn a { display:block; width:35px; height:34px; background:url(../_images/slider-arrow-next.png) no-repeat 0 0; }

/********* paymentBlock  ************/
.paymentBlock {
	 border:0px dotted purple; 
	 margin:0 0 30px 0;
	 width:inherit;
	 height:auto;
	 font-family:inherit;
	}
.paymentBlock .paymentTitle {
	 border:0px dotted blue;
	 width:inherit;
	 clear:both;
	}
.paymentBlock .paymentLeft {
	margin:0;
	padding:0;
	width:275px;
	float:left;
	border:0px dotted blue;
	}
.paymentBlock .paymentLeft p {
	margin:0;
	padding:0;/*
	text-align:left;
	font-family:inherit;
	font-size:inherit;
	color:red;*/
	}
.paymentBlock .paymentLeft ul {
	margin:0;
	padding:0 0 0 20px;
	}
.paymentBlock .paymentLeft li {
	margin:0;
	padding:0;
	}
.paymentBlock .paymentRight {
	border:0px dotted red;
	width:305px;
	float:right;
	}
.paymentBlock .paymentRight p {
	margin:0;
	padding:0;
	text-align:left;
	font-family:inherit;
	font-size:inherit;
	}
.paymentBlock .paymentRight form select {
	width:300px;
	}
.paymentBlock .paymentRight form input .text {
	width:300px;
	}
.paymentBlock .paymentRight form input.btn { 
	width:250px;
	height:30px;
	border:0px solid #06BCE3;
	background-color:#06BCE3;
	color:#000;
	font-size:12px;
	text-transform:uppercase;	
	margin:10px 0 0 0;
	}
	
/********* clientList  ************/	
#clientList {
	font:inherit;
	}
#clientList .row {
	border:0px dotted blue;
	}
#clientList .row .clientItem {
	width:300px;
	color:inherit;
	text-align:left;
	border:0px dotted red;
	padding:3px 0 2px 0;
	font:normal 12px Arial, Helvetica, sans-serif; color:#7d7d7d;
	}
/********* home callouts  ************/
#callouts {
	margin:20px 0 20px 0;
}
#callouts .calloutItem {
	float:left;
	width:185px;
	height:150px;
	background-color:#666666;
	background-image:url(../_images/callout_bg1.jpg);
	margin:0 10px 10px 0;
	padding:5px 5px;
}	
#callouts .calloutItem h3 {
	font-size:12px;
	font-family:inherit;
	color:#06BCE3;
	padding:5px 5px;
	font-weight:bold;
	}
#callouts .calloutItem p {
	text-align:justify;
	padding:5px 5px;
	color:#fff;
	}