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

   grid.css - Oh Hai! Welcome to my CSS codes.
   
       Index
	   
			01. Containers
			02. `Grid >> Global
			03. `Grid >> Children (Alpha ~ First, Omega ~ Last)
			04. `Grid >> 12 Columns	
			05. `Prefix Extra Space >> Global
			06. `Prefix Extra Space >> 12 Columns
			07. `Suffix Extra Space >> Global
			08. `Suffix Extra Space >> 12 Columns
			09. `Clear Floated Elements					
		   
		Frequently Used Colors
		
			Organge - color: #fa470f;
		 	Light Brown - color: #69675d;
			Dark Brown - color: #32312c;
 
/* 01. Containers   
-------------------------------------------------------------- */
#wrap {
	background: #FFF url(/images/common/nav-repeat.gif) repeat-x left top;
	overflow: hidden;
	}
#contact-wrap {
	background: #FFF url(/images/content/contact-bg.jpg) no-repeat center top;
	height:621px;
	overflow: hidden;
	}
#container {
	margin: 0 auto;
	overflow: hidden;
	width: 960px;
	}
#client {
	width: 960px;
	overflow: hidden;
	margin-bottom: 18px;
	position: relative;
	z-index: 100;
	background-color:#2F2F29;		
	}	
#breadcrumb {
	width: 100%;
	font-size:12px;
	overflow: hidden;
	margin-bottom: 10px;		
	}		
/*-----------------------------------------------------------------------------------------------

Contact Styles

-----------------------------------------------------------------------------------------------*/					
		#contact-block #contact-form {
			width: 385px;
			}	
		#contact-block #contact-form ul {
			list-style-image:none;
			list-style-position:outside;
			list-style-type:none;
			margin:0;
			padding:0;
			}									
		#contact-block #contact-form li {
			border-bottom:1px solid #363630;	
			position: relative;		
			height: 1%;		
			padding: 15px 0 18px;
			}							
		#contact-block #contact-form li.send {
			float: right;
			border-bottom: 0px;	
			}					
			#contact-block #contact-form li.send input {
				background:transparent url(/images/common/send-btn.gif) no-repeat scroll center top;	
				display: block;
				border: 0 none;
				cursor: pointer;
				overflow: hidden;
				text-indent: -9000px;		
				clear:both;
				height: 37px;
				width: 131px;
				}										
		#contact-block #contact-form input, #contact-content #contact-rightcol #contact-form textarea {
			width: 180px;
			}				
		#contact-block #contact-form form {
			padding: 0;
			margin: 0;
			}																															
.form-secondary {
	}	
/***********************/	
	
		
#contact-block {
	margin: 9px 0 30px 0;
	background-color: #23231E;
	}	
	.contact-secondary {
		padding: 30px 0 0 30px;
		}
#header {
	height: 75px;
	width: 960px;
	}	
#nav {
	height: 36px;
	}
#quick-links {
	text-align: right;
	height: 39px;
	}	
#feature {
	background: url(/images/headers/home-main-header.gif) no-repeat 10px top;
	height: 235px;
	overflow: hidden;
	width: 960px;
	margin-top: 56px;
	margin-bottom: 35px;
	}
#facts-wrap {
	background: #2f2f29 url(/images/common/home-facts-repeat.gif) repeat-x left top;
	overflow:hidden;
	}	
#facts {
	background: url(/images/content/facts-bg.gif) no-repeat center 19px;	
	color: #a5a5a5 !important;
	overflow: hidden;
	}	
#work-wrap {
	background: #2f2f29 url(/images/common/home-facts-repeat.gif) repeat-x left top;
	overflow:hidden;
	}	
#team-wrap {
	background: #2f2e29 url(/images/common/home-facts-repeat.gif) repeat-x left top;
	overflow:hidden;
	}		
#our-work {
	width: 960px;
	overflow: hidden;
	}	
#profiles {
	width: 960px;
	overflow: hidden;
	}		
#work {
	color: #a5a5a5 !important;
	overflow: hidden;
	}
.profile-wrap {
	width: 720px;
	float:left;
	overflow: hidden;
	margin-bottom: 18px;
	}		
#team {
	color: #a5a5a5 !important;
	overflow: hidden;
	}			
#footer p, #facts p, #our-work p {
	color: #a5a5a5;	
	}	
#news-home {
	margin-top: 30px;
	}		
#our-mission {
	background:transparent url(/images/common/rule-grey-shadow-repeat.gif) repeat-x scroll left top;
	padding-top: 36px;
	margin-top: 10px;
	margin-bottom: 8px;
	float: left;
	width: 100%;
	}
#about-right-col-wrap {
	background:transparent url(/images/common/services-right-col-gradient-repeat.gif) repeat-x scroll left 1px;
	overflow: hidden;
	width: 379px;
	margin-left: 1px;
	}	
#faq-single-col {
	padding-top:36px;
	}		
#content {
	overflow: hidden;
	width: 960px;
	}
#footer {
	background:#23231E url(/images/common/footer-repeat.gif) repeat-x scroll center top;
	color: #a5a5a5 !important;	
	height:241px;
	padding-top: 26px;
	text-align:left;
	}
#credits {
	width: 960px;
	float: left;
	padding-top: 40px;
	}
#page-headline {
	margin-top: 68px;
	margin-bottom: 28px;	
	}	
#cs-logo {
	margin-top: 75px;
}	
#feature #description {
	margin-left: 20px;
	margin-top: 30px;
}		
#search {
	font-weight: bold;
	font-size: 11px;
	line-height: 36px;
	text-align: right;
	}
span.rule-grey {
	background:transparent url(/images/common/rule-grey-shadow-repeat.gif) repeat-x scroll center bottom;
	height: 8px;
	width: 940px;
	margin: 0 10px;
	line-height: 0;
	float: left;
	}	
.rule-grey-540 {
	background:transparent url(/images/common/rule-grey-shadow-repeat.gif) repeat-x scroll center top;
	height: 8px;
	margin-top: 15px;
	margin-bottom: 36px;
	width: 540px;
	}
.post-content {
	display: block;
	}		
.post-meta {
overflow: hidden;
	margin-bottom: 5px;
	width: 100%;
	}	
.single-post .post-meta {
	margin-bottom: 18px;
	}		
.post {
border-bottom:1px solid #ECECEC;
margin-bottom:36px;
overflow:hidden;
padding-bottom:36px;
	}
#client .post {
border-bottom:0;
margin-bottom:0;
padding-bottom:0;
	}	
	.single-post .post {
	border: none;
	padding: 0 !important;
	overflow: hidden; 
	margin-bottom: 26px !important;
	}		
#no-margin {
	margin-bottom: 0;
	}		
#services-left-col, #about-left-col, #blog-left-col {
	padding-top:18px;
	}	
#services-right-col, #blog-right-col {
	background:transparent url(/images/common/right-col-rule-vertical.gif) no-repeat scroll left top;	
	}	
#about-right-col {
	background:transparent url(/images/common/right-col-rule-vertical.gif) no-repeat scroll left top;	
	}	
#call-to-action {
	float: left;
	margin: 46px 0 30px;
	padding-left: 47px;
	width: 100%;
	}	
#call-to-action-services {
	float: left;
	margin-top: 10px;
	padding-left: 20px;
	width: 100%;
	}			
.container_12,
.container_16 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	}
.center {
	width: 960px;
	margin: 0px auto;
	overflow: hidden;
	}
.copyright {
	text-align: right;
	}	
.right {
	float:right !important;
	}	
	
/* 02. `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	display: inline;
	float: left;
	position: relative;
	margin-left: 10px;
	margin-right: 10px;
}
.showgrid {background:transparent url(/images/common/grid.png) repeat-y scroll 0 0;}

.background-color-ccc {background-color:#CCC;}
.background-color-999 {background-color:#999;}


/* 03. `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {margin-left: 0;}
.omega {margin-right: 0;}

/* 04. `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.grid_1 {width: 60px;}
.grid_2 {width: 140px;}
.grid_3 { width: 220px;}
.grid_4 {width: 300px;}
.grid_5 {width: 380px;}
.grid_6 {width: 460px;}
.grid_7 {width: 540px;}
.grid_8 {width: 620px;}
.grid_9 {width: 700px;}
.grid_10 {width: 780px;}
.grid_11 {width: 860px;}
.grid_12 {width: 940px;}


/* 05. `Prefix Extra Space >> Global
----------------------------------------------------------------------------------------------------*/

.prefix_3,
.container_16 .prefix_4 {padding-left: 240px;}

.prefix_6,
.container_16 .prefix_8 {padding-left: 480px;}

.prefix_9,
.container_16 .prefix_12 {padding-left: 720px;}

/* 06. `Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.prefix_1 {padding-left: 80px;}
.prefix_2 {padding-left: 160px;}
.prefix_4 {padding-left: 320px;}
.prefix_5 {padding-left: 400px;}
.prefix_7 {padding-left: 560px;}
.prefix_8 {padding-left: 640px;}
.prefix_10 {padding-left: 800px;}
.prefix_11 {padding-left: 880px;}

/* 07. `Suffix Extra Space >> Global
----------------------------------------------------------------------------------------------------*/

.suffix_3,
.container_16 .suffix_4 {padding-right: 240px;}

.suffix_6,
.container_16 .suffix_8 {padding-right: 480px;}

.suffix_9,
.container_16 .suffix_12 {padding-right: 720px;}

/* 08. `Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.suffix_1 {padding-right: 80px;}
.suffix_2 {padding-right: 160px;}
.suffix_4 {padding-right: 320px;}
.suffix_5 {padding-right: 400px;}
.suffix_7 {padding-right: 560px;}
.suffix_8 {padding-right: 640px;}
.suffix_10 {padding-right: 800px;}
.suffix_11 {padding-right: 880px;}

/* 09. `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

* html .clearfix {
	height: 1%;
}	
#screenshot{
	position:absolute;
	border:1px solid #2F2F29;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	width: 250px;
	overflow:hidden;
	} 
/* Easy Slider */
	#slider {
		width: 960px !important;
		height: 800px !important;
		overflow: hidden !important;
		}
#slider li ul li{
width:auto;
height: auto;
}
	#client ul {
		display: none;
		}

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:960px;
		height: 800px;
		overflow:hidden; 
		}