/* 

Simple Square Style Sheet
Date: 		Summer 2010
Author: 	Simple Square
Location:	css/styles.css

*/

body{
	margin: 0;
	padding: 0;	
	height: 100%;
	width: 100%;
	color: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 16px;
	}
	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;
		}	
	.head{
		height: 166px;
		margin-bottom: 30px;
		overflow: hidden;
		}
	.head p{
		float: right;
		margin-top: 82px;
		font-size: 14px;
		line-height: 18px;
		text-align: right;
		}
	.head p strong{
		font-size: 18px;
		font-weight: bold;
		}	
	a,
	a:visited{
		text-decoration: none;
		border-bottom: dotted 1px #ccc;
		color: #000;
		background: #fff;
		}
		a:hover,
		a:focus{
			text-decoration: none;
			border-bottom: none;
			color: #fff;
			background: #000;
			}
	a.home-link,
	a.home-link:visited,
	a.home-link:hover,
	a.home-link:focus{
		border: none;
		text-decoration: none;
		}
	.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;
		}
	.contact-us{
		cursor: pointer;
		}		
		.clear{
			clear: both;
			}
	.mission{
		padding-bottom: 38px;
		}
	.mission p{
		visibility: hidden; /* set to invisble to start */
		width: 530px;
		float: left;
		clear: left;
		}	
	.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{
		padding: 36px 0;
		font-size: 14px;
		line-height: 18px;
		}			
		.foot div{
			width: 260px;
			height: 68px;
			float: left;
			}
			.foot div.left,
			.foot div.center{
				margin-right: 10px;
				}
	
/* 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 8px 0;
		padding: 0;
		font-size: 14px;
		}
	.page-content {
		display:block
		}

/* portfolio */
/*
	div.loader{
		width: 798px;
		height: 468px;
		margin: 24px 0 -494px 0;
		background: #fff;
		border: 1px solid #eee;
		visibility: hidden; 
		}
		div.loader img{
			width: 50px;
			height: 50px;
			margin: 209px 374px;
			}
*/
	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-right{
			width: 260px;
			}
			.contact-us-right h3{
				margin: 0;
				}	
			.contact-us-right p{
				margin: 10px 0 30px;
				}
		form{
			margin: 10px 0 0;
			}					
		#submission{
			border: none;
			background: none;
			font-size: 14px;
			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: #000;
				}
		textarea{
			width: 416px;
			padding: 8px;
			font-family: Helvetica, Arial, sans-serif;
			background: #fff;
			border: 1px #ddd solid;
			color: #999;
			font-size: 14px;
			margin: 0 0 10px 0;
			}
		input.field{
			width: 258px;
			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;
		}