/* @override http://localhost/faisal/css/main.css */

/* General Styles */
body{
	background: #000 url("../img/back-body.jpg") no-repeat center top;
  	font-family: "Trebuchet MS", Tahoma, "Lucida Grande", Lucida, Verdana, sans-serif;

}
.divider_horz{
	background: url("../img/divider-horz.png") repeat-x;
	height: 5px;
	
}
.blue{
	color: #58aedc !important;
}
.no_underline{
	text-decoration: none;
}

/* Layout Elements */
#header{ background: #030303 url("../img/back-top.png") repeat-x; }
.header_container{
	width: 878px;
	margin: 0 auto;
	overflow: hidden;
}
#header p{
	color: #fff;
	font-size: 11px;
	margin: 12px 0;
}
#header p a{
	font-size: 12px;
}

.logo{
	float: left;
	margin: 8px 0 0 18px;
	display: inline;
	z-index: 5;
	position: absolute;
}

#wrapper{
	margin: 0 auto;
	width: 878px;
}
.wrapper{
	margin: 42px auto 0 auto;
	width: 856px;
}
.slider-wrap{
	background: url("../img/back-nav.png") no-repeat top;
	width: 878px !important;
	margin-top: 35px !important; 
}
.for_IE{ display: none; }




/* request_bar */
#request_bar{
	height: 43px;
	width: 878px;
	background: url("../img/back-requestBar.png") repeat-x;
	margin: 76px 0 0 0;
	position: absolute !important;
	z-index: 2;
	overflow: hidden;
}
#request_bar p{
	float: left;
	color: #fff;
	font-size: 12px;
	margin-left: 20px;
	display: inline;
}
#request_bar a{
	float: right;
	margin: 8px 20px 0 0;
	display: inline;
}

/* CONTENT */
.content{  overflow: hidden; }
.content_container{
	width: 838px;
	padding: 20px;
	overflow: hidden;
}
.content_container p{
	color: #fff;
	font-size: 12px;
}
.content_container p a{
	color: #addffa;
	font-size: 12px;	
}

/* home */
.col_1, .col_2, .col_3{ float: left; }
.col_1{ 
	width: 240px;
	margin-right: 20px;
}
.col_2{
	width: 318px;
	margin-right: 20px;
}

.col_3{ width: 235px; }
.port_hover_holder{ margin-top: 17px; }
.port_hover_holder img{
	margin-bottom: 5px;
	cursor: pointer;
}

.bubble { margin-top: 0px; }
.bubble div{
  	background: url("../img/bubble.png") no-repeat;
	width: 214px;
	height: 60px;
	left: 645px;
	position: absolute;
	display: none;
	font-size: 10px;
	color: #4c4c4c;
	line-height: 12px;
	padding: 19px 0 0 15px;
}

.large div {
	left:614px;
}
	.large .left div {
		left:295px;
	}

div table tr td{
	color: #000;
	font-size: 10px;
	text-transform: uppercase;
  	line-height: 15px;
}
.port_home1 div{ top: 217px; }
.port_home2 div{ top: 277px; }
.port_home3 div{ top: 337px; }
.row1 div { top:177px; }
.row2 div { top:237px; }
.row3 div { top:297px; }
.row4 div { top:357px; }
.row5 div { top:417px; }
.row6 div { top:477px; }
.row7 div { top:537px; }
.row8 div { top:597px; }



/* accordion */
/* A few IE bug fixes */
* html ul.accordion ul li a { height: 100%; }
* html ul.accordion li a { height: 100%; }
* html ul.accordion ul li { margin-bottom: -1px; }
		
#theMenu { 
	width: 200px; 
	margin: 15px 0; 
	padding: 0; 
}
#theMenu2 { 
	width: 620px; 
	margin: 15px 0; 
	padding: 0; 
}
		
/* Some list and link styling */
ul.accordion ul li { 
	padding: 0; 
	margin-bottom: 0;
	color: #fff;
	margin: 0 auto;
	width: 290px;
	font-size: 12px;
}
ul#theMenu2.accordion ul li { 
	padding: 0;
	margin: 15px 0 !important;
	color: #fff;
	width: 585px;
	font-size: 12px;
}
ul#theMenu2.accordion ul li ul li{
	padding: 0 0 0 35px;
	margin: 0 !important;
}
ul#theMenu2.accordion ul li a{
	font-size: 12px;
}
ul#theMenu2 p{
	width: 550px;
}

ul.accordion ul li a { 
	color: #addffa;
	font-size: 12px; 
}
ul.accordion ul li a.more{
	float: right !important;
	font-size: 12px !important;
	color: #58aedc !important;
	text-decoration: underline !imortant;
	background: transparent !important;
	padding: 0 !important;
}
ul.accordion ul{
	width: 309px;
	margin: -2px 0 5px 0 !important;
	background: #0c618d;
	overflow: hidden;
}

/* For the xtra menu */
ul.accordion ul ul li { 
	padding: 0; 
	width: 175px; 
	margin-bottom: 0; 
}
ul#theMenu2.accordion ul { 
	padding: 0; 
	width: 605px; 
	margin-bottom: 0; 
	background: transparent;
}
ul#theMenu2.accordion ul li{
	padding-left: 15px;
}
ul.accordion ul ul li a { 
	display:block; 
	color: #fff; 
	padding: 3px 6px; 
	font-size: small; 
}

		
		
h2 { margin-top: 1.5em; }
		
/* Header links styling */
ul#theMenu h3.head a { 
	color: #fff;
	display:block; 
	height: 30px !important;
	width: 331px;
	text-indent: -9999px;
}
ul#theMenu2 h3.head a { 
	color: #fff;
	display:block; 

	height: 46px !important;
	width: 614px;
	text-indent: -9999px;
}
h3.head a.ecommerce{ background: url("../img/accordion-ecommerce.png") no-repeat; }
h3.head a.development{ background: url("../img/accordion-development.png") no-repeat; }
h3.head a.csd{ background: url("../img/accordion-csd.png") no-repeat; }
h3.head a.seo{ background: url("../img/accordion-seo.png") no-repeat; }
h3.selected a { 
	background: background: #18597c url("../img/back-accordionHead.gif") repeat-x;  
	background-position:98% 50%;
	color: #fff;
}

h3.head a.accord_do_webdev{ background: url("../img/accord-do-webdev.png") no-repeat; }
h3.head a.accord_do_ecom{ background: url("../img/accord-do-ecom.png") no-repeat; }
h3.head a.accord_do_bus{ background: url("../img/accord-do-bus.png") no-repeat; }
h3.head a.accord_do_hosting{ background: url("../img/accord-do-hosting.png") no-repeat; }
h3.head a.accord_do_softdev{ background: url("../img/accord-do-softdev.png") no-repeat; }
h3.head a.accord_do_search{ background: url("../img/accord-do-search.png") no-repeat; }
ul#theMenu2.accordion li h3.selected a{
	background-position: bottom;
}
/*h3.selected a:hover { background-position:98% 50%; } */
		
/* Xtra Header links styling */
h4.head a { 
	color: #333;
	display:block; 
	border-top: 1px solid #36a;
	border-right: 1px solid #36a;
	background: #eee url(down.gif) no-repeat; 
	background-position: 98% 50%;
	padding: 3px 6px;
}
h4.head a:hover { 
	color: #000;
	background: #ddd url(down.gif) no-repeat; 
	background-position: 98% 50%;
}
h4.selected a { 
	background: #6c9 url(up.gif) no-repeat; 
	background-position:98% 50%;
	color: #fff;
	padding: 3px 6px;
}
h4.selected a:hover { 
	background: #6c9 url(up.gif) no-repeat; 
	background-position:98% 50%;
	color: #36a;
}


/* Sub page layouts */
.left_620{
	width: 620px;
	float: left;
}
.left_620 p{
	font-size: 12px;
	color: #fff;
	width: 600px;
	margin-left: 20px;
}
.right_230{
	width: 230px;
	float: right;
}
.right_230 h3{
	margin-top: 15px;
	color: #005784;
	font-size: 15px;
}
.right_230 p{
	color: #fff;
	font-size: 12px;
	width: 220px;
}
.right_230 a{
	color: #fff;
	font-size: 12px;
}
.right_230 a.email{
	text-decoration: underline;
}
.down{ margin-top: 58px; }
ul.right_nav{
	margin-top: 25px !important;
}
ul.right_nav li{
	margin: 5px 0;
}
ul.right_nav li a{
	display: block;
	width: 230px !important;
	color: #fff;
	text-transform: uppercase;
	background: #54bcf1;
	padding: 10px;
	font-weight: bold;
}
.blue_back{
	width: 627px;
	background: transparent url("../img/back-para.png") repeat-y;
	margin-bottom: 0;
	color: #fff;
}
.blue_back p{
	padding: 0 10px 0 15px;
	margin: 5px 0 0 0px;
	color: #fff;
	width: 600px;
}
.blue_back p.credit{
	font-size: 12px;
	text-align: right;
	padding-bottom: 5px;
	width: 580px;
}
.blue_back h3{
	font-size: 14px;
	color: #0d3a53;
	margin: 0;
	padding: 8px 0 0 15px;
}
.blue_bottom{
	width: 627px;
	height: 10px;
	background: transparent url("../img/back-para-bottom.png") no-repeat;
	margin-bottom: 10px;
}

/* Contact Form */
form.contact{ margin: 15px 0 0 20px; overflow: hidden;}
form.contact div{
	width: 278px;
	float: left;
	margin-right: 15px;
	padding-bottom: 10px;
	display: inline;
}
form.contact label{
	color: #fff;
	font-size: 12px;
	text-transform: uppercase;
	width: 278px;
	display: block;
}
form.contact div input{
	width: 266px;
	padding: 5px;
	border: solid 1px #73a6c2;
	background: #005784 url("../img/back-input.png") repeat-x;
	color: #fff;
}
form.contact textarea{
	border: solid 1px #73a6c2;
	width: 559px;
	background: #005784 url("../img/back-input.png") repeat-x;
	color: #fff;
	padding: 5px;
}
form.contact input.submit{
	float: right;
	margin:7px 26px 16px 0;
}

/* what we've done */
#portfolio .content {
	padding:10px 0 0;
}
	#portfolio ul.swap {
		width:259px;
		float:left;
		margin:0 0 0 7px;
	}
		#portfolio .swap li {
			width:259px;
			float:left;
			clear:left;
			margin-bottom:3px;
		}
		#portfolio .swap li a {
			width:224px;
			padding:50px 15px 0;
			height:0;
			line-height:0;
			font-size:0;
			float:left;
			display:block;
			background-color:#4db1e4;
			background-repeat:no-repeat;
			background-image:url('../img/port-nav.gif');
		}
			#portfolio .swap li a:hover {
				cursor:pointer !important;
				cursor:hand;
			}
			#portfolio .swap li a.active {
				width:229px;
			}
			#portfolio #a_web_design {
				background-position:15px 0;
			}
			#portfolio #a_corporate_identity {
				background-position:15px -50px;
			}
			#portfolio #a_application {
				padding-top:70px;
				background-position:15px -100px;
			}
	#portfolio .viewer {
		width:553px;
		/*background:transparent url('../img/port-bg.png');*/
		background-color:#4db1e4;
		float:left;
		padding:15px 25px;
	}
		#portfolio .viewer .left {
			width:319px;
		}
		#portfolio .viewer img {
			margin-bottom:5px;
		}
		
		
/* sticky footer */
html, body { height: 99%; }
#wrapper {
    min-height: 90%;
    height: auto !important;
    height: 90%;
    margin: 0 auto -69px;
}
#footer{
	width: 100%;
	background: #000 url("../img/back-footer-img.jpg") no-repeat center top;
}
#footer, .push {
	height: 89px;
}
#footer p{
	color: #959595;
	padding: 17px;
	font-size: 10px;
	margin: 0 auto;
	width: 878px;
}

ul.swap li a{
	cursor: pointer;
}
.notice{
	margin: 15px 0 0 20px;
	width: 300px;
	color: #daaa17;
	font-size: 15px;
}
.notice ol li{
	line-height: 18px;
}

#webdev, #ecomm, #software{
	margin-left: -13px;
}