body {
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	color:#eeeeee;
	background:url(../images/bg.jpg) top no-repeat;
	margin:0 auto;
	line-height:16px;
}

a { outline:none; color:#fff; }
img { border:none; }

.imgfloatleft { float:left; }
.imgfloatright { float:right; margin:10px 0 10px 10px; }

h1, h2, h3, h4, h5, ul, li, form, input, p { padding:0; margin:0; list-style:none; }
p { text-shadow:#000 1px 1px 0; }
h1, h2, h3, h4, h5 { color:#fff; }

h1 { font-size:22px; padding:0 0 20px 0; }

#settings {
	width:100%;
	position:absolute;
	background:url(../images/settingsbar-bg.png) 0 0 repeat-x;
}

#settingswrap {
	width:100%;
	position:relative;
}

#settings form {
	width:648px;
	margin:0 auto;
	height:18px;
	text-align:right;
	padding-top:9px;
	display:none;
}

#settings a {
	float:right;
	height:18px; width:18px;
	display:block;
	text-align:left;
	text-indent:-9999px;
	margin-left:3px;
	outline:none;
}

#settings a.green { background:url(../images/green-button.png) top left no-repeat; }
#settings a:hover.green { background-position:right; }

#settings a.orange { background:url(../images/orange-button.png) top left no-repeat; }
#settings a:hover.orange { background-position:right; }

#settings a.blue { background:url(../images/blue-button.png) top left no-repeat; }
#settings a:hover.blue { background-position:right; }

#settings a.pink { background:url(../images/pink-button.png) top left no-repeat; }
#settings a:hover.pink { background-position:right; }

#mysettings-wrap {
	background:url(../images/mysettingsbar-bg.png) top left repeat-x;
	width:100%;
	height:8px;
	position:absolute;
}
#mysettings-wrap .mysettings { width:880px; margin:0 auto; }
#mysettings-wrap .mysettings a {
	cursor:pointer;
	position:relative;
	top:7px;
	float:right;
	text-indent:-9999px;
	z-index:9;
	height:35px;
	width:102px;
	background:url(../images/mysettings.png) bottom right no-repeat;
}
#settings .mysettings a:hover { background:url(../images/mysettings.png) top right no-repeat; }

#outerwrap { width:100%; }

#wrap { width:920px; margin:0 auto; overflow:hidden; }

.logo { padding:43px 0 13px 20px; }

#nav {
	color:#000;
	width:868px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif;
	padding:6px;
	height:25px;
}

#nav ul { position:absolute; z-index:100; }

#nav li {
	float:left;
	width:90px;
	text-align:center;
	line-height:26px;
}

#nav ul li.selected a { color:#fff; font-weight:bold; }

#nav a { color:#000; text-decoration:none; display:block; width:90px; font-weight:bold; }
#nav a:hover { color:#fff;  font-weight:bold; }

#nav #box {
	position:absolute;
	top:6px; left:0;
	z-index:50;
	background:url(../images/hover-bar.gif) top left no-repeat;
	height:25px;
}

#slider-wrap {
	background:url(../images/slider-shadow.jpg) bottom left no-repeat;
	padding:0 20px 39px 20px;
}

#slider { position:relative; width:880px; height:283px; outline:none; }

#slider-wrap ul { width:880px; margin:0 auto; }
#slider-wrap li { width:880px; height:283px; overflow:hidden; position:relative; }
#slider img { }
#slider-wrap p { line-height:20px; position:absolute; top:218px; left:25px; }
#slider-wrap p strong { display:block; font-size:18px; }
p#controls, p#controls2{
	margin:0;
	position:relative;
	left:0;
	top:0;
	} 

#prevBtn, #nextBtn{ 
	display:block;
	margin:0;
	overflow:hidden;
	text-indent:-8000px;		
	width:32px;
	height:65px;
	position:absolute;
	top:-178px;
	}	
#nextBtn{ 
	left:848px;
	}														
#prevBtn a, #nextBtn a{  
	display:block;
	width:32px;
	height:65px;
	background:url(../images/left-slide.png) top left no-repeat;	
	outline:none;
	}	
#nextBtn a{ 
	background:url(../images/right-slide.png) no-repeat 0 0;	
	}

#prevBtn a:hover, #nextBtn a:hover { background-position:bottom left; }


#content { width:880px; margin:0 auto; padding-top:30px; }

.halfwrap, .fullwrap {
	width:435px;
	float:left;
	height:225px;
	border-bottom:1px solid #c8c8c7;
	overflow:hidden;
}
.fullwrap { width:880px; }

.halfwrap p, .fullwrap p { padding:0 20px 15px 0; }
.halfwrap ul { width:440px; position:relative; }
.halfwrap li {
	float:left;
	width:142px;
	padding-left:4px;
}

.halfwrap li a { display:block; height:120px; width:142px; }
.halfwrap li a.basicpackage { background:url(../images/basicpackage.png) top left no-repeat; }
.halfwrap li a:hover.basicpackage { background:url(../images/basicpackage.png) bottom left no-repeat; }

.halfwrap li a.propackage { background:url(../images/propackage.png) top left no-repeat; }
.halfwrap li a:hover.propackage  { background:url(../images/propackage.png) bottom left no-repeat; }

.halfwrap li a.custompackage { background:url(../images/custompackage.png) top left no-repeat; }
.halfwrap li a:hover.custompackage { background:url(../images/custompackage.png) bottom left no-repeat; }


/* == Packages ==*/
.generalservices {
	float:left;
	width:270px;
	overflow:hidden;
	padding:30px 0 0 0;
}
.generalservices h2 { padding-bottom:20px; font-size:17px; }
.generalservices p { width:200px; float:right; }
.generalservices.middle { padding-left:35px; padding-right:35px; }
.generalservices span {
	float:left;
	display:block;
	height:70px; width:70px;
}
.generalservices span.design { background:url(/images/design.png) 0 0 no-repeat; }
.generalservices span.dev { background:url(/images/dev.png) 0 0 no-repeat; }
.generalservices span.cms { background:url(/images/cms.png) 0 0 no-repeat; }

.packages, .packages.hosting { background:url(/images/services-h1.png) top left no-repeat; color:#fff; width:295px; overflow:hidden; float:left; margin-top:30px; }
.packages.hosting { background:url(/images/packages-hosting-h1.png) top left no-repeat; margin-top:0; }
.packages h1 {
	font-size:14px;
	height:70px;
	width:276px;
	padding:23px 0 0 14px;
	font-weight:normal;
}
.packages h1.basic { background:url(/images/basic-package.png) 178px 0 no-repeat; }
.packages h1.pro { background:url(/images/pro-package.png) 178px 0 no-repeat; }
.packages h1.custom { background:url(/images/custom-package.png) 178px 0 no-repeat; }
.packages.hosting h1 { height:22px; }

.packages ul {
	height:288px;
	width:290px;
	overflow:hidden;
	background:url(/images/services-bg.png) top left no-repeat;
}
.packages.hosting ul {
	height:95px;
	width:290px;
	overflow:hidden;
	background:url(/images/services-bg.png) top left no-repeat;
}
.packages ul li {
	float:left;
	color:#fff;
	display:block;
	height:32px;
	padding-left:70px;
	font-size:13px;
	line-height:30px;
}
.packages ul li i { font-size:11px; }

.packages ul li.xhtml { background:url(/images/services/xhtml.png) 25px center no-repeat; }
.packages ul li.website { background:url(/images/services/websiteia.png) 25px center no-repeat; }
.packages ul li.design { background:url(/images/services/design.png) 25px center no-repeat; }
.packages ul li.gallery { background:url(/images/services/gallery.png) 25px center no-repeat; }
.packages ul li.contact { background:url(/images/services/contact.png) 25px center no-repeat; }
.packages ul li.googlemap { background:url(/images/services/googlemap.png) 25px center no-repeat; }
.packages ul li.analytics { background:url(/images/services/analytics.png) 25px center no-repeat; }
.packages ul li.cms { background:url(/images/services/cms.png) 25px center no-repeat; }
.packages ul li.extranet { background:url(/images/services/extranet.png) 25px center no-repeat; }
.packages ul li.domain { background:url(/images/services/domain.png) 25px center no-repeat; }
.packages ul li.email { background:url(/images/services/email.png) 25px center no-repeat; }
.packages ul li.storage { background:url(/images/services/storage.png) 25px center no-repeat; }

#ctas { clear:both; }
#ctas li {
	float:left;
	height:270px;
	width:210px;
	position:relative;
	padding-right:10px;
	border-top:1px solid #000;
	background:url(../images/li-bg.jpg) 0 175px no-repeat;
}

#ctas li.servicesbg a, #ctas li.portfoliobg a, #ctas li.getintouchbg a {
	background:url(../images/services-bg.jpg) bottom left no-repeat;
	height:270px; width:210px;
	display:block;
	text-decoration:none;
}
#ctas li.servicesbg a:hover { background:url(../images/services-bg.jpg) top left no-repeat; }

#ctas li.portfoliobg a { background:url(../images/portfolio-bg.jpg) bottom left no-repeat; }
#ctas li.portfoliobg a:hover { background:url(../images/portfolio-bg.jpg) top left no-repeat; }

#ctas li.getintouchbg a { background:url(../images/getintouch-bg.jpg) bottom left no-repeat; }
#ctas li.getintouchbg a:hover { background:url(../images/getintouch-bg.jpg) top left no-repeat; }

#ctas h2{ position:absolute; top:30px; font-size:18px; }
#ctas p { position:absolute; top:62px; padding-right:10px; }
#whistle h2 { padding:30px 0 15px 0; font-size:18px; }

#whistle {
	width:210px;
	float:left;
	border-top:1px solid #000;
	overflow:hidden;
}

#whistle ul { margin-top:13px; margin-bottom:30px; height:142px; overflow:hidden; }
#whistle li { height:60px; padding:7px 0; }
#whistle li.off { display:none; }
#whistle li strong { color:#fff; display:block; padding-top:2px; }
#whistle li img { float:left; padding-right:5px; }
/*#whistle li.alt { background:url(../images/fade.png) top left no-repeat; }*/

#footer {
	background:url(../images/footer.png) top left repeat-x #000;
	height:62px;
	clear:both;
	margin:0 0 30px 0;
}

#footer a.twitter {
	background:url(/images/twitter.gif) bottom left no-repeat;
	display:block;
	float:right;
	height:23px; width:230px;
	text-decoration:none;
	text-indent:-9999px;
	margin:20px; 
}
#footer a:hover.twitter { background-position:top left; }

#footer .copywrite {
	color:#fff;
	margin:0 auto;
	padding:20px 0 0 15px;
}

#footer .copywrite ul { float:right; }

#footer .copywrite li {
	float:left;
	padding-right:7px;
}

#footer .copywrite a { color:#fff; text-decoration:none; padding-right:7px; }
#footer .copywrite a:hover { text-decoration:underline; }

.port { float:left; padding:14px 0; width:422px; }
.port li {
	background:url(../images/portfolio-shadow.png) bottom left no-repeat;
	height:243px;
	padding-top:15px;
}
	.photo {
		/* relative position, so that objects in it can be positioned inside this container */
		position:relative;
		font-family:arial;	
		
		/* hide those extra height that goes beyong the size of this container */
		overflow:hidden;
		background:#171717;
		border:1px solid #3c3b3b;
		padding:5px;
		width:410px;
		height:210px;
	}	
	
		.photo .heading, .photo .caption {
			/* position inside the container */
			position:absolute;
			background:url(../images/captionbg.png) top left no-repeat;
			height:60px;
			width:408px;

		}
		
		.photo .caption { 		
			/* hide it with negative value */
			/* it's the height of bottom class */
			bottom:-60px;
			left:6px;
		}
		

		/* styling of the classes*/
		.photo .heading a {
			height:60px;
			width:408px;
			color:#26c3e5;	
			top:-50px;
			font-weight:bold;
			display:block;
			padding:5px 0 0 10px;
		}
		
		.photo .caption a{
			height:60px;
			width:408px;
			color:#999;	
			font-size:9px;
			display:block;
			padding:15px 10px 0 15px;
			text-decoration:none;
			font-size:18px;
			font-weight:bold;
		}
		.photo .caption a span {
			display:block;
			color:#eeeeee;
			font-size:11px;
			font-weight:normal;
			padding-top:3px;
		}

/* == Pop up css == */

#contactus {
	background:#000;
	padding:29px;
	width:540px;
}

#contactus a { color:#fff; text-decoration:none; }
#contactus a:hover { text-decoration:underline; }

#contactus form { padding-top:20px; }
#contactus li { width:270px; float:left; height:55px; }
#contactus li span {
	font-size:11px;
	float:right;
	width:175px;
	padding-top:3px;
	display:block;
}

#contactus ul.contactfooter li span { width:auto; float:left; padding:0; }

#contactus li.txteditor {
	width:540px;
	height:130px;
}
#contactus li.txteditor span { width:465px; }

#contactus li label { font-size:13px; float:left; }

#contactus ul.contactfooter { display:block; clear:both; padding-top:23px; }
#contactus .contactfooter { line-height:24px; height:24px; }
#contactus .contactfooter li { padding:0; }
#contactus .contactfooter strong { color:#fff; padding: 0 5px; }
#contactus .contactfooter img { float:left; padding-right:15px; }

.inputbox {
	background:url(../images/input-bg.png) bottom left repeat-x;
	border:1px solid #444444;
	height:20px; width:164px;
	color:#fff;
	float:right;
	padding:4px 5px 0 5px;
	outline:none;
}
.inputbox:focus { background-position:top left; }

.txtarea {
	background:url(../images/txtarea.png) bottom left repeat-x;
	border:1px solid #444444;
	width:454px; height:111px;
	float:right;
	overflow:hidden;
	padding:4px 5px 0 5px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:13px; color:#fff;
	outline:none;
}
.txtarea:focus { background-position:top left; }

.frmsend {
	height:27px; width:52px;
	float:right; cursor:pointer;
	text-indent:-9999px;
}

.unsubscribefrm {
	background:url(/images/emailbg.gif) top left repeat-x;
	width:428px;
	padding:8px 12px; padding-right:0;
	float:left;
	position:relative;
	margin:20px 0;
}

.unsubscribebox {
	border:none; width:317px; height:18px; padding:2px 0 0 9px; float:left;
}

.unsubscribefrm span.errortxt { display:block; top:40px; position:absolute; color:#ff0000; left:0; }