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

   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
		
			Color 1 - color: #000;
		 	Color 2 - color: #333;
			Color 3 - color: #666;
 
/* 01. Containers   
-------------------------------------------------------------- */
#wrap {
	background: #FFF url(/images/common/repeat-bg.jpg) repeat-x left top;
	overflow: hidden;
	}
#wrap-sub {
	background: #FFF url(/images/common/repeat-bg-sub.jpg) repeat-x left top;
	overflow: hidden;
	}	
#container {
	position: relative;
	margin: 0 auto;
	width: 960px;
	}	
#header {
	background:transparent url(/images/common/header-bg.jpg) no-repeat scroll 10px 0;
	height: 161px;
	width: 960px;
	}
#nav {
	margin-top: 16px;
	}
#top-links {
	height: 35px;
	text-align: right;
	}	
#top-links img {
	padding-left: 5px;
	}
#service-area {
	overflow: hidden;
	width:960px;
	}	
#mid-features {
	overflow: hidden;
	margin-bottom: 18px;	
	width: 960px;
	}			
#stripe {
	height: 53px;
	width: 960px;
	}	
#sub-nav {
	overflow: hidden;
	height: 45px;
	width: 960px;
	}	
#content {
	overflow: hidden;
	width: 960px;
	}
#blog-content {
	margin-top: 18px;
	margin-bottom: 18px;
	overflow: hidden;
	width: 960px;
	}	
.blog-repeat {
	background: url(/images/common/repeat-bg-blog.gif) repeat-y scroll 40px center;	
	}	
#about-home-wrap {
	background: #3b3b3b url(/images/common/about-wrap-repeat-bg.jpg) repeat-x scroll left bottom;
	padding: 18px 0;
	overflow: hidden;
	}	
#about-home {
	width: 960px;
	margin: 0px auto;
	}
#footer {
	width: 960px;
	margin: 0px auto;
	}
#footer-wrap {
	color: #777777;
	padding: 18px 0;
	background:#292929;
	overflow: hidden;
	}	
.date {
	background: #FFF url(/images/common/date-bg.png) no-repeat scroll left center;
	width: 60px;
	height: 60px;
	display: block;
	padding: 5px 0;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	line-height: 18px;
	text-shadow:1px 2px 1px #178e9c;	
	}	
.container_12,
.container_16 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	}
#slider .secondary-380 {
	padding: 36px 0 0 36px;
	width: 380px;
	}	
#slider .secondary-460 {
	padding: 36px 0 0 36px;
	width: 460px;
	}		
	
#slider-wrap {
		width:940px;
		height:252px;
		margin-bottom: 18px;
		margin-left: 10px;
		overflow: hidden;		
	}	
.secondary-sitemap {
	overflow: hidden;
	padding:20px 40px 20px 40px;
	}		

/* 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%;
}	

/* Easy Slider */

	#slider{}	
	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;				
		}
	#slider li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:940px;
		height:252px;
		overflow:hidden;
		}	
	#prevBtn, #nextBtn{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-15px;
		top:340px;
		}	
#prevBtn, #nextBtn {
	text-indent:-8000px;
	}		
	#nextBtn{ 
		left:950px;
		}														
	#prevBtn a, #nextBtn a{  
		display:block;
		width:30px;
		height:77px;
		background:url(/images/common/btn-prev.png) no-repeat 0 0;	
		}	
	#nextBtn a{ 
		background:url(/images/common/btn-next.png) no-repeat 0 0;	
		}												

/* // Easy Slider */