* { margin: 0; padding: 0; outline: 0; }

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}


@font-face {
	font-family: 'arvil_sansregular';
	src: url('fonts/arvil_sans-webfont.eot');
	src: url('fonts/arvil_sans-webfont.eot?#iefix') format('embedded-opentype'),
	url('fonts/arvil_sans-webfont.woff') format('woff'),
	url('fonts/arvil_sans-webfont.ttf') format('truetype'),
	url('fonts/arvil_sans-webfont.svg#arvil_sansregular') format('svg');
	font-weight: normal;
	font-style: normal;

}


body { font-family: Lato, Arial; color: #353535; background-color: #ffffff;}

::selection { background-color: rgba(122, 192, 0, 0.2); }
::-moz-selection { background-color: rgba(122, 192, 0, 0.2); border: 10px solid red; }

header h1{
	font-family: 'arvil_sansregular';
	color: #424b5f;
	font-size: 70px;
	font-weight: lighter;
	margin-bottom: 0;
	margin-top: 18%;
	opacity: 0;
	-webkit-font-smoothing: antialiased;
}

h1 { color: #464646; font-size: 40px; position: relative; top: 15px; font-family: arvil_sansregular, Verdana};
h1 a { color: #aace3c; font-size: 40px; background-color: #ff5400; padding: 5px 25px 10px 25px; width: 300px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.6);
	background: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.23, #c34000),
		color-stop(0.62, #ff5400)
		);
	background: -moz-linear-gradient(
		center bottom,
		#c34000 23%,
		#ff5400 62%
		);
}

h1 a:hover { color: #b8b8b8; border-bottom: 1px solid rgba(0, 0, 0, 0.4); padding-bottom: 10px; background-color: #7ac000;
	background: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.23, #619702),
		color-stop(0.62, #7ac000)
		);
	background: -moz-linear-gradient(
		center bottom,
		#619702 23%,
		#7ac000 62%
		);
}

h2 { 
	font-family: 'arvil_sansregular';
	padding-left: 0px; 
	padding-top: 10px; 
	font-size: 36px; 
	color: #444444; 
	line-height: 1.2em;
}
h2.green {color: #aace3c;}
h2 span.grey {color: #7c7c7c; font-size: 28px; font-family: arvil_sansregular, Verdana;}
h2 span.sub { font-size: 18px; float: left; color: #787878; padding-top: 20px; line-height: 29px; }

h2.intro {  float: left; font-size: 40px; }
h2.work { color: rgba(0%, 0%, 0%, 0.25); margin-bottom: 10px; }
h2.about { background: url("images/about.png") no-repeat -10px -10px; }
h2.contact { }

.tomLogo {
	float: left;
	margin-top: 32px;
	padding-top: 19px;
	font-size: 30px;
	color: #939393;
	width: 364px;
	height: 40px;
	background: url("images/tom/logo.png") no-repeat;
	padding-left: 55px;

}


.projectSubtitle{
	color: #666;	
	margin-bottom: 7px;
	margin-top:7px;
	font-family: Lato, Arial;
	line-height: 1.8em;
	padding-top: 0px;
	font-size: 13px;
	font-weight: bold;
}

.projectSpec {
	margin-top:100px;
	
}

.projectSpec p {
	color: #F64F5E;	
	margin-top:0px;
	margin-bottom: 0px;
	font-family: Lato, Arial;
	line-height: 1.8em;
	padding-top: 0px;
	font-size: 13px;
}

.projectSpecInlineHead {
	color: #F64F5E;
	font-weight: bold;

}

.projectBody{
	color: #FF0000;
	font-family: Lato, Arial;
	line-height: 1.8em;
	padding-top: 0px;
	font-size: 13px;
}

.projectBody p {
	margin-top:0px;
	margin-bottom: 0px;
	font-size: 13px;
}

.projectBody ul li {
	margin-left: 20px;
	list-style-type: circle;
	line-height: 22px; 
	color: #666;
}

.normalBody{
	color: #FF0000;
	font-family: Lato, Arial;
	line-height: 1.8em;
	padding-top: 0px;
	font-size: 13px;
}

.normalBody p {
	margin-top:0px;
	margin-bottom: 0px;
	font-size: 13px;
}

.normalBody ul li {
	margin-left: 20px;
	list-style-type: circle;
	line-height: 22px; 
	color: #666;
}

.normalBodyCol1 {
	position: absolute;
	left: 0px;
    width:400px;
    padding:10px;	      
}
.normalBodyCol2 {
	position: absolute;
	left: 400px;
    width:400px;
    padding:10px;	 	 
}

.textPill {
    border: 2px solid;
    border-radius: 25px;
    background-color: #DDD;
}

.otherContent {
	font-family: Lato, Arial;
	line-height: 1.8em;
	padding-top: 0px;
	font-size: 13px;
}

.otherContent p {
	width: 740px;
	margin-top:0px;
	margin-bottom: 10px;
	padding-top: 0px;
	padding-bottom: 0px;

}


.horzRuleWide {
	width: 100%;
	margin-bottom: 10px;
	margin-top:20px;
	padding-top: 0px;
	padding-bottom: 0px;
}

hr.horzRuleWide {
    border: 0;
    border-bottom: 1px dashed #e3e3e3;
}

.horzRule {
	width: 200px;
	margin-bottom: 10px;
	margin-top:20px;
	padding-top: 0px;
	padding-bottom: 0px;
}

hr.horzRule {
    border: 0;
    border-bottom: 1px dashed #e3e3e3;
    background: #999;
}

p { 
	font-size: 15px; 
	margin-bottom: 
	15px; margin-top: 
	20px; line-height: 
	1.9em;  color: #666;}

strong { font-family: arvil_sansregular, Arial; }

a {
	color: #4AC9D7; 
	text-decoration: none;	
}

/*
-webkit-box-shadow: 1px 1px 3px rgba(194, 231, 103, 0.5); -moz-box-shadow: 1px 1px 0px rgba(194, 231, 103, 1.0);
*/

header { 
	padding: 5px 0; 
	width: 100%; 
	height: 80px; 
	background-color: #fff; /*border-top: 5px solid #c2e767;*/  
	margin-bottom: 5px; 
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); 
	-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); 
	position: fixed; 
	z-index: 10; f
	loat: left; }

#headercontainer, #contentcontainer { 
	width: 1100px; 
	margin: 0 auto; 
	position: relative; 
}

#contentcontainer { 
	float: none; 
	padding-top: 0px; 
}

nav { width: auto; float: left; }
nav a { color: #55C7DB; text-decoration: none;  padding-bottom: 2px; padding-left: 10px; padding-top: 5px; padding-right: 10px; }
nav a:hover { color: #F64F5E; text-decoration: none;}
nav a:active { color: #F64F5E; text-decoration: none; border-bottom: 1px solid #c2e767; padding-bottom: 2px; position: relative; top: 1px; padding-left: 10px; padding-top: 5px; padding-right: 10px; }
nav ul { position: absolute; right: 0; display: block; margin-top: 50px; }
nav ul li { display: inline; margin-left: 30px; }
nav ul li a { font-size: 18px; border-bottom: none; font-family: ProximaMedium, Arial;}

section { padding-bottom: 20px; padding-top: 35px; float: left; border-bottom: 1px solid #e3e3e3; width: 100%;}


h1.logo {

	float: left;
	margin-top: 5px;
	padding-top: 19px;
	font-size: 30px;
	color: #939393;
	height: 60px;
	background: url("images/tom/logo.png") no-repeat;
	padding-left: 55px;

}

h3 {

	font-family: Lato, Verdana;
	color: #F64F5E;	
	line-height: 1.8em;
	padding-top: 5px;
	font-size: 13px;

}

.logos {
	float: left;

}

#container {
	width:700px;
	margin-bottom: 90px;
	margin-top: 20px;
	height:450px;
	border: 10px solid #fff;
	
	-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6);
	float: left;
	margin-left: 20px;
	position:relative;
	z-index:0;
	 -webkit-border-radius: 3px; -moz-border-radius: 3px;
}

#intro-container-ref {
	width:1100px;
	margin-bottom: 90px;
	margin-top: 20px;
	height:160px;
	border: 10px solid #fff;
	
	-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6);
	float: left;
	margin-left: 20px;
	position:relative;
	z-index:0;
	 -webkit-border-radius: 3px; -moz-border-radius: 3px;	
}

#intro-container-tom {
	position: relative;
	padding-bottom: 0px;
	margin-top:46px; 
	float: left;
	width: 1100px;
	height: 160px;
	z-index:0;	
}

.intro-container {

	padding-bottom: 0px;
	margin-top:46px; 
	float: left;
	width: 1100px;
	height: 160px;
	z-index:0;
}

#availibility {

	float: left;
	margin-top: -15px;
	margin-left: 90px;
	width: 1097px;
	height:300px;
	background: url("images/tom/introPic.jpg") no-repeat;
	-webkit-transition: margin 0.5s ease-out;
	-moz-transition: margin 0.5s ease-out;
	-o-transition: margin 0.5s ease-out;
	
}

#availibility:hover{

	margin-top: 2px;
}

.portfolio-content { width:375px; height: 410px; float: left; padding: 20px;}

#separator {

	border-bottom: 1px solid #b8b8b8;
	width: 100%;

}

.about-text {
	float: left;
}

.dribbble-icon {
	background: url("images/dribbble.png");
	width: 45px;
	height: 45px;
	margin-right: 15px;
	margin-left: 13px;
	float: left;

}

.dribbble-icon: hover {
	background: url("images/dribbble-hover.png");


}

#twitter-icon {
	display: block;
	background: url("images/twitter.png");
	width: 45px;
	height: 45px;
	margin-right: 15px;
	margin-left: 13px;
	float: left;
	-webkit-transition: margin 0.5s ease-out;
	-moz-transition: margin 0.5s ease-out;
	-o-transition: margin 0.5s ease-out;
}

#twitter-icon:hover {
	background: url("images/twitter-hover.png");

}

.zerply-icon {
	width: 45px;
	height: 45px;
	margin-right: 15px;
	margin-left: 15px;
	float: left;

}

.zerply {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 45px;
	height: 45px;
	background: url("images/zerply.png") no-repeat;
}
.zerply span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url("images/zerply.png") no-repeat;
	background-position: 0 -45px;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.zerply:hover span {
	opacity: 1;
}

.twitter {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 45px;
	height: 45px;
	background: url("images/twitter.png") no-repeat;
}
.twitter span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url("images/twitter.png") no-repeat;
	background-position: 0 -45px;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.twitter:hover span {
	opacity: 1;
}

.dribbble {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 45px;
	height: 45px;
	background: url("images/dribbble.png") no-repeat;
}
.dribbble span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url("images/dribbble.png") no-repeat;
	background-position: 0 -45px;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.dribbble:hover span {
	opacity: 1;
}

#about-images {
	text-align: center;
	margin-left: 60px;
	float: left;
}

#about-images img {

	padding-bottom: 10px;
}


#about p {width: 740px; float: left; padding-top: 10px; }
#about-skills {  }

#contact { margin-bottom: 0px; }

input[type="text"] { width: 400px; }
textarea { width: 750px; height: 220px; }
label { color: #7c7c7c; font-size: 16px; padding-bottom: 30px;}
input, textarea { 
	background-color: rgba(225,225,225,0); 
	border: 1px solid rgba(74,201,215,.50); 
	padding: 10px; font-family: Keffeesatz, Arial; color: #4b4b4b; font-size: 18px; -webkit-border-radius: 5px; margin-bottom: 15px; margin-top: 0px; }
input:focus, textarea:focus { 
	border: 1px solid #4AC9D7; 
	background-color: rgba(225,225,225,0.2); ; 
}

input[type="submit"] { 

	background-color:#4AC9D7;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #4AC9D7;
	display:block;
	color:#ffffff;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:10px 63px;
	text-decoration:none;
	
}

input[type="submit"]:hover { 


	background-color:#b4db4c;
}

input[type="submit"]:active {

	position:relative;
	top:1px;

} 






input[type="submit"]:active { position: relative; top: 1px; }

footer { float: left; margin-top: 50px; }
footer ul { margin-bottom: 150px; }
footer ul li { display: inline; margin-right: 50px; }
footer ul li a { font-size: 24px; margin-left: 10px; }
footer ul li img { vertical-align: bottom; position: relative; top: 2px; }