/* Citrus Samurai CSS by Travis Repetto */

/* MediaQuery-Reporter Styles
body:after{ content: "less than 320px"; font-size: 300%; font-weight: bold; position: fixed; bottom: 60px; width: 100%; text-align: center; background-color: hsla(1,60%,40%,0.7); color: #fff; }
@media only screen and (min-width: 320px){
    body:after{ content: "320 to 480px"; background-color: hsla(90,60%,40%,0.7); }
}
@media only screen and (min-width: 480px){
    body:after{ content: "480 to 768px"; background-color: hsla(180,60%,40%,0.7); }
}
@media only screen and (min-width: 768px){
    body:after{ content: "768 to 1024px"; background-color: hsla(270,60%,40%,0.7); }
}
@media only screen and (min-width: 1024px){
    body:after{ content: "1024 and up"; background-color: hsla(360,60%,40%,0.7); }
}
*/

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

/* 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; border-bottom: 1px solid #c65400; }
		body.konami #masthead{ background: transparent url(/images/starwarscat.gif) repeat; }
		#masthead-container{ overflow: hidden; width: 960px; margin: 0 auto;  }
	#portfolio{ background: #171717 url(/images/portfolio-bg.gif) repeat top; }
		#portfolio-container{ overflow: hidden; width: 960px; margin: 0 auto; padding: 20px 0; }
	#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{ width: 750px; height: 120px; margin: 65px auto 0; background: transparent url(/images/masthead.png) no-repeat; text-indent: -9999px; }
	#logo a{ display: block; width: 100%; height: 100%; }
	#tagline{ margin: 20px 10px; padding: 10px; background: rgb(168,69,0); background: rgba(0,0,0,0.15); -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.15); -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.15); box-shadow: inset 0 0 5px rgba(0,0,0,0.15); }
		#tagline-inner{ padding: 20px; background: rgb(142,57,0); background: rgba(0,0,0,0.15); -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.15); -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.15); box-shadow: inset 0 0 5px rgba(0,0,0,0.15); }
		#tagline h2{ margin: 0 0 10px; font: normal 40px/40px 'ChunkFiveRegular', Helvetica, Arial, sans-serif; color: #fff; text-align: center; text-shadow: 1px 1px 1px #333; }
		#tagline p{ font-size: 16px; line-height: 22px; text-shadow: 1px 1px 1px #333; text-align: center; }
		#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; }

/* Portfolio */
#portfolio #portfolio-nav{ margin: 0 0 0 10px; overflow: hidden; }
	#portfolio #portfolio-nav li{ float: left; cursor: pointer; list-style: none; padding: 5px 10px 0; border: 1px solid #333; border-width: 1px 1px 0; background: rgb(30,30,30); font: normal 20px/30px 'ChunkFiveRegular', Helvetica, Arial, sans-serif; color: #555; text-align: center; text-shadow: 1px 1px 1px #000; -moz-box-shadow: 0 0 3px rgba(0,0,0,0.25); -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.25); box-shadow: 0 0 3px rgba(0,0,0,0.25); }
	#portfolio #portfolio-nav li.selected{ cursor: default; border-color: transparent; background: rgb(102,43,17); background: rgba(170,52,0,0.35); color: #fff; }
	#portfolio #portfolio-nav li + li{ margin-left: 5px; }
.portfolio-content{ width: 940px; padding: 10px; overflow: hidden; background: rgb(102,43,17); background: rgba(170,52,0,0.5); }
	.portfolio-content .thumbs{ float: left; display: inline; width: 300px; height: 200px; margin: 0 20px 0 0; background: rgb(51,21,8); background: rgba(0,0,0,0.5); -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.75); -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.75); box-shadow: inset 0 0 5px rgba(0,0,0,0.75); }
		.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: 100%; }
		.portfolio-content .thumb-item div{ display: none; }
	.container-fade{ float: left; display: inline; width: 620px; }
	.portfolio-content .info{ float: left; display: inline; width: 270px; height: 170px; margin: 0 20px 0 0; padding: 15px; background: rgb(51,21,8); background: rgba(0,0,0,0.5); -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.75); -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.75); box-shadow: inset 0 0 5px rgba(0,0,0,0.75); }
		.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; -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.75); -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.75); box-shadow: inset 0 0 5px rgba(0,0,0,0.75); }
		.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%; }
	#footer-right{ float: left; width: 50%; text-align: right; }
	#copyright{ display: inline-block; padding: 0 0 0 30px; background: transparent url(/images/ico-orange.gif) no-repeat top left; 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{ width: 320px; height: 280px; background: #d86600; /* Old browsers */ background: -moz-linear-gradient(top, #d86600 0%, #a42c00 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d86600), color-stop(100%,#a42c00)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #d86600 0%,#a42c00 100%); /* Chrome10+,Safari5.1+ */ background: -ms-linear-gradient(top, #d86600 0%,#a42c00 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d86600', endColorstr='#a42c00',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #d86600 0%,#a42c00 100%); /* W3C */ -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.25); -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.25); box-shadow: inset 0 0 5px rgba(0,0,0,0.25); color: #666; }
		#contact-message{ padding: 120px 0 0 0; color: #fff; text-align: center; }
		#contact-message h3{ color: #fff; }
	#contact-form{ padding: 20px 0 0 20px; }
		#contact-form label{ color: #333; }
		#contact-form .text{ margin: 0 0 10px; padding: 5px; border: 1px solid #999; background: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5); box-shadow: inset 0 0 5px rgba(0,0,0,0.5); color: #000; font-size: 16px; }
		#contact-form input.text{ width: 270px; height: 20px; }
		#contact-form textarea.text{ width: 270px; height: 100px; }
		#contact-form .error{ background-color: #ffc; color: #f00; }
		#contact-form .submit-button{ display: inline-block; padding: 5px 10px; border: 1px solid #ccc; background: #be4900; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5); box-shadow: 0 0 3px rgba(0,0,0,0.5); color: #ff; font-weight: bold; }
		#contact-form .submit-button:hover{ background-color: #a42c00; text-decoration: none; }

/* iPhone */
@media only screen and (max-device-width: 480px){
	body{ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: none; }
	#wrap{ min-width: 100%; }
		#masthead-container, #portfolio-container, #footer-container{ width: auto; }
		#portfolio-container{ padding-bottom: 0; }
	#logo{ width: 90%; height: 0; padding-top: 15%; margin: 10px auto 0; background-size: 100%; }
	#tagline{ margin: 3%; padding: 2%; }
		#tagline-inner{ padding: 4%; }
		#tagline h2{ margin: 0 0 2%; font: normal 20px/20px 'ChunkFiveRegular', Helvetica, Arial, sans-serif; }
		#tagline p{ font-size: 12px; line-height: 1.2; text-shadow: 1px 1px 1px #333; text-align: center; }
	.container-fade{ float: left; display: inline; width: 100%; }
	.portfolio-content{ width: auto; }
		.portfolio-content .thumbs, .portfolio-content .info, .portfolio-content .screenshot{ float: none; display: block; margin: 0 auto; }
	#footer-container{ padding: 3% 0; }
		#footer-left, #footer-right{ float: none; width: 100%; text-align: center; }
		#copyright{ margin: 0 0 2%; }
	#contact{ width: 250px; }
		#contact-form input.text{ width: 200px; }
		#contact-form textarea.text{ width: 200px; height: 70px; }
}

/* iPad Portrait Orientation */
@media only screen and (min-device-width: 768px) and (max-device-width: 769px) and (orientation: portrait){
	body{ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: none; }
	#wrap{ min-width: 100%; }
		#masthead-container, #portfolio-container, #footer-container{ width: auto; }
		#portfolio-container{ padding-bottom: 0; }
	#logo{ width: 90%; height: 0; padding-top: 15%; margin: 10px auto 0; background-size: 100%; }
	#tagline{ margin: 3%; padding: 2%; }
		#tagline-inner{ padding: 4%; }
		#tagline h2{ margin: 0 0 2%; font: normal 20px/20px 'ChunkFiveRegular', Helvetica, Arial, sans-serif; }
		#tagline p{ font-size: 12px; line-height: 1.2; text-shadow: 1px 1px 1px #333; text-align: center; }
	.container-fade{ float: left; display: inline; width: 100%; }
	.portfolio-content{ width: auto; }
		.portfolio-content .thumbs, .portfolio-content .info, .portfolio-content .screenshot{ float: none; display: block; margin: 0 auto; }
}