/*======================
	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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
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-weight: inherit;
	font-style: inherit;
	font-size: 12px;
	font-family: Tahoma, Arial, Sans-Serif;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1.3;
	color: black;
	text-align:center; 
	background: #051e35 url(../images/site_background.gif) repeat-x;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/*======================
	HEADER
========================*/
/*
The container div is what sets the width of your content and centers it in the browser. 
Each of your main divs will have a container div.
*/
.container
{
	margin:0 auto; /* Centers the div */
	width:830px; /*This is the width of your website */
	text-align:left; 
}
/*
Notice that the width of header is set to 100%.
This is so that the background will extend to the edge of the browser.
*/
#header
{
	
	float:left; 
	width: 100%; 
	height:90px; 
}
/*
The a element (which is usually an inline element) gets changed to a block element
so that it can easily be positioned. 
*/
#logo
{
	background:url(../images/itrixx.png) no-repeat;
	display:block; 
	position:relative;
	float:left; 
	width:183px; 
	height:90px; 	
}

#headerlink{
	float:right;
	display:block; 
	position:relative;
	top:5px;	
}

#searchbar{
	float:right;
	display:block; 
	position:relative;
	top:5px;
}


.imagealignmiddle{
vertical-align:middle;
}
#introheader
{
	background:url(../images/bg_top.gif) repeat-x;
	display:block;
	position:relative;
	float:left; 
	width:830px; 
	height:265px; 	
	
}
#servicesheader{
	float:left;
	position:relative;
	display:block;
	padding-left:17px;
	padding-bottom:15px;
	padding-right:15px;
	padding-top:10px;
	color:#FFFFFF;
}
#serviceslink{
	float:left;
	position:relative;
	display:block;
	margin:10px 0px 0px 10px;
	}

#social{
	float:left;
	position:relative;
	display:block;
	

}

ul#serviceslink{
	list-style: none;
}
li#serviceslink{
margin:5px 0px 0px 0px;
}
#movie{
	float:right;
	position:relative;
	top:0px;
}

#isystems{
	display:block;
	position:relative;
	float:left; 
	height:149px;
	width:830px;
	background-color:#FFFFFF;
	
}

.ibox{
    background:url(../images/orange_box.gif) no-repeat;
	display:block;
	float:left; 
	width:276px; 
	height:165px; 	
}
.iboxcontent{
	float:left;
	margin:15px 10px 0px 15px;
	color:#FFFFFF;
	height:120px;
}

.iboxlink{
	float:right;
	display:block;
	position:relative;
	width:90px;		
}
#maincontent{
	float:left;
	background-color:#FFFFFF;
	width:830px;
	display:block;
	
}
#fullcontent{
	
	background-color:#FFFFFF;
	width:790px;
	display:block;
	position:relative;
	margin: 10px 20px 10px 20px;
	color:#2E2E2E;
	
}

#containerhome{	
	width:250px;	
	padding:10px;
	vertical-align:text-top;
	display:block;
	position:relative;
	float:left; 
}
#maincontenthome{
	
	float:left;
	width:540px;
	color:#2E2E2E;
	vertical-align:top;
}
/*======================
   EVENTS
========================*/
#eventcontent{	
	width:250px;	
	padding:10px; 
	display:block;
	position:relative;
	float:left; 
}
/*
Each event should have some space below it
*/
.event
{
	float:left; 
	margin-bottom:10px;	
	width:250px;
	text-align:justify;
	
}
/*
Each event div has a title with a calendar icon. 
*/
.event span 
{ 
	background:url(../images/calendar.png) no-repeat; 
	display:block; 
	padding: 2px 0 2px 20px; 
	font-size:10px; 
	color:#717171; 	
}
.event a
{
	display:block; 
	margin-bottom:7px;	
}
/*
We're going to make the news text smaller and 
lighter because we want more emphasis on the title. 
*/
.event p
{ 
	font-size:10px; 
	color:#4a4a4a; 
}
#moreeventslink{
	float:left;
	background-color:#FFFFFF;
	width:790px;
	display:block;
	position:relative;
}	
#newevents{
	float:left;
	width:50px;
	display:block;
	position:relative;
}	
#oldevents{
	float:right;
	width:25px;
	display:block;
	position:relative;
}	
/*======================
   End of EVENTS
========================*/

#footerborder{
	background:url(../images/footer.gif) no-repeat;
	display:block;
	position:relative;
	float:left;
	height:16px;
	width:830px;	
}

#footer{
	display:block;
	position:relative;
	float:left;
	width:830px;
	height:50px;	
}
#footerlinks{
	display:block;
	position:relative;
	float:left
	height:100px;
	width:830px;
	text-align:center;
}

/*********************************/	
/*Main Navigation Bar Starts here*/
/*********************************/	
	#navBarContainer{
		width: 830px;
		height: 44px;
		margin: 0 auto;
		position:relative;
		display:block;
		float:left; 						
	}
	ul#navBar{
		width: 830px;
		height: 44px;
		margin: 0px auto;
		list-style: none;
	}
	ul#navBar li{  
		 display: inline;  
	}
	ul#navBar li a{
		height: 44px;
		float: left;
		text-indent: -9999px;
	}
	
	ul#navBar li#navBarITRIXXCurrent a{
		width: 120px;
		background: url(../images/navigation.png) no-repeat 0px -44px;
	}
	ul#navBar li#navBarITRIXX a{
		width: 120px;
		background: url(../images/navigation.png) no-repeat 0px 0px;
	}
	ul#navBar li#navBarITRIXX a:hover{
		background-position: 0 -44px;
	}
	ul#navBar li#navBarITRIXX a:active{
		background-position: 0 -88px;
	}
	
	ul#navBar li#navBarIMCurrent a{
		width: 234px;
		background: url(../images/navigation.png) no-repeat -120px -44px;
	}
	ul#navBar li#navBarIM a{
		width: 234px;
		background: url(../images/navigation.png) no-repeat -120px 0px;
	}
	ul#navBar li#navBarIM a:hover{
		background: url(../images/navigation.png) no-repeat -120px -44px;
	}
	ul#navBar li#navBarIM a:active{
		background: url(../images/navigation.png) no-repeat -120px -88px;
	}
	
	ul#navBar li#navBarGalleryCurrent a{
		width: 156px;
		background: url(../images/navigation.png) no-repeat -354px -44px;
	}	
	ul#navBar li#navBarGallery a{
		width: 156px;
		background: url(../images/navigation.png) no-repeat -354px 0px;
	}
	ul#navBar li#navBarGallery a:hover{
		background: url(../images/navigation.png) no-repeat -354px -44px;
	}
	ul#navBar li#navBarGallery a:active{
		background: url(../images/navigation.png) no-repeat -354px -88px;
	}
	
	ul#navBar li#navBarClientsCurrent a{
		width: 155px;
		background: url(../images/navigation.png) no-repeat -510px -44px;
	}
	ul#navBar li#navBarClients a{
		width: 155px;
		background: url(../images/navigation.png) no-repeat -510px 0px;
	}
	ul#navBar li#navBarClients a:hover{
		background: url(../images/navigation.png) no-repeat -510px -44px;
	}
	ul#navBar li#navBarClients a:active{
		background: url(../images/navigation.png) no-repeat -510px -88px;
	}
	
	ul#navBar li#navBarContactusCurrent a{
		width: 165px;
		background: url(../images/navigation.png) no-repeat -665px -44px;
	}
	ul#navBar li#navBarContactus a{
		width: 165px;
		background: url(../images/navigation.png) no-repeat -665px 0px;
	}
	ul#navBar li#navBarContactus a:hover{
		background: url(../images/navigation.png) no-repeat -665px -44px;
	}
	ul#navBar li#navBarContactus a:active{
		background: url(../images/navigation.png) no-repeat -665px -88px;
	}
/*********************************/		
/*End of navigatoin css here*/
/*********************************/	


/*********************************/		
/*textbox*/
/*********************************/	

.tb6 {
	border: 1px solid #CCCCCC;
	width: 300px;
}
.gallery {
				overflow:auto;
				zoom:1;
				width:776px;				
			}
			.gallery a {
				display:block;
				float:left;
				margin:5px;
				opacity:0.87;
				text-align:center;
			}
			.gallery a:hover {
				opacity:1;
			}
			.gallery a img {
				border:none;
				display:block;
			}
			.gallery a#vlightbox{display:none}
			
/*********************************/		
/*round box*/
/*********************************/	
#affiliates{
	display:block;
	position:relative;
	float:left;
	left:250px;
	
	width:830px;
	height:50px;	
}
.curvedBox
{
width:330px;
}
.curvedBox .r1, .curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
background-color:#fff;
display:block;
overflow:hidden;
height:1px;
font-size:1px;
}
.curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
border-width:0 1px;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.curvedBox .r1 {margin:0 6px;}
.curvedBox .r2 {margin:0 3px;}
.curvedBox .r3 {margin:0 2px;}
.curvedBox .r4 {margin:0 1px;height:2px;}

.curvedBox .content
{
background:#fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
padding:0 5px;
}	
#myGallery
{
	text-align: left;
	margin: 0 auto;
}
