/*****************************************************************************
   GLOBAL
 *****************************************************************************/

* {
	margin: 0;
	padding: 0;
}

br {
	clear: both;
}

html, body {
	height: 100%;
}

body {
	font-family: 'Ubuntu', sans-serif;
	font-size: 11pt;

	background-color: #333;
	/*
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000));
	background: -webkit-linear-gradient(top, #333, #000);
	background: -moz-linear-gradient(top, #333, #000);
	background: -ms-linear-gradient(top, #333, #000);
	background: -o-linear-gradient(top, #333, #000);
	*/
}


.left {
	position: relative;
	float: left;
}
.right {
	position: relative;
	float: right;
}


#tiny {
	display: none;
}


.lil-arrow {
	display: none;
}


#container {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	margin: auto;
}


#resume {
	position: relative;
	width: 320px; height: 360px;
	overflow: hidden;
	cursor: default;
	margin: 0 auto;
	z-index: 100;
}

#portfolio {
	position: relative;
	padding: 0;
	margin: 0 auto;
	display: none;
}

#portfolio .thumb {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#portfolio .thumb.miso {
	background-image: url(/media/images/thumb_miso.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
#portfolio .thumb.js1k {
	background-image: url(/media/images/thumb_js1k.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
#portfolio .thumb.acido {
	background-image: url(/media/images/thumb_acido.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
#portfolio .thumb.alcm {
	background-image: url(/media/images/thumb_alcm.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
#portfolio .thumb.robd {
	background-image: url(/media/images/thumb_robd.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#portfolio .header {
	position: absolute;
	top: 28px; right: 25px;
	font-size: 1.5em;
	line-height: 1em;
	color: #ccc;
	text-align: right;
}

#portfolio .date {
	position: absolute;
	top: 5px; right: 25px;
	font-size: 1.0em;
	color: #666;
}

#portfolio .details {
	position: relative;
	top: 78px;
}

#portfolio .subheader {
	text-align: right;
	margin: 0 25px 16px 0;
	color: #999;
}

#portfolio .small {
	text-transform: none;
	font-size: 7pt;
}

#portfolio .text {
	padding: 10px 25px;
	text-indent: 20px;
	text-align: left;
	color: #ccc;
	font-size: 9pt;
	line-height: 11pt;
	clear: both;
}

#portfolio .list {
	list-style: none;
	list-style-position: inside;
	margin-left: 25px;
}

#portfolio .example:before {
	content: '\00BB \0020';
}

#portfolio .example {
	color: #ccc;
	font-size: 9pt;
	padding: 0;
	margin: 0 0 10px;
	text-align: right;
	clear: both;
}

#portfolio .example-thumb {
	border: 2px solid #999;
	margin: 0 25px 0 10px;
	float: right;
}

#portfolio .linkto {
	font-size: 10pt;
	line-height: 33px;
	font-weight: bold;
	text-decoration: underline;
	padding: 0 25px 5px 25px;
	color: #fff;
	float: right;
	clear: both;
}

#portfolio .linkto:after {
	content: '\0020 \00BB';
}


h1, h2, h3, h4, h5, h6 {
	text-transform: uppercase;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
}


#footer {
	width: 100%;
	z-index: 10;
}

.copyright {
	font-style: italic;
	font-size: 8pt;
	line-height: 8pt;
	color: #ccc;
	padding: 20px 0 20px 5px;
}







/*****************************************************************************
   TINY SCREENS
 *****************************************************************************/

@media only screen and (min-width:0px) and (max-width:319px) and (min-height:0px) {

	html, body {
		overflow: hidden;
	}

	#resume , #portfolio {
		display: none;
	}

	#tiny {
		display: block;
		width: 90%;
		padding: 0 5%;
	}

	#tiny .tiny-name {
		display: block;
		font-family: 'Ubuntu';
		font-weight: 700;
		font-size: 1em;
		white-space: normal;
		text-align: justify;
		color: #fff;
	}

	#tiny .tiny-job {
		display: block;
		font-family: 'Ubuntu';
		font-weight: 500;
		font-size: 1em;
		white-space: normal;
		text-align: justify;
		color: #ccc;
	}

	#tiny .tiny-appologies {
		font-family: 'Ubuntu';
		font-weight: 300;
		text-align: justify;
		color: #999;
	}

	#tiny .wrapper {
		width: 100%;
	}

	#tiny .centered {
		text-align: center;
	}

	#tiny .tiny-link {
		display: block;
		width: 28px; height: 28px;
		margin: auto;

		opacity: 0.6;
		filter: alpha(opacity=60);
	}

	#tiny .tiny-link:hover, #tiny .tiny-link:focus {
		opacity: 1.0;
		filter: alpha(opacity=100);
	}

	#tiny .tiny-image {
		width: 24px; height: 24px;
		border: none;
		margin: auto;
		vertical-align: middle;
	}

}



/*****************************************************************************
   iPOD PORTRAIT
 *****************************************************************************/

@media only screen and (min-width:320px) and (max-width:440px) and (min-height:0px) {

	.lil-arrow {
		display: inline;
		font-weight: 700;
		color: #ccc;
		font-size: 1.2em;
		line-height: 0.8em;
	}


	#more {
		display: none;
	}


	#container {
		/*min-height: 100%;*/
	}


	.my-name {
		display: block;
		position: absolute;
		top: 161px; left: -143px;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}

	.my-job {
		font-size: 1.8em;
		display: block;
		position: absolute;
		top: 3px; left: 44px;
	}

	.skills {
		position: absolute;
		top: 21px; left: 24px;
	}

	.skills .skill {
		position: absolute;
		display: block;
		color: #444;
		font-size: 0;

		-webkit-transition: color 0.3s ease-out;
		-moz-transition: color 0.3s ease-out;
		-o-transition: color 0.3s ease-out;
		-ms-transition: color 0.3s ease-out;
		transition: color 0.3s ease-out;
	}

	.skills .skill:hover {
		color: #999;
	}


	.skills .html {
		font-size: 2.0em;
		top: 10px; left: 20px;
	}
	.skills .css {
		font-size: 2.0em;
		top: 10px; left: 107px;
	}
	.skills .ajax {
		font-size: 2.0em;
		top: 10px; left: 165px;
	}
	.skills .dom {
		font-size: 2.7em;
		top: 37px; left: 215px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .js {
		font-size: 2.2em;
		top: 38px; left: 47px;
	}
	.skills .jq {
		font-size: 1.6em;
		top: 78px; left: -15px;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
	.skills .jqui {
		font-size: 1.6em;
		top: 75px; left: 49px;
	}
	.skills .jqm {
		font-size: 1.2em;
		line-height: 1.0em;
		top: 75px; left: 170px;
	}
	.skills .proto {
		font-size: 0.9em;
		top: 148px; left: 137px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .flash {
		font-size: 2.6em;
		top: 99px; left: 47px;
	}
	.skills .as {
		font-size: 1.4em;
		letter-spacing: -1px;
		top: 138px; left: 22px;
	}
	.skills .flex {
		font-size: 1.5em;
		top: 179px; left: 4px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .php {
		font-size: 2.2em;
		letter-spacing: 3.0px;
		top: 106px; left: 187px;
	}
	.skills .asp {
		font-size: 2.2em;
		letter-spacing: 3.0px;
		top: 135px; left: 188px;
	}
	.skills .jsp {
		font-size: 2.2em;
		letter-spacing: 6.5px;
		top: 164px; left: 187px;
	}
	.skills .xml {
		font-size: 1.3em;
		top: 122px; left: 248px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .xsl {
		font-size: 1.3em;
		top: 166px; left: 251px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .wordpress {
		font-size: 1.7em;
		font-weight: 500;
		top: 195px; left: 126px;
	}
	.skills .drupal {
		font-size: 1.7em;
		letter-spacing: -2.0px;
		font-weight: 300;
		top: 195px; left: 42px;
	}
	.skills .joomla {
		font-size: 1.3em;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
		letter-spacing: 0;
		top: 266px; left: 214px;
		font-weight: 500;
	}
	.skills .modx {
		font-size: 1.1em;
		letter-spacing: 1.6px;
		top: 242px; left: 221px;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
	.skills .sql {
		font-size: 2.2em;
		letter-spacing: 3px;
		top: 219px; left: 21px;
	}
	.skills .oop {
		font-size: 2.2em;
		top: 252px; left: 20px;
	}
	.skills .struts {
		font-size: 1.5em;
		font-weight: 400;
		top: 249px; left: 86px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .tiles {
		font-size: 1.5em;
		letter-spacing: 1px;
		top: 242px; left: 72px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .c {
		font-size: 1.2em;
		letter-spacing: 1px;
		top: 241px; left: 138px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .net {
		font-size: 1.1em;
		font-weight: 500;
		letter-spacing: -1px;
		top: 240px; left: 120px;
		white-space: nowrap;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .cocoa {
		font-size: 1.3em;
		letter-spacing: -2px;
		top: 220px; left: 179px;
	}
	.skills .java {
		font-size: 1.4em;
		top: 240px; left: 181px;
	}
	.skills .python {
		font-size: 0.9em;
		top: 266px; left: 182px;
	}
	.skills .sqlserver {
		font-size: 1.1em;
		line-height: 1.0em;
		top: 286px; left: 18px;
	}
	.skills .iis {
		font-size: 0.8em;
		line-height: 1.4em;
		letter-spacing: -1px;
		font-weight: 600;
		top: 281px; left: 139px;
	}
	.skills .iis2 {
		letter-spacing: 1px;
	}
	.skills .iis3 {
		letter-spacing: 1px;
	}
	.skills .cvs {
		font-size: 1.8em;
		top: 300px; left: 17px;
	}
	.skills .svn {
		font-size: 2.0em;
		top: 298px; left: 75px;
	}


	.skills .icon {
		display: block;
		position: absolute;
		background-color: #333;
		border: 2px solid #999;

		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;

		-webkit-transition: background-color 0.5s ease-out;
		-moz-transition: background-color 0.5s ease-out;
		-o-transition: background-color 0.5s ease-out;
		-ms-transition: background-color 0.5s ease-out;
		transition: background-color 0.5s ease-out;
	}

	.skills .icon:hover {
		background-color: #666;
		border: 2px solid #ccc;
	}

	.skills .i1 {
		top: 165px; left: 45px;
		width: 26px; height: 26px;
	}

	.skills .i2 {
		top: 165px; left: 90px;
		width: 26px; height: 26px;
	}

	.skills .i3 {
		top: 165px; left: 135px;
		width: 26px; height: 26px;
	}

	.skills .i4 {
		top: 285px; left: 206px;
		width: 36px; height: 36px;
	}

	.skills .icon-image {
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0;
		margin: auto;

		opacity: 0.6;
		filter: alpha(opacity=60);

		-webkit-transition: opacity 0.5s ease-out;
		-moz-transition: opacity 0.5s ease-out;
		-o-transition: opacity 0.5s ease-out;
		-ms-transition: opacity 0.5s ease-out;
		transition: opacity 0.5s ease-out;
	}

	.skills .icon-image:hover {
		opacity: 1.0;
		filter: alpha(opacity=100);
	}



	#portfolio {
		display: block;
		width: 300px;
	}

	#portfolio .thumb {
		position: relative;
		display: block;
		overflow: hidden;
		width: 278px; height: 98px;
		margin: 0 0 10px 6px;
		border: 2px solid #999;
		cursor: pointer;
	}

	#footer {
		width: 300px;
		margin: auto;
	}

}



/*****************************************************************************
   iPOD LANDSCAPE
 *****************************************************************************/

@media only screen and (min-width:441px) and (max-width:480px) and (min-height:0px) {

	#container {
		/*background-color: #550;*/
		width: 710px;
	}

	#resume {
		width: 230px;
		height: 260px;
		float: left;
		margin: 0 0 0 10px;
	}

	.my-name {
		display: block;
		font-size: 1.4em;
		position: absolute;
		top: 119px; left: -114px;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}

	.my-job {
		font-size: 1.4em;
		display: block;
		position: absolute;
		top: 4px; left: 19px;
	}

	.skills {
		position: absolute;
		top: 21px; left: 24px;
	}

	.skills .skill {
		position: absolute;
		display: block;
		color: #444;
		font-size: 0;

		-webkit-transition: color 0.3s ease-out;
		-moz-transition: color 0.3s ease-out;
		-o-transition: color 0.3s ease-out;
		-ms-transition: color 0.3s ease-out;
		transition: color 0.3s ease-out;
	}

	.skills .skill:hover {
		color: #999;
	}


	.skills .html {
		font-size: 1.6em;
		top: 5px; left: -5px;
	}
	.skills .css {
		font-size: 1.6em;
		top: 5px; left: 65px;
	}
	.skills .ajax {
		font-size: 1.6em;
		top: 5px; left: 113px;
	}
	.skills .dom {
		font-size: 2.1em;
		letter-spacing: -1px;
		top: 26px; left: 154px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .js {
		font-size: 1.8em;
		top: 25px; left: 14px;
	}
	.skills .jq {
		font-size: 1.1em;
		top: 52px; left: -29px;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
	.skills .jqui {
		font-size: 1.2em;
		letter-spacing: 1px;
		top: 49px; left: 16px;
	}
	.skills .jqm {
		font-size: 0.9em;
		line-height: 1.2em;
		top: 51px; left: 121px;
	}
	.skills .proto {
		font-size: 0.7em;
		top: 108px; left: 96px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .flash {
		font-size: 2.0em;
		letter-spacing: 2px;
		top: 65px; left: 15px;
	}
	.skills .as {
		font-size: 1.2em;
		letter-spacing: -1px;
		top: 93px; left: -3px;
	}
	.skills .flex {
		font-size: 1.3em;
		letter-spacing: 1px;
		top: 126px; left: -20px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .php {
		font-size: 1.8em;
		letter-spacing: 0px;
		top: 78px; left: 134px;
	}
	.skills .asp {
		font-size: 1.8em;
		letter-spacing: 0px;
		top: 99px; left: 136px;
	}
	.skills .jsp {
		font-size: 1.8em;
		letter-spacing: 3.5px;
		top: 120px; left: 133px;
	}
	.skills .xml {
		font-size: 1.1em;
		letter-spacing: -1px;
		top: 90px; left: 179px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .xsl {
		font-size: 1.1em;
		letter-spacing: -1px;
		top: 122px; left: 182px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .wordpress {
		font-size: 1.3em;
		letter-spacing: 1px;
		font-weight: 500;
		top: 143px; left: 80px;
	}
	.skills .drupal {
		font-size: 1.3em;
		letter-spacing: -2.0px;
		font-weight: 300;
		top: 143px; left: 15px;
	}
	.skills .joomla {
		font-size: 0.9em;
		letter-spacing: 0;
		top: 184px; left: 158px;
		font-weight: 500;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
	.skills .modx {
		font-size: 0.7em;
		letter-spacing: 1.6px;
		top: 178px; left: 179px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .sql {
		font-size: 1.6em;
		letter-spacing: 3px;
		top: 160px; left: -3px;
	}
	.skills .oop {
		font-size: 1.6em;
		top: 183px; left: -4px;
	}
	.skills .struts {
		font-size: 1.1em;
		letter-spacing: -1px;
		font-weight: 400;
		top: 180px; left: 51px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .tiles {
		font-size: 1.1em;
		letter-spacing: -1px;
		top: 174px; left: 40px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .c {
		font-size: 0.8em;
		letter-spacing: 1px;
		top: 177px; left: 88px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .net {
		font-size: 0.8em;
		font-weight: 500;
		letter-spacing: -1px;
		top: 177px; left: 73px;
		white-space: nowrap;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .cocoa {
		font-size: 0.9em;
		letter-spacing: -1px;
		top: 177px; left: 103px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .java {
		font-size: 1.0em;
		top: 161px; left: 135px;
	}
	.skills .python {
		font-size: 0.7em;
		top: 180px; left: 134px;
	}
	.skills .sqlserver {
		font-size: 0.7em;
		letter-spacing: 1px;
		line-height: 1.0em;
		top: 206px; left: -2px;
	}
	.skills .iis {
		font-size: 0.6em;
		line-height: 1.2em;
		letter-spacing: -1px;
		font-weight: 600;
		top: 207px; left: 87px;
	}
	.skills .iis2 {
		letter-spacing: 1px;
	}
	.skills .iis3 {
		letter-spacing: 1px;
	}
	.skills .cvs {
		font-size: 1.4em;
		top: 214px; left: -3px;
	}
	.skills .svn {
		font-size: 1.4em;
		top: 214px; left: 41px;
	}


	.skills .icon {
		display: block;
		position: absolute;
		background-color: #333;
		border: 2px solid #999;

		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;

		-webkit-transition: background-color 0.5s ease-out;
		-moz-transition: background-color 0.5s ease-out;
		-o-transition: background-color 0.5s ease-out;
		-ms-transition: background-color 0.5s ease-out;
		transition: background-color 0.5s ease-out;
	}

	.skills .icon:hover {
		background-color: #666;
		border: 2px solid #ccc;
	}

	.skills .i1 {
		top: 114px; left: 16px;
		width: 26px; height: 26px;
	}

	.skills .i2 {
		top: 114px; left: 51px;
		width: 26px; height: 26px;
	}

	.skills .i3 {
		top: 114px; left: 86px;
		width: 26px; height: 26px;
	}

	.skills .i4 {
		top: 195px; left: 135px;
		width: 36px; height: 36px;
	}

	.skills .icon-image {
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0;
		margin: auto;

		opacity: 0.6;
		filter: alpha(opacity=60);

		-webkit-transition: opacity 0.5s ease-out;
		-moz-transition: opacity 0.5s ease-out;
		-o-transition: opacity 0.5s ease-out;
		-ms-transition: opacity 0.5s ease-out;
		transition: opacity 0.5s ease-out;
	}

	.skills .icon-image:hover {
		opacity: 1.0;
		filter: alpha(opacity=100);
	}



	#portfolio {
		display: block;
		width: 470px;
		float: right;
		margin: 10px 0 0 0;
	}

	#portfolio .thumb {
		position: relative;
		display: block;
		overflow: hidden;
		width: 448px; height: 98px;
		margin: 0 0 10px 6px;
		border: 2px solid #999;
		cursor: pointer;

		/*
		width: 88px;
		height: 88px;
		margin: 0 6px 0 4px;
		*/
	}


	#more {
		position: absolute;
		top: 260px;
		padding: 0 0 0 10px;
	}


	#footer {
		display: none;
	}


	.copyright {
		font-size: 7pt;
	}

}



/*****************************************************************************
   TABLET PORTRAIT
 *****************************************************************************/

@media only screen and (min-width:481px) and (max-width:768px) and (min-height:0px) {

	#container {
		width: 760px;
	}

	#resume {
		float: left;
		width: 310px;
	}

	#portfolio {
		float: left;
		margin: 10px 0 0 0;
	}

	.my-name {
		display: block;
		position: absolute;
		top: 161px; left: -143px;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}

	.my-job {
		font-size: 1.8em;
		display: block;
		position: absolute;
		top: 3px; left: 44px;
	}

	.skills {
		position: absolute;
		top: 21px; left: 24px;
	}

	.skills .skill {
		position: absolute;
		display: block;
		color: #444;
		font-size: 0;

		-webkit-transition: color 0.3s ease-out;
		-moz-transition: color 0.3s ease-out;
		-o-transition: color 0.3s ease-out;
		-ms-transition: color 0.3s ease-out;
		transition: color 0.3s ease-out;
	}

	.skills .skill:hover {
		color: #999;
	}


	.skills .html {
		font-size: 2.0em;
		top: 10px; left: 20px;
	}
	.skills .css {
		font-size: 2.0em;
		top: 10px; left: 107px;
	}
	.skills .ajax {
		font-size: 2.0em;
		top: 10px; left: 165px;
	}
	.skills .dom {
		font-size: 2.7em;
		top: 37px; left: 215px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .js {
		font-size: 2.2em;
		top: 38px; left: 47px;
	}
	.skills .jq {
		font-size: 1.6em;
		top: 78px; left: -15px;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
	.skills .jqui {
		font-size: 1.6em;
		top: 75px; left: 49px;
	}
	.skills .jqm {
		font-size: 1.2em;
		line-height: 1.0em;
		top: 75px; left: 170px;
	}
	.skills .proto {
		font-size: 0.9em;
		top: 148px; left: 137px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .flash {
		font-size: 2.6em;
		top: 99px; left: 47px;
	}
	.skills .as {
		font-size: 1.4em;
		letter-spacing: -1px;
		top: 138px; left: 22px;
	}
	.skills .flex {
		font-size: 1.5em;
		top: 179px; left: 4px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .php {
		font-size: 2.2em;
		letter-spacing: 3.0px;
		top: 106px; left: 187px;
	}
	.skills .asp {
		font-size: 2.2em;
		letter-spacing: 3.0px;
		top: 135px; left: 188px;
	}
	.skills .jsp {
		font-size: 2.2em;
		letter-spacing: 6.5px;
		top: 164px; left: 187px;
	}
	.skills .xml {
		font-size: 1.3em;
		top: 122px; left: 248px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .xsl {
		font-size: 1.3em;
		top: 166px; left: 251px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .wordpress {
		font-size: 1.7em;
		font-weight: 500;
		top: 195px; left: 126px;
	}
	.skills .drupal {
		font-size: 1.7em;
		letter-spacing: -2.0px;
		font-weight: 300;
		top: 195px; left: 42px;
	}
	.skills .joomla {
		font-size: 1.3em;
		letter-spacing: 0;
		top: 254px; left: 229px;
		font-weight: 500;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .modx {
		font-size: 1.1em;
		letter-spacing: 1.6px;
		top: 242px; left: 221px;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
	.skills .sql {
		font-size: 2.2em;
		letter-spacing: 3px;
		top: 219px; left: 21px;
	}
	.skills .oop {
		font-size: 2.2em;
		top: 252px; left: 20px;
	}
	.skills .struts {
		font-size: 1.5em;
		font-weight: 400;
		top: 249px; left: 86px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .tiles {
		font-size: 1.5em;
		letter-spacing: 1px;
		top: 242px; left: 72px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .c {
		font-size: 1.2em;
		letter-spacing: 1px;
		top: 241px; left: 138px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .net {
		font-size: 1.1em;
		font-weight: 500;
		letter-spacing: -1px;
		top: 240px; left: 120px;
		white-space: nowrap;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .cocoa {
		font-size: 1.3em;
		letter-spacing: -2px;
		top: 220px; left: 179px;
	}
	.skills .java {
		font-size: 1.4em;
		top: 240px; left: 181px;
	}
	.skills .python {
		font-size: 0.9em;
		top: 266px; left: 182px;
	}
	.skills .sqlserver {
		font-size: 1.1em;
		line-height: 1.0em;
		top: 286px; left: 18px;
	}
	.skills .iis {
		font-size: 0.8em;
		line-height: 1.4em;
		letter-spacing: -1px;
		font-weight: 600;
		top: 281px; left: 139px;
	}
	.skills .iis2 {
		letter-spacing: 1px;
	}
	.skills .iis3 {
		letter-spacing: 1px;
	}
	.skills .cvs {
		font-size: 1.8em;
		top: 300px; left: 17px;
	}
	.skills .svn {
		font-size: 2.0em;
		top: 298px; left: 75px;
	}


	.skills .icon {
		display: block;
		position: absolute;
		background-color: #333;
		border: 2px solid #999;

		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;

		-webkit-transition: background-color 0.5s ease-out;
		-moz-transition: background-color 0.5s ease-out;
		-o-transition: background-color 0.5s ease-out;
		-ms-transition: background-color 0.5s ease-out;
		transition: background-color 0.5s ease-out;
	}

	.skills .icon:hover {
		background-color: #666;
		border: 2px solid #ccc;
	}

	.skills .i1 {
		top: 165px; left: 45px;
		width: 26px; height: 26px;
	}

	.skills .i2 {
		top: 165px; left: 90px;
		width: 26px; height: 26px;
	}

	.skills .i3 {
		top: 165px; left: 135px;
		width: 26px; height: 26px;
	}

	.skills .i4 {
		top: 285px; left: 206px;
		width: 36px; height: 36px;
	}

	.skills .icon-image {
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0;
		margin: auto;

		opacity: 0.6;
		filter: alpha(opacity=60);

		-webkit-transition: opacity 0.5s ease-out;
		-moz-transition: opacity 0.5s ease-out;
		-o-transition: opacity 0.5s ease-out;
		-ms-transition: opacity 0.5s ease-out;
		transition: opacity 0.5s ease-out;
	}

	.skills .icon-image:hover {
		opacity: 1.0;
		filter: alpha(opacity=100);
	}



	#portfolio {
		display: block;
		width: 450px;
	}

	#portfolio .thumb {
		position: relative;
		display: block;
		overflow: hidden;
		width: 428px; height: 98px;
		margin: 0 0 10px 6px;
		border: 2px solid #999;
		cursor: pointer;
	}

	#more {
		position: absolute;
		top: 354px;
		padding: 0 0 0 10px;
	}

	#footer {
		display: none;
	}

}



/*****************************************************************************
   TABLET LANDSCAPE
 *****************************************************************************/

@media only screen and (min-width:769px) and (min-height:0px) {


	#container {
		margin-top: 10px;
		width: 950px;
	}

	#resume {
		float: left;
		width: 500px;
		height: 634px;
	}

	#portfolio {
		float: left;
		margin: 10px 0 0 0;
	}

	.my-name {
		font-size: 3.6em;
		display: block;
		position: absolute;
		top: 286px; left: -287px;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}

	.my-job {
		font-size: 2.8em;
		display: block;
		position: absolute;
		top: 3px; left: 46px;
	}

	.skills {
		position: absolute;
		top: 21px; left: 24px;
	}

	.skills .skill {
		position: absolute;
		display: block;
		color: #444;
		font-size: 0;

		-webkit-transition: color 0.3s ease-out;
		-moz-transition: color 0.3s ease-out;
		-o-transition: color 0.3s ease-out;
		-ms-transition: color 0.3s ease-out;
		transition: color 0.3s ease-out;
	}

	.skills .skill:hover {
		color: #999;
	}


	.skills .html {
		font-size: 3.1em;
		letter-spacing: -2px;
		top: 23px; left: 22px;
	}
	.skills .css {
		font-size: 3.0em;
		top: 23px; left: 160px;
	}
	.skills .ajax {
		font-size: 3.0em;
		top: 23px; left: 258px;
	}
	.skills .dom {
		font-size: 3.7em;
		top: 64px; left: 342px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .js {
		font-size: 3.2em;
		letter-spacing: 2px;
		top: 64px; left: 67px;
	}
	.skills .jq {
		font-size: 2.6em;
		top: 132px; left: -35px;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
	.skills .jqui {
		font-size: 2.4em;
		top: 114px; left: 69px;
	}
	.skills .jqm {
		font-size: 2.0em;
		line-height: 1.0em;
		top: 120px; left: 259px;
	}
	.skills .proto {
		font-size: 1.9em;
		letter-spacing: 1px;
		top: 152px; left: 70px;
		/*
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
		*/
	}
	.skills .flash {
		font-size: 4em;
		letter-spacing: -1px;
		top: 170px; left: 68px;
	}
	.skills .as {
		font-size: 2.4em;
		letter-spacing: -2px;
		font-weight: 500;
		top: 232px; left: 28px;
	}
	.skills .flex {
		font-size: 2.5em;
		top: 300px; left: -2px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .social {
		font-size: 1em;
		font-weight: 500;
		top: 242px; left: 203px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .php {
		font-size: 3.5em;
		letter-spacing: 3.0px;
		top: 175px; left: 280px;
	}
	.skills .asp {
		font-size: 3.5em;
		letter-spacing: 3.0px;
		top: 219px; left: 283px;
	}
	.skills .jsp {
		font-size: 3.5em;
		letter-spacing: 9.5px;
		top: 265px; left: 281px;
	}
	.skills .xml {
		font-size: 2.3em;
		top: 187px; left: 376px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .xsl {
		font-size: 2.3em;
		top: 264px; left: 382px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .wordpress {
		font-size: 2.7em;
		font-weight: 600;
		top: 369px; left: 178px;
	}
	.skills .drupal {
		font-size: 2.7em;
		letter-spacing: -2.0px;
		font-weight: 300;
		top: 370px; left: 27px;
	}
	.skills .joomla {
		font-size: 2.3em;
		letter-spacing: 0;
		top: 468px; left: 342px;
		font-weight: 500;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .modx {
		font-size: 2.1em;
		letter-spacing: -2px;
		top: 447px; left: 331px;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
	.skills .sql {
		font-size: 3.4em;
		letter-spacing: 3px;
		top: 414px; left: 25px;
	}
	.skills .oop {
		font-size: 3.4em;
		top: 471px; left: 23px;
	}
	.skills .struts {
		font-size: 2.5em;
		letter-spacing: 1px;
		font-weight: 400;
		top: 468px; left: 129px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .tiles {
		font-size: 2.5em;
		letter-spacing: 1px;
		top: 452px; left: 107px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .c {
		font-size: 2.2em;
		letter-spacing: 1px;
		top: 449px; left: 244px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .net {
		font-size: 2.1em;
		font-weight: 500;
		letter-spacing: -1px;
		top: 454px; left: 187px;
		white-space: nowrap;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .cocoa {
		font-size: 2.3em;
		letter-spacing: -2px;
		top: 452px; left: 284px;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.skills .java {
		font-size: 3.2em;
		top: 317px; left: 65px;
	}
	.skills .python {
		font-size: 2.9em;
		top: 268px; left: 66px;
	}
	.skills .sqlserver {
		font-size: 2.0em;
		line-height: 1.0em;
		letter-spacing: -2px;
		font-weight: 400;
		top: 530px; left: 27px;
	}
	.skills .iis {
		font-size: 1.8em;
		line-height: 1em;
		letter-spacing: -1px;
		font-weight: 600;
		top: 529px; left: 227px;
	}
	.skills .iis2 {
		letter-spacing: 5px;
	}
	.skills .iis3 {
		letter-spacing: 5px;
	}
	.skills .cvs {
		font-size: 3.1em;
		top: 561px; left: 24px;
	}
	.skills .svn {
		font-size: 3.1em;
		top: 561px; left: 123px;
	}


	.skills .icon {
		display: block;
		position: absolute;
		background-color: #333;
		border: 2px solid #999;

		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;

		-webkit-transition: background-color 0.5s ease-out;
		-moz-transition: background-color 0.5s ease-out;
		-o-transition: background-color 0.5s ease-out;
		-ms-transition: background-color 0.5s ease-out;
		transition: background-color 0.5s ease-out;
	}

	.skills .icon:hover {
		background-color: #666;
		border: 2px solid #ccc;
	}

	.skills .i1 {
		top: 326px; left: 205px;
		width: 36px; height: 36px;
	}

	.skills .i2 {
		top: 326px; left: 263px;
		width: 36px; height: 36px;
	}

	.skills .i3 {
		top: 326px; left: 324px;
		width: 36px; height: 36px;
	}

	.skills .i4 {
		top: 326px; left: 386px;
		width: 36px; height: 36px;
	}

	.skills .icon-image {
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0;
		margin: auto;

		opacity: 0.6;
		filter: alpha(opacity=60);

		-webkit-transition: opacity 0.5s ease-out;
		-moz-transition: opacity 0.5s ease-out;
		-o-transition: opacity 0.5s ease-out;
		-ms-transition: opacity 0.5s ease-out;
		transition: opacity 0.5s ease-out;
	}

	.skills .icon-image:hover {
		opacity: 1.0;
		filter: alpha(opacity=100);
	}



	#portfolio {
		display: block;
		width: 450px;
	}

	#portfolio .thumb {
		position: relative;
		display: block;
		overflow: hidden;
		width: 428px; height: 98px;
		margin: 0 0 10px 6px;
		border: 2px solid #999;
		cursor: pointer;
	}

	#more {
		position: absolute;
		top: 627px;
	}

	#footer {
		display: none;
	}

}