@import "reset.css";
/*@import "typography.css";*/


body {
	/*font: 14px/25px Tahoma, Geneva, sans-serif;*/
	font: 14px/25px tahoma, sans-serif, arial;
	background: #FFFFFF;
	color: #555555;
}

	.cufon-loading, .cufon-loading .sf-menu > li > a,
	.cufon-loading h4, .cufon-loading h3, .cufon-loading h2,
	.cufon-loading .cufon-normal, .cufon-loading .cufon-light,
	.cufon-loading .cufon-medium, .cufon-loading .cufon-bold {
			visibility: hidden !important;
	}

	div {position: relative;}
	p { margin: 0 0 10px 0; }
	hr { border: solid 1px #CCCCCC;}
	code { padding: 2px 3px; background: #EEEEEE; }

	br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
	.clear {float: none; clear: both;}

/*  --------------------------------
		[:: Heading Styles ::]
	--------------------------------
*/
	h2, h2 a {font-size:30px; color:#888; margin:10px 0 10px; line-height:21px; font-weight:normal; text-decoration:none}
	h3, h3 a {font-size:26px; color:#555; margin:0 0 23px; line-height:22px; font-weight:normal; text-decoration:none; line-height:20px; letter-spacing:-1px; word-spacing:-2px;}
	h4, h4 a {font-size:18px; color:#555; margin:0 0 23px; line-height:20px; font-weight:normal; text-decoration:none; letter-spacing:-1px; word-spacing:0px; position:relative; z-index:150}

	sup, sub {
		font-size: 10px;
		height: 0;
		line-height: 1;
		position: relative;
		vertical-align: baseline;
	}
	sup { bottom: 1ex; }
	sub { top: .5ex; }

	a { color: #4978AD; text-decoration: none;}
	a:hover, a:active { color: #1D5596; text-decoration: none; }


/*  --------------------------------
		[:: Align Classes ::]
	--------------------------------
*/
	.textalign-justify { text-align: justify; }
	.textalign-center { text-align: center; }
	.textalign-left { text-align: left; }
	.textalign-right { text-align: right; }


	.divbox {height:20px; background: #FFFFFF url(../images/div.gif) 0% 79%; }
	.divbox2 {width:960px; height:14px; margin:0 auto; background: url(../images/div2.gif) 0% 0%;}

/*  --------------------------------
		[:: Header / Logo ::]
	--------------------------------
*/
	#headerBG {
		/*width:99%;*/
		margin:0 auto;
		padding:0px;
		position:relative;
		text-align: center;
		background: #F9F9F9;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#FFFFFF'); /* for IE */
		background: -webkit-gradient(linear, left bottom, left top, from(#FFFFFF), to(#F9F9F9)); /* for webkit browsers */
		background: -moz-linear-gradient(bottom,  #FFFFFF,  #F5F5F9); /* for firefox 3.6+ */
		/*background: #FFFFFF url(../images/bgtop.gif) repeat-x;*/
		/*border: solid 1px;*/
	}
	#header {overflow: auto; width:960px; height:140px; margin: 0 auto; border: solid 0px #000099;}
		#logo { width: 405px; float:left; margin: 0 0 0 5px; border: solid 0px #990000;}
		#logo img { border: solid 0px #0000AA;}
		#header-left-side {float: left; width:270px; height:129px; padding:4px 0 0 0; border: solid 0px;}
		#header-right-side {float: right; width:270px; height:129px; padding:4px 0 0 0; border: solid 0px;}

	#navbar {
		/*position:relative;*/
		display:block;
		top:0px;
		/*width: 75%;*/
		width: 980px;
		height:55px;
		margin: 0px auto 0px auto;
		padding: 0px 0 5px 0px;
		background: #D5D5D5;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5', endColorstr='#D5D5D5'); /* for IE */
		background: -webkit-gradient(linear, left bottom, left top, from(#D5D5D5), to(#F5F5F5)); /* for webkit browsers */
		background: -moz-linear-gradient(bottom,  #D5D5D5,  #F5F5F5); /* for firefox 3.6+ */
		border: solid 2px #F9F9F9;
		-moz-border-radius: 12px;
		-webkit-border-radius: 12px;
		-khtml-border-radius: 12px;
		border-radius: 12px;
	}
	#navbar .nav-menu, #navbar .sf-menu {
		position:relative;
		left:28%;
		width: 500px;
		height:55px;
		margin: 0 auto;
		padding: 0px;
		list-style-type: none;
		/*border: solid 1px #999999;*/
	}
	#navbar .nav-menu ul { list-style-type: none; }
	#navbar a {	color: #999999; }
	#navbar a:hover { font-weight: 700;	color: #666666; }


/*  --------------------------------
		[:: Wrapper / Content ::]
	--------------------------------
*/
#wrapperBG {
	background: #FFFFFF;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#F5F5F5'); /* for IE */
	background: -webkit-gradient(linear, left bottom, left top, from(#F5F5F5), to(#FFFFFF)); /* for webkit browsers */
	background: -moz-linear-gradient(bottom, #F5F5F9, #FFFFFF); /* for firefox 3.6+ */
}
#wrapper {
	overflow: auto;
	position: relative;
	width:960px;
	height:100%;
	min-height:100%;
	margin: 0px auto;
	/*padding: 10px 0px;*/
	background: #FFFFFF;
	/*border: solid 1px #E9E9E9;*/
}
	#content {
		overflow: auto;
		float: left;
		width:655px;
		margin: 0px auto;
		padding: 0 10px;
		background: #FFFFFF;
		/*border: solid 2px #F5F5F5;*/
	}
	#content .list1 { margin:0 20px 10px 60px; list-style-image: url(../images/bullet.png);}
	#content .list1 li { margin:10px 0 0 0; list-style-type: none; font-size: 16px;}
	#content .list1 li a { font-size: 14px; }
	#content p { margin: 20px 0; text-align: justify; border: solid 0px #990000; }
	#content #page-title { padding: 0 0 15px 0; border-bottom: solid 1px #F0F0F0; }

/*  --------------------------------
		[:: Sidebar ::]
	--------------------------------
*/
	#sidebar {
		float:right;
		width: 250px;
		height:100%;
		min-height:600px;
		margin: 0px 10px 10px 0px;
		padding:5px;
		/*background: #F5F5F5;*/
		border-left: solid 1px #F0F0F0;
	}

	#sidebar .side-box { margin: 0px auto 20px auto; }
	#sidebar .side-box .sidebox-header {
		margin: 5px 5px 0 5px;
		padding: 5px;
		text-align: center;
		font-size: 18px;
		font-weight: 900;
		background: #FFFFFF;
		border: solid 1px #DDDDDD;
		border-bottom: solid 0px;

		-moz-border-radius-topleft: 10px; /* Firefox Border Radius */
		-moz-border-radius-topright: 10px;
		-webkit-border-top-left-radius: 10px; /* WebKit Border Radius */
		-webkit-border-top-right-radius: 10px;
		-khtml-border-top-left-radius: 10px; /* KHTML/Webkit Border Radius */
		-khtml-border-top-right-radius: 10px;
		border-top-left-radius: 10px; /* Future Proofing for CSS3 */
		border-top-right-radius: 10px;

		-moz-box-shadow: 0px 5px 20px 0px rgba(100,100,100,0.3);
		-webkit-box-shadow: 0px 5px 20px 0px rgba(100,100,100,0.3);
		box-shadow: 0px 5px 20px 0px rgba(100,100,100,0.3);
	}
	#sidebar .side-box .sidebox-content {
		margin: 0 5px;
		padding: 5px 10px 0 15px;
		font-size: 12px;
		background: #FFFFFF;
		border: solid 1px #DDDDDD;
		border-top: solid 0px;

		-moz-border-radius-bottomleft: 10px; /* Firefox Border Radius */
		-moz-border-radius-bottomright: 10px;
		-webkit-border-bottom-left-radius: 10px; /* WebKit Border Radius */
		-webkit-border-bottom-right-radius: 10px;
		-khtml-border-bottom-left-radius: 10px; /* KHTML/Webkit Border Radius */
		-khtml-border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px; /* Future Proofing for CSS3 */
		border-bottom-right-radius: 10px;
	}
	#sidebar .side-box .sidebox-content ul { margin:0 20px 10px 20px; list-style-image: url(../images/bullet.png);}
	#sidebar .side-box .sidebox-content ul li { margin:10px 0 0 0; list-style-type: none;}
	#sidebar .side-box .sidebox-content ul li a { font-size: 14px; }

	#sidebar .side-box .sidebox-content .sidebox-link {
		display:block;
		width: 120px;
		margin: 5px auto;
		padding:5px;
		text-align: center;
		color: #999999;
		background: #F5F5F5;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#F5F5F5'); /* for IE */
		background: -webkit-gradient(linear, left bottom, left top, from(#F5F5F5), to(#FFFFFF)); /* for webkit browsers */
		background: -moz-linear-gradient(bottom, #F5F5F9, #FFFFFF); /* for firefox 3.6+ */
		border: solid 1px #EEEEEE;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
		-khtml-border-radius: 8px;
		border-radius: 8px;
	}
	#sidebar .side-box .sidebox-content .sidebox-link:hover {
		color: #666666;
		background: #F0F0F0;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#F0F0F0'); /* for IE */
		background: -webkit-gradient(linear, left bottom, left top, from(#F0F0F0), to(#FFFFFF)); /* for webkit browsers */
		background: -moz-linear-gradient(bottom, #F0F0F0, #FFFFFF); /* for firefox 3.6+ */
		border: solid 1px #DDDDDD;
	}

/*  --------------------------------
		[:: Footer ::]
	--------------------------------
*/
	#footer {
		overflow: auto;
		/*width:960px;*/
		min-height:100px;
		margin: 0px auto;
		padding: 0;
		line-height:30px;
		text-align: center;
		background: #F5F5F5 url(../images/header-bg.gif) no-repeat scroll center top;
		/*border: solid 2px #E9E9E9;*/
	}
		#footer-links {
			overflow: auto;
			width:480px;
			padding: 2px 0;
			margin: 10px auto;
			text-align: center;
			/*border: solid 1px;*/
		}
		#footer-links ul { list-style-type: none; }
		#footer-links li { float: left; padding: 0px 10px; }
		#footer-links a {
			font-size: 14px;
			font-weight: 700;
			padding: 6px 5px;
			color: #999999;
			border: solid 1px #F5F5F5;
			-moz-border-radius: 8px;
			-webkit-border-radius: 8px;
			-khtml-border-radius: 8px;
			border-radius: 8px;
		}
		#footer-links a:hover { color: #666666; background: #EEEEEE; border: solid 1px #E0E0E0; }

		#footer #copyright { width:960px; margin: 20px auto 0 auto; color: #AAAAAA; border: solid 0px; }
		#footer #copyright a {
			font-family: sans-serif;
			letter-spacing: -1px;
			font-weight:bold;
			font-size: 14px;
			color: #666666;
		}
		#footer #copyright a:hover { color: #333333; }
		#footer #designerLink {
			position: absolute;
			top:5px;
			right:5px;
			width: 187px;
			height: 24px;
			margin: 0px;
			background: url('../images/zubair-service-logo.png') left top;
		}
		#footer #designerLink:hover, #footer #designerLink:active {	background: url('../images/zubair-service-logo.png') left bottom; }

/*  --------------------------------
		[:: Testimonial Page ::]
	--------------------------------
*/
	.feedback-box {
		overflow: auto;
		margin: 10px 10px;
		background: #E5E5E5;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5E5E5', endColorstr='#F0F0F0'); /* for IE */
		background: -webkit-gradient(linear, left bottom, left top, from(#F0F0F0), to(#E5E5E5)); /* for webkit browsers */
		background: -moz-linear-gradient(bottom,  #333,  #444); /* for firefox 3.6+ */
		border: solid 3px #333;
		-moz-border-radius: 12px;
		-webkit-border-radius: 12px;
		-khtml-border-radius: 12px;
		border-radius: 12px;
		
	}
	.feedback-box .client-image { float:left; width:90px; margin: 3px 5px 0 5px; padding:0px; border: solid 0px; }
	.feedback-box .feedback-text { float:left; width: 83%; height:97px; color: #999999; font-size:14px; border: solid 0px; }
	.feedback-box .feedback-text .client-info { display:block; position:absolute; bottom:0px; right:15px; color: #999999; font-size:11px; font-style:italic; font-weight:bold;}


/*  -------------------------------------------
		[:: Service Page / Toggle Stuff ::]
	-------------------------------------------
*/
	.toggler {cursor: pointer;}
	.toggler a { padding: 0px 20px 0px 0; background: url(../images/toggle-arrows.png) right top no-repeat;}
	.service-name {
		width: 450px;
		height: 46px;
		margin: 20px 0 0 0;
		padding: 0 0 0 50px;
		background: url(../images/service-bg.png) no-repeat;
		line-height: 30px;
	}
	.service-name a { color: #ccc; text-decoration: none; font-size: 16px; font-weight:900; }
	.service-name a:hover, .service-name a:active { color: #fff; }
	.service-active a {background-position: right bottom;} /*-- When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
	.service-desc {
		overflow: hidden;
		width: 450px;
		margin: 0 5px;
		padding: 20px;
		text-align: left;
		background: #F5F5F5;
		border-top: 1px solid #d6d6d6;
	}
	.service-desc h3 {font-variant: small-caps;}
	.service-desc ul {
		margin: 0 0 0 20px;
		list-style-type: square;
		list-style-position: inside;
	}

/*  --------------------------------
		[:: Slider Stuff ::]
	--------------------------------
*/
#slider-wrapper {
	overflow: auto;
	width:940px;
	margin: 5px auto 0 auto;
	padding:5px;
	background: #FFFFFF;
	border: solid 1px #EEEEEE;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	-khtml-border-radius: 12px;
	border-radius: 12px;
}
	#intro {
		float: left;
		width: 490px;
		/*height:300px;*/
		margin: 50px 15px;
		text-align: center;
		border: solid 0px;
	}
	#slider { float:right; width: 402px !important; height:300px; border: solid 0px;}
	#slider ul { float:left; list-style-type:none; }
	#slider ul li { float:left; width: 405px; height:300px; }


/*  --------------------------------
		[:: Contact Form ::]
	--------------------------------
*/
#contact-form fieldset {margin: 0 0 10px 0; border: solid 0px;}
#contact-form label {min-width: 100px;}
#contact-form input {height:auto; padding:0px;}
	#contact-form {
		width: 550px;
		margin: 0 0 0 20px;
		padding: 15px;
	}
		#contact-form fieldset {
			padding: 5px;
			margin-bottom: 5px;
			/*border: solid 1px #DDDDDD;*/
		}
		#contact-form label {
			display: inline-block;
			padding: 5px;
			width: 110px;
			font-weight:900;
			/*border: solid 1px;*/
		}
		#contact-form label:after {content:": ";}
		#contact-form label.error {
			display: inline;
			width: auto;
			position: absolute;
			margin: 0 0 0 10px;
			padding: 5px;
	
			font-size: .8em;
			font-weight: bold;
			color: #CC0000;
		}
		#contact-form label.error:after {content:"";}

		#contact-form input[type="text"],
		#contact-form textarea,
		#contact-form select {
			padding: 5px 10px;
			background: #F9F9F9;
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#F9F9F9'); /* for IE */
			background: -webkit-gradient(linear, left bottom, left top, from(#F9F9F9), to(#FFFFFF)); /* for webkit browsers */
			background: -moz-linear-gradient(bottom, #F9F9F9, #FFFFFF); /* for firefox 3.6+ */
			border: solid 1px #CCCCCC;
			-moz-border-radius: 6px;
			-webkit-border-radius: 6px;
			-khtml-border-radius: 6px;
			border-radius: 6px;
		}
		#contact-form input[type="text"] {width: 150px;}
		#contact-form input[type="text"]:focus { background: #FFFFFF; border: solid 2px #CCCCCC; }
		#contact-form textarea {display:inline-block; width: 300px; margin-left: 120px;}
		#contact-form textarea:focus { background: #FFFFFF; border: solid 1px #CCCCCC; }
		#contact-form .buttons-holder { text-align: center !important; border: solid 0px #EEEEEE;}
		#contact-form #send-email {
			cursor: pointer;
			width: 123px;
			height:31px;
			background: url(../images/sendbutton.png);
			border: solid 0px;
		}
		#contact-form #send-email:active {background-position: left bottom;}

/* --------------- */
/* Forms feedback */
/* --------------- */
.errors 		{
					width: 550px;
					/*margin: 0 auto;*/
					padding: 10px;
					/*background: #F9F9F9;*/
					border: solid 0px #A33;
				}
.errors p		{margin:0px;}
.errors ul 		{list-style-type: square; font-size: 12px; margin-left: 30px;}

.yay, .oops   	{
					width: 550px;
					margin: 0 0 5px 25px;
					padding:10px;
					font-size:.8em;
					text-align:center;
					color:#fff;
					font-weight:700;
					-moz-border-radius: 8px;
					-webkit-border-radius: 8px;
					-khtml-border-radius: 8px;
					border-radius: 8x;
				}
.yay            {background:#090;}
.oops           {background:#A33;}
div.error       {font-size:.8em;font-weight:700;padding:5px 0 0;color:#f30;margin:0 0 0 90px;}
.feedback a 	{padding: 5px 5px; color: #EEEEEE; font-size: 16px; }