/* COLORS:
 *	#585858 - dark grey
 *	#959595 - medium grey
 *	#cdcdcd - light grey
 *	#ffffff - white
 *	#f5f9fc - offwhite
 *	#00c2ef - cohesivecc blue
 *	#d8edf3 - washed-out cohesivecc blue
 *	#0095c0 - darker cohesivecc blue
 */

body {
	margin: 0px;
	padding: 0px;
	text-align: center;
	background: #f5f9fc;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 10px;
	line-height: 16px;
	color: #585858;
	}
	
#about #aboutus, #contact #contactus {
	height: 300px;
	overflow: hidden;
	}
	
a {
	color: #00c2ef;
	outline: none;
	text-decoration: none;
	}
	a:hover { color: #0095c0; }
	a img { border-width: 0px; }
	
h1, h2, h3, h4 {
	margin: 0px;
	padding: 0px;
	text-align: middle;
	}
	h1 {
		font-size: 16px;
		line-height: 20px;
		}
	h2 {
		font-size: 14px;
		line-height: 18px;
		}
	h3 {
		font-size: 12px;
		line-height: 16px;
		}
	h4 {
		font-size: 11px;
		line-height: 14px;
		}
		
.reset {
	display: block; 
	clear: both; 
	font-size: 1px; 
	height: 1px; 
	line-height: 0.1;
	}
	
div#frame {
	margin: 0 auto;
	width: 950px;
	text-align: left;
	background: #00c2ef url('/images/structure/swirls.gif') top center no-repeat;
	}
	
div#header {
	height: 126px;
	position: relative;
	}
	div#header .inner {
		background: #585858;
		color: #00c2ef;
		width: 633px;
		height: 126px;
		position: absolute;
		top: 0px;
		right: 0px;
		}
		div#header a.logo h1 {
			width: 146px;
			height: 28px;
			background: url('/images/structure/logo.gif') top left no-repeat;
			text-indent: -9999px;
			position: absolute;
			bottom: 16px;
			left: 16px;
			cursor: pointer;
			}
			
	div#header ul.nav {
		list-style: none;
		margin: 0px;
		padding: 0px;
		position: absolute;
		bottom: 12px;
		right: 6px;
		}
		div#header ul.nav li {
			display: block;
			float: left;
			text-transform: uppercase;
			font-size: 11px;
			margin: 0px 14px;
			}
			
			div#header ul.nav li a {
				display: block;
				/*
				background: url('/images/structure/main_nav.gif') no-repeat;
				text-indent: -9999px;*/
				text-align: left;
				height: 10px;
				line-height: 10px;
				}
			
			div#header ul.nav li.home a			{ width: 32px; }
			div#header ul.nav li.portfolio a	{ width: 68px; background-position: -32px 0px; }
			div#header ul.nav li.about a		{ width: 41px; background-position: -100px 0px; }
			div#header ul.nav li.contact a		{ width: 55px; background-position: -141px 0px; }
			
			div#header ul.nav li.home a:hover			{ background-position: -0px -10px; }
			div#header ul.nav li.portfolio a:hover		{ background-position: -32px -10px; }
			div#header ul.nav li.about a:hover			{ background-position: -100px -10px; }
			div#header ul.nav li.contact a:hover		{ background-position: -141px -10px; }
			
		body#home ul.nav li.home a				{ color: #cdcdcd; background-position: 0px -20px; }
		body#portfolio ul.nav li.portfolio a	{ color: #cdcdcd; background-position: -32px -20px; }
		body#about ul.nav li.about a			{ color: #cdcdcd; background-position: -100px -20px; }
		body#contact ul.nav li.contact a		{ color: #cdcdcd; background-position: -141px -20px; }
			
div#grid {	
	width: 100%;
	}
	
	div#grid .empty { height: 200px; }
	
div#grid ul {
	display: block;
	list-style: none;
	margin: 0px;
	padding: 0px;
	position: relative;
	height: 603px;
	}
	
	div#grid ul.gridsix { height: 401px; margin-top: 201px; }
	
	div#grid li {
		position: absolute;
		width: 316px;
		height: 200px;
		border: 1px #ffffff solid;
		background: #cdcdcd;
		}
		
		div#grid li.large {
			width: 633px;
			height: 401px;
			}
		
		div#grid li.row1	{ top: 0px; }
		div#grid li.row2	{ top: 201px; }
		div#grid li.row3	{ top: 402px; width: 316px; height: 200px; }
		
		div#grid li.col1	{ left: -1px; }
		div#grid li.col2	{ left: 316px; }
		div#grid li.col3	{ left: 633px; width: 316px; height: 200px; }
		
	/*
	div#grid li {
		width: 316px;
		height: 200px;
		background: #cdcdcd;
		margin: 1px 0px 0px;
		display: block;
		float: left;
		}
		div#grid li.two, div#grid li.five, div#grid li.eight {
			margin: 1px 1px 0px;
			}
			*/
		div#grid li img {
			vertical-align: middle;
			}
		div#grid li div {
			background: #585858;
			height: 28px;
			padding: 11px 12px;
			overflow: hidden;
			color: #00c2ef;
			text-transform: uppercase;
			}
			div#grid li div h2 {
				color: #ffffff;
				letter-spacing: .6px;
				font-size: 11px;
				line-height: 11px;
				margin-bottom: 2px;
				}
			div#grid li div em {
				font-style: normal;
				}

div#footer {
	margin: 15px auto;
	width: 950px;
	text-transform: uppercase;
	text-align: center;
	color: #585858;
	font-size: 9px;
}

	div#footer .small-notice {
		font-size: 8px;
		color: #ddd;
		}

p.small {
	font-size: 8px;
	line-height: 10px;
	text-align: center;
	}

div.feature {
	border-top: 1px solid #FFF;
	background: #585858;
	position: relative;
	z-index: 5;
	}
	
	div.feature .details {
		padding: 12px 12px 0px;
		font-size: 11px;
		line-height: 15px;
		color: #e9e9e9;
		position: relative;
		z-index: 10;
		}
		
		div.feature div.ph {
			height: 390px; 
			background: #cdcdcd; 
			text-align: center; 
			line-height: 390px;
			}
		
		div.feature .details p {
			margin: 0px;
			padding: 0px 0px 12px;
			}
			
		div.feature .details ul {
			margin: 0px;
			padding: 0px 0px 12px 15px;
			}
		
		div.feature .details em {
			font-style: normal;
			font-size: 12px;
			text-decoration: underline;
			}
		
		div.feature .details .third {
			position: relative;
			width: 265px;
			margin-right: 35px;
			float: left;
			z-index: 15;
			}
			
		div.feature .details .bigthird {
			position: relative;
			width: 287px;
			margin-right: 35px;
			float: left;
			z-index: 15;
			}
		
		div.feature .details .two-thirds {
			position: relative;
			width: 565px;
			margin-right: 35px;
			float: left;
			z-index: 15;
			}
			
		div.feature .details .half {
			position: relative;
			width: 440px;
			margin-right: 35px;
			float: left;
			z-index: 15;
			}

		div.feature .details strong {
			color: #f5f5f5;
			font-size: 11px;
			text-transform: uppercase;
			letter-spacing: .5px;
			}
		
		#portfolio div.feature .details a {
			text-decoration: underline;
			text-transform: uppercase;
			}

div.tall {
	margin-top: 201px;
	}
	div.tall .details {
		font-size: 12px;
		line-height: 17px;
		}
		div.tall .details strong {
			font-size: 12px;
			}
		div.tall .details strong.name {
			text-transform: none;
			}


/* ABOUT SECTION */
body#about div.details {
	padding-top: 30px;
	padding-bottom: 20px;
	min-height: 603px;
	}
	
	body#about div.details h1 {
		font-size: 20px;
		text-transform: uppercase;
		margin-bottom: 10px;
		font-weight: lighter;
		}
	
	body#about div.details p {
		font-size: 17px;
		line-height: 22px;
		font-weight: lighter;
		}
	
	
	body#about div.details .bio h2 {
		margin-bottom: 10px;
		}
		
		body#about div.details .bio p {
			font-size: 11px;
			line-height: 15px;
			}
		
	body#about div.feature .details .two-thirds .third {
		margin-top: 40px;
		margin-right: 30px;
		padding: 0px;
		}
		body#about div.feature .details .no-right {
			margin-right: 0px !important;
			}
		
	body#about div.feature .details strong {
		text-transform: none !important;
		font-size: 17px;
		}
	
	body#about div.feature .details table {
		margin-top: 15px;
		}	
		body#about div.feature .details table td {
			vertical-align: top;
			padding-right: 15px;
			width: 50%;
			}
			body#about div.feature .details table td p {
				font-size: 15px;
				}
	
ul.about-submenu {
	list-style: none;
	}
	ul.about-submenu li {
		list-style: none;
		}

div.technology-list {
	position: relative;
	margin-top: 20px;
	}
	
ul#technologies {
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 308px;
	}
	ul#technologies li {
		margin: 0px;
		padding: 0px;
		width: 70px;
		height: 70px;
		float: left;
		margin-right: 7px;
		margin-bottom: 7px;
		}
		ul#technologies li div.content {
			text-indent: -9999px !important;
			display: none;
			}
		ul#technologies li h3 {
			margin: 0px;
			padding: 0px;
			width: 70px;
			height: 70px;
			text-indent: -9999px;
			background: transparent url('/images/structure/technologies.png') no-repeat left top;
			}				
			ul#technologies li.ruby h3		{ background-position: 0px 0px; 	}
				ul#technologies li.ruby h3.on		{ background-position: 0px -70px; 	}
			ul#technologies li.rails h3 	{ background-position: -70px 0px; 	}
				ul#technologies li.rails h3.on		{ background-position: -70px -70px; 	}
			ul#technologies li.flash h3		{ background-position: -140px 0px; 	}
				ul#technologies li.flash h3.on		{ background-position: -140px -70px; 	}
			ul#technologies li.mysql h3 	{ background-position: -210px 0px; 	}
				ul#technologies li.mysql h3.on		{ background-position: -210px -70px; 	}
			ul#technologies li.php h3 		{ background-position: -280px 0px; 	}
				ul#technologies li.php h3.on		{ background-position: -280px -70px; 	}
			ul#technologies li.jquery h3 	{ background-position: -350px 0px; 	}
				ul#technologies li.jquery h3.on		{ background-position: -350px -70px; 	}
			ul#technologies li.git h3 		{ background-position: -420px 0px; 	}
				ul#technologies li.git h3.on		{ background-position: -420px -70px; 	}
			ul#technologies li.mac h3 		{ background-position: -490px 0px; 	}
				ul#technologies li.mac h3.on		{ background-position: -490px -70px; 	}

div.technology-list div.blue-bar {
	background: transparent url('/images/structure/tech_bar.gif') no-repeat top left;
	width: 283px;
	height: 17px;
	position: absolute;
	top: 61px;
	z-index: 10;
	}
	div.technology-list div.bottom {
		background-position: 0px -12px;
		top: 69px;
		}
		
		div.technology-list div.one 	{ left: 30px; }
		div.technology-list div.two 	{ left: 107px; width: 206px; }
		div.technology-list div.three 	{ left: 184px; width: 129px; }
		div.technology-list div.four 	{ left: 261px; width: 52px;}
	
div#technology-description {
	width: 304px;
	height: 143px;
	background: transparent url('/images/structure/technology-description.png') no-repeat top left;
	top: 2px;
	left: 308px;
	position: absolute;
	}
	div#technology-description div.inner {
		font-size: 11px;
		padding: 20px;
		}	
		body#about div.feature .details div#technology-description div.inner strong {
			font-size: 11px !important;
			text-transform: uppercase !important;
			}
		div#technology-description div.inner ul {
			margin-top: 6px;
			margin-bottom: 8px;
		}	
		
/* END ABOUT SECTION */


			
div.map-container {
	width: 290px;
	height: 345px;
	border: 1px solid #acacac;
	}
		
div.pagination {
	text-align: right;
	width: 950px;
	margin: 0 auto;
	height: 17px;
	padding: 2px;
	}
	
	div.pagination a, div.pagination span {
		color: #959595;
		font-weight: bold;
		padding: 2px 6px;
		}
		
		div.pagination a {
			color: #FFF;
			background-color: #00c2ef;
			font-size: 11px;
			line-height: 16px;
			}
			
			div.pagination a:hover {
				background-color: #FFF;
				color: #00c2ef;
				}
		
		div.pagination span {
			background-color: #959595;
			color: #FFF;
			cursor: default;
			}
			
a.action {
	text-transform: uppercase;
	font-size: 10px;
	}