@charset "utf-8";

/* CSS Document */



*{margin:0px;padding:0px;}

img{margin:0px;padding:0px; border:0px;}

body{ font-family:Arial,Tahoma;font-size:11px; background:#050F28 url(images/bg.jpg) top repeat-x;margin:0px;padding:0px;color:#666; }



#maincontent{margin:0 auto;padding:0px;width:850px;}



/*Header style*/

#header{width:850px;height:75px;margin:16px 0px 0px 0px;background:url(images/headerbg.jpg) top repeat-x;}

#header .logo{float:left;margin:0px;padding:0px;}

#header .content{float:right;margin:7px 12px 4px 0px;padding:0px;}

.content #social{margin:0px;padding:0px;float:right;}

#social span{ padding-right:7px;}

.content #address{margin:0px;padding:0px; color:#fff; text-align:right; font-size:9px; padding-bottom:2px; font-family:Arial;font-size: 10pt;}



/*Middle style*/

#middle{width:850px;height:285px;}

#menubar{margin:0px;padding:0px;background:url(images/menubar.jpg) repeat-x;height:29px;}

#separator{margin:0px;padding:0px;background:url(images/menusep.jpg) repeat-x;height:10px;}

#banner{margin:0px;padding:0px;background:url(images/banner_bg.png) repeat;width:850px;height:246px;}



ul#nav{

	

	margin:0;

	padding:0;

	padding-bottom:5px;

	width:auto;

	position:relative;

	display:block;

	height:28px;

	font-family:Arial;

	font-size:10px;

	text-transform:uppercase;

	/*border:#000 1px solid;*/

}

ul#nav li{

	display:block;

	float:left;

	margin:0;

	padding:0;

	

}

ul#nav li a{

	display:block;

	float:left;

	color:#ccc;

	text-decoration:none;

	padding:8px 12px 0 12px;

	height:20px;

	

}

ul#nav li span{

	display:block;

	float:left;

	color:#ccc;

	text-decoration:none;

	padding:7px 0 0 0;

	height:20px;

	

}

/*ul#nav li a:hover{

	border-bottom:2px #CC6633 solid;

	}

	ul#nav li a.current,ul#nav li a.current:hover{color:#000;border-bottom:2px #948979 solid;}*/

	



/*Middle content style*/

#content{width:850px;background-color:#FFFFFF;line-height:18px;}

#webdesign{background:url(images/web_design.jpg) no-repeat; width:237px;height:287px;}

#webdev{background:url(images/web_development.jpg) no-repeat; width:237px;height:287px;}

#webhost{background:url(images/web_hosting.jpg) no-repeat; width:237px;height:287px;}

#webmarket{background:url(images/web_marketing.jpg) no-repeat; width:237px;height:287px;}

#practise{background:url(images/practise_area.jpg) no-repeat;width:233px;height:287px;}

#newsupdate{background:url(images/news_update.jpg) no-repeat;width:235px;height:237px;}

#podcast{background:url(images/podcasts.jpg) no-repeat;width:145px;height:237px;}

#latest{background:url(images/welcome-to-safiweb.jpg) no-repeat;width:380px;height:50px;}

#content h2{ font-family:Arial;font-size:12px;font-weight:bold; padding:41px 0px 0px 13px;margin:0px;color:#006699;}

#content .home h2{ font-family:Arial;font-size:20px;font-weight:bold; padding:10px 0px 0px 13px;margin:0px;color:#006699;}



#content .inside h2{ font-family:Arial;font-size:12px;font-weight:bold; padding:10px 0px 0px 13px;margin:0px;color:#006699;}

#content p{ font-family:Tahoma;font-size:11px;font-weight:normal; padding:15px 13px 0px 13px;margin:0px;color:#666666;}

#content  .image{border:1px solid #CCCCCC;padding:2px;}

#content p a{color:#666666;  text-decoration:none;}

#content .readmore{float:right;margin:0;padding:0px 5px 8px 0px;}



/*Footer style*/

#footer{width:850px;height:55px;background:url(images/footerbg.jpg) top repeat-x;margin:4px 0px 0px 0px;padding:0px;}

ul#navfooter{

	

	margin:0;

	padding:0;

	padding-bottom:5px;

	width:auto;

	position:relative;

	display:block;

	height:55px;

	font-family:Arial;

	font-size:9px;

	text-transform:uppercase;

	/*border:#000 1px solid;*/

}

ul#navfooter li{

	display:block;

	float:left;

	margin:0;

	padding:0;

	

}

ul#navfooter li a{

	display:block;

	float:left;

	color:#ccc;

	text-decoration:none;

	padding:20px 12px 0 12px;

	height:50px;

	

}

ul#navfooter li span{

	display:block;

	float:left;

	color:#ccc;

	text-decoration:none;

	padding:7px 0 0 0;

	height:20px;

	

}

/*ul#navfooter li a:hover{

	border-bottom:2px #CC6633 solid;

	}

	ul#navfooter li a.current,ul#navfooter li a.current:hover{color:#000;border-bottom:2px #948979 solid;}*/



/*Bottom Footer Links */

/*Footer style*/

#btmfooter{width:850px;height:auto;margin:0px 0px 0px 0px;padding:0px;}

ul#btmnavfooter{

	

	margin:0 auto;

	padding:0;

	padding-bottom:2px;

	width:750px;

	position:relative;

	display:block;

	height:10px;

	font-family:Arial,Tahoma;

	font-size:11px;

	text-transform:normal;

	/*border:#000 1px solid;*/

}

ul#btmnavfooter li{

	display:block;

	float:left;

	margin:0;

	padding:0;

	

}

ul#btmnavfooter li a{

	display:block;

	float:left;

	color:#ccc;

	text-decoration:none;

	padding:4px 8px 0 8px;

	height:10px;

	

}

ul#btmnavfooter li span{

	display:block;

	float:left;

	color:#ccc;

	text-decoration:none;

	padding:4px 0 0 0;

	height:10px;

	

}

/*ul#navfooter li a:hover{

	border-bottom:2px #CC6633 solid;

	}

	ul#navfooter li a.current,ul#navfooter li a.current:hover{color:#000;border-bottom:2px #948979 solid;}*/

	



/**/

#bottomfooter{width:850px;height:60px;margin:16px 0px 0px 0px;}

#bottomfooter p{font-family:Tahoma;font-size:11px;font-weight:normal; padding:5px;margin:0px auto;color:#999999; text-align:center;}

#bottomfooter p a{color:#999999; text-decoration:none;}

#bottomfooter p span{font-size:10px;}

.clear{ clear:both;}

/*Inside Pages*/

#inside_middle{width:850px;height:40px;}



#inside_separator{margin:0px;padding:0px;background:url(images/inside_sep.jpg) repeat-x;height:10px;}

#inside_content{width:850px; min-height:550px; background-color:#FFFFFF;line-height:18px;}



#inside_content h2{ font-family:Arial;font-size:16px;font-weight:bold; padding:15px 0px 0px 3px;margin:0px;color:#006699;}

#inside_content .inside h2{ font-family:Arial;font-size:12px;font-weight:bold; padding:10px 0px 0px 13px;margin:0px;color:#006699;}

#inside_content .inside a{ text-decoration:none;color:#006699;}



#inside_content p{ font-family:Tahoma;font-size:11px;font-weight:normal; padding:15px 13px 0px 13px;margin:0px;color:#666666;}

#inside_content small{padding:2px 13px 0px 13px;margin:0px;color:#006699;}

#inside_content p img{float:left; padding:0px 8px 0px 0px;margin:0;}

#inside_content a{color:#006699 ;  text-decoration:none;}

#inside_content .readmore{float:left;margin:0;padding:0px 0px 0px 10px;}





.clearfix:after {

	content: "."; 

	display: block; 

	height: 0; 

	clear: both; 

	visibility: hidden;

	}



.clearfix {display: inline-block;}



/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */





#slideshow .feature-entry h2 {

	padding-top:5px;

	margin-bottom: 10px;

	}



/* ---------[ Slideshow ]--------- */



#slideshow {

	position:relative;

	margin: 0 auto;

	padding:8px 0;

	overflow:hidden;

	width:850px;

	height:230px;

	z-index:1;

	}



#slideshow ul { 

	list-style-type:none;

	margin: 0;

	padding:0;

	width:10000em;

	

	}



#slideshow img.post_thumbnail {

	background:transparent;

	padding:0;

	float:none;

	margin: 0 auto;

	width:300px;

	height:178px;

	display:block;

	border:0;

	}



#slideshow .feature-image {

	background:transparent url(images/featbg.png) top left no-repeat;

	padding:10px;

	margin: 0;

	width:300px;

	height:185px;

	display:block;

	float:right;

	text-align:center;

	}



#slideshow .feature-entry {

	width:400px;

	float:left;

	line-height:1.4em;

	font-size:10pt;

	margin-left:20px;

	color:#f9f9f9;

	}



/* ---------[ jCarousel Styles ]--------- */



.jcarousel-container {

	position: relative;

	padding: 0;

	z-index:1;

	}



.jcarousel-clip {

	padding: 0;

	margin: 0;

	overflow: hidden;

	position: relative;

	z-index:1;

	}



.jcarousel-list {

	overflow: hidden;

	position: relative;

	top: 0;

	left: 0;

	margin: 0;

	padding: 0;

	z-index:1;

	}



#slideshow li, 

.jcarousel-list li, 

.jcarousel-item {

	position:relative;

	list-style: none;

	float:left;

	/* --- We set the width/height explicitly. No width/height causes infinite loops. --- */

	width: 850px;

	height: 230px;

	padding:0;

	margin: 0;

	overflow:hidden;

	z-index:1;

	}



/* ---- The buttons are added dynamically by jCarousel 

before the <ul> list (inside the <div> described above) 

and have the classnames "jcarousel-next" and "jcarousel-prev" ---- */



.jcarousel-next {

	display: none;

	z-index:3;

	}



.jcarousel-prev {

	display: none;

	z-index:3;

	}



.jcarousel-container-horizontal {

	width: 850px;

	height: 230px;

	padding: 0;

	margin: 0 auto;

	}



.jcarousel-clip-horizontal {

	width: 850px;

	height: 230px;

	margin: 0 auto;

	padding:0;

	}



.jcarousel-item-horizontal { }



.jcarousel-item-placeholder { }



/* -----------[ jCarousel Horizontal Buttons ]----------- */



.jcarousel-next-horizontal {

	position: absolute;

	bottom:0px;

	right: 5px;

	width: 20px;

	height: 20px;

	cursor: pointer;

	background: transparent url(images/next.png) no-repeat 0 0;

	z-index:3;

	}



.jcarousel-prev-horizontal {

	position: absolute;

	bottom:0px;

	right: 300px;

	width: 20px;

	height: 20px;

	cursor: pointer;

	background: transparent url(images/prev.png) no-repeat 0 0;

	z-index:3;

	}



/* -----------[ Featured Content Buttons ]----------- */



.feature-buttons {

	height:25px;

	position:absolute;

	left:25px;

	bottom: 30px;

	margin:0;

	padding:0;

	z-index:1;

	}



.feature-buttons a, .feature-buttons a:link, .feature-buttons a:visited {

	width:98px;

	height:23px;

	line-height:23px;

	padding: 0px;

	text-align:center;

	background:url(images/feat-button.png) top left no-repeat;

	font-weight:bold;

	color:#fff !important;

	display:block;

	margin-right:5px;

	float:left;

	text-decoration:none;

	}



.feature-buttons a:active, .feature-buttons a:hover {

	background:url(images/feat-button.png) bottom left no-repeat;

	color:#fff !important;

	}

#slideshow ul#mycarousel { 

	height:230px;

	}



.design{color:#EB610C !important; text-align:center;}

.development{color:#D20000 !important; text-align:center;}

.hosting{color:#ABC306 !important; text-align:center;}

.marketing{color:#36B4C4 !important; text-align:center;}

ul,ol{ margin:0;



	padding:0;



	margin-left:50px;



	

	

	padding-top:8px;



	width:auto;



	position:relative;



	display:block;}

	  li {

line-height:14px;

padding:4px 0 5px 4px;

list-style-image:url(images/menu-bullet.gif);

}



ul.subpage{

	margin:0;



	padding:0;



	margin-left:28px;



	

	

	padding-top:8px;



	width:auto;



	position:relative;



	display:block;

	

	

	

	}

ul.subpage li{

	list-style-image:url(images/bullet.gif);

	line-height:14px;

padding:4px 0 5px 0px;



	

}	

ul.subpage	 li a{



 font-family:Arial;font-size:11px;  color:#006699;

 text-decoration:none;

 text-align:left;

}



#respond textarea{ width:400px;}

#respond h3{font-family:Arial;font-size:11px;font-weight:bold; padding:10px 0px 0px 13px;margin:0px;color:#006699;}

#comments {font-family:Arial;font-size:11px;font-weight:bold; padding:10px 0px 0px 13px;margin:0px;color:#006699;}

a{color:#006699; text-decoration:none;}



/* #submit{background-color:#050F28; color:#fff; border:0;}*/



#subpage-maintext-left {

	width: 530px;

	position: relative;

	left: 2px;

	height: auto;

	text-align: left;

	float: left;

}

#subpage-maintext-left p {

	font-size: 11px;

	font-weight: normal;

	

}

#subpage-maintext-left h2 {

	padding:0px 0px 0px 3px;

	

}

#subpage-maintext-left div {

	text-align: left;

	margin-bottom: 20px;

	position: relative;

	float: left;

}

#subpage-maintext-left p img{

	border: 5px solid #006699;

	float:left;

	padding:0px;

	margin:0px 8px 0px 0px;

	

}



#recentwork {margin:0;



	padding:0;



	margin-left:18px;



	

	

	padding-top:8px;}

#recentwork p{margin:0px; padding:0px; padding-bottom:8px;}	

#recentwork p img{

	border: 2px solid #006699;

	margin:0px;

	padding:0px;

	float:none;}

#wpcf7-f2-p102-o1 textarea{

	

	width:450px;

	height:100px;}

span.wpcf7-list-item { display: block; }



div.sociable{margin-left:15px !important;}



pre,code {

background:none repeat scroll 0 0 #EEEEEE;

border:1px solid #CCCCCC;

font-family:monospace;

font-size:11px;

line-height:14px;

overflow-x:auto;

padding:10px;

width:450px;

margin:15px 13px 0px 13px;

}

div.dp-highlighter{ width:480px !important;padding:10px;margin-left:10px !important;background-color:#fff !important;}

.boxleft {
	float: left;
	width: 35px;
	margin: 18px 0px 0px 0px;
	padding:  0px;
}
.boxleft img{ 
	border:2px #80838B solid; 
	padding:0px; 
	margin:0px;
}
.boxright {
	float: left;
	width: 200px;
	margin: 8px 0px 0px 10px;
	padding:  0px;
}

#btmcontent{width:850px;background-color:#FFFFFF;line-height:18px;}



#btmcontent .inside h2{ font-family:Arial;font-size:12px;font-weight:bold; padding:10px 0px 0px 13px;margin:0px;color:#006699;}

#btmcontent p{ font-family:Tahoma;font-size:11px;font-weight:normal; padding:15px 13px 0px 13px;margin:0px;color:#666666;}

#btmcontent  .image{border:1px solid #CCCCCC;padding:2px;}

#btmcontent p a{color:#666666;  text-decoration:none;}

#btmcontent .readmore{float:right;margin:0;padding:0px 5px 8px 0px;}






#btmcontent h2.innerbox{ font-family:Arial;font-size:12px;font-weight:bold; padding:5px 0px 0px 5px;margin:0px;color:#006699;}

#btmcontent p.innerbox{ font-family:Tahoma;font-size:11px;font-weight:normal; padding:5px 5px 0px 5px;margin:0px;color:#666666;}

#sfstest-sidebar{ padding:8px 10px 8px 10px;}

#pad{padding:15px 13px 0;}