/* 

Simple Square Style Sheet
Date: 		Summer 2010 - revised May 2011
Author: 	Simple Square
Location:	css/styles.css

*/

body{
	margin: 0;
	padding: 0;	
	height: 100%;
	width: 100%;
	color: #231f20;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 16px;
	-webkit-text-size-adjust: none;
	}
	h2{
		margin: 0 0 16px;
		font-size: 24px;
		}	
	
/* structure */	
			
	#site{
		width: 900px;
		height: 100%;
		background: #fff;
		margin: 0 auto;
		}
		.head,
		.mission,
		.content,
		.work,
		.foot {
			width: 800px;
			clear: both;
			margin: 0 auto;
			}
		.foot{
			height: 100px;
			}	
		.head,
		.mission,
		.content,
		.work{
			border-bottom: 1px solid #ddd;
			}
		.mission{
			min-height: 110px;
			}	
		
/* header */
		
	.head{
		height: 166px;
		margin-bottom: 30px;
		overflow: hidden;
		}
	.head a.home-request,
	.head a.home-request:visited{
		display: block;
		float: right;
		margin: 85px 0 0;
		font-size: 18px;
		line-height: 30px;
		height: 30px;
		padding: 0 8px;
		border: none;
		background: #231f20;
		color: #fff;
		text-align: center;
		}
		.head a.home-request:focus,
		.head a.home-request:hover{
			background: #fff;
			color: #231f20;
			border-bottom: dotted 1px #ccc;
			}	
		@-moz-document url-prefix() {
			.head a.home-request,
			.head a.home-request:visited{
				line-height: 28px;
				}
			}	
		
		
		
	a,
	a:visited{
		text-decoration: none;
		border-bottom: dotted 1px #ccc;
		color: #231f20;
		background: #fff;
		}
		a:hover,
		a:focus{
			text-decoration: none;
			border-bottom: 1px solid #fff;
			color: #fff;
			background: #231f20;
			}
	a.home-link,
	a.home-link:visited,
	a.home-link:hover,
	a.home-link:focus{
		border: none;
		text-decoration: none;
		}
	li.current-cat a{
		text-decoration: none;
		border-bottom: 1px solid #fff;
		color: #fff;
		background: #231f20;
		}		
		
		
		

	.contact-us{
		cursor: pointer;
		}		
		.clear{
			clear: both;
			}
			
			
	.mission{
		padding-bottom: 38px;
		}
		.mission h1{
			visibility: hidden; /* set to invisble to start */
			font-size: 30px;
			line-height: 34px;
			font-weight: bold;
			margin: 0;
			padding: 0;
			float: left;
			width: 530px;
			}
			.mission h1 span{
				font-size: 20px;
				}
		.mission p{
			visibility: hidden; /* set to invisble to start */
			width: 540px;
			float: left;
			clear: left;		
			margin: 23px 0 0;
			
			}
			.mission p.sub-head{
				font-size: 18px;
				line-height: 24px;
				font-weight: bold;
				}

	.content,
	.work{
		padding: 42px 0 34px 0;
		}
	.content{
		visibility: hidden; /* set to invisble to start */
		}			
	.left{
		width: 375px;
		float: left;
		}
	.right{
		width: 375px;
		float: right;
		}
	.content ul{
		margin: 0;
		}
	.content strong{
		font-size: 14px;
		line-height: 18px;
		}
		
	.work .item{
		padding: 0 0 0 10px;
		width: 365px;
		}
		.work .item a.aimg{
			margin: 0 0 10px -10px;
			}
		.work .item a img,
		.work .item a:visited img{
			background: #eee;
			margin-bottom: -3px;
			}
			.work .item a:hover img,
			.work .item a:focus img{
				background: #ddd;
				}
		.work .item strong{
			font-size: 14px;
			line-height: 18px;
			display: block;
			margin-top: 10px;
			}
		.work ul.hover-block {
			display: block;
			overflow: hidden;
			margin: 7px 0;
			}
			.work div.sleft{
				float: left;
				margin-left: -40px;
				}
			.work div.sright{
				float: right;
				}
			.work ul.hover-block li{
				list-style: none;
				background: #eee;
				position: relative;
				margin: 0;
				padding: 10px;
				}	
				.work ul.hover-block li a.hover{
					display: block;
					border: none;
					background: none;
					text-decoration: none;
					position: relative;
					overflow: hidden;
					height: 180px;
					width: 355px;
					}
					.work ul.hover-block li a img.hover{
						position: absolute;
						top: 180px;
						left: 0;
						border: 0;
						background: none;
						padding: 0;
						}
					.work ul.hover-block li a img{
						border: 0;
						background: none;
						padding: 0;
						}
				.work div.sleft p,
				.work div.sright p{
					display: block;
					margin: 0 0 20px 40px;
					padding: 0 10px;
					background: white;
					}
				.work div.sleft p strong,
				.work div.sright p strong{
					font-size: 14px;
					line-height: 18px;
					display: block;
					}
				.thumb{
					visibility: hidden; /* set to invisble to start */
					}	

/* foot */
			
/*
	.foot{
		padding: 36px 0 100px;
		font-size: 14px;
		line-height: 18px;
		}
		.foot .left{
			width: 375px;
			float: left;
			}
			.foot .left h2,
			.foot .right h2{
				margin: 0 0 24px;
				}
			.foot .left span{
				display: block;
				padding: 0 0 6px 30px;
				}	
			.foot .left span.twitter{
				background: url(../images/site/twitter.gif) no-repeat 0 -2px;
				}
			.foot .left span.facebook{
				background: url(../images/site/facebook.gif) no-repeat 0 -2px;
				}
			.foot .left span.newsletter{
				background: url(../images/site/newsletter.gif) no-repeat 0 -2px;
				}
		.foot .right{
			width: 375px;
			float: right;
			}
			.foot .right div{
				float: left;
				width: 160px;
				}
			.foot .right div.first-left{
				padding: 0 50px 0 1px;
				}
			.foot .right div strong{
				display: block;
				font-size: 18px;
				margin: 0 0 12px;
				}
*/
				
				
	.foot{
		padding: 36px 0 100px;
		font-size: 14px;
		line-height: 18px;
		}			
		.foot div{
			width: 260px;
			height: 68px;
			float: left;
			}
			.foot div.right,
			.foot div.left{
				margin-right: 10px;
				}	
				.foot h2,
				.foot h2{
					margin: 0 0 15px;
					}
				.foot strong{
					display: inline-block;
					width: 60px;
					}
				
				
	
/* content */

	ul.main-nav{
		list-style: none; 
		list-style-type: none;
		margin: 4px 0 0 540px;
		padding: 0;
		float: right;
		position: absolute;
		text-align: right;
		width: 260px;
		}
	ul.main-nav li{
		list-style: none; 
		list-style-type: none;
		margin: 0 0 6px 0;
		padding: 0;
		font-size: 14px;
		}
		ul.main-nav li a{
			padding: 0 1px;
			display: inline-block;
			}
		@-moz-document url-prefix() {
			ul.main-nav li{
				margin: 0 0 6px 0;
				}
			ul.main-nav li a{
				padding: 2px 1px 0px 1px;
				}	
			}	

	.page-content {
		display:block
		}
	
/* home slider */

	.home-slider .slider{
		margin: 0;
		padding: 0;
		width: 800px;
		height: 390px;
		background: #231f20;
		color: #fff;
		overflow: hidden;
		}
		.home-slider .slider div{
			margin: 0;
			padding: 0;
			position: relative;
			width: 800px;
			height: 390px;
			}
			.home-slider .slider div img{
				width: 800px;
				height: 390px;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
				}
			.home-slider .slider div div{
				position: relative;
				z-index: 1;
				}
			.home-slider .slider div h2{
				font-size: 24px;
				line-height: 30px;
				margin: 0;
				}
			.home-slider .slider div p{
				font-size: 18px;
				line-height: 22px;
				margin: 10px 0 24px;
				font-weight: lighter;
				}				
				.home-slider .slider div small{
					font-size: 12px;
					display: block;
					}
				.home-slider .slider div a,
				.home-slider .slider div a:visited{
					display: inline-block;
					font-size: 18px;
					line-height: 30px;
					height: 30px;
					padding: 0 8px;
					font-weight: bold;
					color: #000;
					background: #fff;
					border-bottom: 1px solid #231f20;
					text-decoration: none;
					}
					.home-slider .slider div a:hover,
					.home-slider .slider div a:focus{
						color: #fff;
						background: #231f20;
						border-bottom: 1px dotted #666;
						text-decoration: none;
						}
					@-moz-document url-prefix() {
						.home-slider .slider div a,
						.home-slider .slider div a:visited{
							line-height: 28px;
							}
						}
						
			/* - Slide one Left justified
			.home-slider .slider div.one h2{
				padding: 36px 0 0 50px;
				}
			.home-slider .slider div.one p{
				padding: 0 0 0 50px;
				width: 285px;
				}	
			.home-slider .slider div.one a{
				margin: 0 0 0 50px;
				}
			.home-slider .slider div.one small{
				padding: 110px 0 0 50px;
				}
			*/
				
			.home-slider .slider div.one h2{
				padding: 37px 0 0 457px;
				width: 320px;
				}
			.home-slider .slider div.one p{
				padding: 0 0 0 457px;
				width: 285px;
				}	
			.home-slider .slider div.one a{
				margin: 0 0 0 457px;
				}
			.home-slider .slider div.one small{
				padding: 132px 0 0 457px;
				color: #777;
				font-size: 10px;
				}	
			.home-slider .slider div.two h2{
				padding: 50px 0 0 50px;
				}
			.home-slider .slider div.two p{
				padding: 0 0 0 50px;
				width: 285px;
				}	
			.home-slider .slider div.two a{
				margin: 0 0 0 50px;
				}
			.home-slider .slider div.three h2{
				padding: 60px 0 0 50px;
				}
			.home-slider .slider div.three p{
				padding: 0 0 0 50px;
				width: 320px;
				}	
			.home-slider .slider div.three a{
				margin: 0 0 0 50px;
				}
			.home-slider .slider div.four h2{
				padding: 37px 0 0 457px;
				font-size: 30px;
				line-height: 34px;
				width: 320px;
				}
			.home-slider .slider div.four p{
				padding: 0 0 0 457px;
				width: 285px;
				}	
			.home-slider .slider div.four a{
				margin: 0 0 0 457px;
				}
					
			.slider-nav{
				clear: both;
				width: 40px;
				height: 40px;
				position: relative;
				z-index: 9999;
				top: -54px;
				left: 746px;
				background:  url(../images/site/overlay.png) repeat;
				padding: 10px 4px 4px 10px;
				}	
				.slider-nav a,
				.slider-nav a:visited{
					background: #999;
					color: #999;
					display: block;
					width: 14px;
					height: 14px;
					float: left;
					font-size: 1px;
					text-decoration: none;
					margin: 0 6px 6px 0;
					border: none;
					outline: none;
					}
				.slider-nav a:hover,
				.slider-nav a:focus{
					background: #999;
					color: #999;
					}	
				.slider-nav a.activeSlide{ 
					background: #fff;
					color: #fff;
					}
				
		
/* home page content */

	.home-content {
		float: left;
		width: 800px;
		margin: -10px 0 0;
		}
		.home-content .right{
			width: 230px;
			height: 120px;
			background: url(../images/site/home-icon.gif) no-repeat;
			margin: 0;
			}
		.home-content .left{
			width: 520px;
			margin: 0;
			}
			.home-content .left h3{
				line-height: 22px;
				font-size: 18px;
				margin: -2px 0 0;
				}


/* portfolio */

	div.portfolio-wrapper{
		visibility: hidden; /* set to invisble to start */
		width: 780px;
		height: 450px;
		padding: 10px;
		margin: 24px 0 0 0;
		background: #eee;
		overflow: auto;
		position: relative;
		}
	ul.portfolio{
		list-style: none; 
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 780px;
		height: 450px;
		}
		ul.landing{
			margin: -450px 0 0;
			}
		ul.portfolio li{
			list-style: none; 
			list-style-type: none;
			margin: 0;
			padding: 0;
			}
			ul.portfolio li img{
				margin: 0 0 0 0;
				padding: 0;
				width: 780px;
				height: 450px;
				border: none;
				color: #fff;
				}
		#nav{
			/* display: none; */
			position: absolute;
			overflow: hidden;
			z-index: 100;
			list-style: none;
			list-style-type: none;
			margin: 0;
			padding: 0;
			top: 192px;
			width: 780px;
			height: 65px;
			}
			#nav li{
				width: 160px;
				height: 65px;
				}
			#nav li a,
			#nav li a:visited,
			#nav li a:hover,
			#nav li a:focus{
				display: block;
				width: 160px;
				height: 65px;
				text-decoration: none;
				border: none;
				background-color: none;
				}
				#nav li#prev a{
					float: left;
					background: url(/images/site/previous.png) no-repeat;
					}
				#nav li#next a{
					float: right;
					background: url(/images/site/next.png) no-repeat;
					}
					#nav li#prev{
						float: left;
						position: absolute;
						width: 160px;
						left: -160px;
						}
					#nav li#next{
						float: right;
						position: absolute;
						width: 160px;
						right: -160px;
						}	

		.overlay-wrapper{
			height: 450px;
			width: 780px;
			overflow: hidden;
			position: relative;
			}	
		.overlay{
			position: absolute;
			top: 450px;
			left: 0px;
			width: 780px;
			height: 450px;
			background: url(/images/site/overlay.png) repeat;
			z-index: 100;
			color: #fff;
			line-height: 16px;
			}
			.overlay a,
			.overlay a:visited{
				background: none;
				color: #fff;
				border-bottom: dotted #666 1px;
				}
				.overlay a:hover,
				.overlay a:focus{
					background: none;
					color: #ccc;
					border-bottom: dotted #999 1px;
					}
			.overlay h2{
				font-weight: lighter;
				line-height: 24px;
				}
			.overlay .left{
				float: left;
				width: 450px;
				margin: 30px 0 0 30px;
				padding: 0;
				}
			.overlay .right{
				float: right;
				width: 220px;
				margin: 58px 30px 0 0;
				padding: 0;
				}
			.overlay strong{
				font-size: 14px;
				}	
		.work .video{
			background: #eee;
			padding: 10px;
			width: 780px;
			height: 585px;
			}
		
		.contact-us-left{
			width: 434px;
			}
			.contact-us-left p.privacy{
				margin: 0 0 20px;
				font-weight: bold;
				}
			.contact-us-left ul{
				margin: 0;
				padding: 0 20px;
				}
				.contact-us-left ul li{
					margin: 0;
					padding: 6px 0;
					}	
				
		.contact-us-right{
			width: 260px;
			}
			.contact-us-right h3{
				margin: 0;
				}	
			.contact-us-right p{
				margin: 10px 0 30px;
				}
		form{
			margin: 0px 0 0;
			}					
		#submission{
			border: none;
			background: none;
			font-size: 14px;
			line-height: 14px;
			padding: 4px 6px 6px 4px;
			font-weight: bold;
			float: right;
			cursor: pointer;
			border-bottom: dotted 1px #ccc;
			}
			#submission:hover,
			#submission:focus{
				text-decoration: none;
				border-bottom: solid 1px #fff;
				color: #fff;
				background: #231f20;
				}
		textarea{
			width: 416px;
			height: 160px;
			padding: 8px;
			font-family: Helvetica, Arial, sans-serif;
			background: #fff;
			border: 1px #ddd solid;
			color: #999;
			font-size: 14px;
			margin: 0 0 10px 0;
			}
		form.request textarea{
			height: 80px;
			}
		form.request label{
			display: block;
			padding: 10px 0 4px;
			font-size: 14px;
			color: #999;
			}	
			
				
		input.field{
			width: 258px;
			padding: 8px;
			background: #fff;
			border: 1px #ddd solid;
			color: #999;
			font-size: 14px;
			margin: 0 0 6px 0;
			}
		input.field-news{
			width: 416px;
			padding: 8px;
			background: #fff;
			border: 1px #ddd solid;
			color: #999;
			font-size: 14px;
			margin: 0 0 6px 0;
			}				

					
/* Images */

	.foot img{
		width: 259px;
		height: 68px;
		border: none;
		}
	.head img{
		width: 375px;
		height: 200px;
		border: none;
		float: left;
		}
	.work img{
		width: 356px;
		height: 180px;
		padding: 10px;
		border: none;
		}	
			
			
			
/* 10 prinipals registration page */

div.effective-web-design-right{
	width: 220px;
	}
div.effective-web-design-left{
	width: 530px;
	}
	
	div.effective-web-design-left span{
		width: 510px;
		height: 261px;
		padding: 10px;
		background: #eee;
		margin: 0 0 10px;
		display: block;
		}
	
		div.effective-web-design-left span img.effective-web-design{
			width: 510px;
			height: 261px;
			}
		
		
		
	div.effective-web-design-left p{
		padding: 0 10px;
		}

#form-10 input.field{
	width: 202px;
	padding: 8px;
	}
	
h3.no-register{
	clear: both;
	margin: 60px 0 0;
	}
	
	
/* results page */	
	
.results h2{
	/* padding: 0 0 10px; */
	}
.results h3{
	margin: 30px 0 16px;
	font-size: 24px;
	line-height: 24px;
	}	
.results ul{
	padding-left: 30px;
	}	
.results ul li{
	padding: 0;
	margin: 0;
	}
.results blockquote{
	padding: 24px 30px;
	margin: 30px 0;
	background: #eee;
	border: 1px solid #ddd;
	
	}
	.results blockquote h2{
		padding-bottom: 5px;
		}
	.results blockquote p{
		font-style: italic;
		font-family: Georgia, serif;
		font-size: 14px;
		line-height: 18px;
		color: #333;
		border-bottom: 1px solid #ddd;
		border-top: 1px solid #ddd;
		margin: -1px 0 0;
		padding: 14px 10px 8px;
		}
		.results blockquote p span{
			display: block;
			font-style: normal;
			font-family: Helvetica, Arial, sans-serif;
			font-size: 12px;
			line-height: 16px;
			text-align: right;
			padding: 6px 0;
			color: #999;
			}

.results .right .pos{

	}
	.results .right h3{
		font-size: 18px;
		line-height: 18px;
		}
	.results .contact-us-right p{
		padding: 0;
		margin: 0 0 10px;
		}
	.results .contact-us-right a,
	.results .contact-us-right a:visited{
		display: inline-block;
		font-size: 18px;
		line-height: 30px;
		height: 30px;
		margin: 6px 0 0;
		padding: 0 8px;
		border: none;
		background: #231f20;
		color: #fff;
		text-align: center;
		}
		.results .contact-us-right a:focus,
		.results .contact-us-right a:hover{
			background: #fff;
			color: #231f20;
			border-bottom: dotted 1px #ccc;
			}
		@-moz-document url-prefix() {
			.results .contact-us-right a,
			.results .contact-us-right a:visited{
				line-height: 28px;
				}
			}