/* CSS Document */

body{
margin:0 auto;
padding:0;
background-image:url(../images/background.jpg);
background-repeat:repeat-x;
font:13px Arial, Helvetica, sans-serif;
color:#666666;}

#top-bar{
height:251px;
}


#top-bar h1{
float:right;
margin:10px 0 0 0;
padding:0;
width:300px;
position:relative;
font:13px Arial, Helvetica, sans-serif;
font-weight:bold;
}

.topline{
float:right;
margin:20px 0 0 450px;
padding:0;
width:450px;
height:auto;
position:absolute;
font:18px Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;}

.logo{
float:left;
position:absolute;
height:65px;
width:129px;
margin:5px 0 0 30px;}

.ilogo{
float:left;
padding:85px 0 0 30px;
position:absolute;}


#orange{
margin:1px 0 0 0;
padding:0;
height:92px;
background-image:url(../images/ornge-grad.jpg);}

#orange h1{
margin:0;
width:500px;
padding:20px 0 0 150px;
font:18px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#000000;}


#call{
	float:right;
	width:250px;
	height:30px;
	font:15px Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#000000;
	padding:0;
	margin:20px 0 0 0;
}

#call a{
color:#000000;}
#call h1 a{
color:#ffffff;}
#call h1 a:hover{
color:#000000;}
#call a:hover{
color:#ffffff;}
#call h1{
background-image:url(../images/click.png);
background-repeat:no-repeat;
margin:5px 0 0 0;
padding:8px 0 0 10px;
width:266px;
height:35px;
font:15px Arial, Helvetica, sans-serif;
color:#ffffff;
font-weight:bold;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}


#home-boxes{
height:225px;
margin:15px 0 0 0;
padding:0;}

#home-boxes h2{
background-image:url(../images/arrow.gif);
background-repeat:no-repeat;
background-position:top left;
height:22px;
width:auto;
margin:0;
padding:2px 0 0 30px;
font:15px Arial, Helvetica, sans-serif;
color:#000000;
font-weight:bold;}



			.boxgrid h3{ margin: 5px 5px 0 10px; padding:0;color:#e9e9e9; font:12pt Arial, sans-serif; letter-spacing:0px; font-weight: bold;
			text-transform:uppercase;}
			
			.boxgrid{ 
				width: 215px; 
				height: 154px; 
				margin:10px 12px 0 12px; 
				float:left; 
				background:#161613; 
				border: solid 1px #e9e9e9; 
				overflow: hidden; 
				position: relative; 
			}
				.boxgrid img{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0; 
				}
				.boxgrid p{ 
					padding: 0 10px 10px 10px; 
					color:#afafaf; 
					font-weight:bold; 
					font:11px "Lucida Grande", Arial, sans-serif; 
				}
				
				.boxgrid p a{color:#F9B537;font-weight:bold;margin:10px 0 0 0;font:12px "Lucida Grande", Arial, sans-serif; }
				
			.boxcaption{ 
				float: left; 
				position: absolute; 
				background: #666666; 
				height: 100px; 
				width: 100%; 
				opacity: .8; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 			}
 					.captionfull .boxcaption {
 					top: 10;
 					left: 0;
 				}
 				.caption .boxcaption {
 					top: 400;
 					left: 0;
 				}
 				
			h3 a{}


		/* ---- end elements ---- */
		
		/* --- Navigation block -----------*/

#navigation {
	float:left;
	width:270px;
	padding:0;
	margin-right:0;
	background-color:#fafafa;
}

#navigation h2{
margin:0 auto ;
padding:5px 0 0 20px;
font:15px Arial, Helvetica, sans-serif;;
color:#000000;
width:220px;
background-image:url(../images/orangearrow.jpg);
background-repeat:no-repeat;
background-position:center left;
font-weight:bold;}

/* ---------------------------------------------
NAV.CSS
-----------------------------------------------*/

#navigation ul.primary {
	margin-bottom:15px;
	padding:10px 0 5px 15px;
	
}

#navigation a { 
	color:#818181; 
} 

#navigation a:hover { 
	text-decoration:none;
} 

#navigation ul li a {
	margin-bottom:12px;
	display:block;
	width:220px;
	height:11px;
	padding:5px 0 5px 0;
	border-bottom:1px solid #e4e4e4;
}

#navigation ul li ul {
	display:none;
}

#navigation ul li a.acc{
	margin-bottom:10px;
}

#navigation ul li ul li a {
	color:#818181;
	text-decoration:none;
}



#navigation ul li a.scrolling {
	color:#FEA904;

}

#navigation ul li{
	display:inline;
}



#navigation ul li a strong{
	color:#000000;
	font-weight:normal;
}






/* --- Dotted List styles -----------*/

ul.list {
	margin:10px 0 20px 0;
}

ul.list li {
	border-bottom:1px dotted #666;
	padding:5px 0;
	color:#FFF;
}

/* ---------------------------------------------
MAIN SLIDING CONTENT AREAS
-----------------------------------------------*/

/* --- This wrapper goes around all the sliding divs -----------*/

#content {
	float:left;
	display:inline;
	width:480px;
	overflow:hidden;
	position:relative;
	height:300px;
	z-index:50;
}

/* --- This controls each main horizonal section -----------*/
					
.section {
	width:500px;
	position:relative;
	overflow:hidden;
	z-index:50;
}

/* --- Each sub content div -----------*/

#web-designing, #web-development, #seo, #internet-marketing, #social-networking, #open-source, #cms {
	float:left;
	width:450px;
	height:300px;
	padding:0 0 0 25px;
	text-align:justify;
}

#web-designing{
	padding-top:0;
}


#designbar{
margin:10px 0 0 0;
background-color:#ffffff;}


/* ---------------------------------------------