/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
body {
	margin: 10px;
	background-color: #444;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12pt;
	font-weight: normal;
	line-height: 1.2em;
}
ol, ul {
	margin-left: 0;
}
/* /reset */
            
.clearBoth {
	clear: both;
}               
img {
	border: 0px none;
}
a, a:visited {
	color: #f15b29;
	font-weight: bold;
	text-decoration: none;
}
a:hover, a:active {
	color: #faac55;
}
a.linkedin {
	padding-right: 20px;
	background: url("../img/icon-linkedin.png") no-repeat right center;
}

#content {
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	background-color: #fff;
	width: 900px;
	margin: 20px auto 10px auto;
	padding: 0;
}

#content h1 {
	display: none;
}

#content div.header {
	position: relative;
	background-color: #000;
	padding: 15px 10px 17px 10px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;
}
	#content div.header a.slogan {
		float: right;
		padding: 2px 8px 0 0;
	}
	#content div.header span.slogan {
		position: absolute;
		top: 60px;
		right: 14px;
		float: right;
		font-size: 20px;
		font-weight: normal;
		color: #fff;
	}
	#content div.navigation {
		bottom: 0px;
		left: 0;
		position: absolute;
		margin: 0 auto 0 auto;
		width: 900px;
		height: 25px;
		text-align: center;
	}
		#content div.navigation h1 {
			color: #ccc;
			text-align: center;
			margin: 35px auto 0 auto;
			font-size: 20pt;
			font-weight: bold;
		}
		#content div.navigation ul {
			position: absolute;
			right: 0;
			bottom: 8px;
			margin: 0 20px 0 0;
			padding: 0;
			display: inline;
			white-space: nowrap;
		}
		#content div.navigation li {
			display: inline;
			margin: 0 0 0 15px;
			font-size: 20px;
		}
		#content div.navigation a,
		#content div.navigation a:visited {
			border-top: 2px solid transparent;
			padding-top: 4px;
			color: #fff;
			font-weight: normal;
		}
		#content div.navigation a:hover,
		#content div.navigation a:active {	
			border-top: 2px solid #faac55;
			color: #faac55;
		}
		#content div.navigation a.current {
			border-top: 2px solid #f15b29;
			color: #f15b29;
		}
		#content div.navigation a.disabled {
			color: #888;
		}

#content div.main {
	position: relative;
	min-height: 545px;
	padding: 20px 20px 10px 20px;
	color: #222;
}
	#content div.main h2 {
		padding: 0 0 10px 0;
		margin: 0;
		font-size: 16pt;
		font-weight: bold;
		color: #000;
	}
	#content div.main h2 span.separator {
		color: #888;
	}
	#content div.main h2 span {
		color: #ccc;
		font-size: 12pt;
		font-weight: normal;
	}
	#content div.main h3 {
		padding: 0 0 3px 0;
		margin: 0;
		font-size: 12pt;
		color: #666;
	}
	#content div.main h3 span.separator {
		color: #888;
	}
	#content div.main h3 span {
		color: #ccc;
		font-size: 10pt;
	}
	#content div.main p {
		margin: 1px 0 10px 0;
	}
	#content div.main ul {
		padding: 0;
		margin: 4px 0 4px 20px;
	}
		#content div.main ul li {
			list-style-type: square;
		}
	#content div.main ol {
		padding: 0;
		margin: 4px 0 4px 20px;
	}
		#content div.main ol li {
			font-weight: bold;
		}

	#content div.main ul.table {
		clear: both;
		margin: 20px 0 10px 50px;
	}
		#content div.main ul.table li {
			list-style-type: none;
			vertical-align: baseline;
			display: block;
			margin-bottom: 2px;
			line-height: 20px;
		}
		#content div.main ul.table li img {
			vertical-align: text-bottom;
			padding-bottom: 1px;
		}
		#content div.main ul.table li label {
			display: block;
			float: left;
			width: 160px;
			text-align: right;
			color: #888;
			font-size: 15px;
			font-weight: bold;
			white-space: nowrap;
		}
		#content div.main ul.table li span {
			font-size: 15px;
			padding-left: 10px;
		}
		#content div.main ul.table li span a {
		}
		#content div.main ul.table li span a img.logo {
			padding-top: 4px;
		}
		#content div.main ul.table li div {
			font-size: 15px;
			margin-left: 160px;
			padding-left: 10px;
		}
		#content div.main ul.table li div a {
		}
	
	#content div.mainBox {
		position: relative;
		margin: 0 0 10px 0;
		padding: 3px;
		width: 858px;
		border: 1px solid #ccc;
		background-color: #eee;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
	}
		#content div.mainBox.clear {
			border: 1px solid transparent;
			background-color: transparent;
		}
		#content div.mainBox.left {
			float: left;
			margin-right: 10px;
		}
		#content div.mainBox.right {
			float: right;
			margin-left: 10px;
		}
		#content div.mainBox.half {
			width: 412px;
		}
		#content div.mainBox.onequarter {
			width: 212px;
		}
		#content div.mainBox.threequarter {
			width: 610px;
		}
		#content div.mainBox.twitter a.twtr-hyperlink,
		#content div.mainBox.twitter a.twtr-timestamp,
		#content div.mainBox.twitter a.twtr-reply,
		#content div.mainBox.twitter a.twtr-atreply,
		#content div.mainBox.twitter a.twtr-hyperlink:visited,
		#content div.mainBox.twitter a.twtr-timestamp:visited,
		#content div.mainBox.twitter a.twtr-reply:visited,
		#content div.mainBox.twitter a.twtr-atreply:visited {
			color: #f15b29 !important;
			text-decoration: none !important;
		}
		#content div.mainBox.twitter a.twtr-hyperlink:hover,
		#content div.mainBox.twitter a.twtr-timestamp:hover,
		#content div.mainBox.twitter a.twtr-reply:hover,
		#content div.mainBox.twitter a.twtr-atreply:hover,
		#content div.mainBox.twitter a.twtr-hyperlink:active,
		#content div.mainBox.twitter a.twtr-timestamp:active,
		#content div.mainBox.twitter a.twtr-reply:active,
		#content div.mainBox.twitter a.twtr-atreply:active {
			color: #faac55 !important;
		}
		

#content div.footer {
	clear: both;
	text-align: left;
	background-color: #eee;
	border-top: 1px solid #ccc;
	margin-bottom: 0;
	padding: 10px 20px 10px 24px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
	color: #666;
	font-size: 9pt;
}
	#content div.footer p,
	#content div.footer h3 {
		text-align: left;
	} 
	#content div.footer a, 
	#content div.footer a:visited {
		color: #666;
		font-weight: normal;
	}
	#content div.footer a:hover, 
	#content div.footer a:active {
		color: #000;
	}
	#content div.footer #copyright {
		float: right;
	}
	#content div.footer a.infoLink {
		padding-right: 20px;
	}
	#content div.footer a.twitterLink {
	}
	#content div.footer img {
		vertical-align: text-bottom;
	}
	
#content div.imageBox {
	margin: 20px 40px 30px 40px;
	padding: 0 0 0 0;
	min-height: 230px;
}
	#content div.imageBox.small {
		margin: 20px 10px 20px 10px;
	}
	#content div.imageBox.smaller {
		margin: 20px 0px 0px 30px;
		min-height: 175px;
	}
	
	#portfolio .scrollContainer div.panel div.imageBox.small div.iPhone {
		padding: 0 5px 0 5px;
	} 
	#content div.imageBox div.iPhone {
		float: left;
		position: relative;
		margin: 0 5px 0 5px;
		display: inline;
		width: 122px;
		height: 240px;
		background: transparent url(../img/container-iPhone.png) no-repeat top left;
	}
		#content div.imageBox.small div.iPhone {
			margin: 0 2px 0 2px;
		}
		#content div.imageBox div.iPhone img {
			position: absolute;
			left: 11px;
			top: 43px;
			width: 102px;
			height: 153px;
		}
		
	#portfolio .scrollContainer div.panel div.imageBox.small div.iPhoneLandscape {
		padding: 0 5px 0 5px;
	}

	#content div.imageBox div.iPhoneLandscape {
		float: left;
		position: relative;
		margin: 0 5px 0 5px;
		display: inline;
		width: 240px;
		height: 122px;
		background: transparent url(../img/container-iPhoneLandscape.png) no-repeat top left;
	}
		#content div.imageBox.small div.iPhoneLandscape {
			margin: 0 2px 0 2px;
		}
		#content div.imageBox div.iPhoneLandscape img {
			position: absolute;
			left: 43px;
			top: 9px;
			width: 153px;
			height: 102px;
		}
		
	#content div.imageBox div.iPad {
		float: left;
		position: relative;
		margin: 0 0px 0 0px;
		display: inline;
		width: 240px;
		height: 308px;
		background: transparent url(../img/container-iPad.png) no-repeat top left;
	}
		#content div.imageBox.small div.iPad {
			margin: 0 0px 0 0px;
		}
		#content div.imageBox div.iPad img {
			position: absolute;
			left: 27px;
			top: 30px;
			width: 184px;
			height: 250px;
		}

	#content div.imageBox div.iPadLandscape {
		float: left;
		position: relative;
		margin: 0 0px 0 0px;
		display: inline;
		width: 300px;
		height: 240px;
		background: transparent url(../img/container-iPadLandscape.png) no-repeat top left;
	}
		#content div.imageBox.small div.iPadLandscape {
			margin: 0 0px 0 0px;
		}
		#content div.imageBox.single div.iPadLandscape {
			margin: 0 0px 20px 70px;
		}
		#content div.imageBox div.iPadLandscape img {
			position: absolute;
			left: 30px;
			top: 29px;
			width: 250px;
			height: 184px;
		}

	#content div.imageBox div.iPadLandscapeSmaller {
		float: left;
		position: relative;
		margin: 0 0px 0 0px;
		display: inline;
		width: 225px;
		height: 180px;
		background: transparent url(../img/container-iPadLandscapeSmaller.png) no-repeat top left;
	}
		#content div.imageBox.small div.iPadLandscapeSmaller {
			margin: 0 0px 0 0px;
		}
		#content div.imageBox.smaller div.iPadLandscapeSmaller {
			margin: 0 5px 0 5px;
		}
		#content div.imageBox.single div.iPadLandscapeSmaller {
			margin: 0 0px 20px 70px;
		}
		#content div.imageBox div.iPadLandscapeSmaller img {
			position: absolute;
			left: 22.5px;
			top: 21.75px;
			width: 187.5px;
			height: 138.5px;
		}

	#content div.imageBox div.website {
		float: left;
		position: relative;
		margin: 0 5px 0 5px;
		display: inline;
		width: 100px;
		height: 75px;
		background: transparent url(../img/container-website.png) no-repeat top left;
	}
	#content div.imageBox div.website.marginTop,
	#content div.imageBox.small div.website.marginTop {
		margin-top: 10px;
	}
	#content div.imageBox.small div.website {
		margin: 0 2px 0 2px;
	}
		#content div.imageBox div.website img {
			position: absolute;
			left: 0px;
			top: 12px;
			width: 100px;
			height: 75px;
		}

#portfolio {
	width: 840px;
	margin: 30px 0 0 0;
	position: relative;
}
	#content div.main #portfolio ul.navigation {
		width: 195px;
		margin: 0;
		padding: 33px 0 0 0;
	}
	#content div.main #portfolio ul.navigation li {
		list-style-type: none;
		list-style-position: inside;
		margin: 10px 12px 10px 0px;
		text-align: right;
	}
	#content div.main #portfolio ul.navigation li:first {
		padding-top: 40x;
	}
	#content div.main #portfolio ul.navigation li a,
	#content div.main #portfolio ul.navigation li a:visited {
		padding: 0 8px 0 0;
		color: #888;
		border-right: 3px solid transparent;
	}
	#content div.main #portfolio ul.navigation li a:active,
	#content div.main #portfolio ul.navigation li a:hover {
		color: #faac55;
		border-right: 3px solid #faac55;
	}
	#content div.main #portfolio ul.navigation li a.selected {
		color: #f15b29;
		border-right: 3px solid #f15b29;
	}
	#portfolio div.panel h3 {
		text-align: left;
		color: #444;
		margin: 10px 0 10px 10px;
	}
	#portfolio .scroll {
		float: right;
		width: 640px;
		margin-bottom: 20px;
		max-height: 558px;
		overflow: scroll;
		position: relative; /* fix for IE to respect overflow */
		clear: left;
		border: 1px solid #ccc;
		background-color: #eee;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
	}
	#portfolio .scrollContainer div.panel {
		padding: 0px;
		width: 640px; /* Must be same value as .scroll { width } */
		height: 558px;
		overflow: auto;
		position: absolute;
	}
	#portfolio .scrollContainer div.panel div {
		padding: 0 10px 0 10px;
	}
	#portfolio .scrollButtons {
		 position: absolute;
		 top: 13px;
		 cursor: pointer;
	}
	#portfolio .scrollButtons.left {
		left: 102px;
	}
	#portfolio .scrollButtons.right {
		left: 156px;
	}
	#portfolio .scrollButtons.leftSpan {
		left: 116px;
		top: 18px;
		width: 42px;
		height: 4px;
		display: block;
		padding: 0;
		cursor: default;
		line-height: 2px;
		background-color: #ccc;
		border-bottom: 1px solid #eee;
		border-top: 1px solid #eee;
	}