/* Tarv.us Stylesheet by Travis Repetto */

/* Custom Fonts */
@font-face{
	font-family: 'ChunkFive';
	src: url('../fonts/Chunkfive.eot');
	src: local('ChunkFive'), local('ChunkFive'), url('../fonts/Chunkfive.woff') format('woff'), url('../fonts/Chunkfive.ttf') format('truetype'), url('../fonts/Chunkfive.svg#ChunkFive') format('svg');
}

/* Reset Reloaded */
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{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body{ line-height: 1; }
ol, ul{ list-style: none; }
blockquote, q{ quotes: none; }
:focus{ outline: 0; }/* remember to define focus styles! */
ins{ text-decoration: none; }/* remember to highlight inserts somehow! */
del{ text-decoration: line-through; }
table{ border-collapse: collapse; border-spacing: 0; }/* tables still need 'cellspacing="0"' in the markup */

/* Global */
body{ background: #111 none; color: #fff; font: normal 14px/20px Helvetica, Arial, sans-serif; }
h1{ color: #fff; font-size: 24px; }
h2{ color: #999; font-size: 20px; }
h3{ color: #666; font-size: 18px; }
h4{ color: #333; font-size: 16px; }
h5{ color: #666; font-size: 14px; }
h6{ color: #999; font-size: 12px; }
a{ color: #fff; outline: none; text-decoration: none; }
a:hover{ text-decoration: underline; }
strong{ font-weight: bold; }
em{ font-style: italic; }
acronym, abbr{ border-bottom: 1px dotted #ccc; cursor: help; }
sup{ font-size: 10px; vertical-align: super; }
sub{ font-size: 10px; vertical-align: sub; }
hr{ background: #ccc; border: none; color: #ccc; height: 1px; margin: 10px 0; }
fieldset{ border: 2px solid #fff; padding: 10px; }
legend{ font-size: 14px; font-weight: bold; }
blockquote{ margin: 0 0 18px 0; padding: 0 0 0 10px; border-left: 3px solid #fff; font-size: 12px; line-height: 20px; text-align: justify; }
input, select, textarea{ font: normal 1em Helvetica, Arial, sans-serif; }
address{ font-weight: bold; }

/* Standard Classes */
.left{ float: left; }
.right{ float: right; }
.clear{ clear: both; height: 0; overflow: hidden; margin: -1px 0 0 0; font-size: 0; line-height: 0; }
.hidden{ display: none; }
img.left{ margin: 0 10px 10px 0; }
img.right{ margin: 0 0 10px 10px; }
a.top{ padding: 0 15px 0 0; background: transparent url(images/arrow_up.gif) no-repeat right center; line-height: 22px; font-weight: bold; }
.hr{ height: 0; margin: 20px 0; border-top: 1px solid #eee; }
	.hr hr{ display: none; }

/* Containers */
#wrap{ min-width: 960px; }
#container{ background: transparent url(/images/masthead-bg.gif) repeat-x; }
	#masthead{ background: transparent url(/images/masthead-back-bg.jpg) no-repeat top center; }
		#masthead-container{ overflow: hidden; width: 960px; height: 520px; margin: 0 auto; background: transparent url(/images/masthead.png) no-repeat; }
	#portfolio{ background: #171717 url(/images/portfolio-bg.gif) repeat top; }
		#portfolio-container{ overflow: hidden; width: 960px; margin: 0 auto; padding: 20px 0 40px; }
	#footer{ background: transparent url(/images/footer-bg.gif) repeat-x top; }
		#footer-container{ overflow: hidden; width: 960px; margin: 0 auto; padding: 20px 0; }

/* Masthead */
#logo{ float: left; width: 745px; height: 90px; margin: 65px 0 0 0; text-indent: -9999px; }
	#logo a{ display: block; width: 100%; height: 100%; }
	#tagline{ float: left; display: inline; width: 510px; height: 220px; margin: 40px 0 0 20px; padding: 50px 40px 0 50px; }
		/*#tagline h2{ height: 35px; margin: 0 0 20px; text-indent: -9999px; }
		*/#tagline h2{ height: 35px; margin: 0 0 20px; font: normal 40px/40px 'ChunkFive', Helvetica, Arial, sans-serif; color: #fff; text-shadow: 1px 1px 1px #333; }
		#tagline p{ margin: 0 10px 20px; font-size: 16px; line-height: 22px; text-shadow: 1px 1px 1px #333; }
		#tagline p a{ color: #ffc; }
		#tagline p a:hover{ text-decoration: underline; }
		#tagline #btn-resume{ float: left; display: inline; width: 200px; height: 60px; margin: 0 10px 0 5px; background: transparent url(/images/btn-resume.png) no-repeat top; text-indent: -9999px; }
		#tagline #btn-resume:hover{ background-position: bottom; }
		#tagline #resume-desc{ padding: 19px 0 0 0; font-size: 16px; font-weight: bold; }
	#btn-twitter{ float: right; display: inline; width: 165px; height: 90px; margin: 45px 30px 0 0; text-indent: -9999px; }
	#twitter{ position: relative; float: right; display: inline; overflow: hidden; width: 240px; height: 250px; margin: 40px 20px 0 0; padding: 15px 20px 5px 20px; font-size: 12px; }
		#twitter-bg-fade{ position: absolute; bottom: 0; left: 0; width: 280px; height: 30px; background: transparent url(/images/twitter-bg-fade.png) no-repeat; }
		.twitted{}
		.twitted h2{ margin: 0; font-size: 1em; color: #333; }
		.twitted p.preLoader{ margin: 0; padding: 1em 1em 1em 3em; }
		.twitted ul#twitter_update_list{ margin: 0; padding: 0; list-style-type: none; }
		.twitted ul#twitter_update_list li{ margin: 0; padding: 0 0 10px; color: #666; line-height: 15px; }
		.twitted ul#twitter_update_list li span{ /* tweet content */ display: block; }
		.twitted ul#twitter_update_list li span a{ /* links in tweet content */ color: #ce5b00; }
		.twitted ul#twitter_update_list li a{ /* timestamp link */ color: #999; }
		.twitted ul#twitter_update_list li.firstTweet{}
		.twitted ul#twitter_update_list li.lastTweet{ border-bottom: none; }

/* Portfolio */
#portfolio #portfolio-nav{ width: 310px; height: 40px; margin: 0 0 0 5px; overflow: hidden}
	#portfolio #portfolio-nav li{ float: left; cursor: pointer; list-style: none; height: 40px; background: transparent url(/images/portfolio-tabs-bg.gif) no-repeat; text-indent: -9999px; }
	#portfolio #portfolio-nav li#portfolio-web-link{ width: 150px; background-position: top left; }
	#portfolio #portfolio-nav li#portfolio-web-link.selected{ cursor: default; background-position: bottom left }
	#portfolio #portfolio-nav li#portfolio-3d-link{ width: 160px; background-position: top right; }
	#portfolio #portfolio-nav li#portfolio-3d-link.selected{ cursor: default; background-position: bottom right }
.portfolio-content{ width: 940px; height: 200px; padding: 10px; overflow: hidden; background: transparent url(/images/screenshot-bg.gif) no-repeat top left; }
	.portfolio-content .thumbs{ float: left; display: inline; width: 300px; height: 200px; margin: 0 20px 0 0; }
		.portfolio-content .thumb-item{ float: left; display: inline; overflow: hidden; width: 90px; height: 60px; margin: 5px 5px 0; list-style: none; cursor: pointer; }
		.portfolio-content .thumb-item img{ width: 90px }
		.portfolio-content .thumb-item div{ display: none; }
	.container-fade{ float: left; display: inline; width: 620px; height: 200px; }
	.portfolio-content .info{ float: left; display: inline; width: 270px; height: 170px; margin: 0 20px 0 0; padding: 15px; }
		.portfolio-content .info h5{ margin: 0; color: #be4900; line-height: 14px; }
		.portfolio-content .info h5 a{ color: #be4900; }
		.portfolio-content .info .employer{ color: #666; font-size: 11px; font-style: italic; }
		.portfolio-content .info p{ padding: 0 0 5px; font-size: 12px; line-height: 18px; }
		.portfolio-content .info ul{ padding: 0 0 5px; }
		.portfolio-content .info li{ width: 240px; padding: 0 0 0 27px; background: transparent url(/images/ico-leaf.png) no-repeat 0 50%; color: #999; font-size: 11px; line-height: 18px; }
		.portfolio-content .info .external{ padding: 0 15px 0 0; background: transparent url(/images/ico-arrow.png) no-repeat 100% 50%; font-size: 12px; font-weight: bold; }
	.portfolio-content .screenshot{ float: left; display: inline; width: 300px; height: 200px; background-repeat: no-repeat; background-position: top center; }
		.portfolio-content .screenshot:hover span{ display: block; width: 100%; height: 100%; background: transparent url(/images/btn-plus.png) no-repeat center center; }
	#portfolio-3d.portfolio-content .screenshot{ background-position: center center; }

/* Footer */
#footer{}
	#footer-left{ float: left; width: 50%; background: transparent url(/images/ico-orange.gif) no-repeat top left; }
	#footer-right{ float: left; width: 50%; text-align: right; }
	#copyright{ margin: 0 0 0 30px; font-size: 12px; font-weight: bold; }
	#social-links{}
		#social-links li{ display: inline; list-style: none; }
		#social-links li a{ display: inline-block; margin: 0 5px 0 0; padding: 0 0 0 20px; background-repeat: no-repeat; background-position: 0 50%; font-size: 12px; font-weight: bold; }
		.link-twitter{ background-image: url(/images/icons/twitter.png); }
		.link-flickr{ background-image: url(/images/icons/flickr.png); }
		.link-linkedin{ background-image: url(/images/icons/linkedin.png); }
		.link-deviantart{ background-image: url(/images/icons/deviantart.png); }
		.link-facebook{ background-image: url(/images/icons/facebook.png); }
		.link-youtube{ background-image: url(/images/icons/youtube.png); }
		.link-email{ background-image: url(/images/icons/email.png); }

/* Contact Form */
.link-contact{ display: block; float: right; width: 10px; height: 10px; }
#contact-container{ display: none; }
	#contact{ width: 400px; height: 300px; background-color: #666; color: #666; }
		#contact p{ padding: 40px 0 0 0; color: #333; font-size: 14px; font-weight: bold; text-align: center; }
	#contact-form{ padding: 20px; }
		#contact-form label{ color: #333; }
		#contact-form input.text{ width: 270px; height: 20px; margin: 0 0 10px; padding: 5px; border: 0 none; background: transparent url(/images/text-bg.gif) no-repeat top left; color: #999; font-size: 16px; }
		#contact-form textarea.text{ width: 270px; height: 100px; margin: 0 0 10px; padding: 5px; border: 0 none; background: transparent url(/images/textarea-bg.gif) no-repeat; color: #999; font-size: 16px; }
		#contact-form .error{ width: 255px; padding-right: 20px; background-position: bottom left; color: #b54c4c; }
		#contact-form .submit{ display: block; width: 75px; height: 30px; background: transparent url(/images/submit-bg.gif) no-repeat top; text-indent: -9999px; }
		#contact-form .submit:hover{ background-position: bottom; }

/* Moble Styles */
@media all and (max-device-width: 767px), all and (max-width: 449px) {
	/* Reset iPhone */
	html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; -webkit-text-size-adjust: none; }
	body{ font-size: 10px; }
	ul, li, ol, dl, dd, dt{ list-style: none; padding: 0; margin: 0; }
	a{ text-decoration: none;}
	
	#wrap{ width: 100%; min-width: 100%; overflow: auto; }
	#container{ margin: 20px 10px; background: transparent none; }
	#masthead{ background: transparent none; }
		#masthead-container{ overflow: visible; width: auto; height: auto; margin: 0; background: transparent none; }
	#portfolio{ display: none; }
		#portfolio-container{ display: none; }
	#footer{ background: transparent none; }
		#footer-container{ overflow: visible; width: auto; margin: 0; padding: 0; }
	
	/* Masthead */
	#logo{ float: none; width: auto; height: auto; margin: 0 0 10px 0; font-size: 16px; text-indent: 0; }
	#logo a{ display: inline; width: auto; height: auto; }
	#tagline{ float: none; display: inline; width: auto; height: auto; margin: 0; padding: 0; }
		#tagline h2{ height: auto; margin: 0 0 10px 0; font: normal 30px/30px 'ChunkFive', Helvetica, Arial, sans-serif; }
		#tagline p{ margin: 0 0 10px 0; font-size: 12px; }
		#tagline #btn-resume{ float: none; display: block; margin: 5px 0; }
		#tagline #resume-desc{ padding: 0; }
	#btn-twitter, #twitter, #twitter *{ display: none !important; }
	
	/* Footer */
	#footer-left, #footer-right{ float: none; width: auto; margin: 0 0 10px 0; text-align: left; }
}